pi-openui 0.0.0-stage → 0.1.0

package/src/blocks/geo.ts

@@ -0,0 +1,206 @@
+// GeoMap: braille land texture + coastline, pins with labels, dashed links. Equirectangular, square dots.
+import { LAND } from "../data/land.ts";
+import { textWidth, truncateText, type Cell } from "../diagram/canvas.ts";
+import type { El } from "../lang/library.ts";
+import { Dots } from "./braille.ts";
+import type { Anchor } from "./core.ts";
+import type { Block, Target } from "./types.ts";
+import { cell, fromRows, textCells, vstack } from "./util.ts";
+
+let rings: Float64Array[] | null = null;
+function loadRings(): Float64Array[] {
+	if (rings) return rings;
+	rings = LAND.split("|").map((r) => {
+		const pts = r.split(";").map((p) => p.split(",").map(Number));
+		const out = new Float64Array(pts.length * 2);
+		let x = 0;
+		let y = 0;
+		pts.forEach(([a, b], i) => {
+			if (i === 0) {
+				x = a;
+				y = b;
+			} else {
+				x += a;
+				y += b;
+			}
+			out[i * 2] = x;
+			out[i * 2 + 1] = y;
+		});
+		return out;
+	});
+	return rings;
+}
+
+/** boolean land mask for a view, W x H dots */
+export function landMask(lonMin: number, lonMax: number, latMin: number, latMax: number, W: number, H: number): Uint8Array {
+	const mask = new Uint8Array(W * H);
+	const sx = W / (lonMax - lonMin);
+	const sy = H / (latMax - latMin);
+	const edges: Array<[number, number, number, number]> = [];
+	for (const ring of loadRings()) {
+		const n = ring.length / 2;
+		for (const off of [-3600, 0, 3600]) {
+			let minX = Infinity;
+			let maxX = -Infinity;
+			let minY = Infinity;
+			let maxY = -Infinity;
+			const px: number[] = [];
+			const py: number[] = [];
+			for (let i = 0; i < n; i++) {
+				const lon = (ring[i * 2] + off) / 10 - 180;
+				const lat = 90 - ring[i * 2 + 1] / 10;
+				const X = (lon - lonMin) * sx;
+				const Y = (latMax - lat) * sy;
+				px.push(X);
+				py.push(Y);
+				minX = Math.min(minX, X);
+				maxX = Math.max(maxX, X);
+				minY = Math.min(minY, Y);
+				maxY = Math.max(maxY, Y);
+			}
+			if (maxX < 0 || minX > W || maxY < 0 || minY > H) continue;
+			for (let i = 0; i < n; i++) {
+				const j = (i + 1) % n;
+				if (py[i] !== py[j]) edges.push([px[i], py[i], px[j], py[j]]);
+			}
+		}
+	}
+	for (let y = 0; y < H; y++) {
+		const yc = y + 0.5;
+		const xs: number[] = [];
+		for (const [x0, y0, x1, y1] of edges) {
+			if ((y0 <= yc && y1 > yc) || (y1 <= yc && y0 > yc)) xs.push(x0 + ((yc - y0) / (y1 - y0)) * (x1 - x0));
+		}
+		xs.sort((a, b) => a - b);
+		for (let k = 0; k + 1 < xs.length; k += 2) {
+			const a = Math.max(0, Math.ceil(xs[k] - 0.5));
+			const b = Math.min(W - 1, Math.floor(xs[k + 1] - 0.5));
+			for (let x = a; x <= b; x++) mask[y * W + x] = 1;
+		}
+	}
+	return mask;
+}
+
+const TONE: Record<string, string> = { good: "good", warn: "warn", bad: "bad", info: "info", neutral: "neutral" };
+
+export function geoMap(el: El, width: number): { block: Block; anchors: Map<string, Anchor> } {
+	const pts: El[] = el.props.points ?? [];
+	const links: string[][] = el.props.links ?? [];
+	const anchors = new Map<string, Anchor>();
+	const head = el.props.title ? [fromRows(width, [textCells(truncateText(String(el.props.title), width), "chart.title")])] : [];
+	const cols = Math.max(24, Math.min(width, 84));
+	const W = cols * 2;
+	const lats = pts.map((p) => p.props.lat as number);
+	const lons = pts.map((p) => p.props.lon as number);
+	let lonMin = Math.min(...lons);
+	let lonMax = Math.max(...lons);
+	let latMin = Math.min(...lats);
+	let latMax = Math.max(...lats);
+	const padL = Math.max(6, (lonMax - lonMin) * 0.2);
+	const padA = Math.max(4, (latMax - latMin) * 0.25);
+	lonMin -= padL;
+	lonMax += padL;
+	latMin -= padA;
+	latMax += padA;
+	if (lonMax - lonMin < 24) {
+		const c = (lonMin + lonMax) / 2;
+		lonMin = c - 12;
+		lonMax = c + 12;
+	}
+	let sx = W / (lonMax - lonMin);
+	let rowsN = Math.ceil(((latMax - latMin) * sx) / 4);
+	if (rowsN > 22) {
+		sx = (22 * 4) / (latMax - latMin);
+		const c = (lonMin + lonMax) / 2;
+		lonMin = c - W / sx / 2;
+		lonMax = c + W / sx / 2;
+		rowsN = 22;
+	}
+	if (rowsN < 9) {
+		const need = (9 * 4) / sx;
+		const c = (latMin + latMax) / 2;
+		latMin = c - need / 2;
+		latMax = c + need / 2;
+		rowsN = 9;
+	}
+	if (latMax > 90) {
+		latMin -= latMax - 90;
+		latMax = 90;
+	}
+	if (latMin < -90) {
+		latMax += -90 - latMin;
+		latMin = -90;
+	}
+	const H = rowsN * 4;
+	const mask = landMask(lonMin, lonMax, latMin, latMax, W, H);
+	const d = new Dots(cols, rowsN);
+	const at = (x: number, y: number) => (x < 0 || y < 0 || x >= W || y >= H ? 0 : mask[y * W + x]);
+	for (let y = 0; y < H; y++)
+		for (let x = 0; x < W; x++) {
+			if (!mask[y * W + x]) continue;
+			const edge = !at(x - 1, y) || !at(x + 1, y) || !at(x, y - 1) || !at(x, y + 1);
+			if (edge) d.set(x, y, 1);
+			else if ((x + y) % 2 === 0) d.set(x, y, 0);
+		}
+	const proj = (lat: number, lon: number): [number, number] => [((lon - lonMin) / (lonMax - lonMin)) * W, ((latMax - lat) / (latMax - latMin)) * H];
+	const byLabel = new Map(pts.map((p) => [String(p.props.label), p]));
+	for (const [a, b] of links) {
+		const pa = byLabel.get(a);
+		const pb = byLabel.get(b);
+		if (!pa || !pb) continue;
+		const [x0, y0] = proj(pa.props.lat, pa.props.lon);
+		const [x1, y1] = proj(pb.props.lat, pb.props.lon);
+		const steps = Math.ceil(Math.hypot(x1 - x0, y1 - y0));
+		for (let s = 0; s <= steps; s++) if (Math.floor(s / 3) % 2 === 0) d.set(x0 + ((x1 - x0) * s) / (steps || 1), y0 + ((y1 - y0) * s) / (steps || 1), 2);
+	}
+	const grid = d.rows2cells((o) => (o === 0 ? "map.land" : o === 1 ? "map.coast" : o === 2 ? "map.link" : ""));
+	const rows: Cell[][] = grid.map((r) => r.slice());
+	const targets: Target[] = [];
+	const taken = new Set<string>();
+	const free = (x: number, y: number, w: number) => {
+		if (y < 0 || y >= rowsN || x < 0 || x + w > cols) return false;
+		for (let k = 0; k < w; k++) if (taken.has(`${x + k},${y}`)) return false;
+		return true;
+	};
+	const unlabeled: string[] = [];
+	pts.forEach((p, i) => {
+		const [dx, dy] = proj(p.props.lat, p.props.lon);
+		const cx = Math.max(0, Math.min(cols - 1, Math.floor(dx / 2)));
+		const cy = Math.max(0, Math.min(rowsN - 1, Math.floor(dy / 4)));
+		const role = `map.pin.${TONE[p.props.tone ?? "info"] ?? "info"}`;
+		rows[cy][cx] = cell("●", role);
+		taken.add(`${cx},${cy}`);
+		const label = truncateText(String(p.props.label), 18);
+		const lw = textWidth(label);
+		const tries: Array<[number, number]> = [[cx + 2, cy], [cx - 1 - lw, cy], [cx - Math.floor(lw / 2), cy - 1], [cx - Math.floor(lw / 2), cy + 1], [cx + 2, cy - 1], [cx + 2, cy + 1]];
+		let placed: [number, number] | null = null;
+		for (const [lx, ly] of tries) if (free(lx, ly, lw)) { placed = [lx, ly]; break; }
+		let rect = { x: cx, y: cy, w: 1, h: 1 };
+		if (placed) {
+			const [lx, ly] = placed;
+			textCells(label, "map.label").forEach((c, k) => {
+				rows[ly][lx + k] = c;
+				taken.add(`${lx + k},${ly}`);
+			});
+			const x0 = Math.min(cx, lx);
+			rect = { x: x0, y: Math.min(cy, ly), w: Math.max(cx + 1, lx + lw) - x0, h: Math.abs(ly - cy) + 1 };
+		} else unlabeled.push(String(p.props.label));
+		const id = `geo:${i}`;
+		targets.push({ id, kind: "node", rect, label: `${p.props.label}  ${Number(p.props.lat).toFixed(2)}, ${Number(p.props.lon).toFixed(2)}` });
+		anchors.set(String(p.props.label), { rect, targetId: id });
+	});
+	for (const [a, b] of links) {
+		const pa = byLabel.get(a);
+		const pb = byLabel.get(b);
+		if (!pa || !pb) continue;
+		const [x0, y0] = proj(pa.props.lat, pa.props.lon);
+		const [x1, y1] = proj(pb.props.lat, pb.props.lon);
+		anchors.set(`${a}>${b}`, { rect: { x: Math.max(0, Math.min(cols - 3, Math.floor((x0 + x1) / 4) - 1)), y: Math.max(0, Math.min(rowsN - 1, Math.floor((y0 + y1) / 8))), w: 3, h: 1 } });
+	}
+	const map = fromRows(width, rows, targets);
+	const notes: Block[] = [];
+	if (unlabeled.length) notes.push(fromRows(width, [textCells(truncateText(`also: ${unlabeled.join(", ")}`, width), "text.muted")]));
+	const out = vstack([...head, map, ...notes], 0, width);
+	for (const [, a] of anchors) a.rect = { ...a.rect, y: a.rect.y + head.length };
+	return { block: out, anchors };
+}

