{
  "name": "TraceItemCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TraceItemCard.tsx",
  "chapterTag": "23 Workspace",
  "chapter": "23-workspace.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Single expandable card from the kit's trace-item family. Used inside\n`<TraceTimeline>` events but also useful standalone — for citation\ncards inline in a knowledge-base page, retrieval-debug surfaces,\n\"show me what was matched\" affordances, RAG passage explorers, and\nany \"label · value · meta · expandable details\" shape.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TraceItemCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TraceItemCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TraceItemCardTone",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TraceItemCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "tone",
      "optional": true,
      "type": "TraceItemCardTone",
      "doc": "Tone band — drives the left-edge accent + open-state border colour. Defaults to `neutral`. Six tones group by category, matching `<TraceTimeline>` event tones."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Short eyebrow above the value — typically the source name (\"Regional Policy v2.1\", \"Location Data\")."
    },
    {
      "name": "value",
      "optional": true,
      "type": "ReactNode",
      "doc": "Main one-line summary (\"APAC support hours\", \"Vietnam · HCMC\")."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trailing meta caption — typically similarity / confidence / score (\"0.92 sim\", \"+18ms\"). Rendered right-aligned."
    },
    {
      "name": "details",
      "optional": true,
      "type": "ReactNode",
      "doc": "Expanded body — the actual passage text, code snippet, or any longer content. When provided, the card becomes interactive (the head turns into a button with chevron). Omit for a static read-only card."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state. Pair with `onOpenChange`."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Default open state when uncontrolled. Defaults to `false`."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Open-state change callback (fires for both controlled and uncontrolled modes)."
    }
  ],
  "classesUsed": [
    "title",
    "trace-item-card",
    "trace-item-card-body",
    "trace-item-card-chevron",
    "trace-item-card-details",
    "trace-item-card-label",
    "trace-item-card-meta",
    "trace-item-card-trigger",
    "trace-item-card-value"
  ],
  "examples": {
    "react": "// Expandable RAG passage card\n<TraceItemCard\n  tone=\"success\"\n  label=\"Regional Policy v2.1\"\n  value=\"APAC support hours\"\n  meta=\"0.92 sim\"\n  details={\n    <p>\n      \"For customers in the <mark>APAC region</mark>, our local team\n      operates <strong>9am-6pm Singapore Time</strong>...\"\n    </p>\n  }\n  defaultOpen\n/>",
    "html": null,
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.trace-item-card {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  overflow: hidden;\n  transition: border-color var(--dur-2) var(--ease);\n}\n\n.trace-item-card-body {\n  min-width: 0;\n  display: inline-flex;\n  align-items: baseline;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.trace-item-card-chevron {\n  width: 8px;\n  height: 8px;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n  flex-shrink: 0;\n  color: var(--fg-faint);\n}\n\n.trace-item-card-details {\n  padding: 8px 12px 10px;\n  border-top: 1px solid var(--hair);\n  background: var(--trace-tone-soft, var(--bg-warm));\n  font: 400 12.5px/1.5 var(--f-body);\n  color: var(--fg);\n}\n\n.trace-item-card-label {\n  font-weight: 600;\n  color: var(--fg);\n}\n\n.trace-item-card-meta {\n  font: 400 11.5px/1 var(--f-mono);\n  color: var(--fg-faint);\n}\n\n.trace-item-card-trigger {\n  appearance: none;\n  display: grid;\n  grid-template-columns: 1fr auto auto;\n  align-items: center;\n  gap: var(--s-2);\n  width: 100%;\n  padding: 8px 12px;\n  background: transparent;\n  border: 0;\n  text-align: left;\n  cursor: pointer;\n  color: var(--fg);\n  font: 400 13px/1.4 var(--f-body);\n}\n\n.trace-item-card-value { color: var(--fg); }"
  }
}