@docmentis/udoc-editor 0.0.1 → 0.8.1

package/dist/commands.js

@@ -0,0 +1,225 @@
+// The Text, Shape and Object tabs' commands: character and paragraph formatting
+// over the text selection, and the Fill / Line / Arrange controls over a
+// drawing's shapes or a PDF's page objects.
+import { allowsEdit, ICON_FILL, ICON_STROKE, ICON_TEXT_HIGHLIGHT } from "@docmentis/udoc-ui/internal";
+import { OBJECT_ARRANGE_MENU, SHAPE_ARRANGE_MENU } from "./arrange.js";
+import { fontFamilyControl, fontSizeControl, listControl, textFormatControl } from "./components/TextControls.js";
+import { ICON_ARRANGE, ICON_BOLD, ICON_FONT_SIZE, ICON_FONTS, ICON_ITALIC, ICON_LINE_SPACING, ICON_LIST_BULLET, ICON_LIST_NUMBER, ICON_PARAGRAPH_LEFT, ICON_STRIKETHROUGH, ICON_SUBSCRIPT, ICON_SUPERSCRIPT, ICON_TEXT_FILL, ICON_UNDERLINE, ICON_WIDTH_SCALE, } from "./icons.js";
+import { paintControl } from "./paint.js";
+import { LINE_SPACING_MENU, PARAGRAPH_ALIGN_MENU, whenParagraphFormat, whenTextFormat, whenWidthScale, WIDTH_SCALE_MENU, } from "./text-format.js";
+/**
+ * The format commands, their controls built over `tools` — read when the ribbon
+ * builds a control, which it does only on an open document's strip, so after
+ * edit mode is mounted.
+ */
+export function formatCommands(tools) {
+    // A character toggle: lit while the selection carries `property`.
+    const textFormat = (id, label, icon, property) => ({
+        id,
+        label,
+        icon,
+        group: "textStyle",
+        run: {
+            kind: "control",
+            cluster: "toggle",
+            create: (env) => textFormatControl(env, { id, icon, property }, tools()),
+        },
+        enabledWhen: whenTextFormat,
+    });
+    return {
+        // Text tab — the font picker, the point-size field, then the Bold /
+        // Italic toggles. Each mirrors the selection's resolved format and
+        // lowers to a character-property text edit, so all gate on the engine's
+        // text `setCharacterProperties` capability (`whenTextFormat`): live over
+        // a non-empty text range, greyed on a bare caret or a non-text selection.
+        fontFamily: {
+            id: "fontFamily",
+            label: "command.fontFamily",
+            icon: ICON_FONTS,
+            group: "font",
+            run: { kind: "control", create: (env) => fontFamilyControl(env, "fontFamily", tools()) },
+            enabledWhen: whenTextFormat,
+        },
+        fontSize: {
+            id: "fontSize",
+            label: "command.fontSize",
+            icon: ICON_FONT_SIZE,
+            group: "font",
+            run: { kind: "control", create: (env) => fontSizeControl(env, "fontSize", tools()) },
+            enabledWhen: whenTextFormat,
+        },
+        // The character-format toggles are their own group ("textStyle"), split
+        // from the font fields above so a divider fences the toggle cluster off
+        // from the value-fields — the fields hold a value (bordered), the toggles
+        // don't (flat), and the divider is what marks that boundary now that
+        // neither wears a box.
+        bold: textFormat("bold", "command.bold", ICON_BOLD, "bold"),
+        italic: textFormat("italic", "command.italic", ICON_ITALIC, "italic"),
+        underline: textFormat("underline", "command.underline", ICON_UNDERLINE, "underline"),
+        strikethrough: textFormat("strikethrough", "command.strikethrough", ICON_STRIKETHROUGH, "strikethrough"),
+        superscript: textFormat("superscript", "command.superscript", ICON_SUPERSCRIPT, "superscript"),
+        subscript: textFormat("subscript", "command.subscript", ICON_SUBSCRIPT, "subscript"),
+        // Scale — the horizontal glyph stretch (`w:w`), as a dropdown of Word's
+        // presets. Word keeps it in its Font dialog; with no dialog here it rides
+        // the band beside the toggles.
+        widthScale: {
+            id: "widthScale",
+            label: "command.widthScale",
+            icon: ICON_WIDTH_SCALE,
+            group: "textStyle",
+            run: { kind: "menu", menu: WIDTH_SCALE_MENU },
+            enabledWhen: whenWidthScale,
+        },
+        // Text color + highlight — dropdowns mirroring the selection's span color
+        // over the shared color picker (the Fill / Line machinery, `text` /
+        // `highlight` channels). A span color is a character property, so they
+        // gate with the sibling text controls on `setCharacterProperties`
+        // (`whenTextFormat`).
+        textFill: {
+            id: "textFill",
+            label: "command.textFill",
+            icon: ICON_TEXT_FILL,
+            group: "font",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "textFill", icon: ICON_TEXT_FILL, channel: "text" }, tools()),
+            },
+            enabledWhen: whenTextFormat,
+        },
+        textHighlight: {
+            id: "textHighlight",
+            label: "command.textHighlight",
+            icon: ICON_TEXT_HIGHLIGHT,
+            group: "font",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "textHighlight", icon: ICON_TEXT_HIGHLIGHT, channel: "highlight" }, tools()),
+            },
+            enabledWhen: whenTextFormat,
+        },
+        // The paragraph half of the Text tab — its own group ("paragraph"), so a
+        // divider fences it off from the character controls above: those act on
+        // the spans a selection *covers*, these on the paragraphs it *touches*,
+        // and a bare caret lights the second set while greying the first. Four
+        // controls butted into one cluster, each with its long tail inside its
+        // own menu.
+        paragraphAlign: {
+            id: "paragraphAlign",
+            label: "command.paragraphAlign",
+            icon: ICON_PARAGRAPH_LEFT,
+            group: "paragraph",
+            run: { kind: "menu", menu: PARAGRAPH_ALIGN_MENU, cluster: "paragraph" },
+            enabledWhen: whenParagraphFormat,
+        },
+        lineSpacing: {
+            id: "lineSpacing",
+            label: "command.lineSpacing",
+            icon: ICON_LINE_SPACING,
+            group: "paragraph",
+            run: { kind: "menu", menu: LINE_SPACING_MENU, cluster: "paragraph" },
+            enabledWhen: whenParagraphFormat,
+        },
+        bulletList: {
+            id: "bulletList",
+            label: "command.bulletList",
+            icon: ICON_LIST_BULLET,
+            group: "paragraph",
+            run: {
+                kind: "control",
+                cluster: "paragraph",
+                create: (env) => listControl(env, { id: "bulletList", icon: ICON_LIST_BULLET, list: "bulleted" }, tools()),
+            },
+            enabledWhen: whenParagraphFormat,
+        },
+        numberList: {
+            id: "numberList",
+            label: "command.numberList",
+            icon: ICON_LIST_NUMBER,
+            group: "paragraph",
+            run: {
+                kind: "control",
+                cluster: "paragraph",
+                create: (env) => listControl(env, { id: "numberList", icon: ICON_LIST_NUMBER, list: "numbered" }, tools()),
+            },
+            enabledWhen: whenParagraphFormat,
+        },
+        // Shape tab — the Fill / Line dropdowns. The color bar reflects the
+        // selection's color; the caret opens the picker. Enabled when the
+        // selection accepts the paint edit — a drawing shape's `setShapeFill` /
+        // `setShapeLine`.
+        shapeFillColor: {
+            id: "shapeFillColor",
+            label: "command.shapeFillColor",
+            icon: ICON_FILL,
+            group: "paint",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "shapeFillColor", icon: ICON_FILL, channel: "fill" }, tools()),
+            },
+            enabledWhen: (c) => allowsEdit(c.selection, "setShapeFill"),
+        },
+        shapeStrokeColor: {
+            id: "shapeStrokeColor",
+            label: "command.shapeStrokeColor",
+            icon: ICON_STROKE,
+            group: "paint",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "shapeStrokeColor", icon: ICON_STROKE, channel: "stroke" }, tools()),
+            },
+            enabledWhen: (c) => allowsEdit(c.selection, "setShapeLine"),
+        },
+        // The Shape tab's one arrangement button. Its dropdown nests Order /
+        // Align / Rotate submenus plus Group / Ungroup; it greys out exactly when
+        // the whole menu would be dead (nothing selected, or a lone shape that
+        // can't move, align, rotate, or (un)group).
+        shapeArrange: {
+            id: "shapeArrange",
+            label: "command.shapeArrange",
+            icon: ICON_ARRANGE,
+            group: "arrange",
+            run: { kind: "menu", menu: SHAPE_ARRANGE_MENU },
+            enabledWhen: (c) => SHAPE_ARRANGE_MENU.some((i) => i.enabledWhen(c)),
+        },
+        // Object tab — the PDF twins of the Shape tab's three: Fill / Line gated
+        // on a page object's `setNonstrokingStyle` / `setStrokingStyle`, and
+        // Arrange over its own menu of object edits.
+        objectFillColor: {
+            id: "objectFillColor",
+            label: "command.objectFillColor",
+            icon: ICON_FILL,
+            group: "paint",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "objectFillColor", icon: ICON_FILL, channel: "fill" }, tools()),
+            },
+            enabledWhen: (c) => allowsEdit(c.selection, "setNonstrokingStyle"),
+        },
+        objectStrokeColor: {
+            id: "objectStrokeColor",
+            label: "command.objectStrokeColor",
+            icon: ICON_STROKE,
+            group: "paint",
+            run: {
+                kind: "control",
+                cluster: "paint",
+                create: (env) => paintControl(env, { id: "objectStrokeColor", icon: ICON_STROKE, channel: "stroke" }, tools()),
+            },
+            enabledWhen: (c) => allowsEdit(c.selection, "setStrokingStyle"),
+        },
+        objectArrange: {
+            id: "objectArrange",
+            label: "command.objectArrange",
+            icon: ICON_ARRANGE,
+            group: "arrange",
+            run: { kind: "menu", menu: OBJECT_ARRANGE_MENU },
+            enabledWhen: (c) => OBJECT_ARRANGE_MENU.some((i) => i.enabledWhen(c)),
+        },
+    };
+}
+//# sourceMappingURL=commands.js.map

