@adia-ai/a2ui-corpus 0.6.21 → 0.6.23
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.
- package/CHANGELOG.md +14 -0
- package/catalog-a2ui_0_9.json +830 -208
- package/catalog-a2ui_0_9_rules.txt +657 -4
- package/chunk-embeddings.json +1 -1
- package/chunks/_index.json +157 -10
- package/chunks/accordion-settings.json +1 -1
- package/chunks/agent-activity-feed.json +1 -1
- package/chunks/agent-canvas-shell.json +1 -1
- package/chunks/agent-command-palette-search.json +1 -1
- package/chunks/agent-reasoning-collapsed.json +1 -1
- package/chunks/agent-tool-call-result.json +1 -1
- package/chunks/agent-trace-timeline.json +1 -1
- package/chunks/ai-streaming-response.json +1 -1
- package/chunks/alert-banner.json +1 -1
- package/chunks/auth-account-deleted-actions.json +1 -1
- package/chunks/auth-account-deleted.json +1 -1
- package/chunks/auth-card-content.json +1 -1
- package/chunks/auth-card-header.json +1 -1
- package/chunks/auth-email-entry.json +1 -1
- package/chunks/auth-email-verify-confirm.json +1 -1
- package/chunks/auth-email-verify.json +1 -1
- package/chunks/auth-forbidden-actions.json +1 -1
- package/chunks/auth-forbidden.json +1 -1
- package/chunks/auth-invite-actions.json +1 -1
- package/chunks/auth-invite-team-card.json +1 -1
- package/chunks/auth-link-expired-form.json +1 -1
- package/chunks/auth-link-expired.json +1 -1
- package/chunks/auth-locked-account.json +1 -1
- package/chunks/auth-locked-recovery-options.json +1 -1
- package/chunks/auth-mfa-enrollment-submit.json +1 -1
- package/chunks/auth-mfa-enrollment.json +1 -1
- package/chunks/auth-mfa-fallback-actions.json +1 -1
- package/chunks/auth-mfa-recovery.json +1 -1
- package/chunks/auth-new-password-form.json +1 -1
- package/chunks/auth-new-password.json +1 -1
- package/chunks/auth-oauth-fallback-actions.json +1 -1
- package/chunks/auth-oauth-interstitial.json +1 -1
- package/chunks/auth-password-challenge.json +1 -1
- package/chunks/auth-password-reset-form.json +1 -1
- package/chunks/auth-password-reset.json +1 -1
- package/chunks/auth-profile-form.json +1 -1
- package/chunks/auth-profile-setup.json +1 -1
- package/chunks/auth-reset-sent.json +1 -1
- package/chunks/auth-session-expired-actions.json +1 -1
- package/chunks/auth-session-expired.json +1 -1
- package/chunks/auth-signin-card-email.json +1 -1
- package/chunks/auth-signin-card-magic-link.json +1 -1
- package/chunks/auth-signin-card-mfa.json +1 -1
- package/chunks/auth-signin-card-otp.json +1 -1
- package/chunks/auth-signin-card-password.json +1 -1
- package/chunks/auth-signin-card-recovery.json +1 -1
- package/chunks/auth-signout-actions.json +1 -1
- package/chunks/auth-signout.json +1 -1
- package/chunks/auth-signup-email-entry.json +1 -1
- package/chunks/auth-signup-entry.json +1 -1
- package/chunks/auth-signup-social-auths.json +1 -1
- package/chunks/auth-signup-verify.json +1 -1
- package/chunks/auth-social-auths.json +1 -1
- package/chunks/auth-sso-providers.json +1 -1
- package/chunks/auth-sso-required.json +1 -1
- package/chunks/auth-team-invite.json +1 -1
- package/chunks/avatar-group-overflow.json +1 -1
- package/chunks/breadcrumb-nav.json +1 -1
- package/chunks/calendar-month-view.json +1 -1
- package/chunks/card-header-with-description.json +1 -1
- package/chunks/chart-with-filter-pills.json +1 -1
- package/chunks/chat-page-shell.json +1 -1
- package/chunks/chat-streaming-surface.json +1 -1
- package/chunks/color-picker-swatches.json +1 -1
- package/chunks/command-palette.json +1 -1
- package/chunks/commerce-pricing-tiers.json +1 -1
- package/chunks/comparison-table.json +1 -1
- package/chunks/conversion-funnel-6step.json +1 -1
- package/chunks/dashboard-acquisition-panel.json +17 -39
- package/chunks/dashboard-admin-page.json +2 -2
- package/chunks/dashboard-audience-kpis.json +153 -3
- package/chunks/dashboard-audience-panel.json +4 -8
- package/chunks/dashboard-behavior-panel.json +1 -1
- package/chunks/dashboard-chart-recent.json +7 -5
- package/chunks/dashboard-cohort-retention.json +1 -1
- package/chunks/dashboard-conversion-panel.json +1 -1
- package/chunks/dashboard-country-list.json +1 -1
- package/chunks/dashboard-filter-bar.json +1 -1
- package/chunks/dashboard-funnel.json +1 -1
- package/chunks/dashboard-kpi-grid.json +7 -9
- package/chunks/dashboard-notifications-feed.json +2 -2
- package/chunks/dashboard-notifications-panel.json +3 -2
- package/chunks/dashboard-overview-panel.json +12 -15
- package/chunks/dashboard-page-header.json +1 -1
- package/chunks/dashboard-pages-table.json +1 -1
- package/chunks/dashboard-quick-actions.json +1 -1
- package/chunks/dashboard-reports-panel.json +3 -2
- package/chunks/dashboard-reports-table.json +2 -2
- package/chunks/dashboard-spark-cards.json +7 -5
- package/chunks/dashboard-storage-card.json +1 -1
- package/chunks/dashboard-tabs.json +1 -1
- package/chunks/dashboard-team-actions-storage.json +7 -5
- package/chunks/dashboard-team-list.json +1 -1
- package/chunks/dashboard-traffic-channels.json +136 -3
- package/chunks/dashboard-transactions-table.json +4 -3
- package/chunks/date-time-picker-form.json +1 -1
- package/chunks/destructive-confirm-modal.json +1 -1
- package/chunks/divider-text-label.json +1 -1
- package/chunks/doc-editor-shell.json +1 -1
- package/chunks/drawer-2fa-key.json +2 -2
- package/chunks/drawer-2fa-sms.json +2 -2
- package/chunks/drawer-2fa-totp.json +2 -2
- package/chunks/drawer-cancel-sub.json +2 -2
- package/chunks/drawer-change-plan.json +2 -2
- package/chunks/drawer-custom-roles.json +2 -2
- package/chunks/drawer-data-start.json +2 -2
- package/chunks/drawer-delete-account.json +2 -2
- package/chunks/drawer-delete-workspace.json +2 -2
- package/chunks/drawer-discord.json +2 -2
- package/chunks/drawer-figma.json +2 -2
- package/chunks/drawer-first-dashboard.json +2 -2
- package/chunks/drawer-gcal.json +2 -2
- package/chunks/drawer-github.json +2 -2
- package/chunks/drawer-invite.json +2 -2
- package/chunks/drawer-payment-method.json +4 -3
- package/chunks/drawer-report.json +2 -2
- package/chunks/drawer-revoke-session.json +2 -2
- package/chunks/drawer-role.json +2 -2
- package/chunks/drawer-slack.json +2 -2
- package/chunks/drawer-smtp.json +2 -2
- package/chunks/drawer-source.json +2 -2
- package/chunks/drawer-transaction.json +2 -2
- package/chunks/editor-code-pane.json +1 -1
- package/chunks/editor-page-shell.json +1 -1
- package/chunks/editor-preview-pane.json +1 -1
- package/chunks/empty-state-danger.json +57 -0
- package/chunks/empty-state-minimal.json +44 -0
- package/chunks/empty-state-warning.json +52 -0
- package/chunks/empty-state.json +1 -1
- package/chunks/error-404-actions.json +1 -1
- package/chunks/error-404.json +1 -1
- package/chunks/error-500-actions.json +1 -1
- package/chunks/error-500.json +1 -1
- package/chunks/error-maintenance-actions.json +1 -1
- package/chunks/error-maintenance.json +1 -1
- package/chunks/error-page-shell.json +1 -1
- package/chunks/faq-accordion.json +1 -1
- package/chunks/file-upload-dnd.json +1 -1
- package/chunks/footer-multi-column.json +1 -1
- package/chunks/footer-primary-only.json +1 -1
- package/chunks/form-page-shell.json +1 -1
- package/chunks/gallery-page-shell.json +1 -1
- package/chunks/hero-section-split.json +1 -1
- package/chunks/icon-text-row.json +1 -1
- package/chunks/image-carousel.json +1 -1
- package/chunks/image-tile.json +1 -1
- package/chunks/image-upload-preview.json +1 -1
- package/chunks/inventory-list-stock.json +1 -1
- package/chunks/kanban-board-3col.json +2 -10
- package/chunks/kanban-page-shell.json +1 -1
- package/chunks/kbd-shortcuts.json +1 -1
- package/chunks/labeled-textarea.json +1 -1
- package/chunks/leaderboard-table.json +1 -1
- package/chunks/linked-record-row.json +1 -1
- package/chunks/marketing-hero-cta.json +1 -1
- package/chunks/marketing-page-shell.json +1 -1
- package/chunks/masonry-gallery.json +1 -1
- package/chunks/member-edit-drawer.json +1 -1
- package/chunks/metadata-description-list.json +1 -1
- package/chunks/multi-step-wizard.json +1 -1
- package/chunks/notification-toast-row.json +1 -1
- package/chunks/onb-completion.json +1 -1
- package/chunks/onb-extension-install.json +1 -1
- package/chunks/onb-hero-welcome.json +1 -1
- package/chunks/onb-import-picker.json +1 -1
- package/chunks/onb-mobile-handoff.json +1 -1
- package/chunks/onb-notification-prefs.json +1 -1
- package/chunks/onb-persona-picker.json +1 -1
- package/chunks/onb-provider-tiles.json +1 -1
- package/chunks/onb-settings-review.json +1 -1
- package/chunks/onb-step-footer.json +1 -1
- package/chunks/onb-step-header.json +1 -1
- package/chunks/onb-step-progress.json +1 -1
- package/chunks/onb-step-shell.json +1 -1
- package/chunks/onb-story-pane.json +1 -1
- package/chunks/onb-tutorial-steps.json +1 -1
- package/chunks/pagination-controls.json +1 -1
- package/chunks/playground-a2ui.json +1 -1
- package/chunks/playground-app-shell.json +2 -2
- package/chunks/playground-chat.json +2 -2
- package/chunks/playground-construct-canvas.json +1 -1
- package/chunks/playground-gen-ui.json +1 -1
- package/chunks/playground-render-preview.json +1 -1
- package/chunks/playground-streams-bridge.json +1 -1
- package/chunks/playground-table-toolbar.json +1 -1
- package/chunks/popover-with-content.json +1 -1
- package/chunks/progress-tracker-milestones.json +1 -1
- package/chunks/real-time-metrics-dashboard.json +3 -2
- package/chunks/reg-address-form.json +1 -1
- package/chunks/reg-billing-card.json +1 -1
- package/chunks/reg-brand-scrape.json +1 -1
- package/chunks/reg-departments-toggle.json +1 -1
- package/chunks/reg-extended-profile.json +1 -1
- package/chunks/reg-final-done.json +2 -2
- package/chunks/reg-helpdesk-grid.json +1 -1
- package/chunks/reg-import-picker.json +1 -1
- package/chunks/reg-integrations-grid.json +1 -1
- package/chunks/reg-invite-form.json +1 -1
- package/chunks/reg-legal-entity.json +1 -1
- package/chunks/reg-org-chart-review.json +1 -1
- package/chunks/reg-profile-identity.json +1 -1
- package/chunks/reg-step-footer.json +1 -1
- package/chunks/reg-step-header.json +1 -1
- package/chunks/reg-step-progress.json +1 -1
- package/chunks/reg-step-shell.json +1 -1
- package/chunks/reg-story-pane.json +1 -1
- package/chunks/reg-success-summary.json +1 -1
- package/chunks/reg-team-size.json +1 -1
- package/chunks/reg-usecase-picker.json +1 -1
- package/chunks/reg-workspace-name.json +1 -1
- package/chunks/responsive-kpi-grid.json +166 -0
- package/chunks/search-with-filters.json +1 -1
- package/chunks/section-with-stack.json +1 -1
- package/chunks/settings-admin-page.json +5 -8
- package/chunks/settings-appearance.json +1 -1
- package/chunks/settings-billing-plan.json +2 -2
- package/chunks/settings-general-form.json +1 -1
- package/chunks/settings-integrations.json +8 -8
- package/chunks/settings-members-invite.json +1 -1
- package/chunks/settings-notifications.json +1 -1
- package/chunks/settings-page-shell.json +1 -1
- package/chunks/settings-profile-security.json +1 -1
- package/chunks/sidebar-collapsible-nav.json +1 -1
- package/chunks/slider-range-controls.json +1 -1
- package/chunks/tabs-with-panels.json +1 -1
- package/chunks/testimonial-grid.json +1 -1
- package/chunks/text-card.json +3 -5
- package/chunks/timeline-events.json +1 -1
- package/chunks/toolbar-icons.json +1 -1
- package/chunks/toolbar-tooltips.json +1 -1
- package/chunks/user-identity-row.json +1 -1
- package/chunks/user-profile-card.json +1 -1
- package/chunks/users-table-badge.json +1 -1
- package/chunks/video-player-controls.json +1 -1
- package/package.json +1 -1
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
},
|
|
15
15
|
"html": "<card-ui raw style=\"max-width: 32rem\">\n <header><!-- nested: auth-card-header --></header>\n\n <section><!-- nested: auth-card-content --></section>\n </card-ui>",
|
|
16
16
|
"source": "apps/user-flow/app/auth/sign-in/mfa/recovery/recovery.contents.html",
|
|
17
|
-
"captured_at": "2026-05-
|
|
17
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
18
18
|
}
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
},
|
|
12
12
|
"html": "<col-ui gap=\"2\" size=\"lg\">\n <button-ui text=\"Sign back in\" variant=\"primary\"></button-ui>\n <button-ui text=\"Use a different account\" icon=\"user-switch\"></button-ui>\n </col-ui>",
|
|
13
13
|
"source": "apps/user-flow/app/auth/sign-out/sign-out.contents.html",
|
|
14
|
-
"captured_at": "2026-05-
|
|
14
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
15
15
|
}
|
package/chunks/auth-signout.json
CHANGED
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
},
|
|
15
15
|
"html": "<card-ui raw style=\"max-width: 32rem\">\n <header><!-- nested: auth-card-header --></header>\n\n <section><!-- nested: auth-card-content --></section>\n </card-ui>",
|
|
16
16
|
"source": "apps/user-flow/app/auth/sign-out/sign-out.contents.html",
|
|
17
|
-
"captured_at": "2026-05-
|
|
17
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
18
18
|
}
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
},
|
|
13
13
|
"html": "<form size=\"lg\" action=\"/site/examples/auth/sign-up/verify\" method=\"get\">\n <col-ui gap=\"4\">\n <input-ui label=\"Email\" type=\"email\" name=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required></input-ui>\n <button-ui text=\"Continue with Email\" variant=\"primary\" type=\"submit\"></button-ui>\n </col-ui>\n </form>",
|
|
14
14
|
"source": "apps/user-flow/app/auth/sign-up/sign-up.contents.html",
|
|
15
|
-
"captured_at": "2026-05-
|
|
15
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
16
16
|
}
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
},
|
|
11
11
|
"html": "<col-ui gap=\"2\">\n <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"outline\"></button-ui>\n <button-ui text=\"Continue with GitHub\" icon=\"github-logo\" variant=\"outline\"></button-ui>\n </col-ui>",
|
|
12
12
|
"source": "apps/user-flow/app/auth/sign-up/sign-up.contents.html",
|
|
13
|
-
"captured_at": "2026-05-
|
|
13
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
14
14
|
}
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
},
|
|
14
14
|
"html": "<card-ui raw style=\"max-width: 32rem\">\n <header><!-- nested: auth-card-header --></header>\n\n <section><!-- nested: auth-card-content --></section>\n </card-ui>",
|
|
15
15
|
"source": "apps/user-flow/app/auth/sign-up/verify/verify.contents.html",
|
|
16
|
-
"captured_at": "2026-05-
|
|
16
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
17
17
|
}
|
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
},
|
|
11
11
|
"html": "<col-ui gap=\"2\">\n <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"outline\"></button-ui>\n <button-ui text=\"Continue with GitHub\" icon=\"github-logo\" variant=\"outline\"></button-ui>\n <button-ui text=\"Continue with SSO\" icon=\"building-office\" variant=\"outline\"></button-ui>\n </col-ui>",
|
|
12
12
|
"source": "apps/user-flow/app/auth/sign-in/sign-in.contents.html",
|
|
13
|
-
"captured_at": "2026-05-
|
|
13
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
14
14
|
}
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
},
|
|
12
12
|
"html": "<col-ui gap=\"2\" size=\"lg\">\n <button-ui text=\"Continue with Google\" icon=\"google-logo\" variant=\"primary\"></button-ui>\n <button-ui text=\"Continue with SSO\" icon=\"building-office\" variant=\"outline\"></button-ui>\n </col-ui>",
|
|
13
13
|
"source": "apps/user-flow/app/auth/sign-up/sso-only/sso-only.contents.html",
|
|
14
|
-
"captured_at": "2026-05-
|
|
14
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
15
15
|
}
|
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
},
|
|
15
15
|
"html": "<card-ui raw style=\"max-width: 32rem\">\n <header><!-- nested: auth-card-header --></header>\n\n <section><!-- nested: auth-card-content --></section>\n </card-ui>",
|
|
16
16
|
"source": "apps/user-flow/app/auth/sign-up/sso-only/sso-only.contents.html",
|
|
17
|
-
"captured_at": "2026-05-
|
|
17
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
18
18
|
}
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
},
|
|
16
16
|
"html": "<card-ui raw style=\"max-width: 32rem\">\n <header><!-- nested: auth-card-header --></header>\n\n <section><!-- nested: auth-card-content --></section>\n </card-ui>",
|
|
17
17
|
"source": "apps/user-flow/app/auth/accept-invite/accept-invite.contents.html",
|
|
18
|
-
"captured_at": "2026-05-
|
|
18
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
19
19
|
}
|
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
"attrs": {},
|
|
9
9
|
"html": "<header>\n <h3>Overview</h3>\n <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n </header>",
|
|
10
10
|
"source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
|
|
11
|
-
"captured_at": "2026-05-
|
|
11
|
+
"captured_at": "2026-05-22T20:26:33.817Z"
|
|
12
12
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"gap": "4",
|
|
13
13
|
"hidden": ""
|
|
14
14
|
},
|
|
15
|
-
"html": "<col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden>\n <grid-ui columns=\"3\" gap=\"4\"><!-- nested: dashboard-traffic-channels --></grid-ui>\n </col-ui>",
|
|
15
|
+
"html": "<col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden>\n <grid-ui columns=\"1 3@md\" gap=\"4\"><!-- nested: dashboard-traffic-channels --></grid-ui>\n </col-ui>",
|
|
16
16
|
"source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
|
|
17
17
|
"metadata": {
|
|
18
18
|
"domain": "dashboard",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"layout": "panel"
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
-
"captured_at": "2026-05-
|
|
39
|
+
"captured_at": "2026-05-22T20:26:33.817Z",
|
|
40
40
|
"template": [
|
|
41
41
|
{
|
|
42
42
|
"id": "text",
|
|
@@ -51,32 +51,10 @@
|
|
|
51
51
|
"textContent": "Sessions per day"
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
|
-
"id": "
|
|
55
|
-
"component": "
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"id": "segment-2",
|
|
61
|
-
"component": "Segment",
|
|
62
|
-
"text": "30d",
|
|
63
|
-
"value": "30d"
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
"id": "segment-3",
|
|
67
|
-
"component": "Segment",
|
|
68
|
-
"text": "90d",
|
|
69
|
-
"value": "90d"
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"id": "segmented-control",
|
|
73
|
-
"component": "SegmentedControl",
|
|
74
|
-
"value": "30d",
|
|
75
|
-
"children": [
|
|
76
|
-
"segment",
|
|
77
|
-
"segment-2",
|
|
78
|
-
"segment-3"
|
|
79
|
-
]
|
|
54
|
+
"id": "text-3",
|
|
55
|
+
"component": "Text",
|
|
56
|
+
"variant": "body",
|
|
57
|
+
"size": "sm"
|
|
80
58
|
},
|
|
81
59
|
{
|
|
82
60
|
"id": "header",
|
|
@@ -84,7 +62,7 @@
|
|
|
84
62
|
"children": [
|
|
85
63
|
"text",
|
|
86
64
|
"text-2",
|
|
87
|
-
"
|
|
65
|
+
"text-3"
|
|
88
66
|
]
|
|
89
67
|
},
|
|
90
68
|
{
|
|
@@ -99,11 +77,11 @@
|
|
|
99
77
|
"id": "section",
|
|
100
78
|
"component": "Section",
|
|
101
79
|
"children": [
|
|
102
|
-
"column
|
|
80
|
+
"column"
|
|
103
81
|
]
|
|
104
82
|
},
|
|
105
83
|
{
|
|
106
|
-
"id": "column
|
|
84
|
+
"id": "column",
|
|
107
85
|
"component": "Column",
|
|
108
86
|
"children": [
|
|
109
87
|
"analytics-traffic"
|
|
@@ -118,13 +96,13 @@
|
|
|
118
96
|
]
|
|
119
97
|
},
|
|
120
98
|
{
|
|
121
|
-
"id": "text-
|
|
99
|
+
"id": "text-4",
|
|
122
100
|
"component": "Text",
|
|
123
101
|
"variant": "heading",
|
|
124
102
|
"textContent": "Acquisition channels"
|
|
125
103
|
},
|
|
126
104
|
{
|
|
127
|
-
"id": "text-
|
|
105
|
+
"id": "text-5",
|
|
128
106
|
"component": "Text",
|
|
129
107
|
"color": "subtle",
|
|
130
108
|
"textContent": "Where sessions come from"
|
|
@@ -133,8 +111,8 @@
|
|
|
133
111
|
"id": "header-2",
|
|
134
112
|
"component": "Header",
|
|
135
113
|
"children": [
|
|
136
|
-
"text-
|
|
137
|
-
"text-
|
|
114
|
+
"text-4",
|
|
115
|
+
"text-5"
|
|
138
116
|
]
|
|
139
117
|
},
|
|
140
118
|
{
|
|
@@ -148,11 +126,11 @@
|
|
|
148
126
|
"id": "section-2",
|
|
149
127
|
"component": "Section",
|
|
150
128
|
"children": [
|
|
151
|
-
"column-
|
|
129
|
+
"column-2"
|
|
152
130
|
]
|
|
153
131
|
},
|
|
154
132
|
{
|
|
155
|
-
"id": "column-
|
|
133
|
+
"id": "column-2",
|
|
156
134
|
"component": "Column",
|
|
157
135
|
"children": [
|
|
158
136
|
"analytics-channels"
|
|
@@ -169,7 +147,7 @@
|
|
|
169
147
|
{
|
|
170
148
|
"id": "grid-2",
|
|
171
149
|
"component": "Grid",
|
|
172
|
-
"columns": "3",
|
|
150
|
+
"columns": "1 3@md",
|
|
173
151
|
"gap": "4",
|
|
174
152
|
"children": [
|
|
175
153
|
"card",
|
|
@@ -179,7 +157,7 @@
|
|
|
179
157
|
{
|
|
180
158
|
"id": "grid",
|
|
181
159
|
"component": "Grid",
|
|
182
|
-
"columns": "3",
|
|
160
|
+
"columns": "1 3@md",
|
|
183
161
|
"gap": "4",
|
|
184
162
|
"children": [
|
|
185
163
|
"grid-2"
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{
|
|
13
13
|
"name": "page-content",
|
|
14
14
|
"tagName": "admin-page-body",
|
|
15
|
-
"html": "<section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"complex\"\n data-chunk-tags-layout=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column KPI metric grid — each card shows a stat label, large value, and delta indicator.\"\n data-chunk-keywords=\"kpi metrics stats grid dashboard cards numbers metric-tiles overview\">\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 data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Recent activity chart band with header (title + caption) and chart-area placeholder.\"\n data-chunk-keywords=\"chart recent activity sparkline timeseries metrics graph trend\"\n data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"card\">\n <card-ui span=\"3\">\n <header data-chunk=\"card-header-with-description\">\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\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column sparkline stat cards — each card pairs a KPI value with a small trend sparkline chart.\"\n data-chunk-keywords=\"sparkline stat cards trend mini-chart kpi metrics dashboard trends indicators\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"3\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n data-chunk-keywords=\"team members quick actions storage usage limits sidebar\"\n data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"row\">\n <card-ui data-chunk=\"dashboard-team-list\">\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 </col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n data-chunk-domain=\"navigation\"\n data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n <card-ui>\n <section>\n <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n <tag-ui text=\"Country: United States\" removable></tag-ui>\n <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n <span data-spacer></span>\n <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"4\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\">\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui size=\"sm\"\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\">\n <card-ui>\n <header>\n <h3>Top countries</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇺🇸</text-ui>\n <text-ui weight=\"semibold\" grow>United States</text-ui>\n <text-ui>14,320</text-ui>\n <text-ui color=\"subtle\">50.4%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇩🇪</text-ui>\n <text-ui weight=\"semibold\" grow>Germany</text-ui>\n <text-ui>3,892</text-ui>\n <text-ui color=\"subtle\">13.7%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇬🇧</text-ui>\n <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n <text-ui>2,841</text-ui>\n <text-ui color=\"subtle\">10.0%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇯🇵</text-ui>\n <text-ui weight=\"semibold\" grow>Japan</text-ui>\n <text-ui>1,920</text-ui>\n <text-ui color=\"subtle\">6.8%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇨🇦</text-ui>\n <text-ui weight=\"semibold\" grow>Canada</text-ui>\n <text-ui>1,450</text-ui>\n <text-ui color=\"subtle\">5.1%</text-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui columns=\"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 </col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n data-chunk-keywords=\"behavior events user interactions engagement actions\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\">\n <card-ui>\n <header>\n <h3>Top pages</h3>\n <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <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 </col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\">\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 </col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Notifications panel: recent alerts and notifications list.\"\n data-chunk-keywords=\"notifications alerts events feed updates messages\"\n data-chunk-related=\"dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"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 </col-ui>\n <!-- /notifications -->\n </div>\n </section>"
|
|
15
|
+
"html": "<section>\n <div data-dashboard-content>\n <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"complex\"\n data-chunk-tags-layout=\"panel\">\n <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-kpi-grid\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column KPI metric grid — each card shows a stat label, large value, and delta indicator.\"\n data-chunk-keywords=\"kpi metrics stats grid dashboard cards numbers metric-tiles overview responsive breakpoint\">\n <card-ui\n ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Recent activity chart band with header (title + caption) and chart-area placeholder.\"\n data-chunk-keywords=\"chart recent activity sparkline timeseries metrics graph trend responsive breakpoint\"\n data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"card\">\n <card-ui span=\"3\">\n <header data-chunk=\"card-header-with-description\">\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\">\n <card-ui>\n <section>\n <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n </section>\n </card-ui>\n <card-ui>\n <section>\n <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n </section>\n <footer>\n <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n </footer>\n </card-ui>\n <card-ui span=\"2\">\n <header>\n <h3>Recent Sales</h3>\n <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n <text-ui strong>+$1,999.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n <text-ui strong>+$299.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n <text-ui strong>+$99.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">will@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"2\" align=\"center\" grow>\n <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n <col-ui gap=\"0\" grow>\n <row-ui>\n <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n <text-ui strong>+$39.00</text-ui>\n </row-ui>\n <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n </col-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-spark-cards\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"4-column sparkline stat cards — each card pairs a KPI value with a small trend sparkline chart.\"\n data-chunk-keywords=\"sparkline stat cards trend mini-chart kpi metrics dashboard trends indicators responsive breakpoint\">\n <card-ui>\n <header>\n <h3>Page Views</h3>\n <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Bounce Rate</h3>\n <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Session Duration</h3>\n <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Conversion</h3>\n <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n </header>\n <section bleed>\n <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n Supports ?state=empty|loading|error URL params for state-coverage\n demos; the default state renders the populated table. -->\n <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n <card-ui>\n <header>\n <h3>Recent Transactions</h3>\n <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n <span slot=\"action\" size=\"sm\">\n <menu-ui id=\"tx-state-menu\">\n <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n </menu-ui>\n </span>\n </header>\n <section bleed data-tx-surface>\n <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"row\">\n <card-ui data-chunk=\"dashboard-team-list\">\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 </col-ui>\n <!-- /overview -->\n\n <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <!-- Filter bar (cross-tab across the four analytics panels) -->\n <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n data-chunk-domain=\"navigation\"\n data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n <card-ui>\n <section>\n <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n <tag-ui text=\"Country: United States\" removable></tag-ui>\n <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n <span data-spacer></span>\n <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </section>\n </card-ui>\n </grid-ui>\n\n <!-- KPI ROW -->\n <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n <card-ui\n ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n ></card-ui>\n <card-ui\n ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n ></card-ui>\n </grid-ui>\n\n <!-- TOP COUNTRIES -->\n <grid-ui data-chunk=\"dashboard-country-list\">\n <card-ui>\n <header>\n <h3>Top countries</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n </header>\n <section>\n <list-ui divider>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇺🇸</text-ui>\n <text-ui weight=\"semibold\" grow>United States</text-ui>\n <text-ui>14,320</text-ui>\n <text-ui color=\"subtle\">50.4%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇩🇪</text-ui>\n <text-ui weight=\"semibold\" grow>Germany</text-ui>\n <text-ui>3,892</text-ui>\n <text-ui color=\"subtle\">13.7%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇬🇧</text-ui>\n <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n <text-ui>2,841</text-ui>\n <text-ui color=\"subtle\">10.0%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇯🇵</text-ui>\n <text-ui weight=\"semibold\" grow>Japan</text-ui>\n <text-ui>1,920</text-ui>\n <text-ui color=\"subtle\">6.8%</text-ui>\n </row-ui>\n </list-item-ui>\n <list-item-ui>\n <row-ui gap=\"3\" align=\"center\" grow>\n <text-ui size=\"lg\">🇨🇦</text-ui>\n <text-ui weight=\"semibold\" grow>Canada</text-ui>\n <text-ui>1,450</text-ui>\n <text-ui color=\"subtle\">5.1%</text-ui>\n </row-ui>\n </list-item-ui>\n </list-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /audience -->\n\n <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n data-chunk-kind=\"block\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n <card-ui span=\"2\">\n <header>\n <h3>Traffic</h3>\n <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n <span slot=\"action\" size=\"sm\">\n <segmented-ui value=\"30d\" size=\"sm\">\n <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n </segmented-ui>\n </span>\n </header>\n <section>\n <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n </section>\n </card-ui>\n <card-ui>\n <header>\n <h3>Acquisition channels</h3>\n <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n </header>\n <section>\n <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /acquisition -->\n\n <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n data-chunk-keywords=\"behavior events user interactions engagement actions\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-pages-table\">\n <card-ui>\n <header>\n <h3>Top pages</h3>\n <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n </header>\n <section bleed>\n <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /behavior -->\n\n <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n data-chunk-domain=\"data\"\n data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n <card-ui>\n <header>\n <h3>Conversion funnel</h3>\n <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 </col-ui>\n <!-- /conversion -->\n\n <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n data-chunk-tags-complexity=\"moderate\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"dashboard-reports-table\">\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\" size=\"sm\">\n <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n </span>\n </header>\n <section bleed>\n <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n </section>\n </card-ui>\n </grid-ui>\n </col-ui>\n <!-- /reports -->\n\n <!-- ═══════════════════════ NOTIFICATIONS TAB ═══════════════════════ -->\n <col-ui data-tab-panel=\"notifications\" gap=\"4\" hidden data-chunk=\"dashboard-notifications-panel\" data-chunk-kind=\"panel\"\n data-chunk-domain=\"dashboard\"\n data-chunk-description=\"Notifications panel: recent alerts and notifications list.\"\n data-chunk-keywords=\"notifications alerts events feed updates messages\"\n data-chunk-related=\"dashboard-team-actions-storage\"\n data-chunk-tags-complexity=\"simple\"\n data-chunk-tags-layout=\"panel\">\n <grid-ui data-chunk=\"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\" size=\"sm\">\n <row-ui gap=\"2\" align=\"center\">\n <segmented-ui value=\"all\" size=\"sm\">\n <segment-ui value=\"all\" text=\"All\"></segment-ui>\n <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n </segmented-ui>\n <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n </row-ui>\n </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 </col-ui>\n <!-- /notifications -->\n </div>\n </section>"
|
|
16
16
|
}
|
|
17
17
|
],
|
|
18
18
|
"nested": [
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"layout": "page"
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
|
-
"captured_at": "2026-05-
|
|
77
|
+
"captured_at": "2026-05-22T20:26:33.817Z",
|
|
78
78
|
"template": [
|
|
79
79
|
{
|
|
80
80
|
"id": "root",
|