@adia-ai/a2ui-corpus 0.0.2 → 0.0.3

package/chunks/filter-bar-filter-bar-with-table.json

@@ -0,0 +1,15 @@
+{
+  "name": "filter-bar-filter-bar-with-table",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/filter-bar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "filter-bar-with-table"
+  },
+  "html": "<section data-section data-property=\"filter-bar-with-table\" data-chunk=\"filter-bar-filter-bar-with-table\">\n  <h2 variant=\"section\">Filter bar + table</h2>\n  <p data-note>The common composition: filters sit above the table inside one card surface so they read as modifying the same data.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"filter bar with table\">\n      <card-ui>\n        <section bleed>\n          <toolbar-ui>\n            <row-ui gap=\"2\" align=\"center\" grow>\n              <tag-ui text=\"Status: Active\" removable></tag-ui>\n              <tag-ui text=\"Owner: Alex\" removable></tag-ui>\n              <button-ui text=\"+ Add filter\" variant=\"ghost\" size=\"sm\"></button-ui>\n            </row-ui>\n            <search-ui placeholder=\"Search…\" size=\"sm\"></search-ui>\n          </toolbar-ui>\n          <table-ui id=\"pat-filter-table\" sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/filter-bar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/filter-bar-saved-views.json

@@ -0,0 +1,15 @@
+{
+  "name": "filter-bar-saved-views",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/filter-bar",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "saved-views"
+  },
+  "html": "<section data-section data-property=\"saved-views\" data-chunk=\"filter-bar-saved-views\">\n  <h2 variant=\"section\">Saved views</h2>\n  <p data-note>Named combinations of filters. Segmented control replaces the active-filter chips while a view is applied.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"saved views\">\n      <card-ui>\n        <section>\n          <row-ui align=\"center\" gap=\"3\" wrap>\n            <segmented-ui value=\"my-open\">\n              <segment-ui value=\"all\" text=\"All\"></segment-ui>\n              <segment-ui value=\"my-open\" text=\"My open\"></segment-ui>\n              <segment-ui value=\"team\" text=\"Team\"></segment-ui>\n              <segment-ui value=\"archived\" text=\"Archived\"></segment-ui>\n            </segmented-ui>\n            <span data-spacer></span>\n            <button-ui text=\"Save view\" icon=\"bookmark\" variant=\"ghost\" size=\"sm\"></button-ui>\n          </row-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/filter-bar/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/form-drawer-edit-form.json

@@ -0,0 +1,15 @@
+{
+  "name": "form-drawer-edit-form",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/form-drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "edit-form"
+  },
+  "html": "<section data-section data-property=\"edit-form\" data-chunk=\"form-drawer-edit-form\">\n  <h2 variant=\"section\">Edit form with destructive action</h2>\n  <p data-note>Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"edit form\">\n      <button-ui text=\"Edit project\" icon=\"pencil\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Edit project\" side=\"right\" size=\"md\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Name\">\n              <input-ui value=\"Q4 roadmap\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui rows=\"3\">Quarterly planning doc</textarea-ui>\n            </field-ui>\n            <field-ui label=\"Status\">\n              <select-ui>\n              <option value=\"active\" selected>Active</option>\n              <option value=\"archived\">Archived</option>\n            </select-ui>\n            </field-ui>\n            <field-ui label=\"Notify team members\" inline>\n              <switch-ui checked></switch-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action-leading\">\n            <button-ui text=\"Delete\" icon=\"trash\" color=\"danger\"></button-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/form-drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/form-drawer-simple-form.json

@@ -0,0 +1,15 @@
+{
+  "name": "form-drawer-simple-form",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/form-drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "simple-form"
+  },
+  "html": "<section data-section data-property=\"simple-form\" data-chunk=\"form-drawer-simple-form\">\n  <h2 variant=\"section\">Simple create form</h2>\n  <p data-note>3–5 fields with primary + cancel actions. The default shape for \"+ New X\" triggers.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"create form\">\n      <button-ui text=\"+ New project\" variant=\"primary\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"New project\" side=\"right\" size=\"md\">\n        <section slot=\"body\">\n          <col-ui gap=\"3\">\n            <field-ui label=\"Name\">\n              <input-ui placeholder=\"My awesome project\" required></input-ui>\n            </field-ui>\n            <field-ui label=\"Description\">\n              <textarea-ui placeholder=\"What is this project for?\" rows=\"3\"></textarea-ui>\n            </field-ui>\n            <field-ui label=\"Visibility\">\n              <select-ui placeholder=\"Select visibility\">\n              <option value=\"public\">Public</option>\n              <option value=\"team\">Team only</option>\n              <option value=\"private\">Private</option>\n            </select-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Create\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/form-drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/form-drawer-tall-form.json

