@terra-symposium/docs 0.1.17 → 0.1.72

package/lib-dist/{terra → components/terra}/pages/docs/_toolbar.js

@@ -9,48 +9,56 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 IMPORTS
 //////////////////////////////////////////////////*/
 // API
-import { $attachmentFilter, clearTransition, codeViewOf, isDocBody, setTransition, toolbarFocusValue, useAtom } from './_helpers.js';
+import { clearTransition, setTransition, useAtom } from '../../../../lib/terra/docs/state.js';
+import { $attachmentFilter } from '../../../../lib/terra/docs/attachments.js';
+import { codeViewOf } from '../../../../lib/terra/docs/editor-dom.js';
+import { FindReplace } from './_toolbar-find-replace.js';
+import { toolbarFocusValue } from '../../../../lib/terra/docs/toolbar.js';
+import { isDocBody } from '../../../../lib/terra/runtime/types.js';
 import { $createHeadingNode } from '@lexical/rich-text';
 import { $createParagraphNode, $getNearestNodeFromDOMNode, $isElementNode } from 'lexical';
-import { actions } from '../../runtime/action-proxy.js';
-import { docsRootPath } from '../../runtime/shared.js';
-import { cn, notify } from '../../runtime/runtime.js';
-import { components as repoComponents } from './_custom.js';
-import { dirname, toPascal } from '../../runtime/shared.js';
+import { actions } from '../../../../lib/terra/runtime/action-proxy.js';
+import { dirname, docsRootPath, toPascal } from '../../../../lib/terra/runtime/shared.js';
+import { cn, notify } from '../../../../lib/terra/runtime/runtime.js';
+import { components as repoComponents } from '../../../../lib/terra/custom-components.js';
 import { redo, redoDepth, undo, undoDepth } from '@codemirror/commands';
-import { stringifyDocBody } from '../../runtime/content.js';
+import { stringifyDocBody } from '../../../../lib/terra/runtime/content/document-markdown.js';
 import { toast } from 'sonner';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { getDocsHostAdapter } from '../../../host-runtime.js';
+import { getDocsHostAdapter } from '../../../../lib/host-runtime.js';
 // COMPONENTS
-import * as TerraQualityRegex from '../../regex.mjs';
+import * as TerraQualityRegex from '../../../../lib/terra/regex.mjs';
 import React from 'react';
-import { TextTooltip, TooltipProvider } from '@terra-symposium/styling/ui/terra-original';
-import { ArrowLeft as LeftArrowIcon, ArrowRight as RightArrowIcon, ArrowUpRight as PopOutIcon, ButtonCentered as FullWordIcon, CaretDown as CaretDownIcon, CharacterPatterns as ReplaceIcon, CharacterSentenceCase as CaseIcon, DataShare as ShareIcon, Image as ImageIcon, Link as LinkIcon, ListBulleted as BulletListIcon, ListNumbered as NumberListIcon, Paste as PasteIcon, Redo as RedoIcon, RepoSourceCode as ModuleIcon, Search as SearchIcon, Task as CheckListIcon, TextBold as BoldIcon, TextFont as TextFontIcon, TextItalic as ItalicIcon, TextStrikethrough as StrikethroughIcon, TextUnderline as UnderlineIcon, Undo as UndoIcon, } from '@carbon/icons-react';
-import { Button as UiButton } from '@terra-symposium/styling/ui/terra-original';
-import { ButtonGroup } from '@terra-symposium/styling/ui/terra-original';
+import { TextTooltip, TooltipProvider } from '@terra-symposium/styling/ui';
+import { ArrowUpRight as PopOutIcon, CaretDown as CaretDownIcon, DataShare as ShareIcon, Image as ImageIcon, Link as LinkIcon, ListBulleted as BulletListIcon, ListNumbered as NumberListIcon, Paste as PasteIcon, Redo as RedoIcon, RepoSourceCode as ModuleIcon, Search as SearchIcon, Task as CheckListIcon, TextBold as BoldIcon, TextFont as TextFontIcon, TextItalic as ItalicIcon, TextStrikethrough as StrikethroughIcon, TextUnderline as UnderlineIcon, Undo as UndoIcon, } from '@carbon/icons-react';
+import { Button as UiButton } from '@terra-symposium/styling/ui';
+import { ButtonGroup } from '@terra-symposium/styling/ui';
 import { CodeBlock } from '../../editor/docs/_CodeBlock.js';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@terra-symposium/styling/ui/terra-original';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '@terra-symposium/styling/ui/terra-original';
-import { EditStateCtx } from './_helpers.js';
-import { ErrorBoundary } from '../../runtime/ui.js';
-import { Input } from '@terra-symposium/styling/ui/terra-original';
-import { Label } from '@terra-symposium/styling/ui/terra-original';
-import { Popover, PopoverContent, PopoverTrigger } from '@terra-symposium/styling/ui/terra-original';
-import { SearchEmpty } from '@terra-symposium/styling/ui/terra-original';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@terra-symposium/styling/ui/terra-original';
-import { Textarea } from '@terra-symposium/styling/ui/terra-original';
-import { Toggle } from '@terra-symposium/styling/ui/terra-original';
-import { ToggleGroup, ToggleGroupItem } from '@terra-symposium/styling/ui/terra-original';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@terra-symposium/styling/ui';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@terra-symposium/styling/ui';
+import { EditStateCtx } from '../../../../lib/terra/docs/state.js';
+import { ErrorBoundary } from '../../ui.js';
+import { Input } from '@terra-symposium/styling/ui';
+import { Label } from '@terra-symposium/styling/ui';
+import { Popover, PopoverContent, PopoverTrigger } from '@terra-symposium/styling/ui';
+import { SearchEmpty } from '@terra-symposium/styling/ui';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from '@terra-symposium/styling/ui';
+import { ToggleGroup, ToggleGroupItem } from '@terra-symposium/styling/ui';
 // DATA
-import { ATTCH_TYPES } from './_helpers.js';
+import { ATTCH_TYPES } from '../../../../lib/terra/docs/attachments.js';
 import { DOCS_BLOCK_ICONS } from './_icons.js';
-import { EMPTY_NODES } from '../../runtime/nodes.js';
+import { EMPTY_NODES } from '../../../../lib/terra/runtime/nodes.js';
 /*//////////////////////////////////////////////////
 CONFIG
 //////////////////////////////////////////////////*/
 const FIND_WORD = String.raw `[\p{L}\p{N}_]`;
