comark-ui 0.7.1 → 0.7.4

package/README.md

@@ -50,7 +50,7 @@ Vue, React, and Svelte leave out annotate and diff, which render only to HTML.
 
 | 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. |
+| `ComarkKit` | The schema: StarterKit, task lists, inline images (drawn as players for video and audio), tables, footnotes, definition lists, CriticMarkup, 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. |
@@ -60,7 +60,7 @@ Vue, React, and Svelte leave out annotate and diff, which render only to HTML.
 
 ## 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.
+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 `vp dlx skills add onmax/comark-ui`, link it from `node_modules` with `vp dlx skills experimental_sync` (experimental), or bundle it in your own app from `comark-ui/skills/comark-ui/`, which always matches the plugins it installed. `vp` comes with [Vite+](https://viteplus.dev/guide/global-cli); without it, `pnpm dlx` takes the same arguments.
 
 ## Linting
 

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

@@ -6,7 +6,17 @@ import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
  * again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
  */
 export declare const mermaidCss: string;
-/** Adds the Mermaid styles to the page once. The Vue, React, and Svelte diagrams call it when Pele draws them. */
+/** 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

@@ -1,26 +1,3 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
-import { theme } from "comark-zoom/theme";
-//#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(".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{margin:1.5rem 0;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-source{margin:0;color:var(--_comark-muted);text-align:left}",
-	"@media print{.pele-diagram{break-inside:avoid}}"
-].join("")}}`;
-/** Adds the Mermaid styles to the page once. The Vue, React, and Svelte diagrams call it when Pele draws them. */
-function addMermaidStyles() {
-	if (document.querySelector("style[data-comark-mermaid]")) return;
-	const style = document.createElement("style");
-	style.dataset.comarkMermaid = "";
-	style.textContent = mermaidCss;
-	document.head.append(style);
-}
-//#endregion
-export { addMermaidStyles, mermaidCss, typesetCss };
+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 };