@protobase/ui 0.19.4 → 0.19.6

package/dist/app/gallery/lightbox.js

@@ -1,23 +1,32 @@
 import { cn } from "../../lib/cn.js";
+import { useIsDesktop } from "../../lib/use-media-query.js";
 import { useFocusTrap } from "../../lib/use-focus-trap.js";
 import { shownImage } from "../../live/file-values.js";
 import { FileImage } from "../../live/file-image.js";
-import { keyStep, steppedPhoto, swipeStep } from "./gallery-layout.js";
-import { useRef } from "react";
-import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { Sheet } from "../../primitives/sheet.js";
+import { keyStep, steppedPhoto, swipeStep, togglesDetails } from "./gallery-layout.js";
+import { readDetailsOpen, writeDetailsOpen } from "./details-open-storage.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight, Info, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/gallery/lightbox.tsx
 const control = "flex size-10 shrink-0 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
 /**
 * Photos one at a time at full size over the page: a modal dialog with a counter, arrows and keys (left, right, Escape)
-* that step through them, stopping at the first and the last, a sideways swipe on a touch screen, and, for a photo with details the user may
-* read, those details in a sidebar beside it, or below it on a mobile screen, where the dialog scrolls down to them. The
-* page does not scroll behind it, and focus returns to what opened it.
+* that step through them, stopping at the first and the last, and a sideways swipe on a touch screen. For a photo with
+* details the user may read, an info button, or the `i` key, shows them in a sidebar beside it, or in a sheet over the
+* lower part of a mobile screen; this browser remembers whether they were left shown. The page does not scroll behind
+* it, and focus returns to what opened it.
 */
 const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitle = "Details" }) => {
 	const panel = useRef(null);
 	const start = useRef(void 0);
+	const sidebarId = useId();
+	const desktop = useIsDesktop();
+	const [detailsOpen, setDetailsOpen] = useState(() => readDetailsOpen(localStorage));
+	const [trapped, setTrapped] = useState(false);
 	useFocusTrap(panel, true, onClose);
+	useEffect(() => setTrapped(true), []);
 	const count = photos.length;
 	const step = (by) => {
 		const next = steppedPhoto(index, by, count);
@@ -28,7 +37,16 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 		height: 1200
 	});
 	const shownDetails = details?.(index);
