@pixerate/editor-react 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,3 +1,12 @@
+import {
+  FormulaHints,
+  SpreadsheetContextMenu,
+  SpreadsheetEditor,
+  SpreadsheetGroupRow,
+  useFillHandle,
+  useSpreadsheetClipboard,
+  useSpreadsheetEditor
+} from "./chunk-MHTAR3RS.js";
 import {
   ImageEditor,
   useImageEditor
@@ -16,7 +25,8 @@ import {
   plainTextToTipTapHtml,
   plainTextToSlice,
   getEditorText,
-  tokenizePrompt
+  tokenizePrompt,
+  FileImport
 } from "@pixerate/editor";
 var DEFAULT_TEMPLATES = [];
 var DEFAULT_COLOR_MAP = /* @__PURE__ */ new Map([
@@ -41,8 +51,12 @@ function usePromptEditor({
   onMilestone,
   containerId = "editor-container",
   jsonVariables,
-  speed = 2
+  speed = 2,
+  fileImport
 }) {
+  const fileImportRef = useRef(fileImport);
+  fileImportRef.current = fileImport;
+  const fileImportEnabled = !!fileImport;
   const slashCommandActiveRef = useRef(slashCommandActive);
   slashCommandActiveRef.current = slashCommandActive;
   const clearSlashCommandRef = useRef(clearSlashCommand);
@@ -97,7 +111,14 @@ function usePromptEditor({
         TemplateSuggestions.configure({
           templates
         }),
-        LoadingNode
+        LoadingNode,
+        ...fileImportEnabled ? [
+          FileImport.configure({
+            ...typeof fileImportRef.current === "object" ? fileImportRef.current : {},
+            // Prompt editors only ever receive plain text.
+            asPlainText: true
+          })
+        ] : []
       ],
       content: plainTextToTipTapHtml(content),
       onUpdate: ({ editor: ed }) => {
@@ -194,7 +215,7 @@ function usePromptEditor({
     },
     // Only options baked into extensions recreate the editor; editable state,
     // placeholder, class names and content are applied to the live instance.
-    [resolvedColorMap, templateKey, speed, jsonVariablesKey]
+    [resolvedColorMap, templateKey, speed, jsonVariablesKey, fileImportEnabled]
   );
   useEffect(() => {
     if (editor && !editor.isDestroyed) {
@@ -240,10 +261,22 @@ function usePromptEditor({
 
 // src/hooks/useEditor.ts
 import { useEditor as useTipTapEditor } from "@tiptap/react";
-import { createRichTextPreset } from "@pixerate/editor";
+import {
+  createRichTextPreset
+} from "@pixerate/editor";
 function useEditor2(options = {}) {
-  const { richTextOptions, extensions = [], ...editorOptions } = options;
-  const preset = createRichTextPreset(richTextOptions);
+  const {
+    richTextOptions,
+    fileImport,
+    richClipboard,
+    extensions = [],
+    ...editorOptions
+  } = options;
+  const preset = createRichTextPreset({
+    ...fileImport !== void 0 ? { fileImport } : {},
+    ...richClipboard !== void 0 ? { richClipboard } : {},
+    ...richTextOptions
+  });
   const combinedExtensions = [...preset, ...extensions];
   return useTipTapEditor({
     extensions: combinedExtensions,
@@ -473,6 +506,42 @@ function useHistoryShortcuts(manager, options = {}) {
   }, [manager, enabled, target, ignoreEditableElements]);
 }
 
+// src/hooks/useFileImport.ts
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  FileImportController
+} from "@pixerate/editor";
+function useFileImport(editor, options = {}) {
+  const editorRef = useRef5(editor);
+  editorRef.current = editor;
+  const controller = useMemo2(
+    () => new FileImportController(() => {
+      const current = editorRef.current;
+      return current && !current.isDestroyed ? current : null;
+    }, options),
+    []
+  );
+  useEffect4(() => {
+    controller.setOptions(options);
+  });
+  const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  return {
+    ...state,
+    accept: controller.accept,
+    openFilePicker: controller.openFilePicker,
+    importFiles: controller.importFiles
+  };
+}
+
+// src/hooks/useAgentToolProvider.ts
+import { useEffect as useEffect5 } from "react";
+function useAgentToolProvider(registry, provider) {
+  useEffect5(() => {
+    if (!registry || !provider) return;
+    return registry.register(provider);
+  }, [registry, provider]);
+}
+
 // src/components/EditorContent.tsx
 import {
   EditorContent as TipTapEditorContent
@@ -487,7 +556,7 @@ var EditorContent = ({
 };
 
 // src/components/BubbleMenu.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import {
   BubbleMenuPlugin
@@ -501,12 +570,12 @@ var BubbleMenu = ({
   pluginKey = "bubbleMenu",
   updateDelay
 }) => {
-  const menuEl = useRef5(null);
+  const menuEl = useRef6(null);
   const [mounted, setMounted] = useState3(false);
   if (!menuEl.current && typeof document !== "undefined") {
     menuEl.current = document.createElement("div");
   }
-  useEffect4(() => {
+  useEffect6(() => {
     if (!editor || !menuEl.current || editor.isDestroyed) {
       return;
     }
@@ -537,28 +606,31 @@ var BubbleMenu = ({
 };
 
 // src/components/TemplateRenderer.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import {
-  tokenizePrompt as tokenizePrompt2,
+  evaluatePromptTokens,
   resolveTemplates
 } from "@pixerate/editor";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CONDITIONAL_PREFIX = { if: "?", unless: "!", end: "/" };
 var TemplateRenderer = ({
   content,
   templates = [],
   templateColorMap,
   resolve = false,
+  bindings,
+  values,
   className = "font-mono text-sm leading-relaxed whitespace-pre-wrap break-words",
   onTemplateClick,
   onVariableClick
 }) => {
-  const displayText = useMemo2(() => {
+  const displayText = useMemo3(() => {
     if (!resolve || templates.length === 0) return content;
-    return resolveTemplates(content, templates);
-  }, [content, templates, resolve]);
-  const tokens = useMemo2(() => {
-    return tokenizePrompt2(displayText);
-  }, [displayText]);
+    return resolveTemplates(content, templates, { bindings });
+  }, [content, templates, resolve, bindings]);
+  const tokens = useMemo3(() => {
+    return evaluatePromptTokens(displayText, values);
+  }, [displayText, values]);
   return /* @__PURE__ */ jsx2("div", { className, children: tokens.map((token, index) => {
     if (token.type === "template") {
       const colors = templateColorMap?.get(token.value) || {
@@ -582,13 +654,49 @@ var TemplateRenderer = ({
       );
     }
     if (token.type === "variable") {
-      return /* @__PURE__ */ jsx2(
+      const details = [
+        `Variable: ${token.value}`,
+        token.description,
+        token.defaultValue !== void 0 ? `Default: ${token.defaultValue || "(empty)"}` : void 0
+      ].filter(Boolean).join("\n");
+      if (token.resolvedValue !== void 0) {
+        return /* @__PURE__ */ jsx2(
+          "span",
+          {
+            onClick: () => onVariableClick?.(token.value),
+            "data-variable": token.value,
+            "data-value-source": token.valueSource,
+            className: token.valueSource === "value" ? "inline px-1 mx-0.5 rounded-md bg-emerald-400/15 text-emerald-700 dark:text-emerald-300 border-b border-emerald-400/60 cursor-pointer" : "inline px-1 mx-0.5 rounded-md bg-violet-400/10 text-violet-600 dark:text-violet-300 italic border-b border-dashed border-violet-400/60 cursor-pointer",
+            title: details,
+            children: token.resolvedValue
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ jsxs(
         "span",
         {
           onClick: () => onVariableClick?.(token.value),
+          "data-variable": token.value,
           className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 dark:text-violet-300 hover:brightness-110 cursor-pointer transition-all",
-          title: `Variable: ${token.value}`,
-          children: `{${token.value}}`
+          title: details,
+          children: [
+            `{${token.value}`,
+            token.defaultValue !== void 0 && /* @__PURE__ */ jsx2("span", { className: "opacity-60", children: `|${token.defaultValue}` }),
+            "}"
+          ]
+        },
+        index
+      );
+    }
+    if (token.type === "conditional" && token.conditional) {
+      return /* @__PURE__ */ jsx2(
+        "span",
+        {
+          "data-conditional": token.conditional,
+          className: "inline-flex items-center px-1 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-amber-400/40 bg-amber-400/15 text-amber-700 dark:text-amber-300",
+          title: token.conditional === "end" ? `End of section: ${token.value}` : token.conditional === "if" ? `Shown when "${token.value}" has a value` : `Shown when "${token.value}" is empty`,
+          children: `{${CONDITIONAL_PREFIX[token.conditional]}${token.value}}`
         },
         index
       );
@@ -608,6 +716,143 @@ var TemplateRenderer = ({
   }) });
 };
 
+// src/components/VariableForm.tsx
+import { useId, useMemo as useMemo4, useState as useState4 } from "react";
+import {
+  compactVariableValues,
+  getVariableFormFields
+} from "@pixerate/editor";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var VariableForm = ({
+  content,
+  templates,
+  bindings,
+  values,
+  defaultValues,
+  onChange,
+  className = "flex flex-col gap-3 text-sm"
+}) => {
+  const idPrefix = useId();
+  const [internal, setInternal] = useState4(
+    () => defaultValues ?? {}
+  );
+  const entered = values ?? internal;
+  const fields = useMemo4(
+    () => getVariableFormFields(content, { templates, bindings }),
+    [content, templates, bindings]
+  );
+  const update = (name, value) => {
+    const next = { ...entered, [name]: value };
+    if (values === void 0) setInternal(next);
+    onChange?.(compactVariableValues(next), next);
+  };
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsx3("form", { className, onSubmit: (event) => event.preventDefault(), children: fields.map((field) => {
+    const id = `${idPrefix}-${field.name}`;
+    if (field.conditionOnly) {
+      return /* @__PURE__ */ jsxs2(
+        "label",
+        {
+          htmlFor: id,
+          className: "flex items-center gap-2",
+          "data-variable-field": field.name,
+          children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                id,
+                name: field.name,
+                type: "checkbox",
+                checked: (entered[field.name] ?? "") !== "",
+                onChange: (event) => update(field.name, event.target.checked ? "true" : "")
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { children: field.label })
+          ]
+        },
+        field.name
+      );
+    }
+    return /* @__PURE__ */ jsxs2(
+      "label",
+      {
+        htmlFor: id,
+        className: "flex flex-col gap-1",
+        "data-variable-field": field.name,
+        children: [
+          /* @__PURE__ */ jsxs2("span", { className: "font-medium", children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx3("span", { className: "text-rose-500", "aria-hidden": "true", children: " *" })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              id,
+              name: field.name,
+              type: "text",
+              value: entered[field.name] ?? "",
+              placeholder: field.placeholder,
+              "aria-required": field.required || void 0,
+              onChange: (event) => update(field.name, event.target.value),
+              className: "px-2 py-1 rounded-md border border-violet-400/40 bg-transparent"
+            }
+          )
+        ]
+      },
+      field.name
+    );
+  }) });
+};
+
+// src/hooks/useOutline.ts
+import { useMemo as useMemo5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { createOutlineStore } from "@pixerate/editor";
+function useOutline(editor) {
+  const store = useMemo5(() => createOutlineStore(editor), [editor]);
+  return useSyncExternalStore3(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+
+// src/components/OutlinePanel.tsx
+import { navigateToHeading } from "@pixerate/editor";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var OutlinePanel = ({
+  editor,
+  title = "Outline",
+  emptyState = "Add headings to see the outline.",
+  maxLevel = 6,
+  focusOnNavigate = true,
+  className = "flex flex-col gap-1 text-sm",
+  itemClassName = "w-full truncate rounded px-2 py-1 text-left hover:bg-black/5",
+  activeItemClassName = "font-semibold bg-black/5",
+  onNavigate
+}) => {
+  const { headings, activeId } = useOutline(editor);
+  const visible = headings.filter((h) => h.level <= maxLevel);
+  return /* @__PURE__ */ jsxs3("nav", { className, "aria-label": "Document outline", "data-outline-panel": "", children: [
+    title != null && /* @__PURE__ */ jsx4("div", { className: "pixerate-outline-title", children: title }),
+    visible.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "pixerate-outline-empty", children: emptyState }) : /* @__PURE__ */ jsx4("ul", { role: "list", style: { listStyle: "none", margin: 0, padding: 0 }, children: visible.map((heading) => {
+      const active = heading.id === activeId;
+      return /* @__PURE__ */ jsx4("li", { "data-level": heading.level, children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: active ? `${itemClassName} ${activeItemClassName}` : itemClassName,
+          style: { paddingLeft: `${0.5 + heading.depth * 0.75}rem` },
+          "aria-current": active ? "location" : void 0,
+          "data-heading-id": heading.id,
+          onClick: () => {
+            if (!editor) return;
+            if (navigateToHeading(editor, heading, { focus: focusOnNavigate })) {
+              onNavigate?.(heading);
+            }
+          },
+          children: heading.text || "Untitled"
+        }
+      ) }, heading.id);
+    }) })
+  ] });
+};
+
 // src/index.ts
 import {
   DirtyTracker,
@@ -617,680 +862,392 @@ import {
   createHistoryManager as createHistoryManager2
 } from "@pixerate/editor";
 
-// src/spreadsheet/useSpreadsheetEditor.ts
-import { useState as useState4, useRef as useRef6, useCallback as useCallback4 } from "react";
+// src/slots.tsx
+import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultSlots = {
+  Button: (props) => /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: `pixerate-btn ${props.className || ""}`,
+      onClick: props.onClick,
+      disabled: props.disabled,
+      children: props.children
+    }
+  ),
+  Tooltip: (props) => /* @__PURE__ */ jsx5("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
+  NodeHeader: (props) => /* @__PURE__ */ jsxs4("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      props.icon,
+      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: props.title })
+    ] }),
+    props.onClose && /* @__PURE__ */ jsx5("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+  ] })
+};
+var EditorSlotsContext = createContext(defaultSlots);
+function EditorSlotsProvider({ slots, children }) {
+  const mergedSlots = useMemo6(() => ({ ...defaultSlots, ...slots }), [slots]);
+  return /* @__PURE__ */ jsx5(EditorSlotsContext.Provider, { value: mergedSlots, children });
+}
+function useEditorSlots() {
+  return useContext(EditorSlotsContext);
+}
+
+// src/review/useReview.ts
+import { useCallback as useCallback4, useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
-  SpreadsheetController
+  getCommentStore,
+  getTrackChangesStore
 } from "@pixerate/editor";
-function useSpreadsheetEditor(options = {}) {
-  const optionsRef = useRef6(options);
-  optionsRef.current = options;
-  const settersRef = useRef6({});
-  const [controller] = useState4(
-    () => new SpreadsheetController({
-      ...options,
-      onDocumentChange: (updated) => {
-        settersRef.current.setDoc?.({ ...updated });
-        optionsRef.current.onDocumentChange?.(updated);
-      },
-      onSelectionChange: (active, range) => {
-        settersRef.current.setActiveCell?.(active);
-        settersRef.current.setSelectedRange?.(range);
-        optionsRef.current.onSelectionChange?.(active, range);
-      },
-      onCellCommit: (rowId, colId, raw, value) => {
-        optionsRef.current.onCellCommit?.(rowId, colId, raw, value);
-      }
-    })
+var EMPTY_COMMENTS = Object.freeze({
+  threads: [],
+  activeThreadId: null
+});
+var EMPTY_TRACK_CHANGES = Object.freeze({
+  enabled: false,
+  author: { id: "anonymous", name: "Anonymous" },
+  changes: [],
+  currentChangeId: null
+});
+var noopUnsubscribe = () => {
+};
+function isCommentStore(value) {
+  return !!value && typeof value.getSnapshot === "function" && typeof value.createThread === "function";
+}
+function useComments(source) {
+  const store = isCommentStore(source) ? source : getCommentStore(source);
+  const subscribe = useCallback4(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
+    [store]
   );
-  const [doc, setDoc] = useState4(() => ({ ...controller.document }));
-  const [activeCell, setActiveCell] = useState4(controller.activeCell);
-  const [selectedRange, setSelectedRange] = useState4(controller.selectedRange);
-  const [editingCell, setEditingCell] = useState4(null);
-  const [draftValue, setDraftValue] = useState4("");
-  settersRef.current = { setDoc, setActiveCell, setSelectedRange };
-  const setCellValue = useCallback4((rowId, colId, raw) => {
-    controller.setCellValue(rowId, colId, raw);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const selectCell = useCallback4((row, col, extendSelection = false) => {
-    controller.selectCell(row, col, extendSelection);
-    setActiveCell(controller.activeCell);
-    setSelectedRange(controller.selectedRange);
-  }, [controller]);
-  const selectRange = useCallback4((range) => {
-    controller.selectRange(range);
-    setSelectedRange(controller.selectedRange);
-  }, [controller]);
-  const startEditing = useCallback4((row, col, initialVal) => {
-    controller.startEditing(row, col, initialVal);
-    setActiveCell(controller.activeCell);
-    setEditingCell(controller.editingCell);
-    setDraftValue(controller.draftValue);
-  }, [controller]);
-  const commitEditing = useCallback4((val) => {
-    controller.commitEditing(val);
-    setEditingCell(null);
-    setDraftValue("");
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const cancelEditing = useCallback4(() => {
-    controller.cancelEditing();
-    setEditingCell(null);
-    setDraftValue("");
-  }, [controller]);
-  const moveCursor = useCallback4((dir, extend = false) => {
-    controller.moveCursor(dir, extend);
-    setActiveCell(controller.activeCell);
-    setSelectedRange(controller.selectedRange);
-  }, [controller]);
-  const insertColumn = useCallback4((index, config) => {
-    controller.insertColumn(index, config);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const deleteColumn = useCallback4((colId) => {
-    controller.deleteColumn(colId);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const insertRow = useCallback4((index, config) => {
-    controller.insertRow(index, config);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const deleteRow = useCallback4((rowId) => {
-    controller.deleteRow(rowId);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const setColumnWidth = useCallback4((colId, width) => {
-    controller.setColumnWidth(colId, width);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const autoFitColumnWidth = useCallback4((colId, customWidth) => {
-    controller.autoFitColumnWidth(colId, customWidth);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const registerDataSource = useCallback4((ds) => {
-    controller.registerDataSource(ds);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const setPrimaryDataSource = useCallback4((id) => {
-    controller.setPrimaryDataSource(id);
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const recalculateAll = useCallback4(() => {
-    controller.recalculateAll();
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const undo = useCallback4(() => {
-    controller.undo();
-    setDoc({ ...controller.document });
-  }, [controller]);
-  const redo = useCallback4(() => {
-    controller.redo();
-    setDoc({ ...controller.document });
-  }, [controller]);
-  return {
-    document: doc,
-    activeCell,
-    selectedRange,
-    editingCell,
-    draftValue,
-    setDraftValue,
-    controller,
-    getCell: (rowId, colId) => controller.getCell(rowId, colId),
-    setCellValue,
-    selectCell,
-    selectRange,
-    startEditing,
-    commitEditing,
-    cancelEditing,
-    moveCursor,
-    insertColumn,
-    deleteColumn,
-    insertRow,
-    deleteRow,
-    setColumnWidth,
-    autoFitColumnWidth,
-    loadDocument: (document2) => {
-      controller.loadDocument(document2);
-      setDoc({ ...controller.document });
-      setActiveCell(null);
-      setSelectedRange(null);
-      setEditingCell(null);
-      setDraftValue("");
-    },
-    syncWithDataSource: () => {
-      controller.syncWithDataSource();
-      controller.recalculateAll();
-      setDoc({ ...controller.document });
-    },
-    registerDataSource,
-    setPrimaryDataSource,
-    recalculateAll,
-    exportToTsv: (range) => controller.exportToTsv(range),
-    importFromTsv: (data) => {
-      controller.importFromTsv(data);
-      setDoc({ ...controller.document });
-    },
-    undo,
-    redo
-  };
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
+  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+  return useMemo7(() => ({ ...snapshot, store }), [snapshot, store]);
+}
+function useTrackChanges(editor) {
+  const store = getTrackChangesStore(editor ?? null);
+  const subscribe = useCallback4(
+    (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
+  const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
+  return useMemo7(() => {
+    const run = (fn) => () => {
+      if (editor && !editor.isDestroyed) fn(editor);
+    };
+    return {
+      ...snapshot,
+      currentChange: snapshot.changes.find((c) => c.id === snapshot.currentChangeId) ?? null,
+      setEnabled: (enabled) => run((e) => e.commands.setTrackChanges(enabled))(),
+      toggle: run((e) => e.commands.toggleTrackChanges()),
+      accept: (id) => run((e) => e.commands.acceptChange(id))(),
+      reject: (id) => run((e) => e.commands.rejectChange(id))(),
+      acceptAll: run((e) => e.commands.acceptAllChanges()),
+      rejectAll: run((e) => e.commands.rejectAllChanges()),
+      next: run((e) => e.chain().focus().selectNextChange().run()),
+      previous: run((e) => e.chain().focus().selectPreviousChange().run())
+    };
+  }, [snapshot, editor]);
 }
 
-// src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef7, useState as useState5, useMemo as useMemo3, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+// src/review/CommentsPanel.tsx
+import { useState as useState5 } from "react";
 import {
-  indexToColName
+  formatReviewTime,
+  getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var SpreadsheetEditor = ({
-  state: externalState,
-  readOnly = false,
-  customCellRenderer,
-  onAddColumnClick,
-  onColumnHeaderClick,
-  onColumnResize
+import { jsx as jsx6, jsxs as jsxs5 } 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";
+var CommentsPanel = ({
+  editor,
+  store: storeProp,
+  author: authorProp,
+  showResolved: showResolvedInitial = false,
+  className = "flex flex-col gap-2 text-sm text-foreground",
+  formatTime = (t) => formatReviewTime(t),
+  emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
-  const defaultState = useSpreadsheetEditor();
-  const state = externalState || defaultState;
-  const gridRef = useRef7(null);
-  const [resizingColId, setResizingColId] = useState5(null);
-  const [hoveredColId, setHoveredColId] = useState5(null);
-  const [resizeStartX, setResizeStartX] = useState5(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState5(0);
-  const activeRawValue = useMemo3(() => {
-    if (!state.activeCell) return "";
-    const row = state.document.rows[state.activeCell.row];
-    const col = state.document.columns[state.activeCell.col];
-    if (!row || !col) return "";
-    return state.getCell(row.id, col.id).raw;
-  }, [state.activeCell, state.document]);
-  const coordLabel = useMemo3(() => {
-    if (!state.activeCell) return "--";
-    const colName = indexToColName(state.activeCell.col);
-    return `${colName}${state.activeCell.row + 1}`;
-  }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = useState5(null);
-  const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
-  const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  useEffect5(() => {
-    setFormulaDraft(null);
-  }, [state.activeCell?.row, state.activeCell?.col]);
-  const commitFormulaBar = () => {
-    if (state.editingCell) {
-      state.commitEditing();
-      return;
-    }
-    if (formulaDraft === null || !state.activeCell) return;
-    const row = state.document.rows[state.activeCell.row];
-    const col = state.document.columns[state.activeCell.col];
-    if (row && col && !formulaBarReadOnly && formulaDraft !== activeRawValue) {
-      state.setCellValue(row.id, col.id, formulaDraft);
-    }
-    setFormulaDraft(null);
-  };
-  const handleCellClick = useCallback5((rIdx, cIdx, e) => {
-    if (state.editingCell && (state.editingCell.row !== rIdx || state.editingCell.col !== cIdx)) {
-      state.commitEditing();
-    }
-    state.selectCell(rIdx, cIdx, e.shiftKey);
-  }, [state]);
-  const handleCellDblClick = useCallback5((rIdx, cIdx) => {
-    if (readOnly) return;
-    const col = state.document.columns[cIdx];
-    if (col?.readOnly) return;
-    state.startEditing(rIdx, cIdx);
-  }, [readOnly, state]);
-  const handleKeyDown = useCallback5((e) => {
-    if (state.editingCell) {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        state.commitEditing();
-        state.moveCursor("down");
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        state.cancelEditing();
-      } else if (e.key === "Tab") {
-        e.preventDefault();
-        state.commitEditing();
-        state.moveCursor(e.shiftKey ? "left" : "right");
-      }
-      return;
-    }
-    if (!state.activeCell) return;
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      state.moveCursor("up", e.shiftKey);
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      state.moveCursor("down", e.shiftKey);
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      state.moveCursor("left", e.shiftKey);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      state.moveCursor("right", e.shiftKey);
-    } else if (e.key === "Tab") {
-      e.preventDefault();
-      state.moveCursor(e.shiftKey ? "left" : "right");
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      const col = state.document.columns[state.activeCell.col];
-      if (!readOnly && !col?.readOnly) {
-        state.startEditing();
-      }
-    } else if (e.key === "Backspace" || e.key === "Delete") {
-      if (readOnly) return;
-      const row = state.document.rows[state.activeCell.row];
-      const col = state.document.columns[state.activeCell.col];
-      if (row && col && !col.readOnly) {
-        e.preventDefault();
-        state.setCellValue(row.id, col.id, "");
-      }
-    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
-      e.preventDefault();
-      if (e.shiftKey) {
-        state.redo();
-      } else {
-        state.undo();
-      }
-    } else if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "y") {
-      e.preventDefault();
-      state.redo();
-    } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "c") {
-      e.preventDefault();
-      const tsv = state.exportToTsv(state.selectedRange);
-      navigator.clipboard?.writeText(tsv);
-    } else if (!readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-      const col = state.document.columns[state.activeCell.col];
-      if (!col?.readOnly) {
-        state.startEditing(state.activeCell.row, state.activeCell.col, e.key);
-      }
-    }
-  }, [readOnly, state]);
-  const stateRef = useRef7(state);
-  stateRef.current = state;
-  const onColumnResizeRef = useRef7(onColumnResize);
-  onColumnResizeRef.current = onColumnResize;
-  useEffect5(() => {
-    if (!resizingColId) return;
-    if (typeof document !== "undefined") {
-      document.body.style.cursor = "col-resize";
-      document.body.style.userSelect = "none";
-    }
-    let rafId = null;
-    let pendingWidth = resizeStartWidth;
-    let hasDragged = false;
-    const handleMouseMove = (e) => {
-      const delta = e.clientX - resizeStartX;
-      if (Math.abs(delta) > 2) {
-        hasDragged = true;
-      }
-      pendingWidth = Math.max(30, resizeStartWidth + delta);
-      if (rafId === null) {
-        rafId = requestAnimationFrame(() => {
-          rafId = null;
-          stateRef.current.setColumnWidth(resizingColId, pendingWidth);
-        });
-      }
-    };
-    const handleMouseUp = () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      if (hasDragged) {
-        stateRef.current.setColumnWidth(resizingColId, pendingWidth);
-        onColumnResizeRef.current?.(resizingColId, pendingWidth);
-      }
-      setResizingColId(null);
-      if (typeof document !== "undefined") {
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      }
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-      }
-      if (typeof document !== "undefined") {
-        document.body.style.cursor = "";
-        document.body.style.userSelect = "";
-      }
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [resizingColId, resizeStartX, resizeStartWidth]);
-  const measureElementContentWidth = useCallback5((el, container) => {
-    if (typeof document === "undefined") return 0;
-    let maxW = el.scrollWidth || 0;
-    const firstChild = el.firstElementChild;
-    if (firstChild && firstChild.scrollWidth > maxW) {
-      maxW = firstChild.scrollWidth;
-    }
-    const truncated = el.querySelectorAll(".truncate, [title], span, div");
-    truncated.forEach((node) => {
-      if (node.scrollWidth > maxW) {
-        maxW = node.scrollWidth;
-      }
-    });
-    try {
-      const clone = firstChild ? firstChild.cloneNode(true) : el.cloneNode(true);
-      clone.style.cssText = `
-        position: absolute !important;
-        visibility: hidden !important;
-        width: max-content !important;
-        min-width: max-content !important;
-        max-width: none !important;
-        overflow: visible !important;
-        white-space: nowrap !important;
-        pointer-events: none !important;
-        top: -9999px !important;
-        left: -9999px !important;
-      `;
-      const allNodes = clone.querySelectorAll("*");
-      allNodes.forEach((node) => {
-        node.style.maxWidth = "none";
-        node.style.overflow = "visible";
-        node.style.textOverflow = "clip";
-        node.style.whiteSpace = "nowrap";
-        if (node.classList.contains("truncate") || node.classList.contains("min-w-0") || node.classList.contains("w-full") || node.classList.contains("max-w-0") || node.classList.contains("flex-1")) {
-          node.style.width = "max-content";
-          node.style.minWidth = "max-content";
-        }
-      });
-      container.appendChild(clone);
-      const rect = clone.getBoundingClientRect();
-      container.removeChild(clone);
-      if (rect.width > maxW) {
-        maxW = rect.width;
-      }
-    } catch {
-    }
-    return maxW;
-  }, []);
-  const autoFitColumn = useCallback5((colId, colIndex) => {
-    const col = state.document.columns.find((c) => c.id === colId);
-    if (!col) return;
-    let calculatedWidth = 0;
-    if (gridRef.current && typeof document !== "undefined") {
-      const table = gridRef.current.querySelector("table");
-      if (table) {
-        const thElements = table.querySelectorAll("thead th");
-        const th = thElements[colIndex + 1];
-        if (th) {
-          const headerInner = th.firstElementChild || th;
-          const headerW = measureElementContentWidth(headerInner, gridRef.current);
-          calculatedWidth = Math.max(calculatedWidth, headerW + 28);
-        }
-        const rows = table.querySelectorAll("tbody tr");
-        const sampleLimit = Math.min(rows.length, 150);
-        for (let r = 0; r < sampleLimit; r++) {
-          const tr = rows[r];
-          const td = tr.children[colIndex + 1];
-          if (td) {
-            const cellW = measureElementContentWidth(td, gridRef.current);
-            calculatedWidth = Math.max(calculatedWidth, cellW + 20);
-          }
+  const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
+  const [showResolved, setShowResolved] = useState5(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__ */ jsxs5("aside", { className, "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "text-xs font-medium text-muted-foreground", children: [
+        threads.length - resolvedCount,
+        " open",
+        resolvedCount > 0 ? ` \xB7 ${resolvedCount} resolved` : ""
+      ] }),
+      resolvedCount > 0 && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: buttonClass,
+          "aria-pressed": showResolved,
+          onClick: () => setShowResolved((v) => !v),
+          children: showResolved ? "Hide resolved" : "Show resolved"
         }
-      }
-    }
-    if (calculatedWidth > 0) {
-      const finalWidth = Math.min(600, Math.max(50, Math.ceil(calculatedWidth)));
-      state.setColumnWidth(colId, finalWidth);
-    } else {
-      state.autoFitColumnWidth?.(colId);
-    }
-    const updatedCol = state.document.columns.find((c) => c.id === colId);
-    if (updatedCol && onColumnResize) {
-      onColumnResize(updatedCol.id, updatedCol.width || 130);
-    }
-  }, [state, measureElementContentWidth, onColumnResize]);
-  const handleResizeDblClick = useCallback5((colId, colIndex, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    autoFitColumn(colId, colIndex);
-  }, [autoFitColumn]);
-  const handleHeaderDblClick = useCallback5((colId, colIndex, e) => {
-    const target = e.currentTarget;
-    if (target) {
-      const rect = target.getBoundingClientRect();
-      if (rect.right - e.clientX <= 12) {
-        e.preventDefault();
-        e.stopPropagation();
-        autoFitColumn(colId, colIndex);
-      }
+      )
+    ] }),
+    visible.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx6(
+      CommentThreadCard,
+      {
+        thread,
+        active: thread.id === activeThreadId,
+        editor,
+        store,
+        author,
+        formatTime
+      },
+      thread.id
+    )) })
+  ] });
+};
+var CommentThreadCard = ({
+  thread,
+  active,
+  editor,
+  store,
+  author,
+  formatTime
+}) => {
+  const [draft, setDraft] = useState5("");
+  const isDraft = thread.body === "";
+  const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
+  const live = editor && !editor.isDestroyed ? editor : null;
+  const focus = () => {
+    if (!active) {
+      if (live && !thread.orphaned) live.commands.focusComment(thread.id);
+      else store?.setActiveThread(thread.id);
     }
-  }, [autoFitColumn]);
-  const isCellSelected = (rIdx, cIdx) => {
-    if (!state.selectedRange) return false;
-    const minR = Math.min(state.selectedRange.startRow, state.selectedRange.endRow);
-    const maxR = Math.max(state.selectedRange.startRow, state.selectedRange.endRow);
-    const minC = Math.min(state.selectedRange.startCol, state.selectedRange.endCol);
-    const maxC = Math.max(state.selectedRange.startCol, state.selectedRange.endCol);
-    return rIdx >= minR && rIdx <= maxR && cIdx >= minC && cIdx <= maxC;
   };
-  const isActiveCell = (rIdx, cIdx) => {
-    return state.activeCell?.row === rIdx && state.activeCell?.col === cIdx;
+  const remove = () => {
+    if (live) live.commands.deleteComment(thread.id);
+    else store?.deleteThread(thread.id);
+  };
+  const setResolved = (resolved) => {
+    if (live) live.commands.resolveComment(thread.id, resolved);
+    else store?.resolveThread(thread.id, resolved, author);
+  };
+  const submit = () => {
+    const body = draft.trim();
+    if (!body || !store) return;
+    if (isDraft) store.editComment(thread.id, body);
+    else store.addReply(thread.id, { body, author });
+    setDraft("");
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const stop = (e) => e.stopPropagation();
+  return /* @__PURE__ */ jsxs5(
+    "li",
     {
-      ref: gridRef,
-      className: "flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs",
+      className: `flex flex-col gap-2 rounded-md border bg-background p-3 cursor-pointer ${active ? "border-primary ring-1 ring-primary" : "border-border"} ${thread.resolved ? "opacity-70" : ""}`,
+      "data-thread-id": thread.id,
+      "data-active": active || void 0,
+      "aria-current": active || void 0,
       tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      role: "grid",
-      "aria-label": "Spreadsheet",
+      onClick: focus,
+      onKeyDown: (e) => {
+        if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          focus();
+        }
+      },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono", children: [
-          /* @__PURE__ */ jsx3("div", { className: "flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground", children: coordLabel }),
-          /* @__PURE__ */ jsx3("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ jsx3("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
-          /* @__PURE__ */ jsx3(
-            "input",
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx6("span", { className: "font-medium", children: thread.author.name }),
+          /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        ] }),
+        quote && /* @__PURE__ */ jsx6("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
+        thread.orphaned && /* @__PURE__ */ jsx6("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
+        thread.resolved && /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
+        !isDraft && /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
+        thread.replies.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs5("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
+          /* @__PURE__ */ jsxs5("span", { className: "text-xs", children: [
+            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: reply.author.name }),
+            " ",
+            /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+          ] }),
+          /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+        ] }, reply.id)) }),
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx6(
+            "textarea",
             {
-              type: "text",
-              className: "flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded",
-              placeholder: "Enter a value or formula (e.g. =SUM(A1:A5))",
-              "aria-label": "Formula bar",
-              readOnly: formulaBarReadOnly,
-              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
-              onFocus: () => {
-                if (!state.editingCell) setFormulaDraft(activeRawValue);
-              },
-              onChange: (e) => {
-                if (state.editingCell) {
-                  state.setDraftValue(e.target.value);
-                } else if (state.activeCell) {
-                  setFormulaDraft(e.target.value);
-                }
-              },
-              onBlur: () => commitFormulaBar(),
+              className: textareaClass,
+              rows: 2,
+              value: draft,
+              "aria-label": isDraft ? "Comment" : "Reply",
+              placeholder: isDraft ? "Add a comment\u2026" : "Reply\u2026",
+              autoFocus: isDraft,
+              onChange: (e) => setDraft(e.target.value),
               onKeyDown: (e) => {
-                e.stopPropagation();
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  commitFormulaBar();
-                } else if (e.key === "Escape") {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                   e.preventDefault();
-                  setFormulaDraft(null);
-                  if (state.editingCell) state.cancelEditing();
+                  submit();
                 }
               }
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ jsx3("th", { className: "w-12 min-w-[3rem] sticky left-0 z-30 bg-muted/90 border-r border-border text-center text-[10px] text-muted-foreground font-medium", children: "#" }),
-            state.document.columns.map((col, cIdx) => /* @__PURE__ */ jsxs(
-              "th",
-              {
-                className: `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`,
-                style: { width: col.width || 130, minWidth: col.width || 130, maxWidth: col.width || 130, overflow: "hidden" },
-                onClick: () => onColumnHeaderClick?.(col),
-                onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
-                    /* @__PURE__ */ jsx3("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
-                    /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
-                      "(",
-                      col.key,
-                      ")"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      className: "col-resize-handle",
-                      style: { position: "absolute", top: 0, bottom: 0, width: 12, right: -6, cursor: "col-resize", zIndex: 20, display: "flex", justifyContent: "center", touchAction: "none" },
-                      onMouseEnter: () => setHoveredColId(col.id),
-                      onMouseLeave: () => setHoveredColId((cur) => cur === col.id ? null : cur),
-                      onMouseDown: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setResizingColId(col.id);
-                        setResizeStartX(e.clientX);
-                        setResizeStartWidth(col.width || 130);
-                      },
-                      onDoubleClick: (e) => handleResizeDblClick(col.id, cIdx, e),
-                      role: "separator",
-                      "aria-orientation": "vertical",
-                      children: /* @__PURE__ */ jsx3(
-                        "div",
-                        {
-                          className: "col-resize-handle-line",
-                          style: {
-                            width: 2,
-                            height: "100%",
-                            pointerEvents: "none",
-                            transition: "background-color 150ms ease",
-                            backgroundColor: resizingColId === col.id ? "var(--primary, #6366f1)" : hoveredColId === col.id ? "color-mix(in srgb, var(--primary, #6366f1) 75%, transparent)" : "transparent"
-                          }
-                        }
-                      )
-                    }
-                  )
-                ]
-              },
-              col.id
-            )),
-            onAddColumnClick && /* @__PURE__ */ jsx3(
-              "th",
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1", children: [
+            isDraft && /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
+            /* @__PURE__ */ jsx6(
+              "button",
               {
-                className: "w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors",
-                onClick: onAddColumnClick,
-                title: "Add Column",
-                children: /* @__PURE__ */ jsx3("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+                type: "button",
+                className: primaryButtonClass,
+                disabled: !draft.trim(),
+                onClick: submit,
+                children: isDraft ? "Comment" : "Reply"
               }
             )
-          ] }) }),
-          /* @__PURE__ */ jsx3("tbody", { children: state.document.rows.map((row, rIdx) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border hover:bg-muted/10 transition-colors", style: { height: row.height || 32 }, children: [
-            /* @__PURE__ */ jsx3("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/50 border-r border-border text-center text-[10px] text-muted-foreground font-mono select-none", children: rIdx + 1 }),
-            state.document.columns.map((col, cIdx) => {
-              const cell = state.getCell(row.id, col.id);
-              const selected = isCellSelected(rIdx, cIdx);
-              const active = isActiveCell(rIdx, cIdx);
-              const isEditing = state.editingCell?.row === rIdx && state.editingCell?.col === cIdx;
-              return /* @__PURE__ */ jsx3(
-                "td",
-                {
-                  className: `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${selected ? "bg-primary/10" : ""} ${active ? "ring-2 ring-primary ring-inset z-10" : ""}`,
-                  style: { maxWidth: 0, overflow: "hidden" },
-                  onClick: (e) => handleCellClick(rIdx, cIdx, e),
-                  onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
-                  children: isEditing ? /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      type: "text",
-                      className: "absolute inset-0 w-full h-full px-2 py-1 bg-background text-foreground outline-none font-sans text-xs border-2 border-primary z-20",
-                      value: state.draftValue,
-                      onChange: (e) => state.setDraftValue(e.target.value),
-                      onBlur: () => state.commitEditing(),
-                      autoFocus: true
-                    }
-                  ) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ jsx3("span", { className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`, children: cell.error || (cell.value ?? "") })
-                },
-                col.id
-              );
-            }),
-            onAddColumnClick && /* @__PURE__ */ jsx3("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
-          ] }, row.id)) })
-        ] }) }),
-        /* @__PURE__ */ jsx3("style", { children: `
-        .col-resize-handle:hover .col-resize-handle-line {
-          background-color: var(--primary, #6366f1);
-          opacity: 0.75;
-        }
-        .col-resize-handle.active .col-resize-handle-line {
-          background-color: var(--primary, #6366f1);
-          opacity: 1;
-        }
-        table.table-fixed th {
-          overflow: hidden;
-        }
-        table.table-fixed td {
-          max-width: 0;
-          overflow: hidden;
-        }
-      ` })
+          ] })
+        ] }),
+        !isDraft && /* @__PURE__ */ jsxs5("div", { className: "flex justify-end gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx6("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: `${buttonClass} hover:text-destructive`,
+              onClick: remove,
+              children: "Delete"
+            }
+          )
+        ] })
       ]
     }
   );
 };
 
-// src/slots.tsx
-import { createContext, useContext, useMemo as useMemo4 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ jsx4(
-    "button",
-    {
-      type: "button",
-      className: `pixerate-btn ${props.className || ""}`,
-      onClick: props.onClick,
-      disabled: props.disabled,
-      children: props.children
-    }
-  ),
-  Tooltip: (props) => /* @__PURE__ */ jsx4("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ jsxs2("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-      props.icon,
-      /* @__PURE__ */ jsx4("span", { className: "font-semibold", children: props.title })
-    ] }),
-    props.onClose && /* @__PURE__ */ jsx4("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
-  ] })
+// src/review/ReviewToolbar.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var buttonClass2 = "rounded px-2 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-40 disabled:hover:bg-transparent";
+var ReviewToolbar = ({
+  editor,
+  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm"
+}) => {
+  const review = useTrackChanges(editor);
+  const count = review.changes.length;
+  const current = review.currentChange;
+  const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
+  return /* @__PURE__ */ jsxs6("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: `${buttonClass2} ${review.enabled ? "bg-primary/10 text-primary" : ""}`,
+        "aria-pressed": review.enabled,
+        disabled: !editor,
+        onClick: review.toggle,
+        children: review.enabled ? "Tracking on" : "Track changes"
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        "aria-label": "Previous change",
+        disabled: count === 0,
+        onClick: review.previous,
+        children: "\u2039"
+      }
+    ),
+    /* @__PURE__ */ jsx7("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__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        "aria-label": "Next change",
+        disabled: count === 0,
+        onClick: review.next,
+        children: "\u203A"
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        disabled: !current,
+        onClick: () => current && review.accept(current.id),
+        children: "Accept"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: buttonClass2,
+        disabled: !current,
+        onClick: () => current && review.reject(current.id),
+        children: "Reject"
+      }
+    ),
+    /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
+    /* @__PURE__ */ jsx7("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+  ] });
 };
-var EditorSlotsContext = createContext(defaultSlots);
-function EditorSlotsProvider({ slots, children }) {
-  const mergedSlots = useMemo4(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx4(EditorSlotsContext.Provider, { value: mergedSlots, children });
-}
-function useEditorSlots() {
-  return useContext(EditorSlotsContext);
-}
+
+// src/review/CommentButton.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CommentButton = ({
+  editor,
+  className = "rounded px-2 py-1 text-xs text-popover-foreground hover:bg-muted",
+  children = "Comment"
+}) => /* @__PURE__ */ jsx8(
+  "button",
+  {
+    type: "button",
+    className,
+    disabled: !editor,
+    onClick: () => editor?.chain().focus().addComment().run(),
+    children
+  }
+);
 export {
   BubbleMenu,
+  CommentButton,
+  CommentsPanel,
   DirtyTracker,
   EditorContent,
   EditorSlotsProvider,
+  FormulaHints,
   HistoryManager2 as HistoryManager,
   ImageEditor,
+  OutlinePanel,
+  ReviewToolbar,
+  SpreadsheetContextMenu,
   SpreadsheetEditor,
+  SpreadsheetGroupRow,
   TemplateRenderer,
+  VariableForm,
   createDirtyTracker,
   createHistoryManager2 as createHistoryManager,
   defaultIsEqual,
+  useAgentToolProvider,
+  useComments,
   useDismissGuard,
   useEditor2 as useEditor,
   useEditorSlots,
+  useFileImport,
+  useFillHandle,
   useHistory,
   useHistoryShortcuts,
   useImageEditor,
   useNavigationGuard,
+  useOutline,
   usePromptEditor,
-  useSpreadsheetEditor
+  useSpreadsheetClipboard,
+  useSpreadsheetEditor,
+  useTrackChanges
 };
 //# sourceMappingURL=index.js.map