@barzhsieh/nuxt-content-mermaid 2.2.3 → 3.0.2

package/dist/runtime/components/Mermaid.vue

@@ -1,622 +1,152 @@
 <script setup>
-import { useNuxtApp, useRuntimeConfig } from "#app";
+import { useNuxtApp } from "#app";
+import { computed, shallowRef, watch } from "vue";
 import {
-  ref,
-  onMounted,
-  onUnmounted,
-  nextTick,
-  computed,
-  watch,
-  shallowRef,
-  useTemplateRef
-} from "vue";
-import { defu } from "defu";
-import { mergeMermaidConfig, resolveMermaidTheme } from "../mermaid-config";
-import { enqueueRender, parseSizeToPx, isRecord } from "../utils";
-import { useMermaidTheme } from "../composables/useMermaidTheme";
-import { useMermaidExpand } from "../composables/useMermaidExpand";
-import { useMermaidCursors } from "../composables/useMermaidCursors";
-import { useFullscreen } from "../composables/useFullscreen";
-import { useMermaidZoom } from "../composables/useMermaidZoom";
-import { useEventListener } from "../composables/useEventListener";
-import { DEFAULT_TOOLBAR_OPTIONS, DEFAULT_EXPAND_OPTIONS } from "../constants";
+  collectMermaidComponentSourceDependencies,
+  resolveMermaidComponentSource
+} from "../component-configuration";
+import { MERMAID_LOG_PREFIX } from "../constants";
+import BuiltInRenderer from "../built-in-renderer/BuiltInRenderer.vue";
+import {
+  createRendererResolutionFailureHandoff,
+  selectRenderer
+} from "../rendererSelection";
+import { createRendererSelectionAttemptCoordinator } from "../rendererSelectionOrchestration";
+import { getRuntimeMermaidSnapshot } from "../runtime-snapshot";
 import Spinner from "./Spinner.vue";
-import IconClipboard from "./icons/IconClipboard.vue";
-import IconClipboardHover from "./icons/IconClipboardHover.vue";
-import IconClipboardSuccess from "./icons/IconClipboardSuccess.vue";
-import IconFullScreen from "./icons/iconFullScreen.vue";
-import IconFullScreenExit from "./icons/iconFullScreenExit.vue";
-import MermaidExpandOverlay from "./MermaidExpandOverlay.vue";
-import IconExpand from "./icons/IconExpand.vue";
-import IconCollapse from "./icons/IconCollapse.vue";
-import MermaidZoomToolbar from "./MermaidZoomToolbar.vue";
-const isMac = import.meta.client ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) : false;
 const props = defineProps({
-  config: { type: null, required: false },
   toolbar: { type: Object, required: false },
-  code: { type: String, required: false }
-});
+  code: { type: String, required: false },
+  pageConfig: { type: null, required: false },
+  config: { type: null, required: false }
+});
+function resolveCurrentComponentSource() {
+  return resolveMermaidComponentSource({
+    pageConfig: props.pageConfig,
+    config: props.config
+  });
+}
+const initialComponentSource = resolveCurrentComponentSource();
+if (initialComponentSource.kind === "conflict") throw initialComponentSource.error;
+const componentSource = shallowRef(initialComponentSource);
 const nuxtApp = useNuxtApp();
-const runtimeConfig = useRuntimeConfig();
-const contentMermaidOptions = runtimeConfig.public?.contentMermaid || runtimeConfig.public?.mermaidContent || {};
-const isEnabled = contentMermaidOptions.enabled !== false;
-const debug = contentMermaidOptions.debug || false;
-const loaderOptions = contentMermaidOptions.loader || {};
-const themeOptions = contentMermaidOptions.theme || {};
+const contentMermaidOptions = getRuntimeMermaidSnapshot(nuxtApp);
 const componentOptions = contentMermaidOptions.components || {};
