smartrte-react 1.0.0-beta.6 → 1.0.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.0.0-beta.8
+
+- Add a `tools` prop (`ClassicEditor`, `CanonicalAuthorityEditor`, and the standalone embed) letting a host hide any individual toolbar tool — Bold, Video, Version history, Review, and around 40 others — without wrapping or restyling the component. Every tool is visible by default; composes with existing gates (a required provider or capability must still be present). See the README's "Hiding individual toolbar tools" section for the full list and usage.
+- Retire the never-shipped `showVersionHistory`/`showReview` props in favor of `tools.versionHistory`/`tools.comments`/`tools.suggestions`.
+- Also export `EditorCapabilityPreset` from the package's public entry point (previously only reachable indirectly through `CanonicalAuthorityEditorProps`).
+
+## 1.0.0-beta.7
+
+- Fix the mobile "More tools" overflow menu getting clipped almost entirely off-screen when the editor is embedded inside a host container with `overflow: hidden` — the same fix already applied to the desktop toolbar dropdowns, now also covering this menu (the only overflow affordance on narrow viewports).
+- Add the "List preset" control (decimal/lower-alpha/upper-alpha/roman-numeral/outline numbering styles, plus bullet-glyph presets) to the mobile "More tools" menu — previously only reachable from the desktop toolbar's "More list tools" dropdown, leaving narrow-viewport users with no way to use anything beyond plain bulleted/numbered/checklist lists.
+
 ## 1.0.0-beta.6
 
 - Replace the media Edit overlay's plain alt-text prompt with a full "Media details" panel: link (with open-in-new-tab), corner radius, alignment, and license fields (description, source URL, type, version, attribution), matching the pre-canonical editor's own edit-panel field set. A library-picked image's existing license metadata is now carried onto the inserted atom instead of being discarded. Depends on `smartrte-core@1.0.0-beta.3`.

package/README.md

@@ -96,6 +96,7 @@ export default App;
 | `defaultFont` | `string` | `undefined` | Default font family for the editor content |
 | `theme` | `"light" \| "dark"` | `"light"` | Built-in theme mode |
 | `className` | `string` | `undefined` | Custom CSS class for theming via CSS variable overrides |
+| `tools` | `Partial<ToolbarTools>` | every tool `true` | Hide individual toolbar tools (Bold, Video, Version history, etc.) — see [Hiding individual toolbar tools](#hiding-individual-toolbar-tools) below |
 
 ### Advanced Examples
 
@@ -118,6 +119,99 @@ import { ClassicEditor } from 'smartrte-react';
 />
 ```
 
+#### Hiding individual toolbar tools
+
+The `table`/`media`/`formula` props above turn off a whole *capability* — no
+tables anywhere, or media/formulas removed from the schema entirely. If you
+just want a **smaller toolbar** while keeping every capability intact (e.g.
+hide Video, Audio, Version history, and Review for a specific product
+surface, without touching what content the editor can actually store), use
+`tools` instead. It's a plain object: name the tools you want off, everything
+else stays on by default. No wrapping, no CSS overrides, no forking the
+component.
+
+```tsx
+import { ClassicEditor } from 'smartrte-react';
+
+<ClassicEditor
+  tools={{
+    video: false,
+    audio: false,
+    versionHistory: false,
+    comments: false,
+    suggestions: false,
+  }}
+/>
+```
+
+**How it composes with everything else:** a tool only ever needs *both*
+things to be true to show up — your `tools` flag says yes, *and* whatever
+that tool actually depends on is present. So:
+
+- `tools.video`/`tools.audio`/`tools.image` also need a `mediaProvider` (or
+  `mediaManager`) to be configured at all — turning the flag on can't make
+  media insertion appear out of nowhere if you never wired up a provider.
+- `tools.versionHistory` also needs a `versionProvider`; `tools.comments`
+  needs a `commentProvider`; `tools.suggestions` needs a `suggestionProvider`.
+- `tools.insertTable` also needs the table capability to actually be enabled
+  (i.e. you haven't set `table={false}`) — you can't use `tools` to bring
+  back a capability you turned off elsewhere.
+
+In other words: `tools` can only ever hide something, never force something
+into existence that isn't otherwise configured. This means it's always safe
+to leave `tools` unset — every consumer who doesn't pass it sees the exact
+toolbar they see today.
+
+**Every toggleable key**, grouped the way they appear in the toolbar:
+
+```ts
+interface ToolbarTools {
+  // Text formatting
+  bold, italic, underline, strikethrough, code,
+  superscript, subscript, textColor, backgroundColor, fontSize, fontFamily,
+
+  // Paragraph
+  blockType,   // the Paragraph/Heading/Code block dropdown
+  alignLeft, alignCenter, alignRight, alignJustify, quote,
+
+  // Lists
+  bulletedList, numberedList, checklist,
+  listPreset,  // the numbered-list style picker (1,2,3 / a,b,c / i,ii,iii / A,B,C / I,II,III)
+
+  // Insert
+  link, removeLink, image, video, audio, insertFormula, specialCharacters, insertTable,
+
+  // Document
+  import,
+  saveAsHtml, saveAsMarkdown, saveAsWord, saveAsPdf, saveAsSmartRte,
+  versionHistory, comments, suggestions,
+
+  // History
+  undo, redo,
+}
+```
+
+A few notes on what's *not* in this list, on purpose: actions that only ever
+apply to something you already have selected — moving a block up/down,
+indenting a list item, adding/removing a table row or column, resizing a
+selected image — aren't individually toggleable. They only make sense as
+part of using the tool that created them (a table, a list, an image), so
+they follow that tool's own visibility rather than needing a separate flag
+each. If you turn off `insertTable`, its row/column tools go with it
+automatically — there's no separate flag to remember.
+
+If you're using the exported `CanonicalAuthorityEditor` directly instead of
+`ClassicEditor`, `tools` works exactly the same way. And if you're using the
+standalone embed (`window.SmartRTE.ClassicEditor.init(...)`), pass `tools`
+in the same options object you pass `target`/`value`/etc.
+
+```ts
+window.SmartRTE.ClassicEditor.init({
+  target: document.getElementById('editor'),
+  tools: { video: false, audio: false },
+});
+```
+
 #### Complete Example with All Features
 
 ```tsx

package/dist/components/CanonicalAuthorityEditor.d.ts

@@ -6,6 +6,7 @@ import type { CommentProvider } from "../commentProvider.js";
 import type { SuggestionProvider } from "../suggestionProvider.js";
 import { type MediaPickerComponent } from "./MediaPicker.js";
 import type { EditorCapabilityPreset } from "../capabilityPresets.js";
+import { type ToolbarTools } from "../toolbarTools.js";
 import { CanonicalEditorRuntime, type SmartEditorChange, type SmartEditorHandle } from "../canonicalEditorRuntime.js";
 export interface CanonicalAuthorityEditorProps {
     /** Initial value only. Later replacements must use SmartEditorHandle.replaceValue. */
@@ -42,7 +43,20 @@ export interface CanonicalAuthorityEditorProps {
      * for images too.
      */
     mediaManager?: boolean;
-    /** Host-owned save/list/load/remove boundary for document version history. Absent hides the version-history toolbar button entirely, mirroring mediaProvider's absent-disables-the-feature contract. */
+    /**
+     * Per-tool toolbar visibility - "developers should be able to hide tools
+     * which are not for their use" (docs/bugs/per-tool-toolbar-visibility.md).
+     * Every tool defaults to visible; a host only needs to name the ones they
+     * want off (`tools={{ video: false, versionHistory: false }}`). Composes
+     * with, never overrides, the deeper existing gates: a tool whose required
+     * provider is absent (`versionProvider`/`commentProvider`/
+     * `suggestionProvider`/`mediaProvider`) or whose plugin was excluded via
+     * `preset` (e.g. `insertTable` under `preset="simple"`) still won't
+     * render even if explicitly set to `true` here - see ToolbarTools.ts's
+     * own doc comment for the full contract and scoping decisions.
+     */
+    tools?: Partial<ToolbarTools>;
+    /** Host-owned save/list/load/remove boundary for document version history. */
     versionProvider?: VersionProvider;
     /** Host-owned save/list/remove boundary for comment threads. Absent hides the comment toolbar buttons and markers entirely, mirroring versionProvider's absent-disables-the-feature contract. */
     commentProvider?: CommentProvider;

package/dist/components/CanonicalAuthorityEditor.js

@@ -22,6 +22,7 @@ import { MediaOverlay } from "./MediaOverlay.js";
 import { MediaDetailsPopover } from "./MediaDetailsPopover.js";
 import { ContextMenu } from "./ContextMenu.js";
 import { ToolbarButton, ToolbarDropdown, ToolbarGroup, ToolbarMenuItem, MobileMoreMenu } from "./ToolbarPrimitives.js";
+import { resolveToolbarTools } from "../toolbarTools.js";
 import { exportDocxDocument, importStyledDocxDocument, importPdfDocument } from "smartrte-core/foundation";
 import { printSmartDocumentAsPdf } from "../adapters/pdfPrint.js";
 import { CanonicalEditorRuntime, } from "../canonicalEditorRuntime.js";
@@ -103,7 +104,7 @@ const parseBorderShorthand = (value) => {
 const isCollapsedTextSelection = (selection) => selection.type === "text" && selection.anchor.offset === selection.head.offset
     && selection.anchor.path.length === selection.head.path.length
     && selection.anchor.path.every((part, index) => part === selection.head.path[index]);
-export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEditor({ defaultValue, preset, renderFormulaHtml, onChange, onHtmlChange, onClipboardDiagnostic, mediaProvider, mediaPicker: MediaPicker = DefaultMediaPicker, mediaManager = true, versionProvider, commentProvider, suggestionProvider, authorId, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, className, onRuntime, }, forwardedRef) {
+export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEditor({ defaultValue, preset, renderFormulaHtml, onChange, onHtmlChange, onClipboardDiagnostic, mediaProvider, mediaPicker: MediaPicker = DefaultMediaPicker, mediaManager = true, tools, versionProvider, commentProvider, suggestionProvider, authorId, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, className, onRuntime, }, forwardedRef) {
     ensureStyleSheet();
     const rootRef = useRef(null);
     const importRef = useRef(null);
@@ -324,6 +325,19 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // an `unknown` node (Phase 10's disable-safety contract, unchanged) -
     // this only hides the *toolbar affordance* for creating new ones.
     const tablesEnabled = Boolean(runtime.editor.schema.nodes.table);
+    // Per-tool toolbar visibility (toolbarTools.ts) - `tools` is a pure
+    // UI-visibility layer, composed with (never overriding) the deeper
+    // existing gates below: a required provider being absent, or a plugin
+    // having been excluded via `preset`, still wins even if a tool is
+    // explicitly left enabled here.
+    const t = resolveToolbarTools(tools);
+    const showInsertTable = t.insertTable && tablesEnabled;
+    const showImageTool = t.image && Boolean(mediaProvider);
+    const showVideoTool = t.video && Boolean(mediaProvider);
+    const showAudioTool = t.audio && Boolean(mediaProvider);
+    const showVersionHistoryTool = t.versionHistory && Boolean(versionProvider);
+    const showCommentsTool = t.comments && Boolean(commentProvider);
+    const showSuggestionsTool = t.suggestions && Boolean(suggestionProvider);
     const tableSelected = currentTableScope.kind === "table-grid";
     const selectedTableElement = tableSelected
         ? runtime.surface.renderer?.mapping.nodeToDom(currentTableScope.tableId)
@@ -1413,23 +1427,44 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // twice; below 1440px (including mobile) this copy is what's reachable,
     // same as before. "Code" isn't promoted - see the docs/bugs/ writeup on
     // why it stayed the dropdown's sole remaining item at wide widths.
-    const textStylesMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "code", label: "Code", pressed: markCoverage("inlineCode"), disabled: readOnly, onClick: () => toggleMark("inlineCode") }), _jsx(ToolbarMenuItem, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), _jsx(ToolbarMenuItem, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), _jsx(ToolbarMenuItem, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+    const textStylesMenuItems = _jsxs(_Fragment, { children: [t.code && _jsx(ToolbarMenuItem, { icon: "code", label: "Code", pressed: markCoverage("inlineCode"), disabled: readOnly, onClick: () => toggleMark("inlineCode") }), t.superscript && _jsx(ToolbarMenuItem, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarMenuItem, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarMenuItem, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "textColor" }, initialValue: currentMarkColor("textColor") });
-                } }), _jsx(ToolbarMenuItem, { icon: "backgroundColor", label: "Background colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+                } }), t.backgroundColor && _jsx(ToolbarMenuItem, { 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") });
-                } }), _jsx(ToolbarMenuItem, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), _jsx(ToolbarMenuItem, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true })] });
+                } }), t.fontSize && _jsx(ToolbarMenuItem, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarMenuItem, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true })] });
+    const showMoreTextStyles = t.code || t.superscript || t.subscript || t.textColor || t.backgroundColor || t.fontSize || t.fontFamily;
     const paragraphToolsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "moveUp", label: "Move block up", disabled: readOnly, onClick: () => runBlock("up") }), _jsx(ToolbarMenuItem, { icon: "moveDown", label: "Move block down", disabled: readOnly, onClick: () => runBlock("down") }), _jsx(ToolbarMenuItem, { icon: "indent", label: "Indent block", disabled: readOnly, onClick: () => runBlock("indent") }), _jsx(ToolbarMenuItem, { icon: "outdent", label: "Outdent block", disabled: readOnly, onClick: () => runBlock("outdent") })] });