@@ -0,0 +1,15 @@
+{
+  "name": "form-drawer-tall-form",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/form-drawer",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "tall-form"
+  },
+  "html": "<section data-section data-property=\"tall-form\" data-chunk=\"form-drawer-tall-form\">\n  <h2 variant=\"section\">Long form — scroll body, sticky footer</h2>\n  <p data-note>The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find \"Save\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"long form\">\n      <button-ui text=\"Advanced settings\" icon=\"gear\" variant=\"outline\" onclick=\"this.nextElementSibling.open=true\"></button-ui>\n      <drawer-ui text=\"Advanced settings\" side=\"right\" size=\"lg\">\n        <section slot=\"body\">\n          <col-ui gap=\"4\">\n            <col-ui gap=\"3\">\n              <h4>General</h4>\n              <field-ui label=\"Name\">\n                <input-ui value=\"Production API\"></input-ui>\n              </field-ui>\n              <field-ui label=\"Slug\">\n                <input-ui prefix=\"/\" value=\"production-api\"></input-ui>\n              </field-ui>\n              <field-ui label=\"Description\">\n                <textarea-ui rows=\"2\"></textarea-ui>\n              </field-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Limits</h4>\n              <range-ui label=\"Max concurrent requests\" value=\"100\" min=\"10\" max=\"1000\"></range-ui>\n              <range-ui label=\"Timeout (seconds)\" value=\"30\" min=\"5\" max=\"300\"></range-ui>\n              <range-ui label=\"Retry attempts\" value=\"3\" min=\"0\" max=\"10\"></range-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Access</h4>\n              <field-ui label=\"Require authentication\" inline>\n                <switch-ui checked></switch-ui>\n              </field-ui>\n              <field-ui label=\"Allow CORS\" inline>\n                <switch-ui checked></switch-ui>\n              </field-ui>\n              <field-ui label=\"Rate limit by IP\" inline>\n                <switch-ui></switch-ui>\n              </field-ui>\n              <field-ui label=\"Log all requests\" inline>\n                <switch-ui></switch-ui>\n              </field-ui>\n            </col-ui>\n            <col-ui gap=\"3\">\n              <h4>Notifications</h4>\n              <field-ui label=\"Email on errors\" inline>\n                <check-ui checked></check-ui>\n              </field-ui>\n              <field-ui label=\"Slack on deploys\" inline>\n                <check-ui></check-ui>\n              </field-ui>\n              <field-ui label=\"PagerDuty on outages\" inline>\n                <check-ui></check-ui>\n              </field-ui>\n            </col-ui>\n          </col-ui>\n        </section>\n        <footer slot=\"footer\">\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n            <button-ui text=\"Save settings\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open=false\"></button-ui>\n          </span>\n        </footer>\n      </drawer-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/form-drawer/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/genui-feed-message.json

