smartrte-react 0.3.5 → 1.0.0-beta.10

package/dist/components/ToolbarPrimitives.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, AlignVerticalSpaceAround, ALargeSmall, Baseline, Bold, CheckSquare, ChevronDown, Code, Columns3, Download, Eye, FileJson, History, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link2, ListChecks, ListOrdered, ListRestart, List as ListIcon, MessageSquare, MessageSquarePlus, MoreHorizontal, MoveDown, MoveLeft, MoveRight, MoveUp, Music, Omega, PanelTop, PenLine, Pilcrow, Quote, Redo2, Rows3, ScissorsLineDashed, SeparatorHorizontal, Square, Sigma, Strikethrough, Subscript, Superscript, Table2, Trash2, Type, Underline, Undo2, Unlink2, Upload, Video, Pencil, ZoomIn, ZoomOut, } from "lucide-react";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
+/**
+ * The toolbar's icon set (Phase: Direction B toolbar redesign, 2026-08-29).
+ * Lucide, per the design proposal's §11 recommendation - MIT-licensed,
+ * tree-shakeable (only these ~40 icons ship), a consistent stroke style
+ * that reads at the toolbar's small render size. Two icons here
+ * (mergeCells/splitCell) have no Lucide equivalent and are hand-drawn to
+ * match Lucide's own stroke weight/corner radius - the "grid + directional
+ * arrow" concept the owner confirmed from the proposal's two alternatives.
+ */
+const stroke = { width: 17, height: 17, strokeWidth: 1.9 };
+const MergeCellsIcon = () => (_jsxs("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("line", { x1: "15", y1: "4", x2: "15", y2: "20" }), _jsx("path", { d: "M6 12h5" }), _jsx("polyline", { points: "9 9 12 12 9 15" })] }));
+const SplitCellIcon = () => (_jsxs("svg", { width: "17", height: "17", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), _jsx("line", { x1: "9", y1: "4", x2: "9", y2: "20" }), _jsx("path", { d: "M18 9v6" }), _jsx("polyline", { points: "20 10.5 18 12 20 13.5" }), _jsx("polyline", { points: "16 10.5 18 12 16 13.5" })] }));
+export const toolbarIcons = {
+    bold: _jsx(Bold, { ...stroke }),
+    italic: _jsx(Italic, { ...stroke }),
+    underline: _jsx(Underline, { ...stroke }),
+    strikethrough: _jsx(Strikethrough, { ...stroke }),
+    code: _jsx(Code, { ...stroke }),
+    superscript: _jsx(Superscript, { ...stroke }),
+    subscript: _jsx(Subscript, { ...stroke }),
+    textColor: _jsx(Baseline, { ...stroke }),
+    backgroundColor: _jsx(PenLine, { ...stroke }),
+    fontSize: _jsx(ALargeSmall, { ...stroke }),
+    fontFamily: _jsx(Type, { ...stroke }),
+    paragraphStyle: _jsx(Pilcrow, { ...stroke }),
+    alignLeft: _jsx(AlignLeft, { ...stroke }),
+    alignCenter: _jsx(AlignCenter, { ...stroke }),
+    alignRight: _jsx(AlignRight, { ...stroke }),
+    alignJustify: _jsx(AlignJustify, { ...stroke }),
+    quote: _jsx(Quote, { ...stroke }),
+    moveUp: _jsx(MoveUp, { ...stroke }),
+    moveDown: _jsx(MoveDown, { ...stroke }),
+    moveLeft: _jsx(MoveLeft, { ...stroke }),
+    moveRight: _jsx(MoveRight, { ...stroke }),
+    indent: _jsx(IndentIncrease, { ...stroke }),
+    outdent: _jsx(IndentDecrease, { ...stroke }),
+    link: _jsx(Link2, { ...stroke }),
+    unlink: _jsx(Unlink2, { ...stroke }),
+    bulletedList: _jsx(ListIcon, { ...stroke }),
+    numberedList: _jsx(ListOrdered, { ...stroke }),
+    checklist: _jsx(ListChecks, { ...stroke }),
+    checkSquare: _jsx(CheckSquare, { ...stroke }),
+    restart: _jsx(ListRestart, { ...stroke }),
+    continueNumbering: _jsx(Rows3, { ...stroke }),
+    table: _jsx(Table2, { ...stroke }),
+    mergeCells: _jsx(MergeCellsIcon, {}),
+    splitCell: _jsx(SplitCellIcon, {}),
+    addRow: _jsx(Rows3, { ...stroke }),
+    addColumn: _jsx(Columns3, { ...stroke }),
+    headerRow: _jsx(PanelTop, { ...stroke }),
+    deleteTable: _jsx(Trash2, { ...stroke }),
+    image: _jsx(ImageIcon, { ...stroke }),
+    video: _jsx(Video, { ...stroke }),
+    audio: _jsx(Music, { ...stroke }),
+    formula: _jsx(Sigma, { ...stroke }),
+    specialChar: _jsx(Omega, { ...stroke }),
+    cellBorder: _jsx(Square, { ...stroke }),
+    edit: _jsx(Pencil, { ...stroke }),
+    zoomIn: _jsx(ZoomIn, { ...stroke }),
+    zoomOut: _jsx(ZoomOut, { ...stroke }),
+    delete: _jsx(Trash2, { ...stroke }),
+    import: _jsx(Upload, { ...stroke }),
+    saveCopy: _jsx(Download, { ...stroke }),
+    json: _jsx(FileJson, { ...stroke }),
+    history: _jsx(History, { ...stroke }),
+    addComment: _jsx(MessageSquarePlus, { ...stroke }),
+    comments: _jsx(MessageSquare, { ...stroke }),
+    suggest: _jsx(PenLine, { ...stroke }),
+    suggestions: _jsx(MessageSquare, { ...stroke }),
+    showEdits: _jsx(Eye, { ...stroke }),
+    undo: _jsx(Undo2, { ...stroke }),
+    redo: _jsx(Redo2, { ...stroke }),
+    more: _jsx(MoreHorizontal, { ...stroke }),
+    divider: _jsx(SeparatorHorizontal, { ...stroke }),
+    pageBreak: _jsx(ScissorsLineDashed, { ...stroke }),
+    lineHeight: _jsx(AlignVerticalSpaceAround, { ...stroke }),
+};
+/** A single always-visible toolbar control: icon + plain-language label together, per the redesign's core principle. */
+export function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote }) {
+    return _jsxs("button", { type: "button", className: "srte-tool-button", "aria-label": ariaLabel ?? label, "aria-pressed": pressed, title: title ?? ariaLabel ?? label, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onClick, ...(widePromote ? { "data-srte-wide-promote": "true" } : {}), children: [toolbarIcons[icon], !iconOnly && _jsx("span", { children: label })] });
+}
+/** One row inside an open dropdown menu - closes the dropdown after acting, matching ContextMenu.tsx's own dismiss-on-action convention. */
+export function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disabled, title, onClick, widePromote }) {
+    return _jsxs("button", { type: "button", className: "srte-menu-item", role: "menuitem", "aria-label": ariaLabel ?? label, "aria-pressed": pressed, title: title, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+            onClick(event);
+            event.currentTarget.closest("details")?.removeAttribute("open");
+        }, ...(widePromote ? { "data-srte-wide-promote": "true" } : {}), children: [icon ? toolbarIcons[icon] : null, _jsx("span", { children: label }), pressed === true && _jsx("span", { className: "srte-menu-check", "aria-hidden": "true", children: "\u2713" }), pressed === "mixed" && _jsx("span", { className: "srte-menu-check", "aria-hidden": "true", children: "~" })] });
+}
+/**
+ * Closes an open `<details>` when the user clicks anywhere outside it -
+ * native `<details>` does *not* do this on its own (confirmed directly:
+ * unlike a real modal, it only ever closes via its own `<summary>` or a
+ * script setting `open = false`), so a dropdown left open and then clicked
+ * past straight into the editor previously just stayed open. Same
+ * pointerdown+mousedown, capture-phase, ref-read pattern as
+ * ContextMenu.tsx/ColorPickerPopover.tsx's own outside-click dismiss -
+ * mounted once for the element's lifetime regardless of open/closed state,
+ * since `<details>` (unlike those components) isn't unmounted when closed.
+ */
+const useDismissDetailsOnOutsideClick = (ref) => {
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const el = ref.current;
+            if (el?.open && !el.contains(event.target))
+                el.removeAttribute("open");
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, [ref]);
+};
+/**
+ * A labeled dropdown for a group's long-tail tools - wires up the
+ * `.srte-toolbar-menu`/`.srte-menu` CSS `theme.ts` already defines but the
+ * pre-redesign toolbar never used. `<details>/<summary>` gives free
+ * keyboard support (Enter/Space to open, native focus handling) without a
+ * new open/close state to manage; outside-click dismiss is handled by
+ * useDismissDetailsOnOutsideClick above.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates
+ * (docs/bugs/toolbar-dropdown-clipped-by-host-overflow-hidden.md), the same
+ * pattern ColorPickerPopover/TableBorderPopover already use - a real host
+ * can (and, reported live, does) wrap the editor in an `overflow: hidden`
+ * container for its own layout reasons; a `position: absolute` panel
+ * anchored inside that container gets visually clipped the moment it needs
+ * to extend past the container's own bounds, which is exactly when a
+ * narrow host is most likely to need the dropdown in the first place.
+ * `position: fixed`'s containing block is normally the viewport, so this
+ * escapes ANY ancestor's overflow clipping regardless of DOM depth - unless
+ * an ancestor has its own transform/perspective/filter, which becomes the
+ * containing block instead (see fixedPositioning.ts, and
+ * docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md); the
+ * placement math below accounts for that case too.
+ */
+export function ToolbarDropdown({ icon, label, priority, children }) {
+    const detailsRef = useRef(null);
+    useDismissDetailsOnOutsideClick(detailsRef);
+    const [placement, setPlacement] = useState(null);
+    useLayoutEffect(() => {
+        const details = detailsRef.current;
+        if (!details)
+            return;
+        const recompute = () => {
+            if (!details.open) {
+                setPlacement(null);
+                return;
+            }
+            const margin = 8;
+            const triggerRect = details.getBoundingClientRect();
+            const menu = details.querySelector(":scope > .srte-menu");
+            const menuWidth = menu?.offsetWidth ?? 210;
+            const menuHeight = menu?.offsetHeight ?? 0;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const left = Math.min(Math.max(margin, triggerRect.left), Math.max(margin, viewportWidth - menuWidth - margin));
+            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
+            const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
+        };
+        recompute();
+        details.addEventListener("toggle", recompute);
+        return () => details.removeEventListener("toggle", recompute);
+    }, []);
+    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu", ...(priority ? { "data-srte-priority": priority } : {}), children: [_jsxs("summary", { className: "srte-tool-button srte-menu-trigger", onMouseDown: (event) => event.preventDefault(), children: [icon ? toolbarIcons[icon] : null, _jsx("span", { children: label }), _jsx(ChevronDown, { width: 13, height: 13, strokeWidth: 2, "aria-hidden": "true" })] }), _jsx("div", { className: "srte-menu", role: "menu", "data-srte-menu-fixed": "true", style: { left: placement?.left ?? 0, top: placement?.top ?? 0, visibility: placement ? "visible" : "hidden" }, children: children })] });
+}
+/** A visually-separated cluster of controls, optionally collapsing as a whole unit on narrow viewports (theme.ts's `.srte-toolbar-group[data-srte-priority="3"]`). */
+export function ToolbarGroup({ priority, children }) {
+    return _jsx("span", { className: "srte-toolbar-group", ...(priority ? { "data-srte-priority": priority } : {}), children: children });
+}
+/**
+ * The narrow-viewport overflow trigger - `.srte-mobile-more` is CSS-hidden
+ * except under theme.ts's `max-width: 639px` rules, which also hide every
+ * `[data-srte-priority="2"]`/`[data-srte-priority="3"]` element. Its own
+ * menu statically lists every tool that lives inside one of those
+ * collapsing dropdowns/groups, so nothing becomes unreachable once the
+ * primary row starts shedding groups - this is plain CSS visibility
+ * toggling of pre-rendered content, not JS media-query logic, matching how
+ * the rest of this responsive system already works.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates,
+ * the same fix and reasoning as `ToolbarDropdown` (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md) - this component was
+ * NOT covered by that fix at the time (incorrectly assumed to be
+ * unaffected since it already had its own separate mobile CSS), but it has
+ * the exact same `position: absolute` vulnerability to a host's own
+ * `overflow: hidden` container, and since this is the ONLY toolbar
+ * overflow affordance on narrow viewports (every ToolbarDropdown hides
+ * entirely below the mobile breakpoint), a clipped host is more likely to
+ * matter here, not less. Confirmed live: a real narrow host wrapping the
+ * editor in `overflow: hidden` computed this panel at `left: -214px` -
+ * mostly off-screen, functionally invisible despite being technically
+ * present in the DOM.
+ */
+export function MobileMoreMenu({ children }) {
+    const detailsRef = useRef(null);
+    useDismissDetailsOnOutsideClick(detailsRef);
+    const [placement, setPlacement] = useState(null);
+    useLayoutEffect(() => {
+        const details = detailsRef.current;
+        if (!details)
+            return;
+        const recompute = () => {
+            if (!details.open) {
+                setPlacement(null);
+                return;
+            }
+            const margin = 8;
+            const triggerRect = details.getBoundingClientRect();
+            const menu = details.querySelector(":scope > .srte-menu");
+            const menuWidth = menu?.offsetWidth ?? Math.min(280, window.innerWidth - 16);
+            const menuHeight = menu?.offsetHeight ?? 0;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Right-aligned to the trigger, matching this menu's original
+            // CSS-only `right: 0` intent - clamped into the viewport instead of
+            // being allowed to run off it or get clipped by an ancestor.
+            const preferredLeft = triggerRect.right - menuWidth;
+            const left = Math.min(Math.max(margin, preferredLeft), Math.max(margin, viewportWidth - menuWidth - margin));
+            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
+            const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
+        };
+        recompute();
+        details.addEventListener("toggle", recompute);
+        return () => details.removeEventListener("toggle", recompute);
+    }, []);
+    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu srte-mobile-more", children: [_jsx("summary", { className: "srte-tool-button srte-menu-trigger", "aria-label": "More tools", onMouseDown: (event) => event.preventDefault(), children: toolbarIcons.more }), _jsx("div", { className: "srte-menu", role: "menu", "data-srte-menu-fixed": "true", style: { left: placement?.left ?? 0, top: placement?.top ?? 0, visibility: placement ? "visible" : "hidden" }, children: children })] });
+}

