@blogmcp/mdx-render-react 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# @blogmcp/mdx-render-react
+
+**Status: scaffold only.** Implementation deferred until a React consumer exists (blog or md-editor React port).
+
+This package mirrors [`@blogmcp/mdx-render-vue`](../mdx-render-vue/) against the shared
+[`@blogmcp/mdx-schema`](../mdx-schema/) contract. Authoring stays identical across frameworks
+(same MDX syntax, same metadata, same MCP tool output) — only the renderer swaps.
+
+## Contract to implement
+
+```ts
+import { componentMetadata } from '@blogmcp/mdx-schema'
+import type { ComponentType } from 'react'
+
+export interface ReactComponentRegistration {
+  metadata: ComponentMetadata         // from @blogmcp/mdx-schema
+  render: Record<string, () => Promise<{ default: ComponentType<any> }>>
+  edit: () => Promise<{ default: ComponentType<any> }>
+}
+
+export const reactRegistry: Record<string, ReactComponentRegistration>
+```
+
+Implementation mirrors [`packages/mdx-render-vue/src/registry.ts`](../mdx-render-vue/src/registry.ts)
+— same keys (`Callout`, `YouTube`, `Gallery`, `CodeBlock`, `AudioPlayer`), same variants, React
+components instead of Vue SFCs. Prefer Ark UI React primitives where Vue uses Ark UI Vue; share
+Tailwind classes verbatim.
+
+## When to implement
+
+When the first React consumer appears (blog-react or editor-react). Until then, keep the package
+empty so the schema contract proves framework-neutral by construction.

package/dist/MdxContent.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import type { ImageHtmlRenderer, SanitizeFn } from '@blogmcp/sdk';
+export interface MdxContentProps {
+    /** Raw MDX/markdown source (frontmatter allowed; it is stripped). */
+    content: string;
+    /** Optional custom image HTML renderer (IPX, Cloudinary, …). */
+    imageRenderer?: ImageHtmlRenderer;
+    /**
+     * Optional HTML sanitizer override. Defaults to `sanitizeHtml` from
+     * `@blogmcp/sanitize` (DOMPurify with our strict config). Pass `null`
+     * to opt out for trusted-self surfaces.
+     */
+    sanitize?: SanitizeFn | null;
+}
+/**
+ * Renders MDX content as a tree of React Server Components.
+ *
+ * Mirrors the Vue blog renderer (KbMdxContent.vue):
+ *  - strips frontmatter
+ *  - fast-paths pure markdown via `marked` → dangerouslySetInnerHTML
+ *  - otherwise splits via `extractMdxComponents`, rendering html chunks via
+ *    `marked` and components via `serverRenderMap[name]`
+ *  - recurses into component children by rendering a nested <MdxContent>
+ *    (React equivalent of Vue's raw-string default slot)
+ *  - unknown component → the same yellow fallback box the Vue renderer shows
+ *
+ * Async Server Component: safe to `await` in RSC; works synchronously in tests.
+ */
+export default function MdxContent({ content, imageRenderer, sanitize }: MdxContentProps): Promise<ReactNode>;

package/dist/MdxContent.js

