@svgrid/enterprise 3.0.2 → 3.0.3

package/dist/SvSheetRibbon.svelte

@@ -36,6 +36,7 @@
    * `sheet/ribbon.ts`, which calls the same function the matching keystroke
    * does, so a button and its shortcut cannot drift apart.
    */
+  import { tick } from 'svelte'
   import { SvPopover } from '@svgrid/grid'
   import type { GridCommandContext } from '@svgrid/grid/shortcuts'
   import SvRibbonIcon from './SvRibbonIcon.svelte'
@@ -44,6 +45,8 @@
     type RibbonTab, type RibbonGroup, type RibbonItem, type RibbonOption, type RibbonActionId,
   } from './sheet/ribbon'
   import { THEME_COLOURS, STANDARD_COLOURS } from './sheet/palette'
+  import { useSheetText } from './sheet-text'
+  import { defaultSheetMessages } from './sheet/messages'
 
   type Props = {
     /**
@@ -81,7 +84,8 @@
     onAction,
     activeActions = [],
     tabs = RIBBON_TABS,
-    tab = $bindable(tabs[0]?.id ?? 'home'),
+    // Excel opens on Home, not on File, whatever tab comes first.
+    tab = $bindable(tabs.some((t) => t.id === 'home') ? 'home' : tabs[0]?.id ?? 'home'),
     without = [],
     collapsed = $bindable(false),
   }: Props = $props()
@@ -183,8 +187,20 @@
   }
 
   /** Excel puts the shortcut after the name in the tooltip. */
+  // Every string the ribbon prints goes through the shell's map, keyed
+  // off the model, so a translation covers a button the model gains later.
+  const t = useSheetText()
+  const label = (item: RibbonItem): string => t(`ribbon.${item.id}.label`)
+  const title = (item: RibbonItem): string => t(`ribbon.${item.id}.title`)
+  /** An option's text, unless its key belongs to an earlier option with the
+   *  same value (two palette colours on one hex): that one keeps its own label. */
+  const optionLabel = (item: RibbonItem, option: RibbonOption): string => {
+    const key = `ribbon.${item.id}.option.${option.value}`
+    return defaultSheetMessages[key] === option.label ? t(key) : option.label
+  }
+  const groupLabel = (group: RibbonGroup): string => t(`ribbon.group.${group.id}`)
   function tip(item: RibbonItem): string {
-    return item.keys ? `${item.title} (${item.keys})` : item.title
+    return item.keys ? `${title(item)} (${item.keys})` : title(item)
   }
 
   /**
@@ -350,11 +366,31 @@
     if (first) themeFont = first
   })
 
+  /**
+   * The tab strip's keyboard model, as WAI-ARIA asks for a tablist: the arrows
+   * move between tabs, Home and End jump to the ends, and FOCUS FOLLOWS the
+   * selection - without that last part a screen reader announces the old tab
+   * while the band under it has changed. The arrows are mirrored on a
+   * right-to-left ribbon, where the next tab is to the left.
+   */
   function onTabKey(event: KeyboardEvent) {
     const ids = tabs.map((t) => t.id)
     const at = ids.indexOf(tab)
-    if (event.key === 'ArrowRight' && at < ids.length - 1) { event.preventDefault(); tab = ids[at + 1]! }
-    if (event.key === 'ArrowLeft' && at > 0) { event.preventDefault(); tab = ids[at - 1]! }
+    const strip = (event.currentTarget as HTMLElement).parentElement
+    const rtl = strip ? getComputedStyle(strip).direction === 'rtl' : false
+    const forward = rtl ? 'ArrowLeft' : 'ArrowRight'
+    const back = rtl ? 'ArrowRight' : 'ArrowLeft'
+    let next = -1
+    if (event.key === forward && at < ids.length - 1) next = at + 1
+    else if (event.key === back && at > 0) next = at - 1
+    else if (event.key === 'Home') next = 0
+    else if (event.key === 'End') next = ids.length - 1
+    if (next < 0 || next === at) return
+    event.preventDefault()
+    tab = ids[next]!
+    // After the strip re-renders, the selected tab is the one Tab reaches, so
+    // it is the one that should hold focus.
+    void tick().then(() => strip?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus())
   }
 </script>
 
@@ -374,17 +410,17 @@
     class:on={state.on}
     disabled={!state.enabled}
     title={tip(item)}
-    aria-label={item.title}
+    aria-label={title(item)}
     aria-pressed={item.kind === 'toggle' ? state.on : undefined}
     onclick={() => run(item)}
   >
     {#if item.icon}
       <SvRibbonIcon name={item.icon} size={item.size === 'large' ? 32 : 16} />
     {:else}
-      <span class="glyph" data-glyph={item.id}>{item.label}</span>
+      <span class="glyph" data-glyph={item.id}>{label(item)}</span>
     {/if}
     {#if item.size === 'large' || item.wide}
-      <span class="label">{item.label}</span>
+      <span class="label">{label(item)}</span>
     {/if}
   </button>
 {/snippet}
@@ -400,38 +436,38 @@
       class:has-bar={item.palette}
       disabled={!state.enabled}
       title={tip(item)}
-      aria-label={item.title}
+      aria-label={title(item)}
       onclick={() => run(item, faceValue(item))}
     >
       {#if item.icon && !(item.palette && item.id === 'text-colour')}
         <SvRibbonIcon name={item.icon} />
       {:else}
-        <span class="glyph" data-glyph={item.id}>{item.label}</span>
+        <span class="glyph" data-glyph={item.id}>{label(item)}</span>
       {/if}
       {#if item.palette}
         <span class="bar" class:none={colour === null} style:background={colour ?? 'transparent'}></span>
       {/if}
     </button>
     {#if live}
-      <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={item.title}>
+      <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={title(item)}>
         {#snippet anchor()}
           <button
             type="button"
             class="btn arrow"
             disabled={!state.enabled}
-            aria-label={`${item.title} options`}
+            aria-label={t('menuOptions', { title: title(item) })}
             aria-haspopup="menu"
             aria-expanded={menuOpen[item.id] ?? false}
           ><SvRibbonIcon name="chevron-down" size={10} /></button>
         {/snippet}
         {#if item.palette}
-          <div class="palette" role="menu" aria-label={item.title}>
+          <div class="palette" role="menu" aria-label={title(item)}>
             {#if item.none}
               <button type="button" class="palette-none" role="menuitem" onclick={() => pick(item, item.none!.value)}>
-                <span class="swatch no-colour" aria-hidden="true"></span>{item.none.label}
+                <span class="swatch no-colour" aria-hidden="true"></span>{t(`ribbon.${item.id}.none`)}
               </button>
             {/if}
-            <div class="palette-title">Theme Colors</div>
+            <div class="palette-title">{t('paletteThemeColors')}</div>
             <div class="swatches">
               {#each THEME_COLOURS as row, r (r)}
                 {#each row as c (c.value + r)}
@@ -439,7 +475,7 @@
                 {/each}
               {/each}
             </div>
-            <div class="palette-title">Standard Colors</div>
+            <div class="palette-title">{t('paletteStandardColors')}</div>
             <div class="swatches">
               {#each STANDARD_COLOURS as c (c.value)}
                 <button type="button" class="swatch" role="menuitem" title={c.label} aria-label={c.label} style:background={c.value} onclick={() => pick(item, c.value)}></button>
@@ -447,11 +483,11 @@
             </div>
           </div>
         {:else}
-          <div class="menu" role="menu" aria-label={item.title}>
+          <div class="menu" role="menu" aria-label={title(item)}>
             {#each item.options ?? [] as option (option.value)}
               <button type="button" class="menu-item" role="menuitem" onclick={() => pick(item, option.value)}>
                 {#if option.icon}<SvRibbonIcon name={option.icon} />{/if}
-                <span>{option.label}</span>
+                <span>{optionLabel(item, option)}</span>
               </button>
             {/each}
           </div>
@@ -474,38 +510,38 @@
       class:large={item.size === 'large'}
       disabled={!state.enabled}
       title={tip(item)}
-      aria-label={item.title}
+      aria-label={title(item)}
       aria-haspopup="menu"
       aria-expanded={live ? (menuOpen[item.id] ?? false) : false}
     >
       {#if item.icon}
         <SvRibbonIcon name={item.icon} size={item.size === 'large' ? 32 : 16} />
       {:else}
-        <span class="glyph" data-glyph={item.id}>{item.label}</span>
+        <span class="glyph" data-glyph={item.id}>{label(item)}</span>
       {/if}
       {#if item.size === 'large' || item.wide}
-        <span class="label">{item.label}</span>
+        <span class="label">{label(item)}</span>
       {/if}
       <SvRibbonIcon name="chevron-down" size={8} />
     </button>
   {/snippet}
   {#snippet entries()}
-    <div class="menu" role="menu" aria-label={item.title}>
+    <div class="menu" role="menu" aria-label={title(item)}>
       {#each item.options ?? [] as option (option.value)}
         {#if option.heading}
-          <div class="menu-heading" role="presentation">{option.label}</div>
+          <div class="menu-heading" role="presentation">{optionLabel(item, option)}</div>
         {:else}
           {#if option.toggle && option.emits}
             {@const on = live && activeActions.includes(option.emits)}
             <button type="button" class="menu-item" class:on role="menuitemcheckbox" aria-checked={on} onclick={() => pickOption(item, option)}>
               {#if option.icon}<SvRibbonIcon name={option.icon} />{/if}
-              <span>{option.label}</span>
+              <span>{optionLabel(item, option)}</span>
               {#if option.keys}<span class="keys">{option.keys}</span>{/if}
             </button>
           {:else}
             <button type="button" class="menu-item" role="menuitem" onclick={() => pickOption(item, option)}>
               {#if option.icon}<SvRibbonIcon name={option.icon} />{/if}
-              <span>{option.label}</span>
+              <span>{optionLabel(item, option)}</span>
               {#if option.keys}<span class="keys">{option.keys}</span>{/if}
             </button>
           {/if}
@@ -524,38 +560,38 @@
         class:large={item.size === 'large'}
         disabled={!state.enabled}
         title={tip(item)}
-        aria-label={item.title}
+        aria-label={title(item)}
         onclick={() => run(item)}
       >
         {#if item.icon}
           <SvRibbonIcon name={item.icon} size={item.size === 'large' ? 32 : 16} />
         {:else}
-          <span class="glyph" data-glyph={item.id}>{item.label}</span>
+          <span class="glyph" data-glyph={item.id}>{label(item)}</span>
         {/if}
         <!-- A small wide split (Merge & Center) prints its label on the face, as
              Excel does; the colour splits stay icon-only. -->
-        {#if item.wide && item.size !== 'large'}<span class="label">{item.label}</span>{/if}
+        {#if item.wide && item.size !== 'large'}<span class="label">{label(item)}</span>{/if}
       </button>
       {#if live}
-        <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={item.title}>
+        <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={title(item)}>
           {#snippet anchor()}
             <button
               type="button"
               class="btn arrow"
               disabled={!state.enabled}
-              aria-label={`${item.title} options`}
+              aria-label={t('menuOptions', { title: title(item) })}
               aria-haspopup="menu"
               aria-expanded={menuOpen[item.id] ?? false}
-            >{#if item.size === 'large'}<span class="label">{item.label}</span>{/if}<SvRibbonIcon name="chevron-down" size={10} /></button>
+            >{#if item.size === 'large'}<span class="label">{label(item)}</span>{/if}<SvRibbonIcon name="chevron-down" size={10} /></button>
           {/snippet}
           {@render entries()}
         </SvPopover>
       {:else}
-        <span class="btn arrow" aria-hidden="true">{#if item.size === 'large'}<span class="label">{item.label}</span>{/if}<SvRibbonIcon name="chevron-down" size={10} /></span>
+        <span class="btn arrow" aria-hidden="true">{#if item.size === 'large'}<span class="label">{label(item)}</span>{/if}<SvRibbonIcon name="chevron-down" size={10} /></span>
       {/if}
     </div>
   {:else if live}
-    <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={item.title}>
+    <SvPopover bind:open={menuOpen[item.id]} placement="bottom-start" arrow={false} offset={2} ariaLabel={title(item)}>
       {#snippet anchor()}
         {@render face()}
       {/snippet}
@@ -573,7 +609,7 @@
       class="select"
       data-select={item.id}
       title={tip(item)}
-      aria-label={item.title}
+      aria-label={title(item)}
       disabled={!state.enabled}
       value={live ? currentOf(item) : ''}
       onchange={(e) => run(item, e.currentTarget.value)}
@@ -584,7 +620,7 @@
         <option value={currentOf(item)}>{currentOf(item)}</option>
       {/if}
       {#each item.options ?? [] as option (option.value)}
-        <option value={option.value}>{option.value === '' && item.id === 'font-family' ? themeFont : option.label}</option>
+        <option value={option.value}>{option.value === '' && item.id === 'font-family' ? themeFont : optionLabel(item, option)}</option>
       {/each}
     </select>
   {:else if item.kind === 'menu'}
@@ -620,8 +656,8 @@
   {/if}
 {/snippet}
 
-<div class="sv-ribbon" class:collapsed role="toolbar" aria-label="Spreadsheet ribbon" aria-orientation="horizontal" bind:this={rootEl}>
-  <div class="tabs" role="tablist" aria-label="Ribbon tabs">
+<div class="sv-ribbon" class:collapsed role="toolbar" aria-label={t('ribbonLabel')} aria-orientation="horizontal" bind:this={rootEl}>
+  <div class="tabs" role="tablist" aria-label={t('ribbonTabs')}>
     {#each tabs as entry (entry.id)}
       <button
         type="button"
@@ -633,11 +669,11 @@
         onclick={() => onTabClick(entry.id)}
         ondblclick={toggleCollapsed}
         onkeydown={onTabKey}
-      >{entry.label}</button>
+      >{t(`ribbon.tab.${entry.id}`)}</button>
     {/each}
     <span class="tabs-grow"></span>
     {#if collapsed && !peek}
-      <button type="button" class="ribbon-toggle" title="Expand the Ribbon (Ctrl+F1)" aria-label="Expand the Ribbon" aria-expanded="false" onclick={toggleCollapsed}>
+      <button type="button" class="ribbon-toggle" title={`${t('ribbonExpand')} (Ctrl+F1)`} aria-label={t('ribbonExpand')} aria-expanded="false" onclick={toggleCollapsed}>
         <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><path d="M2 3.5l3 3 3-3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
       </button>
     {/if}
@@ -646,27 +682,30 @@
   <div class="band" class:away={collapsed && !peek} class:peek={collapsed && peek} bind:clientWidth={bandWidth}>
     {#each current?.groups ?? [] as group (group.id)}
       {#if collapsedGroups.has(group.id)}
-        <section class="group folded" aria-label={group.label}>
-          <SvPopover bind:open={groupOpen[group.id]} placement="bottom-start" arrow={false} offset={4} ariaLabel={group.label}>
+        <section class="group folded" role="group" aria-label={groupLabel(group)}>
+          <SvPopover bind:open={groupOpen[group.id]} placement="bottom-start" arrow={false} offset={4} ariaLabel={groupLabel(group)}>
             {#snippet anchor()}
-              <button type="button" class="btn large" aria-haspopup="true" aria-expanded={groupOpen[group.id] ?? false} title={group.label}>
+              <button type="button" class="btn large" aria-haspopup="true" aria-expanded={groupOpen[group.id] ?? false} title={groupLabel(group)}>
                 <span class="fold-icon"><SvRibbonIcon name={groupIcon(group)} size={32} /></span>
-                <span class="label">{group.label} <SvRibbonIcon name="chevron-down" size={10} /></span>
+                <span class="label">{groupLabel(group)} <SvRibbonIcon name="chevron-down" size={10} /></span>
               </button>
             {/snippet}
             <div class="popup-group">
               {@render body(group, true)}
-              <div class="label-row"><span class="group-label">{group.label}</span></div>
+              <div class="label-row"><span class="group-label">{groupLabel(group)}</span></div>
             </div>
           </SvPopover>
         </section>
       {:else}
-        <section class="group" class:compact={fit.compact.has(group.id)} aria-label={group.label}>
+        <!-- A group of the toolbar, not a landmark: a named <section> is a
+             region, and a ribbon of twelve regions (or two ribbons on one
+             page) buries whatever landmarks the page really has. -->
+        <section class="group" class:compact={fit.compact.has(group.id)} role="group" aria-label={groupLabel(group)}>
           {@render body(group, true)}
           <div class="label-row">
-            <span class="group-label">{group.label}</span>
+            <span class="group-label">{groupLabel(group)}</span>
             {#if group.launcher}
-              <button type="button" class="launcher" title={`${group.label} settings`} aria-label={`${group.label} settings`} onclick={() => launch(group.launcher!)}>
+              <button type="button" class="launcher" title={t('groupSettings', { group: groupLabel(group) })} aria-label={t('groupSettings', { group: groupLabel(group) })} onclick={() => launch(group.launcher!)}>
                 <svg viewBox="0 0 8 8" width="8" height="8" aria-hidden="true"><path d="M1 1h3.5M1 1v3.5M1.5 1.5L6.5 6.5M6.5 3.5V6.5H3.5" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" /></svg>
               </button>
             {/if}
@@ -676,7 +715,7 @@
     {/each}
     <!-- Excel's chevron at the band's end: collapse, or pin the peeked band. -->
     <span class="band-grow"></span>
-    <button type="button" class="ribbon-toggle in-band" title={collapsed ? 'Pin the Ribbon (Ctrl+F1)' : 'Collapse the Ribbon (Ctrl+F1)'} aria-label={collapsed ? 'Pin the Ribbon' : 'Collapse the Ribbon'} onclick={toggleCollapsed}>
+    <button type="button" class="ribbon-toggle in-band" title={`${collapsed ? t('ribbonPin') : t('ribbonCollapse')} (Ctrl+F1)`} aria-label={collapsed ? t('ribbonPin') : t('ribbonCollapse')} onclick={toggleCollapsed}>
       {#if collapsed}
         <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true"><path d="M4 1.5h4M6 1.5v3.5M3.5 5l2.5 2.5L8.5 5M6 7.5V11" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" /></svg>
       {:else}
@@ -696,7 +735,7 @@
     {#each current?.groups ?? [] as group (group.id)}
       <section class="group" use:measure={group.id}>
         {@render body(group, false)}
-        <div class="label-row"><span class="group-label">{group.label}</span></div>
+        <div class="label-row"><span class="group-label">{groupLabel(group)}</span></div>
       </section>
     {/each}
   </div>
@@ -704,7 +743,7 @@
     {#each current?.groups ?? [] as group (group.id)}
       <section class="group compact" use:measure={`${group.id}:compact`}>
         {@render body(group, false)}
-        <div class="label-row"><span class="group-label">{group.label}</span></div>
+        <div class="label-row"><span class="group-label">{groupLabel(group)}</span></div>
       </section>
     {/each}
   </div>
@@ -713,7 +752,7 @@
       <section class="group folded" use:measure={`${group.id}:folded`}>
         <button type="button" class="btn large" tabindex="-1">
           <span class="fold-icon"><SvRibbonIcon name={groupIcon(group)} size={32} /></span>
-          <span class="label">{group.label} <SvRibbonIcon name="chevron-down" size={10} /></span>
+          <span class="label">{groupLabel(group)} <SvRibbonIcon name="chevron-down" size={10} /></span>
         </button>
       </section>
     {/each}
@@ -746,8 +785,14 @@
     gap: 0;
     height: 30px;
     padding: 0 8px;
+    /* On a phone the eight labels are wider than the screen. They scroll
+       sideways rather than shrink into each other, with no bar showing. */
+    overflow-x: auto;
+    scrollbar-width: none;
   }
+  .tabs::-webkit-scrollbar { display: none; }
   .tab {
+    flex: 0 0 auto;
     position: relative;
     font: inherit;
     border: 0;
@@ -759,7 +804,15 @@
     border-radius: 4px 4px 0 0;
   }
   .tab:hover { background: var(--sg-row-hover-bg, rgba(0, 0, 0, 0.04)); }
-  .tab.active { color: var(--sg-accent, #107c41); font-weight: 600; }
+  /* The label is the accent mixed toward the text colour, not the raw
+     accent: a 12px label in a host theme's accent (an orange, a cyan) lands
+     under 4.5:1 on the ribbon's near-white band, which axe fails and a
+     low-vision reader feels. The underline below keeps the accent pure, so
+     the tab still reads as Excel's. */
+  .tab.active {
+    color: color-mix(in srgb, var(--sg-accent, #107c41) 72%, var(--sg-fg, #242424));
+    font-weight: 600;
+  }
   /* Excel's selected-tab mark: a short rounded underline, not a full-width
      border, inset from the label's edges. */
   .tab.active::after {

package/dist/SvSheetSizeDialog.svelte

@@ -4,6 +4,7 @@
    * 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 = {
@@ -16,6 +17,7 @@
   }
 
   let { open = $bindable(false), title, label, value, onApply, onClose }: Props = $props()
+  const t = useSheetText()
 
   let draft = $state('')
   let input = $state<HTMLInputElement | null>(null)
@@ -51,8 +53,8 @@
   </form>
   {#snippet footer()}
     <div class="sv-sheet-dialog-buttons">
-      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>OK</button>
-      <button type="button" class="btn" onclick={close}>Cancel</button>
+      <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/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>