@@ -0,0 +1,14 @@
+{
+  "name": "genui-feed-message",
+  "kind": "block",
+  "primary": "col-ui",
+  "page": "/site/examples/gen-ui-feed",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "gap": "8"
+  },
+  "html": "<col-ui gap=\"8\" id=\"gen-feed\" data-chunk=\"genui-feed-message\">\n\n  <!-- ═══════════ USER TURN 1 ═══════════ -->\n  <article>\n    <row-ui gap=\"2\" align=\"center\">\n      <avatar-ui text=\"Jane Smith\" size=\"sm\"></avatar-ui>\n      <text-ui strong>Jane</text-ui>\n      <text-ui color=\"subtle\">·</text-ui>\n      <text-ui color=\"subtle\">2 min ago</text-ui>\n    </row-ui>\n    <p>Pull our Q4 revenue breakdown — I need to see the trend, the outliers, where the data came from, and a follow-up meeting on the calendar.</p>\n  </article>\n\n  <!-- ═══════════ ASSISTANT TURN 1 ═══════════ -->\n  <article>\n    <row-ui gap=\"2\" align=\"center\">\n      <icon-ui name=\"sparkle\" color=\"accent\"></icon-ui>\n      <text-ui strong>Assistant</text-ui>\n      <text-ui color=\"subtle\">·</text-ui>\n      <text-ui color=\"subtle\">now</text-ui>\n    </row-ui>\n\n    <col-ui gap=\"4\">\n\n      <!-- (5) Alert — info banner -->\n      <alert-ui\n        variant=\"info\"\n        icon=\"info\"\n        text=\"Pulled from the finance warehouse as of today 09:12 UTC. Figures are unaudited.\"\n      ></alert-ui>\n\n      <!-- (1) Reasoning trace -->\n      <agent-reasoning-ui\n        id=\"reasoning-1\"\n        heading=\"Analyzing the request\"\n        collapsed\n        no-autocollapse\n      ></agent-reasoning-ui>\n\n      <!-- (6) Pipeline status -->\n      <pipeline-status-ui stage=\"parsing\"   status=\"completed\" message=\"Parsing intent\"></pipeline-status-ui>\n      <pipeline-status-ui stage=\"retrieval\" status=\"completed\" message=\"Retrieving data\"></pipeline-status-ui>\n      <pipeline-status-ui stage=\"rendering\"          message=\"Rendering\"></pipeline-status-ui>\n\n      <!-- (2) Tool call — accordion with status header + json body -->\n      <accordion-ui>\n        <accordion-item-ui>\n          <span slot=\"trigger\">\n            <row-ui gap=\"2\" align=\"center\">\n              <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n              <text-ui strong>get_revenue</text-ui>\n              <text-ui color=\"subtle\">returned 4 rows · 340ms</text-ui>\n              <badge-ui text=\"DONE\" variant=\"success\"></badge-ui>\n            </row-ui>\n          </span>\n          <code-ui language=\"json\" text='{\n  \"from\":  \"2025-01-01\",\n  \"to\":    \"2025-12-31\",\n  \"group\": \"quarter\"\n}'></code-ui>\n        </accordion-item-ui>\n      </accordion-ui>\n\n      <!-- (4) Metrics trace -->\n      <agent-trace-ui id=\"trace-1\"></agent-trace-ui>\n\n      <!-- (7) KPI stat grid -->\n      <grid-ui columns=\"4\" gap=\"4\">\n        <card-ui size=\"sm\"><section><stat-ui label=\"Q4 Revenue\"   value=\"$2.45M\" change=\"+23%\"  trend=\"up\"   icon=\"currency-dollar\"></stat-ui></section></card-ui>\n        <card-ui size=\"sm\"><section><stat-ui label=\"Net New ARR\"  value=\"$580K\"  change=\"+41%\"  trend=\"up\"   icon=\"chart-line-up\"></stat-ui></section></card-ui>\n        <card-ui size=\"sm\"><section><stat-ui label=\"Gross Margin\" value=\"78.2%\"  change=\"+1.4%\" trend=\"up\"   icon=\"percent\"></stat-ui></section></card-ui>\n        <card-ui size=\"sm\"><section><stat-ui label=\"Churn\"        value=\"3.1%\"   change=\"-0.6%\" trend=\"down\" icon=\"trend-down\"></stat-ui></section></card-ui>\n      </grid-ui>\n\n      <!-- (8) Chart card -->\n      <card-ui>\n        <header>\n          <h3>Revenue by quarter</h3>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">4-quarter rolling trend, all regions</text-ui>\n        </header>\n        <section>\n          <chart-ui id=\"chart-rev\" type=\"bar\" x=\"label\" y=\"value\"></chart-ui>\n        </section>\n      </card-ui>\n\n      <!-- (10) Heatmap -->\n      <card-ui>\n        <header>\n          <h3>Deal closes · last 90 days</h3>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Each cell = one weekday</text-ui>\n        </header>\n        <section>\n          <heatmap-ui id=\"hm-closes\" type=\"day-grid\" rows=\"7\" cols=\"13\" start-date=\"2025-10-20\"></heatmap-ui>\n        </section>\n      </card-ui>\n\n      <!-- (9) Data table -->\n      <card-ui>\n        <header>\n          <h3>Top accounts this quarter</h3>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">Sorted by revenue · click to drill</text-ui>\n        </header>\n        <section bleed>\n          <table-ui id=\"top-accounts\" paginate=\"5\"></table-ui>\n        </section>\n      </card-ui>\n\n      <!-- (11) Description list -->\n      <card-ui>\n        <header>\n          <h3>Query parameters</h3>\n        </header>\n        <section>\n          <description-list-ui layout=\"stacked\">\n            <dt>Period</dt><dd>2025-01-01 → 2025-12-31</dd>\n            <dt>Currency</dt><dd>USD, converted at month-end FX</dd>\n            <dt>Source</dt><dd>warehouse.finance.revenue_v4</dd>\n            <dt>Filter</dt><dd>status = \"won\", excluded internal test accounts</dd>\n            <dt>Refreshed</dt><dd>2026-04-20 09:12 UTC</dd>\n          </description-list-ui>\n        </section>\n      </card-ui>\n\n      <!-- (14) Code block — the SQL behind the answer -->\n      <code-ui\n        language=\"sql\"\n        text='SELECT\n  date_trunc(quarter, closed_at)  AS quarter,\n  sum(amount_usd)                 AS revenue,\n  count(distinct account_id)      AS accounts\nFROM warehouse.finance.revenue_v4\nWHERE status = \"won\"\n  AND closed_at BETWEEN \"2025-01-01\" AND \"2025-12-31\"\nGROUP BY 1\nORDER BY 1;'\n      ></code-ui>\n\n      <!-- (12) Citations row — chips of sources -->\n      <row-ui gap=\"2\" wrap>\n        <tag-ui text=\"¹ warehouse.revenue_v4\"></tag-ui>\n        <tag-ui text=\"² salesforce.opportunity\"></tag-ui>\n        <tag-ui text=\"³ board-prep.notion.so\"></tag-ui>\n        <tag-ui text=\"⁴ q4-cohort-analysis\"></tag-ui>\n      </row-ui>\n\n      <!-- (18) Follow-up suggestions -->\n      <agent-suggestions-ui id=\"sug-1\"></agent-suggestions-ui>\n\n    </col-ui>\n  </article>\n\n  <!-- ═══════════ USER TURN 2 ═══════════ -->\n  <article>\n    <row-ui gap=\"2\" align=\"center\">\n      <avatar-ui text=\"Jane Smith\" size=\"sm\"></avatar-ui>\n      <text-ui strong>Jane</text-ui>\n      <text-ui color=\"subtle\">·</text-ui>\n      <text-ui color=\"subtle\">just now</text-ui>\n    </row-ui>\n    <p>Great — drop the regional photos in too, plus a link to last quarter's prep notes, the field-visit map, and a draft for the board email. Then schedule the review meeting.</p>\n  </article>\n\n  <!-- ═══════════ ASSISTANT TURN 2 ═══════════ -->\n  <article>\n    <row-ui gap=\"2\" align=\"center\">\n      <icon-ui name=\"sparkle\" color=\"accent\"></icon-ui>\n      <text-ui strong>Assistant</text-ui>\n      <text-ui color=\"subtle\">·</text-ui>\n      <text-ui color=\"subtle\">now</text-ui>\n    </row-ui>\n\n    <col-ui gap=\"4\">\n\n      <!-- (15) Image grid -->\n      <grid-ui columns=\"3\" gap=\"3\">\n        <image-ui src=\"https://picsum.photos/seed/rev-1/480/320\" alt=\"Quarterly chart export\" radius=\"md\" style=\"aspect-ratio:3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-2/480/320\" alt=\"Top account visualization\" radius=\"md\" style=\"aspect-ratio:3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-3/480/320\" alt=\"Regional breakdown\" radius=\"md\" style=\"aspect-ratio:3/2\"></image-ui>\n      </grid-ui>\n\n      <!-- (13) Link preview — card with media slot -->\n      <card-ui>\n        <image-ui slot=\"media\" src=\"https://picsum.photos/seed/q4-prep/960/360\" alt=\"\" style=\"aspect-ratio:8/3\"></image-ui>\n        <header>\n          <h3>Q4 Board Prep — Revenue & Outlook Draft</h3>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">confluence.internal · 6 min read</text-ui>\n        </header>\n        <section>\n          <text-ui>Sarah Chen's shared draft covers ARR trajectory, cohort retention, and the segmentation the board will want to see.</text-ui>\n        </section>\n      </card-ui>\n\n      <!-- (16) Map + list -->\n      <grid-ui columns=\"5\" gap=\"4\">\n        <image-ui span=\"3\" src=\"https://picsum.photos/seed/map-q4/640/480\" alt=\"Map of field-visit locations\" radius=\"md\" style=\"aspect-ratio:4/3\"></image-ui>\n        <card-ui span=\"2\">\n          <header>\n            <h3>Field visits · Q4</h3>\n          </header>\n          <section>\n            <list-ui divider>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>San Francisco</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Acme Corp · Globex · 3 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>New York</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Stark Industries · 2 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>London</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Umbrella Corp</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>Berlin</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Wayne Enterprises</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n            </list-ui>\n          </section>\n        </card-ui>\n      </grid-ui>\n\n      <!-- (3) Artifact stub — promoted to canvas -->\n      <card-ui>\n        <section>\n          <row-ui gap=\"3\" align=\"center\">\n            <icon-ui name=\"file-code\" color=\"accent\"></icon-ui>\n            <col-ui gap=\"0\" grow>\n              <text-ui strong>q4-board-deck.a2ui</text-ui>\n              <text-ui color=\"subtle\" size=\"sm\">A2UI · 42 lines · interactive</text-ui>\n            </col-ui>\n            <button-ui text=\"Open in canvas\" icon=\"arrows-out-simple\" variant=\"outline\" size=\"sm\"></button-ui>\n          </row-ui>\n        </section>\n      </card-ui>\n\n      <!-- (3b) Artifact — inline expanded -->\n      <agent-artifact-ui title=\"q4-followup.js\" kind=\"code\" icon=\"file-code\" tone=\"accent\">\n        <button-ui slot=\"secondary\" text=\"Copy\" icon=\"copy\" variant=\"ghost\" size=\"sm\"></button-ui>\n        <code-ui language=\"js\" text='// Email draft — send after the sync\nexport const message = {\n  to:      [\"board@acme.io\"],\n  subject: \"Q4 revenue & outlook — pre-read\",\n  body: `\n    Q4 came in at $2.45M (+23% QoQ).\n    Top 10 accounts contributed 62% of net-new ARR.\n    Detailed breakdown in the attached doc.\n    - Sarah\n  `.trim(),\n};'></code-ui>\n      </agent-artifact-ui>\n\n      <!-- (17) Form — schedule a review meeting -->\n      <card-ui>\n        <header>\n          <h3>Schedule review meeting</h3>\n          <text-ui slot=\"description\" color=\"subtle\" size=\"sm\">I'll send the invite once you confirm</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <field-ui label=\"Title\">\n              <input-ui value=\"Q4 revenue review · board prep\"></input-ui>\n            </field-ui>\n            <row-ui gap=\"3\">\n              <field-ui label=\"Date\">\n                <calendar-picker-ui value=\"2026-04-24\" grow></calendar-picker-ui>\n              </field-ui>\n              <field-ui label=\"Time\">\n                <select-ui grow>\n                <option value=\"09:00\">9:00 AM</option>\n                <option value=\"10:00\">10:00 AM</option>\n                <option value=\"14:00\" selected>2:00 PM</option>\n                <option value=\"16:00\">4:00 PM</option>\n              </select-ui>\n              </field-ui>\n            </row-ui>\n            <field-ui label=\"Attendees\">\n              <input-ui value=\"sarah@acme.io, alex@acme.io, board@acme.io\"></input-ui>\n            </field-ui>\n            <field-ui label=\"Attach Q4 revenue deck\" inline>\n              <check-ui checked></check-ui>\n            </field-ui>\n          </col-ui>\n        </section>\n        <footer divider>\n          <small slot=\"description\">Invite sends immediately after confirm.</small>\n          <span slot=\"action\">\n            <button-ui text=\"Cancel\" variant=\"ghost\"></button-ui>\n            <button-ui text=\"Send invite\" variant=\"primary\" icon=\"paper-plane-tilt\"></button-ui>\n          </span>\n        </footer>\n      </card-ui>\n\n      <!-- (18) Follow-up suggestions -->\n      <agent-suggestions-ui id=\"sug-2\"></agent-suggestions-ui>\n\n    </col-ui>\n  </article>\n\n</col-ui>",
+  "source": "site/pages/examples/gen-ui-feed/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/heatmap-data-stream.json

