@xingwangzhe/stalux 1.42.0 → 1.43.1

package/README.md

@@ -18,9 +18,9 @@ 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 with CSS animations on the reading and list content; sidebars, navigation, footer and background remain stationary. The policy covers every theme route category: previous/next articles slide horizontally in opposite directions, home and information pages use gentle perspective turns, words use a small rotation, and taxonomy details enter vertically. Desktop and mobile both retain spatial motion: article-to-article switching lasts 260ms, while other route animations take 100–180ms. History traversal uses a shorter, smaller directional slide while Astro restores the reading position. Reduced motion, browser-provided history gestures and same-page anchors add no visible VT animation. Standalone HTML keeps native navigation. See the [1.41.0 transition policy and performance boundaries](https://github.com/xingwangzhe/stalux/blob/v1.41.0/docs/view-transitions-1.41.0.md).
+Swup owns soft navigation and transition timing. Astro renders the static documents; the browser runtime replaces only `main[data-stalux-route]`, keeping the header, footer, scroll sentinel and two background layers alive. The incoming visible heading receives a brief opacity or directional hint selected by the route policy: entering an article can move 6px vertically, explicit previous/next article links use opposite 8px horizontal hints, and returning to a list uses a 4px upward hint. Other article links and taxonomy changes fade without inventing a reading direction. Desktop effects last 80–140ms; phones use an 80ms fade without translation. The article body and long lists stay immediately readable. Reduced motion and browser-provided history gestures skip content motion; same-page anchors use their scrolling behavior and same-URL clicks preserve the reading position. Standalone HTML and exported data use document navigation. See the [Swup transition architecture and route policy](docs/view-transitions-swup.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.
+The runtime uses Swup's Head, Accessibility, Preload, Scroll and JS plugins with Stalux lifecycle handlers. It waits for incoming stylesheets and gives the destination font a bounded 150ms head start, disposes old interactions before replacement, loads first-seen page scripts, then dispatches the Astro-compatible page lifecycle events used by comments, counters, tag clouds and WebMCP. Backgrounds decode independently and crossfade after the content animation finishes; stale navigation work cannot replace the current background. History positions are restored by the Swup runtime, including reduced-motion visits. This requires no new configuration or telemetry. Animation duration describes the effect itself, not total navigation time or a measured performance improvement.
 
 ---
 
@@ -136,7 +136,7 @@ Processed pages are cached under `node_modules/.astro/stalux-page-output/`. The
 
 ### Visibility-aware loading and updates
 
-The desktop tag cloud loads dynamically near the viewport. Switching to mobile, leaving the viewport or hiding the document destroys it and stops animation scheduling; becoming visible recreates it. Tag clicks use Astro client navigation. Clocks and the footer runtime update only while visible, and the date changes only on a new day. Comments load within half a viewport (capped at 400px). Tag groups, archive months and category cards retain static HTML while deferring offscreen rendering.
+The desktop tag cloud loads dynamically near the viewport. Switching to mobile, leaving the viewport or hiding the document destroys it and stops animation scheduling; becoming visible recreates it. Tag clicks use the same Swup navigation as ordinary internal links. Clocks and the footer runtime update only while visible, and the date changes only on a new day. Comments load within half a viewport (capped at 400px). Tag groups, archive months and category cards retain static HTML while deferring offscreen rendering.
 
 ### Modern JavaScript
 
@@ -195,7 +195,7 @@ id: head
 bingClarityId: "YOUR_CLARITY_PROJECT_ID"
 ```
 
-Google Analytics, Clarity, and Umami use low-priority native asynchronous scripts. Each SDK loads once per session, and failures do not block reading or navigation. Vercount rebinds visible counters after each `astro:page-load`. GA captures each URL, title, and referrer, then sends pageviews in visit order through separate background tasks after the native transition releases rendering, the content animation is installed and a paint has been yielded. A bounded timer handles task starvation; hiding or leaving the document flushes pending views immediately. The SDK still runs on the main thread; this scheduling reduces synchronous work on the route's first frame. Umami disables automatic pageviews while retaining click tracking and captures page information before the SDK resolves so rapid navigation cannot mix visits. An existing older runtime or legacy Partytown session performs one full reload when it encounters the new runtime to prevent duplicate listeners and tracking.
+Google Analytics, Clarity, and Umami use low-priority native asynchronous scripts. Each SDK loads once per session, and failures do not block reading or navigation. Vercount rebinds visible counters after each `astro:page-load`. GA captures each URL, title, and referrer, then sends pageviews in visit order through separate background tasks after the shared Swup content-motion gate settles and a paint has been yielded. A bounded timer handles task starvation; hiding or leaving the document flushes pending views immediately. The SDK still runs on the main thread; this scheduling reduces synchronous work on the route's first frame. Umami disables automatic pageviews while retaining click tracking and captures page information before the SDK resolves so rapid navigation cannot mix visits. An existing older runtime or legacy Partytown session performs one full reload when it encounters the new runtime to prevent duplicate listeners and tracking.
 
 For Google Analytics, turn off **Page changes based on browser history events** under **Admin → Data streams → Enhanced measurement → Page views → Advanced settings**. Stalux sets `send_page_view: false` and sends the URL and title for each navigation explicitly. GA's history tracking must also be disabled in the property to prevent duplicate soft-navigation pageviews. Other enhanced measurement options can remain enabled. See [Google's pageview documentation](https://developers.google.com/analytics/devguides/collection/ga4/views).
 
@@ -284,7 +284,7 @@ This is a build-time metadata field. It does not create a contact endpoint or ex
 
 The root reserves scrollbar space and uses explicit line height. The homepage typewriter reserves the maximum wrapped height of its complete messages and keeps the text origin fixed; clocks reserve line boxes and use tabular digits. Existing typing, cursor and route animations remain enabled. No additional configuration is required.
 
-A wrapper around Astro ClientRouter's `astro:before-preparation` loader warms the destination body font before the DOM swap without installing it on the old page. It waits at most one second; failures, timeout and superseding navigation do not block the route. Initial loads on slow networks may still show the system fallback. Content authors must reserve dimensions for remote images and third-party embeds. Reduced-motion and print behavior remain supported.
+Swup's pre-replacement preparation warms the destination body font without installing it on the old page. The font receives at most 150ms of preparation time; failure, timeout and superseding navigation release that font wait. Incoming stylesheets and first-seen page modules have separate bounded loading waits so the next page can initialize its interactions. Initial loads on slow networks may still show the system fallback. Content authors must reserve dimensions for remote images and third-party embeds. Reduced-motion and print behavior remain supported.
 
 See [style maintenance](docs/STYLING.md) and [lifecycle and static interfaces](docs/RUNTIME.md). Astro development documentation is available through the [official MCP endpoint](https://mcp.docs.astro.build/mcp); `.codex/config.toml`, `.mcp.json` and `AGENTS.md` record the project setup. This development MCP is separate from the blog's browser WebMCP tools.
 
@@ -370,3 +370,5 @@ og:image: /images/custom-social-card.png
 `@takumi-rs/core` renders a static 1200×630 WebP at `/og/<metadata-hash>.webp` using the bundled LXGW WenKai font. Cards include the title, summary, site identity, author, category, accent color and date in the site timezone. No renderer JavaScript is sent to the browser. Static `og:image`, `twitter:image` and BlogPosting `image` use the same absolute URL; generated images also declare dimensions and MIME type. Articles use `summary_large_image`. A second `og:image` points to a PNG fallback; platforms choose which format they can read. WebP quality is 86; AVIF is not the default.
 
 Local covers are read from the final `publicDir`. Remote covers are requested by the build machine, with an 8-second timeout and an 8 MiB limit (remote bytes are cached for 24 hours); unreadable or undecodable artwork emits a warning and falls back to a title card. No remote image-generation service is used. WebP and PNG outputs are cached in `stalux-social-cards/` under Astro's cache directory and copied into each build output. Explicit sharing images are fetched by social platforms, so they must be publicly accessible images. Platforms maintain their own preview caches and may not refresh an existing share immediately after deployment.
+
+Content transitions follow Fuwari’s fade and vertical movement: keep the old content readable until destination assets are ready, fade it out over 140ms, then reveal the new content over 220ms (180ms on phones). The header and background persist. History restores the reading position without an outgoing animation. Same-page anchors use interruptible native smooth scrolling; reduced motion uses instant positioning. Cross-page scroll resets happen while content is hidden. No configuration is required.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.42.0",
+    "version": "1.43.1",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -110,6 +110,11 @@
         "@mcp-b/webmcp-polyfill": "^5.1.0",
         "@microsoft/clarity": "1.0.2",
         "@pagefind/component-ui": "^1.5.2",
+        "@swup/a11y-plugin": "^5.2.1",
+        "@swup/head-plugin": "^2.3.1",
+        "@swup/js-plugin": "^3.2.0",
+        "@swup/preload-plugin": "^3.2.12",
+        "@swup/scroll-plugin": "^4.0.0",
         "@takumi-rs/core": "2.17.1",
         "@waline/client": "^3.16.1",
         "@xingwangzhe/cjk-font-split-native": "^0.4.10",
@@ -127,6 +132,7 @@
         "photoswipe": "^5.4.4",
         "satteri": "^0.10.5",
         "simple-icons": "^16.35.0",
+        "swup": "4.10.0",
         "temml": "^0.14.0",
         "yaml": "^2.9.1"
     },

package/src/components/stalux/archives/archivesList.astro

@@ -127,9 +127,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
 
 <script>
 import { mountArchiveDescriptions } from "../../../scripts/archive-descriptions";
-import { mountArchiveReveal } from "../../../scripts/archive-reveal";
 import { registerPageLifecycle } from "../../../scripts/page-runtime";
 
-registerPageLifecycle("archive-reveal", mountArchiveReveal);
 registerPageLifecycle("archive-descriptions", mountArchiveDescriptions);
 </script>

package/src/components/stalux/archives/toArchive.astro

@@ -9,10 +9,6 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 ---
 
-<div
-    id={"stalux-to-archive-archs"}
-    transition:name="stalux-home-archive-link"
-    transition:animate="slide"
->
+<div id={"stalux-to-archive-archs"}>
     <a href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
 </div>

package/src/components/stalux/common/Typewriter.astro

@@ -10,13 +10,7 @@ const texts = normalizeMessages(messages);
 ---
 
 {texts.length > 0 && (
-    <div
-        class={className}
-        data-stalux-typewriter
-        data-messages={JSON.stringify(texts)}
-        transition:name="stalux-home-typewriter"
-        transition:animate="fade"
-    >
+    <div class={className} data-stalux-typewriter data-messages={JSON.stringify(texts)}>
         <span class="stalux-typewriter-accessible">{texts.join(", ")}</span>
         <span class="stalux-typewriter-reserve" aria-hidden="true">
             {texts.map((text) => (

package/src/components/stalux/common/author.astro

@@ -17,12 +17,7 @@ const isHomePage = Astro.url.pathname === "/";
 const navigationHref = isHomePage ? "/about" : "/";
 ---
 
-<article
-    class="stalux-author stalux-u-flex stalux-u-justify-center stalux-u-flex-col"
-    transition:persist-props
-    transition:name={isHomePage ? "stalux-home-author" : undefined}
-    transition:animate={isHomePage ? "fade" : undefined}
->
+<article class="stalux-author stalux-u-flex stalux-u-justify-center stalux-u-flex-col">
     <figure
         class={`stalux-author-figure ${props.iscolum ? "stalux-author-figure-column stalux-u-flex-col" : ""}`}
     >

package/src/components/stalux/common/date.astro

@@ -1,14 +1,4 @@
----
-const isHomePage = Astro.url.pathname === "/";
----
-
-<div
-    id={"stalux-date-date-time"}
-    class="date-time"
-    transition:persist-props
-    transition:name={isHomePage ? "stalux-home-date-time" : undefined}
-    transition:animate={isHomePage ? "fade" : undefined}
->
+<div id={"stalux-date-date-time"} class="date-time">
     <time id={"stalux-date-date"} data-ref="date" datetime=""></time>
     <time id={"stalux-date-time"} data-ref="time" datetime=""></time>
 </div>

package/src/components/stalux/layout/PageHeading.astro

@@ -8,20 +8,11 @@ const { heading, description } = Astro.props;
 ---
 
 <>
-    <h1
-        class="stalux-page-title stalux-u-text-center"
-        data-stalux-motion-focus
-        transition:animate="none"
-    >
+    <h1 class="stalux-page-title stalux-u-text-center" data-stalux-motion-focus>
         {heading}
     </h1>
     {description && (
-        <div
-            class="stalux-page-description stalux-u-text-center"
-            data-stalux-motion-content
-            transition:name="stalux-page-description"
-            transition:animate="none"
-        >
+        <div class="stalux-page-description stalux-u-text-center" data-stalux-motion-content>
             {description}
         </div>
     )}

package/src/components/stalux/layout/footer.astro

@@ -51,12 +51,7 @@ const totalWordCount = await getTotalWordCount(Astro.logger);
 const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "zh-CN");
 ---
 
-<footer
-    class="stalux-footer stalux-u-w-full stalux-u-text-center"
-    data-stalux-font-group="footer"
-    transition:persist="stalux-site-footer"
-    transition:persist-props
->
+<footer class="stalux-footer stalux-u-w-full stalux-u-text-center" data-stalux-font-group="footer">
     <div class="stalux-footer-content stalux-u-flex stalux-u-flex-col">
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (

package/src/components/stalux/layout/head.astro

@@ -1,7 +1,6 @@
 ---
 import { Font } from "astro:assets";
 import { getCollection } from "astro:content";
-import { ClientRouter } from "astro:transitions";
 // Emit a stable asset even while the search component JavaScript stays lazy.
 // The closed search dialog does not need to block the page's first paint.
 import pagefindStyles from "virtual:stalux-search-style";
@@ -54,7 +53,6 @@ const ldJson = JSON.stringify(seo.schema).replace(/<\//g, "<\\/");
 
 <head>
     <meta charset="utf-8">
-    <ClientRouter fallback="swap" />
     <SEO
         title={seo.title}
         description={seo.description}

package/src/components/stalux/links/socialMedia.astro

@@ -17,8 +17,6 @@ import {
 const configEntries = await getCollection("config");
 const mediaLinksSection = getMediaLinksData(configEntries);
 const mediaLinks = mediaLinksSection?.items ?? [];
-const isPostPage = Astro.url.pathname.startsWith("/posts/");
-const isHomePage = Astro.url.pathname === "/";
 
 // 静态图标映射表：新增图标时只需添加对应的 simple-icons 导入和映射
 const iconMap: Record<string, SimpleIcon> = {
@@ -35,14 +33,7 @@ function getIconByTitle(iconName: string): SimpleIcon | undefined {
 }
 ---
 
-<nav
-    class="stalux-social"
-    transition:persist-props
-    transition:name={isHomePage ? "stalux-home-social" : undefined}
-    transition:animate={isHomePage ? "fade" : undefined}
-    aria-label="Social media"
-    data-stalux-social-animate={String(!isPostPage)}
->
+<nav class="stalux-social" aria-label="Social media">
     <ul>
         {mediaLinks.map((item) => {
             const icon = item.icon ? getIconByTitle(item.icon) : undefined;

package/src/components/stalux/posts/ArticleSummary.astro

@@ -4,18 +4,12 @@ interface Props {
     label: string;
     transitionName: string;
 }
-const { description, label, transitionName } = Astro.props;
+const { description, label } = Astro.props;
 const summary = description?.trim();
 ---
 
 {summary && (
-    <aside
-        class="stalux-article-summary"
-        data-stalux-motion-content
-        aria-label={label}
-        transition:name={transitionName}
-        transition:animate="none"
-    >
+    <aside class="stalux-article-summary" data-stalux-motion-content aria-label={label}>
         <p class="stalux-article-summary-label">{label}</p>
         <p class="stalux-article-summary-text">{summary}</p>
     </aside>

package/src/components/stalux/posts/PostTaxonomy.astro

@@ -43,15 +43,10 @@ const cfg = {
 }[kind];
 ---
 
-<nav
-    class="stalux-post-taxonomy-container"
-    transition:name={cfg.containerName}
-    transition:animate="none"
-    aria-label={title ?? cfg.heading}
->
+<nav class="stalux-post-taxonomy-container" aria-label={title ?? cfg.heading}>
     <h3 class="stalux-post-taxonomy-title">{title ?? cfg.heading}</h3>
     {items.length > 0 ? (
-        <div class={cfg.listClass} transition:name={cfg.contentName} transition:animate="fade">
+        <div class={cfg.listClass}>
             {items.map((item) => (
                 <a
                     href={`${cfg.prefix}${item}/`}
@@ -63,12 +58,6 @@ const cfg = {
             ))}
         </div>
     ) : (
-        <div
-            class="stalux-post-taxonomy-empty"
-            transition:name={cfg.contentName}
-            transition:animate="fade"
-        >
-            {cfg.empty}
-        </div>
+        <div class="stalux-post-taxonomy-empty">{cfg.empty}</div>
     )}
 </nav>

package/src/components/stalux/posts/postCC.astro

@@ -20,13 +20,13 @@ const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as R
     unknown
 >;
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
-const { title, author, url, cc = "CC-BY-NC-SA-4.0", transitionName } = Astro.props;
+const { title, author, url, cc = "CC-BY-NC-SA-4.0" } = Astro.props;
 
 const licenseLink = buildCCLink(cc);
 const licenseName = buildCCName(cc, t);
 ---
 
-<div class="stalux-license-box" transition:name={transitionName} transition:animate="none">
+<div class="stalux-license-box">
     <div class="stalux-license-content">
         <p class="stalux-license-title">{title}</p>
         <p class="stalux-license-author">{t("post.author")}{author}</p>

package/src/components/stalux/posts/postCard.astro

@@ -4,7 +4,6 @@ import { getCollection } from "astro:content";
 
 import { getSiteData } from "@utils/config-utils";
 import { toMachineDateTime } from "@utils/semantic-time";
-import { getPostTitleTransitionName } from "@utils/view-transitions";
 
 interface Props {
     post: CollectionEntry<"posts">;
@@ -42,10 +41,7 @@ const description = post.data.desc || "";
                 </div>
             </a>
         )}
-        <h2
-            class="stalux-card-post-title"
-            transition:name={priority ? getPostTitleTransitionName(post.data.abbrlink) : undefined}
-        >
+        <h2 class="stalux-card-post-title">
             <a href={`/posts/${post.data.abbrlink}/`} class="a-none" data-astro-prefetch="viewport">
                 {post.data.title}
             </a>

package/src/components/stalux/posts/postContent.astro

@@ -38,26 +38,13 @@ const exportMd = Boolean(promoteConfig?.export_md) && !isAboutPage;
 const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "";
 ---
 
-<article
-    class="stalux-article"
-    data-stalux-gallery={props.hasImage ? "true" : undefined}
-    transition:name={props.transitionName ?? "stalux-article-container"}
-    transition:animate="none"
->
+<article class="stalux-article" data-stalux-gallery={props.hasImage ? "true" : undefined}>
     <!-- Article Header -->
-    <header
-        class="stalux-post-article-header"
-        transition:name={`${transitionPrefix}-header`}
-        transition:animate="fade"
-    >
+    <header class="stalux-post-article-header">
         <h1 class="stalux-post-title" data-stalux-motion-focus>
             {props.title}
         </h1>
-        <div
-            class="stalux-post-metadata"
-            transition:name={`${transitionPrefix}-metadata`}
-            transition:animate="none"
-        >
+        <div class="stalux-post-metadata">
             {props.date && (
                 <time
                     class="stalux-post-meta-item"
@@ -78,11 +65,7 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
                 </time>
             )}
         </div>
-        <div
-            class="stalux-post-page-stats"
-            transition:name={`${transitionPrefix}-stats`}
-            transition:animate="none"
-        >
+        <div class="stalux-post-page-stats">
             {(props.readingMinutes ?? 0) > 0 && (
                 <span class="stalux-post-reading-time">
                     {t("post.readingTime")}
@@ -131,8 +114,6 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         data-pagefind-body
         data-stalux-post-id={props.postId === undefined ? undefined : String(props.postId)}
         data-pagefind-filter={props.postId === undefined ? undefined : "post[data-stalux-post-id]"}
-        transition:name={`${transitionPrefix}-body`}
-        transition:animate="none"
     >
         <slot />
     </section>

package/src/components/stalux/posts/postLeft.astro

@@ -3,34 +3,16 @@ import "../../../styles/generated-article.css";
 import SocialMedia from "@components/stalux/links/socialMedia.astro";
 import PostAuthor from "@components/stalux/posts/postAuthor.astro";
 import RandomPost from "@components/stalux/posts/randomPost.astro";
-
-import { getSidebarAnimation } from "@utils/view-transitions";
 ---
 
-<aside
-    class="stalux-sidebar"
-    transition:name="left-sidebar"
-    transition:animate={getSidebarAnimation("left")}
->
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-left-author"
-        transition:animate="fade"
-    >
+<aside class="stalux-sidebar">
+    <div class="stalux-sidebar-container">
         <PostAuthor />
     </div>
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-left-social"
-        transition:animate="fade"
-    >
+    <div class="stalux-sidebar-container">
         <SocialMedia />
     </div>
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-left-random"
-        transition:animate="fade"
-    >
+    <div class="stalux-sidebar-container">
         <RandomPost />
     </div>
 </aside>

package/src/components/stalux/posts/postRight.astro

@@ -5,8 +5,6 @@ import Weather from "@components/stalux/common/Weather.astro";
 import PostTaxonomy from "@components/stalux/posts/PostTaxonomy.astro";
 import PostToc from "@components/stalux/posts/postToc.astro";
 
-import { getSidebarAnimation } from "@utils/view-transitions";
-
 interface Props {
     headings?: Array<{ depth: number; slug: string; text: string }>;
     tags?: string[];
@@ -16,38 +14,18 @@ interface Props {
 const { headings = [], tags = [], categories = [] } = Astro.props;
 ---
 
-<aside
-    class="stalux-sidebar-right"
-    transition:name="right-sidebar"
-    transition:animate={getSidebarAnimation("right")}
->
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-right-date"
-        transition:animate="none"
-    >
+<aside class="stalux-sidebar-right" data-stalux-scroll-pane>
+    <div class="stalux-sidebar-container">
         <PostDate />
         <Weather />
     </div>
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-right-toc"
-        transition:animate="none"
-    >
+    <div class="stalux-sidebar-container">
         <PostToc headings={headings} />
     </div>
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-right-tags"
-        transition:animate="none"
-    >
+    <div class="stalux-sidebar-container">
         <PostTaxonomy kind="tag" items={tags} />
     </div>
-    <div
-        class="stalux-sidebar-container"
-        transition:name="stalux-article-right-categories"
-        transition:animate="none"
-    >
+    <div class="stalux-sidebar-container">
         <PostTaxonomy kind="category" items={categories} />
     </div>
 </aside>

package/src/components/stalux/posts/postToc.astro

@@ -29,15 +29,10 @@ const tocItems = headings
     }));
 ---
 
-<nav
-    transition:name="toc-container"
-    transition:animate="none"
-    data-toc-active-class="stalux-toc-active"
-    aria-label={t("taxonomy.toc")}
->
+<nav data-toc-active-class="stalux-toc-active" aria-label={t("taxonomy.toc")}>
     <h3 class="stalux-toc-title">{title}</h3>
     {tocItems.length > 0 ? (
-        <ul class="stalux-toc-list" transition:name="toc-content" transition:animate="fade">
+        <ul class="stalux-toc-list">
             {tocItems.map((heading) => (
                 <li>
                     <a
@@ -51,9 +46,7 @@ const tocItems = headings
             ))}
         </ul>
     ) : (
-        <div class="stalux-toc-empty" transition:name="toc-content" transition:animate="fade">
-            {t("taxonomy.noToc")}
-        </div>
+        <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
     )}
 </nav>
 

package/src/components/stalux/posts/randomPost.astro

@@ -19,7 +19,6 @@ const { count = 5, title = t("randomPost.title") } = Astro.props;
 
 <aside
     class="stalux-random-container"
-    transition:persist-props
     aria-label={t("randomPost.title")}
     data-stalux-random-posts
     data-count={count}

package/src/components/stalux/tags/tagHeader.astro

@@ -27,11 +27,7 @@ if (typeKey === "category" || typeKey === "categories" || typeKey === "分类")
 }
 ---
 
-<header
-    class="stalux-tag-header"
-    transition:name="stalux-taxonomy-page-header-shell"
-    transition:animate="none"
->
+<header class="stalux-tag-header">
     <h1 class="stalux-tag-page-title" data-stalux-motion-focus>
         <span class="stalux-tag-category-icon">
             <svg

package/src/index.ts

@@ -163,7 +163,26 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                             config.build.inlineStylesheets === "always" ? "always" : "never",
                     },
                     vite: {
-                        optimizeDeps: { exclude: ["@mcp-b/webmcp-polyfill"] },
+                        optimizeDeps: {
+                            exclude: ["@mcp-b/webmcp-polyfill"],
+                            // Discover lazy page features before the first visit:
+                            // Vite re-optimization would otherwise reload the
+                            // entire document midway through a Swup navigation.
+                            include: [
+                                "swup",
+                                "@swup/a11y-plugin",
+                                "@swup/head-plugin",
+                                "@swup/js-plugin",
+                                "@swup/preload-plugin",
+                                "@swup/scroll-plugin",
+                                "@microsoft/clarity",
+                                "@pagefind/component-ui",
+                                "@waline/client",
+                                "@xingwangzhe/tags-cloud",
+                                "photoswipe",
+                                "photoswipe/lightbox",
+                            ],
+                        },
                         css: { lightningcss: { targets: modernCssTargets } },
                         build: {
                             target: config.vite.build?.target ?? "esnext",