@mastra/playground-ui 48.1.0-alpha.1 → 49.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # @mastra/playground-ui
 
+## 49.0.0-alpha.3
+
+### Patch Changes
+
+- Flattened the step markers in the `plain` variant of `ProcessStepListItem`. A completed step now shows a green check on its own instead of a filled green disc with a glow behind it, and the pending, running and completed markers finally share the same diameter — the dashed pending circle used to be 28px next to an 11px spinner. ([#21414](https://github.com/mastra-ai/mastra/pull/21414))
+
+- Updated dependencies [[`d118873`](https://github.com/mastra-ai/mastra/commit/d118873cfd5074b1f814a1c169a97ca7a3a29174), [`161258b`](https://github.com/mastra-ai/mastra/commit/161258b3473a6d0fce00a43cab59d119a49a232f), [`8ea8038`](https://github.com/mastra-ai/mastra/commit/8ea80386fde53d26e2c0b2060c53bc9bd9be10f3)]:
+  - @mastra/core@1.59.0-alpha.3
+  - @mastra/client-js@1.40.0-alpha.3
+  - @mastra/react@1.4.3-alpha.3
+
+## 49.0.0-alpha.2
+
+### Minor Changes
+
+- Added two status-strip pieces so any app showing a chat runtime — Studio, Factory — reads the same way. `TokenBudget` draws a token budget as a ring with its reading beside it, and `TokenBudgetDetail` is that budget in full for a popover or panel: ([#21366](https://github.com/mastra-ai/mastra/pull/21366))
+
+  ```tsx
+  import { TokenBudget, TokenBudgetDetail } from '@mastra/playground-ui/components/TokenBudget';
+
+  <div className="flex items-center gap-1.5">
+    <TokenBudget label="Message window" tokens={14_900} threshold={30_000} working={isObserving} />
+    <TokenBudget label="Observations" tokens={5_200} threshold={8_000} tone="memory" />
+  </div>;
+
+  <TokenBudgetDetail
+    description="Read into memory once full"
+    icon={<MessageSquare />}
+    label="Messages"
+    projected={6_000}
+    tokens={14_900}
+    threshold={30_000}
+  />;
+  ```
+
+  The two are separate so the app decides how a budget opens — one trigger per budget, or one control for a whole group. `TokenBudgetDetail` hatches the slice a pending pass will free (`projected`) at the end of its bar, so the number and where it goes read together, and takes an `icon` it tints with the budget's own color so a detail row is recognizable as the ring it came from.
+
+  `working` runs a highlight around the ring, so a pass happening in the background is visible without a word for it. `tone` picks the budget's identity color (`messages`, `memory`, `warning`), which the memory panel's own progress bars now share instead of repeating the palette classes.
+
+  Fixed those same memory panel bars drawing a budget as completely full when its threshold was zero.
+
+- Improved process step indicators with theme-aware status colors and a plain embedded style. ([#21382](https://github.com/mastra-ai/mastra/pull/21382))
+
+  **Step labels now come from `title`.** `ProcessStepListItem` used to build its heading from the step id and ignore the `title` you passed, so display copy had to live in kebab-case ids. Give the step the label you want on screen:
+
+  ```tsx
+  const step = { id: 'clone-repo', title: 'Cloning repository', status: 'running', description: '', isActive: true };
+
+  <ProcessStepListItem step={step} isActive position={1} />;
+  // before: "Clone repo"
+  // after:  "Cloning repository"
+  ```
+
+  The `stepId` prop is now optional and ignored; drop it from your call sites.
+
+  **Added a `plain` variant to `ProcessStepListItem`** — for step lists that already sit inside a panel, where the boxed active card is one frame too many:
+
+  ```tsx
+  <ProcessStepListItem step={step} isActive={step.status === 'running'} position={1} variant="plain" />
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`898bba4`](https://github.com/mastra-ai/mastra/commit/898bba46d4806dd255a44e5dc3a3d5827eaefdfe), [`4539d73`](https://github.com/mastra-ai/mastra/commit/4539d737bea0e885dfc1e376def99bb7c35a9fbc), [`f9aab1c`](https://github.com/mastra-ai/mastra/commit/f9aab1cfc3fda03238a7fd7bd8b794e07497878c), [`e31421b`](https://github.com/mastra-ai/mastra/commit/e31421bc9c11c03c6e74f447ecb5820000e2b9d7), [`f9aab1c`](https://github.com/mastra-ai/mastra/commit/f9aab1cfc3fda03238a7fd7bd8b794e07497878c), [`aece0e7`](https://github.com/mastra-ai/mastra/commit/aece0e7cb124ae1eb1230689b887f5554b9a0bf0), [`f82f22f`](https://github.com/mastra-ai/mastra/commit/f82f22f56c58ab90e8a7501aaa5039a4e13cfe8b)]:
+  - @mastra/core@1.59.0-alpha.2
+  - @mastra/client-js@1.40.0-alpha.2
+  - @mastra/memory@1.26.2-alpha.1
+  - @mastra/react@1.4.3-alpha.2
+
 ## 48.1.0-alpha.1
 
 ### Minor Changes

package/dist/TokenBudget.css

@@ -0,0 +1,51 @@
+/* Hatching reads as provisional: the slice of the fill a pending pass will free. */
+.token-budget-hatch {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    currentcolor 0 1.5px,
+    color-mix(in oklab, currentcolor 25%, transparent) 1.5px 4px
+  );
+}
+
+.token-budget-dial {
+  display: block;
+  flex: none;
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.token-budget-dial circle {
+  fill: none;
+  stroke-linecap: round;
+}
+
+.token-budget-track {
+  stroke: color-mix(in oklab, currentcolor 22%, transparent);
+}
+
+/* The wedge starts at noon rather than at three o'clock. */
+.token-budget-arc {
+  transform: rotate(-90deg);
+  transform-origin: 10px 10px;
+}
+
+/* While work runs, the wedge is painted by a light travelling along the stroke —
+ * `shimmer-text` transposed to an arc, so nothing moves beside the dial. */
+.token-budget-sheen {
+  transform-origin: 10px 10px;
+  animation: token-budget-sweep 1.6s linear infinite;
+}
+
+@keyframes token-budget-sweep {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Without motion the light still has to separate work from rest, so it parks on the wedge. */
+@media (prefers-reduced-motion: reduce) {
+  .token-budget-sheen {
+    animation: none;
+    transform: rotate(120deg);
+  }
+}

package/dist/components/Steps.cjs.js

@@ -11,28 +11,81 @@ const utils_cn = require('../cn-vA5sWo9W.cjs');
 function getStatusIcon(status) {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { "aria-hidden": true });
     case "failed":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { "aria-hidden": true });
     default:
       return null;
   }
 }
 
-function ProcessStepListItem({ stepId, step, isActive, position }) {
-  const formatStepTitle = (stepId2) => {
-    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
-  };
+function PendingRing() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "8.5",
+      pathLength: "48",
+      fill: "none",
+      stroke: "currentcolor",
+      strokeWidth: "2.8",
+      strokeLinecap: "round",
+      strokeDasharray: "3 3"
+    }
+  ) });
+}
+function StepStatusMarker({ status, variant }) {
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_cn.cn("flex size-4 items-center justify-center self-center [&>svg]:size-4", primitives_transitions.transitions.colors, {
+          "[&>svg]:text-positive1": status === "success",
+          "[&>svg]:text-negative1": status === "failed"
+        }),
+        children: status === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(PendingRing, {}) : getStatusIcon(status)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
+        primitives_transitions.transitions.colors,
+        primitives_transitions.transitions.transform,
+        primitives_transitions.transitions.shadow,
+        {
+          "[&>svg]:text-notice-success-fg": status === "success",
+          "[&>svg]:text-notice-destructive-fg": status === "failed",
+          "border border-dashed border-neutral2": status === "pending",
+          "[&>svg]:size-4": status !== "running",
+          "bg-accent1Dark shadow-glow-accent1": status === "success",
+          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "scale-110": status === "success" || status === "failed"
+        }
+      ),
+      children: getStatusIcon(status)
+    }
+  );
+}
+function ProcessStepListItem({ step, isActive, position, variant = "default" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: utils_cn.cn("grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3", primitives_transitions.transitions.all, {
-        "border border-dashed border-neutral2 bg-surface3": isActive
-      }),
+      className: utils_cn.cn(
+        "grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none",
+        primitives_transitions.transitions.colors,
+        {
+          "border border-transparent": variant === "default",
+          "border-dashed border-neutral2 bg-surface3": isActive && variant === "default"
+        }
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
@@ -46,7 +99,7 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "h4",
               {
@@ -54,42 +107,20 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
                   "text-neutral5": isActive || step.status === "success",
                   "text-neutral3": !isActive && step.status !== "success"
                 }),
-                children: formatStepTitle(stepId)
+                children: step.title
               }
             ),
-            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+            step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn("flex size-[1.75rem] items-center justify-center self-center rounded-full", primitives_transitions.transitions.all, {
-              "border border-neutral2 border-dashed": step.status === "pending",
-              "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
-              "w-[1.75rem] h-[1.75rem]": step.status === "running",
-              "bg-accent1Dark shadow-glow-accent1": step.status === "success",
-              "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
-              "scale-110": step.status === "success" || step.status === "failed"
-            }),
-            children: getStatusIcon(step.status)
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(StepStatusMarker, { status: step.status, variant })
       ]
     }
   );
 }
 
 function ProcessStepList({ currentStep, steps = [], className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-    ProcessStepListItem,
-    {
-      stepId: step.id,
-      step,
-      isActive: currentStep?.id === step.id,
-      position: idx + 1
-    },
-    step.id
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsxRuntime.jsx(ProcessStepListItem, { step, isActive: currentStep?.id === step.id, position: idx + 1 }, step.id)) });
 }
 
 function ProcessStepProgressBar({ steps }) {
@@ -107,13 +138,14 @@ function ProcessStepProgressBar({ steps }) {
             "div",
             {
               className: utils_cn.cn(
-                "absolute right-0 z-10 flex size-[2rem] translate-x-[50%] items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3",
-                primitives_transitions.transitions.all,
+                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none",
+                primitives_transitions.transitions.colors,
+                primitives_transitions.transitions.transform,
+                primitives_transitions.transitions.shadow,
                 {
-                  "border border-neutral2 border-dashed": step.status === "pending",
-                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
-                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
-                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                  "border border-dashed border-neutral2": step.status === "pending",
+                  "bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}) : idx + 1

package/dist/components/Steps.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.cjs.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn('flex size-[1.75rem] items-center justify-center self-center rounded-full', transitions.all, {\n          'border border-neutral2 border-dashed': step.status === 'pending',\n          '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n          'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n          'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n          'scale-110': step.status === 'success' || step.status === 'failed',\n        })}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-[2rem] translate-x-[50%] items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["Spinner","CheckIcon","XIcon","stepId","jsxs","cn","transitions","jsx"],"mappings":"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"}
+{"version":3,"file":"Steps.cjs.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Spinner","CheckIcon","XIcon","cn","transitions","jsxs"],"mappings":"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"}

package/dist/components/Steps.es.js

@@ -7,28 +7,81 @@ import { c as cn } from '../cn-BakJzhuv.js';
 function getStatusIcon(status) {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsx(Spinner, {});
+      return /* @__PURE__ */ jsx(Spinner, { size: "sm", "aria-hidden": true });
     case "success":
-      return /* @__PURE__ */ jsx(CheckIcon, {});
+      return /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": true });
     case "failed":
-      return /* @__PURE__ */ jsx(XIcon, {});
+      return /* @__PURE__ */ jsx(XIcon, { "aria-hidden": true });
     default:
       return null;
   }
 }
 
-function ProcessStepListItem({ stepId, step, isActive, position }) {
-  const formatStepTitle = (stepId2) => {
-    return stepId2.charAt(0).toUpperCase() + stepId2.slice(1).replace(/-/g, " ");
-  };
+function PendingRing() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "8.5",
+      pathLength: "48",
+      fill: "none",
+      stroke: "currentcolor",
+      strokeWidth: "2.8",
+      strokeLinecap: "round",
+      strokeDasharray: "3 3"
+    }
+  ) });
+}
+function StepStatusMarker({ status, variant }) {
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("flex size-4 items-center justify-center self-center [&>svg]:size-4", transitions.colors, {
+          "[&>svg]:text-positive1": status === "success",
+          "[&>svg]:text-negative1": status === "failed"
+        }),
+        children: status === "pending" ? /* @__PURE__ */ jsx(PendingRing, {}) : getStatusIcon(status)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
+        transitions.colors,
+        transitions.transform,
+        transitions.shadow,
+        {
+          "[&>svg]:text-notice-success-fg": status === "success",
+          "[&>svg]:text-notice-destructive-fg": status === "failed",
+          "border border-dashed border-neutral2": status === "pending",
+          "[&>svg]:size-4": status !== "running",
+          "bg-accent1Dark shadow-glow-accent1": status === "success",
+          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "scale-110": status === "success" || status === "failed"
+        }
+      ),
+      children: getStatusIcon(status)
+    }
+  );
+}
+function ProcessStepListItem({ step, isActive, position, variant = "default" }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3", transitions.all, {
-        "border border-dashed border-neutral2 bg-surface3": isActive
-      }),
+      className: cn(
+        "grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none",
+        transitions.colors,
+        {
+          "border border-transparent": variant === "default",
+          "border-dashed border-neutral2 bg-surface3": isActive && variant === "default"
+        }
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 grid-cols-[auto_1fr] gap-2", children: [
           /* @__PURE__ */ jsxs(
             "span",
             {
@@ -42,7 +95,7 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx(
               "h4",
               {
@@ -50,42 +103,20 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
                   "text-neutral5": isActive || step.status === "success",
                   "text-neutral3": !isActive && step.status !== "success"
                 }),
-                children: formatStepTitle(stepId)
+                children: step.title
               }
             ),
-            step.description && /* @__PURE__ */ jsx("p", { className: "text-ui-md text-neutral2 -mt-0.5", children: step.description })
+            step.description && /* @__PURE__ */ jsx("p", { className: cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("flex size-[1.75rem] items-center justify-center self-center rounded-full", transitions.all, {
-              "border border-neutral2 border-dashed": step.status === "pending",
-              "[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4": step.status !== "running",
-              "w-[1.75rem] h-[1.75rem]": step.status === "running",
-              "bg-accent1Dark shadow-glow-accent1": step.status === "success",
-              "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
-              "scale-110": step.status === "success" || step.status === "failed"
-            }),
-            children: getStatusIcon(step.status)
-          }
-        )
+        /* @__PURE__ */ jsx(StepStatusMarker, { status: step.status, variant })
       ]
     }
   );
 }
 
 function ProcessStepList({ currentStep, steps = [], className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(
-    ProcessStepListItem,
-    {
-      stepId: step.id,
-      step,
-      isActive: currentStep?.id === step.id,
-      position: idx + 1
-    },
-    step.id
-  )) });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: steps.map((step, idx) => /* @__PURE__ */ jsx(ProcessStepListItem, { step, isActive: currentStep?.id === step.id, position: idx + 1 }, step.id)) });
 }
 
 function ProcessStepProgressBar({ steps }) {
@@ -103,13 +134,14 @@ function ProcessStepProgressBar({ steps }) {
             "div",
             {
               className: cn(
-                "absolute right-0 z-10 flex size-[2rem] translate-x-[50%] items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3",
-                transitions.all,
+                "absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none",
+                transitions.colors,
+                transitions.transform,
+                transitions.shadow,
                 {
-                  "border border-neutral2 border-dashed": step.status === "pending",
-                  "[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]": step.status !== "running",
-                  "bg-accent1Dark text-white shadow-glow-accent1 scale-110": step.status === "success",
-                  "bg-accent2Dark text-white shadow-glow-accent2 scale-110": step.status === "failed"
+                  "border border-dashed border-neutral2": step.status === "pending",
+                  "bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110": step.status === "success",
+                  "bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110": step.status === "failed"
                 }
               ),
               children: step.status === "running" ? /* @__PURE__ */ jsx(Spinner, {}) : idx + 1

package/dist/components/Steps.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.es.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner />;\n    case 'success':\n      return <CheckIcon />;\n    case 'failed':\n      return <XIcon />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListItemProps = {\n  stepId: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n};\n\nexport function ProcessStepListItem({ stepId, step, isActive, position }: ProcessStepListItemProps) {\n  // Always format the step ID as the title\n  const formatStepTitle = (stepId: string) => {\n    return stepId.charAt(0).toUpperCase() + stepId.slice(1).replace(/-/g, ' ');\n  };\n\n  return (\n    <div\n      className={cn('grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3', transitions.all, {\n        'border border-dashed border-neutral2 bg-surface3': isActive,\n      })}\n    >\n      <div className=\"grid grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div>\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {formatStepTitle(stepId)}\n          </h4>\n          {step.description && <p className=\"text-ui-md text-neutral2 -mt-0.5\">{step.description}</p>}\n        </div>\n      </div>\n      <div\n        className={cn('flex size-[1.75rem] items-center justify-center self-center rounded-full', transitions.all, {\n          'border border-neutral2 border-dashed': step.status === 'pending',\n          '[&>svg]:text-white [&>svg]:w-4 [&>svg]:h-4': step.status !== 'running',\n          'w-[1.75rem] h-[1.75rem]': step.status === 'running',\n          'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n          'scale-110': step.status === 'success' || step.status === 'failed',\n        })}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem\n          key={step.id}\n          stepId={step.id}\n          step={step}\n          isActive={currentStep?.id === step.id}\n          position={idx + 1}\n        />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-[2rem] translate-x-[50%] items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3',\n                  transitions.all,\n                  {\n                    'border border-neutral2 border-dashed': step.status === 'pending',\n                    '[&>svg]:text-surface1 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]': step.status !== 'running',\n                    'bg-accent1Dark text-white shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-white shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["stepId"],"mappings":"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"}
+{"version":3,"file":"Steps.es.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}