@adia-ai/a2ui-corpus 0.6.41 → 0.6.43

package/chunks/playground-app-shell.json

@@ -24,7 +24,7 @@
       "topbar"
     ]
   },
-  "captured_at": "2026-05-26T04:00:28.271Z",
+  "captured_at": "2026-05-27T23:29:53.307Z",
   "template": [
     {
       "id": "workspace-select",
@@ -36,24 +36,36 @@
     {
       "id": "admin-topbar",
       "component": "AdminTopbar",
+      "slot": "header",
       "children": [
         "workspace-select"
       ]
     },
+    {
+      "id": "magnifying-glass",
+      "component": "Icon",
+      "name": "magnifying-glass"
+    },
     {
       "id": "text",
       "component": "Text",
-      "variant": "body"
+      "variant": "body",
+      "slot": "icon",
+      "children": [
+        "magnifying-glass"
+      ]
     },
     {
       "id": "text-2",
       "component": "Text",
       "variant": "body",
+      "slot": "text",
       "textContent": "Search"
     },
     {
       "id": "kbd",
       "component": "Kbd",
+      "slot": "trailing",
       "textContent": "⌘K"
     },
     {
@@ -154,6 +166,7 @@
     {
       "id": "admin-statusbar",
       "component": "AdminStatusbar",
+      "slot": "footer",
       "children": [
         "user-select"
       ]
@@ -166,6 +179,7 @@
     {
       "id": "sidebar",
       "component": "Sidebar",
+      "slot": "leading",
       "collapsible": true,
       "resizable": true,
       "children": [
@@ -212,11 +226,40 @@
         "text-4"
       ]
     },
+    {
+      "id": "button-2",
+      "component": "Button",
+      "slot": "trigger",
+      "icon": "palette",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "theme-panel",
+      "component": "ThemePanel",
+      "slot": "content",
+      "parametric": true,
+      "presets": true,
+      "scheme-toggle": true
+    },
+    {
+      "id": "theme-popover",
+      "component": "Popover",
+      "placement": "bottom-end",
+      "children": [
+        "button-2",
+        "theme-panel"
+      ]
+    },
     {
       "id": "text-5",
       "component": "Text",
       "variant": "body",
-      "size": "sm"
+      "slot": "action",
+      "size": "sm",
+      "children": [
+        "theme-popover"
+      ]
     },
     {
       "id": "admin-topbar-2",
@@ -279,7 +322,7 @@
       "textContent": "Dashboard"
     },
     {
-      "id": "button-2",
+      "id": "button-3",
       "component": "Button",
       "size": "sm",
       "text": "Export",
@@ -290,7 +333,7 @@
       "component": "Column",
       "data-actions": "",
       "children": [
-        "button-2"
+        "button-3"
       ]
     },
     {
@@ -376,18 +419,21 @@
       "id": "text-9",
       "component": "Text",
       "variant": "body",
+      "slot": "heading",
       "textContent": "AdiaUI App Shell"
     },
     {
       "id": "text-10",
       "component": "Text",
       "variant": "body",
+      "slot": "description",
       "textContent": "Playground demo"
     },
     {
       "id": "text-11",
       "component": "Text",
       "variant": "body",
+      "slot": "action",
       "size": "sm",
       "textContent": "v0.1.0"
     },

package/chunks/playground-chat.json

@@ -23,24 +23,190 @@
       "agent"
     ]
   },
-  "captured_at": "2026-05-26T04:00:28.271Z",
+  "captured_at": "2026-05-27T23:29:53.307Z",
   "template": [
     {
       "id": "text",
       "component": "Text",
       "variant": "body",
+      "slot": "name",
       "textContent": "Factory Chat"
     },
     {
       "id": "chat-status",
-      "component": "ChatStatus"
+      "component": "ChatStatus",
+      "slot": "status"
+    },
+    {
+      "id": "theme-toggle",
+      "component": "Button",
+      "icon": "moon",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "slot": "trigger",
+      "icon": "gear",
+      "size": "sm",
+      "variant": "ghost"
+    },
+    {
+      "id": "text-3",
+      "component": "Text",
+      "variant": "label",
+      "textContent": "Theme"
+    },
+    {
+      "id": "theme-default",
+      "component": "Button",
+      "size": "sm",
+      "text": "Default",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-ocean",
+      "component": "Button",
+      "size": "sm",
+      "text": "Ocean",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-forest",
+      "component": "Button",
+      "size": "sm",
+      "text": "Forest",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-sunset",
+      "component": "Button",
+      "size": "sm",
+      "text": "Sunset",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-lavender",
+      "component": "Button",
+      "size": "sm",
+      "text": "Lavender",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-rose",
+      "component": "Button",
+      "size": "sm",
+      "text": "Rose",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-slate",
+      "component": "Button",
+      "size": "sm",
+      "text": "Slate",
+      "variant": "outline"
+    },
+    {
+      "id": "theme-midnight",
+      "component": "Button",
+      "size": "sm",
+      "text": "Midnight",
+      "variant": "outline"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "md",
+      "wrap": true,
+      "children": [
+        "theme-default",
+        "theme-ocean",
+        "theme-forest",
+        "theme-sunset",
+        "theme-lavender",
+        "theme-rose",
+        "theme-slate",
+        "theme-midnight"
+      ]
+    },
+    {
+      "id": "divider",
+      "component": "Divider"
+    },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "variant": "label",
+      "textContent": "Parametric"
+    },
+    {
+      "id": "param-density",
+      "component": "Slider",
+      "max": 1.5,
+      "min": 0.5,
+      "step": 0.05,
+      "suffix": "×",
+      "value": 1
+    },
+    {
+      "id": "field",
+      "component": "Field",
+      "label": "Density",
+      "children": [
+        "param-density"
+      ]
+    },
+    {
+      "id": "param-radius",
+      "component": "Slider",
+      "max": 2,
+      "min": 0,
+      "step": 0.1,
+      "suffix": "×",
+      "value": 1
+    },
+    {
+      "id": "field-2",
+      "component": "Field",
+      "label": "Radius",
+      "children": [
+        "param-radius"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "md",
+      "slot": "content",
+      "children": [
+        "text-3",
+        "row",
+        "divider",
+        "text-4",
+        "field",
+        "field-2"
+      ]
+    },
+    {
+      "id": "theme-popover",
+      "component": "Popover",
+      "placement": "bottom-end",
+      "children": [
+        "button",
+        "column"
+      ]
     },
     {
       "id": "text-2",
       "component": "Text",
       "variant": "body",
+      "slot": "action",
       "size": "sm",
-      "textContent": "Theme Parametric"
+      "children": [
+        "theme-toggle",
+        "theme-popover"
+      ]
     },
     {
       "id": "chat-header",

package/chunks/playground-construct-canvas.json

@@ -21,7 +21,7 @@
       "editor"
     ]
   },
-  "captured_at": "2026-05-26T04:00:28.271Z",
+  "captured_at": "2026-05-27T23:29:53.307Z",
   "template": [
     {
       "id": "canvas-host",

package/chunks/playground-css-channel.json

@@ -25,7 +25,7 @@
       "parallel-channels"
     ]
   },
-  "captured_at": "2026-05-26T04:00:28.271Z",
+  "captured_at": "2026-05-27T23:29:53.307Z",
   "template": [
     {
       "id": "palette",
@@ -113,17 +113,141 @@
       "variant": "display",
       "textContent": "Per-surface CSS via the A2UI channel"
     },
+    {
+      "id": "text-4",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "left"
+    },
+    {
+      "id": "code",
+      "component": "Code",
+      "textContent": "updateStyles"
+    },
+    {
+      "id": "code-2",
+      "component": "Code",
+      "textContent": "--a-primary"
+    },
+    {
+      "id": "code-3",
+      "component": "Code",
+      "textContent": "--a-accent"
+    },
+    {
+      "id": "code-4",
+      "component": "Code",
+      "textContent": "--a-radius-md"
+    },
+    {
+      "id": "text-5",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "right"
+    },
+    {
+      "id": "code-5",
+      "component": "Code",
+      "textContent": "@scope ([data-a2ui-surface=\"…\"])"
+    },
+    {
+      "id": "text-6",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Apply theme"
+    },
+    {
+      "id": "text-7",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Remove theme"
+    },
+    {
+      "id": "code-6",
+      "component": "Code",
+      "textContent": "document.adoptedStyleSheets"
+    },
+    {
+      "id": "code-7",
+      "component": "Code",
+      "textContent": "document.adoptedStyleSheets"
+    },
     {
       "id": "text-3",
       "component": "Text",
       "variant": "body",
-      "textContent": "Two adjacent surfaces, both built from the same A2UI tree. The left tile receives an updateStyles message that overrides --a-primary (button background), --a-accent , and --a-radius-md ; the right tile receives no styles. They share a host DOM yet stay visually isolated because the renderer wraps user CSS in @scope ([data-a2ui-surface=\"…\"]) — note how the left \"Subscribe\" button is purple while the right one keeps the default blue. Hit Apply theme to re-fire the channel; Remove theme drops the stylesheet from document.adoptedStyleSheets and the left tile reverts to defaults. Open DevTools' Elements pane and inspect document.adoptedStyleSheets to see the live constructable stylesheet."
+      "textContent": "Two adjacent surfaces, both built from the same A2UI tree. The tile receives an message that overrides (button background), , and ; the tile receives no styles. They share a host DOM yet stay visually isolated because the renderer wraps user CSS in — note how the left \"Subscribe\" button is purple while the right one keeps the default blue. Hit to re-fire the channel; drops the stylesheet from and the left tile reverts to defaults. Open DevTools' Elements pane and inspect to see the live constructable stylesheet.",
+      "children": [
+        "text-4",
+        "code",
+        "code-2",
+        "code-3",
+        "code-4",
+        "text-5",
+        "code-5",
+        "text-6",
+        "text-7",
+        "code-6",
+        "code-7"
+      ]
     },
     {
-      "id": "text-4",
+      "id": "text-9",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Token-chain note:"
+    },
+    {
+      "id": "code-8",
+      "component": "Code",
+      "textContent": "--card-bg"
+    },
+    {
+      "id": "code-9",
+      "component": "Code",
+      "textContent": "--card-radius"
+    },
+    {
+      "id": "code-10",
+      "component": "Code",
+      "textContent": "@scope"
+    },
+    {
+      "id": "text-10",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "upstream"
+    },
+    {
+      "id": "code-11",
+      "component": "Code",
+      "textContent": "--a-canvas-1"
+    },
+    {
+      "id": "code-12",
+      "component": "Code",
+      "textContent": "--a-primary"
+    },
+    {
+      "id": "code-13",
+      "component": "Code",
+      "textContent": "--button-bg-primary"
+    },
+    {
+      "id": "text-8",
       "component": "Text",
       "variant": "body",
-      "textContent": "Token-chain note: some component visuals (e.g. card background, card border-radius) read from component-internal tokens like --card-bg / --card-radius which are declared inside the component's own @scope and shadow any surface-root override of the same name. To affect those surfaces via the channel, override the upstream token (e.g. --a-canvas-1 ) or use a higher-specificity direct selector. The button override above succeeds because --a-primary cascades cleanly through the inheritance chain into --button-bg-primary ."
+      "textContent": "some component visuals (e.g. card background, card border-radius) read from component-internal tokens like / which are declared inside the component's own and shadow any surface-root override of the same name. To affect those surfaces via the channel, override the token (e.g. ) or use a higher-specificity direct selector. The button override above succeeds because cascades cleanly through the inheritance chain into .",
+      "children": [
+        "text-9",
+        "code-8",
+        "code-9",
+        "code-10",
+        "text-10",
+        "code-11",
+        "code-12",
+        "code-13"
+      ]
     },
     {
       "id": "column",
@@ -131,7 +255,7 @@
       "children": [
         "text-2",
         "text-3",
-        "text-4"
+        "text-8"
       ]
     },
     {
@@ -149,10 +273,18 @@
       ]
     },
     {
-      "id": "text-5",
+      "id": "code-14",
+      "component": "Code",
+      "textContent": "updateStyles"
+    },
+    {
+      "id": "text-11",
       "component": "Text",
       "variant": "heading",
-      "textContent": "Themed via updateStyles"
+      "textContent": "Themed via",
+      "children": [
+        "code-14"
+      ]
     },
     {
       "id": "themed-host",
@@ -163,7 +295,7 @@
       "id": "column-2",
       "component": "Column",
       "children": [
-        "text-5",
+        "text-11",
         "themed-host"
       ]
     },
@@ -182,7 +314,7 @@
       ]
     },
     {
-      "id": "text-6",
+      "id": "text-12",
       "component": "Text",
       "variant": "heading",
       "textContent": "Unthemed (control)"
@@ -195,7 +327,7 @@
       "id": "column-3",
       "component": "Column",
       "children": [
-        "text-6",
+        "text-12",
         "plain-host"
       ]
     },
