diff --git a/design/briefs/site.md b/design/briefs/site.md
new file mode 100644
index 00000000..7c9fafde
--- /dev/null
+++ b/design/briefs/site.md
@@ -0,0 +1,167 @@
+# rowkit.dev 2.0 — бриф на сайт
+
+8 октября 2026 · бриф для дизайнера. Файл: [rowkit × Windows 98](https://www.figma.com/design/hmDfFpjrDP6WtEary6U6SE/rowkit-%C3%97-Windows-98), новая страница «Site v2». Бренд — страница «Brand» (гайд 173:35331).
+
+## Зачем
+
+Сейчас rowkit.dev — эмуляция операционной системы: рабочий стол, Dock, «Пуск», каждая страница в окне Explorer или Finder. Это мило один раз и мешает каждый следующий:
+
+- главная не говорит, что это и почему это стоит взять — она играет в ОС;
+- меню слева набрано мелко (13px), текст зажат рамками окна, на телефоне окна тесные;
+- переключатель тем — мелкий текст в панели задач, его не находят.
+
+Нужен **сайт продукта**: красивый лендинг и удобная документация. Две темы остаются главным аргументом, но как витрина, а не как костюм: один и тот же сайт выглядит как Windows 98 или как modern, и это видно с первого экрана.
+
+## Аудитория и что она должна понять
+
+Фронтенд-разработчик или тимлид, который выбирает набор компонентов для продуктового интерфейса на Vue 3 (админка, внутренний инструмент, SaaS). За 10 секунд на главной он должен понять:
+
+1. **Что это:** профессиональный набор компонентов для продуктовых интерфейсов на Vue 3 и TypeScript.
+2. **Чем отличается:** один набор — любой вид. Тема — это только токены; Windows 98 и modern в комплекте, свою можно сделать одним вызовом.
+3. **Что он серьёзный:** типы, доступность с тестами, своё поведение без сторонних библиотек, SSR, лимит размера, инструкции для ИИ-агентов в пакете.
+4. **Что он растёт:** 21 компонент сегодня, план на остальное — меню, даты, палитра команд и т. д.
+5. **Как начать:** `npm i rowkit@beta`, две строки CSS.
+
+Тон: точный, спокойный, уверенный, с лёгкой игрой — игра в переключении тем, а не в декорациях.
+
+## Решения, которые уже приняты
+
+- **Весь сайт** — лендинг и документация — в обычном каркасе: шапка, меню слева, текст по центру, оглавление справа. Рабочий стол, Dock, «Пуск», панель задач, окна вокруг страниц уходят.
+- **Лендинг — в двух стилях.** Windows 98 — «шкурка» того же лендинга, а не другая раскладка: серая грань, фаски, PT Sans, синие выделения, пиксельные иконки.
+- **Документация — стандартная тема VitePress с брендом** (вариант B, решение 9 октября; вариант A — свой каркас в двух шкурках — остаётся в Figma как отклонённый). Нейтрально и привычно; брендинг — логотип, цвет vermilion на ссылках, активном пункте меню и маркерах, врезка TIP в цвете бренда, меню 15px вместо 14. Светлая и тёмная схема — штатный переключатель VitePress.
+- **Переключатель «Windows 98 | Modern» в документации** стоит в шапке VitePress («Components: Windows 98 | Modern») и меняет только живые примеры компонентов, а не оболочку страницы.
+- **Сайт открывается в modern**, Windows 98 — переключателем или `?theme=win98`. Выбор запоминается.
+- **Modern-лендинг брендирован** — это вид по умолчанию: бумажный фон `#FAFAF8` (в тёмной — `night`), слова «product interfaces» в заголовке, метка над ним, главные кнопки, ссылки со стрелкой, подписи секций (THEMES, COMPONENTS, WHY ROWKIT…), номера шагов и плашки иконок — в vermilion; подвал — чернила `#111114` с белым логотипом. Живые компоненты внутри (демо, превью) — чистый modern, без цвета бренда. Win98-лендинг брендом не красится.
+- **Бренд над темами:** знак, вордмарк, vermilion в шапке и подвале одинаковы в обеих темах (в Win98 — пиксельное прочтение знака 16/32).
+
+## Шрифты и размеры (обе темы)
+
+Читать должно быть удобно в первую очередь. Ориентир — modern; Win98 повторяет размеры в PT Sans.
+
+| Роль                     | Размер / строка | Примечание                                |
+| ------------------------ | --------------- | ----------------------------------------- |
+| Заголовок лендинга       | 48–56 / 1.1     | на телефоне 34–36                         |
+| Подзаголовок лендинга    | 20 / 30         |                                           |
+| H1 страницы документации | 32 / 40         |                                           |
+| H2                       | 24 / 32         |                                           |
+| H3                       | 18 / 26         |                                           |
+| Основной текст           | 16 / 26         | колонка 680–720px, ~70 знаков             |
+| Меню слева               | 15 / 22         | разделы — 13px заглавными или полужирным  |
+| «На этой странице»       | 14 / 20         |                                           |
+| Код                      | 14 / 22         | моно; в Win98 — VT323 крупнее, как сейчас |
+
+Цели касания на телефоне ≥ 44px. Контраст текста ≥ 4.5:1 в обеих темах и обеих схемах.
+
+## Каркас документации
+
+> С 9 октября документация — стандартная тема VitePress с брендом (см. «Решения»). Описание ниже — вариант A, оставлено для истории; для варианта B действуют: шапка VitePress + переключатель компонентов, меню 15px, контент 688px, оглавление справа, «Previous page / Next page», TIP-врезка цветом бренда, код с подсветкой (github-light / github-dark), живые примеры в рамке.
+
+**Шапка (64px; телефон 56px).** Логотип · Docs · Components · Patterns · Storybook · GitHub · поиск (⌘K) · **переключатель тем** · версия. Переключатель крупный и подписанный: сегменты «Windows 98 | Modern» и кнопка схемы Auto/Light/Dark. В Win98 — как переключатель на панели инструментов (вдавленная кнопка у выбранной), в modern — сегментированный контрол.
+
+**Меню слева (260px).** Разделы: Guide, Components (Foundations / Forms / Data / Overlays), Patterns, Foundations · Tokens, Decisions, Roadmap, Contributing. Все разделы раскрыты; текущая страница подсвечена; меню прокручивается отдельно от страницы. На телефоне — выезжающая панель из кнопки в шапке.
+
+**Содержимое (до 720px).** Хлебные крошки → H1 → вводный абзац (крупнее, 18/28) → разделы. Примеры: живой пример над кодом, код со строкой «Copy». Таблицы props — как сейчас (генерируются), но в ширину колонки без горизонтального скролла. Внизу: «Previous / Next», «Edit on GitHub», дата.
+
+**Справа (220px, ≥1280px).** «On this page» с подсветкой текущего раздела.
+
+**Поиск.** Одна палитра поиска по ⌘K в обеих темах (сейчас Spotlight в modern, окно Find в Win98): поле, недавние, результаты по группам, «ничего не найдено». В Win98 — диалог с фаской, в modern — карточка со стеклом.
+
+**404.** Обычная страница в каркасе: «Page not found», адрес, «Go to Home», поиск.
+
+## Лендинг
+
+Ширина контента 1200px, секции с воздухом (96–128px между ними, на телефоне 64). Сверху вниз:
+
+1. **Первый экран.** Слева: заголовок «Vue 3 components for product interfaces», подзаголовок («A professional toolkit — typed, accessible, themeable. Windows 98 and modern in the box, your own in one call.»), команда установки с кнопкой копирования, кнопки «Get started» и «Browse components». Справа: **живое демо** — таблица пользователей с фильтром, выбором и пагинацией в текущей теме (тот же код, что сейчас в «Live demo»). Над демо или под ним — крупный переключатель «Windows 98 | Modern»: клик перекрашивает весь сайт, и это первое, что хочется нажать.
+2. **«One set, any look».** Одна и та же форма «New user» дважды рядом — в Windows 98 и в modern (`data-theme` на контейнере, вживую). Ниже — пример `defineTheme` из `rowkit/theme` и третья, «своя» тема рядом (например, фиолетовая): видно, что тема — это значения, а не компоненты.
+3. **Что внутри.** Сетка компонентов по разделам (Foundations, Forms, Data, Overlays): у каждого — маленькое живое превью в текущей теме, имя, одна строка «для чего». Отдельной строкой — «Coming next»: меню, Popover, Sheet, даты, палитра команд, Tabs, Switch, Combobox — серыми карточками с пометкой «Planned», ссылка на Roadmap. Это и есть «их будет много».
+4. **Почему это профессиональные компоненты.** 6 карточек:
+   - **Typed** — дженерики в `DataTable` и `Select`, строгий TypeScript, без `any`;
+   - **Accessible** — WAI-ARIA, клавиатура, a11y-проверка в CI на каждой истории;
+   - **Own behaviour layer** — фокус, слои, позиционирование без сторонних библиотек;
+   - **Tokens all the way down** — `@rowkit/tokens`, 313 токенов с описаниями;
+   - **SSR и Nuxt** — работает без настройки;
+   - **Ready for coding agents** — `AGENTS.md` в пакете.
+     Плюс строка цифр: тесты (~1500), размер (39 kB вся библиотека, 2.6 kB одна кнопка), 21 компонент.
+5. **Пример кода.** «A data table page in 20 lines»: код слева, результат справа (FilterBar + DataTable + Pagination).
+6. **Начать.** Три шага: установить, подключить стили, выбрать тему — и кнопка «Read the guide».
+7. **Подвал.** Логотип, слоган, ссылки (Docs, Components, Roadmap, GitHub, npm, Storybook), MIT, «Built with rowkit».
+
+## Два стиля сайта
+
+| Часть              | Windows 98                                                          | Modern (light / dark)                                     |
+| ------------------ | ------------------------------------------------------------------- | --------------------------------------------------------- |
+| Фон страницы       | серый `#C0C0C0` для рамок; белый под текстом                        | `background` темы; секции лендинга — едва заметные полосы |
+| Шапка              | панель инструментов с фаской снизу, кнопки-иконки                   | полупрозрачная, размытие, линия снизу                     |
+| Меню слева         | белая колодезная панель (sunken), синее выделение, пиксельные папки | без рамки, скруглённое серое выделение, контурные иконки  |
+| Карточки           | GroupBox с подписью на рамке или raised-панель                      | скруглённые карточки с тенью                              |
+| Кнопки, поля       | компоненты rowkit в теме — без своих стилей сайта                   | так же                                                    |
+| Заголовок лендинга | PT Sans Bold, чёрный; акцент — синий `#000080`                      | системный шрифт, semibold; акцент — синий темы            |
+| Ссылки             | синие, подчёркнутые                                                 | синие, подчёркивание при наведении                        |
+
+Вся «шкурка» — токены темы. Свои цвета сайта — только бренд (знак, vermilion) и подсветка кода `site/code-*`.
+
+## Телефон (390)
+
+Шапка: логотип, поиск, переключатель (сжатый: «98 | M» или иконка с меню), кнопка меню. Лендинг в одну колонку: демо под заголовком, компактная таблица (Name / Status), сетка компонентов в 2 колонки. Документация: меню и оглавление — выезжающие панели.
+
+## Что нарисовать
+
+Страница «Site v2» в Figma (254:9584):
+
+- [x] Компоненты сайта: Header, HeaderMobile, ThemeSwitch (win98 / modern), Search, NavItem, SideNav, Toc, FeatureCard, ComponentCard, Footer, SearchPalette; иконки «Site icons» (контурные 24 и пиксельные 16/32).
+- [x] Лендинг: 1440 и 390 × Windows 98, Modern Light, Modern Dark.
+- [x] Вариант A документации (отклонён): страница компонента, статья, список, поиск, 404 — 1440 и 390 × три вида.
+- [x] Вариант B документации: стандартная тема VitePress с брендом — страница компонента, светлая и тёмная.
+- [x] Лист «Site v2 — decisions».
+- [ ] Вариант B: телефон 390 и страница-статья — по необходимости, VitePress задаёт их сам.
+
+## Правки после ревью (9 октября)
+
+- [x] Карточки в одном ряду — одной высоты (Start in a minute, Built like a professional tool, сетки компонентов).
+- [x] Рамка карточек: в modern — тонкая обводка 1px (`border-subtle`) без тени; в Win98 — фаска без обводки. Код в шагах — на своей подложке.
+- [x] Свои иконки для «Built like a professional tool»: скобки, доступность, слои, образцы цвета, сервер, искра — контурные в modern, пиксельные 32px в Win98.
+- [x] Подсветка синтаксиса во всех блоках кода лендинга (`site/code-*`: keyword, string, tag, attr, comment, number).
+- [x] Иконки modern-темы тоньше: линия 2.25 → 1.75 (на сетке 24, то есть ≈1.2px в 16px), глифы 3 → 2.5, 32-px 1.5 → 1.25. **Это изменение библиотеки:** выгрузить SVG из Figma в `packages/ui/src/icons/modern/`, `pnpm icons:modern`, changeset (`rowkit` minor — «modern icons draw a lighter line»), проверить кадры Storybook в modern.
+- [x] Брендирование modern-лендинга vermilion (см. «Решения»).
+- [x] Документация → стандартная тема VitePress с брендом (см. «Решения»).
+
+## Правки «полезнее для людей» (9 октября)
+
+- [x] Под установкой — требования: «Vue 3.5+ · Tailwind CSS v4 · TypeScript · MIT».
+- [x] Под живым демо — «Live — sort, select and filter this table.» и «View source →».
+- [x] После сетки компонентов — кнопка «See all 21 components» (на телефоне была).
+- [x] Новая секция «Before you install» (FAQ) перед «Start in a minute»: готово ли к продакшену, нужен ли Tailwind, какая тема по умолчанию (Windows 98 без атрибута — путает, раз сайт открывается в modern), Nuxt и SSR, размер, лицензия.
+- [x] Документация: под вводным абзацем — строка импорта (`import { DataTable } from 'rowkit'`) и ссылки «Storybook ↗ · Source ↗ · Report an issue ↗».
+
+## Уборка в Figma (9 октября)
+
+- Удалены кадры варианта A документации (страница компонента, меню, статья, список, поиск, 404 — все виды) и компоненты, нужные только им: `SiteV2/NavItem`, `SideNav`, `Toc`.
+- Страницы старого сайта переименованы в «Archive — Site v1 · Windows 98 desktop» и «Archive — Site v1 · Modern desktop» и перенесены в конец файла: код сайта до вёрстки 2.0 ещё на них.
+
+## План вёрстки
+
+1. [x] **Иконки** — выгрузка и changeset (отдельный PR, библиотека).
+2. [x] **Документация** — вернуть стандартную тему VitePress: убрать `SiteLayout`/`ExplorerLayout`, рабочий стол и окна; бренд через `--vp-c-brand-*`, логотип, меню 15px; переключатель «Components: Windows 98 | Modern» в `nav-bar-content-after`, ставит `data-theme` на живые примеры (`DemoBox`), не на страницу; поиск — штатный local search; 404 — штатный с брендом.
+3. [x] **Лендинг** — `layout: home` со своим компонентом: секции по макету, живое демо и форма «New user» из кода, `data-theme` на корне лендинга по переключателю, бренд-цвета сайта. Код — `docs/.vitepress/theme/components/landing/`, значения сайта — `landing.css`. Отступления от макета:
+   - vermilion как цвет текста — `#c8361c` (у `#d63a1f` на бумаге 4.48:1, чуть ниже AA); кнопки и заголовок — `#d63a1f`;
+   - «Your theme» задаёт пять значений, а не два: без hover, active и `--color-checked` третья панель была бы наполовину синей, а код под ней — неправдой;
+   - «A data table page in twenty lines»: `columns` — массив объектов, как его на самом деле принимает `DataTable` (в макете — массив строк);
+   - данные демо — из `home-users.ts` (адреса `@example.com`, колонка Seats вместо Logins).
+4. [x] **Проверка** — скриншоты 390/1440 в обеих схемах и в Win98-лендинге, контраст, Lighthouse, нет горизонтального скролла. Lighthouse (главная, Introduction, Installation, Button, DataTable, Themes; телефон и десктоп): Accessibility и SEO — 100 везде, Best Practices — 96 (локально нет скрипта Vercel Analytics). По ходу:
+   - подсветка кода в документации — `github-light-high-contrast` / `github-dark-default`: у штатных github-light и github-dark цвета токенов 3.2–4.3:1;
+   - строчный код — `brand-2` (у `brand-1` на сером 4.3:1), подпись языка блока — `text-2`;
+   - «Your theme» и конструктор тем отдают `<style>` через `innerHTML` — текстом сервер экранировал кавычки, и гидратация расходилась;
+   - переключатель примеров в шапке — с 1360px: на 1280 шапке не хватало 6px, ниже 1360 он над текстом страницы.
+
+## Что сохраняется из кода
+
+Живое демо таблицы, «Side by side», конструктор тем, страница Tokens с таблицей, таблицы props, подсветка кода, данные компонентов. Уходят: `DesktopHome`, `SiteDock`, `StartMenu`, `SiteTaskbar`, `SiteWallpaper`, `SiteMenuBar`, `ExplorerLayout` и `SiteLayout` (окна), `FindWindow` и `SpotlightSearch` (поиск — штатный VitePress), `SiteAddressBar`, `FolderTree` (меню — штатный сайдбар VitePress).
+
+## Готово, когда
+
+- главная за 10 секунд отвечает на пять вопросов из «Аудитории»;
+- основной текст ≥ 16px, меню ≥ 15px, нигде нет горизонтального скролла на 390–1440;
+- переключатель тем виден на любой странице без поиска глазами;
+- обе темы и обе схемы проходят контраст AA; Lighthouse Accessibility ≥ 95;
+- Windows 98 узнаётся с первого взгляда, но страница читается как обычный сайт.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index c015d01e..403641ba 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,8 +1,6 @@
-import { createRequire } from 'node:module'
 import tailwindcss from '@tailwindcss/vite'
 import { defineConfig, type UserConfig } from 'vitepress'
 import { describe, pageHead, sharedHead } from './social'
-import { win98Code } from './syntax'
 import { tables } from './tables'
 import { themeBootScript } from './theme/components/site/useSiteTheme'
 
@@ -15,26 +13,26 @@ import { themeBootScript } from './theme/components/site/useSiteTheme'
 type VitePressPlugin = NonNullable<NonNullable<UserConfig['vite']>['plugins']>[number]
 
 /**
- * rowkit.dev as a desktop in either theme, from the Figma Site pages: the home
- * page is the desktop, every docs page an Explorer window in Windows 98 and a
- * Finder window in modern, built from rowkit's own components in
- * `theme/components/site` and `theme/components/home`.
- *
- * VitePress still renders the markdown, builds the search index and supplies
- * the `.vp-doc` content styles the site layers its own on top of.
+ * rowkit.dev 2.0 (design/briefs/site.md): the docs are VitePress's default
+ * theme with the brand on it, light and dark; the live examples are drawn in
+ * the rowkit theme the nav bar's «Components» switch picks.
  */
 export default defineConfig({
   title: 'rowkit',
-  // «DataTable — rowkit», as the Explorer window and the taskbar name a page.
   titleTemplate: ':title — rowkit',
   description: 'A professional Vue 3 toolkit — the components a product interface is built from.',
   lang: 'en-GB',
   cleanUrls: true,
-  // The Explorer window's status bar shows when the page last changed.
   lastUpdated: true,
 
   // Callout titles as the Figma panels read: «Tip», not «TIP».
   markdown: {
+    /*
+     * GitHub's colours, in the variants whose every token clears 4.5:1 on
+     * VitePress's code block: the plain github-light has red, green and orange
+     * at 3.2–4.3:1 on #f6f6f7, and github-dark's comments are 3.8:1.
+     */
+    theme: { light: 'github-light-high-contrast', dark: 'github-dark-default' },
     container: {
       tipLabel: 'Tip',
       infoLabel: 'Note',
@@ -43,15 +41,8 @@ export default defineConfig({
       detailsLabel: 'Details',
     },
     config: (md) => md.use(tables),
-    // Code in a Windows 98 IDE's colours. See `syntax.ts`.
-    theme: win98Code,
   },
 
-  // The site switches theme and scheme with its own control and rowkit's
-  // attributes. This removes VitePress's light/dark switch and its `.dark`
-  // class, rather than leaving a second toggle that restyles nothing.
-  appearance: false,
-
   sitemap: { hostname: 'https://rowkit.dev' },
 
   // Link previews: a description from each page's first paragraph, and the
@@ -85,20 +76,6 @@ export default defineConfig({
    * layer statement that restates a known order is a no-op.
    */
   vite: {
-    resolve: {
-      /*
-       * The Find window reads VitePress's own search index with the same
-       * MiniSearch VitePress uses. pnpm keeps it out of the theme's reach, so
-       * point at VitePress's copy rather than adding a second one.
-       */
-      alias: {
-        // The package's folder: it exports no package.json, so take its entry
-        // file and cut back to the folder, which Vite then resolves itself.
-        minisearch: createRequire(createRequire(import.meta.url).resolve('vitepress'))
-          .resolve('minisearch')
-          .replace(/[\\/]dist[\\/].*$/, ''),
-      },
-    },
     plugins: [
       {
         name: 'rowkit-layer-vitepress-css',
@@ -131,37 +108,33 @@ export default defineConfig({
     ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32.png' }],
     ['link', { rel: 'icon', type: 'image/png', sizes: '48x48', href: '/favicon-48.png' }],
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
-    // The theme, set before the first paint so a reload never flashes the other one.
+    // The examples' theme, set before the first paint so a reload never flashes the other one.
     ['script', {}, themeBootScript],
     ...sharedHead,
   ],
 
   themeConfig: {
-    logo: { src: '/mark-light.svg', alt: 'rowkit' },
-    siteTitle: 'rowkit',
+    // The logo is the mark and the wordmark; no second title beside it.
+    logo: { light: '/logo.svg', dark: '/logo-light.svg', alt: 'rowkit' },
+    siteTitle: false,
 
     nav: [
       { text: 'Guide', link: '/introduction' },
       { text: 'Components', link: '/components/' },
       { text: 'Patterns', link: '/patterns/data-table-page' },
+      { text: 'Themes', link: '/foundations/themes' },
       { text: 'Storybook', link: 'https://storybook.rowkit.dev' },
-      { text: 'Decisions', link: '/decisions/001-typescript-pin' },
       {
-        text: 'Help',
+        text: '1.0 beta',
         items: [
-          {
-            text: 'Roadmap',
-            link: 'https://github.com/NikolaiKushner/rowkit/blob/main/ROADMAP.md',
-          },
           { text: 'Changelog', link: 'https://github.com/NikolaiKushner/rowkit/releases' },
+          { text: 'Roadmap', link: '/roadmap' },
+          { text: 'npm', link: 'https://www.npmjs.com/package/rowkit' },
         ],
       },
     ],
 
-    /*
-     * The folder tree of the Explorer window: sections, groups, pages. Nested
-     * `items` are folders; an item with a `link` is a page.
-     */
+    /* Sections, groups, pages: nested `items` are groups; an item with a `link` is a page. */
     sidebar: [
       {
         text: 'Guide',
diff --git a/docs/.vitepress/syntax.ts b/docs/.vitepress/syntax.ts
deleted file mode 100644
index 47108504..00000000
--- a/docs/.vitepress/syntax.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { tokens } from '@rowkit/tokens'
-import type { UserConfig } from 'vitepress'
-
-type ShikiTheme = Exclude<NonNullable<NonNullable<UserConfig['markdown']>['theme']>, string>
-
-const { vga } = tokens.color
-
-/**
- * Every colour is a variable, so the code follows the site's theme: the
- * Windows 98 IDE's colours, or the modern theme's light and dark ones. The
- * values live in `theme/modern.css`; the Windows 98 ones fall back to VGA.
- */
-const code = (role: string, fallback: string) => `var(--rk-code-${role}, ${fallback})`
-
-/**
- * Code colours as a Windows 98 IDE drew them — Visual C++ 6 and Visual Basic 6:
- * keywords blue, comments green, everything else black, plus maroon strings,
- * teal numbers and navy tags so a Vue template reads at a glance.
- *
- * Restraint is the point. Operators, punctuation, names and calls stay black;
- * a block where every token has its own colour reads as noise, not structure.
- *
- * The colours are the VGA palette from `@rowkit/tokens`, and each clears 4.5:1
- * on the white code well: blue 8.6, green 5.1, maroon 11.4, teal 4.8, navy 16.
- * Yellow, olive, grey and red do not, which is why none of them is here.
- */
-export const win98Code: ShikiTheme = {
-  name: 'rowkit-win98',
-  type: 'light',
-  fg: code('fg', vga.black),
-  bg: code('bg', vga.white),
-  settings: [
-    { settings: { foreground: code('fg', vga.black), background: code('bg', vga.white) } },
-    {
-      scope: ['comment', 'punctuation.definition.comment'],
-      settings: { foreground: code('comment', vga.green) },
-    },
-    {
-      scope: [
-        'keyword',
-        'storage',
-        'storage.type',
-        'storage.modifier',
-        'variable.language',
-        'constant.language',
-      ],
-      settings: { foreground: code('keyword', vga.blue) },
-    },
-    // `=`, `=>`, `+`: keywords by grammar, punctuation to a reader.
-    { scope: ['keyword.operator'], settings: { foreground: code('fg', vga.black) } },
-    {
-      scope: ['keyword.operator.new', 'keyword.operator.expression', 'keyword.operator.typeof'],
-      settings: { foreground: code('keyword', vga.blue) },
-    },
-    {
-      scope: ['string', 'punctuation.definition.string'],
-      settings: { foreground: code('string', vga.maroon) },
-    },
-    { scope: ['constant.numeric'], settings: { foreground: code('number', vga.teal) } },
-    {
-      scope: ['entity.name.tag', 'punctuation.definition.tag', 'support.class.component'],
-      settings: { foreground: code('tag', vga.navy) },
-    },
-    {
-      scope: ['entity.other.attribute-name'],
-      settings: { foreground: code('attribute', vga.teal) },
-    },
-  ],
-}
diff --git a/docs/.vitepress/theme/components/ComponentIndex.vue b/docs/.vitepress/theme/components/ComponentIndex.vue
index 835cf6c3..8f7134b6 100644
--- a/docs/.vitepress/theme/components/ComponentIndex.vue
+++ b/docs/.vitepress/theme/components/ComponentIndex.vue
@@ -2,8 +2,7 @@
 import { computed } from 'vue'
 import { withBase } from 'vitepress'
 import { DataTable, DocumentIcon, type DataTableColumn } from 'rowkit'
-import { folder } from './site/menu'
-import { useSiteNav } from './site/useSiteNav'
+import { folder, useSiteNav } from './site/useSiteNav'
 import type { ComponentSummary } from '../data/components.data'
 
 /**
diff --git a/docs/.vitepress/theme/components/DemoBox.vue b/docs/.vitepress/theme/components/DemoBox.vue
index 85f32ed6..b20ba0a6 100644
--- a/docs/.vitepress/theme/components/DemoBox.vue
+++ b/docs/.vitepress/theme/components/DemoBox.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { GroupBox } from 'rowkit'
 /**
  * The container every live demo on the site sits in.
  *
  * One component rather than a CSS class per page, so a demo cannot invent its
- * own padding or overflow the page on a phone. It is rowkit's own GroupBox,
- * so a demo box on `rowkit.dev` is drawn by the package it is demonstrating.
+ * own padding or overflow the page on a phone. The frame is VitePress's (its
+ * divider and radius); the face inside is the rowkit theme's own background,
+ * so a demo shows its components on the surface they were drawn for —
+ * Windows 98's grey or the modern theme's white or dark.
  *
  * Deliberately not a playground: no editable props, no code toggle. That is
  * what the linked Storybook is for, and duplicating it here is how a docs site
@@ -35,16 +36,14 @@ const alignment = { start: 'items-start', center: 'items-center', end: 'items-en
 </script>
 
 <template>
-  <!--
-    The Figma page draws a demo as a group box captioned «Example» on the
-    window face. It is a plain group, not a fieldset: a demo is not a form.
-  -->
-  <GroupBox as="div" legend="Example" class="rk-demo mt-4">
+  <div
+    class="rk-demo mt-4 overflow-hidden rounded-lg border border-[var(--vp-c-divider)] bg-background text-foreground"
+  >
     <div
-      class="flex gap-4 overflow-x-auto p-1"
+      class="flex gap-4 overflow-x-auto p-6 max-sm:p-4"
       :class="layout === 'stack' ? 'flex-col' : ['flex-wrap', alignment[align]]"
     >
       <slot />
     </div>
-  </GroupBox>
+  </div>
 </template>
diff --git a/docs/.vitepress/theme/components/ThemeBuilder.vue b/docs/.vitepress/theme/components/ThemeBuilder.vue
index 9ed2aa0c..650dfcfd 100644
--- a/docs/.vitepress/theme/components/ThemeBuilder.vue
+++ b/docs/.vitepress/theme/components/ThemeBuilder.vue
@@ -136,8 +136,13 @@ async function copy(): Promise<void> {
   setTimeout(() => (copied.value = false), 2000)
 }
 
-/** A <style> element: templates may not hold one, a render function may. */
-const ThemeStyle: FunctionalComponent<{ css: string }> = (props) => h('style', props.css)
+/**
+ * A <style> element: templates may not hold one, a render function may. The
+ * CSS goes in as `innerHTML`: as a text child the server escapes its quotes
+ * (`[data-theme=&quot;acme&quot;]`) and hydration reports a mismatch.
+ */
+const ThemeStyle: FunctionalComponent<{ css: string }> = (props) =>
+  h('style', { innerHTML: props.css })
 
 const options = <T extends string>(values: readonly (readonly [T, string])[]) => values
 const BASES = options<Base>([
diff --git a/docs/.vitepress/theme/components/home/AboutWindow.vue b/docs/.vitepress/theme/components/home/AboutWindow.vue
deleted file mode 100644
index 6bac32b2..00000000
--- a/docs/.vitepress/theme/components/home/AboutWindow.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { withBase } from 'vitepress'
-import { Button, version, Window, WindowBody, WindowButton, WindowTitleBar } from 'rowkit'
-import ThemeSwitch from '../site/ThemeSwitch.vue'
-
-/**
- * The About window on the home page: the mark, what rowkit is, the version,
- * the two ways in — and, in the modern theme, the look switch along the
- * bottom (Figma SiteModern/Window/About). On the desktop and in the phone's
- * stack of windows alike.
- */
-defineEmits<{ close: [] }>()
-</script>
-
-<template>
-  <Window>
-    <WindowTitleBar title="About rowkit">
-      <template #icon>
-        <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" />
-      </template>
-      <template #controls>
-        <!-- Modern draws all three lights on every window; Windows 98, close alone. -->
-        <WindowButton
-          glyph="minimize"
-          label="Minimize About rowkit"
-          class="win98:hidden"
-          @click="$emit('close')"
-        />
-        <WindowButton glyph="maximize" label="Maximize" disabled class="win98:hidden" />
-        <WindowButton glyph="close" label="Close About rowkit" @click="$emit('close')" />
-      </template>
-    </WindowTitleBar>
-    <WindowBody class="flex items-start gap-4 p-4 modern:p-5">
-      <!--
-        The app icon in modern: the mark on a tile beside the wordmark. Windows
-        98 shows the logo alone — the mark is already in it, and a second,
-        pixel one beside it read as two logos.
-      -->
-      <span
-        class="hidden modern:flex modern:size-16 modern:shrink-0 modern:items-center modern:justify-center modern:rounded-xl modern:bg-card modern:shadow-raised"
-      >
-        <img :src="withBase('/mark-48.svg')" alt="" width="48" height="48" class="block" />
-      </span>
-      <div class="flex flex-col gap-2">
-        <!-- The logo in Windows 98; the wordmark alone in modern, where the tile shows the mark. -->
-        <img
-          :src="withBase('/logo.svg')"
-          alt="rowkit"
-          width="167"
-          height="32"
-          class="modern:hidden"
-        />
-        <img
-          :src="withBase('/wordmark.svg')"
-          alt="rowkit"
-          width="108"
-          height="28"
-          class="win98:hidden modern-dark:hidden"
-        />
-        <img
-          :src="withBase('/wordmark-light.svg')"
-          alt="rowkit"
-          width="108"
-          height="28"
-          class="hidden modern-dark:block"
-        />
-        <p class="m-0 text-doc text-foreground">
-          A professional Vue 3 toolkit — the components a product interface is built from.
-        </p>
-        <p class="m-0 text-muted-foreground modern:text-text-subtle">
-          Version {{ version }} on npm · MIT licence
-        </p>
-        <div class="flex gap-1.5 modern:gap-2 modern:pt-1.5">
-          <Button as="a" :href="withBase('/installation')">Get started</Button>
-          <Button as="a" :href="withBase('/components/')" variant="secondary"> Components </Button>
-        </div>
-      </div>
-    </WindowBody>
-    <!-- The look switch again, where About says what the toolkit is. Modern only. -->
-    <div
-      class="flex items-center gap-3 border-t border-border bg-background px-5 pt-3 pb-3.5 win98:hidden"
-    >
-      <span class="font-strong text-foreground">Look</span>
-      <ThemeSwitch />
-    </div>
-  </Window>
-</template>
diff --git a/docs/.vitepress/theme/components/home/CommandPrompt.vue b/docs/.vitepress/theme/components/home/CommandPrompt.vue
deleted file mode 100644
index 28ee9910..00000000
--- a/docs/.vitepress/theme/components/home/CommandPrompt.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { Window, WindowButton, WindowTitleBar } from 'rowkit'
-import { siteTheme } from '../site/useSiteTheme'
-
-/**
- * The install command in a Command Prompt window: a black screen, light grey
- * mono text and a block cursor blinking every 500ms. Clicking the screen
- * copies the command. In the modern theme the same window is a Terminal
- * (Figma Site/CommandPrompt, modern): dark in either scheme, so the window
- * takes the dark scheme for itself, with a 28px title bar and a block cursor.
- */
-withDefaults(defineProps<{ closable?: boolean }>(), { closable: false })
-defineEmits<{ close: [] }>()
-
-const command = 'pnpm add rowkit@beta'
-const copied = ref(false)
-
-async function copy(): Promise<void> {
-  await navigator.clipboard.writeText(command)
-  copied.value = true
-  setTimeout(() => (copied.value = false), 2000)
-}
-
-/** The prompt each system's shell shows. */
-const prompt = computed(() => (siteTheme.value === 'modern' ? '~ %' : 'C:\\>'))
-</script>
-
-<template>
-  <Window
-    :data-theme="siteTheme === 'modern' ? 'modern' : undefined"
-    :data-color-scheme="siteTheme === 'modern' ? 'dark' : undefined"
-    class="modern:rounded-[10px] modern:bg-(--rk-terminal-bg) modern:shadow-[0_16px_40px_rgb(0_0_0/0.5),0_0_0_1px_rgb(255_255_255/0.12)]"
-  >
-    <WindowTitleBar
-      :title="siteTheme === 'modern' ? 'Terminal' : 'Command Prompt'"
-      class="modern:h-7"
-    >
-      <template v-if="closable" #controls>
-        <WindowButton glyph="minimize" label="Minimize Command Prompt" @click="$emit('close')" />
-        <WindowButton glyph="maximize" label="Maximize" disabled />
-        <WindowButton glyph="close" label="Close Command Prompt" @click="$emit('close')" />
-      </template>
-    </WindowTitleBar>
-    <button
-      type="button"
-      class="flex w-full cursor-pointer flex-col items-start gap-0.5 bg-foreground px-2 pt-1.5 pb-2 text-left font-mono text-mono text-border-subtle shadow-sunken outline-none focus-visible:outline-1 focus-visible:-outline-offset-4 focus-visible:outline-dotted focus-visible:outline-border-subtle modern:gap-1 modern:bg-(--rk-terminal-bg) modern:px-3.5 modern:pt-2.5 modern:pb-3 modern:text-(--rk-terminal-fg) modern:shadow-none"
-      :aria-label="
-        copied ? 'Copied: pnpm add rowkit@beta' : 'Copy the install command: pnpm add rowkit@beta'
-      "
-      @click="copy"
-    >
-      <span>{{ prompt }} {{ command }}</span>
-      <span class="flex items-end">
-        {{ prompt }}&nbsp;<span v-if="copied">Copied.</span
-        ><span
-          class="rk-cursor mb-px h-[3px] w-2 bg-border-subtle modern:mb-0 modern:h-[15px] modern:w-[7px] modern:bg-(--rk-terminal-fg)"
-        />
-      </span>
-    </button>
-  </Window>
-</template>
-
-<style scoped>
-/* The block cursor: on and off every 500ms, held on for anyone avoiding motion. */
-@media (prefers-reduced-motion: no-preference) {
-  .rk-cursor {
-    animation: rk-blink 1s steps(1) infinite;
-  }
-}
-
-@keyframes rk-blink {
-  50% {
-    opacity: 0;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/home/DesktopHome.vue b/docs/.vitepress/theme/components/home/DesktopHome.vue
deleted file mode 100644
index c7ec269f..00000000
--- a/docs/.vitepress/theme/components/home/DesktopHome.vue
+++ /dev/null
@@ -1,417 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
-import { withBase } from 'vitepress'
-import {
-  Badge,
-  Button,
-  CopyIcon,
-  EditIcon,
-  PlusIcon,
-  DataTable,
-  FilterBar,
-  GroupBox,
-  Pagination,
-  ScrollArea,
-  Separator,
-  StatusBar,
-  StatusBarSection,
-  TrashIcon,
-  Input,
-  Window,
-  WindowBody,
-  WindowButton,
-  WindowTitleBar,
-} from 'rowkit'
-import SiteDock from '../site/SiteDock.vue'
-import SiteTaskbar from '../site/SiteTaskbar.vue'
-import SiteWallpaper from '../site/SiteWallpaper.vue'
-import AboutWindow from './AboutWindow.vue'
-import CommandPrompt from './CommandPrompt.vue'
-import EditUserDialog from './EditUserDialog.vue'
-import DesktopIcon from './DesktopIcon.vue'
-import { shortcuts } from './shortcuts'
-import type { HomeUser } from '../home-users'
-import { columns, label, tone, useHomeDemo } from './useHomeDemo'
-
-/**
- * The home page as a Windows 98 desktop (Figma Site, template 1): shortcuts
- * down the left, a live demo window, About and a Command Prompt, and the
- * taskbar. Below 1280px it becomes one maximized «rowkit» window, as the
- * 390px template draws it.
- *
- * The windows' buttons do what they say: minimize and close put a window
- * away, and the task on the taskbar brings every window back.
- */
-const demo = useHomeDemo()
-
-// The row the pencil opened, in the Edit dialog; or a new one, from New user.
-const editing = ref<HomeUser>()
-const adding = ref(false)
-
-function newUser(): void {
-  adding.value = true
-  editing.value = demo.blank()
-}
-
-function editSelected(): void {
-  editing.value = demo.pageRows.value.find((row) => demo.selected.value.includes(row.id))
-}
-
-function save(user: HomeUser): void {
-  if (adding.value) demo.add(user)
-  else demo.update(user)
-  closeEditor()
-}
-
-function closeEditor(): void {
-  editing.value = undefined
-  adding.value = false
-}
-
-const open = reactive({ demo: true, about: true, prompt: true })
-const restore = () => Object.assign(open, { demo: true, about: true, prompt: true })
-
-/*
- * The one task names the window on screen: the live demo on the desktop, the
- * maximized «rowkit» window below 1280px. The server renders the desktop's.
- */
-const wide = ref(true)
-let query: MediaQueryList | undefined
-const onWidth = () => (wide.value = query?.matches ?? true)
-onMounted(() => {
-  query = window.matchMedia('(min-width: 1280px)')
-  onWidth()
-  query.addEventListener('change', onWidth)
-})
-onBeforeUnmount(() => query?.removeEventListener('change', onWidth))
-const task = computed(() => (wide.value && open.demo ? 'Live demo — rowkit' : 'rowkit'))
-
-const count = computed(() => demo.selected.value.length)
-const compactColumns = columns.filter(
-  (column) => 'key' in column && (column.key === 'name' || column.key === 'status')
-)
-const compactRows = computed(() => demo.pageRows.value.slice(0, 6))
-// The phone's live demo (Figma Home, 390): name, status, role.
-const phoneColumns = (['name', 'status', 'role'] as const).flatMap((key) =>
-  columns.filter((column) => 'key' in column && column.key === key)
-)
-</script>
-
-<template>
-  <div
-    class="rk-desktop relative isolate flex h-dvh flex-col overflow-hidden bg-desktop font-sans text-ui"
-  >
-    <SiteWallpaper />
-    <h1 class="sr-only">rowkit — a professional Vue 3 toolkit</h1>
-
-    <!-- The desktop, at 1280px and up. -->
-    <!-- Isolated in modern, so a sticky table header stays under the menu bar's menus. -->
-    <main class="relative min-h-0 flex-1 max-xl:hidden modern:isolate">
-      <!-- Icons down the left in Windows 98; the Dock along the bottom in the modern theme. -->
-      <nav aria-label="Shortcuts" class="absolute top-4 left-4 flex flex-col gap-3 modern:hidden">
-        <DesktopIcon
-          v-for="item in shortcuts"
-          :key="item.label"
-          :label="item.label"
-          :href="item.href"
-        >
-          <component :is="item.icon" />
-        </DesktopIcon>
-      </nav>
-
-      <Window
-        v-show="open.demo"
-        class="absolute top-6 right-[452px] left-32 h-[600px] max-w-[860px]"
-      >
-        <WindowTitleBar title="Live demo — DataTable, FilterBar, Pagination">
-          <template #icon>
-            <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" />
-          </template>
-          <template #controls>
-            <WindowButton glyph="minimize" label="Minimize Live demo" @click="open.demo = false" />
-            <WindowButton glyph="maximize" label="Maximize" disabled />
-            <WindowButton glyph="close" label="Close Live demo" @click="open.demo = false" />
-          </template>
-        </WindowTitleBar>
-
-        <div
-          role="toolbar"
-          aria-label="Users"
-          class="flex items-center gap-1 p-0.5 modern:gap-2 modern:px-3 modern:py-2"
-        >
-          <!-- Windows 98: Export and Delete with the count. Modern: New user, Edit and Delete. -->
-          <Button variant="ghost" class="win98:hidden" @click="newUser">
-            <template #leading><PlusIcon /></template>
-            New user
-          </Button>
-          <Button
-            variant="ghost"
-            :disabled="count === 0"
-            class="win98:hidden"
-            @click="editSelected"
-          >
-            <template #leading><EditIcon /></template>
-            Edit
-          </Button>
-          <Button
-            variant="ghost"
-            :disabled="count === 0"
-            class="modern:hidden"
-            @click="demo.exportSelected"
-          >
-            <template #leading><CopyIcon /></template>
-            Export {{ count }}
-          </Button>
-          <Button variant="ghost" :disabled="count === 0" @click="demo.remove(demo.selected.value)">
-            <template #leading><TrashIcon /></template>
-            Delete<span class="modern:hidden">&nbsp;{{ count }}</span>
-          </Button>
-          <Separator
-            orientation="vertical"
-            decorative
-            class="mx-0.5 h-[33px] modern:mx-0 modern:h-[31px]"
-          />
-          <FilterBar
-            v-model:search="demo.search.value"
-            label="User filters"
-            search-placeholder="Search name or email…"
-            :filters="demo.chips.value"
-            :result-count="demo.filtered.value.length"
-            class="min-w-0 flex-1"
-            @remove="demo.removeFilter"
-            @clear="demo.clearFilters"
-          >
-            <template #summary="{ count: users }">{{ users }} users</template>
-          </FilterBar>
-        </div>
-
-        <WindowBody class="flex min-h-0 flex-col px-0.5 modern:px-3 modern:pb-3">
-          <DataTable
-            v-model:sort="demo.sort.value"
-            v-model:selected="demo.selected.value"
-            :rows="demo.pageRows.value"
-            :columns="columns"
-            caption="Users"
-            selectable="multiple"
-            :row-label="(row) => row.name"
-            class="min-h-0 flex-1"
-          >
-            <!-- Modern: an address longer than its column ends in an ellipsis, so the actions fit. -->
-            <template #[`cell:email`]="{ row }">
-              <span class="modern:block modern:max-w-[154px] modern:truncate" :title="row.email">{{
-                row.email
-              }}</span>
-            </template>
-            <template #[`cell:status`]="{ row }">
-              <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
-            </template>
-            <template #[`cell:actions`]="{ row }">
-              <div class="flex">
-                <Button
-                  variant="ghost"
-                  size="icon-xs"
-                  :aria-label="`Edit ${row.name}`"
-                  @click="editing = row"
-                >
-                  <EditIcon />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon-xs"
-                  :aria-label="`Delete ${row.name}`"
-                  @click="demo.remove([row.id])"
-                >
-                  <TrashIcon />
-                </Button>
-              </div>
-            </template>
-          </DataTable>
-        </WindowBody>
-
-        <StatusBar>
-          <StatusBarSection>{{ demo.range.value }} · {{ count }} selected</StatusBarSection>
-          <StatusBarSection class="w-auto win98:hidden">
-            Rows per page: {{ demo.pageSize }}
-          </StatusBarSection>
-          <StatusBarSection class="w-auto py-0 pr-1">
-            <Pagination
-              v-model:page="demo.page.value"
-              :page-size="demo.pageSize"
-              :total="demo.filtered.value.length"
-              size="sm"
-              hide-page-size
-              hide-summary
-              label="Users pages"
-            />
-          </StatusBarSection>
-        </StatusBar>
-      </Window>
-
-      <SiteDock
-        :running="open"
-        class="absolute bottom-2.5 left-1/2 z-10 -translate-x-1/2 win98:hidden"
-        @open="(name) => (open[name] = true)"
-      />
-
-      <div class="absolute top-6 right-6 flex w-[400px] flex-col gap-12 modern:gap-6">
-        <AboutWindow v-show="open.about" @close="open.about = false" />
-
-        <CommandPrompt v-show="open.prompt" closable @close="open.prompt = false" />
-      </div>
-    </main>
-
-    <!--
-      Modern below 1280px (Figma Home, 390): the windows stacked, 12px in and
-      14px apart, scrolling under the menu bar, with the Dock over the bottom.
-    -->
-    <div class="hidden min-h-0 flex-1 overflow-y-auto max-xl:modern:block">
-      <div class="mx-auto flex w-full max-w-[560px] flex-col gap-3.5 px-3 pt-3 pb-24">
-        <AboutWindow v-show="open.about" @close="open.about = false" />
-        <CommandPrompt v-show="open.prompt" closable @close="open.prompt = false" />
-        <Window v-show="open.demo">
-          <WindowTitleBar title="Live demo">
-            <template #controls>
-              <WindowButton glyph="close" label="Close Live demo" @click="open.demo = false" />
-            </template>
-          </WindowTitleBar>
-          <div role="toolbar" aria-label="Users" class="flex items-center gap-2 px-3 py-2">
-            <Button variant="ghost" size="icon-lg" aria-label="New user" @click="newUser">
-              <PlusIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-lg"
-              aria-label="Edit"
-              :disabled="count === 0"
-              @click="editSelected"
-            >
-              <EditIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-lg"
-              aria-label="Delete"
-              :disabled="count === 0"
-              @click="demo.remove(demo.selected.value)"
-            >
-              <TrashIcon />
-            </Button>
-            <Input
-              v-model="demo.search.value"
-              type="search"
-              size="lg"
-              aria-label="Search name or email"
-              placeholder="Search name or email…"
-              class="min-w-0 flex-1"
-            />
-          </div>
-          <FilterBar
-            label="User filters"
-            :searchable="false"
-            :filters="demo.chips.value"
-            :result-count="demo.filtered.value.length"
-            clear-label="Clear"
-            class="px-1 pb-1"
-            @remove="demo.removeFilter"
-            @clear="demo.clearFilters"
-          >
-            <template #summary="{ count: users }">{{ users }} users</template>
-          </FilterBar>
-          <WindowBody class="flex min-h-0 flex-col">
-            <DataTable
-              v-model:sort="demo.sort.value"
-              v-model:selected="demo.selected.value"
-              :rows="compactRows"
-              :columns="phoneColumns"
-              caption="Users"
-              selectable="multiple"
-              :row-label="(row) => row.name"
-            >
-              <template #[`cell:status`]="{ row }">
-                <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
-              </template>
-            </DataTable>
-          </WindowBody>
-          <StatusBar>
-            <StatusBarSection class="w-auto">
-              <Pagination
-                v-model:page="demo.page.value"
-                :page-size="demo.pageSize"
-                :total="demo.filtered.value.length"
-                compact
-                hide-page-size
-                label="Users pages"
-                class="w-full"
-              />
-            </StatusBarSection>
-          </StatusBar>
-        </Window>
-      </div>
-      <SiteDock
-        :running="open"
-        compact
-        class="fixed bottom-4 left-1/2 z-10 -translate-x-1/2"
-        @open="(name) => (open[name] = true)"
-      />
-    </div>
-
-    <!-- One maximized window, below 1280px. -->
-    <Window class="min-h-0 flex-1 xl:hidden modern:hidden">
-      <WindowTitleBar title="rowkit">
-        <template #icon>
-          <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" />
-        </template>
-      </WindowTitleBar>
-      <WindowBody class="flex min-h-0 flex-col">
-        <ScrollArea label="rowkit" class="min-h-0 flex-auto">
-          <main class="flex flex-col gap-4 p-3">
-            <img :src="withBase('/logo.svg')" alt="rowkit" width="167" height="32" />
-            <p class="m-0 text-doc text-foreground">
-              A professional Vue 3 toolkit — the components a product interface is built from.
-            </p>
-            <div class="flex gap-1.5">
-              <Button as="a" :href="withBase('/installation')" size="lg">Get started</Button>
-              <Button as="a" :href="withBase('/components/')" variant="secondary" size="lg">
-                Components
-              </Button>
-            </div>
-            <CommandPrompt />
-            <GroupBox as="section" legend="Live demo">
-              <DataTable
-                v-model:sort="demo.sort.value"
-                v-model:selected="demo.selected.value"
-                :rows="compactRows"
-                :columns="compactColumns"
-                caption="Users"
-                selectable="multiple"
-                :row-label="(row) => row.name"
-              >
-                <template #[`cell:status`]="{ row }">
-                  <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
-                </template>
-              </DataTable>
-            </GroupBox>
-            <nav
-              aria-label="Sections"
-              class="grid grid-cols-3 justify-items-center gap-2 bg-desktop p-2"
-            >
-              <DesktopIcon
-                v-for="item in shortcuts.slice(0, 6)"
-                :key="item.label"
-                :label="item.label"
-                :href="item.href"
-                class="w-24"
-              >
-                <component :is="item.icon" />
-              </DesktopIcon>
-            </nav>
-          </main>
-        </ScrollArea>
-      </WindowBody>
-    </Window>
-
-    <EditUserDialog :user="editing" :is-new="adding" @save="save" @close="closeEditor" />
-
-    <SiteTaskbar :task="task" task-button @task="restore" />
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/home/DesktopIcon.vue b/docs/.vitepress/theme/components/home/DesktopIcon.vue
deleted file mode 100644
index 5cf27b60..00000000
--- a/docs/.vitepress/theme/components/home/DesktopIcon.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-/**
- * A desktop shortcut: a 32px icon over a white 11px label on the teal desktop.
- * Focused, the label turns navy inside a dotted white ring. On the site one
- * click opens it — a link, not Windows' select-then-double-click.
- */
-const props = defineProps<{
-  label: string
-  href: string
-}>()
-
-const external = /^https?:/.test(props.href)
-</script>
-
-<template>
-  <a
-    :href="href"
-    :target="external ? '_blank' : undefined"
-    :rel="external ? 'noreferrer' : undefined"
-    :title="label"
-    class="group flex w-[76px] flex-col items-center gap-1 text-ui no-underline outline-none modern:w-auto modern:rounded-xl modern:focus-visible:focus-outer"
-  >
-    <!-- In the Dock: a tile, the label for assistive technology and the tooltip. -->
-    <span
-      class="size-8 modern:flex modern:size-12 modern:items-center modern:justify-center modern:rounded-xl modern:bg-card modern:text-foreground modern:shadow-raised modern:transition-transform modern:group-hover:-translate-y-1"
-      ><slot
-    /></span>
-    <span
-      class="border border-transparent px-px pb-px text-center whitespace-nowrap text-on-selected group-focus-visible:border-dotted group-focus-visible:border-on-selected group-focus-visible:bg-surface-selected modern:sr-only"
-      >{{ label }}</span
-    >
-  </a>
-</template>
diff --git a/docs/.vitepress/theme/components/home/shortcuts.ts b/docs/.vitepress/theme/components/home/shortcuts.ts
deleted file mode 100644
index edfb1b3f..00000000
--- a/docs/.vitepress/theme/components/home/shortcuts.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Component } from 'vue'
-import { withBase } from 'vitepress'
-import {
-  Book32Icon,
-  Code32Icon,
-  Computer32Icon,
-  Document32Icon,
-  Folder32Icon,
-  Trash32Icon,
-} from 'rowkit'
-
-export interface Shortcut {
-  label: string
-  href: string
-  icon: Component
-}
-
-/** The desktop's shortcuts, top to bottom: the home page's and the 404's. */
-export const shortcuts: Shortcut[] = [
-  { label: 'Guide', href: withBase('/introduction'), icon: Book32Icon },
-  { label: 'Components', href: withBase('/components/'), icon: Folder32Icon },
-  { label: 'Patterns', href: withBase('/patterns/data-table-page'), icon: Folder32Icon },
-  { label: 'Storybook', href: 'https://storybook.rowkit.dev', icon: Computer32Icon },
-  { label: 'GitHub', href: 'https://github.com/NikolaiKushner/rowkit', icon: Code32Icon },
-  { label: 'Decisions', href: withBase('/decisions/001-typescript-pin'), icon: Document32Icon },
-  {
-    label: 'Old versions',
-    href: 'https://github.com/NikolaiKushner/rowkit/releases',
-    icon: Trash32Icon,
-  },
-]
diff --git a/docs/.vitepress/theme/components/home/useHomeDemo.ts b/docs/.vitepress/theme/components/home/useHomeDemo.ts
deleted file mode 100644
index 5a0751ba..00000000
--- a/docs/.vitepress/theme/components/home/useHomeDemo.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { computed, ref, watch } from 'vue'
-import { useClientSort } from 'rowkit'
-import type { DataTableColumn, DataTableSort, FilterChip } from 'rowkit'
-import { homeUsers, type HomeUser } from '../home-users'
-
-/**
- * The live demo on the home page: a Users list with search, a status filter,
- * sorting, selection, paging, and actions that really act — Export downloads
- * the selected rows, Delete removes them from this tab's copy of the list,
- * and in the modern theme New user adds one.
- */
-export function useHomeDemo() {
-  const people = ref<HomeUser[]>([...homeUsers])
-
-  const search = ref('')
-  // Seeded so the window opens with a chip, as the Figma desktop shows it.
-  const status = ref<HomeUser['status'] | undefined>('active')
-  const sort = ref<DataTableSort<HomeUser> | undefined>({ key: 'name', direction: 'asc' })
-  // Alan Turing and Katherine Johnson: on page one under the seeded sort.
-  const selected = ref<number[]>([3, 5])
-  const page = ref(1)
-  const pageSize = 25
-
-  const filtered = computed(() => {
-    const query = search.value.trim().toLowerCase()
-    return people.value.filter((row) => {
-      if (status.value && row.status !== status.value) return false
-      if (!query) return true
-      return row.name.toLowerCase().includes(query) || row.email.toLowerCase().includes(query)
-    })
-  })
-
-  // Pagination never moves the page itself; the application does, so a
-  // narrowed list does not leave the reader on an empty page.
-  watch([search, status], () => {
-    page.value = 1
-  })
-
-  const chips = computed<FilterChip[]>(() =>
-    status.value ? [{ id: 'status', label: 'Status', value: label[status.value] }] : []
-  )
-
-  const sorted = useClientSort(filtered, sort, columns)
-
-  const pageRows = computed(() => {
-    const start = (page.value - 1) * pageSize
-    return sorted.value.slice(start, start + pageSize)
-  })
-
-  const range = computed(() => {
-    const total = filtered.value.length
-    if (total === 0) return '0 of 0'
-    const from = (page.value - 1) * pageSize + 1
-    return `${String(from)}–${String(Math.min(total, from + pageSize - 1))} of ${String(total)}`
-  })
-
-  function removeFilter(): void {
-    status.value = undefined
-  }
-
-  function clearFilters(): void {
-    search.value = ''
-    status.value = undefined
-  }
-
-  function remove(ids: number[]): void {
-    people.value = people.value.filter((row) => !ids.includes(row.id))
-    selected.value = selected.value.filter((id) => !ids.includes(id))
-  }
-
-  /** A row not yet in the list, for New user: saved through `add`. */
-  function blank(): HomeUser {
-    const id = Math.max(0, ...people.value.map((row) => row.id)) + 1
-    return {
-      id,
-      name: '',
-      email: '',
-      role: 'Member',
-      status: 'invited',
-      seats: 0,
-      lastActive: 'never',
-    }
-  }
-
-  /** Adds a new row and selects it, so it is easy to find in the list. */
-  function add(user: HomeUser): void {
-    people.value = [...people.value, user]
-    selected.value = [user.id]
-  }
-
-  /** Writes an edited row back, by id. */
-  function update(user: HomeUser): void {
-    people.value = people.value.map((row) => (row.id === user.id ? user : row))
-  }
-
-  /** The selected rows as a CSV file, downloaded. */
-  function exportSelected(): void {
-    const rows = people.value.filter((row) => selected.value.includes(row.id))
-    const lines = [
-      'Name,Email,Role,Status,Seats',
-      ...rows.map((row) => [row.name, row.email, row.role, row.status, row.seats].join(',')),
-    ]
-    const url = URL.createObjectURL(new Blob([lines.join('\n')], { type: 'text/csv' }))
-    const link = Object.assign(document.createElement('a'), { href: url, download: 'users.csv' })
-    link.click()
-    URL.revokeObjectURL(url)
-  }
-
-  return {
-    search,
-    status,
-    sort,
-    selected,
-    page,
-    pageSize,
-    filtered,
-    chips,
-    pageRows,
-    range,
-    removeFilter,
-    clearFilters,
-    remove,
-    blank,
-    add,
-    update,
-    exportSelected,
-  }
-}
-
-export const columns: DataTableColumn<HomeUser>[] = [
-  // The modern window has 12px margins round the table; `modern.css` narrows
-  // Name and Seats there so the actions column is not cut off.
-  { key: 'name', header: 'Name', sortable: true, width: 'var(--rk-demo-name-width, 150px)' },
-  { key: 'email', header: 'Email', width: '170px' },
-  { key: 'role', header: 'Role', sortable: true, width: '96px' },
-  { key: 'status', header: 'Status', width: '96px' },
-  {
-    key: 'seats',
-    header: 'Seats',
-    sortable: true,
-    numeric: true,
-    width: 'var(--rk-demo-seats-width, 80px)',
-  },
-  { id: 'actions', header: 'Actions', headerSrOnly: true, width: '56px' },
-]
-
-/** Status as the badges read it. */
-export const label = { active: 'Active', invited: 'Invited', suspended: 'Suspended' } as const
-
-export const tone = { active: 'success', invited: 'warning', suspended: 'danger' } as const
diff --git a/docs/.vitepress/theme/components/landing/CodeBlock.vue b/docs/.vitepress/theme/components/landing/CodeBlock.vue
new file mode 100644
index 00000000..5eb42f6b
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/CodeBlock.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { highlight } from './highlight'
+
+/**
+ * A code sample on the landing page, coloured by `highlight.ts`.
+ *
+ * `panel` is a sample on its own, framed like a card; `inset` sits inside a
+ * card (the steps of «Start in a minute»), sunken like a field in Windows 98.
+ */
+const props = withDefaults(
+  defineProps<{
+    code: string
+    /** What the sample is, for a screen reader: a <pre> has no name of its own. */
+    label: string
+    variant?: 'panel' | 'inset'
+  }>(),
+  { variant: 'panel' }
+)
+
+const lines = computed(() => highlight(props.code))
+</script>
+
+<template>
+  <pre
+    :aria-label="label"
+    tabindex="0"
+    class="lp-code m-0 overflow-x-auto bg-(--lp-code-bg) font-mono text-(--lp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--lp-accent)"
+    :class="
+      variant === 'panel'
+        ? 'px-6 py-5 modern:rounded-xl modern:border modern:border-border-subtle modern-dark:border-border win98:border win98:border-[#808080]'
+        : 'px-3 py-2.5 modern:rounded-lg modern:border modern:border-border-subtle modern-dark:border-border win98:shadow-sunken'
+    "
+  ><code><template v-for="(line, i) in lines" :key="i"><span
+    v-for="(token, j) in line"
+    :key="j"
+    :class="token.kind !== 'plain' && `lp-code-${token.kind}`"
+  >{{ token.text }}</span>{{ i < lines.length - 1 ? '\n' : '' }}</template></code></pre>
+</template>
diff --git a/docs/.vitepress/theme/components/home/EditUserDialog.vue b/docs/.vitepress/theme/components/landing/EditUserDialog.vue
similarity index 85%
rename from docs/.vitepress/theme/components/home/EditUserDialog.vue
rename to docs/.vitepress/theme/components/landing/EditUserDialog.vue
index da7b355a..df48970f 100644
--- a/docs/.vitepress/theme/components/home/EditUserDialog.vue
+++ b/docs/.vitepress/theme/components/landing/EditUserDialog.vue
@@ -16,18 +16,16 @@ import {
   SelectTrigger,
 } from 'rowkit'
 import type { HomeUser } from '../home-users'
-import { label } from './useHomeDemo'
+import { label } from './useLandingDemo'
 
 /**
- * The pencil on a row of the live demo: the row's fields in a dialog, edited
- * as a copy. Save writes it back into the demo; Cancel, Escape and ✕ drop it.
- * With `isNew`, the same form adds a user.
+ * The pencil on a row of the landing page's live table: the row's fields in a
+ * dialog, edited as a copy. Save writes it back into the table; Cancel, Escape
+ * and ✕ drop it.
  */
 const props = defineProps<{
   /** The row being edited; the dialog is open while there is one. */
   user: HomeUser | undefined
-  /** The row is not in the list yet: New user rather than Edit. */
-  isNew?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -71,10 +69,10 @@ function save(): void {
 
 <template>
   <Dialog :open="user !== undefined" @update:open="(open) => !open && emit('close')">
-    <DialogContent :close-label="isNew ? 'Close New user' : 'Close Edit user'">
+    <DialogContent close-label="Close Edit user">
       <form class="contents" novalidate @submit.prevent="save">
         <DialogHeader>
-          <DialogTitle>{{ isNew ? 'New user' : `Edit ${user?.name ?? ''}` }}</DialogTitle>
+          <DialogTitle>Edit {{ user?.name }}</DialogTitle>
         </DialogHeader>
         <DialogBody class="flex flex-col gap-3">
           <Field label="Name" :error="errors.name" required>
diff --git a/docs/.vitepress/theme/components/landing/InstallCommand.vue b/docs/.vitepress/theme/components/landing/InstallCommand.vue
new file mode 100644
index 00000000..f5ec716b
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/InstallCommand.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from 'rowkit'
+
+/** The install command, with a button that copies it. */
+const COMMAND = 'npm i rowkit@beta'
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy(): Promise<void> {
+  // No clipboard API on an insecure origin: the command is on screen to select.
+  try {
+    await navigator.clipboard.writeText(COMMAND)
+  } catch {
+    return
+  }
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 1600)
+}
+</script>
+
+<template>
+  <div
+    class="flex h-12 items-center gap-3 bg-(--lp-code-bg) pr-1.5 pl-4 text-(--lp-code-fg) modern:rounded-[10px] modern:border modern:border-border win98:shadow-sunken"
+  >
+    <code class="lp-code flex-1 text-left whitespace-nowrap">
+      <span class="lp-code-comment select-none" aria-hidden="true">$ </span>{{ COMMAND }}
+    </code>
+    <Button variant="secondary" class="shrink-0" @click="copy">
+      {{ copied ? 'Copied' : 'Copy' }}
+    </Button>
+    <span class="sr-only" aria-live="polite">{{ copied ? 'Copied to the clipboard' : '' }}</span>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingCode.vue b/docs/.vitepress/theme/components/landing/LandingCode.vue
new file mode 100644
index 00000000..1c86ca42
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingCode.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import CodeBlock from './CodeBlock.vue'
+import SectionHeading from './SectionHeading.vue'
+
+/** «A data table page in twenty lines»: the hero's table, as code. */
+// Spelt in two: the tag written whole would end this block for the SFC parser.
+const END_SCRIPT = '</' + 'script>'
+const SAMPLE = `<script setup lang="ts">
+import { DataTable, FilterBar, Pagination } from 'rowkit'
+import { columns, useUsers } from './users'
+
+const { rows, total, filters, search, sort, selected, page } = useUsers()
+${END_SCRIPT}
+
+<template>
+  <FilterBar v-model:search="search" :filters="filters" />
+  <DataTable
+    v-model:sort="sort"
+    v-model:selected="selected"
+    :rows="rows"
+    :columns="columns"
+    caption="Users"
+    selectable="multiple"
+  />
+  <Pagination v-model:page="page" :total="total" />
+</template>`
+
+const POINTS = [
+  'Sort, selection, page and filters are v-model',
+  'Loading and empty states built in',
+  'Pinned columns, a summary row, drawn scroll bars',
+]
+</script>
+
+<template>
+  <section aria-labelledby="lp-code" class="px-5 py-16 md:px-6 md:py-28">
+    <div
+      class="mx-auto grid max-w-[1200px] items-center gap-10 lg:grid-cols-[440px_minmax(0,1fr)] lg:gap-16"
+    >
+      <div class="flex flex-col gap-5">
+        <SectionHeading
+          id="lp-code"
+          label="In code"
+          title="A data table page in twenty lines"
+          align="start"
+        >
+          The table at the top of this page is this code. Your rows are typed, state is yours
+          through v-model, and every part takes your classes.
+        </SectionHeading>
+        <ul class="flex flex-col gap-3">
+          <li
+            v-for="point in POINTS"
+            :key="point"
+            class="flex items-start gap-3 text-[16px] leading-6 text-foreground"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              width="16"
+              height="16"
+              class="mt-1 shrink-0"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 8.5l3.25 3.25L13 5" />
+            </svg>
+            {{ point }}
+          </li>
+        </ul>
+        <a
+          :href="withBase('/patterns/data-table-page')"
+          class="self-start text-[16px] leading-6 font-semibold text-(--lp-link) hover:underline win98:underline"
+          >Read the pattern →</a
+        >
+      </div>
+      <CodeBlock :code="SAMPLE" label="A data table page" class="min-w-0" />
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingComponents.vue b/docs/.vitepress/theme/components/landing/LandingComponents.vue
new file mode 100644
index 00000000..848553e9
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingComponents.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import {
+  Badge,
+  Button,
+  Checkbox,
+  DataTable,
+  FilterBar,
+  Pagination,
+  ProgressBar,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from 'rowkit'
+import type { DataTableColumn } from 'rowkit'
+import { homeUsers, type HomeUser } from '../home-users'
+import SectionHeading from './SectionHeading.vue'
+import { label, tone } from './useLandingDemo'
+
+/**
+ * «Everything a product interface is built from»: eight components, each a
+ * small live preview in the site's theme, with what it is for, and a row of
+ * what is planned next. On a phone, four of them.
+ *
+ * The previews are pictures, not controls: inert, so a card is one link and
+ * one tab stop, to the component's page.
+ */
+/** `desktopOnly`: left out of the phone's four. */
+const CARDS: { name: string; page: string; text: string; desktopOnly?: boolean }[] = [
+  {
+    name: 'Button',
+    page: 'button',
+    text: 'Actions, from the default one Enter takes to a quiet link.',
+  },
+  {
+    name: 'Select',
+    page: 'select',
+    text: 'One value from a list, with search for long ones.',
+    desktopOnly: true,
+  },
+  { name: 'Badge', page: 'badge', text: 'Status at a glance, in the colour and the word.' },
+  {
+    name: 'ProgressBar',
+    page: 'progress-bar',
+    text: 'Progress you can measure, and work you cannot.',
+    desktopOnly: true,
+  },
+  {
+    name: 'FilterBar',
+    page: 'filter-bar',
+    text: 'Search and the filters applied to a list.',
+    desktopOnly: true,
+  },
+  { name: 'Pagination', page: 'pagination', text: 'Pages and page size for a long list.' },
+  { name: 'Checkbox', page: 'checkbox', text: 'On or off, with a label you can click.' },
+  {
+    name: 'DataTable',
+    page: 'data-table',
+    text: 'Sort, select, load and empty — typed rows.',
+    desktopOnly: true,
+  },
+]
+
+const NEXT = [
+  'DropdownMenu',
+  'Popover',
+  'Sheet',
+  'Date picker',
+  'Command palette',
+  'Tabs',
+  'Switch',
+  'Combobox',
+]
+
+const miniColumns: DataTableColumn<HomeUser>[] = [
+  { key: 'name', header: 'Name', width: '150px' },
+  { key: 'email', header: 'Email', width: '200px' },
+  { key: 'status', header: 'Status', width: '90px' },
+]
+const miniRows = homeUsers.slice(0, 7)
+</script>
+
+<template>
+  <section aria-labelledby="lp-components" class="px-5 py-16 md:px-6 md:py-28">
+    <div class="mx-auto flex max-w-[1200px] flex-col gap-12">
+      <SectionHeading
+        id="lp-components"
+        label="Components"
+        title="Everything a product interface is built from"
+      >
+        21 components today — controls, data, overlays and the window around them. Each with
+        keyboard support, a docs page and stories in both themes.
+      </SectionHeading>
+
+      <ul class="grid grid-cols-2 gap-3 md:gap-8 lg:grid-cols-4">
+        <li
+          v-for="card in CARDS"
+          :key="card.name"
+          class="relative flex flex-col overflow-hidden bg-card has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-2 has-[a:focus-visible]:outline-(--lp-accent) modern:rounded-xl modern:border modern:border-border-subtle modern-dark:border-border modern:hover:border-border win98:shadow-window"
+          :class="card.desktopOnly && 'max-md:hidden'"
+        >
+          <div
+            inert
+            aria-hidden="true"
+            class="flex h-[110px] items-center justify-center overflow-hidden px-4 font-sans text-ui text-foreground md:h-[150px] modern:bg-background"
+          >
+            <Button v-if="card.name === 'Button'">Button</Button>
+            <Select v-else-if="card.name === 'Select'" model-value="Administrator">
+              <SelectTrigger class="w-[180px]" aria-label="Role" />
+              <SelectContent>
+                <SelectItem value="Administrator" label="Administrator" />
+              </SelectContent>
+            </Select>
+            <Badge v-else-if="card.name === 'Badge'" variant="success">Badge</Badge>
+            <ProgressBar
+              v-else-if="card.name === 'ProgressBar'"
+              :value="58"
+              aria-label="Progress"
+              class="w-[180px]"
+            />
+            <FilterBar
+              v-else-if="card.name === 'FilterBar'"
+              label="Filters"
+              :searchable="false"
+              :filters="[{ id: 'status', label: 'Status', value: 'Active' }]"
+            />
+            <Pagination
+              v-else-if="card.name === 'Pagination'"
+              :page="2"
+              :page-size="10"
+              :total="30"
+              hide-page-size
+              hide-summary
+              size="sm"
+              label="Pages"
+            />
+            <Checkbox v-else-if="card.name === 'Checkbox'" :model-value="true" label="Label" />
+            <div v-else-if="card.name === 'DataTable'" class="h-[260px] w-[200%] shrink-0 scale-50">
+              <DataTable
+                :rows="miniRows"
+                :columns="miniColumns"
+                caption="Users"
+                caption-visible
+                selectable="multiple"
+                :selected="[3, 5]"
+              >
+                <template #[`cell:status`]="{ row }">
+                  <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
+                </template>
+              </DataTable>
+            </div>
+          </div>
+          <div class="flex flex-1 flex-col gap-1.5 p-4 md:p-5">
+            <h3 class="text-[16px] leading-6 font-semibold text-foreground win98:font-bold">
+              <a
+                :href="withBase(`/components/${card.page}`)"
+                class="outline-none after:absolute after:inset-0"
+                >{{ card.name }}</a
+              >
+            </h3>
+            <p class="text-[14px] leading-5 text-muted-foreground">{{ card.text }}</p>
+          </div>
+        </li>
+      </ul>
+
+      <div class="flex flex-col gap-8 md:items-center">
+        <Button as="a" :href="withBase('/components/')" variant="secondary" size="lg">
+          See all 21 components
+        </Button>
+        <div class="flex flex-wrap items-center gap-2.5 md:justify-center">
+          <span class="text-[14px] leading-5 font-semibold text-muted-foreground win98:font-bold">
+            Coming next
+          </span>
+          <ul class="contents">
+            <li
+              v-for="name in NEXT"
+              :key="name"
+              class="px-3 py-1.5 text-[14px] leading-5 text-muted-foreground modern:rounded-full modern:border modern:border-border win98:shadow-raised"
+            >
+              {{ name }}
+            </li>
+          </ul>
+          <a
+            :href="withBase('/roadmap')"
+            class="text-[14px] leading-5 font-semibold text-(--lp-link) hover:underline win98:underline"
+            >Roadmap →</a
+          >
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingDemo.vue b/docs/.vitepress/theme/components/landing/LandingDemo.vue
new file mode 100644
index 00000000..7e2334db
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingDemo.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Badge, Button, DataTable, EditIcon, FilterBar, Pagination, TrashIcon } from 'rowkit'
+import type { HomeUser } from '../home-users'
+import EditUserDialog from './EditUserDialog.vue'
+import { columns, label, phoneColumns, tone, useLandingDemo } from './useLandingDemo'
+
+/**
+ * The live table in the hero: FilterBar, DataTable and Pagination on one
+ * Users list — the same code «A data table page in twenty lines» shows. On a
+ * phone, two columns and a page of five, as the 390 Figma frame draws it.
+ *
+ * Both layouts are in the markup and CSS shows one, so the server and the
+ * first paint agree at every width.
+ */
+const demo = useLandingDemo()
+const { search, sort, selected, page, pageSize, filtered, chips, pageRows } = demo
+
+const editing = ref<HomeUser>()
+
+function save(user: HomeUser): void {
+  demo.update(user)
+  editing.value = undefined
+}
+
+const phoneRows = computed(() => pageRows.value.slice(0, 5))
+</script>
+
+<template>
+  <div
+    class="isolate flex flex-col gap-3 bg-card p-4 text-left font-sans text-ui text-foreground modern:rounded-xl modern:border modern:border-border-subtle modern-dark:border-border modern:shadow-[0_24px_48px_-16px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.06)] win98:shadow-window max-md:p-3"
+  >
+    <FilterBar
+      v-model:search="search"
+      label="User filters"
+      search-placeholder="Search name or email…"
+      :filters="chips"
+      :result-count="filtered.length"
+      class="max-md:hidden"
+      @remove="demo.removeFilter"
+      @clear="demo.clearFilters"
+    >
+      <template #summary="{ count }">{{ count }} users</template>
+    </FilterBar>
+    <FilterBar
+      label="User filters"
+      :searchable="false"
+      :filters="chips"
+      :result-count="filtered.length"
+      class="md:hidden"
+      @remove="demo.removeFilter"
+      @clear="demo.clearFilters"
+    >
+      <template #summary="{ count }">{{ count }} users</template>
+    </FilterBar>
+
+    <DataTable
+      v-model:sort="sort"
+      v-model:selected="selected"
+      :rows="pageRows"
+      :columns="columns"
+      caption="Users"
+      caption-visible
+      selectable="multiple"
+      :row-label="(row) => row.name"
+      class="h-[340px] max-md:hidden"
+    >
+      <template #[`cell:status`]="{ row }">
+        <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
+      </template>
+      <template #[`cell:actions`]="{ row }">
+        <div class="flex">
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            :aria-label="`Edit ${row.name}`"
+            @click="editing = row"
+          >
+            <EditIcon />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            :aria-label="`Delete ${row.name}`"
+            @click="demo.remove(row.id)"
+          >
+            <TrashIcon />
+          </Button>
+        </div>
+      </template>
+    </DataTable>
+    <DataTable
+      v-model:sort="sort"
+      :rows="phoneRows"
+      :columns="phoneColumns"
+      caption="Users"
+      class="md:hidden"
+    >
+      <template #[`cell:status`]="{ row }">
+        <Badge :variant="tone[row.status]" size="sm">{{ label[row.status] }}</Badge>
+      </template>
+    </DataTable>
+
+    <Pagination
+      v-model:page="page"
+      v-model:page-size="pageSize"
+      :total="filtered.length"
+      :page-size-options="[10, 25, 50]"
+      label="Users pages"
+      class="max-md:hidden"
+    />
+    <Pagination
+      v-model:page="page"
+      :page-size="pageSize"
+      :total="filtered.length"
+      compact
+      hide-page-size
+      label="Users pages"
+      class="md:hidden"
+    />
+
+    <EditUserDialog :user="editing" @save="save" @close="editing = undefined" />
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingFaq.vue b/docs/.vitepress/theme/components/landing/LandingFaq.vue
new file mode 100644
index 00000000..51d6fa29
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingFaq.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import SectionHeading from './SectionHeading.vue'
+
+/**
+ * «Before you install»: what a team asks before it adds a dependency. The
+ * default theme is here on purpose — the site opens in modern, rowkit
+ * without an attribute is Windows 98, and that surprises people.
+ *
+ * An answer's `backticks` are code.
+ */
+const QUESTIONS = [
+  {
+    q: 'Is it ready for production?',
+    a: 'It is in the 1.0 beta: every component is tested and documented, and an API can still change between betas — each change is in the changelog.',
+  },
+  {
+    q: 'Does it work with Nuxt and SSR?',
+    a: 'Yes. Add the Tailwind Vite plugin; overlays render after mount and nothing reads the window on the server.',
+  },
+  {
+    q: 'Do I need Tailwind?',
+    a: 'Yes, Tailwind CSS v4. rowkit ships its utilities as a source your Tailwind build compiles, so you get only the classes you use.',
+  },
+  {
+    q: 'How big is it?',
+    a: '39 kB brotli for everything. Import one component and you ship only that — a Button is 2.6 kB.',
+  },
+  {
+    q: 'Which theme do I get by default?',
+    a: 'Windows 98, with no attribute. Put `data-theme="modern"` on `<html>` for the modern look — light and dark — or define your own.',
+  },
+  {
+    q: 'What is the licence?',
+    a: 'MIT. Use it in commercial products; no attribution in the interface is needed.',
+  },
+]
+</script>
+
+<template>
+  <section aria-labelledby="lp-faq" class="px-5 pb-16 md:px-6 md:pb-28">
+    <div class="mx-auto flex max-w-[1200px] flex-col gap-10">
+      <SectionHeading id="lp-faq" label="Questions" title="Before you install" />
+      <dl class="grid gap-x-12 md:grid-cols-2">
+        <div
+          v-for="item in QUESTIONS"
+          :key="item.q"
+          class="flex flex-col gap-2 border-t border-border py-6 win98:border-[#808080]"
+        >
+          <dt class="text-[16px] leading-6 font-semibold text-foreground win98:font-bold">
+            {{ item.q }}
+          </dt>
+          <dd class="m-0 text-[16px] leading-[26px] text-muted-foreground">
+            <template v-for="(part, i) in item.a.split('`')" :key="i">
+              <code v-if="i % 2" class="font-mono text-foreground">{{ part }}</code>
+              <template v-else>{{ part }}</template>
+            </template>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingFooter.vue b/docs/.vitepress/theme/components/landing/LandingFooter.vue
new file mode 100644
index 00000000..e106bde4
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingFooter.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { LINKS } from './links'
+
+/**
+ * The landing page's footer (Figma SiteV2/Footer): in ink with the light
+ * logo in the modern theme, in silver under a bevel in Windows 98.
+ */
+const COLUMNS = [
+  {
+    title: 'Docs',
+    links: [
+      { text: 'Introduction', href: withBase('/introduction') },
+      { text: 'Installation', href: withBase('/installation') },
+      { text: 'Themes', href: withBase('/foundations/themes') },
+      { text: 'Components', href: withBase('/components/') },
+    ],
+  },
+  {
+    title: 'Project',
+    links: [
+      { text: 'Roadmap', href: withBase('/roadmap') },
+      { text: 'Decisions', href: withBase('/decisions/001-typescript-pin') },
+      { text: 'Contributing', href: withBase('/contributing') },
+      { text: 'Changelog', href: LINKS.changelog },
+    ],
+  },
+  {
+    title: 'Elsewhere',
+    links: [
+      { text: 'GitHub', href: LINKS.github },
+      { text: 'npm', href: LINKS.npm },
+      { text: 'Storybook', href: LINKS.storybook },
+    ],
+  },
+]
+</script>
+
+<template>
+  <footer
+    class="bg-[#111114] px-5 py-12 text-[#fafaf8] md:px-16 win98:bg-background win98:text-foreground win98:shadow-[inset_0_1px_#808080,inset_0_2px_#fff]"
+  >
+    <div class="mx-auto flex max-w-[1312px] flex-col gap-10 md:flex-row md:justify-between">
+      <div class="flex max-w-[300px] flex-col gap-3">
+        <img
+          :src="withBase('/logo-light.svg')"
+          alt="rowkit"
+          width="115"
+          height="22"
+          class="win98:hidden"
+        />
+        <img
+          :src="withBase('/logo.svg')"
+          alt="rowkit"
+          width="115"
+          height="22"
+          class="modern:hidden"
+        />
+        <p class="text-[14px] leading-5 text-[#fafaf8]/65 win98:text-foreground">
+          A professional Vue 3 toolkit — the components a product interface is built from.
+        </p>
+        <p class="text-[14px] leading-5 text-[#fafaf8]/65 win98:text-foreground">
+          MIT licence · Built with rowkit
+        </p>
+      </div>
+      <nav aria-label="Site" class="grid grid-cols-3 gap-8 md:gap-12">
+        <div v-for="column in COLUMNS" :key="column.title" class="flex flex-col gap-2.5">
+          <h2 class="text-[14px] leading-5 font-semibold win98:font-bold">{{ column.title }}</h2>
+          <ul class="flex flex-col gap-2.5">
+            <li v-for="link in column.links" :key="link.text">
+              <a
+                :href="link.href"
+                class="text-[14px] leading-5 text-[#fafaf8]/65 hover:text-[#fafaf8] hover:underline win98:text-foreground"
+                >{{ link.text }}</a
+              >
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
+  </footer>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingHero.vue b/docs/.vitepress/theme/components/landing/LandingHero.vue
new file mode 100644
index 00000000..61fc39b6
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingHero.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { Button } from 'rowkit'
+import InstallCommand from './InstallCommand.vue'
+import LandingDemo from './LandingDemo.vue'
+import LookSwitch from './LookSwitch.vue'
+import { SOURCE } from './links'
+
+/**
+ * The first screen: what rowkit is, how to install it, and the live table
+ * with the switch that redraws the whole site in the other theme.
+ */
+</script>
+
+<template>
+  <section aria-labelledby="lp-title" class="px-5 pt-10 pb-16 md:px-6 md:pt-24 md:pb-28">
+    <div
+      class="mx-auto flex max-w-[820px] flex-col items-start gap-6 md:items-center md:text-center"
+    >
+      <p
+        class="flex items-center gap-2 px-2.5 py-[5px] text-[14px] leading-5 font-semibold modern:rounded-full modern:bg-(--lp-accent-soft) modern:text-(--lp-accent-on-soft) win98:bg-white win98:text-[#000080]"
+      >
+        <span class="size-2 rounded-full bg-[#d63a1f]" aria-hidden="true" />
+        1.0 beta · Vue 3 · TypeScript
+      </p>
+      <h1
+        id="lp-title"
+        class="text-[36px] leading-[1.12] font-semibold tracking-[-0.02em] text-foreground md:text-[52px] md:leading-[1.1] win98:font-bold"
+      >
+        Vue 3 components for <span class="lp-headline-accent">product interfaces</span>
+      </h1>
+      <p
+        class="max-w-[680px] text-[17px] leading-[26px] text-muted-foreground md:text-[20px] md:leading-[30px]"
+      >
+        A professional toolkit — typed, accessible, themeable. Tables, filters, forms and overlays
+        that agree with each other. Windows 98 and modern in the box; your own look in one call.
+      </p>
+      <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center">
+        <InstallCommand class="md:w-[300px]" />
+        <Button as="a" :href="withBase('/installation')" size="lg" class="lp-brand">
+          Get started
+        </Button>
+        <Button as="a" :href="withBase('/components/')" variant="secondary" size="lg">
+          Browse components
+        </Button>
+      </div>
+      <p class="text-[14px] leading-5 text-muted-foreground">
+        Vue 3.5+ <span aria-hidden="true">&nbsp;·&nbsp;</span> Tailwind CSS v4
+        <span aria-hidden="true">&nbsp;·&nbsp;</span> TypeScript
+        <span aria-hidden="true">&nbsp;·&nbsp;</span> MIT
+      </p>
+    </div>
+
+    <div class="mx-auto mt-10 flex max-w-[860px] flex-col gap-4 md:items-center">
+      <LookSwitch />
+      <LandingDemo class="w-full" />
+      <p class="text-[14px] leading-5 text-muted-foreground">
+        Live — sort, select and filter this table.
+        <a
+          :href="SOURCE.demo"
+          class="ml-2 font-semibold text-(--lp-link) hover:underline win98:underline"
+          >View source →</a
+        >
+      </p>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingPage.vue b/docs/.vitepress/theme/components/landing/LandingPage.vue
new file mode 100644
index 00000000..39afc1c5
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingPage.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import LandingCode from './LandingCode.vue'
+import LandingComponents from './LandingComponents.vue'
+import LandingFaq from './LandingFaq.vue'
+import LandingFooter from './LandingFooter.vue'
+import LandingHero from './LandingHero.vue'
+import LandingStart from './LandingStart.vue'
+import LandingThemes from './LandingThemes.vue'
+import LandingWhy from './LandingWhy.vue'
+
+/**
+ * rowkit.dev's landing page (Figma Site v2, Landing — 1440 and 390, in
+ * Windows 98, modern light and modern dark): one page, drawn by whichever
+ * rowkit theme the site is in. The theme's tokens do the work; the site's own
+ * values — the brand on the modern page, the code colours — are in
+ * `landing.css`.
+ *
+ * Isolated, so rowkit's z-index scale (a table's sticky header at 100) stays
+ * under VitePress's nav bar.
+ */
+</script>
+
+<template>
+  <div class="lp isolate bg-(--lp-page) font-sans text-foreground">
+    <LandingHero />
+    <LandingThemes />
+    <LandingComponents />
+    <LandingWhy />
+    <LandingCode />
+    <LandingFaq />
+    <LandingStart />
+    <LandingFooter />
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingStart.vue b/docs/.vitepress/theme/components/landing/LandingStart.vue
new file mode 100644
index 00000000..375e68bf
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingStart.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+import { Button } from 'rowkit'
+import CodeBlock from './CodeBlock.vue'
+import SectionHeading from './SectionHeading.vue'
+import { LINKS } from './links'
+
+/** «Start in a minute»: the three steps of Installation, and the way into the guide. */
+const STEPS = [
+  { title: 'Install', code: 'npm i rowkit@beta' },
+  { title: 'Add the styles', code: "@import 'tailwindcss';\n@import 'rowkit/styles';" },
+  { title: 'Pick a look', code: '<html data-theme="modern">' },
+]
+</script>
+
+<template>
+  <section aria-labelledby="lp-start" class="bg-background px-5 py-16 md:px-6 md:py-28">
+    <div class="mx-auto flex max-w-[1200px] flex-col gap-12">
+      <SectionHeading id="lp-start" label="Get started" title="Start in a minute" />
+      <ol class="grid gap-4 md:grid-cols-3 md:gap-6">
+        <li
+          v-for="(step, i) in STEPS"
+          :key="step.title"
+          class="flex flex-col gap-3.5 bg-card p-6 modern:rounded-xl modern:border modern:border-border-subtle modern-dark:border-border win98:shadow-window"
+        >
+          <h3
+            class="flex items-center gap-3 text-[18px] leading-[26px] font-semibold text-foreground win98:font-bold"
+          >
+            <span
+              class="flex size-6 items-center justify-center text-[14px] leading-5 font-semibold modern:rounded-md modern:bg-(--lp-accent-soft) modern:text-(--lp-accent-on-soft) win98:bg-white win98:text-[#000080]"
+              aria-hidden="true"
+              >{{ i + 1 }}</span
+            >
+            {{ step.title }}
+          </h3>
+          <CodeBlock :code="step.code" :label="step.title" variant="inset" />
+        </li>
+      </ol>
+      <div class="flex flex-col gap-3 md:flex-row md:justify-center">
+        <Button as="a" :href="withBase('/introduction')" size="lg" class="lp-brand">
+          Read the guide
+        </Button>
+        <Button as="a" :href="LINKS.storybook" variant="secondary" size="lg">Open Storybook</Button>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingThemes.vue b/docs/.vitepress/theme/components/landing/LandingThemes.vue
new file mode 100644
index 00000000..4fbb95f5
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingThemes.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { h, ref, type FunctionalComponent } from 'vue'
+import {
+  Button,
+  Checkbox,
+  Field,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Window,
+  WindowBody,
+} from 'rowkit'
+import { defineTheme } from 'rowkit/theme'
+import { siteScheme } from '../site/useSiteTheme'
+import CodeBlock from './CodeBlock.vue'
+import SectionHeading from './SectionHeading.vue'
+
+/**
+ * «One set of components. Any look.»: one New user form three times, live —
+ * in Windows 98, in modern, and in a theme `defineTheme()` writes from the
+ * values in the sample under them. The sample is the call the third panel
+ * runs, so what the page claims is what it does.
+ */
+const violet = {
+  '--color-control-primary': '#5b3df5',
+  '--color-control-primary-hover': '#4f33e0',
+  '--color-control-primary-active': '#4327c9',
+  '--color-checked': '#5b3df5',
+  '--radius-md': '10px',
+}
+
+const acme = defineTheme({ name: 'acme', extends: 'modern', light: violet, dark: violet })
+
+const SAMPLE = `import { defineTheme } from 'rowkit/theme'
+
+const violet = {
+  '--color-control-primary': '#5b3df5',
+  '--color-control-primary-hover': '#4f33e0',
+  '--color-control-primary-active': '#4327c9',
+  '--color-checked': '#5b3df5',
+  '--radius-md': '10px',
+}
+
+export const acme = defineTheme({
+  name: 'acme', // <html data-theme="acme">
+  extends: 'modern',
+  light: violet,
+  dark: violet,
+})`
+
+/**
+ * A <style> element: templates may not hold one, a render function may. The
+ * CSS goes in as `innerHTML`: as a text child the server escapes its quotes
+ * (`[data-theme=&quot;acme&quot;]`) and hydration reports a mismatch.
+ */
+const ThemeStyle: FunctionalComponent<{ css: string }> = (props) =>
+  h('style', { innerHTML: props.css })
+
+const PANELS = [
+  { theme: 'win98', name: 'Windows 98', note: 'data-theme="win98"' },
+  { theme: 'modern', name: 'Modern', note: 'data-theme="modern"' },
+  { theme: 'acme', name: 'Your theme', note: 'defineTheme()' },
+] as const
+
+const roles = ['Administrator', 'Editor', 'Viewer']
+const forms = ref(PANELS.map(() => ({ name: '', role: 'Administrator', invite: true })))
+</script>
+
+<template>
+  <section aria-labelledby="lp-themes" class="bg-card px-5 py-16 md:px-6 md:py-28">
+    <ThemeStyle :css="acme" />
+    <div class="mx-auto flex max-w-[1200px] flex-col gap-12">
+      <SectionHeading id="lp-themes" label="Themes" title="One set of components. Any look.">
+        A theme is token values and nothing else — the same markup, one attribute apart. Windows 98
+        and modern ship in the box; yours is one <code class="font-mono">defineTheme()</code> call.
+      </SectionHeading>
+
+      <div class="grid items-start gap-10 md:grid-cols-3 md:gap-6">
+        <figure v-for="(panel, i) in PANELS" :key="panel.theme" class="m-0 flex flex-col gap-3">
+          <figcaption class="flex items-baseline gap-2">
+            <span class="text-[16px] leading-6 font-semibold text-foreground win98:font-bold">{{
+              panel.name
+            }}</span>
+            <code class="font-mono text-[14px] text-muted-foreground">{{ panel.note }}</code>
+          </figcaption>
+          <div
+            :data-theme="panel.theme"
+            :data-color-scheme="panel.theme === 'win98' ? undefined : siteScheme"
+            class="font-sans text-ui text-foreground"
+          >
+            <Window>
+              <WindowBody class="flex flex-col gap-3 p-5">
+                <h3 class="text-[18px] leading-6 font-strong">New user</h3>
+                <Field label="Name" required>
+                  <Input v-model="forms[i]!.name" placeholder="Name" />
+                </Field>
+                <Select v-model="forms[i]!.role">
+                  <SelectTrigger aria-label="Role" />
+                  <SelectContent>
+                    <SelectItem v-for="role in roles" :key="role" :value="role" :label="role" />
+                  </SelectContent>
+                </Select>
+                <Checkbox v-model="forms[i]!.invite" label="Send an invitation" />
+                <div class="flex justify-end gap-2 pt-1">
+                  <Button variant="secondary">Cancel</Button>
+                  <Button>Create</Button>
+                </div>
+              </WindowBody>
+            </Window>
+          </div>
+        </figure>
+      </div>
+
+      <CodeBlock :code="SAMPLE" label="The theme in the third panel" />
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LandingWhy.vue b/docs/.vitepress/theme/components/landing/LandingWhy.vue
new file mode 100644
index 00000000..137e70e7
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LandingWhy.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import SectionHeading from './SectionHeading.vue'
+import SiteIcon, { type SiteIconName } from './SiteIcon.vue'
+
+/**
+ * «Built like a professional tool»: what rowkit does that a team would
+ * otherwise write and test itself, and the numbers behind it.
+ *
+ * The numbers are the repository's: the test count from `pnpm test`, the
+ * sizes from `pnpm size` (brotli), the component count from the docs.
+ */
+const FEATURES: { icon: SiteIconName; title: string; text: string }[] = [
+  {
+    icon: 'typed',
+    title: 'Typed',
+    text: 'Generics carry your row type from DataTable into its slots, sort and selection. Strict TypeScript, no any.',
+  },
+  {
+    icon: 'accessible',
+    title: 'Accessible',
+    text: 'WAI-ARIA patterns, full keyboard support, and an accessibility check on every story in CI — in both themes.',
+  },
+  {
+    icon: 'behaviour',
+    title: 'Its own behaviour',
+    text: 'Focus scope, dismissable layers, positioning and scroll lock written for rowkit, with no behaviour library underneath.',
+  },
+  {
+    icon: 'tokens',
+    title: 'Tokens all the way down',
+    text: '313 design tokens, each described. Change a few for your brand or define a whole theme of your own.',
+  },
+  {
+    icon: 'ssr',
+    title: 'SSR and Nuxt',
+    text: 'Overlays teleport after mount; nothing reads the window on the server. Works in Nuxt with the Vite plugin.',
+  },
+  {
+    icon: 'agents',
+    title: 'Ready for coding agents',
+    text: 'AGENTS.md ships in the package — every prop, event and slot, generated from the source you installed.',
+  },
+]
+
+const STATS = [
+  { value: '21', text: 'components, more on the way' },
+  { value: '1,494', text: 'tests: unit, component and in a real browser' },
+  { value: '39 kB', text: 'the whole library, brotli; a Button alone 2.6 kB' },
+  { value: '2 + yours', text: 'themes in the box, and any you define' },
+]
+</script>
+
+<template>
+  <section aria-labelledby="lp-why" class="bg-card px-5 py-16 md:px-6 md:py-28">
+    <div class="mx-auto flex max-w-[1200px] flex-col gap-12">
+      <SectionHeading id="lp-why" label="Why rowkit" title="Built like a professional tool">
+        The parts you would otherwise write and test yourself — done once, with the tests to prove
+        it.
+      </SectionHeading>
+
+      <ul class="grid gap-4 md:grid-cols-2 md:gap-9 lg:grid-cols-3">
+        <li
+          v-for="feature in FEATURES"
+          :key="feature.title"
+          class="flex flex-col gap-3 p-6 modern:rounded-xl modern:border modern:border-border-subtle modern-dark:border-border win98:shadow-window"
+        >
+          <SiteIcon :name="feature.icon" />
+          <h3 class="mt-1 text-[18px] leading-[26px] font-semibold text-foreground win98:font-bold">
+            {{ feature.title }}
+          </h3>
+          <p class="text-[15px] leading-6 text-muted-foreground">{{ feature.text }}</p>
+        </li>
+      </ul>
+
+      <dl
+        class="grid grid-cols-2 gap-x-6 gap-y-8 border-y border-border py-8 lg:grid-cols-4 win98:border-[#808080]"
+      >
+        <div
+          v-for="stat in STATS"
+          :key="stat.value"
+          class="flex flex-col-reverse justify-end gap-1.5"
+        >
+          <dt class="max-w-[220px] text-[14px] leading-5 text-muted-foreground">{{ stat.text }}</dt>
+          <dd
+            class="m-0 text-[28px] leading-9 font-semibold text-foreground md:text-[32px] md:leading-10 win98:font-bold"
+          >
+            {{ stat.value }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/LookSwitch.vue b/docs/.vitepress/theme/components/landing/LookSwitch.vue
new file mode 100644
index 00000000..09b712ca
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/LookSwitch.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useData } from 'vitepress'
+import { Button, ButtonGroup } from 'rowkit'
+import { readSiteTheme, setSiteTheme, siteTheme, type SiteTheme } from '../site/useSiteTheme'
+
+/**
+ * «See the whole site in Windows 98 | Modern», over the live table: the first
+ * thing on the page worth pressing. It switches the theme of the whole site —
+ * this page and the examples in the docs — and is remembered. Beside it, in
+ * the modern theme, the light/dark switch VitePress keeps in its nav bar.
+ *
+ * rowkit's own toggle buttons: pressed buttons in a group, drawn by whichever
+ * theme they switch to.
+ */
+const looks: { value: SiteTheme; label: string }[] = [
+  { value: 'win98', label: 'Windows 98' },
+  { value: 'modern', label: 'Modern' },
+]
+
+const { isDark } = useData()
+
+onMounted(readSiteTheme)
+</script>
+
+<template>
+  <div class="flex items-center gap-3 max-md:flex-col max-md:items-start max-md:gap-2">
+    <span id="lp-look-label" class="text-[14px] leading-5 text-muted-foreground">
+      See the whole site in
+    </span>
+    <div class="flex items-center gap-1.5">
+      <ButtonGroup aria-labelledby="lp-look-label">
+        <Button
+          v-for="look in looks"
+          :key="look.value"
+          variant="secondary"
+          size="lg"
+          :pressed="siteTheme === look.value"
+          class="aria-pressed:font-strong"
+          @click="setSiteTheme(look.value)"
+        >
+          {{ look.label }}
+        </Button>
+      </ButtonGroup>
+      <Button
+        variant="secondary"
+        size="icon-lg"
+        aria-label="Dark mode"
+        :pressed="isDark"
+        class="win98:hidden"
+        @click="isDark = !isDark"
+      >
+        <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true">
+          <circle cx="10" cy="10" r="7.25" fill="none" stroke="currentColor" stroke-width="1.5" />
+          <path d="M10 2.75a7.25 7.25 0 0 1 0 14.5Z" fill="currentColor" />
+        </svg>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/SectionHeading.vue b/docs/.vitepress/theme/components/landing/SectionHeading.vue
new file mode 100644
index 00000000..5e34994e
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/SectionHeading.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * A landing section's heading: the label above it (THEMES, COMPONENTS…, in
+ * vermilion; the modern theme's only), the title, and a lead paragraph from
+ * the slot. Centred on a wide screen, flush left on a phone.
+ */
+withDefaults(
+  defineProps<{
+    id: string
+    label: string
+    title: string
+    align?: 'center' | 'start'
+  }>(),
+  { align: 'center' }
+)
+</script>
+
+<template>
+  <div
+    class="flex max-w-[720px] flex-col gap-3.5"
+    :class="align === 'center' && 'md:mx-auto md:items-center md:text-center'"
+  >
+    <p
+      class="text-[12px] leading-4 font-semibold tracking-[0.08em] text-(--lp-accent) uppercase win98:hidden"
+    >
+      {{ label }}
+    </p>
+    <h2
+      :id="id"
+      class="text-[26px] leading-[32px] font-semibold tracking-[-0.01em] text-foreground md:text-[32px] md:leading-[40px] win98:font-bold"
+    >
+      {{ title }}
+    </h2>
+    <p
+      v-if="$slots.default"
+      class="text-[17px] leading-[26px] text-muted-foreground md:text-[20px] md:leading-[30px]"
+    >
+      <slot />
+    </p>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/landing/SiteIcon.vue b/docs/.vitepress/theme/components/landing/SiteIcon.vue
new file mode 100644
index 00000000..c50ec4b3
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/SiteIcon.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { withBase } from 'vitepress'
+
+/**
+ * The six «Built like a professional tool» icons (Figma Site icons): a line
+ * drawing at 24px in the modern theme, on a vermilion plaque; the 32px pixel
+ * drawing in Windows 98.
+ */
+export type SiteIconName = 'typed' | 'accessible' | 'behaviour' | 'tokens' | 'ssr' | 'agents'
+
+defineProps<{ name: SiteIconName }>()
+
+/** The outline drawings, stroked in currentColor. */
+const PATHS: Record<SiteIconName, string[]> = {
+  typed: [
+    'M9 4C7 4 6.5 5 6.5 6.5V9.5C6.5 10.6 5.6 12 4 12C5.6 12 6.5 13.4 6.5 14.5V17.5C6.5 19 7 20 9 20M15 4C17 4 17.5 5 17.5 6.5V9.5C17.5 10.6 18.4 12 20 12C18.4 12 17.5 13.4 17.5 14.5V17.5C17.5 19 17 20 15 20',
+  ],
+  accessible: [
+    'M5 8.5L12 10M12 10L19 8.5M12 10V14.5M12 14.5L9 21M12 14.5L15 21',
+    'M13 4.75a1 1 0 1 1-2 0a1 1 0 1 1 2 0Z',
+  ],
+  behaviour: ['M3.5 12L12 16.5L20.5 12M3.5 16L12 20.5L20.5 16M12 3.5L20.5 8L12 12.5L3.5 8L12 3.5Z'],
+  tokens: [
+    'M10.5 4.5H4.5V10.5H10.5V4.5Z',
+    'M19.5 4.5H13.5V10.5H19.5V4.5Z',
+    'M10.5 13.5H4.5V19.5H10.5V13.5Z',
+    'M18.75 16.5a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 1 1 4.5 0Z',
+  ],
+  ssr: ['M8 7.25H8.01M8 16.75H8.01M12 10V14M4.5 4.5H19.5V10H4.5V4.5ZM4.5 14H19.5V19.5H4.5V14Z'],
+  agents: [
+    'M18.5 16V20M16.5 18H20.5M12 3.5L13.9 9.1L19.5 11L13.9 12.9L12 18.5L10.1 12.9L4.5 11L10.1 9.1L12 3.5Z',
+  ],
+}
+</script>
+
+<template>
+  <span
+    class="flex size-9 items-center justify-center rounded-lg bg-(--lp-accent-soft) text-(--lp-accent) win98:hidden"
+    aria-hidden="true"
+  >
+    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor">
+      <path
+        v-for="d in PATHS[name]"
+        :key="d"
+        :d="d"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </span>
+  <img
+    :src="withBase(`/icons/site/${name}-32.png`)"
+    alt=""
+    width="32"
+    height="32"
+    class="[image-rendering:pixelated] modern:hidden"
+  />
+</template>
diff --git a/docs/.vitepress/theme/components/landing/highlight.ts b/docs/.vitepress/theme/components/landing/highlight.ts
new file mode 100644
index 00000000..617553b2
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/highlight.ts
@@ -0,0 +1,66 @@
+/**
+ * Syntax colours for the landing page's few code samples: TypeScript, a Vue
+ * template and two CSS imports.
+ *
+ * Not a general highlighter, and deliberately so. The samples are fixed and
+ * short; a dozen lines of rules colour them as the Figma page does (`site/code-*`:
+ * keyword, string, number, comment, tag, attribute) in each theme, where
+ * VitePress's highlighter would bring its own palette and only one of it.
+ */
+export type TokenKind = 'plain' | 'keyword' | 'string' | 'number' | 'comment' | 'tag' | 'attr'
+
+export interface Token {
+  kind: TokenKind
+  text: string
+}
+
+const KEYWORDS = new Set(['import', 'from', 'export', 'const', 'let', 'return'])
+
+/**
+ * One rule per token, tried in order at the current position. A tag opens
+ * «inside a tag», where a bare word is an attribute; `>` closes it — across
+ * lines, since a component's attributes are one per line.
+ */
+const RULES: [RegExp, (text: string, inTag: boolean) => TokenKind][] = [
+  [/\/\/[^\n]*/y, () => 'comment'],
+  [/'[^'\n]*'|"[^"\n]*"|`[^`\n]*`/y, () => 'string'],
+  [/<\/?[A-Za-z][\w.-]*/y, () => 'tag'],
+  [/\/?>/y, (_, inTag) => (inTag ? 'tag' : 'plain')],
+  // `@import`, not the `@beta` of a package's tag.
+  [/(?<![\w])@[a-z]+/y, () => 'keyword'],
+  [
+    /[:@]?[A-Za-z_$][\w$.-]*(?::[\w-]+)?/y,
+    (text, inTag) => (inTag ? 'attr' : KEYWORDS.has(text) ? 'keyword' : 'plain'),
+  ],
+  [/\d+(?:\.\d+)?/y, () => 'number'],
+]
+
+export function highlight(code: string): Token[][] {
+  let inTag = false
+  return code.split('\n').map((line) => {
+    const tokens: Token[] = []
+    const push = (kind: TokenKind, text: string) => {
+      const last = tokens.at(-1)
+      if (last?.kind === kind) last.text += text
+      else tokens.push({ kind, text })
+    }
+
+    let at = 0
+    outer: while (at < line.length) {
+      for (const [pattern, kindOf] of RULES) {
+        pattern.lastIndex = at
+        const match = pattern.exec(line)
+        if (!match) continue
+        const text = match[0]
+        const kind = kindOf(text, inTag)
+        if (kind === 'tag') inTag = !text.endsWith('>')
+        push(kind, text)
+        at += text.length
+        continue outer
+      }
+      push('plain', line[at] ?? '')
+      at += 1
+    }
+    return tokens
+  })
+}
diff --git a/docs/.vitepress/theme/components/landing/links.ts b/docs/.vitepress/theme/components/landing/links.ts
new file mode 100644
index 00000000..6ae2f520
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/links.ts
@@ -0,0 +1,14 @@
+/** Where the landing page points outside the docs. */
+const REPO = 'https://github.com/NikolaiKushner/rowkit'
+
+export const LINKS = {
+  github: REPO,
+  npm: 'https://www.npmjs.com/package/rowkit',
+  storybook: 'https://storybook.rowkit.dev',
+  changelog: `${REPO}/releases`,
+}
+
+/** The code behind what the page shows running. */
+export const SOURCE = {
+  demo: `${REPO}/blob/main/docs/.vitepress/theme/components/landing/LandingDemo.vue`,
+}
diff --git a/docs/.vitepress/theme/components/landing/useLandingDemo.ts b/docs/.vitepress/theme/components/landing/useLandingDemo.ts
new file mode 100644
index 00000000..ce17db10
--- /dev/null
+++ b/docs/.vitepress/theme/components/landing/useLandingDemo.ts
@@ -0,0 +1,102 @@
+import { computed, ref, watch } from 'vue'
+import { useClientSort } from 'rowkit'
+import type { DataTableColumn, DataTableSort, FilterChip } from 'rowkit'
+import { homeUsers, type HomeUser } from '../home-users'
+
+/**
+ * The live table at the top of the landing page: a Users list with search, a
+ * status filter, sorting, selection and paging. The pencil edits a row and the
+ * bin removes it — from this tab's copy of the list, nowhere else.
+ */
+export function useLandingDemo() {
+  const people = ref<HomeUser[]>([...homeUsers])
+
+  const search = ref('')
+  // Seeded so the table opens with a chip, as the Figma hero draws it.
+  const status = ref<HomeUser['status'] | undefined>('active')
+  const sort = ref<DataTableSort<HomeUser> | undefined>({ key: 'name', direction: 'asc' })
+  // Alan Turing and Barbara Liskov: both on page one under the seeded sort.
+  const selected = ref<number[]>([3, 4])
+  const page = ref(1)
+  const pageSize = ref(25)
+
+  const filtered = computed(() => {
+    const query = search.value.trim().toLowerCase()
+    return people.value.filter((row) => {
+      if (status.value && row.status !== status.value) return false
+      if (!query) return true
+      return row.name.toLowerCase().includes(query) || row.email.toLowerCase().includes(query)
+    })
+  })
+
+  // Pagination never moves the page itself; the application does, so a
+  // narrowed list does not leave the reader on an empty page.
+  watch([search, status, pageSize], () => {
+    page.value = 1
+  })
+
+  const chips = computed<FilterChip[]>(() =>
+    status.value ? [{ id: 'status', label: 'Status', value: label[status.value] }] : []
+  )
+
+  const sorted = useClientSort(filtered, sort, columns)
+
+  const pageRows = computed(() => {
+    const start = (page.value - 1) * pageSize.value
+    return sorted.value.slice(start, start + pageSize.value)
+  })
+
+  function removeFilter(): void {
+    status.value = undefined
+  }
+
+  function clearFilters(): void {
+    search.value = ''
+    status.value = undefined
+  }
+
+  function remove(id: number): void {
+    people.value = people.value.filter((row) => row.id !== id)
+    selected.value = selected.value.filter((other) => other !== id)
+  }
+
+  /** Writes an edited row back, by id. */
+  function update(user: HomeUser): void {
+    people.value = people.value.map((row) => (row.id === user.id ? user : row))
+  }
+
+  return {
+    search,
+    status,
+    sort,
+    selected,
+    page,
+    pageSize,
+    filtered,
+    chips,
+    pageRows,
+    removeFilter,
+    clearFilters,
+    remove,
+    update,
+  }
+}
+
+export const columns: DataTableColumn<HomeUser>[] = [
+  { key: 'name', header: 'Name', sortable: true, width: '170px' },
+  { key: 'email', header: 'Email', width: '220px' },
+  { key: 'role', header: 'Role', sortable: true, width: '96px' },
+  { key: 'status', header: 'Status', width: '104px' },
+  { key: 'seats', header: 'Seats', sortable: true, numeric: true, width: '72px' },
+  { id: 'actions', header: 'Actions', headerSrOnly: true, width: '64px' },
+]
+
+/** The phone's table (Figma Landing, 390): name and status. */
+export const phoneColumns = columns.filter(
+  (column) => 'key' in column && (column.key === 'name' || column.key === 'status')
+)
+
+/** Status as the badges read it. */
+export const label = { active: 'Active', invited: 'Invited', suspended: 'Suspended' } as const
+
+export const tone = { active: 'success', invited: 'warning', suspended: 'danger' } as const
diff --git a/docs/.vitepress/theme/components/site/ComponentsLook.vue b/docs/.vitepress/theme/components/site/ComponentsLook.vue
new file mode 100644
index 00000000..db3de613
--- /dev/null
+++ b/docs/.vitepress/theme/components/site/ComponentsLook.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { onMounted, useId } from 'vue'
+import { readSiteTheme, setSiteTheme, siteTheme, type SiteTheme } from './useSiteTheme'
+
+/**
+ * The switch for which rowkit theme the live examples
+ * are drawn in. VitePress's chrome around them stays as it is — this changes
+ * the components, not the site.
+ *
+ * Two radio buttons styled as a segmented control: one tab stop, the arrows
+ * move between them, and the group is named.
+ */
+const looks: { value: SiteTheme; label: string }[] = [
+  { value: 'win98', label: 'Windows 98' },
+  { value: 'modern', label: 'Modern' },
+]
+
+/** Its own group name: the switch can be on the page twice (nav bar and phone menu). */
+const name = useId()
+
+onMounted(readSiteTheme)
+</script>
+
+<template>
+  <div class="rk-look" role="radiogroup" aria-label="Theme of the examples">
+    <span class="rk-look-label" aria-hidden="true">Examples in</span>
+    <div class="rk-look-segments">
+      <label v-for="look in looks" :key="look.value" class="rk-look-segment">
+        <input
+          type="radio"
+          :name="name"
+          :value="look.value"
+          :checked="siteTheme === look.value"
+          @change="setSiteTheme(look.value)"
+        />
+        <span>{{ look.label }}</span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rk-look {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 16px;
+}
+
+.rk-look-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.rk-look-segments {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 8px;
+  background: var(--vp-c-default-soft);
+}
+
+.rk-look-segment {
+  position: relative;
+  cursor: pointer;
+}
+
+.rk-look-segment input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.rk-look-segment span {
+  display: block;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--vp-c-text-2);
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+}
+
+.rk-look-segment:hover span {
+  color: var(--vp-c-text-1);
+}
+
+.rk-look-segment input:checked + span {
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+}
+
+.rk-look-segment input:focus-visible + span {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 1px;
+}
+
+/*
+ * Where it shows. Plain media queries rather than utilities: these scoped
+ * rules are unlayered and would beat any utility class.
+ *
+ * In the nav bar from 1360px, without the label (the group keeps its name) —
+ * at 1280 the nav bar runs 6px short;
+ * above a page's content between 768 and 1359px, where the nav bar is full;
+ * in the menu on a phone.
+ */
+.rk-look.in-nav {
+  display: none;
+}
+
+.rk-look.in-nav .rk-look-label {
+  display: none;
+}
+
+.rk-look.in-doc {
+  display: none;
+  justify-content: flex-end;
+  padding: 0 0 16px;
+}
+
+@media (min-width: 1360px) {
+  .rk-look.in-nav {
+    display: flex;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1359px) {
+  .rk-look.in-doc {
+    display: flex;
+  }
+}
+
+/* In the phone menu the switch takes the full width, label above. */
+.rk-look.in-screen {
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px 0 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/site/ExplorerLayout.vue b/docs/.vitepress/theme/components/site/ExplorerLayout.vue
deleted file mode 100644
index 90ca6f44..00000000
--- a/docs/.vitepress/theme/components/site/ExplorerLayout.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { Content, useData, useRoute, useRouter, withBase, type DefaultTheme } from 'vitepress'
-import {
-  ArrowLeft32Icon,
-  ArrowRight32Icon,
-  ArrowUp32Icon,
-  Button,
-  ScrollArea,
-  Search32Icon,
-  SearchIcon,
-  Separator,
-  StatusBar,
-  StatusBarSection,
-  TriangleLeftIcon,
-  TriangleRightIcon,
-  Window,
-  WindowBody,
-  WindowButton,
-  WindowTitleBar,
-} from 'rowkit'
-import FolderTree from './FolderTree.vue'
-import { searchShortcut } from './menu'
-import { openFind } from './useFind'
-import PageHeader from './PageHeader.vue'
-import PageOutline from './PageOutline.vue'
-import SiteAddressBar from './SiteAddressBar.vue'
-import SiteMenuBar from './SiteMenuBar.vue'
-import SiteTaskbar from './SiteTaskbar.vue'
-import SiteToolbarButton from './SiteToolbarButton.vue'
-import { siteTheme } from './useSiteTheme'
-import { canGoBack, canGoForward, normalize, recordVisit, stepOf, useSiteNav } from './useSiteNav'
-import SiteWallpaper from './SiteWallpaper.vue'
-
-/**
- * A docs page as a Windows 98 Explorer window, maximized above the taskbar:
- * menu bar, toolbar, address bar, the folder tree and the page, and a status
- * bar. Only the panes scroll — the window itself never does.
- */
-const { page, theme, frontmatter } = useData<DefaultTheme.Config>()
-const route = useRoute()
-const router = useRouter()
-const { tree, pages, current, up } = useSiteNav()
-
-const title = computed(() => String(frontmatter.value.title ?? page.value.title ?? 'rowkit'))
-
-// The search field's shortcut as this platform writes it; the server cannot know.
-const shortcut = ref('⌘K')
-onMounted(() => (shortcut.value = searchShortcut()))
-const windowTitle = computed(() => `${title.value} — rowkit`)
-
-const editLink = computed(() => {
-  const pattern = theme.value.editLink?.pattern
-  return typeof pattern === 'string'
-    ? pattern.replace(/:path/g, page.value.relativePath)
-    : undefined
-})
-
-const lastUpdated = computed(() => {
-  const at = page.value.lastUpdated
-  return at === undefined ? undefined : new Date(at).toISOString().slice(0, 10)
-})
-
-/*
- * The page scrolls inside its pane, so the router's own scrolling — which
- * moves the window — does nothing here. A new page starts at the top; a hash
- * scrolls its heading into view inside the pane.
- */
-const contentArea = ref<{ viewport?: HTMLElement }>()
-
-function scrollToHash(hash: string): void {
-  const viewport = contentArea.value?.viewport
-  if (!viewport) return
-  const target = hash ? document.getElementById(decodeURIComponent(hash.slice(1))) : null
-  if (target) target.scrollIntoView({ block: 'start' })
-  else viewport.scrollTop = 0
-}
-
-let popped = false
-const onPopState = () => {
-  popped = true
-}
-const onHashChange = () => scrollToHash(location.hash)
-
-// The tree over the page on a phone, in the modern theme; it goes when a page opens.
-const sidebarOpen = ref(false)
-
-watch(
-  () => route.path,
-  (path) => {
-    sidebarOpen.value = false
-    const here = normalize(path)
-    recordVisit(here, popped ? stepOf(here) : 'push')
-    popped = false
-    void nextTick(() => scrollToHash(location.hash))
-  }
-)
-
-onMounted(() => {
-  recordVisit(normalize(route.path), 'push')
-  window.addEventListener('popstate', onPopState)
-  window.addEventListener('hashchange', onHashChange)
-  scrollToHash(location.hash)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('popstate', onPopState)
-  window.removeEventListener('hashchange', onHashChange)
-})
-
-const toDesktop = () => void router.go(withBase('/'))
-const goBack = () => history.back()
-const goForward = () => history.forward()
-</script>
-
-<template>
-  <div class="rk-desktop relative isolate flex h-dvh flex-col overflow-hidden bg-background">
-    <SiteWallpaper />
-    <Window
-      class="min-h-0 flex-1 modern:m-3 modern:isolate modern:max-md:m-0 modern:max-md:rounded-none modern:max-md:shadow-none"
-    >
-      <!--
-        The modern window has no title bar of its own: Finder draws the caption
-        buttons in its toolbar. The title bar stays, out of sight, as the
-        window's name.
-      -->
-      <WindowTitleBar :title="windowTitle" class="modern:sr-only">
-        <template #icon>
-          <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" />
-        </template>
-        <template v-if="siteTheme !== 'modern'" #controls>
-          <WindowButton glyph="minimize" label="Minimize to the desktop" @click="toDesktop" />
-          <WindowButton glyph="maximize" label="Maximize" disabled />
-          <WindowButton glyph="close" label="Close and go to the desktop" @click="toDesktop" />
-        </template>
-      </WindowTitleBar>
-
-      <!-- On a phone the Start menu is the navigation, as Figma's 390px templates draw it. -->
-      <!-- In the modern theme the menus live in the menu bar at the top of the screen. -->
-      <SiteMenuBar v-if="siteTheme !== 'modern'" class="max-md:hidden modern:hidden" />
-      <Separator decorative class="max-md:hidden modern:hidden" />
-
-      <div
-        role="toolbar"
-        aria-label="Navigation"
-        class="flex h-[58px] shrink-0 items-start gap-0.5 px-1 pt-px modern:hidden"
-      >
-        <SiteToolbarButton label="Back" :disabled="!canGoBack" @click="goBack">
-          <ArrowLeft32Icon />
-        </SiteToolbarButton>
-        <SiteToolbarButton
-          label="Forward"
-          :disabled="!canGoForward"
-          class="max-md:hidden"
-          @click="goForward"
-        >
-          <ArrowRight32Icon />
-        </SiteToolbarButton>
-        <SiteToolbarButton label="Up" class="max-md:hidden" @click="router.go(withBase(up))">
-          <ArrowUp32Icon />
-        </SiteToolbarButton>
-        <Separator orientation="vertical" decorative class="mt-1 h-[47px] self-start" />
-        <SiteToolbarButton label="Find" @click="openFind">
-          <Search32Icon />
-        </SiteToolbarButton>
-      </div>
-      <Separator decorative class="modern:hidden" />
-
-      <SiteAddressBar :pages="pages" :current="current" class="modern:hidden" />
-
-      <!--
-        The modern toolbar, as a Finder window draws it (Figma SiteModern/Window/Finder):
-        the caption buttons, history, where you are, and search, in one 52px row.
-      -->
-      <div
-        class="group/titlebar flex h-[52px] shrink-0 items-center gap-2 bg-titlebar-from pr-3 pl-[18px] shadow-titlebar max-md:h-12 max-md:px-1.5 win98:hidden"
-      >
-        <span
-          class="flex shrink-0 items-center gap-caption-gap pr-3.5 max-md:hidden [&>[data-glyph=close]]:order-(--rk-close-order)"
-        >
-          <WindowButton glyph="minimize" label="Minimize to the desktop" @click="toDesktop" />
-          <WindowButton glyph="maximize" label="Maximize" disabled />
-          <WindowButton glyph="close" label="Close and go to the desktop" @click="toDesktop" />
-        </span>
-        <div
-          role="toolbar"
-          aria-label="Navigation"
-          class="flex min-w-0 flex-1 items-center gap-2 max-md:gap-0.5"
-        >
-          <!-- On a phone (Figma Component page, 390) the tree slides over the page from here. -->
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label="Contents"
-            :aria-expanded="sidebarOpen"
-            aria-controls="rk-sidebar"
-            class="md:hidden"
-            @click="sidebarOpen = !sidebarOpen"
-          >
-            <span
-              aria-hidden="true"
-              class="block size-4 bg-current [mask-size:contain]"
-              :style="{ maskImage: `url(${withBase('/icons/modern/sidebar.svg')})` }"
-            />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label="Back"
-            :disabled="!canGoBack"
-            @click="goBack"
-          >
-            <TriangleLeftIcon />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label="Forward"
-            :disabled="!canGoForward"
-            class="max-md:hidden"
-            @click="goForward"
-          >
-            <TriangleRightIcon />
-          </Button>
-          <span
-            class="min-w-0 truncate text-heading font-strong text-foreground max-md:flex-1 max-md:text-center"
-            >{{ title }}</span
-          >
-          <span class="flex-1 max-md:hidden" />
-          <!-- Figma SiteModern/SearchField: a field to look at, a button underneath — it opens search. -->
-          <button
-            type="button"
-            aria-keyshortcuts="Meta+K Control+K"
-            class="flex h-7 w-[200px] shrink-0 items-center gap-1.5 rounded-[7px] bg-input pr-1.5 pl-2 text-left text-ui text-text-subtle shadow-[inset_0_1px_1px_rgb(0_0_0/0.04),inset_0_0_0_1px_#86868b] outline-none focus-visible:focus-outer max-md:size-7 max-md:justify-center max-md:bg-transparent max-md:p-0 max-md:text-foreground max-md:shadow-none max-md:hover:bg-control-ghost-hover"
-            @click="openFind"
-          >
-            <SearchIcon class="size-3.5 shrink-0" />
-            <span class="flex-1 max-md:sr-only">Search</span>
-            <kbd
-              class="rounded-[4px] bg-control-latched px-[5px] py-px font-sans text-ui text-muted-foreground max-md:hidden"
-              >{{ shortcut }}</kbd
-            >
-          </button>
-        </div>
-      </div>
-
-      <WindowBody class="relative flex min-h-0 gap-1 p-0.5 modern:gap-0 modern:p-0">
-        <!--
-          Below 768px the tree gives way to the page; the address bar still
-          lists every page. In the modern theme the Contents button slides it
-          back over the page.
-        -->
-        <ScrollArea
-          id="rk-sidebar"
-          class="w-[260px] shrink-0 bg-input p-0.5 shadow-sunken max-md:hidden modern:w-[240px] modern:bg-muted modern:px-2 modern:pt-3 modern:pb-2 modern:shadow-[inset_-1px_0_0_var(--color-border)]"
-          :class="
-            sidebarOpen &&
-            'modern:max-md:absolute modern:max-md:inset-y-0 modern:max-md:left-0 modern:max-md:z-20 modern:max-md:block modern:max-md:w-[280px] modern:max-md:shadow-[0_10px_30px_rgb(0_0_0/0.25)]!'
-          "
-          @keydown.esc="sidebarOpen = false"
-        >
-          <FolderTree :tree="tree" :current="current" />
-        </ScrollArea>
-        <ScrollArea
-          ref="contentArea"
-          :label="title"
-          class="min-w-0 flex-1 bg-input p-0.5 shadow-sunken modern:p-0 modern:shadow-none"
-        >
-          <!--
-            Text wraps at the pane's width whatever is inside: without
-            `contain`, one wide demo would widen the page and every paragraph
-            with it. A wide element overflows on its own instead.
-
-            The header spans the page; under it, the text and «On this page»,
-            868px and 200px with 32px between at full width, as in Figma.
-            Narrower, «On this page» is a drop-down under the header, and on
-            a phone the page sits 12px in, as the 390px templates draw it.
-          -->
-          <div
-            class="max-w-[1100px] px-3 pt-3 pb-6 contain-inline-size md:p-6 modern:p-5 modern:md:px-10 modern:md:pt-7 modern:md:pb-10"
-          >
-            <PageHeader :title="title" :current="current" />
-            <PageOutline as="select" :scroller="contentArea?.viewport" class="mt-4 xl:hidden" />
-            <div class="grid xl:mt-6 grid-cols-1 gap-8 xl:grid-cols-[minmax(0,1fr)_200px]">
-              <main class="vp-doc rk-page min-w-0">
-                <Content />
-              </main>
-              <aside class="sticky top-0 self-start max-xl:hidden">
-                <PageOutline :scroller="contentArea?.viewport" />
-              </aside>
-            </div>
-          </div>
-        </ScrollArea>
-      </WindowBody>
-
-      <!-- Modern (Figma Finder footer): the edit link in the link colour, the rest in grey. -->
-      <StatusBar class="modern:h-[26px] modern:px-4 modern:max-md:hidden">
-        <StatusBarSection>
-          <a
-            v-if="editLink"
-            :href="editLink"
-            target="_blank"
-            rel="noreferrer"
-            class="text-foreground no-underline modern:text-link"
-          >
-            {{ theme.editLink?.text ?? 'Edit this page' }}
-          </a>
-        </StatusBarSection>
-        <StatusBarSection
-          v-if="lastUpdated"
-          class="w-[170px] max-md:hidden modern:w-auto modern:text-text-subtle"
-        >
-          Last updated: {{ lastUpdated }}<span class="win98:hidden">&nbsp;· MIT</span>
-        </StatusBarSection>
-        <StatusBarSection :class="lastUpdated ? 'modern:hidden' : 'modern:text-text-subtle'"
-          >MIT</StatusBarSection
-        >
-      </StatusBar>
-    </Window>
-    <SiteTaskbar :task="windowTitle" />
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/FindWindow.vue b/docs/.vitepress/theme/components/site/FindWindow.vue
deleted file mode 100644
index be9ee258..00000000
--- a/docs/.vitepress/theme/components/site/FindWindow.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { useRouter } from 'vitepress'
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  EmptyState,
-  Input,
-  SearchIcon,
-  StatusBar,
-  StatusBarSection,
-} from 'rowkit'
-import { find, indexReady, loadIndex } from './useFindIndex'
-import { finding } from './useFind'
-import { useSiteNav } from './useSiteNav'
-
-/**
- * Find, as Windows 98's «Find: Files and Folders»: a «Look for» field, Find
- * Now and New Search, the results as a list view — Name · In folder · Type —
- * and the keys in the status bar. Pages and folders match by name; sections
- * by their text, from the index VitePress builds.
- *
- * The field is a combobox over the results: ↑ ↓ move the highlight without
- * leaving the field, Enter opens, Escape closes. The dialog keeps focus in.
- */
-const { tree } = useSiteNav()
-const router = useRouter()
-
-const query = ref('')
-const searched = ref('')
-const active = ref(0)
-const field = ref<HTMLElement>()
-const list = ref<HTMLElement | null>()
-
-// Results follow the typing; Find Now runs the search at once. They are
-// worked out again once the index has loaded, for a query typed before it did.
-const results = computed(() => {
-  void indexReady.value
-  return find(searched.value, tree.value)
-})
-
-let typing: ReturnType<typeof setTimeout> | undefined
-watch(query, (value) => {
-  clearTimeout(typing)
-  typing = setTimeout(() => (searched.value = value), 120)
-})
-
-/*
- * With a scroll bar beside the rows, the header stops 16px short of the right
- * edge, as a Windows 98 list view's does, so its columns stay over theirs.
- */
-const scrolling = ref(false)
-
-watch(results, () => {
-  active.value = 0
-  void nextTick(() => {
-    const el = list.value
-    scrolling.value = el ? el.scrollHeight > el.clientHeight : false
-  })
-})
-
-watch(finding, (open) => {
-  if (!open) return
-  void loadIndex()
-  void nextTick(() => field.value?.querySelector('input')?.select())
-})
-
-function findNow(): void {
-  clearTimeout(typing)
-  searched.value = query.value
-}
-
-function newSearch(): void {
-  query.value = ''
-  searched.value = ''
-  field.value?.querySelector('input')?.focus()
-}
-
-function open(index: number): void {
-  const result = results.value[index]
-  if (!result) return
-  finding.value = false
-  void router.go(result.href)
-}
-
-function scrollIntoView(): void {
-  void nextTick(() =>
-    list.value
-      ?.querySelector(`[data-index="${String(active.value)}"]`)
-      ?.scrollIntoView({ block: 'nearest' })
-  )
-}
-
-function onKeydown(event: KeyboardEvent): void {
-  const count = results.value.length
-  switch (event.key) {
-    case 'ArrowDown':
-      if (count) active.value = (active.value + 1) % count
-      scrollIntoView()
-      break
-    case 'ArrowUp':
-      if (count) active.value = (active.value - 1 + count) % count
-      scrollIntoView()
-      break
-    case 'Enter':
-      // Enter opens the highlighted result once there are results for this
-      // text; before then, it is Find Now.
-      if (searched.value === query.value && count) open(active.value)
-      else findNow()
-      break
-    default:
-      return
-  }
-  event.preventDefault()
-}
-
-const optionId = (index: number) => `rk-find-option-${String(index)}`
-</script>
-
-<template>
-  <Dialog v-model:open="finding">
-    <DialogContent
-      close-label="Close Find"
-      class="top-40 w-[calc(100vw-1rem)] max-w-[560px] translate-y-0 max-md:top-[120px]"
-    >
-      <DialogHeader>
-        <DialogTitle>Find: rowkit docs</DialogTitle>
-      </DialogHeader>
-
-      <div class="flex items-start gap-3 p-3">
-        <div ref="field" class="flex min-w-0 flex-1 flex-col gap-1">
-          <label for="rk-find-query" class="text-ui text-foreground">Look for:</label>
-          <Input
-            id="rk-find-query"
-            v-model="query"
-            type="text"
-            size="lg"
-            class="w-full"
-            role="combobox"
-            autocomplete="off"
-            aria-autocomplete="list"
-            aria-controls="rk-find-results"
-            :aria-expanded="results.length > 0"
-            :aria-activedescendant="results.length ? optionId(active) : undefined"
-            @keydown="onKeydown"
-          >
-            <!--
-              A text field with the magnifier rather than a search field: a
-              search field spends the first Escape on clearing itself, and
-              here Escape closes Find, as the status bar says.
-            -->
-            <template #leading><SearchIcon /></template>
-          </Input>
-        </div>
-        <div class="flex flex-col gap-1.5 pt-[21px]">
-          <Button class="w-full" @click="findNow">Find Now</Button>
-          <Button variant="secondary" class="w-full" @click="newSearch">New Search</Button>
-        </div>
-      </div>
-
-      <!-- The results: a list view in a sunken white well, 160px tall. -->
-      <div class="flex h-40 min-h-0 flex-col bg-input p-0.5 shadow-sunken">
-        <div aria-hidden="true" class="flex shrink-0" :class="scrolling && 'pr-4'">
-          <span class="rk-find-head min-w-0 flex-1">Name</span>
-          <span class="rk-find-head w-40 max-md:w-28">In folder</span>
-          <span class="rk-find-head w-[90px]">Type</span>
-        </div>
-        <ul
-          v-if="results.length"
-          id="rk-find-results"
-          ref="list"
-          role="listbox"
-          aria-label="Results"
-          class="scrollbar-themed m-0 min-h-0 flex-1 list-none overflow-y-auto p-0"
-        >
-          <li
-            v-for="(result, index) in results"
-            :id="optionId(index)"
-            :key="result.id"
-            :data-index="index"
-            role="option"
-            :aria-selected="index === active"
-            class="flex h-[27px] cursor-default items-center text-ui"
-            :class="index === active ? 'bg-surface-selected text-on-selected' : 'text-foreground'"
-            @click="open(index)"
-            @pointermove="active = index"
-          >
-            <span class="min-w-0 flex-1 truncate px-1.5">{{ result.name }}</span>
-            <span class="w-40 truncate px-1.5 max-md:w-28">{{ result.folder }}</span>
-            <span class="w-[90px] truncate px-1.5">{{ result.type }}</span>
-          </li>
-        </ul>
-        <div v-else-if="searched.trim()" class="flex flex-1 items-center justify-center">
-          <EmptyState
-            reason="no-results"
-            size="sm"
-            :level="3"
-            :title="`No results for «${searched.trim()}»`"
-            description="Check the spelling or type fewer letters."
-          />
-        </div>
-      </div>
-
-      <StatusBar class="pt-0.5">
-        <!--
-          The count stays narrow and the keys take the rest, as Figma draws it.
-          `!`: the status bar stretches its first section with a selector on
-          the parent, which outranks a class on the section.
-        -->
-        <StatusBarSection class="w-auto flex-none!" aria-live="polite">
-          {{ searched.trim() ? `${String(results.length)} results` : 'Ready' }}
-        </StatusBarSection>
-        <StatusBarSection class="flex-1">↑ ↓ move · Enter opens · Esc closes</StatusBarSection>
-      </StatusBar>
-    </DialogContent>
-  </Dialog>
-</template>
-
-<style scoped>
-/* A list-view column header: the raised button face, 27px. */
-.rk-find-head {
-  display: flex;
-  align-items: center;
-  height: 27px;
-  padding: 0 4px;
-  background: var(--color-card);
-  box-shadow: var(--shadow-raised);
-  font-size: var(--text-ui);
-  line-height: var(--text-ui--line-height);
-  color: var(--color-foreground);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/FolderTree.vue b/docs/.vitepress/theme/components/site/FolderTree.vue
deleted file mode 100644
index cb8a55f7..00000000
--- a/docs/.vitepress/theme/components/site/FolderTree.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { useRouter, withBase } from 'vitepress'
-import { DocumentIcon, FolderIcon, FolderOpenIcon, TriangleRightIcon } from 'rowkit'
-import type { NavNode } from './useSiteNav'
-
-/**
- * The Explorer window's left pane: the docs as a folder tree. Every folder
- * starts open, so the whole site is in view; the reader can close any of
- * them, and the folders on the way to the current page open again with it.
- *
- * A WAI-ARIA tree with one tab stop: ↑ ↓ move, → opens a folder or steps into
- * it, ← closes it or steps out, Enter opens the page, Home and End jump.
- */
-const props = defineProps<{
-  tree: NavNode[]
-  current: NavNode | undefined
-}>()
-
-const router = useRouter()
-const open = ref(new Set<string>())
-
-/** Every folder in the tree, at any depth. */
-const folderIds = (nodes: NavNode[]): string[] =>
-  nodes.flatMap((node) => (node.children.length > 0 ? [node.id, ...folderIds(node.children)] : []))
-
-// All open to begin with; once, so a folder the reader closed stays closed.
-let seeded = false
-watch(
-  () => props.tree,
-  (tree) => {
-    if (seeded || tree.length === 0) return
-    seeded = true
-    open.value = new Set([...open.value, ...folderIds(tree)])
-  },
-  { immediate: true }
-)
-
-// Every folder on the path to the page opens when the page changes, without
-// closing folders the reader opened themselves.
-watch(
-  () => props.current,
-  (node) => {
-    if (!node) return
-    open.value = new Set([...open.value, ...node.path.map((folder) => folder.id)])
-  },
-  { immediate: true }
-)
-
-interface Row {
-  node: NavNode
-  depth: number
-  folder: boolean
-  expanded: boolean
-}
-
-const rows = computed(() => {
-  const out: Row[] = []
-  const walk = (nodes: NavNode[], depth: number) => {
-    for (const node of nodes) {
-      const folder = node.children.length > 0
-      const expanded = folder && open.value.has(node.id)
-      out.push({ node, depth, folder, expanded })
-      if (expanded) walk(node.children, depth + 1)
-    }
-  }
-  walk(props.tree, 0)
-  return out
-})
-
-/** The row holding the tab stop: the current page, or the first row. */
-const focused = ref<string>()
-const tabStop = computed(() => {
-  const ids = rows.value.map((row) => row.node.id)
-  if (focused.value !== undefined && ids.includes(focused.value)) return focused.value
-  return props.current?.id ?? ids[0]
-})
-
-const list = ref<HTMLElement>()
-
-function focusRow(id: string): void {
-  focused.value = id
-  void nextTick(() =>
-    list.value?.querySelector<HTMLElement>(`[data-id="${CSS.escape(id)}"]`)?.focus()
-  )
-}
-
-function toggle(row: Row, value = !row.expanded): void {
-  const next = new Set(open.value)
-  if (value) next.add(row.node.id)
-  else next.delete(row.node.id)
-  open.value = next
-}
-
-function activate(row: Row): void {
-  if (row.folder) toggle(row)
-  else if (row.node.link !== undefined) void router.go(withBase(row.node.link))
-}
-
-function onKeydown(event: KeyboardEvent, index: number): void {
-  const row = rows.value[index]
-  if (!row) return
-  const move = (to: number) => {
-    const target = rows.value[Math.max(0, Math.min(rows.value.length - 1, to))]
-    if (target) focusRow(target.node.id)
-  }
-  switch (event.key) {
-    case 'ArrowDown':
-      move(index + 1)
-      break
-    case 'ArrowUp':
-      move(index - 1)
-      break
-    case 'Home':
-      move(0)
-      break
-    case 'End':
-      move(rows.value.length - 1)
-      break
-    case 'ArrowRight':
-      if (row.folder && !row.expanded) toggle(row, true)
-      else if (row.folder) move(index + 1)
-      break
-    case 'ArrowLeft': {
-      if (row.folder && row.expanded) {
-        toggle(row, false)
-        break
-      }
-      const parent = row.node.path[row.node.path.length - 1]
-      if (parent) focusRow(parent.id)
-      break
-    }
-    case 'Enter':
-    case ' ':
-      activate(row)
-      break
-    default:
-      return
-  }
-  event.preventDefault()
-}
-</script>
-
-<template>
-  <ul
-    ref="list"
-    role="tree"
-    aria-label="Contents"
-    class="m-0 list-none px-0.5 py-1 modern:flex modern:flex-col modern:gap-px modern:p-0"
-  >
-    <li
-      v-for="(row, index) in rows"
-      :key="row.node.id"
-      role="treeitem"
-      :data-id="row.node.id"
-      :aria-level="row.depth + 1"
-      :aria-expanded="row.folder ? row.expanded : undefined"
-      :aria-current="row.node.id === current?.id ? 'page' : undefined"
-      :tabindex="row.node.id === tabStop ? 0 : -1"
-      class="group flex h-[22px] cursor-default items-center gap-1 pl-[calc(2px+var(--depth)*16px)] outline-none modern:h-6 modern:gap-1.5 modern:rounded-[5px] modern:pr-2 modern:pl-[calc(6px+var(--depth)*16px)] modern:focus-visible:focus-outer modern:focus-visible:[outline-offset:calc(var(--rk-focus-outer-width)*-1)] modern:aria-[current=page]:bg-surface-selected modern:aria-[current=page]:text-on-selected modern:aria-[current=page]:[--rk-icon-tone-folder:currentColor]"
-      :style="{ '--depth': row.depth }"
-      @keydown="onKeydown($event, index)"
-      @focus="focused = row.node.id"
-    >
-      <!-- The [+]/[−] box: 9px, white, a 1px grey frame. A page has none. -->
-      <span
-        class="relative size-[9px] shrink-0 modern:hidden"
-        :class="row.folder && 'border border-border bg-input'"
-        @click="row.folder && toggle(row)"
-      >
-        <template v-if="row.folder">
-          <span class="absolute top-[3px] left-px h-px w-[5px] bg-foreground" />
-          <span
-            v-if="!row.expanded"
-            class="absolute top-px left-[3px] h-[5px] w-px bg-foreground"
-          />
-        </template>
-      </span>
-      <!-- The modern sidebar's disclosure triangle, in place of the [+]/[−] box: 9px wide on a folder, 12 on a page. -->
-      <span
-        class="flex h-3 shrink-0 items-center justify-center text-text-subtle group-aria-[current=page]:text-on-selected win98:hidden [&_svg]:size-[9px]"
-        :class="row.folder ? 'w-[9px]' : 'w-3'"
-        @click="row.folder && toggle(row)"
-      >
-        <TriangleRightIcon
-          v-if="row.folder"
-          class="transition-transform duration-(--rk-duration-control)"
-          :class="row.expanded && 'rotate-90'"
-        />
-      </span>
-      <FolderOpenIcon v-if="row.folder && row.expanded" class="shrink-0" />
-      <FolderIcon v-else-if="row.folder" class="shrink-0" />
-      <DocumentIcon v-else class="shrink-0" />
-      <a
-        v-if="row.node.link !== undefined"
-        :href="withBase(row.node.link)"
-        tabindex="-1"
-        class="rk-tree-label"
-        :class="row.node.id === current?.id && 'rk-tree-label-selected'"
-        >{{ row.node.text }}</a
-      >
-      <span v-else class="rk-tree-label" @click="toggle(row)">{{ row.node.text }}</span>
-    </li>
-  </ul>
-</template>
-
-<style scoped>
-/*
- * The label box: 1px of padding so the navy selection and the dotted focus
- * rectangle sit just around the text, as an Explorer tree draws them.
- */
-.rk-tree-label {
-  padding: 0 1px;
-  font-size: var(--text-ui);
-  line-height: var(--text-ui--line-height);
-  color: var(--color-foreground);
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.rk-tree-label-selected {
-  background: var(--color-surface-selected);
-  color: var(--color-on-selected);
-}
-
-li:focus-visible > .rk-tree-label {
-  outline: 1px dotted var(--color-ring);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/NotFound.vue b/docs/.vitepress/theme/components/site/NotFound.vue
deleted file mode 100644
index f9a5141a..00000000
--- a/docs/.vitepress/theme/components/site/NotFound.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useRouter, withBase } from 'vitepress'
-import {
-  Button,
-  Error32Icon,
-  WarningIcon,
-  Window,
-  WindowBody,
-  WindowButton,
-  WindowTitleBar,
-} from 'rowkit'
-import DesktopIcon from '../home/DesktopIcon.vue'
-import { shortcuts } from '../home/shortcuts'
-import SiteDock from './SiteDock.vue'
-import SiteTaskbar from './SiteTaskbar.vue'
-import SiteWallpaper from './SiteWallpaper.vue'
-import { openFind } from './useFind'
-
-/**
- * The 404 (Figma Site, template 7): the desktop, and over it Windows 98's
- * «Cannot find…» dialog, named for the path that was asked for. Go to Home is
- * the default button and has focus, as in a system dialog; ✕ goes home too.
- * Below 768px the shortcuts go and the dialog spans the screen, 8px in.
- *
- * Modern (Figma SiteModern/Alert/NotFound): an alert card on the wallpaper —
- * the app icon with a warning badge, «Page not found», the address that was
- * asked for, and the two ways on, one under the other — and the Dock.
- */
-const router = useRouter()
-
-/*
- * The path as Explorer would write it: rowkit:\Components\Datatable. Read on
- * the client, where it is the address typed — the server renders 404.html.
- */
-const path = ref('rowkit:\\')
-// The same address as a browser shows it, for the modern alert.
-const address = ref('')
-const home = ref<{ $el: HTMLElement }>()
-const homeModern = ref<{ $el: HTMLElement }>()
-
-onMounted(() => {
-  const base = withBase('/')
-  const rest = decodeURIComponent(window.location.pathname)
-    .slice(window.location.pathname.startsWith(base) ? base.length : 1)
-    .replace(/(\.html|\/)$/, '')
-  path.value = `rowkit:\\${rest
-    .split('/')
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join('\\')}`
-  address.value = `${window.location.host}${decodeURIComponent(window.location.pathname)}`
-  // Whichever drawing is on screen: the other is hidden by its theme.
-  ;[home.value?.$el, homeModern.value?.$el].find((el) => el?.offsetParent)?.focus()
-})
-
-const goHome = () => void router.go(withBase('/'))
-</script>
-
-<template>
-  <div
-    class="rk-desktop relative isolate flex h-dvh flex-col overflow-hidden bg-desktop font-sans text-ui"
-  >
-    <SiteWallpaper />
-    <main class="relative flex min-h-0 flex-1 items-center justify-center px-2">
-      <nav
-        aria-label="Shortcuts"
-        class="absolute top-4 left-4 flex flex-col gap-3 max-md:hidden modern:hidden"
-      >
-        <DesktopIcon
-          v-for="item in shortcuts.slice(0, 5)"
-          :key="item.label"
-          :label="item.label"
-          :href="item.href"
-        >
-          <component :is="item.icon" />
-        </DesktopIcon>
-      </nav>
-
-      <Window
-        role="alertdialog"
-        aria-describedby="rk-not-found-message"
-        class="w-[440px] max-w-full modern:hidden"
-      >
-        <WindowTitleBar :title="path">
-          <template #controls>
-            <WindowButton glyph="close" label="Close and go to the home page" @click="goHome" />
-          </template>
-        </WindowTitleBar>
-        <WindowBody class="flex flex-col gap-3 p-3">
-          <div class="flex items-start gap-3">
-            <Error32Icon class="shrink-0" />
-            <div id="rk-not-found-message" class="flex min-w-0 flex-1 flex-col gap-1.5">
-              <h1 class="m-0 text-heading font-bold break-words text-foreground">
-                Cannot find '{{ path }}'.
-              </h1>
-              <p class="m-0 text-ui text-foreground">
-                Make sure the path is spelled correctly. The page may have moved — try Find, or go
-                to the home page.
-              </p>
-            </div>
-          </div>
-          <div class="flex justify-end gap-1.5">
-            <Button ref="home" as="a" :href="withBase('/')" class="max-md:min-w-[88px] max-md:px-4">
-              Go to Home
-            </Button>
-            <Button variant="secondary" class="max-md:min-w-[88px] max-md:px-4" @click="openFind">
-              Find…
-            </Button>
-          </div>
-        </WindowBody>
-      </Window>
-
-      <!-- Lifted over the Dock: centred in what it leaves, as the design places it. -->
-      <section
-        role="alertdialog"
-        aria-labelledby="rk-not-found-title-modern"
-        aria-describedby="rk-not-found-message-modern"
-        class="flex w-[280px] max-w-full flex-col items-center gap-2.5 rounded-xl md:mb-[62px] bg-card px-5 pt-6 pb-5 text-center shadow-window win98:hidden"
-      >
-        <span class="relative mb-3.5 size-16">
-          <span
-            class="absolute inset-0 flex items-center justify-center rounded-xl bg-card shadow-raised"
-          >
-            <img :src="withBase('/mark-48.svg')" alt="" width="48" height="48" class="block" />
-          </span>
-          <span
-            class="absolute top-10 left-[43px] flex size-7 items-center justify-center rounded-full bg-card [&_svg]:size-[26px]"
-          >
-            <WarningIcon />
-          </span>
-        </span>
-        <h1 id="rk-not-found-title-modern" class="m-0 text-heading font-strong text-foreground">
-          Page not found
-        </h1>
-        <p id="rk-not-found-message-modern" class="m-0 text-ui break-words text-muted-foreground">
-          {{ address || 'This page' }} doesn’t exist. It may have moved or been renamed.
-        </p>
-        <div class="flex w-full flex-col gap-2 pt-2">
-          <Button ref="homeModern" as="a" :href="withBase('/')" class="w-full">Go to Home</Button>
-          <Button variant="secondary" class="w-full" @click="openFind">Search the docs…</Button>
-        </div>
-      </section>
-
-      <SiteDock
-        class="absolute bottom-2.5 left-1/2 z-10 -translate-x-1/2 max-md:hidden win98:hidden"
-      />
-    </main>
-
-    <SiteTaskbar task="Error" />
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/PageHeader.vue b/docs/.vitepress/theme/components/site/PageHeader.vue
deleted file mode 100644
index cbc332ef..00000000
--- a/docs/.vitepress/theme/components/site/PageHeader.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import { Book32Icon, Computer32Icon, Document32Icon, Folder32Icon } from 'rowkit'
-import type { NavNode } from './useSiteNav'
-import { siteTheme } from './useSiteTheme'
-
-/**
- * The page header in the Windows 98 «web view» style: the section's 32px icon
- * at twice its size, the title, and a rule fading from navy.
- */
-const props = defineProps<{
-  title: string
-  current: NavNode | undefined
-}>()
-
-const icons: Record<string, Component> = {
-  Guide: Book32Icon,
-  Components: Folder32Icon,
-  'Foundations · Tokens': Computer32Icon,
-}
-
-// By the top folder; a folder's own page, by the folder itself. The modern
-// theme draws a folder for every page (Figma Site/WebViewHeader).
-const icon = computed(() =>
-  siteTheme.value === 'modern'
-    ? Folder32Icon
-    : (icons[(props.current?.path[0] ?? props.current)?.text ?? ''] ?? Document32Icon)
-)
-</script>
-
-<template>
-  <!-- Modern (Figma Site/WebViewHeader): a 48px icon, the title in semibold, a hairline under. -->
-  <header class="flex flex-col gap-2 modern:gap-3">
-    <div class="flex items-center gap-3">
-      <!-- 32px pixel art drawn at 2×: a whole-number scale keeps every pixel square. -->
-      <component :is="icon" class="size-16 shrink-0 modern:size-12" />
-      <h1 class="m-0 text-doc-h1 font-bold text-foreground modern:font-strong">{{ title }}</h1>
-    </div>
-    <div
-      class="h-[3px] bg-linear-to-r from-titlebar-from to-transparent modern:h-px modern:bg-none modern:bg-border"
-    />
-  </header>
-</template>
diff --git a/docs/.vitepress/theme/components/site/PageOutline.vue b/docs/.vitepress/theme/components/site/PageOutline.vue
deleted file mode 100644
index 03935f70..00000000
--- a/docs/.vitepress/theme/components/site/PageOutline.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { onContentUpdated } from 'vitepress'
-import { Select, SelectContent, SelectItem, SelectTrigger } from 'rowkit'
-
-/**
- * «On this page»: the page's sections in a sunken white list, the one in view
- * highlighted navy, as a list box's selected row. Built from the h2s once the
- * page renders; follows the pane as it scrolls.
- *
- * On a narrow screen, where there is no room beside the text, it is a
- * drop-down list above it instead — «On this page: Example» — and choosing a
- * section scrolls to it.
- */
-const props = withDefaults(
-  defineProps<{
-    /** The element that scrolls the page. */
-    scroller: HTMLElement | undefined
-    as?: 'list' | 'select'
-  }>(),
-  { as: 'list' }
-)
-
-interface Section {
-  id: string
-  text: string
-}
-
-const sections = ref<Section[]>([])
-const active = ref<string>()
-
-function collect(): void {
-  const headings = document.querySelectorAll<HTMLElement>('.rk-page h2[id]')
-  sections.value = Array.from(headings, (heading) => ({
-    id: heading.id,
-    // The heading's text without VitePress's «#» anchor.
-    text: (heading.firstChild?.textContent ?? heading.textContent ?? '').trim(),
-  }))
-  track()
-}
-
-/** The section in view: the last heading at or above the top quarter of the pane. */
-function track(): void {
-  const pane = props.scroller
-  if (!pane) return
-  const line = pane.getBoundingClientRect().top + pane.clientHeight / 4
-  let current = sections.value[0]?.id
-  for (const section of sections.value) {
-    const heading = document.getElementById(section.id)
-    if (heading && heading.getBoundingClientRect().top <= line) current = section.id
-  }
-  active.value = current
-}
-
-const chosen = computed({
-  get: () => active.value,
-  set: (id) => {
-    if (id === undefined) return
-    document.getElementById(id)?.scrollIntoView({ block: 'start' })
-    history.replaceState(history.state, '', `#${id}`)
-  },
-})
-
-onContentUpdated(collect)
-
-// Client only: the headings exist in the DOM, not in the server render.
-onMounted(() => {
-  props.scroller?.addEventListener('scroll', track, { passive: true })
-  collect()
-})
-
-watch(
-  () => props.scroller,
-  (pane, previous) => {
-    previous?.removeEventListener('scroll', track)
-    pane?.addEventListener('scroll', track, { passive: true })
-    collect()
-  }
-)
-
-onBeforeUnmount(() => props.scroller?.removeEventListener('scroll', track))
-</script>
-
-<template>
-  <Select v-if="as === 'select' && sections.length > 0" v-model="chosen" class="w-full">
-    <SelectTrigger placeholder="On this page" size="lg" class="w-full" />
-    <SelectContent>
-      <SelectItem
-        v-for="section in sections"
-        :key="section.id"
-        :value="section.id"
-        :label="`On this page: ${section.text}`"
-      >
-        {{ section.text }}
-      </SelectItem>
-    </SelectContent>
-  </Select>
-  <nav
-    v-else-if="sections.length > 0"
-    aria-labelledby="rk-outline-title"
-    class="flex flex-col gap-1.5"
-  >
-    <p id="rk-outline-title" class="m-0 font-bold text-ui text-foreground">On this page</p>
-    <ul
-      class="m-0 list-none bg-input p-0.5 shadow-sunken modern:bg-transparent modern:p-0 modern:pl-2 modern:shadow-[inset_1px_0_0_var(--color-border)]"
-    >
-      <li v-for="section in sections" :key="section.id">
-        <a
-          :href="`#${section.id}`"
-          :aria-current="section.id === active ? 'location' : undefined"
-          class="flex min-h-[22px] items-center py-px pr-1 pl-[16px] text-ui text-foreground no-underline outline-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-dotted focus-visible:outline-ring aria-[current]:bg-surface-selected aria-[current]:text-on-selected modern:rounded-sm modern:pl-2 modern:aria-[current]:bg-transparent modern:aria-[current]:font-strong modern:aria-[current]:text-link"
-          >{{ section.text }}</a
-        >
-      </li>
-    </ul>
-  </nav>
-</template>
diff --git a/docs/.vitepress/theme/components/site/SiteAddressBar.vue b/docs/.vitepress/theme/components/site/SiteAddressBar.vue
deleted file mode 100644
index 53d695fe..00000000
--- a/docs/.vitepress/theme/components/site/SiteAddressBar.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter, withBase } from 'vitepress'
-import { Select, SelectContent, SelectItem, SelectTrigger } from 'rowkit'
-import type { NavNode } from './useSiteNav'
-
-/**
- * The address bar: the page's path as `rowkit:\Section\Page`, in rowkit's own
- * drop-down list. The list holds every page by its address; picking one opens
- * it, and typing filters the list, so a path can be typed and confirmed.
- */
-const props = defineProps<{
-  pages: NavNode[]
-  current: NavNode | undefined
-}>()
-
-const router = useRouter()
-
-const addressOf = (node: NavNode) =>
-  ['rowkit:', ...node.path.map((folder) => folder.text), node.text].join('\\')
-
-const value = computed({
-  get: () => props.current?.link,
-  set: (link) => {
-    if (link !== undefined && link !== props.current?.link) void router.go(withBase(link))
-  },
-})
-</script>
-
-<template>
-  <div class="flex items-center gap-1.5 bg-card px-1 py-0.5">
-    <label for="rk-address" class="text-ui text-foreground">Address</label>
-    <Select v-model="value" searchable class="min-w-0 flex-1">
-      <SelectTrigger id="rk-address" placeholder="rowkit:\" class="w-full" />
-      <SelectContent>
-        <SelectItem
-          v-for="page in pages"
-          :key="page.id"
-          :value="page.link ?? ''"
-          :label="addressOf(page)"
-        />
-      </SelectContent>
-    </Select>
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/SiteDock.vue b/docs/.vitepress/theme/components/site/SiteDock.vue
deleted file mode 100644
index 0d4d6201..00000000
--- a/docs/.vitepress/theme/components/site/SiteDock.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script setup lang="ts">
-import { computed, type Component } from 'vue'
-import { withBase } from 'vitepress'
-import {
-  Book32Icon,
-  Code32Icon,
-  Computer32Icon,
-  Document32Icon,
-  Folder32Icon,
-  Trash32Icon,
-} from 'rowkit'
-
-/**
- * The modern theme's Dock (Figma SiteModern/Dock): glass along the bottom of
- * the desktop, a white tile per place, a dot under what is open, and the
- * Trash past a divider. The Windows 98 desktop keeps its shortcuts instead.
- *
- * rowkit and Live demo are the home page's own windows. There they are
- * buttons that bring the window back, with the dot while it is open; on any
- * other page they lead to the home page.
- */
-const props = defineProps<{
-  /** Which home-page windows are open. Omitted away from the home page. */
-  running?: { about: boolean; demo: boolean }
-  /** The phone's Dock (Figma Home, 390): rowkit, Guide, Components, Live demo, Trash. */
-  compact?: boolean
-}>()
-
-const emit = defineEmits<{ open: [window: 'about' | 'demo'] }>()
-
-interface Tile {
-  label: string
-  icon?: Component
-  href?: string
-  window?: 'about' | 'demo'
-}
-
-const tiles: Tile[] = [
-  { label: 'rowkit', window: 'about' },
-  { label: 'Guide', href: withBase('/introduction'), icon: Book32Icon },
-  { label: 'Components', href: withBase('/components/'), icon: Folder32Icon },
-  { label: 'Patterns', href: withBase('/patterns/data-table-page'), icon: Folder32Icon },
-  { label: 'Live demo', window: 'demo', icon: Computer32Icon },
-  { label: 'Storybook', href: 'https://storybook.rowkit.dev', icon: Code32Icon },
-  { label: 'Decisions', href: withBase('/decisions/001-typescript-pin'), icon: Document32Icon },
-]
-
-const trash: Tile = {
-  label: 'Old versions',
-  href: 'https://github.com/NikolaiKushner/rowkit/releases',
-  icon: Trash32Icon,
-}
-
-const PHONE = ['rowkit', 'Guide', 'Components', 'Live demo']
-const shown = computed(() => [
-  ...(props.compact ? tiles.filter((tile) => PHONE.includes(tile.label)) : tiles),
-  trash,
-])
-
-const isRunning = (tile: Tile) => (tile.window ? !!props.running?.[tile.window] : false)
-const isExternal = (tile: Tile) => !!tile.href && /^https?:/.test(tile.href)
-</script>
-
-<template>
-  <nav
-    aria-label="Dock"
-    class="flex items-start gap-2 rounded-[18px] bg-popover px-2 pt-1.5 pb-[3px] shadow-[0_10px_30px_rgb(0_0_0/0.15),0_0_0_1px_rgb(0_0_0/0.1)] [backdrop-filter:var(--rk-popover-backdrop)]"
-  >
-    <template v-for="tile in shown" :key="tile.label">
-      <span v-if="tile === trash" aria-hidden="true" class="h-12 w-px bg-border" />
-      <!--
-        Two elements rather than <component :is="'button'">: the site registers
-        rowkit's Button globally, and Vue would resolve the string to it.
-      -->
-      <button
-        v-if="tile.window && running"
-        type="button"
-        :title="tile.label"
-        :aria-label="tile.label"
-        class="group flex w-12 flex-col items-center gap-[3px] rounded-xl text-foreground no-underline outline-none focus-visible:focus-outer"
-        @click="emit('open', tile.window)"
-      >
-        <span
-          class="flex size-12 items-center justify-center rounded-xl bg-card shadow-raised transition-transform group-hover:-translate-y-1 motion-reduce:transition-none [&_svg]:size-[30px]"
-        >
-          <img
-            v-if="!tile.icon"
-            :src="withBase('/mark-32.svg')"
-            alt=""
-            width="32"
-            height="32"
-            class="size-8"
-          />
-          <component :is="tile.icon" v-else />
-        </span>
-        <span
-          aria-hidden="true"
-          class="size-1 rounded-full bg-foreground"
-          :class="isRunning(tile) ? 'opacity-100' : 'opacity-0'"
-        />
-      </button>
-      <a
-        v-else
-        :href="tile.href ?? withBase('/')"
-        :target="isExternal(tile) ? '_blank' : undefined"
-        :rel="isExternal(tile) ? 'noreferrer' : undefined"
-        :title="tile.label"
-        :aria-label="tile.label"
-        class="group flex w-12 flex-col items-center gap-[3px] rounded-xl text-foreground no-underline outline-none focus-visible:focus-outer"
-      >
-        <span
-          class="flex size-12 items-center justify-center rounded-xl bg-card shadow-raised transition-transform group-hover:-translate-y-1 motion-reduce:transition-none [&_svg]:size-[30px]"
-        >
-          <img
-            v-if="!tile.icon"
-            :src="withBase('/mark-32.svg')"
-            alt=""
-            width="32"
-            height="32"
-            class="size-8"
-          />
-          <component :is="tile.icon" v-else />
-        </span>
-        <span
-          aria-hidden="true"
-          class="size-1 rounded-full bg-foreground"
-          :class="isRunning(tile) ? 'opacity-100' : 'opacity-0'"
-        />
-      </a>
-    </template>
-  </nav>
-</template>
diff --git a/docs/.vitepress/theme/components/site/SiteLayout.vue b/docs/.vitepress/theme/components/site/SiteLayout.vue
deleted file mode 100644
index 7f47dacb..00000000
--- a/docs/.vitepress/theme/components/site/SiteLayout.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted } from 'vue'
-import { useData } from 'vitepress'
-import DesktopHome from '../home/DesktopHome.vue'
-import ExplorerLayout from './ExplorerLayout.vue'
-import FindWindow from './FindWindow.vue'
-import NotFound from './NotFound.vue'
-import SpotlightSearch from './SpotlightSearch.vue'
-import { openFind } from './useFind'
-import { readSiteTheme, siteTheme } from './useSiteTheme'
-
-/**
- * Which screen a page is: the home page is the desktop, a docs page is the
- * Explorer window, a missing page the «Cannot find…» dialog on the desktop.
- *
- * Search lives here, above every screen: Ctrl+K (⌘K) or / opens it anywhere —
- * the Find window in Windows 98, Spotlight in the modern theme.
- */
-const { frontmatter, page } = useData()
-
-function onKeydown(event: KeyboardEvent): void {
-  const target = event.target as HTMLElement | null
-  const typing = target?.closest('input, textarea, select, [contenteditable="true"]')
-  if ((event.key === 'k' && (event.ctrlKey || event.metaKey)) || (event.key === '/' && !typing)) {
-    event.preventDefault()
-    openFind()
-  }
-}
-
-onMounted(() => {
-  readSiteTheme()
-  window.addEventListener('keydown', onKeydown)
-})
-onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
-</script>
-
-<template>
-  <NotFound v-if="page.isNotFound" />
-  <DesktopHome v-else-if="frontmatter.layout === 'home'" />
-  <ExplorerLayout v-else />
-  <SpotlightSearch v-if="siteTheme === 'modern'" />
-  <FindWindow v-else />
-</template>
diff --git a/docs/.vitepress/theme/components/site/SiteMenu.vue b/docs/.vitepress/theme/components/site/SiteMenu.vue
deleted file mode 100644
index cb99a96e..00000000
--- a/docs/.vitepress/theme/components/site/SiteMenu.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
-import { useRoute } from 'vitepress'
-import { CheckGlyphIcon, TriangleRightIcon } from 'rowkit'
-import { isExternal, type MenuEntry, type MenuItem } from './menu'
-import { siteTheme } from './useSiteTheme'
-import { normalize } from './useSiteNav'
-
-/**
- * A Windows 98 menu panel: the window bevel, items, etched separators, and
- * submenus that cascade to the right — after 400ms of hover, or at once on
- * click or →. A WAI-ARIA menu: ↑ ↓ Home End move, → opens a submenu, ← and
- * Escape close one, Enter and Space choose. Focus moves with the highlight, so
- * a screen reader reads the item the eye sees.
- *
- * `size="start"` draws the Start menu's 34px items with 32px icons; a
- * submenu is always the 20px kind.
- *
- * Modern (Figma SiteModern/MenuItem): a rounded glass panel, 24px rounded
- * rows with no icons — a check-mark column instead, filled for the chosen
- * one of a set — the shortcut in grey, and headings over groups of items. With `drill`, a submenu replaces the panel
- * instead of opening beside it — the Start menu on a phone.
- */
-const props = withDefaults(
-  defineProps<{
-    entries: MenuEntry[]
-    size?: 'menu' | 'start'
-    /** Submenus drill in rather than cascade. */
-    drill?: boolean
-    /** Accessible name, from the control that opened the menu. */
-    labelledby?: string
-    label?: string
-    /** Nested inside another menu: ← and Escape step back out. */
-    nested?: boolean
-  }>(),
-  { size: 'menu', drill: false, nested: false, labelledby: undefined, label: undefined }
-)
-
-const emit = defineEmits<{
-  /** Close every menu: an item was chosen, or Escape / Tab at the top. */
-  close: [focusTrigger: boolean]
-  /** ← or Escape inside a submenu: close it and return to its item. */
-  back: []
-  /** ← and → at the top of a menu-bar menu: move to the next menu. */
-  prev: []
-  next: []
-  /** A folder was opened in drill mode. */
-  drill: [entry: MenuItem]
-}>()
-
-const list = ref<HTMLElement>()
-const active = ref(-1)
-const openSub = ref<string>()
-// Inside v-for, a template ref collects an array; at most one submenu is open.
-const subMenu = ref<{ focusFirst: () => void }[]>([])
-const subStyle = ref<Record<string, string>>({})
-
-const items = computed(() =>
-  props.entries.flatMap((entry, index) =>
-    entry.kind === 'item' && entry.disabled !== true ? [index] : []
-  )
-)
-
-function element(index: number): HTMLElement | null {
-  return list.value?.querySelector<HTMLElement>(`[data-index="${String(index)}"]`) ?? null
-}
-
-function focusIndex(index: number): void {
-  active.value = index
-  element(index)?.focus({ preventScroll: true })
-}
-
-/** Focus the first item: a menu opened from the keyboard. */
-function focusFirst(): void {
-  const first = items.value[0]
-  if (first !== undefined) focusIndex(first)
-}
-
-/** Focus the panel with nothing highlighted: a menu opened by the pointer. */
-function focusPanel(): void {
-  active.value = -1
-  list.value?.focus({ preventScroll: true })
-}
-
-defineExpose({ focusFirst, focusPanel })
-
-let hoverTimer: ReturnType<typeof setTimeout> | undefined
-onBeforeUnmount(() => clearTimeout(hoverTimer))
-
-function entryAt(index: number): MenuItem | undefined {
-  const entry = props.entries[index]
-  return entry?.kind === 'item' ? entry : undefined
-}
-
-/**
- * Opens a submenu, then keeps it on screen: above the taskbar if it would run
- * off the bottom, to the left if it would run off the right.
- */
-function openSubmenu(entry: MenuItem, focus: boolean): void {
-  openSub.value = entry.id
-  subStyle.value = {}
-  void nextTick(() => {
-    const panel = list.value?.querySelector<HTMLElement>(':scope > li > [role="menu"]')
-    if (panel) {
-      const box = panel.getBoundingClientRect()
-      const bottom = window.innerHeight - 28
-      const style: Record<string, string> = {}
-      if (box.bottom > bottom) style.top = `${String(-2 - Math.ceil(box.bottom - bottom))}px`
-      if (box.right > window.innerWidth) {
-        style.left = 'auto'
-        style.right = '100%'
-      }
-      subStyle.value = style
-    }
-    if (focus) subMenu.value[0]?.focusFirst()
-  })
-}
-
-function closeSubmenu(): void {
-  openSub.value = undefined
-}
-
-function choose(index: number, fromKeyboard: boolean): void {
-  const entry = entryAt(index)
-  if (!entry || entry.disabled === true) return
-  if (entry.children) {
-    if (props.drill) emit('drill', entry)
-    else openSubmenu(entry, fromKeyboard)
-    return
-  }
-  entry.action?.()
-  emit('close', false)
-}
-
-function onHover(index: number): void {
-  const entry = entryAt(index)
-  if (!entry) return
-  focusIndex(index)
-  clearTimeout(hoverTimer)
-  if (props.drill) return
-  // Windows 98 waits before opening or swapping a cascade, so a diagonal move
-  // toward an open submenu does not close it on the way.
-  hoverTimer = setTimeout(() => {
-    if (entry.children) {
-      if (openSub.value !== entry.id) openSubmenu(entry, false)
-    } else closeSubmenu()
-  }, 400)
-}
-
-function onBack(): void {
-  const index = props.entries.findIndex((entry) => entry.id === openSub.value)
-  closeSubmenu()
-  if (index >= 0) focusIndex(index)
-}
-
-function move(step: number): void {
-  const list = items.value
-  if (list.length === 0) return
-  const at = list.indexOf(active.value)
-  const next =
-    at === -1 ? (step > 0 ? 0 : list.length - 1) : (at + step + list.length) % list.length
-  const target = list[next]
-  if (target !== undefined) focusIndex(target)
-}
-
-/*
- * A submenu sits inside this list, so its keys bubble here — but it stops the
- * ones it handles, and the rest (Tab) mean the same thing at every level.
- */
-function onKeydown(event: KeyboardEvent): void {
-  const entry = entryAt(active.value)
-  switch (event.key) {
-    case 'ArrowDown':
-      move(1)
-      break
-    case 'ArrowUp':
-      move(-1)
-      break
-    case 'Home':
-      focusIndex(items.value[0] ?? -1)
-      break
-    case 'End':
-      focusIndex(items.value[items.value.length - 1] ?? -1)
-      break
-    case 'ArrowRight':
-      if (entry?.children) choose(active.value, true)
-      else if (!props.nested) emit('next')
-      break
-    case 'ArrowLeft':
-      if (props.nested) emit('back')
-      else emit('prev')
-      break
-    case 'Enter':
-    case ' ':
-      if (!entry) break
-      if (entry.href) {
-        /*
-         * A link opens on Enter by the browser's own default action, which
-         * fires its click — and the click closes the menus. Closing here
-         * instead would unmount the link in the microtask that runs before
-         * that default action, and nothing would open. Space is not a link
-         * key, so it clicks by hand. Either way the menus above must not see
-         * the key: a parent would take it as «open my submenu».
-         */
-        event.stopPropagation()
-        if (event.key === ' ') {
-          event.preventDefault()
-          element(active.value)?.click()
-        }
-        return
-      }
-      choose(active.value, true)
-      break
-    case 'Escape':
-      if (props.nested) emit('back')
-      else emit('close', true)
-      break
-    case 'Tab':
-      emit('close', false)
-      return
-    default:
-      return
-  }
-  event.preventDefault()
-  event.stopPropagation()
-}
-
-const itemClass = computed(() =>
-  props.size === 'start'
-    ? 'h-[34px] gap-2 pl-1 pr-1.5 py-px w-[200px]'
-    : 'h-[25px] w-full gap-1.5 pl-0.5 pr-1 min-w-[196px] modern:h-6 modern:min-w-0 modern:gap-1 modern:rounded-[5px] modern:pr-2 modern:pl-1.5'
-)
-
-// The page on screen, checked in the modern theme's menus as the design draws it.
-const route = useRoute()
-const isCurrent = (entry: MenuItem) =>
-  entry.href !== undefined &&
-  !isExternal(entry.href) &&
-  normalize(entry.href) === normalize(route.path)
-
-const isLit = (entry: MenuItem, index: number) =>
-  (active.value === index || openSub.value === entry.id) && entry.disabled !== true
-</script>
-
-<template>
-  <ul
-    ref="list"
-    role="menu"
-    tabindex="-1"
-    :aria-labelledby="labelledby"
-    :aria-label="label"
-    class="m-0 flex list-none flex-col bg-card p-0.5 shadow-window outline-none modern:rounded-[10px] modern:bg-popover modern:p-[5px] modern:shadow-[0_10px_30px_rgb(0_0_0/0.15),0_0_0_1px_rgb(0_0_0/0.1)] modern:[backdrop-filter:var(--rk-popover-backdrop)]"
-    :class="nested ? 'modern:min-w-[200px]' : 'modern:min-w-[220px]'"
-    @keydown="onKeydown"
-  >
-    <template v-for="(entry, index) in entries" :key="entry.id">
-      <li
-        v-if="entry.kind === 'separator'"
-        role="separator"
-        class="h-0.5 shadow-[inset_0_1px_var(--color-bevel-shadow),inset_0_-1px_var(--color-bevel-highlight)] modern:mx-2 modern:my-1 modern:h-px modern:bg-border modern:shadow-none"
-      />
-      <li
-        v-else-if="entry.kind === 'header'"
-        role="presentation"
-        class="flex h-[22px] items-center gap-1 pr-2 pl-1.5 font-strong text-ui text-text-subtle"
-      >
-        <span class="size-3.5 shrink-0" />{{ entry.text }}
-      </li>
-      <li v-else role="none" class="relative" @pointerenter="onHover(index)">
-        <!--
-          A link or a native button, written out: the site registers rowkit's
-          Button globally, so <component :is="'button'"> would resolve to it.
-        -->
-        <a
-          v-if="entry.href && !entry.disabled"
-          :href="entry.href"
-          :target="isExternal(entry.href) ? '_blank' : undefined"
-          :rel="isExternal(entry.href) ? 'noreferrer' : undefined"
-          :data-index="index"
-          :role="entry.checked === undefined ? 'menuitem' : 'menuitemradio'"
-          :aria-checked="entry.checked"
-          :aria-current="isCurrent(entry) ? 'page' : undefined"
-          tabindex="-1"
-          :aria-haspopup="entry.children ? 'menu' : undefined"
-          :aria-expanded="entry.children && !drill ? openSub === entry.id : undefined"
-          :aria-disabled="entry.disabled ? 'true' : undefined"
-          class="flex cursor-default items-center border-0 text-left text-ui text-foreground no-underline outline-none"
-          :class="[
-            itemClass,
-            isLit(entry, index) ? 'bg-surface-selected text-on-selected' : 'bg-transparent',
-            entry.disabled ? 'text-text-disabled text-shadow-disabled' : '',
-          ]"
-          @click="emit('close', false)"
-        >
-          <span
-            class="relative flex shrink-0 items-center justify-center modern:size-3.5"
-            :class="size === 'start' ? 'size-8' : 'size-4'"
-          >
-            <component :is="entry.icon" v-if="entry.icon && siteTheme !== 'modern'" />
-            <CheckGlyphIcon v-if="entry.checked || isCurrent(entry)" class="win98:hidden" />
-          </span>
-          <span class="min-w-0 flex-1 truncate">{{ entry.text }}</span>
-          <span
-            v-if="entry.shortcut"
-            class="shrink-0"
-            :class="!isLit(entry, index) && 'modern:text-text-subtle'"
-            >{{ entry.shortcut }}</span
-          >
-          <TriangleRightIcon v-if="entry.children" class="shrink-0 modern:size-[9px]" />
-        </a>
-        <button
-          v-else
-          type="button"
-          :data-index="index"
-          :role="entry.checked === undefined ? 'menuitem' : 'menuitemradio'"
-          :aria-checked="entry.checked"
-          :aria-current="isCurrent(entry) ? 'page' : undefined"
-          tabindex="-1"
-          :aria-haspopup="entry.children ? 'menu' : undefined"
-          :aria-expanded="entry.children && !drill ? openSub === entry.id : undefined"
-          :aria-disabled="entry.disabled ? 'true' : undefined"
-          class="flex cursor-default items-center border-0 text-left text-ui text-foreground no-underline outline-none"
-          :class="[
-            itemClass,
-            isLit(entry, index) ? 'bg-surface-selected text-on-selected' : 'bg-transparent',
-            entry.disabled ? 'text-text-disabled text-shadow-disabled' : '',
-          ]"
-          @click="choose(index, false)"
-        >
-          <span
-            class="relative flex shrink-0 items-center justify-center modern:size-3.5"
-            :class="size === 'start' ? 'size-8' : 'size-4'"
-          >
-            <component :is="entry.icon" v-if="entry.icon && siteTheme !== 'modern'" />
-            <CheckGlyphIcon v-if="entry.checked || isCurrent(entry)" class="win98:hidden" />
-          </span>
-          <span class="min-w-0 flex-1 truncate">{{ entry.text }}</span>
-          <span
-            v-if="entry.shortcut"
-            class="shrink-0"
-            :class="!isLit(entry, index) && 'modern:text-text-subtle'"
-            >{{ entry.shortcut }}</span
-          >
-          <TriangleRightIcon v-if="entry.children" class="shrink-0 modern:size-[9px]" />
-        </button>
-        <SiteMenu
-          v-if="entry.children && openSub === entry.id && !drill"
-          ref="subMenu"
-          :entries="entry.children"
-          :label="entry.text"
-          nested
-          class="absolute top-[-3px] left-full z-10 modern:top-[-5px] modern:left-[calc(100%+1px)]"
-          :style="subStyle"
-          @close="(focus) => emit('close', focus)"
-          @back="onBack"
-        />
-      </li>
-    </template>
-  </ul>
-</template>
diff --git a/docs/.vitepress/theme/components/site/SiteMenuBar.vue b/docs/.vitepress/theme/components/site/SiteMenuBar.vue
deleted file mode 100644
index 7cf6b79b..00000000
--- a/docs/.vitepress/theme/components/site/SiteMenuBar.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { useRoute, withBase } from 'vitepress'
-import { DocumentIcon } from 'rowkit'
-import SiteMenu from './SiteMenu.vue'
-import {
-  componentsMenu,
-  folder,
-  folderMenu,
-  fromTree,
-  searchShortcut,
-  type MenuEntry,
-} from './menu'
-import { openFind } from './useFind'
-import { useSiteNav } from './useSiteNav'
-import { siteTheme } from './useSiteTheme'
-
-/**
- * The menu bar under the title bar: Guide · Components · Patterns · Storybook
- * · Decisions · Help, each a drop-down built from the docs tree. Hovered, an
- * item rises with a thin bevel; while its menu is open it sits sunken, and
- * moving across the bar with a menu open switches menus, as Windows 98 does.
- *
- * A WAI-ARIA menubar: ← → move along the bar (and between open menus), ↓
- * Enter and Space open a menu at its first item, Escape closes it.
- */
-const { tree } = useSiteNav()
-const route = useRoute()
-
-interface BarItem {
-  text: string
-  href?: string
-  entries?: MenuEntry[]
-}
-
-const bar = computed<BarItem[]>(() => {
-  const menu = (text: string) => fromTree(folder(tree.value, text)?.children ?? [])
-  const page = (text: string) => tree.value.find((node) => node.text === text && node.link)
-  const roadmap = page('Roadmap')
-  const contributing = page('Contributing')
-  return [
-    { text: 'Guide', entries: menu('Guide') },
-    {
-      text: 'Components',
-      entries:
-        siteTheme.value === 'modern'
-          ? componentsMenu(folder(tree.value, 'Components'))
-          : folderMenu(folder(tree.value, 'Components'), 'All components'),
-    },
-    { text: 'Patterns', entries: menu('Patterns') },
-    { text: 'Storybook', href: 'https://storybook.rowkit.dev' },
-    { text: 'Decisions', entries: menu('Decisions') },
-    {
-      text: 'Help',
-      entries: [
-        ...(roadmap
-          ? [
-              {
-                kind: 'item',
-                id: 'roadmap',
-                text: 'Roadmap',
-                icon: DocumentIcon,
-                href: withBase(roadmap.link ?? '/'),
-              } as const,
-            ]
-          : []),
-        ...(contributing
-          ? [
-              {
-                kind: 'item',
-                id: 'contributing',
-                text: 'Contributing',
-                icon: DocumentIcon,
-                href: withBase(contributing.link ?? '/'),
-              } as const,
-            ]
-          : []),
-        {
-          kind: 'item',
-          id: 'changelog',
-          text: 'Changelog',
-          href: 'https://github.com/NikolaiKushner/rowkit/releases',
-        },
-        {
-          kind: 'item',
-          id: 'github',
-          text: 'GitHub',
-          href: 'https://github.com/NikolaiKushner/rowkit',
-        },
-        { kind: 'separator', id: 'help-sep' },
-        siteTheme.value === 'modern'
-          ? {
-              kind: 'item',
-              id: 'find',
-              text: 'Search…',
-              shortcut: searchShortcut(),
-              action: openFind,
-            }
-          : { kind: 'item', id: 'find', text: 'Find…', shortcut: 'Ctrl+K', action: openFind },
-      ],
-    },
-  ]
-})
-
-const root = ref<HTMLElement>()
-const open = ref<number>()
-const menus = ref<{ focusFirst: () => void; focusPanel: () => void }[]>([])
-
-function trigger(index: number): HTMLElement | null {
-  return root.value?.querySelector<HTMLElement>(`[data-bar="${String(index)}"]`) ?? null
-}
-
-function openMenu(index: number, fromKeyboard: boolean): void {
-  if (!bar.value[index]?.entries) {
-    open.value = undefined
-    trigger(index)?.focus()
-    return
-  }
-  open.value = index
-  void nextTick(() => {
-    const menu = menus.value[0]
-    if (fromKeyboard) menu?.focusFirst()
-    else menu?.focusPanel()
-  })
-}
-
-function close(focusTrigger = true): void {
-  const was = open.value
-  open.value = undefined
-  if (focusTrigger && was !== undefined) trigger(was)?.focus()
-}
-
-function step(from: number, by: number, keepOpen: boolean): void {
-  const next = (from + by + bar.value.length) % bar.value.length
-  if (keepOpen) openMenu(next, true)
-  else trigger(next)?.focus()
-}
-
-function onBarKeydown(event: KeyboardEvent, index: number): void {
-  switch (event.key) {
-    case 'ArrowRight':
-      step(index, 1, open.value !== undefined)
-      break
-    case 'ArrowLeft':
-      step(index, -1, open.value !== undefined)
-      break
-    case 'ArrowDown':
-    case 'Enter':
-    case ' ':
-      if (!bar.value[index]?.entries) return
-      openMenu(index, true)
-      break
-    case 'Escape':
-      close()
-      break
-    default:
-      return
-  }
-  event.preventDefault()
-}
-
-function onBarClick(index: number): void {
-  if (open.value === index) close(false)
-  else openMenu(index, false)
-}
-
-// With a menu open, pointing at another item opens that one instead.
-function onBarHover(index: number): void {
-  if (open.value !== undefined && open.value !== index) openMenu(index, false)
-}
-
-function onPointerDown(event: PointerEvent): void {
-  if (!root.value?.contains(event.target as Node)) close(false)
-}
-
-watch(open, (value) => {
-  if (value === undefined) document.removeEventListener('pointerdown', onPointerDown, true)
-  else document.addEventListener('pointerdown', onPointerDown, true)
-})
-
-watch(
-  () => route.path,
-  () => close(false)
-)
-
-onBeforeUnmount(() => document.removeEventListener('pointerdown', onPointerDown, true))
-</script>
-
-<template>
-  <nav ref="root" aria-label="Main" class="relative z-30 bg-card px-0.5 py-px">
-    <ul role="menubar" aria-label="Main" class="m-0 flex list-none items-center p-0 modern:gap-0.5">
-      <li v-for="(item, index) in bar" :key="item.text" role="none" class="relative">
-        <a
-          v-if="item.href"
-          :data-bar="index"
-          role="menuitem"
-          :tabindex="index === 0 ? 0 : -1"
-          :href="item.href"
-          target="_blank"
-          rel="noreferrer"
-          class="rk-bar-item"
-          @keydown="onBarKeydown($event, index)"
-          @pointerenter="onBarHover(index)"
-          >{{ item.text }}</a
-        >
-        <button
-          v-else
-          :id="`rk-menu-${String(index)}`"
-          :data-bar="index"
-          type="button"
-          role="menuitem"
-          aria-haspopup="menu"
-          :aria-expanded="open === index"
-          :tabindex="index === 0 ? 0 : -1"
-          class="rk-bar-item"
-          :class="open === index && 'rk-bar-item-open'"
-          @click="onBarClick(index)"
-          @keydown="onBarKeydown($event, index)"
-          @pointerenter="onBarHover(index)"
-        >
-          {{ item.text }}
-        </button>
-        <SiteMenu
-          v-if="open === index && item.entries"
-          ref="menus"
-          :entries="item.entries"
-          :labelledby="`rk-menu-${String(index)}`"
-          class="absolute top-full left-0 modern:top-[calc(100%+3px)]"
-          @close="close"
-          @prev="step(index, -1, true)"
-          @next="step(index, 1, true)"
-        />
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<style scoped>
-/*
- * A menu-bar item: flat; a thin raised bevel under the pointer, thin sunken
- * while its menu is open, navy when it has the keyboard.
- */
-.rk-bar-item {
-  display: flex;
-  align-items: center;
-  height: 22px;
-  padding: 0 6px;
-  border: 0;
-  background: none;
-  font-size: var(--text-ui);
-  line-height: var(--text-ui--line-height);
-  color: var(--color-foreground);
-  text-decoration: none;
-  outline: none;
-  cursor: default;
-}
-
-.rk-bar-item:hover {
-  box-shadow: var(--shadow-raised-thin);
-}
-
-.rk-bar-item-open,
-.rk-bar-item-open:hover {
-  box-shadow: var(--shadow-status);
-}
-
-.rk-bar-item:focus-visible:not(.rk-bar-item-open) {
-  background: var(--color-surface-selected);
-  color: var(--color-on-selected);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/SiteShell.vue b/docs/.vitepress/theme/components/site/SiteShell.vue
new file mode 100644
index 00000000..6d146b2c
--- /dev/null
+++ b/docs/.vitepress/theme/components/site/SiteShell.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import ComponentsLook from './ComponentsLook.vue'
+import { setSiteDark } from './useSiteTheme'
+
+/**
+ * VitePress's default layout with one addition: the switch for the theme the
+ * examples are drawn in — in the nav bar from 1360px, above the page's content
+ * where the nav bar is full, in the menu on a phone. VitePress's dark mode also turns the
+ * modern examples dark.
+ */
+const { isDark } = useData()
+
+watch(
+  isDark,
+  (value) => {
+    if (typeof document !== 'undefined') setSiteDark(value)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <DefaultTheme.Layout>
+    <template #nav-bar-content-after>
+      <ComponentsLook class="in-nav" />
+    </template>
+    <template #doc-before>
+      <ComponentsLook class="in-doc" />
+    </template>
+    <template #nav-screen-content-after>
+      <ComponentsLook class="in-screen" />
+    </template>
+  </DefaultTheme.Layout>
+</template>
diff --git a/docs/.vitepress/theme/components/site/SiteTaskbar.vue b/docs/.vitepress/theme/components/site/SiteTaskbar.vue
deleted file mode 100644
index 714242a7..00000000
--- a/docs/.vitepress/theme/components/site/SiteTaskbar.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { withBase } from 'vitepress'
-import { Separator, version } from 'rowkit'
-import SiteMenuBar from './SiteMenuBar.vue'
-import StartMenu from './StartMenu.vue'
-import ThemeSwitch from './ThemeSwitch.vue'
-import { siteTheme } from './useSiteTheme'
-
-/**
- * The taskbar along the bottom of the screen: Start, the page on screen as
- * the one task, and the tray — the version (to the changelog), GitHub and a
- * clock. 34px, raised, the Win98 way round: light outer edge on top.
- *
- * Start opens the Start menu and stays pressed while it is open. Opened from
- * the keyboard, the menu starts on its first item; by the pointer, on none.
- */
-defineProps<{
-  /** The task's label: the page title. */
-  task: string
-  /**
-   * The task is a button — on the desktop, where it brings back windows that
-   * were closed. Elsewhere it only shows which page is open.
-   */
-  taskButton?: boolean
-}>()
-
-defineEmits<{ task: [] }>()
-
-// The clock renders on the client only; the server's time would be wrong by
-// the time anyone read it, and would not match on hydration.
-// The modern menu bar puts the date before it, as a Mac does: «Tue 7 Oct».
-const time = ref('')
-const date = ref('')
-let timer: ReturnType<typeof setInterval> | undefined
-
-function tick(): void {
-  const now = new Date()
-  time.value = now.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false,
-  })
-  date.value = now
-    .toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
-    .replace(',', '')
-}
-
-onMounted(() => {
-  tick()
-  timer = setInterval(tick, 10_000)
-})
-onBeforeUnmount(() => clearInterval(timer))
-
-const start = ref<HTMLButtonElement>()
-const burger = ref<HTMLButtonElement>()
-// The control that opened the menu: Start, or ☰ on a phone in the modern theme.
-const anchor = ref<HTMLButtonElement>()
-const menu = ref<{ focusFirst: () => void; focusPanel: () => void }>()
-const startOpen = ref(false)
-
-function toggleStart(event: MouseEvent): void {
-  anchor.value = event.currentTarget as HTMLButtonElement
-  startOpen.value = !startOpen.value
-  if (!startOpen.value) return
-  // A click from Enter or Space has no pointer position.
-  const fromKeyboard = event.detail === 0
-  void nextTick(() => (fromKeyboard ? menu.value?.focusFirst() : menu.value?.focusPanel()))
-}
-
-function closeStart(focusStart: boolean): void {
-  startOpen.value = false
-  if (focusStart) (anchor.value ?? start.value)?.focus()
-}
-</script>
-
-<template>
-  <!--
-    In the modern theme the taskbar is the menu bar: at the top (`order-first`
-    in the page's column), the Start button becomes the rowkit menu, the
-    window's menus move up into it, and there is no task button.
-  -->
-  <footer
-    class="rk-taskbar relative flex h-[34px] shrink-0 items-center gap-1 bg-card p-0.5 modern:order-first modern:z-40 modern:h-7 modern:gap-0.5 modern:px-3 modern:py-0 modern:max-md:h-9 modern:max-md:gap-2 modern:max-md:pr-2"
-  >
-    <button
-      ref="start"
-      type="button"
-      aria-haspopup="menu"
-      :aria-expanded="startOpen && anchor !== burger"
-      class="flex h-[27px] shrink-0 items-center gap-1 pr-1.5 pl-0.5 font-bold text-ui text-foreground outline-none [&:focus-visible>span]:outline-1 [&:focus-visible>span]:outline-dotted [&:focus-visible>span]:outline-ring modern:h-[22px] modern:gap-1.5 modern:rounded-[5px] modern:pr-2 modern:pl-1.5 modern:pt-0 modern:font-strong modern:shadow-none modern:aria-expanded:bg-control-ghost-active modern:hover:bg-control-ghost-hover modern:focus-visible:focus-outer"
-      :class="startOpen ? 'pt-px pl-[3px] shadow-pressed' : 'shadow-raised active:shadow-pressed'"
-      @click="toggleStart"
-    >
-      <!-- The pixel mark on Start; in modern the vector, reversed on the dark bar. -->
-      <img
-        :src="withBase('/mark-win98-16.png')"
-        alt=""
-        width="16"
-        height="16"
-        class="modern:hidden"
-      />
-      <img
-        :src="withBase('/mark-16.svg')"
-        alt=""
-        width="16"
-        height="16"
-        class="win98:hidden modern-dark:hidden"
-      />
-      <img
-        :src="withBase('/mark-16-light.svg')"
-        alt=""
-        width="16"
-        height="16"
-        class="hidden modern-dark:block"
-      />
-      <span class="px-px modern:hidden">Start</span>
-      <span class="win98:hidden">rowkit</span>
-    </button>
-    <StartMenu v-if="startOpen" ref="menu" :anchor="anchor" @close="closeStart" />
-    <Separator orientation="vertical" decorative class="h-[27px] self-center modern:hidden" />
-    <SiteMenuBar
-      v-if="siteTheme === 'modern'"
-      class="bg-transparent p-0 max-md:hidden win98:hidden"
-    />
-    <!--
-      The one task: this page. Active, so pressed in over the dither. Two
-      elements rather than <component :is="'button'">: the site registers
-      rowkit's Button globally, and Vue would resolve the string to it.
-    -->
-    <button
-      v-if="taskButton"
-      type="button"
-      class="flex h-[27px] w-40 min-w-0 shrink items-center gap-1 overflow-hidden bg-dither px-1 pt-px font-bold text-ui text-foreground shadow-pressed outline-none [&:focus-visible>span]:outline-1 [&:focus-visible>span]:outline-dotted [&:focus-visible>span]:outline-ring modern:hidden"
-      @click="$emit('task')"
-    >
-      <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" class="shrink-0" />
-      <span class="truncate">{{ task }}</span>
-    </button>
-    <div
-      v-else
-      aria-hidden="true"
-      class="flex h-[27px] w-40 min-w-0 shrink items-center gap-1 overflow-hidden bg-dither px-1 pt-px font-bold text-ui text-foreground shadow-pressed outline-none [&:focus-visible>span]:outline-1 [&:focus-visible>span]:outline-dotted [&:focus-visible>span]:outline-ring modern:hidden"
-    >
-      <img :src="withBase('/mark-win98-16.png')" alt="" width="16" height="16" class="shrink-0" />
-      <span class="truncate">{{ task }}</span>
-    </div>
-    <div class="flex-1" />
-    <!--
-      The theme switch in the middle of the bar, where it is seen on every
-      page: the bar's centre is empty in both themes. Beside the tray below
-      1280px, where the modern menus reach the middle.
-    -->
-    <div class="xl:absolute xl:inset-x-0 xl:mx-auto xl:w-fit">
-      <ThemeSwitch />
-    </div>
-    <div
-      class="flex h-[27px] shrink-0 items-center gap-1.5 px-1.5 text-ui text-foreground shadow-status modern:max-md:hidden modern:h-[22px] modern:gap-3.5 modern:pr-0 modern:pl-3 modern:shadow-none"
-    >
-      <a
-        href="https://github.com/NikolaiKushner/rowkit/releases"
-        target="_blank"
-        rel="noreferrer"
-        class="text-foreground no-underline modern:text-muted-foreground"
-        >v{{ version }}</a
-      >
-      <a
-        href="https://github.com/NikolaiKushner/rowkit"
-        target="_blank"
-        rel="noreferrer"
-        class="text-foreground underline modern:no-underline"
-        >GitHub</a
-      >
-      <time class="min-w-[28px] tabular-nums"
-        ><span class="win98:hidden">{{ date }}&ensp;</span>{{ time }}</time
-      >
-    </div>
-    <!-- Modern on a phone (Figma 390): the menus go behind ☰, which opens the rowkit menu. -->
-    <button
-      ref="burger"
-      type="button"
-      aria-haspopup="menu"
-      :aria-expanded="startOpen && anchor === burger"
-      aria-label="Menu"
-      class="hidden size-7 shrink-0 items-center justify-center rounded-[7px] text-foreground outline-none hover:bg-control-ghost-hover focus-visible:focus-outer aria-expanded:bg-control-ghost-active modern:max-md:flex"
-      @click="toggleStart"
-    >
-      <span
-        aria-hidden="true"
-        class="size-4 bg-current [mask-size:contain]"
-        :style="{ maskImage: `url(${withBase('/icons/modern/menu.svg')})` }"
-      />
-    </button>
-  </footer>
-</template>
-
-<style scoped>
-/* The taskbar's raised edge is the reverse of a button's: light outer line on top. */
-.rk-taskbar {
-  box-shadow:
-    inset -1px -1px var(--color-bevel-dark),
-    inset 1px 1px var(--color-bevel-light),
-    inset -2px -2px var(--color-bevel-shadow),
-    inset 2px 2px var(--color-bevel-highlight);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/SiteToolbarButton.vue b/docs/.vitepress/theme/components/site/SiteToolbarButton.vue
deleted file mode 100644
index 1aa0dfd4..00000000
--- a/docs/.vitepress/theme/components/site/SiteToolbarButton.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-/**
- * An Explorer toolbar button: a 32px icon over an 11px caption, flat until
- * hovered (thin raised bevel), thin sunken while held. Disabled, the caption
- * greys and embosses and the icon fades.
- */
-defineProps<{
-  label: string
-  disabled?: boolean
-}>()
-
-defineEmits<{ click: [event: MouseEvent] }>()
-</script>
-
-<template>
-  <button
-    type="button"
-    :disabled="disabled"
-    class="rk-toolbar-button flex min-w-14 shrink-0 flex-col items-center gap-0.5 px-1 pt-0.5 pb-1 text-ui text-foreground outline-none hover:shadow-raised-thin focus-visible:outline-1 focus-visible:-outline-offset-4 focus-visible:outline-dotted focus-visible:outline-ring active:pt-1 active:pr-0.5 active:pb-0.5 active:pl-1.5 active:shadow-status active:hover:shadow-status disabled:text-text-disabled disabled:text-shadow-disabled disabled:hover:shadow-none"
-    @click="$emit('click', $event)"
-  >
-    <span class="rk-toolbar-icon size-8"><slot /></span>
-    {{ label }}
-  </button>
-</template>
-
-<style scoped>
-/* A disabled toolbar icon fades to grey, as Explorer drew Forward with no history. */
-.rk-toolbar-button:disabled .rk-toolbar-icon {
-  filter: grayscale(1);
-  opacity: 0.5;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/SiteWallpaper.vue b/docs/.vitepress/theme/components/site/SiteWallpaper.vue
deleted file mode 100644
index 07bd9ed3..00000000
--- a/docs/.vitepress/theme/components/site/SiteWallpaper.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-/**
- * The modern desktop's wallpaper (Figma SiteModern/Wallpaper, 1280×800): three
- * ellipses under a 180px layer blur on the desktop colour — light top left,
- * blue bottom right, a second blue (violet in dark) along the bottom. Placed
- * in percent of that frame, so it scales with the window. Windows 98 keeps its
- * flat teal.
- */
-</script>
-
-<template>
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-0 -z-10 overflow-hidden win98:hidden"
-  >
-    <div
-      class="absolute top-[-32.5%] left-[-15.625%] h-[77.5%] w-[59.375%] rounded-full bg-(--rk-wallpaper-a) blur-[90px]"
-    />
-    <div
-      class="absolute top-[47.5%] left-[59.375%] h-[77.5%] w-[59.375%] rounded-full bg-(--rk-wallpaper-b) blur-[90px]"
-    />
-    <div
-      class="absolute top-[70%] left-[20.3125%] h-[52.5%] w-[48.4375%] rounded-full bg-(--rk-wallpaper-c) blur-[90px]"
-    />
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/SpotlightSearch.vue b/docs/.vitepress/theme/components/site/SpotlightSearch.vue
deleted file mode 100644
index ab1e7cbd..00000000
--- a/docs/.vitepress/theme/components/site/SpotlightSearch.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { useRouter } from 'vitepress'
-import {
-  CloseGlyphIcon,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DocumentIcon,
-  FolderIcon,
-  Search32Icon,
-  SearchIcon,
-} from 'rowkit'
-import { find, indexReady, loadIndex, recent, type FindResult } from './useFindIndex'
-import { finding } from './useFind'
-import { recentPaths, useSiteNav } from './useSiteNav'
-
-/**
- * Search in the modern theme, as Spotlight draws it (Figma SiteModern/
- * Spotlight): one large field at the top, the results grouped by section
- * under it, the keys in a strip along the bottom. Empty, it lists the pages
- * opened recently. The same search as Windows 98's Find window: pages and
- * folders by name, then sections of pages by their text.
- *
- * The field is a combobox over the results: ↑ ↓ move the highlight without
- * leaving it, Return opens, Escape closes. A dialog underneath, so focus
- * stays in and goes back where it was; without its title bar or the dimmed
- * page, which Spotlight does not have.
- */
-const { tree } = useSiteNav()
-const router = useRouter()
-
-const query = ref('')
-const searched = ref('')
-const active = ref(0)
-const input = ref<HTMLInputElement>()
-const list = ref<HTMLElement>()
-
-let typing: ReturnType<typeof setTimeout> | undefined
-watch(query, (value) => {
-  clearTimeout(typing)
-  typing = setTimeout(() => (searched.value = value), 80)
-})
-
-const results = computed<FindResult[]>(() => {
-  void indexReady.value
-  const term = searched.value.trim()
-  if (!term) return recent(recentPaths.value, tree.value)
-  // Three groups of three at most, as the design lists them: the best of each
-  // section, not a long scroll.
-  const perGroup = new Map<string, number>()
-  return find(term, tree.value).filter((result) => {
-    const seen = perGroup.get(result.group)
-    if (seen === undefined && perGroup.size === 3) return false
-    perGroup.set(result.group, (seen ?? 0) + 1)
-    return (seen ?? 0) < 3
-  })
-})
-
-/** Results in groups, in the order the groups first appear. */
-const groups = computed(() => {
-  const byName = new Map<string, { name: string; rows: { result: FindResult; index: number }[] }>()
-  results.value.forEach((result, index) => {
-    const group = byName.get(result.group) ?? { name: result.group, rows: [] }
-    group.rows.push({ result, index })
-    byName.set(result.group, group)
-  })
-  return [...byName.values()]
-})
-
-// Results highlight their first row, for Return; the recent pages wait for an arrow.
-watch(results, () => (active.value = searched.value.trim() ? 0 : -1), { immediate: true })
-
-watch(finding, (open) => {
-  if (!open) return
-  void loadIndex()
-  void nextTick(() => input.value?.select())
-})
-
-/** «Components › Data», «Components · 5 pages», «Section · Components › DataTable». */
-function subtitle(result: FindResult): string {
-  const trail = result.trail.join(' › ')
-  if (result.pages !== undefined) {
-    const pages = `${String(result.pages)} ${result.pages === 1 ? 'page' : 'pages'}`
-    return trail ? `${trail} · ${pages}` : pages
-  }
-  if (result.type === 'Section') return trail ? `Section · ${trail}` : 'Section'
-  return trail || 'rowkit docs'
-}
-
-function open(index: number): void {
-  const result = results.value[index]
-  if (!result) return
-  finding.value = false
-  // The next search starts empty, on the pages opened recently.
-  query.value = ''
-  searched.value = ''
-  void router.go(result.href)
-}
-
-function clear(): void {
-  query.value = ''
-  searched.value = ''
-  input.value?.focus()
-}
-
-function scrollIntoView(): void {
-  void nextTick(() =>
-    list.value
-      ?.querySelector(`[data-index="${String(active.value)}"]`)
-      ?.scrollIntoView({ block: 'nearest' })
-  )
-}
-
-function onKeydown(event: KeyboardEvent): void {
-  const count = results.value.length
-  switch (event.key) {
-    case 'ArrowDown':
-      if (count) active.value = (active.value + 1) % count
-      scrollIntoView()
-      break
-    case 'ArrowUp':
-      if (count) active.value = active.value <= 0 ? count - 1 : active.value - 1
-      scrollIntoView()
-      break
-    case 'Enter':
-      // Return before the last keystrokes are searched searches them first.
-      clearTimeout(typing)
-      if (searched.value !== query.value) searched.value = query.value
-      void nextTick(() => open(active.value))
-      break
-    default:
-      return
-  }
-  event.preventDefault()
-}
-
-const optionId = (index: number) => `rk-spotlight-option-${String(index)}`
-const status = computed(() => {
-  if (!searched.value.trim()) return ''
-  const count = results.value.length
-  return count ? `${String(count)} ${count === 1 ? 'result' : 'results'}` : 'No results'
-})
-</script>
-
-<template>
-  <Dialog v-model:open="finding">
-    <DialogContent
-      close-label="Close search"
-      data-spotlight
-      class="top-[150px] w-[680px] max-w-[calc(100vw-1rem)] translate-y-0 overflow-hidden rounded-xl bg-card p-0 shadow-[0_10px_30px_rgb(0_0_0/0.15),0_0_0_1px_rgb(0_0_0/0.1)] [backdrop-filter:var(--rk-popover-backdrop)] max-md:top-[72px] [&>[data-slot=dialog-title-bar]]:hidden"
-    >
-      <DialogTitle class="sr-only">Search rowkit docs</DialogTitle>
-
-      <div class="flex h-14 shrink-0 items-center gap-3 px-[18px]">
-        <SearchIcon class="size-[22px] shrink-0 text-muted-foreground" />
-        <!--
-          A text field rather than a search field: a search field spends the
-          first Escape on clearing itself, and here Escape closes, as the
-          strip along the bottom says. The ✕ clears instead.
-        -->
-        <input
-          ref="input"
-          v-model="query"
-          type="text"
-          role="combobox"
-          aria-label="Search rowkit docs"
-          placeholder="Search rowkit"
-          autocomplete="off"
-          spellcheck="false"
-          aria-autocomplete="list"
-          aria-controls="rk-spotlight-results"
-          :aria-expanded="results.length > 0"
-          :aria-activedescendant="active >= 0 && results.length ? optionId(active) : undefined"
-          class="min-w-0 flex-1 border-0 bg-transparent p-0 text-[22px] leading-7 text-foreground caret-control-primary outline-none placeholder:text-text-subtle"
-          @keydown="onKeydown"
-        />
-        <button
-          v-if="query"
-          type="button"
-          aria-label="Clear search"
-          class="flex size-5 shrink-0 items-center justify-center rounded-full text-text-subtle outline-none hover:bg-control-ghost-hover focus-visible:focus-outer [&_svg]:size-3"
-          @click="clear"
-        >
-          <CloseGlyphIcon />
-        </button>
-      </div>
-
-      <template v-if="results.length || searched.trim()">
-        <div class="h-px shrink-0 bg-border" />
-        <div
-          v-if="results.length"
-          id="rk-spotlight-results"
-          ref="list"
-          role="listbox"
-          aria-label="Results"
-          class="scrollbar-themed flex max-h-[min(60vh,420px)] flex-col gap-1.5 overflow-y-auto px-2 pt-1.5 pb-2"
-        >
-          <div
-            v-for="group in groups"
-            :key="group.name"
-            role="group"
-            :aria-labelledby="`rk-spotlight-group-${group.name}`"
-            class="flex flex-col gap-0.5"
-          >
-            <div
-              :id="`rk-spotlight-group-${group.name}`"
-              class="pt-1.5 pb-1 pl-2 font-strong text-ui text-text-subtle"
-            >
-              {{ group.name }}
-            </div>
-            <div
-              v-for="{ result, index } in group.rows"
-              :id="optionId(index)"
-              :key="result.id"
-              :data-index="index"
-              role="option"
-              :aria-selected="index === active"
-              class="group flex h-10 cursor-default items-center gap-2.5 rounded-[7px] pr-3 pl-2 text-ui aria-selected:bg-surface-selected aria-selected:text-on-selected aria-selected:[--rk-icon-tone-folder:currentColor]"
-              @click="open(index)"
-              @pointermove="active = index"
-            >
-              <span
-                class="flex size-[26px] shrink-0 items-center justify-center rounded-[5px] bg-control-latched text-muted-foreground group-aria-selected:bg-transparent group-aria-selected:text-on-selected group-aria-selected:shadow-[inset_0_0_0_1px_currentColor]"
-              >
-                <FolderIcon v-if="result.pages !== undefined" />
-                <DocumentIcon v-else />
-              </span>
-              <span class="flex min-w-0 flex-1 flex-col">
-                <span class="truncate font-strong">{{ result.name }}</span>
-                <span class="truncate text-text-subtle group-aria-selected:text-on-selected">{{
-                  subtitle(result)
-                }}</span>
-              </span>
-              <span v-if="index === active" aria-hidden="true" class="shrink-0">Return</span>
-            </div>
-          </div>
-        </div>
-        <div v-else class="flex flex-col items-center gap-2 px-2 py-[34px] text-center">
-          <Search32Icon class="text-text-subtle" />
-          <p class="m-0 text-heading font-strong text-foreground">
-            No results for “{{ searched.trim() }}”
-          </p>
-          <p class="m-0 text-ui text-text-subtle">
-            Try a component name, a prop, or a token such as --color-link.
-          </p>
-        </div>
-      </template>
-
-      <p class="sr-only" aria-live="polite">{{ status }}</p>
-
-      <div
-        aria-hidden="true"
-        class="flex h-[34px] shrink-0 items-center gap-4 bg-control-ghost-hover/6 px-[18px] text-ui text-text-subtle"
-      >
-        <span>↑ ↓ to move</span>
-        <span>Return to open</span>
-        <span class="max-md:hidden">Esc to close</span>
-        <span class="flex-1" />
-        <span class="max-md:hidden">rowkit docs</span>
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>
-
-<style>
-/* Spotlight floats over the page as it is: no dimming behind it. */
-:root:has([data-spotlight][data-state='open']) [data-slot='dialog-overlay'] {
-  background: transparent;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/site/StartMenu.vue b/docs/.vitepress/theme/components/site/StartMenu.vue
deleted file mode 100644
index c93b1c52..00000000
--- a/docs/.vitepress/theme/components/site/StartMenu.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue'
-import { useRoute, withBase } from 'vitepress'
-import {
-  Book32Icon,
-  Code32Icon,
-  Computer32Icon,
-  Document32Icon,
-  DocumentIcon,
-  Folder32Icon,
-  FolderIcon,
-  Info32Icon,
-  Search32Icon,
-} from 'rowkit'
-import SiteMenu from './SiteMenu.vue'
-import {
-  componentsMenu,
-  folder,
-  folderMenu,
-  fromTree,
-  schemeMenu,
-  searchShortcut,
-  type MenuEntry,
-  type MenuItem,
-} from './menu'
-import { openFind } from './useFind'
-import { useSiteNav } from './useSiteNav'
-import { setSiteTheme, siteTheme } from './useSiteTheme'
-
-/**
- * The Start menu: the rowkit strip down the left, 34px items with 32px icons,
- * cascades to the right. On a phone, where a cascade has nowhere to go, a
- * folder replaces the menu with its contents under a «◂ Folder» row that goes
- * back — and it is the site's main navigation there.
- *
- * In the modern theme it is the rowkit menu under the brand in the menu bar
- * (Figma SiteModern/Menu/rowkit): a drop-down like the others, its own items.
- */
-const props = defineProps<{
-  /** The element that opened the menu; a click on it is not «outside». */
-  anchor: HTMLElement | undefined
-}>()
-
-const emit = defineEmits<{ close: [focusStart: boolean] }>()
-
-const { tree } = useSiteNav()
-const route = useRoute()
-
-const root = ref<HTMLElement>()
-const menu = ref<{ focusFirst: () => void; focusPanel: () => void }>()
-
-const entries = computed<MenuEntry[]>(() => {
-  const sub = (text: string) => fromTree(folder(tree.value, text)?.children ?? [])
-  const decisions = folder(tree.value, 'Decisions')?.children[0]?.link
-  return [
-    { kind: 'item', id: 'guide', text: 'Guide', icon: Book32Icon, children: sub('Guide') },
-    {
-      kind: 'item',
-      id: 'components',
-      text: 'Components',
-      icon: Folder32Icon,
-      children: folderMenu(folder(tree.value, 'Components'), 'All components'),
-    },
-    {
-      kind: 'item',
-      id: 'patterns',
-      text: 'Patterns',
-      icon: Folder32Icon,
-      children: sub('Patterns'),
-    },
-    {
-      kind: 'item',
-      id: 'tokens',
-      text: 'Tokens',
-      icon: Computer32Icon,
-      href: withBase('/foundations/tokens'),
-    },
-    {
-      kind: 'item',
-      id: 'decisions',
-      text: 'Decisions',
-      icon: Document32Icon,
-      href: withBase(decisions ?? '/'),
-    },
-    { kind: 'separator', id: 'sep-1' },
-    {
-      kind: 'item',
-      id: 'storybook',
-      text: 'Storybook',
-      icon: Computer32Icon,
-      href: 'https://storybook.rowkit.dev',
-    },
-    {
-      kind: 'item',
-      id: 'github',
-      text: 'GitHub',
-      icon: Code32Icon,
-      href: 'https://github.com/NikolaiKushner/rowkit',
-    },
-    { kind: 'separator', id: 'sep-2' },
-    { kind: 'item', id: 'find', text: 'Find…', icon: Search32Icon, action: openFind },
-    { kind: 'item', id: 'help', text: 'Help', icon: Info32Icon, href: withBase('/introduction') },
-  ]
-})
-
-const modernEntries = computed<MenuEntry[]>(() => {
-  const sub = (text: string) => fromTree(folder(tree.value, text)?.children ?? [])
-  const decisions = folder(tree.value, 'Decisions')?.children[0]?.link
-  const external = (id: string, text: string, href: string): MenuEntry => ({
-    kind: 'item',
-    id,
-    text,
-    href,
-    shortcut: '↗',
-  })
-  return [
-    { kind: 'item', id: 'about', text: 'About rowkit', href: withBase('/') },
-    { kind: 'separator', id: 'sep-1' },
-    { kind: 'item', id: 'guide', text: 'Guide', href: withBase('/introduction') },
-    {
-      kind: 'item',
-      id: 'components',
-      text: 'Components',
-      children: componentsMenu(folder(tree.value, 'Components')),
-    },
-    { kind: 'item', id: 'patterns', text: 'Patterns', children: sub('Patterns') },
-    {
-      kind: 'item',
-      id: 'foundations',
-      text: 'Foundations',
-      children: sub('Foundations · Tokens'),
-    },
-    { kind: 'item', id: 'decisions', text: 'Decisions', href: withBase(decisions ?? '/') },
-    { kind: 'separator', id: 'sep-2' },
-    { kind: 'item', id: 'find', text: 'Search…', shortcut: searchShortcut(), action: openFind },
-    external('storybook', 'Storybook', 'https://storybook.rowkit.dev'),
-    external('github', 'GitHub', 'https://github.com/NikolaiKushner/rowkit'),
-    { kind: 'separator', id: 'sep-3' },
-    {
-      kind: 'item',
-      id: 'theme',
-      text: 'Theme',
-      children: [
-        ...(['win98', 'modern'] as const).map((theme): MenuEntry => ({
-          kind: 'item',
-          id: `theme-${theme}`,
-          text: theme === 'win98' ? 'Windows 98' : 'Modern',
-          checked: siteTheme.value === theme,
-          action: () => setSiteTheme(theme),
-        })),
-        { kind: 'separator', id: 'theme-sep' },
-        ...schemeMenu(),
-      ],
-    },
-  ]
-})
-
-/*
- * Drilling, below 768px. `trail` is the folders opened so far; the panel shows
- * the last one's contents. Their 16px icons become the 32px ones, so every row
- * of the phone menu is a 34px Start item.
- */
-const narrow = ref(false)
-const trail = ref<MenuItem[]>([])
-
-const large = new Map<Component, Component>([
-  [FolderIcon, Folder32Icon],
-  [DocumentIcon, Document32Icon],
-])
-
-function toLarge(list: MenuEntry[]): MenuEntry[] {
-  return list.map((entry) =>
-    entry.kind === 'item' && entry.icon
-      ? { ...entry, icon: large.get(entry.icon) ?? entry.icon }
-      : entry
-  )
-}
-
-const shown = computed(() => {
-  const last = trail.value[trail.value.length - 1]
-  if (last?.children) return toLarge(last.children)
-  return siteTheme.value === 'modern' ? modernEntries.value : entries.value
-})
-
-function drillIn(entry: MenuItem): void {
-  trail.value = [...trail.value, entry]
-  void nextTick(() => menu.value?.focusFirst())
-}
-
-/** Escape steps back out of a folder before it closes the menu. */
-function onClose(focusStart: boolean): void {
-  if (focusStart && narrow.value && trail.value.length > 0) drillOut()
-  else emit('close', focusStart)
-}
-
-function drillOut(): void {
-  trail.value = trail.value.slice(0, -1)
-  void nextTick(() => menu.value?.focusFirst())
-}
-
-let query: MediaQueryList | undefined
-const onWidth = () => (narrow.value = query?.matches ?? false)
-
-function onPointerDown(event: PointerEvent): void {
-  const target = event.target as Node
-  if (root.value?.contains(target) || props.anchor?.contains(target)) return
-  emit('close', false)
-}
-
-onMounted(() => {
-  query = window.matchMedia('(max-width: 767px)')
-  onWidth()
-  query.addEventListener('change', onWidth)
-  document.addEventListener('pointerdown', onPointerDown, true)
-})
-
-onBeforeUnmount(() => {
-  query?.removeEventListener('change', onWidth)
-  document.removeEventListener('pointerdown', onPointerDown, true)
-})
-
-watch(
-  () => route.path,
-  () => emit('close', false)
-)
-
-defineExpose({
-  focusFirst: () => menu.value?.focusFirst(),
-  focusPanel: () => menu.value?.focusPanel(),
-})
-</script>
-
-<template>
-  <div
-    ref="root"
-    class="fixed bottom-[34px] left-0.5 z-50 flex bg-card p-0.5 shadow-window modern:top-7 modern:bottom-auto modern:left-2 modern:bg-transparent modern:p-0 modern:shadow-none modern:max-md:top-9 modern:max-md:right-2 modern:max-md:left-auto"
-  >
-    <!--
-      The strip: the title-bar gradient upright, the wordmark reading upward,
-      4px in and 6px up. Turned about its top-left corner so every pixel stays
-      on the grid — about its centre it would land on half pixels.
-    -->
-    <div
-      v-if="!narrow"
-      aria-hidden="true"
-      class="relative w-[22px] shrink-0 overflow-hidden bg-linear-to-b from-titlebar-to to-titlebar-from modern:hidden"
-    >
-      <img
-        :src="withBase('/wordmark-light.svg')"
-        alt=""
-        width="54"
-        height="14"
-        class="absolute bottom-[-8px] left-1 max-w-none origin-top-left -rotate-90"
-      />
-    </div>
-    <!-- On a phone in the modern theme the glass is this column's, so the back row sits on it too. -->
-    <div
-      class="flex flex-col modern:max-md:rounded-[10px] modern:max-md:bg-popover modern:max-md:p-[5px] modern:max-md:shadow-[0_10px_30px_rgb(0_0_0/0.15),0_0_0_1px_rgb(0_0_0/0.1)] modern:max-md:[backdrop-filter:var(--rk-popover-backdrop)]"
-      :class="narrow && 'w-[256px]'"
-    >
-      <button
-        v-if="narrow && trail.length > 0"
-        type="button"
-        class="flex h-[34px] w-full items-center gap-2 border-0 bg-transparent py-px pr-1.5 pl-1 text-left text-ui text-foreground outline-none focus-visible:bg-surface-selected focus-visible:text-on-selected modern:mb-1 modern:h-6 modern:gap-1 modern:rounded-[5px] modern:pl-1.5 modern:font-strong"
-        @click="drillOut"
-      >
-        <Folder32Icon v-if="siteTheme !== 'modern'" class="shrink-0" />
-        ◂ {{ trail[trail.length - 1]?.text }}
-      </button>
-      <SiteMenu
-        ref="menu"
-        :entries="shown"
-        :size="siteTheme === 'modern' ? 'menu' : 'start'"
-        :drill="narrow"
-        :label="siteTheme === 'modern' ? 'rowkit' : 'Start'"
-        class="win98:!bg-transparent win98:!p-0 win98:!shadow-none modern:w-[240px] modern:max-md:!w-full modern:max-md:!bg-transparent modern:max-md:!p-0 modern:max-md:!shadow-none modern:max-md:![backdrop-filter:none]"
-        :class="narrow && '[&_[role=menuitem]]:!w-full'"
-        @close="onClose"
-        @drill="drillIn"
-        @prev="narrow && trail.length > 0 && drillOut()"
-      />
-    </div>
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/ThemeSwitch.vue b/docs/.vitepress/theme/components/site/ThemeSwitch.vue
deleted file mode 100644
index 41882dc6..00000000
--- a/docs/.vitepress/theme/components/site/ThemeSwitch.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, useId } from 'vue'
-import { withBase } from 'vitepress'
-import { Button } from 'rowkit'
-import SiteMenu from './SiteMenu.vue'
-import { schemeMenu } from './menu'
-import {
-  setSiteScheme,
-  setSiteTheme,
-  siteScheme,
-  siteTheme,
-  type SiteScheme,
-  type SiteTheme,
-} from './useSiteTheme'
-
-/**
- * The site's theme switch: Windows 98 or modern, and for the modern theme its
- * colour scheme. Sits in the Windows 98 taskbar tray and in the modern menu
- * bar — the same control, drawn by whichever theme is on. Both drawings are
- * rendered and the theme hides one, so the first paint is already right.
- *
- * Modern (Figma SiteModern/ThemeSwitcher): a segmented control, one tab stop
- * with ← → between the themes, and an icon button that cycles the scheme —
- * Auto, Light, Dark. A long press or ↓ on it opens the scheme menu instead
- * (Figma SiteModern/Menu/Scheme).
- */
-const NEXT: Record<SiteScheme, SiteScheme> = { system: 'light', light: 'dark', dark: 'system' }
-const LABEL: Record<SiteScheme, string> = { system: 'Auto', light: 'Light', dark: 'Dark' }
-const ICON: Record<SiteScheme, string> = { system: 'auto', light: 'sun', dark: 'moon' }
-
-const THEMES: { value: SiteTheme; label: string }[] = [
-  { value: 'win98', label: 'Windows 98' },
-  { value: 'modern', label: 'Modern' },
-]
-
-const root = ref<HTMLElement>()
-
-/*
- * Switching the theme hides the drawing that was used and shows the other,
- * so focus would fall to the page. It moves to the chosen theme's control in
- * the drawing now on screen: this switch's, or — where this one is modern
- * only, as in About — the menu bar's.
- */
-const CHOSEN = '[data-theme-switch] :is([aria-pressed=true], [aria-checked=true])'
-
-function choose(theme: SiteTheme): void {
-  const hadFocus = root.value?.contains(document.activeElement) ?? false
-  setSiteTheme(theme)
-  if (!hadFocus) return
-  void nextTick(() => {
-    const visible = (scope: ParentNode | undefined) =>
-      [...(scope?.querySelectorAll<HTMLElement>(CHOSEN) ?? [])].find(
-        (control) => control.offsetParent !== null
-      )
-    ;(visible(root.value?.parentNode ?? undefined) ?? visible(document))?.focus()
-  })
-}
-
-/* The scheme menu. */
-const schemeButton = ref<HTMLButtonElement>()
-const schemeMenuRef = ref<{ focusFirst: () => void; focusPanel: () => void }>()
-const schemeOpen = ref(false)
-const schemeId = useId()
-let pressTimer: ReturnType<typeof setTimeout> | undefined
-let pressed = false
-
-function openSchemeMenu(fromKeyboard: boolean): void {
-  schemeOpen.value = true
-  document.addEventListener('pointerdown', onOutside, true)
-  void nextTick(() =>
-    fromKeyboard ? schemeMenuRef.value?.focusFirst() : schemeMenuRef.value?.focusPanel()
-  )
-}
-
-function closeSchemeMenu(focusButton: boolean): void {
-  schemeOpen.value = false
-  document.removeEventListener('pointerdown', onOutside, true)
-  if (focusButton) schemeButton.value?.focus()
-}
-
-function onOutside(event: PointerEvent): void {
-  const target = event.target as Node
-  if (root.value?.contains(target)) return
-  closeSchemeMenu(false)
-}
-
-// Held for half a second, the button opens the menu, and the release does not cycle.
-function onSchemeDown(event: PointerEvent): void {
-  if (event.button !== 0) return
-  pressed = false
-  clearTimeout(pressTimer)
-  pressTimer = setTimeout(() => {
-    pressed = true
-    openSchemeMenu(false)
-  }, 500)
-}
-
-function onSchemeUp(): void {
-  clearTimeout(pressTimer)
-}
-
-function onSchemeClick(): void {
-  if (pressed) {
-    pressed = false
-    return
-  }
-  if (schemeOpen.value) closeSchemeMenu(false)
-  setSiteScheme(NEXT[siteScheme.value])
-}
-
-function onSchemeKeydown(event: KeyboardEvent): void {
-  if (event.key !== 'ArrowDown') return
-  event.preventDefault()
-  openSchemeMenu(true)
-}
-
-onBeforeUnmount(() => {
-  clearTimeout(pressTimer)
-  document.removeEventListener('pointerdown', onOutside, true)
-})
-
-function onSegmentKeydown(event: KeyboardEvent): void {
-  const step = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }[event.key]
-  if (step === undefined) return
-  event.preventDefault()
-  const index = THEMES.findIndex((theme) => theme.value === siteTheme.value)
-  choose(THEMES[(index + step + THEMES.length) % THEMES.length].value)
-}
-</script>
-
-<template>
-  <div ref="root" data-theme-switch class="contents">
-    <div role="group" aria-label="Theme" class="flex shrink-0 items-center gap-0.5 modern:hidden">
-      <Button
-        size="xs"
-        variant="ghost"
-        :pressed="siteTheme === 'win98'"
-        class="min-w-0"
-        @click="choose('win98')"
-        >Windows 98</Button
-      >
-      <Button
-        size="xs"
-        variant="ghost"
-        :pressed="siteTheme === 'modern'"
-        class="min-w-0"
-        @click="choose('modern')"
-        >Modern</Button
-      >
-    </div>
-
-    <div class="flex shrink-0 items-center gap-1 win98:hidden">
-      <div role="radiogroup" aria-label="Theme" class="flex rounded-[7px] bg-control-latched p-0.5">
-        <button
-          v-for="theme in THEMES"
-          :key="theme.value"
-          type="button"
-          role="radio"
-          :aria-checked="siteTheme === theme.value"
-          :tabindex="siteTheme === theme.value ? 0 : -1"
-          class="flex h-[18px] items-center rounded-[5px] px-2.5 text-ui text-muted-foreground outline-none focus-visible:focus-outer aria-checked:bg-control aria-checked:font-strong aria-checked:text-foreground aria-checked:shadow-raised"
-          @click="choose(theme.value)"
-          @keydown="onSegmentKeydown"
-        >
-          {{ theme.label }}
-        </button>
-      </div>
-      <div class="relative">
-        <button
-          :id="schemeId"
-          ref="schemeButton"
-          type="button"
-          aria-haspopup="menu"
-          :aria-expanded="schemeOpen"
-          class="flex size-[22px] items-center justify-center rounded-[5px] text-muted-foreground outline-none hover:bg-control-ghost-hover focus-visible:focus-outer active:bg-control-ghost-active aria-expanded:bg-control-ghost-active"
-          :aria-label="`Colour scheme: ${LABEL[siteScheme]}. Change`"
-          :title="`Colour scheme: ${LABEL[siteScheme]}`"
-          @click="onSchemeClick"
-          @keydown="onSchemeKeydown"
-          @pointerdown="onSchemeDown"
-          @pointerup="onSchemeUp"
-          @pointerleave="onSchemeUp"
-          @contextmenu.prevent
-        >
-          <span
-            aria-hidden="true"
-            class="size-4 bg-current [mask-size:contain]"
-            :style="{ maskImage: `url(${withBase(`/icons/modern/${ICON[siteScheme]}.svg`)})` }"
-          />
-        </button>
-        <SiteMenu
-          v-if="schemeOpen"
-          ref="schemeMenuRef"
-          :entries="schemeMenu()"
-          :labelledby="schemeId"
-          class="absolute top-[calc(100%+3px)] left-0 z-50"
-          @close="() => closeSchemeMenu(true)"
-          @prev="() => {}"
-          @next="() => {}"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/docs/.vitepress/theme/components/site/menu.ts b/docs/.vitepress/theme/components/site/menu.ts
deleted file mode 100644
index 689095d7..00000000
--- a/docs/.vitepress/theme/components/site/menu.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { Component } from 'vue'
-import { withBase } from 'vitepress'
-import { DocumentIcon, FolderIcon } from 'rowkit'
-import type { NavNode } from './useSiteNav'
-import { setSiteScheme, siteScheme, type SiteScheme } from './useSiteTheme'
-
-/** One entry of a drop-down or Start menu. */
-export type MenuEntry =
-  | {
-      kind: 'item'
-      id: string
-      text: string
-      /** A page to open. External links open in a new tab. */
-      href?: string
-      /** What the item does instead of opening a page. */
-      action?: () => void
-      /** A submenu: the item opens it rather than doing anything itself. */
-      children?: MenuEntry[]
-      /** The icon in the gutter: 16px in a drop-down, 32px in the Start menu. */
-      icon?: Component
-      shortcut?: string
-      disabled?: boolean
-      /** One of a set of choices: drawn with a check mark when chosen. */
-      checked?: boolean
-    }
-  | { kind: 'separator'; id: string }
-  /** A heading over the items after it. Modern menus only; not an item. */
-  | { kind: 'header'; id: string; text: string }
-
-export type MenuItem = Extract<MenuEntry, { kind: 'item' }>
-
-export const isExternal = (href: string) => /^https?:/.test(href)
-
-/** A folder of the docs tree as menu entries: folders become submenus, pages links. */
-export function fromTree(nodes: NavNode[]): MenuEntry[] {
-  return nodes.map((node) => {
-    if (node.children.length > 0) {
-      return {
-        kind: 'item',
-        id: node.id,
-        text: node.text,
-        icon: FolderIcon,
-        children: fromTree(node.children),
-      }
-    }
-    return {
-      kind: 'item',
-      id: node.id,
-      text: node.text,
-      icon: DocumentIcon,
-      href: withBase(node.link ?? '/'),
-    }
-  })
-}
-
-/** The folder of the tree with this text, or nothing. */
-export function folder(tree: NavNode[], text: string): NavNode | undefined {
-  return tree.find((node) => node.text === text)
-}
-
-/**
- * A folder's menu: its subfolders and pages, then — under a separator — the
- * folder's own page, as Figma's Components cascade ends on «All components».
- */
-export function folderMenu(node: NavNode | undefined, label: string): MenuEntry[] {
-  if (!node) return []
-  const entries = fromTree(node.children)
-  if (node.link === undefined) return entries
-  return [
-    ...entries,
-    { kind: 'separator', id: `${node.id}-sep` },
-    {
-      kind: 'item',
-      id: `${node.id}-all`,
-      text: label,
-      icon: FolderIcon,
-      href: withBase(node.link),
-    },
-  ]
-}
-
-/**
- * The modern Components menu (Figma SiteModern/Menu/Components): the overview
- * first, then the areas under a «By area» heading, each a submenu.
- */
-export function componentsMenu(node: NavNode | undefined): MenuEntry[] {
-  if (!node) return []
-  return [
-    ...(node.link === undefined
-      ? []
-      : [
-          {
-            kind: 'item',
-            id: `${node.id}-all`,
-            text: 'Overview',
-            href: withBase(node.link),
-          } as const,
-          { kind: 'separator', id: `${node.id}-sep` } as const,
-        ]),
-    { kind: 'header', id: `${node.id}-areas`, text: 'By area' },
-    ...fromTree(node.children),
-  ]
-}
-
-/** The search shortcut as this platform writes it. */
-export const searchShortcut = (): string =>
-  typeof document !== 'undefined' && document.documentElement.classList.contains('mac')
-    ? '⌘K'
-    : 'Ctrl+K'
-
-/** The colour schemes (Figma SiteModern/Menu/Scheme), the one in use checked. */
-export function schemeMenu(): MenuEntry[] {
-  const SCHEMES: [SiteScheme, string, string?][] = [
-    ['system', 'Auto', 'follows the system'],
-    ['light', 'Light'],
-    ['dark', 'Dark'],
-  ]
-  return SCHEMES.map(([scheme, text, shortcut]) => ({
-    kind: 'item',
-    id: `scheme-${scheme}`,
-    text,
-    shortcut,
-    checked: siteScheme.value === scheme,
-    action: () => setSiteScheme(scheme),
-  }))
-}
diff --git a/docs/.vitepress/theme/components/site/useFind.ts b/docs/.vitepress/theme/components/site/useFind.ts
deleted file mode 100644
index 724d9ea0..00000000
--- a/docs/.vitepress/theme/components/site/useFind.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref } from 'vue'
-
-/**
- * Whether the Find window is open. One flag for the whole site, so the
- * toolbar's Find, the Start menu's «Find…» and Ctrl+K all open the same one,
- * on the desktop as well as in a docs page.
- */
-export const finding = ref(false)
-
-export function openFind(): void {
-  finding.value = true
-}
diff --git a/docs/.vitepress/theme/components/site/useFindIndex.ts b/docs/.vitepress/theme/components/site/useFindIndex.ts
deleted file mode 100644
index c21a2a6b..00000000
--- a/docs/.vitepress/theme/components/site/useFindIndex.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import { shallowRef } from 'vue'
-import { withBase } from 'vitepress'
-import localSearchIndex from '@localSearchIndex'
-import MiniSearch from 'minisearch'
-import { normalize, type NavNode } from './useSiteNav'
-
-/** One row of the Find window: Name · In folder · Type. */
-export interface FindResult {
-  id: string
-  name: string
-  folder: string
-  type: string
-  href: string
-  /** The top folder it sits in, which Spotlight groups by; «Pages» at the top. */
-  group: string
-  /** The folders above it — and the page, for a section — outermost first. */
-  trail: string[]
-  /** For a folder, how many pages it holds. */
-  pages?: number
-}
-
-interface Section {
-  id: string
-  title: string
-  titles: string[]
-}
-
-let index: MiniSearch | undefined
-const ready = shallowRef(false)
-
-/** Loads VitePress's search index once, the first time Find opens. */
-export async function loadIndex(): Promise<void> {
-  if (index) return
-  const json = (await localSearchIndex.root?.())?.default
-  if (json === undefined) return
-  index = MiniSearch.loadJSON(json, {
-    fields: ['title', 'titles', 'text'],
-    storeFields: ['title', 'titles'],
-    searchOptions: { fuzzy: 0.2, prefix: true, boost: { title: 4, text: 2, titles: 1 } },
-  })
-  ready.value = true
-}
-
-/** What kind of thing a page is, by the top folder it sits in. */
-const kinds: Record<string, string> = {
-  Guide: 'Guide',
-  Components: 'Component',
-  Patterns: 'Pattern',
-  Decisions: 'Decision',
-  'Foundations · Tokens': 'Foundation',
-}
-
-const folderOf = (node: NavNode) => node.path.map((folder) => folder.text).join('\\')
-
-/** The top folder a node sits in — or, for a top folder itself, its own name. */
-function groupOf(node: NavNode): string {
-  return node.path[0]?.text ?? (node.children.length > 0 ? node.text : 'Pages')
-}
-
-function flatten(nodes: NavNode[]): NavNode[] {
-  return nodes.flatMap((node) => [node, ...flatten(node.children)])
-}
-
-function firstPage(node: NavNode): string {
-  return flatten(node.children).find((child) => child.link !== undefined)?.link ?? '/'
-}
-
-/**
- * Finds pages and folders by name first, as «Find: Files and Folders» does,
- * then sections of pages by their text from VitePress's index.
- */
-export function find(query: string, tree: NavNode[]): FindResult[] {
-  const term = query.trim().toLowerCase()
-  if (term === '') return []
-
-  const nodes = flatten(tree)
-  const byName: FindResult[] = nodes
-    .filter((node) => node.text.toLowerCase().includes(term))
-    // Pages before folders, and names that start with the term first.
-    .sort(
-      (a, b) =>
-        Number(a.children.length > 0) - Number(b.children.length > 0) ||
-        Number(!a.text.toLowerCase().startsWith(term)) -
-          Number(!b.text.toLowerCase().startsWith(term))
-    )
-    .map((node) => {
-      const isFolder = node.children.length > 0
-      return {
-        id: `name:${node.id}`,
-        name: node.text,
-        folder: folderOf(node),
-        type: isFolder ? 'Folder' : (kinds[node.path[0]?.text ?? ''] ?? 'Page'),
-        href: withBase(isFolder ? firstPage(node) : (node.link ?? '/')),
-        group: groupOf(node),
-        trail: node.path.map((folder) => folder.text),
-        ...(isFolder
-          ? { pages: flatten(node.children).filter((child) => child.link !== undefined).length }
-          : {}),
-      }
-    })
-
-  const pageByPath = new Map(
-    nodes.filter((node) => node.link).map((node) => [node.link?.replace(/\/$/, ''), node])
-  )
-  /*
-   * Text matches are kept tight, as a Find window should be: every word must
-   * match, short words only as prefixes (a typo allowance on «datat» matches
-   * «data» everywhere), and sections far weaker than the best one dropped.
-   */
-  const hits =
-    index?.search(query, {
-      prefix: true,
-      fuzzy: term.length > 5 ? 0.2 : false,
-      combineWith: 'AND',
-    }) ?? []
-  const best = hits[0]?.score ?? 0
-  const bySection: FindResult[] = hits
-    .filter((hit) => hit.score >= best * 0.25)
-    .map((hit) => {
-      const [path = '', hash] = String(hit.id).split('#')
-      const page = pageByPath.get(path.replace(/\.html$/, '').replace(/\/$/, ''))
-      const section = hit as unknown as Section
-      return {
-        id: `text:${String(hit.id)}`,
-        name: section.title,
-        folder: page ? [folderOf(page), page.text].filter(Boolean).join('\\') : path,
-        type: hash ? 'Section' : 'Page',
-        href: withBase(String(hit.id)),
-        group: page ? groupOf(page) : 'Pages',
-        trail: page ? [...page.path.map((folder) => folder.text), page.text] : [],
-      }
-    })
-
-  const seen = new Set(byName.map((result) => result.href))
-  return [...byName, ...bySection.filter((result) => !seen.has(result.href))].slice(0, 50)
-}
-
-export { ready as indexReady }
-
-/** Pages as Spotlight lists them under «Recent»: the given paths, newest first. */
-export function recent(paths: string[], tree: NavNode[], limit = 3): FindResult[] {
-  const pages = flatten(tree).filter((node) => node.link !== undefined)
-  const out: FindResult[] = []
-  for (const path of [...paths].reverse()) {
-    const node = pages.find((page) => withBase(normalize(page.link ?? '')) === path)
-    if (!node || out.some((result) => result.id === `recent:${node.id}`)) continue
-    out.push({
-      id: `recent:${node.id}`,
-      name: node.text,
-      folder: folderOf(node),
-      type: 'Page',
-      href: withBase(node.link ?? '/'),
-      group: 'Recent',
-      trail: node.path.map((folder) => folder.text),
-    })
-    if (out.length === limit) break
-  }
-  return out
-}
diff --git a/docs/.vitepress/theme/components/site/useSiteNav.ts b/docs/.vitepress/theme/components/site/useSiteNav.ts
index 23a6706a..825c821f 100644
--- a/docs/.vitepress/theme/components/site/useSiteNav.ts
+++ b/docs/.vitepress/theme/components/site/useSiteNav.ts
@@ -1,7 +1,7 @@
-import { computed, ref } from 'vue'
-import { useData, useRoute, withBase, type DefaultTheme } from 'vitepress'
+import { computed } from 'vue'
+import { useData, type DefaultTheme } from 'vitepress'
 
-/** A folder or a page of the Explorer window's tree. */
+/** A group or a page of the sidebar tree. */
 export interface NavNode {
   /** Stable id: the link for a page, the folder path for a folder. */
   id: string
@@ -29,86 +29,17 @@ function build(items: DefaultTheme.SidebarItem[], path: NavNode[], prefix: strin
   })
 }
 
-function flatten(nodes: NavNode[]): NavNode[] {
-  return nodes.flatMap((node) => [node, ...flatten(node.children)])
-}
-
-/**
- * The site's navigation, read from the sidebar config: the tree, the page on
- * screen and where it sits in the tree.
- */
+/** The site's navigation as a tree, read from the sidebar config (the Components page lists from it). */
 export function useSiteNav() {
-  const { theme, page } = useData<DefaultTheme.Config>()
-  const route = useRoute()
-
+  const { theme } = useData<DefaultTheme.Config>()
   const tree = computed(() => {
     const sidebar = theme.value.sidebar
     return Array.isArray(sidebar) ? build(sidebar, [], '') : []
   })
-
-  const pages = computed(() => flatten(tree.value).filter((node) => node.link !== undefined))
-
-  const current = computed(() => {
-    const here = normalize(route.path)
-    return pages.value.find((node) => withBase(normalize(node.link ?? '')) === here)
-  })
-
-  /** `rowkit:\Components\Data\DataTable`, as the Explorer address bar shows it. */
-  const address = computed(() => {
-    const node = current.value
-    if (!node) return `rowkit:\\${page.value.title}`
-    return ['rowkit:', ...node.path.map((folder) => folder.text), node.text].join('\\')
-  })
-
-  /**
-   * Up: the nearest folder above. A folder with a page of its own — the
-   * Components overview — opens it; one without opens its first page that is
-   * not this one. Above the top folder is the desktop.
-   */
-  const up = computed(() => {
-    const node = current.value
-    if (!node) return '/'
-    for (const folder of [...node.path].reverse()) {
-      if (folder.link !== undefined) return folder.link
-      const first = flatten(folder.children).find((child) => child.link !== undefined)
-      if (first && first.id !== node.id) return first.link ?? '/'
-    }
-    return '/'
-  })
-
-  return { tree, pages, current, address, up }
-}
-
-/*
- * Back and Forward. The browser keeps the real history, but cannot say whether
- * there is anything to go back to, so the buttons would always look enabled.
- * This tracks the pages visited in this tab, which is what Explorer's buttons
- * reflect, and leaves the actual moving to the browser.
- */
-const visited = ref<string[]>([])
-const position = ref(-1)
-
-/** Every page opened in this tab, in order, for Spotlight's «Recent». */
-export const recentPaths = ref<string[]>([])
-
-/** Records a navigation. Called after every route change. */
-export function recordVisit(path: string, kind: 'push' | 'back' | 'forward'): void {
-  recentPaths.value = [...recentPaths.value.filter((seen) => seen !== path), path]
-  if (kind === 'back') position.value = Math.max(0, position.value - 1)
-  else if (kind === 'forward')
-    position.value = Math.min(visited.value.length - 1, position.value + 1)
-  else {
-    visited.value = [...visited.value.slice(0, position.value + 1), path]
-    position.value = visited.value.length - 1
-  }
+  return { tree }
 }
 
-export const canGoBack = computed(() => position.value > 0)
-export const canGoForward = computed(() => position.value < visited.value.length - 1)
-
-/** Whether `path` is the page one step back or forward, for popstate. */
-export function stepOf(path: string): 'back' | 'forward' | 'push' {
-  if (visited.value[position.value - 1] === path) return 'back'
-  if (visited.value[position.value + 1] === path) return 'forward'
-  return 'push'
+/** The folder of the tree with this text, or nothing. */
+export function folder(tree: NavNode[], text: string): NavNode | undefined {
+  return tree.find((node) => node.text === text)
 }
diff --git a/docs/.vitepress/theme/components/site/useSiteTheme.ts b/docs/.vitepress/theme/components/site/useSiteTheme.ts
index fcc1968f..b6114a9f 100644
--- a/docs/.vitepress/theme/components/site/useSiteTheme.ts
+++ b/docs/.vitepress/theme/components/site/useSiteTheme.ts
@@ -1,15 +1,17 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 /**
- * Which rowkit theme the site is drawn in, and its colour scheme.
+ * Which rowkit theme the site's live examples are drawn in, and their scheme.
  *
- * The site is one theme at a time, set on <html>: before the first paint by
- * the inline script in `config.ts` (so a reload never flashes the other
- * theme), then by the switch in the taskbar or menu bar. The choice is kept
- * in localStorage; `?theme=win98` in a link opens the site in that theme.
+ * The docs chrome is VitePress's, with its own light/dark switch. The rowkit
+ * theme — Windows 98 or modern — is the «Components» switch in the nav bar,
+ * set on <html> as an app sets it, so overlays teleported to <body> follow.
+ * The site starts in modern; `?theme=win98` in a link opens it in Windows 98.
+ * That is the site's choice, not the library's: rowkit's own default, without
+ * an attribute, is still Windows 98.
  *
- * The site opens in the modern theme. That is the site's choice, not the
- * library's: rowkit's own default, without an attribute, is still Windows 98.
+ * The scheme is VitePress's: its dark mode puts `data-color-scheme="dark"` on
+ * <html> too, so the modern examples turn dark with the page.
  */
 export type SiteTheme = 'win98' | 'modern'
 export type SiteScheme = 'system' | 'light' | 'dark'
@@ -17,43 +19,39 @@ export type SiteScheme = 'system' | 'light' | 'dark'
 // `-2` since the site opens in modern: a choice stored while Windows 98 was
 // the default is not kept, so every visitor starts in modern once.
 export const THEME_KEY = 'rowkit-theme-2'
-export const SCHEME_KEY = 'rowkit-scheme'
+/** VitePress's own key for its appearance switch. */
+const APPEARANCE_KEY = 'vitepress-theme-appearance'
 
 export const siteTheme = ref<SiteTheme>('modern')
-export const siteScheme = ref<SiteScheme>('system')
+const dark = ref(false)
+
+/** The examples' scheme, as the page draws it. */
+export const siteScheme = computed<SiteScheme>(() => (dark.value ? 'dark' : 'light'))
 
 /** Reads what the inline script set. Client only. */
 export function readSiteTheme(): void {
-  const root = document.documentElement
-  siteTheme.value = root.dataset.theme === 'win98' ? 'win98' : 'modern'
-  const scheme = root.dataset.colorScheme
-  siteScheme.value = scheme === 'light' || scheme === 'dark' ? scheme : 'system'
+  siteTheme.value = document.documentElement.dataset.theme === 'win98' ? 'win98' : 'modern'
 }
 
-function store(key: string, value: string): void {
+export function setSiteTheme(theme: SiteTheme): void {
+  siteTheme.value = theme
+  document.documentElement.dataset.theme = theme
   try {
-    localStorage.setItem(key, value)
+    localStorage.setItem(THEME_KEY, theme)
   } catch {
     // Private windows and blocked storage: the switch still works for this visit.
   }
 }
 
-export function setSiteTheme(theme: SiteTheme): void {
-  siteTheme.value = theme
-  document.documentElement.dataset.theme = theme
-  store(THEME_KEY, theme)
-}
-
-export function setSiteScheme(scheme: SiteScheme): void {
-  siteScheme.value = scheme
-  const root = document.documentElement
-  if (scheme === 'system') delete root.dataset.colorScheme
-  else root.dataset.colorScheme = scheme
-  store(SCHEME_KEY, scheme)
+/** Follows VitePress's dark mode. */
+export function setSiteDark(isDark: boolean): void {
+  dark.value = isDark
+  document.documentElement.dataset.colorScheme = isDark ? 'dark' : 'light'
 }
 
 /**
- * The script that sets the theme before the page paints, inlined into <head>.
- * Kept here, beside the keys it reads, so the two cannot drift.
+ * The script that sets the theme before the page paints, inlined into <head>
+ * beside VitePress's own appearance script. Kept here, beside the keys it
+ * reads, so the two cannot drift.
  */
-export const themeBootScript = `(function(){var r=document.documentElement,t,s;try{var q=new URLSearchParams(location.search);t=q.get('theme')||localStorage.getItem('${THEME_KEY}');s=q.get('scheme')||localStorage.getItem('${SCHEME_KEY}');if(q.get('theme'))localStorage.setItem('${THEME_KEY}',t);if(q.get('scheme'))localStorage.setItem('${SCHEME_KEY}',s)}catch(e){}r.dataset.theme=t==='win98'?'win98':'modern';if(s==='light'||s==='dark')r.dataset.colorScheme=s})()`
+export const themeBootScript = `(function(){var r=document.documentElement,t,a;try{var q=new URLSearchParams(location.search);t=q.get('theme')||localStorage.getItem('${THEME_KEY}');if(q.get('theme'))localStorage.setItem('${THEME_KEY}',t);a=localStorage.getItem('${APPEARANCE_KEY}')}catch(e){}r.dataset.theme=t==='win98'?'win98':'modern';var d=a==='dark'||((!a||a==='auto')&&matchMedia('(prefers-color-scheme: dark)').matches);r.dataset.colorScheme=d?'dark':'light'})()`
diff --git a/docs/.vitepress/theme/content.css b/docs/.vitepress/theme/content.css
deleted file mode 100644
index bd2cc314..00000000
--- a/docs/.vitepress/theme/content.css
+++ /dev/null
@@ -1,531 +0,0 @@
-/*
- * Page content in the Explorer window's "web view", from the Figma Site page:
- * body text 15/24, h2 18/22, a 16px rhythm between blocks, code in a sunken
- * white field, tips as small system-message panels, every table drawn like a
- * DataTable.
- *
- * In `components`: above VitePress's own `.vp-doc` rules (`vp-theme`), below
- * Tailwind utilities, so a live demo's own classes always win. Every selector
- * also stops at `.rk-demo`, so properties a component leaves unset do not
- * leak into it.
- */
-@layer components {
-  .rk-page {
-    font-family: var(--font-sans);
-    font-size: var(--text-doc);
-    line-height: var(--text-doc--line-height);
-    color: var(--color-foreground);
-  }
-
-  /* One rhythm: 16px between blocks, headings included. */
-  .rk-page
-    :where(h2, h3, h4, p, ul, ol, .rk-table, div[class*='language-'], .custom-block, hr):not(
-      .rk-demo *
-    ) {
-    margin: 16px 0 0;
-  }
-
-  /*
-   * Inside a live demo, VitePress's article styles step back. Its `.vp-doc`
-   * rules give every <p> 16px margins and a 28px line, underline and recolour
-   * every <a>, frame every table cell — and a component that leaves one of
-   * those properties unset would inherit it: a Field's hint drifting 30px
-   * below its input, a Button rendered as a link underlined. This layer sits
-   * after VitePress's and before the components' own utilities, so it
-   * clears the leak without overriding anything a component sets.
-   */
-  .rk-page .rk-demo :where(p, blockquote, h1, h2, h3, h4, h5, h6, ul, ol, hr, summary) {
-    margin: 0;
-  }
-
-  .rk-page .rk-demo :where(p, blockquote) {
-    line-height: inherit;
-  }
-
-  .rk-page .rk-demo :where(h1, h2, h3, h4, h5, h6) {
-    padding: 0;
-    border: 0;
-    font-size: inherit;
-    line-height: inherit;
-    font-weight: var(--font-weight-strong);
-    letter-spacing: 0;
-  }
-
-  .rk-page .rk-demo :where(a) {
-    color: inherit;
-    font-weight: inherit;
-    text-decoration: none;
-  }
-
-  .rk-page .rk-demo :where(strong) {
-    font-weight: var(--font-weight-strong);
-  }
-
-  .rk-page .rk-demo :where(ul, ol) {
-    padding-left: 0;
-    list-style: none;
-  }
-
-  .rk-page .rk-demo :where(li + li) {
-    margin-top: 0;
-  }
-
-  .rk-page .rk-demo :where(table) {
-    display: table;
-    margin: 0;
-    overflow: visible;
-  }
-
-  .rk-page .rk-demo :where(tr, th, td) {
-    border: 0;
-    background: none;
-  }
-
-  .rk-page .rk-demo :where(th, td) {
-    padding: 0;
-    font-size: inherit;
-    line-height: inherit;
-    font-weight: inherit;
-    color: inherit;
-  }
-
-  .rk-page .rk-demo :where(:not(pre) > code) {
-    padding: 0;
-    border-radius: 0;
-    background: none;
-    font-size: inherit;
-    color: inherit;
-  }
-
-  /* The page's own h1 is the header above the content. */
-  .rk-page h1:not(.rk-demo *) {
-    display: none;
-  }
-
-  .rk-page :where(h2):not(.rk-demo *) {
-    padding: 0;
-    border: 0;
-    font-size: var(--text-doc-h2);
-    line-height: var(--text-doc-h2--line-height);
-    font-weight: var(--font-weight-strong);
-    letter-spacing: 0;
-  }
-
-  .rk-page :where(h3, h4):not(.rk-demo *) {
-    font-size: var(--text-doc-h3);
-    line-height: var(--text-doc-h3--line-height);
-    font-weight: var(--font-weight-strong);
-    letter-spacing: 0;
-  }
-
-  .rk-page :where(h2, h3, h4) .header-anchor {
-    display: none;
-  }
-
-  .rk-page :where(p, li):not(.rk-demo *) {
-    font-size: var(--text-doc);
-    line-height: var(--text-doc--line-height);
-  }
-
-  .rk-page :where(li + li):not(.rk-demo *) {
-    margin-top: 0;
-  }
-
-  .rk-page :where(a):not(.rk-demo *, .header-anchor) {
-    color: var(--color-link);
-    text-decoration: underline;
-    font-weight: inherit;
-  }
-
-  /* An etched line. */
-  .rk-page hr:not(.rk-demo *) {
-    height: 2px;
-    border: 0;
-    box-shadow:
-      inset 0 1px var(--color-bevel-shadow),
-      inset 0 -1px var(--color-bevel-highlight);
-  }
-
-  /* Inline code: the mono face at its own size, no pill. */
-  .rk-page :where(:not(pre) > code):not(.rk-demo *) {
-    padding: 0;
-    border-radius: 0;
-    background: none;
-    font-family: var(--font-mono);
-    font-size: var(--text-doc-mono);
-    color: inherit;
-  }
-
-  /* Keys, as the Figma keyboard list sets them: the mono face, no keycap. */
-  .rk-page kbd:not(.rk-demo *) {
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    background: none;
-    box-shadow: none;
-    font-family: var(--font-mono);
-    font-size: var(--text-doc-mono);
-    line-height: var(--text-doc-mono--line-height);
-    color: inherit;
-  }
-
-  /*
-   * Code blocks: a sunken white field, VT323 16/16 in black — Notepad has no
-   * syntax colours — and Copy at the top right. Long lines scroll with the
-   * Windows 98 bar.
-   */
-  .rk-page div[class*='language-']:not(.rk-demo *) {
-    position: relative;
-    margin-left: 0;
-    margin-right: 0;
-    border-radius: var(--radius-lg);
-    background: var(--color-input);
-    box-shadow: var(--shadow-table);
-  }
-
-  .rk-page div[class*='language-'] pre {
-    @apply scrollbar-themed;
-    /*
-     * The code scrolls in its own column, which stops short of Copy — 75px
-     * and 4px in, 8px between, as Figma lays them side by side — so a long
-     * line scrolls beside the button rather than under it.
-     */
-    margin: 0 87px 0 0;
-    padding: 8px 0 8px 12px;
-    background: none;
-  }
-
-  .rk-page div[class*='language-'] code {
-    padding: 0;
-    font-family: var(--font-mono);
-    font-size: var(--text-doc-mono);
-    line-height: var(--text-doc-mono--line-height);
-    color: var(--color-foreground);
-  }
-
-  .rk-page div[class*='language-'] > span.lang {
-    display: none;
-  }
-
-  /* VitePress's copy button, redrawn as a 75×21 command button: icon and «Copy». */
-  .rk-page div[class*='language-'] > button.copy {
-    top: 8px;
-    right: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    width: 75px;
-    height: 21px;
-    border: 0;
-    border-radius: var(--radius-sm);
-    opacity: 1;
-    background: var(--color-control) url('/icons/copy-16.svg') no-repeat 13px center;
-    box-shadow: var(--shadow-raised);
-    font-family: var(--font-sans);
-    font-size: var(--text-ui);
-    color: var(--color-foreground);
-  }
-
-  /*
-   * The label rides on ::before, which VitePress also uses for its floating
-   * «Copied» bubble — reset that bubble's box and offset so the word stays in
-   * the button.
-   */
-  .rk-page div[class*='language-'] > button.copy::before {
-    content: 'Copy';
-    position: static;
-    top: auto;
-    /* VitePress slides its «Copied» bubble out to the left of the button. */
-    transform: none;
-    width: auto;
-    height: auto;
-    padding: 0 0 0 20px;
-    border: 0;
-    border-radius: 0;
-    background: none;
-    box-shadow: none;
-    font-size: var(--text-ui);
-    line-height: var(--text-ui--line-height);
-    color: var(--color-foreground);
-  }
-
-  .rk-page div[class*='language-'] > button.copy.copied {
-    border-radius: 0;
-    background-image: url('/icons/copy-16.svg');
-  }
-
-  .rk-page div[class*='language-'] > button.copy.copied::before {
-    content: 'Copied';
-  }
-
-  .rk-page div[class*='language-'] > button.copy.copied::after {
-    display: none;
-  }
-
-  .rk-page div[class*='language-'] > button.copy:active {
-    box-shadow: var(--shadow-pressed);
-    padding: 1px 0 0 1px;
-  }
-
-  /*
-   * Modern (Figma Site/CodeBlock): 12px and 14px in, and Copy as a 74×28
-   * secondary button with the modern copy glyph.
-   */
-  /* As tall as Copy and its margins, so a one-line block still holds the button. */
-  [data-theme='modern'] .rk-page div[class*='language-']:not(.rk-demo *) {
-    min-height: 52px;
-  }
-
-  [data-theme='modern'] .rk-page div[class*='language-'] pre {
-    margin-right: 96px;
-    padding: 12px 0 12px 14px;
-  }
-
-  [data-theme='modern'] .rk-page div[class*='language-'] > button.copy {
-    top: 12px;
-    right: 14px;
-    width: 74px;
-    height: 28px;
-    border-radius: 7px;
-    background-image: none;
-    color: var(--color-control-foreground);
-  }
-
-  [data-theme='modern'] .rk-page div[class*='language-'] > button.copy::before {
-    color: var(--color-control-foreground);
-  }
-
-  [data-theme='modern'] .rk-page div[class*='language-'] > button.copy::after,
-  [data-theme='modern'] .rk-page div[class*='language-'] > button.copy.copied::after {
-    content: '';
-    position: absolute;
-    top: 7px;
-    left: 12px;
-    display: block;
-    width: 14px;
-    height: 14px;
-    background: currentColor;
-    mask: var(--rk-icon-copy) no-repeat center / contain;
-  }
-
-  [data-theme='modern'] .rk-page div[class*='language-'] > button.copy:active {
-    padding: 0;
-  }
-
-  /*
-   * Tips, warnings and dangers: a system-message panel in the window bevel,
-   * the 32px icon at the left, a bold 13px title over the text.
-   */
-  .rk-page .custom-block:not(.rk-demo *) {
-    position: relative;
-    padding: 12px 12px 12px 56px;
-    border: 0;
-    border-radius: var(--radius-lg);
-    background: var(--color-card) no-repeat 12px 12px;
-    box-shadow: var(--shadow-window);
-    color: var(--color-foreground);
-  }
-
-  .rk-page .custom-block.tip,
-  .rk-page .custom-block.info {
-    background-image: url('/icons/info-32.svg');
-  }
-
-  .rk-page .custom-block.warning {
-    background-image: url('/icons/warning-32.svg');
-  }
-
-  .rk-page .custom-block.danger {
-    background-image: url('/icons/error-32.svg');
-  }
-
-  .rk-page .custom-block p {
-    margin: 0;
-    color: var(--color-foreground);
-  }
-
-  .rk-page .custom-block p.custom-block-title {
-    margin-bottom: 4px;
-    font-size: var(--text-heading);
-    line-height: var(--text-heading--line-height);
-    font-weight: var(--font-weight-strong);
-  }
-
-  .rk-page .custom-block p + p {
-    margin-top: 4px;
-  }
-
-  /*
-   * Modern (Figma Site/Callout): a tinted panel with a 1px border, a 20px icon
-   * in the tone's colour, the title small and coloured over the text.
-   */
-  [data-theme='modern'] .rk-page .custom-block:not(.details, .rk-demo *) {
-    --rk-callout-tone: var(--color-primary-solid);
-    --rk-callout-title: var(--color-primary-on-subtle);
-    --rk-callout-glyph: var(--rk-icon-info);
-    padding: 14px 16px 14px 48px;
-    border: 1px solid var(--color-primary-border);
-    border-radius: 10px;
-    background: var(--color-primary-subtle);
-    box-shadow: none;
-  }
-
-  [data-theme='modern'] .rk-page .custom-block:not(.details, .rk-demo *)::before {
-    content: '';
-    position: absolute;
-    top: 14px;
-    left: 16px;
-    width: 20px;
-    height: 20px;
-    background: var(--rk-callout-tone);
-    mask: var(--rk-callout-glyph) no-repeat center / contain;
-  }
-
-  [data-theme='modern'] .rk-page .custom-block.warning:not(.rk-demo *) {
-    --rk-callout-tone: var(--color-warning-solid);
-    --rk-callout-title: var(--color-warning-on-subtle);
-    --rk-callout-glyph: var(--rk-icon-warning);
-    border-color: var(--color-warning-border);
-    background: var(--color-warning-subtle);
-  }
-
-  [data-theme='modern'] .rk-page .custom-block.danger:not(.rk-demo *) {
-    --rk-callout-tone: var(--color-danger-solid);
-    --rk-callout-title: var(--color-danger-on-subtle);
-    --rk-callout-glyph: var(--rk-icon-error);
-    border-color: var(--color-danger-border);
-    background: var(--color-danger-subtle);
-  }
-
-  [data-theme='modern'] .rk-page .custom-block p.custom-block-title {
-    margin-bottom: 2px;
-    font-size: var(--text-ui);
-    line-height: var(--text-ui--line-height);
-    color: var(--rk-callout-title);
-  }
-
-  /*
-   * Markdown tables as DataTables: a sunken white frame, raised 22px header
-   * cells, 11px text, no grid lines.
-   */
-  .rk-page .rk-table:not(.rk-demo *) {
-    @apply scrollbar-themed;
-    overflow-x: auto;
-  }
-
-  .rk-page table:not(.rk-demo *) {
-    display: table;
-    width: 100%;
-    margin: 0;
-    border: 0;
-    border-collapse: separate;
-    border-spacing: 0;
-    padding: var(--spacing-frame);
-    border-radius: var(--radius-lg);
-    background: var(--color-input);
-    box-shadow: var(--shadow-table);
-    font-size: var(--text-ui);
-    line-height: var(--text-ui--line-height);
-  }
-
-  .rk-page :where(th, td):not(.rk-demo *) {
-    padding: 4px 6px;
-    border: 0;
-    background: none;
-    font-size: var(--text-ui);
-    line-height: var(--text-ui--line-height);
-    text-align: left;
-    vertical-align: middle;
-  }
-
-  .rk-page th:not(.rk-demo *) {
-    height: 22px;
-    padding-top: 0;
-    padding-bottom: 0;
-    background: var(--color-table-header);
-    box-shadow: var(--shadow-header);
-    font-weight: 400;
-    color: var(--color-table-header-foreground);
-    white-space: nowrap;
-  }
-
-  .rk-page tr:not(.rk-demo *) {
-    border: 0;
-    background: none;
-  }
-
-  .rk-page :where(td code):not(.rk-demo *) {
-    font-size: var(--text-mono);
-  }
-
-  /*
-   * A props table on a phone: the definition list Figma draws at 390px. The
-   * name in bold and the type in the mono face on one line — the default
-   * after it, «= 'md'» — and the description under them in body text.
-   */
-  @media (max-width: 767px) {
-    .rk-page .rk-props table:not(.rk-demo *) {
-      display: block;
-      padding: 0;
-      background: none;
-      box-shadow: none;
-    }
-
-    .rk-page .rk-props table thead {
-      display: none;
-    }
-
-    .rk-page .rk-props table tbody {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .rk-page .rk-props table tr {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      gap: 2px 8px;
-    }
-
-    .rk-page .rk-props table td {
-      padding: 0;
-    }
-
-    .rk-page .rk-props table td[data-label='Prop'],
-    .rk-page .rk-props table td[data-label='Prop'] code {
-      font-family: var(--font-sans);
-      font-size: var(--text-ui);
-      line-height: var(--text-ui--line-height);
-      font-weight: var(--font-weight-strong);
-    }
-
-    .rk-page .rk-props table :where(td[data-label='Type'], td[data-label='Default']),
-    .rk-page .rk-props table :where(td[data-label='Type'], td[data-label='Default']) code {
-      font-family: var(--font-mono);
-      font-size: var(--text-mono);
-      line-height: var(--text-mono--line-height);
-      color: var(--color-text-subtle);
-    }
-
-    .rk-page .rk-props table td[data-label='Default']::before {
-      content: '= ';
-    }
-
-    .rk-page .rk-props table td[data-empty] {
-      display: none;
-    }
-
-    /* «required» is not a default; it reads as itself, without the «=». */
-    .rk-page .rk-props table td[data-label='Default']:has(strong)::before {
-      content: none;
-    }
-
-    .rk-page .rk-props table td[data-label='Description'] {
-      flex-basis: 100%;
-      font-size: var(--text-doc);
-      line-height: var(--text-doc--line-height);
-    }
-  }
-}
diff --git a/docs/.vitepress/theme/docs.css b/docs/.vitepress/theme/docs.css
new file mode 100644
index 00000000..bb942840
--- /dev/null
+++ b/docs/.vitepress/theme/docs.css
@@ -0,0 +1,186 @@
+/*
+ * rowkit.dev's docs: VitePress's default theme with the brand on it — the
+ * vermilion accent on links, the active sidebar item and the outline marker,
+ * the logo, a 15px sidebar. The chrome is the brand's, in light and dark; the
+ * live examples inside it are drawn in whichever rowkit theme the nav bar's
+ * «Components» switch picks.
+ *
+ * In `components`: above VitePress's own rules (`vp-theme`, see config.ts),
+ * below Tailwind utilities, so a demo's own classes always win.
+ */
+
+/* The brand (Figma Brand — rowkit, Colour). Text in vermilion clears 4.5:1 on paper and on night. */
+:root {
+  --vp-c-brand-1: #c8361c;
+  --vp-c-brand-2: #b32e16;
+  --vp-c-brand-3: #d63a1f;
+  --vp-c-brand-soft: rgb(214 58 31 / 0.12);
+  --vp-button-brand-bg: #d63a1f;
+  --vp-button-brand-hover-bg: #b32e16;
+  --vp-button-brand-active-bg: #b32e16;
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
+  /*
+   * Inline code a shade deeper than the links: brand-1 is 4.3:1 on the code's
+   * grey, brand-2 5.2:1. The code block's language label at text-2, not text-3
+   * (2.9:1).
+   */
+  --vp-code-color: var(--vp-c-brand-2);
+  --vp-code-lang-color: var(--vp-c-text-2);
+}
+
+.dark {
+  --vp-c-brand-1: #f0846e;
+  --vp-c-brand-2: #e8735b;
+  --vp-c-brand-3: #d63a1f;
+  --vp-c-brand-soft: rgb(214 58 31 / 0.16);
+  --vp-code-color: var(--vp-c-brand-1);
+}
+
+@layer components {
+  /* The sidebar a size up from VitePress's 14px, so the tree reads without squinting. */
+  .VPSidebarItem .text {
+    font-size: 15px;
+    line-height: 22px;
+  }
+
+  /*
+   * Inside a live demo, VitePress's article styles step back. Its `.vp-doc`
+   * rules give every <p> margins and a 28px line, underline and recolour every
+   * <a>, frame every table cell — and a component that leaves one of those
+   * properties unset would inherit it. This layer sits after VitePress's and
+   * before the components' own utilities, so it clears the leak without
+   * overriding anything a component sets.
+   */
+  .vp-doc .rk-demo :where(p, blockquote, h1, h2, h3, h4, h5, h6, ul, ol, hr, summary) {
+    margin: 0;
+  }
+
+  .vp-doc .rk-demo :where(p, blockquote) {
+    line-height: inherit;
+  }
+
+  .vp-doc .rk-demo :where(h1, h2, h3, h4, h5, h6) {
+    padding: 0;
+    border: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: var(--font-weight-strong);
+    letter-spacing: 0;
+  }
+
+  .vp-doc .rk-demo :where(a) {
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: none;
+  }
+
+  .vp-doc .rk-demo :where(strong) {
+    font-weight: var(--font-weight-strong);
+  }
+
+  .vp-doc .rk-demo :where(ul, ol) {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  .vp-doc .rk-demo :where(li + li) {
+    margin-top: 0;
+  }
+
+  .vp-doc .rk-demo :where(table) {
+    display: table;
+    margin: 0;
+    overflow: visible;
+  }
+
+  .vp-doc .rk-demo :where(tr, th, td) {
+    border: 0;
+    background: none;
+  }
+
+  .vp-doc .rk-demo :where(th, td) {
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    color: inherit;
+  }
+
+  .vp-doc .rk-demo :where(:not(pre) > code) {
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  /*
+   * A demo is its own stacking context. rowkit's z-index scale assumes rowkit
+   * is the page's chrome (a table's frame and sticky header sit at 100); here
+   * it is the guest, under VitePress's nav bar at 30.
+   */
+  .rk-demo {
+    isolation: isolate;
+  }
+
+  /*
+   * A props table on a phone: name in bold and type in mono on one line — the
+   * default after it, «= 'md'» — and the description under them. The cells
+   * carry their column's header as `data-label` (see tables.ts).
+   */
+  @media (max-width: 767px) {
+    .vp-doc .rk-props table {
+      display: block;
+      border: 0;
+    }
+
+    .vp-doc .rk-props table thead {
+      display: none;
+    }
+
+    .vp-doc .rk-props table tbody {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .vp-doc .rk-props table tr {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 2px 8px;
+      border: 0;
+      background: none;
+    }
+
+    .vp-doc .rk-props table td {
+      padding: 0;
+      border: 0;
+    }
+
+    .vp-doc .rk-props table td[data-label='Prop'] code {
+      font-weight: 600;
+    }
+
+    .vp-doc .rk-props table :where(td[data-label='Type'], td[data-label='Default']) {
+      color: var(--vp-c-text-2);
+    }
+
+    .vp-doc .rk-props table td[data-label='Default']::before {
+      content: '= ';
+    }
+
+    .vp-doc .rk-props table td[data-empty] {
+      display: none;
+    }
+
+    /* «required» is not a default; it reads as itself, without the «=». */
+    .vp-doc .rk-props table td[data-label='Default']:has(strong)::before {
+      content: none;
+    }
+
+    .vp-doc .rk-props table td[data-label='Description'] {
+      flex-basis: 100%;
+    }
+  }
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 977fe7e2..2f8c1c80 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -6,7 +6,7 @@ import BevelTiles from './components/BevelTiles.vue'
 import ColorList from './components/ColorList.vue'
 import ColorPalette from './components/ColorPalette.vue'
 import DemoBox from './components/DemoBox.vue'
-import SiteLayout from './components/site/SiteLayout.vue'
+import SiteShell from './components/site/SiteShell.vue'
 import NpmVersion from './components/NpmVersion.vue'
 import TokenGrid from './components/TokenGrid.vue'
 import TokenTable from './components/TokenTable.vue'
@@ -28,7 +28,7 @@ import './tokens.css'
  */
 export default {
   extends: DefaultTheme,
-  Layout: SiteLayout,
+  Layout: SiteShell,
   enhanceApp({ app }) {
     for (const [name, value] of Object.entries(rowkit)) {
       // Every component export is PascalCase; the composables, the `cn` helper
diff --git a/docs/.vitepress/theme/landing.css b/docs/.vitepress/theme/landing.css
new file mode 100644
index 00000000..759a2d55
--- /dev/null
+++ b/docs/.vitepress/theme/landing.css
@@ -0,0 +1,162 @@
+/*
+ * rowkit.dev's landing page (Figma Site v2, Landing): the site's own values
+ * for it, per theme. Everything else on the page is a rowkit token.
+ *
+ * Windows 98 is the page without an attribute, as it is for rowkit: VGA
+ * colours, no brand on the page itself. The modern theme carries the brand —
+ * paper or night under the page, vermilion on the accents and the main
+ * buttons (Figma Brand — rowkit, Colour).
+ */
+:root {
+  --lp-page: var(--color-background);
+  /* The few words a section stresses: VGA navy. */
+  --lp-accent: #000080;
+  --lp-link: var(--color-link);
+
+  /* `site/code-*` in Figma, Windows 98: the VGA palette on white. */
+  --lp-code-fg: #000;
+  --lp-code-bg: #fff;
+  --lp-code-keyword: #0000ff;
+  --lp-code-string: #800000;
+  --lp-code-number: #008080;
+  --lp-code-comment: #008000;
+  --lp-code-tag: #000080;
+  --lp-code-attr: #008080;
+}
+
+:root[data-theme='modern'] {
+  --lp-page: #fafaf8;
+  /*
+   * Vermilion as text is a shade deeper than the brand's own (4.5:1 on paper,
+   * a hair short): 5.0:1 on paper, 5.3:1 on white — the docs' link colour.
+   */
+  --lp-accent: #c8361c;
+  --lp-accent-soft: #fbe7e2;
+  /* Text on the soft fill (the hero's badge): vermilion-strong, 5.3:1. */
+  --lp-accent-on-soft: #b32e16;
+  --lp-link: var(--lp-accent);
+
+  --lp-code-fg: #1d1d1f;
+  --lp-code-bg: #fff;
+  --lp-code-keyword: #9b2393;
+  --lp-code-string: #c41a16;
+  --lp-code-number: #1c00cf;
+  --lp-code-comment: #5d6c79;
+  --lp-code-tag: #0b4f79;
+  --lp-code-attr: #815f03;
+}
+
+:root[data-theme='modern'][data-color-scheme='dark'] {
+  --lp-page: #0b0b0d;
+  /* Vermilion itself is 4.2:1 on night: fine for the headline, short for small text. */
+  --lp-accent: #f0846e;
+  --lp-accent-soft: rgb(214 58 31 / 0.18);
+  --lp-accent-on-soft: #f0846e;
+
+  --lp-code-fg: #f5f5f7;
+  --lp-code-bg: #1c1c1e;
+  --lp-code-keyword: #fc5fa3;
+  --lp-code-string: #fc6a5d;
+  --lp-code-number: #d0bf69;
+  --lp-code-comment: #7f8c98;
+  --lp-code-tag: #5dd8ff;
+  --lp-code-attr: #ffa14f;
+}
+
+/*
+ * The main buttons in vermilion: the modern theme's primary button, its
+ * colour tokens set to the brand's on the button itself. White on vermilion: 4.7:1.
+ */
+:root[data-theme='modern'] .lp-brand {
+  --color-control-primary: #d63a1f;
+  --color-control-primary-hover: #c43319;
+  --color-control-primary-active: #b32e16;
+  --color-control-primary-foreground: #fff;
+}
+
+.lp-headline-accent {
+  color: inherit;
+}
+
+:root[data-theme='modern'] .lp-headline-accent {
+  color: #d63a1f;
+}
+
+/* Code: 14/22 in the modern theme; VT323 reads small, so a size up in Windows 98. */
+.lp-code {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+:root:not([data-theme='modern']) .lp-code {
+  font-size: 18px;
+  line-height: 22px;
+}
+
+.lp-code-keyword {
+  color: var(--lp-code-keyword);
+}
+
+.lp-code-string {
+  color: var(--lp-code-string);
+}
+
+.lp-code-number {
+  color: var(--lp-code-number);
+}
+
+.lp-code-comment {
+  color: var(--lp-code-comment);
+}
+
+.lp-code-tag {
+  color: var(--lp-code-tag);
+}
+
+.lp-code-attr {
+  color: var(--lp-code-attr);
+}
+
+/*
+ * VitePress's chrome on the landing page. Unlayered, like VitePress's own
+ * component styles, which these have to beat.
+ *
+ * The nav bar takes the page's colour, so it reads as one surface with the
+ * hero: paper or night in the modern theme, silver in Windows 98. Windows 98
+ * has no dark scheme; in VitePress's dark mode its nav bar keeps its own dark
+ * colour, and is solid even at the top of the page, where VitePress would make
+ * it transparent over the silver.
+ */
+html[data-theme='modern']:has(.lp),
+html:not(.dark):has(.lp) {
+  --vp-c-bg: var(--lp-page);
+  --vp-nav-bg-color: var(--lp-page);
+}
+
+html.dark:not([data-theme='modern']) .VPNavBar.home.top {
+  background-color: var(--vp-nav-bg-color);
+}
+
+/* The landing ends in its own footer: no gap under it for VitePress's. */
+.VPContent .VPHome:has(.lp) {
+  margin-bottom: 0;
+}
+
+/*
+ * Under the nav bar once the page scrolls: VitePress's divider in the modern
+ * theme, a bevel's lower edge in Windows 98 (Figma SiteV2/Header).
+ */
+html[data-theme='modern'] .VPNavBar.home:not(.top) {
+  box-shadow: 0 1px var(--vp-c-divider);
+}
+
+html:not([data-theme='modern']):not(.dark) .VPNavBar.home:not(.top) {
+  box-shadow:
+    0 1px #808080,
+    0 2px #fff;
+}
+
+/* Code in a line of text: VT323 is small for its size, so a step up in Windows 98. */
+:root:not([data-theme='modern']) .lp :not(pre) > code:not(.lp-code) {
+  font-size: 1.25em;
+}
diff --git a/docs/.vitepress/theme/modern.css b/docs/.vitepress/theme/modern.css
deleted file mode 100644
index 416ccf51..00000000
--- a/docs/.vitepress/theme/modern.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * The docs site in the modern theme: the parts of its chrome that are plain
- * CSS rather than utilities. Everything here is scoped to the modern theme;
- * the Windows 98 site is untouched by this file.
- */
-
-/*
- * The wallpaper (Figma SiteModern/Wallpaper): the desktop colour under three
- * blurred ellipses, drawn by SiteWallpaper. Their colours, light and dark.
- */
-[data-theme='modern'] .rk-desktop {
-  background: var(--color-desktop);
-  --rk-wallpaper-a: var(--color-modern-white);
-  --rk-wallpaper-b: var(--color-modern-blue);
-  --rk-wallpaper-c: var(--color-modern-blue-link-dark);
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-theme='modern']:not([data-color-scheme='light']) .rk-desktop {
-    --rk-wallpaper-a: #22345f;
-    --rk-wallpaper-c: #4b2f7a;
-  }
-}
-
-[data-theme='modern'][data-color-scheme='dark'] .rk-desktop {
-  --rk-wallpaper-a: #22345f;
-  --rk-wallpaper-c: #4b2f7a;
-}
-
-/* The home page's live demo: narrower Name and Seats columns, to fit inside the window's margins. */
-[data-theme='modern'] {
-  --rk-demo-name-width: 144px;
-  --rk-demo-seats-width: 64px;
-}
-
-/* The Terminal on the home page: the same in light and dark. */
-[data-theme='modern'] {
-  --rk-terminal-bg: #1e1e1e;
-  --rk-terminal-fg: #e5e5e7;
-}
-
-/*
- * The menu bar: translucent, a hairline under it, no bevel. The glass is drawn
- * by a layer behind its content rather than by the bar itself: an element with
- * a backdrop filter is the backdrop of everything inside it, and the menus
- * that drop from the bar would blur only the bar.
- */
-[data-theme='modern'] .rk-taskbar {
-  position: relative;
-  background: none;
-  box-shadow: inset 0 -1px 0 var(--color-border);
-}
-
-[data-theme='modern'] .rk-taskbar::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: var(--color-popover);
-  backdrop-filter: var(--rk-popover-backdrop);
-}
-
-/* Menu-bar items (Figma SiteModern/MenuBarItem): rounded ghost buttons, grey while open. */
-:root[data-theme='modern'] .rk-bar-item {
-  padding: 0 8px;
-  border-radius: 5px;
-}
-
-:root[data-theme='modern'] .rk-bar-item:hover {
-  background: var(--color-control-ghost-hover);
-  box-shadow: none;
-}
-
-:root[data-theme='modern'] .rk-bar-item-open,
-:root[data-theme='modern'] .rk-bar-item-open:hover {
-  background: var(--color-control-ghost-active);
-  box-shadow: none;
-}
-
-:root[data-theme='modern'] .rk-bar-item:focus-visible:not(.rk-bar-item-open) {
-  background: none;
-  color: var(--color-foreground);
-  outline: var(--rk-focus-outer-width) solid var(--color-focus-ring);
-  outline-offset: var(--rk-focus-outer-offset);
-}
-
-/*
- * The folder tree as a sidebar (Figma SiteModern/SidebarItem): the whole row
- * is the selection, drawn on the row in FolderTree; the label is plain text.
- */
-:root[data-theme='modern'] .rk-tree-label,
-:root[data-theme='modern'] .rk-tree-label-selected {
-  padding: 0;
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme='modern'] li[role='treeitem']:focus-visible > .rk-tree-label {
-  outline: none;
-}
-
-/* Code colours, as a current IDE draws them: light, and dark. */
-[data-theme='modern'] {
-  --rk-code-fg: var(--color-foreground);
-  --rk-code-bg: var(--color-input);
-  --rk-code-comment: #5d6c79;
-  --rk-code-keyword: #9b2393;
-  --rk-code-string: #c41a16;
-  --rk-code-number: #1c00cf;
-  --rk-code-tag: #0b4f79;
-  --rk-code-attribute: #815f03;
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-theme='modern']:not([data-color-scheme='light']) {
-    --rk-code-comment: #7f8c98;
-    --rk-code-keyword: #fc5fa3;
-    --rk-code-string: #fc6a5d;
-    --rk-code-number: #d0bf69;
-    --rk-code-tag: #5dd8ff;
-    --rk-code-attribute: #ffa14f;
-  }
-}
-
-[data-theme='modern'][data-color-scheme='dark'] {
-  --rk-code-comment: #7f8c98;
-  --rk-code-keyword: #fc5fa3;
-  --rk-code-string: #fc6a5d;
-  --rk-code-number: #d0bf69;
-  --rk-code-tag: #5dd8ff;
-  --rk-code-attribute: #ffa14f;
-}
diff --git a/docs/.vitepress/theme/tokens.css b/docs/.vitepress/theme/tokens.css
index e552bbcf..9a0b66b3 100644
--- a/docs/.vitepress/theme/tokens.css
+++ b/docs/.vitepress/theme/tokens.css
@@ -1,13 +1,7 @@
 /*
- * The docs site brands itself from rowkit's own tokens.
- *
- * VitePress's default theme is entirely CSS-variable driven, so mapping its
- * brand slots onto `@rowkit/tokens` means the site is a consumer of the package
- * it documents. If a token changes, the site changes — there is no second
- * palette to keep in sync, and no screenshot to go stale.
- *
- * Tailwind and rowkit's theme are imported here too, because the live demos on
- * component pages are real rowkit components and need real rowkit utilities.
+ * Tailwind and rowkit's theme, because the live demos on the docs pages are
+ * real rowkit components and need real rowkit utilities. The docs chrome is
+ * VitePress's default theme with the brand on it — see docs.css.
  *
  * The `vp-theme` layer order is *not* set here. It rides on the wrapped
  * VitePress CSS in `config.ts`, which lands above this file in the bundle — an
@@ -16,15 +10,14 @@
 
 @import 'tailwindcss';
 @import '../../../packages/ui/src/styles/index.css';
-@import './content.css';
-@import './modern.css';
+@import './docs.css';
+@import './landing.css';
 
 /*
- * The site is drawn in one rowkit theme at a time, set on <html> (see
- * `useSiteTheme.ts`). rowkit's components follow the theme through their
- * tokens; the site's own chrome — the taskbar that becomes a menu bar, the
- * Explorer toolbar that becomes Finder's — is styled per theme with these.
- * They are the site's, not rowkit's: a library cannot assume one theme per page.
+ * The live examples are drawn in one rowkit theme at a time, set on <html>
+ * (see `useSiteTheme.ts`). These variants style the site's own pieces per
+ * theme — the landing page above all. They are the site's, not rowkit's: a
+ * library cannot assume one theme per page.
  */
 @custom-variant modern (&:where([data-theme='modern'], [data-theme='modern'] *));
 @custom-variant win98 (&:where(:root:not([data-theme='modern']), :root:not([data-theme='modern']) *));
@@ -122,28 +115,3 @@
 .rk-demo thead tr {
   z-index: 1;
 }
-
-:root {
-  --vp-font-family-base: var(--font-sans);
-  --vp-font-family-mono: var(--font-mono);
-
-  --vp-c-brand-1: var(--color-primary-solid);
-  --vp-c-brand-2: var(--color-link);
-  --vp-c-brand-3: var(--color-titlebar-to);
-  --vp-c-brand-soft: var(--color-border-subtle);
-
-  --vp-c-bg: var(--color-background);
-  --vp-c-bg-alt: var(--color-muted);
-  --vp-c-bg-soft: var(--color-muted);
-
-  --vp-c-text-1: var(--color-foreground);
-  --vp-c-text-2: var(--color-muted-foreground);
-  --vp-c-text-3: var(--color-text-subtle);
-
-  --vp-c-divider: var(--color-border);
-  --vp-c-gutter: var(--color-border);
-
-  --vp-button-brand-bg: var(--color-primary-solid);
-  --vp-button-brand-hover-bg: var(--color-primary-solid-hover);
-  --vp-button-brand-text: var(--color-primary-on-solid);
-}
diff --git a/docs/index.md b/docs/index.md
index 68800ece..21215608 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,6 +4,13 @@ title: rowkit
 # The browser tab: the brand's line from the link preview (og-image.png).
 titleTemplate: ':title — Vue 3 components for product interfaces'
 description: A professional Vue 3 toolkit — the components a product interface is built from.
+# The landing page is its own: no article styles round it, and its own footer.
+markdownStyles: false
+footer: false
 ---
 
-<!-- The home page is the desktop in theme/components/home/DesktopHome.vue. -->
+<script setup>
+import LandingPage from './.vitepress/theme/components/landing/LandingPage.vue'
+</script>
+
+<LandingPage />
diff --git a/docs/public/icons/copy-16.svg b/docs/public/icons/copy-16.svg
deleted file mode 100644
index 4bea8bde..00000000
--- a/docs/public/icons/copy-16.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M0 0h8v1h-8zM0 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM5 3h8v1h-8zM0 4h1v1h-1zM5 4h1v1h-1zM12 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM12 5h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM12 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM12 7h1v1h-1zM0 8h6v1h-6zM12 8h1v1h-1zM5 9h1v1h-1zM12 9h1v1h-1zM5 10h1v1h-1zM12 10h1v1h-1zM5 11h1v1h-1zM12 11h1v1h-1zM5 12h1v1h-1zM12 12h1v1h-1zM5 13h8v1h-8z" fill="black" /><path d="M1 1h6v1h-6zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h4v1h-4zM1 4h1v1h-1zM6 4h6v1h-6zM1 5h4v1h-4zM6 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM6 6h6v1h-6zM1 7h4v1h-4zM6 7h1v1h-1zM11 7h1v1h-1zM6 8h6v1h-6zM6 9h1v1h-1zM11 9h1v1h-1zM6 10h6v1h-6zM6 11h1v1h-1zM11 11h1v1h-1zM6 12h6v1h-6z" fill="white" /><path d="M2 2h4v1h-4zM2 4h3v1h-3zM7 5h4v1h-4zM2 6h3v1h-3zM7 7h4v1h-4zM7 9h4v1h-4zM7 11h4v1h-4z" fill="#808080" /></svg>
diff --git a/docs/public/icons/error-32.svg b/docs/public/icons/error-32.svg
deleted file mode 100644
index 95ea9dce..00000000
--- a/docs/public/icons/error-32.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M15 2h1v1h-1zM10 3h5v1h-5zM16 3h5v1h-5zM9 4h2v1h-2zM20 4h2v1h-2zM7 5h2v1h-2zM22 5h2v1h-2zM6 6h2v1h-2zM23 6h2v1h-2zM5 7h2v1h-2zM24 7h2v1h-2zM5 8h1v1h-1zM25 8h1v1h-1zM4 9h1v1h-1zM26 9h1v1h-1zM3 10h2v1h-2zM26 10h2v1h-2zM3 11h1v1h-1zM27 11h1v1h-1zM3 12h1v1h-1zM27 12h1v1h-1zM3 13h1v1h-1zM27 13h1v1h-1zM3 14h1v1h-1zM27 14h1v1h-1zM2 15h1v1h-1zM28 15h1v1h-1zM3 16h1v1h-1zM27 16h1v1h-1zM3 17h1v1h-1zM27 17h1v1h-1zM3 18h1v1h-1zM27 18h1v1h-1zM3 19h1v1h-1zM27 19h1v1h-1zM3 20h2v1h-2zM26 20h2v1h-2zM4 21h1v1h-1zM26 21h1v1h-1zM5 22h1v1h-1zM25 22h1v1h-1zM5 23h2v1h-2zM24 23h2v1h-2zM6 24h2v1h-2zM23 24h2v1h-2zM7 25h2v1h-2zM22 25h2v1h-2zM9 26h2v1h-2zM20 26h2v1h-2zM10 27h5v1h-5zM16 27h5v1h-5zM15 28h1v1h-1z" fill="black" /><path d="M15 3h1v1h-1zM11 4h9v1h-9zM9 5h13v1h-13zM8 6h15v1h-15zM7 7h17v1h-17zM6 8h19v1h-19zM5 9h21v1h-21zM5 10h4v1h-4zM12 10h8v1h-8zM23 10h3v1h-3zM4 11h6v1h-6zM13 11h6v1h-6zM22 11h5v1h-5zM4 12h7v1h-7zM14 12h4v1h-4zM21 12h6v1h-6zM4 13h8v1h-8zM15 13h2v1h-2zM20 13h7v1h-7zM4 14h9v1h-9zM19 14h8v1h-8zM3 15h11v1h-11zM18 15h10v1h-10zM4 16h10v1h-10zM18 16h9v1h-9zM4 17h9v1h-9zM19 17h8v1h-8zM4 18h8v1h-8zM15 18h2v1h-2zM20 18h7v1h-7zM4 19h7v1h-7zM14 19h4v1h-4zM21 19h6v1h-6zM5 20h5v1h-5zM13 20h6v1h-6zM22 20h4v1h-4zM5 21h4v1h-4zM12 21h8v1h-8zM23 21h3v1h-3zM6 22h19v1h-19zM7 23h17v1h-17zM8 24h15v1h-15zM9 25h13v1h-13zM11 26h9v1h-9zM15 27h1v1h-1z" fill="#FF0000" /><path d="M26 8h1v1h-1zM27 9h1v1h-1zM28 11h1v1h-1zM28 12h2v1h-2zM28 13h2v1h-2zM28 14h2v1h-2zM29 15h1v1h-1zM28 16h2v1h-2zM28 17h3v1h-3zM28 18h2v1h-2zM28 19h2v1h-2zM28 20h2v1h-2zM27 21h3v1h-3zM26 22h4v1h-4zM26 23h3v1h-3zM25 24h3v1h-3zM24 25h4v1h-4zM8 26h1v1h-1zM22 26h5v1h-5zM9 27h1v1h-1zM21 27h5v1h-5zM11 28h4v1h-4zM16 28h8v1h-8zM12 29h11v1h-11zM17 30h1v1h-1z" fill="#808080" /><path d="M9 10h3v1h-3zM20 10h3v1h-3zM10 11h3v1h-3zM19 11h3v1h-3zM11 12h3v1h-3zM18 12h3v1h-3zM12 13h3v1h-3zM17 13h3v1h-3zM13 14h6v1h-6zM14 15h4v1h-4zM14 16h4v1h-4zM13 17h6v1h-6zM12 18h3v1h-3zM17 18h3v1h-3zM11 19h3v1h-3zM18 19h3v1h-3zM10 20h3v1h-3zM19 20h3v1h-3zM9 21h3v1h-3zM20 21h3v1h-3z" fill="white" /></svg>
diff --git a/docs/public/icons/info-32.svg b/docs/public/icons/info-32.svg
deleted file mode 100644
index f03daacf..00000000
--- a/docs/public/icons/info-32.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M15 2h1v1h-1zM10 3h5v1h-5zM16 3h5v1h-5zM9 4h2v1h-2zM20 4h2v1h-2zM7 5h2v1h-2zM22 5h2v1h-2zM6 6h2v1h-2zM23 6h2v1h-2zM5 7h2v1h-2zM24 7h2v1h-2zM5 8h1v1h-1zM25 8h1v1h-1zM4 9h1v1h-1zM26 9h1v1h-1zM3 10h2v1h-2zM26 10h2v1h-2zM3 11h1v1h-1zM27 11h1v1h-1zM3 12h1v1h-1zM27 12h1v1h-1zM3 13h1v1h-1zM27 13h1v1h-1zM3 14h1v1h-1zM27 14h1v1h-1zM2 15h1v1h-1zM28 15h1v1h-1zM3 16h1v1h-1zM27 16h1v1h-1zM3 17h1v1h-1zM27 17h1v1h-1zM3 18h1v1h-1zM27 18h1v1h-1zM3 19h1v1h-1zM27 19h1v1h-1zM3 20h2v1h-2zM26 20h2v1h-2zM4 21h1v1h-1zM26 21h1v1h-1zM5 22h1v1h-1zM25 22h1v1h-1zM5 23h2v1h-2zM24 23h2v1h-2zM6 24h2v1h-2zM23 24h2v1h-2zM7 25h2v1h-2zM22 25h2v1h-2zM9 26h2v1h-2zM20 26h2v1h-2zM10 27h5v1h-5zM16 27h5v1h-5zM15 28h1v1h-1z" fill="black" /><path d="M15 3h1v1h-1zM11 4h9v1h-9zM9 5h13v1h-13zM8 6h15v1h-15zM7 7h8v1h-8zM17 7h7v1h-7zM6 8h8v1h-8zM18 8h7v1h-7zM5 9h9v1h-9zM18 9h8v1h-8zM5 10h10v1h-10zM17 10h9v1h-9zM4 11h23v1h-23zM4 12h23v1h-23zM4 13h9v1h-9zM18 13h9v1h-9zM4 14h9v1h-9zM18 14h9v1h-9zM3 15h11v1h-11zM18 15h10v1h-10zM4 16h10v1h-10zM18 16h9v1h-9zM4 17h10v1h-10zM18 17h9v1h-9zM4 18h10v1h-10zM18 18h9v1h-9zM4 19h10v1h-10zM18 19h9v1h-9zM5 20h9v1h-9zM18 20h8v1h-8zM5 21h9v1h-9zM18 21h8v1h-8zM6 22h8v1h-8zM18 22h7v1h-7zM7 23h7v1h-7zM18 23h6v1h-6zM8 24h4v1h-4zM20 24h3v1h-3zM9 25h3v1h-3zM20 25h2v1h-2zM11 26h9v1h-9zM15 27h1v1h-1z" fill="white" /><path d="M15 7h2v1h-2zM14 8h4v1h-4zM14 9h4v1h-4zM15 10h2v1h-2zM13 13h5v1h-5zM13 14h5v1h-5zM14 15h4v1h-4zM14 16h4v1h-4zM14 17h4v1h-4zM14 18h4v1h-4zM14 19h4v1h-4zM14 20h4v1h-4zM14 21h4v1h-4zM14 22h4v1h-4zM14 23h4v1h-4zM12 24h8v1h-8zM12 25h8v1h-8z" fill="#0000FF" /><path d="M26 8h1v1h-1zM27 9h1v1h-1zM28 11h1v1h-1zM28 12h2v1h-2zM28 13h2v1h-2zM28 14h2v1h-2zM29 15h1v1h-1zM28 16h2v1h-2zM28 17h3v1h-3zM28 18h2v1h-2zM28 19h2v1h-2zM28 20h2v1h-2zM27 21h3v1h-3zM26 22h4v1h-4zM26 23h3v1h-3zM25 24h3v1h-3zM24 25h4v1h-4zM8 26h1v1h-1zM22 26h5v1h-5zM9 27h1v1h-1zM21 27h5v1h-5zM11 28h4v1h-4zM16 28h8v1h-8zM12 29h11v1h-11zM17 30h1v1h-1z" fill="#808080" /></svg>
diff --git a/docs/public/icons/modern/auto.svg b/docs/public/icons/modern/auto.svg
deleted file mode 100644
index cc5b2169..00000000
--- a/docs/public/icons/modern/auto.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12 3.5V20.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12 3.5C14.2543 3.5 16.4163 4.39553 18.0104 5.98959C19.6045 7.58365 20.5 9.74566 20.5 12C20.5 14.2543 19.6045 16.4163 18.0104 18.0104C16.4163 19.6045 14.2543 20.5 12 20.5V3.5Z" fill="currentColor"/>
-</svg>
diff --git a/docs/public/icons/modern/external.svg b/docs/public/icons/modern/external.svg
deleted file mode 100644
index 95149aef..00000000
--- a/docs/public/icons/modern/external.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M20 10V4H14M20 4L11 13M18 14V18.5C18 18.8978 17.842 19.2794 17.5607 19.5607C17.2794 19.842 16.8978 20 16.5 20H5.5C5.10218 20 4.72064 19.842 4.43934 19.5607C4.15804 19.2794 4 18.8978 4 18.5V7.5C4 7.10218 4.15804 6.72064 4.43934 6.43934C4.72064 6.15804 5.10218 6 5.5 6H10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/docs/public/icons/modern/menu.svg b/docs/public/icons/modern/menu.svg
deleted file mode 100644
index 9eefa018..00000000
--- a/docs/public/icons/modern/menu.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M4 7H20M4 12H20M4 17H20" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/docs/public/icons/modern/moon.svg b/docs/public/icons/modern/moon.svg
deleted file mode 100644
index 4c2cdcf7..00000000
--- a/docs/public/icons/modern/moon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M20 14.5C18.5311 15.1277 16.9079 15.3012 15.3395 14.9983C13.771 14.6954 12.3292 13.9299 11.1997 12.8003C10.0701 11.6708 9.30462 10.229 9.0017 8.66054C8.69878 7.09212 8.87233 5.46892 9.5 4C8.29713 4.51399 7.23865 5.31509 6.41727 6.33314C5.59589 7.35119 5.03668 8.55512 4.78863 9.83946C4.54057 11.1238 4.61123 12.4494 4.99443 13.7001C5.37762 14.9508 6.06166 16.0884 6.98661 17.0134C7.91156 17.9383 9.04922 18.6224 10.2999 19.0056C11.5506 19.3888 12.8762 19.4594 14.1605 19.2114C15.4449 18.9633 16.6488 18.4041 17.6669 17.5827C18.6849 16.7614 19.486 15.7029 20 14.5Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/docs/public/icons/modern/sidebar.svg b/docs/public/icons/modern/sidebar.svg
deleted file mode 100644
index 1d71397d..00000000
--- a/docs/public/icons/modern/sidebar.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M18.5 4.5H5.5C4.11929 4.5 3 5.61929 3 7V17C3 18.3807 4.11929 19.5 5.5 19.5H18.5C19.8807 19.5 21 18.3807 21 17V7C21 5.61929 19.8807 4.5 18.5 4.5Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M9 4.5V19.5" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/docs/public/icons/modern/sun.svg b/docs/public/icons/modern/sun.svg
deleted file mode 100644
index 51631d22..00000000
--- a/docs/public/icons/modern/sun.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M12 2.5V4.5M12 19.5V21.5M4.6 4.6L6 6M18 18L19.4 19.4M2.5 12H4.5M19.5 12H21.5M4.6 19.4L6 18M18 6L19.4 4.6" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/docs/public/icons/site/accessible-32.png b/docs/public/icons/site/accessible-32.png
new file mode 100644
index 00000000..0450674d
Binary files /dev/null and b/docs/public/icons/site/accessible-32.png differ
diff --git a/docs/public/icons/site/agents-32.png b/docs/public/icons/site/agents-32.png
new file mode 100644
index 00000000..9f99b71f
Binary files /dev/null and b/docs/public/icons/site/agents-32.png differ
diff --git a/docs/public/icons/site/behaviour-32.png b/docs/public/icons/site/behaviour-32.png
new file mode 100644
index 00000000..d9efe70b
Binary files /dev/null and b/docs/public/icons/site/behaviour-32.png differ
diff --git a/docs/public/icons/site/ssr-32.png b/docs/public/icons/site/ssr-32.png
new file mode 100644
index 00000000..b962c545
Binary files /dev/null and b/docs/public/icons/site/ssr-32.png differ
diff --git a/docs/public/icons/site/tokens-32.png b/docs/public/icons/site/tokens-32.png
new file mode 100644
index 00000000..80c91d35
Binary files /dev/null and b/docs/public/icons/site/tokens-32.png differ
diff --git a/docs/public/icons/site/typed-32.png b/docs/public/icons/site/typed-32.png
new file mode 100644
index 00000000..ad5eec1e
Binary files /dev/null and b/docs/public/icons/site/typed-32.png differ
diff --git a/docs/public/icons/warning-32.svg b/docs/public/icons/warning-32.svg
deleted file mode 100644
index caf509de..00000000
--- a/docs/public/icons/warning-32.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M15 3h2v1h-2zM15 4h2v1h-2zM14 5h4v1h-4zM14 6h4v1h-4zM13 7h6v1h-6zM13 8h2v1h-2zM17 8h2v1h-2zM12 9h3v1h-3zM17 9h3v1h-3zM12 10h2v1h-2zM15 10h2v1h-2zM18 10h2v1h-2zM11 11h10v1h-10zM11 12h2v1h-2zM14 12h4v1h-4zM19 12h2v1h-2zM10 13h2v1h-2zM14 13h4v1h-4zM20 13h2v1h-2zM10 14h2v1h-2zM14 14h4v1h-4zM20 14h2v1h-2zM9 15h2v1h-2zM14 15h4v1h-4zM21 15h2v1h-2zM9 16h2v1h-2zM14 16h4v1h-4zM21 16h2v1h-2zM8 17h2v1h-2zM14 17h4v1h-4zM22 17h2v1h-2zM8 18h2v1h-2zM14 18h4v1h-4zM22 18h2v1h-2zM7 19h2v1h-2zM15 19h2v1h-2zM23 19h2v1h-2zM7 20h2v1h-2zM15 20h2v1h-2zM23 20h2v1h-2zM6 21h2v1h-2zM24 21h2v1h-2zM6 22h2v1h-2zM24 22h2v1h-2zM5 23h2v1h-2zM15 23h2v1h-2zM25 23h2v1h-2zM5 24h2v1h-2zM14 24h4v1h-4zM25 24h2v1h-2zM4 25h2v1h-2zM15 25h2v1h-2zM26 25h2v1h-2zM4 26h2v1h-2zM26 26h2v1h-2zM3 27h26v1h-26zM2 28h28v1h-28z" fill="black" /><path d="M17 4h2v1h-2zM18 5h1v1h-1zM18 6h2v1h-2zM19 7h1v1h-1zM19 8h2v1h-2zM20 9h1v1h-1zM20 10h2v1h-2zM21 11h1v1h-1zM21 12h2v1h-2zM22 13h1v1h-1zM22 14h2v1h-2zM23 15h1v1h-1zM23 16h2v1h-2zM24 17h1v1h-1zM24 18h2v1h-2zM25 19h1v1h-1zM25 20h2v1h-2zM26 21h1v1h-1zM26 22h2v1h-2zM27 23h1v1h-1zM27 24h2v1h-2zM28 25h1v1h-1zM28 26h2v1h-2zM29 27h1v1h-1zM30 28h1v1h-1zM4 29h28v1h-28z" fill="#808080" /><path d="M15 8h2v1h-2zM15 9h2v1h-2zM14 10h1v1h-1zM17 10h1v1h-1zM13 12h1v1h-1zM18 12h1v1h-1zM12 13h2v1h-2zM18 13h2v1h-2zM12 14h2v1h-2zM18 14h2v1h-2zM11 15h3v1h-3zM18 15h3v1h-3zM11 16h3v1h-3zM18 16h3v1h-3zM10 17h4v1h-4zM18 17h4v1h-4zM10 18h4v1h-4zM18 18h4v1h-4zM9 19h6v1h-6zM17 19h6v1h-6zM9 20h6v1h-6zM17 20h6v1h-6zM8 21h16v1h-16zM8 22h16v1h-16zM7 23h8v1h-8zM17 23h8v1h-8zM7 24h7v1h-7zM18 24h7v1h-7zM6 25h9v1h-9zM17 25h9v1h-9zM6 26h20v1h-20z" fill="#FFFF00" /></svg>
diff --git a/docs/public/mark-win98-16.png b/docs/public/mark-win98-16.png
deleted file mode 100644
index e8391606..00000000
Binary files a/docs/public/mark-win98-16.png and /dev/null differ
diff --git a/docs/public/mark-win98-32.png b/docs/public/mark-win98-32.png
deleted file mode 100644
index 19c5a926..00000000
Binary files a/docs/public/mark-win98-32.png and /dev/null differ