@olddevs/ui 0.0.0-stage → 4.0.0

package/src/lib/filter-range.ts

@@ -0,0 +1,48 @@
+import type { UiMessages } from "../i18n/messages.js";
+import { parseDateOrNull } from "./date.js";
+
+/**
+ * Подпись границ диапазона: «50–100», «от 50», «до 12 марта».
+ *
+ * Принимает границы уже ОТФОРМАТИРОВАННЫМИ, а слова «от» и «до» берёт из
+ * каталога сообщений: порядок слов в подписи — дело языка, а не кода
+ * (ADR-0063). Пустая граница значит «не ограничено» и в подпись не попадает.
+ */
+export function rangeText(messages: UiMessages, from: string, to: string): string {
+  if (from !== "" && to !== "") return messages.filterBar.rangeBetween({ from, to });
+  if (from !== "") return messages.filterBar.rangeFrom({ from });
+  return messages.filterBar.rangeTo({ to });
+}
+
+/**
+ * Число-граница для подписи по правилам локали. Не число — как есть: значение
+ * могло прийти из адреса, и выдумывать за него «NaN» нельзя.
+ */
+export function formatRangeNumber(value: string, locale: string): string {
+  if (value === "") return value;
+  const n = Number(value);
+  return Number.isFinite(n) ? new Intl.NumberFormat(locale).format(n) : value;
+}
+
+/**
+ * Дата-граница для подписи: «12 марта 2026 г.».
+ *
+ * Год пишется всегда, даже в текущем: подпись переживает адрес и сохранённый
+ * вид, и «до 12 марта», открытое годом позже, молча означало бы другую дату.
+ * Строка из адреса разбирается строго (`parseDateOrNull`), неразбираемая
+ * остаётся как есть.
+ */
+export function formatRangeDate(value: string, locale: string): string {
+  const parsed = parseDateOrNull(value);
+  if (!parsed) return value;
+  // Сборка по частям в местном полудне, как в `formatDate`: `new Date("ГГГГ-ММ-ДД")`
+  // — полночь UTC, и восточнее Гринвича дата сдвинулась бы на сутки.
+  const date = new Date(parsed.year, parsed.month - 1, parsed.day);
+  // Годы 0–99 конструктор отображает в 1900+y.
+  date.setFullYear(parsed.year);
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).format(date);
+}

package/src/lib/interaction-modality.ts

