@protobase/ui 0.63.5 → 0.65.0

package/dist/app/field-messages.js

@@ -1,48 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/app/field-messages.ts
-const text = defineMessages({
-	en: {
-		atLeastCharacters: (label, count, n) => `${label} needs at least ${count} character${n === 1 ? "" : "s"}`,
-		atMostCharacters: (label, count, n) => `${label} can have at most ${count} character${n === 1 ? "" : "s"}`,
-		wholeNumberAtLeast: (min) => `Enter a whole number of at least ${min}`,
-		wholeNumberAtMost: (max) => `Enter a whole number of at most ${max}`,
-		wholeNumber: "Enter a whole number",
-		number: "Enter a number",
-		wholeNumberBelow: (below) => `Enter a whole number below ${below}`,
-		decimalsBelow: (scale, below) => `Enter a number with at most ${scale} decimal${scale === 1 ? "" : "s"}, below ${below}`,
-		date: "Enter a date",
-		timestamp: "Enter a date and time",
-		country: "Enter a two-letter country code, such as NL",
-		currency: "Enter a three-letter currency code, such as EUR",
-		uuid: "Enter a valid ID",
-		enum: "Choose one of the options",
-		relation: "Choose a record",
-		json: "Enter valid JSON",
-		required: (label) => `${label} is required`,
-		checkField: "Check the marked field.",
-		checkFields: (count) => `Check ${count} fields.`
-	},
-	nl: {
-		atLeastCharacters: (label, count, n) => `${label} moet minstens ${count} ${n === 1 ? "teken" : "tekens"} hebben`,
-		atMostCharacters: (label, count, n) => `${label} mag hoogstens ${count} ${n === 1 ? "teken" : "tekens"} hebben`,
-		wholeNumberAtLeast: (min) => `Vul een geheel getal in van minstens ${min}`,
-		wholeNumberAtMost: (max) => `Vul een geheel getal in van hoogstens ${max}`,
-		wholeNumber: "Vul een geheel getal in",
-		number: "Vul een getal in",
-		wholeNumberBelow: (below) => `Vul een geheel getal in onder ${below}`,
-		decimalsBelow: (scale, below) => `Vul een getal in met hoogstens ${scale} ${scale === 1 ? "decimaal" : "decimalen"}, onder ${below}`,
-		date: "Vul een datum in",
-		timestamp: "Vul een datum en tijd in",
-		country: "Vul een landcode van twee letters in, zoals NL",
-		currency: "Vul een valutacode van drie letters in, zoals EUR",
-		uuid: "Vul een geldig ID in",
-		enum: "Kies een van de opties",
-		relation: "Kies een record",
-		json: "Vul geldige JSON in",
-		required: (label) => `${label} is verplicht`,
-		checkField: "Controleer het gemarkeerde veld.",
-		checkFields: (count) => `Controleer ${count} velden.`
-	}
-});
+const text = messages("app/field");
 //#endregion
 export { text };

package/dist/app/field-types/members/messages.js

@@ -1,18 +1,5 @@
-import { defineMessages } from "../../../locale/messages.js";
+import { messages } from "../../../locale/messages.js";
 //#region src/app/field-types/members/messages.ts
-const text = defineMessages({
-	en: {
-		needsOrganizations: "Choosing members needs organizations: turn them on in the auth config.",
-		couldNotLoadMembers: "Could not load the members.",
-		unknownMember: "Unknown member",
-		searchMembers: "Search members"
-	},
-	nl: {
-		needsOrganizations: "Leden kiezen vraagt om organisaties: zet ze aan in de auth-configuratie.",
-		couldNotLoadMembers: "De leden konden niet worden geladen.",
-		unknownMember: "Onbekend lid",
-		searchMembers: "Leden zoeken"
-	}
-});
+const text = messages("app/field-types/members");
 //#endregion
 export { text };

package/dist/app/field-types/messages.js

