@adia-ai/a2ui-corpus 0.0.1 → 0.0.3

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 (733) hide show
  1. package/CHANGELOG.md +145 -20
  2. package/README.md +2 -2
  3. package/catalog-a2ui_0_9.json +804 -41
  4. package/chunks/_index.json +8056 -0
  5. package/chunks/accordion-basic.json +15 -0
  6. package/chunks/accordion-combinations.json +15 -0
  7. package/chunks/accordion-edge-cases.json +15 -0
  8. package/chunks/accordion-multiple.json +15 -0
  9. package/chunks/accordion-open.json +15 -0
  10. package/chunks/action-list-basic.json +15 -0
  11. package/chunks/action-list-combo.json +15 -0
  12. package/chunks/action-list-danger.json +15 -0
  13. package/chunks/action-list-disabled.json +15 -0
  14. package/chunks/action-list-edge.json +15 -0
  15. package/chunks/action-list-icon.json +15 -0
  16. package/chunks/agent-artifact-code.json +15 -0
  17. package/chunks/agent-artifact-tone.json +15 -0
  18. package/chunks/agent-feedback-bar-basic.json +15 -0
  19. package/chunks/agent-feedback-bar-save.json +15 -0
  20. package/chunks/agent-questions-multi.json +15 -0
  21. package/chunks/agent-questions-single.json +15 -0
  22. package/chunks/agent-reasoning-iterations.json +15 -0
  23. package/chunks/agent-reasoning-plan-and-thoughts.json +15 -0
  24. package/chunks/agent-reasoning-steps-only.json +15 -0
  25. package/chunks/agent-suggestions-basic.json +15 -0
  26. package/chunks/agent-suggestions-ghost.json +15 -0
  27. package/chunks/agent-suggestions-icons.json +15 -0
  28. package/chunks/agent-trace-feedback.json +15 -0
  29. package/chunks/agent-trace-metrics.json +15 -0
  30. package/chunks/agent-trace-pills.json +15 -0
  31. package/chunks/alert-closable.json +15 -0
  32. package/chunks/alert-combinations.json +15 -0
  33. package/chunks/alert-edge-cases.json +15 -0
  34. package/chunks/alert-icon.json +15 -0
  35. package/chunks/alert-text.json +15 -0
  36. package/chunks/alert-variant.json +15 -0
  37. package/chunks/auth-account-deleted-actions.json +15 -0
  38. package/chunks/auth-account-deleted.json +18 -0
  39. package/chunks/auth-card-content.json +247 -0
  40. package/chunks/auth-card-header.json +192 -0
  41. package/chunks/auth-email-entry.json +16 -0
  42. package/chunks/auth-email-verify-confirm.json +16 -0
  43. package/chunks/auth-email-verify.json +18 -0
  44. package/chunks/auth-forbidden-actions.json +15 -0
  45. package/chunks/auth-forbidden.json +18 -0
  46. package/chunks/auth-invite-actions.json +15 -0
  47. package/chunks/auth-invite-team-card.json +12 -0
  48. package/chunks/auth-link-expired-form.json +16 -0
  49. package/chunks/auth-link-expired.json +18 -0
  50. package/chunks/auth-locked-account.json +18 -0
  51. package/chunks/auth-locked-recovery-options.json +14 -0
  52. package/chunks/auth-mfa-enrollment-submit.json +16 -0
  53. package/chunks/auth-mfa-enrollment.json +18 -0
  54. package/chunks/auth-mfa-fallback-actions.json +14 -0
  55. package/chunks/auth-mfa-recovery.json +14 -0
  56. package/chunks/auth-new-password-form.json +14 -0
  57. package/chunks/auth-new-password.json +18 -0
  58. package/chunks/auth-oauth-fallback-actions.json +15 -0
  59. package/chunks/auth-oauth-interstitial.json +17 -0
  60. package/chunks/auth-password-challenge.json +14 -0
  61. package/chunks/auth-password-reset-form.json +16 -0
  62. package/chunks/auth-password-reset.json +18 -0
  63. package/chunks/auth-profile-form.json +14 -0
  64. package/chunks/auth-profile-setup.json +18 -0
  65. package/chunks/auth-reset-sent.json +17 -0
  66. package/chunks/auth-session-expired-actions.json +15 -0
  67. package/chunks/auth-session-expired.json +18 -0
  68. package/chunks/auth-signin-card-email.json +19 -0
  69. package/chunks/auth-signin-card-magic-link.json +14 -0
  70. package/chunks/auth-signin-card-mfa.json +18 -0
  71. package/chunks/auth-signin-card-otp.json +14 -0
  72. package/chunks/auth-signin-card-password.json +18 -0
  73. package/chunks/auth-signin-card-recovery.json +18 -0
  74. package/chunks/auth-signout-actions.json +15 -0
  75. package/chunks/auth-signout.json +18 -0
  76. package/chunks/auth-signup-email-entry.json +16 -0
  77. package/chunks/auth-signup-entry.json +19 -0
  78. package/chunks/auth-signup-social-auths.json +14 -0
  79. package/chunks/auth-signup-verify.json +17 -0
  80. package/chunks/auth-social-auths.json +14 -0
  81. package/chunks/auth-sso-providers.json +15 -0
  82. package/chunks/auth-sso-required.json +18 -0
  83. package/chunks/auth-team-invite.json +19 -0
  84. package/chunks/avatar-avatar-group.json +15 -0
  85. package/chunks/avatar-shape.json +15 -0
  86. package/chunks/avatar-size.json +15 -0
  87. package/chunks/avatar-src.json +15 -0
  88. package/chunks/avatar-text.json +15 -0
  89. package/chunks/badge-combinations.json +15 -0
  90. package/chunks/badge-edge-cases.json +15 -0
  91. package/chunks/badge-size.json +15 -0
  92. package/chunks/badge-text.json +15 -0
  93. package/chunks/badge-variant.json +15 -0
  94. package/chunks/block-combo.json +15 -0
  95. package/chunks/block-edge.json +15 -0
  96. package/chunks/block-margin.json +15 -0
  97. package/chunks/block-padding.json +15 -0
  98. package/chunks/breadcrumb-basic.json +15 -0
  99. package/chunks/breadcrumb-combo.json +15 -0
  100. package/chunks/breadcrumb-edge.json +15 -0
  101. package/chunks/breadcrumb-links.json +15 -0
  102. package/chunks/breadcrumb-long.json +15 -0
  103. package/chunks/breadcrumb-separator.json +15 -0
  104. package/chunks/bulk-action-toolbar-swap.json +15 -0
  105. package/chunks/button-block.json +15 -0
  106. package/chunks/button-combinations.json +15 -0
  107. package/chunks/button-disabled.json +15 -0
  108. package/chunks/button-edge-cases.json +15 -0
  109. package/chunks/button-icon.json +15 -0
  110. package/chunks/button-size.json +15 -0
  111. package/chunks/button-text-icon.json +15 -0
  112. package/chunks/button-text.json +15 -0
  113. package/chunks/button-trailing.json +15 -0
  114. package/chunks/button-type.json +15 -0
  115. package/chunks/button-variant-solid.json +15 -0
  116. package/chunks/button-variant.json +15 -0
  117. package/chunks/calendar-picker-default.json +15 -0
  118. package/chunks/calendar-picker-disabled.json +15 -0
  119. package/chunks/calendar-picker-format.json +15 -0
  120. package/chunks/calendar-picker-label.json +15 -0
  121. package/chunks/calendar-picker-max.json +15 -0
  122. package/chunks/calendar-picker-min-max.json +15 -0
  123. package/chunks/calendar-picker-min.json +15 -0
  124. package/chunks/calendar-picker-name.json +15 -0
  125. package/chunks/calendar-picker-open.json +15 -0
  126. package/chunks/calendar-picker-placeholder.json +15 -0
  127. package/chunks/calendar-picker-required.json +15 -0
  128. package/chunks/calendar-picker-value.json +15 -0
  129. package/chunks/canvas-basic.json +15 -0
  130. package/chunks/canvas-history.json +15 -0
  131. package/chunks/canvas-theme.json +15 -0
  132. package/chunks/card-elevation.json +15 -0
  133. package/chunks/card-header-body-footer.json +15 -0
  134. package/chunks/card-raw.json +15 -0
  135. package/chunks/card-size-lg.json +15 -0
  136. package/chunks/card-size-md.json +15 -0
  137. package/chunks/card-size.json +15 -0
  138. package/chunks/card-variant-filled.json +15 -0
  139. package/chunks/card-variant-ghost.json +15 -0
  140. package/chunks/card-variant-outlined.json +15 -0
  141. package/chunks/card-variant.json +15 -0
  142. package/chunks/chart-average.json +15 -0
  143. package/chunks/chart-color.json +15 -0
  144. package/chunks/chart-data-stream.json +15 -0
  145. package/chunks/chart-deprecated.json +15 -0
  146. package/chunks/chart-format.json +15 -0
  147. package/chunks/chart-hideGrid.json +15 -0
  148. package/chunks/chart-hideValues.json +15 -0
  149. package/chunks/chart-in-card-chart-plus-breakdown.json +15 -0
  150. package/chunks/chart-in-card-chart-plus-stat.json +15 -0
  151. package/chunks/chart-in-card-chart-with-filter-pills.json +15 -0
  152. package/chunks/chart-in-card-full-chart.json +15 -0
  153. package/chunks/chart-in-card-sparkline-tile.json +15 -0
  154. package/chunks/chart-in-card-stat-with-sparkline.json +15 -0
  155. package/chunks/chart-in-card-trend-footer.json +15 -0
  156. package/chunks/chart-legend-for.json +15 -0
  157. package/chunks/chart-legend-on-toggle.json +15 -0
  158. package/chunks/chart-legend-position.json +15 -0
  159. package/chunks/chart-legend-shape.json +15 -0
  160. package/chunks/chart-legend-static.json +15 -0
  161. package/chunks/chart-radius.json +15 -0
  162. package/chunks/chart-size.json +15 -0
  163. package/chunks/chart-sizing.json +15 -0
  164. package/chunks/chart-smooth.json +15 -0
  165. package/chunks/chart-states.json +15 -0
  166. package/chunks/chart-title.json +15 -0
  167. package/chunks/chart-type.json +15 -0
  168. package/chunks/chat-basic.json +15 -0
  169. package/chunks/chat-streaming.json +15 -0
  170. package/chunks/chat-with-input.json +15 -0
  171. package/chunks/check-checked.json +15 -0
  172. package/chunks/check-combinations.json +15 -0
  173. package/chunks/check-disabled.json +15 -0
  174. package/chunks/check-edge-cases.json +15 -0
  175. package/chunks/check-indeterminate.json +15 -0
  176. package/chunks/check-label.json +15 -0
  177. package/chunks/check-size.json +15 -0
  178. package/chunks/code-bare.json +15 -0
  179. package/chunks/code-combo.json +15 -0
  180. package/chunks/code-disabled-readonly.json +15 -0
  181. package/chunks/code-edge.json +15 -0
  182. package/chunks/code-editable.json +15 -0
  183. package/chunks/code-form-association.json +15 -0
  184. package/chunks/code-inline.json +15 -0
  185. package/chunks/code-language.json +15 -0
  186. package/chunks/code-line-numbers.json +15 -0
  187. package/chunks/code-lint-gutter.json +15 -0
  188. package/chunks/code-long-code.json +15 -0
  189. package/chunks/code-no-language.json +15 -0
  190. package/chunks/color-picker-default.json +15 -0
  191. package/chunks/color-picker-disabled.json +15 -0
  192. package/chunks/color-picker-format.json +15 -0
  193. package/chunks/color-picker-name.json +15 -0
  194. package/chunks/color-picker-value.json +15 -0
  195. package/chunks/command-combo.json +15 -0
  196. package/chunks/command-edge.json +15 -0
  197. package/chunks/command-grouped.json +15 -0
  198. package/chunks/command-inline.json +15 -0
  199. package/chunks/command-open.json +15 -0
  200. package/chunks/command-placeholder.json +15 -0
  201. package/chunks/command-shortcuts.json +15 -0
  202. package/chunks/commerce-pricing-tiers.json +16 -0
  203. package/chunks/conversion-funnel-4-step-funnel.json +15 -0
  204. package/chunks/conversion-funnel-wide-summary.json +15 -0
  205. package/chunks/conversion-funnel-with-segment-compare.json +15 -0
  206. package/chunks/dashboard-acquisition-panel.json +17 -0
  207. package/chunks/dashboard-admin-page.json +50 -0
  208. package/chunks/dashboard-audience-kpis.json +15 -0
  209. package/chunks/dashboard-audience-panel.json +19 -0
  210. package/chunks/dashboard-behavior-panel.json +17 -0
  211. package/chunks/dashboard-chart-recent.json +15 -0
  212. package/chunks/dashboard-cohort-retention.json +12 -0
  213. package/chunks/dashboard-conversion-panel.json +18 -0
  214. package/chunks/dashboard-country-list.json +12 -0
  215. package/chunks/dashboard-filter-bar.json +12 -0
  216. package/chunks/dashboard-funnel.json +12 -0
  217. package/chunks/dashboard-kpi-grid.json +15 -0
  218. package/chunks/dashboard-notifications-feed.json +12 -0
  219. package/chunks/dashboard-notifications-panel.json +17 -0
  220. package/chunks/dashboard-overview-panel.json +23 -0
  221. package/chunks/dashboard-page-header.json +14 -0
  222. package/chunks/dashboard-pages-table.json +12 -0
  223. package/chunks/dashboard-quick-actions.json +12 -0
  224. package/chunks/dashboard-reports-panel.json +17 -0
  225. package/chunks/dashboard-reports-table.json +12 -0
  226. package/chunks/dashboard-spark-cards.json +15 -0
  227. package/chunks/dashboard-storage-card.json +12 -0
  228. package/chunks/dashboard-tabs.json +14 -0
  229. package/chunks/dashboard-team-actions-storage.json +19 -0
  230. package/chunks/dashboard-team-list.json +12 -0
  231. package/chunks/dashboard-traffic-channels.json +15 -0
  232. package/chunks/dashboard-transactions-table.json +12 -0
  233. package/chunks/description-list-align.json +15 -0
  234. package/chunks/description-list-inline.json +15 -0
  235. package/chunks/description-list-items.json +15 -0
  236. package/chunks/description-list-layout.json +15 -0
  237. package/chunks/description-list-programmatic.json +15 -0
  238. package/chunks/description-list-stacked.json +15 -0
  239. package/chunks/divider-combo.json +15 -0
  240. package/chunks/divider-edge.json +15 -0
  241. package/chunks/divider-horizontal.json +15 -0
  242. package/chunks/divider-label.json +15 -0
  243. package/chunks/divider-vertical-label.json +15 -0
  244. package/chunks/divider-vertical.json +15 -0
  245. package/chunks/drawer-2fa-key.json +15 -0
  246. package/chunks/drawer-2fa-sms.json +15 -0
  247. package/chunks/drawer-2fa-totp.json +15 -0
  248. package/chunks/drawer-cancel-sub.json +15 -0
  249. package/chunks/drawer-change-plan.json +15 -0
  250. package/chunks/drawer-custom-roles.json +15 -0
  251. package/chunks/drawer-data-start.json +15 -0
  252. package/chunks/drawer-delete-account.json +15 -0
  253. package/chunks/drawer-delete-workspace.json +15 -0
  254. package/chunks/drawer-discord.json +15 -0
  255. package/chunks/drawer-edge-cases.json +15 -0
  256. package/chunks/drawer-figma.json +15 -0
  257. package/chunks/drawer-first-dashboard.json +15 -0
  258. package/chunks/drawer-footer.json +15 -0
  259. package/chunks/drawer-gcal.json +15 -0
  260. package/chunks/drawer-github.json +15 -0
  261. package/chunks/drawer-header-grid.json +15 -0
  262. package/chunks/drawer-invite.json +15 -0
  263. package/chunks/drawer-multi-section.json +15 -0
  264. package/chunks/drawer-open.json +15 -0
  265. package/chunks/drawer-payment-method.json +15 -0
  266. package/chunks/drawer-permanent.json +15 -0
  267. package/chunks/drawer-report.json +15 -0
  268. package/chunks/drawer-revoke-session.json +15 -0
  269. package/chunks/drawer-role.json +15 -0
  270. package/chunks/drawer-side.json +15 -0
  271. package/chunks/drawer-size.json +15 -0
  272. package/chunks/drawer-slack.json +15 -0
  273. package/chunks/drawer-smtp.json +15 -0
  274. package/chunks/drawer-source.json +15 -0
  275. package/chunks/drawer-text.json +15 -0
  276. package/chunks/drawer-transaction.json +15 -0
  277. package/chunks/embed-aspect.json +15 -0
  278. package/chunks/embed-default.json +15 -0
  279. package/chunks/embed-height.json +15 -0
  280. package/chunks/embed-src.json +15 -0
  281. package/chunks/embed-width.json +15 -0
  282. package/chunks/empty-state-action.json +15 -0
  283. package/chunks/empty-state-basic.json +15 -0
  284. package/chunks/empty-state-description.json +15 -0
  285. package/chunks/empty-state-error.json +15 -0
  286. package/chunks/empty-state-heading.json +15 -0
  287. package/chunks/empty-state-icon.json +15 -0
  288. package/chunks/error-404-actions.json +15 -0
  289. package/chunks/error-404.json +18 -0
  290. package/chunks/error-500-actions.json +15 -0
  291. package/chunks/error-500.json +18 -0
  292. package/chunks/error-maintenance-actions.json +15 -0
  293. package/chunks/error-maintenance.json +18 -0
  294. package/chunks/field-controls.json +15 -0
  295. package/chunks/field-default.json +15 -0
  296. package/chunks/field-error.json +15 -0
  297. package/chunks/field-hint.json +15 -0
  298. package/chunks/field-inline.json +15 -0
  299. package/chunks/field-no-label.json +15 -0
  300. package/chunks/field-required.json +15 -0
  301. package/chunks/filter-bar-active-filters.json +15 -0
  302. package/chunks/filter-bar-filter-bar-with-table.json +15 -0
  303. package/chunks/filter-bar-saved-views.json +15 -0
  304. package/chunks/form-drawer-edit-form.json +15 -0
  305. package/chunks/form-drawer-simple-form.json +15 -0
  306. package/chunks/form-drawer-tall-form.json +15 -0
  307. package/chunks/genui-feed-message.json +14 -0
  308. package/chunks/heatmap-data-stream.json +15 -0
  309. package/chunks/heatmap-day-grid.json +15 -0
  310. package/chunks/heatmap-matrix.json +15 -0
  311. package/chunks/icon-combinations.json +15 -0
  312. package/chunks/icon-edge-cases.json +15 -0
  313. package/chunks/icon-label.json +15 -0
  314. package/chunks/icon-name.json +15 -0
  315. package/chunks/icon-size.json +15 -0
  316. package/chunks/image-alt.json +15 -0
  317. package/chunks/image-default.json +15 -0
  318. package/chunks/image-fallback.json +15 -0
  319. package/chunks/image-fit.json +15 -0
  320. package/chunks/image-height.json +15 -0
  321. package/chunks/image-radius.json +15 -0
  322. package/chunks/image-src.json +15 -0
  323. package/chunks/image-width.json +15 -0
  324. package/chunks/input-combinations.json +15 -0
  325. package/chunks/input-disabled.json +15 -0
  326. package/chunks/input-edge-cases.json +15 -0
  327. package/chunks/input-error.json +15 -0
  328. package/chunks/input-label.json +15 -0
  329. package/chunks/input-name.json +15 -0
  330. package/chunks/input-pattern.json +15 -0
  331. package/chunks/input-placeholder.json +15 -0
  332. package/chunks/input-prefix-suffix.json +15 -0
  333. package/chunks/input-prefix.json +15 -0
  334. package/chunks/input-raw.json +15 -0
  335. package/chunks/input-readonly.json +15 -0
  336. package/chunks/input-required.json +15 -0
  337. package/chunks/input-size.json +15 -0
  338. package/chunks/input-suffix.json +15 -0
  339. package/chunks/input-type.json +15 -0
  340. package/chunks/input-value.json +15 -0
  341. package/chunks/inspector-default.json +15 -0
  342. package/chunks/inspector-imperative.json +15 -0
  343. package/chunks/inspector-nested.json +15 -0
  344. package/chunks/inspector-value.json +15 -0
  345. package/chunks/kbd-combinations.json +15 -0
  346. package/chunks/kbd-in-context.json +15 -0
  347. package/chunks/kbd-single-keys.json +15 -0
  348. package/chunks/kbd-size.json +15 -0
  349. package/chunks/layout-align.json +15 -0
  350. package/chunks/layout-col.json +15 -0
  351. package/chunks/layout-combo.json +15 -0
  352. package/chunks/layout-edge.json +15 -0
  353. package/chunks/layout-grid.json +15 -0
  354. package/chunks/layout-justify.json +15 -0
  355. package/chunks/layout-row.json +15 -0
  356. package/chunks/layout-stack.json +15 -0
  357. package/chunks/layout-wrap.json +15 -0
  358. package/chunks/list-basic.json +15 -0
  359. package/chunks/list-combo.json +15 -0
  360. package/chunks/list-description.json +15 -0
  361. package/chunks/list-divider.json +15 -0
  362. package/chunks/list-edge.json +15 -0
  363. package/chunks/list-icon.json +15 -0
  364. package/chunks/list-spacing.json +15 -0
  365. package/chunks/member-edit-drawer.json +15 -0
  366. package/chunks/menu-basic.json +15 -0
  367. package/chunks/menu-combo.json +15 -0
  368. package/chunks/menu-disabled.json +15 -0
  369. package/chunks/menu-divider.json +15 -0
  370. package/chunks/menu-edge.json +15 -0
  371. package/chunks/menu-gap.json +15 -0
  372. package/chunks/menu-icon.json +15 -0
  373. package/chunks/menu-open.json +15 -0
  374. package/chunks/menu-placement.json +15 -0
  375. package/chunks/menu-variant.json +15 -0
  376. package/chunks/modal-basic.json +15 -0
  377. package/chunks/modal-closable.json +15 -0
  378. package/chunks/modal-combinations.json +15 -0
  379. package/chunks/modal-edge-cases.json +15 -0
  380. package/chunks/modal-open.json +15 -0
  381. package/chunks/modal-size-xl.json +15 -0
  382. package/chunks/modal-size.json +15 -0
  383. package/chunks/modal-text.json +15 -0
  384. package/chunks/modal-trigger.json +15 -0
  385. package/chunks/noodles-animated.json +15 -0
  386. package/chunks/noodles-color.json +15 -0
  387. package/chunks/noodles-curve.json +15 -0
  388. package/chunks/noodles-editable.json +15 -0
  389. package/chunks/noodles-portSize.json +15 -0
  390. package/chunks/noodles-readonly.json +15 -0
  391. package/chunks/noodles-showPorts.json +15 -0
  392. package/chunks/noodles-strokeWidth.json +15 -0
  393. package/chunks/noodles-tension.json +15 -0
  394. package/chunks/onb-completion.json +14 -0
  395. package/chunks/onb-extension-install.json +14 -0
  396. package/chunks/onb-hero-welcome.json +14 -0
  397. package/chunks/onb-import-picker.json +14 -0
  398. package/chunks/onb-mobile-handoff.json +14 -0
  399. package/chunks/onb-notification-prefs.json +16 -0
  400. package/chunks/onb-persona-picker.json +14 -0
  401. package/chunks/onb-provider-tiles.json +14 -0
  402. package/chunks/onb-settings-review.json +14 -0
  403. package/chunks/onb-step-footer.json +108 -0
  404. package/chunks/onb-step-header.json +108 -0
  405. package/chunks/onb-step-progress.json +108 -0
  406. package/chunks/onb-story-pane.json +108 -0
  407. package/chunks/onb-tutorial-steps.json +14 -0
  408. package/chunks/option-card-default.json +15 -0
  409. package/chunks/option-card-dense.json +15 -0
  410. package/chunks/option-card-disabled.json +15 -0
  411. package/chunks/option-card-heading-rich.json +15 -0
  412. package/chunks/option-card-icon.json +15 -0
  413. package/chunks/option-card-spillover.json +15 -0
  414. package/chunks/otp-input-disabled.json +15 -0
  415. package/chunks/otp-input-length.json +15 -0
  416. package/chunks/otp-input-name.json +15 -0
  417. package/chunks/otp-input-value.json +15 -0
  418. package/chunks/pagination-basic.json +15 -0
  419. package/chunks/pagination-combo.json +15 -0
  420. package/chunks/pagination-edge.json +15 -0
  421. package/chunks/pagination-first-page.json +15 -0
  422. package/chunks/pagination-last-page.json +15 -0
  423. package/chunks/pagination-many-pages.json +15 -0
  424. package/chunks/pagination-page.json +15 -0
  425. package/chunks/pagination-siblings.json +15 -0
  426. package/chunks/pagination-size.json +15 -0
  427. package/chunks/pagination-total.json +15 -0
  428. package/chunks/pagination-variant.json +15 -0
  429. package/chunks/pane-basic.json +15 -0
  430. package/chunks/pane-collapsed.json +15 -0
  431. package/chunks/pane-combo.json +15 -0
  432. package/chunks/pane-edge.json +15 -0
  433. package/chunks/pane-maxWidth.json +15 -0
  434. package/chunks/pane-minWidth.json +15 -0
  435. package/chunks/pane-resizable.json +15 -0
  436. package/chunks/pane-sections.json +15 -0
  437. package/chunks/pipeline-status-complete.json +15 -0
  438. package/chunks/pipeline-status-message.json +15 -0
  439. package/chunks/pipeline-status-stage.json +15 -0
  440. package/chunks/playground-a2ui.json +12 -0
  441. package/chunks/playground-app-shell.json +14 -0
  442. package/chunks/playground-chat.json +15 -0
  443. package/chunks/playground-construct-canvas.json +14 -0
  444. package/chunks/playground-gen-ui.json +14 -0
  445. package/chunks/playground-render-preview.json +12 -0
  446. package/chunks/playground-streams-bridge.json +12 -0
  447. package/chunks/playground-table-toolbar.json +16 -0
  448. package/chunks/popover-combo.json +15 -0
  449. package/chunks/popover-edge.json +15 -0
  450. package/chunks/popover-gap.json +15 -0
  451. package/chunks/popover-open.json +15 -0
  452. package/chunks/popover-placement.json +15 -0
  453. package/chunks/popover-rich-content.json +15 -0
  454. package/chunks/popover-trigger-click.json +15 -0
  455. package/chunks/popover-trigger-hover.json +15 -0
  456. package/chunks/popover-trigger.json +15 -0
  457. package/chunks/progress-indeterminate.json +15 -0
  458. package/chunks/progress-row-basic.json +15 -0
  459. package/chunks/progress-row-combo.json +15 -0
  460. package/chunks/progress-row-edge.json +15 -0
  461. package/chunks/progress-row-indeterminate.json +15 -0
  462. package/chunks/progress-row-label.json +15 -0
  463. package/chunks/progress-row-meta.json +15 -0
  464. package/chunks/progress-row-multiple.json +15 -0
  465. package/chunks/progress-row-value.json +15 -0
  466. package/chunks/progress-row-variant.json +15 -0
  467. package/chunks/progress-sizes.json +15 -0
  468. package/chunks/progress-value.json +15 -0
  469. package/chunks/progress-variant.json +15 -0
  470. package/chunks/radio-checked.json +15 -0
  471. package/chunks/radio-combinations.json +15 -0
  472. package/chunks/radio-disabled.json +15 -0
  473. package/chunks/radio-edge-cases.json +15 -0
  474. package/chunks/radio-error.json +15 -0
  475. package/chunks/radio-group.json +15 -0
  476. package/chunks/radio-label.json +15 -0
  477. package/chunks/radio-name.json +15 -0
  478. package/chunks/radio-required.json +15 -0
  479. package/chunks/radio-size.json +15 -0
  480. package/chunks/radio-value.json +15 -0
  481. package/chunks/range-combinations.json +15 -0
  482. package/chunks/range-default.json +15 -0
  483. package/chunks/range-disabled.json +15 -0
  484. package/chunks/range-edge-cases.json +15 -0
  485. package/chunks/range-error.json +15 -0
  486. package/chunks/range-label.json +15 -0
  487. package/chunks/range-name.json +15 -0
  488. package/chunks/range-required.json +15 -0
  489. package/chunks/range-suffix.json +15 -0
  490. package/chunks/range-value.json +15 -0
  491. package/chunks/rating-allowHalf.json +15 -0
  492. package/chunks/rating-basic.json +15 -0
  493. package/chunks/rating-icon.json +15 -0
  494. package/chunks/rating-interactive.json +15 -0
  495. package/chunks/rating-max.json +15 -0
  496. package/chunks/rating-name.json +15 -0
  497. package/chunks/rating-readonly.json +15 -0
  498. package/chunks/rating-size.json +15 -0
  499. package/chunks/rating-value.json +15 -0
  500. package/chunks/record-detail-drawer-simple-detail.json +15 -0
  501. package/chunks/record-detail-drawer-tabbed-detail.json +15 -0
  502. package/chunks/reg-address-form.json +14 -0
  503. package/chunks/reg-billing-card.json +14 -0
  504. package/chunks/reg-brand-scrape.json +14 -0
  505. package/chunks/reg-departments-toggle.json +14 -0
  506. package/chunks/reg-extended-profile.json +14 -0
  507. package/chunks/reg-final-done.json +14 -0
  508. package/chunks/reg-helpdesk-grid.json +14 -0
  509. package/chunks/reg-import-picker.json +14 -0
  510. package/chunks/reg-integrations-grid.json +14 -0
  511. package/chunks/reg-invite-form.json +14 -0
  512. package/chunks/reg-legal-entity.json +14 -0
  513. package/chunks/reg-org-chart-review.json +14 -0
  514. package/chunks/reg-profile-identity.json +20 -0
  515. package/chunks/reg-step-footer.json +188 -0
  516. package/chunks/reg-step-header.json +189 -0
  517. package/chunks/reg-step-progress.json +188 -0
  518. package/chunks/reg-story-pane.json +188 -0
  519. package/chunks/reg-success-summary.json +14 -0
  520. package/chunks/reg-team-size.json +14 -0
  521. package/chunks/reg-usecase-picker.json +16 -0
  522. package/chunks/reg-workspace-name.json +20 -0
  523. package/chunks/retention-cohort-default-retention.json +15 -0
  524. package/chunks/retention-cohort-stat-pair.json +15 -0
  525. package/chunks/retention-cohort-with-legend.json +15 -0
  526. package/chunks/richtext-code-blocks.json +15 -0
  527. package/chunks/richtext-default-slot.json +15 -0
  528. package/chunks/richtext-markdown.json +15 -0
  529. package/chunks/richtext-rich-markdown.json +15 -0
  530. package/chunks/richtext-src.json +15 -0
  531. package/chunks/search-debounce.json +15 -0
  532. package/chunks/search-default.json +15 -0
  533. package/chunks/search-disabled.json +15 -0
  534. package/chunks/search-name.json +15 -0
  535. package/chunks/search-placeholder.json +15 -0
  536. package/chunks/search-value.json +15 -0
  537. package/chunks/segment-basic.json +15 -0
  538. package/chunks/segment-disabled.json +15 -0
  539. package/chunks/segment-icons.json +15 -0
  540. package/chunks/segment-text.json +15 -0
  541. package/chunks/segment-value.json +15 -0
  542. package/chunks/segmented-basic.json +15 -0
  543. package/chunks/segmented-combo.json +15 -0
  544. package/chunks/segmented-disabled.json +15 -0
  545. package/chunks/segmented-edge.json +15 -0
  546. package/chunks/segmented-pre-selected.json +15 -0
  547. package/chunks/segmented-value.json +15 -0
  548. package/chunks/select-avatar.json +15 -0
  549. package/chunks/select-basic.json +15 -0
  550. package/chunks/select-combinations.json +15 -0
  551. package/chunks/select-disabled.json +15 -0
  552. package/chunks/select-edge-cases.json +15 -0
  553. package/chunks/select-error.json +15 -0
  554. package/chunks/select-free-text.json +15 -0
  555. package/chunks/select-grouped.json +15 -0
  556. package/chunks/select-icon.json +15 -0
  557. package/chunks/select-label.json +15 -0
  558. package/chunks/select-multiple.json +15 -0
  559. package/chunks/select-name.json +15 -0
  560. package/chunks/select-open.json +15 -0
  561. package/chunks/select-placeholder.json +15 -0
  562. package/chunks/select-readonly.json +15 -0
  563. package/chunks/select-required.json +15 -0
  564. package/chunks/select-searchable.json +15 -0
  565. package/chunks/select-size.json +15 -0
  566. package/chunks/select-value.json +15 -0
  567. package/chunks/settings-billing-plan.json +14 -0
  568. package/chunks/settings-general-form.json +14 -0
  569. package/chunks/settings-integrations.json +14 -0
  570. package/chunks/settings-members-invite.json +14 -0
  571. package/chunks/settings-profile-security.json +14 -0
  572. package/chunks/skeleton-card-placeholder.json +15 -0
  573. package/chunks/skeleton-height.json +15 -0
  574. package/chunks/skeleton-radius.json +15 -0
  575. package/chunks/skeleton-static.json +15 -0
  576. package/chunks/skeleton-width-height.json +15 -0
  577. package/chunks/skeleton-width.json +15 -0
  578. package/chunks/slider-disabled.json +15 -0
  579. package/chunks/slider-error.json +15 -0
  580. package/chunks/slider-label.json +15 -0
  581. package/chunks/slider-name.json +15 -0
  582. package/chunks/slider-required.json +15 -0
  583. package/chunks/slider-suffix.json +15 -0
  584. package/chunks/slider-value.json +15 -0
  585. package/chunks/stat-basic.json +15 -0
  586. package/chunks/stat-change.json +15 -0
  587. package/chunks/stat-chart-slot.json +15 -0
  588. package/chunks/stat-data-stream.json +15 -0
  589. package/chunks/stat-grid.json +15 -0
  590. package/chunks/stat-icon.json +15 -0
  591. package/chunks/stat-label.json +15 -0
  592. package/chunks/stat-trend.json +15 -0
  593. package/chunks/stat-value.json +15 -0
  594. package/chunks/stepper-horizontal.json +15 -0
  595. package/chunks/stepper-interactive.json +15 -0
  596. package/chunks/stepper-step.json +15 -0
  597. package/chunks/stepper-vertical.json +15 -0
  598. package/chunks/stream-basic.json +15 -0
  599. package/chunks/stream-hide-cursor.json +15 -0
  600. package/chunks/stream-pace.json +15 -0
  601. package/chunks/stream-streaming.json +15 -0
  602. package/chunks/swiper-autoplay.json +15 -0
  603. package/chunks/swiper-basic.json +15 -0
  604. package/chunks/swiper-combo.json +15 -0
  605. package/chunks/swiper-gap.json +15 -0
  606. package/chunks/swiper-interval.json +15 -0
  607. package/chunks/swiper-loop.json +15 -0
  608. package/chunks/swiper-peek.json +15 -0
  609. package/chunks/swiper-slides-per-view.json +15 -0
  610. package/chunks/swiper-snap.json +15 -0
  611. package/chunks/switch-checked.json +15 -0
  612. package/chunks/switch-combinations.json +15 -0
  613. package/chunks/switch-disabled.json +15 -0
  614. package/chunks/switch-edge-cases.json +15 -0
  615. package/chunks/switch-label.json +15 -0
  616. package/chunks/switch-size.json +15 -0
  617. package/chunks/table-cell-types.json +15 -0
  618. package/chunks/table-data-stream.json +15 -0
  619. package/chunks/table-density.json +15 -0
  620. package/chunks/table-expandable.json +15 -0
  621. package/chunks/table-loading.json +15 -0
  622. package/chunks/table-paginate.json +15 -0
  623. package/chunks/table-raw.json +15 -0
  624. package/chunks/table-search.json +15 -0
  625. package/chunks/table-selectable.json +15 -0
  626. package/chunks/table-sortable.json +15 -0
  627. package/chunks/table-striped.json +15 -0
  628. package/chunks/tabs-basic.json +15 -0
  629. package/chunks/tabs-combinations.json +15 -0
  630. package/chunks/tabs-disabled.json +15 -0
  631. package/chunks/tabs-edge-cases.json +15 -0
  632. package/chunks/tabs-icon.json +15 -0
  633. package/chunks/tabs-keyboard.json +15 -0
  634. package/chunks/tabs-orientation.json +15 -0
  635. package/chunks/tabs-value.json +15 -0
  636. package/chunks/tabs-vertical.json +15 -0
  637. package/chunks/tag-combinations.json +15 -0
  638. package/chunks/tag-disabled.json +15 -0
  639. package/chunks/tag-removable.json +15 -0
  640. package/chunks/tag-size.json +15 -0
  641. package/chunks/tag-text.json +15 -0
  642. package/chunks/tag-variant.json +15 -0
  643. package/chunks/text-lines.json +15 -0
  644. package/chunks/text-truncate.json +15 -0
  645. package/chunks/text-variant.json +15 -0
  646. package/chunks/textarea-combinations.json +15 -0
  647. package/chunks/textarea-disabled.json +15 -0
  648. package/chunks/textarea-edge-cases.json +15 -0
  649. package/chunks/textarea-error.json +15 -0
  650. package/chunks/textarea-label.json +15 -0
  651. package/chunks/textarea-placeholder.json +15 -0
  652. package/chunks/textarea-readonly.json +15 -0
  653. package/chunks/textarea-resize.json +15 -0
  654. package/chunks/textarea-rows.json +15 -0
  655. package/chunks/timeline-compact.json +15 -0
  656. package/chunks/timeline-error.json +15 -0
  657. package/chunks/timeline-horizontal.json +15 -0
  658. package/chunks/timeline-icons.json +15 -0
  659. package/chunks/timeline-outcomes.json +15 -0
  660. package/chunks/timeline-variant.json +15 -0
  661. package/chunks/timeline-vertical.json +15 -0
  662. package/chunks/toast-closable.json +15 -0
  663. package/chunks/toast-combo.json +15 -0
  664. package/chunks/toast-duration.json +15 -0
  665. package/chunks/toast-edge.json +15 -0
  666. package/chunks/toast-position.json +15 -0
  667. package/chunks/toast-text.json +15 -0
  668. package/chunks/toast-variant.json +15 -0
  669. package/chunks/toggle-group-combo.json +15 -0
  670. package/chunks/toggle-group-disabled.json +15 -0
  671. package/chunks/toggle-group-edge.json +15 -0
  672. package/chunks/toggle-group-icon-group.json +15 -0
  673. package/chunks/toggle-group-pre-selected.json +15 -0
  674. package/chunks/toggle-group-single-vs-multi.json +15 -0
  675. package/chunks/toggle-group-single.json +15 -0
  676. package/chunks/toggle-group-text-group.json +15 -0
  677. package/chunks/toggle-group-value.json +15 -0
  678. package/chunks/toolbar-align.json +15 -0
  679. package/chunks/toolbar-basic.json +15 -0
  680. package/chunks/toolbar-bordered.json +15 -0
  681. package/chunks/toolbar-combo.json +15 -0
  682. package/chunks/toolbar-dividers.json +15 -0
  683. package/chunks/toolbar-edge.json +15 -0
  684. package/chunks/toolbar-gap.json +15 -0
  685. package/chunks/toolbar-overflow-none.json +30 -0
  686. package/chunks/toolbar-overflow.json +15 -0
  687. package/chunks/tooltip-combinations.json +15 -0
  688. package/chunks/tooltip-delay.json +15 -0
  689. package/chunks/tooltip-edge-cases.json +15 -0
  690. package/chunks/tooltip-placement.json +15 -0
  691. package/chunks/tooltip-text.json +15 -0
  692. package/chunks/tree-basic.json +15 -0
  693. package/chunks/tree-combo.json +15 -0
  694. package/chunks/tree-edge.json +15 -0
  695. package/chunks/tree-expand-collapse.json +15 -0
  696. package/chunks/tree-selection.json +15 -0
  697. package/chunks/upload-accept.json +15 -0
  698. package/chunks/upload-default.json +15 -0
  699. package/chunks/upload-disabled.json +15 -0
  700. package/chunks/upload-hint.json +15 -0
  701. package/chunks/upload-label-hint.json +15 -0
  702. package/chunks/upload-label.json +15 -0
  703. package/chunks/upload-multiple.json +15 -0
  704. package/chunks/upload-name.json +15 -0
  705. package/chunks/upload-value.json +15 -0
  706. package/chunks/wizard-drawer-three-step-wizard.json +15 -0
  707. package/exemplars/_shell.css +88 -0
  708. package/exemplars/prose/auth-login/index.html +29 -26
  709. package/exemplars/prose/cta/a2ui.json +1 -1
  710. package/exemplars/prose/cta/chunks/prose-cta-card-1.json +1 -1
  711. package/exemplars/prose/cta/index.html +15 -33
  712. package/exemplars/prose/feature-grid/index.html +7 -17
  713. package/exemplars/prose/footer/index.html +8 -9
  714. package/exemplars/prose/hero/index.html +14 -24
  715. package/exemplars/prose/pricing/index.html +7 -17
  716. package/exemplars/prose/steps/index.html +8 -5
  717. package/exemplars/prose/testimonials/index.html +19 -16
  718. package/exemplars/ui/auth-login/index.html +23 -34
  719. package/package.json +10 -5
  720. package/patterns/_components.json +2 -2
  721. package/patterns/_index.json +131 -41
  722. package/patterns/data/chart-card-with-trend-footer.json +102 -0
  723. package/patterns/data/chart-card-with-trend-footer.yaml +56 -0
  724. package/patterns/data/chart-grid-with-kpis.json +314 -0
  725. package/patterns/data/chart-grid-with-kpis.yaml +63 -0
  726. package/patterns/data/chart-with-filter-pills.json +127 -0
  727. package/patterns/data/chart-with-filter-pills.yaml +76 -0
  728. package/patterns/data/stat-with-sparkline.json +67 -0
  729. package/patterns/data/stat-with-sparkline.yaml +51 -0
  730. package/scripts/chunk-library.js +123 -0
  731. package/fragments/content/chart-legend.json +0 -122
  732. package/fragments/form/rating-row.json +0 -31
  733. package/fragments/form/rating-row.yaml +0 -40
