@svgrid/enterprise 3.0.0 → 3.0.2

package/dist/SvSheetInsertFunction.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  /**
+   * Excel's Insert Function: search or pick a category, choose a function,
+   * read its argument list and what it does, and OK starts the active cell
+   * on `=NAME(` with the caret inside the parentheses, where the formula
+   * bar's autocomplete and signature hint take over. Excel follows with a
+   * Function Arguments dialog; typing the arguments in place with the
+   * signature shown is the same information with less chrome.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { functionCatalog, FUNCTION_GROUPS, type FunctionGroup, type FunctionInfo } from './sheet/function-catalog'
+
+  type Props = {
+    open?: boolean
+    onPick: (name: string) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), onPick, onClose }: Props = $props()
+
+  const all = functionCatalog()
+  let search = $state('')
+  let group = $state<FunctionGroup | 'All'>('All')
+  let selected = $state<string>(all[0]?.name ?? '')
+  let searchInput = $state<HTMLInputElement | null>(null)
+
+  const shown = $derived.by<FunctionInfo[]>(() => {
+    const needle = search.trim().toUpperCase()
+    return all.filter((f) =>
+      (group === 'All' || f.group === group) &&
+      (needle === '' || f.name.includes(needle) || f.description.toUpperCase().includes(needle)),
+    )
+  })
+  const current = $derived(all.find((f) => f.name === selected) ?? null)
+
+  // The highlighted function follows the filter, so Enter always inserts
+  // something visible.
+  $effect(() => {
+    if (shown.length && !shown.some((f) => f.name === selected)) selected = shown[0]!.name
+  })
+  $effect(() => {
+    if (open) queueMicrotask(() => searchInput?.focus())
+  })
+
+  function ok() {
+    if (!current) return
+    onPick(current.name)
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+
+  function onListKey(event: KeyboardEvent) {
+    const index = shown.findIndex((f) => f.name === selected)
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      selected = shown[Math.min(index + 1, shown.length - 1)]?.name ?? selected
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      selected = shown[Math.max(index - 1, 0)]?.name ?? selected
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      ok()
+    }
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Insert Function" size="md">
+  <div class="sv-sheet-dialog insert" role="group" aria-label="Insert Function">
+    <label class="field">
+      <span>Search for a function:</span>
+      <input bind:this={searchInput} type="text" bind:value={search} onkeydown={onListKey} spellcheck="false" autocomplete="off" placeholder="Type a name or what you want to do" />
+    </label>
+    <label class="field">
+      <span>Or select a category:</span>
+      <select bind:value={group}>
+        <option value="All">All</option>
+        {#each FUNCTION_GROUPS as g (g)}
+          <option value={g}>{g}</option>
+        {/each}
+      </select>
+    </label>
+    <div class="label">Select a function:</div>
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <ul class="list" role="listbox" aria-label="Functions" tabindex="0" onkeydown={onListKey}>
+      {#each shown as fn (fn.name)}
+        <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+        <li
+          role="option"
+          aria-selected={fn.name === selected}
+          class:selected={fn.name === selected}
+          onclick={() => (selected = fn.name)}
+          ondblclick={ok}
+        >{fn.name}</li>
+      {:else}
+        <li class="empty">No function matches.</li>
+      {/each}
+    </ul>
+    {#if current}
+      <div class="about">
+        <div class="signature">{current.signature}</div>
+        <div class="description">{current.description || 'No description.'}</div>
+      </div>
+    {/if}
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok} disabled={!current}>OK</button>
+      <button type="button" class="btn" onclick={close}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .label { font-weight: 600; }
+  .insert :global(.field) { grid-template-columns: 160px 1fr; }
+  .list {
+    height: 160px;
+    margin: 0;
+    padding: 2px 0;
+    overflow-y: auto;
+    list-style: none;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    font-family: ui-monospace, Consolas, monospace;
+    font-size: 12px;
+  }
+  .list:focus { outline: none; border-color: var(--sg-accent, #217346); }
+  .list li {
+    padding: 2px 8px;
+    cursor: default;
+  }
+  .list li:hover { background: var(--sg-row-hover-bg, #f5f5f5); }
+  .list li.selected {
+    color: var(--sg-on-accent, #fff);
+    background: var(--sg-accent, #217346);
+  }
+  .list li.empty { color: var(--sg-muted, #616161); font-family: inherit; }
+  .about { display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
+  .signature { font-weight: 600; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
+  .description { color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetInsertFunction.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    open?: boolean;
+    onPick: (name: string) => void;
+    onClose?: () => void;
+};
+declare const SvSheetInsertFunction: import("svelte").Component<Props, {}, "open">;
+type SvSheetInsertFunction = ReturnType<typeof SvSheetInsertFunction>;
+export default SvSheetInsertFunction;

package/dist/SvSheetListPicker.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  /**
+   * The list a validated cell drops down: Excel's in-cell dropdown. The
+   * choices as the rule lists them, the current value marked, arrow keys
+   * and Enter to pick, Escape to leave the cell as it is. The shell mounts
+   * it inside the popover anchored to the cell.
+   */
+  type Props = {
+    choices: ReadonlyArray<string>
+    /** The cell's current text, marked in the list. */
+    value: string
+    onPick: (choice: string) => void
+    onCancel: () => void
+  }
+
+  let { choices, value, onPick, onCancel }: Props = $props()
+
+  let list = $state<HTMLDivElement | null>(null)
+  let index = $state(0)
+
+  $effect(() => {
+    const at = choices.findIndex((c) => c.toLowerCase() === value.trim().toLowerCase())
+    index = at >= 0 ? at : 0
+    queueMicrotask(() => list?.focus())
+  })
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown') { event.preventDefault(); index = Math.min(index + 1, choices.length - 1); scrollTo() }
+    else if (event.key === 'ArrowUp') { event.preventDefault(); index = Math.max(index - 1, 0); scrollTo() }
+    else if (event.key === 'Home') { event.preventDefault(); index = 0; scrollTo() }
+    else if (event.key === 'End') { event.preventDefault(); index = choices.length - 1; scrollTo() }
+    else if (event.key === 'Enter' || event.key === 'Tab') { event.preventDefault(); const c = choices[index]; if (c !== undefined) onPick(c) }
+    else if (event.key === 'Escape') { event.preventDefault(); onCancel() }
+  }
+
+  function scrollTo() {
+    list?.querySelector<HTMLElement>(`[data-index="${index}"]`)?.scrollIntoView({ block: 'nearest' })
+  }
+</script>
+
+<div
+  bind:this={list}
+  class="sv-sheet-list-picker"
+  role="listbox"
+  aria-label="Choices"
+  tabindex="0"
+  aria-activedescendant={choices.length ? `sv-sheet-choice-${index}` : undefined}
+  onkeydown={onKeyDown}
+>
+  {#if choices.length === 0}
+    <div class="empty">The list is empty.</div>
+  {:else}
+    {#each choices as choice, i (i)}
+      <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
+      <div
+        id={`sv-sheet-choice-${i}`}
+        class="choice"
+        class:on={i === index}
+        role="option"
+        aria-selected={i === index}
+        data-index={i}
+        onpointermove={() => (index = i)}
+        onclick={() => onPick(choice)}
+      >{choice}</div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .sv-sheet-list-picker {
+    min-width: 120px;
+    max-width: 320px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 4px 0;
+    font-size: 12px;
+    color: var(--sg-fg, #242424);
+    outline: none;
+  }
+  .choice {
+    padding: 4px 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+  }
+  .choice.on { background: var(--sg-selection-bg, rgba(16, 124, 65, 0.12)); }
+  .empty { padding: 4px 10px; color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetListPicker.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The list a validated cell drops down: Excel's in-cell dropdown. The
+ * choices as the rule lists them, the current value marked, arrow keys
+ * and Enter to pick, Escape to leave the cell as it is. The shell mounts
+ * it inside the popover anchored to the cell.
+ */
+type Props = {
+    choices: ReadonlyArray<string>;
+    /** The cell's current text, marked in the list. */
+    value: string;
+    onPick: (choice: string) => void;
+    onCancel: () => void;
+};
+declare const SvSheetListPicker: import("svelte").Component<Props, {}, "">;
+type SvSheetListPicker = ReturnType<typeof SvSheetListPicker>;
+export default SvSheetListPicker;

package/dist/SvSheetManageRules.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  /**
+   * Excel's Conditional Formatting Rules Manager: the rules of the sheet
+   * (or of the current selection), in priority order, each with what it
+   * does, a sample and where it applies; Edit Rule (for the rules the small
+   * dialog can edit), Delete Rule, Move Up, Move Down and Stop If True. The
+   * list is a working copy: OK hands it back as one change, Cancel drops
+   * it.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { describeCf, hasStyle, cfIn, type CfRule, type CfStyledRule } from './sheet/conditional-formats'
+  import { colToLetters } from './sheet/address'
+  import type { Rect } from './sheet/rects'
+
+  type Props = {
+    open?: boolean
+    rules: ReadonlyArray<CfRule>
+    /** The selection, for the Current Selection filter. */
+    selection: ReadonlyArray<Rect>
+    onApply: (rules: CfRule[]) => void
+    /** Edit Rule: the shell opens the small dialog on the rule and calls
+     *  `replace` with the result. */
+    onEdit: (rule: CfStyledRule, replace: (next: CfStyledRule) => void) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), rules, selection, onApply, onEdit, onClose }: Props = $props()
+
+  let working = $state<CfRule[]>([])
+  let scope = $state<'sheet' | 'selection'>('sheet')
+  let selected = $state<string | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    // Read the props, write the state: reading `working` back here would
+    // make the effect depend on what it just wrote and run without end.
+    const copy = rules.map((r) => ({ ...r, rects: r.rects.map((x) => [...x] as unknown as Rect) }))
+    working = copy
+    scope = 'sheet'
+    selected = copy[0]?.id ?? null
+  })
+
+  const shown = $derived(scope === 'sheet' ? working : cfIn(working, selection))
+  const current = $derived(working.find((r) => r.id === selected) ?? null)
+  const index = $derived(current ? working.indexOf(current) : -1)
+
+  const address = (rects: ReadonlyArray<Rect>) =>
+    rects.map(([r1, c1, r2, c2]) => {
+      const a = `${colToLetters(c1)}${r1 + 1}`
+      const b = `${colToLetters(c2)}${r2 + 1}`
+      return a === b ? a : `${a}:${b}`
+    }).join(', ')
+
+  const sample = (rule: CfRule): { background?: string; color?: string; text: string } => {
+    if (hasStyle(rule)) return { background: rule.style.fill, color: rule.style.color, text: 'AaBbCcYyZz' }
+    if (rule.kind === 'dataBar') return { background: `linear-gradient(90deg, ${rule.color} 60%, transparent 60%)`, text: '' }
+    if (rule.kind === 'colorScale') return { background: `linear-gradient(90deg, ${rule.colors.join(', ')})`, text: '' }
+    return { text: 'Icon Set' }
+  }
+
+  function remove() {
+    if (index < 0) return
+    working = working.filter((_, i) => i !== index)
+    selected = working[Math.min(index, working.length - 1)]?.id ?? null
+  }
+  function move(delta: -1 | 1) {
+    if (index < 0) return
+    const to = index + delta
+    if (to < 0 || to >= working.length) return
+    const next = working.slice()
+    const [rule] = next.splice(index, 1)
+    next.splice(to, 0, rule!)
+    working = next
+  }
+  function toggleStop(rule: CfRule) {
+    working = working.map((r) => (r.id === rule.id ? { ...r, stopIfTrue: !r.stopIfTrue } : r))
+  }
+  function edit() {
+    const rule = current
+    if (!rule || !hasStyle(rule)) return
+    onEdit(rule, (next) => {
+      working = working.map((r) => (r.id === rule.id ? next : r))
+    })
+  }
+  function ok() {
+    onApply(working)
+    open = false
+    onClose?.()
+  }
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Conditional Formatting Rules Manager" size="md" width={640}>
+  <div class="sv-sheet-dialog manage">
+    <label class="field auto">
+      <span>Show formatting rules for:</span>
+      <select bind:value={scope}>
+        <option value="sheet">This Worksheet</option>
+        <option value="selection">Current Selection</option>
+      </select>
+    </label>
+    <div class="toolbar">
+      <button type="button" class="btn" onclick={edit} disabled={!current || !hasStyle(current)}>Edit Rule...</button>
+      <button type="button" class="btn" onclick={remove} disabled={!current}>Delete Rule</button>
+      <button type="button" class="btn" onclick={() => move(-1)} disabled={index <= 0} aria-label="Move Up" title="Move Up">&#9650;</button>
+      <button type="button" class="btn" onclick={() => move(1)} disabled={index < 0 || index >= working.length - 1} aria-label="Move Down" title="Move Down">&#9660;</button>
+    </div>
+    <div class="list" role="grid" aria-label="Rules">
+      <div class="head" role="row">
+        <span role="columnheader">Rule (applied in order shown)</span>
+        <span role="columnheader">Format</span>
+        <span role="columnheader">Applies to</span>
+        <span role="columnheader">Stop If True</span>
+      </div>
+      {#if shown.length === 0}
+        <div class="empty">No rules {scope === 'sheet' ? 'on this sheet' : 'over the selection'}.</div>
+      {/if}
+      {#each shown as rule (rule.id)}
+        {@const s = sample(rule)}
+        <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
+        <div class="rule" class:on={rule.id === selected} role="row" aria-selected={rule.id === selected} onclick={() => (selected = rule.id)}>
+          <span role="gridcell" class="what">{describeCf(rule)}</span>
+          <span role="gridcell" class="sample" style:background={s.background ?? 'transparent'} style:color={s.color ?? 'inherit'}>{s.text}</span>
+          <span role="gridcell" class="where">{address(rule.rects)}</span>
+          <span role="gridcell" class="stop"><input type="checkbox" checked={!!rule.stopIfTrue} aria-label="Stop If True" onchange={() => toggleStop(rule)} onclick={(e) => e.stopPropagation()} /></span>
+        </div>
+      {/each}
+    </div>
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok}>OK</button>
+      <button type="button" class="btn" onclick={close}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .toolbar { display: flex; gap: 6px; }
+  .toolbar .btn {
+    height: 26px;
+    padding: 0 10px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    cursor: pointer;
+  }
+  .toolbar .btn:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f5f5f5); }
+  .toolbar .btn:disabled { opacity: 0.5; cursor: default; }
+  .list {
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    max-height: 260px;
+    overflow-y: auto;
+  }
+  .head, .rule {
+    display: grid;
+    grid-template-columns: 1fr 120px 130px 84px;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 8px;
+  }
+  .head {
+    font-weight: 600;
+    color: var(--sg-muted, #616161);
+    background: var(--sg-bg-subtle, #f3f3f3);
+    border-bottom: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .rule { cursor: default; }
+  .rule.on { background: var(--sg-selection-bg, rgba(16, 124, 65, 0.12)); }
+  .rule .sample {
+    padding: 2px 6px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    text-align: center;
+    min-height: 20px;
+  }
+  .rule .where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .rule .stop { text-align: center; }
+  .empty { padding: 10px; color: var(--sg-muted, #616161); }
+</style>

package/dist/SvSheetManageRules.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type CfRule, type CfStyledRule } from './sheet/conditional-formats.js';
+import type { Rect } from './sheet/rects.js';
+type Props = {
+    open?: boolean;
+    rules: ReadonlyArray<CfRule>;
+    /** The selection, for the Current Selection filter. */
+    selection: ReadonlyArray<Rect>;
+    onApply: (rules: CfRule[]) => void;
+    /** Edit Rule: the shell opens the small dialog on the rule and calls
+     *  `replace` with the result. */
+    onEdit: (rule: CfStyledRule, replace: (next: CfStyledRule) => void) => void;
+    onClose?: () => void;
+};
+declare const SvSheetManageRules: import("svelte").Component<Props, {}, "open">;
+type SvSheetManageRules = ReturnType<typeof SvSheetManageRules>;
+export default SvSheetManageRules;

package/dist/SvSheetNameManager.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  /**
+   * Excel's Name Manager: every defined name with what it refers to and
+   * what that is worth right now; edit one in place, delete one, add one.
+   * Writes go to `workbook.names`, and the shell is told afterwards, since
+   * no cell was typed into and the sheet would otherwise not repaint.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import type { Workbook } from './sheet/workbook'
+  import type { DefinedName } from './sheet/names'
+  import { isValidName } from './sheet/names'
+  import { parseA1 } from './sheet/address'
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    /** Called after every change, so the shell recomputes and repaints. */
+    onChange: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, onChange, onClose }: Props = $props()
+
+  let names = $state<DefinedName[]>([])
+  let newName = $state('')
+  let newRefersTo = $state('')
+  let editing = $state<string | null>(null)
+  let editRefersTo = $state('')
+  let problem = $state<string | null>(null)
+
+  function reload() {
+    names = workbook.names.list()
+  }
+
+  $effect(() => {
+    if (!open) return
+    reload()
+    newName = ''
+    newRefersTo = ''
+    editing = null
+    problem = null
+  })
+
+  /** What a name is worth right now, for the Value column. */
+  function valueOf(entry: DefinedName): string {
+    const text = entry.refersTo.replace(/^=/, '')
+    const bang = text.lastIndexOf('!')
+    const sheetName = bang >= 0 ? text.slice(0, bang).replace(/^'(.*)'$/, '$1') : workbook.active
+    const address = bang >= 0 ? text.slice(bang + 1) : text
+    const [first, last] = address.split(':')
+    const from = parseA1(first ?? '')
+    if (!from || from.row === null) return ''
+    if (last) {
+      const to = parseA1(last)
+      if (to && to.row !== null) {
+        const cells = (to.row - from.row + 1) * (to.col - from.col + 1)
+        return `${cells} cells`
+      }
+    }
+    const v = workbook.getValue(sheetName, from.row, from.col)
+    if (typeof v === 'object' && v !== null) return v.error
+    if (typeof v === 'number') return v.toLocaleString('en-US', { maximumFractionDigits: 4 })
+    return String(v)
+  }
+
+  /** Accept `Assumptions!B6`, `=Assumptions!$B$6`, `B6` or a range. */
+  function normalise(refersTo: string): string | null {
+    const text = refersTo.trim().replace(/^=/, '')
+    if (text === '') return null
+    const bang = text.lastIndexOf('!')
+    const address = bang >= 0 ? text.slice(bang + 1) : text
+    const [first, last] = address.split(':')
+    if (!parseA1(first ?? '')) return null
+    if (last !== undefined && !parseA1(last)) return null
+    const sheet = bang >= 0 ? text.slice(0, bang + 1) : `${quote(workbook.active)}!`
+    return `=${sheet}${address}`
+  }
+
+  const quote = (name: string) => (/^[A-Za-z_][A-Za-z0-9_.]*$/.test(name) ? name : `'${name.replace(/'/g, "''")}'`)
+
+  function changed() {
+    onChange()
+    reload()
+  }
+
+  function add() {
+    const name = newName.trim()
+    if (!isValidName(name)) { problem = `"${name}" is not a valid name: letters, digits and underscores, not a cell address`; return }
+    if (workbook.names.has(name)) { problem = `${name} is already defined; edit it below instead`; return }
+    const refersTo = normalise(newRefersTo)
+    if (!refersTo) { problem = `"${newRefersTo}" is not a cell or range`; return }
+    workbook.names.define(name, refersTo)
+    newName = ''
+    newRefersTo = ''
+    problem = null
+    changed()
+  }
+
+  function startEdit(entry: DefinedName) {
+    editing = entry.name
+    editRefersTo = entry.refersTo
+    problem = null
+  }
+
+  function saveEdit() {
+    if (!editing) return
+    const refersTo = normalise(editRefersTo)
+    if (!refersTo) { problem = `"${editRefersTo}" is not a cell or range`; return }
+    workbook.names.define(editing, refersTo)
+    editing = null
+    problem = null
+    changed()
+  }
+
+  function remove(name: string) {
+    workbook.names.remove(name)
+    changed()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Name Manager" size="md">
+  <div class="sv-sheet-dialog manager" role="group" aria-label="Name Manager">
+    <table class="names">
+      <thead>
+        <tr><th>Name</th><th>Refers to</th><th>Value</th><th></th></tr>
+      </thead>
+      <tbody>
+        {#each names as entry (entry.name)}
+          <tr>
+            <td class="mono">{entry.name}</td>
+            <td class="mono">
+              {#if editing === entry.name}
+                <input
+                  type="text"
+                  bind:value={editRefersTo}
+                  aria-label="Refers to"
+                  spellcheck="false"
+                  onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveEdit() } if (e.key === 'Escape') { e.stopPropagation(); editing = null } }}
+                />
+              {:else}
+                {entry.refersTo}
+              {/if}
+            </td>
+            <td class="num">{valueOf(entry)}</td>
+            <td class="actions">
+              {#if editing === entry.name}
+                <button type="button" class="link" onclick={saveEdit}>Save</button>
+                <button type="button" class="link" onclick={() => (editing = null)}>Cancel</button>
+              {:else}
+                <button type="button" class="link" onclick={() => startEdit(entry)}>Edit</button>
+                <button type="button" class="link" onclick={() => remove(entry.name)}>Delete</button>
+              {/if}
+            </td>
+          </tr>
+        {:else}
+          <tr><td colspan="4" class="empty">No defined names. Add one below.</td></tr>
+        {/each}
+      </tbody>
+    </table>
+
+    <form class="new" onsubmit={(e) => { e.preventDefault(); add() }}>
+      <label>
+        <span>Name:</span>
+        <input type="text" bind:value={newName} placeholder="TaxRate" spellcheck="false" />
+      </label>
+      <label>
+        <span>Refers to:</span>
+        <input type="text" bind:value={newRefersTo} placeholder="Inputs!B3 or B2:B13" spellcheck="false" />
+      </label>
+      <button type="submit" class="btn">New</button>
+    </form>
+    {#if problem}<p class="status problem" role="alert">{problem}</p>{/if}
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={close}>Close</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .names { width: 100%; border-collapse: collapse; }
+  .names th {
+    text-align: left;
+    font-weight: 600;
+    color: var(--sg-muted, #616161);
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .names td { padding: 4px 8px; border-bottom: 1px solid var(--sg-border, #e5e5e5); vertical-align: middle; }
+  .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
+  .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+  .actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; }
+  .empty { text-align: center; color: var(--sg-muted, #616161); }
+  .link {
+    padding: 0;
+    font: inherit;
+    color: var(--sg-accent, #217346);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .link:hover { text-decoration: underline; }
+  .new { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; align-items: end; }
+  .new label { display: flex; flex-direction: column; gap: 4px; }
+  .new .btn {
+    height: 26px;
+    padding: 0 14px;
+    font: inherit;
+    color: var(--sg-fg, #242424);
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    cursor: pointer;
+  }
+  .problem { color: var(--sg-danger, #dc2626); }
+  @media (max-width: 560px) {
+    .new { grid-template-columns: 1fr; }
+  }
+</style>