@@ -0,0 +1,15 @@
+{
+  "name": "heatmap-data-stream",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/heatmap",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "data-stream"
+  },
+  "html": "<section data-section data-property=\"data-stream\" data-chunk=\"heatmap-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Heatmap-ui inherits the universal <code>data-stream-*</code> trait\n    — no per-component opt-in. Set <code>data-stream-src</code> and\n    cells populate from the response. The mock at\n    <code>/site/mock/activity.json</code> is a flat array of\n    <code>{r, c, v, label}</code> rows; for SSE/WS streaming, set\n    <code>data-stream-mode=\"sse\"</code> and\n    <code>data-stream-merge=\"append\"</code> to add cells as events\n    arrive. See the chart-ui demo's full attribute table for the\n    options surface.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='heatmap-ui[data-stream-src=\"/site/mock/activity.json\"]' style=\"flex:1 1 100%;\">\n      <heatmap-ui type=\"matrix\" rows=\"5\" cols=\"4\"\n                  color-scheme=\"accent\"\n                  aria-label=\"Commit activity from activity.json\"\n                  data-stream-src=\"/site/mock/activity.json\"></heatmap-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/heatmap/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/heatmap-day-grid.json

@@ -0,0 +1,15 @@
+{
+  "name": "heatmap-day-grid",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/heatmap",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "day-grid"
+  },
+  "html": "<section data-section data-property=\"day-grid\" data-chunk=\"heatmap-day-grid\">\n  <h2 variant=\"section\">day-grid (GitHub contributions)</h2>\n  <p data-note>7 × 52 grid with month labels — populated via the <code>.data</code> property in setup.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"day-grid · 7 × 52\">\n      <heatmap-ui id=\"hm-days\" type=\"day-grid\" rows=\"7\" cols=\"52\" start-date=\"2025-01-01\" color-scheme=\"data-ramp\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/heatmap/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/heatmap-matrix.json

