{
  "name": "ContactDetailPage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ContactDetailPage.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "contact-detail",
  "elName": "ContactDetailPage",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#contact-detail",
  "hasLiveDemo": true,
  "description": "The AI-native CRM contact page. A page-shaped composition: a warm identity\nhero with a lifecycle journey bar + universal stat strip, then tabs over\nOverview (contact info · editable additional info · activity · a rail of\nSage summary / EngagementScore / segments / goals / consent + QuietHours),\nSessions (SessionCards), Memories (MemoryList + KeyFactGrid), and Notes.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ContactDetailPage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ContactDetailPageProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ContactStat",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ContactGoal",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ContactInfoRow",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ContactConsentRow",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ContactSegment",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "ContactNote",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { ContactDetailPage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "name",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "initials",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "email",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "phone",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "location",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "country",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "localTime",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "timezone",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "smsWindow",
      "optional": true,
      "type": "{ start?: number",
      "doc": "SMS-safe window for the hero pill + consent card."
    },
    {
      "name": "end",
      "optional": true,
      "type": "number",
      "doc": ""
    },
    {
      "name": "now",
      "optional": true,
      "type": "number }",
      "doc": ""
    },
    {
      "name": "segmentFlags",
      "optional": true,
      "type": "ReactNode[]",
      "doc": "Pills beside the name (e.g. \"VIP\")."
    },
    {
      "name": "backLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "onBack",
      "optional": true,
      "type": "() => void; // lifecycle + stats lifecycle?: { current: string",
      "doc": ""
    },
    {
      "name": "stages",
      "optional": true,
      "type": "LifecycleStage[]",
      "doc": ""
    },
    {
      "name": "daysInStage",
      "optional": true,
      "type": "number }",
      "doc": ""
    },
    {
      "name": "stats",
      "optional": true,
      "type": "ContactStat[]; // overview summary?: ReactNode",
      "doc": ""
    },
    {
      "name": "engagement",
      "optional": true,
      "type": "EngagementScoreProps",
      "doc": ""
    },
    {
      "name": "segments",
      "optional": true,
      "type": "ContactSegment[]",
      "doc": ""
    },
    {
      "name": "goals",
      "optional": true,
      "type": "ContactGoal[]",
      "doc": ""
    },
    {
      "name": "consent",
      "optional": true,
      "type": "ContactConsentRow[]",
      "doc": ""
    },
    {
      "name": "quietHours",
      "optional": true,
      "type": "QuietHoursIndicatorProps",
      "doc": ""
    },
    {
      "name": "contactInfo",
      "optional": true,
      "type": "ContactInfoRow[]",
      "doc": ""
    },
    {
      "name": "additionalInfo",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "editableAdditionalInfo",
      "optional": true,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "activity",
      "optional": true,
      "type": "ReactNode; // data tabs sessions?: SessionCardProps[]",
      "doc": "Overview activity feed — typically an `<ActivityTimeline>`."
    },
    {
      "name": "memories",
      "optional": true,
      "type": "Memory[]",
      "doc": ""
    },
    {
      "name": "keyFacts",
      "optional": true,
      "type": "KeyFact[]",
      "doc": ""
    },
    {
      "name": "notes",
      "optional": true,
      "type": "ContactNote[]; // actions agents?: TriggerableAgent[]",
      "doc": ""
    },
    {
      "name": "onEdit",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onFavourite",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onShare",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onCopyLink",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onExport",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onOptOut",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onMerge",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onDelete",
      "optional": true,
      "type": "() => void; // tabs defaultTab?: string",
      "doc": ""
    },
    {
      "name": "activeTab",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onTabChange",
      "optional": true,
      "type": "(id: string) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "cd-action",
    "cd-activity",
    "cd-additional",
    "cd-additional-hint",
    "cd-back",
    "cd-body",
    "cd-card",
    "cd-card-edit",
    "cd-card-head",
    "cd-card-title",
    "cd-consent-meta",
    "cd-consent-row",
    "cd-goal",
    "cd-goal-check",
    "cd-goal-label",
    "cd-goal-meta",
    "cd-hero",
    "cd-hero-actions",
    "cd-hero-avatar",
    "cd-hero-contact",
    "cd-hero-contact-item",
    "cd-hero-id",
    "cd-hero-id-item",
    "cd-hero-id-sep",
    "cd-hero-ids",
    "cd-hero-lifecycle",
    "cd-hero-name",
    "cd-hero-top",
    "cd-info-grid",
    "cd-main",
    "cd-note",
    "cd-note-meta",
    "cd-notes-list",
    "cd-page",
    "cd-sage-tag",
    "cd-scard",
    "cd-scard-eyebrow",
    "cd-segment",
    "cd-segments",
    "cd-sessions",
    "cd-side",
    "cd-stat",
    "cd-stat-k",
    "cd-stat-m",
    "cd-stat-v",
    "cd-stats",
    "cd-tab",
    "cd-tab-count",
    "cd-tabs",
    "demo",
    "tab",
    "title"
  ],
  "examples": {
    "react": "<ContactDetailPage\n  name={<>Jay <em>Stockwell</em></>} initials=\"JS\"\n  lifecycle={{ current: \"follow-up\", daysInStage: 2 }}\n  sessions={sessions} memories={memories} keyFacts={facts}\n  agents={outboundAgents}\n/>",
    "html": null,
    "css": ".cd-action { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-body); padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--hair); background: var(--bg-paper); color: var(--fg-soft); cursor: pointer; }\n\n.cd-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }\n\n.cd-additional { background: var(--bg); border: 1px solid var(--hair-soft); border-radius: var(--r-md); padding: 12px 14px; font: 400 13px/1.6 var(--f-body); color: var(--fg-soft); outline: none; }\n\n.cd-additional-hint { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 11px/1.3 var(--f-body); color: var(--fg-faint); }\n\n.cd-back { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-dim); background: none; border: 0; cursor: pointer; text-decoration: none; }\n\n.cd-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); margin-top: var(--s-5); }\n\n.cd-card { background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--sh-1); }\n\n.cd-card-edit { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--f-body); color: var(--accent-text); background: none; border: 0; cursor: pointer; }\n\n.cd-card-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }\n\n.cd-card-title { font: 700 14px/1.2 var(--f-display); color: var(--fg); margin: 0; }\n\n.cd-consent-meta { margin-left: auto; font: 500 10px/1 var(--f-mono); color: var(--fg-faint); }\n\n.cd-consent-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--hair-soft); font: 500 12px/1.3 var(--f-body); }\n\n.cd-goal { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; }\n\n.cd-goal-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--success); color: #fff; }\n\n.cd-goal-label { font: 600 13px/1.3 var(--f-body); color: var(--fg); }\n\n.cd-goal-meta { margin-left: auto; font: 500 11px/1 var(--f-mono); color: var(--fg-faint); }\n\n.cd-hero { position: relative; background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-xl); padding: var(--s-5) var(--s-6); box-shadow: var(--sh-2); }\n\n.cd-hero-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }\n\n.cd-hero-avatar { width: 58px; height: 58px; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--pink-300), var(--accent)); color: #fff; font: 700 21px/1 var(--f-display); display: grid; place-items: center; box-shadow: var(--sh-pink); flex: none; }\n\n.cd-hero-contact { position: relative; margin-top: 9px; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; font: 500 12px/1.3 var(--f-body); color: var(--fg-dim); }\n\n.cd-hero-contact-item { display: inline-flex; align-items: center; gap: 5px; }\n\n.cd-hero-id { min-width: 0; flex: 1; }\n\n.cd-hero-id-item { display: inline-flex; align-items: center; gap: 5px; }\n\n.cd-hero-id-sep { color: var(--hair); }\n\n.cd-hero-ids { margin-top: 7px; display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; font: 400 13px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.cd-hero-lifecycle { position: relative; margin-top: var(--s-5); }\n\n.cd-hero-name { font: 700 25px/1.05 var(--f-display); letter-spacing: -0.02em; color: var(--fg); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }\n\n.cd-hero-top { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; }\n\n.cd-info-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); margin: 0; align-items: baseline; }\n\n.cd-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }\n\n.cd-note { background: var(--bg-paper); border: 1px solid v"
  }
}