@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/diagram/schema.js

@@ -0,0 +1,621 @@
+/**
+ * Diagram block — params schema, validation and layout (mos-d70v4).
+ *
+ * Pure functions only (no DOM, no canvas): box sizing comes from a
+ * deterministic char-count estimate so SSR and the client agree without a
+ * measurement pass, and colors NEVER appear here — the renderer maps tones
+ * to theme-token classes. dagre is NOT imported at module level: the
+ * renderer resolves it (resolveDagre) and passes the engine in, so this
+ * file stays testable without the dependency and the build doesn't hard-
+ * wire a transitive package. The layered fallback (layoutLayered) keeps
+ * publishing alive even if dagre is unavailable.
+ *
+ * Untrusted-input rules (CONTRACT.md): text params are length-capped
+ * strings, arrays are capped (50 nodes / 80 edges), ids are validated.
+ */
+import { z } from "zod";
+import { toneSchema } from "../../params";
+import { MAX_EDGES, MAX_NODES, NODE_TEXT_MAX, EDGE_TEXT_MAX, DEFAULT_RANKSEP, DEFAULT_NODESEP, DEFAULT_EDGESEP, MIN_RANKSEP, MIN_NODESEP, NODE_PAD_X, NODE_PAD_Y, NODE_LINE_H, NODE_CHAR_W, SUB_CHAR_W, NODE_MAX_LINES, NODE_MIN_W, NODE_MAX_W, NODE_MIN_H, DIAMOND_TEXT_FACTOR, CIRCLE_MIN, SEQ_ACTOR_H, SEQ_ACTOR_PAD_X, SEQ_ACTOR_MIN_W, SEQ_ACTOR_MAX_W, SEQ_MSG_GAP_DEFAULT, SEQ_MSG_GAP_MIN, SEQ_ROW_PAD, SEQ_PAD_X, SEQ_COL_MIN, SEQ_LABEL_CHAR_W, SEQ_WIDTH_DEFAULT, SEQ_WIDTH_MIN, SEQ_WIDTH_MAX, EDGE_LABEL_W, EDGE_LABEL_H, VIEW_PAD, } from "./constants";
+// ── Schemas ───────────────────────────────────────────────────────────────
+/** ids accept the block-id charset; duplicates are rejected in the refine. */
+const diagramIdSchema = z
+    .string()
+    .min(1)
+    .max(64)
+    .regex(/^[a-zA-Z0-9][a-zA-Z0-9_.-]*$/);
+const nodeShapeValues = [
+    "rect",
+    "pill",
+    "diamond",
+    "circle",
+    "stadium",
+];
+const nodeKindValues = [
+    "default",
+    "input",
+    "output",
+    "decision",
+    "terminal",
+    "process",
+    "data",
+    "subroutine",
+    "external",
+    "note",
+];
+const diagramNodeSchema = z.object({
+    id: diagramIdSchema,
+    label: z.string().min(1).max(NODE_TEXT_MAX),
+    sublabel: z.string().max(NODE_TEXT_MAX).optional(),
+    kind: z.enum(nodeKindValues).optional(),
+    tone: toneSchema.optional(),
+    shape: z.enum(nodeShapeValues).optional(),
+});
+const diagramEdgeSchema = z.object({
+    from: diagramIdSchema,
+    to: diagramIdSchema,
+    label: z.string().max(EDGE_TEXT_MAX).optional(),
+    dashed: z.boolean().optional(),
+    tone: toneSchema.optional(),
+});
+export const diagramParamsSchema = z
+    .object({
+    mode: z.enum(["flow", "sequence"]).default("flow"),
+    title: z.string().max(200).optional(),
+    subtitle: z.string().max(300).optional(),
+    direction: z.enum(["LR", "RL", "TB", "BT"]).default("LR"),
+    nodes: z.array(diagramNodeSchema).min(1).max(MAX_NODES),
+    edges: z.array(diagramEdgeSchema).max(MAX_EDGES).default([]),
+    edgeLabels: z.boolean().default(true),
+    ranksep: z.number().min(MIN_RANKSEP).max(400).optional(),
+    nodesep: z.number().min(MIN_NODESEP).max(300).optional(),
+    edgesep: z.number().min(4).max(200).optional(),
+    sequenceWidth: z
+        .number()
+        .int()
+        .min(SEQ_WIDTH_MIN)
+        .max(SEQ_WIDTH_MAX)
+        .optional(),
+    msgGap: z.number().min(SEQ_MSG_GAP_MIN).max(200).optional(),
+})
+    .superRefine((p, ctx) => {
+    const ids = new Set();
+    for (const [i, n] of p.nodes.entries()) {
+        if (ids.has(n.id)) {
+            ctx.addIssue({
+                code: "custom",
+                message: `Duplicate node id "${n.id}" (node ${i})`,
+                path: ["nodes", i, "id"],
+            });
+        }
+        ids.add(n.id);
+    }
+    p.edges.forEach((e, i) => {
+        for (const key of ["from", "to"]) {
+            if (!ids.has(e[key])) {
+                ctx.addIssue({
+                    code: "custom",
+                    message: `Edge ${i} ${key} "${e[key]}" has no node`,
+                    path: ["edges", i, key],
+                });
+            }
+        }
+        if (e.from === e.to) {
+            ctx.addIssue({
+                code: "custom",
+                message: `Edge ${i} is a self-loop (from === to)`,
+                path: ["edges", i],
+            });
+        }
+        // flow only: duplicate (from,to) pairs render as one line — refuse
+        // them. In sequence mode repeated actor pairs are the NORM (each is a
+        // row), so the check is mode-gated.
+        if (p.mode === "flow") {
+            for (let j = 0; j < i; j++) {
+                const other = p.edges[j];
+                if (other.from === e.from && other.to === e.to) {
+                    ctx.addIssue({
+                        code: "custom",
+                        message: `Edge ${i} duplicates edge ${j} (${e.from} → ${e.to})`,
+                        path: ["edges", i],
+                    });
+                }
+            }
+        }
+    });
+    if (p.mode === "sequence") {
+        if (p.nodes.length < 2) {
+            ctx.addIssue({
+                code: "custom",
+                message: "Sequence needs at least 2 actors (nodes)",
+                path: ["nodes"],
+            });
+        }
+        const labels = new Set();
+        for (const [i, n] of p.nodes.entries()) {
+            if (labels.has(n.label)) {
+                ctx.addIssue({
+                    code: "custom",
+                    message: `Duplicate actor label "${n.label}" (node ${i})`,
+                    path: ["nodes", i, "label"],
+                });
+            }
+            labels.add(n.label);
+        }
+    }
+});
+/**
+ * Pull the dagre engine out of whatever the renderer imported. Handles both
+ * the ESM default export (`{ graphlib, layout }` — what @dagrejs/dagre
+ * actually ships) and a namespace import. Returns null when dagre isn't
+ * there — the caller falls back to the layered layout.
+ */
+export function resolveDagre(mod) {
+    const d = mod?.default ?? mod;
+    if (!d || typeof d !== "object")
+        return null;
+    const eng = d;
+    if (!eng.graphlib ||
+        typeof eng.graphlib.Graph !== "function" ||
+        typeof eng.layout !== "function")
+        return null;
+    return d;
+}
+// ── Deterministic text estimate (no canvas — SSR == client) ───────────────
+/** Char-count text width estimate. Deliberately NOT a canvas measure: the
+ * layout must be byte-identical between SSR and hydration. */
+export function textWidth(text, charW) {
+    return text.length * charW;
+}
+/** Greedy word wrap on the estimate. Long single words hard-split. */
+function wrapText(text, maxWidth, charW, maxLines) {
+    const words = text.split(/\s+/).filter(Boolean);
+    const lines = [];
+    let cur = "";
+    for (const w of words) {
+        const candidate = cur ? `${cur} ${w}` : w;
+        if (textWidth(candidate, charW) <= maxWidth || !cur) {
+            cur = candidate;
+        }
+        else {
+            lines.push(cur);
+            cur = w;
+            if (lines.length >= maxLines)
+                break;
+        }
+    }
+    if (cur && lines.length < maxLines)
+        lines.push(cur);
+    if (lines.length === maxLines && words.length > 0) {
+        // overflow: hard-truncate the last line
+        const rest = words.slice(lines.join(" ").split(" ").length).join(" ");
+        if (rest) {
+            let last = rest;
+            while (textWidth(last, charW) > maxWidth && last.length > 1)
+                last = last.slice(0, -1);
+            lines[maxLines - 1] = `${last}…`;
+        }
+    }
+    return lines.length ? lines : [text];
+}
+/** Default shape for a node kind (explicit `shape` wins). */
+export function kindShape(kind) {
+    switch (kind) {
+        case "decision":
+            return "diamond";
+        case "terminal":
+            return "stadium";
+        case "input":
+        case "output":
+            return "pill";
+        case "external":
+        case "note":
+            return "rect";
+        default:
+            return "rect";
+    }
+}
+/** Dashed border for note/external kinds unless the shape is a diamond. */
+export function kindDashed(kind) {
+    return kind === "note" || kind === "external";
+}
+/** Box size for a node from the deterministic estimate. */
+function nodeSizeFor(node) {
+    const shape = node.shape ?? kindShape(node.kind);
+    if (shape === "diamond") {
+        const lines = wrapText(node.label, NODE_MAX_W * DIAMOND_TEXT_FACTOR, NODE_CHAR_W, 2);
+        const widest = Math.max(...lines.map((l) => textWidth(l, NODE_CHAR_W)));
+        const w = Math.min(Math.max(widest / DIAMOND_TEXT_FACTOR + 32, 130), 340);
+        const h = Math.min(Math.max(lines.length * NODE_LINE_H * 2 + 26, 76), 180);
+        return { w, h };
+    }
+    if (shape === "circle") {
+        const lines = wrapText(node.label, 120, NODE_CHAR_W, 2);
+        const widest = Math.max(...lines.map((l) => textWidth(l, NODE_CHAR_W)));
+        const side = Math.min(Math.max(Math.max(widest, 16) + 40, CIRCLE_MIN), 170);
+        return { w: side, h: side };
+    }
+    const inner = NODE_MAX_W - NODE_PAD_X * 2;
+    const labelLines = wrapText(node.label, inner, NODE_CHAR_W, NODE_MAX_LINES);
+    const widestLabel = Math.max(...labelLines.map((l) => textWidth(l, NODE_CHAR_W)));
+    const subLines = node.sublabel
+        ? wrapText(node.sublabel, inner, SUB_CHAR_W, 2)
+        : [];
+    const widestSub = subLines.length
+        ? Math.max(...subLines.map((l) => textWidth(l, SUB_CHAR_W)))
+        : 0;
+    const w = Math.min(Math.max(Math.max(widestLabel, widestSub) + NODE_PAD_X * 2, NODE_MIN_W), NODE_MAX_W);
+    const h = Math.max(labelLines.length * NODE_LINE_H +
+        subLines.length * (NODE_LINE_H - 4) +
+        NODE_PAD_Y * 2 +
+        (subLines.length ? 4 : 0), NODE_MIN_H);
+    return { w, h };
+}
+/** Text lines the renderer paints for a node (same budgets as nodeSizeFor
+ * so the box always fits its text). */
+export function nodeTextLines(node, size) {
+    const shape = node.shape ?? kindShape(node.kind);
+    if (shape === "diamond")
+        return {
+            label: wrapText(node.label, size.w * DIAMOND_TEXT_FACTOR - 12, NODE_CHAR_W, 2),
+            sub: [],
+        };
+    if (shape === "circle")
+        return { label: wrapText(node.label, size.w - 26, NODE_CHAR_W, 2), sub: [] };
+    const inner = size.w - NODE_PAD_X * 2;
+    return {
+        label: wrapText(node.label, inner, NODE_CHAR_W, NODE_MAX_LINES),
+        sub: node.sublabel ? wrapText(node.sublabel, inner, SUB_CHAR_W, 2) : [],
+    };
+}
+// ── Flow layout (dagre, with layered fallback) ────────────────────────────
+function padLayout(boxes, edges) {
+    const minX = Math.min(VIEW_PAD, ...boxes.map((b) => b.x), ...edges.flatMap((e) => e.points.map((p) => p.x)));
+    const minY = Math.min(VIEW_PAD, ...boxes.map((b) => b.y), ...edges.flatMap((e) => e.points.map((p) => p.y)));
+    const dx = VIEW_PAD - minX;
+    const dy = VIEW_PAD - minY;
+    for (const b of boxes) {
+        b.x += dx;
+        b.y += dy;
+    }
+    for (const e of edges) {
+        for (const pt of e.points) {
+            pt.x += dx;
+            pt.y += dy;
+        }
+        if (e.labelPoint) {
+            e.labelPoint.x += dx;
+            e.labelPoint.y += dy;
+        }
+    }
+    const width = Math.max(VIEW_PAD, ...boxes.map((b) => b.x + b.w), ...edges.flatMap((e) => e.points.map((p) => p.x))) + VIEW_PAD;
+    const height = Math.max(VIEW_PAD, ...boxes.map((b) => b.y + b.h), ...edges.flatMap((e) => e.points.map((p) => p.y))) + VIEW_PAD;
+    return { boxes, edges, width, height, engine: "dagre" };
+}
+function layoutDagre(p, engine) {
+    const g = new engine.graphlib.Graph();
+    g.setGraph({
+        rankdir: p.direction,
+        ranksep: p.ranksep ?? DEFAULT_RANKSEP,
+        nodesep: p.nodesep ?? DEFAULT_NODESEP,
+        edgesep: p.edgesep ?? DEFAULT_EDGESEP,
+        marginx: 0,
+        marginy: 0,
+    });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const n of p.nodes) {
+        const { w, h } = nodeSizeFor(n);
+        g.setNode(n.id, { width: w, height: h });
+    }
+    for (const e of p.edges) {
+        g.setEdge(e.from, e.to, p.edgeLabels && e.label
+            ? {
+                label: e.label,
+                width: EDGE_LABEL_W,
+                height: EDGE_LABEL_H,
+                labelpos: "c",
+            }
+            : {});
+    }
+    engine.layout(g);
+    const byId = new Map();
+    for (const n of p.nodes) {
+        const meta = g.node(n.id);
+        if (!meta ||
+            typeof meta.x !== "number" ||
+            typeof meta.y !== "number" ||
+            !Number.isFinite(meta.x) ||
+            !Number.isFinite(meta.y))
+            throw new Error("dagre layout produced no position");
+        const size = nodeSizeFor(n);
+        byId.set(n.id, {
+            ...n,
+            x: meta.x - size.w / 2,
+            y: meta.y - size.h / 2,
+            w: size.w,
+            h: size.h,
+        });
+    }
+    const edges = [];
+    for (const e of p.edges) {
+        const meta = g.edge(e.from, e.to);
+        const points = meta?.points;
+        if (!points || points.length === 0)
+            throw new Error("no edge points");
+        let labelPoint = null;
+        if (p.edgeLabels && e.label && meta) {
+            if (typeof meta.x === "number" &&
+                typeof meta.y === "number" &&
+                Number.isFinite(meta.x) &&
+                Number.isFinite(meta.y))
+                labelPoint = { x: meta.x, y: meta.y };
+        }
+        edges.push({
+            from: e.from,
+            to: e.to,
+            label: e.label,
+            dashed: e.dashed,
+            tone: e.tone,
+            points,
+            labelPoint: labelPoint ?? midpoint(points),
+            labelW: EDGE_LABEL_W,
+            labelH: EDGE_LABEL_H,
+        });
+    }
+    const gr = g.graph();
+    const width = typeof gr.width === "number" ? gr.width : 0;
+    const height = typeof gr.height === "number" ? gr.height : 0;
+    if (width <= 0 || height <= 0)
+        throw new Error("dagre graph has no extent");
+    return padLayout([...byId.values()], edges);
+}
+/** Layered fallback: longest-path layering (cycle-safe) + insertion order
+ * within layers. Plain straight-edge routing. Pure, no dagre. */
+function layoutLayered(p) {
+    const vertical = p.direction === "TB" || p.direction === "BT";
+    const reverse = p.direction === "RL" || p.direction === "BT";
+    const rankSep = p.ranksep ?? DEFAULT_RANKSEP;
+    const nodeSep = p.nodesep ?? DEFAULT_NODESEP;
+    const sizes = new Map();
+    for (const n of p.nodes)
+        sizes.set(n.id, nodeSizeFor(n));
+    // longest-path layering (cycle-safe: Kahn first, leftovers in input order)
+    const layer = new Map();
+    const preds = new Map();
+    for (const n of p.nodes)
+        preds.set(n.id, []);
+    for (const e of p.edges)
+        preds.get(e.to)?.push(e.from);
+    const indeg = new Map();
+    for (const n of p.nodes)
+        indeg.set(n.id, (preds.get(n.id) ?? []).filter((f) => f !== n.id).length);
+    const queue = p.nodes
+        .filter((n) => (indeg.get(n.id) ?? 0) === 0)
+        .map((n) => n.id);
+    for (const id of queue)
+        layer.set(id, 0);
+    while (queue.length) {
+        const id = queue.shift();
+        for (const e of p.edges) {
+            if (e.from !== id)
+                continue;
+            const next = (layer.get(id) ?? 0) + 1;
+            if (!layer.has(e.to) || layer.get(e.to) < next) {
+                layer.set(e.to, next);
+                if ((indeg.get(e.to) ?? 0) > 0)
+                    indeg.set(e.to, indeg.get(e.to) - 1);
+                queue.push(e.to);
+            }
+        }
+    }
+    for (const n of p.nodes)
+        if (!layer.has(n.id)) {
+            const pl = (preds.get(n.id) ?? [])
+                .map((f) => layer.get(f))
+                .filter((v) => v !== undefined);
+            layer.set(n.id, pl.length ? Math.max(...pl) + 1 : 0);
+        }
+    const layers = new Map();
+    for (const n of p.nodes) {
+        const l = layer.get(n.id) ?? 0;
+        if (!layers.has(l))
+            layers.set(l, []);
+        layers.get(l)?.push(n.id);
+    }
+    const sorted = [...layers.keys()].sort((a, b) => a - b);
+    const boxes = [];
+    const byId = new Map();
+    let primary = VIEW_PAD;
+    for (const l of sorted) {
+        let secondary = VIEW_PAD;
+        let layerMax = 0;
+        for (const id of layers.get(l) ?? []) {
+            const n = p.nodes.find((nn) => nn.id === id);
+            if (!n)
+                continue;
+            const { w, h } = sizes.get(id);
+            const box = {
+                ...n,
+                x: vertical ? secondary : primary,
+                y: vertical ? primary : secondary,
+                w,
+                h,
+            };
+            boxes.push(box);
+            byId.set(id, box);
+            secondary += (vertical ? w : h) + nodeSep;
+            layerMax = Math.max(layerMax, vertical ? w : h);
+        }
+        primary += (vertical ? layerMax : 0) + rankSep + (vertical ? 0 : 44);
+    }
+    // horizontal mode: primary advances per layer by ranksep; recompute
+    if (!vertical) {
+        let x = VIEW_PAD;
+        for (const l of sorted) {
+            let maxW = 0;
+            for (const b of boxes) {
+                if ((layer.get(b.id) ?? 0) !== l)
+                    continue;
+                b.x = x;
+                maxW = Math.max(maxW, b.w);
+            }
+            x += maxW + rankSep;
+        }
+    }
+    if (reverse) {
+        const extent = Math.max(...boxes.map((b) => (vertical ? b.y + b.h : b.x + b.w)));
+        for (const b of boxes) {
+            if (vertical)
+                b.y = extent - b.y - b.h;
+            else
+                b.x = extent - b.x - b.w;
+        }
+    }
+    const edges = [];
+    for (const e of p.edges) {
+        const a = byId.get(e.from);
+        const b = byId.get(e.to);
+        if (!a || !b)
+            continue;
+        const points = borderPoints(a, b);
+        edges.push({
+            from: e.from,
+            to: e.to,
+            label: e.label,
+            dashed: e.dashed,
+            tone: e.tone,
+            points,
+            labelPoint: midpoint(points),
+            labelW: EDGE_LABEL_W,
+            labelH: EDGE_LABEL_H,
+        });
+    }
+    const width = Math.max(...boxes.map((b) => b.x + b.w)) + VIEW_PAD;
+    const height = Math.max(...boxes.map((b) => b.y + b.h)) + VIEW_PAD;
+    return { boxes, edges, width, height, engine: "layered" };
+}
+/** Border intersection points between two boxes (center → center clipped). */
+function borderPoints(a, b) {
+    const ac = { x: a.x + a.w / 2, y: a.y + a.h / 2 };
+    const bc = { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+    return [clipToBox(ac, bc, a), clipToBox(bc, ac, b)];
+}
+function clipToBox(from, toward, box) {
+    const dx = toward.x - from.x;
+    const dy = toward.y - from.y;
+    if (dx === 0 && dy === 0)
+        return { x: box.x + box.w / 2, y: box.y + box.h / 2 };
+    const scale = Math.min(dx !== 0
+        ? (dx > 0 ? box.x + box.w - from.x : box.x - from.x) / dx
+        : Infinity, dy !== 0
+        ? (dy > 0 ? box.y + box.h - from.y : box.y - from.y) / dy
+        : Infinity);
+    return { x: from.x + dx * scale, y: from.y + dy * scale };
+}
+function midpoint(points) {
+    if (!points.length)
+        return { x: 0, y: 0 };
+    const total = points
+        .slice(1)
+        .reduce((acc, p, i) => acc + Math.hypot(p.x - points[i].x, p.y - points[i].y), 0);
+    let acc = 0;
+    for (let i = 1; i < points.length; i++) {
+        const seg = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+        if (acc + seg >= total / 2 || i === points.length - 1) {
+            const t = seg === 0 ? 0 : (total / 2 - acc) / seg;
+            return {
+                x: points[i - 1].x + (points[i].x - points[i - 1].x) * t,
+                y: points[i - 1].y + (points[i].y - points[i - 1].y) * t,
+            };
+        }
+        acc += seg;
+    }
+    return points[Math.floor(points.length / 2)];
+}
+/** Flow layout: dagre when an engine resolves, layered otherwise. */
+export function layoutFlow(p, engine) {
+    if (engine) {
+        try {
+            return layoutDagre(p, engine);
+        }
+        catch {
+            // fall through to the layered fallback — a layout engine must
+            // never take the artifact page down.
+        }
+    }
+    return layoutLayered(p);
+}
+// ── Sequence layout ───────────────────────────────────────────────────────
+export function layoutSequence(p) {
+    const gap = p.msgGap ?? SEQ_MSG_GAP_DEFAULT;
+    const width = p.sequenceWidth ?? SEQ_WIDTH_DEFAULT;
+    const n = Math.max(2, p.nodes.length);
+    const inner = Math.max(width - SEQ_PAD_X * 2, SEQ_COL_MIN * n);
+    const colW = Math.max(inner / n, SEQ_COL_MIN);
+    const actors = p.nodes.map((n, i) => {
+        const w = Math.min(Math.max(textWidth(n.label, SEQ_LABEL_CHAR_W) + SEQ_ACTOR_PAD_X * 2, SEQ_ACTOR_MIN_W), Math.min(SEQ_ACTOR_MAX_W, colW - 12));
+        return {
+            id: n.id,
+            label: n.label,
+            tone: n.tone,
+            x: SEQ_PAD_X + colW * (i + 0.5),
+            w,
+        };
+    });
+    const byId = new Map(actors.map((a) => [a.id, a]));
+    const messages = [];
+    for (const [i, e] of p.edges.entries()) {
+        const a = byId.get(e.from);
+        const b = byId.get(e.to);
+        if (!a || !b)
+            continue;
+        messages.push({
+            from: e.from,
+            to: e.to,
+            label: e.label,
+            dashed: e.dashed,
+            tone: e.tone,
+            y: SEQ_ACTOR_H + SEQ_ROW_PAD + i * gap + gap / 2,
+            x1: a.x,
+            x2: b.x,
+        });
+    }
+    const height = SEQ_ACTOR_H +
+        SEQ_ROW_PAD * 2 +
+        p.edges.length * gap +
+        (messages.length === 0 ? 24 : 0);
+    return {
+        actors,
+        messages,
+        width: Math.max(width, SEQ_PAD_X * 2 + colW * n),
+        height,
+    };
+}
+/** Flat rows for the accessible data fallback (sr-only table). */
+export function diagramRows(params) {
+    const rows = [];
+    const labelOf = (id) => params.nodes.find((n) => n.id === id)?.label ?? id;
+    if (params.mode === "sequence") {
+        for (const n of params.nodes)
+            rows.push({ kind: "node", label: n.label, detail: "actor" });
+        for (const e of params.edges)
+            rows.push({
+                kind: "edge",
+                label: `${labelOf(e.from)} → ${labelOf(e.to)}`,
+                detail: e.label ?? (e.dashed ? "return message" : "message"),
+            });
+        return rows;
+    }
+    for (const n of params.nodes)
+        rows.push({
+            kind: "node",
+            label: n.label,
+            detail: [n.kind, n.tone].filter(Boolean).join(", ") || "node",
+        });
+    for (const e of params.edges)
+        rows.push({
+            kind: "edge",
+            label: `${labelOf(e.from)} → ${labelOf(e.to)}`,
+            detail: e.label ?? (e.dashed ? "dashed edge" : "edge"),
+        });
+    return rows;
+}

package/dist/artifact-blocks/blocks/diagram/thumb.d.ts

@@ -0,0 +1,2 @@
+import { type ThumbPalette } from "../../thumb-kit.js";
+export declare function drawDiagramThumb(raw: unknown, palette: ThumbPalette): string | null;