@olddevs/ui 0.0.0-stage → 4.0.1

package/dist/editor/styles/tokens.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Сопоставление переменных shadcn и minimal-tiptap с токенами кита — в одном
+ * месте (ADR-0050, контракт «токены»).
+ *
+ * КАК ЭТО РАБОТАЕТ. Перенесённый код говорит на языке shadcn: `--primary`,
+ * `--muted-foreground`, `--border`, а оформление minimal-tiptap — ещё и своими
+ * `--mt-hr`, `--mt-code-background`, `--mt-secondary`, у которых значения
+ * литеральные и раздельные для `.dark`. Здесь каждая такая роль получает
+ * переменную с префиксом `--rte-`, а значение — переменную кита. Классы
+ * Документа ссылаются только на `--rte-*` (`bg-(--rte-hr)`), литеральных цветов и
+ * радиусов в них нет.
+ *
+ * ПОЧЕМУ ПРЕФИКС, А НЕ СОБСТВЕННЫЕ ИМЕНА shadcn. Приложение потребителя вполне
+ * может само стоять на shadcn и объявлять `--primary` в своём формате (HSL без
+ * обёртки). Переобъявление на корне Редактора перекрасило бы чужие компоненты,
+ * оказавшиеся внутри него, а чужое значение — наш.
+ *
+ * ПОЧЕМУ КЛАССАМИ, А НЕ `style`. Произвольные свойства Tailwind
+ * (`[--rte-hr:var(--line)]`) работают и в серверном рендере `RichTextView`, и
+ * без единого инлайн-стиля в разметке. Каждое имя записано целиком — Tailwind
+ * читает исходник как текст и склейку имени не увидел бы.
+ *
+ * ТЕМЫ. Значения — переменные кита, а не цвета, поэтому `dark`, `light` и `dim`
+ * переключаются сами, без второй таблицы под `.dark`, как было в оригинале.
+ *
+ * | Роль (`--rte-*`)          | Где в Документе                        | Токен кита         | Лист (`paper`)     |
+ * | ------------------------- | -------------------------------------- | ------------------ | ------------------ |
+ * | `background`              | фон листа, мерка цвета автора          | `--bg-2`           | `--od-cloud-12`    |
+ * | `foreground`              | основной текст, курсор-щель            | `--fg-0`           | `--od-cloud-1`     |
+ * | `secondary`               | цитата, шапка блока кода (язык, копия) | `--fg-1`           | `--od-cloud-2`     |
+ * | `muted`                   | подпись картинки, выполненный пункт    | `--fg-2`           | `--od-cloud-3`     |
+ * | `muted-foreground`        | плейсхолдеры                           | `--fg-3`           | `--od-cloud-4`     |
+ * | `primary`                 | флажок, контур и ручка картинки        | `--accent`         | `--accent`         |
+ * | `ring`                    | фокус контролов внутри Документа       | `--accent-strong`  | `--accent` ¹       |
+ * | `link`                    | ссылка                                 | `--accent-strong`  | `--accent` ¹       |
+ * | `text-accent`             | цвет текста `accent`                   | `--accent-strong`  | `--accent` ¹       |
+ * | `text-success`            | цвет текста `success`                  | `--success-strong` | `--od-green-1`     |
+ * | `text-warning`            | цвет текста `warning`                  | `--warning-strong` | `--od-amber-1`     |
+ * | `text-danger`             | цвет текста `danger`                   | `--danger-strong`  | `--od-red-1`       |
+ * | `text-lime`               | цвет текста `lime`                     | `--draft-strong`   | `--od-lime-1`      |
+ * | `text-muted`              | цвет текста `muted`                    | `--fg-2`           | `--od-cloud-3`     |
+ * | `selection`               | выделение текста и ячеек               | `--selection`      | `--selection-light` ¹ |
+ * | `selection-marker`        | выделение поверх яркого маркера ²      | `--accent` 38 %    | `--accent` 38 %    |
+ * | `control-hover`           | наведение на кнопку внутри Документа   | `--bg-2`           | `--od-cloud-9`     |
+ * | `quote`                   | полоса цитаты                          | `--line`           | `--od-cloud-6`     |
+ * | `hr`                      | черта, рамки ячеек                     | `--line`           | `--od-cloud-6`     |
+ * | `code-background`         | строчный код, шапка таблицы            | `--bg-3`           | `--od-cloud-11`    |
+ * | `code-border`             | рамка кода                             | `--line-soft`      | `--od-cloud-8`     |
+ * | `radius`                  | скругления                             | `--r-xs`           | `--r-xs`           |
+ * | `tone-neutral-background` | подложка Обёртки «Важно» ³             | `--bg-3`           | `--od-cloud-11`    |
+ * | `tone-neutral-border`     | полоса Обёртки «Важно» ³               | `--fg-3`           | `--od-cloud-4`     |
+ * | `tone-accent-background`  | подложка Обёртки «Заметка»             | `--accent-soft`    | `--accent-soft`    |
+ * | `tone-accent-border`      | полоса Обёртки «Заметка»               | `--accent-strong`  | `--accent` ¹       |
+ * | `tone-success-background` | подложка Обёртки «Совет»               | `--success-soft`   | `--od-green-2-a12` |
+ * | `tone-success-border`     | полоса Обёртки «Совет»                 | `--success-strong` | `--od-green-1`     |
+ * | `tone-warning-background` | подложка Обёртки «Внимание»            | `--warning-soft`   | `--od-amber-2-a14` |
+ * | `tone-warning-border`     | полоса Обёртки «Внимание»              | `--warning-strong` | `--od-amber-1`     |
+ * | `tone-danger-background`  | подложка Обёртки «Осторожно»           | `--danger-soft`    | `--od-red-3-a12`   |
+ * | `tone-danger-border`      | полоса Обёртки «Осторожно»             | `--danger-strong`  | `--od-red-1`       |
+ * | `tone-link`               | ссылка в Обёртке с тоном ⁴             | `--fg-0`           | `--od-cloud-1`     |
+ * | `tone-secondary`          | цитата и шапка кода в Обёртке с тоном ⁴ | `--fg-0`          | `--od-cloud-2`     |
+ * | `tone-muted`              | подпись, пункт, серый текст в тоне ⁴   | `--fg-0`           | `--od-cloud-3`     |
+ * | `tone-muted-foreground`   | подсказки в Обёртке с тоном ⁴          | `--fg-0`           | `--od-cloud-3`     |
+ *
+ * Модуль серверно-безопасен: строки классов, без React и без движка.
+ */
+export declare const EDITOR_TOKENS_CLASS: string;
+/**
+ * Те же роли для листа `surface="paper"`: значения СВЕТЛОЙ темы в
+ * любой теме приложения.
+ *
+ * ПОЧЕМУ ПРИМИТИВЫ, А НЕ ВЛОЖЕННЫЙ `data-theme="light"`. Семантические токены
+ * кита (`--fg-0`, `--bg-2`, `--accent-strong`) объявлены только на
+ * `:root[data-theme]` и на вложенную тему не отзываются; мост `@theme`
+ * (`text-fg-0` → `--color-fg-0`) подставляет значение корня. Менять это —
+ * решение уровня кита (ADR-0003, ADR-0020), а не Редактора. Поэтому лист
+ * назначает ролям `--rte-*` те же примитивы `--od-*`, что светлая тема
+ * назначает своим токенам: примитивы объявлены на `:root` без темы и видны
+ * везде. Совпадение со светлой темой сторожит `tests/rich-text-paper.test.tsx`
+ * — разбором `styles.css`, а не копией значений.
+ *
+ * Вложенный `data-theme="light"` на листе всё равно стоит — для того, что
+ * объявлено на `[data-theme]` любого элемента: маркеры (`--marker-*`) и тема
+ * подсветки (`--rte-hl-*`, `--rte-code-block-*`, `styles.css`).
+ *
+ * ¹ АКЦЕНТ — ЗАЛИВКА ТЕМЫ ПРИЛОЖЕНИЯ, А НЕ СВЕТЛАЯ `accent-strong`. Светлый
+ * `accent-strong` у бренда и у фиолетового акцента объявлен только парным
+ * блоком `:root[data-theme="light"][data-…]` и в тёмном приложении не
+ * существует ни в одной переменной. `--accent` же рассчитан под белый текст
+ * поверх (4.5:1 с `--text-on-accent`, гейт контраста) — значит, и как текст на
+ * белом листе держит 4.5:1, у любого бренда и акцента. В светлом приложении
+ * лист берёт ровно светлый `accent-strong` — вариантом по корню.
+ *
+ * `primary` и подложка тона «Заметка» не меняются: полупрозрачная `accent-soft`
+ * ложится и на белый лист, а заливка флажка — тот же `--accent`. Выделение —
+ * `--selection-light`: `--selection` тёмного приложения — светлая
+ * ступень акцента под тёмную подложку, и на белом листе она почти не видна;
+ * светлый вариант объявлен при любой теме ровно для листа.
+ * Полоса «Заметки» — как текст акцентом: `--accent`, в светлом приложении —
+ * светлый `accent-strong`.
+ *
+ * ² ВЫДЕЛЕНИЕ НА МАРКЕРЕ. Обычное выделение полупрозрачно и рассчитано на фон
+ * документа; поверх яркого маркера (`#ffea80`) прежнее `accent-soft` (14–16 %
+ * альфы) пропадало, и казалось, что помеченный текст не выделен. Маркер один во всех темах, поэтому
+ * и роль одна: `--accent` на 38 % — жёлтый под ним уходит в заметный
+ * серо-зелёный, а тёмный текст маркера остаётся читаемым. Акцент, а не
+ * фиксированный синий: выделение следует бренду, как и везде.
+ *
+ * ³ ТОН ОБЁРТКИ — статусные токены кита: мягкая ступень тона —
+ * подложка, сильная — полоса слева, как `soft` у `Alert`. Нейтральный тон
+ * отступает от `TONE_TOKENS.neutral` в обоих местах. Подложка — `bg-3`
+ * (ступень выбранного нейтрального), а не `bg-2`: на `bg-2` стоит само поле
+ * Редактора, и Обёртка «Важно» в нём была бы без подложки. Не `bg-4`: `bg-3` —
+ * подложка приложения, под которую откалиброваны ВСЕ текстовые токены, и
+ * ссылка, цитата, подпись и цвет текста внутри «Важно» держат 4.5:1, а на
+ * `bg-4` приглушённый текст падает до 3.7. Цена — в светлой теме подложка
+ * почти белая на белой панели, тон там держит полоса. Полоса — `fg-3`, а не
+ * `line`: полоса тона несёт смысл и держит 3:1 (WCAG 1.4.11), а `line` —
+ * декоративная черта (так же рамка признака состояния, `STATE_BORDER`).
+ * Контраст — `npm run contrast`, пары тонов.
+ *
+ * ⁴ ВТОРИЧНЫЙ ТЕКСТ НА ПОДЛОЖКЕ ТОНА. Ступени `fg-1`–`fg-3` и `accent-strong`
+ * откалиброваны под 4.5:1 на подложках приложения, а не на цветных подложках
+ * тонов: на них цитата падала до 4.23, ссылка — до 3.97, подпись и серый текст
+ * — до 3.59, подсказка — до 3.61. Поэтому в Обёртке с тоном `prose.ts` подменяет
+ * роли `link`, `secondary`, `muted`, `text-muted` и `muted-foreground` этими. В
+ * теме приложения 4.5:1 на всех пяти подложках держит только `fg-0` — промежуточной
+ * ступени нет (`fg-1` даёт 4.23 на «Заметке» и 4.27 на «Внимании»), поэтому
+ * внутри тона весь вторичный текст — основной; иерархию держат форма (полоса
+ * цитаты, зачёркивание, кегль подписи), а ссылку — подчёркивание. На листе
+ * `cloud-2` и `cloud-3` проходят и на подложках тона — цитата и подпись остаются
+ * своей ступенью, поднимаются только ссылка (акцент давал 3.68) и подсказка
+ * (`cloud-4` давал 4.25).
+ */
+export declare const EDITOR_PAPER_TOKENS_CLASS: string;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/editor/styles/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/editor/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,mBAAmB,QAgB4C,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,yBAAyB,QAqByC,CAAC"}

