@adia-ai/gen-ui 0.8.42 → 0.8.44

package/corpus/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@lg\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n            data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n            <card-ui\n              ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n          <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n            data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n            data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n            data-chunk-tags-complexity=\"simple\"\n            data-chunk-tags-layout=\"card\">\n            <card-ui span=\"3\">\n              <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n    data-chunk-keywords=\"card header heading description subtitle pattern\">\n                <h3>Overview</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n              </header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n                  <grid-ui columns=\"1 2@sm\" gap=\"3\">\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n                      </section>\n                    </card-ui>\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n                      </section>\n                    </card-ui>\n                  </grid-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n              </footer>\n            </card-ui>\n            <card-ui span=\"2\">\n              <header>\n                <h3>Recent Sales</h3>\n                <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n                          <text-ui strong>+$1,999.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n                          <text-ui strong>+$299.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n                          <text-ui strong>+$99.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">will@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n          <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n            data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n            <card-ui>\n              <header>\n                <h3>Page Views</h3>\n                <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Bounce Rate</h3>\n                <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Session Duration</h3>\n                <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Conversion</h3>\n                <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n         Supports ?state=empty|loading|error URL params for state-coverage\n         demos; the default state renders the populated table. -->\n          <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n            data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n            <card-ui>\n              <header>\n                <h3>Recent Transactions</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n                <span slot=\"action\">\n                  <menu-ui id=\"tx-state-menu\">\n                    <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n                    <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n                    <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n                    <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n                    <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n                  </menu-ui>\n                </span>\n              </header>\n              <section bleed data-tx-surface>\n                <table-ui id=\"dash-transactions\" sortable striped paginate=\"5\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n          <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n            data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n            data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n            data-chunk-tags-complexity=\"moderate\"\n            data-chunk-tags-layout=\"row\">\n            <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n    data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n              <header>\n                <h3>Team Members</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Alex Chen\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Alex Chen</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Engineering Lead</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Sarah Miller</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Product Designer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"James Park\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>James Park</text-ui>\n                          <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Backend Engineer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Maria Lopez</text-ui>\n                          <badge-ui text=\"Offline\" tone=\"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-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-ui>\n                  <progress-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-ui>\n                  <progress-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-ui>\n                  <progress-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-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 size=\"sm\" tone=\"muted\"></tag-ui>\n                  <tag-ui text=\"Device: Desktop\" removable size=\"sm\" tone=\"muted\"></tag-ui>\n                  <button-ui data-filter-add text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n                  <span data-spacer></span>\n                  <button-ui data-filter-clear text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- Analytics: bar + line side by side -->\n          <grid-ui columns=\"1 2@md\" gap=\"4\" data-chunk=\"analytics-chart\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Analytics dashboard with bar chart and line chart displayed side by side. Revenue bar chart on the left, sessions trend line chart on the right.\"\n            data-chunk-keywords=\"analytics chart bar chart line chart side by side dashboard two column grid revenue sessions trend data visualization bar line analytics-chart\">\n            <card-ui>\n              <header>\n                <h3>Revenue</h3>\n                <p slot=\"description\">Monthly revenue breakdown</p>\n              </header>\n              <section>\n                <chart-ui type=\"bar\" x=\"month\" y=\"revenue\" hide-values\n                  data='[{\"month\":\"Jan\",\"revenue\":3200},{\"month\":\"Feb\",\"revenue\":4100},{\"month\":\"Mar\",\"revenue\":3800},{\"month\":\"Apr\",\"revenue\":5200},{\"month\":\"May\",\"revenue\":4800},{\"month\":\"Jun\",\"revenue\":6100}]'></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Sessions</h3>\n                <p slot=\"description\">Daily session trend</p>\n              </header>\n              <section>\n                <chart-ui type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values\n                  data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- KPI ROW -->\n          <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n            data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n            <card-ui\n              ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- TOP COUNTRIES -->\n          <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n    data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n            <card-ui>\n              <header>\n                <h3>Top countries</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇺🇸</text-ui>\n                      <text-ui weight=\"semibold\" grow>United States</text-ui>\n                      <text-ui>14,320</text-ui>\n                      <text-ui color=\"subtle\">50.4%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇩🇪</text-ui>\n                      <text-ui weight=\"semibold\" grow>Germany</text-ui>\n                      <text-ui>3,892</text-ui>\n                      <text-ui color=\"subtle\">13.7%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇬🇧</text-ui>\n                      <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n                      <text-ui>2,841</text-ui>\n                      <text-ui color=\"subtle\">10.0%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇯🇵</text-ui>\n                      <text-ui weight=\"semibold\" grow>Japan</text-ui>\n                      <text-ui>1,920</text-ui>\n                      <text-ui color=\"subtle\">6.8%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇨🇦</text-ui>\n                      <text-ui weight=\"semibold\" grow>Canada</text-ui>\n                      <text-ui>1,450</text-ui>\n                      <text-ui color=\"subtle\">5.1%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /audience -->\n\n        <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n          data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n            data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Acquisition channels</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /acquisition -->\n\n        <!-- ═══════════════════════ BEHAVIOR TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"behavior\" gap=\"4\" hidden data-chunk=\"dashboard-behavior-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Behavior analytics panel: user behavior metrics and events.\"\n          data-chunk-keywords=\"behavior events user interactions engagement actions\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-acquisition-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-pages-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Top pages table card — page title, views, bounce rate, avg time on page.\"\n    data-chunk-keywords=\"dashboard pages table analytics top content views bounce rate\">\n            <card-ui>\n              <header>\n                <h3>Top pages</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-pages\" sortable striped></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-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-ui>\n                  <progress-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-ui>\n                  <progress-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-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\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /conversion -->\n\n        <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n          data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n    data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n            <card-ui>\n              <header>\n                <h3>Reports</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n                    <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n                    <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n                    <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n                    <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n                </span>\n              </header>\n              <section bleed>\n                <table-ui id=\"dash-reports-table\" sortable striped></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=\"primary\"></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>"
+      "html": "<section>\n      <div data-dashboard-content>\n        <col-ui data-tab-panel=\"overview\" gap=\"4\" data-chunk=\"dashboard-overview-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Overview analytics panel: KPI grid + recent-activity chart + spark cards + transactions table + team/actions/storage strip.\"\n          data-chunk-keywords=\"overview dashboard kpi metrics chart activity sparkline transactions team storage\"\n          data-chunk-related=\"dashboard-kpi-grid, dashboard-chart-recent, dashboard-spark-cards, dashboard-team-actions-storage\"\n          data-chunk-tags-complexity=\"complex\"\n          data-chunk-tags-layout=\"panel\">\n          <!-- ═══ ROW 1: 4 KPI STAT CARDS ═══ -->\n          <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"stat-cards-kpi-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"KPI stat cards dashboard — grid of stat-ui cards each showing a label, large numeric value, trend delta (up/down), and icon. Revenue, subscriptions, sales, and active-user metrics.\"\n            data-chunk-keywords=\"stat cards kpi dashboard stat-ui revenue users growth metrics grid trend delta change value label icon currency sales active subscriptions kpi-grid numbers business-metrics\">\n            <card-ui\n              ><section><stat-ui label=\"Total Revenue\" value=\"$45,231.89\" change=\"+20.1%\" trend=\"up\" icon=\"currency-dollar\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Subscriptions\" value=\"+2,350\" change=\"+180.1%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sales\" value=\"+12,234\" change=\"+19%\" trend=\"up\" icon=\"credit-card\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Active Now\" value=\"+573\" change=\"+201\" trend=\"up\" icon=\"chart-bar\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 3: OVERVIEW CHART + RECENT SALES (3:2) ═══ -->\n          <grid-ui columns=\"1 5@md\" gap=\"4\" data-chunk=\"dashboard-chart-recent\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Sales report split-pane: bar chart (monthly revenue) on the left with a recent sales customer list on the right. Two-column layout pairing a chart-ui bar chart with a sales feed.\"\n            data-chunk-keywords=\"sales report bar chart chart-ui revenue monthly overview split pane two column side by side recent sales customer list timeseries graph trend responsive breakpoint\"\n            data-chunk-related=\"dashboard-spark-cards, dashboard-overview-panel\"\n            data-chunk-tags-complexity=\"simple\"\n            data-chunk-tags-layout=\"card\">\n            <card-ui span=\"3\">\n              <header data-chunk=\"card-header-with-description\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Card header with description — card header slot showing heading + subtitle description pair.\"\n    data-chunk-keywords=\"card header heading description subtitle pattern\">\n                <h3>Overview</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Monthly revenue for 2026</text-ui>\n              </header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" no-values></chart-ui>\n                  <grid-ui columns=\"1 2@sm\" gap=\"3\">\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"This Month\" value=\"$5,400\" change=\"+12% vs last month\" trend=\"up\"></stat-ui>\n                      </section>\n                    </card-ui>\n                    <card-ui>\n                      <section>\n                        <stat-ui label=\"Yearly Total\" value=\"$59,100\" change=\"On track for $65k target\" trend=\"neutral\"></stat-ui>\n                      </section>\n                    </card-ui>\n                  </grid-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"View Full Report\" variant=\"outline\" stretch></button-ui>\n              </footer>\n            </card-ui>\n            <card-ui span=\"2\">\n              <header>\n                <h3>Recent Sales</h3>\n                <text-ui slot=\"description\" color=\"subtle\">You made 265 sales this month.</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Olivia Martin\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Olivia Martin</text-ui>\n                          <text-ui strong>+$1,999.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">olivia.martin@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Jackson Lee\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Jackson Lee</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">jackson.lee@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Isabella Nguyen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Isabella Nguyen</text-ui>\n                          <text-ui strong>+$299.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">isabella.nguyen@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"William Kim\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>William Kim</text-ui>\n                          <text-ui strong>+$99.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">will@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sofia Davis\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui>\n                          <text-ui weight=\"semibold\" grow>Sofia Davis</text-ui>\n                          <text-ui strong>+$39.00</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">sofia.davis@email.com</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 4: 4 SPARKLINE METRIC CARDS ═══ -->\n          <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"analytics-sparklines-dashboard\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.\"\n            data-chunk-keywords=\"analytics sparklines page-views bounce-rate session-duration conversion web-analytics mini-chart chart-ui inline-chart trend sparkline-chart sparklines dashboard analytics-dashboard web-metrics traffic\">\n            <card-ui>\n              <header>\n                <h3>Page Views</h3>\n                <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Bounce Rate</h3>\n                <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Session Duration</h3>\n                <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Conversion</h3>\n                <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 5: TRANSACTIONS TABLE ═══\n         Supports ?state=empty|loading|error URL params for state-coverage\n         demos; the default state renders the populated table. -->\n          <grid-ui data-chunk=\"dashboard-transactions-table\" data-chunk-kind=\"block\"\n            data-chunk-domain=\"data\"\n            data-chunk-description=\"Transactions data table — id, date, customer, amount, status badge per row + pagination footer.\"\n            data-chunk-keywords=\"transactions data-table list orders sales payments rows pagination status-badge\">\n            <card-ui>\n              <header>\n                <h3>Recent Transactions</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Manage and track recent customer orders</text-ui>\n                <span slot=\"action\">\n                  <menu-ui id=\"tx-state-menu\">\n                    <button-ui slot=\"trigger\" text=\"View as\" icon=\"caret-down\" variant=\"ghost\" size=\"sm\"></button-ui>\n                    <menu-item-ui text=\"Default\" value=\"default\"></menu-item-ui>\n                    <menu-item-ui text=\"Loading\" value=\"loading\" icon=\"spinner\"></menu-item-ui>\n                    <menu-item-ui text=\"Empty\" value=\"empty\" icon=\"tray\"></menu-item-ui>\n                    <menu-item-ui text=\"Error\" value=\"error\" icon=\"warning\"></menu-item-ui>\n                  </menu-ui>\n                </span>\n              </header>\n              <section bleed data-tx-surface>\n                <table-ui id=\"dash-transactions\" sortable striped paginate=\"5\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- ═══ ROW 6: TEAM + QUICK ACTIONS + STORAGE ═══ -->\n          <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-team-actions-storage\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Three-card strip combining team list + quick actions + storage usage card.\"\n            data-chunk-keywords=\"team members quick actions storage usage limits sidebar responsive breakpoint\"\n            data-chunk-related=\"dashboard-team-list, dashboard-quick-actions, dashboard-storage-card\"\n            data-chunk-tags-complexity=\"moderate\"\n            data-chunk-tags-layout=\"row\">\n            <card-ui data-chunk=\"dashboard-team-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Team members list card — avatars + names + roles with invite action.\"\n    data-chunk-keywords=\"dashboard team members list avatars roles invite manage\">\n              <header>\n                <h3>Team Members</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Alex Chen\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Alex Chen</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Engineering Lead</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Sarah Miller</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Product Designer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"James Park\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>James Park</text-ui>\n                          <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Backend Engineer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" grow>\n                      <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Maria Lopez</text-ui>\n                          <badge-ui text=\"Offline\" tone=\"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-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-ui>\n                  <progress-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-ui>\n                  <progress-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-ui>\n                  <progress-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-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 size=\"sm\" tone=\"muted\"></tag-ui>\n                  <tag-ui text=\"Device: Desktop\" removable size=\"sm\" tone=\"muted\"></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\" no-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\" no-values\n                  data='[{\"day\":\"Mon\",\"sessions\":1200},{\"day\":\"Tue\",\"sessions\":1800},{\"day\":\"Wed\",\"sessions\":1500},{\"day\":\"Thu\",\"sessions\":2200},{\"day\":\"Fri\",\"sessions\":1900},{\"day\":\"Sat\",\"sessions\":800},{\"day\":\"Sun\",\"sessions\":600}]'></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n\n          <!-- KPI ROW -->\n          <grid-ui columns=\"2 4@lg\" gap=\"4\" data-chunk=\"dashboard-audience-kpis\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"4-column audience KPI grid — unique visitors, sessions, avg. session, bounce rate.\"\n            data-chunk-keywords=\"audience kpis metrics stats grid dashboard cards analytics responsive breakpoint\">\n            <card-ui\n              ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n            ></card-ui>\n            <card-ui\n              ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>\n\n          <!-- TOP COUNTRIES -->\n          <grid-ui data-chunk=\"dashboard-country-list\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Country traffic list card — top countries by pageview or user count with bar chart.\"\n    data-chunk-keywords=\"dashboard country list traffic geo analytics pageviews\">\n            <card-ui>\n              <header>\n                <h3>Top countries</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇺🇸</text-ui>\n                      <text-ui weight=\"semibold\" grow>United States</text-ui>\n                      <text-ui>14,320</text-ui>\n                      <text-ui color=\"subtle\">50.4%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇩🇪</text-ui>\n                      <text-ui weight=\"semibold\" grow>Germany</text-ui>\n                      <text-ui>3,892</text-ui>\n                      <text-ui color=\"subtle\">13.7%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇬🇧</text-ui>\n                      <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n                      <text-ui>2,841</text-ui>\n                      <text-ui color=\"subtle\">10.0%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇯🇵</text-ui>\n                      <text-ui weight=\"semibold\" grow>Japan</text-ui>\n                      <text-ui>1,920</text-ui>\n                      <text-ui color=\"subtle\">6.8%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"lg\">🇨🇦</text-ui>\n                      <text-ui weight=\"semibold\" grow>Canada</text-ui>\n                      <text-ui>1,450</text-ui>\n                      <text-ui color=\"subtle\">5.1%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /audience -->\n\n        <!-- ═══════════════════════ ACQUISITION TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"acquisition\" gap=\"4\" hidden data-chunk=\"dashboard-acquisition-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Acquisition analytics panel: traffic channels breakdown.\"\n          data-chunk-keywords=\"acquisition traffic channels marketing campaigns source referrals\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-audience-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui columns=\"1 3@lg\" gap=\"4\" data-chunk=\"dashboard-traffic-channels\"\n            data-chunk-kind=\"block\"\n            data-chunk-domain=\"dashboard\"\n            data-chunk-description=\"Traffic + channels acquisition grid — line chart (2/3) + donut (1/3) responsive split layout.\"\n            data-chunk-keywords=\"traffic channels acquisition analytics chart layout grid responsive breakpoint\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" no-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\" no-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></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-ui label=\"Signed up\" value=\"42\" meta=\"11,942 · 42%\"></progress-ui>\n                  <progress-ui label=\"Activated\" value=\"28\" meta=\"7,961 · 28%\"></progress-ui>\n                  <progress-ui label=\"Converted to paid\" value=\"8\" meta=\"2,274 · 8.0%\"></progress-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\"></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>\n        </col-ui>\n        <!-- /conversion -->\n\n        <!-- ═══════════════════════ REPORTS TAB ═══════════════════════ -->\n        <col-ui data-tab-panel=\"reports\" gap=\"4\" hidden data-chunk=\"dashboard-reports-panel\" data-chunk-kind=\"panel\"\n          data-chunk-domain=\"dashboard\"\n          data-chunk-description=\"Reports panel: saved/scheduled report list.\"\n          data-chunk-keywords=\"reports analytics scheduled exports saved insights\"\n          data-chunk-related=\"dashboard-overview-panel, dashboard-conversion-panel\"\n          data-chunk-tags-complexity=\"moderate\"\n          data-chunk-tags-layout=\"panel\">\n          <grid-ui data-chunk=\"dashboard-reports-table\" data-chunk-kind=\"block\"\n    data-chunk-domain=\"data\"\n    data-chunk-description=\"Reports list table card — scheduled or saved report entries with run/export actions.\"\n    data-chunk-keywords=\"dashboard reports table list scheduled saved export actions\">\n            <card-ui>\n              <header>\n                <h3>Reports</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\" size=\"sm\">\n                    <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n                    <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n                    <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n                    <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"+ New report\" variant=\"primary\" size=\"sm\"></button-ui>\n                </span>\n              </header>\n              <section bleed>\n                <table-ui id=\"dash-reports-table\" sortable striped></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=\"primary\"></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,7 +92,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-08-17T02:47:52.800Z",
+  "captured_at": "2026-08-19T12:44:41.891Z",
   "template": [
     {
       "id": "root",

package/corpus/chunks/dashboard-audience-panel.json

@@ -39,7 +39,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-08-10T18:10:27.206Z",
+  "captured_at": "2026-08-18T05:03:46.997Z",
   "template": [
     {
       "id": "text",
@@ -188,7 +188,7 @@
           "revenue": 6100
         }
       ],
-      "hideValues": true,
+      "noValues": true,
       "x": "month",
       "y": "revenue"
     },
@@ -269,7 +269,7 @@
           "sessions": 600
         }
       ],
