@olddevs/ui 0.0.0-stage → 4.0.0

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

@@ -0,0 +1,181 @@
+/**
+ * Палитры цвета текста и маркера Редактора ДАННЫМИ: имена, токены кита и
+ * выравнивания.
+ *
+ * ПАЛИТРЫ ДВЕ, И ИМЁН У НИХ НЕТ ОБЩИХ. Цвет текста — шесть тонов
+ * статуса кита; маркер — девять цветов: три ярких и шесть прежних. Оба пишутся в
+ * `data-color`, но на разных тегах: `span[data-color]` берёт имя из текстовой
+ * палитры, `mark[data-color]` — из палитры маркера. Имя чужой палитры на теге не
+ * принимается.
+ *
+ * ОДНА ТАБЛИЦА НА ЧЕТЫРЕХ ПОТРЕБИТЕЛЕЙ: Схема (`schema.ts`) берёт отсюда белый
+ * список имён, расширения (`extensions.ts`) — допустимые значения атрибутов,
+ * Панель (`EditorToolbar.tsx`) — набор образцов, а `scripts/contrast.mjs` —
+ * пары для проверки контраста. Имя цвета, добавленное в одном месте и
+ * забытое в другом, было бы молчаливым дефектом: образец есть, а в сохранённом
+ * HTML его нет. Поэтому место одно, а совпадение с классами `prose.ts` сторожит
+ * `tests/rich-text-editor-color.test.tsx`.
+ *
+ * ЗАЧЕМ ИМЕНА, А НЕ ЗНАЧЕНИЯ. В документ уходит `data-color="danger"`, а не
+ * `#eea8a0`: значение — дело темы (`dark`, `light`, `dim`), и один и тот же
+ * сохранённый текст читается в каждой из них. Имя уезжает в базу потребителя и
+ * переживает смену значений токенов.
+ *
+ * ЦВЕТ ТЕКСТА. `strong`-ступень тона подобрана под 4.5:1 на всех подложках
+ * приложения. Оттенки меток (`--label-*`) подбирались под 3:1 (кружок рядом с
+ * названием) и на `surface-elevated` в тёмных темах текстом не держат: синий
+ * 3.5, красный 3.56. Ценой стала привязка к акценту: `accent` — цвет бренда
+ * приложения, а не фиксированный синий. Индиго (`accent-alt`) в список не
+ * вошёл: токен не имеет `strong`-ступени и даёт 2.3–3.5:1 текстом.
+ *
+ * МАРКЕР. Яркий, как настоящий текстовыделитель: жёлтый
+ * `#ffea80`, ярко-зелёный `#aaff80`, розовый `#ff80bf`, одинаковые во всех темах
+ * (`dark`, `light`, `dim`) и на листе `surface="paper"`. Текст на маркере всегда
+ * тёмный — токен `--marker-text` (около 14:1 на жёлтом и зелёном, 7.5:1 на
+ * розовом), и порог 4.5:1 держит он, а не `fg-0`. Шесть прежних цветов Notion
+ * живут со своими значениями (`--marker-*` компонентного слоя, ADR-0003): у каждой
+ * темы своё, и текст на них — основной. Их снова предлагает меню
+ * (сетка «Цвет маркера», решение владельца) — см. `EDITOR_MARKERS`. Токен цветом
+ * статуса не назван и от акцента с брендом не зависит: `blue` не меняется вслед
+ * за `data-accent`.
+ *
+ * Модуль серверно-безопасен: данные, без React и без движка, и без импортов —
+ * `scripts/contrast.mjs` читает его напрямую.
+ */
+export declare const EDITOR_TEXT_COLORS: readonly [{
+    readonly name: "accent";
+    readonly text: "accent-strong";
+}, {
+    readonly name: "success";
+    readonly text: "success-strong";
+}, {
+    readonly name: "warning";
+    readonly text: "warning-strong";
+}, {
+    readonly name: "danger";
+    readonly text: "danger-strong";
+}, {
+    readonly name: "lime";
+    readonly text: "draft-strong";
+}, {
+    readonly name: "muted";
+    readonly text: "fg-2";
+}];
+/** Имя цвета текста: то, что пишется в `span[data-color]`. */
+export type EditorTextColorName = (typeof EDITOR_TEXT_COLORS)[number]["name"];
+/** Имена цвета текста по порядку палитры — белый список `span[data-color]`. */
+export declare const EDITOR_TEXT_COLOR_NAMES: readonly EditorTextColorName[];
+/**
+ * Маркер: имя, токен подложки (`--marker-<имя>`) и признак «яркий».
+ *
+ * ВСЕ ДЕВЯТЬ В МЕНЮ (решение владельца). До того меню предлагало
+ * только три ярких, а шесть прежних цветов Notion оставались читаемыми: Схема,
+ * `RichTextView` и prose-стили их понимали, но выбрать их было нельзя. Сетка
+ * «Цвет маркера» кружками показывает все девять: цвет выбирают глазами, и
+ * девять различимых кружков — не перегруз, в отличие от девяти строк меню.
+ *
+ * ЯРКИЙ — ДРУГОЕ ОФОРМЛЕНИЕ ТЕКСТА. Подложка яркого (жёлтый, зелёный, розовый)
+ * одна во всех темах, и текст на нём всегда тёмный — `--marker-text`. Подложки
+ * прежних — свои у каждой темы (в тёмных — тёмные), текст на них основной. Это
+ * же различает пары в `scripts/contrast.mjs`.
+ *
+ * Порядок меню — порядок этого массива: по оттенку, как в Notion.
+ */
+export declare const EDITOR_MARKERS: readonly [{
+    readonly name: "gray";
+    readonly token: "marker-gray";
+    readonly bright: false;
+}, {
+    readonly name: "brown";
+    readonly token: "marker-brown";
+    readonly bright: false;
+}, {
+    readonly name: "orange";
+    readonly token: "marker-orange";
+    readonly bright: false;
+}, {
+    readonly name: "yellow";
+    readonly token: "marker-yellow";
+    readonly bright: true;
+}, {
+    readonly name: "green";
+    readonly token: "marker-green";
+    readonly bright: true;
+}, {
+    readonly name: "blue";
+    readonly token: "marker-blue";
+    readonly bright: false;
+}, {
+    readonly name: "purple";
+    readonly token: "marker-purple";
+    readonly bright: false;
+}, {
+    readonly name: "pink";
+    readonly token: "marker-pink";
+    readonly bright: true;
+}, {
+    readonly name: "red";
+    readonly token: "marker-red";
+    readonly bright: false;
+}];
+/** Имя маркера: то, что пишется в `mark[data-color]`. */
+export type EditorMarkerName = (typeof EDITOR_MARKERS)[number]["name"];
+/** Имена маркера по порядку меню — белый список `mark[data-color]`. */
+export declare const EDITOR_MARKER_NAMES: readonly EditorMarkerName[];
+/** Яркие маркеры: подложка одна во всех темах, текст на ней — `--marker-text`. */
+export declare const EDITOR_BRIGHT_MARKER_NAMES: readonly EditorMarkerName[];
+/** Прежние маркеры Notion: подложка своя у каждой темы, текст на ней основной. */
+export declare const EDITOR_PALE_MARKER_NAMES: readonly EditorMarkerName[];
+/**
+ * Имена маркера ДО палитры Notion и их перевод в ближайший цвет.
+ *
+ * Прежний маркер делил имена с цветом текста и красил подложку `soft`-ступенью
+ * тона. Документы, сохранённые тогда, несут на `mark` одно из шести имён, и
+ * отбросить их значило бы молча снять подсветку с чужого текста. Поэтому имя
+ * переводится при загрузке и вставке, а `RichTextView` красит его тем же цветом
+ * (`prose.ts`), если сервер сохранил старый HTML как есть.
+ *
+ * Перевод — по оттенку подложки, а не по смыслу тона:
+ *
+ * - `accent` → `blue`: акцент кита синий (у бренда другой, но сохранённый
+ *   документ видел синий);
+ * - `success` → `green`, `danger` → `red`, `muted` → `gray`: одноимённые цвета;
+ * - `warning` → `yellow`: янтарь `warning-soft` ближе к жёлтому Notion, чем к
+ *   оранжевому — тот красноватее;
+ * - `lime` → `green`: подложка лайма читается зелёной (оттенок 83° лежит между
+ *   жёлтым и зелёным, но у `warning` жёлтый уже занят, и слить с ним «черновик»
+ *   значило бы отдать ему смысл предупреждения).
+ *
+ * Работает только на `mark`: на `span` цвета текста не переименовываются.
+ */
+export declare const LEGACY_MARKER_NAMES: {
+    readonly accent: "blue";
+    readonly success: "green";
+    readonly warning: "yellow";
+    readonly danger: "red";
+    readonly lime: "green";
+    readonly muted: "gray";
+};
+/** Имя маркера из атрибута `mark[data-color]`: новое как есть, старое — переведённое. */
+export declare function markerNameFromAttribute(value: string | null | undefined): EditorMarkerName | null;
+/**
+ * Выравнивание Блока. `left` — умолчание: атрибут не пишется, и документ без
+ * выравнивания остаётся таким, каким был до среза. `justify` намеренно нет:
+ * текст «по ширине» без переносов по слогам рвётся «реками» пробелов, а WCAG
+ * (1.4.8, AAA) советует его не использовать.
+ */
+export declare const EDITOR_ALIGNMENTS: readonly ["left", "center", "right"];
+/** Значение `data-align`. */
+export type EditorAlignment = (typeof EDITOR_ALIGNMENTS)[number];
+/** Выравнивание по умолчанию — то, что не пишется в атрибут. */
+export declare const DEFAULT_ALIGNMENT: EditorAlignment;
+/**
+ * Выравнивание элемента входящего HTML (`value` и вставка).
+ *
+ * Своё — `data-align`, точным значением, как его пишет Редактор. Чужое
+ * читается тоже, но только переводом в имя Схемы: `style="text-align: …"` (так
+ * выравнивают Word, Excel и Google Docs) и устаревший атрибут `align`. Сами
+ * `style` и `align` в документ не попадают — на выходе только `data-align`.
+ */
+export declare function alignmentFromElement(element: HTMLElement): EditorAlignment | null;
+//# sourceMappingURL=palette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/editor/styles/palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;EAOrB,CAAC;AAEX,8DAA8D;AAC9D,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,+EAA+E;AAC/E,eAAO,MAAM,uBAAuB,EAAE,SAAS,mBAAmB,EAEjE,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUjB,CAAC;AAEX,yDAAyD;AACzD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,EAAE,SAAS,gBAAgB,EAE1D,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,0BAA0B,EAAE,SAAS,gBAAgB,EAEpC,CAAC;AAE/B,kFAAkF;AAClF,eAAO,MAAM,wBAAwB,EAAE,SAAS,gBAAgB,EAElC,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,mBAAmB;;;;;;;CAOkC,CAAC;AAEnE,yFAAyF;AACzF,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,gBAAgB,GAAG,IAAI,CAMjG;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,sCAAuC,CAAC;AAEtE,6BAA6B;AAC7B,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjE,gEAAgE;AAChE,eAAO,MAAM,iBAAiB,EAAE,eAAwB,CAAC;AAWzD;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,eAAe,GAAG,IAAI,CAYjF"}