package/dist/editor/styles/tokens.js

@@ -0,0 +1,38 @@
+export const EDITOR_TOKENS_CLASS = "[--rte-background:var(--bg-2)] [--rte-foreground:var(--fg-0)] " +
+    "[--rte-secondary:var(--fg-1)] [--rte-muted:var(--fg-2)] [--rte-muted-foreground:var(--fg-3)] " +
+    "[--rte-primary:var(--accent)] [--rte-ring:var(--accent-strong)] [--rte-link:var(--accent-strong)] " +
+    "[--rte-text-accent:var(--accent-strong)] [--rte-text-success:var(--success-strong)] " +
+    "[--rte-text-warning:var(--warning-strong)] [--rte-text-danger:var(--danger-strong)] " +
+    "[--rte-text-lime:var(--draft-strong)] [--rte-text-muted:var(--fg-2)] [--rte-selection:var(--selection)] [--rte-selection-marker:color-mix(in_srgb,var(--accent)_38%,transparent)] " +
+    "[--rte-control-hover:var(--bg-2)] [--rte-quote:var(--line)] [--rte-hr:var(--line)] " +
+    "[--rte-code-background:var(--bg-3)] [--rte-code-border:var(--line-soft)] " +
+    "[--rte-radius:var(--r-xs)] " +
+    "[--rte-tone-neutral-background:var(--bg-3)] [--rte-tone-neutral-border:var(--fg-3)] " +
+    "[--rte-tone-accent-background:var(--accent-soft)] [--rte-tone-accent-border:var(--accent-strong)] " +
+    "[--rte-tone-success-background:var(--success-soft)] [--rte-tone-success-border:var(--success-strong)] " +
+    "[--rte-tone-warning-background:var(--warning-soft)] [--rte-tone-warning-border:var(--warning-strong)] " +
+    "[--rte-tone-danger-background:var(--danger-soft)] [--rte-tone-danger-border:var(--danger-strong)] " +
+    "[--rte-tone-link:var(--fg-0)] [--rte-tone-secondary:var(--fg-0)] " +
+    "[--rte-tone-muted:var(--fg-0)] [--rte-tone-muted-foreground:var(--fg-0)]";
+export const EDITOR_PAPER_TOKENS_CLASS = "[--rte-background:var(--od-cloud-12)] [--rte-foreground:var(--od-cloud-1)] " +
+    "[--rte-secondary:var(--od-cloud-2)] [--rte-muted:var(--od-cloud-3)] " +
+    "[--rte-muted-foreground:var(--od-cloud-4)] " +
+    "[--rte-primary:var(--accent)] [--rte-ring:var(--accent)] [--rte-link:var(--accent)] " +
+    "[--rte-text-accent:var(--accent)] [--rte-text-success:var(--od-green-1)] " +
+    "[--rte-text-warning:var(--od-amber-1)] [--rte-text-danger:var(--od-red-1)] " +
+    "[--rte-text-lime:var(--od-lime-1)] [--rte-text-muted:var(--od-cloud-3)] [--rte-selection:var(--selection-light)] [--rte-selection-marker:color-mix(in_srgb,var(--accent)_38%,transparent)] " +
+    "[--rte-control-hover:var(--od-cloud-9)] [--rte-quote:var(--od-cloud-6)] [--rte-hr:var(--od-cloud-6)] " +
+    "[--rte-code-background:var(--od-cloud-11)] [--rte-code-border:var(--od-cloud-8)] " +
+    "[--rte-radius:var(--r-xs)] " +
+    "[--rte-tone-neutral-background:var(--od-cloud-11)] [--rte-tone-neutral-border:var(--od-cloud-4)] " +
+    "[--rte-tone-accent-background:var(--accent-soft)] [--rte-tone-accent-border:var(--accent)] " +
+    "[--rte-tone-success-background:var(--od-green-2-a12)] [--rte-tone-success-border:var(--od-green-1)] " +
+    "[--rte-tone-warning-background:var(--od-amber-2-a14)] [--rte-tone-warning-border:var(--od-amber-1)] " +
+    "[--rte-tone-danger-background:var(--od-red-3-a12)] [--rte-tone-danger-border:var(--od-red-1)] " +
+    "[--rte-tone-link:var(--od-cloud-1)] [--rte-tone-secondary:var(--od-cloud-2)] " +
+    "[--rte-tone-muted:var(--od-cloud-3)] [--rte-tone-muted-foreground:var(--od-cloud-3)] " +
+    "[:root[data-theme=light]_&]:[--rte-ring:var(--accent-strong)] " +
+    "[:root[data-theme=light]_&]:[--rte-link:var(--accent-strong)] " +
+    "[:root[data-theme=light]_&]:[--rte-text-accent:var(--accent-strong)] " +
+    "[:root[data-theme=light]_&]:[--rte-tone-accent-border:var(--accent-strong)]";
+//# sourceMappingURL=tokens.js.map