@@ -1,8 +1,5 @@
-import { defineMessages } from "../../locale/messages.js";
+import { messages } from "../../locale/messages.js";
 //#region src/app/field-types/messages.ts
-const text = defineMessages({
-	en: { fieldType: (name) => `The field type ${name}` },
-	nl: { fieldType: (name) => `Het veldtype ${name}` }
-});
+const text = messages("app/field-types");
 //#endregion
 export { text };

package/dist/app/field-types/widget-part.js

@@ -25,7 +25,7 @@ const WidgetPart = ({ fallback, ...rest }) => {
 	const element = partOf(rest);
 	if (!element) return fallback;
 	return /* @__PURE__ */ jsx(CustomBoundary, {
-		name: text("fieldType", rest.shown.name),
+		name: text("fieldType", { name: rest.shown.name }),
 		fallback,
 		children: element
 	});

package/dist/app/file-field.js

@@ -98,7 +98,7 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 		type: "file",
 		hidden: true,
 		accept: acceptOf(field),
-		"aria-label": text("chooseFileFor", label),
+		"aria-label": text("chooseFileFor", { label }),
 		onChange: (event) => choose(event.target.files)
 	});
 	const error = upload.error && /* @__PURE__ */ jsx("div", {
@@ -111,7 +111,7 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 	if (upload.isPending) return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		role: "status",
-		"aria-label": text("uploadingLabel", label),
+		"aria-label": text("uploadingLabel", { label }),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "h-1.5 overflow-hidden rounded-full bg-muted",
 			children: /* @__PURE__ */ jsx("div", {
@@ -120,7 +120,7 @@ const FileField = ({ field, hints, resource, value, locked, invalid, onChange })
 			})
 		}), /* @__PURE__ */ jsx("span", {
 			className: "text-xs text-muted-foreground",
-			children: text("uploading", Math.round((progress ?? 0) * 100))
+			children: text("uploading", { percent: Math.round((progress ?? 0) * 100) })
 		})]
 	});
 	if (fileShown(value)) return /* @__PURE__ */ jsxs("div", { children: [

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

@@ -92,7 +92,10 @@ const GallerySection = ({ item, record, recordKey }) => {
 				const last = index === shown - 1 && more > 0;
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					"aria-label": last ? text("showAll", count) : text("showPhoto", index + 1, count),
+					"aria-label": last ? text("showAll", { count }) : text("showPhoto", {
+						index: index + 1,
+						count
+					}),
 					onClick: () => setOpen(index),
 					className: cn("group/tile relative overflow-hidden bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", index === 0 ? "col-span-4 row-span-2" : "max-md:hidden", spans[shown][index]),
 					children: [
@@ -120,7 +123,7 @@ const GallerySection = ({ item, record, recordKey }) => {
 			onIndex: setOpen,
 			onClose: () => setOpen(void 0),
 			details,
-			detailsTitle: holder && text("holderDetails", holderView?.names?.singular ?? humanize(holder.name))
+			detailsTitle: holder && text("holderDetails", { singular: holderView?.names?.singular ?? humanize(holder.name) })
 		})]
 	});
 };

package/dist/app/gallery/messages.js

@@ -1,30 +1,5 @@
-import { defineMessages } from "../../locale/messages.js";
+import { messages } from "../../locale/messages.js";
 //#region src/app/gallery/messages.ts
