@driftengine/tools 4.8.1 → 4.8.2

package/README.md

@@ -4,7 +4,7 @@ The editor's panels, as something a shipped game can carry: an inspector, a cons
 a network panel, with the command stack that makes their edits undoable, and the overlay that puts
 them on screen on a key.
 
-**5,393 bytes gzipped**, measured by `scripts/size-gate.test.mjs` against
+**5,780 bytes gzipped**, measured by `scripts/size-gate.test.mjs` against
 `scripts/fixtures/size/tools-only.ts`. Optional — nothing in `@driftengine/core` imports it, so a
 game that never asks for these pays nothing.
 
@@ -30,14 +30,32 @@ undo stack" has no worst offender. A game carrying these panels carries that rul
 nothing extra.
 
 ```ts
-import { createUndoStack, inspectorPanel, createInspectorView } from '@driftengine/tools';
+import {
+  createSelection,
+  createUndoStack,
+  entitiesInspectable,
+  selectOnly,
+  selectedEntities,
+  setFieldCommand,
+} from '@driftengine/tools';
 
 const undo = createUndoStack(200);
-const view = createInspectorView({});
-const command = inspectorPanel.route(world, view, event);
+const selection = createSelection();
+selectOnly(selection, ball);
+/* One edit to every selected entity, as one entry: `undo.undo()` takes it back. */
+const command = setFieldCommand(
+  entitiesInspectable(world, [Bounce]),
+  selectedEntities(selection),
+  'Bounce',
+  ['amount'],
+  [0.6],
+);
 if (command !== null) undo.push(command);
 ```
 
+The inspector panel shows a selection's fields and edits none of them yet — its `route` answers
+nothing — so a game edits through `setFieldCommand` as above, from whatever key or control it likes.
+
 ## The overlay, because a panel that nothing mounts is a tree nobody sees
 
 Every panel above builds a `UiNode` tree and stops there. For 4.0.0 the half that turns a tree into

package/dist/console.js

