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

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @mastra/playground-ui
 
+## 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,30 @@ 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 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 +48,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,23 +56,30 @@ 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"
-            }),
+            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,
+              {
+                "border border-dashed border-neutral2": step.status === "pending",
+                "[&>svg]:size-4": step.status !== "running",
+                "[&>svg]:text-notice-success-fg": step.status === "success",
+                "[&>svg]:text-notice-destructive-fg": step.status === "failed",
+                "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)
           }
         )
@@ -80,16 +89,7 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
 }
 
 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 +107,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\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      <div\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            'border border-dashed border-neutral2': step.status === 'pending',\n            '[&>svg]:size-4': step.status !== 'running',\n            '[&>svg]:text-notice-success-fg': step.status === 'success',\n            '[&>svg]:text-notice-destructive-fg': step.status === 'failed',\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      >\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 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","jsxs","cn","transitions"],"mappings":"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"}

package/dist/components/Steps.es.js

@@ -7,28 +7,30 @@ 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 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 +44,7 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx(
               "h4",
               {
@@ -50,23 +52,30 @@ 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"
-            }),
+            className: cn(
+              "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
+              transitions.colors,
+              transitions.transform,
+              transitions.shadow,
+              {
+                "border border-dashed border-neutral2": step.status === "pending",
+                "[&>svg]:size-4": step.status !== "running",
+                "[&>svg]:text-notice-success-fg": step.status === "success",
+                "[&>svg]:text-notice-destructive-fg": step.status === "failed",
+                "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)
           }
         )
@@ -76,16 +85,7 @@ function ProcessStepListItem({ stepId, step, isActive, position }) {
 }
 
 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 +103,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\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      <div\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            'border border-dashed border-neutral2': step.status === 'pending',\n            '[&>svg]:size-4': step.status !== 'running',\n            '[&>svg]:text-notice-success-fg': step.status === 'success',\n            '[&>svg]:text-notice-destructive-fg': step.status === 'failed',\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      >\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 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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"}

package/dist/components/TokenBudget.cjs.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../TokenBudget.css');const tones = require('../tones-BGChDydJ.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+
+const RADIUS = 7;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function TokenBudget({
+  tokens,
+  threshold,
+  label,
+  tone = "messages",
+  working = false,
+  className
+}) {
+  const id = React.useId();
+  const fill = threshold > 0 ? Math.min(100, Math.round(tokens / threshold * 100)) : 0;
+  const wedge = `${(CIRCUMFERENCE * fill / 100).toFixed(2)} ${CIRCUMFERENCE.toFixed(2)}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-label": label,
+      "aria-valuemax": threshold,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.min(tokens, threshold),
+      "aria-valuetext": `${tones.formatCompactTokens(tokens)}/${tones.formatCompactTokens(threshold)}k`,
+      className: utils_cn.cn("inline-flex items-center gap-1.5 tabular-nums", tones.toneClass[tone], className),
+      role: "meter",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": true, className: "token-budget-dial", "data-working": working || void 0, viewBox: "0 0 20 20", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "token-budget-track", cx: "10", cy: "10", r: RADIUS, strokeWidth: "3" }),
+          working ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `${id}-sheen`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.25" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("mask", { id: `${id}-wedge`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "token-budget-arc",
+                  cx: "10",
+                  cy: "10",
+                  r: RADIUS,
+                  stroke: "white",
+                  strokeDasharray: wedge,
+                  strokeWidth: "3"
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${id}-wedge)`, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { className: "token-budget-sheen", fill: `url(#${id}-sheen)`, height: "20", width: "20", x: "0", y: "0" }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              className: "token-budget-arc",
+              cx: "10",
+              cy: "10",
+              r: RADIUS,
+              stroke: "currentColor",
+              strokeDasharray: wedge,
+              strokeWidth: "3"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon4", children: [
+          tones.formatCompactTokens(tokens),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+            "/",
+            tones.formatCompactTokens(threshold),
+            "k"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+function TokenBudgetDetail({
+  label,
+  tokens,
+  threshold,
+  projected = 0,
+  description,
+  tone = "messages",
+  icon
+}) {
+  const used = threshold > 0 ? Math.min(100, tokens / threshold * 100) : 0;
+  const freed = Math.min(used, threshold > 0 ? projected / threshold * 100 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex flex-col gap-1.5", tones.toneClass[tone]), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-ui-xs flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "[&_svg]:size-3.5", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon5", children: label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon4 tabular-nums", children: [
+        tones.formatCompactTokens(tokens),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+          "/",
+          tones.formatCompactTokens(threshold),
+          "k"
+        ] }),
+        projected > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+          " −",
+          tones.formatCompactTokens(projected),
+          "k"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-1.5 overflow-hidden rounded-full bg-current/15", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-current", style: { width: `${used - freed}%` } }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "token-budget-hatch", style: { width: `${freed}%` } })
+    ] }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-xs text-icon2", children: description })
+  ] });
+}
+
+exports.formatCompactTokens = tones.formatCompactTokens;
+exports.toneClass = tones.toneClass;
+exports.TokenBudget = TokenBudget;
+exports.TokenBudgetDetail = TokenBudgetDetail;
+//# sourceMappingURL=TokenBudget.cjs.js.map