@windrun-huaiin/third-ui 22.0.1 → 23.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "22.0.1",
+  "version": "23.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -53,6 +53,31 @@
       "import": "./dist/fuma/server/site-mdx-components.mjs",
       "require": "./dist/fuma/server/site-mdx-components.js"
     },
+    "./fuma/server/site-mdx/base": {
+      "types": "./dist/fuma/server/site-mdx-base.d.ts",
+      "import": "./dist/fuma/server/site-mdx-base.mjs",
+      "require": "./dist/fuma/server/site-mdx-base.js"
+    },
+    "./fuma/server/site-mdx/features/code": {
+      "types": "./dist/fuma/server/site-mdx-features/code.d.ts",
+      "import": "./dist/fuma/server/site-mdx-features/code.mjs",
+      "require": "./dist/fuma/server/site-mdx-features/code.js"
+    },
+    "./fuma/server/site-mdx/features/math": {
+      "types": "./dist/fuma/server/site-mdx-features/math.d.ts",
+      "import": "./dist/fuma/server/site-mdx-features/math.mjs",
+      "require": "./dist/fuma/server/site-mdx-features/math.js"
+    },
+    "./fuma/server/site-mdx/features/mermaid": {
+      "types": "./dist/fuma/server/site-mdx-features/mermaid.d.ts",
+      "import": "./dist/fuma/server/site-mdx-features/mermaid.mjs",
+      "require": "./dist/fuma/server/site-mdx-features/mermaid.js"
+    },
+    "./fuma/server/site-mdx/features/type-table": {
+      "types": "./dist/fuma/server/site-mdx-features/type-table.d.ts",
+      "import": "./dist/fuma/server/site-mdx-features/type-table.mjs",
+      "require": "./dist/fuma/server/site-mdx-features/type-table.js"
+    },
     "./fuma/share": {
       "types": "./dist/fuma/share/index.d.ts",
       "import": "./dist/fuma/share/index.mjs",
@@ -122,9 +147,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^22.0.0",
-    "@windrun-huaiin/lib": "^22.0.0",
-    "@windrun-huaiin/contracts": "^22.0.0"
+    "@windrun-huaiin/base-ui": "^23.0.0",
+    "@windrun-huaiin/lib": "^23.0.0",
+    "@windrun-huaiin/contracts": "^23.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/server/features/base.tsx

@@ -0,0 +1,23 @@
+import type { MDXComponents } from 'mdx/types';
+import { baseMarkdownComponents } from '../../share/markdown-component-map';
+import { lazy } from 'react';
+import { createMissingMdxFeatureComponents } from '../site-mdx-fallbacks';
+
+const ImageZoom = lazy(() =>
+  import('../../heavy/image-zoom').then((mod) => ({ default: mod.ImageZoom })),
+);
+
+export function createBaseMdxComponents(
+  imageFallbackSrc?: string,
+): MDXComponents {
+  return {
+    ...baseMarkdownComponents,
+    ...createMissingMdxFeatureComponents(),
+    img: (props) => (
+      <ImageZoom
+        {...(props as any)}
+        fallbackSrc={imageFallbackSrc}
+      />
+    ),
+  };
+}

package/src/fuma/server/features/code.tsx

@@ -0,0 +1,104 @@
+import type { MDXComponents, MDXProps } from 'mdx/types';
+import { lazy, type ReactNode } from 'react';
+import {
+  CSSIcon,
+  CSVIcon,
+  DiffIcon,
+  HtmlIcon,
+  HttpIcon,
+  JavaIcon,
+  JsonIcon,
+  LogIcon,
+  MDXIcon,
+  RegexIcon,
+  SQLIcon,
+  SchemeIcon,
+  SquareDashedBottomCodeIcon,
+  TxtIcon,
+  XMLIcon,
+  YamlIcon,
+} from '@windrun-huaiin/base-ui/icons';
+
+const CodeBlock = lazy(() =>
+  import('fumadocs-ui/components/codeblock').then((mod) => ({ default: mod.CodeBlock })),
+);
+const Pre = lazy(() =>
+  import('fumadocs-ui/components/codeblock').then((mod) => ({ default: mod.Pre })),
+);
+
+const defaultCodeLanguageIconMap: Record<string, ReactNode> = {
+  css: <CSSIcon />,
+  csv: <CSVIcon />,
+  diff: <DiffIcon />,
+  html: <HtmlIcon />,
+  http: <HttpIcon />,
+  java: <JavaIcon />,
+  json: <JsonIcon />,
+  jsonc: <SquareDashedBottomCodeIcon />,
+  log: <LogIcon />,
+  mdx: <MDXIcon />,
+  plaintext: <TxtIcon />,
+  regex: <RegexIcon />,
+  scheme: <SchemeIcon />,
+  sql: <SQLIcon />,
+  text: <TxtIcon />,
+  txt: <TxtIcon />,
+  xml: <XMLIcon />,
+  yaml: <YamlIcon />,
+  yml: <YamlIcon />,
+};
+
+function tryToMatchIcon(
+  props: Readonly<MDXProps & { 'data-language'?: string; title?: string }>,
+  iconMap: Record<string, ReactNode>,
+): ReactNode | undefined {
+  let lang: string | undefined;
+
+  const dataLanguage = props['data-language'] as string | undefined;
+
+  if (dataLanguage && dataLanguage.trim() !== '') {
+    lang = dataLanguage.trim().toLowerCase();
+  } else {
+    const title = props.title as string | undefined;
+    if (title) {
+      const titleParts = title.split('.');
+      if (titleParts.length > 1 && titleParts[0] !== '') {
+        const extension = titleParts.pop()?.toLowerCase();
+        if (extension) {
+          lang = extension;
+        }
+      }
+    }
+  }
+
+  if (lang && iconMap[lang]) {
+    return iconMap[lang];
+  }
+
+  return undefined;
+}
+
+export function createCodeMdxComponents(
+  iconMap: Record<string, ReactNode> = {},
+): MDXComponents {
+  const mergedIconMap = {
+    ...defaultCodeLanguageIconMap,
+    ...iconMap,
+  };
+
+  return {
+    pre: (props) => {
+      const customIcon = tryToMatchIcon(props as MDXProps & { 'data-language'?: string; title?: string }, mergedIconMap);
+      return (
+        <CodeBlock
+          {...props}
+          {...(customIcon && { icon: customIcon })}
+        >
+          <Pre>{props.children}</Pre>
+        </CodeBlock>
+      );
+    },
+    CodeBlock,
+    Pre,
+  };
+}

package/src/fuma/server/features/math.ts

@@ -0,0 +1,16 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+
+const MathBlock = lazy(() =>
+  import('../../heavy/math').then((mod) => ({ default: mod.MathBlock })),
+);
+const InlineMath = lazy(() =>
+  import('../../heavy/math').then((mod) => ({ default: mod.InlineMath })),
+);
+
+export function createMathMdxComponents(): MDXComponents {
+  return {
+    MathBlock,
+    InlineMath,
+  };
+}

package/src/fuma/server/features/mermaid.tsx

@@ -0,0 +1,21 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+
+const Mermaid = lazy(() =>
+  import('../../heavy/mermaid').then((mod) => ({ default: mod.Mermaid })),
+);
+
+export function createMermaidMdxComponents(
+  watermarkEnabled?: boolean,
+  watermarkText?: string,
+): MDXComponents {
+  return {
+    Mermaid: (props) => (
+      <Mermaid
+        {...props}
+        watermarkEnabled={watermarkEnabled}
+        watermarkText={watermarkText}
+      />
+    ),
+  };
+}

package/src/fuma/server/features/type-table.ts

@@ -0,0 +1,12 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+
+const TypeTable = lazy(() =>
+  import('fumadocs-ui/components/type-table').then((mod) => ({ default: mod.TypeTable })),
+);
+
+export function createTypeTableMdxComponents(): MDXComponents {
+  return {
+    TypeTable,
+  };
+}

package/src/fuma/server/features/widgets.tsx

@@ -0,0 +1,34 @@
+import type { MDXComponents } from 'mdx/types';
+import { lazy } from 'react';
+import { TrophyCard } from '../../mdx/trophy-card';
+import { ZiaCard } from '../../mdx/zia-card';
+import { GradientButton } from '../../mdx/gradient-button';
+import { ZiaFile, ZiaFolder } from '../../mdx/zia-file';
+import { SunoEmbed } from '../../mdx/suno-embed';
+
+const ImageGrid = lazy(() =>
+  import('../../heavy/image-grid').then((mod) => ({ default: mod.ImageGrid })),
+);
+const ImageZoom = lazy(() =>
+  import('../../heavy/image-zoom').then((mod) => ({ default: mod.ImageZoom })),
+);
+
+export function createWidgetMdxComponents(
+  cdnBaseUrl?: string,
+  imageFallbackSrc?: string,
+): MDXComponents {
+  return {
+    TrophyCard,
+    ZiaCard,
+    GradientButton,
+    ZiaFile,
+    ZiaFolder,
+    SunoEmbed,
+    ImageGrid: (props) => (
+      <ImageGrid {...props} cdnBaseUrl={cdnBaseUrl} />
+    ),
+    ImageZoom: (props) => (
+      <ImageZoom {...props} fallbackSrc={imageFallbackSrc} />
+    ),
+  };
+}

package/src/fuma/server/optional-features.tsx

@@ -1,168 +1,6 @@
-import type { MDXComponents, MDXProps } from 'mdx/types';
-import type { ReactNode } from 'react';
-import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';
-import { TypeTable } from 'fumadocs-ui/components/type-table';
-import {
-  CSSIcon,
-  CSVIcon,
-  DiffIcon,
-  HtmlIcon,
-  HttpIcon,
-  JavaIcon,
-  JsonIcon,
-  LogIcon,
-  MDXIcon,
-  RegexIcon,
-  SQLIcon,
-  SchemeIcon,
-  SquareDashedBottomCodeIcon,
-  TxtIcon,
-  XMLIcon,
-  YamlIcon,
-} from '@windrun-huaiin/base-ui/icons';
-import { baseMarkdownComponents } from '../share/markdown-component-map';
-import { Mermaid, ImageGrid, ImageZoom, MathBlock, InlineMath } from '../heavy';
-import { TrophyCard } from '../mdx/trophy-card';
-import { ZiaCard } from '../mdx/zia-card';
-import { GradientButton } from '../mdx/gradient-button';
-import { ZiaFile, ZiaFolder } from '../mdx/zia-file';
-import { SunoEmbed } from '../mdx/suno-embed';
-
-const defaultCodeLanguageIconMap: Record<string, ReactNode> = {
-  css: <CSSIcon />,
-  csv: <CSVIcon />,
-  diff: <DiffIcon />,
-  html: <HtmlIcon />,
-  http: <HttpIcon />,
-  java: <JavaIcon />,
-  json: <JsonIcon />,
-  jsonc: <SquareDashedBottomCodeIcon />,
-  log: <LogIcon />,
-  mdx: <MDXIcon />,
-  plaintext: <TxtIcon />,
-  regex: <RegexIcon />,
-  scheme: <SchemeIcon />,
-  sql: <SQLIcon />,
-  text: <TxtIcon />,
-  txt: <TxtIcon />,
-  xml: <XMLIcon />,
-  yaml: <YamlIcon />,
-  yml: <YamlIcon />,
-};
-
-function tryToMatchIcon(
-  props: Readonly<MDXProps & { 'data-language'?: string; title?: string }>,
-  iconMap: Record<string, ReactNode>,
-): ReactNode | undefined {
-  let lang: string | undefined;
-
-  const dataLanguage = props['data-language'] as string | undefined;
-
-  if (dataLanguage && dataLanguage.trim() !== '') {
-    lang = dataLanguage.trim().toLowerCase();
-  } else {
-    const title = props.title as string | undefined;
-    if (title) {
-      const titleParts = title.split('.');
-      if (titleParts.length > 1 && titleParts[0] !== '') {
-        const extension = titleParts.pop()?.toLowerCase();
-        if (extension) {
-          lang = extension;
-        }
-      }
-    }
-  }
-
-  if (lang && iconMap[lang]) {
-    return iconMap[lang];
-  }
-
-  return undefined;
-}
-
-export function createBaseMdxComponents(
-  imageFallbackSrc?: string,
-): MDXComponents {
-  return {
-    ...baseMarkdownComponents,
-    img: (props) => (
-      <ImageZoom
-        {...(props as any)}
-        fallbackSrc={imageFallbackSrc}
-      />
-    ),
-  };
-}
-
-export function createCodeMdxComponents(
-  iconMap: Record<string, ReactNode> = {},
-): MDXComponents {
-  const mergedIconMap = {
-    ...defaultCodeLanguageIconMap,
-    ...iconMap,
-  };
-
-  return {
-    pre: (props) => {
-      const customIcon = tryToMatchIcon(props as MDXProps & { 'data-language'?: string; title?: string }, mergedIconMap);
-      return (
-        <CodeBlock
-          {...props}
-          {...(customIcon && { icon: customIcon })}
-        >
-          <Pre>{props.children}</Pre>
-        </CodeBlock>
-      );
-    },
-    CodeBlock,
-    Pre,
-  };
-}
-
-export function createMathMdxComponents(): MDXComponents {
-  return {
-    MathBlock,
-    InlineMath,
-  };
-}
-
-export function createMermaidMdxComponents(
-  watermarkEnabled?: boolean,
-  watermarkText?: string,
-): MDXComponents {
-  return {
-    Mermaid: (props) => (
-      <Mermaid
-        {...props}
-        watermarkEnabled={watermarkEnabled}
-        watermarkText={watermarkText}
-      />
-    ),
-  };
-}
-
-export function createTypeTableMdxComponents(): MDXComponents {
-  return {
-    TypeTable,
-  };
-}
-
-export function createWidgetMdxComponents(
-  cdnBaseUrl?: string,
-  imageFallbackSrc?: string,
-): MDXComponents {
-  return {
-    TrophyCard,
-    ZiaCard,
-    GradientButton,
-    ZiaFile,
-    ZiaFolder,
-    SunoEmbed,
-    ImageGrid: (props) => (
-      <ImageGrid {...props} cdnBaseUrl={cdnBaseUrl} />
-    ),
-    ImageZoom: (props) => (
-      <ImageZoom {...props} fallbackSrc={imageFallbackSrc} />
-    ),
-  };
-}
+export { createBaseMdxComponents } from './features/base';
+export { createCodeMdxComponents } from './features/code';
+export { createMathMdxComponents } from './features/math';
+export { createMermaidMdxComponents } from './features/mermaid';
+export { createTypeTableMdxComponents } from './features/type-table';
+export { createWidgetMdxComponents } from './features/widgets';

package/src/fuma/server/site-mdx-base.tsx

@@ -0,0 +1,62 @@
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import type { MDXComponents } from 'mdx/types';
+import { SiteX } from '../site-x';
+import { createBaseMdxComponents } from './features/base';
+import { createWidgetMdxComponents } from './features/widgets';
+
+export type SiteMdxFeatureComponents = MDXComponents;
+
+export interface SiteMdxBaseOptions {
+  imageFallbackSrc?: string;
+  cdnBaseUrl?: string;
+}
+
+export interface CreateSiteMdxComponentsOptions {
+  baseOptions?: SiteMdxBaseOptions;
+  features?: SiteMdxFeatureComponents[];
+  additionalComponents?: MDXComponents;
+}
+
+const defaultFumaUiComponents: MDXComponents = {
+  Callout,
+  File,
+  Folder,
+  Files,
+  Accordion,
+  Accordions,
+  Tab,
+  Tabs,
+};
+
+export function createSiteMdxBaseComponents(
+  options: SiteMdxBaseOptions = {},
+): MDXComponents {
+  return {
+    ...defaultFumaUiComponents,
+    SiteX,
+    ...createBaseMdxComponents(options.imageFallbackSrc),
+    ...createWidgetMdxComponents(options.cdnBaseUrl, options.imageFallbackSrc),
+  };
+}
+
+export function createSiteMdxComponents(
+  options: CreateSiteMdxComponentsOptions = {},
+) {
+  const {
+    additionalComponents,
+    baseOptions,
+    features = [],
+  } = options;
+
+  return function getMDXComponents(components?: MDXComponents): MDXComponents {
+    return {
+      ...createSiteMdxBaseComponents(baseOptions),
+      ...features.reduce<MDXComponents>((acc, feature) => ({ ...acc, ...feature }), {}),
+      ...additionalComponents,
+      ...components,
+    };
+  };
+}

package/src/fuma/server/site-mdx-components.tsx

@@ -1,10 +1,9 @@
 import type { MDXComponents } from 'mdx/types';
 import type { ReactNode } from 'react';
-import type { SiteMdxFeature } from '@windrun-huaiin/contracts/mdx';
 import {
-  composeSiteMdxComponents,
-  createSiteFeatureComponentMap,
+  createComposedSiteMdxComponents,
   DEFAULT_SITE_MDX_FEATURES,
+  type SiteMdxFeature,
 } from './site-mdx-presets';
 
 export interface SiteMdxComponentsOptions {
@@ -29,18 +28,17 @@ export function createSiteMdxComponents(
     watermarkEnabled,
     watermarkText,
   } = options;
-  const featureMap = createSiteFeatureComponentMap({
-    cdnBaseUrl,
-    iconMap,
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  });
 
   return function getMDXComponents(components?: MDXComponents): MDXComponents {
-    return composeSiteMdxComponents(
+    return createComposedSiteMdxComponents(
       features,
-      featureMap,
+      {
+        cdnBaseUrl,
+        iconMap,
+        imageFallbackSrc,
+        watermarkEnabled,
+        watermarkText,
+      },
       additionalComponents,
       components,
     );

package/src/fuma/server/site-mdx-fallbacks.tsx

@@ -0,0 +1,122 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type MissingFeatureBlockProps = ComponentPropsWithoutRef<'div'> & {
+  feature: string;
+  component: string;
+};
+
+type MissingFeatureInlineProps = ComponentPropsWithoutRef<'span'> & {
+  feature: string;
+  component: string;
+};
+
+type MdxFallbackExtraProps = Record<string, unknown>;
+
+function renderChildren(children: ReactNode) {
+  if (children == null || children === '') {
+    return <span className="italic text-fd-muted-foreground">No fallback content.</span>;
+  }
+
+  return children;
+}
+
+function hasChildren(children: ReactNode) {
+  return children != null && children !== '';
+}
+
+function getDisplayProps(props: MdxFallbackExtraProps) {
+  return Object.entries(props)
+    .filter(([, value]) =>
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean',
+    )
+    .map(([key, value]) => [key, String(value)] as const);
+}
+
+export function MissingMdxFeatureBlock({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureBlockProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <div
+      className={[
+        'my-4 rounded-xl border border-red-300 bg-red-50/80 p-4 text-sm text-red-950 shadow-sm dark:border-red-800/80 dark:bg-red-950/30 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <div className="mb-2 flex flex-wrap items-center gap-2 font-medium">
+        <span>MDX feature not enabled</span>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{feature}</code>
+        <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs dark:bg-red-900/60">{component}</code>
+      </div>
+      {displayProps.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-1.5 text-xs">
+          {displayProps.map(([key, value]) => (
+            <span
+              key={key}
+              className="rounded-md border border-red-200 bg-white/60 px-1.5 py-0.5 font-mono dark:border-red-900/70 dark:bg-black/20"
+            >
+              {key}={value}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="whitespace-pre-wrap break-words rounded-lg border border-red-200 bg-white/70 p-3 font-mono text-xs text-red-900 dark:border-red-900/70 dark:bg-black/20 dark:text-red-100">
+        {renderChildren(children)}
+      </div>
+    </div>
+  );
+}
+
+export function MissingMdxFeatureInline({
+  feature,
+  component,
+  children,
+  className,
+  ...props
+}: MissingFeatureInlineProps) {
+  const displayProps = getDisplayProps(props);
+
+  return (
+    <span
+      className={[
+        'inline-flex max-w-full items-center gap-1 rounded-md border border-red-300 bg-red-50 px-1.5 py-0.5 text-sm text-red-900 dark:border-red-800 dark:bg-red-950/40 dark:text-red-100',
+        className,
+      ].filter(Boolean).join(' ')}
+      title={`MDX feature not enabled: ${feature} (${component})`}
+    >
+      <span className="font-medium">{component}</span>
+      {displayProps.map(([key, value]) => (
+        <span key={key} className="font-mono text-xs opacity-80">
+          {key}={value}
+        </span>
+      ))}
+      {hasChildren(children) && (
+        <span className="font-mono text-xs opacity-80">{children}</span>
+      )}
+    </span>
+  );
+}
+
+export function createMissingMdxFeatureComponents() {
+  return {
+    MathBlock: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="math" component="MathBlock" />
+    ),
+    InlineMath: (props: ComponentPropsWithoutRef<'span'>) => (
+      <MissingMdxFeatureInline {...props} feature="math" component="InlineMath" />
+    ),
+    Mermaid: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="diagram renderer" component="Mermaid" />
+    ),
+    TypeTable: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="API table renderer" component="TypeTable" />
+    ),
+  };
+}

package/src/fuma/server/site-mdx-features/code.ts

@@ -0,0 +1 @@
+export { createCodeMdxComponents } from '../features/code';

package/src/fuma/server/site-mdx-features/math.ts

@@ -0,0 +1 @@
+export { createMathMdxComponents } from '../features/math';

package/src/fuma/server/site-mdx-features/mermaid.ts

@@ -0,0 +1 @@
+export { createMermaidMdxComponents } from '../features/mermaid';

package/src/fuma/server/site-mdx-features/type-table.ts

@@ -0,0 +1 @@
+export { createTypeTableMdxComponents } from '../features/type-table';