@threadlabs/looma 0.28.16 → 0.28.17

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`.
@@ -625,6 +644,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 +828,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 +848,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 +885,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 +9503,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",
@@ -9729,29 +9900,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 +9947,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 +10046,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 +10211,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 +10760,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 +10778,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 +10854,10 @@ function getDefaultEditorExtensions(options = {}) {
 		Heading.configure({ levels: [
 			1,
 			2,
-			3
+			3,
+			4,
+			5,
+			6
 		] }),
 		BulletList,
 		OrderedList,
@@ -10531,6 +10867,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 +11861,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

@@ -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",
@@ -25,6 +27,8 @@ var files = /* #__PURE__ */ Object.assign({
 	"../../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,6 +47,7 @@ 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/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/heading-ids/accented.html": "<h2 id=\"über-uns\">Über uns</h2>\n<h2 id=\"café-crème\">Café crème</h2>\n",
@@ -57,6 +62,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,6 +76,9 @@ 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",

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.

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);

package/markdown/markdown-it.js

@@ -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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.16",
+  "version": "0.28.17",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

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) {