@windrun-huaiin/third-ui 29.2.1 → 30.1.0

package/dist/main/anime/anime-404-page.mjs

@@ -0,0 +1,195 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { THEME_BUTTON_GRADIENT_CLASS_MAP, themeButtonGradientClass, themeSvgIconColor, themeIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { createTimeline, stagger, animate } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { useRef, useMemo, useEffect, useCallback } from 'react';
+
+const THEME_BG_CLASS_MAP = {
+    'text-purple-500': 'bg-purple-500/20',
+    'text-orange-500': 'bg-orange-500/20',
+    'text-indigo-500': 'bg-indigo-500/20',
+    'text-emerald-500': 'bg-emerald-500/20',
+    'text-rose-500': 'bg-rose-500/20',
+};
+const dust = Array.from({ length: 10 }, (_, index) => ({
+    id: index,
+    left: `${12 + index * 8}%`,
+    top: `${18 + (index % 5) * 13}%`,
+    size: 3 + (index % 3),
+}));
+function AnimeNotFoundPage({ siteIcon, homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/', className, compact = false, themeClass, themeColor, ambientAnimated = true, doorOpen, onDoorOpenChange, }) {
+    const rootRef = useRef(null);
+    const timelineRef = useRef(null);
+    const shimmerRef = useRef(null);
+    const doorAnimationRef = useRef(null);
+    const lightAnimationRef = useRef(null);
+    const handleAnimationRef = useRef(null);
+    const messageAnimationRef = useRef(null);
+    const isDoorOpenRef = useRef(doorOpen !== null && doorOpen !== void 0 ? doorOpen : false);
+    const prefersReducedMotion = useReducedMotion();
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : themeIconColor;
+    const activeGradientClass = themeClass ? THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : themeBgColor;
+    const doorStyle = useMemo(() => ({
+        '--not-found-theme': themeColor !== null && themeColor !== void 0 ? themeColor : themeSvgIconColor,
+    }), [themeColor]);
+    useEffect(() => {
+        var _a, _b;
+        const root = rootRef.current;
+        if (!root || prefersReducedMotion) {
+            return undefined;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const message = root.querySelector('[data-not-found-message]');
+        const plate = root.querySelector('[data-not-found-plate]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const dustNodes = Array.from(root.querySelectorAll('[data-not-found-dust]'));
+        if (!door || !light || !plate || !handle) {
+            return undefined;
+        }
+        door.style.transform = 'rotateY(-2deg) translateX(0)';
+        light.style.opacity = '0.2';
+        light.style.transform = 'scaleX(0.78)';
+        if (message) {
+            message.style.opacity = '0';
+            message.style.transform = 'translateY(8px)';
+        }
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        timelineRef.current = null;
+        shimmerRef.current = null;
+        if (ambientAnimated) {
+            timelineRef.current = createTimeline({ loop: true })
+                .add(plate, {
+                translateY: [0, -3, 0],
+                scale: [1, 1.025, 1],
+                duration: 1400,
+                ease: 'inOutSine',
+            })
+                .add(plate, {
+                translateY: [0, -3, 0],
+                scale: [1, 1.025, 1],
+                duration: 1400,
+                ease: 'inOutSine',
+            }, '+=900')
+                .add(dustNodes, {
+                opacity: [0, 0.72, 0],
+                translateY: [14, -18],
+                translateX: (_target, index) => (index % 2 === 0 ? 10 : -10),
+                scale: [0.4, 1, 0.6],
+                duration: 1800,
+                delay: stagger(80),
+                ease: 'outSine',
+            }, '<+=200');
+            shimmerRef.current = animate(root.querySelectorAll('[data-not-found-shimmer]'), {
+                translateX: ['-120%', '120%'],
+                opacity: [0, 0.8, 0],
+                duration: 2400,
+                delay: stagger(160),
+                ease: 'inOutSine',
+                loop: true,
+            });
+        }
+        return () => {
+            var _a, _b, _c, _d, _e, _f;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+            (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+            shimmerRef.current = null;
+            (_c = doorAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+            doorAnimationRef.current = null;
+            (_d = lightAnimationRef.current) === null || _d === void 0 ? void 0 : _d.revert();
+            lightAnimationRef.current = null;
+            (_e = handleAnimationRef.current) === null || _e === void 0 ? void 0 : _e.revert();
+            handleAnimationRef.current = null;
+            (_f = messageAnimationRef.current) === null || _f === void 0 ? void 0 : _f.revert();
+            messageAnimationRef.current = null;
+        };
+    }, [ambientAnimated, prefersReducedMotion]);
+    const setDoorOpen = useCallback((nextOpen) => {
+        var _a, _b, _c, _d;
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const message = root.querySelector('[data-not-found-message]');
+        if (!door || !light || !handle) {
+            return;
+        }
+        isDoorOpenRef.current = nextOpen;
+        (_a = doorAnimationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        (_b = lightAnimationRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+        (_c = handleAnimationRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+        (_d = messageAnimationRef.current) === null || _d === void 0 ? void 0 : _d.pause();
+        doorAnimationRef.current = null;
+        lightAnimationRef.current = null;
+        handleAnimationRef.current = null;
+        messageAnimationRef.current = null;
+        if (prefersReducedMotion) {
+            door.style.transform = nextOpen ? 'rotateY(-72deg) translateX(-12px)' : 'rotateY(-2deg) translateX(0)';
+            light.style.opacity = nextOpen ? '0.8' : '0.2';
+            light.style.transform = nextOpen ? 'scaleX(1.28)' : 'scaleX(0.78)';
+            if (message) {
+                message.style.opacity = nextOpen ? '1' : '0';
+                message.style.transform = nextOpen ? 'translateY(0)' : 'translateY(8px)';
+            }
+            return;
+        }
+        doorAnimationRef.current = animate(door, {
+            rotateY: nextOpen ? -72 : -2,
+            translateX: nextOpen ? -12 : 0,
+            duration: 1050,
+            ease: 'inOutCubic',
+        });
+        lightAnimationRef.current = animate(light, {
+            opacity: nextOpen ? 0.8 : 0.2,
+            scaleX: nextOpen ? 1.28 : 0.78,
+            duration: 1050,
+            ease: 'inOutSine',
+        });
+        handleAnimationRef.current = animate(handle, {
+            scale: [1, 1.05, 1],
+            duration: 520,
+            ease: 'inOutSine',
+        });
+        if (message) {
+            messageAnimationRef.current = animate(message, {
+                opacity: nextOpen ? [0, 1] : [1, 0],
+                translateY: nextOpen ? [10, 0] : [0, 4, 10],
+                scale: nextOpen ? [0.96, 1] : [1, 0.98],
+                duration: nextOpen ? 620 : 520,
+                delay: nextOpen ? 320 : 280,
+                ease: nextOpen ? 'outCubic' : 'inOutSine',
+            });
+        }
+    }, [prefersReducedMotion]);
+    useEffect(() => {
+        if (doorOpen === undefined || doorOpen === isDoorOpenRef.current) {
+            return;
+        }
+        setDoorOpen(doorOpen);
+    }, [doorOpen, setDoorOpen]);
+    const toggleDoor = () => {
+        const nextOpen = !isDoorOpenRef.current;
+        if (doorOpen !== undefined) {
+            onDoorOpenChange === null || onDoorOpenChange === void 0 ? void 0 : onDoorOpenChange(nextOpen);
+            return;
+        }
+        setDoorOpen(nextOpen);
+        onDoorOpenChange === null || onDoorOpenChange === void 0 ? void 0 : onDoorOpenChange(nextOpen);
+    };
+    return (jsxs("div", { ref: rootRef, className: cn('relative flex w-full items-center justify-center overflow-hidden px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), style: doorStyle, children: [jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.75),transparent_34%),linear-gradient(180deg,rgba(250,250,250,0.96),rgba(244,244,245,0.72))] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.08),transparent_34%),linear-gradient(180deg,rgba(24,24,27,0.96),rgba(9,9,11,0.92))]" }), jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.05))] dark:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.34))]" }), jsxs("div", { className: "flex w-full max-w-3xl flex-col items-center gap-5", children: [jsx("section", { className: "text-center", children: jsx("h3", { className: cn('whitespace-nowrap text-[clamp(2.15rem,8vw,3.4rem)] font-black leading-none tracking-normal bg-linear-to-r bg-clip-text text-transparent', activeGradientClass), children: "Page Not Found" }) }), jsx("section", { className: "flex w-full justify-center", children: jsxs("div", { className: "relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] perspective-distant", children: [jsx("div", { "data-not-found-light": "", className: "absolute left-[14%] top-[7%] h-[86%] w-[72%] rounded-[28px] bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.96),color-mix(in_srgb,var(--not-found-theme)_42%,transparent)_42%,transparent_72%)] opacity-25 blur-xl" }), jsx("div", { className: "absolute inset-[4%] rounded-[32px] border border-black/10 bg-neutral-950/5 shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-white/5" }), jsx("div", { className: "absolute inset-[8%] rounded-[26px] bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(228,228,231,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] dark:bg-[linear-gradient(180deg,rgba(39,39,42,0.92),rgba(24,24,27,0.96))]" }), jsxs("p", { "data-not-found-message": "", className: "pointer-events-none absolute right-[16%] top-[29%] z-2 max-w-[46%] text-right text-sm font-medium leading-6 text-muted-foreground opacity-100", children: [jsx("span", { className: "block", children: "The page" }), jsx("span", { className: "block", children: "you're looking for" }), jsx("span", { className: "block", children: "doesn't exist" })] }), jsx("button", { type: "button", className: "absolute inset-[8%] z-1 rounded-[26px] outline-none focus-visible:ring-2 focus-visible:ring-(--not-found-theme)", "aria-label": "Toggle the 404 door", onClick: toggleDoor }), jsxs("div", { "data-not-found-door": "", className: "absolute inset-[8%] z-10 origin-left rounded-[26px] border border-black/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.92),rgba(212,212,216,0.9))] shadow-2xl shadow-black/20 will-change-transform dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(63,63,70,0.96),rgba(24,24,27,0.98))]", children: [jsxs("div", { className: "absolute inset-4 overflow-hidden rounded-[20px]", children: [jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/3 -skew-x-12 bg-white/35 blur-md dark:bg-white/12" }), jsxs("a", { href: homeUrl, className: "absolute inset-x-5 bottom-5 flex h-[39%] flex-col items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white/25 text-sm text-muted-foreground transition-opacity hover:opacity-80 dark:border-white/10 dark:bg-white/5", children: [jsxs("span", { className: "inline-flex items-center gap-2", children: [siteIcon, jsx("span", { children: "Woops!" })] }), jsx("span", { className: cn('text-xs font-semibold underline underline-offset-4', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] })] }), jsxs("div", { "data-not-found-plate": "", className: "absolute left-1/2 top-[18%] flex h-[88px] w-[156px] -translate-x-1/2 items-center justify-center overflow-hidden rounded-2xl border border-black/10 bg-white/86 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-black/30", children: [jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/2 -skew-x-12 bg-white/60 blur-md dark:bg-white/15" }), jsx("span", { className: cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', activeGradientClass), children: "404" })] }), jsx("button", { type: "button", "data-not-found-handle": "", className: "group absolute right-[1%] top-[39%] z-10 flex size-12 items-center justify-center rounded-full outline-none ring-offset-2 transition-transform hover:scale-105 focus-visible:ring-2 focus-visible:ring-(--not-found-theme)", "aria-label": "Toggle the 404 door", onClick: toggleDoor, children: jsxs("span", { className: "relative grid h-8 w-6 place-items-center rounded-full border border-black/10 bg-white/50 shadow-inner shadow-black/10 backdrop-blur-sm transform-[rotateY(18deg)] dark:border-white/15 dark:bg-black/25", children: [jsx("span", { className: "absolute size-10 rounded-full bg-(--not-found-theme) opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-25" }), jsx("span", { className: "relative grid size-4 place-items-center rounded-full border border-black/10 bg-(--not-found-theme) shadow-lg shadow-black/25 dark:border-white/15", children: jsx("span", { className: "absolute right-1 top-1 size-1 rounded-full bg-white/75" }) })] }) })] }), dust.map(dot => (jsx("span", { "data-not-found-dust": "", className: cn('absolute rounded-full opacity-0', activeBgClass), style: {
+                                        left: dot.left,
+                                        top: dot.top,
+                                        width: dot.size,
+                                        height: dot.size,
+                                    } }, dot.id)))] }) })] })] }));
+}
+
+export { AnimeNotFoundPage };

