comark-ui 0.0.0 → 0.7.2

package/LICENSE

@@ -0,0 +1,69 @@
+MIT License
+
+Copyright (c) 2026 onmax
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+The icons are Lucide's (https://lucide.dev), under its license:
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,71 @@
 # comark-ui
 
-Placeholder. The real package publishes from https://github.com/onmax/comark-ui.
+[![npm version](https://comark-ui.onmax.me/badge.svg?source=npm-version&package=comark-ui&icon=npm)](https://npmx.dev/package/comark-ui)
+[![npm downloads](https://comark-ui.onmax.me/badge.svg?source=npm-downloads&package=comark-ui&period=month&icon=npm)](https://npmx.dev/package/comark-ui)
+[![license](https://comark-ui.onmax.me/badge.svg?label=license&value=MIT)](https://npmx.dev/package/comark-ui)
+[![docs](https://comark-ui.onmax.me/badge.svg?label=docs&value=comark-ui.onmax.me)](https://comark-ui.onmax.me/getting-started/)
+
+Every [Comark](https://comark.dev) block from [comark-ui](https://comark-ui.onmax.me) in one install, registered in the order they need, with one icon resolver shared by `:icon`, cards, details, file trees, tabs, and code actions. It ships in lockstep with the plugins, so updating it brings their latest defaults.
+
+```sh
+pnpm add comark @comark/html comark-ui
+```
+
+```ts
+import { createHtmlRenderer } from "@comark/html";
+import comarkUi from "comark-ui/html";
+
+const render = createHtmlRenderer(comarkUi());
+```
+
+`comarkUi()` returns `{ plugins, components }`. Every plugin is on but `include`. Pass `false` to turn one off, which drops its components too, or an object to pass it options:
+
+```ts
+comarkUi({
+  zoom: false,
+  code: { actions: [{ id: "run", label: "Run" }] },
+  github: { references: { repo: "owner/name" } },
+  include: { root: "content" },
+});
+```
+
+`include` is off because it reads files from disk; turn it on to paste files into a document. `cast`, `table`, and `tests` are on but read no files until you pass `{ root }` or `{ read }`. When you parse in a browser, pass `chips: { download: false }`, since a browser may not download another site's images. comark-critic has no component for its styles, so put the exported `criticCss` in the page. The text around the blocks (headings, paragraphs, lists, tables, code, and quotes) is styled too, from shadcn/typeset on the same tokens and scoped to the document; pass `typeset: false` when your site already styles Markdown. See [Typeset](https://comark-ui.onmax.me/guide/typeset/).
+
+## Renderers
+
+| Renderer | Import |
+| --- | --- |
+| `@comark/html` | `comark-ui/html` |
+| `@comark/vue` | `comark-ui/vue` |
+| `@comark/react` | `comark-ui/react` |
+| `@comark/svelte` | `comark-ui/svelte` |
+
+Vue, React, and Svelte leave out annotate and diff, which render only to HTML.
+
+## Editor
+
+[Editor docs](https://comark-ui.onmax.me/guide/editor/) cover setup, Vue bindings, file uploads, and collaborative rooms.
+
+`comark-ui/editor` is a [Tiptap](https://tiptap.dev) editor for Comark Markdown, with no DOM and no framework, so a server can convert documents with it too. Install `@tiptap/core`, `@tiptap/pm`, `@tiptap/starter-kit`, `@tiptap/extension-list`, `@tiptap/extension-image`, and `@tiptap/extension-table`.
+
+| Export | What it does |
+| --- | --- |
+| `ComarkKit` | The schema: StarterKit, task lists, inline images (drawn as players for video and audio), tables, and Comark's components, slots, and comments, each keeping the attributes it has no field for. |
+| `fromMarkdown`, `toMarkdown` | Convert between Markdown and the editor's JSON with Comark's own parser and writer. Front matter stays beside the document. |
+| `checkMarkdown(markdown, { plugins })` | Whether the editor can save the document without changing what readers see, judged with the plugins the page renders with. A document it can't keep opens read-only. |
+| `Upload` | Uploads pasted and dropped files. Each shows a placeholder with its progress until `upload(file, progress)` returns its URL. The placeholder is a decoration, so a collaborative document never holds a file that hasn't arrived. |
+| `createEditorCodec({ plugins })` | `{ extensions, fromMarkdown, toMarkdown, verify }` for a collaborative room, such as ViteHub Realtime's `editor` option. |
+
+`comark-ui/editor/vue` binds the editor to a Markdown string with `useComarkEditor(markdown)` or `<ComarkEditor v-model="markdown" />`. Run `pnpm playground` in this package to try it.
+
+## Agents
+
+The package ships the [comark-ui agent skill](https://github.com/onmax/comark-ui/tree/main/skills/comark-ui): a `SKILL.md` that says how to install the plugins, which block shows what, and how to check the result, and a reference for each package. Install it with `npx skills add onmax/comark-ui`, or bundle it in your own app from `comark-ui/skills/comark-ui/`, which always matches the plugins it installed.
+
+## Linting
+
+[comark-linter](https://comark-ui.onmax.me/lint/) finds `comark-ui` when it's installed and checks documents with its plugins and components.
+
+## License
+
+MIT

package/dist/client-Bjd6VcGQ.mjs

@@ -0,0 +1,241 @@
+import { theme } from "comark-zoom/theme";
+//#region src/script.ts
+/**
+* Starts the Copy image and Copy source buttons of every `.cmm` Mermaid diagram on the page and returns a function that
+* stops them. Every caller shares one set of listeners, which stop with the last caller. The function is
+* self-contained: the HTML renderer inlines its source as a script, so it must not use anything from outside its body.
+*/
+function start() {
+	const running = window.__comarkMermaid;
+	if (running) {
+		running.users++;
+		return running.stop;
+	}
+	const listeners = new AbortController();
+	const signal = listeners.signal;
+	document.documentElement.setAttribute("data-mermaid-ready", "");
+	const links = /* @__PURE__ */ new Set();
+	const PROPERTIES = [
+		"fill",
+		"fill-opacity",
+		"stroke",
+		"stroke-opacity",
+		"stroke-width",
+		"stroke-dasharray",
+		"stroke-linecap",
+		"stroke-linejoin",
+		"opacity",
+		"color",
+		"rx",
+		"ry",
+		"font-family",
+		"font-size",
+		"font-weight",
+		"font-style",
+		"letter-spacing",
+		"text-anchor",
+		"dominant-baseline",
+		"paint-order"
+	];
+	function background(from) {
+		const probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+		for (let at = from; at && probe; at = at.parentElement) {
+			const color = getComputedStyle(at).backgroundColor;
+			probe.clearRect(0, 0, 1, 1);
+			probe.fillStyle = color;
+			probe.fillRect(0, 0, 1, 1);
+			if (probe.getImageData(0, 0, 1, 1).data[3] === 255) return color;
+		}
+		return "#fff";
+	}
+	function png(root) {
+		const svg = root.querySelector(".pele-diagram>svg");
+		if (!svg) return Promise.reject(/* @__PURE__ */ new Error("no diagram"));
+		const width = Number(svg.getAttribute("width")) || svg.viewBox.baseVal.width;
+		const height = Number(svg.getAttribute("height")) || svg.viewBox.baseVal.height;
+		if (!(width > 0 && height > 0)) return Promise.reject(/* @__PURE__ */ new Error("no size"));
+		const copy = svg.cloneNode(true);
+		if (!(copy instanceof SVGSVGElement)) return Promise.reject(/* @__PURE__ */ new Error("no diagram"));
+		const from = [svg, ...svg.querySelectorAll("*")];
+		const to = [copy, ...copy.querySelectorAll("*")];
+		from.forEach((node, index) => {
+			const into = to[index];
+			if (!(into instanceof SVGElement)) return;
+			const style = getComputedStyle(node);
+			for (const property of PROPERTIES) into.style.setProperty(property, style.getPropertyValue(property));
+		});
+		copy.setAttribute("viewBox", `0 0 ${width} ${height}`);
+		copy.setAttribute("width", String(width));
+		copy.setAttribute("height", String(height));
+		copy.style.maxWidth = "none";
+		copy.style.width = `${width}px`;
+		copy.style.height = `${height}px`;
+		const scale = Math.min(2, 4096 / width, 4096 / height);
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.round(width * scale));
+		canvas.height = Math.max(1, Math.round(height * scale));
+		const fill = background(svg.parentElement ?? root);
+		const image = new Image();
+		return new Promise((resolve, reject) => {
+			image.onerror = () => reject(/* @__PURE__ */ new Error("not drawn"));
+			image.onload = () => {
+				const context = canvas.getContext("2d");
+				if (!context) return reject(/* @__PURE__ */ new Error("no canvas"));
+				context.fillStyle = fill;
+				context.fillRect(0, 0, canvas.width, canvas.height);
+				context.drawImage(image, 0, 0, canvas.width, canvas.height);
+				canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("no image")), "image/png");
+			};
+			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(copy))}`;
+		});
+	}
+	const part = (root, selector) => root.querySelector(`:scope>.cmm-bar>${selector}`);
+	function say(root, button, message, state) {
+		const status = part(root, ".cmm-status");
+		if (!status) return;
+		button.setAttribute("data-state", state);
+		status.textContent = message;
+		setTimeout(() => {
+			if (status.textContent !== message) return;
+			button.removeAttribute("data-state");
+			status.textContent = "";
+		}, state === "done" ? 1500 : 6e3);
+	}
+	function copyImage(root, button) {
+		const open = part(root, ".cmm-open");
+		if (open) open.hidden = true;
+		const image = png(root);
+		image.catch(() => {});
+		const clipboard = navigator.clipboard;
+		(clipboard && "ClipboardItem" in window ? clipboard.write([new ClipboardItem({ "image/png": image })]) : Promise.reject(/* @__PURE__ */ new Error("no clipboard"))).then(() => say(root, button, "Image copied", "done"), () => image.then((blob) => {
+			if (!open) return;
+			if (open.href) {
+				URL.revokeObjectURL(open.href);
+				links.delete(open.href);
+			}
+			open.href = URL.createObjectURL(blob);
+			links.add(open.href);
+			open.hidden = false;
+			say(root, button, "Couldn't copy the image. Open the PNG to save it.", "failed");
+		}, () => say(root, button, "Couldn't draw the image. Copy the source instead.", "failed")));
+	}
+	function copySource(root, button) {
+		const source = (root.getAttribute("data-source") ?? "").replace(/\n$/, "");
+		const longest = Math.max(2, ...(source.match(/`+/g) ?? []).map((run) => run.length));
+		const fence = "`".repeat(longest + 1);
+		const markdown = `${fence}mermaid\n${source}\n${fence}`;
+		const shown = root.querySelector(":scope>.cmm-markdown");
+		const failed = () => {
+			const pre = shown ?? document.createElement("pre");
+			pre.className = "cmm-markdown";
+			pre.textContent = markdown;
+			if (!shown) root.append(pre);
+			const range = document.createRange();
+			range.selectNodeContents(pre);
+			const selection = getSelection();
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+			say(root, button, "Couldn't copy, so the source is selected. Press Ctrl+C or ⌘C.", "failed");
+		};
+		const clipboard = navigator.clipboard;
+		if (!clipboard) return failed();
+		clipboard.writeText(markdown).then(() => {
+			shown?.remove();
+			say(root, button, "Source copied", "done");
+		}, failed);
+	}
+	document.addEventListener("click", (event) => {
+		const button = event.target instanceof Element ? event.target.closest(".cmm>.cmm-bar>button") : null;
+		const root = button?.parentElement?.parentElement;
+		if (!button || !root) return;
+		if (button.classList.contains("cmm-image")) copyImage(root, button);
+		else if (button.classList.contains("cmm-source")) copySource(root, button);
+	}, { signal });
+	const state = {
+		users: 1,
+		stop: () => {
+			if (--state.users > 0) return;
+			listeners.abort();
+			for (const link of links) URL.revokeObjectURL(link);
+			document.documentElement.removeAttribute("data-mermaid-ready");
+			window.__comarkMermaid = void 0;
+		}
+	};
+	window.__comarkMermaid = state;
+	return state.stop;
+}
+//#endregion
+//#region src/client.ts
+/**
+* comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
+* `--pele-*` variables, so setting them on the wrapper themes every diagram, light and dark, without drawing it
+* again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
+*/
+const mermaidCss = `@layer comark{${[
+	theme(".cmm,.pele-diagram"),
+	theme(":root"),
+	`:where(:root){--pele-bg:var(--_comark-background);--pele-fg:var(--_comark-foreground);--pele-muted:var(--_comark-muted);--pele-line:var(--_comark-muted);--pele-surface:var(--_comark-accent);--pele-surface-alt:color-mix(in srgb,var(--_comark-accent),var(--_comark-foreground) 6%);--pele-border:var(--_comark-border);--pele-accent:var(--ui-primary,var(--primary,var(--_comark-foreground)));--pele-critical:var(--ui-error,var(--destructive,#dc2626));--pele-error:var(--ui-error,var(--destructive,#dc2626));--pele-font:var(--_comark-font);--pele-radius:calc(var(--_comark-radius) - 4px);--pele-series-1:var(--comark-chart-1,var(--ui-chart-1,var(--chart-1,#3b82f6)));--pele-series-2:var(--comark-chart-2,var(--ui-chart-2,var(--chart-2,#f97316)));--pele-series-3:var(--comark-chart-3,var(--ui-chart-3,var(--chart-3,#10b981)));--pele-series-4:var(--comark-chart-4,var(--ui-chart-4,var(--chart-4,#a855f7)));--pele-series-5:var(--comark-chart-5,var(--ui-chart-5,var(--chart-5,#f43f5e)));--pele-series-6:var(--comark-chart-6,var(--ui-chart-6,var(--chart-6,#eab308)));--pele-series-7:var(--comark-chart-7,var(--ui-chart-7,var(--chart-7,#06b6d4)));--pele-series-8:var(--comark-chart-8,var(--ui-chart-8,var(--chart-8,#ec4899)))}`,
+	".pele-diagram{box-sizing:border-box;margin-block:1.5rem;padding:1rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);text-align:center}",
+	".pele-diagram>svg{min-width:min(28rem,var(--cmm-svg,28rem))}",
+	".pele-source{margin:0;color:var(--_comark-muted);text-align:left}",
+	".cmm{--comark-wide-width:calc(var(--cmm-svg) + 2rem + 2px);--pele-zoom-top:auto;--pele-zoom-bottom:.5rem;position:relative;margin-block:1.5rem}",
+	".cmm>.pele-diagram{margin-block:0}",
+	".cmm-bar{position:absolute;top:.375rem;right:.375rem;z-index:1;display:flex;align-items:center;gap:.125rem;padding:.125rem;border-radius:calc(var(--_comark-radius) - 2px);background:var(--_comark-background);opacity:0;transition:opacity .15s}",
+	"html:not([data-mermaid-ready]) .cmm-bar{display:none}",
+	".cmm:is(:hover,:focus-within)>.cmm-bar,.cmm-bar:has(.cmm-status:not(:empty),.cmm-open:not([hidden])){opacity:1}",
+	"@media (hover:none){.cmm-bar{opacity:1}}",
+	".cmm:has(>.pele-diagram[data-error]) .cmm-image{display:none}",
+	".cmm-bar>button{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:1px solid transparent;border-radius:calc(var(--_comark-radius) - 2px);background:transparent;color:var(--_comark-muted);position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}",
+	"@media (hover:hover){.cmm-bar>button:hover{background:var(--_comark-accent);color:var(--_comark-foreground)}}",
+	"@media (prefers-reduced-motion:no-preference){.cmm-bar>button{transition:background-color .15s ease,color .15s ease,scale .15s ease-out}.cmm-bar>button:active{scale:.96}}",
+	".cmm-bar>button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}",
+	".cmm-bar svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}",
+	".cmm-done,.cmm-bar>[data-state=done] .cmm-idle{display:none}",
+	".cmm-bar>[data-state=done] .cmm-done{display:block}",
+	".cmm-open{padding:0 .375rem;color:var(--_comark-foreground);font:500 .75rem/1.5rem var(--_comark-font);text-decoration:underline;text-underline-offset:2px}",
+	".cmm-open[hidden]{display:none}",
+	".cmm-status{position:absolute;top:calc(100% + .25rem);right:0;width:max-content;max-width:18rem;padding:.25rem .5rem;border-radius:calc(var(--_comark-radius) - 4px);background:var(--_comark-foreground);color:var(--_comark-background);font:.75rem/1.25rem var(--_comark-font);text-align:left;pointer-events:none}",
+	".cmm-status:empty{display:none}",
+	".cmm-markdown{margin:.5rem 0 0;padding:.75rem 1rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-accent);color:var(--_comark-foreground);font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}",
+	".cz-item>.pele-diagram>svg{min-width:0}",
+	"@media print{.pele-diagram{break-inside:avoid}.cmm-bar{display:none}}"
+].join("")}}`;
+/** Sizes Mermaid cards after Pele draws them in Vue, React, and Svelte, and adds the styles to the page once. */
+function addMermaidStyles() {
+	for (const card of document.querySelectorAll(".pele-diagram")) {
+		const svg = card.querySelector(":scope > svg");
+		const width = Number(svg?.getAttribute("width"));
+		const block = card.parentElement?.classList.contains("cmm") ? card.parentElement : card;
+		if (Number.isFinite(width) && width > 0 && !card.querySelector(":scope > .pele-error")) {
+			block.dataset.wide = "";
+			block.style.setProperty("--cmm-svg", `${Math.ceil(width)}px`);
+		} else {
+			delete block.dataset.wide;
+			block.style.removeProperty("--cmm-svg");
+		}
+	}
+	if (document.querySelector("style[data-comark-mermaid]")) return;
+	const style = document.createElement("style");
+	style.dataset.comarkMermaid = "";
+	style.textContent = mermaidCss;
+	document.head.append(style);
+}
+const icon = (name, path) => `<svg class="cmm-${name}" viewBox="0 0 24 24" aria-hidden="true">${path}</svg>`;
+const done = icon("done", "<path d=\"M20 6 9 17l-5-5\"/>");
+/**
+* The inside of a diagram's bar, the same in every renderer: Copy image, Copy source, the link to the PNG for when the
+* clipboard refuses it, and the status line that says whether the copy worked.
+*/
+function mermaidBar() {
+	return `<button type="button" class="cmm-image" aria-label="Copy image" title="Copy image">` + icon("idle", "<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-5-5L5 21\"/>") + `${done}</button><button type="button" class="cmm-source" aria-label="Copy source" title="Copy source">` + icon("idle", "<path d=\"m16 18 6-6-6-6\"/><path d=\"m8 6-6 6 6 6\"/>") + `${done}</button><a class="cmm-open" target="_blank" rel="noopener" hidden>Open PNG</a><span class="cmm-status" role="status"></span>`;
+}
+/**
+* Adds the Mermaid styles and starts the buttons of every diagram on the page, and returns a function that stops them.
+* The Vue, React, and Svelte diagrams call it on mount and stop it on unmount.
+*/
+function startMermaid() {
+	addMermaidStyles();
+	return start();
+}
+//#endregion
+export { start as a, startMermaid as i, mermaidBar as n, mermaidCss as r, addMermaidStyles as t };

package/dist/client.d.mts

@@ -0,0 +1,22 @@
+import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
+//#region src/client.d.ts
+/**
+ * comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
+ * `--pele-*` variables, so setting them on the wrapper themes every diagram, light and dark, without drawing it
+ * again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
+ */
+export declare const mermaidCss: string;
+/** Sizes Mermaid cards after Pele draws them in Vue, React, and Svelte, and adds the styles to the page once. */
+export declare function addMermaidStyles(): void;
+/**
+ * The inside of a diagram's bar, the same in every renderer: Copy image, Copy source, the link to the PNG for when the
+ * clipboard refuses it, and the status line that says whether the copy worked.
+ */
+export declare function mermaidBar(): string;
+/**
+ * Adds the Mermaid styles and starts the buttons of every diagram on the page, and returns a function that stops them.
+ * The Vue, React, and Svelte diagrams call it on mount and stop it on unmount.
+ */
+export declare function startMermaid(): () => void;
+//#endregion
+export { typesetCss };

package/dist/client.mjs

@@ -0,0 +1,3 @@
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
+import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };