staffa 0.18.1 → 0.18.2

package/dist/components/main.js

@@ -7,7 +7,7 @@ import { drawMenu, isFloatingMenuOpen, consumeBranchNav, anyCurrent, registerMen
 import { menu as menuIcon, x as closeIcon } from "../icons.js";
 import { iconButton } from "./button.js";
 import { isDialogOpen } from "./dialog.js";
-import { PanelStackController, SMALL_MAX_PX } from "./panels.js";
+import { PAGE_MS, PanelStackController, SMALL_MAX_PX } from "./panels.js";
 /** The default nav column, hairline included — see {@link MainOptions.navWidth}. */
 const NAV_W = 200;
 A.insertGlobalCss({
@@ -66,7 +66,7 @@ A.insertGlobalCss({
         // — past the viewport edge. The transition is dormant except for the
         // incoming half of the nav-panel hand-off (see `slideContentIn`).
         ".s-body main": "flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column " +
-            "transition: transform var(--s-panel-ms) ease;",
+            `transition: transform ${PAGE_MS}ms ease;`,
         // A one-shot starting position: parked one screen to the right, with the
         // transition off so it snaps there. Removing the class animates it home.
         ".s-body main.s-slide-in": "transform: translateX(100%); transition:none",
@@ -95,14 +95,16 @@ A.insertGlobalCss({
         // Under the sticky header's 10: they never overlap, but the bar should win.
         "position:absolute inset:0 z-index:5 display:flex flex-direction:column " +
             "overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 " +
-            "transition: transform var(--s-panel-ms) ease, visibility 0s;",
+            `transition: transform ${PAGE_MS}ms ease, visibility 0s;`,
         // Parked one screen left: what the `create=`/`destroy=` hooks transition out
         // of and back into. On dismissal (this rule's transition) `visibility` flips
-        // only at the slide's end, so the dismissed page isn't reachable while it
-        // waits for Aberdeen's removal timer; on entry it flips instantly (the `0s`
-        // above), or the opening page would refuse the focus handed to it mid-slide.
+        // only at the slide's end — a delayed zero-length transition, whose constant
+        // start value costs nothing per frame — so the dismissed page isn't
+        // reachable while it waits for Aberdeen's removal timer; on entry it flips
+        // instantly (the `0s` above), or the opening page would refuse the focus
+        // handed to it mid-slide.
         "&.s-nav-page-off": "transform:translateX(-100%) pointer-events:none visibility:hidden " +
-            "transition: transform var(--s-panel-ms) ease, visibility var(--s-panel-ms);",
+            `transition: transform ${PAGE_MS}ms ease, visibility 0s ${PAGE_MS}ms;`,
         // Roomier than the dropdown's: every row here is a thumb target.
         ".s-menu-item": "padding: $2 $3; min-height:3rem font-size:1.05em gap:$3",
     },

package/dist/components/panels.d.ts

@@ -287,6 +287,13 @@ export interface Panel<P = Record<string, string | number | string[]>> {
      */
     open(href: string, how?: "push" | "replace" | "open"): Promise<boolean>;
 }
+/**
+ * The one duration every bit of shell motion shares: the enter/exit fades, the
+ * slides, the narrow-screen nav slide. Interpolated into every transition as a
+ * literal — the shared constant is what keeps CSS and JS in step — and also
+ * published as the `--s-panel-ms` custom property for app CSS.
+ */
+export declare const PAGE_MS = 250;
 export declare const SMALL_MAX_PX = 540;
 /** Options the stack needs from its shell. */
 export interface PanelStackOptions {
@@ -453,6 +460,8 @@ export declare class PanelStackController implements PanelStack {
     private lastGeom?;
     private layoutQueued;
     private timers;
+    /** Elements playing their exit fade, each riding its anchor's motion (see `layout`). */
+    private exiting;
     /** The arrangement the navigation in flight is heading for; see {@link intended}. */
     private intent;
     /** The navigation the router hasn't settled yet, if any. */
@@ -530,13 +539,21 @@ export declare class PanelStackController implements PanelStack {
      */
     private beginClose;
     /**
-     * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades
-     * where it stands, inert, and leaves the DOM on `transitionend`. A fixed timer
-     * would race the transition and pull the element a frame early, making the
-     * panel appear to fade half-way and vanish; the timeout is only a fallback for
-     * when no `transitionend` is coming (transitions off, element never placed).
+     * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades,
+     * inert, riding its anchor's slide (see `layout`), and leaves the DOM once
+     * the fade is over (see {@link afterFade}).
      */
     private playExit;
+    /**
+     * Run `done` once `el`'s transition of `prop` is over. The real signal is
+     * `transitionend` — or `transitioncancel`, for one a resize snaps short —
+     * so the transition's actual length rules, however long: DevTools' slowed
+     * animations stretch it tenfold without touching any timer. The timer only
+     * stands in for a transition that never starts at all (transitions off,
+     * element never placed, nothing to travel), which is why one proving real
+     * (`transitionrun`) disarms it.
+     */
+    private afterTransition;
     /**
      * The arrangement navigation works from: the one we're on the way to while a
      * change is still settling, the one on screen otherwise. That window is common

package/dist/components/panels.js

@@ -110,10 +110,11 @@ function matchRoute(r, segments) {
 // ─── Constants ───────────────────────────────────────────────────────────────
 /**
  * The one duration every bit of shell motion shares: the enter/exit fades, the
- * sideways `left` moves, the narrow-screen nav slide. Published below as the
- * `--s-panel-ms` custom property, so CSS and JS can't drift apart.
+ * slides, the narrow-screen nav slide. Interpolated into every transition as a
+ * literal — the shared constant is what keeps CSS and JS in step — and also
+ * published as the `--s-panel-ms` custom property for app CSS.
  */
-const PAGE_MS = 250;
+export const PAGE_MS = 250;
 /** How long a freshly pushed `loading` panel holds its fade-in. */
 const LOADING_HOLD_MS = 300;
 /**
@@ -138,16 +139,23 @@ A.insertGlobalCss({
         PANEL_SHEEN,
     ".s-panel": {
         // The shell knows three motions, and this vocabulary is all of them:
-        // a panel that MOVES animates its `left` — every mover in a pass shares
-        // this one duration and ease-out, so panels travelling the same distance
-        // travel as one — a CREATED panel joins the strip beside the old position
-        // of the panels beneath it and rides their slide while fading in, and a
-        // CLOSED one fades out where it stood. Nothing else ever animates.
-        // A plain `left`, never a transform: a transformed element is
-        // composited, costing it subpixel text antialiasing. No `width`
-        // transition either — animating one reflows the column every frame. And
-        // the fade is `linear` while the moves ease out: an eased opacity spends
-        // its last stretch near zero, reading as a vanish.
+        // a panel that MOVES slides — every mover in a pass shares this one
+        // duration and ease-out, so panels travelling the same distance travel
+        // as one — a CREATED panel joins the strip beside the old position of
+        // the panels beneath it and rides their slide while fading in, and a
+        // CLOSED one keeps its seat beside the surviving panel beneath it and
+        // rides that panel's slide while fading out — its creation played
+        // backwards. Nothing else ever animates.
+        // A slide is a `transform` playing out to none (see `layout`), never an
+        // animated `left`: left is a layout property, so animating it would
+        // relayout and repaint every travelling column on every frame, where a
+        // transform moves composited layers. `left` always holds the resting
+        // position — it is not in the transition list — and the transform
+        // exists only while a panel travels, so text gets its subpixel
+        // antialiasing back the moment it settles. No `width` transition
+        // either — animating one reflows the column every frame. And the fade
+        // is `linear` while the moves ease out: an eased opacity spends its
+        // last stretch near zero, reading as a vanish.
         // Layering is fixed per state, not per stack depth: live panels never
         // overlap each other (the strip keeps them adjacent, see `layout()`), so
         // only the fading ones need an order — below, in both directions, per
@@ -156,7 +164,7 @@ A.insertGlobalCss({
         // another, and two transparent ones mean text sliding over text).
         "&": "position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column " +
             PANEL_SHEEN + " " +
-            "z-index:2 transition: left var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear;",
+            `z-index:2 transition: transform ${PAGE_MS}ms ease-out, opacity ${PAGE_MS}ms linear;`,
         // The hairline between two columns, fading at both ends (like the sidebar's
         // `.s-nav-sep`). Columns tile with no gutter — each brings its own `$3` of
         // padding — so this sits exactly on the boundary.
@@ -166,9 +174,10 @@ A.insertGlobalCss({
         // whatever slides across its spot passes over it. Dropped once the fade
         // is over (see `releaseEnter`).
         "&.s-panel-new": "z-index:1",
-        // On its way out: it fades where it stood, beneath every live panel
-        // (declared after `.s-panel-new`, so closing mid-enter drops a panel to
-        // the bottom), and leaves the DOM when the fade ends (see `playExit`).
+        // On its way out: it fades, still riding the strip (see `layout`),
+        // beneath every live panel (declared after `.s-panel-new`, so closing
+        // mid-enter drops a panel to the bottom), and leaves the DOM when the
+        // fade ends (see `playExit`).
         "&.s-panel-closing": "z-index:0 opacity:0 pointer-events:none",
         // The fade-in's start state: a newcomer wears it from creation until its
         // content is ready — usually the very pass that placed it, later for a
@@ -179,11 +188,13 @@ A.insertGlobalCss({
         // edges, so these rest at their true positions, clipped — being crowded
         // out or revealed is an ordinary move, not a fade. Both keep their DOM —
         // and so their scroll position and half-typed forms — hence
-        // `visibility`, not `display:none`: it holds through the move out
-        // (flipping only at its end) and lifts instantly on the move back in
-        // (the base transition above doesn't list it).
-        "&.s-panel-hidden, &.s-panel-parked": "visibility:hidden " +
-            "transition: left var(--s-panel-ms) ease-out, opacity var(--s-panel-ms) linear, visibility var(--s-panel-ms);",
+        // `visibility`, not `display:none`. The flip is timed by `layout()`,
+        // never transitioned: a panel sliding offstage gets the class once its
+        // slide ends and drops it the moment it is revealed. `visibility` is
+        // not compositable, and Chrome composites an element's transitions as
+        // a group, so listing it here would drag the slide itself onto the
+        // main thread — relaid out and repainted every frame.
+        "&.s-panel-hidden, &.s-panel-parked": "visibility:hidden",
     },
     // The scroll container, with the column's own padding. Its scrollbar sits
     // flush against the column edge (unlike content mode's inset one), so it meets
@@ -290,6 +301,8 @@ export class PanelStackController {
     lastGeom;
     layoutQueued = false;
     timers = new Set();
+    /** Elements playing their exit fade, each riding its anchor's motion (see `layout`). */
+    exiting = new Set();
     /** The arrangement the navigation in flight is heading for; see {@link intended}. */
     intent = null;
     /** The navigation the router hasn't settled yet, if any. */
@@ -516,8 +529,15 @@ export class PanelStackController {
             next.push(entry);
             this.$open[path] = entry;
         }
-        for (const entry of existing.values())
-            this.beginClose(entry);
+        // What remains in `existing` closes, each remembering the nearest
+        // surviving panel beneath it — the anchor its exit fade rides.
+        let anchor;
+        for (const entry of this.$state.live) {
+            if (existing.has(entry.path))
+                this.beginClose(entry, anchor);
+            else
+                anchor = entry.path;
+        }
         this.$state.live = next;
         this.$state.focus = Math.min(target.focus, next.length - 1);
         this.scheduleLayout();
@@ -556,17 +576,16 @@ export class PanelStackController {
      * at the end of the animation. Only the element lingers to play that animation,
      * which is what `drawPanel`'s `destroy=` hook hands to {@link playExit}.
      */
-    beginClose(entry) {
+    beginClose(entry, anchor) {
         entry.closing = true;
+        entry.anchor = anchor;
         entry.$panel.visible = false;
         delete this.$open[entry.path];
     }
     /**
-     * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades
-     * where it stands, inert, and leaves the DOM on `transitionend`. A fixed timer
-     * would race the transition and pull the element a frame early, making the
-     * panel appear to fade half-way and vanish; the timeout is only a fallback for
-     * when no `transitionend` is coming (transitions off, element never placed).
+     * A closed panel's send-off, run by Aberdeen once its scope is gone: it fades,
+     * inert, riding its anchor's slide (see `layout`), and leaves the DOM once
+     * the fade is over (see {@link afterFade}).
      */
     playExit(entry, el) {
         // A panel being *redrawn* replaces its element through here too; that one
@@ -577,17 +596,41 @@ export class PanelStackController {
         }
         el.classList.add("s-panel-closing");
         el.setAttribute("inert", "");
-        const drop = () => {
-            clearTimeout(timer);
-            this.timers.delete(timer);
+        // Only a placed panel has a seat on the strip to ride out from.
+        const exit = entry.placed ? { el, anchor: entry.anchor, ride: 0 } : null;
+        if (exit)
+            this.exiting.add(exit);
+        this.afterTransition(el, "opacity", () => {
+            if (exit)
+                this.exiting.delete(exit);
             el.remove();
-        };
-        el.addEventListener("transitionend", (e) => {
-            if (e.target === el && e.propertyName === "opacity")
-                drop();
         });
-        const timer = setTimeout(drop, PAGE_MS + 80);
+    }
+    /**
+     * Run `done` once `el`'s transition of `prop` is over. The real signal is
+     * `transitionend` — or `transitioncancel`, for one a resize snaps short —
+     * so the transition's actual length rules, however long: DevTools' slowed
+     * animations stretch it tenfold without touching any timer. The timer only
+     * stands in for a transition that never starts at all (transitions off,
+     * element never placed, nothing to travel), which is why one proving real
+     * (`transitionrun`) disarms it.
+     */
+    afterTransition(el, prop, done) {
+        let called = false;
+        const timer = setTimeout(() => finish(), PAGE_MS + 80);
         this.timers.add(timer);
+        const disarm = () => { clearTimeout(timer); this.timers.delete(timer); };
+        const finish = () => { disarm(); if (!called) {
+            called = true;
+            done();
+        } };
+        const forProp = (fn) => (e) => {
+            if (e.target === el && e.propertyName === prop)
+                fn();
+        };
+        el.addEventListener("transitionrun", forProp(disarm));
+        el.addEventListener("transitionend", forProp(finish));
+        el.addEventListener("transitioncancel", forProp(finish));
     }
     // ── Navigation ─────────────────────────────────────────────────────────
     /**
@@ -1267,14 +1310,27 @@ export class PanelStackController {
         // Phase 1 — lay the strip out for this frame: each panel flush against
         // its neighbours, the visible run [first..cur] in the viewport, earlier
         // panels continuing off its left edge and parked ones held past its
-        // right. Placed panels get their new positions — their standing
-        // transitions carry them there. Newcomers, transitions still off, get
-        // their *start* state instead: their strip position anchored to the OLD
-        // position of the nearest placed panel beneath them (`delta`), so the
-        // slide in is one motion with the panels making room. With nothing
-        // beneath them to come from — or nothing moving — that start is where
-        // they already stand, and they simply fade in.
+        // right. `left` gets each new resting position outright — it never
+        // animates — and the slide to it is a FLIP: a mover is held at its
+        // current visual spot by a transform (its mid-slide offset plus the
+        // distance), a newcomer at its start beside the OLD position of the
+        // nearest placed panel beneath it (`delta`, so the slide in is one
+        // motion with the panels making room; with nothing beneath it to come
+        // from, it simply fades in place). Phase 3 plays every held transform
+        // out to none. A snap pass holds nothing: geometry must land, not
+        // travel.
         const fresh = [];
+        const movers = [];
+        const deltas = new Map();
+        // All reads before all writes: a mover may still be mid-slide, and its
+        // current offset must come out of the computed style before this pass
+        // dirties it (one style recalc, then cached).
+        const txs = new Map();
+        if (!snap)
+            for (const entry of live) {
+                if (entry.placed)
+                    txs.set(entry, transformX(entry.el));
+            }
         let x = left;
         let delta = 0;
         for (let i = 0; i < first; i++)
@@ -1298,17 +1354,28 @@ export class PanelStackController {
             }
             if (entry.placed) {
                 delta = parseFloat(el.style.left) - x;
+                deltas.set(entry.path, delta);
+                if (delta && !snap) {
+                    // Hold the visual spot while `left` jumps beneath it. The
+                    // inline transition keeps the transform still — and only it:
+                    // running fades carry on, and one starting this pass (a
+                    // release below) still gets its linear curve.
+                    el.style.transition = `opacity ${PAGE_MS}ms linear`;
+                    el.style.transform = `translateX(${(txs.get(entry) ?? 0) + delta}px)`;
+                    movers.push(el);
+                }
                 el.style.left = `${x}px`;
                 // A fade held back for content starts the moment its hold lifts.
                 if (entry.enter && !entry.$ui.holding)
                     this.releaseEnter(entry);
             }
             else {
-                fresh.push({ entry, x });
-                const entering = entry.enter && shown;
-                el.style.left = `${entering ? x + delta : x}px`;
-                if (entering)
+                fresh.push(entry);
+                el.style.left = `${x}px`;
+                if (entry.enter && shown) {
+                    el.style.transform = `translateX(${delta}px)`;
                     el.classList.add("s-panel-enter", "s-panel-new");
+                }
             }
             el.style.width = `${entry.width}px`;
             x += entry.width;
@@ -1319,24 +1386,61 @@ export class PanelStackController {
             if (entry.$panel.width !== entry.width)
                 entry.$panel.width = entry.width;
             el.classList.toggle("s-panel-sep", shown && i > first);
-            // Off-screen panels stop rendering, keeping their DOM.
-            el.classList.toggle("s-panel-hidden", i < first);
-            el.classList.toggle("s-panel-parked", i > cur);
+            // Off-screen panels stop rendering, keeping their DOM. A revealed
+            // panel is visible at once; one sliding offstage stays visible for
+            // the whole slide, its visibility class deferred to the slide's
+            // end — but applied outright when it is already invisible, about
+            // to be (a newcomer offstage from birth), or snapping.
+            const hidden = i < first;
+            const wasOff = el.classList.contains("s-panel-hidden") || el.classList.contains("s-panel-parked");
+            if (shown) {
+                el.classList.remove("s-panel-hidden", "s-panel-parked");
+            }
+            else if (wasOff || !entry.placed || snap) {
+                el.classList.toggle("s-panel-hidden", hidden);
+                el.classList.toggle("s-panel-parked", !hidden);
+            }
+            else {
+                this.afterTransition(el, "transform", () => {
+                    if (entry.el !== el || !entry.offstage)
+                        return;
+                    el.classList.toggle("s-panel-hidden", hidden);
+                    el.classList.toggle("s-panel-parked", !hidden);
+                });
+            }
+            entry.offstage = !shown;
             el.toggleAttribute("inert", !shown);
         }
+        // Closing panels keep their seat on the strip while they fade: each
+        // travels exactly as far as its anchor — the surviving panel it stood
+        // on — so a close slides back out the way the open slid in, and one
+        // whose anchor stays put is the plain crossfade it should be. A plain
+        // retarget, no holding: the transition picks the slide up from wherever
+        // the element is now.
+        for (const exit of this.exiting) {
+            const d = exit.anchor == null ? undefined : deltas.get(exit.anchor);
+            if (d) {
+                exit.ride -= d;
+                exit.el.style.transform = `translateX(${exit.ride}px)`;
+            }
+        }
         // Phase 2 — reading a layout property forces the browser to adopt those
-        // start states (and a snap pass's transition-free geometry) to animate from.
-        if (fresh.length || snap)
+        // held spots (and a snap pass's transition-free geometry) to slide from.
+        if (fresh.length || movers.length || snap)
             void container.offsetWidth;
         if (snap)
             shell.classList.remove("s-shell-snap");
-        // Phase 3 — newcomers get their transitions and their resting place: the
-        // slide starts now, and the fade with it — unless the panel is holding
+        // Phase 3 — every held transform plays out to none: the slides start
+        // now, and the newcomers' fades with them — unless a panel is holding
         // for its content, which keeps the fade's start state on until then.
-        for (const { entry, x } of fresh) {
+        for (const el of movers) {
+            el.style.transition = "";
+            el.style.transform = "";
+        }
+        for (const entry of fresh) {
             const el = entry.el;
             el.style.transition = "";
-            el.style.left = `${x}px`;
+            el.style.transform = "";
             entry.placed = true;
             if (!entry.$ui.holding)
                 this.releaseEnter(entry);
@@ -1349,14 +1453,8 @@ export class PanelStackController {
         if (!el || !el.classList.contains("s-panel-enter"))
             return;
         el.classList.remove("s-panel-enter");
-        // Keep it beneath its elders until the fade is over — by timer, a hair
-        // past it, since a resize can snap the fade short without ever firing a
-        // `transitionend`.
-        const timer = setTimeout(() => {
-            this.timers.delete(timer);
-            el.classList.remove("s-panel-new");
-        }, PAGE_MS + 80);
-        this.timers.add(timer);
+        // Keep it beneath its elders until the fade is over.
+        this.afterTransition(el, "opacity", () => el.classList.remove("s-panel-new"));
     }
     /** Let a `loading` panel's fade-in wait — but not indefinitely. */
     holdEnter(entry) {
@@ -1375,6 +1473,11 @@ export class PanelStackController {
 function sameStack(a, b) {
     return a.length === b.length && a.every((v, i) => v === b[i]);
 }
+/** The X offset of `el`'s computed transform — where a slide has it right now. */
+function transformX(el) {
+    const t = getComputedStyle(el).transform;
+    return t && t !== "none" ? new DOMMatrixReadOnly(t).m41 : 0;
+}
 /**
  * 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.