cmx-sdk 0.2.12 → 0.2.14

package/dist/index.js

@@ -365,32 +365,64 @@ var icons = {
   tip: Lightbulb
 };
 var styles = {
-  info: "cmx-mdx__callout--info bg-blue-50 border-blue-200 text-blue-800",
-  warning: "cmx-mdx__callout--warning bg-yellow-50 border-yellow-200 text-yellow-800",
-  error: "cmx-mdx__callout--error bg-red-50 border-red-200 text-red-800",
-  success: "cmx-mdx__callout--success bg-green-50 border-green-200 text-green-800",
-  tip: "cmx-mdx__callout--tip bg-purple-50 border-purple-200 text-purple-800"
-};
-var iconColors = {
-  info: "text-blue-500",
-  warning: "text-yellow-500",
-  error: "text-red-500",
-  success: "text-green-500",
-  tip: "text-purple-500"
+  info: "cmx-mdx__callout--info",
+  warning: "cmx-mdx__callout--warning",
+  error: "cmx-mdx__callout--error",
+  success: "cmx-mdx__callout--success",
+  tip: "cmx-mdx__callout--tip"
 };
 function Callout({ type = "info", title, children }) {
   const Icon = icons[type];
-  return /* @__PURE__ */ jsx("div", { className: `cmx-mdx__callout my-4 p-4 border rounded-lg ${styles[type]}`, children: /* @__PURE__ */ jsxs("div", { className: "cmx-mdx__callout-content flex gap-3", children: [
-    /* @__PURE__ */ jsx(Icon, { className: `cmx-mdx__callout-icon w-5 h-5 flex-shrink-0 mt-0.5 ${iconColors[type]}` }),
+  return /* @__PURE__ */ jsx("div", { className: `cmx-mdx__callout ${styles[type]}`, children: /* @__PURE__ */ jsxs("div", { className: "cmx-mdx__callout-content flex gap-3", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "cmx-mdx__callout-icon flex-shrink-0" }),
     /* @__PURE__ */ jsxs("div", { className: "cmx-mdx__callout-body flex-1", children: [
-      title && /* @__PURE__ */ jsx("p", { className: "cmx-mdx__callout-title font-semibold mb-1", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "cmx-mdx__callout-text text-sm", children })
+      title && /* @__PURE__ */ jsx("p", { className: "cmx-mdx__callout-title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "cmx-mdx__callout-text", children })
     ] })
   ] }) });
 }
 
+// src/mdx/components/basic/Button.tsx
+import Link from "next/link";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variants = {
+  primary: "cmx-mdx__button--primary",
+  secondary: "cmx-mdx__button--secondary",
+  outline: "cmx-mdx__button--outline"
+};
+function Button({ href, children, variant = "primary" }) {
+  const isExternal = href.startsWith("http");
+  const className = `cmx-mdx__button ${variants[variant]}`;
+  if (isExternal) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(Link, { href, className, children });
+}
+
 // src/mdx/components/basic/Embed.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Embed({ url }) {
+  return /* @__PURE__ */ jsx3("div", { className: "cmx-mdx__embed cmx-mdx__embed--generic aspect-video", children: /* @__PURE__ */ jsx3(
+    "iframe",
+    {
+      src: url,
+      className: "cmx-mdx__embed-iframe w-full h-full",
+      allowFullScreen: true
+    }
+  ) });
+}
+
+// src/mdx/components/basic/YouTube.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function extractYouTubeId(url) {
   const patterns = [
     /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/
@@ -401,97 +433,446 @@ function extractYouTubeId(url) {
   }
   return null;
 }
-function Embed({ url, type = "generic" }) {
-  if (type === "youtube") {
-    const videoId = extractYouTubeId(url);
-    if (videoId) {
-      return /* @__PURE__ */ jsx2("div", { className: "cmx-mdx__embed cmx-mdx__embed--youtube my-4 aspect-video", children: /* @__PURE__ */ jsx2(
-        "iframe",
-        {
-          src: `https://www.youtube.com/embed/${videoId}`,
-          className: "cmx-mdx__embed-iframe w-full h-full rounded-lg",
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-          allowFullScreen: true
-        }
-      ) });
-    }
+function YouTube({ url, start }) {
+  const videoId = extractYouTubeId(url);
+  if (!videoId) {
+    return /* @__PURE__ */ jsx4("div", { className: "cmx-mdx__youtube cmx-mdx__youtube--error", children: /* @__PURE__ */ jsxs2("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306AYouTube URL: ",
+      url
+    ] }) });
   }
-  if (type === "twitter") {
-    return /* @__PURE__ */ jsxs2("div", { className: "cmx-mdx__embed cmx-mdx__embed--twitter my-4 border border-gray-200 rounded-lg p-4 bg-gray-50", children: [
-      /* @__PURE__ */ jsx2("p", { className: "cmx-mdx__embed-label text-sm text-gray-500", children: "Twitter\u57CB\u3081\u8FBC\u307F" }),
-      /* @__PURE__ */ jsx2(
+  const embedUrl = `https://www.youtube.com/embed/${videoId}${start ? `?start=${start}` : ""}`;
+  return /* @__PURE__ */ jsx4("div", { className: "cmx-mdx__youtube aspect-video", children: /* @__PURE__ */ jsx4(
+    "iframe",
+    {
+      src: embedUrl,
+      className: "cmx-mdx__youtube-iframe w-full h-full",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true
+    }
+  ) });
+}
+
+// src/mdx/components/basic/Twitter.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Twitter({ url }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "cmx-mdx__twitter", children: [
+    /* @__PURE__ */ jsx5("p", { className: "cmx-mdx__twitter-label", children: "Twitter / X" }),
+    /* @__PURE__ */ jsx5(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "cmx-mdx__twitter-link break-all",
+        children: url
+      }
+    )
+  ] });
+}
+
+// src/mdx/components/basic/Instagram.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Instagram({ url }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "cmx-mdx__instagram", children: [
+    /* @__PURE__ */ jsx6("p", { className: "cmx-mdx__instagram-label", children: "Instagram" }),
+    /* @__PURE__ */ jsx6(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "cmx-mdx__instagram-link break-all",
+        children: url
+      }
+    )
+  ] });
+}
+
+// src/mdx/components/basic/TikTok.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function extractTikTokVideoId(url) {
+  const match = url.match(/\/video\/(\d+)/);
+  return match ? match[1] : null;
+}
+function TikTok({ url }) {
+  const videoId = extractTikTokVideoId(url);
+  if (!videoId) {
+    return /* @__PURE__ */ jsxs5("div", { className: "cmx-mdx__tiktok cmx-mdx__tiktok--error", children: [
+      /* @__PURE__ */ jsx7("p", { className: "cmx-mdx__tiktok-label", children: "TikTok" }),
+      /* @__PURE__ */ jsx7(
         "a",
         {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "cmx-mdx__embed-link text-blue-500 hover:underline text-sm",
+          className: "cmx-mdx__tiktok-link break-all",
           children: url
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsx2("div", { className: "cmx-mdx__embed cmx-mdx__embed--generic my-4 aspect-video", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx7("div", { className: "cmx-mdx__tiktok", children: /* @__PURE__ */ jsx7(
     "iframe",
     {
-      src: url,
-      className: "cmx-mdx__embed-iframe w-full h-full rounded-lg border border-gray-200",
-      allowFullScreen: true
+      src: `https://www.tiktok.com/embed/v2/${videoId}`,
+      className: "cmx-mdx__tiktok-iframe w-full border-0",
+      style: { height: 740, maxWidth: 325 },
+      allowFullScreen: true,
+      allow: "encrypted-media"
     }
   ) });
 }
 
-// src/mdx/components/basic/Button.tsx
-import Link from "next/link";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var variants = {
-  primary: "cmx-mdx__button--primary bg-blue-600 text-white hover:bg-blue-700",
-  secondary: "cmx-mdx__button--secondary bg-gray-600 text-white hover:bg-gray-700",
-  outline: "cmx-mdx__button--outline border border-gray-300 text-gray-700 hover:bg-gray-50"
-};
-function Button({ href, children, variant = "primary" }) {
-  const isExternal = href.startsWith("http");
-  const className = `cmx-mdx__button inline-block px-4 py-2 rounded-lg font-medium transition-colors ${variants[variant]}`;
-  if (isExternal) {
-    return /* @__PURE__ */ jsx3(
+// src/mdx/components/basic/Bluesky.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Bluesky({ url }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "cmx-mdx__bluesky", children: [
+    /* @__PURE__ */ jsx8("p", { className: "cmx-mdx__bluesky-label", children: "Bluesky" }),
+    /* @__PURE__ */ jsx8(
       "a",
       {
-        href,
+        href: url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className,
-        children
+        className: "cmx-mdx__bluesky-link break-all",
+        children: url
       }
-    );
+    )
+  ] });
+}
+
+// src/mdx/components/basic/Vimeo.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function extractVimeoId(url) {
+  const match = url.match(/vimeo\.com\/(\d+)/);
+  return match ? match[1] : null;
+}
+function Vimeo({ url }) {
+  const videoId = extractVimeoId(url);
+  if (!videoId) {
+    return /* @__PURE__ */ jsx9("div", { className: "cmx-mdx__vimeo cmx-mdx__vimeo--error", children: /* @__PURE__ */ jsxs7("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306AVimeo URL: ",
+      url
+    ] }) });
   }
-  return /* @__PURE__ */ jsx3(Link, { href, className, children });
+  return /* @__PURE__ */ jsx9("div", { className: "cmx-mdx__vimeo aspect-video", children: /* @__PURE__ */ jsx9(
+    "iframe",
+    {
+      src: `https://player.vimeo.com/video/${videoId}`,
+      className: "cmx-mdx__vimeo-iframe w-full h-full",
+      allow: "autoplay; fullscreen; picture-in-picture",
+      allowFullScreen: true
+    }
+  ) });
+}
+
+// src/mdx/components/basic/Spotify.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function toSpotifyEmbedUrl(url) {
+  const match = url.match(/open\.spotify\.com\/(track|album|playlist|episode|show)\/([^?#]+)/);
+  if (!match) return null;
+  return `https://open.spotify.com/embed/${match[1]}/${match[2]}`;
+}
+function Spotify({ url, theme = "light" }) {
+  const embedUrl = toSpotifyEmbedUrl(url);
+  if (!embedUrl) {
+    return /* @__PURE__ */ jsx10("div", { className: "cmx-mdx__spotify cmx-mdx__spotify--error", children: /* @__PURE__ */ jsxs8("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306ASpotify URL: ",
+      url
+    ] }) });
+  }
+  const src = `${embedUrl}?theme=${theme === "dark" ? "0" : "1"}`;
+  return /* @__PURE__ */ jsx10("div", { className: "cmx-mdx__spotify", children: /* @__PURE__ */ jsx10(
+    "iframe",
+    {
+      src,
+      className: "cmx-mdx__spotify-iframe w-full border-0",
+      height: 152,
+      allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
+      loading: "lazy"
+    }
+  ) });
+}
+
+// src/mdx/components/basic/Gist.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function extractGistId(url) {
+  const match = url.match(/gist\.github\.com\/([^/]+)\/([a-f0-9]+)/);
+  if (!match) return null;
+  return { user: match[1], id: match[2] };
+}
+function Gist({ url }) {
+  const gist = extractGistId(url);
+  if (!gist) {
+    return /* @__PURE__ */ jsx11("div", { className: "cmx-mdx__gist cmx-mdx__gist--error", children: /* @__PURE__ */ jsxs9("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306AGist URL: ",
+      url
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx11("div", { className: "cmx-mdx__gist", children: /* @__PURE__ */ jsx11(
+    "iframe",
+    {
+      src: `https://gist.github.com/${gist.user}/${gist.id}.pibb`,
+      className: "cmx-mdx__gist-iframe w-full",
+      style: { minHeight: 200 }
+    }
+  ) });
+}
+
+// src/mdx/components/basic/CodePen.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function toCodePenEmbedUrl(url) {
+  const match = url.match(/codepen\.io\/([^/]+)\/(?:pen|full|details)\/([^?#]+)/);
+  if (!match) return null;
+  return `https://codepen.io/${match[1]}/embed/${match[2]}`;
+}
+function CodePen({ url, height = 400, defaultTab = "result" }) {
+  const embedUrl = toCodePenEmbedUrl(url);
+  if (!embedUrl) {
+    return /* @__PURE__ */ jsx12("div", { className: "cmx-mdx__codepen cmx-mdx__codepen--error", children: /* @__PURE__ */ jsxs10("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306ACodePen URL: ",
+      url
+    ] }) });
+  }
+  const src = `${embedUrl}?default-tab=${defaultTab}&editable=true`;
+  return /* @__PURE__ */ jsx12("div", { className: "cmx-mdx__codepen", children: /* @__PURE__ */ jsx12(
+    "iframe",
+    {
+      src,
+      className: "cmx-mdx__codepen-iframe w-full",
+      style: { height },
+      loading: "lazy",
+      allowFullScreen: true
+    }
+  ) });
+}
+
+// src/mdx/components/basic/CodeSandbox.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function toCodeSandboxEmbedUrl(url) {
+  const match = url.match(/codesandbox\.io\/(?:s|p)\/([^?#]+)/);
+  if (!match) return null;
+  return `https://codesandbox.io/embed/${match[1]}`;
+}
+function CodeSandbox({ url, height = 500 }) {
+  const embedUrl = toCodeSandboxEmbedUrl(url);
+  if (!embedUrl) {
+    return /* @__PURE__ */ jsx13("div", { className: "cmx-mdx__codesandbox cmx-mdx__codesandbox--error", children: /* @__PURE__ */ jsxs11("p", { className: "cmx-mdx__error-text", children: [
+      "\u7121\u52B9\u306ACodeSandbox URL: ",
+      url
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx13("div", { className: "cmx-mdx__codesandbox", children: /* @__PURE__ */ jsx13(
+    "iframe",
+    {
+      src: embedUrl,
+      className: "cmx-mdx__codesandbox-iframe w-full",
+      style: { height },
+      allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",
+      sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    }
+  ) });
+}
+
+// src/mdx/components/basic/GoogleMap.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function GoogleMap({ url, height = 450 }) {
+  let embedUrl = url;
+  if (!url.includes("/maps/embed")) {
+    embedUrl = url;
+  }
+  return /* @__PURE__ */ jsx14("div", { className: "cmx-mdx__googlemap", children: /* @__PURE__ */ jsx14(
+    "iframe",
+    {
+      src: embedUrl,
+      className: "cmx-mdx__googlemap-iframe w-full",
+      style: { height },
+      allowFullScreen: true,
+      loading: "lazy",
+      referrerPolicy: "no-referrer-when-downgrade"
+    }
+  ) });
+}
+
+// src/mdx/components/basic/Details.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function Details({ summary, children }) {
+  return /* @__PURE__ */ jsxs12("details", { className: "cmx-mdx__details", children: [
+    /* @__PURE__ */ jsx15("summary", { className: "cmx-mdx__details-summary cursor-pointer select-none", children: summary }),
+    /* @__PURE__ */ jsx15("div", { className: "cmx-mdx__details-content", children })
+  ] });
+}
+
+// src/mdx/components/basic/Tabs.tsx
+import { useState, Children, isValidElement } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function Tabs({ children }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const tabs = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.props.label) {
+      const tabChild = child;
+      tabs.push({
+        label: tabChild.props.label,
+        content: tabChild.props.children
+      });
+    }
+  });
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsxs13("div", { className: "cmx-mdx__tabs overflow-hidden", children: [
+    /* @__PURE__ */ jsx16("div", { className: "cmx-mdx__tabs-header flex", role: "tablist", children: tabs.map((tab, i) => /* @__PURE__ */ jsx16(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": i === activeIndex,
+        className: `cmx-mdx__tabs-button ${i === activeIndex ? "cmx-mdx__tabs-button--active" : ""}`,
+        onClick: () => setActiveIndex(i),
+        children: tab.label
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx16("div", { className: "cmx-mdx__tabs-content", role: "tabpanel", children: tabs[activeIndex]?.content })
+  ] });
+}
+function Tab({ children }) {
+  return /* @__PURE__ */ jsx16("div", { className: "cmx-mdx__tab", children });
+}
+
+// src/mdx/components/basic/Columns.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var gridClasses = {
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+};
+function Columns({ cols = 2, children }) {
+  const gridClass = gridClasses[cols] || gridClasses[2];
+  return /* @__PURE__ */ jsx17("div", { className: `cmx-mdx__columns grid gap-4 ${gridClass}`, children });
+}
+function Column({ children }) {
+  return /* @__PURE__ */ jsx17("div", { className: "cmx-mdx__column", children });
+}
+
+// src/mdx/components/basic/Audio.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Audio({ src, title }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "cmx-mdx__audio", children: [
+    title && /* @__PURE__ */ jsx18("p", { className: "cmx-mdx__audio-title", children: title }),
+    /* @__PURE__ */ jsx18(
+      "audio",
+      {
+        src,
+        controls: true,
+        className: "cmx-mdx__audio-player w-full",
+        preload: "metadata"
+      }
+    )
+  ] });
+}
+
+// src/mdx/components/basic/Video.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function Video({ src, title, poster }) {
+  return /* @__PURE__ */ jsxs15("div", { className: "cmx-mdx__video", children: [
+    title && /* @__PURE__ */ jsx19("p", { className: "cmx-mdx__video-title", children: title }),
+    /* @__PURE__ */ jsx19(
+      "video",
+      {
+        src,
+        poster,
+        controls: true,
+        className: "cmx-mdx__video-player w-full",
+        preload: "metadata"
+      }
+    )
+  ] });
+}
+
+// src/mdx/components/basic/FileDownload.tsx
+import { Download } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+function FileDownload({ url, filename, size }) {
+  const displayName = filename || url.split("/").pop() || "\u30D5\u30A1\u30A4\u30EB";
+  return /* @__PURE__ */ jsxs16("div", { className: "cmx-mdx__filedownload flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx20(Download, { className: "cmx-mdx__filedownload-icon flex-shrink-0" }),
+    /* @__PURE__ */ jsxs16("div", { className: "cmx-mdx__filedownload-info flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx20(
+        "a",
+        {
+          href: url,
+          download: true,
+          className: "cmx-mdx__filedownload-link truncate block",
+          children: displayName
+        }
+      ),
+      size && /* @__PURE__ */ jsx20("p", { className: "cmx-mdx__filedownload-size", children: size })
+    ] })
+  ] });
+}
+
+// src/mdx/components/basic/TableOfContents.tsx
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+function TableOfContents({ maxDepth = 3 }) {
+  return /* @__PURE__ */ jsxs17(
+    "nav",
+    {
+      className: "cmx-mdx__toc",
+      "aria-label": "\u76EE\u6B21",
+      "data-max-depth": maxDepth,
+      children: [
+        /* @__PURE__ */ jsx21("p", { className: "cmx-mdx__toc-title", children: "\u76EE\u6B21" }),
+        /* @__PURE__ */ jsx21("p", { className: "cmx-mdx__toc-placeholder", children: "\u76EE\u6B21\u306F\u30EC\u30F3\u30C0\u30EA\u30F3\u30B0\u6642\u306B\u81EA\u52D5\u751F\u6210\u3055\u308C\u307E\u3059" })
+      ]
+    }
+  );
 }
 
 // src/mdx/components/basic/index.ts
 var basicComponents = {
   Callout,
+  Button,
   Embed,
-  Button
+  YouTube,
+  Twitter,
+  Instagram,
+  TikTok,
+  Bluesky,
+  Vimeo,
+  Spotify,
+  Gist,
+  CodePen,
+  CodeSandbox,
+  GoogleMap,
+  Details,
+  Tabs,
+  Tab,
+  Columns,
+  Column,
+  Audio,
+  Video,
+  FileDownload,
+  TableOfContents
 };
 
 // src/mdx/components/custom/BlogCard.tsx
 import Link2 from "next/link";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function BlogCard({ contentId, title, slug, excerpt }) {
   if (!title || !slug) {
-    return /* @__PURE__ */ jsx4("div", { className: "border border-dashed border-gray-300 rounded-lg p-4 bg-gray-50", children: /* @__PURE__ */ jsxs3("p", { className: "text-sm text-gray-500", children: [
+    return /* @__PURE__ */ jsx22("div", { className: "cmx-mdx__blogcard cmx-mdx__blogcard--unresolved", children: /* @__PURE__ */ jsxs18("p", { className: "cmx-mdx__blogcard-text", children: [
       "\u8A18\u4E8B\u30AB\u30FC\u30C9: ",
       contentId
     ] }) });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs18(
     Link2,
     {
       href: `/${slug}`,
-      className: "block border border-gray-200 rounded-lg p-4 hover:border-blue-400 hover:shadow-md transition-all",
+      className: "cmx-mdx__blogcard-link",
       children: [
-        /* @__PURE__ */ jsx4("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
-        excerpt && /* @__PURE__ */ jsx4("p", { className: "text-sm text-gray-600 line-clamp-2", children: excerpt })
+        /* @__PURE__ */ jsx22("h3", { className: "cmx-mdx__blogcard-title", children: title }),
+        excerpt && /* @__PURE__ */ jsx22("p", { className: "cmx-mdx__blogcard-excerpt line-clamp-2", children: excerpt })
       ]
     }
   );
@@ -499,7 +880,7 @@ function BlogCard({ contentId, title, slug, excerpt }) {
 
 // src/mdx/components/custom/Image.tsx
 import NextImage from "next/image";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function Image({
   assetId,
   alt = "",
@@ -510,62 +891,97 @@ function Image({
   height
 }) {
   if (!url) {
-    return /* @__PURE__ */ jsxs4("figure", { className: "my-4", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "border border-dashed border-gray-300 rounded-lg p-8 bg-gray-50 text-center", children: [
-        /* @__PURE__ */ jsxs4("p", { className: "text-sm text-gray-500", children: [
+    return /* @__PURE__ */ jsxs19("figure", { className: "cmx-mdx__image", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "cmx-mdx__image--unresolved", children: [
+        /* @__PURE__ */ jsxs19("p", { className: "cmx-mdx__image-id", children: [
           "\u753B\u50CF: ",
           assetId
         ] }),
-        /* @__PURE__ */ jsxs4("p", { className: "text-xs text-gray-400", children: [
+        /* @__PURE__ */ jsxs19("p", { className: "cmx-mdx__image-size", children: [
           "\u30B5\u30A4\u30BA: ",
           size
         ] })
       ] }),
-      caption && /* @__PURE__ */ jsx5("figcaption", { className: "mt-2 text-sm text-gray-500 text-center", children: caption })
+      caption && /* @__PURE__ */ jsx23("figcaption", { className: "cmx-mdx__image-caption", children: caption })
     ] });
   }
-  return /* @__PURE__ */ jsxs4("figure", { className: "my-4", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs19("figure", { className: "cmx-mdx__image", children: [
+    /* @__PURE__ */ jsx23(
       NextImage,
       {
         src: url,
         alt,
         width: width || 800,
         height: height || 600,
-        className: "rounded-lg"
+        className: "cmx-mdx__image-img"
       }
     ),
-    caption && /* @__PURE__ */ jsx5("figcaption", { className: "mt-2 text-sm text-gray-500 text-center", children: caption })
+    caption && /* @__PURE__ */ jsx23("figcaption", { className: "cmx-mdx__image-caption", children: caption })
+  ] });
+}
+
+// src/mdx/components/custom/Gallery.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+var gridClasses2 = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+  4: "grid-cols-2 md:grid-cols-4",
+  5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+  6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6"
+};
+function Gallery({ assetIds, columns = 3, caption, images }) {
+  const gridClass = gridClasses2[columns] || gridClasses2[3];
+  const items = images || assetIds.map((id) => ({ assetId: id }));
+  return /* @__PURE__ */ jsxs20("figure", { className: "cmx-mdx__gallery", children: [
+    /* @__PURE__ */ jsx24("div", { className: `cmx-mdx__gallery-grid grid gap-2 ${gridClass}`, children: items.map((item, i) => /* @__PURE__ */ jsx24(
+      "div",
+      {
+        className: "cmx-mdx__gallery-item aspect-square overflow-hidden",
+        children: item.url ? /* @__PURE__ */ jsx24(
+          "img",
+          {
+            src: item.url,
+            alt: item.alt || "",
+            className: "cmx-mdx__gallery-image w-full h-full object-cover",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ jsx24("div", { className: "cmx-mdx__gallery-placeholder w-full h-full flex items-center justify-center", children: "\u753B\u50CF" })
+      },
+      item.assetId || i
+    )) }),
+    caption && /* @__PURE__ */ jsx24("figcaption", { className: "cmx-mdx__gallery-caption", children: caption })
   ] });
 }
 
 // src/mdx/components/custom/index.ts
 var customComponents = {
   BlogCard,
-  Image
+  Image,
+  Gallery
 };
 
 // src/mdx/components/markdown/index.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var mdxH1 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h1", { className: "text-4xl font-bold mt-8 mb-4", ...props, children });
-var mdxH2 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h2", { className: "text-3xl font-bold mt-6 mb-3", ...props, children });
-var mdxH3 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h3", { className: "text-2xl font-semibold mt-4 mb-2", ...props, children });
-var mdxH4 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h4", { className: "text-xl font-semibold mt-3 mb-2", ...props, children });
-var mdxH5 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h5", { className: "text-lg font-medium mt-2 mb-1", ...props, children });
-var mdxH6 = ({ children, ...props }) => /* @__PURE__ */ jsx6("h6", { className: "text-base font-medium mt-2 mb-1", ...props, children });
-var mdxP = ({ children, ...props }) => /* @__PURE__ */ jsx6("p", { className: "my-4 leading-7", ...props, children });
-var mdxUl = ({ children, ...props }) => /* @__PURE__ */ jsx6("ul", { className: "my-4 pl-6 list-disc", ...props, children });
-var mdxOl = ({ children, ...props }) => /* @__PURE__ */ jsx6("ol", { className: "my-4 pl-6 list-decimal", ...props, children });
-var mdxLi = ({ children, ...props }) => /* @__PURE__ */ jsx6("li", { className: "my-1", ...props, children });
-var mdxBlockquote = ({ children, ...props }) => /* @__PURE__ */ jsx6("blockquote", { className: "border-l-4 border-primary pl-4 italic my-4", ...props, children });
-var mdxPre = ({ children, ...props }) => /* @__PURE__ */ jsx6("pre", { className: "overflow-x-auto rounded-lg bg-slate-900 p-4 text-sm my-4", ...props, children });
-var mdxCode = ({ children, ...props }) => /* @__PURE__ */ jsx6("code", { className: "bg-muted px-1.5 py-0.5 rounded text-sm font-mono", ...props, children });
-var mdxHr = () => /* @__PURE__ */ jsx6("hr", { className: "my-8 border-t border-border" });
-var mdxA = ({ children, href, ...props }) => /* @__PURE__ */ jsx6(
+import { jsx as jsx25 } from "react/jsx-runtime";
+var mdxH1 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h1", { className: "cmx-mdx__h1", ...props, children });
+var mdxH2 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h2", { className: "cmx-mdx__h2", ...props, children });
+var mdxH3 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h3", { className: "cmx-mdx__h3", ...props, children });
+var mdxH4 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h4", { className: "cmx-mdx__h4", ...props, children });
+var mdxH5 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h5", { className: "cmx-mdx__h5", ...props, children });
+var mdxH6 = ({ children, ...props }) => /* @__PURE__ */ jsx25("h6", { className: "cmx-mdx__h6", ...props, children });
+var mdxP = ({ children, ...props }) => /* @__PURE__ */ jsx25("p", { className: "cmx-mdx__p", ...props, children });
+var mdxUl = ({ children, ...props }) => /* @__PURE__ */ jsx25("ul", { className: "cmx-mdx__ul", ...props, children });
+var mdxOl = ({ children, ...props }) => /* @__PURE__ */ jsx25("ol", { className: "cmx-mdx__ol", ...props, children });
+var mdxLi = ({ children, ...props }) => /* @__PURE__ */ jsx25("li", { className: "cmx-mdx__li", ...props, children });
+var mdxBlockquote = ({ children, ...props }) => /* @__PURE__ */ jsx25("blockquote", { className: "cmx-mdx__blockquote", ...props, children });
+var mdxPre = ({ children, ...props }) => /* @__PURE__ */ jsx25("pre", { className: "cmx-mdx__pre", ...props, children });
+var mdxCode = ({ children, ...props }) => /* @__PURE__ */ jsx25("code", { className: "cmx-mdx__code", ...props, children });
+var mdxHr = () => /* @__PURE__ */ jsx25("hr", { className: "cmx-mdx__hr" });
+var mdxA = ({ children, href, ...props }) => /* @__PURE__ */ jsx25(
   "a",
   {
     href,
-    className: "text-primary underline underline-offset-4 hover:text-primary/80",
+    className: "cmx-mdx__a",
     target: href?.startsWith("http") ? "_blank" : void 0,
     rel: href?.startsWith("http") ? "noopener noreferrer" : void 0,
     ...props,
@@ -574,24 +990,24 @@ var mdxA = ({ children, href, ...props }) => /* @__PURE__ */ jsx6(
 );
 var mdxImg = ({ src, alt, ...props }) => (
   // eslint-disable-next-line @next/next/no-img-element
-  /* @__PURE__ */ jsx6(
+  /* @__PURE__ */ jsx25(
     "img",
     {
       src,
       alt: alt || "",
-      className: "max-w-full h-auto rounded-lg my-4",
+      className: "cmx-mdx__img",
       ...props
     }
   )
 );
-var mdxStrong = ({ children, ...props }) => /* @__PURE__ */ jsx6("strong", { className: "font-bold", ...props, children });
-var mdxEm = ({ children, ...props }) => /* @__PURE__ */ jsx6("em", { className: "italic", ...props, children });
-var mdxTable = ({ children, ...props }) => /* @__PURE__ */ jsx6("div", { className: "my-4 overflow-x-auto", children: /* @__PURE__ */ jsx6("table", { className: "min-w-full border-collapse border border-border", ...props, children }) });
-var mdxThead = ({ children, ...props }) => /* @__PURE__ */ jsx6("thead", { className: "bg-muted", ...props, children });
-var mdxTbody = ({ children, ...props }) => /* @__PURE__ */ jsx6("tbody", { ...props, children });
-var mdxTr = ({ children, ...props }) => /* @__PURE__ */ jsx6("tr", { className: "border-b border-border", ...props, children });
-var mdxTh = ({ children, ...props }) => /* @__PURE__ */ jsx6("th", { className: "px-4 py-2 text-left font-semibold border border-border", ...props, children });
-var mdxTd = ({ children, ...props }) => /* @__PURE__ */ jsx6("td", { className: "px-4 py-2 border border-border", ...props, children });
+var mdxStrong = ({ children, ...props }) => /* @__PURE__ */ jsx25("strong", { className: "cmx-mdx__strong", ...props, children });
+var mdxEm = ({ children, ...props }) => /* @__PURE__ */ jsx25("em", { className: "cmx-mdx__em", ...props, children });
+var mdxTable = ({ children, ...props }) => /* @__PURE__ */ jsx25("div", { className: "cmx-mdx__table-wrapper", children: /* @__PURE__ */ jsx25("table", { className: "cmx-mdx__table", ...props, children }) });
+var mdxThead = ({ children, ...props }) => /* @__PURE__ */ jsx25("thead", { className: "cmx-mdx__thead", ...props, children });
+var mdxTbody = ({ children, ...props }) => /* @__PURE__ */ jsx25("tbody", { ...props, children });
+var mdxTr = ({ children, ...props }) => /* @__PURE__ */ jsx25("tr", { className: "cmx-mdx__tr", ...props, children });
+var mdxTh = ({ children, ...props }) => /* @__PURE__ */ jsx25("th", { className: "cmx-mdx__th", ...props, children });
+var mdxTd = ({ children, ...props }) => /* @__PURE__ */ jsx25("td", { className: "cmx-mdx__td", ...props, children });
 var markdownComponents = {
   h1: mdxH1,
   h2: mdxH2,
@@ -629,45 +1045,149 @@ var mdxComponents = {
 // src/mdx/component-catalog.ts
 import { z } from "zod";
 var componentSchemas = {
-  BlogCard: z.object({
-    contentId: z.string().uuid().describe("\u53C2\u7167\u5148\u30B3\u30F3\u30C6\u30F3\u30C4\u306EUUID")
+  // --- content ---
+  Callout: z.object({
+    type: z.enum(["info", "warning", "error", "success", "tip"]).default("info").describe("\u30BF\u30A4\u30D7"),
+    title: z.string().optional().describe("\u30BF\u30A4\u30C8\u30EB"),
+    children: z.string().describe("\u672C\u6587\uFF08Markdown\u53EF\uFF09")
   }),
+  Button: z.object({
+    href: z.string().describe("\u30EA\u30F3\u30AF\u5148URL"),
+    children: z.string().describe("\u30DC\u30BF\u30F3\u30C6\u30AD\u30B9\u30C8"),
+    variant: z.enum(["primary", "secondary", "outline"]).default("primary").describe("\u30B9\u30BF\u30A4\u30EB")
+  }),
+  // --- media ---
   Image: z.object({
     assetId: z.string().uuid().describe("\u30A2\u30BB\u30C3\u30C8\u306EUUID"),
     alt: z.string().optional().describe("\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8"),
     size: z.enum(["thumbnail", "medium", "large", "original"]).default("large").describe("\u8868\u793A\u30B5\u30A4\u30BA"),
     caption: z.string().optional().describe("\u30AD\u30E3\u30D7\u30B7\u30E7\u30F3")
   }),
-  Callout: z.object({
-    type: z.enum(["info", "warning", "error", "success", "tip"]).default("info").describe("\u30BF\u30A4\u30D7"),
+  Audio: z.object({
+    src: z.string().url().describe("\u97F3\u58F0\u30D5\u30A1\u30A4\u30EBURL"),
+    title: z.string().optional().describe("\u30BF\u30A4\u30C8\u30EB")
+  }),
+  Video: z.object({
+    src: z.string().url().describe("\u52D5\u753B\u30D5\u30A1\u30A4\u30EBURL"),
     title: z.string().optional().describe("\u30BF\u30A4\u30C8\u30EB"),
-    children: z.string().describe("\u672C\u6587\uFF08Markdown\u53EF\uFF09")
+    poster: z.string().url().optional().describe("\u30DD\u30B9\u30BF\u30FC\u753B\u50CFURL")
+  }),
+  Gallery: z.object({
+    assetIds: z.array(z.string().uuid()).describe("\u30A2\u30BB\u30C3\u30C8UUID\u306E\u914D\u5217"),
+    columns: z.number().min(1).max(6).default(3).describe("\u5217\u6570"),
+    caption: z.string().optional().describe("\u30AD\u30E3\u30D7\u30B7\u30E7\u30F3")
+  }),
+  // --- reference ---
+  BlogCard: z.object({
+    contentId: z.string().uuid().describe("\u53C2\u7167\u5148\u30B3\u30F3\u30C6\u30F3\u30C4\u306EUUID")
+  }),
+  // --- embed ---
+  YouTube: z.object({
+    url: z.string().url().describe("YouTube\u52D5\u753BURL"),
+    start: z.number().optional().describe("\u958B\u59CB\u79D2\u6570")
+  }),
+  Twitter: z.object({
+    url: z.string().url().describe("\u30C4\u30A4\u30FC\u30C8URL")
+  }),
+  Instagram: z.object({
+    url: z.string().url().describe("Instagram\u6295\u7A3FURL")
+  }),
+  TikTok: z.object({
+    url: z.string().url().describe("TikTok\u52D5\u753BURL")
+  }),
+  Bluesky: z.object({
+    url: z.string().url().describe("Bluesky\u30DD\u30B9\u30C8URL")
+  }),
+  Vimeo: z.object({
+    url: z.string().url().describe("Vimeo\u52D5\u753BURL")
   }),
+  Spotify: z.object({
+    url: z.string().url().describe("Spotify\u30B3\u30F3\u30C6\u30F3\u30C4URL"),
+    theme: z.enum(["light", "dark"]).default("light").describe("\u30C6\u30FC\u30DE")
+  }),
+  Gist: z.object({
+    url: z.string().url().describe("GitHub Gist URL")
+  }),
+  CodePen: z.object({
+    url: z.string().url().describe("CodePen URL"),
+    height: z.number().default(400).describe("\u9AD8\u3055\uFF08px\uFF09"),
+    defaultTab: z.enum(["html", "css", "js", "result"]).default("result").describe("\u30C7\u30D5\u30A9\u30EB\u30C8\u30BF\u30D6")
+  }),
+  CodeSandbox: z.object({
+    url: z.string().url().describe("CodeSandbox URL"),
+    height: z.number().default(500).describe("\u9AD8\u3055\uFF08px\uFF09")
+  }),
+  GoogleMap: z.object({
+    url: z.string().url().describe("Google Maps URL"),
+    height: z.number().default(450).describe("\u9AD8\u3055\uFF08px\uFF09")
+  }),
+  // --- layout ---
+  Details: z.object({
+    summary: z.string().describe("\u6298\u308A\u305F\u305F\u307F\u306E\u898B\u51FA\u3057"),
+    children: z.string().describe("\u6298\u308A\u305F\u305F\u307E\u308C\u308B\u5185\u5BB9")
+  }),
+  Tabs: z.object({
+    children: z.string().describe("Tab\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u4E26\u3073")
+  }),
+  Tab: z.object({
+    label: z.string().describe("\u30BF\u30D6\u306E\u30E9\u30D9\u30EB"),
+    children: z.string().describe("\u30BF\u30D6\u306E\u5185\u5BB9")
+  }),
+  Columns: z.object({
+    cols: z.number().min(2).max(4).default(2).describe("\u5217\u6570"),
+    children: z.string().describe("Column\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u306E\u4E26\u3073")
+  }),
+  Column: z.object({
+    children: z.string().describe("\u30AB\u30E9\u30E0\u306E\u5185\u5BB9")
+  }),
+  // --- utility ---
   Embed: z.object({
-    url: z.string().url().describe("\u57CB\u3081\u8FBC\u307FURL"),
-    type: z.enum(["youtube", "twitter", "generic"]).default("generic").describe("\u30BF\u30A4\u30D7")
+    url: z.string().url().describe("\u57CB\u3081\u8FBC\u307FURL")
   }),
-  Button: z.object({
-    href: z.string().describe("\u30EA\u30F3\u30AF\u5148URL"),
-    children: z.string().describe("\u30DC\u30BF\u30F3\u30C6\u30AD\u30B9\u30C8"),
-    variant: z.enum(["primary", "secondary", "outline"]).default("primary").describe("\u30B9\u30BF\u30A4\u30EB")
+  FileDownload: z.object({
+    url: z.string().url().describe("\u30D5\u30A1\u30A4\u30EBURL"),
+    filename: z.string().optional().describe("\u8868\u793A\u30D5\u30A1\u30A4\u30EB\u540D"),
+    size: z.string().optional().describe("\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u8868\u793A")
+  }),
+  TableOfContents: z.object({
+    maxDepth: z.number().min(1).max(6).default(3).describe("\u898B\u51FA\u3057\u306E\u6700\u5927\u6DF1\u3055")
   })
 };
 var componentCatalog = {
-  BlogCard: {
-    name: "BlogCard",
-    displayName: "\u8A18\u4E8B\u30AB\u30FC\u30C9",
-    description: "\u4ED6\u306E\u8A18\u4E8B\u3078\u306E\u30EA\u30F3\u30AF\u30AB\u30FC\u30C9\u3092\u8868\u793A\u3057\u307E\u3059",
-    category: "reference",
-    schema: componentSchemas.BlogCard,
-    examples: ['<BlogCard contentId="123e4567-e89b-12d3-a456-426614174000" />'],
-    hasReferences: true,
+  // --- content ---
+  Callout: {
+    name: "Callout",
+    displayName: "\u30B3\u30FC\u30EB\u30A2\u30A6\u30C8",
+    description: "\u6CE8\u610F\u66F8\u304D\u3084\u88DC\u8DB3\u60C5\u5831\u3092\u76EE\u7ACB\u305F\u305B\u308B\u30DC\u30C3\u30AF\u30B9",
+    category: "content",
+    schema: componentSchemas.Callout,
+    examples: [
+      '<Callout type="info">\u3053\u308C\u306F\u60C5\u5831\u3067\u3059</Callout>',
+      '<Callout type="warning" title="\u6CE8\u610F">\u91CD\u8981\u306A\u6CE8\u610F\u4E8B\u9805\u3067\u3059</Callout>'
+    ],
+    hasReferences: false,
     source: "standard",
-    kind: "data-bound",
+    kind: "presentational",
     locked: true,
-    editable: false,
-    bindings: [{ prop: "contentId", target: "content", strategy: "by-id" }]
+    editable: false
   },
+  Button: {
+    name: "Button",
+    displayName: "\u30DC\u30BF\u30F3",
+    description: "\u30A2\u30AF\u30B7\u30E7\u30F3\u3092\u4FC3\u3059\u30DC\u30BF\u30F3\u30EA\u30F3\u30AF",
+    category: "content",
+    schema: componentSchemas.Button,
+    examples: [
+      '<Button href="/contact">\u304A\u554F\u3044\u5408\u308F\u305B</Button>',
+      '<Button href="https://example.com" variant="secondary">\u8A73\u7D30\u3092\u898B\u308B</Button>'
+    ],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  // --- media ---
   Image: {
     name: "Image",
     displayName: "\u753B\u50CF",
@@ -685,31 +1205,74 @@ var componentCatalog = {
     editable: false,
     bindings: [{ prop: "assetId", target: "asset", strategy: "by-id" }]
   },
-  Callout: {
-    name: "Callout",
-    displayName: "\u30B3\u30FC\u30EB\u30A2\u30A6\u30C8",
-    description: "\u6CE8\u610F\u66F8\u304D\u3084\u88DC\u8DB3\u60C5\u5831\u3092\u76EE\u7ACB\u305F\u305B\u308B\u30DC\u30C3\u30AF\u30B9",
-    category: "content",
-    schema: componentSchemas.Callout,
-    examples: [
-      '<Callout type="info">\u3053\u308C\u306F\u60C5\u5831\u3067\u3059</Callout>',
-      '<Callout type="warning" title="\u6CE8\u610F">\u91CD\u8981\u306A\u6CE8\u610F\u4E8B\u9805\u3067\u3059</Callout>'
-    ],
+  Audio: {
+    name: "Audio",
+    displayName: "\u97F3\u58F0\u30D7\u30EC\u30A4\u30E4\u30FC",
+    description: "\u97F3\u58F0\u30D5\u30A1\u30A4\u30EB\u3092\u518D\u751F\u3059\u308B\u30D7\u30EC\u30A4\u30E4\u30FC",
+    category: "media",
+    schema: componentSchemas.Audio,
+    examples: ['<Audio src="https://example.com/podcast.mp3" title="\u30A8\u30D4\u30BD\u30FC\u30C91" />'],
     hasReferences: false,
     source: "standard",
     kind: "presentational",
     locked: true,
     editable: false
   },
-  Embed: {
-    name: "Embed",
-    displayName: "\u57CB\u3081\u8FBC\u307F",
-    description: "YouTube\u52D5\u753B\u3084\u30C4\u30A4\u30FC\u30C8\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+  Video: {
+    name: "Video",
+    displayName: "\u52D5\u753B\u30D7\u30EC\u30A4\u30E4\u30FC",
+    description: "\u30BB\u30EB\u30D5\u30DB\u30B9\u30C8\u52D5\u753B\u3092\u518D\u751F\u3059\u308B\u30D7\u30EC\u30A4\u30E4\u30FC",
     category: "media",
-    schema: componentSchemas.Embed,
+    schema: componentSchemas.Video,
+    examples: ['<Video src="https://example.com/video.mp4" poster="https://example.com/thumb.jpg" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Gallery: {
+    name: "Gallery",
+    displayName: "\u753B\u50CF\u30AE\u30E3\u30E9\u30EA\u30FC",
+    description: "\u8907\u6570\u306E\u753B\u50CF\u3092\u30B0\u30EA\u30C3\u30C9\u30EC\u30A4\u30A2\u30A6\u30C8\u3067\u8868\u793A\u3057\u307E\u3059",
+    category: "media",
+    schema: componentSchemas.Gallery,
+    examples: [
+      '<Gallery assetIds={["uuid1", "uuid2", "uuid3"]} />',
+      '<Gallery assetIds={["uuid1", "uuid2"]} columns={2} caption="\u5199\u771F\u96C6" />'
+    ],
+    hasReferences: true,
+    source: "standard",
+    kind: "data-bound",
+    locked: true,
+    editable: false,
+    bindings: [{ prop: "assetIds", target: "asset", strategy: "by-id" }]
+  },
+  // --- reference ---
+  BlogCard: {
+    name: "BlogCard",
+    displayName: "\u8A18\u4E8B\u30AB\u30FC\u30C9",
+    description: "\u4ED6\u306E\u8A18\u4E8B\u3078\u306E\u30EA\u30F3\u30AF\u30AB\u30FC\u30C9\u3092\u8868\u793A\u3057\u307E\u3059",
+    category: "reference",
+    schema: componentSchemas.BlogCard,
+    examples: ['<BlogCard contentId="123e4567-e89b-12d3-a456-426614174000" />'],
+    hasReferences: true,
+    source: "standard",
+    kind: "data-bound",
+    locked: true,
+    editable: false,
+    bindings: [{ prop: "contentId", target: "content", strategy: "by-id" }]
+  },
+  // --- embed ---
+  YouTube: {
+    name: "YouTube",
+    displayName: "YouTube",
+    description: "YouTube\u52D5\u753B\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.YouTube,
     examples: [
-      '<Embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" type="youtube" />',
-      '<Embed url="https://twitter.com/example/status/123456789" type="twitter" />'
+      '<YouTube url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />',
+      '<YouTube url="https://youtu.be/dQw4w9WgXcQ" start={30} />'
     ],
     hasReferences: false,
     source: "standard",
@@ -717,23 +1280,252 @@ var componentCatalog = {
     locked: true,
     editable: false
   },
-  Button: {
-    name: "Button",
-    displayName: "\u30DC\u30BF\u30F3",
-    description: "\u30A2\u30AF\u30B7\u30E7\u30F3\u3092\u4FC3\u3059\u30DC\u30BF\u30F3\u30EA\u30F3\u30AF",
-    category: "content",
-    schema: componentSchemas.Button,
+  Twitter: {
+    name: "Twitter",
+    displayName: "Twitter / X",
+    description: "\u30C4\u30A4\u30FC\u30C8\u30FB\u30DD\u30B9\u30C8\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Twitter,
+    examples: ['<Twitter url="https://twitter.com/example/status/123456789" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Instagram: {
+    name: "Instagram",
+    displayName: "Instagram",
+    description: "Instagram\u6295\u7A3F\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Instagram,
+    examples: ['<Instagram url="https://www.instagram.com/p/ABC123/" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  TikTok: {
+    name: "TikTok",
+    displayName: "TikTok",
+    description: "TikTok\u52D5\u753B\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.TikTok,
+    examples: ['<TikTok url="https://www.tiktok.com/@user/video/123456789" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Bluesky: {
+    name: "Bluesky",
+    displayName: "Bluesky",
+    description: "Bluesky\u30DD\u30B9\u30C8\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Bluesky,
+    examples: ['<Bluesky url="https://bsky.app/profile/user.bsky.social/post/abc123" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Vimeo: {
+    name: "Vimeo",
+    displayName: "Vimeo",
+    description: "Vimeo\u52D5\u753B\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Vimeo,
+    examples: ['<Vimeo url="https://vimeo.com/123456789" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Spotify: {
+    name: "Spotify",
+    displayName: "Spotify",
+    description: "Spotify\u697D\u66F2\u30FB\u30D7\u30EC\u30A4\u30EA\u30B9\u30C8\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Spotify,
     examples: [
-      '<Button href="/contact">\u304A\u554F\u3044\u5408\u308F\u305B</Button>',
-      '<Button href="https://example.com" variant="secondary">\u8A73\u7D30\u3092\u898B\u308B</Button>'
+      '<Spotify url="https://open.spotify.com/track/xxx" />',
+      '<Spotify url="https://open.spotify.com/playlist/xxx" theme="dark" />'
     ],
     hasReferences: false,
     source: "standard",
     kind: "presentational",
     locked: true,
     editable: false
+  },
+  Gist: {
+    name: "Gist",
+    displayName: "GitHub Gist",
+    description: "GitHub Gist\u306E\u30B3\u30FC\u30C9\u30B9\u30CB\u30DA\u30C3\u30C8\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.Gist,
+    examples: ['<Gist url="https://gist.github.com/user/abc123" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  CodePen: {
+    name: "CodePen",
+    displayName: "CodePen",
+    description: "CodePen\u306E\u30E9\u30A4\u30D6\u30C7\u30E2\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.CodePen,
+    examples: ['<CodePen url="https://codepen.io/user/pen/abc123" height={500} defaultTab="result" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  CodeSandbox: {
+    name: "CodeSandbox",
+    displayName: "CodeSandbox",
+    description: "CodeSandbox\u306E\u30E9\u30A4\u30D6\u30C7\u30E2\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.CodeSandbox,
+    examples: ['<CodeSandbox url="https://codesandbox.io/s/abc123" height={500} />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  GoogleMap: {
+    name: "GoogleMap",
+    displayName: "Google Maps",
+    description: "Google Maps\u306E\u5730\u56F3\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "embed",
+    schema: componentSchemas.GoogleMap,
+    examples: ['<GoogleMap url="https://www.google.com/maps/embed?pb=..." height={400} />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  // --- layout ---
+  Details: {
+    name: "Details",
+    displayName: "\u6298\u308A\u305F\u305F\u307F",
+    description: "\u30AF\u30EA\u30C3\u30AF\u3067\u5C55\u958B\u30FB\u6298\u308A\u305F\u305F\u307F\u53EF\u80FD\u306A\u30BB\u30AF\u30B7\u30E7\u30F3",
+    category: "layout",
+    schema: componentSchemas.Details,
+    examples: ['<Details summary="\u8A73\u7D30\u3092\u898B\u308B">\u6298\u308A\u305F\u305F\u307E\u308C\u305F\u5185\u5BB9</Details>'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Tabs: {
+    name: "Tabs",
+    displayName: "\u30BF\u30D6",
+    description: "\u30BF\u30D6\u3067\u5207\u308A\u66FF\u3048\u53EF\u80FD\u306A\u30B3\u30F3\u30C6\u30F3\u30C4",
+    category: "layout",
+    schema: componentSchemas.Tabs,
+    examples: ['<Tabs><Tab label="\u30BF\u30D61">\u5185\u5BB91</Tab><Tab label="\u30BF\u30D62">\u5185\u5BB92</Tab></Tabs>'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Tab: {
+    name: "Tab",
+    displayName: "\u30BF\u30D6\uFF08\u5B50\uFF09",
+    description: "Tabs\u306E\u5B50\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8",
+    category: "layout",
+    schema: componentSchemas.Tab,
+    examples: ['<Tab label="\u30BF\u30D6\u540D">\u5185\u5BB9</Tab>'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false,
+    parentComponent: "Tabs"
+  },
+  Columns: {
+    name: "Columns",
+    displayName: "\u30AB\u30E9\u30E0",
+    description: "\u30DE\u30EB\u30C1\u30AB\u30E9\u30E0\u30EC\u30A4\u30A2\u30A6\u30C8",
+    category: "layout",
+    schema: componentSchemas.Columns,
+    examples: ["<Columns cols={2}><Column>\u5DE6</Column><Column>\u53F3</Column></Columns>"],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  Column: {
+    name: "Column",
+    displayName: "\u30AB\u30E9\u30E0\uFF08\u5B50\uFF09",
+    description: "Columns\u306E\u5B50\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8",
+    category: "layout",
+    schema: componentSchemas.Column,
+    examples: ["<Column>\u30AB\u30E9\u30E0\u306E\u5185\u5BB9</Column>"],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false,
+    parentComponent: "Columns"
+  },
+  // --- utility ---
+  Embed: {
+    name: "Embed",
+    displayName: "\u6C4E\u7528\u57CB\u3081\u8FBC\u307F",
+    description: "\u6C4E\u7528iframe\u3067\u5916\u90E8\u30B3\u30F3\u30C6\u30F3\u30C4\u3092\u57CB\u3081\u8FBC\u307F\u307E\u3059",
+    category: "utility",
+    schema: componentSchemas.Embed,
+    examples: ['<Embed url="https://example.com/widget" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  FileDownload: {
+    name: "FileDownload",
+    displayName: "\u30D5\u30A1\u30A4\u30EB\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9",
+    description: "\u30D5\u30A1\u30A4\u30EB\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9\u30EA\u30F3\u30AF\u3092\u8868\u793A\u3057\u307E\u3059",
+    category: "utility",
+    schema: componentSchemas.FileDownload,
+    examples: ['<FileDownload url="https://example.com/doc.pdf" filename="\u8CC7\u6599.pdf" size="2.4MB" />'],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
+  },
+  TableOfContents: {
+    name: "TableOfContents",
+    displayName: "\u76EE\u6B21",
+    description: "\u8A18\u4E8B\u5185\u306E\u898B\u51FA\u3057\u304B\u3089\u76EE\u6B21\u3092\u81EA\u52D5\u751F\u6210\u3057\u307E\u3059",
+    category: "utility",
+    schema: componentSchemas.TableOfContents,
+    examples: ["<TableOfContents />", "<TableOfContents maxDepth={2} />"],
+    hasReferences: false,
+    source: "standard",
+    kind: "presentational",
+    locked: true,
+    editable: false
   }
 };
+var CHILD_COMPONENT_MAP = {
+  Tab: "Tabs",
+  Column: "Columns"
+};
 function isValidComponent(name) {
   return name in componentCatalog;
 }
@@ -760,8 +1552,12 @@ function getComponentsByCategory() {
   }
   return grouped;
 }
-function getCatalogForAI() {
-  return Object.values(componentCatalog).map((def) => {
+function getCatalogForAI(enabledComponents) {
+  let entries = Object.values(componentCatalog);
+  if (enabledComponents) {
+    entries = entries.filter((def) => enabledComponents.includes(def.name));
+  }
+  return entries.map((def) => {
     const shape = def.schema.shape;
     const props = {};
     for (const [key, zodType] of Object.entries(shape)) {
@@ -781,7 +1577,8 @@ function getCatalogForAI() {
       kind: def.kind,
       locked: def.locked,
       editable: def.editable,
-      bindings: def.bindings
+      bindings: def.bindings,
+      parentComponent: def.parentComponent
     };
   });
 }
@@ -818,6 +1615,7 @@ function getZodTypeName(zodType) {
 
 // src/mdx/validator.ts
 import { compile } from "@mdx-js/mdx";
+import remarkGfm from "remark-gfm";
 var FORBIDDEN_PATTERNS = [
   // import/export statements (at MDX level, not inside code blocks)
   { pattern: /^\s*import\s+/m, message: "import\u6587\u306F\u4F7F\u7528\u3067\u304D\u307E\u305B\u3093" },
@@ -996,13 +1794,18 @@ function extractReferences(components) {
     if (component.name === "Image" && typeof component.props.assetId === "string") {
       assetIds.push(component.props.assetId);
     }
+    if (component.name === "Gallery" && Array.isArray(component.props.assetIds)) {
+      for (const id of component.props.assetIds) {
+        if (typeof id === "string") assetIds.push(id);
+      }
+    }
   }
   return {
     contentIds: [...new Set(contentIds)],
     assetIds: [...new Set(assetIds)]
   };
 }
-async function validateMdx(mdx) {
+async function validateMdx(mdx, options) {
   const errors = [];
   const warnings = [];
   const mdxWithoutCodeBlocks = stripCodeBlocksForPatternCheck(mdx);
@@ -1024,7 +1827,8 @@ async function validateMdx(mdx) {
   const escapedMdx = escapeCodeBlocksForCompile(mdx);
   try {
     await compile(escapedMdx, {
-      development: false
+      development: false,
+      remarkPlugins: [remarkGfm]
     });
   } catch (error) {
     const err = error;
@@ -1037,6 +1841,7 @@ async function validateMdx(mdx) {
   }
   const mdxForComponentExtraction = stripCodeBlocksForPatternCheck(mdx);
   const components = extractComponents(mdxForComponentExtraction);
+  const enabledSet = options?.enabledComponents ? new Set(options.enabledComponents) : void 0;
   for (const component of components) {
     if (!isValidComponent(component.name)) {
       errors.push({
@@ -1047,6 +1852,27 @@ async function validateMdx(mdx) {
       });
       continue;
     }
+    if (enabledSet && !enabledSet.has(component.name)) {
+      errors.push({
+        type: "component",
+        message: `\u7121\u52B9\u306A\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8: ${component.name}\uFF08\u3053\u306E\u74B0\u5883\u3067\u306F\u4F7F\u7528\u3067\u304D\u307E\u305B\u3093\uFF09`,
+        line: component.line,
+        component: component.name
+      });
+      continue;
+    }
+    const parentName = CHILD_COMPONENT_MAP[component.name];
+    if (parentName) {
+      const hasParent = components.some((c) => c.name === parentName);
+      if (!hasParent) {
+        errors.push({
+          type: "component",
+          message: `${component.name} \u306F ${parentName} \u306E\u4E2D\u3067\u4F7F\u7528\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059`,
+          line: component.line,
+          component: component.name
+        });
+      }
+    }
     const result = validateComponentProps(component.name, component.props);
     if (!result.success) {
       for (const issue of result.error.issues) {
@@ -1086,8 +1912,9 @@ function quickValidateMdx(mdx) {
 
 // src/render.tsx
 import { compile as compile2, run } from "@mdx-js/mdx";
+import remarkGfm2 from "remark-gfm";
 import * as runtime from "react/jsx-runtime";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function convertReferencesToMaps(refs) {
   const contentsMap = /* @__PURE__ */ new Map();
   const assetsMap = /* @__PURE__ */ new Map();
@@ -1110,7 +1937,7 @@ function createResolvedComponents(references, additionalComponents) {
     // Custom components with reference resolution
     BlogCard: (props) => {
       const ref = references.contents.get(props.contentId);
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx26(
         BlogCard,
         {
           contentId: props.contentId,
@@ -1127,7 +1954,7 @@ function createResolvedComponents(references, additionalComponents) {
       if (asset?.variants && size !== "original") {
         url = asset.variants[size] || asset.url;
       }
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx26(
         Image,
         {
           assetId: props.assetId,
@@ -1140,10 +1967,42 @@ function createResolvedComponents(references, additionalComponents) {
         }
       );
     },
+    // Gallery with reference resolution
+    Gallery: (props) => {
+      const images = props.assetIds.map((id) => {
+        const asset = references.assets.get(id);
+        return {
+          assetId: id,
+          url: asset?.url,
+          alt: asset?.alt ?? void 0
+        };
+      });
+      return /* @__PURE__ */ jsx26(Gallery, { assetIds: props.assetIds, columns: props.columns, caption: props.caption, images });
+    },
     // Components without resolution
     Callout,
     Embed,
     Button,
+    YouTube,
+    Twitter,
+    Instagram,
+    TikTok,
+    Bluesky,
+    Vimeo,
+    Spotify,
+    Gist,
+    CodePen,
+    CodeSandbox,
+    GoogleMap,
+    Details,
+    Tabs,
+    Tab,
+    Columns,
+    Column,
+    Audio,
+    Video,
+    FileDownload,
+    TableOfContents,
     // User-provided custom components
     ...additionalComponents
   };
@@ -1181,13 +2040,14 @@ async function renderMdx(mdx, references, options) {
   const components = createResolvedComponents(resolvedReferences, options?.additionalComponents);
   const code = await compile2(mdx, {
     outputFormat: "function-body",
-    development: false
+    development: false,
+    remarkPlugins: [remarkGfm2]
   });
   const { default: MDXContent } = await run(String(code), {
     ...runtime,
     baseUrl: import.meta.url
   });
-  const content = /* @__PURE__ */ jsx7(MDXContent, { components });
+  const content = /* @__PURE__ */ jsx26(MDXContent, { components });
   return {
     content,
     references: resolvedReferences
@@ -1198,27 +2058,49 @@ async function renderMdxPreview(mdx, additionalComponents) {
     ...markdownComponents,
     BlogCard,
     Image,
+    Gallery,
     Callout,
     Embed,
     Button,
+    YouTube,
+    Twitter,
+    Instagram,
+    TikTok,
+    Bluesky,
+    Vimeo,
+    Spotify,
+    Gist,
+    CodePen,
+    CodeSandbox,
+    GoogleMap,
+    Details,
+    Tabs,
+    Tab,
+    Columns,
+    Column,
+    Audio,
+    Video,
+    FileDownload,
+    TableOfContents,
     ...additionalComponents
   };
   try {
     validateMdx2(mdx);
     const code = await compile2(mdx, {
       outputFormat: "function-body",
-      development: false
+      development: false,
+      remarkPlugins: [remarkGfm2]
     });
     const { default: MDXContent } = await run(String(code), {
       ...runtime,
       baseUrl: import.meta.url
     });
-    return /* @__PURE__ */ jsx7(MDXContent, { components });
+    return /* @__PURE__ */ jsx26(MDXContent, { components });
   } catch (error) {
     console.error("MDX render error:", error);
-    return /* @__PURE__ */ jsxs5("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [
-      /* @__PURE__ */ jsx7("p", { className: "text-red-600 font-medium", children: "MDX Render Error" }),
-      /* @__PURE__ */ jsx7("pre", { className: "mt-2 text-sm text-red-500 whitespace-pre-wrap", children: error instanceof Error ? error.message : "Unknown error" })
+    return /* @__PURE__ */ jsxs21("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [
+      /* @__PURE__ */ jsx26("p", { className: "text-red-600 font-medium", children: "MDX Render Error" }),
+      /* @__PURE__ */ jsx26("pre", { className: "mt-2 text-sm text-red-500 whitespace-pre-wrap", children: error instanceof Error ? error.message : "Unknown error" })
     ] });
   }
 }