@blogmcp/mdx-render-vue 0.1.0

package/dist/registry.d.ts

@@ -0,0 +1,76 @@
+/**
+ * MDX Component Registry (Vue)
+ *
+ * Attaches Vue-specific render/edit 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 file
+ * adds only the Vue wiring (dynamic imports of SFCs + editor theming).
+ */
+import { type Component } from 'vue';
+import { componentMetadata, getComponentMetadata, getComponentNames, type ComponentMetadata } from '@blogmcp/mdx-schema/metadata';
+export { componentMetadata, getComponentMetadata, getComponentNames };
+/**
+ * Sentinel property read by the per-renderer "prepareProps is wired"
+ * integration test. Wrapped components carry this with the component's
+ * schema name so the test can confirm wrapping end-to-end (vs the
+ * historical regex-grep on registry source, which was easily defeated
+ * by commented-out code and unused imports).
+ */
+export declare const MDX_PREPARED_SENTINEL: "__mdxPreparePropsAppliedFor";
+export interface EditorConfig {
+    /** SVG icon name used in MdxBlockView header */
+    icon: string;
+    /** Primary text/accent color */
+    color: string;
+    /** Border color */
+    borderColor: string;
+    /** Background color (typically rgba) */
+    bgColor: string;
+}
+export interface ComponentRegistration {
+    metadata: ComponentMetadata;
+    editor: EditorConfig;
+    /** Render variants: variant name → async loader. Must include 'default'. */
+    render: Record<string, () => Promise<{
+        default: Component;
+    }>>;
+    /** Edit component (dark theme) for md-editor preview */
+    edit: () => Promise<{
+        default: Component;
+    }>;
+    /** Optional custom editor view for complex inline editing (Gallery drag-and-drop, CodeBlock textarea) */
+    editorView?: () => Promise<{
+        default: Component;
+    }>;
+}
+/** Merged registry: schema metadata + Vue wiring, keyed by component name. */
+export declare const componentRegistry: Record<string, ComponentRegistration>;
+/** Get available render variant names for a component */
+export declare function getComponentVariants(name: string): string[];
+/** Async resolver — loads only the requested render component (raw, no shim). */
+export declare function getRenderComponentAsync(name: string, variant?: string): Promise<Component | undefined>;
+/**
+ * Wraps an already-resolved Vue component with a `prepareProps`-aware
+ * shim. Returned component is sync; works with both sync `Inner` and
+ * `defineAsyncComponent(...)` results. Exported (vs inlined into
+ * `getWrappedRenderComponent`) so unit tests can pass a spy component
+ * and assert prop normalization without touching the real registry.
+ */
+export declare function wrapVueComponentForMdx(Inner: Component, metadata: ComponentMetadata, variant?: string): Component;
+/**
+ * Returns a Vue component that wraps the lazy-loaded render SFC for
+ * `name`/`variant` with a `prepareProps`-aware shim. Returns `undefined`
+ * if the component isn't registered.
+ *
+ * Wrapped components carry `MDX_PREPARED_SENTINEL` on themselves, set
+ * to the schema component name — used by the per-renderer integration
+ * test to confirm wrapping was applied (instead of the historical
+ * brittle regex-grep approach).
+ */
+export declare function getWrappedRenderComponent(name: string, variant?: string): Component | undefined;
+/** Test-only — clears the wrapped-component cache between specs. */
+export declare function _resetWrappedRenderCacheForTests(): void;
+/** Async resolver for edit components */
+export declare function getEditComponentAsync(name: string): Promise<Component | undefined>;
+/** Get editor config for a component (icon, colors) */
+export declare function getEditorConfig(name: string): EditorConfig | undefined;

package/dist/registry.js

