@windrun-huaiin/third-ui 13.0.1 → 13.1.1

package/dist/_virtual/advancedFormat.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var advancedFormat = require('../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/advancedFormat.js');
 
 var advancedFormatExports = advancedFormat.__require();
 var dayjsAdvancedFormat = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(advancedFormatExports);
 
-module.exports = dayjsAdvancedFormat;
+exports.default = dayjsAdvancedFormat;

package/dist/_virtual/customParseFormat.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var customParseFormat = require('../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/customParseFormat.js');
 
 var customParseFormatExports = customParseFormat.__require();
 var dayjsCustomParseFormat = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(customParseFormatExports);
 
-module.exports = dayjsCustomParseFormat;
+exports.default = dayjsCustomParseFormat;

package/dist/_virtual/cytoscape-cose-bilkent.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var cytoscapeCoseBilkent = require('../node_modules/.pnpm/cytoscape-cose-bilkent@4.1.0_cytoscape@3.33.1/node_modules/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js');
 
 var cytoscapeCoseBilkentExports = cytoscapeCoseBilkent.__require();
 var coseBilkent = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(cytoscapeCoseBilkentExports);
 
-module.exports = coseBilkent;
+exports.default = coseBilkent;

package/dist/_virtual/cytoscape-fcose.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var cytoscapeFcose = require('../node_modules/.pnpm/cytoscape-fcose@2.2.0_cytoscape@3.33.1/node_modules/cytoscape-fcose/cytoscape-fcose.js');
 
 var cytoscapeFcoseExports = cytoscapeFcose.__require();
 var fcose = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(cytoscapeFcoseExports);
 
-module.exports = fcose;
+exports.default = fcose;

package/dist/_virtual/dayjs.min.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var dayjs_min = require('../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/dayjs.min.js');
 
 var dayjs_minExports = dayjs_min.__require();
 var dayjs2 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(dayjs_minExports);
 
-module.exports = dayjs2;
+exports.default = dayjs2;

package/dist/_virtual/isoWeek.js

@@ -1,9 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _commonjsHelpers = require('./_commonjsHelpers.js');
 var isoWeek = require('../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isoWeek.js');
 
 var isoWeekExports = isoWeek.__require();
 var dayjsIsoWeek = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(isoWeekExports);
 
-module.exports = dayjsIsoWeek;
+exports.default = dayjsIsoWeek;

package/dist/clerk/clerk-user-client.js