package/dist/commands.js.map

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

package/dist/components/ComboBox.d.ts

@@ -0,0 +1,38 @@
+import type { MenuController, MenuControllerOptions } from "@docmentis/udoc-ui/internal";
+/** A combobox's field content — a typeable value paired with a dropdown list. */
+export interface ComboBoxContent {
+    /** Accessible name + tooltip for the field and its list toggle. */
+    label: string;
+    /** Extra class names appended to the field wrapper (e.g. a width class). */
+    className?: string;
+    /** The input's `inputmode` hint — e.g. `"decimal"` for a numeric field. */
+    inputMode?: "text" | "numeric" | "decimal";
+}
+export interface ComboBox {
+    /** The positioned field wrapper — the input, caret, and menu live inside it. */
+    readonly el: HTMLElement;
+    /** The typeable value field — the combobox's keyboard entry point. */
+    readonly input: HTMLInputElement;
+    /** The caret that opens the list. A mouse affordance, not a tab stop; the
+     *  input is the field's single keyboard focus. */
+    readonly caret: HTMLButtonElement;
+    /** The floating `.udoc-menu` listbox to fill with options. */
+    readonly menu: HTMLElement;
+    readonly controller: MenuController;
+    destroy(): void;
+}
+/**
+ * A combobox: a bordered field pairing a typeable {@link HTMLInputElement} with a
+ * caret that opens a `.udoc-menu` listbox — the editable analogue of
+ * {@link createDropdownButton}. The caller fills `menu` on open (as with a
+ * dropdown) and wires the input's commit / mirror behavior; both picking a value
+ * from the list and typing one that isn't in it are first-class. The outline is
+ * the shared field signal (see `.udoc-btn--field`).
+ *
+ * The caret is the menu's trigger, so a click on the input (also inside the
+ * wrapper) leaves an open list open — you can open the list and then type.
+ */
+export declare function createComboBox(content: ComboBoxContent, options?: {
+    menuLabel?: string;
+} & MenuControllerOptions): ComboBox;
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/components/ComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/components/ComboBox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzF,iFAAiF;AACjF,MAAM,WAAW,eAAe;IAC5B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CAC9C;AAED,MAAM,WAAW,QAAQ;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC;sDACkD;IAClD,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC;IACpC,OAAO,IAAI,IAAI,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAC1B,OAAO,EAAE,eAAe,EACxB,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,qBAA0B,GAC7D,QAAQ,CA2CV"}