-      "hideValues": true,
+      "noValues": true,
       "smooth": 0.4,
       "x": "day",
       "y": "sessions"

package/corpus/chunks/dashboard-chart-recent.json

@@ -11,7 +11,7 @@
     "columns": "1 5@md",
     "gap": "4"
   },
-  "html": "<grid-ui columns=\"1 5@md\" gap=\"4\">\n            <card-ui span=\"3\">\n              <header><!-- nested: card-header-with-description --></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>",
+  "html": "<grid-ui columns=\"1 5@md\" gap=\"4\">\n            <card-ui span=\"3\">\n              <header><!-- nested: card-header-with-description --></header>\n              <section>\n                <col-ui>\n                  <chart-ui id=\"dash-overview\" type=\"bar\" x=\"month\" y=\"revenue\" no-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>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
   "metadata": {
     "domain": "dashboard",
@@ -51,7 +51,7 @@
       "layout": "card"
     }
   },
-  "captured_at": "2026-08-10T18:10:27.206Z",
+  "captured_at": "2026-08-19T12:44:41.891Z",
   "template": [
     {
       "id": "text",
@@ -85,7 +85,7 @@
       "id": "dash-overview",
       "component": "Chart",
       "type": "bar",
-      "hideValues": true,
+      "noValues": true,
       "x": "month",
       "y": "revenue"
     },

package/corpus/chunks/dashboard-overview-panel.json

@@ -47,7 +47,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-08-17T04:33:27.534Z",
+  "captured_at": "2026-08-19T12:44:41.891Z",
   "template": [
     {
       "id": "stat",
@@ -222,7 +222,7 @@
       "id": "dash-overview",
       "component": "Chart",
       "type": "bar",
-      "hideValues": true,
+      "noValues": true,
       "x": "month",
       "y": "revenue"
     },

package/corpus/chunks/dashboard-traffic-channels.json

@@ -9,7 +9,7 @@
     "columns": "1 3@lg",
     "gap": "4"
   },
-  "html": "<grid-ui columns=\"1 3@lg\" gap=\"4\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Acquisition channels</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
+  "html": "<grid-ui columns=\"1 3@lg\" gap=\"4\">\n            <card-ui span=\"2\">\n              <header>\n                <h3>Traffic</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions per day</text-ui>\n                <span slot=\"action\">\n                  <segmented-ui value=\"30d\" size=\"sm\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </span>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" no-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\" no-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
   "metadata": {
     "domain": "dashboard",
@@ -26,7 +26,7 @@
       "breakpoint"
     ]
   },