@@ -0,0 +1,15 @@
+{
+  "name": "heatmap-matrix",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/heatmap",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "matrix"
+  },
+  "html": "<section data-section data-property=\"matrix\" data-chunk=\"heatmap-matrix\">\n  <h2 variant=\"section\">matrix</h2>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"matrix · 7 × 12 · accent scheme\">\n      <heatmap-ui id=\"hm-matrix\" type=\"matrix\" rows=\"7\" cols=\"12\" color-scheme=\"accent\"></heatmap-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"density · 10 × 10 · square\">\n      <heatmap-ui id=\"hm-density\" type=\"density\" rows=\"10\" cols=\"10\" color-scheme=\"success\" aspect=\"square\"></heatmap-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/heatmap/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/icon-combinations.json

@@ -0,0 +1,15 @@
+{
+  "name": "icon-combinations",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/icon",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "combinations"
+  },
+  "html": "<section data-section data-property=\"combinations\" data-chunk=\"icon-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Icons at different sizes in a toolbar-like arrangement.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"toolbar sm\">\n      <div style=\"display:flex; gap:var(--a-space-3); align-items:center;\">\n        <icon-ui name=\"house\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"sm\"></icon-ui>\n        <icon-ui name=\"user\" size=\"sm\"></icon-ui>\n      </div>\n      </div>\n    <div data-artifact-item data-artifact-label=\"toolbar lg\">\n      <div style=\"display:flex; gap:var(--a-space-4); align-items:center;\">\n        <icon-ui name=\"house\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"magnifying-glass\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"bell\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"gear\" size=\"lg\"></icon-ui>\n        <icon-ui name=\"user\" size=\"lg\"></icon-ui>\n      </div>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/icon/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/icon-edge-cases.json

