@windrun-huaiin/third-ui 15.1.0 → 16.0.0

package/src/fuma/mdx/banner.tsx

@@ -2,7 +2,7 @@
 
 import { cva } from 'class-variance-authority';
 import { type HTMLAttributes, useEffect, useState } from 'react';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { XIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 
 const buttonVariants = cva(
@@ -179,12 +179,12 @@ export function Banner({
             buttonVariants({
               color: 'ghost',
               className:
-                'absolute end-2 top-1/2 -translate-y-1/2 text-neutral-600 dark:text-neutral-400',
+                'absolute inset-e-2 top-1/2 -translate-y-1/2 text-neutral-600 dark:text-neutral-400',
               size: 'icon',
             }),
           )}
         >
-          <icons.X />
+          <XIcon />
         </button>
       ) : null}
     </div>

package/src/fuma/mdx/fuma-github-info.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { ExternalLinkIcon, StarIcon } from '@windrun-huaiin/base-ui/icons';
 
 interface FumaGithubInfoProps {
   owner: string;
@@ -45,7 +45,7 @@ function GitHubInfoFallback({ owner, repo, className }: Pick<FumaGithubInfoProps
         {owner}/{repo}
       </p>
       <p className="flex text-xs items-center gap-1 text-fd-muted-foreground">
-        <icons.ExternalLink className="size-3" />
+        <ExternalLinkIcon className="size-3" />
         GitHub
       </p>
     </a>
@@ -76,7 +76,7 @@ function GitHubInfoSuccess({
         {owner}/{repo}
       </p>
       <p className="flex text-xs items-center gap-1 text-fd-muted-foreground">
-        <icons.Star className="size-3" />
+        <StarIcon className="size-3" />
         {humanizedStars}
       </p>
     </a>
@@ -191,4 +191,4 @@ export function FumaGithubInfo({ owner, repo, token, className }: FumaGithubInfo
       className={className} 
     />
   );
-} 
+} 

package/src/fuma/mdx/gradient-button.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from '@windrun-huaiin/lib/utils';
-import { globalLucideIcons as icons } from "@windrun-huaiin/base-ui/components/server";
+import { ArrowRightIcon, Loader2Icon } from "@windrun-huaiin/base-ui/icons";
 import {
   themeBgColor,
   themeBorderColor,
@@ -106,7 +106,7 @@ export function GradientButton({
 
   const iconNode = (() => {
     if (isLoading) {
-      return <icons.Loader2 className={cn(finalIconClass, 'animate-spin')} />;
+      return <Loader2Icon className={cn(finalIconClass, 'animate-spin')} />;
     }
 
     if (iconProvided) {
@@ -123,7 +123,7 @@ export function GradientButton({
       return icon;
     }
 
-    return <icons.ArrowRight className={cn(finalIconClass)} />;
+    return <ArrowRightIcon className={cn(finalIconClass)} />;
   })();
 
   const shouldRenderIcon = iconNode !== null && iconNode !== undefined;

package/src/fuma/mdx/index.ts

@@ -12,4 +12,5 @@ export * from './zia-file';
 export * from './toc-footer-wrapper';
 export * from './toc-clerk-portable';
 export * from './banner';
-export * from './suno-embed';
+export * from './suno-embed';
+export * from './markdown-component-map';

package/src/fuma/mdx/markdown-component-map.tsx

@@ -0,0 +1,174 @@
+import { cn } from '@windrun-huaiin/lib/utils';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { type ComponentType } from 'react';
+import { ImageZoom } from './image-zoom';
+
+export type MarkdownComponentMap = Record<string, ComponentType<any>>;
+
+function normalizeMarkdownProps<T extends Record<string, any>>(props: T) {
+  const { class: legacyClassName, className, ...restProps } = props;
+
+  return {
+    ...restProps,
+    className: cn(
+      typeof legacyClassName === 'string' ? legacyClassName : undefined,
+      className,
+    ),
+  };
+}
+
+export const baseMarkdownComponents: MarkdownComponentMap = {
+  ...defaultMdxComponents,
+  a: ({ className, ...props }) => (
+    <a
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'underline underline-offset-4 transition hover:opacity-80',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+      target={props.target ?? '_blank'}
+      rel={props.rel ?? 'noreferrer noopener'}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'border-l-2 border-border pl-4 text-muted-foreground',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  code: ({ className, ...props }) => (
+    <code
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.9em]',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  h1: ({ className, ...props }) => (
+    <h1
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-2xl font-semibold tracking-tight', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-xl font-semibold tracking-tight', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-lg font-semibold', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-base font-semibold', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-sm font-semibold', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      {...normalizeMarkdownProps(props)}
+      className={cn('text-sm font-semibold', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr
+      {...normalizeMarkdownProps(props)}
+      className={cn('border-border', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  img: ({ className, alt, src, ...props }) => (
+    <ImageZoom
+      {...normalizeMarkdownProps(props)}
+      alt={typeof alt === 'string' ? alt : ''}
+      src={typeof src === 'string' ? src : ''}
+      className={cn(
+        'overflow-hidden rounded-2xl',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  li: ({ className, ...props }) => (
+    <li
+      {...normalizeMarkdownProps(props)}
+      className={cn('leading-7', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      {...normalizeMarkdownProps(props)}
+      className={cn('list-decimal space-y-2 pl-6', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      {...normalizeMarkdownProps(props)}
+      className={cn('leading-7', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'overflow-x-auto rounded-2xl border border-border bg-muted px-4 py-3 text-sm',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  table: ({ className, ...props }) => (
+    <div className="overflow-x-auto">
+      <table
+        {...normalizeMarkdownProps(props)}
+        className={cn(
+          'w-full border-collapse text-sm',
+          normalizeMarkdownProps(props).className,
+          className,
+        )}
+      />
+    </div>
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'border border-border px-3 py-2 align-top',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      {...normalizeMarkdownProps(props)}
+      className={cn(
+        'border border-border px-3 py-2 text-left font-medium',
+        normalizeMarkdownProps(props).className,
+        className,
+      )}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      {...normalizeMarkdownProps(props)}
+      className={cn('list-disc space-y-2 pl-6', normalizeMarkdownProps(props).className, className)}
+    />
+  ),
+};

package/src/fuma/mdx/mermaid.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { DownloadIcon, MmdIcon, RefreshCcwIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 // Attention: do not use external dialog library, avoid react context conflict when building third-party applications
 import type { MermaidConfig } from 'mermaid';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { useTheme } from 'next-themes';
+import rough from 'roughjs';
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { themeIconColor, themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
 
@@ -20,13 +21,14 @@ interface MermaidProps {
   title?: string;
   watermarkEnabled?: boolean;
   watermarkText?: string;
+  handDrawn?: boolean;
   /**
    * enable preview dialog by clicking the chart, default is true
    */
   enablePreview?: boolean;
 }
  
-export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enablePreview = true }: MermaidProps) {
+export function Mermaid({ chart, title, watermarkEnabled, watermarkText, handDrawn = true, enablePreview = true }: MermaidProps) {
   const id = useId();
   const [svg, setSvg] = useState('');
   const { resolvedTheme } = useTheme();
@@ -62,9 +64,9 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
           id.replaceAll(':', ''),
           chart.replaceAll('\\n', '\n')
         );
-        let svgWithWatermark = svg;
+        let svgWithWatermark = handDrawn ? applyHandDrawnStyle(svg) : svg;
         if (watermarkEnabled && watermarkText) {
-          svgWithWatermark = addWatermarkToSvg(svg, watermarkText, themeSvgIconColor);
+          svgWithWatermark = addWatermarkToSvg(svgWithWatermark, watermarkText, themeSvgIconColor);
         }
         if (isMounted) setSvg(svgWithWatermark);
       } catch (error) {
@@ -75,7 +77,7 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
       isMounted = false;
       setSvg('');
     };
-  }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText]);
+  }, [chart, id, resolvedTheme, watermarkEnabled, watermarkText, handDrawn]);
 
   // helpers for preview zoom
   const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);
@@ -247,7 +249,7 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
         <div
           className={cn("mt-2 flex items-center justify-center text-center text-[13px] font-italic", themeIconColor)}
         >
-          <icons.Mmd className='mr-1 h-4 w-4' />
+          <MmdIcon className='mr-1 h-4 w-4' />
           <span>{title}</span>
         </div>
       )}
@@ -270,7 +272,7 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
             {/* Top bar */}
             <div className="flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 dark:border-neutral-700">
               <div className={cn("min-w-0 flex items-center gap-2 text-sm", themeIconColor)}>
-                <icons.Mmd className="h-4 w-4" />
+                <MmdIcon className="h-4 w-4" />
                 <span className="truncate max-w-[50vw]">{title ?? 'Mermaid Preview'}</span>
               </div>
               <div className="flex shrink-0 items-center gap-0.5">
@@ -324,21 +326,21 @@ export function Mermaid({ chart, title, watermarkEnabled, watermarkText, enableP
                   className={cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor)}
                   onClick={resetTransform}
                 >
-                  <icons.RefreshCcw className="h-3.5 w-3.5" />
+                  <RefreshCcwIcon className="h-3.5 w-3.5" />
                 </button>
                 <button
                   aria-label="Download SVG"
                   className={cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor)}
                   onClick={handleDownload}
                 >
-                  <icons.Download className="h-3.5 w-3.5" />
+                  <DownloadIcon className="h-3.5 w-3.5" />
                 </button>
                 <button
                   aria-label="Close"
                   className={cn("ml-1 flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600", themeIconColor)}
                   onClick={() => { setOpen(false); resetTransform(); }}
                 >
-                  <icons.X className="h-3.5 w-3.5" />
+                  <XIcon className="h-3.5 w-3.5" />
                 </button>
               </div>
             </div>
@@ -410,3 +412,136 @@ function addWatermarkToSvg(svg: string, watermark: string, watermarkColor: strin
   `;
   return svg.replace('</svg>', `${watermarkText}</svg>`);
 }
+
+function applyHandDrawnStyle(svg: string) {
+  if (typeof window === 'undefined') return svg;
+
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svg, 'image/svg+xml');
+    const svgElement = doc.documentElement;
+    if (!svgElement || svgElement.tagName.toLowerCase() !== 'svg') return svg;
+
+    const rc = rough.svg(svgElement as unknown as SVGSVGElement);
+    const serializer = new XMLSerializer();
+    const getNumber = (value: string | null) => Number.parseFloat(value ?? '') || 0;
+    const getStyleValue = (element: Element, name: string) => {
+      const inlineStyle = element.getAttribute('style');
+      if (inlineStyle) {
+        const match = inlineStyle.match(new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`));
+        if (match?.[1]) return match[1].trim();
+      }
+      return element.getAttribute(name);
+    };
+    const applyAttributes = (source: Element, target: Element) => {
+      for (const attr of source.getAttributeNames()) {
+        if (attr === 'x' || attr === 'y' || attr === 'x1' || attr === 'y1' || attr === 'x2' || attr === 'y2' || attr === 'width' || attr === 'height' || attr === 'rx' || attr === 'ry' || attr === 'points' || attr === 'd') continue;
+        target.setAttribute(attr, source.getAttribute(attr) ?? '');
+      }
+    };
+    const createOptions = (element: Element) => {
+      const stroke = getStyleValue(element, 'stroke') ?? '#000';
+      const fill = getStyleValue(element, 'fill') ?? 'none';
+      const strokeWidth = getNumber(getStyleValue(element, 'stroke-width')) || 1.5;
+      return {
+        stroke,
+        fill: fill === 'none' ? undefined : fill,
+        strokeWidth,
+        roughness: 1.6,
+        bowing: 1.25,
+        fillStyle: fill === 'none' ? 'hachure' : 'solid',
+        fillWeight: 0.8,
+        hachureGap: 10,
+        preserveVertices: true,
+        seed: 7,
+      };
+    };
+    const replaceShape = (element: Element, node: SVGElement | SVGGElement | null) => {
+      if (!node || !element.parentNode) return;
+      applyAttributes(element, node);
+      if (element.getAttribute('class')) {
+        node.setAttribute('class', element.getAttribute('class') ?? '');
+      }
+      if (element.getAttribute('style')) {
+        node.setAttribute('style', element.getAttribute('style') ?? '');
+      }
+      element.parentNode.replaceChild(node, element);
+    };
+
+    svgElement.querySelectorAll('rect').forEach((element) => {
+      const x = getNumber(element.getAttribute('x'));
+      const y = getNumber(element.getAttribute('y'));
+      const width = getNumber(element.getAttribute('width'));
+      const height = getNumber(element.getAttribute('height'));
+      const rx = getNumber(element.getAttribute('rx'));
+      const ry = getNumber(element.getAttribute('ry'));
+      const node = rx > 0 || ry > 0
+        ? rc.path(
+            `M ${x + rx} ${y}
+             H ${x + width - rx}
+             Q ${x + width} ${y} ${x + width} ${y + ry}
+             V ${y + height - ry}
+             Q ${x + width} ${y + height} ${x + width - rx} ${y + height}
+             H ${x + rx}
+             Q ${x} ${y + height} ${x} ${y + height - ry}
+             V ${y + ry}
+             Q ${x} ${y} ${x + rx} ${y}
+             Z`,
+            createOptions(element)
+          )
+        : rc.rectangle(
+            x,
+            y,
+            width,
+            height,
+            createOptions(element)
+          );
+      replaceShape(element, node);
+    });
+
+    svgElement.querySelectorAll('line').forEach((element) => {
+      const node = rc.line(
+        getNumber(element.getAttribute('x1')),
+        getNumber(element.getAttribute('y1')),
+        getNumber(element.getAttribute('x2')),
+        getNumber(element.getAttribute('y2')),
+        createOptions(element)
+      );
+      replaceShape(element, node);
+    });
+
+    svgElement.querySelectorAll('polyline').forEach((element) => {
+      const points = (element.getAttribute('points') ?? '')
+        .trim()
+        .split(/\s+/)
+        .map((pair) => pair.split(',').map(Number))
+        .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1])) as [number, number][];
+      if (points.length < 2) return;
+      const node = rc.linearPath(points, createOptions(element));
+      replaceShape(element, node);
+    });
+
+    svgElement.querySelectorAll('polygon').forEach((element) => {
+      const points = (element.getAttribute('points') ?? '')
+        .trim()
+        .split(/\s+/)
+        .map((pair) => pair.split(',').map(Number))
+        .filter((point) => point.length === 2 && Number.isFinite(point[0]) && Number.isFinite(point[1])) as [number, number][];
+      if (points.length < 2) return;
+      const node = rc.polygon(points, createOptions(element));
+      replaceShape(element, node);
+    });
+
+    svgElement.querySelectorAll('path').forEach((element) => {
+      const d = element.getAttribute('d');
+      if (!d) return;
+      const node = rc.path(d, createOptions(element));
+      replaceShape(element, node);
+    });
+
+    return serializer.serializeToString(svgElement);
+  } catch (error) {
+    console.error('Error while applying hand-drawn mermaid style', error);
+    return svg;
+  }
+}

package/src/fuma/mdx/toc-base.tsx

@@ -5,7 +5,7 @@ import { useParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
 import Link from 'fumadocs-core/link';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { CheckIcon, MarkdownIcon, GitHubIcon, LastUpdatedIcon} from '@windrun-huaiin/base-ui/icons';
 import { Button } from '@windrun-huaiin/base-ui/ui';
 
 const cache = new Map<string, string>();
@@ -69,12 +69,12 @@ export function LLMCopyButton({ llmApiUrl, sourceKey }: LLMCopyButtonProps = {})
     >
       {checked ? (
         <>
-          <icons.Check/>
+          <CheckIcon/>
           {t('copyMarkdownDone')}
         </>
       ) : (
         <>
-          <icons.Markdown/>
+          <MarkdownIcon/>
           {t('copyMarkdown')}
         </>
       )}
@@ -89,7 +89,7 @@ export function EditOnGitHub({ url }: { url: string }) {
       className="flex items-center gap-x-2 text-stone-600 hover:text-stone-500 dark:text-stone-400 dark:hover:text-stone-300 text-sm"
       href={url}
     >
-      <icons.GitHub/>
+      <GitHubIcon/>
       {t('editOnGithub')}
     </Link>
   );
@@ -101,7 +101,7 @@ export function LastUpdatedDate({ date }: { date: string | undefined }) {
   const viewDate = date ? `${t('lastUpdate')} ${date}` : `${t('emptyLastUpdate')}`
   return (
     <div className="flex items-center gap-x-2 text-stone-600 dark:text-stone-400 text-sm">
-      <icons.LastUpdated/>
+      <LastUpdatedIcon/>
       {viewDate}
     </div>
   );

package/src/fuma/mdx/trophy-card.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { StarIcon } from '@windrun-huaiin/base-ui/icons';
 import React from 'react';
 
 export function TrophyCard({
-  icon = <icons.Star />,
+  icon = <StarIcon />,
   title,
   children,
 }: {

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { CircleSmallIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import Link from 'next/link';
 import type { HTMLAttributes, ReactNode } from 'react';
@@ -31,7 +31,7 @@ export function ZiaCard({ icon, title, description, ...props }: ZiaCardProps) {
         {...props}
       >
         <div className="not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4">
-          {icon ? icon : <icons.CircleSmall />}
+          {icon ? icon : <CircleSmallIcon />}
         </div>
         <h3 className="not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10">{title}</h3>
         {validDescription ? (
@@ -57,7 +57,7 @@ export function ZiaCard({ icon, title, description, ...props }: ZiaCardProps) {
       {...props}
     >
       <div className="not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4">
-        {icon ? icon : <icons.CircleSmall />}
+        {icon ? icon : <CircleSmallIcon />}
       </div>
       <h3 className="not-prose mb-1 text-sm font-medium line-clamp-2 min-h-10">{title}</h3>
       {validDescription ? (

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

@@ -1,4 +1,4 @@
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server'; 
+import { FileIcon, FolderOpenIcon, FolderIcon } from '@windrun-huaiin/base-ui/icons'; 
 import { type HTMLAttributes, type ReactNode, useState } from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import {
@@ -29,7 +29,7 @@ export interface ZiaFolderProps extends HTMLAttributes<HTMLDivElement> {
 
 export function ZiaFile({
   name,
-  icon = <icons.File />,
+  icon = <FileIcon />,
   className,
   anotion,
   href,
@@ -70,7 +70,7 @@ export function ZiaFolder({
   return (
     <Collapsible open={open} onOpenChange={setOpen} {...props}>
       <CollapsibleTrigger className={cn(itemVariants, className, 'w-full')}>
-        {open ? <icons.FolderOpen /> : <icons.Folder />}
+        {open ? <FolderOpenIcon /> : <FolderIcon />}
         <span>{name}</span>
         {validAnotion && (
           <span className={anotionClass}>{anotion}</span>

package/src/main/ads-alert-dialog.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import Image from "next/image";
-import { globalLucideIcons as icons } from "@windrun-huaiin/base-ui/components/server";
+import { ImageOffIcon, InfoIcon, XIcon } from "@windrun-huaiin/base-ui/icons";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -47,7 +47,7 @@ export function AdsAlertDialog({
         <div className="flex flex-row items-center justify-between mb-2">
           <AlertDialogTitle asChild>
             <div className="flex flex-row items-center gap-1 min-w-0 text-xl font-semibold">
-              <icons.Info className="w-5 h-5" />
+              <InfoIcon className="w-5 h-5" />
               <span className="truncate">{title}</span>
             </div>
           </AlertDialogTitle>
@@ -57,7 +57,7 @@ export function AdsAlertDialog({
             aria-label="Close"
             tabIndex={0}
           >
-            <icons.X className="w-5 h-5" />
+            <XIcon className="w-5 h-5" />
           </button>
         </div>
         
@@ -70,7 +70,7 @@ export function AdsAlertDialog({
           <div className="w-full max-w-[400px] h-[220px] relative flex items-center justify-center mb-2">
             {imgError ? (
               <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100 dark:bg-neutral-800 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-lg text-neutral-400 text-sm">
-                <icons.ImageOff className="w-12 h-12 mb-2" />
+                <ImageOffIcon className="w-12 h-12 mb-2" />
                 <span>Image loading failed</span>
               </div>
             ) : imgHref ? (
@@ -132,4 +132,4 @@ export function AdsAlertDialog({
       </AlertDialogContent>
     </AlertDialog>
   );
-} 
+} 

package/src/main/credit/credit-nav-button.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from '@windrun-huaiin/lib/utils';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import {
   AlertDialog,
   AlertDialogContent,
@@ -191,7 +191,7 @@ export function CreditNavButton({
               aria-hidden="true"
             />
             <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">
-              <icons.Gem className="h-3.5 w-3.5" />
+              <GemIcon className="h-3.5 w-3.5" />
             </span>
             <span className="relative z-10 flex items-center">
               <span className="text-base font-semibold leading-none">
@@ -244,7 +244,7 @@ export function CreditNavButton({
                 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}
               >
-                <icons.X className="h-6 w-6" />
+                <XIcon className="h-6 w-6" />
               </button>
             </AlertDialogHeader>
             <div className="max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6">