package/dist/main/anime/anime-beam-frame.d.ts

@@ -0,0 +1,3 @@
+import { type BeamFrameProps } from '../beam-frame-config';
+export type { BeamFrameProps, BeamFrameTone } from '../beam-frame-config';
+export declare function AnimeBeamFrame(props: BeamFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/anime/anime-beam-frame.js

@@ -0,0 +1,63 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var animejs = require('animejs');
+var react = require('motion/react');
+var beamFrameConfig = require('../beam-frame-config.js');
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = React.useRef(null);
+    const animationRef = React.useRef(null);
+    const hasStartedRef = React.useRef(false);
+    const auraGradientId = React.useId().replace(/:/g, '');
+    const softGlowFilterId = React.useId().replace(/:/g, '');
+    React.useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = beamFrameConfig.BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = animejs.waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: beamFrameConfig.BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = beamFrameConfig.BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    React.useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsxRuntime.jsx(beamFrameConfig.BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = beamFrameConfig.BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = react.useReducedMotion();
+    const { isRunning, interactionProps } = beamFrameConfig.useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = beamFrameConfig.normalizeDuration(duration);
+    const { ref, size } = beamFrameConfig.useMeasuredFrameSize();
+    return (jsxRuntime.jsx(beamFrameConfig.BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsxRuntime.jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+exports.AnimeBeamFrame = AnimeBeamFrame;

package/dist/main/anime/anime-beam-frame.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useId, useEffect } from 'react';
+import { waapi } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { BASE_DURATION_SECONDS, useInteractiveRunning, useMeasuredFrameSize, BeamFrameShell, normalizeDuration, BeamSvgLayer } from '../beam-frame-config.mjs';
+
+function AnimeBeamLayer({ isRunning, duration, radius, size, }) {
+    const aroundBeamRef = useRef(null);
+    const animationRef = useRef(null);
+    const hasStartedRef = useRef(false);
+    const auraGradientId = useId().replace(/:/g, '');
+    const softGlowFilterId = useId().replace(/:/g, '');
+    useEffect(() => {
+        var _a;
+        const node = aroundBeamRef.current;
+        if (!node) {
+            return undefined;
+        }
+        if (isRunning) {
+            hasStartedRef.current = true;
+        }
+        node.style.opacity = isRunning || hasStartedRef.current ? 'var(--beam-frame-beam-opacity)' : '0';
+        if (!isRunning) {
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return undefined;
+        }
+        if (animationRef.current) {
+            animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+            animationRef.current.play();
+            return undefined;
+        }
+        animationRef.current = waapi.animate(node, {
+            strokeDashoffset: [0, -1],
+            loop: true,
+            duration: BASE_DURATION_SECONDS * 1000,
+            ease: 'linear',
+        });
+        animationRef.current.speed = BASE_DURATION_SECONDS / duration;
+        return undefined;
+    }, [duration, isRunning]);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            animationRef.current = null;
+        };
+    }, []);
+    return (jsx(BeamSvgLayer, { beamRef: aroundBeamRef, auraGradientId: auraGradientId, softGlowFilterId: softGlowFilterId, radius: radius, size: size }));
+}
+function AnimeBeamFrame(props) {
+    const { children, active = false, interactive = true, tone = 'theme', duration = BASE_DURATION_SECONDS, radius, className, } = props;
+    const prefersReducedMotion = useReducedMotion();
+    const { isRunning, interactionProps } = useInteractiveRunning(active, interactive);
+    const shouldRun = isRunning && !prefersReducedMotion;
+    const normalizedDuration = normalizeDuration(duration);
+    const { ref, size } = useMeasuredFrameSize();
+    return (jsx(BeamFrameShell, { active: active, interactive: interactive, tone: tone, duration: normalizedDuration, radius: radius, className: className, isRunning: shouldRun, interactionProps: interactionProps, rootRef: ref, renderBeam: () => (jsx(AnimeBeamLayer, { isRunning: shouldRun, duration: normalizedDuration, radius: radius, size: size })), children: children }));
+}
+
+export { AnimeBeamFrame };

