smartrte-react 1.0.0-beta.8 → 1.1.0

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, getPositioningBounds } from "./fixedPositioning.js";
 const HEX_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 const normalizeHex = (value) => {
     if (!HEX_PATTERN.test(value))
@@ -130,15 +131,15 @@ export function ColorPickerPopover({ x, y, label, initialValue = "#000000", rece
             return;
         const margin = 8;
         const { width, height } = el.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const overflowsRight = x + width > viewportWidth - margin;
+        const bounds = getPositioningBounds(el);
+        const overflowsRight = x + width > bounds.right - 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 clampedLeft = Math.min(Math.max(bounds.left + margin, left), Math.max(bounds.left + margin, bounds.right - width - margin));
+        const overflowsBottom = y + height > bounds.bottom - 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 clampedTop = Math.min(Math.max(bounds.top + margin, top), Math.max(bounds.top + margin, bounds.bottom - margin));
+        const origin = getFixedPositioningOrigin(el);
+        setPlacement({ left: clampedLeft - origin.left, top: clampedTop - origin.top });
     }, [x, y]);
     const stage = (nextHsv) => {
         stagedRef.current = true;

package/dist/components/MediaOverlay.d.ts

@@ -10,6 +10,8 @@ export interface MediaOverlayProps {
     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;
@@ -22,4 +24,4 @@ export interface MediaOverlayProps {
  * 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, 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

@@ -78,7 +78,7 @@ const boundsForDirection = (bounds, direction) => {
  * 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, 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 dragRef = useRef(null);
     const [placement, setPlacement] = useState(null);
@@ -224,5 +224,5 @@ export function MediaOverlay({ atomElement, alt, width, height, src, x, y, showM
                         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, getPositioningBounds } 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
@@ -67,15 +68,15 @@ export function TableBorderPopover({ x, y, initial, recentColors, onPreview, onA
             return;
         const margin = 8;
         const { width, height } = el.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const overflowsRight = x + width > viewportWidth - margin;
+        const bounds = getPositioningBounds(el);
+        const overflowsRight = x + width > bounds.right - 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 clampedLeft = Math.min(Math.max(bounds.left + margin, left), Math.max(bounds.left + margin, bounds.right - width - margin));
+        const overflowsBottom = y + height > bounds.bottom - 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 clampedTop = Math.min(Math.max(bounds.top + margin, top), Math.max(bounds.top + margin, bounds.bottom - margin));
+        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

package/dist/components/ToolbarPrimitives.d.ts

@@ -60,10 +60,13 @@ export declare const toolbarIcons: {
     readonly undo: import("react/jsx-runtime").JSX.Element;
     readonly redo: import("react/jsx-runtime").JSX.Element;
     readonly more: import("react/jsx-runtime").JSX.Element;
+    readonly divider: import("react/jsx-runtime").JSX.Element;
+    readonly pageBreak: import("react/jsx-runtime").JSX.Element;
+    readonly lineHeight: import("react/jsx-runtime").JSX.Element;
 };
 export type ToolbarIconKey = keyof typeof toolbarIcons;
 /** A single always-visible toolbar control: icon + plain-language label together, per the redesign's core principle. */
-export declare function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote }: {
+export declare function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote, narrowIconOnly }: {
     icon: ToolbarIconKey;
     label: string;
     ariaLabel?: string;
@@ -81,6 +84,16 @@ export declare function ToolbarButton({ icon, label, ariaLabel, pressed, disable
      * docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md.
      */
     widePromote?: boolean;
+    /**
+     * Unlike `iconOnly` (always icon-only), this drops the label text only
+     * below theme.ts's 479px container-width breakpoint - the button shows
+     * icon + label at every wider width, matching every other always-visible
+     * button, and falls back to icon-only (title/aria-label still carry the
+     * name, so it stays a real tooltip) only once space is genuinely tight.
+     * A CSS-only toggle (see `[data-srte-narrow-icon-only]` in theme.ts), not
+     * JS viewport state, matching how every other responsive tier here works.
+     */
+    narrowIconOnly?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /** One row inside an open dropdown menu - closes the dropdown after acting, matching ContextMenu.tsx's own dismiss-on-action convention. */
 export declare function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disabled, title, onClick, widePromote }: {
@@ -110,9 +123,12 @@ export declare function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disab
  * anchored inside that container gets visually clipped the moment it needs
  * to extend past the container's own bounds, which is exactly when a
  * narrow host is most likely to need the dropdown in the first place.
- * `position: fixed`'s containing block is the viewport (barring an
- * ancestor with its own transform/filter, not the case here), so it always
- * escapes ANY ancestor's overflow clipping regardless of DOM depth.
+ * `position: fixed`'s containing block is normally the viewport, so this
+ * escapes ANY ancestor's overflow clipping regardless of DOM depth - unless
+ * an ancestor has its own transform/perspective/filter, which becomes the
+ * containing block instead (see fixedPositioning.ts, and
+ * docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md); the
+ * placement math below accounts for that case too.
  */
 export declare function ToolbarDropdown({ icon, label, priority, children }: {
     icon?: ToolbarIconKey;

package/dist/components/ToolbarPrimitives.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ALargeSmall, Baseline, Bold, CheckSquare, ChevronDown, Code, Columns3, Download, Eye, FileJson, History, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link2, ListChecks, ListOrdered, ListRestart, List as ListIcon, MessageSquare, MessageSquarePlus, MoreHorizontal, MoveDown, MoveLeft, MoveRight, MoveUp, Music, Omega, PanelTop, PenLine, Pilcrow, Quote, Redo2, Rows3, Square, Sigma, Strikethrough, Subscript, Superscript, Table2, Trash2, Type, Underline, Undo2, Unlink2, Upload, Video, Pencil, ZoomIn, ZoomOut, } from "lucide-react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, AlignVerticalSpaceAround, ALargeSmall, Baseline, Bold, CheckSquare, ChevronDown, Code, Columns3, Download, Eye, FileJson, History, Image as ImageIcon, IndentDecrease, IndentIncrease, Italic, Link2, ListChecks, ListOrdered, ListRestart, List as ListIcon, MessageSquare, MessageSquarePlus, MoreHorizontal, MoveDown, MoveLeft, MoveRight, MoveUp, Music, Omega, PanelTop, PenLine, Pilcrow, Quote, Redo2, Rows3, ScissorsLineDashed, SeparatorHorizontal, Square, Sigma, Strikethrough, Subscript, Superscript, Table2, Trash2, Type, Underline, Undo2, Unlink2, Upload, Video, Pencil, ZoomIn, ZoomOut, } from "lucide-react";
+import { getFixedPositioningOrigin, getPositioningBounds } from "./fixedPositioning.js";
 /**
  * The toolbar's icon set (Phase: Direction B toolbar redesign, 2026-08-29).
  * Lucide, per the design proposal's §11 recommendation - MIT-licensed,
@@ -74,10 +75,13 @@ export const toolbarIcons = {
     undo: _jsx(Undo2, { ...stroke }),
     redo: _jsx(Redo2, { ...stroke }),
     more: _jsx(MoreHorizontal, { ...stroke }),
+    divider: _jsx(SeparatorHorizontal, { ...stroke }),
+    pageBreak: _jsx(ScissorsLineDashed, { ...stroke }),
+    lineHeight: _jsx(AlignVerticalSpaceAround, { ...stroke }),
 };
 /** A single always-visible toolbar control: icon + plain-language label together, per the redesign's core principle. */
-export function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote }) {
-    return _jsxs("button", { type: "button", className: "srte-tool-button", "aria-label": ariaLabel ?? label, "aria-pressed": pressed, title: title ?? ariaLabel ?? label, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onClick, ...(widePromote ? { "data-srte-wide-promote": "true" } : {}), children: [toolbarIcons[icon], !iconOnly && _jsx("span", { children: label })] });
+export function ToolbarButton({ icon, label, ariaLabel, pressed, disabled, title, onClick, iconOnly, widePromote, narrowIconOnly }) {
+    return _jsxs("button", { type: "button", className: "srte-tool-button", "aria-label": ariaLabel ?? label, "aria-pressed": pressed, title: title ?? ariaLabel ?? label, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onClick, ...(widePromote ? { "data-srte-wide-promote": "true" } : {}), ...(narrowIconOnly ? { "data-srte-narrow-icon-only": "true" } : {}), children: [toolbarIcons[icon], !iconOnly && _jsx("span", { children: label })] });
 }
 /** One row inside an open dropdown menu - closes the dropdown after acting, matching ContextMenu.tsx's own dismiss-on-action convention. */
 export function ToolbarMenuItem({ icon, label, ariaLabel, pressed, disabled, title, onClick, widePromote }) {
@@ -128,9 +132,12 @@ const useDismissDetailsOnOutsideClick = (ref) => {
  * anchored inside that container gets visually clipped the moment it needs
  * to extend past the container's own bounds, which is exactly when a
  * narrow host is most likely to need the dropdown in the first place.
- * `position: fixed`'s containing block is the viewport (barring an
- * ancestor with its own transform/filter, not the case here), so it always
- * escapes ANY ancestor's overflow clipping regardless of DOM depth.
+ * `position: fixed`'s containing block is normally the viewport, so this
+ * escapes ANY ancestor's overflow clipping regardless of DOM depth - unless
+ * an ancestor has its own transform/perspective/filter, which becomes the
+ * containing block instead (see fixedPositioning.ts, and
+ * docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md); the
+ * placement math below accounts for that case too.
  */
 export function ToolbarDropdown({ icon, label, priority, children }) {
     const detailsRef = useRef(null);
@@ -150,12 +157,12 @@ export function ToolbarDropdown({ icon, label, priority, children }) {
             const menu = details.querySelector(":scope > .srte-menu");
             const menuWidth = menu?.offsetWidth ?? 210;
             const menuHeight = menu?.offsetHeight ?? 0;
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            const left = Math.min(Math.max(margin, triggerRect.left), Math.max(margin, viewportWidth - menuWidth - margin));
-            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
-            const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
-            setPlacement({ left, top });
+            const bounds = getPositioningBounds(details);
+            const left = Math.min(Math.max(bounds.left + margin, triggerRect.left), Math.max(bounds.left + margin, bounds.right - menuWidth - margin));
+            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > bounds.bottom - margin;
+            const top = overflowsBottom ? Math.max(bounds.top + margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
         };
         recompute();
         details.addEventListener("toggle", recompute);
@@ -207,18 +214,19 @@ export function MobileMoreMenu({ children }) {
             const margin = 8;
             const triggerRect = details.getBoundingClientRect();
             const menu = details.querySelector(":scope > .srte-menu");
-            const menuWidth = menu?.offsetWidth ?? Math.min(280, window.innerWidth - 16);
+            const bounds = getPositioningBounds(details);
+            const menuWidth = menu?.offsetWidth ?? Math.min(280, bounds.right - bounds.left - 16);
             const menuHeight = menu?.offsetHeight ?? 0;
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
             // Right-aligned to the trigger, matching this menu's original
-            // CSS-only `right: 0` intent - clamped into the viewport instead of
-            // being allowed to run off it or get clipped by an ancestor.
+            // CSS-only `right: 0` intent - clamped into the effective bounds
+            // instead of being allowed to run off them or get clipped by an
+            // ancestor.
             const preferredLeft = triggerRect.right - menuWidth;
-            const left = Math.min(Math.max(margin, preferredLeft), Math.max(margin, viewportWidth - menuWidth - margin));
-            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > viewportHeight - margin;
-            const top = overflowsBottom ? Math.max(margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
-            setPlacement({ left, top });
+            const left = Math.min(Math.max(bounds.left + margin, preferredLeft), Math.max(bounds.left + margin, bounds.right - menuWidth - margin));
+            const overflowsBottom = triggerRect.bottom + 6 + menuHeight > bounds.bottom - margin;
+            const top = overflowsBottom ? Math.max(bounds.top + margin, triggerRect.top - menuHeight - 6) : triggerRect.bottom + 6;
+            const origin = getFixedPositioningOrigin(details);
+            setPlacement({ left: left - origin.left, top: top - origin.top });
         };
         recompute();
         details.addEventListener("toggle", recompute);

package/dist/components/fixedPositioning.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Several unrelated CSS mechanisms make an ancestor the containing block for
+ * `position: fixed` descendants instead of the viewport, all covered here
+ * since any of them can appear independently on a real host page:
+ *
+ * - `transform`, `perspective`, `filter`, `backdrop-filter` (non-`none`), or
+ *   a `will-change` naming one of those (CSS Transforms' rendering model) -
+ *   most commonly a Radix/shadcn `Dialog`'s centering transform
+ *   (`translate-x-[-50%] translate-y-[-50%]`), confirmed live via a Sootr
+ *   host rendering the editor inside such a dialog
+ *   (docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md).
+ * - `translate`, `rotate`, `scale` (CSS Transforms Level 2's *independent*
+ *   transform properties, distinct from the legacy composite `transform`
+ *   property) - a FOURTH real Sootr dialog kept misplacing every dropdown
+ *   after all three fixes above shipped, still using the exact same
+ *   `translate-x-[-50%] translate-y-[-50%]` Tailwind centering classes the
+ *   very first fix (above) was written for - but a current Tailwind/browser
+ *   combination compiles those classes to the standalone `translate: -50%
+ *   -50%` CSS property, not `transform: translate(-50%, -50%)`. Confirmed
+ *   directly in real Chromium: an ancestor with only `translate` set (its
+ *   own computed `transform` reads `none`) still fully establishes a
+ *   `position: fixed` containing block, per the CSS Transforms Level 2
+ *   spec - the original fix's own doc comment described the right *symptom*
+ *   (a Radix/shadcn Dialog's centering translate) but checked the wrong
+ *   *property* for it, because at the time it was written the transform
+ *   ended up composited into `transform` rather than emitted as `translate`
+ *   directly. Both are checked now, since either can appear depending on
+ *   the host's exact Tailwind/browser version.
+ * - `contain: layout | paint | strict | content` (CSS Containment) - a
+ *   common perf/isolation optimization on large scrollable containers, e.g.
+ *   a second, different Sootr dialog reported still misplacing every
+ *   toolbar dropdown ("More list tools", "More to insert", "Save a copy",
+ *   "More text styles") despite already running the transform-only fix
+ *   above. `layout` alone (without `paint`) was missed in that first pass -
+ *   only checked for `paint`/`strict`/`content` - and confirmed directly in
+ *   real Chromium to establish the containing block on its own regardless:
+ *   a `position: fixed` descendant of a bare `contain: layout` ancestor (no
+ *   transform, no paint) resolves its `top`/`left` against that ancestor's
+ *   box, not the viewport. A THIRD Sootr dialog using exactly this
+ *   (`contain: layout`, no `paint`) reported the same misplacement symptom
+ *   again - not a clipping/invisibility symptom (see `getPositioningBounds`
+ *   below for that distinct failure mode), just landing in the wrong place
+ *   with no error, since the previous check silently treated this ancestor
+ *   as if it weren't a containing block at all and fell through to
+ *   `{ left: 0, top: 0 }` (viewport-relative) origin math instead.
+ *
+ *   Deliberately NOT checking bare `container-type` (CSS Containers) -
+ *   despite implying `contain: layout style` per spec, verified directly in
+ *   real Chromium that `container-type: inline-size` alone does *not* make
+ *   an ancestor a `position: fixed` containing block in practice (a
+ *   position already correctly computed without any special-casing stayed
+ *   correct; adding a check for it actively broke that same case). Only
+ *   `contain` itself is checked, matching what's actually verified to
+ *   matter, not everything that could theoretically imply it.
+ *
+ * When any of these apply, `left`/`top` set on a fixed-positioned menu/
+ * popover are resolved against that ancestor's border box instead of the
+ * viewport, silently producing coordinates that are internally consistent
+ * but land far from the trigger with no error.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of any of the above, so every placement calculation in this
+ * codebase computes coordinates in viewport space first, then subtracts
+ * this origin - the real containing block's own viewport-relative top-left -
+ * so the applied `left`/`top` land correctly under any containing block.
+ */
+export declare function findFixedPositioningContainer(el: HTMLElement): HTMLElement | null;
+export declare function getFixedPositioningOrigin(el: HTMLElement): {
+    left: number;
+    top: number;
+};
+/**
+ * Correcting the coordinate origin (above) is only half the fix - every
+ * overlay in this codebase also clamps its own placement so a menu never
+ * renders off-screen, and every one of those clamps was computed against
+ * `window.innerWidth`/`innerHeight`, the *full browser viewport*. That's
+ * wrong when the containing-block ancestor is one with `contain: paint`
+ * (or `strict`/`content`): CSS guarantees nothing painted by a descendant -
+ * including a `position: fixed` one whose containing block it is - can
+ * ever be visible outside that ancestor's own border box, no matter what
+ * `left`/`top` says. Reported live: a toolbar dropdown near the middle of
+ * a `contain: paint` dialog rendered hugging the dialog's own right edge
+ * (barely fit), and one further right ("More to insert") was positioned
+ * entirely outside the dialog's box and so never painted at all - both
+ * fully explained by clamping against the wide browser window instead of
+ * the actual, much narrower, clipping ancestor.
+ *
+ * Deliberately NOT applied for a containing block established only by
+ * `transform`/`translate`/`rotate`/`scale`/`perspective`/`filter`/
+ * `backdrop-filter`/`will-change`, or by `contain: layout` with no
+ * `paint`/`strict`/`content` alongside it - none
+ * of those clip overflow (`layout` containment only isolates layout
+ * calculations, it does not imply paint containment - see the spec note
+ * above `findFixedPositioningContainer`), so a menu is free to visually
+ * extend past that ancestor's box exactly as it could before any of this
+ * positioning logic existed. Verified directly: constraining
+ * to such an ancestor's bounds regardless made a mobile "More tools" menu
+ * genuinely too tall to fit inside a short transformed host overlap its
+ * own trigger instead of just extending past the host's edge (harmless,
+ * since nothing there clips it) - a real regression from being too
+ * conservative, not a fix.
+ */
+export declare function getPositioningBounds(el: HTMLElement): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/dist/components/fixedPositioning.js

@@ -0,0 +1,139 @@
+/**
+ * Several unrelated CSS mechanisms make an ancestor the containing block for
+ * `position: fixed` descendants instead of the viewport, all covered here
+ * since any of them can appear independently on a real host page:
+ *
+ * - `transform`, `perspective`, `filter`, `backdrop-filter` (non-`none`), or
+ *   a `will-change` naming one of those (CSS Transforms' rendering model) -
+ *   most commonly a Radix/shadcn `Dialog`'s centering transform
+ *   (`translate-x-[-50%] translate-y-[-50%]`), confirmed live via a Sootr
+ *   host rendering the editor inside such a dialog
+ *   (docs/bugs/toolbar-menu-misplaced-inside-transformed-ancestor.md).
+ * - `translate`, `rotate`, `scale` (CSS Transforms Level 2's *independent*
+ *   transform properties, distinct from the legacy composite `transform`
+ *   property) - a FOURTH real Sootr dialog kept misplacing every dropdown
+ *   after all three fixes above shipped, still using the exact same
+ *   `translate-x-[-50%] translate-y-[-50%]` Tailwind centering classes the
+ *   very first fix (above) was written for - but a current Tailwind/browser
+ *   combination compiles those classes to the standalone `translate: -50%
+ *   -50%` CSS property, not `transform: translate(-50%, -50%)`. Confirmed
+ *   directly in real Chromium: an ancestor with only `translate` set (its
+ *   own computed `transform` reads `none`) still fully establishes a
+ *   `position: fixed` containing block, per the CSS Transforms Level 2
+ *   spec - the original fix's own doc comment described the right *symptom*
+ *   (a Radix/shadcn Dialog's centering translate) but checked the wrong
+ *   *property* for it, because at the time it was written the transform
+ *   ended up composited into `transform` rather than emitted as `translate`
+ *   directly. Both are checked now, since either can appear depending on
+ *   the host's exact Tailwind/browser version.
+ * - `contain: layout | paint | strict | content` (CSS Containment) - a
+ *   common perf/isolation optimization on large scrollable containers, e.g.
+ *   a second, different Sootr dialog reported still misplacing every
+ *   toolbar dropdown ("More list tools", "More to insert", "Save a copy",
+ *   "More text styles") despite already running the transform-only fix
+ *   above. `layout` alone (without `paint`) was missed in that first pass -
+ *   only checked for `paint`/`strict`/`content` - and confirmed directly in
+ *   real Chromium to establish the containing block on its own regardless:
+ *   a `position: fixed` descendant of a bare `contain: layout` ancestor (no
+ *   transform, no paint) resolves its `top`/`left` against that ancestor's
+ *   box, not the viewport. A THIRD Sootr dialog using exactly this
+ *   (`contain: layout`, no `paint`) reported the same misplacement symptom
+ *   again - not a clipping/invisibility symptom (see `getPositioningBounds`
+ *   below for that distinct failure mode), just landing in the wrong place
+ *   with no error, since the previous check silently treated this ancestor
+ *   as if it weren't a containing block at all and fell through to
+ *   `{ left: 0, top: 0 }` (viewport-relative) origin math instead.
+ *
+ *   Deliberately NOT checking bare `container-type` (CSS Containers) -
+ *   despite implying `contain: layout style` per spec, verified directly in
+ *   real Chromium that `container-type: inline-size` alone does *not* make
+ *   an ancestor a `position: fixed` containing block in practice (a
+ *   position already correctly computed without any special-casing stayed
+ *   correct; adding a check for it actively broke that same case). Only
+ *   `contain` itself is checked, matching what's actually verified to
+ *   matter, not everything that could theoretically imply it.
+ *
+ * When any of these apply, `left`/`top` set on a fixed-positioned menu/
+ * popover are resolved against that ancestor's border box instead of the
+ * viewport, silently producing coordinates that are internally consistent
+ * but land far from the trigger with no error.
+ *
+ * `getBoundingClientRect()` always returns viewport-relative coordinates
+ * regardless of any of the above, so every placement calculation in this
+ * codebase computes coordinates in viewport space first, then subtracts
+ * this origin - the real containing block's own viewport-relative top-left -
+ * so the applied `left`/`top` land correctly under any containing block.
+ */
+export function findFixedPositioningContainer(el) {
+    let node = el.parentElement;
+    while (node) {
+        const style = window.getComputedStyle(node);
+        if ((style.transform && style.transform !== "none") ||
+            (style.translate && style.translate !== "none") ||
+            (style.rotate && style.rotate !== "none") ||
+            (style.scale && style.scale !== "none") ||
+            (style.perspective && style.perspective !== "none") ||
+            (style.filter && style.filter !== "none") ||
+            (style.backdropFilter && style.backdropFilter !== "none") ||
+            (style.willChange && /transform|perspective|filter|translate|rotate|scale/.test(style.willChange)) ||
+            (style.contain && /\b(layout|paint|strict|content)\b/.test(style.contain))) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+export function getFixedPositioningOrigin(el) {
+    const container = findFixedPositioningContainer(el);
+    if (!container)
+        return { left: 0, top: 0 };
+    const rect = container.getBoundingClientRect();
+    return { left: rect.left, top: rect.top };
+}
+/**
+ * Correcting the coordinate origin (above) is only half the fix - every
+ * overlay in this codebase also clamps its own placement so a menu never
+ * renders off-screen, and every one of those clamps was computed against
+ * `window.innerWidth`/`innerHeight`, the *full browser viewport*. That's
+ * wrong when the containing-block ancestor is one with `contain: paint`
+ * (or `strict`/`content`): CSS guarantees nothing painted by a descendant -
+ * including a `position: fixed` one whose containing block it is - can
+ * ever be visible outside that ancestor's own border box, no matter what
+ * `left`/`top` says. Reported live: a toolbar dropdown near the middle of
+ * a `contain: paint` dialog rendered hugging the dialog's own right edge
+ * (barely fit), and one further right ("More to insert") was positioned
+ * entirely outside the dialog's box and so never painted at all - both
+ * fully explained by clamping against the wide browser window instead of
+ * the actual, much narrower, clipping ancestor.
+ *
+ * Deliberately NOT applied for a containing block established only by
+ * `transform`/`translate`/`rotate`/`scale`/`perspective`/`filter`/
+ * `backdrop-filter`/`will-change`, or by `contain: layout` with no
+ * `paint`/`strict`/`content` alongside it - none
+ * of those clip overflow (`layout` containment only isolates layout
+ * calculations, it does not imply paint containment - see the spec note
+ * above `findFixedPositioningContainer`), so a menu is free to visually
+ * extend past that ancestor's box exactly as it could before any of this
+ * positioning logic existed. Verified directly: constraining
+ * to such an ancestor's bounds regardless made a mobile "More tools" menu
+ * genuinely too tall to fit inside a short transformed host overlap its
+ * own trigger instead of just extending past the host's edge (harmless,
+ * since nothing there clips it) - a real regression from being too
+ * conservative, not a fix.
+ */
+export function getPositioningBounds(el) {
+    const viewport = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    const container = findFixedPositioningContainer(el);
+    if (!container)
+        return viewport;
+    const containerStyle = window.getComputedStyle(container);
+    if (!containerStyle.contain || !/\b(paint|strict|content)\b/.test(containerStyle.contain))
+        return viewport;
+    const rect = container.getBoundingClientRect();
+    return {
+        left: Math.max(viewport.left, rect.left),
+        top: Math.max(viewport.top, rect.top),
+        right: Math.min(viewport.right, rect.right),
+        bottom: Math.min(viewport.bottom, rect.bottom),
+    };
+}