@windrun-huaiin/third-ui 30.1.0 → 31.0.0

package/README.md

@@ -1,185 +1,151 @@
 # @windrun-huaiin/third-ui
 
-This README currently documents only the Fuma/MDX component design in `third-ui`.
+Shared React and Next.js UI integrations for product websites, documentation systems, authentication flows, pricing pages, credit displays, AI interfaces, and Fuma-based MDX rendering.
 
-Other modules in this package, such as Clerk, main application UI, AI UI, fingerprint, SEO helpers, and shared layout utilities, are intentionally not covered here.
+This package is organized around public subpath exports. Use the smallest entry point that matches the feature you need so that application code can keep client, server, and heavy-renderer boundaries explicit.
 
-## MDX Component Layer
+## Feature Areas
 
-The Fuma/MDX part of `third-ui` provides the rendering component map used by application MDX pages.
+### Main Application UI
 
-It is not responsible for reading files or compiling MDX. That belongs to `@windrun-huaiin/fumadocs-local-md`.
+The main UI layer provides reusable building blocks for product-facing pages and application surfaces:
 
-The split is:
+- Hero sections, gallery sections, CTA blocks, feature sections, FAQ sections, footer sections, tips, usage blocks, and SEO-oriented content blocks.
+- Standard application states such as 404 pages, loading indicators, loading frames, and navigation progress feedback.
+- Interaction components such as alert dialogs, buttons, pill selects, calendars, motion helpers, and animation helpers.
+- Home-page and server-side helpers for composing localized, content-driven page sections.
 
-- `local-md`: content source, frontmatter/meta parsing, Markdown/MDX compilation, render execution safety.
-- `third-ui`: React components used when MDX is rendered.
-- application: chooses which compiler features and renderer features are imported.
+Primary entry points:
 
-## Design Goals
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/main` | General application UI components and shared main-page building blocks |
+| `@windrun-huaiin/third-ui/main/server` | Server-side helpers for main UI composition |
+| `@windrun-huaiin/third-ui/main/home/server` | Server-side home-page helpers |
+| `@windrun-huaiin/third-ui/main/hero` | Hero section components |
+| `@windrun-huaiin/third-ui/main/alert-dialog` | Alert dialog components |
+| `@windrun-huaiin/third-ui/main/buttons` | Button components |
+| `@windrun-huaiin/third-ui/main/calendar` | Calendar components |
+| `@windrun-huaiin/third-ui/main/pill-select` | Pill select components |
+| `@windrun-huaiin/third-ui/main/loading` | Loading components |
+| `@windrun-huaiin/third-ui/main/loading-frame` | Loading frame components |
+| `@windrun-huaiin/third-ui/main/motion` | Motion helpers and components |
+| `@windrun-huaiin/third-ui/main/anime` | Animation helpers and components |
+
+### Pricing, Credits, and Commerce UI
+
+The pricing and credit layer covers UI and server utilities for product plans, credit balances, money-price displays, and purchase-oriented controls.
+
+Primary entry points:
+
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/main/money-price` | Money-price UI components, interactive pricing controls, and pricing configuration helpers |
+| `@windrun-huaiin/third-ui/main/money-price/server` | Server-side money-price helpers |
+| `@windrun-huaiin/third-ui/main/credit` | Credit UI components, credit types, and credit display helpers |
+| `@windrun-huaiin/third-ui/main/credit/server` | Server-side credit helpers |
 
-- Keep the base MDX component map useful but small.
-- Make heavyweight rendering features explicit imports.
-- Avoid old aggregate component entries that import every renderer feature at module load time.
-- Let application code be the capability declaration.
-- Preserve a safe fallback path when disabled or unknown MDX components appear in content.
-- Keep renderer-only capabilities separate from compiler-only capabilities.
+### AI UI
 
-## Current Entry Model
+The AI layer provides ready-to-compose interface pieces for chat and prompt-driven product experiences:
 
-New applications should use the base site MDX entry:
+- Prompt textarea and composer components.
+- Message bubbles, message content, message metadata, message actions, and message lists.
+- Markdown rendering support for AI responses.
+- Status indicators and conversation state hooks.
 
