{
  "name": "import-mapping-flow",
  "kind": "block",
  "primary": "col-ui",
  "page": "/catalog/ui-patterns/app/import-mapping/import-mapping.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "5"
  },
  "html": "<col-ui\n    gap=\"5\" style=\"max-width: 880px; margin-inline: auto; padding: var(--a-space-6);\">\n\n  <!-- ═══════════════ Header + step progress ═══════════════ -->\n  <col-ui gap=\"3\">\n    <h1 style=\"margin: 0;\">Import customer data</h1>\n    <text-ui color=\"subtle\">Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import.</text-ui>\n    <!-- step-progress-ui ships with `flex: 0 1 18rem` (designed for the\n         registration shell's row-flex layout). In a col-flex parent that\n         flex-basis becomes a 288px vertical bloat — override here. -->\n    <step-progress-ui value=\"2\" total=\"3\" caption=\"Step 2 of 3 · Map fields\" style=\"flex: none;\"></step-progress-ui>\n  </col-ui>\n\n  <!-- ═══════════════ Step 1 — Upload (collapsed) ═══════════════ -->\n  <card-ui>\n    <header>\n      <span slot=\"icon\"><avatar-ui icon=\"check\" variant=\"success\" size=\"sm\"></avatar-ui></span>\n      <span slot=\"heading\">\n        <text-ui strong>1. Upload file</text-ui>\n        <badge-ui text=\"Done\" variant=\"success\"></badge-ui>\n      </span>\n      <span slot=\"description\">\n        <text-ui color=\"subtle\" size=\"sm\">customers-2026-q1.csv · 1,243 rows · 8 columns</text-ui>\n      </span>\n      <span slot=\"action\">\n        <button-ui text=\"Replace\" variant=\"ghost\" size=\"sm\" icon-leading=\"arrow-counter-clockwise\"></button-ui>\n      </span>\n    </header>\n  </card-ui>\n\n  <!-- ═══════════════ Step 2 — Field mapping (active) ═══════════════ -->\n  <card-ui>\n    <header>\n      <span slot=\"icon\"><avatar-ui icon=\"arrows-horizontal\" size=\"sm\"></avatar-ui></span>\n      <span slot=\"heading\">\n        <text-ui strong>2. Map your columns to our fields</text-ui>\n      </span>\n      <span slot=\"description\">\n        <text-ui color=\"subtle\" size=\"sm\">We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked.</text-ui>\n      </span>\n    </header>\n    <section>\n      <col-ui gap=\"3\">\n        <alert-ui variant=\"info\" icon=\"info\" text=\"Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.\"></alert-ui>\n\n        <!-- Mapping rows — each row is source column + arrow + target dropdown.\n             list-ui[divider] gives us per-row separators; grid-ui inside each\n             row creates the 3-column structure (source | sample | target).\n             NOTE: declarative <tr>/<td> inside <table-ui> would be stripped by\n             the HTML parser (foster-parented). table-ui takes programmatic\n             columns/data; for control-row layouts like this, list-ui composition\n             is the canonical pattern. -->\n        <list-ui id=\"import-mapping-list\" divider>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>full_name</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Avery Chen</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"name\" name=\"map_full_name\">\n                <option value=\"\">Don't import</option>\n                <option value=\"name\" selected>Name</option>\n                <option value=\"email\">Email</option>\n                <option value=\"role\">Role</option>\n                <option value=\"team\">Team</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>email_addr</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">avery@acme.com</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"email\" name=\"map_email_addr\">\n                <option value=\"\">Don't import</option>\n                <option value=\"name\">Name</option>\n                <option value=\"email\" selected>Email (required)</option>\n                <option value=\"role\">Role</option>\n                <option value=\"team\">Team</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>company</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Acme Inc</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"team\" name=\"map_company\">\n                <option value=\"\">Don't import</option>\n                <option value=\"name\">Name</option>\n                <option value=\"email\">Email</option>\n                <option value=\"role\">Role</option>\n                <option value=\"team\" selected>Team / Company</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>job_title</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">Senior Engineer</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"role\" name=\"map_job_title\">\n                <option value=\"\">Don't import</option>\n                <option value=\"name\">Name</option>\n                <option value=\"email\">Email</option>\n                <option value=\"role\" selected>Role / Title</option>\n                <option value=\"team\">Team</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>signup_date</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">2026-03-15</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"\" name=\"map_signup_date\">\n                <option value=\"\" selected>Don't import</option>\n                <option value=\"created_at\">Created at</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>region</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">EMEA</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"\" name=\"map_region\">\n                <option value=\"\" selected>Don't import</option>\n                <option value=\"region\">Region</option>\n                <option value=\"team\">Team</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>notes</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">\"VIP — handle with care\"</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"\" name=\"map_notes\">\n                <option value=\"\" selected>Don't import</option>\n                <option value=\"notes\">Notes</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <grid-ui slot=\"content\" gap=\"3\" style=\"grid-template-columns: 1fr auto 1fr; align-items: center;\">\n              <col-ui gap=\"0\" align=\"end\" style=\"text-align: end;\">\n                <text-ui strong>internal_id</text-ui>\n                <text-ui color=\"subtle\" size=\"sm\">cust_5392</text-ui>\n              </col-ui>\n              <icon-ui name=\"arrow-right\" color=\"subtle\" style=\"justify-self: center;\"></icon-ui>\n              <select-ui value=\"\" name=\"map_internal_id\">\n                <option value=\"\" selected>Don't import</option>\n                <option value=\"external_id\">External ID</option>\n              </select-ui>\n            </grid-ui>\n          </list-item-ui>\n        </list-ui>\n\n        <!-- Validation summary — what'll get imported -->\n        <row-ui gap=\"3\" align=\"center\" style=\"background: var(--a-bg-muted); padding: var(--a-space-3); border-radius: var(--a-radius-md);\">\n          <icon-ui name=\"check-circle\" color=\"success\"></icon-ui>\n          <col-ui gap=\"0\" style=\"flex: 1;\">\n            <text-ui strong>4 fields mapped · 4 columns skipped</text-ui>\n            <text-ui color=\"subtle\" size=\"sm\">1,243 rows ready to import. Email column passed validation (no malformed addresses).</text-ui>\n          </col-ui>\n        </row-ui>\n      </col-ui>\n    </section>\n    <footer slot=\"footer\">\n      <row-ui gap=\"2\" justify=\"space-between\" style=\"width: 100%;\">\n        <button-ui text=\"Back\" variant=\"ghost\"></button-ui>\n        <row-ui gap=\"2\">\n          <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n          <button-ui text=\"Preview import →\" variant=\"primary\"></button-ui>\n        </row-ui>\n      </row-ui>\n    </footer>\n  </card-ui>\n\n  <!-- ═══════════════ Step 3 — Preview (pending) ═══════════════ -->\n  <card-ui>\n    <header>\n      <span slot=\"icon\"><avatar-ui icon=\"eye\" size=\"sm\"></avatar-ui></span>\n      <span slot=\"heading\">\n        <text-ui strong color=\"subtle\">3. Preview &amp; confirm</text-ui>\n      </span>\n      <span slot=\"description\">\n        <text-ui color=\"subtle\" size=\"sm\">Final check before we commit 1,243 rows.</text-ui>\n      </span>\n    </header>\n  </card-ui>\n\n  <!-- Composition notes (rendered as a footnote for the demo, not part of\n       the production UI). Helps future authors understand why this shape. -->\n  <col-ui gap=\"2\" style=\"margin-top: var(--a-space-6); padding-block-start: var(--a-space-5); border-top: 1px solid var(--a-border);\">\n    <text-ui size=\"sm\" color=\"subtle\"><strong>Composition rules.</strong> Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative &lt;tr&gt; inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.</text-ui>\n  </col-ui>\n\n</col-ui>",
  "source": "catalog/ui-patterns/app/import-mapping/import-mapping.contents.html",
  "metadata": {
    "domain": "data-management",
    "description": "Multi-step CSV/file import flow — upload, field mapping (source columns ↔ target fields), preview, import. Shows the field-mapping step prominently since it's the part most often missing from import patterns.",
    "keywords": [
      "import",
      "csv",
      "upload",
      "mapping",
      "fields",
      "columns",
      "bulk",
      "data",
      "migration"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "display",
      "textContent": "Import customer data"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "textContent": "Upload a CSV or JSON file, map your columns to our fields, then preview before committing the import."
    },
    {
      "id": "column-2",
      "component": "Column"
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "text",
        "text-2",
        "column-2"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "icon": "check",
      "size": "sm"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "avatar"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "strong": true,
      "textContent": "1. Upload file"
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "Done",
      "variant": "success"
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-5",
        "badge"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "customers-2026-q1.csv · 1,243 rows · 8 columns"
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "children": [
        "text-7"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "size": "sm",
      "text": "Replace",
      "variant": "ghost"
    },
    {
      "id": "text-8",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text-3",
        "text-4",
        "text-6",
        "text-8"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header"
      ]
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "icon": "arrows-horizontal",
      "size": "sm"
    },
    {
      "id": "text-9",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "avatar-2"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "strong": true,
      "textContent": "2. Map your columns to our fields"
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-11"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "We auto-detected 5 of 8 columns. Review and adjust before continuing — required fields are marked."
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "children": [
        "text-13"
      ]
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-9",
        "text-10",
        "text-12"
      ]
    },
    {
      "id": "alert",
      "component": "Alert",
      "icon": "info",
      "text": "Pro tip — pick 'Don't import' to skip a column. You can always re-run the import to bring more fields later.",
      "variant": "info"
    },
    {
      "id": "text-14",
      "component": "Text",
      "strong": true,
      "textContent": "full_name"
    },
    {
      "id": "text-15",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Avery Chen"
    },
    {
      "id": "column-4",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-14",
        "text-15"
      ]
    },
    {
      "id": "arrow-right",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-full-name",
      "component": "ChoicePicker",
      "name": "map_full_name",
      "value": "name",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "name",
          "label": "Name"
        },
        {
          "value": "email",
          "label": "Email"
        },
        {
          "value": "role",
          "label": "Role"
        },
        {
          "value": "team",
          "label": "Team"
        }
      ]
    },
    {
      "id": "grid",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-4",
        "arrow-right",
        "map-full-name"
      ]
    },
    {
      "id": "list-item",
      "component": "ListItem",
      "children": [
        "grid"
      ]
    },
    {
      "id": "text-16",
      "component": "Text",
      "strong": true,
      "textContent": "email_addr"
    },
    {
      "id": "text-17",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "avery@acme.com"
    },
    {
      "id": "column-5",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-16",
        "text-17"
      ]
    },
    {
      "id": "icon",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-email-addr",
      "component": "ChoicePicker",
      "name": "map_email_addr",
      "value": "email",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "name",
          "label": "Name"
        },
        {
          "value": "email",
          "label": "Email (required)"
        },
        {
          "value": "role",
          "label": "Role"
        },
        {
          "value": "team",
          "label": "Team"
        }
      ]
    },
    {
      "id": "grid-2",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-5",
        "icon",
        "map-email-addr"
      ]
    },
    {
      "id": "list-item-2",
      "component": "ListItem",
      "children": [
        "grid-2"
      ]
    },
    {
      "id": "text-18",
      "component": "Text",
      "strong": true,
      "textContent": "company"
    },
    {
      "id": "text-19",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Acme Inc"
    },
    {
      "id": "column-6",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-18",
        "text-19"
      ]
    },
    {
      "id": "icon-2",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-company",
      "component": "ChoicePicker",
      "name": "map_company",
      "value": "team",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "name",
          "label": "Name"
        },
        {
          "value": "email",
          "label": "Email"
        },
        {
          "value": "role",
          "label": "Role"
        },
        {
          "value": "team",
          "label": "Team / Company"
        }
      ]
    },
    {
      "id": "grid-3",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-6",
        "icon-2",
        "map-company"
      ]
    },
    {
      "id": "list-item-3",
      "component": "ListItem",
      "children": [
        "grid-3"
      ]
    },
    {
      "id": "text-20",
      "component": "Text",
      "strong": true,
      "textContent": "job_title"
    },
    {
      "id": "text-21",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Senior Engineer"
    },
    {
      "id": "column-7",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-20",
        "text-21"
      ]
    },
    {
      "id": "icon-3",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-job-title",
      "component": "ChoicePicker",
      "name": "map_job_title",
      "value": "role",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "name",
          "label": "Name"
        },
        {
          "value": "email",
          "label": "Email"
        },
        {
          "value": "role",
          "label": "Role / Title"
        },
        {
          "value": "team",
          "label": "Team"
        }
      ]
    },
    {
      "id": "grid-4",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-7",
        "icon-3",
        "map-job-title"
      ]
    },
    {
      "id": "list-item-4",
      "component": "ListItem",
      "children": [
        "grid-4"
      ]
    },
    {
      "id": "text-22",
      "component": "Text",
      "strong": true,
      "textContent": "signup_date"
    },
    {
      "id": "text-23",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2026-03-15"
    },
    {
      "id": "column-8",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-22",
        "text-23"
      ]
    },
    {
      "id": "icon-4",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-signup-date",
      "component": "ChoicePicker",
      "name": "map_signup_date",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "created_at",
          "label": "Created at"
        }
      ],
      "value": ""
    },
    {
      "id": "grid-5",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-8",
        "icon-4",
        "map-signup-date"
      ]
    },
    {
      "id": "list-item-5",
      "component": "ListItem",
      "children": [
        "grid-5"
      ]
    },
    {
      "id": "text-24",
      "component": "Text",
      "strong": true,
      "textContent": "region"
    },
    {
      "id": "text-25",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "EMEA"
    },
    {
      "id": "column-9",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-24",
        "text-25"
      ]
    },
    {
      "id": "icon-5",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-region",
      "component": "ChoicePicker",
      "name": "map_region",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "region",
          "label": "Region"
        },
        {
          "value": "team",
          "label": "Team"
        }
      ],
      "value": ""
    },
    {
      "id": "grid-6",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-9",
        "icon-5",
        "map-region"
      ]
    },
    {
      "id": "list-item-6",
      "component": "ListItem",
      "children": [
        "grid-6"
      ]
    },
    {
      "id": "text-26",
      "component": "Text",
      "strong": true,
      "textContent": "notes"
    },
    {
      "id": "text-27",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "\"VIP — handle with care\""
    },
    {
      "id": "column-10",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-26",
        "text-27"
      ]
    },
    {
      "id": "icon-6",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-notes",
      "component": "ChoicePicker",
      "name": "map_notes",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "notes",
          "label": "Notes"
        }
      ],
      "value": ""
    },
    {
      "id": "grid-7",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-10",
        "icon-6",
        "map-notes"
      ]
    },
    {
      "id": "list-item-7",
      "component": "ListItem",
      "children": [
        "grid-7"
      ]
    },
    {
      "id": "text-28",
      "component": "Text",
      "strong": true,
      "textContent": "internal_id"
    },
    {
      "id": "text-29",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "cust_5392"
    },
    {
      "id": "column-11",
      "component": "Column",
      "align": "end",
      "gap": "0",
      "children": [
        "text-28",
        "text-29"
      ]
    },
    {
      "id": "icon-7",
      "component": "Icon",
      "name": "arrow-right"
    },
    {
      "id": "map-internal-id",
      "component": "ChoicePicker",
      "name": "map_internal_id",
      "options": [
        {
          "value": "",
          "label": "Don't import"
        },
        {
          "value": "external_id",
          "label": "External ID"
        }
      ],
      "value": ""
    },
    {
      "id": "grid-8",
      "component": "Grid",
      "slot": "content",
      "gap": "3",
      "children": [
        "column-11",
        "icon-7",
        "map-internal-id"
      ]
    },
    {
      "id": "list-item-8",
      "component": "ListItem",
      "children": [
        "grid-8"
      ]
    },
    {
      "id": "import-mapping-list",
      "component": "List",
      "divider": true,
      "children": [
        "list-item",
        "list-item-2",
        "list-item-3",
        "list-item-4",
        "list-item-5",
        "list-item-6",
        "list-item-7",
        "list-item-8"
      ]
    },
    {
      "id": "check-circle",
      "component": "Icon",
      "name": "check-circle"
    },
    {
      "id": "text-30",
      "component": "Text",
      "strong": true,
      "textContent": "4 fields mapped · 4 columns skipped"
    },
    {
      "id": "text-31",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "1,243 rows ready to import. Email column passed validation (no malformed addresses)."
    },
    {
      "id": "column-12",
      "component": "Column",
      "gap": "0",
      "children": [
        "text-30",
        "text-31"
      ]
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "check-circle",
        "column-12"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "3",
      "children": [
        "alert",
        "import-mapping-list",
        "row"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "button-2",
      "component": "Button",
      "text": "Back",
      "variant": "ghost"
    },
    {
      "id": "button-3",
      "component": "Button",
      "text": "Cancel",
      "variant": "outline"
    },
    {
      "id": "button-4",
      "component": "Button",
      "text": "Preview import →",
      "variant": "primary"
    },
    {
      "id": "row-3",
      "component": "Row",
      "gap": "2",
      "children": [
        "button-3",
        "button-4"
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "gap": "2",
      "justify": "space-between",
      "children": [
        "button-2",
        "row-3"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "slot": "footer",
      "children": [
        "row-2"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "header-2",
        "section",
        "footer"
      ]
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "icon": "eye",
      "size": "sm"
    },
    {
      "id": "text-32",
      "component": "Text",
      "variant": "body",
      "slot": "icon",
      "children": [
        "avatar-3"
      ]
    },
    {
      "id": "text-34",
      "component": "Text",
      "color": "subtle",
      "strong": true,
      "textContent": "3. Preview &amp; confirm"
    },
    {
      "id": "text-33",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-34"
      ]
    },
    {
      "id": "text-36",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Final check before we commit 1,243 rows."
    },
    {
      "id": "text-35",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "children": [
        "text-36"
      ]
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-32",
        "text-33",
        "text-35"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "header-3"
      ]
    },
    {
      "id": "text-38",
      "component": "Text",
      "variant": "body",
      "textContent": "Composition rules."
    },
    {
      "id": "text-37",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Three steps: upload → map → preview, each as a card-ui with header (icon + heading + status badge). The mapping itself is a list-ui[divider] of source-column / target-field rows — NOT a table-ui (the HTML parser strips declarative &lt;tr&gt; inside custom elements; table-ui takes programmatic .columns/.data instead). Each row is a 3-col grid (source label + sample → arrow → target select). The \"fields mapped\" summary lives at the bottom of the active card; the footer action bar carries Back + Cancel + primary Continue.",
      "children": [
        "text-38"
      ]
    },
    {
      "id": "column-13",
      "component": "Column",
      "gap": "2",
      "children": [
        "text-37"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "gap": "5",
      "children": [
        "column",
        "card",
        "card-2",
        "card-3",
        "column-13"
      ]
    }
  ]
}