@joewinke/jatui 0.37.0 → 0.38.0

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

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+// ── Caps (untrusted-input bounds) ─────────────────────────────────────────
+export const MAX_NODES = 50;
+export const MAX_EDGES = 80;
+/** Node label / sublabel and edge label text caps (chars). */
+export const NODE_TEXT_MAX = 200;
+export const EDGE_TEXT_MAX = 200;
+// ── Dagre spacing defaults ────────────────────────────────────────────────
+export const DEFAULT_RANKSEP = 60;
+export const DEFAULT_NODESEP = 28;
+export const DEFAULT_EDGESEP = 14;
+export const MIN_RANKSEP = 24;
+export const MIN_NODESEP = 12;
+// ── Node box sizing (from the deterministic text estimate) ────────────────
+export const NODE_PAD_X = 16;
+export const NODE_PAD_Y = 11;
+export const NODE_LINE_H = 18;
+/** ≈ average glyph width of 13px system-ui semibold. */
+export const NODE_CHAR_W = 7.0;
+/** ≈ average glyph width of the 11px regular sublabel. */
+export const SUB_CHAR_W = 6.0;
+export const NODE_MAX_LINES = 3;
+export const NODE_MIN_W = 92;
+export const NODE_MAX_W = 280;
+export const NODE_MIN_H = 36;
+/** Fraction of a diamond's width the centered text may occupy. */
+export const DIAMOND_TEXT_FACTOR = 0.6;
+export const CIRCLE_MIN = 72;
+// ── Sequence mode ─────────────────────────────────────────────────────────
+export const SEQ_ACTOR_H = 36;
+export const SEQ_ACTOR_PAD_X = 18;
+export const SEQ_ACTOR_MIN_W = 96;
+export const SEQ_ACTOR_MAX_W = 220;
+export const SEQ_MSG_GAP_DEFAULT = 48;
+export const SEQ_MSG_GAP_MIN = 24;
+export const SEQ_ROW_PAD = 18;
+export const SEQ_PAD_X = 20;
+export const SEQ_COL_MIN = 150;
+export const SEQ_LABEL_CHAR_W = 5.9;
+export const SEQ_WIDTH_DEFAULT = 900;
+export const SEQ_WIDTH_MIN = 320;
+export const SEQ_WIDTH_MAX = 2200;
+// ── Edge label box handed to dagre ────────────────────────────────────────
+export const EDGE_LABEL_W = 80;
+export const EDGE_LABEL_H = 20;
+/** Viewport padding around the laid-out graph. */
+export const VIEW_PAD = 14;

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

@@ -0,0 +1,161 @@
+/**
+ * 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 { type ToneToken } from "../../params";
+import type { DiagramMode, NodeShape, NodeKind, Point, FlowLayout, SeqLayout } from "./types";
+export declare const diagramParamsSchema: z.ZodObject<{
+    mode: z.ZodDefault<z.ZodEnum<{
+        flow: "flow";
+        sequence: "sequence";
+    }>>;
+    title: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+    direction: z.ZodDefault<z.ZodEnum<{
+        BT: "BT";
+        LR: "LR";
+        RL: "RL";
+        TB: "TB";
+    }>>;
+    nodes: z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        label: z.ZodString;
+        sublabel: z.ZodOptional<z.ZodString>;
+        kind: z.ZodOptional<z.ZodEnum<{
+            data: "data";
+            input: "input";
+            output: "output";
+            note: "note";
+            default: "default";
+            decision: "decision";
+            external: "external";
+            terminal: "terminal";
+            process: "process";
+            subroutine: "subroutine";
+        }>>;
+        tone: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            warning: "warning";
+            info: "info";
+            success: "success";
+            primary: "primary";
+            secondary: "secondary";
+            neutral: "neutral";
+            accent: "accent";
+        }>>;
+        shape: z.ZodOptional<z.ZodEnum<{
+            circle: "circle";
+            rect: "rect";
+            stadium: "stadium";
+            pill: "pill";
+            diamond: "diamond";
+        }>>;
+    }, z.core.$strip>>;
+    edges: z.ZodDefault<z.ZodArray<z.ZodObject<{
+        from: z.ZodString;
+        to: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+        dashed: z.ZodOptional<z.ZodBoolean>;
+        tone: z.ZodOptional<z.ZodEnum<{
+            error: "error";
+            warning: "warning";
+            info: "info";
+            success: "success";
+            primary: "primary";
+            secondary: "secondary";
+            neutral: "neutral";
+            accent: "accent";
+        }>>;
+    }, z.core.$strip>>>;
+    edgeLabels: z.ZodDefault<z.ZodBoolean>;
+    ranksep: z.ZodOptional<z.ZodNumber>;
+    nodesep: z.ZodOptional<z.ZodNumber>;
+    edgesep: z.ZodOptional<z.ZodNumber>;
+    sequenceWidth: z.ZodOptional<z.ZodNumber>;
+    msgGap: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strip>;
+export type DiagramParamsInput = z.input<typeof diagramParamsSchema>;
+export type DiagramParams = z.output<typeof diagramParamsSchema>;
+export type { DiagramMode, NodeShape, NodeKind };
+export interface DagreGraph {
+    setGraph(o: Record<string, unknown>): unknown;
+    setDefaultEdgeLabel(fn: () => object): unknown;
+    setNode(id: string, o: object): unknown;
+    setEdge(from: string, to: string, o?: object): unknown;
+    node(id: string): {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+    edge(from: string, to: string): {
+        points?: Point[];
+        labelPoint?: Point;
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+    graph(): {
+        width?: number;
+        height?: number;
+    };
+}
+export interface DagreEngine {
+    graphlib: {
+        Graph: new () => DagreGraph;
+    };
+    layout: (g: DagreGraph) => void;
+}
+/**
+ * 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 declare function resolveDagre(mod: unknown): DagreEngine | null;
+/** Char-count text width estimate. Deliberately NOT a canvas measure: the
+ * layout must be byte-identical between SSR and hydration. */
+export declare function textWidth(text: string, charW: number): number;
+/** Default shape for a node kind (explicit `shape` wins). */
+export declare function kindShape(kind: NodeKind | undefined): NodeShape;
+/** Dashed border for note/external kinds unless the shape is a diamond. */
+export declare function kindDashed(kind: NodeKind | undefined): boolean;
+export interface NodeSize {
+    w: number;
+    h: number;
+}
+/** Text lines the renderer paints for a node (same budgets as nodeSizeFor
+ * so the box always fits its text). */
+export declare function nodeTextLines(node: {
+    label: string;
+    sublabel?: string;
+    shape?: NodeShape;
+    kind?: NodeKind;
+}, size: NodeSize): {
+    label: string[];
+    sub: string[];
+};
+/** Flow layout: dagre when an engine resolves, layered otherwise. */
+export declare function layoutFlow(p: DiagramParams, engine: DagreEngine | null): FlowLayout;
+export declare function layoutSequence(p: DiagramParams): SeqLayout;
+export interface DiagramRow {
+    kind: "node" | "edge";
+    label: string;
+    detail: string;
+}
+/** Flat rows for the accessible data fallback (sr-only table). */
+export declare function diagramRows(params: DiagramParams): DiagramRow[];
+export type { ToneToken };