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

package/dist/Workflow-DIfTVqZs.cjs

@@ -0,0 +1,1467 @@
+const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_Badge = require("./Badge-DqaMg7Gy.cjs");
+const require_Txt = require("./Txt-_00wWxTd.cjs");
+const require_utils_duration = require("./utils/duration.cjs.js");
+const require_code = require("./code-CqgfD-cP.cjs");
+const require_formatting = require("./formatting-BcPMU2NY.cjs");
+const require_copy_button = require("./copy-button-DuEUYvS2.cjs");
+const require_primitives_raised_surface = require("./primitives/raised-surface.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_utils_date_format = require("./utils/date-format.cjs.js");
+const require_components_Activity = require("./components/Activity.cjs.js");
+const require_components_Collapsible = require("./components/Collapsible.cjs.js");
+const require_components_DisclosureChevron = require("./components/DisclosureChevron.cjs.js");
+const require_Metadata = require("./Metadata-5GJlO4GU.cjs");
+const require_components_Shimmer = require("./components/Shimmer.cjs.js");
+const require_CodeEditor = require("./CodeEditor-DHIDfP5g.cjs");
+const require_Button = require("./Button-BfICfyxD.cjs");
+const require_Dialog = require("./Dialog-Duy3M1ny.cjs");
+const require_components_Slider = require("./components/Slider.cjs.js");
+const require_components_Skeleton = require("./components/Skeleton.cjs.js");
+const require_dropdown_menu = require("./dropdown-menu-D3D8USIY.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _codemirror_lang_json = require("@codemirror/lang-json");
+let _codemirror_view = require("@codemirror/view");
+let _uiw_react_codemirror = require("@uiw/react-codemirror");
+_uiw_react_codemirror = require_rolldown_runtime.__toESM(_uiw_react_codemirror, 1);
+let _xyflow_react = require("@xyflow/react");
+let _codemirror_lang_javascript = require("@codemirror/lang-javascript");
+require("@xyflow/react/dist/style.css");
+// src/ds/components/Workflow/workflow-canvas-inset.ts
+var WorkflowCanvasInsetContext = (0, react.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: lucide_react.Repeat2,
+		indicator: "foreach"
+	};
+	if (props.isNestedWorkflowStep || props.stepGraph) return {
+		label: "Workflow",
+		tone: "purple",
+		Icon: lucide_react.Workflow,
+		indicator: "workflow"
+	};
+	if (props.isParallel && !props.nodeKind) return {
+		label: "Parallel",
+		tone: "blue",
+		Icon: lucide_react.GitFork,
+		indicator: "parallel"
+	};
+	if (props.nodeKind === "map" || props.mapConfig) return {
+		label: "Map",
+		tone: "orange",
+		Icon: lucide_react.ArrowRightLeft,
+		indicator: "map"
+	};
+	if (props.nodeKind === "wait-until" || props.date) return {
+		label: "Wait until",
+		tone: "purple",
+		Icon: lucide_react.CalendarClock,
+		indicator: "sleep-until"
+	};
+	if (props.nodeKind === "delay" || props.duration !== void 0) return {
+		label: "Delay",
+		tone: "purple",
+		Icon: lucide_react.Timer,
+		indicator: "sleep"
+	};
+	if (props.nodeKind === "agent") return {
+		label: "Agent",
+		tone: "cyan",
+		Icon: lucide_react.Bot
+	};
+	if (props.nodeKind === "tool") return {
+		label: "Tool",
+		tone: "pink",
+		Icon: lucide_react.Wrench
+	};
+	if (props.nodeKind === "classifier") return {
+		label: "Classifier",
+		tone: "blue",
+		Icon: lucide_react.GitBranch
+	};
+	return {
+		label: "Step",
+		tone: "neutral",
+		Icon: lucide_react.Braces
+	};
+}
+// src/ds/components/Workflow/cards/workflow-type-badge.tsx
+function WorkflowTypeBadge(props) {
+	const { label, Icon, tone } = getWorkflowCardBadge(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+		size: "xs",
+		variant: tone,
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.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: lucide_react.Timer,
+	sleepUntil: lucide_react.CalendarClock,
+	forEach: lucide_react.List,
+	map: lucide_react.List,
+	parallel: lucide_react.Workflow,
+	suspend: lucide_react.PlayCircle,
+	after: lucide_react.Clock,
+	workflow: lucide_react.Layers,
+	when: lucide_react.Network,
+	dountil: lucide_react.Repeat1,
+	dowhile: lucide_react.Repeat,
+	until: lucide_react.Timer,
+	while: lucide_react.RefreshCw,
+	if: lucide_react.GitBranch,
+	else: lucide_react.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__ */ (0, react_jsx_runtime.jsx)(RunningWorkflowClock, {
+		startedAt,
+		spansSuspension
+	}, startedAt);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ElapsedTime, {
+		startedAt,
+		endedAt,
+		spansSuspension
+	});
+};
+function RunningWorkflowClock({ startedAt, spansSuspension }) {
+	const [time, setTime] = (0, react.useState)(() => Date.now());
+	(0, react.useEffect)(() => {
+		const interval = setInterval(() => setTime(Date.now()), 100);
+		return () => clearInterval(interval);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ElapsedTime, {
+		startedAt,
+		endedAt: time,
+		spansSuspension
+	});
+}
+function ElapsedTime({ startedAt, endedAt, spansSuspension }) {
+	const elapsed = endedAt === void 0 ? void 0 : require_utils_duration.formatDuration(endedAt - startedAt);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_code.Code, { code: source });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormattedConditionSource, { source }, source);
+}
+function FormattedConditionSource({ source }) {
+	const [formatted, setFormatted] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		let cancelled = false;
+		require_formatting.formatTypeScript(source).then((expression) => {
+			if (!cancelled) setFormatted(expression.trim());
+		}).catch(() => void 0);
+		return () => {
+			cancelled = true;
+		};
+	}, [source]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_code.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 ?? lucide_react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `${require_primitives_raised_surface.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex h-[46px] items-center gap-2 px-2.5 text-meta text-muted-foreground",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+					size: "xs",
+					variant: type === "else" ? "neutral" : "amber",
+					emphasis: "subtle",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { "aria-hidden": true }),
+					children: label
+				}), hasExpression && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ml-auto",
+					children: "Expression"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_copy_button.CopyButton, {
+					content: copyContent,
+					tooltip: "Copy expression",
+					className: "nodrag nopan"
+				})] })]
+			}),
+			hasExpression ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", { children: [condition.conj && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+					size: "xs",
+					variant: "neutral",
+					children: condition.conj.toUpperCase()
+				}), condition.fnString !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_code.Code, { code: expression })] }, key))
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `${surfaceClasses} p-3 text-muted-foreground`,
+				children: type === "else" ? "When no other branch matches" : "Condition expression unavailable"
+			}),
+			actionBar && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("line", {
+		x1: inner.x,
+		y1: inner.y,
+		x2: outer.x,
+		y2: outer.y,
+		className: require_utils.cn(major ? "stroke-placeholder" : "stroke-border-strong", className),
+		...props
+	});
+}
+function DialHand({ angle, length }) {
+	const tip = pointAt(angle, length);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "block size-28 shrink-0 text-muted-foreground",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			viewBox: "0 0 116 116",
+			fill: "none",
+			className: "block size-full overflow-visible",
+			children: [tickAngles.map((angle, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialTick, {
+				angle,
+				major: index % 5 === 0
+			}, angle)), children]
+		})
+	});
+}
+function ClockDial({ date }) {
+	const minutes = date.getUTCMinutes();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialFace, {
+		tickAngles: CLOCK_TICK_ANGLES,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialHand, {
+				angle: (date.getUTCHours() % 12 + minutes / 60) * 30,
+				length: 26
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialHand, {
+				angle: minutes * 6,
+				length: 37
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(DialFace, {
+		tickAngles: DURATION_TICK_ANGLES,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialTick, {
+				angle: -120 + amount / scale * 240,
+				major: true,
+				className: "stroke-foreground stroke-2",
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("text", {
+				x: DIAL_CENTER,
+				y: 94,
+				textAnchor: "middle",
+				className: "fill-muted-foreground font-body text-meta",
+				children: [
+					scale,
+					" ",
+					unit
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "mt-1 flex min-h-27 items-center justify-between gap-1 text-foreground",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "z-10 flex min-w-0 flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+				as: "span",
+				variant: "display",
+				className: "flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums",
+				children: [value, unit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", {
+					className: "text-meta tracking-normal text-muted-foreground",
+					children: unit
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: captionClasses,
+			children: "Schedule unavailable"
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimingReading, {
+			value: require_utils_date_format.formatDate(scheduled, "time", { timeZone: "UTC" }) ?? "",
+			unit: "UTC",
+			caption: require_utils_date_format.formatShortDate(scheduled, {
+				timeZone: "UTC",
+				now: 0
+			}) ?? "",
+			dial: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClockDial, { date: scheduled })
+		});
+	}
+	if (duration === void 0) return null;
+	if (!Number.isFinite(duration) || duration < 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: captionClasses,
+		children: "Delay unavailable"
+	});
+	const reading = durationReading(duration);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimingReading, {
+		value: require_utils_duration.formatDuration(duration) ?? "",
+		caption: "Configured delay",
+		dial: /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.Collapsible, {
+			open: expanded,
+			onOpenChange: setExpanded,
+			className: require_utils.cn(require_primitives_raised_surface.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "m-0.5 overflow-hidden rounded-(--card-radius)",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Summary, {
+						className: require_utils.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+								as: "span",
+								variant: "column",
+								tone: "ink",
+								className: "min-w-0 wrap-anywhere",
+								title: label,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Shimmer.Shimmer, {
+									active: isRunning,
+									children: label
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkflowTypeBadge, { ...props })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									as: "span",
+									variant: "caption",
+									tone: "muted",
+									className: "wrap-anywhere",
+									children: description
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkflowTiming, {
+									duration: props.duration,
+									date: props.date
+								}),
+								isWaiting && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									as: "span",
+									variant: "meta",
+									className: "text-info-indicator",
+									children: "Next step in debug"
+								}),
+								isForEach && foreachProgress && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+									as: "span",
+									variant: "meta",
+									className: "flex flex-col gap-2 py-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: foreachProgress.completedCount }),
+										" of ",
+										foreachProgress.totalCount,
+										" items complete"
+									] }), foreachProgress.totalCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: "No items to process" })]
+								}),
+								capabilities.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									as: "span",
+									variant: "meta",
+									tone: "muted",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata, { children: capabilities.map((capability) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: capability }, capability)) })
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								role: "status",
+								className: isRunning ? "sr-only motion-reduce:not-sr-only" : void 0,
+								children: statusLabel
+							}),
+							startedAt !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ml-auto",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkflowClock, {
+									startedAt,
+									endedAt,
+									isRunning,
+									spansSuspension: props.spansSuspension
+								})
+							}),
+							actionBar
+						]
+					}),
+					body && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Collapsible.CollapsibleTrigger, {
+						className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							expanded ? "Collapse" : "Expand",
+							" ",
+							isForEach ? "loop" : "workflow"
+						] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_DisclosureChevron.DisclosureChevron, {
+							direction: "right",
+							className: "size-3.5"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Collapsible.CollapsibleContent, {
+						className: "h-155 overflow-hidden border-t border-dashed border-border",
+						children: body
+					})] })
+				]
+			}), hasActivity && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Activity.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 = require_CodeEditor.useCodemirrorTheme();
+	const getExtensions = (content) => {
+		if (language === "javascript") return [(0, _codemirror_lang_javascript.javascript)(), _codemirror_view.EditorView.lineWrapping];
+		if (language === "json") return [_codemirror_lang_json.jsonLanguage, _codemirror_view.EditorView.lineWrapping];
+		try {
+			JSON.parse(content);
+			return [_codemirror_lang_json.jsonLanguage, _codemirror_view.EditorView.lineWrapping];
+		} catch {
+			if (content.includes("=>") || content.includes("function") || content.includes("const ") || content.includes("return ")) return [(0, _codemirror_lang_javascript.javascript)(), _codemirror_view.EditorView.lineWrapping];
+			return [_codemirror_view.EditorView.lineWrapping];
+		}
+	};
+	if (typeof data !== "string") {
+		const content = JSON.stringify(data, null, 2);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative overflow-auto",
+			style: { maxHeight: 500 },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute top-2 right-2 z-10 rounded-full bg-muted",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_copy_button.CopyButton, { content })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "rounded-lg bg-muted p-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_uiw_react_codemirror.default, {
+					value: content,
+					theme,
+					extensions: [
+						_codemirror_lang_json.jsonLanguage,
+						_codemirror_view.EditorView.lineWrapping,
+						require_CodeEditor.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative overflow-auto",
+		style: { maxHeight: 500 },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute top-2 right-2 z-10 rounded-full bg-muted",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_copy_button.CopyButton, { content: data })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rounded-lg bg-muted p-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_uiw_react_codemirror.default, {
+				value: displayContent,
+				theme,
+				extensions: [...extensions, require_CodeEditor.codeFoldGutter],
+				basicSetup: { foldGutter: false }
+			})
+		})]
+	});
+};
+// src/ds/components/Workflow/data/workflow-edge-data-button.tsx
+var WorkflowEdgeDataButton = ({ previousStepId, output, label, selected, onInspect }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const dataLabel = label ?? (previousStepId ? `${previousStepId} output` : "Previous output");
+	if (output === void 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		size: "sm",
+		variant: "ghost",
+		onClick: onInspect ?? (() => setIsOpen(true)),
+		"aria-label": `View ${dataLabel}`,
+		"aria-pressed": selected,
+		className: require_utils.cn(require_primitives_raised_surface.raisedSurfaceStyle, require_primitives_raised_surface.surfaceStateLayerStyle, "h-7 rounded-lg px-2 text-foreground aria-pressed:before:bg-fill"),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Database, { className: "text-muted-foreground" }),
+		children: "Data"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.Dialog, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.DialogContent, {
+			size: "xl",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.DialogHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.DialogTitle, { children: "Step output" }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.DialogBody, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 rounded-lg border border-border bg-background p-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					variant: "caption",
+					tone: "ink",
+					className: "mb-2 block",
+					children: dataLabel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		!isStart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Handle, {
+			type: "target",
+			position: _xyflow_react.Position.Top,
+			style: { visibility: "hidden" }
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-workflow-boundary-node": true,
+			"data-testid": `workflow-boundary-${data.boundaryRole}`,
+			className: require_utils.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__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				variant: "meta",
+				children: data.label
+			})
+		}),
+		isStart && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Handle, {
+			type: "source",
+			position: _xyflow_react.Position.Bottom,
+			style: { visibility: "hidden" }
+		})
+	] });
+};
+// src/ds/components/Workflow/graph/workflow-data-edge-view.tsx
+function WorkflowDataEdgeView({ output, label, dataControl, ...props }) {
+	const source = (0, _xyflow_react.useInternalNode)(props.source);
+	const target = (0, _xyflow_react.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 === _xyflow_react.Position.Bottom;
+	const hasTopTarget = target && targetWidth !== void 0 && props.targetPosition === _xyflow_react.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] = (0, _xyflow_react.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 = (0, react.useId)();
+	const isExecuted = props.data?.edgeStatus === "success";
+	const pathColor = isExecuted ? "var(--success-indicator)" : "var(--muted-foreground)";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("marker", {
+			id: arrowId,
+			viewBox: "0 0 10 10",
+			refX: "9",
+			refY: "5",
+			markerWidth: "5",
+			markerHeight: "5",
+			orient: "auto",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: "M1 1 L9 5 L1 9 Z",
+				fill: pathColor
+			})
+		}) }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.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__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 } = (0, _xyflow_react.useViewport)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 px-5 py-4 text-meta text-muted-foreground",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+						size: "xs",
+						variant: "blue",
+						emphasis: "subtle",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GitFork, { "aria-hidden": true }),
+						children: group.label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.description })]
+				})
+			}, group.id);
+		})
+	});
+}
+// src/ds/components/Workflow/graph/zoom-slider.tsx
+var ZoomSlider = (0, react.forwardRef)(({ className, compact = false, onFitView, ...props }, ref) => {
+	const { zoom } = (0, _xyflow_react.useViewport)();
+	const { zoomTo, zoomIn, zoomOut, fitView } = (0, _xyflow_react.useReactFlow)();
+	const minZoom = (0, _xyflow_react.useStore)((state) => state.minZoom);
+	const maxZoom = (0, _xyflow_react.useStore)((state) => state.maxZoom);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_xyflow_react.Panel, {
+		ref,
+		className: require_utils.cn("flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				size: "icon-sm",
+				tooltip: "Zoom out",
+				disabled: zoom <= minZoom,
+				onClick: () => zoomOut({ duration: workflowCameraDuration() }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {})
+			}),
+			!compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Slider.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__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				size: "icon-sm",
+				tooltip: "Zoom in",
+				disabled: zoom >= maxZoom,
+				onClick: () => zoomIn({ duration: workflowCameraDuration() }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.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__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				size: "icon-sm",
+				tooltip: "Fit view",
+				onClick: onFitView ?? (() => fitView({
+					duration: workflowCameraDuration(),
+					maxZoom: 1
+				})),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.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 = (0, react.useRef)(null);
+	const backgroundId = (0, react.useId)();
+	const panelInset = (0, react.useContext)(WorkflowCanvasInsetContext);
+	const leftInset = variant === "default" ? panelInset : 0;
+	const isInline = variant === "inline";
+	const { getNodes, setCenter, fitView } = (0, _xyflow_react.useReactFlow)();
+	const nodesInitialized = (0, _xyflow_react.useNodesInitialized)();
+	const canvasWidth = (0, _xyflow_react.useStore)((state) => state.width);
+	const canvasHeight = (0, _xyflow_react.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;
+	(0, react.useEffect)(() => {
+		if (!canvasWidth || !canvasHeight || !nodesInitialized) return;
+		if (variant === "default") return;
+		fitView({
+			...workflowFitOptions(leftInset, isInline),
+			duration: 0
+		});
+	}, [
+		canvasWidth,
+		canvasHeight,
+		nodesInitialized,
+		inlineNodeLayout,
+		fitView,
+		leftInset,
+		isInline,
+		variant
+	]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: graphRef,
+		tabIndex: -1,
+		"data-testid": "workflow-graph-viewport",
+		className: require_utils.cn("size-full outline-none", variant === "nested" ? "bg-sidebar" : "bg-background"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_xyflow_react.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__ */ (0, react_jsx_runtime.jsx)(ZoomSlider, {
+					position: "top-right",
+					className: "m-2!",
+					compact: hasCompactZoom,
+					onFitView: () => fitView({
+						...workflowFitOptions(leftInset),
+						duration: workflowCameraDuration()
+					})
+				}),
+				groups && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkflowGraphGroups, {
+					nodes: nodes ?? [],
+					groups
+				}),
+				!isInline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Background, {
+					id: backgroundId,
+					variant: _xyflow_react.BackgroundVariant.Dots,
+					gap: 12,
+					size: .5
+				})
+			]
+		})
+	});
+}
+// src/ds/components/Workflow/graph/workflow-node-frame.tsx
+function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		!withoutTopHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Handle, {
+			type: "target",
+			position: _xyflow_react.Position.Top,
+			style: { visibility: "hidden" }
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "nodrag pointer-events-auto",
+			children
+		}),
+		!withoutBottomHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Handle, {
+			type: "source",
+			position: _xyflow_react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-col gap-3",
+		"data-testid": "workflow-debug-step-controls",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "rounded-xl border border-surface-rim bg-background p-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "meta",
+					tone: "muted",
+					children: "Next step"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+					size: "sm",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, {}),
+					emphasis: "subtle",
+					children: "Step by step"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-subheading break-words text-foreground",
+				"aria-live": "polite",
+				children: nextStepLabel || nextStepFallback
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "primary",
+					className: "min-w-0 flex-1",
+					"aria-label": "Run next step",
+					onClick: onRunNextStep,
+					disabled: actionsDisabled,
+					icon: isStreaming ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Loader2, { className: "motion-safe:animate-spin" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.StepForwardIcon, {}),
+					children: isStreaming ? "Running step…" : "Run next step"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-md",
+					tooltip: "Continue full run",
+					onClick: onContinueRun,
+					disabled: actionsDisabled,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PlayIcon, {})
+				}),
+				children
+			]
+		})]
+	});
+}
+// src/ds/components/Workflow/graph/workflow-graph-placeholder.tsx
+function WorkflowGraphPlaceholder(props) {
+	if (props.isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "p-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.Skeleton, { className: "h-full" })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid h-full place-items-center",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircleIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(WorkflowConditionCardView, {
+		...props,
+		type: conditions[0]?.type,
+		conditions
+	});
+}
+// src/ds/components/Workflow/controls/workflow-step-actions.tsx
+function WorkflowStepActions({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		size: "icon-sm",
+		variant: "ghost",
+		"aria-label": "Step actions",
+		title: "Step actions",
+		className: "nodrag nopan",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MoreVerticalIcon, {})
+	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Content, {
+		align: "end",
+		children
+	})] });
+}
+// src/ds/components/Workflow/controls/workflow-step-action.tsx
+var actions = {
+	nested: {
+		icon: lucide_react.PanelRightIcon,
+		label: "View nested graph",
+		activeLabel: "Hide nested graph"
+	},
+	map: {
+		icon: lucide_react.BracesIcon,
+		label: "Map config",
+		activeLabel: "Hide map config"
+	},
+	timeTravel: {
+		icon: lucide_react.Clock3Icon,
+		label: "Time travel"
+	},
+	runStep: {
+		icon: lucide_react.PlayIcon,
+		label: "Run step"
+	},
+	continueRun: {
+		icon: lucide_react.StepForwardIcon,
+		label: "Continue run"
+	},
+	resumeData: {
+		icon: lucide_react.RotateCcwIcon,
+		label: "Resume data"
+	},
+	error: {
+		icon: lucide_react.AlertCircleIcon,
+		label: "Error"
+	},
+	tripwire: {
+		icon: lucide_react.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__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+		onSelect,
+		className: action === "tripwire" ? "text-warning-foreground" : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+}
+Object.defineProperty(exports, "BADGE_COLORS", {
+	enumerable: true,
+	get: function() {
+		return BADGE_COLORS;
+	}
+});
+Object.defineProperty(exports, "BADGE_ICONS", {
+	enumerable: true,
+	get: function() {
+		return BADGE_ICONS;
+	}
+});
+Object.defineProperty(exports, "WORKFLOW_BOUNDARY_NODE_TYPE", {
+	enumerable: true,
+	get: function() {
+		return WORKFLOW_BOUNDARY_NODE_TYPE;
+	}
+});
+Object.defineProperty(exports, "WORKFLOW_DATA_EDGE_TYPE", {
+	enumerable: true,
+	get: function() {
+		return WORKFLOW_DATA_EDGE_TYPE;
+	}
+});
+Object.defineProperty(exports, "WorkflowBoundaryNode", {
+	enumerable: true,
+	get: function() {
+		return WorkflowBoundaryNode;
+	}
+});
+Object.defineProperty(exports, "WorkflowCanvasInsetContext", {
+	enumerable: true,
+	get: function() {
+		return WorkflowCanvasInsetContext;
+	}
+});
+Object.defineProperty(exports, "WorkflowClock", {
+	enumerable: true,
+	get: function() {
+		return WorkflowClock;
+	}
+});
+Object.defineProperty(exports, "WorkflowCodeContent", {
+	enumerable: true,
+	get: function() {
+		return WorkflowCodeContent;
+	}
+});
+Object.defineProperty(exports, "WorkflowConditionCard", {
+	enumerable: true,
+	get: function() {
+		return WorkflowConditionCard;
+	}
+});
+Object.defineProperty(exports, "WorkflowConditionCardView", {
+	enumerable: true,
+	get: function() {
+		return WorkflowConditionCardView;
+	}
+});
+Object.defineProperty(exports, "WorkflowDataEdgeView", {
+	enumerable: true,
+	get: function() {
+		return WorkflowDataEdgeView;
+	}
+});
+Object.defineProperty(exports, "WorkflowDebugControls", {
+	enumerable: true,
+	get: function() {
+		return WorkflowDebugControls;
+	}
+});
+Object.defineProperty(exports, "WorkflowEdgeDataButton", {
+	enumerable: true,
+	get: function() {
+		return WorkflowEdgeDataButton;
+	}
+});
+Object.defineProperty(exports, "WorkflowGraphCanvas", {
+	enumerable: true,
+	get: function() {
+		return WorkflowGraphCanvas;
+	}
+});
+Object.defineProperty(exports, "WorkflowGraphPlaceholder", {
+	enumerable: true,
+	get: function() {
+		return WorkflowGraphPlaceholder;
+	}
+});
+Object.defineProperty(exports, "WorkflowNodeFrame", {
+	enumerable: true,
+	get: function() {
+		return WorkflowNodeFrame;
+	}
+});
+Object.defineProperty(exports, "WorkflowStepAction", {
+	enumerable: true,
+	get: function() {
+		return WorkflowStepAction;
+	}
+});
+Object.defineProperty(exports, "WorkflowStepActions", {
+	enumerable: true,
+	get: function() {
+		return WorkflowStepActions;
+	}
+});
+Object.defineProperty(exports, "WorkflowStepCardView", {
+	enumerable: true,
+	get: function() {
+		return WorkflowStepCardView;
+	}
+});
+Object.defineProperty(exports, "WorkflowTypeBadge", {
+	enumerable: true,
+	get: function() {
+		return WorkflowTypeBadge;
+	}
+});
+Object.defineProperty(exports, "getConditionIconAndColor", {
+	enumerable: true,
+	get: function() {
+		return getConditionIconAndColor;
+	}
+});
+Object.defineProperty(exports, "getConditionIndicator", {
+	enumerable: true,
+	get: function() {
+		return getConditionIndicator;
+	}
+});
+Object.defineProperty(exports, "getNodeBadgeInfo", {
+	enumerable: true,
+	get: function() {
+		return getNodeBadgeInfo;
+	}
+});
+Object.defineProperty(exports, "getNodeIndicators", {
+	enumerable: true,
+	get: function() {
+		return getNodeIndicators;
+	}
+});
+Object.defineProperty(exports, "workflowFitOptions", {
+	enumerable: true,
+	get: function() {
+		return workflowFitOptions;
+	}
+});
+
+//# sourceMappingURL=Workflow-DIfTVqZs.cjs.map