@windrun-huaiin/third-ui 23.0.0 → 23.1.1

package/dist/fuma/server/features/code.js

@@ -51,11 +51,10 @@ function tryToMatchIcon(props, iconMap) {
     }
     return undefined;
 }
-function createCodeMdxComponents(iconMap = {}) {
-    const mergedIconMap = Object.assign(Object.assign({}, defaultCodeLanguageIconMap), iconMap);
+function createCodeMdxComponents() {
     return {
         pre: (props) => {
-            const customIcon = tryToMatchIcon(props, mergedIconMap);
+            const customIcon = tryToMatchIcon(props, defaultCodeLanguageIconMap);
             return (jsxRuntime.jsx(CodeBlock, Object.assign({}, props, (customIcon && { icon: customIcon }), { children: jsxRuntime.jsx(Pre, { children: props.children }) })));
         },
         CodeBlock,

package/dist/fuma/server/features/code.mjs

@@ -49,11 +49,10 @@ function tryToMatchIcon(props, iconMap) {
     }
     return undefined;
 }
-function createCodeMdxComponents(iconMap = {}) {
-    const mergedIconMap = Object.assign(Object.assign({}, defaultCodeLanguageIconMap), iconMap);
+function createCodeMdxComponents() {
     return {
         pre: (props) => {
-            const customIcon = tryToMatchIcon(props, mergedIconMap);
+            const customIcon = tryToMatchIcon(props, defaultCodeLanguageIconMap);
             return (jsx(CodeBlock, Object.assign({}, props, (customIcon && { icon: customIcon }), { children: jsx(Pre, { children: props.children }) })));
         },
         CodeBlock,

package/dist/fuma/server/site-mdx-base.js

@@ -2,13 +2,17 @@
 
 var tabs = require('fumadocs-ui/components/tabs');
 var callout = require('fumadocs-ui/components/callout');
+var card = require('fumadocs-ui/components/card');
 var files = require('fumadocs-ui/components/files');
 var accordion = require('fumadocs-ui/components/accordion');
 var siteX = require('../site-x.js');
 var base = require('./features/base.js');
 var widgets = require('./features/widgets.js');
+var siteMdxFallbacks = require('./site-mdx-fallbacks.js');
 
 const defaultFumaUiComponents = {
+    Card: card.Card,
+    Cards: card.Cards,
     Callout: callout.Callout,
     File: files.File,
     Folder: files.Folder,
@@ -24,7 +28,7 @@ function createSiteMdxBaseComponents(options = {}) {
 function createSiteMdxComponents(options = {}) {
     const { additionalComponents, baseOptions, features = [], } = options;
     return function getMDXComponents(components) {
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, createSiteMdxBaseComponents(baseOptions)), features.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature)), {})), additionalComponents), components);
+        return siteMdxFallbacks.withMissingMdxComponentFallback(Object.assign(Object.assign(Object.assign(Object.assign({}, createSiteMdxBaseComponents(baseOptions)), features.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature)), {})), additionalComponents), components));
     };
 }
 

package/dist/fuma/server/site-mdx-base.mjs

@@ -1,12 +1,16 @@
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
 import { Callout } from 'fumadocs-ui/components/callout';
+import { Cards, Card } from 'fumadocs-ui/components/card';
 import { Files, Folder, File } from 'fumadocs-ui/components/files';
 import { Accordions, Accordion } from 'fumadocs-ui/components/accordion';
 import { SiteX } from '../site-x.mjs';
 import { createBaseMdxComponents } from './features/base.mjs';
 import { createWidgetMdxComponents } from './features/widgets.mjs';
