@olddevs/ui 4.1.0 → 4.2.0

package/src/components/navigation/TreeView.tsx

@@ -165,57 +165,78 @@ export function TreeView({
         className="outline-none [--tree-indent:1.25rem]"
       >
         <TreeItemContent>
-          {({ isExpanded, hasChildItems }) => (
-            <div
-              ref={(content) => markCurrent(content, current)}
-              className={cn(
-                "text-fg-1 flex items-center gap-2 rounded-xs py-1.5 pr-2 text-[13px] leading-5",
-                "hover:bg-bg-2 selected:bg-accent-soft selected:text-fg-0",
-                // Текущий узел — подложка и вес шрифта, как у `NavItem` с `active`.
-                current && "bg-bg-3 text-fg-0 font-semibold",
-                "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:-outline-offset-2",
-                "disabled:opacity-50"
-              )}
-              // Уровень вложенности берётся у react-aria: она кладёт его в
-              // `--tree-item-level` на строке, и считать глубину самим не нужно
-              // — иначе у нас была бы вторая копия того же числа.
-              style={{
-                paddingLeft: "calc((var(--tree-item-level) - 1) * var(--tree-indent) + 0.25rem)",
-              }}
-            >
-              {hasChildItems ? (
-                <Button
-                  slot="chevron"
-                  aria-label={isExpanded ? messages.treeView.collapse : messages.treeView.expand}
-                  className={cn(
-                    "text-fg-3 hover:text-fg-0 flex cursor-pointer items-center rounded-xs",
-                    "transition-colors",
-                    "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2"
-                  )}
-                >
-                  <ChevronRightIcon
-                    size={14}
-                    aria-hidden
+          {({ isExpanded, hasChildItems, isSelected, isDisabled }) => {
+            // Гасятся шеврон, иконка и подпись по отдельности, а не весь `div`:
+            // флажок выбора получает блокировку от строки сам и гасится собственным
+            // `disabled:opacity-50`, так что приглушение всего ряда дало бы ему
+            // двойное — 25% вместо 50%.
+            const dim = isDisabled && "opacity-50";
+            return (
+              <div
+                ref={(content) => markCurrent(content, current)}
+                className={cn(
+                  "text-fg-1 flex items-center gap-2 rounded-xs py-1.5 pr-2 text-[13px] leading-5",
+                  // Выбор и блокировка берутся из рендер-пропа, а не вариантами
+                  // `selected:` и `disabled:`: `data-selected` и `data-disabled`
+                  // react-aria ставит на строку (`row`), а красится её содержимое —
+                  // вариант на нём не срабатывал, и ни выбранный узел не
+                  // подсвечивался, ни заблокированный не гас. Тот же случай, что
+                  // шеврон в `Accordion`.
+                  //
+                  // Приглушение — не на всём `div`, а на частях (см. `dim` ниже).
+                  //
+                  // Текущий узел — подложка и вес шрифта, как у `NavItem` с `active`.
+                  // Стоит ДО выбора: `cn` оставляет последнюю подложку, и у узла,
+                  // который и текущий, и выбран, видна подложка выбора — как было,
+                  // пока порядок решал каскад вариантов.
+                  current && "bg-bg-3 text-fg-0 font-semibold",
+                  isSelected ? "bg-accent-soft text-fg-0" : !isDisabled && "hover:bg-bg-2",
+                  "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:-outline-offset-2"
+                )}
+                // Уровень вложенности берётся у react-aria: она кладёт его в
+                // `--tree-item-level` на строке, и считать глубину самим не нужно
+                // — иначе у нас была бы вторая копия того же числа.
+                style={{
+                  paddingLeft: "calc((var(--tree-item-level) - 1) * var(--tree-indent) + 0.25rem)",
+                }}
+              >
+                {hasChildItems ? (
+                  <Button
+                    slot="chevron"
+                    aria-label={isExpanded ? messages.treeView.collapse : messages.treeView.expand}
                     className={cn(
-                      "transition-transform motion-reduce:transition-none",
-                      isExpanded && "rotate-90"
+                      "text-fg-3 hover:text-fg-0 flex cursor-pointer items-center rounded-xs",
+                      "transition-colors",
+                      dim,
+                      "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2"
                     )}
-                  />
-                </Button>
-              ) : (
-                // Место раскрывателя занято всегда: без него подписи листьев
-                // разъезжаются с подписями узлов на том же уровне.
-                <span aria-hidden className="w-[14px] shrink-0" />
-              )}
-              {selectionMode ? (
-                <Checkbox slot="selection" label={messages.treeView.select} />
-              ) : null}
-              {node.icon != null && (
-                <span className="text-fg-3 flex shrink-0 items-center">{node.icon}</span>
-              )}
-              <span className="min-w-0 truncate">{node.label}</span>
-            </div>
-          )}
+                  >
+                    <ChevronRightIcon
+                      size={14}
+                      aria-hidden
+                      className={cn(
+                        "transition-transform motion-reduce:transition-none",
+                        isExpanded && "rotate-90"
+                      )}
+                    />
+                  </Button>
+                ) : (
+                  // Место раскрывателя занято всегда: без него подписи листьев
+                  // разъезжаются с подписями узлов на том же уровне.
+                  <span aria-hidden className="w-[14px] shrink-0" />
+                )}
+                {selectionMode ? (
+                  <Checkbox slot="selection" label={messages.treeView.select} />
+                ) : null}
+                {node.icon != null && (
+                  <span className={cn("text-fg-3 flex shrink-0 items-center", dim)}>
+                    {node.icon}
+                  </span>
+                )}
+                <span className={cn("min-w-0 truncate", dim)}>{node.label}</span>
+              </div>
+            );
+          }}
         </TreeItemContent>
         {node.children != null && node.children.length > 0 ? (
           <Collection items={node.children}>{renderNode}</Collection>

package/src/components/navigation/useMenuAim.ts

@@ -0,0 +1,202 @@
+"use client";
+
+import { useCallback, useEffect, useRef, type RefObject } from "react";
+
+/*
+  ПРИЦЕЛ МЕГАМЕНЮ — приём Amazon, разобранный Беном Каменсом в 2013 году.
+
+  Курсор идёт от Категории к её Витрине наискосок и по пути задевает соседние
+  Категории. Наивное «наведение открывает» сменило бы Витрину у человека под
+  рукой. Прицел смотрит, КУДА движется курсор: пока он идёт в сторону открытой
+  Витрины, соседняя Категория наведение не перехватывает.
+
+  Модель — как у `useSafelyMouseToSubmenu` в react-aria, чтобы подменю `Menu` и
+  мегаменю вели себя одинаково: направление последнего шага сравнивается с
+  сектором от предыдущей точки к двум углам ближнего края Витрины; смена
+  направления прощается; обработка прорежена до кадра; только мышь.
+
+  Два осознанных расхождения с react-aria:
+
+  1. Механизм — ОТЛОЖЕННАЯ СМЕНА Категории, а не `pointer-events: none` на
+     Столбце. Отключённые события гасят подсветку под курсором и съедают щелчок
+     по соседней Категории, а щелчок должен открывать сразу.
+  2. Время сброса — 300 мс (значение Каменса), а не 1000 мс react-aria. Его
+     подменю узкое и короткое; Столбец каталога листают, и секунда ожидания на
+     каждой остановке ощущается как залипание.
+*/
+
+/** Курсор стоит дольше — Категория под ним открывается, даже если он «целился». */
+export const AIM_SETTLE_MS = 300;
+
+/** Прореживание: один шаг на кадр. Чаще направление шумит пиксельной дрожью. */
+const THROTTLE_MS = 16;
+
+/**
+ * Сколько шагов «не туда» подряд прощается. Счётчик растёт на шаг к Витрине и
+ * падает на шаг мимо; целится курсор, пока счётчик выше нуля. Отсюда: одно
+ * случайное движение вбок прицел не сбрасывает, два подряд — сбрасывают.
+ */
+const ALLOWED_INVALID_MOVES = 2;
+
+/**
+ * Запас сектора по вертикали, пиксели. Без него курсор, идущий точно в угол
+ * Витрины, выпадал бы из сектора на дрожании руки.
+ */
+const SECTOR_PADDING = 24;
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * Идёт ли шаг `from → to` к Витрине: направление шага лежит внутри сектора от
+ * `from` к двум углам её ближнего края.
+ *
+ * Векторное произведение, а не `atan2`: тот же сектор без разрыва угла на ±π.
+ * Ось y экрана направлена вниз, отсюда знаки.
+ */
+export function isMovingToward(from: Point, to: Point, rect: DOMRect, side: "left" | "right") {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  if (dx === 0 && dy === 0) return false;
+  const edge = side === "right" ? rect.left : rect.right;
+  // Курсор уже за ближним краем — он в Витрине, а не на пути к ней.
+  if (side === "right" ? from.x >= edge : from.x <= edge) return false;
+  // Шаг от Витрины по горизонтали не может к ней вести.
+  if (side === "right" ? dx <= 0 : dx >= 0) return false;
+  const top = { x: edge - from.x, y: rect.top - SECTOR_PADDING - from.y };
+  const bottom = { x: edge - from.x, y: rect.bottom + SECTOR_PADDING - from.y };
+  const cross = (a: Point, b: Point) => a.x * b.y - a.y * b.x;
+  const step = { x: dx, y: dy };
+  // Справа: шаг «ниже» луча к верхнему углу и «выше» луча к нижнему. Слева
+  // ориентация лучей зеркальна, и знаки меняются местами.
+  return side === "right"
+    ? cross(top, step) >= 0 && cross(step, bottom) >= 0
+    : cross(top, step) <= 0 && cross(step, bottom) <= 0;
+}
+
+const NONE = Symbol("none");
+
+interface MenuAimOptions {
+  /** Открытая Категория; `null` — Витрины нет, и целиться не во что. */
+  value: string | null;
+  /** Открытая сейчас Витрина: её прямоугольник — цель. */
+  showcaseRef: RefObject<HTMLElement | null>;
+  /** Сменить Категорию (или закрыть Витрину — `null`). */
+  commit: (next: string | null) => void;
+}
+
+/**
+ * Прицел: решает, сменить Категорию под курсором сейчас или отложить.
+ *
+ * `request` зовётся из наведения на строку Столбца. Если Витрины нет или
+ * курсор не целится — смена сразу. Если целится — смена откладывается: курсор
+ * перестал целиться или стоит `AIM_SETTLE_MS` — открывается то, что под ним
+ * сейчас; дошёл до Витрины — смена отменяется.
+ *
+ * Прямоугольник Витрины берётся заново на каждом шаге, а не кешируется:
+ * прокрутка страницы и смена размера окна не оставляют его устаревшим, а цена
+ * — одно чтение раскладки на кадр, и только пока Витрина открыта.
+ */
+export function useMenuAim({ value, showcaseRef, commit }: MenuAimOptions) {
+  const previous = useRef<Point | null>(null);
+  const lastStep = useRef(0);
+  const aim = useRef(0);
+  const pending = useRef<string | null | typeof NONE>(NONE);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const commitRef = useRef(commit);
+  commitRef.current = commit;
+
+  const clearTimer = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+
+  const flush = useCallback(() => {
+    clearTimer();
+    const next = pending.current;
+    pending.current = NONE;
+    if (next !== NONE) commitRef.current(next);
+  }, []);
+
+  const settleLater = useCallback(() => {
+    clearTimer();
+    timer.current = setTimeout(flush, AIM_SETTLE_MS);
+  }, [flush]);
+
+  // Новая Витрина — новая цель: прежний счёт к ней отношения не имеет.
+  useEffect(() => {
+    aim.current = 0;
+    previous.current = null;
+    pending.current = NONE;
+    clearTimer();
+  }, [value]);
+
+  useEffect(() => clearTimer, []);
+
+  useEffect(() => {
+    if (value === null) return;
+    const onPointerMove = (event: PointerEvent) => {
+      if (event.pointerType === "touch" || event.pointerType === "pen") return;
+      const now = Date.now();
+      if (now - lastStep.current < THROTTLE_MS) return;
+      lastStep.current = now;
+      const point = { x: event.clientX, y: event.clientY };
+      const showcase = showcaseRef.current;
+      const from = previous.current;
+      previous.current = point;
+      if (!showcase || !from) return;
+
+      // Курсор дошёл до Витрины — отложенная смена больше не нужна.
+      if (event.target instanceof Node && showcase.contains(event.target)) {
+        pending.current = NONE;
+        clearTimer();
+        return;
+      }
+
+      const rect = showcase.getBoundingClientRect();
+      const side = rect.left >= from.x ? "right" : "left";
+      aim.current = isMovingToward(from, point, rect, side)
+        ? Math.min(aim.current + 1, ALLOWED_INVALID_MOVES)
+        : Math.max(aim.current - 1, 0);
+
+      if (pending.current === NONE) return;
+      // Перестал целиться — открывается то, над чем он сейчас; иначе ждём
+      // остановки заново: каждый шаг откладывает срок.
+      if (aim.current === 0) flush();
+      else settleLater();
+    };
+    document.addEventListener("pointermove", onPointerMove);
+    return () => document.removeEventListener("pointermove", onPointerMove);
+  }, [value, showcaseRef, flush, settleLater]);
+
+  /** Курсор наведён на строку Столбца: открыть её (`null` — закрыть Витрину). */
+  const request = useCallback(
+    (next: string | null) => {
+      if (next === value) {
+        // Вернулся на открытую Категорию — отложенная смена отменяется.
+        pending.current = NONE;
+        clearTimer();
+        return;
+      }
+      if (value === null || aim.current === 0) {
+        pending.current = NONE;
+        clearTimer();
+        commitRef.current(next);
+        return;
+      }
+      pending.current = next;
+      settleLater();
+    },
+    [value, settleLater]
+  );
+
+  /** Отменить отложенную смену: щелчок, клавиатура, уход из меню решают сами. */
+  const cancel = useCallback(() => {
+    pending.current = NONE;
+    clearTimer();
+  }, []);
+
+  return { request, cancel };
+}

package/src/components/overlays/Menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type ReactNode } from "react";
+import { forwardRef, useContext, type ReactNode } from "react";
 import {
   Button as AriaButton,
   Menu as AriaMenu,
@@ -8,6 +8,7 @@ import {
   MenuSection as AriaMenuSection,
   Header,
   Popover,
+  PopoverContext,
   Separator,
   type MenuItemProps as AriaMenuItemProps,
   type MenuProps as AriaMenuProps,
@@ -15,6 +16,7 @@ import {
 } from "react-aria-components";
 import { CheckIcon, ChevronRightIcon } from "../../icons.js";
 import { buttonClasses, type ButtonLookOptions } from "../../lib/button.js";
+import { useSubmenuPlacement } from "../../hooks/useSubmenuPlacement.js";
 import { cn } from "../../lib/cn.js";
 import {
   MENU_ITEM_CLASS,
@@ -83,7 +85,12 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(functio
 export interface MenuProps<T extends object = object> extends AriaMenuProps<T> {
   /** Отступ панели от кнопки, в пикселях. */
   offset?: number;
-  /** Сторона, с которой панель раскрывается. */
+  /**
+   * Сторона, с которой панель раскрывается. Корневое меню по умолчанию — под
+   * кнопкой слева (`bottom start`); вложенное, внутри `SubmenuTrigger`, —
+   * сбоку от своего пункта, а на узком экране под ним. Явное значение
+   * побеждает оба умолчания.
+   */
   placement?: "bottom start" | "bottom end" | "top start" | "top end" | "right top" | "left top";
 }
 
@@ -115,6 +122,19 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "children" | "cla
  * меню руками. Это же делает работоспособным `SubmenuTrigger`: он ждёт вторым
  * ребёнком именно попоувер.
  *
+ * ПОДМЕНЮ раскрывается сбоку от своего пункта, и это умолчание нужно
+ * выставлять самим. `SubmenuTrigger` отдаёт вложенному поповеру место
+ * `end top` через контекст, но явный проп поповера важнее контекста, а корневое
+ * умолчание кита `bottom start` — как раз явный проп: вложенное меню без
+ * особого случая раскрывалось бы под пунктом. Поэтому `Menu` узнаёт подменю по
+ * контексту (`trigger: "SubmenuTrigger"`, публичное поле `PopoverContext`) и
+ * спрашивает общий хук `useSubmenuPlacement` — тот же, что в Редакторе: на
+ * телефоне подменю встаёт под пунктом, на широком экране кит своего места не
+ * передаёт, и действует `end top` react-aria — сбоку, с учётом направления
+ * письма. Переворот у края экрана
+ * (`shouldFlip`) и «Прицел» — движение курсора к подменю по диагонали не
+ * закрывает его — остаются у react-aria, кит их не трогает.
+ *
  * ПЕРЕКЛЮЧАТЕЛИ — через выбор на разделе, а не через `checked` у пункта:
  *
  *     <MenuSection label="Вид" selectionMode="multiple"
@@ -128,11 +148,34 @@ export interface MenuItemProps extends Omit<AriaMenuItemProps, "children" | "cla
  * чужую работу и расходиться с ней при первом же обновлении.
  */
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
-  { offset = 6, placement = "bottom start", className, ...rest },
+  { offset = 6, placement, className, ...rest },
   ref
 ) {
+  const popoverContext = useContext(PopoverContext);
+  // Контекст бывает пустым, со слотами или с самими пропами поповера; «подменю»
+  // говорит только последнее.
+  const isSubmenu =
+    popoverContext != null &&
+    "trigger" in popoverContext &&
+    popoverContext.trigger === "SubmenuTrigger";
+  const submenuPlacement = useSubmenuPlacement();
+  // Широкий экран — место не передаётся вовсе: тогда действует `end top` из
+  // контекста `SubmenuTrigger`. Оно логическое, и при письме справа налево
+  // подменю раскрывается слева, а `right top` хука уводило бы его вправо.
+  const resolvedPlacement =
+    placement ??
+    (isSubmenu
+      ? submenuPlacement === "bottom start"
+        ? submenuPlacement
+        : undefined
+      : "bottom start");
+
   return (
-    <Popover offset={offset} placement={placement} className={cn(MENU_PANEL_CLASS, className)}>
+    <Popover
+      offset={offset}
+      placement={resolvedPlacement}
+      className={cn(MENU_PANEL_CLASS, className)}
+    >
       {/*
         `data-disable-focus-ring` — механизм пакета, тот же, что у `TextControl`.
         Глобальное правило `:focus-visible` в styles.css рисует контур вокруг

package/src/editor/RichTextEditor.tsx

@@ -67,7 +67,7 @@ import {
 } from "./core/jsonDocument.js";
 import { markdownOf } from "./core/atomText.js";
 import { countCharacters, EXTERNAL_CHANGE } from "./core/maxLength.js";
-import { proseClass } from "./styles/prose.js";
+import { PAPER_SHEET_CLASS, proseClass } from "./styles/prose.js";
 import { SELECTION_BUBBLE_KEY, SelectionBubble } from "./ui/SelectionBubble.js";
 import { useSlashMenu } from "./ui/SlashMenu.js";
 import { useTriggerMenu } from "./ui/TriggerMenu.js";
@@ -1543,8 +1543,11 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
                 {...surfaceAttributes(surface)}
                 className={cn(
                   "grid",
-                  surface === "paper" ? EDITOR_PAPER_TOKENS_CLASS : EDITOR_TOKENS_CLASS,
-                  surface === "paper" ? "my-3" : "py-2.5"
+                  // На листе светлый лист остаётся под тёмным полем: смена режима
+                  // меняет содержимое листа, а не сам лист.
+                  surface === "paper"
+                    ? cn(EDITOR_PAPER_TOKENS_CLASS, PAPER_SHEET_CLASS, "my-3")
+                    : cn(EDITOR_TOKENS_CLASS, "py-2.5")
                 )}
                 style={{ minHeight: source.minHeight }}
               >

package/src/editor/features/table/TableMenuButton.tsx

@@ -56,7 +56,7 @@ import {
   type TableAction,
 } from "./tableActions.js";
 import { TableSizeGrid } from "./TableSizeGrid.js";
-import { useSubmenuPlacement } from "../../hooks/useSubmenuPlacement.js";
+import { useSubmenuPlacement } from "../../../hooks/useSubmenuPlacement.js";
 import { GLASS_MENU_CLASS } from "../../styles/glass.js";
 
 export interface TableMenuButtonProps {

package/src/editor/styles/prose.ts

@@ -415,7 +415,7 @@ export const PROSE_CLASS = EDITOR_TOKENS_CLASS + " " + PROSE_RULES;
  * видны на тёмной подложке так же, как на светлой. `scheme-light` — родной
  * флажок чек-листа и полосы прокрутки рисуются светлыми.
  */
-const PAPER_SHEET_CLASS =
+export const PAPER_SHEET_CLASS =
   "rounded-(--r-sm) border border-(--line) bg-(--rte-background) px-4 py-3 " +
   "shadow-[var(--shadow-1)] scheme-light";
 

package/src/editor/ui/BlockHandle.tsx

@@ -42,7 +42,7 @@ import { ariaShortcut, findShortcutKeys, isApple, shortcutLabel } from "../core/
 import { blockActionsOf, blockActionVisible, type ToolList } from "../core/toolDescriptor.js";
 import { WRAPPER_NODE } from "../features/wrapper/wrapper.js";
 import { EDITOR_WRAPPER_TONES, wrapperToneFrom } from "../features/wrapper/wrapperTones.js";
-import { useSubmenuPlacement } from "../hooks/useSubmenuPlacement.js";
+import { useSubmenuPlacement } from "../../hooks/useSubmenuPlacement.js";
 import { GLASS_MENU_CLASS } from "../styles/glass.js";
 
 /** Размер ручки и зазор до текста, px: ручка `h-6 w-5` стоит в левом поле Документа. */

package/src/editor/ui/FormatMenus.tsx

@@ -13,6 +13,7 @@ import {
 } from "../../components/overlays/Menu.js";
 import { Tooltip } from "../../components/overlays/Tooltip.js";
 import type { UiMessages } from "../../i18n/messages.js";
+import { cn } from "../../lib/cn.js";
 import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
 import {
   AlignCenterIcon,
@@ -44,7 +45,7 @@ import { DEFAULT_ALIGNMENT, EDITOR_ALIGNMENTS, type EditorAlignment } from "../s
 import { findShortcutKeys } from "../core/shortcuts.js";
 import type { ToolList } from "../core/toolDescriptor.js";
 import type { Tool } from "../core/tools.js";
-import { useSubmenuPlacement } from "../hooks/useSubmenuPlacement.js";
+import { useSubmenuPlacement } from "../../hooks/useSubmenuPlacement.js";
 import { GLASS_MENU_CLASS } from "../styles/glass.js";
 
 type EditorMessages = UiMessages["editor"];
@@ -227,7 +228,21 @@ export function formatMenuSections(
               icon={ItemIcon ? <ItemIcon size={14} aria-hidden /> : undefined}
               shortcut={item.keys ? shortcut(item.keys) : undefined}
             >
-              {item.swatch ? <span className={item.swatch}>{item.label}</span> : item.label}
+              {item.swatch ? (
+                /*
+                  Образец не должен брать вид выбранной строки: её голубой текст
+                  и подложка перекрашивали цвета тона. Текст задан образцу
+                  самому, а непрозрачная основа под ним не даёт полупрозрачной
+                  подложке тона смешаться с подложкой строки. Основа — только в
+                  отмеченной строке: у остальных образец лежит на панели меню,
+                  как обёртка в документе, и выглядит так же.
+                */
+                <span className="in-[[aria-checked=true]]:bg-surface-elevated rounded-xs">
+                  <span className={cn(item.swatch, "text-fg-0")}>{item.label}</span>
+                </span>
+              ) : (
+                item.label
+              )}
             </MenuItem>
           );
           if (!item.submenu || item.disabled) return entry;

package/src/{editor/hooks → hooks}/useSubmenuPlacement.ts

@@ -1,24 +1,25 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useMediaQuery } from "./useMediaQuery.js";
 
 /** Уже `sm` (640): на такой ширине подменю сбоку от пункта не помещается. */
-const QUERY = "(max-width: 639px)";
+const NARROW_QUERY = "(max-width: 639px)";
 
-function subscribe(onChange: () => void): () => void {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
-  const list = window.matchMedia(QUERY);
-  list.addEventListener("change", onChange);
-  return () => list.removeEventListener("change", onChange);
-}
-
-function snapshot(): boolean {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia(QUERY).matches;
+/**
+ * Узкий ли экран по правилу кита — граница одна на подменю и мегаменю.
+ *
+ * Внутренний хук, как и `useSubmenuPlacement`. До гидратации и без `matchMedia`
+ * — `false`, то есть широкий: серверной ширины нет, а угадывать значило бы
+ * получить расхождение разметки (ADR-0018, см. `useMediaQuery`).
+ */
+export function useNarrowScreen(): boolean {
+  return useMediaQuery(NARROW_QUERY);
 }
 
 /**
- * Где открыть подменю Редактора: сбоку от пункта или под ним.
+ * Где открыть подменю: сбоку от пункта или под ним.
+ *
+ * Правило одно на весь кит: его применяет вложенный `Menu` и подменю Редактора.
  *
  * Сбоку — привычно на десктопе. На телефоне места нет ни справа, ни слева:
  * меню само занимает середину экрана, и react-aria, перевернув подменю на
@@ -33,8 +34,10 @@ function snapshot(): boolean {
  * JS, а не CSS: место подменю — проп поповера, а не класс. Подписка — экран
  * поворачивают на лету. На сервере и без `matchMedia` — сбоку: подменю
  * открывается только в браузере, по действию пользователя.
+ *
+ * Внутренний хук: наружу не экспортируется. Потребитель кита решает за себя
+ * проп `placement` у `Menu`, а умолчание для вложенного меню уже здесь.
  */
 export function useSubmenuPlacement(): "bottom start" | "right top" {
-  const narrow = useSyncExternalStore(subscribe, snapshot, () => false);
-  return narrow ? "bottom start" : "right top";
+  return useNarrowScreen() ? "bottom start" : "right top";
 }

package/src/i18n/defaults.ts

@@ -347,6 +347,10 @@ export const DEFAULT_MESSAGES: UiMessages = {
     slide: ({ index, total }) => `${index} of ${total}`,
   },
 
+  megaMenu: {
+    back: "Back",
+  },
+
   shortcutsHelp: {
     title: "Keyboard shortcuts",
     list: "Shortcuts",

package/src/i18n/messages.ts

@@ -591,6 +591,15 @@ export interface UiMessages {
     slide: (vars: { index: number; total: number }) => string;
   };
 
+  megaMenu: {
+    /**
+     * Строка возврата на узком экране: открытая Категория заменяет Столбец, и
+     * эта кнопка возвращает его. Имя кнопки — одно слово без названия
+     * Категории: название стоит рядом текстом, а регион им уже подписан.
+     */
+    back: string;
+  };
+
   shortcutsHelp: {
     /** Заголовок окна по умолчанию. Он же доступное имя диалога. */
     title: string;

package/src/index.ts

@@ -428,6 +428,23 @@ export type { PaginationProps } from "./components/navigation/Pagination.js";
 export { Stepper } from "./components/navigation/Stepper.js";
 export type { StepperProps, Step } from "./components/navigation/Stepper.js";
 
+export {
+  MegaMenu,
+  MegaMenuButton,
+  MegaMenuCategory,
+  MegaMenuGroup,
+  MegaMenuLink,
+  MegaMenuTrigger,
+} from "./components/navigation/MegaMenu.js";
+export type {
+  MegaMenuProps,
+  MegaMenuButtonProps,
+  MegaMenuCategoryProps,
+  MegaMenuGroupProps,
+  MegaMenuLinkProps,
+  MegaMenuTriggerProps,
+} from "./components/navigation/MegaMenu.js";
+
 export { ToggleGroup } from "./components/actions/ToggleGroup.js";
 export type { ToggleGroupProps, ToggleGroupOption } from "./components/actions/ToggleGroup.js";