@blogmcp/mdx-render-vue 0.2.2 → 0.4.0

package/dist/composables/index.d.ts

@@ -9,3 +9,4 @@ export { useGallery, gridColsClasses, isMediaObject, isVideoUrl } from './useGal
 export { useYouTube, YOUTUBE_EMBED_BASE, YOUTUBE_IFRAME_ALLOW, } from './useYouTube';
 export { useAudioPlayer } from './useAudioPlayer';
 export { useOptimizedImg, IMG_COMPONENT_KEY } from './useMedia';
+export { useTripMap, parseHandNodes, tripMapFormatTime, MDX_ARTICLE_CONTEXT_KEY, type MdxArticleContext, type TripMapGeoNode, type TripMapGeoResponse, } from './useTripMap';

package/dist/composables/index.js

@@ -4,8 +4,11 @@ import { gridColsClasses, isMediaObject, isVideoUrl, useGallery } from "./useGal
 import { YOUTUBE_EMBED_BASE, YOUTUBE_IFRAME_ALLOW, useYouTube } from "./useYouTube.js";
 import { useAudioPlayer } from "./useAudioPlayer.js";
 import { IMG_COMPONENT_KEY, useOptimizedImg } from "./useMedia.js";
+import { MDX_ARTICLE_CONTEXT_KEY, useTripMap } from "./useTripMap.js";
+import { parseTripMapHandNodes, tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
 export {
   IMG_COMPONENT_KEY,
+  MDX_ARTICLE_CONTEXT_KEY,
   YOUTUBE_EMBED_BASE,
   YOUTUBE_IFRAME_ALLOW,
   calloutConfigs,
@@ -15,10 +18,13 @@ export {
   isMediaObject,
   isVideoUrl,
   languageLabels,
+  parseTripMapHandNodes as parseHandNodes,
+  tripMapFormatTime,
   useAudioPlayer,
   useCallout,
   useCodeBlock,
   useGallery,
   useOptimizedImg,
+  useTripMap,
   useYouTube
 };

package/dist/composables/useTripMap.d.ts

@@ -0,0 +1,59 @@
+/**
+ * TripMap composable — Vue binding over the shared framework-free helpers
+ * in @blogmcp/mdx-schema/tripmap (prop parsing, geo-URL contract, texts).
+ *
+ * HARD CONSTRAINT: this module (and every module statically reachable from
+ * the TripMap SFCs) must NOT statically import '@blogmcp/tripmap-core' —
+ * not even its pure '/nodes' subpath. The article-review MCP-App bundles
+ * this package from source into ONE file with that package externalized;
+ * a top-level bare import would break the whole bundle at load time. The
+ * core is reached exclusively via `import('@blogmcp/tripmap-core')` inside
+ * the SFC's intersection handler (rejects harmlessly in the iframe).
+ */
+import { type ComputedRef, type InjectionKey } from 'vue';
+import type { TripMapHandNode, TripMapProps } from '@blogmcp/mdx-schema';
+import { parseTripMapHandNodes, tripMapFormatTime, type TripMapGeoNode, type TripMapGeoResponse, type TripMapUiTexts } from '@blogmcp/mdx-schema/tripmap';
+export { tripMapFormatTime };
+export { parseTripMapHandNodes as parseHandNodes };
+export type { TripMapGeoNode, TripMapGeoResponse };
+/**
+ * Article identity for AUTO mode (map every geotagged media of the article).
+ * The host app provides it around its MDX render tree (the Nuxt blog does it
+ * in `components/article/MdxContent.vue` for article + preview pages; a bare
+ * consumer that doesn't provide it simply has no auto mode — TripMap then
+ * needs explicit `slugs` or `nodes`).
+ */
+export interface MdxArticleContext {
+    filename: string;
+    language?: string;
+}
+export declare const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null>;
+export interface UseTripMapResult {
+    slugList: ComputedRef<string[]>;
+    excludeList: ComputedRef<string[]>;
+    handNodes: ComputedRef<TripMapHandNode[]>;
+    /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
+    facadeThumbs: ComputedRef<{
+        slug: string;
+        src: string;
+    }[]>;
+    heightStyle: ComputedRef<{
+        height: string;
+    }>;
+    articleContext: MdxArticleContext | null;
+    isAutoMode: ComputedRef<boolean>;
+    /**
+     * Nothing selects media (no slugs, no article context): the geo call only
+     * fetches the tenant basemap config, so its failure must not sink a map
+     * of hand-made nodes — the wrapper falls back to the core default style.
+     */
+    isConfigOnly: ComputedRef<boolean>;
+    /** Always set: slugs / article selection, or the config-only URL. */
+    geoUrl: ComputedRef<string>;
+    labels: ComputedRef<{
+        play: string;
+        stop: string;
+    } | undefined>;
+    texts: ComputedRef<TripMapUiTexts>;
+}
+export declare function useTripMap(props: TripMapProps): UseTripMapResult;

package/dist/composables/useTripMap.js

@@ -0,0 +1,41 @@
+import { inject, computed } from "vue";
+import { splitTripMapList, parseTripMapHandNodes, TRIPMAP_DEFAULT_HEIGHT, buildTripMapGeoUrl, tripMapPlaybackLabels, tripMapUiTexts } from "@blogmcp/mdx-schema/tripmap";
+import { parseTripMapHandNodes as parseTripMapHandNodes2, tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
+const MDX_ARTICLE_CONTEXT_KEY = /* @__PURE__ */ Symbol.for("blogmcp:mdx-article-context");
+function useTripMap(props) {
+  const articleContext = inject(MDX_ARTICLE_CONTEXT_KEY, null);
+  const slugList = computed(() => splitTripMapList(props.slugs));
+  const excludeList = computed(() => splitTripMapList(props.exclude));
+  const handNodes = computed(() => parseTripMapHandNodes(props.nodes));
+  const isAutoMode = computed(() => slugList.value.length === 0);
+  const isConfigOnly = computed(() => slugList.value.length === 0 && !articleContext?.filename);
+  const facadeThumbs = computed(
+    () => slugList.value.map((slug) => ({
+      slug,
+      src: `/api/media/thumb/${encodeURIComponent(slug)}?width=192`
+    }))
+  );
+  const heightStyle = computed(() => ({ height: props.height || TRIPMAP_DEFAULT_HEIGHT }));
+  const geoUrl = computed(() => buildTripMapGeoUrl(props, articleContext));
+  const labels = computed(() => tripMapPlaybackLabels(articleContext?.language));
+  const texts = computed(() => tripMapUiTexts(articleContext?.language));
+  return {
+    slugList,
+    excludeList,
+    handNodes,
+    facadeThumbs,
+    heightStyle,
+    articleContext,
+    isAutoMode,
+    isConfigOnly,
+    geoUrl,
+    labels,
+    texts
+  };
+}
+export {
+  MDX_ARTICLE_CONTEXT_KEY,
+  parseTripMapHandNodes2 as parseHandNodes,
+  tripMapFormatTime,
+  useTripMap
+};

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

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

package/dist/edit/TripMapEdit.vue.js

@@ -0,0 +1,50 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, toDisplayString, createCommentVNode, Fragment, createTextVNode } from "vue";
+import { parseTripMapHandNodes } from "@blogmcp/mdx-schema/tripmap";
+const _hoisted_1 = {
+  class: "flex items-center gap-3 rounded-lg border border-blue-500/40 bg-blue-500/5 px-3 py-2",
+  "data-mdx-component": "TripMap"
+};
+const _hoisted_2 = { class: "font-medium" };
+const _hoisted_3 = { class: "text-sm opacity-70" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TripMapEdit",
+  props: {
+    slugs: {},
+    exclude: {},
+    nodes: {},
+    height: {},
+    line: { type: Boolean },
+    filmstrip: { type: Boolean },
+    playback: { type: Boolean },
+    cluster: { type: Boolean },
+    theme: {},
+    styleUrl: {},
+    center: {},
+    zoom: {},
+    title: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slugCount = computed(() => (props.slugs ?? "").split(",").filter((s) => s.trim()).length);
+    const nodeCount = computed(() => parseTripMapHandNodes(props.nodes).length);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[0] || (_cache[0] = createElementVNode("span", { "aria-hidden": "true" }, "🗺", -1)),
+        createElementVNode("span", _hoisted_2, toDisplayString(__props.title || "TripMap"), 1),
+        createElementVNode("span", _hoisted_3, [
+          slugCount.value > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(slugCount.value) + " photos", 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode("auto (article media)")
+          ], 64)),
+          nodeCount.value > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createTextVNode(" · " + toDisplayString(nodeCount.value) + " waypoints", 1)
+          ], 64)) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/edit/TripMapEdit.vue2.js

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

