smartrte-react 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/components/CanonicalAuthorityEditor.js

@@ -129,6 +129,17 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const [linkPopover, setLinkPopover] = useState(null);
     const [colorPopover, setColorPopover] = useState(null);
     const [recentColors, setRecentColors] = useState({ text: [], background: [], border: [] });
+    /**
+     * "Let both bullet and number list tool icon work as toggle and on click
+     * text should [adopt] respective preset list" - the plain Bulleted
+     * list/Numbered list buttons always applied a generic disc/decimal
+     * marker, ignoring whatever glyph preset (e.g. "❖ ➢ ■") the user had
+     * already picked from the "List preset" dropdown elsewhere in the same
+     * session. Session-only React state, matching recentColors' own
+     * documented "no localStorage" convention above - not persisted across
+     * reloads.
+     */
+    const [lastListPreset, setLastListPreset] = useState({ bullet: null, ordered: null });
     const [tableSizePopover, setTableSizePopover] = useState(null);
     const [tableBorderPopover, setTableBorderPopover] = useState(null);
     const [mediaDetailsPopover, setMediaDetailsPopover] = useState(null);
@@ -493,6 +504,13 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const currentListPreset = currentListParts.length === 1 && typeof rootList?.attrs?.preset === "string"
         ? rootList.attrs.preset
         : "";
+    // The Bulleted/Numbered list buttons' own split-control style pickers -
+    // scoped to one kind each, so unlike the shared "List preset" select above
+    // (which lists both kinds together) each only shows/reflects presets of
+    // its own kind, and reads as unset (native placeholder) when the active
+    // preset (if any) belongs to the other kind.
+    const currentBulletPreset = SMART_LIST_PRESETS.find((preset) => preset.id === currentListPreset)?.kind === "bullet" ? currentListPreset : "";
+    const currentOrderedPreset = SMART_LIST_PRESETS.find((preset) => preset.id === currentListPreset)?.kind === "ordered" ? currentListPreset : "";
     const toggleCheckedItems = () => {
         if (currentListScope.kind !== "list-selection" || currentList?.attrs?.checkable !== true)
             return;
@@ -540,17 +558,30 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const toggleList = (style, checkable = false) => {
         const selectedList = listScope();
         const context = blockContext();
+        // A checklist's marker is a checkbox, not a bullet/number glyph - never
+        // substitute a remembered preset for it. Otherwise, reapply whichever
+        // preset the user last picked from the "List preset" dropdown for this
+        // same kind (bullet/ordered), instead of always resetting to the
+        // generic disc/decimal marker - see lastListPreset's own doc comment.
+        // setListStyle's own params type has no `preset` field (it's a
+        // deliberately distinct command from setListPreset - see setListPreset
+        // itself clearing `style` and vice versa), so this is a real branch,
+        // not just a differently-shaped params object.
+        const rememberedPreset = checkable ? null : lastListPreset[style === "decimal" ? "ordered" : "bullet"];
         if (selectedList.kind === "list-selection") {
             const rootId = outermostListId(selectedList.listId);
             const list = findNode(runtime.editor.document, rootId);
             const sameStyle = listActiveKind(list) === (style === "decimal" ? "ordered" : "bullet") && Boolean(list?.attrs?.checkable) === checkable;
+            const target = { ...selectedList, listId: rootId };
             const operations = sameStyle
                 // Toggling an already-active style off is deliberately scoped to just
                 // the current item (selectedList), not the whole list.
                 ? unwrapList(runtime.editor.document, selectedList, { splitListIds: ids(4) }, context)
                 // Applying a genuinely different style/type is a whole-list decision
                 // regardless of how deep the cursor is nested.
-                : setListStyle(runtime.editor.document, { ...selectedList, listId: rootId }, { style, checkable }, context);
+                : rememberedPreset
+                    ? setListPreset(runtime.editor.document, target, { preset: rememberedPreset }, context)
+                    : setListStyle(runtime.editor.document, target, { style, checkable }, context);
             runtime.executeOperations(operations, { preserveSelectionById: true });
             return;
         }
@@ -560,9 +591,45 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         // per block, on top of one list per originally-flat contiguous group —
         // over-provision generously rather than compute the exact worst case.
         runtime.executeOperations(createList(runtime.editor.document, selectedBlocks, {
-            listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), style, checkable,
+            listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), checkable,
+            ...(rememberedPreset ? { preset: rememberedPreset } : { style }),
         }, context), { preserveSelectionById: true });
     };