@@ -0,0 +1,134 @@
+/**
+ * Модальность ввода: чем пользователь пришёл к фокусу.
+ *
+ * Зачем. `:focus-visible` отвечает на вопрос «рисовать ли кольцо», а не «кто
+ * поставил фокус»: его ставит и клавиатура, и скринридер (свайп VoiceOver и
+ * TalkBack, виртуальный курсор NVDA и JAWS) — страница при этом не получает ни
+ * клавиши, ни указателя, фокус просто появляется. Для кольца это верно, а для
+ * всплывающего без объявления содержимого (`HoverCard`) — нет: оно появилось бы
+ * под скринридером ни с того ни с сего, а при экранной лупе ещё и закрыло бы
+ * соседний текст.
+ *
+ * Три значения:
+ * - `keyboard` — фокус пришёл, пока нажата навигационная клавиша;
+ * - `pointer` — перед фокусом было нажатие мышью, пером или пальцем;
+ * - `virtual` — фокус пришёл, а перед ним не было ни того, ни другого.
+ *
+ * Логика — та же, что у `useFocusVisible` в react-aria (оттуда же и определение
+ * виртуальной модальности), но своя: это приватный экспорт пакета, который кит
+ * не объявляет зависимостью (ADR-0004), а рисковать публичным поведением ради
+ * неподдерживаемого пути нельзя. Модуль не знает про React и ничего не рисует.
+ *
+ * Слушатели ставятся один раз и лениво — при первом `trackInteractionModality()`,
+ * а не при импорте: серверный код и компонент, которому модальность не нужна,
+ * ничего не платят. Снимать их не нужно: восемь пассивных слушателей на страницу
+ * дешевле, чем счётчик подписчиков и гонка «снял — тут же поставил».
+ */
+export type InteractionModality = "keyboard" | "pointer" | "virtual";
+
+/**
+ * Клавиши, которыми двигают фокус. Enter, пробел, буквы и Escape в список не
+ * входят: они фокус не переводят, а когда программа переводит его после них
+ * (закрылось окно — фокус вернулся на кнопку), всплывать карточке незачем.
+ */
+const NAVIGATION_KEYS = new Set([
+  "Tab",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+]);
+
+let installed = false;
+let current: InteractionModality = "virtual";
+/**
+ * Событие, которое объясняет фокус. Клавиша живёт от keydown до keyup: за это
+ * время фокус может прийти не один раз (Tab попал на обёртку, та передала его
+ * вглубь), и все эти фокусы — от клавиши. После keyup клавиша ничего не
+ * объясняет: свайп скринридера после давнего Tab не должен считаться
+ * клавиатурным. Нажатие объясняет и программный фокус вслед за ним (обработчик
+ * клика возвращает фокус на триггер) — это продолжение нажатия.
+ */
+let pending: "keyboard" | "pointer" | null = null;
+
+const MODIFIER_KEYS = new Set(["Shift", "Control", "Alt", "Meta"]);
+
+function onKeyDown(event: KeyboardEvent) {
+  // Сами модификаторы — часть сочетания Shift+Tab, а не отдельное нажатие.
+  if (MODIFIER_KEYS.has(event.key)) return;
+  // С Meta и Ctrl Tab — переключение вкладок браузера, а не движение фокуса.
+  // Alt допустим только с Tab: Alt+Tab ОС страница не видит, а Option+Tab в
+  // Safari на macOS — единственный способ дойти клавишей до ссылок.
+  const blocked = event.metaKey || event.ctrlKey || (event.altKey && event.key !== "Tab");
+  if (blocked || !NAVIGATION_KEYS.has(event.key)) {
+    // Другая клавиша (Enter, буква, Escape) — не навигация: фокус, который
+    // программа поставит после неё, клавиатурным не считается.
+    if (pending === "keyboard") pending = null;
+    return;
+  }
+  pending = "keyboard";
+  current = "keyboard";
+}
+
+function onKeyUp() {
+  // Фокус от клавиши приходит на keydown. Отпущенная клавиша фокус больше не
+  // объясняет: следующий фокус — уже не её, например свайп скринридера.
+  if (pending === "keyboard") pending = null;
+}
+
+function onPointerDown() {
+  pending = "pointer";
+  current = "pointer";
+}
+
+/**
+ * Слушаем `focusin`, а не `focus`: React строит `onFocus` на `focusin`, и
+ * слушатель на `document` в фазе погружения сработает раньше его обработчика
+ * при любом порядке этих двух событий в браузере.
+ */
+function onFocusIn() {
+  current = pending ?? "virtual";
+}
+
+/**
+ * Окно потеряло или вернуло фокус. Возвращая его, браузер ставит фокус обратно
+ * на прежний элемент без клавиши и без указателя; прежняя модальность тут
+ * устарела, и считать этот фокус клавиатурным нельзя.
+ */
+function onWindowFocusChange() {
+  pending = null;
+  current = "virtual";
+}
+
+/**
+ * Ставит слушатели, если они ещё не стоят. Безопасно звать сколько угодно раз и
+ * на сервере (там это пустая функция). Звать надо ДО фокуса, который предстоит
+ * классифицировать: событие, уже прошедшее, задним числом не прочитать.
+ */
+export function trackInteractionModality(): void {
+  if (installed || typeof document === "undefined" || typeof window === "undefined") return;
+  installed = true;
+  const options = { capture: true, passive: true } as const;
+  document.addEventListener("keydown", onKeyDown, options);
+  document.addEventListener("keyup", onKeyUp, options);
+  document.addEventListener("pointerdown", onPointerDown, options);
+  // Старые браузеры без Pointer Events и эмуляция мыши после касания.
+  document.addEventListener("mousedown", onPointerDown, options);
+  document.addEventListener("touchstart", onPointerDown, options);
+  document.addEventListener("focusin", onFocusIn, options);
+  window.addEventListener("blur", onWindowFocusChange);
+  window.addEventListener("focus", onWindowFocusChange);
+}
+
+/**
+ * Модальность последнего фокуса (в `onFocus` — того, что только что пришёл).
+ * До первого события и до `trackInteractionModality()` — `virtual`: доказательств
+ * клавиши нет, а ошибиться безопаснее в сторону «не открывать».
+ */
+export function getInteractionModality(): InteractionModality {
+  return current;
+}

