@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/spreadsheet/SpreadsheetDataValidationPanel.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import {
+    DATA_VALIDATION_ERROR_STYLE_OPTIONS,
+    DATA_VALIDATION_OPERATOR_OPTIONS,
+    DATA_VALIDATION_TYPE_OPTIONS,
+    describeDataValidation,
+    formatRuleRanges,
+    parseRuleRanges,
+    type DataValidationErrorStyle,
+    type DataValidationOperator,
+    type DataValidationType
+  } from '@pixerate/editor/spreadsheet';
+  import type { createReactiveSpreadsheet } from './spreadsheet.svelte.js';
+
+  interface Props {
+    sheetState: ReturnType<typeof createReactiveSpreadsheet>;
+    onClose: () => void;
+  }
+
+  let { sheetState, onClose }: Props = $props();
+
+  const inputClass = 'w-full rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground';
+  const buttonClass = 'rounded border border-border px-2 py-0.5 hover:bg-muted disabled:opacity-40';
+  const selectionText = () => (sheetState.selectedRange ? formatRuleRanges([sheetState.selectedRange]) : 'A1');
+
+  let rules = $derived(sheetState.document.table?.dataValidations ?? []);
+  let type = $state<DataValidationType>('list');
+  let operator = $state<DataValidationOperator>('between');
+  let formula1 = $state('');
+  let formula2 = $state('');
+  let errorStyle = $state<DataValidationErrorStyle>('stop');
+  let errorMessage = $state('');
+  let inputMessage = $state('');
+  let ignoreBlank = $state(true);
+  let appliesTo = $state(selectionText());
+  let ranges = $derived(parseRuleRanges(appliesTo));
+  let usesOperator = $derived(type === 'whole' || type === 'decimal' || type === 'date' || type === 'time' || type === 'textLength');
+  let needsTwo = $derived(usesOperator && (operator === 'between' || operator === 'notBetween'));
+  let circles = $derived.by(() => {
+    void sheetState.document;
+    return sheetState.getInvalidDataCircles();
+  });
+
+  function apply() {
+    if (!ranges) return;
+    sheetState.addDataValidation({
+      ranges,
+      type,
+      ...(usesOperator ? { operator } : {}),
+      ...(formula1 ? { formula1 } : {}),
+      ...(needsTwo && formula2 ? { formula2 } : {}),
+      errorStyle,
+      ...(errorMessage ? { errorMessage } : {}),
+      ...(inputMessage ? { inputMessage } : {}),
+      ignoreBlank
+    });
+  }
+</script>
+
+<!-- Data validation manager: rules, a form to validate a range, and "circle invalid data". -->
+<div
+  role="dialog"
+  aria-label="Data validation rules"
+  tabindex="-1"
+  class="fixed right-4 top-16 z-40 flex max-h-[calc(100vh-5rem)] w-80 flex-col overflow-y-auto rounded-md border border-border bg-popover p-3 text-xs text-popover-foreground shadow-lg"
+  style="background: var(--popover, var(--background, #fff));"
+  onkeydown={(e) => {
+    e.stopPropagation();
+    if (e.key === 'Escape') onClose();
+  }}
+  oncontextmenu={(e) => e.stopPropagation()}
+>
+  <div class="mb-2 flex items-center justify-between">
+    <h2 class="text-sm font-semibold">Data validation</h2>
+    <button type="button" aria-label="Close" class="px-1 text-muted-foreground hover:text-foreground" onclick={onClose}>✕</button>
+  </div>
+  <ul class="mb-3 flex flex-col gap-1" aria-label="Validation rules">
+    {#if rules.length === 0}
+      <li class="text-muted-foreground">No validation on this sheet.</li>
+    {/if}
+    {#each rules as rule (rule.id)}
+      <li data-rule-id={rule.id} class="flex items-center gap-1.5 rounded border border-border px-1.5 py-1">
+        <div class="min-w-0 flex-1">
+          <div class="truncate" title={describeDataValidation(rule)}>{describeDataValidation(rule)}</div>
+          <div class="truncate font-mono text-[10px] text-muted-foreground">{formatRuleRanges(rule.ranges)} · {rule.errorStyle ?? 'stop'}</div>
+        </div>
+        <button type="button" aria-label="Delete rule" class={buttonClass} onclick={() => sheetState.deleteDataValidation(rule.id)}>✕</button>
+      </li>
+    {/each}
+  </ul>
+
+  <fieldset class="flex flex-col gap-1.5 border-t border-border pt-2">
+    <legend class="sr-only">New validation</legend>
+    <label class="flex flex-col gap-0.5">
+      Allow
+      <select aria-label="Allow" class={inputClass} bind:value={type}>
+        {#each DATA_VALIDATION_TYPE_OPTIONS as o (o.type)}
+          <option value={o.type}>{o.label}</option>
+        {/each}
+      </select>
+    </label>
+    {#if usesOperator}
+      <select aria-label="Operator" class={inputClass} bind:value={operator}>
+        {#each DATA_VALIDATION_OPERATOR_OPTIONS as o (o.operator)}
+          <option value={o.operator}>{o.label}</option>
+        {/each}
+      </select>
+    {/if}
+    {#if type !== 'any'}
+      <input
+        aria-label={type === 'list' ? 'Source' : type === 'custom' ? 'Formula' : needsTwo ? 'Minimum' : 'Value'}
+        placeholder={type === 'list' ? 'Low,Medium,High or =$H$1:$H$5' : type === 'custom' ? '=A1>0' : 'Value or =formula'}
+        class={inputClass}
+        bind:value={formula1}
+      />
+    {/if}
+    {#if needsTwo}
+      <input aria-label="Maximum" placeholder="Maximum" class={inputClass} bind:value={formula2} />
+    {/if}
+    <label class="flex items-center gap-1"><input type="checkbox" bind:checked={ignoreBlank} /> Ignore blank</label>
+    <input aria-label="Input message" placeholder="Input message (optional)" class={inputClass} bind:value={inputMessage} />
+    <select aria-label="Error style" class={inputClass} bind:value={errorStyle}>
+      {#each DATA_VALIDATION_ERROR_STYLE_OPTIONS as o (o.style)}
+        <option value={o.style}>{o.label}</option>
+      {/each}
+    </select>
+    <input aria-label="Error message" placeholder="Error message (optional)" class={inputClass} bind:value={errorMessage} />
+    <label class="flex flex-col gap-0.5">
+      Applies to
+      <input aria-label="Applies to" class="{inputClass} font-mono" bind:value={appliesTo} />
+    </label>
+    <div class="flex flex-wrap justify-between gap-2">
+      <button type="button" class={buttonClass} onclick={() => (appliesTo = selectionText())}>Use selection</button>
+      <button type="button" class={buttonClass} disabled={!ranges} onclick={() => ranges?.forEach((r) => sheetState.clearDataValidation(r))}>Clear</button>
+      <button type="button" class={buttonClass} disabled={!ranges} onclick={apply}>Apply</button>
+    </div>
+    <button type="button" class={buttonClass} aria-pressed={circles} onclick={() => sheetState.setInvalidDataCircles(!circles)}>
+      {circles ? 'Clear validation circles' : 'Circle invalid data'}
+    </button>
+  </fieldset>
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpreadsheetDataValidationPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetDataValidationPanel.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGvE,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACzD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsHH,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}

package/dist/spreadsheet/SpreadsheetEditor.svelte

@@ -14,14 +14,25 @@
     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';
+  import { createSpreadsheetViewport } from './viewport.svelte.js';
 
   interface Props {
     sheetState?: ReturnType<typeof createReactiveSpreadsheet>;
@@ -35,6 +46,14 @@
     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;
+    /**
+     * Render only the rows and columns in (or near) view. `'auto'` (default)
+     * virtualises sheets with more than 200 displayed rows or 60 columns;
+     * `true` / `false` force it.
+     */
+    virtualize?: boolean | 'auto';
   }
 
   let {
@@ -46,9 +65,58 @@
     customCellRenderer,
     onAddColumnClick,
     onColumnHeaderClick,
-    onColumnResize
+    onColumnResize,
+    showSheetTabs = false,
+    virtualize = 'auto'
   }: Props = $props();
 
+  // Virtualised rendering: frozen rows/columns, a spacer, the rows and
+  // columns in view, another spacer (everything for small sheets).
+  type ColumnSlot = { kind: 'col'; key: string; viewCol: SpreadsheetViewColumn } | { kind: 'space'; key: string; width: number };
+  type RowSlot = { kind: 'row'; key: string; viewRow: SpreadsheetViewRow } | { kind: 'space'; key: string; height: number };
+  let scrollContainer = $state<HTMLDivElement | null>(null);
+  const viewportState = createSpreadsheetViewport({
+    view: () => sheetState.viewModel,
+    virtualize: () => virtualize,
+    merges: () => sheetState.document.table?.merges,
+    activeCell: () => sheetState.activeCell
+  });
+  $effect(() => viewportState.attach(scrollContainer));
+  let viewWindow = $derived(viewportState.window);
+  let columnSlots = $derived.by<ColumnSlot[]>(() => {
+    const view = sheetState.viewModel;
+    const win = viewWindow;
+    const col = (viewCol: SpreadsheetViewColumn): ColumnSlot => ({ kind: 'col', key: viewCol.column.id, viewCol });
+    if (!win.virtual) return view.columns.map(col);
+    const slots = view.columns.slice(0, win.frozenColumns).map(col);
+    if (win.leftSpace > 0) slots.push({ kind: 'space', key: 'space:left', width: win.leftSpace });
+    for (let i = win.colStart; i < win.colEnd; i++) slots.push(col(view.columns[i]));
+    if (win.rightSpace > 0) slots.push({ kind: 'space', key: 'space:right', width: win.rightSpace });
+    return slots;
+  });
+  let renderedColumns = $derived(columnSlots.flatMap((slot) => (slot.kind === 'col' ? [slot.viewCol] : [])));
+  let rowSlots = $derived.by<RowSlot[]>(() => {
+    const view = sheetState.viewModel;
+    const win = viewWindow;
+    const row = (viewRow: SpreadsheetViewRow): RowSlot => ({
+      kind: 'row',
+      key: viewRow.kind === 'group' ? `group:${viewRow.group.key}` : viewRow.row.id,
+      viewRow
+    });
+    if (!win.virtual) return view.rows.map(row);
+    const slots = view.rows.slice(0, win.frozenRows).map(row);
+    if (win.topSpace > 0) slots.push({ kind: 'space', key: 'space:top', height: win.topSpace });
+    for (let i = win.rowStart; i < win.rowEnd; i++) slots.push(row(view.rows[i]));
+    if (win.bottomSpace > 0) slots.push({ kind: 'space', key: 'space:bottom', height: win.bottomSpace });
+    return slots;
+  });
+
+  // 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 +153,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 +309,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 +326,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 +583,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,10 +596,15 @@
   {#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">
-    <table class="border-collapse table-fixed w-max min-w-full">
+  <div bind:this={scrollContainer} class="relative flex-1 overflow-auto" onscroll={viewportState.onScroll}>
+    <table class="border-separate border-spacing-0 table-fixed w-max min-w-full [&>*>tr:not([data-spacer])>*]:border-b [&>*>tr>*]:border-border">
       <!-- Table Header Columns -->
       <thead>
         <tr class="h-7 bg-muted sticky top-0 z-20 border-b border-border shadow-xs">
@@ -466,7 +612,11 @@
           <th class="w-12 min-w-[3rem] sticky left-0 z-30 bg-muted border-r border-border text-center text-[10px] text-muted-foreground font-medium">
             #
           </th>
-          {#each sheetState.viewModel.columns as viewCol (viewCol.column.id)}
+          {#each columnSlots as slot (slot.key)}
+            {#if slot.kind === 'space'}
+              <th aria-hidden="true" data-spacer="" class="p-0" style="width: {slot.width}px; min-width: {slot.width}px; max-width: {slot.width}px; padding: 0;"></th>
+            {:else}
+            {@const viewCol = slot.viewCol}
             {@const col = viewCol.column}
             {@const cIdx = viewCol.index}
             <th
@@ -502,6 +652,7 @@
                 ></div>
               </div>
             </th>
+            {/if}
           {/each}
           {#if onAddColumnClick}
             <th class="w-10 min-w-[2.5rem] px-1 text-center bg-muted/40 hover:bg-muted cursor-pointer transition-colors" onclick={onAddColumnClick} title="Add Column">
@@ -515,11 +666,21 @@
 
       <!-- Table Body Rows -->
       <tbody>
-        {#each sheetState.viewModel.rows as viewRow (viewRow.kind === 'group' ? `group:${viewRow.group.key}` : viewRow.row.id)}
+        {#each rowSlots as rowSlot (rowSlot.key)}
+          {#if rowSlot.kind === 'space'}
+            <tr aria-hidden="true" data-spacer="" style="height: {rowSlot.height}px;">
+              <td colspan={columnSlots.length + 3} style="padding: 0; border: 0;"></td>
+            </tr>
+          {:else}
+          {@const viewRow = rowSlot.viewRow}
           {#if viewRow.kind === 'group'}
             <SpreadsheetGroupRow
               group={viewRow.group}
-              columns={sheetState.viewModel.columns}
+              columns={renderedColumns}
+              labelColumns={sheetState.viewModel.columns}
+              leadingColumns={viewWindow.virtual ? viewWindow.frozenColumns : undefined}
+              leftSpace={viewWindow.leftSpace}
+              rightSpace={viewWindow.rightSpace}
               groupColId={sheetState.document.table?.grouping?.colId ?? ''}
               onToggle={sheetState.toggleGroupCollapsed}
               trailingCell={!!onAddColumnClick}
@@ -540,7 +701,11 @@
             </td>
 
             <!-- Cells (a merged cell renders its top-left cell, spanning the merge) -->
-            {#each sheetState.viewModel.columns as viewCol (viewCol.column.id)}
+            {#each columnSlots as slot (slot.key)}
+              {#if slot.kind === 'space'}
+                <td aria-hidden="true" data-spacer="" style="padding: 0;"></td>
+              {:else}
+              {@const viewCol = slot.viewCol}
               {@const span = sheetState.viewModel.getCellSpan(displayRowIndex, viewCol.index)}
               {#if span}
               {@const rIdx = span.source.row}
@@ -552,6 +717,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 +737,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 +752,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>
@@ -612,6 +820,7 @@
                 {/if}
               </td>
               {/if}
+              {/if}
             {/each}
             {#if onAddColumnClick}
               <td class="w-10 min-w-[2.5rem] bg-muted/10 border-r border-border"></td>
@@ -620,6 +829,7 @@
             <td class="border-b border-border bg-transparent p-0"></td>
           </tr>
           {/if}
+          {/if}
         {/each}
       </tbody>
     </table>
@@ -633,9 +843,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,14 @@ 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;
+    /**
+     * Render only the rows and columns in (or near) view. `'auto'` (default)
+     * virtualises sheets with more than 200 displayed rows or 60 columns;
+     * `true` / `false` force it.
+     */
+    virtualize?: boolean | 'auto';
 }
 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;AAKlE,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;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B;AAsvBH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}