pi-openui 0.0.0-stage → 0.1.1

package/src/blocks/core.ts

@@ -0,0 +1,343 @@
+// Layout and simple components: Stack, Text, Card, Callout, Metric, Button, Choice, Tabs, Faq, Image + tooltips.
+import { textWidth, truncateText, type Rect } from "../diagram/canvas.ts";
+import type { El } from "../lang/library.ts";
+import { codeInner } from "./code.ts";
+import { markdownBlock } from "./markdown.ts";
+import { itemId, itemInfo, NOTEABLE, parentKeyOf, WHOLE_ONLY } from "./notes.ts";
+import type { Block, Ctx, Target, Tip } from "./types.ts";
+import { blank, boxed, cell, fromRows, hstack, padRow, shiftTargets, textCells, vstack, wrapRuns, wrapText } from "./util.ts";
+
+const ROW_GAP: Record<string, number> = { none: 0, xs: 0, s: 0, m: 1, l: 1, xl: 2 };
+const COL_GAP: Record<string, number> = { none: 0, xs: 1, s: 1, m: 2, l: 3, xl: 4 };
+
+/** width an element wants when it sits in a row, or null when it should share the space */
+export function natural(el: El): number | null {
+	const p = el.props;
+	switch (el.type) {
+		case "Button":
+			return textWidth(String(p.label ?? "")) + 4;
+		case "Metric":
+			return Math.max(16, textWidth(String(p.label ?? "")) + 4, textWidth(String(p.value ?? "")) + 4, textWidth(String(p.delta ?? "")) + 4);
+		case "Text":
+			return Math.min(60, textWidth(String(p.text ?? "")));
+		default:
+			return null;
+	}
+}
+
+export function stack(el: El, width: number, ctx: Ctx, path: string): Block {
+	const kids: El[] = el.props.children ?? [];
+	const dir = el.props.direction ?? "column";
+	const gapTok = el.props.gap ?? "m";
+	if (dir === "column") {
+		const blocks = kids.map((k, i) => ctx.render(k, width, `${path}.${i}`));
+		return vstack(blocks, ROW_GAP[gapTok] ?? 1, width);
+	}
+	const gap = COL_GAP[gapTok] ?? 2;
+	const nat = kids.map(natural);
+	const lines: number[][] = [];
+	if (el.props.wrap) {
+		let cur: number[] = [];
+		let used = 0;
+		const share = Math.max(14, Math.floor((width - 2 * gap) / 3));
+		kids.forEach((_, i) => {
+			const w = Math.min(width, nat[i] ?? share);
+			if (cur.length && used + gap + w > width) {
+				lines.push(cur);
+				cur = [];
+				used = 0;
+			}
+			used += (cur.length ? gap : 0) + w;
+			cur.push(i);
+		});
+		if (cur.length) lines.push(cur);
+	} else lines.push(kids.map((_, i) => i));
+	const rendered = lines.map((idxs) => {
+		const n = idxs.length;
+		const fixed = idxs.reduce((a, i) => a + (nat[i] ?? 0), 0);
+		const flex = idxs.filter((i) => nat[i] === null);
+		const room = width - gap * (n - 1) - fixed;
+		const flexW = flex.length ? Math.max(8, Math.floor(room / flex.length)) : 0;
+		let widths = idxs.map((i) => nat[i] ?? flexW);
+		let total = widths.reduce((a, b) => a + b, 0) + gap * (n - 1);
+		while (total > width && Math.max(...widths) > 6) {
+			const k = widths.indexOf(Math.max(...widths));
+			widths[k]--;
+			total--;
+		}
+		widths = widths.map((w) => Math.max(1, w));
+		const blocks = idxs.map((i, k) => ctx.render(kids[i], widths[k], `${path}.${i}`));
+		return hstack(blocks, gap);
+	});
+	const out = vstack(rendered, 0, width);
+	return { ...out, rows: out.rows.map((r) => padRow(r, width)) };
+}
+
+export function text(el: El, width: number): Block {
+	const v = String(el.props.text ?? "");
+	const role = { title: "text.title", heading: "text.heading", muted: "text.muted", code: "text.code" }[el.props.variant as string] ?? "";
+	return fromRows(width, wrapText(v, width, role));
+}
+
+export function card(el: El, width: number, ctx: Ctx, path: string): Block {
+	const inner = stack({ type: "Stack", props: { children: el.props.children ?? [], gap: "m" }, line: el.line }, Math.max(4, width - 4), ctx, path);
+	return boxed(inner, { role: "card", title: el.props.title, titleRole: "card.title" });
+}
+
+const CALLOUT_ICON: Record<string, string> = { info: "◉", success: "✓", warn: "⚠", error: "✗" };
+export function callout(el: El, width: number): Block {
+	const tone = el.props.tone ?? "info";
+	const inner = fromRows(
+		Math.max(4, width - 6),
+		wrapText(String(el.props.text ?? ""), Math.max(4, width - 6), ""),
+	);
+	const body = fromRows(inner.w + 2, inner.rows.map((r, i) => [i === 0 ? cell(CALLOUT_ICON[tone], `callout.${tone}`) : cell(" "), cell(" "), ...r]));
+	return boxed(body, { role: `callout.${tone}` });
+}
+
+export function metric(el: El, width: number, path: string): { block: Block; anchors: Map<string, { rect: Rect; targetId?: string }> } {
+	const p = el.props;
+	const w = Math.max(10, width);
+	const rows = [textCells(truncateText(String(p.label), w - 4), "metric.label"), textCells(truncateText(String(p.value), w - 4), "metric.value")];
+	if (p.delta) rows.push(textCells(truncateText(String(p.delta), w - 4), `metric.${p.tone ?? "neutral"}`));
+	const block = boxed(fromRows(w - 4, rows), { role: "tile" });
+	void path;
+	return { block, anchors: new Map([[String(p.label), { rect: { x: 0, y: 0, w: block.w, h: block.rows.length } }]]) };
+}
+
+export function button(el: El, width: number, path: string): Block {
+	const p = el.props;
+	const label = String(p.label ?? "");
+	const steps: Array<{ name: string; args: any[] }> = p.action?.steps ?? [];
+	const say = steps.find((s) => s.name === "ToAssistant");
+	const url = steps.find((s) => s.name === "OpenUrl");
+	const send = say ? String(say.args[0]) : url ? undefined : label;
+	const shown = truncateText(label, Math.max(1, width - 4));
+	const cells = [cell("[", "btn"), cell(" ", "btn"), ...textCells(shown, "btn"), cell(" ", "btn"), cell("]", "btn")];
+	const t: Target = { id: `btn:${path}`, kind: "button", rect: { x: 0, y: 0, w: cells.length, h: 1 }, label, send, openUrl: url ? String(url.args[0]) : undefined };
+	return fromRows(Math.max(cells.length, 1), [cells], [t]);
+}
+
+export function choice(el: El, width: number, ctx: Ctx, path: string): Block {
+	const p = el.props;
+	const q = String(p.question ?? "");
+	const opts: string[] = p.options ?? [];
+	const picked = ctx.state.picked[path];
+	const head = wrapRuns([{ t: q, role: "choice.q" }], width);
+	const hint = p.hint ? wrapText(String(p.hint), width, "text.muted") : [];
+	const targets: Target[] = [];
+	const lines: Array<ReturnType<typeof textCells>> = [];
+	const optCells = opts.map((o, i) => {
+		const on = picked === o;
+		return { i, cells: [cell(on ? "●" : "○", on ? "choice.picked" : "choice"), cell(" "), ...textCells(truncateText(o, Math.max(4, width - 3)), on ? "choice.picked" : "choice")] };
+	});
+	const total = optCells.reduce((a, o, k) => a + o.cells.length + (k ? 3 : 0), 0);
+	const baseY = head.length + hint.length;
+	if (total <= width) {
+		let line: typeof lines[number] = [];
+		optCells.forEach((o, k) => {
+			if (k) line.push(cell(" "), cell(" "), cell(" "));
+			targets.push({ id: `choice:${path}:${o.i}`, kind: "choice", rect: { x: line.length, y: baseY, w: o.cells.length, h: 1 }, label: opts[o.i], send: `${q} — ${opts[o.i]}` });
+			line.push(...o.cells);
+		});
+		lines.push(line);
+	} else {
+		optCells.forEach((o, k) => {
+			targets.push({ id: `choice:${path}:${o.i}`, kind: "choice", rect: { x: 0, y: baseY + k, w: o.cells.length, h: 1 }, label: opts[o.i], send: `${q} — ${opts[o.i]}` });
+			lines.push(o.cells);
+		});
+	}
+	return fromRows(width, [...head, ...hint, ...lines], targets);
+}
+
+export function tabs(el: El, width: number, ctx: Ctx, path: string): Block {
+	const items: El[] = el.props.items ?? [];
+	if (!items.length) return blank(width, 0);
+	const sel = Math.min(Math.max(0, ctx.state.tab[path] ?? 0), items.length - 1);
+	let labels = items.map((it) => truncateText(String(it.props.label ?? ""), 22));
+	const need = () => labels.reduce((a, l) => a + textWidth(l) + 4, 0);
+	let cap = 22;
+	while (need() > width && cap > 4) labels = items.map((it) => truncateText(String(it.props.label ?? ""), --cap));
+	const l0: ReturnType<typeof textCells> = [];
+	const l1: typeof l0 = [];
+	const l2: typeof l0 = [];
+	const targets: Target[] = [];
+	labels.forEach((lab, i) => {
+		const iw = textWidth(lab) + 2;
+		const on = i === sel;
+		const role = on ? "tab.on" : "tab.off";
+		const x0 = l1.length;
+		if (on) {
+			l0.push(cell("╭", role), ...Array.from({ length: iw }, () => cell("─", role)), cell("╮", role));
+			l1.push(cell("│", role), cell(" ", role), ...textCells(lab, "tab.label"), cell(" ", role), cell("│", role));
+			l2.push(cell("╯", role), ...Array.from({ length: iw }, () => cell(" ")), cell("╰", role));
+		} else {
+			l0.push(...Array.from({ length: iw + 2 }, () => cell(" ")));
+			l1.push(cell(" "), cell(" "), ...textCells(lab, role), cell(" "), cell(" "));
+			l2.push(...Array.from({ length: iw + 2 }, () => cell("─", "tab.rule")));
+		}
+		targets.push({ id: `tab:${path}:${i}`, kind: "tab", rect: { x: x0, y: 1, w: iw + 2, h: 1 }, label: String(items[i].props.label ?? "") });
+	});
+	while (l2.length < width) l2.push(cell("─", "tab.rule"));
+	const strip = fromRows(width, [l0, l1, l2], targets);
+	ctx.tabs.push(String(items[sel].props.label ?? ""));
+	let content: Block;
+	try {
+		content = stack({ type: "Stack", props: { children: items[sel].props.content ?? [], gap: "m" }, line: el.line }, width, ctx, `${path}.t${sel}`);
+	} finally {
+		ctx.tabs.pop();
+	}
+	return vstack([strip, vstack([blank(width, 0), content], 0, width)], 0, width);
+}
+
+export function faq(el: El, width: number, ctx: Ctx, path: string): Block {
+	const items: El[] = el.props.items ?? [];
+	const out: Block[] = [];
+	items.forEach((it, i) => {
+		const id = `faq:${path}:${i}`;
+		if (ctx.state.faq[id] === undefined) ctx.state.faq[id] = !!el.props.firstOpen && i === 0;
+		const open = ctx.state.faq[id];
+		const qRows = wrapRuns([{ t: String(it.props.question ?? ""), role: "faq.q" }], width - 2);
+		const head = fromRows(
+			width,
+			qRows.map((r, k) => [cell(k === 0 ? (open ? "▾" : "▸") : " ", "faq.mark"), cell(" "), ...r]),
+			[{ id, kind: "faq", rect: { x: 0, y: 0, w: width, h: qRows.length }, label: String(it.props.question ?? "") }],
+		);
+		if (!open) {
+			out.push(head);
+			return;
+		}
+		const ans = markdownBlock(String(it.props.answer ?? ""), Math.max(4, width - 2), ctx, `${path}.a${i}`);
+		// the answer sits two columns in; its targets (a picture) move with it
+		const body = fromRows(width, ans.rows.map((r) => [cell(" "), cell(" "), ...r]), shiftTargets(ans.targets, 2, 0));
+		out.push(vstack([head, body], 0, width));
+	});
+	return vstack(out, 0, width);
+}
+
+export function image(el: El, width: number, path: string, ctx: Ctx): { block: Block; anchors: Map<string, Anchor> } {
+	const p = el.props;
+	const src = String(p.src ?? "");
+	const svc = ctx.services.images;
+	const name = src.startsWith("data:") ? "inline image" : src.split(/[\\/]/).pop() || src;
+	const alt = String(p.alt ?? name);
+	const placed = svc?.place(src, Math.min(Math.max(8, width - 2), 64), 22) ?? null;
+	let block: Block;
+	if (placed) {
+		// the picture is drawn over these cells by the host; here they are reserved, framed and clickable
+		const area = blank(placed.cols, placed.rows);
+		area.targets.push({ id: `image:${path}`, kind: "image", rect: { x: 0, y: 0, w: placed.cols, h: placed.rows }, label: `${alt}`, image: { key: placed.key, cols: placed.cols, rows: placed.rows } });
+		const cap = p.caption ? fromRows(placed.cols, wrapText(String(p.caption), placed.cols, "text.muted")) : null;
+		block = boxed(cap ? vstack([area, cap], 0, placed.cols) : area, { role: "image.border", title: alt, titleRole: "image.alt", padX: 0 });
+	} else {
+		const facts = svc ? svc.describe(src) : name;
+		const lines = [textCells(`▒ ${alt}`, "image.alt"), textCells(truncateText(facts, Math.max(4, width - 6)), "text.muted")];
+		if (p.caption) lines.push(textCells(truncateText(String(p.caption), Math.max(4, width - 6)), "text.muted"));
+		block = boxed(fromRows(Math.max(8, Math.min(width - 4, Math.max(...lines.map((l) => l.length)) + 1)), lines), { role: "image.border", dashed: true });
+		block.targets.push({ id: `image:${path}`, kind: "image", rect: { x: 0, y: 0, w: block.w, h: block.rows.length }, label: alt });
+	}
+	const frame = { x: 0, y: 0, w: block.w, h: block.rows.length };
+	const self = block.targets.find((t) => t.kind === "image");
+	return { block, anchors: new Map([["image", { rect: frame, targetId: self?.id }]]) };
+}
+
+// ---------- tooltips ----------
+
+export interface Anchor {
+	rect: Rect;
+	targetId?: string;
+	/** where the tooltip badge goes, when the default (end of the first row of `rect`) would be wrong */
+	badge?: [number, number];
+	/** draw the badge even over a cell that is not empty (a point on a braille curve) */
+	badgeForce?: boolean;
+	/** cells besides `rect` that belong to the element (a pie wedge) */
+	cells?: Array<[number, number]>;
+}
+
+/** The mark that says "this element has a tooltip". Present in the user's font (JetBrains Mono), unlike the circled i. */
+export const BADGE = "◆";
+
+const isBlank = (c: { ch: string; role: string } | undefined) => !!c && c.ch === " " && c.role === "";
+const isDash = (c: { ch: string; role: string } | undefined) => !!c && (c.ch === "─" || c.ch === "╌") && /^(box|zone|card|tile|image|code|seq\.head|tip)/.test(c.role);
+
+/**
+ * Put the badge where a reader looks first: on the top border of a box (just before the corner), or right after
+ * the last character of a one-line element. Returns false when there is no free cell, in which case the element is
+ * still hoverable and the hint line under the widget still announces that tooltips exist.
+ */
+export function placeBadge(block: Block, a: Anchor, tone: string): boolean {
+	const put = (x: number, y: number) => {
+		const row = block.rows[y];
+		if (!row || x < 0 || x >= row.length) return false;
+		row[x] = cell(BADGE, `note.${tone}`);
+		return true;
+	};
+	if (a.badge) {
+		const c = block.rows[a.badge[1]]?.[a.badge[0]];
+		if (a.badgeForce || isBlank(c) || isDash(c)) return put(a.badge[0], a.badge[1]);
+	}
+	const r = a.rect;
+	const row = block.rows[r.y];
+	if (!row) return false;
+	let xe = Math.min(block.w, r.x + r.w) - 1;
+	while (xe >= r.x && isBlank(row[xe])) xe--;
+	if (xe < r.x) return r.w > 0 && put(r.x, r.y);
+	if (/[╮┐]/.test(row[xe].ch) && isDash(row[xe - 1])) return put(xe - 1, r.y);
+	if (xe + 1 < block.w && isBlank(row[xe + 1])) return put(xe + 1, r.y);
+	if (r.x - 1 >= 0 && isBlank(row[r.x - 1])) return put(r.x - 1, r.y);
+	return false;
+}
+
+export function tipPanel(label: string, tip: Tip, width: number): Block {
+	const iw = Math.max(8, width - 4);
+	const parts: Block[] = [];
+	if (tip.hint) parts.push(fromRows(iw, wrapText(tip.hint, iw, "tip.hint")));
+	if (tip.detail) parts.push(markdownBlock(tip.detail, iw));
+	if (tip.code) parts.push(codeInner(tip.code, tip.language, iw));
+	if (tip.link) parts.push(fromRows(iw, [textCells(truncateText(`↗ ${tip.linkLabel ?? tip.link}${tip.linkLabel ? ` — ${tip.link}` : ""}`, iw), "md.link")]));
+	const inner = vstack(parts.length ? parts : [fromRows(iw, [textCells(label, "tip.hint")])], 1, iw);
+	return boxed(inner, { role: `tip.${tip.tone ?? "info"}`, title: label });
+}
+
+/** The parts of a component a note can point at: one item per anchor (a row, a node, a point, a slice ...). */
+export function registerItems(el: El, block: Block, anchors: Map<string, Anchor>, path: string, ctx: Ctx): void {
+	if (!NOTEABLE.has(el.type) || WHOLE_ONLY.has(el.type)) return;
+	for (const [key, a] of anchors) {
+		const r = a.rect;
+		if (!key || r.w <= 0 || r.h <= 0 || r.x + r.w <= 0 || r.x >= block.w) continue;
+		const info = itemInfo(el, key, path, ctx.tabs, parentKeyOf(el.type, key));
+		block.targets.push({ id: itemId(path, key), kind: "item", rect: { ...r }, label: info.short, item: info, ...(a.cells ? { cells: a.cells } : {}) });
+	}
+}
+
+/** One item for the whole component, so there is always something to attach a note to. */
+export function addWholeItem(el: El, block: Block, path: string, ctx: Ctx): void {
+	if (!NOTEABLE.has(el.type) || !block.rows.length) return;
+	const info = itemInfo(el, "", path, ctx.tabs);
+	block.targets.push({ id: itemId(path, ""), kind: "item", rect: { x: 0, y: 0, w: block.w, h: block.rows.length }, label: info.short || el.type, item: info });
+}
+
+export function withTips(el: El, block: Block, anchors: Map<string, Anchor>, path: string, ctx: Ctx, avail = block.w): Block {
+	registerItems(el, block, anchors, path, ctx);
+	const tips: El[] = el.props.tooltips ?? [];
+	if (!tips.length) return block;
+	let panel: Block | null = null;
+	for (const t of tips) {
+		const key = String(t.props.target ?? "");
+		const a = anchors.get(key);
+		if (!a) {
+			ctx.warnings.push(`${el.type}: tooltip target "${key}" does not match anything in the component`);
+			continue;
+		}
+		const tip: Tip = { hint: t.props.hint, detail: t.props.detail, code: t.props.code, language: t.props.language, tone: t.props.tone, link: t.props.link, linkLabel: t.props.linkLabel };
+		const existing = a.targetId ? block.targets.find((x) => x.id === a.targetId) : undefined;
+		const id = existing ? existing.id : `tip:${path}:${key}`;
+		if (existing) existing.tip = tip;
+		else block.targets.push({ id, kind: "tip", rect: a.rect, label: key, tip, ...(a.cells ? { cells: a.cells } : {}) });
+		placeBadge(block, a, tip.tone ?? "info");
+		if (ctx.state.tip === id && (tip.detail || tip.code || tip.link)) panel = tipPanel(key, tip, Math.min(Math.max(avail, 20), Math.max(block.w, 44)));
+	}
+	return panel ? vstack([block, panel], 0, Math.max(block.w, panel.w)) : block;
+}
+
+export const shift = shiftTargets;

