@windrun-huaiin/third-ui 26.0.0 → 28.0.0

package/dist/main/index.d.ts

@@ -1,21 +1,6 @@
 export * from './go-to-top';
 export * from './loading';
 export * from './nprogress-bar';
-export * from './alert-dialog';
-export * from './x-button';
-export * from './x-toggle-button';
-export * from './ai-prompt-textarea';
 export * from './rich-text-expert';
 export * from './faq-interactive';
-export * from './price-plan-interactive';
-export * from './gallery/gallery-interactive';
-export * from './delayed-img';
-export * from './snake-loading-frame';
-export * from './pill-select';
-export { MoneyPriceInteractive } from './money-price/money-price-interactive';
-export { MoneyPriceButton } from './money-price/money-price-button';
-export { CreditOverviewClient } from './credit/credit-overview-client';
-export { CreditNavButton } from './credit/credit-nav-button';
-export { HeroMedia } from './hero-media';
-export { HeroSection } from './hero-section';
 export { InfoTooltip } from './info-tooltip';

package/dist/main/index.js

@@ -4,29 +4,8 @@
 var goToTop = require('./go-to-top.js');
 var loading = require('./loading.js');
 var nprogressBar = require('./nprogress-bar.js');
-var adsAlertDialog = require('./alert-dialog/ads-alert-dialog.js');
-var confirmDialog = require('./alert-dialog/confirm-dialog.js');
-var highPriorityConfirmDialog = require('./alert-dialog/high-priority-confirm-dialog.js');
-var infoDialog = require('./alert-dialog/info-dialog.js');
-var xButton = require('./x-button.js');
-var xToggleButton = require('./x-toggle-button.js');
-var aiPromptTextarea = require('./ai-prompt-textarea.js');
 var richTextExpert = require('./rich-text-expert.js');
 var faqInteractive = require('./faq-interactive.js');
-var pricePlanInteractive = require('./price-plan-interactive.js');
-var galleryInteractive = require('./gallery/gallery-interactive.js');
-var delayedImg = require('./delayed-img.js');
-var snakeLoadingFrame = require('./snake-loading-frame.js');
-var xPillSelect = require('./pill-select/x-pill-select.js');
-var xFilterPills = require('./pill-select/x-filter-pills.js');
-var xFormPills = require('./pill-select/x-form-pills.js');
-var xTokenInput = require('./pill-select/x-token-input.js');
-var moneyPriceInteractive = require('./money-price/money-price-interactive.js');
-var moneyPriceButton = require('./money-price/money-price-button.js');
-var creditOverviewClient = require('./credit/credit-overview-client.js');
-var creditNavButton = require('./credit/credit-nav-button.js');
-var heroMedia = require('./hero-media.js');
-var heroSection = require('./hero-section.js');
 var infoTooltip = require('./info-tooltip.js');
 
 
@@ -35,29 +14,7 @@ exports.GoToTop = goToTop.GoToTop;
 exports.Loading = loading.Loading;
 exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;
 exports.NProgressBar = nprogressBar.NProgressBar;
-exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
-exports.ConfirmDialog = confirmDialog.ConfirmDialog;
-exports.HighPriorityConfirmDialog = highPriorityConfirmDialog.HighPriorityConfirmDialog;
-exports.InfoDialog = infoDialog.InfoDialog;
-exports.XButton = xButton.XButton;
-exports.XToggleButton = xToggleButton.XToggleButton;
-exports.AIPromptTextarea = aiPromptTextarea.AIPromptTextarea;
 exports.createRichTextRenderer = richTextExpert.createRichTextRenderer;
 exports.richText = richTextExpert.richText;
 exports.FAQInteractive = faqInteractive.FAQInteractive;
