@gjermundgaraba/pixel-paper 0.1.1 → 0.2.1

package/dist/markdown-editor/live/live.js

@@ -0,0 +1,438 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { safeHref, safeImageSource } from "../link-policy.js";
+import { liveMarkdownTheme } from "./theme.js";
+import { syntaxTree } from "@codemirror/language";
+import { Prec, RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType, keymap } from "@codemirror/view";
+// src/markdown-editor/live/live.ts
+const UNKNOWN_HEIGHT = -1;
+const TABLE_ROW_HEIGHT = 32;
+const IMAGE_ESTIMATED_HEIGHT = 240;
+const TABLE_HINT = "Click to edit the table";
+var DrawnWidget = class extends WidgetType {
+	drawing;
+	constructor(drawing) {
+		super();
+		this.drawing = drawing;
+	}
+	eq(other) {
+		return __foldkitBrandViewResult((other.drawing.key === this.drawing.key), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#eq");
+	}
+	toDOM(view) {
+		return __foldkitBrandViewResult((this.drawing.draw(view)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#toDOM");
+	}
+	get estimatedHeight() {
+		return __foldkitBrandViewResult((this.drawing.estimatedHeight), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#estimatedHeight");
+	}
+	ignoreEvent() {
+		return __foldkitBrandViewResult((this.drawing.takesOwnEvents), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#ignoreEvent");
+	}
+};
+const spanOf = (className, text) => {
+	const span = document.createElement("span");
+	span.className = className;
+	span.textContent = text;
+	return __foldkitBrandViewResult((span), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#spanOf");
+};
+const checkboxWidget = (isChecked) => __foldkitBrandViewResult((new DrawnWidget({
+	key: `checkbox:${isChecked}`,
+	draw: () => {
+		const box = document.createElement("input");
+		box.type = "checkbox";
+		box.checked = isChecked;
+		box.className = "lmd-check";
+		box.tabIndex = -1;
+		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw");
+	},
+	estimatedHeight: UNKNOWN_HEIGHT,
+	takesOwnEvents: false
+})), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#checkboxWidget");
+const bulletWidget = new DrawnWidget({
+	key: "bullet",
+	draw: () => __foldkitBrandViewResult((spanOf("lmd-bullet", "•")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~2"),
+	estimatedHeight: UNKNOWN_HEIGHT,
+	takesOwnEvents: true
+});
+const imageWidget = (source, alt) => __foldkitBrandViewResult((new DrawnWidget({
+	key: `image:${source}\n${alt}`,
+	draw: () => {
+		const box = spanOf("lmd-img-box", "");
+		const safeSource = safeImageSource(source, document.baseURI);
+		if (safeSource === void 0) {
+			box.append(spanOf("lmd-img-note", alt === "" ? "Image not shown" : alt));
+			return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~3");
+		}
+		const image = document.createElement("img");
+		image.className = "lmd-img";
+		image.alt = alt;
+		image.referrerPolicy = "no-referrer";
+		image.addEventListener("error", () => {
+			image.replaceWith(spanOf("lmd-img-note", alt === "" ? "Image not found" : `Image not found: ${alt}`));
+		}, { once: true });
+		image.src = safeSource;
+		box.append(image);
+		return __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~3");
+	},
+	estimatedHeight: IMAGE_ESTIMATED_HEIGHT,
+	takesOwnEvents: false
+})), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#imageWidget");
+const isList = (node) => __foldkitBrandViewResult((node?.name === "BulletList" || node?.name === "OrderedList"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isList");
+const hide = Decoration.replace({});
+const mark = (className) => __foldkitBrandViewResult((Decoration.mark({ class: className })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mark");
+const line = (className) => __foldkitBrandViewResult((Decoration.line({ class: className })), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#line");
+const INLINE = /* @__PURE__ */ new Map([
+	["Emphasis", "lmd-em"],
+	["StrongEmphasis", "lmd-strong"],
+	["Strikethrough", "lmd-strike"],
+	["InlineCode", "lmd-code"],
+	["Link", "lmd-link"]
+]);
+const HIDDEN_MARKS = /* @__PURE__ */ new Set([
+	"EmphasisMark",
+	"StrikethroughMark",
+	"LinkMark",
+	"URL"
+]);
+const ATX_HEADING = /^ATXHeading(?<level>\d)$/u;
+const ANGLE_BRACKETED = /^<(?<destination>.*)>$/su;
+const EMAIL = /^[^\s:@]+@[^\s:@]+$/u;
+const URL_OWNERS = /* @__PURE__ */ new Set([
+	"Link",
+	"Image",
+	"LinkReference"
+]);
+const isPlainBrackets = (node) => __foldkitBrandViewResult(((node.name === "Link" || node.name === "Image") && node.getChild("URL") === null), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isPlainBrackets");
+const isBareUrl = (node) => __foldkitBrandViewResult((node.name === "URL" && !URL_OWNERS.has(node.parent?.name ?? "")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isBareUrl");
+/** The live layer's decorations over the visible ranges, as a ViewPlugin may provide them. */
+const liveDecorations = (state, visibleRanges, isFocused) => {
+	const { ranges } = state.selection;
+	const touched = (from, to) => __foldkitBrandViewResult((isFocused && ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#touched");
+	const activeLine = (position) => {
+		const { from, to } = state.doc.lineAt(position);
+		return __foldkitBrandViewResult((touched(from, to)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#activeLine");
+	};
+	const placed = [];
+	const add = (from, to, decoration) => {
+		placed.push({
+			from,
+			to,
+			decoration,
+			isReplace: decoration === hide
+		});
+	};
+	const replace = (from, to, widget) => {
+		placed.push({
+			from,
+			to,
+			decoration: Decoration.replace({ widget }),
+			isReplace: true
+		});
+	};
+	const addLine = (position, decoration) => {
+		placed.push({
+			from: position,
+			to: position,
+			decoration,
+			isReplace: false
+		});
+	};
+	const addLines = (from, to, className) => {
+		for (let position = from; position <= to;) {
+			const { from: start, to: end } = state.doc.lineAt(position);
+			addLine(start, line(className));
+			position = end + 1;
+		}
+	};
+	const hideWithFollowingSpace = (from, to) => {
+		add(from, state.sliceDoc(to, to + 1) === " " ? to + 1 : to, hide);
+	};
+	for (const { from, to } of visibleRanges) syntaxTree(state).iterate({
+		from,
+		to,
+		enter: (node) => {
+			const { name } = node;
+			const { parent } = node.node;
+			const level = ATX_HEADING.exec(name)?.groups?.["level"];
+			if (level !== void 0) {
+				addLine(state.doc.lineAt(node.from).from, line(`lmd-h lmd-h${level}`));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "HeaderMark" && parent?.name.startsWith("ATXHeading") === true) {
+				if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "LinkReference") return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (isPlainBrackets(node.node)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (name === "LinkMark" && parent !== null && isPlainBrackets(parent)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			if (name === "Escape") {
+				if (!touched(node.from, node.to)) add(node.from, node.from + 1, hide);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "Image") {
+				const url = node.node.getChild("URL");
+				if (url !== null && !touched(node.from, node.to)) {
+					const alt = state.sliceDoc(node.from + 2, Math.max(node.from + 2, url.from - 2));
+					replace(node.from, node.to, imageWidget(state.sliceDoc(url.from, url.to).replace(ANGLE_BRACKETED, "$<destination>"), alt));
+				}
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			const inlineClass = INLINE.get(name);
+			if (inlineClass !== void 0) {
+				add(node.from, node.to, mark(inlineClass));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (isBareUrl(node.node)) {
+				add(node.from, node.to, mark("lmd-link"));
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (parent !== null && (HIDDEN_MARKS.has(name) || name === "CodeMark" && parent.name === "InlineCode")) {
+				if (!touched(parent.from, parent.to)) add(node.from, node.to, hide);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "FencedCode" || name === "CodeBlock") {
+				addLines(node.from, node.to, "lmd-codeblock");
+				return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "Blockquote") {
+				addLines(node.from, node.to, "lmd-quote");
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "QuoteMark") {
+				if (!activeLine(node.from)) hideWithFollowingSpace(node.from, node.to);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "HorizontalRule") {
+				if (!activeLine(node.from)) {
+					addLine(state.doc.lineAt(node.from).from, line("lmd-hr"));
+					add(node.from, node.to, hide);
+				}
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "Table") {
+				addLines(node.from, node.to, "lmd-table");
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "ListMark" && parent !== null && isList(parent.parent)) {
+				if (activeLine(node.from)) return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+				if (parent.getChild("Task") !== null) hideWithFollowingSpace(node.from, node.to);
+				else if (parent.parent?.name === "BulletList") replace(node.from, node.to, bulletWidget);
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+			}
+			if (name === "TaskMarker" && !touched(node.from, node.to)) {
+				const isChecked = /x/iu.test(state.sliceDoc(node.from, node.to));
+				replace(node.from, node.to, checkboxWidget(isChecked));
+				if (isChecked && parent !== null) add(node.to, parent.to, mark("lmd-done"));
+			}
+			return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter");
+		}
+	});
+	placed.sort((left, right) => __foldkitBrandViewResult((left.from - right.from || left.decoration.startSide - right.decoration.startSide), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~3"));
+	const staysOnItsLine = (from, to) => __foldkitBrandViewResult((to <= state.doc.lineAt(from).to), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#staysOnItsLine");
+	const builder = new RangeSetBuilder();
+	let lastReplaceEnd = -1;
+	for (const { from, to, decoration, isReplace } of placed) {
+		const isRangeReplace = from !== to && isReplace;
+		if (!isRangeReplace || from >= lastReplaceEnd && staysOnItsLine(from, to)) {
+			builder.add(from, to, decoration);
+			if (isRangeReplace) lastReplaceEnd = to;
+		}
+	}
+	return __foldkitBrandViewResult((builder.finish()), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#liveDecorations");
+};
+const DELIMITER_ROW = /^\s*\|?[\s:|-]+\|?\s*$/u;
+const tableCells = (row) => __foldkitBrandViewResult((row.trim().replaceAll(/^\||\|$/gu, "").split(/(?<!\\)\|/u).map((cell) => __foldkitBrandViewResult((cell.trim().replaceAll(String.raw`\|`, "|")), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableCells");
+const tableOf = (source) => {
+	const table = document.createElement("table");
+	const head = table.createTHead();
+	const body = table.createTBody();
+	const rows = source.split("\n").filter((row) => __foldkitBrandViewResult((row.trim() !== ""), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~5"));
+	table.className = "lmd-table-view";
+	for (const [index, row] of rows.entries()) if (index !== 1 || !DELIMITER_ROW.test(row)) {
+		const tableRow = document.createElement("tr");
+		for (const text of tableCells(row)) {
+			const cell = document.createElement(index === 0 ? "th" : "td");
+			cell.textContent = text;
+			tableRow.append(cell);
+		}
+		(index === 0 ? head : body).append(tableRow);
+	}
+	return __foldkitBrandViewResult((table), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableOf");
+};
+const tableWidget = (text) => __foldkitBrandViewResult((new DrawnWidget({
+	key: `table:${text}`,
+	draw: (view) => {
+		const dom = document.createElement("div");
+		dom.className = "lmd-table-widget";
+		dom.title = TABLE_HINT;
+		dom.append(tableOf(text));
+		dom.addEventListener("mousedown", (event) => {
+			event.preventDefault();
+			const row = event.target instanceof Element ? event.target.closest("tr") : null;
+			const rows = [...dom.querySelectorAll("tr")];
+			const rowIndex = row === null ? -1 : rows.indexOf(row);
+			const sourceOffset = rowIndex <= 0 ? 0 : rowIndex + 1;
+			const first = view.state.doc.lineAt(view.posAtDOM(dom));
+			const target = view.state.doc.line(Math.min(first.number + sourceOffset, view.state.doc.lines));
+			view.dispatch({ selection: { anchor: Math.min(target.from + 2, target.to) } });
+			view.focus();
+		});
+		return __foldkitBrandViewResult((dom), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#draw~4");
+	},
+	estimatedHeight: TABLE_ROW_HEIGHT * text.split("\n").length,
+	takesOwnEvents: true
+})), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#tableWidget");
+const lastValueOf = (transaction, type, held) => {
+	const last = transaction.effects.findLast((effect) => __foldkitBrandViewResult((effect.is(type)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~7"));
+	return __foldkitBrandViewResult((last === void 0 ? held : last.value), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#lastValueOf");
+};
+const setFocus = StateEffect.define();
+const setPointerDown = StateEffect.define();
+const pointerDownField = StateField.define({
+	create: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#create"),
+	update: (isDown, transaction) => __foldkitBrandViewResult((lastValueOf(transaction, setPointerDown, isDown)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#update")
+});
+const POINTER_RELEASE_EVENTS = [
+	"mouseup",
+	"dragend",
+	"contextmenu"
+];
+const holdRevealUntilPointerRelease = (view) => {
+	const { ownerDocument } = view.dom;
+	const release = () => {
+		for (const name of POINTER_RELEASE_EVENTS) ownerDocument.removeEventListener(name, release);
+		setTimeout(() => {
+			view.dispatch({ effects: setPointerDown.of(false) });
+		}, 0);
+	};
+	view.dispatch({ effects: setPointerDown.of(true) });
+	for (const name of POINTER_RELEASE_EVENTS) ownerDocument.addEventListener(name, release);
+};
+const buildTables = (state, isFocused) => {
+	const builder = new RangeSetBuilder();
+	syntaxTree(state).iterate({ enter: (node) => {
+		if (node.name !== "Table") return __foldkitBrandViewResult((node.name === "Document" || node.name.endsWith("List") || node.name === "ListItem" || node.name === "Blockquote"), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter~2");
+		const { from } = state.doc.lineAt(node.from);
+		const { to } = state.doc.lineAt(node.to);
+		const isInside = state.selection.ranges.some((range) => __foldkitBrandViewResult((range.from <= to && range.to >= from), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~9"));
+		if (from === node.from && !(isFocused && isInside)) builder.add(from, to, Decoration.replace({
+			widget: tableWidget(state.sliceDoc(from, to)),
+			block: true
+		}));
+		return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#enter~2");
+	} });
+	return __foldkitBrandViewResult((builder.finish()), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#buildTables");
+};
+const tablesField = StateField.define({
+	create: (state) => (__foldkitBrandViewResult(({
+		isFocused: false,
+		decorations: buildTables(state, false)
+	}), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#create~2")),
+	update: (value, transaction) => {
+		const isFocused = lastValueOf(transaction, setFocus, value.isFocused);
+		const wasDown = transaction.startState.field(pointerDownField);
+		const isDown = transaction.state.field(pointerDownField);
+		if (isDown && !transaction.docChanged) return __foldkitBrandViewResult(({
+			isFocused,
+			decorations: value.decorations
+		}), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#update~2");
+		return __foldkitBrandViewResult((isFocused === value.isFocused && wasDown === isDown && !transaction.docChanged && transaction.selection === void 0 && syntaxTree(transaction.startState) === syntaxTree(transaction.state) ? value : {
+			isFocused,
+			decorations: buildTables(transaction.state, isFocused)
+		}), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#update~2");
+	},
+	provide: (field) => __foldkitBrandViewResult((EditorView.decorations.from(field, (value) => __foldkitBrandViewResult((value.decorations), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~10"))), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#provide")
+});
+const linkHref = (state, node) => {
+	const url = node.name === "Link" ? node.getChild("URL") : node;
+	if (url === null) return;
+	const href = state.sliceDoc(url.from, url.to).replace(ANGLE_BRACKETED, "$<destination>");
+	if (/^www\./iu.test(href)) return __foldkitBrandViewResult((`https://${href}`), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkHref");
+	return __foldkitBrandViewResult((node.name === "URL" && EMAIL.test(href) ? `mailto:${href}` : href), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkHref");
+};
+const isLinkNode = (node) => __foldkitBrandViewResult((node.name === "Link" && !isPlainBrackets(node) || isBareUrl(node)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#isLinkNode");
+const toggleCheckbox = (view, box) => {
+	const position = view.posAtDOM(box);
+	const text = view.state.sliceDoc(position, position + 3);
+	if (!/^\[[ xX]\]$/u.test(text)) return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#toggleCheckbox");
+	view.dispatch({ changes: {
+		from: position + 1,
+		to: position + 2,
+		insert: text.charAt(1) === " " ? "x" : " "
+	} });
+	return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#toggleCheckbox");
+};
+const linkAt = (state, position, side) => {
+	for (let node = syntaxTree(state).resolveInner(position, side); node !== null; node = node.parent) if (isLinkNode(node)) return __foldkitBrandViewResult((linkHref(state, node)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#linkAt");
+};
+const openLink = (url) => {
+	const href = safeHref(url, document.baseURI);
+	if (href !== void 0) window.open(href, "_blank", "noopener,noreferrer");
+};
+const openLinkAtCaret = (view) => {
+	const { head } = view.state.selection.main;
+	const url = linkAt(view.state, head, 1) ?? linkAt(view.state, head, -1);
+	if (url === void 0) return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#openLinkAtCaret");
+	openLink(url);
+	return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#openLinkAtCaret");
+};
+/** Markdown drawn over its own text, as in Obsidian's Live Preview: the document stays
+*  Markdown, and its marks show only around the selection. Redrawing a reveal moves text, so
+*  nothing redraws under an IME's composition or a pressed mouse button. */
+const liveMarkdown = () => {
+	const preview = ViewPlugin.fromClass(class {
+		decorations;
+		isStale = false;
+		constructor(view) {
+			this.decorations = liveDecorations(view.state, view.visibleRanges, view.hasFocus);
+		}
+		update(update) {
+			if (update.view.composing || update.state.field(pointerDownField) && !update.docChanged) {
+				this.decorations = this.decorations.map(update.changes);
+				this.isStale = true;
+			} else if (this.isStale || update.docChanged || update.selectionSet || update.focusChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state)) {
+				this.decorations = liveDecorations(update.state, update.view.visibleRanges, update.view.hasFocus);
+				this.isStale = false;
+			}
+		}
+	}, {
+		decorations: (plugin) => __foldkitBrandViewResult((plugin.decorations), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#decorations"),
+		eventObservers: { compositionend: (_, view) => {
+			setTimeout(() => {
+				view.dispatch({});
+			}, 0);
+		} },
+		eventHandlers: { mousedown: (event, view) => {
+			const box = event.target instanceof HTMLInputElement && event.target.classList.contains("lmd-check") ? event.target : void 0;
+			if (box !== void 0 && (event.button !== 0 || toggleCheckbox(view, box))) {
+				event.preventDefault();
+				return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mousedown");
+			}
+			if (event.metaKey || event.ctrlKey) {
+				const position = view.posAtCoords({
+					x: event.clientX,
+					y: event.clientY
+				});
+				const url = position === null ? void 0 : linkAt(view.state, position, 1);
+				if (url !== void 0) {
+					openLink(url);
+					event.preventDefault();
+					return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mousedown");
+				}
+			}
+			if (event.button === 0) holdRevealUntilPointerRelease(view);
+			return __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#mousedown");
+		} }
+	});
+	return __foldkitBrandViewResult(([
+		pointerDownField,
+		preview,
+		tablesField,
+		Prec.high(keymap.of([{
+			key: "Mod-Enter",
+			run: openLinkAtCaret
+		}])),
+		EditorView.focusChangeEffect.of((_, isFocusing) => __foldkitBrandViewResult((setFocus.of(isFocusing)), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#anonymous~12")),
+		liveMarkdownTheme
+	]), "@gjermundgaraba/pixel-paper/markdown-editor/live/live.js#liveMarkdown");
+};
+export { liveDecorations, liveMarkdown };

package/dist/markdown-editor/live/theme.js

@@ -0,0 +1,117 @@
+import { EditorView } from "@codemirror/view";
+// src/markdown-editor/live/theme.ts
+const PIXEL_LABEL = {
+	fontFamily: "var(--font-px)",
+	fontWeight: "400",
+	textTransform: "uppercase",
+	letterSpacing: "var(--tracking-label)"
+};
+const CODE = {
+	fontFamily: "var(--font-code)",
+	fontSize: "var(--type-control)"
+};
+/** The live layer's look, in `tokens.css` values alone, so paper and plum both hold. */
+const liveMarkdownTheme = EditorView.baseTheme({
+	"&": {
+		color: "var(--ink)",
+		background: "var(--paper)"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-scroller": {
+		fontFamily: "var(--font-body)",
+		fontSize: "var(--type-body)",
+		lineHeight: "1.5",
+		overflow: "auto"
+	},
+	".cm-content": {
+		padding: "2px 0",
+		caretColor: "var(--ink)"
+	},
+	".cm-content ::selection": {
+		background: "var(--ink)",
+		color: "var(--paper)"
+	},
+	".cm-cursor": { borderLeftColor: "var(--ink)" },
+	".cm-line": { padding: "0" },
+	".lmd-h": {
+		fontWeight: "var(--read-weight)",
+		lineHeight: "1.3"
+	},
+	".lmd-h1, .lmd-h2": { fontSize: "var(--read-h2)" },
+	".lmd-h3": { fontSize: "var(--read-h3)" },
+	".lmd-h4": {
+		...PIXEL_LABEL,
+		fontSize: "var(--type-control)"
+	},
+	".lmd-h5": { fontSize: "var(--type-body)" },
+	".lmd-h6": {
+		...PIXEL_LABEL,
+		fontSize: "var(--type-label)",
+		color: "var(--muted)"
+	},
+	".lmd-strong": { fontWeight: "var(--read-weight)" },
+	".lmd-em": { fontStyle: "italic" },
+	".lmd-strike, .lmd-done": {
+		textDecoration: "line-through",
+		color: "var(--muted)"
+	},
+	".lmd-code": {
+		...CODE,
+		background: "var(--head)",
+		padding: "1px 5px"
+	},
+	".lmd-link": {
+		color: "var(--ink)",
+		textDecoration: "underline",
+		textDecorationThickness: "var(--hair)",
+		textUnderlineOffset: "3px"
+	},
+	".lmd-codeblock": {
+		...CODE,
+		background: "var(--head)",
+		padding: "0 var(--space-s) !important"
+	},
+	".lmd-table": CODE,
+	".lmd-quote": {
+		borderLeft: "var(--hair) solid var(--ink)",
+		paddingLeft: "var(--space-m) !important",
+		color: "var(--muted)"
+	},
+	".lmd-hr": {
+		height: "0.8em",
+		background: "linear-gradient(var(--rule), var(--rule)) center / 100% var(--hair) no-repeat"
+	},
+	".lmd-bullet": {
+		color: "var(--muted)",
+		display: "inline-block",
+		minWidth: "0.7em"
+	},
+	".lmd-check": {
+		width: "auto",
+		margin: "0 var(--space-s) 0 0",
+		verticalAlign: "-2px",
+		cursor: "pointer",
+		accentColor: "var(--ink)"
+	},
+	".lmd-img": {
+		display: "block",
+		maxWidth: "100%",
+		maxHeight: "480px",
+		margin: "var(--space-s) 0"
+	},
+	".lmd-img-note": {
+		color: "var(--muted)",
+		fontStyle: "italic"
+	},
+	".lmd-table-widget": {
+		cursor: "text",
+		padding: "2px 0"
+	},
+	".lmd-table-view": { borderCollapse: "collapse" },
+	".lmd-table-view th, .lmd-table-view td": {
+		border: "var(--hair) solid var(--rule)",
+		padding: "3px var(--space-s)",
+		textAlign: "left"
+	}
+});
+export { liveMarkdownTheme };

package/dist/markdown-editor/markdown-editor.d.ts

@@ -0,0 +1,11 @@
+import { ViewConfig as ViewConfig$1 } from "../textarea-field/textarea-field.js";
+import { Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a Markdown editor with `view`. */
+export type ViewConfig<Message> = Pick<ViewConfig$1<Message>, "id" | "label" | "value" | "onInput" | "help" | "error" | "rows">;
+/** A labelled Markdown field, edited in place: its marks show only around the caret, and the
+ *  text it hands back is the Markdown string as typed, except that the first edit turns CRLF
+ *  line endings into LF. Without `defineMarkdownEditorElement` it is a plain `TextareaField`,
+ *  which is also what tests see, and so is a field whose editor fails to mount. With it, the
+ *  element takes the textarea's place and drives `onInput` itself. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/markdown-editor/markdown-editor.js

@@ -0,0 +1,22 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../textarea-field/textarea-field.js";
+import { Schema } from "effect";
+import { define } from "foldkit/customElement";
+// src/markdown-editor/markdown-editor.ts
+/** The binding to `<pp-markdown-editor>`. The property is `source`, not `value`, because
+*  Foldkit's props module skips a `value` write when the element's `value` already matches. */
+const spec = define({
+	tag: "pp-markdown-editor",
+	properties: { source: Schema.String },
+	events: { "value-change": Schema.Struct({ value: Schema.String }) }
+});
+/** A labelled Markdown field, edited in place: its marks show only around the caret, and the
+*  text it hands back is the Markdown string as typed, except that the first edit turns CRLF
+*  line endings into LF. Without `defineMarkdownEditorElement` it is a plain `TextareaField`,
+*  which is also what tests see, and so is a field whose editor fails to mount. With it, the
+*  element takes the textarea's place and drives `onInput` itself. */
+const view = (config, h) => {
+	const host = spec.withMessage(h);
+	return __foldkitBrandViewResult((host([host.Source(config.value), host.OnValueChange(({ value }) => __foldkitBrandViewResult((config.onInput(value)), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#anonymous"))], [view$1(config, h)])), "@gjermundgaraba/pixel-paper/markdown-editor/markdown-editor.js#view");
+};
+export { spec, view };

package/dist/markdown-editor/reconcile.js

@@ -0,0 +1,24 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/markdown-editor/reconcile.ts
+/** CodeMirror's document keeps LF, so a stored CRLF text compares equal to it only after this. */
+const withLfLineEndings = (text) => __foldkitBrandViewResult((text.replaceAll(/\r\n?/gu, "\n")), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#withLfLineEndings");
+/** Remembers a document sent up, so its echo cannot be taken for an outside change. */
+const afterEmission = (pending, doc) => __foldkitBrandViewResult(([...pending, doc]), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterEmission");
+/** Sorts a `source` write into an echo of this editor's own typing, which must not rewind a
+*  document that has moved on, or an outside change. A render may skip echoes, so a match
+*  also retires everything older. Text loss here would be silent, with no history behind it. */
+const afterSource = (pending, source, doc) => {
+	const echoIndex = pending.indexOf(source);
+	if (echoIndex !== -1) return __foldkitBrandViewResult(({
+		pending: pending.slice(echoIndex + 1),
+		isExternal: false
+	}), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterSource");
+	return __foldkitBrandViewResult((withLfLineEndings(source) === doc ? {
+		pending,
+		isExternal: false
+	} : {
+		pending: [],
+		isExternal: true
+	}), "@gjermundgaraba/pixel-paper/markdown-editor/reconcile.js#afterSource");
+};
+export { afterEmission, afterSource, withLfLineEndings };

package/dist/menu/menu.d.ts

@@ -68,13 +68,13 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     readonly edge: "First" | "Last";
   };
   commands?: Update.Commands<{
+    readonly _tag: "CompletedFocus";
+  } | {
     readonly _tag: "ClickedToggle";
   } | {
     readonly _tag: "PressedEscape";
   } | {
     readonly _tag: "CompletedFocusEdge";
-  } | {
-    readonly _tag: "CompletedFocus";
   } | {
     readonly _tag: "CompletedPlaceSlip";
   } | {
@@ -163,13 +163,13 @@ export declare const view: import("foldkit/submodel").View<{
   readonly isOpen: boolean;
   readonly edge: "First" | "Last";
 }, {
+  readonly _tag: "CompletedFocus";
+} | {
   readonly _tag: "ClickedToggle";
 } | {
   readonly _tag: "PressedEscape";
 } | {
   readonly _tag: "CompletedFocusEdge";
-} | {
-  readonly _tag: "CompletedFocus";
 } | {
   readonly _tag: "CompletedPlaceSlip";
 } | {