package/dist/editor/styles/palette.js

@@ -0,0 +1,57 @@
+export const EDITOR_TEXT_COLORS = [
+    { name: "accent", text: "accent-strong" },
+    { name: "success", text: "success-strong" },
+    { name: "warning", text: "warning-strong" },
+    { name: "danger", text: "danger-strong" },
+    { name: "lime", text: "draft-strong" },
+    { name: "muted", text: "fg-2" },
+];
+export const EDITOR_TEXT_COLOR_NAMES = EDITOR_TEXT_COLORS.map((color) => color.name);
+export const EDITOR_MARKERS = [
+    { name: "gray", token: "marker-gray", bright: false },
+    { name: "brown", token: "marker-brown", bright: false },
+    { name: "orange", token: "marker-orange", bright: false },
+    { name: "yellow", token: "marker-yellow", bright: true },
+    { name: "green", token: "marker-green", bright: true },
+    { name: "blue", token: "marker-blue", bright: false },
+    { name: "purple", token: "marker-purple", bright: false },
+    { name: "pink", token: "marker-pink", bright: true },
+    { name: "red", token: "marker-red", bright: false },
+];
+export const EDITOR_MARKER_NAMES = EDITOR_MARKERS.map((marker) => marker.name);
+export const EDITOR_BRIGHT_MARKER_NAMES = EDITOR_MARKERS.filter((marker) => marker.bright).map((marker) => marker.name);
+export const EDITOR_PALE_MARKER_NAMES = EDITOR_MARKERS.filter((marker) => !marker.bright).map((marker) => marker.name);
+export const LEGACY_MARKER_NAMES = {
+    accent: "blue",
+    success: "green",
+    warning: "yellow",
+    danger: "red",
+    lime: "green",
+    muted: "gray",
+};
+export function markerNameFromAttribute(value) {
+    if (value === null || value === undefined)
+        return null;
+    if (EDITOR_MARKER_NAMES.includes(value))
+        return value;
+    return Object.hasOwn(LEGACY_MARKER_NAMES, value)
+        ? LEGACY_MARKER_NAMES[value]
+        : null;
+}
+export const EDITOR_ALIGNMENTS = ["left", "center", "right"];
+export const DEFAULT_ALIGNMENT = "left";
+function writtenAlignment(value) {
+    const normalized = value?.trim().toLowerCase();
+    return normalized === "center" || normalized === "right" ? normalized : null;
+}
+export function alignmentFromElement(element) {
+    const own = element.getAttribute("data-align");
+    if (own !== null) {
+        return EDITOR_ALIGNMENTS.includes(own) && own !== DEFAULT_ALIGNMENT
+            ? own
+            : null;
+    }
+    const style = /(?:^|;)\s*text-align\s*:\s*([a-z-]+)/i.exec(element.getAttribute("style") ?? "");
+    return writtenAlignment(style?.[1]) ?? writtenAlignment(element.getAttribute("align"));
+}
+//# sourceMappingURL=palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../../../src/editor/styles/palette.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+import type { EditorWrapperTone } from "../../i18n/messages.js";
+import type { EditorMarkerName, EditorTextColorName } from "./palette.js";
+import type { RichTextSurface } from "./surface.js";
+/**
+ * Классы цвета текста и маркера по именам палитр (`palette.ts`).
+ *
+ * ПОЧЕМУ ЛИТЕРАЛЫ, А НЕ СБОРКА ИЗ ИМЕНИ ТОКЕНА. Tailwind читает исходник как
+ * текст: `text-${token}` он не увидит, и класса в сборке не будет. Поэтому
+ * каждый класс записан целиком, а соответствие записей токенам палитры держит
+ * тест (`tests/rich-text-editor-color.test.tsx`), и `Record` не даёт забыть имя
+ * при добавлении цвета.
+ *
+ * Используются дважды: селекторами на контейнере документа (ниже) и образцами
+ * в меню Панели.
+ */
+export declare const EDITOR_TEXT_COLOR_CLASS: Record<EditorTextColorName, string>;
+/**
+ * Подложка маркера: токен `--marker-<имя>` компонентного слоя, значение у
+ * каждой темы своё (`styles.css`).
+ *
+ * ПЕРЕМЕННАЯ ЧИТАЕТСЯ НАПРЯМУЮ — `bg-(--marker-gray)`, а не `bg-marker-gray`
+ * через мост `@theme`. Мост (`--color-x: var(--x)`) объявлен на корне, и
+ * `var()` в нём подставляется ТАМ: вложенная тема (`data-theme="light"` на
+ * обёртке внутри тёмного приложения) значения моста уже не меняет. Прямая
+ * ссылка подставляется на самом `mark` и берёт значение ближайшего предка с
+ * `data-theme`. Класс читает глобальный токен, а не `--rte-*`: меню Панели
+ * открывается порталом вне контейнера документа, где `--rte-*` нет.
+ *
+ * ТЕКСТ НА МАРКЕРЕ. У трёх ярких маркеров образец несёт и
+ * `text-(--marker-text)`: их подложка одна во всех темах и яркая, а светлый
+ * текст тёмной темы на ней не читался бы. У шести прежних цветов Notion подложки
+ * свои у каждой темы (в тёмных — тёмные) и остаются под наследуемый основной
+ * текст (`EDITOR_BRIGHT_MARKER_NAMES` в `palette.ts`).
+ */
+export declare const EDITOR_MARKER_CLASS: Record<EditorMarkerName, string>;
+/**
+ * Образец тона Обёртки в подменю «Тон ›» ручки: подпись пункта на
+ * мягкой подложке тона с полосой слева — тот же вид, что у Обёртки в
+ * Документе, только в миниатюре. Имя тона — словом, образец его только
+ * подкрепляет.
+ *
+ * Токены кита напрямую, а не роли `--rte-tone-*`: меню открывается порталом вне
+ * контейнера Документа, где ролей нет (как у `EDITOR_MARKER_CLASS`). Совпадение
+ * токенов образца с ролями темы сторожит `tests/rich-text-editor-wrapper-tone.test.tsx`.
+ */
+export declare const EDITOR_WRAPPER_TONE_CLASS: Record<EditorWrapperTone, string>;
+/**
+ * Типографика Документа — общая для Редактора и `RichTextView` — на токенах
+ * темы приложения (`surface="theme"`, по умолчанию).
+ */
+export declare const PROSE_CLASS: string;
+/** Та же типографика на светлом листе (`surface="paper"`). */
+export declare const PAPER_PROSE_CLASS: string;
+/** Классы контейнера Документа для поверхности. */
+export declare function proseClass(surface: RichTextSurface): string;
+//# sourceMappingURL=prose.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/editor/styles/prose.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAOvE,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAUhE,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAMvE,CAAC;AAuUF;;;GAGG;AACH,eAAO,MAAM,WAAW,QAA0C,CAAC;AAYnE,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,QAC2C,CAAC;AAE1E,mDAAmD;AACnD,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,GAAG,MAAM,CAE3D"}

