{
  "name": "ActionPicker",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ActionPicker.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "actions",
  "elName": "Action wizard &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">Step 1 (Action + config)</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#actions",
  "hasLiveDemo": false,
  "description": "Registry-driven grid of action-type tiles + a detail card for the selection.\nEvery entry in the action registry renders automatically — adding a new\naction type needs no change here. Tiles whose `channels` exclude the current\n`channel` render disabled with a \"Website only\" caption.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ActionPicker",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ActionPickerProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ActionPicker } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "ActionType",
      "doc": "Selected action type."
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(type: ActionType) => void",
      "doc": "Fires when a type tile is chosen."
    },
    {
      "name": "channel",
      "optional": true,
      "type": "AgentChannel",
      "doc": "Current agent channel — disables off-channel types (e.g. \"Website only\")."
    },
    {
      "name": "registry",
      "optional": true,
      "type": "ActionRegistry",
      "doc": "Override the registry (defaults to the kit's)."
    },
    {
      "name": "order",
      "optional": true,
      "type": "readonly ActionType[]",
      "doc": "Tile order."
    },
    {
      "name": "allow",
      "optional": true,
      "type": "readonly ActionType[]",
      "doc": "Restrict to this subset of types (e.g. allowed sub-actions). Omit = all."
    },
    {
      "name": "showDetail",
      "optional": true,
      "type": "boolean",
      "doc": "Show the selected type's detail card below the picker. Default `true`."
    },
    {
      "name": "layout",
      "optional": true,
      "type": "\"grid\" | \"dropdown\"",
      "doc": "Picker layout. - `\"grid\"` (default) — the 4-col card grid; all types read at once. - `\"dropdown\"` — a searchable, descriptive `<Combobox>` (icon · name · one-line description per row). Better when the action set is long. Off- channel types are omitted from the list (the grid shows them disabled). v2.3.0."
    }
  ],
  "classesUsed": [
    "action-detail",
    "action-detail-body",
    "action-detail-glyph",
    "action-detail-sub",
    "action-detail-title",
    "action-opt",
    "action-opt-desc",
    "action-opt-glyph",
    "action-opt-name",
    "action-opt-text",
    "action-picker",
    "action-picker-wrap",
    "action-tile",
    "action-tile-glyph",
    "action-tile-meta",
    "action-tile-name"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"action-wizard\" role=\"region\" aria-label=\"Action wizard\">\n\n  <!-- Actions list mini-column → <ActionList> -->\n  <aside class=\"action-list\" aria-label=\"Actions list\">\n    <div class=\"action-list-head\">\n      <span>Actions <span class=\"action-list-count\">2</span></span>\n      <button type=\"button\" class=\"action-list-new\" aria-label=\"Add action\">+</button>\n    </div>\n    <button type=\"button\" class=\"action-row has-meta is-active\">\n      <span class=\"action-row-chip\">Send message</span>\n      <span class=\"action-row-text\">\n        <span class=\"action-row-name\">Welcome &amp; qualify</span>\n        <span class=\"action-row-meta\">Fires every turn</span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"action-row has-meta\">\n      <span class=\"action-row-chip\">Switch journey</span>\n      <span class=\"action-row-text\">\n        <span class=\"action-row-name\">Route to booking</span>\n        <span class=\"action-row-meta\">2 conditions &middot; any</span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"action-list-add\">+ New Action</button>\n  </aside>\n\n  <!-- Wizard pane → <ActionWizard> -->\n  <div class=\"wizard-pane\">\n    <header class=\"wizard-head\">\n      <nav class=\"wizard-steps\" role=\"tablist\">\n        <button type=\"button\" class=\"wizard-step is-active\" role=\"tab\" aria-selected=\"true\">\n          <span class=\"wizard-step-num\">1</span> Action\n        </button>\n        <button type=\"button\" class=\"wizard-step\" role=\"tab\">\n          <span class=\"wizard-step-num\">2</span> Conditions\n          <span class=\"wizard-step-count\">1</span>\n        </button>\n        <button type=\"button\" class=\"wizard-step\" role=\"tab\">\n          <span class=\"wizard-step-num\">3</span> Goal\n        </button>\n      </nav>\n      <span class=\"ab-only-once\">\n        Only match once\n        <button type=\"button\" class=\"ab-only-once-toggle\" aria-pressed=\"true\" aria-label=\"Only match once\"></button>\n      </span>\n    </header>\n\n    <div class=\"wizard-body\">\n\n      <div class=\"ab-form-title-row\" style=\"margin-bottom: var(--s-3);\">\n        <h2 style=\"font-size: 14px;\">Select an action</h2>\n      </div>\n\n      <!-- Action picker → <ActionPicker> (registry-driven) -->\n      <div class=\"action-picker-wrap\">\n        <div class=\"action-picker\" role=\"radiogroup\" aria-label=\"Action type\">\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\" aria-checked=\"false\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 11.5 L11.5 3.5\"/><path d=\"M11 3 L13 1 L14 2 L12 4 Z\" fill=\"currentColor\"/><path d=\"M3 4 L3.4 5 L4.4 5.4 L3.4 5.8 L3 6.8 L2.6 5.8 L1.6 5.4 L2.6 5 Z\"/></svg></span>\n            <span class=\"action-tile-name\">Auto</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 5 H9 L11 3 L11 7 L9 5\"/><path d=\"M12 9 H5 L3 7 L3 11 L5 9\"/></svg></span>\n            <span class=\"action-tile-name\">Switch Journey</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 1.5 V12.5\"/><path d=\"M3.5 2.5 H10.5 L8.8 5 L10.5 7.5 H3.5 Z\"/></svg></span>\n            <span class=\"action-tile-name\">Change stage</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 3 H12 V11 H5 L2 7 Z\"/><circle cx=\"6.3\" cy=\"7\" r=\"0.8\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Change segment</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><line x1=\"4\" y1=\"6\" x2=\"10\" y2=\"6\"/><line x1=\"4\" y1=\"8\" x2=\"8\" y2=\"8\"/></svg></span>\n            <span class=\"action-tile-name\">End Chat</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-selected\" role=\"radio\" aria-checked=\"true\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><circle cx=\"5\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"7\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"9\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Send Message</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"2.5\" width=\"8\" height=\"10\" rx=\"1\"/><path d=\"M5 2.5 V1.5 H9 V2.5\"/><path d=\"M5 6 L6 7 L8.5 4.5\"/><line x1=\"5\" y1=\"9.5\" x2=\"9\" y2=\"9.5\"/></svg></span>\n            <span class=\"action-tile-name\">Run Task</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.5\" y=\"4\" width=\"9\" height=\"6\" rx=\"1.5\"/><rect x=\"2.5\" y=\"4\" width=\"9\" height=\"6\" rx=\"1.5\" fill=\"currentColor\" fill-opacity=\"0.15\"/></svg></span>\n            <span class=\"action-tile-name\">Add Buttons</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2.5\" width=\"10\" height=\"9\" rx=\"1.5\"/><line x1=\"4\" y1=\"5.5\" x2=\"10\" y2=\"5.5\"/><line x1=\"4\" y1=\"7.5\" x2=\"8\" y2=\"7.5\"/><rect x=\"4\" y=\"9\" width=\"3\" height=\"1.5\" rx=\"0.3\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Add Forms</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3.5\" width=\"10\" height=\"8\" rx=\"1.3\"/><line x1=\"2\" y1=\"6\" x2=\"12\" y2=\"6\"/><line x1=\"4.5\" y1=\"2.5\" x2=\"4.5\" y2=\"4.5\"/><line x1=\"9.5\" y1=\"2.5\" x2=\"9.5\" y2=\"4.5\"/><rect x=\"5\" y=\"8\" width=\"2\" height=\"2\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Add Calendar</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8 L8 6 M5 5 H4 C2.5 5 1.5 6 1.5 7.5 S2.5 10 4 10 H5\"/><path d=\"M8 9 H10 C11.5 9 12.5 8 12.5 6.5 S11.5 4 10 4 H9\"/></svg></span>\n            <span class=\"action-tile-name\">Add Link</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"3.5\" y1=\"3.5\" x2=\"10.5\" y2=\"10.5\"/></svg></span>\n            <span class=\"action-tile-name\">Opt-Out</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 4 L2 7 L5 10\"/><path d=\"M9 4 L12 7 L9 10\"/></svg></span>\n            <span class=\"action-tile-name\">Embed</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5\" cy=\"5\" r=\"2\"/><path d=\"M2 11 C2 9 3.3 8 5 8 S8 9 8 11\"/><path d=\"M9 5 H12.5 M9 7 H12.5 M9 9 H11.5\"/></svg></span>\n            <span class=\"action-tile-name\">Human Takeover</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><line x1=\"5\" y1=\"5\" x2=\"9\" y2=\"9\"/><line x1=\"9\" y1=\"5\" x2=\"5\" y2=\"9\"/></svg></span>\n            <span class=\"action-tile-name\">Do not respond</span>\n          </button>\n\n        </div>\n\n        <div class=\"action-detail\">\n          <span class=\"action-detail-glyph\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><circle cx=\"5\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"7\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"9\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/></svg>\n          </span>\n          <div class=\"action-detail-body\">\n            <span class=\"action-detail-title\">Send Message</span>\n            <span class=\"action-detail-sub\">Send a message to the end user &mdash; a saved snippet or custom text.</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Config panel for the selected action → <ActionConfigPanel> → <MessageField> -->\n      <div class=\"action-config\">\n        <div class=\"field-row\">\n          <label class=\"field-label\">Message</label>\n          <div class=\"message-field\">\n            <div class=\"message-field-tabs\" role=\"tablist\" aria-label=\"Message source\">\n              <button type=\"button\" class=\"message-field-tab\" role=\"tab\" aria-selected=\"false\">Select</button>\n              <button type=\"button\" class=\"message-field-tab is-active\" role=\"tab\" aria-selected=\"true\">Custom</button>\n            </div>\n            <textarea class=\"message-field-textarea\" rows=\"4\" placeholder=\"Type a message&hellip;\">Thanks! I&rsquo;ll send those secret deals your way now. 🍷</textarea>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <footer class=\"wizard-foot\">\n      <button type=\"button\" class=\"ab-h-pill\" disabled style=\"opacity: 0.4;\">&lsaquo; Back</button>\n      <div class=\"wizard-foot-pages\" aria-hidden=\"true\">\n        <span class=\"wizard-foot-page is-active\"></span>\n        <span class=\"wizard-foot-page\"></span>\n        <span class=\"wizard-foot-page\"></span>\n      </div>\n      <button type=\"button\" class=\"ab-h-pill is-primary\">Continue &rsaquo;</button>\n    </footer>\n\n  </div>\n\n</div>",
    "css": ".action-detail { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-warm); border-radius: var(--r-md); border: 1px solid var(--hair); display: flex; align-items: flex-start; gap: var(--s-3); }\n\n.action-detail-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n\n.action-detail-glyph { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n\n.action-detail-sub { font: 400 12.5px/1.5 var(--f-body); color: var(--fg-dim); }\n\n.action-detail-title { font: 600 13px/1.2 var(--f-display); color: var(--fg); }\n\n.action-opt { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; }\n\n.action-opt-desc { font: 400 11.5px/1.35 var(--f-body); color: var(--fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.action-opt-glyph { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-warm); color: var(--fg-soft); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n\n.action-opt-name { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.action-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n\n.action-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }\n\n.action-picker-wrap { display: flex; flex-direction: column; }\n\n.action-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--s-3); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-md); cursor: pointer; text-align: left; position: relative; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }\n\n.action-tile-glyph { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-warm); color: var(--fg-soft); display: inline-flex; align-items: center; justify-content: center; }\n\n.action-tile-meta { font: 500 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in oklab, var(--accent) 70%, var(--fg-dim)); margin-top: 2px; }\n\n.action-tile-name { font: 600 12.5px/1.2 var(--f-body); color: var(--fg); }"
  }
}