@adia-ai/a2ui-corpus 0.6.50 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (290) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/catalog-a2ui_0_9.json +36 -38
  3. package/catalog-a2ui_0_9_rules.txt +1 -0
  4. package/chunk-embeddings.json +1 -1
  5. package/chunks/_index.json +1 -1
  6. package/chunks/accordion-settings.json +1 -1
  7. package/chunks/activity-feed.json +1 -1
  8. package/chunks/agent-canvas-shell.json +1 -1
  9. package/chunks/agent-command-palette-search.json +1 -1
  10. package/chunks/agent-reasoning-collapsed.json +1 -1
  11. package/chunks/agent-tool-call-result.json +1 -1
  12. package/chunks/agent-trace-timeline.json +1 -1
  13. package/chunks/ai-streaming-response.json +1 -1
  14. package/chunks/alert-banner.json +1 -1
  15. package/chunks/analytics-chart.json +1 -1
  16. package/chunks/analytics-sparklines-dashboard.json +4 -4
  17. package/chunks/api-key-table.json +1 -1
  18. package/chunks/app-product-listing-card.json +1 -1
  19. package/chunks/audit-log.json +2 -3
  20. package/chunks/auth-account-deleted-actions.json +1 -1
  21. package/chunks/auth-account-deleted.json +1 -1
  22. package/chunks/auth-card-content.json +1 -1
  23. package/chunks/auth-card-header.json +1 -1
  24. package/chunks/auth-email-entry.json +1 -1
  25. package/chunks/auth-email-verify-confirm.json +1 -1
  26. package/chunks/auth-email-verify.json +1 -1
  27. package/chunks/auth-forbidden-actions.json +1 -1
  28. package/chunks/auth-forbidden.json +1 -1
  29. package/chunks/auth-invite-actions.json +1 -1
  30. package/chunks/auth-invite-team-card.json +1 -1
  31. package/chunks/auth-link-expired-form.json +1 -1
  32. package/chunks/auth-link-expired.json +1 -1
  33. package/chunks/auth-locked-account.json +1 -1
  34. package/chunks/auth-locked-recovery-options.json +1 -1
  35. package/chunks/auth-mfa-enrollment-submit.json +1 -1
  36. package/chunks/auth-mfa-enrollment.json +1 -1
  37. package/chunks/auth-mfa-fallback-actions.json +1 -1
  38. package/chunks/auth-mfa-recovery.json +1 -1
  39. package/chunks/auth-new-password-form.json +1 -1
  40. package/chunks/auth-new-password.json +1 -1
  41. package/chunks/auth-oauth-fallback-actions.json +1 -1
  42. package/chunks/auth-oauth-interstitial.json +1 -1
  43. package/chunks/auth-password-challenge.json +2 -2
  44. package/chunks/auth-password-reset-form.json +1 -1
  45. package/chunks/auth-password-reset.json +1 -1
  46. package/chunks/auth-profile-form.json +1 -1
  47. package/chunks/auth-profile-setup.json +1 -1
  48. package/chunks/auth-reset-sent.json +1 -1
  49. package/chunks/auth-session-expired-actions.json +1 -1
  50. package/chunks/auth-session-expired.json +1 -1
  51. package/chunks/auth-signin-card-email.json +1 -1
  52. package/chunks/auth-signin-card-magic-link.json +1 -1
  53. package/chunks/auth-signin-card-mfa.json +1 -1
  54. package/chunks/auth-signin-card-otp.json +1 -1
  55. package/chunks/auth-signin-card-password.json +1 -1
  56. package/chunks/auth-signin-card-recovery.json +1 -1
  57. package/chunks/auth-signout-actions.json +1 -1
  58. package/chunks/auth-signout.json +1 -1
  59. package/chunks/auth-signup-email-entry.json +1 -1
  60. package/chunks/auth-signup-entry.json +1 -1
  61. package/chunks/auth-signup-social-auths.json +1 -1
  62. package/chunks/auth-signup-verify.json +1 -1
  63. package/chunks/auth-social-auths.json +1 -1
  64. package/chunks/auth-sso-providers.json +1 -1
  65. package/chunks/auth-sso-required.json +1 -1
  66. package/chunks/auth-team-invite.json +1 -1
  67. package/chunks/avatar-group-overflow.json +1 -1
  68. package/chunks/badge-variants-table.json +1 -1
  69. package/chunks/billing-overview.json +1 -1
  70. package/chunks/billing-progress-label.json +1 -1
  71. package/chunks/blog-post-card.json +1 -1
  72. package/chunks/breadcrumb-navigation.json +1 -1
  73. package/chunks/calendar-month-view.json +1 -1
  74. package/chunks/card-grid-images.json +1 -1
  75. package/chunks/card-header-with-description.json +1 -1
  76. package/chunks/changelog-activity-feed.json +1 -1
  77. package/chunks/chart-with-filter-pills.json +1 -1
  78. package/chunks/chat-page-shell.json +1 -1
  79. package/chunks/chat-streaming-surface.json +1 -1
  80. package/chunks/code-snippet.json +2 -3
  81. package/chunks/color-picker-swatches.json +1 -1
  82. package/chunks/command-palette.json +1 -1
  83. package/chunks/commerce-pricing-tiers.json +1 -1
  84. package/chunks/comparison-table.json +1 -1
  85. package/chunks/contact-form.json +1 -1
  86. package/chunks/conversion-funnel-6step.json +1 -1
  87. package/chunks/dashboard-acquisition-panel.json +4 -5
  88. package/chunks/dashboard-admin-page.json +3 -3
  89. package/chunks/dashboard-audience-kpis.json +4 -4
  90. package/chunks/dashboard-audience-panel.json +4 -4
  91. package/chunks/dashboard-behavior-panel.json +1 -1
  92. package/chunks/dashboard-chart-recent.json +1 -1
  93. package/chunks/dashboard-cohort-retention.json +1 -1
  94. package/chunks/dashboard-conversion-panel.json +1 -1
  95. package/chunks/dashboard-country-list.json +1 -1
  96. package/chunks/dashboard-filter-bar.json +1 -1
  97. package/chunks/dashboard-funnel.json +1 -1
  98. package/chunks/dashboard-notifications-panel.json +1 -1
  99. package/chunks/dashboard-overview-panel.json +8 -9
  100. package/chunks/dashboard-page-header.json +1 -1
  101. package/chunks/dashboard-pages-table.json +1 -1
  102. package/chunks/dashboard-quick-actions.json +1 -1
  103. package/chunks/dashboard-reports-panel.json +1 -2
  104. package/chunks/dashboard-reports-table.json +2 -3
  105. package/chunks/dashboard-storage-card.json +1 -1
  106. package/chunks/dashboard-tabs.json +1 -1
  107. package/chunks/dashboard-team-actions-storage.json +4 -4
  108. package/chunks/dashboard-team-list.json +2 -2
  109. package/chunks/dashboard-traffic-channels.json +4 -5
  110. package/chunks/dashboard-transactions-table.json +2 -3
  111. package/chunks/data-import-wizard.json +1 -1
  112. package/chunks/date-range-picker.json +1 -1
  113. package/chunks/date-time-picker-form.json +1 -1
  114. package/chunks/divider-text-label.json +1 -1
  115. package/chunks/doc-editor-shell.json +1 -1
  116. package/chunks/drawer-2fa-key.json +3 -4
  117. package/chunks/drawer-2fa-sms.json +3 -4
  118. package/chunks/drawer-2fa-totp.json +3 -4
  119. package/chunks/drawer-cancel-sub.json +3 -4
  120. package/chunks/drawer-change-plan.json +3 -4
  121. package/chunks/drawer-custom-roles.json +3 -4
  122. package/chunks/drawer-data-start.json +3 -4
  123. package/chunks/drawer-delete-account.json +3 -4
  124. package/chunks/drawer-delete-workspace.json +3 -4
  125. package/chunks/drawer-discord.json +3 -4
  126. package/chunks/drawer-figma.json +3 -4
  127. package/chunks/drawer-first-dashboard.json +3 -4
  128. package/chunks/drawer-gcal.json +3 -4
  129. package/chunks/drawer-github.json +3 -4
  130. package/chunks/drawer-invite.json +3 -4
  131. package/chunks/drawer-report.json +3 -4
  132. package/chunks/drawer-revoke-session.json +3 -4
  133. package/chunks/drawer-role.json +3 -4
  134. package/chunks/drawer-slack.json +3 -4
  135. package/chunks/drawer-smtp.json +3 -4
  136. package/chunks/drawer-source.json +3 -4
  137. package/chunks/drawer-transaction.json +3 -4
  138. package/chunks/editor-code-pane.json +1 -1
  139. package/chunks/editor-page-shell.json +1 -1
  140. package/chunks/email-inbox-list.json +1 -1
  141. package/chunks/empty-state-danger.json +1 -1
  142. package/chunks/empty-state-minimal.json +1 -1
  143. package/chunks/empty-state-warning.json +1 -1
  144. package/chunks/empty-state.json +1 -1
  145. package/chunks/error-404-actions.json +1 -1
  146. package/chunks/error-404.json +1 -1
  147. package/chunks/error-500-actions.json +1 -1
  148. package/chunks/error-500.json +1 -1
  149. package/chunks/error-maintenance-actions.json +1 -1
  150. package/chunks/error-maintenance.json +1 -1
  151. package/chunks/error-page-shell.json +1 -1
  152. package/chunks/faq-accordion.json +1 -1
  153. package/chunks/feature-grid-icons.json +1 -1
  154. package/chunks/file-upload-dnd.json +1 -1
  155. package/chunks/footer-multi-column.json +1 -1
  156. package/chunks/footer-primary-only.json +1 -1
  157. package/chunks/form-page-shell.json +1 -1
  158. package/chunks/gallery-page-shell.json +1 -1
  159. package/chunks/hero-section-split.json +1 -1
  160. package/chunks/icon-text-row.json +1 -1
  161. package/chunks/image-caption-tile.json +1 -1
  162. package/chunks/image-carousel.json +1 -1
  163. package/chunks/image-upload-preview.json +1 -1
  164. package/chunks/import-mapping-flow.json +1 -1
  165. package/chunks/integrations-grid.json +2 -3
  166. package/chunks/inventory-list-stock.json +1 -1
  167. package/chunks/invite-members.json +1 -1
  168. package/chunks/invoice-line-items.json +1 -1
  169. package/chunks/kanban-board-3col.json +1 -1
  170. package/chunks/kanban-page-shell.json +1 -1
  171. package/chunks/keyboard-shortcut-display.json +1 -1
  172. package/chunks/labeled-textarea.json +1 -1
  173. package/chunks/leaderboard-table.json +1 -1
  174. package/chunks/linked-record-row.json +1 -1
  175. package/chunks/loading-skeleton-placeholder.json +1 -1
  176. package/chunks/marketing-hero-cta.json +1 -1
  177. package/chunks/marketing-page-shell.json +1 -1
  178. package/chunks/masonry-gallery.json +1 -1
  179. package/chunks/member-edit-drawer.json +1 -1
  180. package/chunks/metadata-description-list.json +1 -1
  181. package/chunks/modal-dialog-confirm.json +1 -1
  182. package/chunks/nav-menu-icons.json +1 -1
  183. package/chunks/newsletter-subscription.json +1 -1
  184. package/chunks/notification-badges-feed.json +1 -1
  185. package/chunks/notification-preferences-panel.json +1 -1
  186. package/chunks/notification-toast-row.json +1 -1
  187. package/chunks/onb-completion.json +1 -1
  188. package/chunks/onb-extension-install.json +1 -1
  189. package/chunks/onb-hero-welcome.json +1 -1
  190. package/chunks/onb-import-picker.json +1 -1
  191. package/chunks/onb-mobile-handoff.json +1 -1
  192. package/chunks/onb-notification-prefs.json +1 -1
  193. package/chunks/onb-persona-picker.json +1 -1
  194. package/chunks/onb-provider-tiles.json +1 -1
  195. package/chunks/onb-settings-review.json +1 -1
  196. package/chunks/onb-step-footer.json +1 -1
  197. package/chunks/onb-step-header.json +1 -1
  198. package/chunks/onb-step-progress.json +1 -1
  199. package/chunks/onb-step-shell.json +1 -1
  200. package/chunks/onb-story-pane.json +1 -1
  201. package/chunks/onb-tutorial-steps.json +1 -1
  202. package/chunks/order-tracking-timeline.json +1 -1
  203. package/chunks/pagination-controls.json +1 -1
  204. package/chunks/payment-method-form.json +1 -1
  205. package/chunks/period-comparison.json +4 -4
  206. package/chunks/permission-matrix-table.json +1 -1
  207. package/chunks/playground-a2ui.json +1 -1
  208. package/chunks/playground-app-shell.json +1 -1
  209. package/chunks/playground-chat.json +1 -1
  210. package/chunks/playground-construct-canvas.json +1 -1
  211. package/chunks/playground-css-channel.json +1 -1
  212. package/chunks/playground-gen-ui.json +1 -1
  213. package/chunks/playground-render-preview.json +1 -1
  214. package/chunks/playground-streams-bridge.json +1 -1
  215. package/chunks/playground-table-toolbar.json +1 -1
  216. package/chunks/popover-with-content.json +1 -1
  217. package/chunks/pricing-tiers.json +4 -4
  218. package/chunks/product-tour.json +1 -1
  219. package/chunks/progress-tracker-milestones.json +1 -1
  220. package/chunks/radio-button-group.json +1 -1
  221. package/chunks/real-time-metrics-dashboard.json +1 -1
  222. package/chunks/reg-address-form.json +1 -1
  223. package/chunks/reg-billing-card.json +1 -1
  224. package/chunks/reg-brand-scrape.json +1 -1
  225. package/chunks/reg-departments-toggle.json +1 -1
  226. package/chunks/reg-extended-profile.json +1 -1
  227. package/chunks/reg-final-done.json +1 -1
  228. package/chunks/reg-helpdesk-grid.json +2 -2
  229. package/chunks/reg-import-picker.json +1 -1
  230. package/chunks/reg-integrations-grid.json +1 -1
  231. package/chunks/reg-invite-form.json +1 -1
  232. package/chunks/reg-legal-entity.json +1 -1
  233. package/chunks/reg-org-chart-review.json +1 -1
  234. package/chunks/reg-profile-identity.json +1 -1
  235. package/chunks/reg-step-footer.json +1 -1
  236. package/chunks/reg-step-header.json +1 -1
  237. package/chunks/reg-step-progress.json +1 -1
  238. package/chunks/reg-step-shell.json +1 -1
  239. package/chunks/reg-story-pane.json +1 -1
  240. package/chunks/reg-success-summary.json +1 -1
  241. package/chunks/reg-team-size.json +1 -1
  242. package/chunks/reg-usecase-picker.json +1 -1
  243. package/chunks/reg-workspace-name.json +1 -1
  244. package/chunks/responsive-grid-pattern.json +1 -1
  245. package/chunks/responsive-kpi-grid.json +1 -1
  246. package/chunks/responsive-row-pattern.json +1 -1
  247. package/chunks/responsive-wrap-at-pattern.json +1 -1
  248. package/chunks/revenue-heatmap.json +1 -1
  249. package/chunks/role-management.json +1 -1
  250. package/chunks/search-with-filters.json +1 -1
  251. package/chunks/section-with-stack.json +1 -1
  252. package/chunks/segmented-control-billing-tabs.json +2 -3
  253. package/chunks/select-multiple-preselected.json +1 -1
  254. package/chunks/settings-2fa-setup.json +2 -5
  255. package/chunks/settings-admin-page.json +2 -3
  256. package/chunks/settings-appearance-theme-panel.json +1 -1
  257. package/chunks/settings-appearance.json +1 -1
  258. package/chunks/settings-general-form.json +1 -1
  259. package/chunks/settings-integrations.json +2 -5
  260. package/chunks/settings-members-invite.json +1 -1
  261. package/chunks/settings-page-shell.json +1 -1
  262. package/chunks/settings-panel.json +1 -1
  263. package/chunks/settings-profile-security.json +1 -1
  264. package/chunks/settings-toggle-switches.json +1 -1
  265. package/chunks/sidebar-nav.json +1 -1
  266. package/chunks/sidebar-navigation-panel.json +1 -1
  267. package/chunks/slider-range-controls.json +1 -1
  268. package/chunks/social-media-post-card.json +1 -1
  269. package/chunks/sortable-search-paginate-table.json +1 -1
  270. package/chunks/split-pane-editor-preview.json +1 -1
  271. package/chunks/stat-cards-kpi-dashboard.json +4 -4
  272. package/chunks/status-dashboard.json +1 -1
  273. package/chunks/stepper-form-wizard.json +1 -1
  274. package/chunks/survey-rating-form.json +1 -1
  275. package/chunks/tabs-with-panels.json +1 -1
  276. package/chunks/tag-chips-filter.json +1 -1
  277. package/chunks/team-members-list.json +2 -3
  278. package/chunks/testimonial-grid.json +1 -1
  279. package/chunks/testimonials-avatar-cards.json +1 -1
  280. package/chunks/timeline-events.json +1 -1
  281. package/chunks/toolbar-icons.json +1 -1
  282. package/chunks/toolbar-tooltips.json +1 -1
  283. package/chunks/tooltip-hover-button.json +1 -1
  284. package/chunks/trial-banner.json +1 -1
  285. package/chunks/user-identity-row.json +1 -1
  286. package/chunks/user-onboarding-checklist.json +1 -1
  287. package/chunks/user-profile-card.json +1 -1
  288. package/chunks/video-player-controls.json +1 -1
  289. package/chunks/webhook-config.json +1 -1
  290. package/package.json +1 -1
