@adia-ai/a2ui-corpus 0.5.2 → 0.5.3

package/chunks/color-picker-swatches.json

@@ -0,0 +1,134 @@
+{
+  "name": "color-picker-swatches",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <card-ui>\n      <header>\n        <text-ui strong>Accent color</text-ui>\n        <text-ui size=\"sm\" color=\"subtle\">OKLCH or pick a preset</text-ui>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <color-picker-ui format=\"oklch\"></color-picker-ui>\n          <col-ui gap=\"2\">\n            <text-ui size=\"sm\" color=\"subtle\">Presets</text-ui>\n            <row-ui gap=\"2\" wrap>\n              <swatch-ui color=\"oklch(0.62 0.18 240)\" size=\"md\"></swatch-ui>\n              <swatch-ui color=\"oklch(0.65 0.20 25)\" size=\"md\"></swatch-ui>\n              <swatch-ui color=\"oklch(0.70 0.15 145)\" size=\"md\"></swatch-ui>\n              <swatch-ui color=\"oklch(0.75 0.10 80)\" size=\"md\"></swatch-ui>\n              <swatch-ui color=\"oklch(0.55 0.20 320)\" size=\"md\"></swatch-ui>\n              <swatch-ui color=\"oklch(0.50 0.15 0)\" size=\"md\"></swatch-ui>\n            </row-ui>\n          </col-ui>\n        </col-ui>\n      </section>\n    </card-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "metadata": {
+    "domain": "forms",
+    "description": "Color picker with OKLCH input + preset swatch palette. Click a swatch to apply; manual input edits the picker.",
+    "keywords": [
+      "color",
+      "picker",
+      "swatch",
+      "palette",
+      "oklch",
+      "hex",
+      "preset",
+      "accent",
+      "token",
+      "chooser"
+    ]
+  },
+  "captured_at": "2026-05-14T01:42:11.604Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Accent color"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "OKLCH or pick a preset"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "color-picker",
+      "component": "ColorPicker"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "textContent": "Presets"
+    },
+    {
+      "id": "column-3",
+      "component": "Column"
+    },
+    {
+      "id": "column-4",
+      "component": "Column"
+    },
+    {
+      "id": "column-5",
+      "component": "Column"
+    },
+    {
+      "id": "column-6",
+      "component": "Column"
+    },
+    {
+      "id": "column-7",
+      "component": "Column"
+    },
+    {
+      "id": "column-8",
+      "component": "Column"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "2",
+      "children": [
+        "column-3",
+        "column-4",
+        "column-5",
+        "column-6",
+        "column-7",
+        "column-8"
+      ]
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "text-3",
+        "row"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "color-picker",
+        "column-2"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "card"
+      ]
+    }
+  ]
+}

package/chunks/command-palette.json

@@ -24,7 +24,7 @@
       "launcher"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "input",

package/chunks/commerce-pricing-tiers.json

@@ -29,7 +29,7 @@
       "comparison"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/comparison-table.json

@@ -22,7 +22,7 @@
       "pricing-compare"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

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

@@ -22,7 +22,7 @@
       "marketing"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-acquisition-panel.json

@@ -35,7 +35,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-admin-page.json

@@ -72,7 +72,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-audience-kpis.json

@@ -11,5 +11,5 @@
   },
   "html": "<grid-ui columns=\"4\" gap=\"4\">\n            <card-ui size=\"sm\"\n              ><section><stat-ui label=\"Unique visitors\" value=\"28,432\" change=\"+8.2%\" trend=\"up\" icon=\"users\"></stat-ui></section\n            ></card-ui>\n            <card-ui size=\"sm\"\n              ><section><stat-ui label=\"Sessions\" value=\"41,203\" change=\"+12.4%\" trend=\"up\" icon=\"browsers\"></stat-ui></section\n            ></card-ui>\n            <card-ui size=\"sm\"\n              ><section><stat-ui label=\"Avg. session\" value=\"4m 32s\" change=\"+18s\" trend=\"up\" icon=\"clock\"></stat-ui></section\n            ></card-ui>\n            <card-ui size=\"sm\"\n              ><section><stat-ui label=\"Bounce rate\" value=\"24.3%\" change=\"-2.1%\" trend=\"up\" icon=\"arrow-bend-up-right\"></stat-ui></section\n            ></card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-audience-panel.json