-```ts
-@windrun-huaiin/third-ui/fuma/server/site-mdx/base
-```
+Primary entry point:
 
-Optional renderer features live behind physical subpath entries:
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/ai` | AI chat, prompt, message, markdown, status, and conversation UI utilities |
 
-```ts
-@windrun-huaiin/third-ui/fuma/server/site-mdx/features/code
-@windrun-huaiin/third-ui/fuma/server/site-mdx/features/math
-@windrun-huaiin/third-ui/fuma/server/site-mdx/features/mermaid
-@windrun-huaiin/third-ui/fuma/server/site-mdx/features/type-table
-```
+### Clerk and Fingerprint Integration
 
-The old aggregate entries have been removed. There is no supported `site-mdx-components` entry and no `optional-features` aggregate entry.
+The Clerk layer provides authentication UI integration for applications that use Clerk, including appearance configuration, provider components, user and organization components, and sign-in or sign-up flows that can be combined with fingerprint-aware behavior.
 
-## Base Components
+The fingerprint layer is split into client and server entry points so applications can keep browser collection, provider state, hooks, and server-side fingerprint handling separated.
 
-The base entry is the minimum component set for normal documentation content.
+Primary entry points:
 
-It includes:
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/clerk` | Clerk UI integration, auth components, providers, page helpers, and fingerprint-aware auth components |
+| `@windrun-huaiin/third-ui/clerk/server` | Server-side Clerk helpers |
+| `@windrun-huaiin/third-ui/fingerprint` | Client-side fingerprint components, provider, hooks, shared types, and debug utilities |
+| `@windrun-huaiin/third-ui/fingerprint/server` | Server-side fingerprint helpers |
 
-- Fuma UI basics: `Card`, `Cards`, `Callout`, `File`, `Folder`, `Files`, `Accordion`, `Accordions`, `Tab`, `Tabs`.
-- Markdown element renderers: headings, links, blockquote, lists, table, inline code, pre, image, and related primitive tags.
-- Site-level lightweight components: `SiteX`, `TrophyCard`, `ZiaCard`, `GradientButton`, `ZiaFile`, `ZiaFolder`, `SunoEmbed`.
-- Image rendering integration with image fallback and CDN-related options.
-- Feature-specific fallback components for disabled math, Mermaid, type table, and code-tab style components.
+### Fuma Layouts, Docs, and MDX
 
-It intentionally does not include heavyweight renderer implementations such as Mermaid, KaTeX rendering, Fuma codeblock rendering, or type-table rendering.
+The Fuma layer provides site layouts, documentation layouts, navigation configuration, docs root providers, MDX component maps, shared markdown components, and optional heavy renderer boundaries.
 
-## Renderer Feature Matrix
+It is designed for applications that want to compose documentation pages without mixing content compilation, layout composition, and renderer feature selection into one entry.
 
-| Capability | Renderer Entry | Compiler Entry Required | Notes |
-| --- | --- | --- | --- |
-| `base` | `site-mdx/base` | `local-md/presets/fuma-docs/base` | Required for normal MDX rendering |
-| `code` | `site-mdx/features/code` | `local-md/presets/fuma-docs/features/code` | Enables Fuma codeblock UI and built-in language icon mapping |
-| `math` | `site-mdx/features/math` | `local-md/presets/fuma-docs/features/math` | Enables `MathBlock` and `InlineMath` rendering |
-| `mermaid` | `site-mdx/features/mermaid` | Not required | Renderer-only component capability |
-| `type-table` | `site-mdx/features/type-table` | Not required | Renderer-only component capability |
-| `npm` | Not required | `local-md/presets/fuma-docs/features/npm` | Compiler-only content transform |
+Primary layout and docs entry points:
 
