@pixerate/editor-svelte 0.2.5 → 0.3.1

package/dist/index.d.ts

@@ -78,3 +78,66 @@ 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;
+  readOnly?: boolean;
+  showFormulaBar?: boolean;
+  class?: string;
+  customCellRenderer?:
+    | ((cell: CellData, col: SpreadsheetColumn, row: SpreadsheetRow) => any)
+    | ((args: { cell: CellData; col: SpreadsheetColumn; row: SpreadsheetRow }) => any)
+    | ((args: { row: SpreadsheetRow; col: SpreadsheetColumn; cell: CellData }) => any);
+  onAddColumnClick?: () => void;
+  onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
+}
+
+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

@@ -217,6 +217,489 @@ 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><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 sheetState = $5.prop($$props, "sheetState", 7), activeCoord = $5.prop($$props, "activeCoord", 3, null), value = $5.prop($$props, "value", 15, ""), className = $5.prop($$props, "class", 3, "");
+  let effectiveCoord = $5.derived(() => {
+    if (sheetState()) return sheetState().activeCell;
+    return activeCoord();
+  });
+  let coordLabel = $5.derived(() => {
+    if (!$5.get(effectiveCoord)) return "--";
+    const colName = indexToColName($5.get(effectiveCoord).col);
+    return `${colName}${$5.get(effectiveCoord).row + 1}`;
+  });
+  let effectiveValue = $5.derived(() => {
+    if (sheetState()) {
+      if (sheetState().editingCell) return sheetState().draftValue;
+      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 || "";
+    }
+    return value();
+  });
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (sheetState() && 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, $5.get(effectiveValue));
+        }
+        sheetState().commitEditing();
+      }
+      $$props.onCommit?.($5.get(effectiveValue));
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      if (sheetState()) {
+        sheetState().cancelEditing();
+      }
+      $$props.onCancel?.();
+    }
+  }
+  function handleInput(e) {
+    const target = e.target;
+    if (sheetState()) {
+      sheetState().draftValue = target.value;
+      if (sheetState().activeCell && !sheetState().editingCell) {
+        sheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, target.value);
+      }
+    } else {
+      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_class(div, 1, `flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono ${className() ?? ""}`);
+    $5.set_text(text, $5.get(coordLabel));
+    $5.set_value(input, $5.get(effectiveValue));
+  });
+  $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" tabindex="-1"></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 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), readonly = $7.prop($$props, "readonly", 3, false), showFormulaBar = $7.prop($$props, "showFormulaBar", 3, true), className = $7.prop($$props, "class", 3, "");
+  let isReadOnly = $7.derived(() => readOnly() || readonly());
+  let gridContainer = $7.state(null);
+  let resizingColId = $7.state(null);
+  let resizeStartX = $7.state(0);
+  let resizeStartWidth = $7.state(0);
+  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 ($7.get(isReadOnly)) return;
+    const col = sheetState().document.columns[cIdx];
+    if (col?.readOnly) return;
+    sheetState().startEditing(rIdx, cIdx);
+  }
+  function handleKeyDown(e) {
+    if (sheetState().editingCell) {
+      if (e.key === "Escape") {
+        sheetState().cancelEditing();
+      } else if (e.key === "Enter") {
+        sheetState().commitEditing();
+        sheetState().moveCursor("down");
+      } 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 (!$7.get(isReadOnly) && !col?.readOnly) {
+        sheetState().startEditing();
+      }
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      if ($7.get(isReadOnly)) 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 (!$7.get(isReadOnly) && 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);
+  {
+    var consequent = ($$anchor2) => {
+      FormulaBar($$anchor2, {
+        get sheetState() {
+          return sheetState();
+        }
+      });
+    };
+    $7.if(node, ($$render) => {
+      if (showFormulaBar()) $$render(consequent);
+    });
+  }
+  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_1 = ($$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_1);
+    });
+  }
+  $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_2 = ($$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_3 = ($$anchor4) => {
+          const cellArg = $7.derived(() => Object.assign({ row: $7.get(row), col: $7.get(col), cell: $7.get(cell) }, $7.get(cell)));
+          var fragment_1 = $7.comment();
+          var node_5 = $7.first_child(fragment_1);
+          $7.snippet(node_5, () => $$props.customCellRenderer, () => $7.get(cellArg), () => $7.get(col), () => $7.get(row));
+          $7.append($$anchor4, fragment_1);
+        };
+        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_2);
+          else if ($$props.customCellRenderer) $$render(consequent_3, 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_4 = ($$anchor3) => {
+        var td_2 = root_5();
+        $7.append($$anchor3, td_2);
+      };
+      $7.if(node_6, ($$render) => {
+        if ($$props.onAddColumnClick) $$render(consequent_4);
+      });
+    }
+    $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.template_effect(() => $7.set_class(div, 1, `flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs ${className() ?? ""}`));
+  $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;
@@ -224,8 +707,11 @@ var TemplateRenderer2 = TemplateRenderer;
 export {
   BubbleMenu2 as BubbleMenu,
   EditableTextNodeEditor2 as EditableTextNodeEditor,
+  FormulaBar,
+  SpreadsheetEditor,
   TemplateRenderer2 as TemplateRenderer,
   createReactiveEditor,
+  createReactiveSpreadsheet,
   initiateEditor
 };
 //# sourceMappingURL=index.js.map