-  "captured_at": "2026-08-10T18:10:27.206Z",
+  "captured_at": "2026-08-19T12:44:41.891Z",
   "template": [
     {
       "id": "text",
@@ -91,7 +91,7 @@
       "id": "analytics-traffic",
       "component": "Chart",
       "type": "line",
-      "hideValues": true,
+      "noValues": true,
       "smooth": 0.4,
       "x": "day",
       "y": "sessions"
@@ -144,7 +144,7 @@
       "id": "analytics-channels",
       "component": "Chart",
       "type": "donut",
-      "hideValues": true,
+      "noValues": true,
       "x": "channel",
       "y": "sessions"
     },

package/corpus/chunks/data-export-history.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui>\n        <header>\n          <span slot=\"heading\" variant=\"section\">Recent exports</span>\n        </header>\n        <section bleed>\n          <list-ui divider contained>\n            <list-item-ui text=\"Workspace · JSON\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Requested 12 minutes ago · 1.2M records</span>\n              <tag-ui slot=\"action\" variant=\"warning\">Running</tag-ui>\n            </list-item-ui>\n            <list-item-ui text=\"My data · CSV\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>\n              <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n                <tag-ui variant=\"success\">Ready</tag-ui>\n                <button-ui text=\"Download\" variant=\"primary\" size=\"sm\" icon-leading=\"download-simple\"></button-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui text=\"Workspace · JSON\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Ready 14 days ago · link expired</span>\n              <tag-ui slot=\"action\" variant=\"default\">Expired</tag-ui>\n            </list-item-ui>\n          </list-ui>\n        </section>\n      </card-ui>",
+  "html": "<card-ui>\n        <header>\n          <span slot=\"heading\" variant=\"section\">Recent exports</span>\n        </header>\n        <section bleed>\n          <list-ui divider contained>\n            <list-item-ui text=\"Workspace · JSON\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Requested 12 minutes ago · 1.2M records</span>\n              <tag-ui slot=\"action\" variant=\"warning\">Running</tag-ui>\n            </list-item-ui>\n            <list-item-ui text=\"My data · CSV\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>\n              <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n                <tag-ui variant=\"success\">Ready</tag-ui>\n                <button-ui text=\"Download\" variant=\"primary\" size=\"sm\" icon=\"download-simple\"></button-ui>\n              </row-ui>\n            </list-item-ui>\n            <list-item-ui text=\"Workspace · JSON\">\n              <icon-ui slot=\"icon\" name=\"download-simple\" size=\"sm\"></icon-ui>\n              <span slot=\"description\">Ready 14 days ago · link expired</span>\n              <tag-ui slot=\"action\" variant=\"default\">Expired</tag-ui>\n            </list-item-ui>\n          </list-ui>\n        </section>\n      </card-ui>",
   "source": "packages/web-components/patterns/admin-keys-and-export/admin-keys-and-export.examples.html",
   "metadata": {
     "domain": "data-management",
@@ -28,7 +28,7 @@
       "audit"
     ]
   },