-This table is the main rule for application integration.
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/fuma/base` | Base Fuma layout and navigation exports |
+| `@windrun-huaiin/third-ui/fuma/base/docs-root-provider` | Docs root provider |
+| `@windrun-huaiin/third-ui/fuma/base/nav-config` | Navigation configuration helpers |
+| `@windrun-huaiin/third-ui/fuma/base/site-docs-layout` | Documentation layout components |
+| `@windrun-huaiin/third-ui/fuma/base/site-home-layout` | Home layout components |
+| `@windrun-huaiin/third-ui/fuma/base/site-layout-shared` | Shared site layout utilities |
+| `@windrun-huaiin/third-ui/fuma/server` | Server-side Fuma helpers |
+| `@windrun-huaiin/third-ui/fuma/server/page-generator` | Documentation page generation helpers |
+| `@windrun-huaiin/third-ui/fuma/server/llm-copy-handler` | LLM copy handler helpers |
+| `@windrun-huaiin/third-ui/fuma/fuma-translate-util` | Fuma translation utilities |
 
-`code` and `math` need both compiler and renderer support. `npm` is compiler-only. `mermaid` and `type-table` are renderer-only.
+### MDX Renderer Boundaries
 
-## Bundle Cropping Rule
+The MDX renderer layer is intentionally split into a base entry and optional feature entries.
 
-Renderer pruning is based on import boundaries.
+Use the base entry for ordinary documentation content. Add feature entries only when an application needs the corresponding renderer capability.
 
-If an application does not import `site-mdx/features/mermaid`, Mermaid renderer code should not be pulled into the base renderer entry. The same rule applies to code, math, and type-table renderer features.
+| Capability | Renderer Entry | Typical Purpose |
+| --- | --- | --- |
+| Base MDX | `@windrun-huaiin/third-ui/fuma/server/site-mdx/base` | Standard MDX component map for documentation pages |
+| Code | `@windrun-huaiin/third-ui/fuma/server/site-mdx/features/code` | Code block rendering components |
+| Math | `@windrun-huaiin/third-ui/fuma/server/site-mdx/features/math` | Math block and inline math rendering components |
+| Mermaid | `@windrun-huaiin/third-ui/fuma/server/site-mdx/features/mermaid` | Mermaid diagram rendering components |
+| Type Table | `@windrun-huaiin/third-ui/fuma/server/site-mdx/features/type-table` | Type table rendering components |
+| Shared MDX | `@windrun-huaiin/third-ui/fuma/mdx` | Shared MDX building blocks |
+| Shared Markdown | `@windrun-huaiin/third-ui/fuma/share` | Shared markdown component utilities |
+| Heavy Renderers | `@windrun-huaiin/third-ui/fuma/heavy` | Heavy renderer exports for intentional, explicit imports |
 
-Do not reintroduce a file that imports all renderer features and then chooses one at runtime. That pattern defeats bundle cropping because static imports run before configuration checks.
+The base MDX entry should stay lightweight. Heavy capabilities such as code, math, Mermaid, and type-table rendering should be imported through their dedicated entries only when the application enables them.
 
-Correct model:
+### Server and SEO Utilities
 
-- base entry imports only base renderers and lightweight fallback components.
-- each optional feature entry imports only its own renderer implementation.
-- application code imports the feature entries it wants.
+Shared server and SEO helpers are exposed separately from UI component entries.
 
-## Fallback Design
+Primary entry points:
 
-There are two fallback layers.
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/lib/server` | Shared server utilities |
+| `@windrun-huaiin/third-ui/lib/seo-metadata` | SEO metadata helpers |
 
-The first layer lives in `third-ui`.
+### Styles
 
-It provides feature-aware fallbacks for known but disabled MDX capabilities:
+The package exposes a shared stylesheet for components that depend on the package-level visual system.
 
-- `MathBlock`
-- `InlineMath`
-- `Mermaid`
-- `TypeTable`
-- `CodeBlockTab`
-- `CodeBlockTabs`
-- `CodeBlockTabsList`
-- `CodeBlockTabsTrigger`
+| Entry | Purpose |
+| --- | --- |
+| `@windrun-huaiin/third-ui/styles/third-ui.css` | Shared third-ui styles |
 
-These fallbacks render visible warning blocks instead of silently dropping content.
+## Usage Notes
 
-The second layer lives in `local-md`.
+- Prefer specific subpath imports over broad imports when the feature area is known.
+- Use server entries only from server-side application code.
+- Keep optional Fuma MDX renderer features explicit in the application integration layer.
+- Import heavy renderer entries only when the page or feature intentionally needs them.
+- Include the shared stylesheet in the application when using components that rely on package styles.
 
