@blogmcp/mdx-render-react 0.1.0

package/dist/render/codeblock/CodeBlockDefault.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as g, useRef as p, useCallback as x } from "react";
+import { getLanguageLabel as h } from "./language-labels.js";
+function v({ language: r, title: a, children: c }) {
+  const l = h(r), d = `language-${r || "text"}`, [t, n] = g(!1), s = p(null), i = x(async () => {
+    const m = s.current?.textContent || "";
+    try {
+      await navigator.clipboard.writeText(m), n(!0), setTimeout(() => n(!1), 2e3);
+    } catch (u) {
+      console.error("Failed to copy code:", u);
+    }
+  }, []);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: "code-block my-6 rounded-lg overflow-hidden border border-gray-200 bg-gray-50",
+      "data-mdx-component": "CodeBlock",
+      children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 font-medium", children: l }),
+            a ? /* @__PURE__ */ e("span", { className: "text-xs text-gray-500", children: a }) : null
+          ] }),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: [
+                "flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors",
+                t ? "bg-green-500 text-white" : "hover:bg-gray-200 text-gray-500 hover:text-gray-700"
+              ].join(" "),
+              onClick: i,
+              children: [
+                t ? /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                  }
+                ) }),
+                t ? "Copied!" : "Copy"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "code-block-content p-4 overflow-x-auto", children: /* @__PURE__ */ e("pre", { className: "m-0", children: /* @__PURE__ */ e("code", { ref: s, className: d, children: c }) }) })
+      ]
+    }
+  );
+}
+export {
+  v as default
+};

package/dist/render/codeblock/language-labels.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Language label mappings — mirrored verbatim from
+ * `@blogmcp/mdx-render-vue/src/composables/useCodeBlock.ts` so the React
+ * CodeBlock header reads identically to the Vue one.
+ */
+export declare const languageLabels: Record<string, string>;
+/** Get display label for a language (capitalizes unknown languages). */
+export declare function getLanguageLabel(language?: string): string;

package/dist/render/codeblock/language-labels.js

@@ -0,0 +1,42 @@
+const e = {
+  js: "JavaScript",
+  javascript: "JavaScript",
+  ts: "TypeScript",
+  typescript: "TypeScript",
+  vue: "Vue",
+  html: "HTML",
+  css: "CSS",
+  json: "JSON",
+  python: "Python",
+  py: "Python",
+  bash: "Bash",
+  sh: "Shell",
+  sql: "SQL",
+  text: "Plain Text",
+  rust: "Rust",
+  go: "Go",
+  java: "Java",
+  cpp: "C++",
+  c: "C",
+  csharp: "C#",
+  php: "PHP",
+  ruby: "Ruby",
+  swift: "Swift",
+  kotlin: "Kotlin",
+  yaml: "YAML",
+  yml: "YAML",
+  xml: "XML",
+  markdown: "Markdown",
+  md: "Markdown",
+  graphql: "GraphQL",
+  dockerfile: "Dockerfile"
+};
+function r(a) {
+  if (!a) return "Plain Text";
+  const t = a.toLowerCase();
+  return e[t] ? e[t] : t.charAt(0).toUpperCase() + t.slice(1);
+}
+export {
+  r as getLanguageLabel,
+  e as languageLabels
+};

package/dist/render/gallery/GalleryGrid.d.ts

