@actioneer/ads 1.0.7 → 1.0.9

package/lib/icons.js

@@ -1,123 +1,176 @@
 "use client";
-import { jsx as h } from "react/jsx-runtime";
-import * as C from "react";
-import { Code as g, Check as p, Copy as u, FileText as $, X as d, UploadSimple as S, EyeSlash as k, Eye as P, MagnifyingGlass as f, Minus as w, Plus as T, CaretDown as A, Info as L, WarningCircle as m, Warning as y, CheckCircle as B, CaretRight as U, CaretUp as x, ArrowsDownUp as I, ChatCircle as M, ArrowUpRight as D, Clock as O, Database as F, ArrowSquareOut as b, Table as R, CaretLeft as v, CornersOut as H, Magnet as G, Tray as W, ArrowLeft as E, DotsThree as z, User as V, XCircle as N, CircleDashed as Q, ArrowsClockwise as q, Paperclip as X, Quotes as j, At as J, Lightning as K, Sparkle as Y, File as Z, DownloadSimple as _, Image as n, BracketsCurly as ee, MusicNotes as oe, VideoCamera as te, ImageBroken as ne, Pulse as se, Archive as ae, ArrowDown as re, ArrowRight as ce, ArrowUp as le, Scroll as ie, Bell as he, Stack as Ce, BookOpen as ge, Brain as pe, CalendarBlank as ue, Phone as $e, ListChecks as de, Cube as Se, DotsNine as ke, FunnelSimple as Pe, Folder as fe, FolderOpen as we, Gauge as Te, GitBranch as Ae, Hash as Le, ClockCounterClockwise as me, House as ye, SquaresFour as Be, Leaf as Ue, Lightbulb as xe, Link as Ie, CircleNotch as Me, SignOut as De, Envelope as Oe, Microphone as Fe, MicrophoneSlash as be, DotsThreeVertical as Re, Palette as ve, SidebarSimple as He, Pause as Ge, PencilSimple as We, PhoneIncoming as Ee, PhoneSlash as ze, ChartPie as Ve, Play as Ne, Plug as Qe, Presentation as qe, Rocket as Xe, Gear as je, Shapes as Je, ShareNetwork as Ke, Star as Ye, Stop as Ze, ArrowsLeftRight as _e, Target as eo, Binoculars as oo, TextB as to, TextT as no, TextItalic as so, TextStrikethrough as ao, TextUnderline as ro, ToggleRight as co, Trash as lo, Users as io, Wrench as ho } from "@phosphor-icons/react";
-function e(s, a) {
-  const o = C.forwardRef(function({ strokeWidth: t, weight: r, ...c }, l) {
-    const i = r ?? (t != null && t >= 2 ? "bold" : "regular");
-    return /* @__PURE__ */ h(s, { ref: l, size: "1em", weight: i, ...c });
+import { jsxs as p, Fragment as d, jsx as a } from "react/jsx-runtime";
+import * as r from "react";
+import { Code as $, Check as k, Copy as S, FileText as f, UploadSimple as P, X as T, EyeSlash as w, Eye as L, MagnifyingGlass as A, Minus as m, Plus as x, CaretDown as B, FunnelSimple as I, Info as y, WarningCircle as U, Warning as F, CheckCircle as M, CaretRight as D, CaretUp as O, ArrowsDownUp as b, ChatCircle as R, ArrowUpRight as v, Clock as H, Database as E, ArrowSquareOut as G, Table as W, CaretLeft as z, CornersOut as V, Magnet as N, Tray as j, ArrowLeft as X, DotsThree as Q, User as q, XCircle as _, CircleDashed as J, ArrowsClockwise as K, Paperclip as Y, Quotes as Z, At as ee, Lightning as oe, Sparkle as te, File as ne, DownloadSimple as se, Image as C, BracketsCurly as ae, MusicNotes as re, VideoCamera as ce, ImageBroken as ie, Pulse as le, Archive as he, ArrowDown as Ce, ArrowRight as ge, ArrowUp as ue, Scroll as pe, Bell as de, Stack as $e, BookOpen as ke, Brain as Se, CalendarBlank as fe, Phone as Pe, ListChecks as Te, Cube as we, DotsNine as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
+const $o = r.createContext(!1), ko = /* @__PURE__ */ new Set(["Info"]), So = new Set(
+  [
+    "FunnelSimple",
+    "X",
+    "TextT",
+    "TextItalic",
+    "TextStrikethrough",
+    "TextUnderline",
+    "Code",
+    "Minus",
+    "DotsNine",
+    "Link",
+    "Plus",
+    "Check",
+    "Pulse",
+    "ListChecks",
+    "BracketsCurly"
+  ].map((o) => `${o}Icon`)
+);
+function e(o, c) {
+  const i = r.forwardRef(function({ strokeWidth: l, weight: g, className: t, ...n }, h) {
+    const u = r.useContext($o), s = g ?? (l != null && l >= 2 ? "bold" : "regular");
+    return u && ko.has(c) && s !== "fill" ? /* @__PURE__ */ p(d, { children: [
+      /* @__PURE__ */ a(
+        o,
+        {
+          ref: h,
+          size: "1em",
+          weight: s,
+          className: [t, "ads-icon-rest"].filter(Boolean).join(" "),
+          ...n
+        }
+      ),
+      /* @__PURE__ */ a(
+        o,
+        {
+          size: "1em",
+          weight: So.has(o.displayName ?? "") ? "bold" : "fill",
+          "aria-hidden": !0,
+          className: [t, "ads-icon-hover"].filter(Boolean).join(" "),
+          ...n
+        }
+      )
+    ] }) : /* @__PURE__ */ a(
+      o,
+      {
+        ref: h,
+        size: "1em",
+        weight: s,
+        className: t,
+        ...n
+      }
+    );
   });
-  return o.displayName = a, o;
+  return i.displayName = c, i;
 }
-const uo = e(re, "ArrowDown"), $o = e(E, "ArrowLeft"), So = e(ce, "ArrowRight"), ko = e(le, "ArrowUp"), Po = e(D, "ArrowUpRight"), fo = e(A, "ChevronDown"), wo = e(v, "ChevronLeft"), To = e(U, "ChevronRight"), Ao = e(x, "ChevronUp"), Lo = e(I, "SortIcon"), mo = e(_e, "SwapHorizontal"), yo = e(b, "ExternalLink"), Bo = e(He, "PanelLeft"), Uo = e(J, "At"), xo = e($e, "Call"), Io = e(Ee, "PhoneIncoming"), Mo = e(d, "Close"), Do = e(N, "CloseCircle"), Oo = e(u, "Copy"), Fo = e(_, "Download"), bo = e(De, "LogOut"), Ro = e(Fe, "Mic"), vo = e(be, "MicOff"), Ho = e(ze, "PhoneOff"), Go = e(We, "Pencil"), Wo = e(j, "Quote"), Eo = e(P, "Eye"), zo = e(k, "EyeOff"), Vo = e(Le, "Hash"), No = e(n, "ImageUpload"), Qo = e(S, "Upload"), qo = e(no, "TextFont"), Xo = e(to, "TextBold"), jo = e(so, "TextItalicStyle"), Jo = e(ao, "TextStrike"), Ko = e(ro, "TextUnderlineStyle"), Yo = e(co, "ToggleOn"), Zo = e(ue, "Calendar"), _o = e(O, "Clock"), et = e(g, "Code"), ot = e(Ze, "Stop"), tt = e(G, "Magnet"), nt = e(H, "Maximize"), st = e(w, "Minus"), at = e(z, "MoreHorizontal"), rt = e(Re, "MoreVertical"), ct = e(ke, "DragHandle"), lt = e(Ie, "Link"), it = e(T, "Plus"), ht = e(q, "Refresh"), Ct = e(ie, "AuditTrail"), gt = e(f, "Search"), pt = e(Ke, "Share"), ut = e(lo, "Trash"), $t = e(p, "Check"), dt = e(Me, "Loader"), St = e(B, "CheckCircle"), kt = e(L, "Info"), Pt = e(y, "Warning"), ft = e(he, "Bell"), wt = e(m, "WarningCircle"), Tt = e(se, "Activity"), At = e(M, "AgentChat"), Lt = e(K, "Bolt"), mt = e(ge, "BookOpen"), yt = e(pe, "Brain"), Bt = e(de, "CheckList"), Ut = e(Se, "Component"), xt = e(F, "Database"), It = e(R, "Table"), Mt = e(Pe, "Filter"), Dt = e(ae, "Archive"), Ot = e(Z, "File"), Ft = e($, "FileText"), bt = e(fe, "Folder"), Rt = e(n, "Image"), vt = e(ne, "ImageOff"), Ht = e(oe, "Music"), Gt = e(te, "Video"), Wt = e(ee, "Braces"), Et = e(we, "FolderOpen"), zt = e(Te, "Gauge"), Vt = e(Ae, "GitBranch"), Nt = e(me, "HistoryClock"), Qt = e(ye, "Home"), qt = e(Ce, "Blocks"), Xt = e(W, "Inbox"), jt = e(xe, "Lightbulb"), Jt = e(Ue, "Leaf"), Kt = e(Be, "LayoutGrid"), Yt = e(Oe, "Mail"), Zt = e(ve, "Palette"), _t = e(Ve, "PieChart"), en = e(Qe, "Plug"), on = e(Xe, "Rocket"), tn = e(je, "Settings"), nn = e(Je, "Shapes"), sn = e(Y, "Sparkles"), an = e(Ye, "Star"), rn = e(oo, "Telescope"), cn = e(eo, "Target"), ln = e(V, "User"), hn = e(io, "Users"), Cn = e(Ne, "Play"), gn = e(qe, "Presentation"), pn = e(Ge, "Pause"), un = e(X, "Paperclip"), $n = e(Q, "CircleDashed"), dn = e(ho, "Wrench");
+const wo = e(Ce, "ArrowDown"), Lo = e(X, "ArrowLeft"), Ao = e(ge, "ArrowRight"), mo = e(ue, "ArrowUp"), xo = e(v, "ArrowUpRight"), Bo = e(B, "ChevronDown"), Io = e(z, "ChevronLeft"), yo = e(D, "ChevronRight"), Uo = e(O, "ChevronUp"), Fo = e(b, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(G, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(ee, "At"), Ro = e(Pe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(T, "Close"), Eo = e(_, "CloseCircle"), Go = e(S, "Copy"), Wo = e(se, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Z, "Quote"), qo = e(L, "Eye"), _o = e(w, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(P, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
+  ho,
+  "TextUnderlineStyle"
+), st = e(Co, "ToggleOn"), at = e(fe, "Calendar"), rt = e(H, "Clock"), ct = e($, "Code"), it = e(to, "Stop"), lt = e(N, "Magnet"), ht = e(V, "Maximize"), Ct = e(m, "Minus"), gt = e(Q, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(Le, "DragHandle"), dt = e(Oe, "Link"), $t = e(x, "Plus"), kt = e(K, "Refresh"), St = e(pe, "AuditTrail"), ft = e(A, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(k, "Check"), Lt = e(be, "Loader"), At = e(M, "CheckCircle"), mt = e(y, "Info"), xt = e(F, "Warning"), Bt = e(de, "Bell"), It = e(U, "WarningCircle"), yt = e(le, "Activity"), Ut = e(R, "AgentChat"), Ft = e(oe, "Bolt"), Mt = e(ke, "BookOpen"), Dt = e(Se, "Brain"), Ot = e(Te, "CheckList"), bt = e(we, "Component"), Rt = e(E, "Database"), vt = e(W, "Table"), Ht = e(I, "Filter"), Et = e(he, "Archive"), Gt = e(ne, "File"), Wt = e(f, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ie, "ImageOff"), jt = e(re, "Music"), Xt = e(ce, "Video"), Qt = e(ae, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e($e, "Blocks"), en = e(j, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(te, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(Y, "Paperclip"), wn = e(J, "CircleDashed"), Ln = e(po, "Wrench");
 export {
-  Tt as Activity,
-  At as AgentChat,
-  Dt as Archive,
-  uo as ArrowDown,
-  $o as ArrowLeft,
-  So as ArrowRight,
-  ko as ArrowUp,
-  Po as ArrowUpRight,
-  Uo as At,
-  Ct as AuditTrail,
-  ft as Bell,
-  qt as Blocks,
-  Lt as Bolt,
-  mt as BookOpen,
-  Wt as Braces,
-  yt as Brain,
-  Zo as Calendar,
-  xo as Call,
-  $t as Check,
-  St as CheckCircle,
-  Bt as CheckList,
-  fo as ChevronDown,
-  wo as ChevronLeft,
-  To as ChevronRight,
-  Ao as ChevronUp,
-  $n as CircleDashed,
-  _o as Clock,
-  Mo as Close,
-  Do as CloseCircle,
-  et as Code,
-  Ut as Component,
-  Oo as Copy,
-  xt as Database,
-  Fo as Download,
-  ct as DragHandle,
-  yo as ExternalLink,
-  Eo as Eye,
-  zo as EyeOff,
-  Ot as File,
-  Ft as FileText,
-  Mt as Filter,
-  bt as Folder,
-  Et as FolderOpen,
-  zt as Gauge,
-  Vt as GitBranch,
-  Vo as Hash,
-  Nt as HistoryClock,
-  Qt as Home,
-  Rt as Image,
-  vt as ImageOff,
-  No as ImageUpload,
-  Xt as Inbox,
-  kt as Info,
-  Kt as LayoutGrid,
-  Jt as Leaf,
-  jt as Lightbulb,
-  lt as Link,
-  dt as Loader,
-  bo as LogOut,
-  tt as Magnet,
-  Yt as Mail,
-  nt as Maximize,
-  Ro as Mic,
-  vo as MicOff,
-  st as Minus,
-  at as MoreHorizontal,
-  rt as MoreVertical,
-  Ht as Music,
-  Zt as Palette,
-  Bo as PanelLeft,
-  un as Paperclip,
-  pn as Pause,
-  Go as Pencil,
-  Io as PhoneIncoming,
-  Ho as PhoneOff,
-  _t as PieChart,
-  Cn as Play,
-  en as Plug,
-  it as Plus,
-  gn as Presentation,
-  Wo as Quote,
-  ht as Refresh,
-  on as Rocket,
-  gt as Search,
-  tn as Settings,
-  nn as Shapes,
-  pt as Share,
-  Lo as SortIcon,
-  sn as Sparkles,
-  an as Star,
-  ot as Stop,
-  mo as SwapHorizontal,
-  It as Table,
-  cn as Target,
-  rn as Telescope,
-  Xo as TextBold,
-  qo as TextFont,
-  jo as TextItalicStyle,
-  Jo as TextStrike,
-  Ko as TextUnderlineStyle,
-  Yo as ToggleOn,
-  ut as Trash,
-  Qo as Upload,
-  ln as User,
-  hn as Users,
-  Gt as Video,
-  Pt as Warning,
-  wt as WarningCircle,
-  dn as Wrench
+  yt as Activity,
+  Ut as AgentChat,
+  Et as Archive,
+  wo as ArrowDown,
+  Lo as ArrowLeft,
+  Ao as ArrowRight,
+  mo as ArrowUp,
+  xo as ArrowUpRight,
+  bo as At,
+  St as AuditTrail,
+  Bt as Bell,
+  Zt as Blocks,
+  Ft as Bolt,
+  Mt as BookOpen,
+  Qt as Braces,
+  Dt as Brain,
+  at as Calendar,
+  Ro as Call,
+  wt as Check,
+  At as CheckCircle,
+  Ot as CheckList,
+  Bo as ChevronDown,
+  Io as ChevronLeft,
+  yo as ChevronRight,
+  Uo as ChevronUp,
+  wn as CircleDashed,
+  rt as Clock,
+  Ho as Close,
+  Eo as CloseCircle,
+  ct as Code,
+  bt as Component,
+  Go as Copy,
+  Rt as Database,
+  Wo as Download,
+  pt as DragHandle,
+  Do as ExternalLink,
+  qo as Eye,
+  _o as EyeOff,
+  Gt as File,
+  Wt as FileText,
+  Ht as Filter,
+  zt as Folder,
+  qt as FolderOpen,
+  _t as Gauge,
+  Jt as GitBranch,
+  Jo as Hash,
+  Kt as HistoryClock,
+  Yt as Home,
+  $o as IconHoverFillContext,
+  Vt as Image,
+  Nt as ImageOff,
+  Ko as ImageUpload,
+  en as Inbox,
+  mt as Info,
+  nn as LayoutGrid,
+  tn as Leaf,
+  on as Lightbulb,
+  dt as Link,
+  Lt as Loader,
+  zo as LogOut,
+  lt as Magnet,
+  sn as Mail,
+  ht as Maximize,
+  Vo as Mic,
+  No as MicOff,
+  Ct as Minus,
+  gt as MoreHorizontal,
+  ut as MoreVertical,
+  jt as Music,
+  an as Palette,
+  Oo as PanelLeft,
+  Tn as Paperclip,
+  Pn as Pause,
+  Xo as Pencil,
+  vo as PhoneIncoming,
+  jo as PhoneOff,
+  rn as PieChart,
+  Sn as Play,
+  cn as Plug,
+  $t as Plus,
+  fn as Presentation,
+  Qo as Quote,
+  kt as Refresh,
+  ln as Rocket,
+  ft as Search,
+  hn as Settings,
+  Cn as Shapes,
+  Pt as Share,
+  Fo as SortIcon,
+  gn as Sparkles,
+  un as Star,
+  it as Stop,
+  Mo as SwapHorizontal,
+  vt as Table,
+  dn as Target,
+  pn as Telescope,
+  et as TextBold,
+  Zo as TextFont,
+  ot as TextItalicStyle,
+  tt as TextStrike,
+  nt as TextUnderlineStyle,
+  st as ToggleOn,
+  Tt as Trash,
+  Yo as Upload,
+  $n as User,
+  kn as Users,
+  Xt as Video,
+  xt as Warning,
+  It as WarningCircle,
+  Ln as Wrench
 };

package/llms.txt

@@ -70,8 +70,8 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `menu-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
 - `toast-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
 - `tree-stroke` — The neutral stroke ladder: every 1px UI border stays within WG3 to WG5.
-- `ring` — Focus ring and scrim, both translucent warm ink.
-- `overlay` — Focus ring and scrim, both translucent warm ink.
+- `ring` — Focus ring and scrim, both translucent neutral ink.
+- `overlay` — Focus ring and scrim, both translucent neutral ink.
 
 ## Design principles
 
@@ -89,17 +89,16 @@ Delineate SURFACES (cards, panels, sidebars, page regions) with color contrast,
 - Don't: Alternate persistent neutral fills inside one panel (for example white Panel → grey item → white child); flatten the item or promote the recess to the container.
 - Don't: Give a filled control no stroke on the tinted canvas — it disappears; it needs a crisp edge.
 
-### 2. Shadow only by request [judgment]
+### 2. Five shadows, floating layers only [judgment]
 
-Every surface defaults to shadow-0. Use the numbered elevation ladder only when the user explicitly requests a shadow for the named surface; the legacy shadow-elevation hook remains flat.
+ADS has five shadow tokens: shadow-0 (flat, the default), shadow-float, shadow-overlay, and the two table scroll-hint smudges. Only a layer that floats above the page may carry float or overlay; everything in the page is flat.
 
-- Do: Keep controls, cards, menus, overlays, panels, and other surfaces at shadow-0 unless the user specifically requests elevation.
-- Do: When requested, use shadow-100 for controls, shadow-200 for raised surfaces and pressable cards, shadow-300 for menus, popovers, listboxes, and toasts, and shadow-400 for dialogs and overlay drawers.
-- Do: Reserve shadow-500 and shadow-600 for rare higher stacked layers; the legacy shadow-elevation hook resolves to shadow-0.
-- Don't: Infer permission to use a shadow from actionability, floating placement, or component type.
-- Don't: Use raw shadow values or legacy named shadow utilities.
-- Don't: Put a shadow on a non-interactive surface for decoration.
-- Don't: Use shadow-500 or shadow-600 as a routine default.
+- Do: Keep cards, panels, chips, buttons, tabs, fields, thumbs, and other in-page surfaces at shadow-0; separate them with fill, border, or spacing.
+- Do: Use shadow-float for floating layers that sit over content: toasts, toolbars, the chat composer dock, and any menu or popover that needs lift beyond its border.
+- Do: Use shadow-overlay for modals, dialogs, and overlay drawers, so a dialog always reads above a menu.
+- Don't: Put a shadow on an in-page surface for decoration or to signal that it is clickable.
+- Don't: Use raw shadow values, inset glows, or the removed numbered levels and elevation hook.
+- Don't: Invent a third floating level; stack order comes from float vs overlay.
 
 ### 3. Motion follows the interaction [lint: unbounded-transition, sluggish-easing, zero-scale-entrance, undersized-zoom-entrance, raw-spring-config]
 
@@ -161,7 +160,7 @@ A screen carries ONLY what the user needs to move forward: one title, the inputs
 - Do: Prefer more, smaller steps over dense ones; ask one thing at a time.
 - Do: Derive instead of asking whenever possible (a name from a work email, the company from its domain).
 - Do: Prefer clear text-only buttons; add an icon only when it communicates essential meaning the label cannot carry alone, or for a compact conventional icon-only control.
-- Do: Render multi-step flows full-screen — a single content container that holds the inputs and its own Back/Continue is fine.
+- Do: Open a multi-step create task launched from a collection (New campaign) as a Modal over that list: title-only header, one scrolling form (for New campaign: Campaign name, Caller numbers, Audience), and Cancel + Create together in the footer — the user never loses their place. Add a Stepper only when the task truly has separate steps. Form modals use a fixed height (Modal height="fixed", 640px) so the frame never resizes: the header and footer stay put and ModalBody scrolls. Standalone onboarding flows render full-screen with a single content container holding the inputs and its own Back/Continue.
 - Don't: Add section eyebrows above a title that already names the screen, or helper text that restates the obvious / duplicates a disabled button's meaning.
 - Don't: Add any header description unless the user explicitly requested supporting copy for that page, section, panel, modal, dialog, drawer, or popover.
 - Don't: Decorate a labeled button with a redundant leading or trailing icon.
@@ -177,24 +176,78 @@ ADS targets landscape tablet (1024) → laptop (1440) → wide display (1920+);
 - Don't: Use sm:/md: viewport variants inside src/components, or hardcode a pane width there.
 - Don't: Cap a grid at a hard column count so it stops growing on wide displays.
 
-### 10. Back navigation is leading [judgment]
+### 10. Back navigation is leading; drill-downs use the breadcrumb [judgment]
 
-A page-level Back control sits immediately before the page title in the leading header cluster. It is icon-only with an accessible label and never appears on the right with forward/page actions.
+A record or drill-down page (a campaign inside Voice campaigns, a connector inside Data Integrations) is titled by its Breadcrumbs trail — parent / record at 16px — with no back arrow and no repeated H1; the page's one primary action sits at the right end of the same row. A standalone page-level Back control, when one is needed outside a hierarchy, sits immediately before the title and never on the right.
 
-- Do: Use PageHeader with onBack so the left arrow is anchored directly before the title.
-- Do: Reserve the trailing header area for forward or page-level actions such as Add, Save, or Share.
+- Do: Title a drill-down with Breadcrumbs (16px trail: muted parent links, Medium current item) and put its primary action (e.g. Pause campaign) right-aligned on the same row.
+- Do: Use PageHeader with onBack only for a standalone page that has no parent hierarchy to show.
+- Do: Reserve the trailing header area for forward or page-level actions such as Add, Save, Pause, or Share.
+- Don't: Stack a back arrow and a large H1 above a page whose parent is already known — the breadcrumb says both.
 - Don't: Place Back on the right side of a page header.
 - Don't: Render a redundant visible Back label when the standard left arrow and accessible label are sufficient.
 
 ### 11. Tabs lead; scoped search trails [judgment]
 
-When tabs and a search field control the same content, they share one responsive control row: the tab track hugs its labels at the leading edge and search sits at the trailing edge. Stack only when the container cannot fit both.
+When tabs and a search field control the same content, they share one responsive control row: the tab list leads with its triggers left-aligned at their natural width over a baseline that fades from WG3 to transparent, and search sits at the trailing edge. On collection screens the trailing controls are icon triggers — SearchDisclosure (expands into the field) then Filters — and tab labels are 14px with a quieter count after each label.
 
-- Do: Keep the horizontal TabList content-width, then place the scoped search field opposite it in the same toolbar.
+- Do: Keep tab triggers left-aligned at their natural width, then place the scoped search opposite them in the same toolbar.
+- Do: On collection screens use SearchDisclosure followed by Filters as 32px icon triggers at the trailing edge; keep the page header for the title and one primary action only.
+- Do: Give each status tab its count (All 42 · Active 14 · Paused 4); the count renders Regular in tertiary grey, teal on the active tab.
 - Do: On constrained containers, stack tabs first and search second while preserving their relationship.
 - Don't: Stretch the tab track to fill the space between its labels and the search field.
 - Don't: Put a scoped search field on a separate row above its tabs when both controls fit side by side.
 - Don't: Place search before tabs in the reading or keyboard order.
+- Don't: Put a Search button or a full-width search field in the page header of a collection screen.
+
+### 12. Collection screens fill the panel [judgment]
+
+A collection screen (campaigns, call logs, leads) is one white panel: BodyPageHeader (title + one primary action), the tab/search/filter row, then a Table whose rows fill the panel's height with Pagination pinned to its bottom edge. Rows open details in a shell-level side panel; the list stays visible.
+
+- Do: Size the page so the rows fill the panel to its 24px bottom inset and Pagination sits at the bottom; let only the rows scroll.
+- Do: Show row checkboxes only on hover/focus (and while checked or mixed); keep the header select-all checkbox always visible.
+- Do: When a row's details are open, mark it with TableRow isActive (the soft-teal fade) — no radio and no selection column for that purpose.
+- Do: Put status in a Chip using business language (see status-language) and keep cell values at text-m.
+- Do: Show the customer's workspace logo in the Sidebar brand slot (SidebarWorkspace) when the product runs inside a customer workspace.
+- Don't: Leave an empty band under a short table, or float Pagination mid-panel.
+- Don't: Use single-selection radios to mean 'this row is open'.
+- Don't: Show a checkbox on every resting row of a multi-select table.
+- Don't: Open record details in a modal over the list you are scanning.
+
+### 13. Record detail panels are grouped by question [judgment]
+
+A selection-driven detail panel reads top-down as: kicker (the KIND of record), title, then the record's status Chip and its one-line context directly under the title; then titled sections 32px apart — Performance (stat cards + chart card) and Details (label–value rows with inset dividers); then footer actions (secondary outline + one solid primary).
+
+- Do: Put the status Chip and its context ("Finished Oct 21") in the header, 4px under the title, so status never floats on its own.
+- Do: Group numbers in small outlined stat cards (WG3 edge, radius-l, 12px padding, 8px apart) and the trend in its own chart card.
+- Do: List attributes (owner, started, calling windows) as label–value rows: label secondary left, value primary right, inset WG3 dividers.
+- Do: Separate sections with 32px and keep items inside a section ≤16px apart; give each section a 14px Medium title.
+- Don't: Mix attributes (owner) into the metric grid.
+- Don't: Leave a lone chip or line of metadata between the title and the first section.
+- Don't: Repeat the same fact (finish date) in the header and in Details.
+
+### 14. Stats and charts sit in their own containers, values visible [judgment]
+
+On analytics/record pages every stat and every chart is its own outlined container (1px WG3 border, radius-l, 20px padding, white, flat) on the white panel, 16px apart. Values are printed on the chart by default — never hover-only — and the legend sits at the right end of the chart's title row.
+
+- Do: Stat card: label (14px secondary) → number (32px) with its scope ("of 4,800 calls") 4px apart, then a Progress bar 12px below that fills the card width.
+- Do: Chart card: title (16px Medium) + scope subtitle (12px secondary) on the left, the legend right-aligned on the same row, ~40px from the title block to the plot.
+- Do: Bar charts print each bar's value; stacked bars print each segment that fits plus the stack total. Line charts print every point's value in the series colour (secondary grey for light amber/grey series).
+- Do: Size charts so the cards end on the panel's 24px bottom inset.
+- Don't: Separate stats with vertical hairlines while their bars run into the next stat — proximity breaks.
+- Don't: Hide numbers behind a hover tooltip.
+- Don't: Give a legend its own row under the subtitle when it fits beside the title.
+- Don't: Put the same spacing between a label and its value as between two separate cards.
+
+### 15. Status speaks the business, with one tone per meaning [judgment]
+
+Status labels name the business state, not the machine's activity, and tabs use the same words. Campaign statuses: Active and Scheduled (info blue), Paused (warning amber), Completed (success green), Draft (default grey), Failed (danger red). Teal is reserved for actions and selection, not for a status.
+
+- Do: Say Active, not Dialing; name the tab Active too (All · Draft · Active · Paused · Completed).
+- Do: Use Chip tones consistently for the same status everywhere (table cell, detail header, filters).
+- Do: Use the plain Chip appearance (square dot + 14px text) where a column of filled chips would shout louder than the record names.
+- Don't: Colour a status with the primary teal — it competes with the primary action and the selected-row fade.
+- Don't: Use different words for the same state in the tab, the chip and the filter.
 
 ## UI grammar
 
@@ -204,8 +257,10 @@ Before composing a screen, match its intent to one production below, preserve th
 - `browse-with-detail` — Browse with selection-driven detail: A primary browse Panel and an inline Drawer mounted as shell-level siblings. (intents: browse, records, list detail, inspector, audit log; Storybook: ADS/Components/Navigation/Sidebar)
 - `data-table` — Structured data table: Semantic table anatomy with matching header and body rows. (intents: table, records, comparison, sorting, selection; Storybook: ADS/Components/Data display/Table)
 - `tabbed-results` — Tabbed results with scoped search: Tabs lead and a scoped search trails in one responsive control row. (intents: tabs, filter, search, results, segmented views; Storybook: ADS/Components/Data display/Tabs)
+- `collection-screen` — Collection screen with record detail: BodyPageHeader (title + one primary action), a control row with counted Tabs leading and SearchDisclosure + Filters trailing, a Table whose rows fill the panel with Pagination at its bottom edge, a shell-level Drawer for the open record, and a fixed-height Modal for the create task. (intents: campaigns, call logs, leads, records list, collection, list page, new campaign; Storybook: ADS/Components/Table)
+- `record-analytics` — Record analytics page: A drill-down page titled by its Breadcrumbs (parent / record) with the primary action on the same row, record Tabs, then outlined stat cards and outlined chart cards whose legends sit in their title row and whose values are printed. (intents: analysis, analytics tab, record page, campaign analysis, metrics, dashboard tab; Storybook: ADS/Components/Chart)
 - `modal-task` — Blocking modal task: A focused interruption with one title, body, and decisive footer. (intents: modal, confirmation, short form, blocking task, destructive action; Storybook: ADS/Components/Overlays/Modal)
-- `settings-card` — Settings card: A compact settings surface with grouped SettingRows and one save action. (intents: settings, preferences, configuration, toggles; Storybook: ADS/Recipes/Settings panel)
+- `settings-card` — Settings card: A compact settings surface with grouped SettingRows and one save action. (intents: settings, preferences, configuration, toggles; Storybook: ADS/Components/Under review/SettingList / SettingRow)
 - `research-trace` — Inspectable research trace: ResearchActivity owns the run summary and contains the canonical ChainOfThought tree. (intents: agent trace, research, tool activity, sources, long-running task; Storybook: ADS/Components/AI Elements/Research Activity)
 - `typed-answer` — Typed research answer: A request/answer turn where structured output flows through AnswerRenderer. (intents: answer, research result, citations, follow-up, assistant response; Storybook: ADS/Components/AI Elements/Message)
 - `workflow-canvas` — Workflow canvas: InfiniteCanvas owns pan, zoom, grid, edges, controls, and responsive canvas chrome. (intents: workflow, node graph, canvas, diagram, flow builder; Storybook: ADS/Components/Data display/InfiniteCanvas)
@@ -254,7 +309,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [Field] — Wrap any form control (Input, Select, NumberField, Textarea, etc.) with a label plus optional description or error footer. [docs](https://ads.actioneer.dev/#/field)
 - [FieldDescription] — component [docs](https://ads.actioneer.dev/#/field)
 - [FieldError] — component [docs](https://ads.actioneer.dev/#/field)
-- [FileDropzone] — component (variants: isDragging: true|false; isDisabled: true|false) [docs](https://ads.actioneer.dev/#/review/file-dropzone)
+- [FileDropzone] — component (variants: hasFiles: true|false; isDragging: true|false; isDisabled: true|false) [docs](https://ads.actioneer.dev/#/review/file-dropzone)
 - [Heading] — Use Heading for semantic h1–h4 titles above a page, section, or card, sized by document level via `level` (never a `size` prop). [docs](https://ads.actioneer.dev/#/typography)
 - [Kbd] — Use to display a keyboard shortcut or key name, inline in text or trailing a label in a shortcut list. [docs](https://ads.actioneer.dev/#/kbd)
 - [Label] — component [docs](https://ads.actioneer.dev/#/field)
@@ -269,8 +324,10 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [Stepper] — component (variants: status: complete|current|upcoming|error; size: sm|md) [docs](https://ads.actioneer.dev/#/review/stepper)
 - [Text] — Use Text for any body copy, caption, or inline run of prose instead of a raw p/span tag. [docs](https://ads.actioneer.dev/#/typography)
 - [Tooltip] — Use to label a single hover/focus-triggered element (icon-only buttons, avatars, truncated text) with a short informational hint — not for actions or content that needs to stay open. [docs](https://ads.actioneer.dev/#/tooltip)
+- [AudioWaveformLook] — TypeScript type
 - [AudioWaveformProps] — TypeScript type
 - [ButtonProps] — TypeScript type
+- [ButtonSize] — TypeScript type
 - [CodeBlockProps] — TypeScript type
 - [DividerProps] — TypeScript type
 - [FieldProps] — TypeScript type
@@ -306,6 +363,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [Checkbox] — Use for a standalone boolean toggle or a multi-select list item — including a tri-state "select all" via `indeterminate`. [docs](https://ads.actioneer.dev/#/checkbox)
 - [CheckboxGroup] — component [docs](https://ads.actioneer.dev/#/checkbox)
 - [DateRangePicker] — component [docs](https://ads.actioneer.dev/#/date-range-picker)
+- [Filters] — component [docs](https://ads.actioneer.dev/#/filters)
 - [Input] — Use for any single-line text value, wrapped in `Field` for label/description/error and `startContent`/`endContent` for icons or inline actions. [docs](https://ads.actioneer.dev/#/input)
 - [InputField] — component [docs](https://ads.actioneer.dev/#/input-field)
 - [NumberField] — Use for a bounded numeric quantity (e.g. seats, width, count) that benefits from stepper buttons and min/max clamping, not free-form numeric text entry. [docs](https://ads.actioneer.dev/#/number-field)
@@ -324,6 +382,9 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [DateRangePickerProps] — TypeScript type
 - [DateRangeValue] — TypeScript type
 - [DropdownOptionsProps] — TypeScript type
+- [FilterGroup] — TypeScript type
+- [FilterOption] — TypeScript type
+- [FiltersProps] — TypeScript type
 - [InputFieldProps] — TypeScript type
 - [InputProps] — TypeScript type
 - [NumberFieldProps] — TypeScript type
@@ -354,15 +415,15 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [DropdownSeparator] — component [docs](https://ads.actioneer.dev/#/dropdown)
 - [DropdownTrigger] — component [docs](https://ads.actioneer.dev/#/dropdown)
 - [InlineDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
-- [Modal] — Use for a blocking, focused task or confirmation that must interrupt the page until resolved (portaled, focus-trapped, Escape/backdrop dismissible). (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalBody] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalClose] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalDescription] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
+- [Modal] — Use for a blocking, focused task or confirmation that must interrupt the page until resolved (portaled, focus-trapped, Escape/backdrop dismissible). (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalBody] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalClose] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalDescription] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
 - [ModalDrawer] — component (variants: side: right|left|bottom; size: sm|md|lg|xl) [docs](https://ads.actioneer.dev/#/drawer)
-- [ModalFooter] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalHeader] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalSection] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
-- [ModalTitle] — component (variants: size: sm|md|lg|xl|full; position: center|top) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalFooter] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalHeader] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalSection] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
+- [ModalTitle] — component (variants: size: sm|md|lg|xl|full; position: center|top; height: content|fixed) [docs](https://ads.actioneer.dev/#/modal)
 - [Popover] — Use Popover for a portaled, dismissible panel anchored to a trigger — quick settings, a profile card, or a short inline form — that closes on outside click or Escape. [docs](https://ads.actioneer.dev/#/popover)
 - [PopoverContent] — component [docs](https://ads.actioneer.dev/#/popover)
 - [PopoverTrigger] — component [docs](https://ads.actioneer.dev/#/popover)
@@ -418,7 +479,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [CarouselItem] — component [docs](https://ads.actioneer.dev/#/carousel)
 - [CarouselNext] — component [docs](https://ads.actioneer.dev/#/carousel)
 - [CarouselPrevious] — component [docs](https://ads.actioneer.dev/#/carousel)
-- [Chip] — A compact pill for statuses, tags, or metadata, with an optional leading icon/avatar or a dismiss control. (variants: variant: solid|outline; color: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/chip)
+- [Chip] — A compact pill for statuses, tags, or metadata, with an optional leading icon/avatar or a dismiss control. (variants: variant: solid|outline|plain; color: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/chip)
 - [ClarificationAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
 - [ComboChart] — component [docs](https://ads.actioneer.dev/#/ai/chart)
 - [ComparisonAnswer] — component (variants: tone: default|primary|success|warning|danger|info) [docs](https://ads.actioneer.dev/#/ai/answer)
@@ -510,6 +571,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [ChartAxisDomain] — TypeScript type
 - [ChartColor] — TypeScript type
 - [ChartDatum] — TypeScript type
+- [ChartLegendPlacement] — TypeScript type
 - [ChartTickFormatter] — TypeScript type
 - [ChartTooltipContext] — TypeScript type
 - [ChartTooltipItem] — TypeScript type
@@ -698,6 +760,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [SidebarNav] — component [docs](https://ads.actioneer.dev/#/sidebar)
 - [SidebarSection] — component [docs](https://ads.actioneer.dev/#/sidebar)
 - [SidebarTrigger] — component [docs](https://ads.actioneer.dev/#/sidebar)
+- [SidebarWorkspace] — component [docs](https://ads.actioneer.dev/#/sidebar)
 - [BodyPageHeaderProps] — TypeScript type
 - [BreadcrumbItemProps] — TypeScript type
 - [BreadcrumbsProps] — TypeScript type
@@ -712,6 +775,7 @@ Before using any component below, preserve its built-in motion and apply the mot
 - [SidebarItemProps] — TypeScript type
 - [SidebarProps] — TypeScript type
 - [SidebarSectionProps] — TypeScript type
+- [SidebarWorkspaceProps] — TypeScript type
 - [useSidebar] — React hook
 
 ### Layout