@xingwangzhe/stalux 1.42.0 → 1.43.1

package/src/internal/style-names.generated.ts

@@ -290,80 +290,70 @@ export const styleNames: { classes: Record<string, string>; variables: Record<st
         "--stalux-site-header-height": "--s1q",
         "--stalux-site-header-min-height": "--s1r",
         "--stalux-text-shadow": "--s1s",
-        "--stalux-vt-distance": "--s1t",
-        "--stalux-vt-duration": "--s1u",
-        "--stalux-vt-rx": "--s1v",
-        "--stalux-vt-ry": "--s1w",
-        "--stalux-vt-rz": "--s1x",
-        "--stalux-vt-scale": "--s1y",
-        "--stalux-vt-tilt": "--s1z",
-        "--stalux-vt-x": "--s20",
-        "--stalux-vt-y": "--s21",
-        "--surface-glass": "--s22",
-        "--surface-glass-shadow": "--s23",
-        "--tag-bg": "--s24",
-        "--tag-bg-hover": "--s25",
-        "--tl-line": "--s26",
-        "--tl-pad": "--s27",
-        "--transition-fast": "--s28",
-        "--transition-medium": "--s29",
-        "--transition-normal": "--s2a",
-        "--transition-slow": "--s2b",
-        "--transition-slower": "--s2c",
-        "--transition-slowest": "--s2d",
-        "--un-rotate": "--s2e",
-        "--un-rotate-x": "--s2f",
-        "--un-rotate-y": "--s2g",
-        "--un-rotate-z": "--s2h",
-        "--un-scale-x": "--s2i",
-        "--un-scale-y": "--s2j",
-        "--un-scale-z": "--s2k",
-        "--un-skew-x": "--s2l",
-        "--un-skew-y": "--s2m",
-        "--un-translate-x": "--s2n",
-        "--un-translate-y": "--s2o",
-        "--un-translate-z": "--s2p",
-        "--updated-bg": "--s2q",
-        "--updated-border": "--s2r",
-        "--white-05p": "--s2s",
-        "--white-10p": "--s2t",
-        "--white-15p": "--s2u",
-        "--white-20p": "--s2v",
-        "--white-30p": "--s2w",
-        "--white-50p": "--s2x",
-        "--white-60p": "--s2y",
-        "--white-70p": "--s2z",
-        "--white-75p": "--s30",
-        "--white-78p": "--s31",
-        "--white-80p": "--s32",
-        "--white-85p": "--s33",
-        "--white-90p": "--s34",
-        "--white-95p": "--s35",
-        "--white-full": "--s36"
+        "--surface-glass": "--s1t",
+        "--surface-glass-shadow": "--s1u",
+        "--tag-bg": "--s1v",
+        "--tag-bg-hover": "--s1w",
+        "--tl-line": "--s1x",
+        "--tl-pad": "--s1y",
+        "--transition-fast": "--s1z",
+        "--transition-medium": "--s20",
+        "--transition-normal": "--s21",
+        "--transition-slow": "--s22",
+        "--transition-slower": "--s23",
+        "--transition-slowest": "--s24",
+        "--un-rotate": "--s25",
+        "--un-rotate-x": "--s26",
+        "--un-rotate-y": "--s27",
+        "--un-rotate-z": "--s28",
+        "--un-scale-x": "--s29",
+        "--un-scale-y": "--s2a",
+        "--un-scale-z": "--s2b",
+        "--un-skew-x": "--s2c",
+        "--un-skew-y": "--s2d",
+        "--un-translate-x": "--s2e",
+        "--un-translate-y": "--s2f",
+        "--un-translate-z": "--s2g",
+        "--updated-bg": "--s2h",
+        "--updated-border": "--s2i",
+        "--white-05p": "--s2j",
+        "--white-10p": "--s2k",
+        "--white-15p": "--s2l",
+        "--white-20p": "--s2m",
+        "--white-30p": "--s2n",
+        "--white-50p": "--s2o",
+        "--white-60p": "--s2p",
+        "--white-70p": "--s2q",
+        "--white-75p": "--s2r",
+        "--white-78p": "--s2s",
+        "--white-80p": "--s2t",
+        "--white-85p": "--s2u",
+        "--white-90p": "--s2v",
+        "--white-95p": "--s2w",
+        "--white-full": "--s2x"
     },
     "animations": {
         "fadeInUpComment": "k0",
         "spin": "k1",
         "stalux-article-enter": "k2",
         "stalux-article-enter-back": "k3",
-        "stalux-content-in": "k4",
-        "stalux-cursor-blink": "k5",
-        "stalux-link-avatar-spin": "k6",
-        "stalux-page-enter": "k7",
-        "stalux-page-enter-back": "k8",
-        "stalux-page-exit": "k9",
-        "stalux-random-spin": "ka",
-        "stalux-sidebar-left-back-in": "kb",
-        "stalux-sidebar-left-back-out": "kc",
-        "stalux-sidebar-left-in": "kd",
-        "stalux-sidebar-left-out": "ke",
-        "stalux-sidebar-right-back-in": "kf",
-        "stalux-sidebar-right-back-out": "kg",
-        "stalux-sidebar-right-in": "kh",
-        "stalux-sidebar-right-out": "ki",
-        "stalux-social-stalux-social-arrive": "kj",
-        "stalux-taxonomy-enter": "kk",
-        "stalux-taxonomy-enter-back": "kl",
-        "stalux-word-word-glow": "km"
+        "stalux-cursor-blink": "k4",
+        "stalux-link-avatar-spin": "k5",
+        "stalux-page-enter": "k6",
+        "stalux-page-enter-back": "k7",
+        "stalux-page-exit": "k8",
+        "stalux-random-spin": "k9",
+        "stalux-sidebar-left-back-in": "ka",
+        "stalux-sidebar-left-back-out": "kb",
+        "stalux-sidebar-left-in": "kc",
+        "stalux-sidebar-left-out": "kd",
+        "stalux-sidebar-right-back-in": "ke",
+        "stalux-sidebar-right-back-out": "kf",
+        "stalux-sidebar-right-in": "kg",
+        "stalux-sidebar-right-out": "kh",
+        "stalux-social-stalux-social-arrive": "ki",
+        "stalux-taxonomy-enter": "kj",
+        "stalux-taxonomy-enter-back": "kk",
+        "stalux-word-word-glow": "kl"
     }
 };

