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

package/dist/components/Workflow.cjs.js

@@ -5,28 +5,29 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const React = require('react');
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Badge = require('../Badge-RWi6V_JT.cjs');
-const Txt = require('../Txt-C7rZCmrg.cjs');
-const utils_number = require('../utils/number.cjs.js');
+const Badge = require('../Badge-BEeYtjmv.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
+const utils_duration = require('../utils/duration.cjs.js');
 const code = require('../code-DhrdtZce.cjs');
 const utils_formatting = require('../utils/formatting.cjs.js');
-const copyButton = require('../copy-button-CmQxxSUq.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
-const activity = require('../activity-1GW2mu-d.cjs');
-const collapsible = require('../collapsible-C3x1n6sF.cjs');
-const shimmer = require('../shimmer-CmCazK2A.cjs');
+const copyButton = require('../copy-button-BbDBpBMl.cjs');
+const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const activity = require('../activity-BYMLNb0G.cjs');
+const collapsible = require('../collapsible-BvrI6XnN.cjs');
+const shimmer = require('../shimmer-DbSkqomT.cjs');
 const langJavascript = require('@codemirror/lang-javascript');
 const langJson = require('@codemirror/lang-json');
 const view = require('@codemirror/view');
 const ReactCodeMirror = require('@uiw/react-codemirror');
-const codeEditor = require('../code-editor-e1JSppW0.cjs');
-const Button = require('../Button-C2dx_QZN.cjs');
-const dialog = require('../dialog-B3DNnoZ3.cjs');
+const codeEditor = require('../code-editor-DgY7d8kg.cjs');
+const Button = require('../Button-CVewl8nT.cjs');
+const dialog = require('../dialog-Dm33cZqt.cjs');
 const react = require('@xyflow/react');
-const slider = require('../slider-Kco52AqT.cjs');
+const slider = require('../slider-C-Fda4HC.cjs');
 require('@xyflow/react/dist/style.css');
-const skeleton = require('../skeleton-gdUQjWPU.cjs');
-const dropdownMenu = require('../dropdown-menu-DfX8T0jb.cjs');
+const skeleton = require('../skeleton-cXUjPrq9.cjs');
+const dropdownMenu = require('../dropdown-menu-DNRCA4Gj.cjs');
 
 const WorkflowCanvasInsetContext = React.createContext(0);
 function workflowFitOptions(leftInset, isInline = false) {
@@ -215,24 +216,32 @@ const getNodeIndicators = (props) => {
   return indicators;
 };
 
-const WorkflowClock = ({ startedAt, endedAt, isRunning = false }) => {
+const WorkflowClock = ({ startedAt, endedAt, isRunning = false, spansSuspension }) => {
   if (isRunning && endedAt === void 0 && Number.isFinite(startedAt)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(RunningWorkflowClock, { startedAt }, startedAt);
+    return /* @__PURE__ */ jsxRuntime.jsx(RunningWorkflowClock, { startedAt, spansSuspension }, startedAt);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ElapsedTime, { startedAt, endedAt });
+  return /* @__PURE__ */ jsxRuntime.jsx(ElapsedTime, { startedAt, endedAt, spansSuspension });
 };
-function RunningWorkflowClock({ startedAt }) {
+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 });
+  return /* @__PURE__ */ jsxRuntime.jsx(ElapsedTime, { startedAt, endedAt: time, spansSuspension });
 }
-function ElapsedTime({ startedAt, endedAt }) {
-  const duration = endedAt === void 0 ? NaN : endedAt - startedAt;
-  const timeDiff = Number.isFinite(duration) && duration >= 0 ? duration : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-xs", className: "text-neutral3 font-mono whitespace-nowrap", children: timeDiff === void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": "Timing unavailable", children: "—" }) : `${utils_number.toSigFigs(timeDiff, 3)}ms` });
+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",
+      className: "font-mono 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) {
@@ -259,7 +268,7 @@ function FormattedConditionSource({ 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-surface3 text-ui-xs";
+const surfaceClasses = "rounded-[calc(var(--radius-xl)-2px)] bg-card text-meta";
 function WorkflowConditionCardView({
   type,
   conditions,
@@ -282,12 +291,12 @@ function WorkflowConditionCardView({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "border-border1 bg-surface2 shadow-panel has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl border p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4",
+      className: `${primitives_raisedSurface.raisedSurfaceStyle} has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4`,
       "data-workflow-node": true,
       "data-testid": "workflow-condition-node",
       "data-workflow-step-status": previousDisplayStatus ?? "idle",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-xs text-neutral3 flex h-[46px] items-center gap-2 px-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-meta text-muted-foreground flex h-[46px] items-center gap-2 px-2.5", 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" }),
@@ -300,13 +309,13 @@ function WorkflowConditionCardView({
             role: "region",
             "aria-label": "Condition details",
             tabIndex: 0,
-            className: `${surfaceClasses} text-neutral5 nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
+            className: `${surfaceClasses} text-foreground nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_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} text-neutral3 p-3`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
+        ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${surfaceClasses} text-muted-foreground p-3`, 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 })
       ]
     }
@@ -333,7 +342,7 @@ function DialTick({ angle, major, className, ...props }) {
       y1: inner.y,
       x2: outer.x,
       y2: outer.y,
-      className: utils_cn.cn(major ? "stroke-neutral2" : "stroke-border2", className),
+      className: utils_cn.cn(major ? "stroke-placeholder" : "stroke-border-strong", className),
       ...props
     }
   );
