@pixerate/editor-svelte 0.22.0 → 0.24.0

package/dist/spreadsheet/SheetTabs.svelte

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

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

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

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

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

package/dist/spreadsheet/SpreadsheetConditionalFormatPanel.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import {
+    CONDITIONAL_FORMAT_ICON_SETS,
+    CONDITIONAL_FORMAT_PRESETS,
+    CONDITIONAL_FORMAT_STYLE_PRESETS,
+    CONDITIONAL_FORMAT_TIME_PERIODS,
+    createConditionalFormatRule,
+    describeConditionalFormat,
+    formatRuleRanges,
+    getConditionalFormatCss,
+    conditionalFormatStyleString,
+    parseRuleRanges,
+    type ConditionalFormatIconSet,
+    type ConditionalFormatPresetKind,
+    type ConditionalFormatRule,
+    type ConditionalFormatTimePeriod
+  } 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?.conditionalFormats ?? []);
+  let kind = $state<ConditionalFormatPresetKind>('greaterThan');
+  let appliesTo = $state(selectionText());
+  let value = $state('');
+  let value2 = $state('');
+  let text = $state('');
+  let formula = $state('=');
+  let rank = $state('10');
+  let period = $state<ConditionalFormatTimePeriod>('today');
+  let iconSet = $state<ConditionalFormatIconSet>('3TrafficLights1');
+  let color = $state('#638ec6');
+  let styleId = $state(CONDITIONAL_FORMAT_STYLE_PRESETS[0].id);
+  let preset = $derived(CONDITIONAL_FORMAT_PRESETS.find((p) => p.kind === kind)!);
+  let ranges = $derived(parseRuleRanges(appliesTo));
+
+  function add() {
+    if (!ranges) return;
+    sheetState.addConditionalFormat(
+      createConditionalFormatRule({
+        kind,
+        ranges,
+        value,
+        value2,
+        text,
+        formula,
+        rank: Number(rank) || 10,
+        period,
+        iconSet,
+        color,
+        style: CONDITIONAL_FORMAT_STYLE_PRESETS.find((s) => s.id === styleId)?.style
+      })
+    );
+  }
+
+  /** Swatch showing a rule's look (fill, font colour, bold) or its kind. */
+  function swatchStyle(rule: ConditionalFormatRule): string {
+    if (rule.type === 'colorScale') return `background: linear-gradient(90deg, ${rule.stops.map((s) => s.color).join(', ')});`;
+    if (rule.type === 'dataBar') return `background: ${rule.color ?? '#638ec6'};`;
+    if (rule.type === 'iconSet') return '';
+    return conditionalFormatStyleString(getConditionalFormatCss(rule.style));
+  }
+</script>
+
+<!-- Conditional formatting manager: rules in priority order and a form to add one. -->
+<div
+  role="dialog"
+  aria-label="Conditional formatting 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">Conditional formatting</h2>
+    <button type="button" aria-label="Close" class="px-1 text-muted-foreground hover:text-foreground" onclick={onClose}>✕</button>
+  </div>
+  <ol class="mb-3 flex flex-col gap-1" aria-label="Rules in priority order">
+    {#if rules.length === 0}
+      <li class="text-muted-foreground">No rules on this sheet.</li>
+    {/if}
+    {#each rules as rule, i (rule.id)}
+      <li data-rule-id={rule.id} class="flex items-center gap-1.5 rounded border border-border px-1.5 py-1">
+        <span aria-hidden="true" class="inline-flex h-4 w-6 shrink-0 items-center justify-center rounded-sm border border-border" style={swatchStyle(rule)}
+          >{rule.type === 'iconSet' ? '●' : rule.type === 'colorScale' || rule.type === 'dataBar' ? '' : 'Aa'}</span
+        >
+        <div class="min-w-0 flex-1">
+          <div class="truncate" title={describeConditionalFormat(rule)}>{describeConditionalFormat(rule)}</div>
+          <div class="truncate font-mono text-[10px] text-muted-foreground">{formatRuleRanges(rule.ranges)}</div>
+        </div>
+        <label class="flex items-center gap-0.5 text-[10px]" title="Stop if true">
+          <input
+            type="checkbox"
+            aria-label="Stop if true"
+            checked={!!rule.stopIfTrue}
+            onchange={(e) => sheetState.updateConditionalFormat(rule.id, { stopIfTrue: (e.currentTarget as HTMLInputElement).checked })}
+          />
+          Stop
+        </label>
+        <button type="button" aria-label="Move up" class={buttonClass} disabled={i === 0} onclick={() => sheetState.moveConditionalFormat(rule.id, { by: -1 })}>▲</button>
+        <button
+          type="button"
+          aria-label="Move down"
+          class={buttonClass}
+          disabled={i === rules.length - 1}
+          onclick={() => sheetState.moveConditionalFormat(rule.id, { by: 1 })}>▼</button
+        >
+        <button type="button" aria-label="Delete rule" class={buttonClass} onclick={() => sheetState.deleteConditionalFormat(rule.id)}>✕</button>
+      </li>
+    {/each}
+  </ol>
+
+  <fieldset class="flex flex-col gap-1.5 border-t border-border pt-2">
+    <legend class="sr-only">New rule</legend>
+    <label class="flex flex-col gap-0.5">
+      Format cells
+      <select aria-label="Rule type" class={inputClass} bind:value={kind}>
+        {#each CONDITIONAL_FORMAT_PRESETS as p (p.kind)}
+          <option value={p.kind}>{p.label}</option>
+        {/each}
+      </select>
+    </label>
+    {#if preset.fields.includes('value')}
+      <input aria-label="Value" placeholder="Value or =formula" class={inputClass} bind:value />
+    {/if}
+    {#if preset.fields.includes('value2')}
+      <input aria-label="Second value" placeholder="and" class={inputClass} bind:value={value2} />
+    {/if}
+    {#if preset.fields.includes('text')}
+      <input aria-label="Text" placeholder="Text" class={inputClass} bind:value={text} />
+    {/if}
+    {#if preset.fields.includes('formula')}
+      <input aria-label="Formula" placeholder="=$A1>10" class={inputClass} bind:value={formula} />
+    {/if}
+    {#if preset.fields.includes('rank')}
+      <input aria-label="Rank" type="number" min="1" class={inputClass} bind:value={rank} />
+    {/if}
+    {#if preset.fields.includes('period')}
+      <select aria-label="Period" class={inputClass} bind:value={period}>
+        {#each CONDITIONAL_FORMAT_TIME_PERIODS as p (p.period)}
+          <option value={p.period}>{p.label}</option>
+        {/each}
+      </select>
+    {/if}
+    {#if preset.fields.includes('iconSet')}
+      <select aria-label="Icon set" class={inputClass} bind:value={iconSet}>
+        {#each CONDITIONAL_FORMAT_ICON_SETS as set (set)}
+          <option value={set}>{set}</option>
+        {/each}
+      </select>
+    {/if}
+    {#if preset.fields.includes('color')}
+      <input aria-label="Bar colour" type="color" class="h-6 w-12" bind:value={color} />
+    {/if}
+    {#if preset.usesStyle}
+      <select aria-label="Style" class={inputClass} bind:value={styleId}>
+        {#each CONDITIONAL_FORMAT_STYLE_PRESETS as s (s.id)}
+          <option value={s.id}>{s.label}</option>
+        {/each}
+      </select>
+    {/if}
+    <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 justify-between gap-2">
+      <button type="button" class={buttonClass} onclick={() => (appliesTo = selectionText())}>Use selection</button>
+      <button type="button" class={buttonClass} disabled={!ranges} onclick={add}>Add rule</button>
+    </div>
+  </fieldset>
+</div>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpreadsheetConditionalFormatPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetConditionalFormatPanel.svelte.ts"],"names":[],"mappings":"AAmBA,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;AAoJH,QAAA,MAAM,iCAAiC,2CAAwC,CAAC;AAChF,KAAK,iCAAiC,GAAG,UAAU,CAAC,OAAO,iCAAiC,CAAC,CAAC;AAC9F,eAAe,iCAAiC,CAAC"}

package/dist/spreadsheet/SpreadsheetContextMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { clampMenuPosition, type SpreadsheetMenuItem } from '@pixerate/editor/spreadsheet';
+  import { clampMenuPosition, runSpreadsheetMenuItem, type SpreadsheetMenuItem, type SpreadsheetPanelId } from '@pixerate/editor/spreadsheet';
 
   // Gap kept between the menu and the viewport edges.
   const VIEWPORT_MARGIN = 4;
@@ -9,9 +9,13 @@
     x: number;
     y: number;
     onClose: () => void;
+    /** Accessible name of the menu (default "Table actions"). */
+    ariaLabel?: string;
+    /** Opens a panel for items with `panel` (conditional formatting, data validation). */
+    onOpenPanel?: (panel: SpreadsheetPanelId) => void;
   }
 
-  let { items, x, y, onClose }: Props = $props();
+  let { items, x, y, onClose, onOpenPanel, ariaLabel = 'Table actions' }: Props = $props();
   let menuEl = $state<HTMLDivElement | null>(null);
   let measured = $state<{ x: number; y: number } | null>(null);
   const position = $derived(measured ?? { x, y });
@@ -51,7 +55,7 @@
 <div
   bind:this={menuEl}
   role="menu"
-  aria-label="Table actions"
+  aria-label={ariaLabel}
   tabindex="-1"
   class="fixed z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-xs text-popover-foreground shadow-lg"
   style="left: {position.x}px; top: {position.y}px; max-height: calc(100vh - {VIEWPORT_MARGIN * 2}px); overflow-y: auto; background: var(--popover, var(--background, #fff));"
@@ -66,11 +70,15 @@
       type="button"
       role="menuitem"
       data-action={item.id}
+      data-checked={item.checked ? '' : undefined}
       disabled={item.disabled}
-      class="block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent"
+      class="block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent {item.checked
+        ? 'font-semibold'
+        : ''}"
       onclick={() => {
         onClose();
-        item.run();
+        if (item.panel) onOpenPanel?.(item.panel);
+        else runSpreadsheetMenuItem(item);
       }}
     >
       {item.label}

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

@@ -1,9 +1,13 @@
-import { type SpreadsheetMenuItem } from '@pixerate/editor/spreadsheet';
+import { type SpreadsheetMenuItem, type SpreadsheetPanelId } from '@pixerate/editor/spreadsheet';
 interface Props {
     items: SpreadsheetMenuItem[];
     x: number;
     y: number;
     onClose: () => void;
+    /** Accessible name of the menu (default "Table actions"). */
+    ariaLabel?: string;
+    /** Opens a panel for items with `panel` (conditional formatting, data validation). */
+    onOpenPanel?: (panel: SpreadsheetPanelId) => void;
 }
 declare const SpreadsheetContextMenu: import("svelte").Component<Props, {}, "">;
 type SpreadsheetContextMenu = ReturnType<typeof SpreadsheetContextMenu>;

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

@@ -1 +1 @@
-{"version":3,"file":"SpreadsheetContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGzF,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA6DH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"SpreadsheetContextMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/spreadsheet/SpreadsheetContextMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAA6C,KAAK,mBAAmB,EAAE,KAAK,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG1I,UAAU,KAAK;IACb,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACnD;AAgEH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

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"}