@blogmcp/mdx-render-vue 0.1.0

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};

package/dist/_virtual/constants.js

@@ -0,0 +1,4 @@
+var constants = {};
+export {
+  constants as __exports
+};

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as requireDist } from "../node_modules/@braintree/sanitize-url/dist/index.js";
+var distExports = requireDist();
+export {
+  distExports as d
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var dist = {};
+export {
+  dist as __exports
+};

package/dist/composables/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * MDX Components Composables
+ *
+ * Shared logic for MDX components.
+ */
+export { useCallout, calloutConfigs, calloutIconPaths } from './useCallout';
+export { useCodeBlock, getLanguageLabel, languageLabels } from './useCodeBlock';
+export { useGallery, gridColsClasses, isMediaObject, isVideoUrl } from './useGallery';
+export { useYouTube, YOUTUBE_EMBED_BASE, YOUTUBE_IFRAME_ALLOW, } from './useYouTube';
+export { useAudioPlayer } from './useAudioPlayer';
+export { useOptimizedImg, IMG_COMPONENT_KEY } from './useMedia';

package/dist/composables/index.js

@@ -0,0 +1,24 @@
+import { calloutConfigs, calloutIconPaths, useCallout } from "./useCallout.js";
+import { getLanguageLabel, languageLabels, useCodeBlock } from "./useCodeBlock.js";
+import { gridColsClasses, isMediaObject, isVideoUrl, useGallery } from "./useGallery.js";
+import { YOUTUBE_EMBED_BASE, YOUTUBE_IFRAME_ALLOW, useYouTube } from "./useYouTube.js";
+import { useAudioPlayer } from "./useAudioPlayer.js";
+import { IMG_COMPONENT_KEY, useOptimizedImg } from "./useMedia.js";
+export {
+  IMG_COMPONENT_KEY,
+  YOUTUBE_EMBED_BASE,
+  YOUTUBE_IFRAME_ALLOW,
+  calloutConfigs,
+  calloutIconPaths,
+  getLanguageLabel,
+  gridColsClasses,
+  isMediaObject,
+  isVideoUrl,
+  languageLabels,
+  useAudioPlayer,
+  useCallout,
+  useCodeBlock,
+  useGallery,
+  useOptimizedImg,
+  useYouTube
+};

package/dist/composables/useAudioPlayer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * AudioPlayer Composable
+ *
+ * Shared logic for AudioPlayer component variants.
+ */
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema';
+/**
+ * Composable for AudioPlayer component logic
+ */
+export declare function useAudioPlayer(props: AudioPlayerProps): {
+    hasTitle: import("vue").ComputedRef<boolean>;
+    displayTitle: import("vue").ComputedRef<string>;
+    showTranscription: import("vue").ComputedRef<boolean>;
+    audioUrl: import("vue").ComputedRef<string>;
+    transcriptionUrl: import("vue").ComputedRef<string>;
+    transcriptionText: import("vue").Ref<string | null, string | null>;
+    transcriptionSummary: import("vue").Ref<string | null, string | null>;
+    transcriptionLoading: import("vue").Ref<boolean, boolean>;
+    transcriptionExpanded: import("vue").Ref<boolean, boolean>;
+    loadTranscription: () => Promise<void>;
+    toggleTranscription: () => void;
+};

package/dist/composables/useAudioPlayer.js

@@ -0,0 +1,58 @@
+import { computed, ref } from "vue";
+function useAudioPlayer(props) {
+  const hasTitle = computed(() => !!props.title);
+  const displayTitle = computed(() => props.title || props.slug || "Audio");
+  const showTranscription = computed(() => props.showTranscription ?? false);
+  const audioUrl = computed(() => {
+    if (!props.slug) return "";
+    return `/api/media/file/${props.slug}`;
+  });
+  const transcriptionUrl = computed(() => {
+    if (!props.slug) return "";
+    return `/api/media/transcription/${props.slug}`;
+  });
+  const transcriptionText = ref(null);
+  const transcriptionSummary = ref(null);
+  const transcriptionLoading = ref(false);
+  const transcriptionExpanded = ref(false);
+  async function loadTranscription() {
+    if (!props.slug || transcriptionText.value !== null) return;
+    transcriptionLoading.value = true;
+    try {
+      const response = await fetch(transcriptionUrl.value);
+      if (response.ok) {
+        const data = await response.json();
+        transcriptionText.value = data.fullText || data.full_text || "";
+        transcriptionSummary.value = data.summary || null;
+      } else {
+        transcriptionText.value = "";
+      }
+    } catch {
+      transcriptionText.value = "";
+    } finally {
+      transcriptionLoading.value = false;
+    }
+  }
+  function toggleTranscription() {
+    transcriptionExpanded.value = !transcriptionExpanded.value;
+    if (transcriptionExpanded.value && transcriptionText.value === null) {
+      loadTranscription();
+    }
+  }
+  return {
+    hasTitle,
+    displayTitle,
+    showTranscription,
+    audioUrl,
+    transcriptionUrl,
+    transcriptionText,
+    transcriptionSummary,
+    transcriptionLoading,
+    transcriptionExpanded,
+    loadTranscription,
+    toggleTranscription
+  };
+}
+export {
+  useAudioPlayer
+};

package/dist/composables/useCallout.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Callout Composable
+ *
+ * Shared logic for Callout component variants.
+ */
+import type { CalloutType, CalloutProps } from '@blogmcp/mdx-schema';
+export interface CalloutConfig {
+    type: CalloutType;
+    icon: string;
+    colors: {
+        bg: string;
+        border: string;
+        text: string;
+        iconColor: string;
+    };
+}
+/**
+ * Default callout configurations for each type
+ */
+export declare const calloutConfigs: Record<CalloutType, Omit<CalloutConfig, 'type'>>;
+/**
+ * SVG path data for callout icons
+ */
+export declare const calloutIconPaths: Record<string, string>;
+/**
+ * Composable for Callout component logic
+ */
+export declare function useCallout(props: CalloutProps): {
+    effectiveType: import("vue").ComputedRef<CalloutType>;
+    config: import("vue").ComputedRef<{
+        icon: string;
+        colors: {
+            bg: string;
+            border: string;
+            text: string;
+            iconColor: string;
+        };
+        type: CalloutType;
+    }>;
+    containerClasses: import("vue").ComputedRef<string[]>;
+    iconPath: import("vue").ComputedRef<string>;
+    iconClasses: import("vue").ComputedRef<string>;
+};

package/dist/composables/useCallout.js

@@ -0,0 +1,71 @@
+import { computed } from "vue";
+const calloutConfigs = {
+  info: {
+    icon: "info-circle",
+    colors: {
+      bg: "bg-blue-900/20",
+      border: "border-blue-500",
+      text: "text-blue-200",
+      iconColor: "text-blue-400"
+    }
+  },
+  warning: {
+    icon: "warning-triangle",
+    colors: {
+      bg: "bg-yellow-900/20",
+      border: "border-yellow-500",
+      text: "text-yellow-200",
+      iconColor: "text-yellow-400"
+    }
+  },
+  tip: {
+    icon: "lightbulb",
+    colors: {
+      bg: "bg-green-900/20",
+      border: "border-green-500",
+      text: "text-green-200",
+      iconColor: "text-green-400"
+    }
+  },
+  danger: {
+    icon: "alert-circle",
+    colors: {
+      bg: "bg-red-900/20",
+      border: "border-red-500",
+      text: "text-red-200",
+      iconColor: "text-red-400"
+    }
+  }
+};
+const calloutIconPaths = {
+  "info-circle": "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+  "warning-triangle": "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+  lightbulb: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z",
+  "alert-circle": "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+};
+function useCallout(props) {
+  const effectiveType = computed(() => props.type || "info");
+  const config = computed(() => ({
+    type: effectiveType.value,
+    ...calloutConfigs[effectiveType.value]
+  }));
+  const containerClasses = computed(() => [
+    config.value.colors.bg,
+    config.value.colors.border,
+    config.value.colors.text
+  ]);
+  const iconPath = computed(() => calloutIconPaths[config.value.icon]);
+  const iconClasses = computed(() => config.value.colors.iconColor);
+  return {
+    effectiveType,
+    config,
+    containerClasses,
+    iconPath,
+    iconClasses
+  };
+}
+export {
+  calloutConfigs,
+  calloutIconPaths,
+  useCallout
+};

package/dist/composables/useCodeBlock.d.ts

@@ -0,0 +1,23 @@
+/**
+ * CodeBlock Composable
+ *
+ * Shared logic for CodeBlock component variants.
+ */
+import type { CodeBlockProps } from '@blogmcp/mdx-schema';
+/**
+ * Language label mappings
+ */
+export declare const languageLabels: Record<string, string>;
+/**
+ * Get display label for a language
+ */
+export declare function getLanguageLabel(language?: string): string;
+/**
+ * Composable for CodeBlock component logic
+ */
+export declare function useCodeBlock(props: CodeBlockProps): {
+    copied: import("vue").Ref<boolean, boolean>;
+    languageLabel: import("vue").ComputedRef<string>;
+    languageClass: import("vue").ComputedRef<string>;
+    copyCode: (codeContent: string) => Promise<void>;
+};

package/dist/composables/useCodeBlock.js

@@ -0,0 +1,67 @@
+import { ref, computed } from "vue";
+const languageLabels = {
+  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 getLanguageLabel(language) {
+  if (!language) return "Plain Text";
+  const lang = language.toLowerCase();
+  if (languageLabels[lang]) return languageLabels[lang];
+  return lang.charAt(0).toUpperCase() + lang.slice(1);
+}
+function useCodeBlock(props) {
+  const copied = ref(false);
+  const languageLabel = computed(() => getLanguageLabel(props.language));
+  const languageClass = computed(() => `language-${props.language || "text"}`);
+  async function copyCode(codeContent) {
+    try {
+      await navigator.clipboard.writeText(codeContent);
+      copied.value = true;
+      setTimeout(() => {
+        copied.value = false;
+      }, 2e3);
+    } catch (error) {
+      console.error("Failed to copy code:", error);
+    }
+  }
+  return {
+    copied,
+    languageLabel,
+    languageClass,
+    copyCode
+  };
+}
+export {
+  getLanguageLabel,
+  languageLabels,
+  useCodeBlock
+};

package/dist/composables/useGallery.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Gallery Composable
+ *
+ * Shared logic for Gallery component variants.
+ */
+import type { GalleryProps, MediaObject } from '@blogmcp/mdx-schema';
+import { galleryTileLayout, type GalleryTileLayout } from '@blogmcp/mdx-schema/styles';
+export { galleryTileLayout, type GalleryTileLayout };
+/**
+ * Type guard for MediaObject
+ */
+export declare function isMediaObject(value: unknown): value is MediaObject;
+/**
+ * Check if a URL points to a video file based on extension
+ */
+export declare function isVideoUrl(src: string): boolean;
+/**
+ * Grid column class mappings
+ */
+export declare const gridColsClasses: Record<number, string>;
+/**
+ * Composable for Gallery component logic
+ */
+export declare function useGallery(props: GalleryProps): {
+    effectiveColumns: import("vue").ComputedRef<1 | 2 | 3 | 4>;
+    gridColsClass: import("vue").ComputedRef<string>;
+    gapClass: import("vue").ComputedRef<string>;
+    tileLayout: import("vue").ComputedRef<GalleryTileLayout>;
+    getImageSrc: (index: number) => string;
+    getImageAlt: (index: number) => string;
+    getImageDescription: (index: number) => string | undefined;
+    getImageCaption: (index: number) => string | undefined;
+    isVideo: (index: number) => boolean;
+    getVideoPoster: (index: number) => string | undefined;
+    hasImages: import("vue").ComputedRef<boolean>;
+    imageCount: import("vue").ComputedRef<number>;
+};

package/dist/composables/useGallery.js

@@ -0,0 +1,84 @@
+import { computed } from "vue";
+import { galleryTileLayout } from "@blogmcp/mdx-schema/styles";
+import { galleryTileLayout as galleryTileLayout2 } from "@blogmcp/mdx-schema/styles";
+const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|avi|mkv|m4v)(\?.*)?$/i;
+const KB_MEDIA_FILE_RE = /\/api\/media\/file\/([^/?#]+)/;
+function isMediaObject(value) {
+  return typeof value === "object" && value !== null && "src" in value && typeof value.src === "string";
+}
+function isVideoUrl(src) {
+  return VIDEO_EXTENSIONS.test(src);
+}
+const gridColsClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4"
+};
+function useGallery(props) {
+  const effectiveColumns = computed(() => props.columns || 2);
+  const gridColsClass = computed(() => {
+    const cols = effectiveColumns.value;
+    return gridColsClasses[cols] || "grid-cols-2";
+  });
+  const gapClass = computed(() => {
+    const gap = props.gap || 4;
+    return `gap-${gap}`;
+  });
+  const tileLayout = computed(() => galleryTileLayout(props));
+  function getImageSrc(index) {
+    const image = props.images[index];
+    return isMediaObject(image) ? image.src : image;
+  }
+  function getImageAlt(index) {
+    const image = props.images[index];
+    if (isMediaObject(image)) return image.alt || `Gallery image ${index + 1}`;
+    return `Gallery image ${index + 1}`;
+  }
+  function getImageDescription(index) {
+    const image = props.images[index];
+    return isMediaObject(image) ? image.description : void 0;
+  }
+  function getImageCaption(index) {
+    const image = props.images[index];
+    if (!isMediaObject(image)) return void 0;
+    return image.description || image.alt || void 0;
+  }
+  function isVideo(index) {
+    const image = props.images[index];
+    if (isMediaObject(image)) {
+      if (image.type === "video") return true;
+      if (image.type === "image") return false;
+      return isVideoUrl(image.src);
+    }
+    return isVideoUrl(image);
+  }
+  function getVideoPoster(index) {
+    const src = getImageSrc(index);
+    const match = src.match(KB_MEDIA_FILE_RE);
+    return match ? `/api/media/poster/${match[1]}` : void 0;
+  }
+  const hasImages = computed(() => props.images && props.images.length > 0);
+  const imageCount = computed(() => props.images?.length || 0);
+  return {
+    effectiveColumns,
+    gridColsClass,
+    gapClass,
+    tileLayout,
+    getImageSrc,
+    getImageAlt,
+    getImageDescription,
+    getImageCaption,
+    isVideo,
+    getVideoPoster,
+    hasImages,
+    imageCount
+  };
+}
+export {
+  galleryTileLayout2 as galleryTileLayout,
+  gridColsClasses,
+  isMediaObject,
+  isVideoUrl,
+  useGallery
+};

package/dist/composables/useMedia.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Media Composables
+ *
+ * Image optimization helpers for MDX components.
+ * Uses provide/inject so the host app (blog) can supply NuxtImg
+ * while the md-editor (no @nuxt/image) gets a plain 'img' fallback.
+ */
+import { type InjectionKey, type Component } from 'vue';
+/**
+ * Injection key for the optimized image component.
+ * The host app should `provide(IMG_COMPONENT_KEY, NuxtImg)`.
+ */
+export declare const IMG_COMPONENT_KEY: InjectionKey<Component | string>;
+/**
+ * Returns the provided image component (e.g. NuxtImg),
+ * or falls back to plain `'img'` when nothing is provided.
+ */
+export declare function useOptimizedImg(): Component | string;

package/dist/composables/useMedia.js

@@ -0,0 +1,9 @@
+import { inject } from "vue";
+const IMG_COMPONENT_KEY = Symbol("ImgComponent");
+function useOptimizedImg() {
+  return inject(IMG_COMPONENT_KEY, "img");
+}
+export {
+  IMG_COMPONENT_KEY,
+  useOptimizedImg
+};

package/dist/composables/useYouTube.d.ts

@@ -0,0 +1,31 @@
+/**
+ * YouTube Composable
+ *
+ * Shared logic for YouTube component variants.
+ */
+import type { YouTubeProps } from '@blogmcp/mdx-schema';
+/**
+ * YouTube embed URL base
+ */
+export declare const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
+/**
+ * Default iframe allow attributes
+ */
+export declare const YOUTUBE_IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+/**
+ * Composable for YouTube component logic
+ */
+export declare function useYouTube(props: YouTubeProps): {
+    embedUrl: import("vue").ComputedRef<string>;
+    iframeTitle: import("vue").ComputedRef<string>;
+    hasTitle: import("vue").ComputedRef<boolean>;
+    thumbnailUrl: import("vue").ComputedRef<string>;
+    iframeAttrs: import("vue").ComputedRef<{
+        src: string;
+        title: string;
+        frameborder: string;
+        allow: string;
+        allowfullscreen: boolean;
+    }>;
+    YOUTUBE_IFRAME_ALLOW: string;
+};

package/dist/composables/useYouTube.js

@@ -0,0 +1,32 @@
+import { computed } from "vue";
+const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
+const YOUTUBE_IFRAME_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+function useYouTube(props) {
+  const embedUrl = computed(() => `${YOUTUBE_EMBED_BASE}${props.id}`);
+  const iframeTitle = computed(() => props.title || "YouTube video");
+  const hasTitle = computed(() => !!props.title);
+  const thumbnailUrl = computed(() => {
+    if (!props.id) return "";
+    return `https://img.youtube.com/vi/${props.id}/maxresdefault.jpg`;
+  });
+  const iframeAttrs = computed(() => ({
+    src: embedUrl.value,
+    title: iframeTitle.value,
+    frameborder: "0",
+    allow: YOUTUBE_IFRAME_ALLOW,
+    allowfullscreen: true
+  }));
+  return {
+    embedUrl,
+    iframeTitle,
+    hasTitle,
+    thumbnailUrl,
+    iframeAttrs,
+    YOUTUBE_IFRAME_ALLOW
+  };
+}
+export {
+  YOUTUBE_EMBED_BASE,
+  YOUTUBE_IFRAME_ALLOW,
+  useYouTube
+};

package/dist/edit/AlertEdit.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/edit/AlertEdit.vue.js

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

package/dist/edit/AlertEdit.vue2.js

@@ -0,0 +1,18 @@
+import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, renderSlot } from "vue";
+import _sfc_main$1 from "../render/alert/Alert.vue2.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AlertEdit",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/edit/AudioPlayerEdit.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;