@adia-ai/a2ui-corpus 0.6.18 → 0.6.20

package/chunks/reg-org-chart-review.json

@@ -10,5 +10,5 @@
   },
   "html": "<section data-reg-form>\n          <div data-reg-found-status>\n            <icon-ui name=\"users-three\"></icon-ui>\n            <text-ui> <strong>12 members</strong> · 8 confirmed · 3 inferred · 1 needs review </text-ui>\n            <button-ui text=\"Re-run inference\" variant=\"ghost\" size=\"sm\" type=\"button\" style=\"margin-inline-start: auto\"></button-ui>\n          </div>\n\n          <list-ui divider>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Jane Doe\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Jane Doe</text-ui>\n                      <badge-ui text=\"You\" variant=\"accent\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Founder · No manager · Engineering</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-1\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Maya Patel\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Maya Patel</text-ui>\n                      <badge-ui text=\"Confirmed\" variant=\"success\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">VP of Engineering · Reports to Jane Doe · Engineering</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-2\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Alex Chen\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Alex Chen</text-ui>\n                      <badge-ui text=\"Inferred\" variant=\"warning\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\"\n                      >Senior Engineer · Reports to Maya Patel · Engineering — inferred from <code>alex@acme.com</code> + LinkedIn title.</text-ui\n                    >\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-3\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Sam Reeves\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Sam Reeves</text-ui>\n                      <badge-ui text=\"Needs review\" variant=\"danger\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\"\n                      >Title not found on LinkedIn. We placed them in Engineering as a default — please confirm or adjust.</text-ui\n                    >\n                  </span>\n                  <button-ui slot=\"action\" text=\"Review\" variant=\"primary\" icon=\"warning\" type=\"button\" data-edit=\"member-4\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Riley Park\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Riley Park</text-ui>\n                      <badge-ui text=\"Confirmed\" variant=\"success\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Head of Design · Reports to Jane Doe · Design</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-5\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Devon Hill\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Devon Hill</text-ui>\n                      <badge-ui text=\"Inferred\" variant=\"warning\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Product Designer · Reports to Riley Park · Design — inferred from LinkedIn role.</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-6\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Morgan Lee\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Morgan Lee</text-ui>\n                      <badge-ui text=\"Confirmed\" variant=\"success\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Head of Sales · Reports to Jane Doe · Sales</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-7\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n            <list-item-ui>\n              <card-ui>\n                <header>\n                  <span slot=\"icon\"><avatar-ui text=\"Casey Brooks\"></avatar-ui></span>\n                  <span slot=\"heading\">\n                    <row-ui gap=\"2\" align=\"center\">\n                      <text-ui strong>Casey Brooks</text-ui>\n                      <badge-ui text=\"Inferred\" variant=\"warning\"></badge-ui>\n                    </row-ui>\n                  </span>\n                  <span slot=\"description\">\n                    <text-ui color=\"subtle\" size=\"sm\">Account Executive · Reports to Morgan Lee · Sales — inferred.</text-ui>\n                  </span>\n                  <button-ui slot=\"action\" text=\"Edit\" variant=\"ghost\" icon=\"pencil-simple\" type=\"button\" data-edit=\"member-8\"></button-ui>\n                </header>\n              </card-ui>\n            </list-item-ui>\n          </list-ui>\n\n          <button-ui text=\"Show 4 more members\" icon=\"caret-down\" variant=\"ghost\" type=\"button\"></button-ui>\n\n          <div data-reg-defer-row>\n            <check-ui name=\"defer\" label=\"I'll do this later from admin → directory\"></check-ui>\n            <text-ui color=\"subtle\" size=\"sm\" data-reg-defer-hint>\n              Inferred members keep their AI-suggested role + department until an admin confirms. They can self-correct from their profile.\n            </text-ui>\n          </div>\n        </section>",
   "source": "apps/user-flow/app/registration/org-review/org-review.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-profile-identity.json

@@ -16,5 +16,5 @@
   },
   "html": "<form data-reg-input action=\"/site/examples/registration/use-case\" method=\"get\">\n        <header data-reg-heading><!-- nested: reg-step-header --></header>\n\n        <section data-reg-form>\n          <field-ui inline label=\"Full Name\">\n            <input-ui name=\"name\" autocomplete=\"name\" placeholder=\"Jane Doe\" required></input-ui>\n          </field-ui>\n          <field-ui inline label=\"Display Name\" hint=\"What teammates see in mentions and comments.\">\n            <input-ui name=\"display\" autocomplete=\"nickname\" placeholder=\"Jane\"></input-ui>\n          </field-ui>\n          <field-ui inline label=\"Profile Photo\" hint=\"Square image, at least 256×256.\">\n            <upload-ui name=\"avatar\" accept=\"image/*\"></upload-ui>\n          </field-ui>\n        </section>\n\n        <footer><!-- nested: reg-step-footer --></footer>\n      </form>",
   "source": "apps/user-flow/app/registration/profile/profile.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-step-footer.json

@@ -184,5 +184,5 @@
       "html": "<footer>\n          <step-progress-ui value=\"1\" total=\"10\" caption=\"Step 1 of 10\"></step-progress-ui>\n          <div data-reg-actions>\n            <button-ui text=\"Continue\" variant=\"primary\" type=\"submit\"></button-ui>\n          </div>\n        </footer>"
     }
   ],
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-step-header.json

@@ -185,5 +185,5 @@
       "html": "<header data-reg-heading>\n          <h1>Name your workspace</h1>\n          <text-ui color=\"subtle\">This is what your team will see. You can change it anytime.</text-ui>\n        </header>"
     }
   ],
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-step-progress.json

@@ -220,5 +220,5 @@
       "html": "<step-progress-ui value=\"1\" total=\"10\" caption=\"Step 1 of 10\"></step-progress-ui>"
     }
   ],
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-step-shell.json

@@ -64,7 +64,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "image",
@@ -103,6 +103,8 @@
     {
       "id": "text-4",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "User setup · Step 7 of 8 · Personal profile"
     },
     {
@@ -157,6 +159,7 @@
     {
       "id": "text-6",
       "component": "Text",
+      "color": "subtle",
       "textContent": "Optional — these help teammates find you in directory search and route messages to the right person."
     },
     {
@@ -478,6 +481,8 @@
     {
       "id": "text-29",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "Optional — link your handles so DMs and mentions can route to the right surface."
     },
     {
@@ -530,6 +535,8 @@
     {
       "id": "text-30",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "Your profile will use the basics from sign-up (name + email) until you complete this step.",
       "data-reg-defer-hint": ""
     },

package/chunks/reg-story-pane.json

@@ -184,5 +184,5 @@
       "html": "<aside data-reg-story>\n        <a data-reg-brand href=\"/\" aria-label=\"AdiaUI home\">\n          <img src=\"/icons/agent-ui-light.svg\" alt=\"\" />\n          <strong>AdiaUI</strong>\n        </a>\n\n        <div data-reg-story-content>\n          <h2>Build your team's home.</h2>\n          <p>\n            A workspace is where conversations, projects, and integrations live. Most teams start with one — name it after your company and add more rooms\n            inside as you grow.\n          </p>\n          <text-ui color=\"subtle\" size=\"sm\">Step 1 of 10 · Workspace setup</text-ui>\n        </div>\n      </aside>"
     }
   ],
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-success-summary.json

@@ -10,5 +10,5 @@
   },
   "html": "<section data-reg-form>\n          <col-ui gap=\"3\">\n            <card-ui>\n              <header>\n                <span slot=\"icon\"><avatar-ui icon=\"user-plus\"></avatar-ui></span>\n                <span slot=\"heading\"><text-ui strong>Invite more teammates</text-ui></span>\n                <span slot=\"description\">\n                  <text-ui color=\"subtle\" size=\"sm\">Three invites are out — add more from the workspace settings.</text-ui>\n                </span>\n                <button-ui slot=\"action\" text=\"Invite\" variant=\"ghost\" icon=\"arrow-right\" icon-position=\"end\"></button-ui>\n              </header>\n            </card-ui>\n            <card-ui>\n              <header>\n                <span slot=\"icon\"><avatar-ui icon=\"squares-four\"></avatar-ui></span>\n                <span slot=\"heading\"><text-ui strong>Browse templates</text-ui></span>\n                <span slot=\"description\">\n                  <text-ui color=\"subtle\" size=\"sm\">Pre-built dashboards, plans, and trackers — start from a template.</text-ui>\n                </span>\n                <button-ui slot=\"action\" text=\"Browse\" variant=\"ghost\" icon=\"arrow-right\" icon-position=\"end\"></button-ui>\n              </header>\n            </card-ui>\n            <card-ui>\n              <header>\n                <span slot=\"icon\"><avatar-ui icon=\"book-open\"></avatar-ui></span>\n                <span slot=\"heading\"><text-ui strong>Read the docs</text-ui></span>\n                <span slot=\"description\">\n                  <text-ui color=\"subtle\" size=\"sm\">15 minutes to get fluent — keyboard shortcuts, sharing, and search.</text-ui>\n                </span>\n                <button-ui slot=\"action\" text=\"Open docs\" variant=\"ghost\" icon=\"arrow-right\" icon-position=\"end\"></button-ui>\n              </header>\n            </card-ui>\n          </col-ui>\n        </section>",
   "source": "apps/user-flow/app/registration/confirmation/confirmation.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-team-size.json

