@adia-ai/a2ui-corpus 0.5.3 → 0.5.4

package/chunks/playground-render-preview.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<div id=\"pg-shell\">\n      <!-- ── Toolbar ───────────────────────────────────────────── -->\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"broadcast\" color=\"muted\"></icon-ui>\n          <text-ui strong>Render Preview</text-ui>\n          <badge-ui id=\"pg-status-badge\" text=\"ready\" size=\"sm\" variant=\"default\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\" align=\"center\">\n          <select-ui id=\"pg-example-select\" size=\"sm\" placeholder=\"Load example…\" style=\"min-width: 14rem\">\n            <option value=\"\">Load example…</option>\n            <option value=\"single-card\">Single surface — card + stat</option>\n            <option value=\"streamed-list\">Streamed updates — append items</option>\n            <option value=\"data-bindings\">Data bindings — updateDataModel</option>\n            <option value=\"multi-surface\">Multiple surfaces</option>\n            <option value=\"unknown-component\">Unknown component (graceful fallback)</option>\n          </select-ui>\n          <divider-ui vertical></divider-ui>\n          <button-ui id=\"pg-btn-step\" variant=\"ghost\" size=\"sm\" icon=\"skip-forward\" text=\"Step\" disabled></button-ui>\n          <button-ui id=\"pg-btn-run\" variant=\"primary\" size=\"sm\" icon=\"play\" text=\"Run all\"></button-ui>\n          <button-ui id=\"pg-btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\" text=\"Clear\"></button-ui>\n        </row-ui>\n      </div>\n\n      <!-- ── Body — input | output ─────────────────────────────── -->\n      <div id=\"pg-body\">\n        <!-- LEFT — message stream input -->\n        <section id=\"pg-input-pane\">\n          <header class=\"pg-pane-header\">\n            <text-ui weight=\"medium\" size=\"sm\">A2UI message stream</text-ui>\n            <text-ui size=\"xs\" color=\"muted\" id=\"pg-message-count\">0 messages</text-ui>\n          </header>\n          <textarea\n            id=\"pg-input\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            placeholder='[\n  { \"type\": \"createSurface\", \"surfaceId\": \"main\", \"root\": \"root\" },\n  { \"type\": \"updateComponents\", \"surfaceId\": \"main\", \"components\": [\n    { \"id\": \"root\", \"component\": \"Card\", \"children\": [\"title\"] },\n    { \"id\": \"title\", \"component\": \"Text\", \"variant\": \"h2\", \"text\": \"Hello\" }\n  ]}\n]'\n          ></textarea>\n          <footer class=\"pg-pane-footer\" id=\"pg-input-error\" hidden>\n            <icon-ui name=\"warning\" size=\"sm\" color=\"danger\"></icon-ui>\n            <text-ui size=\"xs\" color=\"danger\" id=\"pg-input-error-text\"></text-ui>\n          </footer>\n        </section>\n\n        <!-- RIGHT — render surface + log -->\n        <section id=\"pg-output-pane\">\n          <header class=\"pg-pane-header\">\n            <text-ui weight=\"medium\" size=\"sm\">Rendered output</text-ui>\n            <row-ui gap=\"3\" align=\"center\">\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-surface-count\">0 surfaces</text-ui>\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-component-count\">0 components</text-ui>\n            </row-ui>\n          </header>\n          <div id=\"pg-surface\" aria-live=\"polite\"></div>\n          <details id=\"pg-log-panel\">\n            <summary>\n              <text-ui size=\"xs\" color=\"muted\">Message log</text-ui>\n              <text-ui size=\"xs\" color=\"muted\" id=\"pg-log-count\">0</text-ui>\n            </summary>\n            <ol id=\"pg-log\"></ol>\n          </details>\n        </section>\n      </div>\n    </div>",
   "source": "apps/genui/app/render-preview/render-preview.contents.html",
-  "captured_at": "2026-05-14T01:42:11.604Z"
+  "captured_at": "2026-05-14T03:55:24.388Z"
 }

package/chunks/playground-streams-bridge.json

