@stigmer/react 0.5.0 → 1.0.0

package/workflow/WorkflowTopologyGraph.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef, useState, useCallback } from "react";
+import { cn } from "@stigmer/theme";
+import dagre from "@dagrejs/dagre";
+import { CATEGORY_COLORS, DAGRE_CONFIG, GRAPH_PADDING } from "./canvas-constants";
+/**
+ * Read-only SVG DAG renderer for workflow topology.
+ *
+ * Uses dagre for layered layout computation and renders nodes as
+ * rounded rectangles with category-based coloring. Edges are drawn
+ * as SVG paths with arrowhead markers.
+ *
+ * Supports mouse wheel zoom and drag-to-pan for large workflows.
+ * All colors flow through `--stgm-*` tokens with sensible fallbacks.
+ *
+ * @since T10 (YAML Editor with Graph Preview)
+ */
+export const WorkflowTopologyGraph = memo(function WorkflowTopologyGraph({ topology, className, }) {
+    const { nodes, edges } = topology;
+    const svgRef = useRef(null);
+    const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 });
+    const dragState = useRef(null);
+    const layout = useMemo(() => {
+        if (nodes.length === 0)
+            return null;
+        return computeLayout(nodes, edges);
+    }, [nodes, edges]);
+    const handleWheel = useCallback((e) => {
+        e.preventDefault();
+        const factor = e.deltaY > 0 ? 0.9 : 1.1;
+        setTransform((prev) => ({
+            ...prev,
+            scale: Math.max(0.2, Math.min(3, prev.scale * factor)),
+        }));
+    }, []);
+    const handleMouseDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        dragState.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startTx: transform.x,
+            startTy: transform.y,
+        };
+    }, [transform.x, transform.y]);
+    const handleMouseMove = useCallback((e) => {
+        if (!dragState.current)
+            return;
+        const dx = e.clientX - dragState.current.startX;
+        const dy = e.clientY - dragState.current.startY;
+        setTransform((prev) => ({
+            ...prev,
+            x: dragState.current.startTx + dx,
+            y: dragState.current.startTy + dy,
+        }));
+    }, []);
+    const handleMouseUp = useCallback(() => {
+        dragState.current = null;
+    }, []);
+    if (!layout || nodes.length === 0) {
+        return (_jsx("div", { className: cn("flex items-center justify-center text-sm text-muted-foreground", className), children: "No tasks to visualize" }));
+    }
+    const { layoutNodes, layoutEdges, width, height } = layout;
+    return (_jsxs("svg", { ref: svgRef, className: cn("h-full w-full cursor-grab select-none active:cursor-grabbing", className), viewBox: `0 0 ${width + GRAPH_PADDING * 2} ${height + GRAPH_PADDING * 2}`, onWheel: handleWheel, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, role: "img", "aria-label": "Workflow topology graph", children: [_jsx("defs", { children: _jsx("marker", { id: "arrowhead", markerWidth: "8", markerHeight: "6", refX: "8", refY: "3", orient: "auto", children: _jsx("polygon", { points: "0 0, 8 3, 0 6", fill: "var(--stgm-border, #d4d4d8)" }) }) }), _jsxs("g", { transform: `translate(${GRAPH_PADDING + transform.x}, ${GRAPH_PADDING + transform.y}) scale(${transform.scale})`, children: [layoutEdges.map((edge, i) => (_jsx(EdgePath, { edge: edge }, i))), layoutNodes.map((node) => (_jsx(NodeRect, { node: node }, node.id)))] })] }));
+});
+function computeLayout(nodes, edges) {
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({ rankdir: DAGRE_CONFIG.rankdir, ranksep: DAGRE_CONFIG.ranksep, nodesep: DAGRE_CONFIG.nodesep });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const node of nodes) {
+        g.setNode(node.id, { width: node.width, height: node.height });
+    }
+    for (const edge of edges) {
+        g.setEdge(edge.source, edge.target, { label: edge.label });
+    }
+    dagre.layout(g);
+    const layoutNodes = nodes.map((node) => {
+        const dagreNode = g.node(node.id);
+        return {
+            ...node,
+            x: dagreNode?.x ?? 0,
+            y: dagreNode?.y ?? 0,
+        };
+    });
+    const layoutEdges = edges.map((edge) => {
+        const dagreEdge = g.edge(edge.source, edge.target);
+        return {
+            points: dagreEdge?.points ?? [],
+            label: edge.label,
+        };
+    });
+    const graphMeta = g.graph();
+    const width = graphMeta?.width ?? 400;
+    const height = graphMeta?.height ?? 300;
+    return { layoutNodes, layoutEdges, width, height };
+}
+// ---------------------------------------------------------------------------
+// SVG sub-components
+// ---------------------------------------------------------------------------
+function NodeRect({ node }) {
+    const isTerminal = node.category === "start" || node.category === "end";
+    const fill = isTerminal
+        ? "var(--stgm-muted, #f5f5f5)"
+        : "var(--stgm-background, #fff)";
+    const stroke = CATEGORY_COLORS[node.category];
+    const rx = isTerminal ? node.height / 2 : 6;
+    return (_jsxs("g", { children: [_jsx("rect", { x: node.x - node.width / 2, y: node.y - node.height / 2, width: node.width, height: node.height, rx: rx, ry: rx, fill: fill, stroke: stroke, strokeWidth: isTerminal ? 1.5 : 2 }), _jsx("text", { x: node.x, y: node.y, textAnchor: "middle", dominantBaseline: "central", fontSize: isTerminal ? 11 : 12, fontFamily: "var(--stgm-font-sans, system-ui)", fontWeight: isTerminal ? 400 : 500, fill: "var(--stgm-foreground, #1a1a2e)", children: truncateLabel(node.label, 20) })] }));
+}
+function EdgePath({ edge }) {
+    if (edge.points.length < 2)
+        return null;
+    const d = edge.points
+        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+        .join(" ");
+    return (_jsx("path", { d: d, fill: "none", stroke: "var(--stgm-border, #d4d4d8)", strokeWidth: 1.5, markerEnd: "url(#arrowhead)" }));
+}
+function truncateLabel(label, maxLen) {
+    if (label.length <= maxLen)
+        return label;
+    return label.slice(0, maxLen - 1) + "\u2026";
+}
+//# sourceMappingURL=WorkflowTopologyGraph.js.map