@@ -0,0 +1,11 @@
+import type { GalleryProps } from '@blogmcp/mdx-schema';
+/**
+ * Image/video grid. Client island — mirrors Vue GalleryGrid.vue + useGallery.ts.
+ *
+ * The grid (initial DOM) is unchanged: `data-mdx-component="Gallery"`,
+ * `grid-cols-N`, video posters, captions, and expand-icon overlay all match the
+ * static/Vue versions. Clicking a (non-video) image opens a fullscreen lightbox
+ * (GalleryLightbox) with prev/next, Escape, and backdrop-to-close — the lightbox
+ * indexes only the image items, exactly like the Vue `imageOnlyIndices` mapping.
+ */
+export default function GalleryGrid({ images, columns, gap, aspectRatio, fit, position }: GalleryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/render/gallery/GalleryGrid.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as l, Fragment as h, jsx as r } from "react/jsx-runtime";
+import { useState as y, useMemo as j } from "react";
+import { galleryTileLayout as O, isVideo as s, gridColsClass as z, gapClass as A, getImageDescription as u, getVideoPoster as D, getImageSrc as a, getImageAlt as m } from "./gallery.js";
+import V from "./GalleryLightbox.js";
+function T({ images: t, columns: x, gap: v, aspectRatio: b, fit: f, position: C }) {
+  const [I, c] = y(!1), [w, d] = y(0), i = O({ aspectRatio: b, fit: f, position: C }), n = j(() => {
+    const e = [];
+    if (!t) return e;
+    for (let o = 0; o < t.length; o++)
+      s(t[o]) || e.push(o);
+    return e;
+  }, [t]);
+  if (!t || t.length === 0) return null;
+  const N = n.length;
+  function S(e) {
+    if (s(t[e])) return;
+    const o = n.indexOf(e);
+    o !== -1 && (d(o), c(!0));
+  }
+  const L = (e) => a(t[n[e]]), k = (e) => m(t[n[e]], n[e]), G = (e) => u(t[n[e]]);
+  return /* @__PURE__ */ l(h, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: ["gallery my-6", z(x), A(v)].join(" "),
+        style: { display: "grid" },
+        "data-mdx-component": "Gallery",
+        children: t.map((e, o) => {
+          const g = u(e), p = s(e);
+          return /* @__PURE__ */ l("div", { className: "gallery-item", children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: ["gallery-media group relative overflow-hidden rounded", p ? "bg-gray-900" : "bg-gray-100 cursor-pointer"].join(" ").trim(),
+                style: i.tileStyle,
+                onClick: () => S(o),
+                children: p ? /* @__PURE__ */ r(
+                  "video",
+                  {
+                    src: a(e),
+                    poster: D(e),
+                    controls: !0,
+                    preload: "metadata",
+                    className: i.mediaSizeClass,
+                    style: i.mediaStyle
+                  }
+                ) : /* @__PURE__ */ l(h, { children: [
+                  /* @__PURE__ */ r(
+                    "img",
+                    {
+                      src: a(e),
+                      alt: m(e, o),
+                      className: [i.mediaSizeClass, "transition-transform duration-200 group-hover:scale-[1.03]"].join(" "),
+                      style: i.mediaStyle,
+                      loading: "lazy"
+                    }
+                  ),
+                  /* @__PURE__ */ r("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200 pointer-events-none" }),
+                  /* @__PURE__ */ l(
+                    "svg",
+                    {
+                      className: "gallery-expand-icon absolute top-2 right-2 text-white opacity-50 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-80 transition-opacity duration-200 drop-shadow-md pointer-events-none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ r("polyline", { points: "15 3 21 3 21 9" }),
+                        /* @__PURE__ */ r("polyline", { points: "9 21 3 21 3 15" }),
+                        /* @__PURE__ */ r("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+                        /* @__PURE__ */ r("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+                      ]
+                    }
+                  )
+                ] })
+              }
+            ),
+            g ? /* @__PURE__ */ r("p", { className: "gallery-description text-center text-sm text-gray-500 mt-2", children: g }) : null
+          ] }, o);
+        })
+      }
+    ),
+    /* @__PURE__ */ r(
+      V,
+      {
+        isOpen: I,
+        currentIndex: w,
+        imageCount: N,
+        getImageSrc: L,
+        getImageAlt: k,
+        getImageDescription: G,
+        onClose: () => c(!1),
+        onNavigate: d
+      }
+    )
+  ] });
+}
+export {
+  T as default
+};

package/dist/render/gallery/GalleryLightbox.d.ts

@@ -0,0 +1,18 @@
+export interface GalleryLightboxProps {
+    isOpen: boolean;
+    currentIndex: number;
+    imageCount: number;
+    getImageSrc: (index: number) => string;
+    getImageAlt: (index: number) => string;
+    getImageDescription: (index: number) => string | undefined;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+}
+/**
+ * Fullscreen image viewer with keyboard + touch navigation. Client island —
+ * mirrors Vue GalleryLightbox.vue: portalled to <body>, dark backdrop,
+ * close/prev/next buttons, image counter, Escape + ArrowLeft/Right keys,
+ * click-backdrop-to-close, and horizontal-swipe navigation. Markup, classes,
+ * and `aria-label`s match the Vue source.
+ */
+export default function GalleryLightbox({ isOpen, currentIndex, imageCount, getImageSrc, getImageAlt, getImageDescription, onClose, onNavigate, }: GalleryLightboxProps): import("react").ReactPortal | null;

