smartrte-react 0.3.5 → 1.0.0-beta.1

package/dist/components/CommentThreadPanel.d.ts

@@ -0,0 +1,26 @@
+import type { AnnotationRange, CommentThread } from "smartrte-core/foundation";
+export interface CommentThreadPanelProps {
+    open: boolean;
+    onClose: () => void;
+    threads: readonly CommentThread[];
+    activeThreadId: string | null;
+    onSelectThread: (id: string) => void;
+    /** Set when "Add comment" was just clicked against a valid, non-collapsed selection - renders a compose box for a brand-new thread. */
+    pendingRange: AnnotationRange | null;
+    onCreateThread: (text: string) => void;
+    onReply: (threadId: string, text: string) => void;
+    onResolve: (threadId: string, resolved: boolean) => void;
+    onDelete: (threadId: string) => void;
+    busyThreadId: string | null;
+}
+/**
+ * Docked side panel, not a blocking modal like `VersionHistoryPanel`/
+ * `MediaManager` - a comment thread is meant to be read and replied to
+ * while continuing to edit nearby, not a full-attention dialog. Threads
+ * whose range no longer resolves aren't distinguished here with a special
+ * flag (per `CommentThread`'s own doc comment, "orphaned" is derived, not
+ * stored) - a host wanting to visually flag them can cross-reference
+ * `CommentMarkers`' own resolution, which already only renders markers for
+ * threads that still resolve.
+ */
+export declare function CommentThreadPanel(props: CommentThreadPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CommentThreadPanel.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const formatTimestamp = (createdAt) => new Date(createdAt).toLocaleString();
+/**
+ * Docked side panel, not a blocking modal like `VersionHistoryPanel`/
+ * `MediaManager` - a comment thread is meant to be read and replied to
+ * while continuing to edit nearby, not a full-attention dialog. Threads
+ * whose range no longer resolves aren't distinguished here with a special
+ * flag (per `CommentThread`'s own doc comment, "orphaned" is derived, not
+ * stored) - a host wanting to visually flag them can cross-reference
+ * `CommentMarkers`' own resolution, which already only renders markers for
+ * threads that still resolve.
+ */
+export function CommentThreadPanel(props) {
+    const { open, onClose, threads, activeThreadId, onSelectThread, pendingRange, onCreateThread, onReply, onResolve, onDelete, busyThreadId } = props;
+    const [showResolved, setShowResolved] = useState(false);
+    const [draft, setDraft] = useState("");
+    const [replyDrafts, setReplyDrafts] = useState({});
+    if (!open)
+        return null;
+    const visible = threads.filter((thread) => showResolved || !thread.resolved);
+    const submitCompose = () => {
+        const text = draft.trim();
+        if (!text)
+            return;
+        onCreateThread(text);
+        setDraft("");
+    };
+    const submitReply = (threadId) => {
+        const text = (replyDrafts[threadId] || "").trim();
+        if (!text)
+            return;
+        onReply(threadId, text);
+        setReplyDrafts((current) => ({ ...current, [threadId]: "" }));
+    };
+    return (_jsxs("div", { role: "complementary", "aria-label": "Comments", "data-srte-comment-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: "Comments" }), _jsx("button", { type: "button", "aria-label": "Close comments", onClick: onClose, children: "\u2715" })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, padding: "8px 14px", fontSize: 13, color: "var(--srte-text-muted)", borderBottom: "1px solid var(--srte-border-light)" }, children: [_jsx("input", { type: "checkbox", checked: showResolved, onChange: (event) => setShowResolved(event.target.checked) }), "Show resolved"] }), pendingRange && (_jsxs("div", { "data-srte-comment-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: "Add a comment\u2026", rows: 3, 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", gap: 8, marginTop: 6 }, children: _jsx("button", { type: "button", "data-srte-comment-compose-submit": "true", disabled: !draft.trim(), onClick: submitCompose, children: "Comment" }) })] })), _jsxs("div", { style: { flex: 1, overflowY: "auto", padding: "0 14px 14px" }, children: [visible.length === 0 && _jsx("div", { style: { color: "var(--srte-text-muted)", padding: "12px 0" }, children: "No comments yet." }), visible.map((thread) => (_jsxs("div", { "data-srte-comment-thread": thread.id, onClick: () => onSelectThread(thread.id), style: {
+                            padding: "10px 0", borderBottom: "1px solid var(--srte-border-light)",
+                            opacity: thread.resolved ? 0.6 : 1,
+                            outline: activeThreadId === thread.id ? "2px solid var(--srte-primary)" : "none",
+                        }, children: [thread.replies.map((reply) => (_jsxs("div", { style: { marginBottom: 6 }, children: [_jsx("div", { style: { fontSize: 12, fontWeight: 600 }, children: reply.authorId }), _jsx("div", { style: { fontSize: 13, whiteSpace: "pre-wrap" }, children: reply.text }), _jsx("div", { style: { fontSize: 11, color: "var(--srte-text-muted)" }, children: formatTimestamp(reply.createdAt) })] }, reply.id))), _jsxs("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [_jsx("button", { type: "button", "data-srte-comment-resolve": thread.id, disabled: busyThreadId === thread.id, onClick: (event) => { event.stopPropagation(); onResolve(thread.id, !thread.resolved); }, children: thread.resolved ? "Reopen" : "Resolve" }), _jsx("button", { type: "button", "data-srte-comment-delete": thread.id, disabled: busyThreadId === thread.id, onClick: (event) => { event.stopPropagation(); onDelete(thread.id); }, style: { color: "var(--srte-danger)" }, children: "Delete" })] }), !thread.resolved && (_jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8 }, onClick: (event) => event.stopPropagation(), children: [_jsx("input", { value: replyDrafts[thread.id] || "", onChange: (event) => setReplyDrafts((current) => ({ ...current, [thread.id]: event.target.value })), onKeyDown: (event) => { if (event.key === "Enter")
+                                            submitReply(thread.id); }, placeholder: "Reply\u2026", style: { flex: 1, padding: "5px 7px", border: "1px solid var(--srte-border)", borderRadius: 6, background: "var(--srte-input-bg)", color: "var(--srte-input-text)" } }), _jsx("button", { type: "button", "data-srte-comment-reply-submit": thread.id, disabled: !(replyDrafts[thread.id] || "").trim(), onClick: () => submitReply(thread.id), children: "Reply" })] }))] }, thread.id)))] })] }));
+}

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    onSelect: () => void;
+    danger?: boolean;
+}
+export interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: readonly ContextMenuItem[];
+    onDismiss: () => void;
+}
+/**
+ * Phase 11.5 §2.3: a generic right-click menu, position-at-cursor and
+ * keyboard-dismissible following LinkEditorPopover/ColorPickerPopover's
+ * pattern - plus click-outside-to-close, which those two don't have but a
+ * native-context-menu-replacement genuinely needs (an accidental click
+ * elsewhere shouldn't leave it stuck open). Items are supplied by the
+ * caller (CanonicalAuthorityEditor's resolveContextMenuItems), which
+ * resolves the applicable plugin registry `contextMenu` contributions for
+ * the current scope - this component has no knowledge of commands/scopes.
+ */
+export declare function ContextMenu({ x, y, items, onDismiss }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ContextMenu.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+// A fixed cap, not just "whatever fits below the click point" - the menu's
+// item count has grown considerably (marks, table, media, cell colour,
+// link actions can all stack for one click), and a height that changes
+// with click position made the scroll behavior feel inconsistent. Still
+// clamped against the real available viewport space too (see placement
+// below), so it never overflows a genuinely short viewport.
+const MAX_MENU_HEIGHT = 400;
+const itemStyle = (danger) => ({
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    padding: "8px 10px",
+    border: 0,
+    borderRadius: 6,
+    background: "transparent",
+    color: danger ? "var(--srte-danger)" : "var(--srte-menu-text)",
+    cursor: "pointer",
+    font: "inherit",
+    fontSize: 13,
+    fontWeight: 500,
+});
+/**
+ * Phase 11.5 §2.3: a generic right-click menu, position-at-cursor and
+ * keyboard-dismissible following LinkEditorPopover/ColorPickerPopover's
+ * pattern - plus click-outside-to-close, which those two don't have but a
+ * native-context-menu-replacement genuinely needs (an accidental click
+ * elsewhere shouldn't leave it stuck open). Items are supplied by the
+ * caller (CanonicalAuthorityEditor's resolveContextMenuItems), which
+ * resolves the applicable plugin registry `contextMenu` contributions for
+ * the current scope - this component has no knowledge of commands/scopes.
+ */
+export function ContextMenu({ x, y, items, onDismiss }) {
+    const rootRef = useRef(null);
+    // Null until measured: the menu's real width/height depends on its
+    // content (item label lengths), not a fixed guess, so the final position
+    // - including whether to flip left/up to stay in the viewport - can only
+    // be computed after a first, invisible render exposes the real
+    // getBoundingClientRect(). Fixes both the viewport-overflow bug (the
+    // previous clamp math assumed a hardcoded 220px width that real labels
+    // like "Insert column right" can exceed) and gives scroll a real
+    // available-height number to clamp against.
+    const [placement, setPlacement] = useState(null);
+    // CanonicalAuthorityEditor passes a fresh onDismiss closure on every
+    // render (it re-renders on every editor subscribe tick, i.e. on every
+    // document/selection change - possible even while this menu is open, if
+    // the triggering right-click itself moved the caret). Reading through a
+    // ref - rather than depending on `onDismiss` in the effect below - keeps
+    // the outside-click listener mounted exactly once for this menu's
+    // lifetime, so a re-render can't create a window where the listener has
+    // been torn down and not yet reattached.
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const margin = 8;
+        const { width, height } = el.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Open leftward (menu's right edge at the click point) instead of the
+        // default rightward open when the default would overflow the right
+        // edge - never silently overflow.
+        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));
+        // Same flip for the bottom edge.
+        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));
+        // The smaller of the fixed cap and whatever space actually remains
+        // below wherever the menu opens - a menu taller than that scrolls
+        // internally instead of extending past the viewport OR growing
+        // without bound on a tall screen.
+        const maxHeight = Math.min(MAX_MENU_HEIGHT, viewportHeight - clampedTop - margin);
+        setPlacement({ left: clampedLeft, top: clampedTop, maxHeight });
+    }, [x, y, items.length]);
+    useEffect(() => {
+        if (!placement)
+            return;
+        const buttons = rootRef.current?.querySelectorAll("[role=menuitem]");
+        buttons?.[0]?.focus();
+    }, [placement]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            if (rootRef.current && !rootRef.current.contains(event.target))
+                onDismissRef.current();
+        };
+        // Both pointerdown and mousedown: pointerdown is the primary signal,
+        // but not every input path is guaranteed to dispatch PointerEvents in
+        // every embedding context - mousedown is the same "was this outside"
+        // check as a defense-in-depth fallback, not a second independent path.
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, []);
+    return (_jsxs("div", { ref: rootRef, "data-srte-context-menu": "true", role: "menu", "aria-label": "Editor actions", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            // Hidden (not unrendered) until the real size is measured and a
+            // final, in-viewport position is computed - unrendered would mean
+            // getBoundingClientRect() has nothing to measure; visible-but-
+            // unpositioned would flash at the wrong spot for a frame first.
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 80,
+            minWidth: 200,
+            maxWidth: "calc(100vw - 16px)",
+            maxHeight: placement ? placement.maxHeight : "calc(100vh - 16px)",
+            overflowY: "auto",
+            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: 6,
+        }, onKeyDown: (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                onDismiss();
+                return;
+            }
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp")
+                return;
+            event.preventDefault();
+            const buttons = Array.from(rootRef.current?.querySelectorAll("[role=menuitem]") || []);
+            if (!buttons.length)
+                return;
+            const currentIndex = buttons.indexOf(document.activeElement);
+            const nextIndex = event.key === "ArrowDown"
+                ? (currentIndex + 1) % buttons.length
+                : (currentIndex - 1 + buttons.length) % buttons.length;
+            buttons[nextIndex]?.focus();
+        }, children: [items.length === 0 && (_jsx("div", { style: { padding: "8px 10px", fontSize: 13, color: "var(--srte-menu-text)", opacity: 0.6 }, children: "No actions here" })), items.map((item) => (_jsx("button", { type: "button", role: "menuitem", "data-srte-context-menu-item": item.id, onClick: () => { item.onSelect(); onDismiss(); }, style: itemStyle(item.danger), children: item.label }, item.id)))] }));
+}