+import { withMissingMdxComponentFallback } from './site-mdx-fallbacks.mjs';
 
 const defaultFumaUiComponents = {
+    Card,
+    Cards,
     Callout,
     File,
     Folder,
@@ -22,7 +26,7 @@ function createSiteMdxBaseComponents(options = {}) {
 function createSiteMdxComponents(options = {}) {
     const { additionalComponents, baseOptions, features = [], } = options;
     return function getMDXComponents(components) {
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, createSiteMdxBaseComponents(baseOptions)), features.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature)), {})), additionalComponents), components);
+        return withMissingMdxComponentFallback(Object.assign(Object.assign(Object.assign(Object.assign({}, createSiteMdxBaseComponents(baseOptions)), features.reduce((acc, feature) => (Object.assign(Object.assign({}, acc), feature)), {})), additionalComponents), components));
     };
 }
 

package/dist/fuma/server/site-mdx-fallbacks.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react';
+import type { MDXComponents } from 'mdx/types';
 type MissingFeatureBlockProps = ComponentPropsWithoutRef<'div'> & {
     feature: string;
     component: string;
@@ -14,5 +15,11 @@ export declare function createMissingMdxFeatureComponents(): {
     InlineMath: (props: ComponentPropsWithoutRef<"span">) => import("react/jsx-runtime").JSX.Element;
     Mermaid: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
     TypeTable: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+    CodeBlockTab: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+    CodeBlockTabs: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+    CodeBlockTabsList: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+    CodeBlockTabsTrigger: (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
 };
+export declare function createMissingMdxComponentFallback(component: string): (props: ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare function withMissingMdxComponentFallback(components: MDXComponents): MDXComponents;
 export {};

package/dist/fuma/server/site-mdx-fallbacks.js

@@ -41,9 +41,39 @@ function createMissingMdxFeatureComponents() {
         InlineMath: (props) => (jsxRuntime.jsx(MissingMdxFeatureInline, Object.assign({}, props, { feature: "math", component: "InlineMath" }))),
         Mermaid: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "diagram renderer", component: "Mermaid" }))),
         TypeTable: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "API table renderer", component: "TypeTable" }))),
+        CodeBlockTab: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTab" }))),
+        CodeBlockTabs: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabs" }))),
+        CodeBlockTabsList: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabsList" }))),
+        CodeBlockTabsTrigger: (props) => (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabsTrigger" }))),
     };
 }
+function createMissingMdxComponentFallback(component) {
+    return function MissingMdxComponent(props) {
+        return (jsxRuntime.jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "unknown MDX component", component: component })));
+    };
+}
+function withMissingMdxComponentFallback(components) {
+    return new Proxy(components, {
+        has(target, prop) {
+            if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {
+                return true;
+            }
+            return prop in target;
+        },
+        get(target, prop, receiver) {
+            if (typeof prop !== 'string' || prop in target) {
+                return Reflect.get(target, prop, receiver);
+            }
+            if (/^[A-Z]/.test(prop)) {
+                return createMissingMdxComponentFallback(prop);
+            }
+            return Reflect.get(target, prop, receiver);
+        },
+    });
+}
 
 exports.MissingMdxFeatureBlock = MissingMdxFeatureBlock;
 exports.MissingMdxFeatureInline = MissingMdxFeatureInline;
+exports.createMissingMdxComponentFallback = createMissingMdxComponentFallback;
 exports.createMissingMdxFeatureComponents = createMissingMdxFeatureComponents;
+exports.withMissingMdxComponentFallback = withMissingMdxComponentFallback;

package/dist/fuma/server/site-mdx-fallbacks.mjs

@@ -39,7 +39,35 @@ function createMissingMdxFeatureComponents() {
         InlineMath: (props) => (jsx(MissingMdxFeatureInline, Object.assign({}, props, { feature: "math", component: "InlineMath" }))),
         Mermaid: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "diagram renderer", component: "Mermaid" }))),
         TypeTable: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "API table renderer", component: "TypeTable" }))),
+        CodeBlockTab: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTab" }))),
+        CodeBlockTabs: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabs" }))),
+        CodeBlockTabsList: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabsList" }))),
+        CodeBlockTabsTrigger: (props) => (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "code", component: "CodeBlockTabsTrigger" }))),
     };
 }