@@ -0,0 +1,164 @@
+import { defineComponent, h, defineAsyncComponent } from "vue";
+import { componentMetadata } from "@blogmcp/mdx-schema/metadata";
+import { componentMetadata as componentMetadata2, getComponentMetadata, getComponentNames } from "@blogmcp/mdx-schema/metadata";
+import { prepareProps } from "@blogmcp/mdx-schema";
+const MDX_PREPARED_SENTINEL = "__mdxPreparePropsAppliedFor";
+const vueWiring = {
+  Callout: {
+    editor: { icon: "info", color: "#569cd6", borderColor: "#569cd6", bgColor: "rgba(86, 156, 214, 0.08)" },
+    render: {
+      default: () => import("./render/callout/CalloutDefault.vue2.js"),
+      minimal: () => import("./render/callout/CalloutMinimal.vue2.js")
+    },
+    edit: () => import("./edit/CalloutEdit.vue2.js")
+  },
+  YouTube: {
+    editor: { icon: "play", color: "#ff4444", borderColor: "#ff4444", bgColor: "rgba(255, 68, 68, 0.08)" },
+    render: {
+      default: () => import("./render/youtube/YouTubeDefault.vue2.js")
+    },
+    edit: () => import("./edit/YouTubeEdit.vue2.js")
+  },
+  Gallery: {
+    editor: { icon: "image", color: "#4ec9b0", borderColor: "#4ec9b0", bgColor: "rgba(78, 201, 176, 0.08)" },
+    render: {
+      default: () => import("./render/gallery/GalleryGrid.vue2.js"),
+      grid: () => import("./render/gallery/GalleryGrid.vue2.js")
+    },
+    edit: () => import("./edit/GalleryEdit.vue2.js")
+  },
+  CodeBlock: {
+    editor: { icon: "code", color: "#ce9178", borderColor: "#ce9178", bgColor: "rgba(206, 145, 120, 0.08)" },
+    render: {
+      default: () => import("./render/codeblock/CodeBlockDefault.vue.js")
+    },
+    edit: () => import("./edit/CodeBlockEdit.vue.js")
+  },
+  AudioPlayer: {
+    editor: { icon: "audio", color: "#b48ead", borderColor: "#b48ead", bgColor: "rgba(180, 142, 173, 0.08)" },
+    render: {
+      default: () => import("./render/audioplayer/AudioPlayerDefault.vue2.js")
+    },
+    edit: () => import("./edit/AudioPlayerEdit.vue2.js")
+  },
+  Button: {
+    editor: { icon: "button", color: "#2563eb", borderColor: "#2563eb", bgColor: "rgba(37, 99, 235, 0.08)" },
+    render: {
+      default: () => import("./render/button/Button.vue.js")
+    },
+    edit: () => import("./edit/ButtonEdit.vue.js")
+  },
+  Card: {
+    editor: { icon: "card", color: "#6b7280", borderColor: "#6b7280", bgColor: "rgba(107, 114, 128, 0.08)" },
+    render: {
+      default: () => import("./render/card/Card.vue.js")
+    },
+    edit: () => import("./edit/CardEdit.vue.js")
+  },
+  Alert: {
+    editor: { icon: "alert", color: "#d97706", borderColor: "#d97706", bgColor: "rgba(217, 119, 6, 0.08)" },
+    render: {
+      default: () => import("./render/alert/Alert.vue.js")
+    },
+    edit: () => import("./edit/AlertEdit.vue.js")
+  },
+  Badge: {
+    editor: { icon: "badge", color: "#059669", borderColor: "#059669", bgColor: "rgba(5, 150, 105, 0.08)" },
+    render: {
+      default: () => import("./render/badge/Badge.vue.js")
+    },
+    edit: () => import("./edit/BadgeEdit.vue.js")
+  },
+  Icon: {
+    editor: { icon: "icon", color: "#7c3aed", borderColor: "#7c3aed", bgColor: "rgba(124, 58, 237, 0.08)" },
+    render: {
+      default: () => import("./render/icon/Icon.vue.js")
+    },
+    edit: () => import("./edit/IconEdit.vue.js")
+  },
+  Tooltip: {
+    editor: { icon: "tooltip", color: "#0891b2", borderColor: "#0891b2", bgColor: "rgba(8, 145, 178, 0.08)" },
+    render: {
+      default: () => import("./render/tooltip/Tooltip.vue.js")
+    },
+    edit: () => import("./edit/TooltipEdit.vue.js")
+  }
+};
+const componentRegistry = Object.fromEntries(
+  componentMetadata.map((metadata) => {
+    const wiring = vueWiring[metadata.name];
+    if (!wiring) {
+      throw new Error(
+        `[mdx-components] No Vue wiring registered for component "${metadata.name}". Add an entry to vueWiring in registry.ts or remove the schema entry.`
+      );
+    }
+    return [metadata.name, { metadata, ...wiring }];
+  })
+);
+function getComponentVariants(name) {
+  const reg = componentRegistry[name];
+  return reg ? Object.keys(reg.render) : [];
+}
+async function getRenderComponentAsync(name, variant = "default") {
+  const reg = componentRegistry[name];
+  if (!reg) return void 0;
+  const loader = reg.render[variant] || reg.render.default;
+  if (!loader) return void 0;
+  const mod = await loader();
+  return mod.default;
+}
+function wrapVueComponentForMdx(Inner, metadata, variant = "default") {
+  const wrapped = defineComponent({
+    name: `MdxPrepared${metadata.name}${variant === "default" ? "" : `_${variant}`}`,
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => h(
+        Inner,
+        prepareProps(attrs, metadata),
+        slots
+      );
+    }
+  });
+  wrapped[MDX_PREPARED_SENTINEL] = metadata.name;
+  return wrapped;
+}
+const wrappedRenderCache = /* @__PURE__ */ new Map();
+function getWrappedRenderComponent(name, variant = "default") {
+  const cacheKey = `${name}:${variant}`;
+  const cached = wrappedRenderCache.get(cacheKey);
+  if (cached) return cached;
+  const reg = componentRegistry[name];
+  if (!reg) return void 0;
+  const loader = reg.render[variant] || reg.render.default;
+  if (!loader) return void 0;
+  const Inner = defineAsyncComponent(() => loader().then((m) => m.default));
+  const wrapped = wrapVueComponentForMdx(Inner, reg.metadata, variant);
+  wrappedRenderCache.set(cacheKey, wrapped);
+  return wrapped;
+}
+function _resetWrappedRenderCacheForTests() {
+  wrappedRenderCache.clear();
+}
+async function getEditComponentAsync(name) {
+  const reg = componentRegistry[name];
+  if (!reg) return void 0;
+  const mod = await reg.edit();
+  return mod.default;
+}
+function getEditorConfig(name) {
+  return componentRegistry[name]?.editor;
+}
+export {
+  MDX_PREPARED_SENTINEL,
+  _resetWrappedRenderCacheForTests,
+  componentMetadata2 as componentMetadata,
+  componentRegistry,
+  getComponentMetadata,
+  getComponentNames,
+  getComponentVariants,
+  getEditComponentAsync,
+  getEditorConfig,
+  getRenderComponentAsync,
+  getWrappedRenderComponent,
+  wrapVueComponentForMdx
+};

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

