@windrun-huaiin/third-ui 5.14.1 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.14.1",
+  "version": "6.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,11 +11,21 @@
       "import": "./dist/clerk/index.mjs",
       "require": "./dist/clerk/index.js"
     },
+    "./clerk/server": {
+      "types": "./dist/clerk/server.d.ts",
+      "import": "./dist/clerk/server.mjs",
+      "require": "./dist/clerk/server.js"
+    },
     "./main": {
       "types": "./dist/main/index.d.ts",
       "import": "./dist/main/index.mjs",
       "require": "./dist/main/index.js"
     },
+    "./main/server": {
+      "types": "./dist/main/server.d.ts",
+      "import": "./dist/main/server.mjs",
+      "require": "./dist/main/server.js"
+    },
     "./fuma/server": {
       "types": "./dist/fuma/server.d.ts",
       "import": "./dist/fuma/server.mjs",
@@ -54,7 +64,7 @@
     "mermaid": "^11.6.0",
     "react-medium-image-zoom": "^5.2.14",
     "zod": "^3.22.4",
-    "@windrun-huaiin/base-ui": "^6.0.3"
+    "@windrun-huaiin/base-ui": "^7.0.0"
   },
   "peerDependencies": {
     "react": "19.1.0",

package/src/clerk/clerk-organization-client.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { OrganizationSwitcher } from '@clerk/nextjs';
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+
+interface ClerkOrganizationData {
+  homepage: string;
+  terms: string;
+  privacy: string;
+  locale: string;
+  className: string;
+}
+
+export function ClerkOrganizationClient({ data }: { data: ClerkOrganizationData }) {
+  return (
+    <div className={` ms-3 me-2 flex items-center h-10 rounded-full border shadow-lg ${data.className}`}>
+      <div className="flex items-center gap-x-4 w-full min-w-40">
+        <OrganizationSwitcher
+          appearance={{
+            elements: {
+              organizationSwitcherTrigger:
+                "w-40 h-10 border !rounded-full bg-transparent flex items-center justify-between box-border",
+              organizationSwitcherTriggerIcon: "",
+              userButtonAvatarBox: "w-8 h-8 border rounded-full",
+            },
+          }}
+        >
+          <OrganizationSwitcher.OrganizationProfilePage
+            label={data.homepage}
+            url="/"
+            labelIcon={<icons.D8 />}
+          />
+          <OrganizationSwitcher.OrganizationProfilePage 
+            labelIcon={<icons.ReceiptText />}
+            label={data.terms}
+            url={`/${data.locale}/legal/terms`}
+          >
+          </OrganizationSwitcher.OrganizationProfilePage>
+
+          <OrganizationSwitcher.OrganizationProfilePage
+            labelIcon={<icons.ShieldUser />}
+            label={data.privacy}
+            url={`/${data.locale}/legal/privacy`}
+          >
+          </OrganizationSwitcher.OrganizationProfilePage> 
+        </OrganizationSwitcher>
+      </div>
+    </div>
+  );
+}

package/src/clerk/clerk-organization.tsx

@@ -1,49 +1,32 @@
-'use client';
+import { getTranslations } from 'next-intl/server';
+import { ClerkOrganizationClient } from './clerk-organization-client';
 
-import { OrganizationSwitcher } from '@clerk/nextjs';
-import { globalLucideIcons as icons } from '@base-ui/components/global-icon'; 
 interface ClerkOrganizationProps {
   className?: string;
   locale: string;
 }
 
-export default function ClerkOrganization({
+interface ClerkOrganizationData {
+  homepage: string;
+  terms: string;
+  privacy: string;
+  locale: string;
+  className: string;
+}
+
+export async function ClerkOrganization({
   locale,
   className = '',
 }: ClerkOrganizationProps) {
-  return (
-    <div className={` ms-3 me-2 flex items-center h-10 rounded-full border shadow-lg ${className}`}>
-      <div className="flex items-center gap-x-4 w-full min-w-40">
-        <OrganizationSwitcher
-          appearance={{
-            elements: {
-              organizationSwitcherTrigger:
-                "w-40 h-10 border !rounded-full bg-transparent flex items-center justify-between box-border",
-              organizationSwitcherTriggerIcon: "",
-              userButtonAvatarBox: "w-8 h-8 border rounded-full",
-            },
-          }}
-        >
-          <OrganizationSwitcher.OrganizationProfilePage
-            label="Homepage"
-            url="/"
-            labelIcon={<icons.D8 />}
-          />
-          <OrganizationSwitcher.OrganizationProfilePage 
-            labelIcon={<icons.ReceiptText />}
-            label="服务"
-            url={`/${locale}/legal/terms`}
-          >
-          </OrganizationSwitcher.OrganizationProfilePage>
+  const t = await getTranslations({ locale, namespace: 'footer' });
+  
+  const data: ClerkOrganizationData = {
+    homepage: 'Homepage',
+    terms: t('terms'),
+    privacy: t('privacy'),
+    locale,
+    className
+  };
 
-          <OrganizationSwitcher.OrganizationProfilePage
-            labelIcon={<icons.ShieldUser />}
-            label="隐私"
-            url={`/${locale}/legal/privacy`}
-          >
-          </OrganizationSwitcher.OrganizationProfilePage> 
-        </OrganizationSwitcher>
-      </div>
-    </div>
-  );
+  return <ClerkOrganizationClient data={data} />;
 } 

package/src/clerk/clerk-page-generator.tsx

@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-'use client';
-
 import { SignIn, SignUp, Waitlist } from '@clerk/nextjs';
 
 export function createSignInPage() {

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

@@ -30,7 +30,7 @@ export function ClerkProviderClient({
     localization: currentLocalization,
   };
 
-  // 只有传入参数非空时才拼接 URL 并添加对应的属性
+  // Only add URL when the parameter is not empty
   if (signInUrl) {
     clerkProviderProps.signInUrl = `/${locale}${signInUrl}`;
   }

package/src/clerk/clerk-user-client.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { ClerkLoaded, ClerkLoading, SignedIn, SignedOut, SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
+
+interface ClerkUserData {
+  signIn: string;
+  signUp: string;
+  terms: string;
+  privacy: string;
+  locale: string;
+  clerkAuthInModal: boolean;
+  showSignUp: boolean;
+}
+
+export function ClerkUserClient({ data }: { data: ClerkUserData }) {
+  return (
+    <div className="ms-1.5 flex items-center gap-2 h-10 me-3">
+      <ClerkLoading>
+          <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"></div>
+      </ClerkLoading>
+      <ClerkLoaded>
+        <SignedOut>
+          <SignInButton mode={data.clerkAuthInModal ? 'modal' : 'redirect'}>
+            <button 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">
+              {data.signIn}
+            </button>
+          </SignInButton>
+          {data.showSignUp && (
+            <SignUpButton mode={data.clerkAuthInModal ? 'modal' : 'redirect'}>
+              <button 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">
+                {data.signUp}
+              </button>
+            </SignUpButton>
+          )}
+        </SignedOut>
+        <SignedIn>
+          <UserButton
+            appearance={{
+              elements: {
+                userButtonAvatarBox: "w-8 h-8 border",
+              }
+            }}
+          >
+            <UserButton.MenuItems>
+              <UserButton.Action label="manageAccount" />
+              {<UserButton.Link
+                labelIcon={<icons.ReceiptText className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
+                label={data.terms}
+                href={`/${data.locale}/legal/terms`}>
+              </UserButton.Link>}
+              {<UserButton.Link
+                labelIcon={<icons.ShieldUser className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
+                label={data.privacy}
+                href={`/${data.locale}/legal/privacy`}>
+              </UserButton.Link>}
+              <UserButton.Action label="signOut" />
+            </UserButton.MenuItems>
+          </UserButton>
+        </SignedIn>
+      </ClerkLoaded>
+    </div>
+  );
+}

package/src/clerk/clerk-user.tsx

@@ -1,69 +1,40 @@
-'use client';
-
-import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
-import { ClerkLoaded, ClerkLoading, SignedIn, SignedOut, SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
-import { useTranslations } from 'next-intl';
-import { type JSX } from 'react';
+import { getTranslations } from 'next-intl/server';
+import { ClerkUserClient } from './clerk-user-client';
 
 interface ClerkUserProps {
   locale: string;
-  // default as true, ‘cause Clerk direct is not well, so just use model for sign-in/sign-up
+  // default as true, 'cause Clerk direct is not well, so just use model for sign-in/sign-up
   clerkAuthInModal?: boolean;
   showSignUp?: boolean;
 }
 
-export function ClerkUser({ 
+interface ClerkUserData {
+  signIn: string;
+  signUp: string;
+  terms: string;
+  privacy: string;
+  locale: string;
+  clerkAuthInModal: boolean;
+  showSignUp: boolean;
+}
+
+export async function ClerkUser({ 
   locale, 
   clerkAuthInModal = true,
   showSignUp = true
-}: ClerkUserProps): JSX.Element {
-  const t = useTranslations('clerk');
-  const t2 = useTranslations('footer');
-  return (
-    <div className="ms-1.5 flex items-center gap-2 h-10 me-3">
-      <ClerkLoading>
-          <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"></div>
-      </ClerkLoading>
-      <ClerkLoaded>
-        <SignedOut>
-          <SignInButton mode={clerkAuthInModal ? 'modal' : 'redirect'}>
-            <button 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">
-              {t('signIn')}
-            </button>
-          </SignInButton>
-          {showSignUp && (
-            <SignUpButton mode={clerkAuthInModal ? 'modal' : 'redirect'}>
-              <button 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">
-                {t('signUp')}
-              </button>
-            </SignUpButton>
-          )}
-        </SignedOut>
-        <SignedIn>
-          <UserButton
-            appearance={{
-              elements: {
-                userButtonAvatarBox: "w-8 h-8 border",
-              }
-            }}
-          >
-            <UserButton.MenuItems>
-              <UserButton.Action label="manageAccount" />
-              {<UserButton.Link
-                labelIcon={<icons.ReceiptText className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
-                label={t2('terms')}
-                href={`/${locale}/legal/terms`}>
-              </UserButton.Link>}
-              {<UserButton.Link
-                labelIcon={<icons.ShieldUser className="size-4 fill-none stroke-[var(--clerk-icon-stroke-color)]" />}
-                label={t2('privacy')}
-                href={`/${locale}/legal/privacy`}>
-              </UserButton.Link>}
-              <UserButton.Action label="signOut" />
-            </UserButton.MenuItems>
-          </UserButton>
-        </SignedIn>
-      </ClerkLoaded>
-    </div>
-  );
+}: ClerkUserProps) {
+  const t = await getTranslations({ locale, namespace: 'clerk' });
+  const t2 = await getTranslations({ locale, namespace: 'footer' });
+  
+  const data: ClerkUserData = {
+    signIn: t('signIn'),
+    signUp: t('signUp'),
+    terms: t2('terms'),
+    privacy: t2('privacy'),
+    locale,
+    clerkAuthInModal,
+    showSignUp
+  };
+
+  return <ClerkUserClient data={data} />;
 }

package/src/clerk/index.ts

@@ -1,6 +1,3 @@
 'use client';
 // Clerk related components
-export * from './clerk-organization';
-export * from './clerk-provider-client';
-export * from './clerk-user';
-export * from './clerk-page-generator'; 
+export * from './clerk-provider-client';

package/src/clerk/server.ts

@@ -0,0 +1,3 @@
+export * from './clerk-page-generator';
+export * from './clerk-user';
+export * from './clerk-organization'; 

package/src/fuma/{mdx/fuma-banner-suit.tsx → fuma-banner-suit.tsx}

@@ -1,15 +1,12 @@
-'use client'
-
-import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 import { Banner } from '@third-ui/fuma/mdx/banner';
 
-export function FumaBannerSuit({ showBanner }: { showBanner: boolean }) {
-  const t = useTranslations('home');
+export async function FumaBannerSuit({ locale, showBanner }: { locale: string, showBanner: boolean }) {
+  const t = await getTranslations({ locale, namespace: 'home' });
   const heightValue = showBanner ? 3 : 0.5;
   const height= `${heightValue}rem`;
   return (
     <>
-      {/* 设置 header 的 top 位置为 Banner 的底部，避免间隙 */}
       {showBanner ? (
         <Banner variant="rainbow" changeLayout={true} height={heightValue}>
           <p className="text-xl">{t('banner')}</p>

package/src/fuma/mdx/banner.tsx

@@ -53,7 +53,6 @@ export function Banner({
   const [open, setOpen] = useState(true);
   const globalKey = id ? `nd-banner-${id}` : null;
   const bannerHeight = `${height}rem`;
-  const headerStartHeight = `${height + 5.5}rem`;
 
   useEffect(() => {
     if (globalKey) setOpen(localStorage.getItem(globalKey) !== 'true');

package/src/fuma/mdx/index.ts

@@ -7,8 +7,6 @@ export * from './image-grid';
 export * from './zia-card';
 export * from './gradient-button';
 export * from './toc-base';
-export * from './fuma-banner-suit';
 export * from './fuma-github-info';
-export * from './site-x';
 export * from './zia-file';
 export * from './toc-footer-wrapper';

package/src/fuma/mdx/mermaid.tsx

@@ -85,8 +85,10 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
       const delta = e.deltaY > 0 ? -0.1 : 0.1;
       setScale((prev) => clamp(prev + delta, 0.25, 10));
     } else {
+      // two-finger pan on touchpad: support both horizontal (deltaX) and vertical (deltaY)
+      e.preventDefault();
       e.stopPropagation();
-      setTranslate((prev) => ({ x: prev.x, y: prev.y - e.deltaY }));
+      setTranslate((prev) => ({ x: prev.x - e.deltaX, y: prev.y - e.deltaY }));
     }
   }, []);
 

package/src/fuma/mdx/toc-footer-wrapper.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { EditOnGitHub, LastUpdatedDate } from '@third-ui/fuma/mdx/toc-base';
 import React from 'react';
 

package/src/fuma/mdx/zia-file.tsx

@@ -11,7 +11,6 @@ import Link from 'next/link';
 
 const itemVariants = 'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4';
 
-// 注解样式：色彩突出且主题适配
 const anotionClass = 'ms-2 px-2 py-0.5 rounded text-xs font-semibold bg-fd-accent/80 text-fd-accent-foreground dark:bg-white/20 dark:text-white';
 
 export interface ZiaFileProps extends HTMLAttributes<HTMLDivElement> {

package/src/fuma/server.ts

@@ -1,3 +1,5 @@
 // Fumadocs related components, this is a server component!
 export * from './fuma-page-genarator';
-export * from './llm-copy-handler';
+export * from './llm-copy-handler';
+export * from './fuma-banner-suit';
+export * from './site-x';

package/src/fuma/{mdx/site-x.tsx → site-x.tsx}

@@ -1,16 +1,15 @@
-'use client';
-
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils';
 import type { HTMLAttributes } from 'react';
-import { useTranslations } from 'next-intl';
 
 export type SiteXProps = Omit<HTMLAttributes<HTMLSpanElement>, 'type'> & {
+  locale: string;
   type: 'site' | 'email';
   namespace?: string;
   tKey?: string;
 };
 
-export function SiteX({ type, namespace, tKey, className, ...props }: SiteXProps) {
+export async function SiteX({ locale, type, namespace, tKey, className, ...props }: SiteXProps) {
   // 默认命名空间和key
   let ns = namespace;
   let key = tKey;
@@ -20,7 +19,7 @@ export function SiteX({ type, namespace, tKey, className, ...props }: SiteXProps
   if (!key) {
     key = type === 'site' ? 'title' : 'email';
   }
-  const t = useTranslations(ns);
+  const t = await getTranslations({ locale, namespace: ns });
   const text = t(key, { defaultValue: type === 'site' ? 'Site----' : '----@example.com' });
 
   if (type === 'site') {

package/src/main/cta.tsx

@@ -1,12 +1,35 @@
-'use client'
-
+import { getTranslations } from 'next-intl/server';
 import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
-import { useTranslations } from 'next-intl';
 import { cn } from '@lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
 
-export function CTA({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('cta');
+interface CTAData {
+  title: string;
+  eyesOn: string;
+  description1: string;
+  description2: string;
+  button: string;
+  url: string;
+}
+
+export async function CTA({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'cta' });
+  
+  const data: CTAData = {
+    title: t('title'),
+    eyesOn: t('eyesOn'),
+    description1: richText(t, 'description1'),
+    description2: t('description2'),
+    button: t('button'),
+    url: t('url')
+  };
+
   return (
     <section id="cta" className={cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
       <div className="
@@ -16,16 +39,16 @@ export function CTA({ sectionClassName }: { sectionClassName?: string }) {
         bg-[length:200%_auto] animate-cta-gradient-wave
         ">
         <h2 className="text-3xl md:text-4xl font-bold mb-6">
-          {t('title')} <span className="text-purple-400">{t('eyesOn')}</span>?
+          {data.title} <span className="text-purple-400">{data.eyesOn}</span>?
         </h2>
         <p className="text-2xl mx-auto mb-8">
-          {richText(t, 'description1')}
+          {data.description1}
           <br />
-          <span className="text-purple-400">{t('description2')}</span>
+          <span className="text-purple-400">{data.description2}</span>
         </p>
         <GradientButton
-          title={t('button')}
-          href={t('url')}
+          title={data.button}
+          href={data.url}
           align="center"
         />
       </div>

package/src/main/faq-interactive.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface FAQData {
+  title: string;
+  description: string;
+  items: Array<{
+    id: string;
+    question: string;
+    answer: string;
+  }>;
+}
+
+export function FAQInteractive({ data }: { data: FAQData }) {
+  const [openStates, setOpenStates] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    // Progressive enhancement: Add interactivity to existing DOM elements
+    data.items.forEach((item) => {
+      const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`) as HTMLButtonElement;
+      const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`) as HTMLDivElement;
+      const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`) as SVGElement;
+
+      if (toggleButton && contentDiv && iconSvg) {
+        const handleClick = () => {
+          const isOpen = openStates[item.id] || false;
+          const newOpenState = !isOpen;
+
+          // Update state
+          setOpenStates(prev => ({
+            ...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)';
+          }
+        };
+
+        toggleButton.addEventListener('click', handleClick);
+
+        // Cleanup function will be handled by the effect cleanup
+      }
+    });
+
+    // Cleanup event listeners
+    return () => {
+      data.items.forEach((item) => {
+        const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`) as HTMLButtonElement;
+        if (toggleButton) {
+          // Remove all event listeners by cloning the element
+          const newButton = toggleButton.cloneNode(true);
+          toggleButton.parentNode?.replaceChild(newButton, toggleButton);
+        }
+      });
+    };
+  }, [data, openStates]);
+
+  return null; // Progressive enhancement - no additional DOM rendering
+}