@joewinke/jatui 0.36.3 → 0.38.0

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

@@ -0,0 +1,157 @@
+/**
+ * Diagram block thumbnail composer (mos-qkpva).
+ *
+ * The same layout the component draws — layoutFlow/layoutSequence from
+ * ./schema.ts (dagre when the engine resolves, the layered fallback
+ * otherwise) — as a simplified silhouette: node shapes with the component's
+ * tone opacities, edges with arrowheads, and node labels at a size meant to
+ * survive downscaling better than nothing. No structure table, no title:
+ * the thumbnail says "this row is a diagram", the shapes say what kind.
+ */
+import * as dagreNs from "@dagrejs/dagre";
+import { diagramParamsSchema, resolveDagre, layoutFlow, layoutSequence, kindShape, kindDashed, nodeTextLines, } from "./schema.js";
+import { SEQ_ACTOR_H, VIEW_PAD } from "./constants";
+import { r1, thumbText, thumbTruncate, toneColor, } from "../../thumb-kit.js";
+/** The components' static tone maps, resolved to concrete color+opacity. */
+function nodeFill(palette, tone) {
+    if (tone === "neutral" || tone === undefined)
+        return {
+            fill: tone === "neutral" ? palette.ink : palette.primary,
+            opacity: tone === "neutral" ? 0.08 : 0.12,
+        };
+    return { fill: toneColor(palette, tone), opacity: 0.12 };
+}
+function nodeStroke(palette, tone) {
+    if (tone === "neutral" || tone === undefined)
+        return { stroke: palette.ink, opacity: tone === "neutral" ? 0.3 : 0.6 };
+    return { stroke: toneColor(palette, tone), opacity: 0.6 };
+}
+function edgeStroke(palette, tone) {
+    if (tone === "neutral" || tone === undefined)
+        return { stroke: palette.ink, opacity: tone === "neutral" ? 0.4 : 0.7 };
+    return { stroke: toneColor(palette, tone), opacity: 0.7 };
+}
+export function drawDiagramThumb(raw, palette) {
+    const parsed = diagramParamsSchema.safeParse(raw);
+    if (!parsed.success)
+        return null;
+    const params = parsed.data;
+    if (params.nodes.length === 0)
+        return null;
+    const isSeq = params.mode === "sequence";
+    const dagre = resolveDagre(dagreNs);
+    const seq = isSeq ? layoutSequence(params) : null;
+    const flow = isSeq ? null : layoutFlow(params, dagre);
+    if (!seq && !flow)
+        return null;
+    const W = Math.max(80, (seq ?? flow)?.width ?? 80);
+    const H = Math.max(60, (seq ?? flow)?.height ?? 60);
+    const out = [];
+    const nodeShape = (b) => b.shape ?? kindShape(b.kind);
+    /** One node's silhouette at its laid-out box. */
+    function drawNode(b) {
+        const f = nodeFill(palette, b.tone);
+        const s = nodeStroke(palette, b.tone);
+        const shape = nodeShape(b);
+        const strokeAttrs = `fill="${f.fill}" fill-opacity="${f.opacity}" stroke="${s.stroke}" stroke-opacity="${s.opacity}" stroke-width="1.5"`;
+        if (shape === "diamond") {
+            const cx = b.x + b.w / 2;
+            const cy = b.y + b.h / 2;
+            out.push(`<polygon points="${r1(cx)},${r1(b.y)} ${r1(b.x + b.w)},${r1(cy)} ${r1(cx)},${r1(b.y + b.h)} ${r1(b.x)},${r1(cy)}" ${strokeAttrs}/>`);
+        }
+        else if (shape === "circle") {
+            out.push(`<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)}" ${strokeAttrs}/>`);
+        }
+        else {
+            const rx = shape === "pill" || shape === "stadium" ? Math.min(b.h / 2, 18) : 6;
+            const dashed = kindDashed(b.kind)
+                ? ` stroke-dasharray="5 4"`
+                : "";
+            out.push(`<rect x="${r1(b.x)}" y="${r1(b.y)}" width="${r1(b.w)}" height="${r1(b.h)}" rx="${r1(rx)}" ${strokeAttrs}${dashed}/>`);
+        }
+        // labels (two wrapped lines at most, like the component's nodeTextLines)
+        const text = nodeTextLines(b, { w: b.w, h: b.h });
+        const lines = text.label.slice(0, 2);
+        const lineH = 11;
+        const textTop = b.y + b.h / 2 - (lines.length * lineH) / 2;
+        lines.forEach((line, li) => {
+            out.push(thumbText(b.x + b.w / 2, textTop + lineH * li + lineH / 2 + 4, thumbTruncate(line, 16), { size: 10, fill: palette.ink, weight: 600, anchor: "middle" }));
+        });
+    }
+    /** Polyline path + arrowhead, mirroring the component's path helpers. */
+    function drawEdge(e) {
+        if (!e.points.length)
+            return;
+        const s = edgeStroke(palette, e.tone);
+        const d = e.points
+            .map((p, i) => `${i ? "L" : "M"} ${r1(p.x)} ${r1(p.y)}`)
+            .join(" ");
+        out.push(`<path d="${d}" fill="none" stroke="${s.stroke}" stroke-opacity="${s.opacity}" stroke-width="1.5"${e.dashed ? ` stroke-dasharray="5 4"` : ""}/>`);
+        const n = e.points.length;
+        if (n >= 2) {
+            const a = e.points[n - 2];
+            const b = e.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),
+            };
+            out.push(`<polygon points="${r1(b.x)},${r1(b.y)} ${r1(p1.x)},${r1(p1.y)} ${r1(p2.x)},${r1(p2.y)}" fill="${s.stroke}" fill-opacity="${s.opacity}"/>`);
+        }
+        if (e.label && e.labelPoint)
+            out.push(thumbText(e.labelPoint.x, e.labelPoint.y + 4, thumbTruncate(e.label, 14), {
+                size: 9,
+                fill: palette.ink,
+                opacity: 0.6,
+                anchor: "middle",
+            }));
+    }
+    if (seq) {
+        // sequence: actor pills + lifelines + messages
+        for (const a of seq.actors) {
+            const f = nodeFill(palette, a.tone);
+            const s = nodeStroke(palette, a.tone);
+            out.push(`<rect x="${r1(a.x - a.w / 2)}" y="${VIEW_PAD}" width="${r1(a.w)}" height="${SEQ_ACTOR_H}" rx="${r1(SEQ_ACTOR_H / 2)}" fill="${f.fill}" fill-opacity="${f.opacity}" stroke="${s.stroke}" stroke-opacity="${s.opacity}" stroke-width="1.5"/>`);
+            out.push(thumbText(a.x, VIEW_PAD + SEQ_ACTOR_H / 2 + 4, thumbTruncate(a.label, 14), {
+                size: 10,
+                fill: palette.ink,
+                weight: 600,
+                anchor: "middle",
+            }));
+            out.push(`<line x1="${r1(a.x)}" x2="${r1(a.x)}" y1="${VIEW_PAD + SEQ_ACTOR_H}" y2="${r1(H - VIEW_PAD)}" stroke="${palette.ink}" stroke-opacity="0.25" stroke-width="1" stroke-dasharray="4 4"/>`);
+        }
+        for (const m of seq.messages) {
+            const s = edgeStroke(palette, m.tone);
+            const toRight = m.x2 >= m.x1;
+            const xStart = toRight ? m.x1 : m.x2;
+            const xEnd = toRight ? m.x2 : m.x1;
+            out.push(`<line x1="${r1(xStart)}" x2="${r1(toRight ? xEnd - 6 : xEnd + 6)}" y1="${r1(m.y)}" y2="${r1(m.y)}" stroke="${s.stroke}" stroke-opacity="${s.opacity}" stroke-width="1.5"${m.dashed ? ` stroke-dasharray="5 4"` : ""}/>`);
+            out.push(`<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)}" fill="${s.stroke}" fill-opacity="${s.opacity}"/>`);
+            if (m.label)
+                out.push(thumbText((xStart + xEnd) / 2, m.y - 6, thumbTruncate(m.label, 14), {
+                    size: 9,
+                    fill: palette.ink,
+                    opacity: 0.6,
+                    anchor: "middle",
+                }));
+        }
+    }
+    else if (flow) {
+        for (const e of flow.edges)
+            drawEdge({
+                points: e.points,
+                label: e.label,
+                labelPoint: e.labelPoint,
+                dashed: e.dashed,
+                tone: e.tone,
+            });
+        for (const b of flow.boxes)
+            drawNode(b);
+    }
+    return `<svg viewBox="0 0 ${r1(W)} ${r1(H)}">${out.join("")}</svg>`;
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Diagram block — shared types. schema.ts owns the zod schema and infers
+ * DiagramParams from it; this file only carries the layout vocabulary so
+ * schema.ts and DiagramBlock.svelte agree without a cycle.
+ */
+import type { z } from "zod";
+import type { ToneToken } from "../../params";
+import type { diagramParamsSchema } from "./schema";
+export type DiagramMode = "flow" | "sequence";
+export type NodeShape = "rect" | "pill" | "diamond" | "circle" | "stadium";
+export type NodeKind = "default" | "input" | "output" | "decision" | "terminal" | "process" | "data" | "subroutine" | "external" | "note";
+export type DiagramParams = z.infer<typeof diagramParamsSchema>;
+export interface Point {
+    x: number;
+    y: number;
+}
+/** A laid-out node: top-left box plus the params the renderer paints. */
+export interface NodeBox {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    label: string;
+    sublabel?: string;
+    kind?: NodeKind;
+    tone?: ToneToken;
+    shape?: NodeShape;
+}
+export interface EdgeGeom {
+    from: string;
+    to: string;
+    label?: string;
+    dashed?: boolean;
+    tone?: ToneToken;
+    /** Polyline from source border to target border (dagre or layered). */
+    points: Point[];
+    /** Label anchor (dagre's label position, or the polyline midpoint). */
+    labelPoint: Point | null;
+    labelW: number;
+    labelH: number;
+}
+export interface FlowLayout {
+    boxes: NodeBox[];
+    edges: EdgeGeom[];
+    width: number;
+    height: number;
+    /** Which engine produced the layout ("layered" = the no-dagre fallback). */
+    engine: "dagre" | "layered";
+}
+export interface SeqActor {
+    id: string;
+    label: string;
+    tone?: ToneToken;
+    /** Center x of the lifeline; w = actor box width. */
+    x: number;
+    w: number;
+}
+export interface SeqMessage {
+    from: string;
+    to: string;
+    label?: string;
+    dashed?: boolean;
+    tone?: ToneToken;
+    y: number;
+    x1: number;
+    x2: number;
+}
+export interface SeqLayout {
+    actors: SeqActor[];
+    messages: SeqMessage[];
+    width: number;
+    height: number;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/artifact-blocks/blocks/diff/DiffBlock.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  /**
+   * diff block — old/new text through jatui's HunkDiffView (side-by-side or
+   * unified, line numbers, word-level inline highlights). The block's own job
+   * is the header (file label + +/- counts) and handing the text through; the
+   * diff math and rendering live in jatui.
+   *
+   * Read-only safe: HunkDiffView is pure presentation, nothing here saves
+   * state, so the block renders identically on the public share route.
+   */
+  import { diffLines } from "diff"
+  import HunkDiffView from "../../../components/HunkDiffView.svelte"
+  import type { BlockProps } from "../../types.js"
+  import { type DiffParams } from "./schema.js"
+
+  let { params }: BlockProps<DiffParams> = $props()
+
+  const oldText = $derived(params?.oldText ?? null)
+  const newText = $derived(params?.newText ?? null)
+  const unified = $derived(params?.unified ?? false)
+
+  /** +/- line counts for the header chips — the REAL line diff (the same
+   * diffLines pass HunkDiffView renders), not a length guess: a modified
+   * line is one removal + one addition, exactly as the rows below show. */
+  const stats = $derived.by(() => {
+    let removed = 0
+    let added = 0
+    for (const c of diffLines(oldText ?? "", newText ?? "")) {
+      if (c.removed) removed += c.count ?? c.value.split("\n").length
+      else if (c.added) added += c.count ?? c.value.split("\n").length
+    }
+    return { removed, added }
+  })
+
+  /** Header chips show the honest delta only when the texts differ. */
+  const identical = $derived(oldText !== null && oldText === newText)
+</script>
+
+<figure class="artifact-diff w-full">
+  {#if params?.file || params?.caption}
+    <figcaption class="mb-1.5 flex min-w-0 flex-wrap items-baseline gap-x-3">
+      {#if params?.file}
+        <span
+          class="truncate rounded-field bg-base-content/5 px-2 py-0.5 font-mono text-xs font-medium text-base-content/80"
+        >
+          {params.file}
+        </span>
+      {/if}
+      {#if params?.caption}
+        <span class="min-w-0 text-xs text-base-content/60">
+          {params.caption}
+        </span>
+      {/if}
+    </figcaption>
+  {/if}
+
+  {#if identical}
+    <p class="text-sm text-base-content/50">
+      No difference: both sides are identical.
+    </p>
+  {:else}
+    <div
+      class="overflow-x-auto rounded-box border border-base-content/10 bg-base-100"
+    >
+      <div
+        class="flex items-center gap-2 border-b border-base-content/10 px-3 py-1.5"
+      >
+        <span class="badge badge-error badge-sm font-mono"
+          >-{stats.removed}</span
+        >
+        <span class="badge badge-success badge-sm font-mono"
+          >+{stats.added}</span
+        >
+        <span class="ml-auto text-2xs text-base-content/45">
+          {unified ? "unified" : "side by side"}
+        </span>
+      </div>
+      <HunkDiffView {oldText} {newText} {unified} />
+    </div>
+  {/if}
+</figure>

package/dist/artifact-blocks/blocks/diff/DiffBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BlockProps } from "../../types.js";
+declare const DiffBlock: import("svelte").Component<BlockProps<{
+    oldText: string | null;
+    newText: string | null;
+    unified: boolean;
+    file?: string | undefined;
+    caption?: string | undefined;
+}>, {}, "">;
+type DiffBlock = ReturnType<typeof DiffBlock>;
+export default DiffBlock;

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

@@ -0,0 +1,7 @@
+/**
+ * diff block — old/new text through jatui HunkDiffView (split or unified).
+ */
+import type { ArtifactBlockDef } from "../../types.js";
+import { type DiffParams } from "./schema.js";
+declare const def: ArtifactBlockDef<DiffParams>;
+export default def;

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

@@ -0,0 +1,36 @@
+import DiffBlock from "./DiffBlock.svelte";
+import { diffSchema } from "./schema.js";
+const OLD_YAML = `modules:
+  scheduling:
+    enabled: true
+  billing:
+    enabled: false
+  messages:
+    enabled: true
+`;
+const NEW_YAML = `modules:
+  scheduling:
+    enabled: true
+  billing:
+    enabled: true
+  messages:
+    enabled: true
+  vault:
+    enabled: false
+`;
+const EXAMPLE = {
+    file: "tenants/cmf/app.yaml",
+    caption: "Billing + vault toggles flipped",
+    oldText: OLD_YAML,
+    newText: NEW_YAML,
+    unified: false,
+};
+const def = {
+    type: "diff",
+    title: "Diff",
+    description: "Before/after text through jatui's HunkDiffView: line numbers, side-by-side (default) or unified columns, red/green rows with strikethrough on removed lines and inline word-level highlights. Params: oldText and/or newText (each up to 50,000 chars — at least one; null means the side doesn't exist, i.e. a created or deleted file), unified (true = one column — also the friendlier read on a phone), file (a short label, e.g. 'tenants/cmf/app.yaml') and caption (one line of what changed). Use it to review config changes, contract edits and any text an agent proposes changing. Tip: quote the two versions verbatim — the viewer trusts the diff exactly as much as its inputs; end both sides with a trailing newline so the last line diffs cleanly, and keep each side a whole file or a self-contained hunk, not a fragment that reads out of context.",
+    schema: diffSchema,
+    component: DiffBlock,
+    example: EXAMPLE,
+};
+export default def;

package/dist/artifact-blocks/blocks/diff/schema.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Params schema for the diff block (old/new text through jatui HunkDiffView).
+ * Imported by block.ts (def), DiffBlock.svelte (props typing) and the tests —
+ * keeps them cycle-free.
+ *
+ * Untrusted input rules (CONTRACT.md): both texts are length-capped and
+ * rendered BY jatui's diff lib as text (it never evaluates content) — the
+ * component renders the diff through HunkDiffView's own DOM, never {@html}.
+ */
+import { z } from "zod";
+export declare const diffSchema: z.ZodObject<{
+    oldText: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+    newText: z.ZodDefault<z.ZodNullable<z.ZodString>>;
+    unified: z.ZodDefault<z.ZodBoolean>;
+    file: z.ZodOptional<z.ZodString>;
+    caption: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export type DiffParams = z.infer<typeof diffSchema>;

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

@@ -0,0 +1,35 @@
+/**
+ * Params schema for the diff block (old/new text through jatui HunkDiffView).
+ * Imported by block.ts (def), DiffBlock.svelte (props typing) and the tests —
+ * keeps them cycle-free.
+ *
+ * Untrusted input rules (CONTRACT.md): both texts are length-capped and
+ * rendered BY jatui's diff lib as text (it never evaluates content) — the
+ * component renders the diff through HunkDiffView's own DOM, never {@html}.
+ */
+import { z } from "zod";
+/** One side of the diff. 50k chars ≈ ~2k lines — a whole config file or a
+ * big hunk; inside the contract's ~256KB per-block params budget even with
+ * both sides maxed (the publisher owns the sum). */
+const SIDE_MAX_CHARS = 50_000;
+export const diffSchema = z
+    .object({
+    /** The text BEFORE the change (null when the file is brand new). */
+    oldText: z.string().max(SIDE_MAX_CHARS).nullable().default(null),
+    /** The text AFTER the change (null when the file was deleted). */
+    newText: z.string().max(SIDE_MAX_CHARS).nullable().default(null),
+    /** Unified single column (default) vs the two-column split view. */
+    unified: z.boolean().default(false),
+    /** Optional label — the file (or thing) this diff is about. */
+    file: z.string().max(200).optional(),
+    /** Optional caption under the header (what changed, in one line). */
+    caption: z.string().max(200).optional(),
+})
+    .superRefine((v, ctx) => {
+    if (v.oldText === null && v.newText === null)
+        ctx.addIssue({
+            code: "custom",
+            path: ["oldText"],
+            message: "at least one of oldText / newText is required",
+        });
+});