{
  "name": "FieldMapper",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/FieldMapper.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "field-mapper",
  "elName": "FieldMapper",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#field-mapper",
  "hasLiveDemo": false,
  "description": "Two-column field mapper — left side picks a MagicBlocks data field, right\nside picks the destination/source on an external system (HubSpot deal\nmapping, Calendar field auto-population, CSV column → CRM field, etc.).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "FieldMapper",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "FieldMapperProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "FieldMapperOption",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "FieldMapping",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { FieldMapper } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "FieldMapping[]",
      "doc": "Controlled mappings."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "FieldMapping[]",
      "doc": "Uncontrolled initial mappings."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(mappings: FieldMapping[]) => void",
      "doc": "Fires when mappings change."
    },
    {
      "name": "sourceOptions",
      "optional": false,
      "type": "FieldMapperOption[]",
      "doc": "Source-side options (left column dropdown)."
    },
    {
      "name": "targetOptions",
      "optional": false,
      "type": "FieldMapperOption[]",
      "doc": "Target-side options (right column dropdown)."
    },
    {
      "name": "sourceLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Source column header. Default `\"MagicBlocks field\"`."
    },
    {
      "name": "targetLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Target column header. Default `\"External field\"`."
    },
    {
      "name": "addLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Add-row label. Default `\"+ Add field\"`."
    },
    {
      "name": "emptyLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Empty-state label."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "field-mapper",
    "field-mapper-add",
    "field-mapper-arrow",
    "field-mapper-col-label",
    "field-mapper-empty",
    "field-mapper-head",
    "field-mapper-remove",
    "field-mapper-row",
    "field-mapper-rows",
    "field-mapper-select"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"field-mapper\">\n          <div class=\"field-mapper-head\">\n            <div class=\"field-mapper-col-label\">MagicBlocks field</div>\n            <div class=\"field-mapper-arrow\" aria-hidden=\"true\">&rarr;</div>\n            <div class=\"field-mapper-col-label\">HubSpot property</div>\n            <div aria-hidden=\"true\"></div>\n          </div>\n          <div class=\"field-mapper-rows\">\n            <div class=\"field-mapper-row\">\n              <select class=\"field-mapper-select\" aria-label=\"MagicBlocks field\">\n                <option>Contact &middot; First name</option>\n              </select>\n              <span class=\"field-mapper-arrow\" aria-hidden=\"true\">&rarr;</span>\n              <select class=\"field-mapper-select\" aria-label=\"HubSpot property\">\n                <option>firstname</option>\n              </select>\n              <button type=\"button\" class=\"field-mapper-remove\" aria-label=\"Remove mapping\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n              </button>\n            </div>\n            <div class=\"field-mapper-row\">\n              <select class=\"field-mapper-select\" aria-label=\"MagicBlocks field\">\n                <option>Contact &middot; Email</option>\n              </select>\n              <span class=\"field-mapper-arrow\" aria-hidden=\"true\">&rarr;</span>\n              <select class=\"field-mapper-select\" aria-label=\"HubSpot property\">\n                <option>email</option>\n              </select>\n              <button type=\"button\" class=\"field-mapper-remove\" aria-label=\"Remove mapping\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n              </button>\n            </div>\n            <div class=\"field-mapper-row\">\n              <select class=\"field-mapper-select\" aria-label=\"MagicBlocks field\">\n                <option>Key Fact &middot; Loan purpose</option>\n              </select>\n              <span class=\"field-mapper-arrow\" aria-hidden=\"true\">&rarr;</span>\n              <select class=\"field-mapper-select\" aria-label=\"HubSpot property\">\n                <option>loan_purpose__c (custom)</option>\n              </select>\n              <button type=\"button\" class=\"field-mapper-remove\" aria-label=\"Remove mapping\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M3 3l8 8M11 3l-8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n              </button>\n            </div>\n          </div>\n          <button type=\"button\" class=\"field-mapper-add\">+ Add property</button>\n        </div>",
    "css": ".field-mapper { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.field-mapper-add {\n  align-self: flex-start;\n  appearance: none;\n  background: transparent;\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-sm);\n  padding: 6px 10px;\n  font: 500 12.5px/1 var(--f-body);\n  color: var(--accent);\n  cursor: pointer;\n}\n\n.field-mapper-arrow {\n  text-align: center;\n  font: 400 14px/1 var(--f-body);\n  color: var(--fg-faint);\n}\n\n.field-mapper-col-label {\n  font: 600 10.5px/1 var(--f-mono);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--fg-faint);\n  padding: 0 2px;\n}\n\n.field-mapper-empty {\n  padding: var(--s-3) var(--s-4);\n  border: 1px dashed var(--hair);\n  border-radius: var(--r-md);\n  font: 400 13px/1.4 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.field-mapper-head {\n  display: grid;\n  grid-template-columns: 1fr 24px 1fr 28px;\n  gap: 6px;\n  align-items: center;\n}\n\n.field-mapper-remove {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px; height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-faint);\n  cursor: pointer;\n  border-radius: var(--r-xs);\n}\n\n.field-mapper-row {\n  display: grid;\n  grid-template-columns: 1fr 24px 1fr 28px;\n  gap: 6px;\n  align-items: center;\n}\n\n.field-mapper-rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.field-mapper-select {\n  height: 32px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 13px/1 var(--f-body);\n}"
  }
}