@windrun-huaiin/third-ui 30.0.0 → 30.1.0

package/dist/fuma/fuma-page-genarator.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import type { LLMCopyButtonProps, LLMCopyButton } from './mdx/toc-base';
 export type FumaPageTocRenderMode = 'portable-clerk' | 'fumadocs-clerk' | 'fumadocs-normal';
 interface FumaPageParams {
@@ -8,10 +8,6 @@ interface FumaPageParams {
     mdxSourceDir: string;
     githubBaseUrl?: string;
     copyButtonComponent?: ReactElement<LLMCopyButtonProps, typeof LLMCopyButton>;
-    siteIcon: ReactNode;
-    FallbackPage: React.ComponentType<{
-        siteIcon: ReactNode;
-    }>;
     supportedLocales?: string[];
     showBreadcrumb?: boolean;
     showTableOfContent?: boolean;
@@ -20,7 +16,7 @@ interface FumaPageParams {
     localePrefixAsNeeded?: boolean;
     defaultLocale?: string;
 }
-export declare function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales, showBreadcrumb, showTableOfContent, tocRenderMode, showTableOfContentPopover, localePrefixAsNeeded, defaultLocale, }: FumaPageParams): {
+export declare function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, supportedLocales, showBreadcrumb, showTableOfContent, tocRenderMode, showTableOfContentPopover, localePrefixAsNeeded, defaultLocale, }: FumaPageParams): {
     Page: ({ params }: {
         params: Promise<{
             locale: string;

package/dist/fuma/fuma-page-genarator.js

@@ -6,10 +6,11 @@ var page = require('fumadocs-ui/page');
 var React = require('react');
 var tocFooterWrapper = require('./mdx/toc-footer-wrapper.js');
 var utils = require('@windrun-huaiin/lib/utils');
+var navigation = require('next/navigation');
 var tocClerkPortable = require('./mdx/toc-clerk-portable.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
-function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     var _a;
     const isLocalMdDebugEnabled = ((_a = process.env.LOCAL_MD_DEBUG) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
     const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
@@ -49,7 +50,7 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
                 totalElapsedMs: durationMs(pageStartedAt),
             });
             if (!page$1) {
-                return (jsxRuntime.jsx(page.DocsPage, { full: true, breadcrumb: { enabled: false }, footer: { enabled: false }, tableOfContent: { enabled: false }, tableOfContentPopover: { enabled: false }, className: "max-w-none px-0 py-0", children: jsxRuntime.jsx(FallbackPage, { siteIcon: siteIcon }) }));
+                navigation.notFound();
             }
             const path = githubBaseUrl ? `${mdxSourceDir}/${page$1.path}` : undefined;
             const tocFooterElement = (jsxRuntime.jsx(tocFooterWrapper.TocFooterWrapper, { lastModified: page$1.data.date, copyButtonComponent: copyButtonComponent

package/dist/fuma/fuma-page-genarator.mjs

@@ -4,10 +4,11 @@ import { DocsPage, DocsTitle, DocsDescription, DocsBody } from 'fumadocs-ui/page
 import { cloneElement } from 'react';
 import { TocFooterWrapper } from './mdx/toc-footer-wrapper.mjs';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib/utils';
+import { notFound } from 'next/navigation';
 import { PortableClerkTOC, PortableClerkTOCTitle } from './mdx/toc-clerk-portable.mjs';
 import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
-function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, siteIcon, FallbackPage, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
+function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSourceDir, githubBaseUrl, copyButtonComponent, supportedLocales = ['en'], showBreadcrumb = true, showTableOfContent = true, tocRenderMode = 'portable-clerk', showTableOfContentPopover = false, localePrefixAsNeeded = true, defaultLocale = 'en', }) {
     var _a;
     const isLocalMdDebugEnabled = ((_a = process.env.LOCAL_MD_DEBUG) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
     const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
@@ -47,7 +48,7 @@ function createFumaPage({ sourceKey, mdxContentSource, getMDXComponents, mdxSour
                 totalElapsedMs: durationMs(pageStartedAt),
             });
             if (!page) {
-                return (jsx(DocsPage, { full: true, breadcrumb: { enabled: false }, footer: { enabled: false }, tableOfContent: { enabled: false }, tableOfContentPopover: { enabled: false }, className: "max-w-none px-0 py-0", children: jsx(FallbackPage, { siteIcon: siteIcon }) }));
+                notFound();
             }
             const path = githubBaseUrl ? `${mdxSourceDir}/${page.path}` : undefined;
             const tocFooterElement = (jsx(TocFooterWrapper, { lastModified: page.data.date, copyButtonComponent: copyButtonComponent

package/dist/main/404-page.d.ts

@@ -0,0 +1,12 @@
+import { type SupportedThemeColor } from '@windrun-huaiin/base-ui/lib';
+import { type ReactNode } from 'react';
+interface NotFoundPageProps {
+    siteIcon: ReactNode;
+    errorIcon?: ReactNode;
+    className?: string;
+    compact?: boolean;
+    themeClass?: SupportedThemeColor;
+    animated?: boolean;
+}
+export declare function NotFoundPage({ siteIcon, errorIcon, className, compact, themeClass, animated, }: NotFoundPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/404-page.js

@@ -0,0 +1,66 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var shared = require('@windrun-huaiin/base-ui/components/shared');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+var React = require('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 THEME_VIA_CLASS_MAP = {
+    'text-purple-500': 'via-purple-500/20',
+    'text-orange-500': 'via-orange-500/20',
+    'text-indigo-500': 'via-indigo-500/20',
+    'text-emerald-500': 'via-emerald-500/20',
+    'text-rose-500': 'via-rose-500/20',
+};
+function NotFoundPage({ siteIcon, errorIcon, className, compact = false, themeClass, animated = true, }) {
+    const [glitchText, setGlitchText] = React.useState('404');
+    const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : lib.themeIconColor;
+    const activeGradientClass = themeClass ? lib.THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : lib.themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : lib.themeBgColor;
+    const activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : lib.themeViaColor;
+    React.useEffect(() => {
+        if (!animated) {
+            setGlitchText('404');
+            return undefined;
+        }
+        const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+        const interval = setInterval(() => {
+            if (Math.random() < 0.5) {
+                setGlitchText('404');
+            }
+            else {
+                const randomChars = Array.from({ length: 3 }, () => glitchChars[Math.floor(Math.random() * glitchChars.length)]).join('');
+                setGlitchText(randomChars);
+            }
+        }, 600);
+        return () => clearInterval(interval);
+    }, [animated]);
+    return (jsxRuntime.jsxs("div", { className: utils.cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), children: [jsxRuntime.jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxRuntime.jsxs("div", { className: "relative flex justify-center", children: [jsxRuntime.jsx("h1", { className: utils.cn('text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none', activeGradientClass), style: {
+                                    fontFamily: 'Montserrat, monospace',
+                                    textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+                                    letterSpacing: '0.1em',
+                                }, children: glitchText }), jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsxRuntime.jsx("div", { className: utils.cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass) }) })] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" }), jsxRuntime.jsx("a", { href: homeUrl, className: utils.cn('inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] }), jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxRuntime.jsxs("a", { href: homeUrl, className: "flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("div", { className: utils.cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsxRuntime.jsx(shared.NotFoundIcon, {}), jsxRuntime.jsx("span", { children: "Error Code: 404" })] })] })] }), jsxRuntime.jsxs("div", { className: utils.cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed'), children: [jsxRuntime.jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+                            backgroundSize: '50px 50px',
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsxRuntime.jsx("div", { className: utils.cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass), style: {
+                            left: `${20 + i * 15}%`,
+                            top: `${30 + (i % 3) * 20}%`,
+                            animationDelay: `${i * 0.5}s`,
+                            animationDuration: `${2 + i * 0.3}s`,
+                        } }, i)))] })] }));
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/main/404-page.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { NotFoundIcon } from '@windrun-huaiin/base-ui/components/shared';
+import { THEME_BUTTON_GRADIENT_CLASS_MAP, themeButtonGradientClass, themeViaColor, themeIconColor, themeBgColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useState, useEffect } 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 THEME_VIA_CLASS_MAP = {
+    'text-purple-500': 'via-purple-500/20',
+    'text-orange-500': 'via-orange-500/20',
+    'text-indigo-500': 'via-indigo-500/20',
+    'text-emerald-500': 'via-emerald-500/20',
+    'text-rose-500': 'via-rose-500/20',
+};
+function NotFoundPage({ siteIcon, errorIcon, className, compact = false, themeClass, animated = true, }) {
+    const [glitchText, setGlitchText] = useState('404');
+    const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+    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 activeViaClass = themeClass ? THEME_VIA_CLASS_MAP[themeClass] : themeViaColor;
+    useEffect(() => {
+        if (!animated) {
+            setGlitchText('404');
+            return undefined;
+        }
+        const glitchChars = ['4', '0', '4', '?', '#', '!', '*', '&', '%', '$'];
+        const interval = setInterval(() => {
+            if (Math.random() < 0.5) {
+                setGlitchText('404');
+            }
+            else {
+                const randomChars = Array.from({ length: 3 }, () => glitchChars[Math.floor(Math.random() * glitchChars.length)]).join('');
+                setGlitchText(randomChars);
+            }
+        }, 600);
+        return () => clearInterval(interval);
+    }, [animated]);
+    return (jsxs("div", { className: cn('relative flex w-full flex-col items-center justify-center px-4 py-8', compact ? 'h-full min-h-full' : 'min-h-dvh', className), children: [jsxs("div", { className: "text-center space-y-8 max-w-2xl", children: [jsxs("div", { className: "relative flex justify-center", children: [jsx("h1", { className: cn('text-8xl md:text-9xl font-bold bg-linear-to-r bg-clip-text text-transparent select-none', activeGradientClass), style: {
+                                    fontFamily: 'Montserrat, monospace',
+                                    textShadow: '0 0 30px rgba(172, 98, 253, 0.3)',
+                                    letterSpacing: '0.1em',
+                                }, children: glitchText }), jsx("div", { className: "absolute inset-0 pointer-events-none", children: jsx("div", { className: cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass) }) })] }), jsxs("div", { className: "space-y-4", children: [jsx("h2", { className: "text-2xl md:text-3xl font-semibold text-foreground", children: "Page Not Found" }), jsx("p", { className: "text-lg text-muted-foreground max-w-md mx-auto leading-relaxed", children: "The page you're looking for doesn't exist" }), jsx("a", { href: homeUrl, className: cn('inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] }), jsxs("div", { className: "flex justify-center items-center gap-8 pt-8 opacity-60", children: [jsxs("a", { href: homeUrl, className: "flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80", children: [siteIcon, jsx("span", { children: "Woops!" })] }), jsx("div", { className: cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass) }), jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [errorIcon !== null && errorIcon !== void 0 ? errorIcon : jsx(NotFoundIcon, {}), jsx("span", { children: "Error Code: 404" })] })] })] }), jsxs("div", { className: cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed'), children: [jsx("div", { className: "absolute inset-0 opacity-[0.02] dark:opacity-[0.05]", style: {
+                            backgroundImage: `
+                linear-gradient(rgba(172, 98, 253, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(172, 98, 253, 0.1) 1px, transparent 1px)
+              `,
+                            backgroundSize: '50px 50px',
+                        } }), Array.from({ length: 6 }).map((_, i) => (jsx("div", { className: cn('absolute w-2 h-2 rounded-full', animated && 'animate-bounce', activeBgClass), style: {
+                            left: `${20 + i * 15}%`,
+                            top: `${30 + (i % 3) * 20}%`,
+                            animationDelay: `${i * 0.5}s`,
+                            animationDuration: `${2 + i * 0.3}s`,
+                        } }, i)))] })] }));
+}
+
+export { NotFoundPage };

package/dist/main/anime/anime-404-page.d.ts

@@ -0,0 +1,14 @@
+import { type SupportedThemeColor } from '@windrun-huaiin/base-ui/lib';
+import { type ReactNode } from 'react';
+export interface AnimeNotFoundPageProps {
+    siteIcon: ReactNode;
+    homeUrl?: string;
+    className?: string;
+    compact?: boolean;
+    themeClass?: SupportedThemeColor;
+    themeColor?: string;
+    ambientAnimated?: boolean;
+    doorOpen?: boolean;
+    onDoorOpenChange?: (open: boolean) => void;
+}
+export declare function AnimeNotFoundPage({ siteIcon, homeUrl, className, compact, themeClass, themeColor, ambientAnimated, doorOpen, onDoorOpenChange, }: AnimeNotFoundPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,197 @@
+"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 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 = 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 messageAnimationRef = React.useRef(null);
+    const isDoorOpenRef = React.useRef(doorOpen !== null && doorOpen !== void 0 ? doorOpen : false);
+    const prefersReducedMotion = react.useReducedMotion();
+    const activeThemeClass = themeClass !== null && themeClass !== void 0 ? themeClass : lib.themeIconColor;
+    const activeGradientClass = themeClass ? lib.THEME_BUTTON_GRADIENT_CLASS_MAP[themeClass] : lib.themeButtonGradientClass;
+    const activeBgClass = themeClass ? THEME_BG_CLASS_MAP[themeClass] : lib.themeBgColor;
+    const doorStyle = React.useMemo(() => ({
+        '--not-found-theme': themeColor !== null && themeColor !== void 0 ? themeColor : lib.themeSvgIconColor,
+    }), [themeColor]);
+    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 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 = 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');
+            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, _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 = React.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 = animejs.animate(door, {
+            rotateY: nextOpen ? -72 : -2,
+            translateX: nextOpen ? -12 : 0,
+            duration: 1050,
+            ease: 'inOutCubic',
+        });
+        lightAnimationRef.current = animejs.animate(light, {
+            opacity: nextOpen ? 0.8 : 0.2,
+            scaleX: nextOpen ? 1.28 : 0.78,
+            duration: 1050,
+            ease: 'inOutSine',
+        });
+        handleAnimationRef.current = animejs.animate(handle, {
+            scale: [1, 1.05, 1],
+            duration: 520,
+            ease: 'inOutSine',
+        });
+        if (message) {
+            messageAnimationRef.current = animejs.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]);
+    React.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 (jsxRuntime.jsxs("div", { ref: rootRef, className: utils.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: [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: "flex w-full max-w-3xl flex-col items-center gap-5", children: [jsxRuntime.jsx("section", { className: "text-center", children: jsxRuntime.jsx("h3", { className: utils.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" }) }), jsxRuntime.jsx("section", { className: "flex w-full justify-center", children: jsxRuntime.jsxs("div", { className: "relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] perspective-distant", 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("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: [jsxRuntime.jsx("span", { className: "block", children: "The page" }), jsxRuntime.jsx("span", { className: "block", children: "you're looking for" }), jsxRuntime.jsx("span", { className: "block", children: "doesn't exist" })] }), jsxRuntime.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 }), jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "absolute inset-4 overflow-hidden rounded-[20px]", 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.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: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [siteIcon, jsxRuntime.jsx("span", { children: "Woops!" })] }), jsxRuntime.jsx("span", { className: utils.cn('text-xs font-semibold underline underline-offset-4', activeThemeClass, 'decoration-current'), children: "Back to Homepage" })] })] }), 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', activeGradientClass), children: "404" })] }), jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsx("span", { className: "absolute size-10 rounded-full bg-(--not-found-theme) opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-25" }), jsxRuntime.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: jsxRuntime.jsx("span", { className: "absolute right-1 top-1 size-1 rounded-full bg-white/75" }) })] }) })] }), dust.map(dot => (jsxRuntime.jsx("span", { "data-not-found-dust": "", className: utils.cn('absolute rounded-full opacity-0', activeBgClass), style: {
+                                        left: dot.left,
+                                        top: dot.top,
+                                        width: dot.size,
+                                        height: dot.size,
+                                    } }, dot.id)))] }) })] })] }));
+}
+
+exports.AnimeNotFoundPage = AnimeNotFoundPage;