@cocoar/vue-mermaid 2.14.0

package/README.md

@@ -0,0 +1,85 @@
+# @cocoar/vue-mermaid
+
+A standalone [Mermaid](https://mermaid.js.org/) diagram component for Vue 3.
+`<CoarMermaidDiagram :code>` renders a diagram from a Mermaid source string —
+Cocoar-themed, lazy-loaded, with opt-in zoom/pan.
+
+It knows **nothing about markdown** or any embedding layer. To render
+` ```mermaid ` fenced code blocks inside [`@cocoar/vue-markdown`](../markdown),
+use the thin adapter [`@cocoar/vue-markdown-mermaid`](../markdown-mermaid) — it
+plugs this component in as a fence renderer.
+
+## Install
+
+```bash
+pnpm add @cocoar/vue-mermaid
+```
+
+`vue` is the only peer dependency. Mermaid is a regular dependency, dynamically
+imported on first render so it lands in its own lazy chunk. Import the stylesheet
+once:
+
+```ts
+import '@cocoar/vue-mermaid/styles';
+```
+
+## Usage
+
+```vue
+<template>
+  <CoarMermaidDiagram :code="code" zoomable />
+</template>
+
+<script setup lang="ts">
+import { CoarMermaidDiagram } from '@cocoar/vue-mermaid';
+
+const code = `
+flowchart LR
+  A[Start] --> B{Choice}
+  B -->|yes| C[Do it]
+  B -->|no| D[Skip]
+`;
+</script>
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `code` | `string` | The Mermaid diagram source. |
+| `language` | `string` | Info-string label (default `'mermaid'`); handy when reused. |
+| `zoomable` | `boolean` | Enable zoom/pan (default `false`). |
+
+## How it works
+
+- **Rendering** is client-only (Mermaid needs a DOM) and lazy (Mermaid is
+  dynamically imported on first mount).
+- **Theming** maps Cocoar design tokens onto Mermaid's `themeVariables` (colors
+  normalized to sRGB, since Cocoar tokens are `oklch(...)` which Mermaid can't
+  read) so diagrams match the app's fonts and palette.
+- **Fonts**: rendering waits for `document.fonts.ready` so text isn't clipped by
+  boxes measured before the web font loaded.
+- **Security**: Mermaid runs with `securityLevel: 'strict'` — author diagram text
+  is treated as untrusted (HTML in labels is sanitized).
+- **Invalid source** degrades to an error box that still shows the raw source; it
+  never throws up to the app.
+
+## Zoom & pan
+
+With `zoomable`, the diagram sits in a fixed-height viewport with:
+
+- **+ / − / ⤢ buttons** (top-right) — the primary, touch-friendly zoom;
+- **Ctrl / ⌘ + wheel** — zoom toward the cursor;
+- **drag** — pan (mouse / pen);
+- **double-click** — reset.
+
+Plain mouse-wheel scrolling is deliberately **not** captured, so a diagram never
+traps the page scroll. On touch, one-finger scrolling still scrolls the page.
+Set the viewport height with the `--coar-mermaid-height` CSS variable (default
+`420px`).
+
+## Exports
+
+| Export | Description |
+| --- | --- |
+| `CoarMermaidDiagram` | The renderer component (`{ code, language, zoomable }`). |
+| `buildMermaidThemeVariables(getToken, resolveColor?)` | Pure Cocoar-token → Mermaid-theme mapping. |
+| `makeCssColorResolver()` / `readCssTokens(el?)` | Browser-backed color/token resolvers for the bridge. |

package/dist/CoarMermaidDiagram.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    code: string;
+    language?: string;
+    zoomable?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    language: string;
+    zoomable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    container: HTMLDivElement;
+    viewport: HTMLDivElement;
+    content: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=CoarMermaidDiagram.vue.d.ts.map

package/dist/CoarMermaidDiagram.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoarMermaidDiagram.vue.d.ts","sourceRoot":"","sources":["../src/CoarMermaidDiagram.vue"],"names":[],"mappings":"AAwSA,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;;cAA7B,MAAM;cAAa,OAAO;;;;;;AAyMxE,wBASG"}

package/dist/index.css

