@pixerate/editor-react 0.14.0 → 0.16.0

package/dist/index.js

@@ -6,11 +6,32 @@ import {
   useFillHandle,
   useSpreadsheetClipboard,
   useSpreadsheetEditor
-} from "./chunk-25S5EHH4.js";
+} from "./chunk-FYIPXHAE.js";
 import {
+  AdjustmentLayersPanel,
+  ControlSlider,
+  CurvesEditor,
+  Histogram,
   ImageEditor,
-  useImageEditor
-} from "./chunk-TL27COKM.js";
+  useImageEditor,
+  useImageHistogram
+} from "./chunk-XTFR3IMK.js";
+import {
+  CommandPalette,
+  useCommandPalette,
+  useCommandShortcuts,
+  useRegisterCommands
+} from "./chunk-4ZC2WCUO.js";
+import {
+  RecoveryPrompt,
+  useAutosave
+} from "./chunk-XWFU2CSG.js";
+import {
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useJobProgress
+} from "./chunk-7SPRQZ6H.js";
 
 // src/hooks/usePromptEditor.ts
 import { useMemo, useEffect, useRef } from "react";
@@ -406,7 +427,7 @@ function useDismissGuard({
 }
 
 // src/hooks/useHistory.ts
-import { useSyncExternalStore, useRef as useRef4, useCallback as useCallback3 } from "react";
+import { useSyncExternalStore, useRef as useRef4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
 import {
   HistoryManager,
   createHistoryManager
@@ -428,6 +449,7 @@ function useHistory(managerOrOptions) {
     () => manager.getState(),
     () => manager.getState()
   );
+  const entries = useMemo2(() => manager.getEntries(), [manager, state]);
   const undo = useCallback3(() => manager.undo(), [manager]);
   const redo = useCallback3(() => manager.redo(), [manager]);
   const clear = useCallback3(() => manager.clear(), [manager]);
@@ -443,60 +465,105 @@ function useHistory(managerOrOptions) {
     (name, fn) => manager.batch(name, fn),
     [manager]
   );
+  const goTo = useCallback3((index) => manager.goTo(index), [manager]);
+  const mark = useCallback3(() => manager.mark(), [manager]);
+  const revertTo = useCallback3(
+    (m) => manager.revertTo(m),
+    [manager]
+  );
+  const beginGesture = useCallback3(
+    (key) => manager.beginGesture(key),
+    [manager]
+  );
+  const endGesture = useCallback3(() => manager.endGesture(), [manager]);
   return {
     ...state,
     manager,
+    entries,
     undo,
     redo,
     clear,
     execute,
     executeMerged,
-    batch
+    batch,
+    goTo,
+    mark,
+    revertTo,
+    beginGesture,
+    endGesture
   };
 }
 
+// src/hooks/useHistoryDirty.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef5, useState as useState3, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  DirtyTracker,
+  bindDirtyToHistory
+} from "@pixerate/editor";
+function useHistoryDirty(options) {
+  const getValueRef = useRef5(options.getValue);
+  getValueRef.current = options.getValue;
+  const [tracker] = useState3(
+    () => options.tracker ?? new DirtyTracker(options.getValue(), {
+      isEqual: options.isEqual,
+      normalize: options.normalize
+    })
+  );
+  const bindingRef = useRef5(null);
+  useEffect3(() => {
+    const binding = bindDirtyToHistory({
+      history: options.history,
+      getValue: () => getValueRef.current(),
+      tracker
+    });
+    bindingRef.current = binding;
+    return () => {
+      binding.destroy();
+      if (bindingRef.current === binding) bindingRef.current = null;
+    };
+  }, [options.history, tracker]);
+  const isDirty = useSyncExternalStore2(
+    useCallback4((onChange) => tracker.subscribe(onChange), [tracker]),
+    () => tracker.dirty,
+    () => tracker.dirty
+  );
+  const markClean = useCallback4(
+    () => tracker.markClean(getValueRef.current()),
+    [tracker]
+  );
+  const suppress = useCallback4(
+    (fn) => bindingRef.current ? bindingRef.current.suppress(fn) : tracker.suppress(fn),
+    [tracker]
+  );
+  const refresh = useCallback4(
+    () => tracker.update(getValueRef.current()),
+    [tracker]
+  );
+  return { isDirty, markClean, suppress, refresh, tracker };
+}
+
 // src/hooks/useHistoryShortcuts.ts
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
+import { matchHistoryShortcut } from "@pixerate/editor/commands";
 function useHistoryShortcuts(manager, options = {}) {
   const {
     enabled = true,
     target,
     ignoreEditableElements = true
   } = options;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
     const handleKeyDown = (event) => {
       const e = event;
-      const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-      const modifier = isMac ? e.metaKey : e.ctrlKey;
-      if (!modifier) return;
-      if (ignoreEditableElements && typeof document !== "undefined") {
-        const targetEl = e.target || document.activeElement;
-        if (targetEl && targetEl.tagName) {
-          const tagName = targetEl.tagName.toLowerCase();
-          const isInput = tagName === "input" || tagName === "textarea";
-          const isContentEditable = targetEl.isContentEditable || targetEl.getAttribute?.("contenteditable") === "true";
-          if (isInput || isContentEditable) {
-            return;
-          }
-        }
-      }
-      const key = e.key.toLowerCase();
-      if (key === "z" && !e.shiftKey) {
-        if (manager.getState().canUndo) {
-          e.preventDefault();
-          manager.undo();
-        }
-        return;
-      }
-      const isRedoKey = key === "z" && e.shiftKey || !isMac && key === "y" && !e.shiftKey;
-      if (isRedoKey) {
-        if (manager.getState().canRedo) {
-          e.preventDefault();
-          manager.redo();
-        }
+      const action = matchHistoryShortcut(e, { allowInEditable: !ignoreEditableElements });
+      if (action === "undo" && manager.getState().canUndo) {
+        e.preventDefault();
+        manager.undo();
+      } else if (action === "redo" && manager.getState().canRedo) {
+        e.preventDefault();
+        manager.redo();
       }
     };
     eventTarget.addEventListener("keydown", handleKeyDown);
@@ -507,24 +574,24 @@ function useHistoryShortcuts(manager, options = {}) {
 }
 
 // src/hooks/useFileImport.ts
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   FileImportController
 } from "@pixerate/editor";
 function useFileImport(editor, options = {}) {
-  const editorRef = useRef5(editor);
+  const editorRef = useRef6(editor);
   editorRef.current = editor;
-  const controller = useMemo2(
+  const controller = useMemo3(
     () => new FileImportController(() => {
       const current = editorRef.current;
       return current && !current.isDestroyed ? current : null;
     }, options),
     []
   );
-  useEffect4(() => {
+  useEffect5(() => {
     controller.setOptions(options);
   });
-  const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
   return {
     ...state,
     accept: controller.accept,
@@ -534,9 +601,9 @@ function useFileImport(editor, options = {}) {
 }
 
 // src/hooks/useAgentToolProvider.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useAgentToolProvider(registry, provider) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (!registry || !provider) return;
     return registry.register(provider);
   }, [registry, provider]);
@@ -556,7 +623,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState3 } from "react";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -570,12 +637,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = useRef6(null);
-  const [mounted, setMounted] = useState3(false);
+  const menuEl = useRef7(null);
+  const [mounted, setMounted] = useState4(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -606,13 +673,14 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-import { useMemo as useMemo3 } from "react";
+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 = [],
@@ -624,11 +692,11 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = useMemo3(() => {
+  const displayText = useMemo4(() => {
     if (!resolve || templates.length === 0) return content;
     return resolveTemplates(content, templates, { bindings });
   }, [content, templates, resolve, bindings]);
-  const tokens = useMemo3(() => {
+  const tokens = useMemo4(() => {
     return evaluatePromptTokens(displayText, values);
   }, [displayText, values]);
   return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
@@ -695,8 +763,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
       );
@@ -717,7 +785,7 @@ var TemplateRenderer = ({
 };
 
 // src/components/VariableForm.tsx
-import { useId, useMemo as useMemo4, useState as useState4 } from "react";
+import { useId, useMemo as useMemo5, useState as useState5 } from "react";
 import {
   compactVariableValues,
   getVariableFormFields
@@ -733,11 +801,11 @@ var VariableForm = ({
   className = "flex flex-col gap-3 text-sm"
 }) => {
   const idPrefix = useId();
-  const [internal, setInternal] = useState4(
+  const [internal, setInternal] = useState5(
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = useMemo4(
+  const fields = useMemo5(
     () => getVariableFormFields(content, { templates, bindings }),
     [content, templates, bindings]
   );
@@ -804,17 +872,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 useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { createOutlineStore } from "@pixerate/editor";
 function useOutline(editor) {
-  const store = useMemo5(() => createOutlineStore(editor), [editor]);
-  return useSyncExternalStore3(store.subscribe, store.getSnapshot, store.getSnapshot);
+  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",
@@ -828,11 +1191,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",
@@ -855,18 +1218,20 @@ var OutlinePanel = ({
 
 // src/index.ts
 import {
-  DirtyTracker,
+  DirtyTracker as DirtyTracker2,
   createDirtyTracker,
   defaultIsEqual,
   HistoryManager as HistoryManager2,
-  createHistoryManager as createHistoryManager2
+  createHistoryManager as createHistoryManager2,
+  bindDirtyToHistory as bindDirtyToHistory2,
+  withoutDirty
 } from "@pixerate/editor";
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo6 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createContext, useContext, useMemo as useMemo8 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ jsx5(
+  Button: (props) => /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -876,26 +1241,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__ */ jsx6("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
+  NodeHeader: (props) => /* @__PURE__ */ jsxs5("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
       props.icon,
-      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ jsx6("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__ */ jsx6("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
 var EditorSlotsContext = createContext(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo6(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx5(EditorSlotsContext.Provider, { value: mergedSlots, children });
+  const mergedSlots = useMemo8(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ jsx6(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
   return useContext(EditorSlotsContext);
 }
 
 // src/review/useReview.ts
-import { useCallback as useCallback4, useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo9, useSyncExternalStore as useSyncExternalStore5 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -917,23 +1282,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : getCommentStore(source);
-  const subscribe = useCallback4(
+  const subscribe = useCallback6(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo7(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+  return useMemo9(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
-  const subscribe = useCallback4(
+  const subscribe = useCallback6(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo7(() => {
+  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
+  return useMemo9(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -953,12 +1318,12 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState5 } from "react";
+import { useState as useState8 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } 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";
@@ -972,18 +1337,18 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState5(showResolvedInitial);
+  const [showResolved, setShowResolved] = useState8(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__ */ jsxs6("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs6("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__ */ jsx7(
         "button",
         {
           type: "button",
@@ -994,7 +1359,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__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx7(
       CommentThreadCard,
       {
         thread,
@@ -1016,7 +1381,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState5("");
+  const [draft, setDraft] = useState8("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -1042,7 +1407,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "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" : ""}`,
@@ -1058,24 +1423,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__ */ jsxs6("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ jsx7("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__ */ jsx7("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ jsx7("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs6("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+          /* @__PURE__ */ jsxs6("span", { className: "text-xs", children: [
+            /* @__PURE__ */ jsx7("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ jsx7("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__ */ jsxs6("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx7(
             "textarea",
             {
               className: textareaClass,
@@ -1093,9 +1458,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__ */ jsxs6("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1107,9 +1472,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__ */ jsxs6("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1125,7 +1490,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } 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 = ({
@@ -1138,8 +1503,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__ */ jsxs7("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1150,8 +1515,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__ */ jsx8("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1162,8 +1527,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__ */ jsx8("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__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1174,7 +1539,7 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    showDescription && current && /* @__PURE__ */ jsxs6(
+    showDescription && current && /* @__PURE__ */ jsxs7(
       "span",
       {
         className: descriptionClassName,
@@ -1186,8 +1551,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1197,7 +1562,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1207,18 +1572,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__ */ jsx8("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ jsx8("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 jsx9 } 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__ */ jsx9(
   "button",
   {
     type: "button",
@@ -1228,41 +1593,290 @@ var CommentButton = ({
     children
   }
 );
+
+// src/review/useDocumentCompare.ts
+import { useCallback as useCallback7, useMemo as useMemo10, useRef as useRef8, useState as useState9 } from "react";
+import {
+  applyDocumentComparison
+} from "@pixerate/editor";
+function useDocumentCompare(editor, options) {
+  const [summary, setSummary] = useState9(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 useMemo10(() => ({ summary, compare, clear }), [summary, compare, clear]);
+}
+
+// src/find-replace/useFindReplace.ts
+import { useCallback as useCallback8, useMemo as useMemo11, useSyncExternalStore as useSyncExternalStore6 } 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 = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
+  return useMemo11(() => {
+    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 useState10 } from "react";
+import { FIND_OPTION_TOGGLES, formatFindStatus } from "@pixerate/editor";
+import { jsx as jsx10, jsxs as jsxs8 } 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 buttonClass3 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+var toggleClass = (on) => `${buttonClass3} 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] = useState10(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__ */ jsxs8("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          "aria-label": "Toggle replace",
+          "aria-expanded": showReplace,
+          onClick: () => find.show(showReplace ? "find" : "replace"),
+          children: showReplace ? "\u25BE" : "\u25B8"
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "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__ */ jsx10(
+        "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__ */ jsx10(
+        "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__ */ jsx10("button", { type: "button", className: buttonClass3, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
+      showMoreOptions && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          "aria-label": "More options",
+          "aria-expanded": moreOpen,
+          onClick: () => setMoreOpen((v) => !v),
+          children: "\u2026"
+        }
+      ),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, "aria-label": "Close find", onClick: close, children: "\xD7" })
+    ] }),
+    showReplace && /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 pl-7", children: [
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          type: "text",
+          className: inputClass,
+          placeholder: "Replace",
+          "aria-label": "Replace",
+          value: find.replacement,
+          onChange: (e) => find.setReplacement(e.target.value),
+          onKeyDown: onReplaceKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          disabled: !hasMatches || find.currentIndex < 0,
+          onClick: find.replace,
+          children: "Replace"
+        }
+      ),
+      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
+      find.lastReplaceCount !== null && /* @__PURE__ */ jsx10("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
+    ] }),
+    showMoreOptions && moreOpen && /* @__PURE__ */ jsx10("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__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!find.options[t.key],
+          onChange: () => find.toggleOption(t.key)
+        }
+      ),
+      t.label
+    ] }, t.key)) })
+  ] });
+};
 export {
+  AdjustmentLayersPanel,
   BubbleMenu,
+  CommandPalette,
   CommentButton,
   CommentsPanel,
-  DirtyTracker,
+  ControlSlider,
+  CurvesEditor,
+  DirtyTracker2 as DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  FindReplaceBar,
   FormulaHints,
+  GenerationSettings,
+  Histogram,
   HistoryManager2 as HistoryManager,
   ImageEditor,
+  JobProgress,
+  MergePreview,
   OutlinePanel,
+  RecoveryPrompt,
   ReviewToolbar,
   SpreadsheetContextMenu,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
   TemplateRenderer,
   VariableForm,
+  bindDirtyToHistory2 as bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager2 as createHistoryManager,
   defaultIsEqual,
   useAgentToolProvider,
+  useAutosave,
+  useCommandPalette,
+  useCommandShortcuts,
   useComments,
   useDismissGuard,
+  useDocumentCompare,
   useEditor2 as useEditor,
   useEditorSlots,
   useFileImport,
   useFillHandle,
+  useFindReplace,
+  useGenerationPlan,
   useHistory,
+  useHistoryDirty,
   useHistoryShortcuts,
   useImageEditor,
+  useImageHistogram,
+  useJobProgress,
+  useMergePreview,
   useNavigationGuard,
   useOutline,
   usePromptEditor,
+  useRegisterCommands,
   useSpreadsheetClipboard,
   useSpreadsheetEditor,
-  useTrackChanges
+  useTrackChanges,
+  withoutDirty
 };
 //# sourceMappingURL=index.js.map