-const text = defineMessages({
-	en: {
-		couldNotLoad: "Could not load the photos",
-		showAll: (count) => `Show all ${count} photos`,
-		showPhoto: (index, count) => `Show photo ${index} of ${count}`,
-		details: "Details",
-		holderDetails: (singular) => `${singular} details`,
-		close: "Close",
-		previousPhoto: "Previous photo",
-		nextPhoto: "Next photo",
-		couldNotLoadOne: (singular) => `Could not load the ${singular}`,
-		open: (singular) => `Open ${singular}`
-	},
-	nl: {
-		couldNotLoad: "Kon de foto’s niet laden",
-		showAll: (count) => `Alle ${count} foto’s tonen`,
-		showPhoto: (index, count) => `Foto ${index} van ${count} tonen`,
-		details: "Gegevens",
-		holderDetails: (singular) => `Gegevens van ${singular.toLowerCase()}`,
-		close: "Sluiten",
-		previousPhoto: "Vorige foto",
-		nextPhoto: "Volgende foto",
-		couldNotLoadOne: (singular) => `Kon ${singular} niet laden`,
-		open: (singular) => `${singular} openen`
-	}
-});
+const text = messages("app/gallery");
 //#endregion
 export { text };

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

@@ -18,7 +18,7 @@ const PhotoDetails = ({ model, view, photoKey, fields }) => {
 	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
 	if (record.isPending) return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
 	if (record.error) return /* @__PURE__ */ jsx(ErrorBanner, {
-		title: text("couldNotLoadOne", singular),
+		title: text("couldNotLoadOne", { singular }),
 		error: record.error
 	});
 	const shown = fields.filter((name) => fieldAccess(record.data.permissions, name) !== "hidden");
@@ -36,7 +36,7 @@ const PhotoDetails = ({ model, view, photoKey, fields }) => {
 			key: photoKey
 		},
 		className: "mt-3 inline-block font-medium text-primary-text hover:underline",
-		children: text("open", singular)
+		children: text("open", { singular })
 	})] });
 };
 //#endregion

package/dist/app/hand-order/hand-sorted-list.js

@@ -6,7 +6,6 @@ import { useAppAddress } from "../use-app-address.js";
 import { ErrorBanner } from "../error-banner.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { Problem } from "../pages/problem.js";
-import { slotted } from "../../locale/slotted.js";
 import { DataGrid } from "../../data-grid/data-grid.js";
 import { text } from "./messages.js";
 import { embeddedColumns } from "../embedded-list/embedded-columns.js";
@@ -60,7 +59,7 @@ const HandSortedList = ({ model, view, field, filter, columns, sort }) => {
 		total: rows.length,
 		rowAt: (index) => rows[index]
 	}, [rows]);
-	if (ruleName !== void 0 && !rule) return /* @__PURE__ */ jsx(Problem, { children: slotted(text("noRule"), ruleName) });
+	if (ruleName !== void 0 && !rule) return /* @__PURE__ */ jsx(Problem, { children: text.rich("noRule", { rule: ruleName }) });
 	if (order.loading) return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col gap-2",
 		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, index))

package/dist/app/hand-order/messages.js

@@ -1,32 +1,5 @@
-import { defineMessages } from "../../locale/messages.js";
+import { messages } from "../../locale/messages.js";
 //#region src/app/hand-order/messages.ts
-const text = defineMessages({
-	en: {
-		done: "Done",
-		reorder: "Reorder",
-		couldNotLoad: "Could not load",
-		nothingYet: "Nothing here yet.",
-		couldNotChange: "Could not change the order",
-		orderChanged: "Order changed",
-		undo: "Undo",
-		couldNotUndo: "Could not undo",
-		movedToPlace: (place) => `Moved to place ${place}`,
-		notMoved: "Left in its place",
-		noRule: "No drop rule is registered as {}. Give it in dropRules in protobase.ui.tsx, or load the plugin that provides it."
-	},
-	nl: {
-		done: "Klaar",
-		reorder: "Volgorde wijzigen",
-		couldNotLoad: "Kon niet laden",
-		nothingYet: "Hier staat nog niets.",
-		couldNotChange: "Kon de volgorde niet wijzigen",
-		orderChanged: "Volgorde gewijzigd",
-		undo: "Ongedaan maken",
-		couldNotUndo: "Kon niet ongedaan maken",
-		movedToPlace: (place) => `Verplaatst naar plaats ${place}`,
-		notMoved: "Op zijn plaats gelaten",
-		noRule: "Er is geen sleepregel geregistreerd als {}. Geef die in dropRules in protobase.ui.tsx, of laad de plug-in die haar levert."
-	}
-});
+const text = messages("app/hand-order");
 //#endregion
 export { text };

