@pixerate/editor-svelte 0.2.5 → 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

@@ -217,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;
@@ -224,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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/EditableTextNodeEditor.svelte","../src/editor.svelte.ts","../src/BubbleMenu.svelte","../src/TemplateRenderer.svelte","../src/index.ts"],"sourcesContent":["import 'EditableTextNodeEditor.svelte.css';import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { onDestroy, onMount } from \"svelte\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { initiateEditor } from \"./editor.svelte\";\n\nvar root = $.from_html(`<div class=\"flex items-center justify-center p-4 text-sm text-gray-500\">Loading editor...</div>`);\nvar root_1 = $.from_html(`<div draggable=\"false\"><!> <div class=\"pixerate-editor-content prose w-full max-w-none focus:outline-none\"></div></div>`);\n\nexport default function EditableTextNodeEditor($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.prop($$props, 'class', 3, \"\"),\n\t\tcontent = $.prop($$props, 'content', 3, undefined),\n\t\tshowMenu = $.prop($$props, 'showMenu', 3, true),\n\t\teditable = $.prop($$props, 'editable', 3, true),\n\t\teditor = $.prop($$props, 'editor', 15),\n\t\textensions = $.prop($$props, 'extensions', 19, () => []),\n\t\tplaceholder = $.prop($$props, 'placeholder', 3, \"\");\n\n\tlet element = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif (editor() && editor().isEditable !== editable()) {\n\t\t\teditor().setEditable(editable());\n\t\t}\n\t});\n\n\tonMount(() => {\n\t\teditor(initiateEditor(\n\t\t\t$.get(element),\n\t\t\tcontent(),\n\t\t\t[\n\t\t\t\tPlaceholder.configure({ placeholder: placeholder() }),\n\t\t\t\t...extensions()\n\t\t\t],\n\t\t\t{\n\t\t\t\teditable: editable(),\n\t\t\t\tonCreate: $$props.onCreate,\n\t\t\t\tonUpdate: $$props.onUpdate,\n\t\t\t\tonFocus() {\n\t\t\t\t\tif ($$props.onFocus) $$props.onFocus();\n\t\t\t\t},\n\n\t\t\t\tonBlur() {\n\t\t\t\t\tif ($$props.onBlur) $$props.onBlur();\n\t\t\t\t}\n\t\t\t}\n\t\t));\n\t});\n\n\tonDestroy(() => {\n\t\tif (editor()) {\n\t\t\teditor().destroy();\n\t\t}\n\t});\n\n\tvar div = root_1();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar div_1 = root();\n\n\t\t\t$.append($$anchor, div_1);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif (!editor()) $$render(consequent);\n\t\t});\n\t}\n\n\tvar div_2 = $.sibling(node, 2);\n\n\t$.bind_this(div_2, ($$value) => $.set(element, $$value), () => $.get(element));\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, `pixerate-editor-container ${className()}`));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import { Editor } from \"@tiptap/core\";\nimport { createRichTextPreset } from \"@pixerate/editor\";\nexport const initiateEditor = (element, content, extensions, options) => {\n  const { richTextOptions, ...editorOptions } = options || {};\n  const defaultPreset = createRichTextPreset(richTextOptions);\n  const editor = new Editor({\n    element,\n    content,\n    extensions: [\n      ...defaultPreset,\n      ...extensions ?? []\n    ],\n    autofocus: true,\n    ...editorOptions\n  });\n  return editor;\n};\nexport function createReactiveEditor(initialContent = \"\", extensions = [], options = {}) {\n  let editorInstance;\n  return {\n    get current() {\n      return editorInstance;\n    },\n    mount(element) {\n      editorInstance = initiateEditor(element, initialContent, extensions, options);\n      return editorInstance;\n    },\n    destroy() {\n      if (editorInstance) {\n        editorInstance.destroy();\n        editorInstance = void 0;\n      }\n    }\n  };\n}\n","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { BubbleMenuPlugin } from \"@tiptap/extension-bubble-menu\";\n\nvar root = $.from_html(`<div style=\"visibility: hidden;\"><!></div>`);\n\nexport default function BubbleMenu($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.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\"),\n\t\tpluginKey = $.prop($$props, 'pluginKey', 3, \"bubbleMenu\"),\n\t\tshouldShow = $.prop($$props, 'shouldShow', 3, null),\n\t\tupdateDelay = $.prop($$props, 'updateDelay', 3, 250),\n\t\ttippyOptions = $.prop($$props, 'tippyOptions', 19, () => ({}));\n\n\tlet menuElement = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif ($$props.editor && $.get(menuElement)) {\n\t\t\tconst plugin = BubbleMenuPlugin({\n\t\t\t\tpluginKey: pluginKey(),\n\t\t\t\teditor: $$props.editor,\n\t\t\t\telement: $.get(menuElement),\n\t\t\t\ttippyOptions: {\n\t\t\t\t\tduration: 100,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\t...tippyOptions()\n\t\t\t\t},\n\t\t\t\tshouldShow: shouldShow(),\n\t\t\t\tupdateDelay: updateDelay()\n\t\t\t});\n\n\t\t\t$$props.editor.registerPlugin(plugin);\n\n\t\t\treturn () => {\n\t\t\t\t$$props.editor.unregisterPlugin(pluginKey());\n\t\t\t};\n\t\t}\n\t});\n\n\tvar div = root();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar fragment = $.comment();\n\t\t\tvar node_1 = $.first_child(fragment);\n\n\t\t\t$.snippet(node_1, () => $$props.children);\n\t\t\t$.append($$anchor, fragment);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif ($$props.children) $$render(consequent);\n\t\t});\n\t}\n\n\t$.reset(div);\n\t$.bind_this(div, ($$value) => $.set(menuElement, $$value), () => $.get(menuElement));\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { tokenizePrompt, resolveTemplates } from \"@pixerate/editor\";\n\nvar root = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all\"> </span>`);\nvar root_1 = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 hover:brightness-110 cursor-pointer transition-all\"> </span>`);\nvar root_2 = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600\"> </span>`);\nvar root_3 = $.from_html(`<span> </span>`);\nvar root_4 = $.from_html(`<div></div>`);\n\nexport default function TemplateRenderer($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet templates = $.prop($$props, 'templates', 19, () => []),\n\t\tresolve = $.prop($$props, 'resolve', 3, false),\n\t\tclassName = $.prop($$props, 'class', 3, \"font-mono text-sm leading-relaxed whitespace-pre-wrap break-words\");\n\n\tlet displayText = $.derived(() => resolve() && templates().length > 0\n\t\t? resolveTemplates($$props.content, templates())\n\t\t: $$props.content);\n\n\tlet tokens = $.derived(() => tokenizePrompt($.get(displayText)));\n\tvar div = root_4();\n\n\t$.each(div, 21, () => $.get(tokens), $.index, ($$anchor, token) => {\n\t\tvar fragment = $.comment();\n\t\tvar node = $.first_child(fragment);\n\n\t\t{\n\t\t\tvar consequent = ($$anchor) => {\n\t\t\t\tconst colors = $.derived(() => $$props.templateColorMap?.get($.get(token).value) || { from: \"#f43f5e\", to: \"#8b5cf6\" });\n\t\t\t\tvar span = root();\n\t\t\t\tvar text = $.only_child(span, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_style(span, `--color-from: ${$.get(colors).from}; --color-to: ${$.get(colors).to};`);\n\t\t\t\t\t$.set_attribute(span, 'title', `Template: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text, `{{${$.get(token).value}}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span, () => $$props.onTemplateClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span);\n\t\t\t};\n\n\t\t\tvar consequent_1 = ($$anchor) => {\n\t\t\t\tvar span_1 = root_1();\n\t\t\t\tvar text_1 = $.only_child(span_1, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_1, 'title', `Variable: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_1, `{${$.get(token).value}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span_1, () => $$props.onVariableClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span_1);\n\t\t\t};\n\n\t\t\tvar consequent_2 = ($$anchor) => {\n\t\t\t\tvar span_2 = root_2();\n\t\t\t\tvar text_2 = $.only_child(span_2, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_2, 'title', `Instruction: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_2, `__${$.get(token).value}__`);\n\t\t\t\t});\n\n\t\t\t\t$.append($$anchor, span_2);\n\t\t\t};\n\n\t\t\tvar alternate = ($$anchor) => {\n\t\t\t\tvar span_3 = root_3();\n\t\t\t\tvar text_3 = $.only_child(span_3, true);\n\n\t\t\t\t$.template_effect(() => $.set_text(text_3, $.get(token).value));\n\t\t\t\t$.append($$anchor, span_3);\n\t\t\t};\n\n\t\t\t$.if(node, ($$render) => {\n\t\t\t\tif ($.get(token).type === \"template\") $$render(consequent); else if ($.get(token).type === \"variable\") $$render(consequent_1, 1); else if ($.get(token).type === \"instruction\") $$render(consequent_2, 2); else $$render(alternate, -1);\n\t\t\t});\n\t\t}\n\n\t\t$.append($$anchor, fragment);\n\t});\n\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}\n\n$.delegate(['click']);","import type { Component } from \"svelte\";\nimport type { Editor, Content, Extensions } from \"@tiptap/core\";\nimport type { Template, ColorGradient } from \"@pixerate/editor\";\n\nimport EditableTextNodeEditorComponent from \"./EditableTextNodeEditor.svelte\";\nimport BubbleMenuComponent from \"./BubbleMenu.svelte\";\nimport TemplateRendererComponent from \"./TemplateRenderer.svelte\";\n\nexport * from \"./editor.svelte\";\n\nexport interface EditableTextNodeEditorProps {\n  class?: string;\n  content?: Content;\n  showMenu?: boolean;\n  editable?: boolean;\n  editor?: Editor;\n  extensions?: Extensions;\n  onUpdate?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onCreate?: () => void;\n  placeholder?: string;\n}\n\nexport interface BubbleMenuProps {\n  editor?: Editor;\n  class?: string;\n  children?: any;\n}\n\nexport interface TemplateRendererProps {\n  content: string;\n  templates?: Template[];\n  templateColorMap?: Map<string, ColorGradient>;\n  resolve?: boolean;\n  class?: string;\n  onTemplateClick?: (templateName: string) => void;\n  onVariableClick?: (variableName: string) => void;\n}\n\nexport const EditableTextNodeEditor = EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;\nexport const BubbleMenu = BubbleMenuComponent as unknown as Component<BubbleMenuProps>;\nexport const TemplateRenderer = TemplateRendererComponent as unknown as Component<TemplateRendererProps>;\n\nexport type {\n  Template,\n  TemplateVersion,\n  Token,\n  TokenType,\n  ColorGradient,\n  RichTextPresetOptions,\n} from \"@pixerate/editor\";\n"],"mappings":";AAA2C,OAAO;AAClD,YAAYA,QAAO;AACnB,SAAS,WAAW,eAAe;AACnC,OAAO,iBAAiB;;;;ACHxB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAC9B,IAAM,iBAAc,CAAI,SAAS,SAAS,YAAY,YAAY;AACvE,QAAM,EAAE,iBAAe,GAAK,cAAa,IAAK,WAAO,CAAA;AACrD,QAAM,gBAAgB,qBAAqB,eAAe;AAC1D,QAAM,SAAS,IAAI,OAAM;IACvB;IACA;IACA,YAAU,CAAA,GACL,eAAa,GACb,cAAU,CAAA,CAAA;IAEf,WAAW;OACR;;AAEL,SAAO;AACT;AACO,SAAS,qBAAqB,iBAAiB,IAAI,aAAU,CAAA,GAAO,UAAO,CAAA,GAAO;AACvF,MAAI;AACJ,SAAM;IACJ,IAAI,UAAU;AACZ,aAAO;IACT;IACA,MAAM,SAAS;AACb,uBAAiB,eAAe,SAAS,gBAAgB,YAAY,OAAO;AAC5E,aAAO;IACT;IACA,UAAU;AACR,UAAI,gBAAgB;AAClB,uBAAe,QAAO;AACtB,yBAAc;MAChB;IACF;;AAEJ;;;AD5BA,IAAI,OAAS,aAAU,iGAAiG;AACxH,IAAI,SAAW,aAAU,yHAAyH;AAEnI,SAAR,uBAAwC,UAAU,SAAS;AACjE,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,SAAS,GAAG,EAAE,GAC7C,UAAY,QAAK,SAAS,WAAW,GAAG,MAAS,GACjD,WAAa,QAAK,SAAS,YAAY,GAAG,IAAI,GAC9C,WAAa,QAAK,SAAS,YAAY,GAAG,IAAI,GAC9C,SAAW,QAAK,SAAS,UAAU,EAAE,GACrC,aAAe,QAAK,SAAS,cAAc,IAAI,MAAM,CAAC,CAAC,GACvD,cAAgB,QAAK,SAAS,eAAe,GAAG,EAAE;AAEnD,MAAI,UAAY,SAAM,MAAM;AAE5B,EAAE,eAAY,MAAM;AACnB,QAAI,OAAO,KAAK,OAAO,EAAE,eAAe,SAAS,GAAG;AACnD,aAAO,EAAE,YAAY,SAAS,CAAC;AAAA,IAChC;AAAA,EACD,CAAC;AAED,UAAQ,MAAM;AACb,WAAO;AAAA,MACJ,OAAI,OAAO;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,QACC,YAAY,UAAU,EAAE,aAAa,YAAY,EAAE,CAAC;AAAA,QACpD,GAAG,WAAW;AAAA,MACf;AAAA,MACA;AAAA,QACC,UAAU,SAAS;AAAA,QACnB,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,QAClB,UAAU;AACT,cAAI,QAAQ,QAAS,SAAQ,QAAQ;AAAA,QACtC;AAAA,QAEA,SAAS;AACR,cAAI,QAAQ,OAAQ,SAAQ,OAAO;AAAA,QACpC;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACf,QAAI,OAAO,GAAG;AACb,aAAO,EAAE,QAAQ;AAAA,IAClB;AAAA,EACD,CAAC;AAED,MAAI,MAAM,OAAO;AACjB,MAAI,OAAS,SAAM,GAAG;AAEtB;AACC,QAAI,aAAa,CAACC,cAAa;AAC9B,UAAI,QAAQ,KAAK;AAEjB,MAAE,UAAOA,WAAU,KAAK;AAAA,IACzB;AAEA,IAAE,MAAG,MAAM,CAAC,aAAa;AACxB,UAAI,CAAC,OAAO,EAAG,UAAS,UAAU;AAAA,IACnC,CAAC;AAAA,EACF;AAEA,MAAI,QAAU,WAAQ,MAAM,CAAC;AAE7B,EAAE,aAAU,OAAO,CAAC,YAAc,OAAI,SAAS,OAAO,GAAG,MAAQ,OAAI,OAAO,CAAC;AAC7E,EAAE,SAAM,GAAG;AACX,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAG,6BAA6B,UAAU,CAAC,EAAE,CAAC;AACvF,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;;;AE/EA,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,wBAAwB;AAEjC,IAAIC,QAAS,aAAU,4CAA4C;AAEpD,SAAR,WAA4B,UAAU,SAAS;AACrD,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,SAAS,GAAG,8FAA8F,GACzI,YAAc,QAAK,SAAS,aAAa,GAAG,YAAY,GACxD,aAAe,QAAK,SAAS,cAAc,GAAG,IAAI,GAClD,cAAgB,QAAK,SAAS,eAAe,GAAG,GAAG,GACnD,eAAiB,QAAK,SAAS,gBAAgB,IAAI,OAAO,CAAC,EAAE;AAE9D,MAAI,cAAgB,SAAM,MAAM;AAEhC,EAAE,eAAY,MAAM;AACnB,QAAI,QAAQ,UAAY,OAAI,WAAW,GAAG;AACzC,YAAM,SAAS,iBAAiB;AAAA,QAC/B,WAAW,UAAU;AAAA,QACrB,QAAQ,QAAQ;AAAA,QAChB,SAAW,OAAI,WAAW;AAAA,QAC1B,cAAc;AAAA,UACb,UAAU;AAAA,UACV,UAAU,MAAM,SAAS;AAAA,UACzB,GAAG,aAAa;AAAA,QACjB;AAAA,QACA,YAAY,WAAW;AAAA,QACvB,aAAa,YAAY;AAAA,MAC1B,CAAC;AAED,cAAQ,OAAO,eAAe,MAAM;AAEpC,aAAO,MAAM;AACZ,gBAAQ,OAAO,iBAAiB,UAAU,CAAC;AAAA,MAC5C;AAAA,IACD;AAAA,EACD,CAAC;AAED,MAAI,MAAMA,MAAK;AACf,MAAI,OAAS,SAAM,GAAG;AAEtB;AACC,QAAI,aAAa,CAACC,cAAa;AAC9B,UAAI,WAAa,WAAQ;AACzB,UAAI,SAAW,eAAY,QAAQ;AAEnC,MAAE,WAAQ,QAAQ,MAAM,QAAQ,QAAQ;AACxC,MAAE,UAAOA,WAAU,QAAQ;AAAA,IAC5B;AAEA,IAAE,MAAG,MAAM,CAAC,aAAa;AACxB,UAAI,QAAQ,SAAU,UAAS,UAAU;AAAA,IAC1C,CAAC;AAAA,EACF;AAEA,EAAE,SAAM,GAAG;AACX,EAAE,aAAU,KAAK,CAAC,YAAc,OAAI,aAAa,OAAO,GAAG,MAAQ,OAAI,WAAW,CAAC;AACnF,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAK,QAAK,UAAU,CAAC,CAAC,CAAC;AAChE,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;;;AC9DA,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,gBAAgB,wBAAwB;AAEjD,IAAIC,QAAS,aAAU,yRAAyR;AAChT,IAAIC,UAAW,aAAU,qNAAqN;AAC9O,IAAI,SAAW,aAAU,mKAAmK;AAC5L,IAAI,SAAW,aAAU,gBAAgB;AACzC,IAAI,SAAW,aAAU,aAAa;AAEvB,SAAR,iBAAkC,UAAU,SAAS;AAC3D,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,aAAa,IAAI,MAAM,CAAC,CAAC,GACxD,UAAY,QAAK,SAAS,WAAW,GAAG,KAAK,GAC7C,YAAc,QAAK,SAAS,SAAS,GAAG,mEAAmE;AAE5G,MAAI,cAAgB,WAAQ,MAAM,QAAQ,KAAK,UAAU,EAAE,SAAS,IACjE,iBAAiB,QAAQ,SAAS,UAAU,CAAC,IAC7C,QAAQ,OAAO;AAElB,MAAI,SAAW,WAAQ,MAAM,eAAiB,OAAI,WAAW,CAAC,CAAC;AAC/D,MAAI,MAAM,OAAO;AAEjB,EAAE,QAAK,KAAK,IAAI,MAAQ,OAAI,MAAM,GAAK,UAAO,CAACC,WAAU,UAAU;AAClE,QAAI,WAAa,WAAQ;AACzB,QAAI,OAAS,eAAY,QAAQ;AAEjC;AACC,UAAI,aAAa,CAACA,cAAa;AAC9B,cAAM,SAAW,WAAQ,MAAM,QAAQ,kBAAkB,IAAM,OAAI,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,WAAW,IAAI,UAAU,CAAC;AACtH,YAAI,OAAOF,MAAK;AAChB,YAAI,OAAS,cAAW,MAAM,IAAI;AAElC,QAAE,mBAAgB,MAAM;AACvB,UAAE,aAAU,MAAM,iBAAmB,OAAI,MAAM,EAAE,IAAI,iBAAmB,OAAI,MAAM,EAAE,EAAE,GAAG;AACzF,UAAE,iBAAc,MAAM,SAAS,aAAe,OAAI,KAAK,EAAE,KAAK,EAAE;AAChE,UAAE,YAAS,MAAM,KAAO,OAAI,KAAK,EAAE,KAAK,IAAI;AAAA,QAC7C,CAAC;AAED,QAAE,aAAU,SAAS,MAAM,MAAM,QAAQ,kBAAoB,OAAI,KAAK,EAAE,KAAK,CAAC;AAC9E,QAAE,UAAOE,WAAU,IAAI;AAAA,MACxB;AAEA,UAAI,eAAe,CAACA,cAAa;AAChC,YAAI,SAASD,QAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAM;AACvB,UAAE,iBAAc,QAAQ,SAAS,aAAe,OAAI,KAAK,EAAE,KAAK,EAAE;AAClE,UAAE,YAAS,QAAQ,IAAM,OAAI,KAAK,EAAE,KAAK,GAAG;AAAA,QAC7C,CAAC;AAED,QAAE,aAAU,SAAS,QAAQ,MAAM,QAAQ,kBAAoB,OAAI,KAAK,EAAE,KAAK,CAAC;AAChF,QAAE,UAAOC,WAAU,MAAM;AAAA,MAC1B;AAEA,UAAI,eAAe,CAACA,cAAa;AAChC,YAAI,SAAS,OAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAM;AACvB,UAAE,iBAAc,QAAQ,SAAS,gBAAkB,OAAI,KAAK,EAAE,KAAK,EAAE;AACrE,UAAE,YAAS,QAAQ,KAAO,OAAI,KAAK,EAAE,KAAK,IAAI;AAAA,QAC/C,CAAC;AAED,QAAE,UAAOA,WAAU,MAAM;AAAA,MAC1B;AAEA,UAAI,YAAY,CAACA,cAAa;AAC7B,YAAI,SAAS,OAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAQ,YAAS,QAAU,OAAI,KAAK,EAAE,KAAK,CAAC;AAC9D,QAAE,UAAOA,WAAU,MAAM;AAAA,MAC1B;AAEA,MAAE,MAAG,MAAM,CAAC,aAAa;AACxB,YAAM,OAAI,KAAK,EAAE,SAAS,WAAY,UAAS,UAAU;AAAA,iBAAc,OAAI,KAAK,EAAE,SAAS,WAAY,UAAS,cAAc,CAAC;AAAA,iBAAc,OAAI,KAAK,EAAE,SAAS,cAAe,UAAS,cAAc,CAAC;AAAA,YAAQ,UAAS,WAAW,EAAE;AAAA,MACvO,CAAC;AAAA,IACF;AAEA,IAAE,UAAOA,WAAU,QAAQ;AAAA,EAC5B,CAAC;AAED,EAAE,SAAM,GAAG;AACX,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAK,QAAK,UAAU,CAAC,CAAC,CAAC;AAChE,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;AAEE,YAAS,CAAC,OAAO,CAAC;;;ACnDb,IAAMC,0BAAyB;AAC/B,IAAMC,cAAa;AACnB,IAAMC,oBAAmB;","names":["$","$$anchor","$","root","$$anchor","$","root","root_1","$$anchor","EditableTextNodeEditor","BubbleMenu","TemplateRenderer"]}
+{"version":3,"sources":["../src/EditableTextNodeEditor.svelte","../src/editor.svelte.ts","../src/BubbleMenu.svelte","../src/TemplateRenderer.svelte","../src/spreadsheet/SpreadsheetEditor.svelte","../src/spreadsheet/FormulaBar.svelte","../src/spreadsheet/spreadsheet.svelte.ts","../src/index.ts"],"sourcesContent":["import 'EditableTextNodeEditor.svelte.css';import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { onDestroy, onMount } from \"svelte\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { initiateEditor } from \"./editor.svelte\";\n\nvar root = $.from_html(`<div class=\"flex items-center justify-center p-4 text-sm text-gray-500\">Loading editor...</div>`);\nvar root_1 = $.from_html(`<div draggable=\"false\"><!> <div class=\"pixerate-editor-content prose w-full max-w-none focus:outline-none\"></div></div>`);\n\nexport default function EditableTextNodeEditor($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.prop($$props, 'class', 3, \"\"),\n\t\tcontent = $.prop($$props, 'content', 3, undefined),\n\t\tshowMenu = $.prop($$props, 'showMenu', 3, true),\n\t\teditable = $.prop($$props, 'editable', 3, true),\n\t\teditor = $.prop($$props, 'editor', 15),\n\t\textensions = $.prop($$props, 'extensions', 19, () => []),\n\t\tplaceholder = $.prop($$props, 'placeholder', 3, \"\");\n\n\tlet element = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif (editor() && editor().isEditable !== editable()) {\n\t\t\teditor().setEditable(editable());\n\t\t}\n\t});\n\n\tonMount(() => {\n\t\teditor(initiateEditor(\n\t\t\t$.get(element),\n\t\t\tcontent(),\n\t\t\t[\n\t\t\t\tPlaceholder.configure({ placeholder: placeholder() }),\n\t\t\t\t...extensions()\n\t\t\t],\n\t\t\t{\n\t\t\t\teditable: editable(),\n\t\t\t\tonCreate: $$props.onCreate,\n\t\t\t\tonUpdate: $$props.onUpdate,\n\t\t\t\tonFocus() {\n\t\t\t\t\tif ($$props.onFocus) $$props.onFocus();\n\t\t\t\t},\n\n\t\t\t\tonBlur() {\n\t\t\t\t\tif ($$props.onBlur) $$props.onBlur();\n\t\t\t\t}\n\t\t\t}\n\t\t));\n\t});\n\n\tonDestroy(() => {\n\t\tif (editor()) {\n\t\t\teditor().destroy();\n\t\t}\n\t});\n\n\tvar div = root_1();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar div_1 = root();\n\n\t\t\t$.append($$anchor, div_1);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif (!editor()) $$render(consequent);\n\t\t});\n\t}\n\n\tvar div_2 = $.sibling(node, 2);\n\n\t$.bind_this(div_2, ($$value) => $.set(element, $$value), () => $.get(element));\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, `pixerate-editor-container ${className()}`));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import { Editor } from \"@tiptap/core\";\nimport { createRichTextPreset } from \"@pixerate/editor\";\nexport const initiateEditor = (element, content, extensions, options) => {\n  const { richTextOptions, ...editorOptions } = options || {};\n  const defaultPreset = createRichTextPreset(richTextOptions);\n  const editor = new Editor({\n    element,\n    content,\n    extensions: [\n      ...defaultPreset,\n      ...extensions ?? []\n    ],\n    autofocus: true,\n    ...editorOptions\n  });\n  return editor;\n};\nexport function createReactiveEditor(initialContent = \"\", extensions = [], options = {}) {\n  let editorInstance;\n  return {\n    get current() {\n      return editorInstance;\n    },\n    mount(element) {\n      editorInstance = initiateEditor(element, initialContent, extensions, options);\n      return editorInstance;\n    },\n    destroy() {\n      if (editorInstance) {\n        editorInstance.destroy();\n        editorInstance = void 0;\n      }\n    }\n  };\n}\n","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { BubbleMenuPlugin } from \"@tiptap/extension-bubble-menu\";\n\nvar root = $.from_html(`<div style=\"visibility: hidden;\"><!></div>`);\n\nexport default function BubbleMenu($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet className = $.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\"),\n\t\tpluginKey = $.prop($$props, 'pluginKey', 3, \"bubbleMenu\"),\n\t\tshouldShow = $.prop($$props, 'shouldShow', 3, null),\n\t\tupdateDelay = $.prop($$props, 'updateDelay', 3, 250),\n\t\ttippyOptions = $.prop($$props, 'tippyOptions', 19, () => ({}));\n\n\tlet menuElement = $.state(void 0);\n\n\t$.user_effect(() => {\n\t\tif ($$props.editor && $.get(menuElement)) {\n\t\t\tconst plugin = BubbleMenuPlugin({\n\t\t\t\tpluginKey: pluginKey(),\n\t\t\t\teditor: $$props.editor,\n\t\t\t\telement: $.get(menuElement),\n\t\t\t\ttippyOptions: {\n\t\t\t\t\tduration: 100,\n\t\t\t\t\tappendTo: () => document.body,\n\t\t\t\t\t...tippyOptions()\n\t\t\t\t},\n\t\t\t\tshouldShow: shouldShow(),\n\t\t\t\tupdateDelay: updateDelay()\n\t\t\t});\n\n\t\t\t$$props.editor.registerPlugin(plugin);\n\n\t\t\treturn () => {\n\t\t\t\t$$props.editor.unregisterPlugin(pluginKey());\n\t\t\t};\n\t\t}\n\t});\n\n\tvar div = root();\n\tvar node = $.child(div);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar fragment = $.comment();\n\t\t\tvar node_1 = $.first_child(fragment);\n\n\t\t\t$.snippet(node_1, () => $$props.children);\n\t\t\t$.append($$anchor, fragment);\n\t\t};\n\n\t\t$.if(node, ($$render) => {\n\t\t\tif ($$props.children) $$render(consequent);\n\t\t});\n\t}\n\n\t$.reset(div);\n\t$.bind_this(div, ($$value) => $.set(menuElement, $$value), () => $.get(menuElement));\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { tokenizePrompt, resolveTemplates } from \"@pixerate/editor\";\n\nvar root = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-semibold rounded-md border border-[var(--color-to)]/40 bg-gradient-to-r from-[var(--color-from)]/15 to-[var(--color-to)]/15 text-[var(--color-to)] hover:brightness-110 cursor-pointer transition-all\"> </span>`);\nvar root_1 = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs font-medium rounded-md border border-violet-400/40 bg-violet-400/15 text-violet-600 hover:brightness-110 cursor-pointer transition-all\"> </span>`);\nvar root_2 = $.from_html(`<span class=\"inline-flex items-center px-1.5 py-0.5 mx-0.5 text-xs italic font-medium rounded-md border border-rose-400/40 bg-rose-400/15 text-rose-600\"> </span>`);\nvar root_3 = $.from_html(`<span> </span>`);\nvar root_4 = $.from_html(`<div></div>`);\n\nexport default function TemplateRenderer($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet templates = $.prop($$props, 'templates', 19, () => []),\n\t\tresolve = $.prop($$props, 'resolve', 3, false),\n\t\tclassName = $.prop($$props, 'class', 3, \"font-mono text-sm leading-relaxed whitespace-pre-wrap break-words\");\n\n\tlet displayText = $.derived(() => resolve() && templates().length > 0\n\t\t? resolveTemplates($$props.content, templates())\n\t\t: $$props.content);\n\n\tlet tokens = $.derived(() => tokenizePrompt($.get(displayText)));\n\tvar div = root_4();\n\n\t$.each(div, 21, () => $.get(tokens), $.index, ($$anchor, token) => {\n\t\tvar fragment = $.comment();\n\t\tvar node = $.first_child(fragment);\n\n\t\t{\n\t\t\tvar consequent = ($$anchor) => {\n\t\t\t\tconst colors = $.derived(() => $$props.templateColorMap?.get($.get(token).value) || { from: \"#f43f5e\", to: \"#8b5cf6\" });\n\t\t\t\tvar span = root();\n\t\t\t\tvar text = $.only_child(span, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_style(span, `--color-from: ${$.get(colors).from}; --color-to: ${$.get(colors).to};`);\n\t\t\t\t\t$.set_attribute(span, 'title', `Template: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text, `{{${$.get(token).value}}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span, () => $$props.onTemplateClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span);\n\t\t\t};\n\n\t\t\tvar consequent_1 = ($$anchor) => {\n\t\t\t\tvar span_1 = root_1();\n\t\t\t\tvar text_1 = $.only_child(span_1, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_1, 'title', `Variable: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_1, `{${$.get(token).value}}`);\n\t\t\t\t});\n\n\t\t\t\t$.delegated('click', span_1, () => $$props.onVariableClick?.($.get(token).value));\n\t\t\t\t$.append($$anchor, span_1);\n\t\t\t};\n\n\t\t\tvar consequent_2 = ($$anchor) => {\n\t\t\t\tvar span_2 = root_2();\n\t\t\t\tvar text_2 = $.only_child(span_2, true);\n\n\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t$.set_attribute(span_2, 'title', `Instruction: ${$.get(token).value}`);\n\t\t\t\t\t$.set_text(text_2, `__${$.get(token).value}__`);\n\t\t\t\t});\n\n\t\t\t\t$.append($$anchor, span_2);\n\t\t\t};\n\n\t\t\tvar alternate = ($$anchor) => {\n\t\t\t\tvar span_3 = root_3();\n\t\t\t\tvar text_3 = $.only_child(span_3, true);\n\n\t\t\t\t$.template_effect(() => $.set_text(text_3, $.get(token).value));\n\t\t\t\t$.append($$anchor, span_3);\n\t\t\t};\n\n\t\t\t$.if(node, ($$render) => {\n\t\t\t\tif ($.get(token).type === \"template\") $$render(consequent); else if ($.get(token).type === \"variable\") $$render(consequent_1, 1); else if ($.get(token).type === \"instruction\") $$render(consequent_2, 2); else $$render(alternate, -1);\n\t\t\t});\n\t\t}\n\n\t\t$.append($$anchor, fragment);\n\t});\n\n\t$.reset(div);\n\t$.template_effect(() => $.set_class(div, 1, $.clsx(className())));\n\t$.append($$anchor, div);\n\t$.pop();\n}\n\n$.delegate(['click']);","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { indexToColName } from '@pixerate/editor';\nimport FormulaBar from './FormulaBar.svelte';\nimport { createReactiveSpreadsheet } from './spreadsheet.svelte';\n\nvar root = $.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>`);\nvar root_1 = $.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>`);\nvar root_2 = $.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\"/>`);\nvar root_3 = $.from_html(`<span> </span>`);\nvar root_4 = $.from_html(`<td><!></td>`);\nvar root_5 = $.from_html(`<td class=\"w-10 min-w-[2.5rem] bg-muted/10 border-r border-border\"></td>`);\nvar root_6 = $.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>`);\nvar root_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>`);\n\nexport default function SpreadsheetEditor($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet sheetState = $.prop($$props, 'sheetState', 23, createReactiveSpreadsheet),\n\t\treadOnly = $.prop($$props, 'readOnly', 3, false);\n\n\tlet gridContainer = $.state(null);\n\tlet resizingColId = $.state(null);\n\tlet resizeStartX = $.state(0);\n\tlet resizeStartWidth = $.state(0);\n\n\t// Active cell formula bar binding\n\tlet activeRawValue = $.derived(() => {\n\t\tif (!sheetState().activeCell) return '';\n\n\t\tconst row = sheetState().document.rows[sheetState().activeCell.row];\n\t\tconst col = sheetState().document.columns[sheetState().activeCell.col];\n\n\t\tif (!row || !col) return '';\n\n\t\treturn sheetState().getCell(row.id, col.id).raw;\n\t});\n\n\tfunction handleCellClick(rIdx, cIdx, e) {\n\t\tif (sheetState().editingCell && (sheetState().editingCell.row !== rIdx || sheetState().editingCell.col !== cIdx)) {\n\t\t\tsheetState().commitEditing();\n\t\t}\n\n\t\tsheetState().selectCell(rIdx, cIdx, e.shiftKey);\n\t}\n\n\tfunction handleCellDblClick(rIdx, cIdx) {\n\t\tif (readOnly()) return;\n\n\t\tconst col = sheetState().document.columns[cIdx];\n\n\t\tif (col?.readOnly) return;\n\n\t\tsheetState().startEditing(rIdx, cIdx);\n\t}\n\n\tfunction handleKeyDown(e) {\n\t\tif (sheetState().editingCell) {\n\t\t\tif (e.key === 'Enter') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsheetState().commitEditing();\n\t\t\t\tsheetState().moveCursor('down');\n\t\t\t} else if (e.key === 'Escape') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsheetState().cancelEditing();\n\t\t\t} else if (e.key === 'Tab') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsheetState().commitEditing();\n\t\t\t\tsheetState().moveCursor(e.shiftKey ? 'left' : 'right');\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (!sheetState().activeCell) return;\n\n\t\tif (e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tsheetState().moveCursor('up', e.shiftKey);\n\t\t} else if (e.key === 'ArrowDown') {\n\t\t\te.preventDefault();\n\t\t\tsheetState().moveCursor('down', e.shiftKey);\n\t\t} else if (e.key === 'ArrowLeft') {\n\t\t\te.preventDefault();\n\t\t\tsheetState().moveCursor('left', e.shiftKey);\n\t\t} else if (e.key === 'ArrowRight') {\n\t\t\te.preventDefault();\n\t\t\tsheetState().moveCursor('right', e.shiftKey);\n\t\t} else if (e.key === 'Tab') {\n\t\t\te.preventDefault();\n\t\t\tsheetState().moveCursor(e.shiftKey ? 'left' : 'right');\n\t\t} else if (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\n\t\t\tconst col = sheetState().document.columns[sheetState().activeCell.col];\n\n\t\t\tif (!readOnly() && !col?.readOnly) {\n\t\t\t\tsheetState().startEditing();\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' || e.key === 'Delete') {\n\t\t\tif (readOnly()) return;\n\n\t\t\tconst row = sheetState().document.rows[sheetState().activeCell.row];\n\t\t\tconst col = sheetState().document.columns[sheetState().activeCell.col];\n\n\t\t\tif (row && col && !col.readOnly) {\n\t\t\t\te.preventDefault();\n\t\t\t\tsheetState().setCellValue(row.id, col.id, '');\n\t\t\t}\n\t\t} else if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n\t\t\te.preventDefault();\n\n\t\t\tif (e.shiftKey) {\n\t\t\t\tsheetState().redo();\n\t\t\t} else {\n\t\t\t\tsheetState().undo();\n\t\t\t}\n\t\t} else if ((e.metaKey || e.ctrlKey) && e.key === 'c') {\n\t\t\te.preventDefault();\n\n\t\t\tconst tsv = sheetState().exportToTsv();\n\n\t\t\tnavigator.clipboard?.writeText(tsv);\n\t\t} else if (!readOnly() && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n\t\t\t// Direct typing into cell starts editing\n\t\t\tconst col = sheetState().document.columns[sheetState().activeCell.col];\n\n\t\t\tif (!col?.readOnly) {\n\t\t\t\tsheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, e.key);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleResizeStart(colId, width, e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\t$.set(resizingColId, colId, true);\n\t\t$.set(resizeStartX, e.clientX, true);\n\t\t$.set(resizeStartWidth, width, true);\n\n\t\tconst handleMouseMove = (moveEvent) => {\n\t\t\tif (!$.get(resizingColId)) return;\n\n\t\t\tconst delta = moveEvent.clientX - $.get(resizeStartX);\n\n\t\t\tsheetState().setColumnWidth($.get(resizingColId), Math.max(60, $.get(resizeStartWidth) + delta));\n\t\t};\n\n\t\tconst handleMouseUp = () => {\n\t\t\t$.set(resizingColId, null);\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('mouseup', handleMouseUp);\n\t\t};\n\n\t\twindow.addEventListener('mousemove', handleMouseMove);\n\t\twindow.addEventListener('mouseup', handleMouseUp);\n\t}\n\n\tfunction isCellSelected(rIdx, cIdx) {\n\t\tif (!sheetState().selectedRange) return false;\n\n\t\tconst minR = Math.min(sheetState().selectedRange.startRow, sheetState().selectedRange.endRow);\n\t\tconst maxR = Math.max(sheetState().selectedRange.startRow, sheetState().selectedRange.endRow);\n\t\tconst minC = Math.min(sheetState().selectedRange.startCol, sheetState().selectedRange.endCol);\n\t\tconst maxC = Math.max(sheetState().selectedRange.startCol, sheetState().selectedRange.endCol);\n\n\t\treturn rIdx >= minR && rIdx <= maxR && cIdx >= minC && cIdx <= maxC;\n\t}\n\n\tfunction isActiveCell(rIdx, cIdx) {\n\t\treturn sheetState().activeCell?.row === rIdx && sheetState().activeCell?.col === cIdx;\n\t}\n\n\tvar div = root_7();\n\tvar node = $.child(div);\n\n\t{\n\t\tlet $0 = $.derived(() => sheetState().editingCell ? sheetState().draftValue : $.get(activeRawValue));\n\n\t\tFormulaBar(node, {\n\t\t\tget activeCoord() {\n\t\t\t\treturn sheetState().activeCell;\n\t\t\t},\n\n\t\t\tget value() {\n\t\t\t\treturn $.get($0);\n\t\t\t},\n\n\t\t\tonChange: (val) => {\n\t\t\t\tif (sheetState().activeCell) {\n\t\t\t\t\tsheetState().draftValue = val;\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tonCommit: (val) => {\n\t\t\t\tif (sheetState().activeCell) {\n\t\t\t\t\tconst row = sheetState().document.rows[sheetState().activeCell.row];\n\t\t\t\t\tconst col = sheetState().document.columns[sheetState().activeCell.col];\n\n\t\t\t\t\tif (row && col) {\n\t\t\t\t\t\tsheetState().setCellValue(row.id, col.id, val);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tonCancel: () => {\n\t\t\t\tsheetState().cancelEditing();\n\t\t\t}\n\t\t});\n\t}\n\n\tvar div_1 = $.sibling(node, 2);\n\tvar table = $.child(div_1);\n\tvar thead = $.child(table);\n\tvar tr = $.child(thead);\n\tvar node_1 = $.sibling($.child(tr));\n\n\t$.each(node_1, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor, col) => {\n\t\tvar th = root();\n\t\tvar div_2 = $.child(th);\n\t\tvar span = $.child(div_2);\n\t\tvar text = $.only_child(span, true);\n\t\tvar span_1 = $.sibling(span, 2);\n\t\tvar text_1 = $.only_child(span_1);\n\n\t\t$.reset(div_2);\n\n\t\tvar div_3 = $.sibling(div_2, 2);\n\n\t\t$.reset(th);\n\n\t\t$.template_effect(() => {\n\t\t\t$.set_style(th, `width: ${($.get(col).width || 130) ?? ''}px; min-width: ${($.get(col).width || 130) ?? ''}px; max-width: ${($.get(col).width || 130) ?? ''}px;`);\n\t\t\t$.set_text(text, $.get(col).title);\n\t\t\t$.set_text(text_1, `(${$.get(col).key ?? ''})`);\n\t\t});\n\n\t\t$.delegated('click', th, () => $$props.onColumnHeaderClick?.($.get(col)));\n\t\t$.delegated('mousedown', div_3, (e) => handleResizeStart($.get(col).id, $.get(col).width || 130, e));\n\t\t$.append($$anchor, th);\n\t});\n\n\tvar node_2 = $.sibling(node_1);\n\n\t{\n\t\tvar consequent = ($$anchor) => {\n\t\t\tvar th_1 = root_1();\n\n\t\t\t$.delegated('click', th_1, function (...$$args) {\n\t\t\t\t$$props.onAddColumnClick?.apply(this, $$args);\n\t\t\t});\n\n\t\t\t$.append($$anchor, th_1);\n\t\t};\n\n\t\t$.if(node_2, ($$render) => {\n\t\t\tif ($$props.onAddColumnClick) $$render(consequent);\n\t\t});\n\t}\n\n\t$.reset(tr);\n\t$.reset(thead);\n\n\tvar tbody = $.sibling(thead);\n\n\t$.each(tbody, 23, () => sheetState().document.rows, (row) => row.id, ($$anchor, row, rIdx) => {\n\t\tvar tr_1 = root_6();\n\t\tvar td = $.child(tr_1);\n\t\tvar text_2 = $.only_child(td, true);\n\t\tvar node_3 = $.sibling(td);\n\n\t\t$.each(node_3, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor, col, cIdx) => {\n\t\t\tconst cell = $.derived(() => sheetState().getCell($.get(row).id, $.get(col).id));\n\t\t\tconst selected = $.derived(() => isCellSelected($.get(rIdx), $.get(cIdx)));\n\t\t\tconst active = $.derived(() => isActiveCell($.get(rIdx), $.get(cIdx)));\n\t\t\tconst isEditing = $.derived(() => sheetState().editingCell?.row === $.get(rIdx) && sheetState().editingCell?.col === $.get(cIdx));\n\t\t\tvar td_1 = root_4();\n\t\t\tvar node_4 = $.child(td_1);\n\n\t\t\t{\n\t\t\t\tvar consequent_1 = ($$anchor) => {\n\t\t\t\t\tvar input = root_2();\n\n\t\t\t\t\t$.remove_input_defaults(input);\n\t\t\t\t\t$.event('blur', input, () => sheetState().commitEditing());\n\t\t\t\t\t$.bind_value(input, () => sheetState().draftValue, ($$value) => sheetState().draftValue = $$value);\n\t\t\t\t\t$.append($$anchor, input);\n\t\t\t\t};\n\n\t\t\t\tvar consequent_2 = ($$anchor) => {\n\t\t\t\t\tvar fragment = $.comment();\n\t\t\t\t\tvar node_5 = $.first_child(fragment);\n\n\t\t\t\t\t$.snippet(node_5, () => $$props.customCellRenderer, () => ({ row: $.get(row), col: $.get(col), cell: $.get(cell) }));\n\t\t\t\t\t$.append($$anchor, fragment);\n\t\t\t\t};\n\n\t\t\t\tvar alternate = ($$anchor) => {\n\t\t\t\t\tvar span_2 = root_3();\n\t\t\t\t\tvar text_3 = $.only_child(span_2, true);\n\n\t\t\t\t\t$.template_effect(() => {\n\t\t\t\t\t\t$.set_class(span_2, 1, `truncate block ${$.get(cell).error ? 'text-destructive font-semibold' : ''}`);\n\t\t\t\t\t\t$.set_text(text_3, $.get(cell).error || ($.get(cell).value ?? ''));\n\t\t\t\t\t});\n\n\t\t\t\t\t$.append($$anchor, span_2);\n\t\t\t\t};\n\n\t\t\t\t$.if(node_4, ($$render) => {\n\t\t\t\t\tif ($.get(isEditing)) $$render(consequent_1); else if ($$props.customCellRenderer) $$render(consequent_2, 1); else $$render(alternate, -1);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t$.reset(td_1);\n\n\t\t\t$.template_effect(() => {\n\t\t\t\t$.set_class(td_1, 1, `relative border-r border-border px-2 py-1 truncate text-foreground transition-all ${$.get(selected) ? 'bg-primary/10' : ''} ${$.get(active) ? 'ring-2 ring-primary ring-inset z-10' : ''}`);\n\t\t\t\t$.set_style(td_1, `width: ${($.get(col).width || 130) ?? ''}px; min-width: ${($.get(col).width || 130) ?? ''}px; max-width: ${($.get(col).width || 130) ?? ''}px;`);\n\t\t\t});\n\n\t\t\t$.delegated('click', td_1, (e) => handleCellClick($.get(rIdx), $.get(cIdx), e));\n\t\t\t$.delegated('dblclick', td_1, () => handleCellDblClick($.get(rIdx), $.get(cIdx)));\n\t\t\t$.append($$anchor, td_1);\n\t\t});\n\n\t\tvar node_6 = $.sibling(node_3);\n\n\t\t{\n\t\t\tvar consequent_3 = ($$anchor) => {\n\t\t\t\tvar td_2 = root_5();\n\n\t\t\t\t$.append($$anchor, td_2);\n\t\t\t};\n\n\t\t\t$.if(node_6, ($$render) => {\n\t\t\t\tif ($$props.onAddColumnClick) $$render(consequent_3);\n\t\t\t});\n\t\t}\n\n\t\t$.reset(tr_1);\n\n\t\t$.template_effect(() => {\n\t\t\t$.set_style(tr_1, `height: ${($.get(row).height || 32) ?? ''}px;`);\n\t\t\t$.set_text(text_2, $.get(rIdx) + 1);\n\t\t});\n\n\t\t$.append($$anchor, tr_1);\n\t});\n\n\t$.reset(tbody);\n\t$.reset(table);\n\t$.reset(div_1);\n\t$.reset(div);\n\t$.bind_this(div, ($$value) => $.set(gridContainer, $$value), () => $.get(gridContainer));\n\t$.delegated('keydown', div, handleKeyDown);\n\t$.append($$anchor, div);\n\t$.pop();\n}\n\n$.delegate(['keydown', 'click', 'mousedown', 'dblclick']);","import 'svelte/internal/disclose-version';\nimport * as $ from 'svelte/internal/client';\nimport { indexToColName } from '@pixerate/editor';\n\nvar root = $.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>`);\n\nexport default function FormulaBar($$anchor, $$props) {\n\t$.push($$props, true);\n\n\tlet activeCoord = $.prop($$props, 'activeCoord', 3, null),\n\t\tvalue = $.prop($$props, 'value', 15, '');\n\n\tlet coordLabel = $.derived(() => {\n\t\tif (!activeCoord()) return '--';\n\n\t\tconst colName = indexToColName(activeCoord().col);\n\n\t\treturn `${colName}${activeCoord().row + 1}`;\n\t});\n\n\tfunction handleKeyDown(e) {\n\t\tif (e.key === 'Enter') {\n\t\t\te.preventDefault();\n\t\t\t$$props.onCommit?.(value());\n\t\t} else if (e.key === 'Escape') {\n\t\t\te.preventDefault();\n\t\t\t$$props.onCancel?.();\n\t\t}\n\t}\n\n\tfunction handleInput(e) {\n\t\tconst target = e.target;\n\n\t\tvalue(target.value);\n\t\t$$props.onChange?.(target.value);\n\t}\n\n\tvar div = root();\n\tvar div_1 = $.child(div);\n\tvar text = $.only_child(div_1, true);\n\tvar input = $.sibling(div_1, 4);\n\n\t$.remove_input_defaults(input);\n\t$.reset(div);\n\n\t$.template_effect(() => {\n\t\t$.set_text(text, $.get(coordLabel));\n\t\t$.set_value(input, value());\n\t});\n\n\t$.delegated('input', input, handleInput);\n\t$.delegated('keydown', input, handleKeyDown);\n\t$.append($$anchor, div);\n\t$.pop();\n}\n\n$.delegate(['input', 'keydown']);","import {\n  SpreadsheetController\n} from \"@pixerate/editor\";\nexport function createReactiveSpreadsheet(options = {}) {\n  let doc = $state({\n    id: options.document?.id || `sheet_${Date.now()}`,\n    name: options.document?.name || \"Sheet 1\",\n    columns: options.document?.columns || [],\n    rows: options.document?.rows || [],\n    cells: options.document?.cells || {},\n    createdAt: options.document?.createdAt || Date.now(),\n    updatedAt: options.document?.updatedAt || Date.now()\n  });\n  let activeCell = $state(null);\n  let selectedRange = $state(null);\n  let editingCell = $state(null);\n  let draftValue = $state(\"\");\n  const controller = new SpreadsheetController({\n    ...options,\n    document: options.document,\n    onDocumentChange: (updated) => {\n      doc = { ...updated };\n      options.onDocumentChange?.(updated);\n    },\n    onSelectionChange: (active, range) => {\n      activeCell = active;\n      selectedRange = range;\n      options.onSelectionChange?.(active, range);\n    },\n    onCellCommit: (rowId, colId, raw, value) => {\n      options.onCellCommit?.(rowId, colId, raw, value);\n    }\n  });\n  doc = { ...controller.document };\n  activeCell = controller.activeCell;\n  selectedRange = controller.selectedRange;\n  return {\n    get document() {\n      return doc;\n    },\n    get activeCell() {\n      return activeCell;\n    },\n    get selectedRange() {\n      return selectedRange;\n    },\n    get editingCell() {\n      return editingCell;\n    },\n    get draftValue() {\n      return draftValue;\n    },\n    set draftValue(val) {\n      draftValue = val;\n      controller.draftValue = val;\n    },\n    controller,\n    getCell(rowId, colId) {\n      return controller.getCell(rowId, colId);\n    },\n    setCellValue(rowId, colId, raw) {\n      controller.setCellValue(rowId, colId, raw);\n      doc = { ...controller.document };\n    },\n    selectCell(row, col, extendSelection = false) {\n      controller.selectCell(row, col, extendSelection);\n      activeCell = controller.activeCell;\n      selectedRange = controller.selectedRange;\n    },\n    selectRange(range) {\n      controller.selectRange(range);\n      selectedRange = controller.selectedRange;\n    },\n    startEditing(row, col, initialVal) {\n      controller.startEditing(row, col, initialVal);\n      activeCell = controller.activeCell;\n      editingCell = controller.editingCell;\n      draftValue = controller.draftValue;\n    },\n    commitEditing(val) {\n      controller.commitEditing(val);\n      editingCell = null;\n      draftValue = \"\";\n      doc = { ...controller.document };\n    },\n    cancelEditing() {\n      controller.cancelEditing();\n      editingCell = null;\n      draftValue = \"\";\n    },\n    moveCursor(dir, extend = false) {\n      controller.moveCursor(dir, extend);\n      activeCell = controller.activeCell;\n      selectedRange = controller.selectedRange;\n    },\n    insertColumn(index, config) {\n      controller.insertColumn(index, config);\n      doc = { ...controller.document };\n    },\n    deleteColumn(colId) {\n      controller.deleteColumn(colId);\n      doc = { ...controller.document };\n    },\n    insertRow(index, config) {\n      controller.insertRow(index, config);\n      doc = { ...controller.document };\n    },\n    deleteRow(rowId) {\n      controller.deleteRow(rowId);\n      doc = { ...controller.document };\n    },\n    setColumnWidth(colId, width) {\n      controller.setColumnWidth(colId, width);\n      doc = { ...controller.document };\n    },\n    registerDataSource(ds) {\n      controller.registerDataSource(ds);\n      doc = { ...controller.document };\n    },\n    setPrimaryDataSource(id) {\n      controller.setPrimaryDataSource(id);\n      doc = { ...controller.document };\n    },\n    recalculateAll() {\n      controller.recalculateAll();\n      doc = { ...controller.document };\n    },\n    exportToTsv() {\n      return controller.exportToTsv();\n    },\n    importFromTsv(data) {\n      controller.importFromTsv(data);\n      doc = { ...controller.document };\n    },\n    undo() {\n      controller.undo();\n      doc = { ...controller.document };\n    },\n    redo() {\n      controller.redo();\n      doc = { ...controller.document };\n    }\n  };\n}\n","import type { Component } from \"svelte\";\nimport type { Editor, Content, Extensions } from \"@tiptap/core\";\nimport type { Template, ColorGradient } from \"@pixerate/editor\";\n\nimport EditableTextNodeEditorComponent from \"./EditableTextNodeEditor.svelte\";\nimport BubbleMenuComponent from \"./BubbleMenu.svelte\";\nimport TemplateRendererComponent from \"./TemplateRenderer.svelte\";\n\nexport * from \"./editor.svelte\";\n\nexport interface EditableTextNodeEditorProps {\n  class?: string;\n  content?: Content;\n  showMenu?: boolean;\n  editable?: boolean;\n  editor?: Editor;\n  extensions?: Extensions;\n  onUpdate?: () => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onCreate?: () => void;\n  placeholder?: string;\n}\n\nexport interface BubbleMenuProps {\n  editor?: Editor;\n  class?: string;\n  children?: any;\n}\n\nexport interface TemplateRendererProps {\n  content: string;\n  templates?: Template[];\n  templateColorMap?: Map<string, ColorGradient>;\n  resolve?: boolean;\n  class?: string;\n  onTemplateClick?: (templateName: string) => void;\n  onVariableClick?: (variableName: string) => void;\n}\n\nexport const EditableTextNodeEditor = EditableTextNodeEditorComponent as unknown as Component<EditableTextNodeEditorProps>;\nexport const BubbleMenu = BubbleMenuComponent as unknown as Component<BubbleMenuProps>;\nexport const TemplateRenderer = TemplateRendererComponent as unknown as Component<TemplateRendererProps>;\n\nexport type {\n  Template,\n  TemplateVersion,\n  Token,\n  TokenType,\n  ColorGradient,\n  RichTextPresetOptions,\n} from \"@pixerate/editor\";\n\nexport * from \"./spreadsheet\";\n"],"mappings":";AAA2C,OAAO;AAClD,YAAYA,QAAO;AACnB,SAAS,WAAW,eAAe;AACnC,OAAO,iBAAiB;;;;ACHxB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAC9B,IAAM,iBAAc,CAAI,SAAS,SAAS,YAAY,YAAY;AACvE,QAAM,EAAE,iBAAe,GAAK,cAAa,IAAK,WAAO,CAAA;AACrD,QAAM,gBAAgB,qBAAqB,eAAe;AAC1D,QAAM,SAAS,IAAI,OAAM;IACvB;IACA;IACA,YAAU,CAAA,GACL,eAAa,GACb,cAAU,CAAA,CAAA;IAEf,WAAW;OACR;;AAEL,SAAO;AACT;AACO,SAAS,qBAAqB,iBAAiB,IAAI,aAAU,CAAA,GAAO,UAAO,CAAA,GAAO;AACvF,MAAI;AACJ,SAAM;IACJ,IAAI,UAAU;AACZ,aAAO;IACT;IACA,MAAM,SAAS;AACb,uBAAiB,eAAe,SAAS,gBAAgB,YAAY,OAAO;AAC5E,aAAO;IACT;IACA,UAAU;AACR,UAAI,gBAAgB;AAClB,uBAAe,QAAO;AACtB,yBAAc;MAChB;IACF;;AAEJ;;;AD5BA,IAAI,OAAS,aAAU,iGAAiG;AACxH,IAAI,SAAW,aAAU,yHAAyH;AAEnI,SAAR,uBAAwC,UAAU,SAAS;AACjE,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,SAAS,GAAG,EAAE,GAC7C,UAAY,QAAK,SAAS,WAAW,GAAG,MAAS,GACjD,WAAa,QAAK,SAAS,YAAY,GAAG,IAAI,GAC9C,WAAa,QAAK,SAAS,YAAY,GAAG,IAAI,GAC9C,SAAW,QAAK,SAAS,UAAU,EAAE,GACrC,aAAe,QAAK,SAAS,cAAc,IAAI,MAAM,CAAC,CAAC,GACvD,cAAgB,QAAK,SAAS,eAAe,GAAG,EAAE;AAEnD,MAAI,UAAY,SAAM,MAAM;AAE5B,EAAE,eAAY,MAAM;AACnB,QAAI,OAAO,KAAK,OAAO,EAAE,eAAe,SAAS,GAAG;AACnD,aAAO,EAAE,YAAY,SAAS,CAAC;AAAA,IAChC;AAAA,EACD,CAAC;AAED,UAAQ,MAAM;AACb,WAAO;AAAA,MACJ,OAAI,OAAO;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,QACC,YAAY,UAAU,EAAE,aAAa,YAAY,EAAE,CAAC;AAAA,QACpD,GAAG,WAAW;AAAA,MACf;AAAA,MACA;AAAA,QACC,UAAU,SAAS;AAAA,QACnB,UAAU,QAAQ;AAAA,QAClB,UAAU,QAAQ;AAAA,QAClB,UAAU;AACT,cAAI,QAAQ,QAAS,SAAQ,QAAQ;AAAA,QACtC;AAAA,QAEA,SAAS;AACR,cAAI,QAAQ,OAAQ,SAAQ,OAAO;AAAA,QACpC;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACf,QAAI,OAAO,GAAG;AACb,aAAO,EAAE,QAAQ;AAAA,IAClB;AAAA,EACD,CAAC;AAED,MAAI,MAAM,OAAO;AACjB,MAAI,OAAS,SAAM,GAAG;AAEtB;AACC,QAAI,aAAa,CAACC,cAAa;AAC9B,UAAI,QAAQ,KAAK;AAEjB,MAAE,UAAOA,WAAU,KAAK;AAAA,IACzB;AAEA,IAAE,MAAG,MAAM,CAAC,aAAa;AACxB,UAAI,CAAC,OAAO,EAAG,UAAS,UAAU;AAAA,IACnC,CAAC;AAAA,EACF;AAEA,MAAI,QAAU,WAAQ,MAAM,CAAC;AAE7B,EAAE,aAAU,OAAO,CAAC,YAAc,OAAI,SAAS,OAAO,GAAG,MAAQ,OAAI,OAAO,CAAC;AAC7E,EAAE,SAAM,GAAG;AACX,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAG,6BAA6B,UAAU,CAAC,EAAE,CAAC;AACvF,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;;;AE/EA,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,wBAAwB;AAEjC,IAAIC,QAAS,aAAU,4CAA4C;AAEpD,SAAR,WAA4B,UAAU,SAAS;AACrD,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,SAAS,GAAG,8FAA8F,GACzI,YAAc,QAAK,SAAS,aAAa,GAAG,YAAY,GACxD,aAAe,QAAK,SAAS,cAAc,GAAG,IAAI,GAClD,cAAgB,QAAK,SAAS,eAAe,GAAG,GAAG,GACnD,eAAiB,QAAK,SAAS,gBAAgB,IAAI,OAAO,CAAC,EAAE;AAE9D,MAAI,cAAgB,SAAM,MAAM;AAEhC,EAAE,eAAY,MAAM;AACnB,QAAI,QAAQ,UAAY,OAAI,WAAW,GAAG;AACzC,YAAM,SAAS,iBAAiB;AAAA,QAC/B,WAAW,UAAU;AAAA,QACrB,QAAQ,QAAQ;AAAA,QAChB,SAAW,OAAI,WAAW;AAAA,QAC1B,cAAc;AAAA,UACb,UAAU;AAAA,UACV,UAAU,MAAM,SAAS;AAAA,UACzB,GAAG,aAAa;AAAA,QACjB;AAAA,QACA,YAAY,WAAW;AAAA,QACvB,aAAa,YAAY;AAAA,MAC1B,CAAC;AAED,cAAQ,OAAO,eAAe,MAAM;AAEpC,aAAO,MAAM;AACZ,gBAAQ,OAAO,iBAAiB,UAAU,CAAC;AAAA,MAC5C;AAAA,IACD;AAAA,EACD,CAAC;AAED,MAAI,MAAMA,MAAK;AACf,MAAI,OAAS,SAAM,GAAG;AAEtB;AACC,QAAI,aAAa,CAACC,cAAa;AAC9B,UAAI,WAAa,WAAQ;AACzB,UAAI,SAAW,eAAY,QAAQ;AAEnC,MAAE,WAAQ,QAAQ,MAAM,QAAQ,QAAQ;AACxC,MAAE,UAAOA,WAAU,QAAQ;AAAA,IAC5B;AAEA,IAAE,MAAG,MAAM,CAAC,aAAa;AACxB,UAAI,QAAQ,SAAU,UAAS,UAAU;AAAA,IAC1C,CAAC;AAAA,EACF;AAEA,EAAE,SAAM,GAAG;AACX,EAAE,aAAU,KAAK,CAAC,YAAc,OAAI,aAAa,OAAO,GAAG,MAAQ,OAAI,WAAW,CAAC;AACnF,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAK,QAAK,UAAU,CAAC,CAAC,CAAC;AAChE,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;;;AC9DA,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,gBAAgB,wBAAwB;AAEjD,IAAIC,QAAS,aAAU,yRAAyR;AAChT,IAAIC,UAAW,aAAU,qNAAqN;AAC9O,IAAI,SAAW,aAAU,mKAAmK;AAC5L,IAAI,SAAW,aAAU,gBAAgB;AACzC,IAAI,SAAW,aAAU,aAAa;AAEvB,SAAR,iBAAkC,UAAU,SAAS;AAC3D,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,YAAc,QAAK,SAAS,aAAa,IAAI,MAAM,CAAC,CAAC,GACxD,UAAY,QAAK,SAAS,WAAW,GAAG,KAAK,GAC7C,YAAc,QAAK,SAAS,SAAS,GAAG,mEAAmE;AAE5G,MAAI,cAAgB,WAAQ,MAAM,QAAQ,KAAK,UAAU,EAAE,SAAS,IACjE,iBAAiB,QAAQ,SAAS,UAAU,CAAC,IAC7C,QAAQ,OAAO;AAElB,MAAI,SAAW,WAAQ,MAAM,eAAiB,OAAI,WAAW,CAAC,CAAC;AAC/D,MAAI,MAAM,OAAO;AAEjB,EAAE,QAAK,KAAK,IAAI,MAAQ,OAAI,MAAM,GAAK,UAAO,CAACC,WAAU,UAAU;AAClE,QAAI,WAAa,WAAQ;AACzB,QAAI,OAAS,eAAY,QAAQ;AAEjC;AACC,UAAI,aAAa,CAACA,cAAa;AAC9B,cAAM,SAAW,WAAQ,MAAM,QAAQ,kBAAkB,IAAM,OAAI,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,WAAW,IAAI,UAAU,CAAC;AACtH,YAAI,OAAOF,MAAK;AAChB,YAAI,OAAS,cAAW,MAAM,IAAI;AAElC,QAAE,mBAAgB,MAAM;AACvB,UAAE,aAAU,MAAM,iBAAmB,OAAI,MAAM,EAAE,IAAI,iBAAmB,OAAI,MAAM,EAAE,EAAE,GAAG;AACzF,UAAE,iBAAc,MAAM,SAAS,aAAe,OAAI,KAAK,EAAE,KAAK,EAAE;AAChE,UAAE,YAAS,MAAM,KAAO,OAAI,KAAK,EAAE,KAAK,IAAI;AAAA,QAC7C,CAAC;AAED,QAAE,aAAU,SAAS,MAAM,MAAM,QAAQ,kBAAoB,OAAI,KAAK,EAAE,KAAK,CAAC;AAC9E,QAAE,UAAOE,WAAU,IAAI;AAAA,MACxB;AAEA,UAAI,eAAe,CAACA,cAAa;AAChC,YAAI,SAASD,QAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAM;AACvB,UAAE,iBAAc,QAAQ,SAAS,aAAe,OAAI,KAAK,EAAE,KAAK,EAAE;AAClE,UAAE,YAAS,QAAQ,IAAM,OAAI,KAAK,EAAE,KAAK,GAAG;AAAA,QAC7C,CAAC;AAED,QAAE,aAAU,SAAS,QAAQ,MAAM,QAAQ,kBAAoB,OAAI,KAAK,EAAE,KAAK,CAAC;AAChF,QAAE,UAAOC,WAAU,MAAM;AAAA,MAC1B;AAEA,UAAI,eAAe,CAACA,cAAa;AAChC,YAAI,SAAS,OAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAM;AACvB,UAAE,iBAAc,QAAQ,SAAS,gBAAkB,OAAI,KAAK,EAAE,KAAK,EAAE;AACrE,UAAE,YAAS,QAAQ,KAAO,OAAI,KAAK,EAAE,KAAK,IAAI;AAAA,QAC/C,CAAC;AAED,QAAE,UAAOA,WAAU,MAAM;AAAA,MAC1B;AAEA,UAAI,YAAY,CAACA,cAAa;AAC7B,YAAI,SAAS,OAAO;AACpB,YAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,QAAE,mBAAgB,MAAQ,YAAS,QAAU,OAAI,KAAK,EAAE,KAAK,CAAC;AAC9D,QAAE,UAAOA,WAAU,MAAM;AAAA,MAC1B;AAEA,MAAE,MAAG,MAAM,CAAC,aAAa;AACxB,YAAM,OAAI,KAAK,EAAE,SAAS,WAAY,UAAS,UAAU;AAAA,iBAAc,OAAI,KAAK,EAAE,SAAS,WAAY,UAAS,cAAc,CAAC;AAAA,iBAAc,OAAI,KAAK,EAAE,SAAS,cAAe,UAAS,cAAc,CAAC;AAAA,YAAQ,UAAS,WAAW,EAAE;AAAA,MACvO,CAAC;AAAA,IACF;AAEA,IAAE,UAAOA,WAAU,QAAQ;AAAA,EAC5B,CAAC;AAED,EAAE,SAAM,GAAG;AACX,EAAE,mBAAgB,MAAQ,aAAU,KAAK,GAAK,QAAK,UAAU,CAAC,CAAC,CAAC;AAChE,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;AAEE,YAAS,CAAC,OAAO,CAAC;;;AC3FpB,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,kBAAAC,uBAAsB;;;ACF/B,OAAO;AACP,YAAYC,QAAO;AACnB,SAAS,sBAAsB;AAE/B,IAAIC,QAAS,aAAU,6pBAA6pB;AAErqB,SAAR,WAA4B,UAAU,SAAS;AACrD,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,cAAgB,QAAK,SAAS,eAAe,GAAG,IAAI,GACvD,QAAU,QAAK,SAAS,SAAS,IAAI,EAAE;AAExC,MAAI,aAAe,WAAQ,MAAM;AAChC,QAAI,CAAC,YAAY,EAAG,QAAO;AAE3B,UAAM,UAAU,eAAe,YAAY,EAAE,GAAG;AAEhD,WAAO,GAAG,OAAO,GAAG,YAAY,EAAE,MAAM,CAAC;AAAA,EAC1C,CAAC;AAED,WAAS,cAAc,GAAG;AACzB,QAAI,EAAE,QAAQ,SAAS;AACtB,QAAE,eAAe;AACjB,cAAQ,WAAW,MAAM,CAAC;AAAA,IAC3B,WAAW,EAAE,QAAQ,UAAU;AAC9B,QAAE,eAAe;AACjB,cAAQ,WAAW;AAAA,IACpB;AAAA,EACD;AAEA,WAAS,YAAY,GAAG;AACvB,UAAM,SAAS,EAAE;AAEjB,UAAM,OAAO,KAAK;AAClB,YAAQ,WAAW,OAAO,KAAK;AAAA,EAChC;AAEA,MAAI,MAAMA,MAAK;AACf,MAAI,QAAU,SAAM,GAAG;AACvB,MAAI,OAAS,cAAW,OAAO,IAAI;AACnC,MAAI,QAAU,WAAQ,OAAO,CAAC;AAE9B,EAAE,yBAAsB,KAAK;AAC7B,EAAE,SAAM,GAAG;AAEX,EAAE,mBAAgB,MAAM;AACvB,IAAE,YAAS,MAAQ,OAAI,UAAU,CAAC;AAClC,IAAE,aAAU,OAAO,MAAM,CAAC;AAAA,EAC3B,CAAC;AAED,EAAE,aAAU,SAAS,OAAO,WAAW;AACvC,EAAE,aAAU,WAAW,OAAO,aAAa;AAC3C,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;AAEE,YAAS,CAAC,SAAS,SAAS,CAAC;;;;ACxD/B,SACE,6BACK;AACA,SAAS,0BAA0B,UAAO,CAAA,GAAO;AACtD,MAAI,MAAM,SAAM,SAAA;IACd,IAAI,QAAQ,UAAU,MAAE,SAAa,KAAK,IAAG,CAAA;IAC7C,MAAM,QAAQ,UAAU,QAAQ;IAChC,SAAS,QAAQ,UAAU,WAAO,CAAA;IAClC,MAAM,QAAQ,UAAU,QAAI,CAAA;IAC5B,OAAO,QAAQ,UAAU,SAAK,CAAA;IAC9B,WAAW,QAAQ,UAAU,aAAa,KAAK,IAAG;IAClD,WAAW,QAAQ,UAAU,aAAa,KAAK,IAAG;;AAEpD,MAAI,aAAa,SAAO,IAAI;AAC5B,MAAI,gBAAgB,SAAO,IAAI;AAC/B,MAAI,cAAc,SAAO,IAAI;AAC7B,MAAI,aAAa,SAAO,EAAE;AAC1B,QAAM,aAAa,IAAI,sBAAqB;OACvC;IACH,UAAU,QAAQ;IAClB,kBAAgB,CAAG,YAAY;aAC7B,KAAG,EAAA,GAAQ,QAAO,GAAA,IAAA;AAClB,cAAQ,mBAAmB,OAAO;IACpC;IACA,mBAAiB,CAAG,QAAQ,UAAU;aACpC,YAAa,QAAM,IAAA;aACnB,eAAgB,OAAK,IAAA;AACrB,cAAQ,oBAAoB,QAAQ,KAAK;IAC3C;IACA,cAAY,CAAG,OAAO,OAAO,KAAK,UAAU;AAC1C,cAAQ,eAAe,OAAO,OAAO,KAAK,KAAK;IACjD;;SAEF,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;SAC9B,YAAa,WAAW,YAAU,IAAA;SAClC,eAAgB,WAAW,eAAa,IAAA;AACxC,SAAM;IACJ,IAAI,WAAW;AACb,aAAM,OAAC,GAAG;IACZ;IACA,IAAI,aAAa;AACf,aAAM,OAAC,UAAU;IACnB;IACA,IAAI,gBAAgB;AAClB,aAAM,OAAC,aAAa;IACtB;IACA,IAAI,cAAc;AAChB,aAAM,OAAC,WAAW;IACpB;IACA,IAAI,aAAa;AACf,aAAM,OAAC,UAAU;IACnB;IACA,IAAI,WAAW,KAAK;aAClB,YAAa,KAAG,IAAA;AAChB,iBAAW,aAAa;IAC1B;IACA;IACA,QAAQ,OAAO,OAAO;AACpB,aAAO,WAAW,QAAQ,OAAO,KAAK;IACxC;IACA,aAAa,OAAO,OAAO,KAAK;AAC9B,iBAAW,aAAa,OAAO,OAAO,GAAG;aACzC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,WAAW,KAAK,KAAK,kBAAkB,OAAO;AAC5C,iBAAW,WAAW,KAAK,KAAK,eAAe;aAC/C,YAAa,WAAW,YAAU,IAAA;aAClC,eAAgB,WAAW,eAAa,IAAA;IAC1C;IACA,YAAY,OAAO;AACjB,iBAAW,YAAY,KAAK;aAC5B,eAAgB,WAAW,eAAa,IAAA;IAC1C;IACA,aAAa,KAAK,KAAK,YAAY;AACjC,iBAAW,aAAa,KAAK,KAAK,UAAU;aAC5C,YAAa,WAAW,YAAU,IAAA;aAClC,aAAc,WAAW,aAAW,IAAA;aACpC,YAAa,WAAW,YAAU,IAAA;IACpC;IACA,cAAc,KAAK;AACjB,iBAAW,cAAc,GAAG;aAC5B,aAAc,IAAI;aAClB,YAAa,EAAE;aACf,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,gBAAgB;AACd,iBAAW,cAAa;aACxB,aAAc,IAAI;aAClB,YAAa,EAAE;IACjB;IACA,WAAW,KAAK,SAAS,OAAO;AAC9B,iBAAW,WAAW,KAAK,MAAM;aACjC,YAAa,WAAW,YAAU,IAAA;aAClC,eAAgB,WAAW,eAAa,IAAA;IAC1C;IACA,aAAaC,QAAO,QAAQ;AAC1B,iBAAW,aAAaA,QAAO,MAAM;aACrC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,aAAa,OAAO;AAClB,iBAAW,aAAa,KAAK;aAC7B,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,UAAUA,QAAO,QAAQ;AACvB,iBAAW,UAAUA,QAAO,MAAM;aAClC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,UAAU,OAAO;AACf,iBAAW,UAAU,KAAK;aAC1B,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,eAAe,OAAO,OAAO;AAC3B,iBAAW,eAAe,OAAO,KAAK;aACtC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,mBAAmB,IAAI;AACrB,iBAAW,mBAAmB,EAAE;aAChC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,qBAAqB,IAAI;AACvB,iBAAW,qBAAqB,EAAE;aAClC,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,iBAAiB;AACf,iBAAW,eAAc;aACzB,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,cAAc;AACZ,aAAO,WAAW,YAAW;IAC/B;IACA,cAAc,MAAM;AAClB,iBAAW,cAAc,IAAI;aAC7B,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,OAAO;AACL,iBAAW,KAAI;aACf,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;IACA,OAAO;AACL,iBAAW,KAAI;aACf,KAAG,EAAA,GAAQ,WAAW,SAAQ,GAAA,IAAA;IAChC;;AAEJ;;;AFzIA,IAAIC,QAAS,aAAU,oiBAAoiB;AAC3jB,IAAIC,UAAW,aAAU,qMAAqM;AAC9N,IAAIC,UAAW,aAAU,iKAAiK;AAC1L,IAAIC,UAAW,aAAU,gBAAgB;AACzC,IAAIC,UAAW,aAAU,cAAc;AACvC,IAAI,SAAW,aAAU,0EAA0E;AACnG,IAAI,SAAW,aAAU,kPAAkP;AAC3Q,IAAI,SAAW,aAAU,slBAAslB;AAEhmB,SAAR,kBAAmC,UAAU,SAAS;AAC5D,EAAE,QAAK,SAAS,IAAI;AAEpB,MAAI,aAAe,QAAK,SAAS,cAAc,IAAI,yBAAyB,GAC3E,WAAa,QAAK,SAAS,YAAY,GAAG,KAAK;AAEhD,MAAI,gBAAkB,SAAM,IAAI;AAChC,MAAI,gBAAkB,SAAM,IAAI;AAChC,MAAI,eAAiB,SAAM,CAAC;AAC5B,MAAI,mBAAqB,SAAM,CAAC;AAGhC,MAAI,iBAAmB,WAAQ,MAAM;AACpC,QAAI,CAAC,WAAW,EAAE,WAAY,QAAO;AAErC,UAAM,MAAM,WAAW,EAAE,SAAS,KAAK,WAAW,EAAE,WAAW,GAAG;AAClE,UAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,WAAW,EAAE,WAAW,GAAG;AAErE,QAAI,CAAC,OAAO,CAAC,IAAK,QAAO;AAEzB,WAAO,WAAW,EAAE,QAAQ,IAAI,IAAI,IAAI,EAAE,EAAE;AAAA,EAC7C,CAAC;AAED,WAAS,gBAAgB,MAAM,MAAM,GAAG;AACvC,QAAI,WAAW,EAAE,gBAAgB,WAAW,EAAE,YAAY,QAAQ,QAAQ,WAAW,EAAE,YAAY,QAAQ,OAAO;AACjH,iBAAW,EAAE,cAAc;AAAA,IAC5B;AAEA,eAAW,EAAE,WAAW,MAAM,MAAM,EAAE,QAAQ;AAAA,EAC/C;AAEA,WAAS,mBAAmB,MAAM,MAAM;AACvC,QAAI,SAAS,EAAG;AAEhB,UAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,IAAI;AAE9C,QAAI,KAAK,SAAU;AAEnB,eAAW,EAAE,aAAa,MAAM,IAAI;AAAA,EACrC;AAEA,WAAS,cAAc,GAAG;AACzB,QAAI,WAAW,EAAE,aAAa;AAC7B,UAAI,EAAE,QAAQ,SAAS;AACtB,UAAE,eAAe;AACjB,mBAAW,EAAE,cAAc;AAC3B,mBAAW,EAAE,WAAW,MAAM;AAAA,MAC/B,WAAW,EAAE,QAAQ,UAAU;AAC9B,UAAE,eAAe;AACjB,mBAAW,EAAE,cAAc;AAAA,MAC5B,WAAW,EAAE,QAAQ,OAAO;AAC3B,UAAE,eAAe;AACjB,mBAAW,EAAE,cAAc;AAC3B,mBAAW,EAAE,WAAW,EAAE,WAAW,SAAS,OAAO;AAAA,MACtD;AAEA;AAAA,IACD;AAEA,QAAI,CAAC,WAAW,EAAE,WAAY;AAE9B,QAAI,EAAE,QAAQ,WAAW;AACxB,QAAE,eAAe;AACjB,iBAAW,EAAE,WAAW,MAAM,EAAE,QAAQ;AAAA,IACzC,WAAW,EAAE,QAAQ,aAAa;AACjC,QAAE,eAAe;AACjB,iBAAW,EAAE,WAAW,QAAQ,EAAE,QAAQ;AAAA,IAC3C,WAAW,EAAE,QAAQ,aAAa;AACjC,QAAE,eAAe;AACjB,iBAAW,EAAE,WAAW,QAAQ,EAAE,QAAQ;AAAA,IAC3C,WAAW,EAAE,QAAQ,cAAc;AAClC,QAAE,eAAe;AACjB,iBAAW,EAAE,WAAW,SAAS,EAAE,QAAQ;AAAA,IAC5C,WAAW,EAAE,QAAQ,OAAO;AAC3B,QAAE,eAAe;AACjB,iBAAW,EAAE,WAAW,EAAE,WAAW,SAAS,OAAO;AAAA,IACtD,WAAW,EAAE,QAAQ,SAAS;AAC7B,QAAE,eAAe;AAEjB,YAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,WAAW,EAAE,WAAW,GAAG;AAErE,UAAI,CAAC,SAAS,KAAK,CAAC,KAAK,UAAU;AAClC,mBAAW,EAAE,aAAa;AAAA,MAC3B;AAAA,IACD,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAAU;AACvD,UAAI,SAAS,EAAG;AAEhB,YAAM,MAAM,WAAW,EAAE,SAAS,KAAK,WAAW,EAAE,WAAW,GAAG;AAClE,YAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,WAAW,EAAE,WAAW,GAAG;AAErE,UAAI,OAAO,OAAO,CAAC,IAAI,UAAU;AAChC,UAAE,eAAe;AACjB,mBAAW,EAAE,aAAa,IAAI,IAAI,IAAI,IAAI,EAAE;AAAA,MAC7C;AAAA,IACD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;AACrD,QAAE,eAAe;AAEjB,UAAI,EAAE,UAAU;AACf,mBAAW,EAAE,KAAK;AAAA,MACnB,OAAO;AACN,mBAAW,EAAE,KAAK;AAAA,MACnB;AAAA,IACD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;AACrD,QAAE,eAAe;AAEjB,YAAM,MAAM,WAAW,EAAE,YAAY;AAErC,gBAAU,WAAW,UAAU,GAAG;AAAA,IACnC,WAAW,CAAC,SAAS,KAAK,EAAE,IAAI,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,EAAE,QAAQ;AAEtF,YAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,WAAW,EAAE,WAAW,GAAG;AAErE,UAAI,CAAC,KAAK,UAAU;AACnB,mBAAW,EAAE,aAAa,WAAW,EAAE,WAAW,KAAK,WAAW,EAAE,WAAW,KAAK,EAAE,GAAG;AAAA,MAC1F;AAAA,IACD;AAAA,EACD;AAEA,WAAS,kBAAkB,OAAO,OAAO,GAAG;AAC3C,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,IAAE,OAAI,eAAe,OAAO,IAAI;AAChC,IAAE,OAAI,cAAc,EAAE,SAAS,IAAI;AACnC,IAAE,OAAI,kBAAkB,OAAO,IAAI;AAEnC,UAAM,kBAAkB,CAAC,cAAc;AACtC,UAAI,CAAG,OAAI,aAAa,EAAG;AAE3B,YAAM,QAAQ,UAAU,UAAY,OAAI,YAAY;AAEpD,iBAAW,EAAE,eAAiB,OAAI,aAAa,GAAG,KAAK,IAAI,IAAM,OAAI,gBAAgB,IAAI,KAAK,CAAC;AAAA,IAChG;AAEA,UAAM,gBAAgB,MAAM;AAC3B,MAAE,OAAI,eAAe,IAAI;AACzB,aAAO,oBAAoB,aAAa,eAAe;AACvD,aAAO,oBAAoB,WAAW,aAAa;AAAA,IACpD;AAEA,WAAO,iBAAiB,aAAa,eAAe;AACpD,WAAO,iBAAiB,WAAW,aAAa;AAAA,EACjD;AAEA,WAAS,eAAe,MAAM,MAAM;AACnC,QAAI,CAAC,WAAW,EAAE,cAAe,QAAO;AAExC,UAAM,OAAO,KAAK,IAAI,WAAW,EAAE,cAAc,UAAU,WAAW,EAAE,cAAc,MAAM;AAC5F,UAAM,OAAO,KAAK,IAAI,WAAW,EAAE,cAAc,UAAU,WAAW,EAAE,cAAc,MAAM;AAC5F,UAAM,OAAO,KAAK,IAAI,WAAW,EAAE,cAAc,UAAU,WAAW,EAAE,cAAc,MAAM;AAC5F,UAAM,OAAO,KAAK,IAAI,WAAW,EAAE,cAAc,UAAU,WAAW,EAAE,cAAc,MAAM;AAE5F,WAAO,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,EAChE;AAEA,WAAS,aAAa,MAAM,MAAM;AACjC,WAAO,WAAW,EAAE,YAAY,QAAQ,QAAQ,WAAW,EAAE,YAAY,QAAQ;AAAA,EAClF;AAEA,MAAI,MAAM,OAAO;AACjB,MAAI,OAAS,SAAM,GAAG;AAEtB;AACC,QAAI,KAAO,WAAQ,MAAM,WAAW,EAAE,cAAc,WAAW,EAAE,aAAe,OAAI,cAAc,CAAC;AAEnG,eAAW,MAAM;AAAA,MAChB,IAAI,cAAc;AACjB,eAAO,WAAW,EAAE;AAAA,MACrB;AAAA,MAEA,IAAI,QAAQ;AACX,eAAS,OAAI,EAAE;AAAA,MAChB;AAAA,MAEA,UAAU,CAAC,QAAQ;AAClB,YAAI,WAAW,EAAE,YAAY;AAC5B,qBAAW,EAAE,aAAa;AAAA,QAC3B;AAAA,MACD;AAAA,MAEA,UAAU,CAAC,QAAQ;AAClB,YAAI,WAAW,EAAE,YAAY;AAC5B,gBAAM,MAAM,WAAW,EAAE,SAAS,KAAK,WAAW,EAAE,WAAW,GAAG;AAClE,gBAAM,MAAM,WAAW,EAAE,SAAS,QAAQ,WAAW,EAAE,WAAW,GAAG;AAErE,cAAI,OAAO,KAAK;AACf,uBAAW,EAAE,aAAa,IAAI,IAAI,IAAI,IAAI,GAAG;AAAA,UAC9C;AAAA,QACD;AAAA,MACD;AAAA,MAEA,UAAU,MAAM;AACf,mBAAW,EAAE,cAAc;AAAA,MAC5B;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,QAAU,WAAQ,MAAM,CAAC;AAC7B,MAAI,QAAU,SAAM,KAAK;AACzB,MAAI,QAAU,SAAM,KAAK;AACzB,MAAI,KAAO,SAAM,KAAK;AACtB,MAAI,SAAW,WAAU,SAAM,EAAE,CAAC;AAElC,EAAE,QAAK,QAAQ,IAAI,MAAM,WAAW,EAAE,SAAS,SAAS,CAAC,QAAQ,IAAI,IAAI,CAACC,WAAU,QAAQ;AAC3F,QAAI,KAAKL,MAAK;AACd,QAAI,QAAU,SAAM,EAAE;AACtB,QAAI,OAAS,SAAM,KAAK;AACxB,QAAI,OAAS,cAAW,MAAM,IAAI;AAClC,QAAI,SAAW,WAAQ,MAAM,CAAC;AAC9B,QAAI,SAAW,cAAW,MAAM;AAEhC,IAAE,SAAM,KAAK;AAEb,QAAI,QAAU,WAAQ,OAAO,CAAC;AAE9B,IAAE,SAAM,EAAE;AAEV,IAAE,mBAAgB,MAAM;AACvB,MAAE,aAAU,IAAI,WAAa,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,mBAAqB,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,mBAAqB,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,KAAK;AAChK,MAAE,YAAS,MAAQ,OAAI,GAAG,EAAE,KAAK;AACjC,MAAE,YAAS,QAAQ,IAAM,OAAI,GAAG,EAAE,OAAO,EAAE,GAAG;AAAA,IAC/C,CAAC;AAED,IAAE,aAAU,SAAS,IAAI,MAAM,QAAQ,sBAAwB,OAAI,GAAG,CAAC,CAAC;AACxE,IAAE,aAAU,aAAa,OAAO,CAAC,MAAM,kBAAoB,OAAI,GAAG,EAAE,IAAM,OAAI,GAAG,EAAE,SAAS,KAAK,CAAC,CAAC;AACnG,IAAE,UAAOK,WAAU,EAAE;AAAA,EACtB,CAAC;AAED,MAAI,SAAW,WAAQ,MAAM;AAE7B;AACC,QAAI,aAAa,CAACA,cAAa;AAC9B,UAAI,OAAOJ,QAAO;AAElB,MAAE,aAAU,SAAS,MAAM,YAAa,QAAQ;AAC/C,gBAAQ,kBAAkB,MAAM,MAAM,MAAM;AAAA,MAC7C,CAAC;AAED,MAAE,UAAOI,WAAU,IAAI;AAAA,IACxB;AAEA,IAAE,MAAG,QAAQ,CAAC,aAAa;AAC1B,UAAI,QAAQ,iBAAkB,UAAS,UAAU;AAAA,IAClD,CAAC;AAAA,EACF;AAEA,EAAE,SAAM,EAAE;AACV,EAAE,SAAM,KAAK;AAEb,MAAI,QAAU,WAAQ,KAAK;AAE3B,EAAE,QAAK,OAAO,IAAI,MAAM,WAAW,EAAE,SAAS,MAAM,CAAC,QAAQ,IAAI,IAAI,CAACA,WAAU,KAAK,SAAS;AAC7F,QAAI,OAAO,OAAO;AAClB,QAAI,KAAO,SAAM,IAAI;AACrB,QAAI,SAAW,cAAW,IAAI,IAAI;AAClC,QAAI,SAAW,WAAQ,EAAE;AAEzB,IAAE,QAAK,QAAQ,IAAI,MAAM,WAAW,EAAE,SAAS,SAAS,CAAC,QAAQ,IAAI,IAAI,CAACA,WAAU,KAAK,SAAS;AACjG,YAAM,OAAS,WAAQ,MAAM,WAAW,EAAE,QAAU,OAAI,GAAG,EAAE,IAAM,OAAI,GAAG,EAAE,EAAE,CAAC;AAC/E,YAAM,WAAa,WAAQ,MAAM,eAAiB,OAAI,IAAI,GAAK,OAAI,IAAI,CAAC,CAAC;AACzE,YAAM,SAAW,WAAQ,MAAM,aAAe,OAAI,IAAI,GAAK,OAAI,IAAI,CAAC,CAAC;AACrE,YAAM,YAAc,WAAQ,MAAM,WAAW,EAAE,aAAa,QAAU,OAAI,IAAI,KAAK,WAAW,EAAE,aAAa,QAAU,OAAI,IAAI,CAAC;AAChI,UAAI,OAAOD,QAAO;AAClB,UAAI,SAAW,SAAM,IAAI;AAEzB;AACC,YAAI,eAAe,CAACC,cAAa;AAChC,cAAI,QAAQH,QAAO;AAEnB,UAAE,yBAAsB,KAAK;AAC7B,UAAE,SAAM,QAAQ,OAAO,MAAM,WAAW,EAAE,cAAc,CAAC;AACzD,UAAE,cAAW,OAAO,MAAM,WAAW,EAAE,YAAY,CAAC,YAAY,WAAW,EAAE,aAAa,OAAO;AACjG,UAAE,UAAOG,WAAU,KAAK;AAAA,QACzB;AAEA,YAAI,eAAe,CAACA,cAAa;AAChC,cAAI,WAAa,WAAQ;AACzB,cAAI,SAAW,eAAY,QAAQ;AAEnC,UAAE,WAAQ,QAAQ,MAAM,QAAQ,oBAAoB,OAAO,EAAE,KAAO,OAAI,GAAG,GAAG,KAAO,OAAI,GAAG,GAAG,MAAQ,OAAI,IAAI,EAAE,EAAE;AACnH,UAAE,UAAOA,WAAU,QAAQ;AAAA,QAC5B;AAEA,YAAI,YAAY,CAACA,cAAa;AAC7B,cAAI,SAASF,QAAO;AACpB,cAAI,SAAW,cAAW,QAAQ,IAAI;AAEtC,UAAE,mBAAgB,MAAM;AACvB,YAAE,aAAU,QAAQ,GAAG,kBAAoB,OAAI,IAAI,EAAE,QAAQ,mCAAmC,EAAE,EAAE;AACpG,YAAE,YAAS,QAAU,OAAI,IAAI,EAAE,UAAY,OAAI,IAAI,EAAE,SAAS,GAAG;AAAA,UAClE,CAAC;AAED,UAAE,UAAOE,WAAU,MAAM;AAAA,QAC1B;AAEA,QAAE,MAAG,QAAQ,CAAC,aAAa;AAC1B,cAAM,OAAI,SAAS,EAAG,UAAS,YAAY;AAAA,mBAAY,QAAQ,mBAAoB,UAAS,cAAc,CAAC;AAAA,cAAQ,UAAS,WAAW,EAAE;AAAA,QAC1I,CAAC;AAAA,MACF;AAEA,MAAE,SAAM,IAAI;AAEZ,MAAE,mBAAgB,MAAM;AACvB,QAAE,aAAU,MAAM,GAAG,qFAAuF,OAAI,QAAQ,IAAI,kBAAkB,EAAE,IAAM,OAAI,MAAM,IAAI,wCAAwC,EAAE,EAAE;AAChN,QAAE,aAAU,MAAM,WAAa,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,mBAAqB,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,mBAAqB,OAAI,GAAG,EAAE,SAAS,QAAQ,EAAE,KAAK;AAAA,MACnK,CAAC;AAED,MAAE,aAAU,SAAS,MAAM,CAAC,MAAM,gBAAkB,OAAI,IAAI,GAAK,OAAI,IAAI,GAAG,CAAC,CAAC;AAC9E,MAAE,aAAU,YAAY,MAAM,MAAM,mBAAqB,OAAI,IAAI,GAAK,OAAI,IAAI,CAAC,CAAC;AAChF,MAAE,UAAOA,WAAU,IAAI;AAAA,IACxB,CAAC;AAED,QAAI,SAAW,WAAQ,MAAM;AAE7B;AACC,UAAI,eAAe,CAACA,cAAa;AAChC,YAAI,OAAO,OAAO;AAElB,QAAE,UAAOA,WAAU,IAAI;AAAA,MACxB;AAEA,MAAE,MAAG,QAAQ,CAAC,aAAa;AAC1B,YAAI,QAAQ,iBAAkB,UAAS,YAAY;AAAA,MACpD,CAAC;AAAA,IACF;AAEA,IAAE,SAAM,IAAI;AAEZ,IAAE,mBAAgB,MAAM;AACvB,MAAE,aAAU,MAAM,YAAc,OAAI,GAAG,EAAE,UAAU,OAAO,EAAE,KAAK;AACjE,MAAE,YAAS,QAAU,OAAI,IAAI,IAAI,CAAC;AAAA,IACnC,CAAC;AAED,IAAE,UAAOA,WAAU,IAAI;AAAA,EACxB,CAAC;AAED,EAAE,SAAM,KAAK;AACb,EAAE,SAAM,KAAK;AACb,EAAE,SAAM,KAAK;AACb,EAAE,SAAM,GAAG;AACX,EAAE,aAAU,KAAK,CAAC,YAAc,OAAI,eAAe,OAAO,GAAG,MAAQ,OAAI,aAAa,CAAC;AACvF,EAAE,aAAU,WAAW,KAAK,aAAa;AACzC,EAAE,UAAO,UAAU,GAAG;AACtB,EAAE,OAAI;AACP;AAEE,YAAS,CAAC,WAAW,SAAS,aAAa,UAAU,CAAC;;;AGhUjD,IAAMC,0BAAyB;AAC/B,IAAMC,cAAa;AACnB,IAAMC,oBAAmB;","names":["$","$$anchor","$","root","$$anchor","$","root","root_1","$$anchor","$","indexToColName","$","root","index","root","root_1","root_2","root_3","root_4","$$anchor","EditableTextNodeEditor","BubbleMenu","TemplateRenderer"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/pm": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.3.0"
+    "@pixerate/editor": "0.4.0"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"

package/src/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/src/index.ts

@@ -50,3 +50,5 @@ export type {
   ColorGradient,
   RichTextPresetOptions,
 } from "@pixerate/editor";
+
+export * from "./spreadsheet";

package/src/spreadsheet/FormulaBar.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { indexToColName } from '@pixerate/editor';
+
+  interface Props {
+    activeCoord?: { row: number; col: number } | null;
+    value: string;
+    onChange?: (val: string) => void;
+    onCommit?: (val: string) => void;
+    onCancel?: () => void;
+  }
+
+  let {
+    activeCoord = null,
+    value = $bindable(''),
+    onChange,
+    onCommit,
+    onCancel
+  }: Props = $props();
+
+  let coordLabel = $derived.by(() => {
+    if (!activeCoord) return '--';
+    const colName = indexToColName(activeCoord.col);
+    return `${colName}${activeCoord.row + 1}`;
+  });
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onCommit?.(value);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel?.();
+    }
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    value = target.value;
+    onChange?.(target.value);
+  }
+</script>
+
+<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">
+    {coordLabel}
+  </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))"
+    {value}
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+  />
+</div>

