@pixerate/editor-svelte 0.23.0 → 0.24.0

package/dist/spreadsheet/SpreadsheetEditor.svelte

@@ -14,12 +14,22 @@
     type SpreadsheetViewColumn,
     type SpreadsheetViewRow,
     formatCellForDisplay,
-    numberFormatColorToCss
+    numberFormatColorToCss,
+    getConditionalFormatCss,
+    getConditionalFormatIcon,
+    getDataBarCss,
+    conditionalFormatStyleString,
+    type SpreadsheetPanelId,
+    type SpreadsheetValidationAction
   } from '@pixerate/editor/spreadsheet';
   import FormulaBar from './FormulaBar.svelte';
+  import SpreadsheetValidationDialog from './SpreadsheetValidationDialog.svelte';
+  import SpreadsheetConditionalFormatPanel from './SpreadsheetConditionalFormatPanel.svelte';
+  import SpreadsheetDataValidationPanel from './SpreadsheetDataValidationPanel.svelte';
   import SpreadsheetContextMenu from './SpreadsheetContextMenu.svelte';
   import SpreadsheetGroupRow from './SpreadsheetGroupRow.svelte';
   import FormulaHints from './FormulaHints.svelte';
+  import SheetTabs from './SheetTabs.svelte';
   import { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
   import { attachSpreadsheetClipboard } from './tableInteractions.js';
 
@@ -35,6 +45,8 @@
     onAddColumnClick?: () => void;
     onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
     onColumnResize?: (colId: string, width: number) => void;
+    /** Show the sheet tabs bar under the grid (add, switch, rename, reorder, delete sheets). */
+    showSheetTabs?: boolean;
   }
 
   let {
@@ -46,9 +58,16 @@
     customCellRenderer,
     onAddColumnClick,
     onColumnHeaderClick,
-    onColumnResize
+    onColumnResize,
+    showSheetTabs = false
   }: Props = $props();
 
+  // Defined names for formula autocomplete in the cell editor.
+  let nameSuggestions = $derived.by(() => {
+    void sheetState.document;
+    return sheetState.controller.getNameSuggestions();
+  });
+
   let isReadOnly = $derived(readOnly || readonly);
 
   let gridContainer = $state<HTMLDivElement | null>(null);
@@ -85,6 +104,73 @@
 
   let fillDrag = $state.raw<{ source: CellRange; target: CellRange | null } | null>(null);
   let menu = $state.raw<{ x: number; y: number; items: SpreadsheetMenuItem[] } | null>(null);