@@ -0,0 +1,18 @@
+interface Props {
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+}
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    severity: "info" | "success" | "warning" | "error";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/render/alert/Alert.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./Alert.vue2.js";
+export {
+  _sfc_main as default
+};

package/dist/render/alert/Alert.vue2.js

@@ -0,0 +1,43 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, createCommentVNode, toDisplayString, renderSlot } from "vue";
+import { Icon } from "../../node_modules/@iconify/vue/dist/iconify.js";
+import { alertStyles } from "@blogmcp/mdx-schema/styles";
+const _hoisted_1 = { class: "min-w-0 flex-1" };
+const _hoisted_2 = {
+  key: 0,
+  class: "mb-0.5 font-semibold"
+};
+const _hoisted_3 = { class: "prose-sm" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Alert",
+  props: {
+    severity: { default: "info" },
+    title: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const cfg = computed(() => alertStyles.severity[props.severity]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(alertStyles).base, cfg.value.wrap]),
+        role: "alert",
+        "data-mdx-component": "Alert"
+      }, [
+        createVNode(unref(Icon), {
+          icon: cfg.value.icon,
+          class: normalizeClass(["mt-0.5 shrink-0", cfg.value.iconClass]),
+          width: 18,
+          height: 18
+        }, null, 8, ["icon", "class"]),
+        createElementVNode("div", _hoisted_1, [
+          __props.title ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "default")
+          ])
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.vue';
+export { default } from './Alert.vue';

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

