@olddevs/ui 4.2.2 → 4.4.0

package/docs/components/inputs/rich-text-editor.en.md

@@ -37,7 +37,7 @@ category: inputs
 status: stable
 source: src/editor/RichTextEditor.tsx
 story: src/editor/RichTextEditor.stories.tsx
-sourceHash: 95badb4a657c
+sourceHash: 3eaf71d10511
 ---
 
 # RichTextEditor
@@ -305,43 +305,44 @@ The `link` Tool: the "Link" button on the Toolbar and `Ctrl/⌘+K` open a popove
 
 ## Tools and Presets
 
-`preset="full"` (default) is everything in the release. `preset="basic"` is for comments and short descriptions. `tools` is an exact list and takes precedence over a Preset; descriptions of custom Tools can be mixed in with the kit's names (see the "Custom Tool" section). The type of a `tools` element is `Tool` (a kit name or a `CustomTool`), the type of a kit name is `ToolName`; both are exported from `@olddevs/ui/editor`.
+`preset="full"` (default) is everything in the release except the Table of contents `toc`: it changes the layout of the field, so it is switched on only explicitly. `preset="basic"` is for comments and short descriptions. `tools` is an exact list and takes precedence over a Preset; descriptions of custom Tools can be mixed in with the kit's names (see the "Custom Tool" section). The type of a `tools` element is `Tool` (a kit name or a `CustomTool`), the type of a kit name is `ToolName`; both are exported from `@olddevs/ui/editor`.
 
 Presets are also exported as arrays of names — `RICH_TEXT_PRESETS.full` and `RICH_TEXT_PRESETS.basic` — so that you can assemble your own set from them: `tools={[...RICH_TEXT_PRESETS.full, mergeTagTool]}`. The arrays are frozen. A Preset's content is "what the kit considers the full set", not a frozen list: a new built-in Tool arrives in a Preset in a minor version. If you need a stable set, pass an exact list of names.
 
 **A disabled Tool removes both the button and the Schema extension.** Its Block or Mark cannot be created with a keyboard shortcut, a Markdown shortcut or a paste, and from `value` they arrive without Block markup, and the text stays.
 