+	const hasDetails = shownDetails !== void 0;
+	const toggleDetails = (open) => {
+		setDetailsOpen(open);
+		writeDetailsOpen(localStorage, open);
+	};
 	const key = (event) => {
+		if (hasDetails && togglesDetails(event)) {
+			event.preventDefault();
+			return toggleDetails(!detailsOpen);
+		}
 		const by = keyStep(event.key);
 		if (by === 0) return;
 		event.preventDefault();
@@ -53,62 +71,90 @@ const Lightbox = ({ title, photos, index, onIndex, onClose, details, detailsTitl
 		"aria-label": title,
 		onKeyDown: key,
 		className: "fixed inset-0 z-[90] flex flex-col overflow-y-auto overscroll-contain bg-backdrop outline-none md:flex-row",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex shrink-0 flex-col md:sticky md:top-0 md:h-dvh md:min-w-0 md:flex-1", shownDetails === void 0 ? "h-dvh" : "h-[85svh]"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center justify-between gap-2 p-3",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "rounded-full bg-background/85 px-3 py-1 text-[13px] font-medium tabular-nums text-foreground",
-					"aria-live": "polite",
-					children: `${index + 1} / ${count}`
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: control,
-					"aria-label": "Close",
-					onClick: onClose,
-					children: /* @__PURE__ */ jsx(X, {
-						className: "size-4",
-						"aria-hidden": true
-					})
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-dvh shrink-0 flex-col md:sticky md:top-0 md:min-w-0 md:flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center justify-between gap-2 p-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "rounded-full bg-background/85 px-3 py-1 font-medium tabular-nums text-foreground",
+						"aria-live": "polite",
+						children: `${index + 1} / ${count}`
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [hasDetails && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: cn(control, "aria-expanded:bg-foreground aria-expanded:text-background"),
+							"aria-label": detailsTitle,
+							"aria-expanded": detailsOpen,
+							"aria-controls": desktop ? sidebarId : void 0,
+							"aria-keyshortcuts": "i",
+							onClick: () => toggleDetails(!detailsOpen),
+							children: /* @__PURE__ */ jsx(Info, {
+								className: "size-4",
+								"aria-hidden": true
+							})
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: control,
+							"aria-label": "Close",
+							onClick: onClose,
+							children: /* @__PURE__ */ jsx(X, {
+								className: "size-4",
+								"aria-hidden": true
+							})
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-3 md:px-16",
+					onPointerDown: down,
+					onPointerUp: up,
+					onPointerCancel: () => start.current = void 0,
+					children: [image && /* @__PURE__ */ jsx(FileImage, {
+						image,
+						className: "max-h-full max-w-full select-none object-contain"
+					}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
+						"aria-label": "Previous photo",
+						"aria-disabled": index === 0,
+						onClick: () => step(-1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, {
+							className: "size-5",
+							"aria-hidden": true
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
+						"aria-label": "Next photo",
+						"aria-disabled": index === count - 1,
+						onClick: () => step(1),
+						children: /* @__PURE__ */ jsx(ChevronRight, {
+							className: "size-5",
+							"aria-hidden": true
+						})
+					})] })]
 				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "relative flex min-h-0 flex-1 touch-pan-y items-center justify-center px-3 pb-3 md:px-16",
-				onPointerDown: down,
-				onPointerUp: up,
-				onPointerCancel: () => start.current = void 0,
-				children: [image && /* @__PURE__ */ jsx(FileImage, {
-					image,
-					className: "max-h-full max-w-full select-none object-contain"
-				}, image.url), count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cn(control, "absolute left-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
-					"aria-label": "Previous photo",
-					"aria-disabled": index === 0,
-					onClick: () => step(-1),
-					children: /* @__PURE__ */ jsx(ChevronLeft, {
-						className: "size-5",
-						"aria-hidden": true
-					})
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cn(control, "absolute right-3 top-1/2 -translate-y-1/2 aria-disabled:cursor-default aria-disabled:opacity-40"),
-					"aria-label": "Next photo",
-					"aria-disabled": index === count - 1,
-					onClick: () => step(1),
-					children: /* @__PURE__ */ jsx(ChevronRight, {
-						className: "size-5",
-						"aria-hidden": true
-					})
-				})] })]
-			})]
-		}), shownDetails !== void 0 && /* @__PURE__ */ jsxs("aside", {
-			"aria-label": detailsTitle,
-			className: "shrink-0 border-t border-border bg-background p-5 text-foreground md:min-h-dvh md:w-[360px] md:border-l md:border-t-0",
-			children: [/* @__PURE__ */ jsx("h2", {
-				className: "mb-3 text-[15px] font-semibold",
-				children: detailsTitle
-			}), shownDetails]
-		})]
+			}),
+			hasDetails && detailsOpen && desktop && /* @__PURE__ */ jsxs("aside", {
+				id: sidebarId,
+				"aria-label": detailsTitle,
+				className: "min-h-dvh w-[360px] shrink-0 border-l border-border bg-background p-5 text-foreground",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "mb-3 text-[16px] font-semibold",
+					children: detailsTitle
+				}), shownDetails]
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				title: detailsTitle,
+				open: hasDetails && detailsOpen && !desktop && trapped,
+				onClose: () => toggleDetails(false),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pt-3",
+					children: shownDetails
+				})
+			})
+		]
 	});
 };
 //#endregion

package/dist/app/gallery/photo-details.js

@@ -34,7 +34,7 @@ const PhotoDetails = ({ model, view, photoKey, fields }) => {
 			resource: model.name,
 			key: photoKey
 		},
-		className: "mt-3 inline-block text-[13px] font-medium text-primary-text hover:underline",
+		className: "mt-3 inline-block font-medium text-primary-text hover:underline",
 		children: `Open ${singular}`
 	})] });
 };

package/dist/app/import/convert.js

