{
  "name": "KnowledgeLane",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/KnowledgeLane.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "knowledge-lane",
  "elName": "Three lanes",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#knowledge-lane",
  "hasLiveDemo": false,
  "description": "One lane in the Knowledge editor — a tinted header (dot + plain name + helper\n+ count) over a list of `KnowledgeItemRow`s. The three lanes are the spine of\nthe editor and the on/off switches for attach.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "KnowledgeLane",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KnowledgeLaneProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KnowledgeLaneKind",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { KnowledgeLane } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "kind",
      "optional": false,
      "type": "KnowledgeLaneKindInput",
      "doc": "Which retrieval lane. Sets name, helper, and tone. Canonical: `\"always\"` | `\"semantic\"` | `\"conditional\"` (matching `retrievalPolicy` + `AttachLanePicker`). `\"relevant\"` / `\"topic\"` are accepted as deprecated aliases."
    },
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Item count shown on the right of the header."
    },
    {
      "name": "help",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the default helper copy."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "`KnowledgeItemRow` children."
    }
  ],
  "classesUsed": [
    "knowledge-lane",
    "knowledge-lane-count",
    "knowledge-lane-dot",
    "knowledge-lane-head",
    "knowledge-lane-help",
    "knowledge-lane-name"
  ],
  "examples": {
    "react": "<KnowledgeLane kind=\"always\" count={4}>\n  <KnowledgeItemRow source=\"manual\" title=\"Never promise under 2 weeks.\" updated=\"3d ago\" />\n</KnowledgeLane>",
    "html": "<div style=\"display:flex;flex-direction:column;gap:var(--s-3);max-width:560px;margin:0 auto;\">\n\n  <div class=\"knowledge-lane knowledge-lane-always\"><div class=\"knowledge-lane-head\"><span class=\"knowledge-lane-dot\"></span><span class=\"knowledge-lane-name\">Always</span><span class=\"knowledge-lane-help\">Key facts the agent always keeps in mind.</span><span class=\"knowledge-lane-count\">4</span></div><div class=\"knowledge-lane-body\"><div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h4L19 9l-4-4L4 16z\"/><path d=\"M14 6l4 4\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">Never promise migration timelines under 2 weeks.</span></div><div class=\"source-row-trailing\"><p class=\"caption\">3d ago</p></div></div></div></div>\n\n  <div class=\"knowledge-lane knowledge-lane-semantic\"><div class=\"knowledge-lane-head\"><span class=\"knowledge-lane-dot\"></span><span class=\"knowledge-lane-name\">When it&apos;s relevant</span><span class=\"knowledge-lane-help\">Looked up when the customer&apos;s message relates.</span><span class=\"knowledge-lane-count\">16</span></div><div class=\"knowledge-lane-body\"><div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">What makes a good CRM</span><span class=\"source-row-meta\">A good CRM centralises every customer interaction, automates repetitive data entry, and surfaces the next best action&hellip;</span></div><div class=\"source-row-trailing\"><p class=\"caption\">2d ago</p></div></div><div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\"/><path d=\"M14 3v5h5\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">Security &amp; compliance</span><span class=\"source-row-meta\">We&apos;re SOC2 Type II, encrypt data at rest and in transit, and offer EU data residency on Business plans&hellip;</span></div><div class=\"source-row-trailing\"><p class=\"caption\">5d ago</p></div></div></div></div>\n\n  <div class=\"knowledge-lane knowledge-lane-conditional\"><div class=\"knowledge-lane-head\"><span class=\"knowledge-lane-dot\"></span><span class=\"knowledge-lane-name\">When a topic comes up</span><span class=\"knowledge-lane-help\">Brought up only on the topics you choose.</span><span class=\"knowledge-lane-count\">4</span></div><div class=\"knowledge-lane-body\"><div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\"/><path d=\"M14 3v5h5M8 13h8M8 17h5\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">How much does the Pro plan cost?</span><span class=\"source-row-meta\">Pro is $49 per user / month billed annually ($59 monthly). Includes the automation builder&hellip;</span></div><div class=\"source-row-status\"><span class=\"chip chip-green\">Pricing</span></div></div></div></div>\n\n</div>",
    "css": ".knowledge-lane {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.knowledge-lane-count {\n  margin-left: auto;\n  font-size: 0.72rem;\n  font-weight: 700;\n  color: var(--fg-faint);\n}\n\n.knowledge-lane-dot {\n  width: 9px;\n  height: 9px;\n  border-radius: var(--r-pill);\n  flex: none;\n}\n\n.knowledge-lane-head {\n  display: flex;\n  align-items: center;\n  gap: var(--s-2);\n  padding: var(--s-3);\n}\n\n.knowledge-lane-help {\n  font-size: 0.78rem;\n  color: var(--fg-soft);\n}\n\n.knowledge-lane-name {\n  font-weight: 700;\n  font-size: 0.84rem;\n}"
  }
}