+    /**
+     * Named multi-level marker presets (decimal/lower-alpha/upper-alpha/
+     * roman/outline) - a distinct control from the plain Bulleted/Numbered/
+     * Checklist buttons above, which only toggle a raw list style. Extracted
+     * to a variable so it can be reused verbatim in both the desktop "More
+     * list tools" dropdown and MobileMoreMenu below - it was previously
+     * hardcoded only into the dropdown, meaning a narrow/mobile viewport
+     * (where every ToolbarDropdown hides entirely, per theme.ts's
+     * 639px breakpoint) had no way to reach it at all - see
+     * docs/bugs/list-preset-missing-from-mobile-more-menu.md.
+     */
+    const listPresetSelect = t.listPreset && _jsx("div", { style: { padding: "4px 8px" }, children: _jsxs("select", { "aria-label": "List preset", title: "List type / preset", disabled: readOnly || currentListParts.length !== 1, value: currentListPreset, onChange: (event) => {
+                const preset = event.target.value;
+                if (!preset || currentListParts.length !== 1)
+                    return;
+                // A preset choice applies to the whole list, regardless of how deep
+                // 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 });
+            }, 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
     // widePromote ToolbarButton (see textStylesMenuItems's own comment above
     // for the mechanism) - Insert video/audio and the selected-media actions
     // stay dropdown-only, matching the report's own named tool list.
-    const insertMoreMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), _jsx(ToolbarMenuItem, { icon: "video", label: "Insert video", disabled: readOnly || !mediaProvider, onClick: () => setMediaKind("video") }), _jsx(ToolbarMenuItem, { icon: "audio", label: "Insert audio", disabled: readOnly || !mediaProvider, onClick: () => setMediaKind("audio") }), _jsx(ToolbarMenuItem, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
+    const insertMoreMenuItems = _jsxs(_Fragment, { children: [t.removeLink && _jsx(ToolbarMenuItem, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), showVideoTool && _jsx(ToolbarMenuItem, { icon: "video", label: "Insert video", disabled: readOnly, onClick: () => setMediaKind("video") }), showAudioTool && _jsx(ToolbarMenuItem, { icon: "audio", label: "Insert audio", disabled: readOnly, onClick: () => setMediaKind("audio") }), t.insertFormula && _jsx(ToolbarMenuItem, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setFormulaLibraryPopover({ x: rect.left, y: rect.bottom + 4 });
-                } }), _jsx(ToolbarMenuItem, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
+                } }), t.specialCharacters && _jsx(ToolbarMenuItem, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setSpecialCharPopover({ x: rect.left, y: rect.bottom + 4 });
                 } }), _jsx(ToolbarMenuItem, { icon: "edit", label: "Edit selected media", disabled: readOnly || !mediaAtomSelected, onClick: () => editSelectedAtom() }), _jsx(ToolbarMenuItem, { icon: "zoomIn", label: "Enlarge selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(20) }), _jsx(ToolbarMenuItem, { icon: "zoomOut", label: "Shrink selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(-20) }), _jsx(ToolbarMenuItem, { icon: "delete", label: "Delete selected media", disabled: readOnly || !atomSelected, onClick: () => runtime.executeOperations(deleteAtom(runtime.editor.document, atomScope(), {}, blockContext())) })] });
@@ -1446,32 +1481,33 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                     const rect = event.currentTarget.getBoundingClientRect();
                     setTableBorderPopover({ x: rect.left, y: rect.bottom + 4, scope: scope, initial: currentCellBorderDraft(scope) });
                 } })] });