+    /**
+     * The Bulleted/Numbered list buttons' own split-control style picker
+     * (a native `<select>`, not a custom-positioned dropdown - see the
+     * `.srte-split-control` styling) - lets the user choose a specific preset
+     * directly from the button itself, instead of only ever getting the
+     * plain/remembered default from a click and having to visit the separate
+     * "More list tools" menu to pick a named style. Applies to an existing
+     * list (whole-list, like the shared "List preset" select) or creates a
+     * brand-new list with that preset when nothing is selected yet - unlike
+     * that shared select, which only ever edits an already-existing list.
+     * Scope is resolved fresh here (not from the outer currentListScope/
+     * currentListParts consts) to match toggleList's own convention of
+     * re-resolving at click time rather than trusting a render-time snapshot.
+     */
+    const applyListPreset = (preset) => {
+        const pickedKind = SMART_LIST_PRESETS.find((candidate) => candidate.id === preset)?.kind;
+        const selectedList = listScope();
+        const context = blockContext();
+        if (selectedList.kind === "list-selection") {
+            const parts = listSelectionParts(selectedList);
+            if (parts.length !== 1)
+                return;
+            const rootId = outermostListId(parts[0].listId);
+            runtime.executeOperations(setListPreset(runtime.editor.document, { ...parts[0], listId: rootId }, { preset }, context), { preserveSelectionById: true });
+        }
+        else {
+            const selectedBlocks = blockScope();
+            const count = selectedBlocks.kind === "block-range" ? selectedBlocks.blockIds.length : 1;
+            runtime.executeOperations(createList(runtime.editor.document, selectedBlocks, {
+                listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), checkable: false, preset,
+            }, context), { preserveSelectionById: true });
+        }
+        if (pickedKind)
+            setLastListPreset((previous) => ({ ...previous, [pickedKind]: preset }));
+    };
     const runList = (action) => {
         const scope = listScope();
         const context = blockContext();
@@ -1517,6 +1584,9 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                 // the cursor is nested — see outermostListId.
                 const rootId = outermostListId(currentListParts[0].listId);
                 runtime.executeOperations(setListPreset(runtime.editor.document, { ...currentListParts[0], listId: rootId }, { preset }, blockContext()), { preserveSelectionById: true });
+                const pickedKind = SMART_LIST_PRESETS.find((candidate) => candidate.id === preset)?.kind;
+                if (pickedKind)
+                    setLastListPreset((previous) => ({ ...previous, [pickedKind]: preset }));
             }, style: { width: "100%" }, children: [_jsx("option", { value: "", children: "List preset" }), SMART_LIST_PRESETS.map((preset) => _jsx("option", { value: preset.id, children: preset.kind === "bullet" ? `Bullet · ${preset.label}` : `Number · ${preset.label}` }, preset.id))] }) });
     const listToolsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "checkSquare", label: "Check selected items", pressed: currentListScope.kind === "list-selection" && currentListScope.items.every((item) => findNode(runtime.editor.document, item.itemId)?.attrs?.checked === true), disabled: readOnly || currentList?.attrs?.checkable !== true, onClick: toggleCheckedItems }), _jsx(ToolbarMenuItem, { icon: "indent", label: "Indent list item", disabled: readOnly || !canIndent, onClick: () => runList("indent") }), _jsx(ToolbarMenuItem, { icon: "outdent", label: "Outdent list item", disabled: readOnly || currentListParts.length === 0, onClick: () => runList("outdent") }), _jsx(ToolbarMenuItem, { icon: "moveUp", label: "Move item up", disabled: readOnly || !canMoveUp, onClick: () => runList("up") }), _jsx(ToolbarMenuItem, { icon: "moveDown", label: "Move item down", disabled: readOnly || !canMoveDown, onClick: () => runList("down") }), _jsx(ToolbarMenuItem, { icon: "restart", label: "Restart numbering", disabled: readOnly || !orderedList, onClick: restartNumbering }), _jsx(ToolbarMenuItem, { icon: "continueNumbering", label: "Continue numbering", disabled: readOnly || !orderedList, onClick: () => runtime.executeOperations(continueListNumbering(runtime.editor.document, currentListScope, {}, blockContext()), { preserveSelectionById: true }) })] });
     // Remove link/Insert formula/Special characters also get a standalone
