@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/spreadsheet/SpreadsheetGroupRow.svelte

@@ -9,12 +9,31 @@
     onToggle: (key: string) => void;
     /** Render a trailing cell for the "add column" column. */
     trailingCell?: boolean;
+    /** Every displayed column, when `columns` is a virtualised window of them (picks the label column). */
+    labelColumns?: SpreadsheetViewColumn[];
+    /** Virtualised: columns before the left spacer (the frozen ones), and the spacers' widths. */
+    leadingColumns?: number;
+    leftSpace?: number;
+    rightSpace?: number;
   }
 
-  let { group, columns, groupColId, onToggle, trailingCell = false }: Props = $props();
+  let {
+    group,
+    columns,
+    groupColId,
+    onToggle,
+    trailingCell = false,
+    labelColumns,
+    leadingColumns,
+    leftSpace = 0,
+    rightSpace = 0
+  }: Props = $props();
 
   // The label goes in the grouping column, or the first column when that one is hidden.
-  let labelColId = $derived(columns.some((c) => c.column.id === groupColId) ? groupColId : columns[0]?.column.id);
+  let labelColId = $derived.by(() => {
+    const candidates = labelColumns ?? columns;
+    return candidates.some((c) => c.column.id === groupColId) ? groupColId : candidates[0]?.column.id;
+  });
 
   const formatSummary = (value: number | null) => (value === null ? '–' : String(value));
 </script>
@@ -35,8 +54,11 @@
       {group.collapsed ? '▸' : '▾'}
     </button>
   </td>
