@pixerate/editor-svelte 0.2.4 → 0.3.0

package/dist/index.d.ts

@@ -78,3 +78,59 @@ export type {
   ColorGradient,
   RichTextPresetOptions,
 };
+
+import type {
+  SpreadsheetController,
+  SpreadsheetControllerOptions,
+  SpreadsheetDocument,
+  SpreadsheetColumn,
+  SpreadsheetRow,
+  CellCoordinate,
+  CellRange,
+  CellData,
+  SpreadsheetDataSource
+} from '@pixerate/editor';
+
+export interface SpreadsheetEditorProps {
+  sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+  readonly?: boolean;
+  class?: string;
+  customCellRenderer?: (cell: CellData, col: SpreadsheetColumn, row: SpreadsheetRow) => any;
+}
+
+export interface FormulaBarProps {
+  sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+  class?: string;
+}
+
+export declare const SpreadsheetEditor: Component<SpreadsheetEditorProps>;
+export declare const FormulaBar: Component<FormulaBarProps>;
+
+export declare function createReactiveSpreadsheet(options?: SpreadsheetControllerOptions): {
+  readonly document: SpreadsheetDocument;
+  readonly activeCell: CellCoordinate | null;
+  readonly selectedRange: CellRange | null;
+  readonly editingCell: CellCoordinate | null;
+  draftValue: string;
+  controller: SpreadsheetController;
+  getCell(rowId: string, colId: string): 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;
+};

package/dist/index.js