+function createMissingMdxComponentFallback(component) {
+    return function MissingMdxComponent(props) {
+        return (jsx(MissingMdxFeatureBlock, Object.assign({}, props, { feature: "unknown MDX component", component: component })));
+    };
+}
+function withMissingMdxComponentFallback(components) {
+    return new Proxy(components, {
+        has(target, prop) {
+            if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {
+                return true;
+            }
+            return prop in target;
+        },
+        get(target, prop, receiver) {
+            if (typeof prop !== 'string' || prop in target) {
+                return Reflect.get(target, prop, receiver);
+            }
+            if (/^[A-Z]/.test(prop)) {
+                return createMissingMdxComponentFallback(prop);
+            }
+            return Reflect.get(target, prop, receiver);
+        },
+    });
+}
 
-export { MissingMdxFeatureBlock, MissingMdxFeatureInline, createMissingMdxFeatureComponents };
+export { MissingMdxFeatureBlock, MissingMdxFeatureInline, createMissingMdxComponentFallback, createMissingMdxFeatureComponents, withMissingMdxComponentFallback };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "23.0.0",
+  "version": "23.1.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -48,11 +48,6 @@
       "import": "./dist/fuma/server.mjs",
       "require": "./dist/fuma/server.js"
     },
-    "./fuma/server/site-mdx-components": {
-      "types": "./dist/fuma/server/site-mdx-components.d.ts",
-      "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",
@@ -93,11 +88,6 @@
       "import": "./dist/fuma/mdx/index.mjs",
       "require": "./dist/fuma/mdx/index.js"
     },