@@ -0,0 +1,15 @@
+{
+  "name": "icon-edge-cases",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/icon",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "edge-cases"
+  },
+  "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"icon-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"bare (no name)\">\n      <icon-ui></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"invalid name\">\n      <icon-ui name=\"nonexistent-icon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"label + size\">\n      <icon-ui name=\"check\" label=\"Confirmed\" size=\"lg\"></icon-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/icon/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/icon-label.json

@@ -0,0 +1,15 @@
+{
+  "name": "icon-label",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/icon",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "label"
+  },
+  "html": "<section data-section data-property=\"label\" data-chunk=\"icon-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>When a label is provided, the icon gets role=\"img\" and aria-label. Without a label, it is presentational (aria-hidden).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"labeled (accessible)\">\n      <icon-ui name=\"bell\" label=\"Notifications\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"decorative (hidden)\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/icon/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/icon-name.json

@@ -0,0 +1,15 @@
+{
+  "name": "icon-name",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/icon",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "name"
+  },
+  "html": "<section data-section data-property=\"name\" data-chunk=\"icon-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>The Phosphor icon name. Renders the corresponding SVG inline. Here are 20 common icons.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"gear\">\n      <icon-ui name=\"gear\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"user\">\n      <icon-ui name=\"user\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"house\">\n      <icon-ui name=\"house\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"magnifying-glass\">\n      <icon-ui name=\"magnifying-glass\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"bell\">\n      <icon-ui name=\"bell\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"chat-circle\">\n      <icon-ui name=\"chat-circle\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"envelope\">\n      <icon-ui name=\"envelope\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"heart\">\n      <icon-ui name=\"heart\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"star\">\n      <icon-ui name=\"star\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"check\">\n      <icon-ui name=\"check\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"x\">\n      <icon-ui name=\"x\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"plus\">\n      <icon-ui name=\"plus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"minus\">\n      <icon-ui name=\"minus\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"pencil\">\n      <icon-ui name=\"pencil\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"trash\">\n      <icon-ui name=\"trash\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"eye\">\n      <icon-ui name=\"eye\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lock\">\n      <icon-ui name=\"lock\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"moon\">\n      <icon-ui name=\"moon\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"sun\">\n      <icon-ui name=\"sun\"></icon-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"arrow-right\">\n      <icon-ui name=\"arrow-right\"></icon-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/icon/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/icon-size.json