package/dist/components/ComboBox.js

@@ -0,0 +1,57 @@
+// A combobox — a typeable value field paired with a dropdown list: the Text
+// tab's font and size fields.
+import { alignMenuToBounds, createMenuController, ICON_CHEVRON_DOWN } from "@docmentis/udoc-ui/internal";
+/**
+ * A combobox: a bordered field pairing a typeable {@link HTMLInputElement} with a
+ * caret that opens a `.udoc-menu` listbox — the editable analogue of
+ * {@link createDropdownButton}. The caller fills `menu` on open (as with a
+ * dropdown) and wires the input's commit / mirror behavior; both picking a value
+ * from the list and typing one that isn't in it are first-class. The outline is
+ * the shared field signal (see `.udoc-btn--field`).
+ *
+ * The caret is the menu's trigger, so a click on the input (also inside the
+ * wrapper) leaves an open list open — you can open the list and then type.
+ */
+export function createComboBox(content, options = {}) {
+    const el = document.createElement("div");
+    el.className = content.className ? `udoc-combobox ${content.className}` : "udoc-combobox";
+    const input = document.createElement("input");
+    input.className = "udoc-combobox__input";
+    input.type = "text";
+    input.title = content.label;
+    input.setAttribute("aria-label", content.label);
+    // No native autofill dropdown — it would fight our own listbox panel.
+    input.setAttribute("autocomplete", "off");
+    if (content.inputMode)
+        input.inputMode = content.inputMode;
+    const caret = document.createElement("button");
+    caret.className = "udoc-combobox__caret";
+    caret.innerHTML = ICON_CHEVRON_DOWN;
+    // The input carries the field's keyboard focus; the caret is click-only so it
+    // doesn't add a second tab stop for one control.
+    caret.tabIndex = -1;
+    caret.title = content.label;
+    caret.setAttribute("aria-label", content.label);
+    caret.setAttribute("aria-haspopup", "listbox");
+    const menu = document.createElement("div");
+    menu.className = "udoc-menu";
+    menu.setAttribute("role", "listbox");
+    if (options.menuLabel)
+        menu.setAttribute("aria-label", options.menuLabel);
+    el.append(input, caret, menu);
+    // Compose the caller's onOpen (which fills the list) with the collision flip,
+    // running the flip last so it measures the built panel at its real width —
+    // mirrors createDropdownButton. `isInside` spans the whole wrapper so clicking
+    // the input doesn't dismiss an open list.
+    const userOnOpen = options.onOpen;
+    const controller = createMenuController(caret, menu, {
+        isInside: (t) => el.contains(t),
+        ...options,
+        onOpen: () => {
+            userOnOpen?.();
+            alignMenuToBounds(caret, menu);
+        },
+    });
+    return { el, input, caret, menu, controller, destroy: () => controller.destroy() };
+}
+//# sourceMappingURL=ComboBox.js.map