package/chunks/dashboard-admin-page.json CHANGED
@@ -12,7 +12,7 @@
12
12
  {
13
13
  "name": "page-content",
14
14
  "tagName": "admin-page-body",
15
- "html": "<section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"complex\"\n data-chunk-tags-layout=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n <card-ui\n ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"card\">\n <card-ui span=\"3\">\n <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n data-chunk-keywords=\"card header heading description subtitle pattern\">\n <h3>Overview</h3>\n <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n </header>\n <section>\n <col-ui>\n <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n <grid-ui columns=\"1 2@sm\" gap=\"3\">\n <card-ui>\n <section>\n <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n </section>\n </card-ui>\n <card-ui>\n <section>\n <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n </footer>\n </card-ui>\n <card-ui span=\"2\">\n <header>\n <h3>Recent Sales</h3>\n <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n <text-ui strong>+$1,999.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n <text-ui strong>+$299.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n <text-ui strong>+$99.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">will@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\" size=\"sm\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"row\">\n <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n <header>\n <h3>Team Members</h3>\n <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Alex Chen\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Alex Chen</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Engineering Lead</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Sarah Miller</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Product Designer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"James Park\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>James Park</text-ui>\n <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Backend Engineer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Maria Lopez</text-ui>\n <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Data Analyst</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-quick-actions\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Quick actions card — common shortcut buttons for frequent dashboard tasks.\"\n data-chunk-keywords=\"dashboard quick actions shortcuts buttons frequent tasks\">\n <header><h3>Quick Actions</h3></header>\n <section>\n <action-list-ui>\n <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n </action-list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-storage-card\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Storage usage card — used / total storage bar with tier breakdown and upgrade CTA.\"\n data-chunk-keywords=\"dashboard storage usage quota bar tier upgrade\">\n <header>\n <h3>Storage</h3>\n <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n </footer>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n data-chunk-domain=\"navigation\"\n data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n <card-ui>\n <section>\n <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n <tag-ui text=\"Country: United States\" removable></tag-ui>\n <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n <span data-spacer></span>\n <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- Analytics: bar + line side by side -->\n <grid-ui columns=\"1 2@md\" gap=\"4\" data-chunk=\"analytics-chart\" data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Analytics dashboard with bar chart and line chart displayed side by side. Revenue bar chart on the left, sessions trend line chart on the right.\"\n data-chunk-keywords=\"analytics chart bar chart line chart side by side dashboard two column grid revenue sessions trend data visualization bar line analytics-chart\">\n <card-ui>\n <header>\n <h3>Revenue</h3>\n <p slot=\"description\">Monthly revenue breakdown</p>\n </header>\n <section>\n <chart-ui type=\"bar\" x=\"month\" y=\"revenue\" hide-values\n data='[{\"month\":\"Jan\",\"revenue\":3200},{\"month\":\"Feb\",\"revenue\":4100},{\"month\":\"Mar\",\"revenue\":3800},{\"month\":\"Apr\",\"revenue\":5200},{\"month\":\"May\",\"revenue\":4800},{\"month\":\"Jun\",\"revenue\":6100}]'></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Sessions</h3>\n <p slot=\"description\">Daily session trend</p>\n </header>\n <section>\n <chart-ui type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values\n data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n <card-ui\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n <card-ui>\n <header>\n <h3>Top countries</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇺🇸</text-ui>\n <text-ui weight=\"semibold\" grow>United States</text-ui>\n <text-ui>14,320</text-ui>\n <text-ui color=\"subtle\">50.4%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇩🇪</text-ui>\n <text-ui weight=\"semibold\" grow>Germany</text-ui>\n <text-ui>3,892</text-ui>\n <text-ui color=\"subtle\">13.7%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇬🇧</text-ui>\n <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n <text-ui>2,841</text-ui>\n <text-ui color=\"subtle\">10.0%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇯🇵</text-ui>\n <text-ui weight=\"semibold\" grow>Japan</text-ui>\n <text-ui>1,920</text-ui>\n <text-ui color=\"subtle\">6.8%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇨🇦</text-ui>\n <text-ui weight=\"semibold\" grow>Canada</text-ui>\n <text-ui>1,450</text-ui>\n <text-ui color=\"subtle\">5.1%</text-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <span slot=\"action\" size=\"sm\">\n <segmented-ui value=\"30d\" size=\"sm\">\n <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n </segmented-ui>\n </span>\n </header>\n <section>\n <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Acquisition channels</h3>\n <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n </header>\n <section>\n <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n data-chunk-keywords=\"behavior events user interactions engagement actions\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Top pages table card — page title, views, bounce rate, avg time on page.\"\n data-chunk-keywords=\"dashboard pages table analytics top content views bounce rate\">\n <card-ui>\n <header>\n <h3>Top pages</h3>\n <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <p slot=\"description\">Visit → Sign up → Activate → Convert</p>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n </col-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <grid-ui data-chunk=\"dashboard-cohort-retention\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Cohort retention table card — weekly retention heatmap grid showing user cohort activity.\"\n data-chunk-keywords=\"dashboard cohort retention heatmap table analytics users weekly\">\n <card-ui>\n <header>\n <h3>Retention by signup week</h3>\n <text-ui slot=\"description\" color=\"subtle\">% of users still active in week N</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-cohort\" raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n <card-ui>\n <header>\n <h3>Reports</h3>\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n <span slot=\"action\" size=\"sm\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Notifications panel: recent alerts and notifications list.\"\n data-chunk-keywords=\"notifications alerts events feed updates messages\"\n data-chunk-related=\"dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"notification-badges-feed\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Notification center feed card — recent alerts and activity with unread badge-ui indicators per item, segmented filter (all/unread/mentions), and mark-all-read action.\"\n data-chunk-keywords=\"notification center notifications feed activity timeline unread badge badge-ui notification badge alert indicator mark read segmented filter mentions dashboard badges notification-badges center unread\">\n <card-ui>\n <header>\n <h3>Notifications</h3>\n <p slot=\"description\">System and team activity</p>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\" size=\"sm\">\n <segment-ui value=\"all\" text=\"All\"></segment-ui>\n <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n <badge-ui slot=\"action\" text=\"New\" variant=\"accent\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n <badge-ui slot=\"action\" text=\"Mention\" variant=\"warning\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"warning\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n <badge-ui slot=\"action\" text=\"Warning\" variant=\"warning\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"key\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /notifications -->\n </div>\n </section>"
15
+ "html": "<section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"complex\"\n data-chunk-tags-layout=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n <card-ui\n ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"card\">\n <card-ui span=\"3\">\n <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n data-chunk-keywords=\"card header heading description subtitle pattern\">\n <h3>Overview</h3>\n <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n </header>\n <section>\n <col-ui>\n <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n <grid-ui columns=\"1 2@sm\" gap=\"3\">\n <card-ui>\n <section>\n <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n </section>\n </card-ui>\n <card-ui>\n <section>\n <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n </footer>\n </card-ui>\n <card-ui span=\"2\">\n <header>\n <h3>Recent Sales</h3>\n <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n <text-ui strong>+$1,999.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n <text-ui strong>+$299.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n <text-ui strong>+$99.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">will@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"row\">\n <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n <header>\n <h3>Team Members</h3>\n <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Alex Chen\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Alex Chen</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Engineering Lead</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Sarah Miller</text-ui>\n <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Product Designer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"James Park\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>James Park</text-ui>\n <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Backend Engineer</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n <text-ui strong>Maria Lopez</text-ui>\n <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n </row-ui>\n <text-ui color=\"subtle\">Data Analyst</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-quick-actions\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Quick actions card — common shortcut buttons for frequent dashboard tasks.\"\n data-chunk-keywords=\"dashboard quick actions shortcuts buttons frequent tasks\">\n <header><h3>Quick Actions</h3></header>\n <section>\n <action-list-ui>\n <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n </action-list-ui>\n </section>\n </card-ui>\n\n <card-ui data-chunk=\"dashboard-storage-card\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Storage usage card — used / total storage bar with tier breakdown and upgrade CTA.\"\n data-chunk-keywords=\"dashboard storage usage quota bar tier upgrade\">\n <header>\n <h3>Storage</h3>\n <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n </header>\n <section>\n <col-ui gap=\"2\">\n <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n </footer>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n data-chunk-domain=\"navigation\"\n data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n <card-ui>\n <section>\n <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n <tag-ui text=\"Country: United States\" removable></tag-ui>\n <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n <span data-spacer></span>\n <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- Analytics: bar + line side by side -->\n <grid-ui columns=\"1 2@md\" gap=\"4\" data-chunk=\"analytics-chart\" data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Analytics dashboard with bar chart and line chart displayed side by side. Revenue bar chart on the left, sessions trend line chart on the right.\"\n data-chunk-keywords=\"analytics chart bar chart line chart side by side dashboard two column grid revenue sessions trend data visualization bar line analytics-chart\">\n <card-ui>\n <header>\n <h3>Revenue</h3>\n <p slot=\"description\">Monthly revenue breakdown</p>\n </header>\n <section>\n <chart-ui type=\"bar\" x=\"month\" y=\"revenue\" hide-values\n data='[{\"month\":\"Jan\",\"revenue\":3200},{\"month\":\"Feb\",\"revenue\":4100},{\"month\":\"Mar\",\"revenue\":3800},{\"month\":\"Apr\",\"revenue\":5200},{\"month\":\"May\",\"revenue\":4800},{\"month\":\"Jun\",\"revenue\":6100}]'></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Sessions</h3>\n <p slot=\"description\">Daily session trend</p>\n </header>\n <section>\n <chart-ui type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values\n data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n <card-ui\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n <card-ui>\n <header>\n <h3>Top countries</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇺🇸</text-ui>\n <text-ui weight=\"semibold\" grow>United States</text-ui>\n <text-ui>14,320</text-ui>\n <text-ui color=\"subtle\">50.4%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇩🇪</text-ui>\n <text-ui weight=\"semibold\" grow>Germany</text-ui>\n <text-ui>3,892</text-ui>\n <text-ui color=\"subtle\">13.7%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇬🇧</text-ui>\n <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n <text-ui>2,841</text-ui>\n <text-ui color=\"subtle\">10.0%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇯🇵</text-ui>\n <text-ui weight=\"semibold\" grow>Japan</text-ui>\n <text-ui>1,920</text-ui>\n <text-ui color=\"subtle\">6.8%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇨🇦</text-ui>\n <text-ui weight=\"semibold\" grow>Canada</text-ui>\n <text-ui>1,450</text-ui>\n <text-ui color=\"subtle\">5.1%</text-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <span slot=\"action\">\n <segmented-ui value=\"30d\" size=\"sm\">\n <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n </segmented-ui>\n </span>\n </header>\n <section>\n <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Acquisition channels</h3>\n <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n </header>\n <section>\n <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n data-chunk-keywords=\"behavior events user interactions engagement actions\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Top pages table card — page title, views, bounce rate, avg time on page.\"\n data-chunk-keywords=\"dashboard pages table analytics top content views bounce rate\">\n <card-ui>\n <header>\n <h3>Top pages</h3>\n <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <p slot=\"description\">Visit → Sign up → Activate → Convert</p>\n </header>\n <section>\n <col-ui gap=\"3\">\n <row-ui align=\"center\" gap=\"3\">\n <col-ui gap=\"0\" grow>\n <text-ui strong>Visited landing page</text-ui>\n <text-ui color=\"subtle\">28,432 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n </col-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <grid-ui data-chunk=\"dashboard-cohort-retention\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Cohort retention table card — weekly retention heatmap grid showing user cohort activity.\"\n data-chunk-keywords=\"dashboard cohort retention heatmap table analytics users weekly\">\n <card-ui>\n <header>\n <h3>Retention by signup week</h3>\n <text-ui slot=\"description\" color=\"subtle\">% of users still active in week N</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-cohort\" raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n <card-ui>\n <header>\n <h3>Reports</h3>\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Notifications panel: recent alerts and notifications list.\"\n data-chunk-keywords=\"notifications alerts events feed updates messages\"\n data-chunk-related=\"dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"notification-badges-feed\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Notification center feed card — recent alerts and activity with unread badge-ui indicators per item, segmented filter (all/unread/mentions), and mark-all-read action.\"\n data-chunk-keywords=\"notification center notifications feed activity timeline unread badge badge-ui notification badge alert indicator mark read segmented filter mentions dashboard badges notification-badges center unread\">\n <card-ui>\n <header>\n <h3>Notifications</h3>\n <p slot=\"description\">System and team activity</p>\n <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\" size=\"sm\">\n <segment-ui value=\"all\" text=\"All\"></segment-ui>\n <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n <badge-ui slot=\"action\" text=\"New\" variant=\"accent\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n <badge-ui slot=\"action\" text=\"Mention\" variant=\"warning\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"warning\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n <badge-ui slot=\"action\" text=\"Warning\" variant=\"warning\"></badge-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </list-item-ui>\n <list-item-ui>\n <avatar-ui slot=\"icon\" icon=\"key\" size=\"sm\"></avatar-ui>\n <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n <text-ui weight=\"semibold\">API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui slot=\"description\" color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /notifications -->\n </div>\n </section>"
16
16
  }
