makersclaw 0.1.0 → 0.3.0

package/registry/blocks/csv-import/README.md

@@ -0,0 +1,133 @@
+# CsvImport
+
+Bring rows in from a CSV in three steps. **Upload**: drop a file or browse
+(or paste the text, or download a template of your fields to fill in).
+**Match columns**: each column in the file, with a few of its values,
+beside the field it goes to — matched for you by name and common synonyms
+("E-mail address" → Email, "Organization" → Company), changeable, or
+"Don't import"; required fields that are still unmatched are named.
+**Review**: every row in an editable spreadsheet. A cell that does not fit
+its field ("last spring" in a date, "abc" in an amount, a missing required
+value) keeps its text and gets a red corner; click it and type the right
+value, delete the row, or leave the rows with problems out. Then one
+**Import** — nothing is saved before it.
+
+With no `fields`, it makes a new table instead: each column becomes a
+field whose name you can change and whose type is guessed from its values
+(number, currency, date, checkbox, link, single or multiple select, text).
+
+The CSV is read by [papaparse](https://www.papaparse.com) (MIT): commas,
+tabs, semicolons or pipes (guessed), quoted cells with commas and
+newlines, a byte-order mark. Typed values come from the spreadsheet
+block's column types, so "$1,250" is 1250 and "11/02/2024" is a day.
+
+```jsx
+import { CsvImport } from "../components/blocks/csv-import";   // a Makersclaw app ("./blocks/csv-import" from components/)
+import { CsvImport } from "@/components/makersclaw/blocks/csv-import";   // a shadcn project
+```
+
+It is a client component. `makersclaw add csv-import` adds the
+spreadsheet block (it requires it) and `papaparse` (pinned, exact): run
+`npm install` after.
+
+## The data
+
+`fields` are the spreadsheet's columns — the same shape, the same types
+(its README, "The data"):
+
+```js
+const FIELDS = [
+  { key: "name", name: "Name", type: "text", required: true },
+  { key: "email", name: "Email", type: "text", required: true },
+  { key: "stage", name: "Stage", type: "select", options: [{ value: "lead", label: "Lead", hue: 2 }] },
+  { key: "mrr", name: "MRR", type: "currency", precision: 0 },
+  { key: "owner", name: "Owner", type: "person" },     // matched by name, first name, email or id in `people`
+  { key: "since", name: "Customer since", type: "date" },
+];
+```
+
+`onImport` receives `{ rows, columns, skipped }`:
+
+- `rows` — typed values keyed by field (`{ id, name: "Ada", mrr: 1250,
+  since: "2025-03-14", … }`). The `id` is a temporary one ("import-3");
+  drop it and let the database make its own.
+- `columns` — the fields the rows use. Into existing fields, a select
+  value that was not an option yet ("Trial") arrives as a new option on
+  its field (`hue` set): save the options with the rows. As a new table,
+  these are the new table's fields.
+- `skipped` — how many rows with problems were left out.
+
+## Props
+
+- `onImport({ rows, columns, skipped })` — required; async, answers
+  `{ ok: true }` (optionally `imported`: the count you actually saved) or
+  `{ ok: false, error }`. A failure keeps everything as it was and shows
+  the error; the person can try again.
+- `fields` — the table to import into. Leave it out to make a new table.
+  Read-only and computed fields are not offered.
+- `people` — `[{ id, name, email? }]`, for `person` fields.
+- `noun` — what a row is (`"contact"`): "Import 8 contacts". Default
+  `"row"`.
+- `title` — the heading (default "Import contacts from a CSV");
+  `description` — the line under it.
+- `maxRows` — the most rows one file may hold (`50000`).
+- `example` — `{ key: value }` for the template's example line (with
+  `fields`, "Download a template" writes the field names and this line).
+  `templateName` — the template's file name (`"contacts-template.csv"`).
+- `initialText` — CSV text to start from (skips the upload step);
+  `initialName` — what to call it (`"Pasted text"`).
+- `onCancel` — shows Cancel on the first step.
+- `onDone` — the success screen's main button (`doneLabel`, default
+  "View contacts"); without it only "Import another file" shows.
+- `locale` — for amounts and dates; `today` — `"YYYY-MM-DD"` for the date
+  picker.
+
+The helpers, for a flow of your own: `parseCsvText(text)` → `{ data,
+delimiter, errors }` · `readCsvFile(file)` · `headersOf(data, hasHeader)` ·
+`autoMatch(headers, fields)` → a field key (or null) per column ·
+`guessColumns(headers, body)` → new fields with types and options ·
+`buildRows(body, mapping, fields, { ctx })` → `{ rows, problems,
+creates, fields }` (each row's `__problems` is `{ key: message }`) ·
+`cleanRow(row)` · `templateCsv(fields, example)`.
+
+## Example
+
+```jsx
+"use client";
+import { useRouter } from "next/navigation";
+import { insertRow } from "../lib/actions";
+import { CsvImport } from "./blocks/csv-import";
+
+export default function ImportContacts({ fields, team }) {
+  const router = useRouter();
+  return (
+    <CsvImport
+      fields={fields}
+      people={team}
+      noun="contact"
+      onImport={async ({ rows }) => {
+        let imported = 0;
+        for (const { id, ...values } of rows) {
+          const r = await insertRow({ source: "public.contacts", values });
+          if (!r.ok) return { ok: false, error: `Stopped after ${imported} contacts: ${r.error}` };
+          imported++;
+        }
+        return { ok: true, imported };
+      }}
+      onDone={() => router.push("/contacts")}
+    />
+  );
+}
+```
+
+## What it will not do
+
+- Excel files (.xlsx) are not read: save the sheet as CSV first (the
+  upload step says so when one is dropped).
+- No merging with rows already in the table (update by email, skip
+  duplicates): every imported row is new. Match on your side in
+  `onImport` if you need it.
+- One file at a time; nothing is uploaded or kept — the rows go to
+  `onImport` and nowhere else.
+- The review can fix cells and delete rows, not add rows or change the
+  target fields (as a new table, it can rename and retype them).

package/registry/blocks/csv-import/block.json

@@ -0,0 +1,13 @@
+{
+  "name": "csv-import",
+  "title": "CsvImport",
+  "description": "Import a CSV in three calm steps: drop a file (or paste text, or download a template), match each file column to a field with automatic matches and sample values (or, with no fields, name and type a new table's fields from guessed types), then review every row in an editable spreadsheet where cells that do not fit their type are marked red and fixed in place, delete rows or leave the bad ones out, and import through one async onImport that answers { ok }. Quoted commas and newlines, TSV and semicolon files, byte-order marks, 50,000 rows.",
+  "useWhen": "People bring records in from a spreadsheet or another tool: contacts, leads, products, a price list, an old CRM export, a first table for a new app. Built on spreadsheet. Not for uploading files to keep (file-upload) or for editing records already in the app (spreadsheet, data-table).",
+  "tags": ["csv", "import", "upload", "tsv", "excel", "spreadsheet", "map columns", "field mapping", "validate", "bulk", "papaparse", "migration", "onboarding", "template"],
+  "exports": ["CsvImport", "parseCsvText", "readCsvFile", "headersOf", "autoMatch", "guessColumns", "buildRows", "cleanRow", "templateCsv"],
+  "files": ["index.js", "csv-import.jsx", "import.js"],
+  "requires": ["spreadsheet"],
+  "dependencies": {
+    "papaparse": "5.7.0"
+  }
+}

package/registry/blocks/csv-import/csv-import.jsx

@@ -0,0 +1,479 @@
+"use client";
+
+// CsvImport: a CSV in, typed rows out, in three steps — Upload, Match
+// columns, Review — then one call to onImport. Nothing is saved before
+// that call. The review is a Spreadsheet: a cell that did not fit its
+// field keeps its text and a red corner, and is fixed in place.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Card, FileDrop, Icon, Input, Notice, Select, Skeleton, Steps, Switch, Textarea, ToggleGroup, cx } from "../../ui";
+import { Spreadsheet, TYPE_ORDER, typeOf } from "../spreadsheet";
+import { autoMatch, buildRows, cleanRow, guessColumns, headersOf, parseCsvText, readCsvFile, templateCsv } from "./import";
+
+const STEPS = ["Upload", "Match columns", "Review"];
+const ACCEPT = ".csv,.tsv,.txt,text/csv,text/tab-separated-values,text/plain";
+
+const plural = (n, noun) => `${n.toLocaleString()} ${n === 1 ? noun : `${noun}s`}`;
+
+// What the review grid marks: the text that did not fit (kept on the row).
+const problemOf = (row, col) => row.__problems?.[col.key] ?? null;
+
+function hasProblem(row, cols) {
+  if (row.__problems && Object.keys(row.__problems).length) return true;
+  return cols.some((c) => c.required && typeOf(c).empty(row[c.key]));
+}
+
+export function CsvImport({
+  fields,
+  onImport,
+  people,
+  noun = "row",
+  title,
+  description,
+  maxRows = 50000,
+  example,
+  templateName,
+  onCancel,
+  onDone,
+  doneLabel,
+  locale,
+  today,
+  initialText,
+  initialName = "Pasted text",
+  className,
+}) {
+  const intoTable = Array.isArray(fields) && fields.length > 0;
+  const ctx = useMemo(() => ({ people: people ?? [], locale }), [people, locale]);
+
+  const [step, setStep] = useState("upload");
+  const [error, setError] = useState(null);
+  const [reading, setReading] = useState(false);
+  const [pasting, setPasting] = useState(false);
+  const [pasted, setPasted] = useState("");
+  const [source, setSource] = useState(null); // { name, data }
+  const [hasHeader, setHasHeader] = useState(true);
+  const [mapping, setMapping] = useState([]); // file column → field key | null
+  const [newCols, setNewCols] = useState([]); // a new table's fields, one per file column (type "" = skip)
+  const [rows, setRows] = useState([]);
+  const [cols, setCols] = useState([]);
+  const [only, setOnly] = useState("all");
+  const [skipBad, setSkipBad] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+
+  const headers = useMemo(() => (source ? headersOf(source.data, hasHeader) : []), [source, hasHeader]);
+  const body = useMemo(() => (source ? source.data.slice(hasHeader ? 1 : 0) : []), [source, hasHeader]);
+
+  // ── step 1: a file (or pasted text) ──────────────────────────────────
+  function take(name, parsed) {
+    if (parsed.errors.length && !parsed.data.length) {
+      setError("We couldn’t read that file. Save it as CSV (comma separated) and try again.");
+      return;
+    }
+    if (parsed.data.length === 0 || (parsed.data.length === 1 && parsed.data[0].every((c) => !c.trim()))) {
+      setError("That file is empty. Check it has a row of column names and at least one row under it.");
+      return;
+    }
+    if (parsed.data.length - 1 > maxRows) {
+      setError(`That file has ${parsed.data.length.toLocaleString()} rows; this import takes up to ${maxRows.toLocaleString()}. Split it and import each part.`);
+      return;
+    }
+    const hs = headersOf(parsed.data, true);
+    setError(null);
+    setSource({ name, data: parsed.data });
+    setHasHeader(true);
+    setMapping(intoTable ? autoMatch(hs, fields) : hs.map(() => null));
+    setNewCols(intoTable ? [] : guessColumns(hs, parsed.data.slice(1)));
+    setStep("match");
+  }
+
+  // Text handed in (a paste the host already has) skips the upload step.
+  const started = useRef(false);
+  useEffect(() => {
+    if (!initialText || started.current) return;
+    started.current = true;
+    take(initialName, parseCsvText(initialText));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialText]);
+
+  async function onFiles([file]) {
+    if (!file) return;
+    setReading(true);
+    setError(null);
+    try {
+      take(file.name, await readCsvFile(file));
+    } catch {
+      setError("We couldn’t open that file. Try saving it again as CSV.");
+    } finally {
+      setReading(false);
+    }
+  }
+
+  function onHeaderToggle(on) {
+    setHasHeader(on);
+    if (!source) return;
+    const hs = headersOf(source.data, on);
+    const rest = source.data.slice(on ? 1 : 0);
+    if (intoTable) setMapping(on ? autoMatch(hs, fields) : hs.map((_, i) => mapping[i] ?? null));
+    else setNewCols(guessColumns(hs, rest));
+  }
+
+  function downloadTemplate() {
+    const blob = new Blob([templateCsv(fields, example)], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = templateName ?? `${noun}s-template.csv`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  // ── step 2: which column fills which field ───────────────────────────
+  const targetFields = intoTable ? fields.filter((f) => !f.readOnly && !f.computed) : [];
+  const used = new Set(mapping.filter(Boolean));
+  const missing = intoTable ? targetFields.filter((f) => f.required && !used.has(f.key)) : [];
+  const importedCount = intoTable ? mapping.filter(Boolean).length : newCols.filter((c) => c.type).length;
+  const namesClash = !intoTable && new Set(newCols.filter((c) => c.type).map((c) => c.name.trim().toLowerCase())).size !== newCols.filter((c) => c.type).length;
+  const blankName = !intoTable && newCols.some((c) => c.type && !c.name.trim());
+
+  function setTarget(i, key) {
+    setMapping((m) => m.map((k, j) => (j === i ? key || null : key && k === key ? null : k)));
+  }
+
+  function toReview() {
+    const targetCols = intoTable ? fields : newCols.filter((c) => c.type).map((c) => ({ ...c, name: c.name.trim() }));
+    const map = intoTable ? mapping : newCols.map((c) => (c.type ? c.key : null));
+    const built = buildRows(body, map, targetCols, { ctx });
+    const shown = intoTable ? built.fields.filter((f) => map.includes(f.key) || f.required) : built.fields;
+    setRows(built.rows);
+    setCols(shown);
+    setOnly(built.problems ? "problems" : "all");
+    setSkipBad(false);
+    setResult(null);
+    setError(null);
+    setStep("review");
+  }
+
+  // ── step 3: fix, then import ─────────────────────────────────────────
+  const bad = useMemo(() => rows.filter((r) => hasProblem(r, cols)), [rows, cols]);
+  const toImport = useMemo(() => (skipBad ? rows.filter((r) => !hasProblem(r, cols)) : rows), [rows, cols, skipBad]);
+  const blocked = !skipBad && bad.length > 0;
+  const showBad = only === "problems" && bad.length > 0;
+  const shownRows = showBad ? bad : rows;
+
+  async function runImport() {
+    setBusy(true);
+    setError(null);
+    let res;
+    try {
+      res = (await onImport?.({ rows: toImport.map(cleanRow), columns: cols, skipped: rows.length - toImport.length })) ?? { ok: true };
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    setBusy(false);
+    if (!res.ok) {
+      setError(res.error ?? "The import did not go through. Nothing was saved — try again.");
+      return;
+    }
+    setResult({ imported: res.imported ?? toImport.length, skipped: rows.length - toImport.length });
+    setStep("done");
+  }
+
+  function restart() {
+    setStep("upload");
+    setSource(null);
+    setRows([]);
+    setCols([]);
+    setPasted("");
+    setPasting(false);
+    setError(null);
+    setResult(null);
+  }
+
+  const stepIndex = STEPS.indexOf(step === "upload" ? "Upload" : step === "match" ? "Match columns" : "Review");
+  const heading = title ?? `Import ${noun}s from a CSV`;
+
+  // ── drawing ──────────────────────────────────────────────────────────
+  if (step === "done" && result) {
+    return (
+      <Card className={cx("mx-auto w-full max-w-xl", className)}>
+        <div className="grid justify-items-center gap-3 py-8 text-center">
+          <span className="grid size-12 place-items-center rounded-full bg-success/15 text-success">
+            <Icon name="check" size={24} />
+          </span>
+          <h3 className="text-lg font-semibold">{plural(result.imported, noun)} imported</h3>
+          <p className="max-w-sm text-sm text-muted-foreground">
+            {result.skipped ? `${plural(result.skipped, "row")} with problems ${result.skipped === 1 ? "was" : "were"} left out.` : `Every row in ${source?.name ?? "the file"} came in.`}
+          </p>
+          <div className="mt-2 flex flex-wrap justify-center gap-2">
+            <Button onClick={restart}>Import another file</Button>
+            {onDone ? (
+              <Button variant="primary" onClick={onDone}>
+                {doneLabel ?? `View ${noun}s`}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className={cx("grid min-w-0 gap-5", className)}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="grid gap-1">
+          <h2 className="text-lg font-semibold">{heading}</h2>
+          <p className="max-w-prose text-sm text-muted-foreground">
+            {description ?? "Bring rows in from a spreadsheet or another tool. Nothing is saved until you press Import."}
+          </p>
+        </div>
+        <Steps steps={STEPS} current={stepIndex} size="sm" label="Import progress" hideLabel className="w-full max-w-xs" />
+      </div>
+
+      {error ? (
+        <Notice tone="danger" title="That didn’t work" onDismiss={() => setError(null)}>
+          {error}
+        </Notice>
+      ) : null}
+
+      {step === "upload" ? (
+        <div className="grid gap-3">
+          {reading ? (
+            <div className="grid gap-3 rounded-lg border border-dashed border-border p-8" aria-busy="true">
+              <p className="text-sm text-muted-foreground">Reading the file…</p>
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          ) : pasting ? (
+            <div className="grid gap-3">
+              <Textarea
+                rows={8}
+                aria-label="CSV text"
+                placeholder={intoTable ? `${fields.map((f) => f.name).join(",")}\n…` : "Name,Email,Amount\nAda Lovelace,ada@example.com,1200"}
+                value={pasted}
+                onChange={(e) => setPasted(e.target.value)}
+                className="font-mono text-xs"
+              />
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <Button variant="quiet" onClick={() => setPasting(false)}>
+                  Upload a file instead
+                </Button>
+                <Button variant="primary" disabled={!pasted.trim()} onClick={() => take("Pasted text", parseCsvText(pasted))}>
+                  Continue
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <FileDrop
+              accept={ACCEPT}
+              onFiles={onFiles}
+              onReject={() => setError("That is not a CSV file. Export the sheet as CSV (File → Download → CSV) and drop that.")}
+              label="Drop a CSV file here, or browse"
+              hint={`CSV or TSV, up to ${maxRows.toLocaleString()} rows. The first row should name the columns.`}
+            />
+          )}
+          {!reading && !pasting ? (
+            <div className="flex flex-wrap items-center justify-between gap-2 text-sm">
+              <Button variant="link" size="sm" tone="muted" onClick={() => setPasting(true)}>
+                Paste the text instead
+              </Button>
+              <div className="flex items-center gap-3">
+                {intoTable ? (
+                  <Button variant="link" size="sm" tone="muted" icon="download" onClick={downloadTemplate}>
+                    Download a template
+                  </Button>
+                ) : null}
+                {onCancel ? (
+                  <Button variant="quiet" onClick={onCancel}>
+                    Cancel
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {step === "match" && source ? (
+        <div className="grid gap-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <p className="flex min-w-0 items-center gap-2 text-sm">
+              <Icon name="file" className="shrink-0 text-muted-foreground" />
+              <span className="truncate font-medium">{source.name}</span>
+              <span className="shrink-0 text-muted-foreground">· {plural(body.length, "row")}</span>
+            </p>
+            <Switch id="csv-has-header" label="First row names the columns" checked={hasHeader} onChange={(e) => onHeaderToggle(e.target.checked)} />
+          </div>
+          {missing.length ? (
+            <Notice tone="warning" title={missing.length === 1 ? `${missing[0].name} is required` : "Some fields are required"}>
+              Pick the column that holds {missing.map((f) => f.name).join(", ")}.
+            </Notice>
+          ) : null}
+          <div className="overflow-hidden rounded-lg border border-border">
+            <div className="hidden grid-cols-[minmax(0,1fr)_1.5rem_minmax(0,18rem)] gap-3 border-b border-border bg-muted px-4 py-2 text-xs font-medium text-muted-foreground sm:grid">
+              <span>In your file</span>
+              <span />
+              <span>{intoTable ? "Goes to" : "Becomes the field"}</span>
+            </div>
+            <ul className="divide-y divide-border">
+              {headers.map((h, i) => {
+                const samples = body
+                  .slice(0, 40)
+                  .map((r) => (r[i] ?? "").trim())
+                  .filter(Boolean)
+                  .slice(0, 3);
+                const target = intoTable ? mapping[i] : newCols[i]?.type ? newCols[i].key : null;
+                return (
+                  <li key={i} className="grid gap-2 px-4 py-3 sm:grid-cols-[minmax(0,1fr)_1.5rem_minmax(0,18rem)] sm:items-center sm:gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-medium">{h}</p>
+                      <p className="truncate text-xs text-muted-foreground">{samples.length ? samples.join(" · ") : "Empty in the first rows"}</p>
+                    </div>
+                    <Icon name="arrow-right" className={cx("hidden sm:block", target ? "text-primary" : "text-muted-foreground")} />
+                    {intoTable ? (
+                      <Select
+                        aria-label={`Field for ${h}`}
+                        value={mapping[i] ?? ""}
+                        onChange={(e) => setTarget(i, e.target.value)}
+                        options={[
+                          { value: "", label: "Don’t import" },
+                          ...targetFields.map((f) => ({
+                            value: f.key,
+                            label: `${f.name}${f.required ? " (required)" : ""}${used.has(f.key) && mapping[i] !== f.key ? " — in use" : ""}`,
+                          })),
+                        ]}
+                      />
+                    ) : (
+                      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,9rem)] gap-2">
+                        <Input
+                          aria-label={`Name for ${h}`}
+                          value={newCols[i]?.name ?? ""}
+                          disabled={!newCols[i]?.type}
+                          invalid={Boolean(newCols[i]?.type) && !newCols[i]?.name.trim()}
+                          onChange={(e) => setNewCols((cs) => cs.map((c, j) => (j === i ? { ...c, name: e.target.value } : c)))}
+                        />
+                        <Select
+                          aria-label={`Type for ${h}`}
+                          value={newCols[i]?.type ?? ""}
+                          onChange={(e) =>
+                            setNewCols((cs) =>
+                              cs.map((c, j) => {
+                                if (j !== i) return c;
+                                const type = e.target.value;
+                                if (!type) return { ...c, type: "" };
+                                const guessed = guessColumns([c.name], body.map((r) => [r[i] ?? ""]))[0];
+                                return { ...c, type, options: type === "select" || type === "multi-select" ? guessed.options ?? c.options ?? [] : c.options };
+                              }),
+                            )
+                          }
+                          options={[{ value: "", label: "Don’t import" }, ...TYPE_ORDER.filter((t) => t !== "person").map((t) => ({ value: t, label: typeOf({ type: t }).label }))]}
+                        />
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+          {namesClash ? <p className="text-sm text-destructive">Two fields have the same name. Rename one.</p> : null}
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <Button variant="quiet" icon="arrow-left" onClick={restart}>
+              Choose another file
+            </Button>
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-muted-foreground max-sm:hidden">
+                {importedCount} of {headers.length} columns
+              </span>
+              <Button variant="primary" disabled={!importedCount || missing.length > 0 || namesClash || blankName || !body.length} onClick={toReview}>
+                {body.length ? `Review ${plural(body.length, "row")}` : "No rows to review"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {step === "review" ? (
+        <div className="grid gap-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <p className="text-sm">
+              <span className="font-medium tabular-nums">{plural(rows.length - bad.length, noun)} ready</span>
+              {bad.length ? <span className="text-muted-foreground"> · {plural(bad.length, "row")} to fix</span> : null}
+            </p>
+            {bad.length ? (
+              <ToggleGroup
+                size="sm"
+                aria-label="Show"
+                value={showBad ? "problems" : "all"}
+                onChange={setOnly}
+                items={[
+                  { value: "problems", label: `Needs fixing (${bad.length.toLocaleString()})` },
+                  { value: "all", label: "All rows" },
+                ]}
+              />
+            ) : null}
+          </div>
+          {bad.length ? (
+            <Notice tone="warning">
+              Some cells don’t fit their field — a red corner marks each one. Click it and type the right value, delete the row, or leave those rows out.
+            </Notice>
+          ) : null}
+          <Spreadsheet
+            label="Rows to import"
+            noun={noun}
+            toolbar={false}
+            height={Math.min(440, 44 + Math.max(4, shownRows.length + 1) * 40)}
+            rows={shownRows}
+            columns={cols}
+            people={people}
+            locale={locale}
+            today={today}
+            validate={problemOf}
+            defaultView={{ frozen: 1 }}
+            onChange={(changes) => {
+              setRows((rs) => {
+                const by = new Map();
+                for (const c of changes) by.set(c.rowId, [...(by.get(c.rowId) ?? []), c]);
+                return rs.map((r) => {
+                  const list = by.get(r.id);
+                  if (!list) return r;
+                  const next = { ...r, __problems: { ...(r.__problems ?? {}) } };
+                  for (const c of list) {
+                    next[c.key] = c.value;
+                    delete next.__problems[c.key];
+                  }
+                  if (!Object.keys(next.__problems).length) delete next.__problems;
+                  return next;
+                });
+              });
+              return { ok: true };
+            }}
+            onDeleteRows={(ids) => {
+              const gone = new Set(ids);
+              setRows((rs) => rs.filter((r) => !gone.has(r.id)));
+              return { ok: true };
+            }}
+            lockFields={intoTable}
+            onColumnsChange={(next) => {
+              setCols(next);
+              return { ok: true };
+            }}
+            empty={<p className="text-sm text-muted-foreground">No rows left to import. Go back and choose another file.</p>}
+          />
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <Button variant="quiet" icon="arrow-left" onClick={() => setStep("match")}>
+              Back to matching
+            </Button>
+            <div className="flex flex-wrap items-center gap-3">
+              {bad.length ? <Switch id="csv-skip-bad" label={`Leave out ${plural(bad.length, "row")} to fix`} checked={skipBad} onChange={(e) => setSkipBad(e.target.checked)} /> : null}
+              <Button variant="primary" loading={busy} disabled={blocked || toImport.length === 0} onClick={runImport}>
+                {toImport.length ? `Import ${plural(toImport.length, noun)}` : "Nothing to import"}
+              </Button>
+            </div>
+          </div>
+          {blocked ? <p className="text-right text-xs text-muted-foreground">Fix the rows marked in red, or leave them out, to import.</p> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+