@windrun-huaiin/third-ui 30.0.0 → 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-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/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/motion/creative-left-panel.d.ts

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

package/dist/main/motion/creative-left-panel.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+
+function CreativeLeftPanel({ children, className = '' }) {
+    return (jsxRuntime.jsx("div", { className: `relative h-full ${className}`, children: jsxRuntime.jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsxRuntime.jsx("div", { className: "absolute -left-1 -top-1 z-30", children: jsxRuntime.jsxs("div", { className: "relative h-28 w-32 bg-linear-to-br from-orange-500 via-orange-600 to-orange-700 rounded-br-[2.75rem] shadow-lg", children: [jsxRuntime.jsx("div", { className: "absolute left-4 top-4 h-10 w-10 rounded-full bg-white/30 blur-sm" }), jsxRuntime.jsx("div", { className: "absolute left-6 top-6 h-5 w-14 rotate-12 rounded bg-white/20" })] }) }), jsxRuntime.jsxs("svg", { className: "absolute bottom-0 left-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", { id: "leftGlow", x1: "0%", y1: "100%", x2: "100%", y2: "30%", children: [jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f97316", stopOpacity: "0.25" }), jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#fb923c", stopOpacity: "0.08" })] }) }), jsxRuntime.jsx(react.motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "url(#leftGlow)", strokeWidth: "22", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.4, ease: "easeOut" } }), jsxRuntime.jsx(react.motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "#fbbf24", strokeWidth: "3", strokeOpacity: "0.45", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.6, ease: "easeOut" } })] }), jsxRuntime.jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-16", children: children })] }) }));
+}
+
+exports.CreativeLeftPanel = CreativeLeftPanel;

package/dist/main/motion/creative-left-panel.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+
+function CreativeLeftPanel({ children, className = '' }) {
+    return (jsx("div", { className: `relative h-full ${className}`, children: jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsx("div", { className: "absolute -left-1 -top-1 z-30", children: jsxs("div", { className: "relative h-28 w-32 bg-linear-to-br from-orange-500 via-orange-600 to-orange-700 rounded-br-[2.75rem] shadow-lg", children: [jsx("div", { className: "absolute left-4 top-4 h-10 w-10 rounded-full bg-white/30 blur-sm" }), jsx("div", { className: "absolute left-6 top-6 h-5 w-14 rotate-12 rounded bg-white/20" })] }) }), jsxs("svg", { className: "absolute bottom-0 left-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: [jsx("defs", { children: jsxs("linearGradient", { id: "leftGlow", x1: "0%", y1: "100%", x2: "100%", y2: "30%", children: [jsx("stop", { offset: "0%", stopColor: "#f97316", stopOpacity: "0.25" }), jsx("stop", { offset: "100%", stopColor: "#fb923c", stopOpacity: "0.08" })] }) }), jsx(motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "url(#leftGlow)", strokeWidth: "22", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.4, ease: "easeOut" } }), jsx(motion.path, { d: "M 0 380 \n               Q 85 425 165 355 \n               Q 255 265 355 285 \n               Q 480 310 555 245 \n               Q 615 195 680 235", stroke: "#fbbf24", strokeWidth: "3", strokeOpacity: "0.45", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.6, ease: "easeOut" } })] }), jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-16", children: children })] }) }));
+}
+
+export { CreativeLeftPanel };

package/dist/main/motion/creative-right-panel.d.ts

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

package/dist/main/motion/creative-right-panel.js

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('motion/react');
+
+function CreativeRightPanel({ children, className = '' }) {
+    return (jsxRuntime.jsx("div", { className: `relative h-full ${className}`, children: jsxRuntime.jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsxRuntime.jsx("svg", { className: "absolute bottom-0 right-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: jsxRuntime.jsx(react.motion.path, { d: "M 0 235 \n               Q 65 195 145 245 \n               Q 220 310 345 285 \n               Q 445 265 535 355 \n               Q 615 425 680 380", stroke: "#f97316", strokeWidth: "18", strokeOpacity: "0.18", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.2, ease: "easeOut" } }) }), jsxRuntime.jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-12", children: children })] }) }));
+}
+
+exports.CreativeRightPanel = CreativeRightPanel;

package/dist/main/motion/creative-right-panel.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion } from 'motion/react';
+
+function CreativeRightPanel({ children, className = '' }) {
+    return (jsx("div", { className: `relative h-full ${className}`, children: jsxs("div", { className: "relative h-full overflow-hidden rounded-[28px] border border-border/60 bg-background/95 backdrop-blur-2xl shadow-xl", children: [jsx("svg", { className: "absolute bottom-0 right-0 z-20 h-[380px] w-full pointer-events-none", viewBox: "0 0 680 420", preserveAspectRatio: "none", fill: "none", children: jsx(motion.path, { d: "M 0 235 \n               Q 65 195 145 245 \n               Q 220 310 345 285 \n               Q 445 265 535 355 \n               Q 615 425 680 380", stroke: "#f97316", strokeWidth: "18", strokeOpacity: "0.18", strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 2.2, ease: "easeOut" } }) }), jsx("div", { className: "relative z-10 h-full p-6 sm:p-8 pb-12", children: children })] }) }));
+}
+
+export { CreativeRightPanel };