@@ -37,7 +37,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-behavior-panel.json

@@ -34,7 +34,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-chart-recent.json

@@ -35,7 +35,7 @@
       "layout": "card"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-cohort-retention.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <h3>Retention by signup week</h3>\n                <text-ui slot=\"description\" color=\"subtle\">% of users still active in week N</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-cohort\" raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-conversion-panel.json

@@ -35,7 +35,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-country-list.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <h3>Top countries</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Sessions by geography</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"xl\">🇺🇸</text-ui>\n                      <text-ui weight=\"semibold\" grow>United States</text-ui>\n                      <text-ui>14,320</text-ui>\n                      <text-ui color=\"subtle\">50.4%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"xl\">🇩🇪</text-ui>\n                      <text-ui weight=\"semibold\" grow>Germany</text-ui>\n                      <text-ui>3,892</text-ui>\n                      <text-ui color=\"subtle\">13.7%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"xl\">🇬🇧</text-ui>\n                      <text-ui weight=\"semibold\" grow>United Kingdom</text-ui>\n                      <text-ui>2,841</text-ui>\n                      <text-ui color=\"subtle\">10.0%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"xl\">🇯🇵</text-ui>\n                      <text-ui weight=\"semibold\" grow>Japan</text-ui>\n                      <text-ui>1,920</text-ui>\n                      <text-ui color=\"subtle\">6.8%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"3\" align=\"center\" grow>\n                      <text-ui size=\"xl\">🇨🇦</text-ui>\n                      <text-ui weight=\"semibold\" grow>Canada</text-ui>\n                      <text-ui>1,450</text-ui>\n                      <text-ui color=\"subtle\">5.1%</text-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-filter-bar.json

@@ -23,7 +23,7 @@
       "toolbar-icons"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-funnel.json

@@ -23,7 +23,7 @@
       "customer-journey"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-kpi-grid.json

@@ -26,7 +26,7 @@
       "overview"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "stat",

package/chunks/dashboard-notifications-feed.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <span slot=\"heading\">\n                  <h3>Notifications</h3>\n                </span>\n                <span slot=\"description\">\n                  <text-ui color=\"subtle\">System and team activity</text-ui>\n                </span>\n                <span slot=\"action\">\n                  <row-ui gap=\"2\" align=\"center\">\n                    <segmented-ui value=\"all\">\n                      <segment-ui value=\"all\" text=\"All\"></segment-ui>\n                      <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n                      <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n                    </segmented-ui>\n                    <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n                  </row-ui>\n                </span>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"start\" grow>\n                      <avatar-ui icon=\"check-circle\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui align=\"center\" gap=\"2\">\n                          <text-ui weight=\"semibold\" grow>Deployment completed</text-ui>\n                          <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n                      </col-ui>\n                      <badge-ui text=\"New\" variant=\"accent\"></badge-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"start\" grow>\n                      <avatar-ui text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui align=\"center\" gap=\"2\">\n                          <text-ui weight=\"semibold\" grow>Alex Chen mentioned you</text-ui>\n                          <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n                      </col-ui>\n                      <badge-ui text=\"Mention\" variant=\"warning\"></badge-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"start\" grow>\n                      <avatar-ui icon=\"warning\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui align=\"center\" gap=\"2\">\n                          <text-ui weight=\"semibold\" grow>Usage threshold reached</text-ui>\n                          <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n                      </col-ui>\n                      <badge-ui text=\"Warning\" variant=\"warning\"></badge-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"start\" grow>\n                      <avatar-ui text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui align=\"center\" gap=\"2\">\n                          <text-ui weight=\"semibold\" grow>Sarah Miller invited you</text-ui>\n                          <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"start\" grow>\n                      <avatar-ui icon=\"key\" size=\"sm\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui align=\"center\" gap=\"2\">\n                          <text-ui weight=\"semibold\" grow>API key rotated</text-ui>\n                          <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-notifications-panel.json

@@ -32,7 +32,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-overview-panel.json

@@ -46,7 +46,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "stat",

package/chunks/dashboard-page-header.json

