staffa 0.12.1 → 0.14.0

package/dist/components/panels.js

@@ -1,11 +1,10 @@
 import A, { OPAQUE } from "aberdeen";
 import * as route from "aberdeen/route";
-import { drawSlot } from "../core.js";
-import { circle as dotIcon, externalLink as newTabIcon, link as linkIcon, pin as pinIcon, pinOff as pinOffIcon, slash as sepIcon, x as closeIcon, } from "../icons.js";
-import { SURFACE_SHEEN } from "../theme.js";
+import { drawSlot, cssZoom, MIN_PX } from "../core.js";
+import { circle as dotIcon, pin as pinIcon, pinOff as pinOffIcon, slash as sepIcon, x as closeIcon, } from "../icons.js";
+import { PANEL_SHEEN } from "../theme.js";
 import { addContextMenu } from "./menu.js";
 import { scrollStrip, revealInStrip } from "./tabs.js";
-import { toast } from "./toast.js";
 /**
  * The matchers a `[name=matcher]` segment can use. A matcher returns the param's
  * value, or `undefined` to fail the match, in which case the path falls through
@@ -111,10 +110,9 @@ function matchRoute(r, segments) {
 // ─── Constants ───────────────────────────────────────────────────────────────
 /**
  * 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
- * 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.
+ * `left` moves of columns shifting sideways, 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.
  *
  * Short enough to read as *the screen responded*, rather than as an animation
  * being played at you: a panel arriving is navigation, and navigation should
@@ -124,15 +122,14 @@ 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. The top bar and footer keep to this
- * width even then (see main.ts), so the chrome holds still while the
- * columns stretch.
+ * The bounds of a column. At least 360px — the phone width every panel must
+ * handle anyway. And at most 540: that is the width the multi-column regime
+ * never reaches (`area / floor(area / 360)` stays under it), so capping the
+ * lone column of a 540–720px area to it too — centred, rather than stretched —
+ * makes an ask's ceiling uniform: never wider than its column count × 540.
  */
-export const SHELL_PX = 1280;
-/** Don't pair smalls when half the content area would be narrower than this. */
-const PAIR_MIN_PX = 360;
+const SMALL_MIN_PX = MIN_PX;
+export const SMALL_MAX_PX = 540;
 /**
  * Panels are layered by their depth in the stack, two `z-index` steps per panel:
  * a panel sits on the odd layer for its depth, and a *closing* one drops to the
@@ -150,16 +147,18 @@ A.insertGlobalCss({
     // layers they stack themselves in (see LAYER_STEP) to themselves: the region
     // as a whole still sits under the shell's own chrome — the sticky top bar, and
     // the nav panel that slides across the body — however deep the stack gets.
-    // 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.
+    // The region paints the columns' sheen over its own box, and every panel
+    // paints the very same one (see `.s-panel` below) — which, being a straight
+    // vertical wash over boxes of one height, comes out identical whatever a
+    // column's width, 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:clip isolation:isolate " +
-        SURFACE_SHEEN,
+        PANEL_SHEEN,
     ".s-panel": {
         // A panel rests at a plain `left` offset and carries no transform: a
         // transformed element is composited, which costs it subpixel text
@@ -182,17 +181,16 @@ A.insertGlobalCss({
         //
         // Every panel paints an opaque ground, because panels animate over one
         // another — entering, leaving, being crowded out — and two transparent ones
-        // mean text sliding over text. It takes the panel's own sheen, the one
-        // `.s-s, body` paints in theme.ts, resolved here against the inherited
-        // `--s-bg` (a panel is not a surface, so it has to paint it itself).
+        // mean text sliding over text. It takes {@link PANEL_SHEEN}, resolved here
+        // against the inherited `--s-bg` (a panel is not a surface, so it has to
+        // paint it itself).
         //
-        // Painted per panel, over the panel's own box, which is as good as it
-        // needs to be: the sheen is a 9%-either-way wash over a whole column, so
-        // two columns' worth of it meeting at a hairline is not something the eye
-        // picks out. The region (`.s-panels` above) paints the same wash, so the
-        // ground beside a lone column matches it just as closely.
+        // Painted per panel, over the panel's own box — and yet seamless with its
+        // neighbours and with the ground beside them, because that wash runs
+        // straight down: it takes its extent from the height these boxes all share,
+        // never from their differing widths. See PANEL_SHEEN for why that matters.
         "&": "position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column " +
-            SURFACE_SHEEN + " " +
+            PANEL_SHEEN + " " +
             "visibility:visible transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility 0s;",
         // The hairline between two columns, fading out at both ends — the same
         // treatment as the sidebar's `.s-nav-sep`. Columns tile the area with no
@@ -361,8 +359,8 @@ export class PanelStackController {
     containerEl;
     /** The shell's measurements, shared by everything drawn since they were taken. */
     geom;