package/dist/editor/styles/prose.js

@@ -0,0 +1,154 @@
+import { CODE_THEME_CLASS } from "./codeTheme.js";
+import { EDITOR_PAPER_TOKENS_CLASS, EDITOR_TOKENS_CLASS } from "./tokens.js";
+export const EDITOR_TEXT_COLOR_CLASS = {
+    accent: "text-accent-strong",
+    success: "text-success-strong",
+    warning: "text-warning-strong",
+    danger: "text-danger-strong",
+    lime: "text-draft-strong",
+    muted: "text-fg-2",
+};
+export const EDITOR_MARKER_CLASS = {
+    yellow: "bg-(--marker-yellow) text-(--marker-text)",
+    green: "bg-(--marker-green) text-(--marker-text)",
+    pink: "bg-(--marker-pink) text-(--marker-text)",
+    gray: "bg-(--marker-gray)",
+    brown: "bg-(--marker-brown)",
+    orange: "bg-(--marker-orange)",
+    purple: "bg-(--marker-purple)",
+    blue: "bg-(--marker-blue)",
+    red: "bg-(--marker-red)",
+};
+export const EDITOR_WRAPPER_TONE_CLASS = {
+    neutral: "rounded-xs border-l-[3px] border-(--fg-3) bg-(--bg-3) px-1.5",
+    accent: "rounded-xs border-l-[3px] border-(--accent-strong) bg-(--accent-soft) px-1.5",
+    success: "rounded-xs border-l-[3px] border-(--success-strong) bg-(--success-soft) px-1.5",
+    warning: "rounded-xs border-l-[3px] border-(--warning-strong) bg-(--warning-soft) px-1.5",
+    danger: "rounded-xs border-l-[3px] border-(--danger-strong) bg-(--danger-soft) px-1.5",
+};
+const COLOR_CLASS = "[&_span[data-color=accent]]:text-(--rte-text-accent) [&_span[data-color=success]]:text-(--rte-text-success) " +
+    "[&_span[data-color=warning]]:text-(--rte-text-warning) [&_span[data-color=danger]]:text-(--rte-text-danger) " +
+    "[&_span[data-color=lime]]:text-(--rte-text-lime) [&_span[data-color=muted]]:text-(--rte-text-muted) " +
+    "[&_mark[data-color=gray]]:bg-(--marker-gray) [&_mark[data-color=brown]]:bg-(--marker-brown) " +
+    "[&_mark[data-color=orange]]:bg-(--marker-orange) [&_mark[data-color=yellow]]:bg-(--marker-yellow) " +
+    "[&_mark[data-color=green]]:bg-(--marker-green) [&_mark[data-color=blue]]:bg-(--marker-blue) " +
+    "[&_mark[data-color=purple]]:bg-(--marker-purple) [&_mark[data-color=pink]]:bg-(--marker-pink) " +
+    "[&_mark[data-color=red]]:bg-(--marker-red) " +
+    "[&_mark[data-color=accent]]:bg-(--marker-blue) [&_mark[data-color=success]]:bg-(--marker-green) " +
+    "[&_mark[data-color=warning]]:bg-(--marker-yellow) [&_mark[data-color=danger]]:bg-(--marker-red) " +
+    "[&_mark[data-color=lime]]:bg-(--marker-green) [&_mark[data-color=muted]]:bg-(--marker-gray) " +
+    "[&_mark]:text-(--marker-text) " +
+    "[&_mark:not(:is([data-color=gray],[data-color=brown],[data-color=orange],[data-color=blue],[data-color=purple],[data-color=red],[data-color=accent],[data-color=danger],[data-color=muted]))]:selection:bg-(--rte-selection-marker) " +
+    "[&_mark:not(:is([data-color=gray],[data-color=brown],[data-color=orange],[data-color=blue],[data-color=purple],[data-color=red],[data-color=accent],[data-color=danger],[data-color=muted]))]:selection:text-(--marker-text) " +
+    "[&_mark[data-color=gray]]:text-inherit [&_mark[data-color=brown]]:text-inherit " +
+    "[&_mark[data-color=orange]]:text-inherit [&_mark[data-color=blue]]:text-inherit " +
+    "[&_mark[data-color=purple]]:text-inherit [&_mark[data-color=red]]:text-inherit " +
+    "[&_mark[data-color=accent]]:text-inherit [&_mark[data-color=danger]]:text-inherit " +
+    "[&_mark[data-color=muted]]:text-inherit " +
+    "[&_[data-align=center]]:text-center [&_[data-align=right]]:text-right ";
+const TABLE_CLASS = "[&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto [&_table]:border-collapse " +
+    "[&_:is(th,td)]:min-w-24 [&_:is(th,td)]:border [&_:is(th,td)]:border-(--rte-hr) " +
+    "[&_:is(th,td)]:px-3 [&_:is(th,td)]:py-1.5 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top " +
+    "[&_th]:bg-(--rte-code-background) [&_th]:font-semibold " +
+    "[&_:is(th,td)>*:not(:last-child)]:mb-2 [&_.selectedCell]:bg-(--rte-selection) " +
+    "[&_.ProseMirror-gapcursor]:pointer-events-none [&_.ProseMirror-gapcursor]:relative " +
+    "[&_.ProseMirror-gapcursor]:hidden [&.ProseMirror-focused_.ProseMirror-gapcursor]:block " +
+    "[&_.ProseMirror-gapcursor]:after:absolute [&_.ProseMirror-gapcursor]:after:-top-0.5 " +
+    "[&_.ProseMirror-gapcursor]:after:w-5 [&_.ProseMirror-gapcursor]:after:border-t-2 " +
+    "[&_.ProseMirror-gapcursor]:after:border-(--rte-foreground)";
+const LAYOUT_CLASS = "[&:has(>[data-block=layout])]:[container-type:inline-size] " +
+    "[&:has(>[data-block=layout])]:[container-name:rte-document] " +
+    "[&_[data-block=layout]]:grid [&_[data-block=layout]]:gap-4 " +
+    "[&_[data-block=column]]:min-w-0 [&_[data-block=column]>*:not(:last-child)]:mb-3 " +
+    "[&_[data-block=column]>:is(h1,h2,h3,h4):not(:first-child)]:mt-6 " +
+    "@min-[30rem]/rte-document:[&_[data-layout='50-50']]:grid-cols-2 " +
+    "@min-[30rem]/rte-document:[&_[data-layout='60-40']]:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] " +
+    "@min-[30rem]/rte-document:[&_[data-layout='40-60']]:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] " +
+    "@min-[40rem]/rte-document:[&_[data-layout='33-33-33']]:grid-cols-3 " +
+    "@min-[48rem]/rte-document:[&_[data-layout='25-25-25-25']]:grid-cols-4 " +
+    "[&.ProseMirror_[data-block=column]]:rounded-(--rte-radius) " +
+    "[&.ProseMirror_[data-block=column]]:border [&.ProseMirror_[data-block=column]]:border-dashed " +
+    "[&.ProseMirror_[data-block=column]]:border-(--rte-muted-foreground) " +
+    "[&.ProseMirror_[data-block=column]]:p-2";
+const WRAPPER_CLASS = "[&_[data-block=wrapper]>*:not(:last-child)]:mb-3 " +
+    "[&_[data-block=wrapper]>:is(h1,h2,h3,h4):not(:first-child)]:mt-6 " +
+    "[&.ProseMirror_[data-block=wrapper]:not([data-tone])]:rounded-(--rte-radius) " +
+    "[&.ProseMirror_[data-block=wrapper]:not([data-tone])]:border " +
+    "[&.ProseMirror_[data-block=wrapper]:not([data-tone])]:border-dashed " +
+    "[&.ProseMirror_[data-block=wrapper]:not([data-tone])]:border-(--rte-muted-foreground) " +
+    "[&.ProseMirror_[data-block=wrapper]:not([data-tone])]:p-2 " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:rounded-(--rte-radius) " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:border-l-[3px] " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:px-3 " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:py-2.5 " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:[--rte-link:var(--rte-tone-link)] " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:[--rte-secondary:var(--rte-tone-secondary)] " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:[--rte-muted:var(--rte-tone-muted)] " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:[--rte-text-muted:var(--rte-tone-muted)] " +
+    "[&_[data-block=wrapper]:is([data-tone=neutral],[data-tone=accent],[data-tone=success],[data-tone=warning],[data-tone=danger])]:[--rte-muted-foreground:var(--rte-tone-muted-foreground)] " +
+    "[&_[data-block=wrapper][data-tone=neutral]]:bg-(--rte-tone-neutral-background) " +
+    "[&_[data-block=wrapper][data-tone=neutral]]:border-(--rte-tone-neutral-border) " +
+    "[&_[data-block=wrapper][data-tone=accent]]:bg-(--rte-tone-accent-background) " +
+    "[&_[data-block=wrapper][data-tone=accent]]:border-(--rte-tone-accent-border) " +
+    "[&_[data-block=wrapper][data-tone=success]]:bg-(--rte-tone-success-background) " +
+    "[&_[data-block=wrapper][data-tone=success]]:border-(--rte-tone-success-border) " +
+    "[&_[data-block=wrapper][data-tone=warning]]:bg-(--rte-tone-warning-background) " +
+    "[&_[data-block=wrapper][data-tone=warning]]:border-(--rte-tone-warning-border) " +
+    "[&_[data-block=wrapper][data-tone=danger]]:bg-(--rte-tone-danger-background) " +
+    "[&_[data-block=wrapper][data-tone=danger]]:border-(--rte-tone-danger-border)";
+const CUSTOM_BLOCK_CLASS = "[&_div[data-block]:not([data-block=layout],[data-block=column],[data-block=wrapper])>:is(p,h1,h2,h3,h4,ul,ol,blockquote,hr,pre,table,figure,div):not(:last-child)]:mb-3 " +
+    "[&_div[data-block]:not([data-block=layout],[data-block=column],[data-block=wrapper])>:is(h1,h2,h3,h4):not(:first-child)]:mt-6";
+const PROSE_RULES = "text-(--rte-foreground) text-md leading-6 break-words " +
+    "selection:bg-(--rte-selection) selection:text-(--rte-foreground) " +
+    "[&_:focus-visible]:outline-(--rte-ring) " +
+    COLOR_CLASS +
+    CODE_THEME_CLASS +
+    "[&>*:not(:last-child)]:mb-3 [&_blockquote>*:not(:last-child)]:mb-2 " +
+    "[&_:is(h1,h2,h3,h4)]:font-semibold [&>:is(h1,h2,h3,h4):not(:first-child)]:mt-6 " +
+    "[&_h1]:text-2xl [&_h2]:text-xl [&_h3]:text-lg [&_h4]:text-md " +
+    "[&_:is(ul,ol)]:pl-6 [&_ul]:list-disc [&_ol]:list-decimal " +
+    "[&_ul_ul]:list-[circle] [&_ol_ol]:list-[lower-alpha] [&_li+li]:mt-1 " +
+    "[&_blockquote]:border-l-4 [&_blockquote]:border-(--rte-quote) [&_blockquote]:pl-3.5 " +
+    "[&_blockquote]:text-(--rte-secondary) " +
+    "[&_hr]:my-4 [&_hr]:h-0.5 [&_hr]:border-0 [&_hr]:bg-(--rte-hr) " +
+    "[&_a]:text-(--rte-link) [&_a]:underline [&_a]:underline-offset-2 " +
+    "[&_code]:rounded-(--rte-radius) [&_code]:border [&_code]:border-(--rte-code-border) " +
+    "[&_code]:bg-(--rte-code-background) [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono " +
+    "[&_code]:text-[0.9em] " +
+    "[&_pre]:rounded-(--rte-radius) [&_pre]:border [&_pre]:border-(--rte-code-border) " +
+    "[&_pre]:bg-(--rte-code-block-background) [&_pre]:text-(--rte-code-block-foreground) " +
+    "[&_pre]:overflow-x-auto [&_pre]:px-3 [&_pre]:py-2 " +
+    "[&_pre]:font-mono [&_pre]:text-[0.9em] [&_pre]:leading-5 " +
+    "[&_pre_code]:rounded-none [&_pre_code]:border-0 [&_pre_code]:bg-transparent " +
+    "[&_pre_code]:p-0 [&_pre_code]:text-[length:inherit] " +
+    "[&_ul[data-type=taskList]]:list-none [&_ul[data-type=taskList]]:pl-1 " +
+    "[&_ul[data-type=taskList]>li]:relative [&_ul[data-type=taskList]>li]:flex " +
+    "[&_ul[data-type=taskList]>li]:items-start [&_ul[data-type=taskList]>li]:gap-2 " +
+    "[&_ul[data-type=taskList]>li>label]:mt-[5px] [&_ul[data-type=taskList]>li>label]:flex " +
+    "[&_ul[data-type=taskList]>li>label]:shrink-0 " +
+    "[&_ul[data-type=taskList]>li>div]:min-w-0 [&_ul[data-type=taskList]>li>div]:flex-1 " +
+    "[&_li[data-checked=true]>div]:text-(--rte-muted) [&_li[data-checked=true]>div]:line-through " +
+    "[&_input[type=checkbox]]:size-3.5 [&_input[type=checkbox]]:cursor-pointer " +
+    "[&_input[type=checkbox]]:accent-(--rte-primary) " +
+    "[&_figure]:mx-auto [&_figure]:w-fit [&_figure]:max-w-full " +
+    "[&_figure_img]:block [&_figure_img]:h-auto [&_figure_img]:max-w-full " +
+    "[&_figure_img]:rounded-(--rte-radius) [&_figure_img[data-width]]:w-full " +
+    "[&_figure:has(img[data-width='50'])]:w-1/2 [&_figure:has(img[data-width='75'])]:w-3/4 " +
+    "[&_figure:has(img[data-width='100'])]:w-full " +
+    "[&_figcaption]:mt-1.5 [&_figcaption]:text-center [&_figcaption]:text-sm " +
+    "[&_figcaption]:text-(--rte-muted) " +
+    TABLE_CLASS +
+    " " +
+    LAYOUT_CLASS +
+    " " +
+    WRAPPER_CLASS +
+    " " +
+    CUSTOM_BLOCK_CLASS;
+export const PROSE_CLASS = EDITOR_TOKENS_CLASS + " " + PROSE_RULES;
+const PAPER_SHEET_CLASS = "rounded-(--r-sm) border border-(--line) bg-(--rte-background) px-4 py-3 " +
+    "shadow-[var(--shadow-1)] scheme-light";
+export const PAPER_PROSE_CLASS = EDITOR_PAPER_TOKENS_CLASS + " " + PAPER_SHEET_CLASS + " " + PROSE_RULES;
+export function proseClass(surface) {
+    return surface === "paper" ? PAPER_PROSE_CLASS : PROSE_CLASS;
+}
+//# sourceMappingURL=prose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prose.js","sourceRoot":"","sources":["../../../src/editor/styles/prose.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+/**
+ * Поверхность области Документа.
+ *
+ * - `"theme"` (по умолчанию) — Документ в теме приложения, как в Notion,
+ *   Confluence и Slack.
+ * - `"paper"` — светлый лист в любой теме приложения (тёмной, сумрачной,
+ *   брендовой), как «Сменить режим» в Word: текст, ссылки, маркеры, таблицы,
+ *   код и цвета автора — как в светлой теме. Панель, поповеры, меню и окна
+ *   остаются в теме приложения, рамка фокуса поля — тоже.
+ *
+ * Модуль серверно-безопасен: данные и тип, без React и без движка.
+ */
+export type RichTextSurface = "theme" | "paper";
+/**
+ * Атрибуты контейнера Документа. `data-theme="light"` — вложенная тема для
+ * того, что объявлено на `[data-theme]` любого элемента: маркеры (`--marker-*`)
+ * и тема подсветки кода (`styles.css`). Роли `--rte-*` лист получает классами
+ * (`EDITOR_PAPER_TOKENS_CLASS`): токены кита на вложенную тему не отзываются.
+ * `data-surface` — для потребителя и тестов: стилей на нём нет.
+ */
+export declare function surfaceAttributes(surface: RichTextSurface): Record<string, string>;
+//# sourceMappingURL=surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/editor/styles/surface.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAElF"}

package/dist/editor/styles/surface.js

@@ -0,0 +1,4 @@
+export function surfaceAttributes(surface) {
+    return surface === "paper" ? { "data-surface": "paper", "data-theme": "light" } : {};
+}
+//# sourceMappingURL=surface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../../src/editor/styles/surface.ts"],"names":[],"mappings":"AAqBA,MAAM,UAAU,iBAAiB,CAAC,OAAwB;IACxD,OAAO,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACvF,CAAC"}