@@ -8,5 +8,5 @@
   "attrs": {},
   "html": "<div id=\"pg-shell\">\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"plug\" color=\"muted\"></icon-ui>\n          <text-ui strong>Streams Bridge</text-ui>\n          <badge-ui id=\"pg-source-badge\" text=\"loading…\" variant=\"default\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\">\n          <button-ui id=\"pg-btn-refresh\" variant=\"ghost\" size=\"sm\" icon=\"arrows-clockwise\" text=\"Refresh\"></button-ui>\n          <a href=\"/site/getting-started/wiring\" target=\"_top\" style=\"text-decoration: none\">\n            <button-ui variant=\"ghost\" size=\"sm\" icon=\"book-open\" text=\"Docs\"></button-ui>\n          </a>\n        </row-ui>\n      </div>\n\n      <div id=\"pg-content\">\n        <div id=\"pg-intro\">\n          <h1 style=\"margin: 0 0 var(--a-space-2) 0; font-size: var(--a-ui-lg)\">One stream, two consumers — bridged into A2UI</h1>\n          <p style=\"margin: 0; color: var(--a-text-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n            Both tiles below subscribe to the same <code>data-stream-id=\"rev-pg\"</code>, fed from <code>/site/mock/revenue.json</code>. The left tile renders a\n            <code>chart-ui</code> driven directly by the <code>data-stream-*</code> attribute trait — the trait writes the parsed response into the chart's\n            <code>.data</code> property and re-renders. The right tile is an <strong>A2UI surface</strong> built from <code>updateComponents</code> messages\n            whose props use <code>{path: '…'}</code> bindings; <code>bridgeStreamAsync</code> proxies the same stream signal into the surface's data model so\n            those bindings resolve — no second fetch (open DevTools' Network tab and confirm only one request per refresh). The bridge piggybacks on the chart's\n            refcount rather than holding its own; the DOM source remains the lifecycle owner.\n          </p>\n        </div>\n\n        <div id=\"pg-grid\">\n          <!-- LEFT — direct data-stream-* trait -->\n          <div class=\"pg-tile\">\n            <h3>Direct via <code>data-stream-src</code></h3>\n            <div id=\"chart-host\">\n              <chart-ui\n                id=\"pg-chart\"\n                type=\"area\"\n                x=\"month\"\n                y=\"revenue\"\n                data-stream-src=\"/site/mock/revenue.json\"\n                data-stream-path=\"data\"\n                data-stream-id=\"rev-pg\"\n                aria-label=\"Revenue chart fed via data-stream-src\"\n                style=\"display: block; width: 100%; height: 280px\"\n              ></chart-ui>\n            </div>\n          </div>\n\n          <!-- RIGHT — A2UI surface, bound via bridgeStreamAsync -->\n          <div class=\"pg-tile\">\n            <h3>Via <code>bridgeStreamAsync</code> → A2UI surface</h3>\n            <div id=\"a2ui-host\">\n              <empty-state-ui\n                icon=\"hourglass\"\n                heading=\"Waiting for stream…\"\n                description=\"The bridge will populate these bindings once the fetch resolves.\"\n              ></empty-state-ui>\n            </div>\n          </div>\n        </div>\n\n        <div id=\"pg-status\">\n          <div data-pg-status-row><strong>Stream id:</strong> <code id=\"pg-status-id\">id:rev-pg</code></div>\n          <div data-pg-status-row><strong>Stream signal:</strong> <span id=\"pg-status-signal\">—</span></div>\n          <div data-pg-status-row><strong>Surface dataModel:</strong> <code id=\"pg-status-model\">—</code></div>\n          <div data-pg-status-row><strong>DOM consumer refs:</strong> <span id=\"pg-status-refs\">—</span></div>\n          <div data-pg-status-row><strong>Last fetch:</strong> <span id=\"pg-status-fetched\">—</span></div>\n        </div>\n\n        <details id=\"pg-code-panel\">\n          <summary>Show the wiring (bridge call + A2UI messages)</summary>\n          <div>\n            <code-ui language=\"javascript\" id=\"pg-code-block\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n          </div>\n        </details>\n      </div>\n    </div>",
   "source": "apps/genui/app/streams-bridge/streams-bridge.contents.html",
-  "captured_at": "2026-05-14T01:42:11.604Z"
+  "captured_at": "2026-05-14T03:55:24.388Z"
 }

package/chunks/playground-table-toolbar.json

@@ -12,5 +12,5 @@
   },
   "html": "<table-toolbar-ui for=\"employees\" text=\"All Employees\" count=\"32\"></table-toolbar-ui>",
   "source": "playgrounds/table-toolbar/app/table-toolbar.contents.html",
-  "captured_at": "2026-05-14T01:42:11.604Z"
+  "captured_at": "2026-05-14T03:55:24.388Z"
 }

package/chunks/popover-with-content.json

@@ -25,11 +25,12 @@
       "dropdown"
     ]
   },
