@adia-ai/a2ui-corpus 0.0.2 → 0.0.3

package/chunks/card-variant-ghost.json

@@ -0,0 +1,15 @@
+{
+  "name": "card-variant-ghost",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "variant-ghost"
+  },
+  "html": "<section data-section data-property=\"variant-ghost\" data-chunk=\"card-variant-ghost\">\n  <h2 variant=\"section\">variant: ghost</h2>\n  <p data-note>Ghost variant has no background or border.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"ghost\">\n      <card-ui variant=\"ghost\" style=\"width: 200px\">\n        <header>\n          <h3>Ghost</h3>\n        </header>\n        <section>Transparent card.</section>\n        <footer>Footer</footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/card-variant-outlined.json

@@ -0,0 +1,15 @@
+{
+  "name": "card-variant-outlined",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "variant-outlined"
+  },
+  "html": "<section data-section data-property=\"variant-outlined\" data-chunk=\"card-variant-outlined\">\n  <h2 variant=\"section\">variant: outlined</h2>\n  <p data-note>Outlined variant uses a visible border with transparent background.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"outlined\">\n      <card-ui variant=\"outlined\" style=\"width: 200px\">\n        <header>\n          <h3>Outlined</h3>\n        </header>\n        <section>Border, no fill.</section>\n        <footer>Footer</footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/card-variant.json

