@windrun-huaiin/third-ui 7.2.1 → 7.3.0

package/README.md

@@ -208,3 +208,15 @@ In MDX file:
 ```
 
 All configuration parameters will be automatically obtained from the global configuration, and no need to specify them in each use.
+
+
+## Showcase
+
+- [Free Trivia Game](https://freetrivia.info/)
+- [Music Poster](https://musicposter.org/en)
+- [Image Narration](https://imagenarration.com/en)
+- [Describe Yourself](https://describeyourself.org/en)
+- [Newspaper Template](https://newspaper-template.org/en)
+- [breathing exercise](https://breathingexercise.net/en)
+- [ai directory list](https://aidirectorylist.com/en)
+- [reve image directory](https://reveimage.directory/en)

package/dist/clerk/fingerprint/fingerprint-provider.d.ts

@@ -22,4 +22,4 @@ export declare function withFingerprint<P extends object>(Component: React.Compo
 /**
  * 组件：显示用户状态和积分信息（用于调试）
  */
-export declare function FingerprintDebugInfo(): import("react/jsx-runtime").JSX.Element | null;
+export declare function FingerprintStatus(): import("react/jsx-runtime").JSX.Element;

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

@@ -44,28 +44,58 @@ function withFingerprint(Component, config) {
 /**
  * 组件：显示用户状态和积分信息（用于调试）
  */
-function FingerprintDebugInfo() {
+function FingerprintStatus() {
     const { fingerprintId, anonymousUser, credits, isLoading, isInitialized, error } = useFingerprintContext();
-    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'production') {
-        return null;
-    }
-    return (jsxRuntime.jsxs("div", { style: {
-            position: 'fixed',
-            bottom: '10px',
-            right: '10px',
-            background: '#f0f0f0',
-            padding: '10px',
-            borderRadius: '5px',
-            fontSize: '12px',
-            fontFamily: 'monospace',
-            maxWidth: '300px',
-            zIndex: 9999,
-            border: '1px solid #ccc'
-        }, children: [jsxRuntime.jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "FP ID:" }), " ", fingerprintId || 'None'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxRuntime.jsxs("div", { style: { color: 'red' }, children: [jsxRuntime.jsx("strong", { children: "Error:" }), " ", error] }), anonymousUser && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "User ID:" }), " ", anonymousUser.userId.slice(0, 8), "..."] })), credits && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Credits:" }), " ", credits.balanceFree, "F + ", credits.balancePaid, "P = ", credits.totalBalance] }))] }));
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { onClick: handleToggle, style: {
+                    position: 'fixed',
+                    top: '10px',
+                    left: '10px',
+                    width: '50px',
+                    height: '50px',
+                    background: 'linear-gradient(135deg, #9b59b6, #e74c3c)',
+                    borderRadius: '50%',
+                    border: 'none',
+                    cursor: 'pointer',
+                    zIndex: 10000,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+                }, children: jsxRuntime.jsx("span", { style: {
+                        fontSize: '24px',
+                        color: 'white',
+                        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.3s ease',
+                    }, children: "\u25BC" }) }), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { style: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            background: 'rgba(0, 0, 0, 0.5)',
+                            zIndex: 9998,
+                        } }), jsxRuntime.jsxs("div", { style: {
+                            position: 'fixed',
+                            top: '70px',
+                            left: '10px',
+                            background: '#f0f0f0',
+                            padding: '15px',
+                            borderRadius: '5px',
+                            fontSize: '12px',
+                            fontFamily: 'monospace',
+                            maxWidth: '300px',
+                            zIndex: 9999,
+                            border: '1px solid #ccc',
+                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+                        }, children: [jsxRuntime.jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxRuntime.jsxs("div", { style: { color: 'red' }, children: [jsxRuntime.jsx("strong", { children: "Error:" }), " ", error] }), anonymousUser && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "user_id:" }), " ", anonymousUser.userId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "clerk_user_id:" }), " ", anonymousUser.clerkUserId, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "email:" }), " ", anonymousUser.email || 'None', " ", jsxRuntime.jsx("br", {}), " "] })), credits && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Credits:" }), " ", credits.balanceFree, " Free + ", credits.balancePaid, " Paid = ", credits.totalBalance, " Total"] }))] })] }))] }));
 }
 
-exports.FingerprintDebugInfo = FingerprintDebugInfo;
 exports.FingerprintProvider = FingerprintProvider;
+exports.FingerprintStatus = FingerprintStatus;
 exports.useFingerprintContext = useFingerprintContext;
 exports.useFingerprintContextSafe = useFingerprintContextSafe;
 exports.withFingerprint = withFingerprint;

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

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useState } from 'react';
 import { useFingerprint } from './use-fingerprint.mjs';
 
 const FingerprintContext = createContext(undefined);
@@ -42,24 +42,54 @@ function withFingerprint(Component, config) {
 /**
  * 组件：显示用户状态和积分信息（用于调试）
  */
-function FingerprintDebugInfo() {
+function FingerprintStatus() {
     const { fingerprintId, anonymousUser, credits, isLoading, isInitialized, error } = useFingerprintContext();
-    if (!process.env.NODE_ENV || process.env.NODE_ENV === 'production') {
-        return null;
-    }
-    return (jsxs("div", { style: {
-            position: 'fixed',
-            bottom: '10px',
-            right: '10px',
-            background: '#f0f0f0',
-            padding: '10px',
-            borderRadius: '5px',
-            fontSize: '12px',
-            fontFamily: 'monospace',
-            maxWidth: '300px',
-            zIndex: 9999,
-            border: '1px solid #ccc'
-        }, children: [jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxs("div", { children: [jsx("strong", { children: "FP ID:" }), " ", fingerprintId || 'None'] }), jsxs("div", { children: [jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxs("div", { children: [jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxs("div", { style: { color: 'red' }, children: [jsx("strong", { children: "Error:" }), " ", error] }), anonymousUser && (jsxs("div", { children: [jsx("strong", { children: "User ID:" }), " ", anonymousUser.userId.slice(0, 8), "..."] })), credits && (jsxs("div", { children: [jsx("strong", { children: "Credits:" }), " ", credits.balanceFree, "F + ", credits.balancePaid, "P = ", credits.totalBalance] }))] }));
+    const [isOpen, setIsOpen] = useState(false);
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    return (jsxs(Fragment, { children: [jsx("button", { onClick: handleToggle, style: {
+                    position: 'fixed',
+                    top: '10px',
+                    left: '10px',
+                    width: '50px',
+                    height: '50px',
+                    background: 'linear-gradient(135deg, #9b59b6, #e74c3c)',
+                    borderRadius: '50%',
+                    border: 'none',
+                    cursor: 'pointer',
+                    zIndex: 10000,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+                }, children: jsx("span", { style: {
+                        fontSize: '24px',
+                        color: 'white',
+                        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                        transition: 'transform 0.3s ease',
+                    }, children: "\u25BC" }) }), isOpen && (jsxs(Fragment, { children: [jsx("div", { style: {
+                            position: 'fixed',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            background: 'rgba(0, 0, 0, 0.5)',
+                            zIndex: 9998,
+                        } }), jsxs("div", { style: {
+                            position: 'fixed',
+                            top: '70px',
+                            left: '10px',
+                            background: '#f0f0f0',
+                            padding: '15px',
+                            borderRadius: '5px',
+                            fontSize: '12px',
+                            fontFamily: 'monospace',
+                            maxWidth: '300px',
+                            zIndex: 9999,
+                            border: '1px solid #ccc',
+                            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+                        }, children: [jsx("h4", { style: { margin: '0 0 5px 0' }, children: "Fingerprint Debug" }), jsxs("div", { children: [jsx("strong", { children: "FP_ID:" }), " ", fingerprintId || 'None'] }), jsxs("div", { children: [jsx("strong", { children: "Loading:" }), " ", isLoading ? 'Yes' : 'No'] }), jsxs("div", { children: [jsx("strong", { children: "Initialized:" }), " ", isInitialized ? 'Yes' : 'No'] }), error && jsxs("div", { style: { color: 'red' }, children: [jsx("strong", { children: "Error:" }), " ", error] }), anonymousUser && (jsxs("div", { children: [jsx("strong", { children: "user_id:" }), " ", anonymousUser.userId, " ", jsx("br", {}), jsx("strong", { children: "clerk_user_id:" }), " ", anonymousUser.clerkUserId, " ", jsx("br", {}), jsx("strong", { children: "email:" }), " ", anonymousUser.email || 'None', " ", jsx("br", {}), " "] })), credits && (jsxs("div", { children: [jsx("strong", { children: "Credits:" }), " ", credits.balanceFree, " Free + ", credits.balancePaid, " Paid = ", credits.totalBalance, " Total"] }))] })] }))] }));
 }
 
-export { FingerprintDebugInfo, FingerprintProvider, useFingerprintContext, useFingerprintContextSafe, withFingerprint };
+export { FingerprintProvider, FingerprintStatus, useFingerprintContext, useFingerprintContextSafe, withFingerprint };

package/dist/clerk/fingerprint/fingerprint-shared.d.ts

@@ -2,16 +2,16 @@
  * Fingerprint Shared Utilities
  * 客户端和服务端共享的常量、类型和验证逻辑
  */
-export declare const FINGERPRINT_STORAGE_KEY = "x_fingerprint_id";
-export declare const FINGERPRINT_HEADER_NAME = "x-fingerprint-id";
-export declare const FINGERPRINT_COOKIE_NAME = "fingerprint_id";
+export declare const FINGERPRINT_STORAGE_KEY = "__x_fingerprint_id";
+export declare const FINGERPRINT_HEADER_NAME = "x-fingerprint-id-v8";
+export declare const FINGERPRINT_COOKIE_NAME = "__x_fingerprint_id";
 /**
  * 验证fingerprint ID格式
  * 可以在客户端和服务端使用
  */
 export declare function isValidFingerprintId(fingerprintId: string): boolean;
 export declare const FINGERPRINT_CONSTANTS: {
-    readonly STORAGE_KEY: "x_fingerprint_id";
-    readonly HEADER_NAME: "x-fingerprint-id";
-    readonly COOKIE_NAME: "fingerprint_id";
+    readonly STORAGE_KEY: "__x_fingerprint_id";
+    readonly HEADER_NAME: "x-fingerprint-id-v8";
+    readonly COOKIE_NAME: "__x_fingerprint_id";
 };

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

@@ -5,9 +5,9 @@
  * 客户端和服务端共享的常量、类型和验证逻辑
  */
 // Fingerprint ID的存储键和header名
-const FINGERPRINT_STORAGE_KEY = 'x_fingerprint_id';
-const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id';
-const FINGERPRINT_COOKIE_NAME = 'fingerprint_id';
+const FINGERPRINT_STORAGE_KEY = '__x_fingerprint_id';
+const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id-v8';
+const FINGERPRINT_COOKIE_NAME = '__x_fingerprint_id';
 /**
  * 验证fingerprint ID格式
  * 可以在客户端和服务端使用

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

@@ -3,9 +3,9 @@
  * 客户端和服务端共享的常量、类型和验证逻辑
  */
 // Fingerprint ID的存储键和header名
-const FINGERPRINT_STORAGE_KEY = 'x_fingerprint_id';
-const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id';
-const FINGERPRINT_COOKIE_NAME = 'fingerprint_id';
+const FINGERPRINT_STORAGE_KEY = '__x_fingerprint_id';
+const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id-v8';
+const FINGERPRINT_COOKIE_NAME = '__x_fingerprint_id';
 /**
  * 验证fingerprint ID格式
  * 可以在客户端和服务端使用

package/dist/clerk/fingerprint/index.js

@@ -22,8 +22,8 @@ exports.getOrGenerateFingerprintId = fingerprintClient.getOrGenerateFingerprintI
 exports.setFingerprintId = fingerprintClient.setFingerprintId;
 exports.useFingerprintHeaders = fingerprintClient.useFingerprintHeaders;
 exports.useFingerprint = useFingerprint.useFingerprint;
-exports.FingerprintDebugInfo = fingerprintProvider.FingerprintDebugInfo;
 exports.FingerprintProvider = fingerprintProvider.FingerprintProvider;
+exports.FingerprintStatus = fingerprintProvider.FingerprintStatus;
 exports.useFingerprintContext = fingerprintProvider.useFingerprintContext;
 exports.useFingerprintContextSafe = fingerprintProvider.useFingerprintContextSafe;
 exports.withFingerprint = fingerprintProvider.withFingerprint;

package/dist/clerk/fingerprint/index.mjs

@@ -2,4 +2,4 @@
 export { FINGERPRINT_CONSTANTS, FINGERPRINT_COOKIE_NAME, FINGERPRINT_HEADER_NAME, FINGERPRINT_STORAGE_KEY, isValidFingerprintId } from './fingerprint-shared.mjs';
 export { clearFingerprintId, createFingerprintFetch, createFingerprintHeaders, generateFingerprintId, getFingerprintId, getOrGenerateFingerprintId, setFingerprintId, useFingerprintHeaders } from './fingerprint-client.mjs';
 export { useFingerprint } from './use-fingerprint.mjs';
-export { FingerprintDebugInfo, FingerprintProvider, useFingerprintContext, useFingerprintContextSafe, withFingerprint } from './fingerprint-provider.mjs';
+export { FingerprintProvider, FingerprintStatus, useFingerprintContext, useFingerprintContextSafe, withFingerprint } from './fingerprint-provider.mjs';

package/dist/clerk/signin-with-fingerprint-client.d.ts

@@ -4,4 +4,3 @@
  * 如果有FingerprintProvider，会处理fingerprint相关逻辑
  */
 export declare function SignInWithFingerprint(): import("react/jsx-runtime").JSX.Element;
-export default SignInWithFingerprint;

package/dist/clerk/signin-with-fingerprint-client.js

@@ -1,8 +1,6 @@
 "use client";
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var nextjs = require('@clerk/nextjs');
@@ -49,4 +47,3 @@ function SignInWithFingerprint() {
 }
 
 exports.SignInWithFingerprint = SignInWithFingerprint;
-exports.default = SignInWithFingerprint;

package/dist/clerk/signin-with-fingerprint-client.mjs

@@ -44,4 +44,4 @@ function SignInWithFingerprint() {
     return jsx(SignIn, { unsafeMetadata: unsafeMetadata });
 }
 
-export { SignInWithFingerprint, SignInWithFingerprint as default };
+export { SignInWithFingerprint };

package/dist/clerk/signup-with-fingerprint-client.d.ts

@@ -4,4 +4,3 @@
  * 如果有FingerprintProvider，会处理fingerprint相关逻辑
  */
 export declare function SignUpWithFingerprint(): import("react/jsx-runtime").JSX.Element;
-export default SignUpWithFingerprint;

package/dist/clerk/signup-with-fingerprint-client.js

@@ -1,8 +1,6 @@
 "use client";
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var nextjs = require('@clerk/nextjs');
@@ -49,4 +47,3 @@ function SignUpWithFingerprint() {
 }
 
 exports.SignUpWithFingerprint = SignUpWithFingerprint;
-exports.default = SignUpWithFingerprint;

package/dist/clerk/signup-with-fingerprint-client.mjs

@@ -44,4 +44,4 @@ function SignUpWithFingerprint() {
     return jsx(SignUp, { unsafeMetadata: unsafeMetadata });
 }
 
-export { SignUpWithFingerprint, SignUpWithFingerprint as default };
+export { SignUpWithFingerprint };

package/dist/node_modules/.pnpm/layout-base@1.0.2/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/dist/node_modules/.pnpm/layout-base@1.0.2/node_modules/layout-base/layout-base.mjs

@@ -1,4 +1,4 @@
-import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base.mjs';
+import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base2.mjs';
 
 var layoutBase = layoutBase$1.exports;
 

package/dist/node_modules/.pnpm/layout-base@2.0.1/node_modules/layout-base/layout-base.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var layoutBase$1 = require('../../../../../_virtual/layout-base2.js');
+var layoutBase$1 = require('../../../../../_virtual/layout-base.js');
 
 var layoutBase = layoutBase$1.__module.exports;
 

package/dist/node_modules/.pnpm/layout-base@2.0.1/node_modules/layout-base/layout-base.mjs

@@ -1,4 +1,4 @@
-import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base2.mjs';
+import { __module as layoutBase$1 } from '../../../../../_virtual/layout-base.mjs';
 
 var layoutBase = layoutBase$1.exports;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "7.2.1",
+  "version": "7.3.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -75,8 +75,8 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/lib": "^7.1.1",
-    "@windrun-huaiin/base-ui": "^8.1.1"
+    "@windrun-huaiin/lib": "^7.1.2",
+    "@windrun-huaiin/base-ui": "^8.1.2"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/clerk/fingerprint/fingerprint-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { useFingerprint } from './use-fingerprint';
 import type { 
   FingerprintContextType, 
@@ -66,7 +66,7 @@ export function withFingerprint<P extends object>(
 /**
  * 组件：显示用户状态和积分信息（用于调试）
  */
-export function FingerprintDebugInfo() {
+export function FingerprintStatus() {
   const { 
     fingerprintId, 
     anonymousUser, 
@@ -76,39 +76,90 @@ export function FingerprintDebugInfo() {
     error 
   } = useFingerprintContext();
 
-  if (!process.env.NODE_ENV || process.env.NODE_ENV === 'production') {
-    return null;
-  }
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
-    <div style={{
-      position: 'fixed',
-      bottom: '10px',
-      right: '10px',
-      background: '#f0f0f0',
-      padding: '10px',
-      borderRadius: '5px',
-      fontSize: '12px',
-      fontFamily: 'monospace',
-      maxWidth: '300px',
-      zIndex: 9999,
-      border: '1px solid #ccc'
-    }}>
-      <h4 style={{ margin: '0 0 5px 0' }}>Fingerprint Debug</h4>
-      <div><strong>FP ID:</strong> {fingerprintId || 'None'}</div>
-      <div><strong>Loading:</strong> {isLoading ? 'Yes' : 'No'}</div>
-      <div><strong>Initialized:</strong> {isInitialized ? 'Yes' : 'No'}</div>
-      {error && <div style={{ color: 'red' }}><strong>Error:</strong> {error}</div>}
-      {anonymousUser && (
-        <div>
-          <strong>User ID:</strong> {anonymousUser.userId.slice(0, 8)}...
-        </div>
-      )}
-      {credits && (
-        <div>
-          <strong>Credits:</strong> {credits.balanceFree}F + {credits.balancePaid}P = {credits.totalBalance}
-        </div>
+    <>
+      <button
+        onClick={handleToggle}
+        style={{
+          position: 'fixed',
+          top: '10px',
+          left: '10px',
+          width: '50px',
+          height: '50px',
+          background: 'linear-gradient(135deg, #9b59b6, #e74c3c)',
+          borderRadius: '50%',
+          border: 'none',
+          cursor: 'pointer',
+          zIndex: 10000,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+        }}
+      >
+        <span style={{
+          fontSize: '24px',
+          color: 'white',
+          transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+          transition: 'transform 0.3s ease',
+        }}>▼</span>
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              background: 'rgba(0, 0, 0, 0.5)',
+              zIndex: 9998,
+            }}
+          />
+          <div
+            style={{
+              position: 'fixed',
+              top: '70px',
+              left: '10px',
+              background: '#f0f0f0',
+              padding: '15px',
+              borderRadius: '5px',
+              fontSize: '12px',
+              fontFamily: 'monospace',
+              maxWidth: '300px',
+              zIndex: 9999,
+              border: '1px solid #ccc',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+            }}
+          >
+            <h4 style={{ margin: '0 0 5px 0' }}>Fingerprint Debug</h4>
+            <div><strong>FP_ID:</strong> {fingerprintId || 'None'}</div>
+            <div><strong>Loading:</strong> {isLoading ? 'Yes' : 'No'}</div>
+            <div><strong>Initialized:</strong> {isInitialized ? 'Yes' : 'No'}</div>
+            {error && <div style={{ color: 'red' }}><strong>Error:</strong> {error}</div>}
+            {anonymousUser && (
+              <div>
+                <strong>user_id:</strong> {anonymousUser.userId} <br/>
+                <strong>clerk_user_id:</strong> {anonymousUser.clerkUserId} <br/>
+                <strong>email:</strong> {anonymousUser.email || 'None'} <br/> {/* Fixed email field */}
+              </div>
+            )}
+            {credits && (
+              <div>
+                <strong>Credits:</strong> {credits.balanceFree} Free + {credits.balancePaid} Paid = {credits.totalBalance} Total
+              </div>
+            )}
+          </div>
+        </>
       )}
-    </div>
+    </>
   );
 }

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

@@ -4,9 +4,9 @@
  */
 
 // Fingerprint ID的存储键和header名
-export const FINGERPRINT_STORAGE_KEY = 'x_fingerprint_id';
-export const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id';
-export const FINGERPRINT_COOKIE_NAME = 'fingerprint_id';
+export const FINGERPRINT_STORAGE_KEY = '__x_fingerprint_id';
+export const FINGERPRINT_HEADER_NAME = 'x-fingerprint-id-v8';
+export const FINGERPRINT_COOKIE_NAME = '__x_fingerprint_id';
 
 /**
  * 验证fingerprint ID格式

package/src/clerk/signin-with-fingerprint-client.tsx

@@ -54,4 +54,3 @@ export function SignInWithFingerprint() {
   return <SignIn unsafeMetadata={unsafeMetadata} />;
 }
 
-export default SignInWithFingerprint;

package/src/clerk/signup-with-fingerprint-client.tsx

@@ -54,4 +54,3 @@ export function SignUpWithFingerprint() {
   return <SignUp unsafeMetadata={unsafeMetadata} />;
 }
 
-export default SignUpWithFingerprint;