package/dist/editor/styles/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/editor/styles/tokens.ts"],"names":[],"mappings":"AAkEA,MAAM,CAAC,MAAM,mBAAmB,GAC9B,gEAAgE;IAChE,+FAA+F;IAC/F,oGAAoG;IACpG,sFAAsF;IACtF,sFAAsF;IACtF,oLAAoL;IACpL,qFAAqF;IACrF,2EAA2E;IAC3E,6BAA6B;IAC7B,sFAAsF;IACtF,oGAAoG;IACpG,wGAAwG;IACxG,wGAAwG;IACxG,oGAAoG;IACpG,mEAAmE;IACnE,0EAA0E,CAAC;AAqE7E,MAAM,CAAC,MAAM,yBAAyB,GACpC,6EAA6E;IAC7E,sEAAsE;IACtE,6CAA6C;IAC7C,sFAAsF;IACtF,2EAA2E;IAC3E,6EAA6E;IAC7E,6LAA6L;IAC7L,uGAAuG;IACvG,mFAAmF;IACnF,6BAA6B;IAC7B,mGAAmG;IACnG,6FAA6F;IAC7F,sGAAsG;IACtG,sGAAsG;IACtG,gGAAgG;IAChG,+EAA+E;IAC/E,uFAAuF;IACvF,gEAAgE;IAChE,gEAAgE;IAChE,uEAAuE;IACvE,6EAA6E,CAAC"}