@@ -0,0 +1,15 @@
+{
+  "name": "card-variant",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "variant"
+  },
+  "html": "<section data-section data-property=\"variant\" data-chunk=\"card-variant\">\n  <h2 variant=\"section\">variant</h2>\n  <p data-note>Controls the visual style. Defaults to \"default\".</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"default\">\n      <card-ui variant=\"default\">\n        <section>Default card content</section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"outlined\">\n      <card-ui variant=\"outlined\">\n        <section>Outlined card content</section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"filled\">\n      <card-ui variant=\"filled\">\n        <section>Filled card content</section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"ghost\">\n      <card-ui variant=\"ghost\">\n        <section>Ghost card content</section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-average.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-average",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "average"
+  },
+  "html": "<section data-section data-property=\"average\" data-chunk=\"chart-average\">\n  <h2 variant=\"section\">average</h2>\n  <p data-note>Overlay an average reference line. On by default; set to false to hide.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"average (default)\">\n      <chart-ui type=\"bar\" data='[{\"d\":\"Mon\",\"v\":20},{\"d\":\"Tue\",\"v\":45},{\"d\":\"Wed\",\"v\":30},{\"d\":\"Thu\",\"v\":55},{\"d\":\"Fri\",\"v\":40}]' x=\"d\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"hide-average\">\n      <chart-ui type=\"bar\" hide-average data='[{\"d\":\"Mon\",\"v\":20},{\"d\":\"Tue\",\"v\":45},{\"d\":\"Wed\",\"v\":30},{\"d\":\"Thu\",\"v\":55},{\"d\":\"Fri\",\"v\":40}]' x=\"d\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-color.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-color",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "color"
+  },
+  "html": "<section data-section data-property=\"color\" data-chunk=\"chart-color\">\n  <h2 variant=\"section\">color</h2>\n  <p data-note>Color scheme for the series. Maps to the chrome/semantic palette.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"accent\"><chart-ui type=\"bar\" color=\"accent\" data='[{\"q\":\"Q1\",\"v\":120},{\"q\":\"Q2\",\"v\":180},{\"q\":\"Q3\",\"v\":240},{\"q\":\"Q4\",\"v\":300}]' x=\"q\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"success\"><chart-ui type=\"bar\" color=\"success\" data='[{\"q\":\"Q1\",\"v\":120},{\"q\":\"Q2\",\"v\":180},{\"q\":\"Q3\",\"v\":240},{\"q\":\"Q4\",\"v\":300}]' x=\"q\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"warning\"><chart-ui type=\"bar\" color=\"warning\" data='[{\"q\":\"Q1\",\"v\":120},{\"q\":\"Q2\",\"v\":180},{\"q\":\"Q3\",\"v\":240},{\"q\":\"Q4\",\"v\":300}]' x=\"q\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"danger\"><chart-ui type=\"bar\" color=\"danger\" data='[{\"q\":\"Q1\",\"v\":120},{\"q\":\"Q2\",\"v\":180},{\"q\":\"Q3\",\"v\":240},{\"q\":\"Q4\",\"v\":300}]' x=\"q\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"info\"><chart-ui type=\"bar\" color=\"info\" data='[{\"q\":\"Q1\",\"v\":120},{\"q\":\"Q2\",\"v\":180},{\"q\":\"Q3\",\"v\":240},{\"q\":\"Q4\",\"v\":300}]' x=\"q\" y=\"v\" size=\"sm\"></chart-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-data-stream.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-data-stream",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "data-stream"
+  },
+  "html": "<section data-section data-property=\"data-stream\" data-chunk=\"chart-data-stream\">\n  <h2 variant=\"section\">Data stream (<code>data-stream-*</code>)</h2>\n  <p data-note>\n    Universal data ingestion via <code>data-stream-*</code> attributes.\n    Works on any element with a settable <code>.data</code> property —\n    chart-ui, table-ui, heatmap-ui, stat-ui, list-ui. A document-level\n    MutationObserver attaches a stream when <code>data-stream-src</code>\n    is set and detaches cleanly when removed or the element leaves the\n    DOM. No per-component opt-in needed.\n  </p>\n  <code-ui language=\"html\">&lt;!-- HTTP one-shot fetch --&gt;\n&lt;chart-ui id=\"rev\" type=\"area\" x=\"month\" y=\"revenue\"\n          data-stream-src=\"/api/revenue?range=3m\"\n          data-stream-path=\"data\"&gt;&lt;/chart-ui&gt;\n\n&lt;!-- HTTP polling every 5s --&gt;\n&lt;table-ui id=\"orders\"\n          data-stream-src=\"/api/orders\"\n          data-stream-interval=\"5000\"&gt;&lt;/table-ui&gt;\n\n&lt;!-- Server-Sent Events, append rows on each event --&gt;\n&lt;heatmap-ui id=\"activity\"\n            data-stream-src=\"/sse/activity\"\n            data-stream-mode=\"sse\"\n            data-stream-event=\"cell\"\n            data-stream-merge=\"append\"&gt;&lt;/heatmap-ui&gt;\n\n&lt;!-- Subscribe to live events --&gt;\n&lt;script&gt;\n  const c = document.getElementById('rev');\n  c.addEventListener('stream-load',   () =&gt; console.log('connected'));\n  c.addEventListener('stream-update', (e) =&gt; console.log('data', e.detail.data));\n  c.addEventListener('stream-error',  (e) =&gt; console.warn('err', e.detail.error));\n&lt;/script&gt;</code-ui>\n  <table>\n    <thead><tr><th>Attribute</th><th>Default</th><th>Description</th></tr></thead>\n    <tbody>\n      <tr><td><code>data-stream-src</code></td><td>—</td><td>URL or resource identifier. Required.</td></tr>\n      <tr><td><code>data-stream-mode</code></td><td><code>http</code></td><td><code>http</code> (fetch + optional poll) | <code>sse</code> (EventSource) | <code>ws</code> (WebSocket).</td></tr>\n      <tr><td><code>data-stream-interval</code></td><td><code>0</code></td><td>Poll interval in ms (HTTP only). <code>0</code> = single fetch.</td></tr>\n      <tr><td><code>data-stream-path</code></td><td><code>''</code></td><td>Dotted path into the response (e.g. <code>result.items</code>).</td></tr>\n      <tr><td><code>data-stream-event</code></td><td><code>message</code></td><td>SSE event name to listen on.</td></tr>\n      <tr><td><code>data-stream-method</code></td><td><code>GET</code></td><td>HTTP method.</td></tr>\n      <tr><td><code>data-stream-headers</code></td><td><code>{}</code></td><td>JSON-encoded headers object.</td></tr>\n      <tr><td><code>data-stream-body</code></td><td><code>''</code></td><td>Request body (POST / PUT).</td></tr>\n      <tr><td><code>data-stream-target</code></td><td><code>data</code></td><td>Property to set on the element. Common values: <code>data</code> (default — array data), <code>value</code> / <code>label</code> (stat-ui scalars), <code>textContent</code> (universal — set the visible text on any element), or <code>\"*\"</code> to spread the response object onto the element via <code>Object.assign</code> (drives multiple properties from one fetch).</td></tr>\n      <tr><td><code>data-stream-merge</code></td><td><code>replace</code></td><td><code>replace</code> | <code>append</code> | <code>prepend</code>. The append/prepend modes only apply when the existing value and the new value are both arrays.</td></tr>\n      <tr><td><code>data-stream-format</code></td><td>auto</td><td><code>json</code> (default) | <code>csv</code> | <code>tsv</code> | <code>jsonl</code> | <code>text</code>. Auto-detected from the URL extension (<code>.csv</code> / <code>.tsv</code> / <code>.jsonl</code> / <code>.ndjson</code> / <code>.txt</code>) or the response's <code>content-type</code> header when not set explicitly.</td></tr>\n      <tr><td><code>data-stream-id</code></td><td>auto</td><td>Explicit stream identity. Two elements with the same id share one transport (refcounted). When unset, the id is an auto-hash of <code>(src, mode, interval, method, body, headers, format, event)</code> — attribute-identical configs auto-share. Streams are reachable programmatically via the <code>streams</code> registry export from <code>core/data-stream.js</code>.</td></tr>\n    </tbody>\n  </table>\n\n  <h3>Live demo (HTTP fetch from a mock JSON endpoint)</h3>\n  <p data-note>\n    The chart below has <code>data-stream-src=\"/site/mock/revenue.json\"</code>\n    + <code>data-stream-path=\"data\"</code>. The mock JSON ships with the\n    site bundle, so this works on both <code>npm run dev</code> and the\n    static deploy at <code>ui-kit.exe.xyz</code>. View source in DevTools\n    + look at the network tab — there's no JS setup wiring this chart.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='chart-ui[data-stream-src=\"/site/mock/revenue.json\"][data-stream-path=\"data\"]' style=\"flex:1 1 100%;\">\n      <chart-ui type=\"area\"\n                x=\"month\"\n                y=\"revenue\"\n                aria-label=\"Revenue from /site/mock/revenue.json\"\n                data-stream-src=\"/site/mock/revenue.json\"\n                data-stream-path=\"data\"></chart-ui>\n    </div>\n  </div>\n\n  <h3>Live demo (CSV format)</h3>\n  <p data-note>\n    Same chart-ui, fed a multi-series stacked bar from a CSV file. The\n    <code>.csv</code> extension auto-selects <code>data-stream-format=\"csv\"</code>;\n    the parser handles quoted fields, escaped quotes, and numeric coercion.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='chart-ui[data-stream-src=\"/site/mock/sales.csv\"]' style=\"flex:1 1 100%;\">\n      <chart-ui type=\"stacked-bar\"\n                x=\"quarter\"\n                y=\"desktop,mobile\"\n                aria-label=\"Quarterly sales by device — CSV-fed\"\n                data-stream-src=\"/site/mock/sales.csv\"></chart-ui>\n    </div>\n  </div>\n\n  <h3>Live demo (JSONL format)</h3>\n  <p data-note>\n    JSONL (one JSON value per line, also called NDJSON). Useful for\n    streaming logs, event feeds, or append-friendly workloads. Each\n    line parses to a row in <code>.data</code>.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='chart-ui[data-stream-src=\"/site/mock/events.jsonl\"]' style=\"flex:1 1 100%;\">\n      <chart-ui type=\"bar\"\n                x=\"ts\"\n                y=\"value\"\n                aria-label=\"Event timeline from JSONL\"\n                data-stream-src=\"/site/mock/events.jsonl\"></chart-ui>\n    </div>\n  </div>\n\n  <h3>Shared streams (<code>data-stream-id</code>)</h3>\n  <p data-note>\n    Two elements with the same <code>data-stream-id</code> share one\n    transport. The first subscriber starts the fetch / poll / SSE / WS;\n    the last unsubscriber stops it. Same applies (silently) when two\n    elements have identical <code>data-stream-src</code> +\n    <code>-mode</code> + <code>-interval</code> attributes — an internal\n    hash deduplicates without you naming the stream. Below: three\n    different visualizations of <code>/site/mock/revenue.json</code>\n    fed by a single fetch via <code>data-stream-id=\"rev\"</code>.\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='3 consumers, 1 transport' style=\"flex:1 1 100%;\">\n      <div style=\"display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--a-space-3);\">\n        <chart-ui type=\"area\" x=\"month\" y=\"revenue\"\n                  aria-label=\"Area view of shared rev stream\"\n                  data-stream-id=\"rev\"\n                  data-stream-src=\"/site/mock/revenue.json\"\n                  data-stream-path=\"data\"></chart-ui>\n        <chart-ui type=\"bar\" x=\"month\" y=\"revenue\"\n                  aria-label=\"Bar view of shared rev stream\"\n                  data-stream-id=\"rev\"\n                  data-stream-src=\"/site/mock/revenue.json\"\n                  data-stream-path=\"data\"></chart-ui>\n        <chart-ui type=\"sparkline\" x=\"month\" y=\"revenue\"\n                  aria-label=\"Sparkline view of shared rev stream\"\n                  data-stream-id=\"rev\"\n                  data-stream-src=\"/site/mock/revenue.json\"\n                  data-stream-path=\"data\"></chart-ui>\n      </div>\n    </div>\n  </div>\n  <p data-note>\n    Programmatic subscription works too — read the registry and listen\n    for changes via <code>signal()</code> + <code>effect()</code>:\n  </p>\n  <code-ui language=\"js\">import { streams } from '@adia-ai/web-components/core/data-stream';\nimport { effect } from '@adia-ai/web-components/core/signals';\n\n// Look up by id (explicit) or by auto-hash (inspect streams.keys() to find it)\nconst rev = streams.get('id:rev');\nconsole.log(rev.signal.value);  // current data; null until first response\n\n// React to changes — fires once per stream update\nconst dispose = effect(() => {\n  const data = rev.signal.value;\n  if (data) console.log('rev updated:', data.length, 'rows');\n});\n\n// Stop subscribing\ndispose();</code-ui>\n\n  <h3>Universal targets — beyond <code>.data</code></h3>\n  <p data-note>\n    The trait works on any component property — not just <code>.data</code>.\n    Set <code>data-stream-target</code> to write to a different property,\n    or to <code>\"*\"</code> to spread the response object onto the element\n    (drives multiple props from one fetch).\n  </p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='stat-ui[data-stream-target=\"*\"] from /site/mock/kpi.json'>\n      <card-ui style=\"max-width:280px;\">\n        <section>\n          <stat-ui aria-label=\"KPI from /site/mock/kpi.json\"\n                   data-stream-src=\"/site/mock/kpi.json\"\n                   data-stream-target=\"*\"></stat-ui>\n        </section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='text-ui[data-stream-target=\"textContent\"] from /site/mock/revenue.json'>\n      <card-ui style=\"max-width:280px;\">\n        <section>\n          <text-ui variant=\"caption\" color=\"subtle\">Range:</text-ui>\n          <text-ui variant=\"title\"\n                   aria-label=\"Range from revenue.json\"\n                   data-stream-src=\"/site/mock/revenue.json\"\n                   data-stream-path=\"meta.range\"\n                   data-stream-target=\"textContent\"></text-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-deprecated.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-deprecated",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "deprecated"
+  },
+  "html": "<section data-section data-property=\"deprecated\" data-chunk=\"chart-deprecated\">\n  <h2 variant=\"section\">Deprecated attributes</h2>\n  <p data-note>\n    <code>aspect</code> and <code>heading</code> predate the composition\n    model. Parents should size the chart directly; titles belong in an\n    enclosing card's <code>&lt;header&gt;</code>. Both attributes still\n    work but emit a one-shot <code>console.warn</code> per instance.\n    Removal planned for the next major.\n  </p>\n  <code-ui language=\"html\">&lt;!-- Recommended — parent sizes, card carries the title --&gt;\n&lt;card-ui style=\"max-width: 520px;\"&gt;\n  &lt;header&gt;&lt;span slot=\"heading\"&gt;&lt;h3&gt;Revenue&lt;/h3&gt;&lt;/span&gt;&lt;/header&gt;\n  &lt;section&gt;&lt;chart-ui type=\"bar\" x=\"month\" y=\"revenue\"&gt;&lt;/chart-ui&gt;&lt;/section&gt;\n&lt;/card-ui&gt;\n\n&lt;!-- Deprecated — still works, emits console.warn --&gt;\n&lt;chart-ui type=\"bar\" aspect=\"wide\" heading=\"Revenue\"&gt;&lt;/chart-ui&gt;</code-ui>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-format.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-format",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "format"
+  },
+  "html": "<section data-section data-property=\"format\" data-chunk=\"chart-format\">\n  <h2 variant=\"section\">format</h2>\n  <p data-note>Number-format mode applied to every visible value — axis labels, bar/line value labels, donut totals, gauge values, treemap values, funnel values, and the internal tooltip. Default <code>abbr</code> renders 1.2K / 3M. <code>currency</code> reads <code>--chart-currency-prefix</code> (default <code>\"$\"</code>) — override the token to localize.</p>\n  <grid-ui columns=\"4\" gap=\"4\">\n    <div data-artifact-item data-artifact-label='format=\"abbr\" (default)'>\n      <chart-ui id=\"chart-fmt-abbr\" type=\"bar\" x=\"month\" y=\"value\"></chart-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='format=\"decimal\"'>\n      <chart-ui id=\"chart-fmt-decimal\" type=\"bar\" x=\"month\" y=\"value\" format=\"decimal\"></chart-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='format=\"currency\"'>\n      <chart-ui id=\"chart-fmt-currency\" type=\"bar\" x=\"month\" y=\"value\" format=\"currency\"></chart-ui>\n    </div>\n    <div data-artifact-item data-artifact-label='format=\"currency\" with €' style=\"--chart-currency-prefix: &quot;€&quot;;\">\n      <chart-ui id=\"chart-fmt-euro\" type=\"bar\" x=\"month\" y=\"value\" format=\"currency\"></chart-ui>\n    </div>\n  </grid-ui>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-hideGrid.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-hideGrid",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "hideGrid"
+  },
+  "html": "<section data-section data-property=\"hideGrid\" data-chunk=\"chart-hideGrid\">\n  <h2 variant=\"section\">hideGrid</h2>\n  <p data-note>Hide the gridlines for a cleaner look.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"hideGrid\">\n      <chart-ui type=\"line\" hide-grid data='[{\"d\":1,\"v\":10},{\"d\":2,\"v\":24},{\"d\":3,\"v\":16},{\"d\":4,\"v\":38},{\"d\":5,\"v\":42}]' x=\"d\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"(default)\">\n      <chart-ui type=\"line\" data='[{\"d\":1,\"v\":10},{\"d\":2,\"v\":24},{\"d\":3,\"v\":16},{\"d\":4,\"v\":38},{\"d\":5,\"v\":42}]' x=\"d\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-hideValues.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-hideValues",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "hideValues"
+  },
+  "html": "<section data-section data-property=\"hideValues\" data-chunk=\"chart-hideValues\">\n  <h2 variant=\"section\">hideValues</h2>\n  <p data-note>Hide the value labels drawn on each data point.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"hideValues\">\n      <chart-ui type=\"bar\" hide-values data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"(default)\">\n      <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-chart-plus-breakdown.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-chart-plus-breakdown",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "chart-plus-breakdown"
+  },
+  "html": "<section data-section data-property=\"chart-plus-breakdown\" data-chunk=\"chart-in-card-chart-plus-breakdown\">\n  <h2 variant=\"section\">Chart + inline breakdown</h2>\n  <p data-note>Chart shows aggregate; breakdown beneath gives the composition. Most SaaS \"Overview\" tiles follow this shape.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"chart plus breakdown\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\"><h3>Sessions</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">This week</text-ui>\n        </header>\n        <section>\n          <col-ui gap=\"3\">\n            <chart-ui id=\"pat-sessions\" type=\"bar\" x=\"day\" y=\"sessions\" hide-values></chart-ui>\n            <grid-ui columns=\"3\" gap=\"2\">\n              <card-ui><section><stat-ui label=\"Desktop\" value=\"2,840\"></stat-ui></section></card-ui>\n              <card-ui><section><stat-ui label=\"Mobile\" value=\"1,590\"></stat-ui></section></card-ui>\n              <card-ui><section><stat-ui label=\"Tablet\" value=\"280\"></stat-ui></section></card-ui>\n            </grid-ui>\n          </col-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-chart-plus-stat.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-chart-plus-stat",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "chart-plus-stat"
+  },
+  "html": "<section data-section data-property=\"chart-plus-stat\" data-chunk=\"chart-in-card-chart-plus-stat\">\n  <h2 variant=\"section\">Chart + headline stat</h2>\n  <p data-note>Stat in header pairs with the chart so the current value is legible before the chart renders.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"chart plus stat\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\">\n            <stat-ui label=\"MRR\" value=\"$48,290\" change=\"+12.4%\" trend=\"up\"></stat-ui>\n          </span>\n        </header>\n        <section>\n          <chart-ui id=\"pat-mrr\" type=\"line\" x=\"month\" y=\"revenue\" smooth=\"0.4\" hide-values></chart-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-chart-with-filter-pills.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-chart-with-filter-pills",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "chart-with-filter-pills"
+  },
+  "html": "<section data-section data-property=\"chart-with-filter-pills\" data-chunk=\"chart-in-card-chart-with-filter-pills\">\n  <h2 variant=\"section\">Chart with filter pills</h2>\n  <p data-note>A <code>segmented-ui</code> in the header's <code>action</code> slot drives a time-range selection. Wire its <code>value</code> to refetch / slice the chart's <code>.data</code> via a controller.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"chart with 1w / 2w / 1m / 3m pills\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\"><h3>Sessions</h3></span>\n          <segmented-ui slot=\"action\" value=\"1m\">\n            <segment-ui text=\"1w\" value=\"1w\"></segment-ui>\n            <segment-ui text=\"2w\" value=\"2w\"></segment-ui>\n            <segment-ui text=\"1m\" value=\"1m\"></segment-ui>\n            <segment-ui text=\"3m\" value=\"3m\"></segment-ui>\n          </segmented-ui>\n        </header>\n        <section>\n          <chart-ui id=\"pat-filter-sessions\" type=\"line\" x=\"day\" y=\"sessions\" hide-values></chart-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-full-chart.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-full-chart",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "full-chart"
+  },
+  "html": "<section data-section data-property=\"full-chart\" data-chunk=\"chart-in-card-full-chart\">\n  <h2 variant=\"section\">Full chart with framing</h2>\n  <p data-note>Chart as primary content. Header names the metric; footer adds a supporting action.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"full chart\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <chart-ui id=\"pat-revenue\" type=\"bar\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n        </section>\n        <footer>\n          <button-ui text=\"View report\" variant=\"outline\" stretch></button-ui>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-sparkline-tile.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-sparkline-tile",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "sparkline-tile"
+  },
+  "html": "<section data-section data-property=\"sparkline-tile\" data-chunk=\"chart-in-card-sparkline-tile\">\n  <h2 variant=\"section\">Sparkline tile</h2>\n  <p data-note>KPI + trend shape. Used in overview rows to show 4–6 metrics side-by-side.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sparkline tile\">\n      <card-ui style=\"max-width:320px;\">\n        <header>\n          <span slot=\"heading\"><h2>Page Views</h2></span>\n          <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n        </header>\n        <section bleed>\n          <chart-ui id=\"pat-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-stat-with-sparkline.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-stat-with-sparkline",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "stat-with-sparkline"
+  },
+  "html": "<section data-section data-property=\"stat-with-sparkline\" data-chunk=\"chart-in-card-stat-with-sparkline\">\n  <h2 variant=\"section\">Stat with inline sparkline</h2>\n  <p data-note>Stat-ui's <code>chart</code> slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"stat with sparkline slot\">\n      <card-ui style=\"max-width:320px;\">\n        <section>\n          <stat-ui label=\"Revenue\" value=\"$48.2k\" change=\"+12.5%\" trend=\"up\">\n            <chart-ui id=\"pat-stat-spark\" slot=\"chart\" type=\"sparkline\" x=\"month\" y=\"value\"></chart-ui>\n          </stat-ui>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-in-card-trend-footer.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-in-card-trend-footer",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/patterns/chart-in-card",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "trend-footer"
+  },
+  "html": "<section data-section data-property=\"trend-footer\" data-chunk=\"chart-in-card-trend-footer\">\n  <h2 variant=\"section\">Trend footer</h2>\n  <p data-note>Footer carries trend narrative + period caption using the new footer <code>heading</code> / <code>description</code> slot routing (symmetric with header). Shadcn-style revenue card translated to AdiaUI primitives.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"area chart + trend footer\">\n      <card-ui style=\"max-width:520px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">January – March 2024</text-ui>\n        </header>\n        <section>\n          <chart-ui id=\"pat-trend-revenue\" type=\"area\" x=\"month\" y=\"revenue\" hide-values></chart-ui>\n        </section>\n        <footer>\n          <span slot=\"heading\">Trending up by 5.2% this month</span>\n          <text-ui slot=\"description\" color=\"subtle\">Showing total visitors for the last 3 months</text-ui>\n        </footer>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/patterns/chart-in-card/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-legend-for.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-legend-for",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart-legend",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "for"
+  },
+  "html": "<section data-section data-property=\"for\" data-chunk=\"chart-legend-for\">\n  <h2 variant=\"section\">for — mirror a chart's legendData</h2>\n  <p data-note>Point <code>[for]</code> at a <code>chart-ui</code>'s id and the legend reads series data from that chart's <code>.legendData</code> getter on each <code>legend-update</code> event. The chart suppresses its internal legend automatically when a sibling <code>chart-legend-ui[for=self]</code> is present.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='chart-legend-ui[for=\"demo-chart\"]' style=\"max-width:520px;\">\n      <div style=\"display:flex; flex-direction:column; gap:var(--a-space-2);\">\n        <chart-ui id=\"demo-chart\" type=\"multi-line\" x=\"month\" y=\"revenue,users,churn\"></chart-ui>\n        <chart-legend-ui id=\"legend-for\" for=\"demo-chart\" shape=\"line\"></chart-legend-ui>\n      </div>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart-legend/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-legend-on-toggle.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-legend-on-toggle",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart-legend",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "on-toggle"
+  },
+  "html": "<section data-section data-property=\"on-toggle\" data-chunk=\"chart-legend-on-toggle\">\n  <h2 variant=\"section\">on-toggle</h2>\n  <p data-note>Reports the requested toggle semantic via <code>toggle</code> event detail. <code>hide</code> (default) asks the chart to remove the series from render; <code>opacity</code> asks to fade instead of hide (cases where reflow is jarring).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='on-toggle=\"hide\" (default)'>\n      <chart-legend-ui id=\"legend-hide\" shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Primary\",\"slot\":0},{\"key\":\"b\",\"label\":\"Secondary\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='on-toggle=\"opacity\"'>\n      <chart-legend-ui id=\"legend-opacity\" shape=\"dot\" on-toggle=\"opacity\" items='[{\"key\":\"a\",\"label\":\"Primary\",\"slot\":0},{\"key\":\"b\",\"label\":\"Secondary\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart-legend/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-legend-position.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-legend-position",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart-legend",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "position"
+  },
+  "html": "<section data-section data-property=\"position\" data-chunk=\"chart-legend-position\">\n  <h2 variant=\"section\">position</h2>\n  <p data-note>Layout hint — drives internal <code>flex-direction</code>. Actual placement still follows DOM order; the prop just tunes how the rows stack within the legend element.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='position=\"bottom\" (default)'>\n      <chart-legend-ui id=\"legend-bottom\" shape=\"dot\" position=\"bottom\" items='[{\"key\":\"a\",\"label\":\"Series A\",\"slot\":0},{\"key\":\"b\",\"label\":\"Series B\",\"slot\":1},{\"key\":\"c\",\"label\":\"Series C\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label='position=\"left\"'>\n      <chart-legend-ui id=\"legend-left\" shape=\"dot\" position=\"left\" items='[{\"key\":\"a\",\"label\":\"Series A\",\"slot\":0},{\"key\":\"b\",\"label\":\"Series B\",\"slot\":1},{\"key\":\"c\",\"label\":\"Series C\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart-legend/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-legend-shape.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-legend-shape",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart-legend",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "shape"
+  },
+  "html": "<section data-section data-property=\"shape\" data-chunk=\"chart-legend-shape\">\n  <h2 variant=\"section\">shape</h2>\n  <p data-note>Swatch style for each legend row. <code>dot</code> and <code>square</code> map to badge-ui icon variants; <code>line</code> and <code>dashed</code> render via CSS <code>::before</code> swatches.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"dot\">\n      <chart-legend-ui id=\"legend-dot\" shape=\"dot\" items='[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"users\",\"label\":\"Users\",\"slot\":1},{\"key\":\"churn\",\"label\":\"Churn\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"square\">\n      <chart-legend-ui id=\"legend-square\" shape=\"square\" items='[{\"key\":\"a\",\"label\":\"Design\",\"slot\":0},{\"key\":\"b\",\"label\":\"Dev\",\"slot\":1},{\"key\":\"c\",\"label\":\"QA\",\"slot\":2}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"line\">\n      <chart-legend-ui id=\"legend-line\" shape=\"line\" items='[{\"key\":\"revenue\",\"label\":\"Revenue\",\"slot\":0},{\"key\":\"forecast\",\"label\":\"Forecast\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"dashed\">\n      <chart-legend-ui id=\"legend-dashed\" shape=\"dashed\" items='[{\"key\":\"target\",\"label\":\"Target\",\"slot\":3},{\"key\":\"actual\",\"label\":\"Actual\",\"slot\":4}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart-legend/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-legend-static.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-legend-static",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart-legend",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "static"
+  },
+  "html": "<section data-section data-property=\"static\" data-chunk=\"chart-legend-static\">\n  <h2 variant=\"section\">static</h2>\n  <p data-note>When set, rows render as non-interactive <code>&lt;span&gt;</code>s. No click handler, no focus ring, no <code>toggle</code> event.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"interactive (default)\">\n      <chart-legend-ui id=\"legend-interactive\" shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Active\",\"slot\":0},{\"key\":\"b\",\"label\":\"Inactive\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"static\">\n      <chart-legend-ui id=\"legend-static\" static shape=\"dot\" items='[{\"key\":\"a\",\"label\":\"Active\",\"slot\":0},{\"key\":\"b\",\"label\":\"Inactive\",\"slot\":1}]'></chart-legend-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart-legend/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-radius.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-radius",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "radius"
+  },
+  "html": "<section data-section data-property=\"radius\" data-chunk=\"chart-radius\">\n  <h2 variant=\"section\">radius</h2>\n  <p data-note>Bar corner radius in pixels.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='radius=\"0\"'><chart-ui type=\"bar\" radius=\"0\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label='radius=\"4\" (default)'><chart-ui type=\"bar\" radius=\"4\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label='radius=\"12\"'><chart-ui type=\"bar\" radius=\"12\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\" size=\"sm\"></chart-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-size.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-size",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "size"
+  },
+  "html": "<section data-section data-property=\"size\" data-chunk=\"chart-size\">\n  <h2 variant=\"section\">size</h2>\n  <p data-note>Named size preset. Defaults to unset (uses container width).</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"sm\"><chart-ui type=\"bar\" size=\"sm\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"md\"><chart-ui type=\"bar\" size=\"md\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n    <div data-artifact-item data-artifact-label=\"lg\"><chart-ui type=\"bar\" size=\"lg\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36}]' x=\"c\" y=\"v\"></chart-ui></div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-sizing.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-sizing",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "sizing"
+  },
+  "html": "<section data-section data-property=\"sizing\" data-chunk=\"chart-sizing\">\n  <h2 variant=\"section\">sizing</h2>\n  <p data-note>Chart-ui takes its height and width from the parent container — set <code>height</code> / <code>aspect-ratio</code> on the wrapping element (card section, grid cell, sidebar panel) to shape the plot. The chart's ResizeObserver re-renders when the container changes.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='16:9 via aspect-ratio'>\n      <div style=\"aspect-ratio:16/9; inline-size:240px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label='1:1 square'>\n      <div style=\"aspect-ratio:1/1; inline-size:200px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n    <div data-artifact-item data-artifact-label='fixed height'>\n      <div style=\"block-size:180px; inline-size:240px;\">\n        <chart-ui type=\"bar\" data='[{\"c\":\"A\",\"v\":24},{\"c\":\"B\",\"v\":48},{\"c\":\"C\",\"v\":36},{\"c\":\"D\",\"v\":60}]' x=\"c\" y=\"v\"></chart-ui>\n      </div>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-smooth.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-smooth",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "smooth"
+  },
+  "html": "<section data-section data-property=\"smooth\" data-chunk=\"chart-smooth\">\n  <h2 variant=\"section\">smooth</h2>\n  <p data-note>Controls line curve tension for line charts. 0 = straight, 1 = maximum smoothing. Defaults to 0.4.</p>\n  <grid-ui columns=\"3\" gap=\"4\">\n    <div data-artifact-item data-artifact-label=\"smooth=0 (straight)\">\n      <chart-ui id=\"chart-smooth0\" type=\"line\" x=\"month\" y=\"value\" smooth=\"0\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"smooth=0.4 (default)\">\n      <chart-ui id=\"chart-smooth04\" type=\"line\" x=\"month\" y=\"value\" smooth=\"0.4\"></chart-ui>\n      </div>\n    <div data-artifact-item data-artifact-label=\"smooth=1 (max)\">\n      <chart-ui id=\"chart-smooth1\" type=\"line\" x=\"month\" y=\"value\" smooth=\"1\"></chart-ui>\n      </div>\n  </grid-ui>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-states.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-states",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "states"
+  },
+  "html": "<section data-section data-property=\"states\" data-chunk=\"chart-states\">\n  <h2 variant=\"section\">Loading / empty / error states</h2>\n  <p data-note>Chart-ui doesn't own state chrome — compose loading, empty, and error wrappers around it so the card retains its shape while data is fetching or unavailable.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"loading\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <skeleton-ui style=\"height:180px; width:100%;\"></skeleton-ui>\n        </section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"empty\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <empty-state-ui icon=\"chart-bar\" heading=\"No data yet\" description=\"Process your first order to see a trend.\">\n            <button-ui slot=\"action\" text=\"Add order\" variant=\"primary\" size=\"sm\"></button-ui>\n          </empty-state-ui>\n        </section>\n      </card-ui>\n    </div>\n    <div data-artifact-item data-artifact-label=\"error\">\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Revenue</h3></span>\n          <text-ui slot=\"description\" color=\"subtle\">Last 12 months</text-ui>\n        </header>\n        <section>\n          <alert-ui variant=\"danger\" icon=\"warning\" text=\"Couldn't load chart data. Check your connection and retry.\"></alert-ui>\n          <div style=\"margin-top:var(--a-space-3); display:flex; justify-content:center;\">\n            <button-ui text=\"Retry\" variant=\"outline\" size=\"sm\" icon=\"arrow-clockwise\"></button-ui>\n          </div>\n        </section>\n      </card-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-title.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-title",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "title"
+  },
+  "html": "<section data-section data-property=\"title\" data-chunk=\"chart-title\">\n  <h2 variant=\"section\">title</h2>\n  <p data-note>Chart-ui doesn't render its own title chrome. Wrap the chart in a <code>card-ui</code> and put the heading in the card's <code>&lt;header&gt;</code> — gives you heading + optional description + action slots with the same shape as the rest of the system. See the <a href=\"#chart-card\">Chart card with trend footer</a> example above.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label='card-ui > header > [slot=\"heading\"] + chart-ui'>\n      <card-ui style=\"max-width:360px;\">\n        <header>\n          <span slot=\"heading\"><h3>Quarterly revenue</h3></span>\n        </header>\n        <section>\n          <chart-ui type=\"bar\" data='[{\"q\":\"Q1\",\"revenue\":120},{\"q\":\"Q2\",\"revenue\":180},{\"q\":\"Q3\",\"revenue\":240},{\"q\":\"Q4\",\"revenue\":300}]' x=\"q\" y=\"revenue\" size=\"sm\"></chart-ui>\n        </section>\n      </card-ui>\n      </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chart-type.json

