@windrun-huaiin/third-ui 22.0.0 → 23.0.0

package/dist/fuma/share/markdown-component-map.mjs

@@ -1,77 +1,91 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import { ImageZoom } from '../heavy/image-zoom.mjs';
-import 'katex';
-import '@windrun-huaiin/base-ui/icons';
-import 'next-themes';
-import 'roughjs';
-import 'react';
-import '@windrun-huaiin/base-ui/lib';
+import { lazy } from 'react';
 
+const ImageZoom = lazy(() => import('../heavy/image-zoom.mjs').then((mod) => ({ default: mod.ImageZoom })));
 function normalizeMarkdownProps(props) {
     const { class: legacyClassName, className } = props, restProps = __rest(props, ["class", "className"]);
     return Object.assign(Object.assign({}, restProps), { className: cn(typeof legacyClassName === 'string' ? legacyClassName : undefined, className) });
 }
-const baseMarkdownComponents = Object.assign(Object.assign({}, defaultMdxComponents), { a: (_a) => {
+const baseMarkdownComponents = {
+    a: (_a) => {
         var _b, _c;
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("a", Object.assign({}, normalizeMarkdownProps(props), { className: cn('underline underline-offset-4 transition hover:opacity-80', normalizeMarkdownProps(props).className, className), target: (_b = props.target) !== null && _b !== void 0 ? _b : '_blank', rel: (_c = props.rel) !== null && _c !== void 0 ? _c : 'noreferrer noopener' })));
-    }, blockquote: (_a) => {
+    },
+    blockquote: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("blockquote", Object.assign({}, normalizeMarkdownProps(props), { className: cn('border-l-2 border-border pl-4 text-muted-foreground', normalizeMarkdownProps(props).className, className) })));
-    }, code: (_a) => {
+    },
+    code: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("code", Object.assign({}, normalizeMarkdownProps(props), { className: cn('rounded-md bg-muted px-1.5 py-0.5 font-mono text-[0.9em]', normalizeMarkdownProps(props).className, className) })));
-    }, h1: (_a) => {
+    },
+    h1: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h1", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-2xl font-semibold tracking-tight', normalizeMarkdownProps(props).className, className) })));
-    }, h2: (_a) => {
+    },
+    h2: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h2", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-xl font-semibold tracking-tight', normalizeMarkdownProps(props).className, className) })));
-    }, h3: (_a) => {
+    },
+    h3: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h3", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-lg font-semibold', normalizeMarkdownProps(props).className, className) })));
-    }, h4: (_a) => {
+    },
+    h4: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h4", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-base font-semibold', normalizeMarkdownProps(props).className, className) })));
-    }, h5: (_a) => {
+    },
+    h5: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h5", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-sm font-semibold', normalizeMarkdownProps(props).className, className) })));
-    }, h6: (_a) => {
+    },
+    h6: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("h6", Object.assign({}, normalizeMarkdownProps(props), { className: cn('text-sm font-semibold', normalizeMarkdownProps(props).className, className) })));
-    }, hr: (_a) => {
+    },
+    hr: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("hr", Object.assign({}, normalizeMarkdownProps(props), { className: cn('border-border', normalizeMarkdownProps(props).className, className) })));
-    }, img: (_a) => {
+    },
+    img: (_a) => {
         var { className, alt, src } = _a, props = __rest(_a, ["className", "alt", "src"]);
         return (jsx(ImageZoom, Object.assign({}, normalizeMarkdownProps(props), { alt: typeof alt === 'string' ? alt : '', src: typeof src === 'string' ? src : '', className: cn('overflow-hidden rounded-2xl', normalizeMarkdownProps(props).className, className) })));
-    }, li: (_a) => {
+    },
+    li: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("li", Object.assign({}, normalizeMarkdownProps(props), { className: cn('leading-7', normalizeMarkdownProps(props).className, className) })));
-    }, ol: (_a) => {
+    },
+    ol: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("ol", Object.assign({}, normalizeMarkdownProps(props), { className: cn('list-decimal space-y-2 pl-6', normalizeMarkdownProps(props).className, className) })));
-    }, p: (_a) => {
+    },
+    p: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("p", Object.assign({}, normalizeMarkdownProps(props), { className: cn('leading-7', normalizeMarkdownProps(props).className, className) })));
-    }, pre: (_a) => {
+    },
+    pre: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("pre", Object.assign({}, 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: (_a) => {
+    },
+    table: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("div", { className: "overflow-x-auto", children: jsx("table", Object.assign({}, normalizeMarkdownProps(props), { className: cn('w-full border-collapse text-sm', normalizeMarkdownProps(props).className, className) })) }));
-    }, td: (_a) => {
+    },
+    td: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("td", Object.assign({}, normalizeMarkdownProps(props), { className: cn('border border-border px-3 py-2 align-top', normalizeMarkdownProps(props).className, className) })));
-    }, th: (_a) => {
+    },
+    th: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("th", Object.assign({}, normalizeMarkdownProps(props), { className: cn('border border-border px-3 py-2 text-left font-medium', normalizeMarkdownProps(props).className, className) })));
-    }, ul: (_a) => {
+    },
+    ul: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
         return (jsx("ul", Object.assign({}, normalizeMarkdownProps(props), { className: cn('list-disc space-y-2 pl-6', normalizeMarkdownProps(props).className, className) })));