package/dist/app/hand-order/use-hand-order.js

@@ -156,7 +156,7 @@ const useHandOrder = ({ model, view, field, filter, fields, rule }) => {
 		const allowed = allowedDrop(rows.map((row) => displayRow(model, row).record), from, dropped, rule);
 		if (allowed.reason !== void 0) toast.show({
 			state: "warning",
-			title: allowed.to === from ? text("notMoved") : text("movedToPlace", allowed.to + 1),
+			title: allowed.to === from ? text("notMoved") : text("movedToPlace", { place: allowed.to + 1 }),
 			description: allowed.reason
 		});
 		return allowed.to;

package/dist/app/history/describe-change.js

@@ -5,7 +5,7 @@ import { text } from "./messages.js";
 /** Who made a change: their name, else their id; a write from outside the app names the database role. */
 const changedBy = (change) => {
 	if (change.actor) return change.actor.name ?? change.actor.id;
-	return change.databaseRole ? text("databaseRole", change.databaseRole) : text("database");
+	return change.databaseRole ? text("databaseRole", { role: change.databaseRole }) : text("database");
 };
 /**
 * A change as the record page tells it: who, what they did, and for an update each changed field the model still has,

package/dist/app/history/messages.js

@@ -1,32 +1,5 @@
-import { defineMessages } from "../../locale/messages.js";
+import { messages } from "../../locale/messages.js";
 //#region src/app/history/messages.ts
-const text = defineMessages({
-	en: {
-		create: "created this",
-		update: "changed",
-		delete: "deleted this",
-		undelete: "restored this",
-		database: "Database",
-		databaseRole: (role) => `Database (${role})`,
-		changed: "changed",
-		changedThis: "changed this",
-		couldNotLoad: "Could not load the history",
-		noChanges: "No changes kept yet.",
-		showMore: "Show more"
-	},
-	nl: {
-		create: "maakte dit",
-		update: "wijzigde",
-		delete: "verwijderde dit",
-		undelete: "zette dit terug",
-		database: "Database",
-		databaseRole: (role) => `Database (${role})`,
-		changed: "gewijzigd",
-		changedThis: "wijzigde dit",
-		couldNotLoad: "Kon de geschiedenis niet laden",
-		noChanges: "Nog geen wijzigingen bewaard.",
-		showMore: "Meer tonen"
-	}
-});
+const text = messages("app/history");
 //#endregion
 export { text };

package/dist/app/import/convert.js

@@ -18,16 +18,16 @@ const toNumberText = (cell, options) => {
 };
 const integerValue = (field, cell, options) => {
 	const text$1 = toNumberText(cell, options);
-	if (text$1 === void 0) return problem(text("notNumber", quoted(cell)));
+	if (text$1 === void 0) return problem(text("notNumber", { cell: quoted(cell) }));
 	const [whole, fraction = ""] = text$1.split(".");
-	if (/[1-9]/.test(fraction) || /e/i.test(text$1)) return problem(text("notWholeNumber", quoted(cell)));
+	if (/[1-9]/.test(fraction) || /e/i.test(text$1)) return problem(text("notWholeNumber", { cell: quoted(cell) }));
 	if (field.type === "bigint") return ok(String(BigInt(whole)));
 	const value = Number(whole);
-	return Number.isSafeInteger(value) ? ok(value) : problem(text("tooLarge", quoted(cell)));
+	return Number.isSafeInteger(value) ? ok(value) : problem(text("tooLarge", { cell: quoted(cell) }));
 };
 const decimalValue = (cell, options) => {
 	const text$2 = toNumberText(cell, options);
-	return text$2 === void 0 ? problem(text("notNumber", quoted(cell))) : ok(text$2);
+	return text$2 === void 0 ? problem(text("notNumber", { cell: quoted(cell) })) : ok(text$2);
 };
 const trueWords = /* @__PURE__ */ new Set([
 	"true",
@@ -44,7 +44,7 @@ const booleanValue = (cell) => {
 	const text$3 = typeof cell === "string" || typeof cell === "number" ? String(cell).trim().toLowerCase() : "";
 	if (trueWords.has(text$3)) return ok(true);
 	if (falseWords.has(text$3)) return ok(false);
-	return problem(text("notBoolean", quoted(cell)));
+	return problem(text("notBoolean", { cell: quoted(cell) }));
 };
 const pad = (value) => String(value).padStart(2, "0");
 const calendarDate = (year, month, day) => {
@@ -91,11 +91,14 @@ const wallTimeOf = (cell, options) => {
 	}
 	return typeof cell === "string" ? readWallTime(cell, options.dateOrder) : void 0;
 };
-const notDate = (cell, options) => problem(text("notDate", quoted(cell), options.dateOrder === "dmy"));
+const notDate = (cell, options) => problem(text("notDate", {
+	cell: quoted(cell),
+	dayFirst: options.dateOrder === "dmy"
+}));
 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(text("hasTime", quoted(cell)));
+	if (at.time && at.time !== "00:00:00") return problem(text("hasTime", { cell: quoted(cell) }));
 	return ok(at.date);
 };
 const timestampValue = (cell, options) => {
@@ -112,10 +115,16 @@ const enumValue = (field, hints, cell) => {
 	const text$4 = normalized(cellText(cell));
 	const matches = values.filter((value) => normalized(value) === text$4 || normalized(enumLabel(value, hints?.valueLabels)) === text$4);
 	if (matches.length === 1) return ok(matches[0]);
-	if (matches.length > 1) return problem(text("severalValues", quoted(cell), matches.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")));
-	return problem(text("notOneOf", quoted(cell), values.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")));
+	if (matches.length > 1) return problem(text("severalValues", {
+		cell: quoted(cell),
+		values: matches.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")
+	}));
+	return problem(text("notOneOf", {
+		cell: quoted(cell),
+		values: values.map((value) => enumLabel(value, hints?.valueLabels)).join(", ")
+	}));
 };
-const textValue = (cell) => typeof cell === "boolean" ? problem(text("notText", quoted(cell))) : ok(cellText(cell));
+const textValue = (cell) => typeof cell === "boolean" ? problem(text("notText", { cell: quoted(cell) })) : 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

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

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** 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), text("notImportedFile", (fileName ?? "import").replace(/\.[^.]+$/, "")), "text/csv");
+const downloadRows = (fileName, headers, rows) => saveFile(failedRowsCsv(headers, rows), text("notImportedFile", { name: (fileName ?? "import").replace(/\.[^.]+$/, "") }), "text/csv");
 /** The rows with what keeps each from being imported, at most `listedProblems` of them. */
 const ProblemList = ({ rows }) => /* @__PURE__ */ jsxs("ul", {
 	"aria-label": text("rowsNotImported"),
@@ -21,19 +21,19 @@ const ProblemList = ({ rows }) => /* @__PURE__ */ jsxs("ul", {
 	children: [rows.slice(0, listedProblems).map((row) => /* @__PURE__ */ jsxs("li", { children: [
 		/* @__PURE__ */ jsx("span", {
 			className: "font-medium",
-			children: text("rowProblems", row.line)
+			children: text("rowProblems", { line: row.line })
 		}),
 		" ",
 		row.problems.join("; ")
 	] }, row.line)), rows.length > listedProblems && /* @__PURE__ */ jsx("li", {
 		className: "text-muted-foreground",
-		children: text("andMore", (rows.length - listedProblems).toLocaleString(formatTag()))
+		children: text("andMore", { count: (rows.length - listedProblems).toLocaleString(formatTag()) })
 	})]
 });
 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" }), text("checkingRows", rows.toLocaleString(formatTag()))]
+	children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), text("checkingRows", { count: rows.toLocaleString(formatTag()) })]
 });
 /**
 * What the import would do, before it writes anything: how many rows create or update a record, the first rows as they
@@ -99,7 +99,7 @@ const ImportCheckStep = ({ check, model, resources, views, columns, headers, fil
 			}),
 			/* @__PURE__ */ jsx("p", {
 				className: "text-xs text-muted-foreground",
-				children: text("batches", 100)
+				children: text("batches", { size: 100 })
 			})
 		]
 	});

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