@@ -133,10 +133,15 @@ export const consolePanel = {
     id: 'console',
     title: 'Console',
     build(world, view, root) {
+        /* The window is the height the panel was given, where it was given one: the overlay sets it on
+           the root before it builds. `viewHeight` is what a root with no exact height falls back to. */
+        if (typeof root.height === 'number' && root.height > 0)
+            view.viewHeight = root.height;
         view.shown = filteredEntries(world.log, view.filter);
         if (view.shown.length === 0) {
             emptyPanel(root, 'Nothing logged');
             view.scrollY = 0;
+            root.scrollY = 0;
             return;
         }
         root.children.length = 0;
@@ -153,6 +158,8 @@ export const consolePanel = {
         /* The follow happens here and not on append, because only a build knows how tall the list is. */
         if (view.pinned)
             view.scrollY = maxScroll(view, view.shown.length);
+        /* And onto the root, which is what ui2d offsets the rows by: the scroll that is drawn. */
+        root.scrollY = view.scrollY;
     },
     route(_world, view, event) {
         if (event.kind === 'wheel') {
@@ -162,6 +169,7 @@ export const consolePanel = {
             const limit = maxScroll(view, view.shown.length);
             view.scrollY = Math.min(limit, Math.max(0, view.scrollY + event.dy));
             view.pinned = view.scrollY >= limit;
+            view.root.scrollY = view.scrollY;
             return null;
         }
         if (event.kind !== 'pointer' || event.phase !== 'up' || event.button !== 0)

package/dist/index.d.ts

@@ -35,4 +35,4 @@ export type { NetworkReadout, NetworkView, NetworkWorld, RollbackHistory } from
 export type { SessionLike, SessionRecorder } from './network.ts';
 export { componentDivergence, createNetworkView, createRollbackHistory, createSessionRecorder, networkPanel, observeSession, pushRollback, rollbackValues, sessionReadout, } from './network.ts';
 export type { OverlayPainter, OverlaySite, PanelBinding, ToolsOverlay, ToolsOverlayOptions, } from './overlay.ts';
-export { bindPanel, createToolsOverlay, paintOverlay } from './overlay.ts';
+export { PANEL_TITLE_HEIGHT, bindPanel, createToolsOverlay, paintOverlay } from './overlay.ts';

package/dist/index.js

@@ -7,4 +7,4 @@ export { MIXED, addComponentCommand, createInspectorView, entitiesInspectable, f
 export { DISPLAY_LIMIT, appendLog, consolePanel, createConsoleView, createLogFilter, createLogRing, displayText, filteredEntries, jumpToSourceCommand, logEntries, } from './console.js';
 export { createFrameHistory, createGpuPassTimings, createProfilerView, formatMs, historyValues, occupancy, profilerPanel, profilerRows, pushFrame, recordGpuSample, } from './profiler.js';
 export { componentDivergence, createNetworkView, createRollbackHistory, createSessionRecorder, networkPanel, observeSession, pushRollback, rollbackValues, sessionReadout, } from './network.js';
-export { bindPanel, createToolsOverlay, paintOverlay } from './overlay.js';
+export { PANEL_TITLE_HEIGHT, bindPanel, createToolsOverlay, paintOverlay } from './overlay.js';

package/dist/inspector.d.ts

@@ -30,7 +30,10 @@ export interface InspectorRow {
     readonly component: string;
     /** What the row is called: a field's name, or the prefix the vector's three share. */
     readonly label: string;
-    /** The declared type, verbatim. Empty for a vector, which is three of them. */
+    /**
+     * The declared type, verbatim. For a vector, the type its three parts share, or empty where they
+     * do not share one.
+     */
     readonly type: string;
     readonly kind: RowKind;
     readonly enumName: string;

package/dist/inspector.js

@@ -104,10 +104,11 @@ export function inspectorRows(world, entities) {
                     continue;
                 emitted.add(part.prefix);
                 const slots = vectors.get(part.prefix);
+                const types = new Set(fields.filter((one) => slots.includes(one.name)).map((one) => one.type));
                 rows.push({
                     component,
                     label: part.prefix,
-                    type: '',
+                    type: types.size === 1 ? field.type : '',
                     kind: 'vector',
                     enumName: '',
                     fields: slots,
@@ -227,12 +228,32 @@ export function rowText(row) {
     if (row.value === MIXED)
         return `${row.label}  —`;
     if (row.kind === 'vector') {
-        const parts = row.value.map((part) => (part === MIXED ? '—' : String(part)));
+        const parts = row.value.map((part) => part === MIXED ? '—' : valueText(part, row.type));
         return `${row.label}  ${parts.join(', ')}`;
     }
     if (row.kind === 'boolean')
         return `${row.label}  ${row.value ? 'true' : 'false'}`;
-    return `${row.label}  ${String(row.value)}`;
+    return `${row.label}  ${valueText(row.value, row.type)}`;
+}
+/**
+ * One value as text: an `f32` as the shortest decimal that stores as the same `f32`.
+ *
+ * **What was written rather than what is stored.** A `Float32Array` hands back the nearest double,
+ * so a bounce of 0.55 reads `0.550000011920929`; the digits past the seventh are the storage, and
+ * the shortest decimal that rounds back to the same `f32` is what anybody wrote. Nine significant
+ * digits always round-trip a single, so the search ends there. An `f64` and anything else keep
+ * `String`, whose own answer is already the shortest for a double.
+ */
+function valueText(value, type) {
+    if (type !== 'f32' || typeof value !== 'number' || !Number.isFinite(value))
+        return String(value);
+    const stored = Math.fround(value);
+    for (let digits = 1; digits < 9; digits += 1) {
+        const shorter = Number(stored.toPrecision(digits));
+        if (Math.fround(shorter) === stored)
+            return String(shorter);
+    }
+    return String(Number(stored.toPrecision(9)));
 }
 export const inspectorPanel = {
     id: 'inspector',

package/dist/network.d.ts

@@ -62,14 +62,25 @@ export declare const networkPanel: Panel<NetworkWorld, NetworkView>;
  * Structural rather than imported, so nothing here loads `@driftengine/network` at run time and a
  * consumer whose session is its own shape can still be read.
  */
-export interface SessionLike {
+/**
+ * A session as the network panel reads it, which a `LockstepSession` is as it stands.
+ *
+ * **The depth by either name**: `rewindDepth` is what a session answers, and `loop.depth` is the
+ * shape a game built by hand before it did — from the session's fields and the `RewindLoop` it
+ * made — which still reads as it did.
+ */
+export type SessionLike = SessionFields & ({
+    readonly rewindDepth: number;
+} | {
+    readonly loop: {
+        readonly depth: number;
+    };
+});
+interface SessionFields {
     readonly participants: number;
     readonly inputDelay: number;
     /** The disagreement the session is currently holding, or null. Latched, not an event. */
     readonly desync: Desync | null;
-    readonly loop: {
-        readonly depth: number;
-    };
 }
 /** What a recorder keeps: the disagreements it has seen, oldest first. */
 export interface SessionRecorder {
@@ -98,3 +109,4 @@ export declare function observeSession(recorder: SessionRecorder, session: Sessi
  * passing zero is saying it has not measured, which the panel renders as such.
  */
 export declare function sessionReadout(session: SessionLike, recorder: SessionRecorder, snapshotBytes: number, componentHashes?: NetworkReadout['componentHashes']): NetworkReadout;
+export {};

package/dist/network.js

@@ -156,7 +156,7 @@ export function sessionReadout(session, recorder, snapshotBytes, componentHashes
         inputDelay: session.inputDelay,
         participants: session.participants,
         snapshotBytes,
-        snapshotCount: session.loop.depth,
+        snapshotCount: 'rewindDepth' in session ? session.rewindDepth : session.loop.depth,
         desyncs: recorder.desyncs,
         componentHashes,
     };

package/dist/overlay.d.ts

@@ -60,6 +60,11 @@ export interface ToolsOverlay {
     invalidate(): void;
     dispose(): void;
 }
+/**
+ * How tall the title row above every panel is, in the overlay's pixels. A panel's own space starts
+ * below it, so a host hit-testing a site by hand reads the content from `site.y` plus this.
+ */
+export declare const PANEL_TITLE_HEIGHT = 18;
 export declare function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay;
 /**
  * Draw the overlay, or draw nothing because it is closed.

package/dist/overlay.js

@@ -41,6 +41,18 @@ export function bindPanel(panel, world, view) {
     };
 }
 const DEFAULT_WIDTH = 320;
+/**
+ * How tall the title row above every panel is, in the overlay's pixels. A panel's own space starts
+ * below it, so a host hit-testing a site by hand reads the content from `site.y` plus this.
+ */
+export const PANEL_TITLE_HEIGHT = 18;
+/**
+ * What every panel is drawn on, and its title on: dark and nearly opaque, so the rows read over a
+ * bright scene. The overlay carried no background until 4.8.2 and a host laid one under each site.
+ */
+const PANEL_BACKGROUND = new Float32Array([0.063, 0.071, 0.094, 0.9]);
+const TITLE_BACKGROUND = new Float32Array([0.122, 0.133, 0.176, 0.95]);
+const TITLE_TINT = new Float32Array([0.62, 0.66, 0.75, 1]);
 const DEFAULT_KEY = 'F3';
 export function createToolsOverlay(options) {
     const root = createUiNode({ name: 'tools-overlay', width: 'grow', height: 'grow' });
@@ -50,6 +62,7 @@ export function createToolsOverlay(options) {
     const columnWidth = options.width ?? DEFAULT_WIDTH;
     const panels = options.panels;
     const roots = new Map();
+    const titles = new Map();
     /* Pooled and refilled: this is read every frame the overlay is open and must not allocate. */
     const sites = [];
     let width = 0;
@@ -78,17 +91,33 @@ export function createToolsOverlay(options) {
             const top = each * at;
             const tall = at === panels.length - 1 ? height - top : each;
             let panelRoot = roots.get(panel.id);
-            if (panelRoot === undefined) {
+            let title = titles.get(panel.id);
+            if (panelRoot === undefined || title === undefined) {
                 panelRoot = createPanelRoot(panel);
+                panelRoot.background = PANEL_BACKGROUND;
                 roots.set(panel.id, panelRoot);
+                title = createUiNode({
+                    text: panel.title,
+                    background: TITLE_BACKGROUND,
+                    tint: TITLE_TINT,
+                    name: `title:${panel.id}`,
+                });
+                titles.set(panel.id, title);
             }
+            /* The title above the panel's own space, which starts below it: a panel never learns it has
+               one, and its rows hit-test exactly as they did. */
+            title.absolute = true;
+            title.x = 0;
+            title.y = top;
+            title.width = w;
+            title.height = Math.min(PANEL_TITLE_HEIGHT, tall);
             panelRoot.absolute = true;
             panelRoot.x = 0;
-            panelRoot.y = top;
+            panelRoot.y = top + PANEL_TITLE_HEIGHT;
             panelRoot.width = w;
-            panelRoot.height = tall;
+            panelRoot.height = Math.max(0, tall - PANEL_TITLE_HEIGHT);
             panel.build(panelRoot);
-            root.children.push(panelRoot);
+            root.children.push(title, panelRoot);
             sites.push({ id: panel.id, x: 0, y: top, w, h: tall });
         }
         layoutUiTree(root, x, 0, w, height);
@@ -149,13 +178,14 @@ export function createToolsOverlay(options) {
             if (!visible)
                 return false;
             if (event.kind === 'key') {
-                if (event.ctrl && event.key === 'z') {
+                /* Either case: a browser reports Ctrl+Shift+Z with the key `'Z'`, shift having raised it. */
+                if (event.ctrl && (event.key === 'z' || event.key === 'Z')) {
                     const moved = event.shift ? undo.redo() : undo.undo();
                     if (moved)
                         dirty = true;
                     return moved;
                 }
-                if (event.ctrl && event.key === 'y') {
+                if (event.ctrl && (event.key === 'y' || event.key === 'Y')) {
                     const moved = undo.redo();
                     if (moved)
                         dirty = true;
@@ -174,8 +204,18 @@ export function createToolsOverlay(options) {
             const panel = panelWith(site.id);
             if (panel === null)
                 return false;
+            const contentTop = site.y + PANEL_TITLE_HEIGHT;
+            /* The title row is the overlay's, not the panel's: it scrolls nothing and routes nothing. */
+            if (event.y < contentTop)
+                return event.kind === 'wheel';
             /* In the panel's own space: a panel never learns where on screen it is. */
-            return take(panel.route(shift(event, -(root.rect.x + site.x), -site.y)));
+            const handled = take(panel.route(shift(event, -(root.rect.x + site.x), -contentTop)));
+            if (event.kind !== 'wheel')
+                return handled;
+            /* A wheel over a panel scrolls the panel and is the overlay's whether or not it made a
+               command, or the page scrolls under the panel as well. Laid out again, for the new scroll. */
+            dirty = true;
+            return true;
         },
         invalidate() {
             dirty = true;
@@ -263,11 +303,13 @@ function paintNode(painter, node) {
     if (node.clip)
         painter.unclip();
 }
+/** `#rrggbb`, or `#rrggbbaa` where the colour is not opaque, which the painter's contract allows. */
 function cssColour(rgba) {
     if (rgba === null)
         return '#ffffff';
     let out = '#';
-    for (let at = 0; at < 3; at += 1) {
+    const channels = (rgba[3] ?? 1) < 1 ? 4 : 3;
+    for (let at = 0; at < channels; at += 1) {
         const channel = Math.round(Math.min(1, Math.max(0, rgba[at] ?? 0)) * 255);
         out += channel.toString(16).padStart(2, '0');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/tools",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "description": "The editor panels a shipped game can carry, and the command stack that makes their edits undoable",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,11 +27,11 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "@driftengine/core": "4.8.1",
-    "@driftengine/editor": "4.8.1",
-    "@driftengine/network": "4.8.1",
-    "@driftengine/texture": "4.8.1",
-    "@driftengine/ui2d": "4.8.1"
+    "@driftengine/core": "4.8.2",
+    "@driftengine/editor": "4.8.2",
+    "@driftengine/network": "4.8.2",
+    "@driftengine/texture": "4.8.2",
+    "@driftengine/ui2d": "4.8.2"
   },
   "author": "Drift Technologies",
   "repository": {

package/src/console.ts

@@ -215,10 +215,14 @@ export const consolePanel: Panel<ConsoleWorld, ConsoleView> = {
   title: 'Console',
 
   build(world, view, root): void {
+    /* The window is the height the panel was given, where it was given one: the overlay sets it on
+       the root before it builds. `viewHeight` is what a root with no exact height falls back to. */
+    if (typeof root.height === 'number' && root.height > 0) view.viewHeight = root.height;
     view.shown = filteredEntries(world.log, view.filter);
     if (view.shown.length === 0) {
       emptyPanel(root, 'Nothing logged');
       view.scrollY = 0;
+      root.scrollY = 0;
       return;
     }
 
@@ -238,6 +242,8 @@ export const consolePanel: Panel<ConsoleWorld, ConsoleView> = {
     }
     /* The follow happens here and not on append, because only a build knows how tall the list is. */
     if (view.pinned) view.scrollY = maxScroll(view, view.shown.length);
+    /* And onto the root, which is what ui2d offsets the rows by: the scroll that is drawn. */
+    root.scrollY = view.scrollY;
   },
 
   route(_world, view, event): Command | null {
@@ -248,6 +254,7 @@ export const consolePanel: Panel<ConsoleWorld, ConsoleView> = {
       const limit = maxScroll(view, view.shown.length);
       view.scrollY = Math.min(limit, Math.max(0, view.scrollY + event.dy));
       view.pinned = view.scrollY >= limit;
+      view.root.scrollY = view.scrollY;
       return null;
     }
     if (event.kind !== 'pointer' || event.phase !== 'up' || event.button !== 0) return null;

package/src/index.ts

@@ -142,4 +142,4 @@ export type {
   ToolsOverlay,
   ToolsOverlayOptions,
 } from './overlay.ts';
-export { bindPanel, createToolsOverlay, paintOverlay } from './overlay.ts';
+export { PANEL_TITLE_HEIGHT, bindPanel, createToolsOverlay, paintOverlay } from './overlay.ts';

package/src/inspector.ts

@@ -48,7 +48,10 @@ export interface InspectorRow {
   readonly component: string;
   /** What the row is called: a field's name, or the prefix the vector's three share. */
   readonly label: string;
-  /** The declared type, verbatim. Empty for a vector, which is three of them. */
+  /**
+   * The declared type, verbatim. For a vector, the type its three parts share, or empty where they
+   * do not share one.
+   */
   readonly type: string;
   readonly kind: RowKind;
   readonly enumName: string;
@@ -153,10 +156,13 @@ export function inspectorRows(
         if (emitted.has(part.prefix)) continue;
         emitted.add(part.prefix);
         const slots = vectors.get(part.prefix) as string[];
+        const types = new Set(
+          fields.filter((one) => slots.includes(one.name)).map((one) => one.type),
+        );
         rows.push({
           component,
           label: part.prefix,
-          type: '',
+          type: types.size === 1 ? field.type : '',
           kind: 'vector',
           enumName: '',
           fields: slots,
@@ -307,11 +313,32 @@ export function createInspectorView(options: {
 export function rowText(row: InspectorRow): string {
   if (row.value === MIXED) return `${row.label}  —`;
   if (row.kind === 'vector') {
-    const parts = (row.value as unknown[]).map((part) => (part === MIXED ? '—' : String(part)));
+    const parts = (row.value as unknown[]).map((part) =>
+      part === MIXED ? '—' : valueText(part, row.type),
+    );
     return `${row.label}  ${parts.join(', ')}`;
   }
   if (row.kind === 'boolean') return `${row.label}  ${row.value ? 'true' : 'false'}`;
-  return `${row.label}  ${String(row.value)}`;
+  return `${row.label}  ${valueText(row.value, row.type)}`;
+}
+
+/**
+ * One value as text: an `f32` as the shortest decimal that stores as the same `f32`.
+ *
+ * **What was written rather than what is stored.** A `Float32Array` hands back the nearest double,
+ * so a bounce of 0.55 reads `0.550000011920929`; the digits past the seventh are the storage, and
+ * the shortest decimal that rounds back to the same `f32` is what anybody wrote. Nine significant
+ * digits always round-trip a single, so the search ends there. An `f64` and anything else keep
+ * `String`, whose own answer is already the shortest for a double.
+ */
+function valueText(value: unknown, type: string): string {
+  if (type !== 'f32' || typeof value !== 'number' || !Number.isFinite(value)) return String(value);
+  const stored = Math.fround(value);
+  for (let digits = 1; digits < 9; digits += 1) {
+    const shorter = Number(stored.toPrecision(digits));
+    if (Math.fround(shorter) === stored) return String(shorter);
+  }
+  return String(Number(stored.toPrecision(9)));
 }
 
 export const inspectorPanel: Panel<InspectorWorld, InspectorView> = {

package/src/network.ts

@@ -190,12 +190,21 @@ export const networkPanel: Panel<NetworkWorld, NetworkView> = {
  * Structural rather than imported, so nothing here loads `@driftengine/network` at run time and a
  * consumer whose session is its own shape can still be read.
  */
-export interface SessionLike {
+/**
+ * A session as the network panel reads it, which a `LockstepSession` is as it stands.
+ *
+ * **The depth by either name**: `rewindDepth` is what a session answers, and `loop.depth` is the
+ * shape a game built by hand before it did — from the session's fields and the `RewindLoop` it
+ * made — which still reads as it did.
+ */
+export type SessionLike = SessionFields &
+  ({ readonly rewindDepth: number } | { readonly loop: { readonly depth: number } });
+
+interface SessionFields {
   readonly participants: number;
   readonly inputDelay: number;
   /** The disagreement the session is currently holding, or null. Latched, not an event. */
   readonly desync: Desync | null;
-  readonly loop: { readonly depth: number };
 }
 
 /** What a recorder keeps: the disagreements it has seen, oldest first. */
@@ -246,7 +255,7 @@ export function sessionReadout(
     inputDelay: session.inputDelay,
     participants: session.participants,
     snapshotBytes,
-    snapshotCount: session.loop.depth,
+    snapshotCount: 'rewindDepth' in session ? session.rewindDepth : session.loop.depth,
     desyncs: recorder.desyncs,
     componentHashes,
   };

package/src/overlay.ts

@@ -111,6 +111,20 @@ export interface ToolsOverlay {
 }
 
 const DEFAULT_WIDTH = 320;
+
+/**
+ * How tall the title row above every panel is, in the overlay's pixels. A panel's own space starts
+ * below it, so a host hit-testing a site by hand reads the content from `site.y` plus this.
+ */
+export const PANEL_TITLE_HEIGHT = 18;
+
+/**
+ * What every panel is drawn on, and its title on: dark and nearly opaque, so the rows read over a
+ * bright scene. The overlay carried no background until 4.8.2 and a host laid one under each site.
+ */
+const PANEL_BACKGROUND = new Float32Array([0.063, 0.071, 0.094, 0.9]);
+const TITLE_BACKGROUND = new Float32Array([0.122, 0.133, 0.176, 0.95]);
+const TITLE_TINT = new Float32Array([0.62, 0.66, 0.75, 1]);
 const DEFAULT_KEY = 'F3';
 
 export function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay {
@@ -122,6 +136,7 @@ export function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay {
 
   const panels = options.panels;
   const roots = new Map<string, UiNode>();
+  const titles = new Map<string, UiNode>();
   /* Pooled and refilled: this is read every frame the overlay is open and must not allocate. */
   const sites: OverlaySite[] = [];
 
@@ -154,17 +169,33 @@ export function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay {
       const tall = at === panels.length - 1 ? height - top : each;
 
       let panelRoot = roots.get(panel.id);
-      if (panelRoot === undefined) {
+      let title = titles.get(panel.id);
+      if (panelRoot === undefined || title === undefined) {
         panelRoot = createPanelRoot(panel);
+        panelRoot.background = PANEL_BACKGROUND;
         roots.set(panel.id, panelRoot);
+        title = createUiNode({
+          text: panel.title,
+          background: TITLE_BACKGROUND,
+          tint: TITLE_TINT,
+          name: `title:${panel.id}`,
+        });
+        titles.set(panel.id, title);
       }
+      /* The title above the panel's own space, which starts below it: a panel never learns it has
+         one, and its rows hit-test exactly as they did. */
+      title.absolute = true;
+      title.x = 0;
+      title.y = top;
+      title.width = w;
+      title.height = Math.min(PANEL_TITLE_HEIGHT, tall);
       panelRoot.absolute = true;
       panelRoot.x = 0;
-      panelRoot.y = top;
+      panelRoot.y = top + PANEL_TITLE_HEIGHT;
       panelRoot.width = w;
-      panelRoot.height = tall;
+      panelRoot.height = Math.max(0, tall - PANEL_TITLE_HEIGHT);
       panel.build(panelRoot);
-      root.children.push(panelRoot);
+      root.children.push(title, panelRoot);
       sites.push({ id: panel.id, x: 0, y: top, w, h: tall });
     }
 
@@ -226,12 +257,13 @@ export function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay {
       if (!visible) return false;
 
       if (event.kind === 'key') {
-        if (event.ctrl && event.key === 'z') {
+        /* Either case: a browser reports Ctrl+Shift+Z with the key `'Z'`, shift having raised it. */
+        if (event.ctrl && (event.key === 'z' || event.key === 'Z')) {
           const moved = event.shift ? undo.redo() : undo.undo();
           if (moved) dirty = true;
           return moved;
         }
-        if (event.ctrl && event.key === 'y') {
+        if (event.ctrl && (event.key === 'y' || event.key === 'Y')) {
           const moved = undo.redo();
           if (moved) dirty = true;
           return moved;
@@ -246,8 +278,16 @@ export function createToolsOverlay(options: ToolsOverlayOptions): ToolsOverlay {
       if (event.kind === 'pointer' && event.phase === 'down') focused = site.id;
       const panel = panelWith(site.id);
       if (panel === null) return false;
+      const contentTop = site.y + PANEL_TITLE_HEIGHT;
+      /* The title row is the overlay's, not the panel's: it scrolls nothing and routes nothing. */
+      if (event.y < contentTop) return event.kind === 'wheel';
       /* In the panel's own space: a panel never learns where on screen it is. */
-      return take(panel.route(shift(event, -(root.rect.x + site.x), -site.y)));
+      const handled = take(panel.route(shift(event, -(root.rect.x + site.x), -contentTop)));
+      if (event.kind !== 'wheel') return handled;
+      /* A wheel over a panel scrolls the panel and is the overlay's whether or not it made a
+         command, or the page scrolls under the panel as well. Laid out again, for the new scroll. */
+      dirty = true;
+      return true;
     },
 
     invalidate(): void {
@@ -331,10 +371,12 @@ function paintNode(painter: OverlayPainter, node: UiNode): void {
   if (node.clip) painter.unclip();
 }
 
+/** `#rrggbb`, or `#rrggbbaa` where the colour is not opaque, which the painter's contract allows. */
 function cssColour(rgba: Float32Array | null): string {
   if (rgba === null) return '#ffffff';
   let out = '#';
-  for (let at = 0; at < 3; at += 1) {
+  const channels = (rgba[3] ?? 1) < 1 ? 4 : 3;
+  for (let at = 0; at < channels; at += 1) {
     const channel = Math.round(Math.min(1, Math.max(0, rgba[at] ?? 0)) * 255);
     out += channel.toString(16).padStart(2, '0');
   }