package/dist/edit/index.d.ts

@@ -16,6 +16,7 @@ export { default as AlertEdit } from './AlertEdit.vue';
 export { default as BadgeEdit } from './BadgeEdit.vue';
 export { default as IconEdit } from './IconEdit.vue';
 export { default as TooltipEdit } from './TooltipEdit.vue';
+export { default as TripMapEdit } from './TripMapEdit.vue';
 export { default as Callout } from './CalloutEdit.vue';
 export { default as CodeBlock } from './CodeBlockEdit.vue';
 export { default as Gallery } from './GalleryEdit.vue';
@@ -27,3 +28,4 @@ export { default as Alert } from './AlertEdit.vue';
 export { default as Badge } from './BadgeEdit.vue';
 export { default as Icon } from './IconEdit.vue';
 export { default as Tooltip } from './TooltipEdit.vue';
+export { default as TripMap } from './TripMapEdit.vue';

package/dist/edit/index.js

@@ -9,6 +9,7 @@ import { default as default16, default as default17 } from "./AlertEdit.vue2.js"
 import { default as default18, default as default19 } from "./BadgeEdit.vue2.js";
 import { default as default20, default as default21 } from "./IconEdit.vue2.js";
 import { default as default22, default as default23 } from "./TooltipEdit.vue2.js";