17
17
  ],
18
18
  "nested": [
@@ -65,7 +65,7 @@
65
65
  "drawer-report"
66
66
  ],
67
67
  "attrs": {},
68
- "html": "<admin-page>\n <admin-page-header data-chunk-slot=\"page-header\">\n <header><!-- nested: dashboard-page-header --></header>\n </admin-page-header>\n\n <admin-page-body data-chunk-slot=\"page-content\">\n <section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\"><!-- nested: dashboard-overview-panel --></col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden><!-- nested: dashboard-audience-panel --></col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden><!-- nested: dashboard-acquisition-panel --></col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden><!-- nested: dashboard-behavior-panel --></col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden><!-- nested: dashboard-conversion-panel --></col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden><!-- nested: dashboard-reports-panel --></col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden><!-- nested: dashboard-notifications-panel --></col-ui>\n <!-- /notifications -->\n </div>\n </section>\n </admin-page-body>\n</admin-page>\n\n<!-- ═══════════════ STANDALONE GALLERY CHUNKS ═══════════════ -->\n<admin-page-body>\n<section>\n\n<!-- period-comparison -->\n<grid-ui columns=\"1 3@md\" gap=\"4\"><!-- nested: period-comparison --></grid-ui>\n\n<!-- audit-log -->\n<card-ui><!-- nested: audit-log --></card-ui>\n\n<!-- status-dashboard -->\n<card-ui><!-- nested: status-dashboard --></card-ui>\n\n<!-- revenue-heatmap -->\n<card-ui><!-- nested: revenue-heatmap --></card-ui>\n\n<!-- integrations-grid -->\n<card-ui><!-- nested: integrations-grid --></card-ui>\n\n<!-- billing-overview -->\n<card-ui><!-- nested: billing-overview --></card-ui>\n\n<!-- code-snippet -->\n<card-ui><!-- nested: code-snippet --></card-ui>\n\n<!-- pricing-page -->\n<grid-ui columns=\"1 3@md\" gap=\"4\"><!-- nested: pricing-tiers --></grid-ui>\n\n<!-- product-tour -->\n<card-ui><!-- nested: product-tour --></card-ui>\n\n<!-- sidebar-nav -->\n<nav-ui\n style=\"max-width:220px\"><!-- nested: sidebar-nav --></nav-ui>\n\n<!-- invite-members -->\n<card-ui><!-- nested: invite-members --></card-ui>\n\n<!-- contact-form -->\n<card-ui><!-- nested: contact-form --></card-ui>\n\n<!-- blog-post-card -->\n<card-ui><!-- nested: blog-post-card --></card-ui>\n\n<!-- activity-feed -->\n<card-ui><!-- nested: activity-feed --></card-ui>\n\n<!-- role-management -->\n<card-ui><!-- nested: role-management --></card-ui>\n\n<!-- webhook-config -->\n<card-ui><!-- nested: webhook-config --></card-ui>\n\n<!-- team-members (used for team-members gallery prompt) -->\n<card-ui><!-- nested: team-members-list --></card-ui>\n\n</section>\n</admin-page-body>\n\n<!-- ═══════════════ TRANSACTION DETAIL DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-transaction\" side=\"right\" size=\"md\"><!-- nested: drawer-transaction --></drawer-ui>\n\n<!-- ═══════════════ REPORT CONFIG DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-report\" side=\"right\" size=\"md\"><!-- nested: drawer-report --></drawer-ui>\n",
68
+ "html": "<admin-page>\n <admin-page-header data-chunk-slot=\"page-header\">\n <header><!-- nested: dashboard-page-header --></header>\n </admin-page-header>\n\n <admin-page-body data-chunk-slot=\"page-content\">\n <section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\"><!-- nested: dashboard-overview-panel --></col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden><!-- nested: dashboard-audience-panel --></col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden><!-- nested: dashboard-acquisition-panel --></col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden><!-- nested: dashboard-behavior-panel --></col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden><!-- nested: dashboard-conversion-panel --></col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden><!-- nested: dashboard-reports-panel --></col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden><!-- nested: dashboard-notifications-panel --></col-ui>\n <!-- /notifications -->\n </div>\n </section>\n </admin-page-body>\n</admin-page>\n\n<!-- ═══════════════ STANDALONE GALLERY CHUNKS ═══════════════ -->\n<admin-page-body>\n<section>\n\n<!-- period-comparison -->\n<grid-ui columns=\"1 3@lg\" gap=\"4\"><!-- nested: period-comparison --></grid-ui>\n\n<!-- audit-log -->\n<card-ui><!-- nested: audit-log --></card-ui>\n\n<!-- status-dashboard -->\n<card-ui><!-- nested: status-dashboard --></card-ui>\n\n<!-- revenue-heatmap -->\n<card-ui><!-- nested: revenue-heatmap --></card-ui>\n\n<!-- integrations-grid -->\n<card-ui><!-- nested: integrations-grid --></card-ui>\n\n<!-- billing-overview -->\n<card-ui><!-- nested: billing-overview --></card-ui>\n\n<!-- code-snippet -->\n<card-ui><!-- nested: code-snippet --></card-ui>\n\n<!-- pricing-page -->\n<grid-ui columns=\"1 3@lg\" gap=\"4\"><!-- nested: pricing-tiers --></grid-ui>\n\n<!-- product-tour -->\n<card-ui><!-- nested: product-tour --></card-ui>\n\n<!-- sidebar-nav -->\n<nav-ui\n style=\"max-width:220px\"><!-- nested: sidebar-nav --></nav-ui>\n\n<!-- invite-members -->\n<card-ui><!-- nested: invite-members --></card-ui>\n\n<!-- contact-form -->\n<card-ui><!-- nested: contact-form --></card-ui>\n\n<!-- blog-post-card -->\n<card-ui><!-- nested: blog-post-card --></card-ui>\n\n<!-- activity-feed -->\n<card-ui><!-- nested: activity-feed --></card-ui>\n\n<!-- role-management -->\n<card-ui><!-- nested: role-management --></card-ui>\n\n<!-- webhook-config -->\n<card-ui><!-- nested: webhook-config --></card-ui>\n\n<!-- team-members (used for team-members gallery prompt) -->\n<card-ui><!-- nested: team-members-list --></card-ui>\n\n</section>\n</admin-page-body>\n\n<!-- ═══════════════ TRANSACTION DETAIL DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-transaction\" side=\"right\" size=\"md\"><!-- nested: drawer-transaction --></drawer-ui>\n\n<!-- ═══════════════ REPORT CONFIG DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-report\" side=\"right\" size=\"md\"><!-- nested: drawer-report --></drawer-ui>\n",
69
69
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
70
70
  "metadata": {
71
71
  "domain": "dashboard",
@@ -92,7 +92,7 @@
92
92
  "layout": "page"
93
93
  }
