@pixerate/editor-react 0.15.0 → 0.17.0

package/dist/index.js

@@ -1,22 +1,47 @@
 import {
   FormulaHints,
+  NameManager,
+  SheetTabs,
+  SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
+  SpreadsheetValidationDialog,
   useFillHandle,
   useSpreadsheetClipboard,
   useSpreadsheetEditor
-} from "./chunk-QVQYYHJ5.js";
+} from "./chunk-JR5ZBDR7.js";
 import {
+  AdjustmentLayersPanel,
+  ControlSlider,
+  CurvesEditor,
+  Histogram,
   ImageEditor,
-  useImageEditor
-} from "./chunk-LPFZMZ3L.js";
+  RefineEdgePanel,
+  SelectionOptionsBar,
+  useImageEditor,
+  useImageHistogram
+} from "./chunk-ZU54BMDC.js";
 import {
   CommandPalette,
   useCommandPalette,
   useCommandShortcuts,
   useRegisterCommands
 } from "./chunk-4ZC2WCUO.js";
+import {
+  RecoveryPrompt,
+  useAutosave
+} from "./chunk-XWFU2CSG.js";
+import {
+  AssetMentionChips,
+  GenerationHistory,
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useGenerationRecords,
+  useJobProgress
+} from "./chunk-I3E4KSA2.js";
 
 // src/hooks/usePromptEditor.ts
 import { useMemo, useEffect, useRef } from "react";
@@ -561,7 +586,8 @@ function useHistoryShortcuts(manager, options = {}) {
 // src/hooks/useFileImport.ts
 import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
-  FileImportController
+  FileImportController,
+  summarizeImportStructure
 } from "@pixerate/editor";
 function useFileImport(editor, options = {}) {
   const editorRef = useRef6(editor);
@@ -577,8 +603,10 @@ function useFileImport(editor, options = {}) {
     controller.setOptions(options);
   });
   const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