-  "captured_at": "2026-08-15T04:10:49.553Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",
@@ -98,6 +98,7 @@
     {
       "id": "button",
       "component": "Button",
+      "icon": "download-simple",
       "size": "sm",
       "text": "Download",
       "variant": "primary"

package/corpus/chunks/diff-structured.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui style=\"max-width: 640px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Workspace settings — change preview</span>\n          <text-ui slot=\"description\" color=\"subtle\">3 fields changed</text-ui>\n        </header>\n        <section>\n          <description-list-ui>\n            <dt>Workspace name</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\" icon-leading=\"minus\">Adia</tag-ui>\n                <tag-ui variant=\"success\" icon-leading=\"plus\">Adia AI</tag-ui>\n              </row-ui>\n            </dd>\n            <dt>Default theme</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\" icon-leading=\"minus\">light</tag-ui>\n                <tag-ui variant=\"success\" icon-leading=\"plus\">auto</tag-ui>\n              </row-ui>\n            </dd>\n            <dt>Member invites</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\" icon-leading=\"minus\">Admin only</tag-ui>\n                <tag-ui variant=\"success\" icon-leading=\"plus\">Anyone with link</tag-ui>\n              </row-ui>\n            </dd>\n          </description-list-ui>\n        </section>\n      </card-ui>",
+  "html": "<card-ui style=\"max-width: 640px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Workspace settings — change preview</span>\n          <text-ui slot=\"description\" color=\"subtle\">3 fields changed</text-ui>\n        </header>\n        <section>\n          <description-list-ui>\n            <dt>Workspace name</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\">Adia</tag-ui>\n                <tag-ui variant=\"success\">Adia AI</tag-ui>\n              </row-ui>\n            </dd>\n            <dt>Default theme</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\">light</tag-ui>\n                <tag-ui variant=\"success\">auto</tag-ui>\n              </row-ui>\n            </dd>\n            <dt>Member invites</dt>\n            <dd>\n              <row-ui gap=\"2\" align=\"center\">\n                <tag-ui variant=\"danger\">Admin only</tag-ui>\n                <tag-ui variant=\"success\">Anyone with link</tag-ui>\n              </row-ui>\n            </dd>\n          </description-list-ui>\n        </section>\n      </card-ui>",
   "source": "packages/web-components/patterns/diff-review/diff-review.examples.html",
   "metadata": {
     "domain": "data",
@@ -28,7 +28,7 @@
       "confirm"
     ]
   },