-  "captured_at": "2026-05-14T01:42:11.604Z",
+  "captured_at": "2026-05-14T03:55:24.388Z",
   "template": [
     {
       "id": "text",
       "component": "Text",
+      "strong": true,
       "textContent": "Trigger with popover"
     },
     {
@@ -46,7 +47,9 @@
     },
     {
       "id": "popover-trigger",
-      "component": "Button"
+      "component": "Button",
+      "text": "Open details",
+      "variant": "primary"
     },
     {
       "id": "row",
@@ -59,6 +62,7 @@
     {
       "id": "text-3",
       "component": "Text",
+      "strong": true,
       "textContent": "Quick details"
     },
     {

package/chunks/progress-tracker-milestones.json

@@ -24,11 +24,12 @@
       "tasks"
     ]
   },
-  "captured_at": "2026-05-14T01:42:11.604Z",
+  "captured_at": "2026-05-14T03:55:24.388Z",
   "template": [
     {
       "id": "text",
       "component": "Text",
+      "strong": true,
       "textContent": "Project milestones"
     },
     {
@@ -46,15 +47,18 @@
     },
     {
       "id": "progress",
-      "component": "Progress"
+      "component": "Progress",
+      "value": 60
     },
     {
       "id": "check-circle",
-      "component": "Icon"
+      "component": "Icon",
+      "name": "check-circle"
     },
     {
       "id": "text-3",
       "component": "Text",
+      "strong": true,
       "textContent": "Discovery phase"
     },
     {
@@ -74,6 +78,7 @@
     {
       "id": "row",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "check-circle",
@@ -82,11 +87,13 @@
     },
     {
       "id": "icon",
-      "component": "Icon"
+      "component": "Icon",
+      "name": "check-circle"
     },
     {
       "id": "text-5",
       "component": "Text",
+      "strong": true,
       "textContent": "Design system"
     },
     {
@@ -106,6 +113,7 @@
     {
       "id": "row-2",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "icon",
@@ -114,11 +122,13 @@
     },
     {
       "id": "icon-2",
-      "component": "Icon"
+      "component": "Icon",
+      "name": "check-circle"
     },
     {
       "id": "text-7",
       "component": "Text",
+      "strong": true,
       "textContent": "Alpha release"
     },
     {
@@ -138,6 +148,7 @@
     {
       "id": "row-3",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "icon-2",
@@ -146,11 +157,13 @@
     },
     {
       "id": "circle-dashed",
-      "component": "Icon"
+      "component": "Icon",
+      "name": "circle-dashed"
     },
     {
       "id": "text-9",
       "component": "Text",
+      "strong": true,
       "textContent": "Beta release"
     },
     {
@@ -170,6 +183,7 @@
     {
       "id": "row-4",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "circle-dashed",
@@ -178,11 +192,13 @@
     },
     {
       "id": "circle",
-      "component": "Icon"
+      "component": "Icon",
+      "name": "circle"
     },
     {
       "id": "text-11",
       "component": "Text",
+      "strong": true,
       "textContent": "GA launch"
     },
     {
@@ -202,6 +218,7 @@
     {
       "id": "row-5",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "circle",

package/chunks/real-time-metrics-dashboard.json

@@ -25,7 +25,7 @@
       "progress"
     ]
   },
-  "captured_at": "2026-05-14T01:42:11.604Z",
+  "captured_at": "2026-05-14T03:55:24.388Z",
   "template": [
     {
       "id": "text",
@@ -35,7 +35,9 @@
     },
     {
       "id": "tag",
-      "component": "Tag"
+      "component": "Tag",
+      "size": "sm",
+      "text": "● Live"
     },
     {
       "id": "text-2",
@@ -45,6 +47,7 @@
     {
       "id": "row",
       "component": "Row",
+      "align": "center",
       "gap": "3",
       "children": [
         "text",
@@ -67,6 +70,7 @@
     {
       "id": "text-4",
       "component": "Text",
+      "strong": true,
       "textContent": "1,284"
     },
     {
@@ -106,6 +110,7 @@
     {
       "id": "text-6",
       "component": "Text",
+      "strong": true,
       "textContent": "42ms"
     },
     {
@@ -145,11 +150,13 @@
     {
       "id": "text-8",
       "component": "Text",
+      "strong": true,
       "textContent": "96%"
     },
     {
       "id": "progress",
-      "component": "Progress"
+      "component": "Progress",
+      "value": 96
     },
     {
       "id": "column-4",
@@ -190,6 +197,7 @@
     {
       "id": "text-10",
       "component": "Text",
+      "strong": true,
       "textContent": "8,419"
     },
     {
@@ -217,6 +225,7 @@
     {
       "id": "grid",
       "component": "Grid",
+      "columns": "4",
       "gap": "3",
       "children": [
         "card",
@@ -228,6 +237,7 @@
     {
       "id": "text-11",
       "component": "Text",
+      "strong": true,
       "textContent": "Throughput (last 60s)"
     },
     {
@@ -239,7 +249,8 @@
     },
     {
       "id": "chart",
-      "component": "Chart"
+      "component": "Chart",
+      "type": "line"
     },
     {
       "id": "section-5",