@openleaf-editor/ui 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/toolbar.js

@@ -13,13 +13,16 @@
  *
  * Two details that are easy to get wrong and both matter:
  *
- * 1. **Arrow-key roving is applied only to `<button>` elements.** The block-type
- *    control is a native `<select>`, and when focus is on it, Left/Right have two
- *    competing owners -- the roving handler wants to move to the next item, the
- *    select natively wants to change its value. Intercepting those keys breaks
- *    the select; not intercepting them breaks the toolbar contract. The
- *    resolution is that the select owns all of its own key events and is a
- *    genuine second tab stop rather than part of the roving scheme.
+ * 1. **Arrow-key roving covers the `<select>` controls too.** The default bar has
+ *    four of them -- paragraph style, font family, font size, line height -- and
+ *    when focus is on one, Left/Right have two competing owners: the roving
+ *    handler wants to move to the next item, the select natively wants to change
+ *    its value. Leaving them out was the earlier resolution, and it cost more
+ *    than it saved: ArrowRight from Redo jumped past four controls to Bold, and
+ *    each select became its own tab stop, making the default bar five tab stops
+ *    instead of one. The APG resolution is the one used here -- the toolbar takes
+ *    Left/Right, and Up/Down, Home/End and typeahead are left to the select, so
+ *    it is still fully operable and Alt+Down still opens its list.
  *
  * 2. **Escape returns focus and the selection to the content.** Preventing mouse
  *    clicks from stealing focus solves the mouse case and leaves the keyboard
@@ -28,13 +31,24 @@
  *    is blind-Tabbing through the rest of the host's form. `Alt+F10` enters,
  *    Escape leaves, matching TinyMCE and CKEditor 5 so muscle memory transfers.
  */
-import { activeHeadingLevel, shortcutFor, toggleHeading, setParagraph } from '@openleaf-editor/core';
+import { shortcuts } from '@openleaf-editor/core';
 import { ensureSprite, iconElement } from './icons.js';
+import { t, onLocaleChange, withLocale } from './i18n.js';
+import { announce, liveRegion } from './live.js';
+import { ToolbarOverflow } from './overflow.js';
 import { DEFAULT_LAYOUT, getToolbarItem, onRegistryChange, } from './registry.js';
 import { ensureStyles } from './styles.js';
-const BLOCK_TYPE_ID = 'blockType';
 /** Item+callback pairs already reported, so a per-keystroke failure logs once. */
 const reported = new Set();
+/**
+ * What the roving tabindex walks.
+ *
+ * Buttons and native selects alike: every control the bar renders is one of the
+ * two, and leaving the selects out is what made the default bar five tab stops.
+ * `ol-btn`/`ol-select` rather than the bare tags, so a custom control's own
+ * popover -- which lives on the host, not in here -- cannot be walked into.
+ */
+const FOCUSABLE = 'button.ol-btn, select.ol-select';
 /**
  * Call a third-party predicate, falling back rather than propagating.
  *
@@ -48,6 +62,35 @@ const reported = new Set();
  * transaction would otherwise emit thousands of identical lines and bury the
  * first one, which is the only one with a useful stack.
  */