-  "captured_at": "2026-08-13T16:17:52.286Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",

package/corpus/chunks/digest-email-preview.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui style=\"max-width: 640px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Weekly digest preview</span>\n          <text-ui slot=\"description\" color=\"subtle\">This is what your Monday morning email will contain</text-ui>\n          <button-ui slot=\"action\" text=\"Send test\" variant=\"ghost\" size=\"sm\" icon-leading=\"paper-plane-tilt\"></button-ui>\n        </header>\n        <section>\n          <col-ui gap=\"4\">\n            <col-ui gap=\"1\">\n              <text-ui strong>Hi Kim,</text-ui>\n              <text-ui>Here's what happened in <strong>Adia AI</strong> this week.</text-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Mentions · 4</text-ui>\n              <col-ui gap=\"2\">\n                <row-ui gap=\"2\" align=\"start\">\n                  <avatar-ui size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n                  <col-ui gap=\"0\" style=\"flex: 1;\">\n                    <text-ui>Avery on \"OKLCH ramp comment\"</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">\"Should we use chrome or data scale here?\" · Tuesday</text-ui>\n                  </col-ui>\n                </row-ui>\n                <row-ui gap=\"2\" align=\"start\">\n                  <avatar-ui size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n                  <col-ui gap=\"0\" style=\"flex: 1;\">\n                    <text-ui>Jordan on \"Auth flow rebuild\"</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">\"Nominating for review\" · Wednesday</text-ui>\n                  </col-ui>\n                </row-ui>\n              </col-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Activity · 12</text-ui>\n              <col-ui gap=\"2\">\n                <col-ui gap=\"0\">\n                  <text-ui>3 PRs merged</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">v0.0.26 hotfix, attribute-API migration sweep, INDEX update</text-ui>\n                </col-ui>\n                <col-ui gap=\"0\">\n                  <text-ui>9 issues closed</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">5 by you, 4 by team</text-ui>\n                </col-ui>\n              </col-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Coming up</text-ui>\n              <row-ui gap=\"2\" align=\"start\">\n                <icon-ui name=\"calendar\" size=\"sm\"></icon-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui>Design review — Tuesday 2pm</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">v0.0.27 cut planning</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Delivered Mondays at 8am · <a href=\"#\">Manage preferences</a></text-ui>\n        </footer>\n      </card-ui>",
+  "html": "<card-ui style=\"max-width: 640px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Weekly digest preview</span>\n          <text-ui slot=\"description\" color=\"subtle\">This is what your Monday morning email will contain</text-ui>\n          <button-ui slot=\"action\" text=\"Send test\" variant=\"ghost\" size=\"sm\" icon=\"paper-plane-tilt\"></button-ui>\n        </header>\n        <section>\n          <col-ui gap=\"4\">\n            <col-ui gap=\"1\">\n              <text-ui strong>Hi Kim,</text-ui>\n              <text-ui>Here's what happened in <strong>Adia AI</strong> this week.</text-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Mentions · 4</text-ui>\n              <col-ui gap=\"2\">\n                <row-ui gap=\"2\" align=\"start\">\n                  <avatar-ui size=\"sm\" text=\"Avery Chen\"></avatar-ui>\n                  <col-ui gap=\"0\" style=\"flex: 1;\">\n                    <text-ui>Avery on \"OKLCH ramp comment\"</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">\"Should we use chrome or data scale here?\" · Tuesday</text-ui>\n                  </col-ui>\n                </row-ui>\n                <row-ui gap=\"2\" align=\"start\">\n                  <avatar-ui size=\"sm\" text=\"Jordan Lee\"></avatar-ui>\n                  <col-ui gap=\"0\" style=\"flex: 1;\">\n                    <text-ui>Jordan on \"Auth flow rebuild\"</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">\"Nominating for review\" · Wednesday</text-ui>\n                  </col-ui>\n                </row-ui>\n              </col-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Activity · 12</text-ui>\n              <col-ui gap=\"2\">\n                <col-ui gap=\"0\">\n                  <text-ui>3 PRs merged</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">v0.0.26 hotfix, attribute-API migration sweep, INDEX update</text-ui>\n                </col-ui>\n                <col-ui gap=\"0\">\n                  <text-ui>9 issues closed</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">5 by you, 4 by team</text-ui>\n                </col-ui>\n              </col-ui>\n            </col-ui>\n            <col-ui gap=\"2\">\n              <text-ui strong size=\"sm\" color=\"subtle\">Coming up</text-ui>\n              <row-ui gap=\"2\" align=\"start\">\n                <icon-ui name=\"calendar\" size=\"sm\"></icon-ui>\n                <col-ui gap=\"0\" style=\"flex: 1;\">\n                  <text-ui>Design review — Tuesday 2pm</text-ui>\n                  <text-ui color=\"subtle\" size=\"sm\">v0.0.27 cut planning</text-ui>\n                </col-ui>\n              </row-ui>\n            </col-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Delivered Mondays at 8am · <a href=\"#\">Manage preferences</a></text-ui>\n        </footer>\n      </card-ui>",
   "source": "packages/web-components/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html",
   "metadata": {
     "domain": "display",
@@ -26,7 +26,7 @@
       "batch"
     ]
   },