@@ -347,13 +356,13 @@ function DialHand({ angle, length }) {
       y1: DIAL_CENTER,
       x2: tip.x,
       y2: tip.y,
-      className: "stroke-neutral4 stroke-[1.5]",
+      className: "stroke-muted-foreground stroke-[1.5]",
       strokeLinecap: "round"
     }
   );
 }
 function DialFace({ tickAngles, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral4 block size-28 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground block size-28 shrink-0", "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
   ] }) });
@@ -374,20 +383,20 @@ function DurationDial({ amount, unit }) {
       {
         angle: -120 + amount / scale * 240,
         major: true,
-        className: "stroke-neutral6 stroke-2",
+        className: "stroke-foreground stroke-2",
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-neutral3 text-ui-xs font-sans", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-muted-foreground text-meta font-body", children: [
       scale,
       " ",
       unit
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-neutral2 text-ui-xs font-sans", children: "scale" })
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-placeholder text-meta font-body", children: "scale" })
   ] });
 }
 
-const captionClasses = "text-ui-xs tracking-wider whitespace-nowrap text-neutral3 uppercase";
+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" };
@@ -400,11 +409,11 @@ function TimingReading({
   caption,
   dial
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral6 mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "z-10 flex min-w-0 flex-col gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-header-xl flex items-baseline gap-1 leading-none font-normal tracking-tighter whitespace-nowrap tabular-nums", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-display flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums", children: [
         value,
-        /* @__PURE__ */ jsxRuntime.jsx("small", { className: "text-ui-xs text-neutral3 font-normal tracking-normal", children: unit })
+        /* @__PURE__ */ jsxRuntime.jsx("small", { className: "text-meta text-muted-foreground tracking-normal", children: unit })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: captionClasses, children: caption })
     ] }),