-    } });
+    },
+};
 
 export { baseMarkdownComponents };

package/dist/lib/seo-metadata.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var tslib = require('tslib');
+var server = require('next-intl/server');
+var lib = require('@windrun-huaiin/lib');
+
+const DEFAULT_SITE_ICONS = [
+    { rel: 'icon', type: 'image/png', sizes: '16x16', url: '/favicon-16x16.png' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
+    { rel: 'icon', type: 'image/ico', url: '/favicon.ico' },
+    { rel: 'apple-touch-icon', sizes: '180x180', url: '/favicon-180x180.png' },
+    { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
+];
+function createLocalizedSiteMetadata(options) {
+    return tslib.__awaiter(this, void 0, void 0, function* () {
+        const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+        const t = yield server.getTranslations({ locale, namespace: 'home' });
+        return {
+            title: t('webTitle'),
+            description: t('webDescription'),
+            keywords: t('keywords'),
+            alternates: {
+                canonical: `${baseUrl}${lib.getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
+                languages: Object.fromEntries(locales.map((siteLocale) => [
+                    siteLocale,
+                    `${baseUrl}${lib.getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
+                ])),
+            },
+            icons: DEFAULT_SITE_ICONS,
+        };
+    });
+}
+
+exports.createLocalizedSiteMetadata = createLocalizedSiteMetadata;

package/dist/lib/seo-metadata.mjs

@@ -0,0 +1,32 @@
+import { __awaiter } from 'tslib';
+import { getTranslations } from 'next-intl/server';
+import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
+
+const DEFAULT_SITE_ICONS = [
+    { rel: 'icon', type: 'image/png', sizes: '16x16', url: '/favicon-16x16.png' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', url: '/favicon-32x32.png' },
+    { rel: 'icon', type: 'image/ico', url: '/favicon.ico' },
+    { rel: 'apple-touch-icon', sizes: '180x180', url: '/favicon-180x180.png' },
+    { rel: 'android-chrome', sizes: '512x512', url: '/favicon-512x512.png' },
+];
+function createLocalizedSiteMetadata(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { baseUrl, defaultLocale, locale, localePrefixAsNeeded, locales } = options;
+        const t = yield getTranslations({ locale, namespace: 'home' });
+        return {
+            title: t('webTitle'),
+            description: t('webDescription'),
+            keywords: t('keywords'),
+            alternates: {
+                canonical: `${baseUrl}${getAsNeededLocalizedUrl(locale, '/', localePrefixAsNeeded, defaultLocale)}`,
+                languages: Object.fromEntries(locales.map((siteLocale) => [
+                    siteLocale,
+                    `${baseUrl}${getAsNeededLocalizedUrl(siteLocale, '/', localePrefixAsNeeded, defaultLocale)}`,
+                ])),
+            },
+            icons: DEFAULT_SITE_ICONS,
+        };
+    });
+}
+
+export { createLocalizedSiteMetadata };

package/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "22.0.0",
+  "version": "23.0.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "exports": {
     "./clerk": {
       "types": "./dist/clerk/index.d.ts",
@@ -56,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",
@@ -125,9 +147,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^22.0.0",
-    "@windrun-huaiin/contracts": "^22.0.0",
-    "@windrun-huaiin/lib": "^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';