+import { default as default24, default as default25 } from "./TripMapEdit.vue.js";
 export {
   default16 as Alert,
   default17 as AlertEdit,
@@ -30,6 +31,8 @@ export {
   default21 as IconEdit,
   default22 as Tooltip,
   default23 as TooltipEdit,
+  default24 as TripMap,
+  default25 as TripMapEdit,
   default8 as YouTube,
   default9 as YouTubeEdit
 };

package/dist/index.d.ts

@@ -6,7 +6,7 @@
  * md-editor edit preview (dark theme) and KB blog (light theme, variants).
  */
 export * from './composables';
-export { CalloutEdit, CodeBlockEdit, GalleryEdit, YouTubeEdit, AudioPlayerEdit, Callout as EditCallout, CodeBlock as EditCodeBlock, Gallery as EditGallery, YouTube as EditYouTube, AudioPlayer as EditAudioPlayer, } from './edit';
-export { Callout as RenderCallout, CalloutDefault, CalloutMinimal, CodeBlock as RenderCodeBlock, CodeBlockDefault, Gallery as RenderGallery, GalleryGrid, YouTube as RenderYouTube, YouTubeDefault, AudioPlayer as RenderAudioPlayer, AudioPlayerDefault, getRenderComponent, getComponentVariants, } from './render';
+export { CalloutEdit, CodeBlockEdit, GalleryEdit, YouTubeEdit, AudioPlayerEdit, TripMapEdit, Callout as EditCallout, CodeBlock as EditCodeBlock, Gallery as EditGallery, YouTube as EditYouTube, AudioPlayer as EditAudioPlayer, } from './edit';
+export { Callout as RenderCallout, CalloutDefault, CalloutMinimal, CodeBlock as RenderCodeBlock, CodeBlockDefault, Gallery as RenderGallery, GalleryGrid, YouTube as RenderYouTube, YouTubeDefault, AudioPlayer as RenderAudioPlayer, AudioPlayerDefault, TripMap as RenderTripMap, TripMapDefault, getRenderComponent, getComponentVariants, } from './render';
 export { Callout, CodeBlock, Gallery, YouTube, AudioPlayer, } from './edit';
 export { componentRegistry, getComponentVariants as getRegistryVariants, getRenderComponentAsync, getEditComponentAsync, getEditorConfig, type ComponentRegistration, type EditorConfig, } from './registry';

package/dist/index.js

@@ -4,6 +4,7 @@ import { gridColsClasses, isMediaObject, isVideoUrl, useGallery } from "./compos
 import { YOUTUBE_EMBED_BASE, YOUTUBE_IFRAME_ALLOW, useYouTube } from "./composables/useYouTube.js";
 import { useAudioPlayer } from "./composables/useAudioPlayer.js";
 import { IMG_COMPONENT_KEY, useOptimizedImg } from "./composables/useMedia.js";
+import { MDX_ARTICLE_CONTEXT_KEY, useTripMap } from "./composables/useTripMap.js";
 import { default as default2, default as default3, default as default4 } from "./edit/CalloutEdit.vue.js";
 import { default as default5, default as default6, default as default7 } from "./edit/CodeBlockEdit.vue.js";
 import { default as default8, default as default9, default as default10 } from "./edit/GalleryEdit.vue.js";
@@ -14,24 +15,27 @@ import "@blogmcp/mdx-schema/styles";
 import "./packages/sanitize/dist/html.js";
 import "./_virtual/index.js";
 import "./node_modules/@iconify/vue/dist/iconify.js";
+import { default as default17 } from "./edit/TripMapEdit.vue.js";
 import { getRenderComponent } from "./render/index.js";
 import { componentRegistry, getComponentVariants, getEditComponentAsync, getEditorConfig, getComponentVariants as getComponentVariants2, getRenderComponentAsync } from "./registry.js";
-import { default as default17, default as default18 } from "./render/callout/CalloutDefault.vue.js";
-import { default as default19 } from "./render/callout/CalloutMinimal.vue.js";
-import { default as default20, default as default21 } from "./render/gallery/GalleryGrid.vue.js";
-import { default as default22, default as default23 } from "./render/youtube/YouTubeDefault.vue.js";
-import { default as default24, default as default25 } from "./render/audioplayer/AudioPlayerDefault.vue.js";
-import { default as default26, default as default27 } from "./render/codeblock/CodeBlockDefault.vue.js";
+import { default as default18, default as default19 } from "./render/callout/CalloutDefault.vue.js";
+import { default as default20 } from "./render/callout/CalloutMinimal.vue.js";
+import { default as default21, default as default22 } from "./render/gallery/GalleryGrid.vue.js";
+import { default as default23, default as default24 } from "./render/youtube/YouTubeDefault.vue.js";
+import { default as default25, default as default26 } from "./render/audioplayer/AudioPlayerDefault.vue.js";
+import { default as default27, default as default28 } from "./render/tripmap/TripMapDefault.vue.js";
+import { default as default29, default as default30 } from "./render/codeblock/CodeBlockDefault.vue.js";
+import { parseTripMapHandNodes, tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
 export {
   default14 as AudioPlayer,
-  default24 as AudioPlayerDefault,
+  default25 as AudioPlayerDefault,
   default15 as AudioPlayerEdit,
   default2 as Callout,
-  default17 as CalloutDefault,
+  default18 as CalloutDefault,
   default3 as CalloutEdit,
-  default19 as CalloutMinimal,
+  default20 as CalloutMinimal,
   default5 as CodeBlock,
-  default26 as CodeBlockDefault,
+  default29 as CodeBlockDefault,
   default6 as CodeBlockEdit,
   default16 as EditAudioPlayer,
   default4 as EditCallout,
@@ -40,17 +44,21 @@ export {
   default11 as EditYouTube,
   default9 as Gallery,
   default10 as GalleryEdit,
-  default20 as GalleryGrid,
+  default21 as GalleryGrid,
   IMG_COMPONENT_KEY,
-  default25 as RenderAudioPlayer,
-  default18 as RenderCallout,
-  default27 as RenderCodeBlock,
-  default21 as RenderGallery,
-  default22 as RenderYouTube,
+  MDX_ARTICLE_CONTEXT_KEY,
+  default26 as RenderAudioPlayer,
+  default19 as RenderCallout,
+  default30 as RenderCodeBlock,
+  default22 as RenderGallery,
+  default27 as RenderTripMap,
+  default23 as RenderYouTube,
+  default28 as TripMapDefault,
+  default17 as TripMapEdit,
   YOUTUBE_EMBED_BASE,
   YOUTUBE_IFRAME_ALLOW,
   default12 as YouTube,
-  default23 as YouTubeDefault,
+  default24 as YouTubeDefault,
   default13 as YouTubeEdit,
   calloutConfigs,
   calloutIconPaths,
@@ -66,10 +74,13 @@ export {
   isMediaObject,
   isVideoUrl,
   languageLabels,
+  parseTripMapHandNodes as parseHandNodes,
+  tripMapFormatTime,
   useAudioPlayer,
   useCallout,
   useCodeBlock,
   useGallery,
   useOptimizedImg,
+  useTripMap,
   useYouTube
 };

package/dist/registry.js

@@ -82,6 +82,13 @@ const vueWiring = {
       default: () => import("./render/tooltip/Tooltip.vue.js")
     },
     edit: () => import("./edit/TooltipEdit.vue.js")
+  },
+  TripMap: {
+    editor: { icon: "map", color: "#3b82f6", borderColor: "#3b82f6", bgColor: "rgba(59, 130, 246, 0.08)" },
+    render: {
+      default: () => import("./render/tripmap/TripMapDefault.vue2.js")
+    },
+    edit: () => import("./edit/TripMapEdit.vue2.js")
   }
 };
 const componentRegistry = Object.fromEntries(

package/dist/render/index.d.ts

@@ -18,12 +18,14 @@ import { Alert as AlertDefault } from './alert';
 import { Badge as BadgeDefault } from './badge';
 import { Icon as IconDefault } from './icon';
 import { Tooltip as TooltipDefault } from './tooltip';
+import { TripMapDefault } from './tripmap';
 export { CalloutDefault, CalloutMinimal };
 export { CodeBlockDefault };
 export { GalleryGrid, GalleryLightbox };
 export { YouTubeDefault };
 export { AudioPlayerDefault };
 export { ButtonDefault, CardDefault, AlertDefault, BadgeDefault, IconDefault, TooltipDefault };
+export { TripMapDefault };
 export { default as Callout } from './callout';
 export { default as CodeBlock } from './codeblock';
 export { default as Gallery } from './gallery';
@@ -35,6 +37,7 @@ export { default as Alert } from './alert';
 export { default as Badge } from './badge';
 export { default as Icon } from './icon';
 export { default as Tooltip } from './tooltip';
+export { default as TripMap } from './tripmap';
 export { getRenderComponentAsync, getComponentVariants, getEditorConfig, componentRegistry, } from '../registry';
 /** @deprecated Use getRenderComponentAsync from registry instead */
 export declare function getRenderComponent(componentName: string, variant?: string): unknown;

package/dist/render/index.js

@@ -1,29 +1,31 @@
-import _sfc_main$a from "./callout/CalloutDefault.vue.js";
-import _sfc_main$9 from "./callout/CalloutMinimal.vue.js";
+import _sfc_main$b from "./callout/CalloutDefault.vue.js";
+import _sfc_main$a from "./callout/CalloutMinimal.vue.js";
 import CodeBlockDefault from "./codeblock/CodeBlockDefault.vue.js";
-import _sfc_main$8 from "./gallery/GalleryGrid.vue.js";
+import _sfc_main$9 from "./gallery/GalleryGrid.vue.js";
 import { default as default2 } from "./gallery/GalleryLightbox.vue.js";
-import _sfc_main$7 from "./youtube/YouTubeDefault.vue.js";
-import _sfc_main$6 from "./audioplayer/AudioPlayerDefault.vue.js";
-import _sfc_main$5 from "./button/Button.vue2.js";
-import _sfc_main$4 from "./card/Card.vue2.js";
-import _sfc_main$3 from "./alert/Alert.vue2.js";
-import _sfc_main$2 from "./badge/Badge.vue2.js";
-import _sfc_main$1 from "./icon/Icon.vue2.js";
-import _sfc_main from "./tooltip/Tooltip.vue2.js";
+import _sfc_main$8 from "./youtube/YouTubeDefault.vue.js";
+import _sfc_main$7 from "./audioplayer/AudioPlayerDefault.vue.js";
+import _sfc_main$6 from "./button/Button.vue2.js";
+import _sfc_main$5 from "./card/Card.vue2.js";
+import _sfc_main$4 from "./alert/Alert.vue2.js";
+import _sfc_main$3 from "./badge/Badge.vue2.js";
+import _sfc_main$2 from "./icon/Icon.vue2.js";
+import _sfc_main$1 from "./tooltip/Tooltip.vue2.js";
+import _sfc_main from "./tripmap/TripMapDefault.vue.js";
 import { componentRegistry, getComponentVariants, getEditorConfig, getRenderComponentAsync } from "../registry.js";
 const syncRegistry = {
-  Callout: { default: _sfc_main$a, minimal: _sfc_main$9 },
+  Callout: { default: _sfc_main$b, minimal: _sfc_main$a },
   CodeBlock: { default: CodeBlockDefault },
-  Gallery: { default: _sfc_main$8, grid: _sfc_main$8 },
-  YouTube: { default: _sfc_main$7 },
-  AudioPlayer: { default: _sfc_main$6 },
-  Button: { default: _sfc_main$5 },
-  Card: { default: _sfc_main$4 },
-  Alert: { default: _sfc_main$3 },
-  Badge: { default: _sfc_main$2 },
-  Icon: { default: _sfc_main$1 },
-  Tooltip: { default: _sfc_main }
+  Gallery: { default: _sfc_main$9, grid: _sfc_main$9 },
+  YouTube: { default: _sfc_main$8 },
+  AudioPlayer: { default: _sfc_main$7 },
+  Button: { default: _sfc_main$6 },
+  Card: { default: _sfc_main$5 },
+  Alert: { default: _sfc_main$4 },
+  Badge: { default: _sfc_main$3 },
+  Icon: { default: _sfc_main$2 },
+  Tooltip: { default: _sfc_main$1 },
+  TripMap: { default: _sfc_main }
 };
 function getRenderComponent(componentName, variant = "default") {
   const componentVariants = syncRegistry[componentName];
@@ -31,30 +33,32 @@ function getRenderComponent(componentName, variant = "default") {
   return componentVariants[variant] || componentVariants.default;
 }
 export {
-  _sfc_main$3 as Alert,
-  _sfc_main$3 as AlertDefault,
-  _sfc_main$6 as AudioPlayer,
-  _sfc_main$6 as AudioPlayerDefault,
-  _sfc_main$2 as Badge,
-  _sfc_main$2 as BadgeDefault,
-  _sfc_main$5 as Button,
-  _sfc_main$5 as ButtonDefault,
-  _sfc_main$a as Callout,
-  _sfc_main$a as CalloutDefault,
-  _sfc_main$9 as CalloutMinimal,
-  _sfc_main$4 as Card,
-  _sfc_main$4 as CardDefault,
+  _sfc_main$4 as Alert,
+  _sfc_main$4 as AlertDefault,
+  _sfc_main$7 as AudioPlayer,
+  _sfc_main$7 as AudioPlayerDefault,
+  _sfc_main$3 as Badge,
+  _sfc_main$3 as BadgeDefault,
+  _sfc_main$6 as Button,
+  _sfc_main$6 as ButtonDefault,
+  _sfc_main$b as Callout,
+  _sfc_main$b as CalloutDefault,
+  _sfc_main$a as CalloutMinimal,
+  _sfc_main$5 as Card,
+  _sfc_main$5 as CardDefault,
   CodeBlockDefault as CodeBlock,
   CodeBlockDefault,
-  _sfc_main$8 as Gallery,
-  _sfc_main$8 as GalleryGrid,
+  _sfc_main$9 as Gallery,
+  _sfc_main$9 as GalleryGrid,
   default2 as GalleryLightbox,
-  _sfc_main$1 as Icon,
-  _sfc_main$1 as IconDefault,
-  _sfc_main as Tooltip,
-  _sfc_main as TooltipDefault,
-  _sfc_main$7 as YouTube,
-  _sfc_main$7 as YouTubeDefault,
+  _sfc_main$2 as Icon,
+  _sfc_main$2 as IconDefault,
+  _sfc_main$1 as Tooltip,
+  _sfc_main$1 as TooltipDefault,
+  _sfc_main as TripMap,
+  _sfc_main as TripMapDefault,
+  _sfc_main$8 as YouTube,
+  _sfc_main$8 as YouTubeDefault,
   componentRegistry,
   getComponentVariants,
   getEditorConfig,

package/dist/render/tripmap/TripMapDefault.vue.d.ts

@@ -0,0 +1,9 @@
+import type { TripMapProps } from '@blogmcp/mdx-schema';
+declare const _default: import("vue").DefineComponent<TripMapProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TripMapProps> & Readonly<{}>, {
+    line: boolean;
+    filmstrip: boolean;
+    playback: boolean;
+    cluster: boolean;
+    theme: "light" | "dark" | "auto";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/render/tripmap/TripMapDefault.vue.js

@@ -0,0 +1,197 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle } from "vue";
+import { tripMapStyles } from "@blogmcp/mdx-schema/styles";
+import { useTripMap } from "../../composables/useTripMap.js";
+import { tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TripMapDefault",
+  props: {
+    slugs: {},
+    exclude: {},
+    nodes: {},
+    height: {},
+    line: { type: Boolean, default: true },
+    filmstrip: { type: Boolean, default: true },
+    playback: { type: Boolean, default: true },
+    cluster: { type: Boolean, default: true },
+    theme: { default: "auto" },
+    styleUrl: {},
+    center: {},
+    zoom: {},
+    title: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { slugList, handNodes, facadeThumbs, heightStyle, geoUrl, isConfigOnly, labels, texts } = useTripMap(props);
+    const rootEl = ref(null);
+    const mapEl = ref(null);
+    const status = ref("facade");
+    const skippedCount = ref(0);
+    let destroyMap = null;
+    let observer = null;
+    let started = false;
+    async function fetchGeoNodes() {
+      try {
+        const res = await fetch(geoUrl.value, { headers: { accept: "application/json" } });
+        if (!res.ok) throw new Error(`media/geo ${res.status}`);
+        return await res.json();
+      } catch (err) {
+        if (isConfigOnly.value) return { nodes: [] };
+        throw err;
+      }
+    }
+    async function start() {
+      if (started) return;
+      started = true;
+      status.value = "loading";
+      try {
+        const [core, geo] = await Promise.all([import("@blogmcp/tripmap-core"), fetchGeoNodes()]);
+        const mediaNodes = (geo.nodes ?? []).filter((n) => typeof n.latitude === "number" && typeof n.longitude === "number").map((n) => ({
+          id: n.slug,
+          lat: n.latitude,
+          lng: n.longitude,
+          capturedAt: n.capturedAt ?? void 0,
+          thumbnailUrl: n.thumbnailUrl ?? void 0,
+          imageUrl: n.url ?? void 0,
+          altText: n.altText ?? void 0,
+          title: n.placeName ?? void 0
+        }));
+        const nodes = core.buildTripNodes(mediaNodes, handNodes.value);
+        skippedCount.value = geo.skipped ?? 0;
+        if (nodes.length === 0 || !mapEl.value) {
+          status.value = "empty";
+          return;
+        }
+        const map = new core.TripMap(mapEl.value, {
+          styleUrl: props.styleUrl || geo.config?.styleUrl || "",
+          darkStyleUrl: geo.config?.darkStyleUrl,
+          theme: props.theme,
+          cluster: props.cluster,
+          showLine: props.line,
+          showFilmstrip: props.filmstrip,
+          showPlayback: props.playback,
+          extraAttribution: geo.config?.attribution,
+          labels: labels.value,
+          initialView: initialViewFromProps(),
+          events: {}
+        });
+        map.setNodes(nodes);
+        await map.init();
+        destroyMap = () => map.destroy();
+        status.value = "live";
+      } catch {
+        status.value = started && status.value === "loading" ? "facade" : status.value;
+      }
+    }
+    function initialViewFromProps() {
+      if (!props.center) return void 0;
+      const [lat, lng] = props.center.split(",").map((v) => Number.parseFloat(v.trim()));
+      if (!Number.isFinite(lat) || !Number.isFinite(lng)) return void 0;
+      return { center: [lng, lat], zoom: props.zoom };
+    }
+    onMounted(() => {
+      const el = rootEl.value;
+      if (!el) return;
+      if (typeof IntersectionObserver === "undefined") {
+        void start();
+        return;
+      }
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) {
+            observer?.disconnect();
+            observer = null;
+            void start();
+          }
+        },
+        { rootMargin: "300px" }
+      );
+      observer.observe(el);
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      destroyMap?.();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootEl",
+        ref: rootEl,
+        class: normalizeClass(unref(tripMapStyles).container),
+        "data-mdx-component": "TripMap",
+        "aria-label": __props.title
+      }, [
+        __props.title ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          class: normalizeClass(unref(tripMapStyles).head)
+        }, toDisplayString(__props.title), 3)) : createCommentVNode("", true),
+        unref(facadeThumbs).length && status.value !== "live" ? (openBlock(), createElementBlock("ol", {
+          key: 1,
+          class: normalizeClass(unref(tripMapStyles).strip)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(facadeThumbs), (thumb) => {
+            return openBlock(), createElementBlock("li", {
+              key: thumb.slug,
+              class: normalizeClass(unref(tripMapStyles).stripItem)
+            }, [
+              createElementVNode("img", {
+                src: thumb.src,
+                alt: "",
+                width: "80",
+                height: "80",
+                loading: "lazy",
+                decoding: "async",
+                class: normalizeClass(unref(tripMapStyles).stripImg)
+              }, null, 10, _hoisted_2)
+            ], 2);
+          }), 128))
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(unref(tripMapStyles).mapWrap),
+          style: normalizeStyle(unref(heightStyle))
+        }, [
+          createElementVNode("div", {
+            ref_key: "mapEl",
+            ref: mapEl,
+            class: "absolute inset-0"
+          }, null, 512),
+          status.value !== "live" ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(tripMapStyles).mapOverlay])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(tripMapStyles).mapBox)
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(unref(tripMapStyles).mapHint)
+              }, toDisplayString(status.value === "empty" ? unref(texts).empty : unref(texts).hint), 3)
+            ], 2)
+          ], 2)) : createCommentVNode("", true)
+        ], 6),
+        unref(handNodes).length && status.value !== "live" ? (openBlock(), createElementBlock("ol", {
+          key: 2,
+          class: normalizeClass(unref(tripMapStyles).stopList)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(handNodes), (node, i) => {
+            return openBlock(), createElementBlock("li", {
+              key: node.id || i
+            }, [
+              node.capturedAt ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(unref(tripMapStyles).stopTime)
+              }, toDisplayString(unref(tripMapFormatTime)(node.capturedAt)), 3)) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString(node.title || `${node.lat}, ${node.lng}`), 1)
+            ]);
+          }), 128))
+        ], 2)) : createCommentVNode("", true),
+        status.value !== "live" ? (openBlock(), createElementBlock("p", {
+          key: 3,
+          class: normalizeClass(unref(tripMapStyles).note)
+        }, toDisplayString(unref(texts).unavailable), 3)) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/render/tripmap/TripMapDefault.vue2.js

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

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

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

