smartrte-react 0.3.5 → 1.0.0-beta.10

package/dist/components/SpecialCharacterPopover.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { SPECIAL_CHARACTERS, SPECIAL_CHARACTER_CATEGORIES } from "../specialCharacters.js";
+const RECENT_ROW_LIMIT = 8;
+/**
+ * Special character picker: six standardized-Unicode-block categories
+ * (~200 characters total - see specialCharacters.ts's own doc comment),
+ * reusing the grid-with-hover-feedback shape already established by
+ * ColorPickerPopover/TableSizePickerPopover rather than a new component
+ * pattern. Insertion is immediate on click (a character, unlike a dragged
+ * color, is already a single complete choice) via a real, page-owned text
+ * insert - see `insertSpecialCharacter` in CanonicalAuthorityEditor.tsx.
+ */
+export function SpecialCharacterPopover({ x, y, recentCharacters, onInsert, onCancel }) {
+    const [category, setCategory] = useState("greek");
+    const [query, setQuery] = useState("");
+    const rootRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    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, maxHeight: viewportHeight - clampedTop - margin });
+    }, [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);
+        };
+    }, []);
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key === "Escape")
+                onCancelRef.current();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, []);
+    const needle = query.trim().toLowerCase();
+    const entries = useMemo(() => {
+        if (needle)
+            return SPECIAL_CHARACTERS.filter((entry) => entry.name.toLowerCase().includes(needle));
+        return SPECIAL_CHARACTERS.filter((entry) => entry.category === category);
+    }, [category, needle]);
+    return (_jsxs("div", { ref: rootRef, "data-srte-special-char-popover": "true", role: "dialog", "aria-label": "Special characters", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 380,
+            maxWidth: "calc(100vw - 16px)",
+            maxHeight: placement ? placement.maxHeight : "calc(100vh - 16px)",
+            display: "flex",
+            flexDirection: "column",
+            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)",
+            overflow: "hidden",
+        }, children: [_jsx("div", { style: { padding: "12px 14px 8px", borderBottom: "1px solid var(--srte-border)" }, children: _jsx("input", { "data-srte-special-char-search": "true", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search by name\u2026 (e.g. \u201Calpha\u201D)", "aria-label": "Search special characters", autoComplete: "off", style: {
+                        width: "100%", height: 34, boxSizing: "border-box", padding: "0 10px",
+                        border: "1px solid var(--srte-input-border)", borderRadius: 8, outline: "none",
+                        background: "var(--srte-input-bg)", color: "var(--srte-input-text)", font: "inherit", fontSize: 13.5,
+                    } }) }), _jsxs("div", { style: { display: "flex", flex: 1, minHeight: 0 }, children: [!needle && (_jsx("div", { role: "tablist", "aria-label": "Character category", style: { display: "flex", flexDirection: "column", gap: 2, padding: 8, borderRight: "1px solid var(--srte-border)", minWidth: 108 }, children: SPECIAL_CHARACTER_CATEGORIES.map((entry) => (_jsx("button", { type: "button", role: "tab", "aria-selected": category === entry.id, onMouseDown: (event) => event.preventDefault(), onClick: () => setCategory(entry.id), style: {
+                                fontSize: 12.5, fontWeight: 600, textAlign: "left", padding: "7px 9px", borderRadius: 7,
+                                border: "none", cursor: "pointer",
+                                background: category === entry.id ? "var(--srte-accent-bg)" : "transparent",
+                                color: category === entry.id ? "var(--srte-primary)" : "var(--srte-menu-text)",
+                            }, children: entry.label }, entry.id))) })), _jsx("div", { style: { flex: 1, overflowY: "auto" }, children: _jsxs("div", { "data-srte-special-char-grid": "true", style: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 6, padding: 12 }, children: [entries.map((entry) => (_jsx("button", { type: "button", "data-srte-special-char": entry.char, "aria-label": entry.name, title: entry.name, onMouseDown: (event) => event.preventDefault(), onClick: () => onInsert(entry.char), style: {
+                                        aspectRatio: "1", display: "flex", alignItems: "center", justifyContent: "center",
+                                        fontSize: 16, border: "1px solid var(--srte-input-border)", borderRadius: 7,
+                                        background: "var(--srte-input-bg)", color: "var(--srte-input-text)", cursor: "pointer",
+                                    }, children: entry.char }, `${entry.category}-${entry.char}`))), entries.length === 0 && (_jsxs("div", { style: { gridColumn: "1 / -1", fontSize: 13, opacity: 0.7, padding: "8px 2px" }, children: ["No characters match \u201C", query, "\u201D."] }))] }) })] }), recentCharacters && recentCharacters.length > 0 && (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 12px", borderTop: "1px solid var(--srte-border)" }, children: [_jsx("span", { style: { fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--srte-menu-text)", opacity: 0.7, marginRight: 2 }, children: "Recent" }), recentCharacters.slice(0, RECENT_ROW_LIMIT).map((char, index) => (_jsx("button", { type: "button", "data-srte-recent-special-char": char, "aria-label": `Recently used ${char}`, onMouseDown: (event) => event.preventDefault(), onClick: () => onInsert(char), style: {
+                            width: 26, height: 26, display: "flex", alignItems: "center", justifyContent: "center",
+                            fontSize: 14, border: "1px solid var(--srte-input-border)", borderRadius: 6,
+                            background: "var(--srte-input-bg)", color: "var(--srte-input-text)", cursor: "pointer",
+                        }, children: char }, `${char}-${index}`)))] }))] }));
+}