@@ -0,0 +1,51 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Fragment as h } from "react";
+import { stripFrontmatter as u, HAS_MDX_RE as f, extractMdxComponents as x } from "@blogmcp/mdx-schema/composables/parsing";
+import { createMarked as y } from "./marked.js";
+import { wrappedServerRenderMap as w } from "./server-render-map.js";
+async function v({ content: a, imageRenderer: c, sanitize: l }) {
+  const m = y({ imageRenderer: c, sanitize: l });
+  if (!a)
+    return /* @__PURE__ */ n("div", { className: "mdx-content" });
+  const s = u(a);
+  if (!f.test(s)) {
+    const t = await m.parse(s);
+    return /* @__PURE__ */ n("div", { className: "mdx-content", dangerouslySetInnerHTML: { __html: t } });
+  }
+  const o = x(s);
+  if (o.length === 1 && o[0].type === "html") {
+    const t = await m.parse(o[0].content);
+    return /* @__PURE__ */ n("div", { className: "mdx-content", dangerouslySetInnerHTML: { __html: t } });
+  }
+  const r = [];
+  for (let t = 0; t < o.length; t++) {
+    const e = o[t];
+    if (e.type === "html") {
+      const p = await m.parse(e.content);
+      r.push(/* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: p } }, t));
+      continue;
+    }
+    const d = w[e.name];
+    if (!d) {
+      r.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 my-4 text-yellow-800",
+            children: `Unknown component: ${e.name}`
+          },
+          t
+        )
+      );
+      continue;
+    }
+    const i = e.children ? await v({ content: e.children, imageRenderer: c, sanitize: l }) : void 0;
+    r.push(
+      /* @__PURE__ */ n(d, { ...e.props, children: i }, t)
+    );
+  }
+  return /* @__PURE__ */ n("div", { className: "mdx-content", children: r.map((t, e) => /* @__PURE__ */ n(h, { children: t }, e)) });
+}
+export {
+  v as default
+};

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @blogmcp/mdx-render-react
+ *
+ * React renderer for MDX components. Implements the same contract as
+ * @blogmcp/mdx-render-vue against the shared @blogmcp/mdx-schema. Authoring
+ * (MDX syntax, metadata, MCP tool output) is identical across frameworks —
+ * only the renderer swaps.
+ *
+ * The blog/RSC path uses `MdxContent` (async Server Component) + the static
+ * `serverRenderMap`. `reactRegistry` mirrors the Vue registry for future
+ * tooling (lazy variant resolution, an eventual React md-editor).
+ */
+export { default as MdxContent } from './MdxContent';
+export type { MdxContentProps } from './MdxContent';
+export { serverRenderMap } from './server-render-map';
+export { reactRegistry, componentMetadata, getComponentMetadata, getComponentNames, getComponentVariants, getRenderComponentAsync, type ReactComponentRegistration, } from './registry';
+export { createMarked, marked, defaultImageHtml } from './marked';
+export type { ImageHtmlRenderer } from './marked';
+export * from './render/index';

package/dist/index.js

@@ -0,0 +1,43 @@
+import { default as o } from "./MdxContent.js";
+import { serverRenderMap as r } from "./server-render-map.js";
+import { getComponentVariants as l, getRenderComponentAsync as m, reactRegistry as d } from "./registry.js";
+import { createMarked as u, marked as n } from "./marked.js";
+import { default as s } from "./render/callout/CalloutDefault.js";
+import { default as g } from "./render/callout/CalloutMinimal.js";
+import { default as c } from "./render/youtube/YouTubeDefault.js";
+import { default as y } from "./render/gallery/GalleryGrid.js";
+import { default as k } from "./render/codeblock/CodeBlockDefault.js";
+import { default as B } from "./render/audioplayer/AudioPlayerDefault.js";
+import { default as G } from "./render/button/Button.js";
+import { default as T } from "./render/card/Card.js";
+import { default as v } from "./render/alert/Alert.js";
+import { default as N } from "./render/badge/Badge.js";
+import { default as V } from "./render/icon/Icon.js";
+import { default as h } from "./render/tooltip/Tooltip.js";
+import { componentMetadata as q, getComponentMetadata as w, getComponentNames as z } from "@blogmcp/mdx-schema/metadata";
+import { defaultImageHtml as F } from "@blogmcp/sdk";
+export {
+  v as Alert,
+  B as AudioPlayerDefault,
+  N as Badge,
+  G as Button,
+  s as CalloutDefault,
+  g as CalloutMinimal,
+  T as Card,
+  k as CodeBlockDefault,
+  y as GalleryGrid,
+  V as Icon,
+  o as MdxContent,
+  h as Tooltip,
+  c as YouTubeDefault,
+  q as componentMetadata,
+  u as createMarked,
+  F as defaultImageHtml,
+  w as getComponentMetadata,
+  z as getComponentNames,
+  l as getComponentVariants,
+  m as getRenderComponentAsync,
+  n as marked,
+  d as reactRegistry,
+  r as serverRenderMap
+};

package/dist/marked.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Configured `marked` instance for the React renderer.
+ *
+ * Reuses the SDK's `createMarkedInstance` so the image/link renderers, table
+ * wrap, and `th scope` post-processing match the Vue blog (KbMdxContent.vue)
+ * exactly. Consumers may pass a custom image renderer (IPX, Cloudinary, etc.)
+ * and an optional HTML sanitizer.
+ *
+ * Sanitization is wired by default via `@blogmcp/sanitize` — the reference
+ * renderer ships safe-by-default. Callers can opt out by passing `null`
+ * (intentional, grep-able) for trusted-self surfaces or when a downstream
+ * renderer applies its own sanitization.
+ */
+import { defaultImageHtml, type ImageHtmlRenderer, type SanitizeFn } from '@blogmcp/sdk';
+import { sanitizeHtml } from '@blogmcp/sanitize';
+import type { Marked } from 'marked';
+export { defaultImageHtml, sanitizeHtml };
+export type { ImageHtmlRenderer, SanitizeFn };
+export interface CreateMarkedOptions {
+    /** Custom image renderer. Defaults to plain <img> with lazy loading. */
+    imageRenderer?: ImageHtmlRenderer;
+    /**
+     * HTML sanitizer applied as the last step of `marked.parse()`. Defaults
+     * to `sanitizeHtml` from `@blogmcp/sanitize` (DOMPurify with our strict
+     * config). Pass `null` to opt out — only do this for trusted-self surfaces
+     * or when a downstream renderer applies its own sanitization. The opt-out
+     * is explicit and grep-able.
+     */
+    sanitize?: SanitizeFn | null;
+}
+/** Create a configured Marked instance (sanitize-on by default). */
+export declare function createMarked(opts?: CreateMarkedOptions): Marked;
+/** Shared default instance for the common case (no custom options). */
+export declare const marked: Marked;

package/dist/marked.js

@@ -0,0 +1,15 @@
+import { defaultImageHtml as a, createMarkedInstance as i } from "@blogmcp/sdk";
+import { defaultImageHtml as s } from "@blogmcp/sdk";
+import { sanitizeHtml as n } from "@blogmcp/sanitize";
+import { sanitizeHtml as z } from "@blogmcp/sanitize";
+function m(e = {}) {
+  const t = e.imageRenderer ?? a, r = e.sanitize === null ? void 0 : e.sanitize ?? n;
+  return i({ imageRenderer: t, sanitize: r });
+}
+const l = m();
+export {
+  m as createMarked,
+  s as defaultImageHtml,
+  l as marked,
+  z as sanitizeHtml
+};

package/dist/registry.d.ts

@@ -0,0 +1,33 @@
+/**
+ * React MDX Component Registry.
+ *
+ * Mirrors `@blogmcp/mdx-render-vue/src/registry.ts` against the shared schema.
+ * Attaches React-specific lazy render loaders to the framework-agnostic
+ * metadata published by `@blogmcp/mdx-schema`. Schema is the single source of
+ * truth for component descriptions, prop shapes, and MCP-facing examples.
+ *
+ * This registry is for future tooling (dynamic resolution, editor previews).
+ * The blog/RSC render path uses the static `serverRenderMap` instead.
+ */
+import { componentMetadata, getComponentMetadata, getComponentNames, type ComponentMetadata } from '@blogmcp/mdx-schema/metadata';
+export { componentMetadata, getComponentMetadata, getComponentNames };
+export interface ReactComponentRegistration {
+    metadata: ComponentMetadata;
+    /** Render variants: variant name → async loader. Must include 'default'. */
+    render: Record<string, () => Promise<{
+        default: unknown;
+    }>>;
+    /**
+     * Optional edit component loader. The blog only needs `render`; an editor
+     * (React md-editor port) would populate this later.
+     */
+    edit?: () => Promise<{
+        default: unknown;
+    }>;
+}
+/** Merged registry: schema metadata + React wiring, keyed by component name. */
+export declare const reactRegistry: Record<string, ReactComponentRegistration>;
+/** Get available render variant names for a component. */
+export declare function getComponentVariants(name: string): string[];
+/** Async resolver — loads only the requested render component. */
+export declare function getRenderComponentAsync(name: string, variant?: string): Promise<unknown | undefined>;

package/dist/registry.js

@@ -0,0 +1,88 @@
+import { componentMetadata as d } from "@blogmcp/mdx-schema/metadata";
+import { componentMetadata as f, getComponentMetadata as s, getComponentNames as g } from "@blogmcp/mdx-schema/metadata";
+const i = {
+  Callout: {
+    render: {
+      default: () => import("./render/callout/CalloutDefault.js"),
+      minimal: () => import("./render/callout/CalloutMinimal.js")
+    }
+  },
+  YouTube: {
+    render: {
+      default: () => import("./render/youtube/YouTubeDefault.js")
+    }
+  },
+  Gallery: {
+    render: {
+      default: () => import("./render/gallery/GalleryGrid.js"),
+      grid: () => import("./render/gallery/GalleryGrid.js")
+    }
+  },
+  CodeBlock: {
+    render: {
+      default: () => import("./render/codeblock/CodeBlockDefault.js")
+    }
+  },
+  AudioPlayer: {
+    render: {
+      default: () => import("./render/audioplayer/AudioPlayerDefault.js")
+    }
+  },
+  Button: {
+    render: {
+      default: () => import("./render/button/Button.js")
+    }
+  },
+  Card: {
+    render: {
+      default: () => import("./render/card/Card.js")
+    }
+  },
+  Alert: {
+    render: {
+      default: () => import("./render/alert/Alert.js")
+    }
+  },
+  Badge: {
+    render: {
+      default: () => import("./render/badge/Badge.js")
+    }
+  },
+  Icon: {
+    render: {
+      default: () => import("./render/icon/Icon.js")
+    }
+  },
+  Tooltip: {
+    render: {
+      default: () => import("./render/tooltip/Tooltip.js")
+    }
+  }
+}, o = Object.fromEntries(
+  d.map((e) => {
+    const r = i[e.name];
+    if (!r)
+      throw new Error(
+        `[mdx-render-react] No React wiring registered for component "${e.name}". Add an entry to reactWiring in registry.ts or remove the schema entry.`
+      );
+    return [e.name, { metadata: e, ...r }];
+  })
+);
+function u(e) {
+  const r = o[e];
+  return r ? Object.keys(r.render) : [];
+}
+async function p(e, r = "default") {
+  const t = o[e];
+  if (!t) return;
+  const n = t.render[r] || t.render.default;
+  return n ? (await n()).default : void 0;
+}
+export {
+  f as componentMetadata,
+  s as getComponentMetadata,
+  g as getComponentNames,
+  u as getComponentVariants,
+  p as getRenderComponentAsync,
+  o as reactRegistry
+};

package/dist/render/alert/Alert.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { type AlertSeverity } from '@blogmcp/mdx-schema/styles';
+export interface AlertProps {
+    severity?: AlertSeverity;
+    title?: string;
+    children?: ReactNode;
+}
+/**
+ * Inline notice — flatter/smaller than Callout. Mirrors Vue Alert.vue:
+ * severity → wrap classes + iconify icon + icon color (shared table),
+ * optional bold title, children inside a `prose-sm` body.
+ */
+export default function Alert({ severity, title, children }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/alert/Alert.js

@@ -0,0 +1,24 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { Icon as l } from "@iconify/react";
+import { alertStyles as r } from "@blogmcp/mdx-schema/styles";
+function d({ severity: n = "info", title: i, children: a }) {
+  const e = r.severity[n];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: [r.base, e.wrap].join(" "),
+      role: "alert",
+      "data-mdx-component": "Alert",
+      children: [
+        /* @__PURE__ */ s(l, { icon: e.icon, className: ["mt-0.5 shrink-0", e.iconClass].join(" "), width: 18, height: 18 }),
+        /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: [
+          i ? /* @__PURE__ */ s("div", { className: "mb-0.5 font-semibold", children: i }) : null,
+          /* @__PURE__ */ s("div", { className: "prose-sm", children: a })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/render/audioplayer/AudioPlayerDefault.d.ts

@@ -0,0 +1,6 @@
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema';
+/**
+ * Audio player with a collapsible, lazy-loaded transcript. Client island —
+ * mirrors Vue AudioPlayerDefault.vue + useAudioPlayer.ts behaviour and classes.
+ */
+export default function AudioPlayerDefault({ slug, title, showTranscription }: AudioPlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/audioplayer/AudioPlayerDefault.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs as n, jsx as r, Fragment as w } from "react/jsx-runtime";
+import { useState as o, useCallback as x } from "react";
+function j({ slug: e, title: l, showTranscription: h = !1 }) {
+  const y = !!l, f = l || e || "Audio", g = e ? `/api/media/file/${e}` : "", c = e ? `/api/media/transcription/${e}` : "", [t, s] = o(null), [d, b] = o(null), [v, m] = o(!1), [p, N] = o(!1), u = x(async () => {
+    if (!(!e || t !== null)) {
+      m(!0);
+      try {
+        const i = await fetch(c);
+        if (i.ok) {
+          const a = await i.json();
+          s(a.fullText || a.full_text || ""), b(a.summary || null);
+        } else
+          s("");
+      } catch {
+        s("");
+      } finally {
+        m(!1);
+      }
+    }
+  }, [e, c, t]), k = x(() => {
+    N((i) => {
+      const a = !i;
+      return a && t === null && u(), a;
+    });
+  }, [u, t]);
+  return /* @__PURE__ */ n("div", { className: "audio-player my-6 rounded-lg bg-gray-50 p-5 border border-gray-200", "data-mdx-component": "AudioPlayer", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-3 mb-3", children: [
+      /* @__PURE__ */ r("svg", { className: "w-5 h-5 text-gray-500 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ r(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+        }
+      ) }),
+      y ? /* @__PURE__ */ r("h3", { className: "text-base font-semibold text-gray-800 m-0", children: f }) : null
+    ] }),
+    /* @__PURE__ */ r("audio", { src: g, controls: !0, preload: "metadata", className: "w-full" }),
+    h ? /* @__PURE__ */ n("div", { className: "mt-4", children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors cursor-pointer bg-transparent border-0 p-0",
+          onClick: k,
+          children: [
+            /* @__PURE__ */ r(
+              "svg",
+              {
+                className: ["w-4 h-4 transition-transform", p ? "rotate-90" : ""].join(" ").trim(),
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+              }
+            ),
+            "Transcription"
+          ]
+        }
+      ),
+      p ? /* @__PURE__ */ r("div", { className: "mt-2 p-3 bg-white rounded border border-gray-200 text-sm text-gray-700 leading-relaxed max-h-64 overflow-y-auto", children: v ? /* @__PURE__ */ r("p", { className: "text-gray-400 italic", children: "Loading transcription..." }) : t ? /* @__PURE__ */ n(w, { children: [
+        d ? /* @__PURE__ */ n("div", { className: "mb-3 pb-3 border-b border-gray-200", children: [
+          /* @__PURE__ */ r("div", { className: "text-xs uppercase tracking-wide text-gray-400 mb-1", children: "Summary" }),
+          /* @__PURE__ */ r("div", { className: "text-gray-800", children: d })
+        ] }) : null,
+        /* @__PURE__ */ r("div", { className: "whitespace-pre-wrap", children: t })
+      ] }) : /* @__PURE__ */ r("p", { className: "text-gray-400 italic", children: "No transcription available." }) }) : null
+    ] }) : null
+  ] });
+}
+export {
+  j as default
+};

