@protobase/ui 0.19.4 → 0.19.5

package/dist/app/import/import-check-step.js

@@ -0,0 +1,123 @@
+import { Spinner } from "../../primitives/spinner.js";
+import { Button } from "../../primitives/button.js";
+import { saveFile } from "../../lib/save-file.js";
+import { displayValue } from "../../live/display-value.js";
+import { failedRowsCsv } from "./failed-rows.js";
+import { ImportCounts } from "./import-counts.js";
+import { fieldLabel, relationModel } from "./mapping.js";
+import { Download } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-check-step.tsx
+/** How many rows with problems the check lists; the file of them holds every one. */
+const listedProblems = 50;
+/** Saves the rows with their problems as a CSV named after the imported file. */
+const downloadRows = (fileName, headers, rows) => saveFile(failedRowsCsv(headers, rows), `${(fileName ?? "import").replace(/\.[^.]+$/, "")} - not imported.csv`, "text/csv");
+/** The rows with what keeps each from being imported, at most `listedProblems` of them. */
+const ProblemList = ({ rows }) => /* @__PURE__ */ jsxs("ul", {
+	"aria-label": "Rows not imported",
+	className: "flex flex-col gap-1 text-xs",
+	children: [rows.slice(0, listedProblems).map((row) => /* @__PURE__ */ jsxs("li", { children: [
+		/* @__PURE__ */ jsxs("span", {
+			className: "font-medium",
+			children: [
+				"Row ",
+				row.line,
+				":"
+			]
+		}),
+		" ",
+		row.problems.join("; ")
+	] }, row.line)), rows.length > listedProblems && /* @__PURE__ */ jsxs("li", {
+		className: "text-muted-foreground",
+		children: [
+			"And ",
+			(rows.length - listedProblems).toLocaleString("en-IE"),
+			" more rows, all in the file."
+		]
+	})]
+});
+const ImportChecking = ({ rows }) => /* @__PURE__ */ jsxs("p", {
+	className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+	role: "status",
+	children: [
+		/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
+		"Checking rows… ",
+		rows.toLocaleString("en-IE"),
+		" read"
+	]
+});
+/**
+* What the import would do, before it writes anything: how many rows create or update a record, the first rows as they
+* would be written, and every row with problems, which the import skips.
+*/
+const ImportCheckStep = ({ check, model, resources, views, columns, headers, fileName }) => {
+	const view = views[model.name];
+	const shown = columns.map((column) => model.fields[column.field]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 text-[13px]",
+		children: [
+			/* @__PURE__ */ jsx(ImportCounts, {
+				label: "Check",
+				counts: [
+					["Rows", check.rows],
+					["To create", check.creates],
+					["To update", check.updates],
+					["With problems", check.problems.length]
+				]
+			}),
+			check.preview.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto rounded-lg border",
+				children: /* @__PURE__ */ jsxs("table", {
+					"aria-label": "First rows",
+					className: "w-full text-left text-xs",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "bg-muted text-muted-foreground",
+						children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+							className: "px-2 py-1.5 font-medium",
+							children: "Row"
+						}), shown.map((field) => /* @__PURE__ */ jsx("th", {
+							className: "whitespace-nowrap px-2 py-1.5 font-medium",
+							children: fieldLabel(view, field.name)
+						}, field.name))] })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: "divide-y",
+						children: check.preview.map((row) => /* @__PURE__ */ jsxs("tr", {
+							className: row.problems.length > 0 ? "bg-danger-soft" : void 0,
+							children: [/* @__PURE__ */ jsx("td", {
+								className: "px-2 py-1.5 tabular-nums text-muted-foreground",
+								children: row.line
+							}), shown.map((field) => /* @__PURE__ */ jsx("td", {
+								className: "max-w-48 truncate px-2 py-1.5",
+								children: relationModel(field, resources) ? String(row.values[field.name] ?? "—") : field.name in row.values ? displayValue(field, row.values[field.name], view?.fields[field.name]) : ""
+							}, field.name))]
+						}, row.line))
+					})]
+				})
+			}),
+			check.problems.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Rows with problems, which are skipped"
+					}), /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						onClick: () => downloadRows(fileName, headers, check.problems),
+						children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), "Download"]
+					})]
+				}), /* @__PURE__ */ jsx(ProblemList, { rows: check.problems })]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Rows are saved in batches of ",
+					100,
+					". Cancelling, or an error, keeps the batches already saved; a row the server refuses is listed and the others are saved."
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { ImportCheckStep, ImportChecking, ProblemList, downloadRows };