-  {#each columns as { column } (column.id)}
+  {#each columns as { column }, i (column.id)}
     {@const summary = group.summaries[column.id]}
+    {#if leadingColumns !== undefined && i === leadingColumns && leftSpace > 0}
+      <td aria-hidden="true" data-spacer="" style="padding: 0;"></td>
+    {/if}
     <td class="border-r border-border px-2 py-1 truncate max-w-0 text-foreground" style="max-width: 0; overflow: hidden;">
       {#if column.id === labelColId}
         <span class="truncate">
@@ -47,6 +69,12 @@
       {/if}
     </td>
   {/each}
+  {#if leadingColumns !== undefined && leadingColumns >= columns.length && leftSpace > 0}
+    <td aria-hidden="true" data-spacer="" style="padding: 0;"></td>
+  {/if}
+  {#if rightSpace > 0}
+    <td aria-hidden="true" data-spacer="" style="padding: 0;"></td>
+  {/if}
   {#if trailingCell}
     <td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>
   {/if}

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

@@ -7,6 +7,12 @@ interface Props {
     onToggle: (key: string) => void;
     /** Render a trailing cell for the "add column" column. */
     trailingCell?: boolean;
+    /** Every displayed column, when `columns` is a virtualised window of them (picks the label column). */
+    labelColumns?: SpreadsheetViewColumn[];
+    /** Virtualised: columns before the left spacer (the frozen ones), and the spacers' widths. */
+    leadingColumns?: number;
+    leftSpace?: number;
+    rightSpace?: number;
 }
 declare const SpreadsheetGroupRow: import("svelte").Component<Props, {}, "">;
 type SpreadsheetGroupRow = ReturnType<typeof SpreadsheetGroupRow>;

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

@@ -1 +1 @@
-{"version":3,"file":"SpreadsheetGroupRow.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetGroupRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG7F,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA4CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SpreadsheetGroupRow.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetGroupRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAG7F,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,CAAC;IAC3B,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uGAAuG;IACvG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,8FAA8F;IAC9F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAkEH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/spreadsheet/SpreadsheetValidationDialog.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { SpreadsheetValidationAction, SpreadsheetValidationPrompt } from '@pixerate/editor/spreadsheet';
+
+  interface Props {
+    prompt: SpreadsheetValidationPrompt;
+    onResolve: (action: SpreadsheetValidationAction) => void;
+  }
+
+  let { prompt, onResolve }: Props = $props();
+  let firstButton = $state<HTMLButtonElement | null>(null);
+
+  const style = $derived(prompt.result.errorStyle ?? 'stop');
+  // Stop: Retry / Cancel; Warning: "Continue?" Yes / No / Cancel; Information: OK / Cancel.
+  const buttons = $derived<Array<{ label: string; action: SpreadsheetValidationAction }>>(
+    style === 'stop'
+      ? [
+          { label: 'Retry', action: 'retry' },
+          { label: 'Cancel', action: 'cancel' }
+        ]
+      : style === 'warning'
+        ? [
+            { label: 'Yes', action: 'accept' },
+            { label: 'No', action: 'retry' },
+            { label: 'Cancel', action: 'cancel' }
+          ]
+        : [
+            { label: 'OK', action: 'accept' },
+            { label: 'Cancel', action: 'cancel' }
+          ]
+  );
+  const icon = $derived(style === 'stop' ? '⛔' : style === 'warning' ? '⚠' : 'ℹ');
+
+  $effect(() => {
+    void prompt;
+    firstButton?.focus();
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="fixed inset-0 z-[60] flex items-center justify-center bg-black/30"
+  onmousedown={(e) => e.preventDefault()}
+  onkeydown={(e) => {
+    e.stopPropagation();
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onResolve('cancel');
+    }
+  }}
+>
+  <div
+    role="alertdialog"
+    aria-modal="true"
+    aria-labelledby="spreadsheet-validation-title"
+    aria-describedby="spreadsheet-validation-message"
+    data-error-style={style}
+    tabindex="-1"
+    class="w-[22rem] max-w-[calc(100vw-2rem)] rounded-md border border-border bg-popover p-4 text-xs text-popover-foreground shadow-xl"
+    style="background: var(--popover, var(--background, #fff));"
+  >
+    <div class="flex items-start gap-3">
+      <span aria-hidden="true" class="text-lg leading-none">{icon}</span>
+      <div class="min-w-0 flex-1">
+        <h2 id="spreadsheet-validation-title" class="mb-1 text-sm font-semibold">{prompt.result.title}</h2>
+        <p id="spreadsheet-validation-message" class="whitespace-pre-wrap">{prompt.result.message}</p>
+        {#if style === 'warning'}
+          <p class="mt-2">Continue?</p>
+        {/if}
+      </div>
+    </div>
+    <div class="mt-4 flex justify-end gap-2">
+      {#each buttons as button, i (button.action)}
+        {#if i === 0}
+          <button
+            bind:this={firstButton}
+            type="button"
+            data-action={button.action}
+            class="rounded border border-border px-3 py-1 bg-primary text-primary-foreground"
+            onclick={() => onResolve(button.action)}>{button.label}</button
+          >
+        {:else}
+          <button
+            type="button"
+            data-action={button.action}
+            class="rounded border border-border px-3 py-1 hover:bg-muted"
+            onclick={() => onResolve(button.action)}>{button.label}</button
+          >
+        {/if}
+      {/each}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { SpreadsheetValidationAction, SpreadsheetValidationPrompt } from '@pixerate/editor/spreadsheet';
+interface Props {
+    prompt: SpreadsheetValidationPrompt;
+    onResolve: (action: SpreadsheetValidationAction) => void;
+}
+declare const SpreadsheetValidationDialog: import("svelte").Component<Props, {}, "">;
+type SpreadsheetValidationDialog = ReturnType<typeof SpreadsheetValidationDialog>;
+export default SpreadsheetValidationDialog;
+//# sourceMappingURL=SpreadsheetValidationDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpreadsheetValidationDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetValidationDialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAG3G,UAAU,KAAK;IACb,MAAM,EAAE,2BAA2B,CAAC;IACpC,SAAS,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,IAAI,CAAC;CAC1D;AAoEH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/spreadsheet/index.d.ts

@@ -2,14 +2,24 @@ import type { ComponentProps } from "svelte";
 import type SpreadsheetEditorComponent from "./SpreadsheetEditor.svelte";
 import type FormulaBarComponent from "./FormulaBar.svelte";
 import type FormulaHintsComponent from "./FormulaHints.svelte";
+import type SheetTabsComponent from "./SheetTabs.svelte";
+import type NameManagerComponent from "./NameManager.svelte";
 export { default as SpreadsheetEditor } from './SpreadsheetEditor.svelte';
 export { default as FormulaBar } from './FormulaBar.svelte';
 export { default as FormulaHints } from './FormulaHints.svelte';
+export { default as SheetTabs } from './SheetTabs.svelte';
+export { default as NameManager } from './NameManager.svelte';
 export * from './spreadsheet.svelte.js';
 export { default as SpreadsheetContextMenu } from './SpreadsheetContextMenu.svelte';
 export { default as SpreadsheetGroupRow } from './SpreadsheetGroupRow.svelte';
 export * from './tableInteractions.js';
+export { default as SpreadsheetValidationDialog } from './SpreadsheetValidationDialog.svelte';
+export { default as SpreadsheetConditionalFormatPanel } from './SpreadsheetConditionalFormatPanel.svelte';
+export { default as SpreadsheetDataValidationPanel } from './SpreadsheetDataValidationPanel.svelte';
 export type SpreadsheetEditorProps = ComponentProps<typeof SpreadsheetEditorComponent>;
 export type FormulaBarProps = ComponentProps<typeof FormulaBarComponent>;
 export type FormulaHintsProps = ComponentProps<typeof FormulaHintsComponent>;
+export type SheetTabsProps = ComponentProps<typeof SheetTabsComponent>;
+export type NameManagerProps = ComponentProps<typeof NameManagerComponent>;
+export * from './viewport.svelte.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/spreadsheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,cAAc,wBAAwB,CAAC;AAEvC,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,iCAAiC,EAAE,MAAM,4CAA4C,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAEpG,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,cAAc,sBAAsB,CAAC"}

package/dist/spreadsheet/index.js

@@ -1,7 +1,13 @@
 export { default as SpreadsheetEditor } from './SpreadsheetEditor.svelte';
 export { default as FormulaBar } from './FormulaBar.svelte';
 export { default as FormulaHints } from './FormulaHints.svelte';
+export { default as SheetTabs } from './SheetTabs.svelte';
+export { default as NameManager } from './NameManager.svelte';
 export * from './spreadsheet.svelte.js';
 export { default as SpreadsheetContextMenu } from './SpreadsheetContextMenu.svelte';
 export { default as SpreadsheetGroupRow } from './SpreadsheetGroupRow.svelte';
 export * from './tableInteractions.js';
+export { default as SpreadsheetValidationDialog } from './SpreadsheetValidationDialog.svelte';
+export { default as SpreadsheetConditionalFormatPanel } from './SpreadsheetConditionalFormatPanel.svelte';
+export { default as SpreadsheetDataValidationPanel } from './SpreadsheetDataValidationPanel.svelte';
+export * from './viewport.svelte.js';

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

@@ -1,5 +1,6 @@
-import { SpreadsheetController, type SpreadsheetControllerOptions, type SpreadsheetDocument, type CellCoordinate, type CellRange, type CellData, type SpreadsheetColumn, type SpreadsheetRow, type SpreadsheetDataSource } from '@pixerate/editor/spreadsheet';
+import { SpreadsheetController, type SpreadsheetControllerOptions, type SpreadsheetDocument, type CellCoordinate, type CellRange, type CellData, type SpreadsheetColumn, type SpreadsheetRow, type SpreadsheetDataSource, type SpreadsheetNameScope, type SpreadsheetCommitResult, type SpreadsheetValidationAction, type SpreadsheetValidationPrompt } from '@pixerate/editor/spreadsheet';
 export declare function createReactiveSpreadsheet(options?: SpreadsheetControllerOptions): {
+    mergeCells: (range?: CellRange | null) => boolean;
     sortRows: (keys: import("@pixerate/editor").SortKey[], options?: {
         range?: CellRange | null;
     }) => boolean;
@@ -23,7 +24,6 @@ export declare function createReactiveSpreadsheet(options?: SpreadsheetControlle
     unhideAll: () => void;
     getMerges: () => CellRange[];
     getMergeAt: (row: number, col: number) => CellRange | null;
-    mergeCells: (range?: CellRange | null) => boolean;
     unmergeCells: (range?: CellRange | null) => boolean;
     autofill: (source: CellRange, target: CellRange) => boolean;
     groupRowsBy: (colId: string, summaries?: import("@pixerate/editor").GroupSummary[]) => void;
@@ -39,19 +39,52 @@ export declare function createReactiveSpreadsheet(options?: SpreadsheetControlle
     importFromCsv: (csv: string, options?: import("@pixerate/editor").CsvImportOptions) => void;
     copyToClipboardData: (range?: CellRange | null) => import("@pixerate/editor").SpreadsheetClipboardData;
     pasteClipboardData: (source: import("@pixerate/editor").SpreadsheetClipboardSource, target?: import("@pixerate/editor").CellPosition) => boolean;
+    getConditionalFormats: () => import("@pixerate/editor").ConditionalFormatRule[];
+    addConditionalFormat: (rule: import("@pixerate/editor").NewConditionalFormatRule, options?: {
+        priority?: "first" | "last";
+    }) => string;
+    updateConditionalFormat: (id: string, changes: Partial<import("@pixerate/editor").NewConditionalFormatRule>) => boolean;
+    deleteConditionalFormat: (id: string) => boolean;
+    moveConditionalFormat: (id: string, to: number | {
+        by: number;
+    }) => boolean;
+    clearConditionalFormats: (range?: CellRange | null) => void;
+    getConditionalFormatOverlay: () => import("@pixerate/editor").ConditionalFormatOverlay;
+    getConditionalFormat: (row: number, col: number) => import("@pixerate/editor").ConditionalCellFormat | undefined;
+    getDataValidations: () => import("@pixerate/editor").DataValidationRule[];
+    getDataValidationAt: (row: number, col: number) => import("@pixerate/editor").DataValidationRule | undefined;
+    addDataValidation: (rule: import("@pixerate/editor").NewDataValidationRule) => string;
+    updateDataValidation: (id: string, changes: Partial<import("@pixerate/editor").NewDataValidationRule>) => boolean;
+    deleteDataValidation: (id: string) => boolean;
+    clearDataValidation: (range?: CellRange | null) => void;
+    validateCellInput: (row: number, col: number, raw: string) => import("@pixerate/editor").DataValidationResult;
+    getValidationListValues: (row: number, col: number) => string[] | null;
+    findInvalidCells: () => import("@pixerate/editor").CellPosition[];
+    setInvalidDataCircles: (show: boolean) => void;
+    getInvalidDataCircles: () => boolean;
+    isInvalidDataCircled: (row: number, col: number) => boolean;
     document: SpreadsheetDocument;
     activeCell: CellCoordinate | null;
     selectedRange: CellRange | null;
     editingCell: CellCoordinate | null;
     viewModel: import("@pixerate/editor").SpreadsheetViewModel;
     draftValue: string;
+    sheets: import("@pixerate/editor").SpreadsheetSheetInfo[];
+    activeSheetId: string;
+    names: import("@pixerate/editor").SpreadsheetNameInfo[];
     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;
+    conditionalFormatOverlay: import("@pixerate/editor").ConditionalFormatOverlay;
+    validationPrompt: SpreadsheetValidationPrompt | null;
+    commitEditing(val?: string): SpreadsheetCommitResult;
+    /** Commits input from outside the cell editor (formula bar, list dropdown) with validation. */
+    commitCellInput(rowId: string, colId: string, raw: string): SpreadsheetCommitResult;
+    /** Answers the validation alert: accept (warning / information), retry or cancel. */
+    resolveValidationPrompt(action: SpreadsheetValidationAction): void;
     cancelEditing(): void;
     moveCursor(dir: "up" | "down" | "left" | "right", extend?: boolean): void;
     insertColumn(index: number, config?: Partial<SpreadsheetColumn>): void;
@@ -69,5 +102,25 @@ export declare function createReactiveSpreadsheet(options?: SpreadsheetControlle
     importFromTsv(data: string): void;
     undo(): void;
     redo(): void;
+    setActiveSheet(idOrName: string): boolean;
+    addSheet(options?: Parameters<(options?: {
+        name?: string;
+        index?: number;
+        document?: Partial<SpreadsheetDocument>;
+        activate?: boolean;
+    }) => string>[0]): string;
+    renameSheet(idOrName: string, newName: string): void;
+    moveSheet(idOrName: string, toIndex: number): boolean;
+    deleteSheet(idOrName: string): boolean;
+    duplicateSheet(idOrName: string, options?: Parameters<(idOrName: string, options?: {
+        name?: string;
+        index?: number;
+        activate?: boolean;
+    }) => string | null>[1]): string | null;
+    defineName(name: string, refersTo: string, options?: SpreadsheetNameScope & {
+        comment?: string;
+    }): void;
+    renameName(oldName: string, newName: string, options?: SpreadsheetNameScope): void;
+    deleteName(name: string, options?: SpreadsheetNameScope): boolean;
 };
 //# sourceMappingURL=spreadsheet.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAErB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC3B,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;aAmLoz2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA/Gj32B,MAAM;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;wBAMxC,MAAM;;oBAWV,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;EAc7B"}
+{"version":3,"file":"spreadsheet.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/spreadsheet.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EAErB,KAAK,4BAA4B,EACjC,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,uBAAuB,EAC5B,KAAK,2BAA2B,EAChC,KAAK,2BAA2B,EACjC,MAAM,8BAA8B,CAAC;AAEtC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,4BAAiC;;;aAyRmx0D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAA06W,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAnK3vrE,MAAM;;;;;mBAMX,MAAM,SAAS,MAAM,GAAG,QAAQ;wBAG3B,MAAM,SAAS,MAAM,OAAO,MAAM;oBAItC,MAAM,OAAO,MAAM;uBAKhB,SAAS;uBAIT,MAAM,QAAQ,MAAM,eAAe,MAAM;;;wBAYxC,MAAM,GAAG,uBAAuB;IAKpD,+FAA+F;2BACxE,MAAM,SAAS,MAAM,OAAO,MAAM,GAAG,uBAAuB;IAKnF,qFAAqF;oCACrD,2BAA2B;;oBAS3C,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO;wBAK5B,MAAM,WAAW,OAAO,CAAC,iBAAiB,CAAC;wBAI3C,MAAM;qBAIT,MAAM,WAAW,OAAO,CAAC,cAAc,CAAC;qBAIxC,MAAM;0BAID,MAAM,SAAS,MAAM;8BAIjB,MAAM,gBAAgB,MAAM;2BAI/B,mBAAmB;;2BAanB,qBAAqB;6BAInB,MAAM,GAAG,SAAS;;wBAQvB,SAAS,GAAG,IAAI;wBAGhB,MAAM;;;6BAaD,MAAM;uBAKZ,UAAU;YAiCqxgE,CAAC;aAAuB,CAAC;gBAA0B,CAAC;gBAAgD,CAAC;iBAjC91gE,CAAC,CAAC,CAAC;0BAKtC,MAAM,WAAW,MAAM;wBAGzB,MAAM,WAAW,MAAM;0BAGrB,MAAM;6BAKH,MAAM,YAAY,UAAU;YAiBk4iE,CAAC;aAAuB,CAAC;gBAA0B,CAAC;wBAjBp5iE,CAAC,CAAC,CAAC;qBAKzE,MAAM,YAAY,MAAM,YAAY,oBAAoB,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE;wBAG5E,MAAM,WAAW,MAAM,YAAY,oBAAoB;qBAG1D,MAAM,YAAY,oBAAoB;EAK1D"}

package/dist/spreadsheet/spreadsheet.svelte.js

@@ -13,6 +13,8 @@ export function createReactiveSpreadsheet(options = {}) {
     let selectedRange = $state(null);
     let editingCell = $state(null);
     let draftValue = $state('');
+    // Invalid input waiting for the user (data validation alert).
+    let validationPrompt = $state.raw(null);
     const controller = new SpreadsheetController({
         ...options,
         document: options.document,
@@ -43,6 +45,39 @@ export function createReactiveSpreadsheet(options = {}) {
     // transpose, CSV, clipboard). The controller reports their changes through
     // onDocumentChange / onSelectionChange, which update the state above.
     const tableActions = bindSpreadsheetTableActions(controller);
+    // Conditional formatting of every formatted cell (re-evaluated incrementally).
+    const conditionalFormatOverlay = $derived.by(() => {
+        void doc;
+        return controller.getConditionalFormatOverlay();
+    });
+    // Input breaking a data validation rule is not committed: the editor stays
+    // open and `validationPrompt` holds the alert until it is resolved.
+    function syncEditing() {
+        editingCell = controller.editingCell;
+        draftValue = controller.draftValue;
+        validationPrompt = controller.validationPrompt;
+        activeCell = controller.activeCell;
+        selectedRange = controller.selectedRange;
+        doc = { ...controller.document };
+    }
+    // Sheet tabs and defined names. Every workbook change notifies through
+    // onDocumentChange, so they follow `doc`.
+    const sheets = $derived.by(() => {
+        void doc;
+        return controller.getSheets();
+    });
+    const names = $derived.by(() => {
+        void doc;
+        return controller.getNames();
+    });
+    // Switching sheets commits the edit in progress.
+    function afterSheetSwitch() {
+        doc = { ...controller.document };
+        activeCell = controller.activeCell;
+        selectedRange = controller.selectedRange;
+        editingCell = controller.editingCell;
+        draftValue = controller.draftValue;
+    }
     return {
         get document() {
             return doc;
@@ -62,6 +97,18 @@ export function createReactiveSpreadsheet(options = {}) {
         get draftValue() {
             return draftValue;
         },
+        /** The sheets in tab order (see `SpreadsheetController.getSheets`). */
+        get sheets() {
+            return sheets;
+        },
+        get activeSheetId() {
+            void doc;
+            return controller.activeSheetId;
+        },
+        /** Defined names (see `SpreadsheetController.getNames`). */
+        get names() {
+            return names;
+        },
         set draftValue(val) {
             draftValue = val;
             controller.draftValue = val;
@@ -89,11 +136,27 @@ export function createReactiveSpreadsheet(options = {}) {
             editingCell = controller.editingCell;
             draftValue = controller.draftValue;
         },
+        get conditionalFormatOverlay() {
+            return conditionalFormatOverlay;
+        },
+        get validationPrompt() {
+            return validationPrompt;
+        },
         commitEditing(val) {
-            controller.commitEditing(val);
-            editingCell = null;
-            draftValue = '';
-            doc = { ...controller.document };
+            const result = controller.commitEditing(val);
+            syncEditing();
+            return result;
+        },
+        /** Commits input from outside the cell editor (formula bar, list dropdown) with validation. */
+        commitCellInput(rowId, colId, raw) {
+            const result = controller.commitCellInput(rowId, colId, raw);
+            syncEditing();
+            return result;
+        },
+        /** Answers the validation alert: accept (warning / information), retry or cancel. */
+        resolveValidationPrompt(action) {
+            controller.resolveValidationPrompt(action);
+            syncEditing();
         },
         cancelEditing() {
             controller.cancelEditing();
@@ -161,13 +224,49 @@ export function createReactiveSpreadsheet(options = {}) {
             controller.importFromTsv(data);
             doc = { ...controller.document };
         },
+        // Undo can switch to the sheet the step belongs to.
         undo() {
             controller.undo();
-            doc = { ...controller.document };
+            afterSheetSwitch();
         },
         redo() {
             controller.redo();
-            doc = { ...controller.document };
+            afterSheetSwitch();
+        },
+        setActiveSheet(idOrName) {
+            const changed = controller.setActiveSheet(idOrName);
+            afterSheetSwitch();
+            return changed;
+        },
+        addSheet(options) {
+            const id = controller.addSheet(options);
+            afterSheetSwitch();
+            return id;
+        },
+        renameSheet(idOrName, newName) {
+            controller.renameSheet(idOrName, newName);
+        },
+        moveSheet(idOrName, toIndex) {
+            return controller.moveSheet(idOrName, toIndex);
+        },
+        deleteSheet(idOrName) {
+            const deleted = controller.deleteSheet(idOrName);
+            afterSheetSwitch();
+            return deleted;
+        },
+        duplicateSheet(idOrName, options) {
+            const id = controller.duplicateSheet(idOrName, options);
+            afterSheetSwitch();
+            return id;
+        },
+        defineName(name, refersTo, options) {
+            controller.defineName(name, refersTo, options);
+        },
+        renameName(oldName, newName, options) {
+            controller.renameName(oldName, newName, options);
+        },
+        deleteName(name, options) {
+            return controller.deleteName(name, options);
         },
         ...tableActions
     };

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

@@ -0,0 +1,26 @@
+import { type CellCoordinate, type CellRange, type SpreadsheetViewModel } from '@pixerate/editor/spreadsheet';
+export interface SpreadsheetViewportSource {
+    view: () => SpreadsheetViewModel;
+    /** `'auto'` (default): virtualise large views only; `true` / `false` force it. */
+    virtualize?: () => boolean | 'auto' | undefined;
+    /** Merged ranges, rendered whole when they cross the window's edge. */
+    merges?: () => readonly CellRange[] | undefined;
+    /** Scrolled into view when it changes (virtualised views only). */
+    activeCell?: () => CellCoordinate | null | undefined;
+    overscanRows?: number;
+    overscanColumns?: number;
+}
+/**
+ * Virtualised rendering for `SpreadsheetEditor` (the Svelte counterpart of
+ * React's `useSpreadsheetViewport`): tracks the scroll container passed to
+ * `attach`, works out the window of rows and columns to render, and scrolls
+ * the active cell into view. Call it while a component initialises.
+ */
+export declare function createSpreadsheetViewport(source: SpreadsheetViewportSource): {
+    readonly metrics: import("@pixerate/editor").SpreadsheetViewMetrics;
+    /** What to render; `virtual: false` renders every row and column. */
+    readonly window: import("@pixerate/editor").SpreadsheetViewWindow;
+    onScroll: () => void;
+    attach: (el: HTMLElement | null) => () => void;
+};
+//# sourceMappingURL=viewport.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/viewport.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,oBAAoB,EAG1B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,oBAAoB,CAAC;IACjC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAChD,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,SAAS,SAAS,EAAE,GAAG,SAAS,CAAC;IAChD,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,yBAAyB;;IA4EvE,qEAAqE;;;iBAxCnD,WAAW,GAAG,IAAI,KAAG,MAAM,IAAI;EA+CpD"}

package/dist/spreadsheet/viewport.svelte.js

@@ -0,0 +1,93 @@
+import { untrack } from 'svelte';
+import { fullSpreadsheetViewWindow, getSpreadsheetScrollToCell, getSpreadsheetViewWindow, measureSpreadsheetView, sameSpreadsheetViewWindow, shouldVirtualizeSpreadsheet } from '@pixerate/editor/spreadsheet';
+/**
+ * Virtualised rendering for `SpreadsheetEditor` (the Svelte counterpart of
+ * React's `useSpreadsheetViewport`): tracks the scroll container passed to
+ * `attach`, works out the window of rows and columns to render, and scrolls
+ * the active cell into view. Call it while a component initialises.
+ */
+export function createSpreadsheetViewport(source) {
+    let viewport = $state.raw({ scrollTop: 0, scrollLeft: 0, width: 0, height: 0 });
+    let element = null;
+    const metrics = $derived(measureSpreadsheetView(source.view()));
+    const virtual = $derived(shouldVirtualizeSpreadsheet(source.view(), source.virtualize?.() ?? 'auto'));
+    const windowOptions = $derived({
+        merges: source.merges?.(),
+        overscanRows: source.overscanRows,
+        overscanColumns: source.overscanColumns
+    });
+    const win = $derived(virtual ? getSpreadsheetViewWindow(metrics, viewport, windowOptions) : fullSpreadsheetViewWindow(metrics));
+    const read = (el) => ({
+        scrollTop: el.scrollTop,
+        scrollLeft: el.scrollLeft,
+        width: el.clientWidth,
+        height: el.clientHeight
+    });
+    /** Stores a new viewport, re-rendering only when the window it gives changes. */
+    function update(next) {
+        if (!virtual)
+            return;
+        const prev = viewport;
+        const same = prev.width === next.width &&
+            prev.height === next.height &&
+            sameSpreadsheetViewWindow(getSpreadsheetViewWindow(metrics, prev, windowOptions), getSpreadsheetViewWindow(metrics, next, windowOptions));
+        if (!same)
+            viewport = next;
+    }
+    function onScroll() {
+        if (element)
+            update(read(element));
+    }
+    /** Tracks `el` (the scroll container); returns a cleanup function. */
+    function attach(el) {
+        element = el;
+        if (!el)
+            return () => { };
+        onScroll();
+        if (typeof ResizeObserver === 'undefined')
+            return () => { };
+        const observer = new ResizeObserver(() => onScroll());
+        observer.observe(el);
+        return () => observer.disconnect();
+    }
+    // Measure once virtualisation turns on (the element may already be attached).
+    $effect(() => {
+        if (virtual)
+            untrack(onScroll);
+    });
+    // Keyboard navigation and selection: bring the active cell into view.
+    // Only the active cell and the mode re-run it: scrolling away from the
+    // active cell (or an edit elsewhere) must not snap back.
+    $effect(() => {
+        const cell = source.activeCell?.();
+        const row = cell?.row;
+        const col = cell?.col;
+        if (!virtual || row === undefined || col === undefined)
+            return;
+        untrack(() => {
+            const base = element ? read(element) : viewport;
+            const target = getSpreadsheetScrollToCell(metrics, base, { row, col });
+            if (!target)
+                return;
+            if (element) {
+                if (target.scrollTop !== undefined)
+                    element.scrollTop = target.scrollTop;
+                if (target.scrollLeft !== undefined)
+                    element.scrollLeft = target.scrollLeft;
+            }
+            // Some environments (jsdom) never fire the scroll event.
+            update({ ...base, ...target });
+        });
+    });
+    return {
+        get metrics() {
+            return metrics;
+        },
+        /** What to render; `virtual: false` renders every row and column. */
+        get window() {
+            return win;
+        },
+        onScroll,
+        attach
+    };
+}