package/dist/components/VersionHistoryPanel.d.ts

@@ -0,0 +1,9 @@
+import type { VersionProvider } from "../versionProvider.js";
+import type { CanonicalEditorRuntime } from "../canonicalEditorRuntime.js";
+export declare function VersionHistoryPanel(props: {
+    open: boolean;
+    onClose: () => void;
+    runtime: CanonicalEditorRuntime;
+    versionProvider: VersionProvider;
+    authorId?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/VersionHistoryPanel.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { diffVersions, foundationSchema } from "smartrte-core/foundation";
+const formatTimestamp = (createdAt) => new Date(createdAt).toLocaleString();
+const summarize = (diff) => {
+    const parts = [
+        diff.added.length ? `${diff.added.length} added` : null,
+        diff.removed.length ? `${diff.removed.length} removed` : null,
+        diff.changed.length ? `${diff.changed.length} edited` : null,
+    ].filter((part) => Boolean(part));
+    return parts.length ? parts.join(", ") : "No differences";
+};
+export function VersionHistoryPanel(props) {
+    const { open, onClose, runtime, versionProvider, authorId } = props;
+    const [versions, setVersions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [label, setLabel] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [busyId, setBusyId] = useState(null);
+    // Selecting two entries computes a diff summary between them - order is
+    // the order they were selected in, not list order, so "swap" reads
+    // naturally when a user picks the later one first.
+    const [compareIds, setCompareIds] = useState([]);
+    const [diffSummary, setDiffSummary] = useState(null);
+    const [diffLoading, setDiffLoading] = useState(false);
+    const refresh = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            setVersions([...(await versionProvider.list())].sort((a, b) => b.createdAt - a.createdAt));
+        }
+        catch {
+            setError("Failed to load version history.");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        if (!open)
+            return;
+        setError(null);
+        setCompareIds([]);
+        setDiffSummary(null);
+        void refresh();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    useEffect(() => {
+        if (compareIds.length !== 2) {
+            setDiffSummary(null);
+            return;
+        }
+        let cancelled = false;
+        setDiffLoading(true);
+        (async () => {
+            try {
+                const [a, b] = await Promise.all(compareIds.map((id) => versionProvider.load(id)));
+                if (cancelled)
+                    return;
+                setDiffSummary(summarize(diffVersions(a, b, foundationSchema)));
+            }
+            catch {
+                if (!cancelled)
+                    setError("Failed to compare the selected versions.");
+            }
+            finally {
+                if (!cancelled)
+                    setDiffLoading(false);
+            }
+        })();
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [compareIds]);
+    const handleSave = async () => {
+        setSaving(true);
+        setError(null);
+        try {
+            const version = runtime.saveVersion({ ...(label.trim() ? { label: label.trim() } : {}), ...(authorId ? { authorId } : {}) });
+            await versionProvider.save(version);
+            setLabel("");
+            await refresh();
+        }
+        catch {
+            setError("Failed to save this version.");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleRestore = async (entry) => {
+        setBusyId(entry.id);
+        setError(null);
+        try {
+            const target = await versionProvider.load(entry.id);
+            runtime.restoreVersion(target);
+            // Non-destructive restore (Phase 12a spec's explicit recommendation):
+            // record the restoration as a new, forward-moving version rather
+            // than silently rewriting/discarding anything - the version list
+            // only ever grows. Nothing between the current state and the
+            // restore target is ever deleted; every prior version, including
+            // whatever was live immediately before this restore, is still
+            // reachable by restoring to it directly.
+            const recorded = runtime.saveVersion({
+                label: `Restored: ${entry.label || formatTimestamp(entry.createdAt)}`,
+                ...(authorId ? { authorId } : {}),
+            });
+            await versionProvider.save(recorded);
+            await refresh();
+        }
+        catch {
+            setError("Failed to restore this version.");
+        }
+        finally {
+            setBusyId(null);
+        }
+    };
+    const handleDelete = async (entry) => {
+        setBusyId(entry.id);
+        setError(null);
+        try {
+            await versionProvider.remove(entry.id);
+            setCompareIds((current) => current.filter((id) => id !== entry.id));
+            await refresh();
+        }
+        catch {
+            setError("Failed to delete this version.");
+        }
+        finally {
+            setBusyId(null);
+        }
+    };
+    const toggleCompare = (id) => {
+        setCompareIds((current) => {
+            if (current.includes(id))
+                return current.filter((existing) => existing !== id);
+            if (current.length < 2)
+                return [...current, id];
+            return [current[1], id];
+        });
+    };
+    if (!open)
+        return null;
+    return (_jsx("div", { style: {
+            position: "fixed", inset: 0, background: "var(--srte-modal-backdrop)",
+            backdropFilter: "var(--srte-modal-backdrop-filter)", WebkitBackdropFilter: "var(--srte-modal-backdrop-filter)",
+            display: "flex", alignItems: "center", justifyContent: "center", zIndex: 80,
+        }, onClick: onClose, children: _jsxs("div", { role: "dialog", "aria-label": "Version history", "data-srte-version-history": "true", style: {
+                background: "var(--srte-modal-bg)", color: "var(--srte-modal-text)",
+                width: 560, maxWidth: "90vw", maxHeight: "86vh",
+                borderRadius: 10, boxShadow: "var(--srte-menu-shadow)",
+                display: "flex", flexDirection: "column",
+            }, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", borderBottom: "1px solid var(--srte-border-light)" }, children: [_jsx("div", { style: { fontWeight: 600 }, children: "Version history" }), _jsx("button", { type: "button", "aria-label": "Close version history", onClick: onClose, children: "\u2715" })] }), error && _jsx("div", { style: { color: "var(--srte-danger)", padding: "8px 14px" }, children: error }), _jsxs("div", { style: { display: "flex", gap: 8, padding: "12px 14px", borderBottom: "1px solid var(--srte-border-light)" }, children: [_jsx("input", { value: label, onChange: (event) => setLabel(event.target.value), placeholder: "Label this version (optional)", style: { flex: 1, padding: "6px 8px", border: "1px solid var(--srte-border)", borderRadius: 6, background: "var(--srte-input-bg)", color: "var(--srte-input-text)" } }), _jsx("button", { type: "button", "data-srte-version-save": "true", disabled: saving, onClick: () => void handleSave(), children: saving ? "Saving…" : "Save version" })] }), compareIds.length === 2 && (_jsx("div", { style: { padding: "8px 14px", fontSize: 13, color: "var(--srte-text-muted)", borderBottom: "1px solid var(--srte-border-light)" }, "data-srte-version-diff-summary": "true", children: diffLoading ? "Comparing…" : diffSummary })), _jsxs("div", { style: { overflowY: "auto", padding: "8px 14px 14px" }, children: [loading && _jsx("div", { style: { color: "var(--srte-text-muted)", padding: "8px 0" }, children: "Loading\u2026" }), !loading && versions.length === 0 && _jsx("div", { style: { color: "var(--srte-text-muted)", padding: "8px 0" }, children: "No saved versions yet." }), versions.map((entry) => (_jsxs("div", { "data-srte-version-entry": entry.id, style: {
+                                display: "flex", alignItems: "center", gap: 8, padding: "8px 0",
+                                borderBottom: "1px solid var(--srte-border-light)",
+                            }, children: [_jsx("input", { type: "checkbox", "aria-label": `Select ${entry.label || formatTimestamp(entry.createdAt)} for comparison`, checked: compareIds.includes(entry.id), onChange: () => toggleCompare(entry.id) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: entry.label || "Untitled version" }), _jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)" }, children: formatTimestamp(entry.createdAt) })] }), _jsx("button", { type: "button", "data-srte-version-restore": entry.id, disabled: busyId === entry.id, onClick: () => void handleRestore(entry), children: "Restore" }), _jsx("button", { type: "button", "data-srte-version-delete": entry.id, disabled: busyId === entry.id, onClick: () => void handleDelete(entry), style: { color: "var(--srte-danger)" }, children: "Delete" })] }, entry.id)))] })] }) }));
+}

package/dist/components/fixedPositioning.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A CSS `transform`, `perspective`, `filter`, `backdrop-filter`, or a
+ * `will-change` naming one of those, on an ancestor makes that ancestor the
+ * containing block for `position: fixed` descendants instead of the
+ * viewport (CSS Transforms spec's rendering model) - most commonly a
+ * Radix/shadcn `Dialog`'s centering transform (`translate-x-[-50%]
+ * translate-y-[-50%]`), which any host may legitimately wrap this editor
+ * in. When that happens, `left`/`top` set on a fixed-positioned menu/popover
+ * are resolved against that ancestor's border box (as rendered,
+ * post-transform) instead of the viewport, silently producing coordinates
+ * that are internally consistent but land far from the trigger with no
+ * error - confirmed live via a Sootr host rendering the editor inside such
+ * a dialog.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of transforms, so every placement calculation in this codebase
+ * computes coordinates in viewport space first, then subtracts this
+ * origin - the real containing block's own viewport-relative top-left - so
+ * the applied `left`/`top` land correctly under either containing block.
+ */
+export declare function findFixedPositioningContainer(el: HTMLElement): HTMLElement | null;
+export declare function getFixedPositioningOrigin(el: HTMLElement): {
+    left: number;
+    top: number;
+};

package/dist/components/fixedPositioning.js

@@ -0,0 +1,42 @@
+/**
+ * A CSS `transform`, `perspective`, `filter`, `backdrop-filter`, or a
+ * `will-change` naming one of those, on an ancestor makes that ancestor the
+ * containing block for `position: fixed` descendants instead of the
+ * viewport (CSS Transforms spec's rendering model) - most commonly a
+ * Radix/shadcn `Dialog`'s centering transform (`translate-x-[-50%]
+ * translate-y-[-50%]`), which any host may legitimately wrap this editor
+ * in. When that happens, `left`/`top` set on a fixed-positioned menu/popover
+ * are resolved against that ancestor's border box (as rendered,
+ * post-transform) instead of the viewport, silently producing coordinates
+ * that are internally consistent but land far from the trigger with no
+ * error - confirmed live via a Sootr host rendering the editor inside such
+ * a dialog.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of transforms, so every placement calculation in this codebase
+ * computes coordinates in viewport space first, then subtracts this
+ * origin - the real containing block's own viewport-relative top-left - so
+ * the applied `left`/`top` land correctly under either containing block.
+ */
+export function findFixedPositioningContainer(el) {
+    let node = el.parentElement;
+    while (node) {
+        const style = window.getComputedStyle(node);
+        if ((style.transform && style.transform !== "none") ||
+            (style.perspective && style.perspective !== "none") ||
+            (style.filter && style.filter !== "none") ||
+            (style.backdropFilter && style.backdropFilter !== "none") ||
+            (style.willChange && /transform|perspective|filter/.test(style.willChange))) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+export function getFixedPositioningOrigin(el) {
+    const container = findFixedPositioningContainer(el);
+    if (!container)
+        return { left: 0, top: 0 };
+    const rect = container.getBoundingClientRect();
+    return { left: rect.left, top: rect.top };
+}

package/dist/formulaLibrary.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Formula library (Direction B "Small" scope, per the owner-approved
+ * proposal - see the "Formula Library & Special Character Picker" scoping
+ * artifact): a curated set of common science/math formulas, browsable by
+ * domain and searchable by name, replacing the raw `window.prompt`
+ * formula-insert flow.
+ *
+ * Every entry's `latex` is plain LaTeX, verified against KaTeX 0.18's
+ * supported command set (the actual rendering ceiling - see
+ * `surface/renderer.ts`'s `KATEX_OPTIONS`, `{ trust: false, strict: "error"
+ * }`). Chemistry entries use the `mhchem` extension's `\ce{...}` macro,
+ * registered in `surface/renderer.ts` (core) for real document rendering
+ * and in `FormulaLibraryPopover.tsx` for this library's own previews.
+ *
+ * `notation` is always `"latex"` - the schema also accepts `"mathml"`, but
+ * the renderer never implements a MathML render path
+ * (docs/bugs/formula-mathml-notation-not-rendered.md, open) - so no library
+ * entry may use it.
+ */
+export type FormulaDomain = "algebra" | "geometry" | "calculus" | "physics" | "chemistry" | "statistics";
+export interface FormulaLibraryEntry {
+    readonly id: string;
+    readonly domain: FormulaDomain;
+    readonly name: string;
+    readonly latex: string;
+}
+export declare const FORMULA_DOMAINS: readonly {
+    readonly id: FormulaDomain;
+    readonly label: string;
+}[];
+export declare const FORMULA_LIBRARY: readonly FormulaLibraryEntry[];

package/dist/formulaLibrary.js

@@ -0,0 +1,90 @@
+/**
+ * Formula library (Direction B "Small" scope, per the owner-approved
+ * proposal - see the "Formula Library & Special Character Picker" scoping
+ * artifact): a curated set of common science/math formulas, browsable by
+ * domain and searchable by name, replacing the raw `window.prompt`
+ * formula-insert flow.
+ *
+ * Every entry's `latex` is plain LaTeX, verified against KaTeX 0.18's
+ * supported command set (the actual rendering ceiling - see
+ * `surface/renderer.ts`'s `KATEX_OPTIONS`, `{ trust: false, strict: "error"
+ * }`). Chemistry entries use the `mhchem` extension's `\ce{...}` macro,
+ * registered in `surface/renderer.ts` (core) for real document rendering
+ * and in `FormulaLibraryPopover.tsx` for this library's own previews.
+ *
+ * `notation` is always `"latex"` - the schema also accepts `"mathml"`, but
+ * the renderer never implements a MathML render path
+ * (docs/bugs/formula-mathml-notation-not-rendered.md, open) - so no library
+ * entry may use it.
+ */
+export const FORMULA_DOMAINS = [
+    { id: "algebra", label: "Algebra" },
+    { id: "geometry", label: "Geometry" },
+    { id: "calculus", label: "Calculus" },
+    { id: "physics", label: "Physics" },
+    { id: "chemistry", label: "Chemistry" },
+    { id: "statistics", label: "Statistics" },
+];
+export const FORMULA_LIBRARY = [
+    // Algebra
+    { id: "algebra-quadratic", domain: "algebra", name: "Quadratic formula", latex: "x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}" },
+    { id: "algebra-binomial-sum-sq", domain: "algebra", name: "Square of a sum", latex: "(a+b)^2 = a^2 + 2ab + b^2" },
+    { id: "algebra-binomial-diff-sq", domain: "algebra", name: "Square of a difference", latex: "(a-b)^2 = a^2 - 2ab + b^2" },
+    { id: "algebra-diff-of-squares", domain: "algebra", name: "Difference of squares", latex: "a^2 - b^2 = (a+b)(a-b)" },
+    { id: "algebra-exponent-product", domain: "algebra", name: "Exponent product rule", latex: "a^m \\cdot a^n = a^{m+n}" },
+    { id: "algebra-exponent-power", domain: "algebra", name: "Exponent power rule", latex: "(a^m)^n = a^{mn}" },
+    { id: "algebra-log-product", domain: "algebra", name: "Logarithm product rule", latex: "\\log_a(xy) = \\log_a x + \\log_a y" },
+    { id: "algebra-log-quotient", domain: "algebra", name: "Logarithm quotient rule", latex: "\\log_a\\left(\\frac{x}{y}\\right) = \\log_a x - \\log_a y" },
+    { id: "algebra-binomial-theorem", domain: "algebra", name: "Binomial theorem", latex: "(x+y)^n = \\sum_{k=0}^{n} \\binom{n}{k} x^{n-k} y^k" },
+    { id: "algebra-vertex", domain: "algebra", name: "Vertex of a parabola", latex: "x = -\\frac{b}{2a}" },
+    // Geometry
+    { id: "geometry-circle-area", domain: "geometry", name: "Circle area", latex: "A = \\pi r^2" },
+    { id: "geometry-circle-circumference", domain: "geometry", name: "Circle circumference", latex: "C = 2\\pi r" },
+    { id: "geometry-triangle-area", domain: "geometry", name: "Triangle area", latex: "A = \\frac{1}{2}bh" },
+    { id: "geometry-sphere-volume", domain: "geometry", name: "Sphere volume", latex: "V = \\frac{4}{3}\\pi r^3" },
+    { id: "geometry-sphere-surface", domain: "geometry", name: "Sphere surface area", latex: "A = 4\\pi r^2" },
+    { id: "geometry-cylinder-volume", domain: "geometry", name: "Cylinder volume", latex: "V = \\pi r^2 h" },
+    { id: "geometry-cone-volume", domain: "geometry", name: "Cone volume", latex: "V = \\frac{1}{3}\\pi r^2 h" },
+    { id: "geometry-pythagorean", domain: "geometry", name: "Pythagorean theorem", latex: "a^2 + b^2 = c^2" },
+    { id: "geometry-box-volume", domain: "geometry", name: "Rectangular box volume", latex: "V = lwh" },
+    { id: "geometry-trapezoid-area", domain: "geometry", name: "Trapezoid area", latex: "A = \\frac{1}{2}(b_1+b_2)h" },
+    // Calculus
+    { id: "calculus-power-rule", domain: "calculus", name: "Power rule (derivative)", latex: "\\frac{d}{dx}x^n = nx^{n-1}" },
+    { id: "calculus-product-rule", domain: "calculus", name: "Product rule", latex: "\\frac{d}{dx}[f(x)g(x)] = f'(x)g(x) + f(x)g'(x)" },
+    { id: "calculus-quotient-rule", domain: "calculus", name: "Quotient rule", latex: "\\frac{d}{dx}\\left[\\frac{f(x)}{g(x)}\\right] = \\frac{f'(x)g(x) - f(x)g'(x)}{g(x)^2}" },
+    { id: "calculus-chain-rule", domain: "calculus", name: "Chain rule", latex: "\\frac{d}{dx}f(g(x)) = f'(g(x))\\,g'(x)" },
+    { id: "calculus-ftc", domain: "calculus", name: "Fundamental theorem of calculus", latex: "\\int_a^b f'(x)\\,dx = f(b) - f(a)" },
+    { id: "calculus-power-rule-integral", domain: "calculus", name: "Power rule (integral)", latex: "\\int x^n\\,dx = \\frac{x^{n+1}}{n+1} + C" },
+    { id: "calculus-derivative-exp", domain: "calculus", name: "Derivative of eˣ", latex: "\\frac{d}{dx}e^x = e^x" },
+    { id: "calculus-derivative-ln", domain: "calculus", name: "Derivative of ln(x)", latex: "\\frac{d}{dx}\\ln x = \\frac{1}{x}" },
+    { id: "calculus-derivative-def", domain: "calculus", name: "Definition of the derivative", latex: "f'(x) = \\lim_{h \\to 0} \\frac{f(x+h) - f(x)}{h}" },
+    { id: "calculus-taylor-series", domain: "calculus", name: "Taylor series", latex: "f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!}(x-a)^n" },
+    // Physics
+    { id: "physics-kinematics-v", domain: "physics", name: "Kinematics: velocity", latex: "v = u + at" },
+    { id: "physics-kinematics-s", domain: "physics", name: "Kinematics: displacement", latex: "s = ut + \\frac{1}{2}at^2" },
+    { id: "physics-kinematics-v2", domain: "physics", name: "Kinematics: velocity²", latex: "v^2 = u^2 + 2as" },
+    { id: "physics-newton-second", domain: "physics", name: "Newton's second law", latex: "F = ma" },
+    { id: "physics-kinetic-energy", domain: "physics", name: "Kinetic energy", latex: "E_k = \\frac{1}{2}mv^2" },
+    { id: "physics-potential-energy", domain: "physics", name: "Gravitational potential energy", latex: "E_p = mgh" },
+    { id: "physics-ohms-law", domain: "physics", name: "Ohm's law", latex: "V = IR" },
+    { id: "physics-power", domain: "physics", name: "Power", latex: "P = \\frac{W}{t}" },
+    { id: "physics-gravitation", domain: "physics", name: "Newton's law of gravitation", latex: "F = G\\frac{m_1 m_2}{r^2}" },
+    { id: "physics-momentum", domain: "physics", name: "Momentum", latex: "p = mv" },
+    { id: "physics-wave-equation", domain: "physics", name: "Wave equation", latex: "v = f\\lambda" },
+    { id: "physics-mass-energy", domain: "physics", name: "Mass-energy equivalence", latex: "E = mc^2" },
+    // Chemistry (needs the mhchem KaTeX extension - see this file's own doc comment)
+    { id: "chemistry-ideal-gas", domain: "chemistry", name: "Ideal gas law", latex: "PV = nRT" },
+    { id: "chemistry-molarity", domain: "chemistry", name: "Molarity", latex: "M = \\frac{n}{V}" },
+    { id: "chemistry-ph", domain: "chemistry", name: "pH", latex: "\\text{pH} = -\\log_{10}[\\text{H}^+]" },
+    { id: "chemistry-density", domain: "chemistry", name: "Density", latex: "\\rho = \\frac{m}{V}" },
+    { id: "chemistry-combined-gas-law", domain: "chemistry", name: "Combined gas law", latex: "\\frac{P_1 V_1}{T_1} = \\frac{P_2 V_2}{T_2}" },
+    { id: "chemistry-percent-yield", domain: "chemistry", name: "Percent yield", latex: "\\%\\,\\text{yield} = \\frac{\\text{actual}}{\\text{theoretical}} \\times 100\\%" },
+    { id: "chemistry-water-formation", domain: "chemistry", name: "Combustion: hydrogen + oxygen", latex: "\\ce{2 H2 + O2 -> 2 H2O}" },
+    // Statistics
+    { id: "statistics-mean", domain: "statistics", name: "Mean", latex: "\\bar{x} = \\frac{1}{n}\\sum_{i=1}^{n} x_i" },
+    { id: "statistics-variance", domain: "statistics", name: "Variance", latex: "\\sigma^2 = \\frac{1}{n}\\sum_{i=1}^{n}(x_i - \\bar{x})^2" },
+    { id: "statistics-std-dev", domain: "statistics", name: "Standard deviation", latex: "\\sigma = \\sqrt{\\frac{1}{n}\\sum_{i=1}^{n}(x_i - \\bar{x})^2}" },
+    { id: "statistics-normal-pdf", domain: "statistics", name: "Normal distribution", latex: "f(x) = \\frac{1}{\\sigma\\sqrt{2\\pi}}\\, e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}" },
+    { id: "statistics-z-score", domain: "statistics", name: "Z-score", latex: "z = \\frac{x - \\mu}{\\sigma}" },
+    { id: "statistics-binomial-probability", domain: "statistics", name: "Binomial probability", latex: "P(X=k) = \\binom{n}{k} p^k (1-p)^{n-k}" },
+];