smartrte-react 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/components/ColorPickerPopover.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
 const HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 const normalizeHex = (value) => {
     if (!HEX_PATTERN.test(value))
@@ -138,7 +139,8 @@ export function ColorPickerPopover({ x, y, label, initialValue = "#000000", rece
         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 });
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
     }, [x, y]);
     const stage = (nextHsv) => {
         stagedRef.current = true;

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;

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.js

@@ -138,13 +138,13 @@ export function MediaManager(props) {
                                         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", { 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", { 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();
@@ -157,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: {
@@ -207,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",
@@ -215,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",

package/dist/components/MediaOverlay.d.ts

@@ -4,8 +4,14 @@ export interface MediaOverlayProps {
     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. */
+    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;
@@ -13,24 +19,9 @@ export interface MediaOverlayProps {
     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.
+ * 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, resizable, onEdit, onResize, onResizeTo, onDelete, onDismiss }: MediaOverlayProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1,5 +1,8 @@
 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",
@@ -11,35 +14,75 @@ const buttonStyle = {
     fontWeight: 500,
     fontSize: 13,
 };
-const HANDLE_SIZE = 12;
-const MIN_ATOM_SIZE = 24;
+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 };
+};
 /**
- * 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.
+ * 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, resizable = true, onEdit, onResize, onResizeTo, onDelete, onDismiss }) {
+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 handleRef = useRef(null);
-    const [placement, setPlacement] = useState(null);
-    const [handlePosition, setHandlePosition] = useState(null);
     const dragRef = useRef(null);
+    const [placement, setPlacement] = useState(null);
+    const [bounds, setBounds] = useState(null);
     const [dragging, setDragging] = useState(false);
     useLayoutEffect(() => {
         const recompute = () => {
@@ -48,22 +91,37 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             const viewportWidth = atomElement.ownerDocument.defaultView?.innerWidth ?? 0;
             const viewportHeight = atomElement.ownerDocument.defaultView?.innerHeight ?? 0;
             const panelWidth = rootRef.current?.getBoundingClientRect().width ?? 260;
-            const left = Math.min(Math.max(margin, rect.left), Math.max(margin, viewportWidth - panelWidth - margin));
-            const overflowsBottom = rect.bottom + 6 + 120 > viewportHeight - margin;
-            const top = overflowsBottom ? Math.max(margin, rect.top - 6 - 120) : rect.bottom + 6;
-            setPlacement({ left, top });
-            setHandlePosition({ left: rect.right - HANDLE_SIZE / 2, top: rect.bottom - HANDLE_SIZE / 2 });
+            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]);
+    }, [atomElement, height, width, x, y]);
+    useEffect(() => {
+        if (showMenu && placement)
+            rootRef.current?.focus();
+    }, [placement, showMenu]);
     useEffect(() => {
         const ownerWindow = atomElement.ownerDocument.defaultView;
         if (!ownerWindow)
@@ -72,46 +130,45 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             const drag = dragRef.current;
             if (!drag)
                 return;
-            const delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
-            const liveWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
-            const liveHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
-            atomElement.style.width = `${liveWidth}px`;
-            atomElement.style.height = `${liveHeight}px`;
-            if (handleRef.current) {
-                const rect = atomElement.getBoundingClientRect();
-                handleRef.current.style.left = `${rect.right - HANDLE_SIZE / 2}px`;
-                handleRef.current.style.top = `${rect.bottom - HANDLE_SIZE / 2}px`;
-            }
+            const 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 delta = Math.max(event.clientX - drag.startClientX, event.clientY - drag.startClientY);
-            const finalWidth = Math.max(MIN_ATOM_SIZE, Math.round(drag.startWidth + delta));
-            const finalHeight = Math.max(MIN_ATOM_SIZE, Math.round(drag.startHeight + (delta * drag.startHeight) / drag.startWidth));
+            const dimensions = dimensionsForDrag(drag, event.clientX, event.clientY);
             dragRef.current = null;
             setDragging(false);
-            // Committing triggers the renderer's own re-render from authoritative
-            // model state, which overwrites the live-preview inline style above -
-            // same reasoning as TableResizeHandles.tsx's commit-on-release.
-            onResizeTo(finalWidth, finalHeight);
+            // 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) && target !== handleRef.current)
+            if (rootRef.current && !rootRef.current.contains(target) && !atomElement.contains(target) && !isResizeHandle)
                 onDismissRef.current();
         };
         window.addEventListener("pointerdown", dismissIfOutside, true);
@@ -120,31 +177,39 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
             window.removeEventListener("pointerdown", dismissIfOutside, true);
             window.removeEventListener("mousedown", dismissIfOutside, true);
         };
-    }, [atomElement]);
-    return (_jsxs(_Fragment, { children: [resizable && _jsx("div", { ref: handleRef, "data-srte-media-resize-handle": "true", role: "separator", "aria-orientation": "horizontal", "aria-label": "Resize media", onPointerDown: (event) => {
+    }, [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();
-                    const rect = atomElement.getBoundingClientRect();
-                    dragRef.current = { startClientX: event.clientX, startClientY: event.clientY, startWidth: rect.width, startHeight: rect.height };
+                    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",
-                    left: handlePosition?.left ?? 0,
-                    top: handlePosition?.top ?? 0,
-                    visibility: handlePosition ? "visible" : "hidden",
+                    visibility: "visible",
                     width: HANDLE_SIZE,
                     height: HANDLE_SIZE,
-                    borderRadius: "50%",
+                    boxSizing: "border-box",
+                    borderRadius: 3,
                     background: dragging ? "var(--srte-primary)" : "var(--srte-menu-bg)",
                     border: "2px solid var(--srte-primary)",
-                    cursor: "nwse-resize",
-                    zIndex: 71,
+                    cursor: cursorFor(direction),
+                    zIndex: 81,
                     touchAction: "none",
-                } }), _jsxs("div", { ref: rootRef, "data-srte-media-overlay": "true", role: "dialog", "aria-label": "Media actions", style: {
+                } }, 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 ?? 0,
-                    top: placement?.top ?? 0,
+                    left: placement?.left ?? x ?? 0,
+                    top: placement?.top ?? y ?? 0,
                     visibility: placement ? "visible" : "hidden",
-                    zIndex: 70,
+                    zIndex: 80,
                     width: 260,
                     maxWidth: "calc(100vw - 16px)",
                     boxSizing: "border-box",
@@ -159,5 +224,5 @@ export function MediaOverlay({ atomElement, alt, width, height, src, resizable =
                         event.preventDefault();
                         onDismiss();
                     }
-                }, children: [_jsxs("div", { style: { fontSize: 12, marginBottom: 8, display: "grid", gap: 2, opacity: 0.85 }, children: [_jsxs("div", { children: [_jsx("strong", { children: "Alt text:" }), " ", alt || "(none)"] }), width && height && _jsxs("div", { children: [_jsx("strong", { children: "Size:" }), " ", Math.round(width), "\u00D7", Math.round(height)] }), src && _jsxs("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [_jsx("strong", { children: "Source:" }), " ", src] })] }), _jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [_jsx("button", { type: "button", style: buttonStyle, onClick: onEdit, children: "Edit" }), resizable && _jsx("button", { type: "button", style: buttonStyle, onClick: () => onResize(20), children: "Resize +" }), resizable && _jsx("button", { type: "button", style: buttonStyle, onClick: () => onResize(-20), children: "Resize \u03B2\u02C6\u2019" }), _jsx("button", { type: "button", style: { ...buttonStyle, color: "var(--srte-danger)", marginLeft: "auto" }, onClick: onDelete, children: "Delete" })] })] })] }));
+                }, 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/TableBorderPopover.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ColorPickerPopover } from "./ColorPickerPopover.js";
+import { getFixedPositioningOrigin } from "./fixedPositioning.js";
 // Widths start at 2px, not 1px - table_cell's border-collapse table (see
 // theme.ts's th/td rule) already renders a 1px ambient default gridline on
 // every cell. A custom border tied at 1px loses CSS border-collapse's
@@ -75,7 +76,8 @@ export function TableBorderPopover({ x, y, initial, recentColors, onPreview, onA
         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 });
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
     }, [x, y]);
     useEffect(() => {
         const dismissIfOutside = (event) => {

package/dist/components/TableResizeHandles.js

@@ -134,6 +134,28 @@ export function TableResizeHandles({ tableElement, onResizeColumn, onResizeRow }
                 if (rowElement)
                     rowElement.style.height = `${target}px`;
                 const actualSize = rowElement ? Math.round(rowElement.getBoundingClientRect().height) : target;
+                // If the row below is already sitting at its own natural content
+                // floor right now, it never actually had this space to begin with
+                // - a *previous* down-drag on this same boundary that hit this
+                // row's floor grew the table's total instead of taking space from
+                // it (see docs/bugs/row-resize-blocked-when-every-row-is-at-its-
+                // floor.md), and that growth is real table height, not this row's
+                // slack. Handing it back to the row here would inflate a row that
+                // never gave anything up, and a user dragging the border back to
+                // where it started would find the table permanently bloated with
+                // no way back except Undo (docs/bugs/row-resize-round-trip-
+                // inflates-neighbor.md). Measure the row's own floor by
+                // temporarily clearing its inline height override; only
+                // redistribute into it when it's currently holding real slack
+                // above that floor.
+                if (nextRowElement) {
+                    const previousNextHeight = nextRowElement.style.height;
+                    nextRowElement.style.height = "";
+                    const nextFloor = Math.round(nextRowElement.getBoundingClientRect().height);
+                    nextRowElement.style.height = previousNextHeight;
+                    if (drag.nextStartSize <= nextFloor + 1)
+                        return { size: actualSize, nextSize: drag.nextStartSize };
+                }
                 return { size: actualSize, nextSize: Math.round(drag.nextStartSize - (actualSize - drag.startSize)) };
             }
             // Dragging down: the row below is asked to shrink to pay for the