@@ -99,21 +99,30 @@ function EditableTextNodeEditor($$anchor, $$props) {
 // src/BubbleMenu.svelte
 import "svelte/internal/disclose-version";
 import * as $3 from "svelte/internal/client";
-import BubbleMenuPlugin from "@tiptap/extension-bubble-menu";
-import { onMount as onMount2, onDestroy as onDestroy2 } from "svelte";
-var root2 = $3.from_html(`<div><!></div>`);
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+var root2 = $3.from_html(`<div style="visibility: hidden;"><!></div>`);
 function BubbleMenu($$anchor, $$props) {
   $3.push($$props, true);
-  let className = $3.prop($$props, "class", 3, "flex items-center gap-1 bg-white border border-gray-200 shadow-md rounded-md p-1");
+  let className = $3.prop($$props, "class", 3, "flex h-fit w-fit items-center gap-1 rounded-md border border-gray-200 bg-white p-1 shadow-md"), pluginKey = $3.prop($$props, "pluginKey", 3, "bubbleMenu"), shouldShow = $3.prop($$props, "shouldShow", 3, null), updateDelay = $3.prop($$props, "updateDelay", 3, 250), tippyOptions = $3.prop($$props, "tippyOptions", 19, () => ({}));
   let menuElement = $3.state(void 0);
-  onMount2(() => {
+  $3.user_effect(() => {
     if ($$props.editor && $3.get(menuElement)) {
-      $$props.editor.registerPlugin(BubbleMenuPlugin.configure({ element: $3.get(menuElement), tippyOptions: { duration: 100 } }));
-    }
-  });
-  onDestroy2(() => {
-    if ($$props.editor) {
-      $$props.editor.unregisterPlugin("bubbleMenu");
+      const plugin = BubbleMenuPlugin({
+        pluginKey: pluginKey(),
+        editor: $$props.editor,
+        element: $3.get(menuElement),
+        tippyOptions: {
+          duration: 100,
+          appendTo: () => document.body,
+          ...tippyOptions()
+        },
+        shouldShow: shouldShow(),
+        updateDelay: updateDelay()
+      });
+      $$props.editor.registerPlugin(plugin);
+      return () => {
+        $$props.editor.unregisterPlugin(pluginKey());
+      };
     }
   });
   var div = root2();
@@ -208,6 +217,477 @@ function TemplateRenderer($$anchor, $$props) {
 }
 $4.delegate(["click"]);
 
+// src/spreadsheet/SpreadsheetEditor.svelte
+import "svelte/internal/disclose-version";
+import * as $7 from "svelte/internal/client";
+import { indexToColName as indexToColName2 } from "@pixerate/editor";
+
+// src/spreadsheet/FormulaBar.svelte
+import "svelte/internal/disclose-version";
+import * as $5 from "svelte/internal/client";
+import { indexToColName } from "@pixerate/editor";
+var root4 = $5.from_html(`<div class="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono"><div class="flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground"> </div> <div class="flex items-center text-muted-foreground select-none"><span class="italic font-serif font-bold text-sm text-primary">fx</span></div> <input type="text" class="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))"/></div>`);
+function FormulaBar($$anchor, $$props) {
+  $5.push($$props, true);
+  let activeCoord = $5.prop($$props, "activeCoord", 3, null), value = $5.prop($$props, "value", 15, "");
+  let coordLabel = $5.derived(() => {
+    if (!activeCoord()) return "--";
+    const colName = indexToColName(activeCoord().col);
+    return `${colName}${activeCoord().row + 1}`;
+  });
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      $$props.onCommit?.(value());
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      $$props.onCancel?.();
+    }
+  }
+  function handleInput(e) {
+    const target = e.target;
+    value(target.value);
+    $$props.onChange?.(target.value);
+  }
+  var div = root4();
+  var div_1 = $5.child(div);
+  var text = $5.only_child(div_1, true);
+  var input = $5.sibling(div_1, 4);
+  $5.remove_input_defaults(input);
+  $5.reset(div);
+  $5.template_effect(() => {
+    $5.set_text(text, $5.get(coordLabel));
+    $5.set_value(input, value());
+  });
+  $5.delegated("input", input, handleInput);
+  $5.delegated("keydown", input, handleKeyDown);
+  $5.append($$anchor, div);
+  $5.pop();
+}
+$5.delegate(["input", "keydown"]);
+
+// src/spreadsheet/spreadsheet.svelte.ts
+import * as $6 from "svelte/internal/client";
+import { SpreadsheetController } from "@pixerate/editor";
+function createReactiveSpreadsheet(options = {}) {
+  let doc = $6.state($6.proxy({
+    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()
+  }));
+  let activeCell = $6.state(null);
+  let selectedRange = $6.state(null);
+  let editingCell = $6.state(null);
+  let draftValue = $6.state("");
+  const controller = new SpreadsheetController({
+    ...options,
+    document: options.document,
+    onDocumentChange: (updated) => {
+      $6.set(doc, { ...updated }, true);
+      options.onDocumentChange?.(updated);
+    },
+    onSelectionChange: (active, range) => {
+      $6.set(activeCell, active, true);
+      $6.set(selectedRange, range, true);
+      options.onSelectionChange?.(active, range);
+    },
+    onCellCommit: (rowId, colId, raw, value) => {
+      options.onCellCommit?.(rowId, colId, raw, value);
+    }
+  });
+  $6.set(doc, { ...controller.document }, true);
+  $6.set(activeCell, controller.activeCell, true);
+  $6.set(selectedRange, controller.selectedRange, true);
+  return {
+    get document() {
+      return $6.get(doc);
+    },
+    get activeCell() {
+      return $6.get(activeCell);
+    },
+    get selectedRange() {
+      return $6.get(selectedRange);
+    },
+    get editingCell() {
+      return $6.get(editingCell);
+    },
+    get draftValue() {
+      return $6.get(draftValue);
+    },
+    set draftValue(val) {
+      $6.set(draftValue, val, true);
+      controller.draftValue = val;
+    },
+    controller,
+    getCell(rowId, colId) {
+      return controller.getCell(rowId, colId);
+    },
+    setCellValue(rowId, colId, raw) {
+      controller.setCellValue(rowId, colId, raw);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    selectCell(row, col, extendSelection = false) {
+      controller.selectCell(row, col, extendSelection);
+      $6.set(activeCell, controller.activeCell, true);
+      $6.set(selectedRange, controller.selectedRange, true);
+    },
+    selectRange(range) {
+      controller.selectRange(range);
+      $6.set(selectedRange, controller.selectedRange, true);
+    },
+    startEditing(row, col, initialVal) {
+      controller.startEditing(row, col, initialVal);
+      $6.set(activeCell, controller.activeCell, true);
+      $6.set(editingCell, controller.editingCell, true);
+      $6.set(draftValue, controller.draftValue, true);
+    },
+    commitEditing(val) {
+      controller.commitEditing(val);
+      $6.set(editingCell, null);
+      $6.set(draftValue, "");
+      $6.set(doc, { ...controller.document }, true);
+    },
+    cancelEditing() {
+      controller.cancelEditing();
+      $6.set(editingCell, null);
+      $6.set(draftValue, "");
+    },
+    moveCursor(dir, extend = false) {
+      controller.moveCursor(dir, extend);
+      $6.set(activeCell, controller.activeCell, true);
+      $6.set(selectedRange, controller.selectedRange, true);
+    },
+    insertColumn(index2, config) {
+      controller.insertColumn(index2, config);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    deleteColumn(colId) {
+      controller.deleteColumn(colId);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    insertRow(index2, config) {
+      controller.insertRow(index2, config);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    deleteRow(rowId) {
+      controller.deleteRow(rowId);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    setColumnWidth(colId, width) {
+      controller.setColumnWidth(colId, width);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    registerDataSource(ds) {
+      controller.registerDataSource(ds);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    setPrimaryDataSource(id) {
+      controller.setPrimaryDataSource(id);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    recalculateAll() {
+      controller.recalculateAll();
+      $6.set(doc, { ...controller.document }, true);
+    },
+    exportToTsv() {
+      return controller.exportToTsv();
+    },
+    importFromTsv(data) {
+      controller.importFromTsv(data);
+      $6.set(doc, { ...controller.document }, true);
+    },
+    undo() {
+      controller.undo();
+      $6.set(doc, { ...controller.document }, true);
+    },
+    redo() {
+      controller.redo();
+      $6.set(doc, { ...controller.document }, true);
+    }
+  };
+}
+
+// src/spreadsheet/SpreadsheetEditor.svelte
+var root5 = $7.from_html(`<th class="relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group cursor-pointer"><div class="flex items-center justify-between gap-1 truncate"><span class="truncate font-semibold text-foreground text-xs"> </span> <span class="text-[10px] text-muted-foreground/70 font-mono font-normal"> </span></div> <div class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 group-hover:bg-primary/20 z-10" role="separator" aria-orientation="vertical"></div></th>`);
+var root_13 = $7.from_html(`<th class="w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors" title="Add Column"><span class="text-xs font-bold text-muted-foreground">+</span></th>`);
+var root_22 = $7.from_html(`<input type="text" class="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"/>`);
+var root_32 = $7.from_html(`<span> </span>`);
+var root_42 = $7.from_html(`<td><!></td>`);
+var root_5 = $7.from_html(`<td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>`);
+var root_6 = $7.from_html(`<tr class="border-b border-border hover:bg-muted/10 transition-colors"><td class="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"> </td><!><!></tr>`);
+var root_7 = $7.from_html(`<div class="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" role="grid" aria-label="Spreadsheet"><!> <div class="relative flex-1 overflow-auto"><table class="border-collapse table-fixed w-max min-w-full"><thead><tr class="h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs"><th class="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">#</th><!><!></tr></thead><tbody></tbody></table></div></div>`);
+function SpreadsheetEditor($$anchor, $$props) {
+  $7.push($$props, true);
+  let sheetState = $7.prop($$props, "sheetState", 23, createReactiveSpreadsheet), readOnly = $7.prop($$props, "readOnly", 3, false);
+  let gridContainer = $7.state(null);
+  let resizingColId = $7.state(null);
+  let resizeStartX = $7.state(0);
+  let resizeStartWidth = $7.state(0);
+  let activeRawValue = $7.derived(() => {
+    if (!sheetState().activeCell) return "";
+    const row = sheetState().document.rows[sheetState().activeCell.row];
+    const col = sheetState().document.columns[sheetState().activeCell.col];
+    if (!row || !col) return "";
+    return sheetState().getCell(row.id, col.id).raw;
+  });
+  function handleCellClick(rIdx, cIdx, e) {
+    if (sheetState().editingCell && (sheetState().editingCell.row !== rIdx || sheetState().editingCell.col !== cIdx)) {
+      sheetState().commitEditing();
+    }
+    sheetState().selectCell(rIdx, cIdx, e.shiftKey);
+  }
+  function handleCellDblClick(rIdx, cIdx) {
+    if (readOnly()) return;
+    const col = sheetState().document.columns[cIdx];
+    if (col?.readOnly) return;
+    sheetState().startEditing(rIdx, cIdx);
+  }
+  function handleKeyDown(e) {
+    if (sheetState().editingCell) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        sheetState().commitEditing();
+        sheetState().moveCursor("down");
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        sheetState().cancelEditing();
+      } else if (e.key === "Tab") {
+        e.preventDefault();
+        sheetState().commitEditing();
+        sheetState().moveCursor(e.shiftKey ? "left" : "right");
+      }
+      return;
+    }
+    if (!sheetState().activeCell) return;
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      sheetState().moveCursor("up", e.shiftKey);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      sheetState().moveCursor("down", e.shiftKey);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      sheetState().moveCursor("left", e.shiftKey);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      sheetState().moveCursor("right", e.shiftKey);
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      sheetState().moveCursor(e.shiftKey ? "left" : "right");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const col = sheetState().document.columns[sheetState().activeCell.col];
+      if (!readOnly() && !col?.readOnly) {
+        sheetState().startEditing();
+      }
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      if (readOnly()) return;
+      const row = sheetState().document.rows[sheetState().activeCell.row];
+      const col = sheetState().document.columns[sheetState().activeCell.col];
+      if (row && col && !col.readOnly) {
+        e.preventDefault();
+        sheetState().setCellValue(row.id, col.id, "");
+      }
+    } else if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+      e.preventDefault();
+      if (e.shiftKey) {
+        sheetState().redo();
+      } else {
+        sheetState().undo();
+      }
+    } else if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+      e.preventDefault();
+      const tsv = sheetState().exportToTsv();
+      navigator.clipboard?.writeText(tsv);
+    } else if (!readOnly() && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const col = sheetState().document.columns[sheetState().activeCell.col];
+      if (!col?.readOnly) {
+        sheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, e.key);
+      }
+    }
+  }
+  function handleResizeStart(colId, width, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $7.set(resizingColId, colId, true);
+    $7.set(resizeStartX, e.clientX, true);
+    $7.set(resizeStartWidth, width, true);
+    const handleMouseMove = (moveEvent) => {
+      if (!$7.get(resizingColId)) return;
+      const delta = moveEvent.clientX - $7.get(resizeStartX);
+      sheetState().setColumnWidth($7.get(resizingColId), Math.max(60, $7.get(resizeStartWidth) + delta));
+    };
+    const handleMouseUp = () => {
+      $7.set(resizingColId, null);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+  function isCellSelected(rIdx, cIdx) {
+    if (!sheetState().selectedRange) return false;
+    const minR = Math.min(sheetState().selectedRange.startRow, sheetState().selectedRange.endRow);
+    const maxR = Math.max(sheetState().selectedRange.startRow, sheetState().selectedRange.endRow);
+    const minC = Math.min(sheetState().selectedRange.startCol, sheetState().selectedRange.endCol);
+    const maxC = Math.max(sheetState().selectedRange.startCol, sheetState().selectedRange.endCol);
+    return rIdx >= minR && rIdx <= maxR && cIdx >= minC && cIdx <= maxC;
+  }
+  function isActiveCell(rIdx, cIdx) {
+    return sheetState().activeCell?.row === rIdx && sheetState().activeCell?.col === cIdx;
+  }
+  var div = root_7();
+  var node = $7.child(div);
+  {
+    let $0 = $7.derived(() => sheetState().editingCell ? sheetState().draftValue : $7.get(activeRawValue));
+    FormulaBar(node, {
+      get activeCoord() {
+        return sheetState().activeCell;
+      },
+      get value() {
+        return $7.get($0);
+      },
+      onChange: (val) => {
+        if (sheetState().activeCell) {
+          sheetState().draftValue = val;
+        }
+      },
+      onCommit: (val) => {
+        if (sheetState().activeCell) {
+          const row = sheetState().document.rows[sheetState().activeCell.row];
+          const col = sheetState().document.columns[sheetState().activeCell.col];
+          if (row && col) {
+            sheetState().setCellValue(row.id, col.id, val);
+          }
+        }
+      },
+      onCancel: () => {
+        sheetState().cancelEditing();
+      }
+    });
+  }
+  var div_1 = $7.sibling(node, 2);
+  var table = $7.child(div_1);
+  var thead = $7.child(table);
+  var tr = $7.child(thead);
+  var node_1 = $7.sibling($7.child(tr));
+  $7.each(node_1, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor2, col) => {
+    var th = root5();
+    var div_2 = $7.child(th);
+    var span = $7.child(div_2);
+    var text = $7.only_child(span, true);
+    var span_1 = $7.sibling(span, 2);
+    var text_1 = $7.only_child(span_1);
+    $7.reset(div_2);
+    var div_3 = $7.sibling(div_2, 2);
+    $7.reset(th);
+    $7.template_effect(() => {
+      $7.set_style(th, `width: ${($7.get(col).width || 130) ?? ""}px; min-width: ${($7.get(col).width || 130) ?? ""}px; max-width: ${($7.get(col).width || 130) ?? ""}px;`);
+      $7.set_text(text, $7.get(col).title);
+      $7.set_text(text_1, `(${$7.get(col).key ?? ""})`);
+    });
+    $7.delegated("click", th, () => $$props.onColumnHeaderClick?.($7.get(col)));
+    $7.delegated("mousedown", div_3, (e) => handleResizeStart($7.get(col).id, $7.get(col).width || 130, e));
+    $7.append($$anchor2, th);
+  });
+  var node_2 = $7.sibling(node_1);
+  {
+    var consequent = ($$anchor2) => {
+      var th_1 = root_13();
+      $7.delegated("click", th_1, function(...$$args) {
+        $$props.onAddColumnClick?.apply(this, $$args);
+      });
+      $7.append($$anchor2, th_1);
+    };
+    $7.if(node_2, ($$render) => {
+      if ($$props.onAddColumnClick) $$render(consequent);
+    });
+  }
+  $7.reset(tr);
+  $7.reset(thead);
+  var tbody = $7.sibling(thead);
+  $7.each(tbody, 23, () => sheetState().document.rows, (row) => row.id, ($$anchor2, row, rIdx) => {
+    var tr_1 = root_6();
+    var td = $7.child(tr_1);
+    var text_2 = $7.only_child(td, true);
+    var node_3 = $7.sibling(td);
+    $7.each(node_3, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor3, col, cIdx) => {
+      const cell = $7.derived(() => sheetState().getCell($7.get(row).id, $7.get(col).id));
+      const selected = $7.derived(() => isCellSelected($7.get(rIdx), $7.get(cIdx)));
+      const active = $7.derived(() => isActiveCell($7.get(rIdx), $7.get(cIdx)));
+      const isEditing = $7.derived(() => sheetState().editingCell?.row === $7.get(rIdx) && sheetState().editingCell?.col === $7.get(cIdx));
+      var td_1 = root_42();
+      var node_4 = $7.child(td_1);
+      {
+        var consequent_1 = ($$anchor4) => {
+          var input = root_22();
+          $7.remove_input_defaults(input);
+          $7.event("blur", input, () => sheetState().commitEditing());
+          $7.bind_value(input, () => sheetState().draftValue, ($$value) => sheetState().draftValue = $$value);
+          $7.append($$anchor4, input);
+        };
+        var consequent_2 = ($$anchor4) => {
+          var fragment = $7.comment();
+          var node_5 = $7.first_child(fragment);
+          $7.snippet(node_5, () => $$props.customCellRenderer, () => ({ row: $7.get(row), col: $7.get(col), cell: $7.get(cell) }));
+          $7.append($$anchor4, fragment);
+        };
+        var alternate = ($$anchor4) => {
+          var span_2 = root_32();
+          var text_3 = $7.only_child(span_2, true);
+          $7.template_effect(() => {
+            $7.set_class(span_2, 1, `truncate block ${$7.get(cell).error ? "text-destructive font-semibold" : ""}`);
+            $7.set_text(text_3, $7.get(cell).error || ($7.get(cell).value ?? ""));
+          });
+          $7.append($$anchor4, span_2);
+        };
+        $7.if(node_4, ($$render) => {
+          if ($7.get(isEditing)) $$render(consequent_1);
+          else if ($$props.customCellRenderer) $$render(consequent_2, 1);
+          else $$render(alternate, -1);
+        });
+      }
+      $7.reset(td_1);
+      $7.template_effect(() => {
+        $7.set_class(td_1, 1, `relative border-r border-border px-2 py-1 truncate text-foreground transition-all ${$7.get(selected) ? "bg-primary/10" : ""} ${$7.get(active) ? "ring-2 ring-primary ring-inset z-10" : ""}`);
+        $7.set_style(td_1, `width: ${($7.get(col).width || 130) ?? ""}px; min-width: ${($7.get(col).width || 130) ?? ""}px; max-width: ${($7.get(col).width || 130) ?? ""}px;`);
+      });
+      $7.delegated("click", td_1, (e) => handleCellClick($7.get(rIdx), $7.get(cIdx), e));
+      $7.delegated("dblclick", td_1, () => handleCellDblClick($7.get(rIdx), $7.get(cIdx)));
+      $7.append($$anchor3, td_1);
+    });
+    var node_6 = $7.sibling(node_3);
+    {
+      var consequent_3 = ($$anchor3) => {
+        var td_2 = root_5();
+        $7.append($$anchor3, td_2);
+      };
+      $7.if(node_6, ($$render) => {
+        if ($$props.onAddColumnClick) $$render(consequent_3);
+      });
+    }
+    $7.reset(tr_1);
+    $7.template_effect(() => {
+      $7.set_style(tr_1, `height: ${($7.get(row).height || 32) ?? ""}px;`);
+      $7.set_text(text_2, $7.get(rIdx) + 1);
+    });
+    $7.append($$anchor2, tr_1);
+  });
+  $7.reset(tbody);
+  $7.reset(table);
+  $7.reset(div_1);
+  $7.reset(div);
+  $7.bind_this(div, ($$value) => $7.set(gridContainer, $$value), () => $7.get(gridContainer));
+  $7.delegated("keydown", div, handleKeyDown);
+  $7.append($$anchor, div);
+  $7.pop();
+}
+$7.delegate(["keydown", "click", "mousedown", "dblclick"]);
+
 // src/index.ts
 var EditableTextNodeEditor2 = EditableTextNodeEditor;
 var BubbleMenu2 = BubbleMenu;
@@ -215,8 +695,11 @@ var TemplateRenderer2 = TemplateRenderer;
 export {
   BubbleMenu2 as BubbleMenu,
   EditableTextNodeEditor2 as EditableTextNodeEditor,
+  FormulaBar,
+  SpreadsheetEditor,
   TemplateRenderer2 as TemplateRenderer,
   createReactiveEditor,
+  createReactiveSpreadsheet,
   initiateEditor
 };
 //# sourceMappingURL=index.js.map