package/src/blocks/interact.ts

@@ -0,0 +1,252 @@
+// Interaction logic, independent of any terminal: hit testing, activation, keyboard navigation, pan reveal.
+import type { Block, Target, WState } from "./types.ts";
+
+export interface Env {
+	/** send text to the assistant as the user's next turn */
+	send(text: string): void;
+	/** put text on the clipboard */
+	copy(text: string): void;
+	/** show a short notice under the widget */
+	note(text: string): void;
+}
+
+const area = (t: Target) => t.rect.w * t.rect.h;
+
+/**
+ * Which targets answer to the mouse and keyboard. Outside notes mode everything except note items. In notes mode: the note
+ * items, the notes tray, and tabs (so you can reach content on another tab). Buttons, choices and the like do not fire.
+ */
+export function isLive(t: Target, notes: boolean): boolean {
+	if (!notes) return t.kind !== "item";
+	return t.kind === "item" || t.kind === "tab" || t.kind === "note" || t.kind === "noteadd" || t.kind === "noteclear" || t.kind === "notes";
+}
+
+/** The most specific target at a point: an exact cell match (a pie wedge) beats a rectangle, a small rectangle beats a big one. */
+export function targetAt(block: Block, x: number, y: number, notes = false): Target | null {
+	let best: Target | null = null;
+	let bestScore = Infinity;
+	for (const t of block.targets) {
+		if (!isLive(t, notes)) continue;
+		const r = t.rect;
+		const inRect = x >= r.x && y >= r.y && x < r.x + r.w && y < r.y + r.h && r.x + r.w > 0 && r.x < block.w;
+		const inCells = !!t.cells && t.cells.some(([cx, cy]) => cx === x && cy === y);
+		if (!inRect && !inCells) continue;
+		const score = inCells ? 0 : area(t);
+		if (score < bestScore) {
+			bestScore = score;
+			best = t;
+		}
+	}
+	return best;
+}
+
+export function readingOrder(block: Block, notes = false): Target[] {
+	return block.targets.filter((t) => isLive(t, notes)).sort((a, b) => a.rect.y - b.rect.y || a.rect.x - b.rect.x || a.id.localeCompare(b.id));
+}
+
+export type NavKey = "next" | "prev" | "left" | "right" | "up" | "down";
+
+/** The neighbour of `cur` in a direction among `order`, or `cur` when there is none. Rectangles must be separated along the axis. */
+function spatial(order: Target[], cur: Target, key: "left" | "right" | "up" | "down"): Target {
+	const cx = (t: Target) => t.rect.x + t.rect.w / 2;
+	const cy = (t: Target) => t.rect.y + t.rect.h / 2;
+	const horizontal = key === "left" || key === "right";
+	// "right of" means the rectangles are separated along that axis: a full-width row below is below, not to the right
+	const inDirection = order.filter((t) => {
+		if (t === cur) return false;
+		const r = t.rect;
+		const c = cur.rect;
+		return key === "left" ? r.x + r.w <= c.x : key === "right" ? r.x >= c.x + c.w : key === "up" ? r.y + r.h <= c.y : r.y >= c.y + c.h;
+	});
+	// targets that share the row (sideways) or the column (up and down) win over anything nearer on another line
+	const overlaps = (t: Target) => (horizontal ? t.rect.y < cur.rect.y + cur.rect.h && cur.rect.y < t.rect.y + t.rect.h : t.rect.x < cur.rect.x + cur.rect.w && cur.rect.x < t.rect.x + t.rect.w);
+	const aligned = inDirection.filter(overlaps);
+	// a target that has neighbours on its row stops at the end of the row instead of jumping to another line. Neighbours means
+	// sharing most of the row (a row of buttons), not touching one line of a tall box (a graph node).
+	const shared = (t: Target) => {
+		const a0 = horizontal ? t.rect.y : t.rect.x;
+		const a1 = a0 + (horizontal ? t.rect.h : t.rect.w);
+		const b0 = horizontal ? cur.rect.y : cur.rect.x;
+		const b1 = b0 + (horizontal ? cur.rect.h : cur.rect.w);
+		return Math.min(a1, b1) - Math.max(a0, b0) >= 0.5 * Math.min(a1 - a0, b1 - b0);
+	};
+	const hasRowMates = order.some((t) => t !== cur && shared(t));
+	if (!aligned.length && hasRowMates) return cur;
+	const pool = aligned.length ? aligned : inDirection;
+	let best: Target | null = null;
+	let bestScore = Infinity;
+	for (const t of pool) {
+		const along = Math.abs(horizontal ? cx(t) - cx(cur) : cy(t) - cy(cur));
+		const across = Math.abs(horizontal ? cy(t) - cy(cur) : cx(t) - cx(cur));
+		// cells are about twice as tall as wide, so a line of difference weighs more than a column
+		const score = along + across * (horizontal ? 3 : 2);
+		if (score < bestScore) {
+			bestScore = score;
+			best = t;
+		}
+	}
+	return best ?? cur;
+}
+
+/**
+ * Notes mode. Tab hops between components (and the tray, and tabs). Arrows move among the parts of the component you are in:
+ * from the whole component they step into its first or last part; past the last part they move on to the next component.
+ */
+function notesNav(pool: Target[], currentId: string | null, key: NavKey): Target | null {
+	const order = [...pool].sort((a, b) => a.rect.y - b.rect.y || a.rect.x - b.rect.x || a.id.localeCompare(b.id));
+	// one stop per component: its whole item; plus the tray rows, buttons and tabs
+	const ring = order.filter((t) => t.kind !== "item" || t.item?.key === "");
+	if (!ring.length) return null;
+	const cur = order.find((t) => t.id === currentId) ?? null;
+	const ringStop = (t: Target): Target => (t.kind === "item" && t.item!.key !== "" ? ring.find((r) => r.kind === "item" && r.item!.host === t.item!.host && r.item!.key === "") ?? ring[0] : t);
+	const step = (from: Target, d: 1 | -1): Target => {
+		const stop = ringStop(from);
+		const i = ring.indexOf(stop);
+		return ring[(i + d + ring.length) % ring.length];
+	};
+	if (!cur) return key === "prev" || key === "up" || key === "left" ? ring[ring.length - 1] : ring[0];
+	if (key === "next") return step(cur, 1);
+	if (key === "prev") return step(cur, -1);
+	const fwd = key === "down" || key === "right";
+	if (cur.kind === "item") {
+		const leaves = order.filter((t) => t.kind === "item" && t.item!.host === cur.item!.host && t.item!.key !== "");
+		if (cur.item!.key === "") {
+			if (!leaves.length) return step(cur, fwd ? 1 : -1);
+			return fwd ? leaves[0] : leaves[leaves.length - 1];
+		}
+		const to = spatial(leaves, cur, key);
+		if (to !== cur) return to;
+		return step(cur, fwd ? 1 : -1);
+	}
+	// tray rows, its buttons, tabs, the chip. Up and down go to the next line in reading order and land on its first stop (so
+	// down from a note reaches "Add", never "Clear"); left and right move along the line.
+	if (key === "up" || key === "down") {
+		const below = key === "down";
+		const lines = ring.filter((t) => (below ? t.rect.y >= cur.rect.y + cur.rect.h : t.rect.y + t.rect.h <= cur.rect.y));
+		if (!lines.length) return step(cur, below ? 1 : -1);
+		const y = below ? Math.min(...lines.map((t) => t.rect.y)) : Math.max(...lines.map((t) => t.rect.y));
+		return lines.filter((t) => t.rect.y === y).sort((a, b) => a.rect.x - b.rect.x)[0];
+	}
+	const same = order.filter((t) => t.kind !== "item");
+	return spatial(same, cur, key);
+}
+
+export function nextTarget(block: Block, currentId: string | null, key: NavKey, notes = false): Target | null {
+	const pool = block.targets.filter((t) => isLive(t, notes));
+	if (notes) return notesNav(pool, currentId, key);
+	const order = [...pool].sort((a, b) => a.rect.y - b.rect.y || a.rect.x - b.rect.x || a.id.localeCompare(b.id));
+	if (!order.length) return null;
+	const cur = order.find((t) => t.id === currentId) ?? null;
+	if (key === "next" || key === "prev") {
+		if (!cur) return key === "next" ? order[0] : order[order.length - 1];
+		const i = order.indexOf(cur);
+		return order[(i + (key === "next" ? 1 : -1) + order.length) % order.length];
+	}
+	if (!cur) return order[0];
+	return spatial(order, cur, key);
+}
+
+const lastColon = (id: string) => id.lastIndexOf(":");
+
+/** Apply a target's action. Returns true when the layout changed and the block must be rebuilt. */
+export function activate(t: Target, state: WState, env: Env): boolean {
+	switch (t.kind) {
+		case "tab": {
+			const k = lastColon(t.id);
+			const path = t.id.slice(4, k);
+			const i = Number(t.id.slice(k + 1));
+			if (state.tab[path] === i) return false;
+			state.tab[path] = i;
+			state.tip = null;
+			return true;
+		}
+		case "faq":
+			state.faq[t.id] = !state.faq[t.id];
+			return true;
+		case "choice": {
+			const k = lastColon(t.id);
+			const path = t.id.slice(7, k);
+			state.picked[path] = t.label;
+			if (t.send) env.send(t.send);
+			return true;
+		}
+		case "button":
+			if (t.send) env.send(t.send);
+			if (t.openUrl) {
+				env.copy(t.openUrl);
+				env.note(`link copied: ${t.openUrl}`);
+			}
+			return false;
+		case "copy":
+			if (t.copy !== undefined) env.copy(t.copy);
+			state.copied = t.id;
+			return true;
+		case "node":
+		case "image":
+		case "tip": {
+			const tip = t.tip;
+			if (!tip || !(tip.detail || tip.code || tip.link)) return false;
+			state.tip = state.tip === t.id ? null : t.id;
+			return true;
+		}
+	}
+	return false;
+}
+
+/** Scroll a wide diagram so the target is visible. Returns true when the pan changed. */
+export function reveal(t: Target, state: WState): boolean {
+	const p = t.pan;
+	if (!p) return false;
+	const cur = state.pan[p.key] ?? 0;
+	let next = cur;
+	if (p.x < cur) next = Math.max(0, p.x - 2);
+	else if (p.x + p.w > cur + p.view) next = Math.min(p.total - p.view, p.x + p.w - p.view + 2);
+	if (next === cur) return false;
+	state.pan[p.key] = next;
+	return true;
+}
+
+/** The one-line explanation shown for a hovered or focused target. */
+export function describe(t: Target): string {
+	const bits: string[] = [];
+	switch (t.kind) {
+		case "button":
+			bits.push(`[${t.label}]`, t.send ? `sends "${t.send.length > 70 ? t.send.slice(0, 69) + "…" : t.send}"` : t.openUrl ? `link ${t.openUrl}` : "");
+			break;
+		case "choice":
+			bits.push(t.label, "choose to answer");
+			break;
+		case "tab":
+			bits.push(`tab ${t.label}`);
+			break;
+		case "faq":
+			bits.push(t.label, "Enter to open or close");
+			break;
+		case "copy":
+			bits.push("copy the code to the clipboard");
+			break;
+		case "image":
+			bits.push(t.label);
+			break;
+		case "item":
+			bits.push(t.label, "Enter to write a note");
+			break;
+		case "note":
+			bits.push(`${t.label}`, "Enter to edit, Delete to remove");
+			break;
+		case "notes":
+			bits.push("notes: click an element, or Tab to it and press Enter, to write a note about it");
+			break;
+		case "noteadd":
+			bits.push("put the notes in your message box (nothing is sent)");
+			break;
+		case "noteclear":
+			bits.push("discard all notes on this widget");
+			break;
+		default:
+			bits.push(t.label);
+	}
+	if (t.tip?.hint) bits.push(t.tip.hint);
+	if (t.tip && (t.tip.detail || t.tip.code || t.tip.link)) bits.push("Enter for details");
+	return bits.filter(Boolean).join("  ·  ");
+}