@@ -222,7 +354,7 @@
       ]
     },
     {
-      "id": "text-7",
+      "id": "text-13",
       "component": "Text",
       "variant": "body",
       "textContent": "Themed surface id:"
@@ -237,12 +369,12 @@
       "component": "Column",
       "data-pg-status-row": "",
       "children": [
-        "text-7",
+        "text-13",
         "pg-status-themed-id"
       ]
     },
     {
-      "id": "text-8",
+      "id": "text-14",
       "component": "Text",
       "variant": "body",
       "textContent": "Adopted stylesheets:"
@@ -258,12 +390,12 @@
       "component": "Column",
       "data-pg-status-row": "",
       "children": [
-        "text-8",
+        "text-14",
         "pg-status-adopted"
       ]
     },
     {
-      "id": "text-9",
+      "id": "text-15",
       "component": "Text",
       "variant": "body",
       "textContent": "Last event:"
@@ -279,12 +411,12 @@
       "component": "Column",
       "data-pg-status-row": "",
       "children": [
-        "text-9",
+        "text-15",
         "pg-status-last-event"
       ]
     },
     {
-      "id": "text-10",
+      "id": "text-16",
       "component": "Text",
       "variant": "body",
       "textContent": "Validation warnings:"
@@ -300,7 +432,7 @@
       "component": "Column",
       "data-pg-status-row": "",
       "children": [
-        "text-10",
+        "text-16",
         "pg-status-warnings"
       ]
     },