package/workflow/WorkflowTopologyGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowTopologyGraph.js","sourceRoot":"","sources":["../../src/workflow/WorkflowTopologyGraph.tsx"],"names":[],"mappings":"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"}

package/workflow/WorkflowYamlEditor.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties } from "react";
+import { type Diagnostic } from "@codemirror/lint";
+/** Props for {@link WorkflowYamlEditor}. */
+export interface WorkflowYamlEditorProps {
+    /** Current YAML content. */
+    readonly value: string;
+    /** Called when the editor content changes. */
+    readonly onChange?: (value: string) => void;
+    /** Validation diagnostics to display as inline markers. */
+    readonly diagnostics?: readonly Diagnostic[];
+    /** Whether the editor is read-only. @default false */
+    readonly readOnly?: boolean;
+    /** Additional CSS class names for the root container. */
+    readonly className?: string;
+    /** Additional inline styles for the root container. */
+    readonly style?: CSSProperties;
+}
+/**
+ * Schema-aware YAML editor built on CodeMirror 6.
+ *
+ * Provides syntax highlighting, line numbers, bracket matching,
+ * code folding, undo/redo, and inline diagnostic markers driven by
+ * external validation (via the `diagnostics` prop).
+ *
+ * Themed via `--stgm-*` CSS custom properties to respect the host
+ * application's design tokens.
+ *
+ * This is an optional SDK component — it requires CodeMirror peer
+ * dependencies which are tree-shaken when not imported (DD-013).
+ *
+ * @example
+ * ```tsx
+ * <WorkflowYamlEditor
+ *   value={yaml}
+ *   onChange={setYaml}
+ *   diagnostics={diagnostics}
+ * />
+ * ```
+ *
+ * @since T10 (YAML Editor with Graph Preview)
+ */
+export declare const WorkflowYamlEditor: import("react").NamedExoticComponent<WorkflowYamlEditorProps>;
+//# sourceMappingURL=WorkflowYamlEditor.d.ts.map

