{
  "name": "SnippetTextarea",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/SnippetTextarea.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "snippet-textarea",
  "elName": "SnippetTextarea",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#snippet-textarea",
  "hasLiveDemo": false,
  "description": "Textarea + `Insert snippet` picker — the canonical text input for every\nagent message field, persona prompt, custom-fallback message, and action\nbody in the Next Gen app.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "SnippetTextarea",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "SnippetTextareaProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "Snippet",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { SnippetTextarea } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "string",
      "doc": "Controlled value."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string",
      "doc": "Uncontrolled initial value."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: string) => void",
      "doc": "Fires with the string value (native onChange also fires when set)."
    },
    {
      "name": "snippets",
      "optional": true,
      "type": "Snippet[]",
      "doc": "Available snippets."
    },
    {
      "name": "triggerLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Picker button label. Default `\"Insert snippet\"`."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional label above the textarea."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the label."
    },
    {
      "name": "toolbarMeta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional right-aligned helper slot in the toolbar."
    }
  ],
  "classesUsed": [
    "menu",
    "snippet-textarea",
    "snippet-textarea-caption",
    "snippet-textarea-group",
    "snippet-textarea-group-name",
    "snippet-textarea-head",
    "snippet-textarea-input",
    "snippet-textarea-input-wrap",
    "snippet-textarea-item",
    "snippet-textarea-item-caption",
    "snippet-textarea-item-label",
    "snippet-textarea-item-token",
    "snippet-textarea-label",
    "snippet-textarea-menu",
    "snippet-textarea-meta",
    "snippet-textarea-toolbar",
    "snippet-textarea-trigger",
    "snippet-textarea-trigger-glyph",
    "snippet-textarea-trigger-label"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"snippet-textarea\">\n  <div class=\"snippet-textarea-head\">\n    <label class=\"snippet-textarea-label\" for=\"st-demo\">Welcome message</label>\n    <span class=\"snippet-textarea-caption\">Inserted snippets are resolved at send time.</span>\n  </div>\n  <div class=\"snippet-textarea-toolbar\">\n    <button type=\"button\" class=\"snippet-textarea-trigger\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n      <span class=\"snippet-textarea-trigger-glyph\" aria-hidden=\"true\">{+}</span>\n      <span class=\"snippet-textarea-trigger-label\">Insert snippet</span>\n    </button>\n  </div>\n  <div class=\"snippet-textarea-input-wrap\">\n    <textarea id=\"st-demo\" class=\"snippet-textarea-input\" rows=\"5\">Hi {{contact.first_name}} —</textarea>\n  </div>\n</div>",
    "css": ".menu {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-lg);\n  padding: var(--s-2);\n  display: flex; flex-direction: column; gap: 2px;\n  box-shadow: var(--sh-3);\n  min-width: 260px;\n}\n\n.snippet-textarea { display: flex; flex-direction: column; gap: 6px; }\n\n.snippet-textarea-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.snippet-textarea-group { display: flex; flex-direction: column; }\n\n.snippet-textarea-group-name {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: 6px 10px 4px;\n}\n\n.snippet-textarea-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-3);\n}\n\n.snippet-textarea-input {\n  width: 100%;\n  padding: var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 14px/1.5 var(--f-body);\n  resize: vertical;\n  min-height: 64px;\n}\n\n.snippet-textarea-input-wrap { position: relative; }\n\n.snippet-textarea-item {\n  appearance: none;\n  text-align: left;\n  background: transparent;\n  border: 0;\n  padding: 6px 10px;\n  border-radius: var(--r-xs);\n  cursor: pointer;\n  display: grid;\n  grid-template-columns: 1fr auto;\n  column-gap: var(--s-3);\n  row-gap: 1px;\n  color: var(--fg);\n}\n\n.snippet-textarea-item-caption {\n  font: 400 12px/1.3 var(--f-body);\n  color: var(--fg-soft);\n  grid-column: 1;\n}\n\n.snippet-textarea-item-label {\n  font: 500 13px/1.3 var(--f-body);\n  grid-column: 1;\n}\n\n.snippet-textarea-item-token {\n  grid-column: 2;\n  grid-row: 1 / span 2;\n  align-self: center;\n  font: 400 11px/1 var(--f-mono);\n  color: var(--fg-faint);\n  background: var(--bg-warm);\n  padding: 3px 6px;\n  border-radius: var(--r-xs);\n  white-space: nowrap;\n}\n\n.snippet-textarea-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.snippet-textarea-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  z-index: 50;\n  max-height: 280px;\n  overflow-y: auto;\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 14%, transparent);\n  padding: 4px;\n}\n\n.snippet-textarea-meta { font: 400 12px/1 var(--f-body); color: var(--fg-soft); }\n\n.snippet-textarea-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n}\n\n.snippet-textarea-trigger {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border: 1px solid var(--hair);\n  background: var(--bg-paper);\n  border-radius: var(--r-sm);\n  font: 500 12.5px/1 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.snippet-textarea-trigger-glyph {\n  font: 600 12px/1 var(--f-mono);\n  color: var(--accent);\n}\n\n.snippet-textarea-trigger-label { line-height: 1; }"
  }
}