staffa 0.18.0 → 0.18.2

package/dist/components/main.d.ts

@@ -180,8 +180,8 @@ export interface MainOptions<R = Routes> {
      * How many panels are *shown* at a time. `"auto"` (the default) shows as
      * many columns, side by side, as comfortably fit, ending at the current
      * panel; `"single"` shows only the current panel, however wide the screen
-     * — one screen at a time at every size, each still at its asked width,
-     * centred (the nav sidebar still sits beside it). Only the display
+     * — one screen at a time at every size, each still at its asked width
+     * (the nav sidebar still sits beside it). Only the display
      * differs: the stack, the breadcrumbs, the URL, Escape and the back
      * button behave identically in both. Routed mode only.
      *

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

@@ -175,7 +175,7 @@ export interface Panel<P = Record<string, string | number | string[]>> {
      * Every size is capped at the content area, so on a phone they all come to
      * the same thing: one screen at a time. And a width depends only on the
      * window, never on what else is open, so opening or closing a panel never
-     * resizes another — the run of columns just recentres in the area.
+     * resizes another — the run of columns just shifts over in the area.
      *
      * The ask is a ceiling only; there is no matching floor, since the window can
      * be any width. Aim your layout at 360px — about the narrowest phone still in
@@ -193,10 +193,11 @@ export interface Panel<P = Record<string, string | number | string[]>> {
     maxWidth?: PanelSize;
     /**
      * Set this while you're fetching what the panel needs, and back to `false`
-     * when you're done. A new panel waits a moment before sliding in, so it can
-     * arrive with real content instead of empty; if the wait drags on it slides
-     * in anyway and shows a loading indicator until the flag clears. It only
-     * affects the animation; the stack and the URL never wait for it.
+     * when you're done. A new panel slides into place right away but waits a
+     * moment before fading in, so it can appear with real content instead of
+     * empty; if the wait drags on it fades in anyway and shows a loading
+     * indicator until the flag clears. It only affects the animation; the
+     * stack and the URL never wait for it.
      */
     loading?: boolean;
     /**
@@ -286,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 {
@@ -452,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. */
@@ -529,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
@@ -701,7 +719,9 @@ export declare class PanelStackController implements PanelStack {
      * The motion between two such arrangements is CSS's job.
      */
     private layout;
-    /** Let a `loading` panel's enter animation wait — but not indefinitely. */
+    /** Start (or skip) a newcomer's fade-in; any slide is already underway. */
+    private releaseEnter;
+    /** Let a `loading` panel's fade-in wait — but not indefinitely. */
     private holdEnter;
 }
 export {};