@@ -464,8 +473,8 @@ const statusLineClasses = {
   failed: "after:bg-negative1",
   tripwire: "after:bg-warning1",
   waiting: "after:bg-accent5",
-  paused: "after:bg-neutral3",
-  skipped: "after:bg-neutral3"
+  paused: "after:bg-muted-foreground",
+  skipped: "after:bg-muted-foreground"
 };
 const footerStatusClasses = {
   success: "text-positive1",
@@ -509,7 +518,7 @@ function WorkflowStepCardView(props) {
       className: utils_cn.cn(
         "relative isolate w-[274px]",
         isBodyExpanded && "w-[688px]",
-        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-border1 before:bg-surface3 after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border1 after:bg-surface3"
+        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,
@@ -517,15 +526,15 @@ function WorkflowStepCardView(props) {
           open: expanded,
           onOpenChange: setExpanded,
           className: utils_cn.cn(
-            "relative rounded-xl border border-border1 bg-surface2 text-neutral5 shadow-panel transition-[border-color,box-shadow] [--card-radius:calc(var(--radius-xl)-2px)] motion-reduce:transition-none",
+            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-neutral3",
-            isBodyExpanded && "border-dashed border-neutral3/40 shadow-none",
+            isSelected && "outline-1 outline-offset-4 outline-border-focus",
+            isBodyExpanded && "border-dashed border-muted-foreground/40 shadow-none",
             isWaiting && "border-accent3",
-            isHovered && !isSelected && "border-border2 shadow-dialog",
-            hasActivity && "border-transparent"
+            isHovered && !isSelected && "bg-muted"
           ),
           "data-workflow-node": true,
           "data-workflow-step-key": stepKey,
@@ -550,15 +559,15 @@ function WorkflowStepCardView(props) {
                   "aria-pressed": onSelect ? Boolean(isSelected) : void 0,
                   onClick: onSelect,
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group-hover:bg-surface4 flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral6 min-w-0 font-semibold wrap-anywhere", title: label, children: /* @__PURE__ */ jsxRuntime.jsx(shimmer.Shimmer, { active: isRunning, children: label }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group-hover:bg-fill-subtle flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-column text-foreground 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: "bg-surface3 flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
-                      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3 wrap-anywhere", children: description }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bg-card flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
+                      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption text-muted-foreground wrap-anywhere", children: description }),
                       /* @__PURE__ */ jsxRuntime.jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
-                      isWaiting && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-accent3", children: "Next step in debug" }),
-                      isForEach && foreachProgress && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-xs flex flex-col gap-2 py-1", children: [
+                      isWaiting && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-accent3", children: "Next step in debug" }),
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-meta flex flex-col gap-2 py-1", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                           /* @__PURE__ */ jsxRuntime.jsx("strong", { children: foreachProgress.completedCount }),
                           " of ",
@@ -568,14 +577,14 @@ function WorkflowStepCardView(props) {
                         foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
                           "progress",
                           {
-                            className: "bg-surface4 accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-surface4 [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
+                            className: "bg-muted accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
                             "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-ui-xs text-neutral3", children: capabilities.join(" · ") })
+                      capabilities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: capabilities.join(" · ") })
                     ] })
                   ]
                 }
@@ -584,26 +593,43 @@ function WorkflowStepCardView(props) {
                 "div",
                 {
                   className: utils_cn.cn(
-                    "nodrag nopan flex min-h-7 items-center justify-between gap-2 bg-surface3 px-3.5 pb-2.5 text-ui-xs text-neutral3",
+                    "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 }) }),
+                    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: "nodrag nopan border-border1 bg-surface3 text-ui-sm hover:bg-surface4 flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 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: "border-border1 h-[620px] overflow-hidden border-t border-dashed", children: body })
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  collapsible.CollapsibleTrigger,
+                  {
+                    className: utils_cn.cn(
+                      primitives_raisedSurface.surfaceStateLayerStyle,
+                      "nodrag nopan border-border bg-card text-caption flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 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: "border-border h-[620px] overflow-hidden border-t border-dashed", children: body })
               ] })
             ] }),
             hasActivity && /* @__PURE__ */ jsxRuntime.jsx(
@@ -647,8 +673,8 @@ const WorkflowCodeContent = ({
   if (typeof data !== "string") {
     const content = JSON.stringify(data, null, 2);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCodeMirror, { value: content, theme, extensions: [langJson.jsonLanguage, view.EditorView.lineWrapping] }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCodeMirror, { value: content, theme, extensions: [langJson.jsonLanguage, view.EditorView.lineWrapping] }) })
     ] });
   }
   const extensions = getExtensions(data);
@@ -659,8 +685,8 @@ const WorkflowCodeContent = ({
   } catch {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: data }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(copyButton.CopyButton, { content: data }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
   ] });
 };
 
