@pixerate/editor-react 0.17.0 → 0.18.1

package/dist/index.js

@@ -10,8 +10,9 @@ import {
   SpreadsheetValidationDialog,
   useFillHandle,
   useSpreadsheetClipboard,
-  useSpreadsheetEditor
-} from "./chunk-JR5ZBDR7.js";
+  useSpreadsheetEditor,
+  useSpreadsheetViewport
+} from "./chunk-34HEZX7J.js";
 import {
   AdjustmentLayersPanel,
   ControlSlider,
@@ -613,10 +614,63 @@ function useFileImport(editor, options = {}) {
   };
 }
 
+// src/hooks/useDocxExport.ts
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef7, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import {
+  DocxExportController
+} from "@pixerate/editor/export";
+function useDocxExport(editor, options = {}) {
+  const editorRef = useRef7(editor);
+  editorRef.current = editor;
+  const controller = useMemo4(
+    () => new DocxExportController(() => {
+      const current = editorRef.current;
+      return current && !current.isDestroyed ? current : null;
+    }, options),
+    []
+  );
+  useEffect6(() => {
+    controller.setOptions(options);
+  });
+  const state = useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
+  return {
+    ...state,
+    download: (fileName) => controller.download(fileName),
+    exportBlob: () => controller.exportBlob()
+  };
+}
+
+// src/components/ExportDocxButton.tsx
+import { jsx } from "react/jsx-runtime";
+var ExportDocxButton = ({
+  editor,
+  className = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-50",
+  children = "Export to Word",
+  onExported,
+  ...options
+}) => {
+  const docx = useDocxExport(editor, options);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      disabled: !editor || docx.isExporting,
+      "aria-busy": docx.isExporting || void 0,
+      title: docx.error ? `Export failed: ${docx.error.message}` : void 0,
+      onClick: async () => {
+        const report = await docx.download();
+        if (report) onExported?.(report);
+      },
+      children
+    }
+  );
+};
+
 // src/hooks/useAgentToolProvider.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 function useAgentToolProvider(registry, provider) {