94
94
  },
95
- "captured_at": "2026-05-30T16:01:25.906Z",
95
+ "captured_at": "2026-06-01T03:32:11.245Z",
96
96
  "template": [
97
97
  {
98
98
  "id": "root",
package/chunks/dashboard-audience-kpis.json CHANGED
@@ -6,10 +6,10 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {
9
- "columns": "2 4@md",
9
+ "columns": "2 4@lg",
10
10
  "gap": "4"
11
11
  },
12
- "html": "<grid-ui columns=\"2 4@md\" gap=\"4\">\n <card-ui\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>",
12
+ "html": "<grid-ui columns=\"2 4@lg\" gap=\"4\">\n <card-ui\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>",
13
13
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
14
14
  "metadata": {
15
15
  "domain": "dashboard",
@@ -27,7 +27,7 @@
27
27
  "breakpoint"
28
28
  ]
29
29
  },
30
- "captured_at": "2026-05-30T16:01:25.906Z",
30
+ "captured_at": "2026-06-01T03:32:11.245Z",
31
31
  "template": [
32
32
  {
33
33
  "id": "stat",
@@ -152,7 +152,7 @@
152
152
  {
153
153
  "id": "root",
154
154
  "component": "Grid",
155
- "columns": "2 4@md",
155
+ "columns": "2 4@lg",
156
156
  "gap": "4",
157
157
  "children": [
158
158
  "card",
package/chunks/dashboard-audience-panel.json CHANGED
@@ -15,7 +15,7 @@
15
15
  "gap": "4",
16
16
  "hidden": ""
17
17
  },
18
- "html": "<col-ui data-tab-panel=\"audience\" gap=\"4\" hidden>\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui><!-- nested: dashboard-filter-bar --></grid-ui>\n\n <!-- Analytics: bar + line side by side -->\n <grid-ui columns=\"1 2@md\" gap=\"4\"><!-- nested: analytics-chart --></grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"2 4@md\" gap=\"4\"><!-- nested: dashboard-audience-kpis --></grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui><!-- nested: dashboard-country-list --></grid-ui>\n </col-ui>",
18
+ "html": "<col-ui data-tab-panel=\"audience\" gap=\"4\" hidden>\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui><!-- nested: dashboard-filter-bar --></grid-ui>\n\n <!-- Analytics: bar + line side by side -->\n <grid-ui columns=\"1 2@md\" gap=\"4\"><!-- nested: analytics-chart --></grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\"><!-- nested: dashboard-audience-kpis --></grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui><!-- nested: dashboard-country-list --></grid-ui>\n </col-ui>",
19
19
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
20
20
  "metadata": {
21
21
  "domain": "dashboard",
@@ -39,7 +39,7 @@
39
39
  "layout": "panel"
40
40
  }
41
41
  },
42
- "captured_at": "2026-05-30T16:01:25.906Z",
42
+ "captured_at": "2026-06-01T03:32:11.245Z",
43
43
  "template": [
44
44
  {
45
45
  "id": "text",
@@ -378,7 +378,7 @@
378
378
  {
379
379
  "id": "grid-6",
380
380
  "component": "Grid",
381
- "columns": "2 4@md",
381
+ "columns": "2 4@lg",
382
382
  "gap": "4",
383
383
  "children": [
384
384
  "card-4",
@@ -390,7 +390,7 @@
390
390
  {
391
391
  "id": "grid-5",
392
392
  "component": "Grid",
393
- "columns": "2 4@md",
393
+ "columns": "2 4@lg",
394
394
  "gap": "4",
395
395
  "children": [
396
396
  "grid-6"
package/chunks/dashboard-behavior-panel.json CHANGED
@@ -35,7 +35,7 @@
35
35
  "layout": "panel"
36
36
  }
37
37
  },
38
- "captured_at": "2026-05-30T16:01:25.906Z",
38
+ "captured_at": "2026-06-01T03:32:11.245Z",
39
39
  "template": [
40
40
  {
41
41
  "id": "text",
package/chunks/dashboard-chart-recent.json CHANGED
@@ -51,7 +51,7 @@
51
51
  "layout": "card"
52
52
  }
53
53
  },
54
- "captured_at": "2026-05-30T16:01:25.906Z",
54
+ "captured_at": "2026-06-01T03:32:11.245Z",
55
55
  "template": [
56
56
  {
57
57
  "id": "text",
package/chunks/dashboard-cohort-retention.json CHANGED
@@ -22,7 +22,7 @@
22
22
  "weekly"
23
23
  ]
24
24
  },
25
- "captured_at": "2026-05-30T16:01:25.906Z",
25
+ "captured_at": "2026-06-01T03:32:11.245Z",
26
26
  "template": [
27
27
  {
28
28
  "id": "text",
package/chunks/dashboard-conversion-panel.json CHANGED
@@ -36,7 +36,7 @@
36
36
  "layout": "panel"
37
37
  }
38
38
  },
39
- "captured_at": "2026-05-30T16:01:25.906Z",
39
+ "captured_at": "2026-06-01T03:32:11.245Z",
40
40
  "template": [
41
41
  {
42
42
  "id": "text",
package/chunks/dashboard-country-list.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "pageviews"
22
22
  ]
23
23
  },
24
- "captured_at": "2026-05-30T16:01:25.906Z",
24
+ "captured_at": "2026-06-01T03:32:11.245Z",
25
25
  "template": [
26
26
  {
27
27
  "id": "text",
package/chunks/dashboard-filter-bar.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "toolbar-icons"
24
24
  ]
25
25
  },
26
- "captured_at": "2026-05-30T16:01:25.906Z",
26
+ "captured_at": "2026-06-01T03:32:11.245Z",
27
27
  "template": [
28
28
  {
29
29
  "id": "text",
package/chunks/dashboard-funnel.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "customer-journey"
24
24
  ]
25
25
  },
26
- "captured_at": "2026-05-30T16:01:25.906Z",
26
+ "captured_at": "2026-06-01T03:32:11.245Z",
27
27
  "template": [
28
28
  {
29
29
  "id": "text",
package/chunks/dashboard-notifications-panel.json CHANGED
@@ -33,7 +33,7 @@
33
33
  "layout": "panel"
34
34
  }
35
35
  },
36
- "captured_at": "2026-05-30T16:01:25.906Z",
36
+ "captured_at": "2026-06-01T03:32:11.245Z",
37
37
  "template": [
38
38
  {
39
39
  "id": "text",
package/chunks/dashboard-overview-panel.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "data-tab-panel": "overview",
20
20
  "gap": "4"
21
21
  },
22
- "html": "<col-ui data-tab-panel=\"overview\" gap=\"4\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\"><!-- nested: stat-cards-kpi-dashboard --></grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"1 5@md\" gap=\"4\"><!-- nested: dashboard-chart-recent --></grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\"><!-- nested: analytics-sparklines-dashboard --></grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui><!-- nested: dashboard-transactions-table --></grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"1 3@md\" gap=\"4\"><!-- nested: dashboard-team-actions-storage --></grid-ui>\n </col-ui>",
22
+ "html": "<col-ui data-tab-panel=\"overview\" gap=\"4\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\"><!-- nested: stat-cards-kpi-dashboard --></grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"1 5@md\" gap=\"4\"><!-- nested: dashboard-chart-recent --></grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"2 4@lg\" gap=\"4\"><!-- nested: analytics-sparklines-dashboard --></grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui><!-- nested: dashboard-transactions-table --></grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"1 3@lg\" gap=\"4\"><!-- nested: dashboard-team-actions-storage --></grid-ui>\n </col-ui>",
23
23
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
24
24
  "metadata": {
25
25
  "domain": "dashboard",
@@ -47,7 +47,7 @@
47
47
  "layout": "panel"
48
48
  }
49
49
  },
50
- "captured_at": "2026-05-30T16:01:25.906Z",
50
+ "captured_at": "2026-06-01T03:32:11.245Z",
51
51
  "template": [
52
52
  {
53
53
  "id": "stat",
@@ -172,7 +172,7 @@
172
172
  {
173
173
  "id": "grid-2",
174
174
  "component": "Grid",
175
- "columns": "2 4@md",
175
+ "columns": "2 4@lg",
176
176
  "gap": "4",
177
177
  "children": [
178
178
  "card",
@@ -184,7 +184,7 @@
184
184
  {
185
185
  "id": "grid",
186
186
  "component": "Grid",
187
- "columns": "2 4@md",
187
+ "columns": "2 4@lg",
188
188
  "gap": "4",
189
189
  "children": [
190
190
  "grid-2"
@@ -915,7 +915,7 @@
915
915
  {
916
916
  "id": "grid-7",
917
917
  "component": "Grid",
918
- "columns": "2 4@md",
918
+ "columns": "2 4@lg",
919
919
  "gap": "4",
920
920
  "children": [
921
921
  "card-9",
@@ -927,7 +927,7 @@
927
927
  {
928
928
  "id": "grid-6",
929
929
  "component": "Grid",
930
- "columns": "2 4@md",
930
+ "columns": "2 4@lg",
931
931
  "gap": "4",
932
932
  "children": [
933
933
  "grid-7"
@@ -987,7 +987,6 @@
987
987
  "component": "Text",
988
988
  "variant": "body",
989
989
  "slot": "action",
990
- "size": "sm",
991
990
  "children": [
992
991
  "tx-state-menu"
993
992
  ]
@@ -1598,7 +1597,7 @@
1598
1597
  {
1599
1598
  "id": "grid-11",
1600
1599
  "component": "Grid",
1601
- "columns": "1 3@md",
1600
+ "columns": "1 3@lg",
1602
1601
  "gap": "4",
1603
1602
  "children": [
1604
1603
  "card-14",
@@ -1609,7 +1608,7 @@
1609
1608
  {
1610
1609
  "id": "grid-10",
1611
1610
  "component": "Grid",
1612
- "columns": "1 3@md",
1611
+ "columns": "1 3@lg",
1613
1612
  "gap": "4",
1614
1613
  "children": [
1615
1614
  "grid-11"
package/chunks/dashboard-page-header.json CHANGED
@@ -31,7 +31,7 @@
31
31
  "layout": "header"
32
32
  }
33
33
  },
34
- "captured_at": "2026-05-30T16:01:25.906Z",
34
+ "captured_at": "2026-06-01T03:32:11.245Z",
35
35
  "template": [
36
36
  {
37
37
  "id": "text",
package/chunks/dashboard-pages-table.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "rate"
24
24
  ]
25
25
  },
26
- "captured_at": "2026-05-30T16:01:25.906Z",
26
+ "captured_at": "2026-06-01T03:32:11.245Z",
27
27
  "template": [
28
28
  {
29
29
  "id": "text",
package/chunks/dashboard-quick-actions.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "tasks"
22
22
  ]
23
23
  },
24
- "captured_at": "2026-05-30T16:01:25.906Z",
24
+ "captured_at": "2026-06-01T03:32:11.245Z",
25
25
  "template": [
26
26
  {
27
27
  "id": "text",
package/chunks/dashboard-reports-panel.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "layout": "panel"
35
35
  }
36
36
  },
37
- "captured_at": "2026-05-30T16:01:25.906Z",
37
+ "captured_at": "2026-06-01T03:32:11.245Z",
38
38
  "template": [
39
39
  {
40
40
  "id": "text",
@@ -96,7 +96,6 @@
96
96
  "component": "Text",
97
97
  "variant": "body",
98
98
  "slot": "action",
99
- "size": "sm",
100
99
  "children": [
101
100
  "dash-reports-subtabs",
102
101
  "button"
package/chunks/dashboard-reports-table.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "slots": [],
7
7
  "nested": [],
8
8
  "attrs": {},
9
- "html": "<grid-ui>\n <card-ui>\n <header>\n <h3>Reports</h3>\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n <span slot=\"action\" size=\"sm\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>",
9
+ "html": "<grid-ui>\n <card-ui>\n <header>\n <h3>Reports</h3>\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>",
10
10
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
11
11
  "metadata": {
12
12
  "domain": "data",
@@ -22,7 +22,7 @@
22
22
  "actions"
23
23
  ]
24
24
  },
25
- "captured_at": "2026-05-30T16:01:25.906Z",
25
+ "captured_at": "2026-06-01T03:32:11.245Z",
26
26
  "template": [
27
27
  {
28
28
  "id": "text",
@@ -84,7 +84,6 @@
84
84
  "component": "Text",
85
85
  "variant": "body",
86
86
  "slot": "action",
87
- "size": "sm",
88
87
  "children": [
89
88
  "dash-reports-subtabs",
90
89
  "button"
package/chunks/dashboard-storage-card.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "upgrade"
22
22
  ]
23
23
  },
24
- "captured_at": "2026-05-30T16:01:25.906Z",
24
+ "captured_at": "2026-06-01T03:32:11.245Z",
25
25
  "template": [
26
26
  {
27
27
  "id": "text",