comark-code-notes 0.7.6 → 0.8.1

package/README.md

@@ -37,7 +37,7 @@ The plugin adds every problem to `meta.issues`, so a host can reject a document
 
 | Renderer | Import |
 | --- | --- |
-| `@comark/html` | `comark-code-notes/html`: the styles are inlined once per document |
+| `@comark/html` | `comark-code-notes/html`: the styles are inlined |
 | `@comark/vue` | `comark-code-notes/vue` |
 | `@comark/react` | `comark-code-notes/react` |
 | `@comark/svelte` | `comark-code-notes/svelte` |

package/dist/client-Cl1M_Rli.mjs

@@ -0,0 +1,20 @@
+import { t as css } from "./styles-BsMSqaDf.mjs";
+//#region ../../shared/styles.ts
+/**
+* Adds a package's styles to the page once, unless the page already carries them as a `style` or a `link` with
+* `data-comark-<name>`, which is how the HTML renderer inlines them and how an app that imports `style.css` marks them.
+*/
+function addStyles$1(name, css) {
+	const attribute = `data-comark-${name}`;
+	if (document.querySelector(`style[${attribute}],link[${attribute}]`)) return;
+	const style = document.createElement("style");
+	style.setAttribute(attribute, "");
+	style.textContent = css;
+	document.head.append(style);
+}
+//#endregion
+//#region src/client.ts
+/** Adds the code notes styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+const addStyles = () => addStyles$1("code-notes", css);
+//#endregion
+export { addStyles as t };

package/dist/client.d.mts

@@ -1,7 +1,6 @@
 //#region src/styles.d.ts
 /**
- * Round numbered markers at the ends of lines and before each note, as a soft tint of shadcn/ui's `--primary` when the
- * page has it, or of the foreground otherwise, with the number in that color, on the shared `--comark-*` tokens.
+ * Round numbered markers at the ends of lines and before each note, as a soft tint of the primary color, with the number in that color, on the shared `--comark-*` tokens.
  * Override `--cn-marker` and `--cn-marker-text`. The number is drawn by CSS, so copying the code never takes it along.
  * The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
  */
@@ -9,5 +8,5 @@ export declare const css: string;
 //#endregion
 //#region src/client.d.ts
 /** Adds the code notes styles to the page once. The Vue, React, and Svelte components call it when they mount. */
-export declare function addStyles(): void;
+export declare const addStyles: () => void;
 //#endregion

package/dist/client.mjs

@@ -1,12 +1,3 @@
-import { t as css } from "./styles-zxOi3Y7k.mjs";
-//#region src/client.ts
-/** Adds the code notes styles to the page once. The Vue, React, and Svelte components call it when they mount. */
-function addStyles() {
-	if (document.querySelector("style[data-comark-code-notes]")) return;
-	const style = document.createElement("style");
-	style.dataset.comarkCodeNotes = "";
-	style.textContent = css;
-	document.head.append(style);
-}
-//#endregion
+import { t as css } from "./styles-BsMSqaDf.mjs";
+import { t as addStyles } from "./client-Cl1M_Rli.mjs";
 export { addStyles, css };

package/dist/html.mjs

