@windrun-huaiin/third-ui 30.0.0 → 31.0.0

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/index.d.ts

@@ -1,2 +1,3 @@
 export { AnimeBeamFrame, type BeamFrameProps, type BeamFrameTone, } from './anime-beam-frame';
 export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';
+export { AnimeNotFoundPage, type AnimeNotFoundPageProps } from './anime-404-page';

package/dist/main/anime/index.js

@@ -3,8 +3,10 @@
 
 var animeBeamFrame = require('./anime-beam-frame.js');
 var animeSpiralLoading = require('./anime-spiral-loading.js');
+var anime404Page = require('./anime-404-page.js');
 
 
 
 exports.AnimeBeamFrame = animeBeamFrame.AnimeBeamFrame;
 exports.AnimeSpiralLoading = animeSpiralLoading.AnimeSpiralLoading;
+exports.AnimeNotFoundPage = anime404Page.AnimeNotFoundPage;

package/dist/main/anime/index.mjs

@@ -1,3 +1,4 @@
 "use client";
 export { AnimeBeamFrame } from './anime-beam-frame.mjs';
 export { AnimeSpiralLoading } from './anime-spiral-loading.mjs';
+export { AnimeNotFoundPage } from './anime-404-page.mjs';

package/dist/main/calendar/calendar-date-range-input.js

@@ -9,7 +9,7 @@ var utils = require('@windrun-huaiin/lib/utils');
 var usePressFeedback = require('../buttons/use-press-feedback.js');
 var randomDateRangeDialog = require('./random-date-range-dialog.js');
 