@@ -681,18 +707,23 @@ const WorkflowEdgeDataButton = ({
       Button.Button,
       {
         size: "sm",
+        variant: "ghost",
         onClick: onInspect ?? (() => setIsOpen(true)),
         "aria-label": `View ${dataLabel}`,
         "aria-pressed": selected,
-        className: "border-border1 bg-surface3 text-neutral5 shadow-panel hover:bg-surface4 aria-pressed:border-neutral3 aria-pressed:bg-surface4 h-7 rounded-lg border px-2",
+        className: utils_cn.cn(
+          primitives_raisedSurface.raisedSurfaceStyle,
+          primitives_raisedSurface.surfaceStateLayerStyle,
+          "text-foreground aria-pressed:before:bg-fill h-7 rounded-lg px-2"
+        ),
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "text-accent1" }),
         children: "Data"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "w-full max-w-3xl", children: [
       /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Step output" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 bg-surface2 min-w-0 rounded-lg border p-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", className: "text-neutral5 mb-2 block", children: dataLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border bg-background min-w-0 rounded-lg border p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "ink", className: "mb-2 block", children: dataLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(WorkflowCodeContent, { data: output })
       ] }) })
     ] }) })
@@ -712,10 +743,10 @@ const WorkflowBoundaryNode = ({ data }) => {
         "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-neutral4 after:absolute after:inset-x-0 after:mask-x-from-60%",
-          isStart ? "after:bottom-0 after:h-px after:bg-neutral3" : "after:top-0 after:h-1 after:border-y after:border-neutral3"
+          "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: "ui-xs", className: "font-medium", children: data.label })
+        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" } })
@@ -746,7 +777,7 @@ function WorkflowDataEdgeView({ output, label, dataControl, ...props }) {
   const labelY = labelPlacement === "source" ? sourceY + Math.min(24, Math.max(0, (targetY - sourceY) / 4)) : midpointY;
   const arrowId = React.useId();
   const isExecuted = props.data?.edgeStatus === "success";
-  const pathColor = isExecuted ? "color-mix(in oklab, var(--positive1) 82%, var(--neutral6))" : "var(--neutral3)";
+  const pathColor = isExecuted ? "color-mix(in oklab, var(--positive1) 82%, var(--foreground))" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("marker", { id: arrowId, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "5", markerHeight: "5", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1 L9 5 L1 9 Z", fill: pathColor }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -814,9 +845,9 @@ function WorkflowGraphGroups({ nodes, groups }) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "border-neutral3/25 bg-neutral3/3 absolute rounded-xl border border-dashed",
+            className: "border-muted-foreground/25 bg-muted-foreground/3 absolute rounded-xl border border-dashed",
             style: { transform: `translate(${left}px, ${top}px)`, width: right - left, height: bottom - top },
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-xs text-neutral3 flex items-center gap-2 px-5 py-4", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-meta text-muted-foreground flex items-center gap-2 px-5 py-4", 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 })
             ] })
@@ -838,7 +869,7 @@ const ZoomSlider = React.forwardRef(({ className, compact = false, onFitView, ..
     {
       ref,
       className: utils_cn.cn(
-        "flex items-center gap-1 rounded-full border border-border1 bg-surface2 p-1 text-neutral6",
+        "flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground",
         className
       ),
       ...props,
@@ -970,7 +1001,7 @@ function WorkflowGraphCanvas({
       ref: graphRef,
       tabIndex: -1,
       "data-testid": "workflow-graph-viewport",
-      className: utils_cn.cn("size-full outline-none", variant === "nested" ? "bg-surface1" : "bg-surface2"),
+      className: utils_cn.cn("size-full outline-none", variant === "nested" ? "bg-sidebar" : "bg-background"),
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         react.ReactFlow,
         {
@@ -1034,12 +1065,12 @@ function WorkflowDebugControls({
   const nextStepFallback = canRunNextStep ? "Ready to advance" : "Next step unavailable";
   const actionsDisabled = !canRunNextStep || isStreaming || disabled;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-3", "data-testid": "workflow-debug-step-controls", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 bg-surface2 rounded-xl border p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 bg-background rounded-xl border p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-xs text-neutral3", children: "Next step" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: "Next step" }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { size: "sm", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, {}), emphasis: "muted", children: "Step by step" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-ui-md text-neutral5 font-medium break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-subheading text-foreground break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(