-exports.PricePlanInteractive = pricePlanInteractive.PricePlanInteractive;
-exports.GalleryInteractive = galleryInteractive.GalleryInteractive;
-exports.DelayedImg = delayedImg.DelayedImg;
-exports.SnakeLoadingFrame = snakeLoadingFrame.SnakeLoadingFrame;
-exports.SnakeLoadingPreview = snakeLoadingFrame.SnakeLoadingPreview;
-exports.XPillSelect = xPillSelect.XPillSelect;
-exports.XFilterPills = xFilterPills.XFilterPills;
-exports.XFormPills = xFormPills.XFormPills;
-exports.XTokenInput = xTokenInput.XTokenInput;
-exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
-exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
-exports.CreditOverviewClient = creditOverviewClient.CreditOverviewClient;
-exports.CreditNavButton = creditNavButton.CreditNavButton;
-exports.HeroMedia = heroMedia.HeroMedia;
-exports.HeroSection = heroSection.HeroSection;
 exports.InfoTooltip = infoTooltip.InfoTooltip;

package/dist/main/index.mjs

@@ -2,27 +2,6 @@
 export { GoToTop } from './go-to-top.mjs';
 export { Loading, getLoadingCycleDurationMs } from './loading.mjs';
 export { NProgressBar } from './nprogress-bar.mjs';
-export { AdsAlertDialog } from './alert-dialog/ads-alert-dialog.mjs';
-export { ConfirmDialog } from './alert-dialog/confirm-dialog.mjs';
-export { HighPriorityConfirmDialog } from './alert-dialog/high-priority-confirm-dialog.mjs';
-export { InfoDialog } from './alert-dialog/info-dialog.mjs';
-export { XButton } from './x-button.mjs';
-export { XToggleButton } from './x-toggle-button.mjs';
-export { AIPromptTextarea } from './ai-prompt-textarea.mjs';
 export { createRichTextRenderer, richText } from './rich-text-expert.mjs';
 export { FAQInteractive } from './faq-interactive.mjs';
-export { PricePlanInteractive } from './price-plan-interactive.mjs';
-export { GalleryInteractive } from './gallery/gallery-interactive.mjs';
-export { DelayedImg } from './delayed-img.mjs';
-export { SnakeLoadingFrame, SnakeLoadingPreview } from './snake-loading-frame.mjs';
-export { XPillSelect } from './pill-select/x-pill-select.mjs';
-export { XFilterPills } from './pill-select/x-filter-pills.mjs';
-export { XFormPills } from './pill-select/x-form-pills.mjs';
-export { XTokenInput } from './pill-select/x-token-input.mjs';
-export { MoneyPriceInteractive } from './money-price/money-price-interactive.mjs';
-export { MoneyPriceButton } from './money-price/money-price-button.mjs';
-export { CreditOverviewClient } from './credit/credit-overview-client.mjs';
-export { CreditNavButton } from './credit/credit-nav-button.mjs';
-export { HeroMedia } from './hero-media.mjs';
-export { HeroSection } from './hero-section.mjs';
 export { InfoTooltip } from './info-tooltip.mjs';

package/dist/main/loading/index.d.ts

@@ -0,0 +1 @@
+export { Loading, getLoadingCycleDurationMs } from '../loading';

package/dist/main/loading/index.js

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var loading = require('../loading.js');
+
+
+
+exports.Loading = loading.Loading;
+exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;

package/dist/main/loading/index.mjs

@@ -0,0 +1,2 @@
+"use client";
+export { Loading, getLoadingCycleDurationMs } from '../loading.mjs';

package/dist/main/loading-frame/index.d.ts

@@ -0,0 +1 @@
+export { SnakeLoadingFrame, SnakeLoadingPreview } from '../snake-loading-frame';

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

@@ -0,0 +1,9 @@
+"use client";
+'use strict';
+
+var snakeLoadingFrame = require('../snake-loading-frame.js');
+
+
+
+exports.SnakeLoadingFrame = snakeLoadingFrame.SnakeLoadingFrame;
+exports.SnakeLoadingPreview = snakeLoadingFrame.SnakeLoadingPreview;

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