+  const structureSummary = useMemo3(() => summarizeImportStructure(state.lastOutcomes), [state.lastOutcomes]);
   return {
     ...state,
+    structureSummary,
     accept: controller.accept,
     openFilePicker: controller.openFilePicker,
     importFiles: controller.importFiles
@@ -660,11 +688,12 @@ var BubbleMenu = ({
 // src/components/TemplateRenderer.tsx
 import { useMemo as useMemo4 } from "react";
 import {
+  describeConditionalTag,
   evaluatePromptTokens,
+  formatConditionalTag,
   resolveTemplates
 } from "@pixerate/editor";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" };
 var TemplateRenderer = ({
   content,
   templates = [],
@@ -747,8 +776,8 @@ var TemplateRenderer = ({
         {
           "data-conditional": token.conditional,
           className: "inline-flex items-center px-1 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-amber-400/40 bg-amber-400/15 text-amber-700 dark:text-amber-300",
-          title: token.conditional === "end" ? `End of section: ${token.value}` : token.conditional === "if" ? `Shown when "${token.value}" has a value` : `Shown when "${token.value}" is empty`,
-          children: `{${CONDITIONAL_PREFIX[token.conditional]}${token.value}}`
+          title: describeConditionalTag(token),
+          children: formatConditionalTag(token)
         },
         index
       );
@@ -856,17 +885,312 @@ var VariableForm = ({
   }) });
 };
 
+// src/components/MergePreview.tsx
+import { useId as useId2, useState as useState7 } from "react";
+
+// src/hooks/useMergePreview.ts
+import { useCallback as useCallback5, useMemo as useMemo6, useState as useState6 } from "react";
+import {
+  extractVariables,
+  matchFields,
+  mergeRecords,
+  parseDataSource,
+  recordToValues,
+  serializeMergeOutputs
+} from "@pixerate/editor";
+function useMergePreview(options) {
+  const { template, templates, bindings, parseOptions } = options;
+  const [sourceText, setSourceTextState] = useState6(options.initialSource ?? "");
+  const [overrides, setOverrides] = useState6({});
+  const [index, setIndexState] = useState6(0);
+  const [result, setResult] = useState6(null);
+  const source = useMemo6(
+    () => parseDataSource(sourceText, parseOptions),
+    [sourceText, parseOptions]
+  );
+  const variables = useMemo6(
+    () => extractVariables(template, { templates, bindings }).map((v) => v.name),
+    [template, templates, bindings]
+  );
+  const mapping = useMemo6(() => {
+    const merged = {
+      ...matchFields(variables, source.fields).mapping
+    };
+    for (const [variable, field] of Object.entries(overrides)) {
+      if (variables.includes(variable) && (field === null || source.fields.includes(field))) {
+        merged[variable] = field;
+      }
+    }
+    return merged;
+  }, [variables, source.fields, overrides]);
+  const count = source.records.length;
+  const current = count === 0 ? 0 : Math.min(index, count - 1);
+  const record = source.records[current];
+  const values = useMemo6(
+    () => record ? recordToValues(record, mapping) : {},
+    [record, mapping]
+  );
+  const setSourceText = useCallback5((text) => {
+    setSourceTextState(text);
+    setIndexState(0);
+    setResult(null);
+  }, []);
+  const loadFile = useCallback5(
+    async (file) => setSourceText(await file.text()),
+    [setSourceText]
+  );
+  const setIndex = useCallback5(
+    (next) => setIndexState(Math.max(0, Math.min(next, count - 1))),
+    [count]
+  );
+  const setFieldMapping = useCallback5((variable, field) => {
+    setOverrides((previous) => ({ ...previous, [variable]: field }));
+    setResult(null);
+  }, []);
+  const resetMapping = useCallback5(() => setOverrides({}), []);
+  const merge = useCallback5(() => {
+    const merged = mergeRecords(template, source, {
+      templates,
+      bindings,
+      mapping,
+      skipIf: options.skipIf,
+      separator: options.separator,
+      maxOutputs: options.maxOutputs
+    });
+    setResult(merged);
+    return merged;
+  }, [template, source, templates, bindings, mapping, options.skipIf, options.separator, options.maxOutputs]);
+  const serialize = useCallback5(
+    (format) => result ? serializeMergeOutputs(result.outputs, format, options.separator) : "",
+    [result, options.separator]
+  );
+  return {
+    sourceText,
+    setSourceText,
+    loadFile,
+    source,
+    variables,
+    mapping,
+    setFieldMapping,
+    resetMapping,
+    index: current,
+    count,
+    setIndex,
+    next: () => setIndex(current + 1),
+    prev: () => setIndex(current - 1),
+    record,
+    values,
+    merge,
+    result,
+    serialize
+  };
+}
+
+// src/components/MergePreview.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function downloadText(text, fileName, type) {
+  if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") {
+    return;
+  }
+  const url = URL.createObjectURL(new Blob([text], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+var MergePreview = ({
+  content,
+  templates,
+  bindings,
+  templateColorMap,
+  defaultSource,
+  parseOptions,
+  skipIf,
+  separator,
+  maxOutputs,
+  onMerge,
+  downloadName = "merged",
+  className = "flex flex-col gap-3 text-sm"
+}) => {
+  const id = useId2();
+  const merge = useMergePreview({
+    template: content,
+    templates,
+    bindings,
+    initialSource: defaultSource,
+    parseOptions,
+    skipIf,
+    separator,
+    maxOutputs
+  });
+  const [copied, setCopied] = useState7(false);
+  const { source, result } = merge;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(merge.serialize("text"));
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className, "data-merge-preview": "", children: [
+    /* @__PURE__ */ jsxs3("label", { htmlFor: `${id}-source`, className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx4("span", { className: "font-medium", children: "Data source (CSV, TSV or JSON)" }),
+      /* @__PURE__ */ jsx4(
+        "textarea",
+        {
+          id: `${id}-source`,
+          "data-merge-source": "",
+          value: merge.sourceText,
+          rows: 5,
+          spellCheck: false,
+          onChange: (event) => merge.setSourceText(event.target.value),
+          className: "px-2 py-1 font-mono text-xs rounded-md border border-violet-400/40 bg-transparent"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "file",
+          accept: ".csv,.tsv,.txt,.json,text/csv,application/json",
+          "aria-label": "Load data source file",
+          "data-merge-file": "",
+          onChange: (event) => {
+            const file = event.target.files?.[0];
+            if (file) void merge.loadFile(file);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { "data-merge-summary": "", className: "opacity-70", children: `${source.records.length} record${source.records.length === 1 ? "" : "s"} \xB7 ${source.fields.length} field${source.fields.length === 1 ? "" : "s"}` })
+    ] }),
+    source.warnings.length > 0 && merge.sourceText.trim() !== "" && /* @__PURE__ */ jsx4("ul", { "data-merge-warnings": "", className: "text-amber-600 text-xs", children: source.warnings.map((warning, i) => /* @__PURE__ */ jsx4("li", { children: warning.message }, i)) }),
+    merge.variables.length > 0 && /* @__PURE__ */ jsxs3("fieldset", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx4("legend", { className: "font-medium", children: "Field mapping" }),
+      merge.variables.map((variable) => /* @__PURE__ */ jsxs3(
+        "label",
+        {
+          className: "flex items-center gap-2",
+          "data-merge-mapping": variable,
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "min-w-24 font-mono", children: `{${variable}}` }),
+            /* @__PURE__ */ jsxs3(
+              "select",
+              {
+                value: merge.mapping[variable] ?? "",
+                "aria-label": `Field for ${variable}`,
+                onChange: (event) => merge.setFieldMapping(variable, event.target.value || null),
+                className: "px-1 py-0.5 rounded-md border border-violet-400/40 bg-transparent",
+                children: [
+                  /* @__PURE__ */ jsx4("option", { value: "", children: "(none)" }),
+                  source.fields.map((field) => /* @__PURE__ */ jsx4("option", { value: field, children: field }, field))
+                ]
+              }
+            )
+          ]
+        },
+        variable
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "data-merge-prev": "",
+          onClick: merge.prev,
+          disabled: merge.index <= 0,
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { "data-merge-position": "", children: merge.count === 0 ? "No records" : `Record ${merge.index + 1} of ${merge.count}` }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "data-merge-next": "",
+          onClick: merge.next,
+          disabled: merge.index >= merge.count - 1,
+          children: "Next"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("div", { "data-merge-output": "", children: /* @__PURE__ */ jsx4(
+      TemplateRenderer,
+      {
+        content,
+        templates,
+        bindings,
+        templateColorMap,
+        resolve: !!templates && templates.length > 0,
+        values: merge.values
+      }
+    ) }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          "data-merge-all": "",
+          disabled: merge.count === 0,
+          onClick: () => {
+            const merged = merge.merge();
+            setCopied(false);
+            onMerge?.(merged);
+          },
+          children: "Merge all"
+        }
+      ),
+      result && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx4("span", { "data-merge-result": "", children: `${result.outputs.length} merged${result.skipped.length ? `, ${result.skipped.length} skipped` : ""}${result.truncated ? " (stopped early)" : ""}` }),
+        /* @__PURE__ */ jsx4("button", { type: "button", "data-merge-copy": "", onClick: copy, children: copied ? "Copied" : "Copy" }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "data-merge-download": "text",
+            onClick: () => downloadText(merge.serialize("text"), `${downloadName}.txt`, "text/plain"),
+            children: "Download .txt"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "data-merge-download": "json",
+            onClick: () => downloadText(merge.serialize("json"), `${downloadName}.json`, "application/json"),
+            children: "Download .json"
+          }
+        )
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        readOnly: true,
+        "aria-label": "Merged output",
+        "data-merge-text": "",
+        rows: 6,
+        value: merge.serialize("text"),
+        className: "px-2 py-1 font-mono text-xs rounded-md border border-violet-400/40 bg-transparent"
+      }
+    )
+  ] });
+};
+
 // src/hooks/useOutline.ts
