@mastra/playground-ui 56.0.0-alpha.11 → 56.0.0-alpha.13

package/dist/components/Txt.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const Txt = require('../Txt-Dy6h8r0i.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
 
 
 

package/dist/components/Txt.es.js

@@ -1,2 +1,2 @@
-export { T as Txt } from '../Txt-vsOCKfz7.js';
+export { T as Txt } from '../Txt-DTh3Pa_a.js';
 //# sourceMappingURL=Txt.es.js.map

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-B9oOuqif.cjs');
-const Txt = require('../Txt-Dy6h8r0i.cjs');
+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-CLHQia-u.cjs');
-const utils_cn = require('../cn-DqcFobIY.cjs');
-const activity = require('../activity-C0X6Awhz.cjs');
-const collapsible = require('../collapsible-Ca7Zl4uS.cjs');
-const shimmer = require('../shimmer-DREEO5ZI.cjs');
+const copyButton = require('../copy-button-su26CWWS.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-DpiAzxSV.cjs');
-const Button = require('../Button-CSmXdQ09.cjs');
-const dialog = require('../dialog-0XUJ6qpV.cjs');
+const codeEditor = require('../code-editor-BHpoJo39.cjs');
+const Button = require('../Button-DVIyS81j.cjs');
+const dialog = require('../dialog-DNPUAqZd.cjs');
 const react = require('@xyflow/react');
-const slider = require('../slider-BfOspnBa.cjs');
+const slider = require('../slider-C-Fda4HC.cjs');
 require('@xyflow/react/dist/style.css');
-const skeleton = require('../skeleton-CkUppQmt.cjs');
-const dropdownMenu = require('../dropdown-menu-DC74vW0L.cjs');
+const skeleton = require('../skeleton-cXUjPrq9.cjs');
+const dropdownMenu = require('../dropdown-menu-DNRCA4Gj.cjs');
 
 const WorkflowCanvasInsetContext = React.createContext(0);
 function workflowFitOptions(leftInset, isInline = false) {
@@ -234,8 +235,9 @@ function ElapsedTime({ startedAt, endedAt, spansSuspension }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Txt.Txt,
     {
-      variant: "ui-xs",
-      className: "text-muted-foreground font-mono whitespace-nowrap",
+      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
     }
@@ -266,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,
@@ -289,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-muted-foreground 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" }),
@@ -340,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
     }
   );
@@ -354,7 +356,7 @@ 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"
     }
   );
@@ -381,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-muted-foreground 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" };
@@ -409,9 +411,9 @@ function TimingReading({
 }) {
   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-muted-foreground 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 })
     ] }),
@@ -471,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",
@@ -516,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,
@@ -524,15 +526,15 @@ function WorkflowStepCardView(props) {
           open: expanded,
           onOpenChange: setExpanded,
           className: utils_cn.cn(
-            "relative rounded-xl border border-border1 bg-surface2 text-foreground 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,
@@ -557,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-foreground 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-muted-foreground 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 ",
@@ -575,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-muted-foreground", children: capabilities.join(" · ") })
+                      capabilities.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: capabilities.join(" · ") })
                     ] })
                   ]
                 }
@@ -591,7 +593,7 @@ 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-muted-foreground",
+                    "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: [
@@ -610,15 +612,24 @@ function WorkflowStepCardView(props) {
                 }
               ),
               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(
@@ -662,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);
@@ -674,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 }) })
   ] });
 };
 
@@ -696,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-foreground 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-foreground 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 })
       ] }) })
     ] }) })
@@ -728,9 +744,9 @@ const WorkflowBoundaryNode = ({ data }) => {
         "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-neutral3" : "after:top-0 after:h-1 after:border-y after:border-neutral3"
+          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" } })
@@ -761,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(
@@ -829,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-muted-foreground 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 })
             ] })
@@ -853,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-foreground",
+        "flex items-center gap-1 rounded-full border border-border bg-background p-1 text-foreground",
         className
       ),
       ...props,
@@ -985,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,
         {
@@ -1049,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-muted-foreground", 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-foreground 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(