package/dist/components/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","sourceRoot":"","sources":["../../src/components/ComboBox.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,8BAA8B;AAC9B,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AA2BzG;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAC1B,OAAwB,EACxB,UAA0D,EAAE;IAE5D,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IAE1F,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,SAAS,GAAG,sBAAsB,CAAC;IACzC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;IAC5B,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAChD,sEAAsE;IACtE,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;IAC1C,IAAI,OAAO,CAAC,SAAS;QAAE,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IAE3D,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/C,KAAK,CAAC,SAAS,GAAG,sBAAsB,CAAC;IACzC,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACpC,8EAA8E;IAC9E,iDAAiD;IACjD,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACpB,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;IAC5B,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAChD,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IAE/C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;IAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACrC,IAAI,OAAO,CAAC,SAAS;QAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAE1E,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IAC9B,8EAA8E;IAC9E,2EAA2E;IAC3E,+EAA+E;IAC/E,0CAA0C;IAC1C,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;IAClC,MAAM,UAAU,GAAG,oBAAoB,CAAC,KAAK,EAAE,IAAI,EAAE;QACjD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/B,GAAG,OAAO;QACV,MAAM,EAAE,GAAG,EAAE;YACT,UAAU,EAAE,EAAE,CAAC;YACf,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;KACJ,CAAC,CAAC;IACH,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC;AACvF,CAAC"}

