smartrte-react 0.3.5 → 1.0.0-beta.1

package/dist/components/MediaOverlay.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+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 HANDLE_SIZE = 12;
+const MIN_ATOM_SIZE = 24;
+/**
+ * Context menu scope reduction: media no longer gets a generic right-click
+ * menu - it gets this dedicated overlay, anchored to the atom's own live
+ * element rect (the same ResizeObserver/scroll-tracking pattern
+ * TableResizeHandles.tsx already uses for anchoring UI to a live element,
+ * per §1's investigation) instead of click coordinates, appearing whenever
+ * an atom is selected. The caller controls visibility by conditionally
+ * rendering this component based on atomSelected - when the selection
+ * moves off the atom, the component unmounts on its own, which is the
+ * "dismiss when selection moves away" requirement with no extra logic
+ * needed here.
+ *
+ * Post-batch follow-up ("images doesn't have a resizer"): the Resize +/-
+ * buttons were the only resize affordance - no direct drag handle existed
+ * for atoms, unlike tables. Added a corner drag handle at the atom's own
+ * bottom-right corner, reusing TableResizeHandles.tsx's exact live-preview-
+ * during-drag / commit-on-release pattern (mutate the real element's style
+ * directly while dragging for immediate feedback, commit via a real command
+ * only on release) rather than inventing a different interaction model for
+ * the second resizable-thing in this codebase.
+ */
+export function MediaOverlay({ atomElement, alt, width, height, src, resizable = true, onEdit, onResize, onResizeTo, onDelete, onDismiss }) {
+    const rootRef = useRef(null);
+    const handleRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [handlePosition, setHandlePosition] = useState(null);
+    const dragRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    useLayoutEffect(() => {
+        const recompute = () => {
+            const rect = atomElement.getBoundingClientRect();
+            const margin = 8;
+            const viewportWidth = atomElement.ownerDocument.defaultView?.innerWidth ?? 0;
+            const viewportHeight = atomElement.ownerDocument.defaultView?.innerHeight ?? 0;
+            const panelWidth = rootRef.current?.getBoundingClientRect().width ?? 260;
+            const left = Math.min(Math.max(margin, rect.left), Math.max(margin, viewportWidth - panelWidth - margin));
+            const overflowsBottom = rect.bottom + 6 + 120 > viewportHeight - margin;
+            const top = overflowsBottom ? Math.max(margin, rect.top - 6 - 120) : rect.bottom + 6;
+            setPlacement({ left, top });
+            setHandlePosition({ left: rect.right - HANDLE_SIZE / 2, top: rect.bottom - HANDLE_SIZE / 2 });
+        };
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(atomElement);
+        const ownerWindow = atomElement.ownerDocument.defaultView;
+        ownerWindow?.addEventListener("scroll", recompute, true);
+        return () => {
+            observer.disconnect();
+            ownerWindow?.removeEventListener("scroll", recompute, true);
+        };
+    }, [atomElement]);
+    useEffect(() => {
+        const ownerWindow = atomElement.ownerDocument.defaultView;
+        if (!ownerWindow)
+            return;
+        const handleMove = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
+            const liveWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
+            const liveHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
+            atomElement.style.width = `${liveWidth}px`;
+            atomElement.style.height = `${liveHeight}px`;
+            if (handleRef.current) {
+                const rect = atomElement.getBoundingClientRect();
+                handleRef.current.style.left = `${rect.right - HANDLE_SIZE / 2}px`;
+                handleRef.current.style.top = `${rect.bottom - HANDLE_SIZE / 2}px`;
+            }
+        };
+        const handleUp = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
+            const finalWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
+            const finalHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
+            dragRef.current = null;
+            setDragging(false);
+            // Committing triggers the renderer's own re-render from authoritative
+            // model state, which overwrites the live-preview inline style above -
+            // same reasoning as TableResizeHandles.tsx's commit-on-release.
+            onResizeTo(finalWidth, finalHeight);
+        };
+        ownerWindow.addEventListener("pointermove", handleMove);
+        ownerWindow.addEventListener("pointerup", handleUp);
+        return () => {
+            ownerWindow.removeEventListener("pointermove", handleMove);
+            ownerWindow.removeEventListener("pointerup", handleUp);
+        };
+    }, [atomElement, onResizeTo]);
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            if (dragRef.current)
+                return;
+            if (rootRef.current && !rootRef.current.contains(target) && !atomElement.contains(target) && target !== handleRef.current)
+                onDismissRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, [atomElement]);
+    return (_jsxs(_Fragment, { children: [resizable && _jsx("div", { ref: handleRef, "data-srte-media-resize-handle": "true", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize media", onPointerDown: (event) => {
+                    event.preventDefault();
+                    const rect = atomElement.getBoundingClientRect();
+                    dragRef.current = { startClientX: event.clientX, startClientY: event.clientY, startWidth: rect.width, startHeight: rect.height };
+                    setDragging(true);
+                }, style: {
+                    position: "fixed",
+                    left: handlePosition?.left ?? 0,
+                    top: handlePosition?.top ?? 0,
+                    visibility: handlePosition ? "visible" : "hidden",
+                    width: HANDLE_SIZE,
+                    height: HANDLE_SIZE,
+                    borderRadius: "50%",
+                    background: dragging ? "var(--srte-primary)" : "var(--srte-menu-bg)",
+                    border: "2px solid var(--srte-primary)",
+                    cursor: "nwse-resize",
+                    zIndex: 71,
+                    touchAction: "none",
+                } }), _jsxs("div", { ref: rootRef, "data-srte-media-overlay": "true", role: "dialog", "aria-label": "Media actions", style: {
+                    position: "fixed",
+                    left: placement?.left ?? 0,
+                    top: placement?.top ?? 0,
+                    visibility: placement ? "visible" : "hidden",
+                    zIndex: 70,
+                    width: 260,
+                    maxWidth: "calc(100vw - 16px)",
+                    boxSizing: "border-box",
+                    background: "var(--srte-menu-bg)",
+                    color: "var(--srte-menu-text)",
+                    border: "1px solid var(--srte-border)",
+                    borderRadius: 10,
+                    boxShadow: "var(--srte-menu-shadow)",
+                    padding: 10,
+                }, onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        onDismiss();
+                    }
+                }, children: [_jsxs("div", { style: { fontSize: 12, marginBottom: 8, display: "grid", gap: 2, opacity: 0.85 }, children: [_jsxs("div", { children: [_jsx("strong", { children: "Alt text:" }), " ", alt || "(none)"] }), width && height && _jsxs("div", { children: [_jsx("strong", { children: "Size:" }), " ", Math.round(width), "\u00D7", Math.round(height)] }), src && _jsxs("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [_jsx("strong", { children: "Source:" }), " ", src] })] }), _jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [_jsx("button", { type: "button", style: buttonStyle, onClick: onEdit, children: "Edit" }), resizable && _jsx("button", { type: "button", style: buttonStyle, onClick: () => onResize(20), children: "Resize +" }), resizable && _jsx("button", { type: "button", style: buttonStyle, onClick: () => onResize(-20), children: "Resize \u03B2\u02C6\u2019" }), _jsx("button", { type: "button", style: { ...buttonStyle, color: "var(--srte-danger)", marginLeft: "auto" }, onClick: onDelete, children: "Delete" })] })] })] }));
+}

package/dist/components/SpecialCharacterPopover.d.ts

@@ -0,0 +1,18 @@
+export interface SpecialCharacterPopoverProps {
+    x: number;
+    y: number;
+    /** Up to 8 previously-inserted characters, most-recent first - same recency pattern as ColorPickerPopover's recent colors. */
+    recentCharacters?: readonly string[];
+    onInsert: (char: string) => void;
+    onCancel: () => void;
+}
+/**
+ * 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 declare function SpecialCharacterPopover({ x, y, recentCharacters, onInsert, onCancel }: SpecialCharacterPopoverProps): import("react/jsx-runtime").JSX.Element;

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;