@protobase/ui 0.19.4 → 0.19.6

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

@@ -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";
@@ -11,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",
@@ -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/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/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

@@ -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/field-editor.js

@@ -50,7 +50,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		})
 	});
 	if (field.type === "boolean" && locked) return /* @__PURE__ */ jsx("div", {
-		className: "py-1.5 text-[13px] text-muted-foreground",
+		className: "py-1.5 text-muted-foreground",
 		children: displayValue(field, stored, hints)
 	});
 	if (field.type === "boolean") return /* @__PURE__ */ jsx(Switch, {
@@ -61,7 +61,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 	if (field.type === "relation") {
 		const label = relationLabel ?? String(stored ?? "—");
 		return /* @__PURE__ */ jsx("div", {
-			className: "py-1.5 text-[13px]",
+			className: "py-1.5",
 			children: relationTo ? /* @__PURE__ */ jsx(AppLink, {
 				to: relationTo,
 				className: "font-medium text-primary-text hover:underline",
@@ -71,13 +71,13 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 	}
 	const multiline = Boolean(hints?.multiline) && field.type === "text";
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
-		className: cn("py-1.5 text-[13px] tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
+		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
 	});
 	if (field.type === "enum") return /* @__PURE__ */ jsxs("select", {
 		value: String(value),
 		onChange: (event) => onChange(event.target.value),
-		className: "h-8 w-full 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",
+		className: "h-8 w-full rounded-md border border-border-strong bg-background px-2 shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
 		children: [value === "" && /* @__PURE__ */ jsx("option", {
 			value: "",
 			children: "Choose..."
@@ -94,14 +94,8 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 	});
 	return /* @__PURE__ */ jsx(Input, {
 		invalid,
-		leading: hints?.prefix ? /* @__PURE__ */ jsx("span", {
-			className: "text-[13px]",
-			children: hints.prefix
-		}) : void 0,
-		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", {
-			className: "text-[13px]",
-			children: hints.suffix.trim()
-		}) : void 0,
+		leading: hints?.prefix ? /* @__PURE__ */ jsx("span", { children: hints.prefix }) : void 0,
+		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", { children: hints.suffix.trim() }) : void 0,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		value: String(value),

package/dist/app/file-field.js

@@ -27,11 +27,11 @@ const Thumbnail = ({ value }) => {
 const FileSummary = ({ value }) => {
 	const shown = fileShown(value);
 	if (!shown) return /* @__PURE__ */ jsx("div", {
-		className: "py-1.5 text-[13px] text-muted-foreground",
+		className: "py-1.5 text-muted-foreground",
 		children: "—"
 	});
 	if ("missing" in shown) return /* @__PURE__ */ jsx("div", {
-		className: "py-1.5 text-[13px] text-danger-text",
+		className: "py-1.5 text-danger-text",
 		children: "The file is missing from storage"
 	});
 	const url = "url" in shown ? shown.url : void 0;
@@ -39,7 +39,7 @@ const FileSummary = ({ value }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 items-center gap-3 py-1",
 		children: [/* @__PURE__ */ jsx(Thumbnail, { value }), /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 text-[13px]",
+			className: "min-w-0",
 			children: [url && !url.startsWith("blob:") ? /* @__PURE__ */ jsx("a", {
 				href: url,
 				target: "_blank",
@@ -158,7 +158,7 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 			},
 			onDragLeave: () => setDragging(false),
 			onDrop: drop,
-			className: cn("flex items-center gap-3 rounded-md border border-dashed px-3 py-2.5 text-[13px] text-muted-foreground", dragging ? "border-primary bg-primary/5" : invalid ? "border-danger" : "border-border-strong"),
+			className: cn("flex items-center gap-3 rounded-md border border-dashed px-3 py-2.5 text-muted-foreground", dragging ? "border-primary bg-primary/5" : invalid ? "border-danger" : "border-border-strong"),
 			children: [
 				/* @__PURE__ */ jsx(Upload, { className: "size-4 shrink-0" }),
 				/* @__PURE__ */ jsx("span", {

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 };