flexdesk 0.17.0 → 0.17.2

package/src/ui/components/data_table.js

@@ -4,7 +4,7 @@
  * Unified, reusable data table component with support for:
  * - Pagination (first/prev/next/last/jump to row)
  * - Row selection (single, range with Shift, toggle with Ctrl/Cmd)
- * - Keyboard shortcuts (Ctrl+A, Ctrl+C, Shift+Ctrl+C, Esc)
+ * - Keyboard shortcuts (Ctrl+A, Ctrl+C, Shift+Ctrl+C outside cell mode, Esc)
  * - Context menu (copy as TSV/CSV)
  * - Column sorting (internal or external via callback)
  * - Column drag-to-resize, and double-click-to-auto-size on the same grip
@@ -27,6 +27,7 @@ import {
 import { isRowActivation, isRowControl } from './row_activation.js';
 import { createChipsFilter } from './table_filter_chips.js';
 import { CellGrid } from './cell_grid.js';
+import { toTSV } from './tsv.js';
 import { ColumnReorder, cellOrder, isColumnOrder, moveInOrder, naturalOrder } from './column_order.js';
 import { ColumnGroups } from './column_groups.js';
 import { Crosstab } from './crosstab.js';
@@ -415,7 +416,10 @@ const AUTOSIZE_MAX_PX = 520;
  * ── STORY-0003, every one of them off unless asked for ─────────────────────
  * @property {'rows'|'cells'} [selectionMode='rows'] - 'cells': CELL MODE (cell_grid.js, over cell_selection.js). A click selects one cell and puts the CURSOR on it, Shift+click selects the range from the anchor to it; every cell of the range is drawn `twm-dt-cell--selected` and the cursor `twm-dt-cell--cursor` (rows are not lit). On the focused table the arrows move the cursor (Shift extends), Ctrl+arrow jumps to the edge of the block of filled cells, Home/End go to the row's ends (Ctrl: the page's corners), Tab moves right and wraps to the next row (Shift+Tab back), Ctrl+A selects every cell of the page and Escape collapses the range onto the cursor. The cursor stays on the page drawn and is scrolled into view (under `virtualize` its row is drawn). `getSelection()` still answers ROWS — the original indices the range touches — and Ctrl+C copies those rows as before. A cell is `{row, col}`: `row` the position in the order shown (`getDisplayedRows()`), `col` the data column. Fixed for the table's life; `selectToggle`, `selectMode` and `keyboardNav` beside it are ignored with a console warning. See `getCellSelection`, `setCellSelection`.
  * @property {boolean|number[]|Function} [editable=false] - Cell mode only (a warning, and ignored, without it). Which cells open an EDITOR: `true` every one, an array of data column indices, or `(colIdx, row, rowIdx) => boolean`. F2, Enter, a double-click or a printable key (which the editor starts with) opens it on the cursor cell; in it Enter commits and moves down, Tab commits and moves right, Escape restores the cell and calls nothing, and the focus leaving commits. While it is open a `render()` (a `setData` included) waits, and runs when it closes; its row leaving the virtual window commits it. An editor with no `getValue` (a factory's `{el}` around an element that is not an input, select or textarea) has no value to commit: Enter and Tab do nothing, the focus leaving does nothing, and its row leaving the window CANCELS it — it calls `commit(value)` itself.
- * @property {Object} [editors] - `{[colIdx|type]: factory}`, the editor for a column (by index first, then by its type: `columnTypes`' or the detected 'num'/'text'). A factory is `({value, row, rowIdx, colIdx, column: {index, header, type}, initialText, commit(value), cancel()}) => Element | {el, getValue?, focus?, destroy?}`; an input, select or textarea returned as it is commits its `value`. Absent: a text box (cell_editor_host.js `createTextEditor`), which commits the value unchanged when left as it was.
+ * @property {Object} [editors] - `{[colIdx|type]: factory}`, the editor for a column (by index first, then by its type: `editTypes`', else `columnTypes`', else the detected 'num'/'text' — as named, then as the built-in editors name it, 'num' being 'number' and 'date' 'datetime'). A factory is `({value, row, rowIdx, colIdx, column: {index, header, type, ...editTypes' entry}, locale, utc, messages, initialText, commit(value, move?), cancel()}) => Element | {el, getValue?, parse?, multiline?, focus?, destroy?}`; an input, select or textarea returned as it is commits its `value`. Absent: the built-in editor for the column's type (cell_editors.js `CELL_EDITORS`: text, multitext, number, bool, choice, datetime), else a text box (cell_editor_host.js `createTextEditor`). Every editor commits the value unchanged when left as it was. An injected editor replaces the built-in one for its type (or column) only.
+ * @property {Array|Object} [editTypes] - STORY-0087. Each column's EDITOR type, by position (array) or by data column index (object): a name ('text', 'multitext', 'number', 'bool', 'choice', 'datetime', or any name `editors` is keyed by) or `{type, options?, allowOther?, rows?}`. Unset, a column's editor type is its `columnTypes` type, else the detected one. 'choice' offers `options` (values, or `{value, label}`) through an AutocompleteField and refuses other text unless `allowOther`; 'multitext' is a text area of `rows` lines (3). Only editing reads it: drawing, sorting and filtering are as without it.
+ * @property {string} [locale] - STORY-0087. The locale the built-in number and datetime editors read and show their text in (Intl's; unset: the runtime's): '1.234,56' is 1234.56 under 'de-DE', '1,234.56' under 'en-US'; '31/12/2026' is a date under 'en-GB'. A datetime also takes ISO 8601 in any locale.
+ * @property {Object} [editorMessages] - STORY-0087. Words for the built-in editors' refusals, over `EDITOR_MESSAGES`: `{number, datetime, bool, choice}`.
  * @property {Function} [onCellCommit] - `({rowIdx, colIdx, value, previous}) => void | {ok, error?} | Promise<…>`, once per commit (not for a value left as the cell showed it; `previous` is the value the row holds). Resolving `{ok: false, error}`, rejecting or throwing leaves the typed value in the cell drawn `twm-dt-cell--error` with the message as its `title` and `data-error`; until it settles the cell is `twm-dt-cell--pending`. Otherwise the value is written into the row the table holds for `rowIdx` when it settles (`rows[rowIdx][colIdx]`) and drawn. Committing a refused cell back to the row's value clears the mark without a call. New rows (`setData({rows})`) drop the marks.
  * @property {Function} [onCellSelectionChange] - `(getCellSelection()) => void`, after every change of the cells selected.
  * @property {Function} [headerMenu] - `(colIdx, {colIdx, header, hiddenColumns, table}) => items`, asked on a right-click on a data column's header (or its filter cell). The items (`{label, action, icon?, disabled?, danger?, title?}` or `{separator: true}`) open the table's menu; with `columnChooser` the chooser's items follow behind a separator. `[]` or `null` shows what would show without the hook: the chooser, or the page's own menu.
@@ -427,6 +431,9 @@ const AUTOSIZE_MAX_PX = 520;
  * @property {Function} [onCommit] - With `staged`: `({edits}) => void | {ok?, error?, errors?} | Promise<…>`, called once by `commit()` with every staged cell as `{rowIdx, colIdx, value, previous}` (by row, then column; `previous` is the value the row holds). Resolving `{errors: [{rowIdx, colIdx, error}]}` (non-empty) marks each of those cells `twm-dt-cell--error` with the message as its `title` and `data-error`, and every staged value stays; `{ok: false, error}`, a rejection or a throw marks every staged cell with the message. Anything else is success: the values are written into the rows the table holds, and the staged cells and the ring are cleared. While it is out no editor opens and Ctrl+Z, Ctrl+Y and `discard()` do nothing.
  * @property {Function} [onStagedChange] - With `staged`: `({count, canUndo, canRedo, committing}) => void` after every change of the staged cells.
  * @property {boolean} [fillHandle=false] - STORY-0089. With `staged` (a warning, and ignored, without it): a FILL HANDLE (fill_handle.js) on the bottom-right corner of the cell range (`.twm-dt-fill-handle`, in the corner cell). Dragging it up, down, left or right over the cells beyond the range previews them `twm-dt-cell--fill-preview` and, on release, stages their values as ONE undo entry: each column of the range (each row, filling sideways) is continued by `projectSeries` (series.js) — one cell repeats, numbers, dates and "Item 1"-style texts a constant step apart continue, anything else repeats in a cycle — and Ctrl (Cmd) held at release repeats the block instead. A target cell `editable` refuses is skipped and drawn `twm-dt-cell--fill-skipped` until the selection moves. The range then covers what was filled. Escape during the drag cancels it. See `fill`.
+ * @property {boolean} [pasteable=false] - STORY-0090. With `staged` (a warning, and ignored, without it): Ctrl+V on the focused table (the browser's `paste` event; `paste(text)` from code) pastes a tab-separated block — what Excel and Google Sheets copy, read by `fromTSV` (tsv.js) — at the CURSOR cell, filling right over the columns shown and down over the rows in the order shown (cell_paste.js). Each value is read by its column's editor's parse (the built-in editor's for its type, or an injected `editors` factory's own `parse` property), and every cell that reads is staged as ONE undo entry; the range then covers the block, the cursor where it began. Columns past the last shown one are dropped with a warning naming how many (a console warning and a 'warn' toast). A value that does not parse marks its cell `twm-dt-cell--error` (message as `title` and `data-error`, the text kept) and the rest still stages; a cell `editable` refuses is skipped and drawn `twm-dt-cell--paste-skipped` until the selection moves. Rows past the last loaded row ask `onPasteOverrun`.
+ * @property {Function} [onPasteOverrun] - With `pasteable`: `({rows}) => boolean | Promise<boolean>`, asked when a paste runs `rows` rows past the last loaded row (the last row in the order shown; for a server's page, the last row it sent). Anything but `true` stages NOTHING; `true` stages the rows that fit and hands the extra ones to `onRowsAppend`. Without it, such a paste stages nothing, with a console warning.
+ * @property {Function} [onRowsAppend] - With `pasteable`: `({rows, errors}) => void | Promise`, after `onPasteOverrun` said `true`: `rows` the extra rows as data rows (one array per row, as long as `headers`, every pasted column read by its parse, the others null) and `errors` the values that did not read (`{row, colIdx, text, error}`, `row` an index into `rows`; that cell is null). Adding them is the consumer's; the rows that fit are staged once it settles. Without it, the extra rows are dropped with a warning.
  * @property {string|Function} [stagedRefusal] - With `staged`: the reason a frozen control carries, or `(count) => string`. Absent: "Sorting, filtering and paging are held while N changes are not committed. Commit or discard them first."
  *
  * ── STORY-0066, every one of them off unless asked for. THE CONSUMER OWNS THE DATA: each edit is a call, answered with `setData` ──
@@ -450,9 +457,16 @@ const AUTOSIZE_MAX_PX = 520;
  *  it were this tall. A ResizeObserver corrects it the moment a real size exists. */
 const VIRTUAL_FALLBACK_VIEWPORT_PX = 1000;
 
-/** The copy menu's two items — the whole right-click menu of a table without
- *  `contextMenuItems`, and its tail with them (STORY-0010). */
-const COPY_MENU_HTML = `
+/** The copy menu — the whole right-click menu of a table without
+ *  `contextMenuItems`, and its tail with them (STORY-0010). Row mode has two
+ *  items, "Copy Row(s)" and "Copy as CSV"; cell mode (STORY-0085) has one,
+ *  "Copy Cells", and no CSV copy. */
+const COPY_CELLS_MENU_HTML = `
+            <div class="twm-context-menu-item" data-action="copy-tsv">
+                <span class="material-symbols-outlined">content_copy</span>
+                <span class="label">Copy Cells</span>
+            </div>`;
+const copyMenuHtml = (cells) => cells ? COPY_CELLS_MENU_HTML : `
             <div class="twm-context-menu-item" data-action="copy-tsv">
                 <span class="material-symbols-outlined">content_copy</span>
                 <span class="label">Copy Row(s)</span>
@@ -600,6 +614,9 @@ export class DataTable {
             selectionMode: 'rows',
             editable: false,
             editors: null,
+            editTypes: null,
+            locale: null,
+            editorMessages: null,
             onCellCommit: null,
             onCellSelectionChange: null,
             headerMenu: null,
@@ -624,6 +641,10 @@ export class DataTable {
             onRowDelete: null,
             // STORY-0089. Off — no fill handle — until set.
             fillHandle: false,
+            // STORY-0090. Off — Ctrl+V is not the table's — until set.
+            pasteable: false,
+            onPasteOverrun: null,
+            onRowsAppend: null,
             ...config,
         };
 
@@ -652,6 +673,9 @@ export class DataTable {
         if (this.config.fillHandle && !this._cellGrid) {
             console.warn('[DataTable] `fillHandle` needs `staged`; ignored.');
         }
+        if (this.config.pasteable && !this._cellGrid) {
+            console.warn('[DataTable] `pasteable` needs `staged`; ignored.');
+        }
         // STORY-0091. A crosstab has no group row: its spans are `headerRows`.
         if (Array.isArray(this.config.columnGroups) && this.config.columnGroups.length && this._crosstab()) {
             console.warn('[DataTable] `columnGroups` cannot be combined with `crosstab` (use crosstab.headerRows); ignored.');
@@ -1595,6 +1619,25 @@ export class DataTable {
         return this._cellGrid?.fill ? this._cellGrid.fill.fill(to, { forceCopy }) : null;
     }
 
+    /**
+     * STORY-0090. Paste tab-separated `text` at the cursor cell, as Ctrl+V
+     * does: each value read by its column's parse, staged as ONE undo entry.
+     * Resolves `{rows, cols, staged, skipped, refused, droppedColumns,
+     * appended}` — `staged` the NUMBER of cells that changed, `skipped` the
+     * cells `editable` refused (`{row, col, rowIdx}`), `refused` the values
+     * that did not parse (`{row, col, rowIdx, text, error}`),
+     * `droppedColumns` the columns past the last one, `appended` the rows
+     * handed to `onRowsAppend` — or null when nothing was pasted (no
+     * `pasteable`, empty text, no cursor, an editor open, a commit or another
+     * paste out, an overrun `onPasteOverrun` did not accept).
+     *
+     * @param {string} text
+     * @returns {Promise<object|null>}
+     */
+    paste(text) {
+        return this._cellGrid?.paste ? this._cellGrid.paste.paste(text) : Promise.resolve(null);
+    }
+
     /** Why sort, filters and pages are held — a staged edit — or null; with
      *  a reason, `what` is refused out loud. */
     _stagedRefusal(what) {
@@ -2145,10 +2188,21 @@ export class DataTable {
     }
 
     /**
-     * Copy selected rows to clipboard
+     * Copy selected rows to clipboard — in cell mode (STORY-0085) the cells
+     * selected, or the cursor cell alone, as tab-separated raw values with no
+     * header line; cell mode has no CSV copy
      * @param {'tsv'|'csv'} [format='tsv'] - Output format
      */
     async copyToClipboard(format = 'tsv') {
+        // STORY-0085. Cell mode copies the cells selected, not their rows,
+        // and only as TSV.
+        if (this._cellGrid) {
+            if (format === 'csv') {
+                console.warn('[DataTable] copyToClipboard: cell mode has no CSV copy; nothing copied');
+                return;
+            }
+            return this._copyCells();
+        }
         const indices = this.getSelection();
         if (indices.length === 0) {
             this._notify('Copy', 'No rows selected.', 'warn');
@@ -2191,6 +2245,36 @@ export class DataTable {
         this._hideContextMenu();
     }
 
+    /**
+     * STORY-0085. Cell mode's copy: the range (or the cursor cell alone), its
+     * raw values as TSV — Excel's quoting, `tsv.js` — with no header line.
+     */
+    async _copyCells() {
+        const matrix = this._cellGrid.copyMatrix();
+        if (!matrix || !matrix.length) {
+            this._notify('Copy', 'No cells selected.', 'warn');
+            this._hideContextMenu();
+            return;
+        }
+        const text = toTSV(matrix);
+        let ok = false;
+        try {
+            await navigator.clipboard.writeText(text);
+            ok = true;
+        } catch (_) {
+            ok = this._fallbackCopy(text);
+        }
+        if (ok) {
+            const n = matrix.length;
+            const m = matrix[0].length;
+            const what = n * m === 1 ? '1 cell' : `${n} × ${m} cells`;
+            this._notify('Copy', `Copied ${what}.`, 'info');
+        } else {
+            this._notify('Copy', 'Clipboard unavailable.', 'warn');
+        }
+        this._hideContextMenu();
+    }
+
     /**
      * Download all data as CSV
      * @param {string} [filename='data.csv'] - Filename for download
@@ -7047,7 +7131,9 @@ export class DataTable {
                     } else if (key === 'a' && selectable) {
                         event.preventDefault();
                         this._selectAllShown();
-                    } else if (key === 'c') {
+                    } else if (key === 'c' && !(event.shiftKey && this._cellGrid)) {
+                        // STORY-0085. Cell mode binds Ctrl+C only: it has no
+                        // CSV copy, so Ctrl+Shift+C is left to the page.
                         event.preventDefault();
                         this.copyToClipboard(event.shiftKey ? 'csv' : 'tsv');
                     }
@@ -7198,7 +7284,7 @@ export class DataTable {
         menu.style.display = 'none';
         menu.style.position = 'fixed';
         menu.style.zIndex = '10001';
-        menu.innerHTML = COPY_MENU_HTML;
+        menu.innerHTML = copyMenuHtml(!!this._cellGrid);
         document.body.appendChild(menu);
 
         menu.addEventListener('click', (event) => {
@@ -7371,7 +7457,7 @@ export class DataTable {
         this._contextMenuCtx = custom ? custom.ctx : null;
         if (!custom) {
             if (this._contextMenuCustom) {
-                menu.innerHTML = COPY_MENU_HTML;
+                menu.innerHTML = copyMenuHtml(!!this._cellGrid);
                 this._contextMenuCustom = false;
             }
             return;
@@ -7416,7 +7502,7 @@ export class DataTable {
                 sep.className = 'twm-context-menu__separator';
                 menu.appendChild(sep);
             }
-            menu.insertAdjacentHTML('beforeend', COPY_MENU_HTML);
+            menu.insertAdjacentHTML('beforeend', copyMenuHtml(!!this._cellGrid));
         }
     }
 

package/src/ui/components/settings_view.js

@@ -50,6 +50,20 @@
  * *Reset all* ask `confirm(…)` first (default `openConfirm`) and change
  * nothing unless it resolves true.
  *
+ * THE SIDEBAR ELSEWHERE (0.17.2). `sidebar: false` leaves the sidebar out:
+ * the view is the content alone. A `SettingsCategories` bound to it, mounted
+ * anywhere, draws the filter box, the categories and *Reset all* instead:
+ *
+ *   const view = new SettingsView({ store, eventBus, sidebar: false });
+ *   view.mount(pageHost);
+ *   const cats = new SettingsCategories({ view });
+ *   cats.mount(navigatorHost);
+ *
+ * Both draw from the view's state, so the filter text and the selected
+ * category are the same in both, whichever moved them; `view.subscribe(fn)`
+ * tells any other listener. *Reset all* there is `view.resetAll()`, so it asks
+ * to confirm as before.
+ *
  * Every word on screen that comes from the schema, the store or the user is
  * set as text, so a label or a query holding markup is shown as typed.
  *
@@ -58,7 +72,9 @@
  * + `.twm-settings__content` (`__header` > `__title`, `__description`,
  * `__reset-category`; `section.__group` > `__group-title` + `.__row`
  * [`--modified`] > `__info` (`__label`, `__marker`, `__description`,
- * `__path`) + `__control` + `__reset`; `__empty`).
+ * `__path`) + `__control` + `__reset`; `__empty`). A `SettingsCategories` is
+ * `.twm-settings-categories` > `.twm-settings__search`, `.twm-settings__nav`
+ * and `.twm-settings__reset-all`, the same parts as the sidebar's.
  */
 
 import { ComponentBase } from '../base/component_base.js';
@@ -121,6 +137,59 @@ function fitNumber(n, { min, max, step }) {
     return at(k);
 }
 
+// ── the sidebar's parts, drawn alike by SettingsView and SettingsCategories ──
+
+/** The filter box: `{ label, input }`; `onInput(text)` on every keystroke. */
+function filterBox(onInput) {
+    const label = el('label', 'twm-settings__search');
+    const input = el('input', 'twm-settings__search-input');
+    input.type = 'search';
+    input.placeholder = 'Filter settings…';
+    input.autocomplete = 'off';
+    input.spellcheck = false;
+    input.setAttribute('aria-label', 'Filter settings');
+    input.addEventListener('input', () => onInput(input.value));
+    label.append(icon('search'), input);
+    return { label, input };
+}
+
+/** The category list; `onSelect(id)` when a category is clicked. */
+function categoryNav(onSelect) {
+    const nav = el('nav', 'twm-settings__nav');
+    nav.setAttribute('aria-label', 'Settings categories');
+    nav.addEventListener('click', (e) => {
+        const btn = e.target.closest?.('[data-category]');
+        if (btn && nav.contains(btn)) onSelect(btn.dataset.category);
+    });
+    return nav;
+}
+
+/** Draw `categories` into `nav`, `active` (an id, or null) marked. */
+function paintCategories(nav, categories, active) {
+    const buttons = categories.map((cat) => {
+        const b = el('button', 'twm-settings__cat');
+        b.type = 'button';
+        b.dataset.category = cat.id;
+        if (cat.id === active) {
+            b.classList.add('twm-settings__cat--active');
+            b.setAttribute('aria-current', 'page');
+        }
+        b.append(icon(cat.icon || 'tune'), el('span', 'twm-settings__cat-label', cat.label ?? cat.id));
+        if (cat.description) b.title = String(cat.description);
+        return b;
+    });
+    nav.replaceChildren(...buttons);
+}
+
+/** The *Reset all* button; `onClick()` when pressed. */
+function resetAllButton(onClick) {
+    const b = el('button', 'twm-btn twm-settings__reset-all');
+    b.type = 'button';
+    b.append(icon('restart_alt'), el('span', '', 'Reset all'));
+    b.addEventListener('click', () => { onClick(); });
+    return b;
+}
+
 export class SettingsView extends ComponentBase {
     /**
      * @param {object}    o
@@ -130,10 +199,12 @@ export class SettingsView extends ComponentBase {
      * @param {string}   [o.category] the category shown first (default: the first)
      * @param {number}   [o.textDebounceMs]
      * @param {string}   [o.title='Settings']  the sidebar heading
+     * @param {boolean}  [o.sidebar=true]  false leaves the sidebar (filter,
+     *        categories, *Reset all*) out, for a `SettingsCategories` elsewhere
      */
     constructor({
         store, eventBus, confirm = openConfirm, category = null,
-        textDebounceMs = SETTINGS_TEXT_DEBOUNCE_MS, title = 'Settings', logger,
+        textDebounceMs = SETTINGS_TEXT_DEBOUNCE_MS, title = 'Settings', sidebar = true, logger,
     } = {}) {
         super({ eventBus, logger });
         if (!store || typeof store.getSchema !== 'function') {
@@ -148,6 +219,9 @@ export class SettingsView extends ComponentBase {
         this._query = '';
         this._debounceMs = textDebounceMs;
         this._title = title;
+        this._sidebar = sidebar !== false;
+        /** `fn({ category, query })` after the category, the filter or the categories change. */
+        this._listeners = new Set();
 
         this.root = null;
         this._nav = null;
@@ -166,39 +240,20 @@ export class SettingsView extends ComponentBase {
     mount(container) {
         if (this.root) return this.root;
         const root = el('div', 'twm-settings');
-        const side = el('aside', 'twm-settings__sidebar');
-        const head = el('div', 'twm-settings__sidebar-title');
-        head.append(icon('settings'), el('span', '', this._title));
-
-        const search = el('label', 'twm-settings__search');
-        const input = el('input', 'twm-settings__search-input');
-        input.type = 'search';
-        input.placeholder = 'Filter settings…';
-        input.autocomplete = 'off';
-        input.spellcheck = false;
-        input.setAttribute('aria-label', 'Filter settings');
-        input.addEventListener('input', () => this.setQuery(input.value));
-        search.append(icon('search'), input);
-        this._search = input;
-
-        const nav = el('nav', 'twm-settings__nav');
-        nav.setAttribute('aria-label', 'Settings categories');
-        nav.addEventListener('click', (e) => {
-            const btn = e.target.closest?.('[data-category]');
-            if (btn && nav.contains(btn)) this.selectCategory(btn.dataset.category);
-        });
-        this._nav = nav;
-
-        const resetAll = el('button', 'twm-btn twm-settings__reset-all');
-        resetAll.type = 'button';
-        resetAll.append(icon('restart_alt'), el('span', '', 'Reset all'));
-        resetAll.addEventListener('click', () => { this.resetAll(); });
-
-        side.append(head, search, nav, resetAll);
+        if (this._sidebar) {
+            const side = el('aside', 'twm-settings__sidebar');
+            const head = el('div', 'twm-settings__sidebar-title');
+            head.append(icon('settings'), el('span', '', this._title));
+            const search = filterBox((text) => this.setQuery(text));
+            this._search = search.input;
+            this._nav = categoryNav((id) => this.selectCategory(id));
+            side.append(head, search.label, this._nav, resetAllButton(() => this.resetAll()));
+            root.append(side);
+        }
 
         const content = el('div', 'twm-settings__content');
         this._content = content;
-        root.append(side, content);
+        root.append(content);
         this.root = root;
         container.appendChild(root);
         this._mounted = true;
@@ -211,6 +266,7 @@ export class SettingsView extends ComponentBase {
 
         this.#paintNav();
         this.#paintContent();
+        this.#notify();
         return root;
     }
 
@@ -220,6 +276,19 @@ export class SettingsView extends ComponentBase {
     /** The filter text. */
     getQuery() { return this._query; }
 
+    /** True while the filter is in effect (its trimmed text is not empty). */
+    isFiltering() { return this.#searching(); }
+
+    /**
+     * `fn({ category, query })` after every change of the category, the filter
+     * or the registered categories, until the view is disposed. Answers the
+     * unsubscribe.
+     */
+    subscribe(fn) {
+        this._listeners.add(fn);
+        return () => this._listeners.delete(fn);
+    }
+
     /** Show one category; clears the filter. */
     selectCategory(id) {
         if (!this.root) return;
@@ -229,6 +298,7 @@ export class SettingsView extends ComponentBase {
         if (this._search) this._search.value = '';
         this.#paintNav();
         this.#paintContent();
+        this.#notify();
     }
 
     /** Search every category; an empty query goes back to the category. */
@@ -239,6 +309,7 @@ export class SettingsView extends ComponentBase {
         if (this._search && this._search.value !== q) this._search.value = q;
         this.#paintNav();
         this.#paintContent();
+        this.#notify();
     }
 
     /** Reset one category after `confirm`; resolves true when it was reset. */
@@ -287,6 +358,7 @@ export class SettingsView extends ComponentBase {
         this._nav = null;
         this._content = null;
         this._search = null;
+        this._listeners.clear();
         super.dispose();
     }
 
@@ -310,12 +382,13 @@ export class SettingsView extends ComponentBase {
             || paths.some((p) => schema[p]?.category === active);
         if (touches) {
             this.#paintContent();
-            return;
+        } else {
+            // The slice's defaults may have moved values on screen; an edit still
+            // being typed is written first, so the sync shows it rather than drop it.
+            this.#flushAll();
+            this.#syncAll();
         }
-        // The slice's defaults may have moved values on screen; an edit still
-        // being typed is written first, so the sync shows it rather than drop it.
-        this.#flushAll();
-        this.#syncAll();
+        this.#notify();
     }
 
     /** True while a filter is in effect: the trimmed query is not empty. */
@@ -344,20 +417,14 @@ export class SettingsView extends ComponentBase {
     }
 
     #paintNav() {
-        const active = this.#searching() ? null : this.getCategory();
-        const buttons = this.store.getCategories().map((cat) => {
-            const b = el('button', 'twm-settings__cat');
-            b.type = 'button';
-            b.dataset.category = cat.id;
-            if (cat.id === active) {
-                b.classList.add('twm-settings__cat--active');
-                b.setAttribute('aria-current', 'page');
-            }
-            b.append(icon(cat.icon || 'tune'), el('span', 'twm-settings__cat-label', cat.label ?? cat.id));
-            if (cat.description) b.title = String(cat.description);
-            return b;
-        });
-        this._nav.replaceChildren(...buttons);
+        if (!this._nav) return;
+        paintCategories(this._nav, this.store.getCategories(), this.#searching() ? null : this.getCategory());
+    }
+
+    /** Tell the listeners, after the content is drawn (it settles the category). */
+    #notify() {
+        const state = { category: this.getCategory(), query: this._query };
+        for (const fn of [...this._listeners]) fn(state);
     }
 
     #paintContent() {
@@ -614,6 +681,80 @@ export class SettingsView extends ComponentBase {
     }
 }
 
+/**
+ * SettingsCategories — a SettingsView's filter box, category list and
+ * *Reset all*, mounted wherever the app wants them (0.17.2).
+ *
+ *   const view = new SettingsView({ store, eventBus, sidebar: false });
+ *   view.mount(pageHost);
+ *   const cats = new SettingsCategories({ view });
+ *   cats.mount(navigatorHost);
+ *   cats.dispose();   // before or with the view
+ *
+ * It holds no state of its own: typing in its filter is `view.setQuery()`,
+ * clicking a category `view.selectCategory()`, *Reset all* `view.resetAll()`
+ * (which asks the view's `confirm` first), and it redraws from the view on
+ * every `view.subscribe()` call. So the filter text and the selected category
+ * are always the view's, however either side moved them, and a category
+ * registered later joins the list. Its clicks and keystrokes act once the
+ * view is mounted.
+ *
+ * Markup: `.twm-settings-categories` > `.twm-settings__search` (>
+ * `__search-input`), `.twm-settings__nav` > `button.twm-settings__cat`
+ * [`--active`], `.twm-settings__reset-all`.
+ */
+export class SettingsCategories extends ComponentBase {
+    /**
+     * @param {object}       o
+     * @param {SettingsView} o.view  the view it lists the categories of
+     */
+    constructor({ view, logger } = {}) {
+        if (!(view instanceof SettingsView)) {
+            throw new TypeError('SettingsCategories: `view` must be a SettingsView');
+        }
+        super({ eventBus: view.eventBus, logger });
+        this.view = view;
+        this.root = null;
+        this._search = null;
+        this._nav = null;
+        this._unsubscribe = null;
+    }
+
+    /** Build the list into `container` (once). */
+    mount(container) {
+        if (this.root) return this.root;
+        const view = this.view;
+        const root = el('div', 'twm-settings-categories');
+        const search = filterBox((text) => view.setQuery(text));
+        this._search = search.input;
+        this._nav = categoryNav((id) => view.selectCategory(id));
+        root.append(search.label, this._nav, resetAllButton(() => view.resetAll()));
+        this.root = root;
+        container.appendChild(root);
+        this._mounted = true;
+        this._unsubscribe = view.subscribe(() => this.#paint());
+        this.#paint();
+        return root;
+    }
+
+    dispose() {
+        this._unsubscribe?.();
+        this._unsubscribe = null;
+        this.root?.remove();
+        this.root = null;
+        this._search = null;
+        this._nav = null;
+        super.dispose();
+    }
+
+    #paint() {
+        const view = this.view;
+        const q = view.getQuery();
+        if (this._search.value !== q) this._search.value = q;
+        paintCategories(this._nav, view.store.getCategories(), view.isFiltering() ? null : view.getCategory());
+    }
+}
+
 /**
  * A content factory for the shell: `(hostEl, props, ctx) -> { title, destroy }`.
  * `props.category` picks the category shown first.

package/src/ui/components/staged_edits.js

@@ -103,7 +103,12 @@ export class StagedEdits {
      * Returns whether anything changed.
      */
     stage(rowIdx, colIdx, value) {
-        if (this.committing || !this._stageOne(rowIdx, colIdx, value)) return false;
+        if (this.committing) return false;
+        const refusal = this._dropRefusal(rowIdx, colIdx);
+        if (!this._stageOne(rowIdx, colIdx, value)) {
+            if (refusal) this.grid._redraw(rowIdx, colIdx);
+            return false;
+        }
         this.grid._redraw(rowIdx, colIdx);
         this._changed();
         return true;
@@ -121,7 +126,9 @@ export class StagedEdits {
         this.history.beginGroup(label);
         try {
             for (const { rowIdx, colIdx, value } of cells) {
+                const refusal = this._dropRefusal(rowIdx, colIdx);
                 if (this._stageOne(rowIdx, colIdx, value)) { changed++; rows.add(rowIdx); }
+                else if (refusal) rows.add(rowIdx);
             }
         } finally {
             this.history.endGroup();
@@ -131,6 +138,17 @@ export class StagedEdits {
         return changed;
     }
 
+    /** STORY-0087. A text that did not parse stays in its cell, marked, in
+     *  the grid's own marks; anything staged into the cell ends that refusal,
+     *  the value its row holds included. Whether there was one. */
+    _dropRefusal(rowIdx, colIdx) {
+        const k = key(rowIdx, colIdx);
+        if (!this.grid.errors.has(k)) return false;
+        this.grid.errors.delete(k);
+        this.grid.latest.delete(k);
+        return true;
+    }
+
     /** One cell's new state and its delta in the ring; whether it changed. */
     _stageOne(rowIdx, colIdx, value) {
         const k = key(rowIdx, colIdx);