synabun 2.0.9 → 2.1.0

package/neural-interface/public/shared/data-cache.js

@@ -0,0 +1,223 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — data cache
+// ═══════════════════════════════════════════
+// One cache for what windows, menus and dropdowns wait for when they open
+// (model lists, provider lists, accounts, Settings' reads). In memory, per
+// page: a kept answer is given at once and asked for again in the background
+// once it is old (stale-while-revalidate); callers asking at the same time
+// share one request; nothing is kept from a failed request. A change event
+// ages an answer (markStale: still given, asked for again) or drops it
+// (invalidate: the next read waits, `refetch` asks for it right away), and
+// subscribers hear when a background read brought another answer, so an open
+// window can update in place.
+//
+// `persist: true` also keeps the last answer in sessionStorage (this tab only,
+// gone when it closes): a reload paints from it at once. An answer read back
+// from there is always asked for again on its first read.
+//
+// No DOM, no imports: runs under node --test as well.
+
+const STORAGE_PREFIX = 'synabun:data-cache:v1:';
+const MAX_PERSIST_CHARS = 768 * 1024;
+
+const registry = new Map(); // name → cache (invalidateDataCaches)
+
+function sameJson(a, b) {
+  if (a === b) return true;
+  try { return JSON.stringify(a) === JSON.stringify(b); } catch { return false; }
+}
+
+function session() {
+  try { return typeof sessionStorage !== 'undefined' ? sessionStorage : null; } catch { return null; }
+}
+
+/**
+ * @param {string} name
+ * @param {object} o
+ * @param {(key:string, opts:{force:boolean})=>Promise<any>} o.load  the request; throw on failure
+ * @param {number} [o.ttlMs]           how long an answer is fresh
+ * @param {boolean} [o.persist]        keep the last answer in sessionStorage too
+ * @param {(value:any, key:string)=>boolean} [o.accept]  worth keeping (a failed or empty answer is not)
+ * @param {(a:any, b:any)=>boolean} [o.equals]
+ */
+export function createDataCache(name, {
+  load,
+  ttlMs = 60_000,
+  persist = false,
+  accept = (value) => value !== undefined && value !== null,
+  equals = sameJson,
+  now = () => Date.now(),
+} = {}) {
+  if (typeof load !== 'function') throw new Error(`data cache ${name}: load is required`);
+  const entries = new Map();     // key → { value, at, stale }
+  const inflight = new Map();    // key → promise
+  const generations = new Map(); // key → bumped by invalidate(): a request begun before it is not kept
+  const listeners = new Set();
+  const restored = new Set();    // keys looked up in sessionStorage already
+
+  const storageKey = (key) => `${STORAGE_PREFIX}${name}:${key}`;
+  const ok = (value, key) => { try { return accept(value, key) === true; } catch { return false; } };
+
+  function restore(key) {
+    if (!persist || restored.has(key)) return;
+    restored.add(key);
+    if (entries.has(key)) return;
+    try {
+      const raw = session()?.getItem(storageKey(key));
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (parsed && parsed.value !== undefined && ok(parsed.value, key)) entries.set(key, { value: parsed.value, at: Number(parsed.at) || 0, stale: true });
+    } catch { /* unreadable: nothing kept */ }
+  }
+
+  function save(key, entry) {
+    if (!persist) return;
+    try {
+      const text = JSON.stringify({ at: entry.at, value: entry.value });
+      if (text.length > MAX_PERSIST_CHARS) { session()?.removeItem(storageKey(key)); return; }
+      session()?.setItem(storageKey(key), text);
+    } catch { /* full or unavailable: memory still has it */ }
+  }
+
+  function forget(key) {
+    if (!persist) return;
+    try { session()?.removeItem(storageKey(key)); } catch { /* unavailable */ }
+  }
+
+  function notify(key, value, previous) {
+    for (const listener of [...listeners]) {
+      try { listener(key, value, previous); } catch { /* a listener's failure is its own */ }
+    }
+  }
+
+  function store(key, value) {
+    const previous = entries.get(key);
+    const same = !!previous && equals(previous.value, value);
+    const entry = { value: same ? previous.value : value, at: now(), stale: false };
+    entries.set(key, entry);
+    save(key, entry);
+    if (!same) notify(key, entry.value, previous?.value);
+    return entry.value;
+  }
+
+  function fresh(entry) {
+    return !!entry && !entry.stale && now() - entry.at < ttlMs;
+  }
+
+  function request(key, force) {
+    if (inflight.has(key)) return inflight.get(key);
+    const generation = generations.get(key) || 0;
+    const job = (async () => {
+      try {
+        const value = await load(key, { force });
+        if (ok(value, key) && (generations.get(key) || 0) === generation) return { value: store(key, value), kept: true };
+        return { value, kept: false };
+      } finally {
+        if (inflight.get(key) === job) inflight.delete(key);
+      }
+    })();
+    inflight.set(key, job);
+    return job;
+  }
+
+  /** `{ value, cached, stale }`: a kept answer at once (asked for again when old), else the request's. */
+  async function read(key = '', { force = false } = {}) {
+    const id = String(key);
+    restore(id);
+    const entry = entries.get(id);
+    if (!force && entry) {
+      const stale = !fresh(entry);
+      if (stale) request(id, false).catch(() => {});
+      return { value: entry.value, cached: true, stale };
+    }
+    const result = await request(id, force);
+    return { value: result.value, cached: false, stale: false, kept: result.kept };
+  }
+
+  const cache = {
+    name,
+    read,
+    async get(key = '', options = {}) { return (await read(key, options)).value; },
+    /** The kept answer, or undefined: never waits. An old one (or one read back after a reload) is asked for again behind it. */
+    peek(key = '') {
+      const id = String(key);
+      restore(id);
+      const entry = entries.get(id);
+      if (entry && !fresh(entry)) request(id, false).catch(() => {});
+      return entry?.value;
+    },
+    has(key = '') { const id = String(key); restore(id); return entries.has(id); },
+    /** True while nothing was kept and a request is running (the one moment a spinner is right). */
+    loading(key = '') { const id = String(key); restore(id); return !entries.has(id) && inflight.has(id); },
+    /** Ask now unless a fresh answer is kept; resolves when done, never rejects. */
+    prefetch(key = '') {
+      const id = String(key);
+      restore(id);
+      if (fresh(entries.get(id))) return Promise.resolve(entries.get(id).value);
+      return request(id, false).then((result) => result.value, () => undefined);
+    },
+    /** Ask again now (one request for every caller); resolves to the answer, never rejects. */
+    refresh(key = '', { force = false } = {}) {
+      return request(String(key), force).then((result) => result.value, () => undefined);
+    },
+    /** Keep an answer obtained elsewhere (a save that returned the new state). */
+    set(key = '', value) { const id = String(key); if (ok(value, id)) store(id, value); },
+    /** The answer is due: still given, asked for again on the next read (`refetch`: now). */
+    markStale(key = null, { refetch = false } = {}) {
+      const ids = key === null ? [...entries.keys()] : [String(key)];
+      for (const id of ids) {
+        restore(id);
+        const entry = entries.get(id);
+        if (entry) entry.stale = true;
+        if (refetch) request(id, false).catch(() => {});
+      }
+    },
+    /** Drop the answer: the next read waits for a new one; a request already running is not kept (`refetch`: ask now). */
+    invalidate(key = null, { refetch = false } = {}) {
+      const ids = key === null ? [...new Set([...entries.keys(), ...inflight.keys()])] : [String(key)];
+      for (const id of ids) {
+        entries.delete(id);
+        restored.add(id);
+        forget(id);
+        generations.set(id, (generations.get(id) || 0) + 1);
+        // A request begun before this is not joined by later reads: its answer is from before the change.
+        inflight.delete(id);
+        if (refetch) request(id, false).catch(() => {});
+      }
+    },
+    /** `listener(key, value, previous)` whenever another answer is kept. Returns the function that stops it. */
+    subscribe(listener) {
+      if (typeof listener !== 'function') return () => {};
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    keys() { return [...entries.keys()]; },
+  };
+  registry.set(name, cache);
+  return cache;
+}
+
+/** The cache registered under `name`, or null. */
+export function dataCache(name) {
+  return registry.get(name) || null;
+}
+
+/** Drop every answer of the named caches (or of all of them): a sign-out, a server that came back as another. */
+export function invalidateDataCaches(names = null) {
+  for (const [name, cache] of registry) {
+    if (!names || names.includes(name)) cache.invalidate();
+  }
+}
+
+/**
+ * Run `fn` when the page is idle (requestIdleCallback where there is one; Safari has none, so a short timer
+ * there), at most `timeout` ms later. Returns a function that cancels it.
+ */
+export function whenIdle(fn, { timeout = 1500, fallbackMs = 120 } = {}) {
+  if (typeof window !== 'undefined' && typeof window.requestIdleCallback === 'function') {
+    const id = window.requestIdleCallback(() => fn(), { timeout });
+    return () => { try { window.cancelIdleCallback?.(id); } catch { /* gone */ } };
+  }
+  const id = setTimeout(fn, fallbackMs);
+  return () => clearTimeout(id);
+}

package/neural-interface/public/shared/desktop-bridge.js

@@ -25,6 +25,17 @@ export function isDesktopApp(win = globalThis.window) {
   return desktopBridge(win) !== null;
 }
 
+/**
+ * The desktop app's own settings (Settings > App: packaging/desktop/src/app-prefs.mjs, login-item.mjs): state(),
+ * set(key, value), openFolder('data' | 'logs'), openLoginSettings(), relaunch(), onChange(listener).
+ * Null in a browser, and in an app from before Settings > App.
+ */
+export function desktopApp(win = globalThis.window) {
+  const api = desktopBridge(win)?.app;
+  if (!api || typeof api !== 'object' || typeof api.state !== 'function' || typeof api.set !== 'function') return null;
+  return api;
+}
+
 /**
  * The title bar of the desktop app's main window (packaging/desktop/src/titlebar.mjs): its facts
  * ({ style, platform, height, controls, appMenu }), its state, the app's menu and the caption buttons' colours.

package/neural-interface/public/shared/desktop-titlebar-view.js

@@ -8,7 +8,9 @@
 // its ends. desktop-titlebar.js does the page's part; this file decides, from
 // plain values: the colours the caption buttons get, whether the bar makes room
 // for them now, where they are when the page has no Window Controls Overlay API,
-// and whether something drawn over the bar has to get its clicks.
+// whether something drawn over the bar has to get its clicks, and which changes
+// of the page can put something there (changedClasses, styleChange,
+// drawnUnderBar).
 //
 // No imports and no DOM: `node --test` loads this file as it is
 // (tests/desktop-titlebar-view.test.mjs).
@@ -120,3 +122,78 @@ export function barCovered(samples) {
 
 /** A stable key for a pair of colours: unchanged colours are never sent twice. */
 export const colorsKey = (colors) => (colors ? `${colors.color}/${colors.symbolColor}` : '');
+
+/** The class names one of two class attributes has and the other has not (none: the same classes, in any order). */
+export function changedClasses(before, after) {
+  const was = new Set(String(before ?? '').split(/\s+/).filter(Boolean));
+  const is = new Set(String(after ?? '').split(/\s+/).filter(Boolean));
+  return [...[...was].filter(name => !is.has(name)), ...[...is].filter(name => !was.has(name))];
+}
+
+// Inline style properties a tooltip that follows the pointer, a window being dragged or a panel being resized
+// changes on every frame: they move, size or paint a box, and never show or hide one.
+const MOVES_OR_PAINTS = /^(?:--.+|top|left|right|bottom|inset(?:-[a-z-]+)?|(?:min-|max-)?(?:width|height)|margin(?:-[a-z-]+)?|padding(?:-[a-z-]+)?|transform(?:-origin)?|translate|scale|rotate|opacity|color|background(?:-[a-z-]+)?|border(?:-[a-z-]+)?|box-shadow|outline(?:-[a-z-]+)?|filter|(?:-webkit-)?backdrop-filter|transition(?:-[a-z-]+)?|animation(?:-[a-z-]+)?|cursor|font(?:-[a-z-]+)?|line-height|letter-spacing|text-[a-z-]+|white-space)$/;
+
+/** An inline style attribute as property → value. */
+function declarations(text) {
+  const out = new Map();
+  for (const part of String(text ?? '').split(';')) {
+    const at = part.indexOf(':');
+    const name = at < 0 ? '' : part.slice(0, at).trim().toLowerCase();
+    if (name) out.set(name, part.slice(at + 1).trim());
+  }
+  return out;
+}
+
+/**
+ * What a change of an inline style attribute (`before` → `after`) did: 'none' (the same declarations), 'move' (only
+ * properties that move, size or paint a box: MOVES_OR_PAINTS) or 'other' (display, visibility, pointer-events,
+ * z-index, position or anything else, which can show, hide or restack it).
+ */
+export function styleChange(before, after) {
+  const was = declarations(before);
+  const is = declarations(after);
+  let kind = 'none';
+  for (const name of new Set([...was.keys(), ...is.keys()])) {
+    if (was.get(name) === is.get(name)) continue;
+    if (!MOVES_OR_PAINTS.test(name)) return 'other';
+    kind = 'move';
+  }
+  return kind;
+}
+
+/** The z-index a box is stacked at from its computed style, when it is positioned and has one; null otherwise. */
+export function stackLevel(style) {
+  const z = Number.parseInt(style?.zIndex, 10);
+  return style?.position && style.position !== 'static' && Number.isFinite(z) ? z : null;
+}
+
+const isSet = (value) => !!value && value !== 'none';
+
+/**
+ * Whether nothing inside an element can be drawn over the bar, from the element's computed style, for an element
+ * that is the bar's sibling (both children of <body>, the bar stacked at `barLevel`): it draws nothing (display:
+ * none), or it is a stacking context of its own (a z-index on a positioned box, position fixed or sticky, a
+ * transform, a filter, opacity, isolation, a blend mode, paint or layout containment) stacked under the bar. Whatever
+ * its descendants' z-index, they are drawn inside it. Only the top layer escapes (a modal dialog, a popover), which
+ * the caller watches by itself; and a rule can restyle the element from what it holds (`:has()`), so the answer holds
+ * only until something inside it changes. Anything it cannot tell is false.
+ */
+export function drawnUnderBar(style, barLevel) {
+  if (!style || !Number.isFinite(barLevel)) return false;
+  if (style.display === 'none') return true;
+  if (style.display === 'contents') return false;
+  const z = Number.parseInt(style.zIndex, 10);
+  const positioned = !!style.position && style.position !== 'static';
+  const ownContext = (positioned && Number.isFinite(z))
+    || style.position === 'fixed' || style.position === 'sticky'
+    || isSet(style.transform) || isSet(style.filter) || isSet(style.backdropFilter) || isSet(style.webkitBackdropFilter)
+    || Number.parseFloat(style.opacity) < 1
+    || style.isolation === 'isolate'
+    || (!!style.mixBlendMode && style.mixBlendMode !== 'normal')
+    || /\b(?:paint|layout|strict|content)\b/.test(String(style.contain || ''));
+  if (!ownContext) return false;
+  // A z-index on a box that is not positioned counts only on a flex or grid item: read as at least 0 there.
+  const level = Number.isFinite(z) ? (positioned ? z : Math.max(z, 0)) : 0;
+  return level < barLevel;
+}

package/neural-interface/public/shared/desktop-titlebar.js

@@ -17,7 +17,8 @@
 //            menu, the one the hidden menu bar had (its shortcuts still work)
 //   clicks   the bar's empty parts drag the window (the system double-clicks
 //            them too); while something is drawn over the bar (a dialog, the
-//            tour), that thing gets the clicks: body.desktop-titlebar-covered
+//            tour), that thing gets the clicks: body.desktop-titlebar-covered,
+//            checked only after a change that can put something there
 //
 // In a browser and in the installed PWA nothing here runs: initDesktopTitleBar()
 // returns null, and the PWA's own overlay handling (ui-navbar.js) is untouched.
@@ -26,11 +27,19 @@
 
 import { desktopWindow } from './desktop-bridge.js';
 import { colorSender, textTone } from './desktop-titlebar-page.js';
-import { barCovered, fallbackTitlebarArea, overlayColorsFor, titleBarActive } from './desktop-titlebar-view.js';
+import { barCovered, changedClasses, drawnUnderBar, fallbackTitlebarArea, overlayColorsFor, stackLevel, styleChange, titleBarActive } from './desktop-titlebar-view.js';
 import { t } from './i18n.js';
 
 const MENU_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>';
 const COLOR_DELAY_MS = 120;
+// The cover check while the page keeps changing: at most one per COVER_INTERVAL_MS (four a second).
+const COVER_INTERVAL_MS = 250;
+// The classes of <body> this module writes itself: never a reason to check again.
+const OWN_BODY_CLASSES = new Set(['desktop-titlebar-covered', 'wco-active']);
+// What a change of the page can do to the cover.
+const IGNORE = 0;
+const SOON = 1;
+const NOW = 2;
 
 /**
  * The map pages (index.html, index2d.html): #title-bar becomes the window's title bar. Returns the controller, or
@@ -69,24 +78,146 @@ export function initDesktopTitleBar({ doc = document, view = window } = {}) {
   }
 
   // ── Covered: something over the bar takes its clicks, so the bar stops dragging the window ──
+  // Chromium gives the page no mouse events over a drag region, so this has to be right before the pointer gets
+  // there. Measuring it costs a layout and the hit tests, so it runs only after a change that can put something over
+  // the bar or take it away (pageChange below): on the next frame (coverNow) for an overlay's root coming, going,
+  // shown or hidden, at most every COVER_INTERVAL_MS (coverSoon: at once when the page was quiet, then once more after
+  // the last change) for the rest, and never for text or for what the bar holds. A change inside a part of the page
+  // drawn under the bar (a side panel's transcript, a terminal's output) only has that part's style read again, in
+  // case a rule lifted it over the bar (the side panels' `:has(.…-dropdown.open)`); the bar is measured then only if
+  // one was.
+  const body = doc.body;
+  const clock = () => (typeof view.performance?.now === 'function' ? view.performance.now() : Date.now());
   let coverFrame = 0;
+  let coverTimer = null;
+  let measureNow = false; // the next check measures the bar
+  let soonPending = false; // work at the throttled pace is waiting: verdicts, and the bar's measure when soonMeasure
+  let soonMeasure = false;
+  let lastSoon = -Infinity; // when that work last ran
+  // Children of <body> drawn under the bar as a whole (drawnUnderBar), and those whose verdict the next check takes
+  // again: read during a check, when the page's style is current anyway, and never their layout.
+  const underBar = new Set();
+  const toJudge = new Set();
+  const judgeAgain = () => { for (const part of underBar) toJudge.add(part); };
+  /** Takes the verdicts asked for; true when a part that was drawn under the bar no longer is. */
+  const judgeParts = () => {
+    if (!toJudge.size) return false;
+    const level = bar.parentNode === body ? stackLevel(view.getComputedStyle(bar)) : null;
+    let lifted = false;
+    for (const part of toJudge) {
+      if (level !== null && part.parentNode === body && drawnUnderBar(view.getComputedStyle(part), level)) underBar.add(part);
+      else if (underBar.delete(part)) lifted = true;
+    }
+    toJudge.clear();
+    return lifted;
+  };
   const checkCover = () => {
     coverFrame = 0;
-    if (!doc.body.classList.contains('wco-active')) { doc.body.classList.remove('desktop-titlebar-covered'); return; }
-    const rect = bar.getBoundingClientRect();
-    const area = wco && wco.visible ? wco.getTitlebarAreaRect() : null;
-    const left = Math.max(rect.left, area ? area.x : rect.left) + 2;
-    const right = Math.min(rect.right, area ? area.x + area.width : rect.right) - 2;
-    if (!(right > left) || !(rect.height > 0)) { doc.body.classList.remove('desktop-titlebar-covered'); return; }
-    const y = Math.round(rect.top + rect.height / 2);
-    const samples = [];
-    for (let i = 0; i <= 8; i++) {
-      const el = doc.elementFromPoint(Math.round(left + ((right - left) * i) / 8), y);
-      samples.push({ inBar: !!el && (el === bar || bar.contains(el)), page: !el || el === html || el === doc.body });
+    let measure = measureNow;
+    measureNow = false;
+    const now = clock();
+    if (soonPending && now - lastSoon >= COVER_INTERVAL_MS) {
+      soonPending = false;
+      lastSoon = now;
+      if (soonMeasure) measure = true;
+      soonMeasure = false;
+    }
+    // Reads in one go (the style, then one layout and the hit tests), then at most one write, and only of a change.
+    if (judgeParts()) measure = true;
+    if (measure) {
+      let covered = false;
+      if (body.classList.contains('wco-active')) {
+        const rect = bar.getBoundingClientRect();
+        const area = wco && wco.visible ? wco.getTitlebarAreaRect() : null;
+        const left = Math.max(rect.left, area ? area.x : rect.left) + 2;
+        const right = Math.min(rect.right, area ? area.x + area.width : rect.right) - 2;
+        if (right > left && rect.height > 0) {
+          const y = Math.round(rect.top + rect.height / 2);
+          for (let i = 0; i <= 8 && !covered; i++) {
+            const el = doc.elementFromPoint(Math.round(left + ((right - left) * i) / 8), y);
+            covered = barCovered([{ inBar: !!el && (el === bar || bar.contains(el)), page: !el || el === html || el === body }]);
+          }
+        }
+      }
+      if (body.classList.contains('desktop-titlebar-covered') !== covered) body.classList.toggle('desktop-titlebar-covered', covered);
     }
-    doc.body.classList.toggle('desktop-titlebar-covered', barCovered(samples));
+    if (soonPending) armSoon();
+  };
+  /** The next check for the throttled work: the next frame once COVER_INTERVAL_MS has passed since it last ran. */
+  const armSoon = () => {
+    if (coverFrame || coverTimer) return;
+    const wait = lastSoon + COVER_INTERVAL_MS - clock();
+    if (wait <= 0) coverFrame = view.requestAnimationFrame(checkCover);
+    else coverTimer = setTimeout(() => { coverTimer = null; if (!coverFrame) coverFrame = view.requestAnimationFrame(checkCover); }, wait);
+  };
+  /** A check on the next frame; `measured` false: only the verdicts asked for, unless one changes. */
+  const coverNow = (measured = true) => {
+    if (measured) measureNow = true;
+    if (!coverFrame) coverFrame = view.requestAnimationFrame(checkCover);
+  };
+  /** A check at the throttled pace: at once after a quiet COVER_INTERVAL_MS, else when it is over (leading, trailing). */
+  const coverSoon = (measured = true) => {
+    soonPending = true;
+    if (measured) soonMeasure = true;
+    armSoon();
+  };
+
+  /** The child of <body> that holds `node` (the node itself when it is one); null for <body> or a node off the page. */
+  const partOf = (node) => {
+    for (let n = node; n; n = n.parentNode) if (n.parentNode === body) return n;
+    return null;
+  };
+  const hasElement = (nodes) => { for (const node of nodes || []) if (node?.nodeType === 1) return true; return false; };
+  // Each change → [IGNORE | SOON | NOW, whether the bar has to be measured].
+  const QUIET = [IGNORE, false];
+  const childListChange = (record) => {
+    if (!hasElement(record.addedNodes) && !hasElement(record.removedNodes)) return QUIET; // text
+    const target = record.target;
+    if (target === body) { judgeAgain(); return [NOW, true]; } // an overlay's root; a sibling selector may match anew
+    const part = partOf(target);
+    if (!part || part === bar) return QUIET; // off the page, or what the bar holds: that counts as the bar
+    toJudge.add(part);
+    if (target === part) return [NOW, true]; // an overlay's root got or lost a child (:empty, :has() can show it)
+    return [SOON, !underBar.has(part)];
+  };
+  const attributeChange = ({ target, name, before, after }) => {
+    // A modal dialog is drawn above everything, wherever it is in the page.
+    if (name === 'open' && target.nodeName === 'DIALOG') return [NOW, true];
+    if (target === body) {
+      if (name === 'class' && changedClasses(before, after).every(token => OWN_BODY_CLASSES.has(token))) return QUIET;
+      judgeAgain();
+      return [NOW, true];
+    }
+    const part = partOf(target);
+    if (!part) return QUIET;
+    if (part === bar) return target === bar ? [NOW, true] : QUIET;
+    toJudge.add(part);
+    // Shown, hidden or restacked: on the next frame; only moved, sized or repainted: at the throttled pace. Inside a
+    // part drawn under the bar only its style is read again (a class can lift the whole part).
+    const moveOnly = name === 'style' && styleChange(before, after) !== 'other';
+    return [moveOnly ? SOON : NOW, target === part || !underBar.has(part)];
+  };
+  /** What a batch of the page's changes can do to the cover; a record this cannot read counts as one that can. */
+  const pageChange = (records) => {
+    const { attributes, others } = foldRecords(records);
+    // The next frame's work and the throttled work, each with whether it measures the bar: kept apart, so that a
+    // verdict read on the next frame never takes a throttled measure along before its time.
+    let next = false;
+    let nextMeasured = false;
+    let soon = false;
+    let soonMeasured = false;
+    const add = ([level, measured]) => {
+      if (level === NOW) { next = true; if (measured) nextMeasured = true; }
+      else if (level === SOON) { soon = true; if (measured) soonMeasured = true; }
+    };
+    for (const record of others) {
+      if (record?.type === 'characterData') continue; // text
+      add(record?.type === 'childList' && record.target ? childListChange(record) : [NOW, true]);
+    }
+    for (const change of attributes) add(attributeChange(change));
+    if (next) coverNow(nextMeasured);
+    if (soon) coverSoon(soonMeasured);
   };
-  const scheduleCover = () => { if (!coverFrame) coverFrame = view.requestAnimationFrame(checkCover); };
 
   // ── Colours: the bar as drawn where the buttons are, over whatever is under it there ──
   let colorTimer = null;
@@ -124,7 +255,7 @@ export function initDesktopTitleBar({ doc = document, view = window } = {}) {
       html.style.setProperty('--desktop-titlebar-width', `${area.width}px`);
       html.style.setProperty('--desktop-titlebar-height', `${area.height}px`);
     }
-    scheduleCover();
+    coverNow();
     scheduleColors();
   };
   const setState = (next) => { if (next && typeof next === 'object') state = { ...state, ...next }; layout(); };
@@ -133,21 +264,76 @@ export function initDesktopTitleBar({ doc = document, view = window } = {}) {
   Promise.resolve(api.state()).then(setState).catch(() => {});
   if (typeof api.onState === 'function') api.onState(setState);
   wco?.addEventListener('geometrychange', layout);
-  view.addEventListener('resize', () => { scheduleCover(); scheduleColors(); });
-  bar.addEventListener('transitionend', scheduleColors);
+  view.addEventListener('resize', () => { coverNow(); scheduleColors(); });
+  // The bar's own transitions (its background, its left edge beside a sidebar); what it holds never colours the buttons.
+  bar.addEventListener('transitionend', (event) => { if (event?.target === bar) { scheduleColors(); coverSoon(); } });
+  if (typeof doc.addEventListener === 'function') {
+    // A popover is drawn above everything without a change of the page to see; an element in full screen too.
+    doc.addEventListener('toggle', (event) => { if (event?.target?.nodeName !== 'DETAILS') coverNow(); }, true);
+    doc.addEventListener('fullscreenchange', () => coverNow());
+  }
 
   // What changes the bar's colours: its own class and style (the Memory Explorer, a sidebar), the stylesheets (a
-  // skin's <link>, which draws once it has loaded) and the interface settings (variables on <html>).
-  new view.MutationObserver(scheduleColors).observe(bar, { attributes: true, attributeFilter: ['class', 'style'] });
-  new view.MutationObserver((records) => {
-    for (const record of records) {
-      for (const node of record.addedNodes || []) if (node.tagName === 'LINK') node.addEventListener('load', scheduleColors, { once: true });
-    }
+  // skin's <link>, which draws once it has loaded) and the interface settings (variables on <html>). A class flipped
+  // and back, a <title> or a <meta> changes nothing. A stylesheet or <html> can also restack the page: the cover too
+  // (a theme's class or a stylesheet that loaded at once, the rest at the throttled pace).
+  const restyled = (now) => {
+    judgeAgain();
     scheduleColors();
-  }).observe(doc.head, { childList: true, subtree: true, attributes: true, attributeFilter: ['href', 'media', 'disabled'] });
-  new view.MutationObserver(scheduleColors).observe(html, { attributes: true, attributeFilter: ['style', 'class'] });
-  // What can come over the bar: anything added, shown or moved on the page.
-  new view.MutationObserver(scheduleCover).observe(doc.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style', 'hidden', 'open'] });
+    if (now) coverNow(); else coverSoon();
+  };
+  new view.MutationObserver((records) => {
+    const { attributes, others } = foldRecords(records);
+    if (attributes.length || others.length) scheduleColors();
+  }).observe(bar, { attributes: true, attributeOldValue: true, attributeFilter: ['class', 'style'] });
+  const onSheetLoad = () => restyled(true);
+  new view.MutationObserver((records) => {
+    const { attributes, others } = foldRecords(records);
+    for (const record of others) for (const node of record?.addedNodes || []) if (node.tagName === 'LINK') node.addEventListener('load', onSheetLoad, { once: true });
+    if (attributes.some(change => isStylesheet(change.target)) || others.some(sheetsChanged)) restyled(false);
+  }).observe(doc.head, { childList: true, subtree: true, attributes: true, attributeOldValue: true, attributeFilter: ['href', 'media', 'disabled'] });
+  new view.MutationObserver((records) => {
+    const { attributes, others } = foldRecords(records);
+    if (attributes.length || others.length) restyled(others.length > 0 || attributes.some(change => change.name === 'class'));
+  }).observe(html, { attributes: true, attributeOldValue: true, attributeFilter: ['style', 'class'] });
+  // What can come over the bar: anything added, shown or moved on the page (pageChange keeps what can matter).
+  new view.MutationObserver(pageChange).observe(body, { childList: true, subtree: true, attributes: true, attributeOldValue: true, attributeFilter: ['class', 'style', 'hidden', 'open'] });
 
   return { facts, menuButton, refresh: layout, state: () => ({ ...state }) };
 }
+
+/**
+ * One MutationObserver batch with each attribute's records folded into its net change: { target, name, before,
+ * after } for an attribute whose value now differs from its value before the batch (a class removed and added back
+ * in the same frame is no change), and the other records as they came.
+ */
+function foldRecords(records) {
+  const first = new Map();
+  const others = [];
+  for (const record of records || []) {
+    if (record?.type !== 'attributes' || !record.target || !record.attributeName) { others.push(record); continue; }
+    let names = first.get(record.target);
+    if (!names) first.set(record.target, (names = new Map()));
+    if (!names.has(record.attributeName)) names.set(record.attributeName, record.oldValue ?? null);
+  }
+  const attributes = [];
+  for (const [target, names] of first) {
+    for (const [name, before] of names) {
+      const after = target.getAttribute(name);
+      if (after !== before) attributes.push({ target, name, before, after });
+    }
+  }
+  return { attributes, others };
+}
+
+const isStylesheet = (node) => node?.nodeName === 'LINK' || node?.nodeName === 'STYLE';
+
+/** Whether a record of <head> added or removed a stylesheet or changed one's text; a record this cannot read did. */
+function sheetsChanged(record) {
+  if (record?.type !== 'childList') return true;
+  if (isStylesheet(record.target)) return true;
+  for (const nodes of [record.addedNodes, record.removedNodes]) {
+    for (const node of nodes || []) if (isStylesheet(node) || node?.querySelector?.('link, style')) return true;
+  }
+  return false;
+}