@@ -315,7 +447,7 @@
       ]
     },
     {
-      "id": "text-11",
+      "id": "text-17",
       "component": "Text",
       "variant": "subsection",
       "textContent": "Show the wiring (createSurface + updateComponents + updateStyles)"
@@ -329,7 +461,7 @@
       "id": "pg-code-panel",
       "component": "Accordion",
       "children": [
-        "text-11",
+        "text-17",
         "pg-code-block"
       ]
     },

package/chunks/playground-gen-ui.json

@@ -8,7 +8,7 @@
   "attrs": {
     "data-view": "chat"
   },
-  "html": "<div id=\"gen-ui-shell\" data-view=\"chat\">\n      <!-- Chat pane (resizable via pane-ui) -->\n      <pane-ui id=\"chat-pane\" resizable min-width=\"280\">\n        <section>\n          <chat-shell id=\"gen-chat\">\n            <chat-thread>\n              <chat-empty>\n                <empty-state-ui icon=\"magic-wand\" heading=\"AdiaUI Generator\" description=\"Describe a UI and watch it render live.\">\n                </empty-state-ui>\n              </chat-empty>\n            </chat-thread>\n            <chat-composer>\n              <chat-input-ui placeholder=\"Describe a UI...\"></chat-input-ui>\n            </chat-composer>\n          </chat-shell>\n        </section>\n      </pane-ui>\n\n      <!-- Canvas panel (plain div — no collapse behavior) -->\n      <div id=\"canvas-panel\">\n        <div id=\"canvas-toolbar\">\n          <row-ui gap=\"2\" align=\"center\">\n            <button-ui id=\"btn-toggle-view\" text=\"Chat\" variant=\"ghost\" size=\"sm\" icon=\"chat-circle\"></button-ui>\n            <icon-ui name=\"layout\" color=\"muted\"></icon-ui>\n            <text-ui strong>Canvas</text-ui>\n            <badge-ui id=\"validation-badge\" text=\"\" variant=\"default\" size=\"sm\" hidden></badge-ui>\n          </row-ui>\n          <row-ui gap=\"1\">\n            <button-ui id=\"btn-back\" variant=\"ghost\" size=\"sm\" icon=\"arrow-left\" disabled></button-ui>\n            <button-ui id=\"btn-forward\" variant=\"ghost\" size=\"sm\" icon=\"arrow-right\" disabled></button-ui>\n            <button-ui id=\"btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\"></button-ui>\n            <button-ui id=\"btn-code\" variant=\"ghost\" size=\"sm\" icon=\"code\"></button-ui>\n          </row-ui>\n        </div>\n        <section>\n          <canvas-ui id=\"canvas\"></canvas-ui>\n        </section>\n        <footer id=\"code-panel\" hidden>\n          <code-ui id=\"code-view\" language=\"json\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n        </footer>\n      </div>\n    </div>",
+  "html": "<div id=\"gen-ui-shell\" data-view=\"chat\">\n      <!-- Chat pane (resizable via pane-ui) -->\n      <pane-ui id=\"chat-pane\" resizable min-width=\"280\">\n        <section>\n          <chat-shell id=\"gen-chat\">\n            <chat-thread>\n              <chat-empty>\n                <empty-state-ui icon=\"magic-wand\" heading=\"AdiaUI Generator\" description=\"Describe a UI and watch it render live.\">\n                </empty-state-ui>\n              </chat-empty>\n            </chat-thread>\n            <chat-composer>\n              <chat-input-ui placeholder=\"Describe a UI...\"></chat-input-ui>\n            </chat-composer>\n          </chat-shell>\n        </section>\n      </pane-ui>\n\n      <!-- Canvas panel (plain div — no collapse behavior) -->\n      <div id=\"canvas-panel\">\n        <div id=\"canvas-toolbar\">\n          <row-ui gap=\"2\" align=\"center\">\n            <button-ui id=\"btn-toggle-view\" text=\"Chat\" variant=\"ghost\" size=\"sm\" icon=\"chat-circle\"></button-ui>\n            <icon-ui name=\"layout\" color=\"muted\"></icon-ui>\n            <text-ui strong>Canvas</text-ui>\n            <badge-ui id=\"validation-badge\" text=\"\" variant=\"default\" size=\"sm\" hidden></badge-ui>\n          </row-ui>\n          <row-ui gap=\"1\">\n            <button-ui id=\"btn-back\" variant=\"ghost\" size=\"sm\" icon=\"arrow-left\" disabled></button-ui>\n            <button-ui id=\"btn-forward\" variant=\"ghost\" size=\"sm\" icon=\"arrow-right\" disabled></button-ui>\n            <button-ui id=\"btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\"></button-ui>\n            <button-ui id=\"btn-code\" variant=\"ghost\" size=\"sm\" icon=\"code\"></button-ui>\n            <button-ui id=\"btn-gallery\" variant=\"ghost\" size=\"sm\" icon=\"squares-four\" text=\"Gallery\" onclick=\"window.open('/apps/genui/app/gen-ui-gallery/gen-ui-gallery.html','_blank')\"></button-ui>\n          </row-ui>\n        </div>\n        <section>\n          <canvas-ui id=\"canvas\"></canvas-ui>\n        </section>\n        <footer id=\"code-panel\" hidden>\n          <code-ui id=\"code-view\" language=\"json\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n        </footer>\n      </div>\n    </div>",
   "source": "apps/genui/app/gen-ui/gen-ui.contents.html",
   "metadata": {
     "domain": "layout",
@@ -24,7 +24,7 @@
       "preview"
     ]
   },
-  "captured_at": "2026-05-26T04:00:28.271Z",
+  "captured_at": "2026-05-27T23:29:53.307Z",
   "template": [
     {
       "id": "empty-state",
@@ -149,6 +149,14 @@
       "size": "sm",
       "variant": "ghost"
     },
+    {
+      "id": "btn-gallery",
+      "component": "Button",
+      "icon": "squares-four",
+      "size": "sm",
+      "text": "Gallery",
+      "variant": "ghost"
+    },
     {
       "id": "row-2",
       "component": "Row",
@@ -157,7 +165,8 @@
         "btn-back",
         "btn-forward",
         "btn-clear",
-        "btn-code"
+        "btn-code",
+        "btn-gallery"
       ]
     },
     {