@windrun-huaiin/third-ui 30.1.0 → 31.0.1

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "30.1.0",
+  "version": "31.0.1",
   "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/base-ui": "^30.1.0",
-    "@windrun-huaiin/lib": "^30.0.0",
-    "@windrun-huaiin/contracts": "^30.0.0"
+    "@windrun-huaiin/base-ui": "^31.0.0",
+    "@windrun-huaiin/contracts": "^31.0.0",
+    "@windrun-huaiin/lib": "^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>
+            )}
           </>
         )}
 

package/src/clerk/fingerprint/fingerprint-client.ts

@@ -1,7 +1,7 @@
 /**
  * Fingerprint Client Utilities
- * 客户端专用的指纹生成和管理逻辑
- * 只能在浏览器环境中使用
+ * Client-only fingerprint generation and management logic.
+ * Must be used only in browser environments.
  */
 
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
@@ -41,24 +41,24 @@ type FirstTouchData = {
 };
 
 /**
- * 检查浏览器存储（localStorage 和 cookie）中的指纹 ID
- * 返回有效的 ID 或 null
+ * Check fingerprint ID in browser storage, including localStorage and cookies.
+ * Returns a valid ID or null.
  */
 function checkStoredFingerprintId(): string | null {
   if (typeof window === 'undefined') {
     return null;
   }
 
-  // 优先检查 localStorage
+  // Prefer localStorage.
   const localStorageId = getLocalStorageValue(FINGERPRINT_STORAGE_KEY);
   if (localStorageId && isValidFingerprintId(localStorageId)) {
     return localStorageId;
   }
 
-  // 检查 cookie
+  // Check cookies.
   const cookieId = getCookieValue(FINGERPRINT_COOKIE_NAME);
   if (cookieId && isValidFingerprintId(cookieId)) {
-    // 同步到 localStorage
+    // Sync back to localStorage.
     setLocalStorageValue(FINGERPRINT_STORAGE_KEY, cookieId);
     return cookieId;
   }
@@ -203,34 +203,34 @@ export function getOrCreateFirstTouchData(): FirstTouchData | null {
 }
 
 /**
- * 生成基于真实浏览器特征的fingerprint ID
- * 使用 FingerprintJS 收集浏览器特征并生成唯一标识
+ * Generate a fingerprint ID from real browser characteristics.
+ * Uses FingerprintJS to collect browser signals and create a stable identifier.
  */
 export async function generateFingerprintId(): Promise<string> {
   if (typeof window === 'undefined') {
     throw new Error('generateFingerprintId can only be used in browser environment');
   }
 
-  // 检查现有 ID
+  // Check for an existing ID.
   const existingId = checkStoredFingerprintId();
   if (existingId) {
     return existingId;
   }
 
   try {
-    // 使用 FingerprintJS 生成指纹
+    // Generate a fingerprint with FingerprintJS.
     const fp = await FingerprintJS.load();
     const result = await fp.get();
     const fingerprintId = `fp_${result.visitorId}`;
 
-    // 存储到 localStorage 和 cookie
+    // Store in localStorage and cookies.
     setLocalStorageValue(FINGERPRINT_STORAGE_KEY, fingerprintId);
     setCookie(FINGERPRINT_COOKIE_NAME, fingerprintId, 365);
 
     return fingerprintId;
   } catch (error) {
     console.warn('Failed to generate fingerprint with FingerprintJS:', error);
-    // 降级方案：生成基于时间戳和随机数的 ID
+    // Fallback: generate an ID from timestamp and randomness.
     const fallbackId = `fp_fallback_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
     setLocalStorageValue(FINGERPRINT_STORAGE_KEY, fallbackId);
     setCookie(FINGERPRINT_COOKIE_NAME, fallbackId, 365);
@@ -240,14 +240,14 @@ export async function generateFingerprintId(): Promise<string> {
 }
 
 /**
- * 获取当前的fingerprint ID
+ * Get the current fingerprint ID.
  */
 export function getFingerprintId(): string | null {
   return checkStoredFingerprintId();
 }
 
 /**
- * 设置fingerprint ID到存储
+ * Store a fingerprint ID.
  */
 export function setFingerprintId(fingerprintId: string): void {
   if (typeof window === 'undefined') {
@@ -263,7 +263,7 @@ export function setFingerprintId(fingerprintId: string): void {
 }
 
 /**
- * 清除fingerprint ID
+ * Clear the fingerprint ID.
  */
 export function clearFingerprintId(): void {
   if (typeof window === 'undefined') {
@@ -275,8 +275,8 @@ export function clearFingerprintId(): void {
 }
 
 /**
- * 获取或生成fingerprint ID
- * 如果不存在则自动生成新的
+ * Get or generate a fingerprint ID.
+ * Automatically creates one when none exists.
  */
 export async function getOrGenerateFingerprintId(): Promise<string> {
   const existingId = checkStoredFingerprintId();
@@ -288,7 +288,7 @@ export async function getOrGenerateFingerprintId(): Promise<string> {
 }
 
 /**
- * 创建包含fingerprint ID的fetch headers
+ * Create fetch headers containing the fingerprint ID.
  */
 export async function createFingerprintHeaders(): Promise<Record<string, string>> {
   const fingerprintId = await getOrGenerateFingerprintId();
@@ -330,7 +330,7 @@ export function createFingerprintFetch() {
   };
 }
 
-// Cookie 辅助函数 (私有)
+// Private cookie helpers.
 function getCookieValue(name: string): string | null {
   if (typeof document === 'undefined') {
     return null;