@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvSheetErrors.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  /**
+   * Excel's Error Checking: the cells on this sheet worth a second look,
+   * walked one at a time. Each one says what the error means rather than
+   * leaving the code to be looked up, and Show Calculation Steps hands the
+   * cell to Evaluate Formula, which is where the answer usually is.
+   *
+   * The selection follows the walk, so the cell being talked about is the
+   * cell on screen.
+   */
+  import { untrack } from 'svelte'
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { colToLetters } from './sheet/address'
+  import { checkSheet, describeFinding, type ErrorFinding } from './sheet/error-check'
+  import type { Workbook } from './sheet/workbook'
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    sheet: string
+    /** Put the selection on a cell being looked at. */
+    onGoTo: (cell: { row: number; col: number }) => void
+    /** Open Evaluate Formula on the cell being looked at. */
+    onSteps: (cell: { row: number; col: number }) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, sheet, onGoTo, onSteps, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let findings = $state<ErrorFinding[]>([])
+  let at = $state(0)
+  let nextButton = $state<HTMLButtonElement | null>(null)
+
+  const current = $derived(findings[at] ?? null)
+  const address = $derived(current ? `${colToLetters(current.col)}${current.row + 1}` : '')
+
+  // Opening is the only thing this effect follows. Reading the workbook
+  // through it would tie it to every repaint, and moving the selection
+  // repaints, so the walk would restart itself forever.
+  $effect(() => {
+    if (!open) return
+    untrack(load)
+  })
+
+  function load() {
+    const found = checkSheet(sheet, {
+      rowCount: () => workbook.rowCount(sheet),
+      colCount: () => workbook.colCount(sheet),
+      getRaw: (row, col) => workbook.getRaw(sheet, row, col),
+      getValue: (row, col) => workbook.getValue(sheet, row, col),
+    })
+    findings = found
+    at = 0
+    show(found[0])
+    queueMicrotask(() => nextButton?.focus())
+  }
+
+  function show(finding: ErrorFinding | undefined) {
+    if (finding) onGoTo({ row: finding.row, col: finding.col })
+  }
+
+  function move(by: number) {
+    const list = findings
+    if (list.length === 0) return
+    at = (at + by + list.length) % list.length
+    show(list[at])
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('errors.title')} size="sm">
+  <div class="sv-sheet-dialog">
+    {#if current}
+      <p class="position">{t('errors.position', { index: at + 1, count: findings.length })}</p>
+      <p class="headline">
+        <code>{address}</code>
+        <strong>{current.kind === 'error' ? current.error : t('errors.inconsistent')}</strong>
+      </p>
+      <pre class="formula">{current.text}</pre>
+      <p class="meaning">{describeFinding(current)}</p>
+    {:else}
+      <p class="none">{t('errors.none')}</p>
+    {/if}
+    <p class="hint">{t('errors.hint')}</p>
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={() => move(-1)} disabled={findings.length < 2}>{t('errors.previous')}</button>
+      <button type="button" class="btn" bind:this={nextButton} onclick={() => move(1)} disabled={findings.length < 2}>{t('errors.next')}</button>
+      <span class="spacer"></span>
+      <button
+        type="button"
+        class="btn primary"
+        disabled={!current}
+        onclick={() => { if (current) { open = false; onSteps({ row: current.row, col: current.col }) } }}
+      >{t('errors.steps')}</button>
+      <button type="button" class="btn" onclick={close}>{t('close')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  .position { margin: 0 0 6px; color: var(--sg-muted, #64748b); font-size: 12px; }
+  .headline { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
+  .formula {
+    margin: 0 0 8px;
+    padding: 8px 10px;
+    border: 1px solid var(--sg-border, #d4d4d8);
+    border-radius: 4px;
+    background: var(--sg-surface-2, #f8fafc);
+    font-family: var(--sg-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 13px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .meaning { margin: 0; }
+  .none { margin: 0 0 8px; }
+</style>

package/dist/SvSheetErrors.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    sheet: string;
+    /** Put the selection on a cell being looked at. */
+    onGoTo: (cell: {
+        row: number;
+        col: number;
+    }) => void;
+    /** Open Evaluate Formula on the cell being looked at. */
+    onSteps: (cell: {
+        row: number;
+        col: number;
+    }) => void;
+    onClose?: () => void;
+};
+declare const SvSheetErrors: import("svelte").Component<Props, {}, "open">;
+type SvSheetErrors = ReturnType<typeof SvSheetErrors>;
+export default SvSheetErrors;

package/dist/SvSheetEvaluate.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  /**
+   * Excel's Evaluate Formula: the active cell's formula with one part
+   * underlined, and a button that replaces that part with what it is worth.
+   * Keep clicking and the formula collapses into the cell's answer, which is
+   * the quickest way to see which half of a long formula is the wrong half.
+   *
+   * The walk itself is `evaluationSteps`; this shows it and lets the reader
+   * move back and forth through it.
+   */
+  import { untrack } from 'svelte'
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { colToLetters } from './sheet/address'
+  import { parseFormula } from './sheet/parse'
+  import { evaluationSteps, printValue, type EvaluationStep } from './sheet/evaluate-steps'
+  import type { Workbook } from './sheet/workbook'
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    sheet: string
+    /** The cell to walk, which is the active one when the dialog opens. */
+    cell: { row: number; col: number }
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, sheet, cell, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let steps = $state<EvaluationStep[]>([])
+  let at = $state(0)
+  let problem = $state('')
+  let evaluateButton = $state<HTMLButtonElement | null>(null)
+
+  const address = $derived(`${sheet}!${colToLetters(cell.col)}${cell.row + 1}`)
+  /** The line on screen: the formula as it stands before the next step, or
+   *  the final value once every part has been worked out. */
+  const current = $derived(steps[at] ?? null)
+  const finished = $derived(steps.length > 0 && at >= steps.length)
+  const answer = $derived(steps.length > 0 ? steps[steps.length - 1]!.value : null)
+
+  // The cell is followed, because Error Checking hands this dialog a new
+  // one while it is open; the workbook is not, or every repaint would
+  // restart the walk.
+  $effect(() => {
+    if (!open) return
+    const target = cell
+    untrack(() => walk(target))
+  })
+
+  function walk(target: { row: number; col: number }) {
+    at = 0
+    problem = ''
+    steps = []
+    const text = workbook.getRaw(sheet, target.row, target.col).trim()
+    if (!text.startsWith('=')) {
+      problem = t('evaluate.noFormula')
+      return
+    }
+    try {
+      steps = evaluationSteps(
+        parseFormula(text),
+        (formula) => workbook.evaluateText(sheet, formula, undefined, { row: target.row, col: target.col }),
+      )
+    } catch {
+      problem = t('evaluate.noFormula')
+    }
+    queueMicrotask(() => evaluateButton?.focus())
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('evaluate.title')} size="md">
+  <div class="sv-sheet-dialog">
+    <p class="reference"><span class="label">{t('evaluate.reference')}</span> <code>{address}</code></p>
+    {#if problem}
+      <p class="error">{problem}</p>
+    {:else}
+      <p class="label">{t('evaluate.evaluation')}</p>
+      <pre class="evaluation" data-testid="sv-sheet-evaluation">{#if current}{current.formula.slice(0, current.from)}<mark>{current.formula.slice(current.from, current.to)}</mark>{current.formula.slice(current.to)}{:else}{printValue(answer ?? '')}{/if}</pre>
+      {#if finished}
+        <p class="done">{t('evaluate.done')} <strong>{printValue(answer ?? '')}</strong></p>
+      {/if}
+      <p class="hint">{t('evaluate.hint')}</p>
+    {/if}
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={() => { at = Math.max(0, at - 1) }} disabled={at === 0 || !!problem}>{t('evaluate.stepBack')}</button>
+      <button type="button" class="btn" onclick={() => { at = 0 }} disabled={at === 0 || !!problem}>{t('evaluate.restart')}</button>
+      <span class="spacer"></span>
+      <button
+        type="button"
+        class="btn primary"
+        bind:this={evaluateButton}
+        onclick={() => { at = Math.min(steps.length, at + 1) }}
+        disabled={finished || !!problem}
+      >{t('evaluate.evaluate')}</button>
+      <button type="button" class="btn" onclick={close}>{t('close')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  .reference { margin: 0 0 8px; }
+  .label { color: var(--sg-muted, #64748b); font-size: 12px; }
+  .evaluation {
+    margin: 0;
+    padding: 10px 12px;
+    border: 1px solid var(--sg-border, #d4d4d8);
+    border-radius: 4px;
+    background: var(--sg-surface-2, #f8fafc);
+    font-family: var(--sg-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 13px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .evaluation mark {
+    background: var(--sg-accent-soft, #dbeafe);
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .done { margin: 8px 0 0; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetEvaluate.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    sheet: string;
+    /** The cell to walk, which is the active one when the dialog opens. */
+    cell: {
+        row: number;
+        col: number;
+    };
+    onClose?: () => void;
+};
+declare const SvSheetEvaluate: import("svelte").Component<Props, {}, "open">;
+type SvSheetEvaluate = ReturnType<typeof SvSheetEvaluate>;
+export default SvSheetEvaluate;

package/dist/SvSheetFilterMenu.svelte

@@ -7,8 +7,9 @@
    * column's values to tick, OK and Cancel. The shell mounts it inside the
    * popover anchored to the header cell.
    */
+  import { useSheetText } from './sheet-text'
   import type { ExcelFilterOperator } from '@svgrid/grid/filtering'
-  import { valuesFilter, type ColumnFilter, type FilterValue, type FilterCondition } from './sheet/auto-filter'
+  import { valuesFilter, type ColumnFilter, type FilterValue, type FilterCondition, type DatePeriod } from './sheet/auto-filter'
 
   type Props = {
     /** The header text, for Clear Filter From "X". */
@@ -19,26 +20,43 @@
     filter: ColumnFilter | null
     /** Whether the column holds numbers, for Number Filters over Text Filters. */
     numeric: boolean
+    /** Whether the column holds dates, for Date Filters. */
+    dates?: boolean
+    /** The fills the column's cells carry (null for none), for Filter by
+     *  Color; the entry is left off with fewer than two. */
+    fills?: ReadonlyArray<string | null>
     onSort: (direction: 'asc' | 'desc') => void
     onApply: (filter: ColumnFilter | null) => void
     onCancel: () => void
   }
 
-  let { header, values, filter, numeric, onSort, onApply, onCancel }: Props = $props()
+  let { header, values, filter, numeric, dates = false, fills = [], onSort, onApply, onCancel }: Props = $props()
+  const t = useSheetText()
 
-  const TEXT_OPS: ReadonlyArray<[ExcelFilterOperator, string]> = [
-    ['equals', 'Equals'], ['notEquals', 'Does Not Equal'], ['startsWith', 'Begins With'], ['endsWith', 'Ends With'],
-    ['contains', 'Contains'], ['notContains', 'Does Not Contain'], ['isBlank', 'Is Blank'], ['isNotBlank', 'Is Not Blank'],
+  const PERIODS: ReadonlyArray<DatePeriod> = [
+    'equals', 'before', 'after', 'between', 'tomorrow', 'today', 'yesterday',
+    'nextWeek', 'thisWeek', 'lastWeek', 'nextMonth', 'thisMonth', 'lastMonth',
+    'nextQuarter', 'thisQuarter', 'lastQuarter', 'nextYear', 'thisYear', 'lastYear', 'yearToDate',
   ]
-  const NUMBER_OPS: ReadonlyArray<[ExcelFilterOperator, string]> = [
-    ['equals', 'Equals'], ['notEquals', 'Does Not Equal'], ['greaterThan', 'Greater Than'], ['lessThan', 'Less Than'],
-    ['between', 'Between'], ['isBlank', 'Is Blank'], ['isNotBlank', 'Is Not Blank'],
+  const typedPeriod = (p: DatePeriod) => p === 'equals' || p === 'before' || p === 'after' || p === 'between'
+
+  const TEXT_OPS: ReadonlyArray<ExcelFilterOperator> = [
+    'equals', 'notEquals', 'startsWith', 'endsWith', 'contains', 'notContains', 'isBlank', 'isNotBlank',
+  ]
+  const NUMBER_OPS: ReadonlyArray<ExcelFilterOperator> = [
+    'equals', 'notEquals', 'greaterThan', 'lessThan', 'between', 'isBlank', 'isNotBlank',
   ]
   const ops = $derived(numeric ? NUMBER_OPS : TEXT_OPS)
 
   let search = $state('')
   let ticked = $state<Set<string>>(new Set())
-  let mode = $state<'values' | 'condition'>('values')
+  let mode = $state<'values' | 'condition' | 'date' | 'top'>('values')
+  let period = $state<DatePeriod>('today')
+  let d1 = $state('')
+  let d2 = $state('')
+  let topSide = $state<'top' | 'bottom'>('top')
+  let topCount = $state(10)
+  let topUnit = $state<'items' | 'percent'>('items')
   let op1 = $state<ExcelFilterOperator>('equals')
   let v1 = $state('')
   let v1to = $state('')
@@ -52,9 +70,15 @@
     // Open on the column's state: the ticks it has, or the condition it has.
     const f = filter
     const all = values.map((v) => v.text)
-    if (f?.kind === 'values') ticked = new Set(all.filter((t) => !f.excluded.includes(t)))
+    if (f?.kind === 'values') ticked = new Set(f.included ? all.filter((t) => f.included!.includes(t)) : all.filter((t) => !f.excluded.includes(t)))
     else ticked = new Set(all)
-    mode = f?.kind === 'condition' ? 'condition' : 'values'
+    mode = f?.kind === 'condition' ? 'condition' : f?.kind === 'date' ? 'date' : f?.kind === 'top' ? 'top' : 'values'
+    period = f?.kind === 'date' ? f.period : 'today'
+    d1 = f?.kind === 'date' ? f.value ?? '' : ''
+    d2 = f?.kind === 'date' ? f.valueTo ?? '' : ''
+    topSide = f?.kind === 'top' && !f.top ? 'bottom' : 'top'
+    topCount = f?.kind === 'top' ? f.count : 10
+    topUnit = f?.kind === 'top' && f.percent ? 'percent' : 'items'
     if (f?.kind === 'condition') {
       op1 = f.first.op; v1 = f.first.value ?? ''; v1to = f.first.valueTo ?? ''
       join = f.join ?? 'and'
@@ -93,7 +117,22 @@
       && (op2 === '' || !needsValue(op2) || v2.trim() !== '') && (op2 !== 'between' || v2to.trim() !== ''),
   )
 
+  const dateValid = $derived(
+    !typedPeriod(period) || (d1.trim() !== '' && (period !== 'between' || d2.trim() !== '')),
+  )
+  const topValid = $derived(Number.isFinite(topCount) && topCount > 0)
+
   function ok() {
+    if (mode === 'date') {
+      if (!dateValid) return
+      onApply({ kind: 'date', period, ...(typedPeriod(period) ? { value: d1.trim() } : {}), ...(period === 'between' ? { valueTo: d2.trim() } : {}) })
+      return
+    }
+    if (mode === 'top') {
+      if (!topValid) return
+      onApply({ kind: 'top', top: topSide === 'top', count: Math.trunc(topCount), ...(topUnit === 'percent' ? { percent: true } : {}) })
+      return
+    }
     if (mode === 'condition') {
       if (!conditionValid) return
       const first: FilterCondition = { op: op1, ...(needsValue(op1) ? { value: v1.trim() } : {}), ...(op1 === 'between' ? { valueTo: v1to.trim() } : {}) }
@@ -115,52 +154,100 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="sv-sheet-filter-menu" role="dialog" aria-label={`Filter ${header}`} onkeydown={onKeyDown}>
-  <button type="button" class="row" onclick={() => onSort('asc')}>{numeric ? 'Sort Smallest to Largest' : 'Sort A to Z'}</button>
-  <button type="button" class="row" onclick={() => onSort('desc')}>{numeric ? 'Sort Largest to Smallest' : 'Sort Z to A'}</button>
+<div class="sv-sheet-filter-menu" role="dialog" tabindex="-1" aria-label={t('filter.label', { header })} onkeydown={onKeyDown}>
+  <button type="button" class="row" onclick={() => onSort('asc')}>{t(numeric ? 'filter.sortSmallest' : 'filter.sortAsc')}</button>
+  <button type="button" class="row" onclick={() => onSort('desc')}>{t(numeric ? 'filter.sortLargest' : 'filter.sortDesc')}</button>
   <hr />
-  <button type="button" class="row" disabled={!filter} onclick={() => onApply(null)}>Clear Filter From "{header}"</button>
+  <button type="button" class="row" disabled={!filter} onclick={() => onApply(null)}>{t('filter.clear', { header })}</button>
+  {#if fills.length > 1}
+    <!-- Excel's Filter by Color: the fills the column carries, as swatches. -->
+    <details class="conditions colours" open={filter?.kind === 'color'}>
+      <summary>{t('filter.byColor')}</summary>
+      <div class="swatches" role="group" aria-label={t('filter.byColorGroup')}>
+        {#each fills as fill (fill ?? '')}
+          <button
+            type="button"
+            class="swatch"
+            class:none={fill === null}
+            class:on={filter?.kind === 'color' && (filter.fill ?? '') === (fill ?? '')}
+            style:background={fill ?? undefined}
+            title={fill ?? t('filter.noFill')}
+            aria-label={fill ? t('filter.byFill', { fill }) : t('filter.byNoFill')}
+            onclick={() => onApply({ kind: 'color', fill })}
+          >{#if fill === null}{t('filter.noFill')}{/if}</button>
+        {/each}
+      </div>
+    </details>
+  {/if}
+  {#if dates}
+    <details class="conditions" open={mode === 'date'} ontoggle={(e) => { if ((e.currentTarget as HTMLDetailsElement).open) mode = 'date' }}>
+      <summary>{t('filter.dateFilters')}</summary>
+      <div class="condition">
+        <select bind:value={period} aria-label={t('filter.datePeriod')} onchange={() => (mode = 'date')}>
+          {#each PERIODS as id (id)}<option value={id}>{t(`filter.period.${id}`)}</option>{/each}
+        </select>
+        {#if typedPeriod(period)}<input type="date" bind:value={d1} aria-label={t('filter.date')} oninput={() => (mode = 'date')} />{/if}
+        {#if period === 'between'}<span>{t('filter.and')}</span><input type="date" bind:value={d2} aria-label={t('filter.secondDate')} />{/if}
+      </div>
+    </details>
+  {/if}
   <details class="conditions" open={mode === 'condition'} ontoggle={(e) => { if ((e.currentTarget as HTMLDetailsElement).open) mode = 'condition' }}>
-    <summary>{numeric ? 'Number Filters' : 'Text Filters'}</summary>
+    <summary>{t(numeric ? 'filter.numberFilters' : 'filter.textFilters')}</summary>
     <div class="condition">
-      <select bind:value={op1} aria-label="First condition" onchange={() => (mode = 'condition')}>
-        {#each ops as [op, label] (op)}<option value={op}>{label}</option>{/each}
+      <select bind:value={op1} aria-label={t('filter.firstCondition')} onchange={() => (mode = 'condition')}>
+        {#each ops as op (op)}<option value={op}>{t(`filter.op.${op}`)}</option>{/each}
       </select>
-      {#if needsValue(op1)}<input type="text" bind:value={v1} aria-label="First value" oninput={() => (mode = 'condition')} />{/if}
-      {#if op1 === 'between'}<span>and</span><input type="text" bind:value={v1to} aria-label="First upper value" />{/if}
+      {#if needsValue(op1)}<input type="text" bind:value={v1} aria-label={t('filter.firstValue')} oninput={() => (mode = 'condition')} />{/if}
+      {#if op1 === 'between'}<span>{t('filter.and')}</span><input type="text" bind:value={v1to} aria-label={t('filter.firstUpperValue')} />{/if}
     </div>
     <div class="join">
-      <label class="check"><input type="radio" name="sv-sheet-filter-join" value="and" bind:group={join} /> And</label>
-      <label class="check"><input type="radio" name="sv-sheet-filter-join" value="or" bind:group={join} /> Or</label>
+      <label class="check"><input type="radio" name="sv-sheet-filter-join" value="and" bind:group={join} /> {t('filter.joinAnd')}</label>
+      <label class="check"><input type="radio" name="sv-sheet-filter-join" value="or" bind:group={join} /> {t('filter.joinOr')}</label>
     </div>
     <div class="condition">
-      <select bind:value={op2} aria-label="Second condition">
-        <option value="">(none)</option>
-        {#each ops as [op, label] (op)}<option value={op}>{label}</option>{/each}
+      <select bind:value={op2} aria-label={t('filter.secondCondition')}>
+        <option value="">{t('filter.none')}</option>
+        {#each ops as op (op)}<option value={op}>{t(`filter.op.${op}`)}</option>{/each}
       </select>
-      {#if needsValue(op2)}<input type="text" bind:value={v2} aria-label="Second value" />{/if}
-      {#if op2 === 'between'}<span>and</span><input type="text" bind:value={v2to} aria-label="Second upper value" />{/if}
+      {#if needsValue(op2)}<input type="text" bind:value={v2} aria-label={t('filter.secondValue')} />{/if}
+      {#if op2 === 'between'}<span>{t('filter.and')}</span><input type="text" bind:value={v2to} aria-label={t('filter.secondUpperValue')} />{/if}
     </div>
   </details>
+  {#if numeric}
+    <details class="conditions" open={mode === 'top'} ontoggle={(e) => { if ((e.currentTarget as HTMLDetailsElement).open) mode = 'top' }}>
+      <summary>{t('filter.top10')}</summary>
+      <div class="condition top">
+        <select bind:value={topSide} aria-label={t('filter.topOrBottom')} onchange={() => (mode = 'top')}>
+          <option value="top">{t('filter.top')}</option>
+          <option value="bottom">{t('filter.bottom')}</option>
+        </select>
+        <input type="number" min="1" bind:value={topCount} aria-label={t('filter.howMany')} oninput={() => (mode = 'top')} />
+        <select bind:value={topUnit} aria-label={t('filter.itemsOrPercent')}>
+          <option value="items">{t('filter.items')}</option>
+          <option value="percent">{t('filter.percent')}</option>
+        </select>
+      </div>
+    </details>
+  {/if}
   <hr />
-  <input bind:this={searchBox} type="search" class="search" placeholder="Search" aria-label="Search values" bind:value={search} />
-  <div class="values" role="group" aria-label="Values">
+  <input bind:this={searchBox} type="search" class="search" placeholder={t('filter.search')} aria-label={t('filter.searchValues')} bind:value={search} />
+  <div class="values" role="group" aria-label={t('filter.values')}>
     <label class="check all">
       <input type="checkbox" checked={allShownTicked} indeterminate={!allShownTicked && !noneShownTicked} onchange={toggleAll} />
-      (Select All{search.trim() ? ' Search Results' : ''})
+      {t(search.trim() ? 'filter.selectAllResults' : 'filter.selectAll')}
     </label>
     {#each shown as v (v.text)}
       <label class="check">
         <input type="checkbox" checked={ticked.has(v.text)} onchange={() => toggle(v.text)} />
-        <span class="text">{v.text === '' ? '(Blanks)' : v.text}</span>
+        <span class="text">{v.text === '' ? t('filter.blanks') : v.text}</span>
         <span class="count">{v.count}</span>
       </label>
     {/each}
-    {#if shown.length === 0}<div class="none">No matches.</div>{/if}
+    {#if shown.length === 0}<div class="none">{t('filter.noMatches')}</div>{/if}
   </div>
   <div class="sv-sheet-dialog-buttons">
-    <button type="button" class="btn primary" onclick={ok} disabled={mode === 'condition' ? !conditionValid : noneShownTicked && !search.trim()}>OK</button>
-    <button type="button" class="btn" onclick={onCancel}>Cancel</button>
+    <button type="button" class="btn primary" onclick={ok} disabled={mode === 'condition' ? !conditionValid : mode === 'date' ? !dateValid : mode === 'top' ? !topValid : noneShownTicked && !search.trim()}>{t('ok')}</button>
+    <button type="button" class="btn" onclick={onCancel}>{t('cancel')}</button>
   </div>
 </div>
 
@@ -192,6 +279,22 @@
   .condition, .join { display: flex; align-items: center; gap: 6px; padding: 3px 8px; }
   .condition select { flex: 0 0 120px; }
   .condition input { flex: 1 1 60px; min-width: 40px; }
+  .condition.top select { flex: 0 0 80px; }
+  .condition.top input { flex: 0 0 56px; }
+  .swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
+  .swatch {
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    font: inherit;
+    font-size: 10px;
+    color: inherit;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  .swatch.none { width: auto; padding: 0 6px; background: var(--sg-bg, #fff); }
+  .swatch.on { outline: 2px solid var(--sg-accent, #217346); outline-offset: 1px; }
   select, input[type="text"], .search {
     height: 24px;
     padding: 0 6px;

package/dist/SvSheetFilterMenu.svelte.d.ts

@@ -8,6 +8,11 @@ type Props = {
     filter: ColumnFilter | null;
     /** Whether the column holds numbers, for Number Filters over Text Filters. */
     numeric: boolean;
+    /** Whether the column holds dates, for Date Filters. */
+    dates?: boolean;
+    /** The fills the column's cells carry (null for none), for Filter by
+     *  Color; the entry is left off with fewer than two. */
+    fills?: ReadonlyArray<string | null>;
     onSort: (direction: 'asc' | 'desc') => void;
     onApply: (filter: ColumnFilter | null) => void;
     onCancel: () => void;