{
  "name": "ChannelSandbox",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ChannelSandbox.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "channel-sandbox",
  "elName": "Web channel active",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#channel-sandbox",
  "hasLiveDemo": false,
  "description": "`<ChannelSandbox>` — multi-channel widget preview shell.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ChannelSandbox",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ChannelSandboxProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ChannelSandboxChannel",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ChannelSandbox } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "channel",
      "optional": true,
      "type": "ChannelSandboxChannel",
      "doc": "Controlled active channel. When provided, the parent owns selection. Pair with `onChannelChange`."
    },
    {
      "name": "defaultChannel",
      "optional": true,
      "type": "ChannelSandboxChannel",
      "doc": "Uncontrolled initial channel. Defaults to the first entry in `channels` (i.e. `\"web\"` for the zero-prop default set)."
    },
    {
      "name": "onChannelChange",
      "optional": true,
      "type": "(channel: ChannelSandboxChannel) => void",
      "doc": "Fires whenever the active channel changes. Always emits, whether controlled or not."
    },
    {
      "name": "channels",
      "optional": true,
      "type": "ChannelSandboxChannel[]",
      "doc": "Restrict the tab set. Order drives tab order. Defaults to all three (`[\"web\", \"sms\", \"voice\"]`)."
    },
    {
      "name": "theme",
      "optional": true,
      "type": "Record<string, string>",
      "doc": "A `WidgetTheme` partial. Reserved for downstream theme composition (consumed by `<WidgetThemeProvider>`, chapter 17.1). The sandbox itself does not apply these tokens — they fall through to the wrapping theme provider when present."
    },
    {
      "name": "preview",
      "optional": true,
      "type": "| React.ReactNode | { web?: React.ReactNode",
      "doc": "Override the preview pane per channel. A single ReactNode renders for every channel; the object form keys by `activeChannel`. When omitted the component renders the kit's default preview for each channel — a <WidgetShell>-shaped block for Web, three SMS row bubbles for SMS, and a <VoicePlayer variant=\"expanded\"> for Voice."
    },
    {
      "name": "sms",
      "optional": true,
      "type": "React.ReactNode",
      "doc": ""
    },
    {
      "name": "voice",
      "optional": true,
      "type": "React.ReactNode; }",
      "doc": ""
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Class merged via the kit's `cn()` helper. Caller wins over defaults."
    }
  ],
  "classesUsed": [
    "tab",
    "widget-channel-sandbox",
    "widget-channel-sandbox-preview",
    "widget-channel-sandbox-sms",
    "widget-channel-sandbox-sms-bubble",
    "widget-channel-sandbox-tab",
    "widget-channel-sandbox-tabs"
  ],
  "examples": {
    "react": "// Zero-prop default — Web tab selected, default previews wired up.\n<ChannelSandbox />",
    "html": "<div class=\"widget-channel-sandbox\" data-channel=\"web\"><div class=\"widget-channel-sandbox-tabs\" role=\"tablist\"><button type=\"button\" role=\"tab\" id=\"cs1-tab-web\" aria-selected=\"true\" aria-controls=\"cs1-panel\" tabindex=\"0\" class=\"widget-channel-sandbox-tab\">Web</button><button type=\"button\" role=\"tab\" id=\"cs1-tab-sms\" aria-selected=\"false\" aria-controls=\"cs1-panel\" tabindex=\"-1\" class=\"widget-channel-sandbox-tab\">SMS</button><button type=\"button\" role=\"tab\" id=\"cs1-tab-voice\" aria-selected=\"false\" aria-controls=\"cs1-panel\" tabindex=\"-1\" class=\"widget-channel-sandbox-tab\">Voice</button></div><div class=\"widget-channel-sandbox-preview\" role=\"tabpanel\" id=\"cs1-panel\" aria-labelledby=\"cs1-tab-web\"><div class=\"widget-shell\"><header class=\"widget-shell-header\"><span class=\"widget-shell-avatar\">CW</span><div class=\"widget-shell-header-text\"><span class=\"widget-shell-agent\">Charlie&rsquo;s Wines</span><span class=\"widget-shell-subtitle\">Online · usually replies in 1 min</span></div></header><div class=\"widget-shell-scroll\"><div class=\"widget-shell-list\"><div class=\"widget-msg is-from-ai\"><div class=\"widget-msg-avatar\">CW</div><div class=\"widget-msg-stack\"><div class=\"widget-msg-bubble\"><div class=\"widget-msg-body\">Hi! Looking for the perfect wine, or browsing today?</div></div></div></div><div class=\"widget-msg is-from-user\"><div class=\"widget-msg-stack\"><div class=\"widget-msg-bubble\"><div class=\"widget-msg-body\">Looking for a Hunter Valley red under $50.</div></div></div></div></div></div><div class=\"widget-shell-composer\"><form class=\"widget-composer\"><div class=\"widget-composer-row\"><textarea class=\"widget-composer-input\" rows=\"1\" placeholder=\"Ask me&hellip;\" aria-label=\"Message\" readonly></textarea></div></form></div></div></div></div>",
    "css": ".tab {\n  appearance: none; background: transparent; border: 0;\n  padding: 12px var(--s-4) 14px;\n  font: 500 13.5px/1 var(--f-body); color: var(--fg-dim);\n  cursor: pointer;\n  position: relative; white-space: nowrap;\n  transition: color var(--dur-2) var(--ease);\n  display: inline-flex; align-items: center; gap: var(--s-2);\n}\n\n.widget-channel-sandbox {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n  background: var(--bg-paper);\n  display: flex; flex-direction: column;\n}\n\n.widget-channel-sandbox-preview { padding: var(--s-4); min-height: 240px; }\n\n.widget-channel-sandbox-sms { display: flex; flex-direction: column; }\n\n.widget-channel-sandbox-sms-bubble {\n  display: block; max-width: 75%; padding: 8px 12px;\n  border-radius: 14px; font: 400 13px/1.4 var(--f-body);\n  margin-bottom: 8px;\n}\n\n.widget-channel-sandbox-tab {\n  flex: 1; min-width: 0;\n  background: transparent; border: 0;\n  padding: var(--s-3) var(--s-4);\n  font: 600 13px/1.2 var(--f-body); color: var(--fg-soft);\n  cursor: pointer; position: relative;\n  min-height: 44px;\n}\n\n.widget-channel-sandbox-tabs {\n  display: flex; align-items: stretch;\n  border-bottom: 1px solid var(--hair);\n  background: var(--bg-sunk);\n}"
  }
}