@adia-ai/a2ui-corpus 0.6.42 → 0.6.44

package/chunks/commerce-pricing-tiers.json

@@ -29,7 +29,7 @@
       "comparison"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -53,6 +53,7 @@
     {
       "id": "row",
       "component": "Row",
+      "slot": "heading",
       "align": "baseline",
       "gap": "2",
       "children": [
@@ -65,6 +66,7 @@
       "id": "text-4",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "Up to 5 members · 10 projects · community support"
     },
     {
@@ -99,6 +101,7 @@
     {
       "id": "row-2",
       "component": "Row",
+      "slot": "heading",
       "align": "baseline",
       "gap": "2",
       "children": [
@@ -139,6 +142,7 @@
     {
       "id": "column-2",
       "component": "Column",
+      "slot": "description",
       "gap": "2",
       "children": [
         "text-8",
@@ -178,6 +182,7 @@
     {
       "id": "row-4",
       "component": "Row",
+      "slot": "heading",
       "align": "baseline",
       "gap": "2",
       "children": [
@@ -218,6 +223,7 @@
     {
       "id": "column-3",
       "component": "Column",
+      "slot": "description",
       "gap": "2",
       "children": [
         "text-13",
@@ -256,6 +262,7 @@
     {
       "id": "row-6",
       "component": "Row",
+      "slot": "heading",
       "align": "baseline",
       "gap": "2",
       "children": [
@@ -296,6 +303,7 @@
     {
       "id": "column-4",
       "component": "Column",
+      "slot": "description",
       "gap": "2",
       "children": [
         "text-18",
@@ -334,6 +342,7 @@
     {
       "id": "row-8",
       "component": "Row",
+      "slot": "heading",
       "align": "baseline",
       "gap": "2",
       "children": [
@@ -346,6 +355,7 @@
       "id": "text-23",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "None of these fit? Tell us what you need and we'll quote a custom plan within one business day."
     },
     {

package/chunks/comparison-table.json

@@ -22,7 +22,7 @@
       "grid-comparison"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",

package/chunks/contact-form.json

@@ -25,7 +25,7 @@
       "feedback"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -37,6 +37,7 @@
       "id": "text-2",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "We'll get back to you within 24 hours."
     },
     {

package/chunks/conversion-funnel-6step.json

@@ -22,7 +22,7 @@
       "marketing"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -34,6 +34,7 @@
       "id": "text-2",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "6 stages from visit to purchase"
     },
     {

package/chunks/dashboard-acquisition-panel.json

@@ -36,7 +36,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -47,14 +47,47 @@
     {
       "id": "text-2",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Sessions per day"
     },
+    {
+      "id": "segment",
+      "component": "Segment",
+      "text": "7d",
+      "value": "7d"
+    },
+    {
+      "id": "segment-2",
+      "component": "Segment",
+      "text": "30d",
+      "value": "30d"
+    },
+    {
+      "id": "segment-3",
+      "component": "Segment",
+      "text": "90d",
+      "value": "90d"
+    },
+    {
+      "id": "segmented-control",
+      "component": "SegmentedControl",
+      "value": "30d",
+      "children": [
+        "segment",
+        "segment-2",
+        "segment-3"
+      ]
+    },
     {
       "id": "text-3",
       "component": "Text",
       "variant": "body",
-      "size": "sm"
+      "slot": "action",
+      "size": "sm",
+      "children": [
+        "segmented-control"
+      ]
     },
     {
       "id": "header",
@@ -104,6 +137,7 @@
     {
       "id": "text-5",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Where sessions come from"
     },

package/chunks/dashboard-admin-page.json

@@ -12,7 +12,7 @@
     {
       "name": "page-content",
       "tagName": "admin-page-body",
-      "html": "<section>\n      <div data-dashboard-content>\n        <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n          data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n          data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n          data-chunk-tags-complexity=\"complex\"\n          data-chunk-tags-layout=\"panel\">\n          <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n            data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n            <card-ui\n              ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n          <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n            data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n            data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n            data-chunk-tags-complexity=\"simple\"\n            data-chunk-tags-layout=\"card\">\n            <card-ui span=\"3\">\n              <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n    data-chunk-keywords=\"card header heading description subtitle pattern\">\n                <h3>Overview</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n              </header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n                  <grid-ui columns=\"1 2@sm\" gap=\"3\">\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n                      </section>\n                    </card-ui>\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n                      </section>\n                    </card-ui>\n                  </grid-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n              </footer>\n            </card-ui>\n            <card-ui span=\"2\">\n              <header>\n                <h3>Recent Sales</h3>\n                <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n                          <text-ui strong>+$1,999.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n                          <text-ui strong>+$299.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n                          <text-ui strong>+$99.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">will@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n            data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n            <card-ui>\n              <header>\n                <h3>Page Views</h3>\n                <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Bounce Rate</h3>\n                <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Session Duration</h3>\n                <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Conversion</h3>\n                <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n         Supports ?state=empty|loading|error URL params for state-coverage\n         demos; the default state renders the populated table. -->\n          <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n            data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n            <card-ui>\n              <header>\n                <h3>Recent Transactions</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n                <span slot=\"action\" size=\"sm\">\n                  <menu-ui id=\"tx-state-menu\">\n                    <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n                    <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n                    <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n                    <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n                    <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n                  </menu-ui>\n                </span>\n              </header>\n              <section bleed data-tx-surface>\n                <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n          <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n            data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n            data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n            data-chunk-tags-complexity=\"moderate\"\n            data-chunk-tags-layout=\"row\">\n            <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n    data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n              <header>\n                <h3>Team Members</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Alex Chen\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Alex Chen</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Engineering Lead</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Sarah Miller</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Product Designer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"James Park\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>James Park</text-ui>\n                          <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Backend Engineer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Maria Lopez</text-ui>\n                          <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Data Analyst</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n\n            <card-ui data-chunk=\"dashboard-quick-actions\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Quick actions card — common shortcut buttons for frequent dashboard tasks.\"\n    data-chunk-keywords=\"dashboard quick actions shortcuts buttons frequent tasks\">\n              <header><h3>Quick Actions</h3></header>\n              <section>\n                <action-list-ui>\n                  <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n                  <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n                  <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n                  <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n                  <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n                  <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n                </action-list-ui>\n              </section>\n            </card-ui>\n\n            <card-ui data-chunk=\"dashboard-storage-card\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Storage usage card — used / total storage bar with tier breakdown and upgrade CTA.\"\n    data-chunk-keywords=\"dashboard storage usage quota bar tier upgrade\">\n              <header>\n                <h3>Storage</h3>\n                <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n              </header>\n              <section>\n                <col-ui gap=\"2\">\n                  <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n                  <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n              </footer>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /overview -->\n\n        <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n          data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <!-- Filter bar (cross-tab across the four analytics panels) -->\n          <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"navigation\"\n            data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n            data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n            <card-ui>\n              <section>\n                <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n                  <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n                  <tag-ui text=\"Country: United States\" removable></tag-ui>\n                  <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n                  <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n                  <span data-spacer></span>\n                  <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- Analytics: bar + line side by side -->\n          <grid-ui columns=\"1 2@md\" gap=\"4\" data-chunk=\"analytics-chart\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Analytics dashboard with bar chart and line chart displayed side by side. Revenue bar chart on the left, sessions trend line chart on the right.\"\n            data-chunk-keywords=\"analytics chart bar chart line chart side by side dashboard two column grid revenue sessions trend data visualization bar line analytics-chart\">\n            <card-ui>\n              <header>\n                <h3>Revenue</h3>\n                <p slot=\"description\">Monthly revenue breakdown</p>\n              </header>\n              <section>\n                <chart-ui type=\"bar\" x=\"month\" y=\"revenue\" hide-values\n                  data='[{\"month\":\"Jan\",\"revenue\":3200},{\"month\":\"Feb\",\"revenue\":4100},{\"month\":\"Mar\",\"revenue\":3800},{\"month\":\"Apr\",\"revenue\":5200},{\"month\":\"May\",\"revenue\":4800},{\"month\":\"Jun\",\"revenue\":6100}]'></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Sessions</h3>\n                <p slot=\"description\">Daily session trend</p>\n              </header>\n              <section>\n                <chart-ui type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values\n                  data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- KPI ROW -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n            data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n            <card-ui\n              ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- TOP COUNTRIES -->\n          <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n    data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n            <card-ui>\n              <header>\n                <h3>Top countries</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇺🇸</text-ui>\n                      <text-ui weight=\"semibold\" grow>United States</text-ui>\n                      <text-ui>14,320</text-ui>\n                      <text-ui color=\"subtle\">50.4%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇩🇪</text-ui>\n                      <text-ui weight=\"semibold\" grow>Germany</text-ui>\n                      <text-ui>3,892</text-ui>\n                      <text-ui color=\"subtle\">13.7%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇬🇧</text-ui>\n                      <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n                      <text-ui>2,841</text-ui>\n                      <text-ui color=\"subtle\">10.0%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇯🇵</text-ui>\n                      <text-ui weight=\"semibold\" grow>Japan</text-ui>\n                      <text-ui>1,920</text-ui>\n                      <text-ui color=\"subtle\">6.8%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇨🇦</text-ui>\n                      <text-ui weight=\"semibold\" grow>Canada</text-ui>\n                      <text-ui>1,450</text-ui>\n                      <text-ui color=\"subtle\">5.1%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /audience -->\n\n        <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n          data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n            data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\" size=\"sm\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Acquisition channels</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /acquisition -->\n\n        <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n          data-chunk-keywords=\"behavior events user interactions engagement actions\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-pages-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Top pages table card — page title, views, bounce rate, avg time on page.\"\n    data-chunk-keywords=\"dashboard pages table analytics top content views bounce rate\">\n            <card-ui>\n              <header>\n                <h3>Top pages</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /behavior -->\n\n        <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n          data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n          data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n            data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n            <card-ui>\n              <header>\n                <h3>Conversion funnel</h3>\n                <p slot=\"description\">Visit → Sign up → Activate → Convert</p>\n              </header>\n              <section>\n                <col-ui gap=\"3\">\n                  <row-ui align=\"center\" gap=\"3\">\n                    <col-ui gap=\"0\" grow>\n                      <text-ui strong>Visited landing page</text-ui>\n                      <text-ui color=\"subtle\">28,432 visitors</text-ui>\n                    </col-ui>\n                    <text-ui strong>100%</text-ui>\n                  </row-ui>\n                  <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n                  <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n                  <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n                </col-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <grid-ui data-chunk=\"dashboard-cohort-retention\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Cohort retention table card — weekly retention heatmap grid showing user cohort activity.\"\n    data-chunk-keywords=\"dashboard cohort retention heatmap table analytics users weekly\">\n            <card-ui>\n              <header>\n                <h3>Retention by signup week</h3>\n                <text-ui slot=\"description\" color=\"subtle\">% of users still active in week N</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-cohort\" raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /conversion -->\n\n        <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n          data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n    data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n            <card-ui>\n              <header>\n                <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=\"notification-badges-feed\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Notification center feed card — recent alerts and activity with unread badge-ui indicators per item, segmented filter (all/unread/mentions), and mark-all-read action.\"\n    data-chunk-keywords=\"notification center notifications feed activity timeline unread badge badge-ui notification badge alert indicator mark read segmented filter mentions dashboard badges notification-badges center unread\">\n            <card-ui>\n              <header>\n                <row-ui gap=\"3\" align=\"center\">\n                  <col-ui gap=\"0\" grow>\n                    <h3>Notifications</h3>\n                    <p slot=\"description\">System and team activity</p>\n                  </col-ui>\n                  <segmented-ui value=\"all\" size=\"sm\">\n                    <segment-ui value=\"all\" text=\"All\"></segment-ui>\n                    <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n                    <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </header>\n              <section bleed>\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>"
+      "html": "<section>\n      <div data-dashboard-content>\n        <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n          data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n          data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n          data-chunk-tags-complexity=\"complex\"\n          data-chunk-tags-layout=\"panel\">\n          <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n            data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n            <card-ui\n              ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n          <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n            data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n            data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n            data-chunk-tags-complexity=\"simple\"\n            data-chunk-tags-layout=\"card\">\n            <card-ui span=\"3\">\n              <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n    data-chunk-keywords=\"card header heading description subtitle pattern\">\n                <h3>Overview</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n              </header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n                  <grid-ui columns=\"1 2@sm\" gap=\"3\">\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n                      </section>\n                    </card-ui>\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n                      </section>\n                    </card-ui>\n                  </grid-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n              </footer>\n            </card-ui>\n            <card-ui span=\"2\">\n              <header>\n                <h3>Recent Sales</h3>\n                <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n                          <text-ui strong>+$1,999.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n                          <text-ui strong>+$299.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n                          <text-ui strong>+$99.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">will@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n            data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n            <card-ui>\n              <header>\n                <h3>Page Views</h3>\n                <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Bounce Rate</h3>\n                <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Session Duration</h3>\n                <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Conversion</h3>\n                <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n         Supports ?state=empty|loading|error URL params for state-coverage\n         demos; the default state renders the populated table. -->\n          <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n            data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n            <card-ui>\n              <header>\n                <h3>Recent Transactions</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n                <span slot=\"action\" size=\"sm\">\n                  <menu-ui id=\"tx-state-menu\">\n                    <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n                    <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n                    <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n                    <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n                    <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n                  </menu-ui>\n                </span>\n              </header>\n              <section bleed data-tx-surface>\n                <table-ui id=\"dash-transactions\" sortable striped raw paginate=\"5\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n          <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n            data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n            data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n            data-chunk-tags-complexity=\"moderate\"\n            data-chunk-tags-layout=\"row\">\n            <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n    data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n              <header>\n                <h3>Team Members</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Alex Chen\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Alex Chen</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Engineering Lead</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Sarah Miller</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Product Designer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"James Park\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>James Park</text-ui>\n                          <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Backend Engineer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Maria Lopez</text-ui>\n                          <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Data Analyst</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n\n            <card-ui data-chunk=\"dashboard-quick-actions\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Quick actions card — common shortcut buttons for frequent dashboard tasks.\"\n    data-chunk-keywords=\"dashboard quick actions shortcuts buttons frequent tasks\">\n              <header><h3>Quick Actions</h3></header>\n              <section>\n                <action-list-ui>\n                  <action-item-ui icon=\"plus\" text=\"New Project\" value=\"new\"></action-item-ui>\n                  <action-item-ui icon=\"users\" text=\"Invite Team\" value=\"invite\"></action-item-ui>\n                  <action-item-ui icon=\"download\" text=\"Export Data\" value=\"export\"></action-item-ui>\n                  <action-item-ui icon=\"chart-bar\" text=\"View Reports\" value=\"reports\"></action-item-ui>\n                  <action-item-ui icon=\"gear\" text=\"Settings\" value=\"settings\"></action-item-ui>\n                  <action-item-ui icon=\"question\" text=\"Help Center\" value=\"help\"></action-item-ui>\n                </action-list-ui>\n              </section>\n            </card-ui>\n\n            <card-ui data-chunk=\"dashboard-storage-card\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Storage usage card — used / total storage bar with tier breakdown and upgrade CTA.\"\n    data-chunk-keywords=\"dashboard storage usage quota bar tier upgrade\">\n              <header>\n                <h3>Storage</h3>\n                <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n              </header>\n              <section>\n                <col-ui gap=\"2\">\n                  <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n                  <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n              </footer>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /overview -->\n\n        <!-- ═══════════════════════ AUDIENCE TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"audience\" gap=\"4\" hidden data-chunk=\"dashboard-audience-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Audience analytics panel: filter bar + audience KPIs + country breakdown list.\"\n          data-chunk-keywords=\"audience analytics demographics countries geography filter kpis\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-acquisition-panel, dashboard-behavior-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <!-- Filter bar (cross-tab across the four analytics panels) -->\n          <grid-ui data-chunk=\"dashboard-filter-bar\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"navigation\"\n            data-chunk-description=\"Toolbar/filter bar — search input + filter dropdowns + date-range picker + action buttons in one row.\"\n            data-chunk-keywords=\"toolbar filter-bar search filters dropdowns date-range actions controls toolbar-icons\">\n            <card-ui>\n              <section>\n                <row-ui gap=\"2\" align=\"center\" wrap data-filter-bar>\n                  <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n                  <tag-ui text=\"Country: United States\" removable></tag-ui>\n                  <tag-ui text=\"Device: Desktop\" removable></tag-ui>\n                  <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n                  <span data-spacer></span>\n                  <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- Analytics: bar + line side by side -->\n          <grid-ui columns=\"1 2@md\" gap=\"4\" data-chunk=\"analytics-chart\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Analytics dashboard with bar chart and line chart displayed side by side. Revenue bar chart on the left, sessions trend line chart on the right.\"\n            data-chunk-keywords=\"analytics chart bar chart line chart side by side dashboard two column grid revenue sessions trend data visualization bar line analytics-chart\">\n            <card-ui>\n              <header>\n                <h3>Revenue</h3>\n                <p slot=\"description\">Monthly revenue breakdown</p>\n              </header>\n              <section>\n                <chart-ui type=\"bar\" x=\"month\" y=\"revenue\" hide-values\n                  data='[{\"month\":\"Jan\",\"revenue\":3200},{\"month\":\"Feb\",\"revenue\":4100},{\"month\":\"Mar\",\"revenue\":3800},{\"month\":\"Apr\",\"revenue\":5200},{\"month\":\"May\",\"revenue\":4800},{\"month\":\"Jun\",\"revenue\":6100}]'></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Sessions</h3>\n                <p slot=\"description\">Daily session trend</p>\n              </header>\n              <section>\n                <chart-ui type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values\n                  data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- KPI ROW -->\n          <grid-ui columns=\"2 4@md\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n            data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n            <card-ui\n              ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- TOP COUNTRIES -->\n          <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n    data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n            <card-ui>\n              <header>\n                <h3>Top countries</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇺🇸</text-ui>\n                      <text-ui weight=\"semibold\" grow>United States</text-ui>\n                      <text-ui>14,320</text-ui>\n                      <text-ui color=\"subtle\">50.4%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇩🇪</text-ui>\n                      <text-ui weight=\"semibold\" grow>Germany</text-ui>\n                      <text-ui>3,892</text-ui>\n                      <text-ui color=\"subtle\">13.7%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇬🇧</text-ui>\n                      <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n                      <text-ui>2,841</text-ui>\n                      <text-ui color=\"subtle\">10.0%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇯🇵</text-ui>\n                      <text-ui weight=\"semibold\" grow>Japan</text-ui>\n                      <text-ui>1,920</text-ui>\n                      <text-ui color=\"subtle\">6.8%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇨🇦</text-ui>\n                      <text-ui weight=\"semibold\" grow>Canada</text-ui>\n                      <text-ui>1,450</text-ui>\n                      <text-ui color=\"subtle\">5.1%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /audience -->\n\n        <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n          data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui columns=\"1 3@md\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n            data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\" size=\"sm\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Acquisition channels</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /acquisition -->\n\n        <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n          data-chunk-keywords=\"behavior events user interactions engagement actions\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-pages-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Top pages table card — page title, views, bounce rate, avg time on page.\"\n    data-chunk-keywords=\"dashboard pages table analytics top content views bounce rate\">\n            <card-ui>\n              <header>\n                <h3>Top pages</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /behavior -->\n\n        <!-- ═══════════════════════ CONVERSION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"conversion\" gap=\"4\" hidden data-chunk=\"dashboard-conversion-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Conversion analytics panel: funnel + goals.\"\n          data-chunk-keywords=\"conversion funnel goals checkout signup purchases revenue\"\n          data-chunk-related=\"dashboard-acquisition-panel, dashboard-reports-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-funnel\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Conversion funnel visualization — sequential stages with counts, drop-off rates, and conversion percentages.\"\n            data-chunk-keywords=\"funnel conversion stages drop-off rate analytics metrics flow customer-journey\">\n            <card-ui>\n              <header>\n                <h3>Conversion funnel</h3>\n                <p slot=\"description\">Visit → Sign up → Activate → Convert</p>\n              </header>\n              <section>\n                <col-ui gap=\"3\">\n                  <row-ui align=\"center\" gap=\"3\">\n                    <col-ui gap=\"0\" grow>\n                      <text-ui strong>Visited landing page</text-ui>\n                      <text-ui color=\"subtle\">28,432 visitors</text-ui>\n                    </col-ui>\n                    <text-ui strong>100%</text-ui>\n                  </row-ui>\n                  <progress-row-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-row-ui>\n                  <progress-row-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-row-ui>\n                  <progress-row-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-row-ui>\n                </col-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <grid-ui data-chunk=\"dashboard-cohort-retention\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Cohort retention table card — weekly retention heatmap grid showing user cohort activity.\"\n    data-chunk-keywords=\"dashboard cohort retention heatmap table analytics users weekly\">\n            <card-ui>\n              <header>\n                <h3>Retention by signup week</h3>\n                <text-ui slot=\"description\" color=\"subtle\">% of users still active in week N</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-cohort\" raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /conversion -->\n\n        <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n          data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n    data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n            <card-ui>\n              <header>\n                <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=\"notification-badges-feed\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Notification center feed card — recent alerts and activity with unread badge-ui indicators per item, segmented filter (all/unread/mentions), and mark-all-read action.\"\n    data-chunk-keywords=\"notification center notifications feed activity timeline unread badge badge-ui notification badge alert indicator mark read segmented filter mentions dashboard badges notification-badges center unread\">\n            <card-ui>\n              <header>\n                <h3>Notifications</h3>\n                <p slot=\"description\">System and team activity</p>\n                <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n                  <segmented-ui value=\"all\" size=\"sm\">\n                    <segment-ui value=\"all\" text=\"All\"></segment-ui>\n                    <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n                    <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"check-circle\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Deployment completed</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n                    <badge-ui slot=\"action\" text=\"New\" variant=\"accent\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Alex Chen mentioned you</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n                    <badge-ui slot=\"action\" text=\"Mention\" variant=\"warning\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"warning\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Usage threshold reached</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n                    <badge-ui slot=\"action\" text=\"Warning\" variant=\"warning\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Sarah Miller invited you</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"key\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">API key rotated</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /notifications -->\n      </div>\n    </section>"
     }
   ],
   "nested": [
@@ -92,12 +92,12 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "root",
       "component": "Text",
-      "textContent": "Dashboard Welcome back. Here's what's happening. Overview Monthly revenue for 2026 Recent Sales You made 265 sales this month. Olivia Martin +$1,999.00 olivia.martin@email.com Jackson Lee +$39.00 jackson.lee@email.com Isabella Nguyen +$299.00 isabella.nguyen@email.com William Kim +$99.00 will@email.com Sofia Davis +$39.00 sofia.davis@email.com Page Views 84,232 Bounce Rate 24.3% Session Duration 4m 32s Conversion 3.2% Recent Transactions Manage and track recent customer orders Team Members Your active collaborators Alex Chen Engineering Lead Sarah Miller Product Designer James Park Backend Engineer Maria Lopez Data Analyst Quick Actions Storage 75% of 100 GB used Filters: Revenue Monthly revenue breakdown Sessions Daily session trend Top countries Sessions by geography 🇺🇸 United States 14,320 50.4% 🇩🇪 Germany 3,892 13.7% 🇬🇧 United Kingdom 2,841 10.0% 🇯🇵 Japan 1,920 6.8% 🇨🇦 Canada 1,450 5.1% Traffic Sessions per day Acquisition channels Where sessions come from Top pages Most-visited routes Conversion funnel Visit → Sign up → Activate → Convert Visited landing page 28,432 visitors 100% Retention by signup week % of users still active in week N Reports Scheduled reports by category Notifications System and team activity Deployment completed 2m ago Production deploy v2.14.0 succeeded. 12 files changed. Alex Chen mentioned you 18m ago \"@you can you take a look at the Safari issue?\" Usage threshold reached 2h ago API calls at 85% of monthly quota. Consider upgrading your plan. Sarah Miller invited you Yesterday You were added to the \"Brand refresh\" workspace. API key rotated 2 days ago Your production API key was rotated. Old key is revoked. Revenue vs last month $42,948 Signups vs last month 1,988 Churn vs last month 2.7% Audit log Recent admin and user actions in this workspace. System status API 99.98% uptime Web App 100% uptime Webhooks 98.2% uptime Storage 99.99% uptime Last incident: 3 days ago · Revenue activity Sales intensity by day of week and hour Integrations Connect your favourite tools to your workspace. Pro plan $49/month · Next invoice May 14, 2026 Usage this cycle Code snippet JavaScript Python TypeScript Bash const data = await client.generate(prompt); console.log(data.content); Free Get started at no cost $0 /month 5 projects 1 GB storage Community support Pro For growing teams $49 /month Unlimited projects 100 GB storage Priority support Advanced analytics Enterprise Custom solutions at scale Custom pricing Everything in Pro SSO + SAML Dedicated support SLA guarantee Welcome to the dashboard Your tour guide to the most important features This panel shows your key metrics at a glance. Click any card to see the detailed breakdown. You're doing great! Let's explore what you can do with your dashboard. Invite team members Send email invitations to add people to your workspace. Member · can edit and invite Admin · full access Viewer · read only Contact us We'll get back to you within 24 hours. 5 min read Building accessible UI systems at scale How we migrated 80 components to a token-driven design system while maintaining full backwards compatibility. Maya Rivera May 14, 2026 Recent Activity Latest actions across your workspace Alex Chen deployed v2.14.0 Production · 2 min ago Sarah Miller commented on card-ui spec Docs · 18 min ago James Park created API key Settings · 1h ago Maria Lopez invited 3 members Team · 3h ago Roles Can view all content. Cannot edit or manage. 12 members Can view and edit content. Cannot manage members or billing. 28 members Full access to all workspace settings, members, and billing. 4 members Webhook endpoint Receive real-time event notifications at your endpoint URL. Events to send Team members 4 members · 1 pending invite Alex Chen alex@acme.com Sarah Miller sarah@acme.com James Park james@acme.com Transaction Details for the selected transaction. Customer Payment Timeline Payment captured Today · 14:22 UTC Risk review passed Today · 14:22 UTC Card authorized Today · 14:21 UTC Report Scheduled delivery configuration. Schedule Hourly Daily Weekly Monthly Real-time (triggered) Monday Tuesday Wednesday Thursday Friday UTC PST EST CET Delivery PDF CSV Excel (xlsx) Post to Slack Scope Last 24 hours Last 7 days Last 30 days Month-to-date Custom range",
+      "textContent": "Dashboard Welcome back. Here's what's happening. Overview Monthly revenue for 2026 Recent Sales You made 265 sales this month. Olivia Martin +$1,999.00 olivia.martin@email.com Jackson Lee +$39.00 jackson.lee@email.com Isabella Nguyen +$299.00 isabella.nguyen@email.com William Kim +$99.00 will@email.com Sofia Davis +$39.00 sofia.davis@email.com Page Views 84,232 Bounce Rate 24.3% Session Duration 4m 32s Conversion 3.2% Recent Transactions Manage and track recent customer orders Team Members Your active collaborators Alex Chen Engineering Lead Sarah Miller Product Designer James Park Backend Engineer Maria Lopez Data Analyst Quick Actions Storage 75% of 100 GB used Filters: Revenue Monthly revenue breakdown Sessions Daily session trend Top countries Sessions by geography 🇺🇸 United States 14,320 50.4% 🇩🇪 Germany 3,892 13.7% 🇬🇧 United Kingdom 2,841 10.0% 🇯🇵 Japan 1,920 6.8% 🇨🇦 Canada 1,450 5.1% Traffic Sessions per day Acquisition channels Where sessions come from Top pages Most-visited routes Conversion funnel Visit → Sign up → Activate → Convert Visited landing page 28,432 visitors 100% Retention by signup week % of users still active in week N Reports Scheduled reports by category Notifications System and team activity Deployment completed 2m ago Production deploy v2.14.0 succeeded. 12 files changed. Alex Chen mentioned you 18m ago \"@you can you take a look at the Safari issue?\" Usage threshold reached 2h ago API calls at 85% of monthly quota. Consider upgrading your plan. Sarah Miller invited you Yesterday You were added to the \"Brand refresh\" workspace. API key rotated 2 days ago Your production API key was rotated. Old key is revoked. Revenue vs last month $42,948 Signups vs last month 1,988 Churn vs last month 2.7% Audit log Recent admin and user actions in this workspace. System status API 99.98% uptime Web App 100% uptime Webhooks 98.2% uptime Storage 99.99% uptime Last incident: 3 days ago · Revenue activity Sales intensity by day of week and hour Integrations Connect your favourite tools to your workspace. Pro plan $49/month · Next invoice May 14, 2026 Usage this cycle Code snippet JavaScript Python TypeScript Bash const data = await client.generate(prompt); console.log(data.content); Free Get started at no cost $0 /month 5 projects 1 GB storage Community support Pro For growing teams $49 /month Unlimited projects 100 GB storage Priority support Advanced analytics Enterprise Custom solutions at scale Custom pricing Everything in Pro SSO + SAML Dedicated support SLA guarantee Welcome to the dashboard Your tour guide to the most important features This panel shows your key metrics at a glance. Click any card to see the detailed breakdown. You're doing great! Let's explore what you can do with your dashboard. Invite team members Send email invitations to add people to your workspace. Member · can edit and invite Admin · full access Viewer · read only Contact us We'll get back to you within 24 hours. Building accessible UI systems at scale 5 min read How we migrated 80 components to a token-driven design system while maintaining full backwards compatibility. Maya Rivera May 14, 2026 Recent Activity Latest actions across your workspace Alex Chen deployed v2.14.0 Production · 2 min ago Sarah Miller commented on card-ui spec Docs · 18 min ago James Park created API key Settings · 1h ago Maria Lopez invited 3 members Team · 3h ago Roles Viewer Can view all content. Cannot edit or manage. 12 members Editor Can view and edit content. Cannot manage members or billing. 28 members Admin Full access to all workspace settings, members, and billing. 4 members Webhook endpoint Receive real-time event notifications at your endpoint URL. Events to send Team members 4 members · 1 pending invite Alex Chen alex@acme.com Sarah Miller sarah@acme.com James Park james@acme.com Transaction Details for the selected transaction. Customer Payment Timeline Payment captured Today · 14:22 UTC Risk review passed Today · 14:22 UTC Card authorized Today · 14:21 UTC Report Scheduled delivery configuration. Schedule Hourly Daily Weekly Monthly Real-time (triggered) Monday Tuesday Wednesday Thursday Friday UTC PST EST CET Delivery PDF CSV Excel (xlsx) Post to Slack Scope Last 24 hours Last 7 days Last 30 days Month-to-date Custom range",
       "variant": "body"
     }
   ]

package/chunks/dashboard-audience-kpis.json

@@ -27,7 +27,7 @@
       "breakpoint"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "stat",

package/chunks/dashboard-audience-panel.json

@@ -39,7 +39,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -143,6 +143,7 @@
       "id": "text-4",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "Monthly revenue breakdown"
     },
     {
@@ -193,6 +194,7 @@
       "id": "text-6",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "Daily session trend"
     },
     {
@@ -403,6 +405,7 @@
     {
       "id": "text-8",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Sessions by geography"
     },

package/chunks/dashboard-behavior-panel.json

@@ -35,7 +35,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -46,6 +46,7 @@
     {
       "id": "text-2",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Most-visited routes"
     },

package/chunks/dashboard-chart-recent.json

@@ -51,7 +51,7 @@
       "layout": "card"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -62,6 +62,7 @@
     {
       "id": "text-2",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Monthly revenue for 2026"
     },
@@ -202,6 +203,7 @@
     {
       "id": "text-4",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "You made 265 sales this month."
     },

package/chunks/dashboard-cohort-retention.json

@@ -22,7 +22,7 @@
       "weekly"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -33,6 +33,7 @@
     {
       "id": "text-2",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "% of users still active in week N"
     },

package/chunks/dashboard-conversion-panel.json

@@ -36,7 +36,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -48,6 +48,7 @@
       "id": "text-2",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "Visit → Sign up → Activate → Convert"
     },
     {
@@ -166,6 +167,7 @@
     {
       "id": "text-7",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "% of users still active in week N"
     },

package/chunks/dashboard-country-list.json

@@ -21,7 +21,7 @@
       "pageviews"
     ]
   },
-  "captured_at": "2026-05-27T03:59:46.910Z",
+  "captured_at": "2026-05-28T23:31:43.377Z",
   "template": [
     {
       "id": "text",
@@ -32,6 +32,7 @@
     {
       "id": "text-2",
       "component": "Text",
+      "slot": "description",
       "color": "subtle",
       "textContent": "Sessions by geography"
     },