package/workflow/WorkflowYamlEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowYamlEditor.d.ts","sourceRoot":"","sources":["../../src/workflow/WorkflowYamlEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAc,KAAK,UAAU,EAAkB,MAAM,kBAAkB,CAAC;AAI/E,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2DAA2D;IAC3D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7C,sDAAsD;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,kBAAkB,+DAwH7B,CAAC"}

package/workflow/WorkflowYamlEditor.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, memo, } from "react";
+import { cn } from "@stigmer/theme";
+import { EditorState, Compartment } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, highlightSpecialChars } from "@codemirror/view";
+import { yaml } from "@codemirror/lang-yaml";
+import { syntaxHighlighting, HighlightStyle, bracketMatching, indentOnInput, foldGutter } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { lintGutter, setDiagnostics } from "@codemirror/lint";
+import { defaultKeymap, indentWithTab, history, historyKeymap } from "@codemirror/commands";
+import { autocompletion } from "@codemirror/autocomplete";
+/**
+ * Schema-aware YAML editor built on CodeMirror 6.
+ *
+ * Provides syntax highlighting, line numbers, bracket matching,
+ * code folding, undo/redo, and inline diagnostic markers driven by
+ * external validation (via the `diagnostics` prop).
+ *
+ * Themed via `--stgm-*` CSS custom properties to respect the host
+ * application's design tokens.
+ *
+ * This is an optional SDK component — it requires CodeMirror peer
+ * dependencies which are tree-shaken when not imported (DD-013).
+ *
+ * @example
+ * ```tsx
+ * <WorkflowYamlEditor
+ *   value={yaml}
+ *   onChange={setYaml}
+ *   diagnostics={diagnostics}
+ * />
+ * ```
+ *
+ * @since T10 (YAML Editor with Graph Preview)
+ */
+export const WorkflowYamlEditor = memo(function WorkflowYamlEditor({ value, onChange, diagnostics, readOnly = false, className, style, }) {
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    const readOnlyCompartment = useRef(new Compartment());
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const isInternalUpdate = useRef(false);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const updateListener = EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+                isInternalUpdate.current = true;
+                onChangeRef.current?.(update.state.doc.toString());
+            }
+        });
+        const state = EditorState.create({
+            doc: value,
+            extensions: [
+                lineNumbers(),
+                highlightActiveLine(),
+                highlightSpecialChars(),
+                drawSelection(),
+                bracketMatching(),
+                indentOnInput(),
+                foldGutter(),
+                history(),
+                yaml(),
+                syntaxHighlighting(stigmerHighlightStyle, { fallback: true }),
+                autocompletion(),
+                lintGutter(),
+                keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+                readOnlyCompartment.current.of(EditorState.readOnly.of(readOnly)),
+                stigmerTheme,
+                updateListener,
+            ],
+        });
+        const view = new EditorView({
+            state,
+            parent: containerRef.current,
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+    // Sync external value changes into the editor
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        if (isInternalUpdate.current) {
+            isInternalUpdate.current = false;
+            return;
+        }
+        const currentDoc = view.state.doc.toString();
+        if (currentDoc !== value) {
+            view.dispatch({
+                changes: {
+                    from: 0,
+                    to: currentDoc.length,
+                    insert: value,
+                },
+            });
+        }
+    }, [value]);
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        view.dispatch({
+            effects: readOnlyCompartment.current.reconfigure(EditorState.readOnly.of(readOnly)),
+        });
+    }, [readOnly]);
+    // Sync diagnostics into CodeMirror's lint system
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        const cmDiags = diagnostics
+            ? diagnostics.map((d) => ({
+                ...d,
+                from: Math.min(d.from, view.state.doc.length),
+                to: Math.min(d.to, view.state.doc.length),
+            }))
+            : [];
+        view.dispatch(setDiagnostics(view.state, cmDiags));
+    }, [diagnostics]);
+    return (_jsx("div", { ref: containerRef, className: cn("stgm-yaml-editor overflow-auto rounded-md border border-border bg-background font-mono text-sm", className), style: style }));
+});
+// ---------------------------------------------------------------------------
+// Syntax highlighting: maps lezer tags to --stgm-syntax-* CSS variables
+// ---------------------------------------------------------------------------
+const stigmerHighlightStyle = HighlightStyle.define([
+    { tag: tags.propertyName, color: "var(--stgm-syntax-property, #0550ae)" },
+    { tag: tags.tagName, color: "var(--stgm-syntax-tag, #cf222e)" },
+    { tag: tags.keyword, color: "var(--stgm-syntax-keyword, #8250df)", fontWeight: "bold" },
+    { tag: tags.string, color: "var(--stgm-syntax-string, #0a3069)" },
+    { tag: tags.number, color: "var(--stgm-syntax-number, #953800)" },
+    { tag: [tags.bool, tags.null], color: "var(--stgm-syntax-bool, #8250df)" },
+    { tag: tags.atom, color: "var(--stgm-syntax-atom, #cf222e)" },
+    { tag: tags.comment, color: "var(--stgm-syntax-comment, #6e7781)", fontStyle: "italic" },
+    { tag: tags.meta, color: "var(--stgm-syntax-meta, #8250df)" },
+    { tag: tags.name, color: "var(--stgm-foreground, #1a1a2e)" },
+    { tag: tags.definition(tags.name), color: "var(--stgm-syntax-property, #0550ae)" },
+    { tag: tags.separator, color: "var(--stgm-muted-foreground, #737373)" },
+    { tag: tags.punctuation, color: "var(--stgm-muted-foreground, #737373)" },
+]);
+// ---------------------------------------------------------------------------
+// CodeMirror theme bridge: maps --stgm-* tokens to editor styles
+// ---------------------------------------------------------------------------
+const stigmerTheme = EditorView.theme({
+    "&": {
+        height: "100%",
+        backgroundColor: "var(--stgm-background, #fff)",
+        color: "var(--stgm-foreground, #1a1a2e)",
+        fontSize: "13px",
+    },
+    ".cm-content": {
+        caretColor: "var(--stgm-foreground, #1a1a2e)",
+        fontFamily: "var(--stgm-font-mono, ui-monospace, monospace)",
+        padding: "8px 0",
+    },
+    ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: "var(--stgm-foreground, #1a1a2e)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+        backgroundColor: "var(--stgm-accent, #e0e7ff)",
+    },
+    ".cm-gutters": {
+        backgroundColor: "var(--stgm-muted, #f5f5f5)",
+        color: "var(--stgm-muted-foreground, #737373)",
+        border: "none",
+        borderRight: "1px solid var(--stgm-border, #e5e5e5)",
+    },
+    ".cm-activeLineGutter": {
+        backgroundColor: "var(--stgm-accent, #e0e7ff)",
+    },
+    ".cm-activeLine": {
+        backgroundColor: "color-mix(in srgb, var(--stgm-accent, #e0e7ff) 30%, transparent)",
+    },
+    ".cm-foldPlaceholder": {
+        backgroundColor: "var(--stgm-muted, #f5f5f5)",
+        border: "1px solid var(--stgm-border, #e5e5e5)",
+        color: "var(--stgm-muted-foreground, #737373)",
+    },
+    ".cm-tooltip": {
+        backgroundColor: "var(--stgm-popover, #fff)",
+        color: "var(--stgm-popover-foreground, #1a1a2e)",
+        border: "1px solid var(--stgm-border, #e5e5e5)",
+        borderRadius: "6px",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+    },
+    ".cm-tooltip-autocomplete": {
+        "& > ul > li[aria-selected]": {
+            backgroundColor: "var(--stgm-accent, #e0e7ff)",
+            color: "var(--stgm-accent-foreground, #1a1a2e)",
+        },
+    },
+    ".cm-diagnostic-error": {
+        borderLeft: "3px solid var(--stgm-destructive, #ef4444)",
+    },
+    ".cm-diagnostic-warning": {
+        borderLeft: "3px solid var(--stgm-warning, #f59e0b)",
+    },
+    ".cm-diagnostic-info": {
+        borderLeft: "3px solid var(--stgm-primary, #6366f1)",
+    },
+    ".cm-lint-marker-error": {
+        content: "'●'",
+        color: "var(--stgm-destructive, #ef4444)",
+    },
+    ".cm-lint-marker-warning": {
+        content: "'●'",
+        color: "var(--stgm-warning, #f59e0b)",
+    },
+});
+//# sourceMappingURL=WorkflowYamlEditor.js.map

