@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/SvSheetRibbon.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { GridCommandContext } from '@svgrid/grid/shortcuts';
+import { type RibbonTab, type RibbonActionId } from './sheet/ribbon.js';
+type Props = {
+    /**
+     * How to reach the grid. A getter rather than the context itself because
+     * the context is rebuilt per call and the ribbon needs a live one at the
+     * moment a button is pressed, not the one that existed at mount.
+     */
+    cmd: () => GridCommandContext | null;
+    /** Called after any action that changed something, so the host re-renders. */
+    onChange?: () => void;
+    /** Actions the ribbon does not run itself, because they need chrome. */
+    onAction?: (action: RibbonActionId, cmd: GridCommandContext) => void;
+    /** Which of `onAction`'s toggles are currently on. The host owns that
+     *  state (there is no store here to read it from), so it reports it. */
+    activeActions?: ReadonlyArray<RibbonActionId>;
+    tabs?: ReadonlyArray<RibbonTab>;
+    /** Start on a tab other than the first. */
+    tab?: string;
+    /**
+     * Actions to leave off the ribbon: a button nobody answers is worse
+     * than no button. A group with nothing left in it goes too.
+     */
+    without?: ReadonlyArray<RibbonActionId>;
+    /**
+     * Excel's collapsed ribbon: the tabs alone. A click on a tab shows the
+     * band over the sheet until a command runs or the pointer leaves;
+     * double-clicking a tab, the chevron and Ctrl+F1 toggle it.
+     */
+    collapsed?: boolean;
+};
+declare const SvSheetRibbon: import("svelte").Component<Props, {}, "tab" | "collapsed">;
+type SvSheetRibbon = ReturnType<typeof SvSheetRibbon>;
+export default SvSheetRibbon;

package/dist/SvSheetSizeDialog.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * Excel's Column Width and Row Height boxes: one number, OK, Cancel. The
+   * shell opens it from the column letter's and the row number's menus and
+   * applies the size to every column or row the selection spans.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+
+  type Props = {
+    open?: boolean
+    title: string
+    label: string
+    value: number
+    onApply: (px: number) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), title, label, value, onApply, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let draft = $state('')
+  let input = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    draft = String(Math.round(value))
+    queueMicrotask(() => { input?.focus(); input?.select() })
+  })
+
+  const px = $derived(Number(draft))
+  const valid = $derived(Number.isFinite(px) && px >= 4 && px <= 2000)
+
+  function ok() {
+    if (!valid) return
+    onApply(Math.round(px))
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} {title} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field auto">
+      <span>{label}</span>
+      <input bind:this={input} type="number" min="4" max="2000" bind:value={draft} />
+    </label>
+  </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>

package/dist/SvSheetSizeDialog.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    open?: boolean;
+    title: string;
+    label: string;
+    value: number;
+    onApply: (px: number) => void;
+    onClose?: () => void;
+};
+declare const SvSheetSizeDialog: import("svelte").Component<Props, {}, "open">;
+type SvSheetSizeDialog = ReturnType<typeof SvSheetSizeDialog>;
+export default SvSheetSizeDialog;

