flexdesk 0.17.1 → 0.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.17.1",
+    "version": "0.17.2",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/tiling/command_palette.js

@@ -72,6 +72,17 @@
  *   drillLabel the Tab hint ("search rows"); Tab is offered only with it
  *   shortcut   a key binding drawn on the right
  *   verb       the Enter hint ('open' by default, 'run' for a command)
+ *   enabled    `() => boolean` (0.17.2). False: the row is still listed and
+ *              the arrows still reach it, but it is drawn greyed
+ *              (`twm-cmdpal__item--disabled`, aria-disabled="true") and
+ *              picking it — click, Enter, Ctrl/Shift+Enter — does nothing and
+ *              leaves the palette open. Asked on every draw and every pick.
+ *   disabledReason  the disabled row's tooltip (its `title`)
+ *
+ * A catalog source with `scopedOnly: true` (0.17.2) contributes no rows to a
+ * plain typed query, in either layout: its rows are listed only once its
+ * prefix has made the type chip (`help: solver`).
+ *
  * `hint` keeps its old meaning — drawn AND searched — for a row that sets
  * neither `context` nor `keywords`. A group's header is the taxonomy's
  * `plural` for the kind, else its `label`.
@@ -281,8 +292,7 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
         const render = () => {
             if (grouped) { renderGrouped(); return; }
             list.innerHTML = filtered.slice(0, MAX_ROWS).map((e, i) => `
-                <div class="twm-cmdpal__item${i === active ? ' twm-cmdpal__item--active' : ''}"
-                     data-idx="${i}">
+                ${_itemOpen(e, i === active ? ' twm-cmdpal__item--active' : '', `data-idx="${i}"`)}
                     <span class="material-symbols-outlined twm-cmdpal__icon">${e.icon || 'arrow_right'}</span>
                     <span class="twm-cmdpal__label">${_esc(e.label || e.id)}</span>
                     <span class="twm-cmdpal__kind">${e.kind}</span>
@@ -343,7 +353,7 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
             const side = r.shortcut
                 ? `<kbd class="twm-cmdpal__shortcut">${_esc(r.shortcut)}</kbd>`
                 : `<span class="twm-cmdpal__kind">${_esc(kindLabel(r))}</span>`;
-            return `<div class="twm-cmdpal__item${on}" data-idx="${i}" role="option">
+            return `${_itemOpen(r, on, `data-idx="${i}" role="option"`)}
                 <span class="material-symbols-outlined twm-cmdpal__icon">${_esc(r.icon || 'arrow_right')}</span>
                 <span class="twm-cmdpal__main"><span class="twm-cmdpal__label">${_mark(r.label || r.id, r._hits)}</span>${ctx}</span>
                 <span class="twm-cmdpal__side">${side}<span class="twm-cmdpal__acts">${acts.join('')}</span></span>
@@ -453,6 +463,9 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
             const picked = filtered[i];
             if (!picked) return;
             if (picked.more) { showAll(picked.more); return; }
+            // A disabled row is listed so it can say why; picking it runs
+            // nothing and the palette stays open on it.
+            if (_isDisabled(picked)) return;
             // Split and window open a COPY; a single kind refuses both, and the
             // palette stays open on the row whose hints say why.
             if (mode !== 'open' && isSingle(picked)) return;
@@ -585,6 +598,7 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
                 return;
             }
             let pool = entities;
+            if (!filterSet) pool = pool.filter((e) => !e._scopedOnly);
             if (commandsOnly) pool = pool.filter((e) => e.kind === 'command');
             else if (filterSet) pool = pool.filter((e) => filterSet.has(_groupOf(e)) || filterSet.has(e.kind));
             else if (q.length < commandMinChars) pool = pool.filter((e) => e.kind !== 'command');
@@ -649,7 +663,7 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
             const filterSet = typeFilter ? new Set(typeFilter) : null;
             const pool = filterSet
                 ? entities.filter((e) => filterSet.has(e.kind))
-                : entities;
+                : entities.filter((e) => !e._scopedOnly);
             if (!q) {
                 // Scoped + empty query → list every entity of that
                 // kind so the user sees what's available. Unscoped +
@@ -715,10 +729,18 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
             }
             return [...staticCommands, ...extra];
         };
+        // A `scopedOnly` source's rows are marked here, from the catalog's
+        // own source list, so only the rows the catalog produced are held
+        // back — a command or a Recent row of the same kind is not.
+        const scopedKinds = new Set((catalog?.sources || [])
+            .filter((s) => s?.scopedOnly === true).map((s) => s.navKind));
+        const tagScoped = (rows) => (scopedKinds.size
+            ? rows.map((r) => (scopedKinds.has(r.kind) ? { ...r, _scopedOnly: true } : r))
+            : rows);
         // Objects before commands in the grouped layout, so that a tie that
         // survives every rule goes to the object (first seen wins).
         const withCommands = (rows) => (grouped ? [...rows, ...commandRows()] : [...commandRows(), ...rows]);
-        entities = _decorateIcons(withCommands(cache && cached ? cached : []), taxonomy);
+        entities = _decorateIcons(withCommands(tagScoped(cache && cached ? cached : [])), taxonomy);
         if (grouped) {
             refilter();
             if (typeof empty === 'function') {
@@ -735,7 +757,7 @@ export function createCommandPalette({ wm, api, taxonomy, catalog, placeholder =
                 const loaded = await catalog.loadAll(api);
                 if (cache) cached = loaded;
                 if (overlay !== mine) return;
-                entities = _decorateIcons(withCommands(loaded), taxonomy);
+                entities = _decorateIcons(withCommands(tagScoped(loaded)), taxonomy);
                 if (grouped ? (!scope && (input.value || typeFilter)) : input.value) refilter();
             } catch (err) {
                 console.warn('[cmdpal] entity load failed', err);
@@ -859,9 +881,26 @@ function _searched(r) {
 }
 function _groupOf(r) { return r.group || r.kind; }
 
+/** 0.17.2. `enabled` is asked each time; one that throws counts as no. */
+function _isDisabled(r) {
+    if (!r || typeof r.enabled !== 'function') return false;
+    try { return !r.enabled(); }
+    catch (err) { console.warn('[cmdpal] enabled() threw', err); return true; }
+}
+/** A row's opening `<div>` with its classes (`twm-cmdpal__item` plus `extra`)
+ *  and attributes. A disabled row adds its class, `aria-disabled` and, given a
+ *  `disabledReason`, the reason as its `title`. */
+function _itemOpen(r, extra, attrs) {
+    const off = _isDisabled(r);
+    const cls = 'twm-cmdpal__item' + extra + (off ? ' twm-cmdpal__item--disabled' : '');
+    const refused = !off ? ''
+        : ' aria-disabled="true"' + (r.disabledReason ? ` title="${_esc(r.disabledReason)}"` : '');
+    return `<div class="${cls}"${refused} ${attrs}>`;
+}
+
 /** Strip the palette's private fields before a row leaves it. */
 function _public(r) {
-    const { _hits, _score, ...rest } = r;
+    const { _hits, _score, _scopedOnly, ...rest } = r;
     return rest;
 }
 

package/src/tiling/content_registry.js

@@ -8,6 +8,9 @@
  *
  * The tile renderer calls the factory once when the leaf is first
  * mounted with a given (kind, props) pair, and `destroy()` on unmount.
+ * A content of a `single` kind may return `navigate(props)`: an open path
+ * that reveals the instance instead of mounting it hands it the new props
+ * (`wm.revealInstance`, 0.17.2).
  *
  * `ctx` is the shell's ctx plus, per leaf, `leafId` and `setTitle(text)` —
  * rename the pane's chrome title from inside the content, at mount or any

package/src/tiling/entity_sources.js

@@ -27,6 +27,12 @@
  *             row to the record shape every search surface consumes.
  *             Return `null` to skip the row.
  *
+ *   scopedOnly? `true` keeps the source's rows out of a plain typed query:
+ *             the command palette lists them only behind the source's
+ *             prefix (`<navKind>:` or an alias that resolves to it). For a
+ *             source too broad to compete with everything else — help
+ *             topics, say. Absent or `false`: searched as always (0.17.2).
+ *
  * ## Aggregation
  *
  * An embedder whose backend can answer for every source in ONE call
@@ -48,6 +54,10 @@ export function createEntityCatalog({ sources, aliases = {}, aggregate = null }
             throw new TypeError(
                 `createEntityCatalog: source '${s?.navKind ?? '?'}' needs navKind + list() + shape()`);
         }
+        if (s.scopedOnly != null && typeof s.scopedOnly !== 'boolean') {
+            throw new TypeError(
+                `createEntityCatalog: source '${s.navKind}' \`scopedOnly\` must be a boolean when present`);
+        }
     }
     if (aggregate != null && typeof aggregate !== 'function') {
         throw new TypeError('createEntityCatalog: `aggregate` must be a function when present');

package/src/tiling/wm.js

@@ -348,10 +348,57 @@ export class WindowManager {
     }
 
     /** Reveal the instance of a single kind that is open: answers whether
-     *  there was one. Every open path asks this first. */
+     *  there was one. Every open path asks this first.
+     *
+     *  An open path names props too, and revealing alone would drop them: the
+     *  instance keeps showing what it was opened with. So a revealed content
+     *  that returned a `navigate(props)` hook from its mount is handed the new
+     *  props — once per open, the same props twice are two calls — and they
+     *  are recorded on its tab, so a page restore or a reload mounts it with
+     *  the latest. A content without the hook is revealed as it is: its tab
+     *  keeps its props and nothing is called. So is every content when the
+     *  open names no props at all — a top-nav button, `openInPrimary(kind)` —
+     *  which asks to SEE the instance, not to empty it. */
     revealInstance(kind, props = {}) {
         const loc = this.findInstance(kind, props);
-        return loc ? this._revealAt(loc) : false;
+        if (!loc || !this._revealAt(loc)) return false;
+        if (props && Object.keys(props).length) this._deliverProps(kind, props);
+        return true;
+    }
+
+    /** Hand a revealed instance the props it was opened with, and record them
+     *  on its tab (and the tile's `content` mirror of it, re-baselining the
+     *  tile so the write does not rebuild it). Looks
+     *  the instance up again: a reveal from a page archive moved it into the
+     *  tile's tabs. A throwing hook is a warning, never a crash. */
+    _deliverProps(kind, props) {
+        const loc = this.findInstance(kind, props);
+        if (!loc || loc.where === 'archive') return;
+        const scope = loc.where === 'window' ? { windowId: loc.windowId } : { leafId: loc.leafId };
+        const content = this._scopeContent(scope);
+        if (typeof content?.navigate !== 'function') return;
+        const next = { ...(props || {}) };
+        if (loc.where === 'window') {
+            const rec = this._windowToLeaf.get(loc.windowId);
+            const tab = Array.isArray(rec.tabs) ? rec.tabs[loc.idx] : null;
+            if (tab) tab.props = { ...next };
+            if (rec.original) rec.original = { ...rec.original, props: { ...next } };
+        } else {
+            const leaf = this._tree().get(loc.leafId);
+            const expected = this.renderer?.leafKey?.(loc.leafId) ?? undefined;
+            leaf.tabs[loc.idx].props = { ...next };
+            // The tab is the active one now, and `content` mirrors it: the
+            // next tab activation re-mirrors it anyway, and a mirror left
+            // behind would change the tile's key then and rebuild it.
+            if (leaf.content?.kind === kind) leaf.content = { ...leaf.content, props: { ...next } };
+            this.renderer?.rebaselineLeaf?.(loc.leafId, expected);
+        }
+        this._persist();
+        try {
+            content.navigate({ ...next });
+        } catch (err) {
+            console.warn('[wm] content navigate threw', err);
+        }
     }
 
     /** A leaf's archived pages that can come back — every `pageTabs` entry
@@ -4106,8 +4153,23 @@ export class WindowManager {
      *
      *  The lower-level primitives (`openFromContext`,
      *  `openInTabFromContext`, `openInTabInPrimary`, `openInPrimary`,
-     *  `openInWindow`) stay internal; callers prefer `wm.navigate(...)`. */
+     *  `openInWindow`) stay internal; callers prefer `wm.navigate(...)`.
+     *
+     *  Returns `true` once the navigation is routed. A kind the shell's
+     *  content registry has no factory for is refused instead: one
+     *  `console.warn` naming it, no tile, tab, window or history touched, and
+     *  `false` — never a placeholder tile, never a throw. */
     navigate(kind, props = {}, opts = {}) {
+        if (!this.content.has(kind)) {
+            console.warn(`[wm] navigate: no content registered for kind "${String(kind)}"`);
+            return false;
+        }
+        this._route(kind, props, opts);
+        return true;
+    }
+
+    /** The routing behind `navigate`, for a kind known to be registered. */
+    _route(kind, props, opts) {
         const { ctx = null, transient = false } = opts;
         // Append the tab but stay where you are. Only meaningful with `newTab`.
         const background = !!opts.background;

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/notification_center.js

@@ -105,7 +105,7 @@ export class NotificationCenter extends ComponentBase {
             this.container = existingContainer;
             this.rootEl = existingContainer.querySelector('.twm-notification-center');
             this.listEl = existingContainer.querySelector('.twm-notification-center__list');
-            this.liveRegionEl = existingContainer.querySelector('.notification-center__live-region');
+            this.liveRegionEl = existingContainer.querySelector('.twm-notification-center__live-region');
             this._mounted = true;
             this.#subscribeEvents();
             this.#claimToastBus();
@@ -124,7 +124,7 @@ export class NotificationCenter extends ComponentBase {
         this.listEl.className = 'twm-notification-center__list';
 
         this.liveRegionEl = document.createElement('div');
-        this.liveRegionEl.className = 'notification-center__live-region';
+        this.liveRegionEl.className = 'twm-notification-center__live-region';
         this.liveRegionEl.setAttribute('aria-live', 'polite');
         this.liveRegionEl.setAttribute('aria-atomic', 'true');
         this.liveRegionEl.style.position = 'absolute';
@@ -599,7 +599,7 @@ export class NotificationCenter extends ComponentBase {
         if (!this.#summaryEl) {
             const more = document.createElement('button');
             more.type = 'button';
-            more.className = 'notification twm-notification--summary';
+            more.className = 'twm-notification twm-notification--summary';
             more.addEventListener('click', () => {
                 const held = [...this.held];
                 try { this.summaryAction?.(held); } catch (err) { this.logger?.warn?.('summaryAction failed', err); }
@@ -729,8 +729,8 @@ export class NotificationCenter extends ComponentBase {
     #patchItem(entry, notification) {
         const item = entry.el;
         if (entry.severity !== notification.severity) {
-            if (entry.severity) item.classList.remove(`notification--${entry.severity}`);
-            item.classList.add('notification', `notification--${notification.severity}`);
+            if (entry.severity) item.classList.remove(`twm-notification--${entry.severity}`);
+            item.classList.add('twm-notification', `twm-notification--${notification.severity}`);
             entry.severity = notification.severity;
         }
         if (entry.titleEl) NotificationCenter.#setText(entry.titleEl, notification.title);