@adia-ai/gen-ui 0.8.37

package/corpus/chunks/import-mapping-flow.json

@@ -0,0 +1,972 @@
+{
+  "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\" size=\"sm\" style=\"--avatar-bg: var(--a-success-bg); --avatar-fg: var(--md-sys-color-success-on-success);\"></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=\"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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\" tone=\"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(--md-sys-color-neutral-outline);\">\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-08-12T02:59:58.757Z",
+  "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": "step-progress",
+      "component": "StepProgress",
+      "caption": "Step 2 of 3 · Map fields",
+      "total": 3,
+      "value": 2
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "text",
+        "text-2",
+        "step-progress"
+      ]
+    },
+    {
+      "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",
+      "icon": "arrow-counter-clockwise",
+      "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-3",
+      "component": "Column",
+      "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-3",
+        "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-4",
+      "component": "Column",
+      "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-4",
+        "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-5",
+      "component": "Column",
+      "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-5",
+        "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-6",
+      "component": "Column",
+      "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-6",
+        "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-7",
+      "component": "Column",
+      "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-7",
+        "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-8",
+      "component": "Column",
+      "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-8",
+        "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-9",
+      "component": "Column",
+      "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-9",
+        "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-10",
+      "component": "Column",
+      "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-10",
+        "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",
+      "tone": "success"
+    },
+    {
+      "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-11",
+      "component": "Column",
+      "gap": "0",
+      "children": [
+        "text-30",
+        "text-31"
+      ]
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "align": "center",
+      "gap": "3",
+      "children": [
+        "check-circle",
+        "column-11"
+      ]
+    },
+    {
+      "id": "column-2",
+      "component": "Column",
+      "gap": "3",
+      "children": [
+        "alert",
+        "import-mapping-list",
+        "row"
+      ]
+    },
+    {
+      "id": "section",
+      "component": "Section",
+      "children": [
+        "column-2"
+      ]
+    },
+    {
+      "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-12",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "text-37"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "Column",
+      "gap": "5",
+      "children": [
+        "column",
+        "card",
+        "card-2",
+        "card-3",
+        "column-12"
+      ]
+    }
+  ]
+}