@pixerate/editor-react 0.16.0 → 0.18.0

package/dist/index.js

@@ -1,21 +1,29 @@
 import {
   FormulaHints,
+  NameManager,
+  SheetTabs,
+  SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
+  SpreadsheetValidationDialog,
   useFillHandle,
   useSpreadsheetClipboard,
-  useSpreadsheetEditor
-} from "./chunk-FYIPXHAE.js";
+  useSpreadsheetEditor,
+  useSpreadsheetViewport
+} from "./chunk-34HEZX7J.js";
 import {
   AdjustmentLayersPanel,
   ControlSlider,
   CurvesEditor,
   Histogram,
   ImageEditor,
+  RefineEdgePanel,
+  SelectionOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "./chunk-XTFR3IMK.js";
+} from "./chunk-ZU54BMDC.js";
 import {
   CommandPalette,
   useCommandPalette,
@@ -27,11 +35,14 @@ import {
   useAutosave
 } from "./chunk-XWFU2CSG.js";
 import {
+  AssetMentionChips,
+  GenerationHistory,
   GenerationSettings,
   JobProgress,
   useGenerationPlan,
+  useGenerationRecords,
   useJobProgress
-} from "./chunk-7SPRQZ6H.js";
+} from "./chunk-I3E4KSA2.js";
 
 // src/hooks/usePromptEditor.ts
 import { useMemo, useEffect, useRef } from "react";
@@ -576,7 +587,8 @@ function useHistoryShortcuts(manager, options = {}) {
 // src/hooks/useFileImport.ts
 import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef6, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
-  FileImportController
+  FileImportController,
+  summarizeImportStructure
 } from "@pixerate/editor";
 function useFileImport(editor, options = {}) {
   const editorRef = useRef6(editor);
@@ -592,18 +604,73 @@ function useFileImport(editor, options = {}) {
     controller.setOptions(options);
   });
   const state = useSyncExternalStore3(controller.subscribe, controller.getState, controller.getState);
+  const structureSummary = useMemo3(() => summarizeImportStructure(state.lastOutcomes), [state.lastOutcomes]);
   return {
     ...state,
+    structureSummary,
     accept: controller.accept,
     openFilePicker: controller.openFilePicker,
     importFiles: controller.importFiles
   };
 }
 
+// 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]);
@@ -613,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
@@ -637,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;
     }
@@ -673,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 = [],
@@ -692,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",
@@ -709,7 +776,7 @@ var TemplateRenderer = ({
         "--color-from": colors.from,
         "--color-to": colors.to
       };
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "span",
         {
           style,
@@ -728,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),
@@ -750,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}` }),
             "}"
           ]
         },
@@ -758,7 +825,7 @@ var TemplateRenderer = ({
       );
     }
     if (token.type === "conditional" && token.conditional) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "span",
         {
           "data-conditional": token.conditional,
@@ -770,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",
@@ -780,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,
@@ -805,7 +872,7 @@ var VariableForm = ({
     () => defaultValues ?? {}
   );
   const entered = values ?? internal;
-  const fields = useMemo5(
+  const fields = useMemo6(
     () => getVariableFormFields(content, { templates, bindings }),
     [content, templates, bindings]
   );
@@ -815,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(
@@ -825,7 +892,7 @@ var VariableForm = ({
           className: "flex items-center gap-2",
           "data-variable-field": field.name,
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 id,
@@ -835,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
@@ -850,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,
@@ -876,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,
@@ -891,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
     };
@@ -913,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]
   );
@@ -974,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;
@@ -1023,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`,
@@ -1038,7 +1105,7 @@ var MergePreview = ({
       )
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "file",
@@ -1051,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",
               {
@@ -1071,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))
                 ]
               }
             )
@@ -1082,7 +1149,7 @@ var MergePreview = ({
       ))
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1092,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",
@@ -1104,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,
@@ -1116,7 +1183,7 @@ var MergePreview = ({
       }
     ) }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1131,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",
@@ -1142,7 +1209,7 @@ var MergePreview = ({
             children: "Download .txt"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1153,7 +1220,7 @@ var MergePreview = ({
         )
       ] })
     ] }),
