@barzhsieh/nuxt-content-mermaid 2.1.2 → 2.2.0

package/dist/runtime/components/Mermaid.vue

@@ -10,12 +10,30 @@ import {
   shallowRef,
   useTemplateRef
 } from "vue";
+import { defu } from "defu";
 import { mergeMermaidConfig, resolveMermaidTheme } from "../mermaid-config";
-import { enqueueRender } from "../utils";
+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";
 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 }
 });
 const nuxtApp = useNuxtApp();
@@ -26,6 +44,24 @@ const debug = contentMermaidOptions.debug || false;
 const loaderOptions = contentMermaidOptions.loader || {};
 const themeOptions = contentMermaidOptions.theme || {};
 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;
@@ -35,6 +71,7 @@ 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);
@@ -43,7 +80,81 @@ const errorContent = shallowRef(null);
 const decodedCode = computed(() => props.code ? decodeURIComponent(props.code) : "");
 const mermaidDefinition = ref(decodedCode.value);
 let observer = null;
-const frontmatterConfig = computed(() => {
+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;
@@ -62,7 +173,7 @@ const mermaidTheme = computed(() => {
   return resolveMermaidTheme({
     colorModeValue: colorMode?.value,
     manualThemeMode: manualThemeMode.value,
-    frontmatterTheme: frontmatterConfig.value?.theme,
+    frontmatterTheme: pageConfig.value?.theme,
     baseTheme: baseMermaidInit.theme,
     lightTheme,
     darkTheme
@@ -71,7 +182,7 @@ const mermaidTheme = computed(() => {
 const effectiveMermaidInit = computed(() => {
   return mergeMermaidConfig({
     baseConfig: baseMermaidInit,
-    overrideConfig: frontmatterConfig.value,
+    overrideConfig: pageConfig.value,
     theme: mermaidTheme.value
   });
 });
@@ -82,6 +193,162 @@ const customMermaidImpl = shallowRef(null);
 const configuredErrorName = computed(() => componentOptions.error?.trim() || "");
 const errorComponent = shallowRef(null);
 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() || "";
 }
@@ -192,11 +459,19 @@ function extractMermaidDefinition(container) {
   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();
@@ -211,6 +486,8 @@ async function renderMermaid() {
         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`);
@@ -245,6 +522,44 @@ function setupMermaidContainer() {
   );
   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)
@@ -253,13 +568,14 @@ onMounted(() => {
 });
 onUnmounted(() => {
   if (observer) observer.disconnect();
+  if (copyResetTimer) clearTimeout(copyResetTimer);
 });
 watch(mermaidTheme, () => {
   if (!isEnabled) return;
   if (hasRenderedOnce.value) renderMermaid();
 });
 watch(
-  frontmatterConfig,
+  pageConfig,
   () => {
     if (!isEnabled) return;
     if (hasRenderedOnce.value) renderMermaid();
@@ -271,6 +587,17 @@ watch(decodedCode, (newCode) => {
   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>
@@ -279,7 +606,10 @@ watch(decodedCode, (newCode) => {
       v-if="!isEnabled"
       class="mermaid-wrapper"
     >
-      <div ref="mermaidContainer">
+      <div
+        ref="mermaidContainer"
+        class="mermaid"
+      >
         <slot />
       </div>
     </div>
@@ -297,46 +627,172 @@ watch(decodedCode, (newCode) => {
 
     <div
       v-else
-      class="mermaid-wrapper"
-      :class="{ 'ncm-is-loading': isLoading && !hasRenderedOnce }"
+      ref="mermaidBlock"
+      class="mermaid-block"
+      :style="{ '--ncm-icon-size': `${iconSize}px` }"
     >
-      <div ref="mermaidContainer">
-        <!-- 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>
+      <!-- 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>
 
-      <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"
+      <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"
         >
-          <component
-            :is="errorComponent"
-            v-if="errorComponent"
+          {{ 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()"
+      >
+        <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"
-          />
-
-          <div
-            v-else
-            class="mermaid-error-default"
           >
-            ⚠️ Mermaid Diagram Error
-          </div>
-        </slot>
-      </template>
+            <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>
   </div>
 </template>
 
 <style scoped>
-.mermaid-wrapper{--ncm-loading-min-height:160px;position:relative;text-align:center}.mermaid-wrapper.ncm-is-loading{min-height:var(--ncm-loading-min-height,160px)}.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-wrapper :deep(svg){display:inline-block;vertical-align:middle}.mermaid-error-default{text-align:center}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid-wrapper :deep(.edgeLabel),.mermaid-wrapper :deep(.label),.mermaid-wrapper :deep(.nodeLabel){overflow:visible!important;white-space:normal!important}.mermaid-wrapper :deep(foreignObject){overflow:visible!important}
+.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>

package/dist/runtime/components/Mermaid.vue.d.ts

@@ -1,9 +1,11 @@
 import type { MermaidConfig } from 'mermaid';
+import type { MermaidToolbarOptions } from '~/src/types/mermaid';
 type __VLS_Props = {
     config?: MermaidConfig | string | unknown;
+    toolbar?: MermaidToolbarOptions;
     code?: string;
 };
-declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_21: {
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_52: {}, __VLS_54: {}, __VLS_62: {
     error: unknown;
     source: string;
 };
@@ -12,11 +14,11 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_52) => any;
 } & {
-    loading?: (props: typeof __VLS_13) => any;
+    loading?: (props: typeof __VLS_54) => any;
 } & {
-    error?: (props: typeof __VLS_21) => any;
+    error?: (props: typeof __VLS_62) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;