staffa 0.9.0 → 0.10.0

package/dist/components/panels.js

@@ -1,6 +1,11 @@
-import A from "aberdeen";
+import A, { OPAQUE } from "aberdeen";
 import * as route from "aberdeen/route";
-import { NARROW_PX } from "../core.js";
+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 { 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
@@ -10,7 +15,7 @@ import { NARROW_PX } from "../core.js";
  * back to the same URL: no leading zeroes ("007"), no "-0", no "1.5", "1e3" or
  * "0x10", and nothing past `Number.MAX_SAFE_INTEGER` (where the number would no
  * longer hold the id it came from). Two spellings of one id would otherwise be
- * two different paths, so the same record could sit open in two panels at once.
+ * two different paths, so the same record could sit open in two columns at once.
  * Use a plain `[id]` for ids that aren't safe integers, such as snowflakes.
  */
 const MATCHERS = {
@@ -105,22 +110,25 @@ function matchRoute(r, segments) {
 }
 // ─── Constants ───────────────────────────────────────────────────────────────
 /**
- * The one duration every bit of panel motion shares: the enter/exit fades, the
- * `left` moves of columns shifting sideways, and the ensemble-width transition
- * the chrome follows (see `--s-shell-w` in main.ts). Published as the
- * `--s-panel-ms` custom property below, so CSS and JS can't drift apart.
+ * 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
+ * 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
+ * feel instant even when it moves.
  */
-const PANEL_MS = 450;
+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.
- * `"medium"` fills the content-area part of this exactly; only a `"large"`
- * panel makes the shell grow past it.
+ * `"full"` fills the content-area part of this exactly; only a `"screen"`
+ * page makes the shell grow past it.
  */
 const SHELL_PX = 1280;
-/** The gap between two `"small"` panels sitting two-up. */
-const GUTTER_PX = 24;
 /** Don't pair smalls when half the content area would be narrower than this. */
 const PAIR_MIN_PX = 360;
 /**
@@ -133,21 +141,25 @@ const PAIR_MIN_PX = 360;
 const LAYER_STEP = 2;
 // ─── Module-level styling ────────────────────────────────────────────────────
 A.insertGlobalCss({
-    ":root": `--s-panel-ms:${PANEL_MS}ms`,
+    ":root": `--s-panel-ms:${PAGE_MS}ms`,
     // The clipping viewport that the columns slide through. Panels are absolutely
     // positioned inside it, with their width and x offset set from JS (see
     // `layout()`), so they can animate between arrangements. `isolation` keeps the
     // 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 page that slides across the body — however deep the stack gets.
-    ".s-panels": "flex:1 min-width:0 min-height:0 position:relative overflow:hidden isolation:isolate",
+    // 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.
+    ".s-panels": "flex:1 min-width:0 min-height:0 position:relative overflow:hidden isolation:isolate " +
+        SURFACE_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
         // antialiasing. `transform` is used only to play the enter/exit slides,
         // where the compositing is what makes them cheap. There is deliberately no
         // `width` transition: a width changes only when the window resizes or when
-        // the page itself asks for another layout, and animating one would reflow
+        // the panel itself asks for another layout, and animating one would reflow
         // the column's content on every frame of it.
         // Every duration is `--s-panel-ms`, so a column's move, its neighbour's fade
         // and the chrome recentering around them all run as one motion. The drift
@@ -155,21 +167,34 @@ A.insertGlobalCss({
         // across the whole duration — an eased opacity spends its last stretch near
         // zero, which looks like the panel vanishing rather than fading.
         // No `overflow:hidden` here: the scroll container below clips the content
-        // itself, and the pair hairline sits in the gutter *outside* the panel.
+        // itself.
         // Layering is set from JS (`layout()` and `beginClose`) rather than left to
         // DOM order: a closing panel is no longer part of the reactive list, so
         // where its element sits among the live ones is Aberdeen's business, not a
         // thing to depend on. `LAYER_*` says what the numbers mean.
+        //
+        // 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).
+        //
+        // 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.
         "&": "position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column " +
+            SURFACE_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 scroll container. Mirrors content mode's `main > .s-content`: same
-        // padding, and the same scrollbar inset (see `.s-scroll-y` in main.ts) so a
-        // single-column shell is pixel-identical to a non-routed one.
-        "> .s-content": "flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3",
-        "> .s-content.s-scroll-y": "margin-right:$3",
-        // A vertical hairline centred in the gutter between two paired smalls,
-        // fading out at both ends — the same treatment as the sidebar's `.s-nav-sep`.
-        "&.s-panel-sep::before": `content:'' position:absolute left:-${GUTTER_PX / 2}px top:0.6rem bottom:0.6rem width:1px ` +
+        // 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
+        // gutter between them: each already brings its own `$3` of padding, which
+        // keeps two columns' *contents* comfortably apart, while a gutter on top
+        // of that only opened a strip of the panel's own ground between two columns
+        // painting theirs. So this sits exactly on the boundary — and an
+        // edge-to-edge column (`A("p:0")`) really does reach the line bounding it.
+        "&.s-panel-sep::before": "content:'' position:absolute left:0 top:0.6rem bottom:0.6rem width:1px z-index:1 " +
             "background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",
         // One vocabulary for every arrival and departure: a gradual fade over a short,
         // slow drift — 8cqw (`cqw`: `.s-main` is the container). Panels appear and
@@ -182,26 +207,74 @@ A.insertGlobalCss({
         // and out of reach while it does. It leaves the DOM when the fade itself
         // ends (see `playExit`), never part-way through it.
         "&.s-panel-closing": "opacity:0 pointer-events:none transform: translateX(8cqw);",
-        // Crowded out from under the visible run. It keeps its DOM (and thus its
-        // scroll position and half-typed forms), so `display:none` is out —
-        // `visibility` takes it out of the rendering instead, but only once the fade
-        // has played: a transitioned `visibility` counts as *visible* for the whole
-        // duration and flips at the very end. Revealing it again uses the rule above
-        // (`visibility 0s`), so it comes back instantly.
-        "&.s-panel-hidden": "opacity:0 visibility:hidden transform: translateX(-8cqw); " +
+        // Off screen but open: crowded out from under the visible run at the left
+        // edge (`hidden`), or right of the current panel, parked past the right
+        // edge (`parked`) — the two are mirror images. Either keeps its DOM (and
+        // thus its scroll position and half-typed forms), so `display:none` is out
+        // — `visibility` takes it out of the rendering instead, but only once the
+        // fade has played: a transitioned `visibility` counts as *visible* for the
+        // whole duration and flips at the very end. Revealing it again uses the
+        // rule above (`visibility 0s`), so it comes back instantly.
+        "&.s-panel-hidden, &.s-panel-parked": "opacity:0 visibility:hidden " +
             "transition: left var(--s-panel-ms) ease, transform var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility var(--s-panel-ms);",
+        "&.s-panel-hidden": "transform: translateX(-8cqw);",
+        "&.s-panel-parked": "transform: translateX(8cqw);",
     },
+    // The scroll container, with the column's own padding. A scrollbar here is
+    // left flush against the column's right edge — unlike content mode's, which
+    // insets one from the shell edge to line up with the bar above it. A column
+    // has something better to line up with: the hairline the next column starts
+    // at, or the edge of the content area. Both want the bar hard against them,
+    // and an inset would leave a strip of nothing between the two.
+    ".s-panel > .s-content": "flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3",
+    // A panel's actions on a wide shell: a quiet strip at the column's top-right,
+    // above the scroll area (never sticky inside it). On a narrow shell the top
+    // bar carries them instead, and no strip is drawn at all.
+    ".s-panel-actions": "display:flex align-items:center justify-content:flex-end gap:$1 flex-shrink:0 padding: $3 $3 0;",
+    // The breadcrumb stack the top bar shows: every open panel, oldest first,
+    // the ones on screen right now in bold ink (see `drawCrumbs`). One row that
+    // scrolls sideways when the bar is tight — scrollbarless, with a fade at
+    // whichever edge has more stack behind it, so the cut-off reads as "keep
+    // going" rather than as the stack simply ending.
+    // The stack is a `.s-strip` (see tabs.ts), so the scrolling, the hidden
+    // scrollbar and the ‹ / › come with it; all that is left to say is the gap
+    // between a crumb and its chevron.
+    ".s-crumbs > .s-strip-row": "gap:$m1",
+    ".s-crumb": {
+        // Quiet ink for the stack, full ink and weight for the panels on screen:
+        // 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.
+        "&": "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 " +
+            "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
+        // span rather than a link, so it needs no `:not()` guard here.
+        "a&:hover": "filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",
+        // The pin of a pinned panel, sitting inline just before its title. Filled:
+        // at crumb size the icon's hairline strokes alias into a wobble, while the
+        // body path filled solid reads as the classic pinned-tab pushpin.
+        "svg.s-crumb-pin": "vertical-align:-0.12em margin-right:0.3em opacity:0.8 fill:currentColor",
+        // The ● of a panel holding unsaved work — the editors' dirty mark, filled
+        // solid for the same reason as the pin.
+        "svg.s-crumb-unsaved": "vertical-align:0.08em margin-right:0.3em fill:currentColor",
+    },
+    // A slash, not a chevron: the stack is a path, and a path's separator is what
+    // the URL itself uses. It also has to stay clearly *unlike* the ‹ / › the
+    // strip grows when the stack overflows (see `scrollStrip` in tabs.ts) — two
+    // near-identical chevrons, one meaningful and one a button, read as a bug.
+    "svg.s-crumb-sep": "flex-shrink:0 opacity:0.4",
     // A window resize (and the very first pass) must track the window instantly,
     // not rubber-band 450ms behind it: the layout engine raises this class on the
     // shell for exactly those passes, applies the new geometry, and drops it
     // after a forced reflow. Beats the standing transitions on specificity.
     ".s-main.s-shell-snap .s-panel": "transition:none",
-    // On a narrow shell the single column is edge-to-edge, so there is no inset
-    // chrome for the scrollbar to line up with — cancel the `.s-scroll-y` margin
-    // (the twin of content mode's rule in main.ts).
-    [`@container (max-width: ${NARROW_PX}px)`]: {
-        ".s-panel > .s-content.s-scroll-y": "margin-right:0",
-    },
     // A minimal "still fetching" hint, centred over the panel's content (which
     // stays mounted underneath, so it can fill in reactively).
     ".s-panel-loading": {
@@ -215,24 +288,64 @@ A.insertGlobalCss({
         "50%": "opacity:0.7 transform:scale(1)",
     },
 });
-/** At most one routed shell per app — that's what `S.panels` is bound to. */
-let active = null;
-export class PanelController {
+/**
+ * The URL is global, so two routed shells would fight over it. This is only a
+ * guard against that — the stack is reached through the object `main()` hands
+ * back, never through a module-level singleton.
+ */
+let mounted = false;
+/**
+ * The controller behind a routed shell. It implements {@link PanelStack} —
+ * the app-facing face, and the only part of it that is Staffa API — and on
+ * top of that draws the columns and the breadcrumbs for `main()`, which
+ * constructs it.
+ */
+export class PanelStackController {
+    /**
+     * Kept out of Aberdeen's proxy wrapping: this is a class instance holding
+     * DOM nodes, timers and route handlers, and it rides inside every
+     * {@link Panel.stack}. Its reactivity doesn't need the wrapper — it comes
+     * from `$state` and the panels, which are proxies in their own right.
+     */
+    [OPAQUE] = true;
     compiled;
     /** The `ancestors` table, compiled like the routes it is keyed by. */
     ancestors;
     opts;
-    /** The live stack, shallow-to-deep. Closing panels are no longer part of it. */
-    live = [];
-    byId = new Map();
-    nextId = 1;
-    /** Drives rendering: panel id → its `order` (used only as the sort key). */
-    $ids = A.proxy({});
     /**
-     * The live stack's paths and its top panel, for reactive readers: the
-     * `document.title` watcher, `main()`'s Escape handling and `S.panels.stack`.
+     * The live stack, oldest first (closing panels are no longer part of it),
+     * and which of its panels is current — the one reactive fact about the
+     * stack's *shape*. The getters, the crumbs and `document.title` subscribe
+     * to it simply by reading it; each commit publishes the next shape by
+     * assigning a fresh `live` array. The entries themselves are opaque (see
+     * {@link PanelEntry}), so the array carries their comings, goings and
+     * order — nothing deeper; a panel's own facts stay separately reactive on
+     * its `$panel`, which is what lets a panel rename itself without the
+     * stack redrawing.
+     *
+     * One rule makes this safe to touch from anywhere: **queries subscribe,
+     * commands peek**. The getters below are the queries. Every navigation
+     * entry point (`navigate`, `closePath`, `back`, …) wraps itself in
+     * `A.peek`, so an app calling one from inside a reactive scope (a
+     * redirect in a route handler, say) can't subscribe that scope to the
+     * very stack it is changing — and everything those commands call through
+     * to, `propose` and `commit` included, inherits the same guarantee and
+     * reads the stack plainly.
+     */
+    $state = A.proxy({ live: [], focus: 0 });
+    /**
+     * The open panels again, keyed by path — the shape as the DOM consumes it.
+     * `drawColumns`' `onEach` mounts and unmounts panels by key, so a panel
+     * spliced out of the middle of the stack touches exactly one key, and the
+     * DOM of the retained columns — scroll positions, half-typed forms — is
+     * left alone. (Iterating `live` itself would key panels by array index,
+     * and a splice renumbers every index after it, redrawing them all.) A
+     * key's value is its entry, by reference, and is never reassigned, so a
+     * panel only ever redraws wholesale when its path closes.
      */
-    $state = A.proxy({ paths: [], topId: 0 });
+    $open = A.proxy({});
+    /** Feeds {@link PanelEntry.order}: one shared counter, so keys never tie. */
+    nextOrder = 0;
     containerEl;
     /** The shell's measurements, shared by everything drawn since they were taken. */
     geom;
@@ -240,48 +353,66 @@ export class PanelController {
     lastBodyW = -1;
     layoutQueued = false;
     timers = new Set();
-    /** The stack the navigation in flight is heading for; see {@link intended}. */
+    /** The arrangement the navigation in flight is heading for; see {@link intended}. */
     intent = null;
     /** The navigation the router hasn't settled yet, if any. */
     settling = null;
+    /** The route last seen by the observer, for stashing a left panel's query. */
+    lastSeen = null;
     /** The one navigation waiting behind it; see {@link issue}. */
     queued = null;
     constructor(opts) {
-        if (active) {
+        if (mounted) {
             throw new Error("Staffa: only one routed S.main() (one with `routes`) can be active at a time");
         }
-        active = this;
+        mounted = true;
         this.opts = opts;
         this.compiled = Object.entries(opts.routes).map(([key, draw]) => ({ ...compileKey(key), draw }));
         this.ancestors = Object.entries(opts.ancestors ?? {})
             .filter((entry) => entry[1] != null)
             .map(([key, fn]) => ({ ...compileKey(key), fn }));
-        // The router consults this guard before any navigation is applied — ours,
-        // a link's, browser back/forward, even a direct route.go() by app code —
-        // so every panel the change would remove gets its requestClose asked,
-        // exactly once, and a veto leaves the URL and the stack untouched (the
-        // router holds the route steady while an async guard is pending, and
-        // knows the exact history depth to restore on a vetoed popstate). A
-        // guard the app registered before mounting keeps working: it is chained
-        // in front of ours — an app veto (or redirect) wins without the panels
-        // being asked — and handed back when the shell unmounts.
-        const appGuard = route.setGuard((to, from) => {
-            const outer = appGuard ? appGuard(to, from) : true;
-            if (outer === false)
-                return false;
-            if (outer === true)
-                return this.checkChange(to);
-            return outer.then((ok) => (ok === false ? false : this.checkChange(to)));
-        });
         // Commit the stack whenever the URL or its snapshot changes — the initial
-        // load, our own navigations, and browser back/forward. Anything that
-        // reaches this point has already passed the guard above.
+        // load, our own navigations, and browser back/forward. There is no route
+        // guard of the shell's own to pass first: closes are refused up front
+        // (`closePath` on an unsaved panel) or repaired at the commit (`propose`
+        // keeps unsaved panels a navigation would drop), so a guard the app
+        // itself registered with `route.setGuard` — an auth redirect, say — is
+        // left exactly where it is and keeps working untouched.
         A(() => {
             const target = this.computeTarget();
-            A.peek(() => this.propose(target));
+            // Subscribed (not peeked) deliberately: a search/hash change with the
+            // path staying put must refresh `lastSeen` too, or the next stash would
+            // restore stale ones.
+            const search = { ...route.current.search };
+            const hash = route.current.hash;
+            A.peek(() => {
+                // Stash the query of the panel the URL just left on that panel, for
+                // when a crumb brings it back (see PanelEntry.search). Done here, on
+                // the shared pipeline, so every origin is covered alike: the stack's
+                // own navigations, an app's `route.go()`, and browser back/forward.
+                const prev = this.lastSeen;
+                if (prev && prev.path !== route.current.path) {
+                    const entry = this.$state.live.find((e) => e.path === prev.path);
+                    if (entry) {
+                        entry.search = prev.search;
+                        entry.hash = prev.hash;
+                    }
+                }
+                this.lastSeen = { path: route.current.path, search, hash };
+                this.propose(target);
+                // A history entry that doesn't describe an arrangement — the initial
+                // load, or an app's own `route.go()` — is stamped with the one it
+                // just produced: a reload restores the same columns, and a later
+                // `route.back()` can recognize the entry (its matching wants the
+                // `panels`/`parked` keys present, not merely compatible).
+                if (!Array.isArray(route.current.state.panels)) {
+                    Object.assign(route.current.state, this.stateFor({ stack: this.paths(), focus: this.$state.focus }));
+                }
+            });
         });
         this.interceptLinks();
         this.watchTitle();
+        this.guardTabClose();
         A.clean(() => {
             for (const t of this.timers)
                 clearTimeout(t);
@@ -290,9 +421,7 @@ export class PanelController {
             // waiting its turn is answered rather than left hanging.
             this.queued?.settle(false);
             this.queued = null;
-            route.setGuard(appGuard);
-            if (active === this)
-                active = null;
+            mounted = false;
         });
     }
     // ── Stack derivation ───────────────────────────────────────────────────
@@ -322,7 +451,7 @@ export class PanelController {
      * and the matching ones become the stack. Either way, a path with no route is
      * skipped rather than opened as a "not found" column, so an app that doesn't
      * want one screen stacked under another simply doesn't route it. The path
-     * itself is always the top panel, matched or not.
+     * itself always ends the derived stack, matched or not.
      */
     deriveStack(path) {
         const top = normalizePath(path);
@@ -359,48 +488,82 @@ export class PanelController {
             found.push("/" + segments.slice(0, i).join("/"));
         return found;
     }
-    /** The stack a route implies: its snapshot topped by its path, or — without a snapshot — derived. */
-    targetFor(path, snapshot) {
-        if (Array.isArray(snapshot))
-            return snapshot.map(String).concat(normalizePath(path));
-        return this.deriveStack(path);
+    /**
+     * The pinned panels among `stack`, in order, minus `omit` — the ones a
+     * navigation must carry along rather than close. Pin flags live on the
+     * panels themselves, so a path without a live panel can't be pinned.
+     */
+    pinnedIn(stack, omit) {
+        return stack.filter((path) => {
+            if (omit.includes(path))
+                return false;
+            return this.$state.live.find((e) => e.path === path)?.$panel.pinned === true;
+        });
     }
-    /** The stack the current history entry asks for. Subscribes to path + snapshot. */
-    computeTarget() {
-        return this.targetFor(route.current.path, route.current.state.panels);
+    /** Whether the panel open at `path` (if any) holds unsaved work. */
+    unsavedAt(path) {
+        return this.$state.live.find((e) => e.path === path)?.$panel.unsaved === true;
     }
     /**
-     * The route guard (see `route.setGuard` in the constructor): asked before any
-     * route change lands, wherever it came from. Runs the {@link Page.requestClose}
-     * guard of every panel the new route's stack would remove — a set defined by
-     * the target (the commit reconciles by path), so a derived stack that shares
-     * nothing with the live one still asks exactly the panels that are closing.
+     * The arrangement a route implies: its snapshot around its path, or —
+     * without a snapshot — derived, with the new panel current at the end and
+     * any pinned panels carried along beneath it.
+     *
+     * The snapshot reads subscribe — they are the URL's, exactly what the
+     * route observer is for. The derivation is peeked instead: it reads the
+     * live stack for its pins, which is the very thing that observer rewrites,
+     * and subscribing to it would re-run the observer once per commit.
      */
-    checkChange(to) {
-        const removed = this.removedBy(this.targetFor(to.path, to.state.panels));
-        return removed.length ? runGuards(removed) : true;
+    targetFor(path, state) {
+        const before = Array.isArray(state?.panels) ? state.panels.map(String) : null;
+        if (before) {
+            const after = Array.isArray(state.parked) ? state.parked.map(String) : [];
+            // A stack never holds the same path twice: rendering reconciles by path,
+            // so a duplicate would leave a permanently element-less entry that stalls
+            // the layout. Our own states are clean, but `route.go` accepts
+            // hand-written ones — drop duplicates rather than wedge.
+            const cur = normalizePath(path);
+            const seen = new Set([cur]);
+            const uniq = (paths) => paths.map(normalizePath).filter((p) => !seen.has(p) && !!seen.add(p));
+            const beforeUnique = uniq(before);
+            return { stack: [...beforeUnique, cur, ...uniq(after)], focus: beforeUnique.length };
+        }
+        return A.peek(() => {
+            const base = this.deriveStack(path).slice(0, -1);
+            const stack = [...base, ...this.pinnedIn(this.paths(), [...base, normalizePath(path)]), normalizePath(path)];
+            return { stack, focus: stack.length - 1 };
+        });
+    }
+    /** The arrangement the current history entry asks for. Subscribes to path + snapshot. */
+    computeTarget() {
+        return this.targetFor(route.current.path, route.current.state);
     }
     // ── Commit pipeline ────────────────────────────────────────────────────
     paths() {
-        return this.live.map((e) => e.path);
-    }
-    /** The live panels a target stack drops — by path, so a splice removes only its own column. */
-    removedBy(target) {
-        return this.live.filter((entry) => !target.includes(entry.path));
+        return this.$state.live.map((e) => e.path);
     }
     /**
-     * Adopt a stack proposed by the URL. Close guards have already been run (and
-     * have passed) by the time a route change is visible here — `checkChange` is
-     * consulted by the router itself, before anything is applied.
+     * Adopt an arrangement proposed by the URL — after repairing it: panels
+     * holding unsaved work are never torn down by a navigation, wherever it
+     * came from — a link, a nav item, even a browser back to an entry from
+     * before the panel existed. Whatever the target drops, they stay, parked
+     * after the current panel and wearing the ● that says why. (They are
+     * deliberately not written into history entries: the work they protect
+     * lives in the page's DOM, which a reload clears anyway.)
      */
     propose(target) {
-        if (sameStack(this.paths(), target))
+        const kept = this.$state.live
+            .filter((e) => !target.stack.includes(e.path) && e.$panel.unsaved)
+            .map((e) => e.path);
+        if (kept.length)
+            target = { stack: [...target.stack, ...kept], focus: target.focus };
+        if (sameStack(this.paths(), target.stack) && target.focus === this.$state.focus)
             return;
-        this.commit(target, A.peek(route.current, "nav"));
+        this.commit(target, route.current.nav);
     }
     /**
-     * Apply a target stack: unmount what's gone, mount what's new, animate the
-     * difference.
+     * Apply a target arrangement: unmount what's gone, mount what's new, animate
+     * the difference.
      *
      * Reconciliation is BY PATH (a stack can't hold the same path twice, so that's
      * well-defined): a panel present in both stacks stays mounted *even if its
@@ -413,9 +576,14 @@ export class PanelController {
         // The panels this commit mounts size themselves as they draw, so make them
         // measure the shell as it is now rather than trusting the last pass's numbers.
         this.geom = undefined;
-        const existing = new Map(this.live.map((entry) => [entry.path, entry]));
+        // Pin flags for panels this commit *creates* — a reload, or a cold
+        // restore. Live panels keep their own flag: a pin is the user's mark on
+        // the panel, not part of where back/forward travel.
+        const pinned = route.current.state.pinned;
+        const seedPins = new Set(Array.isArray(pinned) ? pinned.map(String) : []);
+        const existing = new Map(this.$state.live.map((entry) => [entry.path, entry]));
         const next = [];
-        for (const path of target) {
+        for (const path of target.stack) {
             const kept = existing.get(path);
             if (kept) {
                 // Retained: it just takes its new place in the stack. Its `order` (the
@@ -424,42 +592,49 @@ export class PanelController {
                 next.push(kept);
                 continue;
             }
-            const entry = this.createEntry(path, next.length);
+            const entry = this.createEntry(path, next.length <= target.focus, seedPins.has(path));
             // An initial load just appears, and so do panels *revealed* by a back —
             // they belong underneath the ones sliding away. Everything else enters at
             // the right edge, a replacement exactly like a push.
             if (nav !== "load" && nav !== "back")
                 entry.enter = true;
             next.push(entry);
-            this.byId.set(entry.id, entry);
+            this.$open[path] = entry;
         }
         // Whatever the target no longer holds leaves the same way: fading out over
         // the right edge, which is also where its replacement (if any) comes in from.
         for (const entry of existing.values())
             this.beginClose(entry);
-        this.live = next;
-        A.merge(this.$state, { paths: this.paths(), topId: this.live.length ? this.live[this.live.length - 1].id : 0 });
-        for (const entry of this.live)
-            this.$ids[String(entry.id)] = entry.order;
+        this.$state.live = next;
+        this.$state.focus = Math.min(target.focus, next.length - 1);
         this.scheduleLayout();
     }
-    createEntry(path, order) {
+    createEntry(path, visible, pinned) {
         const { draw, params } = this.resolve(path);
         const entry = {
-            id: this.nextId++,
-            order,
+            [OPAQUE]: true,
+            order: this.nextOrder++,
             path,
             draw,
             $ui: A.proxy({ holding: false }),
-            layout: "medium",
+            maxWidth: "full",
             width: 0,
         };
-        // `close` closes *this* panel, top of the stack or not. It resolves the
-        // panel's current depth at call time, so it keeps working after a splice has
+        // `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.
-        entry.$page = A.proxy({
+        //
+        // `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
+        // it is restored already parked. `width` is filled in by the sizing scope
+        // in `drawPanel` before the handler draws.
+        entry.$panel = A.proxy({
+            stack: this,
             params,
             path,
+            width: 0,
+            visible,
+            pinned: pinned || undefined,
             close: () => this.closePath(entry.path),
         });
         return entry;
@@ -474,14 +649,17 @@ export class PanelController {
      */
     beginClose(entry) {
         entry.closing = true;
+        // It is on its way out, so it is no longer "on screen" as far as anything
+        // hanging off `$panel.visible` is concerned — even though its element lingers
+        // to play the fade.
+        entry.$panel.visible = false;
         // Frozen one layer below where it was, which is still above everything it
         // was covering: it fades out over the panel it uncovers, and under the one
         // that takes its place (see LAYER_STEP). Set here, while the element is
         // still ours — a moment later the scope, and with it `entry.el`, is gone.
         if (entry.el)
-            entry.el.style.zIndex = String(LAYER_STEP * this.live.indexOf(entry));
-        this.byId.delete(entry.id);
-        delete this.$ids[String(entry.id)];
+            entry.el.style.zIndex = String(LAYER_STEP * this.$state.live.indexOf(entry));
+        delete this.$open[entry.path];
     }
     /**
      * A closed panel's send-off, run by Aberdeen once the panel's scope is gone (so
@@ -511,22 +689,34 @@ export class PanelController {
             if (e.target === el && e.propertyName === "opacity")
                 drop();
         });
-        const timer = setTimeout(drop, PANEL_MS + 80);
+        const timer = setTimeout(drop, PAGE_MS + 80);
         this.timers.add(timer);
     }
     // ── Navigation ─────────────────────────────────────────────────────────
     /**
-     * The stack navigation works from: the one we're on the way to while a change
-     * is still settling, and the one on screen otherwise.
+     * The arrangement navigation works from: the one we're on the way to while a
+     * change is still settling, and the one on screen otherwise.
      *
-     * Settling takes a moment more often than it looks: an async
-     * {@link Page.requestClose}, and every `route.back()`, which travels through
-     * the browser's history and lands on a `popstate`. Working from the committed
-     * stack in that window would make a second Escape ask for the panel the first
-     * one is already taking away — so two quick Escapes would peel one panel.
+     * Settling takes a moment more often than it looks: every `route.back()`
+     * travels through the browser's history and lands on a `popstate`, and an
+     * app-registered route guard may be async. Working from the committed
+     * arrangement in that window would make a second Escape aim at the panel the
+     * first one is already taking away — so two quick Escapes would peel one panel.
      */
     intended() {
-        return this.intent ?? this.paths();
+        return this.intent ?? { stack: this.paths(), focus: this.$state.focus };
+    }
+    /** The history `state` describing `arr` — exactly what `targetFor` reads back. */
+    stateFor(arr) {
+        return {
+            panels: arr.stack.slice(0, arr.focus),
+            parked: arr.stack.slice(arr.focus + 1),
+            pinned: this.pinnedPaths(),
+        };
+    }
+    /** The paths of the pinned panels — the pin list history entries persist. */
+    pinnedPaths() {
+        return this.$state.live.filter((e) => e.$panel.pinned).map((e) => e.path);
     }
     /**
      * Put a navigation to the router, or — while one is still settling — behind
@@ -534,9 +724,10 @@ export class PanelController {
      * {@link intended}, so the newest is the one that means what the user last
      * asked for, and the one it displaces resolves `false`.
      *
-     * A refusal empties the queue instead of running it. A veto is a "no, keep
-     * this open", and the Escape queued behind it was aimed a panel deeper — with
-     * the veto standing, running it would close the very panel that just said no.
+     * A refusal empties the queue instead of running it: a navigation can still
+     * fail to land — an app-registered route guard vetoes it, or another one
+     * supersedes it — and what was queued behind it was worked out against the
+     * arrangement it would have produced.
      */
     issue(target, run) {
         this.intent = target;
@@ -568,62 +759,110 @@ export class PanelController {
         return settling;
     }
     /**
-     * Navigate back to a stack that is a truncation of the current one — the shared
-     * implementation of Escape, a page closing itself, return-links and
-     * `S.panels.close()`. `route.back()` prefers the history entry where that
-     * panel was on top (with its scroll state intact); when there is no such entry
-     * it replaces the current one, carrying the snapshot passed as the fallback.
-     * Either way the route guard asks the closing panels first, and the returned
-     * promise reports its verdict.
+     * 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.
      */
-    goBackTo(target) {
-        return this.issue(target, () => route.back({ path: target[target.length - 1] }, { state: { panels: target.slice(0, -1) } }));
-    }
-    /** Close every panel above `index` (guarded). Resolves `false` when vetoed. */
-    closeDownTo(index) {
-        const paths = this.intended();
-        if (index < 0 || index >= paths.length - 1)
+    focusAt(index, search, hash) {
+        const arr = this.intended();
+        if (index < 0 || index >= arr.stack.length || index === arr.focus)
             return Promise.resolve(false);
-        return this.goBackTo(paths.slice(0, index + 1));
+        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.
+            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) });
+        });
     }
-    /** Guarded close of the top panel. */
-    closeTop() {
-        return this.closeDownTo(this.intended().length - 2);
+    /**
+     * 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.
+     * Resolves `false` at the stack's start, where there is no left to go.
+     */
+    back() {
+        return A.peek(() => {
+            const arr = this.intended();
+            if (arr.focus === arr.stack.length - 1 && !this.unsavedAt(arr.stack[arr.focus])) {
+                return this.closePath(arr.stack[arr.focus] ?? "");
+            }
+            if (arr.focus === 0)
+                return Promise.resolve(false);
+            return this.focusAt(arr.focus - 1);
+        });
     }
     /**
-     * Guarded close of whichever panel is open at `path`, top of the stack or not
-     * — what a page's own close affordances ({@link Page.close}, a box's ✕) come
-     * down to. `false` when that path isn't open.
+     * Close whichever panel is open at `path`, current or not — what
+     * {@link Panel.close}, {@link PanelStack.closePanel} and the crumb menu's
+     * Close come down to. `false` when that path isn't open, is the stack's
+     * only panel, or holds {@link Panel.unsaved} work — nothing may close an
+     * unsaved panel; the app clears the flag first, which is its explicit
+     * "this is now discardable".
      *
-     * The top panel pops back to the snapshot beneath it. Any other panel is
-     * *spliced* out: its guard runs, the columns above it keep their place and
-     * state (the commit reconciles by path), and the URL doesn't change, since the
-     * top panel didn't. That still gets its own history entry, so the browser's
-     * back button restores the closed column like any other snapshot — which is
-     * why it goes through `route.go` here rather than through `navigate()`, whose
-     * "link to the panel we're already on" check would see a no-op.
+     * Closing the current panel at the stack's very end pops back through the
+     * browser's history to the entry beneath it, when it is there (restoring its
+     * scroll and search state); the arrangement is part of the match, so an
+     * entry where the closing panel was merely parked won't do. Every other
+     * close is a *splice*: the columns around the closed one keep their place
+     * and state (the commit reconciles by path). That still gets its own
+     * history entry, so the browser's back button restores the closed column
+     * like any other arrangement — which is why it goes through `route.go` here
+     * rather than through `navigate()`, whose "link to an open panel" check
+     * would turn it into a focus move.
      */
     closePath(path) {
-        const paths = this.intended();
-        const index = paths.indexOf(normalizePath(path));
-        if (index < 0)
-            return Promise.resolve(false);
-        if (index === paths.length - 1)
-            return this.closeDownTo(index - 1);
-        const target = paths.filter((_, i) => i !== index);
-        return this.issue(target, () => route.go({
-            path: target[target.length - 1],
-            // The top panel keeps its search params and hash: it isn't going
-            // anywhere, and `go()` would otherwise default them away.
-            search: A.peek(() => ({ ...route.current.search })),
-            hash: A.peek(route.current, "hash"),
-            state: { panels: target.slice(0, -1) },
-        }));
-    }
-    /** Guarded close of the panel whose `.s-panel` element this is. */
-    closePanelEl(el) {
-        const entry = this.live.find((e) => e.el === el);
-        return entry ? this.closePath(entry.path) : Promise.resolve(false);
+        return A.peek(() => {
+            const arr = this.intended();
+            const index = arr.stack.indexOf(normalizePath(path));
+            if (index < 0 || arr.stack.length < 2 || this.unsavedAt(arr.stack[index]))
+                return Promise.resolve(false);
+            const stack = arr.stack.filter((_, i) => i !== index);
+            // Closing the current panel hands the focus to the panel on its left (or,
+            // at the stack's start, to the one that was parked beside it); closing
+            // any other panel moves the focus not at all.
+            const focus = index === arr.focus ? Math.max(0, index - 1) : arr.focus - (index < arr.focus ? 1 : 0);
+            const target = { stack, focus };
+            if (index === arr.focus && index === arr.stack.length - 1) {
+                // When no history entry matches and the current one is replaced
+                // instead, the panel beneath gets its stashed query back through the
+                // fallback (a match restores the matched entry's own). Pins can't
+                // ride the same way — a `state` in the fallback would be shadowed by
+                // the match target's — so they are re-stamped onto whatever entry we
+                // land on, the way `togglePin` writes them.
+                const beneath = this.$state.live.find((e) => e.path === stack[focus]);
+                const fallback = {};
+                if (beneath?.search)
+                    fallback.search = beneath.search;
+                if (beneath?.hash)
+                    fallback.hash = beneath.hash;
+                const pinned = stack.filter((p) => this.$state.live.find((e) => e.path === p)?.$panel.pinned === true);
+                return this.issue(target, () => Promise.resolve(route.back({ path: stack[focus], state: { panels: stack.slice(0, focus), parked: [] } }, fallback)).then((ok) => {
+                    if (ok)
+                        route.current.state.pinned = pinned;
+                    return ok;
+                }));
+            }
+            const current = stack[focus];
+            const moved = current !== arr.stack[arr.focus];
+            return this.issue(target, () => {
+                // The current panel keeps its search params and hash: it isn't going
+                // anywhere, and `go()` would otherwise default them away. When the
+                // close *did* move the focus, the newly current panel gets its own back.
+                const entry = moved ? this.$state.live.find((e) => e.path === current) : undefined;
+                return route.go({
+                    path: current,
+                    search: moved ? entry?.search : { ...route.current.search },
+                    hash: moved ? entry?.hash : route.current.hash,
+                    state: this.stateFor(target),
+                });
+            });
+        });
     }
     /**
      * Navigate to `href`. `origin` is the path of the panel the link lives in, or
@@ -631,105 +870,314 @@ export class PanelController {
      * 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.
+     *
+     * Resolves the way every {@link PanelStack} method does: `true` once the
+     * navigation lands, `false` when it doesn't (already there counts as
+     * landed).
      */
     navigate(href, origin, replace = false, beneath) {
-        let url;
-        try {
-            url = new URL(href, location.href);
-        }
-        catch {
-            return;
-        }
-        const path = normalizePath(url.pathname);
-        const search = Object.fromEntries(new URLSearchParams(url.search));
-        const hash = url.hash;
-        const paths = this.intended();
-        // A link to a panel that is already open is a return, not a navigation —
-        // so a stack can never hold the same path twice.
-        const open = paths.indexOf(path);
-        if (open >= 0 && open < paths.length - 1 && !beneath) {
-            void this.closeDownTo(open);
-            return;
-        }
-        if (open >= 0 && !beneath) {
-            // 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 top
-            // 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;
-            void this.issue(paths, () => route.go({ path, search, hash, state: { panels: paths.slice(0, -1) } }));
-            return;
-        }
-        // 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.
-        // The route guard (checkChange) asks every panel this removes — a set
-        // defined by the target stack, wherever those panels happen to sit —
-        // before the change is applied; a veto leaves everything untouched.
-        const originIndex = origin == null ? -1 : paths.indexOf(origin);
-        const under = beneath
-            ? beneath.map(normalizePath).filter((p) => p !== path)
-            : originIndex < 0
-                ? this.deriveStack(path).slice(0, -1)
-                : paths.slice(0, replace ? originIndex : originIndex + 1);
-        void this.issue([...under, path], () => route.go({ path, search, hash, state: { panels: under } }));
+        return A.peek(() => {
+            let url;
+            try {
+                url = new URL(href, location.href);
+            }
+            catch {
+                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.
+            const open = beneath ? -1 : arr.stack.indexOf(path);
+            if (open >= 0 && open !== arr.focus) {
+                return this.focusAt(open, url.search ? search : undefined, hash || undefined);
+            }
+            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) }));
+            }
+            // 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) }));
+        });
     }
-    /** Programmatic push/replace, with the top panel as the implied origin. */
+    /** Programmatic push/replace, with the current panel as the implied origin. */
     pushPath(path, replace) {
-        const paths = this.intended();
-        this.navigate(path, paths[paths.length - 1] ?? null, replace);
-    }
-    /** Programmatic open-as-a-whole-stack: `beneath` as given, or derived. */
-    openPath(path, beneath) {
-        this.navigate(path, null, false, beneath);
+        return A.peek(() => {
+            const arr = this.intended();
+            return this.navigate(path, arr.stack[arr.focus] ?? null, replace);
+        });
     }
     // ── Link interception ──────────────────────────────────────────────────
     /**
      * 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), `data-panel=replace`,
-     * and return-to-an-open-panel semantics. The exclusion rules (targets,
-     * downloads, modified clicks, external URLs) live in Aberdeen; the close
-     * guards run in `checkChange` when our navigation reaches the router.
+     * `.s-panel` (which decides what the click truncates), the `data-panel`
+     * attribute, and return-to-an-open-panel semantics. 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` (the default), `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. An unrecognised value is a `push`.
      */
     interceptLinks() {
         route.interceptLinks((url, anchor) => {
-            const panel = anchor.closest(".s-panel");
-            const origin = panel ? this.live.find((entry) => entry.el === panel) : undefined;
-            this.navigate(url.href, origin?.path ?? null, anchor.getAttribute("data-panel") === "replace");
+            const mode = anchor.getAttribute("data-panel");
+            const panel = mode === "open" ? null : anchor.closest(".s-panel");
+            const origin = panel ? this.$state.live.find((entry) => entry.el === panel) : undefined;
+            void this.navigate(url.href, origin?.path ?? null, mode === "replace");
             return true;
         });
     }
+    // ── What the shell's top bar asks ──────────────────────────────────────
+    // The {@link PanelStack} face, where all the documentation lives. These are
+    // the *queries* of the "queries subscribe, commands peek" rule on `$state`:
+    // read one in a scope and that scope follows the stack's shape.
+    get currentPanel() {
+        return this.$state.live[this.$state.focus]?.$panel;
+    }
+    get panels() {
+        return this.$state.live.map((e) => e.$panel);
+    }
+    get currentPanelIndex() {
+        return this.$state.focus;
+    }
+    pushPanel(path) {
+        return this.pushPath(path, false);
+    }
+    replacePanel(path) {
+        return this.pushPath(path, true);
+    }
+    openPanelStack(path, beneath) {
+        return this.navigate(path, null, false, beneath);
+    }
+    closePanel(path) {
+        return A.peek(() => {
+            const arr = this.intended();
+            return this.closePath(path ?? arr.stack[arr.focus] ?? "");
+        });
+    }
+    /**
+     * 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.
+     */
+    drawCrumbs() {
+        // The very same row `S.tabs` puts its tab strip in: it scrolls when the
+        // stack outgrows the bar, and shows a ‹ / › over whichever end still has
+        // crumbs to reach — which a mouse can use, unlike a bare scroll area.
+        scrollStrip({
+            attrs: ".s-crumbs role=navigation aria-label=Breadcrumbs",
+            content: () => {
+                A(() => {
+                    const paths = this.panels.map((p) => p.path);
+                    const focus = this.currentPanelIndex;
+                    let currentEl;
+                    for (let i = 0; i < paths.length; i++) {
+                        if (i)
+                            sepIcon({ size: "0.85em", attrs: ".s-crumb-sep" });
+                        const el = this.drawCrumb(paths[i], i, i === focus);
+                        if (i === focus)
+                            currentEl = el;
+                    }
+                    // Keep the panel you are on in view once this pass has been laid out.
+                    requestAnimationFrame(() => { if (currentEl)
+                        revealInStrip(currentEl); });
+                });
+            },
+        });
+    }
+    drawCrumb(path, index, current) {
+        // Safe to close over: the crumb list is rebuilt whenever the stack (or
+        // its focus) changes, so this entry is `paths[index]`'s for the crumb's
+        // whole life.
+        const entry = this.$state.live[index];
+        // A real link, for the panel it names — so it has an address to hover, to
+        // middle-click, to copy. No click handling of its own: the shell's link
+        // handling already makes any link to an open panel the focus move a crumb
+        // should be (see `navigate`). The panel you are on is a span: nowhere to go.
+        return A(current ? "span.s-crumb aria-current=page" : "a.s-crumb", () => {
+            if (!current)
+                A("href=", path);
+            // Bold = on screen right now, so the stack also says which of its panels
+            // are the visible columns — not just which one is current.
+            A(() => { if (entry?.$panel.visible)
+                A(".s-crumb-on"); });
+            // The ● of unsaved work — the mark that nothing can close this panel —
+            // and the pin of a panel that navigation elsewhere won't close.
+            A(() => { if (entry?.$panel.unsaved)
+                dotIcon({ size: "0.45em", attrs: ".s-crumb-unsaved" }); });
+            A(() => { if (entry?.$panel.pinned)
+                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 },
+                    {
+                        label: () => { A(() => { A("#", entry?.$panel.pinned ? "Unpin" : "Pin"); }); },
+                        icon: () => { A(() => { (entry?.$panel.pinned ? pinOffIcon : pinIcon)(); }); },
+                        click: () => { if (entry)
+                            this.togglePin(entry); },
+                    },
+                    {
+                        label: "Close",
+                        icon: closeIcon,
+                        // Greyed out while the panel holds unsaved work: nothing may
+                        // close it (`closePath` would refuse anyway). Read here, in the
+                        // crumb's own scope, so the flag flipping redraws the crumb —
+                        // the ● above and this menu entry stay one truth.
+                        disabled: entry?.$panel.unsaved === true,
+                        click: () => void this.closePath(path),
+                    },
+                ] });
+        });
+    }
+    /**
+     * Flip a panel's pin (see {@link Panel.pinned}). The flag lives on the panel;
+     * the current history entry's snapshot is rewritten too, so a reload keeps
+     * the pin — a same-panel state tweak, which the router applies unguarded.
+     */
+    togglePin(entry) {
+        entry.$panel.pinned = !entry.$panel.pinned || undefined;
+        route.current.state.pinned = this.pinnedPaths();
+    }
     // ── document.title ─────────────────────────────────────────────────────
-    /** `"<page title> · <app title>"`, kept in sync with the top panel. */
+    /**
+     * `"<panel title> · <app title>"`, kept in sync with the current panel — and
+     * prefixed `"• "` while *any* open panel holds unsaved work, the way editors
+     * mark a dirty document. Any panel, not just the current one: the risk of
+     * losing the work is tab-wide, so the mark on the tab is too.
+     */
     watchTitle() {
         const original = document.title;
         A(() => {
-            const entry = this.byId.get(this.$state.topId);
-            const pageTitle = entry?.$page.title;
+            const entry = this.$state.live[this.$state.focus];
+            const panelTitle = entry?.$panel.title ?? entry?.$ui.fallback;
             const appTitle = typeof this.opts.title === "string" ? this.opts.title : undefined;
-            const title = pageTitle && appTitle ? `${pageTitle} · ${appTitle}` : pageTitle || appTitle;
+            // Reading the stack re-runs this when its shape changes; each panel's
+            // own `unsaved` (up to the first dirty one) does the rest.
+            const dirty = this.$state.live.some((e) => e.$panel.unsaved);
+            const title = panelTitle && appTitle ? `${panelTitle} · ${appTitle}` : panelTitle || appTitle;
             if (title)
-                document.title = title;
+                document.title = (dirty ? "• " : "") + title;
         });
         A.clean(() => { document.title = original; });
     }
+    /**
+     * 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.
+     */
+    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);
+        };
+        // 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,
+        // and that is a tax every navigation in the app would otherwise pay — for a
+        // guard that almost never has anything to guard.
+        A(() => {
+            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);
+            });
+        });
+    }
     // ── Rendering ──────────────────────────────────────────────────────────
     /**
-     * Draw the panel viewport into the current element. Called by `main()`.
+     * Draw the column viewport into the current element. Called by `main()`.
      *
-     * There is deliberately no close chrome here — no back rail, no ←: pages
-     * provide their own way out (see {@link Page.close} and `S.box`'s `close`
-     * option). The shell contributes Escape and the browser's own back button.
+     * A column is the panel's own content, plus the one bit of chrome the shell
+     * places for it: its {@link Panel.actions}, in a strip on wide shells and in
+     * the top bar on narrow ones (see {@link drawActions}).
      */
