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

package/dist/components/ThreadList.cjs.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
-const Button = require('../Button-C2dx_QZN.cjs');
-const Txt = require('../Txt-C7rZCmrg.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const primitives_raisedSurface = require('../primitives/raised-surface.cjs.js');
+const Button = require('../Button-CVewl8nT.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -16,7 +17,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
       "aria-label": ariaLabel,
       className: utils_cn.cn(
         "flex h-full flex-col gap-1 overflow-y-auto p-1",
-        !embedded && "rounded-studio-panel border border-border1/50 bg-surface3"
+        !embedded && utils_cn.cn(primitives_raisedSurface.raisedSurfaceStyle, "rounded-studio-panel")
       ),
       children
     }
@@ -25,7 +26,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
 const ThreadListNewItem = ({ render, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { render, variant: "ghost", className: "w-full justify-start rounded-xl px-3", children });
 };
-const ThreadListSeparator = () => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border1/40 -mx-1 my-1 h-px" });
+const ThreadListSeparator = () => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border/40 -mx-1 my-1 h-px" });
 const ThreadListItems = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-1", "data-testid": "thread-list", children });
 const ThreadListItem = ({
   as,
@@ -48,7 +49,7 @@ const ThreadListItem = ({
         className: utils_cn.cn(
           "w-full min-w-0 justify-start rounded-xl px-3 text-left",
           onDelete && "pr-9",
-          isActive && "bg-surface4 text-neutral6",
+          isActive && "bg-fill-hover text-foreground",
           className
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1", children })
@@ -68,7 +69,7 @@ const ThreadListItem = ({
   ] });
 };
 const ThreadListEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-sm", className: "text-neutral3 px-3 py-2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "muted", className: "px-3 py-2", children });
 };
 
 exports.ThreadList = ThreadList;

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadList.cjs.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { createElement, type ElementType, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button, type ButtonProps } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n  children: ReactNode;\n  'aria-label'?: string;\n  /**\n   * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n   * so the list can render flush inside an outer container without nesting a second box.\n   */\n  embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n  return (\n    <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\n          'flex h-full flex-col gap-1 overflow-y-auto p-1',\n          !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport interface ThreadListNewItemProps {\n  render?: ButtonProps['render'];\n  children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ render, children }: ThreadListNewItemProps) => {\n  return (\n    <Button render={render} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n      {children}\n    </Button>\n  );\n};\n\nexport const ThreadListSeparator = () => (\n  <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n  children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n  <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n    {children}\n  </ol>\n);\n\nexport interface ThreadListItemProps {\n  as?: ElementType;\n  href?: string;\n  to?: string;\n  isActive?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: () => void;\n  deleteLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n  as,\n  href,\n  to,\n  isActive,\n  onClick,\n  onDelete,\n  deleteLabel = 'delete',\n  className,\n  children,\n}: ThreadListItemProps) => {\n  return (\n    <li className=\"group relative\">\n      <Button\n        render={as ? createElement(as, { href, to }) : undefined}\n        onClick={onClick}\n        variant=\"ghost\"\n        className={cn(\n          'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n          onDelete && 'pr-9',\n          isActive && 'bg-surface4 text-neutral6',\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">{children}</span>\n      </Button>\n\n      {onDelete && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n          onClick={onDelete}\n          aria-label={deleteLabel}\n        >\n          <X />\n        </Button>\n      )}\n    </li>\n  );\n};\n\nexport interface ThreadListEmptyProps {\n  children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n  return (\n    <Txt as=\"p\" variant=\"ui-sm\" className=\"text-neutral3 px-3 py-2\">\n      {children}\n    </Txt>\n  );\n};\n"],"names":["jsx","cn","Button","jsxs","createElement","X","Txt"],"mappings":";;;;;;;;;;;AAiBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAY;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,iBAAA,GAAoB,CAAC,EAAE,MAAA,EAAQ,UAAS,KAA8B;AACjF,EAAA,sCACGC,aAAA,EAAA,EAAO,MAAA,EAAgB,SAAQ,OAAA,EAAQ,SAAA,EAAU,wCAC/C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjCF,cAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,+BAAA,EAAgC;AAOzF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzCA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACEG,eAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAAH,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,KAAKE,mBAAA,CAAc,EAAA,EAAI,EAAE,IAAA,EAAM,EAAA,EAAI,CAAA,GAAI,MAAA;AAAA,QAC/C,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAWH,WAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,2BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACCA,cAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,yCAACG,aAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACEL,cAAA,CAACM,WAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,2BACnC,QAAA,EACH,CAAA;AAEJ;;;;;;;;;"}
+{"version":3,"file":"ThreadList.cjs.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { createElement, type ElementType, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { raisedSurfaceStyle } from '../../primitives/raised-surface';\nimport { Button, type ButtonProps } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n  children: ReactNode;\n  'aria-label'?: string;\n  /**\n   * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n   * so the list can render flush inside an outer container without nesting a second box.\n   */\n  embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n  return (\n    <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\n          'flex h-full flex-col gap-1 overflow-y-auto p-1',\n          !embedded && cn(raisedSurfaceStyle, 'rounded-studio-panel'),\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport interface ThreadListNewItemProps {\n  render?: ButtonProps['render'];\n  children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ render, children }: ThreadListNewItemProps) => {\n  return (\n    <Button render={render} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n      {children}\n    </Button>\n  );\n};\n\nexport const ThreadListSeparator = () => (\n  <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n  children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n  <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n    {children}\n  </ol>\n);\n\nexport interface ThreadListItemProps {\n  as?: ElementType;\n  href?: string;\n  to?: string;\n  isActive?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: () => void;\n  deleteLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n  as,\n  href,\n  to,\n  isActive,\n  onClick,\n  onDelete,\n  deleteLabel = 'delete',\n  className,\n  children,\n}: ThreadListItemProps) => {\n  return (\n    <li className=\"group relative\">\n      <Button\n        render={as ? createElement(as, { href, to }) : undefined}\n        onClick={onClick}\n        variant=\"ghost\"\n        className={cn(\n          'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n          onDelete && 'pr-9',\n          isActive && 'bg-fill-hover text-foreground',\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">{children}</span>\n      </Button>\n\n      {onDelete && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n          onClick={onDelete}\n          aria-label={deleteLabel}\n        >\n          <X />\n        </Button>\n      )}\n    </li>\n  );\n};\n\nexport interface ThreadListEmptyProps {\n  children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n  return (\n    <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className=\"px-3 py-2\">\n      {children}\n    </Txt>\n  );\n};\n"],"names":["jsx","cn","raisedSurfaceStyle","Button","jsxs","createElement","X","Txt"],"mappings":";;;;;;;;;;;;AAkBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAWC,WAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAYA,WAAA,CAAGC,2CAAA,EAAoB,sBAAsB;AAAA,OAC5D;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,iBAAA,GAAoB,CAAC,EAAE,MAAA,EAAQ,UAAS,KAA8B;AACjF,EAAA,sCACGC,aAAA,EAAA,EAAO,MAAA,EAAgB,SAAQ,OAAA,EAAQ,SAAA,EAAU,wCAC/C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjCH,cAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,8BAAA,EAA+B;AAOxF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzCA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACEI,eAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAAJ,cAAA;AAAA,MAACG,aAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,KAAKE,mBAAA,CAAc,EAAA,EAAI,EAAE,IAAA,EAAM,EAAA,EAAI,CAAA,GAAI,MAAA;AAAA,QAC/C,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAWJ,WAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,+BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACCA,cAAA;AAAA,MAACG,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,yCAACG,aAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACEN,cAAA,CAACO,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,WAAA,EAClD,QAAA,EACH,CAAA;AAEJ;;;;;;;;;"}