package/dist/components/StructuralSuggestionMarkers.d.ts

@@ -0,0 +1,20 @@
+import type { ModelDomMapping, PositionLookup, StructuralSuggestion } from "smartrte-core/foundation";
+export interface StructuralSuggestionMarkersProps {
+    positions: PositionLookup;
+    mapping: ModelDomMapping;
+    containerElement: HTMLElement;
+    suggestions: readonly StructuralSuggestion[];
+    activeSuggestionId: string | null;
+    onSelectSuggestion: (id: string) => void;
+}
+/**
+ * Live overlay for structural (whole-node) suggestions, the AnnotationRange
+ * half of Phase 12a §2.3's hybrid architecture. Simpler than CommentMarkers:
+ * a structural suggestion always anchors to exactly one whole node, so this
+ * measures that single element's own rect directly via mapping.nodeToDom
+ * rather than resolving a Range across DOM text positions. Re-measures on
+ * the same ResizeObserver/MutationObserver/scroll schedule as
+ * CommentMarkers/TableResizeHandles, for the same reason: live DOM layout
+ * changes independently of React re-renders.
+ */
+export declare function StructuralSuggestionMarkers({ positions, mapping, containerElement, suggestions, activeSuggestionId, onSelectSuggestion }: StructuralSuggestionMarkersProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StructuralSuggestionMarkers.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { resolveAnnotationRange } from "smartrte-core/foundation";
+/**
+ * Live overlay for structural (whole-node) suggestions, the AnnotationRange
+ * half of Phase 12a §2.3's hybrid architecture. Simpler than CommentMarkers:
+ * a structural suggestion always anchors to exactly one whole node, so this
+ * measures that single element's own rect directly via mapping.nodeToDom
+ * rather than resolving a Range across DOM text positions. Re-measures on
+ * the same ResizeObserver/MutationObserver/scroll schedule as
+ * CommentMarkers/TableResizeHandles, for the same reason: live DOM layout
+ * changes independently of React re-renders.
+ */
+export function StructuralSuggestionMarkers({ positions, mapping, containerElement, suggestions, activeSuggestionId, onSelectSuggestion }) {
+    const [rects, setRects] = useState([]);
+    const recompute = useCallback(() => {
+        if (!suggestions.length) {
+            setRects([]);
+            return;
+        }
+        const next = [];
+        suggestions.forEach((suggestion) => {
+            if (!resolveAnnotationRange(suggestion.range, positions))
+                return;
+            const element = mapping.nodeToDom(suggestion.range.startId);
+            if (!element)
+                return;
+            const rect = element.getBoundingClientRect();
+            next.push({ id: suggestion.id, left: rect.left, top: rect.top, width: rect.width, height: rect.height });
+        });
+        setRects(next);
+    }, [positions, mapping, suggestions]);
+    useEffect(() => {
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(containerElement);
+        const mutationObserver = new MutationObserver(recompute);
+        mutationObserver.observe(containerElement, { childList: true, subtree: true, characterData: true });
+        const ownerWindow = containerElement.ownerDocument.defaultView;
+        ownerWindow?.addEventListener("scroll", recompute, true);
+        ownerWindow?.addEventListener("resize", recompute);
+        return () => {
+            observer.disconnect();
+            mutationObserver.disconnect();
+            ownerWindow?.removeEventListener("scroll", recompute, true);
+            ownerWindow?.removeEventListener("resize", recompute);
+        };
+    }, [containerElement, recompute]);
+    return (_jsx("div", { "data-srte-suggestion-markers": "true", style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 55 }, children: rects.map((rect) => (_jsx("div", { "data-srte-suggestion-highlight": rect.id, onPointerDown: () => onSelectSuggestion(rect.id), style: {
+                position: "fixed", left: rect.left, top: rect.top, width: rect.width, height: rect.height,
+                background: activeSuggestionId === rect.id ? "var(--srte-suggestion-highlight-active, rgba(220, 60, 60, 0.28))" : "var(--srte-suggestion-highlight, rgba(220, 60, 60, 0.14))",
+                borderLeft: "3px solid var(--srte-suggestion-border, #dc3c3c)",
+                cursor: "pointer",
+                pointerEvents: "auto",
+            } }, rect.id))) }));
+}

