@actioneer/ads 1.0.4 → 1.0.6

package/DESIGN.md

@@ -8,55 +8,55 @@ colors:
   action-primary-soft: "#dfefec"
   action-primary-foreground: "#ffffff"
   field-focus: "#4c9b92"
-  brand: "#20201e"
-  brand-hover: "#4b4b47"
-  brand-text: "#20201e"
+  brand: "#1c8379"
+  brand-hover: "#017369"
+  brand-text: "#016159"
   brand-foreground: "#ffffff"
-  success: "#516923"
+  success: "#2d6b22"
   success-foreground: "#ffffff"
   warning: "#f79009"
-  warning-foreground: "#20201e"
+  warning-foreground: "#21201d"
   danger: "#d92d20"
   danger-foreground: "#ffffff"
   info: "#1570ef"
   info-foreground: "#ffffff"
-  background: "#f1f1ef"
-  foreground: "#20201e"
-  surface: "#ececea"
-  surface-foreground: "#20201e"
+  background: "#f3f1e9"
+  foreground: "#21201d"
+  surface: "#efece3"
+  surface-foreground: "#21201d"
   elevated: "#ffffff"
   card: "#ffffff"
-  card-foreground: "#20201e"
-  muted: "#e5e5e2"
-  muted-foreground: "#4b4b47"
-  fill: "#ececea"
-  fill-foreground: "#20201e"
-  accent: "#dcdcd8"
-  accent-foreground: "#20201e"
-  on-white-primary: "#20201e"
-  on-white-secondary: "#4b4b47"
-  on-white-tertiary: "#777771"
-  on-warm-grey-primary: "#20201e"
-  on-warm-grey-secondary: "#4b4b47"
-  on-warm-grey-tertiary: "#777771"
-  primary: "#20201e"
-  secondary: "#4b4b47"
+  card-foreground: "#21201d"
+  muted: "#e8e5db"
+  muted-foreground: "#4d4b44"
+  fill: "#efece3"
+  fill-foreground: "#21201d"
+  accent: "#dfdcd0"
+  accent-foreground: "#21201d"
+  on-white-primary: "#21201d"
+  on-white-secondary: "#4d4b44"
+  on-white-tertiary: "#79766a"
+  on-warm-grey-primary: "#21201d"
+  on-warm-grey-secondary: "#4d4b44"
+  on-warm-grey-tertiary: "#79766a"
+  primary: "#21201d"
+  secondary: "#4d4b44"
   tertiary: "color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))"
-  border: "#e5e5e2"
-  border-primary: "#dcdcd8"
-  border-secondary: "#e5e5e2"
-  border-tertiary: "#ececea"
-  border-strong: "#dcdcd8"
-  input: "#e5e5e2"
-  menu-stroke: "#e5e5e2"
-  toast-stroke: "#e5e5e2"
-  tree-stroke: "#e5e5e2"
-  specimen-stroke: "#ececea"
+  border: "#e8e5db"
+  border-primary: "#dfdcd0"
+  border-secondary: "#e8e5db"
+  border-tertiary: "#efece3"
+  border-strong: "#dfdcd0"
+  input: "#e8e5db"
+  menu-stroke: "#e8e5db"
+  toast-stroke: "#e8e5db"
+  tree-stroke: "#e8e5db"
+  specimen-stroke: "#efece3"
   table-shell: "#ffffff"
-  table-stroke: "#ececea"
+  table-stroke: "#efece3"
   table-header-foreground: "color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))"
   artifact-canvas: "color-mix(in srgb, var(--color-brand-mark) 7%, var(--color-white))"
-  ring: "color-mix(in srgb, var(--color-wg12) 50%, transparent)"
+  ring: "#1c8379"
   overlay: "color-mix(in srgb, var(--color-wg12) 50%, transparent)"
 typography:
   display:
@@ -179,7 +179,7 @@ components:
 
 TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
 
-ADS 1.0.4 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
+ADS 1.0.6 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
 
 The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio teal CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the teal and runs every action on ink.
 