package/dist/render/badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { type BadgeVariant, type BadgeColor } from '@blogmcp/mdx-schema/styles';
+export interface BadgeProps {
+    label: string;
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+}
+/**
+ * Small label / tag. Mirrors Vue Badge.vue — a single <span> with the
+ * shared base + variant×color class table.
+ */
+export default function Badge({ label, color, variant }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/badge/Badge.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import { badgeStyles as a } from "@blogmcp/mdx-schema/styles";
+function m({ label: o, color: t = "neutral", variant: e = "soft" }) {
+  const n = [
+    a.base,
+    a.variantColor[e][t]
+  ].join(" ");
+  return /* @__PURE__ */ r("span", { className: n, "data-mdx-component": "Badge", children: o });
+}
+export {
+  m as default
+};

package/dist/render/button/Button.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonVariant, type ButtonColor, type ButtonSize } from '@blogmcp/mdx-schema/styles';
+export interface ButtonProps {
+    label: string;
+    to?: string;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+}
+/**
+ * Action button / CTA link. Mirrors Vue Button.vue:
+ * renders <a> when `to` is set, else <button type="button">.
+ * Class tables come from the shared @blogmcp/mdx-schema/styles module.
+ */
+export default function Button({ label, to, variant, color, size, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/button/Button.js

@@ -0,0 +1,20 @@
+import { jsx as i } from "react/jsx-runtime";
+import { buttonStyles as t } from "@blogmcp/mdx-schema/styles";
+import { sanitizeUrl as d } from "@blogmcp/sanitize";
+function p({
+  label: o,
+  to: n,
+  variant: a = "solid",
+  color: m = "primary",
+  size: s = "md"
+}) {
+  const r = [
+    t.base,
+    t.size[s],
+    t.variantColor[a][m]
+  ].join(" "), e = n ? d(n) : void 0;
+  return e ? /* @__PURE__ */ i("a", { href: e, className: r, "data-mdx-component": "Button", children: o }) : /* @__PURE__ */ i("button", { type: "button", className: r, "data-mdx-component": "Button", children: o });
+}
+export {
+  p as default
+};

package/dist/render/callout/CalloutDefault.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { CalloutType } from '@blogmcp/mdx-schema';
+export interface CalloutProps {
+    type?: CalloutType;
+    children?: ReactNode;
+}
+/**
+ * Standard callout (icon + accent left border). Mirrors Vue CalloutDefault.vue.
+ * Color table + icon SVG path data come from the shared styles module.
+ */
+export default function CalloutDefault({ type, children }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/callout/CalloutDefault.js

@@ -0,0 +1,19 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { calloutStyles as o } from "@blogmcp/mdx-schema/styles";
+function d({ type: s, children: a }) {
+  const l = s || "info", t = o.default.type[l], n = o.iconPaths[l];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [o.default.base, t.bg, t.border, t.text].join(" "),
+      "data-mdx-component": "Callout",
+      children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ e("svg", { className: ["w-5 h-5", t.iconColor].join(" "), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: n }) }) }),
+        /* @__PURE__ */ e("div", { className: "flex-1 text-sm leading-relaxed", children: a })
+      ] })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/render/callout/CalloutMinimal.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { CalloutType } from '@blogmcp/mdx-schema';
+export interface CalloutProps {
+    type?: CalloutType;
+    children?: ReactNode;
+}
+/**
+ * Icon-less, flatter callout. Mirrors Vue CalloutMinimal.vue.
+ */
+export default function CalloutMinimal({ type, children }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/callout/CalloutMinimal.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import { calloutStyles as o } from "@blogmcp/mdx-schema/styles";
+function r({ type: a, children: l }) {
+  const i = a || "info", e = o.minimal.type[i];
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: [o.minimal.base, e.bg, e.border, e.text].join(" "),
+      "data-mdx-component": "Callout",
+      children: /* @__PURE__ */ t("div", { className: "text-sm leading-relaxed", children: l })
+    }
+  );
+}
+export {
+  r as default
+};