package/dist/components/SuggestionPanel.d.ts

@@ -0,0 +1,26 @@
+import type { SmartDocument, StructuralSuggestion } from "smartrte-core/foundation";
+export interface SuggestionPanelProps {
+    open: boolean;
+    onClose: () => void;
+    document: SmartDocument;
+    structuralSuggestions: readonly StructuralSuggestion[];
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    /** Set when "Suggest insertion" was just clicked at a real caret position - renders a compose box for the proposed text. */
+    pendingInsert: boolean;
+    onSubmitInsert: (text: string) => void;
+    onAcceptInline: (id: string) => void;
+    onRejectInline: (id: string) => void;
+    onAcceptStructural: (suggestion: StructuralSuggestion) => void;
+    onRejectStructural: (suggestion: StructuralSuggestion) => void;
+    busyId: string | null;
+}
+/**
+ * Docked side panel listing every pending suggestion - both inline
+ * (discovered fresh each render via listInlineSuggestions, since those
+ * live as marks inside `document` itself, not a separate list the way
+ * comments/versions do) and structural (an explicit prop, since those are
+ * an out-of-band record like CommentThread). Non-modal, same reasoning as
+ * CommentThreadPanel: reviewing shouldn't block continuing to edit nearby.
+ */
+export declare function SuggestionPanel(props: SuggestionPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SuggestionPanel.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { listInlineSuggestions } from "smartrte-core/foundation";
+const formatTimestamp = (createdAt) => new Date(createdAt).toLocaleString();
+/**
+ * Docked side panel listing every pending suggestion - both inline
+ * (discovered fresh each render via listInlineSuggestions, since those
+ * live as marks inside `document` itself, not a separate list the way
+ * comments/versions do) and structural (an explicit prop, since those are
+ * an out-of-band record like CommentThread). Non-modal, same reasoning as
+ * CommentThreadPanel: reviewing shouldn't block continuing to edit nearby.
+ */
+export function SuggestionPanel(props) {
+    const { open, onClose, document, structuralSuggestions, activeId, onSelect, pendingInsert, onSubmitInsert, onAcceptInline, onRejectInline, onAcceptStructural, onRejectStructural, busyId, } = props;
+    const [draft, setDraft] = useState("");
+    if (!open)
+        return null;
+    const inline = listInlineSuggestions(document);
+    const submitInsert = () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        onSubmitInsert(text);
+        setDraft("");
+    };
+    const isEmpty = inline.length === 0 && structuralSuggestions.length === 0;
+    return (_jsxs("div", { role: "complementary", "aria-label": "Suggestions", "data-srte-suggestion-panel": "true", style: {
+            position: "fixed", top: 0, right: 0, bottom: 0, width: 320, maxWidth: "90vw",
+            background: "var(--srte-modal-bg)", color: "var(--srte-modal-text)",
+            borderLeft: "1px solid var(--srte-border-light)", boxShadow: "var(--srte-menu-shadow)",
+            display: "flex", flexDirection: "column", zIndex: 70,
+        }, 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: "Suggestions" }), _jsx("button", { type: "button", "aria-label": "Close suggestions", onClick: onClose, children: "\u2715" })] }), pendingInsert && (_jsxs("div", { "data-srte-suggestion-compose": "true", style: { padding: "10px 14px", borderBottom: "1px solid var(--srte-border-light)" }, children: [_jsx("textarea", { value: draft, onChange: (event) => setDraft(event.target.value), placeholder: "Suggest inserting\u2026", rows: 2, style: { width: "100%", padding: "6px 8px", border: "1px solid var(--srte-border)", borderRadius: 6, background: "var(--srte-input-bg)", color: "var(--srte-input-text)", resize: "vertical" } }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 6 }, children: _jsx("button", { type: "button", "data-srte-suggestion-compose-submit": "true", disabled: !draft.trim(), onClick: submitInsert, children: "Suggest" }) })] })), _jsxs("div", { style: { flex: 1, overflowY: "auto", padding: "0 14px 14px" }, children: [isEmpty && _jsx("div", { style: { color: "var(--srte-text-muted)", padding: "12px 0" }, children: "No pending suggestions." }), inline.map((entry) => (_jsxs("div", { "data-srte-suggestion-entry": entry.id, onClick: () => onSelect(entry.id), style: { padding: "10px 0", borderBottom: "1px solid var(--srte-border-light)", outline: activeId === entry.id ? "2px solid var(--srte-primary)" : "none" }, children: [_jsxs("div", { style: { fontSize: 12, fontWeight: 600 }, children: [entry.authorId, " suggests ", entry.kind === "insert" ? "inserting" : "deleting"] }), _jsxs("div", { style: { fontSize: 13, whiteSpace: "pre-wrap" }, children: ["\"", entry.text, "\""] }), _jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)" }, children: formatTimestamp(entry.createdAt) }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [_jsx("button", { type: "button", "data-srte-suggestion-accept": entry.id, disabled: busyId === entry.id, onClick: (event) => { event.stopPropagation(); onAcceptInline(entry.id); }, children: "Accept" }), _jsx("button", { type: "button", "data-srte-suggestion-reject": entry.id, disabled: busyId === entry.id, onClick: (event) => { event.stopPropagation(); onRejectInline(entry.id); }, style: { color: "var(--srte-danger)" }, children: "Reject" })] })] }, entry.id))), structuralSuggestions.map((suggestion) => (_jsxs("div", { "data-srte-suggestion-entry": suggestion.id, onClick: () => onSelect(suggestion.id), style: { padding: "10px 0", borderBottom: "1px solid var(--srte-border-light)", outline: activeId === suggestion.id ? "2px solid var(--srte-primary)" : "none" }, children: [_jsxs("div", { style: { fontSize: 12, fontWeight: 600 }, children: [suggestion.authorId, " suggests removing this block"] }), _jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)" }, children: formatTimestamp(suggestion.createdAt) }), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [_jsx("button", { type: "button", "data-srte-suggestion-accept": suggestion.id, disabled: busyId === suggestion.id, onClick: (event) => { event.stopPropagation(); onAcceptStructural(suggestion); }, children: "Accept" }), _jsx("button", { type: "button", "data-srte-suggestion-reject": suggestion.id, disabled: busyId === suggestion.id, onClick: (event) => { event.stopPropagation(); onRejectStructural(suggestion); }, style: { color: "var(--srte-danger)" }, children: "Reject" })] })] }, suggestion.id)))] })] }));
+}

