@actioneer/ads 0.3.1 → 0.5.0

package/lib/icons.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
 import { HugeiconsIcon as s } from "@hugeicons/react";
-import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload01Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y, RefreshIcon as F, CancelCircleIcon as R, Attachment01Icon as b, SparklesIcon as x, Clock01Icon as H, QuoteDownIcon as v, BrainIcon as G, Loading03Icon as V, AtIcon as z, BoltIcon as E, Table01Icon as W, File01Icon as N, Download01Icon as Q, Image01Icon as j, BracesIcon as q, MusicNote01Icon as J, Video01Icon as K, ImageNotFound01Icon as X, Activity01Icon as Y, AiChat02Icon as Z, ArrowDown02Icon as _, ArrowRight02Icon as $, ArrowUp02Icon as oo, Route01Icon as no, BlocksIcon as co, BookOpen01Icon as eo, Calendar01Icon as to, Call02Icon as ro, CheckListIcon as so, CircleDashedIcon as ao, CodeIcon as io, ComponentIcon as Io, LinkSquare02Icon as lo, Folder01Icon as ho, FolderOpenIcon as Co, DashboardSpeed01Icon as go, GitBranchIcon as po, HashtagIcon as fo, HistoryIcon as uo, Home01Icon as ko, ImageUploadIcon as wo, GridViewIcon as Ao, Leaf01Icon as Lo, Idea01Icon as mo, Link01Icon as So, Logout01Icon as Mo, Mail01Icon as Oo, Mic01Icon as Po, MicOff01Icon as To, MoreVerticalIcon as Uo, PaintBoardIcon as Bo, SidebarLeftIcon as Do, PencilEdit02Icon as yo, PhoneOff01Icon as Fo, PieChartIcon as Ro, PlugSocketIcon as bo, RocketIcon as xo, Settings01Icon as Ho, ShapesIcon as vo, Share01Icon as Go, StarIcon as Vo, StopIcon as zo, Target01Icon as Eo, Telescope01Icon as Wo, TextFontIcon as No, ToggleOnIcon as Qo, Delete02Icon as jo, UserIcon as qo, UserGroupIcon as Jo, Wrench01Icon as Ko, ArrowUpRight01Icon as Xo } from "@hugeicons/core-free-icons";
+import { Tick02Icon as a, Copy01Icon as i, File02Icon as I, Cancel01Icon as l, Upload01Icon as h, ViewOffIcon as C, ViewIcon as g, MinusSignIcon as p, PlusSignIcon as f, ArrowDown01Icon as d, Search01Icon as u, InformationCircleIcon as k, AlertCircleIcon as w, Alert02Icon as A, CheckmarkCircle02Icon as L, ArrowLeft01Icon as m, ArrowRight01Icon as S, DatabaseIcon as M, Maximize01Icon as O, Magnet01Icon as P, ArrowUp01Icon as T, ArrowUpDownIcon as U, InboxIcon as B, ArrowLeft02Icon as D, MoreHorizontalIcon as y, SparklesIcon as F, Wrench01Icon as R, CancelCircleIcon as b, Clock01Icon as x, CircleDashedIcon as H, RefreshIcon as v, Attachment01Icon as G, QuoteDownIcon as V, BrainIcon as z, Loading03Icon as E, AtIcon as W, BoltIcon as N, Table01Icon as Q, File01Icon as j, Download01Icon as q, Image01Icon as J, BracesIcon as K, MusicNote01Icon as X, Video01Icon as Y, ImageNotFound01Icon as Z, Activity01Icon as _, AiChat02Icon as $, ArrowDown02Icon as oo, ArrowRight02Icon as no, ArrowUp02Icon as co, Route01Icon as eo, BlocksIcon as to, BookOpen01Icon as ro, Calendar01Icon as so, Call02Icon as ao, CheckListIcon as io, CodeIcon as Io, ComponentIcon as lo, LinkSquare02Icon as ho, Folder01Icon as Co, FolderOpenIcon as go, DashboardSpeed01Icon as po, GitBranchIcon as fo, HashtagIcon as uo, HistoryIcon as ko, Home01Icon as wo, ImageUploadIcon as Ao, GridViewIcon as Lo, Leaf01Icon as mo, Idea01Icon as So, Link01Icon as Mo, Logout01Icon as Oo, Mail01Icon as Po, Mic01Icon as To, MicOff01Icon as Uo, MoreVerticalIcon as Bo, PaintBoardIcon as Do, SidebarLeftIcon as yo, PencilEdit02Icon as Fo, PhoneOff01Icon as Ro, PieChartIcon as bo, PlugSocketIcon as xo, RocketIcon as Ho, Settings01Icon as vo, ShapesIcon as Go, Share01Icon as Vo, StarIcon as zo, StopIcon as Eo, Target01Icon as Wo, Telescope01Icon as No, TextFontIcon as Qo, ToggleOnIcon as jo, Delete02Icon as qo, UserIcon as Jo, UserGroupIcon as Ko, ArrowUpRight01Icon as Xo } from "@hugeicons/core-free-icons";
 function o(c, e) {
   function n(t) {
     return /* @__PURE__ */ r(s, { icon: c, size: "1em", ...t });
   }
   return n.displayName = e, n;
 }