@@ -31,7 +31,7 @@
       "layout": "header"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-pages-table.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <h3>Top pages</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Most-visited routes</text-ui>\n              </header>\n              <section bleed>\n                <table-ui id=\"analytics-pages\" sortable striped raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-quick-actions.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<card-ui>\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>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-reports-panel.json

@@ -33,7 +33,7 @@
       "layout": "panel"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-reports-table.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <span slot=\"heading\">\n                  <h3>Reports</h3>\n                </span>\n                <span slot=\"description\">\n                  <text-ui slot=\"description\" color=\"subtle\">Scheduled reports by category</text-ui>\n                </span>\n                <span slot=\"action\">\n                  <segmented-ui id=\"dash-reports-subtabs\" value=\"revenue\">\n                    <segment-ui value=\"revenue\" text=\"Revenue\"></segment-ui>\n                    <segment-ui value=\"customers\" text=\"Customers\"></segment-ui>\n                    <segment-ui value=\"sales\" text=\"Sales\"></segment-ui>\n                    <segment-ui value=\"errors\" text=\"Errors\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"+ New report\" variant=\"primary\"></button-ui>\n                </span>\n              </header>\n              <section bleed>\n                <table-ui id=\"dash-reports-table\" sortable striped raw></table-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-spark-cards.json

@@ -27,7 +27,7 @@
       "indicators"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-storage-card.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<card-ui>\n              <header>\n                <h3>Storage</h3>\n                <text-ui slot=\"description\" color=\"subtle\">75% of 100 GB used</text-ui>\n              </header>\n              <section>\n                <col-ui gap=\"2\">\n                  <progress-row-ui label=\"75 GB used\" value=\"75\" meta=\"100 GB total\"></progress-row-ui>\n                  <progress-row-ui label=\"Documents\" value=\"42\" meta=\"32 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Media\" value=\"37\" meta=\"28 GB\"></progress-row-ui>\n                  <progress-row-ui label=\"Backups\" value=\"20\" meta=\"15 GB\"></progress-row-ui>\n                </col-ui>\n              </section>\n              <footer>\n                <button-ui text=\"Upgrade Plan\" variant=\"primary\" stretch></button-ui>\n              </footer>\n            </card-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-tabs.json

@@ -24,7 +24,7 @@
       "sections"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "tab",

package/chunks/dashboard-team-actions-storage.json

@@ -38,7 +38,7 @@
       "layout": "row"
     }
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/dashboard-team-list.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<card-ui>\n              <header>\n                <h3>Team Members</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Your active collaborators</text-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Alex Chen\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Alex Chen</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Engineering Lead</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Sarah Miller\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Sarah Miller</text-ui>\n                          <badge-ui text=\"Online\" variant=\"success\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Product Designer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"James Park\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>James Park</text-ui>\n                          <badge-ui text=\"Away\" variant=\"warning\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Backend Engineer</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <row-ui gap=\"2\" align=\"center\" size=\"sm\" grow>\n                      <avatar-ui text=\"Maria Lopez\"></avatar-ui>\n                      <col-ui gap=\"0\" grow>\n                        <row-ui gap=\"0\" align=\"center\" justify=\"space-between\" grow>\n                          <text-ui strong>Maria Lopez</text-ui>\n                          <badge-ui text=\"Offline\" variant=\"muted\"></badge-ui>\n                        </row-ui>\n                        <text-ui color=\"subtle\">Data Analyst</text-ui>\n                      </col-ui>\n                    </row-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-traffic-channels.json

@@ -11,5 +11,5 @@
   },
   "html": "<grid-ui columns=\"3\" 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                <div slot=\"action\">\n                  <segmented-ui value=\"30d\">\n                    <segment-ui value=\"7d\" text=\"7d\"></segment-ui>\n                    <segment-ui value=\"30d\" text=\"30d\"></segment-ui>\n                    <segment-ui value=\"90d\" text=\"90d\"></segment-ui>\n                  </segmented-ui>\n                </div>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-traffic\" type=\"line\" x=\"day\" y=\"sessions\" smooth=\"0.4\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Acquisition channels</h3>\n                <text-ui slot=\"description\" color=\"subtle\">Where sessions come from</text-ui>\n              </header>\n              <section>\n                <chart-ui id=\"analytics-channels\" type=\"donut\" x=\"channel\" y=\"sessions\" hide-values></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/dashboard-transactions-table.json