package/dist/components/TableBorderPopover.d.ts

@@ -0,0 +1,59 @@
+export type BorderStyle = "solid" | "dashed" | "dotted";
+export interface BorderSides {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+}
+export interface BorderDraft {
+    sides: BorderSides;
+    style: BorderStyle;
+    widthPx: number;
+    hex: string;
+}
+export interface TableBorderPopoverProps {
+    x: number;
+    y: number;
+    initial: BorderDraft;
+    /** Up to 4 previously-committed border colours, most-recent first - same pattern as the other colour buckets. */
+    recentColors?: readonly string[];
+    /** Fires on every change (a side toggled, style/width picked, or a colour drag frame) - the caller live-previews it on the real cell(s), same pattern as the plain colour picker's onPreview. */
+    onPreview: (draft: BorderDraft) => void;
+    /** Fires once, only from the explicit Apply button - unlike ColorPickerPopover, this composite dialog (four independent fields assembled together) commits on a deliberate action, not on any dismissal. */
+    onApply: (draft: BorderDraft) => void;
+    /** Fires from Cancel, Escape, or an outside click - reverts to `initial`. */
+    onCancel: () => void;
+}
+export declare const BORDER_WIDTH_PRESETS: readonly [{
+    readonly id: "thin";
+    readonly label: "Thin";
+    readonly px: 2;
+}, {
+    readonly id: "medium";
+    readonly label: "Medium";
+    readonly px: 3;
+}, {
+    readonly id: "thick";
+    readonly label: "Thick";
+    readonly px: 4;
+}];
+/**
+ * "Border options" - one popover combining every dimension of a cell
+ * border, replacing what used to be a separate toolbar-dropdown width
+ * <select> and a standalone "Border colour" item. table_cell.attrs only
+ * ever stored ONE uniform border for all four sides (`borders`) - "which
+ * sides get a border" (per-cell top/right/bottom/left) needed new per-side
+ * schema attrs (borderTop/Right/Bottom/Left), added specifically to back
+ * this control (see docs/bugs/table-cell-border-color-width-no-ui.md's
+ * addendum). One style/width/colour choice applies to whichever sides are
+ * toggled on here, rather than letting all four vary independently - real
+ * border dialogs (Word, Google Docs) default to this simpler mode too, and
+ * a fully independent 4-way style/width/colour matrix wasn't asked for.
+ *
+ * The colour swatch opens the existing ColorPickerPopover completely
+ * unmodified, as a nested popover anchored to the swatch - the dismiss/
+ * Escape handling below explicitly accounts for it being a DOM sibling
+ * (both are position:fixed overlays, so `rootRef.contains()` alone would
+ * never recognize a click inside it as "inside" this popover).
+ */
+export declare function TableBorderPopover({ x, y, initial, recentColors, onPreview, onApply, onCancel }: TableBorderPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableBorderPopover.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ColorPickerPopover } from "./ColorPickerPopover.js";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
+// Widths start at 2px, not 1px - table_cell's border-collapse table (see
+// theme.ts's th/td rule) already renders a 1px ambient default gridline on
+// every cell. A custom border tied at 1px loses CSS border-collapse's
+// conflict resolution on shared edges half the time (whichever side faces
+// an earlier-in-table-order neighbor keeps the neighbor's default border,
+// confirmed empirically: 1px, and even a fractional 1.5px, lost this way in
+// every engine tested) - only a width strictly greater than the ambient
+// default reliably wins on every side regardless of table position. 2px is
+// the thinnest value that's actually renderable as a real, always-visible
+// custom border under this constraint - see
+// docs/bugs/table-cell-border-thin-preset-loses-border-collapse-tie.md.
+export const BORDER_WIDTH_PRESETS = [
+    { id: "thin", label: "Thin", px: 2 },
+    { id: "medium", label: "Medium", px: 3 },
+    { id: "thick", label: "Thick", px: 4 },
+];
+const STYLE_OPTIONS = ["solid", "dashed", "dotted"];
+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 selectStyle = {
+    width: "100%", height: 32, boxSizing: "border-box", padding: "0 8px", borderRadius: 8,
+    border: "1px solid var(--srte-input-border)", background: "var(--srte-input-bg)", color: "var(--srte-input-text)",
+    font: "inherit", fontSize: 13, cursor: "pointer",
+};
+const fieldLabelStyle = { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.7, marginBottom: 4 };
+const SIDE_BAR_LENGTH = 40;
+const SIDE_BAR_THICKNESS = 8;
+const SIDE_BOX = 64;
+/**
+ * "Border options" - one popover combining every dimension of a cell
+ * border, replacing what used to be a separate toolbar-dropdown width
+ * <select> and a standalone "Border colour" item. table_cell.attrs only
+ * ever stored ONE uniform border for all four sides (`borders`) - "which
+ * sides get a border" (per-cell top/right/bottom/left) needed new per-side
+ * schema attrs (borderTop/Right/Bottom/Left), added specifically to back
+ * this control (see docs/bugs/table-cell-border-color-width-no-ui.md's
+ * addendum). One style/width/colour choice applies to whichever sides are
+ * toggled on here, rather than letting all four vary independently - real
+ * border dialogs (Word, Google Docs) default to this simpler mode too, and
+ * a fully independent 4-way style/width/colour matrix wasn't asked for.
+ *
+ * The colour swatch opens the existing ColorPickerPopover completely
+ * unmodified, as a nested popover anchored to the swatch - the dismiss/
+ * Escape handling below explicitly accounts for it being a DOM sibling
+ * (both are position:fixed overlays, so `rootRef.contains()` alone would
+ * never recognize a click inside it as "inside" this popover).
+ */
+export function TableBorderPopover({ x, y, initial, recentColors, onPreview, onApply, onCancel }) {
+    const [draft, setDraft] = useState(initial);
+    const [colorPickerAnchor, setColorPickerAnchor] = useState(null);
+    const hexBeforeNestedPickerRef = useRef(initial.hex);
+    const rootRef = useRef(null);
+    const swatchRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const onCancelRef = useRef(onCancel);
+    onCancelRef.current = onCancel;
+    const onPreviewRef = useRef(onPreview);
+    onPreviewRef.current = onPreview;
+    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));
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            if (rootRef.current?.contains(target))
+                return;
+            // The nested colour picker is a DOM sibling (both are position:fixed
+            // overlays), not a descendant of rootRef - without this, clicking
+            // inside it would look like an "outside" click on this popover.
+            if (colorPickerAnchor && document.querySelector('[data-srte-color-popover="true"]')?.contains(target))
+                return;
+            onCancelRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, [colorPickerAnchor]);
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            // While the nested colour picker is open, let its own Escape handler
+            // commit/dismiss just that picker first - a second Escape closes this
+            // whole dialog.
+            if (colorPickerAnchor)
+                return;
+            onCancelRef.current();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+    }, [colorPickerAnchor]);
+    const update = (patch) => {
+        const next = { ...draft, ...patch };
+        setDraft(next);
+        onPreviewRef.current(next);
+    };
+    const toggleSide = (side) => update({ sides: { ...draft.sides, [side]: !draft.sides[side] } });
+    const edgeButton = (side, style, label) => (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": draft.sides[side], onMouseDown: (event) => event.preventDefault(), onClick: () => toggleSide(side), style: {
+            position: "absolute", border: "none", borderRadius: 3, cursor: "pointer", padding: 0,
+            background: draft.sides[side] ? "var(--srte-primary)" : "var(--srte-input-border)",
+            ...style,
+        } }));
+    return (_jsxs("div", { ref: rootRef, "data-srte-table-border-popover": "true", role: "dialog", "aria-label": "Border options", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 240,
+            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,
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+        }, children: [_jsx("div", { style: { fontWeight: 650 }, children: "Border options" }), _jsxs("div", { style: { display: "flex", gap: 14, alignItems: "center" }, children: [_jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Sides" }), _jsxs("div", { style: { position: "relative", width: SIDE_BOX, height: SIDE_BOX, border: "1px dashed var(--srte-border)", borderRadius: 6 }, children: [edgeButton("top", { top: -SIDE_BAR_THICKNESS / 2, left: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_LENGTH, height: SIDE_BAR_THICKNESS }, "Top border"), edgeButton("bottom", { bottom: -SIDE_BAR_THICKNESS / 2, left: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_LENGTH, height: SIDE_BAR_THICKNESS }, "Bottom border"), edgeButton("left", { left: -SIDE_BAR_THICKNESS / 2, top: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_THICKNESS, height: SIDE_BAR_LENGTH }, "Left border"), edgeButton("right", { right: -SIDE_BAR_THICKNESS / 2, top: (SIDE_BOX - SIDE_BAR_LENGTH) / 2, width: SIDE_BAR_THICKNESS, height: SIDE_BAR_LENGTH }, "Right border")] })] }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [_jsx("button", { type: "button", style: buttonStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => update({ sides: { top: true, right: true, bottom: true, left: true } }), children: "All sides" }), _jsx("button", { type: "button", style: buttonStyle, onMouseDown: (event) => event.preventDefault(), onClick: () => update({ sides: { top: false, right: false, bottom: false, left: false } }), children: "No border" })] })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Style" }), _jsx("select", { "aria-label": "Border style", value: draft.style, onChange: (event) => update({ style: event.target.value }), style: selectStyle, children: STYLE_OPTIONS.map((style) => _jsxs("option", { value: style, children: [style[0].toUpperCase(), style.slice(1)] }, style)) })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Width" }), _jsx("select", { "aria-label": "Border width", value: BORDER_WIDTH_PRESETS.find((preset) => preset.px === draft.widthPx)?.id ?? BORDER_WIDTH_PRESETS[0].id, onChange: (event) => { const preset = BORDER_WIDTH_PRESETS.find((entry) => entry.id === event.target.value); if (preset)
+                            update({ widthPx: preset.px }); }, style: selectStyle, children: BORDER_WIDTH_PRESETS.map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id)) })] }), _jsxs("div", { children: [_jsx("div", { style: fieldLabelStyle, children: "Colour" }), _jsxs("button", { ref: swatchRef, type: "button", "aria-label": "Border colour", onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                            hexBeforeNestedPickerRef.current = draft.hex;
+                            const rect = swatchRef.current?.getBoundingClientRect();
+                            setColorPickerAnchor({ x: rect?.left ?? x, y: (rect?.bottom ?? y) + 4 });
+                        }, style: { ...buttonStyle, width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "flex-start" }, children: [_jsx("span", { style: { width: 18, height: 18, borderRadius: 4, border: "1px solid var(--srte-input-border)", background: draft.hex }, "aria-hidden": "true" }), draft.hex] })] }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [_jsx("button", { type: "button", style: buttonStyle, onClick: onCancel, children: "Cancel" }), _jsx("button", { type: "button", onClick: () => onApply(draft), style: { ...buttonStyle, borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "Apply" })] }), colorPickerAnchor && _jsx(ColorPickerPopover, { x: colorPickerAnchor.x, y: colorPickerAnchor.y, label: "Border colour", initialValue: draft.hex, recentColors: recentColors, onPreview: (hex) => update({ hex }), onApply: (hex) => { update({ hex }); setColorPickerAnchor(null); }, onCancel: () => { update({ hex: hexBeforeNestedPickerRef.current }); setColorPickerAnchor(null); } })] }));
+}

package/dist/components/TableResizeHandles.d.ts

@@ -0,0 +1,25 @@
+export interface TableResizeHandlesProps {
+    tableElement: HTMLTableElement;
+    /**
+     * `currentWidths` is every column's real, currently-rendered width (not
+     * just the dragged one) - see the handleUp comment below for why the
+     * caller needs this, not just the one changed index.
+     */
+    onResizeColumn: (index: number, width: number, currentWidths: readonly number[]) => void;
+    onResizeRow: (index: number, height: number, adjacent?: {
+        index: number;
+        height: number;
+    }) => void;
+}
+/**
+ * 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 declare function TableResizeHandles({ tableElement, onResizeColumn, onResizeRow }: TableResizeHandlesProps): import("react/jsx-runtime").JSX.Element;