@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/workflow-condition-card-CfjhZb0m.cjs

@@ -0,0 +1,909 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const utils_dateFormat = require('./utils/date-format.cjs.js');
+const utils_duration = require('./utils/duration.cjs.js');
+const Badge = require('./Badge-H8K5WrXg.cjs');
+const activity = require('./activity-BYMLNb0G.cjs');
+const collapsible = require('./collapsible-jfzzU7Gp.cjs');
+const shimmer = require('./shimmer-DbSkqomT.cjs');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const react = require('@xyflow/react');
+const workflowCanvasInset = require('./workflow-canvas-inset-CMasaX9u.cjs');
+const Button = require('./Button-BnmR2HRc.cjs');
+const slider = require('./slider-T_BIZUV0.cjs');
+require('@xyflow/react/dist/style.css');
+const code = require('./code-B-x-9sJ1.cjs');
+const utils_formatting = require('./utils/formatting.cjs.js');
+const copyButton = require('./copy-button-C6nXDjBz.cjs');
+
+function getWorkflowCardBadge(props) {
+  if (props.isForEach) return { label: "For each", tone: "orange", Icon: lucideReact.Repeat2, indicator: "foreach" };
+  if (props.isNestedWorkflowStep || props.stepGraph)
+    return { label: "Workflow", tone: "purple", Icon: lucideReact.Workflow, indicator: "workflow" };
+  if (props.isParallel && !props.nodeKind)
+    return { label: "Parallel", tone: "blue", Icon: lucideReact.GitFork, indicator: "parallel" };
+  if (props.nodeKind === "map" || props.mapConfig)
+    return { label: "Map", tone: "orange", Icon: lucideReact.ArrowRightLeft, indicator: "map" };
+  if (props.nodeKind === "wait-until" || props.date)
+    return { label: "Wait until", tone: "purple", Icon: lucideReact.CalendarClock, indicator: "sleep-until" };
+  if (props.nodeKind === "delay" || props.duration !== void 0)
+    return { label: "Delay", tone: "purple", Icon: lucideReact.Timer, indicator: "sleep" };
+  if (props.nodeKind === "agent") return { label: "Agent", tone: "cyan", Icon: lucideReact.Bot };
+  if (props.nodeKind === "tool") return { label: "Tool", tone: "pink", Icon: lucideReact.Wrench };
+  if (props.nodeKind === "classifier") return { label: "Classifier", tone: "blue", Icon: lucideReact.GitBranch };
+  return { label: "Step", tone: "neutral", Icon: lucideReact.Braces };
+}
+
+function WorkflowTypeBadge(props) {
+  const { label, Icon, tone } = getWorkflowCardBadge(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: tone, icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true }), children: label });
+}
+
+const 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-yellow-indicator)",
+  dountil: "var(--badge-purple-indicator)",
+  dowhile: "var(--badge-cyan-indicator)",
+  until: "var(--badge-yellow-indicator)",
+  while: "var(--badge-green-indicator)",
+  if: "var(--badge-blue-indicator)",
+  else: "var(--muted-foreground)"
+};
+const BADGE_ICONS = {
+  sleep: lucideReact.Timer,
+  sleepUntil: lucideReact.CalendarClock,
+  forEach: lucideReact.List,
+  map: lucideReact.List,
+  parallel: lucideReact.Workflow,
+  suspend: lucideReact.PlayCircle,
+  after: lucideReact.Clock,
+  workflow: lucideReact.Layers,
+  when: lucideReact.Network,
+  dountil: lucideReact.Repeat1,
+  dowhile: lucideReact.Repeat,
+  until: lucideReact.Timer,
+  while: lucideReact.RefreshCw,
+  if: lucideReact.GitBranch,
+  else: lucideReact.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__ */ jsxRuntime.jsx(RunningWorkflowClock, { startedAt, spansSuspension }, startedAt);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ElapsedTime, { startedAt, endedAt, spansSuspension });
+};
+function RunningWorkflowClock({ startedAt, spansSuspension }) {
+  const [time, setTime] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 100);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ElapsedTime, { startedAt, endedAt: time, spansSuspension });
+}
+function ElapsedTime({ startedAt, endedAt, spansSuspension }) {
+  const elapsed = endedAt === void 0 ? void 0 : utils_duration.formatDuration(endedAt - startedAt);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(code.Code, { code: source });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormattedConditionSource, { source }, source);
+}
+function FormattedConditionSource({ source }) {
+  const [formatted, setFormatted] = React.useState();
+  React.useEffect(() => {
+    let cancelled = false;
+    utils_formatting.formatTypeScript(source).then((expression) => {
+      if (!cancelled) setFormatted(expression.trim());
+    }).catch(() => void 0);
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+  return /* @__PURE__ */ jsxRuntime.jsx(code.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 ?? lucideReact.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${primitives_raisedSurface.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__ */ jsxRuntime.jsxs("div", { className: "flex h-[46px] items-center gap-2 px-2.5 text-meta text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: type === "else" ? "neutral" : "yellow", emphasis: "subtle", icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true }), children: label }),
+          hasExpression && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: "Expression" }),
+            /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: copyContent, tooltip: "Copy expression", size: "sm", className: "nodrag nopan" })
+          ] })
+        ] }),
+        hasExpression ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+              condition.conj && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "neutral", children: condition.conj.toUpperCase() }),
+              condition.fnString !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ jsxRuntime.jsx(code.Code, { code: expression })
+            ] }, key))
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${surfaceClasses} p-3 text-muted-foreground`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
+        actionBar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "line",
+    {
+      x1: inner.x,
+      y1: inner.y,
+      x2: outer.x,
+      y2: outer.y,
+      className: utils_cn.cn(major ? "stroke-placeholder" : "stroke-border-strong", className),
+      ...props
+    }
+  );
+}
+function DialHand({ angle, length }) {
+  const tip = pointAt(angle, length);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "block size-28 shrink-0 text-muted-foreground", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
+    tickAngles.map((angle, index) => /* @__PURE__ */ jsxRuntime.jsx(DialTick, { angle, major: index % 5 === 0 }, angle)),
+    children
+  ] }) });
+}
+function ClockDial({ date }) {
+  const minutes = date.getUTCMinutes();
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialFace, { tickAngles: CLOCK_TICK_ANGLES, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialHand, { angle: (date.getUTCHours() % 12 + minutes / 60) * 30, length: 26 }),
+    /* @__PURE__ */ jsxRuntime.jsx(DialHand, { angle: minutes * 6, length: 37 }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(DialFace, { tickAngles: DURATION_TICK_ANGLES, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialTick,
+      {
+        angle: -120 + amount / scale * 240,
+        major: true,
+        className: "stroke-foreground stroke-2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-muted-foreground font-body text-meta", children: [
+      scale,
+      " ",
+      unit
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "mt-1 flex min-h-27 items-center justify-between gap-1 text-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "z-10 flex min-w-0 flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Txt.Txt,
+        {
+          as: "span",
+          variant: "display",
+          className: "flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums",
+          children: [
+            value,
+            unit && /* @__PURE__ */ jsxRuntime.jsx("small", { className: "text-meta tracking-normal text-muted-foreground", children: unit })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: captionClasses, children: "Schedule unavailable" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TimingReading,
+      {
+        value: utils_dateFormat.formatDate(scheduled, "time", { timeZone: "UTC" }) ?? "",
+        unit: "UTC",
+        caption: utils_dateFormat.formatShortDate(scheduled, { timeZone: "UTC", now: 0 }) ?? "",
+        dial: /* @__PURE__ */ jsxRuntime.jsx(ClockDial, { date: scheduled })
+      }
+    );
+  }
+  if (duration === void 0) return null;
+  if (!Number.isFinite(duration) || duration < 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: captionClasses, children: "Delay unavailable" });
+  }
+  const reading = durationReading(duration);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TimingReading,
+    {
+      value: utils_duration.formatDuration(duration) ?? "",
+      caption: "Configured delay",
+      dial: /* @__PURE__ */ jsxRuntime.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-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"
+};
+const footerStatusClasses = {
+  success: "text-success-indicator",
+  failed: "text-destructive-indicator",
+  suspended: "text-warning-indicator",
+  tripwire: "text-warning-indicator"
+};
+const 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] = 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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.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__ */ jsxRuntime.jsxs(
+        collapsible.Collapsible,
+        {
+          open: expanded,
+          onOpenChange: setExpanded,
+          className: utils_cn.cn(
+            primitives_raisedSurface.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__ */ jsxRuntime.jsxs("div", { className: "m-0.5 overflow-hidden rounded-(--card-radius)", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Summary,
+                {
+                  className: utils_cn.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "column", tone: "ink", className: "min-w-0 wrap-anywhere", title: label, children: /* @__PURE__ */ jsxRuntime.jsx(shimmer.Shimmer, { active: isRunning, children: label }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(WorkflowTypeBadge, { ...props })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "wrap-anywhere", children: description }),
+                      /* @__PURE__ */ jsxRuntime.jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
+                      isWaiting && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", className: "text-info-indicator", children: "Next step in debug" }),
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "meta", className: "flex flex-col gap-2 py-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: foreachProgress.completedCount }),
+                          " of ",
+                          foreachProgress.totalCount,
+                          " items complete"
+                        ] }),
+                        foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "No items to process" })
+                      ] }),
+                      capabilities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", tone: "muted", children: capabilities.join(" · ") })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: utils_cn.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__ */ jsxRuntime.jsx("span", { role: "status", className: isRunning ? "sr-only motion-reduce:not-sr-only" : void 0, children: statusLabel }),
+                    startedAt !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      WorkflowClock,
+                      {
+                        startedAt,
+                        endedAt,
+                        isRunning,
+                        spansSuspension: props.spansSuspension
+                      }
+                    ) }),
+                    actionBar
+                  ]
+                }
+              ),
+              body && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  collapsible.CollapsibleTrigger,
+                  {
+                    className: utils_cn.cn(
+                      primitives_raisedSurface.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:outline-hidden"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        expanded ? "Collapse" : "Expand",
+                        " ",
+                        isForEach ? "loop" : "workflow"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, size: 14 })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { className: "h-155 overflow-hidden border-t border-dashed border-border", children: body })
+              ] })
+            ] }),
+            hasActivity && /* @__PURE__ */ jsxRuntime.jsx(
+              activity.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !isStart && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Top, style: { visibility: "hidden" } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-workflow-boundary-node": true,
+        "data-testid": `workflow-boundary-${data.boundaryRole}`,
+        className: utils_cn.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__ */ jsxRuntime.jsx(Txt.Txt, { variant: "meta", children: data.label })
+      }
+    ),
+    isStart && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.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 } = react.useViewport();
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-5 py-4 text-meta text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "xs", variant: "blue", emphasis: "subtle", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitFork, { "aria-hidden": true }), children: group.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: group.description })
+            ] })
+          },
+          group.id
+        );
+      })
+    }
+  );
+}
+
+const ZoomSlider = React.forwardRef(({ className, compact = false, onFitView, ...props }, ref) => {
+  const { zoom } = react.useViewport();
+  const { zoomTo, zoomIn, zoomOut, fitView } = react.useReactFlow();
+  const minZoom = react.useStore((state) => state.minZoom);
+  const maxZoom = react.useStore((state) => state.maxZoom);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Panel,
+    {
+      ref,
+      className: utils_cn.cn(
+        "flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            size: "icon-sm",
+            tooltip: "Zoom out",
+            disabled: zoom <= minZoom,
+            onClick: () => zoomOut({ duration: workflowCameraDuration() }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, {})
+          }
+        ),
+        !compact && /* @__PURE__ */ jsxRuntime.jsx(
+          slider.Slider,
+          {
+            className: "w-35",
+            "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__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            size: "icon-sm",
+            tooltip: "Zoom in",
+            disabled: zoom >= maxZoom,
+            onClick: () => zoomIn({ duration: workflowCameraDuration() }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          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__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            size: "icon-sm",
+            tooltip: "Fit view",
+            onClick: onFitView ?? (() => fitView({ duration: workflowCameraDuration(), maxZoom: 1 })),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {})
+          }
+        )
+      ]
+    }
+  );
+});
+ZoomSlider.displayName = "ZoomSlider";
+
+function WorkflowGraphCanvas({
+  nodes,
+  edges,
+  nodeTypes,
+  edgeTypes,
+  onNodesChange,
+  onNodeClick,
+  focusNodeId,
+  groups,
+  variant = "default"
+}) {
+  const graphRef = React.useRef(null);
+  const backgroundId = React.useId();
+  const panelInset = React.useContext(workflowCanvasInset.WorkflowCanvasInsetContext);
+  const leftInset = variant === "default" ? panelInset : 0;
+  const isInline = variant === "inline";
+  const { getNodes, setCenter, fitView } = react.useReactFlow();
+  const nodesInitialized = react.useNodesInitialized();
+  const canvasWidth = react.useStore((state) => state.width);
+  const canvasHeight = 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;
+  React.useEffect(() => {
+    if (!canvasWidth || !canvasHeight || !nodesInitialized) return;
+    if (variant === "default") return;
+    void fitView({ ...workflowCanvasInset.workflowFitOptions(leftInset, isInline), duration: 0 });
+  }, [canvasWidth, canvasHeight, nodesInitialized, inlineNodeLayout, fitView, leftInset, isInline, variant]);
+  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) {
+      void fitView({ ...workflowCanvasInset.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: graphRef,
+      tabIndex: -1,
+      "data-testid": "workflow-graph-viewport",
+      className: utils_cn.cn("size-full outline-none", variant === "nested" ? "bg-sidebar" : "bg-background"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react.ReactFlow,
+        {
+          fitView: variant === "default",
+          fitViewOptions: workflowCanvasInset.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__ */ jsxRuntime.jsx(
+              ZoomSlider,
+              {
+                position: "top-right",
+                className: "m-2!",
+                compact: hasCompactZoom,
+                onFitView: () => fitView({ ...workflowCanvasInset.workflowFitOptions(leftInset), duration: workflowCameraDuration() })
+              }
+            ),
+            groups && /* @__PURE__ */ jsxRuntime.jsx(WorkflowGraphGroups, { nodes: nodes ?? [], groups }),
+            !isInline && /* @__PURE__ */ jsxRuntime.jsx(react.Background, { id: backgroundId, variant: react.BackgroundVariant.Dots, gap: 12, size: 0.5 })
+          ]
+        }
+      )
+    }
+  );
+}
+
+function WorkflowNodeFrame({ withoutTopHandle, withoutBottomHandle, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !withoutTopHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Top, style: { visibility: "hidden" } }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nodrag pointer-events-auto", children }),
+    !withoutBottomHandle && /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Bottom, style: { visibility: "hidden" } })
+  ] });
+}
+
+function WorkflowConditionCard({ conditions, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkflowConditionCardView, { ...props, type: conditions[0]?.type, conditions });
+}
+
+exports.BADGE_COLORS = BADGE_COLORS;
+exports.BADGE_ICONS = BADGE_ICONS;
+exports.WorkflowBoundaryNode = WorkflowBoundaryNode;
+exports.WorkflowClock = WorkflowClock;
+exports.WorkflowConditionCard = WorkflowConditionCard;
+exports.WorkflowConditionCardView = WorkflowConditionCardView;
+exports.WorkflowGraphCanvas = WorkflowGraphCanvas;
+exports.WorkflowNodeFrame = WorkflowNodeFrame;
+exports.WorkflowStepCardView = WorkflowStepCardView;
+exports.WorkflowTypeBadge = WorkflowTypeBadge;
+exports.getConditionIconAndColor = getConditionIconAndColor;
+exports.getConditionIndicator = getConditionIndicator;
+exports.getNodeBadgeInfo = getNodeBadgeInfo;
+exports.getNodeIndicators = getNodeIndicators;
+//# sourceMappingURL=workflow-condition-card-CfjhZb0m.cjs.map