-  "captured_at": "2026-07-29T09:15:19.217Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",
@@ -46,6 +46,7 @@
       "id": "button",
       "component": "Button",
       "slot": "action",
+      "icon": "paper-plane-tilt",
       "size": "sm",
       "text": "Send test",
       "variant": "ghost"

package/corpus/chunks/export-flow-delivery.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui style=\"max-width: 480px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Export invoices</span>\n          <text-ui slot=\"description\" color=\"subtle\">2024 fiscal year · 1,247 invoices</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Format\">\n              <select-ui id=\"export-delivery-format\" name=\"format\">\n                <option value=\"pdf\" selected>PDF bundle</option>\n                <option value=\"zip-pdf\">ZIP of individual PDFs</option>\n                <option value=\"csv\">CSV summary only</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Delivery\" required>\n              <col-ui gap=\"1\">\n                <radio-ui id=\"export-delivery-radio-download\" name=\"delivery\" value=\"download\" label=\"Download now\" checked></radio-ui>\n                <radio-ui name=\"delivery\" value=\"email\" label=\"Email when ready (recommended for large bundles)\"></radio-ui>\n              </col-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\"></button-ui>\n          <button-ui id=\"export-delivery-submit\" slot=\"action\" text=\"Download PDF\" variant=\"primary\" icon-leading=\"download-simple\"></button-ui>\n        </footer>\n      </card-ui>",
+  "html": "<card-ui style=\"max-width: 480px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Export invoices</span>\n          <text-ui slot=\"description\" color=\"subtle\">2024 fiscal year · 1,247 invoices</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Format\">\n              <select-ui id=\"export-delivery-format\" name=\"format\">\n                <option value=\"pdf\" selected>PDF bundle</option>\n                <option value=\"zip-pdf\">ZIP of individual PDFs</option>\n                <option value=\"csv\">CSV summary only</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Delivery\" required>\n              <col-ui gap=\"1\">\n                <radio-ui id=\"export-delivery-radio-download\" name=\"delivery\" value=\"download\" label=\"Download now\" checked></radio-ui>\n                <radio-ui name=\"delivery\" value=\"email\" label=\"Email when ready (recommended for large bundles)\"></radio-ui>\n              </col-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\"></button-ui>\n          <button-ui id=\"export-delivery-submit\" slot=\"action\" text=\"Download PDF\" variant=\"primary\" icon=\"download-simple\"></button-ui>\n        </footer>\n      </card-ui>",
   "source": "packages/web-components/patterns/export-flow/export-flow.examples.html",
   "metadata": {
     "domain": "data-management",
@@ -27,7 +27,7 @@
       "options"
     ]
   },
