@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/SvSheetConditionalFormat.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  /**
+   * Excel's small conditional-formatting dialogs, one component: Greater
+   * Than..., Less Than..., Between..., Equal To..., Text that Contains...,
+   * Duplicate Values..., Top 10 Items..., Bottom 10 Items..., Above Average
+   * and Below Average. Each is a sentence with its inputs and the "with"
+   * picker of Excel's six styles. It opens empty for a new rule from the
+   * ribbon, or on a rule from Manage Rules > Edit, and hands back the rule's
+   * body for the shell to place.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import { CF_PRESET_STYLES, type CfPreset, type CfBody, type CfStyledRule } from './sheet/conditional-formats'
+
+  type Props = {
+    open?: boolean
+    preset: CfPreset
+    /** The rule being edited, for Manage Rules > Edit. */
+    rule?: CfStyledRule | null
+    /** The selection as A1, for the heading. */
+    address: string
+    onApply: (body: CfBody) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), preset, rule = null, address, onApply, onClose }: Props = $props()
+  const t = useSheetText()
+
+
+  let value1 = $state('')
+  let value2 = $state('')
+  let rank = $state('10')
+  let percent = $state(false)
+  let unique = $state(false)
+  let styleId = $state(CF_PRESET_STYLES[0]!.id)
+  let first = $state<HTMLInputElement | HTMLSelectElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    value1 = ''
+    value2 = ''
+    rank = '10'
+    percent = false
+    unique = false
+    styleId = CF_PRESET_STYLES[0]!.id
+    const r = rule
+    if (r) {
+      if (r.kind === 'cellIs') { value1 = r.value1; value2 = r.value2 ?? '' }
+      else if (r.kind === 'text') value1 = r.value
+      else if (r.kind === 'duplicates') unique = !!r.unique
+      else if (r.kind === 'topBottom') { rank = String(r.rank); percent = !!r.percent }
+      else if (r.kind === 'formula') value1 = r.formula
+      const match = CF_PRESET_STYLES.find((p) => JSON.stringify(p.style) === JSON.stringify(r.style))
+      if (match) styleId = match.id
+    }
+    queueMicrotask(() => first?.focus())
+  })
+
+  const needsValue = $derived(preset === 'greater' || preset === 'less' || preset === 'between' || preset === 'equal' || preset === 'text' || preset === 'formula')
+  const valid = $derived(
+    (!needsValue || value1.trim() !== '')
+      && (preset !== 'between' || value2.trim() !== '')
+      && ((preset !== 'top10' && preset !== 'bottom10') || (Number.isInteger(Number(rank)) && Number(rank) > 0)),
+  )
+
+  function body(): CfBody {
+    const style = CF_PRESET_STYLES.find((p) => p.id === styleId)?.style ?? CF_PRESET_STYLES[0]!.style
+    switch (preset) {
+      case 'greater': return { kind: 'cellIs', operator: 'greater', value1: value1.trim(), style }
+      case 'less': return { kind: 'cellIs', operator: 'less', value1: value1.trim(), style }
+      case 'between': return { kind: 'cellIs', operator: 'between', value1: value1.trim(), value2: value2.trim(), style }
+      case 'equal': return { kind: 'cellIs', operator: 'equal', value1: value1.trim(), style }
+      case 'text': return { kind: 'text', match: 'contains', value: value1.trim(), style }
+      case 'duplicates': return { kind: 'duplicates', unique, style }
+      case 'top10': return { kind: 'topBottom', top: true, rank: Number(rank), percent, style }
+      case 'bottom10': return { kind: 'topBottom', top: false, rank: Number(rank), percent, style }
+      case 'aboveAverage': return { kind: 'average', above: true, style }
+      case 'belowAverage': return { kind: 'average', above: false, style }
+      case 'formula': {
+        const text = value1.trim()
+        return { kind: 'formula', formula: text.startsWith('=') ? text : `=${text}`, style }
+      }
+    }
+  }
+
+  function ok() {
+    if (!valid) return
+    onApply(body())
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+
+  const sample = $derived(CF_PRESET_STYLES.find((p) => p.id === styleId)?.style ?? {})
+</script>
+
+<SvModal bind:open onClose={onClose} title={t(`cf.title.${preset}`)} size="sm" width={440}>
+  <form class="sv-sheet-dialog cf" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <div class="where">{address}</div>
+    <div class="lead">{t(`cf.lead.${preset}`)}</div>
+    <div class="row">
+      {#if preset === 'between'}
+        <input bind:this={first} type="text" bind:value={value1} aria-label={t('cf.lowerValue')} spellcheck="false" />
+        <span>{t('cf.and')}</span>
+        <input type="text" bind:value={value2} aria-label={t('cf.upperValue')} spellcheck="false" />
+      {:else if needsValue}
+        <input bind:this={first} type="text" bind:value={value1} aria-label={t(preset === 'formula' ? 'cf.formula' : 'cf.value')} spellcheck="false" placeholder={preset === 'text' ? t('cf.textPlaceholder') : preset === 'formula' ? '=$B2>100' : t('cf.valuePlaceholder')} />
+      {:else if preset === 'duplicates'}
+        <select bind:this={first} bind:value={unique} aria-label={t('cf.duplicateOrUnique')}>
+          <option value={false}>{t('cf.duplicate')}</option>
+          <option value={true}>{t('cf.unique')}</option>
+        </select>
+        <span>{t('cf.values')}</span>
+      {:else if preset === 'top10' || preset === 'bottom10'}
+        <input bind:this={first} type="number" min="1" bind:value={rank} aria-label={t('cf.howMany')} />
+        <label class="check"><input type="checkbox" bind:checked={percent} /> {t('cf.percentOfRange')}</label>
+      {/if}
+      <span>{t('cf.with')}</span>
+      <select bind:value={styleId} aria-label={t('cf.formatStyle')}>
+        {#each CF_PRESET_STYLES as p (p.id)}<option value={p.id}>{t(`cf.style.${p.id}`)}</option>{/each}
+      </select>
+    </div>
+    {#if preset === 'formula'}
+      <p class="hint">{t('cf.formulaHint')}</p>
+    {/if}
+    <div class="sample" style:background={sample.fill ?? 'transparent'} style:color={sample.color ?? 'inherit'}>AaBbCcYyZz</div>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .where { color: var(--sg-muted, #616161); }
+  .lead { font-weight: 600; }
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+  .row input[type="text"] { flex: 1 1 110px; min-width: 90px; }
+  .row input[type="number"] { width: 64px; }
+  .row select { max-width: 240px; }
+  .sample {
+    width: 120px;
+    padding: 4px 10px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    text-align: center;
+  }
+</style>

package/dist/SvSheetConditionalFormat.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type CfPreset, type CfBody, type CfStyledRule } from './sheet/conditional-formats.js';
+type Props = {
+    open?: boolean;
+    preset: CfPreset;
+    /** The rule being edited, for Manage Rules > Edit. */
+    rule?: CfStyledRule | null;
+    /** The selection as A1, for the heading. */
+    address: string;
+    onApply: (body: CfBody) => void;
+    onClose?: () => void;
+};
+declare const SvSheetConditionalFormat: import("svelte").Component<Props, {}, "open">;
+type SvSheetConditionalFormat = ReturnType<typeof SvSheetConditionalFormat>;
+export default SvSheetConditionalFormat;

package/dist/SvSheetDataValidation.svelte

@@ -0,0 +1,273 @@
+<script lang="ts">
+  /**
+   * Excel's Data Validation dialog, its three tabs: Settings (Allow, Data,
+   * the bounds or the source, Ignore blank, In-cell dropdown), Input
+   * Message (shown under the cell while it is selected) 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 { useSheetText } from './sheet-text'
+  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()
+  const t = useSheetText()
+
+  type Tab = 'settings' | 'input' | 'alert'
+  let tab = $state<Tab>('settings')
+
+  const ALLOWS: ReadonlyArray<{ id: ValidationAllow; label: string }> = [
+    { id: 'any', label: 'validation.allow.any' },
+    { id: 'whole', label: 'validation.allow.whole' },
+    { id: 'decimal', label: 'validation.allow.decimal' },
+    { id: 'list', label: 'validation.allow.list' },
+    { id: 'date', label: 'validation.allow.date' },
+    { id: 'textLength', label: 'validation.allow.textLength' },
+    { id: 'custom', label: 'validation.allow.custom' },
+  ]
+  const OPERATORS = Object.keys(OPERATOR_LABELS) as ValidationOperator[]
+
+  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 showInput = $state(true)
+  let inputTitle = $state('')
+  let inputMessage = $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 ?? ''
+    showInput = rule ? rule.input !== undefined : true
+    inputTitle = rule?.input?.title ?? ''
+    inputMessage = rule?.input?.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' ? t('validation.source')
+      : allow === 'custom' ? t('validation.formula')
+      : twoBounds ? t(allow === 'date' ? 'validation.startDate' : 'validation.minimum')
+      : t(allow === 'date' ? 'validation.date' : allow === 'textLength' ? 'validation.length' : 'validation.value'),
+  )
+  const secondLabel = $derived(t(allow === 'date' ? 'validation.endDate' : 'validation.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 },
+    }
+    // An input message exists when the box is on and there is text to show.
+    if (showInput && (inputTitle.trim() || inputMessage.trim())) {
+      spec.input = { title: inputTitle.trim() || undefined, message: inputMessage.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={t('validation.title')} 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={t('validation.tabs')}>
+      {#each ['settings', 'input', 'alert'] as id (id)}
+        <button type="button" role="tab" class="tab" class:on={tab === id} aria-selected={tab === id} onclick={() => (tab = id as Tab)}>{t(`validation.tab.${id}`)}</button>
+      {/each}
+    </div>
+    <div class="panel" role="tabpanel">
+      {#if tab === 'settings'}
+        <div class="lead">{t('validation.criteria')}</div>
+        <label class="field">
+          <span>{t('validation.allow')}</span>
+          <select bind:this={first} bind:value={allow}>
+            {#each ALLOWS as a (a.id)}<option value={a.id}>{t(a.label)}</option>{/each}
+          </select>
+        </label>
+        {#if bounded}
+          <label class="field">
+            <span>{t('validation.data')}</span>
+            <select bind:value={operator}>
+              {#each OPERATORS as id (id)}<option value={id}>{t(`validation.operator.${id}`)}</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' ? t('validation.listPlaceholder') : 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} /> {t('validation.ignoreBlank')}</label>
+          {#if allow === 'list'}
+            <label class="check"><input type="checkbox" bind:checked={inCellDropdown} /> {t('validation.inCellDropdown')}</label>
+          {/if}
+        </div>
+        {#if allow === 'custom'}
+          <p class="hint">{t('validation.customHint')}</p>
+        {:else if allow === 'list'}
+          <p class="hint">{t('validation.listHint')}</p>
+        {:else if allow !== 'any'}
+          <p class="hint">{t('validation.boundHint')}</p>
+        {/if}
+      {:else if tab === 'input'}
+        <label class="check"><input type="checkbox" bind:checked={showInput} /> {t('validation.showInput')}</label>
+        <div class="lead">{t('validation.inputLead')}</div>
+        <label class="field">
+          <span>{t('validation.inputTitle')}</span>
+          <input type="text" bind:value={inputTitle} disabled={!showInput} />
+        </label>
+        <label class="field message">
+          <span>{t('validation.inputMessage')}</span>
+          <textarea rows="4" bind:value={inputMessage} disabled={!showInput}></textarea>
+        </label>
+      {:else}
+        <div class="lead">{t('validation.alertLead')}</div>
+        <label class="field">
+          <span>{t('validation.style')}</span>
+          <select bind:value={style}>
+            <option value="stop">{t('validation.stop')}</option>
+            <option value="warning">{t('validation.warning')}</option>
+          </select>
+        </label>
+        <label class="field">
+          <span>{t('validation.errorTitle')}</span>
+          <input type="text" bind:value={title} />
+        </label>
+        <label class="field message">
+          <span>{t('validation.errorMessage')}</span>
+          <textarea rows="4" bind:value={message}></textarea>
+        </label>
+        <p class="hint">{t('validation.alertHint')}</p>
+      {/if}
+    </div>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={clearAll}>{t('validation.clearAll')}</button>
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('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/SvSheetEditRanges.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  /**
+   * Excel's Allow Users to Edit Ranges: the blocks that take an edit while
+   * the sheet is protected, locked or not, each with a title. New adds
+   * one from a title and an A1 text (`B2:B10`, or several areas with
+   * commas), Modify edits one in place, Delete removes it; OK hands the
+   * list back as one change, and Protect Sheet... closes this and opens
+   * that dialog, as Excel's button does. No password per range.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import { newEditRangeId, parseRangeText, rangeText, type EditRange } from './sheet/protection'
+
+  type Props = {
+    open?: boolean
+    /** The sheet's ranges as they stand. */
+    ranges: ReadonlyArray<EditRange>
+    /** The selection as A1 text, what a new range's cells open on. */
+    selection: string
+    onApply: (ranges: EditRange[]) => void
+    /** The Protect Sheet... button: the shell opens that dialog. */
+    onProtect: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), ranges, selection, onApply, onProtect, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let working = $state<EditRange[]>([])
+  let newTitle = $state('')
+  let newRefers = $state('')
+  let editing = $state<string | null>(null)
+  let editTitle = $state('')
+  let editRefers = $state('')
+  let problem = $state<string | null>(null)
+  let titleBox = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    const copy = ranges.map((r) => ({ ...r, rects: r.rects.map(([r1, c1, r2, c2]) => [r1, c1, r2, c2] as const) }))
+    working = copy
+    newTitle = `Range${copy.length + 1}`
+    newRefers = selection
+    editing = null
+    problem = null
+    queueMicrotask(() => titleBox?.focus())
+  })
+
+  function add() {
+    const rects = parseRangeText(newRefers)
+    if (!rects) { problem = t('editRanges.invalidRef', { text: newRefers }); return }
+    const title = newTitle.trim() || `Range${working.length + 1}`
+    working = [...working, { id: newEditRangeId(), title, rects }]
+    newTitle = `Range${working.length + 1}`
+    newRefers = ''
+    problem = null
+  }
+
+  function startEdit(range: EditRange) {
+    editing = range.id
+    editTitle = range.title
+    editRefers = rangeText(range.rects)
+    problem = null
+  }
+
+  function saveEdit() {
+    const rects = parseRangeText(editRefers)
+    if (!rects) { problem = t('editRanges.invalidRef', { text: editRefers }); return }
+    working = working.map((r) => (r.id === editing ? { ...r, title: editTitle.trim() || r.title, rects } : r))
+    editing = null
+    problem = null
+  }
+
+  function remove(id: string) {
+    working = working.filter((r) => r.id !== id)
+    if (editing === id) editing = null
+  }
+
+  function ok() {
+    open = false
+    onApply(working)
+    onClose?.()
+  }
+
+  function protect() {
+    open = false
+    onApply(working)
+    onProtect()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('editRanges.title')} size="md">
+  <div class="sv-sheet-dialog ranges" role="group" aria-label={t('editRanges.title')}>
+    <div class="lead">{t('editRanges.lead')}</div>
+    <table class="list">
+      <thead>
+        <tr><th>{t('editRanges.name')}</th><th>{t('editRanges.refersTo')}</th><th></th></tr>
+      </thead>
+      <tbody>
+        {#each working as range (range.id)}
+          <tr>
+            {#if editing === range.id}
+              <td><input type="text" bind:value={editTitle} aria-label={t('editRanges.name')} spellcheck="false" /></td>
+              <td class="mono">
+                <input
+                  type="text"
+                  bind:value={editRefers}
+                  aria-label={t('editRanges.refersTo')}
+                  spellcheck="false"
+                  onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveEdit() } if (e.key === 'Escape') { e.stopPropagation(); editing = null } }}
+                />
+              </td>
+              <td class="actions">
+                <button type="button" class="link" onclick={saveEdit}>{t('save')}</button>
+                <button type="button" class="link" onclick={() => (editing = null)}>{t('cancel')}</button>
+              </td>
+            {:else}
+              <td>{range.title}</td>
+              <td class="mono">{rangeText(range.rects)}</td>
+              <td class="actions">
+                <button type="button" class="link" onclick={() => startEdit(range)}>{t('editRanges.modify')}</button>
+                <button type="button" class="link" onclick={() => remove(range.id)}>{t('delete')}</button>
+              </td>
+            {/if}
+          </tr>
+        {:else}
+          <tr><td colspan="3" class="empty">{t('editRanges.empty')}</td></tr>
+        {/each}
+      </tbody>
+    </table>
+    <form class="new" onsubmit={(e) => { e.preventDefault(); add() }}>
+      <label>
+        <span>{t('editRanges.titleField')}</span>
+        <input bind:this={titleBox} type="text" bind:value={newTitle} placeholder={t('editRanges.titlePlaceholder')} spellcheck="false" />
+      </label>
+      <label>
+        <span>{t('editRanges.refersField')}</span>
+        <input type="text" bind:value={newRefers} placeholder={t('editRanges.refersPlaceholder')} spellcheck="false" />
+      </label>
+      <button type="submit" class="btn">{t('editRanges.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={protect}>{t('editRanges.protectSheet')}</button>
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .ranges { min-width: 460px; }
+  .list {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+  .list th {
+    padding: 4px 8px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--sg-muted, #616161);
+    border-bottom: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .list td {
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sg-border, #e5e5e5);
+    vertical-align: middle;
+  }
+  .list td input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 3px 6px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .empty { color: var(--sg-muted, #616161); text-align: center; }
+  .actions { white-space: nowrap; text-align: right; }
+  .link {
+    padding: 0 4px;
+    font: inherit;
+    color: var(--sg-accent, #107c41);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .link:hover { text-decoration: underline; }
+  .new {
+    display: grid;
+    grid-template-columns: 1fr 2fr auto;
+    gap: 8px;
+    align-items: end;
+    margin-top: 6px;
+  }
+  .new label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
+  .new input {
+    padding: 4px 8px;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .spacer { flex: 1; }
+</style>