{
  "name": "PayloadPreview",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PayloadPreview.tsx",
  "chapterTag": "07 Data Display",
  "chapter": "08-data-display.html",
  "sectionId": "payload-preview",
  "elName": "PayloadPreview",
  "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#payload-preview",
  "hasLiveDemo": false,
  "description": "Formatted JSON payload preview card with a copy button and optional\nhighlight pills. Used to render the live request body the platform will\nsend (HubSpot deal payload, Webhook destination, MCP tool argument\nshape, future event-stream sample, etc.).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PayloadPreview",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PayloadPreviewProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PayloadPreview } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "payload",
      "optional": false,
      "type": "unknown",
      "doc": "Payload data. Accepts a JS value (will be JSON-stringified) or a pre-formatted string."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Top-level title."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption beneath the title."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned status slot — typically a `<Badge>` or `<TestConnectionButton>`."
    },
    {
      "name": "showCopy",
      "optional": true,
      "type": "boolean",
      "doc": "Whether to show the copy button. Default `true`."
    },
    {
      "name": "highlight",
      "optional": true,
      "type": "string[]",
      "doc": "Highlight specific top-level keys. Renders a small pill in the gutter."
    },
    {
      "name": "maxHeight",
      "optional": true,
      "type": "number",
      "doc": "Max height for the scroll area in px. Default `360`."
    }
  ],
  "classesUsed": [
    "payload-preview",
    "payload-preview-body",
    "payload-preview-caption",
    "payload-preview-copy",
    "payload-preview-head",
    "payload-preview-head-text",
    "payload-preview-highlight",
    "payload-preview-highlight-row",
    "payload-preview-meta",
    "payload-preview-pre",
    "payload-preview-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"payload-preview\">\n  <div class=\"payload-preview-head\">\n    <div class=\"payload-preview-head-text\">\n      <span class=\"payload-preview-title\">Webhook payload</span>\n      <span class=\"payload-preview-caption\">POST → https://hooks.example.com/lead</span>\n    </div>\n  </div>\n  <div class=\"payload-preview-highlight-row\">\n    <span class=\"payload-preview-highlight\">event</span>\n    <span class=\"payload-preview-highlight\">contact</span>\n  </div>\n  <div class=\"payload-preview-body\" style=\"max-height:320px;\">\n    <pre class=\"payload-preview-pre\"><code>{\n  \"event\": \"session.completed\",\n  \"contact\": {\n    \"id\": \"ct_01H9…\",\n    \"first_name\": \"Jay\",\n    \"email\": \"jay@magicblocks.ai\"\n  },\n  \"facts\": {\n    \"loan_purpose\": \"Purchase\",\n    \"down_payment\": 50000\n  }\n}</code></pre>\n    <button type=\"button\" class=\"payload-preview-copy\" aria-label=\"Copy payload\">Copy</button>\n  </div>\n</div>",
    "css": ".payload-preview {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  overflow: hidden;\n}\n\n.payload-preview-body {\n  position: relative;\n  overflow: auto;\n}\n\n.payload-preview-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.payload-preview-copy {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  appearance: none;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-xs);\n  padding: 3px 8px;\n  font: 500 11.5px/1 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.payload-preview-head {\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-soft);\n}\n\n.payload-preview-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.payload-preview-highlight {\n  font: 500 11px/1 var(--f-mono);\n  padding: 4px 8px;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--accent) 12%, var(--bg-paper));\n  color: var(--accent);\n  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);\n}\n\n.payload-preview-highlight-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  padding: var(--s-2) var(--s-4);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.payload-preview-meta { display: inline-flex; align-items: center; gap: var(--s-2); }\n\n.payload-preview-pre {\n  margin: 0;\n  padding: var(--s-3) var(--s-4);\n  font: 400 12.5px/1.55 var(--f-mono);\n  color: var(--fg);\n  background: var(--bg-paper);\n  white-space: pre;\n}\n\n.payload-preview-title { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}