@@ -0,0 +1,2 @@
+"use client";
+export { SnakeLoadingFrame, SnakeLoadingPreview } from '../snake-loading-frame.mjs';

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

@@ -0,0 +1,4 @@
+export { MoneyPriceInteractive } from './money-price-interactive';
+export { MoneyPriceButton } from './money-price-button';
+export type { MoneyPriceConfig, MoneyPriceData, InitUserContext, MoneyPriceInteractiveProps, MoneyPriceButtonProps, PaymentProvider, PaymentProviderConfig, EnhancePricePlan, SubscriptionProductConfig, CreditPackProductConfig, UserContext, } from './money-price-types';
+export { UserState } from './money-price-types';

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

@@ -0,0 +1,15 @@
+"use client";
+'use strict';
+
+var moneyPriceInteractive = require('./money-price-interactive.js');
+var moneyPriceButton = require('./money-price-button.js');
+var moneyPriceTypes = require('./money-price-types.js');
+
+
+
+exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
+exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
+Object.defineProperty(exports, "UserState", {
+	enumerable: true,
+	get: function () { return moneyPriceTypes.UserState; }
+});

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

@@ -0,0 +1,4 @@
+"use client";
+export { MoneyPriceInteractive } from './money-price-interactive.mjs';
+export { MoneyPriceButton } from './money-price-button.mjs';
+export { UserState } from './money-price-types.mjs';

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

@@ -1,2 +1,2 @@
 import { type MoneyPriceButtonProps } from './money-price-types';
-export declare function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing, isInitLoading, enableSubscriptionUpgrade }: MoneyPriceButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing, isAnyProcessing, isInitLoading, enableSubscriptionUpgrade }: MoneyPriceButtonProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -8,12 +8,12 @@ var lib = require('@windrun-huaiin/base-ui/lib');
 var moneyPriceTypes = require('./money-price-types.js');
 var React = require('react');
 
