{
  "name": "AttachLanePicker",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/AttachLanePicker.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "attach-lane-picker",
  "elName": "Attach lane picker",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#attach-lane-picker",
  "hasLiveDemo": false,
  "description": "The agent-attach control: pick which lanes of a collection an agent gets,\nand which topics within the \"When a topic comes up\" lane. The three lanes\nare the on/off switches — \"certain parts, out of those 3 things\".",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "AttachLanePicker",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "AttachLanePickerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "AttachSelection",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "AttachLane",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { AttachLanePicker } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "topics",
      "optional": true,
      "type": "KnowledgeTopic[]",
      "doc": "Topics offered when the conditional lane is on. Default: all 12."
    },
    {
      "name": "counts",
      "optional": true,
      "type": "Partial<Record<AttachLane, number>>",
      "doc": "Optional per-lane item counts, shown on the right of each row."
    },
    {
      "name": "value",
      "optional": true,
      "type": "AttachSelection",
      "doc": "Controlled selection."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "AttachSelection",
      "doc": "Initial selection when uncontrolled. Default: all three lanes, no topics."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: AttachSelection) => void",
      "doc": "Fires whenever the selection changes."
    }
  ],
  "classesUsed": [
    "attach-lane-count",
    "attach-lane-help",
    "attach-lane-name",
    "attach-lane-picker",
    "attach-lane-row",
    "attach-lane-summary",
    "attach-lane-topics"
  ],
  "examples": {
    "react": "<AttachLanePicker onValueChange={(sel) => save(sel)} />",
    "html": "<div style=\"max-width:480px;margin:0 auto;\">\n  <div class=\"attach-lane-picker\">\n    <div class=\"attach-lane-row\"><label class=\"cb\"><input type=\"checkbox\" checked><span class=\"cb-box\" aria-hidden=\"true\"></span><span><span class=\"attach-lane-name\">Always</span></span></label><span class=\"attach-lane-count\">4 items</span><span class=\"attach-lane-help\">Key facts the agent always keeps in mind.</span></div>\n    <div class=\"attach-lane-row\"><label class=\"cb\"><input type=\"checkbox\" checked><span class=\"cb-box\" aria-hidden=\"true\"></span><span><span class=\"attach-lane-name\">When it&apos;s relevant</span></span></label><span class=\"attach-lane-count\">16 items</span><span class=\"attach-lane-help\">Looked up when the customer&apos;s message relates.</span></div>\n    <div class=\"attach-lane-row\"><label class=\"cb\"><input type=\"checkbox\" checked><span class=\"cb-box\" aria-hidden=\"true\"></span><span><span class=\"attach-lane-name\">When a topic comes up</span></span></label><span class=\"attach-lane-count\">4 items</span><span class=\"attach-lane-help\">Fires only on the topics you choose.</span><div class=\"attach-lane-topics\"><div class=\"filter-chip-group\" role=\"group\" aria-label=\"Topics\"><div class=\"filter-chip-group-chips\"><button class=\"chip chip-green chip-button chip-active\" type=\"button\" role=\"checkbox\" aria-checked=\"true\">Pricing</button><button class=\"chip chip-green chip-button chip-active\" type=\"button\" role=\"checkbox\" aria-checked=\"true\">Objections</button><button class=\"chip chip-green chip-button\" type=\"button\" role=\"checkbox\" aria-checked=\"false\">Closing</button><button class=\"chip chip-green chip-button\" type=\"button\" role=\"checkbox\" aria-checked=\"false\">Greeting</button></div></div></div></div>\n    <p class=\"attach-lane-summary\">This agent gets Always + When it&apos;s relevant + When a topic comes up, plus Pricing, Objections topics.</p>\n  </div>\n</div>",
    "css": ".attach-lane-count {\n  font-size: 0.72rem;\n  font-weight: 700;\n  color: var(--fg-faint);\n  white-space: nowrap;\n}\n\n.attach-lane-help {\n  grid-column: 1 / -1;\n  font-size: 0.78rem;\n  color: var(--fg-soft);\n}\n\n.attach-lane-name { font-weight: 700; font-size: 0.86rem; }\n\n.attach-lane-picker {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.attach-lane-row {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: var(--s-1) var(--s-2);\n  align-items: center;\n  padding: var(--s-3) var(--s-4);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n}\n\n.attach-lane-summary {\n  margin: var(--s-1) 0 0;\n  font-size: 0.8rem;\n  color: var(--fg-soft);\n}\n\n.attach-lane-topics {\n  grid-column: 1 / -1;\n  margin-top: var(--s-1);\n  padding-top: var(--s-3);\n  border-top: 1px dashed var(--hair);\n}"
  }
}