@@ -10,5 +10,5 @@
   },
   "html": "<section data-reg-form>\n          <field-ui inline label=\"Team Size\">\n            <segmented-ui name=\"team-size\" value=\"2-10\">\n              <segment-ui text=\"2–10\" value=\"2-10\"></segment-ui>\n              <segment-ui text=\"11–50\" value=\"11-50\"></segment-ui>\n              <segment-ui text=\"50+\" value=\"20+\"></segment-ui>\n            </segmented-ui>\n          </field-ui>\n          <field-ui inline label=\"Industry\" hint=\"Optional. Helps us recommend relevant templates.\">\n            <select-ui name=\"industry\">\n              <option value=\"\">Choose…</option>\n              <option value=\"software\">Software · SaaS</option>\n              <option value=\"design\">Design · Creative</option>\n              <option value=\"marketing\">Marketing · Growth</option>\n              <option value=\"ecommerce\">E-commerce · Retail</option>\n              <option value=\"finance\">Finance · Fintech</option>\n              <option value=\"education\">Education · Research</option>\n              <option value=\"healthcare\">Healthcare · Biotech</option>\n              <option value=\"other\">Something else</option>\n            </select-ui>\n          </field-ui>\n        </section>",
   "source": "apps/user-flow/app/registration/team-size/team-size.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-usecase-picker.json

@@ -12,5 +12,5 @@
   },
   "html": "<section data-reg-form role=\"radiogroup\" aria-label=\"Use case\">\n          <col-ui gap=\"2\">\n            <option-card-ui\n              name=\"use-case\"\n              value=\"build\"\n              checked\n              heading=\"I'm building a product\"\n              description=\"Spinning up a new project — design, ship, iterate.\"\n            ></option-card-ui>\n            <option-card-ui\n              name=\"use-case\"\n              value=\"explore\"\n              heading=\"I'm exploring the product\"\n              description=\"Kicking the tires before bringing a team along.\"\n            ></option-card-ui>\n            <option-card-ui\n              name=\"use-case\"\n              value=\"migrate\"\n              heading=\"I'm migrating from another tool\"\n              description=\"Moving an existing workspace and want a smooth port.\"\n            ></option-card-ui>\n            <option-card-ui\n              name=\"use-case\"\n              value=\"evaluate\"\n              heading=\"I'm evaluating for my team\"\n              description=\"Comparing options and want to dig into specifics.\"\n            ></option-card-ui>\n            <option-card-ui name=\"use-case\" value=\"other\" heading=\"Something else\" description=\"Tell us more — we read every response.\">\n              <textarea-ui name=\"use-case-detail\" placeholder=\"What brings you to AdiaUI?\" rows=\"3\"></textarea-ui>\n            </option-card-ui>\n          </col-ui>\n        </section>",
   "source": "apps/user-flow/app/registration/use-case/use-case.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/reg-workspace-name.json

