smartrte-react 0.3.5 → 1.0.0-beta.10

package/dist/components/TableResizeHandles.js

@@ -0,0 +1,323 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+const HANDLE_THICKNESS = 6;
+const MIN_SIZE = 20;
+/**
+ * Phase 11.5 §2.2: column-width/row-height drag handles calling the
+ * existing setTableColumnWidthCommand/setTableRowHeightCommand (row/column
+ * reorder already had toolbar buttons - "Move row up/down"/"Move column
+ * left/right" - wired since before this phase; resize had no UI at all).
+ * Commit-on-release, not a live preview during drag - a deliberately
+ * bounded scope for the first pass. Recomputes handle geometry from the
+ * live table's actual rendered cell rects on every table layout change via
+ * ResizeObserver, since table content (and therefore column/row sizes)
+ * changes independently of resize actions.
+ */
+export function TableResizeHandles({ tableElement, onResizeColumn, onResizeRow }) {
+    const [columns, setColumns] = useState([]);
+    const [rows, setRows] = useState([]);
+    // `nextStartSize`/`nextIndex` are null for the last row/column's own
+    // outer-edge handle - that one still grows/shrinks the table's overall
+    // size (no neighbor to redistribute with); every other handle has a
+    // real neighbor and redistributes between the two instead.
+    const dragRef = useRef(null);
+    const [dragging, setDragging] = useState(null);
+    // handleUp (below) is defined inside an effect that doesn't depend on
+    // `columns`/`rows` (to avoid tearing down the pointer listeners on every
+    // ResizeObserver tick) - these refs keep it reading the latest measured
+    // sizes anyway, without that staleness risk.
+    const columnsRef = useRef([]);
+    columnsRef.current = columns;
+    const rowsRef = useRef([]);
+    rowsRef.current = rows;
+    // Shared by the passive observers below (structural/layout changes that
+    // happen outside a drag) and by handleMove during an active drag (see
+    // that effect for why an active drag can't just wait for these
+    // observers to notice).
+    const recompute = useCallback(() => {
+        const tableRect = tableElement.getBoundingClientRect();
+        const firstRowCells = [...tableElement.querySelectorAll("tr")[0]?.children || []];
+        const colBoundaries = [];
+        firstRowCells.forEach((cell, index) => {
+            const rect = cell.getBoundingClientRect();
+            colBoundaries.push({ index, position: rect.right, length: tableRect.height, start: tableRect.top, size: rect.width });
+        });
+        const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+        const rowBoundaries = [];
+        rowElements.forEach((row, index) => {
+            const rect = row.getBoundingClientRect();
+            rowBoundaries.push({ index, position: rect.bottom, length: tableRect.width, start: tableRect.left, size: rect.height });
+        });
+        setColumns(colBoundaries);
+        setRows(rowBoundaries);
+    }, [tableElement]);
+    useEffect(() => {
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(tableElement);
+        // ResizeObserver only fires when tableElement's own box size changes -
+        // inserting/removing a row or column into a table that stays the same
+        // overall width (the common case: width:100%, or a pinned literal
+        // width unaffected by redistributing space across one more/fewer
+        // column) never changes that box size, so it never fires. Handles
+        // then stay stale: wrong count, wrong position, wrong `boundary.size`
+        // for whatever column/row the model now has at that index - dragging
+        // one computed a wildly wrong new width from a stale start size. A
+        // MutationObserver on the table's own structure (row/cell add/remove/
+        // reorder) catches exactly the class of change ResizeObserver misses.
+        const mutationObserver = new MutationObserver(recompute);
+        mutationObserver.observe(tableElement, { childList: true, subtree: true });
+        const ownerWindow = tableElement.ownerDocument.defaultView;
+        ownerWindow?.addEventListener("scroll", recompute, true);
+        return () => {
+            observer.disconnect();
+            mutationObserver.disconnect();
+            ownerWindow?.removeEventListener("scroll", recompute, true);
+        };
+    }, [tableElement, recompute]);
+    useEffect(() => {
+        const ownerWindow = tableElement.ownerDocument.defaultView;
+        if (!ownerWindow)
+            return;
+        // For an internal boundary (a real neighbor exists), clamp the raw
+        // pointer delta so neither side ever goes below MIN_SIZE, then apply
+        // the *same* clamped delta with opposite signs to both sides - their
+        // sum is therefore always exactly startSize + nextStartSize, whatever
+        // the clamp did. That invariant is what makes "the border just moves"
+        // true: the table's own total size never has to change for these.
+        //
+        // Rows can't use this arithmetic-only approach: a <tr>'s rendered
+        // height can never go below what its own cell content needs (an
+        // explicit row height behaves as a minimum, not a hard cap, in table
+        // layout) - unlike a column's width under table-layout:fixed, which
+        // genuinely can be squeezed below its content's natural width. Naively
+        // clamping to a fixed MIN_SIZE the way columns do would, the instant a
+        // row's *real* content floor was higher than that, still hand the
+        // *other* row the full requested delta anyway - the total table
+        // height would silently grow instead of staying constant, and the row
+        // actually being dragged would appear frozen while its neighbor
+        // visibly ballooned (this is what "resize rows... move cursor up
+        // then it is effecting below row height" was - see docs/bugs/
+        // row-resize-drag-up-only-grows-the-row-below.md). Measuring the real
+        // DOM after attempting a shrink, and handing the other row only what
+        // was actually ceded, keeps that same invariant true regardless of
+        // where a row's real floor turns out to be.
+        const resolveSizes = (drag, event) => {
+            const rawDelta = drag.kind === "column" ? event.clientX - drag.startClient : event.clientY - drag.startClient;
+            if (drag.kind === "column") {
+                if (drag.nextStartSize === null) {
+                    return { size: Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta)), nextSize: null };
+                }
+                const minDelta = -(drag.startSize - MIN_SIZE);
+                const maxDelta = drag.nextStartSize - MIN_SIZE;
+                const delta = Math.min(Math.max(rawDelta, minDelta), maxDelta);
+                return { size: Math.round(drag.startSize + delta), nextSize: Math.round(drag.nextStartSize - delta) };
+            }
+            const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+            if (drag.nextStartSize === null || drag.nextIndex === null) {
+                const target = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+                const rowElement = rowElements[drag.index];
+                if (rowElement)
+                    rowElement.style.height = `${target}px`;
+                const actual = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : target;
+                return { size: actual, nextSize: null };
+            }
+            const rowElement = rowElements[drag.index];
+            const nextRowElement = rowElements[drag.nextIndex];
+            if (rawDelta <= 0) {
+                // The dragged (above) row is the one shrinking; the row below
+                // only grows by however much the above row actually gave up.
+                // There's no equivalent fallback for the dragged row itself here -
+                // a row that can't shrink just can't, full stop, no matter how
+                // flexible the table's total height is willing to be.
+                const target = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+                if (rowElement)
+                    rowElement.style.height = `${target}px`;
+                const actualSize = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : target;
+                // If the row below is already sitting at its own natural content
+                // floor right now, it never actually had this space to begin with
+                // - a *previous* down-drag on this same boundary that hit this
+                // row's floor grew the table's total instead of taking space from
+                // it (see docs/bugs/row-resize-blocked-when-every-row-is-at-its-
+                // floor.md), and that growth is real table height, not this row's
+                // slack. Handing it back to the row here would inflate a row that
+                // never gave anything up, and a user dragging the border back to
+                // where it started would find the table permanently bloated with
+                // no way back except Undo (docs/bugs/row-resize-round-trip-
+                // inflates-neighbor.md). Measure the row's own floor by
+                // temporarily clearing its inline height override; only
+                // redistribute into it when it's currently holding real slack
+                // above that floor.
+                if (nextRowElement) {
+                    const previousNextHeight = nextRowElement.style.height;
+                    nextRowElement.style.height = "";
+                    const nextFloor = Math.round(nextRowElement.getBoundingClientRect().height);
+                    nextRowElement.style.height = previousNextHeight;
+                    if (drag.nextStartSize <= nextFloor + 1)
+                        return { size: actualSize, nextSize: drag.nextStartSize };
+                }
+                return { size: actualSize, nextSize: Math.round(drag.nextStartSize - (actualSize - drag.startSize)) };
+            }
+            // Dragging down: the row below is asked to shrink to pay for the
+            // dragged row's growth, exactly like the mirror case above - but
+            // unlike a row shrinking, a row *growing* is never floor-limited (a
+            // <tr>'s content only ever imposes a minimum, never a maximum), so
+            // there's no symmetric "the dragged row just can't grow" outcome to
+            // fall back to here. Making the dragged row's growth conditional on
+            // the neighbor actually having room to give (the way the shrink
+            // case correctly is) meant that on a table where every row already
+            // sits at its own content floor - true of almost any freshly
+            // created or pasted table with short cell text - internal
+            // row-boundary dragging did *nothing at all* in either direction:
+            // shrinking had nowhere to go, and growing was blocked because the
+            // neighbor had nowhere to give either. See docs/bugs/
+            // row-resize-blocked-when-every-row-is-at-its-floor.md. Grow the
+            // dragged row by the full requested amount unconditionally, and let
+            // the neighbor give up only what it actually can; if that's less
+            // than what was asked, the shortfall becomes real table growth -
+            // the only place that space could possibly come from - rather than
+            // silently refusing the drag altogether.
+            const size = Math.max(MIN_SIZE, Math.round(drag.startSize + rawDelta));
+            if (rowElement)
+                rowElement.style.height = `${size}px`;
+            const target = Math.max(MIN_SIZE, Math.round(drag.nextStartSize - rawDelta));
+            if (nextRowElement)
+                nextRowElement.style.height = `${target}px`;
+            const nextSize = nextRowElement ? Math.round(nextRowElement.getBoundingClientRect().height) : target;
+            return { size, nextSize };
+        };
+        const handleMove = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            setDragging({ kind: drag.kind, index: drag.index, position: drag.kind === "column" ? event.clientX : event.clientY });
+            // Live preview: mutate the real <col>/<tr> directly during the drag
+            // (commit-on-release still only touches the model, via onResizeColumn/
+            // onResizeRow below) - previously nothing rendered until pointerup, so
+            // the drag looked frozen until it suddenly jumped to the final size.
+            // Undoing this on the next real render is automatic: committing
+            // triggers the renderer's own re-render from authoritative model
+            // state, which overwrites whatever this loop wrote.
+            const { size: liveSize, nextSize: liveNextSize } = resolveSizes(drag, event);
+            if (drag.kind === "column") {
+                const cols = [...(tableElement.querySelector("colgroup")?.children || [])];
+                const col = cols[drag.index];
+                if (col)
+                    col.style.width = `${liveSize}px`;
+                if (liveNextSize !== null && drag.nextIndex !== null) {
+                    const nextCol = cols[drag.nextIndex];
+                    if (nextCol)
+                        nextCol.style.width = `${liveNextSize}px`;
+                }
+                // The stylesheet's `table-layout: fixed` + `width: 100%` treats
+                // <col> widths as proportions of the table's own rendered width,
+                // not literal pixels, unless the table's own width matches their
+                // sum (see surface/renderer.ts's table-width fix) - keep that sum
+                // live too, or every other column visibly compresses for the
+                // duration of the drag even though the fix restores them on
+                // release. Redistributing between two columns (liveNextSize !==
+                // null) never changes this sum by construction, so only the
+                // last column's own resize (liveNextSize === null) needs this.
+                if (liveNextSize === null) {
+                    const total = cols.reduce((sum, candidate, index) => sum + (index === drag.index ? liveSize : (parseFloat(candidate.style.width) || 0)), 0);
+                    if (total > 0)
+                        tableElement.style.width = `${total}px`;
+                }
+            }
+            else {
+                const rowElements = [...tableElement.querySelectorAll(":scope > tr, :scope > tbody > tr")];
+                const rowElement = rowElements[drag.index];
+                if (rowElement)
+                    rowElement.style.height = `${liveSize}px`;
+                if (liveNextSize !== null && drag.nextIndex !== null) {
+                    const nextRow = rowElements[drag.nextIndex];
+                    if (nextRow)
+                        nextRow.style.height = `${liveNextSize}px`;
+                }
+            }
+            // The handles' own on-screen position/length come from `columns`/
+            // `rows` state, which the effect above only refreshes via
+            // ResizeObserver/MutationObserver/scroll - none of which reliably
+            // fire here. Column drags happen to nudge the table's own rendered
+            // width by sub-pixel rounding (table-layout: fixed redistributing a
+            // stray pixel), which incidentally retriggers ResizeObserver; an
+            // internal row-boundary drag keeps the table's total height exactly
+            // constant by construction (see resolveSizes above), so it never
+            // does. Left alone, the row handle (and the blue line it renders)
+            // stays frozen at its pre-drag position while the real row border
+            // moves live underneath it - reported as a misplaced, "very slow"
+            // blue line that overflows past the table/editor as the gap between
+            // the frozen handle and the actual, now-taller table grows. Forcing
+            // a synchronous re-measure after every live style mutation (a
+            // getBoundingClientRect read right after a style write forces the
+            // browser to flush layout first, so this always reflects the
+            // mutation just above, not a stale value) keeps both column and row
+            // handles tracking the real border on every pointermove instead of
+            // waiting on an observer that may not fire at all.
+            recompute();
+        };
+        const handleUp = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const { size, nextSize } = resolveSizes(drag, event);
+            if (drag.kind === "column") {
+                // A table pasted/created with no columnWidths yet (natural,
+                // stretched rendering - see docs/bugs/table-shrinks-after-paste.md)
+                // has no real per-column data for the command layer to fall back
+                // on; without this, setTableColumnWidthCommand's own fallback
+                // (Array(columns).fill(120)) would silently reset every OTHER
+                // column to a fabricated 120px default the instant any one column
+                // was resized, shrinking the whole table - passing the real,
+                // currently-measured width of every column lets the caller seed a
+                // complete, accurate columnWidths array instead of guessing.
+                const currentWidths = columnsRef.current.map((boundary) => boundary.size);
+                if (nextSize !== null && drag.nextIndex !== null)
+                    currentWidths[drag.nextIndex] = nextSize;
+                onResizeColumn(drag.index, size, currentWidths);
+            }
+            else if (nextSize !== null && drag.nextIndex !== null) {
+                onResizeRow(drag.index, size, { index: drag.nextIndex, height: nextSize });
+            }
+            else
+                onResizeRow(drag.index, size);
+            dragRef.current = null;
+            setDragging(null);
+        };
+        ownerWindow.addEventListener("pointermove", handleMove);
+        ownerWindow.addEventListener("pointerup", handleUp);
+        return () => {
+            ownerWindow.removeEventListener("pointermove", handleMove);
+            ownerWindow.removeEventListener("pointerup", handleUp);
+        };
+    }, [tableElement, onResizeColumn, onResizeRow, recompute]);
+    const startDrag = (kind, boundary) => (event) => {
+        event.preventDefault();
+        const siblings = kind === "column" ? columnsRef.current : rowsRef.current;
+        const next = siblings[boundary.index + 1] ?? null;
+        dragRef.current = {
+            kind, index: boundary.index, startClient: kind === "column" ? event.clientX : event.clientY, startSize: boundary.size,
+            nextIndex: next?.index ?? null, nextStartSize: next?.size ?? null,
+        };
+        setDragging({ kind, index: boundary.index, position: kind === "column" ? event.clientX : event.clientY });
+    };
+    return (_jsxs("div", { "data-srte-table-resize-handles": "true", style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 60 }, children: [rows.map((boundary) => (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": `Resize row ${boundary.index + 1}`, "data-srte-row-resize-handle": boundary.index, onPointerDown: startDrag("row", boundary), style: {
+                    position: "fixed",
+                    left: boundary.start,
+                    top: boundary.position - HANDLE_THICKNESS / 2,
+                    width: boundary.length,
+                    height: HANDLE_THICKNESS,
+                    cursor: "row-resize",
+                    pointerEvents: "auto",
+                    background: dragging?.kind === "row" && dragging.index === boundary.index ? "var(--srte-primary)" : "transparent",
+                } }, `row-${boundary.index}`))), columns.map((boundary) => (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize column ${boundary.index + 1}`, "data-srte-column-resize-handle": boundary.index, onPointerDown: startDrag("column", boundary), style: {
+                    position: "fixed",
+                    left: boundary.position - HANDLE_THICKNESS / 2,
+                    top: boundary.start,
+                    width: HANDLE_THICKNESS,
+                    height: boundary.length,
+                    cursor: "col-resize",
+                    pointerEvents: "auto",
+                    background: dragging?.kind === "column" && dragging.index === boundary.index ? "var(--srte-primary)" : "transparent",
+                } }, `col-${boundary.index}`)))] }));
+}

package/dist/components/TableSizePickerPopover.d.ts

@@ -0,0 +1,16 @@
+export interface TableSizePickerPopoverProps {
+    x: number;
+    y: number;
+    onInsert: (rows: number, columns: number) => void;
+    onCancel: () => void;
+}
+/**
+ * "Insert table" size picker - CKEditor's own pattern: hover an N×M grid to
+ * preview the size, click a cell to insert immediately (one decisive click,
+ * no separate Apply/Confirm step, since a grid cell click is already a
+ * single deliberate choice - the same reasoning ColorPickerPopover's
+ * recent-swatch buttons and the removed preset grid used). A numeric
+ * fallback below covers sizes past the grid's cap without capping what the
+ * tool can actually do.
+ */
+export declare function TableSizePickerPopover({ x, y, onInsert, onCancel }: TableSizePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableSizePickerPopover.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+const MAX_GRID = 8;
+const buttonStyle = {
+    minHeight: 32,
+    padding: "0 10px",
+    border: "1px solid var(--srte-input-border)",
+    borderRadius: 8,
+    background: "var(--srte-input-bg)",
+    color: "var(--srte-menu-text)",
+    cursor: "pointer",
+    fontWeight: 500,
+    fontSize: 13,
+};
+const inputStyle = {
+    width: 48,
+    height: 32,
+    boxSizing: "border-box",
+    padding: "0 8px",
+    border: "1px solid var(--srte-input-border)",
+    borderRadius: 8,
+    outline: "none",
+    background: "var(--srte-input-bg)",
+    color: "var(--srte-input-text)",
+    font: "inherit",
+    textAlign: "center",
+};
+/**
+ * "Insert table" size picker - CKEditor's own pattern: hover an N×M grid to
+ * preview the size, click a cell to insert immediately (one decisive click,
+ * no separate Apply/Confirm step, since a grid cell click is already a
+ * single deliberate choice - the same reasoning ColorPickerPopover's
+ * recent-swatch buttons and the removed preset grid used). A numeric
+ * fallback below covers sizes past the grid's cap without capping what the
+ * tool can actually do.
+ */
+export function TableSizePickerPopover({ x, y, onInsert, onCancel }) {
+    const rootRef = useRef(null);
+    const rowsRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [hover, setHover] = useState(null);
+    const [customRows, setCustomRows] = useState("2");
+    const [customColumns, setCustomColumns] = useState("2");
+    const onCancelRef = useRef(onCancel);
+    onCancelRef.current = onCancel;
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const margin = 8;
+        const { width, height } = el.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const overflowsRight = x + width > viewportWidth - margin;
+        const left = overflowsRight ? x - width : x;
+        const clampedLeft = Math.min(Math.max(margin, left), Math.max(margin, viewportWidth - width - margin));
+        const overflowsBottom = y + height > viewportHeight - margin;
+        const top = overflowsBottom ? y - height : y;
+        const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - margin));
+        setPlacement({ left: clampedLeft, top: clampedTop });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target))
+                onCancelRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, []);
+    // Escape must dismiss regardless of focus - unlike LinkEditorPopover/
+    // ColorPickerPopover, nothing here is autofocused on open (the grid is
+    // meant to be hovered, not tabbed into first), so focus stays wherever it
+    // was (typically the "Insert table" toolbar button) and the div's own
+    // onKeyDown below would never see the keypress.
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key === "Escape")
+                onCancelRef.current();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, []);
+    const insertCustom = () => {
+        const rows = Math.min(50, Math.max(1, Math.round(Number(customRows)) || 0));
+        const columns = Math.min(50, Math.max(1, Math.round(Number(customColumns)) || 0));
+        if (!rows || !columns)
+            return;
+        onInsert(rows, columns);
+    };
+    return (_jsxs("div", { ref: rootRef, "data-srte-table-size-popover": "true", role: "dialog", "aria-label": "Insert table", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 232,
+            boxSizing: "border-box",
+            background: "var(--srte-menu-bg)",
+            color: "var(--srte-menu-text)",
+            border: "1px solid var(--srte-border)",
+            borderRadius: 12,
+            boxShadow: "var(--srte-menu-shadow)",
+            padding: 14,
+        }, children: [_jsx("div", { style: { fontWeight: 650, marginBottom: 10 }, children: "Insert table" }), _jsx("div", { "data-srte-table-size-grid": "true", style: { display: "grid", gridTemplateColumns: `repeat(${MAX_GRID}, 1fr)`, gap: 3, marginBottom: 8 }, onMouseLeave: () => setHover(null), children: Array.from({ length: MAX_GRID * MAX_GRID }, (_, index) => {
+                    const row = Math.floor(index / MAX_GRID);
+                    const column = index % MAX_GRID;
+                    const active = hover ? row <= hover.row && column <= hover.column : false;
+                    return (_jsx("button", { type: "button", "data-srte-table-size-cell": `${row + 1}x${column + 1}`, "aria-label": `Insert a ${row + 1} by ${column + 1} table`, onMouseEnter: () => setHover({ row, column }), onFocus: () => setHover({ row, column }), onClick: () => onInsert(row + 1, column + 1), style: {
+                            width: 20, height: 20, padding: 0, boxSizing: "border-box",
+                            border: `1px solid ${active ? "var(--srte-primary)" : "var(--srte-input-border)"}`,
+                            borderRadius: 3,
+                            background: active ? "var(--srte-primary)" : "var(--srte-input-bg)",
+                            cursor: "pointer",
+                        } }, index));
+                }) }), _jsx("div", { "data-srte-table-size-label": "true", style: { fontSize: 12, marginBottom: 12, minHeight: 16 }, children: hover ? `${hover.row + 1} × ${hover.column + 1} table` : "Hover to choose a size" }), _jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 6 }, children: "Custom size" }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 12 }, children: [_jsx("input", { ref: rowsRef, type: "number", min: 1, max: 50, "aria-label": "Rows", value: customRows, onChange: (event) => setCustomRows(event.target.value), onKeyDown: (event) => { if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertCustom();
+                        } }, style: inputStyle }), _jsx("span", { children: "\u00D7" }), _jsx("input", { type: "number", min: 1, max: 50, "aria-label": "Columns", value: customColumns, onChange: (event) => setCustomColumns(event.target.value), onKeyDown: (event) => { if (event.key === "Enter") {
+                            event.preventDefault();
+                            insertCustom();
+                        } }, style: inputStyle }), _jsx("button", { type: "button", onClick: insertCustom, style: { ...buttonStyle, marginLeft: "auto", borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "Insert" })] }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: _jsx("button", { type: "button", onClick: onCancel, style: buttonStyle, children: "Cancel" }) })] }));
+}

package/dist/components/ToolbarPrimitives.d.ts

@@ -0,0 +1,161 @@
+import React from "react";
+export declare const toolbarIcons: {
+    readonly bold: import("react/jsx-runtime").JSX.Element;
+    readonly italic: import("react/jsx-runtime").JSX.Element;
+    readonly underline: import("react/jsx-runtime").JSX.Element;
+    readonly strikethrough: import("react/jsx-runtime").JSX.Element;
+    readonly code: import("react/jsx-runtime").JSX.Element;
+    readonly superscript: import("react/jsx-runtime").JSX.Element;
+    readonly subscript: import("react/jsx-runtime").JSX.Element;
+    readonly textColor: import("react/jsx-runtime").JSX.Element;
+    readonly backgroundColor: import("react/jsx-runtime").JSX.Element;
+    readonly fontSize: import("react/jsx-runtime").JSX.Element;
+    readonly fontFamily: import("react/jsx-runtime").JSX.Element;
+    readonly paragraphStyle: import("react/jsx-runtime").JSX.Element;
+    readonly alignLeft: import("react/jsx-runtime").JSX.Element;
+    readonly alignCenter: import("react/jsx-runtime").JSX.Element;
+    readonly alignRight: import("react/jsx-runtime").JSX.Element;
+    readonly alignJustify: import("react/jsx-runtime").JSX.Element;
+    readonly quote: import("react/jsx-runtime").JSX.Element;
+    readonly moveUp: import("react/jsx-runtime").JSX.Element;
+    readonly moveDown: import("react/jsx-runtime").JSX.Element;
+    readonly moveLeft: import("react/jsx-runtime").JSX.Element;
+    readonly moveRight: import("react/jsx-runtime").JSX.Element;
+    readonly indent: import("react/jsx-runtime").JSX.Element;
+    readonly outdent: import("react/jsx-runtime").JSX.Element;
+    readonly link: import("react/jsx-runtime").JSX.Element;
+    readonly unlink: import("react/jsx-runtime").JSX.Element;
+    readonly bulletedList: import("react/jsx-runtime").JSX.Element;
+    readonly numberedList: import("react/jsx-runtime").JSX.Element;
+    readonly checklist: import("react/jsx-runtime").JSX.Element;
+    readonly checkSquare: import("react/jsx-runtime").JSX.Element;
+    readonly restart: import("react/jsx-runtime").JSX.Element;
+    readonly continueNumbering: import("react/jsx-runtime").JSX.Element;
+    readonly table: import("react/jsx-runtime").JSX.Element;
+    readonly mergeCells: import("react/jsx-runtime").JSX.Element;
+    readonly splitCell: import("react/jsx-runtime").JSX.Element;
+    readonly addRow: import("react/jsx-runtime").JSX.Element;
+    readonly addColumn: import("react/jsx-runtime").JSX.Element;
+    readonly headerRow: import("react/jsx-runtime").JSX.Element;
+    readonly deleteTable: import("react/jsx-runtime").JSX.Element;
+    readonly image: import("react/jsx-runtime").JSX.Element;
+    readonly video: import("react/jsx-runtime").JSX.Element;
+    readonly audio: import("react/jsx-runtime").JSX.Element;
+    readonly formula: import("react/jsx-runtime").JSX.Element;
+    readonly specialChar: import("react/jsx-runtime").JSX.Element;
+    readonly cellBorder: import("react/jsx-runtime").JSX.Element;
+    readonly edit: import("react/jsx-runtime").JSX.Element;
+    readonly zoomIn: import("react/jsx-runtime").JSX.Element;
+    readonly zoomOut: import("react/jsx-runtime").JSX.Element;
+    readonly delete: import("react/jsx-runtime").JSX.Element;
+    readonly import: import("react/jsx-runtime").JSX.Element;
+    readonly saveCopy: import("react/jsx-runtime").JSX.Element;
+    readonly json: import("react/jsx-runtime").JSX.Element;
+    readonly history: import("react/jsx-runtime").JSX.Element;
+    readonly addComment: import("react/jsx-runtime").JSX.Element;
+    readonly comments: import("react/jsx-runtime").JSX.Element;
+    readonly suggest: import("react/jsx-runtime").JSX.Element;
+    readonly suggestions: import("react/jsx-runtime").JSX.Element;
+    readonly showEdits: import("react/jsx-runtime").JSX.Element;
+    readonly undo: import("react/jsx-runtime").JSX.Element;
+    readonly redo: import("react/jsx-runtime").JSX.Element;
+    readonly more: import("react/jsx-runtime").JSX.Element;
+    readonly divider: import("react/jsx-runtime").JSX.Element;
+    readonly pageBreak: import("react/jsx-runtime").JSX.Element;
+    readonly lineHeight: import("react/jsx-runtime").JSX.Element;
+};
+export type ToolbarIconKey = keyof typeof toolbarIcons;
+/** A single always-visible toolbar control: icon + plain-language label together, per the redesign's core principle. */
+export declare function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote }: {
+    icon: ToolbarIconKey;
+    label: string;
+    ariaLabel?: string;
+    /** "mixed" renders aria-pressed="mixed" - the selection is partially covered by this mark (see markCoverage in CanonicalAuthorityEditor.tsx). */
+    pressed?: boolean | "mixed";
+    disabled?: boolean;
+    title?: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Only for genuinely space-constrained spots (e.g. a 4-way align cluster) - the accessible name is preserved via ariaLabel/label regardless. */
+    iconOnly?: boolean;
+    /**
+     * This is the wide-viewport standalone copy of a tool that also lives in a
+     * dropdown (via the matching `widePromote` ToolbarMenuItem below) - hidden
+     * by default, shown only past theme.ts's wide-promotion breakpoint. See
+     * docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md.
+     */
+    widePromote?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** One row inside an open dropdown menu - closes the dropdown after acting, matching ContextMenu.tsx's own dismiss-on-action convention. */
+export declare function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disabled, title, onClick, widePromote }: {
+    icon?: ToolbarIconKey;
+    label: string;
+    ariaLabel?: string;
+    pressed?: boolean | "mixed";
+    disabled?: boolean;
+    title?: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** This tool also has a standalone wide-viewport ToolbarButton copy - hide this dropdown/mobile-menu row once that copy is showing (see ToolbarButton's own doc comment). */
+    widePromote?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 declare function ToolbarDropdown({ icon, label, priority, children }: {
+    icon?: ToolbarIconKey;
+    label: string;
+    /** Mirrors theme.ts's `[data-srte-priority]` responsive rules - 2 collapses into the mobile "More" menu before 1 (never collapses), leaving priority 3 whole *groups* to collapse first. */
+    priority?: 2;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** 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 declare function ToolbarGroup({ priority, children }: {
+    priority?: 3;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 declare function MobileMoreMenu({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;