@actioneer/ads-mcp 1.0.8 → 1.0.9

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -16,9 +16,9 @@
     "Chat"
   ],
   "counts": {
-    "total": 743,
-    "component": 323,
-    "type": 312,
+    "total": 751,
+    "component": 325,
+    "type": 318,
     "hook": 10,
     "util": 98
   },
@@ -820,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."
@@ -831,6 +831,7 @@
         }
       },
       "props": [
+        "size",
         "isLoading",
         "startContent",
         "endContent",
@@ -1200,6 +1201,13 @@
       "importPath": "@actioneer/ads",
       "module": "button"
     },
+    {
+      "name": "ButtonSize",
+      "family": "Foundations",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "button"
+    },
     {
       "name": "CodeBlockProps",
       "family": "Foundations",
@@ -1464,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",
@@ -1725,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",
@@ -2118,6 +2166,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       },
       "props": [
@@ -2160,6 +2215,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       },
       "props": [
@@ -2190,6 +2252,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2217,6 +2286,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2277,6 +2353,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2304,6 +2387,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2331,6 +2421,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2358,6 +2455,13 @@
             "top"
           ],
           "default": "center"
+        },
+        "height": {
+          "values": [
+            "content",
+            "fixed"
+          ],
+          "default": "content"
         }
       }
     },
@@ -2371,7 +2475,9 @@
       "showcaseUrl": "https://ads.actioneer.dev/#/popover",
       "props": [
         "children",
-        "defaultOpen"
+        "defaultOpen",
+        "open",
+        "onOpenChange"
       ]
     },
     {
@@ -2909,7 +3015,8 @@
         "variant": {
           "values": [
             "solid",
-            "outline"
+            "outline",
+            "plain"
           ],
           "default": "solid",
           "options": {
@@ -3729,7 +3836,8 @@
         "defaultExpanded",
         "onExpandedChange",
         "disclosureLabel",
-        "isInteractive"
+        "isInteractive",
+        "isActive"
       ]
     },
     {
@@ -4182,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",
@@ -5689,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",
@@ -5787,6 +5915,13 @@
       "importPath": "@actioneer/ads",
       "module": "sidebar"
     },
+    {
+      "name": "SidebarWorkspaceProps",
+      "family": "Navigation",
+      "kind": "type",
+      "importPath": "@actioneer/ads",
+      "module": "sidebar"
+    },
     {
       "name": "useSidebar",
       "family": "Navigation",
@@ -8685,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.",
@@ -8714,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."
       ],
@@ -8730,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 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. 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 tab triggers left-aligned at their natural width, then place the scoped search field opposite them 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
     }
@@ -8996,95 +9209,223 @@
         "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",
-          "toggles"
+          "analysis",
+          "analytics tab",
+          "record page",
+          "campaign analysis",
+          "metrics",
+          "dashboard tab"
         ],
-        "description": "A compact settings surface with grouped SettingRows and one save action.",
+        "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": [
           {
-            "component": "Card",
+            "native": "main",
             "children": [
               {
-                "component": "CardHeader",
+                "component": "Breadcrumbs",
                 "children": [
                   {
-                    "component": "CardTitle"
+                    "component": "BreadcrumbItem",
+                    "repeat": true
                   },
                   {
-                    "component": "CardDescription",
-                    "optional": true
+                    "component": "Button",
+                    "slot": "actions"
                   }
                 ]
               },
               {
-                "component": "CardBody",
+                "component": "Tabs",
                 "children": [
                   {
-                    "component": "SettingList",
+                    "component": "TabList",
                     "children": [
                       {
-                        "component": "SettingRow",
+                        "component": "Tab",
                         "repeat": true
                       }
                     ]
@@ -9092,15 +9433,171 @@
                 ]
               },
               {
-                "component": "CardFooter",
+                "native": "div",
+                "slot": "stat-cards",
                 "children": [
                   {
-                    "component": "Button",
-                    "repeat": true
+                    "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.",
+        "roots": [
+          {
+            "component": "Card",
+            "children": [
+              {
+                "component": "CardHeader",
+                "children": [
+                  {
+                    "component": "CardTitle"
+                  },
+                  {
+                    "component": "CardDescription",
+                    "optional": true
+                  }
+                ]
+              },
+              {
+                "component": "CardBody",
+                "children": [
+                  {
+                    "component": "SettingList",
+                    "children": [
+                      {
+                        "component": "SettingRow",
+                        "repeat": true
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "component": "CardFooter",
+                "children": [
+                  {
+                    "component": "Button",
+                    "repeat": true
+                  }
+                ]
+              }
+            ]
           }
         ],
         "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>",
@@ -9116,7 +9613,7 @@
           "minimal-information",
           "ads-first"
         ],
-        "story": "ADS/Recipes/Settings panel"
+        "story": "ADS/Components/Under review/SettingList / SettingRow"
       },
       {
         "id": "research-trace",
@@ -9520,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": [
@@ -9660,13 +10167,13 @@
       ]
     },
     "counts": {
-      "nodes": 808,
-      "edges": 550,
-      "component": 323,
-      "state": 463,
-      "principle": 11,
-      "production": 9,
-      "layout": 2
+      "nodes": 844,
+      "edges": 625,
+      "component": 325,
+      "state": 482,
+      "principle": 15,
+      "production": 11,
+      "layout": 11
     },
     "nodes": [
       {
@@ -9778,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",
@@ -9790,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",
@@ -9802,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",
@@ -9814,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",
@@ -10377,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",
@@ -11286,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",
@@ -11379,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",
@@ -11472,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",
@@ -11565,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",
@@ -11751,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",
@@ -11844,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",
@@ -11937,6 +12597,30 @@
         "isDefault": false,
         "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",
@@ -12031,8 +12715,32 @@
         "description": ""
       },
       {
-        "id": "component:Popover",
-        "kind": "component",
+        "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",
         "label": "Popover",
         "family": "Overlays",
         "module": "popover",
@@ -12558,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",
@@ -15051,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",
@@ -17574,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 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. 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",
@@ -18036,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",
@@ -18254,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",
@@ -18285,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.",
@@ -18926,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",
@@ -18968,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",
@@ -19010,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",
@@ -19052,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",
@@ -19136,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",
@@ -19178,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",
@@ -19220,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",
@@ -19262,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",
@@ -19382,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",
@@ -21068,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",
@@ -21475,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",