package/dist/editor/ui/BlockHandle.d.ts

@@ -0,0 +1,40 @@
+import { type Editor } from "@tiptap/react";
+import { type RefObject } from "react";
+import { type ToolList } from "../core/toolDescriptor.js";
+export interface BlockHandleProps {
+    editor: Editor;
+    tools: ToolList;
+    /**
+     * Сюда ручка кладёт «открыть меню» для `Mod+/` из Документа: сочетание
+     * слушает расширение (`blockCommands.ts`), а меню живёт здесь. `false` —
+     * ручки нет, и клавиша идёт дальше.
+     */
+    openRef: RefObject<() => boolean>;
+}
+/**
+ * Ручка Блока «⋮»: кнопка слева от первой строки Блока с кареткой
+ * и меню действий над ним — Добавить ›, Формат ›, Вверх, Вниз, Дублировать,
+ * Удалить.
+ *
+ * ТОЛЬКО ПО КАРЕТКЕ (решение владельца). Наведение мыши ручку не показывает:
+ * она не мелькает у каждого абзаца под курсором и не спорит с выделением
+ * текста. Видна, пока фокус в Документе, на самой ручке или в её меню; в
+ * `readOnly` её не монтирует Редактор, у выключенного поля Блока ручки нет.
+ *
+ * БЛОК — ЦЕЛИКОМ. Действия идут над Блоком ручки (`handleBlock`): весь список,
+ * вся цитата, вся таблица, а не пункт под кареткой. Поэтому подпись сочетания
+ * у пункта — только когда сочетание делает то же самое (`handleShortcutsMatch`):
+ * в пункте списка `⌥⇧↑` двигает пункт, и там подписи нет. Каждое действие —
+ * одна правка на отмену, фокус после него — в Документе. Перетаскивания за
+ * ручку нет (решение владельца).
+ *
+ * СЛОЙ — В ПОТОКЕ ПОЛЯ, А НЕ ОВЕРЛЕЙ. Ручка — часть поля, как полоса прокрутки:
+ * она лежит в DOM Редактора абсолютно от его корня и едет с текстом в любом
+ * контейнере прокрутки, в `Dialog` и `Drawer` без пересчёта на прокрутке.
+ * Ступени `OVERLAY_LAYER` у неё нет намеренно: липкая Панель (`z-[1]`) и любые
+ * поповеры должны её перекрывать, а не наоборот. Меню — `Menu` кита, у него
+ * свой слой и стек Escape (ADR-0041): Escape закрывает подменю и меню по
+ * одному уровню, а окно вокруг Редактора остаётся открытым.
+ */
+export declare function BlockHandle({ editor, tools, openRef }: BlockHandleProps): import("react").JSX.Element | null;
+//# sourceMappingURL=BlockHandle.d.ts.map

