{
  "name": "playground-css-channel",
  "kind": "block",
  "primary": "div",
  "page": "/apps/genui/app/css-channel-demo/css-channel-demo.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div id=\"pg-shell\">\n  <div id=\"pg-toolbar\">\n    <row-ui gap=\"2\" align=\"center\">\n      <icon-ui name=\"palette\" color=\"muted\"></icon-ui>\n      <text-ui strong>CSS Channel</text-ui>\n      <badge-ui id=\"pg-channel-badge\" text=\"Phase 1\" variant=\"accent\" size=\"sm\"></badge-ui>\n    </row-ui>\n    <row-ui gap=\"2\">\n      <button-ui id=\"pg-btn-apply\"   variant=\"primary\" size=\"sm\" icon=\"paint-brush\" text=\"Apply theme\"></button-ui>\n      <button-ui id=\"pg-btn-remove\"  variant=\"outline\" size=\"sm\" icon=\"trash\"       text=\"Remove theme\"></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)\">Per-surface CSS via the A2UI channel</h1>\n      <p style=\"margin: 0; color: var(--a-fg-muted); font-size: var(--a-ui-sm); line-height: 1.5\">\n        Two adjacent surfaces, both built from the same A2UI tree. The <strong>left</strong> tile receives an\n        <code>updateStyles</code> message that overrides <code>--a-primary</code> (button background),\n        <code>--a-accent</code>, and <code>--a-radius-md</code>; the <strong>right</strong> tile receives no styles.\n        They share a host DOM yet stay visually isolated because the renderer wraps user CSS in\n        <code>@scope ([data-a2ui-surface=\"…\"])</code> — note how the left \"Subscribe\" button is purple while the\n        right one keeps the default blue. Hit <em>Apply theme</em> to re-fire the channel; <em>Remove theme</em> drops\n        the stylesheet from <code>document.adoptedStyleSheets</code> and the left tile reverts to defaults. Open\n        DevTools' Elements pane and inspect <code>document.adoptedStyleSheets</code> to see the live constructable\n        stylesheet.\n      </p>\n      <p style=\"margin: var(--a-space-2) 0 0 0; color: var(--a-fg-muted); font-size: var(--a-ui-xs); line-height: 1.5\">\n        <strong>Token-chain note:</strong> some component visuals (e.g. card background, card border-radius) read from\n        component-internal tokens like <code>--card-bg</code> / <code>--card-radius</code> which are declared inside\n        the component's own <code>@scope</code> and shadow any surface-root override of the same name. To affect those\n        surfaces via the channel, override the <em>upstream</em> token (e.g. <code>--a-canvas-1</code>) or use a\n        higher-specificity direct selector. The button override above succeeds because <code>--a-primary</code>\n        cascades cleanly through the inheritance chain into <code>--button-bg-primary</code>.\n      </p>\n    </div>\n\n    <div id=\"pg-grid\">\n      <div class=\"pg-tile\">\n        <h3>Themed via <code>updateStyles</code></h3>\n        <div id=\"themed-host\" class=\"pg-host\" data-themed></div>\n      </div>\n      <div class=\"pg-tile\">\n        <h3>Unthemed (control)</h3>\n        <div id=\"plain-host\" class=\"pg-host\"></div>\n      </div>\n    </div>\n\n    <div id=\"pg-status\">\n      <div data-pg-status-row><strong>Themed surface id:</strong> <code id=\"pg-status-themed-id\">A</code></div>\n      <div data-pg-status-row><strong>Adopted stylesheets:</strong> <span id=\"pg-status-adopted\">0</span></div>\n      <div data-pg-status-row><strong>Last event:</strong> <span id=\"pg-status-last-event\">—</span></div>\n      <div data-pg-status-row><strong>Validation warnings:</strong> <span id=\"pg-status-warnings\">—</span></div>\n    </div>\n\n    <details id=\"pg-code-panel\">\n      <summary>Show the wiring (createSurface + updateComponents + updateStyles)</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/css-channel-demo/css-channel-demo.contents.html",
  "metadata": {
    "domain": "agent",
    "description": "CSS channel playground — per-surface scoped CSS via updateStyles / removeStyles, demonstrated across two adjacent surfaces.",
    "keywords": [
      "playground",
      "css",
      "channel",
      "updateStyles",
      "removeStyles",
      "theme",
      "override",
      "scope",
      "containment",
      "a2ui",
      "parallel-channels"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "palette",
      "component": "Icon",
      "name": "palette"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "CSS Channel"
    },
    {
      "id": "pg-channel-badge",
      "component": "Badge",
      "size": "sm",
      "text": "Phase 1",
      "variant": "accent"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "palette",
        "text",
        "pg-channel-badge"
      ]
    },
    {
      "id": "pg-btn-apply",
      "component": "Button",
      "icon": "paint-brush",
      "size": "sm",
      "text": "Apply theme",
      "variant": "primary"
    },
    {
      "id": "pg-btn-remove",
      "component": "Button",
      "icon": "trash",
      "size": "sm",
      "text": "Remove theme",
      "variant": "outline"
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "book-open",
      "size": "sm",
      "text": "Docs",
      "variant": "ghost"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "/site/getting-started/wiring",
      "target": "_top",
      "children": [
        "button"
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "children": [
        "pg-btn-apply",
        "pg-btn-remove",
        "link"
      ]
    },
    {
      "id": "pg-toolbar",
      "component": "Column",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "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 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-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": "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",
      "component": "Column",
      "children": [
        "text-2",
        "text-3",
        "text-8"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "pg-intro",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "code-14",
      "component": "Code",
      "textContent": "updateStyles"
    },
    {
      "id": "text-11",
      "component": "Text",
      "variant": "heading",
      "textContent": "Themed via",
      "children": [
        "code-14"
      ]
    },
    {
      "id": "themed-host",
      "component": "Column",
      "data-themed": ""
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "text-11",
        "themed-host"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section-2"
      ]
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "heading",
      "textContent": "Unthemed (control)"
    },
    {
      "id": "plain-host",
      "component": "Column"
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "text-12",
        "plain-host"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "section-3"
      ]
    },
    {
      "id": "pg-grid",
      "component": "Column",
      "children": [
        "card",
        "card-2"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "variant": "body",
      "textContent": "Themed surface id:"
    },
    {
      "id": "pg-status-themed-id",
      "component": "Code",
      "textContent": "A"
    },
    {
      "id": "column-4",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-13",
        "pg-status-themed-id"
      ]
    },
    {
      "id": "text-14",
      "component": "Text",
      "variant": "body",
      "textContent": "Adopted stylesheets:"
    },
    {
      "id": "pg-status-adopted",
      "component": "Text",
      "variant": "body",
      "textContent": "0"
    },
    {
      "id": "column-5",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-14",
        "pg-status-adopted"
      ]
    },
    {
      "id": "text-15",
      "component": "Text",
      "variant": "body",
      "textContent": "Last event:"
    },
    {
      "id": "pg-status-last-event",
      "component": "Text",
      "variant": "body",
      "textContent": "—"
    },
    {
      "id": "column-6",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-15",
        "pg-status-last-event"
      ]
    },
    {
      "id": "text-16",
      "component": "Text",
      "variant": "body",
      "textContent": "Validation warnings:"
    },
    {
      "id": "pg-status-warnings",
      "component": "Text",
      "variant": "body",
      "textContent": "—"
    },
    {
      "id": "column-7",
      "component": "Column",
      "data-pg-status-row": "",
      "children": [
        "text-16",
        "pg-status-warnings"
      ]
    },
    {
      "id": "pg-status",
      "component": "Column",
      "children": [
        "column-4",
        "column-5",
        "column-6",
        "column-7"
      ]
    },
    {
      "id": "text-17",
      "component": "Text",
      "variant": "subsection",
      "textContent": "Show the wiring (createSurface + updateComponents + updateStyles)"
    },
    {
      "id": "pg-code-block",
      "component": "Code",
      "language": "javascript"
    },
    {
      "id": "pg-code-panel",
      "component": "Accordion",
      "children": [
        "text-17",
        "pg-code-block"
      ]
    },
    {
      "id": "pg-content",
      "component": "Column",
      "children": [
        "pg-intro",
        "pg-grid",
        "pg-status",
        "pg-code-panel"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "children": [
        "pg-toolbar",
        "pg-content"
      ]
    }
  ]
}