@parallelworks/ui 0.40.0 → 0.41.0

package/README.md

@@ -99,6 +99,12 @@ const engine = { ...createWorkflowEngine(), editing: workflowPackage }
 
 Without `editing`, the graph lays its jobs out by their needs alone.
 
+The graph draws thousands of jobs, and subworkflows opened inline several levels deep. Layout is
+near linear in jobs and needs; hovering a job re-renders only the nodes and connectors whose
+highlight changes, and panning, zooming and a running run's clock re-render none. The view fits
+the whole graph, zooms out to 1% to show the shape of the largest, and in to 200% to read a node;
+the wheel zooms by the same factor at every scale, about the pointer.
+
 The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
 `@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own
 paths (`JOB_YAML_PATH`, `STEP_YAML_PATH`, `INPUT_YAML_PATH`, `SETTINGS_YAML_PATH`); `settingsSchemas`

package/dist/ai/adapter/memoryStore.js

@@ -1,4 +1,5 @@
 import { ChatAdapterError } from "./types.js";
+import { applyPartDelta, finalizeParts } from "../core/parts.js";
 //#region src/ai/adapter/memoryStore.ts
 function newId() {
 	return crypto.randomUUID();
@@ -103,6 +104,7 @@ function createMemoryConversationStore(options) {
 			return async (req, handlers, signal) => {
 				let partialContent = "";
 				let partialReasoning = "";
+				let parts = [];
 				const wrappedHandlers = {
 					...handlers,
 					onContent: (chunk) => {
@@ -112,6 +114,10 @@ function createMemoryConversationStore(options) {
 					onReasoning: (chunk) => {
 						partialReasoning += chunk;
 						handlers.onReasoning?.(chunk);
+					},
+					onPart: (delta) => {
+						parts = applyPartDelta(parts, delta);
+						handlers.onPart?.(delta);
 					}
 				};
 				recordUser(req);
@@ -126,6 +132,7 @@ function createMemoryConversationStore(options) {
 						...result.reasoning ? { reasoning: result.reasoning } : {},
 						...result.responsesOutput.length ? { responsesOutput: result.responsesOutput } : {},
 						...result.toolCalls.length ? { toolCalls: result.toolCalls } : {},
+						...parts.length ? { parts: finalizeParts(parts) } : {},
 						timestamp: (/* @__PURE__ */ new Date()).toISOString()
 					});
 					return {

package/dist/ai/adapter/mock/mockAdapter.js

@@ -5,6 +5,7 @@ var CANNED_REPLIES = [
 	"Everything you see is generated locally. The mock adapter implements the same `ChatAdapter` interface as the OpenAI-compatible adapter and any backend's own, so the UI can't tell the difference.\n\n```ts\nconst adapter = createMockChatAdapter()\n```\n\nMarkdown, `inline code`, and code blocks render through the same pipeline.",
 	"Branching works too: edit one of your earlier messages or hit regenerate on a reply, then use the arrows to flip between branches."
 ];
+var TOOL_REPLY = "Two clusters are running: **gpu-a** with 4 nodes, and **cpu-batch**, idle and scaled to zero.";
 var THINKING_PREAMBLE = "Thinking about the question, weighing a few canned options, and picking the next reply in the rotation...";
 function sleep(ms, signal) {
 	return new Promise((resolve, reject) => {
@@ -30,21 +31,32 @@ function createMockChatAdapter(options) {
 		conversations: store.conversations,
 		models: { async list() {
 			return {
-				models: [{
-					id: "mock:local/canned-small",
-					object: "model",
-					created: 0,
-					owned_by: "mock",
-					provider: "Mock Provider",
-					tool_calling_mode: "none"
-				}, {
-					id: "mock:local/canned-thinking",
-					object: "model",
-					created: 0,
-					owned_by: "mock",
-					provider: "Mock Provider",
-					tool_calling_mode: "none"
-				}],
+				models: [
+					{
+						id: "mock:local/canned-small",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "none"
+					},
+					{
+						id: "mock:local/canned-thinking",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "none"
+					},
+					{
+						id: "mock:local/canned-tools",
+						object: "model",
+						created: 0,
+						owned_by: "mock",
+						provider: "Mock Provider",
+						tool_calling_mode: "native"
+					}
+				],
 				unreachableSessions: [],
 				providerIssues: []
 			};
@@ -57,8 +69,31 @@ function createMockChatAdapter(options) {
 				reasoning += word;
 				handlers.onReasoning?.(word);
 			}
-			const reply = CANNED_REPLIES[replyIndex % CANNED_REPLIES.length] ?? "";
-			replyIndex++;
+			const usesTools = req.model.includes("tools");
+			if (usesTools) {
+				const id = `call-${crypto.randomUUID()}`;
+				handlers.onPart?.({
+					type: "tool_start",
+					id,
+					name: "list_clusters",
+					args: "{}"
+				});
+				await sleep(900, signal);
+				handlers.onPart?.({
+					type: "tool_end",
+					id,
+					result: JSON.stringify([{
+						name: "gpu-a",
+						status: "on",
+						nodes: 4
+					}, {
+						name: "cpu-batch",
+						status: "on",
+						nodes: 0
+					}])
+				});
+			}
+			const reply = usesTools ? TOOL_REPLY : CANNED_REPLIES[replyIndex++ % CANNED_REPLIES.length] ?? "";
 			await sleep(250, signal);
 			let content = "";
 			for (const word of reply.split(/(?<= )/)) {

package/dist/ai/adapter/openai/createOpenAIStream.js

@@ -27,7 +27,7 @@ function createOpenAICompatibleStream(config) {
 		if (!res.ok) throw new ChatAdapterError(await errorMessageFromResponse(res), { status: res.status });
 		const reader = res.body?.getReader();
 		if (!reader) throw new ChatAdapterError("No response body");
-		return processSSEStream(reader, handlers.onContent, void 0, void 0, handlers.onReasoning, handlers.onMessageId, useResponses ? parseResponsesSSELine : void 0);
+		return processSSEStream(reader, handlers.onContent, void 0, void 0, handlers.onReasoning, handlers.onMessageId, useResponses ? parseResponsesSSELine : void 0, handlers.onPart);
 	};
 }
 //#endregion

package/dist/ai/adapter/openai/index.d.ts

@@ -3,4 +3,4 @@ export { apiErrorMessage, errorMessageFromResponse, statusFallbackMessage, } fro
 export { createOpenAIChatAdapter, type OpenAIChatAdapterOptions, } from './openaiAdapter.js';
 export { buildResponsesRequestBody, parseResponsesSSELine, } from './responses.js';
 export { type ParsedSSELine, parseSSELine, processSSEStream, type SSELineParser, } from './sse.js';
-export type { CompletionChunk, CompletionChunkChoice, CompletionMessage, CompletionRequest, ModelsWireResponse, } from './wire.js';
+export type { CompletionChunk, CompletionChunkChoice, CompletionMessage, CompletionRequest, ModelsWireResponse, ToolResultChunk, } from './wire.js';

package/dist/ai/adapter/openai/sse.d.ts

@@ -1,10 +1,13 @@
 import type { ToolCall, ToolCallDelta } from '../../types.js';
+import type { PartDelta } from '../types.js';
+import type { ToolResultChunk } from './wire.js';
 export type ParsedSSELine = {
     id?: string | undefined;
     messageId?: string | undefined;
     content?: string | undefined;
     reasoningContent?: string | undefined;
     toolCalls?: ToolCallDelta[] | undefined;
+    toolResult?: ToolResultChunk | undefined;
     finishReason?: string | null | undefined;
     model?: string | undefined;
     error?: string | undefined;
@@ -12,8 +15,11 @@ export type ParsedSSELine = {
 } | null;
 export type SSELineParser = (line: string) => ParsedSSELine;
 export declare function parseSSELine(line: string): ParsedSSELine;
-/** Process an SSE stream from a ReadableStream reader */
-export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser): Promise<{
+/** Process an SSE stream from a ReadableStream reader. With `onPart`, tool
+ *  calls stream as parts; a call the gateway answered with a result is left
+ *  off the returned `toolCalls`, which then hold only calls the caller must
+ *  run. */
+export declare function processSSEStream(reader: ReadableStreamDefaultReader<Uint8Array>, onContent: (content: string) => void, onToolCall?: (toolCalls: ToolCall[]) => void, onError?: (error: string) => void, onReasoning?: (reasoning: string) => void, onMessageId?: (messageId: string) => void, parseLine?: SSELineParser, onPart?: (delta: PartDelta) => void): Promise<{
     content: string;
     messageId: string;
     toolCalls: ToolCall[];

package/dist/ai/adapter/openai/sse.js

@@ -14,6 +14,7 @@ function parseSSELine(line) {
 			content: choice?.delta?.content,
 			reasoningContent: choice?.delta?.reasoning_content,
 			toolCalls: choice?.delta?.tool_calls ?? void 0,
+			toolResult: chunk.toolResult,
 			finishReason: choice?.finish_reason,
 			model: chunk.model
 		};
@@ -21,8 +22,11 @@ function parseSSELine(line) {
 		return null;
 	}
 }
-/** Process an SSE stream from a ReadableStream reader */
-async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine) {
+/** Process an SSE stream from a ReadableStream reader. With `onPart`, tool
+*  calls stream as parts; a call the gateway answered with a result is left
+*  off the returned `toolCalls`, which then hold only calls the caller must
+*  run. */
+async function processSSEStream(reader, onContent, onToolCall, onError, onReasoning, onMessageId, parseLine = parseSSELine, onPart) {
 	const decoder = new TextDecoder();
 	let assistantContent = "";
 	let assistantReasoning = "";
@@ -31,6 +35,19 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 	let resolvedModel = null;
 	let responsesOutput = [];
 	const toolCallsMap = /* @__PURE__ */ new Map();
+	const startedToolCalls = /* @__PURE__ */ new Set();
+	const answeredToolCalls = /* @__PURE__ */ new Set();
+	const startToolCall = (index) => {
+		const tc = toolCallsMap.get(index);
+		if (!onPart || !tc?.id || !tc.name || startedToolCalls.has(index)) return;
+		startedToolCalls.add(index);
+		onPart({
+			type: "tool_start",
+			id: tc.id,
+			name: tc.name,
+			args: tc.arguments
+		});
+	};
 	let lineBuffer = "";
 	while (true) {
 		const result = await reader.read();
@@ -64,13 +81,32 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 					if (tc.index === void 0) continue;
 					const existing = toolCallsMap.get(tc.index);
 					if (existing) {
-						if (tc.function?.arguments) existing.arguments += tc.function.arguments;
+						existing.id ||= tc.id || "";
+						existing.name ||= tc.function?.name || "";
+						if (tc.function?.arguments) {
+							existing.arguments += tc.function.arguments;
+							if (startedToolCalls.has(tc.index)) onPart?.({
+								type: "tool_update",
+								id: existing.id,
+								args: tc.function.arguments
+							});
+						}
 					} else toolCallsMap.set(tc.index, {
 						id: tc.id || "",
 						type: tc.type || "function",
 						name: tc.function?.name || "",
 						arguments: tc.function?.arguments || ""
 					});
+					startToolCall(tc.index);
+				}
+				if (parsed.toolResult) {
+					answeredToolCalls.add(parsed.toolResult.toolCallId);
+					onPart?.({
+						type: "tool_end",
+						id: parsed.toolResult.toolCallId,
+						result: parsed.toolResult.content,
+						...parsed.toolResult.isError ? { isError: true } : {}
+					});
 				}
 			}
 		}
@@ -89,7 +125,7 @@ async function processSSEStream(reader, onContent, onToolCall, onError, onReason
 			if (parsed.finishReason) finishReason = parsed.finishReason;
 		}
 	}
-	const toolCalls = Array.from(toolCallsMap.values()).map((tc) => ({
+	const toolCalls = Array.from(toolCallsMap.values()).filter((tc) => !answeredToolCalls.has(tc.id)).map((tc) => ({
 		id: tc.id,
 		type: tc.type,
 		function: {

package/dist/ai/adapter/openai/wire.d.ts

@@ -30,9 +30,15 @@ export interface CompletionChunk {
     object?: string;
     created?: number;
     messageId?: string;
+    toolResult?: ToolResultChunk;
     choices?: CompletionChunkChoice[] | null;
     usage?: TokenUsage;
 }
+export interface ToolResultChunk {
+    toolCallId: string;
+    content: string;
+    isError?: boolean;
+}
 export interface ModelsWireResponse {
     object: string;
     data: ChatModel[] | null;

package/dist/ai/ai.css

@@ -471,8 +471,10 @@
   color: color-mix(in oklab, var(--theme-accent, #06354f) 70%, var(--theme-panel-bg, #fff));
 }
 
-/* The reply being written ends in the accent's caret. */
-.chat-thread [style*="--streamdown-caret"] > :last-child::after {
+/* The reply being written ends in the accent's caret. Matched by a class, not by the inline style
+   that sets the caret: a rule reaching past an element its style attribute selects makes every
+   inline style change anywhere on the page restyle that element's whole subtree. */
+.chat-thread .markdown-streaming > :last-child::after {
   color: var(--chat-accent);
 }
 

package/dist/ai/core/ChatProvider.js

@@ -1,4 +1,4 @@
-import { applyPartDelta, finalizeParts } from "./parts.js";
+import { applyPartDelta, finalizeParts, toolTurnMessages } from "./parts.js";
 import { chatReducer, initialState } from "./chatReducer.js";
 import { ChatConfigProvider, resolveChatConfig } from "./config.js";
 import { providerIssueFor } from "./providerIssues.js";
@@ -392,7 +392,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 			});
 		};
 		const apiMessages = [
-			...(isNewConversation ? [] : state.currentConversation?.messages || []).filter((m) => m.content || m.toolCalls?.length).map((m) => {
+			...(isNewConversation ? [] : state.currentConversation?.messages || []).filter((m) => m.content || m.toolCalls?.length || m.parts?.length).flatMap((m) => {
 				const msg = {
 					role: m.role,
 					content: m.content || null
@@ -401,7 +401,7 @@ function ChatProvider({ adapter, currentUser, navigation, notify, activeConversa
 				if (m.role === "assistant" && m.toolCalls?.length) msg.tool_calls = m.toolCalls;
 				if (m.role === "assistant" && m.responsesOutput?.length && m.model === state.selectedProvider) msg.responses_output = m.responsesOutput;
 				if (m.role === "tool" && m.toolCallId) msg.tool_call_id = m.toolCallId;
-				return msg;
+				return m.role === "assistant" ? toolTurnMessages(m.parts, msg) : [msg];
 			}),
 			...precedingApiMessages,
 			{

package/dist/ai/core/parts.d.ts

@@ -1,3 +1,4 @@
+import type { CompletionMessage } from '../adapter/openai/wire.js';
 import type { PartDelta } from '../adapter/types.js';
 import type { MessagePart } from '../types.js';
 /** Fold one streamed PartDelta into a parts timeline. Pure: returns a new
@@ -5,6 +6,10 @@ import type { MessagePart } from '../types.js';
  *  and the provider's local accumulation. Unknown target ids are dropped
  *  rather than invented — an end without a start has nothing to render. */
 export declare function applyPartDelta(parts: MessagePart[], delta: PartDelta): MessagePart[];
+/** The wire history for an assistant turn whose tool calls the gateway ran:
+ *  the calls, each result, then the answer. A turn with no finished tool
+ *  calls comes back as the answer alone. */
+export declare function toolTurnMessages(parts: MessagePart[] | null | undefined, answer: CompletionMessage): CompletionMessage[];
 /** A turn can end (completed or stopped) with tool calls still marked
  *  running — the transport died before their tool_end arrived. A stored
  *  message must not spin forever, so close them out as interrupted. */

package/dist/ai/core/parts.js

@@ -90,6 +90,33 @@ function applyPartDelta(parts, delta) {
 function isStreamedText(part) {
 	return part?.kind === "text" || part?.kind === "reasoning";
 }
+/** The wire history for an assistant turn whose tool calls the gateway ran:
+*  the calls, each result, then the answer. A turn with no finished tool
+*  calls comes back as the answer alone. */
+function toolTurnMessages(parts, answer) {
+	const calls = (parts ?? []).filter((p) => p.kind === "tool_call" && p.status !== "running" && p.result !== void 0);
+	if (calls.length === 0) return [answer];
+	return [
+		{
+			role: "assistant",
+			content: null,
+			tool_calls: calls.map((c) => ({
+				id: c.id,
+				type: "function",
+				function: {
+					name: c.name,
+					arguments: c.args
+				}
+			}))
+		},
+		...calls.map((c) => ({
+			role: "tool",
+			tool_call_id: c.id,
+			content: c.result
+		})),
+		...answer.content ? [answer] : []
+	];
+}
 /** A turn can end (completed or stopped) with tool calls still marked
 *  running — the transport died before their tool_end arrived. A stored
 *  message must not spin forever, so close them out as interrupted. */
@@ -101,4 +128,4 @@ function finalizeParts(parts) {
 	} : p);
 }
 //#endregion
-export { applyPartDelta, finalizeParts };
+export { applyPartDelta, finalizeParts, toolTurnMessages };

package/dist/ai/ui/Markdown.js

@@ -57,7 +57,10 @@ function Markdown({ children, isStreaming }) {
 		children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: isStreaming ? "streaming" : "static",
 			...isStreaming === void 0 ? {} : { isAnimating: isStreaming },
-			...isStreaming ? { caret: "block" } : {},
+			...isStreaming ? {
+				caret: "block",
+				className: "markdown-streaming"
+			} : {},
 			plugins,
 			rehypePlugins,
 			shikiTheme,

package/dist/graph/Connectors.d.ts

@@ -0,0 +1,11 @@
+import type { DrawnEdge } from './connectorGeometry.js';
+/**
+ * A graph level's connectors in three layers: lines behind the nodes, the lineage shown above the
+ * nodes outside it, and the dots above all. However many connectors there are, the lines are one
+ * path and the dots two, each dimming as one; only the lineage shown draws connectors of its own,
+ * and a hover re-renders only those.
+ */
+export declare const ConnectorLayers: import("react").MemoExoticComponent<({ edges, zBase, }: {
+    edges: DrawnEdge[];
+    zBase: number;
+}) => import("react").JSX.Element>;

package/dist/graph/Connectors.js

@@ -0,0 +1,158 @@
+import { highlightOf, useLineage, useLineageStore } from "./lineage.js";
+import { dimClasses } from "./GraphNode.js";
+import { memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/Connectors.tsx
+var CONNECTOR_COLOR = "var(--theme-border)";
+var HIGHLIGHT_COLOR = "var(--theme-element)";
+var PANEL_COLOR = "var(--theme-panel-bg)";
+var STROKE = 6;
+var KEYFRAMES = [
+	"@keyframes dag-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}",
+	"@keyframes dag-draw-out{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}",
+	`@keyframes dag-light{from{fill:${CONNECTOR_COLOR}}to{fill:${HIGHLIGHT_COLOR}}}`,
+	`@keyframes dag-unlight{from{fill:${HIGHLIGHT_COLOR}}to{fill:${CONNECTOR_COLOR}}}`
+].join("");
+/** Plays the named keyframes once `delay` seconds pass, holding the first until then and the last after. */
+var play = (name, seconds, delay) => ({ animation: `${name} ${seconds}s ease ${delay}s both` });
+var LitEdge = memo(function LitEdge({ d, reversed, highlight, animT }) {
+	const { lit, delay, back } = highlightOf(highlight);
+	return /* @__PURE__ */ jsx("path", {
+		d: back ? reversed : d,
+		pathLength: 1,
+		fill: "none",
+		stroke: HIGHLIGHT_COLOR,
+		strokeWidth: STROKE,
+		strokeDasharray: "1 1",
+		strokeDashoffset: lit ? 0 : 1,
+		style: play(lit ? "dag-draw-in" : "dag-draw-out", animT, delay)
+	});
+});
+var LitDot = memo(function LitDot({ x, y, highlight, animT }) {
+	const { lit, delay } = highlightOf(highlight);
+	return /* @__PURE__ */ jsx("circle", {
+		cx: x,
+		cy: y,
+		r: 8,
+		fill: lit ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
+		style: play(lit ? "dag-light" : "dag-unlight", animT, delay)
+	});
+});
+function LitEdges({ edges }) {
+	const lineage = useLineageStore();
+	useLineage((l) => l.version, 0);
+	if (!lineage?.showing) return null;
+	const { animT } = lineage;
+	const lines = [];
+	const lit = [];
+	for (const { from, to, path } of edges) {
+		const highlight = lineage.between(from, to);
+		if (highlight) {
+			if (lineage.hovering) lines.push(path.d);
+			lit.push(/* @__PURE__ */ jsx(LitEdge, {
+				d: path.d,
+				reversed: path.reversed,
+				highlight,
+				animT
+			}, `${from}→${to}`));
+		}
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
+		d: lines.join(" "),
+		stroke: CONNECTOR_COLOR,
+		strokeWidth: STROKE,
+		fill: "none"
+	}), lit] });
+}
+function LitDots({ ports }) {
+	const lineage = useLineageStore();
+	useLineage((l) => l.version, 0);
+	if (!lineage?.showing) return null;
+	const at = [];
+	const lit = [];
+	for (const [key, port] of ports) {
+		const highlight = lineage.between(port.job, port.job);
+		if (highlight) {
+			at.push(port);
+			lit.push(/* @__PURE__ */ jsx(LitDot, {
+				x: port.x,
+				y: port.y,
+				highlight,
+				animT: lineage.animT
+			}, key));
+		}
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
+		d: squaresAt(at),
+		fill: PANEL_COLOR
+	}), lit] });
+}
+/** A square of panel color around each dot, which leaves a gap at the node's edge. */
+var squaresAt = (at) => at.map(({ x, y }) => `M ${x - 16} ${y - 16} h 32 v 32 h -32 Z`).join(" ");
+/**
+* A graph level's connectors in three layers: lines behind the nodes, the lineage shown above the
+* nodes outside it, and the dots above all. However many connectors there are, the lines are one
+* path and the dots two, each dimming as one; only the lineage shown draws connectors of its own,
+* and a hover re-renders only those.
+*/
+var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
+	const fade = dimClasses(useLineageStore()?.depth ?? 0).edge;
+	const { lines, squares, dots, ports } = useMemo(() => {
+		const ports = /* @__PURE__ */ new Map();
+		for (const { from, to, start, end } of edges) {
+			ports.set(`${from}\0out`, {
+				job: from,
+				...start
+			});
+			ports.set(`${to}\0in`, {
+				job: to,
+				...end
+			});
+		}
+		const at = [...ports.values()];
+		return {
+			lines: edges.map(({ path }) => path.d).join(" "),
+			squares: squaresAt(at),
+			dots: at.map(({ x, y }) => `M ${x - 8} ${y} a 8 8 0 1 0 16 0 a 8 8 0 1 0 -16 0`).join(" "),
+			ports
+		};
+	}, [edges]);
+	const keyframes = /* @__PURE__ */ jsx("style", {
+		href: "dependency-graph-highlight",
+		precedence: "default",
+		children: KEYFRAMES
+	});
+	if (edges.length === 0) return keyframes;
+	const layer = (z, children) => /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		overflow: "visible",
+		className: "absolute pointer-events-none",
+		style: { zIndex: z + zBase },
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		keyframes,
+		layer(-1, /* @__PURE__ */ jsx("path", {
+			d: lines,
+			stroke: CONNECTOR_COLOR,
+			strokeWidth: STROKE,
+			fill: "none",
+			className: fade
+		})),
+		layer(20, /* @__PURE__ */ jsx(LitEdges, { edges })),
+		layer(30, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("path", {
+				d: squares,
+				fill: PANEL_COLOR
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: dots,
+				fill: CONNECTOR_COLOR,
+				className: fade
+			}),
+			/* @__PURE__ */ jsx(LitDots, { ports })
+		] }))
+	] });
+});
+//#endregion
+export { ConnectorLayers };

package/dist/graph/DependencyGraph.d.ts

@@ -1,24 +1,10 @@
-import React from 'react';
 import type { GraphLayout } from '../editing.js';
-import type { MatrixGroup, WorkflowEngine } from '../engine.js';
 import type { DependencyGraphEditor } from './editorApi.js';
 import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
 export declare const addCleanupSteps: ({ jobs }: {
     jobs: Record<string, WorkflowJob>;
 }) => Record<string, WorkflowJob>;
-export declare function computeGraphLayout(engine: WorkflowEngine, jobs: Record<string, WorkflowJob>, matrixGroups: Record<string, MatrixGroup>, layout?: GraphLayout): {
-    dependencyCols: string[][][];
-    /** Each box's row; above a box, rows the layout leaves empty stay as space. */
-    rowSlots: number[][];
-    /** Each column's number; between two drawn columns, numbers skipped stay as space. */
-    colSlots: number[];
-    directDeps: Record<string, string[]>;
-    displayJobs: Record<string, WorkflowJob>;
-    ancestorDists: Record<string, Map<string, number>>;
-    descendantDists: Record<string, Map<string, number>>;
-};
-export declare function intoView(start: number, end: number, low: number, high: number): number;
 interface GraphRun {
     id?: string | undefined;
     number?: number | undefined;
@@ -44,7 +30,7 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     /** The workflow as written, for what the editor's expressions can read. */
     workflow?: Record<string, unknown> | undefined;
     fixedHeight?: string | undefined;
-}): React.JSX.Element | undefined;
+}): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;
     removeBorder?: boolean;
@@ -52,5 +38,5 @@ export declare function DependencyGraphPreview(inputs: {
     editor?: DependencyGraphEditor | undefined;
     /** A fixed panel height; without one the panel is only as tall as the graph. */
     height?: string | undefined;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 export {};