smartrte-react 0.3.5 → 1.0.0-beta.10

package/dist/components/CommentMarkers.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { resolveAnnotationRange } from "smartrte-core/foundation";
+/**
+ * Live inline markers for comment threads, following `TableResizeHandles`'
+ * precedent (Phase 12a §1.2 finding): comments need many simultaneous
+ * persistent anchors, not the single-instance overlay pattern the other
+ * popovers use, so this measures real DOM rects from the live document and
+ * re-measures via ResizeObserver/MutationObserver/scroll, exactly like that
+ * component's column/row handles do for table boundaries.
+ *
+ * A thread's range is resolved fresh on every recompute via
+ * `resolveAnnotationRange` (not cached) - it is the authoritative "is this
+ * thread still anchored to real content" check, matching every other
+ * AnnotationRange consumer. A thread whose range no longer resolves (fully
+ * orphaned - the content it anchored to is gone) renders nothing here; it
+ * still exists in `threads` for a host's thread-list UI to surface.
+ */
+export function CommentMarkers({ positions, mapping, containerElement, threads, activeThreadId, onSelectThread }) {
+    const [rects, setRects] = useState([]);
+    const [badges, setBadges] = useState([]);
+    const recompute = useCallback(() => {
+        if (!threads.length) {
+            setRects([]);
+            setBadges([]);
+            return;
+        }
+        const nextRects = [];
+        const nextBadges = [];
+        threads.forEach((thread) => {
+            const range = resolveAnnotationRange(thread.range, positions);
+            if (!range)
+                return;
+            const fromDom = mapping.posToDom(range.from);
+            const toDom = mapping.posToDom(range.to);
+            if (!fromDom || !toDom)
+                return;
+            const domRange = containerElement.ownerDocument.createRange();
+            try {
+                domRange.setStart(fromDom.node, fromDom.offset);
+                domRange.setEnd(toDom.node, toDom.offset);
+            }
+            catch {
+                return;
+            }
+            const clientRects = [...domRange.getClientRects()];
+            clientRects.forEach((rect) => {
+                nextRects.push({ threadId: thread.id, resolved: thread.resolved, left: rect.left, top: rect.top, width: rect.width, height: rect.height });
+            });
+            const anchor = clientRects[clientRects.length - 1] || domRange.getBoundingClientRect();
+            nextBadges.push({ threadId: thread.id, resolved: thread.resolved, replyCount: thread.replies.length, left: anchor.right, top: anchor.top });
+        });
+        setRects(nextRects);
+        setBadges(nextBadges);
+    }, [positions, mapping, containerElement, threads]);
+    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 (_jsxs("div", { "data-srte-comment-markers": "true", style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex: 55 }, children: [rects.map((rect, index) => (_jsx("div", { "data-srte-comment-highlight": rect.threadId, onPointerDown: () => onSelectThread(rect.threadId), style: {
+                    position: "fixed",
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                    height: rect.height,
+                    background: rect.resolved
+                        ? "var(--srte-comment-highlight-resolved, rgba(148, 148, 148, 0.18))"
+                        : activeThreadId === rect.threadId
+                            ? "var(--srte-comment-highlight-active, rgba(245, 180, 0, 0.55))"
+                            : "var(--srte-comment-highlight, rgba(245, 180, 0, 0.28))",
+                    cursor: "pointer",
+                    pointerEvents: "auto",
+                } }, `${rect.threadId}-${index}`))), badges.map((badge) => (_jsx("button", { type: "button", "aria-label": badge.resolved ? "Open resolved comment thread" : "Open comment thread", "data-srte-comment-badge": badge.threadId, onClick: () => onSelectThread(badge.threadId), style: {
+                    position: "fixed",
+                    left: badge.left + 4,
+                    top: badge.top - 4,
+                    minWidth: 16,
+                    height: 16,
+                    padding: "0 4px",
+                    borderRadius: 8,
+                    border: "1px solid var(--srte-border, #d0d0d0)",
+                    background: badge.resolved
+                        ? "var(--srte-comment-badge-resolved, #e3e3e3)"
+                        : activeThreadId === badge.threadId
+                            ? "var(--srte-primary)"
+                            : "var(--srte-comment-badge, #f5b400)",
+                    color: badge.resolved ? "#555" : "#1a1300",
+                    fontSize: 10,
+                    lineHeight: "14px",
+                    cursor: "pointer",
+                    pointerEvents: "auto",
+                }, children: badge.replyCount }, badge.threadId)))] }));
+}

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/MediaDetailsPopover.d.ts

@@ -0,0 +1,35 @@
+export type MediaAlign = "left" | "center" | "right" | undefined;
+export interface MediaDetailsDraft {
+    alt: string;
+    href: string;
+    openInNewTab: boolean;
+    width: number | undefined;
+    borderRadius: number | undefined;
+    align: MediaAlign;
+    licenseDescription: string;
+    licenseSourceUrl: string;
+    licenseType: string;
+    licenseVersion: string;
+    licenseAttribution: string;
+}
+export interface MediaDetailsPopoverProps {
+    x: number;
+    y: number;
+    initial: MediaDetailsDraft;
+    onApply: (draft: MediaDetailsDraft) => void;
+    onCancel: () => void;
+}
+/**
+ * "Media details" - replaces the crude window.prompt("Alt text") edit path
+ * (docs/bugs/media-details-old-editor-field-parity.md) with a real settings
+ * panel matching the old editor's own field set, following this project's
+ * established compact-popover pattern (position:fixed + JS-measured
+ * placement, Apply/Cancel commit - same shape as TableBorderPopover for a
+ * multi-field dialog like this one, rather than LinkEditorPopover's simpler
+ * live-Enter-to-apply form).
+ *
+ * Opened directly by an image's right-click interaction; the details panel
+ * is the image editing surface, while resize handles remain available
+ * independently around the selected image.
+ */
+export declare function MediaDetailsPopover({ x, y, initial, onApply, onCancel }: MediaDetailsPopoverProps): import("react/jsx-runtime").JSX.Element;