@@ -31,7 +31,7 @@
       "setup"
     ]
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "text",
@@ -42,6 +42,7 @@
     {
       "id": "text-2",
       "component": "Text",
+      "color": "subtle",
       "textContent": "This is what your team will see. You can change it anytime."
     },
     {

package/chunks/search-with-filters.json

@@ -25,7 +25,7 @@
       "directory"
     ]
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "search-ui",
@@ -35,6 +35,8 @@
     {
       "id": "text",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "Filter:"
     },
     {
@@ -88,6 +90,8 @@
     {
       "id": "text-2",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "128 results · sorted by relevance"
     },
     {

package/chunks/section-with-stack.json

@@ -8,5 +8,5 @@
   "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-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/settings-admin-page.json

@@ -6,11 +6,10 @@
   "slots": [],
   "nested": [
     "settings-general-form",
-    "settings-appearance",
     "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><!-- nested: settings-appearance --></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=\"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>",
   "source": "apps/saas/app/settings-page/settings-page.contents.html",
   "metadata": {
     "domain": "settings",
@@ -43,7 +42,7 @@
       "layout": "page"
     }
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "text",
@@ -462,27 +461,19 @@
       "scheme-toggle": true
     },
     {
-      "id": "column-14",
+      "id": "column-13",
       "component": "Column",
       "data-col": "",
       "children": [
         "theme-panel"
       ]
     },
-    {
-      "id": "column-13",
-      "component": "Column",
-      "data-section": "",
-      "children": [
-        "sidebar-6",
-        "column-14"
-      ]
-    },
     {
       "id": "column-12",
       "component": "Column",
       "data-section": "",
       "children": [
+        "sidebar-6",
         "column-13"
       ]
     },
@@ -547,7 +538,7 @@
       "label": "SMS alerts"
     },
     {
-      "id": "column-16",
+      "id": "column-15",
       "component": "Column",
       "data-col": "",
       "children": [
@@ -558,12 +549,12 @@
       ]
     },
     {
-      "id": "column-15",
+      "id": "column-14",
       "component": "Column",
       "data-section": "",
       "children": [
         "sidebar-7",
-        "column-16"
+        "column-15"
       ]
     },
     {
@@ -615,7 +606,7 @@
       "label": "Deployment completed"
     },
     {
-      "id": "column-18",
+      "id": "column-17",
       "component": "Column",
       "data-col": "",
       "children": [
@@ -627,12 +618,12 @@
       ]
     },
     {
-      "id": "column-17",
+      "id": "column-16",
       "component": "Column",
       "data-section": "",
       "children": [
         "sidebar-8",
-        "column-18"
+        "column-17"
       ]
     },
     {
@@ -640,8 +631,8 @@
       "component": "Section",
       "children": [
         "text-17",
-        "column-15",
-        "column-17"
+        "column-14",
+        "column-16"
       ]
     },
     {
@@ -689,7 +680,7 @@
       "text": "Delete workspace"
     },
     {
-      "id": "column-20",
+      "id": "column-19",
       "component": "Column",
       "data-col": "",
       "children": [
@@ -698,12 +689,12 @@
       ]
     },
     {
-      "id": "column-19",
+      "id": "column-18",
       "component": "Column",
       "data-section": "",
       "children": [
         "sidebar-9",
-        "column-20"
+        "column-19"
       ]
     },
     {
@@ -711,7 +702,7 @@
       "component": "Section",
       "children": [
         "text-22",
-        "column-19"
+        "column-18"
       ]
     },
     {
@@ -742,6 +733,8 @@
     {
       "id": "text-28",
       "component": "Text",
+      "color": "subtle",
+      "size": "sm",
       "textContent": "Permanently removes the workspace and all member access. Data is purged after 30 days."
     },
     {
@@ -772,11 +765,11 @@
       "id": "section-9",
       "component": "Section",
       "children": [
-        "column-22"
+        "column-21"
       ]
     },
     {
-      "id": "column-22",
+      "id": "column-21",
       "component": "Column",
       "children": [
         "stat"
@@ -800,11 +793,11 @@
       "id": "section-10",
       "component": "Section",
       "children": [
-        "column-23"
+        "column-22"
       ]
     },
     {
-      "id": "column-23",
+      "id": "column-22",
       "component": "Column",
       "children": [
         "stat-2"
@@ -828,11 +821,11 @@
       "id": "section-11",
       "component": "Section",
       "children": [
-        "column-24"
+        "column-23"
       ]
     },
     {
-      "id": "column-24",
+      "id": "column-23",
       "component": "Column",
       "children": [
         "stat-3"
@@ -856,11 +849,11 @@
       "id": "section-12",
       "component": "Section",
       "children": [
-        "column-25"
+        "column-24"
       ]
     },
     {
-      "id": "column-25",
+      "id": "column-24",
       "component": "Column",
       "children": [
         "stat-4"
@@ -913,7 +906,7 @@
       "variant": "outline"
     },
     {
-      "id": "column-26",
+      "id": "column-25",
       "component": "Column",
       "gap": "2",
       "children": [
@@ -947,29 +940,21 @@
     },
     {
       "id": "check-box-6",
-      "component": "CheckBox"
-    },
-    {
-      "id": "field-8",
-      "component": "Field",
-      "inline": true,
-      "label": "I understand this deletes all members, data, and integrations",
-      "children": [
-        "check-box-6"
-      ]
+      "component": "CheckBox",
+      "label": "I understand this deletes all members, data, and integrations"
     },
     {
-      "id": "column-27",
+      "id": "column-26",
       "component": "Column",
       "gap": "3",
       "children": [
         "text-30",
         "field-7",
-        "field-8"
+        "check-box-6"
       ]
     },
     {
-      "id": "column-21",
+      "id": "column-20",
       "component": "Column",
       "gap": "4",
       "children": [
@@ -977,16 +962,16 @@
         "divider-6",
         "grid-2",
         "divider-7",
-        "column-26",
+        "column-25",
         "divider-8",
-        "column-27"
+        "column-26"
       ]
     },
     {
       "id": "section-8",
       "component": "Section",
       "children": [
-        "column-21"
+        "column-20"
       ]
     },
     {
@@ -1039,7 +1024,7 @@
       ]
     },
     {
-      "id": "column-28",
+      "id": "column-27",
       "component": "Column",
       "children": [
         "section",
@@ -1060,7 +1045,7 @@
       "id": "section-13",
       "component": "Section",
       "children": [
-        "column-28"
+        "column-27"
       ]
     },
     {

package/chunks/settings-appearance.json

@@ -1,28 +1,13 @@
 {
   "name": "settings-appearance",
   "kind": "block",
-  "primary": "div",
-  "instances": [
-    {
-      "page": "/apps/saas/app/settings-page/settings-page.contents.html",
-      "source": "apps/saas/app/settings-page/settings-page.contents.html",
-      "slots": [],
-      "nested": [],
-      "attrs": {
-        "data-section": ""
-      },
-      "html": "<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>"
-    },
-    {
-      "page": "/catalog/ui-patterns/app/settings-appearance/settings-appearance.contents.html",
-      "source": "catalog/ui-patterns/app/settings-appearance/settings-appearance.contents.html",
-      "slots": [],
-      "nested": [],
-      "attrs": {},
-      "html": "<card-ui>\n  <header>\n    <h3>Appearance</h3>\n    <text-ui slot=\"description\" color=\"subtle\">Theme, density, radius, and color scheme</text-ui>\n  </header>\n  <section>\n    <theme-panel persist parametric presets scheme-toggle></theme-panel>\n  </section>\n</card-ui>"
-    }
-  ],
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "primary": "card-ui",
+  "page": "/catalog/ui-patterns/app/settings-appearance/settings-appearance.contents.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {},
+  "html": "<card-ui>\n  <header>\n    <h3>Appearance</h3>\n    <text-ui slot=\"description\" color=\"subtle\">Theme, density, radius, and color scheme</text-ui>\n  </header>\n  <section>\n    <theme-panel persist parametric presets scheme-toggle></theme-panel>\n  </section>\n</card-ui>",
+  "source": "catalog/ui-patterns/app/settings-appearance/settings-appearance.contents.html",
   "metadata": {
     "domain": "settings",
     "description": "Appearance settings section — theme picker, density + radius sliders, color-scheme toggle.",
@@ -37,5 +22,58 @@
       "preferences",
       "ui-controls"
     ]
-  }
+  },
+  "captured_at": "2026-05-21T19:10:53.888Z",
+  "template": [
+    {
+      "id": "text",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "Appearance"
+    },
+    {
+      "id": "text-2",
+      "component": "Text",
+      "color": "subtle",
+      "textContent": "Theme, density, radius, and color scheme"
+    },
+    {
+      "id": "header",
+      "component": "Header",
+      "children": [
+        "text",
+        "text-2"
+      ]
+    },
+    {
+      "id": "theme-panel",
+      "component": "ThemePanel",
+      "parametric": true,
+      "persist": true,
+      "presets": true,
+      "scheme-toggle": true
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "children": [
+        "theme-panel"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "header",
+        "section"
+      ]
+    }
+  ]
 }

package/chunks/settings-billing-plan.json

@@ -10,5 +10,5 @@
   },
   "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>",
   "source": "apps/saas/app/billing/billing.contents.html",
-  "captured_at": "2026-05-17T23:13:46.088Z"
+  "captured_at": "2026-05-21T19:10:53.888Z"
 }

package/chunks/settings-general-form.json

@@ -25,7 +25,7 @@
       "identity"
     ]
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "input",

package/chunks/settings-integrations.json

@@ -32,7 +32,7 @@
       "layout": "grid"
     }
   },
-  "captured_at": "2026-05-17T23:13:46.088Z",
+  "captured_at": "2026-05-21T19:10:53.888Z",
   "template": [
     {
       "id": "text",