comark-ui 0.7.6 → 0.8.1

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,8 +53,8 @@ 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. |
-| `createEditorCodec({ plugins })` | `{ extensions, fromMarkdown, toMarkdown, verify }` for a collaborative room, such as ViteHub Realtime's `editor` option. |
+| `Upload` | Uploads pasted and dropped files. Each shows a placeholder with its progress until `upload(file, progress)` returns its URL. |
+| `createEditorCodec({ plugins })` | `{ extensions, split, join, fromMarkdown, toMarkdown, verify }` for a collaborative room, such as ViteHub Realtime's `editor` option. A room keeps the body as the editor's document and the frontmatter as its fields, so a text edit never overwrites the metadata. |
 
 `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-kUEiRbtp.mjs}

@@ -165,7 +165,19 @@ function start() {
 	return state.stop;
 }
 //#endregion
-//#region src/client.ts
+//#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);
+}
 /**
 * 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
@@ -173,8 +185,17 @@ 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", "primary"),
+	`: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(--_comark-primary);--pele-critical:var(--_comark-danger);--pele-error:var(--_comark-danger);--pele-font:var(--_comark-font);--pele-radius:calc(var(--_comark-radius) - 4px);${[
+		"#3b82f6",
+		"#f97316",
+		"#10b981",
+		"#a855f7",
+		"#f43f5e",
+		"#eab308",
+		"#06b6d4",
+		"#ec4899"
+	].map((hex, index) => `--pele-series-${index + 1}:var(--comark-chart-${index + 1},var(--ui-chart-${index + 1},var(--chart-${index + 1},${hex})))`).join(";")}}`,
 	".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 +235,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 { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
+import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
 export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };

package/dist/{editor-DmxNPK7K.mjs → editor-9IcfELjG.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";
@@ -8,7 +9,8 @@ import Image from "@tiptap/extension-image";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { TableKit } from "@tiptap/extension-table";
 import StarterKit from "@tiptap/starter-kit";
-import { renderMarkdown } from "comark/render";
+import { parseFrontmatter } from "comark/parse";
+import { renderFrontmatter, renderMarkdown } from "comark/render";
 import { indent, textContent } from "comark/utils";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
@@ -539,8 +541,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 +549,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 +636,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 +644,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 +795,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 +859,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 +882,7 @@ function writeBlock(json) {
 		case "comarkComment": return [[
 			null,
 			{},
-			textOf(attrs.text) ?? ""
+			scalar(attrs.text) ?? ""
 		]];
 		default: return [];
 	}
@@ -936,8 +936,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 +1017,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",
 		{},
@@ -1055,16 +1055,90 @@ async function fromMarkdown(markdown) {
 async function toMarkdown(doc, options = {}) {
 	const markdown = await renderMarkdown({
 		nodes: writeBlocks(doc.content),
-		frontmatter: options.frontmatter ?? {},
+		frontmatter: {},
 		meta: {}
 	}, writeOptions);
-	return markdown.trim() ? `${markdown.trimEnd()}\n` : "";
+	return withFrontmatter(markdown.trim() ? `${markdown.trimEnd()}\n` : "", options.frontmatter);
+}
+/** Finds the frontmatter block where Comark does, and says why a save wouldn't write it back. */
+function readFrontmatter(markdown) {
+	if (!markdown.startsWith("---") || !markdown.includes("\n---")) return { kind: "none" };
+	let read;
+	try {
+		read = parseFrontmatter(markdown);
+	} catch (error) {
+		return {
+			kind: "lost",
+			problem: `The frontmatter isn't valid YAML (${String(error instanceof Error && "reason" in error ? error.reason : error)}); fix it to edit the document.`,
+			body: markdown.slice(markdown.indexOf("\n---") + 4).replace(/^(?:\r?\n)+/, "")
+		};
+	}
+	const { data, frontmatterText: yaml } = read;
+	const value = data;
+	if (!(value instanceof Object) || Array.isArray(value)) return {
+		kind: "lost",
+		problem: `The frontmatter is a YAML ${Array.isArray(value) ? "list" : "scalar"}, which a save would rewrite; turn it into \`key: value\` lines to edit the document.`
+	};
+	const comments = hasComment(yaml);
+	if (!Object.keys(data).length) return {
+		kind: "lost",
+		problem: comments ? "The frontmatter holds only YAML comments, which a save would drop; delete them or move them into the text to edit the document." : "The frontmatter block is empty, so a save wouldn't write it back; delete its `---` lines or add a `key: value` line to edit the document."
+	};
+	if (comments) return {
+		kind: "lost",
+		problem: "The frontmatter has YAML comments, which a save would drop; delete them or move them into the text to edit the document."
+	};
+	if (hasProtoKey(data)) return {
+		kind: "lost",
+		problem: "The frontmatter has a `__proto__` key, which the room's fields would drop on save; rename it to edit the document."
+	};
+	return {
+		kind: "kept",
+		body: read.content.replace(/^(?:\r?\n)+/, ""),
+		fields: data
+	};
+}
+function hasProtoKey(value, seen = /* @__PURE__ */ new Set()) {
+	if (!(value instanceof Object) || seen.has(value)) return false;
+	seen.add(value);
+	return Object.hasOwn(value, "__proto__") || Object.values(value).some((child) => hasProtoKey(child, seen));
+}
+/**
+* Whether the YAML has a comment. A `#` after a space may sit inside a quoted value, so each candidate counts only when
+* cutting the line there leaves the same data.
+*/
+function hasComment(yaml) {
+	const lines = yaml.split("\n");
+	const data = (text) => {
+		try {
+			return { value: parseFrontmatter(`---\n${text}\n---\n`).data };
+		} catch {
+			return;
+		}
+	};
+	const original = data(yaml);
+	return lines.some((line, index) => [...line.matchAll(/(?:^|\s)#/g)].some((match) => {
+		const cut = [...lines];
+		cut[index] = line.slice(0, match.index);
+		const read = data(cut.join("\n"));
+		return read !== void 0 && equal(read.value, original?.value);
+	}));
+}
+/** Writes the frontmatter above the body. Comark's own writer leaves out the `---` lines when the body is empty. */
+function withFrontmatter(body, frontmatter = {}) {
+	if (!Object.keys(frontmatter).length) return body;
+	return `---\n${renderFrontmatter(frontmatter, "")}\n---\n${body ? `\n${body}` : ""}`;
 }
 /**
 * Whether the editor can open this Markdown and save it without changing what readers see. Pass the parse plugins the
 * page renders with, so syntax only they read, such as footnote definitions, counts too.
 */
 async function checkMarkdown(markdown, options = {}) {
+	const frontmatter = readFrontmatter(markdown);
+	if (frontmatter.kind === "lost") return {
+		editable: false,
+		reason: frontmatter.problem
+	};
 	const first = await fromMarkdown(markdown);
 	if (first.lossy) return { editable: false };
 	const written = await toMarkdown(first.doc, first);
@@ -1273,10 +1347,28 @@ function createEditorCodec(options = {}) {
 	});
 	return {
 		extensions: () => [kit],
-		fromMarkdown: async (markdown) => (await fromMarkdown(markdown)).doc,
+		async fromMarkdown(markdown) {
+			const frontmatter = readFrontmatter(markdown);
+			return (await fromMarkdown(frontmatter.kind === "lost" ? frontmatter.body ?? markdown : markdown)).doc;
+		},
 		toMarkdown: (doc) => toMarkdown(doc),
+		split(markdown) {
+			const frontmatter = readFrontmatter(markdown);
+			return frontmatter.kind === "kept" ? {
+				body: frontmatter.body,
+				fields: frontmatter.fields
+			} : {
+				body: markdown,
+				fields: {}
+			};
+		},
+		join: ({ body, fields }) => withFrontmatter(body, fields),
 		async verify(markdown) {
-			if (Object.keys((await fromMarkdown(markdown)).frontmatter).length) return { writable: false };
+			const frontmatter = readFrontmatter(markdown);
+			if (frontmatter.kind !== "none") return {
+				writable: false,
+				issues: [{ message: frontmatter.kind === "lost" ? frontmatter.problem : "The frontmatter is in the room's body, where a save would drop it; open the room with the codec's `split()` so it stays in the room's fields." }]
+			};
 			const check = await checkMarkdown(markdown, { plugins: options.plugins });
 			return check.editable ? {
 				writable: true,

package/dist/editor-vue.d.mts

@@ -1,8 +1,9 @@
-import { x as ComarkKitOptions } from "./editor-KD97dL_1.mjs";
+import { S as ComarkKitOptions } from "./editor-yoVL7Ajq.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-9IcfELjG.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-KD97dL_1.d.mts → editor-yoVL7Ajq.d.mts}

@@ -50,7 +50,7 @@ declare const ComarkKit: Extension<ComarkKitOptions, any>;
 interface EditorDocument {
   /** The document as Tiptap JSON, for `setContent` or a collaborative room. */
   doc: JSONContent;
-  /** The front matter, which stays outside the editor: a collaborative room keeps only the body. */
+  /** The front matter, which stays outside the editor. A collaborative room keeps it beside the body, in its fields. */
   frontmatter: Record<string, unknown>;
   /** The Markdown holds something the editor can't keep, so writing it back would change more than the edit. */
   lossy: boolean;
@@ -61,11 +61,17 @@ declare function fromMarkdown(markdown: string): Promise<EditorDocument>;
 declare function toMarkdown(doc: JSONContent, options?: {
   frontmatter?: Record<string, unknown>;
 }): Promise<string>;
+/** A Markdown file as a collaborative room holds it: the body the editor shows, and the frontmatter beside it. */
+interface SplitMarkdown {
+  body: string;
+  fields: Record<string, unknown>;
+}
 type MarkdownCheck = {
   editable: true;
   /** The Markdown as the editor writes it, which the first save produces. */ markdown: string;
 } | {
   editable: false;
+  /** Why, when it's the frontmatter the editor can't keep. */ reason?: string;
 };
 /**
  * Whether the editor can open this Markdown and save it without changing what readers see. Pass the parse plugins the
@@ -128,15 +134,33 @@ declare const Upload: Extension<UploadOptions, any>;
  * A schema and Markdown codec that a server and its browsers share, as a collaborative room needs: the server converts
  * the stored Markdown with it, and every editor that joins builds the same schema from `extensions()`. ViteHub
  * Realtime's `editor` option takes it as it is.
+ *
+ * A room holds the body as the editor's document and the frontmatter as its fields, a map of one value per key, so an
+ * edit to the text never writes over the metadata. `split()` and `join()` convert between a stored file and the two.
  */
 interface EditorCodec {
   extensions(): AnyExtension[];
+  /** Reads a room's body, without frontmatter. */
   fromMarkdown(markdown: string): Promise<JSONContent>;
+  /** Writes a room's body, without frontmatter. */
   toMarkdown(doc: JSONContent): Promise<string>;
-  /** Whether the room may save this document. `canonical` is what the first save writes for it unchanged. */
+  /**
+   * Splits a stored file into the room's body and fields. Frontmatter a save couldn't write back stays in the body,
+   * where `verify()` says why the room can't save it.
+   */
+  split(markdown: string): SplitMarkdown;
+  /** Joins a room's body and fields into the file to store. */
+  join(document: SplitMarkdown): string;
+  /**
+   * Whether the room may save this body. `canonical` is what the first save writes for it unchanged, and `issues` says
+   * why a body that still holds frontmatter can't be saved. The fields need no check: every JSON value survives YAML.
+   */
   verify(markdown: string): Promise<{
     writable: boolean;
     canonical?: string;
+    issues?: {
+      message: string;
+    }[];
   }>;
 }
 interface EditorCodecOptions {
@@ -146,4 +170,4 @@ interface EditorCodecOptions {
 }
 declare function createEditorCodec(options?: EditorCodecOptions): EditorCodec;
 //#endregion
-export { FootnoteDefinition as A, CriticComment as C, DefinitionDescription as D, CriticInsertion as E, InlineFootnote as M, DefinitionList as O, ComarkSlot as S, CriticHighlight as T, ComarkComment as _, Upload as a, ComarkKit as b, startUploads as c, EditorDocument as d, MarkdownCheck as f, ComarkBlock as g, toMarkdown as h, PendingUpload as i, FootnoteReference as j, DefinitionTerm as k, uploadKey as l, fromMarkdown as m, EditorCodecOptions as n, UploadOptions as o, checkMarkdown as p, createEditorCodec as r, findUpload as s, EditorCodec as t, uploadPlugin as u, ComarkImage as v, CriticDeletion as w, ComarkKitOptions as x, ComarkInline as y };
+export { DefinitionTerm as A, ComarkSlot as C, CriticInsertion as D, CriticHighlight as E, FootnoteReference as M, InlineFootnote as N, DefinitionDescription as O, ComarkKitOptions as S, CriticDeletion as T, ComarkBlock as _, Upload as a, ComarkInline as b, startUploads as c, EditorDocument as d, MarkdownCheck as f, toMarkdown as g, fromMarkdown as h, PendingUpload as i, FootnoteDefinition as j, DefinitionList as k, uploadKey as l, checkMarkdown as m, EditorCodecOptions as n, UploadOptions as o, SplitMarkdown as p, createEditorCodec as r, findUpload as s, EditorCodec as t, uploadPlugin as u, ComarkComment as v, CriticComment as w, ComarkKit as x, ComarkImage as y };

package/dist/editor.d.mts

@@ -1,2 +1,2 @@
-import { A as FootnoteDefinition, C as CriticComment, D as DefinitionDescription, E as CriticInsertion, M as InlineFootnote, O as DefinitionList, S as ComarkSlot, T as CriticHighlight, _ as ComarkComment, a as Upload, b as ComarkKit, c as startUploads, d as EditorDocument, f as MarkdownCheck, g as ComarkBlock, h as toMarkdown, i as PendingUpload, j as FootnoteReference, k as DefinitionTerm, l as uploadKey, m as fromMarkdown, n as EditorCodecOptions, o as UploadOptions, p as checkMarkdown, r as createEditorCodec, s as findUpload, t as EditorCodec, u as uploadPlugin, v as ComarkImage, w as CriticDeletion, x as ComarkKitOptions, y as ComarkInline } from "./editor-KD97dL_1.mjs";
-export { ComarkBlock, ComarkComment, ComarkImage, ComarkInline, ComarkKit, type ComarkKitOptions, ComarkSlot, CriticComment, CriticDeletion, CriticHighlight, CriticInsertion, DefinitionDescription, DefinitionList, DefinitionTerm, type EditorCodec, type EditorCodecOptions, type EditorDocument, FootnoteDefinition, FootnoteReference, InlineFootnote, type MarkdownCheck, type PendingUpload, Upload, type UploadOptions, checkMarkdown, createEditorCodec, findUpload, fromMarkdown, startUploads, toMarkdown, uploadKey, uploadPlugin };
+import { A as DefinitionTerm, C as ComarkSlot, D as CriticInsertion, E as CriticHighlight, M as FootnoteReference, N as InlineFootnote, O as DefinitionDescription, S as ComarkKitOptions, T as CriticDeletion, _ as ComarkBlock, a as Upload, b as ComarkInline, c as startUploads, d as EditorDocument, f as MarkdownCheck, g as toMarkdown, h as fromMarkdown, i as PendingUpload, j as FootnoteDefinition, k as DefinitionList, l as uploadKey, m as checkMarkdown, n as EditorCodecOptions, o as UploadOptions, p as SplitMarkdown, r as createEditorCodec, s as findUpload, t as EditorCodec, u as uploadPlugin, v as ComarkComment, w as CriticComment, x as ComarkKit, y as ComarkImage } from "./editor-yoVL7Ajq.mjs";
+export { ComarkBlock, ComarkComment, ComarkImage, ComarkInline, ComarkKit, type ComarkKitOptions, ComarkSlot, CriticComment, CriticDeletion, CriticHighlight, CriticInsertion, DefinitionDescription, DefinitionList, DefinitionTerm, type EditorCodec, type EditorCodecOptions, type EditorDocument, FootnoteDefinition, FootnoteReference, InlineFootnote, type MarkdownCheck, type PendingUpload, type SplitMarkdown, Upload, type UploadOptions, checkMarkdown, createEditorCodec, findUpload, fromMarkdown, startUploads, toMarkdown, uploadKey, uploadPlugin };

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-9IcfELjG.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 { t as typesetCss } from "./typeset-css-blSNpFNK.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-kUEiRbtp.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/index.mjs

@@ -1,3 +1,3 @@
-import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
+import { t as typesetCss } from "./typeset-css-blSNpFNK.mjs";
 import { i as typeset, n as preset, r as TYPESET_TAG, t as criticCss } from "./src-PkmYCSNu.mjs";
 export { 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 { t as typesetCss } from "./typeset-css-blSNpFNK.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-kUEiRbtp.mjs";
 import { createElement, useEffect } from "react";
 import * as badge from "comark-badge/react";
 import * as cards from "comark-cards/react";