@windrun-huaiin/third-ui 30.0.0 → 31.0.0

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

@@ -10,6 +10,9 @@ import { getActiveProviderConfigUtil, getProductPricing } from './money-price-co
 import { UserState } from './money-price-types.mjs';
 import { redirectToCustomerPortal } from './customer-portal.mjs';
 import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { AnimeBeamFrame } from '../anime/anime-beam-frame.mjs';
+import 'animejs';
+import '../anime/anime-404-page.mjs';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
 function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
@@ -19,11 +22,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const providerConfig = useMemo(() => getActiveProviderConfigUtil(config), [config]);
     const billingOptions = useMemo(() => {
         const options = data.billingSwitch.options;
-        // 如果配置了 enabledBillingTypes，只显示配置的类型
+        // If enabledBillingTypes is configured, show only those billing types.
         if (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) {
             return options.filter(option => enabledBillingTypes.includes(option.key));
         }
-        // 否则显示所有配置的选项
+        // Otherwise show all configured options.
         return options;
     }, [data.billingSwitch.options, enabledBillingTypes]);
     const billingOptionMap = useMemo(() => {
@@ -35,11 +38,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const defaultBilling = useMemo(() => {
         var _a;
         const defaultKey = data.billingSwitch.defaultKey;
-        // 如果默认值在可用选项中，使用默认值
+        // Use the default value when it is available.
         if (billingOptions.some(opt => opt.key === defaultKey)) {
             return defaultKey;
         }
-        // 否则使用第一个可用选项
+        // Otherwise use the first available option.
         return ((_a = billingOptions[0]) === null || _a === void 0 ? void 0 : _a.key) || 'monthly';
     }, [data.billingSwitch.defaultKey, billingOptions]);
     const resolvedInitialBilling = useMemo(() => {
@@ -51,18 +54,18 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     }, [initialBillingType, billingOptions, defaultBilling]);
     const priceIdsByCycle = useMemo(() => {
         const priceIds = {};
-        // 为每个可用的计费类型创建价格ID数组
+        // Build a price ID list for each available billing type.
         billingOptions.forEach(option => {
             priceIds[option.key] = [];
             if (option.key === 'onetime') {
-                // 处理积分包产品
+                // Handle credit pack products.
                 const creditPacks = providerConfig.creditPackProducts || {};
                 Object.values(creditPacks).forEach((pack) => {
                     priceIds[option.key].push(pack.priceId);
                 });
             }
             else {
-                // 处理订阅产品
+                // Handle subscription products.
                 const products = providerConfig.subscriptionProducts || providerConfig.products || {};
                 PLAN_KEYS.forEach(planKey => {
                     const product = products[planKey];
@@ -261,7 +264,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         userContext,
         enableSubscriptionUpgrade
     ]);
-    // 根据当前计费类型动态选择要显示的 plans
+    // Select visible plans dynamically based on the current billing type.
     const currentPlans = useMemo(() => {
         if (billingType === 'onetime') {
             return data.creditsPlans || [];
@@ -286,11 +289,11 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const discountBadgeText = useMemo(() => {
         if (!(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText))
             return null;
-        // 对于 onetime 模式，直接显示 discountText，不依赖 discountPercent
+        // In one-time mode, show discountText directly without relying on discountPercent.
         if (billingType === 'onetime') {
             return selectedBillingOption.discountText;
         }
-        // 对于订阅模式，查找 discountPercent 并替换
+        // In subscription mode, find discountPercent and interpolate it.
         let discountPercent = null;
         const products = providerConfig.subscriptionProducts || providerConfig.products || {};
         PLAN_KEYS.forEach(planKey => {
@@ -304,7 +307,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
             return null;
         return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
     }, [selectedBillingOption, providerConfig, billingType]);
-    // 配置移动端BillingTypeButton悬浮样式
+    // Configure the mobile floating style for BillingTypeButton.
     return (jsxs(Fragment, { children: [jsx("div", { className: "flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent", children: jsx("div", { className: "inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm", "data-billing-switch": true, children: billingOptions.map(option => {
                         const isActive = option.key === billingType;
                         const buttonClasses = isActive
@@ -313,6 +316,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const showBadge = option.key === billingType && !!discountBadgeText;
                         return (jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsx("span", { className: "absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap", children: discountBadgeText })), jsx("button", { className: cn('text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]', buttonClasses), type: "button", "data-billing-button": option.key, onClick: () => setUserSelectedBillingType(option.key), children: option.name })] }, option.key));
                     }) }) }), jsx("div", { className: "w-full", children: jsx("div", { className: "flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto", children: currentPlans.map((plan) => {
+                        var _a, _b;
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {
                             console.warn(`Unknown plan key "${plan.key}" detected in pricing plans`);
@@ -321,13 +325,21 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                         const pricing = getPricingForPlan(planKey);
                         const showBillingSubtitle = plan.showBillingSubTitle !== false;
                         const hasDiscount = !!pricing.discountPercent && !!pricing.originalAmount;
-                        // 移动端宽度样式
-                        return (jsxs("div", { "data-price-plan": planKey, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0', 'hover:border-2 hover:border-current', 'focus-within:border-2 focus-within:border-current', themeIconColor), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsx("div", { className: cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
-                                                    // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
-                                                    jsxs(Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
-                                                    // 其他模式下保持原逻辑
-                                                    showBillingSubtitle && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) || '' }))) })] })] }), jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${i}`, children: [feature ? (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsx("span", { children: feature.icon }) : jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxs("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsx("span", { children: feature.description }), feature.tooltip && (jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx(MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.plan) === planKey &&
-                                        (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.billing) === billingType, isAnyProcessing: !!processingTarget, isInitLoading: isInitLoading, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }, plan.key));
+                        const hasStrictDiffAnime = Object.prototype.hasOwnProperty.call((_a = plan.strictDiffAnime) !== null && _a !== void 0 ? _a : {}, billingType);
+                        const animeTone = hasStrictDiffAnime
+                            ? (_b = plan.strictDiffAnime) === null || _b === void 0 ? void 0 : _b[billingType]
+                            : plan.animeTone;
+                        const hasAnimeTone = !!animeTone;
+                        return (jsx(AnimeBeamFrame, { active: false, interactive: hasAnimeTone, tone: animeTone !== null && animeTone !== void 0 ? animeTone : 'theme', radius: 16, className: cn('h-full w-[85vw] max-w-[360px]', 'md:w-[clamp(280px,32vw,360px)] md:max-w-[360px] md:shrink-0'), children: jsxs("div", { "data-price-plan": planKey, className: cn('flex flex-col bg-white dark:bg-gray-800/60 rounded-2xl border border-gray-300 dark:border-[#7c3aed40] transition p-5 md:p-8 h-full shadow-sm dark:shadow-none', !hasAnimeTone && [
+                                    'hover:border-current',
+                                    'focus-within:border-current',
+                                    themeIconColor,
+                                ]), style: { minHeight: maxFeaturesCount * (isTouchDevice ? 86 : 100) }, children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("span", { className: "text-lg md:text-xl font-bold text-gray-900 dark:text-gray-100", children: plan.title }), plan.titleTags && plan.titleTags.map((tag, i) => (jsx("span", { className: "px-2 py-0.5 text-xs rounded bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 font-semibold align-middle", children: tag }, i)))] }), jsxs("div", { className: "flex flex-col items-start w-full", "data-price-container": planKey, children: [jsxs("div", { className: "flex items-end gap-2", children: [jsx("span", { className: "text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-gray-100", "data-price-value": planKey, children: pricing.amount === 0 ? 'Free' : `${data.currency}${pricing.amount}` }), pricing.amount > 0 && (jsx("span", { className: "text-base md:text-lg text-gray-700 dark:text-gray-300 font-medium mb-1", "data-price-unit": planKey, children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.unit) || '/month' }))] }), jsxs("div", { className: "flex flex-col md:flex-row items-start md:items-center gap-1 md:gap-2 min-h-[28px] mt-1", children: [hasDiscount && (jsxs(Fragment, { children: [jsxs("span", { className: "text-sm md:text-base text-gray-400 line-through", "data-price-original": planKey, children: [data.currency, pricing.originalAmount] }), (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.discountText) && (jsx("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", "data-price-discount": planKey, children: selectedBillingOption.discountText.replace('{percent}', String(pricing.discountPercent)) }))] })), jsx("div", { className: cn('flex items-center gap-2 text-[11px] md:text-xs', !showBillingSubtitle && 'opacity-0 select-none'), "data-price-subtitle": planKey, children: showBillingSubtitle && billingType === 'onetime' ? (
+                                                        // Special one-time mode rendering: plain text plus styled product subtitle.
+                                                        jsxs(Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxs("span", { className: "px-2 py-0.5 text-[11px] md:text-xs rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-semibold align-middle", children: ["+", plan.subtitle] }))] })) : (
+                                                        // Keep the original rendering for other modes.
+                                                        showBillingSubtitle && (jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: (selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) || '' }))) })] })] }), jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${i}`, children: [feature ? (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200 mr-1", children: feature.icon ? jsx("span", { children: feature.icon }) : jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsx("span", { className: "px-1 py-0.5 text-[6px] rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 font-semibold align-middle", children: feature.tag })), feature ? (jsxs("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsx("span", { children: feature.description }), feature.tooltip && (jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsx("span", { children: "\u00A0" }))] }, i))) }), jsx("div", { className: "flex-1" }), jsx(MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.plan) === planKey &&
+                                            (processingTarget === null || processingTarget === void 0 ? void 0 : processingTarget.billing) === billingType, isAnyProcessing: !!processingTarget, isInitLoading: isInitLoading, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }) }, `${billingType}-${plan.key}-${animeTone !== null && animeTone !== void 0 ? animeTone : 'none'}`));
                     }) }) })] }));
 }
 

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