@@ -0,0 +1,151 @@
+import { cellText, isEmptyCell, isSheetDate } from "./sheet-cell.js";
+import { enumLabel } from "@protobase/schema";
+//#region src/app/import/convert.ts
+const ok = (value) => ({
+	ok: true,
+	value
+});
+const problem = (text) => ({
+	ok: false,
+	problem: text
+});
+const quoted = (cell) => `“${cellText(cell)}”`;
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/**
+* A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or
+* spaces, and the `decimal` separator before the fraction. Undefined when the text is no such number.
+*/
+const parseNumberText = (text, decimal) => {
+	const group = `[${escapeRegExp(decimal === "." ? "," : ".")}\\s\\u00a0\\u202f']`;
+	const match = new RegExp(`^([-+]?)(\\d{1,3}(?:${group}\\d{3})+|\\d+)(?:${escapeRegExp(decimal)}(\\d+))?$`).exec(text.trim());
+	if (match) return `${match[1] === "-" ? "-" : ""}${match[2].replace(/\D/g, "")}${match[3] ? `.${match[3]}` : ""}`;
+	if (decimal === "." && /^[-+]?\d+(\.\d+)?e[-+]?\d+$/i.test(text.trim())) return String(Number(text.trim()));
+};
+const toNumberText = (cell, options) => {
+	if (typeof cell === "number") return String(cell);
+	if (typeof cell === "string") return parseNumberText(cell, options.decimal);
+};
+const integerValue = (field, cell, options) => {
+	const text = toNumberText(cell, options);
+	if (text === void 0) return problem(`${quoted(cell)} is not a number`);
+	const [whole, fraction = ""] = text.split(".");
+	if (/[1-9]/.test(fraction) || /e/i.test(text)) return problem(`${quoted(cell)} is not a whole number`);
+	if (field.type === "bigint") return ok(String(BigInt(whole)));
+	const value = Number(whole);
+	return Number.isSafeInteger(value) ? ok(value) : problem(`${quoted(cell)} is too large`);
+};
+const decimalValue = (cell, options) => {
+	const text = toNumberText(cell, options);
+	return text === void 0 ? problem(`${quoted(cell)} is not a number`) : ok(text);
+};
+const trueWords = /* @__PURE__ */ new Set([
+	"true",
+	"yes",
+	"1"
+]);
+const falseWords = /* @__PURE__ */ new Set([
+	"false",
+	"no",
+	"0"
+]);
+const booleanValue = (cell) => {
+	if (typeof cell === "boolean") return ok(cell);
+	const text = typeof cell === "string" || typeof cell === "number" ? String(cell).trim().toLowerCase() : "";
+	if (trueWords.has(text)) return ok(true);
+	if (falseWords.has(text)) return ok(false);
+	return problem(`${quoted(cell)} is not true or false (true, false, yes, no, 1 or 0)`);
+};
+const pad = (value) => String(value).padStart(2, "0");
+const calendarDate = (year, month, day) => {
+	const at = new Date(Date.UTC(year, month - 1, day));
+	if (at.getUTCFullYear() !== year || at.getUTCMonth() !== month - 1 || at.getUTCDate() !== day) return void 0;
+	return `${year}-${pad(month)}-${pad(day)}`;
+};
+const timePattern = "(\\d{1,2}):(\\d{2})(?::(\\d{2})(?:\\.\\d+)?)?";
+const readWallTime = (text, order) => {
+	const iso = new RegExp(`^(\\d{4})[-/](\\d{1,2})[-/](\\d{1,2})(?:[T ]${timePattern}(Z|[+-]\\d{2}:?\\d{2})?)?$`).exec(text.trim());
+	const local = new RegExp(`^(\\d{1,2})[./-](\\d{1,2})[./-](\\d{4})(?: ${timePattern})?$`).exec(text.trim());
+	if (!iso && !local) return void 0;
+	const [year, month, day] = iso ? [
+		iso[1],
+		iso[2],
+		iso[3]
+	].map(Number) : order === "dmy" ? [
+		local[3],
+		local[2],
+		local[1]
+	].map(Number) : [
+		local[3],
+		local[1],
+		local[2]
+	].map(Number);
+	const date = calendarDate(year, month, day);
+	if (!date) return void 0;
+	const [hours, minutes, seconds = "0"] = iso ? iso.slice(4, 7) : local.slice(4, 7);
+	if (hours === void 0) return { date };
+	if (Number(hours) > 23 || Number(minutes) > 59 || Number(seconds) > 59) return void 0;
+	return {
+		date,
+		time: `${pad(Number(hours))}:${minutes}:${pad(Number(seconds))}`,
+		zone: iso?.[7]
+	};
+};
+const wallTimeOf = (cell, options) => {
+	if (isSheetDate(cell)) {
+		const [date, time] = cell.date.split("T");
+		return {
+			date,
+			time
+		};
+	}
+	return typeof cell === "string" ? readWallTime(cell, options.dateOrder) : void 0;
+};
+const notDate = (cell, options) => problem(`${quoted(cell)} is not a date (2026-04-03 or ${options.dateOrder === "dmy" ? "day/month/year" : "month/day/year"})`);
+const dateValue = (cell, options) => {
+	const at = wallTimeOf(cell, options);
+	if (!at) return notDate(cell, options);
+	if (at.time && at.time !== "00:00:00") return problem(`${quoted(cell)} has a time of day; the field holds a date`);
+	return ok(at.date);
+};
+const timestampValue = (cell, options) => {
+	const at = wallTimeOf(cell, options);
+	if (!at) return notDate(cell, options);
+	if (at.zone) return ok((/* @__PURE__ */ new Date(`${at.date}T${at.time}${at.zone === "Z" ? "Z" : at.zone.replace(/^([+-]\d{2})(\d{2})$/, "$1:$2")}`)).toISOString());
+	const [year, month, day] = at.date.split("-").map(Number);
+	const [hours, minutes, seconds] = (at.time ?? "00:00:00").split(":").map(Number);
+	return ok(new Date(year, month - 1, day, hours, minutes, seconds).toISOString());
+};
+const normalized = (text) => text.trim().toLowerCase().replace(/\s+/g, " ");
+const enumValue = (field, hints, cell) => {
+	const values = field.enumValues ?? [];
+	const text = normalized(cellText(cell));
+	const matches = values.filter((value) => normalized(value) === text || normalized(enumLabel(value, hints?.valueLabels)) === text);
+	if (matches.length === 1) return ok(matches[0]);
+	if (matches.length > 1) return problem(`${quoted(cell)} matches more than one value: ${matches.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")}`);
+	return problem(`${quoted(cell)} is not one of ${values.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")}`);
+};
+const textValue = (cell) => typeof cell === "boolean" ? problem(`${quoted(cell)} is true or false, not text`) : ok(cellText(cell));
+/**
+* The value a cell gives a field, as the API takes it, or the problem that keeps it from being one: never a guess, and an
+* empty cell is null, never a default. A relation's cell is the value of the field its records are found by, so it
+* converts as that field (`convertCell(targetField, ...)`).
+*/
+const convertCell = (field, hints, cell, options) => {
+	if (isEmptyCell(cell)) return field.nullable ? ok(null) : problem("is empty, and it is required");
+	switch (field.type) {
+		case "integer":
+		case "bigint": return integerValue(field, cell, options);
+		case "decimal": return decimalValue(cell, options);
+		case "boolean": return booleanValue(cell);
+		case "date": return dateValue(cell, options);
+		case "timestamp": return timestampValue(cell, options);
+		case "enum": return enumValue(field, hints, cell);
+		case "text":
+		case "uuid":
+		case "currency":
+		case "country": return textValue(cell);
+		default: throw new Error(`Not implemented: importing ${field.type} fields, which importableFields leaves out`);
+	}
+};
+//#endregion
+export { convertCell, parseNumberText };

