@protobase/ui 0.19.5 → 0.19.7

package/dist/account/account-section.js

@@ -8,12 +8,12 @@ const AccountSection = ({ title, status, description, children }) => /* @__PURE_
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [/* @__PURE__ */ jsx("h2", {
-				className: "text-[15px] font-semibold",
+				className: "text-[16px] font-semibold",
 				children: title
 			}), status]
 		}),
 		/* @__PURE__ */ jsx("p", {
-			className: "mt-1 text-[13px] text-muted-foreground",
+			className: "mt-1 text-muted-foreground",
 			children: description
 		}),
 		children && /* @__PURE__ */ jsx("div", {

package/dist/account/account-security-page.js

@@ -69,10 +69,10 @@ const AccountSecurityPage = ({ email }) => {
 			})
 		] }) : error ? /* @__PURE__ */ jsx("p", {
 			role: "alert",
-			className: "text-[13px] text-danger-text",
+			className: "text-danger-text",
 			children: error
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+			className: "flex items-center gap-2 text-muted-foreground",
 			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 		})]
 	});

package/dist/account/backup-codes.js

@@ -12,7 +12,7 @@ const BackupCodes = ({ codes }) => {
 		className: "flex flex-col gap-3",
 		children: [/* @__PURE__ */ jsx("ul", {
 			"aria-label": "Backup codes",
-			className: "grid grid-cols-2 gap-x-4 gap-y-1 rounded-md border bg-surface p-3 font-mono text-[13px]",
+			className: "grid grid-cols-2 gap-x-4 gap-y-1 rounded-md border bg-surface p-3 font-mono",
 			children: codes.map((code) => /* @__PURE__ */ jsx("li", { children: code }, code))
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap gap-2",

package/dist/account/passkeys-section.js

@@ -51,7 +51,7 @@ const PasskeysSection = ({ rule, passkeys, onAdd, onRename, onRemove }) => {
 						/* @__PURE__ */ jsxs("span", {
 							className: "min-w-0 flex-1",
 							children: [/* @__PURE__ */ jsx("span", {
-								className: "block truncate text-[13px] font-medium",
+								className: "block truncate font-medium",
 								children: passkey.name ?? "Passkey"
 							}), /* @__PURE__ */ jsxs("span", {
 								className: "block text-xs text-muted-foreground",
@@ -110,7 +110,7 @@ const PasskeysSection = ({ rule, passkeys, onAdd, onRename, onRemove }) => {
 					children: "Save"
 				})] }),
 				children: [/* @__PURE__ */ jsxs("label", {
-					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					className: "flex flex-col gap-1.5 font-medium",
 					children: ["Name", /* @__PURE__ */ jsx(Input, {
 						autoFocus: true,
 						value: name,

package/dist/account/password-dialog.js

@@ -37,7 +37,7 @@ const PasswordDialog = ({ title, description, confirmLabel, danger, needsPasswor
 			children: confirmLabel
 		})] }),
 		children: [needsPassword && /* @__PURE__ */ jsxs("label", {
-			className: "flex flex-col gap-1.5 text-[13px] font-medium",
+			className: "flex flex-col gap-1.5 font-medium",
 			children: ["Your password", /* @__PURE__ */ jsx(Input, {
 				type: "password",
 				autoComplete: "current-password",

package/dist/account/sign-in-policy-form.js

@@ -59,11 +59,11 @@ const SignInPolicyForm = ({ state, onSave, busy, error, notice }) => {
 							className: "min-w-0",
 							children: [
 								/* @__PURE__ */ jsx("h2", {
-									className: "text-[13px] font-semibold",
+									className: "font-semibold",
 									children: row.label
 								}),
 								/* @__PURE__ */ jsx("p", {
-									className: "mt-0.5 text-[13px] text-muted-foreground",
+									className: "mt-0.5 text-muted-foreground",
 									children: row.description
 								}),
 								note && /* @__PURE__ */ jsx("p", {

package/dist/account/sign-in-policy-page.js

@@ -60,10 +60,10 @@ const SignInPolicyPage = () => {
 			onSave: (policy) => void save(policy)
 		}, state.savedAt ?? "default"), state.operator && /* @__PURE__ */ jsx(StaffSignIns, { operator: state.operator })] }) : error ? /* @__PURE__ */ jsx("p", {
 			role: "alert",
-			className: "text-[13px] text-danger-text",
+			className: "text-danger-text",
 			children: error
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+			className: "flex items-center gap-2 text-muted-foreground",
 			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
 		})]
 	});

package/dist/account/sign-in-providers-section.js

@@ -32,7 +32,7 @@ const SignInProvidersSection = ({ providers, linked, onConnect, error: returned
 				children: [
 					/* @__PURE__ */ jsx(Link2, { className: "size-4 shrink-0 text-muted-foreground" }),
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 flex-1 truncate text-[13px] font-medium",
+						className: "min-w-0 flex-1 truncate font-medium",
 						children: provider.name
 					}),
 					linked.includes(provider.id) ? /* @__PURE__ */ jsx(Badge, {

package/dist/account/staff-sign-in-log.js

@@ -20,7 +20,7 @@ const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @_
 	children: [
 		/* @__PURE__ */ jsx(SectionError, { message: error }),
 		signIns && signIns.length === 0 && /* @__PURE__ */ jsx("p", {
-			className: "text-[13px] text-muted-foreground",
+			className: "text-muted-foreground",
 			children: "No staff has signed in as anyone yet."
 		}),
 		signIns && signIns.length > 0 && /* @__PURE__ */ jsx("ul", {
@@ -29,7 +29,7 @@ const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @_
 				className: "flex flex-col gap-1.5 p-3",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]",
+						className: "flex flex-wrap items-center gap-x-2 gap-y-1",
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "font-medium break-all",
@@ -46,7 +46,7 @@ const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @_
 						]
 					}),
 					/* @__PURE__ */ jsx("p", {
-						className: "text-[13px] break-words",
+						className: "break-words",
 						children: entry.reason
 					}),
 					/* @__PURE__ */ jsxs("div", {

package/dist/account/two-factor-setup.js

@@ -65,7 +65,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 		className: "flex flex-col gap-4",
 		children: [
 			/* @__PURE__ */ jsx("p", {
-				className: "text-[13px] text-muted-foreground",
+				className: "text-muted-foreground",
 				children: "Two-factor authentication is on. Keep these backup codes somewhere safe: each one signs you in once if you lose your phone. They are not shown again."
 			}),
 			/* @__PURE__ */ jsx(BackupCodes, { codes: step.codes }),
@@ -85,7 +85,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 		},
 		children: [
 			/* @__PURE__ */ jsx("p", {
-				className: "text-[13px] text-muted-foreground",
+				className: "text-muted-foreground",
 				children: "Scan this code with your authenticator app, then enter the 6-digit code it shows."
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -96,13 +96,13 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 				}), /* @__PURE__ */ jsxs("p", {
 					className: "text-center text-xs text-muted-foreground",
 					children: ["Can't scan it? Enter this key in the app:", /* @__PURE__ */ jsx("span", {
-						className: "mt-1 block break-all font-mono text-[13px] text-foreground",
+						className: "mt-1 block break-all font-mono text-body text-foreground",
 						children: totpKey(step.setup.totpURI)
 					})]
 				})]
 			}),
 			/* @__PURE__ */ jsxs("label", {
-				className: "flex flex-col gap-1.5 text-[13px] font-medium",
+				className: "flex flex-col gap-1.5 font-medium",
 				children: ["Code from the app", /* @__PURE__ */ jsx(OtpInput, {
 					name: "code",
 					required: true,
@@ -147,7 +147,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 					onClick: () => setChoice(option.value),
 					className: cn("rounded-md border p-3 text-left transition-colors", choice === option.value ? "border-primary bg-primary-soft" : "border-border-strong hover:bg-muted"),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "block text-[13px] font-medium",
+						className: "block font-medium",
 						children: option.label
 					}), /* @__PURE__ */ jsx("span", {
 						className: "mt-0.5 block text-xs text-muted-foreground",
@@ -156,7 +156,7 @@ const TwoFactorSetup = ({ offerEmailedCodes, needsPassword, onStartApp, onConfir
 				}, option.value))
 			}),
 			needsPassword && /* @__PURE__ */ jsxs("label", {
-				className: "flex flex-col gap-1.5 text-[13px] font-medium",
+				className: "flex flex-col gap-1.5 font-medium",
 				children: ["Your password", /* @__PURE__ */ jsx(Input, {
 					type: "password",
 					name: "password",

package/dist/action-card/action-card.js

@@ -38,7 +38,7 @@ const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onActi
 			!frameless && /* @__PURE__ */ jsxs("header", {
 				className: cn("flex items-center gap-2 px-3 py-2", frames[tone].header),
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "min-w-0 flex-1 text-[13px] font-semibold",
+					className: "min-w-0 flex-1 font-semibold",
 					children: title
 				}), badge && /* @__PURE__ */ jsx("span", {
 					className: "shrink-0 text-xs font-medium",

package/dist/activity-chart/activity-chart.js

@@ -29,11 +29,11 @@ const ActivityChart = ({ title = "Orders created", noun = "orders", defaultGranu
 				className: "flex items-baseline gap-2",
 				children: [
 					/* @__PURE__ */ jsx("h2", {
-						className: "text-[13px] font-semibold",
+						className: "font-semibold",
 						children: title
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "text-[13px] font-semibold tabular-nums",
+						className: "font-semibold tabular-nums",
 						children: formatInt(totalCount(series))
 					}),
 					/* @__PURE__ */ jsxs("span", {

package/dist/app/delete/dialogs.js

@@ -32,10 +32,10 @@ const ConflictDialog = ({ title, changes, busy, onReview, onDeleteAnyway, onCanc
 		children: "Delete anyway"
 	})] }),
 	children: changes.length === 0 ? /* @__PURE__ */ jsx("p", {
-		className: "text-[13px] text-muted-foreground",
+		className: "text-muted-foreground",
 		children: "No visible fields differ; the record was saved again with the same values."
 	}) : /* @__PURE__ */ jsx("ul", {
-		className: "divide-y rounded-md border text-[13px]",
+		className: "divide-y rounded-md border",
 		children: changes.map((change) => /* @__PURE__ */ jsxs("li", {
 			className: "grid grid-cols-[96px_1fr] gap-3 px-3 py-2",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -91,7 +91,7 @@ const BulkDeleteDialog = (props) => {
 			children: "Done"
 		}),
 		children: props.failures.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: "max-h-48 divide-y overflow-y-auto rounded-md border text-[13px]",
+			className: "max-h-48 divide-y overflow-y-auto rounded-md border",
 			children: props.failures.map((failure) => /* @__PURE__ */ jsxs("li", {
 				className: "px-3 py-2",
 				children: [/* @__PURE__ */ jsx("span", {

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

@@ -54,7 +54,7 @@ const SortMenu = ({ model, view, display, orderBy, onChange, className }) => {
 		"aria-label": "Sort",
 		value: `${current.columnId} ${current.direction}`,
 		onChange: (event) => onChange(event.target.value),
-		className: cn("h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20", className),
+		className: cn("h-8 rounded-md border border-border-strong bg-background px-2.5 shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20", className),
 		children: names.flatMap((name) => directions.map(([direction, word]) => /* @__PURE__ */ jsxs("option", {
 			value: `${name} ${direction}`,
 			children: [

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

@@ -9,7 +9,7 @@ const DisplayState = ({ list, empty, loading, children }) => /* @__PURE__ */ jsx
 		title: "Could not load rows",
 		error: list.error
 	}) : list.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
-		className: "py-8 text-center text-[13px] text-muted-foreground",
+		className: "py-8 text-center text-muted-foreground",
 		children: empty
 	}) : children
 });

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

@@ -25,7 +25,7 @@ const ListCards = ({ model, view, display, list }) => {
 		error: list.error
 	});
 	if (!list.source || list.source.total === 0) return /* @__PURE__ */ jsxs("p", {
-		className: "py-8 text-center text-[13px] text-muted-foreground",
+		className: "py-8 text-center text-muted-foreground",
 		children: [
 			"No ",
 			plural.toLowerCase(),

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

@@ -102,7 +102,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 				empty && /* @__PURE__ */ jsx("div", {
 					className: "pointer-events-none absolute inset-x-3 top-3 z-10 flex justify-center",
 					children: /* @__PURE__ */ jsxs("p", {
-						className: "pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background px-4 py-1.5 text-[13px] text-muted-foreground shadow",
+						className: "pointer-events-auto flex items-center gap-3 rounded-full border border-border bg-background px-4 py-1.5 text-muted-foreground shadow",
 						role: "status",
 						children: [fitting ? `No ${plural} match.` : `No ${plural} in this part of the map.`, !fitting && /* @__PURE__ */ jsx(Button, {
 							size: "sm",

package/dist/app/displays/record-card.js

@@ -141,7 +141,7 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			resource: model.name,
 			key: row.key
 		},
-		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
 		children: [mark && !pictured && /* @__PURE__ */ jsx(Badge, {
 			tone: "blue",
 			className: "self-start",

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

@@ -86,7 +86,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			display
 		}),
 		onClick: viewAll?.onOpen,
-		className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+		className: "flex items-center gap-1 self-end font-medium text-primary-text hover:underline",
 		children: [viewAll ? viewAll.label : /* @__PURE__ */ jsxs(Fragment$1, { children: ["View all ", /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: plural.toLowerCase()
@@ -102,7 +102,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 	});
 	if (!source || source.total === 0) {
 		const nothing = /* @__PURE__ */ jsx("p", {
-			className: "text-[13px] text-muted-foreground",
+			className: "text-muted-foreground",
 			children: empty ?? "Nothing here yet."
 		});
 		return viewAll && link ? /* @__PURE__ */ jsxs("div", {

package/dist/app/error-banner.js

@@ -12,7 +12,7 @@ const describe = (error) => {
 };
 const ErrorBanner = ({ error, title }) => /* @__PURE__ */ jsxs("div", {
 	role: "alert",
-	className: "flex gap-2.5 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-[13px] text-danger-text",
+	className: "flex gap-2.5 rounded-lg border border-danger/30 bg-danger-soft px-3 py-2 text-danger-text",
 	children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 		className: "font-medium",
 		children: title

package/dist/app/export/builder-port.js

@@ -0,0 +1,54 @@
+import { createExportBuilder } from "./builder.js";
+//#region src/app/export/builder-port.ts
+const joined = (chunks) => {
+	const bytes = new Uint8Array(chunks.reduce((size, chunk) => size + chunk.length, 0));
+	let offset = 0;
+	for (const chunk of chunks) {
+		bytes.set(chunk, offset);
+		offset += chunk.length;
+	}
+	return bytes;
+};
+/** Handles one message at a time, as the worker does, returning the bytes it made; used by the worker and by tests. */
+const createBuilderHandler = () => {
+	let builder;
+	let chunks = [];
+	return (message) => {
+		if (message.kind === "start") builder = createExportBuilder(message.plan, (chunk) => chunks.push(chunk));
+		else if (!builder) throw new Error("The export was not started");
+		else if (message.kind === "page") builder.page(message.records, message.labels);
+		else builder.finish();
+		const bytes = joined(chunks);
+		chunks = [];
+		return bytes;
+	};
+};
+/**
+* A port to a Web Worker that builds the file, so compressing it never holds up the page. The worker answers messages
+* in the order they came; an error in it fails every message still waiting.
+*/
+const createWorkerPort = () => {
+	const worker = new Worker(new URL("./export-worker.js", import.meta.url), {
+		type: "module",
+		name: "protobase-export"
+	});
+	const waiting = [];
+	worker.onmessage = (event) => waiting.shift()?.resolve(event.data.bytes);
+	worker.onerror = (event) => {
+		event.preventDefault();
+		const error = /* @__PURE__ */ new Error(`The export could not be built: ${event.message}`);
+		for (const entry of waiting.splice(0)) entry.reject(error);
+	};
+	return {
+		send: (message) => new Promise((resolve, reject) => {
+			waiting.push({
+				resolve,
+				reject
+			});
+			worker.postMessage(message);
+		}),
+		close: () => worker.terminate()
+	};
+};
+//#endregion
+export { createBuilderHandler, createWorkerPort };

package/dist/app/export/builder.js

@@ -0,0 +1,61 @@
+import { createXlsxWriter } from "./xlsx.js";
+import { csvText, xlsxCell } from "./cells.js";
+import { csvField, csvLine, csvTextField, utf8Bom } from "./csv.js";
+//#region src/app/export/builder.ts
+const typedText = /* @__PURE__ */ new Set([
+	"text",
+	"uuid",
+	"enum",
+	"relation",
+	"file",
+	"json",
+	"currency",
+	"country"
+]);
+const minWidth = 8;
+const maxWidth = 60;
+/** Each column's width in characters, room for its header and the longest value of the first page as shown. */
+const columnWidths = (columns, records, labels) => columns.map((column) => {
+	const longest = Math.max(column.header.length, ...records.map((record) => csvText(column, record[column.name], labels, "shown").length));
+	return Math.min(maxWidth, Math.max(minWidth, longest + 2));
+});
+const createCsvBuilder = (plan, onChunk) => {
+	const encoder = new TextEncoder();
+	onChunk(utf8Bom);
+	onChunk(encoder.encode(csvLine(plan.columns.map((column) => csvField(column.header)))));
+	const field = (column, record, labels) => {
+		const text = csvText(column, record[column.name], labels, plan.mode);
+		return typedText.has(column.field.type) ? csvTextField(text) : csvField(text);
+	};
+	return {
+		page: (records, labels) => {
+			onChunk(encoder.encode(records.map((record) => csvLine(plan.columns.map((column) => field(column, record, labels)))).join("")));
+		},
+		finish: () => void 0
+	};
+};
+const createXlsxBuilder = (plan, onChunk) => {
+	let writer;
+	const start = (records, labels) => createXlsxWriter({
+		name: plan.name,
+		headers: plan.columns.map((column) => column.header),
+		widths: columnWidths(plan.columns, records, labels)
+	}, onChunk);
+	return {
+		page: (records, labels) => {
+			writer ??= start(records, labels);
+			writer.rows(records.map((record) => plan.columns.map((column) => xlsxCell(column, record[column.name], labels, plan.mode))));
+		},
+		finish: () => {
+			writer ??= start([], {});
+			writer.finish();
+		}
+	};
+};
+/**
+* Builds an export file page by page: `page` with each page of records and the names of the records their relations
+* point at, then `finish` once. Each piece of the file goes to `onChunk` as soon as it is made.
+*/
+const createExportBuilder = (plan, onChunk) => plan.format === "csv" ? createCsvBuilder(plan, onChunk) : createXlsxBuilder(plan, onChunk);
+//#endregion
+export { columnWidths, createExportBuilder };

package/dist/app/export/cells.js

@@ -0,0 +1,93 @@
+import { fileShown, isStoredFile } from "../../live/file-values.js";
+import { displayValue } from "../../live/display-value.js";
+//#region src/app/export/cells.ts
+const empty = { kind: "empty" };
+const text = (value) => ({
+	kind: "text",
+	value
+});
+const isEmpty = (value) => value === null || value === void 0 || value === "";
+const relationLabel = (column, value, labels) => labels[column.name]?.[String(value)] ?? String(value);
+const fileText = (value, mode) => {
+	if (!isStoredFile(value)) return String(value);
+	return mode === "raw" ? value.uri : fileShown(value)?.name ?? value.uri;
+};
+/** A value as one CSV field: as the list shows it, or as the API sends it, empty for no value. */
+const csvText = (column, value, labels, mode) => {
+	if (isEmpty(value)) return "";
+	const { field, hints } = column;
+	if (field.type === "file") return fileText(value, mode);
+	if (field.type === "relation") return mode === "shown" ? relationLabel(column, value, labels) : String(value);
+	if (mode === "shown") return displayValue(field, value, hints);
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+};
+const excelEpochDays = 25569;
+const msPerDay = 864e5;
+const excelSerial = (ms) => ms / msPerDay + excelEpochDays;
+const dateFormats = {
+	shown: {
+		date: "d mmm yyyy",
+		timestamp: "d mmm yyyy, hh:mm"
+	},
+	raw: {
+		date: "yyyy-mm-dd",
+		timestamp: "yyyy-mm-dd hh:mm:ss"
+	}
+};
+const literal = (affix) => [...affix ?? ""].map((char) => `\\${char}`).join("");
+/** The Excel number format that shows a number as the list does: its decimals, prefix and suffix, or a percent sign. */
+const numberFormat = (hints) => {
+	if (hints.format === "percent") return "General\\%";
+	const digits = hints.decimals === void 0 ? "General" : hints.decimals > 0 ? `#,##0.${"0".repeat(hints.decimals)}` : "#,##0";
+	const code = `${literal(hints.prefix)}${digits}${literal(hints.suffix)}`;
+	return code === "General" ? void 0 : code;
+};
+const numberCell = (column, value, mode) => {
+	const number = Number(value);
+	if (!Number.isFinite(number)) return text(String(value));
+	if (column.field.type === "bigint" && !Number.isSafeInteger(number)) return text(String(value));
+	const format = mode === "shown" ? numberFormat(column.hints) : void 0;
+	return format ? {
+		kind: "number",
+		value: number,
+		format
+	} : {
+		kind: "number",
+		value: number
+	};
+};
+const dateCell = (type, value, mode) => {
+	const ms = Date.parse(String(value));
+	if (Number.isNaN(ms)) return text(String(value));
+	return {
+		kind: "number",
+		value: excelSerial(ms),
+		format: dateFormats[mode][type]
+	};
+};
+/** A value as one typed Excel cell: numbers, dates and booleans as such, labels or stored values as text. */
+const xlsxCell = (column, value, labels, mode) => {
+	if (isEmpty(value)) return empty;
+	const { field } = column;
+	switch (field.type) {
+		case "boolean": return {
+			kind: "boolean",
+			value: Boolean(value)
+		};
+		case "integer":
+		case "bigint":
+		case "decimal": return numberCell(column, value, mode);
+		case "date":
+		case "timestamp": return dateCell(field.type, value, mode);
+		case "relation":
+			if (mode === "shown") return text(relationLabel(column, value, labels));
+			return typeof value === "number" ? {
+				kind: "number",
+				value
+			} : text(String(value));
+		default: return text(csvText(column, value, labels, mode));
+	}
+};
+//#endregion
+export { csvText, numberFormat, xlsxCell };

package/dist/app/export/csv.js

@@ -0,0 +1,17 @@
+//#region src/app/export/csv.ts
+/** The UTF-8 byte order mark, which makes Excel read a CSV file as UTF-8 instead of the system's code page. */
+const utf8Bom = new Uint8Array([
+	239,
+	187,
+	191
+]);
+const needsQuotes = /[",\r\n]/;
+const formulaStart = /^[=+\-@\t\r]/;
+/** One field as RFC 4180 writes it: in double quotes, its quotes doubled, when it holds a comma, quote or line break. */
+const csvField = (value) => needsQuotes.test(value) ? `"${value.replaceAll("\"", "\"\"")}"` : value;
+/** Text from a text field, kept from running as a formula in a spreadsheet. */
+const csvTextField = (value) => csvField(formulaStart.test(value) ? `'${value}` : value);
+/** One record, CRLF-terminated as RFC 4180 has it. */
+const csvLine = (fields) => `${fields.join(",")}\r\n`;
+//#endregion
+export { csvField, csvLine, csvTextField, utf8Bom };