package/dist/components/FormulaLibraryPopover.d.ts

@@ -0,0 +1,16 @@
+import "katex/contrib/mhchem";
+import { type FormulaLibraryEntry } from "../formulaLibrary.js";
+export interface FormulaLibraryPopoverProps {
+    x: number;
+    y: number;
+    onInsert: (entry: FormulaLibraryEntry) => void;
+    onCancel: () => void;
+}
+/**
+ * Formula library popover ("Small" scope, 55 entries across 6 domains -
+ * see formulaLibrary.ts's own doc comment). Browsable by domain tab and
+ * searchable by name; each entry renders a real KaTeX preview (the same
+ * renderer the document itself uses) so the user sees exactly what they're
+ * about to insert, not a name they have to guess the shape of.
+ */
+export declare function FormulaLibraryPopover({ x, y, onInsert, onCancel }: FormulaLibraryPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormulaLibraryPopover.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import katex from "katex";
+// Registers \ce{...} for this popover's own chemistry-entry previews - see
+// the matching import's comment in core's surface/renderer.ts for why this
+// is needed once per katex module instance.
+import "katex/contrib/mhchem";
+import { FORMULA_DOMAINS, FORMULA_LIBRARY } from "../formulaLibrary.js";
+const renderPreview = (latex) => {
+    try {
+        return katex.renderToString(latex, { trust: false, strict: "error", throwOnError: true });
+    }
+    catch {
+        return latex;
+    }
+};
+/**
+ * Formula library popover ("Small" scope, 55 entries across 6 domains -
+ * see formulaLibrary.ts's own doc comment). Browsable by domain tab and
+ * searchable by name; each entry renders a real KaTeX preview (the same
+ * renderer the document itself uses) so the user sees exactly what they're
+ * about to insert, not a name they have to guess the shape of.
+ */
+export function FormulaLibraryPopover({ x, y, onInsert, onCancel }) {
+    const [domain, setDomain] = useState("all");
+    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 filtered = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return FORMULA_LIBRARY.filter((entry) => (domain === "all" || entry.domain === domain) && (!needle || entry.name.toLowerCase().includes(needle)));
+    }, [domain, query]);
+    return (_jsxs("div", { ref: rootRef, "data-srte-formula-library": "true", role: "dialog", "aria-label": "Formula library", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 70,
+            width: 420,
+            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: [_jsxs("div", { style: { padding: "12px 14px 8px", borderBottom: "1px solid var(--srte-border)" }, children: [_jsx("input", { "data-srte-formula-search": "true", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search formulas\u2026 (e.g. \u201Cquadratic\u201D)", "aria-label": "Search formulas", 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", { role: "tablist", "aria-label": "Formula domain", style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 10 }, children: [_jsx("button", { type: "button", role: "tab", "aria-selected": domain === "all", onMouseDown: (event) => event.preventDefault(), onClick: () => setDomain("all"), style: tabStyle(domain === "all"), children: "All" }), FORMULA_DOMAINS.map((entry) => (_jsx("button", { type: "button", role: "tab", "aria-selected": domain === entry.id, onMouseDown: (event) => event.preventDefault(), onClick: () => setDomain(entry.id), style: tabStyle(domain === entry.id), children: entry.label }, entry.id)))] })] }), _jsxs("div", { "data-srte-formula-grid": "true", style: {
+                    display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))", gap: 8,
+                    padding: 12, overflowY: "auto",
+                }, children: [filtered.length === 0 && (_jsxs("div", { style: { gridColumn: "1 / -1", fontSize: 13, color: "var(--srte-menu-text)", opacity: 0.7, padding: "12px 4px" }, children: ["No formulas match \u201C", query, "\u201D."] })), filtered.map((entry) => (_jsxs("button", { type: "button", "data-srte-formula-entry": entry.id, "aria-label": `Insert ${entry.name}`, title: entry.name, onMouseDown: (event) => event.preventDefault(), onClick: () => onInsert(entry), style: {
+                            display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
+                            border: "1px solid var(--srte-input-border)", borderRadius: 10, padding: "10px 8px",
+                            background: "var(--srte-input-bg)", cursor: "pointer", minHeight: 76,
+                        }, children: [_jsx("span", { "aria-hidden": "true", style: { fontSize: 14, lineHeight: 1.2, minHeight: 22, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", maxWidth: "100%" }, dangerouslySetInnerHTML: { __html: renderPreview(entry.latex) } }), _jsx("span", { style: { fontSize: 11, color: "var(--srte-menu-text)", opacity: 0.75, textAlign: "center" }, children: entry.name })] }, entry.id)))] })] }));
+}
+const tabStyle = (active) => ({
+    fontSize: 12, fontWeight: 600, padding: "5px 10px", borderRadius: 7, cursor: "pointer",
+    border: "1px solid " + (active ? "var(--srte-primary)" : "transparent"),
+    background: active ? "var(--srte-accent-bg)" : "transparent",
+    color: active ? "var(--srte-primary)" : "var(--srte-menu-text)",
+});

package/dist/components/LinkEditorPopover.d.ts

@@ -12,9 +12,11 @@ export interface LinkEditorPopoverProps {
     showTextInput?: boolean;
     showOpen?: boolean;
     showRemove?: boolean;
+    /** Defaults to true (the original toolbar-Link-button behavior: the user asked to edit, so jump straight to the href field). Pass false when the popover opened itself just because the caret entered a link - autofocusing there would steal focus from the editor on every ordinary click/caret-move, trapping the cursor the overlay exists specifically to avoid. */
+    autoFocus?: boolean;
     onApply: (value: LinkEditorApplyValue) => void;
     onOpen?: () => void;
     onRemove?: () => void;
     onCancel: () => void;
 }
-export declare function LinkEditorPopover({ x, y, initialHref, initialText, initialOpenInNewTab, showTextInput, showOpen, showRemove, onApply, onOpen, onRemove, onCancel, }: LinkEditorPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function LinkEditorPopover({ x, y, initialHref, initialText, initialOpenInNewTab, showTextInput, showOpen, showRemove, autoFocus, onApply, onOpen, onRemove, onCancel, }: LinkEditorPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/LinkEditorPopover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
-import { normalizeLinkInput } from "smartrte-core";
+import { normalizeLinkInput } from "smartrte-core/legacy";
 const inputStyle = {
     width: "100%",
     height: 36,
@@ -24,7 +24,7 @@ const buttonStyle = {
     cursor: "pointer",
     fontWeight: 500,
 };
-export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", initialOpenInNewTab = false, showTextInput = false, showOpen = false, showRemove = false, onApply, onOpen, onRemove, onCancel, }) {
+export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", initialOpenInNewTab = false, showTextInput = false, showOpen = false, showRemove = false, autoFocus = true, onApply, onOpen, onRemove, onCancel, }) {
     const [href, setHref] = useState(initialHref);
     const [text, setText] = useState(initialText);
     const [openInNewTab, setOpenInNewTab] = useState(initialOpenInNewTab);
@@ -33,8 +33,24 @@ export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", in
     const titleId = useId();
     const errorId = useId();
     useEffect(() => {
+        if (!autoFocus)
+            return;
         hrefRef.current?.focus();
         hrefRef.current?.select();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Escape must dismiss regardless of where focus actually is - when
+    // autoFocus is false (the auto-triggered case), focus deliberately stays
+    // on the editor, so the div's own onKeyDown below (which only fires while
+    // focus is inside the popover) would never see the keypress.
+    useEffect(() => {
+        const onWindowKeyDown = (event) => {
+            if (event.key === "Escape")
+                onCancel();
+        };
+        window.addEventListener("keydown", onWindowKeyDown);
+        return () => window.removeEventListener("keydown", onWindowKeyDown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const apply = () => {
         const normalized = normalizeLinkInput(href);
@@ -69,10 +85,10 @@ export function LinkEditorPopover({ x, y, initialHref = "", initialText = "", in
             boxShadow: "var(--srte-menu-shadow)",
             padding: 14,
         }, onKeyDown: (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                onCancel();
-            }
+            // Escape is handled by the window-level listener above (needs to
+            // work even when autoFocus=false and focus never entered the
+            // popover) - not duplicated here to avoid a double-dismiss when
+            // focus *is* inside.
             if (event.key === "Enter" && !event.shiftKey) {
                 event.preventDefault();
                 apply();

package/dist/components/MediaManager.d.ts

@@ -1,23 +1,5 @@
-export type MediaItem = {
-    id: string;
-    url: string;
-    width?: number;
-    height?: number;
-    sizeBytes?: number;
-    mimeType?: string;
-    hashHex?: string;
-    createdAt?: string;
-    title?: string;
-    alt?: string;
-    tags?: string[];
-    license?: {
-        author?: string;
-        licenseType?: string;
-        licenseText?: string;
-        sourceUrl?: string;
-        workName?: string;
-    };
-};
+import type { MediaItem } from "../mediaProvider.js";
+export type { MediaItem } from "../mediaProvider.js";
 export type MediaSearchQuery = {
     q?: string;
     tags?: string[];
@@ -29,6 +11,8 @@ export type MediaSearchQuery = {
 export type MediaManagerAdapter = {
     upload: (files: File[]) => Promise<MediaItem[]>;
     search: (query: MediaSearchQuery) => Promise<MediaItem[]>;
+    /** Optional - MediaProvider.remove exists but nothing here called it before Phase 11.5 §2.1. */
+    remove?: (id: string) => Promise<void>;
 };
 export declare function MediaManager(props: {
     open: boolean;

package/dist/components/MediaManager.js

@@ -8,6 +8,7 @@ export function MediaManager(props) {
     const [query, setQuery] = useState("");
     const [results, setResults] = useState([]);
     const [infoItem, setInfoItem] = useState(null);
+    const [removing, setRemoving] = useState(false);
     const fileInputRef = useRef(null);
     useEffect(() => {
         if (!open)
@@ -31,6 +32,24 @@ export function MediaManager(props) {
             setError("Failed to search media.");
         }
     };
+    /** Phase 11.5 §2.1: MediaProvider.remove already existed; nothing here ever called it. */
+    const handleRemove = async (item) => {
+        if (!adapter.remove)
+            return;
+        setRemoving(true);
+        setError(null);
+        try {
+            await adapter.remove(item.id);
+            setResults((current) => current.filter((entry) => entry.id !== item.id));
+            setInfoItem(null);
+        }
+        catch (e) {
+            setError("Failed to delete media.");
+        }
+        finally {
+            setRemoving(false);
+        }
+    };
     const computeSha256Hex = async (file) => {
         const buf = await file.arrayBuffer();
         const digest = await crypto.subtle.digest("SHA-256", buf);
@@ -99,7 +118,7 @@ export function MediaManager(props) {
             alignItems: "center",
             justifyContent: "center",
             zIndex: 80,
-        }, onClick: onClose, children: _jsxs("div", { style: {
+        }, onClick: onClose, children: _jsxs("div", { role: "dialog", "aria-label": "Media library", "data-srte-media-manager": "true", style: {
                 background: "var(--srte-modal-bg)",
                 color: "var(--srte-modal-text)",
                 width: 820,
@@ -115,19 +134,19 @@ export function MediaManager(props) {
                         justifyContent: "space-between",
                         padding: "10px 14px",
                         borderBottom: "1px solid var(--srte-border-light)",
-                    }, children: [_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("button", { onClick: () => setActiveTab("upload"), style: {
+                    }, children: [_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("button", { type: "button", onClick: () => setActiveTab("upload"), style: {
                                         padding: "6px 10px",
                                         borderRadius: 6,
                                         border: "1px solid var(--srte-border)",
                                         background: activeTab === "upload" ? "var(--srte-surface-subtle)" : "var(--srte-input-bg)",
                                         color: "var(--srte-input-text)",
-                                    }, children: "Upload" }), _jsx("button", { onClick: () => setActiveTab("library"), style: {
+                                    }, children: "Upload" }), _jsx("button", { type: "button", onClick: () => setActiveTab("library"), style: {
                                         padding: "6px 10px",
                                         borderRadius: 6,
                                         border: "1px solid var(--srte-border)",
                                         background: activeTab === "library" ? "var(--srte-surface-subtle)" : "var(--srte-input-bg)",
                                         color: "var(--srte-input-text)",
-                                    }, children: "Library" })] }), _jsx("button", { onClick: onClose, children: "\u2715" })] }), error && (_jsx("div", { style: { color: "var(--srte-danger)", padding: "8px 14px" }, children: error })), activeTab === "upload" ? (_jsxs("div", { style: { padding: 16 }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => handleUploadFiles(e.currentTarget.files) }), _jsx("div", { onClick: () => fileInputRef.current?.click(), onDragOver: (e) => {
+                                    }, children: "Library" })] }), _jsx("button", { type: "button", "aria-label": "Close media library", onClick: onClose, children: "\u2715" })] }), error && (_jsx("div", { style: { color: "var(--srte-danger)", padding: "8px 14px" }, children: error })), activeTab === "upload" ? (_jsxs("div", { style: { padding: 16 }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => handleUploadFiles(e.currentTarget.files) }), _jsx("div", { onClick: () => fileInputRef.current?.click(), onDragOver: (e) => {
                                 e.preventDefault();
                             }, onDrop: (e) => {
                                 e.preventDefault();
@@ -153,7 +172,7 @@ export function MediaManager(props) {
                                         borderRadius: 6,
                                         background: "var(--srte-input-bg)",
                                         color: "var(--srte-input-text)",
-                                    } }), _jsx("button", { onClick: performSearch, children: "Search" })] }), _jsx("div", { style: {
+                                    } }), _jsx("button", { type: "button", onClick: performSearch, children: "Search" })] }), _jsx("div", { style: {
                                 display: "grid",
                                 gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
                                 gap: 12,
@@ -223,10 +242,20 @@ export function MediaManager(props) {
                                 ["MIME type", infoItem.mimeType],
                                 ["Size", infoItem.sizeBytes ? `${Math.round(infoItem.sizeBytes / 1024)} KB` : undefined],
                                 ["Created", infoItem.createdAt],
+                                ["Used", infoItem.usageCount !== undefined ? `${infoItem.usageCount} time${infoItem.usageCount === 1 ? "" : "s"}` : undefined],
                                 ["Tags", infoItem.tags?.join(", ")],
                                 ["Work", infoItem.license?.workName],
                                 ["Author", infoItem.license?.author],
                                 ["License", [infoItem.license?.licenseType, infoItem.license?.licenseText].filter(Boolean).join(" - ")],
                                 ["Source", infoItem.license?.sourceUrl],
-                            ].filter(([, value]) => value).map(([label, value]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "92px 1fr", gap: 8, fontSize: 12, marginBottom: 6 }, children: [_jsx("div", { style: { color: "var(--srte-text-muted)" }, children: label }), _jsx("div", { style: { overflowWrap: "anywhere" }, children: value })] }, label)))] }) }))] }) }));
+                            ].filter(([, value]) => value).map(([label, value]) => (_jsxs("div", { style: { display: "grid", gridTemplateColumns: "92px 1fr", gap: 8, fontSize: 12, marginBottom: 6 }, children: [_jsx("div", { style: { color: "var(--srte-text-muted)" }, children: label }), _jsx("div", { style: { overflowWrap: "anywhere" }, children: value })] }, label))), adapter.remove && (_jsx("button", { type: "button", "data-srte-media-delete": "true", disabled: removing, onClick: () => void handleRemove(infoItem), style: {
+                                    marginTop: 8,
+                                    padding: "6px 12px",
+                                    borderRadius: 6,
+                                    border: "1px solid var(--srte-danger)",
+                                    background: "transparent",
+                                    color: "var(--srte-danger)",
+                                    cursor: removing ? "default" : "pointer",
+                                    opacity: removing ? 0.6 : 1,
+                                }, children: removing ? "Deleting…" : "Delete" }))] }) }))] }) }));
 }

package/dist/components/MediaOverlay.d.ts

@@ -0,0 +1,36 @@
+export interface MediaOverlayProps {
+    atomElement: HTMLElement;
+    alt: string;
+    width?: number;
+    height?: number;
+    src?: string;
+    /** False for atoms with no width/height concept (e.g. formula, sized by KaTeX from source/font-size) - hides the Resize +/- buttons and drag handle, keeping Edit/Delete. */
+    resizable?: boolean;
+    onEdit: () => void;
+    onResize: (by: number) => void;
+    onResizeTo: (width: number, height: number) => void;
+    onDelete: () => void;
+    onDismiss: () => void;
+}
+/**
+ * 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 declare function MediaOverlay({ atomElement, alt, width, height, src, resizable, onEdit, onResize, onResizeTo, onDelete, onDismiss }: MediaOverlayProps): import("react/jsx-runtime").JSX.Element;