package/dist/app/import/csv-parser.js

@@ -0,0 +1,119 @@
+//#region src/app/import/csv-parser.ts
+const delimiters = [
+	",",
+	";",
+	"	"
+];
+/**
+* The delimiter of a CSV's header line: whichever of comma, semicolon and tab it holds most often outside quotes, a
+* comma when it holds none (a file of one column).
+*/
+const detectDelimiter = (headerLine) => {
+	const counts = new Map(delimiters.map((delimiter) => [delimiter, 0]));
+	let quoted = false;
+	for (const char of headerLine) if (char === "\"") quoted = !quoted;
+	else if (!quoted && counts.has(char)) counts.set(char, counts.get(char) + 1);
+	return [...counts].reduce((best, entry) => entry[1] > best[1] ? entry : best, [",", 0])[0];
+};
+const firstLine = (text) => {
+	let quoted = false;
+	for (let index = 0; index < text.length; index++) {
+		const char = text[index];
+		if (char === "\"") quoted = !quoted;
+		else if (!quoted && (char === "\n" || char === "\r")) return text.slice(0, index);
+	}
+};
+/**
+* A CSV parser fed text a chunk at a time (RFC 4180: quoted fields with `""` for a quote and line breaks inside, CRLF,
+* LF or CR between rows), so a large file is read without holding it whole. `push` returns the rows completed by the
+* chunk, `end` the last one. The delimiter is the header line's (`detectDelimiter`) unless given; a byte order mark at
+* the start is dropped.
+*/
+const createCsvParser = (given) => {
+	let delimiter = given;
+	let pending = "";
+	let started = false;
+	let field = "";
+	let row = [];
+	let quoted = false;
+	let quoteSeen = false;
+	let crSeen = false;
+	let rowStarted = false;
+	const endField = () => {
+		row.push(field);
+		field = "";
+	};
+	const endRow = (rows) => {
+		endField();
+		rows.push(row);
+		row = [];
+		rowStarted = false;
+	};
+	const consume = (text) => {
+		const rows = [];
+		for (const char of text) {
+			if (crSeen) {
+				crSeen = false;
+				if (char === "\n") continue;
+			}
+			if (quoted) {
+				if (quoteSeen) {
+					quoteSeen = false;
+					if (char === "\"") {
+						field += "\"";
+						continue;
+					}
+					quoted = false;
+				} else if (char === "\"") {
+					quoteSeen = true;
+					continue;
+				} else {
+					field += char;
+					continue;
+				}
+			}
+			if (char === "\"" && field === "") {
+				quoted = true;
+				rowStarted = true;
+			} else if (char === delimiter) {
+				endField();
+				rowStarted = true;
+			} else if (char === "\n" || char === "\r") {
+				crSeen = char === "\r";
+				endRow(rows);
+			} else {
+				field += char;
+				rowStarted = true;
+			}
+		}
+		return rows;
+	};
+	const push = (chunk) => {
+		if (started) return consume(chunk);
+		pending += chunk;
+		if (pending.charCodeAt(0) === 65279) pending = pending.slice(1);
+		const header = firstLine(pending);
+		if (header === void 0) return [];
+		started = true;
+		delimiter ??= detectDelimiter(header);
+		const text = pending;
+		pending = "";
+		return consume(text);
+	};
+	const end = () => {
+		const rows = started ? [] : push("\n");
+		if (quoteSeen) {
+			quoteSeen = false;
+			quoted = false;
+		}
+		if (rowStarted || field !== "") endRow(rows);
+		return rows;
+	};
+	return {
+		push,
+		end,
+		delimiter: () => delimiter
+	};
+};
+//#endregion
+export { createCsvParser, detectDelimiter };

