{
  "name": "DemoStage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DemoStage.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "The visual area where a live component renders, inside a `.demo` wrapper.\nWraps `<div class=\"demo\"><div class=\"demo-stage plain|center|vert\">…</div></div>`\n— same shape the chapter HTML uses today.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "DemoStage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DemoStageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { DemoStage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "variant",
      "optional": true,
      "type": "\"plain\" | \"center\" | \"vert\"",
      "doc": "Layout variant — controls padding + alignment of the rendered example. - `\"plain\"` (default) — paper background, normal padding. - `\"center\"` — flex-center the live preview horizontally. - `\"vert\"` — stack children vertically (column flex)."
    },
    {
      "name": "children",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "card-body",
    "card-title",
    "demo",
    "demo-stage"
  ],
  "examples": {
    "react": "<DemoStage variant=\"center\">\n  <Card>\n    <h3 className=\"card-title\">Card title</h3>\n    <p className=\"card-body\">…</p>\n  </Card>\n</DemoStage>",
    "html": null,
    "css": ".card-body { font: 400 14px/1.55 var(--f-body); color: var(--fg-soft); margin: 0; }\n\n.card-title { font: 600 16px/1.3 var(--f-display); color: var(--fg); margin: 0; letter-spacing: -0.005em; }\n\n.demo {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  overflow: hidden;\n  background: var(--bg-paper);\n}\n\n.demo-stage {\n  padding: var(--s-7);\n  display: flex; flex-wrap: wrap;\n  gap: var(--s-5);\n  align-items: flex-start;\n  background:\n    linear-gradient(var(--bg-paper), var(--bg-paper)),\n    repeating-linear-gradient(\n      45deg,\n      transparent 0 6px,\n      var(--stage-hash) 6px 7px\n    );\n  background-blend-mode: normal;\n}"
  }
}