staffa 0.18.1 → 0.18.3

package/src/components/autocomplete.ts

@@ -1,5 +1,5 @@
 import A from "aberdeen";
-import { type Bindable, uniqueId } from "../core.js";
+import { type Bindable, followAnchor, mountPortal, uniqueId } from "../core.js";
 import { type FieldOptions, drawField } from "./field.js";
 
 /** A selectable option: a bare string, or a `{ value, label }` pair. */
@@ -34,7 +34,6 @@ export interface AutocompleteOptions extends FieldOptions {
 
 A.insertGlobalCss({
 	".s-ac": {
-		"&": "position:relative",
 		// Same light inset field as `.s-input` (see field.ts), derived from the surface.
 		"> .s-control": "display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;",
 		"> .s-control:hover": "border-color: color-mix(in oklab, $s-text, $s-bg 55%);",
@@ -44,10 +43,14 @@ A.insertGlobalCss({
 		".s-chip > button": "cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",
 		".s-chip > button:hover": "fg:$s-text background:$s-faint",
 		"input": "flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em",
-		// Background, border, radius and elevation come from the popup's
-		// `.s-s.neutral.shadow` surface (see below).
-		"> .s-menu": "position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0",
-		"> .s-menu li": "margin:0",
+	},
+	// Background, border, radius and elevation come from the `.s-s.neutral.shadow`
+	// surface it carries; `place()` below sizes and positions it. Both of its
+	// classes are named here: standing in `<body>` rather than inside the field,
+	// it would otherwise lose to theme.ts's flow margins on `ul` and `li`.
+	".s-ac-menu.s-s": {
+		"&": "position:fixed max-height:15rem overflow-y:auto list-style:none p:$1 margin:0",
+		li: "margin:0",
 		".s-option": "padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",
 		".s-option[aria-selected=true]": "background: color-mix(in srgb, $s-text 10%, transparent);",
 		".s-add": "fg:$s-accent font-style:italic",
@@ -55,6 +58,58 @@ A.insertGlobalCss({
 	},
 });
 
+/** The list one {@link autocomplete} currently has up. */
+interface AcPopup {
+	/** The `<ul>`'s id, which the field points `aria-controls` at — and its identity here. */
+	id: string;
+	/** The field's control box: the list matches its width and hangs off it. */
+	anchor: HTMLElement;
+	/** Over the dialog the field stands in, or under the dialog layer altogether. */
+	zIndex: number;
+	/** Draws the `<li>`s, reading the field's own state from its closure. */
+	draw: () => void;
+}
+
+// Only one list is up at a time — it belongs to whichever field has focus — so
+// one portal at the end of <body> serves them all. Drawn inside the field, the
+// list would be clipped by a dialog or a scrolling column, and would stretch
+// that scroller's bar to reach it.
+const $popup = A.proxy<{ cur: AcPopup | null }>({ cur: null });
+
+/** Hang the list under the field — or over it, when that's where the room is. */
+function place(el: HTMLElement, r: DOMRect): void {
+	const gap = 4, edge = 8;
+	// Measured at the stylesheet's own cap, so the flip is decided on the height
+	// the list wants, not on whatever the last placement clamped it to.
+	el.style.maxHeight = "";
+	const want = el.offsetHeight;
+	const below = window.innerHeight - r.bottom - gap - edge;
+	const above = r.top - gap - edge;
+	const up = want > below && above > below;
+	el.style.left = `${r.left}px`;
+	el.style.width = `${r.width}px`;
+	el.style.maxHeight = `${Math.min(want, Math.max(up ? above : below, 60))}px`;
+	el.style.top = up ? "auto" : `${r.bottom + gap}px`;
+	el.style.bottom = up ? `${window.innerHeight - r.top + gap}px` : "auto";
+}
+
+mountPortal(() => {
+	const p = $popup.cur;
+	if (!p) return;
+	let sizeChanged: (() => void) | undefined;
+
+	const el = A("ul.s-ac-menu.s-s.neutral.shadow role=listbox", `id=${p.id} z-index:${p.zIndex}`, () => {
+		// A press in the list must not blur the field: the click that follows is
+		// what commits, and dragging the scrollbar has to keep it open too.
+		A("mousedown=", (e: Event) => e.preventDefault());
+		p.draw();
+		// Re-run as you type, with the rows; the list's height changes with them.
+		sizeChanged?.();
+	}) as HTMLElement;
+
+	sizeChanged = followAnchor(p.anchor, (r) => place(el, r));
+});
+
 function normOption(o: AutocompleteOptionInput): AcOption {
 	return typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label ?? o.value };
 }
@@ -64,6 +119,10 @@ function normOption(o: AutocompleteOptionInput): AcOption {
  * optional free-text entry, and full keyboard control (arrows, enter, escape,
  * backspace-to-remove). Implements the ARIA combobox/listbox pattern.
  *
+ * The suggestion list is portalled to `document.body`, so a dialog or a
+ * scrolling column can neither clip it nor grow a scrollbar around it. It hangs
+ * off whichever side of the field has the room, and follows it as things move.
+ *
  * @example
  * ```ts
  * // Single select from a fixed list
@@ -133,13 +192,40 @@ export function autocomplete(opts: AutocompleteOptions): void {
 		opts.bind.value = arr.filter((v) => v !== value);
 	};
 
+	let inputEl: HTMLInputElement | undefined;
+
+	/** The list's rows. Runs in the body portal, on this field's state. */
+	const drawList = () => {
+		const list = filtered();
+		const q = $st.query.trim();
+		const showAdd = opts.allowCustom !== false && q !== "" && !list.some((o) => o.label.toLowerCase() === q.toLowerCase());
+
+		list.forEach((option, i) => {
+			A("li.s-option role=option", `id=${menuId}-opt-${i}`, () => {
+				A(() => A("aria-selected=", $st.active === i ? "true" : "false"));
+				A("#", option.label);
+				A("click=", () => commit(option.value, inputEl));
+				A("mousemove=", () => {
+					$st.active = i;
+				});
+			});
+		});
+		if (showAdd) {
+			A("li.s-option.s-add role=option", () => {
+				A("#", `Add "${q}"`);
+				A("click=", () => commit(q, inputEl));
+			});
+		}
+		if (list.length === 0 && !showAdd) {
+			A("li.s-empty #No matches");
+		}
+	};
+
 	drawField(opts, (id, isInvalid) => {
 		A("div.s-ac", opts.inputAttrs, () => {
 			A(() => A("aria-invalid=", isInvalid() ? "true" : "false"));
 
-			let inputEl: HTMLInputElement | undefined;
-
-			A("div.s-control", () => {
+			const controlEl = A("div.s-control", () => {
 				A("click=", () => inputEl?.focus());
 
 				// Chips for multi-select.
@@ -185,38 +271,16 @@ export function autocomplete(opts: AutocompleteOptions): void {
 					});
 					A("keydown=", (e: KeyboardEvent) => onKey(e, inputEl));
 				}) as HTMLInputElement;
-			});
+			}) as HTMLElement;
 
-			// The suggestions popup.
+			// Hand the list to the portal for as long as it is up. Its layer clears
+			// the dialog the field sits in, but stays under one that may open over
+			// it — a field on the page can't paint across a modal.
 			A(() => {
 				if (!$st.open) return;
-				const list = filtered();
-				const q = $st.query.trim();
-				const showAdd = opts.allowCustom !== false && q !== "" && !list.some((o) => o.label.toLowerCase() === q.toLowerCase());
-
-				A("ul.s-menu.s-s.neutral.shadow role=listbox", `id=${menuId}`, () => {
-					list.forEach((option, i) => {
-						A("li.s-option role=option", `id=${menuId}-opt-${i}`, () => {
-							A(() => A("aria-selected=", $st.active === i ? "true" : "false"));
-							A("#", option.label);
-							A("mousedown=", (e: Event) => e.preventDefault());
-							A("click=", () => commit(option.value, inputEl));
-							A("mousemove=", () => {
-								$st.active = i;
-							});
-						});
-					});
-					if (showAdd) {
-						A("li.s-option.s-add role=option", () => {
-							A("#", `Add "${q}"`);
-							A("mousedown=", (e: Event) => e.preventDefault());
-							A("click=", () => commit(q, inputEl));
-						});
-					}
-					if (list.length === 0 && !showAdd) {
-						A("li.s-empty #No matches");
-					}
-				});
+				const zIndex = controlEl.closest(".s-dialog") ? 350 : 150;
+				$popup.cur = { id: menuId, anchor: controlEl, zIndex, draw: drawList };
+				A.clean(() => { if ($popup.cur?.id === menuId) $popup.cur = null; });
 			});
 
 			// Hidden inputs so the selection participates in native FormData.

package/src/components/main.ts

@@ -7,7 +7,7 @@ import { type MenuOptions, drawMenu, isFloatingMenuOpen, consumeBranchNav, anyCu
 import { menu as menuIcon, x as closeIcon } from "../icons.js";
 import { iconButton } from "./button.js";
 import { isDialogOpen } from "./dialog.js";
-import { PanelStackController, SMALL_MAX_PX, type PanelStack, type AncestorTable, type Panel, type RouteHandler, type RouteTable, type Routes } from "./panels.js";
+import { PAGE_MS, PanelStackController, SMALL_MAX_PX, type PanelStack, type AncestorTable, type Panel, type RouteHandler, type RouteTable, type Routes } from "./panels.js";
 
 /** Options for {@link main}. */
 export interface MainOptions<R = Routes> {
@@ -334,7 +334,7 @@ A.insertGlobalCss({
 		// incoming half of the nav-panel hand-off (see `slideContentIn`).
 		".s-body main":
 			"flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column " +
-			"transition: transform var(--s-panel-ms) ease;",
+			`transition: transform ${PAGE_MS}ms ease;`,
 		// A one-shot starting position: parked one screen to the right, with the
 		// transition off so it snaps there. Removing the class animates it home.
 		".s-body main.s-slide-in": "transform: translateX(100%); transition:none",
@@ -363,15 +363,17 @@ A.insertGlobalCss({
 			// Under the sticky header's 10: they never overlap, but the bar should win.
 			"position:absolute inset:0 z-index:5 display:flex flex-direction:column " +
 			"overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 " +
-			"transition: transform var(--s-panel-ms) ease, visibility 0s;",
+			`transition: transform ${PAGE_MS}ms ease, visibility 0s;`,
 		// Parked one screen left: what the `create=`/`destroy=` hooks transition out
 		// of and back into. On dismissal (this rule's transition) `visibility` flips
-		// only at the slide's end, so the dismissed page isn't reachable while it
-		// waits for Aberdeen's removal timer; on entry it flips instantly (the `0s`
-		// above), or the opening page would refuse the focus handed to it mid-slide.
+		// only at the slide's end — a delayed zero-length transition, whose constant
+		// start value costs nothing per frame — so the dismissed page isn't
+		// reachable while it waits for Aberdeen's removal timer; on entry it flips
+		// instantly (the `0s` above), or the opening page would refuse the focus
+		// handed to it mid-slide.
 		"&.s-nav-page-off":
 			"transform:translateX(-100%) pointer-events:none visibility:hidden " +
-			"transition: transform var(--s-panel-ms) ease, visibility var(--s-panel-ms);",
+			`transition: transform ${PAGE_MS}ms ease, visibility 0s ${PAGE_MS}ms;`,
 		// Roomier than the dropdown's: every row here is a thumb target.
 		".s-menu-item": "padding: $2 $3; min-height:3rem font-size:1.05em gap:$3",
 	},

package/src/components/menu.ts

@@ -1,6 +1,6 @@
 import A from "aberdeen";
 import { matchCurrent, current as currentRoute, go } from "aberdeen/route";
-import { type Slot, type Attributes, drawSlot, mountPortal, focusFirst } from "../core.js";
+import { type Slot, type Attributes, drawSlot, followAnchor, mountPortal, focusFirst } from "../core.js";
 import { menu as menuIcon, chevronRight, externalLink as newTabIcon, link as linkIcon } from "../icons.js";
 import { button, type ButtonOptions } from "./button.js";
 import { toast } from "./toast.js";
@@ -647,7 +647,7 @@ export function closeFloatingMenu(anchor?: HTMLElement): void {
 	if (isFloatingMenuOpen(anchor)) closeFloating();
 }
 
-function positionMenu(menuEl: HTMLElement, rect: { left: number; right: number; top: number; bottom: number }): void {
+function positionMenu(menuEl: HTMLElement, rect: DOMRect): void {
 	const mw = menuEl.offsetWidth, mh = menuEl.offsetHeight;
 	const vw = window.innerWidth, vh = window.innerHeight;
 	const gap = 4;
@@ -717,16 +717,13 @@ mountPortal(() => {
 		document.removeEventListener("keydown", onKey, true);
 	});
 
-	// Position after layout, then focus the first enabled item.
+	// At the supplied point when given — the pointer location for a context menu
+	// — otherwise below the anchor.
+	followAnchor(f.at ? new DOMRect(f.at.x, f.at.y, 0, 0) : f.anchor, (rect) => positionMenu(menuEl, rect));
+	// Once it can take focus: the current-page item if there is one, else the
+	// first focusable element (covers custom slot content, not just `.s-menu-item`s).
 	requestAnimationFrame(() => {
-		if (!document.body.contains(menuEl)) return;
-		// Position at the supplied point (a zero-size rect) when given — e.g. the
-		// pointer location for a context menu — otherwise below the anchor.
-		const rect = f.at ? { left: f.at.x, right: f.at.x, top: f.at.y, bottom: f.at.y } : f.anchor.getBoundingClientRect();
-		positionMenu(menuEl, rect);
-		// Focus the current-page item if there is one, else the first focusable
-		// element (covers custom slot content, not just `.s-menu-item`s).
-		focusFirst(menuEl, ".s-menu-item[aria-current=page]");
+		if (document.body.contains(menuEl)) focusFirst(menuEl, ".s-menu-item[aria-current=page]");
 	});
 });
 

package/src/components/panels.ts

@@ -416,10 +416,11 @@ function matchRoute(r: { segs: Seg[] }, segments: string[]): Record<string, any>
 
 /**
  * The one duration every bit of shell motion shares: the enter/exit fades, the
- * sideways `left` moves, the narrow-screen nav slide. Published below as the
- * `--s-panel-ms` custom property, so CSS and JS can't drift apart.
+ * slides, the narrow-screen nav slide. Interpolated into every transition as a
+ * literal — the shared constant is what keeps CSS and JS in step — and also
+ * published as the `--s-panel-ms` custom property for app CSS.
  */
-const PAGE_MS = 250;
+export const PAGE_MS = 250;
 /** How long a freshly pushed `loading` panel holds its fade-in. */
 const LOADING_HOLD_MS = 300;
 /**
@@ -447,16 +448,23 @@ A.insertGlobalCss({
 		PANEL_SHEEN,
 	".s-panel": {
 		// The shell knows three motions, and this vocabulary is all of them:
-		// a panel that MOVES animates its `left` — every mover in a pass shares
-		// this one duration and ease-out, so panels travelling the same distance
-		// travel as one — a CREATED panel joins the strip beside the old position
-		// of the panels beneath it and rides their slide while fading in, and a
-		// CLOSED one fades out where it stood. Nothing else ever animates.
-		// A plain `left`, never a transform: a transformed element is
-		// composited, costing it subpixel text antialiasing. No `width`
-		// transition either — animating one reflows the column every frame. And
-		// the fade is `linear` while the moves ease out: an eased opacity spends
-		// its last stretch near zero, reading as a vanish.
+		// a panel that MOVES slides — every mover in a pass shares this one
+		// duration and ease-out, so panels travelling the same distance travel
+		// as one — a CREATED panel joins the strip beside the old position of
+		// the panels beneath it and rides their slide while fading in, and a
+		// CLOSED one keeps its seat beside the surviving panel beneath it and
+		// rides that panel's slide while fading out — its creation played
+		// backwards. Nothing else ever animates.
+		// A slide is a `transform` playing out to none (see `layout`), never an
+		// animated `left`: left is a layout property, so animating it would
+		// relayout and repaint every travelling column on every frame, where a
+		// transform moves composited layers. `left` always holds the resting
+		// position — it is not in the transition list — and the transform
+		// exists only while a panel travels, so text gets its subpixel
+		// antialiasing back the moment it settles. No `width` transition
+		// either — animating one reflows the column every frame. And the fade
+		// is `linear` while the moves ease out: an eased opacity spends its
+		// last stretch near zero, reading as a vanish.
 		// Layering is fixed per state, not per stack depth: live panels never
 		// overlap each other (the strip keeps them adjacent, see `layout()`), so
 		// only the fading ones need an order — below, in both directions, per
@@ -466,7 +474,7 @@ A.insertGlobalCss({
 		"&":
 			"position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column " +
 			PANEL_SHEEN + " " +
-			"z-index:2 transition: left var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear;",
+			`z-index:2 transition: transform ${PAGE_MS}ms ease-out, opacity ${PAGE_MS}ms linear;`,
 		// The hairline between two columns, fading at both ends (like the sidebar's
 		// `.s-nav-sep`). Columns tile with no gutter — each brings its own `$3` of
 		// padding — so this sits exactly on the boundary.
@@ -477,9 +485,10 @@ A.insertGlobalCss({
 		// whatever slides across its spot passes over it. Dropped once the fade
 		// is over (see `releaseEnter`).
 		"&.s-panel-new": "z-index:1",
-		// On its way out: it fades where it stood, beneath every live panel
-		// (declared after `.s-panel-new`, so closing mid-enter drops a panel to
-		// the bottom), and leaves the DOM when the fade ends (see `playExit`).
+		// On its way out: it fades, still riding the strip (see `layout`),
+		// beneath every live panel (declared after `.s-panel-new`, so closing
+		// mid-enter drops a panel to the bottom), and leaves the DOM when the
+		// fade ends (see `playExit`).
 		"&.s-panel-closing": "z-index:0 opacity:0 pointer-events:none",
 		// The fade-in's start state: a newcomer wears it from creation until its
 		// content is ready — usually the very pass that placed it, later for a
@@ -490,12 +499,13 @@ A.insertGlobalCss({
 		// edges, so these rest at their true positions, clipped — being crowded
 		// out or revealed is an ordinary move, not a fade. Both keep their DOM —
 		// and so their scroll position and half-typed forms — hence
-		// `visibility`, not `display:none`: it holds through the move out
-		// (flipping only at its end) and lifts instantly on the move back in
-		// (the base transition above doesn't list it).
-		"&.s-panel-hidden, &.s-panel-parked":
-			"visibility:hidden " +
-			"transition: left var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility var(--s-panel-ms);",
+		// `visibility`, not `display:none`. The flip is timed by `layout()`,
+		// never transitioned: a panel sliding offstage gets the class once its
+		// slide ends and drops it the moment it is revealed. `visibility` is
+		// not compositable, and Chrome composites an element's transitions as
+		// a group, so listing it here would drag the slide itself onto the
+		// main thread — relaid out and repainted every frame.
+		"&.s-panel-hidden, &.s-panel-parked": "visibility:hidden",
 	},
 	// The scroll container, with the column's own padding. Its scrollbar sits
 	// flush against the column edge (unlike content mode's inset one), so it meets
@@ -601,12 +611,24 @@ interface PanelEntry {
 	hash?: string;
 	/** Set once the panel is on its way out, playing its exit animation. */
 	closing?: boolean;
+	/**
+	 * The nearest surviving panel beneath this one when it closed. The exit
+	 * rides that panel's motion (see `layout`), the mirror of how a newcomer
+	 * rides the panels it opens over, so a close plays the open backwards.
+	 */
+	anchor?: string;
 	/** Set while the fade-in is still owed (a `loading` hold can owe it past placement). */
 	enter?: boolean;
 	/** Whether the panel has been through a full layout pass (and so may animate). */
 	placed?: boolean;
 	/** Whether its `loading` hold has already expired, so it can't hold again. */
 	holdDone?: boolean;
+	/**
+	 * Whether the last layout pass put this panel off screen. The deferred
+	 * visibility flip (see `layout`) consults it when it fires, so a panel
+	 * revealed again before its slide out ended is never hidden by mistake.
+	 */
+	offstage?: boolean;
 	/** What the panel asks for, kept in step with its `$panel.maxWidth`. */
 	maxWidth: PanelSize;
 	/**
@@ -813,6 +835,8 @@ export class PanelStackController implements PanelStack {
 	private lastGeom?: Geometry;
 	private layoutQueued = false;
 	private timers = new Set<ReturnType<typeof setTimeout>>();
+	/** Elements playing their exit fade, each riding its anchor's motion (see `layout`). */
+	private exiting = new Set<{ el: HTMLElement; anchor?: string; ride: number }>();
 	/** The arrangement the navigation in flight is heading for; see {@link intended}. */
 	private intent: Arrangement | null = null;
 	/** The navigation the router hasn't settled yet, if any. */
@@ -1049,7 +1073,13 @@ export class PanelStackController implements PanelStack {
 			next.push(entry);
 			this.$open[path] = entry;
 		}
-		for (const entry of existing.values()) this.beginClose(entry);
+		// What remains in `existing` closes, each remembering the nearest
+		// surviving panel beneath it — the anchor its exit fade rides.
+		let anchor: string | undefined;
+		for (const entry of this.$state.live) {
+			if (existing.has(entry.path)) this.beginClose(entry, anchor);
+			else anchor = entry.path;
+		}
 		this.$state.live = next;
 		this.$state.focus = Math.min(target.focus, next.length - 1);
 		this.scheduleLayout();
@@ -1090,18 +1120,17 @@ export class PanelStackController implements PanelStack {
 	 * at the end of the animation. Only the element lingers to play that animation,
 	 * which is what `drawPanel`'s `destroy=` hook hands to {@link playExit}.
 	 */
-	private beginClose(entry: PanelEntry): void {
+	private beginClose(entry: PanelEntry, anchor?: string): void {
 		entry.closing = true;
+		entry.anchor = anchor;
 		entry.$panel.visible = false;
 		delete this.$open[entry.path];
 	}
 
 	/**
-	 * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades
-	 * where it stands, inert, and leaves the DOM on `transitionend`. A fixed timer
-	 * would race the transition and pull the element a frame early, making the
-	 * panel appear to fade half-way and vanish; the timeout is only a fallback for
-	 * when no `transitionend` is coming (transitions off, element never placed).
+	 * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades,
+	 * inert, riding its anchor's slide (see `layout`), and leaves the DOM once
+	 * the fade is over (see {@link afterFade}).
 	 */
 	private playExit(entry: PanelEntry, el: HTMLElement): void {
 		// A panel being *redrawn* replaces its element through here too; that one
@@ -1109,16 +1138,36 @@ export class PanelStackController implements PanelStack {
 		if (!entry.closing) { el.remove(); return; }
 		el.classList.add("s-panel-closing");
 		el.setAttribute("inert", "");
-		const drop = () => {
-			clearTimeout(timer);
-			this.timers.delete(timer);
+		// Only a placed panel has a seat on the strip to ride out from.
+		const exit = entry.placed ? { el, anchor: entry.anchor, ride: 0 } : null;
+		if (exit) this.exiting.add(exit);
+		this.afterTransition(el, "opacity", () => {
+			if (exit) this.exiting.delete(exit);
 			el.remove();
-		};
-		el.addEventListener("transitionend", (e: TransitionEvent) => {
-			if (e.target === el && e.propertyName === "opacity") drop();
 		});
-		const timer = setTimeout(drop, PAGE_MS + 80);
+	}
+
+	/**
+	 * Run `done` once `el`'s transition of `prop` is over. The real signal is
+	 * `transitionend` — or `transitioncancel`, for one a resize snaps short —
+	 * so the transition's actual length rules, however long: DevTools' slowed
+	 * animations stretch it tenfold without touching any timer. The timer only
+	 * stands in for a transition that never starts at all (transitions off,
+	 * element never placed, nothing to travel), which is why one proving real
+	 * (`transitionrun`) disarms it.
+	 */
+	private afterTransition(el: HTMLElement, prop: string, done: () => void): void {
+		let called = false;
+		const timer = setTimeout(() => finish(), PAGE_MS + 80);
 		this.timers.add(timer);
+		const disarm = () => { clearTimeout(timer); this.timers.delete(timer); };
+		const finish = () => { disarm(); if (!called) { called = true; done(); } };
+		const forProp = (fn: () => void) => (e: TransitionEvent) => {
+			if (e.target === el && e.propertyName === prop) fn();
+		};
+		el.addEventListener("transitionrun", forProp(disarm));
+		el.addEventListener("transitionend", forProp(finish));
+		el.addEventListener("transitioncancel", forProp(finish));
 	}
 
 	// ── Navigation ─────────────────────────────────────────────────────────
@@ -1821,14 +1870,23 @@ export class PanelStackController implements PanelStack {
 		// Phase 1 — lay the strip out for this frame: each panel flush against
 		// its neighbours, the visible run [first..cur] in the viewport, earlier
 		// panels continuing off its left edge and parked ones held past its
-		// right. Placed panels get their new positions — their standing
-		// transitions carry them there. Newcomers, transitions still off, get
-		// their *start* state instead: their strip position anchored to the OLD
-		// position of the nearest placed panel beneath them (`delta`), so the
-		// slide in is one motion with the panels making room. With nothing
-		// beneath them to come from — or nothing moving — that start is where
-		// they already stand, and they simply fade in.
-		const fresh: { entry: PanelEntry; x: number }[] = [];
+		// right. `left` gets each new resting position outright — it never
+		// animates — and the slide to it is a FLIP: a mover is held at its
+		// current visual spot by a transform (its mid-slide offset plus the
+		// distance), a newcomer at its start beside the OLD position of the
+		// nearest placed panel beneath it (`delta`, so the slide in is one
+		// motion with the panels making room; with nothing beneath it to come
+		// from, it simply fades in place). Phase 3 plays every held transform
+		// out to none. A snap pass holds nothing: geometry must land, not
+		// travel.
+		const fresh: PanelEntry[] = [];
+		const movers: HTMLElement[] = [];
+		const deltas = new Map<string, number>();
+		// All reads before all writes: a mover may still be mid-slide, and its
+		// current offset must come out of the computed style before this pass
+		// dirties it (one style recalc, then cached).
+		const txs = new Map<PanelEntry, number>();
+		if (!snap) for (const entry of live) { if (entry.placed) txs.set(entry, transformX(entry.el!)); }
 		let x = left;
 		let delta = 0;
 		for (let i = 0; i < first; i++) x -= live[i].width;
@@ -1846,14 +1904,26 @@ export class PanelStackController implements PanelStack {
 			}
 			if (entry.placed) {
 				delta = parseFloat(el.style.left) - x;
+				deltas.set(entry.path, delta);
+				if (delta && !snap) {
+					// Hold the visual spot while `left` jumps beneath it. The
+					// inline transition keeps the transform still — and only it:
+					// running fades carry on, and one starting this pass (a
+					// release below) still gets its linear curve.
+					el.style.transition = `opacity ${PAGE_MS}ms linear`;
+					el.style.transform = `translateX(${(txs.get(entry) ?? 0) + delta}px)`;
+					movers.push(el);
+				}
 				el.style.left = `${x}px`;
 				// A fade held back for content starts the moment its hold lifts.
 				if (entry.enter && !entry.$ui.holding) this.releaseEnter(entry);
 			} else {
-				fresh.push({ entry, x });
-				const entering = entry.enter && shown;
-				el.style.left = `${entering ? x + delta : x}px`;
-				if (entering) el.classList.add("s-panel-enter", "s-panel-new");
+				fresh.push(entry);
+				el.style.left = `${x}px`;
+				if (entry.enter && shown) {
+					el.style.transform = `translateX(${delta}px)`;
+					el.classList.add("s-panel-enter", "s-panel-new");
+				}
 			}
 			el.style.width = `${entry.width}px`;
 			x += entry.width;
@@ -1862,23 +1932,58 @@ export class PanelStackController implements PanelStack {
 			if (entry.$panel.visible !== shown) entry.$panel.visible = shown;
 			if (entry.$panel.width !== entry.width) entry.$panel.width = entry.width;
 			el.classList.toggle("s-panel-sep", shown && i > first);
-			// Off-screen panels stop rendering, keeping their DOM.
-			el.classList.toggle("s-panel-hidden", i < first);
-			el.classList.toggle("s-panel-parked", i > cur);
+			// Off-screen panels stop rendering, keeping their DOM. A revealed
+			// panel is visible at once; one sliding offstage stays visible for
+			// the whole slide, its visibility class deferred to the slide's
+			// end — but applied outright when it is already invisible, about
+			// to be (a newcomer offstage from birth), or snapping.
+			const hidden = i < first;
+			const wasOff = el.classList.contains("s-panel-hidden") || el.classList.contains("s-panel-parked");
+			if (shown) {
+				el.classList.remove("s-panel-hidden", "s-panel-parked");
+			} else if (wasOff || !entry.placed || snap) {
+				el.classList.toggle("s-panel-hidden", hidden);
+				el.classList.toggle("s-panel-parked", !hidden);
+			} else {
+				this.afterTransition(el, "transform", () => {
+					if (entry.el !== el || !entry.offstage) return;
+					el.classList.toggle("s-panel-hidden", hidden);
+					el.classList.toggle("s-panel-parked", !hidden);
+				});
+			}
+			entry.offstage = !shown;
 			el.toggleAttribute("inert", !shown);
 		}
 
+		// Closing panels keep their seat on the strip while they fade: each
+		// travels exactly as far as its anchor — the surviving panel it stood
+		// on — so a close slides back out the way the open slid in, and one
+		// whose anchor stays put is the plain crossfade it should be. A plain
+		// retarget, no holding: the transition picks the slide up from wherever
+		// the element is now.
+		for (const exit of this.exiting) {
+			const d = exit.anchor == null ? undefined : deltas.get(exit.anchor);
+			if (d) {
+				exit.ride -= d;
+				exit.el.style.transform = `translateX(${exit.ride}px)`;
+			}
+		}
+
 		// Phase 2 — reading a layout property forces the browser to adopt those
-		// start states (and a snap pass's transition-free geometry) to animate from.
-		if (fresh.length || snap) void container.offsetWidth;
+		// held spots (and a snap pass's transition-free geometry) to slide from.
+		if (fresh.length || movers.length || snap) void container.offsetWidth;
 		if (snap) shell.classList.remove("s-shell-snap");
-		// Phase 3 — newcomers get their transitions and their resting place: the
-		// slide starts now, and the fade with it — unless the panel is holding
+		// Phase 3 — every held transform plays out to none: the slides start
+		// now, and the newcomers' fades with them — unless a panel is holding
 		// for its content, which keeps the fade's start state on until then.
-		for (const { entry, x } of fresh) {
+		for (const el of movers) {
+			el.style.transition = "";
+			el.style.transform = "";
+		}
+		for (const entry of fresh) {
 			const el = entry.el!;
 			el.style.transition = "";
-			el.style.left = `${x}px`;
+			el.style.transform = "";
 			entry.placed = true;
 			if (!entry.$ui.holding) this.releaseEnter(entry);
 		}
@@ -1890,14 +1995,8 @@ export class PanelStackController implements PanelStack {
 		const el = entry.el;
 		if (!el || !el.classList.contains("s-panel-enter")) return;
 		el.classList.remove("s-panel-enter");
-		// Keep it beneath its elders until the fade is over — by timer, a hair
-		// past it, since a resize can snap the fade short without ever firing a
-		// `transitionend`.
-		const timer = setTimeout(() => {
-			this.timers.delete(timer);
-			el.classList.remove("s-panel-new");
-		}, PAGE_MS + 80);
-		this.timers.add(timer);
+		// Keep it beneath its elders until the fade is over.
+		this.afterTransition(el, "opacity", () => el.classList.remove("s-panel-new"));
 	}
 
 	/** Let a `loading` panel's fade-in wait — but not indefinitely. */
@@ -1920,6 +2019,12 @@ function sameStack(a: string[], b: string[]): boolean {
 	return a.length === b.length && a.every((v, i) => v === b[i]);
 }
 
+/** The X offset of `el`'s computed transform — where a slide has it right now. */
+function transformX(el: HTMLElement): number {
+	const t = getComputedStyle(el).transform;
+	return t && t !== "none" ? new DOMMatrixReadOnly(t).m41 : 0;
+}
+
 /**
  * The first non-empty text inside `el`, trimmed and capped at a name-like
  * length — the stand-in title for a panel that never set one.