{
  "name": "split-pane-editor-preview",
  "kind": "block",
  "primary": "section",
  "page": "/catalog/ui-patterns/app/editor-preview-pane/editor-preview-pane.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<section\n  style=\"display:flex; flex-direction:column; height:100%;\">\n  <header>\n    <text-ui strong size=\"sm\">Preview</text-ui>\n  </header>\n  <section style=\"flex:1; padding:8px; background:var(--a-bg-1);\">\n    <text-ui color=\"subtle\">Live preview will appear here</text-ui>\n  </section>\n</section>",
  "source": "catalog/ui-patterns/app/editor-preview-pane/editor-preview-pane.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Preview pane rendering the editor's output with toolbar (refresh, viewport, share) and live content area.",
    "keywords": [
      "preview",
      "render",
      "editor",
      "pane",
      "output",
      "live-preview",
      "iframe",
      "split-pane",
      "split",
      "pane",
      "two-column",
      "aside",
      "content",
      "editor",
      "preview",
      "split-view"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "size": "sm",
      "strong": true,
      "textContent": "Preview"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Live preview will appear here"
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "text-2"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "children": [
        "header",
        "section"
      ]
    }
  ]
}