+/**
+ * Predicate answers for one editor state, shared by every bar on the page.
+ *
+ * A page routinely carries four toolbars over one editor -- the main bar, a
+ * second bar, and two floating ones -- and each ran the whole predicate set
+ * against the same state, walking the same selection four times over. Dragging
+ * a selection across a hundred-page document made that ~480,000 node visits per
+ * pointermove, inside `dispatchTransaction`.
+ *
+ * Safe because the contract on `setItemState` already requires these callbacks
+ * to be functions of the document and selection alone: anything the state
+ * cannot express -- an upload in flight, a collab lock -- is pushed in through
+ * `setItemState` and read from `forcedActive`/`forcedEnabled` before we get
+ * here. Two bars asking the same question of the same state cannot legitimately
+ * get different answers.
+ */
+const probes = new WeakMap();
+function probe(state, key, compute) {
+    let answers = probes.get(state);
+    if (!answers) {
+        answers = new Map();
+        probes.set(state, answers);
+    }
+    if (answers.has(key))
+        return answers.get(key);
+    const value = compute();
+    answers.set(key, value);
+    return value;
+}
 function guarded(itemId, kind, run) {
     try {
         return run();
@@ -63,6 +106,26 @@ function guarded(itemId, kind, run) {
         return false;
     }
 }
+/**
+ * The `aria-keyshortcuts` spelling of an item's shortcut.
+ *
+ * Not the same string as the tooltip, and deliberately so: the tooltip is for
+ * reading ("Ctrl+B", "⌘B") while this attribute has a defined grammar that
+ * assistive technology parses -- named modifiers joined by `+`, with the
+ * platform's real modifier rather than a symbol.
+ */
+function keyShortcutFor(label) {
+    const found = shortcuts.find((entry) => entry.label === label);
+    if (!found)
+        return null;
+    const mod = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+        ? 'Meta'
+        : 'Control';
+    return found.keys
+        .split('-')
+        .map((part) => (part === 'Mod' ? mod : part.length === 1 ? part.toUpperCase() : part))
+        .join('+');
+}
 export class Toolbar {
     el;
     #doc;
@@ -70,31 +133,53 @@ export class Toolbar {
     #view = null;
     #controls = new Map();
     #customs = [];
-    #select = null;
-    #live;
-    #liveTimer;
+    /** Native selects keyed by item id (block type plus any `type: 'select'`). */
+    #selects = new Map();
     #layout;
+    #label;
+    #formats;
+    #locale;
+    #wantsOverflow;
+    /**
+     * True while the host is showing raw HTML instead of the document.
+     *
+     * Not `setItemState`, which is what the host reaches for elsewhere: that
+     * pushes a value per item and has no way to say "and put every other item
+     * back afterwards". A mode is one flag, and clearing it is one assignment.
+     */
+    #sourceMode = false;
+    /**
+     * Controls this bar disabled for readonly or source view, so releasing hands
+     * back only what it took. Without it, leaving source view would re-enable a
+     * control its own `update` had disabled for the current selection.
+     */
+    #suspendedByToolbar = new WeakSet();
+    #overflow = null;
     #unsubscribe;
-    /** Focusable buttons in DOM order; the roving tabindex walks this. */
+    #unlocale;
+    /** Focusable controls in DOM order; the roving tabindex walks this. */
     #focusables = [];
     #rovingIndex = 0;
     constructor(host, doc, options = {}) {
         this.#host = host;
         this.#doc = doc;
         this.#layout = options.layout ?? DEFAULT_LAYOUT;
+        this.#label = options.label ?? 'Formatting';
+        this.#formats = options.formats ?? [];
+        this.#locale = options.locale ?? null;
+        this.#wantsOverflow = options.overflow === true;
         ensureStyles(doc);
         ensureSprite(doc);
         this.el = doc.createElement('div');
         this.el.className = 'ol-toolbar';
         this.el.setAttribute('role', 'toolbar');
-        this.el.setAttribute('aria-label', options.label ?? 'Formatting');
-        this.#live = doc.createElement('div');
-        this.#live.className = 'ol-live';
-        // Polite and atomic: an assertive region would interrupt the author
-        // mid-word, and a non-atomic one can read partial updates.
-        this.#live.setAttribute('role', 'status');
-        this.#live.setAttribute('aria-live', 'polite');
-        this.#live.setAttribute('aria-atomic', 'true');
+        this.el.setAttribute('aria-label', t(this.#label));
+        // Mounted on the HOST, and mounted now rather than on the first
+        // announcement: a region a screen reader has never seen may not be observed
+        // in time to read the text that appears in it. Shared with every other bar
+        // on this editor, so a secondary or floating toolbar is never the one that
+        // speaks into a detached node.
+        liveRegion(host);
         this.el.addEventListener('keydown', this.#onKeydown);
         // Re-render when a plugin registers late. Import-time registration races
         // code-split chunks, and a button that silently never appears is worse than
@@ -102,20 +187,72 @@ export class Toolbar {
         this.#unsubscribe = onRegistryChange(() => {
             this.#rerenderPreservingState();
         });
+        this.#unlocale = onLocaleChange(() => {
+            this.#rerenderPreservingState();
+        });
+    }
+    /**
+     * Change this toolbar's language and rebuild its labels.
+     *
+     * Per toolbar rather than per document, so one editor switching language does
+     * not relabel every other editor on the page.
+     */
+    setLocale(next) {
+        const value = next ?? null;
+        if (value === this.#locale)
+            return;
+        this.#locale = value;
+        if (this.#view)
+            this.#rerenderPreservingState();
+    }
+    /**
+     * Enter or leave source view.
+     *
+     * Every control except the one that leaves again goes unavailable. In source
+     * mode a formatting command ran against the hidden document and the textarea
+     * was then reparsed over the top of it, so pressing Bold silently discarded
+     * the edit -- a button that does nothing is better than a button that
+     * destroys work, and a button that says it is unavailable is better still.
+     */
+    setSourceMode(active) {
+        if (active === this.#sourceMode)
+            return;
+        this.#sourceMode = active;
+        if (this.#view)
+            this.update(this.#view.state);
     }
     /** Attach to a view and build the controls. */
     mount(view) {
         this.#view = view;
         this.#render();
+        if (this.#wantsOverflow && !this.#overflow) {
+            // Relayout moves whole groups out of the bar and back, so the roving list
+            // is rebuilt after it: a control in the More panel is not a stop in the
+            // bar, and the More trigger itself is.
+            this.#overflow = new ToolbarOverflow(this.el, this.#host, this.#doc, () => this.#refreshFocusables());
+        }
         this.update(view.state);
     }
+    /**
+     * Detach the toolbar AND take its DOM with it.
+     *
+     * Removing the nodes is part of the contract, not tidiness. The host appends
+     * `el` into the editor element and reads that element's
+     * `innerHTML` back as document content when it rebuilds -- so a toolbar left
+     * behind by `destroy()` becomes the author's document on the next build, and
+     * then gets posted to the server.
+     *
+     * Idempotent: `.remove()` on a detached node is a no-op.
+     */
     destroy() {
         this.#unsubscribe?.();
-        clearTimeout(this.#liveTimer);
+        this.#unlocale?.();
+        this.#overflow?.destroy();
         this.el.removeEventListener('keydown', this.#onKeydown);
         this.#destroyCustoms();
         this.#controls.clear();
         this.#view = null;
+        this.el.remove();
     }
     /**
      * Tear down `custom` controls.
@@ -137,31 +274,44 @@ export class Toolbar {
         }
         this.#customs = [];
     }
-    /** The live region element, which the host mounts once. */
+    /**
+     * The editor's live region.
+     *
+     * One per host, shared by every bar on it, and already mounted -- so a host
+     * that appends this is moving a node it already owns rather than adopting a
+     * detached one. Kept on the class because integrations reach for it.
+     */
     get liveRegion() {
-        return this.#live;
+        return liveRegion(this.#host);
     }
     /* -------------------------------------------------------------- *
      * Rendering
      * -------------------------------------------------------------- */
+    /**
+     * Labels are produced inside this toolbar's own locale scope, so two editors
+     * with different `lang` values on one page do not overwrite each other.
+     */
     #render() {
+        withLocale(this.#locale, () => this.#renderScoped());
+    }
+    #renderScoped() {
         this.#destroyCustoms();
         this.el.replaceChildren();
         this.#controls.clear();
-        this.#select = null;
+        this.#selects.clear();
         let group = this.#newGroup();
         for (const token of this.#layout.split(/\s+/).filter(Boolean)) {
             if (token === '|') {
+                // No separator ELEMENT. The divider is a border on the group -- see
+                // css.ts -- and an element between two groups is exactly what stopped
+                // `.ol-group + .ol-group` from ever matching, so no divider rendered in
+                // any theme. An empty group is also not appended, so `a | | b` gets one
+                // divider rather than a doubled rule.
                 if (group.childElementCount > 0)
                     this.el.appendChild(group);
-                this.el.appendChild(this.#newSeparator());
                 group = this.#newGroup();
                 continue;
             }
-            if (token === BLOCK_TYPE_ID) {
-                group.appendChild(this.#buildBlockTypeSelect());
-                continue;
-            }
             const spec = getToolbarItem(token);
             // Silently skipping an unknown id would hide a typo in an integrator's
             // `toolbar` attribute forever.
@@ -175,10 +325,12 @@ export class Toolbar {
                     group.appendChild(el);
                 continue;
             }
-            // `select` is still unimplemented -- the block-type control is special-cased
-            // by id, not by type. A declared-and-inert variant is worse than an absent
-            // one, because the author sees a plausible button and no signal that the
-            // control they asked for was not built.
+            if (spec.type === 'select') {
+                const el = this.#buildSelect(spec);
+                if (el)
+                    group.appendChild(el);
+                continue;
+            }
             if (spec.type && spec.type !== 'button') {
                 console.warn(`@openleaf-editor/ui: toolbar item "${spec.id}" declares type "${spec.type}", ` +
                     'which is not implemented yet. It is rendering as a button.');
@@ -187,7 +339,9 @@ export class Toolbar {
         }
         if (group.childElementCount > 0)
             this.el.appendChild(group);
+        this.el.setAttribute('aria-label', t(this.#label));
         this.#refreshFocusables();
+        this.#overflow?.reattach();
     }
     /**
      * Rebuild after a registry change without dropping host-pushed state.
@@ -218,42 +372,46 @@ export class Toolbar {
             this.update(this.#view.state);
         if (!focusedId)
             return;
-        if (focusedId === BLOCK_TYPE_ID) {
-            this.#select?.focus();
-            return;
-        }
-        const control = this.#controls.get(focusedId);
-        if (!control)
-            return;
-        const index = this.#focusables.indexOf(control.el);
+        // One lookup for buttons, selects and custom triggers alike: they are all in
+        // the roving list, and they are all found by the id the item was registered
+        // under -- which is why a control that writes its LABEL into `data-ol-id`
+        // silently loses focus here.
+        const index = this.#focusables.findIndex((el) => el.dataset['olId'] === focusedId);
         if (index >= 0) {
             this.#rovingIndex = index;
             this.#applyRoving();
+            this.#focusables[index]?.focus();
+            return;
         }
-        control.el.focus();
+        this.#customs.find(({ id }) => id === focusedId)?.control.focusable?.focus();
     }
     #newGroup() {
         const group = this.#doc.createElement('div');
         group.className = 'ol-group';
         return group;
     }
-    #newSeparator() {
-        const sep = this.#doc.createElement('div');
-        sep.className = 'ol-sep';
-        // Decorative. A separator announced as "separator" twenty times is noise.
-        sep.setAttribute('aria-hidden', 'true');
-        return sep;
-    }
     #buildButton(spec) {
         const button = this.#doc.createElement('button');
         button.type = 'button';
         button.className = 'ol-btn';
         button.dataset['olId'] = spec.id;
-        // The accessible name stays constant across states. Baking "pressed" into
-        // it would double up with what the platform already announces.
-        button.setAttribute('aria-label', spec.label);
-        const shortcut = spec.shortcut ? shortcutFor(spec.shortcut) : null;
-        button.title = shortcut ? `${spec.label} (${shortcut})` : spec.label;
+        // The accessible name stays constant across pressed/unpressed. Baking
+        // "pressed" into it would double up with what the platform already
+        // announces. A control that does two different things (insert versus
+        // edit) may still change its name via `labelFor`.
+        button.setAttribute('aria-label', t(spec.label));
+        // The title is the label and nothing more. Per accname `title` becomes the
+        // DESCRIPTION of an element that already has a name, so "Bold (Ctrl+B)"
+        // beside aria-label="Bold" had NVDA say "Bold, button, Bold Ctrl+B". Equal
+        // to the name, it is dropped rather than read twice; the shortcut moves to
+        // the attribute that exists to carry it.
+        const label = t(spec.label);
+        button.title = label;
+        if (spec.shortcut) {
+            const keys = keyShortcutFor(spec.shortcut);
+            if (keys)
+                button.setAttribute('aria-keyshortcuts', keys);
+        }
         if ((spec.kind ?? 'action') === 'toggle') {
             button.setAttribute('aria-pressed', 'false');
         }
@@ -264,7 +422,7 @@ export class Toolbar {
         // nothing.
         button.addEventListener('mousedown', (event) => event.preventDefault());
         button.addEventListener('click', () => this.#invoke(spec));
-        this.#controls.set(spec.id, { spec, el: button, active: null, enabled: null });
+        this.#controls.set(spec.id, { spec, el: button, active: null, enabled: null, label: null });
         return button;
     }
     /**
@@ -288,7 +446,7 @@ export class Toolbar {
         if (!view)
             return null;
         try {
-            const control = spec.render({ view, host: this.#host });
+            const control = spec.render({ view, id: spec.id, host: this.#host, formats: this.#formats });
             this.#customs.push({ id: spec.id, control });
             return control.el;
         }
@@ -299,33 +457,44 @@ export class Toolbar {
         }
     }
     /**
-     * The block-type control.
+     * Build a `type: 'select'` control from the item's options.
      *
-     * A native `<select>`. A custom listbox would be several hundred lines of
-     * ARIA that would then owe real screen reader testing to be worth anything,
-     * and the native control is already tested by the browser vendors. It carries
-     * its own accessible name because the toolbar's own label does not describe it.
+     * Same keyboard contract as the block-type select: it is a second tab stop,
+     * owns its own arrow keys, and only returns focus to the content when the
+     * author commits by pointer.
      */
-    #buildBlockTypeSelect() {
+    #buildSelect(spec) {
+        if (!spec.options || !spec.getValue || !spec.applyValue) {
+            console.warn(`@openleaf-editor/ui: toolbar item "${spec.id}" declares type "select" but is ` +
+                'missing options, getValue, or applyValue, so there is nothing to build.');
+            return null;
+        }
         const select = this.#doc.createElement('select');
-        select.className = 'ol-select';
-        select.setAttribute('aria-label', 'Paragraph style');
-        select.dataset['olId'] = BLOCK_TYPE_ID;
-        const options = [
-            ['p', 'Paragraph'],
-            ['1', 'Heading 1'],
-            ['2', 'Heading 2'],
-            ['3', 'Heading 3'],
-            ['4', 'Heading 4'],
-            ['5', 'Heading 5'],
-            ['6', 'Heading 6'],
-        ];
-        for (const [value, label] of options) {
+        select.className = spec.selectMod ? `ol-select ol-select--${spec.selectMod}` : 'ol-select';
+        select.setAttribute('aria-label', t(spec.label));
+        select.dataset['olId'] = spec.id;
+        select.title = t(spec.label);
+        for (const choice of spec.options) {
             const option = this.#doc.createElement('option');
-            option.value = value;
-            option.textContent = label;
+            option.value = choice.value;
+            option.textContent = t(choice.label);
             select.appendChild(option);
         }
+        this.#wireSelectInteraction(select, () => {
+            const view = this.#view;
+            if (!view || !spec.applyValue)
+                return;
+            const command = spec.applyValue(select.value);
+            command(view.state, view.dispatch, view);
+        });
+        this.#selects.set(spec.id, select);
+        return select;
+    }
+    /**
+     * Shared select wiring: keep pointer vs keyboard focus behaviour identical
+     * across every native list in the bar.
+     */
+    #wireSelectInteraction(select, apply) {
         select.addEventListener('mousedown', (event) => event.stopPropagation());
         /**
          * Whether the pending change came from a pointer rather than the keyboard.
@@ -356,9 +525,9 @@ export class Toolbar {
             const view = this.#view;
             if (!view)
                 return;
-            const value = select.value;
-            const command = value === 'p' ? setParagraph : toggleHeading(Number(value));
-            command(view.state, view.dispatch, view);
+            if (this.#host.hasAttribute('readonly'))
+                return;
+            apply();
             // Return the caret to the content only when the author committed the
             // choice by pointer. Keyboard users keep focus and leave with Tab or
             // Escape.
@@ -367,8 +536,6 @@ export class Toolbar {
                 view.focus();
             }
         });
-        this.#select = select;
-        return select;
     }
     /* -------------------------------------------------------------- *
      * Invocation
@@ -384,7 +551,7 @@ export class Toolbar {
             return;
         try {
             if (spec.run) {
-                spec.run({ view, host: this.#host });
+                spec.run({ view, host: this.#host, formats: this.#formats });
                 return;
             }
             if (spec.command) {
@@ -403,14 +570,39 @@ export class Toolbar {
     /**
      * Reflect the editor state onto the controls.
      *
-     * Deliberately synchronous, not batched into an animation frame. Twenty cheap
-     * predicates plus a diffed attribute write is sub-millisecond work, and
-     * batching would trade a perceptible frame of lag between pressing Bold and
-     * the button lighting up for a performance problem that does not exist.
+     * Deliberately synchronous, not batched into an animation frame: batching
+     * would put a perceptible frame of lag between pressing Bold and the button
+     * lighting up.
+     *
+     * This used to claim the predicates were "sub-millisecond work" and that the
+     * performance problem "does not exist". It did. Every control without an
+     * `isEnabled` is probed by dry-running its command, each of which walks the
+     * selection, and a page routinely carries four bars over one editor -- so a
+     * Select-All on a hundred-page document measured 1.4 ms per bar and about
+     * 3 ms per pointermove during a selection drag, inside `dispatchTransaction`.
+     * What makes synchronous affordable is the three guards below it: skipping
+     * transactions that cannot have changed an answer, caching each answer per
+     * state so the four bars share one computation, and giving the alignment items
+     * an explicit `isEnabled` so they stop dry-running a command that walks the
+     * selection twice.
      *
      * `tr` is passed so announcements can be gated on a real formatting change.
      */
     update(state, tr) {
+        withLocale(this.#locale, () => this.#updateScoped(state, tr));
+    }
+    #updateScoped(state, tr) {
+        // Nothing every predicate below reads can have changed: same document, same
+        // selection, same stored marks. They each walk the selection, so on a
+        // hundred-page Select-All this one line is the difference between 120,000
+        // node visits and none -- and metadata-only transactions (plugin pings,
+        // collaboration cursors, scroll requests) are most of them.
+        //
+        // `tr &&` is load-bearing, not defensive: mount(), a readonly change, a
+        // plugin reconfigure and setItemState all update with no transaction, and
+        // must still refresh.
+        if (tr && !tr.docChanged && !tr.selectionSet && !tr.storedMarksSet)
+            return;
         // Announce only on a discrete formatting transition, never on cursor
         // movement through already-formatted text. That gate is the whole
         // difference between a useful announcement and a chatty one.
@@ -419,10 +611,13 @@ export class Toolbar {
         for (const control of this.#controls.values()) {
             const { spec } = control;
             const readonly = this.#host.hasAttribute('readonly');
-            const enabled = readonly
+            // `source` itself stays live in source mode: it is the way back out, and
+            // disabling it would strand the author in a textarea.
+            const suspended = this.#sourceMode && spec.id !== 'source';
+            const enabled = readonly || suspended
                 ? false
                 : control.forcedEnabled ??
-                    guarded(spec.id, 'isEnabled', () => spec.isEnabled ? spec.isEnabled(state) : spec.command ? spec.command(state) : true);
+                    probe(state, `${spec.id}e`, () => guarded(spec.id, 'isEnabled', () => spec.isEnabled ? spec.isEnabled(state) : spec.command ? spec.command(state) : true));
             if (enabled !== control.enabled) {
                 control.enabled = enabled;
                 // aria-disabled, never the disabled attribute: a disabled button is
@@ -430,15 +625,28 @@ export class Toolbar {
                 // so an author using a screen reader cannot discover it exists.
                 control.el.setAttribute('aria-disabled', enabled ? 'false' : 'true');
             }
+            if (spec.labelFor) {
+                const label = t(spec.labelFor(state));
+                if (label !== control.label) {
+                    control.label = label;
+                    control.el.setAttribute('aria-label', label);
+                    control.el.title = label;
+                }
+            }
             if ((spec.kind ?? 'action') === 'toggle') {
                 const active = control.forcedActive ??
-                    guarded(spec.id, 'isActive', () => (spec.isActive ? spec.isActive(state) : false));
+                    probe(state, `${spec.id}a`, () => guarded(spec.id, 'isActive', () => (spec.isActive ? spec.isActive(state) : false)));
                 if (active !== control.active) {
                     const previous = control.active;
                     control.active = active;
                     control.el.setAttribute('aria-pressed', active ? 'true' : 'false');
                     if (isFormattingChange && previous !== null) {
-                        transitions.push(`${spec.label} ${active ? 'on' : 'off'}`);
+                        // One template key per state rather than a label glued to a bare
+                        // "on"/"off". The old form pushed the RAW LOOKUP KEY, so a French
+                        // editor showed "Gras" and announced "Bold on" -- and the two state
+                        // words had no translation path at all. A template also keeps word
+                        // order translatable, which a concatenation never can.
+                        transitions.push(t(active ? '{label} on' : '{label} off').replace('{label}', t(spec.label)));
                     }
                 }
             }
@@ -447,24 +655,132 @@ export class Toolbar {
             // Readonly is the toolbar's business, not each control's: reflecting it
             // here means a custom control gets the same disabled treatment as a button
             // without every plugin author having to remember the attribute exists.
-            const trigger = control.el.querySelector('button.ol-btn');
-            trigger?.setAttribute('aria-disabled', this.#host.hasAttribute('readonly') ? 'true' : 'false');
-            if (!control.update)
-                continue;
-            guarded(id, 'update', () => {
-                control.update?.(state);
-                return true;
-            });
+            const unavailable = this.#host.hasAttribute('readonly') || this.#sourceMode;
+            // Suspension is an OVERRIDE, not an opinion: it can only ever take a
+            // control away, and it restores exactly what it took. A control's own
+            // `update` is the authority on whether its command applies to this
+            // selection -- the table grid disables its trigger when `canInsert` is
+            // false -- so writing "available" over that would show an enabled trigger
+            // for a command that does nothing.
+            //
+            // Released BEFORE `update`, forced AFTER it, so whichever of the two is
+            // entitled to the answer gets the last word.
+            if (!unavailable)
+                this.#releaseSuspended(control.el);
+            if (control.update) {
+                guarded(id, 'update', () => {
+                    control.update?.(state);
+                    return true;
+                });
+            }
+            if (unavailable)
+                this.#suspend(control.el);
         }
-        if (this.#select) {
-            const level = activeHeadingLevel(state);
-            const value = level === null ? 'p' : String(level);
-            if (this.#select.value !== value)
-                this.#select.value = value;
+        if (this.#selects.size > 0) {
+            const readonly = this.#host.hasAttribute('readonly') || this.#sourceMode;
+            // Only declared `type: 'select'` items live here. Block type is a rendered
+            // control and keeps its own state in sync through its ToolbarControl.
+            for (const [id, select] of this.#selects) {
+                this.#syncRegisteredSelect(id, select, state, readonly);
+            }
         }
         if (transitions.length > 0)
             this.#announce(transitions.join(', '));
     }
+    /**
+     * Every native select a custom control put in the bar, including the control
+     * element itself. `querySelectorAll` alone misses the latter, and the latter
+     * is the common case: a control whose whole DOM is one select.
+     */
+    #nativeSelects(el) {
+        const found = [...el.querySelectorAll('select')];
+        // localName, not `instanceof`: this bar may be built in a second document,
+        // where that document's HTMLSelectElement is a different constructor.
+        if (el.localName === 'select')
+            found.unshift(el);
+        return found;
+    }
+    /**
+     * Take a custom control away while the editor is readonly or in source view.
+     *
+     * The trigger and every native select inside the control, plus the control
+     * element itself when that IS a select -- block type's is
+     * (packages/ui/src/block-type.ts), which is how a `<select>` with no
+     * `button.ol-btn` inside it stayed fully operable in source mode: the author
+     * could pick "Heading 3" against the hidden document, and leaving source view
+     * reparsed the textarea over the result and discarded it.
+     *
+     * Selects get the real `disabled` as well as aria. With aria alone the select
+     * still opens, still changes its own displayed value, and still fires
+     * `change`, which is the whole failure.
+     *
+     * Anything already unavailable by the control's own reckoning is left alone
+     * and NOT recorded, so releasing cannot hand back something the control
+     * itself was refusing.
+     */
+    #suspend(el) {
+        const trigger = el.querySelector('button.ol-btn');
+        if (trigger && trigger.getAttribute('aria-disabled') !== 'true') {
+            this.#suspendedByToolbar.add(trigger);
+            trigger.setAttribute('aria-disabled', 'true');
+        }
+        for (const select of this.#nativeSelects(el)) {
+            if (select.disabled)
+                continue;
+            this.#suspendedByToolbar.add(select);
+            select.setAttribute('aria-disabled', 'true');
+            select.disabled = true;
+        }
+    }
+    /** Give back exactly what `#suspend` took, and nothing else. */
+    #releaseSuspended(el) {
+        const trigger = el.querySelector('button.ol-btn');
+        if (trigger && this.#suspendedByToolbar.delete(trigger)) {
+            trigger.setAttribute('aria-disabled', 'false');
+        }
+        for (const select of this.#nativeSelects(el)) {
+            if (!this.#suspendedByToolbar.delete(select))
+                continue;
+            select.setAttribute('aria-disabled', 'false');
+            select.disabled = false;
+        }
+    }
+    #syncRegisteredSelect(id, select, state, readonly) {
+        const spec = getToolbarItem(id);
+        if (!spec?.getValue) {
+            select.disabled = readonly;
+            return;
+        }
+        const value = probe(state, `${id} v`, () => {
+            try {
+                return spec.getValue(state);
+            }
+            catch (error) {
+                const key = `${id}:getValue`;
+                if (!reported.has(key)) {
+                    reported.add(key);
+                    console.error(`@openleaf-editor/ui: the getValue callback for toolbar item "${id}" threw. ` +
+                        'The control is shown as Default. This is a bug in whatever registered it, ' +
+                        'not in the editor.', error);
+                }
+                return '';
+            }
+        });
+        // Inherited sizes/families that are not in the preset list still need a
+        // visible option, or the select snaps to Default and looks cleared.
+        if (value !== '' && ![...select.options].some((option) => option.value === value)) {
+            const option = this.#doc.createElement('option');
+            option.value = value;
+            option.textContent = value;
+            select.appendChild(option);
+        }
+        if (select.value !== value)
+            select.value = value;
+        const enabled = spec.isEnabled
+            ? probe(state, `${id} e`, () => guarded(id, 'isEnabled', () => spec.isEnabled(state)))
+            : true;
+        select.disabled = readonly || !enabled;
+    }
     /**
      * Push a state a predicate cannot derive.
      *
@@ -489,32 +805,41 @@ export class Toolbar {
             this.update(this.#view.state);
     }
     #announce(message) {
-        // Clear then set on a timer: replacing identical text does not re-announce,
-        // and the delay coalesces a held shortcut into one utterance.
-        this.#live.textContent = '';
-        clearTimeout(this.#liveTimer);
-        this.#liveTimer = setTimeout(() => {
-            this.#live.textContent = message;
-        }, 60);
+        announce(this.#host, message);
     }
     /* -------------------------------------------------------------- *
      * Roving tabindex
      * -------------------------------------------------------------- */
     #refreshFocusables() {
-        this.#focusables = [...this.el.querySelectorAll('button.ol-btn')];
+        this.#focusables = [...this.el.querySelectorAll(FOCUSABLE)];
         this.#rovingIndex = 0;
         this.#applyRoving();
     }
     #applyRoving() {
-        this.#focusables.forEach((button, index) => {
-            button.tabIndex = index === this.#rovingIndex ? 0 : -1;
+        this.#focusables.forEach((el, index) => {
+            el.tabIndex = index === this.#rovingIndex ? 0 : -1;
         });
     }
+    /**
+     * Step to the next control, skipping any that cannot take focus.
+     *
+     * Buttons carry `aria-disabled` and stay reachable on purpose. A `<select>`
+     * has no such option -- a readonly editor really does disable it, and a
+     * disabled element silently refuses `focus()`, which would leave the arrow
+     * keys dead at that position.
+     */
     #moveRoving(delta) {
-        if (this.#focusables.length === 0)
-            return;
         const count = this.#focusables.length;
-        this.#rovingIndex = (this.#rovingIndex + delta + count) % count;
+        if (count === 0)
+            return;
+        let index = this.#rovingIndex;
+        for (let step = 0; step < count; step += 1) {
+            index = (index + delta + count) % count;
+            const el = this.#focusables[index];
+            if (el && !el.disabled)
+                break;
+        }
+        this.#rovingIndex = index;
         this.#applyRoving();
         this.#focusables[this.#rovingIndex]?.focus();
     }
@@ -533,13 +858,16 @@ export class Toolbar {
             return;
         }
         const target = event.target;
-        // Arrow roving applies ONLY to buttons. The native <select> owns its own
-        // key handling; hijacking Left/Right there would break value changing.
-        if (!target || target.tagName !== 'BUTTON')
+        if (!target)
             return;
         const index = this.#focusables.indexOf(target);
-        if (index >= 0)
-            this.#rovingIndex = index;
+        if (index < 0)
+            return;
+        this.#rovingIndex = index;
+        // Left/Right belong to the toolbar on every control, including a select.
+        // Everything else a select uses -- Up/Down, Home/End, typeahead, Alt+Down to
+        // open the list -- is left alone, which is what keeps it operable.
+        const isSelect = target.tagName === 'SELECT';
         switch (event.key) {
             case 'ArrowRight':
                 event.preventDefault();
@@ -550,10 +878,14 @@ export class Toolbar {
                 this.#moveRoving(-1);
                 break;
             case 'Home':
+                if (isSelect)
+                    break;
                 event.preventDefault();
                 this.#setRoving(0);
                 break;
             case 'End':
+                if (isSelect)
+                    break;
                 event.preventDefault();
                 this.#setRoving(this.#focusables.length - 1);
                 break;
@@ -568,10 +900,10 @@ export class Toolbar {
             this.#focusables[this.#rovingIndex]?.focus();
             return;
         }
-        // A toolbar that is only the block-type select has no roving buttons.
-        // The shortcut is still documented; swallowing it with nowhere to go
-        // would make a valid `toolbar` attribute a silent no-op.
-        this.#select?.focus();
+        // A bar of nothing but custom controls has no roving stop of its own. The
+        // shortcut is still documented; swallowing it with nowhere to go would make
+        // a valid `toolbar` attribute a silent no-op.
+        this.#customs.find(({ control }) => control.focusable)?.control.focusable?.focus();
     }
     /** Return focus and the prior selection to the editable region. */
     returnFocusToContent() {