@adia-ai/a2ui-corpus 0.6.22 → 0.6.24

package/chunks/responsive-kpi-grid.json

@@ -0,0 +1,166 @@
+{
+  "name": "responsive-kpi-grid",
+  "kind": "block",
+  "primary": "section",
+  "page": "/catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<section>\n    <grid-ui columns=\"1 2@sm 4@lg\" gap=\"3 4@md\">\n      <card-ui>\n        <section>\n          <stat-ui label=\"Total Users\" value=\"12,847\" change=\"+8%\" trend=\"up\"></stat-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <section>\n          <stat-ui label=\"Revenue\" value=\"$48.2k\" change=\"+12%\" trend=\"up\"></stat-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <section>\n          <stat-ui label=\"Churn Rate\" value=\"2.4%\" change=\"-0.3pp\" trend=\"down\"></stat-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <section>\n          <stat-ui label=\"Avg Session\" value=\"4m 12s\" change=\"+23s\" trend=\"up\"></stat-ui>\n        </section>\n      </card-ui>\n    </grid-ui>\n  </section>",
+  "source": "catalog/ui-patterns/v053-coverage-fill/v053-coverage-fill.contents.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Responsive KPI stat-card grid — 1 column on mobile, 2 on tablet (sm+), 4 on desktop (lg+) using @bp notation.",
+    "keywords": [
+      "responsive",
+      "kpi",
+      "stat",
+      "grid",
+      "mobile",
+      "tablet",
+      "desktop",
+      "breakpoint",
+      "columns",
+      "adaptive",
+      "layout"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "stat",
+      "component": "Stat",
+      "change": "+8%",
+      "label": "Total Users",
+      "trend": "up",
+      "value": "12,847"
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "stat"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "section"
+      ]
+    },
+    {
+      "id": "stat-2",
+      "component": "Stat",
+      "change": "+12%",
+      "label": "Revenue",
+      "trend": "up",
+      "value": "$48.2k"
+    },
+    {
+      "id": "section-2",
+      "component": "Section",
+      "children": [
+        "column-2"
+      ]
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "children": [
+        "stat-2"
+      ]
+    },
+    {
+      "id": "card-2",
+      "component": "Card",
+      "children": [
+        "section-2"
+      ]
+    },
+    {
+      "id": "stat-3",
+      "component": "Stat",
+      "change": "-0.3pp",
+      "label": "Churn Rate",
+      "trend": "down",
+      "value": "2.4%"
+    },
+    {
+      "id": "section-3",
+      "component": "Section",
+      "children": [
+        "column-3"
+      ]
+    },
+    {
+      "id": "column-3",
+      "component": "Column",
+      "children": [
+        "stat-3"
+      ]
+    },
+    {
+      "id": "card-3",
+      "component": "Card",
+      "children": [
+        "section-3"
+      ]
+    },
+    {
+      "id": "stat-4",
+      "component": "Stat",
+      "change": "+23s",
+      "label": "Avg Session",
+      "trend": "up",
+      "value": "4m 12s"
+    },
+    {
+      "id": "section-4",
+      "component": "Section",
+      "children": [
+        "column-4"
+      ]
+    },
+    {
+      "id": "column-4",
+      "component": "Column",
+      "children": [
+        "stat-4"
+      ]
+    },
+    {
+      "id": "card-4",
+      "component": "Card",
+      "children": [
+        "section-4"
+      ]
+    },
+    {
+      "id": "grid",
+      "component": "Grid",
+      "columns": "1 2@sm 4@lg",
+      "gap": "3 4@md",
+      "children": [
+        "card",
+        "card-2",
+        "card-3",
+        "card-4"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "grid"
+      ]
+    }
+  ]
+}

package/chunks/responsive-row-pattern.json