package/dist/components/ModeSwitch.d.ts

@@ -0,0 +1,15 @@
+import type { Action, Store, UIState } from "@docmentis/udoc-ui/internal";
+import type { I18n } from "../i18n/index.js";
+/**
+ * The mode switcher — sits in the toolbar's right cluster, governing the
+ * commands to its left. Rendered only when `showModeSwitch` and more than one
+ * mode is offered — allowed by the host and entitled (the common embedded case
+ * fixes the mode up front, so this is usually absent). A standard {@link createDropdownButton} (bordered field
+ * trigger), so it matches every other dropdown by construction.
+ */
+export declare function createModeSwitch(i18n: I18n): {
+    el: HTMLDivElement;
+    mount: (container: HTMLElement, store: Store<UIState, Action>) => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=ModeSwitch.d.ts.map

package/dist/components/ModeSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSwitch.d.ts","sourceRoot":"","sources":["../../src/components/ModeSwitch.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAA2B,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,KAAK,EAAE,IAAI,EAAc,MAAM,kBAAkB,CAAC;AAsCzD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI;;uBAyDb,WAAW,SAAS,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,KAAG,IAAI;mBAOvD,IAAI;EAO3B"}

package/dist/components/ModeSwitch.js

@@ -0,0 +1,94 @@
+import { createDropdownButton, createMenuItem, subscribeSelector } from "@docmentis/udoc-ui/internal";
+import { modeEntitled } from "../mode.js";
+import { editState } from "../state.js";
+/** Human labels for each mode. */
+const MODE_LABELS = {
+    view: "mode.view",
+    edit: "mode.edit",
+};
+function sliceEqual(a, b) {
+    return (a.mode === b.mode &&
+        a.allowedModes === b.allowedModes &&
+        a.features === b.features &&
+        a.showModeSwitch === b.showModeSwitch);
+}
+function selectSlice(s) {
+    const { allowedModes, showModeSwitch } = editState(s);
+    return { mode: s.mode, allowedModes, features: s.features, showModeSwitch };
+}
+/** The modes the switcher offers: the host's, less those the session is not
+ *  entitled to. */
+function offeredModes(slice) {
+    return slice.allowedModes.filter((mode) => modeEntitled(mode, slice.features));
+}
+/**
+ * The mode switcher — sits in the toolbar's right cluster, governing the
+ * commands to its left. Rendered only when `showModeSwitch` and more than one
+ * mode is offered — allowed by the host and entitled (the common embedded case
+ * fixes the mode up front, so this is usually absent). A standard {@link createDropdownButton} (bordered field
+ * trigger), so it matches every other dropdown by construction.
+ */
+export function createModeSwitch(i18n) {
+    const el = document.createElement("div");
+    el.className = "udoc-mode-switch";
+    let storeRef = null;
+    let unsub = null;
+    let dropdown = null;
+    // Signature of what's currently built, to avoid rebuilding identical DOM.
+    let builtKey = "";
+    function setMode(mode) {
+        storeRef?.dispatch({ type: "SET_MODE", mode });
+    }
+    function clearDropdown() {
+        dropdown?.destroy();
+        dropdown = null;
+        el.innerHTML = "";
+    }
+    function buildDropdown(slice) {
+        clearDropdown();
+        dropdown = createDropdownButton({ text: i18n.t(MODE_LABELS[slice.mode]), label: i18n.t("modeSwitch.label"), field: true }, { menuLabel: i18n.t("modeSwitch.label"), menuRole: "listbox" });
+        for (const mode of offeredModes(slice)) {
+            const item = createMenuItem({ text: i18n.t(MODE_LABELS[mode]), role: "option" });
+            const active = mode === slice.mode;
+            item.classList.toggle("udoc-menu__item--selected", active);
+            item.setAttribute("aria-selected", String(active));
+            item.addEventListener("click", (e) => {
+                e.stopPropagation();
+                setMode(mode);
+                dropdown?.controller.close();
+            });
+            dropdown.menu.appendChild(item);
+        }
+        el.appendChild(dropdown.el);
+    }
+    function applyState(slice) {
+        const modes = offeredModes(slice);
+        const visible = slice.showModeSwitch && modes.length > 1;
+        el.style.display = visible ? "" : "none";
+        if (!visible) {
+            clearDropdown();
+            builtKey = "";
+            return;
+        }
+        // Rebuild structure only when the mode set or active mode changes.
+        const key = `${slice.mode}:${modes.join(",")}`;
+        if (key === builtKey)
+            return;
+        builtKey = key;
+        buildDropdown(slice);
+    }
+    function mount(container, store) {
+        storeRef = store;
+        container.appendChild(el);
+        applyState(selectSlice(store.getState()));
+        unsub = subscribeSelector(store, selectSlice, applyState, { equality: sliceEqual });
+    }
+    function destroy() {
+        if (unsub)
+            unsub();
+        clearDropdown();
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+//# sourceMappingURL=ModeSwitch.js.map

package/dist/components/ModeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSwitch.js","sourceRoot":"","sources":["../../src/components/ModeSwitch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGtG,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,kCAAkC;AAClC,MAAM,WAAW,GAAmC;IAChD,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,WAAW;CACpB,CAAC;AASF,SAAS,UAAU,CAAC,CAAkB,EAAE,CAAkB;IACtD,OAAO,CACH,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI;QACjB,CAAC,CAAC,YAAY,KAAK,CAAC,CAAC,YAAY;QACjC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ;QACzB,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,cAAc,CACxC,CAAC;AACN,CAAC;AAED,SAAS,WAAW,CAAC,CAAU;IAC3B,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAkB,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,cAAc,EAAE,CAAC;AAC9F,CAAC;AAED;mBACmB;AACnB,SAAS,YAAY,CAAC,KAAsB;IACxC,OAAO,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,IAAU;IACvC,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,EAAE,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAElC,IAAI,QAAQ,GAAkC,IAAI,CAAC;IACnD,IAAI,KAAK,GAAwB,IAAI,CAAC;IACtC,IAAI,QAAQ,GAA0B,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,SAAS,OAAO,CAAC,IAAgB;QAC7B,QAAQ,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,SAAS,aAAa;QAClB,QAAQ,EAAE,OAAO,EAAE,CAAC;QACpB,QAAQ,GAAG,IAAI,CAAC;QAChB,EAAE,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,SAAS,aAAa,CAAC,KAAsB;QACzC,aAAa,EAAE,CAAC;QAChB,QAAQ,GAAG,oBAAoB,CAC3B,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EACzF,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CACjE,CAAC;QACF,KAAK,MAAM,IAAI,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,MAAM,IAAI,GAAG,cAAc,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;YACjF,MAAM,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;YAC3D,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACnD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACjC,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO,CAAC,IAAI,CAAC,CAAC;gBACd,QAAQ,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC;IAED,SAAS,UAAU,CAAC,KAAsB;QACtC,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;QAClC,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACzD,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,aAAa,EAAE,CAAC;YAChB,QAAQ,GAAG,EAAE,CAAC;YACd,OAAO;QACX,CAAC;QACD,mEAAmE;QACnE,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QAC/C,IAAI,GAAG,KAAK,QAAQ;YAAE,OAAO;QAC7B,QAAQ,GAAG,GAAG,CAAC;QACf,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,SAAS,KAAK,CAAC,SAAsB,EAAE,KAA6B;QAChE,QAAQ,GAAG,KAAK,CAAC;QACjB,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC1B,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC1C,KAAK,GAAG,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IACxF,CAAC;IAED,SAAS,OAAO;QACZ,IAAI,KAAK;YAAE,KAAK,EAAE,CAAC;QACnB,aAAa,EAAE,CAAC;QAChB,EAAE,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAClC,CAAC"}

package/dist/components/NewSlideModal.d.ts

@@ -0,0 +1,41 @@
+import type { I18n } from "../i18n/index.js";
+/** One pickable slide layout: the id a slide is created on, plus where its
+ *  preview renders — the plane (a slide master's, `1..`) and the page within it
+ *  (`1 + its index`; page 0 of that plane is the master). */
+export interface LayoutOption {
+    /** The slide-layout id (hex key) — passed to `createSlide(index, layout)`. */
+    layout: string;
+    /** The layout plane the preview renders on (`1..`). */
+    plane: number;
+    /** The page index within that plane (`1..`; page 0 is the master). */
+    page: number;
+    /** The name the file gives the slide layout ("Title Slide"), or null for
+     *  none. */
+    name: string | null;
+}
+/** What `open` needs: where the slide lands, the layouts to choose from, how to
+ *  render a preview, and what a pick does. */
+export interface NewSlideContext {
+    /** 0-based index the new slide is inserted at. */
+    insertIndex: number;
+    /** The layouts to offer, in roster order. */
+    options: LayoutOption[];
+    /** Render a one-shot preview of a page on a plane, at `scale` output px per
+     *  point — resolves with a bitmap the caller owns. */
+    renderPreview: (plane: number, page: number, scale: number) => Promise<ImageBitmap>;
+    /** Create a new slide on `layout` at `insertIndex` and close. */
+    onPick: (layout: string) => void;
+}
+/**
+ * Build the New-Slide picker modal. The returned handle is mounted once by the
+ * shell; `open` re-seeds it with the current layout roster each time.
+ */
+export declare function createNewSlideModal(i18n: I18n): {
+    el: HTMLDivElement;
+    mount: (parent: HTMLElement) => void;
+    open: (context: NewSlideContext) => void;
+    close: () => void;
+    destroy: () => void;
+};
+export type NewSlideModal = ReturnType<typeof createNewSlideModal>;
+//# sourceMappingURL=NewSlideModal.d.ts.map

package/dist/components/NewSlideModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewSlideModal.d.ts","sourceRoot":"","sources":["../../src/components/NewSlideModal.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAM7C;;6DAE6D;AAC7D,MAAM,WAAW,YAAY;IACzB,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb;gBACY;IACZ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;8CAC8C;AAC9C,MAAM,WAAW,eAAe;IAC5B,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;0DACsD;IACtD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,CAAC,CAAC;IACpF,iEAAiE;IACjE,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,IAAI;;oBA4GnB,WAAW,KAAG,IAAI;oBAzBlB,eAAe,KAAG,IAAI;iBAa3B,IAAI;mBAwBF,IAAI;EAM3B;AAED,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/NewSlideModal.js

@@ -0,0 +1,136 @@
+// The New-Slide layout picker — a modal grid of slide-layout thumbnails, opened
+// from the presentation Home tab's "New Slide" button. Picking a layout inserts
+// a new slide built on it (its content placeholders seeded); the thumbnail *is*
+// the layout's identity, since layouts carry no name/type in the model.
+//
+// Storeless and imperative, like the other modals (PageSettingsModal): mounted
+// once by the shell and reused. `open(ctx)` seeds it with the layout roster, the
+// preview renderer, and the pick callback that turns a click into a createSlide
+// command; it owns no document state of its own.
+//
+// Layout previews render off a non-current plane (each slide master's own layout
+// plane) via the plane-aware paged render path, so opening the picker never
+// disturbs the slide plane the user is editing.
+import { ICON_CLEAR, on } from "@docmentis/udoc-ui/internal";
+/** Output pixels per document point for a layout preview — a modest raster
+ *  (a 960-pt slide → 240 px), downscaled by CSS into its grid cell. */
+const PREVIEW_SCALE = 0.25;
+/**
+ * Build the New-Slide picker modal. The returned handle is mounted once by the
+ * shell; `open` re-seeds it with the current layout roster each time.
+ */
+export function createNewSlideModal(i18n) {
+    const el = document.createElement("div");
+    el.className = "udoc-slide-picker";
+    el.style.display = "none";
+    const backdrop = document.createElement("div");
+    backdrop.className = "udoc-slide-picker__backdrop";
+    const dialog = document.createElement("div");
+    dialog.className = "udoc-slide-picker__dialog";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", i18n.t("newSlide.label"));
+    const header = document.createElement("div");
+    header.className = "udoc-slide-picker__header";
+    const heading = document.createElement("h2");
+    heading.className = "udoc-slide-picker__heading";
+    heading.textContent = i18n.t("command.createSlide");
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "udoc-slide-picker__close";
+    closeBtn.setAttribute("aria-label", i18n.t("common.close"));
+    closeBtn.title = i18n.t("common.close");
+    closeBtn.innerHTML = ICON_CLEAR;
+    header.append(heading, closeBtn);
+    const grid = document.createElement("div");
+    grid.className = "udoc-slide-picker__grid";
+    grid.setAttribute("role", "listbox");
+    grid.setAttribute("aria-label", i18n.t("newSlide.layouts"));
+    dialog.append(header, grid);
+    el.append(backdrop, dialog);
+    let isOpen = false;
+    let ctx = null;
+    // Bumped on every open/close so a preview that resolves after the picker
+    // moved on is discarded (its bitmap closed) instead of drawn stale.
+    let epoch = 0;
+    const unsubEvents = [];
+    function pick(layout) {
+        const chosen = ctx;
+        close();
+        chosen?.onPick(layout);
+    }
+    /** Build one layout cell: a button holding a canvas the preview draws into. */
+    function buildCell(option, index, myEpoch) {
+        const cell = document.createElement("button");
+        cell.type = "button";
+        cell.className = "udoc-slide-picker__cell";
+        cell.setAttribute("role", "option");
+        const name = option.name ?? i18n.t("newSlide.layout", { index: index + 1 });
+        cell.title = name;
+        cell.setAttribute("aria-label", name);
+        const canvas = document.createElement("canvas");
+        canvas.className = "udoc-slide-picker__canvas";
+        cell.appendChild(canvas);
+        on(cell, "click", () => pick(option.layout));
+        void ctx
+            ?.renderPreview(option.plane, option.page, PREVIEW_SCALE)
+            .then((bitmap) => {
+            // The picker closed / reopened while this rendered — drop it.
+            if (myEpoch !== epoch) {
+                bitmap.close();
+                return;
+            }
+            canvas.width = bitmap.width;
+            canvas.height = bitmap.height;
+            canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+            bitmap.close();
+            cell.classList.add("udoc-slide-picker__cell--ready");
+        })
+            .catch(() => {
+            // A preview that fails to render just stays blank — the cell is
+            // still pickable (the layout id is valid regardless).
+        });
+        return cell;
+    }
+    function open(context) {
+        ctx = context;
+        epoch++;
+        const myEpoch = epoch;
+        grid.replaceChildren();
+        context.options.forEach((option, index) => {
+            grid.appendChild(buildCell(option, index, myEpoch));
+        });
+        isOpen = true;
+        el.style.display = "";
+        grid.querySelector(".udoc-slide-picker__cell")?.focus();
+    }
+    function close() {
+        if (!isOpen)
+            return;
+        isOpen = false;
+        ctx = null;
+        epoch++;
+        grid.replaceChildren();
+        el.style.display = "none";
+    }
+    on(closeBtn, "click", () => close());
+    on(backdrop, "click", () => close());
+    function mount(parent) {
+        parent.appendChild(el);
+        const onKeydown = (e) => {
+            if (isOpen && e.key === "Escape") {
+                e.stopPropagation();
+                close();
+            }
+        };
+        document.addEventListener("keydown", onKeydown);
+        unsubEvents.push(() => document.removeEventListener("keydown", onKeydown));
+    }
+    function destroy() {
+        for (const off of unsubEvents)
+            off();
+        el.remove();
+    }
+    return { el, mount, open, close, destroy };
+}
+//# sourceMappingURL=NewSlideModal.js.map