-    /** The body width at the last layout; a change means a window resize → snap. */
-    lastBodyW = -1;
+    /** The measurements the last layout ran on; a change in them → snap. */
+    lastGeom;
     layoutQueued = false;
     timers = new Set();
     /** The arrangement the navigation in flight is heading for; see {@link intended}. */
@@ -629,7 +627,7 @@ export class PanelStackController {
             path,
             draw,
             $ui: A.proxy({ holding: false }),
-            maxWidth: "full",
+            maxWidth: "medium",
             width: 0,
         };
         // `close` closes *this* panel, current or not, and `open` navigates
@@ -775,31 +773,32 @@ export class PanelStackController {
         return settling;
     }
     /**
-     * Make the stack's `index`th panel current: the URL and the visible run move
-     * to it, while the panels right of it stay open, parked past the right edge
-     * of the viewport. Nothing closes; it is a history entry, so the browser's
-     * back button returns the focus to where it was. What a click on a
-     * breadcrumb — any link to an open panel — comes down to.
+     * Make the stack's `index`th panel current without closing anything, leaving
+     * the panels right of it parked out of sight.
+     *
+     * Only ever a step around a panel that refuses to close — nothing else is
+     * left sitting after the current one — so this is Escape's way past an
+     * unsaved panel, and the way back to one. It is a history entry, so the
+     * browser's back button returns the focus to where it was.
      */