package/dist/app/import/import-counts.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-counts.tsx
+/** Counts side by side, each under its label, such as the rows an import created and updated. */
+const ImportCounts = ({ label, counts }) => /* @__PURE__ */ jsx("dl", {
+	"aria-label": label,
+	className: "grid grid-cols-2 gap-3 sm:grid-cols-4",
+	children: counts.map(([name, value]) => /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border px-3 py-2",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "text-xs text-muted-foreground",
+			children: name
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-lg font-semibold tabular-nums",
+			children: value.toLocaleString("en-IE")
+		})]
+	}, name))
+});
+//#endregion
+export { ImportCounts };

package/dist/app/import/import-dialog.js

@@ -0,0 +1,152 @@
+import { Button } from "../../primitives/button.js";
+import { humanize } from "../../live/naming.js";
+import { ErrorBanner } from "../error-banner.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { unmappedRequired } from "./mapping.js";
+import { ImportCheckStep, ImportChecking } from "./import-check-step.js";
+import { ImportFileStep } from "./import-file-step.js";
+import { ImportMappingStep } from "./import-mapping-step.js";
+import { ImportProgressStep, ImportSummary } from "./import-result-step.js";
+import { useImportFlow } from "./use-import-flow.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-dialog.tsx
+const errorTitle = (flow) => flow.step.kind === "file" ? "Could not read the file" : "Could not check the rows";
+const readyToCheck = (flow) => {
+	if (flow.columns.length === 0) return false;
+	if (flow.mode === "create") return unmappedRequired("create", flow.fields, flow.columns).length === 0;
+	return flow.match !== void 0;
+};
+/**
+* Imports records from an .xlsx or CSV file into a resource: choose the file (and its sheet), map its columns to
+* fields, check every row, then write them in batches with progress, Cancel between batches, and a summary with the rows
+* not imported to download.
+*/
+const ImportDialog = ({ model, resources, views, canUpdate, onClose, sourceFor }) => {
+	const flow = useImportFlow({
+		model,
+		resources,
+		views,
+		sourceFor
+	});
+	const plural = views[model.name]?.names?.plural ?? humanize(model.name);
+	const { step } = flow;
+	const headers = flow.head?.headers ?? [];
+	const close = () => {
+		if (step.kind === "importing") return;
+		flow.stop();
+		onClose();
+	};
+	const cancelButton = /* @__PURE__ */ jsx(Button, {
+		onClick: close,
+		children: "Cancel"
+	});
+	const actions = () => {
+		switch (step.kind) {
+			case "file": return /* @__PURE__ */ jsxs(Fragment, { children: [cancelButton, flow.sheets.length > 1 && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				loading: step.reading,
+				onClick: flow.openSheet,
+				children: "Next"
+			})] });
+			case "map": return /* @__PURE__ */ jsxs(Fragment, { children: [cancelButton, /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				disabled: !readyToCheck(flow),
+				onClick: flow.check,
+				children: "Check rows"
+			})] });
+			case "checking": return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: flow.back,
+				children: "Back"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				loading: true,
+				children: "Checking"
+			})] });
+			case "checked": {
+				const rows = step.check.creates + step.check.updates;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: flow.back,
+					children: "Back"
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					disabled: rows === 0,
+					onClick: () => flow.start(rows),
+					children: [
+						"Import ",
+						rows.toLocaleString("en-IE"),
+						" ",
+						rows === 1 ? "row" : "rows"
+					]
+				})] });
+			}
+			case "importing": return /* @__PURE__ */ jsx(Button, {
+				variant: "danger",
+				disabled: step.cancelling,
+				onClick: flow.cancel,
+				children: "Cancel import"
+			});
+			case "done": return /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onClick: onClose,
+				children: "Done"
+			});
+		}
+	};
+	const body = () => {
+		switch (step.kind) {
+			case "file": return /* @__PURE__ */ jsx(ImportFileStep, {
+				file: flow.file,
+				sheets: flow.sheets,
+				sheet: flow.sheet,
+				reading: step.reading,
+				onChoose: flow.choose,
+				onSheet: flow.setSheet
+			});
+			case "map": return /* @__PURE__ */ jsx(ImportMappingStep, {
+				flow,
+				model,
+				resources,
+				views,
+				canUpdate
+			});
+			case "checking": return /* @__PURE__ */ jsx(ImportChecking, { rows: step.rows });
+			case "checked": return /* @__PURE__ */ jsx(ImportCheckStep, {
+				check: step.check,
+				model,
+				resources,
+				views,
+				columns: flow.columns,
+				headers,
+				fileName: flow.file?.name
+			});
+			case "importing": return /* @__PURE__ */ jsx(ImportProgressStep, {
+				progress: step.progress,
+				total: step.total,
+				cancelling: step.cancelling
+			});
+			case "done": return /* @__PURE__ */ jsx(ImportSummary, {
+				result: step.result,
+				stopped: step.stopped,
+				headers,
+				fileName: flow.file?.name
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		open: true,
+		wide: true,
+		title: `Import ${plural.toLowerCase()}`,
+		description: flow.file && step.kind !== "file" ? flow.file.name : void 0,
+		onClose: close,
+		actions: actions(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [flow.error !== void 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: errorTitle(flow),
+				error: flow.error
+			}), body()]
+		})
+	});
+};
+//#endregion
+export { ImportDialog };

