@pixerate/editor-react 0.2.4 → 0.3.0

package/dist/index.d.cts

@@ -1,9 +1,11 @@
 import * as _tiptap_core from '@tiptap/core';
 import { Editor } from '@tiptap/core';
-import { Template, ColorGradient, RichTextPresetOptions } from '@pixerate/editor';
+import * as _pixerate_editor from '@pixerate/editor';
+import { Template, ColorGradient, RichTextPresetOptions, SpreadsheetControllerOptions, SpreadsheetDocument, CellCoordinate, CellRange, SpreadsheetController, SpreadsheetColumn, SpreadsheetRow, SpreadsheetDataSource, CellData } from '@pixerate/editor';
 export { ColorGradient, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 
 interface UsePromptEditorProps {
@@ -61,18 +63,18 @@ declare function useEditor(options?: UseRichEditorProps): _tiptap_core.Editor |
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
-declare const EditorContent: React.FC<EditorContentProps>;
+declare const EditorContent: React__default.FC<EditorContentProps>;
 
 interface BubbleMenuProps {
     editor: Editor | null;
     className?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     tippyOptions?: BubbleMenuPluginProps["tippyOptions"];
     shouldShow?: BubbleMenuPluginProps["shouldShow"];
     pluginKey?: BubbleMenuPluginProps["pluginKey"];
     updateDelay?: BubbleMenuPluginProps["updateDelay"];
 }
-declare const BubbleMenu: React.FC<BubbleMenuProps>;
+declare const BubbleMenu: React__default.FC<BubbleMenuProps>;
 
 interface TemplateRendererProps {
     /** Raw prompt or text string to render */
@@ -90,6 +92,49 @@ interface TemplateRendererProps {
     /** Click callback for variable badges */
     onVariableClick?: (variableName: string) => void;
 }
-declare const TemplateRenderer: React.FC<TemplateRendererProps>;
+declare const TemplateRenderer: React__default.FC<TemplateRendererProps>;
 
-export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor };
+declare function useSpreadsheetEditor(options?: SpreadsheetControllerOptions): {
+    document: SpreadsheetDocument;
+    activeCell: CellCoordinate | null;
+    selectedRange: CellRange | null;
+    editingCell: CellCoordinate | null;
+    draftValue: string;
+    setDraftValue: React.Dispatch<React.SetStateAction<string>>;
+    controller: SpreadsheetController;
+    getCell: (rowId: string, colId: string) => _pixerate_editor.CellData;
+    setCellValue: (rowId: string, colId: string, raw: string) => void;
+    selectCell: (row: number, col: number, extendSelection?: boolean) => void;
+    selectRange: (range: CellRange) => void;
+    startEditing: (row?: number, col?: number, initialVal?: string) => void;
+    commitEditing: (val?: string) => void;
+    cancelEditing: () => void;
+    moveCursor: (dir: "up" | "down" | "left" | "right", extend?: boolean) => void;
+    insertColumn: (index: number, config?: Partial<SpreadsheetColumn>) => void;
+    deleteColumn: (colId: string) => void;
+    insertRow: (index: number, config?: Partial<SpreadsheetRow>) => void;
+    deleteRow: (rowId: string) => void;
+    setColumnWidth: (colId: string, width: number) => void;
+    registerDataSource: (ds: SpreadsheetDataSource) => void;
+    setPrimaryDataSource: (id: string | undefined) => void;
+    recalculateAll: () => void;
+    exportToTsv: () => string;
+    importFromTsv: (data: string) => void;
+    undo: () => void;
+    redo: () => void;
+};
+
+interface SpreadsheetEditorProps {
+    state?: ReturnType<typeof useSpreadsheetEditor>;
+    readOnly?: boolean;
+    customCellRenderer?: (props: {
+        row: SpreadsheetRow;
+        col: SpreadsheetColumn;
+        cell: CellData;
+    }) => React__default.ReactNode;
+    onAddColumnClick?: () => void;
+    onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
+}
+declare const SpreadsheetEditor: React__default.FC<SpreadsheetEditorProps>;
+
+export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, SpreadsheetEditor, type SpreadsheetEditorProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor, useSpreadsheetEditor };

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as _tiptap_core from '@tiptap/core';
 import { Editor } from '@tiptap/core';
-import { Template, ColorGradient, RichTextPresetOptions } from '@pixerate/editor';
+import * as _pixerate_editor from '@pixerate/editor';
+import { Template, ColorGradient, RichTextPresetOptions, SpreadsheetControllerOptions, SpreadsheetDocument, CellCoordinate, CellRange, SpreadsheetController, SpreadsheetColumn, SpreadsheetRow, SpreadsheetDataSource, CellData } from '@pixerate/editor';
 export { ColorGradient, RichTextPresetOptions, Template, TemplateVersion, Token, TokenType } from '@pixerate/editor';
 import { UseEditorOptions, EditorContentProps as EditorContentProps$1 } from '@tiptap/react';
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 
 interface UsePromptEditorProps {
@@ -61,18 +63,18 @@ declare function useEditor(options?: UseRichEditorProps): _tiptap_core.Editor |
 interface EditorContentProps extends EditorContentProps$1 {
     className?: string;
 }
-declare const EditorContent: React.FC<EditorContentProps>;
+declare const EditorContent: React__default.FC<EditorContentProps>;
 
 interface BubbleMenuProps {
     editor: Editor | null;
     className?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     tippyOptions?: BubbleMenuPluginProps["tippyOptions"];
     shouldShow?: BubbleMenuPluginProps["shouldShow"];
     pluginKey?: BubbleMenuPluginProps["pluginKey"];
     updateDelay?: BubbleMenuPluginProps["updateDelay"];
 }
-declare const BubbleMenu: React.FC<BubbleMenuProps>;
+declare const BubbleMenu: React__default.FC<BubbleMenuProps>;
 
 interface TemplateRendererProps {
     /** Raw prompt or text string to render */
@@ -90,6 +92,49 @@ interface TemplateRendererProps {
     /** Click callback for variable badges */
     onVariableClick?: (variableName: string) => void;
 }
-declare const TemplateRenderer: React.FC<TemplateRendererProps>;
+declare const TemplateRenderer: React__default.FC<TemplateRendererProps>;
 
-export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor };
+declare function useSpreadsheetEditor(options?: SpreadsheetControllerOptions): {
+    document: SpreadsheetDocument;
+    activeCell: CellCoordinate | null;
+    selectedRange: CellRange | null;
+    editingCell: CellCoordinate | null;
+    draftValue: string;
+    setDraftValue: React.Dispatch<React.SetStateAction<string>>;
+    controller: SpreadsheetController;
+    getCell: (rowId: string, colId: string) => _pixerate_editor.CellData;
+    setCellValue: (rowId: string, colId: string, raw: string) => void;
+    selectCell: (row: number, col: number, extendSelection?: boolean) => void;
+    selectRange: (range: CellRange) => void;
+    startEditing: (row?: number, col?: number, initialVal?: string) => void;
+    commitEditing: (val?: string) => void;
+    cancelEditing: () => void;
+    moveCursor: (dir: "up" | "down" | "left" | "right", extend?: boolean) => void;
+    insertColumn: (index: number, config?: Partial<SpreadsheetColumn>) => void;
+    deleteColumn: (colId: string) => void;
+    insertRow: (index: number, config?: Partial<SpreadsheetRow>) => void;
+    deleteRow: (rowId: string) => void;
+    setColumnWidth: (colId: string, width: number) => void;
+    registerDataSource: (ds: SpreadsheetDataSource) => void;
+    setPrimaryDataSource: (id: string | undefined) => void;
+    recalculateAll: () => void;
+    exportToTsv: () => string;
+    importFromTsv: (data: string) => void;
+    undo: () => void;
+    redo: () => void;
+};
+
+interface SpreadsheetEditorProps {
+    state?: ReturnType<typeof useSpreadsheetEditor>;
+    readOnly?: boolean;
+    customCellRenderer?: (props: {
+        row: SpreadsheetRow;
+        col: SpreadsheetColumn;
+        cell: CellData;
+    }) => React__default.ReactNode;
+    onAddColumnClick?: () => void;
+    onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
+}
+declare const SpreadsheetEditor: React__default.FC<SpreadsheetEditorProps>;
+
+export { BubbleMenu, type BubbleMenuProps, EditorContent, type EditorContentProps, SpreadsheetEditor, type SpreadsheetEditorProps, TemplateRenderer, type TemplateRendererProps, type UsePromptEditorProps, type UseRichEditorProps, useEditor, usePromptEditor, useSpreadsheetEditor };

package/dist/index.js

@@ -361,11 +361,417 @@ var TemplateRenderer = ({
     return /* @__PURE__ */ jsx2("span", { children: token.value }, index);
   }) });
 };
