@protobase/ui 0.19.3 → 0.19.5

package/dist/account/backup-codes.js

@@ -1,4 +1,5 @@
 import { Button } from "../primitives/button.js";
+import { saveFile } from "../lib/save-file.js";
 import { useState } from "react";
 import { Check, Copy, Download } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -26,19 +27,11 @@ const BackupCodes = ({ codes }) => {
 				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" }), copied ? "Copied" : "Copy"]
 			}), /* @__PURE__ */ jsxs(Button, {
 				size: "sm",
-				onClick: () => saveText(text, "backup-codes.txt"),
+				onClick: () => saveFile(text, "backup-codes.txt"),
 				children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), "Download"]
 			})]
 		})]
 	});
 };
-const saveText = (text, name) => {
-	const url = URL.createObjectURL(new Blob([text], { type: "text/plain" }));
-	Object.assign(document.createElement("a"), {
-		href: url,
-		download: name
-	}).click();
-	URL.revokeObjectURL(url);
-};
 //#endregion
 export { BackupCodes };

package/dist/app/displays/list-displays.js

@@ -2,6 +2,7 @@ import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
 import { photosKey } from "../../live/row-photos.js";
+import { filledFields } from "../filled-fields.js";
 import { encodeKey, tableDisplay } from "@protobase/schema/internal";
 //#region src/app/displays/list-displays.ts
 const displaysOf = (view) => view?.list?.displays ?? [];
@@ -47,7 +48,7 @@ const cardFields = (model, view, display) => ({
 	flags: display.flags ?? []
 });
 /** The meta fields a card shows for a row: those with a value, so a listing for rent only shows no purchase price. */
-const filledMeta = (row, meta) => meta.filter((name) => row.record[name] !== null && row.record[name] !== void 0 && row.record[name] !== "");
+const filledMeta = (row, meta) => filledFields(row.record, meta);
 /** The amount field a card shows for a row: the first with a value, so a listing for rent only shows its rent. */
 const filledAmount = (row, amount) => filledMeta(row, amount)[0];
 /** A card's amount split for drawing: the number with its prefix, such as `€1,450`, apart from its suffix, such as ` /month`. */

package/dist/app/displays/map-display.js

@@ -25,7 +25,8 @@ const arrow = "flex size-8 items-center justify-center rounded-full border borde
 * elsewhere clears it. A marker and a card whose record's position is approximate say so.
 */
 const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove, footer = true, flush = false }) => {
-	const style = useAdminMeta().maps?.style;
+	const maps = useAdminMeta().maps;
+	const style = maps?.style;
 	const [chosen, setChosen] = useState();
 	const [area, setArea] = useState();
 	const settled = useDebounced(area, settleMs);
@@ -70,6 +71,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 					fallback: null,
 					children: /* @__PURE__ */ jsx(RecordsMap, {
 						style,
+						layers: maps?.layers,
 						initial: at,
 						points,
 						buckets,

package/dist/app/filled-fields.js

@@ -0,0 +1,5 @@
+//#region src/app/filled-fields.ts
+/** The fields of `names` with a value in `record`: an empty one, null or an empty text, is left out, never shown as `—`. */
+const filledFields = (record, names) => names.filter((name) => record[name] !== null && record[name] !== void 0 && record[name] !== "");
+//#endregion
+export { filledFields };

package/dist/app/gallery/details-open-storage.js

@@ -0,0 +1,10 @@
+import { guarded } from "../../lib/guarded.js";
+//#region src/app/gallery/details-open-storage.ts
+/** Where this browser remembers whether the lightbox opens with a photo's details shown. */
+const detailsOpenStorageKey = "protobase:lightbox-details";
+/** Whether the lightbox's details were left open in this browser; closed until someone opens them. */
+const readDetailsOpen = (storage) => guarded(() => storage.getItem(detailsOpenStorageKey) === "true", false);
+/** Remembers only open details, so the default (closed) costs no storage. */
+const writeDetailsOpen = (storage, open) => guarded(() => open ? storage.setItem(detailsOpenStorageKey, "true") : storage.removeItem(detailsOpenStorageKey), void 0);
+//#endregion
+export { detailsOpenStorageKey, readDetailsOpen, writeDetailsOpen };

package/dist/app/gallery/gallery-layout.js

@@ -15,5 +15,7 @@ const swipeStep = (dx, dy) => Math.abs(dx) < 40 || Math.abs(dx) <= Math.abs(dy)
 const keyStep = (key) => key === "ArrowRight" ? 1 : key === "ArrowLeft" ? -1 : 0;
 /** The photo a step from `index` lands on among `count`: it stops at the first and the last rather than wrapping around. */
 const steppedPhoto = (index, by, count) => Math.min(Math.max(index + by, 0), Math.max(count - 1, 0));
+/** Whether a key press toggles a photo's details: `i` alone, without Ctrl, Cmd or Alt, which belong to the browser. */
+const togglesDetails = (event) => event.key === "i" && !event.ctrlKey && !event.metaKey && !event.altKey;
 //#endregion
-export { galleryTiles, keyStep, steppedPhoto, swipeStep };
+export { galleryTiles, keyStep, steppedPhoto, swipeStep, togglesDetails };

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 text-[13px] 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-[15px] 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/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 };