package/dist/render/card/Card.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface CardProps {
+    title?: string;
+    children?: ReactNode;
+}
+/**
+ * Bordered content block with optional title. Mirrors Vue Card.vue.
+ */
+export default function Card({ title, children }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/render/card/Card.js

@@ -0,0 +1,17 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+function t({ title: r, children: e }) {
+  return /* @__PURE__ */ d(
+    "section",
+    {
+      className: "mdx-card rounded-lg border border-gray-200 bg-white p-5 shadow-sm",
+      "data-mdx-component": "Card",
+      children: [
+        r ? /* @__PURE__ */ a("h3", { className: "mb-3 text-lg font-semibold text-gray-900", children: r }) : null,
+        /* @__PURE__ */ a("div", { className: "text-gray-700", children: e })
+      ]
+    }
+  );
+}
+export {
+  t as default
+};

package/dist/render/codeblock/CodeBlockDefault.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { CodeBlockProps as SchemaCodeBlockProps } from '@blogmcp/mdx-schema';
+export interface CodeBlockProps extends SchemaCodeBlockProps {
+    children?: ReactNode;
+}
+/**
+ * Syntax-highlighted code block. Client island — mirrors Vue CodeBlockDefault.vue
+ * + useCodeBlock.ts. The header (language label + optional title) and the
+ * `<pre><code>` block render as the initial DOM exactly as before; the copy
+ * button now copies the code via `navigator.clipboard.writeText` and shows a
+ * transient "Copied!" state (2s), toggling the same Tailwind classes as Vue.
+ * `code-block` + `data-mdx-component="CodeBlock"` are unchanged.
+ */
+export default function CodeBlockDefault({ language, title, children }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;