@pixerate/editor-react 0.40.0 → 0.42.0

package/dist/index.cjs

@@ -108,6 +108,7 @@ __export(src_exports, {
   useSpreadsheetEditor: () => useSpreadsheetEditor,
   useSpreadsheetViewport: () => useSpreadsheetViewport,
   useTableMenu: () => useTableMenu,
+  useToolBridge: () => useToolBridge,
   useTrackChanges: () => useTrackChanges,
   withoutDirty: () => import_editor21.withoutDirty
 });
@@ -723,19 +724,44 @@ function useAgentToolProvider(registry, provider) {
   }, [registry, provider]);
 }
 
+// src/hooks/useToolBridge.ts
+var import_react12 = require("react");
+var import_tools = require("@pixerate/editor/tools");
+function useToolBridge(registry, options) {
+  const [state, setState] = (0, import_react12.useState)({ status: "off", editorId: null });
+  const key = options ? JSON.stringify([options.url, options.token, options.name, options.kind, options.reconnect]) : null;
+  (0, import_react12.useEffect)(() => {
+    if (!registry || !options) {
+      setState({ status: "off", editorId: null });
+      return;
+    }
+    let connection;
+    connection = (0, import_tools.connectToolBridge)(registry, {
+      ...options,
+      onStatus: (status, detail) => {
+        setState({ status, detail, editorId: connection?.editorId ?? null });
+        options.onStatus?.(status, detail);
+      }
+    });
+    setState({ status: connection.status, editorId: null });
+    return () => connection?.close();
+  }, [registry, key]);
+  return state;
+}
+
 // src/components/EditorContent.tsx