+
+// src/spreadsheet/useSpreadsheetEditor.ts
+import { useState as useState2, useMemo as useMemo3, useCallback } from "react";
+import {
+  SpreadsheetController
+} from "@pixerate/editor";
+function useSpreadsheetEditor(options = {}) {
+  const [doc, setDoc] = useState2(() => ({
+    id: options.document?.id || `sheet_${Date.now()}`,
+    name: options.document?.name || "Sheet 1",
+    columns: options.document?.columns || [],
+    rows: options.document?.rows || [],
+    cells: options.document?.cells || {},
+    createdAt: options.document?.createdAt || Date.now(),
+    updatedAt: options.document?.updatedAt || Date.now()
+  }));
+  const [activeCell, setActiveCell] = useState2(null);
+  const [selectedRange, setSelectedRange] = useState2(null);
+  const [editingCell, setEditingCell] = useState2(null);
+  const [draftValue, setDraftValue] = useState2("");
+  const controller = useMemo3(() => {
+    return new SpreadsheetController({
+      ...options,
+      onDocumentChange: (updated) => {
+        setDoc({ ...updated });
+        options.onDocumentChange?.(updated);
+      },
+      onSelectionChange: (active, range) => {
+        setActiveCell(active);
+        setSelectedRange(range);
+        options.onSelectionChange?.(active, range);
+      },
+      onCellCommit: (rowId, colId, raw, value) => {
+        options.onCellCommit?.(rowId, colId, raw, value);
+      }
+    });
+  }, []);
+  const setCellValue = useCallback((rowId, colId, raw) => {
+    controller.setCellValue(rowId, colId, raw);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const selectCell = useCallback((row, col, extendSelection = false) => {
+    controller.selectCell(row, col, extendSelection);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const selectRange = useCallback((range) => {
+    controller.selectRange(range);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const startEditing = useCallback((row, col, initialVal) => {
+    controller.startEditing(row, col, initialVal);
+    setActiveCell(controller.activeCell);
+    setEditingCell(controller.editingCell);
+    setDraftValue(controller.draftValue);
+  }, [controller]);
+  const commitEditing = useCallback((val) => {
+    controller.commitEditing(val);
+    setEditingCell(null);
+    setDraftValue("");
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const cancelEditing = useCallback(() => {
+    controller.cancelEditing();
+    setEditingCell(null);
+    setDraftValue("");
+  }, [controller]);
+  const moveCursor = useCallback((dir, extend = false) => {
+    controller.moveCursor(dir, extend);
+    setActiveCell(controller.activeCell);
+    setSelectedRange(controller.selectedRange);
+  }, [controller]);
+  const insertColumn = useCallback((index, config) => {
+    controller.insertColumn(index, config);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const deleteColumn = useCallback((colId) => {
+    controller.deleteColumn(colId);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const insertRow = useCallback((index, config) => {
+    controller.insertRow(index, config);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const deleteRow = useCallback((rowId) => {
+    controller.deleteRow(rowId);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const setColumnWidth = useCallback((colId, width) => {
+    controller.setColumnWidth(colId, width);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const registerDataSource = useCallback((ds) => {
+    controller.registerDataSource(ds);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const setPrimaryDataSource = useCallback((id) => {
+    controller.setPrimaryDataSource(id);
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const recalculateAll = useCallback(() => {
+    controller.recalculateAll();
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const undo = useCallback(() => {
+    controller.undo();
+    setDoc({ ...controller.document });
+  }, [controller]);
+  const redo = useCallback(() => {
+    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,
+    registerDataSource,
+    setPrimaryDataSource,
+    recalculateAll,
+    exportToTsv: () => controller.exportToTsv(),
+    importFromTsv: (data) => {
+      controller.importFromTsv(data);
+      setDoc({ ...controller.document });
+    },
+    undo,
+    redo
+  };
+}
+
+// src/spreadsheet/SpreadsheetEditor.tsx
+import { useState as useState3, useMemo as useMemo4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import {
+  indexToColName
+} from "@pixerate/editor";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var SpreadsheetEditor = ({
+  state: externalState,
+  readOnly = false,
+  customCellRenderer,
+  onAddColumnClick,
+  onColumnHeaderClick
+}) => {
+  const defaultState = useSpreadsheetEditor();
+  const state = externalState || defaultState;
+  const [resizingColId, setResizingColId] = useState3(null);
+  const [resizeStartX, setResizeStartX] = useState3(0);
+  const [resizeStartWidth, setResizeStartWidth] = useState3(0);
+  const activeRawValue = useMemo4(() => {
+    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 = useMemo4(() => {
+    if (!state.activeCell) return "--";
+    const colName = indexToColName(state.activeCell.col);
+    return `${colName}${state.activeCell.row + 1}`;
+  }, [state.activeCell]);
+  const handleCellClick = useCallback2((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 = useCallback2((rIdx, cIdx) => {
+    if (readOnly) return;
+    const col = state.document.columns[cIdx];
+    if (col?.readOnly) return;
+    state.startEditing(rIdx, cIdx);
+  }, [readOnly, state]);
+  const handleKeyDown = useCallback2((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 === "z") {
+      e.preventDefault();
+      if (e.shiftKey) {
+        state.redo();
+      } else {
+        state.undo();
+      }
+    } else if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+      e.preventDefault();
+      const tsv = state.exportToTsv();
+      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]);
+  useEffect3(() => {
+    if (!resizingColId) return;
+    const handleMouseMove = (e) => {
+      const delta = e.clientX - resizeStartX;
+      state.setColumnWidth(resizingColId, Math.max(60, resizeStartWidth + delta));
+    };
+    const handleMouseUp = () => {
+      setResizingColId(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingColId, resizeStartX, resizeStartWidth, state]);
+  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__ */ jsxs(
+    "div",
+    {
+      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__ */ 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",
+            {
+              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))",
+              value: state.editingCell ? state.draftValue : activeRawValue,
+              onChange: (e) => {
+                if (state.activeCell) {
+                  state.setDraftValue(e.target.value);
+                }
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (state.activeCell) {
+                    const row = state.document.rows[state.activeCell.row];
+                    const col = state.document.columns[state.activeCell.col];
+                    if (row && col) {
+                      state.setCellValue(row.id, col.id, e.target.value);
+                    }
+                  }
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  state.cancelEditing();
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__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 cursor-pointer",
+                style: { width: col.width || 130, minWidth: col.width || 130, maxWidth: col.width || 130 },
+                onClick: () => onColumnHeaderClick?.(col),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 truncate", children: [
+                    /* @__PURE__ */ jsx3("span", { className: "truncate font-semibold text-foreground text-xs", children: col.title }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground/70 font-mono font-normal", children: [
+                      "(",
+                      col.key,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: "absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 group-hover:bg-primary/20 z-10",
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setResizingColId(col.id);
+                        setResizeStartX(e.clientX);
+                        setResizeStartWidth(col.width || 130);
+                      },
+                      role: "separator",
+                      "aria-orientation": "vertical"
+                    }
+                  )
+                ]
+              },
+              col.id
+            )),
+            onAddColumnClick && /* @__PURE__ */ jsx3(
+              "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__ */ jsx3("span", { className: "text-xs font-bold text-muted-foreground", children: "+" })
+              }
+            )
+          ] }) }),
+          /* @__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 text-foreground transition-all ${selected ? "bg-primary/10" : ""} ${active ? "ring-2 ring-primary ring-inset z-10" : ""}`,
+                  style: { width: col.width || 130, minWidth: col.width || 130, maxWidth: col.width || 130 },
+                  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 ${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)) })
+        ] }) })
+      ]
+    }
+  );
+};
 export {
   BubbleMenu,
   EditorContent,
+  SpreadsheetEditor,
   TemplateRenderer,
   useEditor2 as useEditor,
-  usePromptEditor
+  usePromptEditor,
+  useSpreadsheetEditor
 };
 //# sourceMappingURL=index.js.map