@ai-matrx/rich-editor 0.1.2 → 0.2.0

package/dist/editor/RichEditorImpl.js

@@ -0,0 +1,714 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./rich-editor.css";
+import { useDeferredValue, useEffect, useImperativeHandle, useRef, useState } from "react";
+import {
+  AlignLeft,
+  Check,
+  ChevronDown,
+  Code2,
+  Eye,
+  Focus,
+  Hash,
+  Keyboard,
+  ListTree,
+  Loader2,
+  Mic,
+  MicOff,
+  Minimize2,
+  MoreHorizontal,
+  Save,
+  Search,
+  Type
+} from "lucide-react";
+import { ConfirmDialog } from "@ai-matrx/rich-content/host/app-bindings";
+import { TextInputDialog } from "@ai-matrx/rich-content/host/app-bindings";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  useIsMobile
+} from "@ai-matrx/design-system";
+import { toast } from "@ai-matrx/rich-content/host/toast";
+import { cn } from "@ai-matrx/design-system";
+import { EditableContextMenu } from "@ai-matrx/rich-content/host/app-bindings";
+import { buildApplicationScopeFromMenuContext } from "@ai-matrx/rich-content/host/app-bindings";
+import { useMicField } from "@ai-matrx/rich-content/host/app-bindings";
+import { useFileUpload } from "@ai-matrx/rich-content/host/app-bindings";
+import { fileUrls } from "@ai-matrx/rich-content/host/app-bindings";
+import { RichDocument } from "@ai-matrx/rich-content/rich-document/RichDocument";
+import { planSave } from "../core/save-plan.js";
+import { reconcileHostValue } from "../core/host-value.js";
+import { measureText } from "../core/text-metrics.js";
+import { outlineOf } from "../core/outline.js";
+import { RichEditorContext } from "./RichEditorContext.js";
+import { VisualEditor } from "../visual/VisualEditor.js";
+import { SourceEditor } from "../source/SourceEditor.js";
+import { FindReplacePanel } from "../panels/FindReplacePanel.js";
+import { OutlinePanel } from "../panels/OutlinePanel.js";
+import { ShortcutsDialog } from "../panels/ShortcutsDialog.js";
+import { KindPicker } from "../panels/KindPicker.js";
+import { islandMeta, inlineIslandLabel } from "../islands/island-meta.js";
+import { withImagePolicy } from "@ai-matrx/rich-content/levels/prose/remote-image-policy";
+import { RecordAnnotations } from "@ai-matrx/rich-content/host/app-bindings";
+import { annotationRecordOf } from "@ai-matrx/rich-content/host/app-bindings";
+import { formatCount } from "@ai-matrx/kit/format";
+const VIEWS = ["visual", "source", "preview"];
+function describeDelta(delta) {
+  const raw = delta.before ?? delta.after ?? "";
+  const block = islandMeta(delta.islandType, raw);
+  const excerpt = raw.replace(/\s+/g, " ").trim();
+  const quoted = `\u201C${excerpt.length > 40 ? `${excerpt.slice(0, 40)}\u2026` : excerpt}\u201D`;
+  const name = raw.startsWith("{{") ? raw : !block.generic ? block.label : `${inlineIslandLabel(delta.islandType)} ${quoted}`;
+  switch (delta.kind) {
+    case "removed":
+      return `${name} would be removed`;
+    case "changed":
+      return `${name} would be changed`;
+    case "swallowed":
+      return `${name} would stop being protected \u2014 something above it (an unclosed code block or tag) now swallows it`;
+    default:
+      return `${name} would be added`;
+  }
+}
+const VIEW_META = {
+  visual: { label: "Visual", icon: Type },
+  source: { label: "Source", icon: Code2 },
+  preview: { label: "Preview", icon: Eye }
+};
+function RichEditorImpl({
+  value,
+  onSave,
+  onChange,
+  variables = null,
+  onDeclareVariable,
+  defaultView = "visual",
+  view: controlledView,
+  onViewChange,
+  chrome = "full",
+  hostContextMenu = false,
+  controllerRef,
+  readOnly = false,
+  placeholder,
+  surfaceName = "matrx-user/markdown-studio",
+  sourceFeature = "documents",
+  contentSource = { type: "raw" },
+  annotationRecord,
+  saveLabel = "Save",
+  className,
+  toolbarExtras,
+  onCancel,
+  cancelLabel = "Cancel",
+  defaultOutlineOpen,
+  onNothingToSave,
+  imagePolicy
+}) {
+  const isMobile = useIsMobile();
+  const [stored, setStored] = useState(value);
+  const [current, setCurrent] = useState(value);
+  const [view, setView] = useState(controlledView ?? defaultView);
+  const [mountKey, setMountKey] = useState(0);
+  const [findMode, setFindMode] = useState(null);
+  const [outlineChoice, setOutlineChoice] = useState(
+    defaultOutlineOpen ?? (chrome === "bare" ? false : null)
+  );
+  const outlineOpen = outlineChoice ?? !isMobile;
+  const setOutlineOpen = (next) => setOutlineChoice(typeof next === "function" ? next(outlineOpen) : next);
+  const [focusMode, setFocusMode] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [renderIslands, setRenderIslands] = useState(true);
+  const [loadStats, setLoadStats] = useState(null);
+  const [pendingPlan, setPendingPlan] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [saveState, setSaveState] = useState(null);
+  const [linkDialog, setLinkDialog] = useState({ open: false, href: "" });
+  const [kindRequest, setKindRequest] = useState(null);
+  const approved = useRef(/* @__PURE__ */ new Set());
+  const handle = useRef(null);
+  const imageInput = useRef(null);
+  const { upload } = useFileUpload();
+  const lastValue = useRef(value);
+  const ownSaves = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (value === lastValue.current) return;
+    let draft = current;
+    try {
+      draft = handle.current?.flush() ?? current;
+    } catch {
+    }
+    const action = reconcileHostValue({ value, lastValue: lastValue.current, stored, draft, ownSaves: ownSaves.current });
+    lastValue.current = value;
+    if (action === "ignore") return;
+    setStored(value);
+    if (action === "adopt-stored") return;
+    if (action === "keep-draft") {
+      toast.warning("This document changed while you were editing. Your edits are kept \u2014 Save writes them over the new version.");
+      return;
+    }
+    ownSaves.current.clear();
+    setCurrent(value);
+    approved.current.clear();
+    setMountKey((key) => key + 1);
+  }, [value]);
+  const deferred = useDeferredValue(current);
+  const metrics = measureText(deferred);
+  const outline = outlineOf(deferred);
+  const dirty = current !== stored;
+  const updateCurrent = (text) => {
+    setCurrent(text);
+    onChange?.(text);
+  };
+  const flush = () => {
+    const text = handle.current?.flush() ?? current;
+    if (text !== current) updateCurrent(text);
+    return text;
+  };
+  const setText = (text) => {
+    updateCurrent(text);
+    setMountKey((key) => key + 1);
+  };
+  const switchView = (next) => {
+    if (next === view) return;
+    try {
+      flush();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+      if (controlledView !== void 0) onViewChange?.(view);
+      return;
+    }
+    handle.current?.clearFind();
+    setView(next);
+    setMountKey((key) => key + 1);
+    if (next !== controlledView) onViewChange?.(next);
+  };
+  useEffect(() => {
+    if (controlledView !== void 0 && controlledView !== view) switchView(controlledView);
+  }, [controlledView]);
+  const doSave = async (plan) => {
+    if (!onSave) return;
+    setSaving(true);
+    ownSaves.current.add(plan.text);
+    try {
+      const readBack = await onSave(plan.text, plan);
+      const storedNow = typeof readBack === "string" ? readBack : plan.text;
+      const verified = typeof readBack === "string" ? readBack === plan.text : null;
+      setStored(storedNow);
+      lastValue.current = storedNow;
+      approved.current.clear();
+      setSaveState({ at: /* @__PURE__ */ new Date(), verified });
+      if (verified === false) {
+        toast.error("Saved, but what the database holds differs from the editor. Reload to see exactly what was stored.");
+      }
+    } catch (error) {
+      toast.error(`Not saved: ${error instanceof Error ? error.message : String(error)}. Your text is still here \u2014 try again.`);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const save = () => {
+    if (!onSave || readOnly || saving) return;
+    let text;
+    try {
+      text = flush();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+      return;
+    }
+    const plan = planSave(stored, text, { approvedIslands: approved.current });
+    if (!plan.changed) {
+      if (onNothingToSave) onNothingToSave();
+      else toast.info("Nothing changed \u2014 the stored text is already exactly this.");
+      return;
+    }
+    if (plan.needsConsent.length || plan.error) {
+      setPendingPlan(plan);
+      return;
+    }
+    void doSave(plan);
+  };
+  const pickImage = () => imageInput.current?.click();
+  const uploadImage = async (file) => {
+    try {
+      const uploaded = await upload({ kind: "file", file }, { folderPath: "Editor images" });
+      const alt = file.name.replace(/\.[^.]+$/, "").replace(/[[\]]/g, "");
+      return `![${alt}](${fileUrls(uploaded.fileId).inline})`;
+    } catch (error) {
+      toast.error(`The image did not upload: ${error instanceof Error ? error.message : String(error)}`);
+      return null;
+    }
+  };
+  const shellRef = useRef(null);
+  const liveShell = {
+    save,
+    find: () => setFindMode("find"),
+    replace: () => setFindMode("replace"),
+    toggleOutline: () => setOutlineOpen((open) => !open),
+    toggleFocus: () => setFocusMode((on) => !on),
+    exitFocus: () => {
+      if (!focusMode) return false;
+      setFocusMode(false);
+      return true;
+    },
+    cycleView: () => switchView(VIEWS[(VIEWS.indexOf(view) + 1) % VIEWS.length] ?? "visual"),
+    showHelp: () => setHelpOpen(true),
+    showWordCount: () => toast.info(`${formatCount(metrics.words)} words \xB7 ${formatCount(metrics.characters)} characters \xB7 ${metrics.readingMinutes} min read`),
+    editLink: () => setLinkDialog({ open: true, href: handle.current?.currentLink() ?? "https://" }),
+    pickKind: () => new Promise((resolve) => setKindRequest(() => resolve)),
+    pickImage,
+    uploadImage,
+    variables: () => variables,
+    declareVariable: (name) => onDeclareVariable?.(name),
+    approveIsland: (raw) => approved.current.add(raw)
+  };
+  useEffect(() => {
+    shellRef.current = liveShell;
+  });
+  const [shell] = useState(() => ({
+    save: () => shellRef.current?.save(),
+    find: () => shellRef.current?.find(),
+    replace: () => shellRef.current?.replace(),
+    toggleOutline: () => shellRef.current?.toggleOutline(),
+    toggleFocus: () => shellRef.current?.toggleFocus(),
+    exitFocus: () => shellRef.current?.exitFocus() ?? false,
+    cycleView: () => shellRef.current?.cycleView(),
+    showHelp: () => shellRef.current?.showHelp(),
+    showWordCount: () => shellRef.current?.showWordCount(),
+    editLink: () => shellRef.current?.editLink(),
+    pickKind: () => shellRef.current?.pickKind() ?? Promise.resolve(null),
+    pickImage: () => shellRef.current?.pickImage(),
+    uploadImage: (file) => shellRef.current?.uploadImage(file) ?? Promise.resolve(null),
+    variables: () => shellRef.current?.variables() ?? null,
+    declareVariable: (name) => shellRef.current?.declareVariable(name),
+    approveIsland: (raw) => shellRef.current?.approveIsland(raw)
+  }));
+  const contextValue = {
+    variables,
+    approveIsland: (raw) => approved.current.add(raw),
+    uploadImage,
+    pickKind: shell.pickKind,
+    onDeclareVariable,
+    readOnly
+  };
+  const mic = useMicField({
+    label: "Editor",
+    getValue: () => "",
+    writeValue: () => void 0,
+    onTranscriptionComplete: (text) => {
+      if (text.trim()) handle.current?.replaceSelection(text.trim());
+    }
+    // No toast here: useMicField shows the one honest error (with its troubleshooting action).
+  });
+  const getApplicationScope = () => {
+    const selected = handle.current?.selectedText() ?? "";
+    return buildApplicationScopeFromMenuContext({
+      selectedText: selected,
+      selectionRange: null,
+      contextData: { content: current, active_text: selected || current }
+    });
+  };
+  const jump = (entry) => {
+    if (view === "preview") switchView("visual");
+    window.setTimeout(() => handle.current?.scrollToHeading(entry.slug, entry.offset), view === "preview" ? 200 : 0);
+    if (isMobile) setOutlineOpen(false);
+  };
+  useImperativeHandle(
+    controllerRef,
+    () => ({
+      focus: () => handle.current?.focus(),
+      selectedText: () => handle.current?.selectedText() ?? "",
+      replaceSelection: (text) => handle.current?.replaceSelection(text),
+      insertText: (text, where) => handle.current?.insertText(text, where) ?? false,
+      setText,
+      flush,
+      historyDepth: () => handle.current?.historyDepth() ?? { undo: 0, redo: 0 },
+      openFind: (withReplace = false) => setFindMode(withReplace ? "replace" : "find"),
+      placeCaret: (context) => handle.current?.placeCaret(context) ?? false,
+      jumpToOffset: (offset) => {
+        const entries = outlineOf(flush());
+        let entry;
+        for (const candidate of entries) {
+          if (candidate.offset > offset) break;
+          entry = candidate;
+        }
+        entry ??= entries[0];
+        if (entry) jump(entry);
+      }
+    })
+  );
+  const lockedCount = (loadStats?.lockedBlocks ?? 0) + (loadStats?.lockedChildren ?? 0);
+  const documentFacts = [
+    `${formatCount(metrics.words)} words \xB7 ${formatCount(metrics.characters)} characters \xB7 ${metrics.readingMinutes} min read`,
+    metrics.islands > 0 ? `${metrics.islands} protected (kinds, XML sections, code, math and variables are never rewritten by the editor)` : null,
+    view === "visual" && lockedCount > 0 ? `${lockedCount} kept as written (edit with its pencil or in Source)` : null
+  ].filter(Boolean).join("\n");
+  const saveStatus = dirty ? "Unsaved changes" : saveState ? `Saved ${saveState.at.toLocaleTimeString()}${saveState.verified ? " \xB7 verified byte-for-byte" : ""}` : (
+    // read-gate-exempt: save status of the document in this editor (nothing edited), not an empty read
+    "No changes"
+  );
+  const derivedRecord = contentSource.readOnly ? null : annotationRecordOf(contentSource);
+  const recordHere = annotationRecord !== void 0 ? annotationRecord : derivedRecord ? { ...derivedRecord, body: stored } : null;
+  const visualRecord = recordHere && !readOnly && current === recordHere.body && current.trim() ? {
+    token: recordHere.token,
+    id: recordHere.id,
+    title: recordHere.title ?? "",
+    body: recordHere.body,
+    contentVersion: Math.max(1, recordHere.contentVersion ?? 1),
+    ...recordHere.href ? { href: recordHere.href } : {}
+  } : null;
+  const viewEditor = view === "visual" ? /* @__PURE__ */ jsx(RecordAnnotations, { record: visualRecord, className: "h-full min-h-0", children: /* @__PURE__ */ jsx(
+    VisualEditor,
+    {
+      initialText: current,
+      onChange: updateCurrent,
+      onLoadStats: setLoadStats,
+      shell,
+      placeholder,
+      focusMode,
+      handleRef: handle
+    },
+    `visual-${mountKey}`
+  ) }) : /* @__PURE__ */ jsx(
+    SourceEditor,
+    {
+      initialText: current,
+      onChange: updateCurrent,
+      shell,
+      placeholder,
+      focusMode,
+      renderIslands,
+      handleRef: handle,
+      raw: true
+    },
+    `source-${mountKey}`
+  );
+  const body = view === "preview" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-6 py-6 sm:px-10", children: /* @__PURE__ */ jsx(
+    RichDocument,
+    {
+      imagePolicy: "inherit",
+      content: current,
+      source: contentSource,
+      enableContextMenu: true,
+      hideCopyButton: true,
+      allowFullScreenEditor: false,
+      actions: { exclude: ["edit", "delete-message"] }
+    }
+  ) }) }) : hostContextMenu ? /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor }) : /* @__PURE__ */ jsx(
+    EditableContextMenu,
+    {
+      sourceFeature,
+      surfaceName,
+      getApplicationScope,
+      insertAtCaret: (text) => {
+        if (!handle.current) return false;
+        handle.current.replaceSelection(text);
+        return true;
+      },
+      onTextReplace: setText,
+      onTextInsertBefore: (text) => handle.current?.insertText(text, "before"),
+      onTextInsertAfter: (text) => handle.current?.insertText(text, "after"),
+      onSave: onSave ? save : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor })
+    }
+  );
+  const CurrentViewIcon = VIEW_META[view].icon;
+  const tools = [
+    { id: "find", label: "Find & replace (\u2318F)", icon: Search, active: findMode !== null, disabled: view === "preview", run: () => setFindMode((mode) => mode ? null : "find") },
+    { id: "outline", label: "Outline (\u2318\u2325H)", icon: ListTree, active: outlineOpen, run: () => setOutlineOpen((open) => !open) },
+    { id: "focus", label: "Focus mode (\u2318\u21E7F)", icon: Focus, active: focusMode, disabled: view === "preview", run: () => setFocusMode((on) => !on) },
+    ...view === "source" ? [{ id: "islands", label: renderIslands ? "Show protected blocks as source" : "Render protected blocks", icon: AlignLeft, active: renderIslands, run: () => setRenderIslands((on) => !on) }] : [],
+    { id: "shortcuts", label: "Keyboard shortcuts (\u2318/)", icon: Keyboard, run: () => setHelpOpen(true) },
+    // Desktop shows the count in the toolbar; a phone reads it from the tools menu.
+    ...isMobile ? [{ id: "count", label: `${formatCount(metrics.words)} words \xB7 ${saveStatus}`, icon: Hash, run: () => toast.info(documentFacts) }] : []
+  ];
+  const micButton = mic.available && !readOnly && view !== "preview" ? /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      label: mic.isRecording ? "Stop dictation" : mic.isTranscribing ? "Finishing the transcript\u2026" : "Dictate at the cursor",
+      active: mic.isRecording,
+      onClick: () => void mic.handleVoiceClick(),
+      children: mic.isTranscribing ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : mic.isRecording ? /* @__PURE__ */ jsx(MicOff, { className: "h-4 w-4 text-destructive" }) : /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+    }
+  ) : null;
+  const cancelButton = onCancel ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onCancel,
+      disabled: saving,
+      className: "flex h-8 items-center rounded-md px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
+      title: dirty ? "Leave without saving \u2014 your unsaved changes are dropped" : "Close the editor",
+      children: cancelLabel
+    }
+  ) : null;
+  const saveButton = onSave && !readOnly ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: save,
+      disabled: saving,
+      className: cn(
+        "flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-medium",
+        dirty ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-border text-muted-foreground"
+      ),
+      title: `${saveStatus}. Save (\u2318S) \u2014 only what you changed is written`,
+      children: [
+        saving ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Save, { className: "h-3.5 w-3.5" }),
+        dirty ? saveLabel : "Saved"
+      ]
+    }
+  ) : null;
+  const editor = /* @__PURE__ */ jsxs(RichEditorContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("relative flex h-full min-h-0 flex-col bg-textured", className),
+        "data-testid": "rich-editor",
+        "data-rich-editor": "",
+        onKeyDown: (event) => {
+          if (event.key === "Escape" && focusMode && !event.defaultPrevented) {
+            event.preventDefault();
+            setFocusMode(false);
+          }
+        },
+        children: [
+          focusMode && /* @__PURE__ */ jsxs("div", { className: "matrx-touch-targets absolute right-2 top-2 z-20 flex items-center gap-1 rounded-lg border border-border bg-card/90 p-1 shadow-sm backdrop-blur", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setFocusMode(false),
+                className: "flex h-8 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground",
+                title: "Exit focus mode (Esc or \u2318\u21E7F)",
+                children: [
+                  /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }),
+                  "Exit focus"
+                ]
+              }
+            ),
+            saveButton
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-20 shrink-0", children: [
+            !focusMode && chrome === "full" && /* @__PURE__ */ jsxs("div", { className: "matrx-touch-targets flex min-h-10 items-center gap-1 border-b border-border bg-card/80 px-2 py-1 backdrop-blur", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto", children: [
+                isMobile ? (
+                  // A phone gets the view as one compact menu, so every control fits.
+                  /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `View: ${VIEW_META[view].label}`,
+                        title: "Switch view",
+                        className: "flex h-8 shrink-0 items-center gap-1 rounded-md border border-border bg-background/60 px-2 text-xs font-medium text-primary",
+                        children: [
+                          /* @__PURE__ */ jsx(CurrentViewIcon, { className: "h-3.5 w-3.5" }),
+                          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-44", children: VIEWS.map((option) => {
+                      const Icon = VIEW_META[option].icon;
+                      return /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => switchView(option), children: [
+                        /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4" }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: VIEW_META[option].label }),
+                        view === option && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
+                      ] }, option);
+                    }) })
+                  ] })
+                ) : /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "View", className: "flex shrink-0 items-center rounded-md border border-border bg-background/60 p-0.5", children: VIEWS.map((option) => {
+                  const Icon = VIEW_META[option].icon;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "tab",
+                      title: VIEW_META[option].label,
+                      "aria-selected": view === option,
+                      onClick: () => switchView(option),
+                      className: cn(
+                        "flex h-7 items-center gap-1 rounded px-2 text-xs font-medium text-muted-foreground",
+                        view === option && "bg-primary/10 text-primary-ink"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+                        VIEW_META[option].label
+                      ]
+                    },
+                    option
+                  );
+                }) }),
+                !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px shrink-0 bg-border" }),
+                  tools.map((tool) => /* @__PURE__ */ jsx(ToolbarButton, { label: tool.label, active: tool.active, onClick: tool.run, disabled: tool.disabled, children: /* @__PURE__ */ jsx(tool.icon, { className: "h-4 w-4" }) }, tool.id)),
+                  micButton
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                isMobile && micButton,
+                isMobile && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "More tools",
+                      title: "More tools",
+                      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+                      children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-60", children: tools.map((tool) => /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: tool.disabled, onSelect: tool.run, children: [
+                    /* @__PURE__ */ jsx(tool.icon, { className: "mr-2 h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: tool.label }),
+                    tool.active && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
+                  ] }, tool.id)) })
+                ] }),
+                !isMobile && /* @__PURE__ */ jsxs("span", { className: "shrink-0 whitespace-nowrap px-1 text-[11px] tabular-nums text-muted-foreground", title: documentFacts, children: [
+                  formatCount(metrics.words),
+                  " words"
+                ] }),
+                toolbarExtras,
+                cancelButton,
+                saveButton
+              ] })
+            ] }),
+            findMode && view !== "preview" && /* @__PURE__ */ jsx(
+              FindReplacePanel,
+              {
+                showReplace: findMode === "replace",
+                onFind: (query, options, step) => handle.current?.find(query, options, step) ?? { count: 0, current: -1, skippedProtected: 0, error: null },
+                onReplace: (query, replacement, options) => {
+                  for (const raw of handle.current?.replaceCurrent(query, replacement, options) ?? []) approved.current.add(raw);
+                },
+                onReplaceAll: (query, replacement, options) => {
+                  const before = handle.current?.find(query, options).count ?? 0;
+                  for (const raw of handle.current?.replaceAll(query, replacement, options) ?? []) approved.current.add(raw);
+                  return before;
+                },
+                onClose: () => {
+                  handle.current?.clearFind();
+                  setFindMode(null);
+                  handle.current?.focus();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+            outlineOpen && !focusMode && !isMobile && /* @__PURE__ */ jsx("aside", { className: "hidden w-56 shrink-0 border-r border-border bg-card/40 md:block", children: /* @__PURE__ */ jsx(OutlinePanel, { entries: outline, onJump: jump }) }),
+            /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 min-w-0 flex-1", children: [
+              body,
+              mic.isRecording && mic.liveTranscript && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "pointer-events-none absolute inset-x-3 bottom-3 z-20 mx-auto max-w-xl truncate rounded-lg border border-border bg-popover/95 px-3 py-1.5 text-xs text-muted-foreground shadow-lg backdrop-blur",
+                  "aria-live": "polite",
+                  children: [
+                    /* @__PURE__ */ jsx(Mic, { className: "mr-1.5 inline h-3 w-3 text-destructive", "aria-hidden": true }),
+                    mic.liveTranscript
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsx(Sheet, { open: outlineOpen, onOpenChange: setOutlineOpen, children: /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", className: "h-[70dvh] p-0 pb-safe", children: [
+      /* @__PURE__ */ jsx(SheetHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(SheetTitle, { children: "Outline" }) }),
+      /* @__PURE__ */ jsx(OutlinePanel, { entries: outline, onJump: jump })
+    ] }) }),
+    /* @__PURE__ */ jsx(ShortcutsDialog, { open: helpOpen, onOpenChange: setHelpOpen }),
+    /* @__PURE__ */ jsx(
+      KindPicker,
+      {
+        open: kindRequest !== null,
+        onResolve: (markdown) => {
+          kindRequest?.(markdown);
+          setKindRequest(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextInputDialog,
+      {
+        open: linkDialog.open,
+        onOpenChange: (open) => setLinkDialog((state) => ({ ...state, open })),
+        title: "Link",
+        description: "Paste the address. Leave it empty to remove the link.",
+        placeholder: "https://",
+        defaultValue: linkDialog.href,
+        confirmLabel: "Apply",
+        onConfirm: (href) => {
+          handle.current?.editLink(href.trim() && href.trim() !== "https://" ? href.trim() : null);
+          setLinkDialog({ open: false, href: "" });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: imageInput,
+        type: "file",
+        accept: "image/*",
+        className: "hidden",
+        onChange: (event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (!file) return;
+          void uploadImage(file).then((markdown) => {
+            if (markdown) handle.current?.replaceSelection(markdown);
+          });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: pendingPlan !== null,
+        onOpenChange: (open) => !open && setPendingPlan(null),
+        title: "This save changes protected content",
+        description: pendingPlan?.error ?? "Kinds, XML sections, code, math and {{variables}} are protected. You did not change these through their own editors, so here is exactly what saving would do:",
+        content: pendingPlan && /* @__PURE__ */ jsx("ul", { className: "max-h-60 list-disc space-y-1 overflow-y-auto pl-5 text-sm", children: pendingPlan.needsConsent.map((delta, index) => /* @__PURE__ */ jsx("li", { children: describeDelta(delta) }, `${delta.at}-${index}`)) }),
+        confirmLabel: "Save anyway",
+        cancelLabel: "Go back and fix it",
+        onConfirm: async () => {
+          const plan = pendingPlan;
+          setPendingPlan(null);
+          if (plan) await doSave(plan);
+        }
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: withImagePolicy(imagePolicy, editor) });
+}
+function ToolbarButton({
+  label,
+  active,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      "aria-pressed": active,
+      disabled,
+      onClick,
+      className: cn(
+        "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40",
+        active && "bg-primary/10 text-primary-ink"
+      ),
+      children
+    }
+  );
+}
+export {
+  RichEditorImpl as default
+};