package/dist/app/import/failed-rows.js

@@ -0,0 +1,21 @@
+import { cellText } from "./sheet-cell.js";
+//#region src/app/import/failed-rows.ts
+const csvField = (text) => /[",\r\n]/.test(text) ? `"${text.replace(/"/g, "\"\"")}"` : text;
+/**
+* The rows an import did not write as a CSV file to fix and import again: the file's own columns, then the row's line in
+* the file and why it was not written. Sorted by line, with a byte order mark so spreadsheet programs read it as UTF-8.
+*/
+const failedRowsCsv = (headers, rows) => {
+	const lines = [...rows].sort((a, b) => a.line - b.line).map((row) => [
+		...headers.map((_, column) => cellText(row.cells[column] ?? null)),
+		String(row.line),
+		row.problems.join("; ")
+	]);
+	return `${[[
+		...headers,
+		"Line",
+		"Problems"
+	], ...lines].map((fields) => fields.map(csvField).join(",")).join("\r\n")}\r\n`;
+};
+//#endregion
+export { failedRowsCsv };

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

@@ -0,0 +1,31 @@
+import { Button } from "../../primitives/button.js";
+import { useAdminMeta, usePermissions } from "../meta-gate.js";
+import { can } from "../permissions.js";
+import { ImportDialog } from "./import-dialog.js";
+import { useState } from "react";
+import { Upload } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/import/import-button.tsx
+/**
+* The list page's Import button, for a user who may create records of a resource whose view does not turn it off
+* (`.import(false)`), and the import dialog it opens. The server checks every write as it would a single one.
+*/
+const ImportButton = ({ model }) => {
+	const { resources, views } = useAdminMeta();
+	const permissions = usePermissions(model.name);
+	const [open, setOpen] = useState(false);
+	if (views[model.name]?.import === false || !can(permissions, "create")) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		onClick: () => setOpen(true),
+		"aria-haspopup": "dialog",
+		children: [/* @__PURE__ */ jsx(Upload, { className: "size-3.5" }), "Import"]
+	}), open && /* @__PURE__ */ jsx(ImportDialog, {
+		model,
+		resources,
+		views,
+		canUpdate: can(permissions, "update"),
+		onClose: () => setOpen(false)
+	})] });
+};
+//#endregion
+export { ImportButton };

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-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",
+		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 };