@@ -0,0 +1,3 @@
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema';
+declare const _default: import("vue").DefineComponent<AudioPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AudioPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/render/audioplayer/AudioPlayerDefault.vue.js

@@ -0,0 +1,116 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, toDisplayString, createTextVNode, normalizeClass, Fragment } from "vue";
+import { useAudioPlayer } from "../../composables/useAudioPlayer.js";
+const _hoisted_1 = {
+  class: "audio-player my-6 rounded-lg bg-gray-50 p-5 border border-gray-200",
+  "data-mdx-component": "AudioPlayer"
+};
+const _hoisted_2 = { class: "flex items-center gap-3 mb-3" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-base font-semibold text-gray-800 m-0"
+};
+const _hoisted_4 = ["src"];
+const _hoisted_5 = {
+  key: 0,
+  class: "mt-4"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "mt-2 p-3 bg-white rounded border border-gray-200 text-sm text-gray-700 leading-relaxed max-h-64 overflow-y-auto"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "text-gray-400 italic"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "text-gray-400 italic"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "mb-3 pb-3 border-b border-gray-200"
+};
+const _hoisted_10 = { class: "text-gray-800" };
+const _hoisted_11 = { class: "whitespace-pre-wrap" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AudioPlayerDefault",
+  props: {
+    slug: {},
+    title: {},
+    showTranscription: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      audioUrl,
+      displayTitle,
+      hasTitle,
+      showTranscription,
+      transcriptionText,
+      transcriptionSummary,
+      transcriptionLoading,
+      transcriptionExpanded,
+      toggleTranscription
+    } = useAudioPlayer(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _cache[1] || (_cache[1] = createElementVNode("svg", {
+            class: "w-5 h-5 text-gray-500 flex-shrink-0",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24"
+          }, [
+            createElementVNode("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              "stroke-width": "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"
+            })
+          ], -1)),
+          unref(hasTitle) ? (openBlock(), createElementBlock("h3", _hoisted_3, toDisplayString(unref(displayTitle)), 1)) : createCommentVNode("", true)
+        ]),
+        createElementVNode("audio", {
+          src: unref(audioUrl),
+          controls: "",
+          preload: "metadata",
+          class: "w-full"
+        }, null, 8, _hoisted_4),
+        unref(showTranscription) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("button", {
+            class: "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: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => unref(toggleTranscription) && unref(toggleTranscription)(...args))
+          }, [
+            (openBlock(), createElementBlock("svg", {
+              class: normalizeClass(["w-4 h-4 transition-transform", { "rotate-90": unref(transcriptionExpanded) }]),
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24"
+            }, [..._cache[2] || (_cache[2] = [
+              createElementVNode("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: "M9 5l7 7-7 7"
+              }, null, -1)
+            ])], 2)),
+            _cache[3] || (_cache[3] = createTextVNode(" Transcription ", -1))
+          ]),
+          unref(transcriptionExpanded) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            unref(transcriptionLoading) ? (openBlock(), createElementBlock("p", _hoisted_7, "Loading transcription...")) : !unref(transcriptionText) ? (openBlock(), createElementBlock("p", _hoisted_8, "No transcription available.")) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              unref(transcriptionSummary) ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                _cache[4] || (_cache[4] = createElementVNode("div", { class: "text-xs uppercase tracking-wide text-gray-400 mb-1" }, "Summary", -1)),
+                createElementVNode("div", _hoisted_10, toDisplayString(unref(transcriptionSummary)), 1)
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_11, toDisplayString(unref(transcriptionText)), 1)
+            ], 64))
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/render/audioplayer/AudioPlayerDefault.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./AudioPlayerDefault.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,5 @@
+/**
+ * AudioPlayer Render Component Variants
+ */
+export { default as AudioPlayerDefault } from './AudioPlayerDefault.vue';
+export { default } from './AudioPlayerDefault.vue';