-  "captured_at": "2026-08-15T04:10:49.553Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",
@@ -139,6 +139,7 @@
       "id": "export-delivery-submit",
       "component": "Button",
       "slot": "action",
+      "icon": "download-simple",
       "text": "Download PDF",
       "variant": "primary"
     },

package/corpus/chunks/export-flow-sync.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<card-ui style=\"max-width: 480px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Export users</span>\n          <text-ui slot=\"description\" color=\"subtle\">428 rows · current filter applied</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Format\">\n              <select-ui id=\"export-sync-format\" name=\"format\">\n                <option value=\"csv\" selected>CSV (Excel-compatible)</option>\n                <option value=\"json\">JSON</option>\n                <option value=\"xlsx\">XLSX (Excel native)</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Columns\">\n              <col-ui gap=\"1\">\n                <radio-ui name=\"cols\" value=\"all\" label=\"All columns\" checked></radio-ui>\n                <radio-ui name=\"cols\" value=\"visible\" label=\"Only visible columns (8)\"></radio-ui>\n              </col-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\"></button-ui>\n          <button-ui id=\"export-sync-submit\" slot=\"action\" text=\"Download CSV\" variant=\"primary\" icon-leading=\"download-simple\"></button-ui>\n        </footer>\n      </card-ui>",
+  "html": "<card-ui style=\"max-width: 480px;\">\n        <header>\n          <span slot=\"heading\" variant=\"section\">Export users</span>\n          <text-ui slot=\"description\" color=\"subtle\">428 rows · current filter applied</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Format\">\n              <select-ui id=\"export-sync-format\" name=\"format\">\n                <option value=\"csv\" selected>CSV (Excel-compatible)</option>\n                <option value=\"json\">JSON</option>\n                <option value=\"xlsx\">XLSX (Excel native)</option>\n              </select-ui>\n            </field-ui>\n            <field-ui label=\"Columns\">\n              <col-ui gap=\"1\">\n                <radio-ui name=\"cols\" value=\"all\" label=\"All columns\" checked></radio-ui>\n                <radio-ui name=\"cols\" value=\"visible\" label=\"Only visible columns (8)\"></radio-ui>\n              </col-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\"></button-ui>\n          <button-ui id=\"export-sync-submit\" slot=\"action\" text=\"Download CSV\" variant=\"primary\" icon=\"download-simple\"></button-ui>\n        </footer>\n      </card-ui>",
   "source": "packages/web-components/patterns/export-flow/export-flow.examples.html",
   "metadata": {
     "domain": "data-management",
@@ -27,7 +27,7 @@
       "data"
     ]
   },
