cmx-sdk 0.2.20 → 0.2.21

package/dist/index.d.ts

@@ -3439,11 +3439,29 @@ interface YouTubeProps {
 }
 declare function YouTube({ url, start }: YouTubeProps): react_jsx_runtime.JSX.Element;
 
+declare global {
+    interface Window {
+        twttr?: {
+            widgets: {
+                load: (el?: HTMLElement) => void;
+            };
+        };
+    }
+}
 interface TwitterProps {
     url: string;
 }
 declare function Twitter({ url }: TwitterProps): react_jsx_runtime.JSX.Element;
 
+declare global {
+    interface Window {
+        instgrm?: {
+            Embeds: {
+                process: () => void;
+            };
+        };
+    }
+}
 interface InstagramProps {
     url: string;
 }

package/dist/index.js

@@ -505,43 +505,92 @@ function YouTube({ url, start }) {
 }
 
 // src/mdx/components/basic/Twitter.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { jsx as jsx5 } 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
-      }
-    )
-  ] });
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const run = () => {
+      window.twttr?.widgets.load(containerRef.current ?? void 0);
+    };
+    if (window.twttr) {
+      run();
+      return;
+    }
+    const selector = 'script[src="https://platform.twitter.com/widgets.js"]';
+    const existing = document.querySelector(selector);
+    if (existing) {
+      existing.addEventListener("load", run, { once: true });
+      return () => existing.removeEventListener("load", run);
+    }
+    const script = document.createElement("script");
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.async = true;
+    script.onload = run;
+    document.body.appendChild(script);
+    return () => {
+      script.onload = null;
+    };
+  }, [url]);
+  return /* @__PURE__ */ jsx5("div", { ref: containerRef, className: "cmx-mdx__twitter", children: /* @__PURE__ */ jsx5("blockquote", { className: "twitter-tweet", children: /* @__PURE__ */ jsx5(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "cmx-mdx__twitter-fallback-link break-all",
+      children: url
+    }
+  ) }) }, url);
 }
 
 // src/mdx/components/basic/Instagram.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx6 } 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
-      }
-    )
-  ] });
+  useEffect2(() => {
+    const run = () => window.instgrm?.Embeds.process();
+    if (window.instgrm) {
+      run();
+      return;
+    }
+    const selector = 'script[src="https://www.instagram.com/embed.js"]';
+    const existing = document.querySelector(selector);
+    if (existing) {
+      existing.addEventListener("load", run, { once: true });
+      return () => existing.removeEventListener("load", run);
+    }
+    const script = document.createElement("script");
+    script.src = "https://www.instagram.com/embed.js";
+    script.async = true;
+    script.onload = run;
+    document.body.appendChild(script);
+    return () => {
+      script.onload = null;
+    };
+  }, [url]);
+  return /* @__PURE__ */ jsx6("div", { className: "cmx-mdx__instagram", children: /* @__PURE__ */ jsx6(
+    "blockquote",
+    {
+      className: "instagram-media cmx-mdx__instagram-embed",
+      "data-instgrm-permalink": url,
+      "data-instgrm-version": "14",
+      children: /* @__PURE__ */ jsx6(
+        "a",
+        {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "cmx-mdx__instagram-link break-all",
+          children: url
+        }
+      )
+    }
+  ) }, url);
 }
 
 // src/mdx/components/basic/TikTok.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function extractTikTokVideoId(url) {
   const match = url.match(/\/video\/(\d+)/);
   return match ? match[1] : null;