-import { useMemo as useMemo6, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { createOutlineStore } from "@pixerate/editor";
 function useOutline(editor) {
-  const store = useMemo6(() => createOutlineStore(editor), [editor]);
+  const store = useMemo7(() => createOutlineStore(editor), [editor]);
   return useSyncExternalStore4(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
 import { navigateToHeading } from "@pixerate/editor";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var OutlinePanel = ({
   editor,
   title = "Outline",
@@ -880,11 +1204,11 @@ var OutlinePanel = ({
 }) => {
   const { headings, activeId } = useOutline(editor);
   const visible = headings.filter((h) => h.level <= maxLevel);
-  return /* @__PURE__ */ jsxs3("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
-    title != null && /* @__PURE__ */ jsx4("div", { className: "pixerate-outline-title", children: title }),
-    visible.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ jsx4("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
+  return /* @__PURE__ */ jsxs4("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
+    title != null && /* @__PURE__ */ jsx5("div", { className: "pixerate-outline-title", children: title }),
+    visible.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ jsx5("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
       const active = heading.id === activeId;
-      return /* @__PURE__ */ jsx4("li", { "data-level": heading.level, children: /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5("li", { "data-level": heading.level, children: /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -905,6 +1229,168 @@ var OutlinePanel = ({
   ] });
 };
 
+// src/hooks/useParagraphStyles.ts
+import { useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import {
+  createParagraphStylesStore,
+  getStyleRegistry
+} from "@pixerate/editor";
+function useParagraphStyles(editor) {
+  const store = useMemo8(() => createParagraphStylesStore(editor), [editor]);
+  const snapshot = useSyncExternalStore5(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo8(() => {
+    const registry = getStyleRegistry(editor);
+    const live = () => editor && !editor.isDestroyed ? editor : null;
+    return {
+      ...snapshot,
+      registry,
+      currentStyle: snapshot.currentStyleId && registry?.get(snapshot.currentStyleId) || null,
+      apply: (id) => !!live()?.chain().focus().setParagraphStyle(id).run(),
+      clear: () => !!live()?.chain().focus().clearParagraphStyle().run(),
+      updateFromSelection: (id) => !!live()?.chain().focus().updateParagraphStyleFromSelection(id).run(),
+      createFromSelection: (name, options) => {
+        const e = live();
+        if (!e || !registry) return null;
+        const id = options?.id ?? registry.newId(name.trim());
+        const ok = e.chain().focus().createParagraphStyleFromSelection(name, { ...options, id }).run();
+        return ok ? id : null;
+      },
+      applyCharacterStyle: (id) => !!live()?.chain().focus().setCharacterStyle(id).run()
+    };
+  }, [snapshot, editor]);
+}
+
+// src/components/StylesGallery.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var camel = (property) => property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+var keepSelection = (event) => event.preventDefault();
+var StylesGallery = ({
+  editor,
+  variant = "dropdown",
+  showAllStyles = false,
+  showActions = true,
+  preview = true,
+  className = "relative inline-flex flex-wrap items-center gap-1 text-sm",
+  itemClassName = "rounded px-2 py-1 text-left text-xs text-foreground hover:bg-muted",
+  activeItemClassName = "bg-primary/10 text-primary",
+  onChange
+}) => {
+  const styles = useParagraphStyles(editor);
+  const [open, setOpen] = useState8(false);
+  const [creating, setCreating] = useState8(false);
+  const [name, setName] = useState8("");
+  const list = showAllStyles ? styles.styles : styles.gallery;
+  const current = styles.currentStyle;
+  const expanded = variant === "gallery" || open;
+  const close = () => {
+    if (variant === "dropdown") setOpen(false);
+    setCreating(false);
+    setName("");
+  };
+  const previewStyle = (id) => {
+    if (!preview || !styles.registry) return void 0;
+    return Object.fromEntries(
+      Object.entries(styles.registry.previewDeclarations(id)).map(([k, v]) => [camel(k), v])
+    );
+  };
+  const apply = (id) => {
+    if (styles.apply(id)) onChange?.({ type: "apply", id });
+    close();
+  };
+  const create = (event) => {
+    event.preventDefault();
+    const id = name.trim() ? styles.createFromSelection(name) : null;
+    if (id) onChange?.({ type: "create", id });
+    close();
+  };
+  return /* @__PURE__ */ jsxs5("div", { className, role: "group", "aria-label": "Paragraph styles", "data-styles-gallery": variant, children: [
+    variant === "dropdown" && /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        className: itemClassName,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        disabled: !editor || !styles.registry,
+        onMouseDown: keepSelection,
+        onClick: () => setOpen((value) => !value),
+        children: [
+          current?.name ?? "Styles",
+          " \u25BE"
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: variant === "dropdown" ? "absolute left-0 top-full z-20 mt-1 flex min-w-[12rem] flex-col gap-0.5 rounded-md border border-border bg-background p-1 shadow-md" : "flex flex-wrap items-center gap-1",
+        children: [
+          /* @__PURE__ */ jsx6("div", { role: "listbox", "aria-label": "Styles", className: variant === "dropdown" ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1", children: list.map((style) => {
+            const active = style.id === styles.currentStyleId;
+            return /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                "data-style-id": style.id,
+                className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+                style: previewStyle(style.id),
+                onMouseDown: keepSelection,
+                onClick: () => apply(style.id),
+                children: style.name
+              },
+              style.id
+            );
+          }) }),
+          showActions && /* @__PURE__ */ jsxs5("div", { className: variant === "dropdown" ? "mt-1 flex flex-col gap-0.5 border-t border-border pt-1" : "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: itemClassName,
+                disabled: !current,
+                onMouseDown: keepSelection,
+                onClick: () => {
+                  if (current && styles.updateFromSelection(current.id)) {
+                    onChange?.({ type: "update", id: current.id });
+                  }
+                  close();
+                },
+                children: current ? `Update ${current.name} to match selection` : "Update to match selection"
+              }
+            ),
+            creating ? /* @__PURE__ */ jsxs5("form", { className: "flex items-center gap-1", onSubmit: create, children: [
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  "aria-label": "New style name",
+                  className: "w-32 rounded border border-border bg-background px-1 py-0.5 text-xs",
+                  value: name,
+                  autoFocus: true,
+                  onChange: (event) => setName(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx6("button", { type: "submit", className: itemClassName, disabled: !name.trim(), children: "Create" })
+            ] }) : /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: itemClassName,
+                disabled: !editor || !styles.registry,
+                onMouseDown: keepSelection,
+                onClick: () => setCreating(true),
+                children: "New style from selection"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/index.ts
 import {
   DirtyTracker as DirtyTracker2,
@@ -917,10 +1403,10 @@ import {
 } from "@pixerate/editor";
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo7 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createContext, useContext, useMemo as useMemo9 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ jsx5(
+  Button: (props) => /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
@@ -930,26 +1416,26 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ jsx5("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ jsxs4("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+  Tooltip: (props) => /* @__PURE__ */ jsx7("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
+  NodeHeader: (props) => /* @__PURE__ */ jsxs6("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
       props.icon,
-      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ jsx5("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+    props.onClose && /* @__PURE__ */ jsx7("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
 var EditorSlotsContext = createContext(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo7(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx5(EditorSlotsContext.Provider, { value: mergedSlots, children });
+  const mergedSlots = useMemo9(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ jsx7(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
   return useContext(EditorSlotsContext);
 }
 
 // src/review/useReview.ts
-import { useCallback as useCallback5, useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo10, useSyncExternalStore as useSyncExternalStore6 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -971,23 +1457,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : getCommentStore(source);
-  const subscribe = useCallback5(
+  const subscribe = useCallback6(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
-  return useMemo8(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
+  return useMemo10(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
-  const subscribe = useCallback5(
+  const subscribe = useCallback6(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
-  return useMemo8(() => {
+  const snapshot = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
+  return useMemo10(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -1001,18 +1487,21 @@ function useTrackChanges(editor) {
       acceptAll: run((e) => e.commands.acceptAllChanges()),
       rejectAll: run((e) => e.commands.rejectAllChanges()),
       next: run((e) => e.chain().focus().selectNextChange().run()),
-      previous: run((e) => e.chain().focus().selectPreviousChange().run())
+      previous: run((e) => e.chain().focus().selectPreviousChange().run()),
+      select: (id) => run((e) => e.chain().focus().selectChange(id).run())(),
+      acceptMove: (id) => run((e) => e.commands.acceptMove(id))(),
+      rejectMove: (id) => run((e) => e.commands.rejectMove(id))()
     };
   }, [snapshot, editor]);
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState6 } from "react";
+import { useState as useState9 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var buttonClass = "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50";
 var primaryButtonClass = "rounded px-2 py-1 text-xs bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50";
 var textareaClass = "w-full resize-y rounded-md border border-input bg-background p-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary";
@@ -1026,18 +1515,18 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState6(showResolvedInitial);
+  const [showResolved, setShowResolved] = useState9(showResolvedInitial);
   const author = authorProp ?? getCommentAuthor(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
-  return /* @__PURE__ */ jsxs5("aside", { className, "aria-label": "Comments", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs7("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "text-xs font-medium text-muted-foreground", children: [
         threads.length - resolvedCount,
         " open",
         resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
       ] }),
-      resolvedCount > 0 && /* @__PURE__ */ jsx6(
+      resolvedCount > 0 && /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -1048,7 +1537,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx6(
+    visible.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx8("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx8(
       CommentThreadCard,
       {
         thread,
@@ -1070,7 +1559,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState6("");
+  const [draft, setDraft] = useState9("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -1096,7 +1585,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "li",
     {
       className: `flex flex-col gap-2 rounded-md border bg-background p-3 cursor-pointer ${active ? "border-primary ring-1 ring-primary" : "border-border"} ${thread.resolved ? "opacity-70" : ""}`,
@@ -1112,24 +1601,24 @@ var CommentThreadCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs5("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx6("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
         ] }),
-        quote && /* @__PURE__ */ jsx6("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ jsx6("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs5("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
-          /* @__PURE__ */ jsxs5("span", { className: "text-xs", children: [
-            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: reply.author.name }),
+        quote && /* @__PURE__ */ jsx8("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ jsx8("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs7("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+          /* @__PURE__ */ jsxs7("span", { className: "text-xs", children: [
+            /* @__PURE__ */ jsx8("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
         ] }, reply.id)) }),
-        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx6(
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx8(
             "textarea",
             {
               className: textareaClass,
@@ -1147,9 +1636,9 @@ var CommentThreadCard = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -1161,9 +1650,9 @@ var CommentThreadCard = ({
             )
           ] })
         ] }),
-        !isDraft && /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx6(
+        !isDraft && /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -1179,7 +1668,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var defaultDescriptionClass = "max-w-[16rem] truncate px-1 text-xs text-muted-foreground";
 var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var ReviewToolbar = ({
@@ -1192,8 +1681,8 @@ var ReviewToolbar = ({
   const count = review.changes.length;
   const current = review.currentChange;
   const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
-  return /* @__PURE__ */ jsxs6("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1204,8 +1693,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1216,8 +1705,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1228,7 +1717,7 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    showDescription && current && /* @__PURE__ */ jsxs6(
+    showDescription && current && /* @__PURE__ */ jsxs8(
       "span",
       {
         className: descriptionClassName,
@@ -1240,8 +1729,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1251,7 +1740,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1261,18 +1750,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+    /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
   ] });
 };
 
 // src/review/CommentButton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var CommentButton = ({
   editor,
   className = "rounded px-2 py-1 text-xs text-popover-foreground hover:bg-muted",
   children = "Comment"
-}) => /* @__PURE__ */ jsx8(
+}) => /* @__PURE__ */ jsx10(
   "button",
   {
     type: "button",
@@ -1282,43 +1771,345 @@ var CommentButton = ({
     children
   }
 );
+
+// src/review/useDocumentCompare.ts
+import { useCallback as useCallback7, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
+import {
+  applyDocumentComparison
+} from "@pixerate/editor";
+function useDocumentCompare(editor, options) {
+  const [summary, setSummary] = useState10(null);
+  const defaults = useRef8(options);
+  defaults.current = options;
+  const compare = useCallback7(
+    (original, revised, overrides) => {
+      if (!editor || editor.isDestroyed) return null;
+      const result = applyDocumentComparison(editor, original, revised, {
+        ...defaults.current,
+        ...overrides
+      });
+      setSummary(result.summary);
+      return result.summary;
+    },
+    [editor]
+  );
+  const clear = useCallback7(() => setSummary(null), []);
+  return useMemo11(() => ({ summary, compare, clear }), [summary, compare, clear]);
+}
+
+// src/review/TrackedChangesList.tsx
+import { trackedChangeLabel } from "@pixerate/editor";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var buttonClass3 = "rounded px-1.5 py-0.5 text-xs text-foreground hover:bg-muted disabled:opacity-40";
+var TrackedChangesList = ({
+  editor,
+  className = "flex flex-col gap-1 text-sm",
+  itemClassName = "flex items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
+  activeItemClassName = "bg-primary/10",
+  emptyState = "No tracked changes."
+}) => {
+  const review = useTrackChanges(editor);
+  if (review.changes.length === 0) {
+    return /* @__PURE__ */ jsx11("div", { className, "data-tracked-changes-list": "", children: /* @__PURE__ */ jsx11("div", { className: "pixerate-changes-empty text-xs text-muted-foreground", children: emptyState }) });
+  }
+  return /* @__PURE__ */ jsx11("ul", { className, role: "list", "aria-label": "Tracked changes", "data-tracked-changes-list": "", children: review.changes.map((change) => {
+    const active = change.id === review.currentChangeId;
+    return /* @__PURE__ */ jsxs9(
+      "li",
+      {
+        className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+        "data-change-type": change.type,
+        "data-change-id": change.id,
+        children: [
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "min-w-0 flex-1 truncate text-left text-xs",
+              title: `${change.author.name}: ${change.description}`,
+              onClick: () => review.select(change.id),
+              children: [
+                /* @__PURE__ */ jsx11("span", { className: "font-medium", children: trackedChangeLabel(change) }),
+                change.author.name ? ` \xB7 ${change.author.name}` : "",
+                /* @__PURE__ */ jsx11("span", { className: "block truncate text-muted-foreground", children: change.description })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass3, onClick: () => review.accept(change.id), children: "Accept" }),
+          /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass3, onClick: () => review.reject(change.id), children: "Reject" })
+        ]
+      },
+      `${change.type}:${change.id}`
+    );
+  }) });
+};
+
+// src/find-replace/useFindReplace.ts
+import { useCallback as useCallback8, useMemo as useMemo12, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import {
+  EMPTY_FIND_REPLACE_SNAPSHOT,
+  getFindReplaceStore
+} from "@pixerate/editor";
+var noopUnsubscribe2 = () => {
+};
+function useFindReplace(editor) {
+  const store = getFindReplaceStore(editor ?? null);
+  const subscribe = useCallback8(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe2,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_FIND_REPLACE_SNAPSHOT;
+  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return useMemo12(() => {
+    const run = (fn) => {
+      if (editor && !editor.isDestroyed && store) fn(editor);
+    };
+    return {
+      ...snapshot,
+      available: !!store,
+      matchCount: snapshot.matches.length,
+      show: (mode = "find") => run((e) => e.commands.openFindReplace({ mode })),
+      close: () => run((e) => e.commands.closeFindReplace()),
+      setQuery: (query) => run((e) => e.commands.setSearch({ query })),
+      setReplacement: (replacement) => run((e) => e.commands.setSearch({ replacement })),
+      setOptions: (options) => run((e) => e.commands.setSearch({ options })),
+      toggleOption: (option) => run((e) => e.commands.setSearch({ options: { [option]: !snapshot.options[option] } })),
+      next: () => run((e) => e.commands.findNext()),
+      previous: () => run((e) => e.commands.findPrevious()),
+      replace: () => run((e) => e.commands.replaceCurrent()),
+      replaceAll: () => run((e) => e.commands.replaceAll()),
+      clear: () => run((e) => e.commands.clearSearch())
+    };
+  }, [snapshot, editor, store]);
+}
+
+// src/find-replace/FindReplaceBar.tsx
+import { useEffect as useEffect8, useRef as useRef9, useState as useState11 } from "react";
+import { FIND_OPTION_TOGGLES, formatFindStatus } from "@pixerate/editor";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var inputClass = "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
+var buttonClass4 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+var toggleClass = (on) => `${buttonClass4} font-mono ${on ? "bg-primary/10 text-primary" : "text-muted-foreground"}`;
+var isMod = (e) => e.metaKey || e.ctrlKey;
+var FindReplaceBar = ({
+  editor,
+  className = "flex flex-col gap-1 rounded-md border border-border bg-background p-1 text-sm shadow-sm",
+  alwaysOpen = false,
+  showMoreOptions = true,
+  onClose
+}) => {
+  const find = useFindReplace(editor);
+  const findInput = useRef9(null);
+  const [moreOpen, setMoreOpen] = useState11(false);
+  const visible = find.available && (alwaysOpen || find.open);
+  useEffect8(() => {
+    if (!visible || find.focusRequest === 0) return;
+    findInput.current?.focus();
+    findInput.current?.select();
+  }, [visible, find.focusRequest]);
+  if (!visible) return null;
+  const showReplace = find.mode === "replace";
+  const status = formatFindStatus(find);
+  const hasMatches = find.matchCount > 0;
+  const close = () => {
+    find.close();
+    editor?.commands.focus();
+    onClose?.();
+  };
+  const onBarKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    } else if (isMod(e) && (e.key === "f" || e.key === "F")) {
+      e.preventDefault();
+      find.show("find");
+    } else if (isMod(e) && (e.key === "h" || e.key === "H")) {
+      e.preventDefault();
+      find.show("replace");
+    }
+  };
+  const onFindKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (e.shiftKey) find.previous();
+    else find.next();
+  };
+  const onReplaceKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    if (isMod(e)) find.replaceAll();
+    else find.replace();
+  };
+  return /* @__PURE__ */ jsxs10("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: buttonClass4,
+          "aria-label": "Toggle replace",
+          "aria-expanded": showReplace,
+          onClick: () => find.show(showReplace ? "find" : "replace"),
+          children: showReplace ? "\u25BE" : "\u25B8"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          ref: findInput,
+          type: "text",
+          className: inputClass,
+          placeholder: "Find",
+          "aria-label": "Find",
+          "aria-invalid": !!find.error,
+          value: find.query,
+          onChange: (e) => find.setQuery(e.target.value),
+          onKeyDown: onFindKeyDown
+        }
+      ),
+      FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: toggleClass(!!find.options[t.key]),
+          "aria-label": t.label,
+          title: t.label,
+          "aria-pressed": !!find.options[t.key],
+          onClick: () => find.toggleOption(t.key),
+          children: t.short
+        },
+        t.key
+      )),
+      /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: `min-w-[5rem] px-1 text-center text-xs ${find.error ? "text-destructive" : "text-muted-foreground"}`,
+          "aria-live": "polite",
+          role: find.error ? "alert" : "status",
+          "data-testid": "find-status",
+          children: status
+        }
+      ),
+      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
+      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
+      showMoreOptions && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: buttonClass4,
+          "aria-label": "More options",
+          "aria-expanded": moreOpen,
+          onClick: () => setMoreOpen((v) => !v),
+          children: "\u2026"
+        }
+      ),
+      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Close find", onClick: close, children: "\xD7" })
+    ] }),
+    showReplace && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 pl-7", children: [
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          type: "text",
+          className: inputClass,
+          placeholder: "Replace",
+          "aria-label": "Replace",
+          value: find.replacement,
+          onChange: (e) => find.setReplacement(e.target.value),
+          onKeyDown: onReplaceKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: buttonClass4,
+          disabled: !hasMatches || find.currentIndex < 0,
+          onClick: find.replace,
+          children: "Replace"
+        }
+      ),
+      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
+      find.lastReplaceCount !== null && /* @__PURE__ */ jsx12("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
+    ] }),
+    showMoreOptions && moreOpen && /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!find.options[t.key],
+          onChange: () => find.toggleOption(t.key)
+        }
+      ),
+      t.label
+    ] }, t.key)) })
+  ] });
+};
 export {
+  AdjustmentLayersPanel,
+  AssetMentionChips,
   BubbleMenu,
   CommandPalette,
   CommentButton,
   CommentsPanel,
+  ControlSlider,
+  CurvesEditor,
   DirtyTracker2 as DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  FindReplaceBar,
   FormulaHints,
+  GenerationHistory,
+  GenerationSettings,
+  Histogram,
   HistoryManager2 as HistoryManager,
   ImageEditor,
+  JobProgress,
+  MergePreview,
+  NameManager,
   OutlinePanel,
+  RecoveryPrompt,
+  RefineEdgePanel,
   ReviewToolbar,
+  SelectionOptionsBar,
+  SheetTabs,
+  SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
+  SpreadsheetValidationDialog,
+  StylesGallery,
   TemplateRenderer,
+  TrackedChangesList,
   VariableForm,
   bindDirtyToHistory2 as bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager2 as createHistoryManager,
   defaultIsEqual,
   useAgentToolProvider,
+  useAutosave,
   useCommandPalette,
   useCommandShortcuts,
   useComments,
   useDismissGuard,
+  useDocumentCompare,
   useEditor2 as useEditor,
   useEditorSlots,
   useFileImport,
   useFillHandle,
+  useFindReplace,
+  useGenerationPlan,
+  useGenerationRecords,
   useHistory,
   useHistoryDirty,
   useHistoryShortcuts,
   useImageEditor,
+  useImageHistogram,
+  useJobProgress,
+  useMergePreview,
   useNavigationGuard,
   useOutline,
+  useParagraphStyles,
   usePromptEditor,
   useRegisterCommands,
   useSpreadsheetClipboard,