package/src/blocks/markdown.ts

@@ -0,0 +1,135 @@
+import { textWidth } from "../diagram/canvas.ts";
+import { imageLine } from "../lang/md.ts";
+import { codeBlock } from "./code.ts";
+import { image } from "./core.ts";
+import { tableBlock } from "./table.ts";
+import type { Block, Ctx } from "./types.ts";
+import { cell, fromRows, vstack, wrapRuns, textCells, type Run, padRow } from "./util.ts";
+
+export function inline(src: string, base = ""): Run[] {
+	const runs: Run[] = [];
+	const re = /(\*\*|__)(.+?)\1|(\*|_)([^*_\s][^*_]*?)\3|`([^`]+)`|\[([^\]]+)\]\(([^)\s]+)\)|~~(.+?)~~/;
+	let rest = src;
+	while (rest) {
+		const m = re.exec(rest);
+		if (!m) {
+			runs.push({ t: rest, role: base });
+			break;
+		}
+		if (m.index > 0) runs.push({ t: rest.slice(0, m.index), role: base });
+		if (m[2] !== undefined) runs.push({ t: m[2], role: "md.bold" });
+		else if (m[4] !== undefined) runs.push({ t: m[4], role: "md.italic" });
+		else if (m[5] !== undefined) runs.push({ t: m[5], role: "md.code" });
+		else if (m[6] !== undefined) runs.push({ t: m[6], role: "md.link" }, { t: ` (${m[7]})`, role: "md.url" });
+		else if (m[8] !== undefined) runs.push({ t: m[8], role: "md.strike" });
+		rest = rest.slice(m.index + m[0].length);
+	}
+	return runs;
+}
+
+const isSep = (l: string) => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(l) && l.includes("-");
+const cells = (l: string) =>
+	l
+		.trim()
+		.replace(/^\|/, "")
+		.replace(/\|$/, "")
+		.split("|")
+		.map((c) => c.trim());
+
+/**
+ * Markdown as a block. With a render context, a line that is only `![alt](path "caption")` becomes a picture, drawn by the same
+ * code as the Image component (so pi-tui sizes and encodes it, and a terminal without graphics gets the labelled frame). Without
+ * one (a quote, a tooltip panel) that syntax stays text. `path` makes the picture's target ids unique within the widget.
+ */
+export function markdownBlock(src: string, width: number, ctx?: Ctx, path = ""): Block {
+	const lines = String(src ?? "").replace(/\r/g, "").split("\n");
+	const blocks: Block[] = [];
+	let i = 0;
+	let pictures = 0;
+	const para: string[] = [];
+	const flush = () => {
+		if (!para.length) return;
+		blocks.push(fromRows(width, wrapRuns(inline(para.join(" ")), width)));
+		para.length = 0;
+	};
+	while (i < lines.length) {
+		const ln = lines[i];
+		const fence = /^\s*```\s*([\w+-]*)\s*$/.exec(ln);
+		if (fence) {
+			flush();
+			const body: string[] = [];
+			i++;
+			while (i < lines.length && !/^\s*```\s*$/.test(lines[i])) body.push(lines[i++]);
+			i++;
+			blocks.push(codeBlock(body.join("\n"), fence[1] || undefined, undefined, width, null, false));
+			continue;
+		}
+		const pic = ctx ? imageLine(ln) : null;
+		if (pic && ctx) {
+			flush();
+			const el = { type: "Image", props: { src: pic.src, alt: pic.alt || undefined, caption: pic.caption }, line: 0 };
+			blocks.push(image(el, width, `${path}.m${pictures++}`, ctx).block);
+			i++;
+			continue;
+		}
+		const h = /^(#{1,6})\s+(.*?)\s*#*\s*$/.exec(ln);
+		if (h) {
+			flush();
+			const lvl = Math.min(3, h[1].length);
+			blocks.push(fromRows(width, wrapRuns(inline(h[2], `md.h${lvl}`), width)));
+			i++;
+			continue;
+		}
+		if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(ln)) {
+			flush();
+			blocks.push(fromRows(width, [Array.from({ length: width }, () => cell("─", "md.hr"))]));
+			i++;
+			continue;
+		}
+		if (/^\s*>/.test(ln)) {
+			flush();
+			const q: string[] = [];
+			while (i < lines.length && /^\s*>/.test(lines[i])) q.push(lines[i++].replace(/^\s*>\s?/, ""));
+			const inner = markdownBlock(q.join("\n"), Math.max(4, width - 2));
+			blocks.push(fromRows(width, inner.rows.map((r) => [cell("▎", "md.quoteBar"), cell(" "), ...r.map((c) => (c.role ? c : cell(c.ch, "md.quote")))])));
+			continue;
+		}
+		if (ln.includes("|") && i + 1 < lines.length && isSep(lines[i + 1])) {
+			flush();
+			const head = cells(ln);
+			i += 2;
+			const body: string[][] = [];
+			while (i < lines.length && lines[i].includes("|") && lines[i].trim()) body.push(cells(lines[i++]));
+			blocks.push(tableBlock(head, body, width).block);
+			continue;
+		}
+		const li = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(ln);
+		if (li) {
+			flush();
+			const items: Block[] = [];
+			while (i < lines.length) {
+				const m = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/.exec(lines[i]);
+				if (!m) break;
+				const indent = Math.min(6, Math.floor(m[1].replace(/\t/g, "  ").length / 2) * 2);
+				const bullet = /\d/.test(m[2]) ? m[2] : "•";
+				const bw = textWidth(bullet) + 1;
+				const body = wrapRuns(inline(m[3]), Math.max(4, width - indent - bw));
+				const rows = body.map((r, k) => [...Array.from({ length: indent }, () => cell(" ")), ...(k === 0 ? [...textCells(bullet, "md.bullet"), cell(" ")] : Array.from({ length: bw }, () => cell(" "))), ...r]);
+				items.push(fromRows(width, rows));
+				i++;
+			}
+			blocks.push(vstack(items, 0, width));
+			continue;
+		}
+		if (!ln.trim()) {
+			flush();
+			i++;
+			continue;
+		}
+		para.push(ln.trim());
+		i++;
+	}
+	flush();
+	const out = vstack(blocks, 1, width);
+	return { ...out, rows: out.rows.map((r) => padRow(r, width)) };
+}