@actioneer/ads-mcp 1.0.7 → 1.0.9

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -16,9 +16,9 @@
     "Chat"
   ],
   "counts": {
-    "total": 742,
-    "component": 323,
-    "type": 311,
+    "total": 751,
+    "component": 325,
+    "type": 318,
     "hook": 10,
     "util": 98
   },
@@ -557,7 +557,7 @@
       "utilities": [
         "ring-ring"
       ],
-      "description": "Focus ring and scrim, both translucent warm ink."
+      "description": "Focus ring and scrim, both translucent neutral ink."
     },
     {
       "name": "--color-overlay",
@@ -567,7 +567,7 @@
         "text-overlay",
         "border-overlay"
       ],
-      "description": "Focus ring and scrim, both translucent warm ink."
+      "description": "Focus ring and scrim, both translucent neutral ink."
     }
   ],
   "exports": [
@@ -776,6 +776,7 @@
         "topLabel",
         "bottomLabel",
         "downloadName",
+        "look",
         "className"
       ]
     },
@@ -819,10 +820,10 @@
           ],
           "default": "md",
           "options": {
-            "xs": "Smallest text size, for dense/compact UI like table rows or toolbars.",
-            "sm": "Compact secondary actions alongside a larger primary control.",
-            "md": "Default size for most standalone actions and forms.",
-            "lg": "Largest text size, for standalone high-emphasis CTAs (e.g. landing/marketing).",
+            "xs": "Deprecated alias — renders identically to md (32px). Use md.",
+            "sm": "Deprecated alias — renders identically to md (32px). Use md.",
+            "md": "The default 32px button for nearly every action, form, toolbar and table row.",
+            "lg": "The 48px button (20px inline padding, 8px radius) for a standalone high-emphasis CTA such as a full-screen step or empty state.",
             "icon": "Default square icon-only button; always pair with aria-label since there's no visible text.",
             "icon-sm": "Compact square icon-only button for toolbars and dense rows.",
             "icon-xs": "Smallest square icon-only button, for the tightest inline contexts."
@@ -830,6 +831,7 @@
         }
       },
       "props": [
+        "size",
         "isLoading",
         "startContent",
         "endContent",
@@ -920,6 +922,12 @@
       "module": "file-dropzone",
       "showcaseUrl": "https://ads.actioneer.dev/#/review/file-dropzone",
       "variants": {
+        "hasFiles": {
+          "values": [
+            "true",
+            "false"
+          ]
+        },
         "isDragging": {
           "values": [
             "true",
@@ -1172,6 +1180,13 @@
         "className"
       ]
     },
+    {
+      "name": "AudioWaveformLook",
+      "family": "Foundations",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "audio-waveform"
+    },
     {
       "name": "AudioWaveformProps",
       "family": "Foundations",
@@ -1186,6 +1201,13 @@
       "importPath": "@actioneer/ads",
       "module": "button"
     },
+    {
+      "name": "ButtonSize",
+      "family": "Foundations",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "button"
+    },
     {
       "name": "CodeBlockProps",
       "family": "Foundations",
@@ -1450,6 +1472,25 @@
         "className"
       ]
     },
+    {
+      "name": "Filters",
+      "family": "Form controls",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "filters",
+      "showcaseUrl": "https://ads.actioneer.dev/#/filters",
+      "props": [
+        "groups",
+        "onChange",
+        "onClearAll",
+        "title",
+        "triggerLabel",
+        "align",
+        "open",
+        "defaultOpen",
+        "onOpenChange"
+      ]
+    },
     {
       "name": "Input",
       "family": "Form controls",
@@ -1711,6 +1752,27 @@
       "importPath": "@actioneer/ads",
       "module": "select"
     },
+    {
+      "name": "FilterGroup",
+      "family": "Form controls",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "filters"
+    },
+    {
+      "name": "FilterOption",
+      "family": "Form controls",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "filters"
+    },
+    {
+      "name": "FiltersProps",
+      "family": "Form controls",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "filters"
+    },
     {
       "name": "InputFieldProps",
       "family": "Form controls",
@@ -2104,6 +2166,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       },
       "props": [
@@ -2146,6 +2215,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       },
       "props": [
@@ -2176,6 +2252,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2203,6 +2286,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2263,6 +2353,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2290,6 +2387,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2317,6 +2421,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2344,6 +2455,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2357,7 +2475,9 @@
       "showcaseUrl": "https://ads.actioneer.dev/#/popover",
       "props": [
         "children",
-        "defaultOpen"
+        "defaultOpen",
+        "open",
+        "onOpenChange"
       ]
     },
     {
@@ -2895,7 +3015,8 @@
         "variant": {
           "values": [
             "solid",
-            "outline"
+            "outline",
+            "plain"
           ],
           "default": "solid",
           "options": {
@@ -3715,7 +3836,8 @@
         "defaultExpanded",
         "onExpandedChange",
         "disclosureLabel",
-        "isInteractive"
+        "isInteractive",
+        "isActive"
       ]
     },
     {
@@ -4168,6 +4290,13 @@
       "importPath": "@actioneer/ads",
       "module": "chart"
     },
+    {
+      "name": "ChartLegendPlacement",
+      "family": "Data display",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "chart"
+    },
     {
       "name": "ChartTickFormatter",
       "family": "Data display",
@@ -5146,7 +5275,7 @@
           ],
           "default": "default",
           "options": {
-            "default": "Neutral heads-up with a warm-grey icon tile and no urgency signaled.",
+            "default": "Neutral heads-up with a neutral icon and no urgency signaled.",
             "success": "Grass green confirms a completed or positive outcome.",
             "warning": "Flags a non-blocking risk or upcoming issue (e.g. scheduled maintenance), amber accent.",
             "danger": "Signals a failure or blocking problem (e.g. connection error) needing attention, red accent.",
@@ -5675,6 +5804,19 @@
       "module": "sidebar",
       "showcaseUrl": "https://ads.actioneer.dev/#/sidebar"
     },
+    {
+      "name": "SidebarWorkspace",
+      "family": "Navigation",
+      "kind": "component",
+      "importPath": "@actioneer/ads",
+      "module": "sidebar",
+      "showcaseUrl": "https://ads.actioneer.dev/#/sidebar",
+      "props": [
+        "name",
+        "logoSrc",
+        "showName"
+      ]
+    },
     {
       "name": "BodyPageHeaderProps",
       "family": "Navigation",
@@ -5773,6 +5915,13 @@
       "importPath": "@actioneer/ads",
       "module": "sidebar"
     },
+    {
+      "name": "SidebarWorkspaceProps",
+      "family": "Navigation",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "sidebar"
+    },
     {
       "name": "useSidebar",
       "family": "Navigation",
@@ -8437,32 +8586,12 @@
         "value": "none"
       },
       {
-        "name": "100",
-        "value": "0 1px 0 0 rgb(32 32 32 / 0.07)"
+        "name": "float",
+        "value": "0 0 0 1px rgb(32 32 32 / 0.04), 0 2px 4px rgb(32 32 32 / 0.04), 0 8px 20px -4px rgb(32 32 32 / 0.10)"
       },
       {
-        "name": "200",
-        "value": "0 3px 1px -1px rgb(32 32 32 / 0.07)"
-      },
-      {
-        "name": "300",
-        "value": "0 4px 6px -2px rgb(32 32 32 / 0.2)"
-      },
-      {
-        "name": "400",
-        "value": "0 8px 16px -4px rgb(32 32 32 / 0.22)"
-      },
-      {
-        "name": "500",
-        "value": "0 12px 20px -8px rgb(32 32 32 / 0.24)"
-      },
-      {
-        "name": "600",
-        "value": "0 20px 20px -8px rgb(32 32 32 / 0.28)"
-      },
-      {
-        "name": "elevation",
-        "value": "none"
+        "name": "overlay",
+        "value": "0 0 0 1px rgb(32 32 32 / 0.04), 0 4px 8px rgb(32 32 32 / 0.04), 0 16px 36px -8px rgb(32 32 32 / 0.14)"
       },
       {
         "name": "table-smudge-left",
@@ -8568,18 +8697,17 @@
     {
       "id": "elevation-is-actionability",
       "number": 2,
-      "title": "Shadow only by request",
-      "rule": "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.",
+      "title": "Five shadows, floating layers only",
+      "rule": "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.",
-        "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.",
-        "Reserve shadow-500 and shadow-600 for rare higher stacked layers; the legacy shadow-elevation hook resolves to shadow-0."
+        "Keep cards, panels, chips, buttons, tabs, fields, thumbs, and other in-page surfaces at shadow-0; separate them with fill, border, or spacing.",
+        "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.",
+        "Use shadow-overlay for modals, dialogs, and overlay drawers, so a dialog always reads above a menu."
       ],
       "dont": [
-        "Infer permission to use a shadow from actionability, floating placement, or component type.",
-        "Use raw shadow values or legacy named shadow utilities.",
-        "Put a shadow on a non-interactive surface for decoration.",
-        "Use shadow-500 or shadow-600 as a routine default."
+        "Put a shadow on an in-page surface for decoration or to signal that it is clickable.",
+        "Use raw shadow values, inset glows, or the removed numbered levels and elevation hook.",
+        "Invent a third floating level; stack order comes from float vs overlay."
       ],
       "enforcedByLint": false
     },
@@ -8692,7 +8820,7 @@
         "Prefer more, smaller steps over dense ones; ask one thing at a time.",
         "Derive instead of asking whenever possible (a name from a work email, the company from its domain).",
         "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.",
-        "Render multi-step flows full-screen — a single content container that holds the inputs and its own Back/Continue is fine."
+        "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."
       ],
       "dont": [
         "Add section eyebrows above a title that already names the screen, or helper text that restates the obvious / duplicates a disabled button's meaning.",
@@ -8721,13 +8849,15 @@
     {
       "id": "leading-back-navigation",
       "number": 10,
-      "title": "Back navigation is leading",
-      "rule": "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.",
+      "title": "Back navigation is leading; drill-downs use the breadcrumb",
+      "rule": "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.",
-        "Reserve the trailing header area for forward or page-level actions such as Add, Save, or Share."
+        "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.",
+        "Use PageHeader with onBack only for a standalone page that has no parent hierarchy to show.",
+        "Reserve the trailing header area for forward or page-level actions such as Add, Save, Pause, or Share."
       ],
       "dont": [
+        "Stack a back arrow and a large H1 above a page whose parent is already known — the breadcrumb says both.",
         "Place Back on the right side of a page header.",
         "Render a redundant visible Back label when the standard left arrow and accessible label are sufficient."
       ],
@@ -8737,15 +8867,91 @@
       "id": "tabs-search-opposed",
       "number": 11,
       "title": "Tabs lead; scoped search trails",
-      "rule": "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.",
+      "rule": "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.",
+        "Keep tab triggers left-aligned at their natural width, then place the scoped search opposite them in the same toolbar.",
+        "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.",
+        "Give each status tab its count (All 42 · Active 14 · Paused 4); the count renders Regular in tertiary grey, teal on the active tab.",
         "On constrained containers, stack tabs first and search second while preserving their relationship."
       ],
       "dont": [
         "Stretch the tab track to fill the space between its labels and the search field.",
         "Put a scoped search field on a separate row above its tabs when both controls fit side by side.",
-        "Place search before tabs in the reading or keyboard order."
+        "Place search before tabs in the reading or keyboard order.",
+        "Put a Search button or a full-width search field in the page header of a collection screen."
+      ],
+      "enforcedByLint": false
+    },
+    {
+      "id": "collection-screens",
+      "number": 12,
+      "title": "Collection screens fill the panel",
+      "rule": "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.",
+        "Show row checkboxes only on hover/focus (and while checked or mixed); keep the header select-all checkbox always visible.",
+        "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.",
+        "Put status in a Chip using business language (see status-language) and keep cell values at text-m.",
+        "Show the customer's workspace logo in the Sidebar brand slot (SidebarWorkspace) when the product runs inside a customer workspace."
+      ],
+      "dont": [
+        "Leave an empty band under a short table, or float Pagination mid-panel.",
+        "Use single-selection radios to mean 'this row is open'.",
+        "Show a checkbox on every resting row of a multi-select table.",
+        "Open record details in a modal over the list you are scanning."
+      ],
+      "enforcedByLint": false
+    },
+    {
+      "id": "record-detail-panels",
+      "number": 13,
+      "title": "Record detail panels are grouped by question",
+      "rule": "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.",
+        "Group numbers in small outlined stat cards (WG3 edge, radius-l, 12px padding, 8px apart) and the trend in its own chart card.",
+        "List attributes (owner, started, calling windows) as label–value rows: label secondary left, value primary right, inset WG3 dividers.",
+        "Separate sections with 32px and keep items inside a section ≤16px apart; give each section a 14px Medium title."
+      ],
+      "dont": [
+        "Mix attributes (owner) into the metric grid.",
+        "Leave a lone chip or line of metadata between the title and the first section.",
+        "Repeat the same fact (finish date) in the header and in Details."
+      ],
+      "enforcedByLint": false
+    },
+    {
+      "id": "analytics-surfaces",
+      "number": 14,
+      "title": "Stats and charts sit in their own containers, values visible",
+      "rule": "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.",
+        "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.",
+        "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).",
+        "Size charts so the cards end on the panel's 24px bottom inset."
+      ],
+      "dont": [
+        "Separate stats with vertical hairlines while their bars run into the next stat — proximity breaks.",
+        "Hide numbers behind a hover tooltip.",
+        "Give a legend its own row under the subtitle when it fits beside the title.",
+        "Put the same spacing between a label and its value as between two separate cards."
+      ],
+      "enforcedByLint": false
+    },
+    {
+      "id": "status-language",
+      "number": 15,
+      "title": "Status speaks the business, with one tone per meaning",
+      "rule": "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).",
+        "Use Chip tones consistently for the same status everywhere (table cell, detail header, filters).",
+        "Use the plain Chip appearance (square dot + 14px text) where a column of filled chips would shout louder than the record names."
+      ],
+      "dont": [
+        "Colour a status with the primary teal — it competes with the primary action and the selected-row fade.",
+        "Use different words for the same state in the tab, the chip and the filter."
       ],
       "enforcedByLint": false
     }