package/src/spreadsheet/SpreadsheetEditor.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { indexToColName, type SpreadsheetColumn, type SpreadsheetRow, type CellData } from '@pixerate/editor';
+  import FormulaBar from './FormulaBar.svelte';
+  import { createReactiveSpreadsheet } from './spreadsheet.svelte';
+
+  interface Props {
+    sheetState?: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    customCellRenderer?: Snippet<[{ row: SpreadsheetRow; col: SpreadsheetColumn; cell: CellData }]>;
+    onAddColumnClick?: () => void;
+    onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
+  }
+
+  let {
+    sheetState = createReactiveSpreadsheet(),
+    readOnly = false,
+    customCellRenderer,
+    onAddColumnClick,
+    onColumnHeaderClick
+  }: Props = $props();
+
+  let gridContainer = $state<HTMLDivElement | null>(null);
+  let resizingColId = $state<string | null>(null);
+  let resizeStartX = $state(0);
+  let resizeStartWidth = $state(0);
+
+  // Active cell formula bar binding
+  let activeRawValue = $derived.by(() => {
+    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: number, cIdx: number, e: MouseEvent) {
+    if (sheetState.editingCell && (sheetState.editingCell.row !== rIdx || sheetState.editingCell.col !== cIdx)) {
+      sheetState.commitEditing();
+    }
+    sheetState.selectCell(rIdx, cIdx, e.shiftKey);
+  }
+
+  function handleCellDblClick(rIdx: number, cIdx: number) {
+    if (readOnly) return;
+    const col = sheetState.document.columns[cIdx];
+    if (col?.readOnly) return;
+    sheetState.startEditing(rIdx, cIdx);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    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) {
+      // Direct typing into cell starts editing
+      const col = sheetState.document.columns[sheetState.activeCell.col];
+      if (!col?.readOnly) {
+        sheetState.startEditing(sheetState.activeCell.row, sheetState.activeCell.col, e.key);
+      }
+    }
+  }
+
+  function handleResizeStart(colId: string, width: number, e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    resizingColId = colId;
+    resizeStartX = e.clientX;
+    resizeStartWidth = width;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      if (!resizingColId) return;
+      const delta = moveEvent.clientX - resizeStartX;
+      sheetState.setColumnWidth(resizingColId, Math.max(60, resizeStartWidth + delta));
+    };
+
+    const handleMouseUp = () => {
+      resizingColId = null;
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }
+
+  function isCellSelected(rIdx: number, cIdx: number): boolean {
+    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: number, cIdx: number): boolean {
+    return sheetState.activeCell?.row === rIdx && sheetState.activeCell?.col === cIdx;
+  }
+</script>
+
+<div
+  bind:this={gridContainer}
+  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"
+  onkeydown={handleKeyDown}
+  role="grid"
+  aria-label="Spreadsheet"
+>
+  <!-- Formula Bar -->
+  <FormulaBar
+    activeCoord={sheetState.activeCell}
+    value={sheetState.editingCell ? sheetState.draftValue : activeRawValue}
+    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();
+    }}
+  />
+
+  <!-- Main Scrollable Grid -->
+  <div class="relative flex-1 overflow-auto">
+    <table class="border-collapse table-fixed w-max min-w-full">
+      <!-- Table Header Columns -->
+      <thead>
+        <tr class="h-7 bg-muted/60 sticky top-0 z-20 border-b border-border shadow-xs">
+          <!-- Top Left Corner Cell -->
+          <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>
+          {#each sheetState.document.columns as col, cIdx (col.id)}
+            <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"
+              style="width: {col.width || 130}px; min-width: {col.width || 130}px; max-width: {col.width || 130}px;"
+              onclick={() => onColumnHeaderClick?.(col)}
+            >
+              <div class="flex items-center justify-between gap-1 truncate">
+                <span class="truncate font-semibold text-foreground text-xs">{col.title}</span>
+                <span class="text-[10px] text-muted-foreground/70 font-mono font-normal">({col.key})</span>
+              </div>
+              <!-- Column Resize Handle -->
+              <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"
+                onmousedown={(e) => handleResizeStart(col.id, col.width || 130, e)}
+                role="separator"
+                aria-orientation="vertical"
+              ></div>
+            </th>
+          {/each}
+          {#if onAddColumnClick}
+            <th class="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">
+              <span class="text-xs font-bold text-muted-foreground">+</span>
+            </th>
+          {/if}
+        </tr>
+      </thead>
+
+      <!-- Table Body Rows -->
+      <tbody>
+        {#each sheetState.document.rows as row, rIdx (row.id)}
+          <tr class="border-b border-border hover:bg-muted/10 transition-colors" style="height: {row.height || 32}px;">
+            <!-- Row Header Index -->
+            <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">
+              {rIdx + 1}
+            </td>
+
+            <!-- Cells -->
+            {#each sheetState.document.columns as col, cIdx (col.id)}
+              {@const cell = sheetState.getCell(row.id, col.id)}
+              {@const selected = isCellSelected(rIdx, cIdx)}
+              {@const active = isActiveCell(rIdx, cIdx)}
+              {@const isEditing = sheetState.editingCell?.row === rIdx && sheetState.editingCell?.col === cIdx}
+
+              <td
+                class="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}px; min-width: {col.width || 130}px; max-width: {col.width || 130}px;"
+                onclick={(e) => handleCellClick(rIdx, cIdx, e)}
+                ondblclick={() => handleCellDblClick(rIdx, cIdx)}
+              >
+                {#if isEditing}
+                  <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"
+                    bind:value={sheetState.draftValue}
+                    onblur={() => sheetState.commitEditing()}
+                    
+                  />
+                {:else if customCellRenderer}
+                  {@render customCellRenderer({ row, col, cell })}
+                {:else}
+                  <span class="truncate block {cell.error ? 'text-destructive font-semibold' : ''}">
+                    {cell.error || (cell.value ?? '')}
+                  </span>
+                {/if}
+              </td>
+            {/each}
+            {#if onAddColumnClick}
+              <td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>
+            {/if}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/spreadsheet/index.ts

@@ -0,0 +1,3 @@
+export { default as SpreadsheetEditor } from './SpreadsheetEditor.svelte';
+export { default as FormulaBar } from './FormulaBar.svelte';
+export * from './spreadsheet.svelte';

package/src/spreadsheet/spreadsheet.svelte.ts

@@ -0,0 +1,159 @@
+import {
+  SpreadsheetController,
+  type SpreadsheetControllerOptions,
+  type SpreadsheetDocument,
+  type CellCoordinate,
+  type CellRange,
+  type CellData,
+  type SpreadsheetColumn,
+  type SpreadsheetRow,
+  type SpreadsheetDataSource
+} from '@pixerate/editor';
+
+export function createReactiveSpreadsheet(options: SpreadsheetControllerOptions = {}) {
+  let doc = $state<SpreadsheetDocument>({
+    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 = $state<CellCoordinate | null>(null);
+  let selectedRange = $state<CellRange | null>(null);
+  let editingCell = $state<CellCoordinate | null>(null);
+  let draftValue = $state<string>('');
+
+  const controller = new SpreadsheetController({
+    ...options,
+    document: options.document,
+    onDocumentChange: (updated) => {
+      doc = { ...updated };
+      options.onDocumentChange?.(updated);
+    },
+    onSelectionChange: (active, range) => {
+      activeCell = active;
+      selectedRange = range;
+      options.onSelectionChange?.(active, range);
+    },
+    onCellCommit: (rowId, colId, raw, value) => {
+      options.onCellCommit?.(rowId, colId, raw, value);
+    }
+  });
+
+  // Keep initial states aligned
+  doc = { ...controller.document };
+  activeCell = controller.activeCell;
+  selectedRange = controller.selectedRange;
+
+  return {
+    get document() {
+      return doc;
+    },
+    get activeCell() {
+      return activeCell;
+    },
+    get selectedRange() {
+      return selectedRange;
+    },
+    get editingCell() {
+      return editingCell;
+    },
+    get draftValue() {
+      return draftValue;
+    },
+    set draftValue(val: string) {
+      draftValue = val;
+      controller.draftValue = val;
+    },
+    controller,
+
+    getCell(rowId: string, colId: string): CellData {
+      return controller.getCell(rowId, colId);
+    },
+    setCellValue(rowId: string, colId: string, raw: string) {
+      controller.setCellValue(rowId, colId, raw);
+      doc = { ...controller.document };
+    },
+    selectCell(row: number, col: number, extendSelection = false) {
+      controller.selectCell(row, col, extendSelection);
+      activeCell = controller.activeCell;
+      selectedRange = controller.selectedRange;
+    },
+    selectRange(range: CellRange) {
+      controller.selectRange(range);
+      selectedRange = controller.selectedRange;
+    },
+    startEditing(row?: number, col?: number, initialVal?: string) {
+      controller.startEditing(row, col, initialVal);
+      activeCell = controller.activeCell;
+      editingCell = controller.editingCell;
+      draftValue = controller.draftValue;
+    },
+    commitEditing(val?: string) {
+      controller.commitEditing(val);
+      editingCell = null;
+      draftValue = '';
+      doc = { ...controller.document };
+    },
+    cancelEditing() {
+      controller.cancelEditing();
+      editingCell = null;
+      draftValue = '';
+    },
+    moveCursor(dir: 'up' | 'down' | 'left' | 'right', extend = false) {
+      controller.moveCursor(dir, extend);
+      activeCell = controller.activeCell;
+      selectedRange = controller.selectedRange;
+    },
+    insertColumn(index: number, config?: Partial<SpreadsheetColumn>) {
+      controller.insertColumn(index, config);
+      doc = { ...controller.document };
+    },
+    deleteColumn(colId: string) {
+      controller.deleteColumn(colId);
+      doc = { ...controller.document };
+    },
+    insertRow(index: number, config?: Partial<SpreadsheetRow>) {
+      controller.insertRow(index, config);
+      doc = { ...controller.document };
+    },
+    deleteRow(rowId: string) {
+      controller.deleteRow(rowId);
+      doc = { ...controller.document };
+    },
+    setColumnWidth(colId: string, width: number) {
+      controller.setColumnWidth(colId, width);
+      doc = { ...controller.document };
+    },
+    registerDataSource(ds: SpreadsheetDataSource) {
+      controller.registerDataSource(ds);
+      doc = { ...controller.document };
+    },
+    setPrimaryDataSource(id: string | undefined) {
+      controller.setPrimaryDataSource(id);
+      doc = { ...controller.document };
+    },
+    recalculateAll() {
+      controller.recalculateAll();
+      doc = { ...controller.document };
+    },
+    exportToTsv() {
+      return controller.exportToTsv();
+    },
+    importFromTsv(data: string) {
+      controller.importFromTsv(data);
+      doc = { ...controller.document };
+    },
+    undo() {
+      controller.undo();
+      doc = { ...controller.document };
+    },
+    redo() {
+      controller.redo();
+      doc = { ...controller.document };
+    }
+  };
+}