@threadlabs/looma 0.28.14 → 0.28.16

package/markdown/index.js

@@ -0,0 +1,230 @@
+//#region src/markdown/index.ts
+/**
+* Looma Markdown's vocabulary and pure rules, shared by every reader and writer.
+*
+* Nothing here touches the DOM or a Markdown parser, so it is safe to import during SSR. The
+* markdown-it plugin is `@threadlabs/looma/markdown/markdown-it`; conformance fixtures are
+* `@threadlabs/looma/markdown/fixtures`.
+*/
+/** The meanings Callout and Badge share. Callout adds `note`, `tip` and `important`; Badge adds `accent`. */
+var LOOMA_MEANING_TONES = [
+	"neutral",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+/** Badge's tones: the shared meanings and `accent`. */
+var LOOMA_BADGE_TONES = [
+	"neutral",
+	"accent",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+/**
+* Callout tones a document stores, in the order the editor offers them. The Callout component also
+* takes `neutral` and `success`, which Markdown and the editor store as `note`.
+*/
+var LOOMA_CALLOUT_TONES = [
+	"note",
+	"tip",
+	"info",
+	"important",
+	"warning",
+	"danger"
+];
+/** Names that read as a stored tone: `caution` is `danger`, and `neutral` is the same muted aside as `note`. */
+var LOOMA_CALLOUT_TONE_ALIASES = {
+	caution: "danger",
+	neutral: "note"
+};
+/**
+* Maps a tone name or alias, in any case, onto a stored tone.
+* @failure Unknown and non-string values become `note`.
+*/
+function normalizeLoomaCalloutTone(value) {
+	if (typeof value !== "string") return "note";
+	const tone = value.toLowerCase();
+	return LOOMA_CALLOUT_TONES.includes(tone) ? tone : LOOMA_CALLOUT_TONE_ALIASES[tone] ?? "note";
+}
+/** The hues chips and swatches take as their tone, written `:chip[Label]{tone=green}`. */
+var LOOMA_CHIP_TONES = [
+	"neutral",
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"purple"
+];
+/**
+* Keeps a chip tone within the palette.
+* @failure Unknown values become `neutral`.
+*/
+function normalizeLoomaChipTone(value) {
+	return LOOMA_CHIP_TONES.includes(value) ? value : "neutral";
+}
+/**
+* Names that open a `:::` container, matched without regard to case. A container with any other
+* name is ordinary text.
+*/
+var LOOMA_CONTAINER_NAMES = /* @__PURE__ */ new Set([
+	...LOOMA_CALLOUT_TONES,
+	"caution",
+	"details",
+	"figure",
+	"tabs",
+	"code-group"
+]);
+var ATTRIBUTE_KEY = /[A-Za-z][\w-]*/y;
+var ATTRIBUTE_ID = /#([\w-]+)/y;
+var ATTRIBUTE_VALUE = /[^\s"'=<>`{}]+/y;
+function sticky(pattern, source, index) {
+	pattern.lastIndex = index;
+	return pattern.exec(source);
+}
+/**
+* Reads a brace attribute list starting at `source[start]`, which must be `{`.
+* @contract Returns the attributes and the index just past the closing brace.
+* @failure Returns null for anything that is not a complete, well-formed list, so the text stays literal.
+*/
+function readLoomaAttributes(source, start = 0) {
+	if (source[start] !== "{") return null;
+	const attributes = {};
+	let index = start + 1;
+	for (;;) {
+		while (source[index] === " " || source[index] === "	") index++;
+		if (source[index] === "}") return {
+			attributes,
+			end: index + 1
+		};
+		if (index > start + 1 && !/\s/.test(source[index - 1])) return null;
+		const id = sticky(ATTRIBUTE_ID, source, index);
+		if (id) {
+			attributes.id = id[1];
+			index += id[0].length;
+			continue;
+		}
+		const key = sticky(ATTRIBUTE_KEY, source, index);
+		if (!key) return null;
+		index += key[0].length;
+		if (source[index] !== "=") {
+			attributes[key[0]] = true;
+			continue;
+		}
+		index++;
+		const quote = source[index];
+		if (quote === "\"" || quote === "'") {
+			const close = source.indexOf(quote, index + 1);
+			if (close < 0) return null;
+			attributes[key[0]] = source.slice(index + 1, close);
+			index = close + 1;
+			continue;
+		}
+		const value = sticky(ATTRIBUTE_VALUE, source, index);
+		if (!value) return null;
+		attributes[key[0]] = value[0];
+		index += value[0].length;
+	}
+}
+/**
+* Reads a whole string as one brace attribute list.
+* @failure Returns null unless the string is exactly one well-formed list.
+*/
+function parseLoomaAttributes(source) {
+	const read = readLoomaAttributes(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.
+*/
+function formatLoomaAttributes(attributes) {
+	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);
+	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`.
+*/
+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;
+	});
+}
+/** Reads a fence's info string: ```` ```ts title="a.ts" {1,3-5} :line-numbers ````. */
+function parseLoomaFenceInfo(info) {
+	const source = info.trim();
+	const language = /^[^\s={:]+(?=[\s{:]|$)/.exec(source)?.[0];
+	const meta = (language ? source.slice(language.length) : source).trim();
+	const title = /(?:^|\s)title="([^"]*)"/.exec(meta)?.[1];
+	const rest = meta.replace(/(?:^|\s)title="[^"]*"/, "");
+	const lines = /* @__PURE__ */ new Set();
+	for (const range of /\{([\d\s,-]+)\}/.exec(rest)?.[1].split(",") ?? []) {
+		const [from = NaN, to = from] = range.split("-").map((part) => Number.parseInt(part, 10));
+		for (let line = from; line <= to; line++) lines.add(line);
+	}
+	const numbers = /:(no-)?line-numbers(?![\w-])/.exec(rest);
+	return {
+		...language ? { language } : {},
+		meta,
+		...title !== void 0 ? { title } : {},
+		lines: [...lines].sort((a, b) => a - b),
+		...numbers ? { lineNumbers: numbers[1] === void 0 } : {}
+	};
+}
+/**
+* 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.
+* @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;
+	return {
+		source: match[0].trimEnd(),
+		yaml: match[1],
+		body: document.slice(match[0].length)
+	};
+}
+/** The colons a container opens and closes with, given how deeply containers nest inside it. */
+function loomaContainerMarker(nestedDepth) {
+	return ":".repeat(3 + Math.max(0, nestedDepth));
+}
+/** A backtick fence longer than any run of backticks in the code, and at least three long. */
+function loomaCodeFence(code) {
+	const longest = Math.max(0, ...(code.match(/`+/g) ?? []).map((run) => run.length));
+	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 };

package/markdown/markdown-it.d.ts

@@ -0,0 +1,13 @@
+import MarkdownIt from "markdown-it";
+/**
+ * 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;
+/**
+ * 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;

package/markdown/markdown-it.js

@@ -0,0 +1,397 @@
+import { LOOMA_CONTAINER_NAMES, 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]*$/;
+var CONTAINER_CLOSE = /^:{3,}[ \t]*$/;
+var FENCE_OPEN = /^(`{3,}|~{3,})/;
+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 TOC_FORMATS = /* @__PURE__ */ new Set([
+	"plain",
+	"bulleted",
+	"numbered"
+]);
+var PLACEMENTS = /* @__PURE__ */ new Set([
+	"block",
+	"center",
+	"wrap-left",
+	"wrap-right"
+]);
+var opensContainer = (text) => {
+	const match = CONTAINER_OPEN.exec(text);
+	return match && LOOMA_CONTAINER_NAMES.has(match[2].toLowerCase()) ? match : null;
+};
+function lineText(state, line) {
+	return state.src.slice(state.bMarks[line] + state.tShift[line], state.eMarks[line]);
+}
+function frontmatter(state, startLine, _endLine, silent) {
+	if (startLine !== 0 || state.blkIndent !== 0) return false;
+	const split = splitLoomaFrontmatter(state.src);
+	if (!split) return false;
+	if (silent) return true;
+	const lines = split.source.split("\n").length;
+	const token = state.push("looma_frontmatter", "", 0);
+	Object.assign(token, {
+		content: split.yaml,
+		block: true,
+		hidden: true,
+		map: [0, lines]
+	});
+	state.env.frontmatter = split.yaml;
+	state.line = lines;
+	return true;
+}
+function container(state, startLine, endLine, silent) {
+	if (state.sCount[startLine] - state.blkIndent >= 4) return false;
+	const match = opensContainer(lineText(state, startLine));
+	if (!match) return false;
+	if (silent) return true;
+	const name = match[2].toLowerCase();
+	const grouped = name === "tabs" || name === "code-group";
+	const labels = [];
+	let depth = 1;
+	let fence = null;
+	let next = startLine + 1;
+	for (; next < endLine; next++) {
+		const text = lineText(state, next);
+		if (text && state.sCount[next] < state.blkIndent) break;
+		if (fence) {
+			const close = FENCE_OPEN.exec(text);
+			if (close && close[1][0] === fence.char && close[1].length >= fence.length && !text.slice(close[1].length).trim()) fence = null;
+			continue;
+		}
+		const opener = FENCE_OPEN.exec(text);
+		if (opener) {
+			fence = {
+				char: opener[1][0],
+				length: opener[1].length
+			};
+			continue;
+		}
+		if (CONTAINER_CLOSE.test(text)) {
+			if (--depth === 0) break;
+		} else if (opensContainer(text)) depth++;
+		else if (grouped && depth === 1) {
+			const label = TAB_LABEL.exec(text);
+			if (label) labels.push({
+				line: next,
+				label: label[1]
+			});
+		}
+	}
+	let title = (match[3] ?? "").trim();
+	const open = name === "details" && OPEN_FLAG.test(title);
+	if (name === "details") title = title.replace(OPEN_FLAG, "");
+	const parentType = state.parentType;
+	const lineMax = state.lineMax;
+	state.parentType = "container";
+	state.lineMax = next;
+	const opening = state.push("looma_container_open", "div", 1);
+	Object.assign(opening, {
+		info: name,
+		meta: {
+			title,
+			open
+		},
+		block: true,
+		map: [startLine, next],
+		markup: match[1]
+	});
+	const panel = (label, from, to) => {
+		state.push("looma_tab_open", "section", 1).meta = { label };
+		state.md.block.tokenize(state, from, to);
+		state.push("looma_tab_close", "section", -1);
+	};
+	if (labels.length) {
+		state.md.block.tokenize(state, startLine + 1, labels[0].line);
+		labels.forEach(({ line, label }, index) => panel(label, line + 1, labels[index + 1]?.line ?? next));
+	} else {
+		const first = state.tokens.length;
+		state.md.block.tokenize(state, startLine + 1, next);
+		if (name === "code-group") for (let index = state.tokens.length - 1; index >= first; index--) {
+			const token = state.tokens[index];
+			if (token.type !== "fence" || token.level !== opening.level + 1) continue;
+			const { title: fenceTitle, language } = parseLoomaFenceInfo(token.info);
+			const tabOpen = new state.Token("looma_tab_open", "section", 1);
+			tabOpen.meta = { label: fenceTitle ?? language ?? "Code" };
+			state.tokens.splice(index, 1, tabOpen, token, new state.Token("looma_tab_close", "section", -1));
+		}
+	}
+	const closing = state.push("looma_container_close", "div", -1);
+	Object.assign(closing, {
+		info: name,
+		meta: { title },
+		block: true,
+		markup: match[1]
+	});
+	state.parentType = parentType;
+	state.lineMax = lineMax;
+	state.line = Math.min(next + 1, endLine);
+	return true;
+}
+function leaf(state, startLine, _endLine, silent) {
+	if (state.sCount[startLine] - state.blkIndent >= 4) return false;
+	const match = LEAF.exec(lineText(state, startLine));
+	if (!match || match[1].toLowerCase() !== "toc") return false;
+	const attributes = match[2] ? parseLoomaAttributes(match[2]) : {};
+	if (!attributes) return false;
+	if (silent) return true;
+	const format = typeof attributes.format === "string" && TOC_FORMATS.has(attributes.format) ? attributes.format : "plain";
+	const depth = attributes.depth === "1" || attributes.depth === "2" ? Number(attributes.depth) : 3;
+	const token = state.push("looma_toc", "nav", 0);
+	Object.assign(token, {
+		block: true,
+		map: [startLine, startLine + 1],
+		meta: {
+			format,
+			depth
+		}
+	});
+	state.line = startLine + 1;
+	return true;
+}
+function alerts(state) {
+	const tokens = state.tokens;
+	for (let index = 0; index < tokens.length; index++) {
+		if (tokens[index].type !== "blockquote_open" || tokens[index + 1]?.type !== "paragraph_open") continue;
+		const inline = tokens[index + 2];
+		const match = inline?.type === "inline" ? ALERT.exec(inline.content) : null;
+		if (!match) continue;
+		inline.content = inline.content.slice(match[0].length);
+		if (!inline.content.trim()) tokens.splice(index + 1, 3);
+		tokens[index].tag = "ui-callout";
+		tokens[index].attrSet("tone", normalizeLoomaCalloutTone(match[1]));
+		for (let depth = 0, end = index; end < tokens.length; end++) if (tokens[end].type === "blockquote_open") depth++;
+		else if (tokens[end].type === "blockquote_close" && --depth === 0) {
+			tokens[end].tag = "ui-callout";
+			break;
+		}
+	}
+}
+function taskLists(state) {
+	const tokens = state.tokens;
+	for (let index = 0; index < tokens.length; index++) {
+		if (tokens[index].type !== "bullet_list_open") continue;
+		const level = tokens[index].level;
+		const items = [];
+		let isTaskList = true;
+		for (let cursor = index + 1; cursor < tokens.length; cursor++) {
+			const token = tokens[cursor];
+			if (token.type === "bullet_list_close" && token.level === level) break;
+			if (token.type !== "list_item_open" || token.level !== level + 1) continue;
+			const inline = tokens[cursor + 2];
+			const match = tokens[cursor + 1]?.type === "paragraph_open" && inline?.type === "inline" ? TASK.exec(inline.content) : null;
+			if (!match) {
+				isTaskList = false;
+				break;
+			}
+			items.push({
+				item: token,
+				inline,
+				checked: match[1] !== " "
+			});
+		}
+		if (!isTaskList || !items.length) continue;
+		tokens[index].attrSet("data-type", "taskList");
+		for (const { item, inline, checked } of items) {
+			inline.content = inline.content.replace(TASK, "");
+			item.attrSet("data-type", "taskItem");
+			item.attrSet("data-checked", String(checked));
+			item.meta = { checked };
+		}
+	}
+}
+function directive(state, silent) {
+	const { src, pos } = state;
+	if (src.charCodeAt(pos) !== 58) return false;
+	const name = /^:(chip|mention)\[/.exec(src.slice(pos, pos + 10))?.[1];
+	if (!name) return false;
+	let label = "";
+	let index = pos + name.length + 2;
+	for (; index < state.posMax && src[index] !== "]"; index++) {
+		if (src[index] === "\\" && index + 1 < state.posMax) index++;
+		label += src[index];
+	}
+	if (src[index] !== "]") return false;
+	const read = src[index + 1] === "{" ? readLoomaAttributes(src, index + 1) : {
+		attributes: {},
+		end: index + 1
+	};
+	if (!read || read.end > state.posMax) return false;
+	if (name === "mention" && typeof read.attributes.id !== "string") return false;
+	if (!silent) {
+		const token = state.push(`looma_${name}`, "span", 0);
+		token.meta = {
+			label,
+			attributes: read.attributes
+		};
+	}
+	state.pos = read.end;
+	return true;
+}
+function inlineText(token) {
+	return (token?.children ?? []).map((child) => child.type === "image" ? inlineText(child) : child.content).join("");
+}
+function attributes(state) {
+	const headings = [];
+	const tokens = state.tokens;
+	for (let index = 0; index < tokens.length; index++) {
+		const token = tokens[index];
+		if (token.type !== "inline" || !token.children) continue;
+		const children = token.children;
+		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;
+			children.splice(child, 3, Object.assign(new state.Token("text", "", 0), { content: text.content }));
+		}
+		if (tokens[index - 1]?.type === "heading_open") {
+			const last = children.at(-1);
+			const marker = last?.type === "text" ? /[ \t]+(\{[^{}]*\})$/.exec(last.content) : null;
+			const parsed = marker && parseLoomaAttributes(marker[1]);
+			let id;
+			if (last && marker && parsed && typeof parsed.id === "string") {
+				id = parsed.id;
+				last.content = last.content.slice(0, marker.index);
+			}
+			headings.push({
+				open: tokens[index - 1],
+				text: inlineText(token).trim(),
+				id
+			});
+		}
+		for (let child = 0; child < children.length; child++) {
+			const next = children[child + 1];
+			if (children[child].type !== "image" || next?.type !== "text" || !next.content.startsWith("{")) continue;
+			const read = readLoomaAttributes(next.content);
+			if (!read) continue;
+			applyImageAttributes(children[child], read.attributes);
+			next.content = next.content.slice(read.end);
+			if (!next.content) children.splice(child + 1, 1);
+		}
+		if (tokens[index - 1]?.type === "paragraph_open" && children.length === 1 && children[0].type === "image") {
+			tokens[index - 1].hidden = true;
+			tokens[index + 1].hidden = true;
+		}
+	}
+	const ids = assignLoomaHeadingIds(headings);
+	headings.forEach(({ open }, index) => open.attrSet("id", ids[index]));
+}
+function applyImageAttributes(image, attributes) {
+	for (const key of ["width", "height"]) {
+		const value = Number(attributes[key]);
+		if (Number.isSafeInteger(value) && value > 0) image.attrSet(key, String(value));
+	}
+	const placement = attributes.placement;
+	if (typeof placement === "string" && PLACEMENTS.has(placement) && placement !== "block") image.attrSet("data-placement", placement);
+	if (attributes.responsive === true) image.attrSet("data-looma-responsive", "");
+}
+function tableOfContents(tokens, format, depth, escape) {
+	const roots = [];
+	const ancestors = [];
+	tokens.forEach((token, index) => {
+		if (token.type !== "heading_open") return;
+		const level = Number(token.tag.slice(1));
+		const text = inlineText(tokens[index + 1]).trim();
+		if (level > depth || !text) return;
+		while (ancestors.length && ancestors[ancestors.length - 1].level >= level) ancestors.pop();
+		const entry = {
+			id: token.attrGet("id") ?? "",
+			text,
+			children: []
+		};
+		(ancestors.at(-1)?.entry.children ?? roots).push(entry);
+		ancestors.push({
+			level,
+			entry
+		});
+	});
+	const [list, item] = format === "plain" ? ["div", "div"] : [format === "numbered" ? "ol" : "ul", "li"];
+	const render = (entries) => `<${list} role="list">${entries.map(({ id, text, children }) => `<${item} role="listitem"><a href="#${escape(id)}">${escape(text)}</a>${children.length ? render(children) : ""}</${item}>`).join("")}</${list}>`;
+	return `<nav data-looma-toc="" data-format="${format}" data-depth="${depth}" aria-label="Table of contents"><strong>Table of contents</strong>${roots.length ? render(roots) : ""}</nav>\n`;
+}
+/**
+* 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.
+*/
+function loomaMarkdown(md) {
+	const escape = md.utils.escapeHtml;
+	md.block.ruler.before("table", "looma_frontmatter", frontmatter);
+	md.block.ruler.before("fence", "looma_container", container, { alt: [
+		"paragraph",
+		"reference",
+		"blockquote",
+		"list"
+	] });
+	md.block.ruler.before("paragraph", "looma_leaf", leaf, { alt: [
+		"paragraph",
+		"reference",
+		"blockquote",
+		"list"
+	] });
+	md.inline.ruler.before("link", "looma_directive", directive);
+	md.core.ruler.after("block", "looma_task_lists", taskLists);
+	md.core.ruler.before("inline", "looma_alerts", alerts);
+	md.core.ruler.before("text_join", "looma_attributes", attributes);
+	const rules = md.renderer.rules;
+	rules.looma_frontmatter = () => "";
+	rules.looma_container_open = (tokens, index) => {
+		const { info, meta } = tokens[index];
+		if (info === "details") return `<details${meta.open ? " open" : ""}><summary>${escape(meta.title || "Details")}</summary>\n`;
+		if (info === "figure") return "<figure>\n";
+		if (info === "tabs" || info === "code-group") return `<ui-tabs${info === "code-group" ? " class=\"code-group\"" : ""} group="${escape(meta.title || info)}">\n`;
+		return `<ui-callout tone="${normalizeLoomaCalloutTone(info)}"${meta.title ? ` heading="${escape(meta.title)}"` : ""}>\n`;
+	};
+	rules.looma_container_close = (tokens, index, _options, env) => {
+		const { info } = tokens[index];
+		if (info === "details") return "</details>\n";
+		if (info === "figure") {
+			const title = tokens[index].meta.title;
+			return `${title ? `<figcaption>${md.renderInline(title, env)}</figcaption>\n` : ""}</figure>\n`;
+		}
+		if (info === "tabs" || info === "code-group") return "</ui-tabs>\n";
+		return "</ui-callout>\n";
+	};
+	rules.looma_tab_open = (tokens, index) => `<section aria-label="${escape(tokens[index].meta.label)}">\n`;
+	rules.looma_tab_close = () => "</section>\n";
+	rules.looma_toc = (tokens, index) => tableOfContents(tokens, tokens[index].meta.format, tokens[index].meta.depth, escape);
+	rules.looma_chip = (tokens, index) => {
+		const { label, attributes } = tokens[index].meta;
+		const tone = normalizeLoomaChipTone(attributes.tone);
+		return `<span data-looma-chip="" data-label="${escape(label)}" data-color="${tone}"${label ? "" : " data-placeholder=\"\""}>${escape(label)}</span>`;
+	};
+	rules.looma_mention = (tokens, index) => {
+		const { label, attributes } = tokens[index].meta;
+		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`;
+	};
+	rules.fence = (tokens, index) => code(tokens[index].content, tokens[index].info);
+	rules.code_block = (tokens, index) => code(tokens[index].content, "");
+}
+/**
+* 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() {
+	return new MarkdownIt({
+		html: true,
+		linkify: true,
+		typographer: false
+	}).use(loomaMarkdown);
+}
+//#endregion
+export { createLoomaMarkdownIt, loomaMarkdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.28.14",
+  "version": "0.28.16",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -50,6 +50,21 @@
       "import": "./editor/extensions/index.js",
       "default": "./editor/extensions/index.js"
     },
+    "./markdown": {
+      "types": "./markdown/index.d.ts",
+      "import": "./markdown/index.js",
+      "default": "./markdown/index.js"
+    },
+    "./markdown/markdown-it": {
+      "types": "./markdown/markdown-it.d.ts",
+      "import": "./markdown/markdown-it.js",
+      "default": "./markdown/markdown-it.js"
+    },
+    "./markdown/fixtures": {
+      "types": "./markdown/fixtures.d.ts",
+      "import": "./markdown/fixtures.js",
+      "default": "./markdown/fixtures.js"
+    },
     "./vue/*": "./vue/*",
     "./vanilla": "./vanilla/index.js",
     "./vanilla/*": "./vanilla/*",
@@ -68,6 +83,7 @@
     "dist/",
     "vue/",
     "editor/",
+    "markdown/",
     "vanilla/",
     "components/",
     "styles/",