@@ -73,7 +73,10 @@ const ImportDialog = ({ model, resources, views, canUpdate, onClose, sourceFor }
 					variant: "primary",
 					disabled: rows === 0,
 					onClick: () => flow.start(rows),
-					children: text("importRows", rows.toLocaleString(formatTag()), rows)
+					children: text("importRows", {
+						count: rows.toLocaleString(formatTag()),
+						rows
+					})
 				})] });
 			}
 			case "importing": return /* @__PURE__ */ jsx(Button, {
@@ -132,7 +135,7 @@ const ImportDialog = ({ model, resources, views, canUpdate, onClose, sourceFor }
 	return /* @__PURE__ */ jsx(ResponsiveDialog, {
 		open: true,
 		wide: true,
-		title: text("importPlural", plural),
+		title: text("importPlural", { plural }),
 		description: flow.file && step.kind !== "file" ? flow.file.name : void 0,
 		onClose: close,
 		actions: actions(),

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

@@ -39,7 +39,7 @@ const ImportFileStep = ({ file, sheets, sheet, reading, onChoose, onSheet }) =>
 			reading && /* @__PURE__ */ jsxs("p", {
 				className: "flex items-center gap-2 text-muted-foreground",
 				role: "status",
-				children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), text("reading", file?.name ?? text("theFile"))]
+				children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), text("reading", { name: file?.name ?? text("theFile") })]
 			}),
 			!reading && sheets.length > 1 && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-end gap-3",

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

@@ -162,13 +162,13 @@ const ImportMappingStep = ({ flow, model, resources, views, canUpdate }) => {
 							className: "flex min-w-0 flex-col gap-2",
 							children: [/* @__PURE__ */ jsx(ImportSelect, {
 								label: text("field"),
-								name: text("fieldFor", name),
+								name: text("fieldFor", { name }),
 								value: mapped?.field ?? skip,
 								options: fieldOptions,
 								onChange: (next) => flow.mapColumn(column, next || void 0)
 							}), target && /* @__PURE__ */ jsx(ImportSelect, {
 								label: text("foundBy"),
-								name: text("pluralFoundBy", views[target.name]?.names?.plural ?? fieldLabel(view, field.name)),
+								name: text("pluralFoundBy", { plural: views[target.name]?.names?.plural ?? fieldLabel(view, field.name) }),
 								value: mapped.matchBy ?? target.primaryKey[0],
 								options: matchFields(target).map((candidate) => ({
 									value: candidate.name,
@@ -183,7 +183,7 @@ const ImportMappingStep = ({ flow, model, resources, views, canUpdate }) => {
 			missing.length > 0 && /* @__PURE__ */ jsxs("p", {
 				role: "alert",
 				className: "flex gap-2 rounded-lg border border-warning/30 bg-warning-soft px-3 py-2 text-warning-text",
-				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: text("noColumnFills", missing.map((field) => fieldLabel(view, field.name)).join(", ")) })]
+				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsx("span", { children: text("noColumnFills", { fields: missing.map((field) => fieldLabel(view, field.name)).join(", ") }) })]
 			})
 		]
 	});