@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/SvSheetManageRules.svelte

@@ -0,0 +1,187 @@
+<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 { useSheetText } from './sheet-text'
+  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()
+  const t = useSheetText()
+
+  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: t('manageRules.iconSet') }
+  }
+
+  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={t('manageRules.title')} size="md" width={640}>
+  <div class="sv-sheet-dialog manage">
+    <label class="field auto">
+      <span>{t('manageRules.showFor')}</span>
+      <select bind:value={scope}>
+        <option value="sheet">{t('manageRules.thisSheet')}</option>
+        <option value="selection">{t('manageRules.selection')}</option>
+      </select>
+    </label>
+    <div class="toolbar">
+      <button type="button" class="btn" onclick={edit} disabled={!current || !hasStyle(current)}>{t('manageRules.editRule')}</button>
+      <button type="button" class="btn" onclick={remove} disabled={!current}>{t('manageRules.deleteRule')}</button>
+      <button type="button" class="btn" onclick={() => move(-1)} disabled={index <= 0} aria-label={t('manageRules.moveUp')} title={t('manageRules.moveUp')}>&#9650;</button>
+      <button type="button" class="btn" onclick={() => move(1)} disabled={index < 0 || index >= working.length - 1} aria-label={t('manageRules.moveDown')} title={t('manageRules.moveDown')}>&#9660;</button>
+    </div>
+    <div class="list" role="grid" aria-label={t('manageRules.rules')}>
+      <div class="head" role="row">
+        <span role="columnheader">{t('manageRules.rule')}</span>
+        <span role="columnheader">{t('manageRules.format')}</span>
+        <span role="columnheader">{t('manageRules.appliesTo')}</span>
+        <span role="columnheader">{t('manageRules.stopIfTrue')}</span>
+      </div>
+      {#if shown.length === 0}
+        <div class="empty">{t(scope === 'sheet' ? 'manageRules.noneOnSheet' : 'manageRules.noneInSelection')}</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={t('manageRules.stopIfTrue')} 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}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('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,227 @@
+<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 { useSheetText } from './sheet-text'
+  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()
+  const t = useSheetText()
+
+  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={t('nameManager.title')} size="md">
+  <div class="sv-sheet-dialog manager" role="group" aria-label={t('nameManager.title')}>
+    <table class="names">
+      <thead>
+        <tr><th>{t('nameManager.name')}</th><th>{t('nameManager.refersTo')}</th><th>{t('nameManager.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={t('nameManager.refersTo')}
+                  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}>{t('save')}</button>
+                <button type="button" class="link" onclick={() => (editing = null)}>{t('cancel')}</button>
+              {:else}
+                <button type="button" class="link" onclick={() => startEdit(entry)}>{t('nameManager.edit')}</button>
+                <button type="button" class="link" onclick={() => remove(entry.name)}>{t('delete')}</button>
+              {/if}
+            </td>
+          </tr>
+        {:else}
+          <tr><td colspan="4" class="empty">{t('nameManager.empty')}</td></tr>
+        {/each}
+      </tbody>
+    </table>
+
+    <form class="new" onsubmit={(e) => { e.preventDefault(); add() }}>
+      <label>
+        <span>{t('nameManager.nameField')}</span>
+        <input type="text" bind:value={newName} placeholder={t('nameManager.namePlaceholder')} spellcheck="false" />
+      </label>
+      <label>
+        <span>{t('nameManager.refersToField')}</span>
+        <input type="text" bind:value={newRefersTo} placeholder={t('nameManager.refersToPlaceholder')} spellcheck="false" />
+      </label>
+      <button type="submit" class="btn">{t('nameManager.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}>{t('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>

package/dist/SvSheetNameManager.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    /** Called after every change, so the shell recomputes and repaints. */
+    onChange: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetNameManager: import("svelte").Component<Props, {}, "open">;
+type SvSheetNameManager = ReturnType<typeof SvSheetNameManager>;
+export default SvSheetNameManager;

package/dist/SvSheetPageSetup.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  /**
+   * Excel's Page Setup dialog, the one page of it the sheet prints from:
+   * orientation, paper, a margins preset, the scale, the print area, the
+   * rows that repeat at the top of every page, and whether gridlines and
+   * headings print. Opens on the sheet's setup, hands the whole thing back
+   * on OK, and Print... hands it back and prints. Print Titles on the
+   * ribbon opens the same dialog, as Excel's opens Page Setup on its
+   * Sheet tab.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import { MARGIN_PRESETS, PAPER_SIZES, marginPresetOf, copyPageSetup, type PageSetup, type PaperSize, type MarginPreset } from './sheet/page-setup'
+  import { parseRangeText, rangeText } from './sheet/protection'
+
+  type Props = {
+    open?: boolean
+    /** The sheet's setup as it stands. */
+    setup: PageSetup
+    onApply: (setup: PageSetup) => void
+    /** Print...: the shell applies and prints. */
+    onPrint: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), setup, onApply, onPrint, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let orientation = $state<PageSetup['orientation']>('portrait')
+  let paper = $state<PaperSize>('A4')
+  let margins = $state<MarginPreset | 'custom'>('normal')
+  let scale = $state('100')
+  let area = $state('')
+  let titles = $state('')
+  let gridlines = $state(false)
+  let headings = $state(false)
+  let problem = $state<string | null>(null)
+  let first = $state<HTMLSelectElement | null>(null)
+
+  const PAPERS = Object.keys(PAPER_SIZES) as PaperSize[]
+
+  $effect(() => {
+    if (!open) return
+    orientation = setup.orientation
+    paper = setup.paper
+    margins = marginPresetOf(setup.margins) ?? 'custom'
+    scale = String(setup.scale)
+    area = setup.printArea ? rangeText(setup.printArea) : ''
+    titles = setup.printTitleRows ? `${setup.printTitleRows[0] + 1}:${setup.printTitleRows[1] + 1}` : ''
+    gridlines = setup.gridlines
+    headings = setup.headings
+    problem = null
+    queueMicrotask(() => first?.focus())
+  })
+
+  /** The setup as the fields say, or null with `problem` set. */
+  function read(): PageSetup | null {
+    const next = copyPageSetup(setup)
+    next.orientation = orientation
+    next.paper = paper
+    if (margins !== 'custom') next.margins = { ...MARGIN_PRESETS[margins] }
+    const pct = Number(scale)
+    next.scale = Number.isFinite(pct) && pct >= 10 && pct <= 400 ? Math.round(pct) : 100
+    if (area.trim()) {
+      const rects = parseRangeText(area)
+      if (!rects) { problem = t('pageSetup.invalidArea', { text: area }); return null }
+      next.printArea = rects
+    } else next.printArea = null
+    if (titles.trim()) {
+      const m = /^\$?(\d+)\s*:\s*\$?(\d+)$/.exec(titles.trim()) ?? /^\$?(\d+)$/.exec(titles.trim())
+      if (!m) { problem = t('pageSetup.invalidRows', { text: titles }); return null }
+      const a = Number(m[1]) - 1
+      const b = Number(m[2] ?? m[1]) - 1
+      if (a < 0 || b < a) { problem = t('pageSetup.invalidRows', { text: titles }); return null }
+      next.printTitleRows = [a, b]
+    } else next.printTitleRows = null
+    next.gridlines = gridlines
+    next.headings = headings
+    problem = null
+    return next
+  }
+
+  function ok() {
+    const next = read()
+    if (!next) return
+    open = false
+    onApply(next)
+    onClose?.()
+  }
+
+  function print() {
+    const next = read()
+    if (!next) return
+    open = false
+    onApply(next)
+    onPrint()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('pageSetup.title')} size="sm" width={420}>
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('pageSetup.orientation')}</span>
+      <select bind:this={first} bind:value={orientation}>
+        <option value="portrait">{t('pageSetup.portrait')}</option>
+        <option value="landscape">{t('pageSetup.landscape')}</option>
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('pageSetup.paper')}</span>
+      <select bind:value={paper}>
+        {#each PAPERS as p (p)}<option value={p}>{p}</option>{/each}
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('pageSetup.margins')}</span>
+      <select bind:value={margins}>
+        <option value="normal">{t('pageSetup.margins.normal')}</option>
+        <option value="narrow">{t('pageSetup.margins.narrow')}</option>
+        <option value="wide">{t('pageSetup.margins.wide')}</option>
+        {#if margins === 'custom'}<option value="custom">{t('pageSetup.margins.custom')}</option>{/if}
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('pageSetup.scale')}</span>
+      <input type="number" min="10" max="400" bind:value={scale} />
+    </label>
+    <label class="field">
+      <span>{t('pageSetup.printArea')}</span>
+      <input type="text" bind:value={area} spellcheck="false" placeholder={t('pageSetup.printAreaPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('pageSetup.titleRows')}</span>
+      <input type="text" bind:value={titles} spellcheck="false" placeholder={t('pageSetup.titleRowsPlaceholder')} />
+    </label>
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={gridlines} /> {t('pageSetup.gridlines')}</label>
+      <label class="check"><input type="checkbox" bind:checked={headings} /> {t('pageSetup.headings')}</label>
+    </div>
+    {#if problem}<p class="status problem" role="alert">{problem}</p>{/if}
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={print}>{t('pageSetup.print')}</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>
+  .spacer { flex: 1; }
+</style>

package/dist/SvSheetPageSetup.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type PageSetup } from './sheet/page-setup.js';
+type Props = {
+    open?: boolean;
+    /** The sheet's setup as it stands. */
+    setup: PageSetup;
+    onApply: (setup: PageSetup) => void;
+    /** Print...: the shell applies and prints. */
+    onPrint: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetPageSetup: import("svelte").Component<Props, {}, "open">;
+type SvSheetPageSetup = ReturnType<typeof SvSheetPageSetup>;
+export default SvSheetPageSetup;