@@ -5,11 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var nextjs = require('@clerk/nextjs');
 var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var signupButtonWithFingerprintClient = require('./signup-button-with-fingerprint-client.js');
 
 function ClerkUserClient({ data }) {
     const [showTooltip, setShowTooltip] = React.useState(false);
-    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [data.showSignUp && (jsxRuntime.jsxs("div", { className: "relative inline-flex z-10", children: [jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: "absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default", children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsxRuntime.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none", children: data.signUpBonusTooltip }))] }))] })), jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("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", children: data.signIn }) })] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
+    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsxRuntime.jsx(nextjs.ClerkLoading, { children: jsxRuntime.jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxRuntime.jsxs(nextjs.ClerkLoaded, { children: [jsxRuntime.jsxs(nextjs.SignedOut, { children: [data.showSignUp && (jsxRuntime.jsxs("div", { className: "relative inline-flex z-10", children: [jsxRuntime.jsx(signupButtonWithFingerprintClient.SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: `absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full ${lib.themeButtonGradientClass} px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default`, children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsxRuntime.jsx("div", { className: `absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg ${lib.themeButtonGradientClass} border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg pointer-events-none`, children: data.signUpBonusTooltip }))] }))] })), jsxRuntime.jsx(nextjs.SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsxRuntime.jsx("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", children: data.signIn }) })] }), jsxRuntime.jsx(nextjs.SignedIn, { children: jsxRuntime.jsx(nextjs.UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/clerk/clerk-user-client.mjs

@@ -3,11 +3,12 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { ClerkLoading, ClerkLoaded, SignedOut, SignInButton, SignedIn, UserButton } from '@clerk/nextjs';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeButtonGradientClass } from '@windrun-huaiin/base-ui/lib';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client.mjs';
 
 function ClerkUserClient({ data }) {
     const [showTooltip, setShowTooltip] = useState(false);
-    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [data.showSignUp && (jsxs("div", { className: "relative inline-flex z-10", children: [jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxs(Fragment, { children: [jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: "absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full bg-linear-to-r from-purple-400 to-pink-500 dark:from-purple-500 dark:to-pink-600 px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg shadow-purple-500/30 ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default", children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsx("div", { className: "absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg bg-linear-to-r from-purple-500 to-pink-500 dark:from-purple-500 dark:to-pink-600 border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-purple-500/30 pointer-events-none", children: data.signUpBonusTooltip }))] }))] })), jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("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", children: data.signIn }) })] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
+    return (jsxs("div", { className: "flex items-center gap-2 h-10 mr-3 sm:mr-2", children: [jsx(ClerkLoading, { children: jsx("div", { className: "w-20 h-9 px-2 border border-gray-300 rounded-full hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800 text-center text-sm" }) }), jsxs(ClerkLoaded, { children: [jsxs(SignedOut, { children: [data.showSignUp && (jsxs("div", { className: "relative inline-flex z-10", children: [jsx(SignUpButtonWithFingerprint, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', signUp: data.signUp }), data.signUpBonus && (jsxs(Fragment, { children: [jsx("span", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), className: `absolute -top-0.5 sm:-top-1 -right-1.5 sm:-right-2 flex h-4 sm:h-5 min-w-4 sm:min-w-5 items-center justify-center rounded-full ${themeButtonGradientClass} px-1 sm:px-1.5 text-[9px] sm:text-[10px] font-bold text-white shadow-lg ring-1 sm:ring-2 ring-white/80 dark:ring-white/10 cursor-default`, children: data.signUpBonus }), showTooltip && data.signUpBonusTooltip && (jsx("div", { className: `absolute left-1/2 -translate-x-1/2 -translate-y-full -top-1.5 whitespace-nowrap rounded-lg ${themeButtonGradientClass} border border-white/30 dark:border-white/10 px-3 py-1.5 text-xs font-medium text-white shadow-lg pointer-events-none`, children: data.signUpBonusTooltip }))] }))] })), jsx(SignInButton, { mode: data.clerkAuthInModal ? 'modal' : 'redirect', children: jsx("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", children: data.signIn }) })] }), jsx(SignedIn, { children: jsx(UserButton, { appearance: {
                                 elements: {
                                     userButtonAvatarBox: "w-8 h-8 border",
                                 }

package/dist/clerk/fingerprint/fingerprint-provider.js

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
 var React = require('react');
 var useFingerprint = require('./use-fingerprint.js');
@@ -125,7 +126,7 @@ function FingerprintStatus() {
     const userStatus = (xUser === null || xUser === void 0 ? void 0 : xUser.status) || '--';
     const totalCredits = formatNumber(xCredit === null || xCredit === void 0 ? void 0 : xCredit.totalBalance);
     const subStatus = subscriptionStatus.status;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": "Fingerprint debug panel", className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', 'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(server.globalLucideIcons.Lightbulb, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base font-bold tracking-wider text-purple-600 dark:text-purple-500", children: [jsxRuntime.jsx(server.globalLucideIcons.ShieldUser, { className: "size-4" }), "Fingerprint Debug Panel"] }), jsxRuntime.jsx("button", { type: "button", "aria-label": "Close fingerprint panel", className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "size-4" }) })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(server.globalLucideIcons.Fingerprint, { className: "size-4" }), title: "\u7528\u6237\u4FE1\u606F", rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus }), items: [
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": "Fingerprint debug panel", className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(server.globalLucideIcons.Lightbulb, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 text-base font-bold tracking-wider", lib.themeIconColor), children: [jsxRuntime.jsx(server.globalLucideIcons.ShieldUser, { className: "size-4" }), "Fingerprint Debug Panel"] }), jsxRuntime.jsx("button", { type: "button", "aria-label": "Close fingerprint panel", className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "size-4" }) })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(server.globalLucideIcons.Fingerprint, { className: "size-4" }), title: "\u7528\u6237\u4FE1\u606F", rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus }), items: [
                                             { label: '用户ID', value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                             { label: '用户昵称', value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                             { label: 'FingerprintID', value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },
@@ -133,7 +134,7 @@ function FingerprintStatus() {
                                             { label: '邮箱', value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.email) || '' }) },
                                             { label: 'Stripe客户', value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.stripeCusId) || '' }) },
                                             { label: '创建时间', value: (xUser === null || xUser === void 0 ? void 0 : xUser.createdAt) || '--' },
-                                        ] }), jsxRuntime.jsxs("div", { className: "space-y-2 rounded-xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/50", children: [jsxRuntime.jsx(PanelHeader, { icon: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "size-4" }), title: "\u79EF\u5206\u4FE1\u606F", rightInfo: jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-500 font-semibold", children: totalCredits }) }), jsxRuntime.jsx("div", { className: "space-y-3", children: creditBuckets.length > 0 ? (creditBuckets.map((bucket) => {
+                                        ] }), jsxRuntime.jsxs("div", { className: "space-y-2 rounded-xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/50", children: [jsxRuntime.jsx(PanelHeader, { icon: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "size-4" }), title: "\u79EF\u5206\u4FE1\u606F", rightInfo: jsxRuntime.jsx("span", { className: utils.cn("font-semibold", lib.themeIconColor), children: totalCredits }) }), jsxRuntime.jsx("div", { className: "space-y-3", children: creditBuckets.length > 0 ? (creditBuckets.map((bucket) => {
                                                     const percent = Math.round(computeProgress(bucket.balance, bucket.total) * 100);
                                                     return (jsxRuntime.jsxs("div", { className: "rounded-lg border border-slate-200/70 bg-white/70 p-3 dark:border-white/10 dark:bg-slate-900/40", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-slate-600 dark:text-slate-300", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [bucket.icon, jsxRuntime.jsx("span", { children: bucket.label })] }), jsxRuntime.jsxs("span", { className: "font-semibold text-slate-700 dark:text-slate-100", children: [formatNumber(bucket.balance), " / ", formatNumber(bucket.total)] })] }), jsxRuntime.jsx("div", { className: "mt-2 h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-800", children: jsxRuntime.jsx("div", { className: "h-full rounded-full bg-linear-to-r from-purple-500 via-pink-500 to-rose-400 transition-[width]", style: { width: `${percent}%` } }) }), jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-400", children: [jsxRuntime.jsx("span", { children: formatRangeText(bucket.start, bucket.end) }), jsxRuntime.jsxs("span", { children: [percent, "%"] })] })] }, bucket.key));
                                                 })) : (jsxRuntime.jsx(EmptyPlaceholder, { label: "\u6682\u65E0\u79EF\u5206\u6570\u636E", icon: jsxRuntime.jsx(server.globalLucideIcons.DatabaseZap, { className: "size-4" }) })) })] }), jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(server.globalLucideIcons.Bell, { className: "size-4" }), title: "\u8BA2\u9605\u4FE1\u606F", rightInfo: jsxRuntime.jsx(StatusTag, { value: subStatus }), items: [
@@ -148,7 +149,7 @@ function FingerprintStatus() {
 /* ==================== 新增辅助组件 ==================== */
 // 标题行：左侧图标+标题，右侧信息（右对齐）
 function PanelHeader({ icon, title, rightInfo }) {
-    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-100", children: [jsxRuntime.jsx("span", { className: "flex size-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: icon }), jsxRuntime.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-1 text-xs font-bold text-purple-600 dark:bg-purple-500/20 dark:text-purple-100", children: title })] }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-600 dark:text-slate-300", children: rightInfo })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-100", children: [jsxRuntime.jsx("span", { className: "flex size-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: icon }), jsxRuntime.jsx("span", { className: utils.cn("rounded-full bg-purple-100 px-2 py-1 text-xs font-bold", lib.themeIconColor), children: title })] }), jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-600 dark:text-slate-300", children: rightInfo })] }));
 }
 function PanelSection({ icon, title, rightInfo, items }) {
     return (jsxRuntime.jsxs("div", { className: "rounded-xl border border-slate-200/70 bg-white/85 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/45", children: [jsxRuntime.jsx(PanelHeader, { icon: icon, title: title, rightInfo: rightInfo }), jsxRuntime.jsx("dl", { className: "grid grid-cols-1 gap-y-1.5 text-xs text-slate-500 dark:text-slate-300", children: items.map((item) => (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsx("dt", { className: "text-slate-400 dark:text-slate-500", children: item.label }), jsxRuntime.jsx("dd", { className: "text-right font-medium text-slate-600 dark:text-slate-100", children: item.value })] }, item.label))) })] }));