+  // Conditional formatting / data validation manager, opened from the context menu.
+  let panel = $state<SpreadsheetPanelId | null>(null);
+  // List dropdown of a list-validated cell.
+  let listMenu = $state.raw<{ x: number; y: number; row: number; col: number; values: string[] } | null>(null);
+
+  // --- Data validation: list dropdown, input message, alerts ---
+  let activeListValues = $derived.by(() => {
+    void sheetState.document;
+    const cell = sheetState.activeCell;
+    return cell && !isReadOnly ? sheetState.controller.getValidationListValues(cell.row, cell.col) : null;
+  });
+  let inputMessage = $derived.by(() => {
+    void sheetState.document;
+    const cell = sheetState.activeCell;
+    const rule = cell ? sheetState.controller.getDataValidationAt(cell.row, cell.col) : undefined;
+    return rule && rule.showInputMessage !== false && (rule.inputTitle || rule.inputMessage) ? rule : null;
+  });
+
+  // "Circle invalid data": recomputed when the document (or the toggle) changes.
+  let invalidCircles = $derived.by(() => {
+    void sheetState.document;
+    if (!sheetState.controller.getInvalidDataCircles()) return null;
+    return new Set(sheetState.controller.findInvalidCells().map((c) => `${c.row}:${c.col}`));
+  });
+
+  function openListMenu(row: number, col: number, anchor?: HTMLElement | null) {
+    if (isReadOnly || sheetState.document.columns[col]?.readOnly) return;
+    const values = sheetState.controller.getValidationListValues(row, col);
+    if (!values) return;
+    const td = anchor ?? gridContainer?.querySelector<HTMLElement>(`td[data-row="${row}"][data-col="${col}"]`);
+    const rect = td?.getBoundingClientRect();
+    listMenu = { x: rect ? rect.left : 0, y: rect ? rect.bottom : 0, row, col, values };
+  }
+
+  // Close the list on a press outside it (or on its arrow, which toggles it).
+  $effect(() => {
+    if (!listMenu) return;
+    const close = (e: MouseEvent) => {
+      if (!(e.target as Element | null)?.closest?.('[aria-label="Allowed values"], .spreadsheet-list-arrow')) listMenu = null;
+    };
+    window.addEventListener('mousedown', close);
+    return () => window.removeEventListener('mousedown', close);
+  });
+
+  function chooseListValue(value: string) {
+    if (!listMenu) return;
+    const row = sheetState.document.rows[listMenu.row];
+    const col = sheetState.document.columns[listMenu.col];
+    listMenu = null;
+    if (row && col) sheetState.commitCellInput(row.id, col.id, value);
+    gridContainer?.focus();
+  }
+
+  function resolveValidation(action: SpreadsheetValidationAction) {
+    sheetState.resolveValidationPrompt(action);
+    // Back to the cell editor when it is still open (retry), else the grid.
+    requestAnimationFrame(() => {
+      if (cellInput) cellInput.focus();
+      else gridContainer?.focus();
+    });
+  }
+
+  /** Inline style of a cell's conditional look (fill, font), keeping the selection tint visible. */
+  function conditionalStyle(fill: string | undefined, css: string, selected: boolean): string {
+    if (!css) return '';
+    return ` ${css}${fill && selected ? ' box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);' : ''}`;
+  }
   let filteredColIds = $derived.by(() => {
     const filter = sheetState.document.table?.filter;
     return new Set(filter?.enabled ? filter.rules.map((r) => r.colId) : []);
@@ -174,11 +260,12 @@
         sheetState.cancelEditing();
       } else if (e.key === 'Enter') {
         e.preventDefault();
-        sheetState.commitEditing();
+        // Invalid input keeps the editor open behind the validation alert.
+        if (sheetState.commitEditing().status !== 'committed') return;
         sheetState.moveCursor('down');
       } else if (e.key === 'Tab') {
         e.preventDefault();
-        sheetState.commitEditing();
+        if (sheetState.commitEditing().status !== 'committed') return;
         sheetState.moveCursor(e.shiftKey ? 'left' : 'right');
       } else {
         return;
@@ -190,7 +277,11 @@
 
     if (!sheetState.activeCell) return;
 
-    if (e.key === 'ArrowUp') {
+    if (e.altKey && e.key === 'ArrowDown') {
+      // Alt+Down opens the list of a list-validated cell.
+      e.preventDefault();
+      openListMenu(sheetState.activeCell.row, sheetState.activeCell.col);
+    } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       sheetState.moveCursor('up', e.shiftKey);
     } else if (e.key === 'ArrowDown') {
@@ -443,6 +534,7 @@
   }
 </script>
 
+{#snippet grid()}
 <div
   bind:this={gridContainer}
   class="flex flex-col h-full w-full overflow-hidden border border-border bg-background select-none outline-none text-foreground font-sans text-xs {className}"
@@ -455,6 +547,11 @@
   {#if showFormulaBar}
     <FormulaBar {sheetState} />
   {/if}
+  {#if inputMessage}
+    <div role="note" data-validation-input-message="" class="border-b border-border bg-muted/30 px-3 py-1 text-[11px] text-muted-foreground">
+      {#if inputMessage.inputTitle}<span class="mr-1 font-semibold text-foreground">{inputMessage.inputTitle}</span>{/if}{inputMessage.inputMessage ?? ''}
+    </div>
+  {/if}
 
   <!-- Main Scrollable Grid -->
   <div class="relative flex-1 overflow-auto">
@@ -552,6 +649,10 @@
               {@const active = isActiveCell(rIdx, cIdx)}
               {@const isEditing = sheetState.editingCell?.row === rIdx && sheetState.editingCell?.col === cIdx}
 
+              {@const conditional = sheetState.conditionalFormatOverlay.get(rIdx, cIdx)}
+              {@const conditionalCss = conditionalFormatStyleString(getConditionalFormatCss(conditional))}
+              {@const circled = !!invalidCircles?.has(`${rIdx}:${cIdx}`)}
+              {@const showListArrow = active && !isEditing && !!activeListValues}
               {@const inFillPreview = !!fillDrag?.target && !selected && rangeContains(fillDrag.target, displayRowIndex, viewCol.index)}
               {@const showFillHandle =
                 !isReadOnly &&
@@ -568,7 +669,8 @@
                 rowspan={span.rowSpan}
                 colspan={span.colSpan}
                 class="relative border-r border-border px-2 py-1 truncate max-w-0 text-foreground transition-colors {selected ? 'bg-primary/10' : ''} {active ? 'ring-2 ring-primary ring-inset z-10' : ''} {viewCol.header ? 'font-semibold' : ''}"
-                style="max-width: 0; overflow: hidden; {frozenCellStyle(viewRow, viewCol)}{inFillPreview ? ' outline: 1px dashed var(--primary, #6366f1); outline-offset: -1px;' : ''}"
+                style="max-width: 0; overflow: hidden; {frozenCellStyle(viewRow, viewCol)}{conditionalStyle(conditional?.fill, conditionalCss, selected)}{inFillPreview ? ' outline: 1px dashed var(--primary, #6366f1); outline-offset: -1px;' : ''}"
+                data-cf-fill={conditional?.fill}
                 onclick={(e) => handleCellClick(rIdx, cIdx, e)}
                 ondblclick={() => handleCellDblClick(rIdx, cIdx)}
                 oncontextmenu={(e) => handleCellContextMenu(rIdx, cIdx, e)}
@@ -582,20 +684,58 @@
                     bind:value={sheetState.draftValue}
                     onblur={() => sheetState.commitEditing()}
                   />
-                  <FormulaHints input={cellInput} value={sheetState.draftValue} onAccept={(next) => (sheetState.draftValue = next)} />
+                  <FormulaHints input={cellInput} value={sheetState.draftValue} onAccept={(next) => (sheetState.draftValue = next)} names={nameSuggestions} />
                 {:else if customCellRenderer}
                   {@const cellArg = Object.assign({ row, col, cell }, cell)}
                   {@render (customCellRenderer as any)(cellArg, col, row)}
                 {:else}
                   {@const shown = formatCellForDisplay(cell)}
+                  {@const textColor = conditional?.color ?? (shown.color ? numberFormatColorToCss(shown.color) : undefined)}
+                  {@const icon = conditional?.icon ? getConditionalFormatIcon(conditional.icon.set, conditional.icon.index) : null}
+                  {#if conditional?.dataBar}
+                    <span aria-hidden="true" class="spreadsheet-data-bar" style={conditionalFormatStyleString(getDataBarCss(conditional.dataBar))}></span>
+                  {/if}
+                  {#snippet cellText()}
+                    <span
+                      class="truncate block max-w-full {cell.error ? 'text-destructive font-semibold' : ''}"
+                      title={cell.error ? (cell.errorMessage ?? cell.error) : undefined}
+                      data-numeric={shown.numeric ? '' : undefined}
+                      style="{conditional?.dataBar || icon ? 'position: relative;' : ''}{icon ? ' flex: 1; min-width: 0;' : ''}{shown.numeric ? ' text-align: right;' : ''}{textColor ? ` color: ${textColor};` : ''}"
+                    >
+                      {conditional?.hideValue ? '' : shown.text}
+                    </span>
+                  {/snippet}
+                  {#if icon && conditional?.icon}
+                    <span class="flex items-center gap-1 min-w-0" style="position: relative;">
+                      <span class="spreadsheet-cf-icon shrink-0" role="img" aria-label={icon.label} data-icon={conditional.icon.id} style="color: {icon.color};">{icon.glyph}</span>
+                      {@render cellText()}
+                    </span>
+                  {:else}
+                    {@render cellText()}
+                  {/if}
+                {/if}
+                {#if circled}
                   <span
-                    class="truncate block max-w-full {cell.error ? 'text-destructive font-semibold' : ''}"
-                    title={cell.error ? (cell.errorMessage ?? cell.error) : undefined}
-                    data-numeric={shown.numeric ? '' : undefined}
-                    style="{shown.numeric ? 'text-align: right;' : ''}{shown.color ? ` color: ${numberFormatColorToCss(shown.color)};` : ''}"
+                    class="spreadsheet-invalid-circle"
+                    aria-label="Invalid value"
+                    style="position: absolute; inset: 1px 2px; border: 2px solid #e11d48; border-radius: 50%; pointer-events: none; z-index: 6;"
+                  ></span>
+                {/if}
+                {#if showListArrow}
+                  <button
+                    type="button"
+                    class="spreadsheet-list-arrow"
+                    aria-label="Show allowed values"
+                    aria-haspopup="listbox"
+                    tabindex="-1"
+                    style="position: absolute; right: 1px; top: 1px; bottom: 1px; width: 16px; z-index: 24; font-size: 10px; line-height: 1; background: var(--muted, #f4f4f5); border: 1px solid var(--border, #e4e4e7); border-radius: 2px; cursor: pointer; padding: 0;"
+                    onmousedown={(e) => e.stopPropagation()}
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      if (listMenu) listMenu = null;
+                      else openListMenu(rIdx, cIdx, (e.currentTarget as HTMLElement).parentElement);
+                    }}>▾</button
                   >
-                    {shown.text}
-                  </span>
                 {/if}
                 {#if activeSpill && rangeContains(activeSpill.range, rIdx, cIdx)}
                   <span aria-hidden="true" class="spreadsheet-spill-border" style={spillBorderStyle(activeSpill.range, rIdx, cIdx)}></span>
@@ -633,9 +773,53 @@
         menu = null;
         gridContainer?.focus();
       }}
+      onOpenPanel={(next) => (panel = next)}
     />
   {/if}
+  {#if panel === 'conditionalFormatting'}
+    <SpreadsheetConditionalFormatPanel {sheetState} onClose={() => (panel = null)} />
+  {:else if panel === 'dataValidation'}
+    <SpreadsheetDataValidationPanel {sheetState} onClose={() => (panel = null)} />
+  {/if}
+  {#if listMenu}
+    <div
+      role="listbox"
+      aria-label="Allowed values"
+      tabindex="-1"
+      class="fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg"
+      style="left: {listMenu.x}px; top: {listMenu.y}px; background: var(--popover, var(--background, #fff));"
+      onkeydown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+          listMenu = null;
+          gridContainer?.focus();
+        }
+      }}
+    >
+      {#if listMenu.values.length === 0}
+        <div class="px-3 py-1 text-muted-foreground">No values</div>
+      {/if}
+      {#each listMenu.values as value, i (`${i}:${value}`)}
+        <button type="button" role="option" aria-selected="false" class="block w-full px-3 py-1 text-left hover:bg-muted" onclick={() => chooseListValue(value)}
+          >{value}</button
+        >
+      {/each}
+    </div>
+  {/if}
+  {#if sheetState.validationPrompt}
+    <SpreadsheetValidationDialog prompt={sheetState.validationPrompt} onResolve={resolveValidation} />
+  {/if}
 </div>
+{/snippet}
+
+{#if showSheetTabs}
+  <div class="flex h-full w-full flex-col">
+    <div class="min-h-0 flex-1">{@render grid()}</div>
+    <SheetTabs {sheetState} readOnly={isReadOnly} />
+  </div>
+{:else}
+  {@render grid()}
+{/if}
 
 <style>
   .col-resize-handle {

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

@@ -15,6 +15,8 @@ interface Props {
     onAddColumnClick?: () => void;
     onColumnHeaderClick?: (col: SpreadsheetColumn) => void;
     onColumnResize?: (colId: string, width: number) => void;
+    /** Show the sheet tabs bar under the grid (add, switch, rename, reorder, delete sheets). */
+    showSheetTabs?: boolean;
 }
 declare const SpreadsheetEditor: import("svelte").Component<Props, {}, "">;
 type SpreadsheetEditor = ReturnType<typeof SpreadsheetEditor>;

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

@@ -1 +1 @@
-{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,QAAQ,EAOd,MAAM,8BAA8B,CAAC;AAKxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAgiBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SpreadsheetEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAMH,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,QAAQ,EAad,MAAM,8BAA8B,CAAC;AASxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAIlE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EACf,OAAO,CAAC,CAAC,QAAQ,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC,GACtD,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,cAAc,CAAC;QAAC,GAAG,EAAE,iBAAiB,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwrBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,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,23 @@ 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>;
 //# 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"}

package/dist/spreadsheet/index.js

@@ -1,7 +1,12 @@
 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';

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

@@ -1,4 +1,4 @@
-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): {
     sortRows: (keys: import("@pixerate/editor").SortKey[], options?: {
         range?: CellRange | null;
@@ -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;;aAyRuokD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAAgyW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAnKr+6D,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;YAiCyowD,CAAC;aAAuB,CAAC;gBAA0B,CAAC;gBAAgD,CAAC;iBAjCltwD,CAAC,CAAC,CAAC;0BAKtC,MAAM,WAAW,MAAM;wBAGzB,MAAM,WAAW,MAAM;0BAGrB,MAAM;6BAKH,MAAM,YAAY,UAAU;YAiBsvyD,CAAC;aAAuB,CAAC;gBAA0B,CAAC;wBAjBxwyD,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"}