@xingwangzhe/stalux 1.43.0 → 1.44.0

package/src/styles/module-motion.css

@@ -0,0 +1,174 @@
+/* Module cues share a short, non-spring response. No hidden pre-animation state. */
+:root {
+    --stalux-motion-fast: 140ms;
+    --stalux-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+[data-stalux-control] {
+    transition:
+        color var(--stalux-motion-fast) ease,
+        background-color var(--stalux-motion-fast) ease,
+        border-color var(--stalux-motion-fast) ease,
+        transform var(--stalux-motion-fast) var(--stalux-motion-ease);
+}
+[data-stalux-control]:focus-visible,
+[data-stalux-control]:has(:focus-visible) {
+    outline: 2px solid var(--stalux-accent-color);
+    outline-offset: 4px;
+}
+[data-stalux-control="button"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+}
+[data-stalux-control="avatar"] img {
+    transition: transform 180ms var(--stalux-motion-ease);
+}
+[data-stalux-control="social"] {
+    transition:
+        color 140ms ease,
+        transform 140ms var(--stalux-motion-ease);
+}
+[data-stalux-control="link-card"] img {
+    animation: none;
+    transition:
+        transform 180ms var(--stalux-motion-ease),
+        border-color 140ms ease;
+}
+[data-stalux-module="footer"] a,
+[data-stalux-back-to-top] {
+    transition:
+        color 140ms ease,
+        background-color 140ms ease,
+        opacity 140ms ease;
+}
+[data-stalux-module="badge-group"][open] > div {
+    animation: stalux-module-fade 140ms ease-out;
+}
+pagefind-modal#search dialog[open] {
+    animation: stalux-module-arrive 160ms var(--stalux-motion-ease) !important;
+}
+pagefind-modal dialog::backdrop {
+    background: rgb(0 0 0 / 0.65) !important;
+    animation: stalux-module-backdrop 140ms ease-out !important;
+}
+@keyframes stalux-module-arrive {
+    from {
+        opacity: 0.88;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes stalux-module-fade {
+    from {
+        opacity: 0.88;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes stalux-module-backdrop {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@media (hover: hover) and (pointer: fine) {
+    [data-stalux-control="button"]:hover,
+    [data-stalux-control="social"]:hover,
+    [data-stalux-control="tag-card"]:hover {
+        transform: translateY(-2px);
+    }
+    [data-stalux-control="avatar"]:hover img,
+    [data-stalux-control="link-card"]:hover img {
+        animation: none;
+        transform: rotate(3deg);
+    }
+}
+[data-stalux-control]:active {
+    transform: translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-stalux-control],
+    [data-stalux-control] *,
+    [data-stalux-module],
+    [data-stalux-module] *,
+    [data-ref="stalux-nav-list"],
+    [data-ref="stalux-nav-overlay"],
+    pagefind-modal#search dialog[open],
+    pagefind-modal#search dialog::backdrop {
+        animation: none !important;
+        transition: none !important;
+        scroll-behavior: auto !important;
+    }
+    [data-stalux-control]:is(:hover, :active),
+    [data-stalux-control]:hover img {
+        transform: none !important;
+    }
+    [data-stalux-tag-cards] {
+        display: block;
+    }
+    [data-stalux-tag-canvas] {
+        display: none;
+    }
+}
+@media print {
+    [data-stalux-module],
+    [data-stalux-control],
+    pagefind-modal dialog {
+        animation: none !important;
+        transform: none !important;
+    }
+}
+
+/* A location marker fades over the surface without repainting text shadows. */
+[data-stalux-module="word"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--accent-20p);
+    opacity: 0;
+    pointer-events: none;
+}
+[data-stalux-module="word"]:is(:target, [data-glow])::after {
+    animation: stalux-module-locate 1200ms ease-out;
+}
+@keyframes stalux-module-locate {
+    from {
+        opacity: 0.4;
+    }
+    to {
+        opacity: 0;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-stalux-module="word"]::after {
+        animation: none !important;
+    }
+}
+
+@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
+    pagefind-modal#search dialog[open] {
+        animation: stalux-module-fade 120ms ease-out !important;
+    }
+}
+[data-stalux-weather][data-weather-state="ready"] [data-weather-output] {
+    animation: stalux-module-fade 140ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-stalux-weather] [data-weather-output] {
+        animation: none !important;
+    }
+}
+
+@media print {
+    [data-stalux-module="word"]::after {
+        animation: none !important;
+    }
+}