package/workflow/WorkflowYamlEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowYamlEditor.js","sourceRoot":"","sources":["../../src/workflow/WorkflowYamlEditor.tsx"],"names":[],"mappings":"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"}

package/workflow/__tests__/starter-workflow-yaml.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=starter-workflow-yaml.test.d.ts.map

package/workflow/__tests__/starter-workflow-yaml.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-workflow-yaml.test.d.ts","sourceRoot":"","sources":["../../../src/workflow/__tests__/starter-workflow-yaml.test.ts"],"names":[],"mappings":""}

package/workflow/__tests__/starter-workflow-yaml.test.js

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { STARTER_WORKFLOW_YAML } from "../starter-workflow-yaml";
+import { yamlToGraph, graphToYaml } from "../workflow-graph-conversions";
+import { parseWorkflowYaml } from "../serialize-workflow-yaml";
+import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model";
+describe("STARTER_WORKFLOW_YAML", () => {
+    it("parses via yamlToGraph without throwing", () => {
+        const graph = yamlToGraph(STARTER_WORKFLOW_YAML);
+        expect(graph.document.namespace).toBe("default");
+        expect(graph.document.name).toBe("my-workflow");
+        expect(graph.document.version).toBe("0.1.0");
+        expect(graph.document.dsl).toBe("1.0.0");
+        expect(graph.description).toBe("A new workflow");
+        const taskNodes = graph.nodes.filter((n) => n.id !== START_NODE_ID && n.id !== END_NODE_ID);
+        expect(taskNodes).toHaveLength(1);
+        expect(taskNodes[0].taskName).toBe("step_1");
+    });
+    it("parses via parseWorkflowYaml without throwing", () => {
+        const input = parseWorkflowYaml(STARTER_WORKFLOW_YAML, "test-org");
+        expect(input.name).toBe("my-workflow");
+        expect(input.org).toBe("test-org");
+        expect(input.document?.namespace).toBe("default");
+        expect(input.document?.name).toBe("my-workflow");
+        expect(input.document?.version).toBe("0.1.0");
+        expect(input.tasks).toBeDefined();
+        expect(input.tasks).toHaveLength(1);
+        expect(input.tasks[0].name).toBe("step_1");
+    });
+    it("round-trips through graphToYaml -> yamlToGraph", () => {
+        const original = yamlToGraph(STARTER_WORKFLOW_YAML);
+        const serialized = graphToYaml(original);
+        const roundTripped = yamlToGraph(serialized);
+        expect(roundTripped.document.namespace).toBe(original.document.namespace);
+        expect(roundTripped.document.name).toBe(original.document.name);
+        expect(roundTripped.document.version).toBe(original.document.version);
+        expect(roundTripped.document.dsl).toBe(original.document.dsl);
+        const originalTasks = original.nodes.filter((n) => n.id !== START_NODE_ID && n.id !== END_NODE_ID);
+        const roundTrippedTasks = roundTripped.nodes.filter((n) => n.id !== START_NODE_ID && n.id !== END_NODE_ID);
+        expect(roundTrippedTasks).toHaveLength(originalTasks.length);
+        expect(roundTrippedTasks[0].taskName).toBe(originalTasks[0].taskName);
+        expect(roundTrippedTasks[0].kind).toBe(originalTasks[0].kind);
+    });
+});
+//# sourceMappingURL=starter-workflow-yaml.test.js.map