@@ -9003,68 +9209,352 @@
         "story": "ADS/Components/Data display/Tabs"
       },
       {
-        "id": "modal-task",
-        "name": "Blocking modal task",
+        "id": "collection-screen",
+        "name": "Collection screen with record detail",
         "intents": [
-          "modal",
-          "confirmation",
-          "short form",
-          "blocking task",
-          "destructive action"
+          "campaigns",
+          "call logs",
+          "leads",
+          "records list",
+          "collection",
+          "list page",
+          "new campaign"
         ],
-        "description": "A focused interruption with one title, body, and decisive footer.",
+        "description": "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.",
         "roots": [
           {
-            "component": "Modal",
+            "native": "div",
+            "slot": "shell-canvas-row",
             "children": [
               {
-                "component": "ModalHeader",
+                "native": "section",
+                "slot": "collection-panel",
                 "children": [
                   {
-                    "component": "ModalTitle"
+                    "component": "BodyPageHeader",
+                    "children": [
+                      {
+                        "component": "Button",
+                        "slot": "primary-action"
+                      }
+                    ]
                   },
                   {
-                    "component": "ModalDescription",
-                    "optional": true
+                    "native": "div",
+                    "slot": "control-row",
+                    "children": [
+                      {
+                        "component": "Tabs",
+                        "children": [
+                          {
+                            "component": "TabList",
+                            "children": [
+                              {
+                                "component": "Tab",
+                                "repeat": true,
+                                "note": "count={n}"
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "component": "SearchDisclosure",
+                        "slot": "trailing-search"
+                      },
+                      {
+                        "component": "Filters",
+                        "slot": "trailing-filters"
+                      }
+                    ]
+                  },
+                  {
+                    "component": "Table",
+                    "note": "selectionMode=\"multiple\"; footer={<Pagination />}; page size derived from the panel height",
+                    "children": [
+                      {
+                        "component": "TableHeader",
+                        "children": [
+                          {
+                            "component": "TableRow",
+                            "children": [
+                              {
+                                "component": "TableColumn",
+                                "repeat": true
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "component": "TableBody",
+                        "children": [
+                          {
+                            "component": "TableRow",
+                            "repeat": true,
+                            "note": "isActive while its detail is open",
+                            "children": [
+                              {
+                                "component": "TableCell",
+                                "repeat": true
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ]
                   }
                 ]
               },
               {
-                "component": "ModalBody",
-                "optional": true
+                "component": "Drawer",
+                "slot": "selected-record-detail",
+                "optional": true,
+                "children": [
+                  {
+                    "component": "DrawerHeader",
+                    "children": [
+                      {
+                        "component": "DrawerTitle"
+                      },
+                      {
+                        "component": "Chip",
+                        "slot": "status-under-title"
+                      }
+                    ]
+                  },
+                  {
+                    "component": "DrawerBody",
+                    "note": "Performance (stat cards + chart card), then Details (label–value rows)"
+                  },
+                  {
+                    "component": "DrawerFooter"
+                  }
+                ]
               },
               {
-                "component": "ModalFooter",
+                "component": "Modal",
+                "slot": "create-task",
+                "optional": true,
+                "note": "height=\"fixed\"",
                 "children": [
                   {
-                    "component": "Button",
-                    "repeat": true
+                    "component": "ModalHeader",
+                    "children": [
+                      {
+                        "component": "ModalTitle"
+                      }
+                    ]
+                  },
+                  {
+                    "component": "ModalBody",
+                    "children": [
+                      {
+                        "component": "InputField"
+                      },
+                      {
+                        "component": "SegmentedControl"
+                      },
+                      {
+                        "component": "FileDropzone",
+                        "optional": true
+                      }
+                    ]
+                  },
+                  {
+                    "component": "ModalFooter"
                   }
                 ]
               }
             ]
           }
         ],
-        "jsx": "<Modal open={open} onOpenChange={setOpen} aria-label={title}>\n  <ModalHeader><ModalTitle>{title}</ModalTitle></ModalHeader>\n  <ModalBody>{task}</ModalBody>\n  <ModalFooter><Button variant=\"ghost\">Cancel</Button><Button>Continue</Button></ModalFooter>\n</Modal>",
+        "jsx": "<div className=\"flex h-screen gap-3 bg-background p-3\">\n  <section className=\"flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card\">\n    <BodyPageHeader title=\"Voice campaigns\" actions={<Button onClick={openCreate}>New campaign</Button>} />\n    <div className=\"flex items-center justify-between gap-4 px-6\">\n      <Tabs value={tab} onValueChange={setTab}>\n        <TabList>{tabs.map(t => <Tab key={t.value} value={t.value} count={t.count}>{t.label}</Tab>)}</TabList>\n      </Tabs>\n      <div className=\"flex items-center gap-2\">\n        <SearchDisclosure value={query} onValueChange={setQuery} triggerLabel=\"Search campaigns\" />\n        <Filters groups={filters} onChange={setFilter} triggerLabel=\"Filter campaigns\" />\n      </div>\n    </div>\n    <div ref={rowsRef} className=\"min-h-0 flex-1 px-6 pt-4 pb-6\">\n      <Table selectionMode=\"multiple\" footer={<Pagination total={pages} page={page} onChange={setPage} summary={summary} />}>\n        <TableHeader><TableRow>{columns}</TableRow></TableHeader>\n        <TableBody>\n          {rows.map(row => (\n            <TableRow key={row.id} rowKey={row.id} isActive={row.id === openId} onClick={() => open(row.id)} aria-label={`Open ${row.name}`}>{cells(row)}</TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  </section>\n  <Drawer open={Boolean(openId)} onOpenChange={close}>{detail}</Drawer>\n  <Modal open={creating} onOpenChange={setCreating} height=\"fixed\">{createForm}</Modal>\n</div>",
         "constraints": [
-          "Add ModalDescription only when the user explicitly requested supporting header copy.",
-          "Keep one primary footer action; use danger only for an irreversible destructive action.",
-          "Do not wrap or replace the Modal's built-in focus, backdrop, or motion behavior."
+          "Derive the page size from the panel height so rows fill it and Pagination sits on the bottom edge.",
+          "Keep the page header to the title and ONE primary action; search and filters are trailing icon triggers on the tab row.",
+          "Row checkboxes appear on hover/focus only; the header select-all is always visible.",
+          "Mark the row whose detail is open with TableRow isActive — never a radio column.",
+          "Put the status Chip in the Drawer header under the title; group the body into Performance and Details sections 32px apart.",
+          "Status words are business words (Active, Scheduled, Paused, Completed, Draft, Failed) with one tone each; tabs use the same words.",
+          "The create task is a Modal with height=\"fixed\" over the list, never a separate screen."
         ],
         "principles": [
-          "minimal-information",
-          "motion-follows-guide",
-          "ads-first"
+          "collection-screens",
+          "record-detail-panels",
+          "status-language",
+          "tabs-search-opposed",
+          "shell-owns-the-frame",
+          "minimal-information"
         ],
-        "story": "ADS/Components/Overlays/Modal"
+        "story": "ADS/Components/Table"
       },
       {
-        "id": "settings-card",
-        "name": "Settings card",
+        "id": "record-analytics",
+        "name": "Record analytics page",
         "intents": [
-          "settings",
-          "preferences",
-          "configuration",
+          "analysis",
+          "analytics tab",
+          "record page",
+          "campaign analysis",
+          "metrics",
+          "dashboard tab"
+        ],
+        "description": "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.",
+        "roots": [
+          {
+            "native": "main",
+            "children": [
+              {
+                "component": "Breadcrumbs",
+                "children": [
+                  {
+                    "component": "BreadcrumbItem",
+                    "repeat": true
+                  },
+                  {
+                    "component": "Button",
+                    "slot": "actions"
+                  }
+                ]
+              },
+              {
+                "component": "Tabs",
+                "children": [
+                  {
+                    "component": "TabList",
+                    "children": [
+                      {
+                        "component": "Tab",
+                        "repeat": true
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "native": "div",
+                "slot": "stat-cards",
+                "children": [
+                  {
+                    "native": "section",
+                    "repeat": true,
+                    "slot": "stat-card",
+                    "children": [
+                      {
+                        "component": "Progress"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "native": "div",
+                "slot": "chart-cards",
+                "children": [
+                  {
+                    "native": "section",
+                    "slot": "chart-card",
+                    "children": [
+                      {
+                        "component": "BarChart",
+                        "note": "title, subtitle, legendPlacement=\"header\""
+                      }
+                    ]
+                  },
+                  {
+                    "native": "section",
+                    "slot": "chart-card",
+                    "children": [
+                      {
+                        "component": "LineChart",
+                        "note": "title, subtitle, legendPlacement=\"header\""
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "jsx": "<main className=\"flex min-w-0 flex-1 flex-col rounded-l bg-card\">\n  <Breadcrumbs actions={<Button>Pause campaign</Button>}>\n    <BreadcrumbItem href=\"/campaigns\">Voice campaigns</BreadcrumbItem>\n    <BreadcrumbItem isCurrent>{campaign.name}</BreadcrumbItem>\n  </Breadcrumbs>\n  <Tabs value={tab} onValueChange={setTab}><TabList>{tabs}</TabList></Tabs>\n  <div className=\"grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4\">\n    {stats.map(stat => (\n      <section key={stat.label} className=\"rounded-l border border-tertiary p-5\">\n        <p className=\"text-m text-secondary\">{stat.label}</p>\n        <p className=\"mt-1 text-3xl tabular-nums\">{stat.value} <span className=\"text-m text-secondary\">{stat.of}</span></p>\n        <Progress className=\"mt-3\" value={stat.percent} label={stat.label} />\n      </section>\n    ))}\n  </div>\n  <section className=\"rounded-l border border-tertiary p-5\">\n    <BarChart title=\"Who was in the segment\" subtitle={scope} legendPlacement=\"header\" data={data} categoryKey=\"day\" series={series} stacked />\n  </section>\n</main>",
+        "constraints": [
+          "Title a drill-down with Breadcrumbs (16px); no back arrow and no repeated H1.",
+          "Give every stat and every chart its own outlined card (1px WG3, radius-l, 20px padding, flat), 16px apart.",
+          "Keep a stat's label, number and scope 4px apart and its Progress 12px below, filling the card.",
+          "Put chart legends in the title row (legendPlacement=\"header\") and leave showValues on — values are never hover-only."
+        ],
+        "principles": [
+          "analytics-surfaces",
+          "leading-back-navigation",
+          "status-language",
+          "responsive-container-fluid"
+        ],
+        "story": "ADS/Components/Chart"
+      },
+      {
+        "id": "modal-task",
+        "name": "Blocking modal task",
+        "intents": [
+          "modal",
+          "confirmation",
+          "short form",
+          "blocking task",
+          "destructive action"
+        ],
+        "description": "A focused interruption with one title, body, and decisive footer.",
+        "roots": [
+          {
+            "component": "Modal",
+            "children": [
+              {
+                "component": "ModalHeader",
+                "children": [
+                  {
+                    "component": "ModalTitle"
+                  },
+                  {
+                    "component": "ModalDescription",
+                    "optional": true
+                  }
+                ]
+              },
+              {
+                "component": "ModalBody",
+                "optional": true
+              },
+              {
+                "component": "ModalFooter",
+                "children": [
+                  {
+                    "component": "Button",
+                    "repeat": true
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "jsx": "<Modal open={open} onOpenChange={setOpen} aria-label={title}>\n  <ModalHeader><ModalTitle>{title}</ModalTitle></ModalHeader>\n  <ModalBody>{task}</ModalBody>\n  <ModalFooter><Button variant=\"ghost\">Cancel</Button><Button>Continue</Button></ModalFooter>\n</Modal>",
+        "constraints": [
+          "Add ModalDescription only when the user explicitly requested supporting header copy.",
+          "Keep one primary footer action; use danger only for an irreversible destructive action.",
+          "Do not wrap or replace the Modal's built-in focus, backdrop, or motion behavior."
+        ],
+        "principles": [
+          "minimal-information",
+          "motion-follows-guide",
+          "ads-first"
+        ],
+        "story": "ADS/Components/Overlays/Modal"
+      },
+      {
+        "id": "settings-card",
+        "name": "Settings card",
+        "intents": [
+          "settings",
+          "preferences",
+          "configuration",
           "toggles"
         ],
         "description": "A compact settings surface with grouped SettingRows and one save action.",
@@ -9123,7 +9613,7 @@
           "minimal-information",
           "ads-first"
         ],
-        "story": "ADS/Recipes/Settings panel"
+        "story": "ADS/Components/Under review/SettingList / SettingRow"
       },
       {
         "id": "research-trace",
@@ -9527,6 +10017,16 @@
             "id": "horizontal-overflow",
             "description": "Scroll hints and sticky edges respond to hidden content.",
             "required": true
+          },
+          {
+            "id": "hover-revealed-selection",
+            "description": "Multi-select row checkboxes hidden at rest, shown on hover/focus and while checked; header checkbox always visible.",
+            "required": true
+          },
+          {
+            "id": "row-active",
+            "description": "The row whose detail panel is open carries the soft-teal fade via isActive, with no selection control.",
+            "required": true
           }
         ],
         "representativeCombinations": [
@@ -9667,13 +10167,13 @@
       ]
     },
     "counts": {
-      "nodes": 806,
-      "edges": 548,
-      "component": 323,
-      "state": 461,
-      "principle": 11,
-      "production": 9,
-      "layout": 2
+      "nodes": 844,
+      "edges": 625,
+      "component": 325,
+      "state": 482,
+      "principle": 15,
+      "production": 11,
+      "layout": 11
     },
     "nodes": [
       {
@@ -9785,7 +10285,7 @@
         "required": false,
         "derived": true,
         "isDefault": false,
-        "description": "Smallest text size, for dense/compact UI like table rows or toolbars."
+        "description": "Deprecated alias — renders identically to md (32px). Use md."
       },
       {
         "id": "state:Button:size=sm",
@@ -9797,7 +10297,7 @@
         "required": false,
         "derived": true,
         "isDefault": false,
-        "description": "Compact secondary actions alongside a larger primary control."
+        "description": "Deprecated alias — renders identically to md (32px). Use md."
       },
       {
         "id": "state:Button:size=md",
@@ -9809,7 +10309,7 @@
         "required": false,
         "derived": true,
         "isDefault": true,
-        "description": "Default size for most standalone actions and forms."
+        "description": "The default 32px button for nearly every action, form, toolbar and table row."
       },
       {
         "id": "state:Button:size=lg",
@@ -9821,7 +10321,7 @@
         "required": false,
         "derived": true,
         "isDefault": false,
-        "description": "Largest text size, for standalone high-emphasis CTAs (e.g. landing/marketing)."
+        "description": "The 48px button (20px inline padding, 8px radius) for a standalone high-emphasis CTA such as a full-screen step or empty state."
       },
       {
         "id": "state:Button:size=icon",
@@ -9946,6 +10446,30 @@
         "showcaseUrl": "https://ads.actioneer.dev/#/review/file-dropzone",
         "description": ""
       },
+      {
+        "id": "state:FileDropzone:hasFiles=true",
+        "kind": "state",
+        "label": "hasFiles=true",
+        "component": "FileDropzone",
+        "axis": "hasFiles",
+        "value": "true",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
+      {
+        "id": "state:FileDropzone:hasFiles=false",
+        "kind": "state",
+        "label": "hasFiles=false",
+        "component": "FileDropzone",
+        "axis": "hasFiles",
+        "value": "false",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "state:FileDropzone:isDragging=true",
         "kind": "state",
@@ -10360,6 +10884,15 @@
         "showcaseUrl": "https://ads.actioneer.dev/#/date-range-picker",
         "description": ""
       },
+      {
+        "id": "component:Filters",
+        "kind": "component",
+        "label": "Filters",
+        "family": "Form controls",
+        "module": "filters",
+        "showcaseUrl": "https://ads.actioneer.dev/#/filters",
+        "description": ""
+      },
       {
         "id": "component:Input",
         "kind": "component",
@@ -11269,6 +11802,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:Modal:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "Modal",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:Modal:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "Modal",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalBody",
         "kind": "component",
@@ -11362,6 +11919,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalBody:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalBody",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalBody:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalBody",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalClose",
         "kind": "component",
@@ -11455,6 +12036,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalClose:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalClose",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalClose:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalClose",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalDescription",
         "kind": "component",
@@ -11548,6 +12153,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalDescription:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalDescription",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalDescription:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalDescription",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalDrawer",
         "kind": "component",
@@ -11734,6 +12363,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalFooter:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalFooter",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalFooter:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalFooter",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalHeader",
         "kind": "component",
@@ -11827,6 +12480,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalHeader:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalHeader",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalHeader:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalHeader",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:ModalSection",
         "kind": "component",
@@ -11921,14 +12598,38 @@
         "description": ""
       },
       {
-        "id": "component:ModalTitle",
-        "kind": "component",
-        "label": "ModalTitle",
-        "family": "Overlays",
-        "module": "modal",
-        "showcaseUrl": "https://ads.actioneer.dev/#/modal",
-        "description": ""
-      },
+        "id": "state:ModalSection:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalSection",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalSection:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalSection",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
+      {
+        "id": "component:ModalTitle",
+        "kind": "component",
+        "label": "ModalTitle",
+        "family": "Overlays",
+        "module": "modal",
+        "showcaseUrl": "https://ads.actioneer.dev/#/modal",
+        "description": ""
+      },
       {
         "id": "state:ModalTitle:size=sm",
         "kind": "state",
@@ -12013,6 +12714,30 @@
         "isDefault": false,
         "description": ""
       },
+      {
+        "id": "state:ModalTitle:height=content",
+        "kind": "state",
+        "label": "height=content",
+        "component": "ModalTitle",
+        "axis": "height",
+        "value": "content",
+        "required": false,
+        "derived": true,
+        "isDefault": true,
+        "description": ""
+      },
+      {
+        "id": "state:ModalTitle:height=fixed",
+        "kind": "state",
+        "label": "height=fixed",
+        "component": "ModalTitle",
+        "axis": "height",
+        "value": "fixed",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "component:Popover",
         "kind": "component",
@@ -12541,6 +13266,18 @@
         "isDefault": false,
         "description": "Transparent background with a border — use on tinted/colored surfaces where solid or soft would clash."
       },
+      {
+        "id": "state:Chip:variant=plain",
+        "kind": "state",
+        "label": "variant=plain",
+        "component": "Chip",
+        "axis": "variant",
+        "value": "plain",
+        "required": false,
+        "derived": true,
+        "isDefault": false,
+        "description": ""
+      },
       {
         "id": "state:Chip:color=default",
         "kind": "state",
@@ -14558,7 +15295,7 @@
         "required": false,
         "derived": true,
         "isDefault": true,
-        "description": "Neutral heads-up with a warm-grey icon tile and no urgency signaled."
+        "description": "Neutral heads-up with a neutral icon and no urgency signaled."
       },
       {
         "id": "state:Alert:variant=success",
@@ -15034,6 +15771,15 @@
         "showcaseUrl": "https://ads.actioneer.dev/#/sidebar",
         "description": ""
       },
+      {
+        "id": "component:SidebarWorkspace",
+        "kind": "component",
+        "label": "SidebarWorkspace",
+        "family": "Navigation",
+        "module": "sidebar",
+        "showcaseUrl": "https://ads.actioneer.dev/#/sidebar",
+        "description": ""
+      },
       {
         "id": "component:Collapsible",
         "kind": "component",
@@ -17501,9 +18247,9 @@
       {
         "id": "principle:elevation-is-actionability",
         "kind": "principle",
-        "label": "Shadow only by request",
+        "label": "Five shadows, floating layers only",
         "number": 2,
-        "rule": "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."
+        "rule": "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."
       },
       {
         "id": "principle:motion-follows-guide",
@@ -17557,16 +18303,44 @@
       {
         "id": "principle:leading-back-navigation",
         "kind": "principle",
-        "label": "Back navigation is leading",
+        "label": "Back navigation is leading; drill-downs use the breadcrumb",
         "number": 10,
-        "rule": "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."
+        "rule": "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."
       },
       {
         "id": "principle:tabs-search-opposed",
         "kind": "principle",
         "label": "Tabs lead; scoped search trails",
         "number": 11,
-        "rule": "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."
+        "rule": "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."
+      },
+      {
+        "id": "principle:collection-screens",
+        "kind": "principle",
+        "label": "Collection screens fill the panel",
+        "number": 12,
+        "rule": "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."
+      },
+      {
+        "id": "principle:record-detail-panels",
+        "kind": "principle",
+        "label": "Record detail panels are grouped by question",
+        "number": 13,
+        "rule": "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)."
+      },
+      {
+        "id": "principle:analytics-surfaces",
+        "kind": "principle",
+        "label": "Stats and charts sit in their own containers, values visible",
+        "number": 14,
+        "rule": "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."
+      },
+      {
+        "id": "principle:status-language",
+        "kind": "principle",
+        "label": "Status speaks the business, with one tone per meaning",
+        "number": 15,
+        "rule": "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."
       },
       {
         "id": "state:Button:interaction=default",
@@ -18019,6 +18793,28 @@
         "derived": false,
         "description": "Scroll hints and sticky edges respond to hidden content."
       },
+      {
+        "id": "state:Table:interaction=hover-revealed-selection",
+        "kind": "state",
+        "label": "hover-revealed-selection",
+        "component": "Table",
+        "axis": "interaction",
+        "value": "hover-revealed-selection",
+        "required": true,
+        "derived": false,
+        "description": "Multi-select row checkboxes hidden at rest, shown on hover/focus and while checked; header checkbox always visible."
+      },
+      {
+        "id": "state:Table:interaction=row-active",
+        "kind": "state",
+        "label": "row-active",
+        "component": "Table",
+        "axis": "interaction",
+        "value": "row-active",
+        "required": true,
+        "derived": false,
+        "description": "The row whose detail panel is open carries the soft-teal fade via isActive, with no selection control."
+      },
       {
         "id": "state:ResearchActivity:interaction=active",
         "kind": "state",
@@ -18237,6 +19033,125 @@
         "slot": "responsive-control-row",
         "production": "tabbed-results"
       },
+      {
+        "id": "production:collection-screen",
+        "kind": "production",
+        "label": "Collection screen with record detail",
+        "description": "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"
+        ],
+        "story": "ADS/Components/Table",
+        "jsx": "<div className=\"flex h-screen gap-3 bg-background p-3\">\n  <section className=\"flex min-w-0 flex-1 flex-col overflow-hidden rounded-l bg-card\">\n    <BodyPageHeader title=\"Voice campaigns\" actions={<Button onClick={openCreate}>New campaign</Button>} />\n    <div className=\"flex items-center justify-between gap-4 px-6\">\n      <Tabs value={tab} onValueChange={setTab}>\n        <TabList>{tabs.map(t => <Tab key={t.value} value={t.value} count={t.count}>{t.label}</Tab>)}</TabList>\n      </Tabs>\n      <div className=\"flex items-center gap-2\">\n        <SearchDisclosure value={query} onValueChange={setQuery} triggerLabel=\"Search campaigns\" />\n        <Filters groups={filters} onChange={setFilter} triggerLabel=\"Filter campaigns\" />\n      </div>\n    </div>\n    <div ref={rowsRef} className=\"min-h-0 flex-1 px-6 pt-4 pb-6\">\n      <Table selectionMode=\"multiple\" footer={<Pagination total={pages} page={page} onChange={setPage} summary={summary} />}>\n        <TableHeader><TableRow>{columns}</TableRow></TableHeader>\n        <TableBody>\n          {rows.map(row => (\n            <TableRow key={row.id} rowKey={row.id} isActive={row.id === openId} onClick={() => open(row.id)} aria-label={`Open ${row.name}`}>{cells(row)}</TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  </section>\n  <Drawer open={Boolean(openId)} onOpenChange={close}>{detail}</Drawer>\n  <Modal open={creating} onOpenChange={setCreating} height=\"fixed\">{createForm}</Modal>\n</div>",
+        "constraints": [
+          "Derive the page size from the panel height so rows fill it and Pagination sits on the bottom edge.",
+          "Keep the page header to the title and ONE primary action; search and filters are trailing icon triggers on the tab row.",
+          "Row checkboxes appear on hover/focus only; the header select-all is always visible.",
+          "Mark the row whose detail is open with TableRow isActive — never a radio column.",
+          "Put the status Chip in the Drawer header under the title; group the body into Performance and Details sections 32px apart.",
+          "Status words are business words (Active, Scheduled, Paused, Completed, Draft, Failed) with one tone each; tabs use the same words.",
+          "The create task is a Modal with height=\"fixed\" over the list, never a separate screen."
+        ]
+      },
+      {
+        "id": "layout:collection-screen:0",
+        "kind": "layout",
+        "label": "shell-canvas-row",
+        "element": "div",
+        "slot": "shell-canvas-row",
+        "production": "collection-screen"
+      },
+      {
+        "id": "layout:collection-screen:0.0",
+        "kind": "layout",
+        "label": "collection-panel",
+        "element": "section",
+        "slot": "collection-panel",
+        "production": "collection-screen"
+      },
+      {
+        "id": "layout:collection-screen:0.0.1",
+        "kind": "layout",
+        "label": "control-row",
+        "element": "div",
+        "slot": "control-row",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:record-analytics",
+        "kind": "production",
+        "label": "Record analytics page",
+        "description": "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"
+        ],
+        "story": "ADS/Components/Chart",
+        "jsx": "<main className=\"flex min-w-0 flex-1 flex-col rounded-l bg-card\">\n  <Breadcrumbs actions={<Button>Pause campaign</Button>}>\n    <BreadcrumbItem href=\"/campaigns\">Voice campaigns</BreadcrumbItem>\n    <BreadcrumbItem isCurrent>{campaign.name}</BreadcrumbItem>\n  </Breadcrumbs>\n  <Tabs value={tab} onValueChange={setTab}><TabList>{tabs}</TabList></Tabs>\n  <div className=\"grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4\">\n    {stats.map(stat => (\n      <section key={stat.label} className=\"rounded-l border border-tertiary p-5\">\n        <p className=\"text-m text-secondary\">{stat.label}</p>\n        <p className=\"mt-1 text-3xl tabular-nums\">{stat.value} <span className=\"text-m text-secondary\">{stat.of}</span></p>\n        <Progress className=\"mt-3\" value={stat.percent} label={stat.label} />\n      </section>\n    ))}\n  </div>\n  <section className=\"rounded-l border border-tertiary p-5\">\n    <BarChart title=\"Who was in the segment\" subtitle={scope} legendPlacement=\"header\" data={data} categoryKey=\"day\" series={series} stacked />\n  </section>\n</main>",
+        "constraints": [
+          "Title a drill-down with Breadcrumbs (16px); no back arrow and no repeated H1.",
+          "Give every stat and every chart its own outlined card (1px WG3, radius-l, 20px padding, flat), 16px apart.",
+          "Keep a stat's label, number and scope 4px apart and its Progress 12px below, filling the card.",
+          "Put chart legends in the title row (legendPlacement=\"header\") and leave showValues on — values are never hover-only."
+        ]
+      },
+      {
+        "id": "layout:record-analytics:0",
+        "kind": "layout",
+        "label": "main",
+        "element": "main",
+        "production": "record-analytics"
+      },
+      {
+        "id": "layout:record-analytics:0.2",
+        "kind": "layout",
+        "label": "stat-cards",
+        "element": "div",
+        "slot": "stat-cards",
+        "production": "record-analytics"
+      },
+      {
+        "id": "layout:record-analytics:0.2.0",
+        "kind": "layout",
+        "label": "stat-card",
+        "element": "section",
+        "slot": "stat-card",
+        "production": "record-analytics"
+      },
+      {
+        "id": "layout:record-analytics:0.3",
+        "kind": "layout",
+        "label": "chart-cards",
+        "element": "div",
+        "slot": "chart-cards",
+        "production": "record-analytics"
+      },
+      {
+        "id": "layout:record-analytics:0.3.0",
+        "kind": "layout",
+        "label": "chart-card",
+        "element": "section",
+        "slot": "chart-card",
+        "production": "record-analytics"
+      },
+      {
+        "id": "layout:record-analytics:0.3.1",
+        "kind": "layout",
+        "label": "chart-card",
+        "element": "section",
+        "slot": "chart-card",
+        "production": "record-analytics"
+      },
       {
         "id": "production:modal-task",
         "kind": "production",
@@ -18268,7 +19183,7 @@
           "configuration",
           "toggles"
         ],
-        "story": "ADS/Recipes/Settings panel",
+        "story": "ADS/Components/Under review/SettingList / SettingRow",
         "jsx": "<Card>\n  <CardHeader><CardTitle>{title}</CardTitle></CardHeader>\n  <CardBody>\n    <SettingList aria-label={title}>\n      {settings.map(setting => <SettingRow key={setting.id} {...setting} />)}\n    </SettingList>\n  </CardBody>\n  <CardFooter><Button>Save changes</Button></CardFooter>\n</Card>",
         "constraints": [
           "Use SettingRow.action for the corresponding ADS control; do not hand-roll label/action rows.",
@@ -18429,6 +19344,18 @@
         "target": "state:CodeBlock:variant=plain",
         "relation": "supports-state"
       },
+      {
+        "id": "component:FileDropzone:supports-state:state:FileDropzone:hasFiles=true:global",
+        "source": "component:FileDropzone",
+        "target": "state:FileDropzone:hasFiles=true",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:FileDropzone:supports-state:state:FileDropzone:hasFiles=false:global",
+        "source": "component:FileDropzone",
+        "target": "state:FileDropzone:hasFiles=false",
+        "relation": "supports-state"
+      },
       {
         "id": "component:FileDropzone:supports-state:state:FileDropzone:isDragging=true:global",
         "source": "component:FileDropzone",
@@ -18897,6 +19824,18 @@
         "target": "state:Modal:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:Modal:supports-state:state:Modal:height=content:global",
+        "source": "component:Modal",
+        "target": "state:Modal:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:Modal:supports-state:state:Modal:height=fixed:global",
+        "source": "component:Modal",
+        "target": "state:Modal:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalBody:supports-state:state:ModalBody:size=sm:global",
         "source": "component:ModalBody",
@@ -18939,6 +19878,18 @@
         "target": "state:ModalBody:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalBody:supports-state:state:ModalBody:height=content:global",
+        "source": "component:ModalBody",
+        "target": "state:ModalBody:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalBody:supports-state:state:ModalBody:height=fixed:global",
+        "source": "component:ModalBody",
+        "target": "state:ModalBody:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalClose:supports-state:state:ModalClose:size=sm:global",
         "source": "component:ModalClose",
@@ -18981,6 +19932,18 @@
         "target": "state:ModalClose:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalClose:supports-state:state:ModalClose:height=content:global",
+        "source": "component:ModalClose",
+        "target": "state:ModalClose:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalClose:supports-state:state:ModalClose:height=fixed:global",
+        "source": "component:ModalClose",
+        "target": "state:ModalClose:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalDescription:supports-state:state:ModalDescription:size=sm:global",
         "source": "component:ModalDescription",
@@ -19023,6 +19986,18 @@
         "target": "state:ModalDescription:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalDescription:supports-state:state:ModalDescription:height=content:global",
+        "source": "component:ModalDescription",
+        "target": "state:ModalDescription:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalDescription:supports-state:state:ModalDescription:height=fixed:global",
+        "source": "component:ModalDescription",
+        "target": "state:ModalDescription:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalDrawer:supports-state:state:ModalDrawer:side=right:global",
         "source": "component:ModalDrawer",
@@ -19107,6 +20082,18 @@
         "target": "state:ModalFooter:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalFooter:supports-state:state:ModalFooter:height=content:global",
+        "source": "component:ModalFooter",
+        "target": "state:ModalFooter:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalFooter:supports-state:state:ModalFooter:height=fixed:global",
+        "source": "component:ModalFooter",
+        "target": "state:ModalFooter:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalHeader:supports-state:state:ModalHeader:size=sm:global",
         "source": "component:ModalHeader",
@@ -19149,6 +20136,18 @@
         "target": "state:ModalHeader:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalHeader:supports-state:state:ModalHeader:height=content:global",
+        "source": "component:ModalHeader",
+        "target": "state:ModalHeader:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalHeader:supports-state:state:ModalHeader:height=fixed:global",
+        "source": "component:ModalHeader",
+        "target": "state:ModalHeader:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalSection:supports-state:state:ModalSection:size=sm:global",
         "source": "component:ModalSection",
@@ -19191,6 +20190,18 @@
         "target": "state:ModalSection:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalSection:supports-state:state:ModalSection:height=content:global",
+        "source": "component:ModalSection",
+        "target": "state:ModalSection:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalSection:supports-state:state:ModalSection:height=fixed:global",
+        "source": "component:ModalSection",
+        "target": "state:ModalSection:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ModalTitle:supports-state:state:ModalTitle:size=sm:global",
         "source": "component:ModalTitle",
@@ -19233,6 +20244,18 @@
         "target": "state:ModalTitle:position=top",
         "relation": "supports-state"
       },
+      {
+        "id": "component:ModalTitle:supports-state:state:ModalTitle:height=content:global",
+        "source": "component:ModalTitle",
+        "target": "state:ModalTitle:height=content",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:ModalTitle:supports-state:state:ModalTitle:height=fixed:global",
+        "source": "component:ModalTitle",
+        "target": "state:ModalTitle:height=fixed",
+        "relation": "supports-state"
+      },
       {
         "id": "component:AnswerRenderer:supports-state:state:AnswerRenderer:tone=default:global",
         "source": "component:AnswerRenderer",
@@ -19353,6 +20376,12 @@
         "target": "state:Chip:variant=outline",
         "relation": "supports-state"
       },
+      {
+        "id": "component:Chip:supports-state:state:Chip:variant=plain:global",
+        "source": "component:Chip",
+        "target": "state:Chip:variant=plain",
+        "relation": "supports-state"
+      },
       {
         "id": "component:Chip:supports-state:state:Chip:color=default:global",
         "source": "component:Chip",
@@ -21039,6 +22068,18 @@
         "target": "state:Table:interaction=horizontal-overflow",
         "relation": "supports-state"
       },
+      {
+        "id": "component:Table:supports-state:state:Table:interaction=hover-revealed-selection:global",
+        "source": "component:Table",
+        "target": "state:Table:interaction=hover-revealed-selection",
+        "relation": "supports-state"
+      },
+      {
+        "id": "component:Table:supports-state:state:Table:interaction=row-active:global",
+        "source": "component:Table",
+        "target": "state:Table:interaction=row-active",
+        "relation": "supports-state"
+      },
       {
         "id": "component:ResearchActivity:supports-state:state:ResearchActivity:interaction=active:global",
         "source": "component:ResearchActivity",
@@ -21446,6 +22487,512 @@
         "optional": false,
         "repeat": false
       },
+      {
+        "id": "production:collection-screen:constrained-by:principle:collection-screens:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:collection-screens",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:constrained-by:principle:record-detail-panels:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:record-detail-panels",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:constrained-by:principle:status-language:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:status-language",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:constrained-by:principle:tabs-search-opposed:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:tabs-search-opposed",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:constrained-by:principle:shell-owns-the-frame:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:shell-owns-the-frame",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:constrained-by:principle:minimal-information:collection-screen",
+        "source": "production:collection-screen",
+        "target": "principle:minimal-information",
+        "relation": "constrained-by",
+        "production": "collection-screen"
+      },
+      {
+        "id": "production:collection-screen:renders:layout:collection-screen:0:collection-screen",
+        "source": "production:collection-screen",
+        "target": "layout:collection-screen:0",
+        "relation": "renders",
+        "production": "collection-screen",
+        "slot": "shell-canvas-row",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0:contains:layout:collection-screen:0.0:collection-screen",
+        "source": "layout:collection-screen:0",
+        "target": "layout:collection-screen:0.0",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "collection-panel",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0.0:contains:component:BodyPageHeader:collection-screen",
+        "source": "layout:collection-screen:0.0",
+        "target": "component:BodyPageHeader",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:BodyPageHeader:contains:component:Button:collection-screen",
+        "source": "component:BodyPageHeader",
+        "target": "component:Button",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "primary-action",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0.0:contains:layout:collection-screen:0.0.1:collection-screen",
+        "source": "layout:collection-screen:0.0",
+        "target": "layout:collection-screen:0.0.1",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "control-row",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0.0.1:contains:component:Tabs:collection-screen",
+        "source": "layout:collection-screen:0.0.1",
+        "target": "component:Tabs",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:Tabs:contains:component:TabList:collection-screen",
+        "source": "component:Tabs",
+        "target": "component:TabList",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:TabList:contains:component:Tab:collection-screen",
+        "source": "component:TabList",
+        "target": "component:Tab",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": true,
+        "note": "count={n}"
+      },
+      {
+        "id": "layout:collection-screen:0.0.1:contains:component:SearchDisclosure:collection-screen",
+        "source": "layout:collection-screen:0.0.1",
+        "target": "component:SearchDisclosure",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "trailing-search",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0.0.1:contains:component:Filters:collection-screen",
+        "source": "layout:collection-screen:0.0.1",
+        "target": "component:Filters",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "trailing-filters",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0.0:contains:component:Table:collection-screen",
+        "source": "layout:collection-screen:0.0",
+        "target": "component:Table",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false,
+        "note": "selectionMode=\"multiple\"; footer={<Pagination />}; page size derived from the panel height"
+      },
+      {
+        "id": "component:Table:contains:component:TableHeader:collection-screen",
+        "source": "component:Table",
+        "target": "component:TableHeader",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:TableHeader:contains:component:TableRow:collection-screen",
+        "source": "component:TableHeader",
+        "target": "component:TableRow",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:TableRow:contains:component:TableColumn:collection-screen",
+        "source": "component:TableRow",
+        "target": "component:TableColumn",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": true
+      },
+      {
+        "id": "component:Table:contains:component:TableBody:collection-screen",
+        "source": "component:Table",
+        "target": "component:TableBody",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:TableBody:contains:component:TableRow:collection-screen",
+        "source": "component:TableBody",
+        "target": "component:TableRow",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": true,
+        "note": "isActive while its detail is open"
+      },
+      {
+        "id": "component:TableRow:contains:component:TableCell:collection-screen",
+        "source": "component:TableRow",
+        "target": "component:TableCell",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": true
+      },
+      {
+        "id": "layout:collection-screen:0:contains:component:Drawer:collection-screen",
+        "source": "layout:collection-screen:0",
+        "target": "component:Drawer",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "selected-record-detail",
+        "optional": true,
+        "repeat": false
+      },
+      {
+        "id": "component:Drawer:contains:component:DrawerHeader:collection-screen",
+        "source": "component:Drawer",
+        "target": "component:DrawerHeader",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:DrawerHeader:contains:component:DrawerTitle:collection-screen",
+        "source": "component:DrawerHeader",
+        "target": "component:DrawerTitle",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:DrawerHeader:contains:component:Chip:collection-screen",
+        "source": "component:DrawerHeader",
+        "target": "component:Chip",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "status-under-title",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:Drawer:contains:component:DrawerBody:collection-screen",
+        "source": "component:Drawer",
+        "target": "component:DrawerBody",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false,
+        "note": "Performance (stat cards + chart card), then Details (label–value rows)"
+      },
+      {
+        "id": "component:Drawer:contains:component:DrawerFooter:collection-screen",
+        "source": "component:Drawer",
+        "target": "component:DrawerFooter",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:collection-screen:0:contains:component:Modal:collection-screen",
+        "source": "layout:collection-screen:0",
+        "target": "component:Modal",
+        "relation": "contains",
+        "production": "collection-screen",
+        "slot": "create-task",
+        "optional": true,
+        "repeat": false,
+        "note": "height=\"fixed\""
+      },
+      {
+        "id": "component:Modal:contains:component:ModalHeader:collection-screen",
+        "source": "component:Modal",
+        "target": "component:ModalHeader",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:ModalHeader:contains:component:ModalTitle:collection-screen",
+        "source": "component:ModalHeader",
+        "target": "component:ModalTitle",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:Modal:contains:component:ModalBody:collection-screen",
+        "source": "component:Modal",
+        "target": "component:ModalBody",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:ModalBody:contains:component:InputField:collection-screen",
+        "source": "component:ModalBody",
+        "target": "component:InputField",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:ModalBody:contains:component:SegmentedControl:collection-screen",
+        "source": "component:ModalBody",
+        "target": "component:SegmentedControl",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:ModalBody:contains:component:FileDropzone:collection-screen",
+        "source": "component:ModalBody",
+        "target": "component:FileDropzone",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": true,
+        "repeat": false
+      },
+      {
+        "id": "component:Modal:contains:component:ModalFooter:collection-screen",
+        "source": "component:Modal",
+        "target": "component:ModalFooter",
+        "relation": "contains",
+        "production": "collection-screen",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "production:record-analytics:constrained-by:principle:analytics-surfaces:record-analytics",
+        "source": "production:record-analytics",
+        "target": "principle:analytics-surfaces",
+        "relation": "constrained-by",
+        "production": "record-analytics"
+      },
+      {
+        "id": "production:record-analytics:constrained-by:principle:leading-back-navigation:record-analytics",
+        "source": "production:record-analytics",
+        "target": "principle:leading-back-navigation",
+        "relation": "constrained-by",
+        "production": "record-analytics"
+      },
+      {
+        "id": "production:record-analytics:constrained-by:principle:status-language:record-analytics",
+        "source": "production:record-analytics",
+        "target": "principle:status-language",
+        "relation": "constrained-by",
+        "production": "record-analytics"
+      },
+      {
+        "id": "production:record-analytics:constrained-by:principle:responsive-container-fluid:record-analytics",
+        "source": "production:record-analytics",
+        "target": "principle:responsive-container-fluid",
+        "relation": "constrained-by",
+        "production": "record-analytics"
+      },
+      {
+        "id": "production:record-analytics:renders:layout:record-analytics:0:record-analytics",
+        "source": "production:record-analytics",
+        "target": "layout:record-analytics:0",
+        "relation": "renders",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0:contains:component:Breadcrumbs:record-analytics",
+        "source": "layout:record-analytics:0",
+        "target": "component:Breadcrumbs",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:Breadcrumbs:contains:component:BreadcrumbItem:record-analytics",
+        "source": "component:Breadcrumbs",
+        "target": "component:BreadcrumbItem",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": true
+      },
+      {
+        "id": "component:Breadcrumbs:contains:component:Button:record-analytics",
+        "source": "component:Breadcrumbs",
+        "target": "component:Button",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "actions",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0:contains:component:Tabs:record-analytics",
+        "source": "layout:record-analytics:0",
+        "target": "component:Tabs",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:Tabs:contains:component:TabList:record-analytics",
+        "source": "component:Tabs",
+        "target": "component:TabList",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "component:TabList:contains:component:Tab:record-analytics",
+        "source": "component:TabList",
+        "target": "component:Tab",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": true
+      },
+      {
+        "id": "layout:record-analytics:0:contains:layout:record-analytics:0.2:record-analytics",
+        "source": "layout:record-analytics:0",
+        "target": "layout:record-analytics:0.2",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "stat-cards",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0.2:contains:layout:record-analytics:0.2.0:record-analytics",
+        "source": "layout:record-analytics:0.2",
+        "target": "layout:record-analytics:0.2.0",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "stat-card",
+        "optional": false,
+        "repeat": true
+      },
+      {
+        "id": "layout:record-analytics:0.2.0:contains:component:Progress:record-analytics",
+        "source": "layout:record-analytics:0.2.0",
+        "target": "component:Progress",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0:contains:layout:record-analytics:0.3:record-analytics",
+        "source": "layout:record-analytics:0",
+        "target": "layout:record-analytics:0.3",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "chart-cards",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0.3:contains:layout:record-analytics:0.3.0:record-analytics",
+        "source": "layout:record-analytics:0.3",
+        "target": "layout:record-analytics:0.3.0",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "chart-card",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0.3.0:contains:component:BarChart:record-analytics",
+        "source": "layout:record-analytics:0.3.0",
+        "target": "component:BarChart",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false,
+        "note": "title, subtitle, legendPlacement=\"header\""
+      },
+      {
+        "id": "layout:record-analytics:0.3:contains:layout:record-analytics:0.3.1:record-analytics",
+        "source": "layout:record-analytics:0.3",
+        "target": "layout:record-analytics:0.3.1",
+        "relation": "contains",
+        "production": "record-analytics",
+        "slot": "chart-card",
+        "optional": false,
+        "repeat": false
+      },
+      {
+        "id": "layout:record-analytics:0.3.1:contains:component:LineChart:record-analytics",
+        "source": "layout:record-analytics:0.3.1",
+        "target": "component:LineChart",
+        "relation": "contains",
+        "production": "record-analytics",
+        "optional": false,
+        "repeat": false,
+        "note": "title, subtitle, legendPlacement=\"header\""
+      },
       {
         "id": "production:modal-task:constrained-by:principle:minimal-information:modal-task",
         "source": "production:modal-task",