package/src/lib/mask.ts

@@ -0,0 +1,226 @@
+/**
+ * Маска ввода: форматирование, разбор и позиция каретки.
+ *
+ * Функции чистые и живут отдельно от компонента намеренно: каретка — то, из-за
+ * чего маска вообще сложна, и проверять её удобнее на строках, а не через DOM.
+ *
+ * ТОКЕНЫ МАСКИ: `9` — цифра, `a` — буква, `*` — цифра или буква. Любой другой
+ * символ — литерал, он подставляется сам и вводом не занимается.
+ *
+ * Экранирования нет: литерал `9` в маске выразить нечем. Это ограничение, а не
+ * недосмотр — форматов с обязательной цифрой-литералом среди наших не нашлось,
+ * а `\` в маске сделал бы её саму синтаксисом, который надо документировать
+ * отдельно. Появится такой формат — появится и экранирование.
+ */
+
+/** Токены маски. Union, а не `string`: по нему разбирается сообщение об отказе. */
+export type MaskToken = "9" | "a" | "*";
+
+const TOKENS: Record<MaskToken, RegExp> = {
+  9: /\d/,
+  a: /\p{L}/u,
+  "*": /[\p{L}\d]/u,
+};
+
+const isToken = (ch: string): ch is MaskToken => Object.hasOwn(TOKENS, ch);
+const matches = (ch: string, token: MaskToken) => TOKENS[token].test(ch);
+
+/**
+ * Раскладывает сырое значение по маске.
+ *
+ * Литералы подставляются только пока есть что ставить дальше: иначе пустое
+ * поле показывало бы «+7 (» ещё до первого символа, а поле с одной цифрой —
+ * хвост из скобок и дефисов.
+ */
+export function formatMask(raw: string, mask: string): string {
+  let out = "";
+  let ri = 0;
+
+  for (const m of mask) {
+    if (ri >= raw.length) break;
+    if (isToken(m)) {
+      out += raw[ri]!;
+      ri += 1;
+    } else {
+      out += m;
+    }
+  }
+  return out;
+}
+
+/**
+ * Достаёт из показанной строки сырое значение.
+ *
+ * Разбор идёт ПОЗИЦИОННО, вместе с маской, а не «выбросим всё, что похоже на
+ * литерал»: в маске `+7 (999)` литерал `7` — тоже цифра, и наивный фильтр
+ * утащил бы его в значение.
+ */
+export function unmask(display: string, mask: string): string {
+  return walkMask(display, mask).raw;
+}
+
+/**
+ * Один проход по маске: и значение, и то, где проход остановился.
+ *
+ * Вынесен, чтобы `unmask` и `unmaskOverflow` не разошлись: две копии одного
+ * позиционного разбора — ровно тот случай, когда вторая молча начинает считать
+ * иначе.
+ */
+function walkMask(
+  display: string,
+  mask: string,
+  kinds: MaskToken[] = []
+): { raw: string; consumed: number; skipped: number } {
+  let raw = "";
+  let di = 0;
+  let skipped = 0;
+
+  for (let mi = 0; mi < mask.length && di < display.length; mi += 1) {
+    const m = mask[mi]!;
+    if (isToken(m)) {
+      // Символы, которые в этот токен не годятся, пропускаются: так вставка
+      // «+7 916 123» раскладывается по маске из одних цифр.
+      while (di < display.length && !matches(display[di]!, m)) {
+        // Но пропущенный символ пропущенному рознь. Пробел и дефис между
+        // группами — оформление, его потеря ничего не значит. А вот символ,
+        // который маска приняла бы В ДРУГОМ месте, — это потеря ЗНАЧЕНИЯ, и
+        // она обязана быть посчитана: на маске `999-aaa` вставка `123-456`
+        // отдаёт `123`, молча теряя половину.
+        if (kinds.some((token) => matches(display[di]!, token))) skipped += 1;
+        di += 1;
+      }
+      if (di < display.length) {
+        raw += display[di]!;
+        di += 1;
+      }
+    } else if (display[di] === m) {
+      di += 1;
+    }
+  }
+  return { raw, consumed: di, skipped };
+}
+
+/**
+ * Сколько подходящих символов НЕ ВЛЕЗЛО в маску.
+ *
+ * Отдельная функция, а не второе поле у `unmask`: тот публичный и возвращает
+ * строку, менять его контракт ради признака нельзя.
+ *
+ * Зачем признак вообще нужен. `unmask` идёт по маске и останавливается на её
+ * конце — лишние символы отбрасываются молча. На телефонном поле это давало не
+ * обрезанный, а ЧУЖОЙ номер: `89161234567` (самая частая форма в буфере обмена)
+ * под маской `+7 (999) 999-99-99` превращался в `+7 (891) 612-34-56`. Значение
+ * при этом изменилось, поэтому проверка `raw === value` в `MaskedInput` отказ
+ * не замечала, и пользователю никто ничего не говорил.
+ *
+ * Переполнением считаются только символы, которые маска МОГЛА БЫ принять:
+ * хвост из пробелов и литералов — не потерянное значение, а мусор вокруг него.
+ *
+ * Считается потеря и В СЕРЕДИНЕ прохода, а не только хвост. На маске из
+ * однородных токенов её не бывает, но на смешанной (`999-aaa`) вставка
+ * `123-456` отдаёт `123` и теряет вторую половину — молча, потому что значение
+ * при этом изменилось и проверка отказа по токену её не видит.
+ */
+export function unmaskOverflow(display: string, mask: string): number {
+  const kinds = [...mask].filter(isToken);
+  if (kinds.length === 0) return 0;
+
+  // Считать «все подходящие символы минус ёмкость» НЕЛЬЗЯ, и это та самая
+  // ловушка, о которой предупреждает шапка модуля: в `+7 (999)` литерал `7` —
+  // тоже цифра. Наивный счёт объявлял бы `79161234567` переполнением на один
+  // символ, хотя номер влезает ровно. Позиция решается только позиционно.
+  const { consumed, skipped } = walkMask(display, mask, kinds);
+  let overflow = skipped;
+  for (let i = consumed; i < display.length; i += 1) {
+    if (kinds.some((token) => matches(display[i]!, token))) overflow += 1;
+  }
+  return overflow;
+}
+
+/** Сколько символов значения стоит левее позиции в показанной строке. */
+export function rawLengthBefore(mask: string, caret: number): number {
+  let count = 0;
+  for (let i = 0; i < Math.min(caret, mask.length); i += 1) if (isToken(mask[i]!)) count += 1;
+  return count;
+}
+
+/**
+ * Где стоять каретке после `count` введённых символов.
+ *
+ * Позиция берётся ЗА последним занятым токеном, вместе со следующими за ним
+ * литералами: иначе после третьей цифры каретка вставала перед `)`, и
+ * следующая цифра уезжала за скобку.
+ */
+export function caretAfter(mask: string, count: number): number {
+  if (count === 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < mask.length; i += 1) {
+    if (isToken(mask[i]!)) {
+      seen += 1;
+      if (seen === count) {
+        let end = i + 1;
+        while (end < mask.length && !isToken(mask[end]!)) end += 1;
+        return end;
+      }
+    }
+  }
+  return mask.length;
+}
+
+/** Сколько символов значения вмещает маска. */
+export function maskCapacity(mask: string): number {
+  return [...mask].filter(isToken).length;
+}
+
+/**
+ * Токен, которому обязан удовлетворять символ значения под номером `index`.
+ *
+ * Нужен для того, чтобы сказать пользователю, ЧЕГО тут ждали, а не безликое
+ * «неверный ввод». `undefined` означает, что маска кончилась: значение
+ * заполнено целиком, и следующему символу места нет.
+ */
+export function maskTokenAt(mask: string, index: number): MaskToken | undefined {
+  let seen = 0;
+  for (const m of mask) {
+    if (!isToken(m)) continue;
+    if (seen === index) return m;
+    seen += 1;
+  }
+  return undefined;
+}
+
+/**
+ * Хвост маски после того, что уже показано: подсказка формата.
+ *
+ * `formatMask` обрывается там, где кончилось значение, — поэтому пустое поле
+ * показывает пустоту, а поле с одной цифрой не говорит, сколько их ещё. Эта
+ * функция достраивает остаток: незанятые токены заменяются заполнителем,
+ * литералы остаются собой. Пустое телефонное значение даёт
+ * `+7 (___) ___-__-__`, а не голый ряд подчёркиваний — литералы и есть половина
+ * подсказки.
+ *
+ * ДЛИНЫ СХОДЯТСЯ ВСЕГДА: `formatMask(raw, mask).length + maskRemainder(...).length`
+ * равно длине маски при любом значении. На этом стоит показ — набранное и
+ * остаток лежат друг за другом и вместе занимают ровно ширину маски.
+ * Заполнитель поэтому односимвольный; строка длиннее сломала бы равенство.
+ *
+ * Наружу не экспортируется — как `caretAfter` и `rawLengthBefore`: это
+ * механика показа, а не словарь для потребителя.
+ */
+export function maskRemainder(raw: string, mask: string, fill = "_"): string {
+  let out = "";
+  let ri = 0;
+  let mi = 0;
+
+  // Первый проход повторяет `formatMask` до места, где значение кончилось.
+  // Дублировать проход дешевле, чем возвращать оттуда пару: `formatMask`
+  // публичен, и его сигнатура — контракт с потребителем.
+  for (; mi < mask.length; mi += 1) {
+    if (ri >= raw.length) break;
+    if (isToken(mask[mi]!)) ri += 1;
+  }
+
+  for (; mi < mask.length; mi += 1) out += isToken(mask[mi]!) ? fill : mask[mi]!;
+
+  return out;
+}

