@pixerate/editor-react 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -30,40 +30,56 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AdjustmentLayersPanel: () => AdjustmentLayersPanel,
   BubbleMenu: () => BubbleMenu,
   CommandPalette: () => CommandPalette,
   CommentButton: () => CommentButton,
   CommentsPanel: () => CommentsPanel,
-  DirtyTracker: () => import_editor12.DirtyTracker,
+  ControlSlider: () => ControlSlider,
+  CurvesEditor: () => CurvesEditor,
+  DirtyTracker: () => import_editor16.DirtyTracker,
   EditorContent: () => EditorContent,
   EditorSlotsProvider: () => EditorSlotsProvider,
+  FindReplaceBar: () => FindReplaceBar,
   FormulaHints: () => FormulaHints,
-  HistoryManager: () => import_editor12.HistoryManager,
+  GenerationSettings: () => GenerationSettings,
+  Histogram: () => Histogram,
+  HistoryManager: () => import_editor16.HistoryManager,
   ImageEditor: () => ImageEditor,
+  JobProgress: () => JobProgress,
+  MergePreview: () => MergePreview,
   OutlinePanel: () => OutlinePanel,
+  RecoveryPrompt: () => RecoveryPrompt,
   ReviewToolbar: () => ReviewToolbar,
   SpreadsheetContextMenu: () => SpreadsheetContextMenu,
   SpreadsheetEditor: () => SpreadsheetEditor,
   SpreadsheetGroupRow: () => SpreadsheetGroupRow,
   TemplateRenderer: () => TemplateRenderer,
   VariableForm: () => VariableForm,
-  bindDirtyToHistory: () => import_editor12.bindDirtyToHistory,
-  createDirtyTracker: () => import_editor12.createDirtyTracker,
-  createHistoryManager: () => import_editor12.createHistoryManager,
-  defaultIsEqual: () => import_editor12.defaultIsEqual,
+  bindDirtyToHistory: () => import_editor16.bindDirtyToHistory,
+  createDirtyTracker: () => import_editor16.createDirtyTracker,
+  createHistoryManager: () => import_editor16.createHistoryManager,
+  defaultIsEqual: () => import_editor16.defaultIsEqual,
   useAgentToolProvider: () => useAgentToolProvider,
+  useAutosave: () => useAutosave,
   useCommandPalette: () => useCommandPalette,
   useCommandShortcuts: () => useCommandShortcuts,
   useComments: () => useComments,
   useDismissGuard: () => useDismissGuard,
+  useDocumentCompare: () => useDocumentCompare,
   useEditor: () => useEditor2,
   useEditorSlots: () => useEditorSlots,
   useFileImport: () => useFileImport,
   useFillHandle: () => useFillHandle,
+  useFindReplace: () => useFindReplace,
+  useGenerationPlan: () => useGenerationPlan,
   useHistory: () => useHistory,
   useHistoryDirty: () => useHistoryDirty,
   useHistoryShortcuts: () => useHistoryShortcuts,
   useImageEditor: () => useImageEditor,
+  useImageHistogram: () => useImageHistogram,
+  useJobProgress: () => useJobProgress,
+  useMergePreview: () => useMergePreview,
   useNavigationGuard: () => useNavigationGuard,
   useOutline: () => useOutline,
   usePromptEditor: () => usePromptEditor,