package/workflow/__tests__/starter-workflow-yaml.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-workflow-yaml.test.js","sourceRoot":"","sources":["../../../src/workflow/__tests__/starter-workflow-yaml.test.ts"],"names":[],"mappings":"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"}

package/workflow/canvas-constants.d.ts

@@ -0,0 +1,56 @@
+import type { TopologyNodeCategory } from "./useWorkflowTopology";
+import type { TaskKindCategory } from "./types";
+/**
+ * Category-to-color mapping using `--stgm-*` CSS custom properties.
+ *
+ * Shared between the read-only SVG topology graph and the interactive
+ * React Flow canvas editor to ensure consistent visual language.
+ */
+export declare const CATEGORY_COLORS: Readonly<Record<TopologyNodeCategory, string>>;
+/** Dagre layout configuration for top-to-bottom DAG rendering. */
+export declare const DAGRE_CONFIG: {
+    readonly rankdir: "TB";
+    readonly ranksep: 60;
+    readonly nodesep: 30;
+};
+/** Default padding around the SVG viewBox in the read-only graph. */
+export declare const GRAPH_PADDING = 40;
+/** Node dimensions for the read-only topology graph. */
+export declare const TOPOLOGY_NODE_WIDTH = 180;
+export declare const TOPOLOGY_NODE_HEIGHT = 40;
+/** Node dimensions for canvas task nodes (wider to accommodate controls). */
+export declare const CANVAS_NODE_WIDTH = 220;
+export declare const CANVAS_NODE_HEIGHT = 56;
+/** Sentinel node dimensions (Start/End pills). */
+export declare const SENTINEL_NODE_WIDTH = 100;
+export declare const SENTINEL_NODE_HEIGHT = 36;
+/** React Flow handle (port) positions for canvas nodes. */
+export declare const HANDLE_POSITIONS: {
+    readonly input: {
+        readonly x: 0.5;
+        readonly y: 0;
+    };
+    readonly output: {
+        readonly x: 0.5;
+        readonly y: 1;
+    };
+};
+/** Human-readable display names for task kind categories. */
+export declare const CATEGORY_DISPLAY_NAMES: Readonly<Record<TaskKindCategory, string>>;
+/**
+ * Identifier pattern for workflow task names.
+ *
+ * Mirrors the `buf.validate` constraint on `WorkflowTask.name` in
+ * `ai/stigmer/agentic/workflow/v1/spec.proto`.
+ */
+export declare const TASK_NAME_PATTERN: RegExp;
+/** User-facing error message when a task name fails {@link TASK_NAME_PATTERN}. */
+export declare const TASK_NAME_PATTERN_ERROR = "Must start with a letter or underscore, alphanumeric/underscore only";
+/**
+ * Rendering order for task kind categories in palettes and pickers.
+ *
+ * AI tasks first (most common), then control flow, invocation, data,
+ * governance, events. Unspecified is a catch-all at the end.
+ */
+export declare const CATEGORY_ORDER: readonly TaskKindCategory[];
+//# sourceMappingURL=canvas-constants.d.ts.map