package/dist/main/anime/anime-not-found-page.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export interface AnimeNotFoundPageProps {
+    siteIcon: ReactNode;
+    homeUrl?: string;
+    className?: string;
+}
+export declare function AnimeNotFoundPage({ siteIcon, homeUrl, className, }: AnimeNotFoundPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/anime/anime-not-found-page.js

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var animejs = require('animejs');
+var react = require('motion/react');
+var React = require('react');
+
+const dust = Array.from({ length: 10 }, (_, index) => ({
+    id: index,
+    left: `${12 + index * 8}%`,
+    top: `${18 + (index % 5) * 13}%`,
+    size: 3 + (index % 3),
+}));
+function AnimeNotFoundPage({ siteIcon, homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/', className, }) {
+    const rootRef = React.useRef(null);
+    const timelineRef = React.useRef(null);
+    const shimmerRef = React.useRef(null);
+    const doorAnimationRef = React.useRef(null);
+    const lightAnimationRef = React.useRef(null);
+    const handleAnimationRef = React.useRef(null);
+    const isDoorOpenRef = React.useRef(true);
+    const prefersReducedMotion = react.useReducedMotion();
+    const doorStyle = React.useMemo(() => ({
+        '--not-found-theme': lib.themeSvgIconColor,
+    }), []);
+    React.useEffect(() => {
+        var _a, _b;
+        const root = rootRef.current;
+        if (!root || prefersReducedMotion) {
+            return undefined;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const plate = root.querySelector('[data-not-found-plate]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const dustNodes = Array.from(root.querySelectorAll('[data-not-found-dust]'));
+        if (!door || !light || !plate || !handle) {
+            return undefined;
+        }
+        door.style.transform = 'rotateY(-46deg) translateX(-7px)';
+        light.style.opacity = '0.7';
+        light.style.transform = 'scaleX(1.12)';
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        timelineRef.current = animejs.createTimeline({ loop: true })
+            .add(plate, {
+            translateY: [0, -3, 0],
+            scale: [1, 1.025, 1],
+            duration: 1400,
+            ease: 'inOutSine',
+        })
+            .add(plate, {
+            translateY: [0, -3, 0],
+            scale: [1, 1.025, 1],
+            duration: 1400,
+            ease: 'inOutSine',
+        }, '+=900')
+            .add(dustNodes, {
+            opacity: [0, 0.72, 0],
+            translateY: [14, -18],
+            translateX: (_target, index) => (index % 2 === 0 ? 10 : -10),
+            scale: [0.4, 1, 0.6],
+            duration: 1800,
+            delay: animejs.stagger(80),
+            ease: 'outSine',
+        }, '<+=200');
+        (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        shimmerRef.current = animejs.animate(root.querySelectorAll('[data-not-found-shimmer]'), {
+            translateX: ['-120%', '120%'],
+            opacity: [0, 0.8, 0],
+            duration: 2400,
+            delay: animejs.stagger(160),
+            ease: 'inOutSine',
+            loop: true,
+        });
+        return () => {
+            var _a, _b, _c, _d, _e;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+            (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+            shimmerRef.current = null;
+            (_c = doorAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+            doorAnimationRef.current = null;
+            (_d = lightAnimationRef.current) === null || _d === void 0 ? void 0 : _d.revert();
+            lightAnimationRef.current = null;
+            (_e = handleAnimationRef.current) === null || _e === void 0 ? void 0 : _e.revert();
+            handleAnimationRef.current = null;
+        };
+    }, [prefersReducedMotion]);
+    const toggleDoor = () => {
+        var _a, _b, _c;
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        if (!door || !light || !handle) {
+            return;
+        }
+        const nextOpen = !isDoorOpenRef.current;
+        isDoorOpenRef.current = nextOpen;
+        (_a = doorAnimationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        (_b = lightAnimationRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        (_c = handleAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+        if (prefersReducedMotion) {
+            door.style.transform = nextOpen ? 'rotateY(-56deg) translateX(-9px)' : 'rotateY(-2deg) translateX(0)';
+            light.style.opacity = nextOpen ? '0.76' : '0.2';
+            light.style.transform = nextOpen ? 'scaleX(1.18)' : 'scaleX(0.78)';
+            return;
+        }
+        doorAnimationRef.current = animejs.animate(door, {
+            rotateY: nextOpen ? -56 : -2,
+            translateX: nextOpen ? -9 : 0,
+            duration: 760,
+            ease: 'outCubic',
+        });
+        lightAnimationRef.current = animejs.animate(light, {
+            opacity: nextOpen ? 0.76 : 0.2,
+            scaleX: nextOpen ? 1.18 : 0.78,
+            duration: 760,
+            ease: 'outCubic',
+        });
+        handleAnimationRef.current = animejs.animate(handle, {
+            scale: [1, 1.22, 1],
+            rotate: nextOpen ? [0, 18, 0] : [0, -18, 0],
+            duration: 520,
+            ease: 'inOutSine',
+        });
+    };
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn('relative flex min-h-dvh w-full items-center justify-center overflow-hidden px-4 py-8', className), style: doorStyle, children: [jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.75),transparent_34%),linear-gradient(180deg,rgba(250,250,250,0.96),rgba(244,244,245,0.72))] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.08),transparent_34%),linear-gradient(180deg,rgba(24,24,27,0.96),rgba(9,9,11,0.92))]" }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.05))] dark:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.34))]" }), jsxRuntime.jsxs("div", { className: "grid w-full max-w-4xl items-center gap-4 md:grid-cols-[minmax(0,0.9fr)_minmax(280px,0.78fr)] md:gap-6", children: [jsxRuntime.jsxs("section", { className: "order-2 text-center md:order-1 md:text-left", children: [jsxRuntime.jsx("h3", { className: utils.cn('whitespace-nowrap text-[clamp(2.15rem,8vw,3.4rem)] font-black leading-none tracking-normal md:text-[clamp(2.6rem,4.5vw,4rem)] bg-linear-to-r bg-clip-text text-transparent', lib.themeButtonGradientClass), children: "Page Not Found" }), jsxRuntime.jsx("p", { className: "mx-auto mt-5 max-w-xl text-base leading-7 text-muted-foreground md:mx-0 md:text-lg", children: "The page you're looking for doesn't exist" }), jsxRuntime.jsx("a", { href: homeUrl, className: utils.cn('mt-4 inline-flex text-sm font-semibold underline underline-offset-4 transition-opacity hover:opacity-80', lib.themeIconColor, 'decoration-current'), children: "Back to Homepage" }), jsxRuntime.jsx("span", { className: utils.cn('mt-9 inline-flex size-2 rounded-full', lib.themeBgColor) })] }), jsxRuntime.jsx("section", { className: "order-1 flex justify-center md:order-2", children: jsxRuntime.jsxs("div", { className: "relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] [perspective:1200px]", children: [jsxRuntime.jsx("div", { "data-not-found-light": "", className: "absolute left-[14%] top-[7%] h-[86%] w-[72%] rounded-[28px] bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.96),color-mix(in_srgb,var(--not-found-theme)_42%,transparent)_42%,transparent_72%)] opacity-25 blur-xl" }), jsxRuntime.jsx("div", { className: "absolute inset-[4%] rounded-[32px] border border-black/10 bg-neutral-950/5 shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-white/5" }), jsxRuntime.jsx("div", { className: "absolute inset-[8%] rounded-[26px] bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(228,228,231,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] dark:bg-[linear-gradient(180deg,rgba(39,39,42,0.92),rgba(24,24,27,0.96))]" }), jsxRuntime.jsxs("div", { "data-not-found-door": "", className: "absolute inset-[8%] origin-left rounded-[26px] border border-black/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.92),rgba(212,212,216,0.9))] shadow-2xl shadow-black/20 will-change-transform dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(63,63,70,0.96),rgba(24,24,27,0.98))]", children: [jsxRuntime.jsxs("div", { className: "absolute inset-4 overflow-hidden rounded-[20px] border border-black/10 dark:border-white/10", children: [jsxRuntime.jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/3 -skew-x-12 bg-white/35 blur-md dark:bg-white/12" }), jsxRuntime.jsx("div", { className: "absolute inset-x-5 top-5 h-[30%] rounded-2xl border border-black/10 bg-white/35 dark:border-white/10 dark:bg-white/5" }), jsxRuntime.jsxs("a", { href: homeUrl, className: "absolute inset-x-5 bottom-5 flex h-[39%] flex-col items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white/25 text-sm text-muted-foreground transition-opacity hover:opacity-80 dark:border-white/10 dark:bg-white/5", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] })] }), jsxRuntime.jsxs("div", { "data-not-found-plate": "", className: "absolute left-1/2 top-[18%] flex h-[88px] w-[156px] -translate-x-1/2 items-center justify-center overflow-hidden rounded-2xl border border-black/10 bg-white/86 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-black/30", children: [jsxRuntime.jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/2 -skew-x-12 bg-white/60 blur-md dark:bg-white/15" }), jsxRuntime.jsx("span", { className: utils.cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', lib.themeButtonGradientClass), children: "404" })] }), jsxRuntime.jsx("button", { type: "button", "data-not-found-handle": "", className: "absolute right-[16%] top-1/2 z-10 size-6 rounded-full border border-black/10 bg-[var(--not-found-theme)] shadow-lg shadow-black/20 outline-none ring-offset-2 transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:ring-[var(--not-found-theme)] dark:border-white/15", "aria-label": "Toggle the 404 door", onClick: toggleDoor })] }), dust.map(dot => (jsxRuntime.jsx("span", { "data-not-found-dust": "", className: "absolute rounded-full bg-[var(--not-found-theme)] opacity-0", style: {
+                                        left: dot.left,
+                                        top: dot.top,
+                                        width: dot.size,
+                                        height: dot.size,
+                                    } }, dot.id)))] }) })] })] }));
+}
+
+exports.AnimeNotFoundPage = AnimeNotFoundPage;