-function resolveExpandOptions(expand) {
-  if (expand === false)
-    return { ...DEFAULT_EXPAND_OPTIONS, enabled: false };
-  if (expand === true || !expand || typeof expand !== "object")
-    return DEFAULT_EXPAND_OPTIONS;
-  return defu({}, expand, DEFAULT_EXPAND_OPTIONS);
-}
-const expandOptions = resolveExpandOptions(contentMermaidOptions.expand);
-const expandEnabled = expandOptions.enabled !== false;
-const expandOpenOptions = expandOptions.invokeOpenOn || {};
-const expandCloseOptions = expandOptions.invokeCloseOn || {};
-const expandMargin = typeof expandOptions.margin === "number" && Number.isFinite(expandOptions.margin) ? Math.max(0, expandOptions.margin) : 0;
-const allowOpenDiagramClick = expandOpenOptions.diagramClick !== false;
-const allowOverlayClose = expandCloseOptions.overlayClick !== false;
-const allowCloseButtonClose = expandCloseOptions.closeButtonClick !== false;
-const allowEscClose = expandCloseOptions.esc !== false;
-const allowWheelClose = expandCloseOptions.wheel !== false;
-const allowSwipeClose = expandCloseOptions.swipe !== false;
-const lazyOption = loaderOptions.lazy;
-const isLazy = lazyOption !== false;
-const lazyThreshold = typeof lazyOption === "object" && typeof lazyOption.threshold === "number" ? lazyOption.threshold : 0.1;
-const baseMermaidInit = loaderOptions.init || {};
-const lightTheme = themeOptions.light;
-const darkTheme = themeOptions.dark;
-const colorMode = nuxtApp.$colorMode;
-const { $mermaid } = nuxtApp;
-const { currentTheme: manualThemeMode } = useMermaidTheme();
-const mermaidBlock = useTemplateRef("mermaidBlock");
-const mermaidContainer = useTemplateRef("mermaidContainer");
-const hasRenderedOnce = ref(false);
-const isLoading = ref(false);
-const hasError = ref(false);
-const errorContent = shallowRef(null);
 const decodedCode = computed(() => props.code ? decodeURIComponent(props.code) : "");
-const mermaidDefinition = ref(decodedCode.value);
-let observer = null;
-const defaultToolbarTitle = DEFAULT_TOOLBAR_OPTIONS.title ?? "mermaid";
-const defaultToolbarFontSize = DEFAULT_TOOLBAR_OPTIONS.fontSize ?? "14px";
-const defaultFullscreenToolbarScale = DEFAULT_TOOLBAR_OPTIONS.fullscreenToolbarScale ?? 1.25;
-const baseToolbarDefaults = DEFAULT_TOOLBAR_OPTIONS;
-const runtimeToolbarDefaults = computed(() => {
-  const toolbar = contentMermaidOptions.toolbar;
-  return toolbar && typeof toolbar === "object" ? toolbar : {};
-});
-const resolvedToolbar = computed(() => {
-  return defu({}, props.toolbar ?? {}, runtimeToolbarDefaults.value, baseToolbarDefaults);
-});
-const toolbarButtons = computed(() => {
-  const buttons = resolvedToolbar.value.buttons;
-  return isRecord(buttons) ? buttons : {};
-});
-const toolbarTitle = computed(() => resolvedToolbar.value.title ?? defaultToolbarTitle);
-const toolbarFontSize = computed(() => {
-  const value = resolvedToolbar.value.fontSize ?? defaultToolbarFontSize;
-  if (typeof value === "number")
-    return `${value}px`;
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (/^\d+(?:\.\d+)?$/.test(trimmed))
-      return `${trimmed}px`;
-    return trimmed;
-  }
-  return defaultToolbarFontSize;
-});
-const showCopyButton = computed(() => toolbarButtons.value.copy !== false);
-const copySource = computed(() => decodedCode.value || mermaidDefinition.value || "");
-const hasCopySource = computed(() => !!copySource.value);
-const copyState = ref("idle");
-const copyLabel = computed(() => {
-  if (copyState.value === "copied") return "Copied";
-  if (copyState.value === "error") return "Copy failed";
-  return "Copy";
-});
-let copyResetTimer = null;
-const isCopyHovered = ref(false);
-const copyIcon = computed(() => {
-  if (copyState.value === "copied") return IconClipboardSuccess;
-  if (isCopyHovered.value && hasCopySource.value) return IconClipboardHover;
-  return IconClipboard;
-});
-const { isSupported: isFullscreenSupported, isFullscreen, toggle: toggleFullscreen } = useFullscreen(mermaidBlock, {
-  autoExit: true
-});
-const showFullscreenButton = computed(() => toolbarButtons.value.fullscreen !== false && isFullscreenSupported.value);
-const fullscreenLabel = computed(() => isFullscreen.value ? "Exit fullscreen" : "Enter fullscreen");
-const fullscreenToolbarScale = computed(() => {
-  const raw = resolvedToolbar.value.fullscreenToolbarScale ?? defaultFullscreenToolbarScale;
-  if (typeof raw === "number" && Number.isFinite(raw))
-    return raw;
-  if (typeof raw === "string") {
-    const parsed = Number.parseFloat(raw);
-    if (Number.isFinite(parsed))
-      return parsed;
-  }
-  return defaultFullscreenToolbarScale;
-});
-const toolbarFontSizePx = computed(() => {
-  return parseSizeToPx(resolvedToolbar.value.fontSize ?? defaultToolbarFontSize, 14);
-});
-const fullscreenToolbarFontSize = computed(() => {
-  const scaled = toolbarFontSizePx.value * fullscreenToolbarScale.value;
-  return `${Math.round(scaled * 100) / 100}px`;
-});
-const effectiveToolbarFontSize = computed(() => {
-  return isFullscreen.value ? fullscreenToolbarFontSize.value : toolbarFontSize.value;
-});
-const effectiveToolbarFontSizePx = computed(() => {
-  const baseSize = toolbarFontSizePx.value;
-  return isFullscreen.value ? baseSize * fullscreenToolbarScale.value : baseSize;
-});
-const pageConfig = computed(() => {
-  const value = props.config;
-  if (!value)
-    return void 0;
-  if (typeof value !== "object") {
-    if (import.meta.dev && value !== null && value !== void 0) {
-      console.warn(
-        "[nuxt-content-mermaid] Received non-object `config` prop on <Mermaid> component. This usually means your `content.config.ts` collection schema did not declare `config` as a JSON field. See README section about per-page overrides via frontmatter.",
-        value
-      );
-    }
-    return void 0;
-  }
-  return value;
-});
-const mermaidTheme = computed(() => {
-  return resolveMermaidTheme({
-    colorModeValue: colorMode?.value,
-    manualThemeMode: manualThemeMode.value,
-    frontmatterTheme: pageConfig.value?.theme,
-    baseTheme: baseMermaidInit.theme,
-    lightTheme,
-    darkTheme
-  });
-});
-const effectiveMermaidInit = computed(() => {
-  return mergeMermaidConfig({
-    baseConfig: baseMermaidInit,
-    overrideConfig: pageConfig.value,
-    theme: mermaidTheme.value
-  });
-});
 const configuredSpinnerName = computed(() => componentOptions.spinner?.trim() || "");
 const customSpinner = shallowRef(null);
 const configuredMermaidImplName = computed(() => componentOptions.renderer?.trim() || "");