package/workflow/canvas-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-constants.d.ts","sourceRoot":"","sources":["../../src/workflow/canvas-constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAU1E,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,qEAAqE;AACrE,eAAO,MAAM,aAAa,KAAK,CAAC;AAEhC,wDAAwD;AACxD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,kDAAkD;AAClD,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,2DAA2D;AAC3D,eAAO,MAAM,gBAAgB;;;;;;;;;CAGnB,CAAC;AAEX,6DAA6D;AAC7D,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAQ7E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAE5D,kFAAkF;AAClF,eAAO,MAAM,uBAAuB,yEACoC,CAAC;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,gBAAgB,EAQrD,CAAC"}

package/workflow/canvas-constants.js

@@ -0,0 +1,74 @@
+/**
+ * Category-to-color mapping using `--stgm-*` CSS custom properties.
+ *
+ * Shared between the read-only SVG topology graph and the interactive
+ * React Flow canvas editor to ensure consistent visual language.
+ */
+export const CATEGORY_COLORS = {
+    start: "var(--stgm-muted-foreground, #737373)",
+    end: "var(--stgm-muted-foreground, #737373)",
+    ai: "var(--stgm-chart-purple, #8b5cf6)",
+    control_flow: "var(--stgm-chart-blue, #3b82f6)",
+    invocation: "var(--stgm-muted-foreground, #737373)",
+    data: "var(--stgm-chart-green, #22c55e)",
+    governance: "var(--stgm-chart-orange, #f97316)",
+    event: "var(--stgm-chart-yellow, #eab308)",
+    unspecified: "var(--stgm-muted-foreground, #737373)",
+};
+/** Dagre layout configuration for top-to-bottom DAG rendering. */
+export const DAGRE_CONFIG = {
+    rankdir: "TB",
+    ranksep: 60,
+    nodesep: 30,
+};
+/** Default padding around the SVG viewBox in the read-only graph. */
+export const GRAPH_PADDING = 40;
+/** Node dimensions for the read-only topology graph. */
+export const TOPOLOGY_NODE_WIDTH = 180;
+export const TOPOLOGY_NODE_HEIGHT = 40;
+/** Node dimensions for canvas task nodes (wider to accommodate controls). */
+export const CANVAS_NODE_WIDTH = 220;
+export const CANVAS_NODE_HEIGHT = 56;
+/** Sentinel node dimensions (Start/End pills). */
+export const SENTINEL_NODE_WIDTH = 100;
+export const SENTINEL_NODE_HEIGHT = 36;
+/** React Flow handle (port) positions for canvas nodes. */
+export const HANDLE_POSITIONS = {
+    input: { x: 0.5, y: 0 },
+    output: { x: 0.5, y: 1 },
+};
+/** Human-readable display names for task kind categories. */
+export const CATEGORY_DISPLAY_NAMES = {
+    ai: "AI",
+    control_flow: "Control Flow",
+    invocation: "Invocation",
+    data: "Data",
+    governance: "Governance",
+    event: "Event",
+    unspecified: "Other",
+};
+/**
+ * Identifier pattern for workflow task names.
+ *
+ * Mirrors the `buf.validate` constraint on `WorkflowTask.name` in
+ * `ai/stigmer/agentic/workflow/v1/spec.proto`.
+ */
+export const TASK_NAME_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+/** User-facing error message when a task name fails {@link TASK_NAME_PATTERN}. */
+export const TASK_NAME_PATTERN_ERROR = "Must start with a letter or underscore, alphanumeric/underscore only";
+/**
+ * Rendering order for task kind categories in palettes and pickers.
+ *
+ * AI tasks first (most common), then control flow, invocation, data,
+ * governance, events. Unspecified is a catch-all at the end.
+ */
+export const CATEGORY_ORDER = [
+    "ai",
+    "control_flow",
+    "invocation",
+    "data",
+    "governance",
+    "event",
+    "unspecified",
+];
+//# sourceMappingURL=canvas-constants.js.map

