@joewinke/jatui 0.37.0 → 0.38.0

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

@@ -0,0 +1,148 @@
+/**
+ * Compare block — params schema + pure helpers (before/after slider).
+ *
+ * Pure functions only (no DOM) so `block.test.ts` can exercise them and
+ * `CompareBlock.svelte` stays a thin renderer. Untrusted input rules
+ * (CONTRACT.md): URLs go through the shared `urlSchema` (https:// or
+ * root-relative — never data:/javascript:/http://), every string is
+ * length-capped, media is by URL only (never base64).
+ */
+import { z } from "zod";
+import { shortTextSchema, urlSchema } from "../../params.js";
+const COMPARE_SIDES = ["a", "b"];
+/** Video extensions the renderer recognizes when `kind` is not given. */
+const VIDEO_EXTENSIONS = /\.(mp4|webm|mov|m4v|ogv)(\?|#|$)/i;
+/** Percent bounds the DIVIDER can be dragged to (start is tighter, 5-95). */
+const DIVIDER_MIN = 0;
+const DIVIDER_MAX = 100;
+/** Bounds for the authored `startPercent` — never open nearly-shut. */
+const START_MIN = 5;
+const START_MAX = 95;
+/** Divider keyboard step, in percent. */
+const ARROW_STEP = 4;
+const SHIFT_STEP = 12;
+const DEFAULT_LABELS = {
+    a: "Before",
+    b: "After",
+};
+const mediaSchema = z.object({
+    src: urlSchema,
+    /**
+     * Force the renderer kind; when omitted it is inferred from the src
+     * extension (mp4/webm/mov/m4v/ogv → video, else image).
+     */
+    kind: z.enum(["image", "video"]).optional(),
+    /** Chip over the media. Defaults to "Before" (a) / "After" (b). */
+    label: shortTextSchema.optional(),
+    /** Alt text for the media; defaults to the effective label. */
+    alt: shortTextSchema.optional(),
+});
+export const compareSchema = z
+    .object({
+    title: shortTextSchema.optional(),
+    /** First side — the one shown when the divider is fully left/top. */
+    a: mediaSchema,
+    /** Second side — revealed from the right/bottom of the divider. */
+    b: mediaSchema,
+    /** Divider start position, % from the left/top (5-95). */
+    startPercent: z.number().finite().min(START_MIN).max(START_MAX).default(50),
+    /**
+     * `vertical` (default): a vertical divider dragged left/right — the
+     * classic before/after wipe. `horizontal`: a horizontal divider dragged
+     * up/down, for top/bottom comparisons.
+     */
+    orientation: z.enum(["vertical", "horizontal"]).default("vertical"),
+    /**
+     * Stage height in px (160-800). The fallback stacks the two sides
+     * side-by-side at narrow widths using the same height budget.
+     */
+    height: z.number().int().min(160).max(800).default(420),
+    /**
+     * Optional interactive verdict: when set and the surface can save, the
+     * viewer picks A or B ({ pick: "a" | "b" } via ctx.saveState).
+     */
+    pick: z
+        .object({
+        question: z.string().min(1).max(500),
+    })
+        .optional(),
+    /** Phase-3 live data: key into ctx.data whose value replaces params. */
+    dataKey: z.string().max(80).optional(),
+})
+    .superRefine((v, ctx) => {
+    if (v.a.src === v.b.src)
+        ctx.addIssue({
+            code: "custom",
+            path: ["b"],
+            message: "a and b must be different media (same src twice)",
+        });
+});
+// ── Pure helpers ──────────────────────────────────────────────────────────
+/** The renderer kind for a side: explicit param wins, else the extension. */
+export function kindOf(media) {
+    if (media.kind)
+        return media.kind;
+    return VIDEO_EXTENSIONS.test(media.src) ? "video" : "image";
+}
+/** Effective chip label for a side: authored, else Before/After. */
+export function labelOf(media, side) {
+    return media.label ?? DEFAULT_LABELS[side];
+}
+/** Effective alt text: authored alt, else the chip label, else the side. */
+export function altOf(media, side) {
+    return media.alt ?? labelOf(media, side);
+}
+/** Clamp a divider position into [DIVIDER_MIN, DIVIDER_MAX]. */
+export function clampPercent(p) {
+    if (!Number.isFinite(p))
+        return 50;
+    return Math.min(DIVIDER_MAX, Math.max(DIVIDER_MIN, p));
+}
+/** Next divider position for a key press (undefined = key does nothing). */
+export function stepFor(key, orientation, shift, current) {
+    const step = shift ? SHIFT_STEP : ARROW_STEP;
+    const horizontal = orientation === "horizontal";
+    switch (key) {
+        case "ArrowRight":
+            return horizontal ? undefined : clampPercent(current + step);
+        case "ArrowLeft":
+            return horizontal ? undefined : clampPercent(current - step);
+        case "ArrowDown":
+            return horizontal ? clampPercent(current + step) : undefined;
+        case "ArrowUp":
+            return horizontal ? clampPercent(current - step) : undefined;
+        case "Home":
+            return DIVIDER_MIN;
+        case "End":
+            return DIVIDER_MAX;
+        default:
+            return undefined;
+    }
+}
+/** Accessible description of the divider position for aria-valuetext. */
+export function dividerValueText(percent, labels) {
+    const p = Math.round(clampPercent(percent));
+    return `Divider at ${p}% — ${labels.a} ${p}%, ${labels.b} ${100 - p}%`;
+}
+/**
+ * clip-path insets that reveal side B from the right (vertical divider) or
+ * the bottom (horizontal) while side A sits fully underneath. Both sides
+ * always render; the clip does the reveal.
+ */
+export function clipFor(percent, orientation) {
+    const p = clampPercent(percent);
+    return orientation === "vertical"
+        ? `inset(0 0 0 ${p}%)`
+        : `inset(${p}% 0 0 0)`;
+}
+/** Read untrusted saved state into a pick — junk in, null out. */
+export function parsePick(state) {
+    if (typeof state === "object" &&
+        state !== null &&
+        "pick" in state &&
+        (state.pick === "a" ||
+            state.pick === "b")) {
+        return state.pick;
+    }
+    return null;
+}

package/dist/artifact-blocks/blocks/diagram/DiagramBlock.svelte

@@ -0,0 +1,392 @@
+<script lang="ts">
+  /**
+   * DiagramBlock — SVG flow / org / architecture / sequence renderer
+   * (block type "diagram").
+   *
+   * Layout lives in ./schema.ts (pure, unit-tested): dagre positions the
+   * flow graph when the engine resolves (resolved here via resolveDagre and
+   * injected, so schema.ts never imports the transitive package), with a
+   * deterministic layered fallback. This file is the render layer: shapes,
+   * tone classes, edge arrows, and the accessible structure table.
+   *
+   * Token discipline: every color is a DaisyUI token class resolved through
+   * a STATIC map (dynamic `text-${tone}` patterns are forbidden — they break
+   * Tailwind extraction). Text is text; no {@html} anywhere.
+   */
+  import * as dagreNs from "@dagrejs/dagre"
+  import type { BlockProps } from "../../types.js"
+  import type { ToneToken } from "../../params"
+  import {
+    diagramParamsSchema,
+    resolveDagre,
+    layoutFlow,
+    layoutSequence,
+    kindShape,
+    kindDashed,
+    nodeTextLines,
+    diagramRows,
+    type DiagramParams,
+    type ToneToken as ToneTokenType,
+  } from "./schema.js"
+  import {
+    NODE_CHAR_W,
+    NODE_LINE_H,
+    NODE_PAD_X,
+    SEQ_ACTOR_H,
+    VIEW_PAD,
+  } from "./constants"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params: rawParams, ctx }: BlockProps<DiagramParams> = $props()
+
+  /** Params are parsed here, not assumed pre-parsed: the host validates at
+   * publish but stores what was sent. Corrupt params fall back to an empty
+   * render — a bad agent payload must never throw inside the artifact page. */
+  const EMPTY_PARAMS: DiagramParams = {
+    mode: "flow",
+    direction: "LR",
+    nodes: [],
+    edges: [],
+    edgeLabels: true,
+  }
+  const parsed = $derived(diagramParamsSchema.safeParse(rawParams))
+  const params = $derived(parsed.success ? parsed.data : EMPTY_PARAMS)
+
+  // ── Tone classes (STATIC maps — token-only theming, no dynamic classes) ──
+  const NODE_FILL: Record<ToneTokenType, string> = {
+    primary: "fill-primary/12",
+    secondary: "fill-secondary/12",
+    accent: "fill-accent/12",
+    neutral: "fill-base-200",
+    info: "fill-info/12",
+    success: "fill-success/15",
+    warning: "fill-warning/15",
+    error: "fill-error/12",
+  }
+  const NODE_STROKE: Record<ToneTokenType, string> = {
+    primary: "stroke-primary/60",
+    secondary: "stroke-secondary/60",
+    accent: "stroke-accent/60",
+    neutral: "stroke-base-content/30",
+    info: "stroke-info/60",
+    success: "stroke-success/60",
+    warning: "stroke-warning/70",
+    error: "stroke-error/60",
+  }
+  const EDGE_STROKE: Record<ToneTokenType, string> = {
+    primary: "stroke-primary/70",
+    secondary: "stroke-secondary/70",
+    accent: "stroke-accent/70",
+    neutral: "stroke-base-content/40",
+    info: "stroke-info/70",
+    success: "stroke-success/70",
+    warning: "stroke-warning/80",
+    error: "stroke-error/80",
+  }
+  const HEAD_FILL: Record<ToneTokenType, string> = {
+    primary: "fill-primary/80",
+    secondary: "fill-secondary/80",
+    accent: "fill-accent/80",
+    neutral: "fill-base-content/50",
+    info: "fill-info/80",
+    success: "fill-success/80",
+    warning: "fill-warning/90",
+    error: "fill-error/80",
+  }
+
+  const nodeTone = (t?: ToneToken): ToneTokenType => t ?? "neutral"
+  const nodeClasses = (n: { tone?: ToneToken }) =>
+    `${NODE_FILL[nodeTone(n.tone)]} ${NODE_STROKE[nodeTone(n.tone)]}`
+  const edgeStroke = (e: { tone?: ToneToken }) => EDGE_STROKE[nodeTone(e.tone)]
+  const edgeHead = (e: { tone?: ToneToken }) => HEAD_FILL[nodeTone(e.tone)]
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  const dagre = resolveDagre(dagreNs)
+  const isSeq = $derived(params.mode === "sequence")
+  const seq = $derived(isSeq ? layoutSequence(params) : null)
+  const flow = $derived(isSeq ? null : layoutFlow(params, dagre))
+
+  const W = $derived(Math.max(80, (seq ?? flow)?.width ?? 80))
+  const H = $derived(Math.max(60, (seq ?? flow)?.height ?? 60))
+
+  const ariaLabel = $derived.by(() => {
+    if (isSeq)
+      return `sequence diagram${params.title ? `: ${params.title}` : ""}. Actors: ${params.nodes.map((n) => n.label).join(", ")}. ${params.edges.length} messages.`
+    return `diagram${params.title ? `: ${params.title}` : ""}. ${params.nodes.length} nodes, ${params.edges.length} edges.`
+  })
+
+  // ── Path helpers ──────────────────────────────────────────────────────────
+  const r1 = (n: number) => Math.round(n * 10) / 10
+  function polylineD(points: { x: number; y: number }[]): string {
+    if (!points.length) return ""
+    return points
+      .map((p, i) => `${i ? "L" : "M"} ${r1(p.x)} ${r1(p.y)}`)
+      .join(" ")
+  }
+  /** Arrowhead triangle at the end of a polyline (oriented along the last
+   * segment). Returned as an SVG polygon points string. */
+  function headPoints(points: { x: number; y: number }[]): string {
+    const n = points.length
+    if (n < 2) return ""
+    const a = points[n - 2]
+    const b = points[n - 1]
+    const ang = Math.atan2(b.y - a.y, b.x - a.x)
+    const size = 8
+    const p1 = {
+      x: b.x - size * Math.cos(ang - 0.45),
+      y: b.y - size * Math.sin(ang - 0.45),
+    }
+    const p2 = {
+      x: b.x - size * Math.cos(ang + 0.45),
+      y: b.y - size * Math.sin(ang + 0.45),
+    }
+    return `${r1(b.x)},${r1(b.y)} ${r1(p1.x)},${r1(p1.y)} ${r1(p2.x)},${r1(p2.y)}`
+  }
+
+  // ── A11y data fallback ────────────────────────────────────────────────────
+  let dataOpen = $state(false)
+  const tableId = $derived(`block-data-${ctx.blockId || "diagram"}`)
+  const rows = $derived(diagramRows(params))
+</script>
+
+<figure class="w-full" data-block-type="diagram">
+  {#if params.title || params.subtitle}
+    <div class="mb-1">
+      {#if params.title}
+        <div class="flex items-center gap-2">
+          <h4 class="min-w-0 text-sm font-semibold text-base-content">
+            {params.title}
+          </h4>
+          <SectionTools {ctx} inline />
+        </div>
+      {/if}
+      {#if params.subtitle}
+        <p class="text-xs text-base-content/60">{params.subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if params.nodes.length === 0}
+    <p class="text-sm text-base-content/45">No diagram to draw.</p>
+  {:else}
+    <div class="w-full overflow-x-auto">
+      <svg
+        viewBox="0 0 {W} {H}"
+        class="block h-auto w-full"
+        role="img"
+        aria-label={ariaLabel}
+      >
+        {#if isSeq && seq}
+          <!-- sequence: actor pills + lifelines + messages -->
+          {@const lifelineBottom = H - VIEW_PAD}
+          {#each seq.actors as a (a.id)}
+            <g transform="translate({r1(a.x - a.w / 2)}, {VIEW_PAD})">
+              <rect
+                width={r1(a.w)}
+                height={SEQ_ACTOR_H}
+                rx={SEQ_ACTOR_H / 2}
+                class={nodeClasses(a)}
+                stroke-width="1.5"
+              ></rect>
+              <text
+                x={r1(a.w / 2)}
+                y={VIEW_PAD + SEQ_ACTOR_H / 2 + 4}
+                text-anchor="middle"
+                class="fill-base-content text-xs font-semibold"
+              >
+                {a.label}
+              </text>
+            </g>
+            <line
+              x1={r1(a.x)}
+              x2={r1(a.x)}
+              y1={VIEW_PAD + SEQ_ACTOR_H}
+              y2={lifelineBottom}
+              class="stroke-base-content/25"
+              stroke-dasharray="4 4"
+            ></line>
+          {/each}
+          {#each seq.messages as m, mi (mi)}
+            {@const toRight = m.x2 >= m.x1}
+            {@const xStart = toRight ? m.x1 : m.x2}
+            {@const xEnd = toRight ? m.x2 : m.x1}
+            <line
+              x1={r1(xStart)}
+              x2={r1(toRight ? xEnd - 6 : xEnd + 6)}
+              y1={r1(m.y)}
+              y2={r1(m.y)}
+              class={edgeStroke(m)}
+              stroke-width="1.5"
+              stroke-dasharray={m.dashed ? "5 4" : undefined}
+            ></line>
+            <polygon
+              points="{r1(xEnd)},{r1(m.y)} {r1(
+                toRight ? xEnd - 8 : xEnd + 8,
+              )},{r1(m.y - 3.5)} {r1(toRight ? xEnd - 8 : xEnd + 8)},{r1(
+                m.y + 3.5,
+              )}"
+              class={edgeHead(m)}
+            ></polygon>
+            {#if m.label}
+              <text
+                x={r1((xStart + xEnd) / 2)}
+                y={r1(m.y - 6)}
+                text-anchor="middle"
+                class="fill-base-content/70 text-2xs"
+                style="paint-order: stroke; stroke: var(--color-base-100); stroke-width: 3px; stroke-linejoin: round"
+              >
+                {m.label}
+              </text>
+            {/if}
+          {/each}
+        {:else if flow}
+          <!-- flow: layered graph -->
+          {#each flow.edges as e, ei (ei)}
+            <path
+              d={polylineD(e.points)}
+              fill="none"
+              class={edgeStroke(e)}
+              stroke-width="1.5"
+              stroke-dasharray={e.dashed ? "5 4" : undefined}
+            ></path>
+            <polygon points={headPoints(e.points)} class={edgeHead(e)}
+            ></polygon>
+            {#if params.edgeLabels && e.label && e.labelPoint}
+              <text
+                x={r1(e.labelPoint.x)}
+                y={r1(e.labelPoint.y + 4)}
+                text-anchor="middle"
+                class="fill-base-content/70 text-2xs"
+                style="paint-order: stroke; stroke: var(--color-base-100); stroke-width: 3px; stroke-linejoin: round"
+              >
+                {e.label}
+              </text>
+            {/if}
+          {/each}
+          {#each flow.boxes as b (b.id)}
+            {@const shape = b.shape ?? kindShape(b.kind)}
+            {@const text = nodeTextLines(b, { w: b.w, h: b.h })}
+            {@const labelLines = text.label}
+            {@const subLines = text.sub}
+            {@const textH =
+              labelLines.length * NODE_LINE_H +
+              (subLines.length ? subLines.length * (NODE_LINE_H - 4) + 4 : 0)}
+            {@const textTop = b.y + b.h / 2 - textH / 2}
+            <g>
+              {#if shape === "diamond"}
+                <polygon
+                  points="{r1(b.x + b.w / 2)},{r1(b.y)} {r1(b.x + b.w)},{r1(
+                    b.y + b.h / 2,
+                  )} {r1(b.x + b.w / 2)},{r1(b.y + b.h)} {r1(b.x)},{r1(
+                    b.y + b.h / 2,
+                  )}"
+                  class={nodeClasses(b)}
+                  stroke-width="1.5"
+                ></polygon>
+              {:else if shape === "circle"}
+                <ellipse
+                  cx={r1(b.x + b.w / 2)}
+                  cy={r1(b.y + b.h / 2)}
+                  rx={r1(b.w / 2)}
+                  ry={r1(b.h / 2)}
+                  class={nodeClasses(b)}
+                  stroke-width="1.5"
+                ></ellipse>
+              {:else}
+                <rect
+                  x={r1(b.x)}
+                  y={r1(b.y)}
+                  width={r1(b.w)}
+                  height={r1(b.h)}
+                  rx={shape === "pill" || shape === "stadium"
+                    ? Math.min(b.h / 2, 18)
+                    : 6}
+                  class={nodeClasses(b)}
+                  stroke-width="1.5"
+                  stroke-dasharray={kindDashed(b.kind) ? "5 4" : undefined}
+                ></rect>
+              {/if}
+              <text
+                x={r1(b.x + b.w / 2)}
+                y={r1(textTop + NODE_LINE_H / 2 + 4)}
+                text-anchor="middle"
+                class="fill-base-content text-xs font-semibold"
+              >
+                {#each labelLines as line, li (li)}
+                  <tspan
+                    x={r1(b.x + b.w / 2)}
+                    y={r1(textTop + NODE_LINE_H * li + NODE_LINE_H / 2 + 4)}
+                  >
+                    {line}
+                  </tspan>
+                {/each}
+              </text>
+              {#each subLines as line, si (si)}
+                <text
+                  x={r1(b.x + b.w / 2)}
+                  y={r1(
+                    textTop +
+                      labelLines.length * NODE_LINE_H +
+                      4 +
+                      (NODE_LINE_H - 4) * si +
+                      4,
+                  )}
+                  text-anchor="middle"
+                  class="fill-base-content/60 text-2xs"
+                >
+                  {line}
+                </text>
+              {/each}
+              <title
+                >{b.sublabel ? `${b.label} (${b.sublabel})` : b.label}</title
+              >
+            </g>
+          {/each}
+        {/if}
+      </svg>
+    </div>
+  {/if}
+
+  <!-- accessible structure fallback: sr-only table always; expandable -->
+  <div class="mt-1.5 flex items-center justify-between gap-2">
+    <span class="text-2xs text-base-content/45">
+      {isSeq
+        ? `${params.nodes.length} actors · ${params.edges.length} messages`
+        : `${params.nodes.length} nodes · ${params.edges.length} edges`}
+    </span>
+    <button
+      type="button"
+      class="btn btn-ghost btn-xs text-base-content/70"
+      aria-expanded={dataOpen}
+      aria-controls={tableId}
+      onclick={() => (dataOpen = !dataOpen)}
+    >
+      {dataOpen ? "Hide structure" : "View structure"}
+    </button>
+  </div>
+  <div
+    class={dataOpen
+      ? "mt-1 max-h-64 overflow-auto rounded-box border border-base-content/10"
+      : ""}
+  >
+    <table id={tableId} class={dataOpen ? "table table-sm" : "sr-only"}>
+      <caption class="sr-only">
+        Diagram structure{params.title ? `: ${params.title}` : ""}
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col" class="text-left">Element</th>
+          <th scope="col" class="text-left">Detail</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, ri (ri)}
+          <tr>
+            <th scope="row" class="text-left font-normal">{row.label}</th>
+            <td class="text-left">{row.detail}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</figure>

package/dist/artifact-blocks/blocks/diagram/DiagramBlock.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { BlockProps } from "../../types.js";
+declare const DiagramBlock: import("svelte").Component<BlockProps<{
+    mode: "flow" | "sequence";
+    direction: "BT" | "LR" | "RL" | "TB";
+    nodes: {
+        id: string;
+        label: string;
+        sublabel?: string | undefined;
+        kind?: "data" | "input" | "output" | "note" | "default" | "decision" | "external" | "terminal" | "process" | "subroutine" | undefined;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+        shape?: "circle" | "rect" | "stadium" | "pill" | "diamond" | undefined;
+    }[];
+    edges: {
+        from: string;
+        to: string;
+        label?: string | undefined;
+        dashed?: boolean | undefined;
+        tone?: "error" | "warning" | "info" | "success" | "primary" | "secondary" | "neutral" | "accent" | undefined;
+    }[];
+    edgeLabels: boolean;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    ranksep?: number | undefined;
+    nodesep?: number | undefined;
+    edgesep?: number | undefined;
+    sequenceWidth?: number | undefined;
+    msgGap?: number | undefined;
+}>, {}, "">;
+type DiagramBlock = ReturnType<typeof DiagramBlock>;
+export default DiagramBlock;

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

@@ -0,0 +1,9 @@
+/**
+ * Diagram block definition (block type "diagram").
+ * Contract: src/lib/artifact-blocks/CONTRACT.md — registry.ts discovers this
+ * folder; nothing else registers a block.
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type DiagramParams } from "./schema.js";
+declare const def: ArtifactBlockDef<DiagramParams>;
+export default def;

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

@@ -0,0 +1,50 @@
+import { diagramParamsSchema as diagramSchema, } from "./schema.js";
+import DiagramBlock from "./DiagramBlock.svelte";
+const EXAMPLE = {
+    mode: "flow",
+    direction: "LR",
+    title: "Release pipeline",
+    subtitle: "PR merge → production deploy",
+    edgeLabels: true,
+    nodes: [
+        { id: "pr", label: "PR opened", kind: "terminal", tone: "primary" },
+        { id: "ci", label: "CI green?", kind: "decision", tone: "warning" },
+        { id: "fix", label: "Fix and re-push", kind: "process" },
+        { id: "stage", label: "Deploy to staging", kind: "process", tone: "info" },
+        { id: "smoke", label: "Smoke test", kind: "process", tone: "info" },
+        { id: "prod", label: "Promote to prod", kind: "terminal", tone: "success" },
+    ],
+    edges: [
+        { from: "pr", to: "ci", label: "push" },
+        { from: "ci", to: "fix", label: "red", tone: "error", dashed: true },
+        { from: "fix", to: "ci", label: "retry", dashed: true },
+        { from: "ci", to: "stage", label: "green" },
+        { from: "stage", to: "smoke" },
+        { from: "smoke", to: "prod", label: "pass" },
+    ],
+};
+const def = {
+    type: "diagram",
+    title: "Diagram (flow / org / sequence)",
+    description: "Nodes + edges as a read-only SVG diagram with automatic layered layout. " +
+        "mode 'flow' (default) draws flowcharts, org charts and architecture maps: nodes are " +
+        "{ id, label, sublabel?, kind?, tone?, shape? } and edges { from, to, label?, dashed?, tone? } " +
+        "(from/to reference node ids; every edge endpoint must exist; no self-loops). " +
+        "kind picks a default shape — decision=diamond, terminal=stadium, input/output=pill, " +
+        "others=rect — or set shape explicitly (rect | pill | diamond | circle | stadium). " +
+        "tone is a theme token (primary/secondary/accent/neutral/info/success/warning/error); " +
+        "neutral is the default and the safest for big diagrams. direction LR (default), RL, TB or BT. " +
+        "Edge labels render with a page-colored halo when edgeLabels is true (default). " +
+        "mode 'sequence' draws the SAME nodes as actors (labels must be unique) and the edges as " +
+        "lifeline messages top-to-bottom — dashed:true reads as a return/async message. " +
+        "Caps: 50 nodes, 80 edges; labels ≤200 chars; spacing tunable via ranksep/nodesep (flow) " +
+        "and sequenceWidth/msgGap (sequence). An accessible structure table is built in ('View data') " +
+        "— don't pair a diagram with a duplicate node list. Tip: keep labels under ~4 words so boxes " +
+        "stay small; use tone sparingly to mark the one path that matters.",
+    schema: diagramSchema,
+    component: DiagramBlock,
+    // mos-8fvt9: the section's Listen + comment sit on the heading row.
+    hostsTools: (p) => Boolean(p.title),
+    example: EXAMPLE,
+};
+export default def;

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

@@ -0,0 +1,48 @@
+/**
+ * Diagram block — layout constants (pure numbers, no colors).
+ *
+ * schema.ts sizes boxes from a deterministic text estimate so SSR and the
+ * client agree byte-for-byte without a canvas; the renderer maps tones to
+ * theme-token classes (never literals). All values are px unless noted.
+ */
+export declare const MAX_NODES = 50;
+export declare const MAX_EDGES = 80;
+/** Node label / sublabel and edge label text caps (chars). */
+export declare const NODE_TEXT_MAX = 200;
+export declare const EDGE_TEXT_MAX = 200;
+export declare const DEFAULT_RANKSEP = 60;
+export declare const DEFAULT_NODESEP = 28;
+export declare const DEFAULT_EDGESEP = 14;
+export declare const MIN_RANKSEP = 24;
+export declare const MIN_NODESEP = 12;
+export declare const NODE_PAD_X = 16;
+export declare const NODE_PAD_Y = 11;
+export declare const NODE_LINE_H = 18;
+/** ≈ average glyph width of 13px system-ui semibold. */
+export declare const NODE_CHAR_W = 7;
+/** ≈ average glyph width of the 11px regular sublabel. */
+export declare const SUB_CHAR_W = 6;
+export declare const NODE_MAX_LINES = 3;
+export declare const NODE_MIN_W = 92;
+export declare const NODE_MAX_W = 280;
+export declare const NODE_MIN_H = 36;
+/** Fraction of a diamond's width the centered text may occupy. */
+export declare const DIAMOND_TEXT_FACTOR = 0.6;
+export declare const CIRCLE_MIN = 72;
+export declare const SEQ_ACTOR_H = 36;
+export declare const SEQ_ACTOR_PAD_X = 18;
+export declare const SEQ_ACTOR_MIN_W = 96;
+export declare const SEQ_ACTOR_MAX_W = 220;
+export declare const SEQ_MSG_GAP_DEFAULT = 48;
+export declare const SEQ_MSG_GAP_MIN = 24;
+export declare const SEQ_ROW_PAD = 18;
+export declare const SEQ_PAD_X = 20;
+export declare const SEQ_COL_MIN = 150;
+export declare const SEQ_LABEL_CHAR_W = 5.9;
+export declare const SEQ_WIDTH_DEFAULT = 900;
+export declare const SEQ_WIDTH_MIN = 320;
+export declare const SEQ_WIDTH_MAX = 2200;
+export declare const EDGE_LABEL_W = 80;
+export declare const EDGE_LABEL_H = 20;
+/** Viewport padding around the laid-out graph. */
+export declare const VIEW_PAD = 14;