@@ -0,0 +1,71 @@
+{
+  "name": "responsive-row-pattern",
+  "kind": "block",
+  "primary": "div",
+  "page": "/site/patterns/responsive.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<div>\n  <h3>Responsive row — toolbar</h3>\n  <p>Stack vertically on mobile, push label and actions to opposite ends on desktop.</p>\n  <code-ui language=\"html\">&lt;row-ui\n  gap=\"2 3@md\"\n  justify=\"start between@md\"\n  align=\"start center@md\"\n  wrap\n&gt;\n  &lt;text-ui strong&gt;Recent transactions&lt;/text-ui&gt;\n  &lt;row-ui gap=\"2\"&gt;\n    &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt;\n    &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt;\n  &lt;/row-ui&gt;\n&lt;/row-ui&gt;</code-ui>\n  </div>",
+  "source": "site/pages/patterns/responsive.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Responsive row toolbar — gap and justify change at breakpoints; left label + right actions spread at md+ with @bp notation.",
+    "keywords": [
+      "responsive",
+      "row",
+      "toolbar",
+      "gap",
+      "justify",
+      "breakpoint",
+      "@bp",
+      "spread",
+      "layout",
+      "mobile"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Responsive row — toolbar"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Stack vertically on mobile, push label and actions to opposite ends on desktop."
+    },
+    {
+      "id": "code",
+      "component": "Code",
+      "language": "html",
+      "textContent": "&lt;row-ui gap=\"2 3@md\" justify=\"start between@md\" align=\"start center@md\" wrap &gt; &lt;text-ui strong&gt;Recent transactions&lt;/text-ui&gt; &lt;row-ui gap=\"2\"&gt; &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt; &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt; &lt;/row-ui&gt; &lt;/row-ui&gt;"
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "text",
+        "text-2",
+        "code"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/chunks/responsive-wrap-at-pattern.json

@@ -0,0 +1,76 @@
+{
+  "name": "responsive-wrap-at-pattern",
+  "kind": "block",
+  "primary": "div",
+  "page": "/site/patterns/responsive.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<div>\n  <h3>Responsive wrap — <code>wrap-at</code></h3>\n  <p>Boolean attributes like <code>wrap</code> can't use <code>@bp</code> value syntax. Use <code>wrap-at=\"bp\"</code> to enable wrapping from a named breakpoint upward. The existing <code>wrap</code> attribute (always-wrap) is unchanged.</p>\n  <code-ui language=\"html\">&lt;!-- Toolbar: single-row on desktop, wraps to multiple lines on mobile --&gt;\n&lt;row-ui gap=\"2 3@md\" wrap-at=\"sm\"&gt;\n  &lt;input-ui placeholder=\"Search...\"&gt;&lt;/input-ui&gt;\n  &lt;select-ui&gt;&lt;option&gt;All statuses&lt;/option&gt;&lt;/select-ui&gt;\n  &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt;\n  &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt;\n&lt;/row-ui&gt;</code-ui>\n  <p>Unlike <code>@bp</code> value-annotations, <code>wrap-at</code> is a standalone attribute that takes a single breakpoint name — no multi-value parsing.</p>\n  </div>",
+  "source": "site/pages/patterns/responsive.html",
+  "metadata": {
+    "domain": "layout",
+    "description": "Responsive flex wrap via wrap-at — enables flex-wrap from named breakpoint upward; for boolean attrs that cannot use @bp value syntax.",
+    "keywords": [
+      "responsive",
+      "wrap-at",
+      "flex",
+      "wrap",
+      "breakpoint",
+      "boolean",
+      "attribute",
+      "toolbar"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Responsive wrap — wrap-at"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Boolean attributes like wrap can't use @bp value syntax. Use wrap-at=\"bp\" to enable wrapping from a named breakpoint upward. The existing wrap attribute (always-wrap) is unchanged."
+    },
+    {
+      "id": "code",
+      "component": "Code",
+      "language": "html",
+      "textContent": "&lt;!-- Toolbar: single-row on desktop, wraps to multiple lines on mobile --&gt; &lt;row-ui gap=\"2 3@md\" wrap-at=\"sm\"&gt; &lt;input-ui placeholder=\"Search...\"&gt;&lt;/input-ui&gt; &lt;select-ui&gt;&lt;option&gt;All statuses&lt;/option&gt;&lt;/select-ui&gt; &lt;button-ui text=\"Export\" variant=\"outline\"&gt;&lt;/button-ui&gt; &lt;button-ui text=\"+ New\" variant=\"primary\"&gt;&lt;/button-ui&gt; &lt;/row-ui&gt;"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Unlike @bp value-annotations, wrap-at is a standalone attribute that takes a single breakpoint name — no multi-value parsing."
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "text",
+        "text-2",
+        "code",
+        "text-3"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "section"
+      ]
+    }
+  ]
+}

package/chunks/search-with-filters.json

@@ -25,7 +25,7 @@
       "directory"
     ]
   },