package/dist/SvSheetSort.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+  /**
+   * Excel's Sort dialog: a level per key, each a column and an order, over
+   * the block the shell worked out, with "My data has headers" deciding
+   * whether the first row is named in the column lists or sorted with the
+   * rest. Add Level, Delete Level, OK; the shell does the sorting, in one
+   * undo, from the keys handed back.
+   */
+  import { useSheetText } from './sheet-text'
+  import { untrack } from 'svelte'
+  import { SvModal } from '@svgrid/grid'
+  import type { Workbook } from './sheet/workbook'
+  import type { SortKey } from './sheet/sort'
+  import { colToLetters } from './sheet/address'
+
+  type Block = { top: number; left: number; bottom: number; right: number }
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    /** The block to sort, and whether its first row looks like headers. */
+    block: Block
+    headerGuess: boolean
+    /** The column the dialog opens on: the active cell's. */
+    activeCol: number
+    /**
+     * A cell's fill or font colour, for a level that sorts on one. Without
+     * it the Sort On list offers values only, since there would be no
+     * colours to offer.
+     */
+    colourAt?: (row: number, col: number, on: 'fill' | 'color') => string | null
+    onApply: (keys: SortKey[], hasHeaders: boolean) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, block, headerGuess, activeCol, colourAt, onApply, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let levels = $state<SortKey[]>([])
+  let hasHeaders = $state(true)
+
+  const raw = (r: number, c: number) => workbook.getRaw(workbook.active, r, c)
+
+  /** The column list: the header text when the block has headers, else the letter. */
+  const columns = $derived.by(() =>
+    Array.from({ length: block.right - block.left + 1 }, (_, i) => {
+      const col = block.left + i
+      const letter = t('sort.columnLetter', { letter: colToLetters(col) })
+      return { col, label: hasHeaders ? raw(block.top, col) || letter : letter }
+    }),
+  )
+
+  $effect(() => {
+    if (!open) return
+    untrack(() => {
+      hasHeaders = headerGuess
+      levels = [{ col: Math.min(Math.max(activeCol, block.left), block.right), direction: 'asc', on: 'value' }]
+    })
+  })
+
+  /**
+   * The colours a level's column carries, each once. Excel offers exactly
+   * these, because a colour that is nowhere in the column would sort
+   * nothing.
+   */
+  function coloursIn(col: number, on: 'fill' | 'color'): string[] {
+    if (!colourAt) return []
+    const seen: string[] = []
+    for (let r = block.top + (hasHeaders ? 1 : 0); r <= block.bottom; r += 1) {
+      const colour = colourAt(r, col, on)?.trim().toLowerCase()
+      if (colour && !seen.includes(colour)) seen.push(colour)
+    }
+    return seen
+  }
+
+  /** Keep a level's colour one the column actually carries. */
+  function onSortOnChange(level: SortKey) {
+    if (level.on === 'value') { level.colour = undefined; return }
+    const colours = coloursIn(level.col, level.on === 'color' ? 'color' : 'fill')
+    if (!level.colour || !colours.includes(level.colour)) level.colour = colours[0]
+  }
+
+  function addLevel() {
+    // The next column not yet used, or the first one when all are.
+    const used = new Set(levels.map((l) => l.col))
+    const free = columns.find((c) => !used.has(c.col)) ?? columns[0]
+    if (!free) return
+    levels = [...levels, { col: free.col, direction: 'asc', on: 'value' }]
+  }
+
+  function deleteLevel(index: number) {
+    if (levels.length <= 1) return
+    levels = levels.filter((_, i) => i !== index)
+  }
+
+  function ok() {
+    if (!levels.length) return
+    onApply(levels.map((l) => ({ ...l })), hasHeaders)
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('sort.title')} size="sm" width={460}>
+  <form class="sv-sheet-dialog sort" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <div class="toolbar">
+      <button type="button" class="btn" onclick={addLevel} disabled={levels.length >= columns.length}>{t('sort.addLevel')}</button>
+      <button type="button" class="btn" onclick={() => deleteLevel(levels.length - 1)} disabled={levels.length <= 1}>{t('sort.deleteLevel')}</button>
+      <span class="spacer"></span>
+      <label class="check"><input type="checkbox" bind:checked={hasHeaders} /> {t('sort.hasHeaders')}</label>
+    </div>
+    <div class="levels" role="list" aria-label={t('sort.levels')}>
+      {#each levels as level, index (index)}
+        {@const by = t(index === 0 ? 'sort.sortBy' : 'sort.thenBy')}
+        <div class="level" role="listitem">
+          <span class="by">{by}</span>
+          <select aria-label={t('sort.column', { by })} bind:value={level.col}>
+            {#each columns as c (c.col)}<option value={c.col}>{c.label}</option>{/each}
+          </select>
+          <select
+            aria-label={t('sort.on', { by })}
+            bind:value={level.on}
+            onchange={() => onSortOnChange(level)}
+            disabled={!colourAt}
+          >
+            <option value="value">{t('sort.onValue')}</option>
+            <option value="fill">{t('sort.onFill')}</option>
+            <option value="color">{t('sort.onFont')}</option>
+          </select>
+          <select aria-label={t('sort.order', { by })} bind:value={level.direction}>
+            <option value="asc">{level.on === 'value' ? t('sort.asc') : t('sort.onTop')}</option>
+            <option value="desc">{level.on === 'value' ? t('sort.desc') : t('sort.onBottom')}</option>
+          </select>
+          {#if level.on !== 'value'}
+            {@const colours = coloursIn(level.col, level.on === 'color' ? 'color' : 'fill')}
+            <span class="colour-row">
+              <span class="by">{t('sort.colour')}</span>
+              {#if colours.length}
+                <select aria-label={t('sort.colour')} bind:value={level.colour}>
+                  {#each colours as colour (colour)}<option value={colour}>{colour}</option>{/each}
+                </select>
+                <span class="swatch" style:background={level.colour} aria-hidden="true"></span>
+              {:else}
+                <span class="none">{t('sort.noColours')}</span>
+              {/if}
+            </span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+    <p class="hint">
+      {t('sort.hint', { range: `${colToLetters(block.left)}${block.top + 1}:${colToLetters(block.right)}${block.bottom + 1}` })}
+    </p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok} disabled={!levels.length}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+  .toolbar .spacer { flex: 1; }
+  .levels {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 6px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+    background: var(--sg-bg, #fff);
+  }
+  .level {
+    display: grid;
+    grid-template-columns: 64px 1fr 104px 112px;
+    align-items: center;
+    gap: 8px;
+  }
+  /* The colour a colour level sorts on, under the level it belongs to. */
+  .colour-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 64px 1fr auto;
+    align-items: center;
+    gap: 8px;
+  }
+  .colour-row .swatch {
+    width: 18px;
+    height: 18px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  .colour-row .none { color: var(--sg-muted, #616161); font-size: 12px; }
+  .level .by { color: var(--sg-muted, #616161); }
+  .level select {
+    min-width: 0;
+    font: inherit;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 2px;
+    padding: 2px 4px;
+  }
+  .check { display: inline-flex; align-items: center; gap: 6px; }
+  .hint { margin: 8px 0 0; color: var(--sg-muted, #616161); font-size: 12px; }
+</style>

package/dist/SvSheetSort.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Workbook } from './sheet/workbook.js';
+import type { SortKey } from './sheet/sort.js';
+type Block = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    /** The block to sort, and whether its first row looks like headers. */
+    block: Block;
+    headerGuess: boolean;
+    /** The column the dialog opens on: the active cell's. */
+    activeCol: number;
+    /**
+     * A cell's fill or font colour, for a level that sorts on one. Without
+     * it the Sort On list offers values only, since there would be no
+     * colours to offer.
+     */
+    colourAt?: (row: number, col: number, on: 'fill' | 'color') => string | null;
+    onApply: (keys: SortKey[], hasHeaders: boolean) => void;
+    onClose?: () => void;
+};
+declare const SvSheetSort: import("svelte").Component<Props, {}, "open">;
+type SvSheetSort = ReturnType<typeof SvSheetSort>;
+export default SvSheetSort;

package/dist/SvSheetSparklines.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  /**
+   * Excel's Create Sparklines dialog, and its Sparkline Design tab folded
+   * into the same box: the kind, the two ranges, the colours, one scale for
+   * the group or one each. Opened by Insert > Sparklines, and again by a
+   * double-click on a cell that holds one, which is how a group is edited.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { parseRangeText, rangeText } from './sheet/protection'
+  import { SPARKLINE_TYPES, type SheetSparklineType, type SparklineGroup } from './sheet/sparklines'
+  import type { Rect } from './sheet/format-store'
+
+  type Props = {
+    open?: boolean
+    /** The group as it stands, new or being edited. */
+    group: SparklineGroup
+    /** True when the group is already on the sheet, which offers Delete. */
+    existing?: boolean
+    onApply: (group: SparklineGroup) => void
+    onDelete?: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), group, existing = false, onApply, onDelete, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let type = $state<SheetSparklineType>('line')
+  let data = $state('')
+  let location = $state('')
+  let colour = $state('')
+  let negative = $state('')
+  let sameScale = $state(false)
+  let markers = $state(false)
+  let error = $state('')
+  let first = $state<HTMLSelectElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    type = group.type
+    data = rangeText([group.data])
+    location = rangeText([group.location])
+    colour = group.color ?? ''
+    negative = group.negativeColor ?? ''
+    sameScale = Boolean(group.sameScale)
+    markers = Boolean(group.markers)
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  /** One rectangle, or null: these two fields take a range, not a list. */
+  function oneRect(text: string): Rect | null {
+    const rects = parseRangeText(text)
+    return rects && rects.length === 1 ? rects[0]! : null
+  }
+
+  /** The location has to hold one cell per line of the data. */
+  function shapesAgree(d: Rect, l: Rect): boolean {
+    const lines = l[2] - l[0] >= l[3] - l[1] ? d[2] - d[0] : d[3] - d[1]
+    const cells = Math.max(l[2] - l[0], l[3] - l[1])
+    return lines === cells
+  }
+
+  function ok() {
+    const d = oneRect(data)
+    const l = oneRect(location)
+    if (!d || !l) { error = t('sparklines.badRange'); return }
+    if (!shapesAgree(d, l)) { error = t('sparklines.mismatch'); return }
+    const next: SparklineGroup = { ...group, type, data: d, location: l, sameScale, markers }
+    if (colour.trim()) next.color = colour.trim()
+    else delete next.color
+    if (negative.trim()) next.negativeColor = negative.trim()
+    else delete next.negativeColor
+    open = false
+    onApply(next)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('sparklines.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('sparklines.type')}</span>
+      <select bind:this={first} bind:value={type}>
+        {#each SPARKLINE_TYPES as kind (kind)}<option value={kind}>{t(`sparklines.type.${kind}`)}</option>{/each}
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('sparklines.data')}</span>
+      <input type="text" bind:value={data} spellcheck="false" placeholder={t('sparklines.dataPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('sparklines.location')}</span>
+      <input type="text" bind:value={location} spellcheck="false" placeholder={t('sparklines.locationPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('sparklines.colour')}</span>
+      <input type="color" value={colour || '#107c41'} oninput={(e) => (colour = e.currentTarget.value)} />
+    </label>
+    {#if type !== 'line'}
+      <label class="field">
+        <span>{t('sparklines.negativeColour')}</span>
+        <input type="color" value={negative || '#c42b1c'} oninput={(e) => (negative = e.currentTarget.value)} />
+      </label>
+    {/if}
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={sameScale} /> {t('sparklines.sameScale')}</label>
+      {#if type === 'line'}
+        <label class="check"><input type="checkbox" bind:checked={markers} /> {t('sparklines.markers')}</label>
+      {/if}
+    </div>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('sparklines.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onDelete}
+        <button type="button" class="btn" onclick={() => { open = false; onDelete?.() }}>{t('delete')}</button>
+      {/if}
+      <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>
+  .spacer { flex: 1; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetSparklines.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SparklineGroup } from './sheet/sparklines.js';
+type Props = {
+    open?: boolean;
+    /** The group as it stands, new or being edited. */
+    group: SparklineGroup;
+    /** True when the group is already on the sheet, which offers Delete. */
+    existing?: boolean;
+    onApply: (group: SparklineGroup) => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetSparklines: import("svelte").Component<Props, {}, "open">;
+type SvSheetSparklines = ReturnType<typeof SvSheetSparklines>;
+export default SvSheetSparklines;

package/dist/SvSheetTable.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  /**
+   * Excel's Create Table dialog: the cells, whether the first row is the
+   * header, the name the columns will be read by, and a totals row.
+   * Opened by Insert > Table or Ctrl+T, and again on a cell inside one,
+   * which is how a table is renamed or resized.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { parseRangeText, rangeText } from './sheet/protection'
+  import { isValidTableName } from './sheet/tables'
+  import {
+    TABLE_STYLES, DEFAULT_TABLE_STYLE, NO_TABLE_STYLE,
+    tableStyleColours, tableStyleLabel,
+  } from './sheet/table-styles'
+  import type { Rect } from './sheet/format-store'
+
+  type Props = {
+    open?: boolean
+    /** The block the table covers, header row included. */
+    range: Rect
+    name: string
+    headers?: boolean
+    totals?: boolean
+    existing?: boolean
+    /** The look, by Excel's name for it, or `'None'`. */
+    style?: string
+    onApply: (table: { range: Rect; name: string; headers: boolean; totals: boolean; style: string }) => void
+    onRemove?: () => void
+    onClose?: () => void
+  }
+
+  let {
+    open = $bindable(false), range, name, headers = true, totals = false, existing = false,
+    style = DEFAULT_TABLE_STYLE, onApply, onRemove, onClose,
+  }: Props = $props()
+  const t = useSheetText()
+
+  let where = $state('')
+  let label = $state('')
+  let hasHeaders = $state(true)
+  let hasTotals = $state(false)
+  let look = $state(DEFAULT_TABLE_STYLE)
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    where = rangeText([range])
+    label = name
+    hasHeaders = headers
+    hasTotals = totals
+    look = style
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const rects = parseRangeText(where)
+    const block = rects && rects.length === 1 ? rects[0]! : null
+    if (!block) { error = t('table.badRange'); return }
+    if (!isValidTableName(label.trim())) { error = t('table.badName'); return }
+    open = false
+    onApply({ range: block as Rect, name: label.trim(), headers: hasHeaders, totals: hasTotals, style: look })
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<!-- Opened from inside a table it edits that table, so it does not say
+     Create: the name, the range and the style are the ones it has. -->
+<SvModal bind:open onClose={onClose} title={t(existing ? 'table.editTitle' : 'table.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('table.range')}</span>
+      <input type="text" bind:this={first} bind:value={where} spellcheck="false" placeholder={t('table.rangePlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('table.name')}</span>
+      <input type="text" bind:value={label} spellcheck="false" placeholder={t('table.namePlaceholder')} />
+    </label>
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={hasHeaders} /> {t('table.headers')}</label>
+      <label class="check"><input type="checkbox" bind:checked={hasTotals} /> {t('table.totals')}</label>
+    </div>
+    <fieldset class="styles">
+      <legend>{t('table.style')}</legend>
+      <div class="gallery" role="radiogroup" aria-label={t('table.style')}>
+        <button
+          type="button"
+          class="swatch none"
+          class:chosen={look === NO_TABLE_STYLE}
+          role="radio"
+          aria-checked={look === NO_TABLE_STYLE}
+          title={t('table.styleNone')}
+          aria-label={t('table.styleNone')}
+          onclick={() => { look = NO_TABLE_STYLE }}
+        ><span class="row head"></span><span class="row"></span><span class="row"></span></button>
+        {#each TABLE_STYLES as preset (preset.id)}
+          {@const colours = tableStyleColours(preset)}
+          <button
+            type="button"
+            class="swatch"
+            class:chosen={look === preset.id}
+            role="radio"
+            aria-checked={look === preset.id}
+            title={tableStyleLabel(preset)}
+            aria-label={tableStyleLabel(preset)}
+            onclick={() => { look = preset.id }}
+          >
+            <span class="row head" style={`background:${colours?.header}`}></span>
+            <span class="row" style={`background:${colours?.band}`}></span>
+            <span class="row"></span>
+          </button>
+        {/each}
+      </div>
+    </fieldset>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('table.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onRemove}
+        <button type="button" class="btn" onclick={() => { open = false; onRemove?.() }}>{t('delete')}</button>
+      {/if}
+      <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>
+  .spacer { flex: 1; }
+  /* The gallery: each swatch is a header band over two body rows, which is
+     the smallest drawing that still says what the style will look like. */
+  .styles { margin: 8px 0 0; padding: 0; border: 0; }
+  .styles legend { padding: 0 0 4px; color: var(--sg-muted, #64748b); font-size: 12px; }
+  .gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
+  .swatch {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 2px;
+    border: 1px solid var(--sg-border, #d4d4d8);
+    border-radius: 3px;
+    background: var(--sg-surface, #fff);
+    cursor: pointer;
+  }
+  .swatch .row { display: block; height: 5px; background: var(--sg-surface-2, #f1f5f9); }
+  .swatch .row.head { height: 7px; }
+  .swatch.none .row.head { background: var(--sg-border, #d4d4d8); }
+  .swatch.chosen { outline: 2px solid var(--sg-accent, #107c41); outline-offset: 1px; }
+  .swatch:focus-visible { outline: 2px solid var(--sg-accent, #107c41); outline-offset: 1px; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>