@@ -0,0 +1,15 @@
+{
+  "name": "icon-size",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/icon",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "size"
+  },
+  "html": "<section data-section data-property=\"size\" data-chunk=\"icon-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Named scale (<code>xs</code> 12px / <code>sm</code> 14px / <code>md</code> 16px / <code>lg</code> 20px / <code>xl</code> 32px / <code>2xl</code> 48px / <code>3xl</code> 64px / <code>4xl</code> 96px), <code>fill</code> for matching the parent box, or any free-form pixel / rem / em value (<code>\"48\"</code>, <code>\"3rem\"</code>). Overrides the inherited <code>--a-icon-size</code> from the universal <code>[size]</code> system on ancestors.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"xs\">\n      <icon-ui name=\"star\" size=\"xs\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <icon-ui name=\"star\" size=\"sm\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <icon-ui name=\"star\" size=\"md\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <icon-ui name=\"star\" size=\"lg\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"xl\">\n      <icon-ui name=\"star\" size=\"xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"2xl\">\n      <icon-ui name=\"star\" size=\"2xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"3xl\">\n      <icon-ui name=\"star\" size=\"3xl\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"4xl\">\n      <icon-ui name=\"star\" size=\"4xl\"></icon-ui>\n    </div>\n  </div>\n  <p data-note>Free-form values bypass the named scale — useful when you need a specific pixel target.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='size=\"40\"'>\n      <icon-ui name=\"heart\" size=\"40\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"3.5rem\"'>\n      <icon-ui name=\"heart\" size=\"3.5rem\"></icon-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='size=\"80\"'>\n      <icon-ui name=\"heart\" size=\"80\"></icon-ui>\n    </div>\n  </div>\n  <p data-note><code>size=\"fill\"</code> matches the parent box — for hero placeholder slots, app-icon tiles, QR-code stand-ins, etc. The icon scales with its container.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"fill (in 96×96 box)\">\n      <div style=\"width: 96px; height: 96px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"qr-code\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label=\"fill (in 160×160 box)\">\n      <div style=\"width: 160px; height: 160px; padding: var(--a-space-4); border: 1px dashed var(--a-border-subtle); border-radius: var(--a-radius-md); display: grid; place-items: center;\">\n        <icon-ui name=\"device-mobile\" size=\"fill\"></icon-ui>\n      </div>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/icon/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-alt.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-alt",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "alt"
+  },
+  "html": "<section data-section data-property=\"alt\" data-chunk=\"image-alt\">\n  <h2 variant=\"section\">alt</h2>\n  <p data-note>Alt text for accessibility. Announced by screen readers; displayed if the image fails to render.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='alt=\"Mountain range at sunset\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-mountain/200/150\" alt=\"Mountain range at sunset\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='alt=\"Calm ocean waves\"'>\n      <image-ui src=\"https://picsum.photos/seed/alt-ocean/200/150\" alt=\"Calm ocean waves\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-default.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-default",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "default"
+  },
+  "html": "<section data-section data-property=\"default\" data-chunk=\"image-default\">\n  <h2 variant=\"section\">Default</h2>\n  <p data-note>Basic image with src and alt.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <image-ui src=\"https://picsum.photos/seed/img-demo/300/200\" alt=\"Sample landscape\" width=\"300\" height=\"200\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-fallback.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-fallback",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "fallback"
+  },
+  "html": "<section data-section data-property=\"fallback\" data-chunk=\"image-fallback\">\n  <h2 variant=\"section\">Fallback</h2>\n  <p data-note>Broken src falls back to the fallback URL, or shows skeleton if no fallback.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"broken src (skeleton)\">\n      <image-ui src=\"https://broken.invalid/nope.jpg\" alt=\"Broken image\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"no src (skeleton)\">\n      <image-ui width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-fit.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-fit",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "fit"
+  },
+  "html": "<section data-section data-property=\"fit\" data-chunk=\"image-fit\">\n  <h2 variant=\"section\">fit</h2>\n  <p data-note>Controls object-fit mode. Defaults to \"cover\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"cover\">\n      <image-ui src=\"https://picsum.photos/seed/fit-cover/400/200\" alt=\"Cover\" width=\"200\" height=\"200\" fit=\"cover\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"contain\">\n      <image-ui src=\"https://picsum.photos/seed/fit-contain/400/200\" alt=\"Contain\" width=\"200\" height=\"200\" fit=\"contain\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"fill\">\n      <image-ui src=\"https://picsum.photos/seed/fit-fill/400/200\" alt=\"Fill\" width=\"200\" height=\"200\" fit=\"fill\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"none\">\n      <image-ui src=\"https://picsum.photos/seed/fit-none/400/200\" alt=\"None\" width=\"200\" height=\"200\" fit=\"none\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-height.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-height",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "height"
+  },
+  "html": "<section data-section data-property=\"height\" data-chunk=\"image-height\">\n  <h2 variant=\"section\">height</h2>\n  <p data-note>CSS height applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='height=\"80\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-80/200/200\" alt=\"80px tall\" width=\"200\" height=\"80\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"150\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-150/200/200\" alt=\"150px tall\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='height=\"240\"'>\n      <image-ui src=\"https://picsum.photos/seed/h-240/200/400\" alt=\"240px tall\" width=\"200\" height=\"240\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-radius.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-radius",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "radius"
+  },
+  "html": "<section data-section data-property=\"radius\" data-chunk=\"image-radius\">\n  <h2 variant=\"section\">radius</h2>\n  <p data-note>Controls border radius.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\">\n      <image-ui src=\"https://picsum.photos/seed/r-sm/150/150\" alt=\"Small radius\" width=\"150\" height=\"150\" radius=\"sm\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"md\">\n      <image-ui src=\"https://picsum.photos/seed/r-md/150/150\" alt=\"Medium radius\" width=\"150\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"lg\">\n      <image-ui src=\"https://picsum.photos/seed/r-lg/150/150\" alt=\"Large radius\" width=\"150\" height=\"150\" radius=\"lg\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"full\">\n      <image-ui src=\"https://picsum.photos/seed/r-full/150/150\" alt=\"Full radius\" width=\"150\" height=\"150\" radius=\"full\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-src.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-src",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "src"
+  },
+  "html": "<section data-section data-property=\"src\" data-chunk=\"image-src\">\n  <h2 variant=\"section\">src</h2>\n  <p data-note>Image URL. Skeleton is shown while loading.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"src A\">\n      <image-ui src=\"https://picsum.photos/seed/src-a/200/150\" alt=\"Source A\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"src B\">\n      <image-ui src=\"https://picsum.photos/seed/src-b/200/150\" alt=\"Source B\" width=\"200\" height=\"150\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/image-width.json