-  useEffect6(() => {
+  useEffect7(() => {
     if (!registry || !provider) return;
     return registry.register(provider);
   }, [registry, provider]);
@@ -626,17 +680,17 @@ function useAgentToolProvider(registry, provider) {
 import {
   EditorContent as TipTapEditorContent
 } from "@tiptap/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var EditorContent = ({
   className,
   editor,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(TipTapEditorContent, { editor, ...props }) });
+  return /* @__PURE__ */ jsx2("div", { className, children: /* @__PURE__ */ jsx2(TipTapEditorContent, { editor, ...props }) });
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState4 } from "react";
+import { useEffect as useEffect8, useRef as useRef8, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -650,12 +704,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = useRef7(null);
+  const menuEl = useRef8(null);
   const [mounted, setMounted] = useState4(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect7(() => {
+  useEffect8(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -686,14 +740,14 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import {
   describeConditionalTag,
   evaluatePromptTokens,
   formatConditionalTag,
   resolveTemplates
 } from "@pixerate/editor";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var TemplateRenderer = ({
   content,
   templates = [],
@@ -705,14 +759,14 @@ var TemplateRenderer = ({
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = useMemo4(() => {
+  const displayText = useMemo5(() => {
     if (!resolve || templates.length === 0) return content;
     return resolveTemplates(content, templates, { bindings });
   }, [content, templates, resolve, bindings]);
-  const tokens = useMemo4(() => {
+  const tokens = useMemo5(() => {
     return evaluatePromptTokens(displayText, values);
   }, [displayText, values]);
-  return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
+  return /* @__PURE__ */ jsx3("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
       const colors = templateColorMap?.get(token.value) || {
         from: "#f43f5e",
@@ -722,7 +776,7 @@ var TemplateRenderer = ({
         "--color-from": colors.from,
         "--color-to": colors.to
       };
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "span",
         {
           style,
@@ -741,7 +795,7 @@ var TemplateRenderer = ({
         token.defaultValue !== void 0 ? `Default: ${token.defaultValue || "(empty)"}` : void 0
       ].filter(Boolean).join("\n");
       if (token.resolvedValue !== void 0) {
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           "span",
           {
             onClick: () => onVariableClick?.(token.value),
@@ -763,7 +817,7 @@ var TemplateRenderer = ({
           title: details,
           children: [
             `{${token.value}`,
-            token.defaultValue !== void 0 && /* @__PURE__ */ jsx2("span", { className: "opacity-60", children: `|${token.defaultValue}` }),
+            token.defaultValue !== void 0 && /* @__PURE__ */ jsx3("span", { className: "opacity-60", children: `|${token.defaultValue}` }),
             "}"
           ]
         },
@@ -771,7 +825,7 @@ var TemplateRenderer = ({
       );
     }
     if (token.type === "conditional" && token.conditional) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "span",
         {
           "data-conditional": token.conditional,
@@ -783,7 +837,7 @@ var TemplateRenderer = ({
       );
     }
     if (token.type === "instruction") {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "span",
         {
           className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600 dark:text-rose-300",
@@ -793,17 +847,17 @@ var TemplateRenderer = ({
         index
       );
     }
-    return /* @__PURE__ */ jsx2("span", { children: token.value }, index);
+    return /* @__PURE__ */ jsx3("span", { children: token.value }, index);
   }) });
 };
 
 // src/components/VariableForm.tsx
-import { useId, useMemo as useMemo5, useState as useState5 } from "react";
+import { useId, useMemo as useMemo6, useState as useState5 } from "react";
 import {
   compactVariableValues,
   getVariableFormFields
 } from "@pixerate/editor";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var VariableForm = ({
   content,
   templates,
@@ -818,7 +872,7 @@ var VariableForm = ({
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = useMemo5(
+  const fields = useMemo6(
     () => getVariableFormFields(content, { templates, bindings }),
     [content, templates, bindings]
   );
@@ -828,7 +882,7 @@ var VariableForm = ({
     onChange?.(compactVariableValues(next), next);
   };
   if (fields.length === 0) return null;
-  return /* @__PURE__ */ jsx3("form", { className, onSubmit: (event) => event.preventDefault(), children: fields.map((field) => {
+  return /* @__PURE__ */ jsx4("form", { className, onSubmit: (event) => event.preventDefault(), children: fields.map((field) => {
     const id = `${idPrefix}-${field.name}`;
     if (field.conditionOnly) {
       return /* @__PURE__ */ jsxs2(
@@ -838,7 +892,7 @@ var VariableForm = ({
           className: "flex items-center gap-2",
           "data-variable-field": field.name,
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 id,
@@ -848,7 +902,7 @@ var VariableForm = ({
                 onChange: (event) => update(field.name, event.target.checked ? "true" : "")
               }
             ),
-            /* @__PURE__ */ jsx3("span", { children: field.label })
+            /* @__PURE__ */ jsx4("span", { children: field.label })
           ]
         },
         field.name
@@ -863,9 +917,9 @@ var VariableForm = ({
         children: [
           /* @__PURE__ */ jsxs2("span", { className: "font-medium", children: [
             field.label,
-            field.required && /* @__PURE__ */ jsx3("span", { className: "text-rose-500", "aria-hidden": "true", children: " *" })
+            field.required && /* @__PURE__ */ jsx4("span", { className: "text-rose-500", "aria-hidden": "true", children: " *" })
           ] }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id,
@@ -889,7 +943,7 @@ var VariableForm = ({
 import { useId as useId2, useState as useState7 } from "react";
 
 // src/hooks/useMergePreview.ts
-import { useCallback as useCallback5, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo7, useState as useState6 } from "react";
 import {
   extractVariables,
   matchFields,
@@ -904,15 +958,15 @@ function useMergePreview(options) {
   const [overrides, setOverrides] = useState6({});
   const [index, setIndexState] = useState6(0);
   const [result, setResult] = useState6(null);
-  const source = useMemo6(
+  const source = useMemo7(
     () => parseDataSource(sourceText, parseOptions),
     [sourceText, parseOptions]
   );
-  const variables = useMemo6(
+  const variables = useMemo7(
     () => extractVariables(template, { templates, bindings }).map((v) => v.name),
     [template, templates, bindings]
   );
-  const mapping = useMemo6(() => {
+  const mapping = useMemo7(() => {
     const merged = {
       ...matchFields(variables, source.fields).mapping
     };
@@ -926,7 +980,7 @@ 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 = useMemo6(
+  const values = useMemo7(
     () => record ? recordToValues(record, mapping) : {},
     [record, mapping]
   );
@@ -987,7 +1041,7 @@ function useMergePreview(options) {
 }
 
 // src/components/MergePreview.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function downloadText(text, fileName, type) {
   if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") {
     return;
@@ -1036,8 +1090,8 @@ var MergePreview = ({
   };
   return /* @__PURE__ */ jsxs3("div", { className, "data-merge-preview": "", children: [
     /* @__PURE__ */ jsxs3("label", { htmlFor: `${id}-source`, className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx4("span", { className: "font-medium", children: "Data source (CSV, TSV or JSON)" }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: "Data source (CSV, TSV or JSON)" }),
+      /* @__PURE__ */ jsx5(
         "textarea",
         {
           id: `${id}-source`,
@@ -1051,7 +1105,7 @@ var MergePreview = ({
       )
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "file",
@@ -1064,18 +1118,18 @@ var MergePreview = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx4("span", { "data-merge-summary": "", className: "opacity-70", children: `${source.records.length} record${source.records.length === 1 ? "" : "s"} \xB7 ${source.fields.length} field${source.fields.length === 1 ? "" : "s"}` })
+      /* @__PURE__ */ jsx5("span", { "data-merge-summary": "", className: "opacity-70", children: `${source.records.length} record${source.records.length === 1 ? "" : "s"} \xB7 ${source.fields.length} field${source.fields.length === 1 ? "" : "s"}` })
     ] }),
-    source.warnings.length > 0 && merge.sourceText.trim() !== "" && /* @__PURE__ */ jsx4("ul", { "data-merge-warnings": "", className: "text-amber-600 text-xs", children: source.warnings.map((warning, i) => /* @__PURE__ */ jsx4("li", { children: warning.message }, i)) }),
+    source.warnings.length > 0 && merge.sourceText.trim() !== "" && /* @__PURE__ */ jsx5("ul", { "data-merge-warnings": "", className: "text-amber-600 text-xs", children: source.warnings.map((warning, i) => /* @__PURE__ */ jsx5("li", { children: warning.message }, i)) }),
     merge.variables.length > 0 && /* @__PURE__ */ jsxs3("fieldset", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx4("legend", { className: "font-medium", children: "Field mapping" }),
+      /* @__PURE__ */ jsx5("legend", { className: "font-medium", children: "Field mapping" }),
       merge.variables.map((variable) => /* @__PURE__ */ jsxs3(
         "label",
         {
           className: "flex items-center gap-2",
           "data-merge-mapping": variable,
           children: [
-            /* @__PURE__ */ jsx4("span", { className: "min-w-24 font-mono", children: `{${variable}}` }),
+            /* @__PURE__ */ jsx5("span", { className: "min-w-24 font-mono", children: `{${variable}}` }),
             /* @__PURE__ */ jsxs3(
               "select",
               {
@@ -1084,8 +1138,8 @@ var MergePreview = ({
                 onChange: (event) => merge.setFieldMapping(variable, event.target.value || null),
                 className: "px-1 py-0.5 rounded-md border border-violet-400/40 bg-transparent",
                 children: [
-                  /* @__PURE__ */ jsx4("option", { value: "", children: "(none)" }),
-                  source.fields.map((field) => /* @__PURE__ */ jsx4("option", { value: field, children: field }, field))
+                  /* @__PURE__ */ jsx5("option", { value: "", children: "(none)" }),
+                  source.fields.map((field) => /* @__PURE__ */ jsx5("option", { value: field, children: field }, field))
                 ]
               }
             )
@@ -1095,7 +1149,7 @@ var MergePreview = ({
       ))
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1105,8 +1159,8 @@ var MergePreview = ({
           children: "Prev"
         }
       ),
-      /* @__PURE__ */ jsx4("span", { "data-merge-position": "", children: merge.count === 0 ? "No records" : `Record ${merge.index + 1} of ${merge.count}` }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5("span", { "data-merge-position": "", children: merge.count === 0 ? "No records" : `Record ${merge.index + 1} of ${merge.count}` }),
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1117,7 +1171,7 @@ var MergePreview = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4("div", { "data-merge-output": "", children: /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5("div", { "data-merge-output": "", children: /* @__PURE__ */ jsx5(
       TemplateRenderer,
       {
         content,
@@ -1129,7 +1183,7 @@ var MergePreview = ({
       }
     ) }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1144,9 +1198,9 @@ var MergePreview = ({
         }
       ),
       result && /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx4("span", { "data-merge-result": "", children: `${result.outputs.length} merged${result.skipped.length ? `, ${result.skipped.length} skipped` : ""}${result.truncated ? " (stopped early)" : ""}` }),
-        /* @__PURE__ */ jsx4("button", { type: "button", "data-merge-copy": "", onClick: copy, children: copied ? "Copied" : "Copy" }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("span", { "data-merge-result": "", children: `${result.outputs.length} merged${result.skipped.length ? `, ${result.skipped.length} skipped` : ""}${result.truncated ? " (stopped early)" : ""}` }),
+        /* @__PURE__ */ jsx5("button", { type: "button", "data-merge-copy": "", onClick: copy, children: copied ? "Copied" : "Copy" }),
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1155,7 +1209,7 @@ var MergePreview = ({
             children: "Download .txt"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1166,7 +1220,7 @@ var MergePreview = ({
         )
       ] })
     ] }),
-    result && /* @__PURE__ */ jsx4(
+    result && /* @__PURE__ */ jsx5(
       "textarea",
       {
         readOnly: true,
@@ -1181,16 +1235,16 @@ var MergePreview = ({
 };
 
 // src/hooks/useOutline.ts
-import { useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore5 } from "react";
 import { createOutlineStore } from "@pixerate/editor";
 function useOutline(editor) {
-  const store = useMemo7(() => createOutlineStore(editor), [editor]);
-  return useSyncExternalStore4(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const store = useMemo8(() => createOutlineStore(editor), [editor]);
+  return useSyncExternalStore5(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 
 // src/components/OutlinePanel.tsx
 import { navigateToHeading } from "@pixerate/editor";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var OutlinePanel = ({
   editor,
   title = "Outline",
@@ -1205,10 +1259,10 @@ var OutlinePanel = ({
   const { headings, activeId } = useOutline(editor);
   const visible = headings.filter((h) => h.level <= maxLevel);
   return /* @__PURE__ */ jsxs4("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
-    title != null && /* @__PURE__ */ jsx5("div", { className: "pixerate-outline-title", children: title }),
-    visible.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ jsx5("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
+    title != null && /* @__PURE__ */ jsx6("div", { className: "pixerate-outline-title", children: title }),
+    visible.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ jsx6("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
       const active = heading.id === activeId;
-      return /* @__PURE__ */ jsx5("li", { "data-level": heading.level, children: /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6("li", { "data-level": heading.level, children: /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -1230,15 +1284,15 @@ var OutlinePanel = ({
 };
 
 // src/hooks/useParagraphStyles.ts
-import { useMemo as useMemo8, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useMemo as useMemo9, useSyncExternalStore as useSyncExternalStore6 } from "react";
 import {
   createParagraphStylesStore,
   getStyleRegistry
 } from "@pixerate/editor";
 function useParagraphStyles(editor) {
-  const store = useMemo8(() => createParagraphStylesStore(editor), [editor]);
-  const snapshot = useSyncExternalStore5(store.subscribe, store.getSnapshot, store.getSnapshot);
-  return useMemo8(() => {
+  const store = useMemo9(() => createParagraphStylesStore(editor), [editor]);
+  const snapshot = useSyncExternalStore6(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo9(() => {
     const registry = getStyleRegistry(editor);
     const live = () => editor && !editor.isDestroyed ? editor : null;
     return {
@@ -1262,7 +1316,7 @@ function useParagraphStyles(editor) {
 
 // src/components/StylesGallery.tsx
 import { useState as useState8 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var camel = (property) => property.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 var keepSelection = (event) => event.preventDefault();
 var StylesGallery = ({
@@ -1326,9 +1380,9 @@ var StylesGallery = ({
       {
         className: variant === "dropdown" ? "absolute left-0 top-full z-20 mt-1 flex min-w-[12rem] flex-col gap-0.5 rounded-md border border-border bg-background p-1 shadow-md" : "flex flex-wrap items-center gap-1",
         children: [
-          /* @__PURE__ */ jsx6("div", { role: "listbox", "aria-label": "Styles", className: variant === "dropdown" ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1", children: list.map((style) => {
+          /* @__PURE__ */ jsx7("div", { role: "listbox", "aria-label": "Styles", className: variant === "dropdown" ? "flex flex-col gap-0.5" : "flex flex-wrap gap-1", children: list.map((style) => {
             const active = style.id === styles.currentStyleId;
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1345,7 +1399,7 @@ var StylesGallery = ({
             );
           }) }),
           showActions && /* @__PURE__ */ jsxs5("div", { className: variant === "dropdown" ? "mt-1 flex flex-col gap-0.5 border-t border-border pt-1" : "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1362,7 +1416,7 @@ var StylesGallery = ({
               }
             ),
             creating ? /* @__PURE__ */ jsxs5("form", { className: "flex items-center gap-1", onSubmit: create, children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "input",
                 {
                   "aria-label": "New style name",
@@ -1372,8 +1426,8 @@ var StylesGallery = ({
                   onChange: (event) => setName(event.target.value)
                 }
               ),
-              /* @__PURE__ */ jsx6("button", { type: "submit", className: itemClassName, disabled: !name.trim(), children: "Create" })
-            ] }) : /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("button", { type: "submit", className: itemClassName, disabled: !name.trim(), children: "Create" })
+            ] }) : /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1403,10 +1457,10 @@ import {
 } from "@pixerate/editor";
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo9 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createContext, useContext, useMemo as useMemo10 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ jsx7(
+  Button: (props) => /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -1416,26 +1470,26 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ jsx7("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
+  Tooltip: (props) => /* @__PURE__ */ jsx8("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
   NodeHeader: (props) => /* @__PURE__ */ jsxs6("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
       props.icon,
-      /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ jsx8("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ jsx7("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+    props.onClose && /* @__PURE__ */ jsx8("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
   ] })
 };
 var EditorSlotsContext = createContext(defaultSlots);
 function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo9(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx7(EditorSlotsContext.Provider, { value: mergedSlots, children });
+  const mergedSlots = useMemo10(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ jsx8(EditorSlotsContext.Provider, { value: mergedSlots, children });
 }
 function useEditorSlots() {
   return useContext(EditorSlotsContext);
 }
 
 // src/review/useReview.ts
-import { useCallback as useCallback6, useMemo as useMemo10, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo11, useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -1462,8 +1516,8 @@ function useComments(source) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
-  return useMemo10(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return useMemo11(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
@@ -1472,8 +1526,8 @@ function useTrackChanges(editor) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
-  return useMemo10(() => {
+  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return useMemo11(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -1501,7 +1555,7 @@ import {
   formatReviewTime,
   getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var buttonClass = "rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50";
 var primaryButtonClass = "rounded px-2 py-1 text-xs bg-primary/10 text-primary hover:bg-primary/20 disabled:opacity-50";
 var textareaClass = "w-full resize-y rounded-md border border-input bg-background p-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary";
@@ -1526,7 +1580,7 @@ var CommentsPanel = ({
         " open",
         resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
       ] }),
-      resolvedCount > 0 && /* @__PURE__ */ jsx8(
+      resolvedCount > 0 && /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1537,7 +1591,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx8("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx8(
+    visible.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx9("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx9(
       CommentThreadCard,
       {
         thread,
@@ -1602,23 +1656,23 @@ var CommentThreadCard = ({
       },
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx8("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+          /* @__PURE__ */ jsx9("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
         ] }),
-        quote && /* @__PURE__ */ jsx8("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ jsx8("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ jsx8("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs7("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+        quote && /* @__PURE__ */ jsx9("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ jsx9("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ jsx9("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ jsx9("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ jsx9("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs7("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
           /* @__PURE__ */ jsxs7("span", { className: "text-xs", children: [
-            /* @__PURE__ */ jsx8("span", { className: "font-medium", children: reply.author.name }),
+            /* @__PURE__ */ jsx9("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ jsx8("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx8("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ jsx9("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
         ] }, reply.id)) }),
         (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               className: textareaClass,
@@ -1637,8 +1691,8 @@ var CommentThreadCard = ({
             }
           ),
           /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ jsx8(
+            isDraft && /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1651,8 +1705,8 @@ var CommentThreadCard = ({
           ] })
         ] }),
         !isDraft && /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1668,7 +1722,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var defaultDescriptionClass = "max-w-[16rem] truncate px-1 text-xs text-muted-foreground";
 var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var ReviewToolbar = ({
@@ -1682,7 +1736,7 @@ var ReviewToolbar = ({
   const current = review.currentChange;
   const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
   return /* @__PURE__ */ jsxs8("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1693,8 +1747,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ jsx9("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1705,8 +1759,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx9("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("span", { className: "min-w-[4rem] text-center text-xs text-muted-foreground", "aria-live": "polite", children: count === 0 ? "No changes" : current ? `${index} of ${count}` : `${count} changes` }),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1729,8 +1783,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx9("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1740,7 +1794,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1750,18 +1804,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+    /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
   ] });
 };
 
 // src/review/CommentButton.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var CommentButton = ({
   editor,
   className = "rounded px-2 py-1 text-xs text-popover-foreground hover:bg-muted",
   children = "Comment"
-}) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx11(
   "button",
   {
     type: "button",
@@ -1773,13 +1827,13 @@ var CommentButton = ({
 );
 
 // src/review/useDocumentCompare.ts
-import { useCallback as useCallback7, useMemo as useMemo11, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo12, useRef as useRef9, useState as useState10 } from "react";
 import {
   applyDocumentComparison
 } from "@pixerate/editor";
 function useDocumentCompare(editor, options) {
   const [summary, setSummary] = useState10(null);
-  const defaults = useRef8(options);
+  const defaults = useRef9(options);
   defaults.current = options;
   const compare = useCallback7(
     (original, revised, overrides) => {
@@ -1794,12 +1848,12 @@ function useDocumentCompare(editor, options) {
     [editor]
   );
   const clear = useCallback7(() => setSummary(null), []);
-  return useMemo11(() => ({ summary, compare, clear }), [summary, compare, clear]);
+  return useMemo12(() => ({ summary, compare, clear }), [summary, compare, clear]);
 }
 
 // src/review/TrackedChangesList.tsx
 import { trackedChangeLabel } from "@pixerate/editor";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var buttonClass3 = "rounded px-1.5 py-0.5 text-xs text-foreground hover:bg-muted disabled:opacity-40";
 var TrackedChangesList = ({
   editor,
@@ -1810,9 +1864,9 @@ var TrackedChangesList = ({
 }) => {
   const review = useTrackChanges(editor);
   if (review.changes.length === 0) {
-    return /* @__PURE__ */ jsx11("div", { className, "data-tracked-changes-list": "", children: /* @__PURE__ */ jsx11("div", { className: "pixerate-changes-empty text-xs text-muted-foreground", children: emptyState }) });
+    return /* @__PURE__ */ jsx12("div", { className, "data-tracked-changes-list": "", children: /* @__PURE__ */ jsx12("div", { className: "pixerate-changes-empty text-xs text-muted-foreground", children: emptyState }) });
   }
-  return /* @__PURE__ */ jsx11("ul", { className, role: "list", "aria-label": "Tracked changes", "data-tracked-changes-list": "", children: review.changes.map((change) => {
+  return /* @__PURE__ */ jsx12("ul", { className, role: "list", "aria-label": "Tracked changes", "data-tracked-changes-list": "", children: review.changes.map((change) => {
     const active = change.id === review.currentChangeId;
     return /* @__PURE__ */ jsxs9(
       "li",
@@ -1829,14 +1883,14 @@ var TrackedChangesList = ({
               title: `${change.author.name}: ${change.description}`,
               onClick: () => review.select(change.id),
               children: [
-                /* @__PURE__ */ jsx11("span", { className: "font-medium", children: trackedChangeLabel(change) }),
+                /* @__PURE__ */ jsx12("span", { className: "font-medium", children: trackedChangeLabel(change) }),
                 change.author.name ? ` \xB7 ${change.author.name}` : "",
-                /* @__PURE__ */ jsx11("span", { className: "block truncate text-muted-foreground", children: change.description })
+                /* @__PURE__ */ jsx12("span", { className: "block truncate text-muted-foreground", children: change.description })
               ]
             }
           ),
-          /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass3, onClick: () => review.accept(change.id), children: "Accept" }),
-          /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass3, onClick: () => review.reject(change.id), children: "Reject" })
+          /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass3, onClick: () => review.accept(change.id), children: "Accept" }),
+          /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass3, onClick: () => review.reject(change.id), children: "Reject" })
         ]
       },
       `${change.type}:${change.id}`
@@ -1845,7 +1899,7 @@ var TrackedChangesList = ({
 };
 
 // src/find-replace/useFindReplace.ts
-import { useCallback as useCallback8, useMemo as useMemo12, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo13, useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
   EMPTY_FIND_REPLACE_SNAPSHOT,
   getFindReplaceStore
@@ -1859,8 +1913,8 @@ function useFindReplace(editor) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_FIND_REPLACE_SNAPSHOT;
-  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
-  return useMemo12(() => {
+  const snapshot = useSyncExternalStore8(subscribe, getSnapshot, getSnapshot);
+  return useMemo13(() => {
     const run = (fn) => {
       if (editor && !editor.isDestroyed && store) fn(editor);
     };
@@ -1884,9 +1938,9 @@ function useFindReplace(editor) {
 }
 
 // src/find-replace/FindReplaceBar.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef10, useState as useState11 } from "react";
 import { FIND_OPTION_TOGGLES, formatFindStatus } from "@pixerate/editor";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var inputClass = "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
 var buttonClass4 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
 var toggleClass = (on) => `${buttonClass4} font-mono ${on ? "bg-primary/10 text-primary" : "text-muted-foreground"}`;
@@ -1899,10 +1953,10 @@ var FindReplaceBar = ({
   onClose
 }) => {
   const find = useFindReplace(editor);
-  const findInput = useRef9(null);
+  const findInput = useRef10(null);
   const [moreOpen, setMoreOpen] = useState11(false);
   const visible = find.available && (alwaysOpen || find.open);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!visible || find.focusRequest === 0) return;
     findInput.current?.focus();
     findInput.current?.select();
@@ -1942,7 +1996,7 @@ var FindReplaceBar = ({
   };
   return /* @__PURE__ */ jsxs10("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1953,7 +2007,7 @@ var FindReplaceBar = ({
           children: showReplace ? "\u25BE" : "\u25B8"
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           ref: findInput,
@@ -1967,7 +2021,7 @@ var FindReplaceBar = ({
           onKeyDown: onFindKeyDown
         }
       ),
-      FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ jsx12(
+      FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1980,7 +2034,7 @@ var FindReplaceBar = ({
         },
         t.key
       )),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "span",
         {
           className: `min-w-[5rem] px-1 text-center text-xs ${find.error ? "text-destructive" : "text-muted-foreground"}`,
@@ -1990,9 +2044,9 @@ var FindReplaceBar = ({
           children: status
         }
       ),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
-      showMoreOptions && /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass4, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass4, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
+      showMoreOptions && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -2003,10 +2057,10 @@ var FindReplaceBar = ({
           children: "\u2026"
         }
       ),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, "aria-label": "Close find", onClick: close, children: "\xD7" })
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass4, "aria-label": "Close find", onClick: close, children: "\xD7" })
     ] }),
     showReplace && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 pl-7", children: [
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "text",
@@ -2018,7 +2072,7 @@ var FindReplaceBar = ({
           onKeyDown: onReplaceKeyDown
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -2028,11 +2082,11 @@ var FindReplaceBar = ({
           children: "Replace"
         }
       ),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: buttonClass4, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
-      find.lastReplaceCount !== null && /* @__PURE__ */ jsx12("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
+      /* @__PURE__ */ jsx13("button", { type: "button", className: buttonClass4, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
+      find.lastReplaceCount !== null && /* @__PURE__ */ jsx13("span", { className: "px-1 text-xs text-muted-foreground", "aria-live": "polite", children: find.lastReplaceCount === 1 ? "1 replaced" : `${find.lastReplaceCount} replaced` })
     ] }),
-    showMoreOptions && moreOpen && /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx12(
+    showMoreOptions && moreOpen && /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 pl-7 text-xs text-muted-foreground", children: FIND_OPTION_TOGGLES.filter((t) => t.advanced).map((t) => /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "checkbox",
@@ -2044,6 +2098,149 @@ var FindReplaceBar = ({
     ] }, t.key)) })
   ] });
 };
+
+// src/tables/useTableMenu.ts
+import { useMemo as useMemo14, useSyncExternalStore as useSyncExternalStore9 } from "react";
+import {
+  createTableStore,
+  getTableActionState,
+  runTableAction
+} from "@pixerate/editor";
+function useTableMenu(editor) {
+  const store = useMemo14(() => createTableStore(editor), [editor]);
+  const snapshot = useSyncExternalStore9(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo14(
+    () => ({
+      ...snapshot,
+      run: (action, params) => runTableAction(editor, action, params, { focus: true }),
+      check: (action, params) => getTableActionState(editor, action, params)
+    }),
+    [snapshot, editor]
+  );
+}
+
+// src/tables/TableToolbar.tsx
+import React9 from "react";
+import { DEFAULT_TABLE_TOOLBAR } from "@pixerate/editor";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var keepSelection2 = (event) => event.preventDefault();
+var TableToolbar = ({
+  editor,
+  items = DEFAULT_TABLE_TOOLBAR,
+  showWhenOutside = false,
+  className = "flex flex-wrap items-center gap-1 text-xs",
+  buttonClassName = "rounded px-2 py-1 text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent",
+  activeButtonClassName = "bg-primary/10 text-primary",
+  separatorClassName = "mx-1 h-4 w-px bg-border",
+  onAction
+}) => {
+  const table = useTableMenu(editor);
+  if (!editor || !table.inTable && !showWhenOutside) return null;
+  return /* @__PURE__ */ jsx14("div", { className, role: "toolbar", "aria-label": "Table", "data-table-toolbar": "", children: items.map((item, index) => {
+    const status = table.check(item.action, item.params);
+    const enabled = status === true;
+    const active = item.active?.(table);
+    const separator = index > 0 && items[index - 1].group !== item.group;
+    return /* @__PURE__ */ jsxs11(React9.Fragment, { children: [
+      separator && /* @__PURE__ */ jsx14("span", { className: separatorClassName, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          "data-action": item.id,
+          "aria-label": item.title,
+          title: enabled ? item.title : `${item.title}: ${status}`,
+          ...item.active ? { "aria-pressed": !!active } : {},
+          disabled: !enabled,
+          className: active ? `${buttonClassName} ${activeButtonClassName}` : buttonClassName,
+          onMouseDown: keepSelection2,
+          onClick: () => {
+            if (table.run(item.action, item.params)) onAction?.(item);
+          },
+          children: item.label
+        }
+      )
+    ] }, item.id);
+  }) });
+};
+
+// src/tables/InsertTableGrid.tsx
+import { useState as useState12 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var keepSelection3 = (event) => event.preventDefault();
+var InsertTableGrid = ({
+  editor,
+  rows = 8,
+  cols = 8,
+  withHeaderRow = true,
+  className = "inline-flex flex-col gap-1 rounded-md border border-border bg-background p-2 text-xs shadow-md",
+  cellClassName = "h-4 w-4 rounded-sm border border-border bg-background disabled:opacity-40",
+  activeCellClassName = "border-primary bg-primary/20",
+  onInsert
+}) => {
+  const table = useTableMenu(editor);
+  const [hover, setHover] = useState12(null);
+  const status = table.actions.insertTable;
+  const disabled = !editor || !status.enabled;
+  const insert = (size) => {
+    if (table.run("insertTable", { ...size, withHeaderRow })) onInsert?.(size);
+    setHover(null);
+  };
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className,
+      role: "group",
+      "aria-label": "Insert table",
+      title: disabled ? status.reason : void 0,
+      "data-insert-table-grid": "",
+      onMouseLeave: () => setHover(null),
+      children: [
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            role: "grid",
+            "aria-label": "Table size",
+            style: { display: "grid", gridTemplateColumns: `repeat(${cols}, max-content)`, gap: 2 },
+            children: Array.from({ length: rows * cols }, (_, i) => {
+              const size = { rows: Math.floor(i / cols) + 1, cols: i % cols + 1 };
+              const active = !!hover && size.rows <= hover.rows && size.cols <= hover.cols;
+              return /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  type: "button",
+                  "data-rows": size.rows,
+                  "data-cols": size.cols,
+                  "data-active": active,
+                  "aria-label": `${size.rows} \xD7 ${size.cols} table`,
+                  disabled,
+                  className: active ? `${cellClassName} ${activeCellClassName}` : cellClassName,
+                  onMouseDown: keepSelection3,
+                  onMouseEnter: () => setHover(size),
+                  onFocus: () => setHover(size),
+                  onClick: () => insert(size)
+                },
+                i
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx15("div", { "aria-live": "polite", "data-testid": "insert-table-size", children: disabled ? status.reason : hover ? `${hover.rows} \xD7 ${hover.cols}` : "Insert table" })
+      ]
+    }
+  );
+};
+
+// src/tables/TableBubbleMenu.tsx
+import { shouldShowTableBubbleMenu } from "@pixerate/editor";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TableBubbleMenu = ({
+  editor,
+  children,
+  toolbarProps,
+  pluginKey = "tableBubbleMenu",
+  ...rest
+}) => /* @__PURE__ */ jsx16(BubbleMenu, { editor, pluginKey, shouldShow: shouldShowTableBubbleMenu, ...rest, children: children ?? /* @__PURE__ */ jsx16(TableToolbar, { editor, ...toolbarProps }) });
 export {
   AdjustmentLayersPanel,
   AssetMentionChips,
@@ -2056,6 +2253,7 @@ export {
   DirtyTracker2 as DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  ExportDocxButton,
   FindReplaceBar,
   FormulaHints,
   GenerationHistory,
@@ -2063,6 +2261,7 @@ export {
   Histogram,
   HistoryManager2 as HistoryManager,
   ImageEditor,
+  InsertTableGrid,
   JobProgress,
   MergePreview,
   NameManager,
@@ -2079,6 +2278,8 @@ export {
   SpreadsheetGroupRow,
   SpreadsheetValidationDialog,
   StylesGallery,
+  TableBubbleMenu,
+  TableToolbar,
   TemplateRenderer,
   TrackedChangesList,
   VariableForm,
@@ -2093,6 +2294,7 @@ export {
   useComments,
   useDismissGuard,
   useDocumentCompare,
+  useDocxExport,
   useEditor2 as useEditor,
   useEditorSlots,
   useFileImport,
@@ -2114,6 +2316,8 @@ export {
   useRegisterCommands,
   useSpreadsheetClipboard,
   useSpreadsheetEditor,
+  useSpreadsheetViewport,
+  useTableMenu,
   useTrackChanges,
   withoutDirty
 };