@pixerate/editor-react 0.12.0 → 0.14.0

package/dist/index.js

@@ -1,3 +1,12 @@
+import {
+  FormulaHints,
+  SpreadsheetContextMenu,
+  SpreadsheetEditor,
+  SpreadsheetGroupRow,
+  useFillHandle,
+  useSpreadsheetClipboard,
+  useSpreadsheetEditor
+} from "./chunk-25S5EHH4.js";
 import {
   ImageEditor,
   useImageEditor
@@ -853,1104 +862,11 @@ import {
   createHistoryManager as createHistoryManager2
 } from "@pixerate/editor";
 
-// src/spreadsheet/useSpreadsheetEditor.ts
-import { useState as useState5, useRef as useRef7, useCallback as useCallback4, useMemo as useMemo6 } from "react";
-import {
-  SpreadsheetController,
-  bindSpreadsheetTableActions
-} from "@pixerate/editor";
-function useSpreadsheetEditor(options = {}) {
-  const optionsRef = useRef7(options);
-  optionsRef.current = options;
-  const settersRef = useRef7({});
-  const [controller] = useState5(
-    () => 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);
-      }
-    })
-  );
-  const [doc, setDoc] = useState5(() => ({ ...controller.document }));
-  const [activeCell, setActiveCell] = useState5(controller.activeCell);
-  const [selectedRange, setSelectedRange] = useState5(controller.selectedRange);
-  const [editingCell, setEditingCell] = useState5(null);
-  const [draftValue, setDraftValue] = useState5("");
-  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]);
-  const tableActions = useMemo6(() => bindSpreadsheetTableActions(controller), [controller]);
-  const viewModel = useMemo6(() => controller.getViewModel(), [controller, doc]);
-  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 });
-    },
-    ...tableActions,
-    viewModel,
-    undo,
-    redo
-  };
-}
-
-// src/spreadsheet/SpreadsheetEditor.tsx
-import { useRef as useRef11, useState as useState8, useMemo as useMemo8, useEffect as useEffect10, useCallback as useCallback6 } from "react";
-import {
-  indexToColName,
-  getSpreadsheetMenuItems,
-  normalizeRange as normalizeRange2,
-  rangeContains
-} from "@pixerate/editor";
-
-// src/spreadsheet/SpreadsheetContextMenu.tsx
-import React4, { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
-  const menuRef = useRef8(null);
-  const onCloseRef = useRef8(onClose);
-  onCloseRef.current = onClose;
-  useEffect7(() => {
-    const handlePointer = (e) => {
-      if (!menuRef.current?.contains(e.target)) onCloseRef.current();
-    };
-    const handleKey = (e) => {
-      if (e.key === "Escape") onCloseRef.current();
-    };
-    window.addEventListener("mousedown", handlePointer);
-    window.addEventListener("keydown", handleKey);
-    return () => {
-      window.removeEventListener("mousedown", handlePointer);
-      window.removeEventListener("keydown", handleKey);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx5(
-    "div",
-    {
-      ref: menuRef,
-      role: "menu",
-      "aria-label": "Table actions",
-      className: "fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg",
-      style: { left: x, top: y, background: "var(--popover, var(--background, #fff))" },
-      onContextMenu: (e) => e.preventDefault(),
-      onKeyDown: (e) => e.stopPropagation(),
-      children: items.map((item) => /* @__PURE__ */ jsxs4(React4.Fragment, { children: [
-        item.separatorBefore && /* @__PURE__ */ jsx5("div", { role: "separator", className: "my-1 h-px bg-border" }),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            role: "menuitem",
-            "data-action": item.id,
-            disabled: item.disabled,
-            className: "block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
-            onClick: () => {
-              onClose();
-              item.run();
-            },
-            children: item.label
-          }
-        )
-      ] }, item.id))
-    }
-  );
-};
-
-// src/spreadsheet/SpreadsheetGroupRow.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var formatSummary = (value) => value === null ? "\u2013" : String(value);
-var SpreadsheetGroupRow = ({
-  group,
-  columns,
-  groupColId,
-  onToggle,
-  trailingCell
-}) => {
-  const labelColId = columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id;
-  return /* @__PURE__ */ jsxs5("tr", { className: "border-b border-border bg-muted/40 font-semibold", "data-group-key": group.key, style: { height: 28 }, children: [
-    /* @__PURE__ */ jsx6("td", { className: "w-12 min-w-[3rem] sticky left-0 z-10 bg-muted/60 border-r border-border text-center", children: /* @__PURE__ */ jsx6(
-      "button",
-      {
-        type: "button",
-        "aria-label": `${group.collapsed ? "Expand" : "Collapse"} group ${group.label}`,
-        "aria-expanded": !group.collapsed,
-        className: "h-5 w-5 rounded text-[10px] text-muted-foreground hover:bg-muted",
-        onClick: (e) => {
-          e.stopPropagation();
-          onToggle(group.key);
-        },
-        children: group.collapsed ? "\u25B8" : "\u25BE"
-      }
-    ) }),
-    columns.map(({ column }) => {
-      const summary = group.summaries[column.id];
-      return /* @__PURE__ */ jsx6("td", { className: "border-r border-border px-2 py-1 truncate max-w-0 text-foreground", style: { maxWidth: 0, overflow: "hidden" }, children: column.id === labelColId ? /* @__PURE__ */ jsxs5("span", { className: "truncate", children: [
-        group.label,
-        " ",
-        /* @__PURE__ */ jsxs5("span", { className: "font-normal text-muted-foreground", children: [
-          "(",
-          group.rowIndices.length,
-          ")"
-        ] })
-      ] }) : summary !== void 0 ? /* @__PURE__ */ jsx6("span", { className: "truncate", "data-summary": column.id, children: formatSummary(summary) }) : null }, column.id);
-    }),
-    trailingCell && /* @__PURE__ */ jsx6("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
-  ] });
-};
-
-// src/spreadsheet/useSpreadsheetTableInteractions.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef9, useState as useState6 } from "react";
-import {
-  computeFillTarget,
-  normalizeRange
-} from "@pixerate/editor";
-function gridHasFocus(grid) {
-  if (!grid || typeof document === "undefined") return false;
-  const active = document.activeElement;
-  if (!active || !grid.contains(active)) return false;
-  return !(active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement);
-}
-function useSpreadsheetClipboard(gridRef, state, readOnly) {
-  const stateRef = useRef9(state);
-  stateRef.current = state;
-  const readOnlyRef = useRef9(readOnly);
-  readOnlyRef.current = readOnly;
-  const copiedRef = useRef9(false);
-  useEffect8(() => {
-    if (typeof document === "undefined") return;
-    const handleCopy = (e) => {
-      const s = stateRef.current;
-      if (!gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData || !s.selectedRange) return;
-      for (const [type, data] of Object.entries(s.copyToClipboardData(s.selectedRange))) {
-        e.clipboardData.setData(type, data);
-      }
-      copiedRef.current = true;
-      e.preventDefault();
-    };
-    const handlePaste = (e) => {
-      const s = stateRef.current;
-      if (readOnlyRef.current || !gridHasFocus(gridRef.current) || s.editingCell || !e.clipboardData) return;
-      if (s.pasteClipboardData(e.clipboardData)) e.preventDefault();
-    };
-    document.addEventListener("copy", handleCopy);
-    document.addEventListener("paste", handlePaste);
-    return () => {
-      document.removeEventListener("copy", handleCopy);
-      document.removeEventListener("paste", handlePaste);
-    };
-  }, [gridRef]);
-  const copyShortcutFallback = useCallback5(() => {
-    copiedRef.current = false;
-    setTimeout(() => {
-      if (copiedRef.current) return;
-      const s = stateRef.current;
-      navigator.clipboard?.writeText(s.exportToTsv(s.selectedRange));
-    }, 0);
-  }, []);
-  return { copyShortcutFallback };
-}
-function useFillHandle(state) {
-  const [drag, setDrag] = useState6(null);
-  const dragRef = useRef9(drag);
-  dragRef.current = drag;
-  const stateRef = useRef9(state);
-  stateRef.current = state;
-  const dragging = drag !== null;
-  useEffect8(() => {
-    if (!dragging) return;
-    const handleMouseUp = () => {
-      const current = dragRef.current;
-      setDrag(null);
-      if (current?.target) stateRef.current.autofill(current.source, current.target);
-    };
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => window.removeEventListener("mouseup", handleMouseUp);
-  }, [dragging]);
-  const startFill = useCallback5((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const range = stateRef.current.selectedRange;
-    if (range) setDrag({ source: normalizeRange(range), target: null });
-  }, []);
-  const extendFill = useCallback5((row, col) => {
-    const current = dragRef.current;
-    if (!current) return;
-    setDrag({ source: current.source, target: computeFillTarget(current.source, { row, col }) });
-  }, []);
-  return { fillTarget: drag?.target ?? null, isFilling: dragging, startFill, extendFill };
-}
-
-// src/spreadsheet/FormulaHints.tsx
-import { useEffect as useEffect9, useLayoutEffect, useMemo as useMemo7, useRef as useRef10, useState as useState7 } from "react";
-import { applyFormulaSuggestion, getFormulaHints } from "@pixerate/editor";
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var FormulaHints = ({ inputRef, value, onAccept, limit = 8 }) => {
-  const [caret, setCaret] = useState7(null);
-  const [focused, setFocused] = useState7(false);
-  const [selected, setSelected] = useState7(0);
-  const [dismissed, setDismissed] = useState7(false);
-  const [position, setPosition] = useState7(null);
-  const pendingCaret = useRef10(null);
-  const hints = useMemo7(
-    () => getFormulaHints(value, caret ?? value.length, { limit }),
-    [value, caret, limit]
-  );
-  const suggestions = dismissed ? [] : hints.suggestions;
-  const selectedIndex = Math.max(0, Math.min(selected, suggestions.length - 1));
-  const visible = focused && value.trimStart().startsWith("=") && (suggestions.length > 0 || !!hints.activeCall);
-  const latest = useRef10({ suggestions, selected: selectedIndex, value, caret, onAccept });
-  latest.current = { suggestions, selected: selectedIndex, value, caret, onAccept };
-  const accept = (index) => {
-    const { suggestions: list, value: current, caret: at, onAccept: commit } = latest.current;
-    const suggestion = list[index];
-    if (!suggestion) return;
-    const next = applyFormulaSuggestion(current, at ?? current.length, suggestion.name);
-    pendingCaret.current = next.caret;
-    commit(next.value);
-  };
-  useEffect9(() => {
-    const input = inputRef.current;
-    if (!input) return;
-    const syncCaret = () => setCaret(input.selectionStart ?? input.value.length);
-    const onInput = () => {
-      setDismissed(false);
-      setSelected(0);
-      syncCaret();
-    };
-    const onFocus = () => {
-      setFocused(true);
-      syncCaret();
-    };
-    const onBlur = () => setFocused(false);
-    const onKeyDown = (e) => {
-      const { suggestions: list } = latest.current;
-      if (list.length === 0) return;
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        e.preventDefault();
-        e.stopPropagation();
-        const step = e.key === "ArrowDown" ? 1 : -1;
-        setSelected((i) => (i + step + list.length) % list.length);
-      } else if (e.key === "Tab" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        accept(latest.current.selected);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        setDismissed(true);
-      }
-    };
-    input.addEventListener("input", onInput);
-    input.addEventListener("keyup", syncCaret);
-    input.addEventListener("click", syncCaret);
-    input.addEventListener("select", syncCaret);
-    input.addEventListener("focus", onFocus);
-    input.addEventListener("blur", onBlur);
-    input.addEventListener("keydown", onKeyDown);
-    if (typeof document !== "undefined" && document.activeElement === input) onFocus();
-    return () => {
-      input.removeEventListener("input", onInput);
-      input.removeEventListener("keyup", syncCaret);
-      input.removeEventListener("click", syncCaret);
-      input.removeEventListener("select", syncCaret);
-      input.removeEventListener("focus", onFocus);
-      input.removeEventListener("blur", onBlur);
-      input.removeEventListener("keydown", onKeyDown);
-    };
-  }, [inputRef]);
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    const at = pendingCaret.current;
-    if (!input || at === null || input.value !== value) return;
-    pendingCaret.current = null;
-    input.setSelectionRange(at, at);
-    setCaret(at);
-    setSelected(0);
-  }, [value, inputRef]);
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    if (!visible || !input) return;
-    const rect = input.getBoundingClientRect();
-    setPosition({ top: rect.bottom + 2, left: rect.left, width: rect.width });
-  }, [visible, value, inputRef]);
-  if (!visible) return null;
-  const { activeCall } = hints;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      "data-formula-hints": "",
-      className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs font-sans overflow-hidden",
-      style: {
-        position: "fixed",
-        top: position?.top ?? 0,
-        left: position?.left ?? 0,
-        minWidth: Math.max(260, position?.width ?? 0),
-        maxWidth: 440,
-        zIndex: 50,
-        visibility: position ? "visible" : "hidden"
-      },
-      onMouseDown: (e) => e.preventDefault(),
-      children: [
-        activeCall && /* @__PURE__ */ jsxs6("div", { "data-formula-signature": "", className: "px-2 py-1.5 border-b border-border bg-muted/30", children: [
-          /* @__PURE__ */ jsx7("div", { className: "font-mono", children: activeCall.parts.map((part, i) => /* @__PURE__ */ jsx7(
-            "span",
-            {
-              "data-active": part.active ? "" : void 0,
-              className: part.active ? "font-bold text-primary underline" : "",
-              children: part.text
-            },
-            i
-          )) }),
-          /* @__PURE__ */ jsx7("div", { className: "mt-0.5 text-muted-foreground", children: activeCall.argument ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-            /* @__PURE__ */ jsx7("span", { className: "font-semibold", children: activeCall.argument.name }),
-            ": ",
-            activeCall.argument.description
-          ] }) : activeCall.description })
-        ] }),
-        suggestions.length > 0 && /* @__PURE__ */ jsx7("ul", { role: "listbox", "aria-label": "Formula suggestions", className: "max-h-64 overflow-auto py-1 m-0 list-none p-0", children: suggestions.map((s, i) => /* @__PURE__ */ jsxs6(
-          "li",
-          {
-            role: "option",
-            "aria-selected": i === selectedIndex,
-            className: `cursor-pointer px-2 py-1 ${i === selectedIndex ? "bg-primary/10" : "hover:bg-muted/50"}`,
-            onMouseEnter: () => setSelected(i),
-            onMouseDown: (e) => {
-              e.preventDefault();
-              accept(i);
-            },
-            children: [
-              /* @__PURE__ */ jsx7("div", { className: "font-mono font-semibold text-foreground", children: s.signature }),
-              /* @__PURE__ */ jsx7("div", { className: "text-muted-foreground truncate", children: s.description })
-            ]
-          },
-          s.name
-        )) })
-      ]
-    }
-  );
-};
-
-// src/spreadsheet/SpreadsheetEditor.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var COLUMN_HEADER_HEIGHT = 28;
-var ROW_HEADER_WIDTH = 48;
-function frozenCellStyle(viewRow, viewCol) {
-  if (!viewRow.frozen && !viewCol.frozen) return void 0;
-  return {
-    position: "sticky",
-    ...viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop } : {},
-    ...viewCol.frozen ? { left: ROW_HEADER_WIDTH + viewCol.stickyLeft } : {},
-    zIndex: viewRow.frozen && viewCol.frozen ? 14 : viewRow.frozen ? 12 : 11,
-    background: "var(--background, #fff)"
-  };
-}
-var SpreadsheetEditor = ({
-  state: externalState,
-  readOnly = false,
-  customCellRenderer,
-  onAddColumnClick,
-  onColumnHeaderClick,
-  onColumnResize
-}) => {
-  const defaultState = useSpreadsheetEditor();
-  const state = externalState || defaultState;
-  const gridRef = useRef11(null);
-  const formulaBarRef = useRef11(null);
-  const cellInputRef = useRef11(null);
-  const [resizingColId, setResizingColId] = useState8(null);
-  const [hoveredColId, setHoveredColId] = useState8(null);
-  const [resizeStartX, setResizeStartX] = useState8(0);
-  const [resizeStartWidth, setResizeStartWidth] = useState8(0);
-  const view = state.viewModel;
-  const { copyShortcutFallback } = useSpreadsheetClipboard(gridRef, state, readOnly);
-  const { fillTarget, startFill, extendFill } = useFillHandle(state);
-  const [menu, setMenu] = useState8(null);
-  const filter = state.document.table?.filter;
-  const filteredColIds = useMemo8(
-    () => new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []),
-    [filter]
-  );
-  const handleCellContextMenu = useCallback6((rIdx, cIdx, e) => {
-    if (readOnly) return;
-    e.preventDefault();
-    if (state.editingCell) state.commitEditing();
-    if (!state.selectedRange || !rangeContains(state.selectedRange, rIdx, cIdx)) {
-      state.selectCell(rIdx, cIdx);
-    }
-    setMenu({ x: e.clientX, y: e.clientY, items: getSpreadsheetMenuItems(state.controller, { row: rIdx, col: cIdx }) });
-  }, [readOnly, state]);
-  const activeRawValue = useMemo8(() => {
-    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 = useMemo8(() => {
-    if (!state.activeCell) return "--";
-    const colName = indexToColName(state.activeCell.col);
-    return `${colName}${state.activeCell.row + 1}`;
-  }, [state.activeCell]);
-  const [formulaDraft, setFormulaDraft] = useState8(null);
-  const activeColumn = state.activeCell ? state.document.columns[state.activeCell.col] : void 0;
-  const formulaBarReadOnly = readOnly || !state.activeCell || !!activeColumn?.readOnly;
-  useEffect10(() => {
-    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 = useCallback6((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 = useCallback6((rIdx, cIdx) => {
-    if (readOnly) return;
-    const col = state.document.columns[cIdx];
-    if (col?.readOnly) return;
-    state.startEditing(rIdx, cIdx);
-  }, [readOnly, state]);
-  const handleKeyDown = useCallback6((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") {
-      copyShortcutFallback();
-    } 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, copyShortcutFallback]);
-  const stateRef = useRef11(state);
-  stateRef.current = state;
-  const onColumnResizeRef = useRef11(onColumnResize);
-  onColumnResizeRef.current = onColumnResize;
-  useEffect10(() => {
-    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 = useCallback6((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 = useCallback6((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 th = table.querySelector(`thead th[data-col="${colIndex}"]`);
-        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.querySelector(`td[data-col="${colIndex}"][colspan="1"]`);
-          if (td) {
-            const cellW = measureElementContentWidth(td, gridRef.current);
-            calculatedWidth = Math.max(calculatedWidth, cellW + 20);
-          }
-        }
-      }
-    }
-    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 = useCallback6((colId, colIndex, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    autoFitColumn(colId, colIndex);
-  }, [autoFitColumn]);
-  const handleHeaderDblClick = useCallback6((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);
-      }
-    }
-  }, [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;
-  };
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      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",
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      role: "grid",
-      "aria-label": "Spreadsheet",
-      children: [
-        /* @__PURE__ */ jsxs7("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__ */ jsx8("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__ */ jsx8("div", { className: "flex items-center text-muted-foreground select-none", children: /* @__PURE__ */ jsx8("span", { className: "italic font-serif font-bold text-sm text-primary", children: "fx" }) }),
-          /* @__PURE__ */ jsx8(
-            "input",
-            {
-              ref: formulaBarRef,
-              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(),
-              onKeyDown: (e) => {
-                e.stopPropagation();
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  commitFormulaBar();
-                } else if (e.key === "Escape") {
-                  e.preventDefault();
-                  setFormulaDraft(null);
-                  if (state.editingCell) state.cancelEditing();
-                }
-              }
-            }
-          ),
-          !formulaBarReadOnly && /* @__PURE__ */ jsx8(
-            FormulaHints,
-            {
-              inputRef: formulaBarRef,
-              value: state.editingCell ? state.draftValue : formulaDraft ?? activeRawValue,
-              onAccept: (next) => state.editingCell ? state.setDraftValue(next) : setFormulaDraft(next)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx8("div", { className: "relative flex-1 overflow-auto", children: /* @__PURE__ */ jsxs7("table", { className: "border-collapse table-fixed w-max min-w-full", children: [
-          /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs", children: [
-            /* @__PURE__ */ jsx8("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: "#" }),
-            view.columns.map(({ column: col, index: cIdx, frozen, stickyLeft }) => /* @__PURE__ */ jsxs7(
-              "th",
-              {
-                "data-col": cIdx,
-                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",
-                  ...frozen ? { position: "sticky", left: ROW_HEADER_WIDTH + stickyLeft, zIndex: 25, background: "var(--muted, #f4f4f5)" } : {}
-                },
-                onClick: () => onColumnHeaderClick?.(col),
-                onDoubleClick: (e) => handleHeaderDblClick(col.id, cIdx, e),
-                children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate", children: [
-                    /* @__PURE__ */ jsx8("span", { className: "truncate font-semibold text-foreground text-xs min-w-0", children: col.title }),
-                    filteredColIds.has(col.id) && /* @__PURE__ */ jsx8("span", { className: "text-[10px] text-primary shrink-0", title: "Filtered", "data-filtered": "true", children: "\u23F7" }),
-                    /* @__PURE__ */ jsxs7("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0", children: [
-                      "(",
-                      col.key,
-                      ")"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx8(
-                    "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__ */ jsx8(
-                        "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__ */ jsx8(
-              "th",
-              {
-                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__ */ jsx8("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx8("tbody", { children: view.rows.map((viewRow) => {
-            if (viewRow.kind === "group") {
-              return /* @__PURE__ */ jsx8(
-                SpreadsheetGroupRow,
-                {
-                  group: viewRow.group,
-                  columns: view.columns,
-                  groupColId: state.document.table?.grouping?.colId ?? "",
-                  onToggle: state.toggleGroupCollapsed,
-                  trailingCell: !!onAddColumnClick
-                },
-                `group:${viewRow.group.key}`
-              );
-            }
-            const displayRowIndex = viewRow.index;
-            const selection = state.selectedRange ? normalizeRange2(state.selectedRange) : null;
-            return /* @__PURE__ */ jsxs7(
-              "tr",
-              {
-                "data-row": displayRowIndex,
-                className: `border-b border-border hover:bg-muted/10 transition-colors ${viewRow.section !== "body" ? "bg-muted/30 font-semibold" : ""}`,
-                style: { height: viewRow.row.height || 32 },
-                children: [
-                  /* @__PURE__ */ jsx8(
-                    "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",
-                      style: viewRow.frozen ? { top: COLUMN_HEADER_HEIGHT + viewRow.stickyTop, zIndex: 15 } : void 0,
-                      children: displayRowIndex + 1
-                    }
-                  ),
-                  view.columns.map((viewCol) => {
-                    const span = view.getCellSpan(displayRowIndex, viewCol.index);
-                    if (!span) return null;
-                    const rIdx = span.source.row;
-                    const cIdx = span.source.col;
-                    const row = state.document.rows[rIdx];
-                    const col = state.document.columns[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;
-                    const inFillPreview = !!fillTarget && !selected && rangeContains(fillTarget, displayRowIndex, viewCol.index);
-                    const showFillHandle = !readOnly && !isEditing && !!selection && (span.merge ? rangeContains(span.merge, selection.endRow, selection.endCol) : selection.endRow === rIdx && selection.endCol === cIdx);
-                    return /* @__PURE__ */ jsxs7(
-                      "td",
-                      {
-                        "data-row": rIdx,
-                        "data-col": cIdx,
-                        rowSpan: span.rowSpan,
-                        colSpan: span.colSpan,
-                        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" : ""} ${viewCol.header ? "font-semibold" : ""}`,
-                        style: {
-                          maxWidth: 0,
-                          overflow: "hidden",
-                          ...frozenCellStyle(viewRow, viewCol),
-                          ...inFillPreview ? { outline: "1px dashed var(--primary, #6366f1)", outlineOffset: -1 } : {}
-                        },
-                        onClick: (e) => handleCellClick(rIdx, cIdx, e),
-                        onDoubleClick: () => handleCellDblClick(rIdx, cIdx),
-                        onContextMenu: (e) => handleCellContextMenu(rIdx, cIdx, e),
-                        onMouseOver: () => extendFill(displayRowIndex, viewCol.index),
-                        children: [
-                          isEditing ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                            /* @__PURE__ */ jsx8(
-                              "input",
-                              {
-                                ref: cellInputRef,
-                                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
-                              }
-                            ),
-                            /* @__PURE__ */ jsx8(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
-                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ jsx8(
-                            "span",
-                            {
-                              className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
-                              title: cell.error ? cell.errorMessage ?? cell.error : void 0,
-                              children: cell.error || (cell.value ?? "")
-                            }
-                          ),
-                          showFillHandle && /* @__PURE__ */ jsx8(
-                            "div",
-                            {
-                              className: "spreadsheet-fill-handle",
-                              "aria-label": "Fill handle",
-                              onMouseDown: startFill,
-                              onClick: (e) => e.stopPropagation(),
-                              style: { position: "absolute", right: 0, bottom: 0, width: 7, height: 7, background: "var(--primary, #6366f1)", cursor: "crosshair", zIndex: 25 }
-                            }
-                          )
-                        ]
-                      },
-                      viewCol.column.id
-                    );
-                  }),
-                  onAddColumnClick && /* @__PURE__ */ jsx8("td", { className: "w-10 min-w-[2.5rem] bg-muted/10 border-r border-border" })
-                ]
-              },
-              viewRow.row.id
-            );
-          }) })
-        ] }) }),
-        menu && /* @__PURE__ */ jsx8(
-          SpreadsheetContextMenu,
-          {
-            items: menu.items,
-            x: menu.x,
-            y: menu.y,
-            onClose: () => {
-              setMenu(null);
-              gridRef.current?.focus();
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx8("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;
-        }
-      ` })
-      ]
-    }
-  );
-};
-
 // src/slots.tsx
-import { createContext, useContext, useMemo as useMemo9 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { createContext, useContext, useMemo as useMemo6 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultSlots = {
-  Button: (props) => /* @__PURE__ */ jsx9(
+  Button: (props) => /* @__PURE__ */ jsx5(
     "button",
     {
       type: "button",
@@ -1960,26 +876,26 @@ var defaultSlots = {
       children: props.children
     }
   ),
-  Tooltip: (props) => /* @__PURE__ */ jsx9("div", { className: `pixerate-tooltip-container ${props.className || ""}`, title: String(props.content), children: props.children }),
-  NodeHeader: (props) => /* @__PURE__ */ jsxs8("div", { className: `pixerate-node-header flex items-center justify-between ${props.className || ""}`, children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", 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__ */ jsx9("span", { className: "font-semibold", children: props.title })
+      /* @__PURE__ */ jsx5("span", { className: "font-semibold", children: props.title })
     ] }),
-    props.onClose && /* @__PURE__ */ jsx9("button", { type: "button", onClick: props.onClose, className: "opacity-70 hover:opacity-100", children: "\xD7" })
+    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 = useMemo9(() => ({ ...defaultSlots, ...slots }), [slots]);
-  return /* @__PURE__ */ jsx9(EditorSlotsContext.Provider, { value: mergedSlots, 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 useCallback7, useMemo as useMemo10, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo7, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   getCommentStore,
   getTrackChangesStore
@@ -2001,23 +917,23 @@ function isCommentStore(value) {
 }
 function useComments(source) {
   const store = isCommentStore(source) ? source : getCommentStore(source);
-  const subscribe = useCallback7(
+  const subscribe = useCallback4(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_COMMENTS;
   const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo10(() => ({ ...snapshot, store }), [snapshot, store]);
+  return useMemo7(() => ({ ...snapshot, store }), [snapshot, store]);
 }
 function useTrackChanges(editor) {
   const store = getTrackChangesStore(editor ?? null);
-  const subscribe = useCallback7(
+  const subscribe = useCallback4(
     (onChange) => store ? store.subscribe(() => onChange()) : noopUnsubscribe,
     [store]
   );
   const getSnapshot = () => store?.getSnapshot() ?? EMPTY_TRACK_CHANGES;
   const snapshot = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
-  return useMemo10(() => {
+  return useMemo7(() => {
     const run = (fn) => () => {
       if (editor && !editor.isDestroyed) fn(editor);
     };
@@ -2037,12 +953,12 @@ function useTrackChanges(editor) {
 }
 
 // src/review/CommentsPanel.tsx
-import { useState as useState9 } from "react";
+import { useState as useState5 } from "react";
 import {
   formatReviewTime,
   getCommentAuthor
 } from "@pixerate/editor";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+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";
@@ -2056,18 +972,18 @@ var CommentsPanel = ({
   emptyMessage = "No comments yet. Select text and add a comment."
 }) => {
   const { threads, activeThreadId, store } = useComments(storeProp ?? editor);
-  const [showResolved, setShowResolved] = useState9(showResolvedInitial);
+  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__ */ jsxs9("aside", { className, "aria-label": "Comments", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs9("span", { className: "text-xs font-medium text-muted-foreground", children: [
+  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__ */ jsx10(
+      resolvedCount > 0 && /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
@@ -2078,7 +994,7 @@ var CommentsPanel = ({
         }
       )
     ] }),
-    visible.length === 0 ? /* @__PURE__ */ jsx10("p", { className: "text-xs text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx10("ul", { className: "flex flex-col gap-2", role: "list", children: visible.map((thread) => /* @__PURE__ */ jsx10(
+    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,
@@ -2100,7 +1016,7 @@ var CommentThreadCard = ({
   author,
   formatTime
 }) => {
-  const [draft, setDraft] = useState9("");
+  const [draft, setDraft] = useState5("");
   const isDraft = thread.body === "";
   const quote = thread.anchor?.quote ?? thread.lastQuote ?? "";
   const live = editor && !editor.isDestroyed ? editor : null;
@@ -2126,7 +1042,7 @@ var CommentThreadCard = ({
     setDraft("");
   };
   const stop = (e) => e.stopPropagation();
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs5(
     "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" : ""}`,
@@ -2142,24 +1058,24 @@ var CommentThreadCard = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-baseline justify-between gap-2", children: [
-          /* @__PURE__ */ jsx10("span", { className: "font-medium", children: thread.author.name }),
-          /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: formatTime(thread.createdAt) })
+        /* @__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__ */ jsx10("blockquote", { className: "border-l-2 border-border pl-2 text-xs text-muted-foreground line-clamp-2", children: quote }),
-        thread.orphaned && /* @__PURE__ */ jsx10("span", { className: "text-xs text-destructive", children: "The commented text was deleted." }),
-        thread.resolved && /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: "Resolved" }),
-        !isDraft && /* @__PURE__ */ jsx10("p", { className: "whitespace-pre-wrap break-words", children: thread.body }),
-        thread.replies.length > 0 && /* @__PURE__ */ jsx10("ul", { className: "flex flex-col gap-2 border-l border-border pl-3", role: "list", children: thread.replies.map((reply) => /* @__PURE__ */ jsxs9("li", { className: "flex flex-col gap-0.5", "data-reply-id": reply.id, children: [
-          /* @__PURE__ */ jsxs9("span", { className: "text-xs", children: [
-            /* @__PURE__ */ jsx10("span", { className: "font-medium", children: reply.author.name }),
+        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__ */ jsx10("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
+            /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: formatTime(reply.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx10("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
+          /* @__PURE__ */ jsx6("p", { className: "whitespace-pre-wrap break-words", children: reply.body })
         ] }, reply.id)) }),
-        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx10(
+        (active || isDraft) && !thread.resolved && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", onClick: stop, children: [
+          /* @__PURE__ */ jsx6(
             "textarea",
             {
               className: textareaClass,
@@ -2177,9 +1093,9 @@ var CommentThreadCard = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-1", children: [
-            isDraft && /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass, onClick: remove, children: "Cancel" }),
-            /* @__PURE__ */ jsx10(
+          /* @__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",
               {
                 type: "button",
@@ -2191,9 +1107,9 @@ var CommentThreadCard = ({
             )
           ] })
         ] }),
-        !isDraft && /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-1", onClick: stop, children: [
-          /* @__PURE__ */ jsx10("button", { type: "button", className: buttonClass, onClick: () => setResolved(!thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx10(
+        !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",
@@ -2209,18 +1125,21 @@ var CommentThreadCard = ({
 };
 
 // src/review/ReviewToolbar.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } 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 = ({
   editor,
-  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm"
+  className = "flex flex-wrap items-center gap-1 rounded-md border border-border bg-background p-1 text-sm",
+  showDescription = true,
+  descriptionClassName = defaultDescriptionClass
 }) => {
   const review = useTrackChanges(editor);
   const count = review.changes.length;
   const current = review.currentChange;
   const index = current ? review.changes.findIndex((c) => c.id === current.id) + 1 : 0;
-  return /* @__PURE__ */ jsxs10("div", { className, role: "toolbar", "aria-label": "Review", children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs6("div", { className, role: "toolbar", "aria-label": "Review", children: [
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2231,8 +1150,8 @@ var ReviewToolbar = ({
         children: review.enabled ? "Tracking on" : "Track changes"
       }
     ),
-    /* @__PURE__ */ jsx11("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2243,8 +1162,8 @@ var ReviewToolbar = ({
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx11("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__ */ jsx11(
+    /* @__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",
@@ -2255,8 +1174,20 @@ var ReviewToolbar = ({
         children: "\u203A"
       }
     ),
-    /* @__PURE__ */ jsx11("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx11(
+    showDescription && current && /* @__PURE__ */ jsxs6(
+      "span",
+      {
+        className: descriptionClassName,
+        "data-change-type": current.type,
+        title: `${current.author.name}: ${current.description}`,
+        children: [
+          current.author.name ? `${current.author.name}: ` : "",
+          current.description
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2266,7 +1197,7 @@ var ReviewToolbar = ({
         children: "Accept"
       }
     ),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2276,18 +1207,18 @@ var ReviewToolbar = ({
         children: "Reject"
       }
     ),
-    /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.acceptAll, children: "Accept all" }),
-    /* @__PURE__ */ jsx11("button", { type: "button", className: buttonClass2, disabled: count === 0, onClick: review.rejectAll, children: "Reject all" })
+    /* @__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" })
   ] });
 };
 
 // src/review/CommentButton.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+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__ */ jsx12(
+}) => /* @__PURE__ */ jsx8(
   "button",
   {
     type: "button",