{
  "name": "playground-gen-ui",
  "kind": "block",
  "primary": "div",
  "page": "/apps/genui/app/gen-ui/gen-ui.contents.html",
  "slots": [],
  "nested": [],
  "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            <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",
    "description": "Gen-UI playground — A2UI generation interface with prompt input and output preview.",
    "keywords": [
      "playground",
      "gen",
      "ui",
      "a2ui",
      "generate",
      "prompt",
      "output",
      "preview"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "empty-state",
      "component": "EmptyState",
      "description": "Describe a UI and watch it render live.",
      "heading": "AdiaUI Generator",
      "icon": "magic-wand"
    },
    {
      "id": "chat-empty",
      "component": "ChatEmpty",
      "children": [
        "empty-state"
      ]
    },
    {
      "id": "chat-thread",
      "component": "ChatThread",
      "children": [
        "chat-empty"
      ]
    },
    {
      "id": "chat-input",
      "component": "ChatInput",
      "placeholder": "Describe a UI..."
    },
    {
      "id": "chat-composer",
      "component": "ChatComposer",
      "children": [
        "chat-input"
      ]
    },
    {
      "id": "gen-chat",
      "component": "ChatShell",
      "children": [
        "chat-thread",
        "chat-composer"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "gen-chat"
      ]
    },
    {
      "id": "chat-pane",
      "component": "Panel",
      "resizable": true,
      "children": [
        "section"
      ]
    },
    {
      "id": "btn-toggle-view",
      "component": "Button",
      "icon": "chat-circle",
      "size": "sm",
      "text": "Chat",
      "variant": "ghost"
    },
    {
      "id": "layout",
      "component": "Icon",
      "name": "layout"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Canvas"
    },
    {
      "id": "validation-badge",
      "component": "Badge",
      "size": "sm",
      "variant": "default"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "btn-toggle-view",
        "layout",
        "text",
        "validation-badge"
      ]
    },
    {
      "id": "btn-back",
      "component": "Button",
      "disabled": true,
      "icon": "arrow-left",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "btn-forward",
      "component": "Button",
      "disabled": true,
      "icon": "arrow-right",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "btn-clear",
      "component": "Button",
      "icon": "trash",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "btn-code",
      "component": "Button",
      "icon": "code",
      "size": "sm",
      "variant": "ghost"
    },
    {
      "id": "btn-gallery",
      "component": "Button",
      "icon": "squares-four",
      "size": "sm",
      "text": "Gallery",
      "variant": "ghost"
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "1",
      "children": [
        "btn-back",
        "btn-forward",
        "btn-clear",
        "btn-code",
        "btn-gallery"
      ]
    },
    {
      "id": "canvas-toolbar",
      "component": "Column",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "canvas",
      "component": "Column"
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "canvas"
      ]
    },
    {
      "id": "code-view",
      "component": "Code",
      "language": "json"
    },
    {
      "id": "code-panel",
      "component": "Footer",
      "children": [
        "code-view"
      ]
    },
    {
      "id": "canvas-panel",
      "component": "Column",
      "children": [
        "canvas-toolbar",
        "section-2",
        "code-panel"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "data-view": "chat",
      "children": [
        "chat-pane",
        "canvas-panel"
      ]
    }
  ]
}