staffa 0.11.0 → 0.12.1

package/dist/components/panels.js

@@ -112,7 +112,7 @@ function matchRoute(r, segments) {
 /**
  * The one duration every bit of shell motion shares: the enter/exit fades, the
  * `left` moves of columns shifting sideways, the ensemble-width transition the
- * chrome follows (see `--s-shell-w` in main.ts), and the narrow-screen nav
+ * body row follows (see `--s-shell-w` in main.ts), and the narrow-screen nav
  * panel's slide. Published as the `--s-panel-ms` custom property below, so CSS
  * and JS can't drift apart.
  *
@@ -126,9 +126,11 @@ const LOADING_HOLD_MS = 300;
 /**
  * The standard page width: sidebar plus content area, capped by the window.
  * `"full"` fills the content-area part of this exactly; only a `"screen"`
- * page makes the shell grow past it.
+ * page makes the shell grow past it. The top bar and footer keep to this
+ * width even then (see main.ts), so the chrome holds still while the
+ * columns stretch.
  */
-const SHELL_PX = 1280;
+export const SHELL_PX = 1280;
 /** Don't pair smalls when half the content area would be narrower than this. */
 const PAIR_MIN_PX = 360;
 /**
@@ -151,7 +153,12 @@ A.insertGlobalCss({
     // The region paints the panel's sheen over its own box, and every panel shows
     // a slice of that same gradient (see `.s-panel` below), so the columns and
     // the ground beside them are one continuous surface.
-    ".s-panels": "flex:1 min-width:0 min-height:0 position:relative overflow:hidden isolation:isolate " +
+    // `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,
     ".s-panel": {
         // A panel rests at a plain `left` offset and carries no transform: a
@@ -245,13 +252,18 @@ A.insertGlobalCss({
         // the weight change alone is ambiguous in a short crumb, the colour alone
         // too subtle. No padding of its own — the first crumb has to start on the
         // same pixel as the app's name above it, and the gap below spaces the row.
-        // `flex-shrink:0` because the crumbs are the strip's flex items and carry
-        // `overflow:hidden`, which resolves their automatic minimum size to zero:
-        // left to shrink they would ellipsise themselves down to stubs rather than
-        // overflow, and the stack would never scroll. One long title still caps at
-        // 14rem — that is this crumb's own business, not the row running out.
-        "&": "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 " +
+        // The flex is how a tight row is shared out. Every crumb grows from the
+        // same 4rem basis in equal shares, freezing at its own text
+        // (`max-width:max-content`) — so with room to spare every title shows in
+        // full, and under pressure it is the *longest* crumbs that give way
+        // first, equalising downward while short ones keep every character. No
+        // crumb drops below min(its text, 4rem) though: `flex-shrink:0`, so past
+        // that point the row overflows and the strip scrolls — which is what
+        // keeps a deep stack on a phone readable. (Crumbs allowed to shrink
+        // would ellipsise to a row of stubs instead, and the stack would never
+        // scroll.)
+        "&": "flex: 1 0 4rem; font-size:0.85em line-height:1.5 fg:$s-muted text-decoration:none " +
+            "white-space:nowrap max-width:max-content overflow:hidden text-overflow:ellipsis " +
             "transition: color 0.12s;",
         "&.s-crumb-on": "font-weight:600 fg:$s-text",
         // The same hover treatment as a menu item. The panel you are on is a plain
@@ -620,9 +632,12 @@ export class PanelStackController {
             maxWidth: "full",
             width: 0,
         };
-        // `close` closes *this* panel, current or not. It resolves the panel's
-        // place in the stack at call time, so it keeps working after a splice has
-        // moved it — and quietly resolves false once the panel is gone.
+        // `close` closes *this* panel, current or not, and `open` navigates
+        // *from* it, through the very implementation a link click uses (see
+        // `navigate`). Both resolve the panel's place in the stack at call
+        // time, so they keep working after a splice has moved it; an `open`
+        // from a panel that has since closed falls back to a derived stack,
+        // like a link from nowhere.
         //
         // `visible` starts at what the panel's place implies: shown when it sits
         // at or before the current panel (a pushed panel always does), hidden when
@@ -636,6 +651,7 @@ export class PanelStackController {
             visible,
             pinned: pinned || undefined,
             close: () => this.closePath(entry.path),
+            open: (href, how) => this.navigate(href, { from: entry.path, how }),
         });
         return entry;
     }
@@ -865,17 +881,31 @@ export class PanelStackController {
         });
     }
     /**
-     * Navigate to `href`. `origin` is the path of the panel the link lives in, or
-     * `null` when it has none — a nav item, or a programmatic call, which builds
-     * the whole stack instead (see {@link deriveStack}). `replace` swaps the
-     * originating panel rather than stacking on top of it, and `beneath` says what
-     * the stack under the target is outright, for callers that know.
+     * Navigate to `href` — the one implementation behind a link click,
+     * {@link Panel.open} and the stack's own methods, so none of them can
+     * behave differently.
+     *
+     * `from` is the path of the panel the navigation starts from — the one
+     * the link lives in — or absent when it has none: a nav item, or a call
+     * that means the whole stack, which is then built instead (see
+     * {@link deriveStack}), or taken outright from `beneath`, for callers
+     * that know it.
+     *
+     * `how` is the link's `data-panel` attribute (or the caller's word for
+     * it): absent — like a link without the attribute — it is the shell's
+     * `linkNavigation` default, an unrecognised value is a push on top of
+     * `from`, `"replace"` swaps `from` out rather than stacking on it, and
+     * `"open"` drops `from` altogether so the target arrives with its own
+     * stack, the way a nav item's link does.
      *
      * Resolves the way every {@link PanelStack} method does: `true` once the
      * navigation lands, `false` when it doesn't (already there counts as
      * landed).
      */
-    navigate(href, origin, replace = false, beneath) {
+    navigate(href, { from, how, beneath } = {}) {
+        const mode = how ?? this.opts.linkNavigation;
+        const origin = mode === "open" ? null : from ?? null;
+        const replace = mode === "replace";
         return A.peek(() => {
             let url;
             try {
@@ -933,43 +963,36 @@ export class PanelStackController {
     pushPath(path, replace) {
         return A.peek(() => {
             const arr = this.intended();
-            return this.navigate(path, arr.stack[arr.focus] ?? null, replace);
+            return this.navigate(path, { from: arr.stack[arr.focus], how: replace ? "replace" : "push" });
         });
     }
     // ── 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), the `data-panel`
-     * attribute, and return-to-an-open-panel semantics. The exclusion rules
+     * the anchor so we can decide what the click *means*. The exclusion rules
      * (targets, downloads, modified clicks, external URLs) live in Aberdeen; the
      * close guards run in `checkChange` when our navigation reaches the router.
      *
-     * `data-panel` names which of the three {@link PanelStack} navigations the
-     * click is: `push`, `replace`, or `open`, which drops the
-     * originating panel so the target arrives with its own stack beneath it,
-     * exactly as a nav item's link does. A link that doesn't say gets the
-     * shell's {@link PanelStackOptions.linkNavigation} (`push` by default);
-     * an unrecognised value is a `push`.
+     * A link inside a panel is that panel's {@link Panel.open}, the `data-panel`
+     * attribute as its `how` (see {@link navigate}, the shared implementation).
+     * A link that isn't inside any panel — a nav item, one in a dialog — has no
+     * panel to build on, so it replaces the stack as a whole, exactly as a cold
+     * link to the same URL would open it.
      */
     interceptLinks() {
         route.interceptLinks((url, anchor) => {
-            const mode = anchor.getAttribute("data-panel") ?? this.opts.linkNavigation;
-            let origin = null;
-            if (mode !== "open") {
-                const panel = anchor.closest(".s-panel");
-                if (panel) {
-                    origin = this.$state.live.find((entry) => entry.el === panel)?.path ?? null;
-                }
-                else if (anchor.closest(".s-panel-origin")) {
-                    // The current panel's actions, promoted into the top bar on a
-                    // narrow shell (see main.ts), sit outside every `.s-panel` — but
-                    // they are still the current panel's own chrome, so a link among
-                    // them builds on that panel, exactly as it does at full width.
-                    origin = this.$state.live[this.$state.focus]?.path ?? null;
-                }
-            }
-            void this.navigate(url.href, origin, mode === "replace");
+            const how = anchor.getAttribute("data-panel") ?? undefined;
+            // The panel the link lives in: the enclosing `.s-panel`, or — for the
+            // current panel's actions, promoted into the top bar on a narrow shell
+            // (see main.ts), outside every `.s-panel` — the current panel, whose
+            // own chrome they remain at every width.
+            const panelEl = anchor.closest(".s-panel");
+            const entry = panelEl
+                ? this.$state.live.find((e) => e.el === panelEl)
+                : anchor.closest(".s-panel-origin")
+                    ? this.$state.live[this.$state.focus]
+                    : undefined;
+            void this.navigate(url.href, { from: entry?.path, how });
             return true;
         });
     }
@@ -993,7 +1016,7 @@ export class PanelStackController {
         return this.pushPath(path, true);
     }
     openPanelStack(path, beneath) {
-        return this.navigate(path, null, false, beneath);
+        return this.navigate(path, { how: "open", beneath });
     }
     closePanel(path) {
         return A.peek(() => {
@@ -1001,6 +1024,23 @@ export class PanelStackController {
             return this.closePath(path ?? arr.stack[arr.focus] ?? "");
         });
     }
+    // ── Live settings ──────────────────────────────────────────────────────
+    // `main()` keeps these fed from small reactive scopes of their own, so an
+    // app that reads them off a proxy (or through a getter) can change them at
+    // runtime and the shell adapts in place — nothing is redrawn, no panel
+    // loses its state. Not {@link PanelStack} API: the app talks to `main()`'s
+    // options; these are how `main()` talks to the stack.
+    /** Adopt a changed `columns` setting: one layout pass, nothing redrawn. */
+    setColumns(columns) {
+        if (this.opts.columns === columns)
+            return;
+        this.opts.columns = columns;
+        this.scheduleLayout();
+    }
+    /** Adopt a changed `linkNavigation` default; the next click reads it. */
+    setLinkNavigation(mode) {
+        this.opts.linkNavigation = mode;
+    }
     /**
      * The breadcrumb stack, drawn by `main()` into the top bar: every open
      * panel, oldest first, the ones on screen right now in bold, pinned ones
@@ -1430,11 +1470,11 @@ export class PanelStackController {
             if (!entry.width)
                 entry.width = width(entry);
         }
-        // The chrome above and below the body caps itself to the ensemble width,
-        // keeping everything centred and aligned however far the area stretches.
-        // The consumers transition their max-width (see main.ts), so the
-        // recentring plays along with the panel that caused it instead of
-        // snapping.
+        // The body row caps itself to the ensemble width, keeping the columns
+        // centred however far the area stretches, and transitions its max-width
+        // (see main.ts) so the recentring plays along with the panel that caused
+        // it. The bars above and below don't follow — they hold at the standard
+        // page width (also main.ts).
         shell.style.setProperty("--s-shell-w", `${geom.chrome + area}px`);
         // Phase 1 — every panel's *start* state for this frame. Panels already on
         // screen simply move (their standing transition animates it); freshly