{
  "name": "KnowledgeItemRow",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/KnowledgeItemRow.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "knowledge-item",
  "elName": "Knowledge item row",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#knowledge-item",
  "hasLiveDemo": false,
  "description": "One row in the Knowledge collection editor: source icon + title + adaptive\none-line preview + optional topic chip + updated time. Wraps `SourceRow`; the\npreview is `SourceRow`'s `meta` slot, so the row collapses to a single line\nwhen `preview` is omitted (short \"Always\" facts).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "KnowledgeItemRow",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KnowledgeItemRowProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KnowledgeSource",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { KnowledgeItemRow } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "source",
      "optional": false,
      "type": "KnowledgeSource",
      "doc": "Where the item came from — picks the leading icon."
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Title or question (primary line)."
    },
    {
      "name": "preview",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line content preview. Omit for short facts that are their own title."
    },
    {
      "name": "topic",
      "optional": true,
      "type": "KnowledgeTopic",
      "doc": "Topic — shown as a chip when the item is in the \"When a topic comes up\" lane."
    },
    {
      "name": "updated",
      "optional": true,
      "type": "ReactNode",
      "doc": "Last-updated label, e.g. `\"2d ago\"`."
    },
    {
      "name": "icon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the source icon."
    }
  ],
  "classesUsed": [
    "title"
  ],
  "examples": {
    "react": "<KnowledgeItemRow source=\"website\" title=\"What makes a good CRM\" preview=\"A good CRM centralises every interaction…\" updated=\"2d ago\" />\n<KnowledgeItemRow source=\"spreadsheet\" title=\"How much does the Pro plan cost?\" preview=\"Pro is $49 per user / month…\" topic=\"pricing\" />",
    "html": "<div style=\"display:flex;flex-direction:column;gap:var(--s-2);max-width:520px;margin:0 auto;\">\n  <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>\n  <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>\n  <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>\n</div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}