@blogmcp/mdx-render-vue 0.3.0 → 0.5.0

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

@@ -0,0 +1,209 @@
+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", "alt"];
+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" },
+    detail: { default: "popup" },
+    styleUrl: {},
+    center: {},
+    zoom: {},
+    title: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { slugList, handNodes, facadeThumbs, facadeStops, heightStyle, geoUrl, isConfigOnly, labels, texts } = useTripMap(props);
+    const rootEl = ref(null);
+    const mapEl = ref(null);
+    const detailEl = 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,
+          largeImageUrl: n.largeUrl ?? 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,
+          title: props.title,
+          detail: props.detail,
+          detailHost: props.detail === "panel" ? detailEl.value ?? void 0 : void 0,
+          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: thumb.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),
+        props.detail === "panel" ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          ref_key: "detailEl",
+          ref: detailEl,
+          class: normalizeClass(unref(tripMapStyles).detailHost)
+        }, null, 2)) : createCommentVNode("", true),
+        unref(facadeStops).length && status.value !== "live" ? (openBlock(), createElementBlock("ol", {
+          key: 3,
+          class: normalizeClass(unref(tripMapStyles).stopList)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(facadeStops), (stop) => {
+            return openBlock(), createElementBlock("li", {
+              key: stop.key
+            }, [
+              stop.capturedAt ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(unref(tripMapStyles).stopTime)
+              }, toDisplayString(unref(tripMapFormatTime)(stop.capturedAt)), 3)) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString(stop.title), 1)
+            ]);
+          }), 128))
+        ], 2)) : createCommentVNode("", true),
+        status.value !== "live" ? (openBlock(), createElementBlock("p", {
+          key: 4,
+          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,76 @@
+import { ComputedRef } from 'vue';
+import { InjectionKey } from 'vue';
+import { parseTripMapHandNodes as parseHandNodes } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeMedia } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeStop } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeThumb } 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 { TripMapUiLabels } from '@blogmcp/mdx-schema/tripmap';
+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;
+    /**
+     * The article's geotagged media (the GraphQL `contentImagesGeo` rows),
+     * when the host already has them. Lets the SERVER-RENDERED facade carry
+     * real thumbnails with alt text and named stops in AUTO mode — the part of
+     * a TripMap that crawlers and answer engines read. Optional: without it
+     * the live map still fetches everything, only the no-JS view is poorer.
+     */
+    media?: readonly TripMapFacadeMedia[] | null;
+}
+
+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: author order for explicit `slugs`, capture
+     * order for AUTO mode when the host provided `context.media`. Alt text
+     * comes from that media (empty when unknown).
+     */
+    facadeThumbs: ComputedRef<TripMapFacadeThumb[]>;
+    /** Named stops for the SSR facade: place-labelled photos + hand-made nodes, chronological. */
+    facadeStops: ComputedRef<TripMapFacadeStop[]>;
+    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<TripMapUiLabels | undefined>;
+    texts: ComputedRef<TripMapUiTexts>;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blogmcp/mdx-render-vue",
-  "version": "0.3.0",
+  "version": "0.5.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.3.0",
+    "@blogmcp/mdx-schema": "^0.5.0",
     "@blogmcp/sanitize": "^0.3.0",
+    "@blogmcp/tripmap-core": "^0.1.2",
     "@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,124 @@
+/**
+ * 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,
+  tripMapFacade,
+  tripMapPlaybackLabels,
+  type TripMapFacadeMedia,
+  type TripMapFacadeStop,
+  type TripMapFacadeThumb,
+  type TripMapUiLabels,
+  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
+  /**
+   * The article's geotagged media (the GraphQL `contentImagesGeo` rows),
+   * when the host already has them. Lets the SERVER-RENDERED facade carry
+   * real thumbnails with alt text and named stops in AUTO mode — the part of
+   * a TripMap that crawlers and answer engines read. Optional: without it
+   * the live map still fetches everything, only the no-JS view is poorer.
+   */
+  media?: readonly TripMapFacadeMedia[] | null
+}
+
+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: author order for explicit `slugs`, capture
+   * order for AUTO mode when the host provided `context.media`. Alt text
+   * comes from that media (empty when unknown).
+   */
+  facadeThumbs: ComputedRef<TripMapFacadeThumb[]>
+  /** Named stops for the SSR facade: place-labelled photos + hand-made nodes, chronological. */
+  facadeStops: ComputedRef<TripMapFacadeStop[]>
+  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<TripMapUiLabels | 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 facade = computed(() => tripMapFacade(props, articleContext))
+  const facadeThumbs = computed(() => facade.value.thumbs)
+  const facadeStops = computed(() => facade.value.stops)
+
+  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,
+    facadeStops,
+    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 */