@windrun-huaiin/third-ui 30.0.0 → 31.0.0

package/src/main/404-page.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { NotFoundIcon } from '@windrun-huaiin/base-ui/components/shared';
+import {
+  THEME_BUTTON_GRADIENT_CLASS_MAP,
+  themeBgColor,
+  themeButtonGradientClass,
+  themeIconColor,
+  themeViaColor,
+  type SupportedThemeColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useState, type ReactNode } from 'react';
+
+interface NotFoundPageProps {
+  siteIcon: ReactNode;
+  errorIcon?: ReactNode;
+  className?: string;
+  compact?: boolean;
+  themeClass?: SupportedThemeColor;
+  animated?: boolean;
+}
+
+const THEME_BG_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  '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: Record<SupportedThemeColor, string> = {
+  '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',
+};
+
+export function NotFoundPage({
+  siteIcon,
+  errorIcon,
+  className,
+  compact = false,
+  themeClass,
+  animated = true,
+}: NotFoundPageProps) {
+  const [glitchText, setGlitchText] = useState('404');
+  const homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/';
+  const activeThemeClass = 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 (
+    <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)}>
+      <div className="text-center space-y-8 max-w-2xl">
+        <div className="relative flex justify-center">
+          <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',
+            }}
+          >
+            {glitchText}
+          </h1>
+          <div className="absolute inset-0 pointer-events-none">
+            <div className={cn('h-full w-full bg-linear-to-b from-transparent to-transparent', animated && 'animate-pulse', activeViaClass)} />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl md:text-3xl font-semibold text-foreground">
+            Page Not Found
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-md mx-auto leading-relaxed">
+            The page you&#39;re looking for doesn&#39;t exist
+          </p>
+          <a
+            href={homeUrl}
+            className={cn(
+              'inline-flex text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80',
+              activeThemeClass,
+              'decoration-current'
+            )}
+          >
+            Back to Homepage
+          </a>
+        </div>
+
+        <div className="flex justify-center items-center gap-8 pt-8 opacity-60">
+          <a
+            href={homeUrl}
+            className="flex items-center gap-2 text-sm text-muted-foreground transition-opacity hover:opacity-80"
+          >
+            {siteIcon}
+            <span>Woops!</span>
+          </a>
+          <div className={cn('w-2 h-2 rounded-full', animated && 'animate-ping', activeBgClass)} />
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            {errorIcon ?? <NotFoundIcon />}
+            <span>Error Code: 404</span>
+          </div>
+        </div>
+      </div>
+
+      <div className={cn('pointer-events-none inset-0 overflow-hidden -z-10', compact ? 'absolute' : 'fixed')}>
+        <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) => (
+          <div
+            key={i}
+            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`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/main/anime/anime-404-page.tsx

@@ -0,0 +1,344 @@
+'use client';
+
+import {
+  THEME_BUTTON_GRADIENT_CLASS_MAP,
+  themeBgColor,
+  themeButtonGradientClass,
+  themeIconColor,
+  themeSvgIconColor,
+  type SupportedThemeColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { animate, createTimeline, stagger, type JSAnimation, type Timeline } from 'animejs';
+import { useReducedMotion } from 'motion/react';
+import { useCallback, useEffect, useMemo, useRef, 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;
+}
+
+const THEME_BG_CLASS_MAP: Record<SupportedThemeColor, string> = {
+  '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),
+}));
+
+export function AnimeNotFoundPage({
+  siteIcon,
+  homeUrl = process.env.NEXT_PUBLIC_BASE_URL || '/',
+  className,
+  compact = false,
+  themeClass,
+  themeColor,
+  ambientAnimated = true,
+  doorOpen,
+  onDoorOpenChange,
+}: AnimeNotFoundPageProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const timelineRef = useRef<Timeline | null>(null);
+  const shimmerRef = useRef<JSAnimation | null>(null);
+  const doorAnimationRef = useRef<JSAnimation | null>(null);
+  const lightAnimationRef = useRef<JSAnimation | null>(null);
+  const handleAnimationRef = useRef<JSAnimation | null>(null);
+  const messageAnimationRef = useRef<JSAnimation | null>(null);
+  const isDoorOpenRef = useRef(doorOpen ?? false);
+  const prefersReducedMotion = useReducedMotion();
+  const activeThemeClass = 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 ?? themeSvgIconColor,
+    }) as React.CSSProperties,
+    [themeColor]
+  );
+
+  useEffect(() => {
+    const root = rootRef.current;
+
+    if (!root || prefersReducedMotion) {
+      return undefined;
+    }
+
+    const door = root.querySelector<HTMLElement>('[data-not-found-door]');
+    const light = root.querySelector<HTMLElement>('[data-not-found-light]');
+    const message = root.querySelector<HTMLElement>('[data-not-found-message]');
+    const plate = root.querySelector<HTMLElement>('[data-not-found-plate]');
+    const handle = root.querySelector<HTMLElement>('[data-not-found-handle]');
+    const dustNodes = Array.from(root.querySelectorAll<HTMLElement>('[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)';
+    }
+
+    timelineRef.current?.revert();
+    shimmerRef.current?.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: unknown, index: number) => (index % 2 === 0 ? 10 : -10),
+          scale: [0.4, 1, 0.6],
+          duration: 1800,
+          delay: stagger(80),
+          ease: 'outSine',
+        }, '<+=200');
+
+      shimmerRef.current = animate(root.querySelectorAll<HTMLElement>('[data-not-found-shimmer]'), {
+        translateX: ['-120%', '120%'],
+        opacity: [0, 0.8, 0],
+        duration: 2400,
+        delay: stagger(160),
+        ease: 'inOutSine',
+        loop: true,
+      });
+    }
+
+    return () => {
+      timelineRef.current?.revert();
+      timelineRef.current = null;
+      shimmerRef.current?.revert();
+      shimmerRef.current = null;
+      doorAnimationRef.current?.revert();
+      doorAnimationRef.current = null;
+      lightAnimationRef.current?.revert();
+      lightAnimationRef.current = null;
+      handleAnimationRef.current?.revert();
+      handleAnimationRef.current = null;
+      messageAnimationRef.current?.revert();
+      messageAnimationRef.current = null;
+    };
+  }, [ambientAnimated, prefersReducedMotion]);
+
+  const setDoorOpen = useCallback((nextOpen: boolean) => {
+    const root = rootRef.current;
+
+    if (!root) {
+      return;
+    }
+
+    const door = root.querySelector<HTMLElement>('[data-not-found-door]');
+    const light = root.querySelector<HTMLElement>('[data-not-found-light]');
+    const handle = root.querySelector<HTMLElement>('[data-not-found-handle]');
+    const message = root.querySelector<HTMLElement>('[data-not-found-message]');
+
+    if (!door || !light || !handle) {
+      return;
+    }
+
+    isDoorOpenRef.current = nextOpen;
+
+    doorAnimationRef.current?.pause();
+    lightAnimationRef.current?.pause();
+    handleAnimationRef.current?.pause();
+    messageAnimationRef.current?.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?.(nextOpen);
+      return;
+    }
+
+    setDoorOpen(nextOpen);
+    onDoorOpenChange?.(nextOpen);
+  };
+
+  return (
+    <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}
+    >
+      <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))]" />
+      <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))]" />
+
+      <div className="flex w-full max-w-3xl flex-col items-center gap-5">
+        <section className="text-center">
+          <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)}>
+            Page Not Found
+          </h3>
+        </section>
+
+        <section className="flex w-full justify-center">
+          <div className="relative aspect-[0.78] w-full max-w-[270px] sm:max-w-[315px] md:max-w-[330px] perspective-distant">
+            <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"
+            />
+            <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" />
+            <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))]" />
+            <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"
+            >
+              <span className="block">The page</span>
+              <span className="block">you&#39;re looking for</span>
+              <span className="block">doesn&#39;t exist</span>
+            </p>
+            <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}
+            />
+
+            <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))]"
+            >
+              <div className="absolute inset-4 overflow-hidden rounded-[20px]">
+                <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" />
+                <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"
+                >
+                  <span className="inline-flex items-center gap-2">
+                    {siteIcon}
+                    <span>Woops!</span>
+                  </span>
+                  <span className={cn('text-xs font-semibold underline underline-offset-4', activeThemeClass, 'decoration-current')}>
+                    Back to Homepage
+                  </span>
+                </a>
+              </div>
+
+              <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"
+              >
+                <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" />
+                <span className={cn('relative text-5xl font-black tabular-nums bg-linear-to-r bg-clip-text text-transparent', activeGradientClass)}>
+                  404
+                </span>
+              </div>
+
+              <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}
+              >
+                <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">
+                  <span className="absolute size-10 rounded-full bg-(--not-found-theme) opacity-0 blur-md transition-opacity duration-300 group-hover:opacity-25" />
+                  <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">
+                    <span className="absolute right-1 top-1 size-1 rounded-full bg-white/75" />
+                  </span>
+                </span>
+              </button>
+            </div>
+
+            {dust.map(dot => (
+              <span
+                key={dot.id}
+                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,
+                }}
+              />
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/main/anime/index.ts

@@ -7,3 +7,4 @@ export {
 } from './anime-beam-frame';
 
 export { AnimeSpiralLoading, type AnimeSpiralLoadingProps } from './anime-spiral-loading';
+export { AnimeNotFoundPage, type AnimeNotFoundPageProps } from './anime-404-page';

package/src/main/calendar/calendar-date-range-input.tsx

@@ -29,7 +29,7 @@ export type CalendarDateRangeInputProps = {
 
 type DateRangeInputPressKey = 'clear';
 
-const DEFAULT_PLACEHOLDER = '滑动窗口日期';
+const DEFAULT_PLACEHOLDER = 'Slide pick Date';
 const DEFAULT_RANGE_DAYS = 7;
 const CLEAR_PRESS_FEEDBACK_MS = 180;
 

package/src/main/credit/types.ts

@@ -47,21 +47,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;
 }
 

package/src/main/gallery/gallery-mobile-swiper.tsx

@@ -19,7 +19,6 @@ const swiperThemeStyle = {
 export function GalleryMobileSwiper({ items }: Props) {
   return (
     <div className="block sm:hidden px-4">
-      {/* 外层容器：强制 maxWidth，防止任何溢出 */}
       <div
         className="w-full overflow-hidden"
         style={{ maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }}

package/src/main/gallery/gallery-server.tsx

@@ -33,10 +33,10 @@ export async function Gallery({ locale, sectionClassName, button }: GalleryProps
       </h2>
       <p className="text-center max-w-2xl mx-auto mb-16">{data.description}</p>
 
-      {/* 移动端轮播 */}
+      {/* Mobile swiper */}
       <GalleryMobileSwiper items={data.items} />
 
-      {/* 桌面端网格 */}
+      {/* Desktop grid */}
       <GalleryDesktopGrid items={data.items} />
 
       {button && <div className="text-center mx-auto mt-12 max-w-[85vw]">{button}</div>}

package/src/main/index.ts

@@ -2,6 +2,7 @@
 
 // Lightweight common client components.
 export * from './go-to-top';
+export * from './404-page';
 export * from './loading';
 export * from './nprogress-bar';
 export * from './rich-text-expert'

package/src/main/money-price/index.ts

@@ -5,6 +5,8 @@ export { MoneyPriceButton } from './money-price-button';
 export type {
   MoneyPriceConfig,
   MoneyPriceData,
+  MoneyPriceAnimeTone,
+  MoneyPriceStrictDiffAnime,
   InitUserContext,
   MoneyPriceInteractiveProps,
   MoneyPriceButtonProps,

package/src/main/money-price/money-price-button.tsx

@@ -44,9 +44,9 @@ export function MoneyPriceButton({
     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,
@@ -57,12 +57,12 @@ export function MoneyPriceButton({
     }
 
     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),
@@ -71,9 +71,9 @@ export function MoneyPriceButton({
     };
   };
 
-  // 订阅模式的按钮配置
+  // Button configuration for subscription mode.
   const getSubscriptionButtonConfig = () => {
-    // 匿名用户
+    // Anonymous users.
     if (!isAuthenticated) {
       const getButtonText = () => {
         switch (planKey) {
@@ -96,7 +96,7 @@ export function MoneyPriceButton({
       };
     }
 
-    // 已登录用户
+    // Signed-in users.
     switch (subscriptionStatus) {
       case UserState.FreeUser: {
         if (planTier === 'F1') {
@@ -115,7 +115,7 @@ export function MoneyPriceButton({
       }
 
       case UserState.ProUser: {
-        // 不允许降级到 Free
+        // Do not allow downgrades to Free.
         if (planTier === 'F1') {
           return { hidden: true };
         }
@@ -209,13 +209,13 @@ export function MoneyPriceButton({
       }
 
       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();