package/dist/clerk/fingerprint/fingerprint-provider.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
 import { useFingerprint } from './use-fingerprint.mjs';
@@ -123,7 +124,7 @@ function FingerprintStatus() {
     const userStatus = (xUser === null || xUser === void 0 ? void 0 : xUser.status) || '--';
     const totalCredits = formatNumber(xCredit === null || xCredit === void 0 ? void 0 : xCredit.totalBalance);
     const subStatus = subscriptionStatus.status;
-    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": "Fingerprint debug panel", className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', 'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(globalLucideIcons.Lightbulb, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-2 text-base font-bold tracking-wider text-purple-600 dark:text-purple-500", children: [jsx(globalLucideIcons.ShieldUser, { className: "size-4" }), "Fingerprint Debug Panel"] }), jsx("button", { type: "button", "aria-label": "Close fingerprint panel", className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(globalLucideIcons.X, { className: "size-4" }) })] }) }), jsxs("section", { className: "space-y-1", children: [jsx(PanelSection, { icon: jsx(globalLucideIcons.Fingerprint, { className: "size-4" }), title: "\u7528\u6237\u4FE1\u606F", rightInfo: jsx(StatusTag, { value: userStatus }), items: [
+    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": "Fingerprint debug panel", className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(globalLucideIcons.Lightbulb, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor), children: [jsx(globalLucideIcons.ShieldUser, { className: "size-4" }), "Fingerprint Debug Panel"] }), jsx("button", { type: "button", "aria-label": "Close fingerprint panel", className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(globalLucideIcons.X, { className: "size-4" }) })] }) }), jsxs("section", { className: "space-y-1", children: [jsx(PanelSection, { icon: jsx(globalLucideIcons.Fingerprint, { className: "size-4" }), title: "\u7528\u6237\u4FE1\u606F", rightInfo: jsx(StatusTag, { value: userStatus }), items: [
                                             { label: '用户ID', value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                             { label: '用户昵称', value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                             { label: 'FingerprintID', value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },
@@ -131,7 +132,7 @@ function FingerprintStatus() {
                                             { label: '邮箱', value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.email) || '' }) },
                                             { label: 'Stripe客户', value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.stripeCusId) || '' }) },
                                             { label: '创建时间', value: (xUser === null || xUser === void 0 ? void 0 : xUser.createdAt) || '--' },
-                                        ] }), jsxs("div", { className: "space-y-2 rounded-xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/50", children: [jsx(PanelHeader, { icon: jsx(globalLucideIcons.Gem, { className: "size-4" }), title: "\u79EF\u5206\u4FE1\u606F", rightInfo: jsx("span", { className: "text-purple-600 dark:text-purple-500 font-semibold", children: totalCredits }) }), jsx("div", { className: "space-y-3", children: creditBuckets.length > 0 ? (creditBuckets.map((bucket) => {
+                                        ] }), jsxs("div", { className: "space-y-2 rounded-xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/50", children: [jsx(PanelHeader, { icon: jsx(globalLucideIcons.Gem, { className: "size-4" }), title: "\u79EF\u5206\u4FE1\u606F", rightInfo: jsx("span", { className: cn("font-semibold", themeIconColor), children: totalCredits }) }), jsx("div", { className: "space-y-3", children: creditBuckets.length > 0 ? (creditBuckets.map((bucket) => {
                                                     const percent = Math.round(computeProgress(bucket.balance, bucket.total) * 100);
                                                     return (jsxs("div", { className: "rounded-lg border border-slate-200/70 bg-white/70 p-3 dark:border-white/10 dark:bg-slate-900/40", children: [jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-slate-600 dark:text-slate-300", children: [jsxs("div", { className: "flex items-center gap-1.5", children: [bucket.icon, jsx("span", { children: bucket.label })] }), jsxs("span", { className: "font-semibold text-slate-700 dark:text-slate-100", children: [formatNumber(bucket.balance), " / ", formatNumber(bucket.total)] })] }), jsx("div", { className: "mt-2 h-1.5 w-full rounded-full bg-slate-200 dark:bg-slate-800", children: jsx("div", { className: "h-full rounded-full bg-linear-to-r from-purple-500 via-pink-500 to-rose-400 transition-[width]", style: { width: `${percent}%` } }) }), jsxs("div", { className: "mt-2 flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-400", children: [jsx("span", { children: formatRangeText(bucket.start, bucket.end) }), jsxs("span", { children: [percent, "%"] })] })] }, bucket.key));
                                                 })) : (jsx(EmptyPlaceholder, { label: "\u6682\u65E0\u79EF\u5206\u6570\u636E", icon: jsx(globalLucideIcons.DatabaseZap, { className: "size-4" }) })) })] }), jsx(PanelSection, { icon: jsx(globalLucideIcons.Bell, { className: "size-4" }), title: "\u8BA2\u9605\u4FE1\u606F", rightInfo: jsx(StatusTag, { value: subStatus }), items: [
@@ -146,7 +147,7 @@ function FingerprintStatus() {
 /* ==================== 新增辅助组件 ==================== */
 // 标题行：左侧图标+标题，右侧信息（右对齐）
 function PanelHeader({ icon, title, rightInfo }) {
-    return (jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-100", children: [jsx("span", { className: "flex size-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: icon }), jsx("span", { className: "rounded-full bg-purple-100 px-2 py-1 text-xs font-bold text-purple-600 dark:bg-purple-500/20 dark:text-purple-100", children: title })] }), jsx("span", { className: "text-sm font-medium text-slate-600 dark:text-slate-300", children: rightInfo })] }));
+    return (jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-100", children: [jsx("span", { className: "flex size-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: icon }), jsx("span", { className: cn("rounded-full bg-purple-100 px-2 py-1 text-xs font-bold", themeIconColor), children: title })] }), jsx("span", { className: "text-sm font-medium text-slate-600 dark:text-slate-300", children: rightInfo })] }));
 }
 function PanelSection({ icon, title, rightInfo, items }) {
     return (jsxs("div", { className: "rounded-xl border border-slate-200/70 bg-white/85 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/45", children: [jsx(PanelHeader, { icon: icon, title: title, rightInfo: rightInfo }), jsx("dl", { className: "grid grid-cols-1 gap-y-1.5 text-xs text-slate-500 dark:text-slate-300", children: items.map((item) => (jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsx("dt", { className: "text-slate-400 dark:text-slate-500", children: item.label }), jsx("dd", { className: "text-right font-medium text-slate-600 dark:text-slate-100", children: item.value })] }, item.label))) })] }));

