@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/Workflow-CXRv3YXx.js

@@ -0,0 +1,1316 @@
+import { t as Badge } from "./Badge-C7NnqmMx.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { formatDuration } from "./utils/duration.es.js";
+import { t as Code } from "./code-B7cFirk4.js";
+import { n as formatTypeScript } from "./formatting-FU4kOXPG.js";
+import { t as CopyButton } from "./copy-button-B-_Z6N6y.js";
+import { raisedSurfaceStyle, surfaceStateLayerStyle } from "./primitives/raised-surface.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { formatDate, formatShortDate } from "./utils/date-format.es.js";
+import { ActivityWick } from "./components/Activity.es.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/Collapsible.es.js";
+import { DisclosureChevron } from "./components/DisclosureChevron.es.js";
+import { t as Metadata } from "./Metadata-DlVgmRTA.js";
+import { Shimmer } from "./components/Shimmer.es.js";
+import { n as useCodemirrorTheme, s as codeFoldGutter } from "./CodeEditor-ZoBu3Gjw.js";
+import { t as Button } from "./Button-Bi7aXd_G.js";
+import { a as DialogContent, c as DialogHeader, d as DialogTitle, n as DialogBody, t as Dialog } from "./Dialog-OBPu3rl2.js";
+import { Slider } from "./components/Slider.es.js";
+import { Skeleton } from "./components/Skeleton.es.js";
+import { t as DropdownMenu } from "./dropdown-menu-jsf9D-J_.js";
+import { createContext, forwardRef, useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircleIcon, ArrowRightLeft, Bot, Braces, BracesIcon, CalendarClock, Clock, Clock3Icon, CornerDownRight, Database, GitBranch, GitFork, Layers, List, Loader2, Maximize, Minus, MoreVerticalIcon, Network, PanelRightIcon, Pause, PlayCircle, PlayIcon, Plus, RefreshCw, Repeat, Repeat1, Repeat2, RotateCcwIcon, ShieldAlertIcon, StepForwardIcon, Timer, Workflow, Wrench } from "lucide-react";
+import { jsonLanguage } from "@codemirror/lang-json";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+import { Background, BackgroundVariant, BaseEdge, EdgeLabelRenderer, Handle, Panel, Position, ReactFlow, getBezierPath, useInternalNode, useNodesInitialized, useReactFlow, useStore, useViewport } from "@xyflow/react";
+import { javascript } from "@codemirror/lang-javascript";
+import "@xyflow/react/dist/style.css";
+// src/ds/components/Workflow/workflow-canvas-inset.ts
+var WorkflowCanvasInsetContext = createContext(0);
+function workflowFitOptions(leftInset, isInline = false) {
+	return {
+		maxZoom: 1,
+		padding: isInline ? "20px" : {
+			left: `${leftInset + 40}px`,
+			right: "40px",
+			top: "40px",
+			bottom: "64px"
+		}
+	};
+}
+// src/ds/components/Workflow/cards/workflow-card-kind.ts
+function getWorkflowCardBadge(props) {
+	if (props.isForEach) return {
+		label: "For each",
+		tone: "orange",
+		Icon: Repeat2,
+		indicator: "foreach"
+	};
+	if (props.isNestedWorkflowStep || props.stepGraph) return {
+		label: "Workflow",
+		tone: "purple",
+		Icon: Workflow,
+		indicator: "workflow"
+	};
+	if (props.isParallel && !props.nodeKind) return {
+		label: "Parallel",
+		tone: "blue",
+		Icon: GitFork,
+		indicator: "parallel"
+	};
+	if (props.nodeKind === "map" || props.mapConfig) return {
+		label: "Map",
+		tone: "orange",
+		Icon: ArrowRightLeft,
+		indicator: "map"
+	};
+	if (props.nodeKind === "wait-until" || props.date) return {
+		label: "Wait until",
+		tone: "purple",
+		Icon: CalendarClock,
+		indicator: "sleep-until"
+	};
+	if (props.nodeKind === "delay" || props.duration !== void 0) return {
+		label: "Delay",
+		tone: "purple",
+		Icon: Timer,
+		indicator: "sleep"
+	};
+	if (props.nodeKind === "agent") return {
+		label: "Agent",
+		tone: "cyan",
+		Icon: Bot
+	};
+	if (props.nodeKind === "tool") return {
+		label: "Tool",
+		tone: "pink",
+		Icon: Wrench
+	};
+	if (props.nodeKind === "classifier") return {
+		label: "Classifier",
+		tone: "blue",
+		Icon: GitBranch
+	};
+	return {
+		label: "Step",
+		tone: "neutral",
+		Icon: Braces
+	};
+}
+// src/ds/components/Workflow/cards/workflow-type-badge.tsx
+function WorkflowTypeBadge(props) {
+	const { label, Icon, tone } = getWorkflowCardBadge(props);
+	return /* @__PURE__ */ jsx(Badge, {
+		size: "xs",
+		variant: tone,
+		icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
+		children: label
+	});
+}
+// src/ds/components/Workflow/cards/workflow-card-badge-utils.ts
+var BADGE_COLORS = {
+	sleep: "var(--badge-purple-indicator)",
+	forEach: "var(--badge-orange-indicator)",
+	map: "var(--badge-orange-indicator)",
+	parallel: "var(--badge-blue-indicator)",
+	suspend: "var(--badge-pink-indicator)",
+	after: "var(--badge-cyan-indicator)",
+	workflow: "var(--badge-purple-indicator)",
+	when: "var(--badge-amber-indicator)",
+	dountil: "var(--badge-purple-indicator)",
+	dowhile: "var(--badge-cyan-indicator)",
+	until: "var(--badge-amber-indicator)",
+	while: "var(--badge-green-indicator)",
+	if: "var(--badge-blue-indicator)",
+	else: "var(--muted-foreground)"
+};
+var BADGE_ICONS = {
+	sleep: Timer,
+	sleepUntil: CalendarClock,
+	forEach: List,
+	map: List,
+	parallel: Workflow,
+	suspend: PlayCircle,
+	after: Clock,
+	workflow: Layers,
+	when: Network,
+	dountil: Repeat1,
+	dowhile: Repeat,
+	until: Timer,
+	while: RefreshCw,
+	if: GitBranch,
+	else: CornerDownRight
+};
+var CONDITION_LABELS = {
+	when: "When condition",
+	dountil: "Do until condition",
+	dowhile: "Do while condition",
+	until: "Until condition",
+	while: "While condition",
+	if: "If condition",
+	else: "Else condition",
+	and: "And condition",
+	or: "Or condition",
+	not: "Not condition"
+};
+var getConditionIconAndColor = (type) => {
+	switch (type) {
+		case "when": return {
+			icon: BADGE_ICONS.when,
+			color: BADGE_COLORS.when
+		};
+		case "dountil": return {
+			icon: BADGE_ICONS.dountil,
+			color: BADGE_COLORS.dountil
+		};
+		case "dowhile": return {
+			icon: BADGE_ICONS.dowhile,
+			color: BADGE_COLORS.dowhile
+		};
+		case "until": return {
+			icon: BADGE_ICONS.until,
+			color: BADGE_COLORS.until
+		};
+		case "while": return {
+			icon: BADGE_ICONS.while,
+			color: BADGE_COLORS.while
+		};
+		case "if": return {
+			icon: BADGE_ICONS.if,
+			color: BADGE_COLORS.if
+		};
+		case "else": return {
+			icon: BADGE_ICONS.else,
+			color: BADGE_COLORS.else
+		};
+		case "and":
+		case "or":
+		case "not": return {
+			icon: BADGE_ICONS.when,
+			color: BADGE_COLORS.when
+		};
+		default: return {
+			icon: void 0,
+			color: void 0
+		};
+	}
+};
+var getConditionIndicator = (type) => {
+	const { icon, color } = getConditionIconAndColor(type);
+	if (!type || !icon || !color) return;
+	return {
+		id: `condition-${type}`,
+		label: CONDITION_LABELS[type] ?? `${type} condition`,
+		icon,
+		color
+	};
+};
+var getNodeBadgeInfo = ({ duration, date, isForEach, mapConfig, canSuspend, isParallel, stepGraph }) => {
+	const isSleepNode = Boolean(duration || date);
+	const isForEachNode = Boolean(isForEach);
+	const isMapNode = Boolean(mapConfig && !isForEach);
+	const isNestedWorkflow = Boolean(stepGraph);
+	return {
+		isSleepNode,
+		isForEachNode,
+		isMapNode,
+		isNestedWorkflow,
+		hasSpecialBadge: isSleepNode || Boolean(canSuspend || isParallel) || isForEachNode || isMapNode || isNestedWorkflow
+	};
+};
+var getNodeIndicators = (props) => {
+	const { isSleepNode, isForEachNode, isMapNode, isNestedWorkflow } = getNodeBadgeInfo(props);
+	const indicators = [];
+	if (isSleepNode) indicators.push({
+		id: props.date ? "sleep-until" : "sleep",
+		label: props.date ? "Sleep until step" : "Sleep step",
+		icon: props.date ? BADGE_ICONS.sleepUntil : BADGE_ICONS.sleep,
+		color: BADGE_COLORS.sleep
+	});
+	if (props.canSuspend) indicators.push({
+		id: "suspend",
+		label: "Suspend/resume step",
+		icon: BADGE_ICONS.suspend,
+		color: BADGE_COLORS.suspend
+	});
+	if (props.isParallel) indicators.push({
+		id: "parallel",
+		label: "Parallel step",
+		icon: BADGE_ICONS.parallel,
+		color: BADGE_COLORS.parallel
+	});
+	if (isNestedWorkflow) indicators.push({
+		id: "workflow",
+		label: "Nested workflow step",
+		icon: BADGE_ICONS.workflow,
+		color: BADGE_COLORS.workflow
+	});
+	if (isForEachNode) indicators.push({
+		id: "foreach",
+		label: "Foreach step",
+		icon: BADGE_ICONS.forEach,
+		color: BADGE_COLORS.forEach
+	});
+	if (isMapNode) indicators.push({
+		id: "map",
+		label: "Map step",
+		icon: BADGE_ICONS.map,
+		color: BADGE_COLORS.map
+	});
+	return indicators;
+};
+// src/ds/components/Workflow/cards/workflow-clock.tsx
+var WorkflowClock = ({ startedAt, endedAt, isRunning = false, spansSuspension }) => {
+	if (isRunning && endedAt === void 0 && Number.isFinite(startedAt)) return /* @__PURE__ */ jsx(RunningWorkflowClock, {
+		startedAt,
+		spansSuspension
+	}, startedAt);
+	return /* @__PURE__ */ jsx(ElapsedTime, {
+		startedAt,
+		endedAt,
+		spansSuspension
+	});
+};
+function RunningWorkflowClock({ startedAt, spansSuspension }) {
+	const [time, setTime] = useState(() => Date.now());
+	useEffect(() => {
+		const interval = setInterval(() => setTime(Date.now()), 100);
+		return () => clearInterval(interval);
+	}, []);
+	return /* @__PURE__ */ jsx(ElapsedTime, {
+		startedAt,
+		endedAt: time,
+		spansSuspension
+	});
+}
+function ElapsedTime({ startedAt, endedAt, spansSuspension }) {
+	const elapsed = endedAt === void 0 ? void 0 : formatDuration(endedAt - startedAt);
+	return /* @__PURE__ */ jsx(Txt, {
+		variant: "meta",
+		tone: "muted",
+		font: "mono",
+		className: "whitespace-nowrap",
+		title: elapsed && spansSuspension ? "Includes time spent suspended waiting for input" : void 0,
+		children: elapsed === void 0 ? /* @__PURE__ */ jsx("span", {
+			"aria-label": "Timing unavailable",
+			children: "—"
+		}) : elapsed
+	});
+}
+// src/ds/components/Workflow/cards/condition/workflow-condition-expression.ts
+function conditionExpression(condition) {
+	if (condition.fnString !== void 0) return condition.fnString;
+	return JSON.stringify({
+		ref: condition.ref,
+		query: condition.query,
+		conj: condition.conj
+	}, null, 2);
+}
+// src/ds/components/Workflow/cards/condition/workflow-condition-source.tsx
+var MAX_FORMATTED_SOURCE_CHARS = 1e4;
+function WorkflowConditionSource({ source }) {
+	if (source.length > MAX_FORMATTED_SOURCE_CHARS) return /* @__PURE__ */ jsx(Code, { code: source });
+	return /* @__PURE__ */ jsx(FormattedConditionSource, { source }, source);
+}
+function FormattedConditionSource({ source }) {
+	const [formatted, setFormatted] = useState();
+	useEffect(() => {
+		let cancelled = false;
+		formatTypeScript(source).then((expression) => {
+			if (!cancelled) setFormatted(expression.trim());
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [source]);
+	return /* @__PURE__ */ jsx(Code, {
+		code: formatted ?? source,
+		lang: formatted === void 0 ? void 0 : "typescript"
+	});
+}
+// src/ds/components/Workflow/cards/condition/workflow-condition-card-view.tsx
+var surfaceClasses = "rounded-[calc(var(--radius-xl)-2px)] bg-card text-meta";
+function WorkflowConditionCardView({ type, conditions, previousDisplayStatus, actionBar }) {
+	const indicator = getConditionIndicator(type);
+	const Icon = indicator?.icon ?? Braces;
+	const label = indicator?.label.replace(/ condition$/, "") ?? "Condition";
+	const occurrences = /* @__PURE__ */ new Map();
+	const sources = conditions.map((condition) => {
+		const expression = conditionExpression(condition);
+		const identity = `${condition.type}:${expression}`;
+		const occurrence = occurrences.get(identity) ?? 0;
+		occurrences.set(identity, occurrence + 1);
+		return {
+			condition,
+			expression,
+			key: `${identity}:${occurrence}`
+		};
+	});
+	const copyContent = conditions.length > 1 ? JSON.stringify(conditions, null, 2) : sources.map((source) => source.expression).join("\n");
+	const hasExpression = type !== "else" && sources.some(({ expression }) => expression.trim().length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${raisedSurfaceStyle} w-[274px] overflow-hidden rounded-xl p-0.5 has-focus-visible:outline-1 has-focus-visible:outline-offset-4 has-focus-visible:outline-border-focus`,
+		"data-workflow-node": true,
+		"data-testid": "workflow-condition-node",
+		"data-workflow-step-status": previousDisplayStatus ?? "idle",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-[46px] items-center gap-2 px-2.5 text-meta text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					size: "xs",
+					variant: type === "else" ? "neutral" : "amber",
+					emphasis: "subtle",
+					icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }),
+					children: label
+				}), hasExpression && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "ml-auto",
+					children: "Expression"
+				}), /* @__PURE__ */ jsx(CopyButton, {
+					content: copyContent,
+					tooltip: "Copy expression",
+					className: "nodrag nopan"
+				})] })]
+			}),
+			hasExpression ? /* @__PURE__ */ jsx("div", {
+				role: "region",
+				"aria-label": "Condition details",
+				tabIndex: 0,
+				className: `${surfaceClasses} nodrag nopan nowheel max-h-55 overflow-auto p-3.5 text-foreground [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
+				children: sources.map(({ condition, expression, key }) => /* @__PURE__ */ jsxs("div", { children: [condition.conj && /* @__PURE__ */ jsx(Badge, {
+					size: "xs",
+					variant: "neutral",
+					children: condition.conj.toUpperCase()
+				}), condition.fnString !== void 0 ? /* @__PURE__ */ jsx(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ jsx(Code, { code: expression })] }, key))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: `${surfaceClasses} p-3 text-muted-foreground`,
+				children: type === "else" ? "When no other branch matches" : "Condition expression unavailable"
+			}),
+			actionBar && /* @__PURE__ */ jsx("div", {
+				className: "nodrag nopan flex justify-end px-2.5 py-1.5 empty:hidden",
+				children: actionBar
+			})
+		]
+	});
+}
+// src/ds/components/Workflow/cards/timing/workflow-time-dial.tsx
+var DIAL_CENTER = 58;
+var CLOCK_TICK_ANGLES = Array.from({ length: 60 }, (_, index) => index * 6);
+var DURATION_TICK_ANGLES = Array.from({ length: 41 }, (_, index) => -120 + index * 6);
+function pointAt(angle, radius) {
+	const radians = angle * Math.PI / 180;
+	return {
+		x: DIAL_CENTER + Math.sin(radians) * radius,
+		y: DIAL_CENTER - Math.cos(radians) * radius
+	};
+}
+function DialTick({ angle, major, className, ...props }) {
+	const outer = pointAt(angle, 49);
+	const inner = pointAt(angle, major ? 38 : 43);
+	return /* @__PURE__ */ jsx("line", {
+		x1: inner.x,
+		y1: inner.y,
+		x2: outer.x,
+		y2: outer.y,
+		className: cn(major ? "stroke-placeholder" : "stroke-border-strong", className),
+		...props
+	});
+}
+function DialHand({ angle, length }) {
+	const tip = pointAt(angle, length);
+	return /* @__PURE__ */ jsx("line", {
+		x1: DIAL_CENTER,
+		y1: DIAL_CENTER,
+		x2: tip.x,
+		y2: tip.y,
+		className: "stroke-1.5 stroke-muted-foreground",
+		strokeLinecap: "round"
+	});
+}
+function DialFace({ tickAngles, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "block size-28 shrink-0 text-muted-foreground",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 116 116",
+			fill: "none",
+			className: "block size-full overflow-visible",
+			children: [tickAngles.map((angle, index) => /* @__PURE__ */ jsx(DialTick, {
+				angle,
+				major: index % 5 === 0
+			}, angle)), children]
+		})
+	});
+}
+function ClockDial({ date }) {
+	const minutes = date.getUTCMinutes();
+	return /* @__PURE__ */ jsxs(DialFace, {
+		tickAngles: CLOCK_TICK_ANGLES,
+		children: [
+			/* @__PURE__ */ jsx(DialHand, {
+				angle: (date.getUTCHours() % 12 + minutes / 60) * 30,
+				length: 26
+			}),
+			/* @__PURE__ */ jsx(DialHand, {
+				angle: minutes * 6,
+				length: 37
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: DIAL_CENTER,
+				cy: DIAL_CENTER,
+				r: 2,
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function DurationDial({ amount, unit }) {
+	const scale = Math.max({
+		h: 24,
+		ms: 1e3,
+		s: 60,
+		min: 60
+	}[unit], Math.ceil(amount / 10) * 10);
+	return /* @__PURE__ */ jsxs(DialFace, {
+		tickAngles: DURATION_TICK_ANGLES,
+		children: [
+			/* @__PURE__ */ jsx(DialTick, {
+				angle: -120 + amount / scale * 240,
+				major: true,
+				className: "stroke-foreground stroke-2",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsxs("text", {
+				x: DIAL_CENTER,
+				y: 94,
+				textAnchor: "middle",
+				className: "fill-muted-foreground font-body text-meta",
+				children: [
+					scale,
+					" ",
+					unit
+				]
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: DIAL_CENTER,
+				y: 106,
+				textAnchor: "middle",
+				className: "fill-placeholder font-body text-meta",
+				children: "scale"
+			})
+		]
+	});
+}
+// src/ds/components/Workflow/cards/timing/workflow-timing.tsx
+var captionClasses = "text-meta tracking-wider whitespace-nowrap text-muted-foreground uppercase";
+function durationReading(duration) {
+	if (duration < 1e3) return {
+		amount: duration,
+		unit: "ms"
+	};
+	if (duration < 6e4) return {
+		amount: duration / 1e3,
+		unit: "s"
+	};
+	if (duration < 36e5) return {
+		amount: duration / 6e4,
+		unit: "min"
+	};
+	return {
+		amount: duration / 36e5,
+		unit: "h"
+	};
+}
+function TimingReading({ value, unit, caption, dial }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "mt-1 flex min-h-27 items-center justify-between gap-1 text-foreground",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "z-10 flex min-w-0 flex-col gap-2",
+			children: [/* @__PURE__ */ jsxs(Txt, {
+				as: "span",
+				variant: "display",
+				className: "flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums",
+				children: [value, unit && /* @__PURE__ */ jsx("small", {
+					className: "text-meta tracking-normal text-muted-foreground",
+					children: unit
+				})]
+			}), /* @__PURE__ */ jsx("span", {
+				className: captionClasses,
+				children: caption
+			})]
+		}), dial]
+	});
+}
+function WorkflowTiming({ duration, date }) {
+	if (date) {
+		const scheduled = new Date(date);
+		if (!Number.isFinite(scheduled.getTime())) return /* @__PURE__ */ jsx("span", {
+			className: captionClasses,
+			children: "Schedule unavailable"
+		});
+		return /* @__PURE__ */ jsx(TimingReading, {
+			value: formatDate(scheduled, "time", { timeZone: "UTC" }) ?? "",
+			unit: "UTC",
+			caption: formatShortDate(scheduled, {
+				timeZone: "UTC",
+				now: 0
+			}) ?? "",
+			dial: /* @__PURE__ */ jsx(ClockDial, { date: scheduled })
+		});
+	}
+	if (duration === void 0) return null;
+	if (!Number.isFinite(duration) || duration < 0) return /* @__PURE__ */ jsx("span", {
+		className: captionClasses,
+		children: "Delay unavailable"
+	});
+	const reading = durationReading(duration);
+	return /* @__PURE__ */ jsx(TimingReading, {
+		value: formatDuration(duration) ?? "",
+		caption: "Configured delay",
+		dial: /* @__PURE__ */ jsx(DurationDial, { ...reading })
+	});
+}
+// src/ds/components/Workflow/cards/step/workflow-step-card-view.tsx
+var statusLabels = {
+	running: "Running",
+	success: "Completed",
+	failed: "Failed",
+	suspended: "Needs input",
+	waiting: "Waiting",
+	paused: "Paused",
+	skipped: "Skipped",
+	canceled: "Canceled",
+	tripwire: "Tripwire blocked"
+};
+var statusLineClasses = {
+	success: "after:bg-success-indicator",
+	failed: "after:bg-destructive-indicator",
+	tripwire: "after:bg-warning-indicator",
+	waiting: "after:bg-warning-indicator",
+	paused: "after:bg-warning-indicator",
+	skipped: "after:bg-muted-foreground"
+};
+var footerStatusClasses = {
+	success: "text-success-indicator",
+	failed: "text-destructive-foreground",
+	suspended: "text-warning-foreground",
+	tripwire: "text-warning-foreground"
+};
+var suspendedWickStyle = { "--belt-hue": "var(--warning-indicator)" };
+function WorkflowStepCardView(props) {
+	const { label, description, displayStatus, stepKey, isSelected, isWaiting, isHovered, onHoverChange, onSelect, isForEach, foreachProgress, startedAt, endedAt, actionBar, body } = props;
+	const [expanded, setExpanded] = useState(props.initiallyOpen ?? false);
+	const isRunning = displayStatus === "running";
+	const isSuspended = displayStatus === "suspended";
+	const reportedStatusLabel = displayStatus && Object.hasOwn(statusLabels, displayStatus) ? statusLabels[displayStatus] : void 0;
+	const statusLabel = displayStatus ? reportedStatusLabel ?? "Status unavailable" : "Not started";
+	const kind = getWorkflowCardBadge(props);
+	const capabilities = getNodeIndicators(props).filter((indicator) => indicator.id !== kind.indicator).map((indicator) => indicator.label.replace(/ step$/, ""));
+	const hasActivity = isRunning || isSuspended;
+	const isStacked = isForEach && !expanded;
+	const isBodyExpanded = Boolean(body) && expanded;
+	const Summary = onSelect ? "button" : "div";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative isolate w-[274px]", isBodyExpanded && "w-172", isStacked && "pb-3 before:absolute before:inset-x-1.5 before:top-2 before:bottom-1.5 before:-z-10 before:rounded-xl before:border before:border-border before:bg-card after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border after:bg-card"),
+		children: /* @__PURE__ */ jsxs(Collapsible, {
+			open: expanded,
+			onOpenChange: setExpanded,
+			className: cn(raisedSurfaceStyle, "relative rounded-xl border border-transparent text-foreground transition-[border-color,background-color,box-shadow] [--card-radius:calc(var(--radius-xl)-2px)] motion-reduce:transition-none", "after:pointer-events-none after:absolute after:inset-x-4 after:-top-px after:h-px after:mask-x-from-76%", displayStatus && statusLineClasses[displayStatus], "has-focus-visible:outline-1 has-focus-visible:outline-offset-4 has-focus-visible:outline-border-focus", isSelected && "outline-1 outline-offset-4 outline-border-focus", isBodyExpanded && "border-dashed border-muted-foreground/40 shadow-none", isWaiting && "border-info-indicator", isHovered && !isSelected && "bg-muted"),
+			"data-workflow-node": true,
+			"data-workflow-step-key": stepKey,
+			"data-workflow-step-status": displayStatus ?? "idle",
+			"data-workflow-step-active": isSelected || void 0,
+			"data-workflow-step-waiting": isWaiting || void 0,
+			"data-workflow-step-hovered": isHovered || void 0,
+			"data-testid": props.isNestedWorkflowStep ? "workflow-nested-node" : "workflow-default-node",
+			onMouseEnter: () => onHoverChange?.(true),
+			onMouseLeave: () => onHoverChange?.(false),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "m-0.5 overflow-hidden rounded-(--card-radius)",
+				children: [
+					/* @__PURE__ */ jsxs(Summary, {
+						className: cn("nodrag nopan flex w-full flex-col text-left", onSelect && "group cursor-pointer focus-visible:outline-hidden"),
+						type: onSelect ? "button" : void 0,
+						"aria-label": onSelect ? `Inspect ${label}` : void 0,
+						"aria-pressed": onSelect ? Boolean(isSelected) : void 0,
+						onClick: onSelect,
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3 group-hover:bg-fill-subtle",
+							children: [/* @__PURE__ */ jsx(Txt, {
+								as: "span",
+								variant: "column",
+								tone: "ink",
+								className: "min-w-0 wrap-anywhere",
+								title: label,
+								children: /* @__PURE__ */ jsx(Shimmer, {
+									active: isRunning,
+									children: label
+								})
+							}), /* @__PURE__ */ jsx(WorkflowTypeBadge, { ...props })]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex flex-col gap-2 rounded-t-(--card-radius) bg-card px-3.5 py-3 empty:py-1.5",
+							children: [
+								description && /* @__PURE__ */ jsx(Txt, {
+									as: "span",
+									variant: "caption",
+									tone: "muted",
+									className: "wrap-anywhere",
+									children: description
+								}),
+								/* @__PURE__ */ jsx(WorkflowTiming, {
+									duration: props.duration,
+									date: props.date
+								}),
+								isWaiting && /* @__PURE__ */ jsx(Txt, {
+									as: "span",
+									variant: "meta",
+									className: "text-info-indicator",
+									children: "Next step in debug"
+								}),
+								isForEach && foreachProgress && /* @__PURE__ */ jsxs(Txt, {
+									as: "span",
+									variant: "meta",
+									className: "flex flex-col gap-2 py-1",
+									children: [/* @__PURE__ */ jsxs("span", { children: [
+										/* @__PURE__ */ jsx("strong", { children: foreachProgress.completedCount }),
+										" of ",
+										foreachProgress.totalCount,
+										" items complete"
+									] }), foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsx("progress", {
+										className: "h-1 w-full appearance-none border-0 bg-muted accent-success-indicator [&::-moz-progress-bar]:bg-success-indicator [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-success-indicator",
+										"aria-label": `${label} completed items`,
+										value: foreachProgress.completedCount,
+										max: foreachProgress.totalCount
+									}) : /* @__PURE__ */ jsx("span", { children: "No items to process" })]
+								}),
+								capabilities.length > 0 && /* @__PURE__ */ jsx(Txt, {
+									as: "span",
+									variant: "meta",
+									tone: "muted",
+									children: /* @__PURE__ */ jsx(Metadata, { children: capabilities.map((capability) => /* @__PURE__ */ jsx(Metadata.Item, { children: capability }, capability)) })
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("nodrag nopan flex min-h-7 items-center justify-between gap-2 bg-card px-3.5 pb-2.5 text-meta text-muted-foreground", displayStatus && footerStatusClasses[displayStatus]),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								role: "status",
+								className: isRunning ? "sr-only motion-reduce:not-sr-only" : void 0,
+								children: statusLabel
+							}),
+							startedAt !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "ml-auto",
+								children: /* @__PURE__ */ jsx(WorkflowClock, {
+									startedAt,
+									endedAt,
+									isRunning,
+									spansSuspension: props.spansSuspension
+								})
+							}),
+							actionBar
+						]
+					}),
+					body && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+						className: cn("state-layer", "nodrag nopan flex min-h-11 w-full items-center justify-between border-t border-border bg-card px-3.5 py-2.5 text-caption focus-visible:outline-hidden"),
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							expanded ? "Collapse" : "Expand",
+							" ",
+							isForEach ? "loop" : "workflow"
+						] }), /* @__PURE__ */ jsx(DisclosureChevron, {
+							direction: "right",
+							className: "size-3.5"
+						})]
+					}), /* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "h-155 overflow-hidden border-t border-dashed border-border",
+						children: body
+					})] })
+				]
+			}), hasActivity && /* @__PURE__ */ jsx(ActivityWick, {
+				status: isSuspended ? "ready" : "working",
+				"aria-hidden": true,
+				className: "before:hidden",
+				style: isSuspended ? suspendedWickStyle : void 0
+			})]
+		})
+	});
+}
+// src/ds/components/Workflow/data/workflow-code-dialog-content.tsx
+var WorkflowCodeContent = ({ data, language = "auto" }) => {
+	const theme = useCodemirrorTheme();
+	const getExtensions = (content) => {
+		if (language === "javascript") return [javascript(), EditorView.lineWrapping];
+		if (language === "json") return [jsonLanguage, EditorView.lineWrapping];
+		try {
+			JSON.parse(content);
+			return [jsonLanguage, EditorView.lineWrapping];
+		} catch {
+			if (content.includes("=>") || content.includes("function") || content.includes("const ") || content.includes("return ")) return [javascript(), EditorView.lineWrapping];
+			return [EditorView.lineWrapping];
+		}
+	};
+	if (typeof data !== "string") {
+		const content = JSON.stringify(data, null, 2);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative overflow-auto",
+			style: { maxHeight: 500 },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "absolute top-2 right-2 z-10 rounded-full bg-muted",
+				children: /* @__PURE__ */ jsx(CopyButton, { content })
+			}), /* @__PURE__ */ jsx("div", {
+				className: "rounded-lg bg-muted p-4",
+				children: /* @__PURE__ */ jsx(CodeMirror, {
+					value: content,
+					theme,
+					extensions: [
+						jsonLanguage,
+						EditorView.lineWrapping,
+						codeFoldGutter
+					],
+					basicSetup: { foldGutter: false }
+				})
+			})]
+		});
+	}
+	const extensions = getExtensions(data);
+	let displayContent = data;
+	try {
+		const json = JSON.parse(data);
+		displayContent = JSON.stringify(json, null, 2);
+	} catch {}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative overflow-auto",
+		style: { maxHeight: 500 },
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute top-2 right-2 z-10 rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx(CopyButton, { content: data })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg bg-muted p-4",
+			children: /* @__PURE__ */ jsx(CodeMirror, {
+				value: displayContent,
+				theme,
+				extensions: [...extensions, codeFoldGutter],
+				basicSetup: { foldGutter: false }
+			})
+		})]
+	});
+};
+// src/ds/components/Workflow/data/workflow-edge-data-button.tsx
+var WorkflowEdgeDataButton = ({ previousStepId, output, label, selected, onInspect }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const dataLabel = label ?? (previousStepId ? `${previousStepId} output` : "Previous output");
+	if (output === void 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		variant: "ghost",
+		onClick: onInspect ?? (() => setIsOpen(true)),
+		"aria-label": `View ${dataLabel}`,
+		"aria-pressed": selected,
+		className: cn(raisedSurfaceStyle, surfaceStateLayerStyle, "h-7 rounded-lg px-2 text-foreground aria-pressed:before:bg-fill"),
+		icon: /* @__PURE__ */ jsx(Database, { className: "text-muted-foreground" }),
+		children: "Data"
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			size: "xl",
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Step output" }) }), /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 rounded-lg border border-border bg-background p-3",
+				children: [/* @__PURE__ */ jsx(Txt, {
+					variant: "caption",
+					tone: "ink",
+					className: "mb-2 block",
+					children: dataLabel
+				}), /* @__PURE__ */ jsx(WorkflowCodeContent, { data: output })]
+			}) })]
+		})
+	})] });
+};
+// src/ds/components/Workflow/graph/types.ts
+var WORKFLOW_DATA_EDGE_TYPE = "workflow-data-edge";
+var WORKFLOW_BOUNDARY_NODE_TYPE = "workflow-boundary-node";
+// src/ds/components/Workflow/graph/workflow-boundary-node.tsx
+var WorkflowBoundaryNode = ({ data }) => {
+	const isStart = data.boundaryRole === "start";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!isStart && /* @__PURE__ */ jsx(Handle, {
+			type: "target",
+			position: Position.Top,
+			style: { visibility: "hidden" }
+		}),
+		/* @__PURE__ */ jsx("div", {
+			"data-workflow-boundary-node": true,
+			"data-testid": `workflow-boundary-${data.boundaryRole}`,
+			className: cn("relative flex h-[38px] w-28 items-center justify-center text-muted-foreground after:absolute after:inset-x-0 after:mask-x-from-60%", isStart ? "after:bottom-0 after:h-px after:bg-muted-foreground" : "after:top-0 after:h-1 after:border-y after:border-muted-foreground"),
+			children: /* @__PURE__ */ jsx(Txt, {
+				variant: "meta",
+				children: data.label
+			})
+		}),
+		isStart && /* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			position: Position.Bottom,
+			style: { visibility: "hidden" }
+		})
+	] });
+};
+// src/ds/components/Workflow/graph/workflow-data-edge-view.tsx
+function WorkflowDataEdgeView({ output, label, dataControl, ...props }) {
+	const source = useInternalNode(props.source);
+	const target = useInternalNode(props.target);
+	const sourceWidth = source?.measured?.width ?? source?.width;
+	const sourceHeight = source?.measured?.height ?? source?.height;
+	const targetWidth = target?.measured?.width ?? target?.width;
+	const hasBottomSource = source && sourceWidth !== void 0 && sourceHeight !== void 0 && props.sourcePosition === Position.Bottom;
+	const hasTopTarget = target && targetWidth !== void 0 && props.targetPosition === Position.Top;
+	const sourceX = hasBottomSource ? source.internals.positionAbsolute.x + sourceWidth / 2 : props.sourceX;
+	const sourceY = hasBottomSource ? source.internals.positionAbsolute.y + sourceHeight : props.sourceY;
+	const targetX = hasTopTarget ? target.internals.positionAbsolute.x + targetWidth / 2 : props.targetX;
+	const targetY = hasTopTarget ? target.internals.positionAbsolute.y : props.targetY;
+	const [edgePath, midpointX, midpointY] = getBezierPath({
+		...props,
+		sourceX,
+		sourceY,
+		targetX,
+		targetY
+	});
+	const labelPlacement = props.data?.dataLabelPlacement;
+	const labelX = labelPlacement === "source" ? sourceX : midpointX;
+	const labelY = labelPlacement === "source" ? sourceY + Math.min(24, Math.max(0, (targetY - sourceY) / 4)) : midpointY;
+	const arrowId = useId();
+	const isExecuted = props.data?.edgeStatus === "success";
+	const pathColor = isExecuted ? "var(--success-indicator)" : "var(--muted-foreground)";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+			id: arrowId,
+			viewBox: "0 0 10 10",
+			refX: "9",
+			refY: "5",
+			markerWidth: "5",
+			markerHeight: "5",
+			orient: "auto",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1 1 L9 5 L1 9 Z",
+				fill: pathColor
+			})
+		}) }),
+		/* @__PURE__ */ jsx(BaseEdge, {
+			id: props.id,
+			path: edgePath,
+			markerEnd: `url(#${arrowId})`,
+			style: {
+				...props.style,
+				stroke: pathColor,
+				strokeWidth: isExecuted ? 2 : 1,
+				strokeLinecap: "round",
+				strokeDasharray: isExecuted ? "none" : "5 6"
+			},
+			vectorEffect: "non-scaling-stroke",
+			"data-edge-status": props.data?.edgeStatus ?? "idle",
+			"data-edge-from": props.data?.previousStepId,
+			"data-edge-to": props.data?.nextStepId
+		}),
+		labelPlacement !== "hidden" && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+			className: "nodrag nopan flex items-center justify-center",
+			style: {
+				position: "absolute",
+				pointerEvents: "all",
+				transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
+			},
+			children: dataControl ?? /* @__PURE__ */ jsx(WorkflowEdgeDataButton, {
+				previousStepId: props.data?.boundaryPayload ? void 0 : props.data?.previousStepId,
+				output,
+				label: typeof label === "string" ? label : void 0
+			})
+		}) })
+	] });
+}
+// src/ds/components/Workflow/graph/workflow-camera-duration.ts
+function workflowCameraDuration() {
+	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+}
+// src/ds/components/Workflow/graph/workflow-graph-groups.tsx
+function WorkflowGraphGroups({ nodes, groups }) {
+	const { x, y, zoom } = useViewport();
+	return /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute inset-0 z-0 origin-top-left",
+		style: { transform: `translate(${x}px, ${y}px) scale(${zoom})` },
+		children: groups.map((group) => {
+			const members = nodes.flatMap((node) => {
+				if (!group.nodeIds.includes(node.id) || !node.measured?.width || !node.measured.height) return [];
+				return [{
+					x: node.position.x,
+					y: node.position.y,
+					width: node.measured.width,
+					height: node.measured.height
+				}];
+			});
+			if (!members.length || members.length !== group.nodeIds.length) return null;
+			const left = Math.min(...members.map((node) => node.x)) - 20;
+			const top = Math.min(...members.map((node) => node.y)) - 54;
+			const right = Math.max(...members.map((node) => node.x + node.width)) + 20;
+			const bottom = Math.max(...members.map((node) => node.y + node.height)) + 20;
+			return /* @__PURE__ */ jsx("div", {
+				className: "absolute rounded-xl border border-dashed border-muted-foreground/25 bg-muted-foreground/3",
+				style: {
+					transform: `translate(${left}px, ${top}px)`,
+					width: right - left,
+					height: bottom - top
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-5 py-4 text-meta text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Badge, {
+						size: "xs",
+						variant: "blue",
+						emphasis: "subtle",
+						icon: /* @__PURE__ */ jsx(GitFork, { "aria-hidden": true }),
+						children: group.label
+					}), /* @__PURE__ */ jsx("span", { children: group.description })]
+				})
+			}, group.id);
+		})
+	});
+}
+// src/ds/components/Workflow/graph/zoom-slider.tsx
+var ZoomSlider = forwardRef(({ className, compact = false, onFitView, ...props }, ref) => {
+	const { zoom } = useViewport();
+	const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
+	const minZoom = useStore((state) => state.minZoom);
+	const maxZoom = useStore((state) => state.maxZoom);
+	return /* @__PURE__ */ jsxs(Panel, {
+		ref,
+		className: cn("flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				size: "icon-sm",
+				tooltip: "Zoom out",
+				disabled: zoom <= minZoom,
+				onClick: () => zoomOut({ duration: workflowCameraDuration() }),
+				children: /* @__PURE__ */ jsx(Minus, {})
+			}),
+			!compact && /* @__PURE__ */ jsx(Slider, {
+				className: "w-35",
+				"aria-label": "Canvas zoom",
+				value: [zoom],
+				min: minZoom,
+				max: maxZoom,
+				step: .01,
+				largeStep: .25,
+				format: { style: "percent" },
+				onValueChange: (values) => {
+					const [nextZoom] = values;
+					if (nextZoom !== void 0) zoomTo(nextZoom);
+				}
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "icon-sm",
+				tooltip: "Zoom in",
+				disabled: zoom >= maxZoom,
+				onClick: () => zoomIn({ duration: workflowCameraDuration() }),
+				children: /* @__PURE__ */ jsx(Plus, {})
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				className: "min-w-16 tabular-nums",
+				tooltip: "Reset to actual size (100%)",
+				onClick: () => zoomTo(1, { duration: workflowCameraDuration() }),
+				children: [(100 * zoom).toFixed(0), "%"]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "icon-sm",
+				tooltip: "Fit view",
+				onClick: onFitView ?? (() => fitView({
+					duration: workflowCameraDuration(),
+					maxZoom: 1
+				})),
+				children: /* @__PURE__ */ jsx(Maximize, {})
+			})
+		]
+	});
+});
+ZoomSlider.displayName = "ZoomSlider";
+// src/ds/components/Workflow/graph/workflow-graph-canvas.tsx
+function WorkflowGraphCanvas({ nodes, edges, nodeTypes, edgeTypes, onNodesChange, onNodeClick, focusNodeId, groups, variant = "default" }) {
+	const graphRef = useRef(null);
+	const backgroundId = useId();
+	const panelInset = useContext(WorkflowCanvasInsetContext);
+	const leftInset = variant === "default" ? panelInset : 0;
+	const isInline = variant === "inline";
+	const { getNodes, setCenter, fitView } = useReactFlow();
+	const nodesInitialized = useNodesInitialized();
+	const canvasWidth = useStore((state) => state.width);
+	const canvasHeight = useStore((state) => state.height);
+	const hasCompactZoom = canvasWidth - leftInset < 560;
+	const inlineNodeLayout = isInline ? JSON.stringify(nodes?.map((node) => [
+		node.id,
+		node.position.x,
+		node.position.y,
+		node.measured?.width ?? node.width,
+		node.measured?.height ?? node.height
+	])) : void 0;
+	useEffect(() => {
+		if (!canvasWidth || !canvasHeight || !nodesInitialized) return;
+		if (variant === "default") return;
+		fitView({
+			...workflowFitOptions(leftInset, isInline),
+			duration: 0
+		});
+	}, [
+		canvasWidth,
+		canvasHeight,
+		nodesInitialized,
+		inlineNodeLayout,
+		fitView,
+		leftInset,
+		isInline,
+		variant
+	]);
+	useEffect(() => {
+		if (!canvasWidth || !canvasHeight || !nodesInitialized || !focusNodeId) return;
+		const focusNode = getNodes().find((node) => node.id === focusNodeId);
+		if (!focusNode) return;
+		if (!graphRef.current?.contains(document.activeElement)) graphRef.current?.focus({ preventScroll: true });
+		const width = focusNode.measured?.width ?? focusNode.width ?? 274;
+		const height = focusNode.measured?.height ?? focusNode.height ?? 100;
+		const duration = workflowCameraDuration();
+		const exceedsVisibleWidth = canvasWidth > 0 && width > canvasWidth - leftInset - 80;
+		const exceedsVisibleHeight = canvasHeight > 0 && height > canvasHeight - 104;
+		if (exceedsVisibleWidth || exceedsVisibleHeight) {
+			fitView({
+				...workflowFitOptions(leftInset),
+				nodes: [{ id: focusNode.id }],
+				duration
+			});
+			return;
+		}
+		setCenter(focusNode.position.x + width / 2 - leftInset / 2, focusNode.position.y + height / 2, {
+			duration,
+			zoom: 1
+		});
+	}, [
+		canvasWidth,
+		canvasHeight,
+		nodesInitialized,
+		focusNodeId,
+		getNodes,
+		setCenter,
+		fitView,
+		leftInset
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: graphRef,
+		tabIndex: -1,
+		"data-testid": "workflow-graph-viewport",
+		className: cn("size-full outline-none", variant === "nested" ? "bg-sidebar" : "bg-background"),
+		children: /* @__PURE__ */ jsxs(ReactFlow, {
+			fitView: variant === "default",
+			fitViewOptions: workflowFitOptions(leftInset),
+			nodes,
+			edges,
+			nodeTypes,
+			edgeTypes,
+			onNodesChange,
+			onNodeClick,
+			nodesDraggable: false,
+			nodesConnectable: false,
+			elementsSelectable: false,
+			deleteKeyCode: null,
+			panOnScroll: !isInline,
+			panOnDrag: !isInline,
+			zoomOnPinch: !isInline,
+			zoomOnDoubleClick: !isInline,
+			preventScrolling: !isInline,
+			proOptions: isInline ? { hideAttribution: true } : void 0,
+			zoomOnScroll: false,
+			minZoom: .1,
+			maxZoom: 4,
+			children: [
+				!isInline && /* @__PURE__ */ jsx(ZoomSlider, {
+					position: "top-right",
+					className: "m-2!",
+					compact: hasCompactZoom,
+					onFitView: () => fitView({
+						...workflowFitOptions(leftInset),
+						duration: workflowCameraDuration()
+					})
+				}),
+				groups && /* @__PURE__ */ jsx(WorkflowGraphGroups, {
+					nodes: nodes ?? [],
+					groups
+				}),
+				!isInline && /* @__PURE__ */ jsx(Background, {
+					id: backgroundId,
+					variant: BackgroundVariant.Dots,
+					gap: 12,
+					size: .5
+				})
+			]
+		})
+	});
+}
+// src/ds/components/Workflow/graph/workflow-node-frame.tsx
+function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!withoutTopHandle && /* @__PURE__ */ jsx(Handle, {
+			type: "target",
+			position: Position.Top,
+			style: { visibility: "hidden" }
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "nodrag pointer-events-auto",
+			children
+		}),
+		!withoutBottomHandle && /* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			position: Position.Bottom,
+			style: { visibility: "hidden" }
+		})
+	] });
+}
+// src/ds/components/Workflow/controls/workflow-debug-controls.tsx
+function WorkflowDebugControls({ isStreaming, canRunNextStep, nextStepLabel, disabled, children, onRunNextStep, onContinueRun }) {
+	const nextStepFallback = canRunNextStep ? "Ready to advance" : "Next step unavailable";
+	const actionsDisabled = !canRunNextStep || isStreaming || disabled;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-3",
+		"data-testid": "workflow-debug-step-controls",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "rounded-xl border border-surface-rim bg-background p-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx(Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Next step"
+				}), /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					icon: /* @__PURE__ */ jsx(Pause, {}),
+					emphasis: "subtle",
+					children: "Step by step"
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-subheading break-words text-foreground",
+				"aria-live": "polite",
+				children: nextStepLabel || nextStepFallback
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "primary",
+					className: "min-w-0 flex-1",
+					"aria-label": "Run next step",
+					onClick: onRunNextStep,
+					disabled: actionsDisabled,
+					icon: isStreaming ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : /* @__PURE__ */ jsx(StepForwardIcon, {}),
+					children: isStreaming ? "Running step…" : "Run next step"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-md",
+					tooltip: "Continue full run",
+					onClick: onContinueRun,
+					disabled: actionsDisabled,
+					children: /* @__PURE__ */ jsx(PlayIcon, {})
+				}),
+				children
+			]
+		})]
+	});
+}
+// src/ds/components/Workflow/graph/workflow-graph-placeholder.tsx
+function WorkflowGraphPlaceholder(props) {
+	if (props.isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "p-4",
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" })
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid h-full place-items-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ jsx(AlertCircleIcon, {}), /* @__PURE__ */ jsxs("div", { children: [
+				"We couldn't find ",
+				props.workflowName,
+				" workflow."
+			] })]
+		})
+	});
+}
+// src/ds/components/Workflow/cards/condition/workflow-condition-card.tsx
+function WorkflowConditionCard({ conditions, ...props }) {
+	return /* @__PURE__ */ jsx(WorkflowConditionCardView, {
+		...props,
+		type: conditions[0]?.type,
+		conditions
+	});
+}
+// src/ds/components/Workflow/controls/workflow-step-actions.tsx
+function WorkflowStepActions({ children }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		size: "icon-sm",
+		variant: "ghost",
+		"aria-label": "Step actions",
+		title: "Step actions",
+		className: "nodrag nopan",
+		children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
+	}) }), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		align: "end",
+		children
+	})] });
+}
+// src/ds/components/Workflow/controls/workflow-step-action.tsx
+var actions = {
+	nested: {
+		icon: PanelRightIcon,
+		label: "View nested graph",
+		activeLabel: "Hide nested graph"
+	},
+	map: {
+		icon: BracesIcon,
+		label: "Map config",
+		activeLabel: "Hide map config"
+	},
+	timeTravel: {
+		icon: Clock3Icon,
+		label: "Time travel"
+	},
+	runStep: {
+		icon: PlayIcon,
+		label: "Run step"
+	},
+	continueRun: {
+		icon: StepForwardIcon,
+		label: "Continue run"
+	},
+	resumeData: {
+		icon: RotateCcwIcon,
+		label: "Resume data"
+	},
+	error: {
+		icon: AlertCircleIcon,
+		label: "Error"
+	},
+	tripwire: {
+		icon: ShieldAlertIcon,
+		label: "Tripwire"
+	}
+};
+function WorkflowStepAction({ action, isActive, onSelect }) {
+	const definition = actions[action];
+	const ActionIcon = definition.icon;
+	const label = isActive && "activeLabel" in definition ? definition.activeLabel : definition.label;
+	return /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+		onSelect,
+		className: action === "tripwire" ? "text-warning-foreground" : void 0,
+		children: [/* @__PURE__ */ jsx(ActionIcon, {}), /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+export { WorkflowTypeBadge as C, getNodeIndicators as S, workflowFitOptions as T, BADGE_COLORS as _, WorkflowDebugControls as a, getConditionIndicator as b, WorkflowDataEdgeView as c, WORKFLOW_DATA_EDGE_TYPE as d, WorkflowEdgeDataButton as f, WorkflowClock as g, WorkflowConditionCardView as h, WorkflowGraphPlaceholder as i, WorkflowBoundaryNode as l, WorkflowStepCardView as m, WorkflowStepActions as n, WorkflowNodeFrame as o, WorkflowCodeContent as p, WorkflowConditionCard as r, WorkflowGraphCanvas as s, WorkflowStepAction as t, WORKFLOW_BOUNDARY_NODE_TYPE as u, BADGE_ICONS as v, WorkflowCanvasInsetContext as w, getNodeBadgeInfo as x, getConditionIconAndColor as y };
+
+//# sourceMappingURL=Workflow-CXRv3YXx.js.map