@@ -1,5 +1,5 @@
-import src_default, { NOTES_TAG } from "./index.mjs";
-import { t as css } from "./styles-zxOi3Y7k.mjs";
+import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
+import { t as css } from "./styles-BsMSqaDf.mjs";
 //#region src/html.ts
 const styled = /* @__PURE__ */ new WeakSet();
 const notes = async ([, attrs, ...children], state) => {

package/dist/index.mjs

@@ -1,213 +1 @@
-import { defineComarkPlugin } from "comark";
-//#region src/index.ts
-/** The node the numbered list after an annotated fence becomes. Each item starts with its marker, linking back. */
-const NOTES_TAG = "code-notes";
-const MARKERS = String.raw`<\d+>(?:\s*<\d+>)*`;
-const ALONE = new RegExp(String.raw`\s*(?:(?://|#|--|;|%)\s*(${MARKERS})|(?:/\*|<!--)\s*(${MARKERS})\s*(?:\*/|-->))\s*$`);
-const AFTER_WORDS = new RegExp(String.raw`((?://|#|--|;|%).*?\S)\s+(${MARKERS})\s*$`);
-const BLOCK_WORDS = new RegExp(String.raw`^(.*?)(/\*|<!--)(.*?)\s+(${MARKERS})\s*(\*/|-->)\s*$`);
-const MARKDOWN = /* @__PURE__ */ new Set([
-	"md",
-	"mdc",
-	"markdown",
-	"comark"
-]);
-const isElement = (node) => Array.isArray(node) && node[0] !== null;
-const childrenOf = ([, , ...rest]) => rest;
-const textOf = (node) => !Array.isArray(node) ? node : isElement(node) ? childrenOf(node).map(textOf).join("") : "";
-const numbers = (markers) => [...markers.matchAll(/\d+/g)].map(([digits]) => Number(digits));
-function hash(text) {
-	let value = 2166136261;
-	for (let at = 0; at < text.length; at++) value = Math.imul(value ^ text.charCodeAt(at), 16777619);
-	return (value >>> 0).toString(36);
-}
-/** Strips the markers off each line, and says where they were. */
-function strip(content) {
-	const markers = /* @__PURE__ */ new Map();
-	return {
-		code: content.split("\n").map((line, index) => {
-			const alone = ALONE.exec(line);
-			if (alone) {
-				markers.set(index, numbers(alone[1] ?? alone[2] ?? ""));
-				return line.slice(0, alone.index);
-			}
-			const block = BLOCK_WORDS.exec(line);
-			if (block) {
-				markers.set(index, numbers(block[4] ?? ""));
-				return `${block[1] ?? ""}${block[2] ?? ""}${(block[3] ?? "").trimEnd()} ${block[5] ?? ""}`;
-			}
-			const words = AFTER_WORDS.exec(line);
-			if (!words) return line;
-			markers.set(index, numbers(words[2] ?? ""));
-			return line.slice(0, words.index) + (words[1] ?? "");
-		}).join("\n"),
-		markers
-	};
-}
-/**
-* Takes the markers out of every fence a numbered list follows, before any plugin's `post`, so Shiki highlights the
-* code without them in any plugin order.
-*/
-function read(tokens) {
-	const fences = [];
-	let count = 0;
-	for (const [index, token] of tokens.entries()) {
-		if (token.type !== "fence") continue;
-		count++;
-		const language = token.info.trim().split(/[\s[{]/, 1)[0] ?? "";
-		if (MARKDOWN.has(language.toLowerCase())) continue;
-		const { code, markers } = strip(token.content);
-		if (!markers.size) continue;
-		const name = `The \`\`\`${language} fence ${count}`;
-		const notes = tokens[index + 1]?.type === "ordered_list_open";
-		if (notes) token.content = code;
-		fences.push({
-			name,
-			code: (notes ? code : token.content).replace(/\n+$/, ""),
-			markers,
-			notes,
-			order: count
-		});
-	}
-	return fences;
-}
-const link = (note, uid, first) => ["a", {
-	class: "cn-marker",
-	href: `#${uid}-${note}`,
-	...first && { id: `${uid}-${note}-ref` },
-	"data-note": String(note),
-	"aria-label": `Note ${note}`
-}];
-const marker = (note, uid, first, known) => known.has(note) ? link(note, uid, first) : ["span", {
-	class: "cn-marker",
-	"data-note": String(note)
-}];
-/** Adds each line's markers to its end, in Shiki's line spans or in the plain code. */
-function draw(code, fence, uid, known) {
-	const seen = /* @__PURE__ */ new Set();
-	const markersOf = (line) => (fence.markers.get(line) ?? []).map((note) => {
-		const first = !seen.has(note);
-		seen.add(note);
-		return marker(note, uid, first, known);
-	});
-	const lines = childrenOf(code).filter((child) => isElement(child) && child[0] === "span");
-	if (lines.length) {
-		for (const [index, line] of lines.entries()) line.push(...markersOf(index));
-		return;
-	}
-	const drawn = textOf(code).split("\n").flatMap((line, index) => [...index ? ["\n"] : [], [
-		"span",
-		{ class: "line" },
-		line,
-		...markersOf(index)
-	]]);
-	code.splice(2, code.length - 2, ...drawn);
-}
-/** A list's items, with the note number each one holds. */
-function itemsOf(list) {
-	const start = Number(list[1].start ?? 1) || 1;
-	return childrenOf(list).filter((child) => isElement(child) && child[0] === "li").map((item, index) => ({
-		item,
-		note: start + index
-	}));
-}
-function notesOf(list, fence, uid, issues) {
-	const start = Number(list[1].start ?? 1) || 1;
-	const items = itemsOf(list);
-	const used = new Set([...fence.markers.values()].flat());
-	const known = new Set(items.map(({ note }) => note));
-	for (const note of [...used].sort((a, b) => a - b)) if (!known.has(note)) issues.push({
-		rule: "comark/code-notes/marker-without-note",
-		message: `${fence.name}: marker <${note}> has no note, since the list after it ${items.length === 1 ? "has 1 item" : `has ${items.length} items`}. Add its note, or remove the marker.`
-	});
-	for (const note of known) if (!used.has(note)) issues.push({
-		rule: "comark/code-notes/note-without-marker",
-		message: `${fence.name}: note ${note} has no <${note}> marker in the code. Add \`// <${note}>\` at the end of its line, in the language's comment.`
-	});
-	return [
-		NOTES_TAG,
-		start === 1 ? {} : { start },
-		...items.map(({ item, note }) => {
-			return [
-				"li",
-				{ id: `${uid}-${note}` },
-				used.has(note) ? ["a", {
-					class: "cn-marker",
-					href: `#${uid}-${note}-ref`,
-					"data-note": String(note),
-					"aria-label": `Back to marker ${note}`
-				}] : ["span", {
-					class: "cn-marker",
-					"data-note": String(note)
-				}],
-				[
-					"div",
-					{},
-					...childrenOf(item)
-				]
-			];
-		})
-	];
-}
-/**
-* Turns `// <1>` at the end of a line in a fence, in the language's comment, into a numbered marker, and the numbered
-* list right after the fence into its notes, each linked to its marker and back. Markers are stripped before Shiki
-* highlights the code and drawn into its lines after, so put this plugin after Comark's `shiki` in `plugins`.
-* Problems are added to `meta.issues`.
-*/
-var src_default = defineComarkPlugin(() => {
-	const parses = /* @__PURE__ */ new WeakMap();
-	return {
-		name: "comark-code-notes",
-		markdownItPost(state) {
-			parses.set(state, read(state.tokens));
-		},
-		post(state) {
-			const fences = parses.get(state) ?? [];
-			const { tree } = state;
-			const issues = [];
-			const names = (state.options.plugins ?? []).map((plugin) => plugin.name);
-			const shikiLater = names.indexOf("shiki") > names.indexOf("comark-code-notes");
-			let preOrder = 0;
-			const walk = (nodes, start) => {
-				for (let index = start; index < nodes.length; index++) {
-					const node = nodes[index];
-					if (!node || !isElement(node)) continue;
-					if (node[0] !== "pre") {
-						walk(node, 2);
-						continue;
-					}
-					preOrder++;
-					const fence = fences.find((candidate) => candidate.order === preOrder);
-					if (!fence || !fence.markers.size) continue;
-					if (!fence.notes) {
-						issues.push({
-							rule: "comark/code-notes/missing-notes",
-							message: `${fence.name} has markers like \`<1>\` but no numbered list right after it, so they stay in the code. Write the notes as a numbered list right after the fence.`
-						});
-						continue;
-					}
-					const next = nodes.findIndex((child, after) => after > index && isElement(child));
-					const list = nodes[next];
-					const code = childrenOf(node).find((child) => isElement(child) && child[0] === "code");
-					if (!list || !isElement(list) || list[0] !== "ol" || !code) continue;
-					const uid = `cn-${hash(`${fence.name}\n${fence.code}`)}`;
-					draw(code, fence, uid, new Set(itemsOf(list).map(({ note }) => note)));
-					nodes[next] = notesOf(list, fence, uid, issues);
-				}
-			};
-			walk(tree.nodes, 0);
-			if (shikiLater && fences.some((fence) => fence.notes)) issues.push({
-				rule: "comark/code-notes/shiki-order",
-				message: "Code notes: `shiki` comes after `comark-code-notes` in `plugins`, so the annotated code isn't highlighted. Put the code notes plugin after `shiki`."
-			});
-			tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map((issue) => issue.message)];
-			tree.meta.issueRules = {
-				...tree.meta.issueRules,
-				...Object.fromEntries(issues.map((issue) => [issue.message, issue.rule]))
-			};
-		}
-	};
-});
-//#endregion
-export { NOTES_TAG, src_default as default };
+export { t as NOTES_TAG, n as default } from "./src-JYXNZqY7.mjs";

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import src_default, { NOTES_TAG } from "./index.mjs";
-import { addStyles } from "./client.mjs";
+import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
+import { t as addStyles } from "./client-Cl1M_Rli.mjs";
 import { createElement, useEffect } from "react";
 //#region src/react.ts
 /** The notes under an annotated fence, for `@comark/react`. */

package/dist/src-JYXNZqY7.mjs

@@ -0,0 +1,218 @@
+import { defineComarkPlugin } from "comark";
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
+//#region ../../shared/text.ts
+/** FNV-1a, in base 36: short, and the same every time the same text is hashed, so ids derived from it are stable. */
+function hash(source) {
+	let value = 2166136261;
+	for (let at = 0; at < source.length; at++) value = Math.imul(value ^ source.charCodeAt(at), 16777619);
+	return (value >>> 0).toString(36);
+}
+//#endregion
+//#region src/index.ts
+/** The node the numbered list after an annotated fence becomes. Each item starts with its marker, linking back. */
+const NOTES_TAG = "code-notes";
+const MARKERS = String.raw`<\d+>(?:\s*<\d+>)*`;
+const ALONE = new RegExp(String.raw`\s*(?:(?://|#|--|;|%)\s*(${MARKERS})|(?:/\*|<!--)\s*(${MARKERS})\s*(?:\*/|-->))\s*$`);
+const AFTER_WORDS = new RegExp(String.raw`((?://|#|--|;|%).*?\S)\s+(${MARKERS})\s*$`);
+const BLOCK_WORDS = new RegExp(String.raw`^(.*?)(/\*|<!--)(.*?)\s+(${MARKERS})\s*(\*/|-->)\s*$`);
+const MARKDOWN = /* @__PURE__ */ new Set([
+	"md",
+	"mdc",
+	"markdown",
+	"comark"
+]);
+const textOf = (node) => !Array.isArray(node) ? node : isElement(node) ? childrenOf(node).map(textOf).join("") : "";
+const numbers = (markers) => [...markers.matchAll(/\d+/g)].map(([digits]) => Number(digits));
+/** Strips the markers off each line, and says where they were. */
+function strip(content) {
+	const markers = /* @__PURE__ */ new Map();
+	return {
+		code: content.split("\n").map((line, index) => {
+			const alone = ALONE.exec(line);
+			if (alone) {
+				markers.set(index, numbers(alone[1] ?? alone[2] ?? ""));
+				return line.slice(0, alone.index);
+			}
+			const block = BLOCK_WORDS.exec(line);
+			if (block) {
+				markers.set(index, numbers(block[4] ?? ""));
+				return `${block[1] ?? ""}${block[2] ?? ""}${(block[3] ?? "").trimEnd()} ${block[5] ?? ""}`;
+			}
+			const words = AFTER_WORDS.exec(line);
+			if (!words) return line;
+			markers.set(index, numbers(words[2] ?? ""));
+			return line.slice(0, words.index) + (words[1] ?? "");
+		}).join("\n"),
+		markers
+	};
+}
+/**
+* Takes the markers out of every fence a numbered list follows, before any plugin's `post`, so Shiki highlights the
+* code without them in any plugin order.
+*/
+function read(tokens) {
+	const fences = [];
+	let count = 0;
+	for (const [index, token] of tokens.entries()) {
+		if (token.type !== "fence") continue;
+		count++;
+		const language = token.info.trim().split(/[\s[{]/, 1)[0] ?? "";
+		if (MARKDOWN.has(language.toLowerCase())) continue;
+		const { code, markers } = strip(token.content);
+		if (!markers.size) continue;
+		const name = `The \`\`\`${language} fence ${count}`;
+		const notes = tokens[index + 1]?.type === "ordered_list_open";
+		if (notes) token.content = code;
+		fences.push({
+			name,
+			code: (notes ? code : token.content).replace(/\n+$/, ""),
+			markers,
+			notes,
+			order: count
+		});
+	}
+	return fences;
+}
+const link = (note, uid, first) => ["a", {
+	class: "cn-marker",
+	href: `#${uid}-${note}`,
+	...first && { id: `${uid}-${note}-ref` },
+	"data-note": String(note),
+	"aria-label": `Note ${note}`
+}];
+const marker = (note, uid, first, known) => known.has(note) ? link(note, uid, first) : ["span", {
+	class: "cn-marker",
+	"data-note": String(note)
+}];
+/** Adds each line's markers to its end, in Shiki's line spans or in the plain code. */
+function draw(code, fence, uid, known) {
+	const seen = /* @__PURE__ */ new Set();
+	const markersOf = (line) => (fence.markers.get(line) ?? []).map((note) => {
+		const first = !seen.has(note);
+		seen.add(note);
+		return marker(note, uid, first, known);
+	});
+	const lines = childrenOf(code).filter((child) => isElement(child) && child[0] === "span");
+	if (lines.length) {
+		for (const [index, line] of lines.entries()) line.push(...markersOf(index));
+		return;
+	}
+	const drawn = textOf(code).split("\n").flatMap((line, index) => [...index ? ["\n"] : [], [
+		"span",
+		{ class: "line" },
+		line,
+		...markersOf(index)
+	]]);
+	code.splice(2, code.length - 2, ...drawn);
+}
+/** A list's items, with the note number each one holds. */
+function itemsOf(list) {
+	const start = Number(list[1].start ?? 1) || 1;
+	return childrenOf(list).filter((child) => isElement(child) && child[0] === "li").map((item, index) => ({
+		item,
+		note: start + index
+	}));
+}
+function notesOf(list, fence, uid, issues) {
+	const start = Number(list[1].start ?? 1) || 1;
+	const items = itemsOf(list);
+	const used = new Set([...fence.markers.values()].flat());
+	const known = new Set(items.map(({ note }) => note));
+	for (const note of [...used].sort((a, b) => a - b)) if (!known.has(note)) issues.push({
+		rule: "comark/code-notes/marker-without-note",
+		message: `${fence.name}: marker <${note}> has no note, since the list after it ${items.length === 1 ? "has 1 item" : `has ${items.length} items`}. Add its note, or remove the marker.`
+	});
+	for (const note of known) if (!used.has(note)) issues.push({
+		rule: "comark/code-notes/note-without-marker",
+		message: `${fence.name}: note ${note} has no <${note}> marker in the code. Add \`// <${note}>\` at the end of its line, in the language's comment.`
+	});
+	return [
+		NOTES_TAG,
+		start === 1 ? {} : { start },
+		...items.map(({ item, note }) => {
+			return [
+				"li",
+				{ id: `${uid}-${note}` },
+				used.has(note) ? ["a", {
+					class: "cn-marker",
+					href: `#${uid}-${note}-ref`,
+					"data-note": String(note),
+					"aria-label": `Back to marker ${note}`
+				}] : ["span", {
+					class: "cn-marker",
+					"data-note": String(note)
+				}],
+				[
+					"div",
+					{},
+					...childrenOf(item)
+				]
+			];
+		})
+	];
+}
+/**
+* Turns `// <1>` at the end of a line in a fence, in the language's comment, into a numbered marker, and the numbered
+* list right after the fence into its notes, each linked to its marker and back. Markers are stripped before Shiki
+* highlights the code and drawn into its lines after, so put this plugin after Comark's `shiki` in `plugins`.
+* Problems are added to `meta.issues`.
+*/
+var src_default = defineComarkPlugin(() => {
+	const parses = /* @__PURE__ */ new WeakMap();
+	return {
+		name: "comark-code-notes",
+		markdownItPost(state) {
+			parses.set(state, read(state.tokens));
+		},
+		post(state) {
+			const fences = parses.get(state) ?? [];
+			const { tree } = state;
+			const issues = [];
+			const names = (state.options.plugins ?? []).map((plugin) => plugin.name);
+			const shikiLater = names.indexOf("shiki") > names.indexOf("comark-code-notes");
+			let preOrder = 0;
+			const walk = (nodes, start) => {
+				for (let index = start; index < nodes.length; index++) {
+					const node = nodes[index];
+					if (!node || !isElement(node)) continue;
+					if (node[0] !== "pre") {
+						walk(node, 2);
+						continue;
+					}
+					preOrder++;
+					const fence = fences.find((candidate) => candidate.order === preOrder);
+					if (!fence || !fence.markers.size) continue;
+					if (!fence.notes) {
+						issues.push({
+							rule: "comark/code-notes/missing-notes",
+							message: `${fence.name} has markers like \`<1>\` but no numbered list right after it, so they stay in the code. Write the notes as a numbered list right after the fence.`
+						});
+						continue;
+					}
+					const next = nodes.findIndex((child, after) => after > index && isElement(child));
+					const list = nodes[next];
+					const code = childrenOf(node).find((child) => isElement(child) && child[0] === "code");
+					if (!list || !isElement(list) || list[0] !== "ol" || !code) continue;
+					const uid = `cn-${hash(`${fence.name}\n${fence.code}`)}`;
+					draw(code, fence, uid, new Set(itemsOf(list).map(({ note }) => note)));
+					nodes[next] = notesOf(list, fence, uid, issues);
+				}
+			};
+			walk(tree.nodes, 0);
+			if (shikiLater && fences.some((fence) => fence.notes)) issues.push({
+				rule: "comark/code-notes/shiki-order",
+				message: "Code notes: `shiki` comes after `comark-code-notes` in `plugins`, so the annotated code isn't highlighted. Put the code notes plugin after `shiki`."
+			});
+			tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map((issue) => issue.message)];
+			tree.meta.issueRules = {
+				...tree.meta.issueRules,
+				...Object.fromEntries(issues.map((issue) => [issue.message, issue.rule]))
+			};
+		}
+	};
+});
+//#endregion
+export { src_default as n, NOTES_TAG as t };

package/dist/style.css

@@ -1 +1 @@
-@layer comark{:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.cn-marker){--cn-marker:var(--primary,var(--_comark-foreground));--cn-marker-text:var(--cn-marker)}.cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}.cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}.cn-marker::after{content:attr(data-note)}a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}.line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,var(--primary,currentColor)) 14%,transparent) 0 0) fill 0//.25em 100vw}.cn-notes{margin:.75rem 0 1.5rem}.cn-notes{padding:0!important;list-style:none!important}.cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}.cn-notes>li>.cn-marker{margin:0}.cn-notes>li>div>:first-child{margin-top:0!important}.cn-notes>li>div>:last-child{margin-bottom:0!important}.cn-notes>li:target{background:var(--_comark-accent)}}
+@layer comark{:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cn-marker,.cn-notes){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:where(.cn-marker){--cn-marker:var(--_comark-primary);--cn-marker-text:var(--cn-marker)}.cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:9999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}.cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}.cn-marker::after{content:attr(data-note)}a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}.line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,currentColor) 14%,transparent) 0 0) fill 0//.25em 100vw}.cn-notes{margin:.75rem 0 1.5rem}.cn-notes{padding:0!important;list-style:none!important}.cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}.cn-notes>li>.cn-marker{margin:0}.cn-notes>li>div>:first-child{margin-top:0!important}.cn-notes>li>div>:last-child{margin-bottom:0!important}.cn-notes>li:target{background:var(--_comark-accent)}}