-    focusAt(index, search, hash) {
+    focusAt(index) {
         const arr = this.intended();
         if (index < 0 || index >= arr.stack.length || index === arr.focus)
             return Promise.resolve(false);
         const target = { stack: arr.stack, focus: index };
         const path = arr.stack[index];
         return this.issue(target, () => {
-            // The panel gets its own last search and hash back, unless the link
-            // that brought us here carries its own.
+            // The panel gets its own last search and hash back (see PanelEntry.search).
             const entry = this.$state.live.find((e) => e.path === path);
-            return route.go({ path, search: search ?? entry?.search, hash: hash ?? entry?.hash, state: this.stateFor(target) });
+            return route.go({ path, search: entry?.search, hash: entry?.hash, state: this.stateFor(target) });
         });
     }
     /**
      * One step back along the stack — what Escape does (`main()` calls this;
-     * it is not {@link PanelStack} API). At the stack's end this closes the
-     * current panel; mid-stack — with panels parked to the right — or when the
-     * panel holds {@link Panel.unsaved} work, the panel stays open and the
-     * focus just moves to the panel on its left, parking the one it leaves.
+     * it is not {@link PanelStack} API). Normally that closes the current panel,
+     * which is the stack's end. When it holds {@link Panel.unsaved} work — or
+     * panels sit parked beyond it — it stays open instead, and the focus
+     * simply moves to the panel on its left.
      * Resolves `false` at the stack's start, where there is no left to go.
      */
     back() {
@@ -892,11 +891,14 @@ export class PanelStackController {
      * 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.
+     * it), picking how much of `from`'s context the target keeps: a push (the
+     * default, and what unrecognised values fall back to) keeps `from` and
+     * builds on it, `"replace"` keeps only what is beneath `from`, and
+     * `"open"` keeps nothing — the target arrives with its own stack, the way
+     * a nav item's link does. Absent, it is the shell's `linkNavigation`
+     * default, like a link without the attribute. A target that is already
+     * open is returned to by a push, and *moved* — alive, state intact — by
+     * the other two: the stack never holds a path twice.
      *
      * Resolves the way every {@link PanelStack} method does: `true` once the
      * navigation lands, `false` when it doesn't (already there counts as
@@ -915,47 +917,59 @@ export class PanelStackController {
                 return Promise.resolve(false);
             }
             const path = normalizePath(url.pathname);
-            const search = Object.fromEntries(new URLSearchParams(url.search));
-            const hash = url.hash;
             const arr = this.intended();
-            // A link to a panel that is already open is a return, not a navigation —
-            // a stack never holds the same path twice. Returning just moves the
-            // focus: the panels right of the target stay open, parked past the right
-            // edge, and nothing closes. That is the whole behaviour of a breadcrumb,
-            // which is exactly such a link.
+            // Whatever we navigate to ends up on top of the stack; all that differs
+            // is what it lands on.
             const open = beneath ? -1 : arr.stack.indexOf(path);
-            if (open >= 0 && open !== arr.focus) {
-                return this.focusAt(open, url.search ? search : undefined, hash || undefined);
+            let target;
+            if (open >= 0 && mode !== "replace" && mode !== "open") {
+                // A push to a path that is already open is a return: the panel takes
+                // back its own place, and whatever was stacked on top of it closes.
+                // (A stack never holds the same path twice, so there is no second
+                // copy to open — and a breadcrumb is exactly such a link.) Pinned
+                // panels above it are the exception, as ever: they stay in their
+                // order, parked past the panel we return to, one crumb click away.
+                const above = this.pinnedIn(arr.stack.slice(open + 1), []);
+                target = { stack: [...arr.stack.slice(0, open + 1), ...above], focus: open };
+            }
+            else {
+                // The target opens on top of the panel the link sits in, or in its
+                // place for a `replace`, closing the panels after it. Without an
+                // originating panel there is no stack to build on, so it is the
+                // caller's own `beneath` or one derived from the path — which is what
+                // makes a nav click and a deep link to the same URL land identically
+                // (bar the pins, which a fresh tab doesn't have).
+                const originIndex = origin == null ? -1 : arr.stack.indexOf(origin);
+                const raw = beneath
+                    ? beneath.map(normalizePath)
+                    : originIndex < 0
+                        ? this.deriveStack(path).slice(0, -1)
+                        : arr.stack.slice(0, replace ? originIndex : originIndex + 1);
+                // A stack never holds the same path twice (rendering reconciles by
+                // path), so the target is dropped from the base — a `replace` or
+                // `open` may well aim at a path that is open mid-stack, whose panel
+                // then simply *moves* to the top, alive — and a caller-supplied
+                // `beneath` is deduplicated for the same reason.
+                const base = raw.filter((p, i, all) => p !== path && all.indexOf(p) === i);
+                // Pinned panels ride along, keeping their order, beneath the new one
+                // (unsaved ones the commit itself keeps, parked — see `propose`). A
+                // replaced origin closes, pin or no pin: replacing is the panel's own
+                // doing, not somewhere else navigating over it.
+                const under = [...base, ...this.pinnedIn(arr.stack, [...base, path, replace ? origin : null])];
+                target = { stack: [...under, path], focus: under.length };
             }
-            if (open >= 0) {
-                // The target is the panel we're already on. Going nowhere — but the link
-                // may still carry a different search or hash, which belong to the
-                // current panel: record that as a history entry, leaving the stack alone
-                // (the panel reconciles by path, so it isn't even redrawn).
-                if (url.search === location.search && (url.hash || "") === (location.hash || ""))
-                    return Promise.resolve(true);
-                return this.issue(arr, () => route.go({ path, search, hash, state: this.stateFor(arr) }));
+            // Search and hash belong to the current panel only, so a panel we return
+            // to gets its own back (see PanelEntry.search) — unless the link carries
+            // its own, which win.
+            const returning = open >= 0 ? this.$state.live.find((e) => e.path === path) : undefined;
+            const search = url.search ? Object.fromEntries(new URLSearchParams(url.search)) : returning?.search ?? {};
+            const hash = url.hash || returning?.hash || "";
+            // Going nowhere at all: this panel, on this arrangement, with the query
+            // the link asks for. Not even a history entry.
+            if (target.focus === arr.focus && sameStack(target.stack, arr.stack)
+                && url.search === location.search && (url.hash || "") === (location.hash || "")) {
+                return Promise.resolve(true);
             }
-            // A new panel: it opens at the stack's end and becomes current. The
-            // panels after the origin close — except pinned ones, which ride along,
-            // keeping their order, beneath the new panel (and unsaved ones, which
-            // the commit itself keeps, parked — see `propose`). Without an
-            // originating panel there is no stack to build on, so derive one — a
-            // nav click and a deep link to the same URL land identically (bar the
-            // pins, which a fresh tab doesn't have).
-            const originIndex = origin == null ? -1 : arr.stack.indexOf(origin);
-            // A stack never holds the same path twice (rendering reconciles by
-            // path), so a caller-supplied `beneath` is deduplicated, not just
-            // filtered against the target.
-            const base = beneath
-                ? beneath.map(normalizePath).filter((p, i, all) => p !== path && all.indexOf(p) === i)
-                : originIndex < 0
-                    ? this.deriveStack(path).slice(0, -1)
-                    : arr.stack.slice(0, replace ? originIndex : originIndex + 1);
-            // A replaced origin closes, pin or no pin: replacing is the panel's own
-            // doing, not somewhere else navigating over it.
-            const under = [...base, ...this.pinnedIn(arr.stack, [...base, path, replace ? origin : null])];
-            const target = { stack: [...under, path], focus: under.length };
             return this.issue(target, () => route.go({ path, search, hash, state: this.stateFor(target) }));
         });
     }