-const customMermaidImpl = shallowRef(null);
-const configuredErrorName = computed(() => componentOptions.error?.trim() || "");
-const errorComponent = shallowRef(null);
+const rendererSelectionState = shallowRef(
+  configuredMermaidImplName.value ? { status: "pending" } : { status: "built-in" }
+);
 const spinnerComponent = computed(() => customSpinner.value || Spinner);
-const iconSize = computed(() => {
-  return Math.round(effectiveToolbarFontSizePx.value * 1.2);
-});
-const isExpandBlocked = computed(() => !isEnabled || !expandEnabled || isLoading.value || hasError.value || isFullscreen.value);
-const fullscreenZoom = useMermaidZoom({
-  active: isFullscreen,
-  minScale: 0.1,
-  maxScale: 10
-});
-const showFullscreenZoomHint = ref(false);
-const fullscreenHintDurationMs = 3e3;
-let fullscreenHintTimeout;
-let hasShownFullscreenZoomHint = false;
-watch(isFullscreen, (value) => {
-  if (value) {
-    hasShownFullscreenZoomHint = false;
-    nextTick(() => {
-      const el = mermaidContainer.value;
-      if (el) {
-        const rect = el.getBoundingClientRect();
-        fullscreenZoom.init({
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-          top: rect.top,
-          left: rect.left
-        });
-      }
-    });
-  } else {
-    showFullscreenZoomHint.value = false;
-    clearTimeout(fullscreenHintTimeout);
-  }
-});
-function refreshFullscreenOrigin() {
-  if (!import.meta.client || !isFullscreen.value) return;
-  const el = mermaidContainer.value;
-  if (!el) return;
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      const rect = el.getBoundingClientRect();
-      fullscreenZoom.setMetrics({
-        scale: fullscreenZoom.scale.value,
-        translateX: fullscreenZoom.translateX.value,
-        translateY: fullscreenZoom.translateY.value,
-        top: rect.top,
-        left: rect.left
-      });
-    });
-  });
-}
-function handleFullscreenWheel(event) {
-  if (!isFullscreen.value) return;
-  const handled = fullscreenZoom.handleWheel(event);
-  if (handled) {
-    if (fullscreenHintTimeout && showFullscreenZoomHint.value) {
-      showFullscreenZoomHint.value = false;
-      clearTimeout(fullscreenHintTimeout);
-    }
-    return;
-  }
-  if (!hasShownFullscreenZoomHint) {
-    hasShownFullscreenZoomHint = true;
-    showFullscreenZoomHint.value = true;
-    clearTimeout(fullscreenHintTimeout);
-    fullscreenHintTimeout = setTimeout(() => {
-      showFullscreenZoomHint.value = false;
-    }, fullscreenHintDurationMs);
-  }
-}
-function handleFullscreenKeyDown(event) {
-  if (!isFullscreen.value) return;
-  if (event.defaultPrevented) return;
-  const target = event.target;
-  if (target) {
-    const tagName = target.tagName;
-    if (target.isContentEditable || tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT")
-      return;
-  }
-  const browserZoomKeys = /* @__PURE__ */ new Set(["+", "=", "-", "_"]);
-  if (event.ctrlKey || event.metaKey) {
-    if (browserZoomKeys.has(event.key))
-      event.preventDefault();
-    return;
-  }
-  const moveStep = 20 / fullscreenZoom.scale.value;
-  const keyHandlers = {
-    "+": () => fullscreenZoom.zoomIn(),
-    "=": () => fullscreenZoom.zoomIn(),
-    "-": () => fullscreenZoom.zoomOut(),
-    "_": () => fullscreenZoom.zoomOut(),
-    "0": () => fullscreenZoom.reset(),
-    "ArrowUp": () => {
-      fullscreenZoom.translateY.value += moveStep;
-    },
-    "ArrowDown": () => {
-      fullscreenZoom.translateY.value -= moveStep;
-    },
-    "ArrowLeft": () => {
-      fullscreenZoom.translateX.value += moveStep;
-    },
-    "ArrowRight": () => {
-      fullscreenZoom.translateX.value -= moveStep;
-    }
-  };
-  const handler = keyHandlers[event.key];
-  if (handler) {
-    event.preventDefault();
-    handler();
-  }
-}
-if (import.meta.client) {
-  const fullscreenDocument = computed(() => isFullscreen.value ? document : null);
-  const fullscreenWindow = computed(() => isFullscreen.value ? window : null);
-  const fullscreenVisualViewport = computed(() => isFullscreen.value ? window.visualViewport : null);
-  useEventListener(fullscreenWindow, "wheel", handleFullscreenWheel, { passive: false });
-  useEventListener(fullscreenDocument, "keydown", handleFullscreenKeyDown);
-  useEventListener(fullscreenWindow, "focus", refreshFullscreenOrigin);
-  useEventListener(fullscreenDocument, "fullscreenchange", refreshFullscreenOrigin);
-  useEventListener(fullscreenVisualViewport, "resize", refreshFullscreenOrigin, { passive: true });
-  useEventListener(fullscreenDocument, "visibilitychange", () => {
-    if (document.visibilityState === "visible") refreshFullscreenOrigin();
-  });
-}
-const {
-  setExpandTargetWrap,
-  expandTargetStyle,
-  isExpandActive,
-  isVisible,
-  closeExpand,
-  toggleExpand,
-  handleExpandTransitionEnd,
-  handleMermaidClick,
-  resetExpand,
-  zoom,
-  showZoomHint
-} = useMermaidExpand({
-  getExpandTarget: getMermaidSvg,
-  expandMargin,
-  isBlocked: isExpandBlocked,
-  invokeOpenOn: {
-    diagramClick: allowOpenDiagramClick
-  },
-  invokeCloseOn: {
-    esc: allowEscClose,
-    wheel: allowWheelClose,
-    swipe: allowSwipeClose
-  }
-});
-const showExpandToolbarButton = computed(() => {
-  if (!expandEnabled) return false;
-  if (toolbarButtons.value.expand === false) return false;
-  if (isExpandActive.value) return false;
-  if (isFullscreen.value) return false;
-  return true;
-});
 function normalizeIdentifier(value) {
   return value.replace(/\.vue$/i, "").split(/[\\/]/).pop()?.replace(/[\s_-]+/g, "").toLowerCase() || "";
 }
-async function resolveAppComponent(name, appComponents, label) {
+async function loadAppComponent(name, appComponents) {
   const target = normalizeIdentifier(name);
   const matchEntry = Object.entries(appComponents).find(([path]) => {
     const base = path.split(/[\\/]/).pop() || "";
-    const normalized = normalizeIdentifier(base);
-    return normalized === target;
+    return normalizeIdentifier(base) === target;
   });
-  if (!matchEntry) {
-    console.warn(
-      `[nuxt-content-mermaid] Cannot find ${label} component:`,
-      name
-    );
-    return null;
-  }
+  if (!matchEntry) return null;
+  const [, componentLoader] = matchEntry;
+  const mod = await componentLoader();
+  return mod.default || mod;
+}
+async function resolveSpinnerAppComponent(name, appComponents) {
   try {
-    const [, componentLoader] = matchEntry;
-    const mod = await componentLoader();
-    return mod.default || mod;
+    const component = await loadAppComponent(name, appComponents);
+    if (!component) {
+      console.warn(
+        "[nuxt-content-mermaid] Cannot find spinner component:",
+        name
+      );
+    }
+    return component;
   } catch (error) {
     console.error(
-      `[nuxt-content-mermaid] Failed to load ${label} component:`,
+      "[nuxt-content-mermaid] Failed to load spinner component:",
       error
     );
     return null;
   }
 }
-if (import.meta.client && isEnabled) {
-  let watchCustomAppComponent = function(nameRef, targetRef, label) {
-    watch(
-      nameRef,
-      async (name) => {
-        if (!name) {
-          targetRef.value = null;
-          return;
-        }
-        targetRef.value = await resolveAppComponent(
-          name,
-          appComponents,
-          label
-        );
-      },
-      { immediate: true }
-    );
-  };
+if (import.meta.client) {
   const appComponents = import.meta.glob("~/components/**/*.{vue,js,ts}");
-  watchCustomAppComponent(configuredSpinnerName, customSpinner, "spinner");
-  watchCustomAppComponent(configuredMermaidImplName, customMermaidImpl, "mermaid");
-  watchCustomAppComponent(configuredErrorName, errorComponent, "error");
-}
-function serializeMermaidFromNode(root) {
-  const TEXT_NODE = 3;
-  const ELEMENT_NODE = 1;
-  if (root.nodeType === TEXT_NODE) {
-    return root.data;
-  }
-  if (root.nodeType === ELEMENT_NODE) {
-    const el = root;
-    const tag = el.tagName?.toUpperCase();
-    if (tag === "BR") return "\n";
-    const blockTags = [
-      "DIV",
-      "P",
-      "LI",
-      "TR",
-      "H1",
-      "H2",
-      "H3",
-      "H4",
-      "H5",
-      "H6",
-      "BLOCKQUOTE",
-      "PRE",
-      "UL",
-      "OL",
-      "DL",
-      "DT",
-      "DD",
-      "TABLE",
-      "THEAD",
-      "TBODY",
-      "TFOOT",
-      "SECTION",
-      "ARTICLE",
-      "ASIDE",
-      "HEADER",
-      "FOOTER",
-      "MAIN"
-    ];
-    const isBlock = blockTags.includes(tag) || el.classList.contains("line") || el.classList.contains("code-line");
-    let out = "";
-    el.childNodes.forEach((child) => {
-      out += serializeMermaidFromNode(child);
-    });
-    if (isBlock) return "\n" + out + "\n";
-    return out;
-  }
-  return "";
-}
-function extractMermaidDefinition(container) {
-  const codeNodes = Array.from(container.querySelectorAll("code"));
-  if (codeNodes.length > 0) {
-    return codeNodes.map((node) => serializeMermaidFromNode(node)).join("\n").trim();
-  }
-  const pre = container.querySelector("pre");
-  if (pre) return serializeMermaidFromNode(pre).trim();
-  return serializeMermaidFromNode(container).trim();
-}
-function getMermaidSvg() {
-  if (!mermaidContainer.value) return null;
-  const svg = mermaidContainer.value.querySelector("svg");
-  return svg instanceof SVGSVGElement ? svg : null;
-}
-async function renderMermaid() {
-  if (!mermaidContainer.value || !mermaidDefinition.value) return;
-  isLoading.value = true;
-  const performRender = async () => {
-    if (!mermaidContainer.value) return;
-    if (import.meta.client && isExpandActive.value) {
-      resetExpand();
-    }
-    hasError.value = false;
-    errorContent.value = null;
-    const startTime = performance.now();
-    try {
-      const mermaid = await $mermaid();
-      mermaid.initialize(effectiveMermaidInit.value);
-      mermaidContainer.value.removeAttribute("data-processed");
-      mermaidContainer.value.textContent = mermaidDefinition.value;
-      await nextTick();
-      await mermaid.run({
-        nodes: [mermaidContainer.value],
-        suppressErrors: !debug
-      });
-      hasRenderedOnce.value = true;
-      const svg = getMermaidSvg();
-      if (svg) ensureViewBox(svg);
-      if (debug) {
-        const endTime = performance.now();
-        console.log(`[nuxt-content-mermaid] \u23F1\uFE0F  Rendered in ${(endTime - startTime).toFixed(2)}ms`);
+  watch(
+    configuredSpinnerName,
+    async (name) => {
+      if (!name) {
+        customSpinner.value = null;
+        return;
       }
-    } catch (error) {
-      console.error("[nuxt-content-mermaid]", error);
-      hasError.value = true;
-      errorContent.value = error;
-      if (mermaidContainer.value)
-        mermaidContainer.value.innerHTML = "";
-    } finally {
-      isLoading.value = false;
-    }
-  };
-  await enqueueRender(performRender, debug);
-}
-function setupMermaidContainer() {
-  const container = mermaidContainer.value;
-  if (!container) return;
-  if (!isLazy) {
-    renderMermaid();
-    return;
-  }
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0]?.isIntersecting && !hasRenderedOnce.value) {
-        renderMermaid();
-        if (observer) observer.disconnect();
+      customSpinner.value = await resolveSpinnerAppComponent(name, appComponents);
+    },
+    { immediate: true }
+  );
+  const beginRendererSelectionAttempt = createRendererSelectionAttemptCoordinator();
+  watch(
+    configuredMermaidImplName,
+    async (name) => {
+      const commitRendererSelectionAttempt = beginRendererSelectionAttempt();
+      const outcome = selectRenderer(name, {
+        loadComponent: (candidate) => loadAppComponent(candidate, appComponents)
+      });
+      if (outcome.status === "no-candidate") {
+        rendererSelectionState.value = { status: "built-in" };
+        return;
       }
+      rendererSelectionState.value = { status: "pending" };
+      const commitResolutionFailure = createRendererResolutionFailureHandoff({
+        reportDiagnostic: (diagnostic) => {
+          const failureContext = diagnostic.reason === "load-failed" ? [diagnostic.error] : [];
+          console.warn(
+            MERMAID_LOG_PREFIX,
+            `Custom Renderer Candidate "${diagnostic.candidate}" resolution failed (${diagnostic.reason}).`,
+            diagnostic,
+            ...failureContext
+          );
+        },
+        commitBuiltInOwnership: () => {
+          rendererSelectionState.value = { status: "built-in" };
+        }
+      });
+      const resolvedOutcome = await outcome.resolution;
+      commitRendererSelectionAttempt(resolvedOutcome, {
+        commitCustomOwnership: (component) => {
+          rendererSelectionState.value = {
+            status: "custom",
+            component
+          };
+        },
+        commitResolutionFailure
+      });
     },
-    { threshold: lazyThreshold }
+    { immediate: true }
   );
-  observer.observe(container);
 }
-async function copyMermaidSource() {
-  if (!copySource.value) return;
-  const copied = await copyToClipboard(copySource.value);
-  copyState.value = copied ? "copied" : "error";
-  if (copyResetTimer)
-    clearTimeout(copyResetTimer);
-  copyResetTimer = setTimeout(() => {
-    copyState.value = "idle";
-  }, 2e3);
-}
-async function copyToClipboard(text) {
-  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    try {
-      await navigator.clipboard.writeText(text);
-      return true;
-    } catch {
-    }
-  }
-  if (typeof document === "undefined")
-    return false;
-  const textarea = document.createElement("textarea");
-  textarea.value = text;
-  textarea.setAttribute("readonly", "");
-  textarea.style.position = "fixed";
-  textarea.style.top = "-9999px";
-  textarea.style.opacity = "0";
-  document.body.appendChild(textarea);
-  textarea.select();
-  let copied = false;
-  try {
-    copied = document.execCommand("copy");
-  } catch {
-    copied = false;
-  } finally {
-    document.body.removeChild(textarea);
-  }
-  return copied;
-}
-onMounted(() => {
-  if (!isEnabled) return;
-  if (!mermaidDefinition.value && mermaidContainer.value)
-    mermaidDefinition.value = extractMermaidDefinition(mermaidContainer.value);
-  nextTick(() => setupMermaidContainer());
-});
-onUnmounted(() => {
-  if (observer) observer.disconnect();
-  if (copyResetTimer) clearTimeout(copyResetTimer);
-});
-watch(mermaidTheme, () => {
-  if (!isEnabled) return;
-  if (hasRenderedOnce.value) renderMermaid();
-});
 watch(
-  pageConfig,
+  () => collectMermaidComponentSourceDependencies({
+    pageConfig: props.pageConfig,
+    config: props.config
+  }),
   () => {
-    if (!isEnabled) return;
-    if (hasRenderedOnce.value) renderMermaid();
+    const wasConflict = componentSource.value.kind === "conflict";
+    const source = resolveCurrentComponentSource();
+    componentSource.value = source;
+    if (source.kind === "conflict" && !wasConflict)
+      throw source.error;
   },
-  { deep: true }
+  { flush: "post" }
 );
-watch(decodedCode, (newCode) => {
-  if (!isEnabled) return;
-  mermaidDefinition.value = newCode;
-  if (hasRenderedOnce.value) renderMermaid();
-});
-function ensureViewBox(svg) {
-  if (svg.hasAttribute("viewBox"))
-    return;
-  try {
-    const bbox = svg.getBBox();
-    if (bbox.width > 0 && bbox.height > 0)
-      svg.setAttribute("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
-  } catch {
-  }
-}
-const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
 </script>
 
 <template>
   <div class="mermaid-outer-wrapper">
-    <div
-      v-if="!isEnabled"
-      class="mermaid-wrapper"
-    >
-      <div
-        ref="mermaidContainer"
-        class="mermaid"
-      >
-        <slot />
-      </div>
-    </div>
-
     <component
-      :is="customMermaidImpl"
-      v-else-if="customMermaidImpl"
+      :is="rendererSelectionState?.component"
+      v-if="rendererSelectionState?.status === 'custom'"
       :spinner="spinnerComponent"
       :code="decodedCode"
     >
@@ -625,174 +155,37 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
       </slot>
     </component>
 
-    <div
+    <template v-else-if="rendererSelectionState?.status === 'pending'">
+      <slot>
+        <pre v-if="decodedCode"><code>{{ decodedCode }}</code></pre>
+      </slot>
+    </template>
+
+    <BuiltInRenderer
       v-else
-      ref="mermaidBlock"
-      class="mermaid-block"
-      :style="{ '--ncm-icon-size': `${iconSize}px` }"
+      v-bind="props"
+      :component-source="componentSource"
+      :spinner-component="spinnerComponent"
     >
-      <!-- Toolbar: Title and Actions -->
-      <div class="mermaid-toolbar">
-        <div
-          class="mermaid-title"
-          :style="{ fontSize: effectiveToolbarFontSize }"
-        >
-          <span v-if="toolbarTitle">{{ toolbarTitle }}</span>
-        </div>
-        <div class="mermaid-actions">
-          <button
-            v-if="showCopyButton"
-            type="button"
-            class="mermaid-btn"
-            :title="copyLabel"
-            :aria-label="copyLabel"
-            :disabled="!hasCopySource"
-            @click="copyMermaidSource"
-            @mouseenter="isCopyHovered = true"
-            @mouseleave="isCopyHovered = false"
-          >
-            <component
-              :is="copyIcon"
-              :size="iconSize"
-            />
-          </button>
-          <button
-            v-if="showExpandToolbarButton"
-            type="button"
-            class="mermaid-btn"
-            :title="isExpandActive ? 'Collapse' : 'Expand'"
-            :aria-label="isExpandActive ? 'Collapse diagram' : 'Expand diagram'"
-            @click="toggleExpand"
-          >
-            <IconExpand
-              v-if="!isExpandActive"
-              :size="iconSize"
-            />
-            <IconCollapse
-              v-else
-              :size="iconSize"
-            />
-          </button>
-          <button
-            v-if="showFullscreenButton"
-            type="button"
-            class="mermaid-btn"
-            :title="fullscreenLabel"
-            :aria-label="fullscreenLabel"
-            @click="toggleFullscreen"
-          >
-            <IconFullScreen
-              v-if="!isFullscreen"
-              :size="iconSize"
-            />
-            <IconFullScreenExit
-              v-else
-              :size="iconSize"
-            />
-          </button>
-        </div>
-      </div>
-
-      <MermaidZoomToolbar
-        v-if="isFullscreen"
-        variant="fullscreen"
-        :scale="fullscreenZoom.scale.value"
-        :icon-size="iconSize"
-        @zoom-out="fullscreenZoom.zoomOut()"
-        @zoom-in="fullscreenZoom.zoomIn()"
-        @reset="fullscreenZoom.reset()"
-      />
-
-      <!-- Fullscreen Zoom Hint -->
-      <Transition name="ncm-hint-fade">
-        <div
-          v-if="showFullscreenZoomHint && isFullscreen"
-          class="ncm-fullscreen-zoom-hint"
-        >
-          {{ isMac ? "\u2318" : "Ctrl" }} + Scroll to zoom
-        </div>
-      </Transition>
-
-      <!-- Diagram Container -->
-      <div
-        class="mermaid-wrapper"
-        :class="{
-  'ncm-is-loading': isLoading && !hasRenderedOnce,
-  'ncm-expand-hidden': isExpandActive,
-  'ncm-expand-clickable': expandEnabled && allowOpenDiagramClick && !isFullscreen,
-  'ncm-fullscreen-zoom': isFullscreen
-}"
-        :style="cursorVariables"
-        @click="handleMermaidClick"
-        @mousedown="isFullscreen && fullscreenZoom.handleDragStart($event)"
-        @mousemove="isFullscreen && fullscreenZoom.handleDragMove($event)"
-        @touchstart="isFullscreen && fullscreenZoom.handleDragStart($event)"
-        @touchmove="isFullscreen && fullscreenZoom.handleDragMove($event)"
-        @touchend="isFullscreen && fullscreenZoom.handleDragEnd()"
+      <slot>
+        <pre v-if="decodedCode"><code>{{ decodedCode }}</code></pre>
+      </slot>
+      <template
+        v-if="$slots.loading"
+        #loading
       >
-        <div
-          ref="mermaidContainer"
-          class="mermaid"
-          :style="isFullscreen ? {
-  transform: fullscreenZoom.transformStyle.value.transform,
-  transformOrigin: '0 0',
-  cursor: fullscreenZoom.cursor.value
-} : void 0"
-        >
-          <!-- Initially show the slot's <pre><code> for SSR; client-side rendering will replace it with the mermaid SVG -->
-          <slot>
-            <pre v-if="decodedCode"><code>{{ decodedCode }}</code></pre>
-          </slot>
-        </div>
-
-        <template v-if="isLoading && !hasRenderedOnce">
-          <slot name="loading">
-            <component :is="spinnerComponent" />
-          </slot>
-        </template>
-        <template v-else-if="hasError">
-          <slot
-            name="error"
-            :error="errorContent"
-            :source="mermaidDefinition"
-          >
-            <component
-              :is="errorComponent"
-              v-if="errorComponent"
-              :error="errorContent"
-              :source="mermaidDefinition"
-            />
-
-            <div
-              v-else
-              class="mermaid-error-default"
-            >
-              ⚠️ Mermaid Diagram Error
-            </div>
-          </slot>
-        </template>
-      </div>
-
-      <MermaidExpandOverlay
-        :active="isExpandActive"
-        :is-visable="isVisible"
-        :overlay-style="cursorVariables"
-        :content-style="cursorVariables"
-        :target-style="expandTargetStyle"
-        :target-ref="setExpandTargetWrap"
-        :allow-overlay-close="allowOverlayClose"
-        :allow-close-button="allowCloseButtonClose"
-        :target-has-margin="expandMargin > 0"
-        :icon-size="iconSize"
-        :zoom="zoom"
-        :show-hint="showZoomHint"
-        @close="closeExpand"
-        @transitionend="handleExpandTransitionEnd"
-      />
-    </div>
+        <slot name="loading" />
+      </template>
+      <template
+        v-if="$slots.error"
+        #error="{ error, source }"
+      >
+        <slot
+          name="error"
+          :error="error"
+          :source="source"
+        />
+      </template>
+    </BuiltInRenderer>
   </div>
 </template>
-
-<style scoped>
-.mermaid-block{border:var(--ncm-border);border-radius:4px;flex-direction:column;margin:1rem 0;overflow:hidden;--ncm-toolbar-height:calc(var(--ncm-icon-size, 17px) + 20px)}.mermaid-block,.mermaid-toolbar{background-color:var(--ncm-code-bg);display:flex}.mermaid-toolbar{align-items:center;border-bottom:var(--ncm-border-bottom);border-top-left-radius:4px;border-top-right-radius:4px;justify-content:space-between;padding:.375rem .375rem .375rem .75rem;z-index:20}.mermaid-title{color:var(--ncm-text-muted);font-weight:500;letter-spacing:0;line-height:1.25;max-width:80%;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}:fullscreen .mermaid-title{max-width:80%}.mermaid-actions{display:flex;gap:0;justify-self:flex-end}.mermaid-btn{align-items:center;background:var(--ncm-code-bg);border:none;border-radius:4px;color:var(--ncm-text-xmuted);cursor:pointer;display:flex;justify-content:center;line-height:1.25;padding:4px;transition:color .2s,background-color .2s}.mermaid-btn:hover{background-color:var(--ncm-code-bg-hover);color:var(--ncm-text)}.mermaid-btn:disabled{color:var(--ncm-text-xmuted);cursor:not-allowed;opacity:.6}.mermaid-wrapper{align-items:center;display:flex;justify-content:center;overflow:auto;padding:1rem;position:relative;--sb-thumb:rgba(0,0,0,.2);--sb-thumb-hover:rgba(0,0,0,.35)}.mermaid-wrapper>div{height:100%;width:100%}.mermaid-wrapper>div>:deep(svg){margin:0 auto}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}.mermaid:not([data-processed]){color:transparent;min-height:100px}:fullscreen .mermaid-wrapper{flex:1;overflow:hidden;touch-action:none}:fullscreen .mermaid-wrapper::-webkit-scrollbar{display:none}:fullscreen .mermaid-wrapper :deep(svg){height:100%!important;max-height:none!important;max-width:none!important;width:100%!important}:global(.dark .mermaid-wrapper){--sb-thumb:hsla(0,0%,100%,.2);--sb-thumb-hover:hsla(0,0%,100%,.35)}.mermaid-wrapper::-webkit-scrollbar{width:14px}.mermaid-wrapper::-webkit-scrollbar-track{background:hsla(0,0%,94%,.08)}:global(.dark .mermaid-wrapper::-webkit-scrollbar-track){background:hsla(0,0%,9%,.08)}.mermaid-wrapper::-webkit-scrollbar-corner{background:transparent}.mermaid-wrapper::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--sb-thumb);border:3px solid transparent;border-radius:10px}.mermaid-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}.mermaid-wrapper.ncm-is-loading{align-items:center;display:flex;justify-content:center;min-height:150px}.mermaid-wrapper.ncm-expand-hidden{opacity:0;pointer-events:none}.mermaid-wrapper.ncm-expand-clickable :deep(svg){cursor:var(--ncm-cursor-expand)}.ncm-fullscreen-zoom-hint{display:none}:fullscreen .ncm-fullscreen-zoom-hint{background-color:var(--ncm-hint-bg,rgba(0,0,0,.75));border-radius:var(--ncm-hint-radius,8px);color:var(--ncm-hint-text,#fff);display:block;font-size:20px;font-weight:500;left:50%;padding:12px 24px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;z-index:20}.ncm-hint-fade-enter-active,.ncm-hint-fade-leave-active{transition:opacity .2s ease}.ncm-hint-fade-enter-from,.ncm-hint-fade-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.ncm-hint-fade-enter-active,.ncm-hint-fade-leave-active{transition-duration:.01ms!important}}.mermaid-error-default{color:#f55;font-family:monospace;padding:1rem;white-space:pre-wrap}
-</style>