@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/README.md

@@ -79,8 +79,15 @@ and block-at-a-time / timeline editing primitives (`useBlockNavigator`,
   SVG preview gutter, `inlinePreviewWidth` default 320).
 - **Code & image modes** — pass `fileName` / `language` to get a Monaco-only
   code editor, or `imageSrc` (+ `imageMode: 'edit'`) for the image surface.
+- **Host-triggered Find mode** — control `findMode` and
+  `onFindModeChange` (or call `setFindMode` from context) to replace the
+  toolbar's editing actions with live search, previous/next navigation, and
+  highlighted matches. No Find trigger button is added unless the host supplies
+  one.
 - **Embedding** — `readOnly`, `placeholder`, `submitOnEnter`, `fullWidth`,
-  `thinMargins`, `minHeight`/`maxHeight` auto-grow for chat-composer use.
+  `thinMargins`, `minHeight`/`maxHeight` auto-grow for chat-composer use, plus
+  host-controlled Write typography through `writeCanvasSettings` (`textSize`
+  and `lineSpacing`).
 - **Color scheme** — pass `colorScheme="light" | "dark"` for the editor chrome
   (**v1.5:** renamed from the old `theme` prop; `RawEditor`'s own `theme` prop is
   now `monacoTheme`).
@@ -100,7 +107,8 @@ side by side:
 import { useEditorContext } from '@bendyline/squisq-editor-react';
 
 function MyComponent() {
-  const { markdownSource, doc, activeView, setMarkdownSource, setActiveView } = useEditorContext();
+  const { markdownSource, doc, activeView, setMarkdownSource, setActiveView, setFindMode } =
+    useEditorContext();
   // markdownSource: string, doc: Doc | null, activeView: 'raw' | 'wysiwyg' | 'preview'
 }
 ```

package/dist/index.d.ts

@@ -17,6 +17,7 @@ import { DecorationSet } from '@tiptap/pm/view';
 import { Editor as Editor$1 } from '@tiptap/react';
 import { PluginKey } from '@tiptap/pm/state';
 import { Node } from '@tiptap/pm/model';
+import { RenderResult } from 'mermaid';
 import { SquisqAnnotatedSchema, JsonFormValidator, JsonFormValidationError } from '@bendyline/squisq/jsonForm';
 import { NarrationTrace, NarrationAlignment, NarrationScript, NarrationTimingJsonV3, VadConfig } from '@bendyline/squisq/narration';
 import { ImageEditExportFormat, ImageEditVersionManager } from '@bendyline/squisq/imageEdit';
@@ -153,6 +154,8 @@ interface EditorState {
     colorScheme: EditorColorScheme;
     /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
     editorMode: EditorMode;
+    /** Whether the host-triggered Find toolbar is active. */
+    findMode: boolean;
     /** Monaco language ID for the Raw editor. */
     language: string;
     /**
@@ -262,6 +265,8 @@ interface EditorActions {
     setMarkdownDoc: (doc: MarkdownDocument) => void;
     /** Switch the active view */
     setActiveView: (view: EditorView) => void;
+    /** Enter or leave the host-triggered Find toolbar mode. */
+    setFindMode: (active: boolean) => void;
     /** Register / unregister the Tiptap editor instance (called by WysiwygEditor) */
     setTiptapEditor: (editor: Editor | null) => void;
     /** Register / unregister the Monaco editor instance (called by RawEditor) */
@@ -444,6 +449,13 @@ interface EditorProviderProps {
     fileName?: string;
     /** Explicit Monaco language ID — wins over the fileName-derived one. */
     language?: string;
+    /**
+     * Controlled Find-mode state. No trigger button is rendered by default;
+     * hosts can set this prop or call `setFindMode` from editor context.
+     */
+    findMode?: boolean;
+    /** Notified when Find mode requests a state change (for example, its X button). */
+    onFindModeChange?: (active: boolean) => void;
     /**
      * Initial visibility of the inline preview gutter. Defaults to false.
      * The toolbar's View menu can toggle it at runtime.
@@ -523,7 +535,7 @@ interface ViewPreferences {
     /** Document vs. block-at-a-time layout. */
     layoutMode?: LayoutMode;
 }
-declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, allowRecording, allowNarrate, fileName, language, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, allowRecording, allowNarrate, fileName, language, findMode: controlledFindMode, onFindModeChange, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Host-supplied context sections rendered INSIDE the Monaco (raw/code)
@@ -601,6 +613,14 @@ interface CodeContext {
     onToggleSection?: (sectionId: string, expanded: boolean) => void;
 }
 
+/** Host-controlled typography for the markdown Write canvas. */
+interface WriteCanvasSettings {
+    /** Base text size in CSS pixels. Headings continue to scale relative to it. */
+    textSize?: number;
+    /** Unitless line-height multiplier for body text. */
+    lineSpacing?: number;
+}
+
 interface EditorShellProps {
     /** Initial markdown content */
     initialMarkdown?: string;
@@ -743,6 +763,12 @@ interface EditorShellProps {
      * toolbar, tabs, and status bar keep their normal sizing.
      */
     thinMargins?: boolean;
+    /**
+     * Host-controlled typography for the markdown Write canvas. `textSize` is
+     * measured in CSS pixels and `lineSpacing` is a unitless line-height
+     * multiplier. This is presentation-only and does not modify the markdown.
+     */
+    writeCanvasSettings?: WriteCanvasSettings;
     /**
      * Render the bottom status bar (word / character / line / block counts
      * and parse-state indicator). Defaults to `true`. Set to `false` in
@@ -776,6 +802,14 @@ interface EditorShellProps {
      * switches the shell into code mode.
      */
     language?: string;
+    /**
+     * Controlled Find-mode state. Find has no built-in trigger button; hosts
+     * opt in by setting this prop (or by calling `setFindMode` from a toolbar
+     * slot rendered inside the editor context).
+     */
+    findMode?: boolean;
+    /** Called when Find mode requests a state change, including its X button. */
+    onFindModeChange?: (active: boolean) => void;
     /**
      * Optional async provider for `@`-mention suggestions. When supplied,
      * typing `@` inside the editor opens a popover of candidates; selecting
@@ -935,7 +969,7 @@ interface EditorShellProps {
  * Complete markdown editor shell with toolbar, view switcher, and three
  * editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
  */
-declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, showPlayTab, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, showStatusBar, imageDisplayMode, fileName, language, mentionProvider, documentLinkProvider, allowRecording, allowNarrate, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
+declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, showPlayTab, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, allowRecording, allowNarrate, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Bridges a host-supplied {@link CodeContext} onto the live Monaco editor:
@@ -1265,17 +1299,6 @@ interface RawEditorProps {
  */
 declare function RawEditor({ monacoTheme, minimap, fontSize, wordWrap, className, submitOnEnter, readOnly, }: RawEditorProps): react_jsx_runtime.JSX.Element;
 
-/**
- * WysiwygEditor
- *
- * Tiptap-based rich text editor that provides a WYSIWYG editing experience
- * for markdown content. Uses squisq's parseMarkdown/stringifyMarkdown for
- * conversion rather than Tiptap's built-in HTML serialization, ensuring
- * perfect fidelity with the markdown format.
- *
- * Includes extensions for GFM features: tables, task lists, strikethrough,
- * and code blocks.
- */
 interface WysiwygEditorProps {
     /**
      * Placeholder text when the editor is empty. If omitted, one of several
@@ -1292,12 +1315,14 @@ interface WysiwygEditorProps {
     submitOnEnter?: () => void;
     /** Disable Tiptap editing — renders content but blocks input. */
     readOnly?: boolean;
+    /** Host-controlled base text size and line spacing for the Write canvas. */
+    writeCanvasSettings?: WriteCanvasSettings;
 }
 /**
  * Rich WYSIWYG markdown editor built on Tiptap (ProseMirror).
  * Binds to the shared EditorContext for source synchronization.
  */
-declare function WysiwygEditor({ placeholder, className, submitOnEnter, readOnly, }: WysiwygEditorProps): react_jsx_runtime.JSX.Element;
+declare function WysiwygEditor({ placeholder, className, submitOnEnter, readOnly, writeCanvasSettings, }: WysiwygEditorProps): react_jsx_runtime.JSX.Element;
 
 interface PreviewPanelProps {
     /** Base path for resolving media URLs in DocPlayer */
@@ -2855,6 +2880,471 @@ declare function removeNodeOp(diagram: AsciiDiagram, nodeId: string): AsciiDiagr
  */
 declare function shouldPasteAsAsciiFence(text: string): boolean;
 
+/**
+ * Tiptap extension for `mermaid` code fences.
+ *
+ * The code block always remains the document source of truth. The extension
+ * only hides/shows that block and mounts a rendered Mermaid canvas after it;
+ * it never replaces the fence with an editor-only node or a reduced graph
+ * model. That keeps every Mermaid diagram type and directive round-trippable.
+ */
+
+interface MermaidDiagramBlockEntry {
+    /** Synthetic session id, stable while this code block remains in the doc. */
+    id: string;
+    /** Current ProseMirror position of the `codeBlock`. */
+    pos: number;
+}
+interface MermaidDiagramPluginState {
+    entries: MermaidDiagramBlockEntry[];
+    decorations: DecorationSet;
+    sourceVisible: ReadonlySet<string>;
+    seq: number;
+}
+interface MermaidDiagramExtensionOptions {
+    /** When false, leave Mermaid fences as ordinary code blocks. */
+    enabled?: boolean;
+}
+declare const MERMAID_DIAGRAM_KEY: PluginKey<MermaidDiagramPluginState>;
+/** Mermaid is an explicit mode: only a `mermaid` language tag claims it. */
+declare function isMermaidDiagramNode(node: Node): boolean;
+declare function findMermaidDiagramBlockPos(editor: Editor$1, blockId: string): number | null;
+declare function isMermaidSourceVisible(editor: Editor$1, blockId: string): boolean;
+/** Toggle the editable code block without changing any document bytes. */
+declare function toggleMermaidSource(editor: Editor$1, blockId: string): void;
+declare const MermaidDiagramExtension: Extension<MermaidDiagramExtensionOptions, any>;
+
+interface MermaidDiagramWidgetProps {
+    editor: Editor$1;
+    blockId: string;
+    host?: HTMLElement | null;
+}
+declare function MermaidDiagramWidget({ editor, blockId, host }: MermaidDiagramWidgetProps): react_jsx_runtime.JSX.Element | null;
+
+/** Mermaid 11.16 flowchart shape catalog used by the structured editor. */
+interface MermaidFlowchartShape {
+    id: string;
+    label: string;
+    category: 'Basic' | 'Process' | 'Data' | 'Documents' | 'Symbols';
+    aliases?: readonly string[];
+}
+/**
+ * Every non-asset shape in Mermaid 11.16's expanded flowchart catalog.
+ * `icon` and `image` are deliberately excluded: they require additional
+ * asset-specific fields and, for icons, a host-registered icon pack.
+ */
+declare const MERMAID_FLOWCHART_SHAPES: readonly [{
+    readonly id: "rect";
+    readonly label: "Process";
+    readonly category: "Basic";
+    readonly aliases: readonly ["rectangle", "proc"];
+}, {
+    readonly id: "rounded";
+    readonly label: "Event";
+    readonly category: "Basic";
+    readonly aliases: readonly ["event"];
+}, {
+    readonly id: "stadium";
+    readonly label: "Terminal";
+    readonly category: "Basic";
+    readonly aliases: readonly ["pill"];
+}, {
+    readonly id: "circle";
+    readonly label: "Circle";
+    readonly category: "Basic";
+    readonly aliases: readonly ["circ"];
+}, {
+    readonly id: "dbl-circ";
+    readonly label: "Double circle";
+    readonly category: "Basic";
+    readonly aliases: readonly ["double-circle"];
+}, {
+    readonly id: "diam";
+    readonly label: "Decision";
+    readonly category: "Basic";
+    readonly aliases: readonly ["diamond", "question"];
+}, {
+    readonly id: "hex";
+    readonly label: "Preparation";
+    readonly category: "Basic";
+    readonly aliases: readonly ["hexagon", "prepare"];
+}, {
+    readonly id: "tri";
+    readonly label: "Extract";
+    readonly category: "Basic";
+    readonly aliases: readonly ["triangle"];
+}, {
+    readonly id: "odd";
+    readonly label: "Odd";
+    readonly category: "Basic";
+}, {
+    readonly id: "notch-rect";
+    readonly label: "Card";
+    readonly category: "Process";
+    readonly aliases: readonly ["card"];
+}, {
+    readonly id: "delay";
+    readonly label: "Delay";
+    readonly category: "Process";
+}, {
+    readonly id: "div-rect";
+    readonly label: "Divided process";
+    readonly category: "Process";
+    readonly aliases: readonly ["div-proc"];
+}, {
+    readonly id: "fork";
+    readonly label: "Fork / join";
+    readonly category: "Process";
+    readonly aliases: readonly ["join"];
+}, {
+    readonly id: "lin-rect";
+    readonly label: "Lined process";
+    readonly category: "Process";
+    readonly aliases: readonly ["lin-proc"];
+}, {
+    readonly id: "st-rect";
+    readonly label: "Multi-process";
+    readonly category: "Process";
+    readonly aliases: readonly ["processes"];
+}, {
+    readonly id: "fr-rect";
+    readonly label: "Subprocess";
+    readonly category: "Process";
+    readonly aliases: readonly ["subprocess"];
+}, {
+    readonly id: "tag-rect";
+    readonly label: "Tagged process";
+    readonly category: "Process";
+    readonly aliases: readonly ["tag-proc"];
+}, {
+    readonly id: "lean-r";
+    readonly label: "Input / output";
+    readonly category: "Data";
+    readonly aliases: readonly ["in-out"];
+}, {
+    readonly id: "lean-l";
+    readonly label: "Output / input";
+    readonly category: "Data";
+    readonly aliases: readonly ["out-in"];
+}, {
+    readonly id: "datastore";
+    readonly label: "Data store";
+    readonly category: "Data";
+    readonly aliases: readonly ["data-store"];
+}, {
+    readonly id: "cyl";
+    readonly label: "Database";
+    readonly category: "Data";
+    readonly aliases: readonly ["database", "db"];
+}, {
+    readonly id: "h-cyl";
+    readonly label: "Direct access storage";
+    readonly category: "Data";
+    readonly aliases: readonly ["das"];
+}, {
+    readonly id: "lin-cyl";
+    readonly label: "Disk storage";
+    readonly category: "Data";
+    readonly aliases: readonly ["disk"];
+}, {
+    readonly id: "bow-rect";
+    readonly label: "Stored data";
+    readonly category: "Data";
+    readonly aliases: readonly ["stored-data"];
+}, {
+    readonly id: "win-pane";
+    readonly label: "Internal storage";
+    readonly category: "Data";
+    readonly aliases: readonly ["window-pane"];
+}, {
+    readonly id: "doc";
+    readonly label: "Document";
+    readonly category: "Documents";
+}, {
+    readonly id: "docs";
+    readonly label: "Multi-document";
+    readonly category: "Documents";
+    readonly aliases: readonly ["documents"];
+}, {
+    readonly id: "lin-doc";
+    readonly label: "Lined document";
+    readonly category: "Documents";
+}, {
+    readonly id: "tag-doc";
+    readonly label: "Tagged document";
+    readonly category: "Documents";
+}, {
+    readonly id: "flag";
+    readonly label: "Paper tape";
+    readonly category: "Documents";
+    readonly aliases: readonly ["paper-tape"];
+}, {
+    readonly id: "bang";
+    readonly label: "Bang";
+    readonly category: "Symbols";
+}, {
+    readonly id: "cloud";
+    readonly label: "Cloud";
+    readonly category: "Symbols";
+}, {
+    readonly id: "hourglass";
+    readonly label: "Collate";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["collate"];
+}, {
+    readonly id: "bolt";
+    readonly label: "Communication link";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["com-link"];
+}, {
+    readonly id: "brace";
+    readonly label: "Comment left";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["comment"];
+}, {
+    readonly id: "brace-r";
+    readonly label: "Comment right";
+    readonly category: "Symbols";
+}, {
+    readonly id: "braces";
+    readonly label: "Comment both";
+    readonly category: "Symbols";
+}, {
+    readonly id: "curv-trap";
+    readonly label: "Display";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["display"];
+}, {
+    readonly id: "notch-pent";
+    readonly label: "Loop limit";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["loop-limit"];
+}, {
+    readonly id: "flip-tri";
+    readonly label: "Manual file";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["manual-file"];
+}, {
+    readonly id: "sl-rect";
+    readonly label: "Manual input";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["manual-input"];
+}, {
+    readonly id: "trap-t";
+    readonly label: "Manual operation";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["manual"];
+}, {
+    readonly id: "trap-b";
+    readonly label: "Priority action";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["priority"];
+}, {
+    readonly id: "f-circ";
+    readonly label: "Junction";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["junction"];
+}, {
+    readonly id: "sm-circ";
+    readonly label: "Start";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["start"];
+}, {
+    readonly id: "fr-circ";
+    readonly label: "Stop";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["stop"];
+}, {
+    readonly id: "cross-circ";
+    readonly label: "Summary";
+    readonly category: "Symbols";
+    readonly aliases: readonly ["summary"];
+}, {
+    readonly id: "text";
+    readonly label: "Text block";
+    readonly category: "Symbols";
+}];
+type MermaidFlowchartShapeId = (typeof MERMAID_FLOWCHART_SHAPES)[number]['id'];
+declare function isMermaidFlowchartShapeId(value: string): value is MermaidFlowchartShapeId;
+/** Normalize legacy parser names and documented aliases to the general-syntax id. */
+declare function normalizeMermaidFlowchartShape(value: string | null | undefined): MermaidFlowchartShapeId;
+
+type MermaidFlowchartDirection = 'TB' | 'TD' | 'BT' | 'RL' | 'LR';
+interface MermaidEditableNode {
+    id: string;
+    domId: string;
+    label: string;
+    shape: MermaidFlowchartShapeId;
+    classes: readonly string[];
+}
+interface MermaidEditableEdge {
+    id: string;
+    source: string;
+    target: string;
+    label: string;
+    type?: string;
+    stroke?: string;
+    userDefinedId?: boolean;
+}
+interface MermaidFlowchartModel {
+    kind: 'flowchart';
+    direction: MermaidFlowchartDirection;
+    nodes: readonly MermaidEditableNode[];
+    edges: readonly MermaidEditableEdge[];
+}
+/** Structured editing is additive to full Mermaid rendering, never required by it. */
+type MermaidEditableModel = MermaidFlowchartModel;
+
+type MermaidNodeCanvasAction = 'rename' | 'shape' | 'duplicate' | 'connect' | 'delete';
+interface MermaidDiagramCanvasProps {
+    source: string;
+    maximized?: boolean;
+    onToggleMaximize?: () => void;
+    selectedNodeId?: string | null;
+    selectedEdgeId?: string | null;
+    renamingNodeId?: string | null;
+    renamingEdgeId?: string | null;
+    connectSourceId?: string | null;
+    connecting?: boolean;
+    onModelChange?: (model: MermaidEditableModel | null) => void;
+    onSelectNode?: (id: string | null) => void;
+    onSelectEdge?: (id: string | null) => void;
+    onNodeAction?: (action: MermaidNodeCanvasAction, id: string) => void;
+    onEditEdgeLabel?: (id: string) => void;
+    onCommitRename?: (id: string, label: string) => boolean;
+    onCommitEdgeLabel?: (id: string, label: string) => boolean;
+    onCancelRename?: () => void;
+    onCancelEdgeLabel?: () => void;
+    onDisconnectEdge?: (id: string) => void;
+}
+declare function MermaidDiagramCanvas({ source, maximized, onToggleMaximize, selectedNodeId, selectedEdgeId, renamingNodeId, renamingEdgeId, connectSourceId, connecting, onModelChange, onSelectNode, onSelectEdge, onNodeAction, onEditEdgeLabel, onCommitRename, onCommitEdgeLabel, onCancelRename, onCancelEdgeLabel, onDisconnectEdge, }: MermaidDiagramCanvasProps): react_jsx_runtime.JSX.Element;
+
+/** Live source view for one registered Mermaid code fence. */
+
+interface MermaidDiagramData {
+    /** Mermaid source exactly as stored inside the code block. */
+    source: string;
+}
+declare function useMermaidDiagramData(editor: Editor$1, blockId: string): MermaidDiagramData | null;
+
+/** Browser-only, lazy Mermaid renderer shared by all complex-diagram widgets. */
+
+interface MermaidRenderResult extends Pick<RenderResult, 'svg' | 'diagramType'> {
+    /** Present for flowchart/graph sources that Mermaid exposes as editable nodes and edges. */
+    model?: MermaidEditableModel;
+}
+/**
+ * Render through Mermaid's public API so all diagram types supported by the
+ * pinned Mermaid release share the same path. The caller owns insertion of
+ * the returned SVG; interactive `bindFunctions` are intentionally not run in
+ * the editor, preventing authored links/callbacks from hijacking editing.
+ */
+declare function renderMermaidDiagram(id: string, source: string, container?: Element): Promise<MermaidRenderResult>;
+/** Inspect the subset Mermaid exposes as structured flowchart nodes/edges. */
+declare function inspectMermaidSource(source: string): Promise<MermaidEditableModel | null>;
+declare function mermaidErrorMessage(error: unknown): string;
+
+interface MermaidShapePaletteProps {
+    selected?: MermaidFlowchartShapeId;
+    onPick: (shape: MermaidFlowchartShapeId) => void;
+    onClose: () => void;
+}
+declare function MermaidShapePalette({ selected, onPick, onClose }: MermaidShapePaletteProps): react_jsx_runtime.JSX.Element;
+
+/** Curated starter gallery for the diagram grammars supported by Mermaid 11.16. */
+type MermaidDiagramCategory = 'Structure' | 'Planning' | 'Data';
+type MermaidDiagramPreview = 'flowchart' | 'sequence' | 'state' | 'class' | 'er' | 'mindmap' | 'c4' | 'architecture' | 'gantt' | 'timeline' | 'journey' | 'kanban' | 'git' | 'pie' | 'quadrant' | 'sankey' | 'xy' | 'requirement';
+interface MermaidDiagramType {
+    readonly id: string;
+    readonly label: string;
+    readonly description: string;
+    readonly category: MermaidDiagramCategory;
+    readonly preview: MermaidDiagramPreview;
+    readonly starter: string;
+    /** Mermaid marks this grammar as beta or otherwise experimental. */
+    readonly badge?: 'Beta' | 'Experimental';
+}
+declare const MERMAID_DIAGRAM_TYPES: readonly MermaidDiagramType[];
+declare const DEFAULT_MERMAID_DIAGRAM_TYPE: MermaidDiagramType;
+declare function mermaidDiagramMarkdown(source: string): string;
+
+/** Small authored SVG cues; these avoid spinning up Mermaid for every gallery tile. */
+declare function MermaidDiagramTypeThumbnail({ preview }: {
+    preview: MermaidDiagramPreview;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tiptap extension for ordinary explicit-language code fences.
+ *
+ * The ProseMirror code block remains authoritative. This plugin hides it and
+ * mounts a Monaco editor whose edits rewrite only the node's text content, so
+ * fence language and source round-trip through Markdown without a parallel model.
+ */
+
+interface CodeSnippetBlockEntry {
+    /** Synthetic session id, stable while this code block remains in the doc. */
+    id: string;
+    /** Current ProseMirror position of the `codeBlock`. */
+    pos: number;
+}
+interface CodeSnippetPluginState {
+    entries: CodeSnippetBlockEntry[];
+    decorations: DecorationSet;
+    seq: number;
+}
+interface CodeSnippetExtensionOptions {
+    /** When false, leave all ordinary language-tagged fences as code blocks. */
+    enabled?: boolean;
+}
+declare const CODE_SNIPPET_KEY: PluginKey<CodeSnippetPluginState>;
+declare function isCodeSnippetNode(node: Node): boolean;
+declare function findCodeSnippetBlockPos(editor: Editor$1, blockId: string): number | null;
+declare const CodeSnippetExtension: Extension<CodeSnippetExtensionOptions, any>;
+
+interface CodeSnippetWidgetProps {
+    editor: Editor$1;
+    blockId: string;
+    host?: HTMLElement | null;
+}
+declare function CodeSnippetWidget({ editor, blockId, host }: CodeSnippetWidgetProps): react_jsx_runtime.JSX.Element | null;
+
+/** Lossless edits for language-tagged code fences. */
+
+declare function replaceCodeSnippetText(editor: Editor$1, blockId: string, nextText: string): boolean;
+
+/** Live source/language view for one registered code snippet fence. */
+
+interface CodeSnippetData {
+    /** Fence language exactly as stored in the ProseMirror node. */
+    fenceLanguage: string;
+    label: string;
+    monacoLanguage: string;
+    /** Source exactly as stored inside the code block. */
+    source: string;
+}
+declare function useCodeSnippetData(editor: Editor$1, blockId: string): CodeSnippetData | null;
+
+/** Languages offered by the Insert Code Snippet menu and understood by Monaco. */
+interface CodeSnippetLanguage {
+    /** Language written after the opening Markdown fence. */
+    readonly fenceLanguage: string;
+    /** Human-readable picker/header label. */
+    readonly label: string;
+    /** Monaco language id used for syntax highlighting and language services. */
+    readonly monacoLanguage: string;
+    /** Small, immediately editable body inserted for a new snippet. */
+    readonly starter: string;
+}
+declare const CODE_SNIPPET_LANGUAGES: readonly CodeSnippetLanguage[];
+/** The first token is the syntax id; any remaining fence metadata stays untouched. */
+declare function codeSnippetFenceLanguageToken(language: string | null | undefined): string;
+/** True for explicit language-tagged fences not owned by a richer Squisq block editor. */
+declare function isCodeSnippetFenceLanguage(language: string | null | undefined): boolean;
+declare function monacoLanguageForFence(language: string | null | undefined): string;
+declare function codeSnippetLanguageLabel(language: string | null | undefined): string;
+/** Markdown insertion form. The caller decides whether to wrap selected text or use a starter. */
+declare function codeSnippetMarkdown(language: string, source: string): string;
+
 /**
  * TreeViewExtension — Tiptap/ProseMirror plugin that turns code blocks
  * containing ASCII file-tree / outline art into interactive outline editors.
@@ -4195,4 +4685,4 @@ interface UseImageEditorReturn {
 }
 declare function useImageEditor(options: UseImageEditorOptions): UseImageEditorReturn;
 
-export { ALL_PICKER_ENTRIES, type AddTimelineEventOptions, type AddTimelineEventResult, type ApplyAsciiDiagramCommandOptions, type AsciiDiagramBlockEntry, AsciiDiagramExtension, type AsciiDiagramExtensionOptions, type AsciiDiagramPluginState, type AsciiDiagramView, AsciiDiagramWidget, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, type BlockTagVisibility, type CameraStreamOptions, type CanvasRect, type CanvasSink, type CaptureKind, type CodeContext, type CodeContextSection, CodeContextZones, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DEFAULT_TELEPROMPTER_PREFS, DiagramCanvas, type DiagramCommand, type DiagramData, type DiagramEdge, type DiagramNode, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, type DocumentLinkCandidate, type DocumentLinkProvider, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMPTY_TRANSITION, EYE_LINE_FRACTION, type EditorActions, type EditorColorScheme, type EditorContextValue, type EditorMode, EditorProvider, type EditorProviderProps, EditorShell, type EditorShellProps, type EditorState, type EditorView, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FloatOpenOptions, type FloatTier, type FloatingWindowHandle, type FloatingWindowManager, type FolderEntry, FolderView, type FolderViewProps, type HeadingTransitionAttrs, HeadingWithTemplate, type ImageDisplayMode, ImageEditor, type ImageEditorAction, type ImageEditorProps, type ImageEditorState, type ImageEditorTool, ImageViewer, type ImageViewerProps, ImportThemeSection, type ImportThemeSectionProps, type ImportedThemeResult, InlinePreviewGutter, type InlinePreviewGutterProps, JsonEditor, type JsonEditorProps, type LayoutMode, MediaBin, type MediaBinProps, type MediaClipPatch, type MentionCandidate, type MentionProvider, type MicAnalysisHandle, type MicAnalysisStatus, type MonacoWorkerConstructor, type MonacoWorkerConstructors, type NarrationRecorderController, type NarrationRecorderState, type NarrationSavePlan, type NarrationSaveResult, type NarrationTake, OutlinePanel, type OutlinePanelProps, PCM_WORKLET_NAME, PCM_WORKLET_SOURCE, PICKER_CATEGORIES, type PickerCategory, type PickerEntry, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeMenu, PreviewModeSwitch, PreviewPanel, type PreviewPanelProps, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, type PrompterTransport, REPAIRABLE_KEY, RawEditor, type RawEditorProps, type RecordedBookmark, RecorderButton, type RecorderButtonProps, type RecorderColorScheme, RecorderModal, type RecorderModalProps, RecorderPanel, type RecorderPanelProps, type RecorderSaveResult, type RecorderSource, type RecorderState, type RepairableBlockEntry, RepairableDiagramExtension, type RepairableDiagramExtensionOptions, type RepairablePluginState, type ResolvedFormat, type ScreenStreamHandle, type ScreenStreamOptions, StatusBar, type StatusBarProps, TELEPROMPTER_CSS, TIMELINE_VIEW_KEY, TRANSITION_ENTRIES, TRANSITION_GROUPS, type TeleprompterController, TeleprompterControls, type TeleprompterControlsProps, type TeleprompterPrefs, type TeleprompterRecordingDeps, TeleprompterSurface, type TeleprompterSurfaceProps, TeleprompterView, type TeleprompterViewProps, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, type ThemeInheritance, ThemePicker, type ThemePickerProps, type ThemeSaveExtras, type TimelineBlockEntry, type TimelineCommand, type TimelineCommandResult, TimelineEditorWidget, type TimelineEditorWidgetProps, type TimelineEventPatch, TimelineTrack, type TimelineTrackProps, type TimelineViewData, TimelineViewExtension, type TimelineViewExtensionOptions, type TimelineViewPluginState, type TimingJson, type TokenLineMap, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type TreeBlockEntry, type TreeCommand, TreeOutlineWidget, type TreeViewData, TreeViewExtension, type TreeViewExtensionOptions, type TreeViewPluginState, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseImageEditorOptions, type UseImageEditorReturn, type UseMediaRecorderOptions, type UseMediaRecorderResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, type ViewPreferences, ViewSwitcher, type ViewSwitcherProps, WysiwygEditor, type WysiwygEditorProps, addEdgeOp, addItemOp, addNodeOp, addTimelineEventOp, applyAsciiDiagramCommand, applyRepairCommand, applyTimelineCommand, applyTreeCommand, asciiDiagramToCanvas, buildFilename, buildNarrationSavePlan, buildPreviewDoc, buildTimingJson, cameraVideoLine, classifyFile, configureMonacoWorkers, createFloatingWindowManager, detectFloatTiers, detectLanguageFromFileName, draftPatchFromImportedTheme, encodeTimingJson, ensureTeleprompterStyles, executeNarrationSave, findAsciiDiagramBlockPos, findRepairableBlockPos, findTimelineBlockPos, findTransitionEntry, findTreeBlockPos, formatSeconds, getBlockSlices, getCaptureKind, getTimelineForNode, imageEditorReducer, indentItemOp, initialImageEditorState, insertNarrationPreamble, isAsciiSourceVisible, isRepairableFence, isTimelineSourceSafeForSemanticEdit, lineToOffset, markdownToTiptap, measureTokenLines, moveItemDownOp, moveItemUpOp, moveNodeOp, narrationAnnotationLine, nextTimelineEventId, offsetToLine, outdentItemOp, parseTimelineForNode, partitionFiles, processMediaFiles, processTextFile, processTextFiles, prompterVarsFromTheme, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, registerPcmWorklet, removeEdgeOp, removeItemOp, removeNodeOp, removeTimelineEventOp, renameItemOp, renameNodeOp, replaceAsciiFenceText, replaceAsciiFenceText as replaceTreeFenceText, requestCameraStream, requestMicStream, requestScreenStream, resizeNodeOp, resolveFileKind, resolveFormat, sanitizeAsciiLabel, sanitizeTimelineText, sanitizeTreeLabel, searchPickerEntries, setBlockAttrsValue, setBlockDurationInSource, setHeadingAttrsTransition, setHeadingLineTransition, setMediaClipInSource, shouldPasteAsAsciiFence, shouldPasteAsTimelineFence, shouldPasteAsTreeFence, sliceIndexAtOffset, spliceBlock, stepScroll, summarizeBlockProps, supportsDisplayMedia, supportsMediaRecorder, supportsUserMedia, targetOffsetFor, templateLabel, timingPathFor, tiptapToMarkdown, toggleAsciiSource, toggleDirOp, transitionLabel, translateDiagramOp, updateTimelineEventOp, useAsciiDiagramData, useBlockNavigator, useCustomTemplates, useCustomThemes, useDocCustomTemplates, useDocCustomThemes, useEditorContext, useFileDrop, useFloatingWindow, useImageEditor, useMediaRecorder, useMicAnalysis, useMonacoLoader, useNarrationRecorder, usePreviewSettings, useStreamPreview, useTeleprompter, useTimelineData, useTreeViewData, vadConfigForSensitivity };
+export { ALL_PICKER_ENTRIES, type AddTimelineEventOptions, type AddTimelineEventResult, type ApplyAsciiDiagramCommandOptions, type AsciiDiagramBlockEntry, AsciiDiagramExtension, type AsciiDiagramExtensionOptions, type AsciiDiagramPluginState, type AsciiDiagramView, AsciiDiagramWidget, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, type BlockTagVisibility, CODE_SNIPPET_KEY, CODE_SNIPPET_LANGUAGES, type CameraStreamOptions, type CanvasRect, type CanvasSink, type CaptureKind, type CodeContext, type CodeContextSection, CodeContextZones, type CodeSnippetBlockEntry, type CodeSnippetData, CodeSnippetExtension, type CodeSnippetExtensionOptions, type CodeSnippetLanguage, type CodeSnippetPluginState, CodeSnippetWidget, type CodeSnippetWidgetProps, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DEFAULT_MERMAID_DIAGRAM_TYPE, DEFAULT_TELEPROMPTER_PREFS, DiagramCanvas, type DiagramCommand, type DiagramData, type DiagramEdge, type DiagramNode, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, type DocumentLinkCandidate, type DocumentLinkProvider, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMPTY_TRANSITION, EYE_LINE_FRACTION, type EditorActions, type EditorColorScheme, type EditorContextValue, type EditorMode, EditorProvider, type EditorProviderProps, EditorShell, type EditorShellProps, type EditorState, type EditorView, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FloatOpenOptions, type FloatTier, type FloatingWindowHandle, type FloatingWindowManager, type FolderEntry, FolderView, type FolderViewProps, type HeadingTransitionAttrs, HeadingWithTemplate, type ImageDisplayMode, ImageEditor, type ImageEditorAction, type ImageEditorProps, type ImageEditorState, type ImageEditorTool, ImageViewer, type ImageViewerProps, ImportThemeSection, type ImportThemeSectionProps, type ImportedThemeResult, InlinePreviewGutter, type InlinePreviewGutterProps, JsonEditor, type JsonEditorProps, type LayoutMode, MERMAID_DIAGRAM_KEY, MERMAID_DIAGRAM_TYPES, MERMAID_FLOWCHART_SHAPES, MediaBin, type MediaBinProps, type MediaClipPatch, type MentionCandidate, type MentionProvider, type MermaidDiagramBlockEntry, MermaidDiagramCanvas, type MermaidDiagramCanvasProps, type MermaidDiagramCategory, type MermaidDiagramData, MermaidDiagramExtension, type MermaidDiagramExtensionOptions, type MermaidDiagramPluginState, type MermaidDiagramPreview, type MermaidDiagramType, MermaidDiagramTypeThumbnail, MermaidDiagramWidget, type MermaidDiagramWidgetProps, type MermaidEditableEdge, type MermaidEditableModel, type MermaidEditableNode, type MermaidFlowchartDirection, type MermaidFlowchartModel, type MermaidFlowchartShape, type MermaidFlowchartShapeId, type MermaidNodeCanvasAction, type MermaidRenderResult, MermaidShapePalette, type MermaidShapePaletteProps, type MicAnalysisHandle, type MicAnalysisStatus, type MonacoWorkerConstructor, type MonacoWorkerConstructors, type NarrationRecorderController, type NarrationRecorderState, type NarrationSavePlan, type NarrationSaveResult, type NarrationTake, OutlinePanel, type OutlinePanelProps, PCM_WORKLET_NAME, PCM_WORKLET_SOURCE, PICKER_CATEGORIES, type PickerCategory, type PickerEntry, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeMenu, PreviewModeSwitch, PreviewPanel, type PreviewPanelProps, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, type PrompterTransport, REPAIRABLE_KEY, RawEditor, type RawEditorProps, type RecordedBookmark, RecorderButton, type RecorderButtonProps, type RecorderColorScheme, RecorderModal, type RecorderModalProps, RecorderPanel, type RecorderPanelProps, type RecorderSaveResult, type RecorderSource, type RecorderState, type RepairableBlockEntry, RepairableDiagramExtension, type RepairableDiagramExtensionOptions, type RepairablePluginState, type ResolvedFormat, type ScreenStreamHandle, type ScreenStreamOptions, StatusBar, type StatusBarProps, TELEPROMPTER_CSS, TIMELINE_VIEW_KEY, TRANSITION_ENTRIES, TRANSITION_GROUPS, type TeleprompterController, TeleprompterControls, type TeleprompterControlsProps, type TeleprompterPrefs, type TeleprompterRecordingDeps, TeleprompterSurface, type TeleprompterSurfaceProps, TeleprompterView, type TeleprompterViewProps, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, type ThemeInheritance, ThemePicker, type ThemePickerProps, type ThemeSaveExtras, type TimelineBlockEntry, type TimelineCommand, type TimelineCommandResult, TimelineEditorWidget, type TimelineEditorWidgetProps, type TimelineEventPatch, TimelineTrack, type TimelineTrackProps, type TimelineViewData, TimelineViewExtension, type TimelineViewExtensionOptions, type TimelineViewPluginState, type TimingJson, type TokenLineMap, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type TreeBlockEntry, type TreeCommand, TreeOutlineWidget, type TreeViewData, TreeViewExtension, type TreeViewExtensionOptions, type TreeViewPluginState, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseImageEditorOptions, type UseImageEditorReturn, type UseMediaRecorderOptions, type UseMediaRecorderResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, type ViewPreferences, ViewSwitcher, type ViewSwitcherProps, type WriteCanvasSettings, WysiwygEditor, type WysiwygEditorProps, addEdgeOp, addItemOp, addNodeOp, addTimelineEventOp, applyAsciiDiagramCommand, applyRepairCommand, applyTimelineCommand, applyTreeCommand, asciiDiagramToCanvas, buildFilename, buildNarrationSavePlan, buildPreviewDoc, buildTimingJson, cameraVideoLine, classifyFile, codeSnippetFenceLanguageToken, codeSnippetLanguageLabel, codeSnippetMarkdown, configureMonacoWorkers, createFloatingWindowManager, detectFloatTiers, detectLanguageFromFileName, draftPatchFromImportedTheme, encodeTimingJson, ensureTeleprompterStyles, executeNarrationSave, findAsciiDiagramBlockPos, findCodeSnippetBlockPos, findMermaidDiagramBlockPos, findRepairableBlockPos, findTimelineBlockPos, findTransitionEntry, findTreeBlockPos, formatSeconds, getBlockSlices, getCaptureKind, getTimelineForNode, imageEditorReducer, indentItemOp, initialImageEditorState, insertNarrationPreamble, inspectMermaidSource, isAsciiSourceVisible, isCodeSnippetFenceLanguage, isCodeSnippetNode, isMermaidDiagramNode, isMermaidFlowchartShapeId, isMermaidSourceVisible, isRepairableFence, isTimelineSourceSafeForSemanticEdit, lineToOffset, markdownToTiptap, measureTokenLines, mermaidDiagramMarkdown, mermaidErrorMessage, monacoLanguageForFence, moveItemDownOp, moveItemUpOp, moveNodeOp, narrationAnnotationLine, nextTimelineEventId, normalizeMermaidFlowchartShape, offsetToLine, outdentItemOp, parseTimelineForNode, partitionFiles, processMediaFiles, processTextFile, processTextFiles, prompterVarsFromTheme, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, registerPcmWorklet, removeEdgeOp, removeItemOp, removeNodeOp, removeTimelineEventOp, renameItemOp, renameNodeOp, renderMermaidDiagram, replaceAsciiFenceText, replaceCodeSnippetText, replaceAsciiFenceText as replaceTreeFenceText, requestCameraStream, requestMicStream, requestScreenStream, resizeNodeOp, resolveFileKind, resolveFormat, sanitizeAsciiLabel, sanitizeTimelineText, sanitizeTreeLabel, searchPickerEntries, setBlockAttrsValue, setBlockDurationInSource, setHeadingAttrsTransition, setHeadingLineTransition, setMediaClipInSource, shouldPasteAsAsciiFence, shouldPasteAsTimelineFence, shouldPasteAsTreeFence, sliceIndexAtOffset, spliceBlock, stepScroll, summarizeBlockProps, supportsDisplayMedia, supportsMediaRecorder, supportsUserMedia, targetOffsetFor, templateLabel, timingPathFor, tiptapToMarkdown, toggleAsciiSource, toggleDirOp, toggleMermaidSource, transitionLabel, translateDiagramOp, updateTimelineEventOp, useAsciiDiagramData, useBlockNavigator, useCodeSnippetData, useCustomTemplates, useCustomThemes, useDocCustomTemplates, useDocCustomThemes, useEditorContext, useFileDrop, useFloatingWindow, useImageEditor, useMediaRecorder, useMermaidDiagramData, useMicAnalysis, useMonacoLoader, useNarrationRecorder, usePreviewSettings, useStreamPreview, useTeleprompter, useTimelineData, useTreeViewData, vadConfigForSensitivity };