-    const saveCopyMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { label: "Save as HTML", onClick: () => runExport("html") }), _jsx(ToolbarMenuItem, { label: "Save as Markdown", onClick: () => runExport("markdown") }), _jsx(ToolbarMenuItem, { label: "Save as Word document", onClick: () => void runDocxExport() }), _jsx(ToolbarMenuItem, { label: "Save as PDF", onClick: runPdfExport }), _jsx(ToolbarMenuItem, { icon: "json", label: "Save as Smart RTE file", onClick: () => runExport("native") })] });
-    const reviewMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "addComment", label: "Add comment", disabled: !canComment, onClick: startComment }), _jsx(ToolbarMenuItem, { icon: "comments", label: "Comments", pressed: commentPanelOpen, disabled: !commentProvider, onClick: () => setCommentPanelOpen((open) => !open) }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest deletion", disabled: !canSuggestDelete, onClick: suggestDelete }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest insertion", disabled: readOnly || !suggestionProvider, onClick: startSuggestInsert }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest removing this", disabled: readOnly || !suggestionProvider, onClick: suggestBlockRemoval }), _jsx(ToolbarMenuItem, { icon: "suggestions", label: "Suggestions", pressed: suggestionPanelOpen, disabled: !suggestionProvider, onClick: () => setSuggestionPanelOpen((open) => !open) }), _jsx(ToolbarMenuItem, { icon: "showEdits", label: "Show edits", pressed: trackChangesEnabled, title: "Tracks ordinary typing and edits within a single paragraph as suggestions. Merging paragraphs together - typing over a selection that spans multiple paragraphs, or pressing Backspace/Delete at a paragraph boundary - still applies directly and can't be reviewed as a suggestion.", disabled: readOnly || !suggestionProvider, onClick: () => setTrackChangesEnabled((enabled) => !enabled) })] });
-    return _jsxs("section", { className: `srte-root srte-editor srte-canonical-authority${className ? ` ${className}` : ""}`, "data-smart-authority": "canonical", children: [_jsxs("div", { className: "srte-toolbar", role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "bold", label: "Bold", pressed: markCoverage("bold"), disabled: readOnly, onClick: () => toggleMark("bold") }), _jsx(ToolbarButton, { icon: "italic", label: "Italic", pressed: markCoverage("italic"), disabled: readOnly, onClick: () => toggleMark("italic") }), _jsx(ToolbarButton, { icon: "underline", label: "Underline", pressed: markCoverage("underline"), disabled: readOnly, onClick: () => toggleMark("underline") }), _jsx(ToolbarButton, { icon: "strikethrough", label: "Strikethrough", pressed: markCoverage("strikethrough"), disabled: readOnly, onClick: () => toggleMark("strikethrough") }), _jsx(ToolbarButton, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), _jsx(ToolbarButton, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), _jsx(ToolbarButton, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+    const saveCopyMenuItems = _jsxs(_Fragment, { children: [t.saveAsHtml && _jsx(ToolbarMenuItem, { label: "Save as HTML", onClick: () => runExport("html") }), t.saveAsMarkdown && _jsx(ToolbarMenuItem, { label: "Save as Markdown", onClick: () => runExport("markdown") }), t.saveAsWord && _jsx(ToolbarMenuItem, { label: "Save as Word document", onClick: () => void runDocxExport() }), t.saveAsPdf && _jsx(ToolbarMenuItem, { label: "Save as PDF", onClick: runPdfExport }), t.saveAsSmartRte && _jsx(ToolbarMenuItem, { icon: "json", label: "Save as Smart RTE file", onClick: () => runExport("native") })] });
+    const showSaveCopy = t.saveAsHtml || t.saveAsMarkdown || t.saveAsWord || t.saveAsPdf || t.saveAsSmartRte;
+    // "Review" splits into two independently-toggleable tools (comments,
+    // suggestions) - not an arbitrary split, it maps directly onto the two
+    // already-separate providers this architecture has (commentProvider,
+    // suggestionProvider). Kept as ONE dropdown trigger (labeled "Review")
+    // rather than two, showing whichever half(s) are actually enabled.
+    const commentsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "addComment", label: "Add comment", disabled: !canComment, onClick: startComment }), _jsx(ToolbarMenuItem, { icon: "comments", label: "Comments", pressed: commentPanelOpen, disabled: !commentProvider, onClick: () => setCommentPanelOpen((open) => !open) })] });
+    const suggestionsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest deletion", disabled: !canSuggestDelete, onClick: suggestDelete }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest insertion", disabled: readOnly || !suggestionProvider, onClick: startSuggestInsert }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest removing this", disabled: readOnly || !suggestionProvider, onClick: suggestBlockRemoval }), _jsx(ToolbarMenuItem, { icon: "suggestions", label: "Suggestions", pressed: suggestionPanelOpen, disabled: !suggestionProvider, onClick: () => setSuggestionPanelOpen((open) => !open) }), _jsx(ToolbarMenuItem, { icon: "showEdits", label: "Show edits", pressed: trackChangesEnabled, title: "Tracks ordinary typing and edits within a single paragraph as suggestions. Merging paragraphs together - typing over a selection that spans multiple paragraphs, or pressing Backspace/Delete at a paragraph boundary - still applies directly and can't be reviewed as a suggestion.", disabled: readOnly || !suggestionProvider, onClick: () => setTrackChangesEnabled((enabled) => !enabled) })] });
+    const reviewMenuItems = _jsxs(_Fragment, { children: [showCommentsTool && commentsMenuItems, showCommentsTool && showSuggestionsTool && _jsx("div", { className: "srte-menu-separator" }), showSuggestionsTool && suggestionsMenuItems] });
+    const showReviewDropdown = showCommentsTool || showSuggestionsTool;
+    return _jsxs("section", { className: `srte-root srte-editor srte-canonical-authority${className ? ` ${className}` : ""}`, "data-smart-authority": "canonical", children: [_jsxs("div", { className: "srte-toolbar", role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsxs(ToolbarGroup, { children: [t.bold && _jsx(ToolbarButton, { icon: "bold", label: "Bold", pressed: markCoverage("bold"), disabled: readOnly, onClick: () => toggleMark("bold") }), t.italic && _jsx(ToolbarButton, { icon: "italic", label: "Italic", pressed: markCoverage("italic"), disabled: readOnly, onClick: () => toggleMark("italic") }), t.underline && _jsx(ToolbarButton, { icon: "underline", label: "Underline", pressed: markCoverage("underline"), disabled: readOnly, onClick: () => toggleMark("underline") }), t.strikethrough && _jsx(ToolbarButton, { icon: "strikethrough", label: "Strikethrough", pressed: markCoverage("strikethrough"), disabled: readOnly, onClick: () => toggleMark("strikethrough") }), t.superscript && _jsx(ToolbarButton, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarButton, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarButton, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "textColor" }, initialValue: currentMarkColor("textColor") });
-                                } }), _jsx(ToolbarButton, { icon: "backgroundColor", label: "Background colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+                                } }), 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") });
-                                } }), _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [_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", { "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" })] }), _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())) }), _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())) }), _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())) }), _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), _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: [_jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, onClick: () => toggleList("disc") }), _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, onClick: () => toggleList("decimal") }), _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: [_jsx("div", { style: { padding: "4px 8px" }, children: _jsxs("select", { "aria-label": "List preset", title: "List type / preset", disabled: readOnly || currentListParts.length !== 1, value: currentListPreset, onChange: (event) => {
-                                                const preset = event.target.value;
-                                                if (!preset || currentListParts.length !== 1)
-                                                    return;
-                                                // A preset choice applies to the whole list, regardless of how deep
-                                                // 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 });
-                                            }, 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))] }) }), _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly, onClick: openLinkPopover }), _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly || !mediaProvider, onClick: () => setMediaKind("image") }), _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), _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.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) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setFormulaLibraryPopover({ x: rect.left, y: rect.bottom + 4 });
-                                } }), _jsx(ToolbarButton, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
+                                } }), t.specialCharacters && _jsx(ToolbarButton, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setSpecialCharPopover({ x: rect.left, y: rect.bottom + 4 });
-                                } }), _jsx(ToolbarDropdown, { icon: "video", label: "More to insert", priority: 2, children: insertMoreMenuItems })] }), tablesEnabled && _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "table", label: "Insert table", ariaLabel: "Insert table", disabled: readOnly, onClick: (event) => {
+                                } }), _jsx(ToolbarDropdown, { icon: "video", label: "More to insert", priority: 2, children: insertMoreMenuItems })] }), showInsertTable && _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "table", label: "Insert table", ariaLabel: "Insert table", disabled: readOnly, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setTableSizePopover({ x: rect.left, y: rect.bottom + 4 });
                                 } }), _jsx(ToolbarDropdown, { icon: "mergeCells", label: "Table tools", priority: 2, children: tableToolsMenuItems })] }), _jsx("input", { ref: importRef, type: "file", accept: ".html,.htm,.md,.markdown,.docx,.pdf,text/html,text/markdown,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf", hidden: true, onChange: (event) => {
@@ -1479,7 +1515,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                             if (file)
                                 void runImport(file);
                             event.currentTarget.value = "";
-                        } }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "import", label: "Import", ariaLabel: "Import document", disabled: readOnly, onClick: () => importRef.current?.click() }), _jsx(ToolbarDropdown, { icon: "saveCopy", label: "Save a copy", priority: 2, children: saveCopyMenuItems }), _jsx(ToolbarButton, { icon: "history", label: "Version history", ariaLabel: "Version history", disabled: readOnly || !versionProvider, onClick: () => setVersionHistoryOpen(true) }), _jsx(ToolbarDropdown, { icon: "comments", label: "Review", priority: 2, children: reviewMenuItems })] }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "undo", label: "Undo", ariaLabel: "Undo", disabled: readOnly, onClick: () => { runtime.editor.undo(); runtime.focus(); } }), _jsx(ToolbarButton, { icon: "redo", label: "Redo", ariaLabel: "Redo", disabled: readOnly, onClick: () => { runtime.editor.redo(); runtime.focus(); } })] }), _jsxs(MobileMoreMenu, { children: [textStylesMenuItems, _jsx("div", { className: "srte-menu-separator" }), paragraphToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), insertMoreMenuItems, tablesEnabled && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), tableToolsMenuItems] }), _jsx("div", { className: "srte-menu-separator" }), saveCopyMenuItems, _jsx("div", { className: "srte-menu-separator" }), reviewMenuItems] })] }), mediaKind === "image" && mediaManager && mediaProvider && _jsx(MediaManager, { open: true, onClose: () => setMediaKind(null), adapter: mediaManagerAdapter, onSelect: selectFromMediaManager }), mediaKind && mediaProvider && !(mediaKind === "image" && mediaManager) && _jsx(MediaPicker, { kind: mediaKind, onPick: (file) => void insertMediaFile(mediaKind, file), onCancel: () => setMediaKind(null) }), versionProvider && _jsx(VersionHistoryPanel, { open: versionHistoryOpen, onClose: () => setVersionHistoryOpen(false), runtime: runtime, versionProvider: versionProvider }), commentProvider && rootRef.current && runtime.surface.renderer?.mapping && _jsx(CommentMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread }), commentProvider && _jsx(CommentThreadPanel, { open: commentPanelOpen, onClose: () => { setCommentPanelOpen(false); setPendingCommentRange(null); }, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread, pendingRange: pendingCommentRange, onCreateThread: createThread, onReply: replyToThread, onResolve: setThreadResolved, onDelete: deleteThread, busyThreadId: busyThreadId }), suggestionProvider && rootRef.current && runtime.surface.renderer?.mapping && _jsx(StructuralSuggestionMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, suggestions: structuralSuggestions, activeSuggestionId: activeSuggestionId, onSelectSuggestion: selectSuggestion }), suggestionProvider && _jsx(SuggestionPanel, { open: suggestionPanelOpen, onClose: () => { setSuggestionPanelOpen(false); setPendingSuggestInsertAt(null); }, document: runtime.editor.document, structuralSuggestions: structuralSuggestions, activeId: activeSuggestionId, onSelect: selectSuggestion, pendingInsert: Boolean(pendingSuggestInsertAt), onSubmitInsert: submitSuggestInsert, onAcceptInline: acceptInlineSuggestion, onRejectInline: rejectInlineSuggestion, onAcceptStructural: acceptStructural, onRejectStructural: rejectStructural, busyId: busySuggestionId }), linkPopover && _jsx(LinkEditorPopover, { x: linkPopover.x, y: linkPopover.y, initialHref: linkPopover.href, initialOpenInNewTab: linkPopover.openInNewTab, showTextInput: linkPopover.collapsed && !linkPopover.editingExisting, showRemove: linkPopover.editingExisting, autoFocus: !linkPopover.autoTriggered, onApply: applyLink, onRemove: removeLink, onCancel: () => {
+                        } }), _jsxs(ToolbarGroup, { children: [t.import && _jsx(ToolbarButton, { icon: "import", label: "Import", ariaLabel: "Import document", disabled: readOnly, onClick: () => importRef.current?.click() }), showSaveCopy && _jsx(ToolbarDropdown, { icon: "saveCopy", label: "Save a copy", priority: 2, children: saveCopyMenuItems }), showVersionHistoryTool && _jsx(ToolbarButton, { icon: "history", label: "Version history", ariaLabel: "Version history", disabled: readOnly, onClick: () => setVersionHistoryOpen(true) }), showReviewDropdown && _jsx(ToolbarDropdown, { icon: "comments", label: "Review", priority: 2, children: reviewMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.undo && _jsx(ToolbarButton, { icon: "undo", label: "Undo", ariaLabel: "Undo", disabled: readOnly, onClick: () => { runtime.editor.undo(); runtime.focus(); } }), t.redo && _jsx(ToolbarButton, { icon: "redo", label: "Redo", ariaLabel: "Redo", disabled: readOnly, onClick: () => { runtime.editor.redo(); runtime.focus(); } })] }), _jsxs(MobileMoreMenu, { children: [textStylesMenuItems, _jsx("div", { className: "srte-menu-separator" }), paragraphToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), listPresetSelect, listToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), insertMoreMenuItems, showInsertTable && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), tableToolsMenuItems] }), showSaveCopy && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), saveCopyMenuItems] }), showReviewDropdown && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), reviewMenuItems] })] })] }), mediaKind === "image" && mediaManager && mediaProvider && _jsx(MediaManager, { open: true, onClose: () => setMediaKind(null), adapter: mediaManagerAdapter, onSelect: selectFromMediaManager }), mediaKind && mediaProvider && !(mediaKind === "image" && mediaManager) && _jsx(MediaPicker, { kind: mediaKind, onPick: (file) => void insertMediaFile(mediaKind, file), onCancel: () => setMediaKind(null) }), showVersionHistoryTool && _jsx(VersionHistoryPanel, { open: versionHistoryOpen, onClose: () => setVersionHistoryOpen(false), runtime: runtime, versionProvider: versionProvider }), showCommentsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(CommentMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread }), showCommentsTool && _jsx(CommentThreadPanel, { open: commentPanelOpen, onClose: () => { setCommentPanelOpen(false); setPendingCommentRange(null); }, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread, pendingRange: pendingCommentRange, onCreateThread: createThread, onReply: replyToThread, onResolve: setThreadResolved, onDelete: deleteThread, busyThreadId: busyThreadId }), showSuggestionsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(StructuralSuggestionMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, suggestions: structuralSuggestions, activeSuggestionId: activeSuggestionId, onSelectSuggestion: selectSuggestion }), showSuggestionsTool && _jsx(SuggestionPanel, { open: suggestionPanelOpen, onClose: () => { setSuggestionPanelOpen(false); setPendingSuggestInsertAt(null); }, document: runtime.editor.document, structuralSuggestions: structuralSuggestions, activeId: activeSuggestionId, onSelect: selectSuggestion, pendingInsert: Boolean(pendingSuggestInsertAt), onSubmitInsert: submitSuggestInsert, onAcceptInline: acceptInlineSuggestion, onRejectInline: rejectInlineSuggestion, onAcceptStructural: acceptStructural, onRejectStructural: rejectStructural, busyId: busySuggestionId }), linkPopover && _jsx(LinkEditorPopover, { x: linkPopover.x, y: linkPopover.y, initialHref: linkPopover.href, initialOpenInNewTab: linkPopover.openInNewTab, showTextInput: linkPopover.collapsed && !linkPopover.editingExisting, showRemove: linkPopover.editingExisting, autoFocus: !linkPopover.autoTriggered, onApply: applyLink, onRemove: removeLink, onCancel: () => {
                     setLinkOverlayDismissedAt(runtime.editor.selection.head);
                     setLinkPopover(null);
                     runtime.focus();

package/dist/components/ToolbarPrimitives.d.ts

@@ -135,6 +135,20 @@ export declare function ToolbarGroup({ priority, children }: {
  * primary row starts shedding groups - this is plain CSS visibility
  * toggling of pre-rendered content, not JS media-query logic, matching how
  * the rest of this responsive system already works.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates,
+ * the same fix and reasoning as `ToolbarDropdown` (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md) - this component was
+ * NOT covered by that fix at the time (incorrectly assumed to be
+ * unaffected since it already had its own separate mobile CSS), but it has
+ * the exact same `position: absolute` vulnerability to a host's own
+ * `overflow: hidden` container, and since this is the ONLY toolbar
+ * overflow affordance on narrow viewports (every ToolbarDropdown hides
+ * entirely below the mobile breakpoint), a clipped host is more likely to
+ * matter here, not less. Confirmed live: a real narrow host wrapping the
+ * editor in `overflow: hidden` computed this panel at `left: -214px` -
+ * mostly off-screen, functionally invisible despite being technically
+ * present in the DOM.
  */
 export declare function MobileMoreMenu({ children }: {
     children: React.ReactNode;

package/dist/components/ToolbarPrimitives.js

@@ -176,9 +176,53 @@ export function ToolbarGroup({ priority, children }) {
  * primary row starts shedding groups - this is plain CSS visibility
  * toggling of pre-rendered content, not JS media-query logic, matching how
  * the rest of this responsive system already works.
+ *
+ * The panel itself renders `position: fixed` with JS-measured coordinates,
+ * the same fix and reasoning as `ToolbarDropdown` (docs/bugs/
+ * toolbar-dropdown-clipped-by-host-overflow-hidden.md) - this component was
+ * NOT covered by that fix at the time (incorrectly assumed to be
+ * unaffected since it already had its own separate mobile CSS), but it has
+ * the exact same `position: absolute` vulnerability to a host's own
+ * `overflow: hidden` container, and since this is the ONLY toolbar
+ * overflow affordance on narrow viewports (every ToolbarDropdown hides
+ * entirely below the mobile breakpoint), a clipped host is more likely to
+ * matter here, not less. Confirmed live: a real narrow host wrapping the
+ * editor in `overflow: hidden` computed this panel at `left: -214px` -
+ * mostly off-screen, functionally invisible despite being technically
+ * present in the DOM.
  */
 export function MobileMoreMenu({ children }) {
     const detailsRef = useRef(null);
     useDismissDetailsOnOutsideClick(detailsRef);
-    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu srte-mobile-more", children: [_jsx("summary", { className: "srte-tool-button srte-menu-trigger", "aria-label": "More tools", onMouseDown: (event) => event.preventDefault(), children: toolbarIcons.more }), _jsx("div", { className: "srte-menu", role: "menu", children: children })] });
+    const [placement, setPlacement] = useState(null);
+    useLayoutEffect(() => {
+        const details = detailsRef.current;
+        if (!details)
+            return;
+        const recompute = () => {
+            if (!details.open) {
+                setPlacement(null);
+                return;
+            }
+            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 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.
+            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 });
+        };
+        recompute();
+        details.addEventListener("toggle", recompute);
+        return () => details.removeEventListener("toggle", recompute);
+    }, []);
+    return _jsxs("details", { ref: detailsRef, className: "srte-toolbar-menu srte-mobile-more", children: [_jsx("summary", { className: "srte-tool-button srte-menu-trigger", "aria-label": "More tools", onMouseDown: (event) => event.preventDefault(), children: toolbarIcons.more }), _jsx("div", { className: "srte-menu", role: "menu", "data-srte-menu-fixed": "true", style: { left: placement?.left ?? 0, top: placement?.top ?? 0, visibility: placement ? "visible" : "hidden" }, children: children })] });
 }

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export { ClassicEditor } from './components/ClassicEditorAuthority.js';
 export type { ClassicEditorProps } from './components/ClassicEditorAuthority.js';
 export { CanonicalAuthorityEditor } from './components/CanonicalAuthorityEditor.js';
 export type { CanonicalAuthorityEditorProps } from './components/CanonicalAuthorityEditor.js';
+export type { EditorCapabilityPreset } from './capabilityPresets.js';
+export type { ToolbarTools } from './toolbarTools.js';
+export { DEFAULT_TOOLBAR_TOOLS, resolveToolbarTools } from './toolbarTools.js';
 export { CanonicalEditorRuntime, createCanonicalEditorRuntime } from './canonicalEditorRuntime.js';
 export type { SmartEditorChange, SmartEditorCheckpoint, SmartEditorHandle } from './canonicalEditorRuntime.js';
 export type { MediaManagerAdapter, MediaItem, MediaSearchQuery } from './components/MediaManager.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { ClassicEditor } from './components/ClassicEditorAuthority.js';
 export { CanonicalAuthorityEditor } from './components/CanonicalAuthorityEditor.js';
+export { DEFAULT_TOOLBAR_TOOLS, resolveToolbarTools } from './toolbarTools.js';
 export { CanonicalEditorRuntime, createCanonicalEditorRuntime } from './canonicalEditorRuntime.js';
 export { DefaultMediaPicker } from './components/MediaPicker.js';
 export { SRTE_DEFAULT_CSS, ensureStyleSheet } from './theme.js';

package/dist/standalone/classic-editor-embed.js

@@ -44,7 +44,7 @@ function ClassicEditorHost(props, ref) {
                     }
                 }
                 catch { }
-            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, showFontSize: props.showFontSize, theme: props.theme, className: props.className }) }));
+            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, showFontSize: props.showFontSize, tools: props.tools, theme: props.theme, className: props.className }) }));
 }
 const ClassicEditorHostWithRef = React.forwardRef(ClassicEditorHost);
 function initClassicEditor(opts) {

package/dist/theme.d.ts

@@ -1,3 +1,3 @@
 export type SrteTheme = 'light' | 'dark';
-export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: var(--card, #ffffff);\n  --srte-modal-text: var(--foreground, #000000);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  /* --srte-primary on --srte-accent-bg measures 4.43:1, under WCAG AA's\n     4.5:1 for normal text - used only for the pressed toolbar-button state\n     (see .srte-tool-button[aria-pressed=\"true\"]), not a replacement for\n     --srte-primary generally. */\n  --srte-primary-pressed: #1d4ed8;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: var(--card, #1e293b);\n  --srte-modal-text: var(--foreground, #e0e0e0);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-primary-pressed: var(--srte-primary);\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-canonical-authority > .srte-editor[contenteditable] {\n  width: 100%;\n  padding: 16px 20px;\n  box-sizing: border-box;\n  border: 1px solid var(--srte-border);\n  border-radius: 0 0 var(--srte-radius) var(--srte-radius);\n  outline: none;\n  background: var(--srte-canvas);\n  color: var(--srte-foreground);\n  caret-color: var(--srte-foreground);\n  line-height: 1.6;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  /* var(--srte-primary) (#2563eb) on var(--srte-accent-bg) measured 4.43:1,\n     just under WCAG AA's 4.5:1 for normal text (axe-core, Phase 11 Tier 3) -\n     a dedicated, darker pressed-state color keeps the same hue family\n     while clearing the threshold, without changing --srte-primary's other,\n     already-compliant usages (e.g. against solid backgrounds). */\n  color: var(--srte-primary-pressed);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n/*\n * ToolbarDropdown's own menu panel (docs/bugs/\n * toolbar-dropdown-clipped-by-host-overflow-hidden.md): position:fixed with\n * JS-measured left/top (ToolbarPrimitives.tsx) instead of the default\n * position:absolute above, so it always escapes an ancestor host container's\n * own overflow:hidden regardless of DOM depth - MobileMoreMenu's overflow\n * menu (no data-srte-menu-fixed attribute) is unaffected and keeps its\n * existing position:absolute/right-anchored behavior.\n */\n.srte-menu[data-srte-menu-fixed=\"true\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal-leading-zero) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: \"\u25CF  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: \"\u25CB  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: \"\u25A0  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-outline\"] > li::marker {\n  content: counters(list-item, \".\") \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2756  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u25A1  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25A3  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25AA  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u279C  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25C6  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25CF  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2605  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n/*\n * @container (element width), not @media (viewport width): a host can embed\n * the editor at any fraction of the browser window - a split pane next to a\n * preview panel is the case that surfaced this (docs/bugs/\n * toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md). A\n * plain @media breakpoint here would fire based on the *window*, wrongly\n * switching tiers for an editor instance that's actually much narrower (or\n * wider) than the window - .srte-editor already establishes its own\n * container: srte-editor / inline-size (see the .srte-editor rule above),\n * so @container always reflects this specific instance's real rendered width regardless of host\n * layout, with no @media fallback needed (container queries have full\n * support across this project's three target engines).\n */\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  .srte-mobile-more .srte-menu {\n    left: auto;\n    right: 0;\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n/*\n * Wide-viewport promotion (docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md):\n * below this, the single 639px breakpoint above was this system's ONLY\n * threshold - every dropdown-grouped tool stayed hidden inside its dropdown\n * at every width from 640px up to and past a 2200px+ desktop, since nothing\n * ever measured or scaled with the extra room. A handful of tools frequent\n * enough to matter once there's genuinely spare room (Superscript,\n * Subscript, Text colour, Background colour, Font size, Font family, Remove\n * link, Insert formula, Special characters) get a standalone always-visible\n * ToolbarButton copy (data-srte-wide-promote, rendered directly in the\n * toolbar row) that appears past this breakpoint, while their existing\n * dropdown/mobile-menu ToolbarMenuItem copy (the exact same\n * data-srte-wide-promote attribute, on the .srte-menu-item element instead)\n * hides so the tool isn't offered twice. Below this breakpoint - including\n * all of mobile AND the 640-1439px tablet/typical-laptop band, which keeps\n * today's grouped-dropdown layout unchanged - the standalone copy stays\n * hidden and the dropdown copy is what's reachable.\n *\n * 1440px, not 1280px: Playwright's own default test viewport is exactly\n * 1280x720, and the vast majority of this suite's toolbar interactions run\n * at that default without ever calling page.setViewportSize - a 1280px\n * threshold would have flipped nearly every existing toolbar test's\n * dropdown-item locators (role=menuitem) over to CSS display:none out from\n * under them. 1440px clears that default with room to spare while still\n * comfortably covering \"wide desktop\" (the ~2264px width the original\n * report was filed against).\n *\n * @container only, no @media fallback - same reasoning as the mobile tier\n * above (docs/bugs/toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md):\n * a plain @media(min-width:1440px) fired whenever the *browser window* was\n * wide, even when this editor instance was embedded in a much narrower\n * split pane - promoting 9 extra buttons into a group with no room for\n * them, which squeezed/overlapped the group's existing buttons instead of\n * wrapping cleanly.\n */\n.srte-tool-button[data-srte-wide-promote=\"true\"] { display: none; }\n@container srte-editor (min-width: 1440px) {\n  .srte-tool-button[data-srte-wide-promote=\"true\"] { display: inline-flex; }\n  .srte-menu-item[data-srte-wide-promote=\"true\"] { display: none; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  /* --srte-muted, not the retired --srte-surface-subtle (docs/bugs/\n     srte-surface-subtle-not-host-theme-aware.md): every other neutral\n     surface/text token here (--srte-background, --srte-foreground,\n     --srte-muted, --srte-border) is defined as var(--host-token, fallback)\n     so it correctly follows a host's OWN light/dark state even if\n     .srte-dark never gets applied for some host-side wiring reason -\n     --srte-surface-subtle was the one exception, a bare hardcoded hex with\n     no host integration, which is exactly what let a real host (dark mode,\n     .srte-dark not reaching this editor instance) render this blockquote\n     with a light-mode background and dark-mode text simultaneously. */\n  background: var(--srte-muted);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] [data-smart-cell-selected=\"true\"] {\n  background: color-mix(in srgb, var(--srte-primary) 12%, var(--srte-canvas));\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--srte-primary) 65%, transparent);\n}\n.srte-editor [contenteditable][data-smart-cell-selection-active] ::selection {\n  background: transparent;\n  color: inherit;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-muted);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
+export declare const SRTE_DEFAULT_CSS = "\n.srte-editor {\n  --srte-background: var(--card, #ffffff);\n  --srte-canvas: var(--background, #ffffff);\n  --srte-foreground: var(--foreground, #0f172a);\n  --srte-muted: var(--muted, #f1f5f9);\n  --srte-muted-foreground: var(--muted-foreground, #64748b);\n  --srte-ring: var(--ring, #0284c7);\n  --srte-radius: var(--radius, 0.625rem);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #e2e8f0);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.35);\n  --srte-modal-backdrop-filter: blur(2px);\n  --srte-modal-bg: var(--card, #ffffff);\n  --srte-modal-text: var(--foreground, #000000);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);\n  --srte-accent: #0284c7;\n  --srte-accent-bg: rgba(2, 132, 199, 0.12);\n  --srte-danger: #dc2626;\n  --srte-primary: #2563eb;\n  /* --srte-primary on --srte-accent-bg measures 4.43:1, under WCAG AA's\n     4.5:1 for normal text - used only for the pressed toolbar-button state\n     (see .srte-tool-button[aria-pressed=\"true\"]), not a replacement for\n     --srte-primary generally. */\n  --srte-primary-pressed: #1d4ed8;\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #f3f4f6;\n  --srte-code-bg: #f6f8fa;\n  --srte-code-text: #24292f;\n}\n.srte-editor.srte-dark {\n  --srte-background: var(--card, #1e293b);\n  --srte-canvas: var(--background, #0f172a);\n  --srte-foreground: var(--foreground, #f8fafc);\n  --srte-muted: var(--muted, #334155);\n  --srte-muted-foreground: var(--muted-foreground, #94a3b8);\n  --srte-ring: var(--ring, #38bdf8);\n  --srte-bg: var(--srte-canvas);\n  --srte-text: var(--srte-foreground);\n  --srte-text-muted: var(--srte-muted-foreground);\n  --srte-border: var(--border, #334155);\n  --srte-border-light: var(--srte-border);\n  --srte-toolbar-bg: var(--srte-background);\n  --srte-input-bg: var(--srte-background);\n  --srte-input-text: var(--srte-foreground);\n  --srte-input-border: var(--srte-border);\n  --srte-modal-backdrop: rgba(0, 0, 0, 0.22);\n  --srte-modal-backdrop-filter: blur(10px) saturate(0.9);\n  --srte-modal-bg: var(--card, #1e293b);\n  --srte-modal-text: var(--foreground, #e0e0e0);\n  --srte-menu-bg: var(--srte-background);\n  --srte-menu-text: var(--srte-foreground);\n  --srte-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n  --srte-accent: #38bdf8;\n  --srte-accent-bg: rgba(56, 189, 248, 0.16);\n  --srte-danger: #ef4444;\n  --srte-primary: #3b82f6;\n  --srte-primary-pressed: var(--srte-primary);\n  --srte-on-primary: #ffffff;\n  --srte-cancel-bg: #333333;\n  --srte-code-bg: #111827;\n  --srte-code-text: #e5e7eb;\n}\n.srte-editor {\n  border-radius: var(--srte-radius);\n  font-family: \"IBM Plex Sans\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  container: srte-editor / inline-size;\n}\n.srte-canonical-authority > .srte-editor[contenteditable] {\n  width: 100%;\n  padding: 16px 20px;\n  box-sizing: border-box;\n  border: 1px solid var(--srte-border);\n  border-radius: 0 0 var(--srte-radius) var(--srte-radius);\n  outline: none;\n  background: var(--srte-canvas);\n  color: var(--srte-foreground);\n  caret-color: var(--srte-foreground);\n  line-height: 1.6;\n}\n.srte-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  min-height: 48px;\n  padding: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid var(--srte-border);\n  background: var(--srte-background);\n  color: var(--srte-foreground);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n}\n.srte-toolbar-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n  min-width: 0;\n}\n.srte-toolbar-group + .srte-toolbar-group::before {\n  content: \"\";\n  width: 1px;\n  height: 20px;\n  margin: 0 5px 0 3px;\n  background: var(--srte-border);\n}\n.srte-tool-button,\n.srte-toolbar select {\n  height: 32px;\n  min-width: 32px;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: 8px;\n  background: transparent;\n  color: var(--srte-foreground);\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.srte-tool-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.srte-toolbar select {\n  max-width: 132px;\n  padding: 0 26px 0 9px;\n  border-color: var(--srte-border);\n  background: var(--srte-input-bg);\n  cursor: pointer;\n}\n.srte-tool-button:hover,\n.srte-toolbar select:hover,\n.srte-toolbar-menu[open] > .srte-menu-trigger {\n  background: var(--srte-muted);\n  border-color: var(--srte-border);\n}\n.srte-tool-button.srte-active,\n.srte-tool-button[aria-pressed=\"true\"] {\n  /* var(--srte-primary) (#2563eb) on var(--srte-accent-bg) measured 4.43:1,\n     just under WCAG AA's 4.5:1 for normal text (axe-core, Phase 11 Tier 3) -\n     a dedicated, darker pressed-state color keeps the same hue family\n     while clearing the threshold, without changing --srte-primary's other,\n     already-compliant usages (e.g. against solid backgrounds). */\n  color: var(--srte-primary-pressed);\n  background: var(--srte-accent-bg);\n  border-color: color-mix(in srgb, var(--srte-primary) 35%, transparent);\n}\n.srte-tool-button:focus-visible,\n.srte-toolbar select:focus-visible,\n.srte-menu-item:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 1px;\n}\n.srte-tool-button:disabled,\n.srte-menu-item:disabled,\n.srte-toolbar select:disabled {\n  cursor: not-allowed;\n  opacity: .4;\n}\n.srte-toolbar-menu {\n  position: relative;\n}\n.srte-toolbar-menu > summary {\n  list-style: none;\n}\n.srte-toolbar-menu > summary::-webkit-details-marker {\n  display: none;\n}\n.srte-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 80;\n  min-width: 210px;\n  padding: 4px;\n  overflow: hidden;\n  border: 1px solid var(--srte-border);\n  border-radius: 12px;\n  background: var(--srte-menu-bg);\n  color: var(--srte-menu-text);\n  box-shadow: var(--srte-menu-shadow);\n}\n/*\n * ToolbarDropdown's own menu panel (docs/bugs/\n * toolbar-dropdown-clipped-by-host-overflow-hidden.md): position:fixed with\n * JS-measured left/top (ToolbarPrimitives.tsx) instead of the default\n * position:absolute above, so it always escapes an ancestor host container's\n * own overflow:hidden regardless of DOM depth - MobileMoreMenu's overflow\n * menu (no data-srte-menu-fixed attribute) is unaffected and keeps its\n * existing position:absolute/right-anchored behavior.\n */\n.srte-menu[data-srte-menu-fixed=\"true\"] {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n.srte-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 36px;\n  padding: 0 8px;\n  border: 0;\n  border-radius: 8px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: 500 13px/1 \"IBM Plex Sans\", ui-sans-serif, system-ui, sans-serif;\n  text-align: left;\n  white-space: nowrap;\n}\n.srte-menu-item:hover {\n  background: var(--srte-muted);\n}\n.srte-menu-check {\n  margin-left: auto;\n  color: var(--srte-primary);\n  font-weight: 700;\n}\n.srte-menu-separator {\n  height: 1px;\n  margin: 4px;\n  background: var(--srte-border);\n}\n.srte-mobile-more { display: none; }\n.srte-toolbar .srte-command-proxy { display: none; }\n.srte-split-control {\n  display: inline-flex;\n}\n.srte-split-control > .srte-tool-button:first-child {\n  border-radius: 8px 0 0 8px;\n}\n.srte-split-control > select {\n  width: 27px;\n  padding: 0;\n  border-radius: 0 8px 8px 0;\n  border-left: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  color: transparent;\n  background-color: var(--srte-muted);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li {\n  display: grid;\n  grid-template-columns: 1.1em minmax(0, 1fr);\n  column-gap: .45em;\n  align-items: start;\n  padding-left: 0;\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal-paren\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \")  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-decimal\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-alpha\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, upper-roman) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, upper-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-upper-roman\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, decimal) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: counter(list-item, decimal-leading-zero) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: counter(list-item, lower-alpha) \".  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-leading-zero\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: counter(list-item, lower-roman) \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"0\"] > li::marker {\n  content: \"\u25CF  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"1\"] > li::marker {\n  content: \"\u25CB  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"2\"] > li::marker,\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-disc\"][data-srte-list-depth=\"3\"] > li::marker {\n  content: \"\u25A0  \";\n}\n.srte-editor [contenteditable] ol[data-srte-list-preset=\"ordered-outline\"] > li::marker {\n  content: counters(list-item, \".\") \".  \";\n}\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2756  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-diamond\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u25A1  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25A3  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-square\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25AA  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u279C  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25C6  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25CF  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u2605  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-star\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"0\"] > li::marker { content: \"\u27A2  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"1\"] > li::marker { content: \"\u25CB  \"; }\n.srte-editor [contenteditable] ul[data-srte-list-preset=\"bullet-arrow-circle\"][data-srte-list-depth=\"2\"] > li::marker { content: \"\u25A0  \"; }\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check] {\n  display: inline-flex;\n  grid-column: 1;\n  grid-row: 1;\n  align-items: center;\n  justify-content: center;\n  width: 1.1em;\n  height: 1.6em;\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  appearance: none;\n  outline: none;\n  margin: 0;\n  line-height: 1.6;\n  vertical-align: top;\n  position: relative;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]:focus-visible {\n  outline: 2px solid var(--srte-ring);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check]::before {\n  content: \"\";\n  width: .9em;\n  height: .9em;\n  box-sizing: border-box;\n  border: 1.5px solid var(--srte-muted-foreground);\n  border-radius: 3px;\n  background: var(--srte-canvas);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::before {\n  border-color: var(--srte-primary);\n  background: var(--srte-primary);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--srte-on-primary) 25%, transparent);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > [data-srte-check][data-checked=\"true\"]::after {\n  content: \"\";\n  position: absolute;\n  width: .42em;\n  height: .22em;\n  border-left: 1.5px solid var(--srte-on-primary);\n  border-bottom: 1.5px solid var(--srte-on-primary);\n  transform: translateY(-.08em) rotate(-45deg);\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(p,h1,h2,h3,h4,h5,h6,blockquote,pre) {\n  grid-column: 2;\n  min-width: 0;\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul[data-srte-checklist=\"true\"] > li > :is(ul,ol) {\n  grid-column: 2;\n}\n.srte-editor:focus-within {\n  border-color: var(--srte-ring) !important;\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--srte-ring) 18%, transparent);\n}\n/*\n * @container (element width), not @media (viewport width): a host can embed\n * the editor at any fraction of the browser window - a split pane next to a\n * preview panel is the case that surfaced this (docs/bugs/\n * toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md). A\n * plain @media breakpoint here would fire based on the *window*, wrongly\n * switching tiers for an editor instance that's actually much narrower (or\n * wider) than the window - .srte-editor already establishes its own\n * container: srte-editor / inline-size (see the .srte-editor rule above),\n * so @container always reflects this specific instance's real rendered width regardless of host\n * layout, with no @media fallback needed (container queries have full\n * support across this project's three target engines).\n */\n@container srte-editor (max-width: 639px) {\n  .srte-toolbar { gap: 3px; padding: 6px; }\n  .srte-tool-button, .srte-toolbar select { height: 40px; min-width: 40px; }\n  .srte-toolbar-group[data-srte-priority=\"3\"],\n  .srte-toolbar-menu[data-srte-priority=\"2\"] { display: none; }\n  .srte-mobile-more { display: block; }\n  /* left/top are no longer set here - ToolbarPrimitives.tsx now computes\n     them via inline style (JS-measured, position:fixed, viewport-clamped;\n     see MobileMoreMenu's own doc comment), which always wins over any\n     value set here regardless of specificity or source order. Sizing/\n     scroll behavior stays defined here since inline positioning doesn't\n     touch those properties. */\n  .srte-mobile-more .srte-menu {\n    width: min(280px, calc(100vw - 16px));\n    min-width: 0;\n    max-height: min(70dvh, 480px);\n    overflow-x: hidden;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    -webkit-overflow-scrolling: touch;\n  }\n  .srte-menu-item { height: 40px; }\n}\n/*\n * Wide-viewport promotion (docs/bugs/toolbar-priority-collapse-fixed-threshold-no-wide-promotion.md):\n * below this, the single 639px breakpoint above was this system's ONLY\n * threshold - every dropdown-grouped tool stayed hidden inside its dropdown\n * at every width from 640px up to and past a 2200px+ desktop, since nothing\n * ever measured or scaled with the extra room. A handful of tools frequent\n * enough to matter once there's genuinely spare room (Superscript,\n * Subscript, Text colour, Background colour, Font size, Font family, Remove\n * link, Insert formula, Special characters) get a standalone always-visible\n * ToolbarButton copy (data-srte-wide-promote, rendered directly in the\n * toolbar row) that appears past this breakpoint, while their existing\n * dropdown/mobile-menu ToolbarMenuItem copy (the exact same\n * data-srte-wide-promote attribute, on the .srte-menu-item element instead)\n * hides so the tool isn't offered twice. Below this breakpoint - including\n * all of mobile AND the 640-1439px tablet/typical-laptop band, which keeps\n * today's grouped-dropdown layout unchanged - the standalone copy stays\n * hidden and the dropdown copy is what's reachable.\n *\n * 1440px, not 1280px: Playwright's own default test viewport is exactly\n * 1280x720, and the vast majority of this suite's toolbar interactions run\n * at that default without ever calling page.setViewportSize - a 1280px\n * threshold would have flipped nearly every existing toolbar test's\n * dropdown-item locators (role=menuitem) over to CSS display:none out from\n * under them. 1440px clears that default with room to spare while still\n * comfortably covering \"wide desktop\" (the ~2264px width the original\n * report was filed against).\n *\n * @container only, no @media fallback - same reasoning as the mobile tier\n * above (docs/bugs/toolbar-wide-promotion-fires-on-viewport-width-not-container-width.md):\n * a plain @media(min-width:1440px) fired whenever the *browser window* was\n * wide, even when this editor instance was embedded in a much narrower\n * split pane - promoting 9 extra buttons into a group with no room for\n * them, which squeezed/overlapped the group's existing buttons instead of\n * wrapping cleanly.\n */\n.srte-tool-button[data-srte-wide-promote=\"true\"] { display: none; }\n@container srte-editor (min-width: 1440px) {\n  .srte-tool-button[data-srte-wide-promote=\"true\"] { display: inline-flex; }\n  .srte-menu-item[data-srte-wide-promote=\"true\"] { display: none; }\n}\n.srte-editor [contenteditable] blockquote {\n  border-left: 4px solid var(--srte-accent);\n  margin: 0.75em 0;\n  padding: 0.5em 1em;\n  /* --srte-muted, not the retired --srte-surface-subtle (docs/bugs/\n     srte-surface-subtle-not-host-theme-aware.md): every other neutral\n     surface/text token here (--srte-background, --srte-foreground,\n     --srte-muted, --srte-border) is defined as var(--host-token, fallback)\n     so it correctly follows a host's OWN light/dark state even if\n     .srte-dark never gets applied for some host-side wiring reason -\n     --srte-surface-subtle was the one exception, a bare hardcoded hex with\n     no host integration, which is exactly what let a real host (dark mode,\n     .srte-dark not reaching this editor instance) render this blockquote\n     with a light-mode background and dark-mode text simultaneously. */\n  background: var(--srte-muted);\n  color: var(--srte-text);\n}\n.srte-editor [contenteditable] p,\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  color: inherit;\n}\n.srte-editor [contenteditable] p {\n  display: block;\n  margin: 0 0 0.75em;\n  font-size: 1em;\n  font-weight: 400;\n  line-height: 1.6;\n}\n.srte-editor [contenteditable] p[data-srte-caret-boundary=\"true\"] {\n  min-height: 1.6em;\n}\n.srte-editor [contenteditable] h1,\n.srte-editor [contenteditable] h2,\n.srte-editor [contenteditable] h3 {\n  display: block;\n  margin: 0.75em 0 0.4em;\n  font-weight: 700;\n  line-height: 1.25;\n}\n.srte-editor [contenteditable] h1 {\n  font-size: 2em;\n}\n.srte-editor [contenteditable] h2 {\n  font-size: 1.5em;\n}\n.srte-editor [contenteditable] h3 {\n  font-size: 1.25em;\n}\n.srte-editor [contenteditable] > :first-child {\n  margin-top: 0;\n}\n.srte-editor [contenteditable] ul {\n  list-style-type: disc;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] ol {\n  list-style-type: decimal;\n  list-style-position: outside;\n  margin: 0.75em 0;\n  padding-left: 1.75em;\n}\n.srte-editor [contenteditable] li {\n  display: list-item;\n  margin: 0.25em 0;\n  padding-left: 0.25em;\n}\n.srte-editor [contenteditable] li::marker {\n  color: currentColor;\n}\n.srte-editor [contenteditable] table {\n  width: 100%;\n  margin: 0.75em 0;\n  border-collapse: collapse;\n}\n.srte-editor [contenteditable] th,\n.srte-editor [contenteditable] td {\n  padding: 8px;\n  border: 1px solid var(--srte-border);\n  vertical-align: top;\n}\n.srte-editor [contenteditable] [data-smart-cell-selected=\"true\"] {\n  background: color-mix(in srgb, var(--srte-primary) 12%, var(--srte-canvas));\n  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--srte-primary) 65%, transparent);\n}\n.srte-editor [contenteditable][data-smart-cell-selection-active] ::selection {\n  background: transparent;\n  color: inherit;\n}\n.srte-editor [contenteditable] th {\n  background: var(--srte-muted);\n  font-weight: 600;\n  text-align: left;\n}\n.srte-editor [contenteditable] td > h1,\n.srte-editor [contenteditable] td > h2,\n.srte-editor [contenteditable] td > h3,\n.srte-editor [contenteditable] th > h1,\n.srte-editor [contenteditable] th > h2,\n.srte-editor [contenteditable] th > h3 {\n  margin: 0 0 0.4em;\n  overflow-wrap: anywhere;\n}\n.srte-editor [contenteditable] pre {\n  display: block;\n  margin: 0.75em 0;\n  padding: 12px 14px;\n  overflow-x: auto;\n  border: 1px solid var(--srte-border);\n  border-radius: 6px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n  line-height: 1.55;\n  white-space: pre-wrap;\n}\n.srte-editor [contenteditable] pre code {\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n}\n.srte-editor [contenteditable] code:not(pre code) {\n  padding: 0.1em 0.35em;\n  border-radius: 3px;\n  background: var(--srte-code-bg);\n  color: var(--srte-code-text);\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n  font-size: 0.9em;\n}\n.srte-editor [contenteditable] a,\n.srte-editor [contenteditable] a:visited {\n  color: var(--srte-primary) !important;\n  text-decoration: underline !important;\n  text-decoration-thickness: 1px !important;\n  text-underline-offset: 2px !important;\n  cursor: pointer;\n}\n.srte-editor [contenteditable] a:hover {\n  color: var(--srte-accent) !important;\n}\n.srte-editor [contenteditable] a:focus-visible {\n  outline: 2px solid var(--srte-accent);\n  outline-offset: 2px;\n}\n.srte-editor [contenteditable] sub,\n.srte-editor [contenteditable] sup {\n  line-height: 0;\n}\n";
 export declare function ensureStyleSheet(): void;

package/dist/theme.js

@@ -426,9 +426,13 @@ export const SRTE_DEFAULT_CSS = `
   .srte-toolbar-group[data-srte-priority="3"],
   .srte-toolbar-menu[data-srte-priority="2"] { display: none; }
   .srte-mobile-more { display: block; }
+  /* left/top are no longer set here - ToolbarPrimitives.tsx now computes
+     them via inline style (JS-measured, position:fixed, viewport-clamped;
+     see MobileMoreMenu's own doc comment), which always wins over any
+     value set here regardless of specificity or source order. Sizing/
+     scroll behavior stays defined here since inline positioning doesn't
+     touch those properties. */
   .srte-mobile-more .srte-menu {
-    left: auto;
-    right: 0;
     width: min(280px, calc(100vw - 16px));
     min-width: 0;
     max-height: min(70dvh, 480px);

package/dist/toolbarTools.d.ts

@@ -0,0 +1,89 @@
+/**
+ * A named, per-tool toolbar-visibility toggle - "developers should be able
+ * to hide tools they don't want their users to see" (e.g. Version History,
+ * Review, Video, Audio), without wrapping/overriding the component or
+ * patching it with CSS. This is a UI-visibility layer, distinct from and
+ * composed with (never replacing) two existing, deeper mechanisms:
+ *
+ * - `EditorCapabilityPreset` (capabilityPresets.ts) controls real document
+ *   *capability* - which plugins the schema itself is built with (today,
+ *   only `table`). Excluding a plugin there already, correctly, hides its
+ *   toolbar entry (`tablesEnabled`) - this file does not duplicate that.
+ * - Provider presence (`mediaProvider`, `versionProvider`, `commentProvider`,
+ *   `suggestionProvider`) already gates whether a feature can function at
+ *   all. `tools` never turns a tool ON when its required provider is
+ *   absent - see `resolveToolbarTools`'s own doc comment.
+ *
+ * `tools` is for the remaining, larger set of toolbar entries that have no
+ * other on/off mechanism at all today (Bold, Italic, Video, Audio, Special
+ * characters, Version history, ...) - a host that wants to hide any of
+ * these previously had no supported way to do so.
+ *
+ * Deliberately NOT covered by individual keys (scoping decision, not an
+ * oversight): purely contextual actions that only ever act on something
+ * already selected - block move/indent, list-item indent/move/restart
+ * numbering, table row/column/cell operations, and the selected-media
+ * edit/resize/delete actions. None of these have independent product
+ * meaning (there is no real case for "let people insert a table but hide
+ * its 'Add row' action") - they stay governed solely by their owning
+ * top-level tool (`insertTable`, `bulletedList`/`numberedList`/`checklist`,
+ * `link`, `image`/`video`/`audio`).
+ */
+export interface ToolbarTools {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    code: boolean;
+    superscript: boolean;
+    subscript: boolean;
+    textColor: boolean;
+    backgroundColor: boolean;
+    fontSize: boolean;
+    fontFamily: boolean;
+    /** The Paragraph/Heading 1-6/Code block <select>. */
+    blockType: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    quote: boolean;
+    bulletedList: boolean;
+    numberedList: boolean;
+    checklist: boolean;
+    /** The named multi-level marker preset picker (decimal/alpha/roman/outline/bullet-glyph) - independent of the plain list-type toggles above. */
+    listPreset: boolean;
+    link: boolean;
+    removeLink: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    image: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    video: boolean;
+    /** Requires `mediaProvider` to actually render - see resolveToolbarTools. */
+    audio: boolean;
+    insertFormula: boolean;
+    specialCharacters: boolean;
+    /** Requires the schema to actually have the table plugin (EditorCapabilityPreset) - see resolveToolbarTools. */
+    insertTable: boolean;
+    import: boolean;
+    saveAsHtml: boolean;
+    saveAsMarkdown: boolean;
+    saveAsWord: boolean;
+    saveAsPdf: boolean;
+    saveAsSmartRte: boolean;
+    /** Requires `versionProvider` to actually render. */
+    versionHistory: boolean;
+    /** Bundles "Add comment" and the Comments panel toggle - requires `commentProvider` to actually render. */
+    comments: boolean;
+    /** Bundles Suggest insertion/deletion/removal, the Suggestions panel toggle, and "Show edits" (track changes) - requires `suggestionProvider` to actually render. */
+    suggestions: boolean;
+    undo: boolean;
+    redo: boolean;
+}
+/** Every tool defaults to visible - an existing consumer who never passes `tools` sees 100% unchanged behavior. */
+export declare const DEFAULT_TOOLBAR_TOOLS: ToolbarTools;
+/**
+ * Merges a host's partial `tools` override onto the all-enabled default -
+ * a host only ever needs to name the tools they want OFF.
+ */
+export declare const resolveToolbarTools: (tools?: Partial<ToolbarTools>) => ToolbarTools;

package/dist/toolbarTools.js

@@ -0,0 +1,16 @@
+/** Every tool defaults to visible - an existing consumer who never passes `tools` sees 100% unchanged behavior. */
+export const DEFAULT_TOOLBAR_TOOLS = {
+    bold: true, italic: true, underline: true, strikethrough: true, code: true,
+    superscript: true, subscript: true, textColor: true, backgroundColor: true, fontSize: true, fontFamily: true,
+    blockType: true, alignLeft: true, alignCenter: true, alignRight: true, alignJustify: true, quote: true,
+    bulletedList: true, numberedList: true, checklist: true, listPreset: true,
+    link: true, removeLink: true, image: true, video: true, audio: true, insertFormula: true, specialCharacters: true, insertTable: true,
+    import: true, saveAsHtml: true, saveAsMarkdown: true, saveAsWord: true, saveAsPdf: true, saveAsSmartRte: true,
+    versionHistory: true, comments: true, suggestions: true,
+    undo: true, redo: true,
+};
+/**
+ * Merges a host's partial `tools` override onto the all-enabled default -
+ * a host only ever needs to name the tools they want OFF.
+ */
+export const resolveToolbarTools = (tools) => ({ ...DEFAULT_TOOLBAR_TOOLS, ...tools });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",