@@ -0,0 +1,2 @@
+.coar-mermaid{margin:var(--coar-spacing-m,1rem) 0;position:relative}.coar-mermaid__viewport{justify-content:center;display:flex}.coar-mermaid__svg{max-width:100%}.coar-mermaid__svg svg{max-width:100%;height:auto}.coar-mermaid--zoomable .coar-mermaid__viewport{height:var(--coar-mermaid-height,420px);border:1px solid var(--coar-border-neutral-tertiary,#e2e2e2);border-radius:var(--coar-input-radius,8px);background:var(--coar-background-neutral-primary,#fff);cursor:grab;display:block;position:relative;overflow:hidden}.coar-mermaid--zoomable .coar-mermaid__viewport.is-panning{cursor:grabbing}.coar-mermaid--zoomable .coar-mermaid__svg{width:100%;max-width:none}.coar-mermaid--zoomable .coar-mermaid__viewport.is-panning .coar-mermaid__svg{will-change:transform}.coar-mermaid--zoomable .coar-mermaid__svg svg{max-width:none}.coar-mermaid__controls{top:var(--coar-spacing-xs,.25rem);right:var(--coar-spacing-xs,.25rem);border-radius:var(--coar-input-radius,8px);background:color-mix(in srgb, var(--coar-background-neutral-primary,#fff) 88%, transparent);border:1px solid var(--coar-border-neutral-tertiary,#e2e2e2);gap:2px;padding:2px;display:flex;position:absolute}.coar-mermaid__controls button{border-radius:calc(var(--coar-input-radius,8px) - 2px);width:26px;height:26px;color:var(--coar-text-neutral-secondary,#333);font-family:var(--coar-font-family-body,sans-serif);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:inline-flex}.coar-mermaid__controls button:hover{background:var(--coar-background-neutral-secondary,#f5f5f5)}.coar-mermaid__loading{color:var(--coar-text-neutral-tertiary,#666);font-family:var(--coar-font-family-body,sans-serif);font-size:var(--coar-font-size-xs,14px);padding:var(--coar-spacing-m,1rem)}.coar-mermaid__error{border:1px solid var(--coar-border-semantic-error,#dc2626);border-radius:var(--coar-input-radius,8px);background:var(--coar-background-semantic-error-subtle,#fee2e2);width:100%;padding:var(--coar-spacing-m,1rem);font-family:var(--coar-font-family-body,sans-serif)}.coar-mermaid__error-title{margin:0 0 var(--coar-spacing-xs,.25rem);color:var(--coar-text-semantic-error-bold,#991b1b);font-weight:600}.coar-mermaid__error-message{margin:0 0 var(--coar-spacing-s,.5rem);color:var(--coar-text-semantic-error-subtle,#b91c1c);font-size:var(--coar-font-size-xs,14px)}.coar-mermaid__error-source{padding:var(--coar-spacing-s,.5rem);border-radius:var(--coar-input-radius,8px);background:var(--coar-background-neutral-secondary,#f8f9fa);color:var(--coar-text-neutral-secondary,#333);font-size:var(--coar-font-size-xs,14px);white-space:pre;margin:0;overflow-x:auto}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `@cocoar/vue-mermaid` — a standalone Mermaid diagram component for Vue 3.
+ *
+ * `<CoarMermaidDiagram :code>` takes a Mermaid diagram source string and renders
+ * it: lazy-loaded engine, client-only, `securityLevel: 'strict'`, Cocoar-themed,
+ * with opt-in zoom/pan. It has **no dependency on — and no knowledge of —
+ * markdown** or any embedding layer. To render ` ```mermaid ` fenced code blocks
+ * inside `@cocoar/vue-markdown`, use the thin adapter `@cocoar/vue-markdown-mermaid`.
+ */
+export { default as CoarMermaidDiagram } from './CoarMermaidDiagram.vue';
+export { buildMermaidThemeVariables, makeCssColorResolver, readCssTokens, } from './internal/theme-bridge';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAIzE,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,aAAa,GACd,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,272 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, nextTick as i, normalizeClass as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, shallowRef as u, toDisplayString as d, watch as f } from "vue";
+//#region src/internal/mermaid-loader.ts
+var p = null;
+function m(e) {
+	return p || (p = import("mermaid").then((t) => {
+		let n = t.default ?? t;
+		return n.initialize({
+			startOnLoad: !1,
+			securityLevel: "strict",
+			...e()
+		}), n;
+	}).catch((e) => {
+		throw p = null, e;
+	}), p);
+}
+var h = Promise.resolve(), g = 0;
+function _(e, t) {
+	let n = async () => {
+		let n = await m(e);
+		if (typeof document < "u" && document.fonts?.ready) try {
+			await document.fonts.ready;
+		} catch {}
+		let r = `coar-mermaid-${g++}`;
+		try {
+			let { svg: e } = await n.render(r, t);
+			return e;
+		} finally {
+			typeof document < "u" && (document.getElementById(r)?.remove(), document.getElementById(`d${r}`)?.remove());
+		}
+	}, r = h.then(n, n);
+	return h = r.then(() => void 0, () => void 0), r;
+}
+//#endregion
+//#region src/internal/theme-bridge.ts
+var v = [
+	{
+		mermaidVar: "fontFamily",
+		token: "--coar-font-family-body",
+		kind: "font"
+	},
+	{
+		mermaidVar: "primaryColor",
+		token: "--coar-background-accent-secondary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "mainBkg",
+		token: "--coar-background-accent-secondary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "primaryTextColor",
+		token: "--coar-text-neutral-primary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "primaryBorderColor",
+		token: "--coar-border-accent-primary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "nodeBorder",
+		token: "--coar-border-accent-primary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "secondaryColor",
+		token: "--coar-background-neutral-secondary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "tertiaryColor",
+		token: "--coar-background-neutral-tertiary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "clusterBkg",
+		token: "--coar-background-neutral-secondary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "clusterBorder",
+		token: "--coar-border-neutral-tertiary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "lineColor",
+		token: "--coar-border-neutral-secondary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "textColor",
+		token: "--coar-text-neutral-primary",
+		kind: "color"
+	},
+	{
+		mermaidVar: "background",
+		token: "--coar-background-neutral-primary",
+		kind: "color"
+	}
+];
+function y(e, t = (e) => e) {
+	let n = {};
+	for (let { mermaidVar: r, token: i, kind: a } of v) {
+		let o = e(i).trim();
+		if (!o) continue;
+		let s = a === "color" ? t(o) : o;
+		s && (n[r] = s);
+	}
+	return n;
+}
+function b(e) {
+	let t = e ?? (typeof document < "u" ? document.documentElement : null);
+	if (!t || typeof getComputedStyle > "u") return () => "";
+	let n = getComputedStyle(t);
+	return (e) => n.getPropertyValue(e);
+}
+function x() {
+	if (typeof document > "u") return () => "";
+	let e = document.createElement("canvas");
+	e.width = 1, e.height = 1;
+	let t = e.getContext("2d", { willReadFrequently: !0 });
+	return t ? (e) => {
+		if (!e) return "";
+		t.fillStyle = "#000000", t.fillStyle = e;
+		let n = t.fillStyle;
+		if (t.fillStyle = "#ffffff", t.fillStyle = e, t.fillStyle !== n) return "";
+		t.clearRect(0, 0, 1, 1), t.fillRect(0, 0, 1, 1);
+		let [r, i, a, o] = t.getImageData(0, 0, 1, 1).data;
+		return o === 255 ? `rgb(${r}, ${i}, ${a})` : `rgba(${r}, ${i}, ${a}, ${(o / 255).toFixed(3)})`;
+	} : () => "";
+}
+//#endregion
+//#region src/internal/pan-zoom.ts
+function S(e, t, n = {}) {
+	let r = n.minScale ?? .3, i = n.maxScale ?? 8, a = n.zoomSpeed ?? .0015, o = n.step ?? 1.25, s = 1, c = 0, l = 0, u = !1, d = -1, f = 0, p = 0, m = 0, h = 0;
+	t.style.transformOrigin = "0 0";
+	let g = () => {
+		t.style.transform = `translate(${c}px, ${l}px) scale(${s})`;
+	}, _ = (e, t, n) => {
+		let a = C(s * n, r, i), o = a / s;
+		c = e - o * (e - c), l = t - o * (t - l), s = a, g();
+	}, v = (t) => {
+		let n = e.getBoundingClientRect();
+		_(n.width / 2, n.height / 2, t);
+	}, y = (t) => {
+		if (!(t.ctrlKey || t.metaKey)) return;
+		t.preventDefault();
+		let n = e.getBoundingClientRect();
+		_(t.clientX - n.left, t.clientY - n.top, Math.exp(-t.deltaY * a));
+	}, b = (t) => {
+		t.button !== 0 || t.pointerType === "touch" || (u = !0, d = t.pointerId, f = t.clientX, p = t.clientY, m = c, h = l, e.setPointerCapture(d), e.classList.add("is-panning"));
+	}, x = (e) => {
+		u && (c = m + (e.clientX - f), l = h + (e.clientY - p), g());
+	}, S = () => {
+		if (u) {
+			u = !1;
+			try {
+				e.releasePointerCapture(d);
+			} catch {}
+			e.classList.remove("is-panning");
+		}
+	}, w = () => {
+		s = 1;
+		let n = t.style.transform;
+		t.style.transform = "none";
+		let r = e.getBoundingClientRect(), i = t.getBoundingClientRect();
+		t.style.transform = n, c = Math.max(0, (r.width - i.width) / 2), l = Math.max(0, (r.height - i.height) / 2), g();
+	};
+	return e.addEventListener("wheel", y, { passive: !1 }), e.addEventListener("pointerdown", b), e.addEventListener("pointermove", x), e.addEventListener("pointerup", S), e.addEventListener("pointercancel", S), e.addEventListener("dblclick", w), w(), {
+		zoomIn: () => v(o),
+		zoomOut: () => v(1 / o),
+		reset: w,
+		destroy() {
+			e.removeEventListener("wheel", y), e.removeEventListener("pointerdown", b), e.removeEventListener("pointermove", x), e.removeEventListener("pointerup", S), e.removeEventListener("pointercancel", S), e.removeEventListener("dblclick", w);
+		}
+	};
+}
+function C(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+//#endregion
+//#region src/CoarMermaidDiagram.vue?vue&type=script&setup=true&lang.ts
+var w = ["data-status"], T = ["innerHTML"], E = {
+	key: 1,
+	class: "coar-mermaid__loading"
+}, D = {
+	key: 2,
+	class: "coar-mermaid__error",
+	role: "alert"
+}, O = { class: "coar-mermaid__error-message" }, k = { class: "coar-mermaid__error-source" }, A = {
+	key: 0,
+	class: "coar-mermaid__controls"
+}, j = /* @__PURE__ */ r({
+	__name: "CoarMermaidDiagram",
+	props: {
+		code: {},
+		language: { default: "mermaid" },
+		zoomable: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		let p = r, m = l(null), h = l(null), g = l(null), v = l("idle"), C = l(""), j = l(""), M = 0, N = u(null);
+		function P() {
+			N.value?.destroy(), N.value = null;
+		}
+		async function F() {
+			if (typeof window > "u") return;
+			let e = p.code?.trim() ?? "";
+			if (P(), !e) {
+				v.value = "idle", C.value = "", j.value = "";
+				return;
+			}
+			let t = ++M;
+			v.value = "loading";
+			try {
+				let n = await _(() => ({
+					theme: "base",
+					themeVariables: y(b(m.value), x())
+				}), e);
+				if (t !== M) return;
+				C.value = n, j.value = "", v.value = "rendered", p.zoomable && (await i(), t === M && h.value && g.value && (N.value = S(h.value, g.value)));
+			} catch (e) {
+				if (t !== M) return;
+				C.value = "", j.value = e instanceof Error ? e.message : String(e), v.value = "error";
+			}
+		}
+		return s(F), f(() => p.code, F), o(P), (i, o) => (c(), t("div", {
+			ref_key: "container",
+			ref: m,
+			class: a(["coar-mermaid", { "coar-mermaid--zoomable": r.zoomable }]),
+			"data-status": v.value
+		}, [n("div", {
+			ref_key: "viewport",
+			ref: h,
+			class: "coar-mermaid__viewport"
+		}, [v.value === "rendered" ? (c(), t("div", {
+			key: 0,
+			ref_key: "content",
+			ref: g,
+			class: "coar-mermaid__svg",
+			innerHTML: C.value
+		}, null, 8, T)) : v.value === "loading" ? (c(), t("div", E, " Rendering diagram… ")) : v.value === "error" ? (c(), t("div", D, [
+			o[3] ||= n("p", { class: "coar-mermaid__error-title" }, "Diagram error", -1),
+			n("p", O, d(j.value), 1),
+			n("pre", k, d(r.code), 1)
+		])) : e("", !0)], 512), r.zoomable && v.value === "rendered" ? (c(), t("div", A, [
+			n("button", {
+				type: "button",
+				title: "Zoom out",
+				"aria-label": "Zoom out",
+				onClick: o[0] ||= (e) => N.value?.zoomOut()
+			}, " − "),
+			n("button", {
+				type: "button",
+				title: "Zoom in",
+				"aria-label": "Zoom in",
+				onClick: o[1] ||= (e) => N.value?.zoomIn()
+			}, " + "),
+			n("button", {
+				type: "button",
+				title: "Reset view (or double-click)",
+				"aria-label": "Reset view",
+				onClick: o[2] ||= (e) => N.value?.reset()
+			}, " ⤢ ")
+		])) : e("", !0)], 10, w));
+	}
+});
+//#endregion
+export { j as CoarMermaidDiagram, y as buildMermaidThemeVariables, x as makeCssColorResolver, b as readCssTokens };

package/dist/internal/mermaid-loader.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Lazy, one-time loader for the Mermaid engine.
+ *
+ * Mermaid is heavy (it pulls in d3, dagre, …) and DOM-bound, so it is *never*
+ * imported eagerly: the first diagram that mounts triggers a dynamic
+ * `import('mermaid')`, which the consumer's bundler splits into its own chunk.
+ * Subsequent diagrams reuse the same resolved instance.
+ *
+ * Mermaid is initialized exactly once, with `startOnLoad: false` (we drive
+ * rendering imperatively) and `securityLevel: 'strict'` (author diagram text is
+ * untrusted — strict mode sanitizes HTML in labels and blocks click bindings).
+ * The theme config is captured at that first initialization; a reactive
+ * theme-swap at runtime is a deliberate follow-up, not part of this slice.
+ */
+/** The slice of Mermaid's API this package uses. */
+export interface MermaidApi {
+    render(id: string, text: string): Promise<{
+        svg: string;
+        bindFunctions?: (element: Element) => void;
+    }>;
+}
+/** Init config passed to Mermaid — kept loose to stay version-tolerant. */
+export type MermaidInitConfig = Record<string, unknown>;
+/**
+ * Resolve the initialized Mermaid instance, importing + initializing it on the
+ * first call. `configFactory` runs once, on that first call, and must read any
+ * runtime theme tokens it needs then (it is not re-consulted afterward).
+ */
+export declare function loadMermaid(configFactory: () => MermaidInitConfig): Promise<MermaidApi>;
+/**
+ * Render one diagram to an SVG string, serialized against every other render.
+ * Loads + initializes Mermaid on first use (via {@link loadMermaid}); rejects if
+ * the source is invalid so the caller can show a fallback.
+ */
+export declare function renderMermaid(configFactory: () => MermaidInitConfig, code: string): Promise<string>;
+/** Test-only hook: forget the cached instance so a fresh load can be asserted. */
+export declare function resetMermaidForTests(): void;
+//# sourceMappingURL=mermaid-loader.d.ts.map

package/dist/internal/mermaid-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid-loader.d.ts","sourceRoot":"","sources":["../../src/internal/mermaid-loader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,oDAAoD;AACpD,MAAM,WAAW,UAAU;IACzB,MAAM,CACJ,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,GACX,OAAO,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC,CAAC;CACzE;AAED,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAIxD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,aAAa,EAAE,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAuBvF;AAWD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,aAAa,EAAE,MAAM,iBAAiB,EACtC,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,MAAM,CAAC,CAsCjB;AAED,kFAAkF;AAClF,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/internal/pan-zoom.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Minimal, dependency-free pan + zoom for a rendered diagram.
+ *
+ * Deliberately does NOT hijack the plain mouse wheel — that would trap page
+ * scrolling ("I scroll and get stuck on the diagram"). Instead:
+ *   - plain wheel  → the page scrolls normally (we don't touch it),
+ *   - Ctrl/⌘ + wheel → zoom toward the cursor,
+ *   - the +/−/reset controls (driven by {@link PanZoomHandle}) → zoom, and
+ *   - mouse / pen drag → pan.
+ * Touch is intentionally left to the browser (one-finger touch scrolls the page),
+ * so a diagram never blocks scrolling on a tablet — zoom there is via the buttons.
+ *
+ * The caller owns the DOM: it passes the clipping `viewport` (overflow hidden)
+ * and the `content` wrapper (the element holding Mermaid's SVG). A CSS transform
+ * on `content` is all that's needed — no d3 / svg-pan-zoom.
+ */
+export interface PanZoomHandle {
+    /** Zoom in one step, toward the viewport center. */
+    zoomIn(): void;
+    /** Zoom out one step, from the viewport center. */
+    zoomOut(): void;
+    /** Recenter + reset zoom to 1. */
+    reset(): void;
+    /** Remove every listener. Idempotent. */
+    destroy(): void;
+}
+export interface PanZoomOptions {
+    minScale?: number;
+    maxScale?: number;
+    /** Ctrl/⌘+wheel sensitivity; larger = faster zoom. */
+    zoomSpeed?: number;
+    /** Multiplier applied by the +/− buttons per click. */
+    step?: number;
+}
+export declare function createPanZoom(viewport: HTMLElement, content: HTMLElement, options?: PanZoomOptions): PanZoomHandle;
+//# sourceMappingURL=pan-zoom.d.ts.map

package/dist/internal/pan-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pan-zoom.d.ts","sourceRoot":"","sources":["../../src/internal/pan-zoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,MAAM,IAAI,IAAI,CAAC;IACf,mDAAmD;IACnD,OAAO,IAAI,IAAI,CAAC;IAChB,kCAAkC;IAClC,KAAK,IAAI,IAAI,CAAC;IACd,yCAAyC;IACzC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,WAAW,EACpB,OAAO,GAAE,cAAmB,GAC3B,aAAa,CAiHf"}

package/dist/internal/theme-bridge.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Bridges Cocoar design tokens → Mermaid `themeVariables`, so a rendered
+ * diagram picks up the app's fonts and palette instead of Mermaid's stock look.
+ *
+ * The mapping is expressed as a pure function over a *token getter* + a *color
+ * resolver* so it can be unit-tested without a DOM (feed it fakes).
+ * {@link readCssTokens} produces the real, browser-backed getter (reads CSS
+ * custom properties via `getComputedStyle`); {@link makeCssColorResolver}
+ * produces the real color resolver.
+ *
+ * Why a color resolver at all: Cocoar's color tokens resolve to CSS Color-4
+ * values — e.g. `oklch(from #1183CD 0.92 0.035 h)` — which Mermaid's color parser
+ * (khroma) can't read, so a raw hand-off makes every diagram error out. The
+ * resolver rasterizes each color to concrete sRGB `rgb()/rgba()` (a format
+ * Mermaid always understands) and rejects anything unparseable, so a bad token is
+ * dropped rather than poisoning the whole theme.
+ *
+ * Only tokens that resolve to a non-empty value are emitted — a missing (or
+ * unparseable) token is simply omitted, letting Mermaid's `base` theme fill the
+ * gap rather than being handed an empty string.
+ */
+/**
+ * Build the `themeVariables` map from a token getter + a color resolver.
+ * `getToken(name)` returns the resolved CSS value for a custom property (or `''`
+ * when unset); `resolveColor(value)` normalizes a CSS color to a Mermaid-safe
+ * form and returns `''` for anything unparseable. Both default to identity /
+ * pass-through so the function stays usable in a plain (DOM-free) unit test.
+ */
+export declare function buildMermaidThemeVariables(getToken: (name: string) => string, resolveColor?: (value: string) => string): Record<string, string>;
+/**
+ * Produce a token getter backed by `getComputedStyle` on the given element
+ * (defaults to `document.documentElement`). Returns a getter that always yields
+ * `''` when there is no DOM (SSR) or no element, so callers stay side-effect and
+ * crash free on the server.
+ */
+export declare function readCssTokens(el?: Element | null): (name: string) => string;
+/**
+ * Produce a color resolver that normalizes any CSS color the browser can paint
+ * — including CSS Color-4 forms like `oklch(...)` — into a concrete sRGB
+ * `rgb()/rgba()` string that Mermaid understands. Unparseable input yields `''`.
+ *
+ * Mechanism: paint the color onto a 1×1 canvas and read the pixel back. Canvas
+ * rasterizes to 8-bit sRGB, so the read-back is always plain rgb regardless of
+ * the source color space. Validity is probed first by assigning the value over
+ * two distinct sentinels — a color the canvas rejects leaves them differing.
+ *
+ * Returns a getter yielding `''` when there is no DOM / no 2D context (SSR).
+ */
+export declare function makeCssColorResolver(): (value: string) => string;
+//# sourceMappingURL=theme-bridge.d.ts.map

package/dist/internal/theme-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-bridge.d.ts","sourceRoot":"","sources":["../../src/internal/theme-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAyBH;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAClC,YAAY,GAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAyB,GACzD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CASxB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAQ3E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CA4BhE"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@cocoar/vue-mermaid",
+  "version": "2.14.0",
+  "description": "Standalone Mermaid diagram component for Vue 3: <CoarMermaidDiagram :code>. Cocoar-themed, lazy-loaded, with opt-in zoom/pan. Knows nothing about markdown — feed it a diagram source string.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cocoar-dev/cocoar-ui-vue.git",
+    "directory": "packages/mermaid"
+  },
+  "homepage": "https://docs.cocoar.dev/cocoar-ui-vue/",
+  "bugs": "https://github.com/cocoar-dev/cocoar-ui-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "mermaid",
+    "diagram"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.vue"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint src/",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "mermaid": "^11.4.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.32"
+  }
+}