{
  "name": "ProposalCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ProposalCard.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "proposal-card",
  "elName": "Three states",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#proposal-card",
  "hasLiveDemo": false,
  "description": "Sage's unit of change — a copilot edit as a card the operator stays in\ncharge of. Pending proposals wait for Accept · Adjust · Dismiss; applied\ncards stay reversible with Undo; error cards explain why nothing was\nchanged. Sage only ever edits the working copy — publishing stays human.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ProposalCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ProposalCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ProposalCardState",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ProposalCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "state",
      "optional": true,
      "type": "ProposalCardState",
      "doc": "Card state. Pending awaits a decision; applied is reversible; error explains why nothing changed."
    },
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": "Plain-language title, e.g. \"New key fact: Budget\"."
    },
    {
      "name": "summary",
      "optional": true,
      "type": "ReactNode",
      "doc": "One-line plain-language summary, e.g. \"Asked in Discovery · listened for everywhere\". For `state=\"error\"`, the explanation."
    },
    {
      "name": "diff",
      "optional": true,
      "type": "ReactNode",
      "doc": "The exact change, expandable. Use `.proposal-old` / `.proposal-new` for old → new text."
    },
    {
      "name": "diffLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Disclosure label. Defaults to \"Show exactly what changed\"."
    },
    {
      "name": "onAccept",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onAdjust",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onDismiss",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onUndo",
      "optional": true,
      "type": "() => void",
      "doc": "Applied-state undo. Renders the Undo affordance only when provided."
    },
    {
      "name": "acceptLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "adjustLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "dismissLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "proposal-card",
    "proposal-diff-body",
    "proposal-eyebrow",
    "proposal-summary",
    "proposal-title",
    "proposal-undo",
    "sage-proposal-actions",
    "title"
  ],
  "examples": {
    "react": "<ProposalCard\n  title=\"New key fact: Budget\"\n  summary=\"Asked in Discovery · listened for everywhere\"\n  onAccept={accept}\n  onAdjust={adjust}\n  onDismiss={dismiss}\n/>",
    "html": "<div style=\"display:grid;gap:12px;max-width:380px\"><div class=\"proposal-card is-pending\"><div class=\"proposal-eyebrow\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3.75 14.25L13 5\"></path><path d=\"M11.5 3.5l1 1M14.5 6.5l1 1\"></path><path d=\"M5.5 4.5l.5 1 1 .5-1 .5-.5 1-.5-1-1-.5 1-.5.5-1Z\"></path><path d=\"M14 11l.4.8.8.4-.8.4-.4.8-.4-.8-.8-.4.8-.4.4-.8Z\"></path></svg>Proposal</div><div class=\"proposal-title\">Rewrite the Greeting job</div><div class=\"proposal-summary\"><span class=\"proposal-old\">Warmly greet the user. Introduce yourself as a B2B lead-gen specialist.</span> <span class=\"proposal-new\">Say hi like a person, not a pitch — one line, then ask what brought them in today.</span></div><div class=\"sage-proposal-actions\"><button type=\"button\" class=\"sage-prop-accept\">Accept</button><button type=\"button\" class=\"sage-prop-edit\">Adjust</button><button type=\"button\" class=\"sage-prop-dismiss\">Dismiss</button></div></div><div class=\"proposal-card is-applied\"><div class=\"proposal-eyebrow\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3.5 9.5L7.25 13.25 14.5 5.5\"></path></svg>Applied to your draft</div><div class=\"proposal-title\">New key fact: Budget</div><div class=\"proposal-summary\">Asked in Discovery · listened for everywhere · saves to <code class=\"mono\">{{budget}}</code></div><details class=\"proposal-diff\"><summary>Show exactly what changed</summary><div class=\"proposal-diff-body\">Ask: “Ask about their budget range in a friendly way.” · Listen: “Extract a number or a range; keep the currency.”</div></details><button type=\"button\" class=\"proposal-undo\">Undo</button></div><div class=\"proposal-card is-error\"><div class=\"proposal-eyebrow\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3.75 14.25L13 5\"></path><path d=\"M11.5 3.5l1 1M14.5 6.5l1 1\"></path><path d=\"M5.5 4.5l.5 1 1 .5-1 .5-.5 1-.5-1-1-.5 1-.5.5-1Z\"></path><path d=\"M14 11l.4.8.8.4-.8.4-.4.8-.4-.8-.8-.4.8-.4.4-.8Z\"></path></svg>Couldn&#x27;t make that change</div><div class=\"proposal-title\">Add a key fact to the Pricing block</div><div class=\"proposal-summary\">There&#x27;s no block called Pricing in this journey — nothing was changed. Try Greeting, Discovery or Handoff.</div></div></div>",
    "css": ".proposal-card {\n  background: var(--paper);\n  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);\n  border-radius: var(--r-md);\n  padding: var(--s-3) var(--s-4);\n  display: flex; flex-direction: column; gap: var(--s-2);\n}\n\n.proposal-diff-body {\n  margin-top: var(--s-2); padding: var(--s-2) var(--s-3);\n  background: var(--warm-1); border: 1px solid var(--hair-soft); border-radius: var(--r-sm);\n  font: 400 0.82rem/1.5 var(--f-body); color: var(--fg);\n}\n\n.proposal-eyebrow {\n  display: inline-flex; align-items: center; gap: 6px;\n  font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em;\n  color: var(--accent-text-strong);\n}\n\n.proposal-summary { font: 400 0.82rem/1.45 var(--f-body); color: var(--fg-soft); }\n\n.proposal-title { font: 600 0.88rem/1.3 var(--f-body); color: var(--fg); }\n\n.proposal-undo {\n  align-self: flex-start; border: 0; background: none; padding: 0;\n  font: 600 0.82rem/1 var(--f-body); color: var(--accent-text-strong); cursor: pointer;\n}\n\n.sage-proposal-actions {\n  display: flex; gap: var(--s-2); flex-wrap: wrap;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}