@pixerate/editor-svelte 0.23.0 → 0.25.0

package/dist/spreadsheet/NameManager.svelte

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

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

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

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

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

package/dist/spreadsheet/SheetTabs.svelte

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

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

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

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

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

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, runSpreadsheetMenuItem, 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));"
@@ -73,7 +77,8 @@
         : ''}"
       onclick={() => {
         onClose();
-        runSpreadsheetMenuItem(item);
+        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,EAA6C,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjH,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;AA+DH,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"}