@@ -1,7 +1,7 @@
 import type { XCredit, XSubscription, XUser } from '../../clerk/fingerprint/types';
 /**
  * Money Price Component Types
- * 价格组件类型定义
+ * Pricing component type definitions.
  */
 export declare enum UserState {
     Anonymous = "anonymous",
@@ -117,6 +117,8 @@ export interface MoneyPriceButtonProps {
     isInitLoading: boolean;
     enableSubscriptionUpgrade?: boolean;
 }
+export type MoneyPriceAnimeTone = 'theme' | 'rainbow' | 'mono' | 'warm' | 'cool';
+export type MoneyPriceStrictDiffAnime = Record<string, MoneyPriceAnimeTone | null | undefined>;
 export interface MoneyPriceData {
     title: string;
     subtitle: string;
@@ -133,6 +135,8 @@ export interface MoneyPriceData {
     subscriptionPlans: Array<{
         key: string;
         title: string;
+        animeTone?: MoneyPriceAnimeTone;
+        strictDiffAnime?: MoneyPriceStrictDiffAnime;
         showBillingSubTitle?: boolean;
         titleTags?: string[];
         features?: Array<{
@@ -146,6 +150,8 @@ export interface MoneyPriceData {
         key: string;
         title: string;
         subtitle?: string;
+        animeTone?: MoneyPriceAnimeTone;
+        strictDiffAnime?: MoneyPriceStrictDiffAnime;
         showBillingSubTitle?: boolean;
         titleTags?: string[];
         features?: Array<{

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

@@ -2,9 +2,9 @@
 
 /**
  * Money Price Component Types
- * 价格组件类型定义
+ * Pricing component type definitions.
  */
-// 用户状态枚举
+// User status enum.
 exports.UserState = void 0;
 (function (UserState) {
     UserState["Anonymous"] = "anonymous";

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

@@ -1,8 +1,8 @@
 /**
  * Money Price Component Types
- * 价格组件类型定义
+ * Pricing component type definitions.
  */
-// 用户状态枚举
+// User status enum.
 var UserState;
 (function (UserState) {
     UserState["Anonymous"] = "anonymous";

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

@@ -1,5 +1,5 @@
 export { MoneyPrice } from './money-price';
 export { getActiveProviderConfigUtil, getCreditsFromPriceIdUtil, getPriceConfigUtil, } from './money-price-config-util';
 export { buildMoneyPriceData } from './money-price-data';
-export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, InitUserContext, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
+export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, MoneyPriceAnimeTone, MoneyPriceStrictDiffAnime, InitUserContext, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
 export { UserState } from './money-price-types';

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 };

package/dist/main/pill-select/x-pill-select.js

@@ -26,7 +26,7 @@ function XPillSelect(props) {
     const isAllSelected = props.mode === 'multiple' &&
         allOptionValues.length > 0 &&
         allOptionValues.every((value) => selectedValues.includes(value));
-    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || '全部' : null;
+    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || 'All' : null;
     const hasVisiblePillLimit = props.mode === 'multiple' && typeof maxVisiblePills === 'number' && maxVisiblePills >= 0;
     const visibleSelectedValues = aggregatedSelectedLabel || !hasVisiblePillLimit
         ? selectedValues
@@ -126,7 +126,7 @@ function XPillSelect(props) {
                                             event.stopPropagation();
                                             removeValue(selectedValue);
                                         }, disabled: disabled, className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', lib.themeBgColor, lib.themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: optionLabel, children: jsxRuntime.jsx("span", { className: utils.cn('truncate', maxPillWidthClassName), children: optionLabel }) }, selectedValue));
-                                }), hiddenSelectedCount > 0 ? (jsxRuntime.jsxs("span", { className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `还有 ${hiddenSelectedCount} 项未展开`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsxRuntime.jsx("span", { className: utils.cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsxRuntime.jsx(icons.ChevronDownIcon, { className: utils.cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: utils.cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && lib.themeBorderColor), children: [inputEnabled ? (jsxRuntime.jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                                }), hiddenSelectedCount > 0 ? (jsxRuntime.jsxs("span", { className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `${hiddenSelectedCount} items remain unexpanded`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsxRuntime.jsx("span", { className: utils.cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsxRuntime.jsx(icons.ChevronDownIcon, { className: utils.cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: utils.cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && lib.themeBorderColor), children: [inputEnabled ? (jsxRuntime.jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
                             if (event.key !== 'Enter') {
                                 return;
                             }

package/dist/main/pill-select/x-pill-select.mjs

@@ -24,7 +24,7 @@ function XPillSelect(props) {
     const isAllSelected = props.mode === 'multiple' &&
         allOptionValues.length > 0 &&
         allOptionValues.every((value) => selectedValues.includes(value));
-    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || '全部' : null;
+    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || 'All' : null;
     const hasVisiblePillLimit = props.mode === 'multiple' && typeof maxVisiblePills === 'number' && maxVisiblePills >= 0;
     const visibleSelectedValues = aggregatedSelectedLabel || !hasVisiblePillLimit
         ? selectedValues
@@ -124,7 +124,7 @@ function XPillSelect(props) {
                                             event.stopPropagation();
                                             removeValue(selectedValue);
                                         }, disabled: disabled, className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', themeBgColor, themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: optionLabel, children: jsx("span", { className: cn('truncate', maxPillWidthClassName), children: optionLabel }) }, selectedValue));
-                                }), hiddenSelectedCount > 0 ? (jsxs("span", { className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `还有 ${hiddenSelectedCount} 项未展开`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsx("span", { className: cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsx(ChevronDownIcon, { className: cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && themeBorderColor), children: [inputEnabled ? (jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                                }), hiddenSelectedCount > 0 ? (jsxs("span", { className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `${hiddenSelectedCount} items remain unexpanded`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsx("span", { className: cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsx(ChevronDownIcon, { className: cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && themeBorderColor), children: [inputEnabled ? (jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
                             if (event.key !== 'Enter') {
                                 return;
                             }

package/dist/main/server.d.ts

@@ -12,5 +12,5 @@ export type { CreditOverviewData, CreditBucket, CreditBucketStatus, Subscription
 export { MoneyPrice } from './money-price/money-price';
 export { getActiveProviderConfigUtil, getCreditsFromPriceIdUtil, getPriceConfigUtil } from './money-price/money-price-config-util';
 export { buildMoneyPriceData } from './money-price/money-price-data';
-export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, InitUserContext, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext } from './money-price/money-price-types';
+export type { MoneyPriceConfig, MoneyPriceProps, MoneyPriceInteractiveProps, MoneyPriceButtonProps, MoneyPriceData, MoneyPriceAnimeTone, MoneyPriceStrictDiffAnime, InitUserContext, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext } from './money-price/money-price-types';
 export { UserState } from './money-price/money-price-types';

package/dist/main/snake-loading-frame.js

@@ -7,6 +7,7 @@ var react = require('motion/react');
 var utils = require('@windrun-huaiin/lib/utils');
 var animeBeamFrame = require('./anime/anime-beam-frame.js');
 require('animejs');
+require('./anime/anime-404-page.js');
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const EXIT_DURATION_MS = 260;

package/dist/main/snake-loading-frame.mjs

@@ -5,6 +5,7 @@ import { motion } from 'motion/react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { AnimeBeamFrame } from './anime/anime-beam-frame.mjs';
 import 'animejs';
+import './anime/anime-404-page.mjs';
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const EXIT_DURATION_MS = 260;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -221,9 +221,9 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@clerk/localizations": "^4.2.2",
-    "@clerk/nextjs": "^7.0.5",
-    "@clerk/shared": "^4.3.1",
+    "@clerk/localizations": "^4.6.2",
+    "@clerk/nextjs": "^7.3.3",
+    "@clerk/shared": "^4.10.2",
     "@fingerprintjs/fingerprintjs": "^5.1.0",
     "animejs": "^4.4.1",
     "class-variance-authority": "^0.7.1",
@@ -243,9 +243,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/contracts": "^30.0.0",
-    "@windrun-huaiin/base-ui": "^30.0.0",
-    "@windrun-huaiin/lib": "^30.0.0"
+    "@windrun-huaiin/base-ui": "^31.0.0",
+    "@windrun-huaiin/lib": "^31.0.0",
+    "@windrun-huaiin/contracts": "^31.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -281,6 +281,12 @@
   "publishConfig": {
     "access": "public"
   },
+  "homepage": "https://d8ger.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/caofanCPU/next-ai-build.git",
+    "directory": "packages/third-ui"
+  },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
     "build:prod": "rollup -c rollup.config.mjs",

package/src/ai/ai-prompt-textarea.tsx

@@ -188,7 +188,7 @@ export function AIPromptTextarea({
     }
   }
 
-  // 渲染标题组件
+  // Render the title component.
   const renderTitle = () => {
     if (!title?.trim()) return null
     
@@ -200,7 +200,7 @@ export function AIPromptTextarea({
     )
   }
 
-  // 渲染textarea组件
+  // Render the textarea component.
   const renderTextarea = (isEmbedded = false) => (
     <textarea
       ref={textareaRef}
@@ -220,7 +220,7 @@ export function AIPromptTextarea({
     />
   )
 
-  // 渲染单词计数
+  // Render the word count.
   const renderWordCount = () => {
     if (!showWordCount) return null
     
@@ -238,7 +238,7 @@ export function AIPromptTextarea({
     )
   }
 
-  // 如果有标题且需要嵌入，则渲染内部标题布局
+  // Render the embedded title layout when a title is present and embedded mode is enabled.
   if (embed && (title)) {
     return (
       <div className="space-y-2">
@@ -256,7 +256,7 @@ export function AIPromptTextarea({
     )
   }
 
-  // 默认布局：外部标题或无标题
+  // Default layout: external title or no title.
   return (
     <div className="space-y-2">
       {renderTitle()}
@@ -264,4 +264,4 @@ export function AIPromptTextarea({
       {renderWordCount()}
     </div>
   )
-} 
+} 

package/src/clerk/clerk-auth-appearance.ts

@@ -0,0 +1,16 @@
+export const clerkAuthModalAppearance = {
+  elements: {
+    modalContent: '!items-start !pt-16 sm:!pt-24',
+    cardBox: '!mt-0',
+  },
+};
+
+export const clerkAuthPageAppearance = {
+  elements: {
+    rootBox: 'w-full',
+    cardBox: 'mx-auto',
+  },
+};
+
+export const clerkAuthPageContainerClassName =
+  'flex min-h-[calc(100dvh-var(--fd-banner-height,0px)-var(--fd-header-height,3.5rem))] w-full items-start justify-center px-6 pt-[calc(var(--fd-header-height,3.5rem)+2rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-header-height,3.5rem)+4.5rem)] md:pb-8';

package/src/clerk/clerk-page-context-generator.tsx

@@ -7,9 +7,7 @@
 
 import { SignUpWithFingerprint } from './signup-with-fingerprint-client';
 import { SignInWithFingerprint } from './signin-with-fingerprint-client';
-
-const clerkPageContainerClassName =
-  'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
+import { clerkAuthPageContainerClassName } from './clerk-auth-appearance';
 
 /**
  * Create a SignUp page with fingerprint support
@@ -18,7 +16,7 @@ const clerkPageContainerClassName =
 export function createSignUpPageWithFingerprint() {
   return function SignUpPage() {
     return (
-      <div className={clerkPageContainerClassName}>
+      <div className={clerkAuthPageContainerClassName}>
         <SignUpWithFingerprint />
       </div>
     );
@@ -32,7 +30,7 @@ export function createSignUpPageWithFingerprint() {
 export function createSignInPageWithFingerprint() {
   return function SignInPage() {
     return (
-      <div className={clerkPageContainerClassName}>
+      <div className={clerkAuthPageContainerClassName}>
         <SignInWithFingerprint />
       </div>
     );

package/src/clerk/clerk-page-generator.tsx

@@ -1,14 +1,15 @@
 import { SignIn, SignUp, Waitlist } from '@clerk/nextjs';
-
-const clerkPageContainerClassName =
-  'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
+import {
+  clerkAuthPageAppearance,
+  clerkAuthPageContainerClassName,
+} from './clerk-auth-appearance';
 
 // Legacy page generators (for backward compatibility)
 export function createSignInPage() {
   return function SignInPage() {
     return (
-      <div className={clerkPageContainerClassName}>
-        <SignIn />
+      <div className={clerkAuthPageContainerClassName}>
+        <SignIn appearance={clerkAuthPageAppearance} />
       </div>
     );
   };
@@ -17,8 +18,8 @@ export function createSignInPage() {
 export function createSignUpPage() {
   return function SignUpPage() {
     return (
-      <div className={clerkPageContainerClassName}>
-        <SignUp />
+      <div className={clerkAuthPageContainerClassName}>
+        <SignUp appearance={clerkAuthPageAppearance} />
       </div>
     );
   };
@@ -27,7 +28,7 @@ export function createSignUpPage() {
 export function createWaitlistPage() {
   return function WaitlistPage() {
     return (
-      <div className={clerkPageContainerClassName}>
+      <div className={clerkAuthPageContainerClassName}>
         <Waitlist />
       </div>
     );

package/src/clerk/clerk-user-client.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { ClerkLoaded, ClerkLoading, SignInButton, UserButton, useAuth } from "@clerk/nextjs";
 import { ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass } from '@windrun-huaiin/base-ui/lib';
+import { clerkAuthModalAppearance } from './clerk-auth-appearance';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client';
 
 interface ClerkUserData {
@@ -51,11 +52,19 @@ export function ClerkUserClient({ data }: { data: ClerkUserData }) {
                 )}
               </div>
             )}
-            <SignInButton mode={data.clerkAuthInModal ? 'modal' : 'redirect'}>
-              <button className="w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap">
-                {data.signIn}
-              </button>
-            </SignInButton>
+            {data.clerkAuthInModal ? (
+              <SignInButton mode="modal" appearance={clerkAuthModalAppearance}>
+                <button className="w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap">
+                  {data.signIn}
+                </button>
+              </SignInButton>
+            ) : (
+              <SignInButton mode="redirect">
+                <button className="w-16 sm:w-20 h-8 sm:h-9 px-1.5 sm:px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-xs sm:text-sm whitespace-nowrap">
+                  {data.signIn}
+                </button>
+              </SignInButton>
+            )}
           </>
         )}