package/src/layouts/PostLayout.astro

@@ -52,11 +52,7 @@ const walineConfig = walineSection?.serverURL
 ---
 
 <div class="stalux-post-page">
-    <div
-        class="stalux-post-layout"
-        transition:name="stalux-article-layout"
-        transition:animate="none"
-    >
+    <div class="stalux-post-layout">
         <!-- Left Sidebar -->
         <PostLeft author={author} authorAvatar={props.authorAvatar} />
 

package/src/layouts/Stalux.astro

@@ -91,20 +91,10 @@ const routeKind = getRouteKind(Astro.url.pathname);
         data-stalux-umami-id={headConfig?.umami?.id}
         data-stalux-umami-url={headConfig?.umami?.url}
     >
-        <header
-            class="stalux-site-header"
-            data-stalux-font-group="header"
-            transition:name="stalux-site-header"
-            transition:animate="none"
-            transition:persist="stalux-site-header"
-        >
+        <header class="stalux-site-header" data-stalux-font-group="header">
             <Navs />
         </header>
-        <div
-            data-stalux-scroll-sentinel
-            transition:persist="stalux-scroll-sentinel"
-            aria-hidden="true"
-        ></div>
+        <div data-stalux-scroll-sentinel aria-hidden="true"></div>
         {llmPromote && (
             <section class="stalux-ai-prompt" data-stalux-ai-prompt aria-label="AI site context">
                 <p>{llmPromote}</p>
@@ -114,15 +104,9 @@ const routeKind = getRouteKind(Astro.url.pathname);
             class="bg-layer bg-a"
             data-stalux-background="a"
             style="opacity: 1;"
-            transition:persist="stalux-bg-a"
-            aria-hidden="true"
-        ></div>
-        <div
-            class="bg-layer bg-b"
-            data-stalux-background="b"
-            transition:persist="stalux-bg-b"
             aria-hidden="true"
         ></div>
+        <div class="bg-layer bg-b" data-stalux-background="b" aria-hidden="true"></div>
         <main class="stalux-main" data-stalux-route={routeKind}>
             <slot />
         </main>

package/src/pages/index.astro

@@ -20,11 +20,7 @@ import { getSiteData } from "@utils/config-utils";
 
 <Stalux title={siteTitle} description={siteDescription}>
     <div class="stalux-home-body stalux-u-flex stalux-u-items-center stalux-u-flex-col">
-        <h1
-            class="stalux-home-title stalux-u-text-center"
-            data-stalux-motion-focus
-            transition:animate="none"
-        >
+        <h1 class="stalux-home-title stalux-u-text-center" data-stalux-motion-focus>
             {siteTitle}
         </h1>
         <h2

package/src/scripts/navigation-client.ts

@@ -0,0 +1,13 @@
+import type Swup from "swup";
+
+declare global {
+    interface Window {
+        swup?: Swup;
+    }
+}
+
+/** Programmatic theme navigation uses the same controller as ordinary links. */
+export function navigate(href: string): void {
+    if (window.swup) window.swup.navigate(href);
+    else window.location.assign(href);
+}

package/src/scripts/navigation-scripts.ts

@@ -0,0 +1,191 @@
+import { createClientLogger } from "./logger";
+
+const logger = createClientLogger("navigation-scripts");
+const executions = new Map<string, Promise<void>>();
+const executedNodes = new WeakSet<HTMLScriptElement>();
+let seeded = false;
+
+interface NavigationScript {
+    attributes: { name: string; value: string }[];
+    content: string;
+    source?: string;
+    type: string;
+    key: string;
+    rerun: boolean;
+    head: boolean;
+    original: HTMLScriptElement;
+}
+
+const JAVASCRIPT_TYPES = new Set([
+    "",
+    "module",
+    "text/javascript",
+    "application/javascript",
+    "text/ecmascript",
+    "application/ecmascript",
+]);
+
+function describeScript(script: HTMLScriptElement, base: string): NavigationScript | undefined {
+    const type = (script.getAttribute("type") ?? "").trim().toLowerCase();
+    if (!JAVASCRIPT_TYPES.has(type) || script.hasAttribute("data-swup-ignore-script")) return;
+    if (script.hasAttribute("nomodule") && "noModule" in document.createElement("script")) return;
+    const rawSource = script.getAttribute("src");
+    let source: string | undefined;
+    if (rawSource !== null) {
+        try {
+            source = new URL(rawSource, base).href;
+        } catch {
+            return;
+        }
+    }
+    const content = script.textContent ?? "";
+    return {
+        attributes: [...script.attributes].map(({ name, value }) => ({ name, value })),
+        content,
+        source,
+        type,
+        key: source ? `src:${source}` : `inline:${type}:${content}`,
+        rerun: script.hasAttribute("data-astro-rerun"),
+        head: script.parentElement?.tagName === "HEAD",
+        original: script,
+    };
+}
+
+function seedCurrentScripts(): void {
+    if (seeded) return;
+    seeded = true;
+    for (const script of document.querySelectorAll<HTMLScriptElement>("script")) {
+        const descriptor = describeScript(script, document.baseURI);
+        if (descriptor) {
+            executions.set(descriptor.key, Promise.resolve());
+            executedNodes.add(script);
+        }
+    }
+}
+
+function waitForScript(script: HTMLScriptElement, timeoutMs: number): Promise<boolean> {
+    return new Promise((resolve) => {
+        let timer: ReturnType<typeof setTimeout>;
+        const finish = (loaded: boolean) => {
+            clearTimeout(timer);
+            script.removeEventListener("load", loadedHandler);
+            script.removeEventListener("error", failedHandler);
+            resolve(loaded);
+        };
+        const loadedHandler = () => finish(true);
+        const failedHandler = () => finish(false);
+        script.addEventListener("load", loadedHandler, { once: true });
+        script.addEventListener("error", failedHandler, { once: true });
+        timer = setTimeout(failedHandler, timeoutMs);
+    });
+}
+
+function abortable(promise: Promise<void>, signal?: AbortSignal): Promise<void> {
+    if (!signal) return promise;
+    if (signal.aborted) return Promise.resolve();
+    return new Promise((resolve) => {
+        const finish = () => {
+            signal.removeEventListener("abort", finish);
+            resolve();
+        };
+        signal.addEventListener("abort", finish, { once: true });
+        void promise.then(finish, finish);
+    });
+}
+
+function executeScript(descriptor: NavigationScript, timeoutMs: number): Promise<void> {
+    // HeadPlugin clones incoming head nodes before container replacement. Those
+    // scripts are inert, but are different nodes from the parsed document we
+    // captured. Replace that clone rather than appending a second head script.
+    const inertCopies = [...document.querySelectorAll<HTMLScriptElement>("script")].filter(
+        (candidate) =>
+            !executedNodes.has(candidate) &&
+            describeScript(candidate, document.baseURI)?.key === descriptor.key,
+    );
+    const existing = executions.get(descriptor.key);
+    if (existing && !descriptor.rerun) {
+        for (const copy of inertCopies) copy.remove();
+        return existing;
+    }
+
+    const script = document.createElement("script");
+    // Dynamic scripts are async by default. Preserve document order, including
+    // the module barrier used below, before copying the page's attributes.
+    script.async = false;
+    for (const { name, value } of descriptor.attributes) {
+        if (name !== "src" && name !== "data-astro-exec") script.setAttribute(name, value);
+    }
+    if (descriptor.source) script.setAttribute("src", descriptor.source);
+    script.textContent = descriptor.content;
+    script.setAttribute("data-astro-exec", "");
+    executedNodes.add(script);
+
+    let observed = script;
+    if (!descriptor.source && descriptor.type === "module") {
+        // Inline module load events are not portable. Astro uses the same
+        // ordered external module barrier to wait for deferred inline modules.
+        observed = document.createElement("script");
+        observed.type = "module";
+        observed.async = false;
+        observed.src = "data:application/javascript,";
+        observed.setAttribute("data-swup-ignore-script", "");
+        if (script.nonce) observed.nonce = script.nonce;
+    }
+    const loaded =
+        descriptor.source || descriptor.type === "module"
+            ? waitForScript(observed, timeoutMs)
+            : Promise.resolve(true);
+    const execution = loaded.then((success) => {
+        if (observed !== script) observed.remove();
+        if (!success) {
+            // Failed fetches may succeed on a subsequent visit. Do not turn a
+            // transient offline response into a session-long disabled feature.
+            if (executions.get(descriptor.key) === execution) executions.delete(descriptor.key);
+            script.remove();
+            logger.warn(`page script failed to load: ${descriptor.source ?? "inline module"}`);
+        }
+    });
+    executions.set(descriptor.key, execution);
+
+    const parent = descriptor.head ? document.head : document.body;
+    const original =
+        descriptor.original.isConnected && descriptor.original.ownerDocument === document
+            ? descriptor.original
+            : inertCopies[0];
+    if (original) {
+        original.replaceWith(script);
+    } else {
+        parent.append(script);
+    }
+    for (const copy of inertCopies) if (copy !== original) copy.remove();
+    if (observed !== script) parent.append(observed);
+    return execution;
+}
+
+/**
+ * Capture both head and body before Swup replaces the document's containers.
+ * Call the returned function after replacement, before astro:page-load. Bundled
+ * modules and ordinary inline scripts retain Astro's once-per-session behavior;
+ * data-astro-rerun opts a script into every visit. SDK scripts already present in
+ * the first document are never reinserted merely because head metadata changed.
+ */
+export function prepareNavigationScripts(
+    nextDocument: Document,
+    options: { timeoutMs?: number; baseUrl?: string } = {},
+): (signal?: AbortSignal) => Promise<void> {
+    seedCurrentScripts();
+    const base = options.baseUrl ?? nextDocument.baseURI ?? document.baseURI;
+    const scripts = [...nextDocument.querySelectorAll<HTMLScriptElement>("script")]
+        .map((script) => describeScript(script, base))
+        .filter((script): script is NavigationScript => script !== undefined);
+    let executed: Promise<void> | undefined;
+    return (signal) => {
+        executed ??= (async () => {
+            for (const script of scripts) {
+                if (signal?.aborted) return;
+                await abortable(executeScript(script, options.timeoutMs ?? 15_000), signal);
+            }
+        })();
+        return executed;
+    };
+}

package/src/scripts/route-motion.ts

@@ -1,4 +1,8 @@
+import type { RouteMotionPreset } from "../utils/route-motion-policy";
+
 export interface RouteMotionEvent {
+    // Retained for integrations using the shared gates with a native transition.
+    // Stalux's Swup router leaves this unset and owns the animation lifecycle.
     viewTransition?: {
         ready?: PromiseLike<unknown>;
         finished?: PromiseLike<unknown>;
@@ -6,13 +10,43 @@ export interface RouteMotionEvent {
     signal?: AbortSignal;
 }
 
+export interface RouteMotionOptions {
+    skip?: boolean;
+    content?: boolean;
+    preset?: RouteMotionPreset;
+    browserMotion?: boolean;
+}
+
 export interface RouteMotion {
     ready: Promise<void>;
     finished: Promise<void>;
-    start: (main: HTMLElement | null, options?: { skip?: boolean }) => void;
+    start: (heading: HTMLElement | null, options?: RouteMotionOptions) => void;
     cancel: () => void;
 }
 
+interface HeadingMotion {
+    opacity: number;
+    duration: number;
+    x?: number;
+    y?: number;
+}
+
+// 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 },
+};
+
 const motions = new WeakMap<object, RouteMotion>();
 const settle = (promise?: PromiseLike<unknown>): Promise<void> =>
     Promise.resolve(promise).then(
@@ -28,15 +62,30 @@ function completion() {
     return { promise, resolve };
 }
 
-/** Share the native swap and the real content animation across all route consumers. */
+/** A deep history restore must not scroll to or animate an off-screen title. */
+function isVisibleHeading(heading: HTMLElement): boolean {
+    if (!heading.isConnected || !heading.hasAttribute("data-stalux-motion-focus")) return false;
+    const rect = heading.getBoundingClientRect();
+    return (
+        rect.width > 0 &&
+        rect.height > 0 &&
+        rect.height <= Math.min(320, window.innerHeight / 2) &&
+        rect.top < window.innerHeight &&
+        rect.bottom > 0 &&
+        rect.left < window.innerWidth &&
+        rect.right > 0
+    );
+}
+
+/** Share Swup's actual content animation with background and analytics consumers. */
 export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
     const native = event.viewTransition;
     const key = native ?? event;
     const existing = motions.get(key);
     if (existing) return existing;
 
-    // Create these before swap: a consumer must not observe native.finished and
-    // mistake the gap before after-swap installs WAAPI for completed motion.
+    // Installation is a separate gate: before-swap consumers must not mistake
+    // the gap before Swup's incoming animation hook for a completed transition.
     const installed = completion();
     const animationDone = completion();
     const canceled = completion();
@@ -47,6 +96,8 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
         const active = animation;
         animation = undefined;
         try {
+            // Remove fill effects and restore the authored final styles. No
+            // inline transform/opacity survives completion, failure or abort.
             active?.cancel();
         } catch {
             // Releasing an already detached effect must not hold up navigation.
@@ -73,24 +124,44 @@ export function prepareRouteMotion(event: RouteMotionEvent): RouteMotion {
     const motion: RouteMotion = {
         ready,
         finished,
-        start(main, options) {
+        start(heading, options) {
             if (started) return;
             started = true;
             try {
+                const preset = options?.preset ?? "glide";
+                const mobile = window.matchMedia?.("(max-width: 768px)").matches;
                 if (
-                    !main ||
+                    !heading ||
+                    preset === "none" ||
+                    (options?.content && preset === "restore") ||
                     options?.skip ||
+                    options?.browserMotion ||
                     document.hidden ||
                     window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ||
-                    typeof main.animate !== "function"
+                    typeof heading.animate !== "function" ||
+                    !(options?.content ? heading.isConnected : isVisibleHeading(heading)) ||
+                    (mobile && preset === "restore")
                 ) {
                     animationDone.resolve();
                     return;
                 }
-                animation = main.animate(
-                    { opacity: [0.7, 1] },
-                    { duration: 100, easing: "ease-out" },
-                );
+                const spec = options?.content
+                    ? { opacity: 0, duration: mobile ? 180 : 220, y: mobile ? 8 : 16 }
+                    : headingMotions[preset];
+                const keyframes: PropertyIndexedKeyframes = { opacity: [spec.opacity, 1] };
+                // Content uses a short vertical entry on both breakpoints. Legacy
+                // heading cues retain their motionless phone fallback.
+                if ((options?.content || !mobile) && (spec.x || spec.y)) {
+                    keyframes.transform = [
+                        `translate3d(${spec.x ?? 0}px, ${spec.y ?? 0}px, 0)`,
+                        "translate3d(0px, 0px, 0)",
+                    ];
+                }
+                animation = heading.animate(keyframes, {
+                    duration: options?.content ? spec.duration : mobile ? 80 : spec.duration,
+                    easing: "cubic-bezier(0.2, 0.7, 0.2, 1)",
+                    fill: "both",
+                });
                 void animation.finished.then(clearAnimation, clearAnimation);
             } catch {
                 clearAnimation();

package/src/scripts/route-out.ts

@@ -0,0 +1,33 @@
+/** Fade the old content only after destination assets are ready. */
+export async function animateRouteOut(
+    element: HTMLElement | null,
+    signal: AbortSignal,
+): Promise<() => void> {
+    if (
+        !element ||
+        signal.aborted ||
+        document.hidden ||
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    )
+        return () => {};
+    let animation: Animation | undefined;
+    const cancel = () => animation?.cancel();
+    try {
+        animation = element.animate(
+            { opacity: [1, 0], transform: ["translateY(0)", "translateY(-8px)"] },
+            { duration: 140, easing: "cubic-bezier(0.4, 0, 1, 1)", fill: "forwards" },
+        );
+        signal.addEventListener("abort", cancel, { once: true });
+        await animation.finished;
+        // Keep the old page hidden until swap, but release effects on abort.
+        // Swup detaches this node; no persistent shell is animated.
+    } catch {
+        /* Cancellation and unsupported animation must not block a visit. */
+    } finally {
+        if (signal.aborted) cancel();
+    }
+    return () => {
+        signal.removeEventListener("abort", cancel);
+        cancel();
+    };
+}

package/src/scripts/smooth-scroll.ts

@@ -0,0 +1,52 @@
+let stopActive: (() => void) | undefined;
+
+export function cancelPageScroll(): void {
+    stopActive?.();
+}
+
+/** Native scrolling with bounded completion and explicit listener cleanup. */
+export function scrollPage(
+    element: Element,
+    top: number,
+    left: number,
+    animate: boolean,
+    start: () => void,
+    end: () => void,
+): void {
+    stopActive?.();
+    start();
+    const smooth = animate && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (
+        !smooth ||
+        (Math.abs(element.scrollTop - top) < 1 && Math.abs(element.scrollLeft - left) < 1)
+    ) {
+        element.scrollTo({ top, left, behavior: "instant" });
+        end();
+        return;
+    }
+    const target =
+        element === document.documentElement || element === document.body ? window : element;
+    let finished = false;
+    const done = () => {
+        if (finished) return;
+        finished = true;
+        clearTimeout(timer);
+        target.removeEventListener("scrollend", done);
+        window.removeEventListener("wheel", interrupt);
+        window.removeEventListener("touchstart", interrupt);
+        window.removeEventListener("keydown", interrupt);
+        if (stopActive === interrupt) stopActive = undefined;
+        end();
+    };
+    const interrupt = () => {
+        element.scrollTo({ top: element.scrollTop, left: element.scrollLeft, behavior: "instant" });
+        done();
+    };
+    const timer = setTimeout(done, 1500);
+    stopActive = interrupt;
+    target.addEventListener("scrollend", done, { once: true });
+    window.addEventListener("wheel", interrupt, { passive: true, once: true });
+    window.addEventListener("touchstart", interrupt, { passive: true, once: true });
+    window.addEventListener("keydown", interrupt, { once: true });
+    element.scrollTo({ top, left, behavior: "smooth" });
+}