package/dist/components/ThreadList.es.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { X } from 'lucide-react';
 import { createElement } from 'react';
-import { c as cn } from '../cn-C6s2yXwM.js';
-import { B as Button } from '../Button-DS6O6fvU.js';
-import { T as Txt } from '../Txt-hyo2FKuO.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+import { raisedSurfaceStyle } from '../primitives/raised-surface.es.js';
+import { B as Button } from '../Button-cWcBEd-G.js';
+import { T as Txt } from '../Txt-DTh3Pa_a.js';
 
 const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded = false }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("size-full", !embedded && "pb-2 pl-2"), children: /* @__PURE__ */ jsx(
@@ -12,7 +13,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
       "aria-label": ariaLabel,
       className: cn(
         "flex h-full flex-col gap-1 overflow-y-auto p-1",
-        !embedded && "rounded-studio-panel border border-border1/50 bg-surface3"
+        !embedded && cn(raisedSurfaceStyle, "rounded-studio-panel")
       ),
       children
     }
@@ -21,7 +22,7 @@ const ThreadList = ({ children, "aria-label": ariaLabel = "Threads", embedded =
 const ThreadListNewItem = ({ render, children }) => {
   return /* @__PURE__ */ jsx(Button, { render, variant: "ghost", className: "w-full justify-start rounded-xl px-3", children });
 };
-const ThreadListSeparator = () => /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border1/40 -mx-1 my-1 h-px" });
+const ThreadListSeparator = () => /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": "horizontal", className: "bg-border/40 -mx-1 my-1 h-px" });
 const ThreadListItems = ({ children }) => /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-1", "data-testid": "thread-list", children });
 const ThreadListItem = ({
   as,
@@ -44,7 +45,7 @@ const ThreadListItem = ({
         className: cn(
           "w-full min-w-0 justify-start rounded-xl px-3 text-left",
           onDelete && "pr-9",
-          isActive && "bg-surface4 text-neutral6",
+          isActive && "bg-fill-hover text-foreground",
           className
         ),
         children: /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children })
@@ -64,7 +65,7 @@ const ThreadListItem = ({
   ] });
 };
 const ThreadListEmpty = ({ children }) => {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: "text-neutral3 px-3 py-2", children });
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "muted", className: "px-3 py-2", children });
 };
 
 export { ThreadList, ThreadListEmpty, ThreadListItem, ThreadListItems, ThreadListNewItem, ThreadListSeparator };

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