package/dist/render/tripmap/index.js

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

package/dist/useTripMap.d.ts

@@ -0,0 +1,64 @@
+import { ComputedRef } from 'vue';
+import { InjectionKey } from 'vue';
+import { parseTripMapHandNodes as parseHandNodes } from '@blogmcp/mdx-schema/tripmap';
+import { tripMapFormatTime } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapGeoNode } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapGeoResponse } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapHandNode } from '@blogmcp/mdx-schema';
+import { TripMapProps } from '@blogmcp/mdx-schema';
+import { TripMapUiTexts } from '@blogmcp/mdx-schema/tripmap';
+
+export declare const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null>;
+
+/**
+ * Article identity for AUTO mode (map every geotagged media of the article).
+ * The host app provides it around its MDX render tree (the Nuxt blog does it
+ * in `components/article/MdxContent.vue` for article + preview pages; a bare
+ * consumer that doesn't provide it simply has no auto mode — TripMap then
+ * needs explicit `slugs` or `nodes`).
+ */
+export declare interface MdxArticleContext {
+    filename: string;
+    language?: string;
+}
+
+export { parseHandNodes }
+
+export { tripMapFormatTime }
+
+export { TripMapGeoNode }
+
+export { TripMapGeoResponse }
+
+export declare function useTripMap(props: TripMapProps): UseTripMapResult;
+
+export declare interface UseTripMapResult {
+    slugList: ComputedRef<string[]>;
+    excludeList: ComputedRef<string[]>;
+    handNodes: ComputedRef<TripMapHandNode[]>;
+    /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
+    facadeThumbs: ComputedRef<{
+        slug: string;
+        src: string;
+    }[]>;
+    heightStyle: ComputedRef<{
+        height: string;
+    }>;
+    articleContext: MdxArticleContext | null;
+    isAutoMode: ComputedRef<boolean>;
+    /**
+     * Nothing selects media (no slugs, no article context): the geo call only
+     * fetches the tenant basemap config, so its failure must not sink a map
+     * of hand-made nodes — the wrapper falls back to the core default style.
+     */
+    isConfigOnly: ComputedRef<boolean>;
+    /** Always set: slugs / article selection, or the config-only URL. */
+    geoUrl: ComputedRef<string>;
+    labels: ComputedRef<{
+        play: string;
+        stop: string;
+    } | undefined>;
+    texts: ComputedRef<TripMapUiTexts>;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blogmcp/mdx-render-vue",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Vue renderer for MDX components — edit + render SFCs wired to @blogmcp/mdx-schema",
   "type": "module",
   "publishConfig": {
@@ -73,6 +73,14 @@
     "./composables/audioplayer": {
       "types": "./src/composables/useAudioPlayer.ts",
       "import": "./dist/composables/useAudioPlayer.js"
+    },
+    "./render/tripmap": {
+      "types": "./src/render/tripmap/index.ts",
+      "import": "./dist/render/tripmap/index.js"
+    },
+    "./composables/tripmap": {
+      "types": "./src/composables/useTripMap.ts",
+      "import": "./dist/composables/useTripMap.js"
     }
   },
   "files": [
@@ -90,8 +98,9 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@blogmcp/mdx-schema": "^0.2.2",
-    "@blogmcp/sanitize": "^0.2.2",
+    "@blogmcp/mdx-schema": "^0.4.0",
+    "@blogmcp/sanitize": "^0.3.0",
+    "@blogmcp/tripmap-core": "^0.1.0",
     "@ark-ui/vue": "^5.0.0",
     "@iconify/vue": "^5.0.0"
   },

package/src/composables/index.ts

@@ -14,3 +14,12 @@ export {
 } from './useYouTube'
 export { useAudioPlayer } from './useAudioPlayer'
 export { useOptimizedImg, IMG_COMPONENT_KEY } from './useMedia'
+export {
+  useTripMap,
+  parseHandNodes,
+  tripMapFormatTime,
+  MDX_ARTICLE_CONTEXT_KEY,
+  type MdxArticleContext,
+  type TripMapGeoNode,
+  type TripMapGeoResponse,
+} from './useTripMap'

package/src/composables/useTripMap.ts

@@ -0,0 +1,107 @@
+/**
+ * TripMap composable — Vue binding over the shared framework-free helpers
+ * in @blogmcp/mdx-schema/tripmap (prop parsing, geo-URL contract, texts).
+ *
+ * HARD CONSTRAINT: this module (and every module statically reachable from
+ * the TripMap SFCs) must NOT statically import '@blogmcp/tripmap-core' —
+ * not even its pure '/nodes' subpath. The article-review MCP-App bundles
+ * this package from source into ONE file with that package externalized;
+ * a top-level bare import would break the whole bundle at load time. The
+ * core is reached exclusively via `import('@blogmcp/tripmap-core')` inside
+ * the SFC's intersection handler (rejects harmlessly in the iframe).
+ */
+
+import { computed, inject, type ComputedRef, type InjectionKey } from 'vue'
+import type { TripMapHandNode, TripMapProps } from '@blogmcp/mdx-schema'
+import {
+  buildTripMapGeoUrl,
+  parseTripMapHandNodes,
+  splitTripMapList,
+  TRIPMAP_DEFAULT_HEIGHT,
+  tripMapFormatTime,
+  tripMapPlaybackLabels,
+  tripMapUiTexts,
+  type TripMapGeoNode,
+  type TripMapGeoResponse,
+  type TripMapUiTexts,
+} from '@blogmcp/mdx-schema/tripmap'
+
+// Re-export the shared helpers under this package's established names so
+// consumers (md-editor, tests) have one import site on the Vue side.
+export { tripMapFormatTime }
+export { parseTripMapHandNodes as parseHandNodes }
+export type { TripMapGeoNode, TripMapGeoResponse }
+
+/**
+ * Article identity for AUTO mode (map every geotagged media of the article).
+ * The host app provides it around its MDX render tree (the Nuxt blog does it
+ * in `components/article/MdxContent.vue` for article + preview pages; a bare
+ * consumer that doesn't provide it simply has no auto mode — TripMap then
+ * needs explicit `slugs` or `nodes`).
+ */
+export interface MdxArticleContext {
+  filename: string
+  language?: string
+}
+
+export const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null> =
+  Symbol.for('blogmcp:mdx-article-context')
+
+export interface UseTripMapResult {
+  slugList: ComputedRef<string[]>
+  excludeList: ComputedRef<string[]>
+  handNodes: ComputedRef<TripMapHandNode[]>
+  /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
+  facadeThumbs: ComputedRef<{ slug: string; src: string }[]>
+  heightStyle: ComputedRef<{ height: string }>
+  articleContext: MdxArticleContext | null
+  isAutoMode: ComputedRef<boolean>
+  /**
+   * Nothing selects media (no slugs, no article context): the geo call only
+   * fetches the tenant basemap config, so its failure must not sink a map
+   * of hand-made nodes — the wrapper falls back to the core default style.
+   */
+  isConfigOnly: ComputedRef<boolean>
+  /** Always set: slugs / article selection, or the config-only URL. */
+  geoUrl: ComputedRef<string>
+  labels: ComputedRef<{ play: string; stop: string } | undefined>
+  texts: ComputedRef<TripMapUiTexts>
+}
+
+export function useTripMap(props: TripMapProps): UseTripMapResult {
+  const articleContext = inject(MDX_ARTICLE_CONTEXT_KEY, null)
+
+  const slugList = computed(() => splitTripMapList(props.slugs))
+  const excludeList = computed(() => splitTripMapList(props.exclude))
+  const handNodes = computed(() => parseTripMapHandNodes(props.nodes))
+  const isAutoMode = computed(() => slugList.value.length === 0)
+  const isConfigOnly = computed(() => slugList.value.length === 0 && !articleContext?.filename)
+
+  const facadeThumbs = computed(() =>
+    slugList.value.map((slug) => ({
+      slug,
+      src: `/api/media/thumb/${encodeURIComponent(slug)}?width=192`,
+    })),
+  )
+
+  const heightStyle = computed(() => ({ height: props.height || TRIPMAP_DEFAULT_HEIGHT }))
+
+  const geoUrl = computed(() => buildTripMapGeoUrl(props, articleContext))
+
+  const labels = computed(() => tripMapPlaybackLabels(articleContext?.language))
+  const texts = computed(() => tripMapUiTexts(articleContext?.language))
+
+  return {
+    slugList,
+    excludeList,
+    handNodes,
+    facadeThumbs,
+    heightStyle,
+    articleContext,
+    isAutoMode,
+    isConfigOnly,
+    geoUrl,
+    labels,
+    texts,
+  }
+}

package/src/edit/TripMapEdit.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * TripMap edit placeholder for the md-editor Tiptap NodeView.
+ *
+ * Deliberately STATIC — no map canvas, no fetch, no maplibre import. The
+ * NodeView re-renders on keystroke-adjacent updates; mounting a WebGL map
+ * there would thrash. Authors see a compact summary chip row instead and
+ * check the real map through the preview panel / published page.
+ */
+
+import { computed } from 'vue'
+import type { TripMapProps } from '@blogmcp/mdx-schema'
+import { parseHandNodes } from '../composables/useTripMap'
+
+const props = defineProps<TripMapProps>()
+
+const slugCount = computed(() => (props.slugs ?? '').split(',').filter((s) => s.trim()).length)
+const nodeCount = computed(() => parseHandNodes(props.nodes).length)
+</script>
+
+<template>
+  <div class="flex items-center gap-3 rounded-lg border border-blue-500/40 bg-blue-500/5 px-3 py-2" data-mdx-component="TripMap">
+    <span aria-hidden="true">🗺</span>
+    <span class="font-medium">{{ title || 'TripMap' }}</span>
+    <span class="text-sm opacity-70">
+      <template v-if="slugCount > 0">{{ slugCount }} photos</template>
+      <template v-else>auto (article media)</template>
+      <template v-if="nodeCount > 0"> · {{ nodeCount }} waypoints</template>
+    </span>
+  </div>
+</template>

package/src/edit/index.ts

@@ -17,6 +17,7 @@ export { default as AlertEdit } from './AlertEdit.vue'
 export { default as BadgeEdit } from './BadgeEdit.vue'
 export { default as IconEdit } from './IconEdit.vue'
 export { default as TooltipEdit } from './TooltipEdit.vue'
+export { default as TripMapEdit } from './TripMapEdit.vue'
 
 // Re-export as generic names for backward compatibility
 export { default as Callout } from './CalloutEdit.vue'
@@ -30,3 +31,4 @@ export { default as Alert } from './AlertEdit.vue'
 export { default as Badge } from './BadgeEdit.vue'
 export { default as Icon } from './IconEdit.vue'
 export { default as Tooltip } from './TooltipEdit.vue'
+export { default as TripMap } from './TripMapEdit.vue'

package/src/index.ts

@@ -16,6 +16,7 @@ export {
   GalleryEdit,
   YouTubeEdit,
   AudioPlayerEdit,
+  TripMapEdit,
   // Aliases for backward compatibility
   Callout as EditCallout,
   CodeBlock as EditCodeBlock,
@@ -37,6 +38,8 @@ export {
   YouTubeDefault,
   AudioPlayer as RenderAudioPlayer,
   AudioPlayerDefault,
+  TripMap as RenderTripMap,
+  TripMapDefault,
   getRenderComponent,
   getComponentVariants,
 } from './render'

package/src/registry.ts

@@ -142,6 +142,13 @@ const vueWiring: Record<string, VueWiring> = {
     },
     edit: () => import('./edit/TooltipEdit.vue'),
   },
+  TripMap: {
+    editor: { icon: 'map', color: '#3b82f6', borderColor: '#3b82f6', bgColor: 'rgba(59, 130, 246, 0.08)' },
+    render: {
+      default: () => import('./render/tripmap/TripMapDefault.vue'),
+    },
+    edit: () => import('./edit/TripMapEdit.vue'),
+  },
 }
 
 /** Merged registry: schema metadata + Vue wiring, keyed by component name. */

