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

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

@@ -1,901 +0,0 @@
-'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 utils_dateFormat = require('./utils/date-format.cjs.js');
-const utils_duration = require('./utils/duration.cjs.js');
-const Txt = require('./Txt-DPmEpNbp.cjs');
-const Badge = require('./Badge-DFNxcz-r.cjs');
-const activity = require('./activity-BYMLNb0G.cjs');
-const collapsible = require('./collapsible-BFSJouuI.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-CIwF6NHM.cjs');
-const slider = require('./slider-C-Fda4HC.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-1PyYnSGS.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: "#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: 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-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__ */ 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: "muted", 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("span", { className: "flex items-baseline gap-1 text-display 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-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] = 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-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__ */ 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("span", { className: "min-w-0 text-column wrap-anywhere text-foreground", 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("span", { className: "text-caption wrap-anywhere text-muted-foreground", children: description }),
-                      /* @__PURE__ */ jsxRuntime.jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
-                      isWaiting && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-accent3", children: "Next step in debug" }),
-                      isForEach && foreachProgress && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-2 py-1 text-meta", 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-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__ */ jsxRuntime.jsx("span", { children: "No items to process" })
-                      ] }),
-                      capabilities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", 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:shadow-none focus-visible:ring-0"
-                    ),
-                    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: "muted", 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-BMgzF6ef.cjs.map