@@ -0,0 +1,15 @@
+{
+  "name": "image-width",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/image",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "width"
+  },
+  "html": "<section data-section data-property=\"width\" data-chunk=\"image-width\">\n  <h2 variant=\"section\">width</h2>\n  <p data-note>CSS width applied to the host element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='width=\"100\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-100/200/100\" alt=\"100px wide\" width=\"100\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"200\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-200/200/100\" alt=\"200px wide\" width=\"200\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='width=\"300\"'>\n      <image-ui src=\"https://picsum.photos/seed/w-300/400/100\" alt=\"300px wide\" width=\"300\" height=\"100\" radius=\"md\"></image-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/image/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-combinations.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-combinations",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "combinations"
+  },
+  "html": "<section data-section data-property=\"combinations\" data-chunk=\"input-combinations\">\n  <h2 variant=\"section\">Combinations</h2>\n  <p data-note>Common pairings in real-world forms.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Website URL\">\n    <field-ui label=\"Website URL\">\n      <input-ui prefix=\"https://\" placeholder=\"example.com\" required></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Currency\">\n    <field-ui label=\"Currency\">\n      <input-ui prefix=\"$\" suffix=\"USD\" placeholder=\"0.00\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Locked Account\">\n    <field-ui label=\"Locked Account\">\n      <input-ui prefix=\"@\" value=\"admin\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"API Endpoint\">\n    <field-ui label=\"API Endpoint\">\n      <input-ui prefix=\"/\" suffix=\".json\" value=\"users\" readonly></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-disabled.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-disabled",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "disabled"
+  },
+  "html": "<section data-section data-property=\"disabled\" data-chunk=\"input-disabled\">\n  <h2 variant=\"section\">disabled</h2>\n  <p data-note>Prevents interaction. The field appears muted.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Disabled\">\n    <field-ui label=\"Disabled\">\n      <input-ui value=\"Cannot edit this\" disabled></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Disabled Empty\">\n    <field-ui label=\"Disabled Empty\">\n      <input-ui placeholder=\"No input allowed\" disabled></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-edge-cases.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-edge-cases",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "edge-cases"
+  },
+  "html": "<section data-section data-property=\"edge-cases\" data-chunk=\"input-edge-cases\">\n  <h2 variant=\"section\">Edge Cases</h2>\n  <p data-note>Boundary conditions and unusual content.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"input\">\n    <input-ui></input-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Long Label That Should Wrap Properly\">\n    <field-ui label=\"Long Label That Should Wrap Properly\">\n      <input-ui placeholder=\"Placeholder text that is also quite long and may overflow the field area\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Preloaded\">\n    <field-ui label=\"Preloaded\">\n      <input-ui value=\"Hello World\" prefix=\"$\" suffix=\"USD\"></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-error.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-error",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "error"
+  },
+  "html": "<section data-section data-property=\"error\" data-chunk=\"input-error\">\n  <h2 variant=\"section\">error</h2>\n  <p data-note>Shows a validation error message below the field with error styling.</p>\n  <div data-artifact-container>\n  <div data-artifact-item data-artifact-label=\"Email\">\n    <field-ui label=\"Email\">\n      <input-ui placeholder=\"you@example.com\" error=\"Please enter a valid email address\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Username\">\n    <field-ui label=\"Username\">\n      <input-ui value=\"ab\" error=\"Must be at least 3 characters\"></input-ui>\n    </field-ui>\n  </div>\n  <div data-artifact-item data-artifact-label=\"Password\">\n    <field-ui label=\"Password\">\n      <input-ui placeholder=\"Enter password\" error=\"Password is required\" required></input-ui>\n    </field-ui>\n  </div>\n</div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-label.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-label",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "label"
+  },
+  "html": "<section data-section data-property=\"label\" data-chunk=\"input-label\">\n  <h2 variant=\"section\">label</h2>\n  <p data-note>Renders a dim leading caption inside the input chrome, between any <code>prefix</code> and the value. Wires <code>aria-labelledby</code> on the editable surface. For stacked label / hint / error compositions, wrap with <code>field-ui</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <input-ui label=\"Label\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled\">\n      <input-ui label=\"Label\" value=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"empty + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" placeholder=\"Input value\"></input-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled + leading icon\">\n      <input-ui label=\"Label\" prefix=\"user\" value=\"Input value\"></input-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-name.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-name",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "name"
+  },
+  "html": "<section data-section data-property=\"name\" data-chunk=\"input-name\">\n  <h2 variant=\"section\">name</h2>\n  <p data-note>Form field name. Used when the input participates in a <code>&lt;form&gt;</code> or <code>FormController</code>.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='name=\"email\"'>\n      <field-ui label=\"Email\">\n        <input-ui name=\"email\" type=\"email\" placeholder=\"you@example.com\"></input-ui>\n      </field-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='name=\"username\"'>\n      <field-ui label=\"Username\">\n        <input-ui name=\"username\" placeholder=\"Pick a handle\"></input-ui>\n      </field-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/input-pattern.json

@@ -0,0 +1,15 @@
+{
+  "name": "input-pattern",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/input",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "pattern"
+  },
+  "html": "<section data-section data-property=\"pattern\" data-chunk=\"input-pattern\">\n  <h2 variant=\"section\">pattern</h2>\n  <p data-note>Regex the value must match. Triggers validation UI when the field is invalid.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='pattern=\"[A-Za-z0-9]+\"'><field-ui label=\"Alphanumeric\">\n  <input-ui pattern=\"[A-Za-z0-9]+\" placeholder=\"letters or digits\"></input-ui>\n</field-ui></div>\n    <div data-artifact-item data-artifact-label='pattern=\"\\\\d{3}-\\\\d{4}\"'><field-ui label=\"Phone\">\n  <input-ui type=\"tel\" pattern=\"\\\\d{3}-\\\\d{4}\" placeholder=\"555-0100\"></input-ui>\n</field-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/input/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}