@@ -23,7 +23,7 @@
       "status-badge"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/date-time-picker-form.json

@@ -25,7 +25,7 @@
       "card"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/destructive-confirm-modal.json

@@ -23,7 +23,7 @@
       "cancel"
     ]
   },
-  "captured_at": "2026-05-13T23:05:50.382Z",
+  "captured_at": "2026-05-14T01:42:11.604Z",
   "template": [
     {
       "id": "text",

package/chunks/divider-text-label.json

@@ -0,0 +1,81 @@
+{
+  "name": "divider-text-label",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <col-ui gap=\"3\">\n      <text-ui>Sign in with your email</text-ui>\n      <row-ui gap=\"3\" align=\"center\">\n        <divider-ui></divider-ui>\n        <text-ui size=\"sm\" color=\"subtle\">OR</text-ui>\n        <divider-ui></divider-ui>\n      </row-ui>\n      <button-ui text=\"Continue with Google\" variant=\"outline\" stretch></button-ui>\n    </col-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Horizontal divider with a centered text label between two horizontal-rule segments. Common section-separator pattern in long forms or feeds.",
+    "keywords": [
+      "divider",
+      "separator",
+      "rule",
+      "line",
+      "label",
+      "text",
+      "section",
+      "break",
+      "or",
+      "middle",
+      "horizontal",
+      "hr"
+    ]
+  },
+  "captured_at": "2026-05-14T01:42:11.604Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "textContent": "Sign in with your email"
+    },
+    {
+      "id": "divider",
+      "component": "Divider"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "textContent": "OR"
+    },
+    {
+      "id": "divider-2",
+      "component": "Divider"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "divider",
+        "text-2",
+        "divider-2"
+      ]
+    },
+    {
+      "id": "button",
+      "component": "Button"
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "text",
+        "row",
+        "button"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    }
+  ]
+}

package/chunks/doc-editor-shell.json

@@ -29,5 +29,5 @@
   "attrs": {},
   "html": "<article style=\"display:flex; height:100vh;\">\n  <section style=\"flex:1; display:flex; flex-direction:column; min-width:0;\">\n    <header data-chunk-slot=\"toolbar\" style=\"padding:var(--a-space-2) var(--a-space-3); border-bottom:1px solid var(--a-border-subtle); display:flex; align-items:center; justify-content:space-between;\">\n      <row-ui gap=\"2\" align=\"center\">\n        <button-ui icon=\"bold\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <button-ui icon=\"italic\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <separator-ui orientation=\"vertical\"></separator-ui>\n        <button-ui icon=\"list\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <button-ui icon=\"code\" variant=\"ghost\" size=\"sm\"></button-ui>\n      </row-ui>\n      <row-ui gap=\"2\">\n        <button-ui text=\"Share\" variant=\"outline\" size=\"sm\" icon=\"share\"></button-ui>\n        <button-ui text=\"Publish\" variant=\"primary\" size=\"sm\" icon=\"globe\"></button-ui>\n      </row-ui>\n    </header>\n\n    <section style=\"flex:1; display:flex; overflow:hidden;\">\n      <section data-chunk-slot=\"editor\" style=\"flex:1; padding:var(--a-space-4); overflow:auto;\">\n        <stack-ui gap=\"3\" style=\"max-width:720px; margin:0 auto;\">\n          <input-ui placeholder=\"Document title\" size=\"lg\" style=\"font-weight:600;\"></input-ui>\n          <textarea-ui placeholder=\"Start writing…\" style=\"min-height:400px; resize:vertical;\"></textarea-ui>\n        </stack-ui>\n      </section>\n\n      <aside data-chunk-slot=\"preview\" style=\"width:360px; border-left:1px solid var(--a-border-subtle); padding:var(--a-space-3); overflow:auto; background:var(--a-bg-subtle);\">\n        <stack-ui gap=\"3\">\n          <text-ui strong size=\"sm\">Preview</text-ui>\n          <card-ui padding=\"md\">\n            <text-ui color=\"subtle\">Rendered preview will appear here.</text-ui>\n          </card-ui>\n        </stack-ui>\n      </aside>\n    </section>\n  </section>\n\n  <aside data-chunk-slot=\"metadata\" style=\"width:240px; border-left:1px solid var(--a-border-subtle); padding:var(--a-space-3); overflow:auto;\">\n    <stack-ui gap=\"4\">\n      <text-ui strong size=\"sm\">Metadata</text-ui>\n      <stack-ui gap=\"1\">\n        <label-ui>Status</label-ui>\n        <select-ui>\n          <option>Draft</option>\n          <option>Review</option>\n          <option>Published</option>\n        </select-ui>\n      </stack-ui>\n      <stack-ui gap=\"1\">\n        <label-ui>Tags</label-ui>\n        <input-ui placeholder=\"Add tags…\"></input-ui>\n      </stack-ui>\n      <stack-ui gap=\"1\">\n        <label-ui>Author</label-ui>\n        <row-ui gap=\"2\" align=\"center\">\n          <avatar-ui size=\"sm\" src=\"/avatar.png\"></avatar-ui>\n          <text-ui size=\"sm\">Alex Chen</text-ui>\n        </row-ui>\n      </stack-ui>\n    </stack-ui>\n  </aside>\n</article>",
   "source": "catalog/page-shells/app/doc-editor/doc-editor.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/drawer-2fa-key.json