@@ -211,26 +211,26 @@ The one place a hue is spent by default: the Studio teal CTA family.
 
 The neutral-ink action role kept as a compatibility API.
 
-**Compatibility action role — neutral ink, never a colored primary hue.**
+**Shared brand roles for control states, primary accents, and marks.**
 
-- **brand** (`--color-brand`, #20201e) `bg-brand`
-- **brand-hover** (`--color-brand-hover`, #4b4b47) `bg-brand-hover`
-- **brand-text** (`--color-brand-text`, #20201e) `text-brand-text`
+- **brand** (`--color-brand`, #1c8379) `bg-brand`
+- **brand-hover** (`--color-brand-hover`, #017369) `bg-brand-hover`
+- **brand-text** (`--color-brand-text`, #016159) `text-brand-text`
 - **brand-foreground** (`--color-brand-foreground`, #ffffff) `text-brand-foreground`
 
 ### Tertiary
 
 Semantic status. These four carry meaning and are never identity.
 
-**Lichen success-700 clears AA on White and both success soft fills; success-600 is reserved for non-text marks because its 3.73:1 contrast on White does not clear body-text AA.**
+**Grass green 700 clears AA on White and both success soft fills.**
 
-- **success** (`--color-success`, #516923) `bg-success`
+- **success** (`--color-success`, #2d6b22) `bg-success`
 - **success-foreground** (`--color-success-foreground`, #ffffff) `text-success-foreground`
 
 **Amber-500 fill kept (it IS the caution signal); dark ink foreground instead of white = 6.94:1 (white on amber was 2.35:1, failed even 3:1).**
 
 - **warning** (`--color-warning`, #f79009) `bg-warning`
-- **warning-foreground** (`--color-warning-foreground`, #20201e) `text-warning-foreground`
+- **warning-foreground** (`--color-warning-foreground`, #21201d) `text-warning-foreground`
 
 **Danger and info: solid semantic fills carrying white foregrounds.**
 
@@ -245,70 +245,70 @@ The warm-grey ground everything else stands on.
 
 **The shell canvas and its ink: the ground between top-level panels.**
 
-- **background** (`--color-background`, #f1f1ef) `bg-background`
-- **foreground** (`--color-foreground`, #20201e) `text-foreground`
+- **background** (`--color-background`, #f3f1e9) `bg-background`
+- **foreground** (`--color-foreground`, #21201d) `text-foreground`
 
 **One continuous recess inside a white surface, never a screen-level ground.**
 
-- **surface** (`--color-surface`, #ececea) `bg-surface`
-- **surface-foreground** (`--color-surface-foreground`, #20201e) `text-surface-foreground`
+- **surface** (`--color-surface`, #efece3) `bg-surface`
+- **surface-foreground** (`--color-surface-foreground`, #21201d) `text-surface-foreground`
 - **elevated** (`--color-elevated`, #ffffff) `bg-elevated`
 
 **The white working plane that sits on the canvas, and the specimen hairline.**
 
 - **card** (`--color-card`, #ffffff) `bg-card`
-- **card-foreground** (`--color-card-foreground`, #20201e) `text-card-foreground`
+- **card-foreground** (`--color-card-foreground`, #21201d) `text-card-foreground`
 
 **The hover and row-state wash: interaction, not a default item background.**
 
-- **muted** (`--color-muted`, #e5e5e2) `bg-muted`
-- **muted-foreground** (`--color-muted-foreground`, #4b4b47) `text-muted-foreground`
+- **muted** (`--color-muted`, #e8e5db) `bg-muted`
+- **muted-foreground** (`--color-muted-foreground`, #4d4b44) `text-muted-foreground`
 
 **Quiet fill — avatars, chips, and disabled controls.**
 
-- **fill** (`--color-fill`, #ececea) `bg-fill`
-- **fill-foreground** (`--color-fill-foreground`, #20201e) `text-fill-foreground`
+- **fill** (`--color-fill`, #efece3) `bg-fill`
+- **fill-foreground** (`--color-fill-foreground`, #21201d) `text-fill-foreground`
 
 **The active and selected wash, one step above hover.**
 
-- **accent** (`--color-accent`, #dcdcd8) `bg-accent`
-- **accent-foreground** (`--color-accent-foreground`, #20201e) `text-accent-foreground`
+- **accent** (`--color-accent`, #dfdcd0) `bg-accent`
+- **accent-foreground** (`--color-accent-foreground`, #21201d) `text-accent-foreground`
 
 **Contextual text hierarchies — three accessible levels per surface.**
 
-- **on-white-primary** (`--color-on-white-primary`, #20201e) `bg-on-white-primary`
-- **on-white-secondary** (`--color-on-white-secondary`, #4b4b47) `bg-on-white-secondary`
-- **on-white-tertiary** (`--color-on-white-tertiary`, #777771) `bg-on-white-tertiary`
-- **on-warm-grey-primary** (`--color-on-warm-grey-primary`, #20201e) `bg-on-warm-grey-primary`
-- **on-warm-grey-secondary** (`--color-on-warm-grey-secondary`, #4b4b47) `bg-on-warm-grey-secondary`
-- **on-warm-grey-tertiary** (`--color-on-warm-grey-tertiary`, #777771) `bg-on-warm-grey-tertiary`
+- **on-white-primary** (`--color-on-white-primary`, #21201d) `bg-on-white-primary`
+- **on-white-secondary** (`--color-on-white-secondary`, #4d4b44) `bg-on-white-secondary`
+- **on-white-tertiary** (`--color-on-white-tertiary`, #79766a) `bg-on-white-tertiary`
+- **on-warm-grey-primary** (`--color-on-warm-grey-primary`, #21201d) `bg-on-warm-grey-primary`
+- **on-warm-grey-secondary** (`--color-on-warm-grey-secondary`, #4d4b44) `bg-on-warm-grey-secondary`
+- **on-warm-grey-tertiary** (`--color-on-warm-grey-tertiary`, #79766a) `bg-on-warm-grey-tertiary`
 
 **Context-free compatibility aliases remain conservative.**
 
-- **primary** (`--color-primary`, #20201e) `bg-primary`
-- **secondary** (`--color-secondary`, #4b4b47) `bg-secondary`
+- **primary** (`--color-primary`, #21201d) `bg-primary`
+- **secondary** (`--color-secondary`, #4d4b44) `bg-secondary`
 - **tertiary** (`--color-tertiary`, color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))) `bg-tertiary`
 
 **The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.**
 
-- **border** (`--color-border`, #e5e5e2) `bg-border`
-- **border-primary** (`--color-border-primary`, #dcdcd8) `bg-border-primary`
-- **border-secondary** (`--color-border-secondary`, #e5e5e2) `bg-border-secondary`
-- **border-tertiary** (`--color-border-tertiary`, #ececea) `bg-border-tertiary`
-- **border-strong** (`--color-border-strong`, #dcdcd8) `bg-border-strong`
-- **input** (`--color-input`, #e5e5e2) `bg-input`
-- **menu-stroke** (`--color-menu-stroke`, #e5e5e2) `bg-menu-stroke`
-- **toast-stroke** (`--color-toast-stroke`, #e5e5e2) `bg-toast-stroke`
-- **tree-stroke** (`--color-tree-stroke`, #e5e5e2) `bg-tree-stroke`
+- **border** (`--color-border`, #e8e5db) `bg-border`
+- **border-primary** (`--color-border-primary`, #dfdcd0) `bg-border-primary`
+- **border-secondary** (`--color-border-secondary`, #e8e5db) `bg-border-secondary`
+- **border-tertiary** (`--color-border-tertiary`, #efece3) `bg-border-tertiary`
+- **border-strong** (`--color-border-strong`, #dfdcd0) `bg-border-strong`
+- **input** (`--color-input`, #e8e5db) `bg-input`
+- **menu-stroke** (`--color-menu-stroke`, #e8e5db) `bg-menu-stroke`
+- **toast-stroke** (`--color-toast-stroke`, #e8e5db) `bg-toast-stroke`
+- **tree-stroke** (`--color-tree-stroke`, #e8e5db) `bg-tree-stroke`
 
 **The white working plane that sits on the canvas, and the specimen hairline.**
 
-- **specimen-stroke** (`--color-specimen-stroke`, #ececea) `bg-specimen-stroke`
+- **specimen-stroke** (`--color-specimen-stroke`, #efece3) `bg-specimen-stroke`
 
 **Table surfaces: the white tray, its hairlines, and header ink.**
 
 - **table-shell** (`--color-table-shell`, #ffffff) `bg-table-shell`
-- **table-stroke** (`--color-table-stroke`, #ececea) `bg-table-stroke`
+- **table-stroke** (`--color-table-stroke`, #efece3) `bg-table-stroke`
 - **table-header-foreground** (`--color-table-header-foreground`, color-mix(in srgb, var(--color-wg10) 80%, var(--color-wg11))) `text-table-header-foreground`
 
 **The artifact sheet: white warmed by a trace of the brand mark.**
@@ -317,7 +317,7 @@ The warm-grey ground everything else stands on.
 
 **Focus ring and scrim, both translucent warm ink.**
 
-- **ring** (`--color-ring`, color-mix(in srgb, var(--color-wg12) 50%, transparent)) `ring-ring`
+- **ring** (`--color-ring`, #1c8379) `ring-ring`
 - **overlay** (`--color-overlay`, color-mix(in srgb, var(--color-wg12) 50%, transparent)) `bg-overlay`
 
 ### Named rules

package/README.md

@@ -0,0 +1,205 @@
+# @actioneer/ads
+
+The **Actioneer Design System**: React 19 components, Tailwind CSS v4 tokens,
+bundled Aribau Grotesk fonts, and accessible interactions with built-in motion.
+
+[Browse components in Storybook](https://actioneer-ads-storybook.himanshu-563.workers.dev).
+
+> **The one rule:** build UI **only** from the exact named exports of
+> `@actioneer/ads`, and reference tokens — never raw color/dimension literals.
+> Never fork, alias, deep-import, or hand-roll a copy of a component.
+> `@actioneer/ads-lint` enforces this.
+
+---
+
+## 1. Install
+
+```bash
+npm install @actioneer/ads motion
+```
+
+Use an existing **React 19 + Tailwind CSS v4** application with an ESM-capable
+bundler. `react` and `react-dom` are peer dependencies; the application owns the
+React instance. The setup below uses Next.js App Router paths.
+
+The bootstrap configures styles and providers and creates the lint config:
+
+```bash
+npx @actioneer/ads init
+```
+
+`init` adds the CSS import, creates `ads-providers.tsx` (or `.jsx`), and writes a
+consumer `ads-lint.config.mjs`. It wraps detected Next.js layouts and reports any
+manual setup still needed. Run it from your application directory after setting
+up Tailwind v4. The manual setup follows.
+
+## 2. Tailwind v4 + `styles.css` (import order matters)
+
+In your global stylesheet, import ADS's stylesheet **immediately after**
+Tailwind:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@actioneer/ads/styles.css";
+```
+
+`styles.css` carries three things that must live in the **same CSS graph** as
+`tailwindcss`:
+
+- the `@theme` **design tokens** (colors, typography, spacing, and radii),
+- the **Aribau Grotesk** `@font-face` rules (served package-relative — no
+  `/public` copy needed), and
+- a baked `@source "./**/*.{js,mjs}"` so Tailwind scans ADS's own class usage and
+  generates its utilities in your build.
+
+> ⚠️ Import order is load-bearing. If you `@import "@actioneer/ads/styles.css"`
+> **before** `@import "tailwindcss"` — or import it into a stylesheet that isn't
+> part of the Tailwind graph — its `@theme` is an unknown at-rule and **no tokens
+> emit** (you'll get an unstyled, "blank" render).
+
+Granular entries are also exported if you need them: `@actioneer/ads/theme.css`
+(tokens only) and `@actioneer/ads/fonts.css` (`@font-face` only).
+
+## 3. Required providers
+
+Wrap your app root **once** with all three providers. `npx @actioneer/ads init`
+generates this as `app/ads-providers.tsx` (beside the layout when using `src/app`):
+
+```tsx
+// app/ads-providers.tsx
+"use client";
+
+import type { ReactNode } from "react";
+import { TooltipProvider, ToastProvider } from "@actioneer/ads";
+import { MotionConfig } from "motion/react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <MotionConfig reducedMotion="user">
+      <ToastProvider>
+        <TooltipProvider>{children}</TooltipProvider>
+      </ToastProvider>
+    </MotionConfig>
+  );
+}
+```
+
+```tsx
+// app/layout.tsx
+import type { ReactNode } from "react";
+import { Providers } from "./ads-providers";
+import "./globals.css";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body><Providers>{children}</Providers></body>
+    </html>
+  );
+}
+```
+
+- **`TooltipProvider`** — required. The vendored tooltip/attachment chips crash
+  the tree without an ancestor provider.
+- **`ToastProvider`** — required to render toasts.
+- **`<MotionConfig reducedMotion="user">`** — honors the OS reduced-motion
+  setting across every ADS animation.
+
+For other React frameworks, import the global stylesheet and wrap the application
+root with `Providers` in the framework's entry point.
+
+## 4. Usage
+
+Import the **exact named export** from the package barrel:
+
+```tsx
+// app/page.tsx
+"use client";
+
+import { Button, InputField } from "@actioneer/ads";
+
+export default function Example() {
+  return (
+    <main className="mx-auto flex max-w-sm flex-col gap-4 p-6">
+      <InputField label="Workspace name" defaultValue="Actioneer" />
+      <div className="flex gap-2">
+        <Button variant="solid" size="md">Save</Button>
+        <Button variant="secondary">Cancel</Button>
+      </div>
+    </main>
+  );
+}
+```
+
+Do **not**:
+
+| ❌ Anti-pattern | ✅ Instead |
+|----------------|-----------|
+| `import { Button } from "@actioneer/ads/button"` (deep import) | `import { Button } from "@actioneer/ads"` |
+| `import { Card as Panel } from "@actioneer/ads"` (alias) | use the export's real name, `Card` |
+| `import Button from "@actioneer/ads"` (default) / `import * as ADS` (namespace) | named imports only |
+| copy a component's source into your repo and edit it (fork) | import it; request an ADS change upstream |
+| `class="bg-[#0a0a0b]"` / `"#0a0a0b"` (literal) | a semantic token, e.g. `bg-brand` |
+| `import { Dialog } from "@radix-ui/react-dialog"` (external UI) | the ADS primitive (`Modal`, `Popover`, …) |
+
+**Why:** ADS is a single source of truth. A token or motion fix ships to the
+whole fleet with one version bump — but only if every consumer imports the
+canonical export instead of a divergent fork.
+
+**Discover exact names:** the machine-readable catalog ships in the package —
+`@actioneer/ads/manifest.json` (every export → name, family, kind, variants,
+props, showcase URL) and `@actioneer/ads/llms.txt` (the LLM-facing index). Point
+your coding agent at those, or use the ADS MCP server.
+
+Reference the semantic tokens (e.g. `bg-brand`, `text-muted-foreground`,
+`border-input`, `ring-ring`) rather than raw values; the full token list is in
+`manifest.json` under `tokens`.
+
+Shared motion presets are named exports from `@actioneer/ads`. Components already
+include their own interaction motion; use the exported presets for additional
+application state changes.
+
+## 5. Wire up `ads-lint`
+
+`@actioneer/ads-lint` enforces the contract above on your changed files.
+
+```bash
+npm install -D @actioneer/ads-lint typescript
+```
+
+Drop a **consumer-mode** config at your repo root (`init` writes this for you):
+
+```js
+// ads-lint.config.mjs
+export default {
+  imports: {
+    libraryPackage: "@actioneer/ads",
+    libraryRoot: null, // consumer mode: every file is a consumer
+  },
+};
+```
+
+Run it:
+
+```bash
+# lint everything
+npx ads-lint --all
+# or just what changed (pre-commit / CI)
+npx ads-lint --staged
+npx ads-lint --diff origin/main
+```
+
+It flags deep imports, aliased/default/namespace barrel imports, external-UI
+imports, hardcoded color/dimension literals, and banned/weak motion — the same
+rules ADS holds itself to. A CI job that runs `npx ads-lint --diff <base>` keeps
+every consuming repo honest.
+
+## Documentation and license
+
+- [Storybook: components and recipes](https://actioneer-ads-storybook.himanshu-563.workers.dev)
+- [ADS MCP: component discovery for coding agents](https://www.npmjs.com/package/@actioneer/ads-mcp)
+- Bundled references: `@actioneer/ads/manifest.json`, `@actioneer/ads/llms.txt`,
+  and `@actioneer/ads/DESIGN.md`.
+
+MIT licensed.

package/components/ai-elements/agent-trace.js

@@ -12,7 +12,7 @@ import { Text as ce } from "../typography.js";
 import { ChainOfThoughtStep as de, ChainOfThoughtTrigger as ue, ChainOfThoughtContent as he, ChainOfThoughtItem as me, ChainOfThoughtSearchResults as pe, ChainOfThoughtSearchResult as fe, ChainOfThought as ge } from "./chain-of-thought.js";
 import { TraceStateIcon as C } from "./chain-of-thought-icon.js";
 import { ResearchActivity as L } from "./research-activity.js";
-import { Tool as ve, ToolHeader as be, ToolContent as xe, ToolInput as Ne, ToolOutput as Ce } from "./tool.js";
+import { Tool as ve, ToolHeader as be, ToolContent as Ne, ToolInput as xe, ToolOutput as Ce } from "./tool.js";
 const Te = "Main Agent", we = 60, _ = J(!0);
 function ye({
   title: e,
@@ -39,7 +39,7 @@ function ye({
           ),
           /* @__PURE__ */ t("span", { className: "text-base", children: e }),
           /* @__PURE__ */ i("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-            a != null && /* @__PURE__ */ t("span", { className: "text-xs text-tertiary tabular-nums", children: a }),
+            a != null && /* @__PURE__ */ t("span", { className: "text-s text-tertiary tabular-nums", children: a }),
             /* @__PURE__ */ t(
               ee,
               {
@@ -79,7 +79,7 @@ function k(e) {
   if (e.elapsed != null) return e.elapsed;
   if (e.seconds != null) return T(e.seconds);
 }
-function N(e) {
+function x(e) {
   const r = [];
   for (const a of e) r.includes(a.group) || r.push(a.group);
   return r;
@@ -102,8 +102,8 @@ function Oe(e) {
 }
 const F = P(({ call: e }) => /* @__PURE__ */ i(ve, { children: [
   /* @__PURE__ */ t(be, { title: e.name, type: `tool-${e.name}`, state: e.state }),
-  /* @__PURE__ */ i(xe, { children: [
-    e.input !== void 0 && /* @__PURE__ */ t(Ne, { input: e.input }),
+  /* @__PURE__ */ i(Ne, { children: [
+    e.input !== void 0 && /* @__PURE__ */ t(xe, { input: e.input }),
     /* @__PURE__ */ t(
       Ce,
       {
@@ -132,7 +132,7 @@ const G = P(
     return /* @__PURE__ */ i(de, { status: e.status === "error" ? "error" : "complete", children: [
       /* @__PURE__ */ i(ue, { leftIcon: s, endContent: l, children: [
         /* @__PURE__ */ t("span", { children: e.label }),
-        e.agent && e.agent !== r && /* @__PURE__ */ t("span", { className: "ml-2 text-xs font-normal text-tertiary", children: e.agent })
+        e.agent && e.agent !== r && /* @__PURE__ */ t("span", { className: "ml-2 text-s font-normal text-tertiary", children: e.agent })
       ] }),
       /* @__PURE__ */ t(he, { rail: !1, children: /* @__PURE__ */ i("div", { className: "-ml-5", style: { "--tree-rail-lead": "18px" }, children: [
         e.detail != null && /* @__PURE__ */ t("div", { className: "ads-tree-rail pb-3", children: /* @__PURE__ */ t(me, { children: e.detail }) }),
@@ -163,17 +163,17 @@ const $e = ({
   ...w
 }) => {
   var D, E;
-  const n = e.find((o) => o.status === "active") ?? null, p = e.filter((o) => o.status === "complete" || o.status === "error"), y = new Set(l ?? []), g = e.length > 0 && e.every((o) => o.status === "complete" || o.status === "error"), [H, S] = Q(() => new Set(N(e))), A = j(null);
+  const n = e.find((o) => o.status === "active") ?? null, p = e.filter((o) => o.status === "complete" || o.status === "error"), y = new Set(l ?? []), g = e.length > 0 && e.every((o) => o.status === "complete" || o.status === "error"), [H, S] = Q(() => new Set(x(e))), A = j(null);
   R(() => {
     const o = (n == null ? void 0 : n.group) ?? null;
-    o == null || o === A.current || (A.current = o, S(new Set(N(e).filter((u) => u !== o))));
+    o == null || o === A.current || (A.current = o, S(new Set(x(e).filter((u) => u !== o))));
   }, [n == null ? void 0 : n.group, e]);
   const M = j(g);
   R(() => {
-    g && !M.current && (S(new Set(N(e))), A.current = null), M.current = g;
+    g && !M.current && (S(new Set(x(e))), A.current = null), M.current = g;
   }, [g, e]);
-  const v = N(p).map((o) => {
-    var f, x;
+  const v = x(p).map((o) => {
+    var f, N;
     const u = p.filter((b) => b.group === o), c = u[0];
     return {
       group: o,
@@ -181,7 +181,7 @@ const $e = ({
         C,
         {
           stage: c == null ? void 0 : c.state,
-          toolName: (x = (f = c == null ? void 0 : c.calls) == null ? void 0 : f[0]) == null ? void 0 : x.name,
+          toolName: (N = (f = c == null ? void 0 : c.calls) == null ? void 0 : f[0]) == null ? void 0 : N.name,
           status: "complete"
         }
       ),
@@ -211,8 +211,8 @@ const $e = ({
             icon: u,
             summary: Ae(c),
             open: !H.has(o),
-            onOpenChange: (f) => S((x) => {
-              const b = new Set(x);
+            onOpenChange: (f) => S((N) => {
+              const b = new Set(N);
               return f ? b.delete(o) : b.add(o), b;
             }),
             children: /* @__PURE__ */ t(ge, { children: c.map((f) => /* @__PURE__ */ t(

package/components/ai-elements/chain-of-thought.js

@@ -153,7 +153,7 @@ const k = O(!1), S = O("tree"), I = c(
         ),
         /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", children: o }),
         /* @__PURE__ */ l("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-          r != null && /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: r }),
+          r != null && /* @__PURE__ */ e("span", { className: "text-s text-tertiary tabular-nums", children: r }),
           t && /* @__PURE__ */ e(
             w,
             {
@@ -300,7 +300,7 @@ const k = O(!1), S = O("tree"), I = c(
                   children: a
                 }
               ),
-              r != null && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-tertiary tabular-nums", children: r }),
+              r != null && /* @__PURE__ */ e("span", { className: "shrink-0 text-s text-tertiary tabular-nums", children: r }),
               /* @__PURE__ */ e(
                 w,
                 {
@@ -380,7 +380,7 @@ const k = O(!1), S = O("tree"), I = c(
               )) }, p);
             }) })
           ] }) }),
-          h && /* @__PURE__ */ l("p", { className: "px-2.5 py-1.5 text-xs text-tertiary tabular-nums", children: [
+          h && /* @__PURE__ */ l("p", { className: "px-2.5 py-1.5 text-s text-tertiary tabular-nums", children: [
             a.length,
             " of ",
             r,

package/components/ai-elements/chart.js

@@ -217,7 +217,7 @@ const ee = g.forwardRef(
                     children: /* @__PURE__ */ e(O, { "data-slot": "ai-chart-icon", className: "size-4" })
                   }
                 ),
-                /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-xs font-normal text-foreground", children: i }),
+                /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-m font-normal text-foreground", children: i }),
                 o != null && /* @__PURE__ */ e(
                   Q,
                   {
@@ -231,7 +231,7 @@ const ee = g.forwardRef(
                   "span",
                   {
                     "data-slot": "ai-chart-meta",
-                    className: "ml-auto shrink-0 text-xs tabular-nums",
+                    className: "ml-auto shrink-0 text-s tabular-nums",
                     children: m
                   }
                 ),
@@ -279,7 +279,7 @@ const ee = g.forwardRef(
                       "button",
                       {
                         type: "button",
-                        className: "rounded-sm text-left outline-none transition-colors duration-150 ease-out hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+                        className: "rounded-sm text-left text-s outline-none transition-colors duration-150 ease-out hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
                         "aria-label": `Open source ${s}`,
                         onClick: () => h(s),
                         children: [

package/components/ai-elements/inline-citation.js

@@ -223,7 +223,7 @@ const G = ({
     "div",
     {
       className: c(
-        "flex flex-1 items-center justify-end px-3 py-1 text-xs text-tertiary tabular-nums",
+        "flex flex-1 items-center justify-end px-3 py-1 text-s text-tertiary tabular-nums",
         t
       ),
       ...s,
@@ -278,7 +278,7 @@ const G = ({
   ...a
 }) => /* @__PURE__ */ k("div", { className: c("space-y-1", n), ...a, children: [
   e && /* @__PURE__ */ i("p", { className: "truncate font-normal text-base leading-tight text-primary", children: e }),
-  t && /* @__PURE__ */ i("p", { className: "truncate break-all text-xs text-tertiary", children: t }),
+  t && /* @__PURE__ */ i("p", { className: "truncate break-all text-s text-tertiary", children: t }),
   s && /* @__PURE__ */ i("p", { className: "line-clamp-3 text-base leading-relaxed text-secondary", children: s }),
   r
 ] }), ee = ({

package/components/ai-elements/message.js

@@ -253,7 +253,7 @@ const H = o.forwardRef(({ className: e, ...t }, a) => {
     {
       ref: a,
       className: i(
-        "px-1.5 text-xs tabular-nums text-tertiary select-none",
+        "px-1.5 text-s tabular-nums text-tertiary select-none",
         e
       ),
       ...t,

package/components/ai-elements/research-activity.js

@@ -53,10 +53,10 @@ function $({
       m === 1 ? "source" : "sources"
     ] }),
     /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-tertiary", children: "·" }),
-    /* @__PURE__ */ e("span", { className: "text-xs text-tertiary tabular-nums", children: t }),
+    /* @__PURE__ */ e("span", { className: "text-s text-tertiary tabular-nums", children: t }),
     n != null && /* @__PURE__ */ r(q, { children: [
       /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-tertiary", children: "·" }),
-      /* @__PURE__ */ r("span", { className: "text-xs text-tertiary", children: [
+      /* @__PURE__ */ r("span", { className: "text-s text-tertiary", children: [
         "first insight",
         " ",
         /* @__PURE__ */ e("span", { className: "tabular-nums", children: n })
@@ -169,7 +169,7 @@ const oe = s.forwardRef(
                   O
                 ) }) }) }),
                 l && /* @__PURE__ */ r("span", { className: o(
-                  "shrink-0 text-xs text-tertiary tabular-nums",
+                  "shrink-0 text-s text-tertiary tabular-nums",
                   // Reserve the caret slot (size-4 + gap-2) so trailing metadata
                   // keeps the same right edge as sibling rows that show a caret.
                   !x && "pe-6"
@@ -205,7 +205,7 @@ const oe = s.forwardRef(
                 /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "flex size-4 shrink-0 items-center justify-center", children: v ?? R }),
                 /* @__PURE__ */ e(K, { as: "span", className: "text-base", children: "Researching…" }),
                 /* @__PURE__ */ r("span", { className: o(
-                  "ml-auto shrink-0 text-xs text-tertiary tabular-nums",
+                  "ml-auto shrink-0 text-s text-tertiary tabular-nums",
                   !x && "pe-6"
                 ), children: [
                   /* @__PURE__ */ e("span", { className: "sr-only", children: "Elapsed " }),