staffa 0.11.0 → 0.12.1

package/src/components/main.ts

@@ -1,14 +1,14 @@
 import A from "aberdeen";
-import { current as currentRoute, matchCurrent } from "aberdeen/route";
+import { current as currentRoute } from "aberdeen/route";
 import { type Slot, type Attributes, drawSlot, focusFirst, NARROW_PX } from "../core.js";
-import { type MenuOptions, type MenuEntry, drawMenu, isFloatingMenuOpen, consumeBranchNav } from "./menu.js";
+import { type MenuOptions, drawMenu, isFloatingMenuOpen, consumeBranchNav, anyCurrent } from "./menu.js";
 // The shell's own chrome glyphs, from the same Lucide set an app draws with —
 // so a nav trigger sits beside app icons as an equal. Named imports, so a
 // bundler keeps these two and tree-shakes the other ~1950 away.
 import { menu as menuIcon, x as closeIcon } from "../icons.js";
 import { iconButton } from "./button.js";
 import { isDialogOpen } from "./dialog.js";
-import { PanelStackController, type PanelStack, type AncestorTable, type Panel, type RouteHandler, type RouteTable, type Routes } from "./panels.js";
+import { PanelStackController, SHELL_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> {
@@ -195,6 +195,10 @@ export interface MainOptions<R = Routes> {
 	 * — the phone experience at every size (the nav sidebar still sits beside
 	 * it). Only the display differs: the stack, the breadcrumbs, the URL,
 	 * Escape and the back button behave identically in both. Routed mode only.
+	 *
+	 * Live: pass a proxied options object (or make this field a getter) and a
+	 * change is adopted in place — one layout pass, every panel keeping its
+	 * state.
 	 */
 	columns?: "auto" | "single";
 	/**
@@ -205,6 +209,9 @@ export interface MainOptions<R = Routes> {
 	 * every click replaces the content as a whole — which, with flat routes,
 	 * is the conventional sidebar-and-content app: one pane, swapped on every
 	 * click, the crumb line simply naming it. Routed mode only.
+	 *
+	 * Live, like {@link MainOptions.columns}: change it and the next click
+	 * uses the new default.
 	 */
 	linkNavigation?: "push" | "replace" | "open";
 	/** Footer content, pinned below the scroll area. */
@@ -271,8 +278,10 @@ A.insertGlobalCss({
 		// The bar reads `[leading] [title] …spacer… [trailing]`. The spacer is the
 		// trailing slot's own growth: it takes the free space and right-aligns
 		// itself in it, which is what lets a search box live there. When the two
-		// compete, the title truncates first — but only down to a floor, past
-		// which the trailing slot shrinks instead: a wide search box must not
+		// compete, the titles give way first: the trailing slot's near-zero
+		// shrink factor keeps a row of actions at its natural width while the
+		// crumbs absorb the squeeze — but only down to the titles' floor, past
+		// which the trailing slot shrinks after all: a wide search box must not
 		// starve the titles to nothing (the crumb strip's overlay buttons would
 		// escape their zero-width strip, over the ☰ beside it).
 		"> header > .s-bar, > footer > .s-bar": "display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;",
@@ -293,13 +302,16 @@ A.insertGlobalCss({
 		// which their classes then provide. (`filter:none` keeps the global
 		// `a:hover` brighten off the gradient text.)
 		"> header a.s-logo, > header a.s-title": "text-decoration:none filter:none cursor:pointer",
-		"> header .s-menu": "display:flex align-items:center justify-content:flex-end gap:$2 flex: 1 1 auto; min-width:0",
+		"> header .s-menu": "display:flex align-items:center justify-content:flex-end gap:$2 flex: 1 0.1 auto; min-width:0",
 		// Body always wraps <main> (with or without a sidebar) so max-width centering
 		// and scrollbar alignment work identically in both cases.
 		// .s-body centres .s-body-inner; .s-body-inner caps the content to maxWidth.
 		// It's also the positioning + clipping context for the narrow-screen nav panel,
-		// which slides in and out across its left edge.
-		".s-body": "flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center position:relative",
+		// which slides in and out across its left edge. `overflow:clip` rather than
+		// `hidden` for the same reason as `.s-panels`: a hidden box can still be
+		// scrolled (find-in-page, an anchor, an extension), and a stray scroll here
+		// would shove the whole row — sidebar and columns — out of place for good.
+		".s-body": "flex:1 overflow:clip display:flex flex-direction:row min-height:0 justify-content:center position:relative",
 		".s-body-inner": "flex:1 min-width:0 display:flex flex-direction:row min-height:0",
 		// Put the sidebar on the right (content fills the left) for right-hand navs.
 		"&.s-nav-right .s-body-inner": "flex-direction:row-reverse",
@@ -331,22 +343,25 @@ A.insertGlobalCss({
 		// Routed mode takes its width from the stack instead of from
 		// `maxWidth`: the layout engine publishes the ensemble width (sidebar +
 		// separator + content area) as --s-shell-w — the standard 1280px page
-		// normally, the window's edges while a "screen" page is up — and the body
-		// row and the bars cap themselves to it. So the chrome lines up with the
-		// columns and the lot stays centred in the shell.
-		"&.s-routed > .s-body > .s-body-inner": "max-width: var(--s-shell-w, 100%);",
-		"&.s-routed > header > .s-bar": "max-width: var(--s-shell-w, 100%);",
-		"&.s-routed > footer > .s-bar": "max-width: var(--s-shell-w, 100%);",
-		// Changing the custom property animates the max-widths consuming it, with no
-		// JS in the loop: the chrome recentres in step with the panel whose arrival
-		// or departure moved it, over the same --s-panel-ms (see panels.ts). During
-		// a window resize (and the very first pass) the layout engine raises
-		// `.s-shell-snap` so the new width is adopted instantly instead of chasing
-		// the window through a transition.
-		"&.s-routed > .s-body > .s-body-inner, &.s-routed > header > .s-bar, &.s-routed > footer > .s-bar":
-			"transition: max-width var(--s-panel-ms) ease;",
-		"&.s-routed.s-shell-snap > .s-body > .s-body-inner, &.s-routed.s-shell-snap > header > .s-bar, &.s-routed.s-shell-snap > footer > .s-bar":
-			"transition:none",
+		// normally, wider while the columns outgrow it (a "screen" page, or
+		// extra columns fitting a wide window) — and the body row caps itself
+		// to it, staying centred around the columns. Changing the custom
+		// property animates the max-width consuming it, with no JS in the loop:
+		// the body recentres in step with the panel whose arrival or departure
+		// moved it, over the same --s-panel-ms (see panels.ts). During a window
+		// resize (and the very first pass) the layout engine raises
+		// `.s-shell-snap` so the new width is adopted instantly instead of
+		// chasing the window through a transition.
+		"&.s-routed > .s-body > .s-body-inner":
+			"max-width: var(--s-shell-w, 100%); transition: max-width var(--s-panel-ms) ease;",
+		"&.s-routed.s-shell-snap > .s-body > .s-body-inner": "transition:none",
+		// The bars don't follow the ensemble past the standard page: a header
+		// stretching to the window's edges and back with every "screen" panel
+		// reads as the whole app flexing, so the chrome holds still and only
+		// the columns grow. (Below the standard width the ensemble is simply
+		// the window, which only a resize changes — so the bars never animate,
+		// and take no part in the transition above.)
+		[`&.s-routed > header > .s-bar, &.s-routed > footer > .s-bar`]: `max-width:${SHELL_PX}px`,
 	},
 	// Sidebar nav panel. Items reuse the shared `.s-menu-item` /
 	// `.s-menu-sep` styles from menu.ts, so the sidebar and the floating
@@ -372,10 +387,12 @@ A.insertGlobalCss({
 			// body starts below the bar), but the bar should still win if they ever do.
 			"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;",
+			"transition: transform var(--s-panel-ms) ease, visibility var(--s-panel-ms);",
 		// Parked one screen to the left: the state the `create=`/`destroy=` hooks
-		// transition out of and back into.
-		"&.s-nav-page-off": "transform:translateX(-100%) pointer-events:none",
+		// transition out of and back into. `visibility` flips at the slide's end
+		// (see `.s-menu-list` in menu.ts): the dismissed page lingers off screen
+		// until Aberdeen's removal timer, and mustn't stay reachable meanwhile.
+		"&.s-nav-page-off": "transform:translateX(-100%) pointer-events:none visibility:hidden",
 		// Roomier rows than the dropdown's: this is the whole screen, and every row
 		// is a thumb target.
 		".s-menu-item": "padding: $2 $3; min-height:3rem font-size:1.05em gap:$3",
@@ -483,12 +500,19 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): PanelS
 			routes,
 			notFound: opts.notFound,
 			ancestors: opts.ancestors,
-			columns: opts.columns,
-			linkNavigation: opts.linkNavigation,
 			title: opts.title,
 			$shell,
 		})
 		: null;
+	if (ctl) {
+		// `columns` and `linkNavigation` are live: each is read in a scope of
+		// its own, so when the options object is a proxy (or the field a
+		// getter), a change re-runs just that scope — the columns relayout in
+		// place with every panel's state intact, and the next click picks up
+		// the new link default. Nothing else of the shell is touched.
+		A(() => ctl.setColumns(opts.columns));
+		A(() => ctl.setLinkNavigation(opts.linkNavigation));
+	}
 	// Where the brand mark and the app's name link — or nowhere, when the app
 	// said `home: null` (a title slot holding a control of its own, say).
 	const homeHref = ctl && opts.home !== null ? opts.home ?? "/" : null;
@@ -743,23 +767,18 @@ function drawSecondLine(
 
 /**
  * Whether the stack would only be saying what the sidebar already says: a
- * single panel open, the sidebar on screen, and that panel being one of the nav's
- * own rows.
+ * single panel open, the sidebar on screen, and that panel being one of the
+ * nav's own rows — a leaf inside a submenu counts, since the sidebar shows it
+ * highlighted (inside its unfolded branch) all the same.
  *
- * The row test is {@link matchCurrent} — the very thing that marks a row
- * `aria-current=page` — so "the crumb is redundant" and "the sidebar has it
- * highlighted" can never come apart. It compares whole paths, so it is true
- * only for a nav item's own screen, never for one opened beneath it.
+ * The row test is the menu's own {@link anyCurrent} — the very thing that
+ * marks a row `aria-current=page` — so "the crumb is redundant" and "the
+ * sidebar has it highlighted" can never come apart.
  */
 function taglineFits(ctl: PanelStackController, nav: MenuOptions | undefined, $shell: { narrow: boolean }): boolean {
 	if ($shell.narrow || nav == null) return false;
 	if (ctl.panels.length > 1) return false;
-	return nav.items.some((entry: MenuEntry) =>
-		typeof entry !== "string" &&
-		typeof entry !== "function" &&
-		!("separator" in entry) &&
-		entry.href != null &&
-		matchCurrent(entry.href));
+	return anyCurrent(nav.items);
 }
 
 /**

package/src/components/menu.ts

@@ -30,6 +30,17 @@ export interface MenuItem {
 	 * `attrs: "data-panel=push"` for a row that should stack instead.
 	 */
 	href?: string;
+	/**
+	 * Pages this item claims *beyond* its own `href`: a string claims that path
+	 * and everything under it (`"/mail"` claims `/mail/…`, not `/mailbox`), a
+	 * function is asked with the current path. While a claimed page is current,
+	 * the item is highlighted and the branches above it stay unfolded — for the
+	 * detail screens a menu has no row of their own: the `/thread/[id]` a
+	 * notification lands on, an icon's page under the gallery's row. Claims
+	 * work from the very first paint, so they also cover cold deep links,
+	 * which no amount of fold-state keeping can.
+	 */
+	match?: string | ((path: string) => boolean);
 	/** `target` for the link (`_blank`, etc.). Only meaningful with `href`. */
 	target?: string;
 	/** Disables the item. */
@@ -133,12 +144,17 @@ export type ContextMenuOptions = Omit<FloatingMenuOptions, "anchor" | "at" | "cl
 A.insertGlobalCss({
 	// Border comes from the `.s-s.neutral` surface; the panel only overrides the radius
 	// (lg) and opts into elevation via `.shadow` (added on the element below).
+	// `visibility` rides the same transition as the fade (flipping only at its
+	// end, per CSS visibility interpolation): a dismissed menu lingers in the
+	// DOM for a while — Aberdeen's `destroy=` removes it on a timer, not at
+	// the transition's end — and without this it would spend that time
+	// invisible yet still hittable by tests and read by assistive tech.
 	".s-menu-list":
 		"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 " +
 		"r:$s-radius-lg " +
 		"overflow-y:auto max-height:min(80vh,28rem) " +
-		"transition: opacity 0.15s, transform 0.15s;",
-	".s-menu-list.hidden": "opacity:0 pointer-events:none transform:translateY(-6px)",
+		"transition: opacity 0.15s, transform 0.15s, visibility 0.15s;",
+	".s-menu-list.hidden": "opacity:0 pointer-events:none transform:translateY(-6px) visibility:hidden",
 	// One class for both the `<a>` (link) and `<button>` forms — they look
 	// identical; the element only differs where link semantics matter (see below).
 	// The scroll-margin keeps a revealed row (see the scrollIntoView in
@@ -282,7 +298,7 @@ function drawLeaf(entry: MenuItem, onLeafSelect?: () => void): void {
 			A(() => {
 				const first = !drawn;
 				drawn = true;
-				if (!matchCurrent(entry.href!)) return;
+				if (!isCurrent(entry)) return;
 				A("aria-current=page");
 				// A list taller than its scrollport (a long sidebar nav, mostly)
 				// highlights nothing when the current row is scrolled out of it,
@@ -307,6 +323,20 @@ function drawLeaf(entry: MenuItem, onLeafSelect?: () => void): void {
 	});
 }
 
+/**
+ * The last route-derived fold state of every linked branch, keyed by the
+ * branch's selection href. Module-level on purpose: the phone's full-page nav
+ * (and any dropdown) mounts a fresh menu every time it opens, and per-mount
+ * state would hand it three folded sections in the middle of the user's work.
+ * Bounded by the number of distinct branch hrefs an app ever shows.
+ */
+const foldMemory = new Map<string, boolean>();
+
+function setFold(href: string, open: boolean): boolean {
+	foldMemory.set(href, open);
+	return open;
+}
+
 /**
  * A branch: a native `<details>` folding a sub-list of entries in and out. The
  * children stay mounted whether folded or not — closing hides them, it doesn't
@@ -327,12 +357,17 @@ function drawBranch(entry: MenuItem, onLeafSelect?: () => void, $menuHasCurrent?
 	// nowhere in the menu, nothing has an opinion, and the fold simply keeps
 	// its last state — folding everything up would answer a question nobody
 	// asked with a menu that forgot where the user was.
-	let last = false;
+	//
+	// "Last state" lives in `foldMemory`, not in this closure: menus remount —
+	// the phone's full-page nav exists only while it is open — and a remount
+	// must find the state where the previous mount left it. It is keyed on the
+	// branch's selection href, so the sidebar and the phone nav (two renderings
+	// of the same items) share one truth, however often either is rebuilt.
 	const $open = href != null
 		? A.derive(() => {
-			if (containsCurrent(entry)) return (last = true);
-			if ($menuHasCurrent == null || $menuHasCurrent.value) return (last = false);
-			return last;
+			if (containsCurrent(entry)) return setFold(href, true);
+			if ($menuHasCurrent == null || $menuHasCurrent.value) return setFold(href, false);
+			return foldMemory.get(href) ?? false;
 		})
 		: null;
 
@@ -344,9 +379,10 @@ function drawBranch(entry: MenuItem, onLeafSelect?: () => void, $menuHasCurrent?
 		A("summary.s-menu-item.s-menu-branch", entry.attrs, () => {
 			if (entry.disabled) A("aria-disabled=true");
 			A(() => {
-				// Current only on its *own* page: when a descendant is current, that
+				// Current only on its *own* page (its `href`, or a `match` claim —
+				// pages with no row of their own): when a descendant is current, that
 				// row carries the highlight, and two highlights would read as two pages.
-				if (entry.href != null && matchCurrent(entry.href)) A("aria-current=page");
+				if (isCurrent(entry)) A("aria-current=page");
 			});
 			A("click=", (e: Event) => {
 				if (entry.disabled) { e.preventDefault(); return; }
@@ -384,15 +420,35 @@ function foldedAway(el: HTMLElement): boolean {
 	return false;
 }
 
-/** Whether any page linked anywhere in `items` is the current one. */
-function anyCurrent(items: MenuEntry[]): boolean {
+/**
+ * Whether any item anywhere in `items` — branches, their leaves, `match`
+ * claims — is the current page. The one question both the fold logic and the
+ * shell's tagline rule (see `taglineFits` in main.ts) ask of a menu, exported
+ * so the two can never disagree with the highlighting.
+ */
+export function anyCurrent(items: MenuEntry[]): boolean {
 	return items.some((entry) =>
 		typeof entry !== "string" && typeof entry !== "function" && !("separator" in entry) && containsCurrent(entry));
 }
 
-/** Whether `entry`'s own page, or any page linked below it, is the current one. */
-function containsCurrent(entry: MenuItem): boolean {
+/**
+ * Whether this item is the current page: its own `href` matches, or its
+ * `match` claims the current path. The single test behind `aria-current`,
+ * branch unfolding, and {@link anyCurrent} — one truth, three consumers.
+ */
+function isCurrent(entry: MenuItem): boolean {
 	if (entry.href != null && matchCurrent(entry.href)) return true;
+	const m = entry.match;
+	if (m == null) return false;
+	const path = currentRoute.path;
+	if (typeof m === "function") return m(path);
+	const claim = m.replace(/\/+$/, "") || "/";
+	return path === claim || path.startsWith(claim === "/" ? "/" : claim + "/");
+}
+
+/** Whether `entry` is the current page itself, or holds it anywhere below. */
+function containsCurrent(entry: MenuItem): boolean {
+	if (isCurrent(entry)) return true;
 	for (const child of entry.items ?? []) {
 		if (typeof child === "string" || typeof child === "function" || "separator" in child) continue;
 		if (containsCurrent(child)) return true;

package/src/components/panels.ts

@@ -179,13 +179,19 @@ export interface Panel<P = Record<string, string | number | string[]>> {
 	 *   column fits beside it. For lists and detail forms.
 	 * - `"full"` (the default) — the whole content area, up to ~1100px.
 	 * - `"screen"` — the whole window, unbounded: boards, wide tables, dense
-	 *   dashboards. While one is open the shell itself stretches to the screen
-	 *   edges instead of stopping at the standard 1280px page.
+	 *   dashboards. While one is open the columns stretch to the screen edges
+	 *   instead of stopping at the standard 1280px page; the top bar and
+	 *   footer hold the standard width throughout.
 	 *
 	 * Below the width two columns need, everything takes the content area
 	 * whatever it asked for. Widths depend only on the window, never on what
 	 * else is open, so opening or closing a panel never resizes another.
 	 *
+	 * This is a *layout regime*, not a width guarantee: handle whatever width
+	 * the bucket yields, and ask only for what your content can actually use —
+	 * a screen that would cap its own content narrower than its ask is holding
+	 * room that would have let another column fit beside it.
+	 *
 	 * Set it at the top of your handler and the panel is already that wide when
 	 * you draw (see {@link Panel.width}); set it later — when your data tells you
 	 * — and the panel reflows without being redrawn, keeping its state, while
@@ -261,6 +267,31 @@ export interface Panel<P = Record<string, string | number | string[]>> {
 	 * ```
 	 */
 	close(): Promise<boolean>;
+	/**
+	 * Opens `href` exactly as a click on a link inside this panel does — the
+	 * shell's own link handling runs through this very call, so the two can't
+	 * drift apart. By default that is a push: the target opens on top of this
+	 * panel, closing the panels after it first (pinned ones ride along
+	 * beneath the new panel, unsaved ones park), and a path that is already
+	 * open is returned to rather than opened twice. `how` plays the part of a
+	 * link's `data-panel` attribute: `"replace"` puts the target in this
+	 * panel's place, `"open"` leaves the panel behind and gives the target
+	 * its own stack, and omitting it follows the shell's
+	 * {@link MainOptions.linkNavigation}, like a link without the attribute.
+	 *
+	 * This is the one for navigation that can't be a link: a row's click
+	 * handler, a keyboard shortcut acting on this screen. The stack's
+	 * {@link PanelStack.pushPanel} builds on the *current* panel instead — a
+	 * different panel exactly when the interaction happened in a column
+	 * beside it, where it would pile the new panel on top of the open detail
+	 * rather than pruning back to this one.
+	 *
+	 * @example
+	 * ```ts
+	 * A("div.row click=", () => void $panel.open(`/contacts/${id}`), ...);
+	 * ```
+	 */
+	open(href: string, how?: "push" | "replace" | "open"): Promise<boolean>;
 }
 
 // ─── Path matching ───────────────────────────────────────────────────────────
@@ -374,7 +405,7 @@ function matchRoute(r: { segs: Seg[] }, segments: string[]): Record<string, any>
 /**
  * The one duration every bit of shell motion shares: the enter/exit fades, the
  * `left` moves of columns shifting sideways, the ensemble-width transition the
- * chrome follows (see `--s-shell-w` in main.ts), and the narrow-screen nav
+ * body row follows (see `--s-shell-w` in main.ts), and the narrow-screen nav
  * panel's slide. Published as the `--s-panel-ms` custom property below, so CSS
  * and JS can't drift apart.
  *
@@ -388,9 +419,11 @@ const LOADING_HOLD_MS = 300;
 /**
  * The standard page width: sidebar plus content area, capped by the window.
  * `"full"` fills the content-area part of this exactly; only a `"screen"`
- * page makes the shell grow past it.
+ * page makes the shell grow past it. The top bar and footer keep to this
+ * width even then (see main.ts), so the chrome holds still while the
+ * columns stretch.
  */
-const SHELL_PX = 1280;
+export const SHELL_PX = 1280;
 /** Don't pair smalls when half the content area would be narrower than this. */
 const PAIR_MIN_PX = 360;
 /**
@@ -415,8 +448,13 @@ A.insertGlobalCss({
 	// The region paints the panel's sheen over its own box, and every panel shows
 	// a slice of that same gradient (see `.s-panel` below), so the columns and
 	// the ground beside them are one continuous surface.
+	// `overflow:clip`, not `hidden`: a hidden box is still a scroll container,
+	// and anything that ever scrolls it — find-in-page reaching for text in a
+	// parked column, an in-page anchor, an extension — shifts every column
+	// sideways, permanently, because nothing here would ever scroll it back.
+	// `clip` clips without being scrollable at all, closing the whole class.
 	".s-panels":
-		"flex:1 min-width:0 min-height:0 position:relative overflow:hidden isolation:isolate " +
+		"flex:1 min-width:0 min-height:0 position:relative overflow:clip isolation:isolate " +
 		SURFACE_SHEEN,
 	".s-panel": {
 		// A panel rests at a plain `left` offset and carries no transform: a
@@ -513,14 +551,19 @@ A.insertGlobalCss({
 		// the weight change alone is ambiguous in a short crumb, the colour alone
 		// too subtle. No padding of its own — the first crumb has to start on the
 		// same pixel as the app's name above it, and the gap below spaces the row.
-		// `flex-shrink:0` because the crumbs are the strip's flex items and carry
-		// `overflow:hidden`, which resolves their automatic minimum size to zero:
-		// left to shrink they would ellipsise themselves down to stubs rather than
-		// overflow, and the stack would never scroll. One long title still caps at
-		// 14rem — that is this crumb's own business, not the row running out.
+		// The flex is how a tight row is shared out. Every crumb grows from the
+		// same 4rem basis in equal shares, freezing at its own text
+		// (`max-width:max-content`) — so with room to spare every title shows in
+		// full, and under pressure it is the *longest* crumbs that give way
+		// first, equalising downward while short ones keep every character. No
+		// crumb drops below min(its text, 4rem) though: `flex-shrink:0`, so past
+		// that point the row overflows and the strip scrolls — which is what
+		// keeps a deep stack on a phone readable. (Crumbs allowed to shrink
+		// would ellipsise to a row of stubs instead, and the stack would never
+		// scroll.)
 		"&":
-			"flex-shrink:0 font-size:0.85em line-height:1.5 fg:$s-muted text-decoration:none " +
-			"white-space:nowrap max-width:14rem overflow:hidden text-overflow:ellipsis " +
+			"flex: 1 0 4rem; font-size:0.85em line-height:1.5 fg:$s-muted text-decoration:none " +
+			"white-space:nowrap max-width:max-content overflow:hidden text-overflow:ellipsis " +
 			"transition: color 0.12s;",
 		"&.s-crumb-on": "font-weight:600 fg:$s-text",
 		// The same hover treatment as a menu item. The panel you are on is a plain
@@ -739,6 +782,11 @@ export interface PanelStack {
 	 * than opening it twice, and a panel holding {@link Panel.unsaved} work is
 	 * never closed, only parked. That's what a plain link does, and what
 	 * `data-panel=push` says outright.
+	 *
+	 * Note that a link builds on the panel it is *drawn in*, which is the
+	 * current panel only while no column beside it has the focus. Code
+	 * navigating on behalf of a particular screen — a row's click handler —
+	 * wants that panel's own {@link Panel.open} instead.
 	 */
 	pushPanel(path: string): Promise<boolean>;
 	/**
@@ -1117,9 +1165,12 @@ export class PanelStackController implements PanelStack {
 			maxWidth: "full" as const,
 			width: 0,
 		} as PanelEntry;
-		// `close` closes *this* panel, current or not. It resolves the panel's
-		// place in the stack at call time, so it keeps working after a splice has
-		// moved it — and quietly resolves false once the panel is gone.
+		// `close` closes *this* panel, current or not, and `open` navigates
+		// *from* it, through the very implementation a link click uses (see
+		// `navigate`). Both resolve the panel's place in the stack at call
+		// time, so they keep working after a splice has moved it; an `open`
+		// from a panel that has since closed falls back to a derived stack,
+		// like a link from nowhere.
 		//
 		// `visible` starts at what the panel's place implies: shown when it sits
 		// at or before the current panel (a pushed panel always does), hidden when
@@ -1133,6 +1184,7 @@ export class PanelStackController implements PanelStack {
 			visible,
 			pinned: pinned || undefined,
 			close: () => this.closePath(entry.path),
+			open: (href: string, how?: "push" | "replace" | "open") => this.navigate(href, { from: entry.path, how }),
 		}) as PanelState;
 		return entry;
 	}
@@ -1365,17 +1417,31 @@ export class PanelStackController implements PanelStack {
 	}
 
 	/**
-	 * Navigate to `href`. `origin` is the path of the panel the link lives in, or
-	 * `null` when it has none — a nav item, or a programmatic call, which builds
-	 * the whole stack instead (see {@link deriveStack}). `replace` swaps the
-	 * originating panel rather than stacking on top of it, and `beneath` says what
-	 * the stack under the target is outright, for callers that know.
+	 * Navigate to `href` — the one implementation behind a link click,
+	 * {@link Panel.open} and the stack's own methods, so none of them can
+	 * behave differently.
+	 *
+	 * `from` is the path of the panel the navigation starts from — the one
+	 * the link lives in — or absent when it has none: a nav item, or a call
+	 * that means the whole stack, which is then built instead (see
+	 * {@link deriveStack}), or taken outright from `beneath`, for callers
+	 * that know it.
+	 *
+	 * `how` is the link's `data-panel` attribute (or the caller's word for
+	 * it): absent — like a link without the attribute — it is the shell's
+	 * `linkNavigation` default, an unrecognised value is a push on top of
+	 * `from`, `"replace"` swaps `from` out rather than stacking on it, and
+	 * `"open"` drops `from` altogether so the target arrives with its own
+	 * stack, the way a nav item's link does.
 	 *
 	 * Resolves the way every {@link PanelStack} method does: `true` once the
 	 * navigation lands, `false` when it doesn't (already there counts as
 	 * landed).
 	 */
-	private navigate(href: string, origin: string | null, replace = false, beneath?: readonly string[]): Promise<boolean> {
+	private navigate(href: string, { from, how, beneath }: { from?: string; how?: string; beneath?: readonly string[] } = {}): Promise<boolean> {
+		const mode = how ?? this.opts.linkNavigation;
+		const origin = mode === "open" ? null : from ?? null;
+		const replace = mode === "replace";
 		return A.peek(() => {
 			let url: URL;
 			try { url = new URL(href, location.href); } catch { return Promise.resolve(false); }
@@ -1430,7 +1496,7 @@ export class PanelStackController implements PanelStack {
 	private pushPath(path: string, replace: boolean): Promise<boolean> {
 		return A.peek(() => {
 			const arr = this.intended();
-			return this.navigate(path, arr.stack[arr.focus] ?? null, replace);
+			return this.navigate(path, { from: arr.stack[arr.focus], how: replace ? "replace" : "push" });
 		});
 	}
 
@@ -1438,36 +1504,30 @@ export class PanelStackController implements PanelStack {
 
 	/**
 	 * Link handling through `route.interceptLinks()`, whose handler hook hands us
-	 * the anchor so we can decide what the click *means*: the originating
-	 * `.s-panel` (which decides what the click truncates), the `data-panel`
-	 * attribute, and return-to-an-open-panel semantics. The exclusion rules
+	 * the anchor so we can decide what the click *means*. The exclusion rules
 	 * (targets, downloads, modified clicks, external URLs) live in Aberdeen; the
 	 * close guards run in `checkChange` when our navigation reaches the router.
 	 *
-	 * `data-panel` names which of the three {@link PanelStack} navigations the
-	 * click is: `push`, `replace`, or `open`, which drops the
-	 * originating panel so the target arrives with its own stack beneath it,
-	 * exactly as a nav item's link does. A link that doesn't say gets the
-	 * shell's {@link PanelStackOptions.linkNavigation} (`push` by default);
-	 * an unrecognised value is a `push`.
+	 * A link inside a panel is that panel's {@link Panel.open}, the `data-panel`
+	 * attribute as its `how` (see {@link navigate}, the shared implementation).
+	 * A link that isn't inside any panel — a nav item, one in a dialog — has no
+	 * panel to build on, so it replaces the stack as a whole, exactly as a cold
+	 * link to the same URL would open it.
 	 */
 	private interceptLinks(): void {
 		route.interceptLinks((url, anchor) => {
-			const mode = anchor.getAttribute("data-panel") ?? this.opts.linkNavigation;
-			let origin: string | null = null;
-			if (mode !== "open") {
-				const panel = anchor.closest<HTMLElement>(".s-panel");
-				if (panel) {
-					origin = this.$state.live.find((entry) => entry.el === panel)?.path ?? null;
-				} else if (anchor.closest(".s-panel-origin")) {
-					// The current panel's actions, promoted into the top bar on a
-					// narrow shell (see main.ts), sit outside every `.s-panel` — but
-					// they are still the current panel's own chrome, so a link among
-					// them builds on that panel, exactly as it does at full width.
-					origin = this.$state.live[this.$state.focus]?.path ?? null;
-				}
-			}
-			void this.navigate(url.href, origin, mode === "replace");
+			const how = anchor.getAttribute("data-panel") ?? undefined;
+			// The panel the link lives in: the enclosing `.s-panel`, or — for the
+			// current panel's actions, promoted into the top bar on a narrow shell
+			// (see main.ts), outside every `.s-panel` — the current panel, whose
+			// own chrome they remain at every width.
+			const panelEl = anchor.closest<HTMLElement>(".s-panel");
+			const entry = panelEl
+				? this.$state.live.find((e) => e.el === panelEl)
+				: anchor.closest(".s-panel-origin")
+					? this.$state.live[this.$state.focus]
+					: undefined;
+			void this.navigate(url.href, { from: entry?.path, how });
 			return true;
 		});
 	}
@@ -1499,7 +1559,7 @@ export class PanelStackController implements PanelStack {
 	}
 
 	openPanelStack(path: string, beneath?: readonly string[]): Promise<boolean> {
-		return this.navigate(path, null, false, beneath);
+		return this.navigate(path, { how: "open", beneath });
 	}
 
 	closePanel(path?: string): Promise<boolean> {
@@ -1509,6 +1569,25 @@ export class PanelStackController implements PanelStack {
 		});
 	}
 
+	// ── Live settings ──────────────────────────────────────────────────────
+	// `main()` keeps these fed from small reactive scopes of their own, so an
+	// app that reads them off a proxy (or through a getter) can change them at
+	// runtime and the shell adapts in place — nothing is redrawn, no panel
+	// loses its state. Not {@link PanelStack} API: the app talks to `main()`'s
+	// options; these are how `main()` talks to the stack.
+
+	/** Adopt a changed `columns` setting: one layout pass, nothing redrawn. */
+	setColumns(columns: "auto" | "single" | undefined): void {
+		if (this.opts.columns === columns) return;
+		this.opts.columns = columns;
+		this.scheduleLayout();
+	}
+
+	/** Adopt a changed `linkNavigation` default; the next click reads it. */
+	setLinkNavigation(mode: "push" | "replace" | "open" | undefined): void {
+		this.opts.linkNavigation = mode;
+	}
+
 	/**
 	 * The breadcrumb stack, drawn by `main()` into the top bar: every open
 	 * panel, oldest first, the ones on screen right now in bold, pinned ones
@@ -1942,11 +2021,11 @@ export class PanelStackController implements PanelStack {
 			if (!entry.width) entry.width = width(entry);
 		}
 
-		// The chrome above and below the body caps itself to the ensemble width,
-		// keeping everything centred and aligned however far the area stretches.
-		// The consumers transition their max-width (see main.ts), so the
-		// recentring plays along with the panel that caused it instead of
-		// snapping.
+		// The body row caps itself to the ensemble width, keeping the columns
+		// centred however far the area stretches, and transitions its max-width
+		// (see main.ts) so the recentring plays along with the panel that caused
+		// it. The bars above and below don't follow — they hold at the standard
+		// page width (also main.ts).
 		shell.style.setProperty("--s-shell-w", `${geom.chrome + area}px`);
 
 		// Phase 1 — every panel's *start* state for this frame. Panels already on