package/dist/render/audioplayer/index.js

@@ -0,0 +1,5 @@
+import { default as default2, default as default3 } from "./AudioPlayerDefault.vue.js";
+export {
+  default2 as AudioPlayerDefault,
+  default3 as default
+};

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

@@ -0,0 +1,10 @@
+interface Props {
+    label: string;
+    color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error';
+    variant?: 'solid' | 'soft' | 'outline';
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "solid" | "soft" | "outline";
+    color: "primary" | "neutral" | "success" | "warning" | "error";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/render/badge/Badge.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./Badge.vue2.js";
+export {
+  _sfc_main as default
+};

package/dist/render/badge/Badge.vue2.js

@@ -0,0 +1,28 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, toDisplayString } from "vue";
+import { badgeStyles } from "@blogmcp/mdx-schema/styles";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Badge",
+  props: {
+    label: {},
+    color: { default: "neutral" },
+    variant: { default: "soft" }
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = computed(
+      () => [
+        badgeStyles.base,
+        badgeStyles.variantColor[props.variant][props.color]
+      ].join(" ")
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(classes.value),
+        "data-mdx-component": "Badge"
+      }, toDisplayString(__props.label), 3);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue';
+export { default } from './Badge.vue';

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

@@ -0,0 +1,13 @@
+interface Props {
+    label: string;
+    to?: string;
+    variant?: 'solid' | 'outline' | 'soft' | 'ghost' | 'link';
+    color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "solid" | "outline" | "soft" | "ghost" | "link";
+    color: "primary" | "neutral" | "success" | "warning" | "error";
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/render/button/Button.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./Button.vue2.js";
+export {
+  _sfc_main as default
+};

package/dist/render/button/Button.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, toDisplayString } from "vue";
+import { buttonStyles } from "@blogmcp/mdx-schema/styles";
+import "../../node_modules/dompurify/dist/purify.es.js";
+import { d as distExports } from "../../_virtual/index.js";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Button",
+  props: {
+    label: {},
+    to: {},
+    variant: { default: "solid" },
+    color: { default: "primary" },
+    size: { default: "md" }
+  },
+  setup(__props) {
+    const props = __props;
+    const safeHref = computed(() => props.to ? distExports.sanitizeUrl(props.to) : void 0);
+    const classes = computed(
+      () => [
+        buttonStyles.base,
+        buttonStyles.size[props.size],
+        buttonStyles.variantColor[props.variant][props.color]
+      ].join(" ")
+    );
+    return (_ctx, _cache) => {
+      return safeHref.value ? (openBlock(), createElementBlock("a", {
+        key: 0,
+        href: safeHref.value,
+        class: normalizeClass(classes.value),
+        "data-mdx-component": "Button"
+      }, toDisplayString(__props.label), 11, _hoisted_1)) : (openBlock(), createElementBlock("button", {
+        key: 1,
+        type: "button",
+        class: normalizeClass(classes.value),
+        "data-mdx-component": "Button"
+      }, toDisplayString(__props.label), 3));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue';
+export { default } from './Button.vue';

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

@@ -0,0 +1,13 @@
+import type { CalloutProps } from '@blogmcp/mdx-schema';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};