-    result && /* @__PURE__ */ jsx4(
+    result && /* @__PURE__ */ jsx5(
       "textarea",
       {
         readOnly: true,
@@ -1168,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",
@@ -1192,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",
@@ -1216,6 +1283,168 @@ var OutlinePanel = ({
   ] });
 };
 
+// src/hooks/useParagraphStyles.ts
+import { useMemo as useMemo9, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import {
+  createParagraphStylesStore,
+  getStyleRegistry
+} from "@pixerate/editor";
+function useParagraphStyles(editor) {
+  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 {
+      ...snapshot,
+      registry,
+      currentStyle: snapshot.currentStyleId && registry?.get(snapshot.currentStyleId) || null,
+      apply: (id) => !!live()?.chain().focus().setParagraphStyle(id).run(),
+      clear: () => !!live()?.chain().focus().clearParagraphStyle().run(),
+      updateFromSelection: (id) => !!live()?.chain().focus().updateParagraphStyleFromSelection(id).run(),
+      createFromSelection: (name, options) => {
+        const e = live();
+        if (!e || !registry) return null;
+        const id = options?.id ?? registry.newId(name.trim());
+        const ok = e.chain().focus().createParagraphStyleFromSelection(name, { ...options, id }).run();
+        return ok ? id : null;
+      },
+      applyCharacterStyle: (id) => !!live()?.chain().focus().setCharacterStyle(id).run()
+    };
+  }, [snapshot, editor]);
+}
+
+// src/components/StylesGallery.tsx
+import { useState as useState8 } from "react";
+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 = ({
+  editor,
+  variant = "dropdown",
+  showAllStyles = false,
+  showActions = true,
+  preview = true,
+  className = "relative inline-flex flex-wrap items-center gap-1 text-sm",
+  itemClassName = "rounded px-2 py-1 text-left text-xs text-foreground hover:bg-muted",
+  activeItemClassName = "bg-primary/10 text-primary",
+  onChange
+}) => {
+  const styles = useParagraphStyles(editor);
+  const [open, setOpen] = useState8(false);
+  const [creating, setCreating] = useState8(false);
+  const [name, setName] = useState8("");
+  const list = showAllStyles ? styles.styles : styles.gallery;
+  const current = styles.currentStyle;
+  const expanded = variant === "gallery" || open;
+  const close = () => {
+    if (variant === "dropdown") setOpen(false);
+    setCreating(false);
+    setName("");
+  };
+  const previewStyle = (id) => {
+    if (!preview || !styles.registry) return void 0;
+    return Object.fromEntries(
+      Object.entries(styles.registry.previewDeclarations(id)).map(([k, v]) => [camel(k), v])
+    );
+  };
+  const apply = (id) => {
+    if (styles.apply(id)) onChange?.({ type: "apply", id });
+    close();
+  };
+  const create = (event) => {
+    event.preventDefault();
+    const id = name.trim() ? styles.createFromSelection(name) : null;
+    if (id) onChange?.({ type: "create", id });
+    close();
+  };
+  return /* @__PURE__ */ jsxs5("div", { className, role: "group", "aria-label": "Paragraph styles", "data-styles-gallery": variant, children: [
+    variant === "dropdown" && /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        className: itemClassName,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        disabled: !editor || !styles.registry,
+        onMouseDown: keepSelection,
+        onClick: () => setOpen((value) => !value),
+        children: [
+          current?.name ?? "Styles",
+          " \u25BE"
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        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__ */ 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__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                "data-style-id": style.id,
+                className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+                style: previewStyle(style.id),
+                onMouseDown: keepSelection,
+                onClick: () => apply(style.id),
+                children: style.name
+              },
+              style.id
+            );
+          }) }),
+          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__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: itemClassName,
+                disabled: !current,
+                onMouseDown: keepSelection,
+                onClick: () => {
+                  if (current && styles.updateFromSelection(current.id)) {
+                    onChange?.({ type: "update", id: current.id });
+                  }
+                  close();
+                },
+                children: current ? `Update ${current.name} to match selection` : "Update to match selection"
+              }
+            ),
+            creating ? /* @__PURE__ */ jsxs5("form", { className: "flex items-center gap-1", onSubmit: create, children: [
+              /* @__PURE__ */ jsx7(
+                "input",
+                {
+                  "aria-label": "New style name",
+                  className: "w-32 rounded border border-border bg-background px-1 py-0.5 text-xs",
+                  value: name,
+                  autoFocus: true,
+                  onChange: (event) => setName(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx7("button", { type: "submit", className: itemClassName, disabled: !name.trim(), children: "Create" })
+            ] }) : /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: itemClassName,
+                disabled: !editor || !styles.registry,
+                onMouseDown: keepSelection,
+                onClick: () => setCreating(true),
+                children: "New style from selection"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
 // src/index.ts
 import {
   DirtyTracker as DirtyTracker2,
@@ -1228,10 +1457,10 @@ import {
 } from "@pixerate/editor";
 
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo8 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } 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__ */ jsx6(
+  Button: (props) => /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -1241,26 +1470,26 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ jsx6("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ jsxs5("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", 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__ */ jsx6("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ jsx8("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ jsx6("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 = useMemo8(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx6(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 useMemo9, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo11, useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -1287,8 +1516,8 @@ function useComments(source) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
-  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
-  return useMemo9(() => ({ ...snapshot, store }), [snapshot, store]);
+  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return useMemo11(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
@@ -1297,8 +1526,8 @@ function useTrackChanges(editor) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
-  const snapshot = useSyncExternalStore5(subscribe, getSnapshot, getSnapshot);
-  return useMemo9(() => {
+  const snapshot = useSyncExternalStore7(subscribe, getSnapshot, getSnapshot);
+  return useMemo11(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -1312,18 +1541,21 @@ function useTrackChanges(editor) {
       acceptAll: run((e) => e.commands.acceptAllChanges()),
       rejectAll: run((e) => e.commands.rejectAllChanges()),
       next: run((e) => e.chain().focus().selectNextChange().run()),
-      previous: run((e) => e.chain().focus().selectPreviousChange().run())
+      previous: run((e) => e.chain().focus().selectPreviousChange().run()),
+      select: (id) => run((e) => e.chain().focus().selectChange(id).run())(),
+      acceptMove: (id) => run((e) => e.commands.acceptMove(id))(),
+      rejectMove: (id) => run((e) => e.commands.rejectMove(id))()
     };
   }, [snapshot, editor]);
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx7, jsxs as jsxs6 } 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";
@@ -1337,18 +1569,18 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState8(showResolvedInitial);
+  const [showResolved, setShowResolved] = useState9(showResolvedInitial);
   const author = authorProp ?? getCommentAuthor(editor) ?? { id: "anonymous", name: "Anonymous" };
   const visible = threads.filter((t) => showResolved || !t.resolved);
   const resolvedCount = threads.filter((t) => t.resolved).length;
-  return /* @__PURE__ */ jsxs6("aside", { className, "aria-label": "Comments", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs6("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs7("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "text-xs font-medium text-muted-foreground", children: [
         threads.length - resolvedCount,
         " open",
         resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
       ] }),
-      resolvedCount > 0 && /* @__PURE__ */ jsx7(
+      resolvedCount > 0 && /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1359,7 +1591,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx7(
+    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,
@@ -1381,7 +1613,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState8("");
+  const [draft, setDraft] = useState9("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -1407,7 +1639,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "li",
     {
       className: `flex flex-col gap-2 rounded-md border bg-background p-3 cursor-pointer ${active ? "border-primary ring-1 ring-primary" : "border-border"} ${thread.resolved ? "opacity-70" : ""}`,
@@ -1423,24 +1655,24 @@ var CommentThreadCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx7("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__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__ */ jsx7("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ jsx7("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs6("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
-          /* @__PURE__ */ jsxs6("span", { className: "text-xs", children: [
-            /* @__PURE__ */ jsx7("span", { className: "font-medium", children: reply.author.name }),
+        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__ */ jsx9("span", { className: "font-medium", children: reply.author.name }),
             " ",
-            /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ jsx9("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx7("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__ */ jsxs6("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx7(
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx9(
             "textarea",
             {
               className: textareaClass,
@@ -1458,9 +1690,9 @@ var CommentThreadCard = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1472,9 +1704,9 @@ var CommentThreadCard = ({
             )
           ] })
         ] }),
-        !isDraft && /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx7(
+        !isDraft && /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx9("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1490,7 +1722,7 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-import { jsx as jsx8, jsxs as jsxs7 } 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 = ({
@@ -1503,8 +1735,8 @@ var ReviewToolbar = ({
   const count = review.changes.length;
   const current = review.currentChange;
   const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
-  return /* @__PURE__ */ jsxs7("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1515,8 +1747,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ jsx8("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1527,8 +1759,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx8("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__ */ jsx8(
+    /* @__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",
@@ -1539,7 +1771,7 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    showDescription && current && /* @__PURE__ */ jsxs7(
+    showDescription && current && /* @__PURE__ */ jsxs8(
       "span",
       {
         className: descriptionClassName,
@@ -1551,8 +1783,8 @@ var ReviewToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx8("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1562,7 +1794,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
@@ -1572,18 +1804,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ jsx8("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ jsx8("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 jsx9 } 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__ */ jsx9(
+}) => /* @__PURE__ */ jsx11(
   "button",
   {
     type: "button",
@@ -1595,13 +1827,13 @@ var CommentButton = ({
 );
 
 // src/review/useDocumentCompare.ts
-import { useCallback as useCallback7, useMemo as useMemo10, useRef as useRef8, useState as useState9 } 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] = useState9(null);
-  const defaults = useRef8(options);
+  const [summary, setSummary] = useState10(null);
+  const defaults = useRef9(options);
   defaults.current = options;
   const compare = useCallback7(
     (original, revised, overrides) => {
@@ -1616,11 +1848,58 @@ function useDocumentCompare(editor, options) {
     [editor]
   );
   const clear = useCallback7(() => setSummary(null), []);
-  return useMemo10(() => ({ 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 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,
+  className = "flex flex-col gap-1 text-sm",
+  itemClassName = "flex items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
+  activeItemClassName = "bg-primary/10",
+  emptyState = "No tracked changes."
+}) => {
+  const review = useTrackChanges(editor);
+  if (review.changes.length === 0) {
+    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__ */ 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",
+      {
+        className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+        "data-change-type": change.type,
+        "data-change-id": change.id,
+        children: [
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "min-w-0 flex-1 truncate text-left text-xs",
+              title: `${change.author.name}: ${change.description}`,
+              onClick: () => review.select(change.id),
+              children: [
+                /* @__PURE__ */ jsx12("span", { className: "font-medium", children: trackedChangeLabel(change) }),
+                change.author.name ? ` \xB7 ${change.author.name}` : "",
+                /* @__PURE__ */ jsx12("span", { className: "block truncate text-muted-foreground", children: change.description })
+              ]
+            }
+          ),
+          /* @__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}`
+    );
+  }) });
+};
+
 // src/find-replace/useFindReplace.ts
-import { useCallback as useCallback8, useMemo as useMemo11, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo13, useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
   EMPTY_FIND_REPLACE_SNAPSHOT,
   getFindReplaceStore
@@ -1634,8 +1913,8 @@ function useFindReplace(editor) {
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_FIND_REPLACE_SNAPSHOT;
-  const snapshot = useSyncExternalStore6(subscribe, getSnapshot, getSnapshot);
-  return useMemo11(() => {
+  const snapshot = useSyncExternalStore8(subscribe, getSnapshot, getSnapshot);
+  return useMemo13(() => {
     const run = (fn) => {
       if (editor && !editor.isDestroyed && store) fn(editor);
     };
@@ -1659,12 +1938,12 @@ function useFindReplace(editor) {
 }
 
 // src/find-replace/FindReplaceBar.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState10 } 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 jsx10, jsxs as jsxs8 } 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 buttonClass3 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
-var toggleClass = (on) => `${buttonClass3} font-mono ${on ? "bg-primary/10 text-primary" : "text-muted-foreground"}`;
+var 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"}`;
 var isMod = (e) => e.metaKey || e.ctrlKey;
 var FindReplaceBar = ({
   editor,
@@ -1674,10 +1953,10 @@ var FindReplaceBar = ({
   onClose
 }) => {
   const find = useFindReplace(editor);
-  const findInput = useRef9(null);
-  const [moreOpen, setMoreOpen] = useState10(false);
+  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();
@@ -1715,20 +1994,20 @@ var FindReplaceBar = ({
     if (isMod(e)) find.replaceAll();
     else find.replace();
   };
-  return /* @__PURE__ */ jsxs8("div", { className, role: "search", "aria-label": "Find and replace", onKeyDown: onBarKeyDown, children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx10(
+  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__ */ jsx13(
         "button",
         {
           type: "button",
-          className: buttonClass3,
+          className: buttonClass4,
           "aria-label": "Toggle replace",
           "aria-expanded": showReplace,
           onClick: () => find.show(showReplace ? "find" : "replace"),
           children: showReplace ? "\u25BE" : "\u25B8"
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         "input",
         {
           ref: findInput,
@@ -1742,7 +2021,7 @@ var FindReplaceBar = ({
           onKeyDown: onFindKeyDown
         }
       ),
-      FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ jsx10(
+      FIND_OPTION_TOGGLES.filter((t) => !t.advanced).map((t) => /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1755,7 +2034,7 @@ var FindReplaceBar = ({
         },
         t.key
       )),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         "span",
         {
           className: `min-w-[5rem] px-1 text-center text-xs ${find.error ? "text-destructive" : "text-muted-foreground"}`,
@@ -1765,23 +2044,23 @@ var FindReplaceBar = ({
           children: status
         }
       ),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, "aria-label": "Previous match", disabled: !hasMatches, onClick: find.previous, children: "\u2191" }),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, "aria-label": "Next match", disabled: !hasMatches, onClick: find.next, children: "\u2193" }),
-      showMoreOptions && /* @__PURE__ */ jsx10(
+      /* @__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",
-          className: buttonClass3,
+          className: buttonClass4,
           "aria-label": "More options",
           "aria-expanded": moreOpen,
           onClick: () => setMoreOpen((v) => !v),
           children: "\u2026"
         }
       ),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, "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__ */ jsxs8("div", { className: "flex items-center gap-1 pl-7", children: [
-      /* @__PURE__ */ jsx10(
+    showReplace && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 pl-7", children: [
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "text",
@@ -1793,21 +2072,21 @@ var FindReplaceBar = ({
           onKeyDown: onReplaceKeyDown
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
-          className: buttonClass3,
+          className: buttonClass4,
           disabled: !hasMatches || find.currentIndex < 0,
           onClick: find.replace,
           children: "Replace"
         }
       ),
-      /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass3, disabled: !hasMatches, onClick: find.replaceAll, children: "Replace all" }),
-      find.lastReplaceCount !== null && /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsxs8("label", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx10(
+    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",
@@ -1819,8 +2098,152 @@ 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,
   BubbleMenu,
   CommandPalette,
   CommentButton,
@@ -1830,21 +2253,35 @@ export {
   DirtyTracker2 as DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  ExportDocxButton,
   FindReplaceBar,
   FormulaHints,
+  GenerationHistory,
   GenerationSettings,
   Histogram,
   HistoryManager2 as HistoryManager,
   ImageEditor,
+  InsertTableGrid,
   JobProgress,
   MergePreview,
+  NameManager,
   OutlinePanel,
   RecoveryPrompt,
+  RefineEdgePanel,
   ReviewToolbar,
+  SelectionOptionsBar,
+  SheetTabs,
+  SpreadsheetConditionalFormatPanel,
   SpreadsheetContextMenu,
+  SpreadsheetDataValidationPanel,
   SpreadsheetEditor,
   SpreadsheetGroupRow,
+  SpreadsheetValidationDialog,
+  StylesGallery,
+  TableBubbleMenu,
+  TableToolbar,
   TemplateRenderer,
+  TrackedChangesList,
   VariableForm,
   bindDirtyToHistory2 as bindDirtyToHistory,
   createDirtyTracker,
@@ -1857,12 +2294,14 @@ export {
   useComments,
   useDismissGuard,
   useDocumentCompare,
+  useDocxExport,
   useEditor2 as useEditor,
   useEditorSlots,
   useFileImport,
   useFillHandle,
   useFindReplace,
   useGenerationPlan,
+  useGenerationRecords,
   useHistory,
   useHistoryDirty,
   useHistoryShortcuts,
@@ -1872,10 +2311,13 @@ export {
   useMergePreview,
   useNavigationGuard,
   useOutline,
+  useParagraphStyles,
   usePromptEditor,
   useRegisterCommands,
   useSpreadsheetClipboard,
   useSpreadsheetEditor,
+  useSpreadsheetViewport,
+  useTableMenu,
   useTrackChanges,
   withoutDirty
 };