package/dist/app/import/import-file-step.js

@@ -0,0 +1,65 @@
+import { Spinner } from "../../primitives/spinner.js";
+import { ImportSelect } from "./import-select.js";
+import { useId } from "react";
+import { FileSpreadsheet } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-file-step.tsx
+/** The file to import, an .xlsx workbook or a CSV, and the sheet to read from a workbook with several. */
+const ImportFileStep = ({ file, sheets, sheet, reading, onChoose, onSheet }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 text-[13px]",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: "font-medium",
+						children: "File"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id,
+						type: "file",
+						accept: ".xlsx,.csv,text/csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+						disabled: reading,
+						onChange: (event) => {
+							const chosen = event.target.files?.[0];
+							if (chosen) onChoose(chosen);
+						},
+						className: "text-[13px] file:mr-3 file:h-8 file:rounded-md file:border file:border-border-strong file:bg-background file:px-3 file:font-medium file:text-foreground max-sm:file:min-h-11"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: "An Excel workbook (.xlsx) or a CSV file saved as UTF-8. Its first row names the columns."
+					})
+				]
+			}),
+			reading && /* @__PURE__ */ jsxs("p", {
+				className: "flex items-center gap-2 text-muted-foreground",
+				role: "status",
+				children: [
+					/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }),
+					"Reading ",
+					file?.name ?? "the file",
+					"…"
+				]
+			}),
+			!reading && sheets.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-end gap-3",
+				children: [/* @__PURE__ */ jsx(FileSpreadsheet, { className: "mb-2 size-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx(ImportSelect, {
+					className: "flex-1",
+					label: "Sheet",
+					value: sheet ?? "",
+					options: sheets.map((name) => ({
+						value: name,
+						label: name
+					})),
+					onChange: onSheet
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { ImportFileStep };

package/dist/app/import/import-mapping-step.js

@@ -0,0 +1,195 @@
+import { Segmented } from "../../primitives/segmented.js";
+import { cellText, columnName } from "./sheet-cell.js";
+import { fieldLabel, matchFields, relationModel, requiredOnCreate, unmappedRequired } from "./mapping.js";
+import { ImportSelect } from "./import-select.js";
+import { TriangleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-mapping-step.tsx
+const modes = [
+	{
+		value: "create",
+		label: "Create"
+	},
+	{
+		value: "update",
+		label: "Update"
+	},
+	{
+		value: "upsert",
+		label: "Create or update"
+	}
+];
+const modeHelp = {
+	create: "Each row creates a record.",
+	update: "Each row updates the record its value finds; a row that finds none is not imported.",
+	upsert: "Each row updates the record its value finds, or creates one when it finds none."
+};
+const skip = "";
+/**
+* Which field each column of the file fills: matched by header to a field's label or name, changed or skipped here. A
+* relation's column also says which field of the related records its values are, and an update which column finds the
+* records it changes.
+*/
+const ImportMappingStep = ({ flow, model, resources, views, canUpdate }) => {
+	const view = views[model.name];
+	const headers = flow.head?.headers ?? [];
+	const sample = flow.head?.sample ?? [];
+	const missing = unmappedRequired(flow.mode, flow.fields, flow.columns);
+	const fieldOptions = [{
+		value: skip,
+		label: "Do not import"
+	}, ...flow.fields.map((field) => ({
+		value: field.name,
+		label: `${fieldLabel(view, field.name)}${requiredOnCreate(field) ? " *" : ""}`
+	}))];
+	const columnOptions = headers.map((_, column) => ({
+		value: String(column),
+		label: columnName(headers, column)
+	}));
+	const keys = matchFields(model);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5 text-[13px]",
+		children: [
+			canUpdate && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: "Rows"
+					}),
+					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Segmented, {
+						label: "What each row does",
+						size: "md",
+						value: flow.mode,
+						options: modes,
+						onChange: flow.setMode
+					}) }),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: modeHelp[flow.mode]
+					})
+				]
+			}),
+			flow.mode !== "create" && /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ jsx(ImportSelect, {
+					label: "Find records by",
+					value: flow.match?.field ?? skip,
+					options: [{
+						value: skip,
+						label: "Choose a field"
+					}, ...keys.map((field) => ({
+						value: field.name,
+						label: fieldLabel(view, field.name)
+					}))],
+					onChange: (field) => flow.setMatch(field ? {
+						field,
+						column: flow.match?.column ?? 0
+					} : void 0),
+					help: "A field no two records share, such as the key or an email."
+				}), /* @__PURE__ */ jsx(ImportSelect, {
+					label: "Found in column",
+					value: flow.match ? String(flow.match.column) : skip,
+					options: [{
+						value: skip,
+						label: "Choose a column"
+					}, ...columnOptions],
+					onChange: (column) => flow.setMatch(column && flow.match ? {
+						...flow.match,
+						column: Number(column)
+					} : flow.match)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ jsx(ImportSelect, {
+					label: "Numbers",
+					value: flow.options.decimal,
+					options: [{
+						value: ".",
+						label: "1,234.56"
+					}, {
+						value: ",",
+						label: "1.234,56"
+					}],
+					onChange: (decimal) => flow.setOptions({
+						...flow.options,
+						decimal
+					})
+				}), /* @__PURE__ */ jsx(ImportSelect, {
+					label: "Dates",
+					value: flow.options.dateOrder,
+					options: [{
+						value: "dmy",
+						label: "Day first (31/12/2026)"
+					}, {
+						value: "mdy",
+						label: "Month first (12/31/2026)"
+					}],
+					onChange: (dateOrder) => flow.setOptions({
+						...flow.options,
+						dateOrder
+					}),
+					help: "Dates written as 2026-12-31 read the same either way. Times without a zone are your own time."
+				})]
+			}),
+			flow.mode !== "update" && /* @__PURE__ */ jsx("p", {
+				className: "-mb-3 text-xs text-muted-foreground",
+				children: "New records need the fields marked *."
+			}),
+			/* @__PURE__ */ jsx("section", {
+				"aria-label": "Columns",
+				className: "flex flex-col divide-y divide-border border-y",
+				children: headers.map((_, column) => {
+					const mapped = flow.columns.find((entry) => entry.column === column);
+					const field = mapped ? model.fields[mapped.field] : void 0;
+					const target = field ? relationModel(field, resources) : void 0;
+					const examples = sample.map((row) => cellText(row.cells[column] ?? null)).filter((text) => text !== "").slice(0, 3);
+					const name = columnName(headers, column);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-1 gap-2 py-3 sm:grid-cols-2 sm:gap-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate font-medium",
+								children: name
+							}), /* @__PURE__ */ jsx("p", {
+								className: "truncate text-xs text-muted-foreground",
+								children: examples.length > 0 ? examples.join(", ") : "Empty in the first rows"
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-col gap-2",
+							children: [/* @__PURE__ */ jsx(ImportSelect, {
+								label: "Field",
+								name: `Field for ${name}`,
+								value: mapped?.field ?? skip,
+								options: fieldOptions,
+								onChange: (next) => flow.mapColumn(column, next || void 0)
+							}), target && /* @__PURE__ */ jsx(ImportSelect, {
+								label: "Found by",
+								name: `${views[target.name]?.names?.plural ?? fieldLabel(view, field.name)} found by`,
+								value: mapped.matchBy ?? target.primaryKey[0],
+								options: matchFields(target).map((candidate) => ({
+									value: candidate.name,
+									label: fieldLabel(views[target.name], candidate.name)
+								})),
+								onChange: (matchBy) => flow.matchColumnBy(column, matchBy)
+							})]
+						})]
+					}, column);
+				})
+			}),
+			missing.length > 0 && /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				className: "flex gap-2 rounded-lg border border-warning/30 bg-warning-soft px-3 py-2 text-warning-text",
+				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsxs("span", { children: [
+					"No column fills ",
+					missing.map((field) => fieldLabel(view, field.name)).join(", "),
+					", which new records need."
+				] })]
+			})
+		]
+	});
+};
+//#endregion
+export { ImportMappingStep };

