@barzhsieh/nuxt-content-mermaid 2.2.2 → 3.0.0

package/dist/runtime/built-in-renderer/BuiltInRenderer.vue

@@ -0,0 +1,597 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  computed,
+  watch,
+  shallowRef,
+  useTemplateRef
+} from "vue";
+import { defu } from "defu";
+import { materializeMermaidConfigForInvocation, resolveMermaidTheme } from "../mermaid-config";
+import { createMermaidRenderer } from "../mermaid-rendering";
+import { getRuntimeMermaidSnapshot } from "../runtime-snapshot";
+import { parseSizeToPx, isRecord } from "../utils";
+import { useMermaidTheme } from "../composables/useMermaidTheme";
+import { useMermaidCursors } from "../composables/useMermaidCursors";
+import IconClipboard from "../components/icons/IconClipboard.vue";
+import IconClipboardHover from "../components/icons/IconClipboardHover.vue";
+import IconClipboardSuccess from "../components/icons/IconClipboardSuccess.vue";
+import IconFullScreen from "../components/icons/iconFullScreen.vue";
+import IconFullScreenExit from "../components/icons/iconFullScreenExit.vue";
+import MermaidExpandOverlay from "../components/MermaidExpandOverlay.vue";
+import IconExpand from "../components/icons/IconExpand.vue";
+import IconCollapse from "../components/icons/IconCollapse.vue";
+import MermaidFullscreenPresentation from "../components/MermaidFullscreenPresentation.vue";
+const props = defineProps({
+  toolbar: { type: Object, required: false },
+  code: { type: String, required: false },
+  pageConfig: { type: null, required: false },
+  config: { type: null, required: false },
+  componentSource: { type: Object, required: true },
+  spinnerComponent: { type: null, required: true }
+});
+const componentSource = computed(() => props.componentSource);
+const nuxtApp = useNuxtApp();
+const contentMermaidOptions = getRuntimeMermaidSnapshot(nuxtApp);
+const isEnabled = true;
+const debug = contentMermaidOptions.debug || false;
+const loaderOptions = contentMermaidOptions.loader || {};
+const themeOptions = contentMermaidOptions.theme || {};
+const componentOptions = contentMermaidOptions.components || {};
+const expandOptions = contentMermaidOptions.expand;
+const expandEnabled = expandOptions.enabled !== false;
+const expandOpenOptions = expandOptions.invokeOpenOn || {};
+const allowOpenDiagramClick = expandOpenOptions.diagramClick !== 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 mermaidWrapper = useTemplateRef("mermaidWrapper");
+const mermaidContainer = useTemplateRef("mermaidContainer");
+const fullscreenPresentation = useTemplateRef("fullscreenPresentation");
+const isFullscreenSupported = ref(false);
+const isFullscreen = ref(false);
+const handleFullscreenSupportedChange = (supported) => {
+  isFullscreenSupported.value = supported;
+};
+const handleFullscreenActiveChange = (active) => {
+  isFullscreen.value = active;
+};
+const toggleFullscreen = () => {
+  expandOverlay.value?.endForDiagramReplacement();
+  return fullscreenPresentation.value?.toggle();
+};
+const hasRenderStarted = ref(false);
+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 runtimeToolbarDefaults = contentMermaidOptions.toolbar;
+const defaultToolbarTitle = runtimeToolbarDefaults?.title ?? "mermaid";
+const defaultToolbarFontSize = runtimeToolbarDefaults?.fontSize ?? "14px";
+const defaultFullscreenToolbarScale = runtimeToolbarDefaults?.fullscreenToolbarScale ?? 1.25;
+const resolvedToolbar = computed(() => {
+  return defu({}, props.toolbar ?? {}, runtimeToolbarDefaults ?? {});
+});
+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 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 diagramSourceConfig = computed(() => {
+  const source = componentSource.value;
+  return source.kind === "runtime-only" || source.kind === "conflict" ? void 0 : source.config;
+});
+const mermaidTheme = computed(() => {
+  return resolveMermaidTheme({
+    colorModeValue: colorMode?.value,
+    manualThemeMode: manualThemeMode.value,
+    frontmatterTheme: diagramSourceConfig.value?.theme,
+    baseTheme: baseMermaidInit.theme,
+    lightTheme,
+    darkTheme
+  });
+});
+function materializeEffectiveMermaidInit() {
+  const source = componentSource.value;
+  if (source.kind === "conflict") throw source.error;
+  return materializeMermaidConfigForInvocation({
+    runtimeConfig: baseMermaidInit,
+    source,
+    theme: mermaidTheme.value
+  });
+}
+const configuredErrorName = computed(() => componentOptions.error?.trim() || "");
+const errorComponent = shallowRef(null);
+const spinnerComponent = computed(() => props.spinnerComponent);
+const iconSize = computed(() => {
+  return Math.round(effectiveToolbarFontSizePx.value * 1.2);
+});
+const isExpandBlocked = computed(() => !isEnabled || !expandEnabled || isLoading.value || hasError.value || isFullscreen.value);
+const expandOverlay = useTemplateRef("expandOverlay");
+const isExpandActive = ref(false);
+const handleExpandActiveChange = (active) => {
+  isExpandActive.value = active;
+};
+const toggleExpand = (event) => expandOverlay.value?.toggle(event);
+const handleMermaidClick = (event) => expandOverlay.value?.openFromDiagram(event);
+let requestBuiltInRender;
+function getBuiltInRenderRequest() {
+  requestBuiltInRender ??= createMermaidRenderer({
+    loadMermaid: $mermaid,
+    readRenderData: () => {
+      if (componentSource.value.kind === "conflict") {
+        return {
+          source: null,
+          config: {},
+          target: mermaidContainer.value
+        };
+      }
+      return {
+        source: mermaidDefinition.value,
+        config: materializeEffectiveMermaidInit(),
+        target: mermaidContainer.value
+      };
+    },
+    beforeCommit: () => {
+      if (import.meta.client) {
+        expandOverlay.value?.endForDiagramReplacement();
+        void fullscreenPresentation.value?.endForDiagramReplacement();
+      }
+      hasError.value = false;
+      errorContent.value = null;
+    },
+    debug
+  });
+  return requestBuiltInRender;
+}
+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 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;
+  });
+  if (!matchEntry) return null;
+  const [, componentLoader] = matchEntry;
+  const mod = await componentLoader();
+  return mod.default || mod;
+}
+async function resolveErrorAppComponent(name, appComponents) {
+  try {
+    const component = await loadAppComponent(name, appComponents);
+    if (!component) {
+      console.warn(
+        "[nuxt-content-mermaid] Cannot find error component:",
+        name
+      );
+    }
+    return component;
+  } catch (error) {
+    console.error(
+      "[nuxt-content-mermaid] Failed to load error component:",
+      error
+    );
+    return null;
+  }
+}
+if (import.meta.client && isEnabled) {
+  const appComponents = import.meta.glob("~/components/**/*.{vue,js,ts}");
+  watch(
+    configuredErrorName,
+    async (name) => {
+      if (!name) {
+        errorComponent.value = null;
+        return;
+      }
+      errorComponent.value = await resolveErrorAppComponent(name, appComponents);
+    },
+    { immediate: true }
+  );
+}
+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;
+}
+function getMermaidViewport() {
+  return mermaidWrapper.value;
+}
+function stopLazyObservation() {
+  const activeObserver = observer;
+  observer = null;
+  activeObserver?.takeRecords();
+  activeObserver?.disconnect();
+}
+async function renderMermaid() {
+  if (componentSource.value.kind === "conflict") return;
+  const request = getBuiltInRenderRequest();
+  hasRenderStarted.value = true;
+  stopLazyObservation();
+  isLoading.value = true;
+  const outcome = await request();
+  if (outcome.status === "stale")
+    return;
+  if (outcome.status === "success") {
+    hasRenderedOnce.value = true;
+  } else if (outcome.status === "failure") {
+    console.error("[nuxt-content-mermaid]", outcome.error);
+    hasError.value = true;
+    errorContent.value = outcome.error;
+  }
+  isLoading.value = false;
+}
+function setupMermaidContainer() {
+  const container = mermaidContainer.value;
+  if (!container) return;
+  if (!isLazy) {
+    renderMermaid();
+    return;
+  }
+  const nextObserver = new IntersectionObserver(
+    (entries) => {
+      if (observer !== nextObserver) return;
+      if (entries[0]?.isIntersecting && !hasRenderedOnce.value)
+        renderMermaid();
+    },
+    { threshold: lazyThreshold }
+  );
+  observer = nextObserver;
+  nextObserver.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(() => {
+  requestBuiltInRender?.invalidate();
+  stopLazyObservation();
+  if (copyResetTimer) clearTimeout(copyResetTimer);
+});
+watch(
+  () => ({
+    componentSource: componentSource.value,
+    code: decodedCode.value,
+    colorMode: colorMode?.value,
+    manualThemeMode: manualThemeMode.value
+  }),
+  ({ code, componentSource: source }, previousInputs) => {
+    if (code !== previousInputs.code)
+      mermaidDefinition.value = code;
+    const wasConflict = previousInputs.componentSource.kind === "conflict";
+    if (source.kind === "conflict") {
+      if (wasConflict) return;
+      requestBuiltInRender?.invalidate();
+      isLoading.value = false;
+      return;
+    }
+    if (!isEnabled) return;
+    if (wasConflict || hasRenderStarted.value) renderMermaid();
+  },
+  { flush: "post" }
+);
+const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
+</script>
+
+<template>
+  <div
+    ref="mermaidBlock"
+    class="mermaid-block"
+    :style="{ '--ncm-icon-size': `${iconSize}px` }"
+  >
+    <!-- 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>
+
+    <MermaidFullscreenPresentation
+      ref="fullscreenPresentation"
+      :fullscreen-target="mermaidBlock"
+      :viewport-target="mermaidWrapper"
+      :render-target="mermaidContainer"
+      :icon-size="iconSize"
+      @active-change="handleFullscreenActiveChange"
+      @supported-change="handleFullscreenSupportedChange"
+    />
+
+    <!-- Diagram Container -->
+    <div
+      ref="mermaidWrapper"
+      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"
+    >
+      <div
+        ref="mermaidContainer"
+        class="mermaid"
+      >
+        <!-- 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
+      ref="expandOverlay"
+      :options="expandOptions"
+      :blocked="isExpandBlocked"
+      :get-expand-target="getMermaidSvg"
+      :get-expand-viewport="getMermaidViewport"
+      :overlay-style="cursorVariables"
+      :content-style="cursorVariables"
+      :icon-size="iconSize"
+      @active-change="handleExpandActiveChange"
+    />
+  </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)}.mermaid-error-default{color:#f55;font-family:monospace;padding:1rem;white-space:pre-wrap}
+</style>

package/dist/runtime/component-configuration-error.d.ts

@@ -0,0 +1,3 @@
+export declare function createMermaidComponentConfigurationError(message: string): Error & {
+    readonly code: string;
+};

package/dist/runtime/component-configuration-error.js

@@ -0,0 +1,7 @@
+class MermaidComponentConfigurationError extends Error {
+  code = "CONTENT_MERMAID_COMPONENT_CONFIGURATION_ERROR";
+  name = "MermaidComponentConfigurationError";
+}
+export function createMermaidComponentConfigurationError(message) {
+  return new MermaidComponentConfigurationError(message);
+}

package/dist/runtime/component-configuration.d.ts

@@ -0,0 +1,23 @@
+import type { MermaidConfig } from 'mermaid';
+import type { PageMermaidConfig } from '../types/config.js';
+interface MermaidComponentSourceInput {
+    readonly pageConfig?: unknown;
+    readonly config?: unknown;
+}
+export type MermaidComponentSource = {
+    readonly kind: 'runtime-only';
+} | {
+    readonly kind: 'page';
+    readonly config: PageMermaidConfig;
+} | {
+    readonly kind: 'direct';
+    readonly config: MermaidConfig;
+} | {
+    readonly kind: 'conflict';
+    readonly error: Error & {
+        readonly code: string;
+    };
+};
+export declare function resolveMermaidComponentSource(input: MermaidComponentSourceInput): MermaidComponentSource;
+export declare function collectMermaidComponentSourceDependencies(input: MermaidComponentSourceInput): readonly unknown[];
+export {};