@svgrid/enterprise 3.0.1 → 3.0.2

package/dist/SvSheetDataValidation.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  /**
+   * Excel's Data Validation dialog, the two tabs with something behind them:
+   * Settings (Allow, Data, the bounds or the source, Ignore blank, In-cell
+   * dropdown) and Error Alert (Style, Title, Message). It opens on the rule
+   * at the active cell and, on OK, hands back one rule for the shell to put
+   * over the selection; Clear All removes the validation from the selection.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import {
+    OPERATOR_LABELS,
+    type ValidationRule, type ValidationAllow, type ValidationOperator, type ValidationSpec,
+  } from './sheet/validation'
+
+  type Props = {
+    open?: boolean
+    /** The rule at the active cell, what the dialog opens on. */
+    rule: ValidationRule | undefined
+    /** The selection as A1, for the heading. */
+    address: string
+    onApply: (spec: ValidationSpec) => void
+    onClear: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), rule, address, onApply, onClear, onClose }: Props = $props()
+
+  type Tab = 'settings' | 'alert'
+  let tab = $state<Tab>('settings')
+
+  const ALLOWS: ReadonlyArray<{ id: ValidationAllow; label: string }> = [
+    { id: 'any', label: 'Any value' },
+    { id: 'whole', label: 'Whole number' },
+    { id: 'decimal', label: 'Decimal' },
+    { id: 'list', label: 'List' },
+    { id: 'date', label: 'Date' },
+    { id: 'textLength', label: 'Text length' },
+    { id: 'custom', label: 'Custom' },
+  ]
+  const OPERATORS = Object.entries(OPERATOR_LABELS) as Array<[ValidationOperator, string]>
+
+  let allow = $state<ValidationAllow>('any')
+  let operator = $state<ValidationOperator>('between')
+  let value1 = $state('')
+  let value2 = $state('')
+  let ignoreBlank = $state(true)
+  let inCellDropdown = $state(true)
+  let style = $state<'stop' | 'warning'>('stop')
+  let title = $state('')
+  let message = $state('')
+  let first = $state<HTMLSelectElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    tab = 'settings'
+    allow = rule?.allow ?? 'any'
+    operator = rule?.operator ?? 'between'
+    value1 = rule?.value1 ?? ''
+    value2 = rule?.value2 ?? ''
+    ignoreBlank = rule?.ignoreBlank ?? true
+    inCellDropdown = rule?.inCellDropdown ?? true
+    style = rule?.alert.style ?? 'stop'
+    title = rule?.alert.title ?? ''
+    message = rule?.alert.message ?? ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  const bounded = $derived(allow === 'whole' || allow === 'decimal' || allow === 'date' || allow === 'textLength')
+  const twoBounds = $derived(operator === 'between' || operator === 'notBetween')
+  const firstLabel = $derived(
+    allow === 'list' ? 'Source:'
+      : allow === 'custom' ? 'Formula:'
+      : twoBounds ? (allow === 'date' ? 'Start date:' : 'Minimum:')
+      : allow === 'date' ? 'Date:' : allow === 'textLength' ? 'Length:' : 'Value:',
+  )
+  const secondLabel = $derived(allow === 'date' ? 'End date:' : 'Maximum:')
+  const valid = $derived(
+    allow === 'any'
+      || (allow === 'list' && value1.trim() !== '')
+      || (allow === 'custom' && value1.trim() !== '')
+      || (bounded && value1.trim() !== '' && (!twoBounds || value2.trim() !== '')),
+  )
+
+  function ok() {
+    if (!valid) return
+    const spec: ValidationSpec = {
+      allow,
+      ignoreBlank,
+      inCellDropdown: allow === 'list' ? inCellDropdown : false,
+      alert: { style, title: title.trim() || undefined, message: message.trim() || undefined },
+    }
+    if (bounded) {
+      spec.operator = operator
+      spec.value1 = value1.trim()
+      if (twoBounds) spec.value2 = value2.trim()
+    } else if (allow === 'list' || allow === 'custom') {
+      spec.value1 = value1.trim()
+    }
+    onApply(spec)
+    open = false
+    onClose?.()
+  }
+
+  function clearAll() {
+    onClear()
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Data Validation" size="sm" width={400}>
+  <form class="sv-sheet-dialog validation" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <div class="where">{address}</div>
+    <div class="tabs" role="tablist" aria-label="Data Validation tabs">
+      {#each [['settings', 'Settings'], ['alert', 'Error Alert']] as [id, label] (id)}
+        <button type="button" role="tab" class="tab" class:on={tab === id} aria-selected={tab === id} onclick={() => (tab = id as Tab)}>{label}</button>
+      {/each}
+    </div>
+    <div class="panel" role="tabpanel">
+      {#if tab === 'settings'}
+        <div class="lead">Validation criteria</div>
+        <label class="field">
+          <span>Allow:</span>
+          <select bind:this={first} bind:value={allow}>
+            {#each ALLOWS as a (a.id)}<option value={a.id}>{a.label}</option>{/each}
+          </select>
+        </label>
+        {#if bounded}
+          <label class="field">
+            <span>Data:</span>
+            <select bind:value={operator}>
+              {#each OPERATORS as [id, label] (id)}<option value={id}>{label}</option>{/each}
+            </select>
+          </label>
+        {/if}
+        {#if allow !== 'any'}
+          <label class="field">
+            <span>{firstLabel}</span>
+            <input type="text" bind:value={value1} spellcheck="false" placeholder={allow === 'list' ? 'Red, Green, Blue or =$D$1:$D$5' : allow === 'custom' ? '=B1<>""' : ''} />
+          </label>
+        {/if}
+        {#if bounded && twoBounds}
+          <label class="field">
+            <span>{secondLabel}</span>
+            <input type="text" bind:value={value2} spellcheck="false" />
+          </label>
+        {/if}
+        <div class="checks">
+          <label class="check"><input type="checkbox" bind:checked={ignoreBlank} /> Ignore blank</label>
+          {#if allow === 'list'}
+            <label class="check"><input type="checkbox" bind:checked={inCellDropdown} /> In-cell dropdown</label>
+          {/if}
+        </div>
+        {#if allow === 'custom'}
+          <p class="hint">Written for the top-left cell of the selection; it moves with each cell, as a copied formula would. TRUE (or a number other than 0) allows the entry.</p>
+        {:else if allow === 'list'}
+          <p class="hint">A comma-separated list, or a range or a defined name starting with =.</p>
+        {:else if allow !== 'any'}
+          <p class="hint">A bound can be a formula, so =$B$1 follows B1.</p>
+        {/if}
+      {:else}
+        <div class="lead">When the user enters invalid data, show this alert:</div>
+        <label class="field">
+          <span>Style:</span>
+          <select bind:value={style}>
+            <option value="stop">Stop</option>
+            <option value="warning">Warning</option>
+          </select>
+        </label>
+        <label class="field">
+          <span>Title:</span>
+          <input type="text" bind:value={title} />
+        </label>
+        <label class="field message">
+          <span>Error message:</span>
+          <textarea rows="4" bind:value={message}></textarea>
+        </label>
+        <p class="hint">Stop refuses the entry and offers Retry; Warning asks whether to keep it anyway.</p>
+      {/if}
+    </div>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={clearAll}>Clear All</button>
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>OK</button>
+      <button type="button" class="btn" onclick={close}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .where { color: var(--sg-muted, #616161); }
+  .tabs {
+    display: flex;
+    gap: 2px;
+    border-bottom: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .tab {
+    padding: 5px 12px;
+    font: inherit;
+    font-size: 13px;
+    color: var(--sg-muted, #616161);
+    background: transparent;
+    border: 1px solid transparent;
+    border-bottom: 0;
+    border-radius: var(--sg-radius, 3px) var(--sg-radius, 3px) 0 0;
+    cursor: pointer;
+  }
+  .tab:hover { color: var(--sg-fg, #242424); }
+  .tab.on {
+    color: var(--sg-fg, #242424);
+    background: var(--sg-bg, #fff);
+    border-color: var(--sg-border, #d1d1d1);
+    margin-bottom: -1px;
+  }
+  .panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-height: 220px;
+    padding-top: 4px;
+  }
+  .lead { font-weight: 600; }
+  .hint { margin: 0; color: var(--sg-muted, #616161); }
+  .field.message { align-items: start; }
+  textarea {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 4px 6px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    resize: vertical;
+  }
+  textarea:focus {
+    outline: none;
+    border-color: var(--sg-accent, #217346);
+    box-shadow: 0 0 0 1px var(--sg-accent, #217346);
+  }
+  .spacer { flex: 1; }
+</style>

package/dist/SvSheetDataValidation.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type ValidationRule, type ValidationSpec } from './sheet/validation.js';
+type Props = {
+    open?: boolean;
+    /** The rule at the active cell, what the dialog opens on. */
+    rule: ValidationRule | undefined;
+    /** The selection as A1, for the heading. */
+    address: string;
+    onApply: (spec: ValidationSpec) => void;
+    onClear: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetDataValidation: import("svelte").Component<Props, {}, "open">;
+type SvSheetDataValidation = ReturnType<typeof SvSheetDataValidation>;
+export default SvSheetDataValidation;

package/dist/SvSheetFilterMenu.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  /**
+   * The menu an AutoFilter arrow drops: Excel's, in its order. Sort A to Z
+   * and Z to A, Clear Filter From the column, a condition (Text Filters or
+   * Number Filters: equals, greater than, contains, between and the rest,
+   * two of them joined with And / Or), a search box, (Select All) and the
+   * column's values to tick, OK and Cancel. The shell mounts it inside the
+   * popover anchored to the header cell.
+   */
+  import type { ExcelFilterOperator } from '@svgrid/grid/filtering'
+  import { valuesFilter, type ColumnFilter, type FilterValue, type FilterCondition } from './sheet/auto-filter'
+
+  type Props = {
+    /** The header text, for Clear Filter From "X". */
+    header: string
+    /** The column's values with their counts. */
+    values: ReadonlyArray<FilterValue>
+    /** The filter on the column now, if any. */
+    filter: ColumnFilter | null
+    /** Whether the column holds numbers, for Number Filters over Text Filters. */
+    numeric: boolean
+    onSort: (direction: 'asc' | 'desc') => void
+    onApply: (filter: ColumnFilter | null) => void
+    onCancel: () => void
+  }
+
+  let { header, values, filter, numeric, onSort, onApply, onCancel }: Props = $props()
+
+  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 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 ops = $derived(numeric ? NUMBER_OPS : TEXT_OPS)
+
+  let search = $state('')
+  let ticked = $state<Set<string>>(new Set())
+  let mode = $state<'values' | 'condition'>('values')
+  let op1 = $state<ExcelFilterOperator>('equals')
+  let v1 = $state('')
+  let v1to = $state('')
+  let join = $state<'and' | 'or'>('and')
+  let op2 = $state<ExcelFilterOperator | ''>('')
+  let v2 = $state('')
+  let v2to = $state('')
+  let searchBox = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    // 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)))
+    else ticked = new Set(all)
+    mode = f?.kind === 'condition' ? 'condition' : 'values'
+    if (f?.kind === 'condition') {
+      op1 = f.first.op; v1 = f.first.value ?? ''; v1to = f.first.valueTo ?? ''
+      join = f.join ?? 'and'
+      op2 = f.second?.op ?? ''; v2 = f.second?.value ?? ''; v2to = f.second?.valueTo ?? ''
+    } else {
+      op1 = 'equals'; v1 = ''; v1to = ''; join = 'and'; op2 = ''; v2 = ''; v2to = ''
+    }
+    search = ''
+    queueMicrotask(() => searchBox?.focus())
+  })
+
+  const shown = $derived.by(() => {
+    const needle = search.trim().toLowerCase()
+    return needle ? values.filter((v) => v.text.toLowerCase().includes(needle)) : values
+  })
+  const allShownTicked = $derived(shown.length > 0 && shown.every((v) => ticked.has(v.text)))
+  const noneShownTicked = $derived(shown.every((v) => !ticked.has(v.text)))
+
+  function toggle(text: string) {
+    const next = new Set(ticked)
+    if (next.has(text)) next.delete(text)
+    else next.add(text)
+    ticked = next
+    mode = 'values'
+  }
+  function toggleAll() {
+    const next = new Set(ticked)
+    if (allShownTicked) for (const v of shown) next.delete(v.text)
+    else for (const v of shown) next.add(v.text)
+    ticked = next
+    mode = 'values'
+  }
+  const needsValue = (op: ExcelFilterOperator | '') => op !== '' && op !== 'isBlank' && op !== 'isNotBlank'
+  const conditionValid = $derived(
+    (!needsValue(op1) || v1.trim() !== '') && (op1 !== 'between' || v1to.trim() !== '')
+      && (op2 === '' || !needsValue(op2) || v2.trim() !== '') && (op2 !== 'between' || v2to.trim() !== ''),
+  )
+
+  function ok() {
+    if (mode === 'condition') {
+      if (!conditionValid) return
+      const first: FilterCondition = { op: op1, ...(needsValue(op1) ? { value: v1.trim() } : {}), ...(op1 === 'between' ? { valueTo: v1to.trim() } : {}) }
+      const second: FilterCondition | undefined = op2 === ''
+        ? undefined
+        : { op: op2, ...(needsValue(op2) ? { value: v2.trim() } : {}), ...(op2 === 'between' ? { valueTo: v2to.trim() } : {}) }
+      onApply({ kind: 'condition', first, ...(second ? { join, second } : {}) })
+      return
+    }
+    // A search applies its results, as Excel's does: the values it hides
+    // are out, whatever their ticks, and the ticked matches stay.
+    const keep = search.trim() ? new Set(shown.filter((v) => ticked.has(v.text)).map((v) => v.text)) : ticked
+    onApply(valuesFilter(values.map((v) => v.text), keep))
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !(event.target instanceof HTMLButtonElement)) { event.preventDefault(); ok() }
+  }
+</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>
+  <hr />
+  <button type="button" class="row" disabled={!filter} onclick={() => onApply(null)}>Clear Filter From "{header}"</button>
+  <details class="conditions" open={mode === 'condition'} ontoggle={(e) => { if ((e.currentTarget as HTMLDetailsElement).open) mode = 'condition' }}>
+    <summary>{numeric ? 'Number Filters' : 'Text Filters'}</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>
+      {#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}
+    </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>
+    </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>
+      {#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}
+    </div>
+  </details>
+  <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">
+    <label class="check all">
+      <input type="checkbox" checked={allShownTicked} indeterminate={!allShownTicked && !noneShownTicked} onchange={toggleAll} />
+      (Select All{search.trim() ? ' Search Results' : ''})
+    </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="count">{v.count}</span>
+      </label>
+    {/each}
+    {#if shown.length === 0}<div class="none">No matches.</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>
+  </div>
+</div>
+
+<style>
+  .sv-sheet-filter-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 260px;
+    padding: 6px;
+    font-size: 12px;
+    color: var(--sg-fg, #242424);
+  }
+  hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--sg-border, #d1d1d1); }
+  .row {
+    padding: 5px 8px;
+    font: inherit;
+    text-align: left;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  .row:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f0f0f0); }
+  .row:disabled { opacity: 0.5; cursor: default; }
+  .conditions summary { padding: 5px 8px; cursor: pointer; border-radius: 3px; }
+  .conditions summary:hover { background: var(--sg-row-hover-bg, #f0f0f0); }
+  .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; }
+  select, input[type="text"], .search {
+    height: 24px;
+    padding: 0 6px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .search { width: 100%; box-sizing: border-box; }
+  .values {
+    max-height: 180px;
+    overflow-y: auto;
+    padding: 2px 4px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .check { display: flex; align-items: center; gap: 6px; padding: 2px 4px; cursor: default; }
+  .check.all { font-weight: 600; }
+  .check .text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .check .count { color: var(--sg-muted, #616161); }
+  .none { padding: 4px; color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetFilterMenu.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ColumnFilter, type FilterValue } from './sheet/auto-filter.js';
+type Props = {
+    /** The header text, for Clear Filter From "X". */
+    header: string;
+    /** The column's values with their counts. */
+    values: ReadonlyArray<FilterValue>;
+    /** The filter on the column now, if any. */
+    filter: ColumnFilter | null;
+    /** Whether the column holds numbers, for Number Filters over Text Filters. */
+    numeric: boolean;
+    onSort: (direction: 'asc' | 'desc') => void;
+    onApply: (filter: ColumnFilter | null) => void;
+    onCancel: () => void;
+};
+declare const SvSheetFilterMenu: import("svelte").Component<Props, {}, "">;
+type SvSheetFilterMenu = ReturnType<typeof SvSheetFilterMenu>;
+export default SvSheetFilterMenu;

package/dist/SvSheetFindReplace.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  /**
+   * Excel's Find and Replace, the Replace tab: what to find, what to put in
+   * its place, whether case and the whole cell must match, and whether to
+   * look at what a cell shows or at the formula behind it. Find Next walks
+   * the sheet from the active cell and wraps; Replace changes the active
+   * cell when it matches and moves on; Replace All is one undo.
+   *
+   * The shell opens it for Ctrl+H, the ribbon's Find & Select and the
+   * `find-replace` action. It reads and writes through the find target the
+   * shell registers, so a replacement lands in the workbook and in the
+   * grid's history like a typed edit. Styled by the `.sv-sheet-dialog`
+   * rules the shell carries for all four of its dialogs.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import type { GridCommandContext } from '@svgrid/grid/shortcuts'
+  import { findAll, findNext, replaceOne, replaceAll, type FindOptions } from './sheet/find-replace'
+
+  type Props = {
+    open?: boolean
+    /** The command context to search with; null while the grid has no api. */
+    cmd: () => GridCommandContext | null
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), cmd, onClose }: Props = $props()
+
+  let findText = $state('')
+  let replaceText = $state('')
+  let matchCase = $state(false)
+  let entireCell = $state(false)
+  let lookIn = $state<'values' | 'formulas'>('values')
+  let status = $state('')
+  let findInput = $state<HTMLInputElement | null>(null)
+
+  const options = (): FindOptions => ({ matchCase, matchEntireCell: entireCell, lookIn })
+
+  // A fresh open starts with the caret in Find what, as Excel's does.
+  $effect(() => {
+    if (open) {
+      status = ''
+      queueMicrotask(() => findInput?.focus())
+    }
+  })
+
+  function land(hit: { rowIndex: number; colIndex: number } | null) {
+    const c = cmd()
+    if (!c) return
+    if (!hit) {
+      status = findText ? `We couldn't find what you were looking for.` : ''
+      return
+    }
+    c.setActiveCell(hit.rowIndex, hit.colIndex)
+    c.setSelection(hit.rowIndex, hit.colIndex)
+    c.scrollIntoView(hit.rowIndex, hit.colIndex)
+    status = ''
+  }
+
+  function next(direction: 1 | -1 = 1) {
+    const c = cmd()
+    if (!c || !findText) return
+    land(findNext(c, findText, options(), direction))
+  }
+
+  function countAll() {
+    const c = cmd()
+    if (!c || !findText) return
+    const n = findAll(c, findText, options()).length
+    status = n === 0 ? `We couldn't find what you were looking for.` : `${n} cell${n === 1 ? '' : 's'} found`
+  }
+
+  function replace() {
+    const c = cmd()
+    if (!c || !findText) return
+    replaceOne(c, findText, replaceText, options())
+  }
+
+  function all() {
+    const c = cmd()
+    if (!c || !findText) return
+    const n = replaceAll(c, findText, replaceText, options())
+    status = n === 0
+      ? `We couldn't find anything to replace.`
+      : `All done. We made ${n} replacement${n === 1 ? '' : 's'}.`
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+
+  function onKey(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      next(event.shiftKey ? -1 : 1)
+    }
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Find and Replace" size="sm">
+  <div class="sv-sheet-dialog" role="group" aria-label="Find and Replace">
+    <label class="field">
+      <span>Find what:</span>
+      <input bind:this={findInput} type="text" bind:value={findText} onkeydown={onKey} spellcheck="false" autocomplete="off" />
+    </label>
+    <label class="field">
+      <span>Replace with:</span>
+      <input type="text" bind:value={replaceText} onkeydown={onKey} spellcheck="false" autocomplete="off" />
+    </label>
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={matchCase} /> Match case</label>
+      <label class="check"><input type="checkbox" bind:checked={entireCell} /> Match entire cell contents</label>
+      <label class="field auto">
+        <span>Look in:</span>
+        <select bind:value={lookIn}>
+          <option value="values">Values</option>
+          <option value="formulas">Formulas</option>
+        </select>
+      </label>
+    </div>
+    <div class="status" role="status" aria-live="polite">{status}</div>
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={all} disabled={!findText}>Replace All</button>
+      <button type="button" class="btn" onclick={replace} disabled={!findText}>Replace</button>
+      <button type="button" class="btn" onclick={countAll} disabled={!findText}>Find All</button>
+      <button type="button" class="btn primary" onclick={() => next(1)} disabled={!findText}>Find Next</button>
+      <button type="button" class="btn" onclick={close}>Close</button>
+    </div>
+  {/snippet}
+</SvModal>

package/dist/SvSheetFindReplace.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { GridCommandContext } from '@svgrid/grid/shortcuts';
+type Props = {
+    open?: boolean;
+    /** The command context to search with; null while the grid has no api. */
+    cmd: () => GridCommandContext | null;
+    onClose?: () => void;
+};
+declare const SvSheetFindReplace: import("svelte").Component<Props, {}, "open">;
+type SvSheetFindReplace = ReturnType<typeof SvSheetFindReplace>;
+export default SvSheetFindReplace;