-const BLIND_REGEX = [/<[^>]+>/gu, /^[\t ]*(?:#{1,6}|>+|[-+*]|\d+\.)[\t ]*/gmu, /:::[^\n]*|===|\|\|\|/gu, /[`*_~[\]()]/gu, /\s+/gu];
+const BLIND_REGEX = [
+    /<[^>]+>/gu,
+    /^[\t ]*(?:#{1,6}|>+|[-+*]|\d+\.)[\t ]*/gmu,
+    /:::[^\n]*|===|\|\|\|/gu,
+    /[`*_~[\]()]/gu,
+    /\s+/gu,
+];
 const ICON_CLASS = 'size-4 text-primary-11';
 const SECONDARY_TEXT_CLASS = 'text-xs text-primary-11';
 const MENU_GAP_CLASS = 'gap-2';
@@ -149,7 +157,7 @@ COMPONENTS
 //////////////////////////////////////////////////*/
 const Button = React.forwardRef(function Button({ children: c, className: v, disabled: d, lbl: l, shortcut: s, onClick: o, onMouseDown: r, active: a, ...p }, x) {
     void a;
-    return (_jsx(TextTooltip, { content: s ? `${l} (${s})` : l, side: 'top', align: 'center', delayDuration: 400, children: _jsx(UiButton, { ref: x, variant: 'ghost', size: 'xs', "aria-label": l, disabled: d, onClick: o, onMouseDown: r, className: cn('inline-flex h-6 !p-0.5 shadow-none', v), ...p, children: c }) }));
+    return (_jsx(TextTooltip, { content: s ? `${l} (${s})` : l, side: "top", align: "center", delayDuration: 400, children: _jsx(UiButton, { ref: x, variant: "ghost", size: "xs", "aria-label": l, disabled: d, onClick: o, onMouseDown: r, className: cn('inline-flex h-6 !p-0.5 shadow-none', v), ...p, children: c }) }));
 });
 Button.displayName = 'Button';
 /**
@@ -165,13 +173,16 @@ Button.displayName = 'Button';
  */
 function Mode({ mode, onModeChange, disabled, editable, size = 'xs', }) {
     void editable;
-    return (_jsxs(Select, { size: size, disabled: disabled, value: mode, onValueChange: v => {
+    return (_jsxs(Select, { size: size, disabled: disabled, value: mode, onValueChange: (v) => {
             const n = (v || 'view');
             if (mode === n)
                 return;
             setTransition(`to-${n}`);
             onModeChange(n);
-        }, children: [_jsx(SelectTrigger, { className: 'w-[150px]', "aria-label": 'Mode', children: _jsx(SelectValue, { placeholder: 'Mode' }) }), _jsx(SelectContent, { align: 'start', children: (editable ? ['view', 'edit', 'attachments'] : ['view', 'attachments']).map(o => _jsx(SelectItem, { value: o, children: o[0].toUpperCase() + o.slice(1) }, o)) })] }));
+        }, children: [_jsx(SelectTrigger, { "aria-label": "Mode", 
+                // Match the original full-row selector in View/Edit. Attachments adds
+                // its type filters beside this control, so only that mode sizes to fit.
+                className: mode === 'attachments' ? 'w-fit' : undefined, children: _jsx(SelectValue, { placeholder: "Mode" }) }), _jsx(SelectContent, { align: 'start', children: (editable ? ['view', 'edit', 'attachments'] : ['view', 'attachments']).map(o => _jsx(SelectItem, { value: o, children: o[0].toUpperCase() + o.slice(1) }, o)) })] }));
 }
 /**
  * Renders Docs-specific controls beside a content editor toolbar.
@@ -184,17 +195,17 @@ function Mode({ mode, onModeChange, disabled, editable, size = 'xs', }) {
  * @return The mode, history, save, or version actions supported by the active Docs editor toolbar.
  */
 const TOOLBAR_COMPONENTS = {
-    DocsToolbarActions({ activeMode: aMode, editable, size = 'xs', toolbar }) {
+    DocsToolbarActions({ activeMode, editable, size = 'xs', toolbar, }) {
         const edit = useContext(EditStateCtx);
         const [versions, setVersions] = useState([]);
         const [historyOpen, setHistoryOpen] = useState(false);
         const [selectedVersionId, setSelectedVersionId] = useState('');
-        const ready = !!toolbar;
-        const selectedVersion = versions.find(v => v.savedAt === selectedVersionId);
+        const historyEnabled = getDocsHostAdapter()?.capabilities.history !== false;
+        const selectedVersion = versions.find((version) => version.savedAt === selectedVersionId);
         const preview = useMemo(() => parseVerBody(selectedVersion), [selectedVersion]);
         useEffect(() => {
             let live = true;
-            if (!editable || !toolbar?.path || !historyOpen) {
+            if (!editable || !historyEnabled || !toolbar?.path || !historyOpen) {
                 setVersions([]);
                 return;
             }
@@ -216,65 +227,71 @@ const TOOLBAR_COMPONENTS = {
                     if (live && Array.isArray(data))
                         setVersions(data);
                 }
-                catch (err) {
-                    console.error('[Toolbar:versions] load-failed', { path, error: err });
-                    toast.error(err instanceof Error ? err.message : 'Failed to load doc versions.');
+                catch (error) {
+                    console.error('[Toolbar:versions] load-failed', { path, error });
+                    toast.error(error instanceof Error ? error.message : 'Failed to load doc versions.');
                 }
             })();
             return () => {
                 live = false;
             };
-        }, [editable, historyOpen, toolbar?.path]);
+        }, [editable, historyEnabled, historyOpen, toolbar?.path]);
         useEffect(() => {
             if (historyOpen && !selectedVersionId && versions[0])
                 setSelectedVersionId(versions[0].savedAt);
         }, [historyOpen, selectedVersionId, versions]);
-        const save = async (e) => {
-            e.preventDefault();
+        const save = async (event) => {
+            event.preventDefault();
             if (!toolbar?.save)
                 return;
             try {
-                await toolbar.save();
+                await Promise.resolve(toolbar.save());
             }
-            catch (err) {
-                console.error('[Docs:save] failed', err);
-                toast.error(err instanceof Error ? err.message : 'Unable to save document.');
+            catch (error) {
+                console.error('[Docs:save] failed', error);
+                toast.error(error instanceof Error ? error.message : 'Unable to save document.');
             }
         };
         useEffect(() => {
-            if (aMode === 'view')
+            if (activeMode === 'view')
                 return;
-            const onKeyDown = (e) => {
-                if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's')
-                    void save(e);
+            const onKeyDown = (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 's')
+                    void save(event);
             };
             document.addEventListener('keydown', onKeyDown);
-            return () => {
-                document.removeEventListener('keydown', onKeyDown);
-            };
-        }, [aMode, toolbar]);
+            return () => document.removeEventListener('keydown', onKeyDown);
+        }, [activeMode, toolbar]);
         if (!editable)
             return null;
-        return (_jsx(TooltipProvider, { children: _jsxs("div", { className: 'flex items-center gap-1', "data-docs-toolbar-actions": true, children: [_jsx(Mode, { editable: editable, mode: aMode, size: size, disabled: !ready, onModeChange: m => {
+        return (_jsx(TooltipProvider, { children: _jsxs("div", { className: "flex items-center gap-1", "data-docs-toolbar-actions": true, children: [_jsx(Mode, { editable: editable, mode: activeMode, size: size, disabled: !toolbar, onModeChange: (mode) => {
                             if (!toolbar)
                                 return;
-                            toolbar.setMode(m).catch(e => {
-                                console.error('[Toolbar:mode] change-failed', { error: e, mode: m });
-                                toast.error(e instanceof Error ? e.message : 'Failed to change mode.');
+                            void toolbar.setMode(mode).catch((error) => {
+                                console.error('[Toolbar:mode] change-failed', { mode, error });
+                                toast.error(error instanceof Error ? error.message : 'Failed to change mode.');
                                 clearTransition();
                             });
-                        } }), aMode !== 'view' && aMode !== 'attachments' && (_jsx(_Fragment, { children: _jsxs(ButtonGroup, { children: [_jsx(TextTooltip, { content: 'Save (\u2318S)', side: 'top', align: 'center', delayDuration: 400, children: _jsx(UiButton, { size: size, disabled: !ready || !(toolbar?.dirty ?? false), loading: (toolbar?.busy ?? null) === 'saving', onMouseDown: preserveSel, onClick: e => void save(e), children: "Save" }) }), _jsx(TextTooltip, { content: 'Version History', side: 'top', align: 'center', delayDuration: 400, children: _jsx(UiButton, { size: size, className: 'px-0.5', disabled: !ready, "aria-label": 'Version History', onMouseDown: preserveSel, onClick: () => {
-                                            if (versions.length > 0 && !selectedVersionId)
-                                                setSelectedVersionId(versions[0].savedAt);
-                                            setHistoryOpen(true);
-                                        }, children: _jsx(CaretDownIcon, {}) }) }), _jsx(Dialog, { open: historyOpen, onOpenChange: setHistoryOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Version History" }), _jsx(DialogDescription, { className: 'sr-only', children: "Select a version to preview and restore." }), _jsxs(Select, { value: selectedVersionId, onValueChange: setSelectedVersionId, children: [_jsx(SelectTrigger, { className: 'h-14', "aria-label": 'Select a version', children: _jsx(SelectValue, { placeholder: 'Select a version' }) }), _jsx(SelectContent, { children: versions.map(v => (_jsx(SelectItem, { value: v.savedAt, children: _jsxs("span", { className: 'flex flex-col text-left', children: [_jsxs("span", { children: [v.title, " (", new Date(v.savedAt).toLocaleString(), ")"] }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: v.description })] }) }, v.savedAt))) })] })] }), _jsx("div", { className: 'min-h-0 flex-1 overflow-y-auto', children: _jsx(CodeBlock, { tone: 'view', language: 'mdx', docsSource: true, code: preview.markdown.trim() || ' ' }) }), _jsxs(DialogFooter, { children: [_jsx(UiButton, { variant: 'ghost', onClick: () => setHistoryOpen(false), children: "Cancel" }), _jsx(UiButton, { disabled: !selectedVersion, onClick: () => {
-                                                            if (!edit || !selectedVersionId)
-                                                                return;
-                                                            edit.update?.({ content: preview.body, description: selectedVersion?.description || '', source: preview.markdown, title: selectedVersion?.title || '' });
-                                                            (edit.setCode ?? edit.setSrc)?.(preview.markdown);
-                                                            setHistoryOpen(false);
-                                                            notify({ error: null, fallback: 'Restored version to local draft. Save to apply.' });
-                                                        }, children: "Restore" })] })] }) })] }) }))] }) }));
+                        } }), activeMode === 'edit' && (_jsxs(ButtonGroup, { children: [_jsx(TextTooltip, { content: "Save (\u2318S)", side: "top", align: "center", delayDuration: 400, children: _jsx(UiButton, { size: size, disabled: !toolbar || !toolbar.dirty, loading: toolbar?.busy === 'saving', onMouseDown: preserveSel, onClick: (event) => void save(event), children: "Save" }) }), historyEnabled && (_jsx(TextTooltip, { content: "Version History", side: "top", align: "center", delayDuration: 400, children: _jsx(UiButton, { size: size, className: "px-0.5", disabled: !toolbar, "aria-label": "Version History", onMouseDown: preserveSel, onClick: () => {
+                                        if (versions.length > 0 && !selectedVersionId)
+                                            setSelectedVersionId(versions[0].savedAt);
+                                        setHistoryOpen(true);
+                                    }, children: _jsx(CaretDownIcon, {}) }) })), _jsx(Dialog, { open: historyOpen, onOpenChange: setHistoryOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Version History" }), _jsx(DialogDescription, { className: "sr-only", children: "Select a version to preview and restore." }), _jsxs(Select, { value: selectedVersionId, onValueChange: setSelectedVersionId, children: [_jsx(SelectTrigger, { className: "h-14", "aria-label": "Select a version", children: _jsx(SelectValue, { placeholder: "Select a version" }) }), _jsx(SelectContent, { children: versions.map((version) => (_jsx(SelectItem, { value: version.savedAt, children: _jsxs("span", { className: "flex flex-col text-left", children: [_jsxs("span", { children: [version.title, " (", new Date(version.savedAt).toLocaleString(), ")"] }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: version.description })] }) }, version.savedAt))) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(CodeBlock, { tone: "view", language: "mdx", docsSource: true, code: preview.markdown.trim() || ' ' }) }), _jsxs(DialogFooter, { children: [_jsx(UiButton, { variant: "ghost", onClick: () => setHistoryOpen(false), children: "Cancel" }), _jsx(UiButton, { disabled: !selectedVersion, onClick: () => {
+                                                        if (!edit || !selectedVersionId)
+                                                            return;
+                                                        edit.update({
+                                                            content: preview.body,
+                                                            description: selectedVersion?.description || '',
+                                                            source: preview.markdown,
+                                                            title: selectedVersion?.title || '',
+                                                        });
+                                                        (edit.setCode ?? edit.setSrc)?.(preview.markdown);
+                                                        setHistoryOpen(false);
+                                                        notify({
+                                                            error: null,
+                                                            fallback: 'Restored version to local draft. Save to apply.',
+                                                        });
+                                                    }, children: "Restore" })] })] }) })] }))] }) }));
     },
     /**
      * Undo and Redo control group dynamically checking CodeMirror depth levels.
@@ -286,9 +303,12 @@ const TOOLBAR_COMPONENTS = {
      *
      * @return {JSX.Element} The paired undo/redo button group.
      */
-    Undo({ onMouseDown, disabled, adapter }) {
+    Undo({ onMouseDown, disabled, adapter, }) {
         // STATES
-        const [state, setState] = useState({ redo: false, undo: false });
+        const [state, setState] = useState({
+            redo: false,
+            undo: false,
+        });
         // INIT
         useEffect(() => {
             let frame = 0;
@@ -297,8 +317,10 @@ const TOOLBAR_COMPONENTS = {
              */
             const sync = () => {
                 const view = codeViewOf();
-                const n = view ? { redo: redoDepth(view.state) > 0, undo: undoDepth(view.state) > 0 } : { redo: false, undo: false };
-                setState(c => (c.undo === n.undo && c.redo === n.redo ? c : n));
+                const n = view
+                    ? { redo: redoDepth(view.state) > 0, undo: undoDepth(view.state) > 0 }
+                    : { redo: false, undo: false };
+                setState((c) => (c.undo === n.undo && c.redo === n.redo ? c : n));
             };
             sync();
             /**
@@ -308,21 +330,33 @@ const TOOLBAR_COMPONENTS = {
                 cancelAnimationFrame(frame);
                 frame = requestAnimationFrame(sync);
             };
-            ['focusin', 'keyup', 'mouseup'].forEach(e => {
+            ['focusin', 'keyup', 'mouseup'].forEach((e) => {
                 document.addEventListener(e, refresh, true);
             });
             return () => {
                 cancelAnimationFrame(frame);
-                ['focusin', 'keyup', 'mouseup'].forEach(e => {
+                ['focusin', 'keyup', 'mouseup'].forEach((e) => {
                     document.removeEventListener(e, refresh, true);
                 });
             };
         }, []);
         // RENDER
         return (_jsx(ButtonGroup, { children: [
-                { lbl: 'Undo', canFire: adapter?.undoable ?? state.undo, action: adapter?.undo ?? undo, icon: UndoIcon, shortcut: '⌘Z' },
-                { lbl: 'Redo', canFire: adapter?.redoable ?? state.redo, action: adapter?.redo ?? redo, icon: RedoIcon, shortcut: '⌘Y' },
-            ].map(b => (_jsx(Button, { lbl: b.lbl, shortcut: b.shortcut, disabled: disabled || !b.canFire, onMouseDown: onMouseDown, onClick: () => {
+                {
+                    lbl: 'Undo',
+                    canFire: adapter?.undoable ?? state.undo,
+                    action: adapter?.undo ?? undo,
+                    icon: UndoIcon,
+                    shortcut: '⌘Z',
+                },
+                {
+                    lbl: 'Redo',
+                    canFire: adapter?.redoable ?? state.redo,
+                    action: adapter?.redo ?? redo,
+                    icon: RedoIcon,
+                    shortcut: '⌘Y',
+                },
+            ].map((b) => (_jsx(Button, { lbl: b.lbl, shortcut: b.shortcut, disabled: disabled || !b.canFire, onMouseDown: onMouseDown, onClick: () => {
                     if (adapter) {
                         if (b.lbl === 'Undo')
                             adapter.undo?.();
@@ -337,180 +371,6 @@ const TOOLBAR_COMPONENTS = {
                     view.focus();
                 }, children: _jsx(b.icon, {}) }, b.lbl))) }));
     },
-    /**
-     * Complex Popover enabling blind/case-sensitive searches and sequential replacement inside active viewports.
-     *
-     * @param props - Active editing mode and toolbar state used to find text and apply replacements in the current editor.
-     * @param {ToolbarMode} props.mode - The active interface mode determining search limits.
-     * @param {ToolbarState | null} props.toolbar - System toolbar state reference to execute replacements.
-     *
-     * @return {JSX.Element | null} The Find and Replace popover or null in view mode.
-     */
-    FindReplace({ mode, toolbar }) {
-        // STATES
-        const ref = useRef(null);
-        const [cfg, setCfg] = useState({ blind: false, case: false, find: '', full: false, open: false, replace: '' });
-        const [idx, setIdx] = useState(0);
-        const [content, setContent] = useState('');
-        // INIT
-        useEffect(() => {
-            if (!cfg.open || !toolbar)
-                return;
-            let a = true;
-            void toolbar.readSearchText().then(r => {
-                if (a)
-                    setContent(r || '');
-            });
-            return () => {
-                a = false;
-            };
-        }, [cfg.open, cfg.find, toolbar]);
-        // PROCESS
-        const searchable = useMemo(() => {
-            return cfg.blind ? BLIND_REGEX.reduce((a, r) => a.replace(r, ''), content) : content;
-        }, [cfg.blind, content]);
-        const matcher = useMemo(() => {
-            if (!cfg.find)
-                return null;
-            const v = cfg.blind ? BLIND_REGEX.reduce((a, r) => a.replace(r, ''), cfg.find) : cfg.find;
-            if (!v)
-                return null;
-            const body = v.replace(TerraQualityRegex.REGEX_G_REGEX_9(), '\\$&');
-            return new RegExp(cfg.full ? `(?<!${FIND_WORD})${body}(?!${FIND_WORD})` : body, `${cfg.case ? 'g' : 'gi'}u`);
-        }, [cfg]);
-        const matches = useMemo(() => (matcher && searchable ? Array.from(searchable.matchAll(matcher), m => m.index ?? 0) : []), [matcher, searchable]);
-        const jsonBlocked = looksLikeJsonBlob(cfg.find) || looksLikeJsonBlob(cfg.replace);
-        // HELPERS
-        /**
-         * Handles focus find.
-         */
-        const focusFind = () => {
-            requestAnimationFrame(() => {
-                ref.current?.focus();
-                ref.current?.select();
-            });
-        };
-        /**
-         * Handles open sel.
-         */
-        const openSel = () => {
-            setCfg(((selectedText) => (prev) => ({ ...prev, find: selectedText || prev.find, open: true }))(window.getSelection()?.toString().replace(/\r\n?/gu, '\n') ?? ''));
-            focusFind();
-        };
-        /**
-         * Handles navigate.
-         *
-         * @param backward - Whether navigation should move toward the previous item.
-         */
-        const navigate = (backward = false) => {
-            const browser = window;
-            const finder = typeof browser.find === 'function' ? browser.find.bind(browser) : null;
-            if (cfg.find && !cfg.blind && matches.length)
-                setIdx(p => (p + (backward ? -1 : 1) + matches.length) % matches.length);
-            if (cfg.find && !cfg.blind && finder) {
-                finder(cfg.find, cfg.case, backward, true, false, true, cfg.full);
-                requestAnimationFrame(() => {
-                    const sel = window.getSelection();
-                    if (!sel || !sel.rangeCount)
-                        return;
-                    let rect = sel.getRangeAt(0).getBoundingClientRect();
-                    if (rect.width === 0 && rect.height === 0) {
-                        const codemirrorSel = document.querySelector('.docs-code-block .cm-selectionBackground, .docs-code-block .cm-search-match');
-                        if (codemirrorSel)
-                            rect = codemirrorSel.getBoundingClientRect();
-                    }
-                    if (rect.width === 0 && rect.height === 0)
-                        return;
-                    const toolbarEl = document.querySelector('[data-docs-toolbar-frame]');
-                    const top = toolbarEl ? toolbarEl.getBoundingClientRect().bottom : 60;
-                    if (rect.top < top + 40) {
-                        window.scrollBy({ top: rect.top - top - 60, behavior: 'auto' });
-                    }
-                    else if (rect.bottom > window.innerHeight - 40) {
-                        window.scrollBy({ top: rect.bottom - window.innerHeight + 60, behavior: 'auto' });
-                    }
-                });
-            }
-        };
-        // INIT
-        useEffect(() => {
-            if (cfg.open)
-                focusFind();
-        }, [cfg.open]);
-        useEffect(() => {
-            setIdx(0);
-        }, [cfg.find]);
-        useEffect(() => {
-            if (!matches.length) {
-                setIdx(0);
-                return;
-            }
-            setIdx(p => Math.min(p, matches.length - 1));
-        }, [matches.length]);
-        useEffect(() => {
-            if (mode === 'view')
-                return;
-            /**
-             * Handles on key down.
-             *
-             * @param e - Pointer event received from the toolbar control.
-             */
-            const onKeyDown = (e) => {
-                if ((e.metaKey || e.ctrlKey) && e.key?.toLowerCase() === 'f') {
-                    e.preventDefault();
-                    openSel();
-                    return;
-                }
-                if (cfg.open && e.key === 'Enter') {
-                    e.preventDefault();
-                    navigate(e.shiftKey);
-                }
-            };
-            document.addEventListener('keydown', onKeyDown, true);
-            return () => {
-                document.removeEventListener('keydown', onKeyDown, true);
-            };
-        }, [cfg, mode]);
-        // RENDER
-        // validation
-        if (mode === 'view')
-            return null;
-        // component
-        return (_jsxs(Popover, { open: cfg.open, onOpenChange: o => {
-                setCfg(p => ({ ...p, open: o }));
-            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(UiButton, { size: 'xs', variant: 'ghost', onMouseDown: e => {
-                            e.preventDefault();
-                        }, onClick: openSel, children: [_jsx(SearchIcon, {}), " Find"] }) }), _jsxs(PopoverContent, { align: 'end', className: 'w-80 space-y-2', children: [[
-                            { title: 'Find', val: cfg.find, key: 'find', ref, placeholder: 'Search text' },
-                            { title: 'Replace', val: cfg.replace, key: 'replace', placeholder: 'Replace' },
-                        ].map(f => (_jsxs("div", { className: 'space-y-1', children: [_jsx(Label, { children: f.title }), _jsx(Textarea, { ref: 'ref' in f ? f.ref : undefined, value: f.val, onChange: e => {
-                                        const inputChange = { field: f.key, value: e.currentTarget?.value ?? '' };
-                                        setCfg(p => ({ ...p, [inputChange.field]: inputChange.value }));
-                                    }, placeholder: f.placeholder, rows: Math.max(2, f.val.split('\n').length), onKeyDown: e => {
-                                        if (e.key === 'Enter') {
-                                            e.preventDefault();
-                                            navigate(e.shiftKey);
-                                        }
-                                    } })] }, f.title))), _jsxs("div", { className: 'flex items-center justify-between text-xs text-primary-11', children: [_jsxs("span", { children: [" ", cfg.find && (matches.length ? `Result ${idx + 1}/${matches.length}` : 'No matches')] }), cfg.blind && _jsx("span", { children: "Text only" })] }), _jsxs("div", { className: 'flex flex-wrap gap-2', children: [[
-                                    { icon: _jsx(LeftArrowIcon, {}), backward: true, lbl: 'Previous match' },
-                                    { icon: _jsx(RightArrowIcon, {}), backward: false, lbl: 'Next match' },
-                                ].map(b => (_jsx(UiButton, { size: 'xs', variant: 'tonal', disabled: !cfg.find || cfg.blind, onClick: () => {
-                                        navigate(b.backward);
-                                    }, "aria-label": b.lbl, title: b.lbl, children: b.icon }, String(b.backward)))), [
-                                    { key: 'case', title: 'Case sensitive', content: _jsx(CaseIcon, {}) },
-                                    { key: 'full', title: 'Full words', content: _jsx(FullWordIcon, {}) },
-                                    { key: 'blind', title: 'Markdown blind', content: 'Blind' },
-                                ].map(t => (_jsx(Toggle, { size: 'xs', variant: 'tonal', "aria-label": t.title, title: t.title, pressed: cfg[t.key], onPressedChange: v => {
-                                        setCfg(p => ({ ...p, [t.key]: v }));
-                                    }, children: t.content }, t.key))), _jsx(UiButton, { size: 'xs', disabled: !matches.length || !toolbar || toolbar.busy === 'saving' || cfg.blind || jsonBlocked, onClick: () => {
-                                        if (jsonBlocked) {
-                                            toast.error('Paste markdown, not JSON, into find or replace.');
-                                            return;
-                                        }
-                                        if (matcher && toolbar)
-                                            toolbar.applySearchText(content.replace(matcher, cfg.replace));
-                                    }, "aria-label": 'Replace', title: 'Replace', children: _jsx(ReplaceIcon, {}) }), jsonBlocked && _jsx("span", { className: 'text-red-11 text-xs', children: "JSON input blocked" })] })] })] }));
-    },
     /**
      * Dropdown dialog facilitating attachment uploads or selecting document attachments natively bound to the leaf.
      *
@@ -544,7 +404,7 @@ const TOOLBAR_COMPONENTS = {
                             name: typeof a.name === 'string' ? a.name : a.path.split('/').pop() || 'attachment',
                         })));
                 })
-                    .catch(e => {
+                    .catch((e) => {
                     console.error('[Toolbar:attachments] load-failed', { path: ctx, error: e });
                     toast.error(e instanceof Error ? e.message : 'Failed to load attachments.');
                 });
@@ -565,9 +425,9 @@ const TOOLBAR_COMPONENTS = {
             submit: async () => {
                 if (!cfg.attachment || cfg.attachment === 'none' || !insert)
                     return;
-                setCfg(p => ({ ...p, busy: true }));
+                setCfg((p) => ({ ...p, busy: true }));
                 try {
-                    const att = atts.find(a => a.path === cfg.attachment);
+                    const att = atts.find((a) => a.path === cfg.attachment);
                     if (!att)
                         throw new Error('Attachment not found');
                     const lbl = att.name
@@ -575,7 +435,8 @@ const TOOLBAR_COMPONENTS = {
                         .pop()
                         ?.split('.')[0]
                         ?.replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ')
-                        .replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), c => c.toUpperCase()) || 'attachment';
+                        .replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), (c) => c.toUpperCase()) ||
+                        'attachment';
                     const c = (att.path.startsWith('http') ? att.path : att.name).replace(TerraQualityRegex.REGEX_G_REGEX(), '%20');
                     let fmt = '';
                     if (insertMode === 'link')
@@ -590,19 +451,19 @@ const TOOLBAR_COMPONENTS = {
                     uploaderActions.reset();
                 }
                 catch {
-                    setCfg(p => ({ ...p, busy: false }));
+                    setCfg((p) => ({ ...p, busy: false }));
                 }
             },
         };
         // RENDER
-        return (_jsxs(Popover, { open: cfg.open, onOpenChange: o => {
+        return (_jsxs(Popover, { open: cfg.open, onOpenChange: (o) => {
                 if (!o)
                     uploaderActions.reset();
                 else
-                    setCfg(p => ({ ...p, open: o }));
-            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { disabled: disabled, lbl: 'Insert attachment', onMouseDown: onMouseDown, children: _jsx(Icon, {}) }) }), _jsxs(PopoverContent, { align: 'start', className: 'w-80 space-y-4', children: [_jsxs("div", { className: FIELD_GAP_CLASS, children: [_jsx(Label, { className: SECONDARY_TEXT_CLASS, children: "Document Attachments" }), _jsxs(Select, { value: cfg.attachment, onValueChange: p => {
-                                        setCfg(v => ({ ...v, attachment: p }));
-                                    }, children: [_jsx(SelectTrigger, { "aria-label": 'Document Attachment', children: _jsx(SelectValue, { placeholder: 'Select an attachment' }) }), _jsx(SelectContent, { children: atts.length === 0 ? (_jsx(SelectItem, { value: 'none', disabled: true, children: "No attachments found" })) : (atts.map(a => (_jsx(SelectItem, { value: a.path, children: a.name }, a.path)))) })] })] }), _jsxs("div", { className: FIELD_GAP_CLASS, children: [_jsx(Label, { children: "Format" }), _jsx(ToggleGroup, { type: 'single', value: insertMode, onValueChange: v => v && setInsertMode(v), className: 'justify-start', children: [['embed', 'Visual Embed'], ['link', 'Text Link']].map(([v, l]) => (_jsx(ToggleGroupItem, { value: v, size: 'sm', className: 'h-7 px-3 text-xs', children: l }, v))) })] }), _jsx(UiButton, { className: 'w-full', disabled: !cfg.attachment || cfg.attachment === 'none' || cfg.busy, loading: cfg.busy, onClick: () => void uploaderActions.submit(), children: "Insert" })] })] }));
+                    setCfg((p) => ({ ...p, open: o }));
+            }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { disabled: disabled, lbl: 'Insert attachment', onMouseDown: onMouseDown, children: _jsx(Icon, {}) }) }), _jsxs(PopoverContent, { align: "start", className: "w-80 space-y-4", children: [_jsxs("div", { className: FIELD_GAP_CLASS, children: [_jsx(Label, { className: SECONDARY_TEXT_CLASS, children: "Document Attachments" }), _jsxs(Select, { value: cfg.attachment, onValueChange: (p) => {
+                                        setCfg((v) => ({ ...v, attachment: p }));
+                                    }, children: [_jsx(SelectTrigger, { "aria-label": "Document Attachment", children: _jsx(SelectValue, { placeholder: "Select an attachment" }) }), _jsx(SelectContent, { children: atts.length === 0 ? (_jsx(SelectItem, { value: 'none', disabled: true, children: "No attachments found" })) : (atts.map(a => (_jsx(SelectItem, { value: a.path, children: a.name }, a.path)))) })] })] }), _jsxs("div", { className: FIELD_GAP_CLASS, children: [_jsx(Label, { children: "Format" }), _jsx(ToggleGroup, { type: 'single', value: insertMode, onValueChange: v => v && setInsertMode(v), className: 'justify-start', children: [['embed', 'Visual Embed'], ['link', 'Text Link']].map(([v, l]) => (_jsx(ToggleGroupItem, { value: v, size: 'sm', className: 'h-7 px-3 text-xs', children: l }, v))) })] }), _jsx(UiButton, { className: "w-full", disabled: !cfg.attachment || cfg.attachment === 'none' || cfg.busy, loading: cfg.busy, onClick: () => void uploaderActions.submit(), children: "Insert" })] })] }));
     },
     /**
      * Recursive structural map converting component tree branches into native interactive dropdown triggers natively.
@@ -615,11 +476,13 @@ const TOOLBAR_COMPONENTS = {
      *
      * @return {JSX.Element} React rendered menu node explicitly containing nested branches cleanly.
      */
-    GlobalComponentMenuNode({ name, tree, onCopy }) {
-        return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { className: 'capitalize', children: name.replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ') }), _jsxs(DropdownMenuSubContent, { children: [tree.components.map(c => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: e => {
+    GlobalComponentMenuNode({ name, tree, onCopy, }) {
+        return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { className: "capitalize", children: name.replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ') }), _jsxs(DropdownMenuSubContent, { children: [tree.components.map((c) => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: (e) => {
                                 e.preventDefault();
                                 onCopy?.(c);
-                            }, children: c.displayLabel.replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ').replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), c => c.toUpperCase()) }, `${c.path}:${c.name}`))), Object.entries(tree.folders).map(([f, s]) => (_jsx(TOOLBAR_COMPONENTS.GlobalComponentMenuNode, { name: f, tree: s, onCopy: onCopy }, f)))] })] }));
+                            }, children: c.displayLabel
+                                .replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ')
+                                .replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), (c) => c.toUpperCase()) }, `${c.path}:${c.name}`))), Object.entries(tree.folders).map(([f, s]) => (_jsx(TOOLBAR_COMPONENTS.GlobalComponentMenuNode, { name: f, tree: s, onCopy: onCopy }, f)))] })] }));
     },
     /**
      * Complex unified insertion menu tracking local sister references alongside globally configured repo components.
@@ -640,14 +503,21 @@ const TOOLBAR_COMPONENTS = {
     Custom({ onInsert, onInsertMd, onMouseDown, disabled, ctx, }) {
         // STATES
         const [sis, setSis] = useState([]);
-        const [search, setSearch] = useState({ open: false, query: '', tree: [], busy: false });
+        const [search, setSearch] = useState({
+            open: false,
+            query: '',
+            tree: [],
+            busy: false,
+        });
         const savedSel = useRef(null);
         const copyLock = useRef(null);
         // 1. FETCH LOCAL FILES (Allows ALL leaves as valid attachments)
         useEffect(() => {
             if (!ctx)
                 return;
-            const dir = dirname(TerraQualityRegex.REGEX_INDEX_MD_MDX_I_REGEX_2().test(ctx.split('/').pop() || '') ? dirname(ctx) : ctx);
+            const dir = dirname(TerraQualityRegex.REGEX_INDEX_MD_MDX_I_REGEX_2().test(ctx.split('/').pop() || '')
+                ? dirname(ctx)
+                : ctx);
             actions.read.doc
                 .list({ type: 'folderEntries', path: dir })
                 .then(({ data: d }) => {
@@ -655,7 +525,7 @@ const TOOLBAR_COMPONENTS = {
                 if (Array.isArray(d))
                     setSis(d.filter((p) => p !== ctx && dirname(p) === dir && /\.(md|mdx|astro|tsx)$/i.test(p.split('/').pop() || '')).map((p) => ({ path: p, name: p.split('/').pop() || '' })));
             })
-                .catch(e => {
+                .catch((e) => {
                 console.error('[Toolbar:insert.load-failed]', { path: dir, error: e });
                 toast.error(e instanceof Error ? e.message : 'Failed to load insert targets.');
             });
@@ -664,8 +534,8 @@ const TOOLBAR_COMPONENTS = {
         const componentTree = useMemo(() => {
             const root = { components: [], folders: {} };
             const counts = new Map();
-            repoComponents.forEach(c => counts.set(c.path, (counts.get(c.path) ?? 0) + 1));
-            repoComponents.forEach(c => {
+            repoComponents.forEach((c) => counts.set(c.path, (counts.get(c.path) ?? 0) + 1));
+            repoComponents.forEach((c) => {
                 const parts = c.path.split('/_custom/');
                 if (parts.length <= 1) {
                     root.components.push({ ...c, displayLabel: c.name });
@@ -676,7 +546,7 @@ const TOOLBAR_COMPONENTS = {
                 if (file !== 'index' && (counts.get(c.path) ?? 0) > 1)
                     segs.push(file);
                 let cur = root;
-                segs.forEach(s => {
+                segs.forEach((s) => {
                     cur = cur.folders[s] ??= { components: [], folders: {} };
                 });
                 // prettier-ignore
@@ -730,17 +600,23 @@ const TOOLBAR_COMPONENTS = {
                 return;
             let a = true;
             if (search.tree.length === 0) {
-                setSearch(s => ({ ...s, busy: true }));
+                setSearch((s) => ({ ...s, busy: true }));
                 actions.read.doc
                     .list({ type: 'nav', pathname: docsRootPath() })
                     .then(({ data: d }) => {
                     if (a)
-                        setSearch(s => ({ ...s, tree: Array.isArray(d) ? d.filter((n) => Boolean(n && typeof n === 'object' && 'type' in n)) : [], busy: false }));
+                        setSearch((s) => ({
+                            ...s,
+                            tree: Array.isArray(d)
+                                ? d.filter((n) => Boolean(n && typeof n === 'object' && 'type' in n))
+                                : [],
+                            busy: false,
+                        }));
                 })
-                    .catch(_err => {
+                    .catch((_err) => {
                     console.error(`[Toolbar:Embed] Failed to fetch document tree:`, _err);
                     if (a)
-                        setSearch(s => ({ ...s, busy: false }));
+                        setSearch((s) => ({ ...s, busy: false }));
                 });
             }
             return () => {
@@ -754,7 +630,9 @@ const TOOLBAR_COMPONENTS = {
             // contains the same node referenced from multiple locations.
             const seen = new Set();
             const lowerQuery = search.query.trim().toLowerCase();
-            const searchFrames = [{ nodes: search.tree, index: 0, path: '' }];
+            const searchFrames = [
+                { nodes: search.tree, index: 0, path: '' },
+            ];
             while (searchFrames.length) {
                 const frame = searchFrames[searchFrames.length - 1];
                 if (!frame)
@@ -778,7 +656,11 @@ const TOOLBAR_COMPONENTS = {
                     }
                 }
                 else if (n.type === 'branch' && n.children) {
-                    searchFrames.push({ nodes: n.children, index: 0, path: frame.path ? `${frame.path} / ${currTitle}` : currTitle });
+                    searchFrames.push({
+                        nodes: n.children,
+                        index: 0,
+                        path: frame.path ? `${frame.path} / ${currTitle}` : currTitle,
+                    });
                 }
             }
             return leaves;
@@ -794,18 +676,24 @@ const TOOLBAR_COMPONENTS = {
             let finalPath = tgtPath;
             let leafId = tgtPath;
             // 1. Close Modal immediately to prevent multiple submissions
-            setSearch(s => ({ ...s, open: false, busy: true }));
+            setSearch((s) => ({ ...s, open: false, busy: true }));
             setTransition('p');
             try {
                 if (isNew) {
                     // scope the new document natively UNDER the current document's path.
                     // this ensures string-based `verifyWrite` auth checks pass by matching the prefix of the inherited warrant.
                     const basePath = ctx ? ctx.replace(TerraQualityRegex.REGEX_PATTERN_REGEX_2(), '') : '';
-                    const sName = search.query.trim() ? search.query.replace(TerraQualityRegex.REGEX_A_Z0_9_GI_REGEX_2(), '-').toLowerCase() : 'untitled';
-                    const nId = basePath ? `${basePath}/${sName}-${Date.now()}.mdx` : `${sName}-${Date.now()}.mdx`;
+                    const sName = search.query.trim()
+                        ? search.query.replace(TerraQualityRegex.REGEX_A_Z0_9_GI_REGEX_2(), '-').toLowerCase()
+                        : 'untitled';
+                    const nId = basePath
+                        ? `${basePath}/${sName}-${Date.now()}.mdx`
+                        : `${sName}-${Date.now()}.mdx`;
                     finalPath = nId;
                     // create the page purely as a stand-alone document without anchoring to the group
-                    const writeRes = await actions.write.doc.editor({ path: nId, title: search.query, source: 'This page is empty.' }).catch(_err => ({ data: null, error: _err }));
+                    const writeRes = await actions.write.doc
+                        .editor({ path: nId, title: search.query, source: 'This page is empty.' })
+                        .catch((_err) => ({ data: null, error: _err }));
                     if (writeRes.error) {
                         console.error(`[Toolbar:Embed] write.doc.editor action failed:`, writeRes.error);
                         throw writeRes.error;
@@ -814,19 +702,25 @@ const TOOLBAR_COMPONENTS = {
                 }
                 // map leaf explicitly to the editor's attachment array unconditionally
                 if (ctx) {
-                    const attRes = await actions.write.attachment.docRef({ path: ctx, refId: finalPath, title: search.query || 'Embedded Page' }).catch(_err => {
+                    const attRes = await actions.write.attachment
+                        .docRef({ path: ctx, refId: finalPath, title: search.query || 'Embedded Page' })
+                        .catch((_err) => {
                         console.error(`[Toolbar:Embed] write.attachment.docRef action failed:`, _err);
                         return { data: null, error: _err };
                     });
                     if (attRes && attRes.data) {
                         // Resolves the exact Sanity UUID returned to map directly into the React AST parameter
                         const attachment = {
-                            leafId: typeof attRes.data === 'object' && 'refId' in attRes.data && typeof attRes.data.refId === 'string' ? attRes.data.refId : leafId,
+                            leafId: typeof attRes.data === 'object' &&
+                                'refId' in attRes.data &&
+                                typeof attRes.data.refId === 'string'
+                                ? attRes.data.refId
+                                : leafId,
                             sister: { path: finalPath, name: finalPath.split('/').pop() || finalPath },
                         };
                         leafId = attachment.leafId;
-                        setSis(p => {
-                            if (!p.some(s => s.path === finalPath))
+                        setSis((p) => {
+                            if (!p.some((s) => s.path === finalPath))
                                 return [...p, attachment.sister];
                             return p;
                         });
@@ -834,10 +728,10 @@ const TOOLBAR_COMPONENTS = {
                 }
                 // delay AST injection to allow Sanity CDN replica propagation to finish
                 if (isNew || ctx)
-                    await new Promise(r => setTimeout(r, 1500));
+                    await new Promise((r) => setTimeout(r, 1500));
                 clearTransition();
                 // 2. Yield to event loop to allow DOM reconciliation
-                await new Promise(r => setTimeout(r, 200));
+                await new Promise((r) => setTimeout(r, 200));
                 // 3. Force focus back into the active editor securely
                 const aEditor = document.querySelector('[contenteditable="true"], .cm-content');
                 if (aEditor) {
@@ -862,8 +756,8 @@ const TOOLBAR_COMPONENTS = {
                     }
                 }
                 // clean up busy state and search query now that injection is ready
-                setSearch(s => ({ ...s, query: '', busy: false }));
-                await new Promise(r => requestAnimationFrame(r));
+                setSearch((s) => ({ ...s, query: '', busy: false }));
+                await new Promise((r) => requestAnimationFrame(r));
                 // 4. Inject purely as AST text (bypassing the import statement injection)
                 // This mirrors how globally configured components like <Nodes /> and <DocsMath /> are inserted.
                 if (onInsertMd) {
@@ -880,8 +774,11 @@ const TOOLBAR_COMPONENTS = {
             catch (_err) {
                 clearTransition();
                 console.error(`[Toolbar:Embed] Critical pipeline failure during leaf embed process:`, _err);
-                notify({ error: _err instanceof Error ? _err : new Error('Embed failed'), fallback: 'Failed to embed leaf.' });
-                setSearch(s => ({ ...s, query: '', busy: false }));
+                notify({
+                    error: _err instanceof Error ? _err : new Error('Embed failed'),
+                    fallback: 'Failed to embed leaf.',
+                });
+                setSearch((s) => ({ ...s, query: '', busy: false }));
             }
         };
         // 6. LOCAL MENUS
@@ -913,21 +810,23 @@ const TOOLBAR_COMPONENTS = {
                 },
             ],
         };
-        return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { disabled: disabled, lbl: 'Insert component', onMouseDown: onMouseDown, children: _jsx(DOCS_BLOCK_ICONS.code, {}) }) }), _jsxs(DropdownMenuContent, { align: 'start', className: MENU_WIDTH_CLASS, children: [_jsxs(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: e => {
+        return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { disabled: disabled, lbl: "Insert component", onMouseDown: onMouseDown, children: _jsx(DOCS_BLOCK_ICONS.code, {}) }) }), _jsxs(DropdownMenuContent, { align: "start", className: MENU_WIDTH_CLASS, children: [_jsxs(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: (e) => {
                                         e.preventDefault();
                                         const sel = window.getSelection();
                                         if (sel && sel.rangeCount > 0)
                                             savedSel.current = sel.getRangeAt(0).cloneRange();
-                                        setSearch(s => ({ ...s, open: true }));
-                                    }, className: MENU_GAP_CLASS, children: [_jsx(PopOutIcon, { className: ICON_CLASS }), " Embed Page"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: MENU_GAP_CLASS, children: [_jsx(ModuleIcon, { className: ICON_CLASS }), " Modules"] }), _jsxs(DropdownMenuSubContent, { className: MENU_WIDTH_CLASS, children: [menuGroups.globalComponents.map(c => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: e => {
+                                        setSearch((s) => ({ ...s, open: true }));
+                                    }, className: MENU_GAP_CLASS, children: [_jsx(PopOutIcon, { className: ICON_CLASS }), " Embed Page"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { className: MENU_GAP_CLASS, children: [_jsx(ModuleIcon, { className: ICON_CLASS }), " Modules"] }), _jsxs(DropdownMenuSubContent, { className: MENU_WIDTH_CLASS, children: [menuGroups.globalComponents.map((c) => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: (e) => {
                                                         e.preventDefault();
                                                         void copyComponent(c);
-                                                    }, children: c.displayLabel.replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ').replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), c => c.toUpperCase()) }, c.path))), Object.entries(menuGroups.globalFolders).map(([f, s]) => (_jsx(TOOLBAR_COMPONENTS.GlobalComponentMenuNode, { name: f, tree: s, onCopy: copyComponent }, f)))] })] }), menuGroups.local.map(m => (_jsx(React.Fragment, { children: _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { disabled: !m.items.length, className: MENU_GAP_CLASS, children: [m.icon, " ", m.label] }), _jsx(DropdownMenuSubContent, { children: m.items.map(s => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: e => {
+                                                    }, children: c.displayLabel
+                                                        .replace(TerraQualityRegex.REGEX_G_REGEX_7(), ' ')
+                                                        .replace(TerraQualityRegex.REGEX_B_W_G_REGEX(), (c) => c.toUpperCase()) }, c.path))), Object.entries(menuGroups.globalFolders).map(([f, s]) => (_jsx(TOOLBAR_COMPONENTS.GlobalComponentMenuNode, { name: f, tree: s, onCopy: copyComponent }, f)))] })] }), menuGroups.local.map((m) => (_jsx(React.Fragment, { children: _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { disabled: !m.items.length, className: MENU_GAP_CLASS, children: [m.icon, " ", m.label] }), _jsx(DropdownMenuSubContent, { children: m.items.map((s) => (_jsx(DropdownMenuItem, { onMouseDown: preserveSel, onSelect: (e) => {
                                                         e.preventDefault();
                                                         m.onSelect(s);
-                                                    }, children: s.name }, s.path))) })] }) }, m.label)))] })] }), _jsx(Dialog, { open: search.open, onOpenChange: o => {
-                        setSearch(s => ({ ...s, open: o }));
-                    }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Embed Document" }), _jsx(DialogDescription, { className: 'sr-only', children: "Browse the document tree or search to embed a page." })] }), _jsxs("div", { className: 'space-y-4 pt-2', children: [_jsx(Input, { icon: _jsx(SearchIcon, { className: ICON_CLASS }), autoFocus: true, placeholder: 'Search or type to create...', value: search.query, onChange: e => { setSearch(s => ({ ...s, query: e.target.value })); } }), _jsxs("div", { className: 'flex max-h-64 min-h-24 flex-col gap-1 overflow-y-auto pr-2', children: [search.busy && search.tree.length === 0 && _jsx("p", { className: 'py-4 text-center text-sm text-primary-11', children: "Loading..." }), search.query.trim() && (_jsxs(UiButton, { variant: 'outline', className: 'mb-2 flex-col items-start gap-y-0 border-dashed py-6', onClick: () => void embed('', true), disabled: search.busy, children: [_jsx("span", { className: 'text-sm font-medium', children: search.busy ? 'Creating...' : `Create "${search.query}"` }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: "Create page and embed as attachment" })] })), search.query.trim() && !search.busy && filteredLeaves.length === 0 && _jsx(SearchEmpty, { query: search.query }), filteredLeaves.map(l => (_jsxs(UiButton, { variant: 'ghost', className: 'flex-col items-start gap-y-0 py-6', onClick: () => embed(l.path), children: [_jsx("span", { className: 'text-sm font-medium capitalize', children: l.title }), _jsxs("span", { className: SECONDARY_TEXT_CLASS, children: [l.breadcrumb ? `${l.breadcrumb} / ` : '', l.title] })] }, l.path)))] })] })] }) })] }));
+                                                    }, children: s.name }, s.path))) })] }) }, m.label)))] })] }), _jsx(Dialog, { open: search.open, onOpenChange: (o) => {
+                        setSearch((s) => ({ ...s, open: o }));
+                    }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Embed Document" }), _jsx(DialogDescription, { className: "sr-only", children: "Browse the document tree or search to embed a page." })] }), _jsxs("div", { className: 'space-y-4 pt-2', children: [_jsx(Input, { icon: _jsx(SearchIcon, { className: ICON_CLASS }), autoFocus: true, placeholder: 'Search or type to create...', value: search.query, onChange: e => { setSearch(s => ({ ...s, query: e.target.value })); } }), _jsxs("div", { className: 'flex max-h-64 min-h-24 flex-col gap-1 overflow-y-auto pr-2', children: [search.busy && search.tree.length === 0 && _jsx("p", { className: 'py-4 text-center text-sm text-primary-11', children: "Loading..." }), search.query.trim() && (_jsxs(UiButton, { variant: 'outline', className: 'mb-2 flex-col items-start gap-y-0 border-dashed py-6', onClick: () => void embed('', true), disabled: search.busy, children: [_jsx("span", { className: 'text-sm font-medium', children: search.busy ? 'Creating...' : `Create "${search.query}"` }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: "Create page and embed as attachment" })] })), search.query.trim() && !search.busy && filteredLeaves.length === 0 && _jsx(SearchEmpty, { query: search.query }), filteredLeaves.map(l => (_jsxs(UiButton, { variant: 'ghost', className: 'flex-col items-start gap-y-0 py-6', onClick: () => embed(l.path), children: [_jsx("span", { className: 'text-sm font-medium capitalize', children: l.title }), _jsxs("span", { className: SECONDARY_TEXT_CLASS, children: [l.breadcrumb ? `${l.breadcrumb} / ` : '', l.title] })] }, l.path)))] })] })] }) })] }));
     },
     /**
      * Dropdown control for quickly converting a block or inserting a supported block template.
@@ -963,9 +862,9 @@ const TOOLBAR_COMPONENTS = {
                     const sel = window.getSelection();
                     const blockCursor = document.querySelector('[data-docs-block-cursor="true"]');
                     if (blockCursor && sel?.anchorNode && !blockCursor.contains(sel.anchorNode)) {
-                        const blockVal = toolbarFocusValue(blockCursor, opts.map(o => o.value));
+                        const blockVal = toolbarFocusValue(blockCursor, opts.map((o) => o.value));
                         if (blockVal) {
-                            setVal(c => (c === blockVal ? c : blockVal));
+                            setVal((c) => (c === blockVal ? c : blockVal));
                             return;
                         }
                     }
@@ -978,13 +877,15 @@ const TOOLBAR_COMPONENTS = {
                             const textBlock = el?.closest('h1, h2, h3, h4, h5, h6, p');
                             if (textBlock)
                                 savedBlock.current = textBlock;
-                            else if (el?.closest('td, th')?.closest('[data-docs-editor-block="DocsTable"], [data-terra-block="table"]'))
+                            else if (el
+                                ?.closest('td, th')
+                                ?.closest('[data-docs-editor-block="DocsTable"], [data-terra-block="table"]'))
                                 savedBlock.current = null;
                             const blockVal = el
-                                ? toolbarFocusValue(el, opts.map(o => o.value))
+                                ? toolbarFocusValue(el, opts.map((o) => o.value))
                                 : null;
                             if (blockVal) {
-                                setVal(c => (c === blockVal ? c : blockVal));
+                                setVal((c) => (c === blockVal ? c : blockVal));
                                 return;
                             }
                         }
@@ -1001,7 +902,7 @@ const TOOLBAR_COMPONENTS = {
                     n = 'h4';
                 else if (TerraQualityRegex.REGEX_S_REGEX_4().test(text))
                     n = 'h2';
-                setVal(c => (c === n ? c : n));
+                setVal((c) => (c === n ? c : n));
             };
             sync();
             /**
@@ -1024,21 +925,21 @@ const TOOLBAR_COMPONENTS = {
                         ? decorator.querySelector('[data-docs-editor-block], .docs-math-wrapper, [data-math-code], [data-docs-view-root="true"]')
                         : null;
                 const blockVal = block
-                    ? toolbarFocusValue(block, opts.map(o => o.value))
+                    ? toolbarFocusValue(block, opts.map((o) => o.value))
                     : null;
                 if (!blockVal)
                     return;
                 savedBlock.current = null;
-                setVal(c => (c === blockVal ? c : blockVal));
+                setVal((c) => (c === blockVal ? c : blockVal));
             };
-            ['focusin', 'keyup', 'mouseup', 'selectionchange'].forEach(e => {
+            ['focusin', 'keyup', 'mouseup', 'selectionchange'].forEach((e) => {
                 document.addEventListener(e, refresh, true);
             });
             document.addEventListener('docs:block-select', onBlockSelect);
             document.addEventListener('docs:block-selected', onBlockSelect);
             return () => {
                 cancelAnimationFrame(frame);
-                ['focusin', 'keyup', 'mouseup', 'selectionchange'].forEach(e => {
+                ['focusin', 'keyup', 'mouseup', 'selectionchange'].forEach((e) => {
                     document.removeEventListener(e, refresh, true);
                 });
                 document.removeEventListener('docs:block-select', onBlockSelect);
@@ -1046,13 +947,15 @@ const TOOLBAR_COMPONENTS = {
             };
         }, [disabled, toolbar]);
         // RENDER
-        return (_jsxs(Select, { disabled: disabled || !toolbar, value: val, onValueChange: v => {
-                const item = opts.find(i => i.value === v);
+        return (_jsxs(Select, { disabled: disabled || !toolbar, value: val, onValueChange: (v) => {
+                const item = opts.find((i) => i.value === v);
                 if (!item)
                     return;
                 if (item.group === 'type') {
                     if (json) {
-                        window.dispatchEvent(new CustomEvent('docs:json-command', { detail: { type: 'style', style: v === 'p' ? 'normal' : v } }));
+                        window.dispatchEvent(new CustomEvent('docs:json-command', {
+                            detail: { type: 'style', style: v === 'p' ? 'normal' : v },
+                        }));
                         setVal(v);
                         return;
                     }
@@ -1066,7 +969,7 @@ const TOOLBAR_COMPONENTS = {
                         const { head } = view.state.selection.main;
                         const line = view.state.doc.lineAt(head);
                         const text = line.text;
-                        let n = 'Text';
+                        let n;
                         let prefix = '';
                         if (v === 'h2') {
                             prefix = '## ';
@@ -1083,7 +986,10 @@ const TOOLBAR_COMPONENTS = {
                         else
                             n = text.replace(/^#{1,6}\s+/, '').trimStart() || 'Text';
                         const replacementStr = `${prefix}${n}`;
-                        view.dispatch({ changes: { from: line.from, to: line.to, insert: replacementStr }, selection: { anchor: line.from + replacementStr.length } });
+                        view.dispatch({
+                            changes: { from: line.from, to: line.to, insert: replacementStr },
+                            selection: { anchor: line.from + replacementStr.length },
+                        });
                         view.focus();
                         setVal(v);
                         return;
@@ -1105,7 +1011,7 @@ const TOOLBAR_COMPONENTS = {
                                             else if (v === 'h2' || v === 'h3' || v === 'h4')
                                                 replacementNode = $createHeadingNode(v);
                                             if (replacementNode) {
-                                                blockNode.getChildren().forEach(c => {
+                                                blockNode.getChildren().forEach((c) => {
                                                     replacementNode.append(c);
                                                 });
                                                 blockNode.replace(replacementNode);
@@ -1128,8 +1034,8 @@ const TOOLBAR_COMPONENTS = {
                     return;
                 }
                 item.onSelect();
-            }, size: 'xs', children: [_jsx(SelectTrigger, { "aria-label": 'Block type', className: 'w-40', onMouseDown: preserveSel, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: 'start', children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Block Type" }), opts.filter(o => o.group === 'type').map(({ value: v, label: l, icon: i }) => (_jsx(SelectItem, { value: v, icon: React.createElement(i, { className: ICON_CLASS }), children: l }, v)))] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Insert Block" }), opts
-                                    .filter(o => o.group === 'insert')
+            }, size: "xs", children: [_jsx(SelectTrigger, { "aria-label": "Block type", className: "w-40", onMouseDown: preserveSel, children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "start", children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Block Type" }), opts.filter(o => o.group === 'type').map(({ value: v, label: l, icon: i }) => (_jsx(SelectItem, { value: v, icon: React.createElement(i, { className: ICON_CLASS }), children: l }, v)))] }), _jsx(SelectSeparator, {}), _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Insert Block" }), opts
+                                    .filter((o) => o.group === 'insert')
                                     .map(({ value: v, label: l, icon: i }) => (_jsx(SelectItem, { value: v, icon: React.createElement(i, { className: ICON_CLASS }), children: l }, v)))] })] })] }));
     },
     /**
@@ -1148,7 +1054,10 @@ const TOOLBAR_COMPONENTS = {
      */
     Toolbar({ activeMode: aMode, editable, toolbar, blocks, adapter, docs = true, }) {
         // STATES
-        const toolbarCtx = { edit: useContext(EditStateCtx), attachmentFilter: useAtom($attachmentFilter) };
+        const toolbarCtx = {
+            edit: useContext(EditStateCtx),
+            attachmentFilter: useAtom($attachmentFilter),
+        };
         const mode = aMode ?? 'view';
         const [vers, setVers] = useState([]);
         const [verDialogOpen, setVerDialogOpen] = useState(false);
@@ -1166,7 +1075,11 @@ const TOOLBAR_COMPONENTS = {
                     return;
                 const { from, to } = view.state.selection.main;
                 codeLength.current = view.state.doc.length;
-                codeSel.current = { code: { from: Math.min(from, to), to: Math.max(from, to) }, dom: null, visible: true };
+                codeSel.current = {
+                    code: { from: Math.min(from, to), to: Math.max(from, to) },
+                    dom: null,
+                    visible: true,
+                };
                 codeAtEnd.current = false;
             };
             document.addEventListener('selectionchange', sync);
@@ -1245,7 +1158,7 @@ const TOOLBAR_COMPONENTS = {
                 }
             }
             : undefined;
-        const selVer = vers.find(v => v.savedAt === selVerId);
+        const selVer = vers.find((v) => v.savedAt === selVerId);
         useEffect(() => {
             if (verDialogOpen && !selVerId && vers[0])
                 setSelVerId(vers[0].savedAt);
@@ -1282,7 +1195,12 @@ const TOOLBAR_COMPONENTS = {
                     sourceTail: previewPack.markdown.slice(-120),
                 }));
                 if (toolbarCtx.edit.update)
-                    toolbarCtx.edit.update({ content: previewPack.body, title: selVer?.title || '', description: selVer?.description || '', source: previewPack.markdown });
+                    toolbarCtx.edit.update({
+                        content: previewPack.body,
+                        title: selVer?.title || '',
+                        description: selVer?.description || '',
+                        source: previewPack.markdown,
+                    });
                 const setCode = toolbarCtx.edit.setCode ?? toolbarCtx.edit.setSrc;
                 if (setCode)
                     setCode(previewPack.markdown);
@@ -1308,7 +1226,11 @@ const TOOLBAR_COMPONENTS = {
          * @param _type - Sanity field type associated with the value.
          * @param value - Field value being normalized for the toolbar.
          */
-        const jsonBlock = (_type, val) => ({ _key: crypto.randomUUID(), _type, ...val });
+        const jsonBlock = (_type, val) => ({
+            _key: crypto.randomUUID(),
+            _type,
+            ...val,
+        });
         // SELECTION HANDLER
         /**
          * Safe sel.
@@ -1391,13 +1313,23 @@ const TOOLBAR_COMPONENTS = {
          */
         const insertionActions = {
             insertLocalCode: () => {
-                if (jsonCmd({ type: 'insert', block: jsonBlock('code', { language: 'text', value: 'Code...' }) }))
+                if (jsonCmd({
+                    type: 'insert',
+                    block: jsonBlock('code', { language: 'text', value: 'Code...' }),
+                }))
                     return;
                 insert?.(`\n\n<Code language="text">\n{\`\nCode...\n\`}\n</Code>\n\n`);
             },
             insertCode: (src, endpoint = '') => {
-                const code = src === 'received' ? `\n\n<Code language="json" source=${JSON.stringify(endpoint)} />\n\n` : '\n\n<Code language="text">\n{`\nCode...\n`}\n</Code>\n\n';
-                if (jsonCmd({ type: 'insert', block: jsonBlock('code', src === 'received' ? { language: 'json', source: endpoint, value: '' } : { language: 'text', value: 'Code...' }) }))
+                const code = src === 'received'
+                    ? `\n\n<Code language="json" source=${JSON.stringify(endpoint)} />\n\n`
+                    : '\n\n<Code language="text">\n{`\nCode...\n`}\n</Code>\n\n';
+                if (jsonCmd({
+                    type: 'insert',
+                    block: jsonBlock('code', src === 'received'
+                        ? { language: 'json', source: endpoint, value: '' }
+                        : { language: 'text', value: 'Code...' }),
+                }))
                     return;
                 if (insert) {
                     const srcLength = codeLength.current;
@@ -1408,7 +1340,9 @@ const TOOLBAR_COMPONENTS = {
                 }
                 const curr = toolbarCtx.edit?.code ?? toolbarCtx.edit?.source ?? '';
                 const sel = codeSel.current?.code;
-                const range = codeAtEnd.current || !sel ? { from: curr.length, to: curr.length } : { from: Math.min(sel.from, curr.length), to: Math.min(sel.to, curr.length) };
+                const range = codeAtEnd.current || !sel
+                    ? { from: curr.length, to: curr.length }
+                    : { from: Math.min(sel.from, curr.length), to: Math.min(sel.to, curr.length) };
                 const n = `${curr.slice(0, range.from)}${code}${curr.slice(range.to)}`;
                 toolbarCtx.edit?.update({ source: n });
                 toolbarCtx.edit?.setCode(n);
@@ -1419,8 +1353,14 @@ const TOOLBAR_COMPONENTS = {
                 }
                 const view = codeViewOf();
                 if (view) {
-                    const range = codeAtEnd.current ? { from: view.state.doc.length, to: view.state.doc.length } : (codeSel.current?.code ?? view.state.selection.main);
-                    view.dispatch({ changes: { from: range.from, insert: code, to: range.to }, scrollIntoView: true, selection: { anchor: range.from + code.length } });
+                    const range = codeAtEnd.current
+                        ? { from: view.state.doc.length, to: view.state.doc.length }
+                        : (codeSel.current?.code ?? view.state.selection.main);
+                    view.dispatch({
+                        changes: { from: range.from, insert: code, to: range.to },
+                        scrollIntoView: true,
+                        selection: { anchor: range.from + code.length },
+                    });
                     view.focus();
                     codeAtEnd.current = false;
                     codeSel.current = null;
@@ -1462,78 +1402,106 @@ const TOOLBAR_COMPONENTS = {
             };
         }, [mode, onSave]);
         // RENDER
-        return (_jsx(ErrorBoundary, { name: 'Toolbar', children: _jsxs("div", { className: 'docs-toolbar-scroll not-prose pointer-events-auto sticky top-10 isolate z-50 -mx-3 -mt-5 mb-5 w-[calc(100%+1.5rem)] max-w-[calc(100%+1.5rem)] overflow-visible text-primary-12 print:hidden', "data-docs-toolbar-frame": true, "data-docs-toolbar-scroll": true, children: [_jsx("div", { "aria-hidden": 'true', className: 'docs-toolbar-backdrop pointer-events-none absolute -inset-x-4 -bottom-12 -top-16 z-0' }), _jsx("div", { className: 'relative z-10 rounded-lg border border-primary-6 bg-primary-3', children: _jsx(TooltipProvider, { children: _jsx("div", { className: 'mdxeditor-toolbar not-prose relative z-10 box-border flex w-full min-w-0 flex-wrap items-center justify-between gap-1.5 gap-x-3 px-2 py-1 text-primary-12 print:hidden', "data-docs-main-toolbar": true, children: mode === 'view' ? (docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: v => {
+        return (_jsx(ErrorBoundary, { name: "Toolbar", children: _jsxs("div", { className: "docs-toolbar-scroll not-prose pointer-events-auto sticky top-10 isolate z-50 -mx-3 -mt-5 mb-5 w-[calc(100%+1.5rem)] max-w-[calc(100%+1.5rem)] overflow-visible text-primary-12 print:hidden", "data-docs-toolbar-frame": true, "data-docs-toolbar-scroll": true, "data-can-edit": editable ? 'true' : 'false', children: [_jsx("div", { "aria-hidden": "true", className: "docs-toolbar-backdrop pointer-events-none absolute -inset-x-4 -bottom-12 -top-16 z-0" }), _jsx("div", { className: "relative z-10 rounded-lg border border-primary-6 bg-primary-3", children: _jsx(TooltipProvider, { children: _jsx("div", { className: "mdxeditor-toolbar not-prose relative z-10 box-border flex w-full min-w-0 flex-wrap items-center justify-between gap-1.5 gap-x-3 px-2 py-1 text-primary-12 print:hidden", "data-docs-main-toolbar": true, children: mode === 'view' ? (docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: (v) => {
                                         if (!toolbar)
                                             return;
-                                        toolbar.setMode(v).catch(e => {
+                                        toolbar.setMode(v).catch((e) => {
                                             console.error('[Toolbar:mode] change-failed', { mode: v, error: e });
                                             toast.error(e instanceof Error ? e.message : 'Failed to change mode.');
                                             clearTransition();
                                         });
                                     } }))) : mode === 'attachments' ? (
                                 // ATTACHMENT FILTERS
-                                _jsxs(_Fragment, { children: [docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: v => {
+                                _jsxs(_Fragment, { children: [docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: (v) => {
                                                 if (!toolbar)
                                                     return;
-                                                toolbar.setMode(v).catch(e => {
+                                                toolbar.setMode(v).catch((e) => {
                                                     console.error('[Toolbar:mode] change-failed', { mode: v, error: e });
                                                     toast.error(e instanceof Error ? e.message : 'Failed to change mode.');
                                                     clearTransition();
                                                 });
-                                            } })), _jsx(ToggleGroup, { type: 'multiple', value: [...toolbarCtx.attachmentFilter], onValueChange: v => {
+                                            } })), _jsx(ToggleGroup, { type: "multiple", value: [...toolbarCtx.attachmentFilter], onValueChange: (v) => {
                                                 if (v)
                                                     $attachmentFilter.set(v);
-                                            }, className: 'ml-auto max-w-full flex-wrap justify-end', children: ATTCH_TYPES.map(f => (_jsx(ToggleGroupItem, { value: f, size: 'sm', className: 'h-6 px-2 text-xs capitalize', onMouseDown: preserveSel, children: f }, f))) })] })) : (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { children: [_jsx(TOOLBAR_COMPONENTS.BlockType, { disabled: !ready, toolbar: toolbar, adapter: adapter, options: toolbarOpts.blocks, json: mode === 'edit' }), toolbarOpts.formats
+                                            }, className: "ml-auto max-w-full flex-wrap justify-end", children: ATTCH_TYPES.map((f) => (_jsx(ToggleGroupItem, { value: f, size: "sm", className: "h-6 px-2 text-xs capitalize", onMouseDown: preserveSel, children: f }, f))) })] })) : (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { children: [_jsx(TOOLBAR_COMPONENTS.BlockType, { disabled: !ready, toolbar: toolbar, adapter: adapter, options: toolbarOpts.blocks, json: mode === 'edit' }), toolbarOpts.formats
                                                     .map(({ key: k, lbl: l, icon: i, shortcut: s, format: f }) => ({
                                                     key: k,
                                                     lbl: l,
                                                     icon: i,
                                                     shortcut: s,
-                                                    onClick: () => jsonCmd({ type: 'decorator', decorator: k === 'strikethrough' ? 'strike-through' : k }) ||
-                                                        (adapter?.format ? adapter.format(k === 'strikethrough' ? 'strike' : k) : insert?.(f(sSel('text', true)))),
+                                                    onClick: () => jsonCmd({
+                                                        type: 'decorator',
+                                                        decorator: k === 'strikethrough' ? 'strike-through' : k,
+                                                    }) ||
+                                                        (adapter?.format
+                                                            ? adapter.format(k === 'strikethrough'
+                                                                ? 'strike'
+                                                                : k)
+                                                            : insert?.(f(sSel('text', true)))),
                                                 }))
-                                                    .map(({ key: k, lbl: l, icon: i, shortcut: s, onClick: o }) => (_jsx(Button, { lbl: l, shortcut: s, disabled: !ready, onMouseDown: preserveSel, onClick: o, children: React.createElement(i) }, k))), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { lbl: 'Insert list', disabled: !ready, onMouseDown: preserveSel, children: _jsx(BulletListIcon, {}) }) }), _jsx(DropdownMenuContent, { align: 'start', children: [
-                                                                { key: 'bullet', lbl: 'Bulleted list', icon: BulletListIcon, prefix: '\n- ', fallback: 'Item' },
-                                                                { key: 'number', lbl: 'Numbered list', icon: NumberListIcon, prefix: '\n1. ', fallback: 'Item' },
-                                                                { key: 'check', lbl: 'Checklist', icon: CheckListIcon, prefix: '\n- [ ] ', fallback: 'Task' },
+                                                    .map(({ key: k, lbl: l, icon: i, shortcut: s, onClick: o }) => (_jsx(Button, { lbl: l, shortcut: s, disabled: !ready, onMouseDown: preserveSel, onClick: o, children: React.createElement(i) }, k))), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { lbl: "Insert list", disabled: !ready, onMouseDown: preserveSel, children: _jsx(BulletListIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "start", children: [
+                                                                {
+                                                                    key: 'bullet',
+                                                                    lbl: 'Bulleted list',
+                                                                    icon: BulletListIcon,
+                                                                    prefix: '\n- ',
+                                                                    fallback: 'Item',
+                                                                },
+                                                                {
+                                                                    key: 'number',
+                                                                    lbl: 'Numbered list',
+                                                                    icon: NumberListIcon,
+                                                                    prefix: '\n1. ',
+                                                                    fallback: 'Item',
+                                                                },
+                                                                {
+                                                                    key: 'check',
+                                                                    lbl: 'Checklist',
+                                                                    icon: CheckListIcon,
+                                                                    prefix: '\n- [ ] ',
+                                                                    fallback: 'Task',
+                                                                },
                                                             ]
                                                                 .map(({ key: k, lbl: l, icon: i, prefix: p, fallback: f }) => ({
                                                                 key: k,
                                                                 lbl: l,
                                                                 icon: i,
                                                                 onClick: () => jsonCmd({ type: 'list', list: k === 'check' ? 'bullet' : k }) ||
-                                                                    (adapter?.toggleList ? adapter.toggleList(k) : toolbar?.toggleList ? toolbar.toggleList(k) : insert?.(`${p}${sSel(f)}\n`)),
+                                                                    (adapter?.toggleList
+                                                                        ? adapter.toggleList(k)
+                                                                        : toolbar?.toggleList
+                                                                            ? toolbar.toggleList(k)
+                                                                            : insert?.(`${p}${sSel(f)}\n`)),
                                                             }))
                                                                 .map(({ key: k, lbl: l, icon: i, onClick: o }) => (_jsxs(DropdownMenuItem, { disabled: !ready, onSelect: () => {
                                                                     if (o)
                                                                         o();
-                                                                }, className: MENU_GAP_CLASS, children: [React.createElement(i, { className: ICON_CLASS }), _jsx("span", { children: l })] }, k))) })] })] }), _jsxs("div", { className: 'flex items-center gap-1', children: [docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: v => {
+                                                                }, className: MENU_GAP_CLASS, children: [React.createElement(i, { className: ICON_CLASS }), _jsx("span", { children: l })] }, k))) })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [docs && (_jsx(Mode, { editable: editable, mode: mode, disabled: !ready, onModeChange: (v) => {
                                                         if (!editable || !toolbar)
                                                             return;
-                                                        toolbar.setMode(v).catch(e => {
+                                                        toolbar.setMode(v).catch((e) => {
                                                             console.error('[Toolbar:mode] change-failed', { mode: v, error: e });
                                                             toast.error(e instanceof Error ? e.message : 'Failed to change mode.');
                                                             clearTransition();
                                                         });
-                                                    } })), _jsx(TextTooltip, { content: 'Find (\u2318F)', side: 'top', align: 'center', delayDuration: 400, children: docs && _jsx(TOOLBAR_COMPONENTS.FindReplace, { mode: mode, toolbar: toolbar }) }), _jsx(TOOLBAR_COMPONENTS.Undo, { onMouseDown: preserveSel, disabled: !ready, adapter: adapter }), docs && (_jsxs(_Fragment, { children: [_jsx(UiButton, { size: 'xs', variant: 'tonal', disabled: !ready || !dirty || saving !== null || (toolbar?.optimistic ?? false), onMouseDown: e => {
+                                                    } })), _jsx(TextTooltip, { content: "Find (\u2318F)", side: "top", align: "center", delayDuration: 400, children: docs && _jsx(FindReplace, { mode: mode, toolbar: toolbar }) }), _jsx(TOOLBAR_COMPONENTS.Undo, { onMouseDown: preserveSel, disabled: !ready, adapter: adapter }), docs && (_jsxs(_Fragment, { children: [_jsx(UiButton, { size: "xs", variant: "tonal", disabled: !ready || !dirty || saving !== null || (toolbar?.optimistic ?? false), onMouseDown: (e) => {
                                                                 e.preventDefault();
-                                                            }, onClick: e => void toolbarActions.discard?.(e), children: "Discard" }), _jsxs(ButtonGroup, { children: [_jsx(TextTooltip, { content: 'Save (\u2318S)', side: 'top', align: 'center', delayDuration: 400, children: _jsx(UiButton, { size: 'xs', disabled: !ready || !dirty, loading: saving === 'saving', onMouseDown: e => {
+                                                            }, onClick: (e) => void toolbarActions.discard?.(e), children: "Discard" }), _jsxs(ButtonGroup, { children: [_jsx(TextTooltip, { content: "Save (\u2318S)", side: "top", align: "center", delayDuration: 400, children: _jsx(UiButton, { size: "xs", disabled: !ready || !dirty, loading: saving === 'saving', onMouseDown: (e) => {
                                                                             e.preventDefault();
-                                                                        }, onClick: e => void onSave?.(e), children: "Save" }) }), _jsx(TextTooltip, { content: 'Version History', side: 'top', align: 'center', delayDuration: 400, children: _jsx(UiButton, { size: 'xs', className: 'px-0.5', disabled: !ready, "aria-label": 'Version History', onMouseDown: e => {
+                                                                        }, onClick: (e) => void onSave?.(e), children: "Save" }) }), _jsx(TextTooltip, { content: "Version History", side: "top", align: "center", delayDuration: 400, children: _jsx(UiButton, { size: "xs", className: "px-0.5", disabled: !ready, "aria-label": "Version History", onMouseDown: (e) => {
                                                                             e.preventDefault();
                                                                         }, onClick: () => {
                                                                             if (vers.length > 0 && !selVerId)
                                                                                 setSelVerId(vers[0].savedAt);
                                                                             setVerDialogOpen(true);
-                                                                        }, children: _jsx(CaretDownIcon, {}) }) }), _jsx(Dialog, { open: verDialogOpen, onOpenChange: setVerDialogOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Version History" }), _jsx(DialogDescription, { className: 'sr-only', children: "Select a version to preview and restore." }), _jsxs(Select, { value: selVerId, onValueChange: setSelVerId, children: [_jsx(SelectTrigger, { className: 'h-14', "aria-label": 'Select a version...', children: _jsx(SelectValue, { placeholder: 'Select a version...' }) }), _jsx(SelectContent, { children: vers.map(v => (_jsx(SelectItem, { value: v.savedAt, children: _jsxs("span", { className: 'flex flex-col text-left', children: [_jsxs("span", { children: [v.title, " (", new Date(v.savedAt).toLocaleString(), ")"] }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: v.description })] }) }, v.savedAt))) })] })] }), _jsx("div", { className: 'min-h-0 flex-1 overflow-y-auto', children: _jsx(CodeBlock, { tone: 'view', language: 'mdx', docsSource: true, code: previewPack.markdown.trim() || ' ' }) }), _jsxs(DialogFooter, { children: [_jsx(UiButton, { variant: 'ghost', onClick: () => { setVerDialogOpen(false); }, children: "Cancel" }), _jsx(UiButton, { disabled: !selVer, onClick: toolbarActions.restorePreview, children: "Restore" })] })] }) })] }), docs && publishDraft && (_jsx(UiButton, { size: 'xs', disabled: !ready || saving === 'saving', onMouseDown: e => e.preventDefault(), onClick: () => void publish(), children: "Publish" }))] }))] }), _jsxs("div", { className: 'flex items-center gap-0.5', children: [_jsx(TOOLBAR_COMPONENTS.Uploader, { icon: ImageIcon, insert: insert, onMouseDown: preserveSel, disabled: !ready, ctx: toolbar?.path }), _jsx(TOOLBAR_COMPONENTS.Custom, { onInsert: (_statement, v) => insert?.(v, true), onInsertMd: insert, onMouseDown: preserveSel, disabled: !ready, ctx: toolbar?.path })] }), _jsx(Dialog, { open: endpointOpen, onOpenChange: o => {
+                                                                        }, children: _jsx(CaretDownIcon, {}) }) }), _jsx(Dialog, { open: verDialogOpen, onOpenChange: setVerDialogOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Version History" }), _jsx(DialogDescription, { className: "sr-only", children: "Select a version to preview and restore." }), _jsxs(Select, { value: selVerId, onValueChange: setSelVerId, children: [_jsx(SelectTrigger, { className: "h-14", "aria-label": "Select a version...", children: _jsx(SelectValue, { placeholder: "Select a version..." }) }), _jsx(SelectContent, { children: vers.map((v) => (_jsx(SelectItem, { value: v.savedAt, children: _jsxs("span", { className: "flex flex-col text-left", children: [_jsxs("span", { children: [v.title, " (", new Date(v.savedAt).toLocaleString(), ")"] }), _jsx("span", { className: SECONDARY_TEXT_CLASS, children: v.description })] }) }, v.savedAt))) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsx(CodeBlock, { tone: "view", language: "mdx", docsSource: true, code: previewPack.markdown.trim() || ' ' }) }), _jsxs(DialogFooter, { children: [_jsx(UiButton, { variant: 'ghost', onClick: () => { setVerDialogOpen(false); }, children: "Cancel" }), _jsx(UiButton, { disabled: !selVer, onClick: toolbarActions.restorePreview, children: "Restore" })] })] }) })] }), docs && publishDraft && (_jsx(UiButton, { size: "xs", disabled: !ready || saving === 'saving', onMouseDown: (e) => e.preventDefault(), onClick: () => void publish(), children: "Publish" }))] }))] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TOOLBAR_COMPONENTS.Uploader, { icon: ImageIcon, insert: insert, onMouseDown: preserveSel, disabled: !ready, ctx: toolbar?.path }), _jsx(TOOLBAR_COMPONENTS.Custom, { onInsert: (_statement, v) => insert?.(v, true), onInsertMd: insert, onMouseDown: preserveSel, disabled: !ready, ctx: toolbar?.path })] }), _jsx(Dialog, { open: endpointOpen, onOpenChange: (o) => {
                                                 setEndpointOpen(o);
                                                 if (!o)
                                                     setEndpoint('');
-                                            }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Receive value" }), _jsx(DialogDescription, { className: 'sr-only', children: "Enter an API endpoint to receive code value into the editor." })] }), _jsx(Label, { htmlFor: 'docs-received-code-endpoint', children: "API endpoint" }), _jsx(Input, { id: 'docs-received-code-endpoint', value: endpoint, onChange: e => {
+                                            }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Receive value" }), _jsx(DialogDescription, { className: "sr-only", children: "Enter an API endpoint to receive code value into the editor." })] }), _jsx(Label, { htmlFor: "docs-received-code-endpoint", children: "API endpoint" }), _jsx(Input, { id: "docs-received-code-endpoint", value: endpoint, onChange: (e) => {
                                                             setEndpoint(e.target.value);
-                                                        }, placeholder: '/api/docs?action=testimonials' }), _jsxs("div", { className: 'flex justify-end gap-2', children: [_jsx(UiButton, { variant: 'outline', onClick: () => { setEndpointOpen(false); }, children: "Cancel" }), _jsx(UiButton, { disabled: !endpoint.trim(), onClick: insertionActions.receiveCode, children: "Receive value" })] })] }) })] })) }) }) })] }) }));
+                                                        }, placeholder: "/api/docs?action=testimonials" }), _jsxs("div", { className: 'flex justify-end gap-2', children: [_jsx(UiButton, { variant: 'outline', onClick: () => { setEndpointOpen(false); }, children: "Cancel" }), _jsx(UiButton, { disabled: !endpoint.trim(), onClick: insertionActions.receiveCode, children: "Receive value" })] })] }) })] })) }) }) })] }) }));
     },
 };
-export const { DocsToolbarActions } = TOOLBAR_COMPONENTS;
-export const { Toolbar } = TOOLBAR_COMPONENTS;
+export const { DocsToolbarActions, Toolbar } = TOOLBAR_COMPONENTS;
 //# sourceMappingURL=_toolbar.js.map