@@ -1 +1 @@
-{"version":3,"file":"ThreadList.es.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { createElement, type ElementType, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button, type ButtonProps } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n  children: ReactNode;\n  'aria-label'?: string;\n  /**\n   * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n   * so the list can render flush inside an outer container without nesting a second box.\n   */\n  embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n  return (\n    <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\n          'flex h-full flex-col gap-1 overflow-y-auto p-1',\n          !embedded && 'rounded-studio-panel border border-border1/50 bg-surface3',\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport interface ThreadListNewItemProps {\n  render?: ButtonProps['render'];\n  children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ render, children }: ThreadListNewItemProps) => {\n  return (\n    <Button render={render} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n      {children}\n    </Button>\n  );\n};\n\nexport const ThreadListSeparator = () => (\n  <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border1/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n  children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n  <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n    {children}\n  </ol>\n);\n\nexport interface ThreadListItemProps {\n  as?: ElementType;\n  href?: string;\n  to?: string;\n  isActive?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: () => void;\n  deleteLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n  as,\n  href,\n  to,\n  isActive,\n  onClick,\n  onDelete,\n  deleteLabel = 'delete',\n  className,\n  children,\n}: ThreadListItemProps) => {\n  return (\n    <li className=\"group relative\">\n      <Button\n        render={as ? createElement(as, { href, to }) : undefined}\n        onClick={onClick}\n        variant=\"ghost\"\n        className={cn(\n          'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n          onDelete && 'pr-9',\n          isActive && 'bg-surface4 text-neutral6',\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">{children}</span>\n      </Button>\n\n      {onDelete && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n          onClick={onDelete}\n          aria-label={deleteLabel}\n        >\n          <X />\n        </Button>\n      )}\n    </li>\n  );\n};\n\nexport interface ThreadListEmptyProps {\n  children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n  return (\n    <Txt as=\"p\" variant=\"ui-sm\" className=\"text-neutral3 px-3 py-2\">\n      {children}\n    </Txt>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAY;AAAA,OACf;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,iBAAA,GAAoB,CAAC,EAAE,MAAA,EAAQ,UAAS,KAA8B;AACjF,EAAA,2BACG,MAAA,EAAA,EAAO,MAAA,EAAgB,SAAQ,OAAA,EAAQ,SAAA,EAAU,wCAC/C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjC,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,+BAAA,EAAgC;AAOzF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,KAAK,aAAA,CAAc,EAAA,EAAI,EAAE,IAAA,EAAM,EAAA,EAAI,CAAA,GAAI,MAAA;AAAA,QAC/C,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,2BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,8BAAC,CAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACE,GAAA,CAAC,OAAI,EAAA,EAAG,GAAA,EAAI,SAAQ,OAAA,EAAQ,SAAA,EAAU,2BACnC,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ThreadList.es.js","sources":["../../src/ds/components/ThreadList/thread-list.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { createElement, type ElementType, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { raisedSurfaceStyle } from '../../primitives/raised-surface';\nimport { Button, type ButtonProps } from '../Button';\nimport { Txt } from '../Txt';\n\nexport interface ThreadListProps {\n  children: ReactNode;\n  'aria-label'?: string;\n  /**\n   * When true, drops the standalone block chrome (background, border, rounded corners, inset)\n   * so the list can render flush inside an outer container without nesting a second box.\n   */\n  embedded?: boolean;\n}\n\nexport const ThreadList = ({ children, 'aria-label': ariaLabel = 'Threads', embedded = false }: ThreadListProps) => {\n  return (\n    <div className={cn('size-full', !embedded && 'pb-2 pl-2')}>\n      <nav\n        aria-label={ariaLabel}\n        className={cn(\n          'flex h-full flex-col gap-1 overflow-y-auto p-1',\n          !embedded && cn(raisedSurfaceStyle, 'rounded-studio-panel'),\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport interface ThreadListNewItemProps {\n  render?: ButtonProps['render'];\n  children: ReactNode;\n}\n\nexport const ThreadListNewItem = ({ render, children }: ThreadListNewItemProps) => {\n  return (\n    <Button render={render} variant=\"ghost\" className=\"w-full justify-start rounded-xl px-3\">\n      {children}\n    </Button>\n  );\n};\n\nexport const ThreadListSeparator = () => (\n  <div role=\"separator\" aria-orientation=\"horizontal\" className=\"bg-border/40 -mx-1 my-1 h-px\" />\n);\n\nexport interface ThreadListItemsProps {\n  children: ReactNode;\n}\n\nexport const ThreadListItems = ({ children }: ThreadListItemsProps) => (\n  <ol className=\"flex flex-col gap-1\" data-testid=\"thread-list\">\n    {children}\n  </ol>\n);\n\nexport interface ThreadListItemProps {\n  as?: ElementType;\n  href?: string;\n  to?: string;\n  isActive?: boolean;\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n  onDelete?: () => void;\n  deleteLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nexport const ThreadListItem = ({\n  as,\n  href,\n  to,\n  isActive,\n  onClick,\n  onDelete,\n  deleteLabel = 'delete',\n  className,\n  children,\n}: ThreadListItemProps) => {\n  return (\n    <li className=\"group relative\">\n      <Button\n        render={as ? createElement(as, { href, to }) : undefined}\n        onClick={onClick}\n        variant=\"ghost\"\n        className={cn(\n          'w-full min-w-0 justify-start rounded-xl px-3 text-left',\n          onDelete && 'pr-9',\n          isActive && 'bg-fill-hover text-foreground',\n          className,\n        )}\n      >\n        <span className=\"min-w-0 flex-1\">{children}</span>\n      </Button>\n\n      {onDelete && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100\"\n          onClick={onDelete}\n          aria-label={deleteLabel}\n        >\n          <X />\n        </Button>\n      )}\n    </li>\n  );\n};\n\nexport interface ThreadListEmptyProps {\n  children: ReactNode;\n}\n\nexport const ThreadListEmpty = ({ children }: ThreadListEmptyProps) => {\n  return (\n    <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className=\"px-3 py-2\">\n      {children}\n    </Txt>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAkBO,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAU,cAAc,SAAA,GAAY,SAAA,EAAW,QAAA,GAAW,KAAA,EAAM,KAAuB;AAClH,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,aAAa,CAAC,QAAA,IAAY,WAAW,CAAA,EACtD,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,gDAAA;AAAA,QACA,CAAC,QAAA,IAAY,EAAA,CAAG,kBAAA,EAAoB,sBAAsB;AAAA,OAC5D;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,iBAAA,GAAoB,CAAC,EAAE,MAAA,EAAQ,UAAS,KAA8B;AACjF,EAAA,2BACG,MAAA,EAAA,EAAO,MAAA,EAAgB,SAAQ,OAAA,EAAQ,SAAA,EAAU,wCAC/C,QAAA,EACH,CAAA;AAEJ;AAEO,MAAM,mBAAA,GAAsB,sBACjC,GAAA,CAAC,KAAA,EAAA,EAAI,MAAK,WAAA,EAAY,kBAAA,EAAiB,YAAA,EAAa,SAAA,EAAU,8BAAA,EAA+B;AAOxF,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,qBACzC,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,aAAA,EAC7C,QAAA,EACH;AAeK,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,KAAK,aAAA,CAAc,EAAA,EAAI,EAAE,IAAA,EAAM,EAAA,EAAI,CAAA,GAAI,MAAA;AAAA,QAC/C,OAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,UACT,wDAAA;AAAA,UACA,QAAA,IAAY,MAAA;AAAA,UACZ,QAAA,IAAY,+BAAA;AAAA,UACZ;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EAAkB,QAAA,EAAS;AAAA;AAAA,KAC7C;AAAA,IAEC,QAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAU,+HAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,YAAA,EAAY,WAAA;AAAA,QAEZ,8BAAC,CAAA,EAAA,EAAE;AAAA;AAAA;AACL,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,eAAA,GAAkB,CAAC,EAAE,QAAA,EAAS,KAA4B;AACrE,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,WAAA,EAClD,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/components/ThreadRail.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const threadRail = require('../thread-rail-BvhuZLav.cjs');
+const threadRail = require('../thread-rail-b-8RHNX_.cjs');
 
 const SUMMARY_MAX_LENGTH = 120;
 const FILE_PREVIEW_LIMIT = 2;

package/dist/components/ThreadRail.es.js

@@ -1,4 +1,4 @@
-export { T as ThreadRail } from '../thread-rail-CPAHjoV1.js';
+export { T as ThreadRail } from '../thread-rail-vsR5C0j4.js';
 
 const SUMMARY_MAX_LENGTH = 120;
 const FILE_PREVIEW_LIMIT = 2;

package/dist/components/Toaster.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const toast = require('../toast-CwH7p9gV.cjs');
+const toast = require('../toast-nm-fM7BR.cjs');
 
 
 

package/dist/components/Toaster.es.js

@@ -1,2 +1,2 @@
-export { T as Toaster, t as toast } from '../toast-CTMSqE4M.js';
+export { T as Toaster, t as toast } from '../toast-c5kCpyWt.js';
 //# sourceMappingURL=Toaster.es.js.map

package/dist/components/TokenBudget.cjs.js

@@ -5,7 +5,7 @@ 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-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 const RADIUS = 7;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
@@ -67,9 +67,9 @@ function TokenBudget({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
           tones.formatCompactTokens(tokens),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-placeholder", children: [
             "/",
             tones.formatCompactTokens(threshold),
             "k"
@@ -92,19 +92,19 @@ function TokenBudgetDetail({
   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("p", { className: "text-meta 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.jsx("span", { className: "text-foreground", children: label })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon4 tabular-nums", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground tabular-nums", children: [
         tones.formatCompactTokens(tokens),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-placeholder", children: [
           "/",
           tones.formatCompactTokens(threshold),
           "k"
         ] }),
-        projected > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-icon2", children: [
+        projected > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-placeholder", children: [
           " −",
           tones.formatCompactTokens(projected),
           "k"
@@ -115,7 +115,7 @@ function TokenBudgetDetail({
       /* @__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 })
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-meta text-placeholder", children: description })
   ] });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"TokenBudget.cjs.js","sources":["../../src/ds/components/TokenBudget/token-budget.tsx","../../src/ds/components/TokenBudget/token-budget-detail.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport interface TokenBudgetProps {\n  tokens: number;\n  threshold: number;\n  /** What the budget is, spoken to assistive tech before its value. */\n  label: string;\n  tone?: TokenBudgetTone;\n  /** Runs the light around the ring while something fills or drains the budget. */\n  working?: boolean;\n  className?: string;\n}\n\n/** A token budget as a ring, with its reading beside it. */\nexport function TokenBudget({\n  tokens,\n  threshold,\n  label,\n  tone = 'messages',\n  working = false,\n  className,\n}: TokenBudgetProps) {\n  const id = useId();\n  const fill = threshold > 0 ? Math.min(100, Math.round((tokens / threshold) * 100)) : 0;\n  const wedge = `${((CIRCUMFERENCE * fill) / 100).toFixed(2)} ${CIRCUMFERENCE.toFixed(2)}`;\n\n  return (\n    <span\n      aria-label={label}\n      aria-valuemax={threshold}\n      aria-valuemin={0}\n      aria-valuenow={Math.min(tokens, threshold)}\n      aria-valuetext={`${formatCompactTokens(tokens)}/${formatCompactTokens(threshold)}k`}\n      className={cn('inline-flex items-center gap-1.5 tabular-nums', toneClass[tone], className)}\n      role=\"meter\"\n    >\n      <svg aria-hidden className=\"token-budget-dial\" data-working={working || undefined} viewBox=\"0 0 20 20\">\n        <circle className=\"token-budget-track\" cx=\"10\" cy=\"10\" r={RADIUS} strokeWidth=\"3\" />\n        {working ? (\n          <>\n            <defs>\n              <linearGradient id={`${id}-sheen`}>\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                <stop offset=\"50%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n              </linearGradient>\n              <mask id={`${id}-wedge`}>\n                <circle\n                  className=\"token-budget-arc\"\n                  cx=\"10\"\n                  cy=\"10\"\n                  r={RADIUS}\n                  stroke=\"white\"\n                  strokeDasharray={wedge}\n                  strokeWidth=\"3\"\n                />\n              </mask>\n            </defs>\n            <g mask={`url(#${id}-wedge)`}>\n              <rect className=\"token-budget-sheen\" fill={`url(#${id}-sheen)`} height=\"20\" width=\"20\" x=\"0\" y=\"0\" />\n            </g>\n          </>\n        ) : (\n          <circle\n            className=\"token-budget-arc\"\n            cx=\"10\"\n            cy=\"10\"\n            r={RADIUS}\n            stroke=\"currentColor\"\n            strokeDasharray={wedge}\n            strokeWidth=\"3\"\n          />\n        )}\n      </svg>\n      <span className=\"text-icon4\">\n        {formatCompactTokens(tokens)}\n        <span className=\"text-icon2\">/{formatCompactTokens(threshold)}k</span>\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nexport interface TokenBudgetDetailProps {\n  /** Short name of the budget, e.g. \"Messages\". */\n  label: string;\n  tokens: number;\n  threshold: number;\n  /** Tokens a pending pass will free, hatched at the end of the fill. */\n  projected?: number;\n  /** What filling it up sets off, in a few words. */\n  description?: string;\n  tone?: TokenBudgetTone;\n  /** Sits before the label in the budget's own color, tying the row to its ring. */\n  icon?: ReactNode;\n}\n\n/** A budget in full: how far it has filled, and what reaching the threshold sets off. */\nexport function TokenBudgetDetail({\n  label,\n  tokens,\n  threshold,\n  projected = 0,\n  description,\n  tone = 'messages',\n  icon,\n}: TokenBudgetDetailProps) {\n  const used = threshold > 0 ? Math.min(100, (tokens / threshold) * 100) : 0;\n  const freed = Math.min(used, threshold > 0 ? (projected / threshold) * 100 : 0);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', toneClass[tone])}>\n      <p className=\"text-ui-xs flex items-center justify-between gap-3\">\n        <span className=\"inline-flex items-center gap-1.5\">\n          {icon && (\n            <span aria-hidden className=\"[&_svg]:size-3.5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-icon5\">{label}</span>\n        </span>\n        <span className=\"text-icon4 tabular-nums\">\n          {formatCompactTokens(tokens)}\n          <span className=\"text-icon2\">/{formatCompactTokens(threshold)}k</span>\n          {projected > 0 && <span className=\"text-icon2\"> −{formatCompactTokens(projected)}k</span>}\n        </span>\n      </p>\n      <div className=\"flex h-1.5 overflow-hidden rounded-full bg-current/15\">\n        <div className=\"bg-current\" style={{ width: `${used - freed}%` }} />\n        <div className=\"token-budget-hatch\" style={{ width: `${freed}%` }} />\n      </div>\n      {description && <p className=\"text-ui-xs text-icon2\">{description}</p>}\n    </div>\n  );\n}\n"],"names":["useId","jsxs","formatCompactTokens","cn","toneClass","jsx","Fragment"],"mappings":"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"}
+{"version":3,"file":"TokenBudget.cjs.js","sources":["../../src/ds/components/TokenBudget/token-budget.tsx","../../src/ds/components/TokenBudget/token-budget-detail.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport interface TokenBudgetProps {\n  tokens: number;\n  threshold: number;\n  /** What the budget is, spoken to assistive tech before its value. */\n  label: string;\n  tone?: TokenBudgetTone;\n  /** Runs the light around the ring while something fills or drains the budget. */\n  working?: boolean;\n  className?: string;\n}\n\n/** A token budget as a ring, with its reading beside it. */\nexport function TokenBudget({\n  tokens,\n  threshold,\n  label,\n  tone = 'messages',\n  working = false,\n  className,\n}: TokenBudgetProps) {\n  const id = useId();\n  const fill = threshold > 0 ? Math.min(100, Math.round((tokens / threshold) * 100)) : 0;\n  const wedge = `${((CIRCUMFERENCE * fill) / 100).toFixed(2)} ${CIRCUMFERENCE.toFixed(2)}`;\n\n  return (\n    <span\n      aria-label={label}\n      aria-valuemax={threshold}\n      aria-valuemin={0}\n      aria-valuenow={Math.min(tokens, threshold)}\n      aria-valuetext={`${formatCompactTokens(tokens)}/${formatCompactTokens(threshold)}k`}\n      className={cn('inline-flex items-center gap-1.5 tabular-nums', toneClass[tone], className)}\n      role=\"meter\"\n    >\n      <svg aria-hidden className=\"token-budget-dial\" data-working={working || undefined} viewBox=\"0 0 20 20\">\n        <circle className=\"token-budget-track\" cx=\"10\" cy=\"10\" r={RADIUS} strokeWidth=\"3\" />\n        {working ? (\n          <>\n            <defs>\n              <linearGradient id={`${id}-sheen`}>\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                <stop offset=\"50%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n              </linearGradient>\n              <mask id={`${id}-wedge`}>\n                <circle\n                  className=\"token-budget-arc\"\n                  cx=\"10\"\n                  cy=\"10\"\n                  r={RADIUS}\n                  stroke=\"white\"\n                  strokeDasharray={wedge}\n                  strokeWidth=\"3\"\n                />\n              </mask>\n            </defs>\n            <g mask={`url(#${id}-wedge)`}>\n              <rect className=\"token-budget-sheen\" fill={`url(#${id}-sheen)`} height=\"20\" width=\"20\" x=\"0\" y=\"0\" />\n            </g>\n          </>\n        ) : (\n          <circle\n            className=\"token-budget-arc\"\n            cx=\"10\"\n            cy=\"10\"\n            r={RADIUS}\n            stroke=\"currentColor\"\n            strokeDasharray={wedge}\n            strokeWidth=\"3\"\n          />\n        )}\n      </svg>\n      <span className=\"text-muted-foreground\">\n        {formatCompactTokens(tokens)}\n        <span className=\"text-placeholder\">/{formatCompactTokens(threshold)}k</span>\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nexport interface TokenBudgetDetailProps {\n  /** Short name of the budget, e.g. \"Messages\". */\n  label: string;\n  tokens: number;\n  threshold: number;\n  /** Tokens a pending pass will free, hatched at the end of the fill. */\n  projected?: number;\n  /** What filling it up sets off, in a few words. */\n  description?: string;\n  tone?: TokenBudgetTone;\n  /** Sits before the label in the budget's own color, tying the row to its ring. */\n  icon?: ReactNode;\n}\n\n/** A budget in full: how far it has filled, and what reaching the threshold sets off. */\nexport function TokenBudgetDetail({\n  label,\n  tokens,\n  threshold,\n  projected = 0,\n  description,\n  tone = 'messages',\n  icon,\n}: TokenBudgetDetailProps) {\n  const used = threshold > 0 ? Math.min(100, (tokens / threshold) * 100) : 0;\n  const freed = Math.min(used, threshold > 0 ? (projected / threshold) * 100 : 0);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', toneClass[tone])}>\n      <p className=\"text-meta flex items-center justify-between gap-3\">\n        <span className=\"inline-flex items-center gap-1.5\">\n          {icon && (\n            <span aria-hidden className=\"[&_svg]:size-3.5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-foreground\">{label}</span>\n        </span>\n        <span className=\"text-muted-foreground tabular-nums\">\n          {formatCompactTokens(tokens)}\n          <span className=\"text-placeholder\">/{formatCompactTokens(threshold)}k</span>\n          {projected > 0 && <span className=\"text-placeholder\"> −{formatCompactTokens(projected)}k</span>}\n        </span>\n      </p>\n      <div className=\"flex h-1.5 overflow-hidden rounded-full bg-current/15\">\n        <div className=\"bg-current\" style={{ width: `${used - freed}%` }} />\n        <div className=\"token-budget-hatch\" style={{ width: `${freed}%` }} />\n      </div>\n      {description && <p className=\"text-meta text-placeholder\">{description}</p>}\n    </div>\n  );\n}\n"],"names":["useId","jsxs","formatCompactTokens","cn","toneClass","jsx","Fragment"],"mappings":"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"}

package/dist/components/TokenBudget.es.js

@@ -1,7 +1,7 @@
 import { f as formatCompactTokens, t as toneClass } from '../tones-CzIKDKD-.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 import '../TokenBudget.css';const RADIUS = 7;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
@@ -63,9 +63,9 @@ function TokenBudget({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "text-icon4", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           formatCompactTokens(tokens),
-          /* @__PURE__ */ jsxs("span", { className: "text-icon2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-placeholder", children: [
             "/",
             formatCompactTokens(threshold),
             "k"
@@ -88,19 +88,19 @@ function TokenBudgetDetail({
   const used = threshold > 0 ? Math.min(100, tokens / threshold * 100) : 0;
   const freed = Math.min(used, threshold > 0 ? projected / threshold * 100 : 0);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", toneClass[tone]), children: [
-    /* @__PURE__ */ jsxs("p", { className: "text-ui-xs flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-meta flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
         icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "[&_svg]:size-3.5", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "text-icon5", children: label })
+        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label })
       ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-icon4 tabular-nums", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums", children: [
         formatCompactTokens(tokens),
-        /* @__PURE__ */ jsxs("span", { className: "text-icon2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-placeholder", children: [
           "/",
           formatCompactTokens(threshold),
           "k"
         ] }),
-        projected > 0 && /* @__PURE__ */ jsxs("span", { className: "text-icon2", children: [
+        projected > 0 && /* @__PURE__ */ jsxs("span", { className: "text-placeholder", children: [
           " −",
           formatCompactTokens(projected),
           "k"
@@ -111,7 +111,7 @@ function TokenBudgetDetail({
       /* @__PURE__ */ jsx("div", { className: "bg-current", style: { width: `${used - freed}%` } }),
       /* @__PURE__ */ jsx("div", { className: "token-budget-hatch", style: { width: `${freed}%` } })
     ] }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-ui-xs text-icon2", children: description })
+    description && /* @__PURE__ */ jsx("p", { className: "text-meta text-placeholder", children: description })
   ] });
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"TokenBudget.es.js","sources":["../../src/ds/components/TokenBudget/token-budget.tsx","../../src/ds/components/TokenBudget/token-budget-detail.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport interface TokenBudgetProps {\n  tokens: number;\n  threshold: number;\n  /** What the budget is, spoken to assistive tech before its value. */\n  label: string;\n  tone?: TokenBudgetTone;\n  /** Runs the light around the ring while something fills or drains the budget. */\n  working?: boolean;\n  className?: string;\n}\n\n/** A token budget as a ring, with its reading beside it. */\nexport function TokenBudget({\n  tokens,\n  threshold,\n  label,\n  tone = 'messages',\n  working = false,\n  className,\n}: TokenBudgetProps) {\n  const id = useId();\n  const fill = threshold > 0 ? Math.min(100, Math.round((tokens / threshold) * 100)) : 0;\n  const wedge = `${((CIRCUMFERENCE * fill) / 100).toFixed(2)} ${CIRCUMFERENCE.toFixed(2)}`;\n\n  return (\n    <span\n      aria-label={label}\n      aria-valuemax={threshold}\n      aria-valuemin={0}\n      aria-valuenow={Math.min(tokens, threshold)}\n      aria-valuetext={`${formatCompactTokens(tokens)}/${formatCompactTokens(threshold)}k`}\n      className={cn('inline-flex items-center gap-1.5 tabular-nums', toneClass[tone], className)}\n      role=\"meter\"\n    >\n      <svg aria-hidden className=\"token-budget-dial\" data-working={working || undefined} viewBox=\"0 0 20 20\">\n        <circle className=\"token-budget-track\" cx=\"10\" cy=\"10\" r={RADIUS} strokeWidth=\"3\" />\n        {working ? (\n          <>\n            <defs>\n              <linearGradient id={`${id}-sheen`}>\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                <stop offset=\"50%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n              </linearGradient>\n              <mask id={`${id}-wedge`}>\n                <circle\n                  className=\"token-budget-arc\"\n                  cx=\"10\"\n                  cy=\"10\"\n                  r={RADIUS}\n                  stroke=\"white\"\n                  strokeDasharray={wedge}\n                  strokeWidth=\"3\"\n                />\n              </mask>\n            </defs>\n            <g mask={`url(#${id}-wedge)`}>\n              <rect className=\"token-budget-sheen\" fill={`url(#${id}-sheen)`} height=\"20\" width=\"20\" x=\"0\" y=\"0\" />\n            </g>\n          </>\n        ) : (\n          <circle\n            className=\"token-budget-arc\"\n            cx=\"10\"\n            cy=\"10\"\n            r={RADIUS}\n            stroke=\"currentColor\"\n            strokeDasharray={wedge}\n            strokeWidth=\"3\"\n          />\n        )}\n      </svg>\n      <span className=\"text-icon4\">\n        {formatCompactTokens(tokens)}\n        <span className=\"text-icon2\">/{formatCompactTokens(threshold)}k</span>\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nexport interface TokenBudgetDetailProps {\n  /** Short name of the budget, e.g. \"Messages\". */\n  label: string;\n  tokens: number;\n  threshold: number;\n  /** Tokens a pending pass will free, hatched at the end of the fill. */\n  projected?: number;\n  /** What filling it up sets off, in a few words. */\n  description?: string;\n  tone?: TokenBudgetTone;\n  /** Sits before the label in the budget's own color, tying the row to its ring. */\n  icon?: ReactNode;\n}\n\n/** A budget in full: how far it has filled, and what reaching the threshold sets off. */\nexport function TokenBudgetDetail({\n  label,\n  tokens,\n  threshold,\n  projected = 0,\n  description,\n  tone = 'messages',\n  icon,\n}: TokenBudgetDetailProps) {\n  const used = threshold > 0 ? Math.min(100, (tokens / threshold) * 100) : 0;\n  const freed = Math.min(used, threshold > 0 ? (projected / threshold) * 100 : 0);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', toneClass[tone])}>\n      <p className=\"text-ui-xs flex items-center justify-between gap-3\">\n        <span className=\"inline-flex items-center gap-1.5\">\n          {icon && (\n            <span aria-hidden className=\"[&_svg]:size-3.5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-icon5\">{label}</span>\n        </span>\n        <span className=\"text-icon4 tabular-nums\">\n          {formatCompactTokens(tokens)}\n          <span className=\"text-icon2\">/{formatCompactTokens(threshold)}k</span>\n          {projected > 0 && <span className=\"text-icon2\"> −{formatCompactTokens(projected)}k</span>}\n        </span>\n      </p>\n      <div className=\"flex h-1.5 overflow-hidden rounded-full bg-current/15\">\n        <div className=\"bg-current\" style={{ width: `${used - freed}%` }} />\n        <div className=\"token-budget-hatch\" style={{ width: `${freed}%` }} />\n      </div>\n      {description && <p className=\"text-ui-xs text-icon2\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenBudget.es.js","sources":["../../src/ds/components/TokenBudget/token-budget.tsx","../../src/ds/components/TokenBudget/token-budget-detail.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nconst RADIUS = 7;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport interface TokenBudgetProps {\n  tokens: number;\n  threshold: number;\n  /** What the budget is, spoken to assistive tech before its value. */\n  label: string;\n  tone?: TokenBudgetTone;\n  /** Runs the light around the ring while something fills or drains the budget. */\n  working?: boolean;\n  className?: string;\n}\n\n/** A token budget as a ring, with its reading beside it. */\nexport function TokenBudget({\n  tokens,\n  threshold,\n  label,\n  tone = 'messages',\n  working = false,\n  className,\n}: TokenBudgetProps) {\n  const id = useId();\n  const fill = threshold > 0 ? Math.min(100, Math.round((tokens / threshold) * 100)) : 0;\n  const wedge = `${((CIRCUMFERENCE * fill) / 100).toFixed(2)} ${CIRCUMFERENCE.toFixed(2)}`;\n\n  return (\n    <span\n      aria-label={label}\n      aria-valuemax={threshold}\n      aria-valuemin={0}\n      aria-valuenow={Math.min(tokens, threshold)}\n      aria-valuetext={`${formatCompactTokens(tokens)}/${formatCompactTokens(threshold)}k`}\n      className={cn('inline-flex items-center gap-1.5 tabular-nums', toneClass[tone], className)}\n      role=\"meter\"\n    >\n      <svg aria-hidden className=\"token-budget-dial\" data-working={working || undefined} viewBox=\"0 0 20 20\">\n        <circle className=\"token-budget-track\" cx=\"10\" cy=\"10\" r={RADIUS} strokeWidth=\"3\" />\n        {working ? (\n          <>\n            <defs>\n              <linearGradient id={`${id}-sheen`}>\n                <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n                <stop offset=\"50%\" stopColor=\"currentColor\" stopOpacity=\"1\" />\n                <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0.25\" />\n              </linearGradient>\n              <mask id={`${id}-wedge`}>\n                <circle\n                  className=\"token-budget-arc\"\n                  cx=\"10\"\n                  cy=\"10\"\n                  r={RADIUS}\n                  stroke=\"white\"\n                  strokeDasharray={wedge}\n                  strokeWidth=\"3\"\n                />\n              </mask>\n            </defs>\n            <g mask={`url(#${id}-wedge)`}>\n              <rect className=\"token-budget-sheen\" fill={`url(#${id}-sheen)`} height=\"20\" width=\"20\" x=\"0\" y=\"0\" />\n            </g>\n          </>\n        ) : (\n          <circle\n            className=\"token-budget-arc\"\n            cx=\"10\"\n            cy=\"10\"\n            r={RADIUS}\n            stroke=\"currentColor\"\n            strokeDasharray={wedge}\n            strokeWidth=\"3\"\n          />\n        )}\n      </svg>\n      <span className=\"text-muted-foreground\">\n        {formatCompactTokens(tokens)}\n        <span className=\"text-placeholder\">/{formatCompactTokens(threshold)}k</span>\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode } from 'react';\n\nimport { formatCompactTokens } from './format-tokens';\nimport { toneClass } from './tones';\nimport type { TokenBudgetTone } from './tones';\nimport { cn } from '@/lib/utils';\n\nimport './token-budget.css';\n\nexport interface TokenBudgetDetailProps {\n  /** Short name of the budget, e.g. \"Messages\". */\n  label: string;\n  tokens: number;\n  threshold: number;\n  /** Tokens a pending pass will free, hatched at the end of the fill. */\n  projected?: number;\n  /** What filling it up sets off, in a few words. */\n  description?: string;\n  tone?: TokenBudgetTone;\n  /** Sits before the label in the budget's own color, tying the row to its ring. */\n  icon?: ReactNode;\n}\n\n/** A budget in full: how far it has filled, and what reaching the threshold sets off. */\nexport function TokenBudgetDetail({\n  label,\n  tokens,\n  threshold,\n  projected = 0,\n  description,\n  tone = 'messages',\n  icon,\n}: TokenBudgetDetailProps) {\n  const used = threshold > 0 ? Math.min(100, (tokens / threshold) * 100) : 0;\n  const freed = Math.min(used, threshold > 0 ? (projected / threshold) * 100 : 0);\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', toneClass[tone])}>\n      <p className=\"text-meta flex items-center justify-between gap-3\">\n        <span className=\"inline-flex items-center gap-1.5\">\n          {icon && (\n            <span aria-hidden className=\"[&_svg]:size-3.5\">\n              {icon}\n            </span>\n          )}\n          <span className=\"text-foreground\">{label}</span>\n        </span>\n        <span className=\"text-muted-foreground tabular-nums\">\n          {formatCompactTokens(tokens)}\n          <span className=\"text-placeholder\">/{formatCompactTokens(threshold)}k</span>\n          {projected > 0 && <span className=\"text-placeholder\"> −{formatCompactTokens(projected)}k</span>}\n        </span>\n      </p>\n      <div className=\"flex h-1.5 overflow-hidden rounded-full bg-current/15\">\n        <div className=\"bg-current\" style={{ width: `${used - freed}%` }} />\n        <div className=\"token-budget-hatch\" style={{ width: `${freed}%` }} />\n      </div>\n      {description && <p className=\"text-meta text-placeholder\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltip.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tooltip = require('../tooltip-_cda-a7s.cjs');
+const tooltip = require('../tooltip-FvWL16Xn.cjs');
 
 
 

package/dist/components/Tooltip.es.js

@@ -1,2 +1,2 @@
-export { T as Tooltip, a as TooltipContent, b as TooltipProvider, c as TooltipTrigger } from '../tooltip-QuS0KEbc.js';
+export { T as Tooltip, a as TooltipContent, b as TooltipProvider, c as TooltipTrigger } from '../tooltip-BrDiP0RI.js';
 //# sourceMappingURL=Tooltip.es.js.map

package/dist/components/Tree.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const primitives_transitions = require('../primitives/transitions.cjs.js');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
-const collapsible = require('../collapsible-C3x1n6sF.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const collapsible = require('../collapsible-BvrI6XnN.cjs');
 const lucideReact = require('lucide-react');
 const hooks_useIsomorphicLayoutEffect = require('../hooks/use-isomorphic-layout-effect.cjs.js');
 
@@ -83,8 +83,8 @@ const TreeFile = React__namespace.forwardRef(({ id, className, children }, ref)
       className: utils_cn.cn(
         "group flex h-7 min-w-0 cursor-pointer items-center gap-1.5 rounded-sm px-1",
         primitives_transitions.transitions.colors,
-        "outline-hidden hover:bg-surface4 focus-visible:bg-surface4 focus-visible:text-neutral6 focus-visible:outline-hidden",
-        isSelected && "bg-surface4 text-neutral6",
+        "outline-hidden hover:bg-fill-subtle focus-visible:bg-fill-subtle focus-visible:text-foreground focus-visible:outline-hidden",
+        isSelected && "bg-fill-hover text-foreground",
         className
       ),
       style: { paddingLeft: depth * 12 + 18 },
@@ -174,9 +174,9 @@ const TreeFolderTrigger = React__namespace.forwardRef(
         ref,
         "data-tree-folder-row": "true",
         className: utils_cn.cn(
-          "group flex h-7 w-full min-w-0 items-center rounded-sm hover:bg-surface4",
+          "group flex h-7 w-full min-w-0 items-center rounded-sm hover:bg-fill-subtle",
           primitives_transitions.transitions.colors,
-          folderCtx?.isFocused && "bg-surface4 text-neutral6",
+          folderCtx?.isFocused && "bg-fill-hover text-foreground",
           className
         ),
         children: [
@@ -195,7 +195,7 @@ const TreeFolderTrigger = React__namespace.forwardRef(
                 focusFolderItem(e.currentTarget, { focus: false });
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "text-neutral3 size-3 shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": "true", className: "text-muted-foreground size-3 shrink-0" }),
                 children
               ]
             }
@@ -261,12 +261,12 @@ const TreeInput = React__namespace.forwardRef(
         className: utils_cn.cn(
           "group flex h-7 min-w-0 items-center gap-1.5 rounded-sm px-1",
           primitives_transitions.transitions.colors,
-          "focus-within:bg-surface4 focus-within:text-neutral6 focus-within:outline-hidden",
+          "focus-within:bg-fill-subtle focus-within:text-foreground focus-within:outline-hidden",
           className
         ),
         style: { paddingLeft: depth * 12 + 18 },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-neutral3" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center [&>svg]:size-3.5", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-muted-foreground" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -278,7 +278,7 @@ const TreeInput = React__namespace.forwardRef(
               onKeyDown: handleKeyDown,
               onBlur: handleBlur,
               onFocus: handleFocus,
-              className: "text-neutral5 placeholder:text-neutral3 text-ui-sm min-w-0 flex-1 border-none bg-transparent outline-hidden"
+              className: "text-foreground placeholder:text-muted-foreground text-caption min-w-0 flex-1 border-none bg-transparent outline-hidden"
             }
           )
         ]
@@ -288,7 +288,7 @@ const TreeInput = React__namespace.forwardRef(
 );
 TreeInput.displayName = "Tree.Input";
 
-const TreeLabel = React__namespace.forwardRef(({ className, children }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: utils_cn.cn("truncate text-neutral5", className), children }));
+const TreeLabel = React__namespace.forwardRef(({ className, children }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: utils_cn.cn("truncate text-foreground", className), children }));
 TreeLabel.displayName = "Tree.Label";
 
 const TREE_FOCUSABLE_ITEM_SELECTOR = '[data-tree-item-kind="folder"], [data-tree-item-kind="file"]';
@@ -472,7 +472,7 @@ const TreeRoot = React__namespace.forwardRef(
       {
         ref: handleRootRef,
         role: "tree",
-        className: utils_cn.cn("flex flex-col text-ui-sm", className),
+        className: utils_cn.cn("flex flex-col text-caption", className),
         onKeyDown: handleKeyDown,
         children
       }