@pixerate/editor-svelte 0.8.1 → 0.9.0

package/dist/index.js

@@ -229,29 +229,144 @@ function TemplateRenderer($$anchor, $$props) {
 }
 $4.delegate(["click"]);
 
+// src/navigationGuard.ts
+function navigationGuard(node, options) {
+  let isDirty = options.isDirty;
+  let enabled = options.enabled ?? true;
+  let onBlocked = options.onBlocked;
+  function handleBeforeUnload(e) {
+    if (!enabled || !isDirty) return;
+    e.preventDefault();
+    e.returnValue = "";
+  }
+  function handleClick(e) {
+    if (!enabled || !isDirty) return;
+    const target = e.target;
+    const anchor = target?.closest?.("a");
+    if (!anchor) return;
+    if (anchor.target === "_blank") return;
+    if (typeof window !== "undefined") {
+      const isInternal = anchor.host === window.location.host;
+      if (!isInternal) return;
+      if (anchor.pathname === window.location.pathname && anchor.search === window.location.search) {
+        return;
+      }
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const href = anchor.href;
+    onBlocked?.(href);
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+  }
+  node.addEventListener("click", handleClick, { capture: true });
+  return {
+    update(newOptions) {
+      isDirty = newOptions.isDirty;
+      enabled = newOptions.enabled ?? true;
+      onBlocked = newOptions.onBlocked;
+    },
+    destroy() {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
+      }
+      node.removeEventListener("click", handleClick, { capture: true });
+    }
+  };
+}
+
+// src/createNavigationGuard.svelte.ts
+import * as $5 from "svelte/internal/client";
+function createNavigationGuard(options) {
+  let showConfirm = $5.state(false);
+  let pendingUrl = $5.state(null);
+  const getIsDirty = () => typeof options.isDirty === "function" ? options.isDirty() : options.isDirty;
+  const getEnabled = () => typeof options.enabled === "function" ? options.enabled() : options.enabled ?? true;
+  function handleBeforeUnload(e) {
+    if (!getEnabled() || !getIsDirty()) return;
+    e.preventDefault();
+    e.returnValue = "";
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+  }
+  function intercept(url) {
+    if (getEnabled() && getIsDirty()) {
+      $5.set(pendingUrl, url, true);
+      $5.set(showConfirm, true);
+      options.onBlocked?.(url);
+      return true;
+    }
+    return false;
+  }
+  function confirmLeave() {
+    $5.set(showConfirm, false);
+    const target = $5.get(pendingUrl);
+    if (target) {
+      if (options.onNavigate) {
+        options.onNavigate(target);
+      } else if (typeof window !== "undefined") {
+        window.location.href = target;
+      }
+    }
+  }
+  function cancelLeave() {
+    $5.set(showConfirm, false);
+    $5.set(pendingUrl, null);
+  }
+  function destroy() {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    }
+  }
+  return {
+    get showConfirm() {
+      return $5.get(showConfirm);
+    },
+    setShowConfirm(val) {
+      $5.set(showConfirm, val, true);
+    },
+    get pendingUrl() {
+      return $5.get(pendingUrl);
+    },
+    intercept,
+    confirmLeave,
+    cancelLeave,
+    destroy
+  };
+}
+
+// src/index.ts
+import {
+  DirtyTracker,
+  createDirtyTracker,
+  defaultIsEqual
+} from "@pixerate/editor";
+
 // src/spreadsheet/SpreadsheetEditor.svelte
 import "svelte/internal/disclose-version";
-import * as $7 from "svelte/internal/client";
+import * as $8 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 * as $6 from "svelte/internal/client";
 import { indexToColName } from "@pixerate/editor";