@@ -1560,10 +1630,12 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                                 } }), t.backgroundColor && _jsx(ToolbarButton, { icon: "backgroundColor", label: "Background colour", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "backgroundColor" }, initialValue: currentMarkColor("backgroundColor") });
-                                } }), t.fontSize && _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), showMoreTextStyles && _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.blockType && _jsxs("select", { "aria-label": "Block type", title: "Block type", value: currentBlockType, disabled: readOnly, onChange: (event) => transactBlock(setBlockTypeCommand(runtime.editor.document, blockScope(), {
+                                } }), t.fontSize && _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), showMoreTextStyles && _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.blockType && _jsxs("select", { className: "srte-block-type-select", "aria-label": "Block type", title: "Block type", value: currentBlockType, disabled: readOnly, onChange: (event) => transactBlock(setBlockTypeCommand(runtime.editor.document, blockScope(), {
                                     type: event.target.value === "paragraph" ? "paragraph" : event.target.value === "code_block" ? "code_block" : "heading",
                                     attrs: event.target.value.startsWith("heading-") ? { level: Number(event.target.value.slice(8)) } : {},
-                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.lineHeight && _jsx(ToolbarDropdown, { icon: "lineHeight", label: "Line spacing", priority: 2, children: lineHeightMenuItems }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && _jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, onClick: () => toggleList("disc") }), t.numberedList && _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, onClick: () => toggleList("decimal") }), t.checklist && _jsx(ToolbarButton, { icon: "checklist", label: "Checklist", ariaLabel: "Checklist", pressed: listStyleActive("disc", true), disabled: readOnly, onClick: () => toggleList("disc", true) }), _jsxs(ToolbarDropdown, { icon: "restart", label: "More list tools", priority: 2, children: [listPresetSelect, t.listPreset && _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [t.link && _jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly, onClick: openLinkPopover }), showImageTool && _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly, onClick: () => setMediaKind("image") }), t.removeLink && _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), t.insertFormula && _jsx(ToolbarButton, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
+                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.lineHeight && _jsx(ToolbarDropdown, { icon: "lineHeight", label: "Line spacing", priority: 2, children: lineHeightMenuItems }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") }), _jsxs("select", { "aria-label": "Bulleted list style", title: "Bulleted list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentBulletPreset, onChange: (event) => { const preset = event.target.value; if (preset)
+                                            applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Bulleted list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "bullet").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") })), t.numberedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") }), _jsxs("select", { "aria-label": "Numbered list style", title: "Numbered list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentOrderedPreset, onChange: (event) => { const preset = event.target.value; if (preset)
+                                            applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Numbered list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "ordered").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") })), t.checklist && _jsx(ToolbarButton, { icon: "checklist", label: "Checklist", ariaLabel: "Checklist", pressed: listStyleActive("disc", true), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc", true) }), _jsxs(ToolbarDropdown, { icon: "restart", label: "More list tools", priority: 2, children: [listPresetSelect, t.listPreset && _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [t.link && _jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly, onClick: openLinkPopover }), showImageTool && _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly, onClick: () => setMediaKind("image") }), t.removeLink && _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), t.insertFormula && _jsx(ToolbarButton, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setFormulaLibraryPopover({ x: rect.left, y: rect.bottom + 4 });
                                 } }), t.specialCharacters && _jsx(ToolbarButton, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {

package/dist/components/ColorPickerPopover.js

@@ -1,6 +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";
+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))
@@ -131,14 +131,13 @@ 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));
+        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]);

package/dist/components/TableBorderPopover.js

@@ -1,7 +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";
+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
@@ -68,14 +68,13 @@ 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));
+        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]);

package/dist/components/ToolbarPrimitives.d.ts

@@ -66,7 +66,7 @@ export declare const toolbarIcons: {
 };
 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;
@@ -84,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 }: {

package/dist/components/ToolbarPrimitives.js

@@ -1,7 +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, 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 } from "./fixedPositioning.js";
+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,
@@ -80,8 +80,8 @@ export const toolbarIcons = {
     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 }) {
@@ -157,11 +157,10 @@ 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;
+            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 });
         };
@@ -215,17 +214,17 @@ 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;
+            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 });
         };

package/dist/components/fixedPositioning.d.ts

@@ -9,11 +9,23 @@
  *   (`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).
- * - `contain: 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.
+ * - `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
@@ -40,3 +52,39 @@ 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`/`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

@@ -9,11 +9,23 @@
  *   (`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).
- * - `contain: 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.
+ * - `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
@@ -44,7 +56,7 @@ export function findFixedPositioningContainer(el) {
             (style.filter && style.filter !== "none") ||
             (style.backdropFilter && style.backdropFilter !== "none") ||
             (style.willChange && /transform|perspective|filter/.test(style.willChange)) ||
-            (style.contain && /\b(paint|strict|content)\b/.test(style.contain))) {
+            (style.contain && /\b(layout|paint|strict|content)\b/.test(style.contain))) {
             return node;
         }
         node = node.parentElement;
@@ -58,3 +70,49 @@ export function getFixedPositioningOrigin(el) {
     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`/`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),
+    };
+}