package/src/styles/motion.css

@@ -7,8 +7,8 @@
     }
 }
 
-/* Swup's JS plugin animates one visible heading through route-motion.ts.
-   There is no full-page snapshot, waiting body, stagger or native VT layer. */
+/* Swup animates one bounded introductory region through route-motion.ts.
+   Long documents stay visible; the shell is never part of an outgoing layer. */
 [data-stalux-home-content] {
     display: flex;
     flex-direction: column;
@@ -195,22 +195,3 @@
         }
     }
 }
-
-@layer components {
-    @keyframes stalux-word-word-glow {
-        0% {
-            box-shadow:
-                0 0 30px var(--accent-50p),
-                0 0 80px var(--accent-30p),
-                var(--shadow-lg);
-            transform: scale(1.02);
-        }
-        100% {
-            box-shadow:
-                0 0 20px var(--accent-40p),
-                0 0 60px var(--accent-20p),
-                var(--shadow-lg);
-            transform: scale(1);
-        }
-    }
-}

package/src/utils/route-motion-policy.ts

@@ -55,7 +55,11 @@ export function getRouteMotionPreset(context: MotionContext): RouteMotionPreset
     }
     if (target === "article") return "enter";
     if (target === "about" || target === "links" || target === "words") return "panel";
-    if (target === "tags-detail" || target === "categories-detail") return "taxonomy";
+    if (target === "tags-detail" || target === "categories-detail") {
+        if (source === target) return "taxonomy";
+        if (source === "tags-detail" || source === "categories-detail") return "glide";
+        return "enter";
+    }
     if (
         (source === "article" &&
             (target === "archive" || target === "tags-index" || target === "categories-index")) ||

package/src/utils/toc-scrollspy.ts

@@ -55,7 +55,26 @@ export function initTocScrollSpy(activeClass: string): (() => void) | undefined
         activeLink = link;
         if (link && !sidebarHovered) {
             link.classList.add(activeClass);
-            link.scrollIntoView({ block: "nearest", behavior: "smooth" });
+            // Scroll only the TOC pane. scrollIntoView also scrolls the page,
+            // fighting anchor navigation and the reader's wheel/touch input.
+            const scrollPane = sidebar?.closest<HTMLElement>("[data-stalux-scroll-pane]");
+            if (scrollPane) {
+                const item = link.getBoundingClientRect();
+                const pane = scrollPane.getBoundingClientRect();
+                const delta =
+                    item.top < pane.top
+                        ? item.top - pane.top
+                        : item.bottom > pane.bottom
+                          ? item.bottom - pane.bottom
+                          : 0;
+                if (delta)
+                    scrollPane.scrollTo({
+                        top: scrollPane.scrollTop + delta,
+                        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches
+                            ? "instant"
+                            : "smooth",
+                    });
+            }
         } else if (link) {
             // 用户正在操作侧边栏时只高亮，不自动滚动
             link.classList.add(activeClass);
@@ -107,19 +126,7 @@ export function initTocScrollSpy(activeClass: string): (() => void) | undefined
 
     for (const h of headings) observer.observe(h);
 
-    // 拦截 TOC 锚点点击，替换为平滑滚动
-    for (const link of tocLinks) {
-        link.addEventListener(
-            "click",
-            (event) => {
-                event.preventDefault();
-                const id = link.getAttribute("href")?.replace("#", "");
-                const target = id ? document.getElementById(id) : null;
-                target?.scrollIntoView({ behavior: "smooth", block: "start" });
-            },
-            { signal: controller.signal },
-        );
-    }
+    // Swup owns anchor scrolling, history and interruption for TOC links too.
 
     return () => {
         controller.abort();