-function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing = false, isInitLoading = false, enableSubscriptionUpgrade = true }) {
+function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing = false, isAnyProcessing = false, isInitLoading = false, enableSubscriptionUpgrade = true }) {
+    const [isLoading, setIsLoading] = React.useState(false);
     if (isInitLoading) {
-        return (jsxRuntime.jsx("div", { className: "w-full h-11 md:h-12 mt-4 md:mt-auto rounded-full bg-transparent", "aria-hidden": "true", "data-plan-button-placeholder": planKey }));
+        return (jsxRuntime.jsx("div", { className: "relative w-full h-11 md:h-12 mt-4 md:mt-auto overflow-hidden rounded-full bg-gray-100/70 dark:bg-gray-800/40 animate-pulse transition-opacity duration-300 ease-out", "aria-hidden": "true", "data-plan-button-placeholder": planKey, children: jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/10" }) }));
     }
     const { isAuthenticated, subscriptionStatus } = userContext;
-    const [isLoading, setIsLoading] = React.useState(false);
     const subscriptionBilling = userContext.subscriptionType;
     const planTier = planKey;
     const planBilling = billingType;
@@ -184,16 +184,19 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     const config = getButtonConfig();
     if (config.hidden)
         return null;
+    const hasActiveSubscription = subscriptionStatus === moneyPriceTypes.UserState.ProUser ||
+        subscriptionStatus === moneyPriceTypes.UserState.UltraUser;
     if (!enableSubscriptionUpgrade &&
         billingType !== 'onetime' &&
+        hasActiveSubscription &&
         config.text === texts.upgrade &&
         typeof config.onClick === 'function') {
         return null;
     }
-    const isBusy = isLoading || isProcessing;
-    const isDisabled = config.disabled || isBusy;
-    const displayText = isBusy ? 'Processing...' : config.text;
-    const isDisabledByConfigOnly = config.disabled && !isBusy;
+    const isCurrentButtonBusy = isLoading || isProcessing;
+    const isDisabled = config.disabled || isCurrentButtonBusy || isAnyProcessing;
+    const displayText = isCurrentButtonBusy ? 'Processing...' : config.text;
+    const isDisabledByConfigOnly = config.disabled && !isCurrentButtonBusy && !isAnyProcessing;
     const handleClick = (e) => tslib.__awaiter(this, void 0, void 0, function* () {
         if (isDisabled) {
             e.preventDefault();
@@ -217,8 +220,8 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     });
     const buttonClassName = utils.cn('w-full h-11 md:h-12 px-5 md:px-8 mt-4 md:mt-auto inline-flex items-center justify-center text-white text-sm md:text-base font-bold tracking-wide shadow-md hover:shadow-lg transition-all duration-300 rounded-full', isDisabledByConfigOnly
         ? 'bg-gray-400 cursor-not-allowed'
-        : lib.themeButtonGradientClass, !isDisabledByConfigOnly && !isBusy &&
-        lib.themeButtonGradientHoverClass, isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
+        : lib.themeButtonGradientClass, !isDisabledByConfigOnly && !isCurrentButtonBusy && !isAnyProcessing &&
+        lib.themeButtonGradientHoverClass, (isCurrentButtonBusy || isAnyProcessing) && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
     return (jsxRuntime.jsx("button", { className: buttonClassName, disabled: isDisabled, onClick: handleClick, type: "button", "data-plan-button": planKey, children: displayText }));
 }
 

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

@@ -6,12 +6,12 @@ import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windru
 import { UserState } from './money-price-types.mjs';
 import { useState } from 'react';
 
-function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing = false, isInitLoading = false, enableSubscriptionUpgrade = true }) {
+function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction, texts, isProcessing = false, isAnyProcessing = false, isInitLoading = false, enableSubscriptionUpgrade = true }) {
+    const [isLoading, setIsLoading] = useState(false);
     if (isInitLoading) {
-        return (jsx("div", { className: "w-full h-11 md:h-12 mt-4 md:mt-auto rounded-full bg-transparent", "aria-hidden": "true", "data-plan-button-placeholder": planKey }));
+        return (jsx("div", { className: "relative w-full h-11 md:h-12 mt-4 md:mt-auto overflow-hidden rounded-full bg-gray-100/70 dark:bg-gray-800/40 animate-pulse transition-opacity duration-300 ease-out", "aria-hidden": "true", "data-plan-button-placeholder": planKey, children: jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/10" }) }));
     }
     const { isAuthenticated, subscriptionStatus } = userContext;
-    const [isLoading, setIsLoading] = useState(false);
     const subscriptionBilling = userContext.subscriptionType;
     const planTier = planKey;
     const planBilling = billingType;
@@ -182,16 +182,19 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     const config = getButtonConfig();
     if (config.hidden)
         return null;
+    const hasActiveSubscription = subscriptionStatus === UserState.ProUser ||
+        subscriptionStatus === UserState.UltraUser;
     if (!enableSubscriptionUpgrade &&
         billingType !== 'onetime' &&
+        hasActiveSubscription &&
         config.text === texts.upgrade &&
         typeof config.onClick === 'function') {
         return null;
     }
-    const isBusy = isLoading || isProcessing;
-    const isDisabled = config.disabled || isBusy;
-    const displayText = isBusy ? 'Processing...' : config.text;
-    const isDisabledByConfigOnly = config.disabled && !isBusy;
+    const isCurrentButtonBusy = isLoading || isProcessing;
+    const isDisabled = config.disabled || isCurrentButtonBusy || isAnyProcessing;
+    const displayText = isCurrentButtonBusy ? 'Processing...' : config.text;
+    const isDisabledByConfigOnly = config.disabled && !isCurrentButtonBusy && !isAnyProcessing;
     const handleClick = (e) => __awaiter(this, void 0, void 0, function* () {
         if (isDisabled) {
             e.preventDefault();
@@ -215,8 +218,8 @@ function MoneyPriceButton({ planKey, userContext, billingType, onAuth, onAction,
     });
     const buttonClassName = cn('w-full h-11 md:h-12 px-5 md:px-8 mt-4 md:mt-auto inline-flex items-center justify-center text-white text-sm md:text-base font-bold tracking-wide shadow-md hover:shadow-lg transition-all duration-300 rounded-full', isDisabledByConfigOnly
         ? 'bg-gray-400 cursor-not-allowed'
-        : themeButtonGradientClass, !isDisabledByConfigOnly && !isBusy &&
-        themeButtonGradientHoverClass, isBusy && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
+        : themeButtonGradientClass, !isDisabledByConfigOnly && !isCurrentButtonBusy && !isAnyProcessing &&
+        themeButtonGradientHoverClass, (isCurrentButtonBusy || isAnyProcessing) && !isDisabledByConfigOnly && 'opacity-70 cursor-not-allowed');
     return (jsx("button", { className: buttonClassName, disabled: isDisabled, onClick: handleClick, type: "button", "data-plan-button": planKey, children: displayText }));
 }
 

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

@@ -1,2 +1,2 @@
 import { type MoneyPriceInteractiveProps } from './money-price-types';
-export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal, enabledBillingTypes, enableSubscriptionUpgrade, initialBillingType, disableAutoDetectBilling, initUserContext, isInitLoading, }: MoneyPriceInteractiveProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,8 +14,8 @@ var customerPortal = require('./customer-portal.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, }) {
-    var _a, _b, _c, _d;
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+    var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = nextjs.useClerk();
     const router = navigation.useRouter();
     const providerConfig = React.useMemo(() => moneyPriceConfigUtil.getActiveProviderConfigUtil(config), [config]);
@@ -103,21 +103,17 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.priceId,
         priceIdsByCycle,
     ]);
-    const initialBillingCandidate = React.useMemo(() => {
-        if (initialBillingType) {
-            return resolvedInitialBilling;
-        }
-        if (detectedBillingType) {
-            return detectedBillingType;
+    const explicitInitialBilling = React.useMemo(() => {
+        if (initialBillingType &&
+            billingOptions.some(option => option.key === initialBillingType)) {
+            return initialBillingType;
         }
-        return resolvedInitialBilling;
-    }, [initialBillingType, resolvedInitialBilling, detectedBillingType]);
-    const [billingType, setBillingType] = React.useState(initialBillingCandidate);
+        return null;
+    }, [initialBillingType, billingOptions]);
+    const [userSelectedBillingType, setUserSelectedBillingType] = React.useState(null);
+    const billingType = (_c = (_b = userSelectedBillingType !== null && userSelectedBillingType !== void 0 ? userSelectedBillingType : explicitInitialBilling) !== null && _b !== void 0 ? _b : detectedBillingType) !== null && _c !== void 0 ? _c : resolvedInitialBilling;
     const navigationLockRef = React.useRef(false);
-    React.useEffect(() => {
-        setBillingType(prev => (prev === initialBillingCandidate ? prev : initialBillingCandidate));
-    }, [initialBillingCandidate]);
-    const [isProcessing, setIsProcessing] = React.useState(false);
+    const [processingTarget, setProcessingTarget] = React.useState(null);
     const [isTouchDevice, setIsTouchDevice] = React.useState(false);
     React.useEffect(() => {
         setIsTouchDevice('ontouchstart' in window || navigator.maxTouchPoints > 0);
@@ -156,8 +152,8 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         detectedBillingType,
         subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.subPeriodEnd
     ]);
-    const fingerprintId = (_b = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.fingerprintId) !== null && _b !== void 0 ? _b : null;
-    const initUserId = (_d = (_c = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _c === void 0 ? void 0 : _c.userId) !== null && _d !== void 0 ? _d : null;
+    const fingerprintId = (_d = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.fingerprintId) !== null && _d !== void 0 ? _d : null;
+    const initUserId = (_f = (_e = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _e === void 0 ? void 0 : _e.userId) !== null && _f !== void 0 ? _f : null;
     const handleAuth = React.useCallback(() => {
         if (!enableClerkModal) {
             redirectToSignUp();
@@ -175,18 +171,18 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const handleAction = React.useCallback((plan, billing) => tslib.__awaiter(this, void 0, void 0, function* () {
         var _a;
         const isSubscriptionFlow = billing !== 'onetime';
-        if (isSubscriptionFlow && !enableSubscriptionUpgrade) {
+        const hasActiveSubscription = userContext.isAuthenticated &&
+            (userContext.subscriptionStatus === moneyPriceTypes.UserState.ProUser ||
+                userContext.subscriptionStatus === moneyPriceTypes.UserState.UltraUser);
+        if (isSubscriptionFlow && hasActiveSubscription && !enableSubscriptionUpgrade) {
             return;
         }
         navigationLockRef.current = false;
-        setIsProcessing(true);
+        setProcessingTarget({ plan, billing });
         const markNavigating = () => {
             navigationLockRef.current = true;
         };
         try {
-            const hasActiveSubscription = userContext.isAuthenticated &&
-                (userContext.subscriptionStatus === moneyPriceTypes.UserState.ProUser ||
-                    userContext.subscriptionStatus === moneyPriceTypes.UserState.UltraUser);
             const shouldUsePortal = isSubscriptionFlow && hasActiveSubscription;
             if (shouldUsePortal) {
                 const handled = yield customerPortal.redirectToCustomerPortal({
@@ -255,7 +251,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         }
         finally {
             if (!navigationLockRef.current) {
-                setIsProcessing(false);
+                setProcessingTarget(null);
             }
         }
     }), [
@@ -317,7 +313,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                             ? utils.cn('text-white rounded-full shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         const showBadge = option.key === billingType && !!discountBadgeText;
-                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.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 })), jsxRuntime.jsx("button", { className: utils.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: () => setBillingType(option.key), children: option.name })] }, option.key));
+                        return (jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center mx-1", children: [showBadge && (jsxRuntime.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 })), jsxRuntime.jsx("button", { className: utils.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));
                     }) }) }), jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.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) => {
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {
@@ -332,7 +328,8 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                                                     // OneTime 模式下的特殊处理：普通文本 + 带样式的产品副标题
                                                     jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(selectedBillingOption === null || selectedBillingOption === void 0 ? void 0 : selectedBillingOption.subTitle) && (jsxRuntime.jsx("span", { className: "text-[11px] md:text-xs text-gray-700 dark:text-gray-300 font-medium", children: selectedBillingOption.subTitle })), plan.subtitle && (jsxRuntime.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 && (jsxRuntime.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) || '' }))) })] })] }), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${i}`, children: [feature ? (jsxRuntime.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 ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsxRuntime.jsx("span", { children: feature.description }), feature.tooltip && (jsxRuntime.jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx(moneyPriceButton.MoneyPriceButton, { planKey: planKey, userContext: userContext, billingType: billingType, onAuth: handleAuth, onAction: handleAction, texts: data.buttonTexts, isProcessing: isProcessing, isInitLoading: false, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }, plan.key));
+                                                    showBillingSubtitle && (jsxRuntime.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) || '' }))) })] })] }), jsxRuntime.jsx("ul", { className: "flex-1 mb-6 mt-4 text-xs md:text-sm leading-5", children: getFeatureRows(plan).map((feature, i) => (jsxRuntime.jsxs("li", { className: "flex items-start gap-2 mb-2 min-h-[24px] md:min-h-[28px]", "data-feature-item": `${planKey}-${i}`, children: [feature ? (jsxRuntime.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 ? jsxRuntime.jsx("span", { children: feature.icon }) : jsxRuntime.jsx("span", { className: "font-bold", children: "\u2713" }) })) : (jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center w-5 h-5 rounded-full mr-1", children: "\u00A0" })), feature && feature.tag && (jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: "flex-1 text-gray-800 dark:text-gray-200", children: [jsxRuntime.jsx("span", { children: feature.description }), feature.tooltip && (jsxRuntime.jsx("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 mt-1", children: feature.tooltip }))] })) : (jsxRuntime.jsx("span", { children: "\u00A0" }))] }, i))) }), jsxRuntime.jsx("div", { className: "flex-1" }), jsxRuntime.jsx(moneyPriceButton.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));
                     }) }) })] }));
 }
 

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

@@ -12,8 +12,8 @@ import { redirectToCustomerPortal } from './customer-portal.mjs';
 import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 
 const PLAN_KEYS = ['F1', 'P2', 'U3'];
-function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, }) {
-    var _a, _b, _c, _d;
+function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, enableSubscriptionUpgrade = true, initialBillingType, disableAutoDetectBilling = false, initUserContext, isInitLoading = false, }) {
+    var _a, _b, _c, _d, _e, _f;
     const { redirectToSignIn, redirectToSignUp, user: clerkUser, openSignUp } = useClerk();
     const router = useRouter();
     const providerConfig = useMemo(() => getActiveProviderConfigUtil(config), [config]);
@@ -101,21 +101,17 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.priceId,
         priceIdsByCycle,
     ]);
-    const initialBillingCandidate = useMemo(() => {
-        if (initialBillingType) {
-            return resolvedInitialBilling;
-        }
-        if (detectedBillingType) {
-            return detectedBillingType;
+    const explicitInitialBilling = useMemo(() => {
+        if (initialBillingType &&
+            billingOptions.some(option => option.key === initialBillingType)) {
+            return initialBillingType;
         }
-        return resolvedInitialBilling;
-    }, [initialBillingType, resolvedInitialBilling, detectedBillingType]);
-    const [billingType, setBillingType] = useState(initialBillingCandidate);
+        return null;
+    }, [initialBillingType, billingOptions]);
+    const [userSelectedBillingType, setUserSelectedBillingType] = useState(null);
+    const billingType = (_c = (_b = userSelectedBillingType !== null && userSelectedBillingType !== void 0 ? userSelectedBillingType : explicitInitialBilling) !== null && _b !== void 0 ? _b : detectedBillingType) !== null && _c !== void 0 ? _c : resolvedInitialBilling;
     const navigationLockRef = useRef(false);
-    useEffect(() => {
-        setBillingType(prev => (prev === initialBillingCandidate ? prev : initialBillingCandidate));
-    }, [initialBillingCandidate]);
-    const [isProcessing, setIsProcessing] = useState(false);
+    const [processingTarget, setProcessingTarget] = useState(null);
     const [isTouchDevice, setIsTouchDevice] = useState(false);
     useEffect(() => {
         setIsTouchDevice('ontouchstart' in window || navigator.maxTouchPoints > 0);
@@ -154,8 +150,8 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         detectedBillingType,
         subscriptionSnapshot === null || subscriptionSnapshot === void 0 ? void 0 : subscriptionSnapshot.subPeriodEnd
     ]);
-    const fingerprintId = (_b = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.fingerprintId) !== null && _b !== void 0 ? _b : null;
-    const initUserId = (_d = (_c = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _c === void 0 ? void 0 : _c.userId) !== null && _d !== void 0 ? _d : null;
+    const fingerprintId = (_d = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.fingerprintId) !== null && _d !== void 0 ? _d : null;
+    const initUserId = (_f = (_e = initUserContext === null || initUserContext === void 0 ? void 0 : initUserContext.xUser) === null || _e === void 0 ? void 0 : _e.userId) !== null && _f !== void 0 ? _f : null;
     const handleAuth = useCallback(() => {
         if (!enableClerkModal) {
             redirectToSignUp();
@@ -173,18 +169,18 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
     const handleAction = useCallback((plan, billing) => __awaiter(this, void 0, void 0, function* () {
         var _a;
         const isSubscriptionFlow = billing !== 'onetime';
-        if (isSubscriptionFlow && !enableSubscriptionUpgrade) {
+        const hasActiveSubscription = userContext.isAuthenticated &&
+            (userContext.subscriptionStatus === UserState.ProUser ||
+                userContext.subscriptionStatus === UserState.UltraUser);
+        if (isSubscriptionFlow && hasActiveSubscription && !enableSubscriptionUpgrade) {
             return;
         }
         navigationLockRef.current = false;
-        setIsProcessing(true);
+        setProcessingTarget({ plan, billing });
         const markNavigating = () => {
             navigationLockRef.current = true;
         };
         try {
-            const hasActiveSubscription = userContext.isAuthenticated &&
-                (userContext.subscriptionStatus === UserState.ProUser ||
-                    userContext.subscriptionStatus === UserState.UltraUser);
             const shouldUsePortal = isSubscriptionFlow && hasActiveSubscription;
             if (shouldUsePortal) {
                 const handled = yield redirectToCustomerPortal({
@@ -253,7 +249,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
         }
         finally {
             if (!navigationLockRef.current) {
-                setIsProcessing(false);
+                setProcessingTarget(null);
             }
         }
     }), [
@@ -315,7 +311,7 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                             ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass)
                             : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
                         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: () => setBillingType(option.key), children: option.name })] }, option.key));
+                        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) => {
                         const planKey = plan.key;
                         if (!PLAN_KEYS.includes(planKey)) {
@@ -330,7 +326,8 @@ function MoneyPriceInteractive({ data, config, checkoutApiEndpoint, customerPort
                                                     // 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: isProcessing, isInitLoading: false, enableSubscriptionUpgrade: enableSubscriptionUpgrade })] }, plan.key));
+                                                    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));
                     }) }) })] }));
 }
 

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

@@ -96,6 +96,7 @@ export interface MoneyPriceInteractiveProps {
     initialBillingType?: string;
     disableAutoDetectBilling?: boolean;
     initUserContext?: InitUserContext;
+    isInitLoading?: boolean;
 }
 export interface MoneyPriceButtonProps {
     planKey: 'F1' | 'P2' | 'U3';
@@ -112,6 +113,7 @@ export interface MoneyPriceButtonProps {
         upgrade: string;
     };
     isProcessing?: boolean;
+    isAnyProcessing?: boolean;
     isInitLoading: boolean;
     enableSubscriptionUpgrade?: boolean;
 }

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

@@ -0,0 +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 { UserState } from './money-price-types';

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var moneyPrice = require('./money-price.js');
+var moneyPriceConfigUtil = require('./money-price-config-util.js');
+var moneyPriceData = require('./money-price-data.js');
+var moneyPriceTypes = require('./money-price-types.js');
+
+
+
+exports.MoneyPrice = moneyPrice.MoneyPrice;
+exports.getActiveProviderConfigUtil = moneyPriceConfigUtil.getActiveProviderConfigUtil;
+exports.getCreditsFromPriceIdUtil = moneyPriceConfigUtil.getCreditsFromPriceIdUtil;
+exports.getPriceConfigUtil = moneyPriceConfigUtil.getPriceConfigUtil;
+exports.buildMoneyPriceData = moneyPriceData.buildMoneyPriceData;
+Object.defineProperty(exports, "UserState", {
+	enumerable: true,
+	get: function () { return moneyPriceTypes.UserState; }
+});

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

@@ -0,0 +1,4 @@
+export { MoneyPrice } from './money-price.mjs';
+export { getActiveProviderConfigUtil, getCreditsFromPriceIdUtil, getPriceConfigUtil } from './money-price-config-util.mjs';
+export { buildMoneyPriceData } from './money-price-data.mjs';
+export { UserState } from './money-price-types.mjs';