package/dist/main/anime/anime-not-found-page.mjs

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { themeSvgIconColor, themeButtonGradientClass, themeIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { createTimeline, stagger, animate } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { useRef, useMemo, useEffect } from 'react';
+
+const dust = Array.from({ length: 10 }, (_, index) => ({
+    id: index,
+    left: `${12 + index * 8}%`,
+    top: `${18 + (index % 5) * 13}%`,
+    size: 3 + (index % 3),
+}));
+function AnimeNotFoundPage({ siteIcon, homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/', className, }) {
+    const rootRef = useRef(null);
+    const timelineRef = useRef(null);
+    const shimmerRef = useRef(null);
+    const doorAnimationRef = useRef(null);
+    const lightAnimationRef = useRef(null);
+    const handleAnimationRef = useRef(null);
+    const isDoorOpenRef = useRef(true);
+    const prefersReducedMotion = useReducedMotion();
+    const doorStyle = useMemo(() => ({
+        '--not-found-theme': themeSvgIconColor,
+    }), []);
+    useEffect(() => {
+        var _a, _b;
+        const root = rootRef.current;
+        if (!root || prefersReducedMotion) {
+            return undefined;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const plate = root.querySelector('[data-not-found-plate]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        const dustNodes = Array.from(root.querySelectorAll('[data-not-found-dust]'));
+        if (!door || !light || !plate || !handle) {
+            return undefined;
+        }
+        door.style.transform = 'rotateY(-46deg) translateX(-7px)';
+        light.style.opacity = '0.7';
+        light.style.transform = 'scaleX(1.12)';
+        (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        timelineRef.current = createTimeline({ loop: true })
+            .add(plate, {
+            translateY: [0, -3, 0],
+            scale: [1, 1.025, 1],
+            duration: 1400,
+            ease: 'inOutSine',
+        })
+            .add(plate, {
+            translateY: [0, -3, 0],
+            scale: [1, 1.025, 1],
+            duration: 1400,
+            ease: 'inOutSine',
+        }, '+=900')
+            .add(dustNodes, {
+            opacity: [0, 0.72, 0],
+            translateY: [14, -18],
+            translateX: (_target, index) => (index % 2 === 0 ? 10 : -10),
+            scale: [0.4, 1, 0.6],
+            duration: 1800,
+            delay: stagger(80),
+            ease: 'outSine',
+        }, '<+=200');
+        (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        shimmerRef.current = animate(root.querySelectorAll('[data-not-found-shimmer]'), {
+            translateX: ['-120%', '120%'],
+            opacity: [0, 0.8, 0],
+            duration: 2400,
+            delay: stagger(160),
+            ease: 'inOutSine',
+            loop: true,
+        });
+        return () => {
+            var _a, _b, _c, _d, _e;
+            (_a = timelineRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+            timelineRef.current = null;
+            (_b = shimmerRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+            shimmerRef.current = null;
+            (_c = doorAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+            doorAnimationRef.current = null;
+            (_d = lightAnimationRef.current) === null || _d === void 0 ? void 0 : _d.revert();
+            lightAnimationRef.current = null;
+            (_e = handleAnimationRef.current) === null || _e === void 0 ? void 0 : _e.revert();
+            handleAnimationRef.current = null;
+        };
+    }, [prefersReducedMotion]);
+    const toggleDoor = () => {
+        var _a, _b, _c;
+        const root = rootRef.current;
+        if (!root) {
+            return;
+        }
+        const door = root.querySelector('[data-not-found-door]');
+        const light = root.querySelector('[data-not-found-light]');
+        const handle = root.querySelector('[data-not-found-handle]');
+        if (!door || !light || !handle) {
+            return;
+        }
+        const nextOpen = !isDoorOpenRef.current;
+        isDoorOpenRef.current = nextOpen;
+        (_a = doorAnimationRef.current) === null || _a === void 0 ? void 0 : _a.revert();
+        (_b = lightAnimationRef.current) === null || _b === void 0 ? void 0 : _b.revert();
+        (_c = handleAnimationRef.current) === null || _c === void 0 ? void 0 : _c.revert();
+        if (prefersReducedMotion) {
+            door.style.transform = nextOpen ? 'rotateY(-56deg) translateX(-9px)' : 'rotateY(-2deg) translateX(0)';
+            light.style.opacity = nextOpen ? '0.76' : '0.2';
+            light.style.transform = nextOpen ? 'scaleX(1.18)' : 'scaleX(0.78)';
+            return;
+        }
+        doorAnimationRef.current = animate(door, {
+            rotateY: nextOpen ? -56 : -2,
+            translateX: nextOpen ? -9 : 0,
+            duration: 760,
+            ease: 'outCubic',
+        });
+        lightAnimationRef.current = animate(light, {
+            opacity: nextOpen ? 0.76 : 0.2,
+            scaleX: nextOpen ? 1.18 : 0.78,
+            duration: 760,
+            ease: 'outCubic',
+        });
+        handleAnimationRef.current = animate(handle, {
+            scale: [1, 1.22, 1],
+            rotate: nextOpen ? [0, 18, 0] : [0, -18, 0],
+            duration: 520,
+            ease: 'inOutSine',
+        });
+    };
+    return (jsxs("div", { ref: rootRef, className: cn('relative flex min-h-dvh w-full items-center justify-center overflow-hidden px-4 py-8', className), style: doorStyle, children: [jsx("div", { className: "pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.75),transparent_34%),linear-gradient(180deg,rgba(250,250,250,0.96),rgba(244,244,245,0.72))] dark:bg-[radial-gradient(circle_at_50%_20%,rgba(255,255,255,0.08),transparent_34%),linear-gradient(180deg,rgba(24,24,27,0.96),rgba(9,9,11,0.92))]" }), jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.05))] dark:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,0.34))]" }), jsxs("div", { className: "grid w-full max-w-4xl items-center gap-4 md:grid-cols-[minmax(0,0.9fr)_minmax(280px,0.78fr)] md:gap-6", children: [jsxs("section", { className: "order-2 text-center md:order-1 md:text-left", children: [jsx("h3", { className: cn('whitespace-nowrap text-[clamp(2.15rem,8vw,3.4rem)] font-black leading-none tracking-normal md:text-[clamp(2.6rem,4.5vw,4rem)] bg-linear-to-r bg-clip-text text-transparent', themeButtonGradientClass), children: "Page Not Found" }), jsx("p", { className: "mx-auto mt-5 max-w-xl text-base leading-7 text-muted-foreground md:mx-0 md:text-lg", children: "The page you're looking for doesn't exist" }), jsx("a", { href: homeUrl, className: cn('mt-4 inline-flex text-sm font-semibold underline underline-offset-4 transition-opacity hover:opacity-80', themeIconColor, 'decoration-current'), children: "Back to Homepage" }), jsx("span", { className: cn('mt-9 inline-flex size-2 rounded-full', themeBgColor) })] }), jsx("section", { className: "order-1 flex justify-center md:order-2", children: jsxs("div", { className: "relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] [perspective:1200px]", children: [jsx("div", { "data-not-found-light": "", className: "absolute left-[14%] top-[7%] h-[86%] w-[72%] rounded-[28px] bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.96),color-mix(in_srgb,var(--not-found-theme)_42%,transparent)_42%,transparent_72%)] opacity-25 blur-xl" }), jsx("div", { className: "absolute inset-[4%] rounded-[32px] border border-black/10 bg-neutral-950/5 shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-white/5" }), jsx("div", { className: "absolute inset-[8%] rounded-[26px] bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(228,228,231,0.86))] shadow-[inset_0_1px_0_rgba(255,255,255,0.85)] dark:bg-[linear-gradient(180deg,rgba(39,39,42,0.92),rgba(24,24,27,0.96))]" }), jsxs("div", { "data-not-found-door": "", className: "absolute inset-[8%] origin-left rounded-[26px] border border-black/10 bg-[linear-gradient(145deg,rgba(255,255,255,0.92),rgba(212,212,216,0.9))] shadow-2xl shadow-black/20 will-change-transform dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(63,63,70,0.96),rgba(24,24,27,0.98))]", children: [jsxs("div", { className: "absolute inset-4 overflow-hidden rounded-[20px] border border-black/10 dark:border-white/10", children: [jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/3 -skew-x-12 bg-white/35 blur-md dark:bg-white/12" }), jsx("div", { className: "absolute inset-x-5 top-5 h-[30%] rounded-2xl border border-black/10 bg-white/35 dark:border-white/10 dark:bg-white/5" }), jsxs("a", { href: homeUrl, className: "absolute inset-x-5 bottom-5 flex h-[39%] flex-col items-center justify-center gap-2 rounded-2xl border border-black/10 bg-white/25 text-sm text-muted-foreground transition-opacity hover:opacity-80 dark:border-white/10 dark:bg-white/5", children: [siteIcon, jsx("span", { children: "Woops!" })] })] }), jsxs("div", { "data-not-found-plate": "", className: "absolute left-1/2 top-[18%] flex h-[88px] w-[156px] -translate-x-1/2 items-center justify-center overflow-hidden rounded-2xl border border-black/10 bg-white/86 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-black/30", children: [jsx("div", { "data-not-found-shimmer": "", className: "absolute inset-y-0 w-1/2 -skew-x-12 bg-white/60 blur-md dark:bg-white/15" }), jsx("span", { className: cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', themeButtonGradientClass), children: "404" })] }), jsx("button", { type: "button", "data-not-found-handle": "", className: "absolute right-[16%] top-1/2 z-10 size-6 rounded-full border border-black/10 bg-[var(--not-found-theme)] shadow-lg shadow-black/20 outline-none ring-offset-2 transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:ring-[var(--not-found-theme)] dark:border-white/15", "aria-label": "Toggle the 404 door", onClick: toggleDoor })] }), dust.map(dot => (jsx("span", { "data-not-found-dust": "", className: "absolute rounded-full bg-[var(--not-found-theme)] opacity-0", style: {
+                                        left: dot.left,
+                                        top: dot.top,
+                                        width: dot.size,
+                                        height: dot.size,
+                                    } }, dot.id)))] }) })] })] }));
+}
+
+export { AnimeNotFoundPage };

package/dist/main/anime/anime-spiral-loading.d.ts

@@ -0,0 +1,10 @@
+export interface AnimeSpiralLoadingProps {
+    className?: string;
+    dotCount?: number;
+    duration?: number;
+    distanceRem?: number;
+    dotSizeEm?: number;
+    fontSize?: number;
+    paused?: boolean;
+}
+export declare function AnimeSpiralLoading({ className, dotCount, duration, distanceRem, dotSizeEm, fontSize, paused, }: AnimeSpiralLoadingProps): import("react/jsx-runtime").JSX.Element;