{
  "name": "playground-a2ui",
  "kind": "block",
  "primary": "div",
  "page": "/apps/genui/app/a2ui/a2ui.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<div id=\"playground-shell\">\n      <!-- Toolbar -->\n      <div id=\"pg-toolbar\">\n        <row-ui gap=\"2\" align=\"center\">\n          <icon-ui name=\"layout\" color=\"muted\"></icon-ui>\n          <text-ui strong>Playground</text-ui>\n          <badge-ui id=\"pg-format-badge\" text=\"\" size=\"sm\" hidden></badge-ui>\n        </row-ui>\n        <row-ui gap=\"1\">\n          <button-ui id=\"pg-btn-example\" text=\"Load Example\" variant=\"ghost\" size=\"sm\" icon=\"lightning\"></button-ui>\n          <divider-ui vertical></divider-ui>\n          <button-ui id=\"pg-btn-clear\" variant=\"ghost\" size=\"sm\" icon=\"trash\" disabled></button-ui>\n          <button-ui id=\"pg-btn-copy\" variant=\"ghost\" size=\"sm\" icon=\"copy\" disabled></button-ui>\n          <button-ui id=\"pg-btn-code\" variant=\"ghost\" size=\"sm\" icon=\"code\" disabled></button-ui>\n        </row-ui>\n      </div>\n\n      <!-- Canvas + drop zone -->\n      <div id=\"pg-canvas-wrap\">\n        <div id=\"pg-drop-overlay\">\n          <col-ui gap=\"2\" align=\"center\">\n            <icon-ui name=\"upload\" size=\"32\" color=\"primary\"></icon-ui>\n            <text-ui weight=\"semibold\" color=\"primary\">Drop A2UI JSON or HTML</text-ui>\n          </col-ui>\n        </div>\n\n        <div id=\"pg-empty\">\n          <empty-state-ui\n            icon=\"code\"\n            heading=\"Paste or drop to render\"\n            description=\"Accepts A2UI JSON, AdiaUI HTML, or plain HTML. Paste from clipboard or drag a file.\"\n          >\n          </empty-state-ui>\n        </div>\n\n        <section>\n          <canvas-ui id=\"pg-canvas\"></canvas-ui>\n        </section>\n\n        <footer id=\"pg-code-panel\" hidden>\n          <code-ui id=\"pg-code-view\" language=\"html\" style=\"font-size: var(--a-ui-sm)\"></code-ui>\n        </footer>\n      </div>\n    </div>",
  "source": "apps/genui/app/a2ui/a2ui.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "A2UI editor playground — full A2UI composition editor interface.",
    "keywords": [
      "playground",
      "a2ui",
      "editor",
      "composition",
      "interface"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "layout",
      "component": "Icon",
      "name": "layout"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Playground"
    },
    {
      "id": "pg-format-badge",
      "component": "Badge",
      "size": "sm"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "layout",
        "text",
        "pg-format-badge"
      ]
    },
    {
      "id": "pg-btn-example",
      "component": "Button",
      "icon": "lightning",
      "size": "sm",
      "text": "Load Example",
      "variant": "ghost"
    },
    {
      "id": "divider",
      "component": "Divider",
      "vertical": true
    },
    {
      "id": "pg-btn-clear",
      "component": "Button",
      "disabled": true,
      "icon": "trash",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "pg-btn-copy",
      "component": "Button",
      "disabled": true,
      "icon": "copy",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "pg-btn-code",
      "component": "Button",
      "disabled": true,
      "icon": "code",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "1",
      "children": [
        "pg-btn-example",
        "divider",
        "pg-btn-clear",
        "pg-btn-copy",
        "pg-btn-code"
      ]
    },
    {
      "id": "pg-toolbar",
      "component": "Column",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "upload",
      "component": "Icon",
      "name": "upload",
      "size": "32"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "primary",
      "weight": "semibold",
      "textContent": "Drop A2UI JSON or HTML"
    },
    {
      "id": "column",
      "component": "Column",
      "align": "center",
      "gap": "2",
      "children": [
        "upload",
        "text-2"
      ]
    },
    {
      "id": "empty-state",
      "component": "EmptyState",
      "description": "Accepts A2UI JSON, AdiaUI HTML, or plain HTML. Paste from clipboard or drag a file.",
      "heading": "Paste or drop to render",
      "icon": "code"
    },
    {
      "id": "pg-canvas",
      "component": "Column"
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "pg-canvas"
      ]
    },
    {
      "id": "pg-code-view",
      "component": "Code",
      "language": "html"
    },
    {
      "id": "pg-code-panel",
      "component": "Footer",
      "children": [
        "pg-code-view"
      ]
    },
    {
      "id": "pg-canvas-wrap",
      "component": "Column",
      "children": [
        "column",
        "empty-state",
        "section",
        "pg-code-panel"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "children": [
        "pg-toolbar",
        "pg-canvas-wrap"
      ]
    }
  ]
}