{
  "name": "HelpBubble",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/HelpBubble.tsx",
  "chapterTag": "15 App Shell",
  "chapter": "15-app-shell.html",
  "sectionId": "help-bubble",
  "elName": "HelpBubble",
  "demoUrl": "https://brand.magicblocks.ai/components/15-app-shell#help-bubble",
  "hasLiveDemo": false,
  "description": "Floating help / chat launcher — the global bottom-right \"Magic on Magic\"\nbubble that appears on every page of the Next Gen app. Open state is\nfully local; consumer controls panel contents.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "HelpBubble",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "HelpBubbleProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { HelpBubble } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Optional badge count (unread messages / open conversations)."
    },
    {
      "name": "label",
      "optional": true,
      "type": "string",
      "doc": "Tooltip / aria-label for the trigger. Default `\"Help\"`."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body content shown when the bubble is open."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional title at the top of the panel."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the title."
    },
    {
      "name": "footer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Footer slot — typically a Search / Send-message form."
    },
    {
      "name": "anchor",
      "optional": true,
      "type": "\"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"",
      "doc": "Anchor side. Default `\"bottom-right\"`."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Custom icon for the trigger. Defaults to a chat-bubble."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires when the bubble opens or closes."
    }
  ],
  "classesUsed": [
    "help-bubble",
    "help-bubble-badge",
    "help-bubble-body",
    "help-bubble-caption",
    "help-bubble-footer",
    "help-bubble-head",
    "help-bubble-panel",
    "help-bubble-title",
    "help-bubble-trigger",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"help-bubble-demo\">\n  <div class=\"help-bubble is-anchor-bottom-right is-open\">\n    <button type=\"button\" class=\"help-bubble-trigger\" aria-label=\"Help\" aria-haspopup=\"dialog\" aria-expanded=\"true\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M3 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-4 3v-3H5a2 2 0 0 1-2-2V4z\" fill=\"currentColor\"/></svg>\n      <span class=\"help-bubble-badge\" aria-label=\"2 unread\">2</span>\n    </button>\n    <div class=\"help-bubble-panel\" role=\"dialog\" aria-label=\"Help\">\n      <div class=\"help-bubble-head\">\n        <div class=\"help-bubble-title\">Magic on Magic</div>\n        <div class=\"help-bubble-caption\">Ask anything about your agent setup.</div>\n      </div>\n      <div class=\"help-bubble-body\">\n        <p>Hi Jay &mdash; what can I help with today?</p>\n      </div>\n      <div class=\"help-bubble-footer\">\n        <input type=\"text\" class=\"input\" placeholder=\"Ask a question…\">\n        <button class=\"btn btn-primary\" type=\"button\">Send</button>\n      </div>\n    </div>\n  </div>\n</div>",
    "css": ".help-bubble { position: fixed; z-index: 60; }\n\n.help-bubble-badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 999px;\n  background: var(--ink);\n  color: var(--paper);\n  font: 600 10.5px/1 var(--f-mono);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--accent);\n}\n\n.help-bubble-body {\n  padding: var(--s-4);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.help-bubble-caption { font: 400 12.5px/1.4 var(--f-body); color: var(--fg-soft); margin-top: 2px; }\n\n.help-bubble-footer {\n  padding: var(--s-3) var(--s-4);\n  border-top: 1px solid var(--hair-soft);\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n}\n\n.help-bubble-head {\n  padding: var(--s-4);\n  border-bottom: 1px solid var(--hair-soft);\n}\n\n.help-bubble-panel {\n  position: absolute;\n  width: 360px;\n  max-height: 520px;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  box-shadow: 0 20px 48px color-mix(in oklab, var(--ink) 18%, transparent);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.help-bubble-title { font: 600 15px/1.3 var(--f-display); color: var(--fg); }\n\n.help-bubble-trigger {\n  appearance: none;\n  width: 48px;\n  height: 48px;\n  border-radius: 999px;\n  background: var(--accent);\n  color: var(--paper);\n  border: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  position: relative;\n  box-shadow: 0 6px 16px color-mix(in oklab, var(--ink) 22%, transparent);\n  transition: transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}