package/dist/styles-BsMSqaDf.mjs

@@ -0,0 +1,157 @@
+//#region ../zoom/dist/theme.mjs
+const tokens = [
+	[
+		"background",
+		"ui-bg",
+		"background",
+		"#fff",
+		"#0a0a0a"
+	],
+	[
+		"foreground",
+		"ui-text-highlighted",
+		"foreground",
+		"#0a0a0a",
+		"#fafafa"
+	],
+	[
+		"muted",
+		"ui-text-muted",
+		"muted-foreground",
+		"#737373",
+		"#a1a1a1"
+	],
+	[
+		"border",
+		"ui-border",
+		"border",
+		"#e5e5e5",
+		"rgb(255 255 255/.1)"
+	],
+	[
+		"accent",
+		"ui-bg-elevated",
+		"accent",
+		"#f5f5f5",
+		"#262626"
+	],
+	[
+		"ring",
+		"ui-primary",
+		"ring",
+		"#a1a1a1",
+		"#737373"
+	]
+];
+const groups = {
+	status: Object.values({
+		success: [
+			"success",
+			"ui-success",
+			"success",
+			"#259f56",
+			"#59d38c"
+		],
+		danger: [
+			"danger",
+			"ui-error",
+			"destructive",
+			"#ee3533",
+			"#fd736d"
+		],
+		warning: [
+			"warning",
+			"ui-warning",
+			"",
+			"#d97706",
+			"#fbbf24"
+		],
+		info: [
+			"info",
+			"ui-info",
+			"",
+			"#2563eb",
+			"#60a5fa"
+		]
+	}),
+	primary: [
+		[
+			"primary",
+			"ui-primary",
+			"primary",
+			"var(--_comark-foreground)",
+			"var(--_comark-foreground)"
+		],
+		[
+			"primary-foreground",
+			"ui-text-inverted",
+			"primary-foreground",
+			"var(--_comark-background)",
+			"var(--_comark-background)"
+		],
+		[
+			"secondary",
+			"ui-secondary",
+			"",
+			"var(--_comark-muted)",
+			"var(--_comark-muted)"
+		]
+	],
+	shadow: [[
+		"shadow",
+		"",
+		"",
+		"0 4px 12px rgb(0 0 0/.12)",
+		"0 4px 12px rgb(0 0 0/.5)"
+	]]
+};
+const chain = (token, scheme) => {
+	const shadcn = token[2] ? `var(--${token[2]},${token[scheme]})` : token[scheme];
+	const nuxt = token[1] ? `var(--${token[1]},${shadcn})` : shadcn;
+	return `var(--comark-${token[0]},${nuxt})`;
+};
+const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${chain(token, scheme)}`).join(";");
+/**
+* Resolves the `--comark-*` tokens on `selector`, falling back to Nuxt UI's variables, then shadcn/ui's, then shadcn's
+* neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back.
+* They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
+* `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
+*
+* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
+* `"primary"` for `--comark-primary`, `-primary-foreground`, and `-secondary`, and `"shadow"` for `--comark-shadow`, so
+* a block that never draws them doesn't carry them.
+*/
+function theme(selector, ...extras) {
+	const where = `:where(${selector})`;
+	const added = extras.flatMap((name) => groups[name]);
+	const list = [...tokens, ...added];
+	const schemed = added.filter((token) => token[3] !== token[4]);
+	const classes = schemed.length ? `:where(.light,.light *)${where}{${resolve(schemed, 3)}}:where(.dark,.dark *)${where}{${resolve(schemed, 4)}}` : "";
+	return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(list, 4)}}}` + classes;
+}
+//#endregion
+//#region src/styles.ts
+/**
+* Round numbered markers at the ends of lines and before each note, as a soft tint of the primary color, with the number in that color, on the shared `--comark-*` tokens.
+* Override `--cn-marker` and `--cn-marker-text`. The number is drawn by CSS, so copying the code never takes it along.
+* The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
+*/
+const css = `@layer comark{${[
+	theme(".cn-marker,.cn-notes", "primary"),
+	":where(.cn-marker){--cn-marker:var(--_comark-primary);--cn-marker-text:var(--cn-marker)}",
+	".cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:9999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}",
+	".cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}",
+	".cn-marker::after{content:attr(data-note)}",
+	"a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}",
+	"a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}",
+	".cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}",
+	".line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,currentColor) 14%,transparent) 0 0) fill 0//.25em 100vw}",
+	".cn-notes{margin:.75rem 0 1.5rem}",
+	".cn-notes{padding:0!important;list-style:none!important}",
+	".cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}",
+	".cn-notes>li>.cn-marker{margin:0}",
+	".cn-notes>li>div>:first-child{margin-top:0!important}.cn-notes>li>div>:last-child{margin-bottom:0!important}",
+	".cn-notes>li:target{background:var(--_comark-accent)}"
+].join("")}}`;
+//#endregion
+export { css as t };

package/dist/vue.mjs

@@ -1,5 +1,5 @@
-import src_default, { NOTES_TAG } from "./index.mjs";
-import { addStyles } from "./client.mjs";
+import { n as src_default, t as NOTES_TAG } from "./src-JYXNZqY7.mjs";
+import { t as addStyles } from "./client-Cl1M_Rli.mjs";
 import { defineComponent, h, onMounted } from "vue";
 //#region src/vue.ts
 /** The notes under an annotated fence, for `@comark/vue`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-code-notes",
-  "version": "0.7.6",
+  "version": "0.8.1",
   "description": "Numbered notes on lines of code: a // <1> marker in a fence links to the numbered list after it. A Comark plugin.",
   "keywords": [
     "annotations",
@@ -57,7 +57,7 @@
     "react-dom": "^19.3.1",
     "svelte": "^5.57.2",
     "vue": "^3.5.44",
-    "comark-zoom": "0.7.6"
+    "comark-zoom": "0.8.1"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",

package/dist/styles-zxOi3Y7k.mjs

@@ -1,83 +0,0 @@
-//#region ../zoom/dist/theme.mjs
-const tokens = [
-	[
-		"background",
-		"ui-bg",
-		"background",
-		"#fff",
-		"#0a0a0a"
-	],
-	[
-		"foreground",
-		"ui-text-highlighted",
-		"foreground",
-		"#0a0a0a",
-		"#fafafa"
-	],
-	[
-		"muted",
-		"ui-text-muted",
-		"muted-foreground",
-		"#737373",
-		"#a1a1a1"
-	],
-	[
-		"border",
-		"ui-border",
-		"border",
-		"#e5e5e5",
-		"rgb(255 255 255/.1)"
-	],
-	[
-		"accent",
-		"ui-bg-elevated",
-		"accent",
-		"#f5f5f5",
-		"#262626"
-	],
-	[
-		"ring",
-		"ui-primary",
-		"ring",
-		"#a1a1a1",
-		"#737373"
-	]
-];
-const resolve = (scheme) => tokens.map((token) => `--_comark-${token[0]}:var(--comark-${token[0]},var(--${token[1]},var(--${token[2]},${token[scheme]})))`).join(";");
-/**
-* Resolves the `--comark-*` tokens on `selector`, falling back to Nuxt UI's variables, then shadcn/ui's, then shadcn's
-* neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back.
-* They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
-* `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
-*/
-function theme(selector) {
-	const where = `:where(${selector})`;
-	return `${where}{${resolve(3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(4)}}}`;
-}
-//#endregion
-//#region src/styles.ts
-/**
-* Round numbered markers at the ends of lines and before each note, as a soft tint of shadcn/ui's `--primary` when the
-* page has it, or of the foreground otherwise, with the number in that color, on the shared `--comark-*` tokens.
-* Override `--cn-marker` and `--cn-marker-text`. The number is drawn by CSS, so copying the code never takes it along.
-* The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
-*/
-const css = `@layer comark{${[
-	theme(".cn-marker,.cn-notes"),
-	":where(.cn-marker){--cn-marker:var(--primary,var(--_comark-foreground));--cn-marker-text:var(--cn-marker)}",
-	".cn-marker{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.25rem;height:1.25rem;margin-inline-start:.5rem;padding:0 .3rem;border-radius:999px;background:color-mix(in srgb,var(--cn-marker) 10%,var(--_comark-background));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-marker) 22%,transparent);font:600 .6875rem/1 var(--_comark-font);font-variant-numeric:tabular-nums;vertical-align:.0625rem;user-select:none;transition:background-color .15s}",
-	".cn-marker{color:var(--cn-marker-text)!important;text-decoration:none!important;border:0!important}",
-	".cn-marker::after{content:attr(data-note)}",
-	"a.cn-marker:hover{background:color-mix(in srgb,var(--cn-marker) 18%,var(--_comark-background))}",
-	"a.cn-marker:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}",
-	".cn-marker:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 60%,transparent)}",
-	".line:has(>.cn-marker:is(:target,:focus)){border-image:conic-gradient(color-mix(in srgb,var(--cn-marker,var(--primary,currentColor)) 14%,transparent) 0 0) fill 0//.25em 100vw}",
-	".cn-notes{margin:.75rem 0 1.5rem}",
-	".cn-notes{padding:0!important;list-style:none!important}",
-	".cn-notes>li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.625rem;margin:.375rem 0;padding:.125rem .375rem;border-radius:calc(var(--_comark-radius) - 4px)}",
-	".cn-notes>li>.cn-marker{margin:0}",
-	".cn-notes>li>div>:first-child{margin-top:0!important}.cn-notes>li>div>:last-child{margin-bottom:0!important}",
-	".cn-notes>li:target{background:var(--_comark-accent)}"
-].join("")}}`;
-//#endregion
-export { css as t };