@@ -11,5 +11,5 @@
   },
   "html": "<drawer-ui id=\"drawer-2fa-key\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"key\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>Add a security key</text-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Hardware factors (YubiKey, Titan, built-in TPM) resist phishing and SIM-swap.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"Your browser will prompt for the key when you click Register. Follow the device's instructions — usually a tap or press.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Key details</text-ui>\n        <field-ui label=\"Key name\" hint=\"Pick something you'll recognize later.\">\n          <input-ui placeholder=\"e.g. YubiKey 5C adia (desk)\"></input-ui>\n        </field-ui>\n        <field-ui label=\"Key type\">\n          <select-ui value=\"fido2\">\n            <option value=\"fido2\">FIDO2 / WebAuthn</option>\n            <option value=\"u2f\">U2F (legacy)</option>\n            <option value=\"platform\">Platform authenticator (Touch ID, Windows Hello)</option>\n          </select-ui>\n        </field-ui>\n        <field-ui label=\"Require for every sign-in\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n        <field-ui label=\"Allow for step-up (sensitive actions only)\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"2\">\n        <text-ui strong>Registered keys</text-ui>\n        <text-ui color=\"subtle\" size=\"sm\">None yet. Registration runs entirely on your device — we only see the public key.</text-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Register key\" icon=\"key\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
   "source": "apps/saas/app/profile-security/profile-security.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }

package/chunks/drawer-2fa-sms.json

@@ -11,5 +11,5 @@
   },
   "html": "<drawer-ui id=\"drawer-2fa-sms\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chat-circle-text\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong>SMS authentication</text-ui>\n      <badge-ui text=\"Not recommended\" variant=\"warning\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\">Only use SMS if you have no access to an authenticator app or hardware key.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <alert-ui\n        variant=\"warning\"\n        icon=\"warning\"\n        text=\"SMS codes can be intercepted via SIM-swap attacks. Prefer an authenticator app or hardware key. If you proceed, we'll also require an authenticator as your primary factor.\"\n      ></alert-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Phone number</text-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"Country\">\n            <select-ui value=\"us\" style=\"flex: 0 0 8rem\">\n              <option value=\"us\">🇺🇸 +1</option>\n              <option value=\"uk\">🇬🇧 +44</option>\n              <option value=\"de\">🇩🇪 +49</option>\n              <option value=\"fi\">🇫🇮 +358</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Number\">\n            <input-ui placeholder=\"555 123 4567\" grow></input-ui>\n          </field-ui>\n        </row-ui>\n        <button-ui text=\"Send verification code\" variant=\"outline\" icon=\"paper-plane-tilt\" stretch></button-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <field-ui label=\"6-digit code\" hint=\"Enter the code we just texted you.\">\n        <otp-input-ui length=\"6\"></otp-input-ui>\n      </field-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n      <button-ui text=\"Enable SMS 2FA\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
   "source": "apps/saas/app/profile-security/profile-security.contents.html",
-  "captured_at": "2026-05-13T23:05:50.382Z"
+  "captured_at": "2026-05-14T01:42:11.604Z"
 }