package/src/render/index.ts

@@ -20,6 +20,7 @@ import { Alert as AlertDefault } from './alert'
 import { Badge as BadgeDefault } from './badge'
 import { Icon as IconDefault } from './icon'
 import { Tooltip as TooltipDefault } from './tooltip'
+import { TripMapDefault } from './tripmap'
 
 // Re-export named variants (backward compat)
 export { CalloutDefault, CalloutMinimal }
@@ -28,6 +29,7 @@ export { GalleryGrid, GalleryLightbox }
 export { YouTubeDefault }
 export { AudioPlayerDefault }
 export { ButtonDefault, CardDefault, AlertDefault, BadgeDefault, IconDefault, TooltipDefault }
+export { TripMapDefault }
 
 // Default exports for convenience
 export { default as Callout } from './callout'
@@ -41,6 +43,7 @@ export { default as Alert } from './alert'
 export { default as Badge } from './badge'
 export { default as Icon } from './icon'
 export { default as Tooltip } from './tooltip'
+export { default as TripMap } from './tripmap'
 
 // Async resolver and helpers from central registry (preferred for new code)
 export {
@@ -63,6 +66,7 @@ const syncRegistry: Record<string, Record<string, unknown>> = {
   Badge: { default: BadgeDefault },
   Icon: { default: IconDefault },
   Tooltip: { default: TooltipDefault },
+  TripMap: { default: TripMapDefault },
 }
 
 /** @deprecated Use getRenderComponentAsync from registry instead */

package/src/render/tripmap/TripMapDefault.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+/**
+ * TripMap Default Render Component
+ *
+ * SSR-safe facade → lazy MapLibre island. The server (and any no-JS
+ * surface, incl. the sanitized article-review embed) sees a static strip
+ * of photo thumbnails + waypoint list + a placeholder box; when the block
+ * scrolls near the viewport we fetch the geo nodes and dynamically import
+ * @blogmcp/tripmap-core (the ONLY path to maplibre-gl — see useTripMap's
+ * module docblock for why this must never become a static import). If the
+ * import or fetch fails, the facade simply stays.
+ */
+
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { tripMapStyles } from '@blogmcp/mdx-schema/styles'
+import type { TripMapProps } from '@blogmcp/mdx-schema'
+import { tripMapFormatTime, useTripMap, type TripMapGeoResponse } from '../../composables/useTripMap'
+
+// withDefaults is load-bearing for the boolean props: Vue boolean-casts an
+// ABSENT `filmstrip?: boolean` prop to false, which would silently flip all
+// the default-true toggles off for every author who doesn't spell them out.
+const props = withDefaults(defineProps<TripMapProps>(), {
+  line: true,
+  filmstrip: true,
+  playback: true,
+  cluster: true,
+  theme: 'auto',
+})
+
+const { slugList, handNodes, facadeThumbs, heightStyle, geoUrl, isConfigOnly, labels, texts } =
+  useTripMap(props)
+
+const rootEl = ref<HTMLElement | null>(null)
+const mapEl = ref<HTMLElement | null>(null)
+const status = ref<'facade' | 'loading' | 'live' | 'empty'>('facade')
+const skippedCount = ref(0)
+
+let destroyMap: (() => void) | null = null
+let observer: IntersectionObserver | null = null
+let started = false
+
+async function fetchGeoNodes(): Promise<TripMapGeoResponse> {
+  try {
+    const res = await fetch(geoUrl.value, { headers: { accept: 'application/json' } })
+    if (!res.ok) throw new Error(`media/geo ${res.status}`)
+    return (await res.json()) as TripMapGeoResponse
+  } catch (err) {
+    // Config-only call (hand-made nodes, nothing selected): the map still has
+    // its nodes — run on the core default style rather than staying a facade.
+    // With a selection the nodes ARE the response, so the failure propagates
+    // and the static facade stays (designed degradation).
+    if (isConfigOnly.value) return { nodes: [] }
+    throw err
+  }
+}
+
+async function start(): Promise<void> {
+  if (started) return
+  started = true
+  status.value = 'loading'
+  try {
+    const [core, geo] = await Promise.all([import('@blogmcp/tripmap-core'), fetchGeoNodes()])
+    const mediaNodes = (geo.nodes ?? [])
+      .filter((n) => typeof n.latitude === 'number' && typeof n.longitude === 'number')
+      .map((n) => ({
+        id: n.slug,
+        lat: n.latitude,
+        lng: n.longitude,
+        capturedAt: n.capturedAt ?? undefined,
+        thumbnailUrl: n.thumbnailUrl ?? undefined,
+        imageUrl: n.url ?? undefined,
+        altText: n.altText ?? undefined,
+        title: n.placeName ?? undefined,
+      }))
+    const nodes = core.buildTripNodes(mediaNodes, handNodes.value)
+    skippedCount.value = geo.skipped ?? 0
+    if (nodes.length === 0 || !mapEl.value) {
+      status.value = 'empty'
+      return
+    }
+    const map = new core.TripMap(mapEl.value, {
+      styleUrl: props.styleUrl || geo.config?.styleUrl || '',
+      darkStyleUrl: geo.config?.darkStyleUrl,
+      theme: props.theme,
+      cluster: props.cluster,
+      showLine: props.line,
+      showFilmstrip: props.filmstrip,
+      showPlayback: props.playback,
+      extraAttribution: geo.config?.attribution,
+      labels: labels.value,
+      initialView: initialViewFromProps(),
+      events: {},
+    })
+    map.setNodes(nodes)
+    await map.init()
+    destroyMap = () => map.destroy()
+    status.value = 'live'
+  } catch {
+    // Core unavailable (review-app iframe, offline) or fetch failed —
+    // the static facade stays, which is the designed degradation.
+    status.value = started && status.value === 'loading' ? 'facade' : status.value
+  }
+}
+
+function initialViewFromProps(): { center?: [number, number]; zoom?: number } | undefined {
+  if (!props.center) return undefined
+  const [lat, lng] = props.center.split(',').map((v) => Number.parseFloat(v.trim()))
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return undefined
+  return { center: [lng, lat], zoom: props.zoom }
+}
+
+onMounted(() => {
+  const el = rootEl.value
+  if (!el) return
+  if (typeof IntersectionObserver === 'undefined') {
+    void start()
+    return
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        observer?.disconnect()
+        observer = null
+        void start()
+      }
+    },
+    { rootMargin: '300px' },
+  )
+  observer.observe(el)
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  destroyMap?.()
+})
+</script>
+
+<template>
+  <div ref="rootEl" :class="tripMapStyles.container" data-mdx-component="TripMap" :aria-label="title">
+    <p v-if="title" :class="tripMapStyles.head">{{ title }}</p>
+
+    <!-- Facade thumb strip (explicit-slugs mode); replaced by the live filmstrip. -->
+    <ol v-if="facadeThumbs.length && status !== 'live'" :class="tripMapStyles.strip">
+      <li v-for="thumb in facadeThumbs" :key="thumb.slug" :class="tripMapStyles.stripItem">
+        <img :src="thumb.src" alt="" width="80" height="80" loading="lazy" decoding="async" :class="tripMapStyles.stripImg" />
+      </li>
+    </ol>
+
+    <!--
+      Sized wrapper: the engine host is a static absolutely-positioned child
+      that Vue never re-patches (reactive bindings on the engine's container
+      would clobber the classes/children the engine adds); the facade box is
+      an overlay that simply unmounts when the map goes live.
+    -->
+    <div :class="tripMapStyles.mapWrap" :style="heightStyle">
+      <div ref="mapEl" class="absolute inset-0"></div>
+      <div v-if="status !== 'live'" :class="[tripMapStyles.mapOverlay]">
+        <div :class="tripMapStyles.mapBox">
+          <span :class="tripMapStyles.mapHint">
+            {{ status === 'empty' ? texts.empty : texts.hint }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Waypoint stop list (hand-made nodes) for the static facade. -->
+    <ol v-if="handNodes.length && status !== 'live'" :class="tripMapStyles.stopList">
+      <li v-for="(node, i) in handNodes" :key="node.id || i">
+        <span v-if="node.capturedAt" :class="tripMapStyles.stopTime">{{ tripMapFormatTime(node.capturedAt) }}</span>
+        <span>{{ node.title || `${node.lat}, ${node.lng}` }}</span>
+      </li>
+    </ol>
+
+    <p v-if="status !== 'live'" :class="tripMapStyles.note">{{ texts.unavailable }}</p>
+  </div>
+</template>

package/src/render/tripmap/index.ts

@@ -0,0 +1,8 @@
+/**
+ * TripMap Render Component Variants
+ */
+
+export { default as TripMapDefault } from './TripMapDefault.vue'
+
+// Default export for convenience
+export { default } from './TripMapDefault.vue'