@mastra/playground-ui 59.0.0 → 60.0.0-alpha.1

package/dist/workflow-condition-card-ByvSwtXl.js

@@ -0,0 +1,886 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Repeat2, Workflow, GitFork, ArrowRightLeft, CalendarClock, Timer, Bot, Wrench, GitBranch, Braces, CornerDownRight, RefreshCw, Repeat, Repeat1, Network, Layers, Clock, PlayCircle, List, ChevronRight, Minus, Plus, Maximize } from 'lucide-react';
+import { useState, useEffect, forwardRef, useRef, useId, useContext } from 'react';
+import { c as cn } from './cn-65Adrsfj.js';
+import { formatShortDate, formatDate } from './utils/date-format.es.js';
+import { formatDuration } from './utils/duration.es.js';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { B as Badge } from './Badge-Bzn8Z-_I.js';
+import { a as ActivityWick } from './activity-B8TfxRNU.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from './collapsible-DhhP5p1j.js';
+import { S as Shimmer } from './shimmer-BN7Dzm37.js';
+import { raisedSurfaceStyle, surfaceStateLayerStyle } from './primitives/raised-surface.es.js';
+import { Handle, Position, useViewport, useReactFlow, useStore, Panel, useNodesInitialized, ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
+import { W as WorkflowCanvasInsetContext, w as workflowFitOptions } from './workflow-canvas-inset-23mBz2N6.js';
+import { B as Button } from './Button-B8nF87ai.js';
+import { S as Slider } from './slider-MM3K0Pyv.js';
+import '@xyflow/react/dist/style.css';
+import { C as Code } from './code-BeWhOFT4.js';
+import { formatTypeScript } from './utils/formatting.es.js';
+import { C as CopyButton } from './copy-button-DcZ1mdw4.js';
+
+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 };
+}
+
+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 });
+}
+
+const BADGE_COLORS = {
+  sleep: "#A855F7",
+  forEach: "#F97316",
+  map: "#F97316",
+  parallel: "#3B82F6",
+  suspend: "#EC4899",
+  after: "#14B8A6",
+  workflow: "#8B5CF6",
+  when: "#ECB047",
+  dountil: "#8B5CF6",
+  dowhile: "#06B6D4",
+  until: "#F59E0B",
+  while: "#10B981",
+  if: "#3B82F6",
+  else: "#6B7280"
+};
+const 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
+};
+const 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"
+};
+const 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 };
+  }
+};
+const getConditionIndicator = (type) => {
+  const { icon, color } = getConditionIconAndColor(type);
+  if (!type || !icon || !color) {
+    return void 0;
+  }
+  return {
+    id: `condition-${type}`,
+    label: CONDITION_LABELS[type] ?? `${type} condition`,
+    icon,
+    color
+  };
+};
+const 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);
+  const hasSpecialBadge = isSleepNode || Boolean(canSuspend || isParallel) || isForEachNode || isMapNode || isNestedWorkflow;
+  return {
+    isSleepNode,
+    isForEachNode,
+    isMapNode,
+    isNestedWorkflow,
+    hasSpecialBadge
+  };
+};
+const 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;
+};
+
+const 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
+    }
+  );
+}
+
+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);
+}
+
+const 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" });
+}
+
+const 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-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-accent3`,
+      "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" : "yellow", emphasis: "muted", icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }), children: label }),
+          hasExpression && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "ml-auto", children: "Expression" }),
+            /* @__PURE__ */ jsx(CopyButton, { content: copyContent, tooltip: "Copy expression", size: "sm", 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 })
+      ]
+    }
+  );
+}
+
+const DIAL_CENTER = 58;
+const CLOCK_TICK_ANGLES = Array.from({ length: 60 }, (_, index) => index * 6);
+const 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" })
+  ] });
+}
+
+const 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("span", { className: "flex items-baseline gap-1 text-display 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 })
+    }
+  );
+}
+
+const statusLabels = {
+  running: "Running",
+  success: "Completed",
+  failed: "Failed",
+  suspended: "Needs input",
+  waiting: "Waiting",
+  paused: "Paused",
+  skipped: "Skipped",
+  canceled: "Canceled",
+  tripwire: "Tripwire blocked"
+};
+const statusLineClasses = {
+  success: "after:bg-positive1",
+  failed: "after:bg-negative1",
+  tripwire: "after:bg-warning1",
+  waiting: "after:bg-accent5",
+  paused: "after:bg-muted-foreground",
+  skipped: "after:bg-muted-foreground"
+};
+const footerStatusClasses = {
+  success: "text-positive1",
+  failed: "text-negative1",
+  suspended: "text-warning1",
+  tripwire: "text-warning1"
+};
+const suspendedWickStyle = { "--belt-hue": "var(--warning1)" };
+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-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-accent3",
+            isSelected && "outline-1 outline-offset-4 outline-border-focus",
+            isBodyExpanded && "border-dashed border-muted-foreground/40 shadow-none",
+            isWaiting && "border-accent3",
+            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("span", { className: "min-w-0 text-column wrap-anywhere text-foreground", 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("span", { className: "text-caption wrap-anywhere text-muted-foreground", children: description }),
+                      /* @__PURE__ */ jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
+                      isWaiting && /* @__PURE__ */ jsx("span", { className: "text-meta text-accent3", children: "Next step in debug" }),
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-2 py-1 text-meta", 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-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-positive1",
+                            "aria-label": `${label} completed items`,
+                            value: foreachProgress.completedCount,
+                            max: foreachProgress.totalCount
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { children: "No items to process" })
+                      ] }),
+                      capabilities.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: capabilities.join(" · ") })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__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, { children: [
+                /* @__PURE__ */ jsxs(
+                  CollapsibleTrigger,
+                  {
+                    className: cn(
+                      surfaceStateLayerStyle,
+                      "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:shadow-none focus-visible:ring-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        expanded ? "Collapse" : "Expand",
+                        " ",
+                        isForEach ? "loop" : "workflow"
+                      ] }),
+                      /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, size: 14 })
+                    ]
+                  }
+                ),
+                /* @__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
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+const WorkflowBoundaryNode = ({ data }) => {
+  const isStart = data.boundaryRole === "start";
+  return /* @__PURE__ */ jsxs(Fragment, { 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" } })
+  ] });
+};
+
+function workflowCameraDuration() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+}
+
+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: "muted", icon: /* @__PURE__ */ jsx(GitFork, { "aria-hidden": true }), children: group.label }),
+              /* @__PURE__ */ jsx("span", { children: group.description })
+            ] })
+          },
+          group.id
+        );
+      })
+    }
+  );
+}
+
+const 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-[140px]",
+            "aria-label": "Canvas zoom",
+            value: [zoom],
+            min: minZoom,
+            max: maxZoom,
+            step: 0.01,
+            largeStep: 0.25,
+            format: { style: "percent" },
+            onValueChange: (values) => {
+              const [nextZoom] = values;
+              if (nextZoom !== void 0) void 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";
+
+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;
+    void 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) {
+      void fitView({ ...workflowFitOptions(leftInset), nodes: [{ id: focusNode.id }], duration });
+      return;
+    }
+    void 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: 0.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: 0.5 })
+          ]
+        }
+      )
+    }
+  );
+}
+
+function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { 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" } })
+  ] });
+}
+
+function WorkflowConditionCard({ conditions, ...props }) {
+  return /* @__PURE__ */ jsx(WorkflowConditionCardView, { ...props, type: conditions[0]?.type, conditions });
+}
+
+export { BADGE_COLORS as B, WorkflowBoundaryNode as W, BADGE_ICONS as a, WorkflowClock as b, WorkflowConditionCard as c, WorkflowConditionCardView as d, WorkflowGraphCanvas as e, WorkflowNodeFrame as f, WorkflowStepCardView as g, WorkflowTypeBadge as h, getConditionIconAndColor as i, getConditionIndicator as j, getNodeBadgeInfo as k, getNodeIndicators as l };
+//# sourceMappingURL=workflow-condition-card-ByvSwtXl.js.map