@threadlabs/looma 0.28.16 → 0.28.18

package/editor/chunks/extensions.js

@@ -242,6 +242,25 @@ function parseLoomaAttributes(source) {
 	return read && read.end === source.length ? read.attributes : null;
 }
 /**
+* Writes attributes as a brace list, `id` first as `#id`, then the rest in order.
+* @contract `true` writes a bare key; values are quoted only when they need it. `false`, null and
+* undefined values are left out, and an empty set writes an empty string. An ID that `#` cannot
+* carry, or any ID when `hashId` is false, is written `id=…`.
+*/
+function formatLoomaAttributes(attributes, { hashId = true } = {}) {
+	const items = [];
+	const { id, ...rest } = attributes;
+	const hashed = hashId && typeof id === "string" && /^[\w-]+$/.test(id);
+	if (hashed) items.push(`#${id}`);
+	for (const [key, value] of Object.entries(hashed ? rest : attributes)) if (value === true) items.push(key);
+	else if (value === false || value === null || value === void 0) continue;
+	else {
+		const text = String(value);
+		items.push(/^[^\s"'=<>`{}]+$/.test(text) ? `${key}=${text}` : text.includes("\"") ? `${key}='${text}'` : `${key}="${text}"`);
+	}
+	return items.length ? `{${items.join(" ")}}` : "";
+}
+/**
 * The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
 * marks, with every other run of characters one hyphen.
 * @failure Text with no letters or numbers, such as only emoji, derives `heading`.
@@ -290,15 +309,46 @@ function parseLoomaFenceInfo(info) {
 		...numbers ? { lineNumbers: numbers[1] === void 0 } : {}
 	};
 }
+var MAPPING_KEY = /^(?:[^\s#:'"\-?,[\]{}&*!|>%@`][^:\n]*?|"[^"\n]*"|'[^'\n]*')[ \t]*:(?:[ \t]|$)/;
+var NOTATION = /[ \t]*(?:\/\/|#|--|<!--|\{?\/\*)[ \t]*\[!code highlight(?::(\d+))?\][ \t]*(?:-->|\*\/\}?)?[ \t]*$/;
+/**
+* Applies code notation: a line ending in a `[!code highlight]` comment is highlighted and loses
+* the comment, `[!code highlight:3]` covers three lines, and a marker alone on its line is removed
+* with the line and applies to the lines after it.
+* @contract Returns the code a reader sees and its highlighted line numbers, from 1, ascending.
+* ponytail: matched on source lines, so a string that ends in the marker counts too.
+*/
+function applyLoomaCodeNotation(code) {
+	const kept = [];
+	const lines = /* @__PURE__ */ new Set();
+	for (const line of code.split("\n")) {
+		const match = NOTATION.exec(line);
+		if (!match) {
+			kept.push(line);
+			continue;
+		}
+		const rest = line.slice(0, match.index);
+		const own = rest.trim() !== "";
+		if (own) kept.push(rest);
+		for (let count = 0; count < Number(match[1] ?? 1); count++) lines.add(kept.length + (own ? 0 : 1) + count);
+	}
+	return {
+		code: kept.join("\n"),
+		lines: [...lines].sort((a, b) => a - b)
+	};
+}
 /**
 * Splits YAML front matter from the start of a document.
-* @contract Front matter opens with a `---` line at the very start, holds at least one `key: value`
-* line, and closes at a `---` or `...` line. `source` is the block as written, delimiters included.
+* @contract Front matter opens with a `---` line at the very start and closes at a `---` or `...`
+* line, and what lies between is a YAML mapping: its first line that is not blank or a comment
+* starts with a key, whose value may be a scalar, a list or a mapping. `source` is the block as
+* written, delimiters included.
 * @failure Returns null when the document has none.
 */
 function splitLoomaFrontmatter(document) {
 	const match = /^---[ \t]*\r?\n([\s\S]*?)\r?\n(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/.exec(document.slice(0, 8192));
-	if (!match || !/^[A-Za-z][\w-]*:[ \t]*\S/m.test(match[1])) return null;
+	const first = match?.[1].split(/\r?\n/).find((line) => line.trim() && !line.trimStart().startsWith("#"));
+	if (!match || !first || !MAPPING_KEY.test(first)) return null;
 	return {
 		source: match[0].trimEnd(),
 		yaml: match[1],
@@ -625,6 +675,144 @@ var LoomaExpand = Node$1.create({
 	}
 });
 //#endregion
+//#region src/editor/extensions/figure.ts
+/**
+* An image with a caption, saved as `<figure><img><figcaption>` and written in Looma Markdown as
+* `::: figure Caption`. The caption is inline content the author edits in place.
+* @invariant A figure holds exactly one block image and one caption; an empty caption stays empty.
+*/
+var LoomaFigure = Node$1.create({
+	name: "loomaFigure",
+	group: "block",
+	content: "image loomaFigcaption",
+	defining: true,
+	parseHTML() {
+		return [{
+			tag: "figure",
+			getAttrs: (element) => element.querySelector(":scope > img") ? null : false
+		}];
+	},
+	renderHTML() {
+		return ["figure", 0];
+	}
+});
+/**
+* A figure's caption: inline content under its image.
+* @invariant It exists only as the second child of `LoomaFigure`.
+*/
+var LoomaFigcaption = Node$1.create({
+	name: "loomaFigcaption",
+	content: "inline*",
+	defining: true,
+	parseHTML() {
+		return [{ tag: "figcaption" }];
+	},
+	renderHTML() {
+		return ["figcaption", 0];
+	}
+});
+//#endregion
+//#region src/editor/extensions/tabs.ts
+/**
+* Tabs or a code group, kept whole so Looma Markdown's `::: tabs` and `::: code-group` survive
+* editing. Saved as `<ui-tabs group>` with a `<section aria-label>` per panel.
+* @contract While editing, panels show one after another under their labels; the Tabs component
+* draws them only where the saved HTML renders.
+*/
+var LoomaTabs = Node$1.create({
+	name: "loomaTabs",
+	group: "block",
+	content: "loomaTab+",
+	defining: true,
+	isolating: true,
+	addAttributes() {
+		return {
+			group: {
+				default: "",
+				parseHTML: (element) => element.getAttribute("group") ?? "",
+				renderHTML: (attributes) => attributes.group ? { group: attributes.group } : {}
+			},
+			codeGroup: {
+				default: false,
+				parseHTML: (element) => element.classList.contains("code-group"),
+				renderHTML: (attributes) => attributes.codeGroup ? { class: "code-group" } : {}
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "ui-tabs" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"ui-tabs",
+			HTMLAttributes,
+			0
+		];
+	},
+	addNodeView() {
+		return () => {
+			const dom = document.createElement("div");
+			dom.dataset.loomaTabs = "";
+			return {
+				dom,
+				contentDOM: dom
+			};
+		};
+	}
+});
+/**
+* One panel of `LoomaTabs`, labelled by `label`.
+* @invariant It exists only inside `LoomaTabs`; its label is the tab Tabs shows and the `== Label` line Markdown writes.
+*/
+var LoomaTab = Node$1.create({
+	name: "loomaTab",
+	content: "block+",
+	defining: true,
+	isolating: true,
+	addAttributes() {
+		return { label: {
+			default: "",
+			parseHTML: (element) => element.getAttribute("aria-label") ?? "",
+			renderHTML: (attributes) => ({ "aria-label": attributes.label })
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "ui-tabs > section" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"section",
+			HTMLAttributes,
+			0
+		];
+	},
+	addNodeView() {
+		return ({ node }) => {
+			let current = node;
+			const dom = document.createElement("section");
+			const label = document.createElement("div");
+			label.contentEditable = "false";
+			label.dataset.loomaTabLabel = "";
+			label.textContent = node.attrs.label;
+			const contentDOM = document.createElement("div");
+			dom.setAttribute("aria-label", node.attrs.label);
+			dom.append(label, contentDOM);
+			return {
+				dom,
+				contentDOM,
+				update(next) {
+					if (next.type !== current.type) return false;
+					current = next;
+					label.textContent = next.attrs.label;
+					dom.setAttribute("aria-label", next.attrs.label);
+					return true;
+				},
+				ignoreMutation: (mutation) => mutation.type !== "selection" && !contentDOM.contains(mutation.target)
+			};
+		};
+	}
+});
+//#endregion
 //#region src/editor/extensions/table-of-contents.ts
 /** Normalize loaded configuration without persisting unsupported presentation values. */
 function normalizeTableOfContentsConfig(attributes) {
@@ -671,7 +859,17 @@ function tableOfContentsTree(entries) {
 	}
 	return roots;
 }
-function anchorTransaction(state) {
+var derivedFrom = (id, text) => {
+	const slug = loomaHeadingSlug(text);
+	return id === slug || id.startsWith(`${slug}-`) && /^\d+$/.test(id.slice(slug.length + 1));
+};
+/**
+* Keeps heading anchors on Looma Markdown's rule. An anchor derived from its heading's text
+* (as it read before this change) follows the text; any other, including `looma-heading-N` anchors
+* saved before this rule, is a custom anchor and stays, so links to it keep working. With
+* a table of contents every heading gets an anchor; without one, only headings that have one.
+*/
+function anchorTransaction(state, previous) {
 	let hasToc = false;
 	const headings = [];
 	state.doc.descendants((node, position) => {
@@ -681,24 +879,28 @@ function anchorTransaction(state) {
 			position
 		});
 	});
-	if (!hasToc) return null;
-	const reserved = new Set(headings.map(({ node }) => String(node.attrs.id ?? "")).filter(Boolean));
-	const used = /* @__PURE__ */ new Set();
+	if (!headings.length) return null;
+	const before = /* @__PURE__ */ new Map();
+	previous?.descendants((node) => {
+		if (node.type.name === "heading" && typeof node.attrs.id === "string") before.set(node.attrs.id, node.textContent.trim());
+	});
+	const custom = (node) => {
+		const id = node.attrs.id;
+		if (typeof id !== "string" || !id || /\s/.test(id)) return void 0;
+		return derivedFrom(id, before.get(id) ?? node.textContent.trim()) ? void 0 : id;
+	};
+	const ids = assignLoomaHeadingIds(headings.map(({ node }) => ({
+		text: node.textContent.trim(),
+		id: custom(node)
+	})));
 	const transaction = state.tr;
-	let sequence = 1;
-	for (const { node, position } of headings) {
-		let id = typeof node.attrs.id === "string" ? node.attrs.id : "";
-		if (!id || /\s/.test(id) || used.has(id)) {
-			do
-				id = `looma-heading-${sequence++}`;
-			while (reserved.has(id) || used.has(id));
-			transaction.setNodeMarkup(position, void 0, {
-				...node.attrs,
-				id
-			});
-		}
-		used.add(id);
-	}
+	headings.forEach(({ node, position }, index) => {
+		if (node.attrs.id === ids[index] || !hasToc && !node.attrs.id) return;
+		transaction.setNodeMarkup(position, void 0, {
+			...node.attrs,
+			id: ids[index]
+		});
+	});
 	return transaction.docChanged ? transaction : null;
 }
 var LoomaHeadingAnchors = Extension.create({
@@ -714,7 +916,7 @@ var LoomaHeadingAnchors = Extension.create({
 		if (transaction) this.editor.view.dispatch(transaction.setMeta("addToHistory", false));
 	},
 	addProseMirrorPlugins() {
-		return [new Plugin({ appendTransaction: (transactions, _oldState, state) => transactions.some((transaction) => transaction.docChanged) ? anchorTransaction(state) : null })];
+		return [new Plugin({ appendTransaction: (transactions, oldState, state) => transactions.some((transaction) => transaction.docChanged) ? anchorTransaction(state, oldState.doc) : null })];
 	}
 });
 function contentsHtml(doc, config) {
@@ -9332,7 +9534,7 @@ var TAB_LABEL = /^==[ \t]+(\S.*?)[ \t]*$/;
 var OPEN_FLAG = /[ \t]*\{open\}$/;
 var ALERT = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\n|$)/i;
 var LEAF = /^::([A-Za-z][\w-]*)(\{.*\})?[ \t]*$/;
-var TASK = /^\[([ xX])\][ \t]+/;
+var TASK = /^\[([ xX])\](?:[ \t]+|$)/;
 var TOC_FORMATS = /* @__PURE__ */ new Set([
 	"plain",
 	"bulleted",
@@ -9524,7 +9726,10 @@ function taskLists(state) {
 			inline.content = inline.content.replace(TASK, "");
 			item.attrSet("data-type", "taskItem");
 			item.attrSet("data-checked", String(checked));
-			item.meta = { checked };
+			inline.meta = {
+				...inline.meta,
+				task: checked
+			};
 		}
 	}
 }
@@ -9566,6 +9771,11 @@ function attributes(state) {
 		const token = tokens[index];
 		if (token.type !== "inline" || !token.children) continue;
 		const children = token.children;
+		if (typeof token.meta?.task === "boolean") {
+			const html = (content) => Object.assign(new state.Token("html_inline", "", 0), { content });
+			children.unshift(html(`<label><input type="checkbox" disabled=""${token.meta.task ? " checked=\"\"" : ""}> `));
+			children.push(html("</label>"));
+		}
 		for (let child = children.length - 3; child >= 0; child--) {
 			const text = children[child + 1];
 			if (children[child].type !== "link_open" || children[child].markup !== "linkify" || /^(?:[a-z][\w+.-]*:|www\.)/i.test(text.content)) continue;
@@ -9642,7 +9852,7 @@ function tableOfContents(tokens, format, depth, escape) {
 * @contract Renders the canonical HTML, which is the HTML LoomaEditor saves. It is not sanitized.
 * Linkify and raw HTML are instance options; `createLoomaMarkdownIt` turns both on.
 */
-function loomaMarkdown$1(md) {
+function loomaMarkdown$1(md, { codeNotation = "apply" } = {}) {
 	const escape = md.utils.escapeHtml;
 	md.block.ruler.before("table", "looma_frontmatter", frontmatter);
 	md.block.ruler.before("fence", "looma_container", container, { alt: [
@@ -9693,15 +9903,10 @@ function loomaMarkdown$1(md) {
 		const id = String(attributes.id);
 		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
 	};
-	const listItem = rules.list_item_open ?? ((tokens, index, options, _env, self) => self.renderToken(tokens, index, options));
-	rules.list_item_open = (tokens, index, options, env, self) => {
-		const html = listItem(tokens, index, options, env, self);
-		const task = tokens[index].meta;
-		return task && typeof task.checked === "boolean" ? `${html}<input type="checkbox" disabled=""${task.checked ? " checked=\"\"" : ""}>` : html;
-	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);
-		return `<pre><code${language ? ` class="language-${escape(language)}"` : ""}${meta ? ` data-meta="${escape(meta)}"` : ""}>${escape(content.replace(/\n$/, ""))}</code></pre>\n`;
+		const source = content.replace(/\n$/, "");
+		return `<pre><code${language ? ` class="language-${escape(language)}"` : ""}${meta ? ` data-meta="${escape(meta)}"` : ""}>${escape(codeNotation === "keep" ? source : applyLoomaCodeNotation(source).code)}</code></pre>\n`;
 	};
 	rules.fence = (tokens, index) => code(tokens[index].content, tokens[index].info);
 	rules.code_block = (tokens, index) => code(tokens[index].content, "");
@@ -9710,17 +9915,17 @@ function loomaMarkdown$1(md) {
 * A markdown-it instance for Looma Markdown: raw HTML and GFM autolinks on, with `loomaMarkdown`.
 * @contract Each call returns a new instance that callers may extend.
 */
-function createLoomaMarkdownIt() {
+function createLoomaMarkdownIt(options = {}) {
 	return new MarkdownIt({
 		html: true,
 		linkify: true,
 		typographer: false
-	}).use(loomaMarkdown$1);
+	}).use(loomaMarkdown$1, options);
 }
 //#endregion
 //#region src/editor/extensions/markdown.ts
-/** The markdown-it instance LoomaEditor reads Looma Markdown with. */
-var loomaMarkdown = createLoomaMarkdownIt();
+/** The markdown-it instance LoomaEditor reads Looma Markdown with; code keeps its notation as source. */
+var loomaMarkdown = createLoomaMarkdownIt({ codeNotation: "keep" });
 /**
 * Renders Looma Markdown as the HTML the editor parses.
 * @contract The result is not sanitized; pass it to the editor's `setContent`, whose schema
@@ -9729,29 +9934,46 @@ var loomaMarkdown = createLoomaMarkdownIt();
 function loomaMarkdownToHtml(source) {
 	return loomaMarkdown.render(source);
 }
+var CONTAINERS = /* @__PURE__ */ new Set([
+	"loomaCallout",
+	"loomaExpand",
+	"loomaFigure",
+	"loomaTabs"
+]);
 var containerDepth = (node) => {
 	let depth = 0;
 	node.descendants((child) => {
-		if (child.type.name === "loomaCallout" || child.type.name === "loomaExpand") depth = Math.max(depth, 1 + containerDepth(child));
+		if (!CONTAINERS.has(child.type.name)) return true;
+		depth = Math.max(depth, 1 + containerDepth(child));
 		return false;
 	});
 	return depth;
 };
-function writeContainer(state, node, opening) {
+var endLine = (state) => state.flushClose(1);
+function writeContainer(state, node, opening, content = () => state.renderContent(node)) {
 	const marker = loomaContainerMarker(containerDepth(node));
 	state.write(`${marker} ${opening}`.trimEnd());
 	state.ensureNewLine();
-	state.renderContent(node);
-	state.flushClose(1);
+	content();
+	endLine(state);
 	state.write(marker);
 	state.closeBlock(node);
 }
 var defaults = defaultMarkdownSerializer.nodes;
+var label = (text) => text.replace(/[\\\]]/g, "\\$&");
+var ALIGNMENT = {
+	left: ":---",
+	center: ":---:",
+	right: "---:"
+};
 var NODES = {
 	paragraph: defaults.paragraph,
-	text: defaults.text,
+	text: (state, node, parent, index) => {
+		const marker = /^:{3,}[ \t]*([A-Za-z][\w-]*)?/.exec(node.text ?? "");
+		if ((marker ? !marker[1] || LOOMA_CONTAINER_NAMES.has(marker[1].toLowerCase()) : /^::toc(?![\w-])/i.test(node.text ?? "")) && state.atBlank()) state.write("\\");
+		defaults.text(state, node, parent, index);
+	},
 	blockquote: defaults.blockquote,
-	heading: defaults.heading,
 	horizontalRule: defaults.horizontal_rule,
 	bulletList: (state, node) => state.renderList(node, "  ", () => "- "),
 	orderedList: (state, node) => {
@@ -9759,17 +9981,82 @@ var NODES = {
 		state.renderList(node, "   ", (index) => `${start + index}. `);
 	},
 	listItem: defaults.list_item,
+	taskList: (state, node) => state.renderList(node, "  ", () => "- "),
+	taskItem: (state, node) => {
+		state.write(node.attrs.checked ? "[x] " : "[ ] ");
+		state.renderContent(node);
+	},
 	hardBreak: defaults.hard_break,
 	codeBlock: (state, node) => {
 		const fence = loomaCodeFence(node.textContent);
-		state.write(`${fence}${node.attrs.language ?? ""}\n`);
+		state.write(`${fence}${node.attrs.language ?? ""}${node.attrs.meta ? ` ${node.attrs.meta}` : ""}\n`);
 		state.text(node.textContent, false);
 		state.ensureNewLine();
 		state.write(fence);
 		state.closeBlock(node);
 	},
+	image: (state, node, parent, index) => {
+		defaults.image(state, node, parent, index);
+		const { width, height, placement, responsive } = node.attrs;
+		state.write(formatLoomaAttributes({
+			width,
+			height,
+			placement: placement && placement !== "block" ? placement : null,
+			responsive: responsive === true
+		}));
+		if (node.isBlock) state.closeBlock(node);
+	},
 	loomaCallout: (state, node) => writeContainer(state, node, `${node.attrs.tone} ${node.attrs.heading ?? ""}`),
-	loomaExpand: (state, node) => writeContainer(state, node, `details ${node.attrs.summary}${node.attrs.open ? " {open}" : ""}`)
+	loomaExpand: (state, node) => writeContainer(state, node, `details ${node.attrs.summary}${node.attrs.open ? " {open}" : ""}`),
+	loomaFigure: (state, node) => {
+		const caption = node.lastChild;
+		const marker = loomaContainerMarker(containerDepth(node));
+		state.write(`${marker} figure`);
+		if (caption.content.size) {
+			state.write(" ");
+			state.renderInline(caption, false);
+		}
+		state.ensureNewLine();
+		state.render(node.firstChild, node, 0);
+		endLine(state);
+		state.write(marker);
+		state.closeBlock(node);
+	},
+	loomaFigcaption: (state, node) => state.renderInline(node),
+	loomaTabs: (state, node) => {
+		const name = node.attrs.codeGroup ? "code-group" : "tabs";
+		const bare = node.attrs.codeGroup && Array.from({ length: node.childCount }, (_, index) => node.child(index)).every((tab) => {
+			const code = tab.firstChild;
+			if (tab.childCount !== 1 || code?.type.name !== "codeBlock") return false;
+			const { title, language } = parseLoomaFenceInfo(`${code.attrs.language ?? ""} ${code.attrs.meta ?? ""}`);
+			return tab.attrs.label === (title ?? language ?? "Code");
+		});
+		writeContainer(state, node, `${name} ${node.attrs.group && node.attrs.group !== name ? node.attrs.group : ""}`, () => node.forEach((tab, _offset, index) => {
+			if (index) endLine(state);
+			if (!bare) {
+				state.write(`== ${tab.attrs.label}`);
+				state.ensureNewLine();
+			}
+			state.renderContent(tab);
+		}));
+	},
+	loomaTab: (state, node) => state.renderContent(node),
+	loomaTableOfContents: (state, node) => {
+		const { format, depth } = node.attrs;
+		state.write(`::toc${formatLoomaAttributes({
+			depth: depth !== 3 ? depth : null,
+			format: format !== "plain" ? format : null
+		})}`);
+		state.closeBlock(node);
+	},
+	loomaChip: (state, node) => {
+		const tone = normalizeLoomaChipTone(node.attrs.color);
+		state.write(`:chip[${label(String(node.attrs.label ?? ""))}]${formatLoomaAttributes({ tone: tone !== "neutral" ? tone : null })}`);
+	},
+	mention: (state, node) => {
+		const id = String(node.attrs.id ?? "");
+		state.write(`:mention[${label(String(node.attrs.label ?? id))}]${formatLoomaAttributes({ id }, { hashId: false })}`);
+	}
 };
 var MARKS = {
 	bold: defaultMarkdownSerializer.marks.strong,
@@ -9793,31 +10080,96 @@ var MARKS = {
 		mixable: true
 	}
 };
+function customHeadingIds(doc) {
+	const headings = [];
+	doc.descendants((node) => {
+		if (node.type.name === "heading") headings.push({
+			text: node.textContent.trim(),
+			id: typeof node.attrs.id === "string" && node.attrs.id ? node.attrs.id : void 0
+		});
+	});
+	const marked = /* @__PURE__ */ new Set();
+	for (;;) {
+		const derived = assignLoomaHeadingIds(headings.map(({ text, id }, index) => ({
+			text,
+			id: marked.has(index) ? id : void 0
+		})));
+		const next = headings.findIndex(({ id }, index) => id && !marked.has(index) && derived[index] !== id);
+		if (next < 0) return marked;
+		marked.add(next);
+	}
+}
 /**
-* Writes an editor document as Looma Markdown, with callouts and expand sections as `:::`
-* containers that `loomaMarkdownToHtml` and Markupress read.
-* @contract Content Markdown has no syntax for (tables, task lists, images, chips, mentions,
-* the table of contents) is written as its saved HTML, which Markdown carries unchanged.
-* Marks without a Markdown form other than underline and highlight are dropped.
+* Writes an editor document as Looma Markdown, the form `loomaMarkdownToHtml` and Markupress read.
+* @contract Every node in the default preset has a Markdown form. A table that fits GFM is a GFM
+* table and any other is HTML. Content from extensions outside the preset is written as its saved
+* HTML, and marks without a Markdown form other than underline and highlight are dropped.
 */
 function loomaMarkdownFromDoc(doc) {
-	const dom = DOMSerializer.fromSchema(doc.type.schema);
+	const schema = doc.type.schema;
+	const dom = DOMSerializer.fromSchema(schema);
 	const html = (node) => {
 		const holder = document.createElement("div");
 		holder.append(dom.serializeNode(node));
 		return holder.innerHTML;
 	};
-	const nodes = {};
-	for (const name of Object.keys(doc.type.schema.nodes)) nodes[name] = NODES[name] ?? ((state, node) => {
+	const custom = customHeadingIds(doc);
+	let heading = 0;
+	const nodes = {
+		heading: (state, node) => {
+			state.write(`${"#".repeat(node.attrs.level)} `);
+			state.renderInline(node, false);
+			if (custom.has(heading++)) state.write(` {#${node.attrs.id}}`);
+			else {
+				const out = state;
+				out.out = out.out.replace(/([ \t])\{([^{}]*\})$/, "$1\\{$2");
+			}
+			state.closeBlock(node);
+		},
+		table: (state, node) => {
+			state.write(gfmTable(node) ?? `<table><tbody>${Array.from({ length: node.childCount }, (_, index) => html(node.child(index))).join("")}</tbody></table>`.replace(/ (?:colspan|rowspan)="1"/g, ""));
+			state.closeBlock(node);
+		}
+	};
+	for (const name of Object.keys(schema.nodes)) nodes[name] ??= NODES[name] ?? ((state, node) => {
 		state.write(html(node));
 		if (node.isBlock) state.closeBlock(node);
 	});
 	const marks = {};
-	for (const name of Object.keys(doc.type.schema.marks)) marks[name] = MARKS[name] ?? {
+	for (const name of Object.keys(schema.marks)) marks[name] = MARKS[name] ?? {
 		open: "",
 		close: ""
 	};
-	return new MarkdownSerializer(nodes, marks).serialize(doc, { tightLists: true });
+	const serializer = new MarkdownSerializer(nodes, marks);
+	const inline = (paragraph) => serializer.serialize(schema.topNodeType.create(null, paragraph)).replace(/\|/g, "\\|");
+	function gfmTable(table) {
+		const rows = Array.from({ length: table.childCount }, (_, index) => table.child(index));
+		const width = rows[0]?.childCount ?? 0;
+		const alignments = [];
+		const lines = [];
+		for (const [rowIndex, row] of rows.entries()) {
+			if (row.childCount !== width) return null;
+			const cells = [];
+			for (let column = 0; column < width; column++) {
+				const cell = row.child(column);
+				const { colspan, rowspan, colwidth, backgroundColor, textAlign } = cell.attrs;
+				const paragraph = cell.firstChild;
+				if (cell.type.name === "tableHeader" !== (rowIndex === 0) || colspan !== 1 || rowspan !== 1 || colwidth || backgroundColor || cell.childCount !== 1 || paragraph?.type.name !== "paragraph") return null;
+				let hasBreak = false;
+				paragraph.descendants((child) => {
+					if (child.type.name === "hardBreak") hasBreak = true;
+				});
+				if (hasBreak) return null;
+				if (rowIndex === 0) alignments.push(textAlign ?? null);
+				else if ((textAlign ?? null) !== alignments[column]) return null;
+				cells.push(inline(paragraph));
+			}
+			lines.push(`| ${cells.join(" | ")} |`);
+			if (rowIndex === 0) lines.push(`| ${alignments.map((alignment) => ALIGNMENT[alignment] ?? "---").join(" | ")} |`);
+		}
+		return width ? lines.join("\n") : null;
+	}
+	return serializer.serialize(doc, { tightLists: true });
 }
 //#endregion
 //#region src/editor/extensions/smart-paste.ts
@@ -9893,8 +10245,12 @@ function parseHtmlSlice(schema, value, fromHtml = false) {
 			"template"
 		],
 		FORBID_ATTR: ["style"],
-		ADD_TAGS: ["ui-callout"],
-		ADD_ATTR: ["tone", "heading"],
+		ADD_TAGS: ["ui-callout", "ui-tabs"],
+		ADD_ATTR: [
+			"tone",
+			"heading",
+			"group"
+		],
 		RETURN_DOM_FRAGMENT: true
 	}));
 	if (!container.textContent?.trim() && !container.querySelector("img, hr")) return Slice.empty;
@@ -10438,6 +10794,16 @@ function setActiveTableCellBackground(editor, backgroundColor) {
 * Uses the Vanilla JS Tiptap API; apps provide @tiptap/core and Looma ships the preset extensions.
 */
 var LoomaCodeBlock = CodeBlockLowlight.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			meta: {
+				default: null,
+				parseHTML: (element) => element.querySelector("code")?.getAttribute("data-meta") || element.getAttribute("data-meta") || null,
+				renderHTML: () => ({})
+			}
+		};
+	},
 	renderHTML({ node, HTMLAttributes }) {
 		return [
 			"pre",
@@ -10446,6 +10812,7 @@ var LoomaCodeBlock = CodeBlockLowlight.extend({
 				"code",
 				{
 					class: node.attrs.language ? `${this.options.languageClassPrefix}${node.attrs.language}` : null,
+					"data-meta": node.attrs.meta || null,
 					spellcheck: "false"
 				},
 				0
@@ -10521,7 +10888,10 @@ function getDefaultEditorExtensions(options = {}) {
 		Heading.configure({ levels: [
 			1,
 			2,
-			3
+			3,
+			4,
+			5,
+			6
 		] }),
 		BulletList,
 		OrderedList,
@@ -10531,6 +10901,9 @@ function getDefaultEditorExtensions(options = {}) {
 		Blockquote,
 		calloutNodeView ? LoomaCallout.extend({ addNodeView: () => calloutNodeView }) : LoomaCallout,
 		LoomaChip,
+		LoomaTabs,
+		LoomaTab,
+		...imageInline ? [] : [LoomaFigure, LoomaFigcaption],
 		LoomaExpand.configure({ nodeView: expandNodeView ?? null }),
 		LoomaTableOfContents.configure({ nodeView: tableOfContentsNodeView ?? null }),
 		dividerNodeView ? HorizontalRule.extend({ addNodeView: () => dividerNodeView }) : HorizontalRule,
@@ -11522,4 +11895,4 @@ function createLoomaSlashCommandExtension(options = {}) {
 	});
 }
 //#endregion
-export { filterLoomaMentionItems as A, LOOMA_CHIP_COLORS as B, loomaMarkdownToHtml as C, createLoomaMentionExtension as D, LoomaMentionSuggestionPluginKey as E, LoomaTableOfContents as F, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as G, normalizeLoomaChipColor as H, getTableOfContentsEntries as I, LoomaActiveBlock as J, LOOMA_ACTIVE_BLOCK_CLASS as K, normalizeTableOfContentsConfig as L, LoomaImage as M, normalizeImageDimension as N, DEFAULT_MENTION_RESULT_LIMIT as O, normalizeImagePlacement as P, LoomaExpand as R, loomaMarkdownFromDoc as S, siteRelativeHref as T, LoomaCallout as U, LoomaChip as V, LOOMA_CALLOUT_TONES as W, LoomaActiveBlockPluginKey as Y, getActiveTableCellAlignment as _, getActiveTableUiState as a, setActiveTableCellBackground as b, insertTableAtRange as c, LoomaTableKit as d, getDefaultEditorExtensions as f, LoomaTableHeader as g, LoomaTableCell as h, getDefaultSlashCommands as i, normalizeMentionResultLimit as j, MAX_MENTION_RESULT_LIMIT as k, normalizeActiveTableColumnWidths as l, LoomaTable as m, createLoomaSlashCommandExtension as n, handleTableAction as o, getLoomaTableExtensions as p, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as q, filterLoomaSlashCommands as r, handleTableOverlayAction as s, LoomaSlashCommand as t, shouldShowTextFormattingToolbar as u, getActiveTableCellBackground as v, createSiteRelativeLinks as w, LoomaSmartPaste as x, setActiveTableCellAlignment as y, revealLoomaExpandAt as z };
+export { LoomaActiveBlockPluginKey as $, filterLoomaMentionItems as A, LoomaFigcaption as B, loomaMarkdownToHtml as C, createLoomaMentionExtension as D, LoomaMentionSuggestionPluginKey as E, LoomaTableOfContents as F, LoomaChip as G, LoomaExpand as H, getTableOfContentsEntries as I, LOOMA_CALLOUT_TONES as J, normalizeLoomaChipColor as K, normalizeTableOfContentsConfig as L, LoomaImage as M, normalizeImageDimension as N, DEFAULT_MENTION_RESULT_LIMIT as O, normalizeImagePlacement as P, LoomaActiveBlock as Q, LoomaTab as R, loomaMarkdownFromDoc as S, siteRelativeHref as T, revealLoomaExpandAt as U, LoomaFigure as V, LOOMA_CHIP_COLORS as W, LOOMA_ACTIVE_BLOCK_CLASS as X, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS as Y, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS as Z, getActiveTableCellAlignment as _, getActiveTableUiState as a, setActiveTableCellBackground as b, insertTableAtRange as c, LoomaTableKit as d, getDefaultEditorExtensions as f, LoomaTableHeader as g, LoomaTableCell as h, getDefaultSlashCommands as i, normalizeMentionResultLimit as j, MAX_MENTION_RESULT_LIMIT as k, normalizeActiveTableColumnWidths as l, LoomaTable as m, createLoomaSlashCommandExtension as n, handleTableAction as o, getLoomaTableExtensions as p, LoomaCallout as q, filterLoomaSlashCommands as r, handleTableOverlayAction as s, LoomaSlashCommand as t, shouldShowTextFormattingToolbar as u, getActiveTableCellBackground as v, createSiteRelativeLinks as w, LoomaSmartPaste as x, setActiveTableCellAlignment as y, LoomaTabs as z };

package/editor/extensions/figure.d.ts

@@ -0,0 +1,12 @@
+import { Node } from "@tiptap/core";
+/**
+ * An image with a caption, saved as `<figure><img><figcaption>` and written in Looma Markdown as
+ * `::: figure Caption`. The caption is inline content the author edits in place.
+ * @invariant A figure holds exactly one block image and one caption; an empty caption stays empty.
+ */
+export declare const LoomaFigure: Node<any, any>;
+/**
+ * A figure's caption: inline content under its image.
+ * @invariant It exists only as the second child of `LoomaFigure`.
+ */
+export declare const LoomaFigcaption: Node<any, any>;

package/editor/extensions/index.d.ts

@@ -10,6 +10,8 @@ export { LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIV
 export { LoomaCallout, LOOMA_CALLOUT_TONES, type LoomaCalloutTone, } from "./callout.js";
 export { LoomaChip, LOOMA_CHIP_COLORS, normalizeLoomaChipColor, type LoomaChipColor } from "./chip.js";
 export { LoomaExpand, revealLoomaExpandAt, type LoomaExpandAttributes } from "./expand.js";
+export { LoomaFigcaption, LoomaFigure } from "./figure.js";
+export { LoomaTab, LoomaTabs } from "./tabs.js";
 export { LoomaTableOfContents, getTableOfContentsEntries, normalizeTableOfContentsConfig, type LoomaTableOfContentsConfig, type LoomaTableOfContentsEntry, type LoomaTableOfContentsFormat, } from "./table-of-contents.js";
 export { getDefaultEditorExtensions, getLoomaTableExtensions, LoomaTableKit, type DefaultEditorExtensionsOptions, type LoomaCodeLanguages, } from "./preset.js";
 export { LoomaSmartPaste } from "./smart-paste.js";

package/editor/extensions/index.js

@@ -1,3 +1,3 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS } from "../chunks/table-backgrounds.js";
-import { A as filterLoomaMentionItems, B as LOOMA_CHIP_COLORS, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, H as normalizeLoomaChipColor, I as getTableOfContentsEntries, J as LoomaActiveBlock, K as LOOMA_ACTIVE_BLOCK_CLASS, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, R as LoomaExpand, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaCallout, V as LoomaChip, W as LOOMA_CALLOUT_TONES, Y as LoomaActiveBlockPluginKey, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as revealLoomaExpandAt } from "../chunks/extensions.js";
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LOOMA_CHIP_COLORS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaExpand, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaMarkdownFromDoc, loomaMarkdownToHtml, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };
+import { $ as LoomaActiveBlockPluginKey, A as filterLoomaMentionItems, B as LoomaFigcaption, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaChip, H as LoomaExpand, I as getTableOfContentsEntries, J as LOOMA_CALLOUT_TONES, K as normalizeLoomaChipColor, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaActiveBlock, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as revealLoomaExpandAt, V as LoomaFigure, W as LOOMA_CHIP_COLORS, X as LOOMA_ACTIVE_BLOCK_CLASS, Y as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, Z as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaCallout, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "../chunks/extensions.js";
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LOOMA_CHIP_COLORS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaExpand, LoomaFigcaption, LoomaFigure, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTab, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, LoomaTabs, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaMarkdownFromDoc, loomaMarkdownToHtml, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/editor/extensions/markdown.d.ts

@@ -1,5 +1,5 @@
 import { type Node as ProseMirrorNode } from "@tiptap/pm/model";
-/** The markdown-it instance LoomaEditor reads Looma Markdown with. */
+/** The markdown-it instance LoomaEditor reads Looma Markdown with; code keeps its notation as source. */
 export declare const loomaMarkdown: import("markdown-it").default;
 /**
  * Renders Looma Markdown as the HTML the editor parses.
@@ -8,10 +8,9 @@ export declare const loomaMarkdown: import("markdown-it").default;
  */
 export declare function loomaMarkdownToHtml(source: string): string;
 /**
- * Writes an editor document as Looma Markdown, with callouts and expand sections as `:::`
- * containers that `loomaMarkdownToHtml` and Markupress read.
- * @contract Content Markdown has no syntax for (tables, task lists, images, chips, mentions,
- * the table of contents) is written as its saved HTML, which Markdown carries unchanged.
- * Marks without a Markdown form other than underline and highlight are dropped.
+ * Writes an editor document as Looma Markdown, the form `loomaMarkdownToHtml` and Markupress read.
+ * @contract Every node in the default preset has a Markdown form. A table that fits GFM is a GFM
+ * table and any other is HTML. Content from extensions outside the preset is written as its saved
+ * HTML, and marks without a Markdown form other than underline and highlight are dropped.
  */
 export declare function loomaMarkdownFromDoc(doc: ProseMirrorNode): string;

package/editor/extensions/table-of-contents.d.ts

@@ -10,7 +10,7 @@ export interface LoomaTableOfContentsConfig {
 /**
  * One current heading for navigation or host projections.
  * @lifecycle Positions belong to the supplied document; recompute after edits.
- * IDs stay with headings across renames and moves once a TOC assigns anchors.
+ * An ID derived from a heading's text follows the text; a custom ID stays with its heading.
  */
 export interface LoomaTableOfContentsEntry {
     id: string;

package/editor/extensions/tabs.d.ts

@@ -0,0 +1,13 @@
+import { Node } from "@tiptap/core";
+/**
+ * Tabs or a code group, kept whole so Looma Markdown's `::: tabs` and `::: code-group` survive
+ * editing. Saved as `<ui-tabs group>` with a `<section aria-label>` per panel.
+ * @contract While editing, panels show one after another under their labels; the Tabs component
+ * draws them only where the saved HTML renders.
+ */
+export declare const LoomaTabs: Node<any, any>;
+/**
+ * One panel of `LoomaTabs`, labelled by `label`.
+ * @invariant It exists only inside `LoomaTabs`; its label is the tab Tabs shows and the `== Label` line Markdown writes.
+ */
+export declare const LoomaTab: Node<any, any>;

package/editor/index.js

@@ -1,6 +1,6 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
-import { A as filterLoomaMentionItems, B as LOOMA_CHIP_COLORS, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, H as normalizeLoomaChipColor, I as getTableOfContentsEntries, J as LoomaActiveBlock, K as LOOMA_ACTIVE_BLOCK_CLASS, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, R as LoomaExpand, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaCallout, V as LoomaChip, W as LOOMA_CALLOUT_TONES, Y as LoomaActiveBlockPluginKey, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as revealLoomaExpandAt } from "./chunks/extensions.js";
+import { $ as LoomaActiveBlockPluginKey, A as filterLoomaMentionItems, B as LoomaFigcaption, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaChip, H as LoomaExpand, I as getTableOfContentsEntries, J as LOOMA_CALLOUT_TONES, K as normalizeLoomaChipColor, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaActiveBlock, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as revealLoomaExpandAt, V as LoomaFigure, W as LOOMA_CHIP_COLORS, X as LOOMA_ACTIVE_BLOCK_CLASS, Y as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, Z as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaCallout, r as filterLoomaSlashCommands, s as handleTableOverlayAction, t as LoomaSlashCommand, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "./chunks/extensions.js";
 import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
@@ -123,4 +123,4 @@ function getVisualViewportRect(owner = window) {
 	};
 }
 //#endregion
-export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LOOMA_CHIP_COLORS, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaExpand, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, loomaMarkdownFromDoc, loomaMarkdownToHtml, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, resolveTableCellAt, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };
+export { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, LOOMA_ACTIVE_BLOCK_CLASS, LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, LOOMA_CALLOUT_TONES, LOOMA_CHIP_COLORS, LOOMA_ICONS, LoomaActiveBlock, LoomaActiveBlockPluginKey, LoomaCallout, LoomaChip, LoomaExpand, LoomaFigcaption, LoomaFigure, LoomaImage, LoomaMentionSuggestionPluginKey, LoomaSlashCommand, LoomaSmartPaste, LoomaTab, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, LoomaTableOfContents, LoomaTabs, MAX_MENTION_RESULT_LIMIT, TABLE_CELL_BACKGROUND_OPTIONS, TABLE_CELL_BACKGROUND_PRESETS, createLoomaMentionExtension, createLoomaSlashCommandExtension, createSiteRelativeLinks, filterLoomaMentionItems, filterLoomaSlashCommands, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, getTableOfContentsEntries, getVisualViewportRect, handleTableAction, handleTableOverlayAction, insertTableAtRange, loomaIconMarkup, loomaMarkdownFromDoc, loomaMarkdownToHtml, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeImageDimension, normalizeImagePlacement, normalizeLoomaChipColor, normalizeMentionResultLimit, normalizeTableOfContentsConfig, resolveTableCellAt, revealLoomaExpandAt, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar, siteRelativeHref };

package/markdown/fixtures.js

@@ -14,6 +14,8 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/callouts/open-in-title.md": "::: tip Keep {open}\nA callout title keeps its braces.\n:::\n",
 	"../../markdown-fixtures/callouts/titled.html": "<ui-callout tone=\"tip\" heading=\"Before you start\">\n<p>Install <strong>first</strong>.</p>\n</ui-callout>\n",
 	"../../markdown-fixtures/callouts/titled.md": "::: tip Before you start\nInstall **first**.\n:::\n",
+	"../../markdown-fixtures/chips/escaped-label.html": "<p><span data-looma-chip data-label=\"Draft ] v2\" data-color=\"red\">Draft ] v2</span></p>\n",
+	"../../markdown-fixtures/chips/escaped-label.md": ":chip[Draft \\] v2]{tone=red}\n",
 	"../../markdown-fixtures/chips/tones.html": "<p>Status <span data-looma-chip data-label=\"Ready\" data-color=\"green\">Ready</span> and <span data-looma-chip data-label=\"Draft\" data-color=\"neutral\">Draft</span>.</p>\n",
 	"../../markdown-fixtures/chips/tones.md": "Status :chip[Ready]{tone=green} and :chip[Draft].\n",
 	"../../markdown-fixtures/code-blocks/fences.canonical.md": "```ts\nconst answer = 42;\n```\n\n```\nplain text\n```\n\n```\nindented\n```\n",
@@ -21,10 +23,14 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/code-blocks/fences.md": "```ts\nconst answer = 42;\n```\n\n```\nplain text\n```\n\n    indented\n",
 	"../../markdown-fixtures/code-blocks/long-fence.html": "<pre><code class=\"language-md\">```ts\nconst a = 1;\n```</code></pre>\n",
 	"../../markdown-fixtures/code-blocks/long-fence.md": "````md\n```ts\nconst a = 1;\n```\n````\n",
-	"../../markdown-fixtures/code-meta/notation.html": "<pre><code class=\"language-ts\">const port = 8080; // [!code highlight]</code></pre>\n",
+	"../../markdown-fixtures/code-meta/notation-alone.html": "<pre><code class=\"language-ts\">const host = &quot;localhost&quot;;\nconst port = 8080;</code></pre>\n",
+	"../../markdown-fixtures/code-meta/notation-alone.md": "```ts\n// [!code highlight:2]\nconst host = \"localhost\";\nconst port = 8080;\n```\n",
+	"../../markdown-fixtures/code-meta/notation.html": "<pre><code class=\"language-ts\">const port = 8080;</code></pre>\n",
 	"../../markdown-fixtures/code-meta/notation.md": "```ts\nconst port = 8080; // [!code highlight]\n```\n",
 	"../../markdown-fixtures/code-meta/title-lines.html": "<pre><code class=\"language-ts\" data-meta=\"title=&quot;config.ts&quot; {1,3-4} :line-numbers\">export default {\n  name: &quot;docs&quot;,\n  base: &quot;/docs/&quot;,\n};</code></pre>\n",
 	"../../markdown-fixtures/code-meta/title-lines.md": "```ts title=\"config.ts\" {1,3-4} :line-numbers\nexport default {\n  name: \"docs\",\n  base: \"/docs/\",\n};\n```\n",
+	"../../markdown-fixtures/containers/escaped-marker.html": "<p>::: tip is text here</p>\n",
+	"../../markdown-fixtures/containers/escaped-marker.md": "\\::: tip is text here\n",
 	"../../markdown-fixtures/containers/fence-inside.html": "<ui-callout tone=\"tip\">\n<pre><code class=\"language-md\">:::</code></pre>\n</ui-callout>\n",
 	"../../markdown-fixtures/containers/fence-inside.md": "::: tip\n```md\n:::\n```\n:::\n",
 	"../../markdown-fixtures/containers/nesting.canonical.md": ":::: details More\n::: warning\nNested.\n:::\n::::\n",
@@ -43,8 +49,18 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/details/open.md": "::: details Show the full log {open}\nThe build finished in 42 seconds.\n:::\n",
 	"../../markdown-fixtures/figures/caption.html": "<figure>\n<img src=\"./pipeline.svg\" alt=\"The build pipeline\">\n<figcaption>The build, from <em>source</em> to release</figcaption>\n</figure>\n",
 	"../../markdown-fixtures/figures/caption.md": "::: figure The build, from *source* to release\n![The build pipeline](./pipeline.svg)\n:::\n",
+	"../../markdown-fixtures/front-matter/list-only.canonical.md": "# Notes\n",
+	"../../markdown-fixtures/front-matter/list-only.html": "<h1 id=\"notes\">Notes</h1>\n",
+	"../../markdown-fixtures/front-matter/list-only.md": "---\naliases:\n  - /old/\n  - /older/\n---\n\n# Notes\n",
+	"../../markdown-fixtures/front-matter/mapping-only.canonical.md": "# Notes\n",
+	"../../markdown-fixtures/front-matter/mapping-only.html": "<h1 id=\"notes\">Notes</h1>\n",
+	"../../markdown-fixtures/front-matter/mapping-only.md": "---\nhead:\n  meta:\n    robots: noindex\n---\n\n# Notes\n",
+	"../../markdown-fixtures/front-matter/metadata.canonical.md": "# Notes\n",
 	"../../markdown-fixtures/front-matter/metadata.html": "<h1 id=\"notes\">Notes</h1>\n",
 	"../../markdown-fixtures/front-matter/metadata.md": "---\ntitle: Release notes\n---\n\n# Notes\n",
+	"../../markdown-fixtures/front-matter/nested.canonical.md": "# Notes\n",
+	"../../markdown-fixtures/front-matter/nested.html": "<h1 id=\"notes\">Notes</h1>\n",
+	"../../markdown-fixtures/front-matter/nested.md": "---\n# Page settings\nsidebar:\n  position: 2\n  items:\n    - label: Intro\n      href: /intro/\ntitle: Notes\n---\n\n# Notes\n",
 	"../../markdown-fixtures/heading-ids/accented.html": "<h2 id=\"über-uns\">Über uns</h2>\n<h2 id=\"café-crème\">Café crème</h2>\n",
 	"../../markdown-fixtures/heading-ids/accented.md": "## Über uns\n\n## Café crème\n",
 	"../../markdown-fixtures/heading-ids/cjk.html": "<h2 id=\"はじめに\">はじめに</h2>\n<h2 id=\"設定-と-使い方\">設定 と 使い方</h2>\n",
@@ -57,6 +73,8 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/heading-ids/emoji-only.md": "## 🚀\n\n## 🎉 🎉\n",
 	"../../markdown-fixtures/heading-ids/generated.html": "<h2 id=\"getting-started\">Getting started</h2>\n<h2 id=\"getting-started-1\">Getting started</h2>\n<h2 id=\"über-code-more\">Über <code>code</code> &amp; more</h2>\n",
 	"../../markdown-fixtures/heading-ids/generated.md": "## Getting started\n\n## Getting started\n\n## Über `code` & more\n",
+	"../../markdown-fixtures/heading-ids/literal-braces.html": "<h2 id=\"price-usd\">Price {#usd}</h2>\n",
+	"../../markdown-fixtures/heading-ids/literal-braces.md": "## Price \\{#usd}\n",
 	"../../markdown-fixtures/headings/levels.html": "<h1 id=\"one\">One</h1>\n<h2 id=\"two\">Two</h2>\n<h3 id=\"three\">Three</h3>\n<h4 id=\"four\">Four</h4>\n<h5 id=\"five\">Five</h5>\n<h6 id=\"six\">Six</h6>\n",
 	"../../markdown-fixtures/headings/levels.md": "# One\n\n## Two\n\n### Three\n\n#### Four\n\n##### Five\n\n###### Six\n",
 	"../../markdown-fixtures/image-attributes/placed.html": "<img src=\"./pipeline.svg\" alt=\"Pipeline\" width=\"640\" height=\"360\" data-placement=\"wrap-left\" data-looma-responsive>\n",
@@ -69,14 +87,20 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../markdown-fixtures/mentions/person.md": "Thanks, :mention[Ada Lovelace]{id=u1}.\n",
 	"../../markdown-fixtures/tables/gfm.html": "<table>\n<thead>\n<tr>\n<th>Package</th>\n<th style=\"text-align:right\">Version</th>\n<th style=\"text-align:center\">Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>looma</td>\n<td style=\"text-align:right\">0.28</td>\n<td style=\"text-align:center\">Components</td>\n</tr>\n</tbody>\n</table>\n",
 	"../../markdown-fixtures/tables/gfm.md": "| Package | Version | Notes |\n| --- | ---: | :---: |\n| looma | 0.28 | Components |\n",
+	"../../markdown-fixtures/tables/left-aligned.html": "<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Name</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">a | b</td>\n<td><code>x | y</code></td>\n</tr>\n</tbody>\n</table>\n",
+	"../../markdown-fixtures/tables/left-aligned.md": "| Name | Notes |\n| :--- | --- |\n| a \\| b | `x \\| y` |\n",
+	"../../markdown-fixtures/tables/rich.canonical.md": "<table><tbody><tr><th><p>Status</p></th><th><p>Owner</p></th></tr><tr><td style=\"background-color: rgb(220, 252, 231);\"><p>Done</p><ul><li><p>Shipped</p></li></ul></td><td style=\"text-align: center;\"><p>Ada</p></td></tr></tbody></table>\n",
 	"../../markdown-fixtures/tables/rich.html": "<table><tbody><tr><th><p>Status</p></th><th><p>Owner</p></th></tr><tr><td style=\"background-color: #dcfce7\"><p>Done</p><ul><li><p>Shipped</p></li></ul></td><td colspan=\"1\" rowspan=\"1\" style=\"text-align: center\"><p>Ada</p></td></tr></tbody></table>\n",
 	"../../markdown-fixtures/tables/rich.md": "<table><tbody><tr><th><p>Status</p></th><th><p>Owner</p></th></tr><tr><td style=\"background-color: #dcfce7\"><p>Done</p><ul><li><p>Shipped</p></li></ul></td><td colspan=\"1\" rowspan=\"1\" style=\"text-align: center\"><p>Ada</p></td></tr></tbody></table>\n",
 	"../../markdown-fixtures/tabs/code-group.html": "<ui-tabs class=\"code-group\" group=\"code-group\">\n<section aria-label=\"looma.config.js\">\n<pre><code class=\"language-js\" data-meta=\"title=&quot;looma.config.js&quot;\">export default { theme: &quot;light&quot; };</code></pre>\n</section>\n<section aria-label=\"ts\">\n<pre><code class=\"language-ts\">export default { theme: &quot;light&quot; } satisfies Config;</code></pre>\n</section>\n</ui-tabs>\n",
 	"../../markdown-fixtures/tabs/code-group.md": "::: code-group\n```js title=\"looma.config.js\"\nexport default { theme: \"light\" };\n```\n```ts\nexport default { theme: \"light\" } satisfies Config;\n```\n:::\n",
 	"../../markdown-fixtures/tabs/labelled.html": "<ui-tabs group=\"install\">\n<section aria-label=\"npm\">\n<pre><code class=\"language-sh\">npm install @threadlabs/looma</code></pre>\n</section>\n<section aria-label=\"pnpm\">\n<pre><code class=\"language-sh\">pnpm add @threadlabs/looma</code></pre>\n</section>\n</ui-tabs>\n",
 	"../../markdown-fixtures/tabs/labelled.md": "::: tabs install\n== npm\n```sh\nnpm install @threadlabs/looma\n```\n== pnpm\n```sh\npnpm add @threadlabs/looma\n```\n:::\n",
-	"../../markdown-fixtures/task-lists/checked.html": "<ul data-type=\"taskList\">\n<li data-type=\"taskItem\" data-checked=\"true\"><input type=\"checkbox\" disabled checked>Read the changelog</li>\n<li data-type=\"taskItem\" data-checked=\"false\"><input type=\"checkbox\" disabled>Run the migration</li>\n</ul>\n",
+	"../../markdown-fixtures/task-lists/checked.html": "<ul data-type=\"taskList\">\n<li data-type=\"taskItem\" data-checked=\"true\"><label><input type=\"checkbox\" disabled checked> Read the changelog</label></li>\n<li data-type=\"taskItem\" data-checked=\"false\"><label><input type=\"checkbox\" disabled> Run the migration</label></li>\n</ul>\n",
 	"../../markdown-fixtures/task-lists/checked.md": "- [x] Read the changelog\n- [ ] Run the migration\n",
+	"../../markdown-fixtures/task-lists/loose.canonical.md": "- [x] Read the changelog\n\n  Then tell the team.\n- [ ] Run the migration\n",
+	"../../markdown-fixtures/task-lists/loose.html": "<ul data-type=\"taskList\">\n<li data-type=\"taskItem\" data-checked=\"true\">\n<p><label><input type=\"checkbox\" disabled checked> Read the changelog</label></p>\n<p>Then tell the team.</p>\n</li>\n<li data-type=\"taskItem\" data-checked=\"false\">\n<p><label><input type=\"checkbox\" disabled> Run the migration</label></p>\n</li>\n</ul>\n",
+	"../../markdown-fixtures/task-lists/loose.md": "- [x] Read the changelog\n\n  Then tell the team.\n\n- [ ] Run the migration\n",
 	"../../markdown-fixtures/task-lists/mixed.canonical.md": "- \\[x\\] Done\n- Not a task\n",
 	"../../markdown-fixtures/task-lists/mixed.html": "<ul>\n<li>[x] Done</li>\n<li>Not a task</li>\n</ul>\n",
 	"../../markdown-fixtures/task-lists/mixed.md": "- [x] Done\n- Not a task\n",

package/markdown/index.d.ts

@@ -56,9 +56,12 @@ export declare function parseLoomaAttributes(source: string): LoomaAttributes |
 /**
  * Writes attributes as a brace list, `id` first as `#id`, then the rest in order.
  * @contract `true` writes a bare key; values are quoted only when they need it. `false`, null and
- * undefined values are left out, and an empty set writes an empty string.
+ * undefined values are left out, and an empty set writes an empty string. An ID that `#` cannot
+ * carry, or any ID when `hashId` is false, is written `id=…`.
  */
-export declare function formatLoomaAttributes(attributes: Readonly<Record<string, string | number | boolean | null | undefined>>): string;
+export declare function formatLoomaAttributes(attributes: Readonly<Record<string, string | number | boolean | null | undefined>>, { hashId }?: {
+    hashId?: boolean | undefined;
+}): string;
 /**
  * The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
  * marks, with every other run of characters one hyphen.
@@ -89,10 +92,23 @@ export interface LoomaFenceInfo {
 }
 /** Reads a fence's info string: ```` ```ts title="a.ts" {1,3-5} :line-numbers ````. */
 export declare function parseLoomaFenceInfo(info: string): LoomaFenceInfo;
+/**
+ * Applies code notation: a line ending in a `[!code highlight]` comment is highlighted and loses
+ * the comment, `[!code highlight:3]` covers three lines, and a marker alone on its line is removed
+ * with the line and applies to the lines after it.
+ * @contract Returns the code a reader sees and its highlighted line numbers, from 1, ascending.
+ * ponytail: matched on source lines, so a string that ends in the marker counts too.
+ */
+export declare function applyLoomaCodeNotation(code: string): {
+    code: string;
+    lines: number[];
+};
 /**
  * Splits YAML front matter from the start of a document.
- * @contract Front matter opens with a `---` line at the very start, holds at least one `key: value`
- * line, and closes at a `---` or `...` line. `source` is the block as written, delimiters included.
+ * @contract Front matter opens with a `---` line at the very start and closes at a `---` or `...`
+ * line, and what lies between is a YAML mapping: its first line that is not blank or a comment
+ * starts with a key, whose value may be a scalar, a list or a mapping. `source` is the block as
+ * written, delimiters included.
  * @failure Returns null when the document has none.
  */
 export declare function splitLoomaFrontmatter(document: string): {

package/markdown/index.js

@@ -139,13 +139,15 @@ function parseLoomaAttributes(source) {
 /**
 * Writes attributes as a brace list, `id` first as `#id`, then the rest in order.
 * @contract `true` writes a bare key; values are quoted only when they need it. `false`, null and
-* undefined values are left out, and an empty set writes an empty string.
+* undefined values are left out, and an empty set writes an empty string. An ID that `#` cannot
+* carry, or any ID when `hashId` is false, is written `id=…`.
 */
-function formatLoomaAttributes(attributes) {
+function formatLoomaAttributes(attributes, { hashId = true } = {}) {
 	const items = [];
 	const { id, ...rest } = attributes;
-	if (typeof id === "string" && id) items.push(`#${id}`);
-	for (const [key, value] of Object.entries(rest)) if (value === true) items.push(key);
+	const hashed = hashId && typeof id === "string" && /^[\w-]+$/.test(id);
+	if (hashed) items.push(`#${id}`);
+	for (const [key, value] of Object.entries(hashed ? rest : attributes)) if (value === true) items.push(key);
 	else if (value === false || value === null || value === void 0) continue;
 	else {
 		const text = String(value);
@@ -202,15 +204,46 @@ function parseLoomaFenceInfo(info) {
 		...numbers ? { lineNumbers: numbers[1] === void 0 } : {}
 	};
 }
+var MAPPING_KEY = /^(?:[^\s#:'"\-?,[\]{}&*!|>%@`][^:\n]*?|"[^"\n]*"|'[^'\n]*')[ \t]*:(?:[ \t]|$)/;
+var NOTATION = /[ \t]*(?:\/\/|#|--|<!--|\{?\/\*)[ \t]*\[!code highlight(?::(\d+))?\][ \t]*(?:-->|\*\/\}?)?[ \t]*$/;
+/**
+* Applies code notation: a line ending in a `[!code highlight]` comment is highlighted and loses
+* the comment, `[!code highlight:3]` covers three lines, and a marker alone on its line is removed
+* with the line and applies to the lines after it.
+* @contract Returns the code a reader sees and its highlighted line numbers, from 1, ascending.
+* ponytail: matched on source lines, so a string that ends in the marker counts too.
+*/
+function applyLoomaCodeNotation(code) {
+	const kept = [];
+	const lines = /* @__PURE__ */ new Set();
+	for (const line of code.split("\n")) {
+		const match = NOTATION.exec(line);
+		if (!match) {
+			kept.push(line);
+			continue;
+		}
+		const rest = line.slice(0, match.index);
+		const own = rest.trim() !== "";
+		if (own) kept.push(rest);
+		for (let count = 0; count < Number(match[1] ?? 1); count++) lines.add(kept.length + (own ? 0 : 1) + count);
+	}
+	return {
+		code: kept.join("\n"),
+		lines: [...lines].sort((a, b) => a - b)
+	};
+}
 /**
 * Splits YAML front matter from the start of a document.
-* @contract Front matter opens with a `---` line at the very start, holds at least one `key: value`
-* line, and closes at a `---` or `...` line. `source` is the block as written, delimiters included.
+* @contract Front matter opens with a `---` line at the very start and closes at a `---` or `...`
+* line, and what lies between is a YAML mapping: its first line that is not blank or a comment
+* starts with a key, whose value may be a scalar, a list or a mapping. `source` is the block as
+* written, delimiters included.
 * @failure Returns null when the document has none.
 */
 function splitLoomaFrontmatter(document) {
 	const match = /^---[ \t]*\r?\n([\s\S]*?)\r?\n(?:---|\.\.\.)[ \t]*(?:\r?\n|$)/.exec(document.slice(0, 8192));
-	if (!match || !/^[A-Za-z][\w-]*:[ \t]*\S/m.test(match[1])) return null;
+	const first = match?.[1].split(/\r?\n/).find((line) => line.trim() && !line.trimStart().startsWith("#"));
+	if (!match || !first || !MAPPING_KEY.test(first)) return null;
 	return {
 		source: match[0].trimEnd(),
 		yaml: match[1],
@@ -227,4 +260,4 @@ function loomaCodeFence(code) {
 	return "`".repeat(Math.max(3, longest + 1));
 }
 //#endregion
-export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };
+export { LOOMA_BADGE_TONES, LOOMA_CALLOUT_TONES, LOOMA_CALLOUT_TONE_ALIASES, LOOMA_CHIP_TONES, LOOMA_CONTAINER_NAMES, LOOMA_MEANING_TONES, applyLoomaCodeNotation, assignLoomaHeadingIds, formatLoomaAttributes, loomaCodeFence, loomaContainerMarker, loomaHeadingSlug, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter };

package/markdown/markdown-it.d.ts

@@ -1,13 +1,21 @@
 import MarkdownIt from "markdown-it";
+/** How a Looma Markdown instance renders. */
+export interface LoomaMarkdownOptions {
+    /**
+     * `apply` (default) renders code as a reader sees it, without its `[!code highlight]` comments;
+     * `keep` keeps them in the code, for an editor that edits the source.
+     */
+    codeNotation?: "apply" | "keep";
+}
 /**
  * Adds Looma Markdown to a markdown-it instance: containers, alerts, task lists, the table of
  * contents, chips, mentions, brace attributes, heading anchors, code meta and front matter.
  * @contract Renders the canonical HTML, which is the HTML LoomaEditor saves. It is not sanitized.
  * Linkify and raw HTML are instance options; `createLoomaMarkdownIt` turns both on.
  */
-export declare function loomaMarkdown(md: MarkdownIt): void;
+export declare function loomaMarkdown(md: MarkdownIt, { codeNotation }?: LoomaMarkdownOptions): void;
 /**
  * A markdown-it instance for Looma Markdown: raw HTML and GFM autolinks on, with `loomaMarkdown`.
  * @contract Each call returns a new instance that callers may extend.
  */
-export declare function createLoomaMarkdownIt(): MarkdownIt;
+export declare function createLoomaMarkdownIt(options?: LoomaMarkdownOptions): MarkdownIt;

package/markdown/markdown-it.js

@@ -1,4 +1,4 @@
-import { LOOMA_CONTAINER_NAMES, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
+import { LOOMA_CONTAINER_NAMES, applyLoomaCodeNotation, assignLoomaHeadingIds, normalizeLoomaCalloutTone, normalizeLoomaChipTone, parseLoomaAttributes, parseLoomaFenceInfo, readLoomaAttributes, splitLoomaFrontmatter } from "./index.js";
 import MarkdownIt from "markdown-it";
 //#region src/markdown/markdown-it.ts
 var CONTAINER_OPEN = /^(:{3,})[ \t]*([A-Za-z][\w-]*)(?:[ \t]+(.*?))?[ \t]*$/;
@@ -8,7 +8,7 @@ var TAB_LABEL = /^==[ \t]+(\S.*?)[ \t]*$/;
 var OPEN_FLAG = /[ \t]*\{open\}$/;
 var ALERT = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\n|$)/i;
 var LEAF = /^::([A-Za-z][\w-]*)(\{.*\})?[ \t]*$/;
-var TASK = /^\[([ xX])\][ \t]+/;
+var TASK = /^\[([ xX])\](?:[ \t]+|$)/;
 var TOC_FORMATS = /* @__PURE__ */ new Set([
 	"plain",
 	"bulleted",
@@ -200,7 +200,10 @@ function taskLists(state) {
 			inline.content = inline.content.replace(TASK, "");
 			item.attrSet("data-type", "taskItem");
 			item.attrSet("data-checked", String(checked));
-			item.meta = { checked };
+			inline.meta = {
+				...inline.meta,
+				task: checked
+			};
 		}
 	}
 }
@@ -242,6 +245,11 @@ function attributes(state) {
 		const token = tokens[index];
 		if (token.type !== "inline" || !token.children) continue;
 		const children = token.children;
+		if (typeof token.meta?.task === "boolean") {
+			const html = (content) => Object.assign(new state.Token("html_inline", "", 0), { content });
+			children.unshift(html(`<label><input type="checkbox" disabled=""${token.meta.task ? " checked=\"\"" : ""}> `));
+			children.push(html("</label>"));
+		}
 		for (let child = children.length - 3; child >= 0; child--) {
 			const text = children[child + 1];
 			if (children[child].type !== "link_open" || children[child].markup !== "linkify" || /^(?:[a-z][\w+.-]*:|www\.)/i.test(text.content)) continue;
@@ -318,7 +326,7 @@ function tableOfContents(tokens, format, depth, escape) {
 * @contract Renders the canonical HTML, which is the HTML LoomaEditor saves. It is not sanitized.
 * Linkify and raw HTML are instance options; `createLoomaMarkdownIt` turns both on.
 */
-function loomaMarkdown(md) {
+function loomaMarkdown(md, { codeNotation = "apply" } = {}) {
 	const escape = md.utils.escapeHtml;
 	md.block.ruler.before("table", "looma_frontmatter", frontmatter);
 	md.block.ruler.before("fence", "looma_container", container, { alt: [
@@ -369,15 +377,10 @@ function loomaMarkdown(md) {
 		const id = String(attributes.id);
 		return `<span data-type="mention" class="looma-mention" data-id="${escape(id)}" data-label="${escape(label || id)}">@${escape(label || id)}</span>`;
 	};
-	const listItem = rules.list_item_open ?? ((tokens, index, options, _env, self) => self.renderToken(tokens, index, options));
-	rules.list_item_open = (tokens, index, options, env, self) => {
-		const html = listItem(tokens, index, options, env, self);
-		const task = tokens[index].meta;
-		return task && typeof task.checked === "boolean" ? `${html}<input type="checkbox" disabled=""${task.checked ? " checked=\"\"" : ""}>` : html;
-	};
 	const code = (content, info) => {
 		const { language, meta } = parseLoomaFenceInfo(info);
-		return `<pre><code${language ? ` class="language-${escape(language)}"` : ""}${meta ? ` data-meta="${escape(meta)}"` : ""}>${escape(content.replace(/\n$/, ""))}</code></pre>\n`;
+		const source = content.replace(/\n$/, "");
+		return `<pre><code${language ? ` class="language-${escape(language)}"` : ""}${meta ? ` data-meta="${escape(meta)}"` : ""}>${escape(codeNotation === "keep" ? source : applyLoomaCodeNotation(source).code)}</code></pre>\n`;
 	};
 	rules.fence = (tokens, index) => code(tokens[index].content, tokens[index].info);
 	rules.code_block = (tokens, index) => code(tokens[index].content, "");
@@ -386,12 +389,12 @@ function loomaMarkdown(md) {
 * A markdown-it instance for Looma Markdown: raw HTML and GFM autolinks on, with `loomaMarkdown`.
 * @contract Each call returns a new instance that callers may extend.
 */
-function createLoomaMarkdownIt() {
+function createLoomaMarkdownIt(options = {}) {
 	return new MarkdownIt({
 		html: true,
 		linkify: true,
 		typographer: false
-	}).use(loomaMarkdown);
+	}).use(loomaMarkdown, options);
 }
 //#endregion
 export { createLoomaMarkdownIt, loomaMarkdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.16",
+  "version": "0.28.18",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -171,6 +171,7 @@
     "@tiptap/vue-3": "^2.11.5",
     "@types/markdown-it": "14.2.0",
     "@vitest/browser": "~3.2.6",
+    "axe-core": "^4.10.3",
     "jsdom": "^27.0.0"
   },
   "engines": {

package/vue/editor/index.js

@@ -1840,6 +1840,34 @@ function formatEditorShortcut(keys, apple) {
 	].filter(Boolean).join("+");
 }
 var isApplePlatform = () => typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.userAgentData?.platform || navigator.platform || navigator.userAgent);
+/**
+* The anchor a heading's text derives: NFC, lowercase, keeping letters, numbers and combining
+* marks, with every other run of characters one hyphen.
+* @failure Text with no letters or numbers, such as only emoji, derives `heading`.
+*/
+function loomaHeadingSlug(text) {
+	return text.normalize("NFC").toLowerCase().replace(/[^\p{L}\p{N}\p{M}]+/gu, "-").replace(/^-+|-+$/g, "") || "heading";
+}
+/**
+* Gives every heading of a document its anchor, in document order.
+* @contract A custom ID is kept unless an earlier heading already has it. Any other heading takes
+* its slug, or the slug's first free suffix (`-1`, `-2`…), never one a later custom ID reserves.
+*/
+function assignLoomaHeadingIds(headings) {
+	const reserved = new Set(headings.map(({ id }) => id).filter((id) => Boolean(id)));
+	const used = /* @__PURE__ */ new Set();
+	return headings.map(({ text, id: custom }) => {
+		let id = custom || loomaHeadingSlug(text);
+		if (custom ? used.has(id) : used.has(id) || reserved.has(id)) {
+			const stem = id;
+			let suffix = 1;
+			while (used.has(`${stem}-${suffix}`) || reserved.has(`${stem}-${suffix}`)) suffix++;
+			id = `${stem}-${suffix}`;
+		}
+		used.add(id);
+		return id;
+	});
+}
 //#endregion
 //#region src/editor/extensions/expand.ts
 /**
@@ -2049,7 +2077,17 @@ function tableOfContentsTree(entries) {
 	}
 	return roots;
 }
-function anchorTransaction(state) {
+var derivedFrom = (id, text) => {
+	const slug = loomaHeadingSlug(text);
+	return id === slug || id.startsWith(`${slug}-`) && /^\d+$/.test(id.slice(slug.length + 1));
+};
+/**
+* Keeps heading anchors on Looma Markdown's rule. An anchor derived from its heading's text
+* (as it read before this change) follows the text; any other, including `looma-heading-N` anchors
+* saved before this rule, is a custom anchor and stays, so links to it keep working. With
+* a table of contents every heading gets an anchor; without one, only headings that have one.
+*/
+function anchorTransaction(state, previous) {
 	let hasToc = false;
 	const headings = [];
 	state.doc.descendants((node, position) => {
@@ -2059,24 +2097,28 @@ function anchorTransaction(state) {
 			position
 		});
 	});
-	if (!hasToc) return null;
-	const reserved = new Set(headings.map(({ node }) => String(node.attrs.id ?? "")).filter(Boolean));
-	const used = /* @__PURE__ */ new Set();
+	if (!headings.length) return null;
+	const before = /* @__PURE__ */ new Map();
+	previous?.descendants((node) => {
+		if (node.type.name === "heading" && typeof node.attrs.id === "string") before.set(node.attrs.id, node.textContent.trim());
+	});
+	const custom = (node) => {
+		const id = node.attrs.id;
+		if (typeof id !== "string" || !id || /\s/.test(id)) return void 0;
+		return derivedFrom(id, before.get(id) ?? node.textContent.trim()) ? void 0 : id;
+	};
+	const ids = assignLoomaHeadingIds(headings.map(({ node }) => ({
+		text: node.textContent.trim(),
+		id: custom(node)
+	})));
 	const transaction = state.tr;
-	let sequence = 1;
-	for (const { node, position } of headings) {
-		let id = typeof node.attrs.id === "string" ? node.attrs.id : "";
-		if (!id || /\s/.test(id) || used.has(id)) {
-			do
-				id = `looma-heading-${sequence++}`;
-			while (reserved.has(id) || used.has(id));
-			transaction.setNodeMarkup(position, void 0, {
-				...node.attrs,
-				id
-			});
-		}
-		used.add(id);
-	}
+	headings.forEach(({ node, position }, index) => {
+		if (node.attrs.id === ids[index] || !hasToc && !node.attrs.id) return;
+		transaction.setNodeMarkup(position, void 0, {
+			...node.attrs,
+			id: ids[index]
+		});
+	});
 	return transaction.docChanged ? transaction : null;
 }
 var LoomaHeadingAnchors = Extension.create({
@@ -2092,7 +2134,7 @@ var LoomaHeadingAnchors = Extension.create({
 		if (transaction) this.editor.view.dispatch(transaction.setMeta("addToHistory", false));
 	},
 	addProseMirrorPlugins() {
-		return [new Plugin({ appendTransaction: (transactions, _oldState, state) => transactions.some((transaction) => transaction.docChanged) ? anchorTransaction(state) : null })];
+		return [new Plugin({ appendTransaction: (transactions, oldState, state) => transactions.some((transaction) => transaction.docChanged) ? anchorTransaction(state, oldState.doc) : null })];
 	}
 });
 function contentsHtml(doc, config) {