package/workflow/canvas-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-constants.js","sourceRoot":"","sources":["../../src/workflow/canvas-constants.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmD;IAC7E,KAAK,EAAE,uCAAuC;IAC9C,GAAG,EAAE,uCAAuC;IAC5C,EAAE,EAAE,mCAAmC;IACvC,YAAY,EAAE,iCAAiC;IAC/C,UAAU,EAAE,uCAAuC;IACnD,IAAI,EAAE,kCAAkC;IACxC,UAAU,EAAE,mCAAmC;IAC/C,KAAK,EAAE,mCAAmC;IAC1C,WAAW,EAAE,uCAAuC;CACrD,CAAC;AAEF,kEAAkE;AAClE,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,IAAa;IACtB,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;CACH,CAAC;AAEX,qEAAqE;AACrE,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,CAAC;AAEhC,wDAAwD;AACxD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,6EAA6E;AAC7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AACrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAErC,kDAAkD;AAClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,2DAA2D;AAC3D,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;IACvB,MAAM,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;CAChB,CAAC;AAEX,6DAA6D;AAC7D,MAAM,CAAC,MAAM,sBAAsB,GAA+C;IAChF,EAAE,EAAE,IAAI;IACR,YAAY,EAAE,cAAc;IAC5B,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,OAAO;CACrB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,0BAA0B,CAAC;AAE5D,kFAAkF;AAClF,MAAM,CAAC,MAAM,uBAAuB,GAClC,sEAAsE,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgC;IACzD,IAAI;IACJ,cAAc;IACd,YAAY;IACZ,MAAM;IACN,YAAY;IACZ,OAAO;IACP,aAAa;CACd,CAAC"}

package/workflow/canvas-icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared 14×14 inline SVG icons for the workflow canvas editor.
+ *
+ * Used by {@link CanvasTaskNode} (hover buttons + NodeToolbar) and
+ * {@link CanvasContextMenu} to maintain visual consistency across
+ * all node action surfaces.
+ *
+ * @internal Not exported from the SDK barrel — implementation detail.
+ */
+export declare function TrashIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function DuplicateIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function PlusIcon(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=canvas-icons.d.ts.map

package/workflow/canvas-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-icons.d.ts","sourceRoot":"","sources":["../../src/workflow/canvas-icons.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,wBAAgB,SAAS,4CAMxB;AAED,wBAAgB,aAAa,4CAO5B;AAED,wBAAgB,QAAQ,4CAMvB"}