package/dist/editor/ui/BlockHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockHandle.d.ts","sourceRoot":"","sources":["../../../src/editor/ui/BlockHandle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqC9F,OAAO,EAAsC,KAAK,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AA8F9F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC,MAAM,OAAO,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,gBAAgB,sCA6avE"}

package/dist/editor/ui/BlockHandle.js

@@ -0,0 +1,394 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Kbd } from "../../components/content/Kbd.js";
+import { Menu, MenuButton, MenuTrigger } from "../../components/overlays/Menu.js";
+import { Tooltip, TooltipProvider } from "../../components/overlays/Tooltip.js";
+import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
+import { AddIcon, ArrowDownIcon, ArrowUpIcon, ColumnLayoutIcon, DeleteIcon, DuplicateIcon, MoreVerticalIcon, PaletteIcon, ParagraphIcon, } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+import { deleteBlock, duplicateBlock, handleBlock, handleShortcutsMatch, moveBlock, } from "../core/blockCommands.js";
+import { blockTypeOf, formatItemsFor } from "../core/blockTypes.js";
+import { EDITOR_LAYOUTS } from "../features/layout/columnLayouts.js";
+import { formatMenuSections, HAS_POPUP_MENU, } from "./FormatMenus.js";
+import { FOCUS_TARGET } from "./focusWithin.js";
+import { applyInsertItem, insertItemsFor, turnBlockInto } from "../core/insertItems.js";
+import { COLUMN_NODE, LAYOUT_NODE, layoutOfNode } from "../features/layout/layout.js";
+import { EDITOR_WRAPPER_TONE_CLASS } from "../styles/prose.js";
+import { ariaShortcut, findShortcutKeys, isApple, shortcutLabel } from "../core/shortcuts.js";
+import { blockActionsOf, blockActionVisible } 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 { GLASS_MENU_CLASS } from "../styles/glass.js";
+const HANDLE_WIDTH = 20;
+const HANDLE_HEIGHT = 24;
+const HANDLE_GAP = 4;
+const buttonExtras = (onFocusChange) => ({ excludeFromTabOrder: true, onFocusChange });
+function handlePlace(view, anchor) {
+    const block = handleBlock(view.state);
+    const origin = anchor.offsetParent;
+    if (!block || !(origin instanceof HTMLElement))
+        return null;
+    const container = block.depth === 0 ? view.dom : view.nodeDOM(block.$from.before(block.depth));
+    if (!(container instanceof HTMLElement))
+        return null;
+    const node = block.parent.child(block.startIndex);
+    const win = container.ownerDocument.defaultView;
+    let first = -1;
+    if (node.isTextblock)
+        first = block.start;
+    else if (!node.isAtom) {
+        node.descendants((child, offset) => {
+            if (first >= 0)
+                return false;
+            if (child.isTextblock)
+                first = block.start + 1 + offset;
+            return first < 0;
+        });
+    }
+    const dom = view.nodeDOM(first >= 0 ? first : block.start);
+    if (!(dom instanceof HTMLElement))
+        return null;
+    const rect = dom.getBoundingClientRect();
+    let line;
+    if (first >= 0) {
+        const style = win?.getComputedStyle(dom);
+        const top = rect.top + dom.clientTop + (parseFloat(style?.paddingTop ?? "") || 0);
+        const height = parseFloat(style?.lineHeight ?? "") || (parseFloat(style?.fontSize ?? "") || 16) * 1.2;
+        line = { top, bottom: top + height };
+    }
+    else {
+        line = { top: rect.top, bottom: Math.min(rect.bottom, rect.top + HANDLE_HEIGHT) };
+    }
+    const box = origin.getBoundingClientRect();
+    const frame = container.getBoundingClientRect();
+    const padding = parseFloat(win?.getComputedStyle(container).paddingLeft ?? "") || 0;
+    const contentLeft = frame.left + container.clientLeft + padding;
+    return {
+        top: Math.round((line.top + line.bottom) / 2 -
+            HANDLE_HEIGHT / 2 -
+            box.top -
+            origin.clientTop +
+            origin.scrollTop),
+        left: Math.round(contentLeft - HANDLE_GAP - HANDLE_WIDTH - box.left - origin.clientLeft + origin.scrollLeft),
+    };
+}
+export function BlockHandle({ editor, tools, openRef }) {
+    const messages = useMessages().editor;
+    const locale = useUiLocale();
+    const apple = isApple();
+    const submenuPlacement = useSubmenuPlacement();
+    const [open, setOpen] = useState(false);
+    const [buttonFocused, setButtonFocused] = useState(false);
+    const [place, setPlace] = useState(null);
+    const anchorRef = useRef(null);
+    const buttonRef = useRef(null);
+    const actedRef = useRef(false);
+    const addItems = useMemo(() => insertItemsFor(tools).filter((item) => item.id !== "codeBlockFromText"), [tools]);
+    const formatItems = useMemo(() => formatItemsFor(tools), [tools]);
+    const toolActions = useMemo(() => blockActionsOf(tools), [tools]);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor: current }) => {
+            const block = current.isEditable ? handleBlock(current.state) : null;
+            if (!block)
+                return null;
+            const node = block.parent.child(block.startIndex);
+            const layout = node.type.name === LAYOUT_NODE
+                ? node
+                : block.parent.type.name === COLUMN_NODE
+                    ? block.$from.node(block.depth - 1)
+                    : null;
+            const wrapper = node.type.name === WRAPPER_NODE
+                ? node
+                : block.parent.type.name === WRAPPER_NODE
+                    ? block.parent
+                    : null;
+            return {
+                focused: current.view.hasFocus(),
+                type: blockTypeOf(node),
+                turnInto: node.type.spec.turnInto === true,
+                layout: layout ? layoutOfNode(layout) : null,
+                isLayout: node.type.name === LAYOUT_NODE,
+                inWrapper: wrapper !== null,
+                tone: wrapper ? wrapperToneFrom(wrapper.attrs.tone) : null,
+                actions: toolActions
+                    .filter((action) => blockActionVisible(action, current, block.start, {
+                    name: node.type.name,
+                    container: block.parent.type.name,
+                }))
+                    .map((action) => action.id),
+                first: block.startIndex === 0,
+                last: block.endIndex === block.parent.childCount,
+                keys: handleShortcutsMatch(current.state),
+            };
+        },
+    });
+    const shown = state !== null && (state.focused || open || buttonFocused);
+    openRef.current = () => {
+        if (!editor.isEditable || !handleBlock(editor.state))
+            return false;
+        actedRef.current = false;
+        setOpen(true);
+        return true;
+    };
+    useLayoutEffect(() => {
+        if (!shown)
+            return;
+        const update = () => {
+            const anchor = anchorRef.current;
+            if (!anchor || editor.isDestroyed)
+                return;
+            const next = handlePlace(editor.view, anchor);
+            if (next)
+                setPlace((prev) => prev && prev.top === next.top && prev.left === next.left ? prev : next);
+        };
+        update();
+        editor.on("transaction", update);
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+        observer?.observe(editor.view.dom);
+        const win = editor.view.dom.ownerDocument.defaultView;
+        win?.addEventListener("resize", update);
+        return () => {
+            editor.off("transaction", update);
+            observer?.disconnect();
+            win?.removeEventListener("resize", update);
+        };
+    }, [editor, shown]);
+    const openKeys = findShortcutKeys("blockActions");
+    useEffect(() => {
+        if (openKeys)
+            buttonRef.current?.setAttribute("aria-keyshortcuts", ariaShortcut(openKeys, apple));
+    }, [openKeys, apple, shown]);
+    if (!shown)
+        return null;
+    const shortcut = (keys) => shortcutLabel(keys, apple);
+    const { keys } = state;
+    const active = formatItems.find((item) => item.id === state.type);
+    const layoutVariants = (prefix) => EDITOR_LAYOUTS.map((variant) => ({
+        id: `${prefix}:${variant}`,
+        label: messages.layoutVariant[variant],
+    }));
+    const layoutSubmenu = (current) => [
+        {
+            id: "layoutVariants",
+            selectionMode: "single",
+            selected: current ? [`layout:${current}`] : [],
+            items: layoutVariants("layout"),
+        },
+    ];
+    const blockItems = [];
+    if (addItems.length > 0) {
+        blockItems.push({
+            id: "add",
+            label: messages.blockAdd,
+            icon: AddIcon,
+            submenu: [
+                {
+                    id: "addItems",
+                    items: addItems.map((item) => item.id === "layout"
+                        ? {
+                            id: "addLayout",
+                            label: item.label(messages, locale),
+                            icon: item.icon,
+                            submenu: [{ id: "addLayoutVariants", items: layoutVariants("addLayout") }],
+                        }
+                        : { id: `add:${item.id}`, label: item.label(messages, locale), icon: item.icon }),
+                },
+            ],
+        });
+    }
+    if (state.isLayout) {
+        blockItems.push({
+            id: "format",
+            label: messages.blockFormat,
+            icon: ColumnLayoutIcon,
+            submenu: layoutSubmenu(state.layout),
+        });
+    }
+    else if (formatItems.length > 0) {
+        blockItems.push({
+            id: "format",
+            label: messages.blockFormat,
+            icon: ParagraphIcon,
+            disabled: state.type === null && !state.turnInto,
+            submenu: [
+                {
+                    id: "formatItems",
+                    selectionMode: "single",
+                    selected: active ? [`format:${active.id}`] : [],
+                    items: formatItems.map((item) => ({
+                        id: `format:${item.id}`,
+                        label: item.label(messages, locale),
+                        icon: item.icon,
+                        keys: keys.type ? item.keys : undefined,
+                    })),
+                },
+            ],
+        });
+    }
+    if (!state.isLayout && state.layout) {
+        blockItems.push({
+            id: "layoutFormat",
+            label: messages.layout,
+            icon: ColumnLayoutIcon,
+            submenu: layoutSubmenu(state.layout),
+        });
+    }
+    if (state.inWrapper) {
+        const toneName = state.tone ? messages.wrapperToneName[state.tone] : messages.wrapperToneNone;
+        blockItems.push({
+            id: "wrapperTone",
+            label: messages.wrapperTone({ current: toneName }),
+            icon: PaletteIcon,
+            submenu: [
+                {
+                    id: "wrapperTones",
+                    selectionMode: "single",
+                    selected: [`tone:${state.tone ?? "none"}`],
+                    items: [
+                        { id: "tone:none", label: messages.wrapperToneNone },
+                        ...EDITOR_WRAPPER_TONES.map((tone) => ({
+                            id: `tone:${tone}`,
+                            label: messages.wrapperToneName[tone],
+                            swatch: EDITOR_WRAPPER_TONE_CLASS[tone],
+                        })),
+                    ],
+                },
+            ],
+        });
+    }
+    const sections = [
+        { id: "block", items: blockItems },
+        {
+            id: "move",
+            items: [
+                {
+                    id: "moveUp",
+                    label: messages.blockMoveUp,
+                    icon: ArrowUpIcon,
+                    keys: keys.move ? findShortcutKeys("moveBlockUp") : undefined,
+                    disabled: state.first,
+                },
+                {
+                    id: "moveDown",
+                    label: messages.blockMoveDown,
+                    icon: ArrowDownIcon,
+                    keys: keys.move ? findShortcutKeys("moveBlockDown") : undefined,
+                    disabled: state.last,
+                },
+                {
+                    id: "duplicate",
+                    label: messages.blockDuplicate,
+                    icon: DuplicateIcon,
+                    keys: keys.duplicate ? findShortcutKeys("duplicateBlock") : undefined,
+                },
+            ],
+        },
+        {
+            id: "toolActions",
+            items: toolActions
+                .filter((action) => state.actions.includes(action.id))
+                .map((action) => ({
+                id: `action:${action.id}`,
+                label: action.label(messages, locale),
+                icon: action.icon,
+                keys: action.shortcut,
+            })),
+        },
+        {
+            id: "remove",
+            items: [{ id: "delete", label: messages.blockDelete, icon: DeleteIcon, tone: "danger" }],
+        },
+    ].filter((section) => section.items.length > 0);
+    const commands = {
+        moveUp: moveBlock(-1, "handle"),
+        moveDown: moveBlock(1, "handle"),
+        duplicate: duplicateBlock("handle"),
+        delete: deleteBlock,
+    };
+    const run = (key) => {
+        actedRef.current = true;
+        const id = String(key);
+        const [kind, itemId] = id.split(":");
+        if (kind === "add") {
+            const item = addItems.find((candidate) => candidate.id === itemId);
+            if (item)
+                applyInsertItem(editor, item, null, "below");
+            return;
+        }
+        if (kind === "addLayout") {
+            const item = addItems.find((candidate) => candidate.id === "layout");
+            const variant = itemId;
+            if (item) {
+                applyInsertItem(editor, { ...item, run: (chain) => chain.insertLayout(variant) }, null, "below");
+            }
+            return;
+        }
+        if (kind === "layout") {
+            const variant = itemId;
+            if (variant !== state.layout)
+                editor.chain().focus().setLayout(variant).run();
+            else
+                editor.commands.focus();
+            return;
+        }
+        if (kind === "tone") {
+            const tone = wrapperToneFrom(itemId);
+            if (tone !== state.tone)
+                editor.chain().focus().setWrapperTone(tone).run();
+            else
+                editor.commands.focus();
+            return;
+        }
+        if (kind === "action") {
+            const action = toolActions.find((candidate) => candidate.id === itemId);
+            const block = handleBlock(editor.state);
+            if (action && block)
+                action.run(editor, block.start);
+            else
+                editor.commands.focus();
+            return;
+        }
+        if (kind === "format") {
+            const item = formatItems.find((candidate) => candidate.id === itemId);
+            if (item && item.id !== state.type)
+                turnBlockInto(editor, item);
+            else
+                editor.commands.focus();
+            return;
+        }
+        const command = commands[id];
+        if (!command)
+            return;
+        command(editor.state, editor.view.dispatch);
+        editor.commands.focus();
+    };
+    const onOpenChange = (next) => {
+        setOpen(next);
+        if (next) {
+            actedRef.current = false;
+            return;
+        }
+        if (actedRef.current)
+            return;
+        const anchor = anchorRef.current;
+        const doc = editor.view.dom.ownerDocument;
+        requestAnimationFrame(() => {
+            if (editor.isDestroyed)
+                return;
+            const current = doc.activeElement;
+            if (!current ||
+                !current.matches(FOCUS_TARGET) ||
+                anchor?.contains(current) ||
+                current.closest('[role="menu"]')) {
+                editor.view.focus();
+            }
+        });
+    };
+    const tooltip = (_jsxs("span", { className: "flex items-center gap-2", children: [messages.blockActions, openKeys && _jsx(Kbd, { "aria-hidden": "true", children: shortcut(openKeys) })] }));
+    return (_jsx("div", { ref: anchorRef, "data-block-handle": "", className: cn("absolute", !place && "invisible"), style: place ?? undefined, children: _jsx(TooltipProvider, { children: _jsxs(MenuTrigger, { isOpen: open, onOpenChange: onOpenChange, children: [_jsx(Tooltip, { content: tooltip, children: _jsx("span", { className: "inline-flex", children: _jsx(MenuButton, { ref: buttonRef, variant: "ghost", size: "sm", iconOnly: true, "aria-label": messages.blockActions, icon: _jsx(MoreVerticalIcon, { size: 16, "aria-hidden": true }), className: "text-fg-2 h-6 w-5", ...HAS_POPUP_MENU, ...buttonExtras(setButtonFocused) }) }) }), _jsx(Menu, { className: GLASS_MENU_CLASS, onAction: run, children: formatMenuSections(sections, shortcut, run, submenuPlacement) })] }) }) }));
+}
+//# sourceMappingURL=BlockHandle.js.map