-var import_react12 = require("@tiptap/react");
+var import_react13 = require("@tiptap/react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var EditorContent = ({
   className,
   editor,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react12.EditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.EditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_dom = require("react-dom");
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
 var BubbleMenu = ({
@@ -747,12 +773,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = (0, import_react13.useRef)(null);
-  const [mounted, setMounted] = (0, import_react13.useState)(false);
+  const menuEl = (0, import_react14.useRef)(null);
+  const [mounted, setMounted] = (0, import_react14.useState)(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -783,7 +809,7 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor6 = require("@pixerate/editor");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TemplateRenderer = ({
@@ -797,11 +823,11 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = (0, import_react14.useMemo)(() => {
+  const displayText = (0, import_react15.useMemo)(() => {
     if (!resolve || templates.length === 0) return content;
     return (0, import_editor6.resolveTemplates)(content, templates, { bindings });
   }, [content, templates, resolve, bindings]);
-  const tokens = (0, import_react14.useMemo)(() => {
+  const tokens = (0, import_react15.useMemo)(() => {
     return (0, import_editor6.evaluatePromptTokens)(displayText, values);
   }, [displayText, values]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: tokens.map((token, index) => {
@@ -890,7 +916,7 @@ var TemplateRenderer = ({
 };
 
 // src/components/VariableForm.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_editor7 = require("@pixerate/editor");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var VariableForm = ({
@@ -902,12 +928,12 @@ var VariableForm = ({
   onChange,
   className = "flex flex-col gap-3 text-sm"
 }) => {
-  const idPrefix = (0, import_react15.useId)();
-  const [internal, setInternal] = (0, import_react15.useState)(
+  const idPrefix = (0, import_react16.useId)();
+  const [internal, setInternal] = (0, import_react16.useState)(
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = (0, import_react15.useMemo)(
+  const fields = (0, import_react16.useMemo)(
     () => (0, import_editor7.getVariableFormFields)(content, { templates, bindings }),
     [content, templates, bindings]
   );
@@ -975,26 +1001,26 @@ var VariableForm = ({
 };
 
 // src/components/MergePreview.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/hooks/useMergePreview.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_editor8 = require("@pixerate/editor");
 function useMergePreview(options) {
   const { template, templates, bindings, parseOptions } = options;
-  const [sourceText, setSourceTextState] = (0, import_react16.useState)(options.initialSource ?? "");
-  const [overrides, setOverrides] = (0, import_react16.useState)({});
-  const [index, setIndexState] = (0, import_react16.useState)(0);
-  const [result, setResult] = (0, import_react16.useState)(null);
-  const source = (0, import_react16.useMemo)(
+  const [sourceText, setSourceTextState] = (0, import_react17.useState)(options.initialSource ?? "");
+  const [overrides, setOverrides] = (0, import_react17.useState)({});
+  const [index, setIndexState] = (0, import_react17.useState)(0);
+  const [result, setResult] = (0, import_react17.useState)(null);
+  const source = (0, import_react17.useMemo)(
     () => (0, import_editor8.parseDataSource)(sourceText, parseOptions),
     [sourceText, parseOptions]
   );
-  const variables = (0, import_react16.useMemo)(
+  const variables = (0, import_react17.useMemo)(
     () => (0, import_editor8.extractVariables)(template, { templates, bindings }).map((v) => v.name),
     [template, templates, bindings]
   );
-  const mapping = (0, import_react16.useMemo)(() => {
+  const mapping = (0, import_react17.useMemo)(() => {
     const merged = {
       ...(0, import_editor8.matchFields)(variables, source.fields).mapping
     };
@@ -1008,29 +1034,29 @@ function useMergePreview(options) {
   const count = source.records.length;
   const current = count === 0 ? 0 : Math.min(index, count - 1);
   const record = source.records[current];
-  const values = (0, import_react16.useMemo)(
+  const values = (0, import_react17.useMemo)(
     () => record ? (0, import_editor8.recordToValues)(record, mapping) : {},
     [record, mapping]
   );
-  const setSourceText = (0, import_react16.useCallback)((text) => {
+  const setSourceText = (0, import_react17.useCallback)((text) => {
     setSourceTextState(text);
     setIndexState(0);
     setResult(null);
   }, []);
-  const loadFile = (0, import_react16.useCallback)(
+  const loadFile = (0, import_react17.useCallback)(
     async (file) => setSourceText(await file.text()),
     [setSourceText]
   );
-  const setIndex = (0, import_react16.useCallback)(
+  const setIndex = (0, import_react17.useCallback)(
     (next) => setIndexState(Math.max(0, Math.min(next, count - 1))),
     [count]
   );
-  const setFieldMapping = (0, import_react16.useCallback)((variable, field) => {
+  const setFieldMapping = (0, import_react17.useCallback)((variable, field) => {
     setOverrides((previous) => ({ ...previous, [variable]: field }));
     setResult(null);
   }, []);
-  const resetMapping = (0, import_react16.useCallback)(() => setOverrides({}), []);
-  const merge = (0, import_react16.useCallback)(() => {
+  const resetMapping = (0, import_react17.useCallback)(() => setOverrides({}), []);
+  const merge = (0, import_react17.useCallback)(() => {
     const merged = (0, import_editor8.mergeRecords)(template, source, {
       templates,
       bindings,
@@ -1042,7 +1068,7 @@ function useMergePreview(options) {
     setResult(merged);
     return merged;
   }, [template, source, templates, bindings, mapping, options.skipIf, options.separator, options.maxOutputs]);
-  const serialize = (0, import_react16.useCallback)(
+  const serialize = (0, import_react17.useCallback)(
     (format) => result ? (0, import_editor8.serializeMergeOutputs)(result.outputs, format, options.separator) : "",
     [result, options.separator]
   );
@@ -1095,7 +1121,7 @@ var MergePreview = ({
   downloadName = "merged",
   className = "flex flex-col gap-3 text-sm"
 }) => {
-  const id = (0, import_react17.useId)();
+  const id = (0, import_react18.useId)();
   const merge = useMergePreview({
     template: content,
     templates,
@@ -1106,7 +1132,7 @@ var MergePreview = ({
     separator,
     maxOutputs
   });
-  const [copied, setCopied] = (0, import_react17.useState)(false);
+  const [copied, setCopied] = (0, import_react18.useState)(false);
   const { source, result } = merge;
   const copy = async () => {
     try {
@@ -1263,11 +1289,11 @@ var MergePreview = ({
 };
 
 // src/hooks/useOutline.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_editor9 = require("@pixerate/editor");
 function useOutline(editor) {
-  const store = (0, import_react18.useMemo)(() => (0, import_editor9.createOutlineStore)(editor), [editor]);
-  return (0, import_react18.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const store = (0, import_react19.useMemo)(() => (0, import_editor9.createOutlineStore)(editor), [editor]);
+  return (0, import_react19.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
@@ -1312,12 +1338,12 @@ var OutlinePanel = ({
 };
 
 // src/hooks/useParagraphStyles.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_editor11 = require("@pixerate/editor");
 function useParagraphStyles(editor) {
-  const store = (0, import_react19.useMemo)(() => (0, import_editor11.createParagraphStylesStore)(editor), [editor]);
-  const snapshot = (0, import_react19.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
-  return (0, import_react19.useMemo)(() => {
+  const store = (0, import_react20.useMemo)(() => (0, import_editor11.createParagraphStylesStore)(editor), [editor]);
+  const snapshot = (0, import_react20.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return (0, import_react20.useMemo)(() => {
     const registry = (0, import_editor11.getStyleRegistry)(editor);
     const live = () => editor && !editor.isDestroyed ? editor : null;
     return {
@@ -1340,7 +1366,7 @@ function useParagraphStyles(editor) {
 }
 
 // src/components/StylesGallery.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var camel = (property) => property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 var keepSelection = (event) => event.preventDefault();
@@ -1356,9 +1382,9 @@ var StylesGallery = ({
   onChange
 }) => {
   const styles = useParagraphStyles(editor);
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [creating, setCreating] = (0, import_react20.useState)(false);
-  const [name, setName] = (0, import_react20.useState)("");
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [creating, setCreating] = (0, import_react21.useState)(false);
+  const [name, setName] = (0, import_react21.useState)("");
   const list = showAllStyles ? styles.styles : styles.gallery;
   const current = styles.currentStyle;
   const expanded = variant === "gallery" || open;
@@ -1474,13 +1500,13 @@ var StylesGallery = ({
 var import_editor21 = require("@pixerate/editor");
 
 // src/spreadsheet/useSpreadsheetEditor.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_spreadsheet = require("@pixerate/editor/spreadsheet");
 function useSpreadsheetEditor(options = {}) {
-  const optionsRef = (0, import_react21.useRef)(options);
+  const optionsRef = (0, import_react22.useRef)(options);
   optionsRef.current = options;
-  const settersRef = (0, import_react21.useRef)({});
-  const [controller] = (0, import_react21.useState)(
+  const settersRef = (0, import_react22.useRef)({});
+  const [controller] = (0, import_react22.useState)(
     () => new import_spreadsheet.SpreadsheetController({
       ...options,
       onDocumentChange: (updated) => {
@@ -1497,37 +1523,37 @@ function useSpreadsheetEditor(options = {}) {
       }
     })
   );
-  const [doc, setDoc] = (0, import_react21.useState)(() => ({ ...controller.document }));
-  const [activeCell, setActiveCell] = (0, import_react21.useState)(controller.activeCell);
-  const [selectedRange, setSelectedRange] = (0, import_react21.useState)(controller.selectedRange);
-  const [editingCell, setEditingCell] = (0, import_react21.useState)(null);
-  const [draftValue, setDraftState] = (0, import_react21.useState)("");
-  const [validationPrompt, setValidationPrompt] = (0, import_react21.useState)(null);
+  const [doc, setDoc] = (0, import_react22.useState)(() => ({ ...controller.document }));
+  const [activeCell, setActiveCell] = (0, import_react22.useState)(controller.activeCell);
+  const [selectedRange, setSelectedRange] = (0, import_react22.useState)(controller.selectedRange);
+  const [editingCell, setEditingCell] = (0, import_react22.useState)(null);
+  const [draftValue, setDraftState] = (0, import_react22.useState)("");
+  const [validationPrompt, setValidationPrompt] = (0, import_react22.useState)(null);
   settersRef.current = { setDoc, setActiveCell, setSelectedRange };
-  const setDraftValue = (0, import_react21.useCallback)((value) => {
+  const setDraftValue = (0, import_react22.useCallback)((value) => {
     controller.draftValue = value;
     setDraftState(value);
   }, [controller]);
-  const setCellValue = (0, import_react21.useCallback)((rowId, colId, raw) => {
+  const setCellValue = (0, import_react22.useCallback)((rowId, colId, raw) => {
     controller.setCellValue(rowId, colId, raw);
     setDoc({ ...controller.document });
   }, [controller]);
-  const selectCell = (0, import_react21.useCallback)((row, col, extendSelection = false) => {
+  const selectCell = (0, import_react22.useCallback)((row, col, extendSelection = false) => {
     controller.selectCell(row, col, extendSelection);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const selectRange = (0, import_react21.useCallback)((range) => {
+  const selectRange = (0, import_react22.useCallback)((range) => {
     controller.selectRange(range);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const startEditing = (0, import_react21.useCallback)((row, col, initialVal) => {
+  const startEditing = (0, import_react22.useCallback)((row, col, initialVal) => {
     controller.startEditing(row, col, initialVal);
     setActiveCell(controller.activeCell);
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
   }, [controller]);
-  const syncEditing = (0, import_react21.useCallback)(() => {
+  const syncEditing = (0, import_react22.useCallback)(() => {
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
     setValidationPrompt(controller.validationPrompt);
@@ -1535,90 +1561,90 @@ function useSpreadsheetEditor(options = {}) {
     setSelectedRange(controller.selectedRange);
     setDoc({ ...controller.document });
   }, [controller]);
-  const commitEditing = (0, import_react21.useCallback)((val) => {
+  const commitEditing = (0, import_react22.useCallback)((val) => {
     const result = controller.commitEditing(val);
     syncEditing();
     return result;
   }, [controller, syncEditing]);
-  const commitCellInput = (0, import_react21.useCallback)((rowId, colId, raw) => {
+  const commitCellInput = (0, import_react22.useCallback)((rowId, colId, raw) => {
     const result = controller.commitCellInput(rowId, colId, raw);
     syncEditing();
     return result;
   }, [controller, syncEditing]);
-  const resolveValidationPrompt = (0, import_react21.useCallback)((action) => {
+  const resolveValidationPrompt = (0, import_react22.useCallback)((action) => {
     controller.resolveValidationPrompt(action);
     syncEditing();
   }, [controller, syncEditing]);
-  const cancelEditing = (0, import_react21.useCallback)(() => {
+  const cancelEditing = (0, import_react22.useCallback)(() => {
     controller.cancelEditing();
     setEditingCell(null);
     setDraftValue("");
   }, [controller]);
-  const moveCursor = (0, import_react21.useCallback)((dir, extend = false) => {
+  const moveCursor = (0, import_react22.useCallback)((dir, extend = false) => {
     controller.moveCursor(dir, extend);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const insertColumn = (0, import_react21.useCallback)((index, config) => {
+  const insertColumn = (0, import_react22.useCallback)((index, config) => {
     controller.insertColumn(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteColumn = (0, import_react21.useCallback)((colId) => {
+  const deleteColumn = (0, import_react22.useCallback)((colId) => {
     controller.deleteColumn(colId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const insertRow = (0, import_react21.useCallback)((index, config) => {
+  const insertRow = (0, import_react22.useCallback)((index, config) => {
     controller.insertRow(index, config);
     setDoc({ ...controller.document });
   }, [controller]);
-  const deleteRow = (0, import_react21.useCallback)((rowId) => {
+  const deleteRow = (0, import_react22.useCallback)((rowId) => {
     controller.deleteRow(rowId);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setColumnWidth = (0, import_react21.useCallback)((colId, width) => {
+  const setColumnWidth = (0, import_react22.useCallback)((colId, width) => {
     controller.setColumnWidth(colId, width);
     setDoc({ ...controller.document });
   }, [controller]);
-  const autoFitColumnWidth = (0, import_react21.useCallback)((colId, customWidth) => {
+  const autoFitColumnWidth = (0, import_react22.useCallback)((colId, customWidth) => {
     controller.autoFitColumnWidth(colId, customWidth);
     setDoc({ ...controller.document });
   }, [controller]);
-  const registerDataSource = (0, import_react21.useCallback)((ds) => {
+  const registerDataSource = (0, import_react22.useCallback)((ds) => {
     controller.registerDataSource(ds);
     setDoc({ ...controller.document });
   }, [controller]);
-  const setPrimaryDataSource = (0, import_react21.useCallback)((id) => {
+  const setPrimaryDataSource = (0, import_react22.useCallback)((id) => {
     controller.setPrimaryDataSource(id);
     setDoc({ ...controller.document });
   }, [controller]);
-  const recalculateAll = (0, import_react21.useCallback)(() => {
+  const recalculateAll = (0, import_react22.useCallback)(() => {
     controller.recalculateAll();
     setDoc({ ...controller.document });
   }, [controller]);
-  const undo = (0, import_react21.useCallback)(() => {
+  const undo = (0, import_react22.useCallback)(() => {
     controller.undo();
     setDoc({ ...controller.document });
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const redo = (0, import_react21.useCallback)(() => {
+  const redo = (0, import_react22.useCallback)(() => {
     controller.redo();
     setDoc({ ...controller.document });
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
   }, [controller]);
-  const tableActions = (0, import_react21.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
-  const viewModel = (0, import_react21.useMemo)(() => controller.getViewModel(), [controller, doc]);
-  const sheets = (0, import_react21.useMemo)(() => controller.getSheets(), [controller, doc]);
-  const names = (0, import_react21.useMemo)(() => controller.getNames(), [controller, doc]);
-  const afterSheetSwitch = (0, import_react21.useCallback)(() => {
+  const tableActions = (0, import_react22.useMemo)(() => (0, import_spreadsheet.bindSpreadsheetTableActions)(controller), [controller]);
+  const viewModel = (0, import_react22.useMemo)(() => controller.getViewModel(), [controller, doc]);
+  const sheets = (0, import_react22.useMemo)(() => controller.getSheets(), [controller, doc]);
+  const names = (0, import_react22.useMemo)(() => controller.getNames(), [controller, doc]);
+  const afterSheetSwitch = (0, import_react22.useCallback)(() => {
     setEditingCell(controller.editingCell);
     setDraftValue(controller.draftValue);
     setActiveCell(controller.activeCell);
     setSelectedRange(controller.selectedRange);
     setDoc({ ...controller.document });
   }, [controller, setDraftValue]);
-  const workbookActions = (0, import_react21.useMemo)(
+  const workbookActions = (0, import_react22.useMemo)(
     () => ({
       setActiveSheet: (idOrName) => {
         const changed = controller.setActiveSheet(idOrName);
@@ -1648,7 +1674,7 @@ function useSpreadsheetEditor(options = {}) {
     }),
     [controller, afterSheetSwitch]
   );
-  const conditionalFormatOverlay = (0, import_react21.useMemo)(() => controller.getConditionalFormatOverlay(), [controller, doc]);
+  const conditionalFormatOverlay = (0, import_react22.useMemo)(() => controller.getConditionalFormatOverlay(), [controller, doc]);
   return {
     document: doc,
     activeCell,
@@ -1710,20 +1736,20 @@ function useSpreadsheetEditor(options = {}) {
 }
 
 // src/spreadsheet/SpreadsheetEditor.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_spreadsheet8 = require("@pixerate/editor/spreadsheet");
 
 // src/spreadsheet/SpreadsheetContextMenu.tsx
-var import_react22 = __toESM(require("react"), 1);
+var import_react23 = __toESM(require("react"), 1);
 var import_spreadsheet2 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var VIEWPORT_MARGIN = 4;
 var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "Table actions" }) => {
-  const menuRef = (0, import_react22.useRef)(null);
-  const onCloseRef = (0, import_react22.useRef)(onClose);
+  const menuRef = (0, import_react23.useRef)(null);
+  const onCloseRef = (0, import_react23.useRef)(onClose);
   onCloseRef.current = onClose;
-  const [position, setPosition] = (0, import_react22.useState)({ x, y });
-  (0, import_react22.useLayoutEffect)(() => {
+  const [position, setPosition] = (0, import_react23.useState)({ x, y });
+  (0, import_react23.useLayoutEffect)(() => {
     const menu = menuRef.current;
     if (!menu || typeof window === "undefined") return;
     const { width, height } = menu.getBoundingClientRect();
@@ -1735,7 +1761,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "
     );
     setPosition((prev) => prev.x === next.x && prev.y === next.y ? prev : next);
   }, [x, y, items]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const handlePointer = (e) => {
       if (!menuRef.current?.contains(e.target)) onCloseRef.current();
     };
@@ -1765,7 +1791,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "
       },
       onContextMenu: (e) => e.preventDefault(),
       onKeyDown: (e) => e.stopPropagation(),
-      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react22.default.Fragment, { children: [
+      children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react23.default.Fragment, { children: [
         item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "separator", className: "my-1 h-px bg-border" }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
@@ -1790,7 +1816,7 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose, onOpenPanel, ariaLabel = "
 };
 
 // src/spreadsheet/SpreadsheetGroupRow.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var formatSummary = (value) => value === null ? "\u2013" : String(value);
 var SpreadsheetGroupRow = ({
@@ -1824,7 +1850,7 @@ var SpreadsheetGroupRow = ({
     columns.map(({ column }, i) => {
       const summary = group.summaries[column.id];
       const before = leadingColumns !== void 0 && i === leadingColumns && leftSpace > 0 ? spacer("space:left") : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react23.default.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react24.default.Fragment, { children: [
         before,
         /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsxs)("span", { className: "truncate", children: [
           group.label,
@@ -1844,7 +1870,7 @@ var SpreadsheetGroupRow = ({
 };
 
 // src/spreadsheet/useSpreadsheetTableInteractions.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_spreadsheet3 = require("@pixerate/editor/spreadsheet");
 function gridHasFocus(grid) {
   if (!grid || typeof document === "undefined") return false;
@@ -1853,12 +1879,12 @@ function gridHasFocus(grid) {
   return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
 }
 function useSpreadsheetClipboard(gridRef, state, readOnly) {
-  const stateRef = (0, import_react24.useRef)(state);
+  const stateRef = (0, import_react25.useRef)(state);
   stateRef.current = state;
-  const readOnlyRef = (0, import_react24.useRef)(readOnly);
+  const readOnlyRef = (0, import_react25.useRef)(readOnly);
   readOnlyRef.current = readOnly;
-  const copiedRef = (0, import_react24.useRef)(false);
-  (0, import_react24.useEffect)(() => {
+  const copiedRef = (0, import_react25.useRef)(false);
+  (0, import_react25.useEffect)(() => {
     if (typeof document === "undefined") return;
     const handleCopy = (e) => {
       const s = stateRef.current;
@@ -1881,7 +1907,7 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
       document.removeEventListener("paste", handlePaste);
     };
   }, [gridRef]);
-  const copyShortcutFallback = (0, import_react24.useCallback)(() => {
+  const copyShortcutFallback = (0, import_react25.useCallback)(() => {
     copiedRef.current = false;
     setTimeout(() => {
       if (copiedRef.current) return;
@@ -1893,13 +1919,13 @@ function useSpreadsheetClipboard(gridRef, state, readOnly) {
   return { copyShortcutFallback };
 }
 function useFillHandle(state) {
-  const [drag, setDrag] = (0, import_react24.useState)(null);
-  const dragRef = (0, import_react24.useRef)(drag);
+  const [drag, setDrag] = (0, import_react25.useState)(null);
+  const dragRef = (0, import_react25.useRef)(drag);
   dragRef.current = drag;
-  const stateRef = (0, import_react24.useRef)(state);
+  const stateRef = (0, import_react25.useRef)(state);
   stateRef.current = state;
   const dragging = drag !== null;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!dragging) return;
     const handleMouseUp = () => {
       const current = dragRef.current;
@@ -1909,13 +1935,13 @@ function useFillHandle(state) {
     window.addEventListener("mouseup", handleMouseUp);
     return () => window.removeEventListener("mouseup", handleMouseUp);
   }, [dragging]);
-  const startFill = (0, import_react24.useCallback)((e) => {
+  const startFill = (0, import_react25.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     const range = stateRef.current.selectedRange;
     if (range) setDrag({ source: (0, import_spreadsheet3.normalizeRange)(range), target: null });
   }, []);
-  const extendFill = (0, import_react24.useCallback)((row, col) => {
+  const extendFill = (0, import_react25.useCallback)((row, col) => {
     const current = dragRef.current;
     if (!current) return;
     setDrag({ source: current.source, target: (0, import_spreadsheet3.computeFillTarget)(current.source, { row, col }) });
@@ -1924,12 +1950,12 @@ function useFillHandle(state) {
 }
 
 // src/spreadsheet/SpreadsheetValidationDialog.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
   const style = prompt.result.errorStyle ?? "stop";
-  const firstButton = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const firstButton = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     firstButton.current?.focus();
   }, [prompt]);
   const buttons = style === "stop" ? [
@@ -1995,7 +2021,7 @@ var SpreadsheetValidationDialog = ({ prompt, onResolve }) => {
 };
 
 // src/spreadsheet/SpreadsheetRulePanels.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_spreadsheet4 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var inputClass = "w-full rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground";
@@ -2049,18 +2075,18 @@ function RuleSwatch({ rule }) {
 }
 var SpreadsheetConditionalFormatPanel = ({ state, onClose }) => {
   const rules = state.document.table?.conditionalFormats ?? [];
-  const [kind, setKind] = (0, import_react26.useState)("greaterThan");
-  const [appliesTo, setAppliesTo] = (0, import_react26.useState)(() => selectionText(state.selectedRange));
-  const [value, setValue] = (0, import_react26.useState)("");
-  const [value2, setValue2] = (0, import_react26.useState)("");
-  const [text, setText] = (0, import_react26.useState)("");
-  const [formula, setFormula] = (0, import_react26.useState)("=");
-  const [rank, setRank] = (0, import_react26.useState)("10");
-  const [period, setPeriod] = (0, import_react26.useState)("today");
-  const [iconSet, setIconSet] = (0, import_react26.useState)("3TrafficLights1");
-  const [color, setColor] = (0, import_react26.useState)("#638ec6");
-  const [styleId, setStyleId] = (0, import_react26.useState)(import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
-  const preset = (0, import_react26.useMemo)(() => import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind), [kind]);
+  const [kind, setKind] = (0, import_react27.useState)("greaterThan");
+  const [appliesTo, setAppliesTo] = (0, import_react27.useState)(() => selectionText(state.selectedRange));
+  const [value, setValue] = (0, import_react27.useState)("");
+  const [value2, setValue2] = (0, import_react27.useState)("");
+  const [text, setText] = (0, import_react27.useState)("");
+  const [formula, setFormula] = (0, import_react27.useState)("=");
+  const [rank, setRank] = (0, import_react27.useState)("10");
+  const [period, setPeriod] = (0, import_react27.useState)("today");
+  const [iconSet, setIconSet] = (0, import_react27.useState)("3TrafficLights1");
+  const [color, setColor] = (0, import_react27.useState)("#638ec6");
+  const [styleId, setStyleId] = (0, import_react27.useState)(import_spreadsheet4.CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
+  const preset = (0, import_react27.useMemo)(() => import_spreadsheet4.CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind), [kind]);
   const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
   const add = () => {
     if (!ranges) return;
@@ -2144,15 +2170,15 @@ var SpreadsheetConditionalFormatPanel = ({ state, onClose }) => {
 };
 var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
   const rules = state.document.table?.dataValidations ?? [];
-  const [type, setType] = (0, import_react26.useState)("list");
-  const [operator, setOperator] = (0, import_react26.useState)("between");
-  const [formula1, setFormula1] = (0, import_react26.useState)("");
-  const [formula2, setFormula2] = (0, import_react26.useState)("");
-  const [errorStyle, setErrorStyle] = (0, import_react26.useState)("stop");
-  const [errorMessage, setErrorMessage] = (0, import_react26.useState)("");
-  const [inputMessage, setInputMessage] = (0, import_react26.useState)("");
-  const [ignoreBlank, setIgnoreBlank] = (0, import_react26.useState)(true);
-  const [appliesTo, setAppliesTo] = (0, import_react26.useState)(() => selectionText(state.selectedRange));
+  const [type, setType] = (0, import_react27.useState)("list");
+  const [operator, setOperator] = (0, import_react27.useState)("between");
+  const [formula1, setFormula1] = (0, import_react27.useState)("");
+  const [formula2, setFormula2] = (0, import_react27.useState)("");
+  const [errorStyle, setErrorStyle] = (0, import_react27.useState)("stop");
+  const [errorMessage, setErrorMessage] = (0, import_react27.useState)("");
+  const [inputMessage, setInputMessage] = (0, import_react27.useState)("");
+  const [ignoreBlank, setIgnoreBlank] = (0, import_react27.useState)(true);
+  const [appliesTo, setAppliesTo] = (0, import_react27.useState)(() => selectionText(state.selectedRange));
   const ranges = (0, import_spreadsheet4.parseRuleRanges)(appliesTo);
   const usesOperator = type === "whole" || type === "decimal" || type === "date" || type === "time" || type === "textLength";
   const needsTwo = usesOperator && (operator === "between" || operator === "notBetween");
@@ -2226,29 +2252,29 @@ var SpreadsheetDataValidationPanel = ({ state, onClose }) => {
 };
 
 // src/spreadsheet/useSpreadsheetViewport.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_spreadsheet5 = require("@pixerate/editor/spreadsheet");
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react27.useLayoutEffect : import_react27.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react28.useLayoutEffect : import_react28.useEffect;
 function useSpreadsheetViewport(scrollRef, view, options = {}) {
-  const metrics = (0, import_react27.useMemo)(() => (0, import_spreadsheet5.measureSpreadsheetView)(view), [view]);
+  const metrics = (0, import_react28.useMemo)(() => (0, import_spreadsheet5.measureSpreadsheetView)(view), [view]);
   const virtual = (0, import_spreadsheet5.shouldVirtualizeSpreadsheet)(view, options.virtualize ?? "auto");
-  const [viewport, setViewport] = (0, import_react27.useState)({ scrollTop: 0, scrollLeft: 0, width: 0, height: 0 });
-  const windowOptions = (0, import_react27.useMemo)(
+  const [viewport, setViewport] = (0, import_react28.useState)({ scrollTop: 0, scrollLeft: 0, width: 0, height: 0 });
+  const windowOptions = (0, import_react28.useMemo)(
     () => ({ merges: options.merges, overscanRows: options.overscanRows, overscanColumns: options.overscanColumns }),
     [options.merges, options.overscanRows, options.overscanColumns]
   );
-  const win = (0, import_react27.useMemo)(
+  const win = (0, import_react28.useMemo)(
     () => virtual ? (0, import_spreadsheet5.getSpreadsheetViewWindow)(metrics, viewport, windowOptions) : (0, import_spreadsheet5.fullSpreadsheetViewWindow)(metrics),
     [virtual, metrics, viewport, windowOptions]
   );
-  const latest = (0, import_react27.useRef)({ metrics, viewport, virtual, windowOptions });
+  const latest = (0, import_react28.useRef)({ metrics, viewport, virtual, windowOptions });
   latest.current = { metrics, viewport, virtual, windowOptions };
-  const readViewport = (0, import_react27.useCallback)(() => {
+  const readViewport = (0, import_react28.useCallback)(() => {
     const el = scrollRef.current;
     if (!el) return null;
     return { scrollTop: el.scrollTop, scrollLeft: el.scrollLeft, width: el.clientWidth, height: el.clientHeight };
   }, [scrollRef]);
-  const updateViewport = (0, import_react27.useCallback)((next) => {
+  const updateViewport = (0, import_react28.useCallback)((next) => {
     setViewport((prev) => {
       const { metrics: m, virtual: v, windowOptions: o } = latest.current;
       if (!v) return prev;
@@ -2256,7 +2282,7 @@ function useSpreadsheetViewport(scrollRef, view, options = {}) {
       return same ? prev : next;
     });
   }, []);
-  const onScroll = (0, import_react27.useCallback)(() => {
+  const onScroll = (0, import_react28.useCallback)(() => {
     const next = readViewport();
     if (next) updateViewport(next);
   }, [readViewport, updateViewport]);
@@ -2290,24 +2316,24 @@ function useSpreadsheetViewport(scrollRef, view, options = {}) {
 }
 
 // src/spreadsheet/FormulaHints.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_spreadsheet6 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
-  const [caret, setCaret] = (0, import_react28.useState)(null);
-  const [focused, setFocused] = (0, import_react28.useState)(false);
-  const [selected, setSelected] = (0, import_react28.useState)(0);
-  const [dismissed, setDismissed] = (0, import_react28.useState)(false);
-  const [position, setPosition] = (0, import_react28.useState)(null);
-  const pendingCaret = (0, import_react28.useRef)(null);
-  const hints = (0, import_react28.useMemo)(
+  const [caret, setCaret] = (0, import_react29.useState)(null);
+  const [focused, setFocused] = (0, import_react29.useState)(false);
+  const [selected, setSelected] = (0, import_react29.useState)(0);
+  const [dismissed, setDismissed] = (0, import_react29.useState)(false);
+  const [position, setPosition] = (0, import_react29.useState)(null);
+  const pendingCaret = (0, import_react29.useRef)(null);
+  const hints = (0, import_react29.useMemo)(
     () => (0, import_spreadsheet6.getFormulaHints)(value, caret ?? value.length, { limit, names }),
     [value, caret, limit, names]
   );
   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_react28.useRef)({ suggestions, selected: selectedIndex, value, caret, onAccept });
+  const latest = (0, import_react29.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;
@@ -2317,7 +2343,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
     pendingCaret.current = next.caret;
     commit(next.value);
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const input = inputRef.current;
     if (!input) return;
     const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
@@ -2367,7 +2393,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
       input.removeEventListener("keydown", onKeyDown);
     };
   }, [inputRef]);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     const input = inputRef.current;
     const at = pendingCaret.current;
     if (!input || at === null || input.value !== value) return;
@@ -2376,7 +2402,7 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
     setCaret(at);
     setSelected(0);
   }, [value, inputRef]);
-  (0, import_react28.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (!visible || !input) return;
     const rect = input.getBoundingClientRect();
@@ -2440,16 +2466,16 @@ var FormulaHints = ({ inputRef, value, onAccept, limit = 8, names }) => {
 };
 
 // src/spreadsheet/SheetTabs.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_spreadsheet7 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var SheetTabs = ({ state, readOnly = false, className = "" }) => {
   const { controller, sheets } = state;
-  const [renaming, setRenaming] = (0, import_react29.useState)(null);
-  const [error, setError] = (0, import_react29.useState)(null);
-  const [menu, setMenu] = (0, import_react29.useState)(null);
-  const dragFrom = (0, import_react29.useRef)(null);
-  const [dropTarget, setDropTarget] = (0, import_react29.useState)(null);
+  const [renaming, setRenaming] = (0, import_react30.useState)(null);
+  const [error, setError] = (0, import_react30.useState)(null);
+  const [menu, setMenu] = (0, import_react30.useState)(null);
+  const dragFrom = (0, import_react30.useRef)(null);
+  const [dropTarget, setDropTarget] = (0, import_react30.useState)(null);
   const commitRename = (cancelOnError) => {
     if (!renaming) return;
     const sheet = sheets.find((s) => s.id === renaming.id);
@@ -2651,21 +2677,21 @@ var SpreadsheetEditor = ({
 }) => {
   const defaultState = useSpreadsheetEditor();
   const state = externalState || defaultState;
-  const gridRef = (0, import_react30.useRef)(null);
-  const scrollRef = (0, import_react30.useRef)(null);
-  const formulaBarRef = (0, import_react30.useRef)(null);
-  const cellInputRef = (0, import_react30.useRef)(null);
-  const [resizingColId, setResizingColId] = (0, import_react30.useState)(null);
-  const [hoveredColId, setHoveredColId] = (0, import_react30.useState)(null);
-  const [resizeStartX, setResizeStartX] = (0, import_react30.useState)(0);
-  const [resizeStartWidth, setResizeStartWidth] = (0, import_react30.useState)(0);
+  const gridRef = (0, import_react31.useRef)(null);
+  const scrollRef = (0, import_react31.useRef)(null);
+  const formulaBarRef = (0, import_react31.useRef)(null);
+  const cellInputRef = (0, import_react31.useRef)(null);
+  const [resizingColId, setResizingColId] = (0, import_react31.useState)(null);
+  const [hoveredColId, setHoveredColId] = (0, import_react31.useState)(null);
+  const [resizeStartX, setResizeStartX] = (0, import_react31.useState)(0);
+  const [resizeStartWidth, setResizeStartWidth] = (0, import_react31.useState)(0);
   const view = state.viewModel;
   const { window: viewWindow, onScroll: handleGridScroll } = useSpreadsheetViewport(scrollRef, view, {
     virtualize,
     merges: state.document.table?.merges,
     activeCell: state.activeCell
   });
-  const columnSlots = (0, import_react30.useMemo)(() => {
+  const columnSlots = (0, import_react31.useMemo)(() => {
     const col = (viewCol) => ({ kind: "col", viewCol });
     if (!viewWindow.virtual) return view.columns.map(col);
     const slots = view.columns.slice(0, viewWindow.frozenColumns).map(col);
@@ -2674,11 +2700,11 @@ var SpreadsheetEditor = ({
     if (viewWindow.rightSpace > 0) slots.push({ kind: "space", key: "space:right", width: viewWindow.rightSpace });
     return slots;
   }, [view, viewWindow]);
-  const renderedColumns = (0, import_react30.useMemo)(
+  const renderedColumns = (0, import_react31.useMemo)(
     () => columnSlots.flatMap((slot) => slot.kind === "col" ? [slot.viewCol] : []),
     [columnSlots]
   );
-  const rowSlots = (0, import_react30.useMemo)(() => {
+  const rowSlots = (0, import_react31.useMemo)(() => {
     const row = (viewRow) => ({ kind: "row", viewRow });
     if (!viewWindow.virtual) return view.rows.map(row);
     const slots = view.rows.slice(0, viewWindow.frozenRows).map(row);
@@ -2689,16 +2715,16 @@ var SpreadsheetEditor = ({
   }, [view, viewWindow]);
   const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
   const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = (0, import_react30.useState)(null);
-  const [panel, setPanel] = (0, import_react30.useState)(null);
-  const [listMenu, setListMenu] = (0, import_react30.useState)(null);
+  const [menu, setMenu] = (0, import_react31.useState)(null);
+  const [panel, setPanel] = (0, import_react31.useState)(null);
+  const [listMenu, setListMenu] = (0, import_react31.useState)(null);
   const overlay = state.conditionalFormatOverlay;
   const filter = state.document.table?.filter;
-  const filteredColIds = (0, import_react30.useMemo)(
+  const filteredColIds = (0, import_react31.useMemo)(
     () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
     [filter]
   );
-  const handleCellContextMenu = (0, import_react30.useCallback)((rIdx, cIdx, e) => {
+  const handleCellContextMenu = (0, import_react31.useCallback)((rIdx, cIdx, e) => {
     if (readOnly) return;
     e.preventDefault();
     if (state.editingCell) state.commitEditing();
@@ -2707,33 +2733,33 @@ var SpreadsheetEditor = ({
     }
     setMenu({ x: e.clientX, y: e.clientY, items: (0, import_spreadsheet8.getSpreadsheetMenuItems)(state.controller, { row: rIdx, col: cIdx }) });
   }, [readOnly, state]);
-  const nameSuggestions = (0, import_react30.useMemo)(
+  const nameSuggestions = (0, import_react31.useMemo)(
     () => state.controller.getNameSuggestions(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.document]
   );
-  const activeRawValue = (0, import_react30.useMemo)(() => {
+  const activeRawValue = (0, import_react31.useMemo)(() => {
     if (!state.activeCell) return "";
     const row = state.document.rows[state.activeCell.row];
     const col = state.document.columns[state.activeCell.col];
     if (!row || !col) return "";
     return state.getCell(row.id, col.id).raw;
   }, [state.activeCell, state.document]);
-  const activeSpill = (0, import_react30.useMemo)(
+  const activeSpill = (0, import_react31.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_react30.useMemo)(() => {
+  const coordLabel = (0, import_react31.useMemo)(() => {
     if (!state.activeCell) return "--";
     const colName = (0, import_spreadsheet8.indexToColName)(state.activeCell.col);
     return `${colName}${state.activeCell.row + 1}`;
   }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = (0, import_react30.useState)(null);
+  const [formulaDraft, setFormulaDraft] = (0, import_react31.useState)(null);
   const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
   const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     setFormulaDraft(null);
   }, [state.activeCell?.row, state.activeCell?.col]);
   const commitFormulaBar = () => {
@@ -2749,19 +2775,19 @@ var SpreadsheetEditor = ({
     }
     setFormulaDraft(null);
   };
-  const handleCellClick = (0, import_react30.useCallback)((rIdx, cIdx, e) => {
+  const handleCellClick = (0, import_react31.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_react30.useCallback)((rIdx, cIdx) => {
+  const handleCellDblClick = (0, import_react31.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_react30.useCallback)((e) => {
+  const handleKeyDown = (0, import_react31.useCallback)((e) => {
     if (state.editingCell) {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -2833,12 +2859,12 @@ var SpreadsheetEditor = ({
       }
     }
   }, [readOnly, state, copyShortcutFallback]);
-  const activeListValues = (0, import_react30.useMemo)(
+  const activeListValues = (0, import_react31.useMemo)(
     () => state.activeCell && !readOnly ? state.controller.getValidationListValues(state.activeCell.row, state.activeCell.col) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document, readOnly]
   );
-  const activeRule = (0, import_react30.useMemo)(
+  const activeRule = (0, import_react31.useMemo)(
     () => state.activeCell ? state.controller.getDataValidationAt(state.activeCell.row, state.activeCell.col) : void 0,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.controller, state.activeCell, state.document]
@@ -2852,7 +2878,7 @@ var SpreadsheetEditor = ({
     const rect = td?.getBoundingClientRect();
     setListMenu({ x: rect ? rect.left : 0, y: rect ? rect.bottom : 0, row, col, values });
   }
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!listMenu) return;
     const close = (e) => {
       if (!e.target?.closest?.('[aria-label="Allowed values"], .spreadsheet-list-arrow')) setListMenu(null);
@@ -2875,11 +2901,11 @@ var SpreadsheetEditor = ({
       else gridRef.current?.focus();
     });
   };
-  const stateRef = (0, import_react30.useRef)(state);
+  const stateRef = (0, import_react31.useRef)(state);
   stateRef.current = state;
-  const onColumnResizeRef = (0, import_react30.useRef)(onColumnResize);
+  const onColumnResizeRef = (0, import_react31.useRef)(onColumnResize);
   onColumnResizeRef.current = onColumnResize;
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!resizingColId) return;
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
@@ -2930,7 +2956,7 @@ var SpreadsheetEditor = ({
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = (0, import_react30.useCallback)((el, container) => {
+  const measureElementContentWidth = (0, import_react31.useCallback)((el, container) => {
     if (typeof document === "undefined") return 0;
     let maxW = el.scrollWidth || 0;
     const firstChild = el.firstElementChild;
@@ -2978,7 +3004,7 @@ var SpreadsheetEditor = ({
     }
     return maxW;
   }, []);
-  const autoFitColumn = (0, import_react30.useCallback)((colId, colIndex) => {
+  const autoFitColumn = (0, import_react31.useCallback)((colId, colIndex) => {
     const col = state.document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
@@ -3014,12 +3040,12 @@ var SpreadsheetEditor = ({
       onColumnResize(updatedCol.id, updatedCol.width || 130);
     }
   }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = (0, import_react30.useCallback)((colId, colIndex, e) => {
+  const handleResizeDblClick = (0, import_react31.useCallback)((colId, colIndex, e) => {
     e.preventDefault();
     e.stopPropagation();
     autoFitColumn(colId, colIndex);
   }, [autoFitColumn]);
-  const handleHeaderDblClick = (0, import_react30.useCallback)((colId, colIndex, e) => {
+  const handleHeaderDblClick = (0, import_react31.useCallback)((colId, colIndex, e) => {
     const target = e.currentTarget;
     if (target) {
       const rect = target.getBoundingClientRect();
@@ -3410,19 +3436,19 @@ var SpreadsheetEditor = ({
 };
 
 // src/spreadsheet/NameManager.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_spreadsheet9 = require("@pixerate/editor/spreadsheet");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var EMPTY_DRAFT = { original: null, name: "", refersTo: "=", scope: "", comment: "" };
 var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
   const { controller, sheets } = state;
-  const rows = (0, import_react31.useMemo)(
+  const rows = (0, import_react32.useMemo)(
     () => (0, import_spreadsheet9.getNameManagerRows)(controller),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, state.document, state.names]
   );
-  const [draft, setDraft] = (0, import_react31.useState)(EMPTY_DRAFT);
-  const [error, setError] = (0, import_react31.useState)(null);
+  const [draft, setDraft] = (0, import_react32.useState)(EMPTY_DRAFT);
+  const [error, setError] = (0, import_react32.useState)(null);
   const edit = (row) => {
     setError(null);
     setDraft({
@@ -3565,7 +3591,7 @@ var NameManager = ({ state, readOnly = false, onClose, className = "" }) => {
 };
 
 // src/slots.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var defaultSlots = {
   Button: (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -3587,119 +3613,119 @@ var defaultSlots = {
     props.onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
-var EditorSlotsContext = (0, import_react32.createContext)(defaultSlots);
+var EditorSlotsContext = (0, import_react33.createContext)(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = (0, import_react32.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
+  const mergedSlots = (0, import_react33.useMemo)(() => ({ ...defaultSlots, ...slots }), [slots]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
-  return (0, import_react32.useContext)(EditorSlotsContext);
+  return (0, import_react33.useContext)(EditorSlotsContext);
 }
 
 // src/image-editor/useImageEditor.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_image_editor = require("@pixerate/editor/image-editor");
 function useImageEditor(options = {}) {
-  const controllerRef = (0, import_react33.useRef)(null);
+  const controllerRef = (0, import_react34.useRef)(null);
   if (!controllerRef.current) {
     controllerRef.current = new import_image_editor.ImageEditorController(options);
   }
   const controller = controllerRef.current;
-  const [state, setState] = (0, import_react33.useState)(() => controller.getState());
-  const [historyTicks, setHistoryTicks] = (0, import_react33.useState)(0);
-  const [histogram, setHistogram] = (0, import_react33.useState)(() => controller.getHistogram());
-  (0, import_react33.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
-  (0, import_react33.useEffect)(() => {
+  const [state, setState] = (0, import_react34.useState)(() => controller.getState());
+  const [historyTicks, setHistoryTicks] = (0, import_react34.useState)(0);
+  const [histogram, setHistogram] = (0, import_react34.useState)(() => controller.getHistogram());
+  (0, import_react34.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
+  (0, import_react34.useEffect)(() => {
     const unsub = controller.subscribe((next) => {
       setState(next);
       setHistoryTicks((t) => t + 1);
     });
     return unsub;
   }, [controller]);
-  const loadedImageRef = (0, import_react33.useRef)(options.image);
-  (0, import_react33.useEffect)(() => {
+  const loadedImageRef = (0, import_react34.useRef)(options.image);
+  (0, import_react34.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_react33.useCallback)((tool) => controller.setTool(tool), [controller]);
-  const setCrop = (0, import_react33.useCallback)(
+  const setTool = (0, import_react34.useCallback)((tool) => controller.setTool(tool), [controller]);
+  const setCrop = (0, import_react34.useCallback)(
     (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),
     [controller]
   );
-  const applyCropPreset = (0, import_react33.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
-  const resetCrop = (0, import_react33.useCallback)(() => controller.resetCrop(), [controller]);
-  const rotate = (0, import_react33.useCallback)((deg) => controller.rotate(deg), [controller]);
-  const setRotation = (0, import_react33.useCallback)((deg) => controller.setRotation(deg), [controller]);
-  const flipHorizontal = (0, import_react33.useCallback)(() => controller.flipHorizontal(), [controller]);
-  const flipVertical = (0, import_react33.useCallback)(() => controller.flipVertical(), [controller]);
-  const setAdjustments = (0, import_react33.useCallback)(
+  const applyCropPreset = (0, import_react34.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
+  const resetCrop = (0, import_react34.useCallback)(() => controller.resetCrop(), [controller]);
+  const rotate = (0, import_react34.useCallback)((deg) => controller.rotate(deg), [controller]);
+  const setRotation = (0, import_react34.useCallback)((deg) => controller.setRotation(deg), [controller]);
+  const flipHorizontal = (0, import_react34.useCallback)(() => controller.flipHorizontal(), [controller]);
+  const flipVertical = (0, import_react34.useCallback)(() => controller.flipVertical(), [controller]);
+  const setAdjustments = (0, import_react34.useCallback)(
     (partial, commitToHistory = true) => controller.setAdjustments(partial, commitToHistory),
     [controller]
   );
-  const resetAdjustments = (0, import_react33.useCallback)(() => controller.resetAdjustments(), [controller]);
-  const upgradeProcess = (0, import_react33.useCallback)(() => controller.upgradeProcess(), [controller]);
-  const addAdjustmentLayer = (0, import_react33.useCallback)(
+  const resetAdjustments = (0, import_react34.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const upgradeProcess = (0, import_react34.useCallback)(() => controller.upgradeProcess(), [controller]);
+  const addAdjustmentLayer = (0, import_react34.useCallback)(
     (init, index) => controller.addAdjustmentLayer(init, index),
     [controller]
   );
-  const updateAdjustmentLayer = (0, import_react33.useCallback)(
+  const updateAdjustmentLayer = (0, import_react34.useCallback)(
     (id, update, commitToHistory = true) => controller.updateAdjustmentLayer(id, update, commitToHistory),
     [controller]
   );
-  const removeAdjustmentLayer = (0, import_react33.useCallback)((id) => controller.removeAdjustmentLayer(id), [controller]);
-  const moveAdjustmentLayer = (0, import_react33.useCallback)((id, to) => controller.moveAdjustmentLayer(id, to), [controller]);
-  const toggleAdjustmentLayer = (0, import_react33.useCallback)(
+  const removeAdjustmentLayer = (0, import_react34.useCallback)((id) => controller.removeAdjustmentLayer(id), [controller]);
+  const moveAdjustmentLayer = (0, import_react34.useCallback)((id, to) => controller.moveAdjustmentLayer(id, to), [controller]);
+  const toggleAdjustmentLayer = (0, import_react34.useCallback)(
     (id, enabled) => controller.toggleAdjustmentLayer(id, enabled),
     [controller]
   );
-  const setDepthMask = (0, import_react33.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
-  const resetDepthMask = (0, import_react33.useCallback)(() => controller.resetDepthMask(), [controller]);
-  const addAnnotation = (0, import_react33.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
-  const updateAnnotation = (0, import_react33.useCallback)(
+  const setDepthMask = (0, import_react34.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
+  const resetDepthMask = (0, import_react34.useCallback)(() => controller.resetDepthMask(), [controller]);
+  const addAnnotation = (0, import_react34.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
+  const updateAnnotation = (0, import_react34.useCallback)(
     (id, partial, commitToHistory = true) => controller.updateAnnotation(id, partial, commitToHistory),
     [controller]
   );
-  const removeAnnotation = (0, import_react33.useCallback)((id) => controller.removeAnnotation(id), [controller]);
-  const clearAnnotations = (0, import_react33.useCallback)(() => controller.clearAnnotations(), [controller]);
-  const selectAnnotation = (0, import_react33.useCallback)((id) => controller.selectAnnotation(id), [controller]);
-  const undo = (0, import_react33.useCallback)(() => controller.undo(), [controller]);
-  const redo = (0, import_react33.useCallback)(() => controller.redo(), [controller]);
-  const reset = (0, import_react33.useCallback)(() => controller.reset(), [controller]);
-  const zoomIn = (0, import_react33.useCallback)((factor) => controller.zoomIn(factor), [controller]);
-  const zoomOut = (0, import_react33.useCallback)((factor) => controller.zoomOut(factor), [controller]);
-  const resetZoom = (0, import_react33.useCallback)(() => controller.resetZoom(), [controller]);
-  const setZoom = (0, import_react33.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
-  const setPan = (0, import_react33.useCallback)((pan) => controller.setPan(pan), [controller]);
-  const setComparing = (0, import_react33.useCallback)((comp) => controller.setComparing(comp), [controller]);
-  const loadImage = (0, import_react33.useCallback)((src) => controller.loadImage(src), [controller]);
-  const toDataURL = (0, import_react33.useCallback)((opts) => controller.toDataURL(opts), [controller]);
-  const toBlob = (0, import_react33.useCallback)((opts) => controller.toBlob(opts), [controller]);
-  const toJSON = (0, import_react33.useCallback)(() => controller.toJSON(), [controller]);
-  const loadJSON = (0, import_react33.useCallback)((data) => controller.loadJSON(data), [controller]);
-  const renderMask = (0, import_react33.useCallback)(
+  const removeAnnotation = (0, import_react34.useCallback)((id) => controller.removeAnnotation(id), [controller]);
+  const clearAnnotations = (0, import_react34.useCallback)(() => controller.clearAnnotations(), [controller]);
+  const selectAnnotation = (0, import_react34.useCallback)((id) => controller.selectAnnotation(id), [controller]);
+  const undo = (0, import_react34.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react34.useCallback)(() => controller.redo(), [controller]);
+  const reset = (0, import_react34.useCallback)(() => controller.reset(), [controller]);
+  const zoomIn = (0, import_react34.useCallback)((factor) => controller.zoomIn(factor), [controller]);
+  const zoomOut = (0, import_react34.useCallback)((factor) => controller.zoomOut(factor), [controller]);
+  const resetZoom = (0, import_react34.useCallback)(() => controller.resetZoom(), [controller]);
+  const setZoom = (0, import_react34.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
+  const setPan = (0, import_react34.useCallback)((pan) => controller.setPan(pan), [controller]);
+  const setComparing = (0, import_react34.useCallback)((comp) => controller.setComparing(comp), [controller]);
+  const loadImage = (0, import_react34.useCallback)((src) => controller.loadImage(src), [controller]);
+  const toDataURL = (0, import_react34.useCallback)((opts) => controller.toDataURL(opts), [controller]);
+  const toBlob = (0, import_react34.useCallback)((opts) => controller.toBlob(opts), [controller]);
+  const toJSON = (0, import_react34.useCallback)(() => controller.toJSON(), [controller]);
+  const loadJSON = (0, import_react34.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react34.useCallback)(
     (opts) => controller.renderMask(opts),
     [controller]
   );
-  const toMaskDataURL = (0, import_react33.useCallback)(
+  const toMaskDataURL = (0, import_react34.useCallback)(
     (opts) => controller.toMaskDataURL(opts),
     [controller]
   );
-  const toSourceDataURL = (0, import_react33.useCallback)(
+  const toSourceDataURL = (0, import_react34.useCallback)(
     (opts) => controller.toSourceDataURL(opts),
     [controller]
   );
-  const applyInpaintedImage = (0, import_react33.useCallback)(
+  const applyInpaintedImage = (0, import_react34.useCallback)(
     (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
     [controller]
   );
-  const applyBackgroundRemovedImage = (0, import_react33.useCallback)(
+  const applyBackgroundRemovedImage = (0, import_react34.useCallback)(
     (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
     [controller]
   );
-  return (0, import_react33.useMemo)(
+  return (0, import_react34.useMemo)(
     () => ({
       controller,
       state,
@@ -3755,7 +3781,7 @@ function useImageEditor(options = {}) {
 }
 
 // src/image-editor/ImageEditor.tsx
-var import_react39 = __toESM(require("react"), 1);
+var import_react40 = __toESM(require("react"), 1);
 var import_image_editor8 = require("@pixerate/editor/image-editor");
 
 // src/image-editor/ControlSlider.tsx
@@ -3788,7 +3814,7 @@ var ControlSlider = ({ spec, value, onChange, disabled, label }) => {
 };
 
 // src/image-editor/Histogram.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_image_editor3 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var FILL = {
@@ -3800,7 +3826,7 @@ var FILL = {
 var W = 256;
 var Histogram = ({ histogram, channel = "rgb", height = 64, className = "", style }) => {
   const channels = channel === "rgb" ? ["luminance", "red", "green", "blue"] : [channel];
-  const paths = (0, import_react34.useMemo)(
+  const paths = (0, import_react35.useMemo)(
     () => histogram && histogram.samples > 0 ? channels.map((c) => ({ c, d: (0, import_image_editor3.histogramPath)(histogram, c, W, height) })) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [histogram, channel, height]
@@ -3826,24 +3852,24 @@ var Histogram = ({ histogram, channel = "rgb", height = 64, className = "", styl
   );
 };
 function useImageHistogram(controller) {
-  const [histogram, setHistogram] = (0, import_react34.useState)(() => controller.getHistogram());
-  (0, import_react34.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
+  const [histogram, setHistogram] = (0, import_react35.useState)(() => controller.getHistogram());
+  (0, import_react35.useEffect)(() => controller.subscribeHistogram(setHistogram), [controller]);
   return histogram;
 }
 
 // src/image-editor/AdjustmentLayersPanel.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_image_editor5 = require("@pixerate/editor/image-editor");
 
 // src/image-editor/CurvesEditor.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_image_editor4 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var BOX = 256;
 var STROKE = { master: "#e2e8f0", red: "#ef4444", green: "#22c55e", blue: "#3b82f6" };
 var CurvesEditor = ({ points, onChange, histogram, channel = "master", size = 200 }) => {
-  const svgRef = (0, import_react35.useRef)(null);
-  const [drag, setDrag] = (0, import_react35.useState)(null);
+  const svgRef = (0, import_react36.useRef)(null);
+  const [drag, setDrag] = (0, import_react36.useState)(null);
   const toBox = (e) => {
     const rect = svgRef.current?.getBoundingClientRect();
     if (!rect || !rect.width || !rect.height) return { x: 0, y: 0 };
@@ -3942,14 +3968,14 @@ var HueRangeStrip = ({ bounds }) => {
 };
 var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
   const follow = layersProp === void 0;
-  const [, setTick] = (0, import_react36.useState)(0);
-  (0, import_react36.useEffect)(() => follow ? controller.subscribe(() => setTick((n) => n + 1)) : void 0, [controller, follow]);
+  const [, setTick] = (0, import_react37.useState)(0);
+  (0, import_react37.useEffect)(() => follow ? controller.subscribe(() => setTick((n) => n + 1)) : void 0, [controller, follow]);
   const layers = layersProp ?? controller.getAdjustmentLayers();
-  const [newKind, setNewKind] = (0, import_react36.useState)("curves");
-  const [selectedId, setSelectedId] = (0, import_react36.useState)(null);
-  const [channel, setChannel] = (0, import_react36.useState)("master");
-  const [range, setRange] = (0, import_react36.useState)(-1);
-  const [tone, setTone] = (0, import_react36.useState)("midtones");
+  const [newKind, setNewKind] = (0, import_react37.useState)("curves");
+  const [selectedId, setSelectedId] = (0, import_react37.useState)(null);
+  const [channel, setChannel] = (0, import_react37.useState)("master");
+  const [range, setRange] = (0, import_react37.useState)(-1);
+  const [tone, setTone] = (0, import_react37.useState)("midtones");
   const selected = layers.find((l) => l.id === selectedId) ?? null;
   const topFirst = [...layers].reverse();
   const setParam = (layer, path, value, commit = true) => controller.updateAdjustmentLayer(layer.id, { params: (0, import_image_editor5.setControlPath)(layer.params, path, value) }, commit);
@@ -4188,7 +4214,7 @@ var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
 };
 
 // src/image-editor/SelectionOptionsBar.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_image_editor6 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var MODIFY_OPS = [
@@ -4207,7 +4233,7 @@ var SelectionOptionsBar = ({
   quickMask,
   className = ""
 }) => {
-  const [radius, setRadius] = (0, import_react37.useState)(2);
+  const [radius, setRadius] = (0, import_react38.useState)(2);
   const set = (patch) => onOptionsChange({ ...options, ...patch });
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const qm = quickMask ?? Boolean(controller.getState().quickMask);
@@ -4277,17 +4303,17 @@ var SelectionOptionsBar = ({
 };
 
 // src/image-editor/RefineEdgePanel.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_image_editor7 = require("@pixerate/editor/image-editor");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
 var button = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
 var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
-  const [params, setParams] = (0, import_react38.useState)(DEFAULT_PARAMS);
-  const [busy, setBusy] = (0, import_react38.useState)(false);
-  const [error, setError] = (0, import_react38.useState)(null);
-  const [layerId, setLayerId] = (0, import_react38.useState)("");
-  const [newKind, setNewKind] = (0, import_react38.useState)("hueSaturation");
+  const [params, setParams] = (0, import_react39.useState)(DEFAULT_PARAMS);
+  const [busy, setBusy] = (0, import_react39.useState)(false);
+  const [error, setError] = (0, import_react39.useState)(null);
+  const [layerId, setLayerId] = (0, import_react39.useState)("");
+  const [newKind, setNewKind] = (0, import_react39.useState)("hueSaturation");
   const sel = selection === void 0 ? controller.getSelection() : selection;
   const list = layers ?? controller.getAdjustmentLayers();
   const target = list.find((l) => l.id === layerId) ?? list[list.length - 1];
@@ -4444,25 +4470,25 @@ var ImageEditor = ({
   const editor = externalEditor || internalEditor;
   const { state, controller } = editor;
   const legacyProcess = (0, import_image_editor8.normalizeProcessVersion)(state.adjustments.process) < import_image_editor8.LATEST_PROCESS_VERSION;
-  const canvasRef = (0, import_react39.useRef)(null);
-  const containerRef = (0, import_react39.useRef)(null);
-  const [activeTab, setActiveTab] = (0, import_react39.useState)("crop");
-  const [activeCropRatio, setActiveCropRatio] = (0, import_react39.useState)(null);
-  const [selectionOptions, setSelectionOptions] = (0, import_react39.useState)(import_image_editor8.DEFAULT_SELECTION_TOOL_OPTIONS);
-  const selectionOptionsRef = (0, import_react39.useRef)(selectionOptions);
+  const canvasRef = (0, import_react40.useRef)(null);
+  const containerRef = (0, import_react40.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react40.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react40.useState)(null);
+  const [selectionOptions, setSelectionOptions] = (0, import_react40.useState)(import_image_editor8.DEFAULT_SELECTION_TOOL_OPTIONS);
+  const selectionOptionsRef = (0, import_react40.useRef)(selectionOptions);
   selectionOptionsRef.current = selectionOptions;
-  const selectionGestureRef = (0, import_react39.useRef)(null);
+  const selectionGestureRef = (0, import_react40.useRef)(null);
   if (!selectionGestureRef.current || selectionGestureRef.current.controller !== controller) {
     selectionGestureRef.current = new import_image_editor8.SelectionGesture(controller, () => selectionOptionsRef.current);
   }
-  const selectionDraftRef = (0, import_react39.useRef)(null);
-  const [selectionError, setSelectionError] = (0, import_react39.useState)(null);
-  const [inpaintPrompt, setInpaintPrompt] = (0, import_react39.useState)("");
-  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react39.useState)("annotations");
-  const [isRemovingBg, setIsRemovingBg] = (0, import_react39.useState)(false);
-  const [isInpainting, setIsInpainting] = (0, import_react39.useState)(false);
-  const [aiError, setAiError] = (0, import_react39.useState)(null);
-  const [aiSuccess, setAiSuccess] = (0, import_react39.useState)(null);
+  const selectionDraftRef = (0, import_react40.useRef)(null);
+  const [selectionError, setSelectionError] = (0, import_react40.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react40.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react40.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react40.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react40.useState)(false);
+  const [aiError, setAiError] = (0, import_react40.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react40.useState)(null);
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -4524,18 +4550,18 @@ var ImageEditor = ({
       setIsInpainting(false);
     }
   };
-  const [activeColor, setActiveColor] = (0, import_react39.useState)("#ef4444");
-  const [strokeWidth, setStrokeWidth] = (0, import_react39.useState)(3);
-  const [fontSize, setFontSize] = (0, import_react39.useState)(24);
-  const [textInput, setTextInput] = (0, import_react39.useState)("");
-  const draftAnnotationRef = (0, import_react39.useRef)(null);
-  const draftCropRef = (0, import_react39.useRef)(null);
-  const cropDragInfoRef = (0, import_react39.useRef)(null);
-  const annotationDragInfoRef = (0, import_react39.useRef)(null);
-  const isDrawingRef = (0, import_react39.useRef)(false);
-  const currentPathRef = (0, import_react39.useRef)([]);
-  const dragStartPointRef = (0, import_react39.useRef)(null);
-  const renderCanvas = (0, import_react39.useCallback)(
+  const [activeColor, setActiveColor] = (0, import_react40.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react40.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react40.useState)(24);
+  const [textInput, setTextInput] = (0, import_react40.useState)("");
+  const draftAnnotationRef = (0, import_react40.useRef)(null);
+  const draftCropRef = (0, import_react40.useRef)(null);
+  const cropDragInfoRef = (0, import_react40.useRef)(null);
+  const annotationDragInfoRef = (0, import_react40.useRef)(null);
+  const isDrawingRef = (0, import_react40.useRef)(false);
+  const currentPathRef = (0, import_react40.useRef)([]);
+  const dragStartPointRef = (0, import_react40.useRef)(null);
+  const renderCanvas = (0, import_react40.useCallback)(
     async (draftAnnotation, draftCrop) => {
       const canvas = canvasRef.current;
       const container = containerRef.current;
@@ -4555,7 +4581,7 @@ var ImageEditor = ({
     },
     [controller, activeTab]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
     const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
     const animId = raf(() => {
@@ -4563,12 +4589,12 @@ var ImageEditor = ({
     });
     return () => caf(animId);
   }, [renderCanvas, state]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (activeTab === "crop" && editor.state.activeTool !== "crop") {
       editor.setTool("crop");
     }
   }, [activeTab, editor]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     if (typeof ResizeObserver !== "undefined") {
@@ -5264,7 +5290,7 @@ var ImageEditor = ({
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Histogram, { histogram: editor.histogram }),
-              import_image_editor8.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react39.default.Fragment, { children: [
+              import_image_editor8.IMAGE_ADJUSTMENT_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react40.default.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   ControlSlider,
                   {
@@ -5670,7 +5696,7 @@ var ImageEditor = ({
 };
 
 // src/review/useReview.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_editor12 = require("@pixerate/editor");
 var EMPTY_COMMENTS = Object.freeze({
   threads: [],
@@ -5689,23 +5715,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : (0, import_editor12.getCommentStore)(source);
-  const subscribe = (0, import_react40.useCallback)(
+  const subscribe = (0, import_react41.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = (0, import_react40.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react40.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = (0, import_react41.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react41.useMemo)(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = (0, import_editor12.getTrackChangesStore)(editor ?? null);
-  const subscribe = (0, import_react40.useCallback)(
+  const subscribe = (0, import_react41.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = (0, import_react40.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react40.useMemo)(() => {
+  const snapshot = (0, import_react41.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react41.useMemo)(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -5728,7 +5754,7 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_editor13 = require("@pixerate/editor");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var buttonClass2 = "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50";
@@ -5744,7 +5770,7 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = (0, import_react41.useState)(showResolvedInitial);
+  const [showResolved, setShowResolved] = (0, import_react42.useState)(showResolvedInitial);
   const author = authorProp ?? (0, import_editor13.getCommentAuthor)(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
@@ -5788,7 +5814,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = (0, import_react41.useState)("");
+  const [draft, setDraft] = (0, import_react42.useState)("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -6002,13 +6028,13 @@ var CommentButton = ({
 );
 
 // src/review/useDocumentCompare.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_editor14 = require("@pixerate/editor");
 function useDocumentCompare(editor, options) {
-  const [summary, setSummary] = (0, import_react42.useState)(null);
-  const defaults = (0, import_react42.useRef)(options);
+  const [summary, setSummary] = (0, import_react43.useState)(null);
+  const defaults = (0, import_react43.useRef)(options);
   defaults.current = options;
-  const compare = (0, import_react42.useCallback)(
+  const compare = (0, import_react43.useCallback)(
     (original, revised, overrides) => {
       if (!editor || editor.isDestroyed) return null;
       const result = (0, import_editor14.applyDocumentComparison)(editor, original, revised, {
@@ -6020,8 +6046,8 @@ function useDocumentCompare(editor, options) {
     },
     [editor]
   );
-  const clear = (0, import_react42.useCallback)(() => setSummary(null), []);
-  return (0, import_react42.useMemo)(() => ({ summary, compare, clear }), [summary, compare, clear]);
+  const clear = (0, import_react43.useCallback)(() => setSummary(null), []);
+  return (0, import_react43.useMemo)(() => ({ summary, compare, clear }), [summary, compare, clear]);
 }
 
 // src/review/TrackedChangesList.tsx
@@ -6072,12 +6098,12 @@ var TrackedChangesList = ({
 };
 
 // src/commands/useCommandPalette.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_commands2 = require("@pixerate/editor/commands");
 function useCommandPalette(registry, options = {}) {
-  const optionsRef = (0, import_react43.useRef)(options);
+  const optionsRef = (0, import_react44.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react43.useMemo)(
+  const controller = (0, import_react44.useMemo)(
     () => (0, import_commands2.createCommandPaletteController)(registry, {
       context: () => {
         const c = optionsRef.current.context;
@@ -6098,9 +6124,9 @@ function useCommandPalette(registry, options = {}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [registry]
   );
-  const state = (0, import_react43.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const state = (0, import_react44.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
   const { hotkey, hotkeyTarget } = options;
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (!hotkey) return;
     const target = hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
@@ -6128,13 +6154,13 @@ function useCommandPalette(registry, options = {}) {
 }
 
 // src/commands/CommandPalette.tsx
-var import_react44 = __toESM(require("react"), 1);
+var import_react45 = __toESM(require("react"), 1);
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function HighlightedLabel({ item }) {
   if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: item.label });
   const marked = new Set(item.labelIndices);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: Array.from(item.label).map(
-    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react44.default.Fragment, { children: ch }, i)
+    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react45.default.Fragment, { children: ch }, i)
   ) });
 }
 var CommandPalette = ({
@@ -6143,16 +6169,16 @@ var CommandPalette = ({
   emptyMessage = "No matching commands",
   className = ""
 }) => {
-  const inputRef = (0, import_react44.useRef)(null);
-  const listRef = (0, import_react44.useRef)(null);
-  const baseId = (0, import_react44.useId)();
+  const inputRef = (0, import_react45.useRef)(null);
+  const listRef = (0, import_react45.useRef)(null);
+  const baseId = (0, import_react45.useId)();
   const listId = `${baseId}-list`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const { open, query, items, activeIndex } = palette;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!open) return;
     const active = listRef.current?.querySelector('[aria-selected="true"]');
     active?.scrollIntoView?.({ block: "nearest" });
@@ -6228,12 +6254,12 @@ var CommandPalette = ({
 };
 
 // src/commands/useCommandShortcuts.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 function useCommandShortcuts(registry, options = {}) {
-  const optionsRef = (0, import_react45.useRef)(options);
+  const optionsRef = (0, import_react46.useRef)(options);
   optionsRef.current = options;
   const { enabled = true, target } = options;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!registry || !enabled) return;
     const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
     if (!eventTarget) return;
@@ -6251,14 +6277,14 @@ function useCommandShortcuts(registry, options = {}) {
   }, [registry, enabled, target]);
 }
 function useRegisterCommands(registry, specs) {
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!registry || !specs || specs.length === 0) return;
     return registry.register(specs);
   }, [registry, specs]);
 }
 
 // src/persistence/useAutosave.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_persistence = require("@pixerate/editor/persistence");
 var IDLE = {
   status: "idle",
@@ -6269,18 +6295,18 @@ var IDLE = {
   ready: false
 };
 function useAutosave(options) {
-  const optionsRef = (0, import_react46.useRef)(options);
+  const optionsRef = (0, import_react47.useRef)(options);
   optionsRef.current = options;
   const { storage, key, history, dirty } = options;
   const recover = options.recover !== false;
   const flushOnHide = options.flushOnHide !== false;
   const ready = options.ready !== false;
-  const [controller, setController] = (0, import_react46.useState)(null);
-  const [status, setStatus] = (0, import_react46.useState)(IDLE);
-  const [recovery, setRecovery] = (0, import_react46.useState)(null);
-  const [pendingRecovery, setPendingRecovery] = (0, import_react46.useState)(recover);
-  const revisionsRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useEffect)(() => {
+  const [controller, setController] = (0, import_react47.useState)(null);
+  const [status, setStatus] = (0, import_react47.useState)(IDLE);
+  const [recovery, setRecovery] = (0, import_react47.useState)(null);
+  const [pendingRecovery, setPendingRecovery] = (0, import_react47.useState)(recover);
+  const revisionsRef = (0, import_react47.useRef)(null);
+  (0, import_react47.useEffect)(() => {
     const revisions = (0, import_persistence.createRevisionTracker)({ history, dirty });
     const o = optionsRef.current;
     const instance = (0, import_persistence.createAutosaveController)({
@@ -6323,10 +6349,10 @@ function useAutosave(options) {
       if (revisionsRef.current === revisions) revisionsRef.current = null;
     };
   }, [storage, key, history, dirty, recover]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (controller && ready && !pendingRecovery) controller.ready();
   }, [controller, ready, pendingRecovery]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (!controller || !flushOnHide || typeof window === "undefined") return;
     const flush = () => void controller.flushNow();
     const onVisibility = () => {
@@ -6339,25 +6365,25 @@ function useAutosave(options) {
       document.removeEventListener("visibilitychange", onVisibility);
     };
   }, [controller, flushOnHide]);
-  const restore = (0, import_react46.useCallback)(() => {
+  const restore = (0, import_react47.useCallback)(() => {
     const snapshot = recovery?.snapshot;
     setRecovery(null);
     setPendingRecovery(false);
     return snapshot;
   }, [recovery]);
-  const discard = (0, import_react46.useCallback)(async () => {
+  const discard = (0, import_react47.useCallback)(async () => {
     if (controller) await controller.discardRecovery();
     setRecovery(null);
     setPendingRecovery(false);
   }, [controller]);
-  const flushNow = (0, import_react46.useCallback)(async () => {
+  const flushNow = (0, import_react47.useCallback)(async () => {
     await controller?.flushNow();
   }, [controller]);
-  const markClean = (0, import_react46.useCallback)(async () => {
+  const markClean = (0, import_react47.useCallback)(async () => {
     revisionsRef.current?.markSaved();
     await controller?.markClean();
   }, [controller]);
-  const notifyChange = (0, import_react46.useCallback)(() => revisionsRef.current?.bump(), []);
+  const notifyChange = (0, import_react47.useCallback)(() => revisionsRef.current?.bump(), []);
   return { status, recovery, pendingRecovery, restore, discard, flushNow, markClean, notifyChange, controller };
 }
 
@@ -6417,17 +6443,17 @@ var RecoveryPrompt = ({
 };
 
 // src/generation/useGenerationPlan.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_generation = require("@pixerate/editor/generation");
 function useGenerationPlan(request, capabilities, options = {}) {
   const key = JSON.stringify([request, capabilities, options]);
-  return (0, import_react47.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
+  return (0, import_react48.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
 }
 function useJobProgress(options) {
   const { startedAt, expectedMs, done, now, intervalMs = 1e3 } = options;
-  const [tick, setTick] = (0, import_react47.useState)(() => Date.now());
+  const [tick, setTick] = (0, import_react48.useState)(() => Date.now());
   const ticking = !done && now === void 0;
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!ticking) return;
     setTick(Date.now());
     const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));
@@ -6437,7 +6463,7 @@ function useJobProgress(options) {
 }
 
 // src/generation/GenerationSettings.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_generation2 = require("@pixerate/editor/generation");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var inputClass2 = "w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring";
@@ -6520,8 +6546,8 @@ var GenerationSettings = ({
   renderReference,
   className = ""
 }) => {
-  const baseId = (0, import_react48.useId)();
-  const controls = (0, import_react48.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
+  const baseId = (0, import_react49.useId)();
+  const controls = (0, import_react49.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
   const computed = useGenerationPlan(value, capabilities, { strategy });
   const plan = planProp ?? computed;
   const slots = (0, import_generation2.getReferenceSlots)(capabilities, value);
@@ -6616,7 +6642,7 @@ var JobProgress = ({ title, className = "", ...options }) => {
 };
 
 // src/generation/AssetMentionChips.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_generation3 = require("@pixerate/editor/generation");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var AssetMentionChips = ({
@@ -6628,14 +6654,14 @@ var AssetMentionChips = ({
   renderAsset,
   className = ""
 }) => {
-  const [open, setOpen] = (0, import_react49.useState)(null);
-  const rootRef = (0, import_react49.useRef)(null);
-  const chips = (0, import_react49.useMemo)(
+  const [open, setOpen] = (0, import_react50.useState)(null);
+  const rootRef = (0, import_react50.useRef)(null);
+  const chips = (0, import_react50.useMemo)(
     () => (0, import_generation3.describeAssetMentions)((0, import_generation3.findTextMentions)(content), assets, capabilities),
     [content, assets, capabilities]
   );
   const options = roles ?? (capabilities ? (0, import_generation3.getAssetRoleOptions)(capabilities) : (0, import_generation3.defaultAssetRoleOptions)());
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (open === null) return;
     const onPointer = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(null);
@@ -6730,15 +6756,15 @@ var AssetMentionChips = ({
 };
 
 // src/generation/GenerationHistory.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_generation4 = require("@pixerate/editor/generation");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function useGenerationRecords(store, filter) {
-  const [records, setRecords] = (0, import_react50.useState)([]);
-  const [loading, setLoading] = (0, import_react50.useState)(!!store);
-  const [error, setError] = (0, import_react50.useState)(null);
+  const [records, setRecords] = (0, import_react51.useState)([]);
+  const [loading, setLoading] = (0, import_react51.useState)(!!store);
+  const [error, setError] = (0, import_react51.useState)(null);
   const filterKey = (0, import_generation4.stableStringify)(filter ?? {});
-  const refresh = (0, import_react50.useCallback)(async () => {
+  const refresh = (0, import_react51.useCallback)(async () => {
     if (!store) {
       setRecords([]);
       setLoading(false);
@@ -6755,7 +6781,7 @@ function useGenerationRecords(store, filter) {
       setLoading(false);
     }
   }, [store, filterKey]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     void refresh();
     if (!store) return;
     return store.subscribe(() => void refresh());
@@ -6781,15 +6807,15 @@ var GenerationHistory = ({
   emptyText = "No generations yet.",
   className = ""
 }) => {
-  const [innerMode, setInnerMode] = (0, import_react50.useState)("exact");
+  const [innerMode, setInnerMode] = (0, import_react51.useState)("exact");
   const mode = modeProp ?? innerMode;
   const setMode = (next) => {
     if (modeProp === void 0) setInnerMode(next);
     onModeChange?.(next);
   };
-  const options = (0, import_react50.useMemo)(() => ({ templates, capabilities, assets, mode }), [templates, capabilities, assets, mode]);
-  const results = (0, import_react50.useMemo)(() => records.map((record) => (0, import_generation4.recreateRequest)(record, options)), [records, options]);
-  const models = (0, import_react50.useMemo)(
+  const options = (0, import_react51.useMemo)(() => ({ templates, capabilities, assets, mode }), [templates, capabilities, assets, mode]);
+  const results = (0, import_react51.useMemo)(() => records.map((record) => (0, import_generation4.recreateRequest)(record, options)), [records, options]);
+  const models = (0, import_react51.useMemo)(
     () => capabilities ? Array.isArray(capabilities) ? capabilities : [capabilities] : [],
     [capabilities]
   );
@@ -6900,19 +6926,19 @@ var GenerationHistory = ({
 };
 
 // src/find-replace/useFindReplace.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_editor16 = require("@pixerate/editor");
 var noopUnsubscribe2 = () => {
 };
 function useFindReplace(editor) {
   const store = (0, import_editor16.getFindReplaceStore)(editor ?? null);
-  const subscribe = (0, import_react51.useCallback)(
+  const subscribe = (0, import_react52.useCallback)(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe2,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? import_editor16.EMPTY_FIND_REPLACE_SNAPSHOT;
-  const snapshot = (0, import_react51.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return (0, import_react51.useMemo)(() => {
+  const snapshot = (0, import_react52.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return (0, import_react52.useMemo)(() => {
     const run = (fn) => {
       if (editor && !editor.isDestroyed && store) fn(editor);
     };
@@ -6936,7 +6962,7 @@ function useFindReplace(editor) {
 }
 
 // src/find-replace/FindReplaceBar.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_editor17 = require("@pixerate/editor");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var inputClass3 = "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
@@ -6951,10 +6977,10 @@ var FindReplaceBar = ({
   onClose
 }) => {
   const find = useFindReplace(editor);
-  const findInput = (0, import_react52.useRef)(null);
-  const [moreOpen, setMoreOpen] = (0, import_react52.useState)(false);
+  const findInput = (0, import_react53.useRef)(null);
+  const [moreOpen, setMoreOpen] = (0, import_react53.useState)(false);
   const visible = find.available && (alwaysOpen || find.open);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!visible || find.focusRequest === 0) return;
     findInput.current?.focus();
     findInput.current?.select();
@@ -7098,12 +7124,12 @@ var FindReplaceBar = ({
 };
 
 // src/tables/useTableMenu.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_editor18 = require("@pixerate/editor");
 function useTableMenu(editor) {
-  const store = (0, import_react53.useMemo)(() => (0, import_editor18.createTableStore)(editor), [editor]);
-  const snapshot = (0, import_react53.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
-  return (0, import_react53.useMemo)(
+  const store = (0, import_react54.useMemo)(() => (0, import_editor18.createTableStore)(editor), [editor]);
+  const snapshot = (0, import_react54.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return (0, import_react54.useMemo)(
     () => ({
       ...snapshot,
       run: (action, params) => (0, import_editor18.runTableAction)(editor, action, params, { focus: true }),
@@ -7114,7 +7140,7 @@ function useTableMenu(editor) {
 }
 
 // src/tables/TableToolbar.tsx
-var import_react54 = __toESM(require("react"), 1);
+var import_react55 = __toESM(require("react"), 1);
 var import_editor19 = require("@pixerate/editor");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var keepSelection2 = (event) => event.preventDefault();
@@ -7135,7 +7161,7 @@ var TableToolbar = ({
     const enabled = status === true;
     const active = item.active?.(table);
     const separator = index > 0 && items[index - 1].group !== item.group;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react54.default.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react55.default.Fragment, { children: [
       separator && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: separatorClassName, "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
@@ -7159,7 +7185,7 @@ var TableToolbar = ({
 };
 
 // src/tables/InsertTableGrid.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var keepSelection3 = (event) => event.preventDefault();
 var InsertTableGrid = ({
@@ -7173,7 +7199,7 @@ var InsertTableGrid = ({
   onInsert
 }) => {
   const table = useTableMenu(editor);
-  const [hover, setHover] = (0, import_react55.useState)(null);
+  const [hover, setHover] = (0, import_react56.useState)(null);
   const status = table.actions.insertTable;
   const disabled = !editor || !status.enabled;
   const insert = (size) => {
@@ -7240,14 +7266,14 @@ var TableBubbleMenu = ({
 var import_client = require("react-dom/client");
 
 // src/chart/ChartCanvas.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_chart2 = require("@pixerate/editor/chart");
 
 // src/chart/useChartEditor.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_chart = require("@pixerate/editor/chart");
 function useChartState(controller) {
-  return (0, import_react56.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return (0, import_react57.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
 }
 
 // src/chart/ChartCanvas.tsx
@@ -7299,7 +7325,7 @@ function renderChartMark(mark, fontFamily, interactive) {
   }
 }
 function ChartPresenceLayer({ presence }) {
-  const { actors } = (0, import_react57.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  const { actors } = (0, import_react58.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("g", { "data-chart-presence": "", pointerEvents: "none", children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("g", { transform: `translate(${a.x} ${a.y})`, "data-actor": a.id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 }, transform: a.pressed ? "scale(0.9)" : void 0 }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("g", { transform: "translate(13 16)", children: [
@@ -7310,12 +7336,12 @@ function ChartPresenceLayer({ presence }) {
 }
 function ChartCanvas({ controller, width = 640, height = 400, responsive = true, theme, editable = true, measureText, emptyMessage, className, presence, sceneRef }) {
   const state = useChartState(controller);
-  const wrapper = (0, import_react57.useRef)(null);
-  const svg = (0, import_react57.useRef)(null);
-  const drag = (0, import_react57.useRef)(null);
-  const [measured, setMeasured] = (0, import_react57.useState)(null);
-  const [frozen, setFrozen] = (0, import_react57.useState)(null);
-  (0, import_react57.useEffect)(() => {
+  const wrapper = (0, import_react58.useRef)(null);
+  const svg = (0, import_react58.useRef)(null);
+  const drag = (0, import_react58.useRef)(null);
+  const [measured, setMeasured] = (0, import_react58.useState)(null);
+  const [frozen, setFrozen] = (0, import_react58.useState)(null);
+  (0, import_react58.useEffect)(() => {
     const el = wrapper.current;
     if (!responsive || !el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(([entry]) => {
@@ -7326,8 +7352,8 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     return () => observer.disconnect();
   }, [responsive]);
   const sceneWidth = responsive && measured || width;
-  const fullTheme = (0, import_react57.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
-  const scene = (0, import_react57.useMemo)(
+  const fullTheme = (0, import_react58.useMemo)(() => ({ ...import_chart2.CSS_VARIABLE_CHART_THEME, ...theme }), [theme]);
+  const scene = (0, import_react58.useMemo)(
     () => (0, import_chart2.layoutChart)(state.spec, {
       width: sceneWidth,
       height,
@@ -7343,8 +7369,8 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
     [state.spec, state.selection, sceneWidth, height, fullTheme, editable, measureText, emptyMessage, frozen]
   );
   if (sceneRef) sceneRef.current = scene;
-  const byKey = (0, import_react57.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
-  (0, import_react57.useEffect)(() => () => drag.current?.end(), []);
+  const byKey = (0, import_react58.useMemo)(() => new Map(scene.marks.map((m) => [m.key, m])), [scene]);
+  (0, import_react58.useEffect)(() => () => drag.current?.end(), []);
   const scenePoint = (e) => (0, import_chart2.chartClientToScene)(scene, svg.current.getBoundingClientRect(), e.clientX, e.clientY);
   const onPointerDown = (e) => {
     if (!editable || e.button !== 0) return;
@@ -7402,7 +7428,7 @@ function ChartCanvas({ controller, width = 640, height = 400, responsive = true,
 }
 
 // src/chart/ChartDataGrid.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_chart3 = require("@pixerate/editor/chart");
 
 // src/chart/styles.ts
@@ -7417,9 +7443,9 @@ var chartCellClass = "h-7 w-full min-w-[4.5rem] bg-transparent px-2 text-right t
 // src/chart/ChartDataGrid.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function ChartCommitInput({ value, onCommit, onKeyDown, onBlur, ...rest }) {
-  const [draft, setDraft] = (0, import_react58.useState)(value);
-  const typing = (0, import_react58.useRef)(false);
-  (0, import_react58.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react59.useState)(value);
+  const typing = (0, import_react59.useRef)(false);
+  (0, import_react59.useEffect)(() => {
     if (!typing.current) setDraft(value);
   }, [value]);
   const commit = () => {
@@ -7555,7 +7581,7 @@ function ChartDataGrid({ controller, categoryHeader = "Category", readOnly = fal
 }
 
 // src/chart/ChartInspector.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_chart4 = require("@pixerate/editor/chart");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
@@ -7720,7 +7746,7 @@ function ErrorBarFields({ controller, series, which, idBase }) {
 }
 function ChartInspector({ controller, sections, className }) {
   const { spec, selectedSeries } = useChartState(controller);
-  const idBase = (0, import_react59.useId)();
+  const idBase = (0, import_react60.useId)();
   const show = (section) => !sections || sections.includes(section);
   const cartesian = (0, import_chart4.isCartesianChart)(spec.type);
   const family = (0, import_chart4.chartFamily)(spec);
@@ -8039,6 +8065,7 @@ function createReactChartNodeView(options = {}) {
   useSpreadsheetEditor,
   useSpreadsheetViewport,
   useTableMenu,
+  useToolBridge,
   useTrackChanges,
   withoutDirty
 });