@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvSheetIteration.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * Excel's File > Options > Formulas > Calculation options, raised to the
+   * Formulas tab because it is the one setting there that changes what a
+   * formula is worth: with iteration on a circular reference settles on its
+   * fixed point instead of showing #CYCLE!.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import type { IterationSettings } from './sheet/workbook'
+
+  type Props = {
+    open?: boolean
+    iteration: IterationSettings
+    onApply: (next: IterationSettings) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), iteration, onApply, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let enabled = $state(false)
+  let passes = $state('100')
+  let change = $state('0.001')
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    enabled = iteration.enabled
+    passes = String(iteration.maxIterations)
+    change = String(iteration.maxChange)
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const maxIterations = Number(passes)
+    const maxChange = Number(change)
+    if (!Number.isFinite(maxIterations) || maxIterations < 1 || !Number.isFinite(maxChange) || maxChange < 0) {
+      error = t('iteration.badNumbers')
+      return
+    }
+    open = false
+    onApply({ enabled, maxIterations: Math.round(maxIterations), maxChange })
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('iteration.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="check"><input type="checkbox" bind:this={first} bind:checked={enabled} /> {t('iteration.enable')}</label>
+    <label class="field">
+      <span>{t('iteration.maxIterations')}</span>
+      <input type="number" min="1" step="1" bind:value={passes} disabled={!enabled} />
+    </label>
+    <label class="field">
+      <span>{t('iteration.maxChange')}</span>
+      <input type="number" min="0" step="0.0001" bind:value={change} disabled={!enabled} />
+    </label>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('iteration.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <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/SvSheetIteration.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IterationSettings } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    iteration: IterationSettings;
+    onApply: (next: IterationSettings) => void;
+    onClose?: () => void;
+};
+declare const SvSheetIteration: import("svelte").Component<Props, {}, "open">;
+type SvSheetIteration = ReturnType<typeof SvSheetIteration>;
+export default SvSheetIteration;

package/dist/SvSheetLink.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  /**
+   * Excel's Insert Hyperlink dialog, as the three fields that matter: where
+   * it goes, what the cell says, and what hovering says. Opened by
+   * Insert > Link or Ctrl+K, and again on a cell that already has one,
+   * which is how a link is edited.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { isSafeLinkTarget, parseLinkTarget, type SheetLink } from './sheet/links'
+
+  type Props = {
+    open?: boolean
+    /** The link as it stands, or a blank one for a cell that has none. */
+    link: SheetLink
+    /** What the cell shows right now, offered as the text. */
+    text: string
+    /** The cell's address, for the title. */
+    where: string
+    existing?: boolean
+    onApply: (link: SheetLink, text: string) => void
+    onRemove?: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), link, text, where, existing = false, onApply, onRemove, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let address = $state('')
+  let label = $state('')
+  let tip = $state('')
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    address = link.target
+    label = text
+    tip = link.tip ?? ''
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const target = parseLinkTarget(address)
+    if (!target) {
+      // Two ways to have no target, and they are not the same mistake: an
+      // address nobody typed, and one carrying a scheme this shell will not
+      // open. Telling the second one it is empty sends the user back to a
+      // field that is not.
+      error = address.trim() && !isSafeLinkTarget(address) ? t('link.unsafeScheme') : t('link.badAddress')
+      return
+    }
+    const next: SheetLink = { target: address.trim() }
+    if (tip.trim()) next.tip = tip.trim()
+    open = false
+    onApply(next, label)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={`${t('link.title')} – ${where}`} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('link.address')}</span>
+      <input type="text" bind:this={first} bind:value={address} spellcheck="false" placeholder={t('link.addressPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('link.text')}</span>
+      <input type="text" bind:value={label} placeholder={t('link.textPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('link.tip')}</span>
+      <input type="text" bind:value={tip} placeholder={t('link.tipPlaceholder')} />
+    </label>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('link.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onRemove}
+        <button type="button" class="btn" onclick={() => { open = false; onRemove?.() }}>{t('link.remove')}</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/SvSheetLink.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type SheetLink } from './sheet/links.js';
+type Props = {
+    open?: boolean;
+    /** The link as it stands, or a blank one for a cell that has none. */
+    link: SheetLink;
+    /** What the cell shows right now, offered as the text. */
+    text: string;
+    /** The cell's address, for the title. */
+    where: string;
+    existing?: boolean;
+    onApply: (link: SheetLink, text: string) => void;
+    onRemove?: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetLink: import("svelte").Component<Props, {}, "open">;
+type SvSheetLink = ReturnType<typeof SvSheetLink>;
+export default SvSheetLink;

package/dist/SvSheetListPicker.svelte

@@ -5,6 +5,7 @@
    * and Enter to pick, Escape to leave the cell as it is. The shell mounts
    * it inside the popover anchored to the cell.
    */
+  import { useSheetText } from './sheet-text'
   type Props = {
     choices: ReadonlyArray<string>
     /** The cell's current text, marked in the list. */
@@ -14,6 +15,7 @@
   }
 
   let { choices, value, onPick, onCancel }: Props = $props()
+  const t = useSheetText()
 
   let list = $state<HTMLDivElement | null>(null)
   let index = $state(0)
@@ -42,13 +44,13 @@
   bind:this={list}
   class="sv-sheet-list-picker"
   role="listbox"
-  aria-label="Choices"
+  aria-label={t('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>
+    <div class="empty">{t('listEmpty')}</div>
   {:else}
     {#each choices as choice, i (i)}
       <!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->

package/dist/SvSheetListPicker.svelte.d.ts

@@ -1,9 +1,3 @@
-/**
- * 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. */

package/dist/SvSheetManageRules.svelte

@@ -7,6 +7,7 @@
    * 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'
@@ -25,6 +26,7 @@
   }
 
   let { open = $bindable(false), rules, selection, onApply, onEdit, onClose }: Props = $props()
+  const t = useSheetText()
 
   let working = $state<CfRule[]>([])
   let scope = $state<'sheet' | 'selection'>('sheet')
@@ -55,7 +57,7 @@
     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' }
+    return { text: t('manageRules.iconSet') }
   }
 
   function remove() {
@@ -93,30 +95,30 @@
   }
 </script>
 
-<SvModal bind:open onClose={onClose} title="Conditional Formatting Rules Manager" size="md" width={640}>
+<SvModal bind:open onClose={onClose} title={t('manageRules.title')} size="md" width={640}>
   <div class="sv-sheet-dialog manage">
     <label class="field auto">
-      <span>Show formatting rules for:</span>
+      <span>{t('manageRules.showFor')}</span>
       <select bind:value={scope}>
-        <option value="sheet">This Worksheet</option>
-        <option value="selection">Current Selection</option>
+        <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)}>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>
+      <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="Rules">
+    <div class="list" role="grid" aria-label={t('manageRules.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>
+        <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">No rules {scope === 'sheet' ? 'on this sheet' : 'over the selection'}.</div>
+        <div class="empty">{t(scope === 'sheet' ? 'manageRules.noneOnSheet' : 'manageRules.noneInSelection')}</div>
       {/if}
       {#each shown as rule (rule.id)}
         {@const s = sample(rule)}
@@ -125,15 +127,15 @@
           <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>
+          <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}>OK</button>
-      <button type="button" class="btn" onclick={close}>Cancel</button>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
     </div>
   {/snippet}
 </SvModal>

package/dist/SvSheetNameManager.svelte

@@ -5,6 +5,7 @@
    * 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'
@@ -20,6 +21,7 @@
   }
 
   let { open = $bindable(false), workbook, onChange, onClose }: Props = $props()
+  const t = useSheetText()
 
   let names = $state<DefinedName[]>([])
   let newName = $state('')
@@ -123,11 +125,11 @@
   }
 </script>
 
-<SvModal bind:open onClose={onClose} title="Name Manager" size="md">
-  <div class="sv-sheet-dialog manager" role="group" aria-label="Name Manager">
+<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>Name</th><th>Refers to</th><th>Value</th><th></th></tr>
+        <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)}
@@ -138,7 +140,7 @@
                 <input
                   type="text"
                   bind:value={editRefersTo}
-                  aria-label="Refers to"
+                  aria-label={t('nameManager.refersTo')}
                   spellcheck="false"
                   onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveEdit() } if (e.key === 'Escape') { e.stopPropagation(); editing = null } }}
                 />
@@ -149,36 +151,36 @@
             <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>
+                <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)}>Edit</button>
-                <button type="button" class="link" onclick={() => remove(entry.name)}>Delete</button>
+                <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">No defined names. Add one below.</td></tr>
+          <tr><td colspan="4" class="empty">{t('nameManager.empty')}</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" />
+        <span>{t('nameManager.nameField')}</span>
+        <input type="text" bind:value={newName} placeholder={t('nameManager.namePlaceholder')} spellcheck="false" />
       </label>
       <label>
-        <span>Refers to:</span>
-        <input type="text" bind:value={newRefersTo} placeholder="Inputs!B3 or B2:B13" spellcheck="false" />
+        <span>{t('nameManager.refersToField')}</span>
+        <input type="text" bind:value={newRefersTo} placeholder={t('nameManager.refersToPlaceholder')} spellcheck="false" />
       </label>
-      <button type="submit" class="btn">New</button>
+      <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}>Close</button>
+      <button type="button" class="btn" onclick={close}>{t('close')}</button>
     </div>
   {/snippet}
 </SvModal>

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;