package/dist/fuma/mdx/gradient-button.js

@@ -5,6 +5,7 @@ var tslib_es6 = require('../../node_modules/.pnpm/@rollup_plugin-typescript@12.1
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var Link = require('next/link');
 var React = require('react');
 
@@ -78,7 +79,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     // Base styles extracted from Button component + size="lg" (h-11 px-8)
     // Removed [&_svg] constraints
     const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-    const buttonClassName = utils.cn(baseButtonStyles, 'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const buttonClassName = utils.cn(baseButtonStyles, lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsxRuntime.jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsxRuntime.jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/fuma/mdx/gradient-button.mjs

@@ -3,6 +3,7 @@ import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 import Link from 'next/link';
 import React, { useState } from 'react';
 
@@ -76,7 +77,7 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     // Base styles extracted from Button component + size="lg" (h-11 px-8)
     // Removed [&_svg] constraints
     const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-    const buttonClassName = cn(baseButtonStyles, 'bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const buttonClassName = cn(baseButtonStyles, themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/fuma/mdx/mermaid.js

@@ -7,8 +7,6 @@ var server = require('@windrun-huaiin/base-ui/components/server');
 var nextThemes = require('next-themes');
 var React = require('react');
 
-function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
-
 function sanitizeFilename(name) {
     return name
         .replace(/[\/:*?"<>|]/g, '_')
@@ -38,7 +36,7 @@ function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview
                     themeCSS: 'margin: 1.5rem auto 0;',
                     theme: resolvedTheme === 'dark' ? 'dark' : 'default',
                 };
-                const { default: mermaid } = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('../../node_modules/.pnpm/mermaid@11.12.1/node_modules/mermaid/dist/mermaid.core.js')); });
+                const { default: mermaid } = yield Promise.resolve().then(function () { return require('../../node_modules/.pnpm/mermaid@11.12.1/node_modules/mermaid/dist/mermaid.core.js'); });
                 try {
                     mermaid.initialize(mermaidConfig);
                     const { svg } = yield mermaid.render(id.replaceAll(':', ''), chart.replaceAll('\\n', '\n'));

package/dist/main/credit/credit-nav-button.js

@@ -106,7 +106,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxRuntime.jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxRuntime.jsxs(ui.DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(ui.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: utils.cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsxRuntime.jsx(server.globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsxs("span", { className: "relative z-10 flex items-center", children: [jsxRuntime.jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsxRuntime.jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsxRuntime.jsx(ui.DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsxRuntime.jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsxRuntime.jsx(ui.AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxRuntime.jsxs(ui.AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsxRuntime.jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsxRuntime.jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsxRuntime.jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsxRuntime.jsx("div", { className: "mx-auto w-full", children: jsxRuntime.jsx(moneyPriceInteractive.MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = React.createContext(null);
 function useCreditNavPopover() {

package/dist/main/credit/credit-nav-button.mjs

@@ -104,7 +104,7 @@ function CreditNavButton({ locale, totalBalance, totalLabel, children, }) {
         closePricingModal,
     }), [closeMenu, isMobile, openPricingModal, closePricingModal]);
     const isOnetimeModal = pricingModal.mode === 'onetime';
-    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group mx-2  sm:mx-1 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:border-transparent hover:bg-linear-to-r hover:from-purple-500/90 hover:to-pink-500/90 hover:text-white hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-purple-500 dark:hover:from-purple-500 dark:hover:to-pink-500'), ref: triggerRef, children: [jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-br from-purple-400/20 to-pink-500/20 text-purple-600 transition-transform group-hover:scale-105 dark:text-purple-200", children: jsx(globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
+    return (jsxs(CreditNavPopoverContext.Provider, { value: contextValue, children: [jsxs(DropdownMenu, { modal: false, open: open, onOpenChange: setOpen, children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs("button", { type: "button", "aria-label": `${formattedBalance} ${totalLabel}`, className: cn('group relative mx-2 sm:mx-1 inline-flex items-center gap-2 overflow-hidden rounded-full border border-slate-200 bg-white pl-2 pr-4 py-1.5 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100', 'hover:-translate-y-0.5 hover:scale-[1.02] hover:border-transparent hover:text-white hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-400 dark:focus-visible:ring-slate-500'), ref: triggerRef, children: [jsx("span", { className: "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 bg-linear-to-bl from-indigo-200/60 via-indigo-400/90 to-purple-200/50 dark:from-indigo-300/20 dark:via-slate-400 dark:to-slate-500/50", "aria-hidden": "true" }), jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-slate-600 transition-transform duration-200 group-hover:scale-110 group-hover:bg-white/20 group-hover:text-white dark:bg-slate-800 dark:text-slate-200 dark:group-hover:bg-white/20 dark:group-hover:text-white", children: jsx(globalLucideIcons.Gem, { className: "h-3.5 w-3.5" }) }), jsxs("span", { className: "relative z-10 flex items-center", children: [jsx("span", { className: "text-base font-semibold leading-none", children: formattedBalance }), jsx("span", { className: "sr-only", children: ` ${totalLabel}` })] })] }) }), jsx(DropdownMenuContent, { forceMount: true, sideOffset: 12, align: "end", className: "z-50 border-0 bg-transparent p-0 shadow-none mx-4 sm:mx-2 md:mx-1", children: jsx("div", { className: "w-[90vw] max-w-[90vw] max-h-[80vh] overflow-y-auto overflow-x-hidden rounded-3xl bg-transparent sm:w-[410px] sm:max-h-[90vh] sm:max-w-[95vw]", ref: contentRef, children: children }) })] }), pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (jsx(AlertDialog, { open: pricingModal.open, onOpenChange: (open) => setPricingModal((prev) => (Object.assign(Object.assign({}, prev), { open }))), children: jsxs(AlertDialogContent, { className: "mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 bg-white p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:bg-[#0f1222] dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10", children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: pricingModal.modalMoneyPriceData.title }), pricingModal.modalMoneyPriceData.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: pricingModal.modalMoneyPriceData.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: closePricingModal, children: jsx(globalLucideIcons.X, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: pricingModal.modalMoneyPriceData, config: pricingModal.pricingContext.moneyPriceConfig, checkoutApiEndpoint: pricingModal.pricingContext.checkoutApiEndpoint, customerPortalApiEndpoint: pricingModal.pricingContext.customerPortalApiEndpoint, enableSubscriptionUpgrade: pricingModal.pricingContext.enableSubscriptionUpgrade, initialBillingType: isOnetimeModal ? 'onetime' : undefined, disableAutoDetectBilling: isOnetimeModal, initUserContext: pricingModal.pricingContext.initUserContext }, pricingModal.mode) }) })] }) })) : null] }));
 }
 const CreditNavPopoverContext = createContext(null);
 function useCreditNavPopover() {

package/dist/main/cta.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var gradientButton = require('../fuma/mdx/gradient-button.js');
 var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
 
@@ -19,7 +20,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsxRuntime.jsx("span", { className: "text-purple-400", children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: "text-purple-400 text-xl sm:text-2xl", children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
+        return (jsxRuntime.jsx("section", { id: "cta", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: jsxRuntime.jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxRuntime.jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsxRuntime.jsx("span", { className: lib.themeIconColor, children: data.eyesOn }), "?"] }), jsxRuntime.jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsxRuntime.jsx("br", {}), jsxRuntime.jsx("span", { className: utils.cn(lib.themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsxRuntime.jsx(gradientButton.GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
     });
 }
 

package/dist/main/cta.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { GradientButton } from '../fuma/mdx/gradient-button.mjs';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert.mjs';
 import { responsiveSection } from './section-layout.mjs';
 
@@ -17,7 +18,7 @@ function CTA(_a) {
             button: t('button'),
             url: t('url')
         };
-        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsx("span", { className: "text-purple-400", children: data.eyesOn }), "?"] }), jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsx("br", {}), jsx("span", { className: "text-purple-400 text-xl sm:text-2xl", children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
+        return (jsx("section", { id: "cta", className: cn(responsiveSection, sectionClassName), children: jsxs("div", { className: "\n        py-3 sm:py-6 md:8\n        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]\n        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]\n        rounded-2xl text-center\n        bg-size[200%_auto] animate-cta-gradient-wave\n        ", children: [jsxs("h2", { className: "text-3xl md:text-4xl font-bold mb-6", children: [data.title, " ", jsx("span", { className: themeIconColor, children: data.eyesOn }), "?"] }), jsxs("p", { className: "text-base sm:text-xl mx-auto mb-8 max-w-3xl", children: [data.description1, jsx("br", {}), jsx("span", { className: cn(themeIconColor, "text-xl sm:text-2xl"), children: data.description2 })] }), jsx(GradientButton, { title: data.button, href: data.url, align: "center" })] }) }));
     });
 }
 

package/dist/main/faq-interactive.js

@@ -4,48 +4,35 @@
 var React = require('react');
 
 function FAQInteractive({ data }) {
-    const [openStates, setOpenStates] = React.useState({});
     React.useEffect(() => {
-        // Progressive enhancement: Add interactivity to existing DOM elements
+        const cleanups = [];
         data.items.forEach((item) => {
             const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
             const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
             const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-            if (toggleButton && contentDiv && iconSvg) {
+            const cardDiv = document.querySelector(`[data-faq-id="${item.id}"]`);
+            if (toggleButton && contentDiv && iconSvg && cardDiv) {
+                const syncOpenState = (isOpen) => {
+                    contentDiv.classList.toggle('hidden', !isOpen);
+                    toggleButton.setAttribute('aria-expanded', String(isOpen));
+                    iconSvg.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+                    cardDiv.setAttribute('data-faq-open', String(isOpen));
+                };
                 const handleClick = () => {
-                    const isOpen = openStates[item.id] || false;
-                    const newOpenState = !isOpen;
-                    // Update state
-                    setOpenStates(prev => (Object.assign(Object.assign({}, prev), { [item.id]: newOpenState })));
-                    // Update DOM
-                    if (newOpenState) {
-                        contentDiv.classList.remove('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'true');
-                        iconSvg.style.transform = 'rotate(90deg)';
-                    }
-                    else {
-                        contentDiv.classList.add('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'false');
-                        iconSvg.style.transform = 'rotate(0deg)';
-                    }
+                    const isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
+                    syncOpenState(!isOpen);
                 };
+                syncOpenState(toggleButton.getAttribute('aria-expanded') === 'true');
                 toggleButton.addEventListener('click', handleClick);
-                // Cleanup function will be handled by the effect cleanup
+                cleanups.push(() => {
+                    toggleButton.removeEventListener('click', handleClick);
+                });
             }
         });
-        // Cleanup event listeners
         return () => {
-            data.items.forEach((item) => {
-                var _a;
-                const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-                if (toggleButton) {
-                    // Remove all event listeners by cloning the element
-                    const newButton = toggleButton.cloneNode(true);
-                    (_a = toggleButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newButton, toggleButton);
-                }
-            });
+            cleanups.forEach((cleanup) => cleanup());
         };
-    }, [data, openStates]);
+    }, [data.items]);
     return null; // Progressive enhancement - no additional DOM rendering
 }
 

package/dist/main/faq-interactive.mjs

@@ -1,49 +1,36 @@
 "use client";
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 function FAQInteractive({ data }) {
-    const [openStates, setOpenStates] = useState({});
     useEffect(() => {
-        // Progressive enhancement: Add interactivity to existing DOM elements
+        const cleanups = [];
         data.items.forEach((item) => {
             const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
             const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
             const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
-            if (toggleButton && contentDiv && iconSvg) {
+            const cardDiv = document.querySelector(`[data-faq-id="${item.id}"]`);
+            if (toggleButton && contentDiv && iconSvg && cardDiv) {
+                const syncOpenState = (isOpen) => {
+                    contentDiv.classList.toggle('hidden', !isOpen);
+                    toggleButton.setAttribute('aria-expanded', String(isOpen));
+                    iconSvg.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+                    cardDiv.setAttribute('data-faq-open', String(isOpen));
+                };
                 const handleClick = () => {
-                    const isOpen = openStates[item.id] || false;
-                    const newOpenState = !isOpen;
-                    // Update state
-                    setOpenStates(prev => (Object.assign(Object.assign({}, prev), { [item.id]: newOpenState })));
-                    // Update DOM
-                    if (newOpenState) {
-                        contentDiv.classList.remove('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'true');
-                        iconSvg.style.transform = 'rotate(90deg)';
-                    }
-                    else {
-                        contentDiv.classList.add('hidden');
-                        toggleButton.setAttribute('aria-expanded', 'false');
-                        iconSvg.style.transform = 'rotate(0deg)';
-                    }
+                    const isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
+                    syncOpenState(!isOpen);
                 };
+                syncOpenState(toggleButton.getAttribute('aria-expanded') === 'true');
                 toggleButton.addEventListener('click', handleClick);
-                // Cleanup function will be handled by the effect cleanup
+                cleanups.push(() => {
+                    toggleButton.removeEventListener('click', handleClick);
+                });
             }
         });
-        // Cleanup event listeners
         return () => {
-            data.items.forEach((item) => {
-                var _a;
-                const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
-                if (toggleButton) {
-                    // Remove all event listeners by cloning the element
-                    const newButton = toggleButton.cloneNode(true);
-                    (_a = toggleButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newButton, toggleButton);
-                }
-            });
+            cleanups.forEach((cleanup) => cleanup());
         };
-    }, [data, openStates]);
+    }, [data.items]);
     return null; // Progressive enhancement - no additional DOM rendering
 }
 

package/dist/main/faq.js

@@ -4,6 +4,7 @@ var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
 var richTextExpert = require('./rich-text-expert.js');
 var faqInteractive = require('./faq-interactive.js');
 var sectionLayout = require('./section-layout.js');
@@ -22,7 +23,7 @@ function FAQ(_a) {
                 answer: richTextExpert.richText(t, `items.${index}.answer`)
             }))
         };
-        return (jsxRuntime.jsxs("section", { id: "faq", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsxRuntime.jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxRuntime.jsxs("div", { "data-faq-id": item.id, className: "bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none", children: [jsxRuntime.jsxs("button", { className: "w-full flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, "aria-expanded": "false", children: [jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsxRuntime.jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsxRuntime.jsx("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: item.answer })] }, item.id))) }), jsxRuntime.jsx(faqInteractive.FAQInteractive, { data: data })] }));
+        return (jsxRuntime.jsxs("section", { id: "faq", className: utils.cn(sectionLayout.responsiveSection, sectionClassName), children: [jsxRuntime.jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsxRuntime.jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsxRuntime.jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxRuntime.jsxs("div", { "data-faq-id": item.id, "data-faq-open": "false", className: utils.cn("bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 transition shadow-sm dark:shadow-none hover:border-current focus-within:border-current", lib.themeIconColor), children: [jsxRuntime.jsxs("button", { className: "w-full p-6 flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, type: "button", "aria-expanded": "false", "aria-controls": `${item.id}-content`, children: [jsxRuntime.jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsxRuntime.jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsxRuntime.jsx("div", { id: `${item.id}-content`, className: "px-6 pb-6 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: jsxRuntime.jsx("div", { className: "pt-1", children: item.answer }) })] }, item.id))) }), jsxRuntime.jsx(faqInteractive.FAQInteractive, { data: data })] }));
     });
 }
 

package/dist/main/faq.mjs

@@ -2,6 +2,7 @@ import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { richText } from './rich-text-expert.mjs';
 import { FAQInteractive } from './faq-interactive.mjs';
 import { responsiveSection } from './section-layout.mjs';
@@ -20,7 +21,7 @@ function FAQ(_a) {
                 answer: richText(t, `items.${index}.answer`)
             }))
         };
-        return (jsxs("section", { id: "faq", className: cn(responsiveSection, sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxs("div", { "data-faq-id": item.id, className: "bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none", children: [jsxs("button", { className: "w-full flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, "aria-expanded": "false", children: [jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsx("div", { className: "mt-4 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: item.answer })] }, item.id))) }), jsx(FAQInteractive, { data: data })] }));
+        return (jsxs("section", { id: "faq", className: cn(responsiveSection, sectionClassName), children: [jsx("h2", { className: "text-3xl md:text-4xl font-bold text-center mb-4", children: data.title }), jsx("p", { className: "text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl", children: data.description }), jsx("div", { className: "space-y-6", children: data.items.map((item) => (jsxs("div", { "data-faq-id": item.id, "data-faq-open": "false", className: cn("bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 transition shadow-sm dark:shadow-none hover:border-current focus-within:border-current", themeIconColor), children: [jsxs("button", { className: "w-full p-6 flex items-center justify-between text-left focus:outline-none", "data-faq-toggle": item.id, type: "button", "aria-expanded": "false", "aria-controls": `${item.id}-content`, children: [jsx("span", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: item.question }), jsx("svg", { className: "w-6 h-6 text-gray-400 ml-2 transition-transform duration-200", "data-faq-icon": item.id, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), jsx("div", { id: `${item.id}-content`, className: "px-6 pb-6 text-gray-700 dark:text-gray-300 text-base hidden", "data-faq-content": item.id, children: jsx("div", { className: "pt-1", children: item.answer }) })] }, item.id))) }), jsx(FAQInteractive, { data: data })] }));
     });
 }