package/dist/render/gallery/GalleryLightbox.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useEffect as b, useRef as x, useCallback as w } from "react";
+import { createPortal as E } from "react-dom";
+function N({
+  isOpen: s,
+  currentIndex: t,
+  imageCount: r,
+  getImageSrc: p,
+  getImageAlt: y,
+  getImageDescription: k,
+  onClose: n,
+  onNavigate: l
+}) {
+  const h = t > 0, a = t < r - 1, u = r > 1;
+  b(() => {
+    if (!s) return;
+    function e(i) {
+      i.key === "Escape" ? n() : i.key === "ArrowLeft" && t > 0 ? l(t - 1) : i.key === "ArrowRight" && t < r - 1 && l(t + 1);
+    }
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [s, t, r, n, l]), b(() => {
+    if (s)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [s]);
+  const d = x(0), m = x(0), g = w((e) => {
+    d.current = e.touches[0].clientX, m.current = e.touches[0].clientY;
+  }, []), v = w(
+    (e) => {
+      const i = e.changedTouches[0].clientX - d.current, j = e.changedTouches[0].clientY - m.current;
+      Math.abs(i) > 50 && Math.abs(i) > Math.abs(j) && (i < 0 && a ? l(t + 1) : i > 0 && h && l(t - 1));
+    },
+    [t, a, h, l]
+  ), L = w(
+    (e) => {
+      e.target === e.currentTarget && n();
+    },
+    [n]
+  );
+  if (!s || typeof document > "u") return null;
+  const f = k(t);
+  return E(
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "lightbox-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/90",
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: L,
+        onTouchStart: g,
+        onTouchEnd: v,
+        children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "lightbox-close absolute top-4 right-4 z-10 text-white/80 hover:text-white p-2",
+              "aria-label": "Close lightbox",
+              onClick: n,
+              children: /* @__PURE__ */ c(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "28",
+                  height: "28",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ o("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ o("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
+            }
+          ),
+          u ? /* @__PURE__ */ c("div", { className: "lightbox-counter absolute top-4 left-4 text-white/80 text-sm select-none", children: [
+            t + 1,
+            " / ",
+            r
+          ] }) : null,
+          u && h ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "lightbox-prev absolute left-4 top-1/2 -translate-y-1/2 z-10 text-white/80 hover:text-white p-2",
+              "aria-label": "Previous image",
+              onClick: () => l(t - 1),
+              children: /* @__PURE__ */ o(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "32",
+                  height: "32",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" })
+                }
+              )
+            }
+          ) : null,
+          u && a ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: "lightbox-next absolute right-4 top-1/2 -translate-y-1/2 z-10 text-white/80 hover:text-white p-2",
+              "aria-label": "Next image",
+              onClick: () => l(t + 1),
+              children: /* @__PURE__ */ o(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "32",
+                  height: "32",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" })
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ c("div", { className: "flex flex-col items-center max-h-[95vh] max-w-[90vw]", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ o(
+              "img",
+              {
+                src: p(t),
+                alt: y(t),
+                className: "lightbox-image max-h-[85vh] max-w-[90vw] object-contain"
+              }
+            ),
+            f ? /* @__PURE__ */ o("p", { className: "lightbox-caption text-white/80 text-sm mt-3 text-center max-w-[80vw]", children: f }) : null
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  N as default
+};

package/dist/render/gallery/gallery.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Gallery helpers — mirrored from
+ * `@blogmcp/mdx-render-vue/src/composables/useGallery.ts`.
+ */
+import type { CSSProperties } from 'react';
+import type { GalleryImage, GalleryProps, MediaObject } from '@blogmcp/mdx-schema';
+export declare const gridColsClasses: Record<number, string>;
+export declare function isMediaObject(value: unknown): value is MediaObject;
+export declare function isVideoUrl(src: string): boolean;
+export declare function gridColsClass(columns?: number): string;
+export declare function gapClass(gap?: number): string;
+/**
+ * React-typed adapter over the shared, framework-agnostic `galleryTileLayout`
+ * in `@blogmcp/mdx-schema/styles` (the single source of truth for tile
+ * geometry — keeps the Vue + React flavors byte-identical). The shared helper
+ * returns `Record<string,string>`; the values are valid CSS, so casting to
+ * React's `CSSProperties` for the `style` prop is safe.
+ */
+export interface GalleryTileLayout {
+    tileStyle: CSSProperties;
+    mediaStyle: CSSProperties;
+    mediaSizeClass: string;
+}
+export declare function galleryTileLayout(props: Pick<GalleryProps, 'aspectRatio' | 'fit' | 'position'>): GalleryTileLayout;
+export declare function getImageSrc(image: GalleryImage): string;
+export declare function getImageAlt(image: GalleryImage, index: number): string;
+export declare function getImageDescription(image: GalleryImage): string | undefined;
+export declare function isVideo(image: GalleryImage): boolean;
+export declare function getVideoPoster(image: GalleryImage): string | undefined;

package/dist/render/gallery/gallery.js

@@ -0,0 +1,56 @@
+import { galleryTileLayout as o } from "@blogmcp/mdx-schema/styles";
+const s = /\.(mp4|webm|mov|avi|mkv|m4v)(\?.*)?$/i, l = /\/api\/media\/file\/([^/?#]+)/, c = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function e(t) {
+  return typeof t == "object" && t !== null && "src" in t && typeof t.src == "string";
+}
+function n(t) {
+  return s.test(t);
+}
+function d(t) {
+  return c[t || 2] || "grid-cols-2";
+}
+function f(t) {
+  return `gap-${t || 4}`;
+}
+function y(t) {
+  const r = o(t);
+  return {
+    tileStyle: r.tileStyle,
+    mediaStyle: r.mediaStyle,
+    mediaSizeClass: r.mediaSizeClass
+  };
+}
+function u(t) {
+  return e(t) ? t.src : t;
+}
+function g(t, r) {
+  return e(t) ? t.alt || `Gallery image ${r + 1}` : `Gallery image ${r + 1}`;
+}
+function p(t) {
+  return e(t) ? t.description : void 0;
+}
+function m(t) {
+  return e(t) ? t.type === "video" ? !0 : t.type === "image" ? !1 : n(t.src) : n(t);
+}
+function S(t) {
+  const i = u(t).match(l);
+  return i ? `/api/media/poster/${i[1]}` : void 0;
+}
+export {
+  y as galleryTileLayout,
+  f as gapClass,
+  g as getImageAlt,
+  p as getImageDescription,
+  u as getImageSrc,
+  S as getVideoPoster,
+  d as gridColsClass,
+  c as gridColsClasses,
+  e as isMediaObject,
+  m as isVideo,
+  n as isVideoUrl
+};

package/dist/render/icon/Icon.d.ts

@@ -0,0 +1,11 @@
+export interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
+}
+/**
+ * Inline Iconify icon (any set). Mirrors Vue Icon.vue — the
+ * data-mdx-component attribute lands on the rendered <svg> via Iconify's
+ * attribute pass-through.
+ */
+export default function Icon({ name, size, color }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/icon/Icon.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Icon as a } from "@iconify/react";
+function m({ name: t, size: n = 20, color: o }) {
+  return /* @__PURE__ */ i(
+    a,
+    {
+      icon: t,
+      width: n,
+      height: n,
+      style: o ? { color: o } : void 0,
+      className: "inline-block align-[-0.125em]",
+      "data-mdx-component": "Icon"
+    }
+  );
+}
+export {
+  m as default
+};

package/dist/render/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * React MDX render components.
+ *
+ * Named exports for every render component. The two client islands (Tooltip,
+ * AudioPlayerDefault) carry their own `'use client'` banner.
+ */
+export { default as CalloutDefault } from './callout/CalloutDefault';
+export { default as CalloutMinimal } from './callout/CalloutMinimal';
+export { default as YouTubeDefault } from './youtube/YouTubeDefault';
+export { default as GalleryGrid } from './gallery/GalleryGrid';
+export { default as CodeBlockDefault } from './codeblock/CodeBlockDefault';
+export { default as AudioPlayerDefault } from './audioplayer/AudioPlayerDefault';
+export { default as Button } from './button/Button';
+export { default as Card } from './card/Card';
+export { default as Alert } from './alert/Alert';
+export { default as Badge } from './badge/Badge';
+export { default as Icon } from './icon/Icon';
+export { default as Tooltip } from './tooltip/Tooltip';
+export type { ButtonProps } from './button/Button';
+export type { BadgeProps } from './badge/Badge';
+export type { AlertProps } from './alert/Alert';
+export type { CardProps } from './card/Card';
+export type { IconProps } from './icon/Icon';
+export type { TooltipProps } from './tooltip/Tooltip';
+export type { CalloutProps } from './callout/CalloutDefault';

package/dist/render/index.js

@@ -0,0 +1,26 @@
+import { default as o } from "./callout/CalloutDefault.js";
+import { default as r } from "./callout/CalloutMinimal.js";
+import { default as l } from "./youtube/YouTubeDefault.js";
+import { default as d } from "./gallery/GalleryGrid.js";
+import { default as p } from "./codeblock/CodeBlockDefault.js";
+import { default as x } from "./audioplayer/AudioPlayerDefault.js";
+import { default as C } from "./button/Button.js";
+import { default as n } from "./card/Card.js";
+import { default as c } from "./alert/Alert.js";
+import { default as A } from "./badge/Badge.js";
+import { default as T } from "./icon/Icon.js";
+import { default as g } from "./tooltip/Tooltip.js";
+export {
+  c as Alert,
+  x as AudioPlayerDefault,
+  A as Badge,
+  C as Button,
+  o as CalloutDefault,
+  r as CalloutMinimal,
+  n as Card,
+  p as CodeBlockDefault,
+  d as GalleryGrid,
+  T as Icon,
+  g as Tooltip,
+  l as YouTubeDefault
+};

package/dist/render/tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface TooltipProps {
+    label: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    children?: ReactNode;
+}
+/**
+ * Hover-reveal tooltip backed by Ark UI (React). Client island — mirrors Vue
+ * Tooltip.vue: same Ark namespaced primitive, same delays/positioning, same
+ * content classes, portalled content. The trigger wraps an inline span that
+ * carries `data-mdx-component="Tooltip"`.
+ */
+export default function Tooltip({ label, placement, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { Tooltip as e, Portal as n } from "@ark-ui/react";
+function d({ label: a, placement: i = "top", children: r }) {
+  return /* @__PURE__ */ t(e.Root, { positioning: { placement: i }, openDelay: 200, closeDelay: 100, children: [
+    /* @__PURE__ */ o(e.Trigger, { asChild: !0, children: /* @__PURE__ */ o("span", { className: "inline-flex", "data-mdx-component": "Tooltip", children: r }) }),
+    /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(e.Positioner, { children: /* @__PURE__ */ t(e.Content, { className: "z-50 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs text-white shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out", children: [
+      /* @__PURE__ */ o(e.Arrow, { children: /* @__PURE__ */ o(e.ArrowTip, { className: "border-gray-900" }) }),
+      a
+    ] }) }) })
+  ] });
+}
+export {
+  d as default
+};

package/dist/render/youtube/YouTubeDefault.d.ts

@@ -0,0 +1,11 @@
+import type { YouTubeProps } from '@blogmcp/mdx-schema';
+/**
+ * YouTube facade. Client island — mirrors Vue YouTubeDefault.vue + useYouTube.ts.
+ *
+ * Facade pattern: renders a thumbnail + play-button overlay initially (the
+ * server/initial DOM), and swaps to the real autoplay iframe on click — saving
+ * ~500KB per embed until the user actually plays. The `youtube-embed` wrapper,
+ * `data-mdx-component="YouTube"`, and the 56.25% aspect-ratio box are identical
+ * to the static/Vue versions; the interactive bit lives inside the box.
+ */
+export default function YouTubeDefault({ id, title }: YouTubeProps): import("react/jsx-runtime").JSX.Element;