-const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_PLACEHOLDER = 'Slide pick Date';
 const DEFAULT_RANGE_DAYS = 7;
 const CLEAR_PRESS_FEEDBACK_MS = 180;
 function parseDateString(value) {

package/dist/main/calendar/calendar-date-range-input.mjs

@@ -7,7 +7,7 @@ import { cn } from '@windrun-huaiin/lib/utils';
 import { usePressFeedback, resolvePressFeedbackMode } from '../buttons/use-press-feedback.mjs';
 import { RandomDateRangeDialog } from './random-date-range-dialog.mjs';
 
-const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_PLACEHOLDER = 'Slide pick Date';
 const DEFAULT_RANGE_DAYS = 7;
 const CLEAR_PRESS_FEEDBACK_MS = 180;
 function parseDateString(value) {

package/dist/main/credit/types.d.ts

@@ -29,21 +29,21 @@ export interface CreditCTAConfig {
 }
 export type CreditBucketStatus = 'active' | 'expiringSoon' | 'expired';
 export interface CreditBucket {
-    /** 业务方自定义的积分类型标识，用于映射翻译或埋点 */
+    /** Business-defined credit type identifier for translation mapping or analytics. */
     kind: string;
-    /** 若提供则使用该名称，否则由组件根据 kind 使用默认翻译 */
+    /** Display name override; otherwise the component uses the default translation for kind. */
     label?: string;
-    /** 当前积分余额 */
+    /** Current credit balance. */
     balance: number;
-    /** 该类型积分的额度上限 */
+    /** Credit limit for this credit type. */
     limit: number;
-    /** 可选状态标签，用于强调过期等状态 */
+    /** Optional status label for highlighting states such as expiration. */
     status?: CreditBucketStatus;
-    /** 积分过期时间（本地时区字符串），用于组件内部推导状态 */
+    /** Credit expiration time as a local time string, used to derive component state. */
     expiresAt?: string;
-    /** 进度百分比（0-100）；未提供时组件按 balance/limit 计算 */
+    /** Progress percentage from 0 to 100; computed from balance/limit when omitted. */
     progressPercent?: number;
-    /** 任何额外说明，如剩余天数、使用限制等 */
+    /** Additional details, such as remaining days or usage limits. */
     description?: string;
 }
 export interface SubscriptionInfo {

package/dist/main/index.d.ts

@@ -1,4 +1,5 @@
 export * from './go-to-top';
+export * from './404-page';
 export * from './loading';
 export * from './nprogress-bar';
 export * from './rich-text-expert';

package/dist/main/index.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var goToTop = require('./go-to-top.js');
+var _404Page = require('./404-page.js');
 var loading = require('./loading.js');
 var nprogressBar = require('./nprogress-bar.js');
 var richTextExpert = require('./rich-text-expert.js');
@@ -11,6 +12,7 @@ var infoTooltip = require('./info-tooltip.js');
 
 
 exports.GoToTop = goToTop.GoToTop;
+exports.NotFoundPage = _404Page.NotFoundPage;
 exports.Loading = loading.Loading;
 exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;
 exports.NProgressBar = nprogressBar.NProgressBar;

package/dist/main/index.mjs

@@ -1,5 +1,6 @@
 "use client";
 export { GoToTop } from './go-to-top.mjs';
+export { NotFoundPage } from './404-page.mjs';
 export { Loading, getLoadingCycleDurationMs } from './loading.mjs';
 export { NProgressBar } from './nprogress-bar.mjs';
 export { createRichTextRenderer, richText } from './rich-text-expert.mjs';

package/dist/main/money-price/index.d.ts

@@ -1,4 +1,4 @@
 export { MoneyPriceInteractive } from './money-price-interactive';
 export { MoneyPriceButton } from './money-price-button';
-export type { MoneyPriceConfig, MoneyPriceData, InitUserContext, MoneyPriceInteractiveProps, MoneyPriceButtonProps, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
+export type { MoneyPriceConfig, MoneyPriceData, MoneyPriceAnimeTone, MoneyPriceStrictDiffAnime, InitUserContext, MoneyPriceInteractiveProps, MoneyPriceButtonProps, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
 export { UserState } from './money-price-types';

package/dist/main/money-price/money-price-button.js

@@ -26,9 +26,9 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             return billing === 'monthly' ? 2 : 4;
         return 0;
     };
-    // OneTime 模式的按钮配置
+    // Button configuration for one-time mode.
     const getOnetimeButtonConfig = () => {
-        // 匿名用户：所有卡片都显示登录按钮
+        // Anonymous users: show the sign-in button on every card.
         if (!isAuthenticated) {
             return {
                 text: texts.getStarted,
@@ -38,11 +38,11 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             };
         }
         if (subscriptionStatus === moneyPriceTypes.UserState.Anonymous) {
-            // 已登录但状态未知 → 视为 FreeUser
+            // Signed in but status unknown: treat as FreeUser.
             console.warn('Clerk is authed OK but user is anonymous!');
             return { text: '', disabled: true, hidden: true };
         }
-        // 登录用户：OneTime 模式下所有卡片都显示购买积分按钮
+        // Signed-in users: show the buy-credits button on every card in one-time mode.
         return {
             text: texts.buyCredits || texts.upgrade,
             onClick: () => onAction(planKey, billingType),
@@ -50,9 +50,9 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             hidden: false
         };
     };
-    // 订阅模式的按钮配置
+    // Button configuration for subscription mode.
     const getSubscriptionButtonConfig = () => {
-        // 匿名用户
+        // Anonymous users.
         if (!isAuthenticated) {
             const getButtonText = () => {
                 switch (planKey) {
@@ -73,7 +73,7 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 hidden: false
             };
         }
-        // 已登录用户
+        // Signed-in users.
         switch (subscriptionStatus) {
             case moneyPriceTypes.UserState.FreeUser: {
                 if (planTier === 'F1') {
@@ -91,7 +91,7 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 };
             }
             case moneyPriceTypes.UserState.ProUser: {
-                // 不允许降级到 Free
+                // Do not allow downgrades to Free.
                 if (planTier === 'F1') {
                     return { hidden: true };
                 }
@@ -169,12 +169,12 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 return { hidden: true };
             }
             default:
-                // 已登录但状态未知 → 视为 FreeUser
+                // Signed in but status unknown: treat as FreeUser.
                 console.warn('Clerk is authed OK but user is anonymous!');
                 return { text: '', disabled: true, hidden: true };
         }
     };
-    // 主要的按钮配置函数
+    // Main button configuration function.
     const getButtonConfig = () => {
         if (billingType === 'onetime') {
             return getOnetimeButtonConfig();

package/dist/main/money-price/money-price-button.mjs

@@ -24,9 +24,9 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             return billing === 'monthly' ? 2 : 4;
         return 0;
     };
-    // OneTime 模式的按钮配置
+    // Button configuration for one-time mode.
     const getOnetimeButtonConfig = () => {
-        // 匿名用户：所有卡片都显示登录按钮
+        // Anonymous users: show the sign-in button on every card.
         if (!isAuthenticated) {
             return {
                 text: texts.getStarted,
@@ -36,11 +36,11 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             };
         }
         if (subscriptionStatus === UserState.Anonymous) {
-            // 已登录但状态未知 → 视为 FreeUser
+            // Signed in but status unknown: treat as FreeUser.
             console.warn('Clerk is authed OK but user is anonymous!');
             return { text: '', disabled: true, hidden: true };
         }
-        // 登录用户：OneTime 模式下所有卡片都显示购买积分按钮
+        // Signed-in users: show the buy-credits button on every card in one-time mode.
         return {
             text: texts.buyCredits || texts.upgrade,
             onClick: () => onAction(planKey, billingType),
@@ -48,9 +48,9 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
             hidden: false
         };
     };
-    // 订阅模式的按钮配置
+    // Button configuration for subscription mode.
     const getSubscriptionButtonConfig = () => {
-        // 匿名用户
+        // Anonymous users.
         if (!isAuthenticated) {
             const getButtonText = () => {
                 switch (planKey) {
@@ -71,7 +71,7 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 hidden: false
             };
         }
-        // 已登录用户
+        // Signed-in users.
         switch (subscriptionStatus) {
             case UserState.FreeUser: {
                 if (planTier === 'F1') {
@@ -89,7 +89,7 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 };
             }
             case UserState.ProUser: {
-                // 不允许降级到 Free
+                // Do not allow downgrades to Free.
                 if (planTier === 'F1') {
                     return { hidden: true };
                 }
@@ -167,12 +167,12 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
                 return { hidden: true };
             }
             default:
-                // 已登录但状态未知 → 视为 FreeUser
+                // Signed in but status unknown: treat as FreeUser.
                 console.warn('Clerk is authed OK but user is anonymous!');
                 return { text: '', disabled: true, hidden: true };
         }
     };
-    // 主要的按钮配置函数
+    // Main button configuration function.
     const getButtonConfig = () => {
         if (billingType === 'onetime') {
             return getOnetimeButtonConfig();

package/dist/main/money-price/money-price-config-util.d.ts

@@ -1,52 +1,52 @@
 /**
  * Money Price Configuration
- * 价格组件配置文件
+ * Pricing component configuration.
  */
 import type { MoneyPriceConfig, PaymentProviderConfig, EnhancePricePlan } from './money-price-types';
 /**
- * 获取当前激活的支付供应商配置
+ * Get the currently active payment provider configuration.
  *
- * 🔒 安全设计：
- * - util层负责从config中提取激活的provider配置
- * - 只返回提取的结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer extracts the active provider configuration from the config.
+ * - Only the extracted result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 当前激活的支付供应商配置
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The currently active payment provider configuration.
  */
 export declare function getActiveProviderConfigUtil(config: MoneyPriceConfig): PaymentProviderConfig;
 export declare function getProductPricing(productKey: 'F1' | 'P2' | 'U3', billingType: string, provider: string, config: MoneyPriceConfig): EnhancePricePlan;
 /**
- * 根据 priceId 获取对应的积分数量
+ * Get the credit amount for a price ID.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取所需数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only the required data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 对应的积分数量，或null
+ * @param priceId - Price ID to query.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching credit amount, or null.
  */
 export declare function getCreditsFromPriceIdUtil(priceId: string | undefined, config: MoneyPriceConfig): number | null;
 /**
- * 根据查询参数获取价格配置
+ * Get price configuration by query parameters.
  *
- * 支持三种查询方式：
- * 1. 按 priceId 直接查询
- * 2. 按 plan + billingType 查询
- * 3. 按 plan 查询
+ * Supported query modes:
+ * 1. Query directly by priceId.
+ * 2. Query by plan and billingType.
+ * 3. Query by plan.
  *
- * 🔒 安全设计：
- * - util层负责解析config，提取和匹配数据
- * - 只返回查询结果，不暴露任何config结构
- * - 调用方（应用层）通过wrapper隐藏config对象
+ * Security design:
+ * - The utility layer parses the config and extracts only matching data.
+ * - Only the query result is returned; the full config structure is not exposed.
+ * - Application-level wrappers hide the config object from callers.
  *
- * @param priceId - 查询的价格ID（可选）
- * @param plan - 查询的套餐名称如'P2'、'U3'（可选）
- * @param billingType - 查询的计费类型如'monthly'、'yearly'（可选）
- * @param config - MoneyPriceConfig对象（由应用层提供）
- * @returns 匹配的价格配置，包含计算好的元数据（priceName、description、interval）
+ * @param priceId - Optional price ID to query.
+ * @param plan - Optional plan name, such as 'P2' or 'U3'.
+ * @param billingType - Optional billing type, such as 'monthly' or 'yearly'.
+ * @param config - MoneyPriceConfig object provided by the application layer.
+ * @returns The matching price config with derived metadata: priceName, description, and interval.
  */
 export declare function getPriceConfigUtil(priceId: string | undefined, plan: string | undefined, billingType: string | undefined, config: MoneyPriceConfig): (EnhancePricePlan & {
     priceName: string;