package/src/blocks/diagrams.ts

@@ -0,0 +1,142 @@
+// Adapters: DiagramResult (Dag, Erd, InfraMap) and wide blocks -> Block with targets and tooltip anchors.
+import { textWidth, type Cell } from "../diagram/canvas.ts";
+import { dag } from "../diagram/dag.ts";
+import { erd } from "../diagram/erd.ts";
+import { infra } from "../diagram/infra.ts";
+import type { DiagramResult } from "../diagram/layeredDiagram.ts";
+import type { El } from "../lang/library.ts";
+import type { Anchor } from "./core.ts";
+import type { Block, Ctx, Target } from "./types.ts";
+import { cell, fromRows, padRow, textCells, vstack } from "./util.ts";
+
+/** Crop a block wider than `width` to a window starting at the saved pan offset. */
+export function panBlock(inner: Block, width: number, key: string, ctx: Ctx): Block {
+	if (inner.w <= width) return inner;
+	const maxPan = inner.w - width;
+	const pan = Math.min(maxPan, Math.max(0, ctx.state.pan[key] ?? 0));
+	ctx.state.pan[key] = pan;
+	const rows = inner.rows.map((r) => {
+		const seg = padRow(r, inner.w).slice(pan, pan + width);
+		if (seg.length && seg[0].ch === "") seg[0] = cell(" ");
+		if (seg.length && pan + width < inner.w && seg[seg.length - 1].ch !== "" && r[pan + width]?.ch === "") seg[seg.length - 1] = cell(" ");
+		return seg;
+	});
+	const targets: Target[] = inner.targets.map((t) => ({ ...t, rect: { ...t.rect, x: t.rect.x - pan }, pan: { key, x: t.rect.x, w: t.rect.w, view: width, total: inner.w } }));
+	const hint = textCells(`${pan > 0 ? "‹" : " "} columns ${pan + 1}–${pan + width} of ${inner.w} ${pan < maxPan ? "›" : " "}  select a node to pan`, "text.muted");
+	return { w: width, rows: [...rows, padRow(hint, width)], targets };
+}
+
+/**
+ * A diagram's layout depends only on the component and the width, but the widget lays out again for a note, a tab, a resize
+ * or a late picture. Routing wires is the costly part, so each result is kept with its component (and dropped with it). Nothing
+ * downstream changes a result: resultBlock copies the cells.
+ */
+const layouts = new WeakMap<El, Map<number, DiagramResult>>();
+function layoutOnce(el: El, width: number, make: () => DiagramResult): DiagramResult {
+	let byWidth = layouts.get(el);
+	if (!byWidth) layouts.set(el, (byWidth = new Map()));
+	let res = byWidth.get(width);
+	if (!res) {
+		res = make();
+		byWidth.set(width, res);
+		if (byWidth.size > 4) byWidth.delete(byWidth.keys().next().value as number); // a window being dragged tries many widths
+	}
+	return res;
+}
+
+function resultBlock(res: DiagramResult, title: string | undefined, path: string, extra?: (res: DiagramResult) => Cell[][]): Block {
+	const w = Math.max(res.width, 1);
+	const rows: Cell[][] = res.rows.map((r) => r.slice()); // the cells are shared and frozen
+	const targets: Target[] = res.nodes.map((n) => ({
+		id: `node:${path}:${n.id}`,
+		kind: "node",
+		rect: { ...n.rect },
+		label: n.label + (n.status ? `  ${n.status}` : ""),
+	}));
+	const body = fromRows(w, rows, targets);
+	const top: Block[] = title ? [fromRows(w, [textCells(title, "chart.title")])] : [];
+	const tail: Cell[][] = [];
+	if (res.legend.length) {
+		const parts: Cell[] = [];
+		res.legend.forEach((e, i) => {
+			if (i) parts.push(cell(" "), cell(" "));
+			parts.push(...textCells(e.glyph, e.role), cell(" "), ...textCells(e.text, "legend"));
+		});
+		tail.push([], parts);
+	}
+	for (const f of res.footnotes) tail.push(textCells(f, "legend"));
+	for (const wn of res.warnings) tail.push(textCells(`! ${wn}`, "text.warn"));
+	if (extra) tail.push(...extra(res));
+	const out = vstack([...top, body, ...(tail.length ? [fromRows(w, tail)] : [])], 0, w);
+	const off = top.length;
+	void off;
+	return out;
+}
+
+function offsetAnchors(m: Map<string, Anchor>, dy: number) {
+	for (const [, a] of m) a.rect = { ...a.rect, y: a.rect.y + dy };
+}
+
+export function dagBlock(el: El, width: number, path: string, ctx: Ctx): { block: Block; anchors: Map<string, Anchor> } {
+	const p = el.props;
+	const res = layoutOnce(el, width, () => dag((p.nodes ?? []).map((n: El) => ({ id: n.props.id, label: n.props.label, status: n.props.status })), p.edges ?? [], { direction: p.direction ?? null, maxWidth: width }));
+	const inner = resultBlock(res, p.title, path);
+	const anchors = new Map<string, Anchor>();
+	const dy = p.title ? 1 : 0;
+	for (const n of res.nodes) anchors.set(n.id, { rect: { ...n.rect, y: n.rect.y + dy }, targetId: `node:${path}:${n.id}` });
+	const block = panBlock(inner, width, `pan:${path}`, ctx);
+	remapAnchors(anchors, inner, block);
+	return { block, anchors };
+}
+
+export function erdBlock(el: El, width: number, path: string, ctx: Ctx): { block: Block; anchors: Map<string, Anchor> } {
+	const p = el.props;
+	const res = layoutOnce(el, width, () => erd((p.entities ?? []).map((e: El) => ({ name: e.props.name, fields: e.props.fields })), (p.relations ?? []).map((r: El) => ({ from: r.props.from, to: r.props.to, kind: r.props.kind, label: r.props.label })), { maxWidth: width }));
+	const inner = resultBlock(res, p.title, path);
+	const anchors = new Map<string, Anchor>();
+	const dy = p.title ? 1 : 0;
+	for (const ent of (p.entities ?? []) as El[]) {
+		const node = res.nodes.find((n) => n.id === ent.props.name);
+		if (!node) continue;
+		anchors.set(String(ent.props.name), { rect: { ...node.rect, y: node.rect.y + dy }, targetId: `node:${path}:${node.id}` });
+		((ent.props.fields ?? []) as string[]).forEach((f, i) => {
+			const col = String(f).trim().split(/\s+/)[0];
+			if (col) anchors.set(`${ent.props.name}.${col}`, { rect: { x: node.rect.x + 1, y: node.rect.y + dy + 3 + i, w: Math.max(1, node.rect.w - 2), h: 1 }, badge: [node.rect.x + node.rect.w - 2, node.rect.y + dy + 3 + i] });
+		});
+	}
+	const block = panBlock(inner, width, `pan:${path}`, ctx);
+	remapAnchors(anchors, inner, block);
+	return { block, anchors };
+}
+
+export function infraBlock(el: El, width: number, path: string, ctx: Ctx): { block: Block; anchors: Map<string, Anchor> } {
+	const p = el.props;
+	const zones = (p.zones ?? []).map((z: El) => ({ name: z.props.name, tone: z.props.tone, nodes: (z.props.nodes ?? []).map((n: El) => ({ id: n.props.id, label: n.props.label, kind: n.props.kind, status: n.props.status, detail: n.props.detail })) }));
+	const links = (p.links ?? []).map((l: El) => ({ from: l.props.from, to: l.props.to, label: l.props.label, style: l.props.style }));
+	const res = layoutOnce(el, width, () => infra(zones, links, { direction: p.direction ?? null, maxWidth: width }));
+	const inner = resultBlock(res, p.title, path);
+	const anchors = new Map<string, Anchor>();
+	const dy = p.title ? 1 : 0;
+	for (const n of res.nodes) anchors.set(n.id, { rect: { ...n.rect, y: n.rect.y + dy }, targetId: `node:${path}:${n.id}` });
+	for (const z of res.zones ?? []) anchors.set(`zone:${z.name}`, { rect: { x: z.rect.x, y: z.rect.y + dy, w: z.rect.w, h: 1 } });
+	for (const e of res.edges) {
+		const c = e.labelCells[0] ?? e.cells[Math.floor(e.cells.length / 2)];
+		if (c) anchors.set(`${e.from}>${e.to}`, { rect: { x: Math.max(0, c[0] - 1), y: c[1] + dy, w: Math.max(3, e.labelCells.length + 2), h: 1 } });
+	}
+	const block = panBlock(inner, width, `pan:${path}`, ctx);
+	remapAnchors(anchors, inner, block);
+	return { block, anchors };
+}
+
+/** after panning, anchors must follow the targets they point at */
+function remapAnchors(anchors: Map<string, Anchor>, inner: Block, panned: Block) {
+	if (panned === inner) return;
+	const pan = panned.targets[0]?.pan;
+	const dx = pan ? pan.x - panned.targets[0].rect.x : 0;
+	for (const [, a] of anchors) {
+		a.rect = { ...a.rect, x: a.rect.x - dx };
+		if (a.badge) a.badge = [a.badge[0] - dx, a.badge[1]];
+	}
+}
+
+export { offsetAnchors, textWidth };