@@ -549,7 +598,7 @@ function extractTikTokVideoId(url) {
 function TikTok({ url }) {
   const videoId = extractTikTokVideoId(url);
   if (!videoId) {
-    return /* @__PURE__ */ jsxs5("div", { className: "cmx-mdx__tiktok cmx-mdx__tiktok--error", children: [
+    return /* @__PURE__ */ jsxs3("div", { className: "cmx-mdx__tiktok cmx-mdx__tiktok--error", children: [
       /* @__PURE__ */ jsx7("p", { className: "cmx-mdx__tiktok-label", children: "TikTok" }),
       /* @__PURE__ */ jsx7(
         "a",
@@ -576,9 +625,9 @@ function TikTok({ url }) {
 }
 
 // src/mdx/components/basic/Bluesky.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Bluesky({ url }) {
-  return /* @__PURE__ */ jsxs6("div", { className: "cmx-mdx__bluesky", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "cmx-mdx__bluesky", children: [
     /* @__PURE__ */ jsx8("p", { className: "cmx-mdx__bluesky-label", children: "Bluesky" }),
     /* @__PURE__ */ jsx8(
       "a",
@@ -594,7 +643,7 @@ function Bluesky({ url }) {
 }
 
 // src/mdx/components/basic/Vimeo.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function extractVimeoId(url) {
   const match = url.match(/vimeo\.com\/(\d+)/);
   return match ? match[1] : null;
@@ -602,7 +651,7 @@ function extractVimeoId(url) {
 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: [
+    return /* @__PURE__ */ jsx9("div", { className: "cmx-mdx__vimeo cmx-mdx__vimeo--error", children: /* @__PURE__ */ jsxs5("p", { className: "cmx-mdx__error-text", children: [
       "\u7121\u52B9\u306AVimeo URL: ",
       url
     ] }) });
@@ -619,7 +668,7 @@ function Vimeo({ url }) {
 }
 
 // src/mdx/components/basic/Spotify.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function toSpotifyEmbedUrl(url) {
   const match = url.match(/open\.spotify\.com\/(track|album|playlist|episode|show)\/([^?#]+)/);
   if (!match) return null;
@@ -628,7 +677,7 @@ function toSpotifyEmbedUrl(url) {
 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: [
+    return /* @__PURE__ */ jsx10("div", { className: "cmx-mdx__spotify cmx-mdx__spotify--error", children: /* @__PURE__ */ jsxs6("p", { className: "cmx-mdx__error-text", children: [
       "\u7121\u52B9\u306ASpotify URL: ",
       url
     ] }) });
@@ -647,7 +696,7 @@ function Spotify({ url, theme = "light" }) {
 }
 
 // src/mdx/components/basic/Gist.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function extractGistId(url) {
   const match = url.match(/gist\.github\.com\/([^/]+)\/([a-f0-9]+)/);
   if (!match) return null;
@@ -656,7 +705,7 @@ function extractGistId(url) {
 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: [
+    return /* @__PURE__ */ jsx11("div", { className: "cmx-mdx__gist cmx-mdx__gist--error", children: /* @__PURE__ */ jsxs7("p", { className: "cmx-mdx__error-text", children: [
       "\u7121\u52B9\u306AGist URL: ",
       url
     ] }) });
@@ -672,7 +721,7 @@ function Gist({ url }) {
 }
 
 // src/mdx/components/basic/CodePen.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function toCodePenEmbedUrl(url) {
   const match = url.match(/codepen\.io\/([^/]+)\/(?:pen|full|details)\/([^?#]+)/);
   if (!match) return null;
@@ -681,7 +730,7 @@ function toCodePenEmbedUrl(url) {
 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: [
+    return /* @__PURE__ */ jsx12("div", { className: "cmx-mdx__codepen cmx-mdx__codepen--error", children: /* @__PURE__ */ jsxs8("p", { className: "cmx-mdx__error-text", children: [
       "\u7121\u52B9\u306ACodePen URL: ",
       url
     ] }) });
@@ -700,7 +749,7 @@ function CodePen({ url, height = 400, defaultTab = "result" }) {
 }
 
 // src/mdx/components/basic/CodeSandbox.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function toCodeSandboxEmbedUrl(url) {
   const match = url.match(/codesandbox\.io\/(?:s|p)\/([^?#]+)/);
   if (!match) return null;
@@ -709,7 +758,7 @@ function toCodeSandboxEmbedUrl(url) {
 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: [
+    return /* @__PURE__ */ jsx13("div", { className: "cmx-mdx__codesandbox cmx-mdx__codesandbox--error", children: /* @__PURE__ */ jsxs9("p", { className: "cmx-mdx__error-text", children: [
       "\u7121\u52B9\u306ACodeSandbox URL: ",
       url
     ] }) });
@@ -747,9 +796,9 @@ function GoogleMap({ url, height = 450 }) {
 }
 
 // src/mdx/components/basic/Details.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Details({ summary, children }) {
-  return /* @__PURE__ */ jsxs12("details", { className: "cmx-mdx__details", children: [
+  return /* @__PURE__ */ jsxs10("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 })
   ] });
@@ -757,7 +806,7 @@ function Details({ summary, children }) {
 
 // src/mdx/components/basic/Tabs.tsx
 import { useState, Children, isValidElement } from "react";
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function Tabs({ children }) {
   const [activeIndex, setActiveIndex] = useState(0);
   const tabs = [];
@@ -771,7 +820,7 @@ function Tabs({ children }) {
     }
   });
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsxs13("div", { className: "cmx-mdx__tabs overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs11("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",
       {
@@ -806,9 +855,9 @@ function Column({ children }) {
 }
 
 // src/mdx/components/basic/Audio.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Audio({ src, title }) {
-  return /* @__PURE__ */ jsxs14("div", { className: "cmx-mdx__audio", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: "cmx-mdx__audio", children: [
     title && /* @__PURE__ */ jsx18("p", { className: "cmx-mdx__audio-title", children: title }),
     /* @__PURE__ */ jsx18(
       "audio",
@@ -823,9 +872,9 @@ function Audio({ src, title }) {
 }
 
 // src/mdx/components/basic/Video.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function Video({ src, title, poster }) {
-  return /* @__PURE__ */ jsxs15("div", { className: "cmx-mdx__video", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "cmx-mdx__video", children: [
     title && /* @__PURE__ */ jsx19("p", { className: "cmx-mdx__video-title", children: title }),
     /* @__PURE__ */ jsx19(
       "video",
@@ -842,12 +891,12 @@ function Video({ src, title, poster }) {
 
 // src/mdx/components/basic/FileDownload.tsx
 import { Download } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } 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: [
+  return /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "cmx-mdx__filedownload-info flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx20(
         "a",
         {
@@ -863,9 +912,9 @@ function FileDownload({ url, filename, size }) {
 }
 
 // src/mdx/components/basic/TableOfContents.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function TableOfContents({ maxDepth = 3 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs15(
     "nav",
     {
       className: "cmx-mdx__toc",
@@ -908,15 +957,15 @@ var basicComponents = {
 
 // src/mdx/components/custom/BlogCard.tsx
 import Link2 from "next/link";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 function BlogCard({ contentId, title, slug, excerpt }) {
   if (!title || !slug) {
-    return /* @__PURE__ */ jsx22("div", { className: "cmx-mdx__blogcard cmx-mdx__blogcard--unresolved", children: /* @__PURE__ */ jsxs18("p", { className: "cmx-mdx__blogcard-text", children: [
+    return /* @__PURE__ */ jsx22("div", { className: "cmx-mdx__blogcard cmx-mdx__blogcard--unresolved", children: /* @__PURE__ */ jsxs16("p", { className: "cmx-mdx__blogcard-text", children: [
       "\u8A18\u4E8B\u30AB\u30FC\u30C9: ",
       contentId
     ] }) });
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs16(
     Link2,
     {
       href: `/${slug}`,
@@ -931,7 +980,7 @@ function BlogCard({ contentId, title, slug, excerpt }) {
 
 // src/mdx/components/custom/Image.tsx
 import NextImage from "next/image";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function Image({
   assetId,
   alt = "",
@@ -942,13 +991,13 @@ function Image({
   height
 }) {
   if (!url) {
-    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: [
+    return /* @__PURE__ */ jsxs17("figure", { className: "cmx-mdx__image", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "cmx-mdx__image--unresolved", children: [
+        /* @__PURE__ */ jsxs17("p", { className: "cmx-mdx__image-id", children: [
           "\u753B\u50CF: ",
           assetId
         ] }),
-        /* @__PURE__ */ jsxs19("p", { className: "cmx-mdx__image-size", children: [
+        /* @__PURE__ */ jsxs17("p", { className: "cmx-mdx__image-size", children: [
           "\u30B5\u30A4\u30BA: ",
           size
         ] })
@@ -956,7 +1005,7 @@ function Image({
       caption && /* @__PURE__ */ jsx23("figcaption", { className: "cmx-mdx__image-caption", children: caption })
     ] });
   }
-  return /* @__PURE__ */ jsxs19("figure", { className: "cmx-mdx__image", children: [
+  return /* @__PURE__ */ jsxs17("figure", { className: "cmx-mdx__image", children: [
     /* @__PURE__ */ jsx23(
       NextImage,
       {
@@ -972,7 +1021,7 @@ function Image({
 }
 
 // src/mdx/components/custom/Gallery.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var gridClasses2 = {
   1: "grid-cols-1",
   2: "grid-cols-1 sm:grid-cols-2",
@@ -984,7 +1033,7 @@ var gridClasses2 = {
 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: [
+  return /* @__PURE__ */ jsxs18("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",
       {
@@ -1964,7 +2013,7 @@ function quickValidateMdx(mdx) {
 // src/render.tsx
 import { MdastToJsx } from "safe-mdx";
 import { mdxParse } from "safe-mdx/parse";
-import { Fragment, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function convertReferencesToMaps(refs) {
   const contentsMap = /* @__PURE__ */ new Map();
   const assetsMap = /* @__PURE__ */ new Map();
@@ -2141,7 +2190,7 @@ async function renderMdxPreview(mdx, additionalComponents) {
     return renderSafeMdx(mdx, components);
   } catch (error) {
     console.error("MDX render error:", error);
-    return /* @__PURE__ */ jsxs21("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [
+    return /* @__PURE__ */ jsxs19("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" })
     ] });