-It is the final safety net for arbitrary unknown PascalCase components, such as:
+## Installation
 
-```mdx
-<CalloutXXX />
+```bash
+pnpm add @windrun-huaiin/third-ui
 ```
 
-`local-md` detects missing component references from the compiled MDX output and injects generic fallback components before rendering. This prevents unknown MDX components from crashing the page.
-
-The priority order is:
-
-- application-provided MDX components
-- enabled `third-ui` renderer feature components
-- `third-ui` known disabled-feature fallbacks
-- `local-md` generic unknown-component fallback
-
-## Heavy Renderer Boundary
-
-Heavy renderers are isolated under dedicated feature paths or heavy modules.
-
-Examples:
-
-- Mermaid rendering is behind the Mermaid feature entry.
-- Math rendering uses the math feature entry and lazy heavy math renderer.
-- Type table rendering is behind the type-table feature entry.
-- Fuma codeblock rendering is behind the code feature entry.
-
-The code renderer owns its programming-language icon map internally. Applications should not pass a global icon map into `createCodeMdxComponents()`.
-
-This keeps `site-mdx/base` from becoming a hidden dependency sink.
-
-## Application Rules
-
-Applications should treat their MDX integration files as the capability declaration.
-
-For `apps/ddaas`, the important files are:
-
-- `src/lib/content-source.ts`: compiler/source capabilities.
-- `src/components/mdx-components.tsx`: renderer/component capabilities.
-
-When enabling a capability:
-
-- import the compiler feature only if the capability needs compiler support.
-- import the renderer feature only if the capability needs renderer support.
-- add the imported feature to the matching `features` list.
-- do not import unused feature entries “just in case”.
-
-If an application creates its own MDX component and that component imports a heavy package directly, the package can still enter the bundle. That is expected and belongs to the application layer.
-
-## Styling
-
-MDX components assume the application includes the package styles and Tailwind source scanning for `third-ui`.
-
-The exact global CSS setup is application-specific, but MDX pages need the same base styles used by the rest of the Fuma UI integration.
-
-## Export Map
-
-MDX-related exports currently relevant to this design:
-
-| Export | Purpose |
-| --- | --- |
-| `./fuma/server/site-mdx/base` | Recommended base MDX component factory |
-| `./fuma/server/site-mdx/features/code` | Optional code renderer components |
-| `./fuma/server/site-mdx/features/math` | Optional math renderer components |
-| `./fuma/server/site-mdx/features/mermaid` | Optional Mermaid renderer components |
-| `./fuma/server/site-mdx/features/type-table` | Optional type-table renderer components |
-| `./fuma/mdx` | Shared MDX building blocks used by pages and widgets |
-| `./fuma/heavy` | Heavy renderer exports; avoid importing from app base paths unless intentionally needed |
-| `./fuma/share` | Shared markdown component utilities |
-
-## Non-Goals
-
-- This README does not document Clerk, main UI, AI UI, fingerprint, or SEO helpers.
-- The base MDX entry should not become an all-features preset.
-- Runtime feature flags should not be used as the primary pruning mechanism.
-- Unknown MDX components should not crash the page.
+This package is intended for React and Next.js applications. Peer framework setup, styling setup, localization setup, and authentication setup are provided by the consuming application.

package/dist/ai/ai-prompt-textarea.js

@@ -87,27 +87,27 @@ function AIPromptTextarea({ value, onChange, placeholder = "Enter your prompt...
             onWordLimitChange(true);
         }
     };
-    // 渲染标题组件
+    // Render the title component.
     const renderTitle = () => {
         if (!(title === null || title === void 0 ? void 0 : title.trim()))
             return null;
         return (jsxRuntime.jsxs("div", { className: "space-y-1", children: [title && jsxRuntime.jsx("span", { className: "text-xl font-semibold text-foreground", children: title }), (description === null || description === void 0 ? void 0 : description.trim()) && jsxRuntime.jsx("span", { className: "text-sm text-gray-400 ml-2", children: description })] }));
     };
-    // 渲染textarea组件
+    // Render the textarea component.
     const renderTextarea = (isEmbedded = false) => (jsxRuntime.jsx("textarea", { ref: textareaRef, value: value, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, className: utils.cn('w-full p-4 bg-transparent transition-colors text-foreground placeholder-muted-foreground placeholder:text-base disabled:bg-muted disabled:cursor-not-allowed resize-none', isEmbedded
             ? 'border-0 hover:border-2 hover:border-purple-500 focus:outline-none focus:border-2 focus:border-purple-500'
             : 'border-2 border-border rounded-lg hover:border-purple-500 focus:outline-none focus:border-purple-500', className), style: { minHeight: `${minHeight}px` } }));
-    // 渲染单词计数
+    // Render the word count.
     const renderWordCount = () => {
         if (!showWordCount)
             return null;
         return (jsxRuntime.jsx("div", { className: "flex justify-end", children: jsxRuntime.jsxs("span", { className: `text-sm ${wordCount >= maxWords ? 'text-red-500' : wordCount > maxWords * 0.75 ? 'text-orange-500' : 'text-muted-foreground'} ${isWordLimit ? 'animate-bounce' : ''}`, onAnimationEnd: () => onWordLimitChange(false), children: [wordCount, "/", maxWords, " ", wordUnitTitle] }) }));
     };
-    // 如果有标题且需要嵌入，则渲染内部标题布局
+    // Render the embedded title layout when a title is present and embedded mode is enabled.
     if (embed && (title)) {
         return (jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsxs("div", { className: "border-2 border-border rounded-lg bg-transparent", children: [jsxRuntime.jsx("div", { className: "p-4 pb-2", children: renderTitle() }), jsxRuntime.jsx("hr", { className: "border-t border-border" }), jsxRuntime.jsx("div", { className: "p-1", children: renderTextarea(true) })] }), renderWordCount()] }));
     }
-    // 默认布局：外部标题或无标题
+    // Default layout: external title or no title.
     return (jsxRuntime.jsxs("div", { className: "space-y-2", children: [renderTitle(), renderTextarea(), renderWordCount()] }));
 }
 

package/dist/ai/ai-prompt-textarea.mjs

@@ -85,27 +85,27 @@ function AIPromptTextarea({ value, onChange, placeholder = "Enter your prompt...
             onWordLimitChange(true);
         }
     };
-    // 渲染标题组件
+    // Render the title component.
     const renderTitle = () => {
         if (!(title === null || title === void 0 ? void 0 : title.trim()))
             return null;
         return (jsxs("div", { className: "space-y-1", children: [title && jsx("span", { className: "text-xl font-semibold text-foreground", children: title }), (description === null || description === void 0 ? void 0 : description.trim()) && jsx("span", { className: "text-sm text-gray-400 ml-2", children: description })] }));
     };
-    // 渲染textarea组件
+    // Render the textarea component.
     const renderTextarea = (isEmbedded = false) => (jsx("textarea", { ref: textareaRef, value: value, onChange: handleInputChange, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, className: cn('w-full p-4 bg-transparent transition-colors text-foreground placeholder-muted-foreground placeholder:text-base disabled:bg-muted disabled:cursor-not-allowed resize-none', isEmbedded
             ? 'border-0 hover:border-2 hover:border-purple-500 focus:outline-none focus:border-2 focus:border-purple-500'
             : 'border-2 border-border rounded-lg hover:border-purple-500 focus:outline-none focus:border-purple-500', className), style: { minHeight: `${minHeight}px` } }));
-    // 渲染单词计数
+    // Render the word count.
     const renderWordCount = () => {
         if (!showWordCount)
             return null;
         return (jsx("div", { className: "flex justify-end", children: jsxs("span", { className: `text-sm ${wordCount >= maxWords ? 'text-red-500' : wordCount > maxWords * 0.75 ? 'text-orange-500' : 'text-muted-foreground'} ${isWordLimit ? 'animate-bounce' : ''}`, onAnimationEnd: () => onWordLimitChange(false), children: [wordCount, "/", maxWords, " ", wordUnitTitle] }) }));
     };
-    // 如果有标题且需要嵌入，则渲染内部标题布局
+    // Render the embedded title layout when a title is present and embedded mode is enabled.
     if (embed && (title)) {
         return (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "border-2 border-border rounded-lg bg-transparent", children: [jsx("div", { className: "p-4 pb-2", children: renderTitle() }), jsx("hr", { className: "border-t border-border" }), jsx("div", { className: "p-1", children: renderTextarea(true) })] }), renderWordCount()] }));
     }
-    // 默认布局：外部标题或无标题
+    // Default layout: external title or no title.
     return (jsxs("div", { className: "space-y-2", children: [renderTitle(), renderTextarea(), renderWordCount()] }));
 }
 

package/dist/clerk/clerk-auth-appearance.d.ts

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

package/dist/clerk/clerk-auth-appearance.js

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

package/dist/clerk/clerk-auth-appearance.mjs

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

package/dist/clerk/clerk-auth-modal-appearance.d.ts

@@ -0,0 +1,12 @@
+export declare const clerkAuthModalAppearance: {
+    elements: {
+        modalContent: string;
+        cardBox: string;
+    };
+};
+export declare const clerkAuthPageAppearance: {
+    elements: {
+        rootBox: string;
+        cardBox: string;
+    };
+};

package/dist/clerk/clerk-auth-modal-appearance.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const clerkAuthModalAppearance = {
+    elements: {
+        modalContent: '!items-start !pt-16 sm:!pt-24',
+        cardBox: '!mt-0',
+    },
+};
+const clerkAuthPageAppearance = {
+    elements: {
+        rootBox: 'w-full',
+        cardBox: 'mx-auto',
+    },
+};
+
+exports.clerkAuthModalAppearance = clerkAuthModalAppearance;
+exports.clerkAuthPageAppearance = clerkAuthPageAppearance;

package/dist/clerk/clerk-auth-modal-appearance.mjs

@@ -0,0 +1,14 @@
+const clerkAuthModalAppearance = {
+    elements: {
+        modalContent: '!items-start !pt-16 sm:!pt-24',
+        cardBox: '!mt-0',
+    },
+};
+const clerkAuthPageAppearance = {
+    elements: {
+        rootBox: 'w-full',
+        cardBox: 'mx-auto',
+    },
+};
+
+export { clerkAuthModalAppearance, clerkAuthPageAppearance };

package/dist/clerk/clerk-page-context-generator.js

@@ -4,15 +4,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var signupWithFingerprintClient = require('./signup-with-fingerprint-client.js');
 var signinWithFingerprintClient = require('./signin-with-fingerprint-client.js');
+var clerkAuthAppearance = require('./clerk-auth-appearance.js');
 
-const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 /**
  * Create a SignUp page with fingerprint support
  * Note: This must be used within a FingerprintProvider
  */
 function createSignUpPageWithFingerprint() {
     return function SignUpPage() {
-        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(signupWithFingerprintClient.SignUpWithFingerprint, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkAuthAppearance.clerkAuthPageContainerClassName, children: jsxRuntime.jsx(signupWithFingerprintClient.SignUpWithFingerprint, {}) }));
     };
 }
 /**
@@ -21,7 +21,7 @@ function createSignUpPageWithFingerprint() {
  */
 function createSignInPageWithFingerprint() {
     return function SignInPage() {
-        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(signinWithFingerprintClient.SignInWithFingerprint, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkAuthAppearance.clerkAuthPageContainerClassName, children: jsxRuntime.jsx(signinWithFingerprintClient.SignInWithFingerprint, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-context-generator.mjs

@@ -2,15 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { SignUpWithFingerprint } from './signup-with-fingerprint-client.mjs';
 import { SignInWithFingerprint } from './signin-with-fingerprint-client.mjs';
+import { clerkAuthPageContainerClassName } from './clerk-auth-appearance.mjs';
 
-const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 /**
  * Create a SignUp page with fingerprint support
  * Note: This must be used within a FingerprintProvider
  */
 function createSignUpPageWithFingerprint() {
     return function SignUpPage() {
-        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignUpWithFingerprint, {}) }));
+        return (jsx("div", { className: clerkAuthPageContainerClassName, children: jsx(SignUpWithFingerprint, {}) }));
     };
 }
 /**
@@ -19,7 +19,7 @@ function createSignUpPageWithFingerprint() {
  */
 function createSignInPageWithFingerprint() {
     return function SignInPage() {
-        return (jsx("div", { className: clerkPageContainerClassName, children: jsx(SignInWithFingerprint, {}) }));
+        return (jsx("div", { className: clerkAuthPageContainerClassName, children: jsx(SignInWithFingerprint, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-generator.js

@@ -2,22 +2,22 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var nextjs = require('@clerk/nextjs');
+var clerkAuthAppearance = require('./clerk-auth-appearance.js');
 
-const clerkPageContainerClassName = 'flex min-h-dvh w-full items-start justify-center px-6 pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1rem)] pb-6 md:px-8 md:pt-[calc(var(--fd-banner-height,0px)+var(--fd-header-height,3.5rem)+1.5rem)] md:pb-8';
 // Legacy page generators (for backward compatibility)
 function createSignInPage() {
     return function SignInPage() {
-        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignIn, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkAuthAppearance.clerkAuthPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignIn, { appearance: clerkAuthAppearance.clerkAuthPageAppearance }) }));
     };
 }
 function createSignUpPage() {
     return function SignUpPage() {
-        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignUp, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkAuthAppearance.clerkAuthPageContainerClassName, children: jsxRuntime.jsx(nextjs.SignUp, { appearance: clerkAuthAppearance.clerkAuthPageAppearance }) }));
     };
 }
 function createWaitlistPage() {
     return function WaitlistPage() {
-        return (jsxRuntime.jsx("div", { className: clerkPageContainerClassName, children: jsxRuntime.jsx(nextjs.Waitlist, {}) }));
+        return (jsxRuntime.jsx("div", { className: clerkAuthAppearance.clerkAuthPageContainerClassName, children: jsxRuntime.jsx(nextjs.Waitlist, {}) }));
     };
 }
 

package/dist/clerk/clerk-page-generator.mjs

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

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

@@ -6,12 +6,13 @@ var React = require('react');
 var nextjs = require('@clerk/nextjs');
 var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
+var clerkAuthAppearance = require('./clerk-auth-appearance.js');
 var signupButtonWithFingerprintClient = require('./signup-button-with-fingerprint-client.js');
 
 function ClerkUserClient({ data }) {
     const [showTooltip, setShowTooltip] = React.useState(false);
     const { isSignedIn } = nextjs.useAuth();
-    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: [!isSignedIn && (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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 }) })] })), isSignedIn && (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: [!isSignedIn && (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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 }))] }))] })), data.clerkAuthInModal ? (jsxRuntime.jsx(nextjs.SignInButton, { mode: "modal", appearance: clerkAuthAppearance.clerkAuthModalAppearance, 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.SignInButton, { mode: "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 }) }))] })), isSignedIn && (jsxRuntime.jsx(nextjs.UserButton, { appearance: {
                             elements: {
                                 userButtonAvatarBox: "w-8 h-8 border",
                             }

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

@@ -4,12 +4,13 @@ import { useState } from 'react';
 import { useAuth, ClerkLoading, ClerkLoaded, SignInButton, UserButton } from '@clerk/nextjs';
 import { ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass } from '@windrun-huaiin/base-ui/lib';
+import { clerkAuthModalAppearance } from './clerk-auth-appearance.mjs';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client.mjs';
 
 function ClerkUserClient({ data }) {
     const [showTooltip, setShowTooltip] = useState(false);
     const { isSignedIn } = useAuth();
-    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: [!isSignedIn && (jsxs(Fragment, { 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 }) })] })), isSignedIn && (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: [!isSignedIn && (jsxs(Fragment, { 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 }))] }))] })), data.clerkAuthInModal ? (jsx(SignInButton, { mode: "modal", appearance: clerkAuthModalAppearance, 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(SignInButton, { mode: "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 }) }))] })), isSignedIn && (jsx(UserButton, { appearance: {
                             elements: {
                                 userButtonAvatarBox: "w-8 h-8 border",
                             }