@xingwangzhe/stalux 1.40.0 → 1.40.1

package/README.md

@@ -18,7 +18,7 @@ Standalone images written as `![Image description](url)` receive a `figure` and
 
 Code blocks default to the single `dark-plus` theme, with system color-scheme switching and theme selectors disabled. To opt into another theme or switching behavior, explicitly override `themes`, `useDarkModeMediaQuery`, and `themeCssSelector` through `expressiveCode`. This only changes generated code styles and adds no telemetry.
 
-Route changes use native CSS View Transitions for one visible semantic heading in the incoming page. The policy covers every theme route category: normal effects take 100–180ms, with short 100–120ms fades on mobile. Entering an article, returning to a list, filtering categories or tags, explicit previous/next article controls, and returning home receive hints that follow reading intent. History traversal restores the existing scroll position; offscreen headings remain out of view. Reduced motion, browser-provided history gestures and same-page anchors add no visible VT animation. Standalone HTML keeps native navigation. See the [1.40.0 transition policy](https://github.com/xingwangzhe/stalux/blob/v1.40.0/docs/view-transitions-1.40.0.md).
+Route changes use native CSS View Transitions for one visible semantic heading in the incoming page. The policy covers every theme route category: normal effects take 100–180ms, with short 100–120ms fades on mobile. Entering an article, returning to a list, filtering categories or tags, explicit previous/next article controls, and returning home receive hints that follow reading intent. History traversal restores the existing scroll position; offscreen headings remain out of view. Reduced motion, browser-provided history gestures and same-page anchors add no visible VT animation. Standalone HTML keeps native navigation. See the [1.40.0 transition policy](https://github.com/xingwangzhe/stalux/blob/v1.40.1/docs/view-transitions-1.40.1.md).
 
 The sticky header stays at the top while the body grows with long content; the persisted header and footer stay in place during navigation. Text is immediately clear, and the incoming heading is measured once after Astro swaps the document and restores scrolling. Astro continues to own document/font preparation, history, scrolling and page-script lifecycle. Shared motion state settles when the native transition finishes or is canceled. CSS animation duration is reported separately from total navigation time, which includes networking, layout and browser settlement.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.40.0",
+    "version": "1.40.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/scripts/view-transitions.ts

@@ -94,15 +94,19 @@ function preserveHeaderMetrics(nextDocument: Document): void {
 const transitionWindow = window as TransitionWindow;
 if (!transitionWindow.__STALUX_VT_LISTENER__) {
     transitionWindow.__STALUX_VT_LISTENER__ = true;
+    let pendingNavigation = 0;
+    let swappedNavigation = 0;
 
     // A current-page link is not a page replacement. Intercept before Astro's
     // delegated handler, but keep propagation for menu cleanup and click tracking.
+    // During preparation, Astro must receive it to cancel an incoming route.
     // Hash changes, explicit reloads, downloads and modified/new-tab clicks keep
     // their native behavior.
     document.addEventListener(
         "click",
         (event) => {
             if (
+                pendingNavigation !== 0 ||
                 event.defaultPrevented ||
                 event.button !== 0 ||
                 event.metaKey ||
@@ -148,6 +152,12 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
     document.addEventListener("astro:before-preparation", (event) => {
         const navigation = event as unknown as NavigationEvent;
         const current = ++generation;
+        pendingNavigation = current;
+        const cancelPreparation = () => {
+            if (current !== generation) return;
+            pendingNavigation = 0;
+            clearNavigationState();
+        };
         motion?.cancel();
         // Only the incoming heading animates. Drop any prior marker without
         // measuring/capturing a hidden outgoing title or flushing its layout.
@@ -166,25 +176,21 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         });
         pendingBrowserMotion = false;
         setNavigationState(navigation, preset);
-        navigation.signal.addEventListener(
-            "abort",
-            () => {
-                if (current === generation) clearNavigationState();
-            },
-            { once: true },
-        );
+        navigation.signal.addEventListener("abort", cancelPreparation, { once: true });
+        if (navigation.signal.aborted) cancelPreparation();
         queueMicrotask(() => {
-            if (event.defaultPrevented && current === generation) clearNavigationState();
+            if (event.defaultPrevented) cancelPreparation();
         });
         const loader = navigation.loader;
         navigation.loader = async () => {
             try {
                 await loader();
-                if (!event.defaultPrevented) {
+                if (event.defaultPrevented) cancelPreparation();
+                else {
                     await prepareNavigationFont(navigation.newDocument, navigation.signal);
                 }
             } catch (error) {
-                if (current === generation) clearNavigationState();
+                cancelPreparation();
                 throw error;
             }
         };
@@ -194,6 +200,7 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
         const navigation = event as unknown as NavigationEvent;
         if (navigation.signal.aborted) return;
         const current = generation;
+        swappedNavigation = current;
         preserveHeaderMetrics(navigation.newDocument);
         // Astro replaces the root attributes during swap. Carry state into the
         // new document; CSS keyframes read these data-* attributes to pick their
@@ -219,6 +226,8 @@ if (!transitionWindow.__STALUX_VT_LISTENER__) {
     });
 
     document.addEventListener("astro:page-load", () => {
+        // A previous route's scripts can finish while a newer loader is pending.
+        if (swappedNavigation === generation) pendingNavigation = 0;
         setRouteState(window.location.pathname);
     });