@pixerate/editor-react 0.10.5 → 0.12.0

package/dist/index.cjs

@@ -31,25 +31,40 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   BubbleMenu: () => BubbleMenu,
-  DirtyTracker: () => import_editor7.DirtyTracker,
+  CommentButton: () => CommentButton,
+  CommentsPanel: () => CommentsPanel,
+  DirtyTracker: () => import_editor15.DirtyTracker,
   EditorContent: () => EditorContent,
   EditorSlotsProvider: () => EditorSlotsProvider,
-  HistoryManager: () => import_editor7.HistoryManager,
+  FormulaHints: () => FormulaHints,
+  HistoryManager: () => import_editor15.HistoryManager,
   ImageEditor: () => ImageEditor,
+  OutlinePanel: () => OutlinePanel,
+  ReviewToolbar: () => ReviewToolbar,
+  SpreadsheetContextMenu: () => SpreadsheetContextMenu,
   SpreadsheetEditor: () => SpreadsheetEditor,
+  SpreadsheetGroupRow: () => SpreadsheetGroupRow,
   TemplateRenderer: () => TemplateRenderer,
-  createDirtyTracker: () => import_editor7.createDirtyTracker,
-  createHistoryManager: () => import_editor7.createHistoryManager,
-  defaultIsEqual: () => import_editor7.defaultIsEqual,
+  VariableForm: () => VariableForm,
+  createDirtyTracker: () => import_editor15.createDirtyTracker,
+  createHistoryManager: () => import_editor15.createHistoryManager,
+  defaultIsEqual: () => import_editor15.defaultIsEqual,
+  useAgentToolProvider: () => useAgentToolProvider,
+  useComments: () => useComments,
   useDismissGuard: () => useDismissGuard,
   useEditor: () => useEditor2,
   useEditorSlots: () => useEditorSlots,
+  useFileImport: () => useFileImport,
+  useFillHandle: () => useFillHandle,
   useHistory: () => useHistory,
   useHistoryShortcuts: () => useHistoryShortcuts,
   useImageEditor: () => useImageEditor,
   useNavigationGuard: () => useNavigationGuard,
+  useOutline: () => useOutline,
   usePromptEditor: () => usePromptEditor,
