@pixerate/editor-svelte 0.23.0 → 0.24.0

package/dist/review/review.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"review.svelte.d.ts","sourceRoot":"","sources":["../../src/review/review.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,EAAE,oBAGZ,CAAC;AAE3B,eAAO,MAAM,4BAA4B,EAAE,oBAKjB,CAAC;AAE3B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,YAAY,CAMpE;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAC/C,YAAY,GAAG,IAAI,CAErB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAC3C,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,CA4B/F;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,QAAQ,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,IAAI,IAAI,CAAC;IAClB,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CA+CxF"}
+{"version":3,"file":"review.svelte.d.ts","sourceRoot":"","sources":["../../src/review/review.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,EAAE,oBAGZ,CAAC;AAE3B,eAAO,MAAM,4BAA4B,EAAE,oBAKjB,CAAC;AAE3B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,YAAY,CAMpE;AAED,2EAA2E;AAC3E,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAC/C,YAAY,GAAG,IAAI,CAErB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAC3C,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,GAAG,SAAS,GAAG,cAAc,CA4B/F;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,QAAQ,CAAC,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,IAAI,IAAI,CAAC;IAClB,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,IAAI,IAAI,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;IAClE,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,kBAAkB,CAkDxF"}

package/dist/review/review.svelte.js

@@ -92,6 +92,9 @@ export function createTrackChanges(editor) {
         rejectAll: () => run((e) => e.commands.rejectAllChanges()),
         next: () => run((e) => e.chain().focus().selectNextChange().run()),
         previous: () => run((e) => e.chain().focus().selectPreviousChange().run()),
+        select: (id) => run((e) => e.chain().focus().selectChange(id).run()),
+        acceptMove: (id) => run((e) => e.commands.acceptMove(id)),
+        rejectMove: (id) => run((e) => e.commands.rejectMove(id)),
         subscribe(runFn) {
             if (!store) {
                 runFn(EMPTY_TRACK_CHANGES_SNAPSHOT);

package/dist/spreadsheet/FormulaBar.svelte

@@ -46,6 +46,13 @@
     return value;
   });
 
+  // Defined names for formula autocomplete.
+  let nameSuggestions = $derived.by(() => {
+    if (!sheetState) return [];
+    void sheetState.document;
+    return sheetState.controller.getNameSuggestions();
+  });
+
   // A spilled cell shows its anchor's formula greyed out (it has no formula of its own).
   let spillFormula = $derived.by(() => {
     if (!sheetState || sheetState.editingCell || !sheetState.activeCell || effectiveValue) return '';
@@ -63,10 +70,12 @@
       if (sheetState && sheetState.activeCell) {
         const row = sheetState.document.rows[sheetState.activeCell.row];
         const col = sheetState.document.columns[sheetState.activeCell.col];
-        if (row && col) {
-          sheetState.setCellValue(row.id, col.id, effectiveValue);
+        // Committed with data validation: invalid input waits for the alert.
+        if (sheetState.editingCell) {
+          sheetState.commitEditing(effectiveValue);
+        } else if (row && col) {
+          sheetState.commitCellInput(row.id, col.id, effectiveValue);
         }
-        sheetState.commitEditing();
       }
       onCommit?.(effectiveValue);
     } else if (e.key === 'Escape') {
@@ -116,5 +125,5 @@
     oninput={handleInput}
     onkeydown={handleKeyDown}
   />
-  <FormulaHints input={inputEl} value={effectiveValue} onAccept={setValue} />
+  <FormulaHints input={inputEl} value={effectiveValue} onAccept={setValue} names={nameSuggestions} />
 </div>

package/dist/spreadsheet/FormulaBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaBar.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaBar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIvE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwGH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormulaBar.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaBar.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIvE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiHH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/spreadsheet/FormulaHints.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { applyFormulaSuggestion, getFormulaHints } from '@pixerate/editor/spreadsheet';
+  import { applyFormulaSuggestion, getFormulaHints, type FormulaNameSuggestionSource } from '@pixerate/editor/spreadsheet';
 
   interface Props {
     /** The input being edited (a cell editor or the formula bar). */
@@ -11,9 +11,11 @@
     onAccept?: (value: string) => void;
     /** Maximum number of function suggestions (default 8). */
     limit?: number;
+    /** Defined names to suggest too (e.g. `controller.getNameSuggestions()`). */
+    names?: readonly FormulaNameSuggestionSource[];
   }
 
-  let { input = null, value = '', onAccept, limit = 8 }: Props = $props();
+  let { input = null, value = '', onAccept, limit = 8, names }: Props = $props();
 
   let caret = $state<number | null>(null);
   let focused = $state(false);
@@ -21,7 +23,7 @@
   let dismissed = $state(false);
   let position = $state<{ top: number; left: number; width: number } | null>(null);
 
-  let hints = $derived(getFormulaHints(value, caret ?? value.length, { limit }));
+  let hints = $derived(getFormulaHints(value, caret ?? value.length, { limit, names }));
   let suggestions = $derived(dismissed ? [] : hints.suggestions);
   let selectedIndex = $derived(Math.max(0, Math.min(selected, suggestions.length - 1)));
   let visible = $derived(
@@ -31,7 +33,7 @@
   async function accept(index: number) {
     const suggestion = suggestions[index];
     if (!suggestion || !input) return;
-    const next = applyFormulaSuggestion(value, caret ?? value.length, suggestion.name);
+    const next = applyFormulaSuggestion(value, caret ?? value.length, suggestion);
     caret = next.caret;
     selected = 0;
     onAccept?.(next.value);
@@ -127,7 +129,7 @@
     {/if}
     {#if suggestions.length > 0}
       <ul role="listbox" aria-label="Formula suggestions" class="max-h-64 overflow-auto m-0 list-none p-0 py-1">
-        {#each suggestions as s, i (s.name)}
+        {#each suggestions as s, i (`${s.kind ?? "fn"}:${s.name}`)}
           <li
             role="option"
             aria-selected={i === selectedIndex}

package/dist/spreadsheet/FormulaHints.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type FormulaNameSuggestionSource } from '@pixerate/editor/spreadsheet';
 interface Props {
     /** The input being edited (a cell editor or the formula bar). */
     input?: HTMLInputElement | null;
@@ -7,6 +8,8 @@ interface Props {
     onAccept?: (value: string) => void;
     /** Maximum number of function suggestions (default 8). */
     limit?: number;
+    /** Defined names to suggest too (e.g. `controller.getNameSuggestions()`). */
+    names?: readonly FormulaNameSuggestionSource[];
 }
 declare const FormulaHints: import("svelte").Component<Props, {}, "">;
 type FormulaHints = ReturnType<typeof FormulaHints>;

package/dist/spreadsheet/FormulaHints.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormulaHints.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaHints.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FormulaHints.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/FormulaHints.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA2C,KAAK,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAGvH,UAAU,KAAK;IACb,iEAAiE;IACjE,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,2BAA2B,EAAE,CAAC;CAChD;AAoIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/spreadsheet/NameManager.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { getNameManagerRows, parseFormula, type SpreadsheetNameRow } from '@pixerate/editor/spreadsheet';
+  import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+
+  interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    onClose?: () => void;
+    class?: string;
+  }
+
+  let { sheetState, readOnly = false, onClose, class: className = '' }: Props = $props();
+
+  interface Draft {
+    /** The name being edited (null for a new one). */
+    original: { name: string; sheetId?: string } | null;
+    name: string;
+    refersTo: string;
+    /** Sheet id, or '' for workbook scope. */
+    scope: string;
+    comment: string;
+  }
+
+  const EMPTY_DRAFT: Draft = { original: null, name: '', refersTo: '=', scope: '', comment: '' };
+
+  let draft = $state<Draft>({ ...EMPTY_DRAFT });
+  let error = $state<string | null>(null);
+
+  const rows = $derived.by(() => {
+    void sheetState.document;
+    void sheetState.names;
+    return getNameManagerRows(sheetState.controller);
+  });
+
+  function edit(row: SpreadsheetNameRow) {
+    error = null;
+    draft = {
+      original: { name: row.name, sheetId: row.sheetId },
+      name: row.name,
+      refersTo: row.refersTo,
+      scope: row.sheetId ?? '',
+      comment: row.comment ?? ''
+    };
+  }
+
+  function save(e: SubmitEvent) {
+    e.preventDefault();
+    const scope = draft.scope ? { sheet: draft.scope } : {};
+    try {
+      // Check before changing anything, so a failed edit keeps the old name.
+      const invalid = sheetState.controller.validateDefinedName(draft.name.trim());
+      if (invalid) throw new Error(invalid);
+      const formula = draft.refersTo.trim().startsWith('=') ? draft.refersTo.trim() : `=${draft.refersTo.trim()}`;
+      try {
+        parseFormula(formula);
+      } catch (err: any) {
+        throw new Error(`There's a problem with this formula: ${err?.message ?? formula}`);
+      }
+      const original = draft.original;
+      if (original) {
+        const originalScope = original.sheetId ? { sheet: original.sheetId } : {};
+        if ((original.sheetId ?? '') !== draft.scope) {
+          sheetState.deleteName(original.name, originalScope);
+        } else if (original.name !== draft.name.trim()) {
+          sheetState.renameName(original.name, draft.name.trim(), originalScope);
+        }
+      }
+      sheetState.defineName(draft.name.trim(), draft.refersTo, { ...scope, comment: draft.comment || undefined });
+      draft = { ...EMPTY_DRAFT };
+      error = null;
+    } catch (err: any) {
+      error = err?.message ?? String(err);
+    }
+  }
+
+  function remove(row: SpreadsheetNameRow) {
+    sheetState.deleteName(row.name, row.sheetId ? { sheet: row.sheetId } : {});
+    if (draft.original?.name === row.name && (draft.original.sheetId ?? '') === (row.sheetId ?? '')) draft = { ...EMPTY_DRAFT };
+  }
+</script>
+
+<!--
+  A simple Name Manager: lists defined names (name, current value, formula,
+  scope) and adds, edits, renames and deletes them. Renaming a name rewrites
+  the formulas that use it; deleting one leaves them showing #NAME?.
+-->
+<section aria-label="Name Manager" class="flex flex-col gap-2 text-xs {className}" data-name-manager="">
+  <div class="flex items-center justify-between">
+    <h3 class="m-0 text-sm font-semibold">Name Manager</h3>
+    {#if onClose}
+      <button type="button" aria-label="Close Name Manager" class="rounded px-2 hover:bg-muted" onclick={onClose}>×</button>
+    {/if}
+  </div>
+  <table class="w-full border-collapse">
+    <thead>
+      <tr class="text-left text-muted-foreground">
+        <th class="px-1 font-medium">Name</th>
+        <th class="px-1 font-medium">Value</th>
+        <th class="px-1 font-medium">Refers to</th>
+        <th class="px-1 font-medium">Scope</th>
+        {#if !readOnly}<th class="px-1"></th>{/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length === 0}
+        <tr><td colspan="5" class="px-1 py-2 text-muted-foreground">No names yet.</td></tr>
+      {/if}
+      {#each rows as row (`${row.sheetId ?? ''}!${row.name}`)}
+        <tr data-name={row.name} class="border-t border-border" title={row.comment}>
+          <td class="px-1 py-0.5 font-mono font-semibold">{row.name}</td>
+          <td class="px-1 py-0.5">{row.value}</td>
+          <td class="px-1 py-0.5 font-mono">{row.refersTo}</td>
+          <td class="px-1 py-0.5">{row.scopeLabel}</td>
+          {#if !readOnly}
+            <td class="whitespace-nowrap px-1 py-0.5 text-right">
+              <button type="button" aria-label="Edit {row.name}" class="rounded px-1 hover:bg-muted" onclick={() => edit(row)}>Edit</button>
+              <button type="button" aria-label="Delete {row.name}" class="rounded px-1 text-destructive hover:bg-muted" onclick={() => remove(row)}>
+                Delete
+              </button>
+            </td>
+          {/if}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if !readOnly}
+    <form
+      class="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1"
+      onsubmit={save}
+      aria-label={draft.original ? `Edit name ${draft.original.name}` : 'New name'}
+    >
+      <label for="pixerate-name-manager-name">Name</label>
+      <input id="pixerate-name-manager-name" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.name} />
+      <label for="pixerate-name-manager-refers">Refers to</label>
+      <input id="pixerate-name-manager-refers" class="rounded border border-border bg-background px-1 py-0.5 font-mono" bind:value={draft.refersTo} />
+      <label for="pixerate-name-manager-scope">Scope</label>
+      <select id="pixerate-name-manager-scope" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.scope}>
+        <option value="">Workbook</option>
+        {#each sheetState.sheets as sheet (sheet.id)}
+          <option value={sheet.id}>{sheet.name}</option>
+        {/each}
+      </select>
+      <label for="pixerate-name-manager-comment">Comment</label>
+      <input id="pixerate-name-manager-comment" class="rounded border border-border bg-background px-1 py-0.5" bind:value={draft.comment} />
+      <div class="col-span-2 flex gap-2">
+        <button type="submit" class="rounded bg-primary px-2 py-0.5 text-primary-foreground">{draft.original ? 'Save' : 'Add name'}</button>
+        {#if draft.original}
+          <button
+            type="button"
+            class="rounded px-2 py-0.5 hover:bg-muted"
+            onclick={() => {
+              draft = { ...EMPTY_DRAFT };
+              error = null;
+            }}
+          >
+            Cancel
+          </button>
+        {/if}
+      </div>
+    </form>
+  {/if}
+  {#if error}
+    <div role="alert" class="text-destructive">{error}</div>
+  {/if}
+</section>

package/dist/spreadsheet/NameManager.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    onClose?: () => void;
+    class?: string;
+}
+declare const NameManager: import("svelte").Component<Props, {}, "">;
+type NameManager = ReturnType<typeof NameManager>;
+export default NameManager;
+//# sourceMappingURL=NameManager.svelte.d.ts.map

package/dist/spreadsheet/NameManager.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NameManager.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/NameManager.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGvE,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/spreadsheet/SheetTabs.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import { getSheetTabMenuItems, sheetDropIndex, type SpreadsheetMenuItem } from '@pixerate/editor/spreadsheet';
+  import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+  import SpreadsheetContextMenu from './SpreadsheetContextMenu.svelte';
+
+  interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    class?: string;
+  }
+
+  let { sheetState, readOnly = false, class: className = '' }: Props = $props();
+
+  let renaming = $state<{ id: string; draft: string } | null>(null);
+  let error = $state<string | null>(null);
+  let menu = $state<{ x: number; y: number; items: SpreadsheetMenuItem[] } | null>(null);
+  let dragFrom: number | null = null;
+  let dropTarget = $state<{ index: number; after: boolean } | null>(null);
+  let renameInput = $state<HTMLInputElement | null>(null);
+
+  // Focus and select the name when the rename field opens.
+  $effect(() => {
+    if (!renameInput) return;
+    renameInput.focus();
+    renameInput.select();
+  });
+
+  function commitRename(cancelOnError: boolean) {
+    if (!renaming) return;
+    const current = renaming;
+    const sheet = sheetState.sheets.find((s) => s.id === current.id);
+    const name = current.draft.trim();
+    if (!sheet || !name || name === sheet.name) {
+      renaming = null;
+      error = null;
+      return;
+    }
+    try {
+      sheetState.renameSheet(current.id, name);
+      renaming = null;
+      error = null;
+    } catch (err: any) {
+      error = err?.message ?? String(err);
+      if (cancelOnError) renaming = null;
+    }
+  }
+
+  function dropAfter(e: DragEvent): boolean {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    return e.clientX > rect.left + rect.width / 2;
+  }
+</script>
+
+<!--
+  The workbook's sheet tabs: click to switch, double-click to rename, drag to
+  reorder, right-click for insert / rename / duplicate / move / delete
+  (delete asks to confirm), and a `+` button to add a sheet.
+-->
+<div class="flex flex-col {className}" data-sheet-tabs="">
+  <div role="tablist" aria-label="Sheets" class="flex items-center gap-0.5 overflow-x-auto border-t border-border bg-muted px-1 py-1 text-xs">
+    {#each sheetState.sheets as sheet, index (sheet.id)}
+      {#if renaming?.id === sheet.id}
+        <input
+          bind:this={renameInput}
+          aria-label="Sheet name"
+          class="w-32 rounded border border-primary bg-background px-2 py-0.5 text-xs outline-none"
+          value={renaming.draft}
+          oninput={(e) => {
+            if (renaming) renaming = { id: renaming.id, draft: e.currentTarget.value };
+          }}
+          onkeydown={(e) => {
+            e.stopPropagation();
+            if (e.key === 'Enter') commitRename(false);
+            else if (e.key === 'Escape') {
+              renaming = null;
+              error = null;
+            }
+          }}
+          onblur={() => commitRename(true)}
+        />
+      {:else}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={sheet.active}
+          data-sheet-id={sheet.id}
+          draggable={!readOnly}
+          title={readOnly ? sheet.name : `${sheet.name} — double-click to rename, drag to move`}
+          class="whitespace-nowrap rounded px-3 py-0.5 {sheet.active
+            ? 'bg-background font-semibold text-foreground shadow-sm'
+            : 'text-muted-foreground hover:bg-background/60'} {dropTarget?.index === index
+            ? dropTarget.after
+              ? 'border-r-2 border-primary'
+              : 'border-l-2 border-primary'
+            : ''}"
+          onclick={() => sheetState.setActiveSheet(sheet.id)}
+          ondblclick={() => {
+            if (readOnly) return;
+            error = null;
+            renaming = { id: sheet.id, draft: sheet.name };
+          }}
+          oncontextmenu={(e) => {
+            if (readOnly) return;
+            e.preventDefault();
+            menu = {
+              x: e.clientX,
+              y: e.clientY,
+              items: getSheetTabMenuItems(sheetState.controller, sheet.id, { onError: (message) => (error = message) })
+            };
+          }}
+          ondragstart={(e) => {
+            dragFrom = index;
+            e.dataTransfer?.setData('text/plain', sheet.id);
+            if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
+          }}
+          ondragover={(e) => {
+            if (dragFrom === null) return;
+            e.preventDefault();
+            const after = dropAfter(e);
+            if (dropTarget?.index !== index || dropTarget.after !== after) dropTarget = { index, after };
+          }}
+          ondragleave={() => (dropTarget = null)}
+          ondrop={(e) => {
+            e.preventDefault();
+            const from = dragFrom;
+            dragFrom = null;
+            dropTarget = null;
+            if (from === null) return;
+            sheetState.moveSheet(sheetState.sheets[from].id, sheetDropIndex(from, index, dropAfter(e)));
+          }}
+          ondragend={() => {
+            dragFrom = null;
+            dropTarget = null;
+          }}
+        >
+          {sheet.name}
+        </button>
+      {/if}
+    {/each}
+    {#if !readOnly}
+      <button
+        type="button"
+        aria-label="Add sheet"
+        title="Add sheet"
+        class="rounded px-2 py-0.5 text-muted-foreground hover:bg-background/60"
+        onclick={() => {
+          error = null;
+          sheetState.addSheet();
+        }}
+      >
+        +
+      </button>
+    {/if}
+  </div>
+  {#if error}
+    <div role="alert" class="px-2 py-1 text-xs text-destructive">{error}</div>
+  {/if}
+  {#if menu}
+    <SpreadsheetContextMenu items={menu.items} x={menu.x} y={menu.y} ariaLabel="Sheet actions" onClose={() => (menu = null)} />
+  {/if}
+</div>

package/dist/spreadsheet/SheetTabs.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    readOnly?: boolean;
+    class?: string;
+}
+declare const SheetTabs: import("svelte").Component<Props, {}, "">;
+type SheetTabs = ReturnType<typeof SheetTabs>;
+export default SheetTabs;
+//# sourceMappingURL=SheetTabs.svelte.d.ts.map

package/dist/spreadsheet/SheetTabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetTabs.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SheetTabs.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIvE,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8HH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}