-  "captured_at": "2026-07-29T09:15:19.217Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",
@@ -138,6 +138,7 @@
       "id": "export-sync-submit",
       "component": "Button",
       "slot": "action",
+      "icon": "download-simple",
       "text": "Download CSV",
       "variant": "primary"
     },

package/corpus/chunks/filter-bar-active-filters.json

@@ -9,7 +9,7 @@
     "data-section": "",
     "data-property": "active-filters"
   },
-  "html": "<card-ui>\n    <section>\n      <row-ui gap=\"2\" align=\"center\" wrap>\n        <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n        <tag-ui text=\"Status: Active\" removable tone=\"muted\"></tag-ui>\n        <tag-ui text=\"Owner: Alex Chen\" removable tone=\"muted\"></tag-ui>\n        <tag-ui text=\"Updated: last 7 days\" removable tone=\"muted\"></tag-ui>\n        <button-ui text=\"+ Add filter\" variant=\"ghost\" size=\"sm\" popovertarget=\"pat-filter-menu\"></button-ui>\n        <span data-spacer></span>\n        <button-ui text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n      </row-ui>\n      <popover-ui id=\"pat-filter-menu\" anchor=\"previous\">\n        <action-list-ui>\n          <action-item-ui icon=\"flag\" text=\"Status\" value=\"status\"></action-item-ui>\n          <action-item-ui icon=\"user\" text=\"Owner\" value=\"owner\"></action-item-ui>\n          <action-item-ui icon=\"tag\" text=\"Label\" value=\"label\"></action-item-ui>\n          <action-item-ui icon=\"calendar\" text=\"Date range\" value=\"date\"></action-item-ui>\n          <action-item-ui icon=\"folder\" text=\"Project\" value=\"project\"></action-item-ui>\n        </action-list-ui>\n      </popover-ui>\n    </section>\n  </card-ui>",
+  "html": "<card-ui>\n    <section>\n      <row-ui gap=\"2\" align=\"center\" wrap>\n        <text-ui color=\"subtle\" weight=\"semibold\">Filters:</text-ui>\n        <tag-ui text=\"Status: Active\" removable tone=\"muted\"></tag-ui>\n        <tag-ui text=\"Owner: Alex Chen\" removable tone=\"muted\"></tag-ui>\n        <tag-ui text=\"Updated: last 7 days\" removable tone=\"muted\"></tag-ui>\n        <button-ui text=\"+ Add filter\" variant=\"ghost\" size=\"sm\" popovertarget=\"pat-filter-menu\"></button-ui>\n        <span data-spacer></span>\n        <button-ui text=\"Clear all\" variant=\"ghost\" size=\"sm\"></button-ui>\n      </row-ui>\n      <popover-ui id=\"pat-filter-menu\">\n        <action-list-ui>\n          <action-item-ui icon=\"flag\" text=\"Status\" value=\"status\"></action-item-ui>\n          <action-item-ui icon=\"user\" text=\"Owner\" value=\"owner\"></action-item-ui>\n          <action-item-ui icon=\"tag\" text=\"Label\" value=\"label\"></action-item-ui>\n          <action-item-ui icon=\"calendar\" text=\"Date range\" value=\"date\"></action-item-ui>\n          <action-item-ui icon=\"folder\" text=\"Project\" value=\"project\"></action-item-ui>\n        </action-list-ui>\n      </popover-ui>\n    </section>\n  </card-ui>",
   "source": "packages/web-components/patterns/filter-bar/filter-bar.examples.html",
   "metadata": {
     "domain": "data",
@@ -31,7 +31,7 @@
       "tags"
     ]
   },
-  "captured_at": "2026-08-13T16:17:52.286Z",
+  "captured_at": "2026-08-19T03:56:11.704Z",
   "template": [
     {
       "id": "text",