-  useSpreadsheetEditor: () => useSpreadsheetEditor
+  useSpreadsheetClipboard: () => useSpreadsheetClipboard,
+  useSpreadsheetEditor: () => useSpreadsheetEditor,
+  useTrackChanges: () => useTrackChanges
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -83,8 +98,12 @@ function usePromptEditor({
   onMilestone,
   containerId = "editor-container",
   jsonVariables,
-  speed = 2
+  speed = 2,
+  fileImport
 }) {
+  const fileImportRef = (0, import_react.useRef)(fileImport);
+  fileImportRef.current = fileImport;
+  const fileImportEnabled = !!fileImport;
   const slashCommandActiveRef = (0, import_react.useRef)(slashCommandActive);
   slashCommandActiveRef.current = slashCommandActive;
   const clearSlashCommandRef = (0, import_react.useRef)(clearSlashCommand);
@@ -139,7 +158,14 @@ function usePromptEditor({
         import_editor.TemplateSuggestions.configure({
           templates
         }),
-        import_editor.LoadingNode
+        import_editor.LoadingNode,
+        ...fileImportEnabled ? [
+          import_editor.FileImport.configure({
+            ...typeof fileImportRef.current === "object" ? fileImportRef.current : {},
+            // Prompt editors only ever receive plain text.
+            asPlainText: true
+          })
+        ] : []
       ],
       content: (0, import_editor.plainTextToTipTapHtml)(content),
       onUpdate: ({ editor: ed }) => {
@@ -236,7 +262,7 @@ function usePromptEditor({
     },
     // Only options baked into extensions recreate the editor; editable state,
     // placeholder, class names and content are applied to the live instance.
-    [resolvedColorMap, templateKey, speed, jsonVariablesKey]
+    [resolvedColorMap, templateKey, speed, jsonVariablesKey, fileImportEnabled]
   );
   (0, import_react.useEffect)(() => {
     if (editor && !editor.isDestroyed) {
@@ -284,8 +310,18 @@ function usePromptEditor({
 var import_react3 = require("@tiptap/react");
 var import_editor2 = require("@pixerate/editor");
 function useEditor2(options = {}) {
-  const { richTextOptions, extensions = [], ...editorOptions } = options;
-  const preset = (0, import_editor2.createRichTextPreset)(richTextOptions);
+  const {
+    richTextOptions,
+    fileImport,
+    richClipboard,
+    extensions = [],
+    ...editorOptions
+  } = options;
+  const preset = (0, import_editor2.createRichTextPreset)({
+    ...fileImport !== void 0 ? { fileImport } : {},
+    ...richClipboard !== void 0 ? { richClipboard } : {},
+    ...richTextOptions
+  });
   const combinedExtensions = [...preset, ...extensions];
   return (0, import_react3.useEditor)({
     extensions: combinedExtensions,
@@ -512,19 +548,53 @@ function useHistoryShortcuts(manager, options = {}) {
   }, [manager, enabled, target, ignoreEditableElements]);
 }
 
+// src/hooks/useFileImport.ts
+var import_react8 = require("react");
+var import_editor4 = require("@pixerate/editor");
+function useFileImport(editor, options = {}) {
+  const editorRef = (0, import_react8.useRef)(editor);
+  editorRef.current = editor;
+  const controller = (0, import_react8.useMemo)(
+    () => new import_editor4.FileImportController(() => {
+      const current = editorRef.current;
+      return current && !current.isDestroyed ? current : null;
+    }, options),
+    []
+  );
+  (0, import_react8.useEffect)(() => {
+    controller.setOptions(options);
+  });
+  const state = (0, import_react8.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return {
+    ...state,
+    accept: controller.accept,
+    openFilePicker: controller.openFilePicker,
+    importFiles: controller.importFiles
+  };
+}
+
+// src/hooks/useAgentToolProvider.ts
+var import_react9 = require("react");
+function useAgentToolProvider(registry, provider) {
+  (0, import_react9.useEffect)(() => {
+    if (!registry || !provider) return;
+    return registry.register(provider);
+  }, [registry, provider]);
+}
+
 // src/components/EditorContent.tsx
-var import_react8 = require("@tiptap/react");
+var import_react10 = require("@tiptap/react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var EditorContent = ({
   className,
   editor,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react8.EditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react10.EditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_react_dom = require("react-dom");
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
 var BubbleMenu = ({
@@ -536,12 +606,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = (0, import_react9.useRef)(null);
-  const [mounted, setMounted] = (0, import_react9.useState)(false);
+  const menuEl = (0, import_react11.useRef)(null);
+  const [mounted, setMounted] = (0, import_react11.useState)(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -572,25 +642,28 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-var import_react10 = require("react");
-var import_editor4 = require("@pixerate/editor");
+var import_react12 = require("react");
+var import_editor5 = require("@pixerate/editor");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" };
 var TemplateRenderer = ({
   content,
   templates = [],
   templateColorMap,
   resolve = false,
+  bindings,
+  values,
   className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = (0, import_react10.useMemo)(() => {
+  const displayText = (0, import_react12.useMemo)(() => {
     if (!resolve || templates.length === 0) return content;
-    return (0, import_editor4.resolveTemplates)(content, templates);
-  }, [content, templates, resolve]);
-  const tokens = (0, import_react10.useMemo)(() => {
-    return (0, import_editor4.tokenizePrompt)(displayText);
-  }, [displayText]);
+    return (0, import_editor5.resolveTemplates)(content, templates, { bindings });
+  }, [content, templates, resolve, bindings]);
+  const tokens = (0, import_react12.useMemo)(() => {
+    return (0, import_editor5.evaluatePromptTokens)(displayText, values);
+  }, [displayText, values]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
       const colors = templateColorMap?.get(token.value) || {
@@ -614,13 +687,49 @@ var TemplateRenderer = ({
       );
     }
     if (token.type === "variable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      const details = [
+        `Variable: ${token.value}`,
+        token.description,
+        token.defaultValue !== void 0 ? `Default: ${token.defaultValue || "(empty)"}` : void 0
+      ].filter(Boolean).join("\n");
+      if (token.resolvedValue !== void 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            onClick: () => onVariableClick?.(token.value),
+            "data-variable": token.value,
+            "data-value-source": token.valueSource,
+            className: token.valueSource === "value" ? "inline px-1 mx-0.5 rounded-md bg-emerald-400/15 text-emerald-700 dark:text-emerald-300 border-b border-emerald-400/60 cursor-pointer" : "inline px-1 mx-0.5 rounded-md bg-violet-400/10 text-violet-600 dark:text-violet-300 italic border-b border-dashed border-violet-400/60 cursor-pointer",
+            title: details,
+            children: token.resolvedValue
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "span",
         {
           onClick: () => onVariableClick?.(token.value),
+          "data-variable": token.value,
           className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all",
-          title: `Variable: ${token.value}`,
-          children: `{${token.value}}`
+          title: details,
+          children: [
+            `{${token.value}`,
+            token.defaultValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "opacity-60", children: `|${token.defaultValue}` }),
+            "}"
+          ]
+        },
+        index
+      );
+    }
+    if (token.type === "conditional" && token.conditional) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          "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}}`
         },
         index
       );
@@ -640,18 +749,152 @@ var TemplateRenderer = ({
   }) });
 };
 
-// src/index.ts
+// src/components/VariableForm.tsx
+var import_react13 = require("react");
+var import_editor6 = require("@pixerate/editor");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var VariableForm = ({
+  content,
+  templates,
+  bindings,
+  values,
+  defaultValues,
+  onChange,
+  className = "flex flex-col gap-3 text-sm"
+}) => {
+  const idPrefix = (0, import_react13.useId)();
+  const [internal, setInternal] = (0, import_react13.useState)(
+    () => defaultValues ?? {}
+  );
+  const entered = values ?? internal;
+  const fields = (0, import_react13.useMemo)(
+    () => (0, import_editor6.getVariableFormFields)(content, { templates, bindings }),
+    [content, templates, bindings]
+  );
+  const update = (name, value) => {
+    const next = { ...entered, [name]: value };
+    if (values === void 0) setInternal(next);
+    onChange?.((0, import_editor6.compactVariableValues)(next), next);
+  };
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { className, onSubmit: (event) => event.preventDefault(), children: fields.map((field) => {
+    const id = `${idPrefix}-${field.name}`;
+    if (field.conditionOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "label",
+        {
+          htmlFor: id,
+          className: "flex items-center gap-2",
+          "data-variable-field": field.name,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                id,
+                name: field.name,
+                type: "checkbox",
+                checked: (entered[field.name] ?? "") !== "",
+                onChange: (event) => update(field.name, event.target.checked ? "true" : "")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.label })
+          ]
+        },
+        field.name
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "label",
+      {
+        htmlFor: id,
+        className: "flex flex-col gap-1",
+        "data-variable-field": field.name,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "font-medium", children: [
+            field.label,
+            field.required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-rose-500", "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              id,
+              name: field.name,
+              type: "text",
+              value: entered[field.name] ?? "",
+              placeholder: field.placeholder,
+              "aria-required": field.required || void 0,
+              onChange: (event) => update(field.name, event.target.value),
+              className: "px-2 py-1 rounded-md border border-violet-400/40 bg-transparent"
+            }
+          )
+        ]
+      },
+      field.name
+    );
+  }) });
+};
+
+// src/hooks/useOutline.ts
+var import_react14 = require("react");
 var import_editor7 = require("@pixerate/editor");
+function useOutline(editor) {
+  const store = (0, import_react14.useMemo)(() => (0, import_editor7.createOutlineStore)(editor), [editor]);
+  return (0, import_react14.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+
+// src/components/OutlinePanel.tsx
+var import_editor8 = require("@pixerate/editor");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var OutlinePanel = ({
+  editor,
+  title = "Outline",
+  emptyState = "Add headings to see the outline.",
+  maxLevel = 6,
+  focusOnNavigate = true,
+  className = "flex flex-col gap-1 text-sm",
+  itemClassName = "w-full truncate rounded px-2 py-1 text-left hover:bg-black/5",
+  activeItemClassName = "font-semibold bg-black/5",
+  onNavigate
+}) => {
+  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) => {
+      const active = heading.id === activeId;
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { "data-level": heading.level, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+          style: { paddingLeft: `${0.5 + heading.depth * 0.75}rem` },
+          "aria-current": active ? "location" : void 0,
+          "data-heading-id": heading.id,
+          onClick: () => {
+            if (!editor) return;
+            if ((0, import_editor8.navigateToHeading)(editor, heading, { focus: focusOnNavigate })) {
+              onNavigate?.(heading);
+            }
+          },
+          children: heading.text || "Untitled"
+        }
+      ) }, heading.id);
+    }) })
+  ] });
+};
+
+// src/index.ts
+var import_editor15 = require("@pixerate/editor");
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react11 = require("react");
-var import_editor5 = require("@pixerate/editor");
+var import_react15 = require("react");
+var import_editor9 = require("@pixerate/editor");
 function useSpreadsheetEditor(options = {}) {
-  const optionsRef = (0, import_react11.useRef)(options);
+  const optionsRef = (0, import_react15.useRef)(options);
   optionsRef.current = options;
-  const settersRef = (0, import_react11.useRef)({});
-  const [controller] = (0, import_react11.useState)(
-    () => new import_editor5.SpreadsheetController({
+  const settersRef = (0, import_react15.useRef)({});
+  const [controller] = (0, import_react15.useState)(
+    () => new import_editor9.SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
         settersRef.current.setDoc?.({ ...updated });
@@ -667,91 +910,93 @@ function useSpreadsheetEditor(options = {}) {
       }
     })
   );
-  const [doc, setDoc] = (0, import_react11.useState)(() => ({ ...controller.document }));
-  const [activeCell, setActiveCell] = (0, import_react11.useState)(controller.activeCell);
-  const [selectedRange, setSelectedRange] = (0, import_react11.useState)(controller.selectedRange);
-  const [editingCell, setEditingCell] = (0, import_react11.useState)(null);
-  const [draftValue, setDraftValue] = (0, import_react11.useState)("");
+  const [doc, setDoc] = (0, import_react15.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react15.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react15.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react15.useState)(null);
+  const [draftValue, setDraftValue] = (0, import_react15.useState)("");
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
-  const setCellValue = (0, import_react11.useCallback)((rowId, colId, raw) => {
+  const setCellValue = (0, import_react15.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react11.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react15.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react11.useCallback)((range) => {
+  const selectRange = (0, import_react15.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react11.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react15.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react11.useCallback)((val) => {
+  const commitEditing = (0, import_react15.useCallback)((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = (0, import_react11.useCallback)(() => {
+  const cancelEditing = (0, import_react15.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react11.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react15.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react11.useCallback)((index, config) => {
+  const insertColumn = (0, import_react15.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react11.useCallback)((colId) => {
+  const deleteColumn = (0, import_react15.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react11.useCallback)((index, config) => {
+  const insertRow = (0, import_react15.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react11.useCallback)((rowId) => {
+  const deleteRow = (0, import_react15.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react11.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react15.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react11.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react15.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react11.useCallback)((ds) => {
+  const registerDataSource = (0, import_react15.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react11.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react15.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react11.useCallback)(() => {
+  const recalculateAll = (0, import_react15.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react11.useCallback)(() => {
+  const undo = (0, import_react15.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = (0, import_react11.useCallback)(() => {
+  const redo = (0, import_react15.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
+  const tableActions = (0, import_react15.useMemo)(() => (0, import_editor9.bindSpreadsheetTableActions)(controller), [controller]);
+  const viewModel = (0, import_react15.useMemo)(() => controller.getViewModel(), [controller, doc]);
   return {
     document: doc,
     activeCell,
@@ -795,15 +1040,355 @@ function useSpreadsheetEditor(options = {}) {
       controller.importFromTsv(data);
       setDoc({ ...controller.document });
     },
+    ...tableActions,
+    viewModel,
     undo,
     redo
   };
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react12 = require("react");
-var import_editor6 = require("@pixerate/editor");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_editor12 = require("@pixerate/editor");
+
+// src/spreadsheet/SpreadsheetContextMenu.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
+  const menuRef = (0, import_react16.useRef)(null);
+  const onCloseRef = (0, import_react16.useRef)(onClose);
+  onCloseRef.current = onClose;
+  (0, import_react16.useEffect)(() => {
+    const handlePointer = (e) => {
+      if (!menuRef.current?.contains(e.target)) onCloseRef.current();
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") onCloseRef.current();
+    };
+    window.addEventListener("mousedown", handlePointer);
+    window.addEventListener("keydown", handleKey);
+    return () => {
+      window.removeEventListener("mousedown", handlePointer);
+      window.removeEventListener("keydown", handleKey);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      role: "menu",
+      "aria-label": "Table actions",
+      className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
+      style: { left: x, top: y, background: "var(--popover, var(--background, #fff))" },
+      onContextMenu: (e) => e.preventDefault(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react16.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)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            "data-action": item.id,
+            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",
+            onClick: () => {
+              onClose();
+              item.run();
+            },
+            children: item.label
+          }
+        )
+      ] }, item.id))
+    }
+  );
+};
+
+// src/spreadsheet/SpreadsheetGroupRow.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var formatSummary = (value) => value === null ? "\u2013" : String(value);
+var SpreadsheetGroupRow = ({
+  group,
+  columns,
+  groupColId,
+  onToggle,
+  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/60 border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": `${group.collapsed ? "Expand" : "Collapse"} group ${group.label}`,
+        "aria-expanded": !group.collapsed,
+        className: "h-5 w-5 rounded text-[10px] text-muted-foreground hover:bg-muted",
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggle(group.key);
+        },
+        children: group.collapsed ? "\u25B8" : "\u25BE"
+      }
+    ) }),
+    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: [
+        group.label,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.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);
+    }),
+    trailingCell && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
+  ] });
+};
+
+// src/spreadsheet/useSpreadsheetTableInteractions.ts
+var import_react17 = require("react");
+var import_editor10 = require("@pixerate/editor");
+function gridHasFocus(grid) {
+  if (!grid || typeof document === "undefined") return false;
+  const active = document.activeElement;
+  if (!active || !grid.contains(active)) return false;
+  return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
+}
+function useSpreadsheetClipboard(gridRef, state, readOnly) {
+  const stateRef = (0, import_react17.useRef)(state);
+  stateRef.current = state;
+  const readOnlyRef = (0, import_react17.useRef)(readOnly);
+  readOnlyRef.current = readOnly;
+  const copiedRef = (0, import_react17.useRef)(false);
+  (0, import_react17.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const handleCopy = (e) => {
+      const s = stateRef.current;
+      if (!gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData || !s.selectedRange) return;
+      for (const [type, data] of Object.entries(s.copyToClipboardData(s.selectedRange))) {
+        e.clipboardData.setData(type, data);
+      }
+      copiedRef.current = true;
+      e.preventDefault();
+    };
+    const handlePaste = (e) => {
+      const s = stateRef.current;
+      if (readOnlyRef.current || !gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData) return;
+      if (s.pasteClipboardData(e.clipboardData)) e.preventDefault();
+    };
+    document.addEventListener("copy", handleCopy);
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("copy", handleCopy);
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, [gridRef]);
+  const copyShortcutFallback = (0, import_react17.useCallback)(() => {
+    copiedRef.current = false;
+    setTimeout(() => {
+      if (copiedRef.current) return;
+      const s = stateRef.current;
+      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
+    }, 0);
+  }, []);
+  return { copyShortcutFallback };
+}
+function useFillHandle(state) {
+  const [drag, setDrag] = (0, import_react17.useState)(null);
+  const dragRef = (0, import_react17.useRef)(drag);
+  dragRef.current = drag;
+  const stateRef = (0, import_react17.useRef)(state);
+  stateRef.current = state;
+  const dragging = drag !== null;
+  (0, import_react17.useEffect)(() => {
+    if (!dragging) return;
+    const handleMouseUp = () => {
+      const current = dragRef.current;
+      setDrag(null);
+      if (current?.target) stateRef.current.autofill(current.source, current.target);
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, [dragging]);
+  const startFill = (0, import_react17.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const range = stateRef.current.selectedRange;
+    if (range) setDrag({ source: (0, import_editor10.normalizeRange)(range), target: null });
+  }, []);
+  const extendFill = (0, import_react17.useCallback)((row, col) => {
+    const current = dragRef.current;
+    if (!current) return;
+    setDrag({ source: current.source, target: (0, import_editor10.computeFillTarget)(current.source, { row, col }) });
+  }, []);
+  return { fillTarget: drag?.target ?? null, isFilling: dragging, startFill, extendFill };
+}
+
+// src/spreadsheet/FormulaHints.tsx
+var import_react18 = require("react");
+var import_editor11 = require("@pixerate/editor");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
+  const [caret, setCaret] = (0, import_react18.useState)(null);
+  const [focused, setFocused] = (0, import_react18.useState)(false);
+  const [selected, setSelected] = (0, import_react18.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react18.useState)(false);
+  const [position, setPosition] = (0, import_react18.useState)(null);
+  const pendingCaret = (0, import_react18.useRef)(null);
+  const hints = (0, import_react18.useMemo)(
+    () => (0, import_editor11.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_react18.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;
+    const suggestion = list[index];
+    if (!suggestion) return;
+    const next = (0, import_editor11.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
+    pendingCaret.current = next.caret;
+    commit(next.value);
+  };
+  (0, import_react18.useEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
+    const onInput = () => {
+      setDismissed(false);
+      setSelected(0);
+      syncCaret();
+    };
+    const onFocus = () => {
+      setFocused(true);
+      syncCaret();
+    };
+    const onBlur = () => setFocused(false);
+    const onKeyDown = (e) => {
+      const { suggestions: list } = latest.current;
+      if (list.length === 0) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        e.stopPropagation();
+        const step = e.key === "ArrowDown" ? 1 : -1;
+        setSelected((i) => (i + step + list.length) % list.length);
+      } else if (e.key === "Tab" && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        accept(latest.current.selected);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setDismissed(true);
+      }
+    };
+    input.addEventListener("input", onInput);
+    input.addEventListener("keyup", syncCaret);
+    input.addEventListener("click", syncCaret);
+    input.addEventListener("select", syncCaret);
+    input.addEventListener("focus", onFocus);
+    input.addEventListener("blur", onBlur);
+    input.addEventListener("keydown", onKeyDown);
+    if (typeof document !== "undefined" && document.activeElement === input) onFocus();
+    return () => {
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("keyup", syncCaret);
+      input.removeEventListener("click", syncCaret);
+      input.removeEventListener("select", syncCaret);
+      input.removeEventListener("focus", onFocus);
+      input.removeEventListener("blur", onBlur);
+      input.removeEventListener("keydown", onKeyDown);
+    };
+  }, [inputRef]);
+  (0, import_react18.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    const at = pendingCaret.current;
+    if (!input || at === null || input.value !== value) return;
+    pendingCaret.current = null;
+    input.setSelectionRange(at, at);
+    setCaret(at);
+    setSelected(0);
+  }, [value, inputRef]);
+  (0, import_react18.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    if (!visible || !input) return;
+    const rect = input.getBoundingClientRect();
+    setPosition({ top: rect.bottom + 2, left: rect.left, width: rect.width });
+  }, [visible, value, inputRef]);
+  if (!visible) return null;
+  const { activeCall } = hints;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      "data-formula-hints": "",
+      className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs font-sans overflow-hidden",
+      style: {
+        position: "fixed",
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        minWidth: Math.max(260, position?.width ?? 0),
+        maxWidth: 440,
+        zIndex: 50,
+        visibility: position ? "visible" : "hidden"
+      },
+      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)(
+            "span",
+            {
+              "data-active": part.active ? "" : void 0,
+              className: part.active ? "font-bold text-primary underline" : "",
+              children: part.text
+            },
+            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 }),
+            ": ",
+            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)(
+          "li",
+          {
+            role: "option",
+            "aria-selected": i === selectedIndex,
+            className: `cursor-pointer px-2 py-1 ${i === selectedIndex ? "bg-primary/10" : "hover:bg-muted/50"}`,
+            onMouseEnter: () => setSelected(i),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              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 })
+            ]
+          },
+          s.name
+        )) })
+      ]
+    }
+  );
+};
+
+// src/spreadsheet/SpreadsheetEditor.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var COLUMN_HEADER_HEIGHT = 28;
+var ROW_HEADER_WIDTH = 48;
+function frozenCellStyle(viewRow, viewCol) {
+  if (!viewRow.frozen && !viewCol.frozen) return void 0;
+  return {
+    position: "sticky",
+    ...viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop } : {},
+    ...viewCol.frozen ? { left: ROW_HEADER_WIDTH + viewCol.stickyLeft } : {},
+    zIndex: viewRow.frozen && viewCol.frozen ? 14 : viewRow.frozen ? 12 : 11,
+    background: "var(--background, #fff)"
+  };
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -814,27 +1399,47 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react12.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react12.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react12.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react12.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react12.useState)(0);
-  const activeRawValue = (0, import_react12.useMemo)(() => {
+  const gridRef = (0, import_react19.useRef)(null);
+  const formulaBarRef = (0, import_react19.useRef)(null);
+  const cellInputRef = (0, import_react19.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react19.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react19.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react19.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react19.useState)(0);
+  const view = state.viewModel;
+  const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
+  const { fillTarget, startFill, extendFill } = useFillHandle(state);
+  const [menu, setMenu] = (0, import_react19.useState)(null);
+  const filter = state.document.table?.filter;
+  const filteredColIds = (0, import_react19.useMemo)(
+    () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
+    [filter]
+  );
+  const handleCellContextMenu = (0, import_react19.useCallback)((rIdx, cIdx, e) => {
+    if (readOnly) return;
+    e.preventDefault();
+    if (state.editingCell) state.commitEditing();
+    if (!state.selectedRange || !(0, import_editor12.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+      state.selectCell(rIdx, cIdx);
+    }
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_editor12.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+  }, [readOnly, state]);
+  const activeRawValue = (0, import_react19.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 coordLabel = (0, import_react12.useMemo)(() => {
+  const coordLabel = (0, import_react19.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_editor6.indexToColName)(state.activeCell.col);
+    const colName = (0, import_editor12.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react12.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react19.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -850,19 +1455,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react12.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react19.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_react12.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react19.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_react12.useCallback)((e) => {
+  const handleKeyDown = (0, import_react19.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -919,21 +1524,19 @@ var SpreadsheetEditor = ({
       e.preventDefault();
       state.redo();
     } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
-      e.preventDefault();
-      const tsv = state.exportToTsv(state.selectedRange);
-      navigator.clipboard?.writeText(tsv);
+      copyShortcutFallback();
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
       if (!col?.readOnly) {
         state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
       }
     }
-  }, [readOnly, state]);
-  const stateRef = (0, import_react12.useRef)(state);
+  }, [readOnly, state, copyShortcutFallback]);
+  const stateRef = (0, import_react19.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react12.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react19.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -984,7 +1587,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react12.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react19.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -1032,15 +1635,14 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react12.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react19.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
     if (gridRef.current && typeof document !== "undefined") {
       const table = gridRef.current.querySelector("table");
       if (table) {
-        const thElements = table.querySelectorAll("thead th");
-        const th = thElements[colIndex + 1];
+        const th = table.querySelector(`thead th[data-col="${colIndex}"]`);
         if (th) {
           const headerInner = th.firstElementChild || th;
           const headerW = measureElementContentWidth(headerInner, gridRef.current);
@@ -1050,7 +1652,7 @@ var SpreadsheetEditor = ({
         const sampleLimit = Math.min(rows.length, 150);
         for (let r = 0; r < sampleLimit; r++) {
           const tr = rows[r];
-          const td = tr.children[colIndex + 1];
+          const td = tr.querySelector(`td[data-col="${colIndex}"][colspan="1"]`);
           if (td) {
             const cellW = measureElementContentWidth(td, gridRef.current);
             calculatedWidth = Math.max(calculatedWidth, cellW + 20);
@@ -1069,12 +1671,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react12.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react19.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react12.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react19.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1096,7 +1698,7 @@ var SpreadsheetEditor = ({
   const isActiveCell = (rIdx, cIdx) => {
     return state.activeCell?.row === rIdx && state.activeCell?.col === cIdx;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ref: gridRef,
@@ -1106,12 +1708,13 @@ var SpreadsheetEditor = ({
       role: "grid",
       "aria-label": "Spreadsheet",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsx)("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__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)(
             "input",
             {
+              ref: formulaBarRef,
               type: "text",
               className: "flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded",
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
@@ -1141,28 +1744,44 @@ var SpreadsheetEditor = ({
                 }
               }
             }
+          ),
+          !formulaBarReadOnly && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            FormulaHints,
+            {
+              inputRef: formulaBarRef,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              onAccept: (next) => state.editingCell ? state.setDraftValue(next) : setFormulaDraft(next)
+            }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
-            state.document.columns.map((col, cIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__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/60 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/90 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)(
               "th",
               {
+                "data-col": cIdx,
                 className: `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`,
-                style: { width: col.width || 130, minWidth: col.width || 130, maxWidth: col.width || 130, overflow: "hidden" },
+                style: {
+                  width: col.width || 130,
+                  minWidth: col.width || 130,
+                  maxWidth: col.width || 130,
+                  overflow: "hidden",
+                  ...frozen ? { position: "sticky", left: ROW_HEADER_WIDTH + stickyLeft, zIndex: 25, background: "var(--muted, #f4f4f5)" } : {}
+                },
                 onClick: () => onColumnHeaderClick?.(col),
                 onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", 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: [
                       "(",
                       col.key,
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "div",
                     {
                       className: "col-resize-handle",
@@ -1179,7 +1798,7 @@ var SpreadsheetEditor = ({
                       onDoubleClick: (e) => handleResizeDblClick(col.id, cIdx, e),
                       role: "separator",
                       "aria-orientation": "vertical",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "div",
                         {
                           className: "col-resize-handle-line",
@@ -1198,49 +1817,136 @@ var SpreadsheetEditor = ({
               },
               col.id
             )),
-            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime3.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: state.document.rows.map((row, rIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "border-b border-border hover:bg-muted/10 transition-colors", style: { height: row.height || 32 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none", children: rIdx + 1 }),
-            state.document.columns.map((col, cIdx) => {
-              const cell = state.getCell(row.id, col.id);
-              const selected = isCellSelected(rIdx, cIdx);
-              const active = isActiveCell(rIdx, cIdx);
-              const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
-              return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "td",
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: view.rows.map((viewRow) => {
+            if (viewRow.kind === "group") {
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                SpreadsheetGroupRow,
                 {
-                  className: `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${selected ? "bg-primary/10" : ""} ${active ? "ring-2 ring-primary ring-inset z-10" : ""}`,
-                  style: { maxWidth: 0, overflow: "hidden" },
-                  onClick: (e) => handleCellClick(rIdx, cIdx, e),
-                  onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
-                  children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "input",
-                    {
-                      type: "text",
-                      className: "absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20",
-                      value: state.draftValue,
-                      onChange: (e) => state.setDraftValue(e.target.value),
-                      onBlur: () => state.commitEditing(),
-                      autoFocus: true
-                    }
-                  ) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`, children: cell.error || (cell.value ?? "") })
+                  group: viewRow.group,
+                  columns: view.columns,
+                  groupColId: state.document.table?.grouping?.colId ?? "",
+                  onToggle: state.toggleGroupCollapsed,
+                  trailingCell: !!onAddColumnClick
                 },
-                col.id
+                `group:${viewRow.group.key}`
               );
-            }),
-            onAddColumnClick && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
-          ] }, row.id)) })
+            }
+            const displayRowIndex = viewRow.index;
+            const selection = state.selectedRange ? (0, import_editor12.normalizeRange)(state.selectedRange) : null;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+                    "td",
+                    {
+                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
+                      style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
+                      children: displayRowIndex + 1
+                    }
+                  ),
+                  view.columns.map((viewCol) => {
+                    const span = view.getCellSpan(displayRowIndex, viewCol.index);
+                    if (!span) return null;
+                    const rIdx = span.source.row;
+                    const cIdx = span.source.col;
+                    const row = state.document.rows[rIdx];
+                    const col = state.document.columns[cIdx];
+                    const cell = state.getCell(row.id, col.id);
+                    const selected = isCellSelected(rIdx, cIdx);
+                    const active = isActiveCell(rIdx, cIdx);
+                    const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
+                    const inFillPreview = !!fillTarget && !selected && (0, import_editor12.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_editor12.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      "td",
+                      {
+                        "data-row": rIdx,
+                        "data-col": cIdx,
+                        rowSpan: span.rowSpan,
+                        colSpan: span.colSpan,
+                        className: `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${selected ? "bg-primary/10" : ""} ${active ? "ring-2 ring-primary ring-inset z-10" : ""} ${viewCol.header ? "font-semibold" : ""}`,
+                        style: {
+                          maxWidth: 0,
+                          overflow: "hidden",
+                          ...frozenCellStyle(viewRow, viewCol),
+                          ...inFillPreview ? { outline: "1px dashed var(--primary, #6366f1)", outlineOffset: -1 } : {}
+                        },
+                        onClick: (e) => handleCellClick(rIdx, cIdx, e),
+                        onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
+                        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)(
+                              "input",
+                              {
+                                ref: cellInputRef,
+                                type: "text",
+                                className: "absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20",
+                                value: state.draftValue,
+                                onChange: (e) => state.setDraftValue(e.target.value),
+                                onBlur: () => state.commitEditing(),
+                                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: cell.error || (cell.value ?? "")
+                            }
+                          ),
+                          showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                            "div",
+                            {
+                              className: "spreadsheet-fill-handle",
+                              "aria-label": "Fill handle",
+                              onMouseDown: startFill,
+                              onClick: (e) => e.stopPropagation(),
+                              style: { position: "absolute", right: 0, bottom: 0, width: 7, height: 7, background: "var(--primary, #6366f1)", cursor: "crosshair", zIndex: 25 }
+                            }
+                          )
+                        ]
+                      },
+                      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" })
+                ]
+              },
+              viewRow.row.id
+            );
+          }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+        menu && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          SpreadsheetContextMenu,
+          {
+            items: menu.items,
+            x: menu.x,
+            y: menu.y,
+            onClose: () => {
+              setMenu(null);
+              gridRef.current?.focus();
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `
         .col-resize-handle:hover .col-resize-handle-line {
           background-color: var(--primary, #6366f1);
           opacity: 0.75;
@@ -1263,10 +1969,10 @@ var SpreadsheetEditor = ({
 };
 
 // src/slots.tsx
-var import_react13 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       type: "button",
@@ -1276,107 +1982,111 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", 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: [
       props.icon,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+    props.onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
-var EditorSlotsContext = (0, import_react13.createContext)(defaultSlots);
+var EditorSlotsContext = (0, import_react20.createContext)(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = (0, import_react13.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
+  const mergedSlots = (0, import_react20.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
-  return (0, import_react13.useContext)(EditorSlotsContext);
+  return (0, import_react20.useContext)(EditorSlotsContext);
 }
 
 // src/image-editor/useImageEditor.ts
-var import_react14 = require("react");
+var import_react21 = require("react");
 var import_image_editor = require("@pixerate/editor/image-editor");
 function useImageEditor(options = {}) {
-  const controllerRef = (0, import_react14.useRef)(null);
+  const controllerRef = (0, import_react21.useRef)(null);
   if (!controllerRef.current) {
     controllerRef.current = new import_image_editor.ImageEditorController(options);
   }
   const controller = controllerRef.current;
-  const [state, setState] = (0, import_react14.useState)(() => controller.getState());
-  const [historyTicks, setHistoryTicks] = (0, import_react14.useState)(0);
-  (0, import_react14.useEffect)(() => {
+  const [state, setState] = (0, import_react21.useState)(() => controller.getState());
+  const [historyTicks, setHistoryTicks] = (0, import_react21.useState)(0);
+  (0, import_react21.useEffect)(() => {
     const unsub = controller.subscribe((next) => {
       setState(next);
       setHistoryTicks((t) => t + 1);
     });
     return unsub;
   }, [controller]);
-  const loadedImageRef = (0, import_react14.useRef)(options.image);
-  (0, import_react14.useEffect)(() => {
+  const loadedImageRef = (0, import_react21.useRef)(options.image);
+  (0, import_react21.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_react14.useCallback)((tool) => controller.setTool(tool), [controller]);
-  const setCrop = (0, import_react14.useCallback)(
+  const setTool = (0, import_react21.useCallback)((tool) => controller.setTool(tool), [controller]);
+  const setCrop = (0, import_react21.useCallback)(
     (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),
     [controller]
   );
-  const applyCropPreset = (0, import_react14.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
-  const resetCrop = (0, import_react14.useCallback)(() => controller.resetCrop(), [controller]);
-  const rotate = (0, import_react14.useCallback)((deg) => controller.rotate(deg), [controller]);
-  const setRotation = (0, import_react14.useCallback)((deg) => controller.setRotation(deg), [controller]);
-  const flipHorizontal = (0, import_react14.useCallback)(() => controller.flipHorizontal(), [controller]);
-  const flipVertical = (0, import_react14.useCallback)(() => controller.flipVertical(), [controller]);
-  const setAdjustments = (0, import_react14.useCallback)(
+  const applyCropPreset = (0, import_react21.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
+  const resetCrop = (0, import_react21.useCallback)(() => controller.resetCrop(), [controller]);
+  const rotate = (0, import_react21.useCallback)((deg) => controller.rotate(deg), [controller]);
+  const setRotation = (0, import_react21.useCallback)((deg) => controller.setRotation(deg), [controller]);
+  const flipHorizontal = (0, import_react21.useCallback)(() => controller.flipHorizontal(), [controller]);
+  const flipVertical = (0, import_react21.useCallback)(() => controller.flipVertical(), [controller]);
+  const setAdjustments = (0, import_react21.useCallback)(
     (partial, commitToHistory = true) => controller.setAdjustments(partial, commitToHistory),
     [controller]
   );
-  const resetAdjustments = (0, import_react14.useCallback)(() => controller.resetAdjustments(), [controller]);
-  const setDepthMask = (0, import_react14.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
-  const resetDepthMask = (0, import_react14.useCallback)(() => controller.resetDepthMask(), [controller]);
-  const addAnnotation = (0, import_react14.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
-  const updateAnnotation = (0, import_react14.useCallback)(
+  const resetAdjustments = (0, import_react21.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const setDepthMask = (0, import_react21.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
+  const resetDepthMask = (0, import_react21.useCallback)(() => controller.resetDepthMask(), [controller]);
+  const addAnnotation = (0, import_react21.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
+  const updateAnnotation = (0, import_react21.useCallback)(
     (id, partial, commitToHistory = true) => controller.updateAnnotation(id, partial, commitToHistory),
     [controller]
   );
-  const removeAnnotation = (0, import_react14.useCallback)((id) => controller.removeAnnotation(id), [controller]);
-  const clearAnnotations = (0, import_react14.useCallback)(() => controller.clearAnnotations(), [controller]);
-  const selectAnnotation = (0, import_react14.useCallback)((id) => controller.selectAnnotation(id), [controller]);
-  const undo = (0, import_react14.useCallback)(() => controller.undo(), [controller]);
-  const redo = (0, import_react14.useCallback)(() => controller.redo(), [controller]);
-  const reset = (0, import_react14.useCallback)(() => controller.reset(), [controller]);
-  const zoomIn = (0, import_react14.useCallback)((factor) => controller.zoomIn(factor), [controller]);
-  const zoomOut = (0, import_react14.useCallback)((factor) => controller.zoomOut(factor), [controller]);
-  const resetZoom = (0, import_react14.useCallback)(() => controller.resetZoom(), [controller]);
-  const setZoom = (0, import_react14.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
-  const setPan = (0, import_react14.useCallback)((pan) => controller.setPan(pan), [controller]);
-  const setComparing = (0, import_react14.useCallback)((comp) => controller.setComparing(comp), [controller]);
-  const loadImage = (0, import_react14.useCallback)((src) => controller.loadImage(src), [controller]);
-  const toDataURL = (0, import_react14.useCallback)((opts) => controller.toDataURL(opts), [controller]);
-  const toBlob = (0, import_react14.useCallback)((opts) => controller.toBlob(opts), [controller]);
-  const toJSON = (0, import_react14.useCallback)(() => controller.toJSON(), [controller]);
-  const loadJSON = (0, import_react14.useCallback)((data) => controller.loadJSON(data), [controller]);
-  const renderMask = (0, import_react14.useCallback)(
+  const removeAnnotation = (0, import_react21.useCallback)((id) => controller.removeAnnotation(id), [controller]);
+  const clearAnnotations = (0, import_react21.useCallback)(() => controller.clearAnnotations(), [controller]);
+  const selectAnnotation = (0, import_react21.useCallback)((id) => controller.selectAnnotation(id), [controller]);
+  const undo = (0, import_react21.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react21.useCallback)(() => controller.redo(), [controller]);
+  const reset = (0, import_react21.useCallback)(() => controller.reset(), [controller]);
+  const zoomIn = (0, import_react21.useCallback)((factor) => controller.zoomIn(factor), [controller]);
+  const zoomOut = (0, import_react21.useCallback)((factor) => controller.zoomOut(factor), [controller]);
+  const resetZoom = (0, import_react21.useCallback)(() => controller.resetZoom(), [controller]);
+  const setZoom = (0, import_react21.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
+  const setPan = (0, import_react21.useCallback)((pan) => controller.setPan(pan), [controller]);
+  const setComparing = (0, import_react21.useCallback)((comp) => controller.setComparing(comp), [controller]);
+  const loadImage = (0, import_react21.useCallback)((src) => controller.loadImage(src), [controller]);
+  const toDataURL = (0, import_react21.useCallback)((opts) => controller.toDataURL(opts), [controller]);
+  const toBlob = (0, import_react21.useCallback)((opts) => controller.toBlob(opts), [controller]);
+  const toJSON = (0, import_react21.useCallback)(() => controller.toJSON(), [controller]);
+  const loadJSON = (0, import_react21.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react21.useCallback)(
     (opts) => controller.renderMask(opts),
     [controller]
   );
-  const toMaskDataURL = (0, import_react14.useCallback)(
+  const toMaskDataURL = (0, import_react21.useCallback)(
     (opts) => controller.toMaskDataURL(opts),
     [controller]
   );
-  const applyInpaintedImage = (0, import_react14.useCallback)(
+  const toSourceDataURL = (0, import_react21.useCallback)(
+    (opts) => controller.toSourceDataURL(opts),
+    [controller]
+  );
+  const applyInpaintedImage = (0, import_react21.useCallback)(
     (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
     [controller]
   );
-  const applyBackgroundRemovedImage = (0, import_react14.useCallback)(
+  const applyBackgroundRemovedImage = (0, import_react21.useCallback)(
     (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
     [controller]
   );
-  return (0, import_react14.useMemo)(
+  return (0, import_react21.useMemo)(
     () => ({
       controller,
       state,
@@ -1415,6 +2125,7 @@ function useImageEditor(options = {}) {
       loadJSON,
       renderMask,
       toMaskDataURL,
+      toSourceDataURL,
       applyInpaintedImage,
       applyBackgroundRemovedImage
     }),
@@ -1424,9 +2135,9 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react15 = require("react");
+var import_react22 = require("react");
 var import_image_editor2 = require("@pixerate/editor/image-editor");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -1441,16 +2152,16 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  const canvasRef = (0, import_react15.useRef)(null);
-  const containerRef = (0, import_react15.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react15.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react15.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react15.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react15.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react15.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react15.useState)(false);
-  const [aiError, setAiError] = (0, import_react15.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react15.useState)(null);
+  const canvasRef = (0, import_react22.useRef)(null);
+  const containerRef = (0, import_react22.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react22.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react22.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react22.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react22.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react22.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react22.useState)(false);
+  const [aiError, setAiError] = (0, import_react22.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react22.useState)(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -1462,7 +2173,7 @@ var ImageEditor = ({
     setAiSuccess(null);
     setIsRemovingBg(true);
     try {
-      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const imageDataUrl = await editor.toSourceDataURL();
       const result = await effectiveOnRemoveBg({ imageDataUrl });
       if (typeof result === "string") {
         await editor.applyBackgroundRemovedImage(result);
@@ -1489,7 +2200,7 @@ var ImageEditor = ({
     setAiSuccess(null);
     setIsInpainting(true);
     try {
-      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const imageDataUrl = await editor.toSourceDataURL();
       const maskDataUrl = await editor.toMaskDataURL({
         useAnnotations: inpaintMaskMode === "annotations",
         useCrop: inpaintMaskMode === "crop"
@@ -1512,18 +2223,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react15.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react15.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react15.useState)(24);
-  const [textInput, setTextInput] = (0, import_react15.useState)("");
-  const draftAnnotationRef = (0, import_react15.useRef)(null);
-  const draftCropRef = (0, import_react15.useRef)(null);
-  const cropDragInfoRef = (0, import_react15.useRef)(null);
-  const annotationDragInfoRef = (0, import_react15.useRef)(null);
-  const isDrawingRef = (0, import_react15.useRef)(false);
-  const currentPathRef = (0, import_react15.useRef)([]);
-  const dragStartPointRef = (0, import_react15.useRef)(null);
-  const renderCanvas = (0, import_react15.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react22.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react22.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react22.useState)(24);
+  const [textInput, setTextInput] = (0, import_react22.useState)("");
+  const draftAnnotationRef = (0, import_react22.useRef)(null);
+  const draftCropRef = (0, import_react22.useRef)(null);
+  const cropDragInfoRef = (0, import_react22.useRef)(null);
+  const annotationDragInfoRef = (0, import_react22.useRef)(null);
+  const isDrawingRef = (0, import_react22.useRef)(false);
+  const currentPathRef = (0, import_react22.useRef)([]);
+  const dragStartPointRef = (0, import_react22.useRef)(null);
+  const renderCanvas = (0, import_react22.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -1542,7 +2253,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -1550,12 +2261,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -1675,7 +2386,8 @@ var ImageEditor = ({
             currentImgPt,
             state.imageDimensions.width,
             state.imageDimensions.height,
-            activeCropRatio
+            activeCropRatio,
+            state.transform
           );
         }
         draftCropRef.current = newCrop;
@@ -1688,7 +2400,7 @@ var ImageEditor = ({
           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);
+        canvas.style.cursor = (0, import_image_editor2.getCropCursor)(handle, state.transform);
       }
       return;
     }
@@ -1912,15 +2624,15 @@ var ImageEditor = ({
       link.click();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime5.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_runtime5.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_runtime5.jsx)(
+        /* @__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)(
               "button",
               {
                 type: "button",
@@ -1932,7 +2644,7 @@ var ImageEditor = ({
                 children: "Transform & Crop"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1944,7 +2656,7 @@ var ImageEditor = ({
                 children: "Adjustments"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1956,7 +2668,7 @@ var ImageEditor = ({
                 children: "Annotations"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1968,7 +2680,7 @@ var ImageEditor = ({
                 children: "Depth Mask"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "button",
               {
                 type: "button",
@@ -1978,14 +2690,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_runtime5.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_runtime5.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_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" }) }),
                   "AI Tools"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1996,7 +2708,7 @@ var ImageEditor = ({
                 children: "\u21A9"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2007,7 +2719,7 @@ var ImageEditor = ({
                 children: "\u21AA"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2016,8 +2728,8 @@ var ImageEditor = ({
                 children: "Reset"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2027,11 +2739,11 @@ var ImageEditor = ({
                 children: "-"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
               Math.round(state.zoom * 100),
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2041,8 +2753,8 @@ var ImageEditor = ({
                 children: "+"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2053,7 +2765,7 @@ var ImageEditor = ({
                 children: "Hold Compare"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -2064,13 +2776,13 @@ var ImageEditor = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__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)(
             "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_runtime5.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "canvas",
                 {
                   ref: canvasRef,
@@ -2083,11 +2795,11 @@ var ImageEditor = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__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)(
                   "button",
                   {
                     type: "button",
@@ -2099,7 +2811,7 @@ var ImageEditor = ({
                     children: "Freeform"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2111,7 +2823,7 @@ var ImageEditor = ({
                     children: "1:1 Square"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2123,7 +2835,7 @@ var ImageEditor = ({
                     children: "4:3 Standard"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2135,7 +2847,7 @@ var ImageEditor = ({
                     children: "16:9 Wide"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2147,7 +2859,7 @@ var ImageEditor = ({
                     children: "3:2 Photo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2160,10 +2872,10 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__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)(
                   "button",
                   {
                     type: "button",
@@ -2172,7 +2884,7 @@ var ImageEditor = ({
                     children: "Rotate -90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2181,7 +2893,7 @@ var ImageEditor = ({
                     children: "Rotate +90\xB0"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2190,7 +2902,7 @@ var ImageEditor = ({
                     children: "Flip Horizontal"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2201,10 +2913,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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)(
                   "button",
                   {
                     type: "button",
@@ -2214,12 +2926,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Brightness" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.adjustments.brightness })
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2231,12 +2943,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Contrast" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.adjustments.contrast })
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2248,12 +2960,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Saturation" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.adjustments.saturation })
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2265,12 +2977,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Exposure" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.adjustments.exposure })
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2282,12 +2994,12 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Warmth / Temperature" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.adjustments.temperature })
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2299,15 +3011,15 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Blur" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2319,15 +3031,15 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Opacity" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
+              /* @__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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "input",
                   {
                     type: "range",
@@ -2341,9 +3053,9 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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)(
                 "button",
                 {
                   type: "button",
@@ -2353,9 +3065,9 @@ var ImageEditor = ({
                 },
                 t
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-slate-400", children: "Color:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__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)(
                   "input",
                   {
                     type: "color",
@@ -2364,15 +3076,15 @@ var ImageEditor = ({
                     className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 ml-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Width:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
+                /* @__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: [
                       strokeWidth,
                       "px"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "range",
@@ -2385,10 +3097,10 @@ var ImageEditor = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__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)(
                   "input",
                   {
                     type: "text",
@@ -2399,7 +3111,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_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2409,14 +3121,14 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Font Size:" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-mono", children: [
+              /* @__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: [
                   fontSize,
                   "px"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "input",
                 {
                   type: "range",
@@ -2427,14 +3139,14 @@ var ImageEditor = ({
                   className: "w-full accent-indigo-500"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-slate-400", children: [
+              /* @__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: [
                   "Layers (",
                   state.annotations.length,
                   ")"
                 ] }),
-                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2443,7 +3155,7 @@ var ImageEditor = ({
                     children: "Delete Selected"
                   }
                 ),
-                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2454,10 +3166,10 @@ var ImageEditor = ({
                 )
               ] })
             ] }),
-            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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)(
                   "button",
                   {
                     type: "button",
@@ -2467,8 +3179,8 @@ var ImageEditor = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__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)(
                   "input",
                   {
                     type: "checkbox",
@@ -2477,12 +3189,12 @@ var ImageEditor = ({
                     className: "rounded accent-indigo-500"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              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)(
                     "input",
                     {
                       type: "text",
@@ -2493,8 +3205,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2503,7 +3215,7 @@ var ImageEditor = ({
                       children: "Threshold Mode"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2513,12 +3225,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Depth Start (Lower):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                /* @__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_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "range",
@@ -2532,12 +3244,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Depth Stop (Upper):" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                /* @__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_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "range",
@@ -2551,12 +3263,12 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Softness:" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                /* @__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_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "input",
                     {
                       type: "range",
@@ -2568,8 +3280,8 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__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)(
                     "input",
                     {
                       type: "checkbox",
@@ -2578,52 +3290,52 @@ var ImageEditor = ({
                       className: "rounded accent-indigo-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Invert Mask" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
             ] }),
-            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_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" }) }),
                     "Background Removal"
                   ] }),
-                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime5.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_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..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__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)(
                   "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_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.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_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" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_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" }) }),
                       "Remove Background"
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_runtime5.jsx)("path", { d: "m14 7 3 3" })
+              /* @__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" })
                     ] }),
                     "Generative Inpainting"
                   ] }),
-                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime5.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_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..." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__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)(
                     "textarea",
                     {
                       id: "ai-inpaint-prompt-react",
@@ -2635,10 +3347,10 @@ var ImageEditor = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__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)(
                       "button",
                       {
                         type: "button",
@@ -2651,7 +3363,7 @@ var ImageEditor = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                       "button",
                       {
                         type: "button",
@@ -2666,25 +3378,25 @@ var ImageEditor = ({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.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_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" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_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" }) }),
                       "Apply Inpainting"
                     ] })
                   }
                 )
               ] }),
-              aiError && /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.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_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 })
             ] })
           ] })
         ] })
@@ -2692,27 +3404,356 @@ var ImageEditor = ({
     }
   );
 };
+
+// src/review/useReview.ts
+var import_react23 = require("react");
+var import_editor13 = require("@pixerate/editor");
+var EMPTY_COMMENTS = Object.freeze({
+  threads: [],
+  activeThreadId: null
+});
+var EMPTY_TRACK_CHANGES = Object.freeze({
+  enabled: false,
+  author: { id: "anonymous", name: "Anonymous" },
+  changes: [],
+  currentChangeId: null
+});
+var noopUnsubscribe = () => {
+};
+function isCommentStore(value) {
+  return !!value && typeof value.getSnapshot === "function" && typeof value.createThread === "function";
+}
+function useComments(source) {
+  const store = isCommentStore(source) ? source : (0, import_editor13.getCommentStore)(source);
+  const subscribe = (0, import_react23.useCallback)(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
+  const snapshot = (0, import_react23.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react23.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
+}
+function useTrackChanges(editor) {
+  const store = (0, import_editor13.getTrackChangesStore)(editor ?? null);
+  const subscribe = (0, import_react23.useCallback)(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
+  const snapshot = (0, import_react23.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react23.useMemo)(() => {
+    const run = (fn) => () => {
+      if (editor && !editor.isDestroyed) fn(editor);
+    };
+    return {
+      ...snapshot,
+      currentChange: snapshot.changes.find((c) => c.id === snapshot.currentChangeId) ?? null,
+      setEnabled: (enabled) => run((e) => e.commands.setTrackChanges(enabled))(),
+      toggle: run((e) => e.commands.toggleTrackChanges()),
+      accept: (id) => run((e) => e.commands.acceptChange(id))(),
+      reject: (id) => run((e) => e.commands.rejectChange(id))(),
+      acceptAll: run((e) => e.commands.acceptAllChanges()),
+      rejectAll: run((e) => e.commands.rejectAllChanges()),
+      next: run((e) => e.chain().focus().selectNextChange().run()),
+      previous: run((e) => e.chain().focus().selectPreviousChange().run())
+    };
+  }, [snapshot, editor]);
+}
+
+// src/review/CommentsPanel.tsx
+var import_react24 = require("react");
+var import_editor14 = require("@pixerate/editor");
+var import_jsx_runtime11 = 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";
+var CommentsPanel = ({
+  editor,
+  store: storeProp,
+  author: authorProp,
+  showResolved: showResolvedInitial = false,
+  className = "flex flex-col gap-2 text-sm text-foreground",
+  formatTime = (t) => (0, import_editor14.formatReviewTime)(t),
+  emptyMessage = "No comments yet. Select text and add a comment."
+}) => {
+  const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
+  const [showResolved, setShowResolved] = (0, import_react24.useState)(showResolvedInitial);
+  const author = authorProp ?? (0, import_editor14.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: [
+        threads.length - resolvedCount,
+        " open",
+        resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
+      ] }),
+      resolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClass,
+          "aria-pressed": showResolved,
+          onClick: () => setShowResolved((v) => !v),
+          children: showResolved ? "Hide resolved" : "Show resolved"
+        }
+      )
+    ] }),
+    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)(
+      CommentThreadCard,
+      {
+        thread,
+        active: thread.id === activeThreadId,
+        editor,
+        store,
+        author,
+        formatTime
+      },
+      thread.id
+    )) })
+  ] });
+};
+var CommentThreadCard = ({
+  thread,
+  active,
+  editor,
+  store,
+  author,
+  formatTime
+}) => {
+  const [draft, setDraft] = (0, import_react24.useState)("");
+  const isDraft = thread.body === "";
+  const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
+  const live = editor && !editor.isDestroyed ? editor : null;
+  const focus = () => {
+    if (!active) {
+      if (live && !thread.orphaned) live.commands.focusComment(thread.id);
+      else store?.setActiveThread(thread.id);
+    }
+  };
+  const remove = () => {
+    if (live) live.commands.deleteComment(thread.id);
+    else store?.deleteThread(thread.id);
+  };
+  const setResolved = (resolved) => {
+    if (live) live.commands.resolveComment(thread.id, resolved);
+    else store?.resolveThread(thread.id, resolved, author);
+  };
+  const submit = () => {
+    const body = draft.trim();
+    if (!body || !store) return;
+    if (isDraft) store.editComment(thread.id, body);
+    else store.addReply(thread.id, { body, author });
+    setDraft("");
+  };
+  const stop = (e) => e.stopPropagation();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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" : ""}`,
+      "data-thread-id": thread.id,
+      "data-active": active || void 0,
+      "aria-current": active || void 0,
+      tabIndex: 0,
+      onClick: focus,
+      onKeyDown: (e) => {
+        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          focus();
+        }
+      },
+      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) })
+        ] }),
+        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 }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime11.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 })
+        ] }, 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)(
+            "textarea",
+            {
+              className: textareaClass,
+              rows: 2,
+              value: draft,
+              "aria-label": isDraft ? "Comment" : "Reply",
+              placeholder: isDraft ? "Add a comment\u2026" : "Reply\u2026",
+              autoFocus: isDraft,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  submit();
+                }
+              }
+            }
+          ),
+          /* @__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)(
+              "button",
+              {
+                type: "button",
+                className: primaryButtonClass,
+                disabled: !draft.trim(),
+                onClick: submit,
+                children: isDraft ? "Comment" : "Reply"
+              }
+            )
+          ] })
+        ] }),
+        !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)(
+            "button",
+            {
+              type: "button",
+              className: `${buttonClass} hover:text-destructive`,
+              onClick: remove,
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/review/ReviewToolbar.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+var ReviewToolbar = ({
+  editor,
+  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm"
+}) => {
+  const review = useTrackChanges(editor);
+  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)(
+      "button",
+      {
+        type: "button",
+        className: `${buttonClass2} ${review.enabled ? "bg-primary/10 text-primary" : ""}`,
+        "aria-pressed": review.enabled,
+        disabled: !editor,
+        onClick: review.toggle,
+        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)(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        "aria-label": "Previous change",
+        disabled: count === 0,
+        onClick: review.previous,
+        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)(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        "aria-label": "Next change",
+        disabled: count === 0,
+        onClick: review.next,
+        children: "\u203A"
+      }
+    ),
+    /* @__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)(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        disabled: !current,
+        onClick: () => current && review.accept(current.id),
+        children: "Accept"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        disabled: !current,
+        onClick: () => current && review.reject(current.id),
+        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" })
+  ] });
+};
+
+// src/review/CommentButton.tsx
+var import_jsx_runtime13 = 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)(
+  "button",
+  {
+    type: "button",
+    className,
+    disabled: !editor,
+    onClick: () => editor?.chain().focus().addComment().run(),
+    children
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BubbleMenu,
+  CommentButton,
+  CommentsPanel,
   DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  FormulaHints,
   HistoryManager,
   ImageEditor,
+  OutlinePanel,
+  ReviewToolbar,
+  SpreadsheetContextMenu,
   SpreadsheetEditor,
+  SpreadsheetGroupRow,
   TemplateRenderer,
+  VariableForm,
   createDirtyTracker,
   createHistoryManager,
   defaultIsEqual,
+  useAgentToolProvider,
+  useComments,
   useDismissGuard,
   useEditor,
   useEditorSlots,
+  useFileImport,
+  useFillHandle,
   useHistory,
   useHistoryShortcuts,
   useImageEditor,
   useNavigationGuard,
+  useOutline,
   usePromptEditor,
-  useSpreadsheetEditor
+  useSpreadsheetClipboard,
+  useSpreadsheetEditor,
+  useTrackChanges
 });
 //# sourceMappingURL=index.cjs.map