-const $o = o(_, "ArrowDown"), on = o(D, "ArrowLeft"), nn = o($, "ArrowRight"), cn = o(oo, "ArrowUp"), en = o(Xo, "ArrowUpRight"), tn = o(d, "ChevronDown"), rn = o(m, "ChevronLeft"), sn = o(S, "ChevronRight"), an = o(T, "ChevronUp"), In = o(U, "SortIcon"), ln = o(lo, "ExternalLink"), hn = o(Do, "PanelLeft"), Cn = o(z, "At"), gn = o(ro, "Call"), pn = o(l, "Close"), fn = o(R, "CloseCircle"), dn = o(i, "Copy"), un = o(Q, "Download"), kn = o(Mo, "LogOut"), wn = o(Po, "Mic"), An = o(To, "MicOff"), Ln = o(Fo, "PhoneOff"), mn = o(yo, "Pencil"), Sn = o(v, "Quote"), Mn = o(g, "Eye"), On = o(C, "EyeOff"), Pn = o(fo, "Hash"), Tn = o(wo, "ImageUpload"), Un = o(h, "Upload"), Bn = o(No, "TextFont"), Dn = o(Qo, "ToggleOn"), yn = o(to, "Calendar"), Fn = o(H, "Clock"), Rn = o(io, "Code"), bn = o(zo, "Stop"), xn = o(P, "Magnet"), Hn = o(O, "Maximize"), vn = o(p, "Minus"), Gn = o(y, "MoreHorizontal"), Vn = o(Uo, "MoreVertical"), zn = o(So, "Link"), En = o(f, "Plus"), Wn = o(F, "Refresh"), Nn = o(no, "AuditTrail"), Qn = o(u, "Search"), jn = o(Go, "Share"), qn = o(jo, "Trash"), Jn = o(a, "Check"), Kn = o(V, "Loader"), Xn = o(L, "CheckCircle"), Yn = o(k, "Info"), Zn = o(A, "Warning"), _n = o(w, "WarningCircle"), $n = o(Y, "Activity"), oc = o(Z, "AgentChat"), nc = o(E, "Bolt"), cc = o(eo, "BookOpen"), ec = o(G, "Brain"), tc = o(so, "CheckList"), rc = o(Io, "Component"), sc = o(M, "Database"), ac = o(W, "Table"), ic = o(N, "File"), Ic = o(I, "FileText"), lc = o(ho, "Folder"), hc = o(j, "Image"), Cc = o(X, "ImageOff"), gc = o(J, "Music"), pc = o(K, "Video"), fc = o(q, "Braces"), dc = o(Co, "FolderOpen"), uc = o(go, "Gauge"), kc = o(po, "GitBranch"), wc = o(uo, "HistoryClock"), Ac = o(ko, "Home"), Lc = o(co, "Blocks"), mc = o(B, "Inbox"), Sc = o(mo, "Lightbulb"), Mc = o(Lo, "Leaf"), Oc = o(Ao, "LayoutGrid"), Pc = o(Oo, "Mail"), Tc = o(Bo, "Palette"), Uc = o(Ro, "PieChart"), Bc = o(bo, "Plug"), Dc = o(xo, "Rocket"), yc = o(Ho, "Settings"), Fc = o(vo, "Shapes"), Rc = o(x, "Sparkles"), bc = o(Vo, "Star"), xc = o(Wo, "Telescope"), Hc = o(Eo, "Target"), vc = o(qo, "User"), Gc = o(Jo, "Users"), Vc = o(b, "Paperclip"), zc = o(ao, "CircleDashed"), Ec = o(Ko, "Wrench");
+const $o = o(oo, "ArrowDown"), on = o(D, "ArrowLeft"), nn = o(no, "ArrowRight"), cn = o(co, "ArrowUp"), en = o(Xo, "ArrowUpRight"), tn = o(d, "ChevronDown"), rn = o(m, "ChevronLeft"), sn = o(S, "ChevronRight"), an = o(T, "ChevronUp"), In = o(U, "SortIcon"), ln = o(ho, "ExternalLink"), hn = o(yo, "PanelLeft"), Cn = o(W, "At"), gn = o(ao, "Call"), pn = o(l, "Close"), fn = o(b, "CloseCircle"), dn = o(i, "Copy"), un = o(q, "Download"), kn = o(Oo, "LogOut"), wn = o(To, "Mic"), An = o(Uo, "MicOff"), Ln = o(Ro, "PhoneOff"), mn = o(Fo, "Pencil"), Sn = o(V, "Quote"), Mn = o(g, "Eye"), On = o(C, "EyeOff"), Pn = o(uo, "Hash"), Tn = o(Ao, "ImageUpload"), Un = o(h, "Upload"), Bn = o(Qo, "TextFont"), Dn = o(jo, "ToggleOn"), yn = o(so, "Calendar"), Fn = o(x, "Clock"), Rn = o(Io, "Code"), bn = o(Eo, "Stop"), xn = o(P, "Magnet"), Hn = o(O, "Maximize"), vn = o(p, "Minus"), Gn = o(y, "MoreHorizontal"), Vn = o(Bo, "MoreVertical"), zn = o(Mo, "Link"), En = o(f, "Plus"), Wn = o(v, "Refresh"), Nn = o(eo, "AuditTrail"), Qn = o(u, "Search"), jn = o(Vo, "Share"), qn = o(qo, "Trash"), Jn = o(a, "Check"), Kn = o(E, "Loader"), Xn = o(L, "CheckCircle"), Yn = o(k, "Info"), Zn = o(A, "Warning"), _n = o(w, "WarningCircle"), $n = o(_, "Activity"), oc = o($, "AgentChat"), nc = o(N, "Bolt"), cc = o(ro, "BookOpen"), ec = o(z, "Brain"), tc = o(io, "CheckList"), rc = o(lo, "Component"), sc = o(M, "Database"), ac = o(Q, "Table"), ic = o(j, "File"), Ic = o(I, "FileText"), lc = o(Co, "Folder"), hc = o(J, "Image"), Cc = o(Z, "ImageOff"), gc = o(X, "Music"), pc = o(Y, "Video"), fc = o(K, "Braces"), dc = o(go, "FolderOpen"), uc = o(po, "Gauge"), kc = o(fo, "GitBranch"), wc = o(ko, "HistoryClock"), Ac = o(wo, "Home"), Lc = o(to, "Blocks"), mc = o(B, "Inbox"), Sc = o(So, "Lightbulb"), Mc = o(mo, "Leaf"), Oc = o(Lo, "LayoutGrid"), Pc = o(Po, "Mail"), Tc = o(Do, "Palette"), Uc = o(bo, "PieChart"), Bc = o(xo, "Plug"), Dc = o(Ho, "Rocket"), yc = o(vo, "Settings"), Fc = o(Go, "Shapes"), Rc = o(F, "Sparkles"), bc = o(zo, "Star"), xc = o(No, "Telescope"), Hc = o(Wo, "Target"), vc = o(Jo, "User"), Gc = o(Ko, "Users"), Vc = o(G, "Paperclip"), zc = o(H, "CircleDashed"), Ec = o(R, "Wrench");
 export {
   $n as Activity,
   oc as AgentChat,

package/llms.txt

@@ -27,9 +27,9 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `muted-foreground`
 - `card`
 - `card-foreground`
-- `brand` — Brand (black) — used for solid fills, not body text
-- `brand-foreground` — Brand (black) — used for solid fills, not body text
-- `brand-hover` — Brand (black) — used for solid fills, not body text
+- `brand` — Brand (Sage green) — used for solid fills / primary actions, not body text
+- `brand-foreground` — Brand (Sage green) — used for solid fills / primary actions, not body text
+- `brand-hover` — Brand (Sage green) — used for solid fills / primary actions, not body text
 - `fill` — Quiet fill — secondary buttons, avatars, chips
 - `fill-foreground` — Quiet fill — secondary buttons, avatars, chips
 - `accent`
@@ -252,7 +252,7 @@ When tabs and a search field control the same content, they share one responsive
 ### Overlays
 
 - [CommandPalette] — component [docs](https://ads.actioneer.dev/#/command-palette)
-- [Drawer] — Use the portaled Drawer for a focused, blocking task (form, details, settings) that slides in over the page with a backdrop and focus trap; use InlineDrawer instead for a contextual panel that must stay in-flow beside content the user still needs. (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
+- [Drawer] — Use the portaled Drawer for a focused, blocking task (form, details, settings) that slides in over the page with a backdrop and focus trap; use InlineDrawer instead for a contextual panel that must stay in-flow beside content the user still needs. The inline Drawer is a flat white panel (bg-card, no shadow, no border) that reads ONLY by fill contrast, so it MUST sit as a sibling of its content inside a bg-surface flex row — on a white (bg-background) parent it is invisible. If it doesn't read, tint the ground; never add a border or shadow to force it. (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
 - [DrawerBody] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
 - [DrawerFooter] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
 - [DrawerHeader] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
@@ -476,6 +476,10 @@ When tabs and a search field control the same content, they share one responsive
 - [BrandMark] — component [docs](https://ads.actioneer.dev/#/brand-loader)
 - [BrandTexture] — Place the ambient halftone wash behind a welcome or hero surface inside a relative container; set lifted when real content takes over so the field dissolves upward, and paused a beat later to stop the shader clock. [docs](https://ads.actioneer.dev/#/brand-texture)
 - [BrandTextureField] — component [docs](https://ads.actioneer.dev/#/brand-texture)
+- [EmptyConnections] — component [docs](https://ads.actioneer.dev/#/empty-state)
+- [EmptyDocuments] — component [docs](https://ads.actioneer.dev/#/empty-state)
+- [EmptyInsights] — component [docs](https://ads.actioneer.dev/#/empty-state)
+- [EmptySearch] — component [docs](https://ads.actioneer.dev/#/empty-state)
 - [EmptyState] — Use as the centered placeholder inside a list, table, or panel that currently has nothing to show. [docs](https://ads.actioneer.dev/#/empty-state)
 - [PixelBlastSVG] — component [docs](https://ads.actioneer.dev/#/pixel-blast-svg)
 - [Progress] — Use for a determinate or indeterminate bar showing task completion, driven by a value/max (default 100). [docs](https://ads.actioneer.dev/#/progress)
@@ -546,6 +550,7 @@ When tabs and a search field control the same content, they share one responsive
 
 ### AI Elements
 
+- [AgentTrace] — component [docs](https://ads.actioneer.dev/#/agent-trace)
 - [AIChart] — Wrap a source-backed chart produced during agent work so its query, partial-data, rendering, ready, error, and cancelled states stay distinct from the chart specification itself. (variants: status: pending|querying|partial|rendering|ready|error|cancelled) [docs](https://ads.actioneer.dev/#/ai/chart)
 - [ChainOfThought] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
 - [ChainOfThoughtContent] — component [docs](https://ads.actioneer.dev/#/ai/chain-of-thought)
@@ -624,6 +629,10 @@ When tabs and a search field control the same content, they share one responsive
 - [VoiceDisconnectButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
 - [VoiceMuteButton] — component [docs](https://ads.actioneer.dev/#/ai/voice)
 - [VoiceStatusDot] — component [docs](https://ads.actioneer.dev/#/ai/voice)
+- [AgentTraceCall] — TypeScript type
+- [AgentTraceProps] — TypeScript type
+- [AgentTraceStep] — TypeScript type
+- [AgentTraceStepStatus] — TypeScript type
 - [AIChartProgress] — TypeScript type
 - [AIChartProps] — TypeScript type
 - [AIChartStatus] — TypeScript type

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -16,9 +16,9 @@
     "Chat"
   ],
   "counts": {
-    "total": 669,
-    "component": 322,
-    "type": 284,
+    "total": 678,
+    "component": 327,
+    "type": 288,
     "hook": 10,
     "util": 53
   },
@@ -148,7 +148,7 @@
         "text-brand",
         "border-brand"
       ],
-      "description": "Brand (black) — used for solid fills, not body text"
+      "description": "Brand (Sage green) — used for solid fills / primary actions, not body text"
     },
     {
       "name": "--color-brand-foreground",
@@ -157,7 +157,7 @@
         "text-brand-foreground",
         "bg-brand-foreground"
       ],
-      "description": "Brand (black) — used for solid fills, not body text"
+      "description": "Brand (Sage green) — used for solid fills / primary actions, not body text"
     },
     {
       "name": "--color-brand-hover",
@@ -167,7 +167,7 @@
         "text-brand-hover",
         "border-brand-hover"
       ],
-      "description": "Brand (black) — used for solid fills, not body text"
+      "description": "Brand (Sage green) — used for solid fills / primary actions, not body text"
     },
     {
       "name": "--color-fill",
@@ -1318,7 +1318,7 @@
       "kind": "component",
       "importPath": "@actioneer/ads",
       "module": "drawer",
-      "description": "Use the portaled Drawer for a focused, blocking task (form, details, settings) that slides in over the page with a backdrop and focus trap; use InlineDrawer instead for a contextual panel that must stay in-flow beside content the user still needs.",
+      "description": "Use the portaled Drawer for a focused, blocking task (form, details, settings) that slides in over the page with a backdrop and focus trap; use InlineDrawer instead for a contextual panel that must stay in-flow beside content the user still needs. The inline Drawer is a flat white panel (bg-card, no shadow, no border) that reads ONLY by fill contrast, so it MUST sit as a sibling of its content inside a bg-surface flex row — on a white (bg-background) parent it is invisible. If it doesn't read, tint the ground; never add a border or shadow to force it.",
       "showcaseUrl": "https://ads.actioneer.dev/#/drawer",
       "variants": {
         "side": {
@@ -3785,6 +3785,38 @@
       "module": "brand-texture",
       "showcaseUrl": "https://ads.actioneer.dev/#/brand-texture"
     },
+    {
+      "name": "EmptyConnections",
+      "family": "Feedback",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "empty-state",
+      "showcaseUrl": "https://ads.actioneer.dev/#/empty-state"
+    },
+    {
+      "name": "EmptyDocuments",
+      "family": "Feedback",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "empty-state",
+      "showcaseUrl": "https://ads.actioneer.dev/#/empty-state"
+    },
+    {
+      "name": "EmptyInsights",
+      "family": "Feedback",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "empty-state",
+      "showcaseUrl": "https://ads.actioneer.dev/#/empty-state"
+    },
+    {
+      "name": "EmptySearch",
+      "family": "Feedback",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "empty-state",
+      "showcaseUrl": "https://ads.actioneer.dev/#/empty-state"
+    },
     {
       "name": "EmptyState",
       "family": "Feedback",
@@ -3795,6 +3827,7 @@
       "showcaseUrl": "https://ads.actioneer.dev/#/empty-state",
       "props": [
         "icon",
+        "illustration",
         "title",
         "description",
         "action"
@@ -4409,6 +4442,23 @@
       "importPath": "@actioneer/ads",
       "module": "selection-action-bar"
     },
+    {
+      "name": "AgentTrace",
+      "family": "AI Elements",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "agent-trace",
+      "showcaseUrl": "https://ads.actioneer.dev/#/agent-trace",
+      "props": [
+        "steps",
+        "mainAgent",
+        "slowSeconds",
+        "reviewedStepIds",
+        "onSendForReview",
+        "slowMessage",
+        "renderCall"
+      ]
+    },
     {
       "name": "AIChart",
       "family": "AI Elements",
@@ -5363,6 +5413,7 @@
         "volume",
         "palette",
         "seed",
+        "fill",
         "onReady"
       ]
     },
@@ -5436,6 +5487,34 @@
         "className"
       ]
     },
+    {
+      "name": "AgentTraceCall",
+      "family": "AI Elements",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "agent-trace"
+    },
+    {
+      "name": "AgentTraceProps",
+      "family": "AI Elements",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "agent-trace"
+    },
+    {
+      "name": "AgentTraceStep",
+      "family": "AI Elements",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "agent-trace"
+    },
+    {
+      "name": "AgentTraceStepStatus",
+      "family": "AI Elements",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "agent-trace"
+    },
     {
       "name": "AIChartProgress",
       "family": "AI Elements",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -29,7 +29,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Brand: BLACK · Typeface: Aribau Grotesk (Regular + Bold)
+ *  Brand: Sage (green) · Neutrals: warm greige · Typeface: Aribau Grotesk
  * ============================================================
  */
 @theme {
@@ -67,25 +67,44 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Ink scale (the black brand ramp) ---- */
-  --color-ink-50: #f6f6f7;
-  --color-ink-100: #ececed;
-  --color-ink-200: #d9d9dc;
-  --color-ink-300: #b8b8bd;
-  --color-ink-400: #8f8f96;
-  --color-ink-500: #6e6e75;
-  --color-ink-600: #55555b;
-  --color-ink-700: #3f3f44;
-  --color-ink-800: #262629;
-  --color-ink-900: #161618;
-  --color-ink-950: #0a0a0b;
+  /* ---- Neutral ramp — warm greige (the workhorse: backgrounds, surfaces,
+     text, borders). Kept a touch warm so it sits with Sage without turning
+     green — one family, not colour plus grey. The `ink` name is retained so
+     every existing reference resolves; the values are now greige. ---- */
+  --color-ink-50: #f2f2ed;
+  --color-ink-100: #e7e7e1;
+  --color-ink-200: #d8d7cf;
+  --color-ink-300: #c7c6be;
+  --color-ink-400: #a8a79e;
+  --color-ink-500: #8c8c84;
+  --color-ink-600: #6b6b63;
+  --color-ink-700: #4a4a44;
+  --color-ink-800: #33322e;
+  --color-ink-900: #26251f;
+  --color-ink-950: #1a1a17;
+
+  /* ---- Brand ramp — Sage (one green hue: brand, primary actions, focal
+     data). 600 is the primary. On a white/greige ground, colour earns its
+     place — the eye always knows where to look. ---- */
+  --color-sage-50: #eff5ea;
+  --color-sage-100: #dde8cf;
+  --color-sage-200: #a9ce86;
+  --color-sage-300: #8abb6a;
+  --color-sage-400: #6da24e;
+  --color-sage-500: #548c41;
+  --color-sage-600: #3f7a34;
+  --color-sage-700: #2c5724;
+  --color-sage-800: #254a1d;
+  --color-sage-900: #1e3a16;
 
   /* ---- Semantic accent ramps ---- */
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
+  /* Success — shifted cooler (emerald/teal) so positive states stay clearly
+     distinct from the warm Sage brand green. */
+  --color-success-50: #ecfdf5;
+  --color-success-100: #d1fae5;
+  --color-success-500: #10b981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
 
   --color-warning-50: #fffaeb;
   --color-warning-100: #fef0c7;
@@ -105,6 +124,19 @@
   --color-info-600: #1570ef;
   --color-info-700: #175cd3;
 
+  /* ---- Data-viz accents ---- three small ramps for charts & illustration.
+     deep = text/lines · base = fills · soft = backgrounds. Separate from the
+     semantic status ramps above; these are the "focal data" companions to Sage. */
+  --color-cyan-soft: #c7efe9;  /* Cyan — vivid cool contrast; 2nd series, links */
+  --color-cyan-base: #12b5a5;
+  --color-cyan-deep: #0a7e82;
+  --color-lime-soft: #e4efcf;  /* Lichen lime — energetic pop from the mark */
+  --color-lime-base: #a3c765;
+  --color-lime-deep: #6e8f30;
+  --color-amber-soft: #fce6c0; /* Amber — warm pop; highlights, "new" */
+  --color-amber-base: #f3a72e;
+  --color-amber-deep: #b57414;
+
   /* ---- Radii ---- */
   --radius-xs: 0.25rem;
   --radius-sm: 0.375rem;
@@ -122,8 +154,8 @@
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
      Delineate surfaces with fill color first; add this to gently lift them. */
   --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
-    0 1px 2px 0 rgb(10 10 11 / 0.05),
-    0 8px 24px -6px rgb(10 10 11 / 0.12);
+    0 1px 2px 0 rgb(10 10 11 / 0.04),
+    0 8px 28px -8px rgb(10 10 11 / 0.09);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -201,12 +233,16 @@
  * every comparison series survives production builds.
  */
 :root {
-  --color-chart-1: var(--color-ink-950);
-  --color-chart-2: var(--color-ink-400);
-  --color-chart-3: var(--color-ink-300);
-  --color-chart-4: var(--color-info-500);
-  --color-chart-5: var(--color-warning-500);
-  --color-chart-6: var(--color-success-500);
+  /* Data-series palette — Sage (brand) leads as the focal/primary series,
+     then the three data-viz accents and two deep variants for extended
+     series. Explicit hexes (not var()) so every series survives @theme
+     pruning, since chart colours are referenced from SVG prop strings. */
+  --color-chart-1: #3f7a34; /* sage — primary / focal series */
+  --color-chart-2: #12b5a5; /* cyan base */
+  --color-chart-3: #f3a72e; /* amber base */
+  --color-chart-4: #a3c765; /* lichen lime base */
+  --color-chart-5: #0a7e82; /* cyan deep */
+  --color-chart-6: #b57414; /* amber deep */
 }
 
 /*
@@ -232,7 +268,7 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
-  /* Brand (black) — used for solid fills, not body text */
+  /* Brand (Sage green) — used for solid fills / primary actions, not body text */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
   --color-brand-hover: var(--brand-hover);
@@ -274,41 +310,41 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  --background: #ffffff;
-  --foreground: #0a0a0b;
+  --background: #f7f7f3;
+  --foreground: #1a1a17;
 
-  /* Text hierarchy — accessible on #ffffff */
-  --text-primary: #0a0a0b;   /* ~20:1  AAA */
-  --text-secondary: #52525b; /* ~7.6:1 AAA */
-  --text-tertiary: #6e6e75;  /* ~5.2:1 AA  */
+  /* Text hierarchy — accessible on the warm greige canvas */
+  --text-primary: #1a1a17;   /* ~17:1  AAA */
+  --text-secondary: #4a4a44; /* ~8.5:1 AAA */
+  --text-tertiary: #6b6b63;  /* ~4.8:1 AA  */
 
-  --surface: #f6f6f7;
-  --surface-foreground: #262629;
+  --surface: #f2f2ed;        /* warm greige — the tinted canvas */
+  --surface-foreground: #33322e;
   --elevated: #ffffff;
 
-  --muted: #f6f6f7;
-  --muted-foreground: #6e6e75;
+  --muted: #e7e7e1;
+  --muted-foreground: #6b6b63;
 
   --card: #ffffff;
-  --card-foreground: #0a0a0b;
+  --card-foreground: #1a1a17;
 
-  /* BLACK brand */
-  --brand: #0a0a0b;
+  /* Sage brand (green) — primary actions, focal moments */
+  --brand: #3f7a34;
   --brand-foreground: #ffffff;
-  --brand-hover: #262629;
+  --brand-hover: #2c5724;
 
   /* Quiet fill */
-  --fill: #ececed;
-  --fill-foreground: #161618;
+  --fill: #e7e7e1;
+  --fill-foreground: #1a1a17;
 
-  --accent: #f6f6f7;
-  --accent-foreground: #161618;
+  --accent: #edece6;
+  --accent-foreground: #1a1a17;
 
-  --border: #ececed;
-  --border-strong: #d9d9dc;
-  --input: #d9d9dc;
-  --ring: rgb(10 10 11 / 0.35);
-  --overlay: rgb(10 10 11 / 0.5);
+  --border: #e7e7e1;
+  --border-strong: #c7c6be;
+  --input: #c7c6be;
+  --ring: rgb(63 122 52 / 0.5);
+  --overlay: rgb(26 26 23 / 0.5);
 }
 /* ---- Base, keyframes & component helpers ---- */
 /* Hide scrollbars app-wide but keep scrollability. The demo UI is filled
@@ -775,7 +811,7 @@
   position: absolute;
   inset-block: 0;
   left: 0;
-  border-left: 1px solid var(--border);
+  border-left: 1px solid var(--border-strong);
 }
 .ads-tree-rail:first-child::before,
 .ads-tree-branch:first-child::before {
@@ -794,8 +830,8 @@
   top: 0;
   height: var(--tree-elbow, 1.125rem);
   width: 1rem;
-  border-bottom: 1px solid var(--border);
-  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-strong);
+  border-left: 1px solid var(--border-strong);
   border-bottom-left-radius: 9px;
 }
 /* Let the consumer's Tailwind discover the classes ADS components use. */