@xingwangzhe/stalux 1.46.2 → 1.47.0

package/src/schemas/config.ts

@@ -164,7 +164,7 @@ export const commentSchema = z.object({
         .object({
             serverURL: z.url("comment.waline.serverURL must be a valid URL").optional(),
             lang: z.string().optional().default("zh-CN"),
-            locale: z.any().optional(),
+            locale: z.unknown().optional(),
             emoji: z
                 .array(z.string())
                 .optional()
@@ -181,10 +181,10 @@ export const commentSchema = z.object({
             dark: z.union([z.string(), z.boolean()]).optional().default(true),
             noCopyright: z.boolean().optional().default(false),
             commentSorting: z.string().optional().default("latest"),
-            imageUploader: z.any().optional(),
-            highlighter: z.any().optional(),
-            texRenderer: z.any().optional(),
-            search: z.any().optional(),
+            imageUploader: z.unknown().optional(),
+            highlighter: z.unknown().optional(),
+            texRenderer: z.unknown().optional(),
+            search: z.unknown().optional(),
             wordLimit: z.number().optional().default(200),
             pageSize: z.number().optional().default(10),
         })

package/src/scripts/analytics-runtime.ts

@@ -244,7 +244,7 @@ function trackGooglePage(): void {
 
 function trackUmamiPage(): void {
     const config = document.body?.dataset;
-    if (!config?.staluxUmamiId || !config.staluxUmamiUrl) return;
+    if (!(config?.staluxUmamiId && config.staluxUmamiUrl)) return;
     // Snapshot now: a slow SDK must not attribute every queued visit to the last URL.
     const payload = {
         website: config.staluxUmamiId,

package/src/scripts/archive-descriptions.ts

@@ -36,7 +36,7 @@ export function getArchiveDescriptionPosition(
 export function mountArchiveDescriptions() {
     const root = document.querySelector<HTMLElement>(".stalux-archive-container");
     const tooltip = document.querySelector<HTMLElement>("[data-archive-tooltip]");
-    if (!root || !tooltip) return;
+    if (!(root && tooltip)) return;
     const usePopover =
         typeof tooltip.showPopover === "function" && typeof tooltip.hidePopover === "function";
     if (usePopover) tooltip.setAttribute("popover", "manual");

package/src/scripts/back-to-top.ts

@@ -1,5 +1,7 @@
-interface BackToTopWindow extends Window {
-    __STALUX_BACK_TO_TOP__?: boolean;
+declare global {
+    interface Window {
+        __STALUX_BACK_TO_TOP__?: boolean;
+    }
 }
 
 const SENTINEL_SELECTOR = "[data-stalux-scroll-sentinel]";
@@ -14,12 +16,11 @@ const BUTTON_SELECTOR = "[data-stalux-back-to-top]";
  * not reached `ready`.
  */
 export function installBackToTop(): void {
-    const host = window as BackToTopWindow;
-    if (host.__STALUX_BACK_TO_TOP__) return;
+    if (window.__STALUX_BACK_TO_TOP__) return;
     const sentinel = document.querySelector(SENTINEL_SELECTOR);
     const button = document.querySelector<HTMLButtonElement>(BUTTON_SELECTOR);
-    if (!sentinel || !button) return;
-    host.__STALUX_BACK_TO_TOP__ = true;
+    if (!(sentinel && button)) return;
+    window.__STALUX_BACK_TO_TOP__ = true;
 
     button.addEventListener("click", () => {
         window.scrollTo({

package/src/scripts/background.ts

@@ -34,7 +34,7 @@ export function installSessionBackground(): void {
         if (connection?.saveData) return;
         const a = document.querySelector<HTMLElement>('[data-stalux-background="a"]');
         const b = document.querySelector<HTMLElement>('[data-stalux-background="b"]');
-        if (!a || !b || a.style.backgroundImage || b.style.backgroundImage) return;
+        if (!(a && b) || a.style.backgroundImage || b.style.backgroundImage) return;
         const custom = Boolean(window.__STALUX_BG_URLS__?.length);
         const urls = window.__STALUX_BG_URLS__?.length
             ? window.__STALUX_BG_URLS__
@@ -50,7 +50,7 @@ export function installSessionBackground(): void {
             () => {
                 // These two shell nodes retain their identities during Swup visits.
                 // No navigation event can start another image or reset this result.
-                if (!a.isConnected || !b.isConnected) return;
+                if (!(a.isConnected && b.isConnected)) return;
                 // Original SVGs have only a viewBox: auto sizes them as contain.
                 // Raster files have intrinsic dimensions, so retain that sizing
                 // explicitly. Custom URLs keep the existing auto semantics.

package/src/scripts/countdown.ts

@@ -3,7 +3,7 @@ import { registerPageLifecycle } from "./page-runtime";
 registerPageLifecycle("not-found-countdown", () => {
     const el = document.getElementById("countdown");
     const template = el?.dataset.countdownTemplate;
-    if (!el || !template) return;
+    if (!(el && template)) return;
     let seconds = 5;
     const timer = window.setInterval(() => {
         seconds -= 1;

package/src/scripts/date-time.ts

@@ -25,7 +25,7 @@ function toDisplayDate(date: Date, lang: string): string {
 registerPageLifecycle("date-time", () => {
     const dateElement = document.querySelector<HTMLTimeElement>('[data-ref="date"]');
     const timeElement = document.querySelector<HTMLTimeElement>('[data-ref="time"]');
-    if (!dateElement || !timeElement) return;
+    if (!(dateElement && timeElement)) return;
     const lang = document.documentElement.lang || "zh-CN";
     let lastDate = "";
     const update = () => {

package/src/scripts/list-reveal.ts

@@ -4,13 +4,17 @@ const ITEM = ":scope > [data-stalux-reveal-item]";
 // never a queue long enough to keep the reader waiting for the last item.
 const MAX_CONTAINERS = 48;
 const MAX_ITEMS = 16;
-const STAGGER_MS = 45;
-const MAX_DELAY_MS = 400;
-const DURATION_MS = 380;
+// The whole unroll budget is lead-in + max delay + row duration. At the previous
+// 150 + 400 + 380 the tail alone ran 930ms after the swap, which readers report
+// as the page still moving a second later. Every number here is half of that, so
+// the same sheet reads in one motion without the wait.
+const STAGGER_MS = 22;
+const MAX_DELAY_MS = 200;
+const DURATION_MS = 190;
 // When a route cue is already moving the page body, the sheet waits for it to
 // mostly settle before unrolling. Starting both at once makes the rows wipe
 // open while the whole page is still semi-transparent, which reads as a smudge.
-const ROUTE_LEAD_IN_MS = 150;
+const ROUTE_LEAD_IN_MS = 75;
 // Strong ease-out: the row arrives fast and settles softly. The built-in
 // ease-out is too weak to read at this size.
 const EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
@@ -46,7 +50,10 @@ interface Held {
     stagger: number;
     timer: ReturnType<typeof setTimeout>;
 }
-const held = new Map<HTMLElement, Held>();
+// Rows and groups are only ever queried, measured and animated, all of which
+// Element already provides. Typing them as HTMLElement forced a cast on the
+// observer's target for no gain.
+const held = new Map<Element, Held>();
 
 function canReveal(): boolean {
     if (typeof IntersectionObserver !== "function") return false;
@@ -57,14 +64,22 @@ function canReveal(): boolean {
     return document.documentElement.dataset.staluxVtPreset !== "restore";
 }
 
-function groups(): HTMLElement[] {
-    return [...document.querySelectorAll<HTMLElement>(CONTAINER)]
-        .filter((element) => !element.closest("[data-swup-persist]"))
+function groups(): Element[] {
+    return [...document.querySelectorAll<Element>(CONTAINER)]
+        .filter(
+            (element) =>
+                // A retained shell kept its identity, so its list was already
+                // read: cueing it again would be a second animation. Contents
+                // that shell-hydration just replaced are new content and are
+                // explicitly marked as such.
+                element.hasAttribute("data-stalux-shell-fresh") ||
+                !element.closest("[data-swup-persist]"),
+        )
         .slice(0, MAX_CONTAINERS);
 }
 
-function rows(group: HTMLElement): HTMLElement[] {
-    return [...group.querySelectorAll<HTMLElement>(ITEM)].slice(0, MAX_ITEMS);
+function rows(group: Element): Element[] {
+    return [...group.querySelectorAll<Element>(ITEM)].slice(0, MAX_ITEMS);
 }
 
 /**
@@ -76,7 +91,7 @@ function rows(group: HTMLElement): HTMLElement[] {
  * the entry cue needed. Groups further down the page keep the authored visible
  * state and start their wipe when they scroll in, which never flashed anyway.
  */
-function nearViewport(group: HTMLElement): boolean {
+function nearViewport(group: Element): boolean {
     const rect = group.getBoundingClientRect();
     if (rect.width <= 0 || rect.height <= 0) return false;
     const margin = window.innerHeight * 0.5;
@@ -130,6 +145,11 @@ export function primeListReveal(): void {
                     fill: "backwards",
                 });
                 animation.pause();
+                // A paused effect only ever settles by rejecting when the hold is
+                // released, and nothing awaits it yet: without a handler that is an
+                // unhandled rejection in the console. `reveal` attaches the real
+                // handler when it takes the effect over.
+                void animation.finished.catch(() => undefined);
                 const timer = setTimeout(() => {
                     // The visit was abandoned: release the row so the authored
                     // visible state returns rather than staying clipped.
@@ -179,7 +199,7 @@ export function mountListReveal(): (() => void) | undefined {
         for (const animation of active) animation.cancel();
         active.clear();
     };
-    const reveal = (container: HTMLElement) => {
+    const reveal = (container: Element) => {
         if (document.hidden || preference.matches) return;
         const lead = leadIn();
         for (const [index, row] of rows(container).entries()) {
@@ -226,7 +246,7 @@ export function mountListReveal(): (() => void) | undefined {
             for (const entry of entries) {
                 if (!entry.isIntersecting) continue;
                 observer.unobserve(entry.target);
-                reveal(entry.target as HTMLElement);
+                reveal(entry.target);
             }
         },
         { threshold: 0.05 },
@@ -249,13 +269,14 @@ export function mountListReveal(): (() => void) | undefined {
 // before the browser paints, which is the only moment where the incoming rows
 // can be held without a visible flash. Registered once per document even when
 // both the shared layout and the article layout import this module.
-interface PrimeHost {
-    __staluxListRevealPrime?: boolean;
+declare global {
+    interface Window {
+        __staluxListRevealPrime?: boolean;
+    }
 }
 if (typeof document !== "undefined" && typeof window !== "undefined") {
-    const host = document as Document & PrimeHost;
-    if (!host.__staluxListRevealPrime) {
-        host.__staluxListRevealPrime = true;
+    if (!window.__staluxListRevealPrime) {
+        window.__staluxListRevealPrime = true;
         document.addEventListener("astro:after-swap", primeListReveal);
     }
 }

package/src/scripts/module-motion.ts

@@ -11,7 +11,7 @@ export function mountModuleMotion(): (() => void) | undefined {
         typeof IntersectionObserver !== "function"
     )
         return;
-    const elements = [...document.querySelectorAll<HTMLElement>(SELECTOR)].slice(0, MAX_REGIONS);
+    const elements = [...document.querySelectorAll<Element>(SELECTOR)].slice(0, MAX_REGIONS);
     if (!elements.length) return;
     const active = new Set<Animation>();
     const motionPreference = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -23,7 +23,9 @@ export function mountModuleMotion(): (() => void) | undefined {
         (entries) => {
             for (const entry of entries) {
                 if (!entry.isIntersecting) continue;
-                const element = entry.target as HTMLElement;
+                // Element already covers everything used below (closest, animate),
+                // so the observer's target needs no assertion.
+                const element = entry.target;
                 observer.unobserve(element);
                 // The router owns a single bounded lead region. Do not layer an
                 // observer entry over that motion or make long comments slide.
@@ -44,7 +46,7 @@ export function mountModuleMotion(): (() => void) | undefined {
                     const animation = element.animate(
                         { opacity: [0.88, 1] },
                         {
-                            duration: 140,
+                            duration: 70,
                             easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
                         },
                     );

package/src/scripts/navigation-font.ts

@@ -16,7 +16,10 @@ function warmFont(href: string): Promise<FontFace> {
     });
     const ready = face.load();
     fonts.set(href, { face, ready });
-    if (fonts.size > MAX_FONTS) fonts.delete(fonts.keys().next().value as string);
+    if (fonts.size > MAX_FONTS) {
+        const oldest = fonts.keys().next();
+        if (!oldest.done) fonts.delete(oldest.value);
+    }
     void ready.catch(() => {
         if (fonts.get(href)?.ready === ready) fonts.delete(href);
     });

package/src/scripts/navigation.ts

@@ -38,7 +38,7 @@ registerPageLifecycle("navigation", () => {
     const navOverlay = document.querySelector<HTMLElement>("[data-ref='stalux-nav-overlay']");
     const buttonLeft = document.querySelector<HTMLElement>("[data-ref='stalux-nav-scroll-left']");
     const buttonRight = document.querySelector<HTMLElement>("[data-ref='stalux-nav-scroll-right']");
-    if (!navList || !buttonLeft || !buttonRight) return;
+    if (!(navList && buttonLeft && buttonRight)) return;
 
     const controller = new AbortController();
     const listenerOptions = { signal: controller.signal };

package/src/scripts/page-runtime.ts

@@ -12,12 +12,14 @@ interface RuntimeRegistration {
     unregister: PageDisposer;
 }
 
-interface RuntimeHost {
-    __staluxPageRuntime?: Map<string, RuntimeRegistration>;
+declare global {
+    interface Window {
+        __staluxPageRuntime?: Map<string, RuntimeRegistration>;
+    }
 }
 
 export interface PageRuntimeEnvironment {
-    host: RuntimeHost;
+    host: Pick<Window, "__staluxPageRuntime">;
     target: RuntimeTarget;
     queueTask: (callback: () => void) => void;
 }
@@ -25,7 +27,7 @@ export interface PageRuntimeEnvironment {
 function getBrowserEnvironment(): PageRuntimeEnvironment | undefined {
     if (typeof window === "undefined" || typeof document === "undefined") return undefined;
     return {
-        host: window as RuntimeHost,
+        host: window,
         target: document,
         queueTask: queueMicrotask,
     };

package/src/scripts/pagefind-api.ts

@@ -30,7 +30,7 @@ export function createPagefindLoader(
         if (!pending) {
             pending = (async () => {
                 try {
-                    const url = new URL(sitePath("pagefind/pagefind.js", base), origin());
+                    const url = new URL(sitePath("pagefind-enhanced/pagefind.js", base), origin());
                     // Browsers can retain a failed ESM fetch; retry with a fresh module URL.
                     if (failedAttempts)
                         url.searchParams.set("stalux_retry", String(failedAttempts));

package/src/scripts/random-posts.ts

@@ -10,7 +10,7 @@ function shuffle<T extends object>(items: T[]): T[] {
         const j = (crypto.getRandomValues(bytes)[0] ?? 0) % (i + 1);
         const current = result[i];
         const target = result[j];
-        if (!current || !target) throw new RangeError("Shuffle index is out of bounds");
+        if (!(current && target)) throw new RangeError("Shuffle index is out of bounds");
         result[i] = target;
         result[j] = current;
     }
@@ -35,7 +35,7 @@ function render(posts: { abbrlink: string; title: string }[]) {
 export function mountRandomPosts(): (() => void) | undefined {
     const container = document.querySelector<HTMLElement>("[data-stalux-random-posts]");
     const list = container?.querySelector<HTMLElement>("#random-posts-list");
-    if (!container || !list) return;
+    if (!(container && list)) return;
     const controller = new AbortController();
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
     const fallback = container.dataset.loadError ?? "Failed to load posts";

package/src/scripts/route-motion.ts

@@ -37,17 +37,17 @@ interface HeadingMotion {
 // Legacy heading cues remain available to integrations. The router requests
 // one content animation; it never stacks a second animation on the heading.
 const headingMotions: Record<Exclude<RouteMotionPreset, "none">, HeadingMotion> = {
-    glide: { opacity: 0.86, duration: 100 },
-    article: { opacity: 0.86, duration: 100 },
-    enter: { opacity: 0.86, duration: 140, y: 6 },
-    up: { opacity: 0.9, duration: 120, y: -4 },
-    taxonomy: { opacity: 0.85, duration: 120 },
-    previous: { opacity: 0.9, duration: 140, x: -8 },
-    next: { opacity: 0.9, duration: 140, x: 8 },
-    panel: { opacity: 0.9, duration: 120, y: 4 },
-    home: { opacity: 0.9, duration: 120, y: 4 },
-    restore: { opacity: 0.96, duration: 80 },
-    error: { opacity: 0.9, duration: 80 },
+    glide: { opacity: 0.86, duration: 50 },
+    article: { opacity: 0.86, duration: 50 },
+    enter: { opacity: 0.86, duration: 70, y: 6 },
+    up: { opacity: 0.9, duration: 60, y: -4 },
+    taxonomy: { opacity: 0.85, duration: 60 },
+    previous: { opacity: 0.9, duration: 70, x: -8 },
+    next: { opacity: 0.9, duration: 70, x: 8 },
+    panel: { opacity: 0.9, duration: 60, y: 4 },
+    home: { opacity: 0.9, duration: 60, y: 4 },
+    restore: { opacity: 0.96, duration: 40 },
+    error: { opacity: 0.9, duration: 40 },
 };
 
 const MAIN = "main[data-stalux-route]";
@@ -55,41 +55,50 @@ const ARTICLE = "article.stalux-article";
 // Authored per page type by the theme, not inferred from layout: the article
 // body, archive list, tag cloud, post list, word list, link list, home block.
 const CONTENT = "[data-stalux-motion-content]";
+// The one node a page nominates as its cue stage. Preferred over measuring,
+// because measuring an article column forces a full layout of a document that
+// is tens of thousands of pixels tall, before it has ever been painted.
+const STAGE = "[data-stalux-motion-stage]";
 // A persist node marks the three-column article shell. Those sidebars keep
 // their identity across visits and must never travel with a route cue.
 const PERSIST = "[data-swup-persist]";
 
 interface StageMotion {
     opacity: number;
-    /** Enter offset in px. Positive y enters from below, positive x from the right. */
+    /**
+     * Enter offset in px. Positive y enters from below, positive x from the right.
+     * Zero means a pure cross-fade: the column is replaced in place.
+     */
     distance: number;
     axis: "x" | "y";
     duration: number;
 }
 
 // One entry per route kind, because the components are not interchangeable: an
-// article opens from below, the next article slides in from the side that the
-// reader is heading toward, and going back up to an index pulls away upward.
+// article opens from below and going back up to an index pulls away upward.
+//
+// Article-to-article is the exception: the reader keeps the same shell (sidebars,
+// header) and only the column changes, so the column fades in place instead of
+// travelling. Sliding a 28,000px column sideways made the whole page look like it
+// jerked, and the shell already tells the reader where they are.
 const stageMotions: Record<Exclude<RouteMotionPreset, "none">, StageMotion> = {
-    // Article-to-article keeps a lateral direction: previous/next already says
-    // which way the reading order goes, so the cue repeats that, not a fade.
-    previous: { opacity: 0, distance: -36, axis: "x", duration: 300 },
-    next: { opacity: 0, distance: 36, axis: "x", duration: 300 },
+    previous: { opacity: 0, distance: 0, axis: "x", duration: 150 },
+    next: { opacity: 0, distance: 0, axis: "x", duration: 150 },
     // Entering a different article without a reading-direction trigger.
-    article: { opacity: 0, distance: 40, axis: "y", duration: 300 },
+    article: { opacity: 0, distance: 0, axis: "y", duration: 150 },
     // Reaching an article from any list or the home block.
-    enter: { opacity: 0, distance: 56, axis: "y", duration: 340 },
-    home: { opacity: 0, distance: 48, axis: "y", duration: 320 },
+    enter: { opacity: 0, distance: 56, axis: "y", duration: 170 },
+    home: { opacity: 0, distance: 48, axis: "y", duration: 160 },
     // Leaving an article for the archive or a taxonomy index.
-    up: { opacity: 0, distance: -44, axis: "y", duration: 300 },
+    up: { opacity: 0, distance: -44, axis: "y", duration: 150 },
     // Moving between two taxonomy detail pages.
-    taxonomy: { opacity: 0, distance: 36, axis: "y", duration: 280 },
+    taxonomy: { opacity: 0, distance: 36, axis: "y", duration: 140 },
     // About / links / words: single-panel pages.
-    panel: { opacity: 0, distance: 44, axis: "y", duration: 300 },
-    glide: { opacity: 0, distance: 40, axis: "y", duration: 280 },
+    panel: { opacity: 0, distance: 44, axis: "y", duration: 150 },
+    glide: { opacity: 0, distance: 40, axis: "y", duration: 140 },
     // History traversal restores what the reader already saw.
-    restore: { opacity: 0, distance: -36, axis: "y", duration: 280 },
-    error: { opacity: 0, distance: 28, axis: "y", duration: 260 },
+    restore: { opacity: 0, distance: -36, axis: "y", duration: 140 },
+    error: { opacity: 0, distance: 28, axis: "y", duration: 130 },
 };
 
 const laidOut = (element: HTMLElement): boolean => {
@@ -100,14 +109,17 @@ const laidOut = (element: HTMLElement): boolean => {
 /**
  * The single node a route cue may animate for the current document.
  *
- * Picks the largest authored content stage, so an article moves its own column
- * and an archive moves its list, while sidebars (persisted shells), the header
- * and the footer stay untouched. Falls back to `main` only for pages without a
- * persisted shell inside it.
+ * A page can nominate its stage; only when it does not is the largest authored
+ * content stage measured. Measuring is the fallback, not the rule: on an article
+ * the column is tens of thousands of pixels tall and measuring it forces a full
+ * layout of the incoming document at the exact moment the entry cue needs to
+ * start. Sidebars (persisted shells), the header and the footer never qualify.
  */
 export function getRouteStage(): HTMLElement | null {
     const main = document.querySelector<HTMLElement>(MAIN);
     if (!main?.isConnected) return null;
+    const authored = main.querySelector<HTMLElement>(STAGE);
+    if (authored?.isConnected && !authored.closest(PERSIST)) return authored;
     const candidates: HTMLElement[] = [];
     const article = main.querySelector<HTMLElement>(ARTICLE);
     if (article) candidates.push(article);
@@ -156,7 +168,7 @@ function completion() {
 
 /** A route transition never captures a long article, list, or off-screen heading. */
 export function getRouteMotionTarget(focus: HTMLElement | null): HTMLElement | null {
-    if (!focus?.isConnected || !focus.hasAttribute("data-stalux-motion-focus")) return null;
+    if (!(focus?.isConnected && focus.hasAttribute("data-stalux-motion-focus"))) return null;
     const visible = (element: HTMLElement, maxHeight: number) => {
         const rect = element.getBoundingClientRect();
         return (
@@ -177,17 +189,17 @@ export function getRouteMotionTarget(focus: HTMLElement | null): HTMLElement | n
 }
 
 const regionMotions: Record<Exclude<RouteMotionPreset, "none">, HeadingMotion> = {
-    glide: { opacity: 0.72, duration: 160 },
-    article: { opacity: 0.72, duration: 180, y: 4 },
-    enter: { opacity: 0.72, duration: 180, y: 6 },
-    up: { opacity: 0.8, duration: 160, y: -4 },
-    taxonomy: { opacity: 0.72, duration: 160, x: 6 },
-    previous: { opacity: 0.76, duration: 180, x: -8 },
-    next: { opacity: 0.76, duration: 180, x: 8 },
-    panel: { opacity: 0.76, duration: 160, y: 4 },
-    home: { opacity: 0.76, duration: 180, y: 4 },
+    glide: { opacity: 0.72, duration: 80 },
+    article: { opacity: 0.72, duration: 90, y: 4 },
+    enter: { opacity: 0.72, duration: 90, y: 6 },
+    up: { opacity: 0.8, duration: 80, y: -4 },
+    taxonomy: { opacity: 0.72, duration: 80, x: 6 },
+    previous: { opacity: 0.76, duration: 90, x: -8 },
+    next: { opacity: 0.76, duration: 90, x: 8 },
+    panel: { opacity: 0.76, duration: 80, y: 4 },
+    home: { opacity: 0.76, duration: 90, y: 4 },
     restore: { opacity: 1, duration: 0 },
-    error: { opacity: 0.85, duration: 100 },
+    error: { opacity: 0.85, duration: 50 },
 };
 
 /** Share Swup's actual content animation with background and analytics consumers. */
@@ -281,19 +293,18 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
                         spec.axis === "x"
                             ? `translate3d(${distance}px, 0, 0)`
                             : `translate3d(0, ${distance}px, 0)`;
-                    animation = stage.animate(
-                        {
-                            opacity: [spec.opacity, 1],
-                            transform: [from, "translate3d(0, 0, 0)"],
-                        },
-                        {
-                            duration: mobile ? Math.round(spec.duration * 0.9) : spec.duration,
-                            // Strong ease-out: quick arrival, soft settle. The
-                            // built-in ease-out is too weak to read at this size.
-                            easing: "cubic-bezier(0.23, 1, 0.32, 1)",
-                            fill: "both",
-                        },
-                    );
+                    // A zero distance is a cross-fade in place. Authoring a
+                    // translate3d(0,0,0) would put a 28,000px column on its own
+                    // compositor layer for nothing.
+                    const keyframes: PropertyIndexedKeyframes = { opacity: [spec.opacity, 1] };
+                    if (distance !== 0) keyframes.transform = [from, "translate3d(0, 0, 0)"];
+                    animation = stage.animate(keyframes, {
+                        duration: mobile ? Math.round(spec.duration * 0.9) : spec.duration,
+                        // Strong ease-out: quick arrival, soft settle. The
+                        // built-in ease-out is too weak to read at this size.
+                        easing: "cubic-bezier(0.23, 1, 0.32, 1)",
+                        fill: "both",
+                    });
                 } else {
                     const spec = options?.content ? regionMotions[preset] : headingMotions[preset];
                     const keyframes: PropertyIndexedKeyframes = { opacity: [spec.opacity, 1] };
@@ -306,7 +317,7 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
                         ];
                     }
                     animation = target.animate(keyframes, {
-                        duration: mobile ? (options?.content ? 120 : 80) : spec.duration,
+                        duration: mobile ? (options?.content ? 60 : 40) : spec.duration,
                         easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
                         fill: "both",
                     });

package/src/scripts/route-out.ts

@@ -16,8 +16,7 @@ export async function animateRouteOut(
     const spec = getStageExit(preset);
     const stage = spec ? getRouteStage() : null;
     if (
-        !spec ||
-        !stage ||
+        !(spec && stage) ||
         signal.aborted ||
         document.hidden ||
         typeof stage.animate !== "function" ||
@@ -28,6 +27,10 @@ export async function animateRouteOut(
     const distance = mobile ? Math.round(spec.distance * 0.6) : spec.distance;
     const to =
         spec.axis === "x" ? `translate3d(${distance}px, 0, 0)` : `translate3d(0, ${distance}px, 0)`;
+    // Article-to-article has no distance: the column fades out in place, matching
+    // the entry fade, so the shell stays put and only the content disappears.
+    const keyframes: PropertyIndexedKeyframes = { opacity: [1, 0] };
+    if (distance !== 0) keyframes.transform = ["translate3d(0, 0, 0)", to];
     let animation: Animation | undefined;
     const cancel = () => {
         const active = animation;
@@ -39,18 +42,13 @@ export async function animateRouteOut(
         }
     };
     try {
-        animation = stage.animate(
-            { opacity: [1, 0], transform: ["translate3d(0, 0, 0)", to] },
-            {
-                duration: mobile
-                    ? Math.round(spec.duration * 0.62)
-                    : Math.round(spec.duration * 0.58),
-                // Strong ease-in: the outgoing document accelerates away. An exit
-                // is the one place ease-in is correct; entrances use ease-out.
-                easing: "cubic-bezier(0.4, 0, 1, 1)",
-                fill: "forwards",
-            },
-        );
+        animation = stage.animate(keyframes, {
+            duration: mobile ? Math.round(spec.duration * 0.62) : Math.round(spec.duration * 0.58),
+            // Strong ease-in: the outgoing document accelerates away. An exit
+            // is the one place ease-in is correct; entrances use ease-out.
+            easing: "cubic-bezier(0.4, 0, 1, 1)",
+            fill: "forwards",
+        });
         signal.addEventListener("abort", cancel, { once: true });
         await animation.finished;
         // The stage node survives the swap, so this filled effect is what holds

package/src/scripts/runtime-counter.ts

@@ -4,7 +4,7 @@ import { observeVisibleClock } from "./visible-clock";
 registerPageLifecycle("runtime-counter", () => {
     const container = document.querySelector<HTMLElement>("[data-stalux-buildtime]");
     const counter = document.getElementById("runtime-counter");
-    if (!container || !counter) return;
+    if (!(container && counter)) return;
     const start = new Date(container.dataset.staluxBuildtime ?? "");
     const format =
         container.dataset.staluxRuntimeFormat ?? "{days}d {hours}h {minutes}m {seconds}s";