@actioneer/ads 0.5.4 → 0.5.6

package/components/assistant-ui/tool-group.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { memo as w, useRef as y, useState as C, useCallback as G } from "react";
-import { Loader as k, ChevronDown as R } from "../../lib/icons.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { memo as w, useRef as y, useState as C, useCallback as k } from "react";
+import { ChevronDown as G } from "../../lib/icons.js";
 import { cva as I } from "class-variance-authority";
-import { useScrollLock as A } from "@assistant-ui/react";
-import { Collapsible as S, CollapsibleTrigger as j, CollapsibleContent as z } from "../ui/collapsible.js";
+import { useScrollLock as R } from "@assistant-ui/react";
+import { Collapsible as S, CollapsibleTrigger as A, CollapsibleContent as j } from "../ui/collapsible.js";
 import { cn as n } from "../../lib/cn.js";
-const D = 200, L = I("aui-tool-group-root group/tool-group w-full", {
+import { TraceStateIcon as z } from "../ai-elements/chain-of-thought-icon.js";
+const D = 200, U = I("aui-tool-group-root group/tool-group w-full", {
   variants: {
     variant: {
       outline: "rounded-lg border py-3",
@@ -16,48 +17,49 @@ const D = 200, L = I("aui-tool-group-root group/tool-group w-full", {
   },
   defaultVariants: { variant: "outline" }
 });
-function m({
+function c({
   className: r,
   variant: o,
   open: a,
   onOpenChange: e,
-  defaultOpen: l = !1,
-  children: f,
+  defaultOpen: u = !1,
+  children: l,
   ...h
 }) {
-  const p = y(null), [x, b] = C(l), s = A(p, D), u = a !== void 0, N = u ? a : x, T = G(
-    (d) => {
-      s(), u || b(d), e == null || e(d);
+  const s = y(null), [x, b] = C(u), d = R(s, D), g = a !== void 0, N = g ? a : x, T = k(
+    (m) => {
+      d(), g || b(m), e == null || e(m);
     },
-    [s, u, e]
+    [d, g, e]
   );
   return /* @__PURE__ */ t(
     S,
     {
-      ref: p,
+      ref: s,
       "data-slot": "tool-group-root",
       "data-variant": o ?? "outline",
       open: N,
       onOpenChange: T,
       className: n(
-        L({ variant: o }),
+        U({ variant: o }),
         "group/tool-group-root",
         r
       ),
       ...h,
-      children: f
+      children: l
     }
   );
 }
-function c({
+function v({
   count: r,
   active: o = !1,
-  className: a,
-  ...e
+  stage: a = "thinking",
+  className: e,
+  ...u
 }) {
   const l = `${r} tool ${r === 1 ? "call" : "calls"}`;
-  return /* @__PURE__ */ g(
-    j,
+  return /* @__PURE__ */ p(
+    A,
     {
       "data-slot": "tool-group-trigger",
       className: n(
@@ -65,18 +67,21 @@ function c({
         "group-data-[variant=ghost]/tool-group-root:text-muted-foreground group-data-[variant=ghost]/tool-group-root:hover:text-foreground group-data-[variant=ghost]/tool-group-root:py-1.5",
         "group-data-[variant=outline]/tool-group-root:w-full group-data-[variant=outline]/tool-group-root:px-4",
         "group-data-[variant=muted]/tool-group-root:w-full group-data-[variant=muted]/tool-group-root:px-4",
-        a
+        e
       ),
-      ...e,
+      ...u,
       children: [
-        o && /* @__PURE__ */ t(
-          k,
+        /* @__PURE__ */ t(
+          z,
           {
-            "data-slot": "tool-group-trigger-loader",
-            className: "aui-tool-group-trigger-loader size-3 shrink-0 animate-spin [animation-duration:var(--duration-spin)] motion-reduce:animate-none"
+            "data-slot": "tool-group-trigger-icon",
+            stage: a,
+            status: o ? "active" : "complete",
+            className: "aui-tool-group-trigger-icon size-4 shrink-0",
+            "aria-hidden": !0
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ p(
           "span",
           {
             "data-slot": "tool-group-trigger-label",
@@ -101,7 +106,7 @@ function c({
           }
         ),
         /* @__PURE__ */ t(
-          R,
+          G,
           {
             "data-slot": "tool-group-trigger-chevron",
             className: n(
@@ -116,13 +121,13 @@ function c({
     }
   );
 }
-function v({
+function f({
   className: r,
   children: o,
   ...a
 }) {
   return /* @__PURE__ */ t(
-    z,
+    j,
     {
       "data-slot": "tool-group-content",
       className: n(
@@ -153,21 +158,21 @@ function v({
     }
   );
 }
-const U = ({ children: r, startIndex: o, endIndex: a }) => {
+const V = ({ children: r, startIndex: o, endIndex: a }) => {
   const e = a - o + 1;
-  return /* @__PURE__ */ g(m, { children: [
-    /* @__PURE__ */ t(c, { count: e }),
-    /* @__PURE__ */ t(v, { children: r })
+  return /* @__PURE__ */ p(c, { children: [
+    /* @__PURE__ */ t(v, { count: e }),
+    /* @__PURE__ */ t(f, { children: r })
   ] });
-}, i = w(U);
+}, i = w(V);
 i.displayName = "ToolGroup";
-i.Root = m;
-i.Trigger = c;
-i.Content = v;
+i.Root = c;
+i.Trigger = v;
+i.Content = f;
 export {
   i as ToolGroup,
-  v as ToolGroupContent,
-  m as ToolGroupRoot,
-  c as ToolGroupTrigger,
-  L as toolGroupVariants
+  f as ToolGroupContent,
+  c as ToolGroupRoot,
+  v as ToolGroupTrigger,
+  U as toolGroupVariants
 };

package/components/audio-waveform.js

@@ -2,8 +2,8 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import * as u from "react";
 import { Button as ee, buttonVariants as re } from "./button.js";
-import { Loader as te, Warning as ae, Pause as ne, Play as oe, Download as ie } from "../lib/icons.js";
-import { cn as se } from "../lib/cn.js";
+import { Loader as te, Warning as ae, Pause as ne, Play as oe, Download as se } from "../lib/icons.js";
+import { cn as ie } from "../lib/cn.js";
 function A(t) {
   if (!t || !Number.isFinite(t) || t < 0) return "0:00";
   const e = Math.floor(t), a = Math.floor(e / 3600), c = Math.floor(e % 3600 / 60), d = e % 60;
@@ -40,8 +40,8 @@ function fe({
           import("wavesurfer.js/dist/plugins/hover.esm.js")
         ]);
         if (M) return;
-        const N = B(o, "--foreground", "currentColor"), O = B(o, "--muted-foreground", "currentColor"), Q = B(o, "--background", "Canvas"), X = (s, P) => {
-          const Y = s[0] ?? [], Z = s[1] ?? s[0] ?? [], { width: _, height: T } = P.canvas, y = T / 2, S = 4, I = 2, $ = Math.max(1, Math.floor(_ / (S + I))), H = (n, g) => {
+        const N = B(o, "--foreground", "currentColor"), O = B(o, "--muted-foreground", "currentColor"), Q = B(o, "--background", "Canvas"), X = (i, P) => {
+          const Y = i[0] ?? [], Z = i[1] ?? i[0] ?? [], { width: _, height: T } = P.canvas, y = T / 2, S = 4, I = 2, $ = Math.max(1, Math.floor(_ / (S + I))), H = (n, g) => {
             if (!n.length) return 0;
             const h = Math.floor(g / $ * n.length), j = Math.max(h + 1, Math.floor((g + 1) / $ * n.length));
             let W = 0;
@@ -52,7 +52,7 @@ function fe({
             const g = n * (S + I), h = Math.max(1, H(Y, n) * (y - 2)), j = Math.max(1, H(Z, n) * (y - 2));
             P.fillRect(g, y - h, S, h), P.fillRect(g, y + 1, S, j);
           }
-        }, i = w.create({
+        }, s = w.create({
           container: o,
           url: t,
           duration: e,
@@ -79,11 +79,11 @@ function fe({
             })
           ]
         });
-        p.current = i, i.on("ready", (s) => {
-          D(s), C(!0);
-        }), i.on("timeupdate", (s) => b(s)), i.on("seeking", (s) => b(s)), i.on("play", () => x(!0)), i.on("pause", () => x(!1)), i.on("finish", () => {
-          x(!1), b(i.getDuration());
-        }), i.on("error", () => {
+        p.current = s, s.on("ready", (i) => {
+          D(i), C(!0);
+        }), s.on("timeupdate", (i) => b(i)), s.on("seeking", (i) => b(i)), s.on("play", () => x(!0)), s.on("pause", () => x(!1)), s.on("finish", () => {
+          x(!1), b(s.getDuration());
+        }), s.on("error", () => {
           R("Recording could not be loaded."), C(!1);
         });
       } catch {
@@ -98,16 +98,16 @@ function fe({
     var o;
     !k || f || (o = p.current) == null || o.playPause();
   };
-  return /* @__PURE__ */ l("div", { className: se("space-y-3", V), "data-slot": "audio-waveform", children: [
+  return /* @__PURE__ */ l("div", { className: ie("space-y-3", V), "data-slot": "audio-waveform", children: [
     /* @__PURE__ */ l("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ l("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ r("p", { className: "text-base font-medium", children: "Recording" }),
+        /* @__PURE__ */ r("p", { className: "text-base font-normal", children: "Recording" }),
         /* @__PURE__ */ r("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: v ? `${d} above · ${m.toLowerCase()} below` : a ?? "Audio" })
       ] }),
       /* @__PURE__ */ r("p", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: A(L) })
     ] }),
     /* @__PURE__ */ l("div", { className: "relative overflow-hidden py-2", children: [
-      v && /* @__PURE__ */ l("div", { className: "pointer-events-none absolute inset-x-0 top-2 z-10 flex h-[92px] flex-col items-center justify-between text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+      v && /* @__PURE__ */ l("div", { className: "pointer-events-none absolute inset-x-0 top-2 z-10 flex h-[92px] flex-col items-center justify-between text-xs font-normal uppercase tracking-wide text-muted-foreground", children: [
         /* @__PURE__ */ r("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: d }),
         /* @__PURE__ */ r("span", { className: "rounded-sm bg-card/85 px-1.5 py-0.5", children: m })
       ] }),
@@ -136,7 +136,7 @@ function fe({
         }
       ),
       /* @__PURE__ */ l("a", { href: t, download: q, className: re({ variant: "ghost" }), children: [
-        /* @__PURE__ */ r(ie, { "aria-hidden": "true", className: "size-4" }),
+        /* @__PURE__ */ r(se, { "aria-hidden": "true", className: "size-4" }),
         "Audio"
       ] })
     ] })

package/components/autocomplete.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsxs as w, jsx as c } from "react/jsx-runtime";
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
 import * as o from "react";
 import { MotionConfig as j, AnimatePresence as z, motion as q } from "motion/react";
 import { Search as O, Check as P } from "../lib/icons.js";
 import { cn as y } from "../lib/cn.js";
 import { inputBaseClass as B } from "./field.js";
 import { floatVariants as F } from "../lib/motion.js";
-const K = o.forwardRef(
+import { Ripple as K } from "./ripple.js";
+const Q = o.forwardRef(
   ({
     items: u,
     value: f,
@@ -18,9 +19,9 @@ const K = o.forwardRef(
     className: S,
     id: I
   }, M) => {
-    const d = u.find((e) => e.value === f), [m, x] = o.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = o.useState(!1), [n, h] = o.useState(-1), N = o.useRef(null), k = o.useRef(null), b = o.useId();
+    const d = u.find((e) => e.value === f), [m, h] = o.useState((d == null ? void 0 : d.label) ?? ""), [r, a] = o.useState(!1), [n, w] = o.useState(-1), N = o.useRef(null), k = o.useRef(null), b = o.useId();
     o.useEffect(() => {
-      x((d == null ? void 0 : d.label) ?? (p ? f ?? "" : ""));
+      h((d == null ? void 0 : d.label) ?? (p ? f ?? "" : ""));
     }, [d, f, p]);
     const l = o.useMemo(() => {
       const e = m.trim().toLowerCase();
@@ -39,26 +40,26 @@ const K = o.forwardRef(
       const e = (t = k.current) == null ? void 0 : t.children[n];
       e == null || e.scrollIntoView({ block: "nearest" });
     }, [r, n]);
-    const D = (e) => {
-      l.length !== 0 && h((t) => {
+    const g = (e) => {
+      l.length !== 0 && w((t) => {
         let s = t;
         for (let v = 0; v < l.length; v++)
           if (s = (s + e + l.length) % l.length, !l[s].disabled) return s;
         return t;
       });
-    }, g = (e) => {
+    }, D = (e) => {
       const t = l[e];
-      !t || t.disabled || (i == null || i(t.value), x(t.label), a(!1));
+      !t || t.disabled || (i == null || i(t.value), h(t.label), a(!1));
     }, L = (e) => {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), r ? D(1) : a(!0);
+          e.preventDefault(), r ? g(1) : a(!0);
           break;
         case "ArrowUp":
-          e.preventDefault(), r ? D(-1) : a(!0);
+          e.preventDefault(), r ? g(-1) : a(!0);
           break;
         case "Enter":
-          r && n >= 0 ? (e.preventDefault(), g(n)) : p && (i == null || i(m), a(!1));
+          r && n >= 0 ? (e.preventDefault(), D(n)) : p && (i == null || i(m), a(!1));
           break;
         case "Escape":
           r && (e.preventDefault(), a(!1));
@@ -68,8 +69,8 @@ const K = o.forwardRef(
           break;
       }
     };
-    return /* @__PURE__ */ w("div", { ref: N, className: "relative", children: [
-      /* @__PURE__ */ w("div", { className: "group/field relative", children: [
+    return /* @__PURE__ */ x("div", { ref: N, className: "relative", children: [
+      /* @__PURE__ */ x("div", { className: "group/field relative", children: [
         /* @__PURE__ */ c(
           O,
           {
@@ -95,7 +96,7 @@ const K = o.forwardRef(
             placeholder: A,
             value: m,
             onChange: (e) => {
-              x(e.target.value), a(!0), h(-1), p && (i == null || i(e.target.value));
+              h(e.target.value), a(!0), w(-1), p && (i == null || i(e.target.value));
             },
             onFocus: () => a(!0),
             onKeyDown: L,
@@ -103,7 +104,7 @@ const K = o.forwardRef(
           }
         )
       ] }),
-      /* @__PURE__ */ c(j, { reducedMotion: "user", children: /* @__PURE__ */ c(z, { children: r && /* @__PURE__ */ c(
+      /* @__PURE__ */ c(j, { reducedMotion: "user", children: /* @__PURE__ */ c(z, { children: r && /* @__PURE__ */ x(
         q.ul,
         {
           ref: k,
@@ -118,45 +119,48 @@ const K = o.forwardRef(
             "absolute z-50 mt-1.5 max-h-60 w-full overflow-auto p-1",
             "rounded-md border border-border bg-elevated shadow-elevation"
           ),
-          children: l.length === 0 ? /* @__PURE__ */ c(
-            "li",
-            {
-              role: "presentation",
-              className: "px-2 py-6 text-center text-xs text-muted-foreground",
-              children: "No results"
-            }
-          ) : l.map((e, t) => {
-            const s = e.value === f, v = t === n;
-            return /* @__PURE__ */ w(
+          children: [
+            /* @__PURE__ */ c(K, { origin: "top" }),
+            l.length === 0 ? /* @__PURE__ */ c(
               "li",
               {
-                id: `${b}-opt-${t}`,
-                role: "option",
-                "aria-selected": s,
-                "aria-disabled": e.disabled || void 0,
-                onMouseEnter: () => !e.disabled && h(t),
-                onMouseDown: ($) => $.preventDefault(),
-                onClick: () => g(t),
-                className: y(
-                  "flex cursor-pointer items-center justify-between gap-2",
-                  "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
-                  v && !e.disabled && "bg-muted",
-                  e.disabled && "pointer-events-none opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ c("span", { className: "truncate", children: e.label }),
-                  s && /* @__PURE__ */ c(P, { className: "size-4 shrink-0", "aria-hidden": !0 })
-                ]
-              },
-              e.value
-            );
-          })
+                role: "presentation",
+                className: "px-2 py-6 text-center text-xs text-muted-foreground",
+                children: "No results"
+              }
+            ) : l.map((e, t) => {
+              const s = e.value === f, v = t === n;
+              return /* @__PURE__ */ x(
+                "li",
+                {
+                  id: `${b}-opt-${t}`,
+                  role: "option",
+                  "aria-selected": s,
+                  "aria-disabled": e.disabled || void 0,
+                  onMouseEnter: () => !e.disabled && w(t),
+                  onMouseDown: ($) => $.preventDefault(),
+                  onClick: () => D(t),
+                  className: y(
+                    "flex cursor-pointer items-center justify-between gap-2",
+                    "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
+                    v && !e.disabled && "bg-muted",
+                    e.disabled && "pointer-events-none opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ c("span", { className: "truncate", children: e.label }),
+                    s && /* @__PURE__ */ c(P, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                  ]
+                },
+                e.value
+              );
+            })
+          ]
         }
       ) }) })
     ] });
   }
 );
-K.displayName = "Autocomplete";
+Q.displayName = "Autocomplete";
 export {
-  K as Autocomplete
+  Q as Autocomplete
 };

package/components/avatar.js

@@ -1,83 +1,97 @@
 "use client";
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
-import * as u from "react";
-import { cn as n } from "../lib/cn.js";
-const m = {
+import { jsx as l, jsxs as x } from "react/jsx-runtime";
+import * as f from "react";
+import { cn as o } from "../lib/cn.js";
+const g = {
   sm: "size-8 text-xs",
   md: "size-10 text-xs",
   lg: "size-12 text-base",
   xl: "size-16 text-lg"
-}, g = {
+}, p = {
   full: "rounded-full",
   lg: "rounded-lg"
 };
-function b(l) {
-  const e = l.trim().split(/\s+/).filter(Boolean);
+function v(r) {
+  const e = r.trim().split(/\s+/).filter(Boolean);
   return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
 }
-const x = u.forwardRef(
-  ({ className: l, src: e, name: t, size: s = "md", radius: a = "full", ...o }, d) => {
-    const i = t ? b(t) : "";
-    return /* @__PURE__ */ r(
+const m = [
+  "bg-(--color-cyan-soft) text-(--color-cyan-deep)",
+  "bg-(--color-lime-soft) text-(--color-lime-deep)",
+  "bg-(--color-amber-soft) text-(--color-amber-deep)",
+  "bg-info-100 text-info-700",
+  "bg-sage-300 text-sage-950"
+];
+function y(r) {
+  let e = 0;
+  for (const t of r) e = e * 31 + t.charCodeAt(0) >>> 0;
+  return m[e % m.length];
+}
+const N = f.forwardRef(
+  ({ className: r, src: e, name: t, size: i = "md", radius: s = "full", ...a }, c) => {
+    const n = t ? v(t) : "";
+    return /* @__PURE__ */ l(
       "span",
       {
-        ref: d,
+        ref: c,
         role: "img",
         "aria-label": t,
-        className: n(
-          "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium",
-          "bg-fill text-fill-foreground",
-          m[s],
-          g[a],
-          l
+        className: o(
+          "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
+          // Images sit on the neutral fill; initials take a deterministic
+          // per-name identity tint so a roster reads multi-color.
+          e || !t ? "bg-fill text-fill-foreground" : y(t),
+          g[i],
+          p[s],
+          r
         ),
-        ...o,
-        children: e ? /* @__PURE__ */ r(
+        ...a,
+        children: e ? /* @__PURE__ */ l(
           "img",
           {
             src: e,
             alt: t ?? "",
             className: "size-full object-cover"
           }
-        ) : /* @__PURE__ */ r("span", { "aria-hidden": !0, children: i })
+        ) : /* @__PURE__ */ l("span", { "aria-hidden": !0, children: n })
       }
     );
   }
 );
-x.displayName = "Avatar";
-const N = u.forwardRef(
-  ({ className: l, max: e, size: t = "md", radius: s = "full", children: a, ...o }, d) => {
-    const i = u.Children.toArray(a), c = typeof e == "number" ? i.length - e : 0, p = typeof e == "number" ? i.slice(0, e) : i;
-    return /* @__PURE__ */ v(
+N.displayName = "Avatar";
+const z = f.forwardRef(
+  ({ className: r, max: e, size: t = "md", radius: i = "full", children: s, ...a }, c) => {
+    const n = f.Children.toArray(s), d = typeof e == "number" ? n.length - e : 0, h = typeof e == "number" ? n.slice(0, e) : n;
+    return /* @__PURE__ */ x(
       "div",
       {
-        ref: d,
-        className: n("flex items-center", l),
-        ...o,
+        ref: c,
+        className: o("flex items-center", r),
+        ...a,
         children: [
-          p.map((h, f) => /* @__PURE__ */ r(
+          h.map((b, u) => /* @__PURE__ */ l(
             "div",
             {
-              className: n(
+              className: o(
                 "ring-2 ring-background rounded-full",
-                f > 0 && "-ml-2"
+                u > 0 && "-ml-2"
               ),
-              children: h
+              children: b
             },
-            f
+            u
           )),
-          c > 0 && /* @__PURE__ */ r("div", { className: n("ring-2 ring-background rounded-full -ml-2"), children: /* @__PURE__ */ r(
+          d > 0 && /* @__PURE__ */ l("div", { className: o("ring-2 ring-background rounded-full -ml-2"), children: /* @__PURE__ */ l(
             "span",
             {
               role: "img",
-              "aria-label": `${c} more`,
-              className: n(
-                "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium",
+              "aria-label": `${d} more`,
+              className: o(
+                "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
                 "bg-muted text-muted-foreground",
-                m[t],
-                g[s]
+                g[t],
+                p[i]
               ),
-              children: /* @__PURE__ */ r("span", { "aria-hidden": !0, children: `+${c}` })
+              children: /* @__PURE__ */ l("span", { "aria-hidden": !0, children: `+${d}` })
             }
           ) })
         ]
@@ -85,8 +99,8 @@ const N = u.forwardRef(
     );
   }
 );
-N.displayName = "AvatarGroup";
+z.displayName = "AvatarGroup";
 export {
-  x as Avatar,
-  N as AvatarGroup
+  N as Avatar,
+  z as AvatarGroup
 };

package/components/badge.js

@@ -4,7 +4,7 @@ import * as d from "react";
 import { cva as c } from "class-variance-authority";
 import { cn as o } from "../lib/cn.js";
 const g = c(
-  "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap",
+  "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-normal whitespace-nowrap",
   {
     variants: {
       variant: {
@@ -25,7 +25,7 @@ const g = c(
     compoundVariants: [
       // solid
       { variant: "solid", color: "default", className: "bg-fill text-fill-foreground" },
-      { variant: "solid", color: "primary", className: "bg-brand text-brand-foreground" },
+      { variant: "solid", color: "primary", className: "bg-foreground text-background" },
       { variant: "solid", color: "success", className: "bg-success text-success-foreground" },
       { variant: "solid", color: "warning", className: "bg-warning text-warning-foreground" },
       { variant: "solid", color: "danger", className: "bg-danger text-danger-foreground" },
@@ -49,7 +49,7 @@ const g = c(
   }
 ), f = {
   default: "bg-muted-foreground",
-  primary: "bg-brand",
+  primary: "bg-foreground",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",

package/components/brand-texture.js

@@ -11,7 +11,7 @@ function l({
     s,
     {
       variant: "custom",
-      color: "var(--color-ink-950)",
+      color: "var(--texture-ink)",
       pixelSize: 4,
       speed: a,
       patternScale: 3,

package/components/breadcrumbs.d.ts

@@ -1,8 +1,34 @@
 import * as React from "react";
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLElement>;
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Pin the trail to the top of its scroll container. While pinned and the
+     * content has scrolled beneath it, a hairline stroke fades in below the row
+     * to separate the header from the scrolled content (and clears at the top).
+     */
+    sticky?: boolean;
+    /**
+     * Render a leading back-arrow control before the trail (the standard ADS
+     * back affordance). Fires on click; give it an accessible label via
+     * `backLabel` if the default "Back" isn't right.
+     */
+    onBack?: () => void;
+    backLabel?: string;
+    /**
+     * Right-aligned controls rendered inside the trail row (page actions, an
+     * overflow menu) — they ride along when the trail is sticky.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Supporting metadata stitched inline right after the trail (schema name,
+     * sync status…). Muted, truncates before the trail does.
+     */
+    meta?: React.ReactNode;
+}
 export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
 export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
     href?: string;
     isCurrent?: boolean;
+    /** Leading glyph or avatar shown before the label (e.g. a source icon). */
+    icon?: React.ReactNode;
 }
 export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;