@barzhsieh/nuxt-content-mermaid 2.2.2 → 3.0.0

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

@@ -1,31 +0,0 @@
-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_51: {}, __VLS_53: {}, __VLS_60: {
-    error: unknown;
-    source: string;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_9) => any;
-} & {
-    default?: (props: typeof __VLS_51) => any;
-} & {
-    loading?: (props: typeof __VLS_53) => any;
-} & {
-    error?: (props: typeof __VLS_60) => 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>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,25 +1,22 @@
-import type { CSSProperties, ComponentPublicInstance } from 'vue';
-import type { MermaidZoomReturn } from '../composables/useMermaidZoom.js';
+import type { CSSProperties } from 'vue';
+import type { ExpandOptions } from '../types/expand.js';
 type __VLS_Props = {
-    active: boolean;
-    isVisable: boolean;
+    options: ExpandOptions;
+    blocked: boolean;
+    getExpandTarget: () => SVGElement | null;
+    getExpandViewport: () => HTMLElement | null;
     overlayStyle?: CSSProperties;
     contentStyle?: CSSProperties;
-    targetStyle?: CSSProperties;
-    targetRef: (el: Element | ComponentPublicInstance | null) => void;
-    allowOverlayClose: boolean;
-    allowCloseButton: boolean;
-    targetHasMargin: boolean;
     iconSize?: number;
-    zoom?: MermaidZoomReturn;
-    showHint?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: (event?: Event | undefined) => any;
-    transitionend: (event: TransitionEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    toggle: (event?: Event) => void;
+    openFromDiagram: (event: MouseEvent) => void;
+    endForDiagramReplacement: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "active-change": (active: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((event?: Event | undefined) => any) | undefined;
-    onTransitionend?: ((event: TransitionEvent) => any) | undefined;
+    "onActive-change"?: ((active: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/MermaidExpandOverlay.vue

@@ -1,62 +1,67 @@
 <script setup>
+import { computed, watch } from "vue";
+import { useMermaidExpand } from "../composables/useMermaidExpand";
 import MermaidZoomToolbar from "./MermaidZoomToolbar.vue";
 const props = defineProps({
-  active: { type: Boolean, required: true },
-  isVisable: { type: Boolean, required: true },
+  options: { type: Object, required: true },
+  blocked: { type: Boolean, required: true },
+  getExpandTarget: { type: Function, required: true },
+  getExpandViewport: { type: Function, required: true },
   overlayStyle: { type: Object, required: false },
   contentStyle: { type: Object, required: false },
-  targetStyle: { type: Object, required: false },
-  targetRef: { type: Function, required: true },
-  allowOverlayClose: { type: Boolean, required: true },
-  allowCloseButton: { type: Boolean, required: true },
-  targetHasMargin: { type: Boolean, required: true },
-  iconSize: { type: Number, required: false },
-  zoom: { type: null, required: false },
-  showHint: { type: Boolean, required: false }
+  iconSize: { type: Number, required: false }
 });
 const isMac = import.meta.client ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) : false;
-const emit = defineEmits(["close", "transitionend"]);
-const handleButtonClick = (event) => {
-  if (!props.allowCloseButton) return;
-  emit("close", event);
-};
-const handleModalClick = (event) => {
-  if (props.zoom?.isSpacePressed.value) return;
-  if (props.zoom?.wasLastInteractionDrag.value) {
-    event.stopPropagation();
-    return;
-  }
-  const target = event.target;
-  if (target.classList.contains("ncm-expand-overlay") || target.classList.contains("ncm-expand-modal")) {
-    if (props.allowOverlayClose) {
-      emit("close", event);
-    }
-  }
-};
+const emit = defineEmits(["active-change"]);
+const blocked = computed(() => props.blocked);
+const allowCloseButton = computed(() => props.options.invokeCloseOn?.closeButtonClick !== false);
+const targetHasMargin = computed(() => typeof props.options.margin === "number" && props.options.margin > 0);
+const {
+  setExpandModal,
+  setExpandTargetWrap,
+  expandClipStyle,
+  expandTargetStyle,
+  isExpandActive,
+  isVisible,
+  toggle,
+  openFromDiagram,
+  endForDiagramReplacement,
+  closeFromButton,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  cursor,
+  isDragging,
+  scale,
+  isOverlayClosable,
+  showZoomHint
+} = useMermaidExpand({
+  getExpandTarget: props.getExpandTarget,
+  getExpandViewport: props.getExpandViewport,
+  expandOptions: props.options,
+  isBlocked: blocked
+});
+watch(isExpandActive, (active) => emit("active-change", active), { flush: "sync", immediate: true });
+defineExpose({ toggle, openFromDiagram, endForDiagramReplacement });
 </script>
 
 <template>
   <Teleport to="body">
     <div
-      v-if="active"
+      v-if="isExpandActive"
+      :ref="setExpandModal"
       class="ncm-expand-modal"
       :style="{
-  cursor: zoom?.cursor.value || 'auto'
+  cursor
 }"
-      @click="handleModalClick"
-      @mousedown="zoom?.handleDragStart($event)"
-      @mousemove="zoom?.handleDragMove($event)"
-      @touchstart="zoom?.handleDragStart($event)"
-      @touchmove="zoom?.handleDragMove($event)"
-      @touchend="zoom?.handleDragEnd()"
     >
       <div
         class="ncm-expand-overlay"
         :style="overlayStyle"
         :class="{
-  'ncm-expand-overlay-visible': isVisable,
-  'ncm-expand-overlay-closable': allowOverlayClose && !zoom?.isSpacePressed.value,
-  'ncm-expand-dragging': zoom?.isDragging.value
+  'ncm-expand-overlay-visible': isVisible,
+  'ncm-expand-overlay-closable': isOverlayClosable,
+  'ncm-expand-dragging': isDragging
 }"
       />
       <div
@@ -64,30 +69,33 @@ const handleModalClick = (event) => {
         :style="contentStyle"
       >
         <div
-          :ref="targetRef"
-          class="ncm-expand-target"
-          :class="{
+          class="ncm-expand-clip"
+          :style="expandClipStyle"
+        >
+          <div
+            :ref="setExpandTargetWrap"
+            class="ncm-expand-target"
+            :class="{
   'ncm-expand-target-with-margin': targetHasMargin
 }"
-          :style="targetStyle"
-          @transitionend="emit('transitionend', $event)"
-        />
+            :style="expandTargetStyle"
+          />
+        </div>
 
         <!-- Zoom Toolbar -->
         <MermaidZoomToolbar
-          v-if="zoom"
-          :scale="zoom.scale.value"
+          :scale="scale"
           :icon-size="iconSize"
           :icon-scale="0.75"
-          @zoom-out="zoom.zoomOut()"
-          @zoom-in="zoom.zoomIn()"
-          @reset="zoom.reset()"
+          @zoom-out="zoomOut"
+          @zoom-in="zoomIn"
+          @reset="resetZoom"
         />
 
         <!-- Zoom Hint Toast -->
         <Transition name="ncm-hint-fade">
           <div
-            v-if="showHint"
+            v-if="showZoomHint"
             class="ncm-zoom-hint"
           >
             {{ isMac ? "\u2318" : "Ctrl" }} + Scroll to zoom
@@ -99,7 +107,7 @@ const handleModalClick = (event) => {
           type="button"
           class="ncm-expand-btn"
           aria-label="Minimize diagram"
-          @click="handleButtonClick"
+          @click="closeFromButton"
           @mousedown.stop
           @touchstart.stop
         >
@@ -136,5 +144,5 @@ const handleModalClick = (event) => {
 </template>
 
 <style scoped>
-.ncm-expand-modal{inset:0;position:fixed;touch-action:none;z-index:1000}.ncm-expand-overlay{background-color:transparent;inset:0;position:absolute;transition:background-color .3s,opacity .3s,backdrop-filter .3s;z-index:0}.ncm-expand-overlay.ncm-expand-overlay-visible{backdrop-filter:var(--ncm-overlay-backdrop,none);background-color:color-mix(in oklab,var(--ncm-overlay-bg,var(--ncm-code-bg,#fff)) 95%,var(--ncm-text) 5%);opacity:var(--ncm-overlay-opacity,1)}.ncm-expand-overlay-closable{cursor:var(--ncm-cursor-collapse)}.ncm-expand-dragging{cursor:grabbing!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ncm-expand-content{height:100%;pointer-events:none;position:relative;width:100%;z-index:1}.ncm-expand-target{cursor:inherit;pointer-events:auto;position:absolute;transform-origin:top left;transition:transform .3s;z-index:2}.ncm-expand-target.ncm-expand-target-with-margin{background-color:var(--ncm-expand-target-bg,color-mix(in oklab,var(--ncm-overlay-bg,var(--ncm-code-bg,#fff)) 90%,var(--ncm-code-bg,#fff) 10%));border-radius:8px}.ncm-expand-target :deep(svg){display:block;height:100%;width:100%}.ncm-expand-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:color-mix(in oklab,var(--ncm-code-bg) 35%,transparent);border:none;border:1px solid color-mix(in oklab,var(--ncm-text) 8%,transparent);border-radius:4px;color:color-mix(in oklab,var(--ncm-text) 60%,transparent);cursor:pointer;display:flex;justify-content:center;padding:6px;pointer-events:auto;position:absolute;right:10px;top:10px;touch-action:manipulation;transition:color .2s,background-color .2s;z-index:3}.ncm-expand-btn:hover{background-color:var(--ncm-code-bg-hover);color:var(--ncm-text)}.ncm-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);font-size:14px;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:10}.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-expand-overlay,.ncm-expand-target,.ncm-hint-fade-enter-active,.ncm-hint-fade-leave-active{transition-duration:.01ms!important}}
+.ncm-expand-modal{inset:0;position:fixed;touch-action:none;z-index:1000}.ncm-expand-overlay{background-color:transparent;inset:0;position:absolute;transition:background-color .3s,opacity .3s,backdrop-filter .3s;z-index:0}.ncm-expand-overlay.ncm-expand-overlay-visible{backdrop-filter:var(--ncm-overlay-backdrop,none);background-color:color-mix(in oklab,var(--ncm-overlay-bg,var(--ncm-code-bg,#fff)) 95%,var(--ncm-text) 5%);opacity:var(--ncm-overlay-opacity,1)}.ncm-expand-overlay-closable{cursor:var(--ncm-cursor-collapse)}.ncm-expand-dragging{cursor:grabbing!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ncm-expand-content{height:100%;pointer-events:none;position:relative;width:100%;z-index:1}.ncm-expand-clip{overflow:hidden;pointer-events:none;position:absolute;transition:clip-path .3s;z-index:2}.ncm-expand-target{cursor:inherit;pointer-events:auto;position:absolute;transform-origin:top left;transition:transform .3s}.ncm-expand-target.ncm-expand-target-with-margin{background-color:var(--ncm-expand-target-bg,color-mix(in oklab,var(--ncm-overlay-bg,var(--ncm-code-bg,#fff)) 90%,var(--ncm-code-bg,#fff) 10%));border-radius:8px}.ncm-expand-target :deep(svg){display:block;height:100%;width:100%}.ncm-expand-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:color-mix(in oklab,var(--ncm-code-bg) 35%,transparent);border:none;border:1px solid color-mix(in oklab,var(--ncm-text) 8%,transparent);border-radius:4px;color:color-mix(in oklab,var(--ncm-text) 60%,transparent);cursor:pointer;display:flex;justify-content:center;padding:6px;pointer-events:auto;position:absolute;right:10px;top:10px;touch-action:manipulation;transition:color .2s,background-color .2s;z-index:3}.ncm-expand-btn:hover{background-color:var(--ncm-code-bg-hover);color:var(--ncm-text)}.ncm-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);font-size:14px;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:10}.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-expand-clip,.ncm-expand-overlay,.ncm-expand-target,.ncm-hint-fade-enter-active,.ncm-hint-fade-leave-active{transition-duration:.01ms!important}}
 </style>

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

@@ -1,25 +1,22 @@
-import type { CSSProperties, ComponentPublicInstance } from 'vue';
-import type { MermaidZoomReturn } from '../composables/useMermaidZoom.js';
+import type { CSSProperties } from 'vue';
+import type { ExpandOptions } from '../types/expand.js';
 type __VLS_Props = {
-    active: boolean;
-    isVisable: boolean;
+    options: ExpandOptions;
+    blocked: boolean;
+    getExpandTarget: () => SVGElement | null;
+    getExpandViewport: () => HTMLElement | null;
     overlayStyle?: CSSProperties;
     contentStyle?: CSSProperties;
-    targetStyle?: CSSProperties;
-    targetRef: (el: Element | ComponentPublicInstance | null) => void;
-    allowOverlayClose: boolean;
-    allowCloseButton: boolean;
-    targetHasMargin: boolean;
     iconSize?: number;
-    zoom?: MermaidZoomReturn;
-    showHint?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    close: (event?: Event | undefined) => any;
-    transitionend: (event: TransitionEvent) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    toggle: (event?: Event) => void;
+    openFromDiagram: (event: MouseEvent) => void;
+    endForDiagramReplacement: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "active-change": (active: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((event?: Event | undefined) => any) | undefined;
-    onTransitionend?: ((event: TransitionEvent) => any) | undefined;
+    "onActive-change"?: ((active: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    fullscreenTarget: HTMLElement | null;
+    viewportTarget: HTMLElement | null;
+    renderTarget: HTMLElement | null;
+    iconSize?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    toggle: () => Promise<void>;
+    endForDiagramReplacement: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "active-change": (value: boolean) => void;
+    "supported-change": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onActive-change"?: ((value: boolean) => any) | undefined;
+    "onSupported-change"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MermaidFullscreenPresentation.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { watch } from "vue";
+import { useMermaidFullscreen } from "../composables/useMermaidFullscreen";
+import MermaidZoomToolbar from "./MermaidZoomToolbar.vue";
+const props = defineProps({
+  fullscreenTarget: { type: null, required: true },
+  viewportTarget: { type: null, required: true },
+  renderTarget: { type: null, required: true },
+  iconSize: { type: Number, required: false }
+});
+const emit = defineEmits(["active-change", "supported-change"]);
+const isMac = import.meta.client ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) : false;
+const {
+  isSupported,
+  isActive,
+  scale,
+  showZoomHint,
+  toggle,
+  endForDiagramReplacement,
+  zoomIn,
+  zoomOut,
+  resetZoom
+} = useMermaidFullscreen({
+  getFullscreenTarget: () => props.fullscreenTarget,
+  getViewportTarget: () => props.viewportTarget,
+  getRenderTarget: () => props.renderTarget
+});
+watch(isActive, (active) => emit("active-change", active), { flush: "sync", immediate: true });
+watch(isSupported, (supported) => emit("supported-change", supported), { flush: "sync", immediate: true });
+defineExpose({ toggle, endForDiagramReplacement });
+</script>
+
+<template>
+  <MermaidZoomToolbar
+    v-if="isActive"
+    variant="fullscreen"
+    :scale="scale"
+    :icon-size="iconSize"
+    @zoom-out="zoomOut"
+    @zoom-in="zoomIn"
+    @reset="resetZoom"
+  />
+
+  <Transition name="ncm-hint-fade">
+    <div
+      v-if="showZoomHint && isActive"
+      class="ncm-fullscreen-zoom-hint"
+    >
+      {{ isMac ? "\u2318" : "Ctrl" }} + Scroll to zoom
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.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}}
+</style>

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    fullscreenTarget: HTMLElement | null;
+    viewportTarget: HTMLElement | null;
+    renderTarget: HTMLElement | null;
+    iconSize?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    toggle: () => Promise<void>;
+    endForDiagramReplacement: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "active-change": (value: boolean) => void;
+    "supported-change": (value: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onActive-change"?: ((value: boolean) => any) | undefined;
+    "onSupported-change"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useMermaidExpand.d.ts

@@ -1,45 +1,29 @@
 import type { CSSProperties, ComponentPublicInstance, Ref } from 'vue';
-import type { ExpandInvokeCloseOn, ExpandInvokeOpenOn } from '../types/expand.js';
+import type { ExpandOptions } from '../types/expand.js';
 interface UseMermaidExpandOptions {
     getExpandTarget: () => SVGElement | null;
-    expandMargin?: number;
+    getExpandViewport: () => HTMLElement | null;
+    expandOptions: ExpandOptions;
     isBlocked?: Ref<boolean>;
-    invokeOpenOn?: ExpandInvokeOpenOn;
-    invokeCloseOn?: ExpandInvokeCloseOn;
 }
 export declare function useMermaidExpand(options: UseMermaidExpandOptions): {
+    setExpandModal: (el: Element | ComponentPublicInstance | null) => void;
     setExpandTargetWrap: (el: Element | ComponentPublicInstance | null) => void;
+    expandClipStyle: import("vue").ComputedRef<CSSProperties>;
     expandTargetStyle: import("vue").ComputedRef<CSSProperties>;
     isExpandActive: import("vue").ComputedRef<boolean>;
     isVisible: import("vue").ComputedRef<boolean>;
-    openExpand: (_event?: Event) => void;
-    closeExpand: (_event?: Event) => void;
-    toggleExpand: (event?: Event) => void;
-    handleExpandTransitionEnd: (event: TransitionEvent) => void;
-    handleMermaidClick: (event: MouseEvent) => void;
-    resetExpand: () => void;
-    zoom: {
-        scale: Ref<number, number>;
-        translateX: Ref<number, number>;
-        translateY: Ref<number, number>;
-        transformStyle: import("vue").ComputedRef<{
-            transform: string;
-        }>;
-        isDragging: Ref<boolean, boolean>;
-        isSpacePressed: Ref<boolean, boolean>;
-        wasLastInteractionDrag: Ref<boolean, boolean>;
-        cursor: import("vue").ComputedRef<"grabbing" | "grab" | "auto">;
-        init: (metrics: import("./useMermaidZoom.js").ZoomMetrics) => void;
-        reset: () => void;
-        zoomIn: () => void;
-        zoomOut: () => void;
-        setMetrics: (metrics: import("./useMermaidZoom.js").ZoomMetrics) => void;
-        handleWheel: (event: WheelEvent) => boolean;
-        handleDragStart: (event: MouseEvent | TouchEvent) => void;
-        handleDragMove: (event: MouseEvent | TouchEvent) => void;
-        handleDragEnd: () => void;
-        isPointerDown: Ref<boolean, boolean>;
-    };
+    toggle: (event?: Event) => void;
+    openFromDiagram: (event: MouseEvent) => void;
+    endForDiagramReplacement: () => void;
+    closeFromButton: (event?: Event) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    cursor: import("vue").ComputedRef<"grabbing" | "grab" | "auto">;
+    isDragging: import("vue").ComputedRef<boolean>;
+    scale: import("vue").ComputedRef<number>;
+    isOverlayClosable: import("vue").ComputedRef<boolean>;
     showZoomHint: Ref<boolean, boolean>;
 };
 export {};