-  "captured_at": "2026-05-21T19:10:53.888Z",
+  "captured_at": "2026-05-22T22:31:46.761Z",
   "template": [
     {
       "id": "search-ui",

package/chunks/section-with-stack.json

@@ -8,5 +8,41 @@
   "attrs": {},
   "html": "<section>\n            <col-ui gap=\"2\">\n              <text-ui color=\"subtle\">Embed designs and sync frames.</text-ui>\n            </col-ui>\n          </section>",
   "source": "apps/saas/app/integrations/integrations.contents.html",
-  "captured_at": "2026-05-21T19:10:53.888Z"
+  "metadata": {
+    "domain": "layout",
+    "description": "Section with stack — content section wrapper with embedded stacked card layout.",
+    "keywords": [
+      "section",
+      "stack",
+      "content",
+      "wrapper",
+      "cards",
+      "layout",
+      "nested"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "color": "subtle",
+      "textContent": "Embed designs and sync frames."
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "text"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    }
+  ]
 }

package/chunks/settings-admin-page.json

@@ -9,7 +9,7 @@
     "drawer-delete-workspace"
   ],
   "attrs": {},
-  "html": "<article>\n<!-- ═══════════════ WORKSPACE DETAILS ═══════════════ -->\n<section>\n  <h2>Workspace</h2>\n  <div data-section>\n    <aside>\n      <h3>Details</h3>\n      <p>Name and identify your workspace.</p>\n    </aside>\n    <div data-col><!-- nested: settings-general-form --></div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>Description</h3>\n      <p>A brief summary of what this workspace is for.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"Description\">\n        <textarea-ui placeholder=\"What is this workspace for?\">A zero-dependency vanilla JS web component library for modern interfaces.</textarea-ui>\n      </field-ui>\n      <field-ui label=\"Timezone\">\n        <select-ui id=\"settings-timezone\" placeholder=\"Select timezone\"></select-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ DEFAULTS ═══════════════ -->\n<section>\n  <h2>Defaults</h2>\n  <div data-section>\n    <aside>\n      <h3>Model</h3>\n      <p>Choose the default model and parameters for new conversations.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"Default model\">\n        <select-ui id=\"settings-model\" placeholder=\"Select model\"></select-ui>\n      </field-ui>\n      <grid-ui columns=\"2\" gap=\"3\">\n        <range-ui label=\"Max tokens\" value=\"4096\" min=\"256\" max=\"16384\" step=\"256\"></range-ui>\n        <range-ui label=\"Temperature\" value=\"0.7\" min=\"0\" max=\"2\" step=\"0.1\"></range-ui>\n      </grid-ui>\n    </div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>System prompt</h3>\n      <p>Default instructions sent with every conversation.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"System prompt\">\n        <textarea-ui placeholder=\"You are a helpful assistant...\" rows=\"5\"></textarea-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ PREFERENCES ═══════════════ -->\n<section>\n  <h2>Preferences</h2>\n  <div data-section>\n    <aside>\n      <h3>Behavior</h3>\n      <p>Customize how the interface behaves.</p>\n    </aside>\n    <div data-col>\n      <switch-ui label=\"Send on Enter\" checked></switch-ui>\n      <switch-ui label=\"Stream responses\" checked></switch-ui>\n      <switch-ui label=\"Show token count\"></switch-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ APPEARANCE ═══════════════\n     Workspace-level theming surface. <theme-panel> owns the three\n     knobs of the AdiaUI theming contract: [data-theme] named themes,\n     --a-density / --a-radius-k parametric overrides, and color-scheme\n     light/dark switching, plus localStorage persistence. The Behavior\n     section above lost its standalone \"Dark mode\" switch; the scheme\n     toggle inside <theme-panel> is the canonical control.\n-->\n<section>\n  <h2>Appearance</h2>\n  <div data-section>\n    <aside>\n      <h3>Theme</h3>\n      <p>Pick a theme, adjust density and corner radius, or switch between light and dark mode. Changes apply instantly and are saved per browser.</p>\n    </aside>\n    <div data-col>\n      <theme-panel persist parametric presets scheme-toggle></theme-panel>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ NOTIFICATIONS ═══════════════ -->\n<section>\n  <h2>Notifications</h2>\n  <div data-section>\n    <aside>\n      <h3>Channels</h3>\n      <p>Choose how you receive notifications for workspace activity.</p>\n    </aside>\n    <div data-col>\n      <switch-ui label=\"Email notifications\" checked></switch-ui>\n      <switch-ui label=\"Push notifications\"></switch-ui>\n      <switch-ui label=\"Weekly digest\" checked></switch-ui>\n      <switch-ui label=\"SMS alerts\"></switch-ui>\n    </div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>Activity</h3>\n      <p>What types of events trigger notifications.</p>\n    </aside>\n    <div data-col>\n      <check-ui label=\"New team member joins\" checked></check-ui>\n      <check-ui label=\"API key rotated\" checked></check-ui>\n      <check-ui label=\"Usage threshold reached\" checked></check-ui>\n      <check-ui label=\"Billing changes\"></check-ui>\n      <check-ui label=\"Deployment completed\"></check-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ DANGER ZONE ═══════════════ -->\n<section>\n  <h2>Danger zone</h2>\n  <div data-section>\n    <aside>\n      <h3>Delete workspace</h3>\n      <p>Permanently delete this workspace and all associated data. This action cannot be undone.</p>\n    </aside>\n    <div data-col>\n      <alert-ui\n        text=\"Deleting your workspace will remove all projects, members, API keys, and conversation history.\"\n        variant=\"danger\"\n        icon=\"warning\"\n      ></alert-ui>\n      <button-ui text=\"Delete workspace\" color=\"danger\" icon=\"trash\" onclick=\"document.getElementById('drawer-delete-workspace').open = true\"></button-ui>\n    </div>\n  </div>\n</section>\n\n<!-- ═══════════════ DELETE WORKSPACE DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-delete-workspace\" side=\"right\" size=\"md\"><!-- nested: drawer-delete-workspace --></drawer-ui>\n</article>",
+  "html": "<article>\n<!-- ═══════════════ WORKSPACE DETAILS ═══════════════ -->\n<section>\n  <h2>Workspace</h2>\n  <div data-section>\n    <aside>\n      <h3>Details</h3>\n      <p>Name and identify your workspace.</p>\n    </aside>\n    <div data-col><!-- nested: settings-general-form --></div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>Description</h3>\n      <p>A brief summary of what this workspace is for.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"Description\">\n        <textarea-ui placeholder=\"What is this workspace for?\">A zero-dependency vanilla JS web component library for modern interfaces.</textarea-ui>\n      </field-ui>\n      <field-ui label=\"Timezone\">\n        <select-ui id=\"settings-timezone\" placeholder=\"Select timezone\"></select-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ DEFAULTS ═══════════════ -->\n<section>\n  <h2>Defaults</h2>\n  <div data-section>\n    <aside>\n      <h3>Model</h3>\n      <p>Choose the default model and parameters for new conversations.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"Default model\">\n        <select-ui id=\"settings-model\" placeholder=\"Select model\"></select-ui>\n      </field-ui>\n      <grid-ui columns=\"1 2@md\" gap=\"3\">\n        <range-ui label=\"Max tokens\" value=\"4096\" min=\"256\" max=\"16384\" step=\"256\"></range-ui>\n        <range-ui label=\"Temperature\" value=\"0.7\" min=\"0\" max=\"2\" step=\"0.1\"></range-ui>\n      </grid-ui>\n    </div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>System prompt</h3>\n      <p>Default instructions sent with every conversation.</p>\n    </aside>\n    <div data-col>\n      <field-ui label=\"System prompt\">\n        <textarea-ui placeholder=\"You are a helpful assistant...\" rows=\"5\"></textarea-ui>\n      </field-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ PREFERENCES ═══════════════ -->\n<section>\n  <h2>Preferences</h2>\n  <div data-section>\n    <aside>\n      <h3>Behavior</h3>\n      <p>Customize how the interface behaves.</p>\n    </aside>\n    <div data-col>\n      <switch-ui label=\"Send on Enter\" checked></switch-ui>\n      <switch-ui label=\"Stream responses\" checked></switch-ui>\n      <switch-ui label=\"Show token count\"></switch-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ APPEARANCE ═══════════════\n     Workspace-level theming surface. <theme-panel> owns the three\n     knobs of the AdiaUI theming contract: [data-theme] named themes,\n     --a-density / --a-radius-k parametric overrides, and color-scheme\n     light/dark switching, plus localStorage persistence. The Behavior\n     section above lost its standalone \"Dark mode\" switch; the scheme\n     toggle inside <theme-panel> is the canonical control.\n-->\n<section>\n  <h2>Appearance</h2>\n  <div data-section>\n    <aside>\n      <h3>Theme</h3>\n      <p>Pick a theme, adjust density and corner radius, or switch between light and dark mode. Changes apply instantly and are saved per browser.</p>\n    </aside>\n    <div data-col>\n      <theme-panel persist parametric presets scheme-toggle></theme-panel>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ NOTIFICATIONS ═══════════════ -->\n<section>\n  <h2>Notifications</h2>\n  <div data-section>\n    <aside>\n      <h3>Channels</h3>\n      <p>Choose how you receive notifications for workspace activity.</p>\n    </aside>\n    <div data-col>\n      <switch-ui label=\"Email notifications\" checked></switch-ui>\n      <switch-ui label=\"Push notifications\"></switch-ui>\n      <switch-ui label=\"Weekly digest\" checked></switch-ui>\n      <switch-ui label=\"SMS alerts\"></switch-ui>\n    </div>\n  </div>\n  <div data-section>\n    <aside>\n      <h3>Activity</h3>\n      <p>What types of events trigger notifications.</p>\n    </aside>\n    <div data-col>\n      <check-ui label=\"New team member joins\" checked></check-ui>\n      <check-ui label=\"API key rotated\" checked></check-ui>\n      <check-ui label=\"Usage threshold reached\" checked></check-ui>\n      <check-ui label=\"Billing changes\"></check-ui>\n      <check-ui label=\"Deployment completed\"></check-ui>\n    </div>\n  </div>\n</section>\n\n<divider-ui></divider-ui>\n\n<!-- ═══════════════ DANGER ZONE ═══════════════ -->\n<section>\n  <h2>Danger zone</h2>\n  <div data-section>\n    <aside>\n      <h3>Delete workspace</h3>\n      <p>Permanently delete this workspace and all associated data. This action cannot be undone.</p>\n    </aside>\n    <div data-col>\n      <alert-ui\n        text=\"Deleting your workspace will remove all projects, members, API keys, and conversation history.\"\n        variant=\"danger\"\n        icon=\"warning\"\n      ></alert-ui>\n      <button-ui text=\"Delete workspace\" color=\"danger\" icon=\"trash\" onclick=\"document.getElementById('drawer-delete-workspace').open = true\"></button-ui>\n    </div>\n  </div>\n</section>\n\n<!-- ═══════════════ DELETE WORKSPACE DRAWER ═══════════════ -->\n<drawer-ui id=\"drawer-delete-workspace\" side=\"right\" size=\"md\"><!-- nested: drawer-delete-workspace --></drawer-ui>\n</article>",
   "source": "apps/saas/app/settings-page/settings-page.contents.html",
   "metadata": {
     "domain": "settings",
@@ -42,7 +42,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-05-21T19:10:53.888Z",
+  "captured_at": "2026-05-22T22:31:46.761Z",
   "template": [
     {
       "id": "text",
@@ -263,7 +263,7 @@
     {
       "id": "grid",
       "component": "Grid",
-      "columns": "2",
+      "columns": "1 2@md",
       "gap": "3",
       "children": [
         "range",
@@ -719,7 +719,8 @@
     {
       "id": "text-27",
       "component": "Text",
-      "variant": "body"
+      "variant": "body",
+      "size": "sm"
     },
     {
       "id": "header",
@@ -778,7 +779,6 @@
     {
       "id": "card",
       "component": "Card",
-      "size": "sm",
       "children": [
         "section-9"
       ]
@@ -806,7 +806,6 @@
     {
       "id": "card-2",
       "component": "Card",
-      "size": "sm",
       "children": [
         "section-10"
       ]
@@ -834,7 +833,6 @@
     {
       "id": "card-3",
       "component": "Card",
-      "size": "sm",
       "children": [
         "section-11"
       ]
@@ -862,7 +860,6 @@
     {
       "id": "card-4",
       "component": "Card",
-      "size": "sm",
       "children": [
         "section-12"
       ]

package/chunks/settings-appearance.json

@@ -23,7 +23,7 @@
       "ui-controls"
     ]
   },
-  "captured_at": "2026-05-21T19:10:53.888Z",
+  "captured_at": "2026-05-22T22:31:46.761Z",
   "template": [
     {
       "id": "text",

package/chunks/settings-billing-plan.json

@@ -8,7 +8,100 @@
   "attrs": {
     "data-col": ""
   },
-  "html": "<div data-col>\n      <card-ui size=\"sm\">\n        <header>\n          <span slot=\"icon\">\n            <avatar-ui icon=\"star\"></avatar-ui>\n          </span>\n          <span slot=\"heading\">\n            <text-ui strong>Pro</text-ui>\n            <badge-ui text=\"Current\" variant=\"accent\"></badge-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Change plan\" variant=\"primary\" size=\"sm\" onclick=\"document.getElementById('drawer-change-plan').open = true\"></button-ui>\n          </span>\n          <span slot=\"description\">\n            <text-ui color=\"subtle\" size=\"sm\">$49/month · billed monthly · Next invoice May 14, 2026</text-ui>\n          </span>\n        </header>\n      </card-ui>\n      <field-ui label=\"Billing interval\">\n        <segmented-ui value=\"monthly\">\n          <segment-ui value=\"monthly\" text=\"Monthly\"></segment-ui>\n          <segment-ui value=\"annual\" text=\"Annual · 2 months free\"></segment-ui>\n        </segmented-ui>\n      </field-ui>\n    </div>",
+  "html": "<div data-col>\n      <card-ui>\n        <header>\n          <span slot=\"icon\">\n            <avatar-ui icon=\"star\"></avatar-ui>\n          </span>\n          <span slot=\"heading\">\n            <text-ui strong>Pro</text-ui>\n            <badge-ui text=\"Current\" variant=\"accent\"></badge-ui>\n          </span>\n          <span slot=\"action\" size=\"sm\">\n            <button-ui text=\"Change plan\" variant=\"primary\" size=\"sm\" onclick=\"document.getElementById('drawer-change-plan').open = true\"></button-ui>\n          </span>\n          <span slot=\"description\">\n            <text-ui color=\"subtle\" size=\"sm\">$49/month · billed monthly · Next invoice May 14, 2026</text-ui>\n          </span>\n        </header>\n      </card-ui>\n      <field-ui label=\"Billing interval\">\n        <segmented-ui value=\"monthly\">\n          <segment-ui value=\"monthly\" text=\"Monthly\"></segment-ui>\n          <segment-ui value=\"annual\" text=\"Annual · 2 months free\"></segment-ui>\n        </segmented-ui>\n      </field-ui>\n    </div>",
   "source": "apps/saas/app/billing/billing.contents.html",
-  "captured_at": "2026-05-21T19:10:53.888Z"
+  "metadata": {
+    "domain": "settings",
+    "description": "Billing plan section — current plan card with usage stats and upgrade CTA.",
+    "keywords": [
+      "settings",
+      "billing",
+      "plan",
+      "subscription",
+      "usage",
+      "upgrade",
+      "current"
+    ]
+  },
+  "captured_at": "2026-05-22T22:31:46.761Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "body"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Pro"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "variant": "body",
+      "size": "sm"
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "$49/month · billed monthly · Next invoice May 14, 2026"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "text-2",
+        "text-3",
+        "text-4"
+      ]
+    },
+    {
+      "id": "card",
+      "component": "Card",
+      "children": [
+        "header"
+      ]
+    },
+    {
+      "id": "segment",
+      "component": "Segment",
+      "text": "Monthly",
+      "value": "monthly"
+    },
+    {
+      "id": "segment-2",
+      "component": "Segment",
+      "text": "Annual · 2 months free",
+      "value": "annual"
+    },
+    {
+      "id": "segmented-control",
+      "component": "SegmentedControl",
+      "value": "monthly",
+      "children": [
+        "segment",
+        "segment-2"
+      ]
+    },
+    {
+      "id": "field",
+      "component": "Field",
+      "label": "Billing interval",
+      "children": [
+        "segmented-control"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "data-col": "",
+      "children": [
+        "card",
+        "field"
+      ]
+    }
+  ]
 }

package/chunks/settings-general-form.json

@@ -25,7 +25,7 @@
       "identity"
     ]
   },
-  "captured_at": "2026-05-21T19:10:53.888Z",
+  "captured_at": "2026-05-22T22:31:46.761Z",
   "template": [
     {
       "id": "input",