@svgrid/enterprise 3.0.0 → 3.0.2

package/dist/sheet/ribbon.js

@@ -0,0 +1,753 @@
+import { applyFormat, toggleFormat, preset, autoSum, structural, clearFormats, getFormatTarget, getWorkbook, withFormatUndo, nudgeFontSize, activeEntry, FONT_SIZES, DEFAULT_FONT_SIZE, applyBorders, formatAllowed, raiseRibbonAction, } from './shortcuts.js';
+export { FONT_SIZES, applyBorders } from './shortcuts.js';
+import { insertRows, deleteRows, getStructureTarget } from './structure.js';
+import { fillDown, fillRight, targetRect } from './commands.js';
+import { FORMAT_PRESETS, formatCategory } from './number-format.js';
+import { ALL_COLOURS } from './palette.js';
+// ---------------------------------------------------------------------------
+// Shared predicates
+// ---------------------------------------------------------------------------
+/** True when there is at least one cell to act on. */
+function hasTarget(cmd) {
+    return targetRect(cmd) !== null;
+}
+/**
+ * The rectangles an action should write to: the selection when there is one,
+ * otherwise the active cell alone.
+ *
+ * The same fallback `applyFormat` makes, so a button with nothing
+ * range-selected behaves like the key it mirrors rather than declining.
+ */
+function rectsOf(cmd) {
+    if (cmd.ranges.length)
+        return cmd.ranges;
+    const rect = targetRect(cmd);
+    return rect ? [rect] : [];
+}
+/** Formatting needs somewhere to write. Without a store the keyboard
+ *  bindings decline, so the buttons grey out for the same reason. */
+function canFormat(cmd) {
+    const target = getFormatTarget();
+    if (!target || !hasTarget(cmd))
+        return false;
+    return target.guard?.(rectsOf(cmd)) !== false;
+}
+/** Insert and Delete grey out where the sheet refuses structural edits. */
+function canRestructure() {
+    const target = getStructureTarget();
+    return !target || target.canApply?.({ kind: 'insertRows', at: 0, count: 1 }) !== false;
+}
+/**
+ * Whether every cell in the selection already carries `field`.
+ *
+ * Excel's own rule for a toggle button's pressed state, and the same rule
+ * `store.toggle` uses to decide which way the next press goes - so the button
+ * lights up exactly when pressing it would turn the attribute OFF.
+ */
+function everyCellHas(cmd, test) {
+    const target = getFormatTarget();
+    if (!target)
+        return false;
+    const rects = rectsOf(cmd);
+    if (!rects.length)
+        return false;
+    let seen = 0;
+    for (const [minRow, minCol, maxRow, maxCol] of rects) {
+        for (let r = minRow; r <= maxRow; r += 1) {
+            for (let c = minCol; c <= maxCol; c += 1) {
+                const rowId = target.lookup.rowIdAt(r);
+                const columnId = target.lookup.columnIdAt(c);
+                if (rowId == null || columnId == null)
+                    continue;
+                seen += 1;
+                if (!test(target.store.get(rowId, columnId)))
+                    return false;
+            }
+        }
+    }
+    return seen > 0;
+}
+function styleToggle(field) {
+    return {
+        kind: 'toggle',
+        run: (cmd) => toggleFormat(cmd, field),
+        isOn: (cmd) => everyCellHas(cmd, (entry) => entry?.[field] === true),
+        isEnabled: canFormat,
+    };
+}
+function alignItem(align, title) {
+    return {
+        id: `align-${align}`,
+        label: '≡',
+        icon: `align-${align}`,
+        title,
+        kind: 'toggle',
+        run: (cmd) => applyFormat(cmd, { align }),
+        isOn: (cmd) => everyCellHas(cmd, (entry) => entry?.align === align),
+        isEnabled: canFormat,
+    };
+}
+function presetItem(id, label, title, name, keys) {
+    const run = preset(name);
+    return {
+        id,
+        label,
+        title,
+        keys,
+        kind: 'toggle',
+        run: (cmd) => run(cmd, new KeyboardEvent('keydown')),
+        isOn: (cmd) => everyCellHas(cmd, (entry) => entry?.numFmt === FORMAT_PRESETS[name]),
+        isEnabled: canFormat,
+    };
+}
+/** A command written for the keymap, adapted to a button. The event is only
+ *  there because `SheetCommand` takes one; none of these read it. */
+function fromCommand(command) {
+    return (cmd) => command(cmd, new KeyboardEvent('keydown'));
+}
+/**
+ * Excel's Increase/Decrease Decimal.
+ *
+ * Reads the active cell's current pattern rather than assuming one, so
+ * pressing it on a currency cell keeps the currency and only moves the point.
+ * A cell with no pattern starts from General, which Excel treats as 0 decimals.
+ */
+function nudgeDecimals(delta) {
+    return (cmd) => {
+        const target = getFormatTarget();
+        const active = cmd.activeCell;
+        if (!target || !active)
+            return false;
+        const rowId = target.lookup.rowIdAt(active.rowIndex);
+        const columnId = target.lookup.columnIdAt(active.colIndex);
+        const current = rowId != null && columnId != null
+            ? target.store.get(rowId, columnId)?.numFmt
+            : undefined;
+        const next = withDecimals(current ?? '0', delta);
+        return next === null ? false : applyFormat(cmd, { numFmt: next });
+    };
+}
+/**
+ * Move the decimal count of a number-format pattern by `delta`.
+ *
+ * Exported because it is the fiddly part and deserves its own tests: the
+ * pattern can have a prefix and a suffix (`$#,##0.00`, `0.0%`), can have no
+ * decimal section at all, and must not go below zero or run away past the 30
+ * places Excel allows.
+ */
+export function withDecimals(pattern, delta) {
+    // Every section moves together. The currency preset is
+    // '$#,##0.00;($#,##0.00)' - positives and negatives - and moving only the
+    // first half would leave a sheet where -1234.5 printed to a different
+    // precision than 1234.5. Excel moves both, so this does too.
+    //
+    // A quoted literal can contain a semicolon, which would make splitting on
+    // ';' cut a section in half, so a pattern with quotes declines instead of
+    // being mangled. Nothing in FORMAT_PRESETS has one.
+    if (pattern.includes('"'))
+        return null;
+    const sections = pattern.split(';');
+    const moved = [];
+    for (const section of sections) {
+        const next = sectionWithDecimals(section, delta);
+        // All or nothing: a partial rewrite is the very thing this guards.
+        if (next === null)
+            return null;
+        moved.push(next);
+    }
+    return moved.join(';');
+}
+function sectionWithDecimals(section, delta) {
+    const dot = section.indexOf('.');
+    const places = dot < 0 ? 0 : countLeading(section.slice(dot + 1), '0');
+    const next = places + delta;
+    if (next < 0 || next > 30)
+        return null;
+    const head = dot < 0 ? section : section.slice(0, dot);
+    const tail = dot < 0 ? '' : section.slice(dot + 1 + places);
+    return next === 0 ? head + tail : `${head}.${'0'.repeat(next)}${tail}`;
+}
+function countLeading(text, ch) {
+    let n = 0;
+    while (n < text.length && text[n] === ch)
+        n += 1;
+    return n;
+}
+// ---------------------------------------------------------------------------
+// Fonts, sizes, borders
+// ---------------------------------------------------------------------------
+/**
+ * The fonts a spreadsheet user reaches for, with the stacks that make each
+ * render on a machine that lacks it. The empty value is the theme's own
+ * font, which is what "Default" means here and what a fresh cell has.
+ */
+export const FONT_FAMILIES = [
+    { value: '', label: 'Default' },
+    { value: 'Aptos, "Aptos Narrow", "Segoe UI", sans-serif', label: 'Aptos' },
+    { value: 'Calibri, Carlito, "Segoe UI", sans-serif', label: 'Calibri' },
+    { value: 'Arial, Helvetica, sans-serif', label: 'Arial' },
+    { value: '"Segoe UI", system-ui, sans-serif', label: 'Segoe UI' },
+    { value: 'Verdana, Geneva, sans-serif', label: 'Verdana' },
+    { value: 'Georgia, "Times New Roman", serif', label: 'Georgia' },
+    { value: '"Times New Roman", Times, serif', label: 'Times New Roman' },
+    { value: '"Courier New", Courier, monospace', label: 'Courier New' },
+    { value: 'ui-monospace, Menlo, Consolas, monospace', label: 'Consolas' },
+];
+const NUMBER_FORMATS = [
+    { value: 'general', label: 'General' },
+    { value: 'number', label: 'Number' },
+    { value: 'currency', label: 'Currency' },
+    { value: 'percent', label: 'Percentage' },
+    { value: 'date', label: 'Date' },
+    { value: 'time', label: 'Time' },
+    { value: 'scientific', label: 'Scientific' },
+];
+const BORDER_OPTIONS = [
+    { value: 'bottom', label: 'Bottom Border', icon: 'border-bottom' },
+    { value: 'top', label: 'Top Border', icon: 'border-top' },
+    { value: 'left', label: 'Left Border', icon: 'border-left' },
+    { value: 'right', label: 'Right Border', icon: 'border-right' },
+    { value: 'none', label: 'No Border', icon: 'border-none' },
+    { value: 'all', label: 'All Borders', icon: 'border-all' },
+    { value: 'outside', label: 'Outside Borders', icon: 'border-outside' },
+    { value: 'thick-bottom', label: 'Thick Bottom Border', icon: 'border-thick-bottom' },
+];
+// ---------------------------------------------------------------------------
+// The tabs
+// ---------------------------------------------------------------------------
+const small = (row, item) => ({ ...item, row });
+const HOME = {
+    id: 'home',
+    label: 'Home',
+    groups: [
+        {
+            id: 'clipboard',
+            icon: 'paste',
+            label: 'Clipboard',
+            launcher: 'paste-special',
+            items: [
+                // Excel's Clipboard group: the large Paste, and beside it Cut, Copy and
+                // Format Painter as icons alone, which is how Excel draws them at
+                // every width but the widest. Paste is a split button: the face
+                // pastes, the arrow opens the paste kinds with Paste Special... last.
+                {
+                    id: 'paste', label: 'Paste', title: 'Paste', keys: 'Ctrl+V', icon: 'paste',
+                    kind: 'dropdown', split: true, size: 'large',
+                    run: (cmd) => { void cmd.paste(); return true; },
+                    options: [
+                        { value: 'paste', label: 'Paste', keys: 'Ctrl+V', icon: 'paste' },
+                        { value: 'paste-formulas', label: 'Formulas', emits: 'paste-formulas' },
+                        { value: 'paste-values', label: 'Values', emits: 'paste-values' },
+                        { value: 'paste-formats', label: 'Formatting', emits: 'paste-formats' },
+                        { value: 'paste-transpose', label: 'Transpose', emits: 'paste-transpose' },
+                        { value: 'paste-special', label: 'Paste Special...', keys: 'Ctrl+Shift+V', emits: 'paste-special' },
+                    ],
+                },
+                // The same copy and cut as Ctrl+C and Ctrl+X: the selection, cell
+                // by cell through the sheet's clipboard hook. They went through the
+                // api's copyToClipboard, which is the export, and put the whole
+                // sheet with its column letters on the clipboard whatever was
+                // selected; Cut then blanked the selection by hand.
+                small(1, {
+                    id: 'cut', label: 'Cut', title: 'Cut', keys: 'Ctrl+X', icon: 'cut', kind: 'button',
+                    isEnabled: hasTarget,
+                    run: (cmd) => { void cmd.cut(); return true; },
+                }),
+                small(2, {
+                    id: 'copy', label: 'Copy', title: 'Copy', keys: 'Ctrl+C', icon: 'copy', kind: 'button',
+                    isEnabled: hasTarget,
+                    run: (cmd) => { cmd.copy(); return true; },
+                }),
+                // Raised: the shell holds the copied formats and paints them onto the
+                // next selection. The button reads pressed while it is armed.
+                small(3, {
+                    id: 'format-painter', label: 'Format Painter', title: 'Format Painter',
+                    icon: 'format-painter', kind: 'button', emits: 'format-painter',
+                }),
+            ],
+        },
+        {
+            id: 'font',
+            icon: 'font',
+            label: 'Font',
+            layout: 'flow',
+            launcher: 'format-cells',
+            items: [
+                small(1, {
+                    id: 'font-family', label: 'Font', title: 'Font', kind: 'select',
+                    options: FONT_FAMILIES, isEnabled: canFormat,
+                    current: (cmd) => activeEntry(cmd)?.fontFamily ?? '',
+                    run: (cmd, value) => applyFormat(cmd, { fontFamily: value || undefined }),
+                }),
+                small(1, {
+                    id: 'font-size', label: 'Size', title: 'Font Size', kind: 'select',
+                    options: FONT_SIZES.map((n) => ({ value: String(n), label: String(n) })),
+                    isEnabled: canFormat,
+                    current: (cmd) => String(activeEntry(cmd)?.fontSize ?? DEFAULT_FONT_SIZE),
+                    run: (cmd, value) => applyFormat(cmd, { fontSize: Number(value) === DEFAULT_FONT_SIZE ? undefined : Number(value) }),
+                }),
+                small(1, {
+                    id: 'font-grow', label: 'A', title: 'Increase Font Size', keys: 'Ctrl+Shift+>',
+                    icon: 'font-grow', kind: 'button', isEnabled: canFormat, run: fromCommand(nudgeFontSize(1)),
+                }),
+                small(1, {
+                    id: 'font-shrink', label: 'A', title: 'Decrease Font Size', keys: 'Ctrl+Shift+<',
+                    icon: 'font-shrink', kind: 'button', isEnabled: canFormat, run: fromCommand(nudgeFontSize(-1)),
+                }),
+                small(2, { id: 'bold', label: 'B', title: 'Bold', keys: 'Ctrl+B', ...styleToggle('bold') }),
+                small(2, { id: 'italic', label: 'I', title: 'Italic', keys: 'Ctrl+I', ...styleToggle('italic') }),
+                small(2, { id: 'underline', label: 'U', title: 'Underline', keys: 'Ctrl+U', ...styleToggle('underline') }),
+                small(2, { id: 'strike', label: 'S', title: 'Strikethrough', keys: 'Ctrl+5', ...styleToggle('strike') }),
+                small(2, {
+                    id: 'borders', label: 'Borders', title: 'Borders', icon: 'borders', kind: 'menu',
+                    options: BORDER_OPTIONS, isEnabled: canFormat,
+                    run: (cmd, value) => applyBorders(cmd, (value || 'bottom')),
+                }),
+                small(2, {
+                    id: 'fill', label: 'Fill Color', title: 'Fill Color', icon: 'fill-colour', kind: 'menu',
+                    palette: true, none: { value: 'transparent', label: 'No Fill' }, initial: '#FFFF00',
+                    options: ALL_COLOURS, isEnabled: canFormat,
+                    run: (cmd, value) => applyFormat(cmd, { fill: !value || value === 'transparent' ? undefined : value }),
+                }),
+                small(2, {
+                    id: 'text-colour', label: 'A', title: 'Font Color', icon: 'font-colour', kind: 'menu',
+                    palette: true, none: { value: 'inherit', label: 'Automatic' }, initial: '#FF0000',
+                    options: ALL_COLOURS, isEnabled: canFormat,
+                    run: (cmd, value) => applyFormat(cmd, { color: !value || value === 'inherit' ? undefined : value }),
+                }),
+            ],
+        },
+        {
+            id: 'alignment',
+            icon: 'align-center',
+            label: 'Alignment',
+            layout: 'flow',
+            launcher: 'format-cells',
+            items: [
+                small(1, {
+                    id: 'wrap', label: 'Wrap Text', title: 'Wrap Text', icon: 'wrap', kind: 'toggle', wide: true,
+                    run: (cmd) => toggleWrap(cmd),
+                    isOn: (cmd) => everyCellHas(cmd, (entry) => entry?.wrap === true),
+                    isEnabled: canFormat,
+                }),
+                small(2, alignItem('left', 'Align Left')),
+                small(2, alignItem('center', 'Center')),
+                small(2, alignItem('right', 'Align Right')),
+                // Excel's split button: the face merges and centres, the arrow
+                // opens the kinds. Raised for the shell, which keeps the merges
+                // per sheet and hands them to the grid.
+                small(3, {
+                    id: 'merge', label: 'Merge & Center', title: 'Merge & Center', icon: 'merge',
+                    kind: 'dropdown', split: true, wide: true, lit: 'merge-center',
+                    // Greyed on a protected sheet, as Excel's is: merging is a format.
+                    isEnabled: canFormat,
+                    run: (cmd) => raiseRibbonAction('merge-center', cmd),
+                    options: [
+                        { value: 'merge-center', label: 'Merge & Center', icon: 'merge', emits: 'merge-center' },
+                        { value: 'merge-across', label: 'Merge Across', emits: 'merge-across' },
+                        { value: 'merge-cells', label: 'Merge Cells', emits: 'merge-cells' },
+                        { value: 'unmerge-cells', label: 'Unmerge Cells', icon: 'unmerge', emits: 'unmerge-cells' },
+                    ],
+                }),
+            ],
+        },
+        {
+            id: 'number',
+            icon: 'number',
+            label: 'Number',
+            layout: 'flow',
+            launcher: 'format-cells',
+            items: [
+                small(1, {
+                    id: 'num-format', label: 'General', title: 'Number Format', kind: 'select',
+                    options: NUMBER_FORMATS, isEnabled: canFormat,
+                    // The category, not the exact pattern: a typed 12% carries 0%,
+                    // and Excel's combo calls that Percentage too. A pattern outside
+                    // every category shows as itself.
+                    current: (cmd) => {
+                        const fmt = activeEntry(cmd)?.numFmt;
+                        const { category } = formatCategory(fmt);
+                        return category === 'custom' ? fmt ?? 'general' : category;
+                    },
+                    run: (cmd, value) => applyFormat(cmd, { numFmt: FORMAT_PRESETS[value] }),
+                }),
+                small(2, presetItem('fmt-currency', '$', 'Accounting Number Format', 'currency', 'Ctrl+Shift+4')),
+                small(2, presetItem('fmt-percent', '%', 'Percent Style', 'percent', 'Ctrl+Shift+5')),
+                small(2, presetItem('fmt-number', ',', 'Comma Style', 'number', 'Ctrl+Shift+1')),
+                small(2, {
+                    id: 'dec-more', label: '.00', title: 'Increase Decimal', icon: 'dec-more', kind: 'button',
+                    isEnabled: canFormat, run: nudgeDecimals(1),
+                }),
+                small(2, {
+                    id: 'dec-less', label: '.0', title: 'Decrease Decimal', icon: 'dec-less', kind: 'button',
+                    isEnabled: canFormat, run: nudgeDecimals(-1),
+                }),
+            ],
+        },
+        {
+            id: 'cells',
+            icon: 'table',
+            label: 'Cells',
+            items: [
+                small(1, {
+                    id: 'insert', label: 'Insert', title: 'Insert Cells', keys: 'Ctrl+Shift++',
+                    icon: 'insert-cells', kind: 'button', wide: true,
+                    // A plain cell is ambiguous for the keystroke, which declines; the
+                    // button behaves as Excel's does with a cell selected and inserts
+                    // a row, shifting the sheet down.
+                    run: (cmd) => structural(cmd, 'insert') || insertRows(cmd),
+                    isEnabled: canRestructure,
+                }),
+                small(2, {
+                    id: 'delete', label: 'Delete', title: 'Delete Cells', keys: 'Ctrl+-',
+                    icon: 'delete-cells', kind: 'button', wide: true,
+                    run: (cmd) => structural(cmd, 'delete') || deleteRows(cmd),
+                    isEnabled: canRestructure,
+                }),
+                // Excel's Format menu: Cell Size, Visibility, and Format Cells at
+                // the end. Each entry is raised for the shell, which owns the size
+                // dialogs and keeps hidden lines per sheet.
+                small(3, {
+                    id: 'format', label: 'Format', title: 'Format', icon: 'format-cells', kind: 'dropdown', wide: true,
+                    options: [
+                        { value: 'cell-size', label: 'Cell Size', heading: true },
+                        { value: 'row-height', label: 'Row Height...', emits: 'row-height' },
+                        { value: 'autofit-rows', label: 'AutoFit Row Height', emits: 'autofit-rows' },
+                        { value: 'column-width', label: 'Column Width...', emits: 'column-width' },
+                        { value: 'autofit-columns', label: 'AutoFit Column Width', emits: 'autofit-columns' },
+                        { value: 'visibility', label: 'Visibility', heading: true },
+                        { value: 'hide-rows', label: 'Hide Rows', keys: 'Ctrl+9', emits: 'hide-rows' },
+                        { value: 'hide-columns', label: 'Hide Columns', keys: 'Ctrl+0', emits: 'hide-columns' },
+                        { value: 'unhide-rows', label: 'Unhide Rows', keys: 'Ctrl+Shift+9', emits: 'unhide-rows' },
+                        { value: 'unhide-columns', label: 'Unhide Columns', keys: 'Ctrl+Shift+0', emits: 'unhide-columns' },
+                        { value: 'protection', label: 'Protection', heading: true },
+                        { value: 'lock-cell', label: 'Lock Cell', icon: 'lock', emits: 'toggle-lock', toggle: true },
+                        { value: 'format-cells', label: 'Format Cells...', keys: 'Ctrl+1', emits: 'format-cells' },
+                    ],
+                }),
+            ],
+        },
+        {
+            // Excel's Styles group, the part with something behind it: one large
+            // Conditional Formatting dropdown. Its entries are raised for the
+            // shell, which owns the small dialogs and the rules per sheet; the
+            // headings are Excel's submenus, flattened.
+            id: 'styles',
+            icon: 'cf',
+            label: 'Styles',
+            items: [
+                {
+                    id: 'conditional-formatting', label: 'Conditional Formatting', title: 'Conditional Formatting',
+                    icon: 'cf', kind: 'dropdown', size: 'large',
+                    options: [
+                        { value: 'h', label: 'Highlight Cells Rules', heading: true },
+                        { value: 'cf-greater', label: 'Greater Than...', icon: 'cf-greater', emits: 'cf-greater' },
+                        { value: 'cf-less', label: 'Less Than...', icon: 'cf-less', emits: 'cf-less' },
+                        { value: 'cf-between', label: 'Between...', icon: 'cf-between', emits: 'cf-between' },
+                        { value: 'cf-equal', label: 'Equal To...', icon: 'cf-equal', emits: 'cf-equal' },
+                        { value: 'cf-text', label: 'Text that Contains...', icon: 'cf-text', emits: 'cf-text' },
+                        { value: 'cf-duplicates', label: 'Duplicate Values...', icon: 'cf-duplicates', emits: 'cf-duplicates' },
+                        { value: 't', label: 'Top/Bottom Rules', heading: true },
+                        { value: 'cf-top10', label: 'Top 10 Items...', icon: 'cf-top', emits: 'cf-top10' },
+                        { value: 'cf-bottom10', label: 'Bottom 10 Items...', icon: 'cf-bottom', emits: 'cf-bottom10' },
+                        { value: 'cf-above-average', label: 'Above Average...', icon: 'cf-above', emits: 'cf-above-average' },
+                        { value: 'cf-below-average', label: 'Below Average...', icon: 'cf-below', emits: 'cf-below-average' },
+                        { value: 'b', label: 'Data Bars, Color Scales, Icon Sets', heading: true },
+                        { value: 'cf-data-bar', label: 'Data Bar', icon: 'cf-bar', emits: 'cf-data-bar' },
+                        { value: 'cf-color-scale-3', label: 'Green - Yellow - Red Color Scale', icon: 'cf-scale', emits: 'cf-color-scale-3' },
+                        { value: 'cf-color-scale-2', label: 'Green - White Color Scale', icon: 'cf-scale', emits: 'cf-color-scale-2' },
+                        { value: 'cf-icon-set', label: 'Icon Set (3 Arrows)', icon: 'cf-icons', emits: 'cf-icon-set' },
+                        { value: 'c', label: 'Clear Rules', heading: true },
+                        { value: 'cf-clear-selection', label: 'Clear Rules from Selected Cells', emits: 'cf-clear-selection' },
+                        { value: 'cf-clear-sheet', label: 'Clear Rules from Entire Sheet', emits: 'cf-clear-sheet' },
+                        { value: 'm', label: 'Manage', heading: true },
+                        { value: 'cf-manage', label: 'Manage Rules...', emits: 'cf-manage' },
+                    ],
+                },
+            ],
+        },
+        {
+            id: 'editing',
+            icon: 'find',
+            label: 'Editing',
+            items: [
+                // Undo and Redo open the group as a column of two small icons, the
+                // way Cut and Copy stand beside Paste; the owner wanted them here
+                // rather than in a group of their own.
+                small(1, {
+                    id: 'undo', label: 'Undo', title: 'Undo', keys: 'Ctrl+Z', icon: 'undo', kind: 'button',
+                    isEnabled: (cmd) => cmd.api.canUndo(),
+                    run: (cmd) => cmd.api.undo(),
+                }),
+                small(2, {
+                    id: 'redo', label: 'Redo', title: 'Redo', keys: 'Ctrl+Y', icon: 'redo', kind: 'button',
+                    isEnabled: (cmd) => cmd.api.canRedo(),
+                    run: (cmd) => cmd.api.redo(),
+                }),
+                small(1, {
+                    id: 'autosum', label: 'AutoSum', title: 'AutoSum', keys: 'Alt+=',
+                    icon: 'autosum', kind: 'button', wide: true, run: fromCommand(autoSum),
+                }),
+                small(2, {
+                    id: 'fill-down', label: 'Fill Down', title: 'Fill Down', keys: 'Ctrl+D',
+                    icon: 'fill-down', kind: 'button', wide: true, run: (cmd) => fillDown(cmd),
+                }),
+                small(3, {
+                    id: 'fill-right', label: 'Fill Right', title: 'Fill Right', keys: 'Ctrl+R',
+                    icon: 'fill-right', kind: 'button', wide: true, run: (cmd) => fillRight(cmd),
+                }),
+                small(1, {
+                    id: 'clear-formats', label: 'Clear', title: 'Clear Formats (keeps values)',
+                    icon: 'clear', kind: 'button', wide: true, isEnabled: canFormat,
+                    run: clearFormats,
+                }),
+                small(2, {
+                    id: 'filter', label: 'Filter', title: 'Filter', keys: 'Ctrl+Shift+L',
+                    icon: 'filter', kind: 'toggle', wide: true, emits: 'toggle-filter',
+                }),
+                small(3, {
+                    id: 'find', label: 'Find & Select', title: 'Find and Replace', keys: 'Ctrl+H',
+                    icon: 'find', kind: 'button', wide: true, emits: 'find-replace',
+                }),
+            ],
+        },
+    ],
+};
+const INSERT = {
+    id: 'insert',
+    label: 'Insert',
+    groups: [
+        {
+            id: 'tables',
+            icon: 'table',
+            label: 'Tables',
+            items: [
+                { id: 'table', label: 'Table', title: 'Format the selection as a table', keys: 'Ctrl+T', icon: 'table', kind: 'button', size: 'large', emits: 'insert-table' },
+            ],
+        },
+        {
+            id: 'charts',
+            icon: 'chart',
+            label: 'Charts',
+            items: [
+                { id: 'chart', label: 'Chart', title: 'Chart the selected range', icon: 'chart', kind: 'button', size: 'large', emits: 'insert-chart' },
+            ],
+        },
+        {
+            id: 'insert-cells',
+            icon: 'insert-cells',
+            label: 'Cells',
+            items: [
+                small(1, {
+                    id: 'insert-rows', label: 'Insert', title: 'Insert rows or columns', icon: 'insert-cells', kind: 'button', wide: true,
+                    run: (cmd) => structural(cmd, 'insert') || insertRows(cmd),
+                    isEnabled: canRestructure,
+                }),
+                small(2, {
+                    id: 'delete-rows', label: 'Delete', title: 'Delete rows or columns', icon: 'delete-cells', kind: 'button', wide: true,
+                    run: (cmd) => structural(cmd, 'delete') || deleteRows(cmd),
+                    isEnabled: canRestructure,
+                }),
+            ],
+        },
+        {
+            id: 'insert-function',
+            icon: 'function',
+            label: 'Functions',
+            items: [
+                { id: 'function', label: 'Insert Function', title: 'Insert Function', keys: 'Shift+F3', icon: 'function', kind: 'button', size: 'large', emits: 'insert-function' },
+            ],
+        },
+        {
+            id: 'insert-sheet',
+            icon: 'new-sheet',
+            label: 'Sheets',
+            items: [
+                {
+                    id: 'new-sheet', label: 'New Sheet', title: 'New sheet', keys: 'Shift+F11',
+                    icon: 'new-sheet', kind: 'button', size: 'large',
+                    isEnabled: () => getWorkbook() !== null,
+                    run: () => {
+                        const wb = getWorkbook();
+                        if (!wb)
+                            return false;
+                        wb.addSheet();
+                        return true;
+                    },
+                },
+            ],
+        },
+    ],
+};
+const FORMULAS = {
+    id: 'formulas',
+    label: 'Formulas',
+    groups: [
+        {
+            id: 'function-library',
+            icon: 'function',
+            label: 'Function Library',
+            items: [
+                { id: 'f-insert', label: 'Insert Function', title: 'Insert Function', keys: 'Shift+F3', icon: 'function', kind: 'button', size: 'large', emits: 'insert-function' },
+                { id: 'f-autosum', label: 'AutoSum', title: 'AutoSum', keys: 'Alt+=', icon: 'autosum', kind: 'button', size: 'large', run: fromCommand(autoSum) },
+            ],
+        },
+        {
+            id: 'defined-names',
+            icon: 'name-manager',
+            label: 'Defined Names',
+            items: [
+                { id: 'name-manager', label: 'Name Manager', title: 'Name Manager', keys: 'Ctrl+F3', icon: 'name-manager', kind: 'button', size: 'large', emits: 'name-manager' },
+            ],
+        },
+        {
+            id: 'auditing',
+            icon: 'show-formulas',
+            label: 'Formula Auditing',
+            items: [
+                small(1, { id: 'show-formulas', label: 'Show Formulas', title: 'Show formulas instead of their results', keys: 'Ctrl+`', icon: 'show-formulas', kind: 'toggle', wide: true, emits: 'toggle-formulas' }),
+            ],
+        },
+        {
+            id: 'calculation',
+            icon: 'calculate',
+            label: 'Calculation',
+            items: [
+                { id: 'recalc', label: 'Calculate Now', title: 'Recalculate the workbook', keys: 'F9', icon: 'calculate', kind: 'button', size: 'large', emits: 'recalculate' },
+                small(1, { id: 'goal-seek-f', label: 'Goal Seek', title: 'Goal Seek', icon: 'goal-seek', kind: 'button', wide: true, emits: 'goal-seek' }),
+            ],
+        },
+    ],
+};
+const DATA = {
+    id: 'data',
+    label: 'Data',
+    groups: [
+        {
+            id: 'sort-filter',
+            icon: 'filter',
+            label: 'Sort & Filter',
+            items: [
+                small(1, { id: 'sort-asc', label: 'Sort A to Z', title: 'Sort A to Z', icon: 'sort-asc', kind: 'button', emits: 'sort-asc' }),
+                small(2, { id: 'sort-desc', label: 'Sort Z to A', title: 'Sort Z to A', icon: 'sort-desc', kind: 'button', emits: 'sort-desc' }),
+                { id: 'filter-data', label: 'Filter', title: 'Filter', keys: 'Ctrl+Shift+L', icon: 'filter', kind: 'toggle', size: 'large', emits: 'toggle-filter' },
+            ],
+        },
+        {
+            id: 'data-tools',
+            icon: 'text-to-columns',
+            label: 'Data Tools',
+            items: [
+                { id: 'text-to-columns', label: 'Text to Columns', title: 'Split the selected column on a delimiter', icon: 'text-to-columns', kind: 'button', size: 'large', emits: 'text-to-columns' },
+                { id: 'remove-duplicates', label: 'Remove Duplicates', title: 'Remove duplicate rows', icon: 'remove-duplicates', kind: 'button', size: 'large', emits: 'remove-duplicates' },
+                { id: 'data-validation', label: 'Data Validation', title: 'Data Validation: what may be typed into the selected cells', icon: 'validation', kind: 'button', size: 'large', emits: 'data-validation' },
+            ],
+        },
+        {
+            id: 'forecast',
+            icon: 'goal-seek',
+            label: 'Forecast',
+            items: [
+                { id: 'goal-seek', label: 'Goal Seek', title: 'Change one input until a formula hits a target', icon: 'goal-seek', kind: 'button', size: 'large', emits: 'goal-seek' },
+            ],
+        },
+    ],
+};
+function toggleWrap(cmd) {
+    const target = getFormatTarget();
+    if (!target)
+        return false;
+    const rects = rectsOf(cmd);
+    if (!rects.length)
+        return false;
+    if (!formatAllowed(target, rects))
+        return false;
+    withFormatUndo(cmd, target, rects, () => target.store.toggle(rects, 'wrap', target.lookup));
+    target.onChange?.();
+    return true;
+}
+/**
+ * Excel's Review tab, the parts with something behind them. Comments are
+ * the sheet's notes: New Comment opens the editor on the active cell (and
+ * edits the one there), Delete, Previous and Next walk them, Show All
+ * Comments lists them. Protect Sheet and Unprotect Sheet are one slot, the
+ * shell leaving off whichever does not apply. There is no password, as the
+ * sheet documents.
+ */
+const REVIEW = {
+    id: 'review',
+    label: 'Review',
+    groups: [
+        {
+            id: 'comments',
+            icon: 'comment',
+            label: 'Comments',
+            items: [
+                { id: 'new-comment', label: 'New Comment', title: 'New Comment', keys: 'Shift+F2', icon: 'comment', kind: 'button', size: 'large', emits: 'new-comment' },
+                small(1, { id: 'delete-comment', label: 'Delete', title: 'Delete Comment', icon: 'comment-delete', kind: 'button', wide: true, emits: 'delete-comment' }),
+                small(2, { id: 'prev-comment', label: 'Previous', title: 'Previous Comment', icon: 'comment-prev', kind: 'button', wide: true, emits: 'prev-comment' }),
+                small(3, { id: 'next-comment', label: 'Next', title: 'Next Comment', icon: 'comment-next', kind: 'button', wide: true, emits: 'next-comment' }),
+                { id: 'toggle-comments', label: 'Show All Comments', title: 'Show All Comments', icon: 'comments-all', kind: 'toggle', size: 'large', emits: 'toggle-comments' },
+            ],
+        },
+        {
+            id: 'protect',
+            icon: 'protect',
+            label: 'Protect',
+            items: [
+                {
+                    id: 'protect-sheet', label: 'Protect Sheet', title: 'Protect Sheet: locked cells can no longer be changed',
+                    icon: 'protect', kind: 'button', size: 'large', emits: 'protect-sheet',
+                },
+                {
+                    id: 'unprotect-sheet', label: 'Unprotect Sheet', title: 'Unprotect Sheet',
+                    icon: 'unprotect', kind: 'button', size: 'large', emits: 'unprotect-sheet',
+                },
+            ],
+        },
+    ],
+};
+/**
+ * Excel's View tab, the part with something behind it: Window > Freeze
+ * Panes, Excel's dropdown of Freeze Panes / Freeze Top Row / Freeze First
+ * Column / Unfreeze Panes. Raised rather than run here: the sheet shell
+ * keeps the freeze per sheet and puts it back when the sheet comes up
+ * again.
+ */
+const VIEW = {
+    id: 'view',
+    label: 'View',
+    groups: [
+        {
+            id: 'show',
+            icon: 'gridlines',
+            label: 'Show',
+            items: [
+                small(1, { id: 'gridlines', label: 'Gridlines', title: 'Show or hide the gridlines', icon: 'gridlines', kind: 'toggle', wide: true, emits: 'toggle-gridlines' }),
+                small(2, { id: 'formula-bar', label: 'Formula Bar', title: 'Show or hide the formula bar', icon: 'formula-bar', kind: 'toggle', wide: true, emits: 'toggle-formula-bar' }),
+                small(3, { id: 'headings', label: 'Headings', title: 'Show or hide the row numbers and column letters', icon: 'headings', kind: 'toggle', wide: true, emits: 'toggle-headings' }),
+            ],
+        },
+        {
+            id: 'window',
+            icon: 'freeze',
+            label: 'Window',
+            items: [
+                {
+                    id: 'freeze', label: 'Freeze Panes', title: 'Freeze Panes', icon: 'freeze', kind: 'dropdown', size: 'large',
+                    options: [
+                        { value: 'freeze-panes', label: 'Freeze Panes', icon: 'freeze', emits: 'freeze-panes' },
+                        { value: 'freeze-top-row', label: 'Freeze Top Row', emits: 'freeze-top-row' },
+                        { value: 'freeze-first-column', label: 'Freeze First Column', emits: 'freeze-first-column' },
+                        { value: 'unfreeze-panes', label: 'Unfreeze Panes', icon: 'unfreeze', emits: 'unfreeze-panes' },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export const RIBBON_TABS = [HOME, INSERT, FORMULAS, DATA, REVIEW, VIEW];
+/** Every item across every tab, for tests and for a command palette. */
+export function ribbonItems() {
+    return RIBBON_TABS.flatMap((tab) => tab.groups.flatMap((group) => group.items));
+}