comark-ui 0.7.6 → 0.8.0

package/README.md

@@ -5,7 +5,7 @@
 [![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.
+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.
 
 ```sh
 pnpm add comark @comark/html comark-ui
@@ -53,7 +53,7 @@ Vue, React, and Svelte leave out annotate and diff, which render only to HTML.
 | `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. |
+| `Upload` | Uploads pasted and dropped files. Each shows a placeholder with its progress until `upload(file, progress)` returns its URL. |
 | `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.

package/dist/{client-Bjd6VcGQ.mjs → client-BhzMlpun.mjs}

@@ -165,6 +165,20 @@ function start() {
 	return state.stop;
 }
 //#endregion
+//#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(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
 /**
 * comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
@@ -173,8 +187,8 @@ function start() {
 */
 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)))}`,
+	theme(":root", "status"),
+	`: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(--_comark-danger);--pele-error:var(--_comark-danger);--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}",
@@ -214,11 +228,7 @@ function addMermaidStyles() {
 			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);
+	addStyles("mermaid", mermaidCss);
 }
 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\"/>");

package/dist/client.mjs

@@ -1,3 +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";
+import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-BhzMlpun.mjs";
 export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };

package/dist/{editor-DmxNPK7K.mjs → editor-ASZBrUYa.mjs}

@@ -1,3 +1,4 @@
+import { n as scalar } from "./text-D8j9clg3.mjs";
 import cjk from "comark-cjk";
 import critic from "comark-critic";
 import deflist from "comark-deflist";
@@ -539,8 +540,6 @@ const headings = /* @__PURE__ */ new Set([
 const isText = (node) => !Array.isArray(node);
 const isElement = (node) => Array.isArray(node) && node[0] !== null;
 const childrenOf = (element) => element.slice(2);
-/** A prop as text. Comark props are strings, numbers, and booleans, or parsed JSON for `:prop` bindings. */
-const textOf = (value) => value === void 0 || value === null || value instanceof Object ? void 0 : String(value);
 const inlineHtml = ({ $: meta }) => meta instanceof Object && "block" in meta && meta.block === 0;
 const isInline = (node) => isText(node) || isElement(node) && (inlineTags.has(node[0]) || node[0].startsWith(REFERENCE) || inlineHtml(node[1]));
 const isHtml = (props) => props.$ instanceof Object;
@@ -549,7 +548,7 @@ function rest(props, ...keys) {
 	const left = Object.fromEntries(Object.entries(props).filter(([key]) => !keys.includes(key)));
 	return Object.keys(left).length ? left : void 0;
 }
-const classes = (props) => textOf(props.class)?.split(/\s+/) ?? [];
+const classes = (props) => scalar(props.class)?.split(/\s+/) ?? [];
 function withoutClass(props, name) {
 	const left = classes(props).filter((value) => value && value !== name);
 	const { class: _, ...others } = props;
@@ -636,7 +635,7 @@ function readComponent(children, reading) {
 	for (const child of children) if (isElement(child) && child[0] === "template") {
 		flush();
 		const { name, ...props } = child[1];
-		out.push(node("comarkSlot", withProps({ name: textOf(name) ?? "default" }, rest(props)), readBlocks(childrenOf(child), reading)));
+		out.push(node("comarkSlot", withProps({ name: scalar(name) ?? "default" }, rest(props)), readBlocks(childrenOf(child), reading)));
 	} else run.push(child);
 	flush();
 	return out;
@@ -644,7 +643,7 @@ function readComponent(children, reading) {
 function readCode(props, children) {
 	const code = children.find(isElement);
 	const text = (code ? childrenOf(code) : children).filter(isText).join("");
-	const language = textOf(props.language) ?? null;
+	const language = scalar(props.language) ?? null;
 	return node("codeBlock", withProps(language ? { language } : {}, rest(props, "language")), text ? [{
 		type: "text",
 		text
@@ -795,7 +794,7 @@ function writeBlock(json) {
 		]];
 		case "horizontalRule": return [["hr", props]];
 		case "codeBlock": {
-			const language = textOf(attrs.language) || void 0;
+			const language = scalar(attrs.language) || void 0;
 			const code = plainText(json.content);
 			const pre = [
 				"pre",
@@ -859,7 +858,7 @@ function writeBlock(json) {
 			return [isHtml(props) ? component : own(component, blockComponent)];
 		}
 		case "footnoteDefinition": {
-			const label = textOf(attrs.label) ?? "";
+			const label = scalar(attrs.label) ?? "";
 			return [own([
 				"footnote",
 				{},
@@ -882,7 +881,7 @@ function writeBlock(json) {
 		case "comarkComment": return [[
 			null,
 			{},
-			textOf(attrs.text) ?? ""
+			scalar(attrs.text) ?? ""
 		]];
 		default: return [];
 	}
@@ -936,8 +935,8 @@ function writeMark(mark, children) {
 		props,
 		...children
 	];
-	const href = textOf(mark.attrs?.href);
-	const title = textOf(mark.attrs?.title);
+	const href = scalar(mark.attrs?.href);
+	const title = scalar(mark.attrs?.title);
 	const link = {
 		...props,
 		href
@@ -1017,7 +1016,7 @@ function writeLeaf(json) {
 		];
 		return [isHtml(props) ? component : own(component, inlineComponent)];
 	}
-	if (json.type === "footnoteReference") return [own(["footnote", {}], footnoteReference(textOf(attrs.label) ?? ""))];
+	if (json.type === "footnoteReference") return [own(["footnote", {}], footnoteReference(scalar(attrs.label) ?? ""))];
 	if (json.type === "inlineFootnote") return [own([
 		"footnote",
 		{},

package/dist/editor-vue.d.mts

@@ -2,7 +2,8 @@ import { x as ComarkKitOptions } from "./editor-KD97dL_1.mjs";
 import { ComarkPlugin } from "comark";
 import { AnyExtension } from "@tiptap/core";
 import { Editor } from "@tiptap/vue-3";
-import { PropType, Ref } from "vue";
+import { PropertiesOptions } from "comark-properties";
+import { PropType, Ref, VNode } from "vue";
 //#region src/editor-vue.d.ts
 export interface UseComarkEditorOptions {
   /** Added after ComarkKit, such as a placeholder. */
@@ -18,9 +19,17 @@ export interface UseComarkEditorOptions {
 export declare function useComarkEditor(markdown: Ref<string>, options?: UseComarkEditorOptions): {
   editor: import("vue").ShallowRef<Editor | undefined, Editor | undefined>;
   editable: Ref<boolean, boolean>;
+  frontmatter: import("vue").ShallowRef<Record<string, unknown>, Record<string, unknown>>;
 };
-/** `useComarkEditor` as a component: `<ComarkEditor v-model="markdown" />`. */
+/**
+ * `useComarkEditor` as a component: `<ComarkEditor v-model="markdown" />`. The frontmatter keys that comark-properties
+ * shows on the page show above the text the same way, read-only. Pass its options in `properties`, or `false` to hide them.
+ */
 export declare const ComarkEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  properties: {
+    type: PropType<PropertiesOptions | boolean>;
+    default: boolean;
+  };
   modelValue: {
     type: StringConstructor;
     required: true;
@@ -33,9 +42,15 @@ export declare const ComarkEditor: import("vue").DefineComponent<import("vue").E
     type: PropType<ComarkPlugin<any, any>[]>;
     default: undefined;
   };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  properties: {
+    type: PropType<PropertiesOptions | boolean>;
+    default: boolean;
+  };
   modelValue: {
     type: StringConstructor;
     required: true;
@@ -51,6 +66,7 @@ export declare const ComarkEditor: import("vue").DefineComponent<import("vue").E
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+  properties: boolean | PropertiesOptions;
   extensions: AnyExtension[];
   plugins: ComarkPlugin<any, any>[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/editor-vue.mjs

@@ -1,6 +1,12 @@
-import { c as fromMarkdown, l as toMarkdown, m as ComarkKit, s as checkMarkdown } from "./editor-DmxNPK7K.mjs";
+import { c as fromMarkdown, l as toMarkdown, m as ComarkKit, s as checkMarkdown } from "./editor-ASZBrUYa.mjs";
 import { Editor, EditorContent } from "@tiptap/vue-3";
+import { rowsOf } from "comark-properties";
+import { Properties } from "comark-properties/vue";
 import { defineComponent, h, onScopeDispose, ref, shallowRef, watch } from "vue";
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
 //#region src/editor-vue.ts
 /**
 * A Tiptap editor bound to a Markdown string: an edit writes the Markdown back, and a change from outside reloads the
@@ -9,7 +15,8 @@ import { defineComponent, h, onScopeDispose, ref, shallowRef, watch } from "vue"
 function useComarkEditor(markdown, options = {}) {
 	const editor = shallowRef();
 	const editable = ref(false);
-	let frontmatter = {};
+	/** The document's frontmatter, which the editor keeps beside the text and writes back on each save. */
+	const frontmatter = shallowRef({});
 	let written;
 	let loads = 0;
 	let saves = 0;
@@ -17,7 +24,7 @@ function useComarkEditor(markdown, options = {}) {
 		const current = editor.value;
 		if (!current) return;
 		const run = ++saves;
-		const next = await toMarkdown(current.getJSON(), { frontmatter });
+		const next = await toMarkdown(current.getJSON(), { frontmatter: frontmatter.value });
 		if (run !== saves) return;
 		written = next;
 		markdown.value = next;
@@ -27,7 +34,7 @@ function useComarkEditor(markdown, options = {}) {
 		++saves;
 		const [check, read] = await Promise.all([checkMarkdown(source, { plugins: options.plugins }), fromMarkdown(source)]);
 		if (run !== loads) return;
-		frontmatter = read.frontmatter;
+		frontmatter.value = read.frontmatter;
 		editable.value = check.editable;
 		if (editor.value) {
 			editor.value.commands.setContent(read.doc, { emitUpdate: false });
@@ -47,13 +54,27 @@ function useComarkEditor(markdown, options = {}) {
 	onScopeDispose(() => editor.value?.destroy());
 	return {
 		editor,
-		editable
+		editable,
+		frontmatter
 	};
 }
-/** `useComarkEditor` as a component: `<ComarkEditor v-model="markdown" />`. */
+/** A comark node as a Vue node, for the few elements the properties rows hold. */
+function vnode(node) {
+	if (!isElement(node)) return Array.isArray(node) ? null : node;
+	return h(node[0], node[1], childrenOf(node).map(vnode));
+}
+/**
+* `useComarkEditor` as a component: `<ComarkEditor v-model="markdown" />`. The frontmatter keys that comark-properties
+* shows on the page show above the text the same way, read-only. Pass its options in `properties`, or `false` to hide them.
+*/
 const ComarkEditor = defineComponent({
 	name: "ComarkEditor",
+	inheritAttrs: false,
 	props: {
+		properties: {
+			type: [Object, Boolean],
+			default: true
+		},
 		modelValue: {
 			type: String,
 			required: true
@@ -68,17 +89,27 @@ const ComarkEditor = defineComponent({
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(props, { emit }) {
+	setup(props, { attrs, emit }) {
 		const markdown = ref(props.modelValue);
 		watch(() => props.modelValue, (value) => markdown.value = value);
 		watch(markdown, (value) => {
 			if (value !== props.modelValue) emit("update:modelValue", value);
 		});
-		const { editor } = useComarkEditor(markdown, {
+		const { editor, frontmatter } = useComarkEditor(markdown, {
 			extensions: props.extensions,
 			plugins: props.plugins
 		});
-		return () => editor.value ? h(EditorContent, { editor: editor.value }) : null;
+		return () => {
+			if (!editor.value) return null;
+			const content = h(EditorContent, {
+				...attrs,
+				editor: editor.value
+			});
+			if (props.properties === false) return content;
+			const options = props.properties === true ? {} : props.properties;
+			const { rows } = rowsOf(frontmatter.value, options);
+			return rows.length ? [h(Properties, null, () => rows.map(vnode)), content] : content;
+		};
 	}
 });
 //#endregion

package/dist/editor.mjs

@@ -1 +1 @@
-export { u as ComarkBlock, d as ComarkComment, f as ComarkImage, p as ComarkInline, m as ComarkKit, h as ComarkSlot, g as CriticComment, _ as CriticDeletion, v as CriticHighlight, y as CriticInsertion, b as DefinitionDescription, x as DefinitionList, S as DefinitionTerm, C as FootnoteDefinition, w as FootnoteReference, T as InlineFootnote, n as Upload, s as checkMarkdown, t as createEditorCodec, r as findUpload, c as fromMarkdown, i as startUploads, l as toMarkdown, a as uploadKey, o as uploadPlugin } from "./editor-DmxNPK7K.mjs";
+export { u as ComarkBlock, d as ComarkComment, f as ComarkImage, p as ComarkInline, m as ComarkKit, h as ComarkSlot, g as CriticComment, _ as CriticDeletion, v as CriticHighlight, y as CriticInsertion, b as DefinitionDescription, x as DefinitionList, S as DefinitionTerm, C as FootnoteDefinition, w as FootnoteReference, T as InlineFootnote, n as Upload, s as checkMarkdown, t as createEditorCodec, r as findUpload, c as fromMarkdown, i as startUploads, l as toMarkdown, a as uploadKey, o as uploadPlugin } from "./editor-ASZBrUYa.mjs";

package/dist/html.d.mts

@@ -1,4 +1,4 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-Dbqxt4Qg.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-DVGSDzBS.mjs";
 import { NodeHandler } from "comark";
 //#region src/html.d.ts
 /**

package/dist/html.mjs

@@ -1,6 +1,7 @@
 import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
-import { a as start, n as mermaidBar, r as mermaidCss } from "./client-Bjd6VcGQ.mjs";
+import { a as start, n as mermaidBar, r as mermaidCss } from "./client-BhzMlpun.mjs";
+import { t as rawText } from "./text-D8j9clg3.mjs";
 import { escapeHtml } from "comark/utils";
 import * as annotate from "comark-annotate/html";
 import * as badge from "comark-badge/html";
@@ -38,6 +39,10 @@ import * as table from "comark-table/html";
 import * as tabs from "comark-tabs/html";
 import * as tests from "comark-tests/html";
 import * as zoom from "comark-zoom/html";
+//#region ../../shared/html.ts
+/** A value as the inside of a double-quoted HTML attribute. */
+const attr = (value) => escapeHtml(rawText(value), { "\"": """ });
+//#endregion
 //#region src/html.ts
 const styled = /* @__PURE__ */ new WeakSet();
 /**
@@ -46,7 +51,6 @@ const styled = /* @__PURE__ */ new WeakSet();
 * hash without rendering a document first.
 */
 const mermaidScript = `(${start.toString()})()`;
-const attr = (value) => escapeHtml(value, { "\"": """ });
 /**
 * Wraps Pele's card in `.cmm` with the bar of buttons and the source they copy. The wrapper is a wide block with the
 * diagram's own width, so a page that gives wide blocks room shows a long flowchart at its size rather than shrinking

package/dist/{index-Dbqxt4Qg.d.mts → index-DVGSDzBS.d.mts}

@@ -7,6 +7,7 @@ import { KeysOptions } from "comark-keys";
 import { ReadingTimeOptions } from "comark-reading-time";
 import { XrefOptions } from "comark-xref";
 import { ComarkPlugin } from "comark";
+import { PropertiesOptions } from "comark-properties";
 import { BadgeOptions } from "comark-badge";
 import { AnnotateOptions } from "comark-annotate";
 import { CastOptions } from "comark-cast";
@@ -23,7 +24,6 @@ import { MathOptions } from "comark-mathml";
 import { MediaOptions } from "comark-media";
 import { OutlineOptions } from "comark-outline";
 import { PeleConfig } from "comark-pele";
-import { PropertiesOptions } from "comark-properties";
 import { QuizOptions } from "comark-quiz";
 import { TableOptions } from "comark-table";
 import { TabsOptions } from "comark-tabs";

package/dist/index.d.mts

@@ -1,3 +1,3 @@
 import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
-import { a as criticCss, c as typeset, i as Renderer, n as Preset, o as preset, r as PresetOptions, s as TYPESET_TAG, t as AnyPlugin } from "./index-Dbqxt4Qg.mjs";
+import { a as criticCss, c as typeset, i as Renderer, n as Preset, o as preset, r as PresetOptions, s as TYPESET_TAG, t as AnyPlugin } from "./index-DVGSDzBS.mjs";
 export { AnyPlugin, Preset, PresetOptions, Renderer, TYPESET_TAG, criticCss, preset, typeset, typesetCss };

package/dist/react.d.mts

@@ -1,4 +1,4 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-Dbqxt4Qg.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-DVGSDzBS.mjs";
 import { ComponentType } from "react";
 //#region src/react.d.ts
 type AnyComponent = ComponentType<any>;

package/dist/react.mjs

@@ -1,6 +1,6 @@
 import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { n as preset, t as criticCss } from "./src-PkmYCSNu.mjs";
-import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-BhzMlpun.mjs";
 import { createElement, useEffect } from "react";
 import * as badge from "comark-badge/react";
 import * as cards from "comark-cards/react";

package/dist/skills/before-after-evidence/SKILL.md

@@ -6,25 +6,25 @@ license: MIT
 
 # Before/after evidence
 
-A before/after is evidence when a reviewer can check every claim against the two images and nothing else. Three things make it so, and the reader can't repair any of them: two captures of the same view, marks that sit on what changed, and notes in the words the screen shows.
+A before/after is evidence when a reviewer can check every claim against the two images and nothing else. The reader can't repair a bad pair, so get three things right: two captures of the same view, marks on what changed, and notes in the words the screen shows.
 
-This skill writes the document. Where it's published, and who can open it, is up to your host.
+This skill writes the document. Your host decides where it's published and who can open it.
 
 ## 1. Capture a comparable pair
 
-Take **after** from the branch or its preview, and **before** from a deployment or commit that still behaves the old way. Capture both with the same viewport, zoom, theme, data, scroll position, and open menus, so the change is the only difference.
+Take the after capture from the branch or its preview, and the before capture from a deployment or commit that still behaves the old way. Capture both with the same viewport, zoom, theme, data, scroll position, and open menus, so the change is the only difference.
 
 - Set up the state that shows the change before you capture: the long name that wrapped, the error that stayed hidden, the empty list.
 - Clip both captures to one region around the change, the same rectangle on each side. A `::compare` gives each image under half the page width, where a full-page capture's text is too small to read.
-- Pin anything that moves the layout between the two states, such as a dialog centered vertically that grows by one line, so the same element sits at the same place in both.
+- Pin anything that moves the layout between the two states, such as a vertically centered dialog that grows by one line, so the same element sits at the same place in both.
 
-If one side can't be captured comparably, stop and say what blocked you. A description in place of a screenshot, or one side alone, isn't before/after evidence.
+If you can't capture one side comparably, stop and say what blocked you. A description in place of a screenshot, or one side alone, isn't before/after evidence.
 
 Done when both images exist, have the same size, and differ only where the change is.
 
 ## 2. Measure every mark
 
-Marks take `x`, `y`, `w`, and `h` as percentages of the image. Measure them: an estimate drifts a few percent, and on a half-width image that's the neighbouring button.
+Marks take `x`, `y`, `w`, and `h` as percentages of the image. Measure them. An estimate drifts a few percent, which on a half-width image lands on the neighbouring button.
 
 - **A page you captured:** read the element's box in the same browser, viewport, and state, minus the clip's offset. [references/measuring.md](references/measuring.md) has the snippet.
 - **A still you didn't capture**, such as a frame from a screen recording, a design export, or an image attached to a bug report: there is no DOM to ask. Measure in image pixels and divide by the image's natural width and height. Confirm each box by cropping the image to it and looking at the crop, as the same reference shows.
@@ -42,7 +42,7 @@ Start from [references/example.md](references/example.md) and keep its shape:
 3. The `::compare`, each note a few words in the screen's own words. A value the screenshot doesn't show stays out of its note.
 4. A `::diff` of the line that caused it, only when the reader would otherwise ask.
 
-The images carry the evidence, so the text only points into them. How the work went (the checks you ran, retries, CI) goes in your report to the user, not in the document. [references/blocks.md](references/blocks.md) has the syntax of each block.
+The images carry the evidence, so the text only points into them. Put how the work went (checks, retries, CI) in your report to the user, not in the document. [references/blocks.md](references/blocks.md) has the syntax of each block.
 
 Image `src` must be a URL the renderer can reach: a path next to the document, or an https URL your host gives you for the upload.
 
@@ -56,17 +56,15 @@ Image `src` must be a URL the renderer can reach: a path next to the document, o
 
    These commands use the [global Vite+ CLI](https://viteplus.dev/guide/global-cli). Without it, `pnpm dlx` takes the same arguments.
 
-2. Open the page where it will be read and take a screenshot of it. For a local screenshot-only check, copy the complete `::compare` block, including its nested screenshots and annotations, into `evidence-screenshots.md` beside `evidence.md`.
+2. Open the page where it will be read and take a screenshot of it. To check the screenshots alone, copy the whole `::compare` block, nested screenshots and annotations included, into `evidence-screenshots.md` beside `evidence.md`.
 
-   Ensure comark-annotate is a direct dependency of this workspace package. If it is only transitive, read the installed Comark UI version and add that exact version with the project's package manager: for pnpm, `pnpm add -D comark-annotate@<version>`, substituting that version. Add `-w` when installing at the workspace root. With no Comark UI packages installed, omit `@<version>`. This links the executable without fetching a different renderer release via `@latest`. Then run:
+   Make comark-annotate a direct dependency of this workspace package. A transitive one isn't linked, and `@latest` can run a different release from the project's renderers. Match the version of the installed Comark UI packages: `pnpm add -D comark-annotate@<version>`, with `-w` at the workspace root. With no Comark UI packages installed, omit `@<version>`. Then run:
 
    ```sh
    vp exec comark-annotate render evidence-screenshots.md -o evidence-screenshots.html
    ```
 
-   Without Vite+, use `pnpm exec` with the same arguments.
-
-   Open `evidence-screenshots.html` and take a screenshot of it. This CLI renders annotate, carousel, and zoom only; check any `::diff` or other blocks in the host's full Comark UI preview.
-3. Check that each mark sits on its target and each note matches what its side shows. Measure a mark that misses again, from the source, since a box moved by eye stays a guess.
+   Without Vite+, use `pnpm exec` with the same arguments. Open `evidence-screenshots.html` and take a screenshot of it. This CLI renders annotate, carousel, and zoom only; check any `::diff` or other blocks in the host's full Comark UI preview.
+3. Check that each mark sits on its target and each note matches what its side shows. Measure a mark that misses again from the source; a box moved by eye stays a guess.
 
 Done when you've looked at the rendered page and every mark lands. Name any mark or block you couldn't check in your report.

package/dist/skills/before-after-evidence/references/blocks.md

@@ -30,7 +30,7 @@ A direct child of a screenshot. Its content is the note, in Markdown.
 | Prop | What it does |
 | --- | --- |
 | `x` `y` `w` `h` | Required. The marked rectangle as percentages of the image, without `%`. |
-| `mark` | `box` (default), `circle`, `underline`, `highlight`, `bracket`, `cross`, `check`, or `none`. |
+| `mark` | `box` (default), `circle`, `underline`, `line`, `highlight`, `bracket`, `cross`, `check`, or `none`. |
 | `color` | `red` for a problem, `green` for the fix, `amber` for a warning, `violet` (default) to point something out, `gray`, or a hex color. |
 | `side` | `top` or `bottom` moves the note into the margin with an arrow; in a side-by-side compare, `left` and `right` notes join the numbered list. |
 

package/dist/skills/comark-ui/SKILL.md

@@ -5,11 +5,11 @@ description: Writes PR evidence, explanations of how something works, and docs p
 
 # comark-ui
 
-You write Markdown; the comark plugins render it as static HTML, from marks on screenshots and charts drawn from tables to code changes, diagrams, and steps. The reader sees only what you measured and wrote down, so measure every mark from the page, take every number from the data, and check the render before you hand it over.
+You write Markdown, and the comark plugins render it as static HTML. The reader sees only what you measured and wrote down, so measure every mark from the page, take every number from the data, and check the render before you hand it over.
 
 ## Install
 
-Prefer `comark-ui`, every plugin in one install, registered in the order they need:
+Install `comark-ui` by default. It holds every plugin and registers them in the order they need:
 
 ```sh
 pnpm add comark @comark/html comark-ui
@@ -26,7 +26,7 @@ const render = createHtmlRenderer(comarkUi());
 
 Every plugin is on except `include`. The [comark-ui reference](references/ui.md) covers its options, the plugins that read files or use the network, and its Vue, React, and Svelte entries.
 
-When a project wants only some plugins, install those packages and register each plugin with its components:
+To use only some plugins, install those packages and register each plugin with its components:
 
 ```sh
 pnpm add comark @comark/html comark-annotate
@@ -41,13 +41,15 @@ const render = createHtmlRenderer({ plugins: [annotate()], components });
 
 Each reference ends with a Register section that says how its package registers alone and which options it needs.
 
-Either way, the HTML renderer inlines the styles once per document, and the Vue, React, and Svelte components add them on mount. On a server-rendered page, import each package's `style.css`, such as `comark-cards/style.css`, so the page doesn't shift. The `--comark-*` tokens in https://comark-ui.onmax.me/guide/theming/ theme every plugin at once. In a Nuxt UI app the plugins follow its `--ui-*` variables with no setup; for a page rendered outside the app, such as review evidence, put the CSS from `nuxtUiTheme({ colors: appConfig.ui?.colors, css: mainCss })` in `comark-ui/nuxt-ui` in a `<style>`, so the page matches the app.
+Either way, the HTML renderer inlines the styles once per document, and the Vue, React, and Svelte components add them on mount. On a server-rendered page, import each package's `style.css`, such as `comark-cards/style.css`, so the page doesn't shift.
+
+The `--comark-*` tokens theme every plugin at once; https://comark-ui.onmax.me/guide/theming/ lists them. In a Nuxt UI app the plugins follow its `--ui-*` variables with no setup. For a page rendered outside the app, such as review evidence, put the CSS from `nuxtUiTheme({ colors: appConfig.ui?.colors, css: mainCss })` (from `comark-ui/nuxt-ui`) in a `<style>`, so the page matches the app.
 
 Problems land in `meta.issues` after `parseMarkdown`, one sentence each, and a host can refuse a document while any remain. For untrusted input, add Comark's `security` plugin with `blockedTags` such as `script`, `style`, and `iframe`; it cleans the Markdown inside blocks too.
 
 ## Shape the document
 
-This skill teaches the blocks. Four sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `visual-explanation`, and `teach-lesson`. When the user asks for one of those and the skill isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
+This skill teaches the blocks. Four sibling skills teach a whole document, what goes in it and in what order: `before-after-evidence`, `review-document`, `visual-explanation`, and `teach-lesson`. When the user asks for one of those and it isn't installed, suggest `vp dlx skills add onmax/comark-ui` and picking it from the list.
 
 ## Pick the blocks
 
@@ -133,13 +135,13 @@ Read the reference for each block you use before you write it. Mix the blocks fr
 
 Screenshots and charts draw the same marks. Each `::annotation` is one mark and its note, written in Markdown.
 
-- `mark` is `box` (default), `circle`, `underline`, `highlight`, `bracket`, `cross`, `check`, or `none`, which draws nothing, so its note needs a `side` and the arrow alone points.
+- `mark` is `box` (default), `circle`, `underline`, `line`, `highlight`, `bracket`, `cross`, `check`, or `none`, which draws nothing, so its note needs a `side` and the arrow alone points.
 - `color` is `violet` (default) to point something out, `red` for a problem, `amber` for a warning, `green` for a fix, `blue` for a second voice, `gray` for neutral, or a 3- or 6-digit hex color.
 - `side` is `top`, `bottom`, `left`, or `right`, and puts the note in that margin with an arrow to its mark. Notes without one are numbered in a list under the figure.
 
-Mark only what your text talks about. Each note says what changed or what is wrong in the words the screen or the table shows, so the reader can check it against the figure; a value the figure doesn't show stays out of the note.
+Mark only what your text talks about. Write each note in the words the screen or table shows, saying what changed or what is wrong, so the reader can check it against the figure. Leave out a value the figure doesn't show.
 
 ## Check the result
 
-1. Lint the file: `vp exec comark-lint report.md`, in a project with `comark-linter` and the plugins installed, where `comark-ui` counts as every plugin. It prints one line per problem with its line, its rule, and how to fix it, and exits with 1 while any remain. Fix every one, and run it again until it exits with 0. The [lint reference](references/lint.md) covers its flags, its config file, the library, ESLint, and Vite Doctor.
-2. Look at the render, made as the block's reference says. Open it in a browser and take a screenshot: each mark sits on its target, each number matches its note, and each chart says what your text says. If you can't verify something, say so when you hand the document over instead of guessing.
+1. Lint the file with `vp exec comark-lint report.md`, in a project with `comark-linter` and the plugins installed (`comark-ui` counts as every plugin). It prints one line per problem with its line, its rule, and the fix, and exits with 1 while any remain. Fix every problem and run it again until it exits with 0. The [lint reference](references/lint.md) covers the flags, the config file, the library, ESLint, and Vite Doctor.
+2. Render the document as the block's reference says, open it in a browser, and take a screenshot. Each mark must sit on its target, each number must match its note, and each chart must say what your text says. Name anything you couldn't verify when you hand the document over.

package/dist/skills/comark-ui/references/annotate.md

@@ -53,7 +53,7 @@ For a clipped capture, `getBoundingClientRect()` and Playwright's main-frame `cl
 
 ## Preview
 
-Ensure comark-annotate is a direct dependency of the workspace package where you run the CLI. If it is only transitive, read the installed Comark UI version and add that exact version with the project's package manager: for pnpm, `pnpm add -D comark-annotate@<version>`, substituting that version. Add `-w` when installing at the workspace root. With no Comark UI packages installed, omit `@<version>`. This links the executable without fetching a different renderer release via `@latest`.
+Make comark-annotate a direct dependency of the workspace package where you run the CLI, so its executable links. If it is only transitive, read the installed Comark UI version and add that exact version, such as `pnpm add -D comark-annotate@<version>` (add `-w` at the workspace root), because `@latest` could fetch a different renderer release. With no Comark UI packages installed, omit `@<version>`.
 
 ```sh
 vp exec comark-annotate render report.md -o report.html

package/dist/skills/comark-ui/references/badge.md

@@ -42,7 +42,7 @@ Use image mode for README-style label/value badges. Static images embed their SV
 - `style`: `shadcn` by default, `subtle`, or `solid`; `theme`: `auto` by default, following the page's light or dark theme (on GitHub too), or `light` or `dark`. `color` and `labelColor` accept semantic names or six-digit hex colors. In the default preset, shadcn draws an outline with neutral text; `labelColor` applies to subtle and solid backgrounds. CI chooses its own status color. Images embed colors and do not inherit the document's CSS.
 - `period`: `day`, `week`, or `month` for downloads. Hosted values cache for five minutes for versions, one hour for downloads, and one minute for CI. Failures display `unavailable` for 30 seconds. Downloaded SVGs are snapshots.
 
-The builder at `/badges/` lives in the docs layout, shares its configuration and export format in the query string, and exports Comark, Markdown, an image URL, and SVG. The image endpoint is `/badge.svg`, with the same props as query parameters. Preserve the existing prose syntax for inline tags that should follow the page's theme.
+The builder at `/badges/` exports Comark, Markdown, an image URL, and SVG. The image endpoint is `/badge.svg`, with the same props as query parameters. For an inline tag that should follow the page's theme, keep the prose syntax above; an image embeds its own colors.
 
 ## Register
 

package/dist/skills/comark-ui/references/cards.md

@@ -23,7 +23,8 @@ Read the code, or open an issue.
 | `icon` | An icon above the title, in the card's color, named as in [icon](icon.md), such as `lucide:rocket`. The plugin reports one it can't draw. |
 | `to` | Makes it a link card. One link covers the card and takes the title as its name, and links in the card's text still open on their own. A web address opens in a new tab with an arrow in the corner. |
 | `target` | Where the link opens, such as `_self` to keep a web address in the tab. |
-| `color` | Tints the icon and a hovered link card's border: `primary` (default), `secondary`, `success`, `info`, `warning`, `error`, or `neutral`. |
+| `color` | Tints the icon and a hovered link card's border: `primary` (default), `secondary`, `success`, `info`, `warning`, `error`, or `neutral`. Any other value shows as `primary` and is reported. |
+| `variant` | `outline` (default) keeps the plain card, `soft` washes it in its `color`, and `subtle` washes it and draws its border in the `color` too. |
 
 `::card-group` sets its cards in two columns, or one when the group is narrower than 36rem, so a group in a sidebar stacks too. A card works on its own as well.
 

package/dist/skills/comark-ui/references/code-notes.md

@@ -30,5 +30,5 @@ Mark the lines a reviewer would ask about: the request that runs in parallel, th
 
 ## Register
 
-- In `comark-ui`: on as `codeNotes`, the last plugin. The preset leaves Shiki out; add it right before comark-code, as the [code reference](code.md) shows, which keeps it ahead of code notes.
+- In `comark-ui`: on as `codeNotes`, listed after `code`. The preset leaves Shiki out; add it right before comark-code, as the [code reference](code.md) shows, which keeps it ahead of code notes.
 - Alone: `pnpm add comark @comark/html comark-code-notes`, then `createHtmlRenderer({ plugins: [shiki(), codeNotes()], components })` with `shiki` from `@comark/html/plugins/shiki`, and `codeNotes` and `components` from `comark-code-notes/html`. It goes after `shiki`; in the other order the code isn't highlighted and `meta.issues` says so. Without Shiki it draws the lines itself. It takes no options, and `comark-code-notes/vue`, `/react`, and `/svelte` render it too.

package/dist/skills/comark-ui/references/code.md

@@ -28,9 +28,9 @@ function close() {
 
 A range is one line, `{7}`, a run, `{3-4}`, or a list of both, `{1, 3-4}`, always in braces. Ranges count the block's own lines from 1, folded lines included, whatever `startLineNumber` says: `startLineNumber=120 ins={3}` marks the line numbered 122.
 
-`sh`, `bash`, `zsh`, `shell`, `console`, and `ansi` blocks draw as terminals unless their title is a file name, such as `install.sh`. A terminal's header shows its title but not its language. In a code group the tab names the block, so a terminal there draws no window.
+`sh`, `bash`, `zsh`, `shell`, `shellscript`, `shellsession`, `console`, and `ansi` blocks draw as terminals unless their title is a file name, such as `install.sh`. A terminal's header shows its title but not its language. In a code group the tab names the block, so a terminal there draws no window.
 
-When the host runs Shiki's notation transformers, comments such as `// [!code ++]`, `// [!code --]`, `// [!code highlight]`, and `// [!code focus]` mark lines too, and comark-code styles them.
+When the host runs Shiki's notation transformers, comments such as `// [!code ++]`, `// [!code --]`, `// [!code highlight]`, `// [!code focus]`, `// [!code error]`, and `// [!code warning]` mark lines too, and comark-code styles them.
 
 ## Show a change
 
@@ -50,7 +50,7 @@ When the host runs Shiki's notation transformers, comments such as `// [!code ++
 ```
 ````
 
-A range that lands on the wrong line inside the block isn't reported, so count the lines before you mark them.
+A range past the block's last line is reported. One that lands on the wrong line inside the block isn't, so count the lines before you mark them.
 
 ## Add buttons