-var root4 = $5.from_html(`<div><div class="flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground"> </div> <div class="flex items-center text-muted-foreground select-none"><span class="italic font-serif font-bold text-sm text-primary">fx</span></div> <input type="text" class="flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded" placeholder="Enter a value or formula (e.g. =SUM(A1:A5))"/></div>`);
+var root4 = $6.from_html(`<div><div class="flex h-6 min-w-[3rem] items-center justify-center rounded border border-border bg-background px-1.5 font-semibold text-foreground"> </div> <div class="flex items-center text-muted-foreground select-none"><span class="italic font-serif font-bold text-sm text-primary">fx</span></div> <input type="text" class="flex-1 bg-transparent px-2 py-0.5 outline-none font-sans text-xs text-foreground placeholder:text-muted-foreground/60 focus:bg-background focus:ring-1 focus:ring-primary rounded" placeholder="Enter a value or formula (e.g. =SUM(A1:A5))"/></div>`);
 function FormulaBar($$anchor, $$props) {
-  $5.push($$props, true);
-  let sheetState = $5.prop($$props, "sheetState", 7), activeCoord = $5.prop($$props, "activeCoord", 3, null), value = $5.prop($$props, "value", 15, ""), className = $5.prop($$props, "class", 3, "");
-  let effectiveCoord = $5.derived(() => {
+  $6.push($$props, true);
+  let sheetState = $6.prop($$props, "sheetState", 7), activeCoord = $6.prop($$props, "activeCoord", 3, null), value = $6.prop($$props, "value", 15, ""), className = $6.prop($$props, "class", 3, "");
+  let effectiveCoord = $6.derived(() => {
     if (sheetState()) return sheetState().activeCell;
     return activeCoord();
   });
-  let coordLabel = $5.derived(() => {
-    if (!$5.get(effectiveCoord)) return "--";
-    const colName = indexToColName($5.get(effectiveCoord).col);
-    return `${colName}${$5.get(effectiveCoord).row + 1}`;
+  let coordLabel = $6.derived(() => {
+    if (!$6.get(effectiveCoord)) return "--";
+    const colName = indexToColName($6.get(effectiveCoord).col);
+    return `${colName}${$6.get(effectiveCoord).row + 1}`;
   });
-  let effectiveValue = $5.derived(() => {
+  let effectiveValue = $6.derived(() => {
     if (sheetState()) {
       if (sheetState().editingCell) return sheetState().draftValue;
       if (!sheetState().activeCell) return "";
@@ -269,11 +384,11 @@ function FormulaBar($$anchor, $$props) {
         const row = sheetState().document.rows[sheetState().activeCell.row];
         const col = sheetState().document.columns[sheetState().activeCell.col];
         if (row && col) {
-          sheetState().setCellValue(row.id, col.id, $5.get(effectiveValue));
+          sheetState().setCellValue(row.id, col.id, $6.get(effectiveValue));
         }
         sheetState().commitEditing();
       }
-      $$props.onCommit?.($5.get(effectiveValue));
+      $$props.onCommit?.($6.get(effectiveValue));
     } else if (e.key === "Escape") {
       e.preventDefault();
       if (sheetState()) {
@@ -295,28 +410,28 @@ function FormulaBar($$anchor, $$props) {
     $$props.onChange?.(target.value);
   }
   var div = root4();
-  var div_1 = $5.child(div);
-  var text = $5.only_child(div_1, true);
-  var input = $5.sibling(div_1, 4);
-  $5.remove_input_defaults(input);
-  $5.reset(div);
-  $5.template_effect(() => {
-    $5.set_class(div, 1, `flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono ${className() ?? ""}`);
-    $5.set_text(text, $5.get(coordLabel));
-    $5.set_value(input, $5.get(effectiveValue));
+  var div_1 = $6.child(div);
+  var text = $6.only_child(div_1, true);
+  var input = $6.sibling(div_1, 4);
+  $6.remove_input_defaults(input);
+  $6.reset(div);
+  $6.template_effect(() => {
+    $6.set_class(div, 1, `flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5 text-xs font-mono ${className() ?? ""}`);
+    $6.set_text(text, $6.get(coordLabel));
+    $6.set_value(input, $6.get(effectiveValue));
   });
-  $5.delegated("input", input, handleInput);
-  $5.delegated("keydown", input, handleKeyDown);
-  $5.append($$anchor, div);
-  $5.pop();
+  $6.delegated("input", input, handleInput);
+  $6.delegated("keydown", input, handleKeyDown);
+  $6.append($$anchor, div);
+  $6.pop();
 }
-$5.delegate(["input", "keydown"]);
+$6.delegate(["input", "keydown"]);
 
 // src/spreadsheet/spreadsheet.svelte.ts
-import * as $6 from "svelte/internal/client";
+import * as $7 from "svelte/internal/client";
 import { SpreadsheetController } from "@pixerate/editor";
 function createReactiveSpreadsheet(options = {}) {
-  let doc = $6.state($6.proxy({
+  let doc = $7.state($7.proxy({
     id: options.document?.id || `sheet_${Date.now()}`,
     name: options.document?.name || "Sheet 1",
     columns: options.document?.columns || [],
@@ -325,47 +440,47 @@ function createReactiveSpreadsheet(options = {}) {
     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("");
+  let activeCell = $7.state(null);
+  let selectedRange = $7.state(null);
+  let editingCell = $7.state(null);
+  let draftValue = $7.state("");
   const controller = new SpreadsheetController({
     ...options,
     document: options.document,
     onDocumentChange: (updated) => {
-      $6.set(doc, { ...updated }, true);
+      $7.set(doc, { ...updated }, true);
       options.onDocumentChange?.(updated);
     },
     onSelectionChange: (active, range) => {
-      $6.set(activeCell, active, true);
-      $6.set(selectedRange, range, true);
+      $7.set(activeCell, active, true);
+      $7.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);
+  $7.set(doc, { ...controller.document }, true);
+  $7.set(activeCell, controller.activeCell, true);
+  $7.set(selectedRange, controller.selectedRange, true);
   return {
     get document() {
-      return $6.get(doc);
+      return $7.get(doc);
     },
     get activeCell() {
-      return $6.get(activeCell);
+      return $7.get(activeCell);
     },
     get selectedRange() {
-      return $6.get(selectedRange);
+      return $7.get(selectedRange);
     },
     get editingCell() {
-      return $6.get(editingCell);
+      return $7.get(editingCell);
     },
     get draftValue() {
-      return $6.get(draftValue);
+      return $7.get(draftValue);
     },
     set draftValue(val) {
-      $6.set(draftValue, val, true);
+      $7.set(draftValue, val, true);
       controller.draftValue = val;
     },
     controller,
@@ -374,124 +489,124 @@ function createReactiveSpreadsheet(options = {}) {
     },
     setCellValue(rowId, colId, raw) {
       controller.setCellValue(rowId, colId, raw);
-      $6.set(doc, { ...controller.document }, true);
+      $7.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);
+      $7.set(activeCell, controller.activeCell, true);
+      $7.set(selectedRange, controller.selectedRange, true);
     },
     selectRange(range) {
       controller.selectRange(range);
-      $6.set(selectedRange, controller.selectedRange, true);
+      $7.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);
+      $7.set(activeCell, controller.activeCell, true);
+      $7.set(editingCell, controller.editingCell, true);
+      $7.set(draftValue, controller.draftValue, true);
     },
     commitEditing(val) {
       controller.commitEditing(val);
-      $6.set(editingCell, null);
-      $6.set(draftValue, "");
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(editingCell, null);
+      $7.set(draftValue, "");
+      $7.set(doc, { ...controller.document }, true);
     },
     cancelEditing() {
       controller.cancelEditing();
-      $6.set(editingCell, null);
-      $6.set(draftValue, "");
+      $7.set(editingCell, null);
+      $7.set(draftValue, "");
     },
     moveCursor(dir, extend = false) {
       controller.moveCursor(dir, extend);
-      $6.set(activeCell, controller.activeCell, true);
-      $6.set(selectedRange, controller.selectedRange, true);
+      $7.set(activeCell, controller.activeCell, true);
+      $7.set(selectedRange, controller.selectedRange, true);
     },
     insertColumn(index2, config) {
       controller.insertColumn(index2, config);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     deleteColumn(colId) {
       controller.deleteColumn(colId);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     insertRow(index2, config) {
       controller.insertRow(index2, config);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     deleteRow(rowId) {
       controller.deleteRow(rowId);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     setColumnWidth(colId, width) {
       controller.setColumnWidth(colId, width);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     autoFitColumnWidth(colId, customWidth) {
       controller.autoFitColumnWidth(colId, customWidth);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     loadDocument(document2) {
       controller.loadDocument(document2);
-      $6.set(doc, { ...controller.document }, true);
-      $6.set(activeCell, controller.activeCell, true);
-      $6.set(selectedRange, controller.selectedRange, true);
-      $6.set(editingCell, controller.editingCell, true);
-      $6.set(draftValue, controller.draftValue, true);
+      $7.set(doc, { ...controller.document }, true);
+      $7.set(activeCell, controller.activeCell, true);
+      $7.set(selectedRange, controller.selectedRange, true);
+      $7.set(editingCell, controller.editingCell, true);
+      $7.set(draftValue, controller.draftValue, true);
     },
     syncWithDataSource() {
       controller.syncWithDataSource();
       controller.recalculateAll();
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     registerDataSource(ds) {
       controller.registerDataSource(ds);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     setPrimaryDataSource(id) {
       controller.setPrimaryDataSource(id);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     recalculateAll() {
       controller.recalculateAll();
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     exportToTsv() {
       return controller.exportToTsv();
     },
     importFromTsv(data) {
       controller.importFromTsv(data);
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     undo() {
       controller.undo();
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     },
     redo() {
       controller.redo();
-      $6.set(doc, { ...controller.document }, true);
+      $7.set(doc, { ...controller.document }, true);
     }
   };
 }
 
 // src/spreadsheet/SpreadsheetEditor.svelte
-var root5 = $7.from_html(`<th><div class="flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate"><span class="truncate font-semibold text-foreground text-xs min-w-0"> </span> <span class="text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0"> </span></div>  <div class="col-resize-handle svelte-m799ch" style="position: absolute; top: 0; bottom: 0; width: 12px; right: -6px; cursor: col-resize !important; z-index: 20; display: flex; justify-content: center; touch-action: none;" role="separator" aria-orientation="vertical" tabindex="-1"><div class="col-resize-handle-line svelte-m799ch"></div></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 svelte-m799ch" 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 style="max-width: 0; overflow: hidden;"><!></td>`);
-var root_5 = $7.from_html(`<td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border svelte-m799ch"></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 svelte-m799ch"> </td><!><!><td class="border-b border-border bg-transparent p-0 svelte-m799ch"></td></tr>`);
-var root_7 = $7.from_html(`<div tabindex="0" role="grid" aria-label="Spreadsheet"><!> <div class="relative flex-1 overflow-auto"><table class="border-collapse table-fixed w-max min-w-full svelte-m799ch"><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 svelte-m799ch">#</th><!><!><th class="border-b border-border bg-transparent p-0 font-normal svelte-m799ch"></th></tr></thead><tbody></tbody></table></div></div>`);
+var root5 = $8.from_html(`<th><div class="flex items-center justify-between gap-1 min-w-0 overflow-hidden truncate"><span class="truncate font-semibold text-foreground text-xs min-w-0"> </span> <span class="text-[10px] text-muted-foreground/70 font-mono font-normal shrink-0"> </span></div>  <div class="col-resize-handle svelte-m799ch" style="position: absolute; top: 0; bottom: 0; width: 12px; right: -6px; cursor: col-resize !important; z-index: 20; display: flex; justify-content: center; touch-action: none;" role="separator" aria-orientation="vertical" tabindex="-1"><div class="col-resize-handle-line svelte-m799ch"></div></div></th>`);
+var root_13 = $8.from_html(`<th class="w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors svelte-m799ch" title="Add Column"><span class="text-xs font-bold text-muted-foreground">+</span></th>`);
+var root_22 = $8.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 = $8.from_html(`<span> </span>`);
+var root_42 = $8.from_html(`<td style="max-width: 0; overflow: hidden;"><!></td>`);
+var root_5 = $8.from_html(`<td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border svelte-m799ch"></td>`);
+var root_6 = $8.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 svelte-m799ch"> </td><!><!><td class="border-b border-border bg-transparent p-0 svelte-m799ch"></td></tr>`);
+var root_7 = $8.from_html(`<div tabindex="0" role="grid" aria-label="Spreadsheet"><!> <div class="relative flex-1 overflow-auto"><table class="border-collapse table-fixed w-max min-w-full svelte-m799ch"><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 svelte-m799ch">#</th><!><!><th class="border-b border-border bg-transparent p-0 font-normal svelte-m799ch"></th></tr></thead><tbody></tbody></table></div></div>`);
 function SpreadsheetEditor($$anchor, $$props) {
-  $7.push($$props, true);
-  let sheetState = $7.prop($$props, "sheetState", 23, createReactiveSpreadsheet), readOnly = $7.prop($$props, "readOnly", 3, false), readonly = $7.prop($$props, "readonly", 3, false), showFormulaBar = $7.prop($$props, "showFormulaBar", 3, true), className = $7.prop($$props, "class", 3, "");
-  let isReadOnly = $7.derived(() => readOnly() || readonly());
-  let gridContainer = $7.state(null);
-  let resizingColId = $7.state(null);
-  let hoveredColId = $7.state(null);
-  let resizeStartX = $7.state(0);
-  let resizeStartWidth = $7.state(0);
+  $8.push($$props, true);
+  let sheetState = $8.prop($$props, "sheetState", 23, createReactiveSpreadsheet), readOnly = $8.prop($$props, "readOnly", 3, false), readonly = $8.prop($$props, "readonly", 3, false), showFormulaBar = $8.prop($$props, "showFormulaBar", 3, true), className = $8.prop($$props, "class", 3, "");
+  let isReadOnly = $8.derived(() => readOnly() || readonly());
+  let gridContainer = $8.state(null);
+  let resizingColId = $8.state(null);
+  let hoveredColId = $8.state(null);
+  let resizeStartX = $8.state(0);
+  let resizeStartWidth = $8.state(0);
   function handleCellClick(rIdx, cIdx, e) {
     if (sheetState().editingCell && (sheetState().editingCell.row !== rIdx || sheetState().editingCell.col !== cIdx)) {
       sheetState().commitEditing();
@@ -499,7 +614,7 @@ function SpreadsheetEditor($$anchor, $$props) {
     sheetState().selectCell(rIdx, cIdx, e.shiftKey);
   }
   function handleCellDblClick(rIdx, cIdx) {
-    if ($7.get(isReadOnly)) return;
+    if ($8.get(isReadOnly)) return;
     const col = sheetState().document.columns[cIdx];
     if (col?.readOnly) return;
     sheetState().startEditing(rIdx, cIdx);
@@ -537,11 +652,11 @@ function SpreadsheetEditor($$anchor, $$props) {
     } else if (e.key === "Enter") {
       e.preventDefault();
       const col = sheetState().document.columns[sheetState().activeCell.col];
-      if (!$7.get(isReadOnly) && !col?.readOnly) {
+      if (!$8.get(isReadOnly) && !col?.readOnly) {
         sheetState().startEditing();
       }
     } else if (e.key === "Backspace" || e.key === "Delete") {
-      if ($7.get(isReadOnly)) return;
+      if ($8.get(isReadOnly)) return;
       const row = sheetState().document.rows[sheetState().activeCell.row];
       const col = sheetState().document.columns[sheetState().activeCell.col];
       if (row && col && !col.readOnly) {
@@ -559,7 +674,7 @@ function SpreadsheetEditor($$anchor, $$props) {
       e.preventDefault();
       const tsv = sheetState().exportToTsv();
       navigator.clipboard?.writeText(tsv);
-    } else if (!$7.get(isReadOnly) && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    } else if (!$8.get(isReadOnly) && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
       const col = sheetState().document.columns[sheetState().activeCell.col];
       if (!col?.readOnly) {
         sheetState().startEditing(sheetState().activeCell.row, sheetState().activeCell.col, e.key);
@@ -569,9 +684,9 @@ function SpreadsheetEditor($$anchor, $$props) {
   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);
+    $8.set(resizingColId, colId, true);
+    $8.set(resizeStartX, e.clientX, true);
+    $8.set(resizeStartWidth, width, true);
     if (typeof document !== "undefined") {
       document.body.style.cursor = "col-resize";
       document.body.style.userSelect = "none";
@@ -580,17 +695,17 @@ function SpreadsheetEditor($$anchor, $$props) {
     let pendingWidth = width;
     let hasDragged = false;
     const handleMouseMove = (moveEvent) => {
-      if (!$7.get(resizingColId)) return;
-      const delta = moveEvent.clientX - $7.get(resizeStartX);
+      if (!$8.get(resizingColId)) return;
+      const delta = moveEvent.clientX - $8.get(resizeStartX);
       if (Math.abs(delta) > 2) {
         hasDragged = true;
       }
-      pendingWidth = Math.max(30, $7.get(resizeStartWidth) + delta);
+      pendingWidth = Math.max(30, $8.get(resizeStartWidth) + delta);
       if (rafId === null) {
         rafId = requestAnimationFrame(() => {
           rafId = null;
-          if ($7.get(resizingColId)) {
-            sheetState().setColumnWidth($7.get(resizingColId), pendingWidth);
+          if ($8.get(resizingColId)) {
+            sheetState().setColumnWidth($8.get(resizingColId), pendingWidth);
           }
         });
       }
@@ -600,14 +715,14 @@ function SpreadsheetEditor($$anchor, $$props) {
         cancelAnimationFrame(rafId);
         rafId = null;
       }
-      if ($7.get(resizingColId) && hasDragged) {
-        sheetState().setColumnWidth($7.get(resizingColId), pendingWidth);
-        const col = sheetState().document.columns.find((c) => c.id === $7.get(resizingColId));
+      if ($8.get(resizingColId) && hasDragged) {
+        sheetState().setColumnWidth($8.get(resizingColId), pendingWidth);
+        const col = sheetState().document.columns.find((c) => c.id === $8.get(resizingColId));
         if (col && $$props.onColumnResize) {
           $$props.onColumnResize(col.id, col.width || pendingWidth);
         }
       }
-      $7.set(resizingColId, null);
+      $8.set(resizingColId, null);
       if (typeof document !== "undefined") {
         document.body.style.cursor = "";
         document.body.style.userSelect = "";
@@ -670,14 +785,14 @@ function SpreadsheetEditor($$anchor, $$props) {
     const col = sheetState().document.columns.find((c) => c.id === colId);
     if (!col) return;
     let calculatedWidth = 0;
-    if ($7.get(gridContainer) && typeof document !== "undefined") {
-      const table = $7.get(gridContainer).querySelector("table");
+    if ($8.get(gridContainer) && typeof document !== "undefined") {
+      const table = $8.get(gridContainer).querySelector("table");
       if (table) {
         const thElements = table.querySelectorAll("thead th");
         const th = thElements[colIndex + 1];
         if (th) {
           const headerInner = th.firstElementChild || th;
-          const headerW = measureElementContentWidth(headerInner, $7.get(gridContainer));
+          const headerW = measureElementContentWidth(headerInner, $8.get(gridContainer));
           calculatedWidth = Math.max(calculatedWidth, headerW + 28);
         }
         const rows = table.querySelectorAll("tbody tr");
@@ -686,7 +801,7 @@ function SpreadsheetEditor($$anchor, $$props) {
           const tr = rows[r];
           const td = tr.children[colIndex + 1];
           if (td) {
-            const cellW = measureElementContentWidth(td, $7.get(gridContainer));
+            const cellW = measureElementContentWidth(td, $8.get(gridContainer));
             calculatedWidth = Math.max(calculatedWidth, cellW + 20);
           }
         }
@@ -731,7 +846,7 @@ function SpreadsheetEditor($$anchor, $$props) {
     return sheetState().activeCell?.row === rIdx && sheetState().activeCell?.col === cIdx;
   }
   var div = root_7();
-  var node_1 = $7.child(div);
+  var node_1 = $8.child(div);
   {
     var consequent = ($$anchor2) => {
       FormulaBar($$anchor2, {
@@ -740,137 +855,137 @@ function SpreadsheetEditor($$anchor, $$props) {
         }
       });
     };
-    $7.if(node_1, ($$render) => {
+    $8.if(node_1, ($$render) => {
       if (showFormulaBar()) $$render(consequent);
     });
   }
-  var div_1 = $7.sibling(node_1, 2);
-  var table_1 = $7.child(div_1);
-  var thead = $7.child(table_1);
-  var tr_1 = $7.child(thead);
-  var node_2 = $7.sibling($7.child(tr_1));
-  $7.each(node_2, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor2, col, cIdx) => {
+  var div_1 = $8.sibling(node_1, 2);
+  var table_1 = $8.child(div_1);
+  var thead = $8.child(table_1);
+  var tr_1 = $8.child(thead);
+  var node_2 = $8.sibling($8.child(tr_1));
+  $8.each(node_2, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor2, col, cIdx) => {
     var th_1 = root5();
-    var div_2 = $7.child(th_1);
-    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);
-    var div_4 = $7.only_child(div_3);
-    $7.reset(th_1);
-    $7.template_effect(() => {
-      $7.set_class(th_1, 1, `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${$$props.onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`, "svelte-m799ch");
-      $7.set_style(th_1, `width: ${($7.get(col).width || 130) ?? ""}px; min-width: ${($7.get(col).width || 130) ?? ""}px; max-width: ${($7.get(col).width || 130) ?? ""}px; overflow: hidden;`);
-      $7.set_text(text, $7.get(col).title);
-      $7.set_text(text_1, `(${$7.get(col).key ?? ""})`);
-      $7.set_style(div_4, `width: 2px; height: 100%; pointer-events: none; transition: background-color 150ms ease; background-color: ${$7.get(resizingColId) === $7.get(col).id ? "var(--primary, #6366f1)" : $7.get(hoveredColId) === $7.get(col).id ? "color-mix(in srgb, var(--primary, #6366f1) 75%, transparent)" : "transparent"};`);
+    var div_2 = $8.child(th_1);
+    var span = $8.child(div_2);
+    var text = $8.only_child(span, true);
+    var span_1 = $8.sibling(span, 2);
+    var text_1 = $8.only_child(span_1);
+    $8.reset(div_2);
+    var div_3 = $8.sibling(div_2, 2);
+    var div_4 = $8.only_child(div_3);
+    $8.reset(th_1);
+    $8.template_effect(() => {
+      $8.set_class(th_1, 1, `relative border-r border-border px-2 text-left font-medium text-muted-foreground hover:bg-muted/90 transition-colors group overflow-hidden max-w-0 ${$$props.onColumnHeaderClick ? "cursor-pointer" : "cursor-default"}`, "svelte-m799ch");
+      $8.set_style(th_1, `width: ${($8.get(col).width || 130) ?? ""}px; min-width: ${($8.get(col).width || 130) ?? ""}px; max-width: ${($8.get(col).width || 130) ?? ""}px; overflow: hidden;`);
+      $8.set_text(text, $8.get(col).title);
+      $8.set_text(text_1, `(${$8.get(col).key ?? ""})`);
+      $8.set_style(div_4, `width: 2px; height: 100%; pointer-events: none; transition: background-color 150ms ease; background-color: ${$8.get(resizingColId) === $8.get(col).id ? "var(--primary, #6366f1)" : $8.get(hoveredColId) === $8.get(col).id ? "color-mix(in srgb, var(--primary, #6366f1) 75%, transparent)" : "transparent"};`);
     });
-    $7.delegated("click", th_1, () => $$props.onColumnHeaderClick?.($7.get(col)));
-    $7.delegated("dblclick", th_1, (e) => handleHeaderDblClick($7.get(col).id, $7.get(cIdx), e));
-    $7.event("mouseenter", div_3, () => $7.set(hoveredColId, $7.get(col).id, true));
-    $7.event("mouseleave", div_3, () => {
-      if ($7.get(hoveredColId) === $7.get(col).id) $7.set(hoveredColId, null);
+    $8.delegated("click", th_1, () => $$props.onColumnHeaderClick?.($8.get(col)));
+    $8.delegated("dblclick", th_1, (e) => handleHeaderDblClick($8.get(col).id, $8.get(cIdx), e));
+    $8.event("mouseenter", div_3, () => $8.set(hoveredColId, $8.get(col).id, true));
+    $8.event("mouseleave", div_3, () => {
+      if ($8.get(hoveredColId) === $8.get(col).id) $8.set(hoveredColId, null);
     });
-    $7.delegated("mousedown", div_3, (e) => handleResizeStart($7.get(col).id, $7.get(col).width || 130, e));
-    $7.delegated("dblclick", div_3, (e) => handleResizeDblClick($7.get(col).id, $7.get(cIdx), e));
-    $7.append($$anchor2, th_1);
+    $8.delegated("mousedown", div_3, (e) => handleResizeStart($8.get(col).id, $8.get(col).width || 130, e));
+    $8.delegated("dblclick", div_3, (e) => handleResizeDblClick($8.get(col).id, $8.get(cIdx), e));
+    $8.append($$anchor2, th_1);
   });
-  var node_3 = $7.sibling(node_2);
+  var node_3 = $8.sibling(node_2);
   {
     var consequent_1 = ($$anchor2) => {
       var th_2 = root_13();
-      $7.delegated("click", th_2, function(...$$args) {
+      $8.delegated("click", th_2, function(...$$args) {
         $$props.onAddColumnClick?.apply(this, $$args);
       });
-      $7.append($$anchor2, th_2);
+      $8.append($$anchor2, th_2);
     };
-    $7.if(node_3, ($$render) => {
+    $8.if(node_3, ($$render) => {
       if ($$props.onAddColumnClick) $$render(consequent_1);
     });
   }
-  $7.next();
-  $7.reset(tr_1);
-  $7.reset(thead);
-  var tbody = $7.sibling(thead);
-  $7.each(tbody, 23, () => sheetState().document.rows, (row) => row.id, ($$anchor2, row, rIdx) => {
+  $8.next();
+  $8.reset(tr_1);
+  $8.reset(thead);
+  var tbody = $8.sibling(thead);
+  $8.each(tbody, 23, () => sheetState().document.rows, (row) => row.id, ($$anchor2, row, rIdx) => {
     var tr_2 = root_6();
-    var td_1 = $7.child(tr_2);
-    var text_2 = $7.only_child(td_1, true);
-    var node_4 = $7.sibling(td_1);
-    $7.each(node_4, 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 = $8.child(tr_2);
+    var text_2 = $8.only_child(td_1, true);
+    var node_4 = $8.sibling(td_1);
+    $8.each(node_4, 19, () => sheetState().document.columns, (col) => col.id, ($$anchor3, col, cIdx) => {
+      const cell = $8.derived(() => sheetState().getCell($8.get(row).id, $8.get(col).id));
+      const selected = $8.derived(() => isCellSelected($8.get(rIdx), $8.get(cIdx)));
+      const active = $8.derived(() => isActiveCell($8.get(rIdx), $8.get(cIdx)));
+      const isEditing = $8.derived(() => sheetState().editingCell?.row === $8.get(rIdx) && sheetState().editingCell?.col === $8.get(cIdx));
       var td_2 = root_42();
-      var node_5 = $7.child(td_2);
+      var node_5 = $8.child(td_2);
       {
         var consequent_2 = ($$anchor4) => {
           var input = root_22();
-          $7.remove_input_defaults(input);
-          $7.event("blur", input, () => sheetState().commitEditing());
-          $7.bind_value(input, () => sheetState().draftValue, ($$value) => sheetState().draftValue = $$value);
-          $7.append($$anchor4, input);
+          $8.remove_input_defaults(input);
+          $8.event("blur", input, () => sheetState().commitEditing());
+          $8.bind_value(input, () => sheetState().draftValue, ($$value) => sheetState().draftValue = $$value);
+          $8.append($$anchor4, input);
         };
         var consequent_3 = ($$anchor4) => {
-          const cellArg = $7.derived(() => Object.assign({ row: $7.get(row), col: $7.get(col), cell: $7.get(cell) }, $7.get(cell)));
-          var fragment_1 = $7.comment();
-          var node_6 = $7.first_child(fragment_1);
-          $7.snippet(node_6, () => $$props.customCellRenderer, () => $7.get(cellArg), () => $7.get(col), () => $7.get(row));
-          $7.append($$anchor4, fragment_1);
+          const cellArg = $8.derived(() => Object.assign({ row: $8.get(row), col: $8.get(col), cell: $8.get(cell) }, $8.get(cell)));
+          var fragment_1 = $8.comment();
+          var node_6 = $8.first_child(fragment_1);
+          $8.snippet(node_6, () => $$props.customCellRenderer, () => $8.get(cellArg), () => $8.get(col), () => $8.get(row));
+          $8.append($$anchor4, fragment_1);
         };
         var alternate = ($$anchor4) => {
           var span_2 = root_32();
-          var text_3 = $7.only_child(span_2, true);
-          $7.template_effect(() => {
-            $7.set_class(span_2, 1, `truncate block max-w-full ${$7.get(cell).error ? "text-destructive font-semibold" : ""}`);
-            $7.set_text(text_3, $7.get(cell).error || ($7.get(cell).value ?? ""));
+          var text_3 = $8.only_child(span_2, true);
+          $8.template_effect(() => {
+            $8.set_class(span_2, 1, `truncate block max-w-full ${$8.get(cell).error ? "text-destructive font-semibold" : ""}`);
+            $8.set_text(text_3, $8.get(cell).error || ($8.get(cell).value ?? ""));
           });
-          $7.append($$anchor4, span_2);
+          $8.append($$anchor4, span_2);
         };
-        $7.if(node_5, ($$render) => {
-          if ($7.get(isEditing)) $$render(consequent_2);
+        $8.if(node_5, ($$render) => {
+          if ($8.get(isEditing)) $$render(consequent_2);
           else if ($$props.customCellRenderer) $$render(consequent_3, 1);
           else $$render(alternate, -1);
         });
       }
-      $7.reset(td_2);
-      $7.template_effect(() => $7.set_class(td_2, 1, `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${$7.get(selected) ? "bg-primary/10" : ""} ${$7.get(active) ? "ring-2 ring-primary ring-inset z-10" : ""}`, "svelte-m799ch"));
-      $7.delegated("click", td_2, (e) => handleCellClick($7.get(rIdx), $7.get(cIdx), e));
-      $7.delegated("dblclick", td_2, () => handleCellDblClick($7.get(rIdx), $7.get(cIdx)));
-      $7.append($$anchor3, td_2);
+      $8.reset(td_2);
+      $8.template_effect(() => $8.set_class(td_2, 1, `relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors ${$8.get(selected) ? "bg-primary/10" : ""} ${$8.get(active) ? "ring-2 ring-primary ring-inset z-10" : ""}`, "svelte-m799ch"));
+      $8.delegated("click", td_2, (e) => handleCellClick($8.get(rIdx), $8.get(cIdx), e));
+      $8.delegated("dblclick", td_2, () => handleCellDblClick($8.get(rIdx), $8.get(cIdx)));
+      $8.append($$anchor3, td_2);
     });
-    var node_7 = $7.sibling(node_4);
+    var node_7 = $8.sibling(node_4);
     {
       var consequent_4 = ($$anchor3) => {
         var td_3 = root_5();
-        $7.append($$anchor3, td_3);
+        $8.append($$anchor3, td_3);
       };
-      $7.if(node_7, ($$render) => {
+      $8.if(node_7, ($$render) => {
         if ($$props.onAddColumnClick) $$render(consequent_4);
       });
     }
-    $7.next();
-    $7.reset(tr_2);
-    $7.template_effect(() => {
-      $7.set_style(tr_2, `height: ${($7.get(row).height || 32) ?? ""}px;`);
-      $7.set_text(text_2, $7.get(rIdx) + 1);
+    $8.next();
+    $8.reset(tr_2);
+    $8.template_effect(() => {
+      $8.set_style(tr_2, `height: ${($8.get(row).height || 32) ?? ""}px;`);
+      $8.set_text(text_2, $8.get(rIdx) + 1);
     });
-    $7.append($$anchor2, tr_2);
+    $8.append($$anchor2, tr_2);
   });
-  $7.reset(tbody);
-  $7.reset(table_1);
-  $7.reset(div_1);
-  $7.reset(div);
-  $7.bind_this(div, ($$value) => $7.set(gridContainer, $$value), () => $7.get(gridContainer));
-  $7.template_effect(() => $7.set_class(div, 1, `flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs ${className() ?? ""}`, "svelte-m799ch"));
-  $7.delegated("keydown", div, handleKeyDown);
-  $7.append($$anchor, div);
-  $7.pop();
+  $8.reset(tbody);
+  $8.reset(table_1);
+  $8.reset(div_1);
+  $8.reset(div);
+  $8.bind_this(div, ($$value) => $8.set(gridContainer, $$value), () => $8.get(gridContainer));
+  $8.template_effect(() => $8.set_class(div, 1, `flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs ${className() ?? ""}`, "svelte-m799ch"));
+  $8.delegated("keydown", div, handleKeyDown);
+  $8.append($$anchor, div);
+  $8.pop();
 }
-$7.delegate(["keydown", "click", "dblclick", "mousedown"]);
+$8.delegate(["keydown", "click", "dblclick", "mousedown"]);
 
 // src/index.ts
 var EditableTextNodeEditor2 = EditableTextNodeEditor;
@@ -878,12 +993,17 @@ var BubbleMenu2 = BubbleMenu;
 var TemplateRenderer2 = TemplateRenderer;
 export {
   BubbleMenu2 as BubbleMenu,
+  DirtyTracker,
   EditableTextNodeEditor2 as EditableTextNodeEditor,
   FormulaBar,
   SpreadsheetEditor,
   TemplateRenderer2 as TemplateRenderer,
+  createDirtyTracker,
+  createNavigationGuard,
   createReactiveEditor,
   createReactiveSpreadsheet,
-  initiateEditor
+  defaultIsEqual,
+  initiateEditor,
+  navigationGuard
 };
 //# sourceMappingURL=index.js.map