-    "./fuma/server/optional-features": {
-      "types": "./dist/fuma/server/optional-features.d.ts",
-      "import": "./dist/fuma/server/optional-features.mjs",
-      "require": "./dist/fuma/server/optional-features.js"
-    },
     "./fuma/base": {
       "types": "./dist/fuma/base/index.d.ts",
       "import": "./dist/fuma/base/index.mjs",
@@ -147,9 +137,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^23.0.0",
-    "@windrun-huaiin/lib": "^23.0.0",
-    "@windrun-huaiin/contracts": "^23.0.0"
+    "@windrun-huaiin/base-ui": "^23.1.0",
+    "@windrun-huaiin/contracts": "^23.1.0",
+    "@windrun-huaiin/lib": "^23.1.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/fuma/fuma-page-genarator.tsx

@@ -1,9 +1,15 @@
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
-import { ReactNode, ReactElement, cloneElement } from 'react';
+import { ReactNode, ReactElement, cloneElement, type CSSProperties } from 'react';
 import { TocFooterWrapper } from '@third-ui/fuma/mdx/toc-footer-wrapper';
 import type { LLMCopyButtonProps, LLMCopyButton } from '@third-ui/fuma/mdx/toc-base';
 import { getAsNeededLocalizedUrl } from '@windrun-huaiin/lib';
-import { PortableClerkTOC } from '@third-ui/fuma/mdx/toc-clerk-portable';
+import { PortableClerkTOC, PortableClerkTOCTitle } from '@third-ui/fuma/mdx/toc-clerk-portable';
+import { themeSvgIconColor } from '@windrun-huaiin/base-ui/lib';
+
+export type FumaPageTocRenderMode =
+  | 'portable-clerk'
+  | 'fumadocs-clerk'
+  | 'fumadocs-normal';
 
 interface FumaPageParams {
   /* 
@@ -49,6 +55,17 @@ interface FumaPageParams {
   // default true
   showTableOfContent?: boolean;
 
+  /*
+   * Controls which TOC renderer is used.
+   *
+   * - portable-clerk: use @third-ui's custom Clerk-like TOC renderer.
+   * - fumadocs-clerk: use fumadocs-ui's built-in clerk slot renderer.
+   * - fumadocs-normal: use fumadocs-ui's built-in normal slot renderer.
+   *
+   * @defaultValue 'portable-clerk'
+   */
+  tocRenderMode?: FumaPageTocRenderMode;
+
   /*
    * @deprecated Mobile TOC popover is no longer used.
    */
@@ -77,6 +94,7 @@ export function createFumaPage({
   supportedLocales = ['en'],
   showBreadcrumb = true,
   showTableOfContent = true,
+  tocRenderMode = 'portable-clerk',
   showTableOfContentPopover = false,
   localePrefixAsNeeded = true,
   defaultLocale = 'en',
@@ -123,18 +141,15 @@ export function createFumaPage({
     return (
       <DocsPage
         breadcrumb={{enabled: showBreadcrumb}}
-        tableOfContent={{
+        tableOfContent={resolveTableOfContentOptions({
           enabled: showTableOfContent,
-          single: false,
-          component: (
-            <PortableClerkTOC
-              toc={content.toc}
-              footer={tocFooterElement}
-            />
-          ),
-        }}
+          tocRenderMode,
+          toc: content.toc,
+          footer: tocFooterElement,
+        })}
         tableOfContentPopover={{
-          enabled: false,
+          enabled: showTableOfContentPopover && tocRenderMode !== 'portable-clerk',
+          style: tocRenderMode === 'fumadocs-clerk' ? 'clerk' : 'normal',
         }}
         toc={content.toc}
         className="max-sm:pb-16"
@@ -194,3 +209,56 @@ export function createFumaPage({
     generateMetadata,
   };
 } 
+
+function resolveTableOfContentOptions({
+  enabled,
+  tocRenderMode,
+  toc,
+  footer,
+}: {
+  enabled: boolean;
+  tocRenderMode: FumaPageTocRenderMode;
+  toc: any[];
+  footer: ReactNode;
+}) {
+  if (tocRenderMode === 'portable-clerk') {
+    return {
+      enabled,
+      single: false,
+      component: (
+        <PortableClerkTOC
+          toc={toc}
+          footer={footer}
+        />
+      ),
+    };
+  }
+
+  const themedTocProps = {
+    container: {
+      className: '[--color-fd-primary:var(--third-ui-toc-primary)] [--color-fd-primary-foreground:var(--third-ui-toc-primary-foreground)] [&_#toc-title]:hidden',
+      style: {
+        '--third-ui-toc-primary': themeSvgIconColor,
+        '--third-ui-toc-primary-foreground': '#ffffff',
+      } as CSSProperties,
+    },
+    header: <PortableClerkTOCTitle />,
+    footer,
+  };
+
+  if (tocRenderMode === 'fumadocs-clerk') {
+    return {
+      enabled,
+      single: false,
+      style: 'clerk',
+      ...themedTocProps,
+    } as const;
+  }
+
+  return {
+    enabled,
+    single: false,
+    style: 'normal',
+    ...themedTocProps,
+  } as const;
+}

package/src/fuma/mdx/toc-clerk-portable.tsx

@@ -5,12 +5,12 @@
  * https://github.com/fuma-nama/fumadocs/blob/dev/packages/radix-ui/src/components/toc/clerk.tsx
  */
 import * as Primitive from 'fumadocs-core/toc';
+import { I18nLabel } from 'fumadocs-ui/contexts/i18n';
 import {
-  TOC as PageTOC,
-  TOCPopover as PageTOCPopover,
-  type TOCProps as PageTOCProps,
-  type TOCPopoverProps as PageTOCPopoverProps,
-} from 'fumadocs-ui/layouts/docs/page/slots/toc';
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from 'fumadocs-ui/components/ui/collapsible';
 import {
   type ComponentProps,
   type ReactNode,
@@ -24,6 +24,7 @@ import {
   themeIconColor,
   themeSvgIconColor,
 } from '@windrun-huaiin/base-ui/lib';
+import { ChevronDownIcon, NotepadTextIcon } from '@windrun-huaiin/base-ui/icons';
 
 type TOCItemType = Primitive.TOCItemType;
 
@@ -84,20 +85,20 @@ export function PortableClerkTOC({
   className,
 }: PortableClerkTOCProps) {
   return (
-    <PageTOC
-      style="clerk"
-      container={{ className }}
-      header={
-        <>
-          {header}
-          {title ?? null}
-        </>
-      }
-      footer={footer}
-      list={{
-        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
-      } as PageTOCProps['list']}
-    />
+    <div
+      id="nd-toc"
+      className={cn(
+        'sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden',
+        className,
+      )}
+    >
+      {header}
+      {title ?? <PortableClerkTOCTitle />}
+      <PortableClerkTOCScrollArea>
+        <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
+      </PortableClerkTOCScrollArea>
+      {footer}
+    </div>
   );
 }
 
@@ -108,14 +109,51 @@ export function PortableClerkTOCPopover({
   emptyLabel = 'No headings',
 }: Omit<PortableClerkTOCProps, 'title' | 'className'>) {
   return (
-    <PageTOCPopover
-      style="clerk"
-      header={header}
-      footer={footer}
-      list={{
-        children: <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />,
-      } as PageTOCPopoverProps['list']}
-    />
+    <Collapsible
+      data-toc-popover=""
+      className="sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]"
+    >
+      <header className="border-b bg-fd-background/80 backdrop-blur-sm transition-colors">
+        <CollapsibleTrigger
+          data-toc-popover-trigger=""
+          className="flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6"
+        >
+          <NotepadTextIcon className="shrink-0" />
+          <span className="flex-1 truncate">
+            <I18nLabel label="toc" />
+          </span>
+          <ChevronDownIcon className="shrink-0 transition-transform mx-0.5" />
+        </CollapsibleTrigger>
+        <CollapsibleContent data-toc-popover-content="">
+          <div className="flex max-h-[50vh] flex-col px-4 md:px-6">
+            {header}
+            <PortableClerkTOCScrollArea>
+              <PortableClerkTOCItems toc={toc} emptyLabel={emptyLabel} />
+            </PortableClerkTOCScrollArea>
+            {footer}
+          </div>
+        </CollapsibleContent>
+      </header>
+    </Collapsible>
+  );
+}
+
+export function PortableClerkTOCTitle({
+  className,
+  ...props
+}: ComponentProps<'h3'>) {
+  return (
+    <h3
+      id="toc-title"
+      className={cn(
+        'inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground',
+        className,
+      )}
+      {...props}
+    >
+      <NotepadTextIcon className={cn('size-4', themeIconColor)} />
+      <I18nLabel label="toc" />
+    </h3>
   );
 }
 

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

@@ -78,17 +78,13 @@ function tryToMatchIcon(
   return undefined;
 }
 
-export function createCodeMdxComponents(
-  iconMap: Record<string, ReactNode> = {},
-): MDXComponents {
-  const mergedIconMap = {
-    ...defaultCodeLanguageIconMap,
-    ...iconMap,
-  };
-
+export function createCodeMdxComponents(): MDXComponents {
   return {
     pre: (props) => {
-      const customIcon = tryToMatchIcon(props as MDXProps & { 'data-language'?: string; title?: string }, mergedIconMap);
+      const customIcon = tryToMatchIcon(
+        props as MDXProps & { 'data-language'?: string; title?: string },
+        defaultCodeLanguageIconMap,
+      );
       return (
         <CodeBlock
           {...props}

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

@@ -1,11 +1,13 @@
 import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 import { Callout } from 'fumadocs-ui/components/callout';
+import { Card, Cards } from 'fumadocs-ui/components/card';
 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';
+import { withMissingMdxComponentFallback } from './site-mdx-fallbacks';
 
 export type SiteMdxFeatureComponents = MDXComponents;
 
@@ -21,6 +23,8 @@ export interface CreateSiteMdxComponentsOptions {
 }
 
 const defaultFumaUiComponents: MDXComponents = {
+  Card,
+  Cards,
   Callout,
   File,
   Folder,
@@ -52,11 +56,11 @@ export function createSiteMdxComponents(
   } = options;
 
   return function getMDXComponents(components?: MDXComponents): MDXComponents {
-    return {
+    return withMissingMdxComponentFallback({
       ...createSiteMdxBaseComponents(baseOptions),
       ...features.reduce<MDXComponents>((acc, feature) => ({ ...acc, ...feature }), {}),
       ...additionalComponents,
       ...components,
-    };
+    });
   };
 }

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

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { MDXComponents } from 'mdx/types';
 
 type MissingFeatureBlockProps = ComponentPropsWithoutRef<'div'> & {
   feature: string;
@@ -118,5 +119,54 @@ export function createMissingMdxFeatureComponents() {
     TypeTable: (props: ComponentPropsWithoutRef<'div'>) => (
       <MissingMdxFeatureBlock {...props} feature="API table renderer" component="TypeTable" />
     ),
+    CodeBlockTab: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTab" />
+    ),
+    CodeBlockTabs: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabs" />
+    ),
+    CodeBlockTabsList: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabsList" />
+    ),
+    CodeBlockTabsTrigger: (props: ComponentPropsWithoutRef<'div'>) => (
+      <MissingMdxFeatureBlock {...props} feature="code" component="CodeBlockTabsTrigger" />
+    ),
+  };
+}
+
+export function createMissingMdxComponentFallback(component: string) {
+  return function MissingMdxComponent(props: ComponentPropsWithoutRef<'div'>) {
+    return (
+      <MissingMdxFeatureBlock
+        {...props}
+        feature="unknown MDX component"
+        component={component}
+      />
+    );
   };
 }
+
+export function withMissingMdxComponentFallback(
+  components: MDXComponents,
+): MDXComponents {
+  return new Proxy(components, {
+    has(target, prop) {
+      if (typeof prop === 'string' && /^[A-Z]/.test(prop)) {
+        return true;
+      }
+
+      return prop in target;
+    },
+    get(target, prop, receiver) {
+      if (typeof prop !== 'string' || prop in target) {
+        return Reflect.get(target, prop, receiver);
+      }
+
+      if (/^[A-Z]/.test(prop)) {
+        return createMissingMdxComponentFallback(prop);
+      }
+
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+}

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

@@ -1,6 +0,0 @@
-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-components.tsx

@@ -1,46 +0,0 @@
-import type { MDXComponents } from 'mdx/types';
-import type { ReactNode } from 'react';
-import {
-  createComposedSiteMdxComponents,
-  DEFAULT_SITE_MDX_FEATURES,
-  type SiteMdxFeature,
-} from './site-mdx-presets';
-
-export interface SiteMdxComponentsOptions {
-  imageFallbackSrc?: string;
-  cdnBaseUrl?: string;
-  watermarkEnabled?: boolean;
-  watermarkText?: string;
-  additionalComponents?: MDXComponents;
-  iconMap?: Record<string, ReactNode>;
-  features?: SiteMdxFeature[];
-}
-
-export function createSiteMdxComponents(
-  options: SiteMdxComponentsOptions,
-) {
-  const {
-    additionalComponents,
-    cdnBaseUrl,
-    features = DEFAULT_SITE_MDX_FEATURES,
-    iconMap = {},
-    imageFallbackSrc,
-    watermarkEnabled,
-    watermarkText,
-  } = options;
-
-  return function getMDXComponents(components?: MDXComponents): MDXComponents {
-    return createComposedSiteMdxComponents(
-      features,
-      {
-        cdnBaseUrl,
-        iconMap,
-        imageFallbackSrc,
-        watermarkEnabled,
-        watermarkText,
-      },
-      additionalComponents,
-      components,
-    );
-  };
-}