smartrte-react 0.3.5 → 1.0.0-beta.10

package/dist/components/MediaDetailsPopover.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { normalizeLinkInput } from "smartrte-core/legacy";
+const LICENSE_TYPE_PRESETS = ["CC BY", "CC BY-SA", "CC BY-ND", "CC BY-NC", "CC BY-NC-SA", "CC BY-NC-ND", "CC0 (Public Domain)", "All rights reserved"];
+const inputStyle = {
+    width: "100%", height: 34, boxSizing: "border-box", marginTop: 4, padding: "0 9px",
+    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,
+};
+const selectStyle = { ...inputStyle, cursor: "pointer" };
+const labelStyle = { display: "block", fontSize: 12, fontWeight: 600 };
+const buttonStyle = {
+    minHeight: 34, padding: "0 12px", 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 sectionHeaderStyle = {
+    fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", opacity: 0.7,
+    marginTop: 4, paddingTop: 10, borderTop: "1px solid var(--srte-border)",
+};
+const alignButton = (current, value, label, onClick) => (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": current === value, onClick: onClick, style: {
+        ...buttonStyle,
+        flex: 1,
+        minHeight: 32,
+        padding: 0,
+        background: current === value ? "var(--srte-accent-bg)" : "var(--srte-input-bg)",
+        borderColor: current === value ? "var(--srte-primary)" : "var(--srte-input-border)",
+        color: current === value ? "var(--srte-primary-pressed)" : "var(--srte-menu-text)",
+    }, children: label }, label));
+/**
+ * "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 function MediaDetailsPopover({ x, y, initial, onApply, onCancel }) {
+    const [draft, setDraft] = useState(initial);
+    const [licenseTypeCustom, setLicenseTypeCustom] = useState(!!initial.licenseType && !LICENSE_TYPE_PRESETS.includes(initial.licenseType));
+    const [error, setError] = 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 ? Math.max(margin, y - height) : y;
+        const clampedTop = Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - height - margin));
+        setPlacement({ left: clampedLeft, top: clampedTop });
+    }, [x, y]);
+    useEffect(() => {
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            const elementTarget = target instanceof Element ? target : target.parentElement;
+            // Resize handles live outside this dialog and must receive their own
+            // pointer gesture without the editor closing on the first pointerdown.
+            if (elementTarget?.closest("[data-srte-media-resize-handle-direction]"))
+                return;
+            if (!rootRef.current?.contains(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 update = (patch) => setDraft((current) => ({ ...current, ...patch }));
+    const apply = () => {
+        if (!draft.alt.trim()) {
+            setError("Enter alt text.");
+            return;
+        }
+        const trimmedHref = draft.href.trim();
+        if (!trimmedHref) {
+            onApply({ ...draft, href: "" });
+            return;
+        }
+        const normalized = normalizeLinkInput(trimmedHref);
+        if (!normalized.href) {
+            setError("Enter a safe, valid web URL, email address, phone number, or page anchor for the link, or clear it.");
+            return;
+        }
+        onApply({ ...draft, href: normalized.href });
+    };
+    return (_jsxs("div", { ref: rootRef, "data-srte-media-details-popover": "true", role: "dialog", "aria-label": "Media details", style: {
+            position: "fixed",
+            left: placement?.left ?? x,
+            top: placement?.top ?? y,
+            visibility: placement ? "visible" : "hidden",
+            zIndex: 72,
+            width: 320,
+            maxWidth: "calc(100vw - 16px)",
+            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: 12,
+            boxShadow: "var(--srte-menu-shadow)",
+            padding: 14,
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [_jsx("div", { style: { fontWeight: 650 }, children: "Media details" }), _jsx("button", { type: "button", "aria-label": "Close media details", onClick: onCancel, style: { ...buttonStyle, minWidth: 26, minHeight: 26, padding: 0, border: 0, background: "transparent", fontSize: 18 }, children: "\u00D7" })] }), _jsxs("label", { style: labelStyle, children: ["Alt text", _jsx("input", { "data-srte-media-alt-input": "true", value: draft.alt, onChange: (event) => { update({ alt: event.target.value }); setError(""); }, style: { ...inputStyle, borderColor: error ? "var(--srte-danger)" : "var(--srte-input-border)" } })] }), error && _jsx("div", { role: "alert", style: { color: "var(--srte-danger)", fontSize: 12 }, children: error }), _jsxs("label", { style: labelStyle, children: ["Link", _jsx("input", { "data-srte-media-href-input": "true", value: draft.href, placeholder: "Paste a URL", inputMode: "url", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, onChange: (event) => { update({ href: event.target.value }); setError(""); }, style: { ...inputStyle, borderColor: error ? "var(--srte-danger)" : "var(--srte-input-border)" } })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, cursor: "pointer" }, children: [_jsx("input", { "data-srte-media-new-tab-input": "true", type: "checkbox", checked: draft.openInNewTab, disabled: !draft.href.trim(), onChange: (event) => update({ openInNewTab: event.target.checked }) }), "Open in a new tab"] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs("label", { style: { ...labelStyle, flex: 1 }, children: ["Width (px)", _jsx("input", { "data-srte-media-width-input": "true", type: "number", min: 16, value: draft.width ?? "", onChange: (event) => update({ width: event.target.value === "" ? undefined : Math.max(16, Number(event.target.value)) }), style: inputStyle })] }), _jsxs("label", { style: { ...labelStyle, flex: 1 }, children: ["Corner radius (px)", _jsx("input", { "data-srte-media-radius-input": "true", type: "number", min: 0, value: draft.borderRadius ?? "", onChange: (event) => update({ borderRadius: event.target.value === "" ? undefined : Math.max(0, Number(event.target.value)) }), style: inputStyle })] })] }), _jsxs("div", { style: labelStyle, children: ["Align", _jsxs("div", { style: { display: "flex", gap: 6, marginTop: 4 }, children: [alignButton(draft.align, undefined, "None", () => update({ align: undefined })), alignButton(draft.align, "left", "Left", () => update({ align: "left" })), alignButton(draft.align, "center", "Center", () => update({ align: "center" })), alignButton(draft.align, "right", "Right", () => update({ align: "right" }))] })] }), _jsx("div", { style: sectionHeaderStyle, children: "License" }), _jsxs("label", { style: labelStyle, children: ["Description", _jsx("input", { "data-srte-media-license-description-input": "true", value: draft.licenseDescription, onChange: (event) => update({ licenseDescription: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Source URL", _jsx("input", { "data-srte-media-license-source-input": "true", value: draft.licenseSourceUrl, onChange: (event) => update({ licenseSourceUrl: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Type", _jsxs("select", { "data-srte-media-license-type-select": "true", value: licenseTypeCustom ? "custom" : draft.licenseType, onChange: (event) => {
+                            if (event.target.value === "custom") {
+                                setLicenseTypeCustom(true);
+                                return;
+                            }
+                            setLicenseTypeCustom(false);
+                            update({ licenseType: event.target.value });
+                        }, style: selectStyle, children: [_jsx("option", { value: "", children: "(none)" }), LICENSE_TYPE_PRESETS.map((preset) => _jsx("option", { value: preset, children: preset }, preset)), _jsx("option", { value: "custom", children: "Custom\u2026" })] }), licenseTypeCustom && (_jsx("input", { "data-srte-media-license-type-custom-input": "true", value: draft.licenseType, placeholder: "License type", onChange: (event) => update({ licenseType: event.target.value }), style: inputStyle }))] }), _jsxs("label", { style: labelStyle, children: ["Version", _jsx("input", { "data-srte-media-license-version-input": "true", value: draft.licenseVersion, onChange: (event) => update({ licenseVersion: event.target.value }), style: inputStyle })] }), _jsxs("label", { style: labelStyle, children: ["Attribution", _jsx("input", { "data-srte-media-license-attribution-input": "true", value: draft.licenseAttribution, onChange: (event) => update({ licenseAttribution: event.target.value }), style: inputStyle })] }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 7, marginTop: 4 }, children: [_jsx("button", { type: "button", onClick: onCancel, style: buttonStyle, children: "Cancel" }), _jsx("button", { type: "button", onClick: apply, style: { ...buttonStyle, borderColor: "var(--srte-primary)", background: "var(--srte-primary)", color: "var(--srte-on-primary)" }, children: "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)",
+                                        background: activeTab === "upload" ? "var(--srte-muted)" : "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)",
+                                        background: activeTab === "library" ? "var(--srte-muted)" : "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();
@@ -138,7 +157,7 @@ export function MediaManager(props) {
                                 padding: 24,
                                 textAlign: "center",
                                 color: "var(--srte-text-muted)",
-                                background: "var(--srte-surface-subtle)",
+                                background: "var(--srte-muted)",
                                 cursor: uploading ? "default" : "pointer",
                                 opacity: uploading ? 0.7 : 1,
                             }, children: uploading ? "Uploading…" : "Click or drag images to upload" })] })) : (_jsxs("div", { style: {
@@ -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,
@@ -188,7 +207,7 @@ export function MediaManager(props) {
                                                     height: 24,
                                                     border: "1px solid var(--srte-border)",
                                                     borderRadius: 999,
-                                                    background: "var(--srte-surface-subtle)",
+                                                    background: "var(--srte-muted)",
                                                     color: "var(--srte-input-text)",
                                                     cursor: "pointer",
                                                     flex: "0 0 auto",
@@ -196,7 +215,7 @@ export function MediaManager(props) {
                                                 fontSize: 10,
                                                 padding: "1px 5px",
                                                 borderRadius: 999,
-                                                background: "var(--srte-surface-subtle)",
+                                                background: "var(--srte-muted)",
                                                 color: "var(--srte-text-muted)",
                                             }, children: tag }, tag))) }))] }, it.id || it.url))) })] })), infoItem && (_jsx("div", { style: {
                         position: "fixed",
@@ -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,27 @@
+export interface MediaOverlayProps {
+    atomElement: HTMLElement;
+    alt: string;
+    width?: number;
+    height?: number;
+    src?: string;
+    x?: number;
+    y?: number;
+    /** Render only the handles when the media details editor owns the interaction surface. */
+    showMenu?: boolean;
+    /** False for atoms with no width/height concept (e.g. formula, sized by KaTeX from source/font-size) - hides resize controls and handles, keeping Edit/Delete. */
+    resizable?: boolean;
+    /** False for atoms with no editable fields at all (divider, page break) - hides the Alt/Size/Source info block and the Edit button, keeping only Delete. */
+    editable?: boolean;
+    onEdit: () => void;
+    onResize: (by: number) => void;
+    onResizeTo: (width: number, height: number) => void;
+    onDelete: () => void;
+    onDismiss: () => void;
+}
+/**
+ * Media resize handles stay anchored to the selected media element and
+ * preview size changes live, committing one canonical resize operation when
+ * the pointer is released. The quick-action menu is optional because image
+ * right-clicks use MediaDetailsPopover directly.
+ */
+export declare function MediaOverlay({ atomElement, alt, width, height, src, x, y, showMenu, resizable, editable, onEdit, onResize, onResizeTo, onDelete, onDismiss }: MediaOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaOverlay.js

@@ -0,0 +1,228 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+const RESIZE_DIRECTIONS = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+const HANDLE_SIZE = 10;
+const MIN_ATOM_SIZE = 24;
+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 cursorFor = (direction) => {
+    if (direction === "n" || direction === "s")
+        return "ns-resize";
+    if (direction === "e" || direction === "w")
+        return "ew-resize";
+    return direction === "ne" || direction === "sw" ? "nesw-resize" : "nwse-resize";
+};
+const isCorner = (direction) => direction.length === 2;
+const visibleBoundsFor = (atomElement, modelWidth, modelHeight) => {
+    const rect = atomElement.getBoundingClientRect();
+    const editorElement = atomElement.closest(".srte-editor");
+    const editorRect = editorElement?.getBoundingClientRect();
+    const inset = HANDLE_SIZE / 2;
+    // Broken or still-loading images can expose only a tiny fallback box.
+    // Use the canonical dimensions for that case, but use the real rendered
+    // dimensions whenever the image has a meaningful layout box.
+    const imageWidth = rect.width >= MIN_ATOM_SIZE ? rect.width : modelWidth && modelWidth >= MIN_ATOM_SIZE ? modelWidth : rect.width;
+    const imageHeight = rect.height >= MIN_ATOM_SIZE ? rect.height : modelHeight && modelHeight >= MIN_ATOM_SIZE ? modelHeight : rect.height;
+    const left = Math.max(rect.left, editorRect ? editorRect.left + inset : rect.left);
+    const top = Math.max(rect.top, editorRect ? editorRect.top + inset : rect.top);
+    const right = Math.min(rect.left + imageWidth, editorRect ? editorRect.right - inset : rect.left + imageWidth);
+    const bottom = Math.min(rect.top + imageHeight, editorRect ? editorRect.bottom - inset : rect.top + imageHeight);
+    if (right <= left || bottom <= top)
+        return null;
+    return { left, top, width: right - left, height: bottom - top };
+};
+const dimensionsForDrag = (drag, clientX, clientY) => {
+    const deltaX = clientX - drag.startClientX;
+    const deltaY = clientY - drag.startClientY;
+    const widthDelta = drag.direction.includes("e") ? deltaX : drag.direction.includes("w") ? -deltaX : 0;
+    const heightDelta = drag.direction.includes("s") ? deltaY : drag.direction.includes("n") ? -deltaY : 0;
+    if (!isCorner(drag.direction)) {
+        return {
+            width: Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + widthDelta)),
+            height: Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + heightDelta)),
+        };
+    }
+    // Corner handles keep the same aspect ratio as the current image. Use the
+    // axis with the larger proportional movement so dragging either diagonal
+    // direction feels natural, including when one pointer axis barely moves.
+    const widthScale = (drag.startWidth + widthDelta) / drag.startWidth;
+    const heightScale = (drag.startHeight + heightDelta) / drag.startHeight;
+    const scale = Math.max(MIN_ATOM_SIZE / drag.startWidth, MIN_ATOM_SIZE / drag.startHeight, Math.abs(widthDelta / drag.startWidth) >= Math.abs(heightDelta / drag.startHeight) ? widthScale : heightScale);
+    return {
+        width: Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth * scale)),
+        height: Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight * scale)),
+    };
+};
+const boundsForDirection = (bounds, direction) => {
+    const half = HANDLE_SIZE / 2;
+    const centerX = bounds.left + bounds.width / 2 - half;
+    const centerY = bounds.top + bounds.height / 2 - half;
+    const right = bounds.left + bounds.width - half;
+    const bottom = bounds.top + bounds.height - half;
+    const left = direction.includes("w") ? bounds.left - half : direction.includes("e") ? right : centerX;
+    const top = direction.includes("n") ? bounds.top - half : direction.includes("s") ? bottom : centerY;
+    return { left, top };
+};
+/**
+ * Media resize handles stay anchored to the selected media element and
+ * preview size changes live, committing one canonical resize operation when
+ * the pointer is released. The quick-action menu is optional because image
+ * right-clicks use MediaDetailsPopover directly.
+ */
+export function MediaOverlay({ atomElement, alt, width, height, src, x, y, showMenu = true, resizable = true, editable = true, onEdit, onResize, onResizeTo, onDelete, onDismiss }) {
+    const rootRef = useRef(null);
+    const dragRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [bounds, setBounds] = useState(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 panelHeight = rootRef.current?.getBoundingClientRect().height ?? 160;
+            const preferredLeft = x ?? rect.left;
+            const preferredTop = y ?? rect.bottom + 6;
+            const left = preferredLeft + panelWidth > viewportWidth - margin ? preferredLeft - panelWidth : preferredLeft;
+            const top = preferredTop + panelHeight > viewportHeight - margin ? preferredTop - panelHeight : preferredTop;
+            setPlacement({
+                left: Math.min(Math.max(margin, left), Math.max(margin, viewportWidth - panelWidth - margin)),
+                top: Math.min(Math.max(margin, top), Math.max(margin, viewportHeight - panelHeight - margin)),
+            });
+            // Handles are fixed siblings of the contenteditable surface, so they
+            // do not inherit the editor's overflow clipping. Use the visible
+            // intersection with the editor viewport to keep every handle inside
+            // that boundary when a tall image extends below the scroll area.
+            setBounds(visibleBoundsFor(atomElement, width, height));
+        };
+        recompute();
+        const observer = new ResizeObserver(recompute);
+        observer.observe(atomElement);
+        const ownerWindow = atomElement.ownerDocument.defaultView;
+        ownerWindow?.addEventListener("scroll", recompute, true);
+        ownerWindow?.addEventListener("resize", recompute);
+        return () => {
+            observer.disconnect();
+            ownerWindow?.removeEventListener("scroll", recompute, true);
+            ownerWindow?.removeEventListener("resize", recompute);
+        };
+    }, [atomElement, height, width, x, y]);
+    useEffect(() => {
+        if (showMenu && placement)
+            rootRef.current?.focus();
+    }, [placement, showMenu]);
+    useEffect(() => {
+        const ownerWindow = atomElement.ownerDocument.defaultView;
+        if (!ownerWindow)
+            return;
+        const handleMove = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const dimensions = dimensionsForDrag(drag, event.clientX, event.clientY);
+            atomElement.style.width = `${dimensions.width}px`;
+            atomElement.style.height = `${dimensions.height}px`;
+            setBounds(visibleBoundsFor(atomElement));
+        };
+        const handleUp = (event) => {
+            const drag = dragRef.current;
+            if (!drag)
+                return;
+            const dimensions = dimensionsForDrag(drag, event.clientX, event.clientY);
+            dragRef.current = null;
+            setDragging(false);
+            // The model transaction below becomes authoritative. Clear the live
+            // preview first so a stale inline style cannot override later updates.
+            atomElement.style.removeProperty("width");
+            atomElement.style.removeProperty("height");
+            onResizeTo(dimensions.width, dimensions.height);
+        };
+        ownerWindow.addEventListener("pointermove", handleMove);
+        ownerWindow.addEventListener("pointerup", handleUp);
+        ownerWindow.addEventListener("pointercancel", handleUp);
+        return () => {
+            ownerWindow.removeEventListener("pointermove", handleMove);
+            ownerWindow.removeEventListener("pointerup", handleUp);
+            ownerWindow.removeEventListener("pointercancel", handleUp);
+        };
+    }, [atomElement, onResizeTo]);
+    const onDismissRef = useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    useEffect(() => {
+        if (!showMenu)
+            return;
+        const dismissIfOutside = (event) => {
+            const target = event.target;
+            const elementTarget = target instanceof Element ? target : target.parentElement;
+            const isResizeHandle = Boolean(elementTarget?.closest("[data-srte-media-resize-handle-direction]"));
+            if (dragRef.current)
+                return;
+            if (rootRef.current && !rootRef.current.contains(target) && !atomElement.contains(target) && !isResizeHandle)
+                onDismissRef.current();
+        };
+        window.addEventListener("pointerdown", dismissIfOutside, true);
+        window.addEventListener("mousedown", dismissIfOutside, true);
+        return () => {
+            window.removeEventListener("pointerdown", dismissIfOutside, true);
+            window.removeEventListener("mousedown", dismissIfOutside, true);
+        };
+    }, [atomElement, showMenu]);
+    return (_jsxs(_Fragment, { children: [resizable && bounds && RESIZE_DIRECTIONS.map((direction) => (_jsx("div", { "data-srte-media-resize-handle": "true", "data-srte-media-resize-handle-direction": direction, role: "separator", "aria-label": `Resize media ${direction}`, onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const startWidth = width && width >= MIN_ATOM_SIZE ? width : bounds.width;
+                    const startHeight = height && height >= MIN_ATOM_SIZE ? height : bounds.height;
+                    dragRef.current = {
+                        direction,
+                        startClientX: event.clientX,
+                        startClientY: event.clientY,
+                        startWidth,
+                        startHeight,
+                    };
+                    setDragging(true);
+                }, style: {
+                    ...boundsForDirection(bounds, direction),
+                    position: "fixed",
+                    visibility: "visible",
+                    width: HANDLE_SIZE,
+                    height: HANDLE_SIZE,
+                    boxSizing: "border-box",
+                    borderRadius: 3,
+                    background: dragging ? "var(--srte-primary)" : "var(--srte-menu-bg)",
+                    border: "2px solid var(--srte-primary)",
+                    cursor: cursorFor(direction),
+                    zIndex: 81,
+                    touchAction: "none",
+                } }, direction))), showMenu && _jsxs("div", { ref: rootRef, "data-srte-media-overlay": "true", role: "dialog", "aria-label": "Media actions", tabIndex: -1, style: {
+                    position: "fixed",
+                    left: placement?.left ?? x ?? 0,
+                    top: placement?.top ?? y ?? 0,
+                    visibility: placement ? "visible" : "hidden",
+                    zIndex: 80,
+                    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: [editable && _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: [editable && _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;