{
  "name": "WidgetStyleEditor",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetStyleEditor.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WidgetStyleEditor",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetStyleSection",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetStyleEditorProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetStyleSectionProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetStyleEditor } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "form",
      "optional": false,
      "type": "ReactNode",
      "doc": "Form pane content — typically a series of `<WidgetStyleSection>` blocks."
    },
    {
      "name": "preview",
      "optional": false,
      "type": "ReactNode",
      "doc": "Preview pane content — typically `<WidgetThemeProvider>` + widget runtime."
    },
    {
      "name": "header",
      "optional": true,
      "type": "ReactNode",
      "doc": "Header / toolbar above the panes — e.g. appearance title + Save button."
    },
    {
      "name": "sidebar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional sidebar TOC of section anchors (kit `<SavedViewsRail>` works well here)."
    },
    {
      "name": "formWidth",
      "optional": true,
      "type": "number",
      "doc": "Width of the form pane in px. Default `420`. The preview pane fills the remaining space."
    },
    {
      "name": "previewLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Preview-pane title (small mono uppercase eyebrow). Default `\"Live preview\"`."
    },
    {
      "name": "previewActions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot in the preview pane header (device toggle, refresh, etc)."
    }
  ],
  "classesUsed": [
    "title",
    "widget-style-editor",
    "widget-style-editor-body",
    "widget-style-editor-form",
    "widget-style-editor-header",
    "widget-style-editor-preview",
    "widget-style-editor-preview-actions",
    "widget-style-editor-preview-head",
    "widget-style-editor-preview-label",
    "widget-style-editor-preview-stage",
    "widget-style-editor-sidebar",
    "widget-style-section",
    "widget-style-section-body",
    "widget-style-section-caption",
    "widget-style-section-head",
    "widget-style-section-head-text",
    "widget-style-section-meta",
    "widget-style-section-title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-style-editor {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 600px;\n  background: var(--bg-paper);\n  border-radius: var(--r-lg);\n  border: 1px solid var(--hair);\n  overflow: hidden;\n}\n\n.widget-style-editor-body {\n  display: grid;\n  grid-template-columns: var(--w-editor-form-width, 420px) 1fr;\n  flex: 1;\n  min-height: 0;\n}\n\n.widget-style-editor-form {\n  border-right: 1px solid var(--hair);\n  padding: var(--s-4);\n  overflow-y: auto;\n  background: var(--bg-paper);\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-5);\n}\n\n.widget-style-editor-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n}\n\n.widget-style-editor-preview {\n  display: flex;\n  flex-direction: column;\n  background: color-mix(in oklab, var(--bg-warm) 50%, var(--bg-paper));\n  min-height: 0;\n}\n\n.widget-style-editor-preview-actions { display: inline-flex; gap: var(--s-2); }\n\n.widget-style-editor-preview-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-2);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n  background: var(--bg-paper);\n}\n\n.widget-style-editor-preview-label {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n}\n\n.widget-style-editor-preview-stage {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--s-5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.widget-style-editor-sidebar {\n  border-right: 1px solid var(--hair);\n  padding: var(--s-4);\n  overflow-y: auto;\n  background: var(--bg-paper);\n}\n\n.widget-style-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  padding-bottom: var(--s-3);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.widget-style-section-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n}\n\n.widget-style-section-caption {\n  font: 400 12.5px/1.4 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n}\n\n.widget-style-section-head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--s-2);\n}\n\n.widget-style-section-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.widget-style-section-meta { display: inline-flex; align-items: center; gap: var(--s-2); }\n\n.widget-style-section-title {\n  font: 600 14px/1.3 var(--f-display);\n  color: var(--fg);\n  margin: 0;\n}"
  }
}