@@ -0,0 +1,15 @@
+{
+  "name": "chart-type",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chart",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "type"
+  },
+  "html": "<section data-section data-property=\"type\" data-chunk=\"chart-type\">\n  <h2 variant=\"section\">type</h2>\n  <p data-note>Chart type. Defaults to \"bar\". Grouped by family below — 18 total. Data is set programmatically via the <code>.data</code> property.</p>\n</section>",
+  "source": "site/pages/components/chart/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}

package/chunks/chat-basic.json

@@ -0,0 +1,15 @@
+{
+  "name": "chat-basic",
+  "kind": "block",
+  "primary": "section",
+  "page": "/site/components/chat",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "data-section": "",
+    "data-property": "basic"
+  },
+  "html": "<section data-section data-property=\"basic\" data-chunk=\"chat-basic\">\n  <h2 variant=\"section\">basic</h2>\n  <p data-note>A chat transcript with two messages. Use <code>role</code> on children to style user vs assistant turns.</p>\n  <div data-artifact-container>\n    <div data-artifact-item data-artifact-label=\"basic\">\n      <chat-ui>\n        <div role=\"user\">What's the capital of France?</div>\n        <div role=\"assistant\">The capital of France is Paris.</div>\n      </chat-ui>\n    </div>\n  </div>\n</section>",
+  "source": "site/pages/components/chat/index.html",
+  "captured_at": "2026-04-28T04:46:20.743Z"
+}