@xingwangzhe/stalux 1.46.2 → 1.46.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.46.2",
+    "version": "1.46.5",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -91,7 +91,7 @@
         "knip": "knip",
         "verify:build": "node scripts/verify-build.ts",
         "validate": "bun run styles:build && bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
-        "prepare": "git config core.hooksPath scripts/git-hooks",
+        "prepare": "sh -c 'if [ -d scripts/git-hooks ] && git rev-parse --git-dir >/dev/null 2>&1; then git config core.hooksPath scripts/git-hooks; fi'",
         "dev:debug": "STALUX_DEBUG=1 astro dev --verbose",
         "build:debug": "STALUX_DEBUG=1 astro build --timings --verbose && node scripts/verify-build.ts",
         "styles:build": "node scripts/build-styles.ts && node scripts/build-style-names.ts",
@@ -145,6 +145,7 @@
         "@unocss/astro": "^66.11.0",
         "@vitest/coverage-v8": "^5.0.4",
         "astro": "^7.4.2",
+        "happy-dom": "^21.0.4",
         "knip": "^6.41.0",
         "sharp": "0.35.5",
         "sonda": "^0.14.0",

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

@@ -56,7 +56,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
     }));
 ---
 
-<section class="stalux-archive-container" data-stalux-motion-content>
+<section class="stalux-archive-container" data-stalux-motion-content data-stalux-motion-stage>
     <div class="stalux-archive-page-header">
         <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (

package/src/components/stalux/categories/categoriesList.astro

@@ -7,7 +7,12 @@ import { getCategoryCountList } from "@utils/collections-stats";
 const categoryList = await getCategoryCountList(Astro.logger);
 ---
 
-<ul class="stalux-categories" data-stalux-motion-content data-stalux-reveal>
+<ul
+    class="stalux-categories"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+    data-stalux-reveal
+>
     {categoryList.map((category) => (
         <li data-stalux-reveal-item>
             <CategoriesCard category={category} />

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

@@ -31,7 +31,7 @@ const zh = (site.lang || "zh-CN").startsWith("zh");
                 {zh ? "访客 IP 与位置加载中…" : "Loading visitor IP and location…"}
             </p>
         )}
-        <p class="stalux-weather-status" data-weather-status></p>
+        <p class="stalux-weather-status" data-weather-status />
         <button type="button" data-weather-retry hidden>
             {zh ? "重试" : "Retry"}
         </button>

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

@@ -7,7 +7,7 @@
 (() => {
     const dateElement = document.querySelector('[data-ref="date"]');
     const timeElement = document.querySelector('[data-ref="time"]');
-    if (!dateElement || !timeElement) return;
+    if (!(dateElement && timeElement)) return;
     const now = new Date();
     const pad = (value) => String(value).padStart(2, "0");
     const lang = document.documentElement.lang || "zh-CN";

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

@@ -35,6 +35,8 @@ const showBeian = !!(icp || pubsec);
                 <img
                     src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
                     alt={t("footer.securityIcon")}
+                    width="15"
+                    height="15"
                 />
                 {pubsec}
             </a>

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

@@ -18,7 +18,7 @@ import {
 import { toMachineDateTime } from "@utils/semantic-time";
 import { buildSeoDocument, type SeoPageInput } from "@utils/seo-document";
 import { SEO } from "astro-seo";
-import packageJson from "../../../../package.json";
+import packageJson from "../../../../package.json" with { type: "json" };
 
 const configEntries = await getCollection("config");
 const siteConfig = getSiteData(configEntries);

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

@@ -10,7 +10,7 @@ const linksConfig = getLinksData(configEntries);
 const links = linksConfig?.sites ?? [];
 ---
 
-<ul class="stalux-links" data-stalux-motion-content data-stalux-reveal>
+<ul class="stalux-links" data-stalux-motion-content data-stalux-motion-stage data-stalux-reveal>
     {links.map((link) => (
         <li class="stalux-link-list-item" data-stalux-reveal-item>
             <LinkCard link={link} />

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

@@ -38,7 +38,11 @@ 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}>
+<article
+    class="stalux-article"
+    data-stalux-motion-stage
+    data-stalux-gallery={props.hasImage ? "true" : undefined}
+>
     <!-- Article Header -->
     <header class="stalux-post-article-header" data-stalux-motion-region>
         <h1 class="stalux-post-title" data-stalux-motion-focus>

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

@@ -11,7 +11,12 @@ const props = Astro.props as Props;
 const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.draft));
 ---
 
-<div data-stalux="postlist" class="stalux-post-list-container" data-stalux-motion-content>
+<div
+    data-stalux="postlist"
+    class="stalux-post-list-container"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+>
     <ul class="post-list" data-stalux-reveal>
         {posts.map((post, index) => (
             <li data-stalux-reveal-item>

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

@@ -14,7 +14,14 @@ interface Props {
 const { headings = [], tags = [], categories = [] } = Astro.props;
 ---
 
-<aside class="stalux-sidebar-right" data-stalux-scroll-pane>
+<!--
+    The right column is a shell. Between two articles it keeps its node, its
+    scroll position and its frame; only the three article-specific lists inside
+    the slots are refreshed (see scripts/shell-hydration.ts). Rebuilding the whole
+    aside on every article change made the reader watch the sidebar disappear and
+    reflow, and it cost a full layout of the new article to do it.
+-->
+<aside class="stalux-sidebar-right" data-stalux-scroll-pane data-swup-persist="post-sidebar-right">
     <div
         class="stalux-sidebar-container"
         data-stalux-module="sidebar"
@@ -23,13 +30,13 @@ const { headings = [], tags = [], categories = [] } = Astro.props;
         <PostDate />
         <Weather />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="toc">
         <PostToc headings={headings} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="tags">
         <PostTaxonomy kind="tag" items={tags} />
     </div>
-    <div class="stalux-sidebar-container">
+    <div class="stalux-sidebar-container" data-stalux-shell-slot="categories">
         <PostTaxonomy kind="category" items={categories} />
     </div>
 </aside>

package/src/components/stalux/words/wordList.astro

@@ -19,14 +19,17 @@ const sorted = [...entries].sort((a, b) => {
 });
 ---
 
-<ul class="stalux-word-list-list" data-stalux-motion-content data-stalux-reveal>
-    {sorted.map((entry) => {
-        return (
-            <li class="stalux-word-list-item" data-stalux-reveal-item>
-                <WordCard entry={entry} timezone={timezone} />
-            </li>
-        );
-    })}
+<ul
+    class="stalux-word-list-list"
+    data-stalux-motion-content
+    data-stalux-motion-stage
+    data-stalux-reveal
+>
+    {sorted.map((entry) => (
+        <li class="stalux-word-list-item" data-stalux-reveal-item>
+            <WordCard entry={entry} timezone={timezone} />
+        </li>
+    ))}
 </ul>
 
 <script src="../../../scripts/word-list.ts"></script>

package/src/index.ts

@@ -678,7 +678,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
             const postsDir = path.resolve(process.cwd(), contentDir, "posts");
             if (existsSync(postsDir)) {
                 for (const filename of readdirSync(postsDir)) {
-                    if (!filename.endsWith(".md") && !filename.endsWith(".mdx")) {
+                    if (!(filename.endsWith(".md") || filename.endsWith(".mdx"))) {
                         continue;
                     }
                     const source = readFileSync(path.join(postsDir, filename), "utf8");

package/src/internal/compact-styles.ts

@@ -80,7 +80,7 @@ function markupEdits(value: string, names: Names): Edit[] {
             if (["pre", "code", "script", "style"].includes(node.tagName)) return;
             for (const attr of node.attrs) {
                 const loc = node.sourceCodeLocation?.attrs?.[attr.name];
-                if (!loc || !["class", "style", "data-toc-active-class"].includes(attr.name))
+                if (!(loc && ["class", "style", "data-toc-active-class"].includes(attr.name)))
                     continue;
                 const raw = value.slice(loc.startOffset, loc.endOffset);
                 const offset = loc.startOffset + raw.indexOf("=") + 1;

package/src/internal/font-slices.ts

@@ -258,7 +258,7 @@ function isHiddenElement(attrs: Array<{ name: string; value: string }>): boolean
 const CONTROL_CHARACTER = /\p{C}/u;
 function addGlyphs(text: string, output: Set<string>): void {
     for (const char of text)
-        if (!output.has(char) && !CONTROL_CHARACTER.test(char)) output.add(char);
+        if (!(output.has(char) || CONTROL_CHARACTER.test(char))) output.add(char);
 }
 
 function collectBodyText(node: HtmlNode, output: Set<string>, skipSharedComponents = false): void {
@@ -410,7 +410,7 @@ function preparePageFont(
     excludedChars: ReadonlySet<string> = new Set(),
 ) {
     const body = findBody(document);
-    if (!body) return undefined;
+    if (!body) return;
 
     const glyphs = new Set<string>();
     addGlyphs(RESERVED_GLYPHS, glyphs);
@@ -425,7 +425,7 @@ function preparePageFont(
     const chars = [...glyphs].sort(
         (a, b) => (a.codePointAt(0) as number) - (b.codePointAt(0) as number),
     );
-    if (chars.length === 0) return undefined;
+    if (chars.length === 0) return;
 
     let prepared = preparedFonts.get(fontBuffer);
     if (!prepared) {

package/src/internal/page-output-cache.ts

@@ -59,14 +59,13 @@ export async function createPageOutputCache(
                 for (const [asset, expected] of record.assets) {
                     if ((await assetDigest(asset)) !== expected) return undefined;
                 }
-                if (record.font) {
-                    if (
-                        !/^page-[a-f\d]+\.woff2$/u.test(record.font.filename) ||
+                if (
+                    record.font &&
+                    (!/^page-[a-f\d]+\.woff2$/u.test(record.font.filename) ||
                         typeof record.font.sourcePath !== "string" ||
-                        !(await fs.stat(record.font.sourcePath)).isFile()
-                    )
-                        return undefined;
-                }
+                        !(await fs.stat(record.font.sourcePath)).isFile())
+                )
+                    return undefined;
                 return { html: record.html, font: record.font };
             } catch {
                 // Missing, truncated, or invalid cache entries are rebuilt from source.

package/src/internal/social-card-renderer.ts

@@ -87,7 +87,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
         if (cachedStat && Date.now() - cachedStat.mtimeMs < 86_400_000)
             return readFile(remoteCache);
         const response = await fetch(url, { signal: AbortSignal.timeout(8000) });
-        if (!response.ok || !response.headers.get("content-type")?.startsWith("image/"))
+        if (!(response.ok && response.headers.get("content-type")?.startsWith("image/")))
             throw new Error(`cover returned HTTP ${response.status} or non-image content`);
         const chunks: Uint8Array[] = [];
         let size = 0;
@@ -100,8 +100,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
         bytes = Buffer.concat(chunks);
         const dimensions = imageSize(bytes);
         if (
-            !dimensions.width ||
-            !dimensions.height ||
+            !(dimensions.width && dimensions.height) ||
             dimensions.width * dimensions.height > 32_000_000
         )
             throw new Error("invalid cover dimensions");
@@ -110,8 +109,7 @@ async function loadCoverUncached(cover: string, paths: SocialCardPaths): Promise
     }
     const dimensions = imageSize(bytes);
     if (
-        !dimensions.width ||
-        !dimensions.height ||
+        !(dimensions.width && dimensions.height) ||
         dimensions.width * dimensions.height > 32_000_000
     )
         throw new Error("invalid or oversized cover dimensions");

package/src/pages/og/[image].[format].ts

@@ -15,7 +15,7 @@ export async function getStaticPaths() {
     return posts
         .filter(
             (post) =>
-                !post.data["og:image"]?.trim() || !isSocialImageUrl(post.data["og:image"].trim()),
+                !(post.data["og:image"]?.trim() && isSocialImageUrl(post.data["og:image"].trim())),
         )
         .flatMap((post) => {
             const card = createSocialCardData(post.data, site, author);

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/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";