staffa 0.12.0 → 0.13.0

package/src/components/main.ts

@@ -229,6 +229,20 @@ export interface MainOptions<R = Routes> {
 	 * themselves up with them.
 	 */
 	maxWidth?: string;
+	/**
+	 * How wide a `"full"` panel gets, in pixels — and with it the whole content
+	 * area, since a `"full"` fills it exactly. A `"half"` gets half of this, and
+	 * a `"screen"` ignores it and takes the window. Defaults to 1080; the window
+	 * caps it when there is less room than that. Routed mode only.
+	 *
+	 * This plus {@link MainOptions.navWidth} is the app's standard page — see
+	 * there.
+	 *
+	 * Live, like {@link MainOptions.columns}: pass a proxied options object (or
+	 * make this field a getter) and a change is adopted in one layout pass,
+	 * every panel keeping its state.
+	 */
+	fullWidth?: number;
 	/** Aberdeen attr/style string applied to the content area. */
 	contentAttrs?: Attributes;
 	/** Aberdeen attr/style string applied to the top bar. */
@@ -255,12 +269,33 @@ export interface MainOptions<R = Routes> {
 	 * chrome goes assumes they are one.
 	 */
 	navPosition?: "left" | "right";
+	/**
+	 * How wide the nav sidebar column is, in pixels — its hairline included.
+	 * Defaults to 200.
+	 *
+	 * Together with {@link MainOptions.fullWidth} this is the app's *standard
+	 * page*: the width the top bar and footer keep to, and the width the
+	 * columns settle back to. The defaults come to the familiar 1280px.
+	 *
+	 * Live, like {@link MainOptions.fullWidth}.
+	 */
+	navWidth?: number;
 	/** Aberdeen attr/style string applied to the sidebar nav panel. */
 	navAttrs?: Attributes;
 	/** Aberdeen attr/style string applied to the narrow-screen full-page nav. */
 	navPageAttrs?: Attributes;
 }
 
+/**
+ * The default nav column (hairline included) and the default width of a
+ * `"full"` panel — see {@link MainOptions.navWidth} and
+ * {@link MainOptions.fullWidth}. Side by side they come to the 1280px page the
+ * shell is usually seen as, but that figure lives nowhere: the browser adds
+ * these two up, and an app that changes either simply gets a different page.
+ */
+const NAV_W = 200;
+const FULL_W = 1080;
+
 A.insertGlobalCss({
 	".s-main": {
 		// container-type so @container queries below can respond to shell width.
@@ -278,8 +313,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;",
@@ -300,13 +337,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",
@@ -337,23 +377,26 @@ A.insertGlobalCss({
 		".s-body main.s-scroll-y": "margin-right:$3",
 		// 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",
+		// separator + content area) as --s-shell-w — the standard page
+		// 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: calc(var(--s-nav-w) + var(--s-full-w))",
 	},
 	// Sidebar nav panel. Items reuse the shared `.s-menu-item` /
 	// `.s-menu-sep` styles from menu.ts, so the sidebar and the floating
@@ -364,7 +407,10 @@ A.insertGlobalCss({
 		// The generous horizontal padding is what keeps the rows clear of the content
 		// separator on one side and the shell edge on the other; the vertical scroll
 		// (overflow-y:auto, which also clips overflow-x) leaves no room to bleed past it.
-		"&": "display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1",
+		// `--s-nav-w` measures the whole column, hairline included, so the panel
+		// itself gives that 1px back — and the app's two widths then add up to
+		// exactly the page the bars above and below keep to.
+		"&": "display:flex flex-direction:column overflow-y:auto flex-shrink:0 width: calc(var(--s-nav-w) - 1px); padding:$3 gap:$1",
 	},
 	// The narrow-screen nav: a full "panel" that slides in over the content from the
 	// left, rather than a dropdown — on a phone a nav is a screenful of UI, not a
@@ -493,6 +539,9 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): PanelS
 			notFound: opts.notFound,
 			ancestors: opts.ancestors,
 			title: opts.title,
+			// Corrected below, and on every change, from the app's own option:
+			// read here it would subscribe the whole shell to it.
+			fullWidth: FULL_W,
 			$shell,
 		})
 		: null;
@@ -504,6 +553,7 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): PanelS
 		// the new link default. Nothing else of the shell is touched.
 		A(() => ctl.setColumns(opts.columns));
 		A(() => ctl.setLinkNavigation(opts.linkNavigation));
+		A(() => ctl.setFullWidth(opts.fullWidth ?? FULL_W));
 	}
 	// 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).
@@ -513,12 +563,20 @@ export function main<R extends RouteTable<R>>(opts: MainOptions<R> = {}): PanelS
 	const capWidth = ctl ? null : opts.maxWidth;
 
 	const root = A(`div.s-main${ctl ? ".s-routed" : ""}`, opts.attrs, () => {
-		// Which side the sidebar is on, as a class on the shell for the CSS above to
-		// hang off. Its own scope (see `nav` above), so a nav appearing or emptying
-		// out only retags the shell rather than redrawing it.
+		// The two widths the CSS above works from, and with them the standard page
+		// the bars keep to. Each sits in a scope of its own — one that draws
+		// nothing, so re-running it is a single style write: an app that changes
+		// either on a proxied options object resizes the shell in place, panels
+		// and their state untouched.
+		A(() => A(`--s-full-w: ${opts.fullWidth ?? FULL_W}px`));
+		// `--s-nav-w` is the sidebar's whole column, and nothing at all when there
+		// is no sidebar to give it to — a shell without one lines its bars up with
+		// the content. This scope also tags the shell with the side the sidebar is
+		// on, for the CSS above to hang off (see `nav` above: reading `nav.items`
+		// here subscribes this scope alone, never the shell entire).
 		A(() => {
-			if (nav == null || !nav.items.length) return;
-			A(`.s-nav-${navPos}`);
+			if (nav == null || !nav.items.length) A("--s-nav-w: 0px");
+			else A(`.s-nav-${navPos}`, `--s-nav-w: ${opts.navWidth ?? NAV_W}px`);
 		});
 
 		// Top bar: `[leading] [identity] …spacer… [trailing]`, where each slot's

package/src/components/panels.ts

@@ -175,17 +175,25 @@ export interface Panel<P = Record<string, string | number | string[]>> {
 	 * because that is what it gets when two columns fit; this says how much
 	 * *more* it can take.
 	 *
-	 * - `"half"` — nothing more. Half the content area (360–540px), so a second
-	 *   column fits beside it. For lists and detail forms.
-	 * - `"full"` (the default) — the whole content area, up to ~1100px.
+	 * - `"half"` — nothing more. Half the content area (360px up to half of
+	 *   {@link MainOptions.fullWidth}), so a second column fits beside it. For
+	 *   lists and detail forms.
+	 * - `"full"` (the default) — the whole content area, which is exactly
+	 *   {@link MainOptions.fullWidth}: 1080px unless the app says otherwise.
 	 * - `"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 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 +269,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 +407,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.
  *
@@ -385,12 +418,6 @@ function matchRoute(r: { segs: Seg[] }, segments: string[]): Record<string, any>
 const PAGE_MS = 250;
 /** How long a freshly pushed `loading` panel holds its enter animation. */
 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.
- */
-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 +442,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 +545,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
@@ -642,7 +679,7 @@ interface Geometry {
 	chrome: number;
 	/** Half the standard content area, or all of it when a half would be too narrow. */
 	half: number;
-	/** The standard content area: the 1280px page minus the chrome. */
+	/** The standard content area: what the app asked a `"full"` panel to be. */
 	full: number;
 	/** Everything the window has beside the chrome, with no upper limit. */
 	screen: number;
@@ -672,6 +709,8 @@ export interface PanelStackOptions {
 	columns?: "auto" | "single";
 	/** What a bare link does. See {@link MainOptions.linkNavigation}. */
 	linkNavigation?: "push" | "replace" | "open";
+	/** How wide a `"full"` panel gets, in px. See {@link MainOptions.fullWidth}. */
+	fullWidth: number;
 	/** The shell's own title, used as the suffix of `document.title`. */
 	title?: unknown;
 	/**
@@ -739,6 +778,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>;
 	/**
@@ -836,8 +880,8 @@ export class PanelStackController implements PanelStack {
 	private containerEl?: HTMLElement;
 	/** The shell's measurements, shared by everything drawn since they were taken. */
 	private geom?: Geometry;
-	/** The body width at the last layout; a change means a window resize → snap. */
-	private lastBodyW = -1;
+	/** The measurements the last layout ran on; a change in them → snap. */
+	private lastGeom?: Geometry;
 	private layoutQueued = false;
 	private timers = new Set<ReturnType<typeof setTimeout>>();
 	/** The arrangement the navigation in flight is heading for; see {@link intended}. */
@@ -1117,9 +1161,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 +1180,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 +1413,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 +1492,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 +1500,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 +1555,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> {
@@ -1528,6 +1584,17 @@ export class PanelStackController implements PanelStack {
 		this.opts.linkNavigation = mode;
 	}
 
+	/**
+	 * Adopt a changed `fullWidth`: one layout pass, nothing redrawn. A changed
+	 * `navWidth` needs no counterpart — resizing the sidebar resizes the column
+	 * region, which the layout engine is already observing.
+	 */
+	setFullWidth(px: number): void {
+		if (this.opts.fullWidth === px) return;
+		this.opts.fullWidth = px;
+		this.scheduleLayout();
+	}
+
 	/**
 	 * 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
@@ -1854,25 +1921,21 @@ export class PanelStackController implements PanelStack {
 			if (child !== container) chrome += child.getBoundingClientRect().width;
 		}
 
-		// The standard panel is SHELL_PX wide, capped by the window; what it leaves
-		// beside the sidebar is the *standard* content area. Widths are a pure
-		// function of the window — never of what else is open — so a panel NEVER
-		// resizes because a neighbour came or went; only a window resize (the
-		// snap pass in `layout`) changes them:
+		// What the window has beside the sidebar, and within that the *standard*
+		// content area: the width the app gave a "full" panel, or all there is
+		// when the window has less. Widths are a pure function of the window —
+		// never of what else is open — so a panel NEVER resizes because a
+		// neighbour came or went; only a window resize (the snap pass in
+		// `layout`) changes them:
 		// - "full" fills the standard content area exactly;
 		// - "half" is half of it whenever that half is still a usable column, and
 		//   the whole of it on narrower screens;
 		// - "screen" ignores the standard width and takes everything the window
 		//   has — which also means nothing ever fits beside it.
-		const full = Math.max(0, Math.min(SHELL_PX, total) - chrome);
+		const screen = Math.max(0, total - chrome);
+		const full = Math.min(this.opts.fullWidth, screen);
 		const halved = full / 2;
-		return {
-			total,
-			chrome,
-			half: halved >= PAIR_MIN_PX ? halved : full,
-			full,
-			screen: Math.max(0, total - chrome),
-		};
+		return { total, chrome, half: halved >= PAIR_MIN_PX ? halved : full, full, screen };
 	}
 
 	/**
@@ -1919,13 +1982,16 @@ export class PanelStackController implements PanelStack {
 
 		const stacking = this.opts.columns !== "single";
 
-		// A window resize (or the very first pass) must be adopted instantly —
-		// geometry tracking the window through a 450ms transition reads as lag,
-		// and a shell animating itself into place on load reads as a glitch.
+		// A window resize — or the app resizing the shell itself, by changing
+		// `navWidth` or `fullWidth` — must be adopted instantly: geometry tracking
+		// the window through a 450ms transition reads as lag, and a shell
+		// animating itself into place on its first pass reads as a glitch. Only
+		// what a *panel* did is worth animating, and none of those three are.
 		// `.s-shell-snap` suppresses every standing transition for this one pass.
-		const snap = this.lastBodyW !== geom.total;
+		const was = this.lastGeom;
+		const snap = was == null || was.total !== geom.total || was.chrome !== geom.chrome || was.full !== geom.full;
 		if (snap) {
-			this.lastBodyW = geom.total;
+			this.lastGeom = geom;
 			shell.classList.add("s-shell-snap");
 		}
 
@@ -1949,7 +2015,7 @@ export class PanelStackController implements PanelStack {
 		// The content area holds the run, but is never smaller than the standard
 		// panel (a lone small leaves its other half open — which is exactly where
 		// the next small lands, without anything on screen moving) and never
-		// wider than the window. So the panel is the familiar 1280px until extra
+		// wider than the window. So the page holds its standard width until extra
 		// columns genuinely fit, and stretches — centred — to hold the ones that
 		// do; with a "screen" up that's the window's edges.
 		const area = Math.min(geom.screen, Math.max(geom.full, runSum));
@@ -1961,11 +2027,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