@pixerate/editor-react 0.13.0 → 0.15.0

package/dist/index.cjs

@@ -31,13 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   BubbleMenu: () => BubbleMenu,
+  CommandPalette: () => CommandPalette,
   CommentButton: () => CommentButton,
   CommentsPanel: () => CommentsPanel,
-  DirtyTracker: () => import_editor11.DirtyTracker,
+  DirtyTracker: () => import_editor12.DirtyTracker,
   EditorContent: () => EditorContent,
   EditorSlotsProvider: () => EditorSlotsProvider,
   FormulaHints: () => FormulaHints,
-  HistoryManager: () => import_editor11.HistoryManager,
+  HistoryManager: () => import_editor12.HistoryManager,
   ImageEditor: () => ImageEditor,
   OutlinePanel: () => OutlinePanel,
   ReviewToolbar: () => ReviewToolbar,
@@ -46,10 +47,13 @@ __export(src_exports, {
   SpreadsheetGroupRow: () => SpreadsheetGroupRow,
   TemplateRenderer: () => TemplateRenderer,
   VariableForm: () => VariableForm,
-  createDirtyTracker: () => import_editor11.createDirtyTracker,
-  createHistoryManager: () => import_editor11.createHistoryManager,
-  defaultIsEqual: () => import_editor11.defaultIsEqual,
+  bindDirtyToHistory: () => import_editor12.bindDirtyToHistory,
+  createDirtyTracker: () => import_editor12.createDirtyTracker,
+  createHistoryManager: () => import_editor12.createHistoryManager,
+  defaultIsEqual: () => import_editor12.defaultIsEqual,
   useAgentToolProvider: () => useAgentToolProvider,
+  useCommandPalette: () => useCommandPalette,
+  useCommandShortcuts: () => useCommandShortcuts,
   useComments: () => useComments,
   useDismissGuard: () => useDismissGuard,
   useEditor: () => useEditor2,
@@ -57,14 +61,17 @@ __export(src_exports, {
   useFileImport: () => useFileImport,
   useFillHandle: () => useFillHandle,
   useHistory: () => useHistory,
+  useHistoryDirty: () => useHistoryDirty,
   useHistoryShortcuts: () => useHistoryShortcuts,
   useImageEditor: () => useImageEditor,
   useNavigationGuard: () => useNavigationGuard,
   useOutline: () => useOutline,
   usePromptEditor: () => usePromptEditor,
+  useRegisterCommands: () => useRegisterCommands,
   useSpreadsheetClipboard: () => useSpreadsheetClipboard,
   useSpreadsheetEditor: () => useSpreadsheetEditor,
-  useTrackChanges: () => useTrackChanges
+  useTrackChanges: () => useTrackChanges,
+  withoutDirty: () => import_editor12.withoutDirty
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -470,6 +477,7 @@ function useHistory(managerOrOptions) {
     () => manager.getState(),
     () => manager.getState()
   );
+  const entries = (0, import_react6.useMemo)(() => manager.getEntries(), [manager, state]);
   const undo = (0, import_react6.useCallback)(() => manager.undo(), [manager]);
   const redo = (0, import_react6.useCallback)(() => manager.redo(), [manager]);
   const clear = (0, import_react6.useCallback)(() => manager.clear(), [manager]);
@@ -485,60 +493,102 @@ function useHistory(managerOrOptions) {
     (name, fn) => manager.batch(name, fn),
     [manager]
   );
+  const goTo = (0, import_react6.useCallback)((index) => manager.goTo(index), [manager]);
+  const mark = (0, import_react6.useCallback)(() => manager.mark(), [manager]);
+  const revertTo = (0, import_react6.useCallback)(
+    (m) => manager.revertTo(m),
+    [manager]
+  );
+  const beginGesture = (0, import_react6.useCallback)(
+    (key) => manager.beginGesture(key),
+    [manager]
+  );
+  const endGesture = (0, import_react6.useCallback)(() => manager.endGesture(), [manager]);
   return {
     ...state,
     manager,
+    entries,
     undo,
     redo,
     clear,
     execute,
     executeMerged,
-    batch
+    batch,
+    goTo,
+    mark,
+    revertTo,
+    beginGesture,
+    endGesture
   };
 }
 
-// src/hooks/useHistoryShortcuts.ts
+// src/hooks/useHistoryDirty.ts
 var import_react7 = require("react");
+var import_editor4 = require("@pixerate/editor");
+function useHistoryDirty(options) {
+  const getValueRef = (0, import_react7.useRef)(options.getValue);
+  getValueRef.current = options.getValue;
+  const [tracker] = (0, import_react7.useState)(
+    () => options.tracker ?? new import_editor4.DirtyTracker(options.getValue(), {
+      isEqual: options.isEqual,
+      normalize: options.normalize
+    })
+  );
+  const bindingRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const binding = (0, import_editor4.bindDirtyToHistory)({
+      history: options.history,
+      getValue: () => getValueRef.current(),
+      tracker
+    });
+    bindingRef.current = binding;
+    return () => {
+      binding.destroy();
+      if (bindingRef.current === binding) bindingRef.current = null;
+    };
+  }, [options.history, tracker]);
+  const isDirty = (0, import_react7.useSyncExternalStore)(
+    (0, import_react7.useCallback)((onChange) => tracker.subscribe(onChange), [tracker]),
+    () => tracker.dirty,
+    () => tracker.dirty
+  );
+  const markClean = (0, import_react7.useCallback)(
+    () => tracker.markClean(getValueRef.current()),
+    [tracker]
+  );
+  const suppress = (0, import_react7.useCallback)(
+    (fn) => bindingRef.current ? bindingRef.current.suppress(fn) : tracker.suppress(fn),
+    [tracker]
+  );
+  const refresh = (0, import_react7.useCallback)(
+    () => tracker.update(getValueRef.current()),
+    [tracker]
+  );
+  return { isDirty, markClean, suppress, refresh, tracker };
+}
+
+// src/hooks/useHistoryShortcuts.ts
+var import_react8 = require("react");
+var import_commands = require("@pixerate/editor/commands");
 function useHistoryShortcuts(manager, options = {}) {
   const {
     enabled = true,
     target,
     ignoreEditableElements = true
   } = options;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
     const handleKeyDown = (event) => {
       const e = event;
-      const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-      const modifier = isMac ? e.metaKey : e.ctrlKey;
-      if (!modifier) return;
-      if (ignoreEditableElements && typeof document !== "undefined") {
-        const targetEl = e.target || document.activeElement;
-        if (targetEl && targetEl.tagName) {
-          const tagName = targetEl.tagName.toLowerCase();
-          const isInput = tagName === "input" || tagName === "textarea";
-          const isContentEditable = targetEl.isContentEditable || targetEl.getAttribute?.("contenteditable") === "true";
-          if (isInput || isContentEditable) {
-            return;
-          }
-        }
-      }
-      const key = e.key.toLowerCase();
-      if (key === "z" && !e.shiftKey) {
-        if (manager.getState().canUndo) {
-          e.preventDefault();
-          manager.undo();
-        }
-        return;
-      }
-      const isRedoKey = key === "z" && e.shiftKey || !isMac && key === "y" && !e.shiftKey;
-      if (isRedoKey) {
-        if (manager.getState().canRedo) {
-          e.preventDefault();
-          manager.redo();
-        }
+      const action = (0, import_commands.matchHistoryShortcut)(e, { allowInEditable: !ignoreEditableElements });
+      if (action === "undo" && manager.getState().canUndo) {
+        e.preventDefault();
+        manager.undo();
+      } else if (action === "redo" && manager.getState().canRedo) {
+        e.preventDefault();
+        manager.redo();
       }
     };
     eventTarget.addEventListener("keydown", handleKeyDown);
@@ -549,22 +599,22 @@ function useHistoryShortcuts(manager, options = {}) {
 }
 
 // src/hooks/useFileImport.ts
-var import_react8 = require("react");
-var import_editor4 = require("@pixerate/editor");
+var import_react9 = require("react");
+var import_editor5 = require("@pixerate/editor");
 function useFileImport(editor, options = {}) {
-  const editorRef = (0, import_react8.useRef)(editor);
+  const editorRef = (0, import_react9.useRef)(editor);
   editorRef.current = editor;
-  const controller = (0, import_react8.useMemo)(
-    () => new import_editor4.FileImportController(() => {
+  const controller = (0, import_react9.useMemo)(
+    () => new import_editor5.FileImportController(() => {
       const current = editorRef.current;
       return current && !current.isDestroyed ? current : null;
     }, options),
     []
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     controller.setOptions(options);
   });
-  const state = (0, import_react8.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const state = (0, import_react9.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
   return {
     ...state,
     accept: controller.accept,
@@ -574,27 +624,27 @@ function useFileImport(editor, options = {}) {
 }
 
 // src/hooks/useAgentToolProvider.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useAgentToolProvider(registry, provider) {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!registry || !provider) return;
     return registry.register(provider);
   }, [registry, provider]);
 }
 
 // src/components/EditorContent.tsx
-var import_react10 = require("@tiptap/react");
+var import_react11 = 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_react10.EditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react11.EditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom = require("react-dom");
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
 var BubbleMenu = ({
@@ -606,12 +656,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = (0, import_react11.useRef)(null);
-  const [mounted, setMounted] = (0, import_react11.useState)(false);
+  const menuEl = (0, import_react12.useRef)(null);
+  const [mounted, setMounted] = (0, import_react12.useState)(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -642,8 +692,8 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-var import_react12 = require("react");
-var import_editor5 = require("@pixerate/editor");
+var import_react13 = require("react");
+var import_editor6 = require("@pixerate/editor");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" };
 var TemplateRenderer = ({
@@ -657,12 +707,12 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = (0, import_react12.useMemo)(() => {
+  const displayText = (0, import_react13.useMemo)(() => {
     if (!resolve || templates.length === 0) return content;
-    return (0, import_editor5.resolveTemplates)(content, templates, { bindings });
+    return (0, import_editor6.resolveTemplates)(content, templates, { bindings });
   }, [content, templates, resolve, bindings]);
-  const tokens = (0, import_react12.useMemo)(() => {
-    return (0, import_editor5.evaluatePromptTokens)(displayText, values);
+  const tokens = (0, import_react13.useMemo)(() => {
+    return (0, import_editor6.evaluatePromptTokens)(displayText, values);
   }, [displayText, values]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
@@ -750,8 +800,8 @@ var TemplateRenderer = ({
 };
 
 // src/components/VariableForm.tsx
-var import_react13 = require("react");
-var import_editor6 = require("@pixerate/editor");
+var import_react14 = require("react");
+var import_editor7 = require("@pixerate/editor");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var VariableForm = ({
   content,
@@ -762,19 +812,19 @@ var VariableForm = ({
   onChange,
   className = "flex flex-col gap-3 text-sm"
 }) => {
-  const idPrefix = (0, import_react13.useId)();
-  const [internal, setInternal] = (0, import_react13.useState)(
+  const idPrefix = (0, import_react14.useId)();
+  const [internal, setInternal] = (0, import_react14.useState)(
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = (0, import_react13.useMemo)(
-    () => (0, import_editor6.getVariableFormFields)(content, { templates, bindings }),
+  const fields = (0, import_react14.useMemo)(
+    () => (0, import_editor7.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);
+    onChange?.((0, import_editor7.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) => {
@@ -835,15 +885,15 @@ var VariableForm = ({
 };
 
 // src/hooks/useOutline.ts
-var import_react14 = require("react");
-var import_editor7 = require("@pixerate/editor");
+var import_react15 = require("react");
+var import_editor8 = 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);
+  const store = (0, import_react15.useMemo)(() => (0, import_editor8.createOutlineStore)(editor), [editor]);
+  return (0, import_react15.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
-var import_editor8 = require("@pixerate/editor");
+var import_editor9 = require("@pixerate/editor");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var OutlinePanel = ({
   editor,
@@ -872,7 +922,7 @@ var OutlinePanel = ({
           "data-heading-id": heading.id,
           onClick: () => {
             if (!editor) return;
-            if ((0, import_editor8.navigateToHeading)(editor, heading, { focus: focusOnNavigate })) {
+            if ((0, import_editor9.navigateToHeading)(editor, heading, { focus: focusOnNavigate })) {
               onNavigate?.(heading);
             }
           },
@@ -884,16 +934,16 @@ var OutlinePanel = ({
 };
 
 // src/index.ts
-var import_editor11 = require("@pixerate/editor");
+var import_editor12 = require("@pixerate/editor");
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_spreadsheet = require("@pixerate/editor/spreadsheet");
 function useSpreadsheetEditor(options = {}) {
-  const optionsRef = (0, import_react15.useRef)(options);
+  const optionsRef = (0, import_react16.useRef)(options);
   optionsRef.current = options;
-  const settersRef = (0, import_react15.useRef)({});
-  const [controller] = (0, import_react15.useState)(
+  const settersRef = (0, import_react16.useRef)({});
+  const [controller] = (0, import_react16.useState)(
     () => new import_spreadsheet.SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
@@ -910,93 +960,97 @@ function useSpreadsheetEditor(options = {}) {
       }
     })
   );
-  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)("");
+  const [doc, setDoc] = (0, import_react16.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react16.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react16.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react16.useState)(null);
+  const [draftValue, setDraftState] = (0, import_react16.useState)("");
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
-  const setCellValue = (0, import_react15.useCallback)((rowId, colId, raw) => {
+  const setDraftValue = (0, import_react16.useCallback)((value) => {
+    controller.draftValue = value;
+    setDraftState(value);
+  }, [controller]);
+  const setCellValue = (0, import_react16.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react15.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react16.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react15.useCallback)((range) => {
+  const selectRange = (0, import_react16.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react15.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react16.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const commitEditing = (0, import_react15.useCallback)((val) => {
+  const commitEditing = (0, import_react16.useCallback)((val) => {
     controller.commitEditing(val);
     setEditingCell(null);
     setDraftValue("");
     setDoc({ ...controller.document });
   }, [controller]);
-  const cancelEditing = (0, import_react15.useCallback)(() => {
+  const cancelEditing = (0, import_react16.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react15.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react16.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react15.useCallback)((index, config) => {
+  const insertColumn = (0, import_react16.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react15.useCallback)((colId) => {
+  const deleteColumn = (0, import_react16.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react15.useCallback)((index, config) => {
+  const insertRow = (0, import_react16.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react15.useCallback)((rowId) => {
+  const deleteRow = (0, import_react16.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react15.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react16.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react15.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react16.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react15.useCallback)((ds) => {
+  const registerDataSource = (0, import_react16.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react15.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react16.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react15.useCallback)(() => {
+  const recalculateAll = (0, import_react16.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react15.useCallback)(() => {
+  const undo = (0, import_react16.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const redo = (0, import_react15.useCallback)(() => {
+  const redo = (0, import_react16.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
   }, [controller]);
-  const tableActions = (0, import_react15.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
-  const viewModel = (0, import_react15.useMemo)(() => controller.getViewModel(), [controller, doc]);
+  const tableActions = (0, import_react16.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
+  const viewModel = (0, import_react16.useMemo)(() => controller.getViewModel(), [controller, doc]);
   return {
     document: doc,
     activeCell,
@@ -1048,17 +1102,32 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react19 = require("react");
-var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
+var import_react20 = require("react");
+var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
+var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var VIEWPORT_MARGIN = 4;
 var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
-  const menuRef = (0, import_react16.useRef)(null);
-  const onCloseRef = (0, import_react16.useRef)(onClose);
+  const menuRef = (0, import_react17.useRef)(null);
+  const onCloseRef = (0, import_react17.useRef)(onClose);
   onCloseRef.current = onClose;
-  (0, import_react16.useEffect)(() => {
+  const [position, setPosition] = (0, import_react17.useState)({ x, y });
+  (0, import_react17.useLayoutEffect)(() => {
+    const menu = menuRef.current;
+    if (!menu || typeof window === "undefined") return;
+    const { width, height } = menu.getBoundingClientRect();
+    const next = (0, import_spreadsheet2.clampMenuPosition)(
+      { x, y },
+      { width, height },
+      { width: window.innerWidth, height: window.innerHeight },
+      VIEWPORT_MARGIN
+    );
+    setPosition((prev) => prev.x === next.x && prev.y === next.y ? prev : next);
+  }, [x, y, items]);
+  (0, import_react17.useEffect)(() => {
     const handlePointer = (e) => {
       if (!menuRef.current?.contains(e.target)) onCloseRef.current();
     };
@@ -1079,10 +1148,16 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
       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))" },
+      style: {
+        left: position.x,
+        top: position.y,
+        maxHeight: `calc(100vh - ${VIEWPORT_MARGIN * 2}px)`,
+        overflowY: "auto",
+        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: [
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react17.default.Fragment, { children: [
         item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { role: "separator", className: "my-1 h-px bg-border" }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
@@ -1116,7 +1191,7 @@ var SpreadsheetGroupRow = ({
 }) => {
   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)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -1147,8 +1222,8 @@ var SpreadsheetGroupRow = ({
 };
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
-var import_react17 = require("react");
-var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
+var import_react18 = require("react");
+var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
 function gridHasFocus(grid) {
   if (!grid || typeof document === "undefined") return false;
   const active = document.activeElement;
@@ -1156,12 +1231,12 @@ function gridHasFocus(grid) {
   return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
 }
 function useSpreadsheetClipboard(gridRef, state, readOnly) {
-  const stateRef = (0, import_react17.useRef)(state);
+  const stateRef = (0, import_react18.useRef)(state);
   stateRef.current = state;
-  const readOnlyRef = (0, import_react17.useRef)(readOnly);
+  const readOnlyRef = (0, import_react18.useRef)(readOnly);
   readOnlyRef.current = readOnly;
-  const copiedRef = (0, import_react17.useRef)(false);
-  (0, import_react17.useEffect)(() => {
+  const copiedRef = (0, import_react18.useRef)(false);
+  (0, import_react18.useEffect)(() => {
     if (typeof document === "undefined") return;
     const handleCopy = (e) => {
       const s = stateRef.current;
@@ -1184,24 +1259,25 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
       document.removeEventListener("paste", handlePaste);
     };
   }, [gridRef]);
-  const copyShortcutFallback = (0, import_react17.useCallback)(() => {
+  const copyShortcutFallback = (0, import_react18.useCallback)(() => {
     copiedRef.current = false;
     setTimeout(() => {
       if (copiedRef.current) return;
       const s = stateRef.current;
-      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
+      Promise.resolve(navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange))).catch(() => {
+      });
     }, 0);
   }, []);
   return { copyShortcutFallback };
 }
 function useFillHandle(state) {
-  const [drag, setDrag] = (0, import_react17.useState)(null);
-  const dragRef = (0, import_react17.useRef)(drag);
+  const [drag, setDrag] = (0, import_react18.useState)(null);
+  const dragRef = (0, import_react18.useRef)(drag);
   dragRef.current = drag;
-  const stateRef = (0, import_react17.useRef)(state);
+  const stateRef = (0, import_react18.useRef)(state);
   stateRef.current = state;
   const dragging = drag !== null;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!dragging) return;
     const handleMouseUp = () => {
       const current = dragRef.current;
@@ -1211,49 +1287,49 @@ function useFillHandle(state) {
     window.addEventListener("mouseup", handleMouseUp);
     return () => window.removeEventListener("mouseup", handleMouseUp);
   }, [dragging]);
-  const startFill = (0, import_react17.useCallback)((e) => {
+  const startFill = (0, import_react18.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     const range = stateRef.current.selectedRange;
-    if (range) setDrag({ source: (0, import_spreadsheet2.normalizeRange)(range), target: null });
+    if (range) setDrag({ source: (0, import_spreadsheet3.normalizeRange)(range), target: null });
   }, []);
-  const extendFill = (0, import_react17.useCallback)((row, col) => {
+  const extendFill = (0, import_react18.useCallback)((row, col) => {
     const current = dragRef.current;
     if (!current) return;
-    setDrag({ source: current.source, target: (0, import_spreadsheet2.computeFillTarget)(current.source, { row, col }) });
+    setDrag({ source: current.source, target: (0, import_spreadsheet3.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_spreadsheet3 = require("@pixerate/editor/spreadsheet");
+var import_react19 = require("react");
+var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
 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_spreadsheet3.getFormulaHints)(value, caret ?? value.length, { limit }),
+  const [caret, setCaret] = (0, import_react19.useState)(null);
+  const [focused, setFocused] = (0, import_react19.useState)(false);
+  const [selected, setSelected] = (0, import_react19.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react19.useState)(false);
+  const [position, setPosition] = (0, import_react19.useState)(null);
+  const pendingCaret = (0, import_react19.useRef)(null);
+  const hints = (0, import_react19.useMemo)(
+    () => (0, import_spreadsheet4.getFormulaHints)(value, caret ?? value.length, { limit }),
     [value, caret, limit]
   );
   const suggestions = dismissed ? [] : hints.suggestions;
   const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
   const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
-  const latest = (0, import_react18.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = (0, import_react19.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_spreadsheet3.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
+    const next = (0, import_spreadsheet4.applyFormulaSuggestion)(current, at ?? current.length, suggestion.name);
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -1303,7 +1379,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -1312,7 +1388,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -1389,6 +1465,20 @@ function frozenCellStyle(viewRow, viewCol) {
     background: "var(--background, #fff)"
   };
 }
+var coordKey = (cell) => cell ? `${(0, import_spreadsheet5.indexToColName)(cell.col)}${cell.row + 1}` : "";
+function spillBorderStyle(range, row, col) {
+  const line = "1px solid color-mix(in srgb, var(--primary, #6366f1) 60%, transparent)";
+  return {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    zIndex: 5,
+    borderTop: row === range.startRow ? line : void 0,
+    borderBottom: row === range.endRow ? line : void 0,
+    borderLeft: col === range.startCol ? line : void 0,
+    borderRight: col === range.endCol ? line : void 0
+  };
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -1399,47 +1489,53 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  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 gridRef = (0, import_react20.useRef)(null);
+  const formulaBarRef = (0, import_react20.useRef)(null);
+  const cellInputRef = (0, import_react20.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react20.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react20.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react20.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react20.useState)(0);
   const view = state.viewModel;
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = (0, import_react19.useState)(null);
+  const [menu, setMenu] = (0, import_react20.useState)(null);
   const filter = state.document.table?.filter;
-  const filteredColIds = (0, import_react19.useMemo)(
+  const filteredColIds = (0, import_react20.useMemo)(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = (0, import_react19.useCallback)((rIdx, cIdx, e) => {
+  const handleCellContextMenu = (0, import_react20.useCallback)((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
-    if (!state.selectedRange || !(0, import_spreadsheet4.rangeContains)(state.selectedRange, rIdx, cIdx)) {
+    if (!state.selectedRange || !(0, import_spreadsheet5.rangeContains)(state.selectedRange, rIdx, cIdx)) {
       state.selectCell(rIdx, cIdx);
     }
-    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet4.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
+    setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet5.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const activeRawValue = (0, import_react19.useMemo)(() => {
+  const activeRawValue = (0, import_react20.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_react19.useMemo)(() => {
+  const activeSpill = (0, import_react20.useMemo)(
+    () => state.activeCell ? state.controller.getSpillAt(state.activeCell.row, state.activeCell.col) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.controller, state.activeCell, state.document]
+  );
+  const spillFormula = activeSpill && !activeRawValue && activeSpill.key !== coordKey(state.activeCell) ? activeSpill.formula : "";
+  const coordLabel = (0, import_react20.useMemo)(() => {
     if (!state.activeCell) return "--";
-    const colName = (0, import_spreadsheet4.indexToColName)(state.activeCell.col);
+    const colName = (0, import_spreadsheet5.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react19.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react20.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -1455,19 +1551,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react19.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react20.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_react19.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react20.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_react19.useCallback)((e) => {
+  const handleKeyDown = (0, import_react20.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -1480,7 +1576,10 @@ var SpreadsheetEditor = ({
         e.preventDefault();
         state.commitEditing();
         state.moveCursor(e.shiftKey ? "left" : "right");
+      } else {
+        return;
       }
+      gridRef.current?.focus();
       return;
     }
     if (!state.activeCell) return;
@@ -1528,15 +1627,16 @@ var SpreadsheetEditor = ({
     } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = state.document.columns[state.activeCell.col];
       if (!col?.readOnly) {
+        e.preventDefault();
         state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const stateRef = (0, import_react19.useRef)(state);
+  const stateRef = (0, import_react20.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react19.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react20.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -1587,7 +1687,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react19.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react20.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -1635,7 +1735,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react19.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react20.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -1671,12 +1771,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react19.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react20.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react19.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react20.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -1720,7 +1820,9 @@ var SpreadsheetEditor = ({
               placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
               "aria-label": "Formula bar",
               readOnly: formulaBarReadOnly,
-              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
+              "data-spill-formula": !state.editingCell && formulaDraft === null && spillFormula ? "true" : void 0,
+              style: !state.editingCell && formulaDraft === null && spillFormula ? { color: "var(--muted-foreground, #94a3b8)" } : void 0,
+              value: state.editingCell ? state.draftValue : formulaDraft ?? (activeRawValue || spillFormula),
               onFocus: () => {
                 if (!state.editingCell) setFormulaDraft(activeRawValue);
               },
@@ -1755,8 +1857,8 @@ var SpreadsheetEditor = ({
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { className: "h-7 bg-muted/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: "#" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("tr", { className: "h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
             view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "th",
               {
@@ -1842,7 +1944,7 @@ var SpreadsheetEditor = ({
               );
             }
             const displayRowIndex = viewRow.index;
-            const selection = state.selectedRange ? (0, import_spreadsheet4.normalizeRange)(state.selectedRange) : null;
+            const selection = state.selectedRange ? (0, import_spreadsheet5.normalizeRange)(state.selectedRange) : null;
             return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "tr",
               {
@@ -1853,7 +1955,7 @@ var SpreadsheetEditor = ({
                   /* @__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",
+                      className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none",
                       style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
                       children: displayRowIndex + 1
                     }
@@ -1869,8 +1971,8 @@ var SpreadsheetEditor = ({
                     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_spreadsheet4.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
-                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet4.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
+                    const inFillPreview = !!fillTarget && !selected && (0, import_spreadsheet5.rangeContains)(fillTarget, displayRowIndex, viewCol.index);
+                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? (0, import_spreadsheet5.rangeContains)(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "td",
                       {
@@ -1900,6 +2002,10 @@ var SpreadsheetEditor = ({
                                 value: state.draftValue,
                                 onChange: (e) => state.setDraftValue(e.target.value),
                                 onBlur: () => state.commitEditing(),
+                                onFocus: (e) => {
+                                  const end = e.currentTarget.value.length;
+                                  e.currentTarget.setSelectionRange(end, end);
+                                },
                                 autoFocus: true
                               }
                             ),
@@ -1909,9 +2015,10 @@ var SpreadsheetEditor = ({
                             {
                               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 ?? "")
+                              children: (0, import_spreadsheet5.formatCellDisplay)(cell)
                             }
                           ),
+                          activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
                           showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             "div",
                             {
@@ -1969,7 +2076,7 @@ var SpreadsheetEditor = ({
 };
 
 // src/slots.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var defaultSlots = {
   Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -1991,102 +2098,103 @@ var defaultSlots = {
     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_react20.createContext)(defaultSlots);
+var EditorSlotsContext = (0, import_react21.createContext)(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = (0, import_react20.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
+  const mergedSlots = (0, import_react21.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
-  return (0, import_react20.useContext)(EditorSlotsContext);
+  return (0, import_react21.useContext)(EditorSlotsContext);
 }
 
 // src/image-editor/useImageEditor.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_image_editor = require("@pixerate/editor/image-editor");
 function useImageEditor(options = {}) {
-  const controllerRef = (0, import_react21.useRef)(null);
+  const controllerRef = (0, import_react22.useRef)(null);
   if (!controllerRef.current) {
     controllerRef.current = new import_image_editor.ImageEditorController(options);
   }
   const controller = controllerRef.current;
-  const [state, setState] = (0, import_react21.useState)(() => controller.getState());
-  const [historyTicks, setHistoryTicks] = (0, import_react21.useState)(0);
-  (0, import_react21.useEffect)(() => {
+  const [state, setState] = (0, import_react22.useState)(() => controller.getState());
+  const [historyTicks, setHistoryTicks] = (0, import_react22.useState)(0);
+  (0, import_react22.useEffect)(() => {
     const unsub = controller.subscribe((next) => {
       setState(next);
       setHistoryTicks((t) => t + 1);
     });
     return unsub;
   }, [controller]);
-  const loadedImageRef = (0, import_react21.useRef)(options.image);
-  (0, import_react21.useEffect)(() => {
+  const loadedImageRef = (0, import_react22.useRef)(options.image);
+  (0, import_react22.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_react21.useCallback)((tool) => controller.setTool(tool), [controller]);
-  const setCrop = (0, import_react21.useCallback)(
+  const setTool = (0, import_react22.useCallback)((tool) => controller.setTool(tool), [controller]);
+  const setCrop = (0, import_react22.useCallback)(
     (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),
     [controller]
   );
-  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)(
+  const applyCropPreset = (0, import_react22.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
+  const resetCrop = (0, import_react22.useCallback)(() => controller.resetCrop(), [controller]);
+  const rotate = (0, import_react22.useCallback)((deg) => controller.rotate(deg), [controller]);
+  const setRotation = (0, import_react22.useCallback)((deg) => controller.setRotation(deg), [controller]);
+  const flipHorizontal = (0, import_react22.useCallback)(() => controller.flipHorizontal(), [controller]);
+  const flipVertical = (0, import_react22.useCallback)(() => controller.flipVertical(), [controller]);
+  const setAdjustments = (0, import_react22.useCallback)(
     (partial, commitToHistory = true) => controller.setAdjustments(partial, commitToHistory),
     [controller]
   );
-  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)(
+  const resetAdjustments = (0, import_react22.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const upgradeProcess = (0, import_react22.useCallback)(() => controller.upgradeProcess(), [controller]);
+  const setDepthMask = (0, import_react22.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
+  const resetDepthMask = (0, import_react22.useCallback)(() => controller.resetDepthMask(), [controller]);
+  const addAnnotation = (0, import_react22.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
+  const updateAnnotation = (0, import_react22.useCallback)(
     (id, partial, commitToHistory = true) => controller.updateAnnotation(id, partial, commitToHistory),
     [controller]
   );
-  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)(
+  const removeAnnotation = (0, import_react22.useCallback)((id) => controller.removeAnnotation(id), [controller]);
+  const clearAnnotations = (0, import_react22.useCallback)(() => controller.clearAnnotations(), [controller]);
+  const selectAnnotation = (0, import_react22.useCallback)((id) => controller.selectAnnotation(id), [controller]);
+  const undo = (0, import_react22.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react22.useCallback)(() => controller.redo(), [controller]);
+  const reset = (0, import_react22.useCallback)(() => controller.reset(), [controller]);
+  const zoomIn = (0, import_react22.useCallback)((factor) => controller.zoomIn(factor), [controller]);
+  const zoomOut = (0, import_react22.useCallback)((factor) => controller.zoomOut(factor), [controller]);
+  const resetZoom = (0, import_react22.useCallback)(() => controller.resetZoom(), [controller]);
+  const setZoom = (0, import_react22.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
+  const setPan = (0, import_react22.useCallback)((pan) => controller.setPan(pan), [controller]);
+  const setComparing = (0, import_react22.useCallback)((comp) => controller.setComparing(comp), [controller]);
+  const loadImage = (0, import_react22.useCallback)((src) => controller.loadImage(src), [controller]);
+  const toDataURL = (0, import_react22.useCallback)((opts) => controller.toDataURL(opts), [controller]);
+  const toBlob = (0, import_react22.useCallback)((opts) => controller.toBlob(opts), [controller]);
+  const toJSON = (0, import_react22.useCallback)(() => controller.toJSON(), [controller]);
+  const loadJSON = (0, import_react22.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react22.useCallback)(
     (opts) => controller.renderMask(opts),
     [controller]
   );
-  const toMaskDataURL = (0, import_react21.useCallback)(
+  const toMaskDataURL = (0, import_react22.useCallback)(
     (opts) => controller.toMaskDataURL(opts),
     [controller]
   );
-  const toSourceDataURL = (0, import_react21.useCallback)(
+  const toSourceDataURL = (0, import_react22.useCallback)(
     (opts) => controller.toSourceDataURL(opts),
     [controller]
   );
-  const applyInpaintedImage = (0, import_react21.useCallback)(
+  const applyInpaintedImage = (0, import_react22.useCallback)(
     (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
     [controller]
   );
-  const applyBackgroundRemovedImage = (0, import_react21.useCallback)(
+  const applyBackgroundRemovedImage = (0, import_react22.useCallback)(
     (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
     [controller]
   );
-  return (0, import_react21.useMemo)(
+  return (0, import_react22.useMemo)(
     () => ({
       controller,
       state,
@@ -2102,6 +2210,7 @@ function useImageEditor(options = {}) {
       flipVertical,
       setAdjustments,
       resetAdjustments,
+      upgradeProcess,
       setDepthMask,
       resetDepthMask,
       addAnnotation,
@@ -2135,7 +2244,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_image_editor2 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ImageEditor = ({
@@ -2152,16 +2261,17 @@ var ImageEditor = ({
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
-  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 legacyProcess = (0, import_image_editor2.normalizeProcessVersion)(state.adjustments.process) < import_image_editor2.LATEST_PROCESS_VERSION;
+  const canvasRef = (0, import_react23.useRef)(null);
+  const containerRef = (0, import_react23.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react23.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react23.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react23.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react23.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react23.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react23.useState)(false);
+  const [aiError, setAiError] = (0, import_react23.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react23.useState)(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -2223,18 +2333,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  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)(
+  const [activeColor, setActiveColor] = (0, import_react23.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react23.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react23.useState)(24);
+  const [textInput, setTextInput] = (0, import_react23.useState)("");
+  const draftAnnotationRef = (0, import_react23.useRef)(null);
+  const draftCropRef = (0, import_react23.useRef)(null);
+  const cropDragInfoRef = (0, import_react23.useRef)(null);
+  const annotationDragInfoRef = (0, import_react23.useRef)(null);
+  const isDrawingRef = (0, import_react23.useRef)(false);
+  const currentPathRef = (0, import_react23.useRef)([]);
+  const dragStartPointRef = (0, import_react23.useRef)(null);
+  const renderCanvas = (0, import_react23.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -2253,7 +2363,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -2261,12 +2371,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -3011,6 +3121,44 @@ var ImageEditor = ({
                   }
                 )
               ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Tint" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-mono", children: state.adjustments.tint ?? 0 })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    "aria-label": "Tint",
+                    disabled: legacyProcess,
+                    value: state.adjustments.tint ?? 0,
+                    onChange: (e) => editor.setAdjustments({ tint: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500 disabled:opacity-40"
+                  }
+                )
+              ] }),
+              legacyProcess && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "div",
+                {
+                  className: "flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200",
+                  "data-testid": "image-editor-process-notice",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Legacy rendering (process 1). Tint needs the current process." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => editor.upgradeProcess(),
+                        className: "shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30",
+                        children: "Update"
+                      }
+                    )
+                  ]
+                }
+              ),
               /* @__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" }),
@@ -3406,8 +3554,8 @@ var ImageEditor = ({
 };
 
 // src/review/useReview.ts
-var import_react23 = require("react");
-var import_editor9 = require("@pixerate/editor");
+var import_react24 = require("react");
+var import_editor10 = require("@pixerate/editor");
 var EMPTY_COMMENTS = Object.freeze({
   threads: [],
   activeThreadId: null
@@ -3424,24 +3572,24 @@ function isCommentStore(value) {
   return !!value && typeof value.getSnapshot === "function" && typeof value.createThread === "function";
 }
 function useComments(source) {
-  const store = isCommentStore(source) ? source : (0, import_editor9.getCommentStore)(source);
-  const subscribe = (0, import_react23.useCallback)(
+  const store = isCommentStore(source) ? source : (0, import_editor10.getCommentStore)(source);
+  const subscribe = (0, import_react24.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]);
+  const snapshot = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react24.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
-  const store = (0, import_editor9.getTrackChangesStore)(editor ?? null);
-  const subscribe = (0, import_react23.useCallback)(
+  const store = (0, import_editor10.getTrackChangesStore)(editor ?? null);
+  const subscribe = (0, import_react24.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 snapshot = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react24.useMemo)(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -3461,8 +3609,8 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-var import_react24 = require("react");
-var import_editor10 = require("@pixerate/editor");
+var import_react25 = require("react");
+var import_editor11 = 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";
@@ -3473,12 +3621,12 @@ var CommentsPanel = ({
   author: authorProp,
   showResolved: showResolvedInitial = false,
   className = "flex flex-col gap-2 text-sm text-foreground",
-  formatTime = (t) => (0, import_editor10.formatReviewTime)(t),
+  formatTime = (t) => (0, import_editor11.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_editor10.getCommentAuthor)(editor) ?? { id: "anonymous", name: "Anonymous" };
+  const [showResolved, setShowResolved] = (0, import_react25.useState)(showResolvedInitial);
+  const author = authorProp ?? (0, import_editor11.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: [
@@ -3521,7 +3669,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = (0, import_react24.useState)("");
+  const [draft, setDraft] = (0, import_react25.useState)("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -3631,10 +3779,13 @@ var CommentThreadCard = ({
 
 // src/review/ReviewToolbar.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var defaultDescriptionClass = "max-w-[16rem] truncate px-1 text-xs text-muted-foreground";
 var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var ReviewToolbar = ({
   editor,
-  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm"
+  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm",
+  showDescription = true,
+  descriptionClassName = defaultDescriptionClass
 }) => {
   const review = useTrackChanges(editor);
   const count = review.changes.length;
@@ -3676,6 +3827,18 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
+    showDescription && current && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "span",
+      {
+        className: descriptionClassName,
+        "data-change-type": current.type,
+        title: `${current.author.name}: ${current.description}`,
+        children: [
+          current.author.name ? `${current.author.name}: ` : "",
+          current.description
+        ]
+      }
+    ),
     /* @__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",
@@ -3718,9 +3881,196 @@ var CommentButton = ({
     children
   }
 );
+
+// src/commands/useCommandPalette.ts
+var import_react26 = require("react");
+var import_commands2 = require("@pixerate/editor/commands");
+function useCommandPalette(registry, options = {}) {
+  const optionsRef = (0, import_react26.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react26.useMemo)(
+    () => (0, import_commands2.createCommandPaletteController)(registry, {
+      context: () => {
+        const c = optionsRef.current.context;
+        if (c === void 0) return registry.context;
+        return typeof c === "function" ? c() : c;
+      },
+      scope: () => {
+        const s = optionsRef.current.scope;
+        return typeof s === "function" ? s() : s;
+      },
+      recents: options.recents,
+      recentLimit: options.recentLimit,
+      limit: options.limit,
+      platform: options.platform,
+      onRecentsChange: (recents) => optionsRef.current.onRecentsChange?.(recents),
+      onRun: (result) => optionsRef.current.onRun?.(result)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [registry]
+  );
+  const state = (0, import_react26.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const { hotkey, hotkeyTarget } = options;
+  (0, import_react26.useEffect)(() => {
+    if (!hotkey) return;
+    const target = hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    const onKeyDown = (event) => {
+      const e = event;
+      if (e.defaultPrevented || !(0, import_commands2.matchPaletteHotkey)(e, hotkey, optionsRef.current.platform)) return;
+      e.preventDefault();
+      controller.toggle();
+    };
+    target.addEventListener("keydown", onKeyDown);
+    return () => target.removeEventListener("keydown", onKeyDown);
+  }, [controller, hotkey, hotkeyTarget]);
+  return {
+    ...state,
+    controller,
+    setOpen: controller.setOpen,
+    toggle: controller.toggle,
+    setQuery: controller.setQuery,
+    setActiveIndex: controller.setActiveIndex,
+    move: controller.move,
+    run: controller.run,
+    runActive: controller.runActive,
+    handleKeyDown: controller.handleKeyDown
+  };
+}
+
+// src/commands/CommandPalette.tsx
+var import_react27 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function HighlightedLabel({ item }) {
+  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: item.label });
+  const marked = new Set(item.labelIndices);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: Array.from(item.label).map(
+    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react27.default.Fragment, { children: ch }, i)
+  ) });
+}
+var CommandPalette = ({
+  palette,
+  placeholder = "Type a command\u2026",
+  emptyMessage = "No matching commands",
+  className = ""
+}) => {
+  const inputRef = (0, import_react27.useRef)(null);
+  const listRef = (0, import_react27.useRef)(null);
+  const baseId = (0, import_react27.useId)();
+  const listId = `${baseId}-list`;
+  const optionId = (index) => `${baseId}-option-${index}`;
+  const { open, query, items, activeIndex } = palette;
+  (0, import_react27.useEffect)(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+  (0, import_react27.useEffect)(() => {
+    if (!open) return;
+    const active = listRef.current?.querySelector('[aria-selected="true"]');
+    active?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]",
+      "data-command-palette-backdrop": "",
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) palette.setOpen(false);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: `w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl ${className}`,
+          style: { background: "var(--popover, var(--background, #fff))" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-controls": listId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": items.length ? optionId(activeIndex) : void 0,
+                "aria-label": "Search commands",
+                placeholder,
+                value: query,
+                onChange: (e) => palette.setQuery(e.target.value),
+                onKeyDown: (e) => {
+                  if (palette.handleKeyDown(e.nativeEvent)) e.stopPropagation();
+                },
+                className: "w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+              }
+            ),
+            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              "li",
+              {
+                id: optionId(index),
+                role: "option",
+                "aria-selected": index === activeIndex,
+                "aria-disabled": !item.enabled || void 0,
+                "data-command-id": item.id,
+                "data-recent": item.recent ? "" : void 0,
+                title: item.disabledReason,
+                onMouseMove: () => index !== activeIndex && palette.setActiveIndex(index),
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => palette.run(item.id),
+                className: `flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm ${index === activeIndex ? "bg-muted" : ""} ${item.enabled ? "" : "cursor-default opacity-50"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HighlightedLabel, { item }),
+                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
+                  ] }),
+                  item.group && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                ]
+              },
+              item.id
+            )) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/commands/useCommandShortcuts.ts
+var import_react28 = require("react");
+function useCommandShortcuts(registry, options = {}) {
+  const optionsRef = (0, import_react28.useRef)(options);
+  optionsRef.current = options;
+  const { enabled = true, target } = options;
+  (0, import_react28.useEffect)(() => {
+    if (!registry || !enabled) return;
+    const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
+    if (!eventTarget) return;
+    const onKeyDown = (event) => {
+      const { scopes, context, allowInEditable, onRun } = optionsRef.current;
+      const result = registry.handleKeyDown(event, {
+        scopes,
+        ...allowInEditable !== void 0 ? { allowInEditable } : {},
+        ...context !== void 0 ? { context } : {}
+      });
+      if (result) onRun?.(result);
+    };
+    eventTarget.addEventListener("keydown", onKeyDown);
+    return () => eventTarget.removeEventListener("keydown", onKeyDown);
+  }, [registry, enabled, target]);
+}
+function useRegisterCommands(registry, specs) {
+  (0, import_react28.useEffect)(() => {
+    if (!registry || !specs || specs.length === 0) return;
+    return registry.register(specs);
+  }, [registry, specs]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BubbleMenu,
+  CommandPalette,
   CommentButton,
   CommentsPanel,
   DirtyTracker,
@@ -3736,10 +4086,13 @@ var CommentButton = ({
   SpreadsheetGroupRow,
   TemplateRenderer,
   VariableForm,
+  bindDirtyToHistory,
   createDirtyTracker,
   createHistoryManager,
   defaultIsEqual,
   useAgentToolProvider,
+  useCommandPalette,
+  useCommandShortcuts,
   useComments,
   useDismissGuard,
   useEditor,
@@ -3747,13 +4100,16 @@ var CommentButton = ({
   useFileImport,
   useFillHandle,
   useHistory,
+  useHistoryDirty,
   useHistoryShortcuts,
   useImageEditor,
   useNavigationGuard,
   useOutline,
   usePromptEditor,
+  useRegisterCommands,
   useSpreadsheetClipboard,
   useSpreadsheetEditor,
-  useTrackChanges
+  useTrackChanges,
+  withoutDirty
 });
 //# sourceMappingURL=index.cjs.map