package/src/lib/menu.ts

@@ -0,0 +1,196 @@
+import { OVERLAY_LAYER } from "./overlay-layer.js";
+import { TOUCH_HIDDEN_CLASS } from "./touch.js";
+import { TONE_TOKENS, type Tone } from "./variants.js";
+
+/**
+ * Вид меню — одной таблицей на две реализации.
+ *
+ * В пакете два меню: `Menu` на react-aria-components и `ContextMenu` на Radix.
+ * Разные библиотеки здесь не прихоть — контекстного меню react-aria не даёт
+ * вовсе, — но выглядеть они обязаны одинаково, иначе правая кнопка мыши
+ * открывала бы «другое» меню, и заметить это можно было бы только поставив оба
+ * рядом. Поэтому вид живёт здесь, а обе реализации его только применяют.
+ *
+ * Приём не новый для пакета: так же вынесены `NAV_BUTTON_CLASS` и
+ * `WEEKDAY_CELL_CLASS` у календаря.
+ *
+ * ЗДЕСЬ — ТОТ САМЫЙ СЛУЧАЙ, ГДЕ НУЖНЫ ВАРИАНТНЫЕ АТОМЫ. Правило пакета гласит:
+ * состояние берут рендер-пропом там, где красят потомка, и вариантом там, где
+ * красят сам элемент с `data-*`. Пункт меню — второй случай: вид задаётся одной
+ * строкой на все пункты сразу, и рендер-проп взять неоткуда. Отсюда
+ * `selected:`, `pressed:`, `open:` в таблице ниже.
+ */
+
+/** Панель меню: подложка, рамка, тень, отступы. */
+export const MENU_PANEL_CLASS =
+  "bg-surface-elevated border-line min-w-[180px] rounded-md border p-1 " +
+  "shadow-[var(--shadow-2)] outline-none " +
+  /*
+    ПРОКРУТКА ВНУТРИ ПАНЕЛИ, А НЕ ПОВЕРХ СТРАНИЦЫ.
+
+    Высоту панели задаёт не она: react-aria ставит поповеру инлайном
+    `max-height` по видимой области, Radix — `--radix-…-available-height`. Без
+    `overflow` всё, что в эту высоту не влезло, рисовалось за рамкой, поверх
+    содержимого и без подложки. На iOS 27 в Safari высота вышла в несколько
+    пикселей — рамка схлопнулась в полоску, а пункты меню легли на текст
+    Документа. `overscroll-contain` — чтобы докрутка до конца списка не
+    прокручивала страницу под меню.
+  */
+  "overflow-y-auto overscroll-contain " +
+  /*
+    НА iOS ВЫСОТУ ЗАДАЁМ САМИ. react-aria считает `max-height`
+    поповера от видимой области (`calculatePosition`, `getMaxHeight`), и на
+    iOS 27 в Safari выходил ноль: от панели оставались рамка и отступы — тонкая
+    полоска под кнопкой, пункты прятались внутри неё. Место самого меню при
+    этом верное, ошибается только высота, поэтому на iOS она перебивается
+    правилом с `!important` (инлайновый стиль react-aria без него сильнее):
+    24rem или 60 % динамической высоты экрана — что меньше. Остальное
+    прокручивается внутри панели. `-webkit-touch-callout` понимает только
+    WebKit на iOS; Android и десктоп считают высоту по-прежнему.
+  */
+  "[@supports(-webkit-touch-callout:none)]:max-h-[min(24rem,60dvh)]! " +
+  /*
+    СЛОЙ ОБЯЗАТЕЛЕН, и его здесь не было.
+
+    `Popover` и `Tooltip` осознанно взяли `z-[120]` с комментарием про
+    `ModalOverlay` (`z-90`); RAC-попоувер получает `zIndex: 100000` инлайном от
+    библиотеки. А Radix-попперу копировать было нечего: он берёт z-index из
+    вычисленного стиля содержимого, получал `auto`, и правый клик внутри
+    `Dialog` или `Drawer` рисовал контекстное меню ПОД затемнением — размытым и
+    некликабельным. Шкала слоёв — ADR-0041.
+  */
+  `${OVERLAY_LAYER.popover} ` +
+  /*
+    Появление и уход панели — НА ДВУХ ДИАЛЕКТАХ СРАЗУ, и это не дублирование.
+
+    `entering:`/`exiting:` — варианты RAC, они разворачиваются в `[data-entering]`
+    и `[data-exiting]`. Radix таких атрибутов не ставит вовсе: у него состояние
+    живёт в `data-state`. Пока здесь стоял только диалект RAC, комментарий
+    обещал, что «значения совпадают намеренно, иначе два меню открывались бы
+    по-разному», — а `ContextMenu` не анимировался НИКАК, потому что ни одно
+    правило до него не доставало. Обещание держалось на слове.
+
+    Теперь оба диалекта названы явно, и оба меню открываются и закрываются
+    одинаково — проверяется это в браузере, обоими путями сразу.
+
+    Уход задан токеном, а не `opacity-0`. Прежняя запись выглядела выходом, но
+    им не была: переход в ноль без длительности — то же мгновенное пропадание,
+    записанное длиннее. Токен вдобавок виден гейту `reduce` (ADR-0043), а
+    literal — нет.
+  */
+  "entering:animate-fadein exiting:animate-fadeout " +
+  "data-[state=open]:animate-fadein data-[state=closed]:animate-fadeout";
+
+/**
+ * Пункт меню.
+ *
+ * `focus:` здесь равен `hover:` не по лени: в меню клавиатурный курсор и
+ * указатель — одно и то же место, и подсвечивать их по-разному значило бы
+ * показывать пользователю два курсора сразу. У react-aria это `data-focused`,
+ * который ставится и от мыши, и от стрелок.
+ */
+export const MENU_ITEM_CLASS =
+  "group flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-[13px] " +
+  "outline-none select-none " +
+  // Диалект react-aria.
+  "hover:bg-bg-2 focus:bg-bg-2 disabled:pointer-events-none disabled:opacity-50 " +
+  // Диалект Radix — см. комментарий ниже, без него ContextMenu разъезжается.
+  "data-[highlighted]:bg-bg-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+
+/**
+ * Строка списка — одна на все списки кита.
+ *
+ * С волны 26 её используют `Transfer`, `Combobox`, `CommandPalette` и `Select`.
+ * Последний долго стоял особняком: его строка — не `ListBoxItem`, а обычная
+ * кнопка, и набор классов расходился с общим отступом (`py-[9px]` против
+ * `py-1.5`) и цветом выбора (`bg-bg-3` против `selected:bg-accent-soft`).
+ * Списки, поставленные рядом, различались высотой строки и тем, как выглядит
+ * выбранное.
+ *
+ * Работает это и на не-RAC узле: вариант `selected:` разворачивается в
+ * `[data-selected]` без требования `data-rac` — у `selected` нет нативного
+ * соответствия, — поэтому кнопке достаточно проставить атрибут.
+ *
+ * Строка списка выбора — `ListBoxItem` react-aria.
+ *
+ * Отличается от `MENU_ITEM_CLASS` одним: у списка есть выбранное состояние, у
+ * меню его нет. Вынесена, когда четвёртым её написал `Transfer`, — и написал
+ * с `focus-visible:` вместо `focus:`, то есть единственный в репозитории
+ * разошёлся с остальными тремя.
+ *
+ * `focus:`, а не `focus-visible:`, и это существенно: у react-aria это
+ * `data-focused`, который ставится и стрелками, и мышью. Подсвечивать их
+ * по-разному значило бы показывать два курсора сразу — тот же довод, что у
+ * пункта меню ниже.
+ */
+export const LISTBOX_ITEM_CLASS =
+  "flex cursor-pointer items-center rounded-sm px-2.5 py-1.5 text-[13px] outline-none " +
+  "text-fg-0 hover:bg-bg-2 focus:bg-bg-2 selected:bg-accent-soft " +
+  "disabled:cursor-default disabled:opacity-50";
+
+/*
+  ПОЧЕМУ ЗДЕСЬ ДВА НАБОРА СЕЛЕКТОРОВ.
+
+  Строка одна на две библиотеки, а состояния они называют по-разному, и
+  совпадает далеко не всё:
+
+    состояние      react-aria          Radix
+    наведение      data-hovered        data-highlighted
+    фокус          data-focused        data-highlighted (то же самое)
+    выключен       data-disabled       data-disabled, но НЕ :disabled
+    отмечен        data-selected       data-state="checked"
+
+  Плагин `tailwindcss-react-aria-components` переопределяет `hover:` и
+  `disabled:` на двойной селектор «элемент RAC ИЛИ нативный псевдокласс».
+  На дивах Radix это спасает только `hover:` — у них есть настоящий `:hover`.
+  А `:disabled` — псевдокласс полей формы, и на диве с `data-disabled` он не
+  срабатывает вовсе: пункт выглядел бы рабочим, оставаясь неработающим.
+
+  Отсюда правило: общая таблица вида обязана говорить на обоих диалектах.
+  Проверяется это не рассуждением, а снимком «два меню рядом» в
+  `Menu.stories.tsx` — расхождение видно глазами.
+*/
+
+/** Подпись раздела внутри меню. */
+export const MENU_SECTION_LABEL_CLASS =
+  "text-fg-3 px-2 pt-2 pb-1 text-[11px] font-bold tracking-wide uppercase";
+
+/** Разделитель между группами пунктов. */
+export const MENU_SEPARATOR_CLASS = "bg-line -mx-1 my-1 h-px";
+
+/** Иконка слева от подписи: галочка отмеченного пункта, иконка действия. */
+export const MENU_ITEM_ICON_CLASS = "flex size-4 shrink-0 items-center justify-center";
+
+/** Горячая клавиша справа. Не действие, а напоминание — отсюда приглушённость. */
+export const MENU_ITEM_SHORTCUT_CLASS = `text-fg-3 ml-auto pl-4 text-[11px] tabular-nums ${TOUCH_HIDDEN_CLASS}`;
+
+/** Стрелка пункта с подменю. */
+export const MENU_ITEM_SUBMENU_CLASS = "text-fg-3 ml-auto pl-4";
+
+/**
+ * Цвет пункта по тону.
+ *
+ * `danger` красит ТЕКСТ И ИКОНКУ, а не подложку. Подложкой пункт красится при
+ * наведении, и красный фон на всю строку читался бы как «выбрано», а не как
+ * «опасно» — то есть ровно наоборот.
+ */
+export const MENU_ITEM_TONE: Record<Tone, string> = {
+  neutral: "text-fg-0",
+  accent: TONE_TOKENS.accent.fg,
+  success: TONE_TOKENS.success.fg,
+  warning: TONE_TOKENS.warning.fg,
+  danger: TONE_TOKENS.danger.fg,
+};
+
+/**
+ * Отмеченный пункт-переключатель: подложка и цвет из словаря тонов.
+ *
+ * Второй парой идёт диалект Radix: у него отмеченность выражена не отдельным
+ * атрибутом, а значением `data-state="checked"`.
+ */
+export const MENU_ITEM_SELECTED_CLASS =
+  `${TONE_TOKENS.accent.selectedBg} ${TONE_TOKENS.accent.selectedFg} ` +
+  "data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent-strong";
+
+/** Нажатый пункт — отдельный сигнал от наведения, ставится и с клавиатуры. */
+export const MENU_ITEM_PRESSED_CLASS = TONE_TOKENS.neutral.pressedBg;