{
  "name": "ActionList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ActionList.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": "The actions mini-column for the agent-builder wizard — a count header,\nthe list of actions on the current block, and a \"New Action\" button.\nControlled (selectedId + onSelect). Slots into `<ActionWizard actionsList>`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ActionList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ActionListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ActionListItem",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ActionList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "items",
      "optional": false,
      "type": "ActionListItem[]",
      "doc": ""
    },
    {
      "name": "selectedId",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(id: string) => void",
      "doc": ""
    },
    {
      "name": "onAddAction",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Head label. Defaults to \"Actions\" — pass \"Anytime actions\" for the journey-level workbench. v4.11.0."
    },
    {
      "name": "description",
      "optional": true,
      "type": "ReactNode",
      "doc": "Dim framing line under the head, e.g. \"Rules that watch every block\". v4.11.0."
    }
  ],
  "classesUsed": [
    "action-list",
    "action-list-add",
    "action-list-count",
    "action-list-desc",
    "action-list-head",
    "action-list-new",
    "action-row",
    "action-row-chip",
    "action-row-meta",
    "action-row-name",
    "action-row-text",
    "title"
  ],
  "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-list { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.action-list-add { font: 600 12.5px/1 var(--f-body); color: var(--accent); background: transparent; border: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--hair)); padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; gap: 6px; }\n\n.action-list-count { font: 500 11px/1 var(--f-mono); color: var(--fg-faint); background: var(--bg-paper); padding: 2px 6px; border-radius: var(--r-pill); margin-left: 4px; }\n\n.action-list-desc { margin: calc(var(--s-2) * -1) 0 var(--s-1); font-size: 0.78rem; color: var(--fg-soft); }\n\n.action-list-head { display: flex; align-items: center; justify-content: space-between; font: 600 13px/1 var(--f-display); color: var(--fg); margin-bottom: var(--s-2); }\n\n.action-list-new { width: 22px; height: 22px; border-radius: var(--r-sm); background: transparent; border: 0; cursor: pointer; color: var(--accent); font: 600 16px/1 var(--f-mono); display: inline-flex; align-items: center; justify-content: center; }\n\n.action-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-sm); cursor: pointer; width: 100%; text-align: left; }\n\n.action-row-chip { font: 600 9px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; background: var(--success-soft); color: var(--success-text); padding: 3px 6px; border-radius: var(--r-pill); }\n\n.action-row-meta { font: 400 11px/1.3 var(--f-body); color: var(--fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.action-row-name { flex: 1; min-width: 0; font: 500 13px/1.2 var(--f-body); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.action-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}