@@ -71,7 +87,7 @@ __export(src_exports, {
   useSpreadsheetClipboard: () => useSpreadsheetClipboard,
   useSpreadsheetEditor: () => useSpreadsheetEditor,
   useTrackChanges: () => useTrackChanges,
-  withoutDirty: () => import_editor12.withoutDirty
+  withoutDirty: () => import_editor16.withoutDirty
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -695,7 +711,6 @@ var BubbleMenu = ({
 var import_react13 = require("react");
 var import_editor6 = require("@pixerate/editor");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" };
 var TemplateRenderer = ({
   content,
   templates = [],
@@ -778,8 +793,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: (0, import_editor6.describeConditionalTag)(token),
+          children: (0, import_editor6.formatConditionalTag)(token)
         },
         index
       );
@@ -884,17 +899,305 @@ var VariableForm = ({
   }) });
 };
 
-// src/hooks/useOutline.ts
+// src/components/MergePreview.tsx
+var import_react16 = require("react");
+
+// src/hooks/useMergePreview.ts
 var import_react15 = require("react");
 var import_editor8 = require("@pixerate/editor");
+function useMergePreview(options) {
+  const { template, templates, bindings, parseOptions } = options;
+  const [sourceText, setSourceTextState] = (0, import_react15.useState)(options.initialSource ?? "");
+  const [overrides, setOverrides] = (0, import_react15.useState)({});
+  const [index, setIndexState] = (0, import_react15.useState)(0);
+  const [result, setResult] = (0, import_react15.useState)(null);
+  const source = (0, import_react15.useMemo)(
+    () => (0, import_editor8.parseDataSource)(sourceText, parseOptions),
+    [sourceText, parseOptions]
+  );
+  const variables = (0, import_react15.useMemo)(
+    () => (0, import_editor8.extractVariables)(template, { templates, bindings }).map((v) => v.name),
+    [template, templates, bindings]
+  );
+  const mapping = (0, import_react15.useMemo)(() => {
+    const merged = {
+      ...(0, import_editor8.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 = (0, import_react15.useMemo)(
+    () => record ? (0, import_editor8.recordToValues)(record, mapping) : {},
+    [record, mapping]
+  );
+  const setSourceText = (0, import_react15.useCallback)((text) => {
+    setSourceTextState(text);
+    setIndexState(0);
+    setResult(null);
+  }, []);
+  const loadFile = (0, import_react15.useCallback)(
+    async (file) => setSourceText(await file.text()),
+    [setSourceText]
+  );
+  const setIndex = (0, import_react15.useCallback)(
+    (next) => setIndexState(Math.max(0, Math.min(next, count - 1))),
+    [count]
+  );
+  const setFieldMapping = (0, import_react15.useCallback)((variable, field) => {
+    setOverrides((previous) => ({ ...previous, [variable]: field }));
+    setResult(null);
+  }, []);
+  const resetMapping = (0, import_react15.useCallback)(() => setOverrides({}), []);
+  const merge = (0, import_react15.useCallback)(() => {
+    const merged = (0, import_editor8.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 = (0, import_react15.useCallback)(
+    (format) => result ? (0, import_editor8.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
+var import_jsx_runtime4 = require("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 = (0, import_react16.useId)();
+  const merge = useMergePreview({
+    template: content,
+    templates,
+    bindings,
+    initialSource: defaultSource,
+    parseOptions,
+    skipIf,
+    separator,
+    maxOutputs
+  });
+  const [copied, setCopied] = (0, import_react16.useState)(false);
+  const { source, result } = merge;
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(merge.serialize("text"));
+      setCopied(true);
+    } catch {
+      setCopied(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, "data-merge-preview": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: `${id}-source`, className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium", children: "Data source (CSV, TSV or JSON)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("ul", { "data-merge-warnings": "", className: "text-amber-600 text-xs", children: source.warnings.map((warning, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: warning.message }, i)) }),
+    merge.variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("fieldset", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("legend", { className: "font-medium", children: "Field mapping" }),
+      merge.variables.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "label",
+        {
+          className: "flex items-center gap-2",
+          "data-merge-mapping": variable,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-24 font-mono", children: `{${variable}}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "(none)" }),
+                  source.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: field, children: field }, field))
+                ]
+              }
+            )
+          ]
+        },
+        variable
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-merge-prev": "",
+          onClick: merge.prev,
+          disabled: merge.index <= 0,
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-merge-position": "", children: merge.count === 0 ? "No records" : `Record ${merge.index + 1} of ${merge.count}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-merge-next": "",
+          onClick: merge.next,
+          disabled: merge.index >= merge.count - 1,
+          children: "Next"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-merge-output": "", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      TemplateRenderer,
+      {
+        content,
+        templates,
+        bindings,
+        templateColorMap,
+        resolve: !!templates && templates.length > 0,
+        values: merge.values
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          "data-merge-all": "",
+          disabled: merge.count === 0,
+          onClick: () => {
+            const merged = merge.merge();
+            setCopied(false);
+            onMerge?.(merged);
+          },
+          children: "Merge all"
+        }
+      ),
+      result && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "data-merge-result": "", children: `${result.outputs.length} merged${result.skipped.length ? `, ${result.skipped.length} skipped` : ""}${result.truncated ? " (stopped early)" : ""}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "data-merge-copy": "", onClick: copy, children: copied ? "Copied" : "Copy" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-merge-download": "text",
+            onClick: () => downloadText(merge.serialize("text"), `${downloadName}.txt`, "text/plain"),
+            children: "Download .txt"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-merge-download": "json",
+            onClick: () => downloadText(merge.serialize("json"), `${downloadName}.json`, "application/json"),
+            children: "Download .json"
+          }
+        )
+      ] })
+    ] }),
+    result && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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
+var import_react17 = require("react");
+var import_editor9 = require("@pixerate/editor");
 function useOutline(editor) {
-  const store = (0, import_react15.useMemo)(() => (0, import_editor8.createOutlineStore)(editor), [editor]);
-  return (0, import_react15.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const store = (0, import_react17.useMemo)(() => (0, import_editor9.createOutlineStore)(editor), [editor]);
+  return (0, import_react17.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
-var import_editor9 = require("@pixerate/editor");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_editor10 = require("@pixerate/editor");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var OutlinePanel = ({
   editor,
   title = "Outline",
@@ -908,11 +1211,11 @@ var OutlinePanel = ({
 }) => {
   const { headings, activeId } = useOutline(editor);
   const visible = headings.filter((h) => h.level <= maxLevel);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
-    title != null && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pixerate-outline-title", children: title }),
-    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pixerate-outline-title", children: title }),
+    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
       const active = heading.id === activeId;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { "data-level": heading.level, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { "data-level": heading.level, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
@@ -922,7 +1225,7 @@ var OutlinePanel = ({
           "data-heading-id": heading.id,
           onClick: () => {
             if (!editor) return;
-            if ((0, import_editor9.navigateToHeading)(editor, heading, { focus: focusOnNavigate })) {
+            if ((0, import_editor10.navigateToHeading)(editor, heading, { focus: focusOnNavigate })) {
               onNavigate?.(heading);
             }
           },
@@ -934,16 +1237,16 @@ var OutlinePanel = ({
 };
 
 // src/index.ts
-var import_editor12 = require("@pixerate/editor");
+var import_editor16 = require("@pixerate/editor");
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_spreadsheet = require("@pixerate/editor/spreadsheet");
 function useSpreadsheetEditor(options = {}) {
-  const optionsRef = (0, import_react16.useRef)(options);
+  const optionsRef = (0, import_react18.useRef)(options);
   optionsRef.current = options;
-  const settersRef = (0, import_react16.useRef)({});
-  const [controller] = (0, import_react16.useState)(
+  const settersRef = (0, import_react18.useRef)({});
+  const [controller] = (0, import_react18.useState)(
     () => new import_spreadsheet.SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
@@ -960,97 +1263,97 @@ function useSpreadsheetEditor(options = {}) {
       }
     })
   );
-  const [doc, setDoc] = (0, import_react16.useState)(() => ({ ...controller.document }));
-  const [activeCell, setActiveCell] = (0, import_react16.useState)(controller.activeCell);
-  const [selectedRange, setSelectedRange] = (0, import_react16.useState)(controller.selectedRange);
-  const [editingCell, setEditingCell] = (0, import_react16.useState)(null);
-  const [draftValue, setDraftState] = (0, import_react16.useState)("");
+  const [doc, setDoc] = (0, import_react18.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react18.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react18.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react18.useState)(null);
+  const [draftValue, setDraftState] = (0, import_react18.useState)("");
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
-  const setDraftValue = (0, import_react16.useCallback)((value) => {
+  const setDraftValue = (0, import_react18.useCallback)((value) => {
     controller.draftValue = value;
     setDraftState(value);
   }, [controller]);
-  const setCellValue = (0, import_react16.useCallback)((rowId, colId, raw) => {
+  const setCellValue = (0, import_react18.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react16.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react18.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react16.useCallback)((range) => {
+  const selectRange = (0, import_react18.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react16.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react18.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react16.useCallback)((val) => {
+  const commitEditing = (0, import_react18.useCallback)((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = (0, import_react16.useCallback)(() => {
+  const cancelEditing = (0, import_react18.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react16.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react18.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react16.useCallback)((index, config) => {
+  const insertColumn = (0, import_react18.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react16.useCallback)((colId) => {
+  const deleteColumn = (0, import_react18.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react16.useCallback)((index, config) => {
+  const insertRow = (0, import_react18.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react16.useCallback)((rowId) => {
+  const deleteRow = (0, import_react18.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react16.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react18.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react16.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react18.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react16.useCallback)((ds) => {
+  const registerDataSource = (0, import_react18.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react16.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react18.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react16.useCallback)(() => {
+  const recalculateAll = (0, import_react18.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react16.useCallback)(() => {
+  const undo = (0, import_react18.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = (0, import_react16.useCallback)(() => {
+  const redo = (0, import_react18.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const tableActions = (0, import_react16.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
-  const viewModel = (0, import_react16.useMemo)(() => controller.getViewModel(), [controller, doc]);
+  const tableActions = (0, import_react18.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
+  const viewModel = (0, import_react18.useMemo)(() => controller.getViewModel(), [controller, doc]);
   return {
     document: doc,
     activeCell,
@@ -1102,20 +1405,20 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var VIEWPORT_MARGIN = 4;
 var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
-  const menuRef = (0, import_react17.useRef)(null);
-  const onCloseRef = (0, import_react17.useRef)(onClose);
+  const menuRef = (0, import_react19.useRef)(null);
+  const onCloseRef = (0, import_react19.useRef)(onClose);
   onCloseRef.current = onClose;
-  const [position, setPosition] = (0, import_react17.useState)({ x, y });
-  (0, import_react17.useLayoutEffect)(() => {
+  const [position, setPosition] = (0, import_react19.useState)({ x, y });
+  (0, import_react19.useLayoutEffect)(() => {
     const menu = menuRef.current;
     if (!menu || typeof window === "undefined") return;
     const { width, height } = menu.getBoundingClientRect();
@@ -1127,7 +1430,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
     );
     setPosition((prev) => prev.x === next.x && prev.y === next.y ? prev : next);
   }, [x, y, items]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handlePointer = (e) => {
       if (!menuRef.current?.contains(e.target)) onCloseRef.current();
     };
@@ -1141,7 +1444,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
       window.removeEventListener("keydown", handleKey);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref: menuRef,
@@ -1157,19 +1460,20 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
       },
       onContextMenu: (e) => e.preventDefault(),
       onKeyDown: (e) => e.stopPropagation(),
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react17.default.Fragment, { children: [
-        item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "separator", className: "my-1 h-px bg-border" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react19.default.Fragment, { children: [
+        item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "separator", className: "my-1 h-px bg-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             role: "menuitem",
             "data-action": item.id,
+            "data-checked": item.checked ? "" : void 0,
             disabled: item.disabled,
-            className: "block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
+            className: `block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent ${item.checked ? "font-semibold" : ""}`,
             onClick: () => {
               onClose();
-              item.run();
+              (0, import_spreadsheet2.runSpreadsheetMenuItem)(item);
             },
             children: item.label
           }
@@ -1180,7 +1484,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
 };
 
 // src/spreadsheet/SpreadsheetGroupRow.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var formatSummary = (value) => value === null ? "\u2013" : String(value);
 var SpreadsheetGroupRow = ({
   group,
@@ -1190,8 +1494,8 @@ var SpreadsheetGroupRow = ({
   trailingCell
 }) => {
   const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "button",
       {
         type: "button",
@@ -1207,22 +1511,22 @@ var SpreadsheetGroupRow = ({
     ) }),
     columns.map(({ column }) => {
       const summary = group.summaries[column.id];
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
         group.label,
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "font-normal text-muted-foreground", children: [
           "(",
           group.rowIndices.length,
           ")"
         ] })
-      ] }) : summary !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null }, column.id);
+      ] }) : summary !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null }, column.id);
     }),
-    trailingCell && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+    trailingCell && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
   ] });
 };
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
 function gridHasFocus(grid) {
   if (!grid || typeof document === "undefined") return false;
@@ -1231,12 +1535,12 @@ function gridHasFocus(grid) {
   return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
 }
 function useSpreadsheetClipboard(gridRef, state, readOnly) {
-  const stateRef = (0, import_react18.useRef)(state);
+  const stateRef = (0, import_react20.useRef)(state);
   stateRef.current = state;
-  const readOnlyRef = (0, import_react18.useRef)(readOnly);
+  const readOnlyRef = (0, import_react20.useRef)(readOnly);
   readOnlyRef.current = readOnly;
-  const copiedRef = (0, import_react18.useRef)(false);
-  (0, import_react18.useEffect)(() => {
+  const copiedRef = (0, import_react20.useRef)(false);
+  (0, import_react20.useEffect)(() => {
     if (typeof document === "undefined") return;
     const handleCopy = (e) => {
       const s = stateRef.current;
@@ -1259,7 +1563,7 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
       document.removeEventListener("paste", handlePaste);
     };
   }, [gridRef]);
-  const copyShortcutFallback = (0, import_react18.useCallback)(() => {
+  const copyShortcutFallback = (0, import_react20.useCallback)(() => {
     copiedRef.current = false;
     setTimeout(() => {
       if (copiedRef.current) return;
@@ -1271,13 +1575,13 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
   return { copyShortcutFallback };
 }
 function useFillHandle(state) {
-  const [drag, setDrag] = (0, import_react18.useState)(null);
-  const dragRef = (0, import_react18.useRef)(drag);
+  const [drag, setDrag] = (0, import_react20.useState)(null);
+  const dragRef = (0, import_react20.useRef)(drag);
   dragRef.current = drag;
-  const stateRef = (0, import_react18.useRef)(state);
+  const stateRef = (0, import_react20.useRef)(state);
   stateRef.current = state;
   const dragging = drag !== null;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!dragging) return;
     const handleMouseUp = () => {
       const current = dragRef.current;
@@ -1287,13 +1591,13 @@ function useFillHandle(state) {
     window.addEventListener("mouseup", handleMouseUp);
     return () => window.removeEventListener("mouseup", handleMouseUp);
   }, [dragging]);
-  const startFill = (0, import_react18.useCallback)((e) => {
+  const startFill = (0, import_react20.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     const range = stateRef.current.selectedRange;
     if (range) setDrag({ source: (0, import_spreadsheet3.normalizeRange)(range), target: null });
   }, []);
-  const extendFill = (0, import_react18.useCallback)((row, col) => {
+  const extendFill = (0, import_react20.useCallback)((row, col) => {
     const current = dragRef.current;
     if (!current) return;
     setDrag({ source: current.source, target: (0, import_spreadsheet3.computeFillTarget)(current.source, { row, col }) });
@@ -1302,24 +1606,24 @@ function useFillHandle(state) {
 }
 
 // src/spreadsheet/FormulaHints.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
-  const [caret, setCaret] = (0, import_react19.useState)(null);
-  const [focused, setFocused] = (0, import_react19.useState)(false);
-  const [selected, setSelected] = (0, import_react19.useState)(0);
-  const [dismissed, setDismissed] = (0, import_react19.useState)(false);
-  const [position, setPosition] = (0, import_react19.useState)(null);
-  const pendingCaret = (0, import_react19.useRef)(null);
-  const hints = (0, import_react19.useMemo)(
+  const [caret, setCaret] = (0, import_react21.useState)(null);
+  const [focused, setFocused] = (0, import_react21.useState)(false);
+  const [selected, setSelected] = (0, import_react21.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react21.useState)(false);
+  const [position, setPosition] = (0, import_react21.useState)(null);
+  const pendingCaret = (0, import_react21.useRef)(null);
+  const hints = (0, import_react21.useMemo)(
     () => (0, import_spreadsheet4.getFormulaHints)(value, caret ?? value.length, { limit }),
     [value, caret, limit]
   );
   const suggestions = dismissed ? [] : hints.suggestions;
   const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
   const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
-  const latest = (0, import_react19.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = (0, import_react21.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
   latest.current = { suggestions, selected: selectedIndex, value, caret, onAccept };
   const accept = (index) => {
     const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
@@ -1329,7 +1633,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -1379,7 +1683,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -1388,7 +1692,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -1396,7 +1700,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
   }, [visible, value, inputRef]);
   if (!visible) return null;
   const { activeCall } = hints;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       "data-formula-hints": "",
@@ -1412,8 +1716,8 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       },
       onMouseDown: (e) => e.preventDefault(),
       children: [
-        activeCall && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        activeCall && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "span",
             {
               "data-active": part.active ? "" : void 0,
@@ -1422,13 +1726,13 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-semibold", children: activeCall.argument.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-semibold", children: activeCall.argument.name }),
             ": ",
             activeCall.argument.description
           ] }) : activeCall.description })
         ] }),
-        suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "li",
           {
             role: "option",
@@ -1440,8 +1744,8 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
               accept(i);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-muted-foreground truncate", children: s.description })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-muted-foreground truncate", children: s.description })
             ]
           },
           s.name
@@ -1452,7 +1756,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
 };
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var COLUMN_HEADER_HEIGHT = 28;
 var ROW_HEADER_WIDTH = 48;
 function frozenCellStyle(viewRow, viewCol) {
@@ -1479,6 +1783,19 @@ function spillBorderStyle(range, row, col) {
     borderRight: col === range.endCol ? line : void 0
   };
 }
+function CellText({ cell }) {
+  const shown = (0, import_spreadsheet5.formatCellForDisplay)(cell);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
+      title: cell.error ? cell.errorMessage ?? cell.error : void 0,
+      "data-numeric": shown.numeric ? "" : void 0,
+      style: shown.numeric || shown.color ? { ...shown.numeric ? { textAlign: "right" } : {}, ...shown.color ? { color: (0, import_spreadsheet5.numberFormatColorToCss)(shown.color) } : {} } : void 0,
+      children: shown.text
+    }
+  );
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -1489,23 +1806,23 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react20.useRef)(null);
-  const formulaBarRef = (0, import_react20.useRef)(null);
-  const cellInputRef = (0, import_react20.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react20.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react20.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react20.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react20.useState)(0);
+  const gridRef = (0, import_react22.useRef)(null);
+  const formulaBarRef = (0, import_react22.useRef)(null);
+  const cellInputRef = (0, import_react22.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react22.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react22.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react22.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react22.useState)(0);
   const view = state.viewModel;
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = (0, import_react20.useState)(null);
+  const [menu, setMenu] = (0, import_react22.useState)(null);
   const filter = state.document.table?.filter;
-  const filteredColIds = (0, import_react20.useMemo)(
+  const filteredColIds = (0, import_react22.useMemo)(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = (0, import_react20.useCallback)((rIdx, cIdx, e) => {
+  const handleCellContextMenu = (0, import_react22.useCallback)((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
@@ -1514,28 +1831,28 @@ var SpreadsheetEditor = ({
     }
     setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet5.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const activeRawValue = (0, import_react20.useMemo)(() => {
+  const activeRawValue = (0, import_react22.useMemo)(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const activeSpill = (0, import_react20.useMemo)(
+  const activeSpill = (0, import_react22.useMemo)(
     () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document]
   );
   const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
-  const coordLabel = (0, import_react20.useMemo)(() => {
+  const coordLabel = (0, import_react22.useMemo)(() => {
     if (!state.activeCell) return "--";
     const colName = (0, import_spreadsheet5.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react20.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react22.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -1551,19 +1868,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react20.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react22.useCallback)((rIdx, cIdx, e) => {
     if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
       state.commitEditing();
     }
     state.selectCell(rIdx, cIdx, e.shiftKey);
   }, [state]);
-  const handleCellDblClick = (0, import_react20.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react22.useCallback)((rIdx, cIdx) => {
     if (readOnly) return;
     const col = state.document.columns[cIdx];
     if (col?.readOnly) return;
     state.startEditing(rIdx, cIdx);
   }, [readOnly, state]);
-  const handleKeyDown = (0, import_react20.useCallback)((e) => {
+  const handleKeyDown = (0, import_react22.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1632,11 +1949,11 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const stateRef = (0, import_react20.useRef)(state);
+  const stateRef = (0, import_react22.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react20.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react22.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -1687,7 +2004,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react20.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react22.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -1735,7 +2052,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react20.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react22.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -1771,12 +2088,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react20.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react22.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react20.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react22.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1798,7 +2115,7 @@ var SpreadsheetEditor = ({
   const isActiveCell = (rIdx, cIdx) => {
     return state.activeCell?.row === rIdx && state.activeCell?.col === cIdx;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ref: gridRef,
@@ -1808,10 +2125,10 @@ var SpreadsheetEditor = ({
       role: "grid",
       "aria-label": "Spreadsheet",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "input",
             {
               ref: formulaBarRef,
@@ -1847,7 +2164,7 @@ var SpreadsheetEditor = ({
               }
             }
           ),
-          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             FormulaHints,
             {
               inputRef: formulaBarRef,
@@ -1856,10 +2173,10 @@ var SpreadsheetEditor = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
-            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
+            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "th",
               {
                 "data-col": cIdx,
@@ -1874,16 +2191,16 @@ var SpreadsheetEditor = ({
                 onClick: () => onColumnHeaderClick?.(col),
                 onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
-                    filteredColIds.has(col.id) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
+                    filteredColIds.has(col.id) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
                       "(",
                       col.key,
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "div",
                     {
                       className: "col-resize-handle",
@@ -1900,7 +2217,7 @@ var SpreadsheetEditor = ({
                       onDoubleClick: (e) => handleResizeDblClick(col.id, cIdx, e),
                       role: "separator",
                       "aria-orientation": "vertical",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "div",
                         {
                           className: "col-resize-handle-line",
@@ -1919,19 +2236,19 @@ var SpreadsheetEditor = ({
               },
               col.id
             )),
-            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "th",
               {
                 className: "w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors",
                 onClick: onAddColumnClick,
                 title: "Add Column",
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: view.rows.map((viewRow) => {
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: view.rows.map((viewRow) => {
             if (viewRow.kind === "group") {
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 SpreadsheetGroupRow,
                 {
                   group: viewRow.group,
@@ -1945,14 +2262,14 @@ var SpreadsheetEditor = ({
             }
             const displayRowIndex = viewRow.index;
             const selection = state.selectedRange ? (0, import_spreadsheet5.normalizeRange)(state.selectedRange) : null;
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "tr",
               {
                 "data-row": displayRowIndex,
                 className: `border-b border-border hover:bg-muted/10 transition-colors ${viewRow.section !== "body" ? "bg-muted/30 font-semibold" : ""}`,
                 style: { height: viewRow.row.height || 32 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "td",
                     {
                       className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
@@ -1973,7 +2290,7 @@ var SpreadsheetEditor = ({
                     const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
                     const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet5.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
                     const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet5.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
-                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                       "td",
                       {
                         "data-row": rIdx,
@@ -1992,8 +2309,8 @@ var SpreadsheetEditor = ({
                         onContextMenu: (e) => handleCellContextMenu(rIdx, cIdx, e),
                         onMouseOver: () => extendFill(displayRowIndex, viewCol.index),
                         children: [
-                          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                               "input",
                               {
                                 ref: cellInputRef,
@@ -2009,17 +2326,10 @@ var SpreadsheetEditor = ({
                                 autoFocus: true
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
-                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                            "span",
-                            {
-                              className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
-                              title: cell.error ? cell.errorMessage ?? cell.error : void 0,
-                              children: (0, import_spreadsheet5.formatCellDisplay)(cell)
-                            }
-                          ),
-                          activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
-                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
+                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellText, { cell }),
+                          activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
+                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             "div",
                             {
                               className: "spreadsheet-fill-handle",
@@ -2034,14 +2344,14 @@ var SpreadsheetEditor = ({
                       viewCol.column.id
                     );
                   }),
-                  onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+                  onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
                 ]
               },
               viewRow.row.id
             );
           }) })
         ] }) }),
-        menu && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        menu && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           SpreadsheetContextMenu,
           {
             items: menu.items,
@@ -2053,7 +2363,7 @@ var SpreadsheetEditor = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
         .col-resize-handle:hover .col-resize-handle-line {
           background-color: var(--primary, #6366f1);
           opacity: 0.75;
@@ -2076,10 +2386,10 @@ var SpreadsheetEditor = ({
 };
 
 // src/slots.tsx
-var import_react21 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       type: "button",
@@ -2089,112 +2399,128 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+  Tooltip: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
+  NodeHeader: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
       props.icon,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+    props.onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
-var EditorSlotsContext = (0, import_react21.createContext)(defaultSlots);
+var EditorSlotsContext = (0, import_react23.createContext)(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = (0, import_react21.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
+  const mergedSlots = (0, import_react23.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
-  return (0, import_react21.useContext)(EditorSlotsContext);
+  return (0, import_react23.useContext)(EditorSlotsContext);
 }
 
 // src/image-editor/useImageEditor.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_image_editor = require("@pixerate/editor/image-editor");
 function useImageEditor(options = {}) {
-  const controllerRef = (0, import_react22.useRef)(null);
+  const controllerRef = (0, import_react24.useRef)(null);
   if (!controllerRef.current) {
     controllerRef.current = new import_image_editor.ImageEditorController(options);
   }
   const controller = controllerRef.current;
-  const [state, setState] = (0, import_react22.useState)(() => controller.getState());
-  const [historyTicks, setHistoryTicks] = (0, import_react22.useState)(0);
-  (0, import_react22.useEffect)(() => {
+  const [state, setState] = (0, import_react24.useState)(() => controller.getState());
+  const [historyTicks, setHistoryTicks] = (0, import_react24.useState)(0);
+  const [histogram, setHistogram] = (0, import_react24.useState)(() => controller.getHistogram());
+  (0, import_react24.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
+  (0, import_react24.useEffect)(() => {
     const unsub = controller.subscribe((next) => {
       setState(next);
       setHistoryTicks((t) => t + 1);
     });
     return unsub;
   }, [controller]);
-  const loadedImageRef = (0, import_react22.useRef)(options.image);
-  (0, import_react22.useEffect)(() => {
+  const loadedImageRef = (0, import_react24.useRef)(options.image);
+  (0, import_react24.useEffect)(() => {
     if (options.image === loadedImageRef.current) return;
     loadedImageRef.current = options.image;
     if (options.image) {
       controller.loadImage(options.image);
     }
   }, [options.image, controller]);
-  const setTool = (0, import_react22.useCallback)((tool) => controller.setTool(tool), [controller]);
-  const setCrop = (0, import_react22.useCallback)(
+  const setTool = (0, import_react24.useCallback)((tool) => controller.setTool(tool), [controller]);
+  const setCrop = (0, import_react24.useCallback)(
     (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),
     [controller]
   );
-  const applyCropPreset = (0, import_react22.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
-  const resetCrop = (0, import_react22.useCallback)(() => controller.resetCrop(), [controller]);
-  const rotate = (0, import_react22.useCallback)((deg) => controller.rotate(deg), [controller]);
-  const setRotation = (0, import_react22.useCallback)((deg) => controller.setRotation(deg), [controller]);
-  const flipHorizontal = (0, import_react22.useCallback)(() => controller.flipHorizontal(), [controller]);
-  const flipVertical = (0, import_react22.useCallback)(() => controller.flipVertical(), [controller]);
-  const setAdjustments = (0, import_react22.useCallback)(
+  const applyCropPreset = (0, import_react24.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
+  const resetCrop = (0, import_react24.useCallback)(() => controller.resetCrop(), [controller]);
+  const rotate = (0, import_react24.useCallback)((deg) => controller.rotate(deg), [controller]);
+  const setRotation = (0, import_react24.useCallback)((deg) => controller.setRotation(deg), [controller]);
+  const flipHorizontal = (0, import_react24.useCallback)(() => controller.flipHorizontal(), [controller]);
+  const flipVertical = (0, import_react24.useCallback)(() => controller.flipVertical(), [controller]);
+  const setAdjustments = (0, import_react24.useCallback)(
     (partial, commitToHistory = true) => controller.setAdjustments(partial, commitToHistory),
     [controller]
   );
-  const resetAdjustments = (0, import_react22.useCallback)(() => controller.resetAdjustments(), [controller]);
-  const upgradeProcess = (0, import_react22.useCallback)(() => controller.upgradeProcess(), [controller]);
-  const setDepthMask = (0, import_react22.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
-  const resetDepthMask = (0, import_react22.useCallback)(() => controller.resetDepthMask(), [controller]);
-  const addAnnotation = (0, import_react22.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
-  const updateAnnotation = (0, import_react22.useCallback)(
+  const resetAdjustments = (0, import_react24.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const upgradeProcess = (0, import_react24.useCallback)(() => controller.upgradeProcess(), [controller]);
+  const addAdjustmentLayer = (0, import_react24.useCallback)(
+    (init, index) => controller.addAdjustmentLayer(init, index),
+    [controller]
+  );
+  const updateAdjustmentLayer = (0, import_react24.useCallback)(
+    (id, update, commitToHistory = true) => controller.updateAdjustmentLayer(id, update, commitToHistory),
+    [controller]
+  );
+  const removeAdjustmentLayer = (0, import_react24.useCallback)((id) => controller.removeAdjustmentLayer(id), [controller]);
+  const moveAdjustmentLayer = (0, import_react24.useCallback)((id, to) => controller.moveAdjustmentLayer(id, to), [controller]);
+  const toggleAdjustmentLayer = (0, import_react24.useCallback)(
+    (id, enabled) => controller.toggleAdjustmentLayer(id, enabled),
+    [controller]
+  );
+  const setDepthMask = (0, import_react24.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
+  const resetDepthMask = (0, import_react24.useCallback)(() => controller.resetDepthMask(), [controller]);
+  const addAnnotation = (0, import_react24.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
+  const updateAnnotation = (0, import_react24.useCallback)(
     (id, partial, commitToHistory = true) => controller.updateAnnotation(id, partial, commitToHistory),
     [controller]
   );
-  const removeAnnotation = (0, import_react22.useCallback)((id) => controller.removeAnnotation(id), [controller]);
-  const clearAnnotations = (0, import_react22.useCallback)(() => controller.clearAnnotations(), [controller]);
-  const selectAnnotation = (0, import_react22.useCallback)((id) => controller.selectAnnotation(id), [controller]);
-  const undo = (0, import_react22.useCallback)(() => controller.undo(), [controller]);
-  const redo = (0, import_react22.useCallback)(() => controller.redo(), [controller]);
-  const reset = (0, import_react22.useCallback)(() => controller.reset(), [controller]);
-  const zoomIn = (0, import_react22.useCallback)((factor) => controller.zoomIn(factor), [controller]);
-  const zoomOut = (0, import_react22.useCallback)((factor) => controller.zoomOut(factor), [controller]);
-  const resetZoom = (0, import_react22.useCallback)(() => controller.resetZoom(), [controller]);
-  const setZoom = (0, import_react22.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
-  const setPan = (0, import_react22.useCallback)((pan) => controller.setPan(pan), [controller]);
-  const setComparing = (0, import_react22.useCallback)((comp) => controller.setComparing(comp), [controller]);
-  const loadImage = (0, import_react22.useCallback)((src) => controller.loadImage(src), [controller]);
-  const toDataURL = (0, import_react22.useCallback)((opts) => controller.toDataURL(opts), [controller]);
-  const toBlob = (0, import_react22.useCallback)((opts) => controller.toBlob(opts), [controller]);
-  const toJSON = (0, import_react22.useCallback)(() => controller.toJSON(), [controller]);
-  const loadJSON = (0, import_react22.useCallback)((data) => controller.loadJSON(data), [controller]);
-  const renderMask = (0, import_react22.useCallback)(
+  const removeAnnotation = (0, import_react24.useCallback)((id) => controller.removeAnnotation(id), [controller]);
+  const clearAnnotations = (0, import_react24.useCallback)(() => controller.clearAnnotations(), [controller]);
+  const selectAnnotation = (0, import_react24.useCallback)((id) => controller.selectAnnotation(id), [controller]);
+  const undo = (0, import_react24.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react24.useCallback)(() => controller.redo(), [controller]);
+  const reset = (0, import_react24.useCallback)(() => controller.reset(), [controller]);
+  const zoomIn = (0, import_react24.useCallback)((factor) => controller.zoomIn(factor), [controller]);
+  const zoomOut = (0, import_react24.useCallback)((factor) => controller.zoomOut(factor), [controller]);
+  const resetZoom = (0, import_react24.useCallback)(() => controller.resetZoom(), [controller]);
+  const setZoom = (0, import_react24.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
+  const setPan = (0, import_react24.useCallback)((pan) => controller.setPan(pan), [controller]);
+  const setComparing = (0, import_react24.useCallback)((comp) => controller.setComparing(comp), [controller]);
+  const loadImage = (0, import_react24.useCallback)((src) => controller.loadImage(src), [controller]);
+  const toDataURL = (0, import_react24.useCallback)((opts) => controller.toDataURL(opts), [controller]);
+  const toBlob = (0, import_react24.useCallback)((opts) => controller.toBlob(opts), [controller]);
+  const toJSON = (0, import_react24.useCallback)(() => controller.toJSON(), [controller]);
+  const loadJSON = (0, import_react24.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react24.useCallback)(
     (opts) => controller.renderMask(opts),
     [controller]
   );
-  const toMaskDataURL = (0, import_react22.useCallback)(
+  const toMaskDataURL = (0, import_react24.useCallback)(
     (opts) => controller.toMaskDataURL(opts),
     [controller]
   );
-  const toSourceDataURL = (0, import_react22.useCallback)(
+  const toSourceDataURL = (0, import_react24.useCallback)(
     (opts) => controller.toSourceDataURL(opts),
     [controller]
   );
-  const applyInpaintedImage = (0, import_react22.useCallback)(
+  const applyInpaintedImage = (0, import_react24.useCallback)(
     (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
     [controller]
   );
-  const applyBackgroundRemovedImage = (0, import_react22.useCallback)(
+  const applyBackgroundRemovedImage = (0, import_react24.useCallback)(
     (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
     [controller]
   );
-  return (0, import_react22.useMemo)(
+  return (0, import_react24.useMemo)(
     () => ({
       controller,
       state,
@@ -2211,6 +2537,12 @@ function useImageEditor(options = {}) {
       setAdjustments,
       resetAdjustments,
       upgradeProcess,
+      addAdjustmentLayer,
+      updateAdjustmentLayer,
+      removeAdjustmentLayer,
+      moveAdjustmentLayer,
+      toggleAdjustmentLayer,
+      histogram,
       setDepthMask,
       resetDepthMask,
       addAnnotation,
@@ -2239,14 +2571,445 @@ function useImageEditor(options = {}) {
       applyBackgroundRemovedImage
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [controller, state, historyTicks]
+    [controller, state, historyTicks, histogram]
   );
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react23 = require("react");
+var import_react28 = __toESM(require("react"), 1);
+var import_image_editor6 = require("@pixerate/editor/image-editor");
+
+// src/image-editor/ControlSlider.tsx
 var import_image_editor2 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ControlSlider = ({ spec, value, onChange, disabled, label }) => {
+  const name = label ?? spec.label;
+  const track = (0, import_image_editor2.controlTrackBackground)(spec);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-control-id": spec.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-mono", children: (0, import_image_editor2.formatControlValue)(spec, value) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "input",
+      {
+        type: "range",
+        min: spec.min,
+        max: spec.max,
+        step: spec.step,
+        "aria-label": name,
+        disabled,
+        value,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "w-full accent-indigo-500 disabled:opacity-40"
+      }
+    ),
+    track && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-0.5 rounded-full opacity-70", style: { background: track } })
+  ] });
+};
+
+// src/image-editor/Histogram.tsx
+var import_react25 = require("react");
+var import_image_editor3 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FILL = {
+  luminance: "rgba(148, 163, 184, 0.45)",
+  red: "rgba(239, 68, 68, 0.45)",
+  green: "rgba(34, 197, 94, 0.45)",
+  blue: "rgba(59, 130, 246, 0.45)"
+};
+var W = 256;
+var Histogram = ({ histogram, channel = "rgb", height = 64, className = "", style }) => {
+  const channels = channel === "rgb" ? ["luminance", "red", "green", "blue"] : [channel];
+  const paths = (0, import_react25.useMemo)(
+    () => histogram && histogram.samples > 0 ? channels.map((c) => ({ c, d: (0, import_image_editor3.histogramPath)(histogram, c, W, height) })) : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [histogram, channel, height]
+  );
+  const clipLow = histogram && histogram.samples ? Math.max(...histogram.shadows) / histogram.samples : 0;
+  const clipHigh = histogram && histogram.samples ? Math.max(...histogram.highlights) / histogram.samples : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${W} ${height}`,
+      preserveAspectRatio: "none",
+      role: "img",
+      "aria-label": histogram ? `Histogram of ${histogram.samples} pixels` : "Histogram (no data)",
+      "data-testid": "image-editor-histogram",
+      className: `w-full rounded bg-slate-950/60 ${className}`,
+      style: { height, ...style },
+      children: [
+        paths.map(({ c, d }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d, fill: FILL[c], stroke: "none" }, c)),
+        clipLow > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: 0, y: 0, width: 3, height, fill: "#3b82f6", "data-testid": "histogram-clip-shadows" }),
+        clipHigh > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: W - 3, y: 0, width: 3, height, fill: "#ef4444", "data-testid": "histogram-clip-highlights" })
+      ]
+    }
+  );
+};
+function useImageHistogram(controller) {
+  const [histogram, setHistogram] = (0, import_react25.useState)(() => controller.getHistogram());
+  (0, import_react25.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
+  return histogram;
+}
+
+// src/image-editor/AdjustmentLayersPanel.tsx
+var import_react27 = require("react");
+var import_image_editor5 = require("@pixerate/editor/image-editor");
+
+// src/image-editor/CurvesEditor.tsx
+var import_react26 = require("react");
+var import_image_editor4 = require("@pixerate/editor/image-editor");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var BOX = 256;
+var STROKE = { master: "#e2e8f0", red: "#ef4444", green: "#22c55e", blue: "#3b82f6" };
+var CurvesEditor = ({ points, onChange, histogram, channel = "master", size = 200 }) => {
+  const svgRef = (0, import_react26.useRef)(null);
+  const [drag, setDrag] = (0, import_react26.useState)(null);
+  const toBox = (e) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect || !rect.width || !rect.height) return { x: 0, y: 0 };
+    return { x: (e.clientX - rect.left) / rect.width * BOX, y: (e.clientY - rect.top) / rect.height * BOX };
+  };
+  const onPointerDown = (e) => {
+    const { x, y } = toBox(e);
+    let index = (0, import_image_editor4.hitTestCurvePoint)(points, x, y, BOX, BOX, 10);
+    if (index === -1) {
+      const inserted = (0, import_image_editor4.insertCurvePoint)(points, (0, import_image_editor4.boxToCurvePoint)(x, y, BOX, BOX));
+      onChange(inserted.points, true);
+      index = inserted.index;
+    } else {
+      onChange(points, true);
+    }
+    setDrag(index);
+    e.target.setPointerCapture?.(e.pointerId);
+  };
+  const onPointerMove = (e) => {
+    if (drag === null) return;
+    onChange((0, import_image_editor4.moveCurvePoint)(points, drag, (0, import_image_editor4.boxToCurvePoint)(toBox(e).x, toBox(e).y, BOX, BOX)), false);
+  };
+  const onDoubleClick = (e) => {
+    const { x, y } = toBox(e);
+    const index = (0, import_image_editor4.hitTestCurvePoint)(points, x, y, BOX, BOX, 10);
+    if (index !== -1 && points.length > 2) onChange((0, import_image_editor4.removeCurvePoint)(points, index), true);
+  };
+  const histChannel = channel === "master" ? "luminance" : channel;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "svg",
+    {
+      ref: svgRef,
+      viewBox: `0 0 ${BOX} ${BOX}`,
+      width: size,
+      height: size,
+      role: "application",
+      "aria-label": `${channel} curve`,
+      "data-testid": "curves-editor",
+      className: "rounded bg-slate-950/70 touch-none select-none cursor-crosshair",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: () => setDrag(null),
+      onPointerCancel: () => setDrag(null),
+      onDoubleClick,
+      children: [
+        histogram && histogram.samples > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: (0, import_image_editor4.histogramPath)(histogram, histChannel, BOX, BOX), fill: "rgba(148, 163, 184, 0.25)" }),
+        [64, 128, 192].map((v) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { stroke: "rgba(148, 163, 184, 0.2)", strokeWidth: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("line", { x1: v, y1: 0, x2: v, y2: BOX }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("line", { x1: 0, y1: v, x2: BOX, y2: v })
+        ] }, v)),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("line", { x1: 0, y1: BOX, x2: BOX, y2: 0, stroke: "rgba(148, 163, 184, 0.35)", strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: (0, import_image_editor4.curveSvgPath)(points, BOX, BOX), fill: "none", stroke: STROKE[channel], strokeWidth: 2 }),
+        points.map((p, i) => {
+          const b = (0, import_image_editor4.curvePointToBox)(p, BOX, BOX);
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "circle",
+            {
+              cx: b.x,
+              cy: b.y,
+              r: 5,
+              fill: drag === i ? STROKE[channel] : "#0f172a",
+              stroke: STROKE[channel],
+              strokeWidth: 2,
+              "aria-label": `Point ${p.input} to ${p.output}`
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/image-editor/AdjustmentLayersPanel.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CHANNELS = [
+  { id: "master", label: "RGB" },
+  { id: "red", label: "Red" },
+  { id: "green", label: "Green" },
+  { id: "blue", label: "Blue" }
+];
+var TONES = [
+  { id: "shadows", label: "Shadows" },
+  { id: "midtones", label: "Midtones" },
+  { id: "highlights", label: "Highlights" }
+];
+var selectClass = "bg-slate-800 border border-slate-700 rounded px-1.5 py-1 text-slate-200";
+var chipClass = (on) => `px-2 py-0.5 rounded text-[10px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"}`;
+var HueRangeStrip = ({ bounds }) => {
+  const pts = Array.from({ length: 73 }, (_, i) => `${i / 72 * 360},${20 - (0, import_image_editor5.hueRangeWeight)({ bounds }, i * 5) * 18}`).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { viewBox: "0 0 360 20", preserveAspectRatio: "none", className: "w-full h-4 rounded", "data-testid": "hue-range-strip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("linearGradient", { id: "pixerate-hue-strip", children: [0, 60, 120, 180, 240, 300, 360].map((h) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("stop", { offset: `${h / 360 * 100}%`, stopColor: `hsl(${h}, 90%, 50%)` }, h)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: 360, height: 20, fill: "url(#pixerate-hue-strip)", opacity: 0.6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("polyline", { points: pts, fill: "none", stroke: "#fff", strokeWidth: 1.5 })
+  ] });
+};
+var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
+  const follow = layersProp === void 0;
+  const [, setTick] = (0, import_react27.useState)(0);
+  (0, import_react27.useEffect)(() => follow ? controller.subscribe(() => setTick((n) => n + 1)) : void 0, [controller, follow]);
+  const layers = layersProp ?? controller.getAdjustmentLayers();
+  const [newKind, setNewKind] = (0, import_react27.useState)("curves");
+  const [selectedId, setSelectedId] = (0, import_react27.useState)(null);
+  const [channel, setChannel] = (0, import_react27.useState)("master");
+  const [range, setRange] = (0, import_react27.useState)(-1);
+  const [tone, setTone] = (0, import_react27.useState)("midtones");
+  const selected = layers.find((l) => l.id === selectedId) ?? null;
+  const topFirst = [...layers].reverse();
+  const setParam = (layer, path, value, commit = true) => controller.updateAdjustmentLayer(layer.id, { params: (0, import_image_editor5.setControlPath)(layer.params, path, value) }, commit);
+  const slider = (layer, spec, label) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ControlSlider,
+    {
+      spec,
+      label,
+      value: Number((0, import_image_editor5.getControlPath)(layer.params, spec.id) ?? spec.default),
+      onChange: (v) => setParam(layer, spec.id, v)
+    },
+    spec.id
+  );
+  const controlsOf = (layer, filter = () => true) => import_image_editor5.ADJUSTMENT_LAYER_CONTROLS[layer.kind].filter(filter);
+  const checkbox = (layer, path, label) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "input",
+      {
+        type: "checkbox",
+        checked: Boolean((0, import_image_editor5.getControlPath)(layer.params, path)),
+        onChange: (e) => setParam(layer, path, e.target.checked),
+        className: "accent-indigo-500"
+      }
+    ),
+    label
+  ] });
+  const editor = (layer) => {
+    switch (layer.kind) {
+      case "curves":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Curve channel", children: CHANNELS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chipClass(channel === c.id), onClick: () => setChannel(c.id), children: c.label }, c.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            CurvesEditor,
+            {
+              points: layer.params[channel],
+              channel,
+              histogram,
+              onChange: (points, commit) => setParam(layer, channel, points, commit)
+            }
+          )
+        ] });
+      case "levels":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Levels channel", children: CHANNELS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chipClass(channel === c.id), onClick: () => setChannel(c.id), children: c.label }, c.id)) }),
+          controlsOf(layer, (s) => s.id.startsWith(`${channel}.`)).map((s) => slider(layer, s))
+        ] });
+      case "hueSaturation":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Hue range", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chipClass(range === -1), onClick: () => setRange(-1), children: "Master" }),
+            import_image_editor5.HUE_RANGE_LABELS.map((name, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chipClass(range === i), onClick: () => setRange(i), disabled: layer.params.colorize, children: name }, name))
+          ] }),
+          range >= 0 && !layer.params.colorize && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HueRangeStrip, { bounds: layer.params.ranges[range].bounds }),
+          controlsOf(layer, (s) => range === -1 || layer.params.colorize ? !s.id.startsWith("ranges.") : s.id.startsWith(`ranges.${range}.`)).map(
+            (s) => slider(layer, s)
+          ),
+          range === -1 && checkbox(layer, "colorize", "Colorize")
+        ] });
+      case "colorBalance":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Tone", children: TONES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: chipClass(tone === t.id), onClick: () => setTone(t.id), children: t.label }, t.id)) }),
+          controlsOf(layer, (s) => s.id.startsWith(`${tone}.`)).map((s) => slider(layer, s)),
+          checkbox(layer, "preserveLuminosity", "Preserve luminosity")
+        ] });
+      case "blackWhite":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          controlsOf(layer).map((s) => slider(layer, s)),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: layer.params.tint !== null,
+                onChange: (e) => setParam(layer, "tint", e.target.checked ? "#e1d3b3" : null),
+                className: "accent-indigo-500"
+              }
+            ),
+            "Tint",
+            layer.params.tint && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": "Tint colour",
+                value: layer.params.tint,
+                onChange: (e) => setParam(layer, "tint", e.target.value),
+                className: "h-5 w-8 bg-transparent"
+              }
+            )
+          ] })
+        ] });
+      case "photoFilter":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+            "Filter colour",
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": "Filter colour",
+                value: layer.params.color,
+                onChange: (e) => setParam(layer, "color", e.target.value),
+                className: "h-5 w-8 bg-transparent"
+              }
+            )
+          ] }),
+          controlsOf(layer).map((s) => slider(layer, s)),
+          checkbox(layer, "preserveLuminosity", "Preserve luminosity")
+        ] });
+      case "invert":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-slate-500 text-[11px]", children: "Invert has no settings." });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col gap-2", children: controlsOf(layer).map((s) => slider(layer, s)) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2 text-xs", "data-testid": "adjustment-layers-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Adjustment Layers" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "select",
+        {
+          "aria-label": "New adjustment layer kind",
+          className: `${selectClass} flex-1`,
+          value: newKind,
+          onChange: (e) => setNewKind(e.target.value),
+          children: import_image_editor5.ADJUSTMENT_KINDS.map((k) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: k.kind, children: k.label }, k.kind))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-500",
+          onClick: () => {
+            setSelectedId(controller.addAdjustmentLayer(newKind));
+            setChannel("master");
+            setRange(-1);
+          },
+          children: "Add Layer"
+        }
+      )
+    ] }),
+    topFirst.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "flex flex-col gap-1", "aria-label": "Adjustment layers", children: topFirst.map((layer) => {
+      const index = layers.indexOf(layer);
+      const label = layer.name || (0, import_image_editor5.adjustmentKindLabel)(layer.kind);
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "li",
+        {
+          className: `flex items-center gap-1.5 rounded px-1.5 py-1 ${layer.id === selectedId ? "bg-indigo-600/20 ring-1 ring-indigo-500/50" : "bg-slate-800/60"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": `Show ${label}`,
+                checked: layer.enabled,
+                onChange: () => controller.toggleAdjustmentLayer(layer.id),
+                className: "accent-indigo-500"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                type: "button",
+                className: `flex-1 text-left truncate ${layer.enabled ? "text-slate-200" : "text-slate-500 line-through"}`,
+                onClick: () => setSelectedId(layer.id === selectedId ? null : layer.id),
+                "aria-pressed": layer.id === selectedId,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Move ${label} up`,
+                disabled: index === layers.length - 1,
+                onClick: () => controller.moveAdjustmentLayer(layer.id, index + 1),
+                className: "px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30",
+                children: "\u2191"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Move ${label} down`,
+                disabled: index === 0,
+                onClick: () => controller.moveAdjustmentLayer(layer.id, index - 1),
+                className: "px-1 text-slate-400 hover:text-slate-200 disabled:opacity-30",
+                children: "\u2193"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${label}`,
+                onClick: () => {
+                  controller.removeAdjustmentLayer(layer.id);
+                  if (selectedId === layer.id) setSelectedId(null);
+                },
+                className: "px-1 text-rose-400 hover:text-rose-300",
+                children: "\u2715"
+              }
+            )
+          ]
+        },
+        layer.id
+      );
+    }) }),
+    selected && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2 rounded border border-slate-700/60 p-2", "data-testid": "adjustment-layer-editor", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "select",
+          {
+            "aria-label": "Blend mode",
+            className: `${selectClass} flex-1`,
+            value: selected.blend,
+            onChange: (e) => controller.updateAdjustmentLayer(selected.id, { blend: e.target.value }),
+            children: import_image_editor5.BLEND_MODES.map((m) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: m.id, children: m.label }, m.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        ControlSlider,
+        {
+          spec: import_image_editor5.ADJUSTMENT_LAYER_OPACITY_CONTROL,
+          label: "Layer opacity",
+          value: selected.opacity,
+          onChange: (v) => controller.updateAdjustmentLayer(selected.id, { opacity: v })
+        }
+      ),
+      editor(selected)
+    ] })
+  ] });
+};
+
+// src/image-editor/ImageEditor.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -2261,17 +3024,17 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  const legacyProcess = (0, import_image_editor2.normalizeProcessVersion)(state.adjustments.process) < import_image_editor2.LATEST_PROCESS_VERSION;
-  const canvasRef = (0, import_react23.useRef)(null);
-  const containerRef = (0, import_react23.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react23.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react23.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react23.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react23.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react23.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react23.useState)(false);
-  const [aiError, setAiError] = (0, import_react23.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react23.useState)(null);
+  const legacyProcess = (0, import_image_editor6.normalizeProcessVersion)(state.adjustments.process) < import_image_editor6.LATEST_PROCESS_VERSION;
+  const canvasRef = (0, import_react28.useRef)(null);
+  const containerRef = (0, import_react28.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react28.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react28.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react28.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react28.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react28.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react28.useState)(false);
+  const [aiError, setAiError] = (0, import_react28.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react28.useState)(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -2333,18 +3096,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react23.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react23.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react23.useState)(24);
-  const [textInput, setTextInput] = (0, import_react23.useState)("");
-  const draftAnnotationRef = (0, import_react23.useRef)(null);
-  const draftCropRef = (0, import_react23.useRef)(null);
-  const cropDragInfoRef = (0, import_react23.useRef)(null);
-  const annotationDragInfoRef = (0, import_react23.useRef)(null);
-  const isDrawingRef = (0, import_react23.useRef)(false);
-  const currentPathRef = (0, import_react23.useRef)([]);
-  const dragStartPointRef = (0, import_react23.useRef)(null);
-  const renderCanvas = (0, import_react23.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react28.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react28.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react28.useState)(24);
+  const [textInput, setTextInput] = (0, import_react28.useState)("");
+  const draftAnnotationRef = (0, import_react28.useRef)(null);
+  const draftCropRef = (0, import_react28.useRef)(null);
+  const cropDragInfoRef = (0, import_react28.useRef)(null);
+  const annotationDragInfoRef = (0, import_react28.useRef)(null);
+  const isDrawingRef = (0, import_react28.useRef)(false);
+  const currentPathRef = (0, import_react28.useRef)([]);
+  const dragStartPointRef = (0, import_react28.useRef)(null);
+  const renderCanvas = (0, import_react28.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -2363,7 +3126,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -2371,12 +3134,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -2413,8 +3176,8 @@ var ImageEditor = ({
         width: state.imageDimensions.width,
         height: state.imageDimensions.height
       };
-      const handle = (0, import_image_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-      const startImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+      const handle = (0, import_image_editor6.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+      const startImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
       if (handle) {
         cropDragInfoRef.current = {
           handle,
@@ -2433,12 +3196,12 @@ var ImageEditor = ({
       return;
     }
     if (activeTab === "annotate") {
-      const imgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const imgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       dragStartPointRef.current = imgPt;
       if (state.activeTool === "select") {
         for (let i = state.annotations.length - 1; i >= 0; i--) {
           const ann = state.annotations[i];
-          if ((0, import_image_editor2.hitTestAnnotation)(imgPt, ann)) {
+          if ((0, import_image_editor6.hitTestAnnotation)(imgPt, ann)) {
             editor.selectAnnotation(ann.id);
             annotationDragInfoRef.current = {
               annId: ann.id,
@@ -2475,7 +3238,7 @@ var ImageEditor = ({
     if (activeTab === "crop") {
       const drag = cropDragInfoRef.current;
       if (drag) {
-        const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+        const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
         let newCrop;
         if (drag.handle === "new") {
           const minX = Math.max(0, Math.min(drag.startImgPt.x, currentImgPt.x));
@@ -2489,7 +3252,7 @@ var ImageEditor = ({
             height: Math.round(Math.max(20, maxY - minY))
           };
         } else {
-          newCrop = (0, import_image_editor2.calculateCropDrag)(
+          newCrop = (0, import_image_editor6.calculateCropDrag)(
             drag.startCrop,
             drag.handle,
             drag.startImgPt,
@@ -2509,15 +3272,15 @@ var ImageEditor = ({
           width: state.imageDimensions.width,
           height: state.imageDimensions.height
         };
-        const handle = (0, import_image_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
-        canvas.style.cursor = (0, import_image_editor2.getCropCursor)(handle, state.transform);
+        const handle = (0, import_image_editor6.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+        canvas.style.cursor = (0, import_image_editor6.getCropCursor)(handle, state.transform);
       }
       return;
     }
     if (activeTab === "annotate") {
       if (annotationDragInfoRef.current) {
         const drag = annotationDragInfoRef.current;
-        const currentImgPt2 = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt2 = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         const dx = currentImgPt2.x - drag.startImgPt.x;
         const dy = currentImgPt2.y - drag.startImgPt.y;
         editor.updateAnnotation(drag.annId, {
@@ -2529,10 +3292,10 @@ var ImageEditor = ({
       const startPt = dragStartPointRef.current;
       if (!startPt) {
         if (state.activeTool === "select") {
-          const imgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+          const imgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
           let hovered = false;
           for (let i = state.annotations.length - 1; i >= 0; i--) {
-            if ((0, import_image_editor2.hitTestAnnotation)(imgPt, state.annotations[i])) {
+            if ((0, import_image_editor6.hitTestAnnotation)(imgPt, state.annotations[i])) {
               hovered = true;
               break;
             }
@@ -2543,7 +3306,7 @@ var ImageEditor = ({
         }
         return;
       }
-      const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
       if (state.activeTool === "pen" && isDrawingRef.current) {
         currentPathRef.current.push(currentImgPt);
         const draft = {
@@ -2638,7 +3401,7 @@ var ImageEditor = ({
       }
       const startPt = dragStartPointRef.current;
       if (startPt) {
-        const currentImgPt = (0, import_image_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const currentImgPt = (0, import_image_editor6.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
         if (state.activeTool === "pen" && isDrawingRef.current) {
           if (currentPathRef.current.length > 1) {
             editor.addAnnotation({
@@ -2734,15 +3497,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`,
       style,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2754,7 +3517,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2766,7 +3529,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2778,7 +3541,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2790,7 +3553,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "button",
               {
                 type: "button",
@@ -2800,14 +3563,14 @@ var ImageEditor = ({
                 },
                 className: `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${activeTab === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                   "AI Tools"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2818,7 +3581,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2829,7 +3592,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2838,8 +3601,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2849,11 +3612,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2863,8 +3626,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2875,7 +3638,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -2886,13 +3649,13 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               ref: containerRef,
               className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -2905,11 +3668,11 @@ var ImageEditor = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
-            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
+            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2921,7 +3684,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2933,7 +3696,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2945,7 +3708,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2957,7 +3720,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2969,7 +3732,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2982,10 +3745,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2994,7 +3757,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3003,7 +3766,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3012,7 +3775,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3023,10 +3786,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3036,174 +3799,49 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Brightness" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.brightness })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.brightness,
-                    onChange: (e) => editor.setAdjustments({ brightness: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Contrast" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.contrast })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Histogram, { histogram: editor.histogram }),
+              import_image_editor6.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react28.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  ControlSlider,
                   {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.contrast,
-                    onChange: (e) => editor.setAdjustments({ contrast: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
+                    spec,
+                    value: (0, import_image_editor6.readAdjustmentControls)(state.adjustments)[spec.id],
+                    disabled: spec.requiresProcess !== void 0 && legacyProcess,
+                    onChange: (v) => editor.setAdjustments({ [spec.id]: v })
                   }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Saturation" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.saturation })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.saturation,
-                    onChange: (e) => editor.setAdjustments({ saturation: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Exposure" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.exposure })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.exposure,
-                    onChange: (e) => editor.setAdjustments({ exposure: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Warmth / Temperature" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.temperature })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    value: state.adjustments.temperature,
-                    onChange: (e) => editor.setAdjustments({ temperature: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Tint" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.tint ?? 0 })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
+                ),
+                spec.id === "tint" && legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  "div",
                   {
-                    type: "range",
-                    min: "-100",
-                    max: "100",
-                    "aria-label": "Tint",
-                    disabled: legacyProcess,
-                    value: state.adjustments.tint ?? 0,
-                    onChange: (e) => editor.setAdjustments({ tint: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500 disabled:opacity-40"
+                    className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
+                    "data-testid": "image-editor-process-notice",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => editor.upgradeProcess(),
+                          className: "shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30",
+                          children: "Update"
+                        }
+                      )
+                    ]
                   }
                 )
-              ] }),
-              legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                "div",
+              ] }, spec.id)),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-t border-slate-700/60 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                AdjustmentLayersPanel,
                 {
-                  className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
-                  "data-testid": "image-editor-process-notice",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => editor.upgradeProcess(),
-                        className: "shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30",
-                        children: "Update"
-                      }
-                    )
-                  ]
+                  controller,
+                  layers: state.adjustments.layers,
+                  histogram: editor.histogram
                 }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Blur" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
-                    state.adjustments.blur,
-                    "px"
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "0",
-                    max: "30",
-                    value: state.adjustments.blur,
-                    onChange: (e) => editor.setAdjustments({ blur: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Opacity" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
-                    Math.round(state.adjustments.opacity * 100),
-                    "%"
-                  ] })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  "input",
-                  {
-                    type: "range",
-                    min: "0",
-                    max: "1",
-                    step: "0.05",
-                    value: state.adjustments.opacity,
-                    onChange: (e) => editor.setAdjustments({ opacity: Number(e.target.value) }),
-                    className: "w-full accent-indigo-500"
-                  }
-                )
-              ] })
+              ) })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3213,9 +3851,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     type: "color",
@@ -3224,15 +3862,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Width:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Width:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-mono", children: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3245,10 +3883,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3259,7 +3897,7 @@ var ImageEditor = ({
                     className: "flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3269,14 +3907,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Font Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Font Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-mono", children: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "input",
                 {
                   type: "range",
@@ -3287,14 +3925,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-slate-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-slate-400", children: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3303,7 +3941,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3314,10 +3952,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3327,8 +3965,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -3337,12 +3975,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "text",
@@ -3353,8 +3991,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3363,7 +4001,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3373,12 +4011,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3392,12 +4030,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3411,12 +4049,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Softness:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Softness:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "range",
@@ -3428,8 +4066,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -3438,52 +4076,52 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
                     "Background Removal"
                   ] }),
-                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
+                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleRemoveBackground,
                     disabled: isRemovingBg || isInpainting,
                     className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Remove Background"
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m14 7 3 3" })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m14 7 3 3" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
+                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -3495,10 +4133,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -3511,7 +4149,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -3526,25 +4164,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: handleInpaint,
                     disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
                     className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Apply Inpainting"
                     ] })
                   }
                 )
               ] }),
-              aiError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
-              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+              aiError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })
@@ -3554,8 +4192,8 @@ var ImageEditor = ({
 };
 
 // src/review/useReview.ts
-var import_react24 = require("react");
-var import_editor10 = require("@pixerate/editor");
+var import_react29 = require("react");
+var import_editor11 = require("@pixerate/editor");
 var EMPTY_COMMENTS = Object.freeze({
   threads: [],
   activeThreadId: null
@@ -3572,24 +4210,24 @@ function isCommentStore(value) {
   return !!value && typeof value.getSnapshot === "function" && typeof value.createThread === "function";
 }
 function useComments(source) {
-  const store = isCommentStore(source) ? source : (0, import_editor10.getCommentStore)(source);
-  const subscribe = (0, import_react24.useCallback)(
+  const store = isCommentStore(source) ? source : (0, import_editor11.getCommentStore)(source);
+  const subscribe = (0, import_react29.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react24.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = (0, import_react29.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react29.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
-  const store = (0, import_editor10.getTrackChangesStore)(editor ?? null);
-  const subscribe = (0, import_react24.useCallback)(
+  const store = (0, import_editor11.getTrackChangesStore)(editor ?? null);
+  const subscribe = (0, import_react29.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react24.useMemo)(() => {
+  const snapshot = (0, import_react29.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react29.useMemo)(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -3609,9 +4247,9 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-var import_react25 = require("react");
-var import_editor11 = require("@pixerate/editor");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_editor12 = require("@pixerate/editor");
+var import_jsx_runtime16 = require("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";
@@ -3621,22 +4259,22 @@ var CommentsPanel = ({
   author: authorProp,
   showResolved: showResolvedInitial = false,
   className = "flex flex-col gap-2 text-sm text-foreground",
-  formatTime = (t) => (0, import_editor11.formatReviewTime)(t),
+  formatTime = (t) => (0, import_editor12.formatReviewTime)(t),
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = (0, import_react25.useState)(showResolvedInitial);
-  const author = authorProp ?? (0, import_editor11.getCommentAuthor)(editor) ?? { id: "anonymous", name: "Anonymous" };
+  const [showResolved, setShowResolved] = (0, import_react30.useState)(showResolvedInitial);
+  const author = authorProp ?? (0, import_editor12.getCommentAuthor)(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("aside", { className, "aria-label": "Comments", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-xs font-medium text-muted-foreground", children: [
         threads.length - resolvedCount,
         " open",
         resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
       ] }),
-      resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
@@ -3647,7 +4285,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       CommentThreadCard,
       {
         thread,
@@ -3669,7 +4307,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = (0, import_react25.useState)("");
+  const [draft, setDraft] = (0, import_react30.useState)("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -3695,7 +4333,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "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" : ""}`,
@@ -3711,24 +4349,24 @@ var CommentThreadCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
         ] }),
-        quote && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: reply.author.name }),
+        quote && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
         ] }, reply.id)) }),
-        (active || isDraft) && !thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "textarea",
             {
               className: textareaClass,
@@ -3746,9 +4384,9 @@ var CommentThreadCard = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 type: "button",
@@ -3760,9 +4398,9 @@ var CommentThreadCard = ({
             )
           ] })
         ] }),
-        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        !isDraft && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -3778,7 +4416,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("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 = ({
@@ -3791,8 +4429,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__ */ (0, import_jsx_runtime12.jsxs)("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3803,8 +4441,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3815,8 +4453,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3827,7 +4465,7 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    showDescription && current && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    showDescription && current && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "span",
       {
         className: descriptionClassName,
@@ -3839,8 +4477,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3850,7 +4488,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3860,18 +4498,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
   ] });
 };
 
 // src/review/CommentButton.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var CommentButton = ({
   editor,
   className = "rounded px-2 py-1 text-xs text-popover-foreground hover:bg-muted",
   children = "Comment"
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   "button",
   {
     type: "button",
@@ -3882,13 +4520,36 @@ var CommentButton = ({
   }
 );
 
+// src/review/useDocumentCompare.ts
+var import_react31 = require("react");
+var import_editor13 = require("@pixerate/editor");
+function useDocumentCompare(editor, options) {
+  const [summary, setSummary] = (0, import_react31.useState)(null);
+  const defaults = (0, import_react31.useRef)(options);
+  defaults.current = options;
+  const compare = (0, import_react31.useCallback)(
+    (original, revised, overrides) => {
+      if (!editor || editor.isDestroyed) return null;
+      const result = (0, import_editor13.applyDocumentComparison)(editor, original, revised, {
+        ...defaults.current,
+        ...overrides
+      });
+      setSummary(result.summary);
+      return result.summary;
+    },
+    [editor]
+  );
+  const clear = (0, import_react31.useCallback)(() => setSummary(null), []);
+  return (0, import_react31.useMemo)(() => ({ summary, compare, clear }), [summary, compare, clear]);
+}
+
 // src/commands/useCommandPalette.ts
-var import_react26 = require("react");
+var import_react32 = require("react");
 var import_commands2 = require("@pixerate/editor/commands");
 function useCommandPalette(registry, options = {}) {
-  const optionsRef = (0, import_react26.useRef)(options);
+  const optionsRef = (0, import_react32.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react26.useMemo)(
+  const controller = (0, import_react32.useMemo)(
     () => (0, import_commands2.createCommandPaletteController)(registry, {
       context: () => {
         const c = optionsRef.current.context;
@@ -3909,9 +4570,9 @@ function useCommandPalette(registry, options = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [registry]
   );
-  const state = (0, import_react26.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const state = (0, import_react32.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
   const { hotkey, hotkeyTarget } = options;
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!hotkey) return;
     const target = hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
@@ -3939,13 +4600,13 @@ function useCommandPalette(registry, options = {}) {
 }
 
 // src/commands/CommandPalette.tsx
-var import_react27 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react33 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function HighlightedLabel({ item }) {
-  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: item.label });
+  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: item.label });
   const marked = new Set(item.labelIndices);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: Array.from(item.label).map(
-    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react27.default.Fragment, { children: ch }, i)
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: Array.from(item.label).map(
+    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.default.Fragment, { children: ch }, i)
   ) });
 }
 var CommandPalette = ({
@@ -3954,22 +4615,22 @@ var CommandPalette = ({
   emptyMessage = "No matching commands",
   className = ""
 }) => {
-  const inputRef = (0, import_react27.useRef)(null);
-  const listRef = (0, import_react27.useRef)(null);
-  const baseId = (0, import_react27.useId)();
+  const inputRef = (0, import_react33.useRef)(null);
+  const listRef = (0, import_react33.useRef)(null);
+  const baseId = (0, import_react33.useId)();
   const listId = `${baseId}-list`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const { open, query, items, activeIndex } = palette;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!open) return;
     const active = listRef.current?.querySelector('[aria-selected="true"]');
     active?.scrollIntoView?.({ block: "nearest" });
   }, [open, activeIndex]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]",
@@ -3977,7 +4638,7 @@ var CommandPalette = ({
       onMouseDown: (e) => {
         if (e.target === e.currentTarget) palette.setOpen(false);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "div",
         {
           role: "dialog",
@@ -3986,7 +4647,7 @@ var CommandPalette = ({
           className: `w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl ${className}`,
           style: { background: "var(--popover, var(--background, #fff))" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
                 ref: inputRef,
@@ -4006,7 +4667,7 @@ var CommandPalette = ({
                 className: "w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
               }
             ),
-            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "li",
               {
                 id: optionId(index),
@@ -4021,12 +4682,12 @@ var CommandPalette = ({
                 onClick: () => palette.run(item.id),
                 className: `flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm ${index === activeIndex ? "bg-muted" : ""} ${item.enabled ? "" : "cursor-default opacity-50"}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HighlightedLabel, { item }),
-                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HighlightedLabel, { item }),
+                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
                   ] }),
-                  item.group && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
-                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                  item.group && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
                 ]
               },
               item.id
@@ -4039,12 +4700,12 @@ var CommandPalette = ({
 };
 
 // src/commands/useCommandShortcuts.ts
-var import_react28 = require("react");
+var import_react34 = require("react");
 function useCommandShortcuts(registry, options = {}) {
-  const optionsRef = (0, import_react28.useRef)(options);
+  const optionsRef = (0, import_react34.useRef)(options);
   optionsRef.current = options;
   const { enabled = true, target } = options;
-  (0, import_react28.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!registry || !enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
@@ -4062,24 +4723,589 @@ function useCommandShortcuts(registry, options = {}) {
   }, [registry, enabled, target]);
 }
 function useRegisterCommands(registry, specs) {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!registry || !specs || specs.length === 0) return;
     return registry.register(specs);
   }, [registry, specs]);
 }
+
+// src/persistence/useAutosave.ts
+var import_react35 = require("react");
+var import_persistence = require("@pixerate/editor/persistence");
+var IDLE = {
+  status: "idle",
+  error: null,
+  failures: 0,
+  nextAttemptAt: null,
+  lastSavedAt: null,
+  ready: false
+};
+function useAutosave(options) {
+  const optionsRef = (0, import_react35.useRef)(options);
+  optionsRef.current = options;
+  const { storage, key, history, dirty } = options;
+  const recover = options.recover !== false;
+  const flushOnHide = options.flushOnHide !== false;
+  const ready = options.ready !== false;
+  const [controller, setController] = (0, import_react35.useState)(null);
+  const [status, setStatus] = (0, import_react35.useState)(IDLE);
+  const [recovery, setRecovery] = (0, import_react35.useState)(null);
+  const [pendingRecovery, setPendingRecovery] = (0, import_react35.useState)(recover);
+  const revisionsRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
+    const revisions = (0, import_persistence.createRevisionTracker)({ history, dirty });
+    const o = optionsRef.current;
+    const instance = (0, import_persistence.createAutosaveController)({
+      storage,
+      key,
+      getSnapshot: () => optionsRef.current.getSnapshot(),
+      serialize: o.serialize,
+      deserialize: o.deserialize,
+      name: () => optionsRef.current.name,
+      revision: revisions.revision,
+      savedRevision: revisions.savedRevision,
+      interval: o.interval,
+      debounceMs: o.debounceMs,
+      retryBaseMs: o.retryBaseMs,
+      retryMaxMs: o.retryMaxMs
+    });
+    const unsubscribeStatus = instance.subscribe(setStatus);
+    const unsubscribeRevisions = revisions.subscribe(() => instance.notify());
+    revisionsRef.current = revisions;
+    setController(instance);
+    setStatus(instance.getStatus());
+    let active = true;
+    if (recover) {
+      setPendingRecovery(true);
+      instance.checkRecovery().catch(() => null).then((found) => {
+        if (!active) return;
+        setRecovery(found);
+        setPendingRecovery(found !== null);
+      });
+    } else {
+      setRecovery(null);
+      setPendingRecovery(false);
+    }
+    return () => {
+      active = false;
+      unsubscribeStatus();
+      unsubscribeRevisions();
+      revisions.destroy();
+      instance.destroy();
+      if (revisionsRef.current === revisions) revisionsRef.current = null;
+    };
+  }, [storage, key, history, dirty, recover]);
+  (0, import_react35.useEffect)(() => {
+    if (controller && ready && !pendingRecovery) controller.ready();
+  }, [controller, ready, pendingRecovery]);
+  (0, import_react35.useEffect)(() => {
+    if (!controller || !flushOnHide || typeof window === "undefined") return;
+    const flush = () => void controller.flushNow();
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+    window.addEventListener("pagehide", flush);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("pagehide", flush);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [controller, flushOnHide]);
+  const restore = (0, import_react35.useCallback)(() => {
+    const snapshot = recovery?.snapshot;
+    setRecovery(null);
+    setPendingRecovery(false);
+    return snapshot;
+  }, [recovery]);
+  const discard = (0, import_react35.useCallback)(async () => {
+    if (controller) await controller.discardRecovery();
+    setRecovery(null);
+    setPendingRecovery(false);
+  }, [controller]);
+  const flushNow = (0, import_react35.useCallback)(async () => {
+    await controller?.flushNow();
+  }, [controller]);
+  const markClean = (0, import_react35.useCallback)(async () => {
+    revisionsRef.current?.markSaved();
+    await controller?.markClean();
+  }, [controller]);
+  const notifyChange = (0, import_react35.useCallback)(() => revisionsRef.current?.bump(), []);
+  return { status, recovery, pendingRecovery, restore, discard, flushNow, markClean, notifyChange, controller };
+}
+
+// src/persistence/RecoveryPrompt.tsx
+var import_persistence2 = require("@pixerate/editor/persistence");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RecoveryPrompt = ({
+  recovery,
+  onRestore,
+  onDiscard,
+  formatTime,
+  restoreLabel = "Restore",
+  discardLabel = "Discard",
+  className = ""
+}) => {
+  if (!recovery) return null;
+  const { name } = recovery.meta;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      role: "alertdialog",
+      "aria-label": "Unsaved changes found",
+      "data-recovery-prompt": "",
+      className: `flex flex-wrap items-center gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "min-w-0 flex-1", children: [
+          (0, import_persistence2.formatRecoveryMessage)(recovery.meta, formatTime),
+          name ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ml-1 text-xs text-muted-foreground", children: [
+            "(",
+            name,
+            ")"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-recovery-restore": "",
+            onClick: onRestore,
+            className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90",
+            children: restoreLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-recovery-discard": "",
+            onClick: onDiscard,
+            className: "rounded-md border border-border px-3 py-1 text-xs font-medium hover:bg-muted",
+            children: discardLabel
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/generation/useGenerationPlan.ts
+var import_react36 = require("react");
+var import_generation = require("@pixerate/editor/generation");
+function useGenerationPlan(request, capabilities, options = {}) {
+  const key = JSON.stringify([request, capabilities, options]);
+  return (0, import_react36.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
+}
+function useJobProgress(options) {
+  const { startedAt, expectedMs, done, now, intervalMs = 1e3 } = options;
+  const [tick, setTick] = (0, import_react36.useState)(() => Date.now());
+  const ticking = !done && now === void 0;
+  (0, import_react36.useEffect)(() => {
+    if (!ticking) return;
+    setTick(Date.now());
+    const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));
+    return () => clearInterval(id);
+  }, [ticking, intervalMs]);
+  return (0, import_generation.estimateJobProgress)({ startedAt, expectedMs, done, now: now ?? tick });
+}
+
+// src/generation/GenerationSettings.tsx
+var import_react37 = require("react");
+var import_generation2 = require("@pixerate/editor/generation");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var inputClass = "w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring";
+function Control({
+  control,
+  value,
+  id,
+  onValue
+}) {
+  const shown = value ?? control.defaultValue;
+  if (control.kind === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        "data-field": control.key,
+        checked: Boolean(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.checked))
+      }
+    );
+  }
+  if (control.kind === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "select",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        value: shown === void 0 ? "" : String(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value)),
+        children: [
+          shown === void 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: "", children: "Default" }),
+          control.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: String(option.value), children: option.label }, String(option.value)))
+        ]
+      }
+    );
+  }
+  if (control.kind === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "textarea",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        rows: 2,
+        maxLength: control.maxLength,
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    );
+  }
+  const numeric = typeof shown === "number" ? shown : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "input",
+      {
+        id,
+        type: control.kind === "range" ? "range" : "number",
+        "data-field": control.key,
+        className: control.kind === "range" ? "flex-1" : inputClass,
+        min: control.min,
+        max: control.max,
+        step: control.step ?? "any",
+        value: numeric ?? (control.kind === "range" ? control.min ?? 0 : ""),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    ),
+    control.kind === "range" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-10 text-right tabular-nums text-muted-foreground", "data-field-value": "", children: numeric ?? "\u2013" })
+  ] });
+}
+var GenerationSettings = ({
+  capabilities,
+  value,
+  onChange,
+  plan: planProp,
+  strategy,
+  showAdjustments = true,
+  onAddReference,
+  renderReference,
+  className = ""
+}) => {
+  const baseId = (0, import_react37.useId)();
+  const controls = (0, import_react37.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
+  const computed = useGenerationPlan(value, capabilities, { strategy });
+  const plan = planProp ?? computed;
+  const slots = (0, import_generation2.getReferenceSlots)(capabilities, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `flex flex-col gap-3 text-sm ${className}`, "data-generation-settings": "", "data-model": capabilities.id, children: [
+    controls.map((control) => {
+      const id = `${baseId}-${control.key}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", "data-control": control.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { htmlFor: id, className: "text-xs font-medium text-muted-foreground", title: control.description, children: control.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Control,
+          {
+            control,
+            id,
+            value: (0, import_generation2.getRequestValue)(value, control.key),
+            onValue: (next) => onChange((0, import_generation2.setRequestValue)(value, control.key, next))
+          }
+        )
+      ] }, control.key);
+    }),
+    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "flex flex-col gap-1", "data-reference-role": slot.role, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("legend", { className: "text-xs font-medium text-muted-foreground", title: slot.description, children: [
+        slot.label,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "tabular-nums", "data-reference-count": "", children: [
+          "(",
+          slot.references.length,
+          "/",
+          slot.max,
+          ")"
+        ] }),
+        slot.min > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-destructive", children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("ul", { className: "flex flex-wrap gap-1", children: [
+        slot.references.map((ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5", "data-reference-id": ref.id, children: [
+          renderReference ? renderReference(ref) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "max-w-[10rem] truncate", children: ref.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${slot.label} ${ref.id}`,
+              className: "text-muted-foreground hover:text-foreground",
+              onClick: () => onChange((0, import_generation2.removeReference)(value, slot.role, ref.id)),
+              children: "\xD7"
+            }
+          )
+        ] }, ref.id)),
+        onAddReference && slot.canAdd && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded border border-dashed border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground",
+            onClick: () => onAddReference(slot.role),
+            children: "Add"
+          }
+        ) })
+      ] })
+    ] }, slot.role)),
+    showAdjustments && plan.adjustments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { role: "status", className: "flex flex-col gap-0.5 text-xs text-muted-foreground", "data-generation-adjustments": "", children: plan.adjustments.map((adjustment, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { "data-adjustment-field": adjustment.field, "data-adjustment-kind": adjustment.kind, children: adjustment.reason }, index)) }),
+    showAdjustments && plan.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { role: "alert", className: "flex flex-col gap-0.5 text-xs text-destructive", "data-generation-errors": "", children: plan.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { "data-error-field": error.field, children: error.message }, index)) })
+  ] });
+};
+
+// src/generation/JobProgress.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var JobProgress = ({ title, className = "", ...options }) => {
+  const progress = useJobProgress(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `flex flex-col gap-1 text-sm ${className}`, "data-job-progress": "", "data-done": options.done ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "data-job-progress-label": "", "aria-live": "polite", children: progress.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": title ?? "Generation progress",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": progress.percent,
+        "aria-valuetext": `${progress.percent}%, ${progress.label}`,
+        className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary transition-[width] duration-500",
+            style: { width: `${progress.percent}%`, background: "var(--primary, currentColor)" }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/find-replace/useFindReplace.ts
+var import_react38 = require("react");
+var import_editor14 = require("@pixerate/editor");
+var noopUnsubscribe2 = () => {
+};
+function useFindReplace(editor) {
+  const store = (0, import_editor14.getFindReplaceStore)(editor ?? null);
+  const subscribe = (0, import_react38.useCallback)(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe2,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? import_editor14.EMPTY_FIND_REPLACE_SNAPSHOT;
+  const snapshot = (0, import_react38.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react38.useMemo)(() => {
+    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
+var import_react39 = require("react");
+var import_editor15 = require("@pixerate/editor");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var inputClass2 = "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 = (0, import_react39.useRef)(null);
+  const [moreOpen, setMoreOpen] = (0, import_react39.useState)(false);
+  const visible = find.available && (alwaysOpen || find.open);
+  (0, import_react39.useEffect)(() => {
+    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 = (0, import_editor15.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__ */ (0, import_jsx_runtime23.jsxs)("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          "aria-label": "Toggle replace",
+          "aria-expanded": showReplace,
+          onClick: () => find.show(showReplace ? "find" : "replace"),
+          children: showReplace ? "\u25BE" : "\u25B8"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "input",
+        {
+          ref: findInput,
+          type: "text",
+          className: inputClass2,
+          placeholder: "Find",
+          "aria-label": "Find",
+          "aria-invalid": !!find.error,
+          value: find.query,
+          onChange: (e) => find.setQuery(e.target.value),
+          onKeyDown: onFindKeyDown
+        }
+      ),
+      import_editor15.FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "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__ */ (0, import_jsx_runtime23.jsx)(
+        "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__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: buttonClass3, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: buttonClass3, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
+      showMoreOptions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          "aria-label": "More options",
+          "aria-expanded": moreOpen,
+          onClick: () => setMoreOpen((v) => !v),
+          children: "\u2026"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: buttonClass3, "aria-label": "Close find", onClick: close, children: "\xD7" })
+    ] }),
+    showReplace && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-1 pl-7", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "input",
+        {
+          type: "text",
+          className: inputClass2,
+          placeholder: "Replace",
+          "aria-label": "Replace",
+          value: find.replacement,
+          onChange: (e) => find.setReplacement(e.target.value),
+          onKeyDown: onReplaceKeyDown
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass3,
+          disabled: !hasMatches || find.currentIndex < 0,
+          onClick: find.replace,
+          children: "Replace"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: buttonClass3, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
+      find.lastReplaceCount !== null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
+    ] }),
+    showMoreOptions && moreOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: import_editor15.FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!find.options[t.key],
+          onChange: () => find.toggleOption(t.key)
+        }
+      ),
+      t.label
+    ] }, t.key)) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AdjustmentLayersPanel,
   BubbleMenu,
   CommandPalette,
   CommentButton,
   CommentsPanel,
+  ControlSlider,
+  CurvesEditor,
   DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  FindReplaceBar,
   FormulaHints,
+  GenerationSettings,
+  Histogram,
   HistoryManager,
   ImageEditor,
+  JobProgress,
+  MergePreview,
   OutlinePanel,
+  RecoveryPrompt,
   ReviewToolbar,
   SpreadsheetContextMenu,
   SpreadsheetEditor,
@@ -4091,18 +5317,25 @@ function useRegisterCommands(registry, specs) {
   createHistoryManager,
   defaultIsEqual,
   useAgentToolProvider,
+  useAutosave,
   useCommandPalette,
   useCommandShortcuts,
   useComments,
   useDismissGuard,
+  useDocumentCompare,
   useEditor,
   useEditorSlots,
   useFileImport,
   useFillHandle,
+  useFindReplace,
+  useGenerationPlan,
   useHistory,
   useHistoryDirty,
   useHistoryShortcuts,
   useImageEditor,
+  useImageHistogram,
+  useJobProgress,
+  useMergePreview,
   useNavigationGuard,
   useOutline,
   usePromptEditor,