{
  "name": "playground-render-preview",
  "kind": "block",
  "primary": "div",
  "page": "/apps/genui/app/render-preview/render-preview.contents.html",
  "slots": [],
  "nested": [],
  "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=\"sm\" color=\"muted\" id=\"pg-message-count\">0 messages</text-ui>\n          </header>\n          <textarea data-native-ok=\"code-editor — standalone JSON input, not a form field\"\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\": \"title\", \"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=\"sm\" 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=\"sm\" color=\"muted\" id=\"pg-surface-count\">0 surfaces</text-ui>\n              <text-ui size=\"sm\" 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=\"sm\" color=\"muted\">Message log</text-ui>\n              <text-ui size=\"sm\" 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",
  "metadata": {
    "domain": "layout",
    "description": "Render preview playground — live component preview panel for the gen-UI editor.",
    "keywords": [
      "playground",
      "render",
      "preview",
      "component",
      "live",
      "editor"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "broadcast",
      "component": "Icon",
      "name": "broadcast"
    },
    {
      "id": "text",
      "component": "Text",
      "strong": true,
      "textContent": "Render Preview"
    },
    {
      "id": "pg-status-badge",
      "component": "Badge",
      "size": "sm",
      "text": "ready",
      "variant": "default"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "broadcast",
        "text",
        "pg-status-badge"
      ]
    },
    {
      "id": "pg-example-select",
      "component": "ChoicePicker",
      "placeholder": "Load example…",
      "size": "sm",
      "options": [
        {
          "value": "",
          "label": "Load example…"
        },
        {
          "value": "single-card",
          "label": "Single surface — card + stat"
        },
        {
          "value": "streamed-list",
          "label": "Streamed updates — append items"
        },
        {
          "value": "data-bindings",
          "label": "Data bindings — updateDataModel"
        },
        {
          "value": "multi-surface",
          "label": "Multiple surfaces"
        },
        {
          "value": "unknown-component",
          "label": "Unknown component (graceful fallback)"
        }
      ]
    },
    {
      "id": "divider",
      "component": "Divider",
      "vertical": true
    },
    {
      "id": "pg-btn-step",
      "component": "Button",
      "disabled": true,
      "icon": "skip-forward",
      "size": "sm",
      "text": "Step",
      "variant": "ghost"
    },
    {
      "id": "pg-btn-run",
      "component": "Button",
      "icon": "play",
      "size": "sm",
      "text": "Run all",
      "variant": "primary"
    },
    {
      "id": "pg-btn-clear",
      "component": "Button",
      "icon": "trash",
      "size": "sm",
      "text": "Clear",
      "variant": "ghost"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "pg-example-select",
        "divider",
        "pg-btn-step",
        "pg-btn-run",
        "pg-btn-clear"
      ]
    },
    {
      "id": "pg-toolbar",
      "component": "Column",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "size": "sm",
      "weight": "medium",
      "textContent": "A2UI message stream"
    },
    {
      "id": "pg-message-count",
      "component": "Text",
      "color": "muted",
      "size": "sm",
      "textContent": "0 messages"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text-2",
        "pg-message-count"
      ]
    },
    {
      "id": "pg-input",
      "component": "TextArea",
      "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\": \"title\", \"text\": \"Hello\" }\n  ]}\n]",
      "data-native-ok": "code-editor — standalone JSON input, not a form field"
    },
    {
      "id": "warning",
      "component": "Icon",
      "name": "warning",
      "size": "sm"
    },
    {
      "id": "pg-input-error-text",
      "component": "Text",
      "color": "danger",
      "size": "sm"
    },
    {
      "id": "pg-input-error",
      "component": "Footer",
      "children": [
        "warning",
        "pg-input-error-text"
      ]
    },
    {
      "id": "pg-input-pane",
      "component": "Section",
      "children": [
        "header",
        "pg-input",
        "pg-input-error"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "size": "sm",
      "weight": "medium",
      "textContent": "Rendered output"
    },
    {
      "id": "pg-surface-count",
      "component": "Text",
      "color": "muted",
      "size": "sm",
      "textContent": "0 surfaces"
    },
    {
      "id": "pg-component-count",
      "component": "Text",
      "color": "muted",
      "size": "sm",
      "textContent": "0 components"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "pg-surface-count",
        "pg-component-count"
      ]
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-3",
        "row-3"
      ]
    },
    {
      "id": "pg-surface",
      "component": "Column"
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "muted",
      "size": "sm",
      "textContent": "Message log"
    },
    {
      "id": "pg-log-count",
      "component": "Text",
      "color": "muted",
      "size": "sm",
      "textContent": "0"
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "subsection",
      "children": [
        "text-5",
        "pg-log-count"
      ]
    },
    {
      "id": "pg-log",
      "component": "List"
    },
    {
      "id": "pg-log-panel",
      "component": "Accordion",
      "children": [
        "text-4",
        "pg-log"
      ]
    },
    {
      "id": "pg-output-pane",
      "component": "Section",
      "children": [
        "header-2",
        "pg-surface",
        "pg-log-panel"
      ]
    },
    {
      "id": "pg-body",
      "component": "Column",
      "children": [
        "pg-input-pane",
        "pg-output-pane"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "children": [
        "pg-toolbar",
        "pg-body"
      ]
    }
  ]
}