-| `Tool`            | Button                                 | Markup                                    | Shortcut                                          | Markdown while typing  | `basic` |
-| ----------------- | -------------------------------------- | ----------------------------------------- | ------------------------------------------------- | ---------------------- | ------- |
-| `heading`         | "¶": Heading 2–4                       | `h2`, `h3`, `h4`                          | `Ctrl/⌘+Alt+2…4`                                  | `## `, `### `, `#### ` | —       |
-| `heading1`        | "¶": adds Heading 1                    | `h1`                                      | `Ctrl/⌘+Alt+1`                                    | `# `                   | —       |
-| `history`         | Undo, Redo                             | —                                         | `Ctrl/⌘+Z`, `+Shift+Z`                            | —                      | yes     |
-| `bold`            | Bold                                   | `strong`                                  | `Ctrl/⌘+B`                                        | `**text**`             | yes     |
-| `italic`          | Italic                                 | `em`                                      | `Ctrl/⌘+I`                                        | `*text*`               | yes     |
-| `underline`       | "…": Underline                         | `u`                                       | `Ctrl/⌘+U`                                        | —                      | —       |
-| `strike`          | Strikethrough                          | `s`                                       | `Ctrl/⌘+Shift+S`                                  | `~~text~~`             | yes     |
-| `code`            | "…": Inline code                       | `code`                                    | `Ctrl/⌘+E`                                        | `` `text` ``           | yes     |
-| `superscript`     | "…": Superscript                       | `sup`                                     | `Ctrl/⌘+.`                                        | —                      | —       |
-| `subscript`       | "…": Subscript                         | `sub`                                     | `Ctrl/⌘+,`                                        | —                      | —       |
-| `clearFormatting` | "…": Clear formatting                  | — (removes Marks)                         | `Ctrl/⌘+\`                                        | —                      | —       |
-| `link`            | Link (address popover)                 | `a[href]`                                 | `Ctrl/⌘+K`                                        | `[text](url)` on paste | yes     |
-| `color`           | Color ▾ (Selection menu): "Text color" | `span[data-color]`, `span[style]`         | —                                                 | —                      | —       |
-| `highlight`       | Highlight ▾ (Toolbar), "Color ▾"       | `mark[data-color]`, `mark[style]`         | —                                                 | —                      | —       |
-| `align`           | Alignment ▾ (menu)                     | `p`, `h2`–`h4` with `data-align`          | `Ctrl/⌘+Shift+L`, `+E`, `+R`                      | —                      | —       |
-| `bulletList`      | Lists ▾: Bulleted list                 | `ul`, `li`                                | `Ctrl/⌘+Shift+8`                                  | `- ` or `* `           | yes     |
-| `orderedList`     | Lists ▾: Numbered list                 | `ol`, `li`                                | `Ctrl/⌘+Shift+7`                                  | `1. `                  | yes     |
-| `taskList`        | Lists ▾: Checklist                     | `ul[data-type=taskList]` and items        | `Ctrl/⌘+Shift+9`                                  | `[ ] ` or `[x] `       | —       |
-| `blockquote`      | "…": Quote                             | `blockquote`                              | `Ctrl/⌘+Shift+B`                                  | `> `                   | yes     |
-| `codeBlock`       | "…": Code block                        | `pre`, `code class="language-*"`          | `Ctrl/⌘+Alt+C`                                    | ` ``` `                | —       |
-| `horizontalRule`  | "+": Divider                           | `hr`                                      | —                                                 | `---`                  | —       |
-| `table`           | Table ▾ (menu)                         | `table`, `tbody`, `tr`, `th`, `td`        | `Tab`, `Shift+Tab`, `Alt+↓` in a table            | —                      | —       |
-| `image`           | Image (address popover)                | `figure`, `img`, `figcaption`             | —                                                 | `![alt](url)` on paste | —       |
-| `emoji`           | Emoji (popover with a grid)            | — (plain text)                            | —                                                 | —                      | —       |
-| `source`          | HTML (mode toggle)                     | — (edits the Document's HTML)             | —                                                 | —                      | —       |
-| `search`          | Find (find and replace panel)          | — (searches the Document)                 | `Ctrl/⌘+F`, `Ctrl/⌘+Alt+F`                        | —                      | yes     |
-| `layout`          | "+": Layout                            | `div` with `data-block` and `data-layout` | `Tab`, `Shift+Tab`, arrow keys at the column edge | —                      | —       |
-| `wrapper`         | "+": Wrapper                           | `div[data-block=wrapper]`                 | `Enter` in an empty last paragraph — exit         | —                      | —       |
-| `insertMenu`      | "+" Insert menu                        | — (Blocks of other Tools)                 | —                                                 | `/`                    | —       |
+| `Tool`            | Button                                               | Markup                                    | Shortcut                                          | Markdown while typing  | `basic` |
+| ----------------- | ---------------------------------------------------- | ----------------------------------------- | ------------------------------------------------- | ---------------------- | ------- |
+| `heading`         | "¶": Heading 2–4                                     | `h2`, `h3`, `h4`                          | `Ctrl/⌘+Alt+2…4`                                  | `## `, `### `, `#### ` | —       |
+| `heading1`        | "¶": adds Heading 1                                  | `h1`                                      | `Ctrl/⌘+Alt+1`                                    | `# `                   | —       |
+| `history`         | Undo, Redo                                           | —                                         | `Ctrl/⌘+Z`, `+Shift+Z`                            | —                      | yes     |
+| `bold`            | Bold                                                 | `strong`                                  | `Ctrl/⌘+B`                                        | `**text**`             | yes     |
+| `italic`          | Italic                                               | `em`                                      | `Ctrl/⌘+I`                                        | `*text*`               | yes     |
+| `underline`       | "…": Underline                                       | `u`                                       | `Ctrl/⌘+U`                                        | —                      | —       |
+| `strike`          | Strikethrough                                        | `s`                                       | `Ctrl/⌘+Shift+S`                                  | `~~text~~`             | yes     |
+| `code`            | "…": Inline code                                     | `code`                                    | `Ctrl/⌘+E`                                        | `` `text` ``           | yes     |
+| `superscript`     | "…": Superscript                                     | `sup`                                     | `Ctrl/⌘+.`                                        | —                      | —       |
+| `subscript`       | "…": Subscript                                       | `sub`                                     | `Ctrl/⌘+,`                                        | —                      | —       |
+| `clearFormatting` | "…": Clear formatting                                | — (removes Marks)                         | `Ctrl/⌘+\`                                        | —                      | —       |
+| `link`            | Link (address popover)                               | `a[href]`                                 | `Ctrl/⌘+K`                                        | `[text](url)` on paste | yes     |
+| `color`           | Color ▾ (Selection menu): "Text color"               | `span[data-color]`, `span[style]`         | —                                                 | —                      | —       |
+| `highlight`       | Highlight ▾ (Toolbar), "Color ▾"                     | `mark[data-color]`, `mark[style]`         | —                                                 | —                      | —       |
+| `align`           | Alignment ▾ (menu)                                   | `p`, `h2`–`h4` with `data-align`          | `Ctrl/⌘+Shift+L`, `+E`, `+R`                      | —                      | —       |
+| `bulletList`      | Lists ▾: Bulleted list                               | `ul`, `li`                                | `Ctrl/⌘+Shift+8`                                  | `- ` or `* `           | yes     |
+| `orderedList`     | Lists ▾: Numbered list                               | `ol`, `li`                                | `Ctrl/⌘+Shift+7`                                  | `1. `                  | yes     |
+| `taskList`        | Lists ▾: Checklist                                   | `ul[data-type=taskList]` and items        | `Ctrl/⌘+Shift+9`                                  | `[ ] ` or `[x] `       | —       |
+| `blockquote`      | "…": Quote                                           | `blockquote`                              | `Ctrl/⌘+Shift+B`                                  | `> `                   | yes     |
+| `codeBlock`       | "…": Code block                                      | `pre`, `code class="language-*"`          | `Ctrl/⌘+Alt+C`                                    | ` ``` `                | —       |
+| `horizontalRule`  | "+": Divider                                         | `hr`                                      | —                                                 | `---`                  | —       |
+| `table`           | Table ▾ (menu)                                       | `table`, `tbody`, `tr`, `th`, `td`        | `Tab`, `Shift+Tab`, `Alt+↓` in a table            | —                      | —       |
+| `image`           | Image (address popover)                              | `figure`, `img`, `figcaption`             | —                                                 | `![alt](url)` on paste | —       |
+| `emoji`           | Emoji (popover with a grid)                          | — (plain text)                            | —                                                 | —                      | —       |
+| `source`          | HTML (mode toggle)                                   | — (edits the Document's HTML)             | —                                                 | —                      | —       |
+| `search`          | Find (find and replace panel)                        | — (searches the Document)                 | `Ctrl/⌘+F`, `Ctrl/⌘+Alt+F`                        | —                      | yes     |
+| `layout`          | "+": Layout                                          | `div` with `data-block` and `data-layout` | `Tab`, `Shift+Tab`, arrow keys at the column edge | —                      | —       |
+| `wrapper`         | "+": Wrapper                                         | `div[data-block=wrapper]`                 | `Enter` in an empty last paragraph — exit         | —                      | —       |
+| `insertMenu`      | "+" Insert menu                                      | — (Blocks of other Tools)                 | —                                                 | `/`                    | —       |
+| `toc`             | Table of contents in the left gutter (not in `full`) | — (reads the headings)                    | —                                                 | —                      | —       |
 
 A paragraph is always there; a soft line break is `Shift+Enter`. `insertMenu` and `emoji`, like `clearFormatting`, have no markup of their own: `insertMenu` provides access to other Tools' Blocks, and it is disabled where `/` is an ordinary character (paths, "and/or"); `basic` lacks it for the same reason. `emoji` inserts plain text — the Schema, the sanitizer and Markdown do not change because of it (see the "Emoji" section); `basic` lacks it: in a comment the OS's own palette is easier to reach, and a button would take up room in a short row. `source` is the HTML mode (see the "HTML mode" section): it has no markup of its own either, an HTML edit goes through the same Schema as `value`, and it cannot be used to get around the set of Tools; `basic` lacks it — in a comment an "HTML" button is superfluous unless the screen explicitly asks for it.
 
@@ -349,7 +350,7 @@ A paragraph is always there; a soft line break is `Shift+Enter`. `insertMenu` an
 
 Earlier, "no H1 in the Document" was a kit decision (the page heading sits outside the Editor); now it is the screen's decision — ADR-0053 revises the earlier decision, and ADR-0050 links to ADR-0053.
 
-A name enters the `Tool` type together with the Tool itself, not earlier: widening the input type does not break the consumer, whereas a name without an implementation would compile and do nothing. That is how `link` arrived — straight into the `basic` Preset too — and `color`, `highlight`, `align`, `table`, `image`, `emoji`, `layout`, `wrapper`, `source`; there are no reserved names now. Unknown names in `tools` (from JS without types) are dropped silently.
+A name enters the `Tool` type together with the Tool itself, not earlier: widening the input type does not break the consumer, whereas a name without an implementation would compile and do nothing. That is how `link` arrived — straight into the `basic` Preset too — and `color`, `highlight`, `align`, `table`, `image`, `emoji`, `layout`, `wrapper`, `source`, `toc`; there are no reserved names now. Unknown names in `tools` (from JS without types) are dropped silently.
 
 `preset` and `tools` are read **when the engine is created**: the Schema of a live ProseMirror cannot be changed. To change the set on a mounted field, remount it with a key (`key`) — the edit history is lost in the process.
 
@@ -1170,6 +1171,23 @@ The `search` Tool (present in `full` and in `basic`) is find and replace over th
 
 Message catalog strings: `editor.search` (the button and the `Ctrl/⌘+F` Shortcuts reference row), `searchReplace` (`Ctrl/⌘+Alt+F`), `searchPanel`, `searchField`, `replaceField`, `searchPrevious`, `searchNext`, `searchClose`, `searchMatchCase`, `searchWholeWord`, `searchRegex`, `replaceOne`, `replaceAll`, `searchCount({ current, total })`, `searchNoMatches`, `searchInvalid`.
 
+## Table of contents
+
+The `toc` Tool puts the Table of contents of the Document in the Editor's left gutter: the same strip of strokes and the same list as [`RichTextToc`](../content/rich-text-toc.md), but the Editor holds the place itself (ADR-0068). It is in neither Preset, `full` or `basic`: the Table of contents moves the text, and a kit update does not change the layout of screens that did not ask for it. Switch it on by name:
+
+```tsx
+<RichTextEditor tools={[...RICH_TEXT_PRESETS.full, "toc"]} defaultValue={html} />
+```
+
+- **Place.** A column to the left of the Document, inside the field frame. It exists only while there is a strip, from two `h1`–`h4` headings at the top level and in Wrappers: with the second heading the text moves right; without it the text stays at the edge, as without the Tool. The first stroke is level with the first line of the first heading.
+- **Stickiness.** The strip sticks under the fixed Toolbar (and under the app header: `--topbar-h`, ADR-0016); without a Toolbar, to the edge of the window. In a field with `maxHeight` or `resizable` it sticks to the top of the scrolling area, and the highlight and the jump count from there; the page does not scroll.
+- **The list** works as in `RichTextToc`: hover opens it to the right of the strip, Enter and Space open it from the keyboard, arrows move between items, Escape closes it; the current section is highlighted in the strip and in the list; the width is 240px, and a long heading is cut with an ellipsis. A click on an item does not close the list: moving the pointer away does.
+- **A jump while editing** puts the caret at the end of the heading, so you can type right away, as in the document outline of Google Docs; the Table of contents does the scrolling, and the heading flashes a fading background. In `readOnly` there is no caret, so focus goes to the heading itself.
+- **A live Document.** The list is rebuilt shortly after each edit: a new, renamed or removed heading shows in the strip. In HTML mode there is no Table of contents, because the Document is hidden.
+- **No Toolbar button.** To show or hide the Table of contents, the screen changes `tools` (and remounts the field with a `key`, as for any set of Tools).
+
+Message catalog string: `editor.toc` ("Table of contents"), the name of the strip and the label of the list.
+
 ## Status line and Field notice
 
 Under the field inside the frame there are two independent areas. The **Status line** is what the screen puts there itself: "Saved", a word count, a co-author. The **Field notice** is what the kit and Tools report: an upload result, a paste rejection. The first is a React node in the `status` prop, the second is data and an engine command.

package/docs/components/inputs/rich-text-editor.md

@@ -304,7 +304,7 @@ import { RichTextEditor } from "@olddevs/ui/editor";
 
 ## Инструменты и Пресеты
 
-`preset="full"` (по умолчанию) — всё, что есть в выпуске. `preset="basic"` — для комментариев и коротких описаний. `tools` — точный список, сильнее Пресета; в нём вперемешку с именами кита стоят описания своих Инструментов (раздел «Свой Инструмент»). Тип элемента `tools` — `Tool` (имя кита или `CustomTool`), тип имени кита — `ToolName`; оба экспортируются из `@olddevs/ui/editor`.
+`preset="full"` (по умолчанию) — всё, что есть в выпуске, кроме Оглавления `toc`: оно меняет раскладку поля, и его включают только явно. `preset="basic"` — для комментариев и коротких описаний. `tools` — точный список, сильнее Пресета; в нём вперемешку с именами кита стоят описания своих Инструментов (раздел «Свой Инструмент»). Тип элемента `tools` — `Tool` (имя кита или `CustomTool`), тип имени кита — `ToolName`; оба экспортируются из `@olddevs/ui/editor`.
 
 Пресеты экспортируются и массивами имён — `RICH_TEXT_PRESETS.full` и `RICH_TEXT_PRESETS.basic`, чтобы собирать из них свой набор: `tools={[...RICH_TEXT_PRESETS.full, mergeTagTool]}`. Массивы заморожены. Состав Пресета — «то, что кит считает полным набором», а не замороженный список: новый встроенный Инструмент приходит в Пресет minor-версией. Нужен стабильный состав — передайте точный список имён.
 
@@ -341,6 +341,7 @@ import { RichTextEditor } from "@olddevs/ui/editor";
 | `layout`          | «+»: Раскладка                         | `div` с `data-block` и `data-layout` | `Tab`, `Shift+Tab`, стрелки у края колонки | —                            | —       |
 | `wrapper`         | «+»: Обёртка                           | `div[data-block=wrapper]`            | `Enter` в пустом последнем абзаце — выход  | —                            | —       |
 | `insertMenu`      | «+» Меню вставки                       | — (Блоки других Инструментов)        | —                                          | `/`                          | —       |
+| `toc`             | Оглавление в левом поле (не в `full`)  | — (читает заголовки)                 | —                                          | —                            | —       |
 
 Абзац есть всегда, мягкий перенос строки — `Shift+Enter`. `insertMenu` и `emoji`, как и `clearFormatting`, своей разметки не имеют: `insertMenu` даёт доступ к Блокам других Инструментов, а выключают его там, где `/` — обычный символ (пути, «и/или»); в `basic` его нет по той же причине. `emoji` вставляет обычный текст — Схема, санитайзер и Markdown от него не меняются (раздел «Эмодзи»); в `basic` его нет: в комментарии системная палитра ОС удобнее, а кнопка занимала бы место у короткого ряда. `source` — HTML-режим (раздел «HTML-режим»): своей разметки у него тоже нет, правка HTML проходит ту же Схему, что `value`, и обойти набор Инструментов им нельзя; в `basic` его нет — в комментарии кнопка «HTML» лишняя, если экран её не просил.
 
@@ -348,7 +349,7 @@ import { RichTextEditor } from "@olddevs/ui/editor";
 
 Раньше «H1 в Документе нет» было решением кита (заголовок страницы стоит вне Редактора); теперь это решение экрана — ADR-0053 пересматривает прежнее решение; ссылка на ADR-0053 стоит в ADR-0050.
 
-Имя приходит в тип `Tool` вместе с самим Инструментом, не раньше: расширение входного типа потребителя не ломает, а имя без реализации компилировалось бы и ничего не давало. Так пришли `link` — сразу и в Пресет `basic` — и `color`, `highlight`, `align`, `table`, `image`, `emoji`, `layout`, `wrapper`, `source`; зарезервированных имён сейчас нет. Неизвестные имена в `tools` (из JS без типов) отбрасываются молча.
+Имя приходит в тип `Tool` вместе с самим Инструментом, не раньше: расширение входного типа потребителя не ломает, а имя без реализации компилировалось бы и ничего не давало. Так пришли `link` — сразу и в Пресет `basic` — и `color`, `highlight`, `align`, `table`, `image`, `emoji`, `layout`, `wrapper`, `source`, `toc`; зарезервированных имён сейчас нет. Неизвестные имена в `tools` (из JS без типов) отбрасываются молча.
 
 `preset` и `tools` читаются **при создании движка**: Схему живого ProseMirror не поменять. Чтобы сменить набор у смонтированного поля, перемонтируйте его ключом (`key`) — история правок при этом теряется.
 
@@ -1169,6 +1170,23 @@ ARIA сетки — шаблон `grid` из APG: `role="grid"` → `row` → `g
 
 Строки каталога сообщений: `editor.search` (кнопка и строка Справочника сочетаний `Ctrl/⌘+F`), `searchReplace` (`Ctrl/⌘+Alt+F`), `searchPanel`, `searchField`, `replaceField`, `searchPrevious`, `searchNext`, `searchClose`, `searchMatchCase`, `searchWholeWord`, `searchRegex`, `replaceOne`, `replaceAll`, `searchCount({ current, total })`, `searchNoMatches`, `searchInvalid`.
 
+## Оглавление
+
+Инструмент `toc` — Оглавление Документа в левом поле Редактора: та же полоса штрихов и тот же список, что у [`RichTextToc`](../content/rich-text-toc.md), но место держит сам Редактор (ADR-0068). В Пресеты он не входит — ни в `full`, ни в `basic`: Оглавление сдвигает текст, и обновление кита не меняет раскладку экранов, которые его не просили. Включают его именем:
+
+```tsx
+<RichTextEditor tools={[...RICH_TEXT_PRESETS.full, "toc"]} defaultValue={html} />
+```
+
+- **Место.** Колонка слева от Документа внутри рамки поля. Она есть, только пока есть полоса — от двух заголовков `h1`–`h4` на верхнем уровне и в Обёртке: со вторым заголовком текст сдвигается вправо, без него стоит у края, как без Инструмента. Первый штрих стоит на уровне первой строки первого заголовка.
+- **Липкость.** Полоса липнет под фиксированной Панелью (и под шапкой приложения: `--topbar-h`, ADR-0016), без Панели — к краю окна. В поле с `maxHeight` или `resizable` она липнет к верху прокручиваемой области, а подсветка и переход считают от неё — страница при этом не прокручивается.
+- **Список** — как у `RichTextToc`: наведение раскрывает его справа от полосы, Enter и Space — с клавиатуры, стрелки ходят по пунктам, Escape закрывает; текущий раздел подсвечен в полосе и в списке; ширина 240px, длинный заголовок обрезан многоточием. Клик по пункту список не закрывает: его закрывает уход курсора.
+- **Переход в правке** ставит каретку в конец заголовка — можно сразу писать, как в структуре документа Google Docs; прокрутку делает Оглавление, заголовок подсвечивается гаснущим фоном. В `readOnly` каретки нет — фокус встаёт на сам заголовок.
+- **Живой Документ.** Список пересобирается на правке с короткой задержкой: новый заголовок, переименование и удаление видны в полосе. В HTML-режиме Оглавления нет — Документ скрыт.
+- **Кнопки на Панели нет.** Показать или спрятать Оглавление — смена `tools` экраном (с перемонтажом ключом, как у любого набора Инструментов).
+
+Строка каталога сообщений — `editor.toc` («Оглавление»): имя полосы и подпись списка.
+
 ## Строка статуса и Сообщение поля
 
 Под полем внутри рамки две независимые области. **Строка статуса** — то, что экран кладёт сам: «Сохранено», число слов, соавтор. **Сообщение поля** — то, что сообщают кит и Инструменты: результат загрузки, отказ вставки. Первое — React-узел пропа `status`, второе — данные и команда движка.

package/docs/components/navigation/mega-menu.en.md

@@ -5,7 +5,7 @@ category: navigation
 status: stable
 source: src/components/navigation/MegaMenu.tsx
 story: src/components/navigation/MegaMenu.stories.tsx
-sourceHash: 4c7401326a3f
+sourceHash: 42179963266b
 ---
 
 # MegaMenu
@@ -13,10 +13,11 @@ sourceHash: 4c7401326a3f
 ## Summary for AI
 
 `MegaMenu` is an Amazon-style store catalog: a category column on the left and, next to the hovered
-category, its showcase with columns of links and any content of your own. It is link navigation, not a command
+category, its flyout with columns of links and any content of your own. It is link navigation, not a command
 menu: the markup follows the WAI-ARIA Disclosure Navigation pattern (`nav`, buttons with `aria-expanded`, real
-`a` elements). Categories are `MegaMenuCategory` as direct children, columns are `MegaMenuGroup`, links are
-`MegaMenuLink`. The same catalog opens as a dropdown overlay from a button: `MegaMenuTrigger` with
+`a` elements). Categories are `MegaMenuCategory` (directly or inside your own components, server components
+included), columns are `MegaMenuGroup`, links are `MegaMenuLink`. The current section and the current page are
+marked with the `active` prop, as on `NavItem`. The same catalog opens as a dropdown overlay from a button: `MegaMenuTrigger` with
 `MegaMenuButton` and an unchanged `MegaMenu`.
 
 ## When to use
@@ -24,7 +25,7 @@ menu: the markup follows the WAI-ARIA Disclosure Navigation pattern (`nav`, butt
 - A catalog with ten or more sections, each with subsections in columns: a store, a marketplace, a help portal.
 - The sections should be visible at once and the subsections should appear on hover, without taking the user
   off the page.
-- The showcase needs content of its own next to the links: a promo card, an image, a selection.
+- The flyout needs content of its own next to the links: a promo card, an image, a selection.
 
 ## When not to use
 
@@ -39,10 +40,10 @@ menu: the markup follows the WAI-ARIA Disclosure Navigation pattern (`nav`, butt
 import { MegaMenu, MegaMenuCategory, MegaMenuGroup, MegaMenuLink } from "@olddevs/ui";
 
 <MegaMenu aria-label="Catalog">
-  <MegaMenuCategory id="computers" label="Computers" href="/computers">
+  <MegaMenuCategory id="computers" label="Computers" href="/computers" active>
     <MegaMenuGroup title="Laptops" href="/computers/laptops">
       <MegaMenuLink href="/computers/laptops/gaming">Gaming</MegaMenuLink>
-      <MegaMenuLink href="/computers/laptops/ultrabooks" current>
+      <MegaMenuLink href="/computers/laptops/ultrabooks" active>
         Ultrabooks
       </MegaMenuLink>
     </MegaMenuGroup>
@@ -59,67 +60,80 @@ import { MegaMenu, MegaMenuCategory, MegaMenuGroup, MegaMenuLink } from "@olddev
 | ------------------------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------- |
 | `aria-label`                               | —         | The accessible name of the navigation. Required: on a page with several `nav` elements, the name tells them apart |
 | `value` / `defaultValue` / `onValueChange` | `null`    | The open category (its `id`) or `null`, controlled or uncontrolled                                                |
-| `showcaseWidth`                            | `"40rem"` | The width of the showcase, shared by all categories so that the catalog does not jump between them                |
+| `showcaseWidth`                            | `"40rem"` | The width of the flyout, shared by all categories so that the catalog does not jump between them                  |
 | `className`                                | —         | Classes for the `nav`; the default width of the category column is `w-64`                                         |
 
 `MegaMenuCategory`: `id` is the key for `value`; `label` is the text in the category column and the name of the
-showcase; `icon`; `href` or `link` is the address of the whole section; `disabled`; the children are the content of
-the showcase. For a category with a showcase, the address becomes a title link at the top of the showcase; for a
+flyout; `icon`; `href` or `link` is the address of the whole section; `disabled`; `active` means the current page is in
+this section; the children are the content of the flyout. For a category with a flyout, the address becomes a title link at the top of the flyout; for a
 category without children, the row in the category column is itself the link. `link` is a router link passed as an
 empty element (`link={<Link href="/x" />}`), and the label moves inside it. It is a separate prop rather than
-`asChild` because the children of a category are its showcase.
+`asChild` because the children of a category are its flyout.
 
-`MegaMenuGroup`: `title` is the title of the column and the name of its list; `href` turns the title into a link;
-the children are `MegaMenuLink` elements, and each one is placed in its own list item.
+`active` on a category sets `aria-current="true"` and gives the label the accent color, the same one a current
+link gets. The mark stays whether or not the flyout is open: the route decides the current section, not hover. The
+open category is still marked with a background, so one row can carry both. While no flyout is open, Tab enters the
+category column on the current section. Your code decides which section is current, as with `active` on `NavItem`.
 
-`MegaMenuLink`: the usual `a` props, `icon`, `current` and `asChild`. `current` sets `aria-current="page"` and the
+Categories don't have to be direct children of `MegaMenu`: you can split them across your own components and render
+them from a Next.js server component. Each category reports itself to the column, and the column doesn't inspect its
+children by type, because a server component's element arrives on the client with a different type. Before
+hydration, while the categories haven't reported themselves yet, every available category is a Tab stop; after
+hydration the column is a single stop again.
+
+`MegaMenuGroup`: `title` is the title of the column and the name of its list; `href` or `link` turns the title into
+a link (`link` is a router link passed as an empty element, as on a category); the children are `MegaMenuLink`
+elements, and each one is placed in its own list item, including those passed in a fragment.
+
+`MegaMenuLink`: the usual `a` props, `icon`, `active` and `asChild`. `active` sets `aria-current="page"` and the
 look of the current link. The kit does not work out the current page itself, because every router compares
 addresses by its own rules. `asChild` renders the link as a router element:
-`<MegaMenuLink asChild><Link href="/x">Label</Link></MegaMenuLink>`.
+`<MegaMenuLink asChild><Link href="/x">Label</Link></MegaMenuLink>`. The old name, `current`, works until 5.0 and is
+marked `@deprecated`: the kit calls the current navigation item `active`.
 
-## Hover and the showcase
+## Hover and the flyout
 
-Hovering a category with the mouse opens its showcase at once, with no delay. Exactly one category is highlighted,
-the one whose showcase is open: the highlight follows `aria-expanded`, not `:hover`. Hovering a category without a
-showcase closes the open one, with the same caveat about aim as below.
+Hovering a category with the mouse opens its flyout at once, with no delay. Exactly one category is highlighted,
+the one whose flyout is open: the highlight follows `aria-expanded`, not `:hover`. Hovering a category without a
+flyout closes the open one, with the same caveat about aim as below.
 
-The showcase closes 150 ms after the pointer has left both the category column and the showcase, so a brief
+The flyout closes 150 ms after the pointer has left both the category column and the flyout, so a brief
 excursion past the edge does not reset the catalog. It also closes on a pointer press outside the catalog and when
 focus leaves the catalog.
 
-The content of a showcase is mounted only for the open category, so a catalog of a hundred links and images does
+The content of a flyout is mounted only for the open category, so a catalog of a hundred links and images does
 not load everything at once. The region itself is always there, hidden: the button's `aria-controls` points to it.
 
-The showcase is a DOM descendant of its category, not a portal. That is why the Tab order runs "category, its
-links, then on down the page", and why the showcase sits flush against the category column without any position
+The flyout is a DOM descendant of its category, not a portal. That is why the Tab order runs "category, its
+links, then on down the page", and why the flyout sits flush against the category column without any position
 calculation. An ancestor with `overflow: hidden` clips it, so put the catalog where there is room beside it.
 
-The showcase sits on the end side of the line: on the right, or on the left in right-to-left writing. If there is
+The flyout sits on the end side of the line: on the right, or on the left in right-to-left writing. If there is
 not enough room there and there is enough on the other side, it moves to the other side. The kit measures the side
-ahead of time and again when the window is resized, so the arrow key that points "toward the showcase" already
-points to where the showcase will appear.
+ahead of time and again when the window is resized, so the arrow key that points "toward the flyout" already
+points to where the flyout will appear.
 
 ## Touch and narrow screens
 
 Touch has no hover, so the touch itself (`click`) opens a category, without aim. A pointer whose `pointerType` is
-"touch" or "pen" neither opens a category on hover nor closes the showcase when it leaves: a pen behaves like a
-finger. Touching an open category again neither closes it nor goes anywhere. The showcase closes on a touch outside
+"touch" or "pen" neither opens a category on hover nor closes the flyout when it leaves: a pen behaves like a
+finger. Touching an open category again neither closes it nor goes anywhere. The flyout closes on a touch outside
 the catalog or on Escape.
 
 The mouse behaves as before: hover, aim and closing after 150 ms all remain while the screen is wide.
 
 On a narrow screen, under 640px (the same breakpoint as `Menu` submenus and Editor submenus), there is no room beside
-the category column for the showcase: the edge of the window would cut it off on the right. So the catalog works as a
+the category column for the flyout: the edge of the window would cut it off on the right. So the catalog works as a
 drill-down:
 
 - The category column takes the full width, and category labels wrap instead of being truncated.
-- An open category (by touch, click, Enter or Space) replaces the category column with its showcase. The showcase
+- An open category (by touch, click, Enter or Space) replaces the category column with its flyout. The flyout
   starts with a "Back" row that shows the category name. If the category has a link of its own, the link shows the
   name, on the row below, instead of the "Back" row. Below that, the columns of links follow, one under another.
-- "Back" returns the category column and puts focus on the category the person came from. Escape inside the showcase
+- "Back" returns the category column and puts focus on the category the person came from. Escape inside the flyout
   works like "Back".
 - When you drill down, focus moves to "Back": the category button is hidden along with the category column, and focus
-  left on it would be lost. In the showcase on a narrow screen, the arrow key toward the category column does
+  left on it would be lost. In the flyout on a narrow screen, the arrow key toward the category column does
   nothing, because the column is not beside it.
 - There is no aim on a narrow screen: hovering with the mouse does not open a category, and moving the mouse away does
   not cancel the drill-down. Replacing the column under the cursor would pull it out from under the person's hand.
@@ -133,25 +147,25 @@ catalog supplies "Назад".
 The kit reads the width through `matchMedia`, not through CSS, because the width determines the contents of the
 markup (the category column is hidden), not just the look. Before hydration and on the server, the hook reports a wide
 screen (ADR-0018): the server does not know the width, and the markup it produces is always the regular one. On a phone,
-after hydration, a showcase opened by `defaultValue` is re-rendered once as a drill-down. On a phone the `nav` takes
+after hydration, a flyout opened by `defaultValue` is re-rendered once as a drill-down. On a phone the `nav` takes
 the full width through the `max-sm:w-full` class; a `w-*` class from `className` applies on a wide screen.
 
 ## Aim
 
-On its way from a category to its showcase, the pointer cuts diagonally and brushes against the neighboring
-categories. If hover opened them at once, the showcase would change under the person's hand, and the links would be
-out of reach. Aim watches where the pointer is heading: while it moves toward the open showcase, a neighboring
+On its way from a category to its flyout, the pointer cuts diagonally and brushes against the neighboring
+categories. If hover opened them at once, the flyout would change under the person's hand, and the links would be
+out of reach. Aim watches where the pointer is heading: while it moves toward the open flyout, a neighboring
 category does not take over the hover.
 
 - The direction of the pointer's last step is compared with the wedge from its previous position to the two corners
-  of the showcase's near edge: Kamens's triangle from "Where it comes from". A step into the wedge means the pointer
+  of the flyout's near edge: Kamens's triangle from "Where it comes from". A step into the wedge means the pointer
   is aiming.
 - One movement off course is forgiven; two in a row are not, and then the category under the pointer opens.
 - If the pointer stops for 300 ms, the category under it opens even if it was aiming. The menu does not get stuck.
-- When the pointer reaches the showcase, the deferred switch is canceled.
+- When the pointer reaches the flyout, the deferred switch is canceled.
 - Clicking a category opens it at once, bypassing aim. The keyboard knows nothing about aim.
 - Mouse only, and only on a wide screen: touch and pen open a category at once, and a narrow screen has no aim at all.
-- The first hover, while there is no showcase yet, opens the category with no delay at all: there is nothing to aim at.
+- The first hover, while there is no flyout yet, opens the category with no delay at all: there is nothing to aim at.
 
 The model is the same as for react-aria submenus (`Menu` with `SubmenuTrigger`), so that the two menus of the kit
 behave alike. There are two differences. The category switch is deferred, not suppressed with `pointer-events: none`
@@ -208,16 +222,21 @@ Primary sources:
 ## Keyboard and names
 
 - The category column is a single Tab stop. The Up and Down arrows, Home and End move through the categories;
-  disabled ones are skipped. When the user comes back with Tab, they land on the category they were on.
-- Enter, Space and the arrow toward the showcase open it and put focus on the first link. On a category that is a
+  disabled ones are skipped. When the user comes back with Tab, they land on the category they were on; the first
+  time, on the open one, otherwise on the current section (`active`), otherwise on the first one.
+- Typing a letter on a category moves focus to the next category whose label starts with it, wrapping around; the
+  same letter again moves to the one after. Letters typed in quick succession match the start of a label, and a
+  half-second pause clears them. A Space in the middle of typing is part of the label ("Home and garden"), not a
+  key that opens the category. A letter with Ctrl, Cmd or Alt is a keyboard shortcut, and the catalog leaves it alone.
+- Enter, Space and the arrow toward the flyout open it and put focus on the first link. On a category that is a
   link, Enter follows it.
-- Inside the showcase, plain Tab works. The arrow toward the category column returns focus to the category, and so
-  does Escape, which also closes the showcase. Tab past the last link moves on down the page and closes the showcase.
-- While the showcase is open, it follows the arrow-key focus the way it follows hover.
-- The arrow "toward the showcase" is the one that points to where the showcase sits: in right-to-left writing and at
+- Inside the flyout, plain Tab works. The arrow toward the category column returns focus to the category, and so
+  does Escape, which also closes the flyout. Tab past the last link moves on down the page and closes the flyout.
+- While the flyout is open, it follows focus moved by arrows and letters the way it follows hover.
+- The arrow "toward the flyout" is the one that points to where the flyout sits: in right-to-left writing and at
   the edge of the screen, the arrows swap places.
 - A screen reader hears a navigation with the name from `aria-label`, the categories as expand/collapse buttons, the
-  showcase as a region named after the category, and a column as a list named after its title.
+  flyout as a region named after the category, and a column as a list named after its title.
 
 ## Dropdown mode
 
@@ -257,11 +276,11 @@ into one. `MegaMenuButton` accepts the kit's button look (`variant`, `tone`, `si
 - **Opening.** Click, Enter, Space and the Down arrow on the button. Hover does not open the catalog: it should not
   jump out at a stray mouse movement.
 - **Focus.** On opening, focus goes to the first available category (or, if one is already open through `value` or
-  `defaultValue`, to that one), and the showcase stays closed until a category is chosen. After that the category column
-  and the showcase work as in the embedded mode.
+  `defaultValue`, to that one), and the flyout stays closed until a category is chosen. After that the category column
+  and the flyout work as in the embedded mode.
 - **Closing.** Escape on a category, a press outside the catalog, a second click on the button, following any link (a
   category, a column title, a `MegaMenuLink`, router links included) and Tab past the last element.
-  The first Escape inside a showcase closes only the showcase and returns focus to its category; the next one closes
+  The first Escape inside a flyout closes only the flyout and returns focus to its category; the next one closes
   the overlay.
 - **Returning focus.** Focus returns to the button on Escape and on a second click. After Tab past the last element,
   focus moves on down the page, past the button; Shift+Tab before the first element returns it to the button. After a
@@ -270,10 +289,14 @@ into one. `MegaMenuButton` accepts the kit's button look (`variant`, `tone`, `si
   overlay is neither a menu nor a dialog, but the same navigation with links. The overlay has no `dialog` role.
 - **Layers.** The overlay sits on the `popover` layer: above the scrim of an open `Dialog`, below the confirmation.
   Inside a dialog, the first Escape closes the catalog and the next one closes the dialog. If focus is in an open
-  showcase, the very first Escape closes only the showcase and returns focus to its category.
+  flyout, the very first Escape closes only the flyout and returns focus to its category.
+- **Narrow screens.** Under 640px the overlay spans the window, minus 8px at each edge, instead of shrinking to the
+  longest label: labels wrap, a long one can't push the catalog off screen, and the width stays put when you drill
+  into a category. The drill-down, "Back" and Escape work inside the overlay just as in the embedded mode: the first
+  Escape in a flyout brings the column back, the next one closes the catalog.
 - **Height.** The overlay is no taller than the visible area from the button to the edge of the window. The category
-  column and the showcase each scroll within themselves (`overscroll-contain`), not the overlay as a whole: otherwise the
-  overlay's frame would clip the showcase, which stands beside the category column. On iOS the height is capped at
+  column and the flyout each scroll within themselves (`overscroll-contain`), not the overlay as a whole: otherwise the
+  overlay's frame would clip the flyout, which stands beside the category column. On iOS the height is capped at
   `min(24rem, 60dvh)`, like the `Menu` panel.
 - **Appearance.** Smooth, on the kit's motion scale; with `prefers-reduced-motion`, no animation.
 - **Server.** The server renders a closed button; the overlay is mounted in a portal after opening.
@@ -282,15 +305,17 @@ into one. `MegaMenuButton` accepts the kit's button look (`variant`, `tone`, `si
 
 - Implementation: `src/components/navigation/MegaMenu.tsx`; aim is in `src/components/navigation/useMenuAim.ts`.
 - Tests: `tests/mega-menu.test.tsx` covers roles and `aria-controls`, hover and mounting only the open
-  showcase, closing with a delay, roving tabindex, Enter, Escape and the arrows, Tab past the last link,
-  a category that is a link, a disabled category, `current`, `asChild` and `link`, the controlled value, a press
-  outside the catalog and server rendering; `tests/mega-menu-aim.test.tsx` covers aim on mocked geometry and fake
+  flyout, closing with a delay, roving tabindex, Enter, Escape and the arrows, Tab past the last link,
+  a category that is a link, a disabled category, `active` and the `current` alias, `asChild` and `link` (on a
+  category and on a column), fragments in a column, the current section and the Tab stop, typeahead, categories
+  inside your own components, the controlled value, a press outside the catalog and server rendering; `tests/mega-menu-aim.test.tsx` covers aim on mocked geometry and fake
   time, and the flip at the edge; `tests/mega-menu-touch.test.tsx` covers touch and pen, a mocked `matchMedia`,
-  the drill-down in place of the category column, "Back" and focus, Escape, labels from the message catalog and server
-  rendering; the browser test `tests-visual/mega-menu.spec.ts` uses a real mouse moving diagonally and down
-  the category column.
+  the drill-down in place of the category column, "Back" and focus, Escape, labels from the message catalog, the
+  drill-down with categories inside your own components and server rendering; the browser test
+  `tests-visual/mega-menu.spec.ts` uses a real mouse moving diagonally and down the category column, and checks the
+  width of the dropdown on a phone.
 - Dropdown mode: `tests/mega-menu-dropdown.test.tsx` covers opening by click and keys with focus on the first
-  category, every way of closing and returning focus, Escape in the showcase, `open` / `defaultOpen` / `onOpenChange`, the
-  `popover` layer, the order of Escape inside a `Dialog` and server rendering.
+  category, every way of closing and returning focus, Escape in the flyout, `open` / `defaultOpen` / `onOpenChange`, the
+  `popover` layer, the order of Escape inside a `Dialog`, the drill-down on a narrow screen and server rendering.
 - Story: `src/components/navigation/MegaMenu.stories.tsx`, including `DropdownInTopBar`, a mega menu in a top bar; at phone
-  width, `PhoneColumn` and `PhoneDrillDown`.
+  width, `PhoneColumn`, `PhoneDrillDown`, `PhoneDropdown` and `PhoneDropdownDrillDown`.