package/dist/app/import/import-result-step.js

@@ -0,0 +1,86 @@
+import { Button } from "../../primitives/button.js";
+import { ErrorBanner } from "../error-banner.js";
+import { ImportCounts } from "./import-counts.js";
+import { ProblemList, downloadRows } from "./import-check-step.js";
+import { Download } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-result-step.tsx
+const count = (value) => value.toLocaleString("en-IE");
+/** The rows written so far out of those to write, as a bar. */
+const ImportProgressStep = ({ progress, total, cancelling }) => {
+	const done = progress.created + progress.updated + progress.failed;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 text-[13px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-2 text-xs",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: cancelling ? "Stopping after this batch…" : "Saving rows…"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [
+					count(done),
+					" / ",
+					count(total)
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-label": "Rows saved",
+			"aria-valuenow": done,
+			"aria-valuemin": 0,
+			"aria-valuemax": total,
+			className: "h-2 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-primary transition-[width]",
+				style: { width: `${total > 0 ? Math.min(100, done / total * 100) : 0}%` }
+			})
+		})]
+	});
+};
+/** What the import did: created, updated, skipped and failed rows, and the rows it did not write with the reasons, to download. */
+const ImportSummary = ({ result, stopped, headers, fileName }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-4 text-[13px]",
+	children: [
+		stopped !== void 0 && /* @__PURE__ */ jsx(ErrorBanner, {
+			title: "The import stopped. The rows counted below were saved.",
+			error: stopped
+		}),
+		result.cancelled && /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: "Cancelled. The rows counted below were saved."
+		}),
+		/* @__PURE__ */ jsx(ImportCounts, {
+			label: "Import summary",
+			counts: [
+				["Created", result.created],
+				["Updated", result.updated],
+				["Skipped", result.skipped],
+				["Failed", result.failed]
+			]
+		}),
+		result.notWritten.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-medium",
+						children: "Rows not imported"
+					}), /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						onClick: () => downloadRows(fileName, headers, result.notWritten),
+						children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), "Download"]
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: "Skipped rows had problems in the file; the server refused the failed ones. The file holds each with the reason, to fix and import again."
+				}),
+				/* @__PURE__ */ jsx(ProblemList, { rows: [...result.notWritten].sort((a, b) => a.line - b.line) })
+			]
+		})
+	]
+});
+//#endregion
+export { ImportProgressStep, ImportSummary };

package/dist/app/import/import-select.js

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/cn.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-select.tsx
+/** A labelled native select, as the field editors draw theirs. */
+const ImportSelect = ({ label, name, value, options, onChange, help, className }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "text-[13px] font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("select", {
+				id,
+				"aria-label": name,
+				value,
+				onChange: (event) => onChange(event.target.value),
+				className: "h-8 w-full min-w-0 rounded-md border border-border-strong bg-background px-2 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 max-sm:min-h-11",
+				children: options.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))
+			}),
+			help && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: help
+			})
+		]
+	});
+};
+//#endregion
+export { ImportSelect };