-    drawStack() {
+    drawColumns() {
         const container = A("div.s-panels role=main", () => {
             // Published before the first panel draws, rather than from the return
             // value below: a panel sizes itself from the shell's measurements (see
             // `measure`), and the first ones do that while this very call is still
             // running. `A()` without arguments is "the element we're in".
             this.containerEl = A();
-            A.onEach(this.$ids, (_order, id) => this.drawPanel(Number(id)), (order, id) => [order, Number(id)]);
+            // Mounted and unmounted by path (see `$open`); a panel's DOM position
+            // among its siblings is its creation order, which is all the layering
+            // needs — `layout()` places and stacks the columns itself.
+            A.onEach(this.$open, (entry) => this.drawPanel(entry), (entry) => entry.order);
         });
         if (typeof ResizeObserver !== "undefined") {
             const ro = new ResizeObserver(() => this.layout());
@@ -745,45 +1193,58 @@ export class PanelController {
             this.containerEl = undefined; });
         this.scheduleLayout();
     }
-    drawPanel(id) {
-        const entry = this.byId.get(id);
-        if (!entry)
-            return;
+    drawPanel(entry) {
         let el;
         // How much room the panel wants, resolved *before* its content is drawn: an
         // 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 its layout — "medium" until the page
-        // says otherwise. Reactively, too: a page that changes its mind later (when
+        // 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.
         A(() => {
-            const asked = entry.$page.layout;
-            entry.layout = asked === "small" || asked === "large" ? asked : "medium";
-            const width = this.roomFor(entry.layout);
+            const asked = entry.$panel.maxWidth;
+            entry.maxWidth = asked === "half" || asked === "screen" ? asked : "full";
+            const width = this.roomFor(entry.maxWidth);
             if (!width)
                 return;
             entry.width = width;
+            // Published to the panel too, so a handler can read the box it is about
+            // to draw into without measuring it.
+            if (A.peek(entry.$panel, "width") !== width)
+                entry.$panel.width = width;
             // The first run has no element to put it on yet — it's created with this
-            // width, just below. Later runs are the page changing its layout.
+            // width, just below. Later runs are the panel changing its mind.
             if (!el)
                 return;
             el.style.width = `${width}px`;
             this.scheduleLayout();
         });
         el = A(`section.s-panel${entry.width ? ` w:${entry.width}px` : ""}`, "destroy=", (node) => this.playExit(entry, node), () => {
-            const contentEl = A("div.s-content", () => {
-                entry.draw(entry.$page);
+            // The actions strip, in its own scope: chrome may redraw freely — when
+            // the panel changes its actions, when the shell crosses the narrow
+            // threshold — but the body below never may.
+            A(() => this.drawActions(entry));
+            A("div.s-content", () => {
+                entry.draw(entry.$panel);
                 // After the content, so there is something to scroll when restoring.
                 route.persistScroll(entry.path);
+                // A panel that named itself is done; one that didn't lends its
+                // first line of text (the DOM is already built — Aberdeen draws
+                // synchronously) to the crumbs and document.title, so neither
+                // ever goes blank. Peeked: a rename must not redraw the panel.
+                if (A.peek(entry.$panel, "title") == null) {
+                    const text = firstText(A());
+                    if (text && A.peek(entry.$ui, "fallback") !== text)
+                        entry.$ui.fallback = text;
+                }
             });
-            watchVerticalOverflow(contentEl);
             // The loading hint, in its own scope so flipping the flag doesn't
             // redraw the panel's content. Held-back panels show nothing yet: they
             // are still parked off screen, waiting to slide in with real content.
             A(() => {
-                if (!entry.$page.loading || entry.$ui.holding)
+                if (!entry.$panel.loading || entry.$ui.holding)
                     return;
                 A("div.s-panel-loading aria-hidden=true", () => { A("i"); A("i"); A("i"); });
             });
@@ -800,11 +1261,23 @@ export class PanelController {
             entry.el = undefined; });
         // A held-back panel that finishes loading gets to play its enter animation.
         A(() => {
-            void entry.$page.loading;
+            void entry.$panel.loading;
             this.scheduleLayout();
         });
         this.scheduleLayout();
     }
+    /**
+     * The one bit of column chrome the shell draws: the panel's actions, in a
+     * quiet strip above the scroll area — and only while the shell is wide, the
+     * top bar carrying them otherwise. Everything else in a column is the panel's
+     * own content: a screen that wants a heading or a card draws them itself.
+     * Going back isn't here either — that is the breadcrumbs' job, in the bar.
+     */
+    drawActions(entry) {
+        if (this.opts.$shell.narrow || entry.$panel.actions == null)
+            return;
+        A("div.s-panel-actions", () => drawSlot(entry.$panel.actions));
+    }
     // ── Layout engine ──────────────────────────────────────────────────────
     scheduleLayout() {
         if (this.layoutQueued)
@@ -817,7 +1290,7 @@ export class PanelController {
     }
     /**
      * Measure the shell, and with it the width the window gives a panel of each
-     * layout. Measured on the *shell*, not on the panel region: the region's width
+     * 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.
@@ -841,24 +1314,24 @@ export class PanelController {
             if (child !== container)
                 chrome += child.getBoundingClientRect().width;
         }
-        // The standard page is SHELL_PX wide, capped by the window; what it leaves
+        // 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:
-        // - "medium" fills the standard content area exactly;
-        // - "small" is half of it (minus the gutter) whenever that half is still
-        //   a usable column, and the whole of it on narrower screens;
-        // - "large" ignores the standard width and takes everything the window
+        // - "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 medium = Math.max(0, Math.min(SHELL_PX, total) - chrome);
-        const half = (medium - GUTTER_PX) / 2;
+        const full = Math.max(0, Math.min(SHELL_PX, total) - chrome);
+        const halved = full / 2;
         return {
             total,
             chrome,
-            small: half >= PAIR_MIN_PX ? half : medium,
-            medium,
-            large: Math.max(0, total - chrome),
+            half: halved >= PAIR_MIN_PX ? halved : full,
+            full,
+            screen: Math.max(0, total - chrome),
         };
     }
     /**
@@ -870,9 +1343,9 @@ export class PanelController {
     geometry() {
         return (this.geom ??= this.measure());
     }
-    /** How wide a panel of this layout is, right now; 0 while the shell can't be measured. */
-    roomFor(layout) {
-        return this.geometry()?.[layout] ?? 0;
+    /** 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;
     }
     /**
      * Size and position every panel, and publish the width of the whole ensemble
@@ -887,11 +1360,15 @@ export class PanelController {
         const shell = container?.closest(".s-main");
         if (!container || !shell)
             return;
-        const n = this.live.length;
+        // This pass always runs from a fresh frame (rAF, a ResizeObserver) — no
+        // reactive scope is active, so the stack and the panels are read plainly:
+        // nothing here can subscribe to anything.
+        const live = this.$state.live;
+        const n = live.length;
         // A panel that hasn't drawn yet has no width to contribute, which would make
         // this pass's arithmetic (and any enter animation it triggers) meaningless.
         // Every mount schedules another pass, so simply wait for it.
-        if (!n || this.live.some((entry) => !entry.el))
+        if (!n || live.some((entry) => !entry.el))
             return;
         // This pass measures afresh — it is the one thing that runs after a resize.
         this.geom = undefined;
@@ -908,32 +1385,34 @@ export class PanelController {
             this.lastBodyW = geom.total;
             shell.classList.add("s-shell-snap");
         }
-        const width = (entry) => geom[entry.layout];
-        // The visible run: as many top-of-stack panels as the window fits, at the
-        // sizes the window gives them. The top panel always shows.
-        let first = n - 1;
-        let runSum = width(this.live[first]);
+        const width = (entry) => geom[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) {
-            for (let i = n - 2; i >= 0; i--) {
-                const sum = runSum + GUTTER_PX + width(this.live[i]);
-                if (sum > geom.large)
+            for (let i = cur - 1; i >= 0; i--) {
+                const sum = runSum + width(live[i]);
+                if (sum > geom.screen)
                     break;
                 runSum = sum;
                 first = i;
             }
         }
         // The content area holds the run, but is never smaller than the standard
-        // page (a lone small leaves its other half open — which is exactly where
+        // 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 page is the familiar 1280px until extra
+        // 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 "large" up that's the window's edges.
-        const area = Math.min(geom.large, Math.max(geom.medium, runSum));
-        for (let i = first; i < n; i++)
-            this.live[i].width = width(this.live[i]);
+        // do; with a "screen" up that's the window's edges.
+        const area = Math.min(geom.screen, Math.max(geom.full, runSum));
+        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
         // reveal doesn't start from nothing.
-        for (const entry of this.live) {
+        for (const entry of live) {
             if (!entry.width)
                 entry.width = width(entry);
         }
@@ -950,27 +1429,37 @@ export class PanelController {
         const fresh = [];
         let x = 0;
         for (let i = 0; i < n; i++) {
-            const entry = this.live[i];
+            const entry = live[i];
             const el = entry.el;
-            const shown = i >= first;
-            // Visible panels are left-aligned in the content area, a gutter apart;
-            // hidden ones park at its left edge, keeping their last width. Deeper
-            // panels layer over shallower ones, each on the odd layer for its depth
-            // (see LAYER_STEP).
-            place(el, shown ? x : 0, entry.width, LAYER_STEP * i + 1);
+            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);
+            // 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.
+            if (entry.$panel.visible !== shown)
+                entry.$panel.visible = shown;
+            if (entry.$panel.width !== entry.width)
+                entry.$panel.width = entry.width;
             if (shown)
-                x += entry.width + GUTTER_PX;
+                x += entry.width;
             el.classList.toggle("s-panel-sep", shown && i > first);
-            // Hidden panels fade out over the left edge and, once faded, stop being
-            // rendered at all — but they keep their DOM, and their scroll position.
-            el.classList.toggle("s-panel-hidden", !shown);
+            // Off-screen panels fade out over the edge they park at and, once
+            // faded, stop being rendered at all — but they keep their DOM, and
+            // their scroll position.
+            el.classList.toggle("s-panel-hidden", i < first);
+            el.classList.toggle("s-panel-parked", i > cur);
             el.toggleAttribute("inert", !shown);
             if (entry.placed)
                 continue;
             fresh.push(entry);
             // A panel that mounts while still fetching holds here for a moment, so
             // it can enter with real content instead of an empty column.
-            if (!A.peek(entry.$page, "loading") || entry.holdDone)
+            if (!entry.$panel.loading || entry.holdDone)
                 entry.$ui.holding = false;
             else if (!entry.$ui.holding) {
                 entry.$ui.holding = true;
@@ -1017,143 +1506,38 @@ function place(el, x, width, z) {
     el.style.width = `${width}px`;
     el.style.zIndex = String(z);
 }
-// ─── Guards ──────────────────────────────────────────────────────────────────
-/**
- * Ask every panel being removed, deepest first, whether it may go. Returns a
- * plain boolean when no guard needs awaiting, so the common case stays
- * synchronous (and screenshots stay deterministic).
- */
-function runGuards(removed) {
-    const list = [...removed].reverse();
-    let i = 0;
-    const step = () => {
-        while (i < list.length) {
-            const guard = A.peek(list[i++].$page, "requestClose");
-            if (!guard)
-                continue;
-            let verdict;
-            try {
-                verdict = guard();
-            }
-            catch (e) {
-                console.error(e);
-                return false;
-            }
-            if (verdict === false)
-                return false;
-            if (verdict !== true)
-                return Promise.resolve(verdict).then((ok) => (ok === false ? false : step()));
-        }
-        return true;
-    };
-    return step();
-}
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 function sameStack(a, b) {
     return a.length === b.length && a.every((v, i) => v === b[i]);
 }
-function drawDefaultNotFound($page) {
-    A("p fg:$s-muted", () => A("#", `No page at ${$page.path}`));
-}
 /**
- * Toggle `.s-scroll-y` on `el` whenever a vertical scrollbar is eating into its
- * width, so CSS can inset the bar from the panel's edge. Same trick (and the
- * same reasoning) as content mode's `watchVerticalOverflow` in main.ts.
+ * The first non-empty text inside `el`, trimmed and capped at a name-like
+ * length — the stand-in title for a panel that never set one.
  */
-function watchVerticalOverflow(el) {
-    if (typeof ResizeObserver === "undefined")
-        return;
-    const update = () => el.classList.toggle("s-scroll-y", el.offsetWidth > el.clientWidth);
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    if (el.firstElementChild)
-        ro.observe(el.firstElementChild);
-    update();
-    A.clean(() => ro.disconnect());
-}
-// ─── Public helpers ──────────────────────────────────────────────────────────
-/**
- * Navigating the routed `S.main()` shell from code, for the times it isn't a
- * link click, such as opening the screen for a record you just created.
- *
- * The same rules as a link click apply: pushing a path that is already open
- * goes back to it rather than opening it twice, and anything that would close a
- * panel asks its {@link Page.requestClose} first.
- *
- * @example
- * ```ts
- * S.button({ content: "New task", click: async () => {
- *   const task = await createTask();
- *   S.panels.push(`/tasks/${task.id}`);
- * }});
- * ```
- */
-export const panels = {
-    /** Opens `path` in a new panel on top of the top one. */
-    push(path) {
-        requireActive().pushPath(path, false);
-    },
-    /**
-     * Opens `path` in place of the top panel, which closes (asking its
-     * {@link Page.requestClose} first). The panels beneath it stay as they are.
-     */
-    replace(path) {
-        requireActive().pushPath(path, true);
-    },
-    /**
-     * Opens `path` as a whole arrangement rather than on top of what's there: the
-     * same thing a nav item or a fresh tab does. Without `beneath`, the stack under
-     * it is worked out the way a cold link's is (see `S.main()`'s `ancestors`);
-     * with it, the paths you give are opened underneath, shallowest first.
-     *
-     * That's the one for a screen whose URL doesn't say where it belongs — the
-     * thread a notification opens — and for seeding a stack from code in general.
-     * Panels the new arrangement also holds stay as they are, and any it drops are
-     * asked their {@link Page.requestClose} first.
-     *
-     * @example
-     * ```ts
-     * S.panels.open(`/thread/${id}`, [`/mailbox/${mailboxId}`]);
-     * ```
-     */
-    open(path, beneath) {
-        requireActive().openPath(path, beneath);
-    },
-    /**
-     * Closes the top panel, or, given a `path`, whichever panel is open at it,
-     * asking {@link Page.requestClose} first. A panel that isn't on top is taken
-     * out on its own, leaving the columns to its right exactly as they are.
-     *
-     * Resolves `false` if the panel didn't close: `requestClose` said no, `path`
-     * isn't open, or another navigation got there first.
-     */
-    close(path) {
-        const ctl = requireActive();
-        return path == null ? ctl.closeTop() : ctl.closePath(path);
-    },
-    /** The paths of the open panels, oldest first. Reactive: safe to read in a scope. */
-    get stack() {
-        return active ? active.$state.paths : [];
-    },
-};
-function requireActive() {
-    if (!active)
-        throw new Error("Staffa: S.panels needs a routed S.main() (one with `routes`) to be mounted");
-    return active;
+function firstText(el) {
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+        const t = n.textContent.trim();
+        if (t)
+            return t.length > 48 ? `${t.slice(0, 47).trimEnd()}…` : t;
+    }
 }
 /**
- * Closes the panel `el` sits in, working out which one that is from the DOM.
- * That is what lets a close button work without being handed a `$page`, from
- * any column, whether or not it is on top. Used by `S.box`'s `close: true`.
- *
- * Outside a routed shell (or outside any panel, such as a box in a dialog) there is
- * nothing to close: it warns and resolves `false`.
+ * 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.
  */
-export function closeContainingPanel(el) {
-    const panelEl = el?.closest(".s-panel");
-    if (!active || !panelEl) {
-        console.warn("Staffa: `close: true` needs to be drawn inside a panel of a routed S.main()");
-        return Promise.resolve(false);
+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" });
     }
-    return active.closePanelEl(panelEl);
+}
+function drawDefaultNotFound($panel) {
+    A("p fg:$s-muted", () => A("#", `No panel at ${$panel.path}`));
 }