@@ -1029,7 +1043,9 @@ export class PanelStackController {
     // 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.
+    // options; these are how `main()` talks to the stack. The shell's *widths*
+    // need no counterpart here: `navWidth` and `maxWidth` both resize the
+    // column region, which the layout engine is already observing.
     /** Adopt a changed `columns` setting: one layout pass, nothing redrawn. */
     setColumns(columns) {
         if (this.opts.columns === columns)
@@ -1045,11 +1061,11 @@ export class PanelStackController {
      * 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
      * wearing their pin. Every crumb but the current panel's is a plain link to
-     * that panel, and a link to an open panel is a focus move (see `navigate`) —
-     * so clicking along the stack closes nothing, in either direction, and the
-     * panels right of the current one wait just past the viewport's edge.
-     * Right-click (or long-press) offers pinning, and closing just that one
-     * panel — the close that splices it out of the middle when it isn't last.
+     * that panel, and a link to an open panel returns to it (see `navigate`) —
+     * so clicking a crumb goes back to that panel and closes what was stacked on
+     * top of it, pinned and unsaved panels excepted. Right-click (or long-press)
+     * offers pinning, and closing just that one panel — the close that splices
+     * it out of the middle when it isn't last.
      */
     drawCrumbs() {
         // The very same row `S.tabs` puts its tab strip in: it scrolls when the
@@ -1100,24 +1116,9 @@ export class PanelStackController {
                 pinIcon({ size: "0.85em", attrs: ".s-crumb-pin" }); });
             // `||`, not `??`: the root path's last segment is the empty string.
             A(() => { A("#", entry?.$panel.title ?? entry?.$ui.fallback ?? (path.split("/").pop() || path)); });
-            // Taking over right-click means taking the browser's link menu away, so
-            // the two entries anyone actually reaches for on a link come first,
-            // where that menu would have had them, and the shell's own verbs sit
-            // below the rule.
-            addContextMenu({ items: [
-                    {
-                        // A real new tab, so it arrives cold and builds its own stack
-                        // from the path — exactly what the same link middle-clicked does.
-                        label: "Open in new tab",
-                        icon: newTabIcon,
-                        click: () => { window.open(path, "_blank", "noopener"); },
-                    },
-                    {
-                        label: "Copy link",
-                        icon: linkIcon,
-                        click: () => void copyLink(path),
-                    },
-                    { separator: true },
+            // `link` puts the browser's own link entries — Open in new tab, Copy
+            // link — above the rule; the shell's own verbs sit below it.
+            addContextMenu({ link: path, items: [
                     {
                         label: () => { A(() => { A("#", entry?.$panel.pinned ? "Unpin" : "Pin"); }); },
                         icon: () => { A(() => { (entry?.$panel.pinned ? pinOffIcon : pinIcon)(); }); },
@@ -1170,33 +1171,27 @@ export class PanelStackController {
     }
     /**
      * While any open panel holds unsaved work, closing the tab — or navigating
-     * the whole browser away — runs into the browser's own are-you-sure. When
-     * the user stays, the unsaved panel is brought back on screen if it wasn't,
-     * so what held the tab is in front of them rather than parked out of sight.
+     * the whole browser away — runs into the browser's own are-you-sure, with
+     * the unsaved panel brought on screen as the question is raised, so what is
+     * holding the tab is in front of the user rather than parked out of sight.
      */
     guardTabClose() {
         if (typeof window === "undefined")
             return;
-        let leaving = false;
-        const onHide = () => { leaving = true; };
         const onBeforeUnload = (e) => {
-            // Being asked again means we weren't gone after all (a bfcache restore).
-            leaving = false;
             const dirty = this.$state.live.find((entry) => entry.$panel.unsaved);
             if (!dirty)
                 return;
             e.preventDefault();
             e.returnValue = true; // Chrome/Edge < 119
-            // This task only ever amounts to anything if the user cancels: a
-            // confirmed leave unloads the document (`pagehide`) first.
-            const path = dirty.path;
-            setTimeout(() => {
-                if (leaving)
-                    return;
-                const entry = this.$state.live.find((live) => live.path === path);
-                if (entry && !entry.$panel.visible)
-                    void this.focusAt(this.intended().stack.indexOf(path));
-            }, 0);
+            // Bring the unsaved panel on screen right here, so what is holding the
+            // tab is in front of the user — behind the browser's dialog where the
+            // browser paints that early, and the moment they choose to stay
+            // otherwise. A confirmed leave unloads the document before any of it
+            // is seen; the history entry the move makes is then where a back
+            // navigation returns to, which is right: the panel that held the tab.
+            if (!dirty.$panel.visible)
+                void this.focusAt(this.intended().stack.indexOf(dirty.path));
         };
         // Registered only while a panel actually holds unsaved work: a page with a
         // `beforeunload` listener is shut out of the browser's back/forward cache,
@@ -1206,11 +1201,7 @@ export class PanelStackController {
             if (!this.$state.live.some((entry) => entry.$panel.unsaved))
                 return;
             window.addEventListener("beforeunload", onBeforeUnload);
-            window.addEventListener("pagehide", onHide);
-            A.clean(() => {
-                window.removeEventListener("beforeunload", onBeforeUnload);
-                window.removeEventListener("pagehide", onHide);
-            });
+            A.clean(() => window.removeEventListener("beforeunload", onBeforeUnload));
         });
     }
     // ── Rendering ──────────────────────────────────────────────────────────
@@ -1234,13 +1225,11 @@ export class PanelStackController {
             A.onEach(this.$open, (entry) => this.drawPanel(entry), (entry) => entry.order);
         });
         if (typeof ResizeObserver !== "undefined") {
+            // The region *is* the content area every width is measured from (see
+            // `measure`), so watching it catches the lot: a window resize, the
+            // sidebar coming or going, the shell's own `maxWidth` changing.
             const ro = new ResizeObserver(() => this.layout());
-            // The region *and* the body it sits in: the region alone misses a shell
-            // resize that the columns happen to absorb, which still re-resolves widths.
             ro.observe(container);
-            const body = container.parentElement?.parentElement;
-            if (body)
-                ro.observe(body);
             A.clean(() => ro.disconnect());
         }
         A.clean(() => { if (this.containerEl === container)
@@ -1253,13 +1242,13 @@ export class PanelStackController {
         // element that arrives without a width has no box for its content to measure
         // itself against until the next frame's layout pass, which is a frame too
         // late for anything that sizes itself from its container. So the panel is
-        // created at the width the window gives it — the "full" width until the panel
-        // says otherwise. Reactively, too: a panel that changes its mind later (when
-        // its data arrives, say) reflows in place rather than being redrawn, and the
-        // columns beside it slide over to make room.
+        // created at the width the window gives it — the "medium" width until the
+        // panel says otherwise. Reactively, too: a panel that changes its mind later
+        // (when its data arrives, say) reflows in place rather than being redrawn,
+        // and the columns beside it slide over to make room.
         A(() => {
             const asked = entry.$panel.maxWidth;
-            entry.maxWidth = asked === "half" || asked === "screen" ? asked : "full";
+            entry.maxWidth = asked === "small" || asked === "large" || asked === "none" ? asked : "medium";
             const width = this.roomFor(entry.maxWidth);
             if (!width)
                 return;
@@ -1343,50 +1332,39 @@ export class PanelStackController {
         });
     }
     /**
-     * Measure the shell, and with it the width the window gives a panel of each
-     * layout. Measured on the *shell*, not on the column region: the region's width
-     * is the layout engine's own output, so reading it back would nail the layout
-     * to whatever it happened to be a frame ago. Fractional widths throughout — a
-     * rounded column edge would drift a pixel away from the chrome above it.
+     * Measure the content area, and with it the width a panel of each size gets.
+     *
+     * The column region *is* the content area: it takes whatever the shell has
+     * left beside the sidebar, capped by the shell's own `maxWidth` — all of it
+     * CSS's doing, so there is nothing to add up here and nothing that could
+     * drift from the width the bars above and below line up with. Fractional
+     * widths throughout: a rounded column edge would drift a pixel away from that
+     * chrome.
+     *
+     * The area divides into the narrowest whole number of columns that keeps each
+     * at least {@link SMALL_MIN_PX} wide — the `"small"` unit every other size is
+     * a multiple of, capped at the area itself. So 1080px is three columns of 360
+     * and 1520px four of 380. An area too narrow for two is a single column,
+     * itself capped at {@link SMALL_MAX_PX}: a small centres there instead of
+     * stretching toward 720, so its ceiling holds, while the larger sizes still
+     * take the whole area. A width is thus a pure function of the window: a panel
+     * NEVER resizes because a neighbour came or went, and only a window resize
+     * (the snap pass in `layout`) changes one.
      *
      * `undefined` while the shell has no width to speak of (it isn't in a document
      * yet, or it's `display:none`); the next pass tries again.
      */
     measure() {
-        const container = this.containerEl;
-        const inner = container?.parentElement;
-        const body = inner?.parentElement;
-        if (!container || !inner || !body)
+        const el = this.containerEl;
+        // The rect is in window coordinates; the widths this yields are written
+        // back as CSS lengths, which live in the region's own space — different
+        // spaces when the shell has zoomed the page (see `watchScale` in main.ts).
+        const area = el ? el.getBoundingClientRect().width / cssZoom(el) : 0;
+        if (!area)
             return undefined;
-        const total = body.getBoundingClientRect().width;
-        if (!total)
-            return undefined;
-        // Everything that sits beside the columns: the sidebar and its hairline,
-        // either of which may be display:none on a narrow shell.
-        let chrome = 0;
-        for (const child of inner.children) {
-            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:
-        // - "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 halved = full / 2;
-        return {
-            total,
-            chrome,
-            half: halved >= PAIR_MIN_PX ? halved : full,
-            full,
-            screen: Math.max(0, total - chrome),
-        };
+        const small = Math.min(area / Math.max(1, Math.floor(area / SMALL_MIN_PX)), SMALL_MAX_PX);
+        const units = (n) => Math.min(n * small, area);
+        return { area, size: { small, medium: units(2), large: units(3), none: area } };
     }
     /**
      * The measurements this pass runs on. Taken once per layout pass and per
@@ -1398,12 +1376,11 @@ export class PanelStackController {
         return (this.geom ??= this.measure());
     }
     /** How wide a panel asking for this is, right now; 0 while the shell can't be measured. */
-    roomFor(maxWidth) {
-        return this.geometry()?.[maxWidth] ?? 0;
+    roomFor(size) {
+        return this.geometry()?.size[size] ?? 0;
     }
     /**
-     * Size and position every panel, and publish the width of the whole ensemble
-     * (sidebar + separator + columns) for the shell to centre itself on.
+     * Size and position every panel.
      *
      * This is everything CSS can't work out for itself: which panels exist, which
      * of them are visible, how wide each one is and where it sits. All the motion
@@ -1429,39 +1406,39 @@ export class PanelStackController {
         const geom = this.geometry();
         if (!geom)
             return;
-        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.
+        const single = this.opts.columns === "single";
+        // A window resize — or the app resizing the shell itself, by changing
+        // `navWidth` or `maxWidth` — 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 snap = this.lastGeom?.area !== geom.area;
         if (snap) {
-            this.lastBodyW = geom.total;
+            this.lastGeom = geom;
             shell.classList.add("s-shell-snap");
         }
-        const width = (entry) => geom[entry.maxWidth];
+        const width = (entry) => geom.size[entry.maxWidth];
         // The visible run: as many columns as the window fits, at the sizes the
         // window gives them, ending at the current panel — which always shows.
         // Panels beyond it are parked past the right edge (see phase 1).
         const cur = Math.min(this.$state.focus, n - 1);
         let first = cur;
         let runSum = width(live[cur]);
-        if (stacking) {
+        if (!single) {
             for (let i = cur - 1; i >= 0; i--) {
                 const sum = runSum + width(live[i]);
-                if (sum > geom.screen)
+                if (sum > geom.area)
                     break;
                 runSum = sum;
                 first = i;
             }
         }
-        // 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
-        // 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));
+        // The content area is a fixed width, so a run that doesn't fill it sits
+        // centred in it rather than hanging off its left edge. Everything around
+        // the columns holds still meanwhile: the sidebar, the top bar and the
+        // footer never move, however many columns come and go.
+        const left = (geom.area - runSum) / 2;
         for (let i = first; i <= cur; i++)
             live[i].width = width(live[i]);
         // Panels that have never been visible get their would-be width too, so a
@@ -1470,28 +1447,22 @@ export class PanelStackController {
             if (!entry.width)
                 entry.width = width(entry);
         }
-        // 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
         // screen simply move (their standing transition animates it); freshly
         // mounted ones still have transitions switched off, so what we set here is
         // adopted instantly and becomes the "before" of their enter animation.
         const fresh = [];
-        let x = 0;
+        let x = left;
         for (let i = 0; i < n; i++) {
             const entry = live[i];
             const el = entry.el;
             const shown = i >= first && i <= cur;
-            // Visible columns tile the content area, left to right. Panels crowded
-            // out from under the run rest at its left edge; panels beyond the
-            // current panel park just past its right edge — both keep their last
-            // width. Deeper panels layer over shallower ones, each on the odd
-            // layer for its depth (see LAYER_STEP).
-            place(el, shown ? x : i > cur ? area : 0, entry.width, LAYER_STEP * i + 1);
+            // Visible columns tile the run, left to right. Panels crowded out from
+            // under it rest at its left edge; panels beyond the current panel park
+            // just past its right edge — both keep their last width. Deeper panels
+            // layer over shallower ones, each on the odd layer for its depth (see
+            // LAYER_STEP).
+            place(el, shown ? x : i > cur ? left + runSum : left, entry.width, LAYER_STEP * i + 1);
             // What `$panel.visible` and `$panel.width` report: this pass is the one
             // thing that knows them, window resizes included. Written only on a
             // change, so per-panel UI hanging off them isn't rebuilt by every pass.
@@ -1576,22 +1547,6 @@ function firstText(el) {
             return t.length > 48 ? `${t.slice(0, 47).trimEnd()}…` : t;
     }
 }
-/**
- * Put a panel's address on the clipboard, as the absolute URL someone can paste
- * anywhere — which is what the browser's own "Copy link" would have given them.
- * Confirmed with a toast, since a silent copy leaves you wondering; `writeText`
- * needs a secure context, so a failure says so rather than lying.
- */
-async function copyLink(path) {
-    const url = new URL(path, location.href).href;
-    try {
-        await navigator.clipboard.writeText(url);
-        toast({ message: "Link copied." });
-    }
-    catch {
-        toast({ message: "Couldn't copy the link.", type: "danger" });
-    }
-}
 function drawDefaultNotFound($panel) {
     A("p fg:$s-muted", () => A("#", `No panel at ${$panel.path}`));
 }