package/chunks/commerce-pricing-tiers.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "name": "commerce-pricing-tiers",
3
+ "kind": "block",
4
+ "primary": "section",
5
+ "page": "/site/examples/registration/plan",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "data-reg-form": "",
10
+ "role": "radiogroup",
11
+ "aria-label": "Plan"
12
+ },
13
+ "html": "<section data-reg-form data-chunk=\"commerce-pricing-tiers\" role=\"radiogroup\" aria-label=\"Plan\">\n <col-ui gap=\"2\">\n <option-card-ui name=\"plan\" value=\"free\">\n <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n <span>Free</span>\n <text-ui color=\"subtle\" size=\"sm\" grow>Solo or community work</text-ui>\n <span>$0/mo</span>\n </row-ui>\n <span slot=\"description\">Up to 5 members · 10 projects · community support</span>\n </option-card-ui>\n\n <option-card-ui name=\"plan\" value=\"pro\" checked>\n <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n <span>Pro</span>\n <text-ui color=\"subtle\" size=\"sm\" grow>Designed for small operations</text-ui>\n <span>$49/mo</span>\n </row-ui>\n <col-ui slot=\"description\" gap=\"2\">\n <span>Unlimited members · advanced charts · 100 GB storage · email support</span>\n <row-ui gap=\"2\" align=\"center\">\n <badge-ui text=\"Saves 40%\" variant=\"success\"></badge-ui>\n <text-ui size=\"sm\" color=\"subtle\">14-day trial period</text-ui>\n </row-ui>\n </col-ui>\n </option-card-ui>\n\n <option-card-ui name=\"plan\" value=\"team\">\n <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n <span>Team</span>\n <text-ui color=\"subtle\" size=\"sm\" grow>For growing organizations</text-ui>\n <span>$129/mo</span>\n </row-ui>\n <col-ui slot=\"description\" gap=\"2\">\n <span>Everything in Pro · SSO · audit log · role-based permissions · 1 TB storage</span>\n <row-ui gap=\"2\" align=\"center\">\n <badge-ui text=\"Saves 30%\" variant=\"success\"></badge-ui>\n <text-ui size=\"sm\" color=\"subtle\">Pay annually</text-ui>\n </row-ui>\n </col-ui>\n </option-card-ui>\n\n <option-card-ui name=\"plan\" value=\"enterprise\">\n <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n <span>Enterprise</span>\n <text-ui color=\"subtle\" size=\"sm\" grow>For regulated industries</text-ui>\n <span>custom</span>\n </row-ui>\n <col-ui slot=\"description\" gap=\"2\">\n <span>Dedicated support · DPA · SCIM · on-prem deployment · talk to sales</span>\n <row-ui gap=\"2\" align=\"center\">\n <badge-ui text=\"Volume pricing\" variant=\"accent\"></badge-ui>\n <text-ui size=\"sm\" color=\"subtle\">Custom contract</text-ui>\n </row-ui>\n </col-ui>\n </option-card-ui>\n\n <option-card-ui name=\"plan\" value=\"custom\">\n <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n <span>Something else</span>\n <text-ui color=\"subtle\" size=\"sm\" grow>Tell us what you need</text-ui>\n <span>talk to us</span>\n </row-ui>\n <span slot=\"description\">None of these fit? Tell us what you need and we'll quote a custom plan within one business day.</span>\n <textarea-ui name=\"custom-requirements\" rows=\"4\"\n label=\"Your requirements\"\n placeholder=\"Volume, compliance needs, integrations, deployment constraints — whatever you'd want a sales engineer to know up front.\"></textarea-ui>\n </option-card-ui>\n </col-ui>\n </section>",
14
+ "source": "site/pages/examples/registration/plan/index.html",
15
+ "captured_at": "2026-04-28T04:46:20.743Z"
16
+ }
package/chunks/conversion-funnel-4-step-funnel.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "conversion-funnel-4-step-funnel",
3
+ "kind": "block",
4
+ "primary": "section",
5
+ "page": "/site/patterns/conversion-funnel",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "data-section": "",
10
+ "data-property": "4-step-funnel"
11
+ },
12
+ "html": "<section data-section data-property=\"4-step-funnel\" data-chunk=\"conversion-funnel-4-step-funnel\">\n <h2 variant=\"section\">Four-step funnel</h2>\n <p data-note>Top step is an explicit 100% baseline (no progress bar — it's the anchor). Subsequent steps use <code>progress-row-ui</code> with the count + percentage in the meta slot.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"conversion funnel\">\n <card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\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 </div>\n </div>\n</section>",
13
+ "source": "site/pages/patterns/conversion-funnel/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/conversion-funnel-wide-summary.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "conversion-funnel-wide-summary",
3
+ "kind": "block",
4
+ "primary": "section",
5
+ "page": "/site/patterns/conversion-funnel",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "data-section": "",
10
+ "data-property": "wide-summary"
11
+ },
12
+ "html": "<section data-section data-property=\"wide-summary\" data-chunk=\"conversion-funnel-wide-summary\">\n <h2 variant=\"section\">Wide summary with step-over-step delta</h2>\n <p data-note>For board reporting, combine the funnel with a step-over-step delta column so stakeholders can see exactly where the biggest drop-off happens. Delta is a <code>badge-ui</code> colored by severity.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"funnel with step-over-step\">\n <card-ui style=\"max-width: 640px;\">\n <header>\n <h3>Signup funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Step-over-step conversion, last 7 days</text-ui>\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>Signup form viewed</text-ui>\n <text-ui color=\"subtle\">8,420 visitors</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <row-ui align=\"center\" gap=\"3\">\n <progress-row-ui label=\"Email verified\" value=\"68\" meta=\"5,726 · 68%\" grow></progress-row-ui>\n <badge-ui text=\"−32%\" variant=\"warning\"></badge-ui>\n </row-ui>\n <row-ui align=\"center\" gap=\"3\">\n <progress-row-ui label=\"Workspace created\" value=\"54\" meta=\"4,547 · 54%\" grow></progress-row-ui>\n <badge-ui text=\"−21%\" variant=\"muted\"></badge-ui>\n </row-ui>\n <row-ui align=\"center\" gap=\"3\">\n <progress-row-ui label=\"Invited a teammate\" value=\"22\" meta=\"1,852 · 22%\" grow></progress-row-ui>\n <badge-ui text=\"−59%\" variant=\"danger\"></badge-ui>\n </row-ui>\n </col-ui>\n </section>\n </card-ui>\n </div>\n </div>\n</section>",
13
+ "source": "site/pages/patterns/conversion-funnel/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/conversion-funnel-with-segment-compare.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "conversion-funnel-with-segment-compare",
3
+ "kind": "block",
4
+ "primary": "section",
5
+ "page": "/site/patterns/conversion-funnel",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "data-section": "",
10
+ "data-property": "with-segment-compare"
11
+ },
12
+ "html": "<section data-section data-property=\"with-segment-compare\" data-chunk=\"conversion-funnel-with-segment-compare\">\n <h2 variant=\"section\">With segment comparison</h2>\n <p data-note>Pair the funnel card with a segmented control in <code>slot=\"action\"</code> so users can switch between cohorts (e.g. new-vs-returning, mobile-vs-desktop). Swap the <code>value</code> + <code>meta</code> attributes in setup.js on segment change.</p>\n <div data-artifact-container>\n <div data-artifact-item data-artifact-label=\"funnel with cohort toggle\">\n <card-ui style=\"max-width: 560px;\">\n <header>\n <h3>Checkout funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Last 30 days · by first-time vs returning</text-ui>\n <span slot=\"action\">\n <segmented-ui value=\"new\" size=\"sm\">\n <segment-ui value=\"new\" text=\"New\"></segment-ui>\n <segment-ui value=\"returning\" text=\"Returning\"></segment-ui>\n </segmented-ui>\n </span>\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>Cart viewed</text-ui>\n <text-ui color=\"subtle\">42,180 sessions</text-ui>\n </col-ui>\n <text-ui strong>100%</text-ui>\n </row-ui>\n <progress-row-ui label=\"Added to cart\" value=\"58\" meta=\"24,464 · 58%\"></progress-row-ui>\n <progress-row-ui label=\"Reached payment\" value=\"34\" meta=\"14,341 · 34%\"></progress-row-ui>\n <progress-row-ui label=\"Completed purchase\" value=\"19\" meta=\"8,014 · 19%\"></progress-row-ui>\n </col-ui>\n </section>\n <footer divider>\n <small slot=\"description\">Funnel window: 30 days · ends at first purchase or abandonment.</small>\n <span slot=\"action\">\n <button-ui text=\"View in analytics\" variant=\"ghost\" size=\"sm\" icon=\"arrow-square-out\"></button-ui>\n </span>\n </footer>\n </card-ui>\n </div>\n </div>\n</section>",
13
+ "source": "site/pages/patterns/conversion-funnel/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/dashboard-acquisition-panel.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "dashboard-acquisition-panel",
3
+ "kind": "panel",
4
+ "primary": "div",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [
8
+ "dashboard-traffic-channels"
9
+ ],
10
+ "attrs": {
11
+ "data-tab-panel": "acquisition",
12
+ "hidden": ""
13
+ },
14
+ "html": "<div data-tab-panel=\"acquisition\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\">\n <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <div slot=\"action\">\n <segmented-ui value=\"30d\">\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 </div>\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 </div>",
15
+ "source": "site/pages/examples/admin-dashboard/index.html",
16
+ "captured_at": "2026-04-28T04:46:20.743Z"
17
+ }
package/chunks/dashboard-admin-page.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "dashboard-admin-page",
3
+ "kind": "page",
4
+ "primary": "article",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [
7
+ {
8
+ "name": "page-header",
9
+ "tagName": "div",
10
+ "html": "<header data-chunk=\"dashboard-page-header\">\n <div>\n <h1>Dashboard</h1>\n <div data-actions>\n <button-ui text=\"Export\" icon=\"download\" variant=\"outline\"></button-ui>\n <button-ui text=\"+ New\" variant=\"primary\"></button-ui>\n </div>\n </div>\n <p>Welcome back. Here's what's happening.</p>\n <tabs-ui value=\"overview\" data-chunk=\"dashboard-tabs\">\n <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n <tab-ui value=\"audience\" text=\"Audience\"></tab-ui>\n <tab-ui value=\"acquisition\" text=\"Acquisition\"></tab-ui>\n <tab-ui value=\"behavior\" text=\"Behavior\"></tab-ui>\n <tab-ui value=\"conversion\" text=\"Conversion\"></tab-ui>\n <tab-ui value=\"reports\" text=\"Reports\"></tab-ui>\n <tab-ui value=\"notifications\" text=\"Notifications\"></tab-ui>\n </tabs-ui>\n </header>"
11
+ },
12
+ {
13
+ "name": "page-content",
14
+ "tagName": "div",
15
+ "html": "<section>\n <div data-dashboard-content>\n <div data-tab-panel=\"overview\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\">\n <card-ui size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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=\"5\" gap=\"4\" data-chunk=\"dashboard-chart-recent\">\n <card-ui span=\"3\">\n <header>\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=\"2\" gap=\"3\" size=\"sm\">\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=\"4\" gap=\"4\" data-chunk=\"dashboard-spark-cards\">\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\">\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=\"3\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\">\n <card-ui data-chunk=\"dashboard-team-list\">\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\">\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\">\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 </div>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <div data-tab-panel=\"audience\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\">\n\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\">\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 <!-- KPI ROW -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\">\n <card-ui size=\"sm\"><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\">\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=\"xl\">🇺🇸</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=\"xl\">🇩🇪</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=\"xl\">🇬🇧</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=\"xl\">🇯🇵</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=\"xl\">🇨🇦</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 </div>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <div data-tab-panel=\"acquisition\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\">\n <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <div slot=\"action\">\n <segmented-ui value=\"30d\">\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 </div>\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 </div>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <div data-tab-panel=\"behavior\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\">\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 </div>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <div data-tab-panel=\"conversion\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\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\">\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 </div>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <div data-tab-panel=\"reports\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Reports</h3>\n </span>\n <span slot=\"description\">\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n </span>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\">\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\"></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 </div>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <div data-tab-panel=\"notifications\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-notifications-feed\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Notifications</h3>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\">System and team activity</text-ui>\n </span>\n <span slot=\"action\">\n <row-ui gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\">\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 </span>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n </col-ui>\n <badge-ui text=\"New\" variant=\"accent\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n </col-ui>\n <badge-ui text=\"Mention\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"warning\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n </col-ui>\n <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"key\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </div>\n <!-- /notifications -->\n </div>\n </section>"
16
+ }
17
+ ],
18
+ "nested": [
19
+ "dashboard-page-header",
20
+ "dashboard-tabs",
21
+ "dashboard-overview-panel",
22
+ "dashboard-kpi-grid",
23
+ "dashboard-chart-recent",
24
+ "dashboard-spark-cards",
25
+ "dashboard-transactions-table",
26
+ "dashboard-team-actions-storage",
27
+ "dashboard-team-list",
28
+ "dashboard-quick-actions",
29
+ "dashboard-storage-card",
30
+ "dashboard-audience-panel",
31
+ "dashboard-filter-bar",
32
+ "dashboard-audience-kpis",
33
+ "dashboard-country-list",
34
+ "dashboard-acquisition-panel",
35
+ "dashboard-traffic-channels",
36
+ "dashboard-behavior-panel",
37
+ "dashboard-pages-table",
38
+ "dashboard-conversion-panel",
39
+ "dashboard-funnel",
40
+ "dashboard-cohort-retention",
41
+ "dashboard-reports-panel",
42
+ "dashboard-reports-table",
43
+ "dashboard-notifications-panel",
44
+ "dashboard-notifications-feed"
45
+ ],
46
+ "attrs": {},
47
+ "html": "<article data-chunk=\"dashboard-admin-page\" data-chunk-kind=\"page\">\n<div data-content-header data-chunk-slot=\"page-header\">\n <header data-chunk=\"dashboard-page-header\">\n <div>\n <h1>Dashboard</h1>\n <div data-actions>\n <button-ui text=\"Export\" icon=\"download\" variant=\"outline\"></button-ui>\n <button-ui text=\"+ New\" variant=\"primary\"></button-ui>\n </div>\n </div>\n <p>Welcome back. Here's what's happening.</p>\n <tabs-ui value=\"overview\" data-chunk=\"dashboard-tabs\">\n <tab-ui value=\"overview\" text=\"Overview\"></tab-ui>\n <tab-ui value=\"audience\" text=\"Audience\"></tab-ui>\n <tab-ui value=\"acquisition\" text=\"Acquisition\"></tab-ui>\n <tab-ui value=\"behavior\" text=\"Behavior\"></tab-ui>\n <tab-ui value=\"conversion\" text=\"Conversion\"></tab-ui>\n <tab-ui value=\"reports\" text=\"Reports\"></tab-ui>\n <tab-ui value=\"notifications\" text=\"Notifications\"></tab-ui>\n </tabs-ui>\n </header>\n</div>\n\n<div data-content-body data-chunk-slot=\"page-content\">\n <section>\n <div data-dashboard-content>\n <div data-tab-panel=\"overview\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\">\n <card-ui size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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=\"5\" gap=\"4\" data-chunk=\"dashboard-chart-recent\">\n <card-ui span=\"3\">\n <header>\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=\"2\" gap=\"3\" size=\"sm\">\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=\"4\" gap=\"4\" data-chunk=\"dashboard-spark-cards\">\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\">\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=\"3\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\">\n <card-ui data-chunk=\"dashboard-team-list\">\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\">\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\">\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 </div>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <div data-tab-panel=\"audience\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\">\n\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\">\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 <!-- KPI ROW -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\">\n <card-ui size=\"sm\"><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\">\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=\"xl\">🇺🇸</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=\"xl\">🇩🇪</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=\"xl\">🇬🇧</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=\"xl\">🇯🇵</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=\"xl\">🇨🇦</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 </div>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <div data-tab-panel=\"acquisition\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\">\n <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <div slot=\"action\">\n <segmented-ui value=\"30d\">\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 </div>\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 </div>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <div data-tab-panel=\"behavior\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\">\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 </div>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <div data-tab-panel=\"conversion\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\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\">\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 </div>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <div data-tab-panel=\"reports\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Reports</h3>\n </span>\n <span slot=\"description\">\n <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n </span>\n <span slot=\"action\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\">\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\"></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 </div>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <div data-tab-panel=\"notifications\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-notifications-feed\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Notifications</h3>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\">System and team activity</text-ui>\n </span>\n <span slot=\"action\">\n <row-ui gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\">\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 </span>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n </col-ui>\n <badge-ui text=\"New\" variant=\"accent\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n </col-ui>\n <badge-ui text=\"Mention\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"warning\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n </col-ui>\n <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"key\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </div>\n <!-- /notifications -->\n </div>\n </section>\n</div>\n</article>",
48
+ "source": "site/pages/examples/admin-dashboard/index.html",
49
+ "captured_at": "2026-04-28T04:46:20.743Z"
50
+ }
package/chunks/dashboard-audience-kpis.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "dashboard-audience-kpis",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "columns": "4",
10
+ "gap": "4"
11
+ },
12
+ "html": "<grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\">\n <card-ui size=\"sm\"><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section></card-ui>\n </grid-ui>",
13
+ "source": "site/pages/examples/admin-dashboard/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/dashboard-audience-panel.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "name": "dashboard-audience-panel",
3
+ "kind": "panel",
4
+ "primary": "div",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [
8
+ "dashboard-filter-bar",
9
+ "dashboard-audience-kpis",
10
+ "dashboard-country-list"
11
+ ],
12
+ "attrs": {
13
+ "data-tab-panel": "audience",
14
+ "hidden": ""
15
+ },
16
+ "html": "<div data-tab-panel=\"audience\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\">\n\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\">\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 <!-- KPI ROW -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\">\n <card-ui size=\"sm\"><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section></card-ui>\n <card-ui size=\"sm\"><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\">\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=\"xl\">🇺🇸</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=\"xl\">🇩🇪</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=\"xl\">🇬🇧</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=\"xl\">🇯🇵</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=\"xl\">🇨🇦</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 </div>",
17
+ "source": "site/pages/examples/admin-dashboard/index.html",
18
+ "captured_at": "2026-04-28T04:46:20.743Z"
19
+ }
package/chunks/dashboard-behavior-panel.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "dashboard-behavior-panel",
3
+ "kind": "panel",
4
+ "primary": "div",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [
8
+ "dashboard-pages-table"
9
+ ],
10
+ "attrs": {
11
+ "data-tab-panel": "behavior",
12
+ "hidden": ""
13
+ },
14
+ "html": "<div data-tab-panel=\"behavior\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\">\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 </div>",
15
+ "source": "site/pages/examples/admin-dashboard/index.html",
16
+ "captured_at": "2026-04-28T04:46:20.743Z"
17
+ }
package/chunks/dashboard-chart-recent.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "dashboard-chart-recent",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "columns": "5",
10
+ "gap": "4"
11
+ },
12
+ "html": "<grid-ui columns=\"5\" gap=\"4\" data-chunk=\"dashboard-chart-recent\">\n <card-ui span=\"3\">\n <header>\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=\"2\" gap=\"3\" size=\"sm\">\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>",
13
+ "source": "site/pages/examples/admin-dashboard/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/dashboard-cohort-retention.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "dashboard-cohort-retention",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {},
9
+ "html": "<grid-ui data-chunk=\"dashboard-cohort-retention\">\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>",
10
+ "source": "site/pages/examples/admin-dashboard/index.html",
11
+ "captured_at": "2026-04-28T04:46:20.743Z"
12
+ }
package/chunks/dashboard-conversion-panel.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "name": "dashboard-conversion-panel",
3
+ "kind": "panel",
4
+ "primary": "div",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [
8
+ "dashboard-funnel",
9
+ "dashboard-cohort-retention"
10
+ ],
11
+ "attrs": {
12
+ "data-tab-panel": "conversion",
13
+ "hidden": ""
14
+ },
15
+ "html": "<div data-tab-panel=\"conversion\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\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\">\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 </div>",
16
+ "source": "site/pages/examples/admin-dashboard/index.html",
17
+ "captured_at": "2026-04-28T04:46:20.743Z"
18
+ }
package/chunks/dashboard-country-list.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "dashboard-country-list",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {},
9
+ "html": "<grid-ui data-chunk=\"dashboard-country-list\">\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=\"xl\">🇺🇸</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=\"xl\">🇩🇪</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=\"xl\">🇬🇧</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=\"xl\">🇯🇵</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=\"xl\">🇨🇦</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>",
10
+ "source": "site/pages/examples/admin-dashboard/index.html",
11
+ "captured_at": "2026-04-28T04:46:20.743Z"
12
+ }
package/chunks/dashboard-filter-bar.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "dashboard-filter-bar",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {},
9
+ "html": "<grid-ui data-chunk=\"dashboard-filter-bar\">\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>",
10
+ "source": "site/pages/examples/admin-dashboard/index.html",
11
+ "captured_at": "2026-04-28T04:46:20.743Z"
12
+ }
package/chunks/dashboard-funnel.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "dashboard-funnel",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {},
9
+ "html": "<grid-ui data-chunk=\"dashboard-funnel\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <text-ui slot=\"description\" color=\"subtle\">Visit → Sign up → Activate → Convert</text-ui>\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>",
10
+ "source": "site/pages/examples/admin-dashboard/index.html",
11
+ "captured_at": "2026-04-28T04:46:20.743Z"
12
+ }
package/chunks/dashboard-kpi-grid.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "dashboard-kpi-grid",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {
9
+ "columns": "4",
10
+ "gap": "4"
11
+ },
12
+ "html": "<grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\">\n <card-ui size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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>",
13
+ "source": "site/pages/examples/admin-dashboard/index.html",
14
+ "captured_at": "2026-04-28T04:46:20.743Z"
15
+ }
package/chunks/dashboard-notifications-feed.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "dashboard-notifications-feed",
3
+ "kind": "block",
4
+ "primary": "grid-ui",
5
+ "page": "/site/examples/admin-dashboard",
6
+ "slots": [],
7
+ "nested": [],
8
+ "attrs": {},
9
+ "html": "<grid-ui data-chunk=\"dashboard-notifications-feed\">\n <card-ui>\n <header>\n <span slot=\"heading\">\n <h3>Notifications</h3>\n </span>\n <span slot=\"description\">\n <text-ui color=\"subtle\">System and team activity</text-ui>\n </span>\n <span slot=\"action\">\n <row-ui gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\">\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 </span>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"check-circle\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Deployment completed</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n </col-ui>\n <badge-ui text=\"New\" variant=\"accent\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Alex Chen mentioned you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n </col-ui>\n <badge-ui text=\"Mention\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"warning\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Usage threshold reached</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n </col-ui>\n <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>Sarah Miller invited you</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"start\" grow>\n <avatar-ui icon=\"key\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui align=\"center\" gap=\"2\">\n <text-ui weight=\"semibold\" grow>API key rotated</text-ui>\n <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>",
10
+ "source": "site/pages/examples/admin-dashboard/index.html",
11
+ "captured_at": "2026-04-28T04:46:20.743Z"
12
+ }