@protobase/ui 0.63.4 → 0.64.0

package/dist/filter-panel/messages.js

@@ -1,52 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/filter-panel/messages.ts
-const text = defineMessages({
-	en: {
-		today: "Today",
-		yesterday: "Yesterday",
-		"24h": "Last 24 hours",
-		"7d": "Last 7 days",
-		"30d": "Last 30 days",
-		"90d": "Last 90 days",
-		month: "This month",
-		quarter: "This quarter",
-		year: "This year",
-		unknownPreset: (id) => `The server offers the preset "${id}", which this UI does not know`,
-		unsupported: (id) => `${id} (unsupported)`,
-		remove: (label) => `Remove ${label}`,
-		clearAll: "Clear all",
-		searchIn: (label) => `Search ${label.toLowerCase()}`,
-		noMatches: "No matches",
-		moreFilters: "More filters",
-		filters: "Filters",
-		date: "Date",
-		showOnly: "Show only",
-		minimum: (label) => `${label} minimum`,
-		maximum: (label) => `${label} maximum`
-	},
-	nl: {
-		today: "Vandaag",
-		yesterday: "Gisteren",
-		"24h": "Afgelopen 24 uur",
-		"7d": "Afgelopen 7 dagen",
-		"30d": "Afgelopen 30 dagen",
-		"90d": "Afgelopen 90 dagen",
-		month: "Deze maand",
-		quarter: "Dit kwartaal",
-		year: "Dit jaar",
-		unknownPreset: (id) => `De server biedt de periode "${id}", die deze UI niet kent`,
-		unsupported: (id) => `${id} (niet ondersteund)`,
-		remove: (label) => `${label} verwijderen`,
-		clearAll: "Alles wissen",
-		searchIn: (label) => `Zoeken in ${label.toLowerCase()}`,
-		noMatches: "Niets gevonden",
-		moreFilters: "Meer filters",
-		filters: "Filters",
-		date: "Datum",
-		showOnly: "Alleen tonen",
-		minimum: (label) => `${label} minimum`,
-		maximum: (label) => `${label} maximum`
-	}
-});
+const text = messages("filter-panel");
 //#endregion
 export { text };

package/dist/filter-panel/range-filter.js

@@ -49,7 +49,7 @@ const RangeFilter = ({ config, value, onChange }) => {
 				children: [0, 1].map((thumb) => /* @__PURE__ */ jsx("input", {
 					type: "range",
 					className: "pb-range",
-					"aria-label": thumb === 0 ? text("minimum", config.label) : text("maximum", config.label),
+					"aria-label": thumb === 0 ? text("minimum", { label: config.label }) : text("maximum", { label: config.label }),
 					min,
 					max,
 					step,

package/dist/format/date.js

@@ -63,10 +63,10 @@ const formatDayRange = (from, to) => day().formatRange(from, to);
 /** "09:30": an instant's time on the clock of `zone`, the viewer's unless given. */
 const formatTime = (ms, zone = viewerZone()) => zonedFormats(zone).time.format(ms);
 const formatAgo = (seconds) => {
-	if (seconds < 60) return text("secondsAgo", seconds);
-	if (seconds < 3600) return text("minutesAgo", Math.floor(seconds / 60));
-	if (seconds < 86400) return text("hoursAgo", Math.floor(seconds / 3600));
-	return text("daysAgo", Math.floor(seconds / 86400));
+	if (seconds < 60) return text("secondsAgo", { count: seconds });
+	if (seconds < 3600) return text("minutesAgo", { count: Math.floor(seconds / 60) });
+	if (seconds < 86400) return text("hoursAgo", { count: Math.floor(seconds / 3600) });
+	return text("daysAgo", { count: Math.floor(seconds / 86400) });
 };
 const relative = () => cachedFormat("relative", (tag) => new Intl.RelativeTimeFormat(tag, { numeric: "auto" }));
 const units = [

package/dist/format/messages.js

@@ -1,24 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/format/messages.ts
-const text = defineMessages({
-	en: {
-		rows: (count, one) => `${count} ${one ? "row" : "rows"}`,
-		aboutRows: (count) => `about ${count} rows`,
-		secondsAgo: (count) => `${count} s ago`,
-		minutesAgo: (count) => `${count} min ago`,
-		hoursAgo: (count) => `${count} h ago`,
-		daysAgo: (count) => `${count} d ago`,
-		justNow: "just now"
-	},
-	nl: {
-		rows: (count, one) => `${count} ${one ? "rij" : "rijen"}`,
-		aboutRows: (count) => `ongeveer ${count} rijen`,
-		secondsAgo: (count) => `${count} s geleden`,
-		minutesAgo: (count) => `${count} min geleden`,
-		hoursAgo: (count) => `${count} u geleden`,
-		daysAgo: (count) => `${count} d geleden`,
-		justNow: "zojuist"
-	}
-});
+const text = messages("format");
 //#endregion
 export { text };

package/dist/format/money.js

@@ -9,6 +9,6 @@ const formatterFor = (currency, decimals) => cachedFormat(`money:${currency}:${d
 	}
 }));
 /** An amount in cents in the currency, with its usual decimals or `decimals` of them. */
-const formatMoney = (cents, currency = "EUR", decimals) => formatterFor(currency, decimals).format(cents / 100);
+const formatMoney = (cents, currency, decimals) => formatterFor(currency, decimals).format(cents / 100);
 //#endregion
 export { formatMoney };

package/dist/format/number.js

@@ -6,9 +6,12 @@ const formatInt = (value) => grouped().format(value);
 const formatSigned = (value) => value > 0 ? `+${grouped().format(value)}` : grouped().format(value).replace("-", "−");
 const formatPercent = (value) => `${value}%`;
 const formatApproxRows = (count) => {
-	if (count < 1e4) return text("rows", formatInt(count), count === 1);
+	if (count < 1e4) return text("rows", {
+		count: formatInt(count),
+		n: count
+	});
 	const magnitude = 10 ** (Math.floor(Math.log10(count)) - 3);
-	return text("aboutRows", formatInt(Math.round(count / magnitude) * magnitude));
+	return text("aboutRows", { count: formatInt(Math.round(count / magnitude) * magnitude) });
 };
 //#endregion
 export { formatApproxRows, formatInt, formatPercent, formatSigned };

package/dist/forms/messages.js

@@ -1,24 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/forms/messages.ts
-const text = defineMessages({
-	en: {
-		loading: "Loading",
-		notFound: "Not found",
-		noForm: "There is no form at this address.",
-		setByDatabase: "Set by the database",
-		notSent: "Not sent",
-		send: "Send",
-		checkTooLong: "The check that you are not a bot took too long; send the form again"
-	},
-	nl: {
-		loading: "Laden",
-		notFound: "Niet gevonden",
-		noForm: "Er is geen formulier op dit adres.",
-		setByDatabase: "Ingevuld door de database",
-		notSent: "Niet verzonden",
-		send: "Verzenden",
-		checkTooLong: "De controle of je geen bot bent duurde te lang; verzend het formulier opnieuw"
-	}
-});
+const text = messages("forms");
 //#endregion
 export { text };

package/dist/forms/public-form-page.js

@@ -4,8 +4,8 @@ import { Spinner } from "../primitives/spinner.js";
 import { text } from "../app/meta-gate-messages.js";
 import { Notice } from "../app/meta-gate.js";
 import { Button } from "../primitives/button.js";
-import { Field } from "../record-view/field.js";
 import { humanize } from "../live/naming.js";
+import { Field } from "../record-view/field.js";
 import { createBody, hasDatabaseDefault, initialDraft, isRequired, numberDefault } from "../app/create/create-values.js";
 import { ErrorBanner } from "../app/error-banner.js";
 import { FieldEditor } from "../app/field-editor.js";

package/dist/index.js

@@ -4,12 +4,12 @@ import { Spinner } from "./primitives/spinner.js";
 import { Button, buttonClass } from "./primitives/button.js";
 import { Dialog } from "./primitives/dialog.js";
 import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
-import { useFieldControl } from "./primitives/field-control.js";
-import { Input } from "./primitives/input.js";
-import { Field } from "./record-view/field.js";
 import { Section } from "./record-view/section.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
+import { useFieldControl } from "./primitives/field-control.js";
+import { Field } from "./record-view/field.js";
+import { Input } from "./primitives/input.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
 import { statusRefreshMs, useOwnStatus, useStatuses } from "./status/use-statuses.js";

package/dist/inline-child-table/inline-child-table.js

@@ -17,10 +17,25 @@ const announcementsFor = (lines, lineName) => {
 	};
 	const place = (id) => lines.findIndex((line) => line.id === id) + 1;
 	return {
-		onDragStart: ({ active }) => text("pickedUp", name(active.id), place(active.id), lines.length),
-		onDragOver: ({ active, over }) => over ? text("over", name(active.id), place(over.id), lines.length) : void 0,
-		onDragEnd: ({ active, over }) => over ? text("dropped", name(active.id), place(over.id), lines.length) : text("droppedAtStart", name(active.id)),
-		onDragCancel: ({ active }) => text("cancelled", name(active.id), place(active.id))
+		onDragStart: ({ active }) => text("pickedUp", {
+			name: name(active.id),
+			place: place(active.id),
+			count: lines.length
+		}),
+		onDragOver: ({ active, over }) => over ? text("over", {
+			name: name(active.id),
+			place: place(over.id),
+			count: lines.length
+		}) : void 0,
+		onDragEnd: ({ active, over }) => over ? text("dropped", {
+			name: name(active.id),
+			place: place(over.id),
+			count: lines.length
+		}) : text("droppedAtStart", { name: name(active.id) }),
+		onDragCancel: ({ active }) => text("cancelled", {
+			name: name(active.id),
+			place: place(active.id)
+		})
 	};
 };
 /** The lines of a record as rows of the given columns, put in order by dragging or from each row's menu. */

package/dist/inline-child-table/line-row.js

@@ -37,7 +37,7 @@ const LineRow = ({ line, name, columns, position, count, reorderable, onRemove,
 			reorderable ? /* @__PURE__ */ jsx("button", {
 				ref: setActivatorNodeRef,
 				type: "button",
-				"aria-label": text("dragToReorder", name),
+				"aria-label": text("dragToReorder", { name }),
 				...attributes,
 				...listeners,
 				style: { touchAction: "none" },
@@ -49,7 +49,7 @@ const LineRow = ({ line, name, columns, position, count, reorderable, onRemove,
 				children: column.cell(line)
 			}, column.key)),
 			menu.length > 0 ? /* @__PURE__ */ jsx(LineMenu, {
-				label: text("actionsFor", name),
+				label: text("actionsFor", { name }),
 				items: menu
 			}) : /* @__PURE__ */ jsx("span", {}),
 			error && /* @__PURE__ */ jsx("p", {

package/dist/inline-child-table/messages.js

@@ -1,54 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/inline-child-table/messages.ts
-const text = defineMessages({
-	en: {
-		instructions: "To pick up a line, press space or enter on its drag handle. Use the up and down arrow keys to move it, space or enter to drop it, and escape to cancel. The row menu also has Move up and Move down.",
-		line: "line",
-		pickedUp: (name, place, count) => `Picked up ${name}, line ${place} of ${count}.`,
-		over: (name, place, count) => `${name} is over line ${place} of ${count}.`,
-		dropped: (name, place, count) => `${name} was dropped at line ${place} of ${count}.`,
-		droppedAtStart: (name) => `${name} was dropped where it started.`,
-		cancelled: (name, place) => `Moving ${name} was cancelled. It is back at line ${place}.`,
-		item: "Item",
-		qty: "Qty",
-		quantity: "Quantity",
-		unitPrice: "Unit price",
-		lineTotal: "Line total",
-		addLine: "Add line",
-		noLines: "No lines yet.",
-		moveUp: "Move up",
-		moveDown: "Move down",
-		removeLine: "Remove line",
-		dragToReorder: (name) => `Drag to reorder ${name}`,
-		actionsFor: (name) => `Actions for ${name}`,
-		subtotal: "Subtotal",
-		vat: (percent) => `VAT ${percent}%`,
-		total: "Total"
-	},
-	nl: {
-		instructions: "Druk op spatie of enter op de sleepgreep om een regel op te pakken. Verplaats hem met de pijltjestoetsen omhoog en omlaag, zet hem neer met spatie of enter, en annuleer met escape. Het regelmenu heeft ook Omhoog en Omlaag.",
-		line: "regel",
-		pickedUp: (name, place, count) => `${name} opgepakt, regel ${place} van ${count}.`,
-		over: (name, place, count) => `${name} is boven regel ${place} van ${count}.`,
-		dropped: (name, place, count) => `${name} is neergezet op regel ${place} van ${count}.`,
-		droppedAtStart: (name) => `${name} is neergezet waar hij begon.`,
-		cancelled: (name, place) => `Verplaatsen van ${name} is geannuleerd. Hij staat weer op regel ${place}.`,
-		item: "Artikel",
-		qty: "Aantal",
-		quantity: "Aantal",
-		unitPrice: "Stukprijs",
-		lineTotal: "Regeltotaal",
-		addLine: "Regel toevoegen",
-		noLines: "Nog geen regels.",
-		moveUp: "Omhoog",
-		moveDown: "Omlaag",
-		removeLine: "Regel verwijderen",
-		dragToReorder: (name) => `Sleep om ${name} te verplaatsen`,
-		actionsFor: (name) => `Acties voor ${name}`,
-		subtotal: "Subtotaal",
-		vat: (percent) => `Btw ${percent}%`,
-		total: "Totaal"
-	}
-});
+const text = messages("inline-child-table");
 //#endregion
 export { text };

package/dist/invitations/link-notice.js

@@ -1,14 +1,13 @@
-import { slotted } from "../locale/slotted.js";
 import { text } from "./messages.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/invitations/link-notice.tsx
 /** The invitation link to pass on, when the app cannot email it. */
 const LinkNotice = ({ link }) => link ? /* @__PURE__ */ jsx("p", {
 	className: "mt-3 break-all rounded-md border bg-muted px-3 py-2 text-xs",
-	children: slotted(text("passLinkOn"), /* @__PURE__ */ jsx("span", {
+	children: text.rich("passLinkOn", { link: /* @__PURE__ */ jsx("span", {
 		className: "font-mono",
 		children: link
-	}))
+	}) })
 }) : null;
 //#endregion
 export { LinkNotice };

package/dist/invitations/messages.js

@@ -1,24 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/invitations/messages.ts
-const text = defineMessages({
-	en: {
-		email: "Email",
-		invite: "Invite",
-		expired: "Expired",
-		until: (date) => `Until ${date}`,
-		sendAgain: "Send again",
-		revoke: "Revoke",
-		passLinkOn: "This app cannot send email, so pass this link on yourself. It works once, until the invitation expires: {}"
-	},
-	nl: {
-		email: "E-mailadres",
-		invite: "Uitnodigen",
-		expired: "Verlopen",
-		until: (date) => `Tot ${date}`,
-		sendAgain: "Opnieuw sturen",
-		revoke: "Intrekken",
-		passLinkOn: "Deze app kan geen e-mail sturen, dus geef deze link zelf door. Die werkt één keer, tot de uitnodiging verloopt: {}"
-	}
-});
+const text = messages("invitations");
 //#endregion
 export { text };

package/dist/invitations/pending-invitation-row.js

@@ -28,7 +28,7 @@ const PendingInvitationRow = ({ email, gives, expiresAt, onResend, onRevoke }) =
 							children: [
 								gives,
 								" · ",
-								expired ? text("expired") : text("until", new Date(expiresAt).toLocaleDateString(formatTag()))
+								expired ? text("expired") : text("until", { date: new Date(expiresAt).toLocaleDateString(formatTag()) })
 							]
 						})]
 					}),

package/dist/lists/messages.js

@@ -1,8 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/lists/messages.ts
-const text = defineMessages({
-	en: { showMore: "Show more" },
-	nl: { showMore: "Meer tonen" }
-});
+const text = messages("lists");
 //#endregion
 export { text };

package/dist/live/columns-from-model.js

@@ -4,28 +4,10 @@ import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitleField } from "./model-helpers.js";
 import { contactFormat } from "./contact-links.js";
+import { valueTone } from "./value-color.js";
 import { listColumnNames } from "@protobase/schema/internal";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
-const tones = {
-	draft: "neutral",
-	confirmed: "blue",
-	picking: "amber",
-	shipped: "violet",
-	delivered: "green",
-	cancelled: "red",
-	sent: "blue",
-	paid: "green",
-	overdue: "red",
-	lead: "blue",
-	active: "green",
-	dormant: "neutral",
-	receipt: "green",
-	issue: "blue",
-	transfer: "violet",
-	adjustment: "amber"
-};
-const toneFor = (value) => tones[value] ?? "neutral";
 const widths = {
 	text: 200,
 	id: 140,
@@ -47,7 +29,6 @@ const fixedKinds = /* @__PURE__ */ new Set([
 	"boolean",
 	"percent"
 ]);
-const idLike = /^(number|sku|reference|code)$/;
 const kindOf = (field, view, index) => {
 	switch (field.type) {
 		case "relation": return "relation";
@@ -56,14 +37,14 @@ const kindOf = (field, view, index) => {
 		case "boolean": return "boolean";
 		case "timestamp": return "datetime";
 		case "date": return "date";
-		case "decimal": return view?.format === "percent" ? "percent" : view?.prefix === "€" ? "money" : "number";
+		case "decimal": return view?.format === "percent" ? "percent" : view?.currency !== void 0 ? "money" : "number";
 		case "integer":
-		case "bigint": return /quantity|delta/.test(field.name) ? "signed" : "number";
-		default: return idLike.test(field.name) || index === 0 && field.name === "id" ? "id" : "text";
+		case "bigint": return view?.format === "signed" ? "signed" : "number";
+		default: return view?.format === "code" || index === 0 && field.name === "id" ? "id" : "text";
 	}
 };
 const currencyCents = (value) => Math.round(Number.parseFloat(String(value)) * 100);
-/** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format hints. */
+/** Grid columns for `names`, by default the view's list: kinds follow the field types and the view's format and currency hints. */
 const columnsFromModel = (resource, view, highlight = [], names = listColumnNames(resource, view)) => {
 	const title = recordTitleField(resource, view);
 	return names.flatMap((name, index) => {
@@ -72,29 +53,31 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 		const viewField = view?.fields[name];
 		const kind = kindOf(field, viewField, index);
 		const labels = Object.fromEntries((field.enumValues ?? []).map((value) => [value, enumLabel(value, viewField?.valueLabels)]));
-		const suffixWidth = viewField?.suffix ? Math.ceil(viewField.suffix.length * 7.2) : 0;
+		const prefix = (kind === "number" || kind === "signed") && viewField?.prefix ? viewField.prefix : void 0;
+		const affixWidth = Math.ceil(((prefix?.length ?? 0) + (viewField?.suffix?.length ?? 0)) * 7.2);
 		return [{
 			id: name,
 			header: viewField?.label ?? humanize(name),
 			kind,
-			width: (name === "name" ? 260 : widths[kind]) + suffixWidth,
+			width: (name === "name" ? 260 : widths[kind]) + affixWidth,
 			sortable: field.sortable,
-			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
+			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, affixWidth > 0 ? widths[kind] + affixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
 			...name === title && { title: true },
 			...kind === "text" && name !== title && contactFormat(viewField) && { link: contactFormat(viewField) },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
-				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
+				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, valueTone(viewField?.valueColors, value)])),
 				labels
 			},
 			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
 			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
+			...prefix !== void 0 && { prefix },
 			...viewField?.suffix !== void 0 && { suffix: viewField.suffix },
 			...kind === "datetime" && viewField?.format === "relative" && { relative: true },
 			...kind === "money" && viewField?.decimals !== void 0 && { decimals: viewField.decimals },
-			...kind === "money" && {
-				currency: "EUR",
+			...kind === "money" && viewField?.currency !== void 0 && {
+				currency: viewField.currency,
 				value: (row) => row[name] == null ? null : currencyCents(row[name])
 			},
 			...(kind === "datetime" || kind === "date") && { value: (row) => row[name] == null ? null : Date.parse(String(row[name])) },
@@ -104,4 +87,4 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 	});
 };
 //#endregion
-export { columnsFromModel, listColumnNames, toneFor };
+export { columnsFromModel, listColumnNames };

package/dist/live/display-value.js

@@ -40,7 +40,7 @@ const valueTitle = (field, value, zone = viewerZone(), hints = {}) => {
 	const ms = Date.parse(value);
 	if (Number.isNaN(ms)) return void 0;
 	if (hints.format === "relative") return formatDateTime(ms, zone);
-	return text("shownIn", zoneLabel(ms, zone));
+	return text("shownIn", { zone: zoneLabel(ms, zone) });
 };
 //#endregion
 export { displayValue, valueTitle };

package/dist/live/messages.js

@@ -1,18 +1,5 @@
-import { defineMessages } from "../locale/messages.js";
+import { messages } from "../locale/messages.js";
 //#region src/live/messages.ts
-const text = defineMessages({
-	en: {
-		yes: "Yes",
-		no: "No",
-		shownIn: (zone) => `Shown in ${zone}`,
-		fileMissing: "File missing"
-	},
-	nl: {
-		yes: "Ja",
-		no: "Nee",
-		shownIn: (zone) => `Getoond in ${zone}`,
-		fileMissing: "Bestand ontbreekt"
-	}
-});
+const text = messages("live");
 //#endregion
 export { text };

package/dist/live/value-color.js

@@ -1,8 +1,18 @@
+import { isBadgeTone } from "@protobase/schema";
 //#region src/live/value-color.ts
-/** The colour a view gives a value's badge, if any. */
-const valueColor = (colors, value) => {
+const declared = (colors, value) => {
 	const key = String(value);
 	return colors && Object.hasOwn(colors, key) ? colors[key] : void 0;
 };
+/** The hex colour a view gives a value's badge, if any; a tone name is no colour. */
+const valueColor = (colors, value) => {
+	const color = declared(colors, value);
+	return color === void 0 || isBadgeTone(color) ? void 0 : color;
+};
+/** The tone a view gives a value's badge, `neutral` when it names none. */
+const valueTone = (colors, value) => {
+	const tone = declared(colors, value);
+	return tone !== void 0 && isBadgeTone(tone) ? tone : "neutral";
+};
 //#endregion
-export { valueColor };
+export { valueColor, valueTone };

package/dist/live/view-fields.js

@@ -68,11 +68,13 @@ const widgetFields = (view, model) => {
 };
 /** Whether a range draws its histogram: only a `range` widget that asks for one. */
 const rangeHistogram = (view, field) => (view?.filters ?? []).some((widget) => widget.kind === "range" && widget.field === field && widget.histogram);
-/** How a range's values read, by the view's prefix and suffix: "€450,000" for a euro amount, "85 m²". */
+/** How a range's values read: money in the view's currency, "€450,000", else with its prefix and suffix, "85 m²". */
 const rangeFormat = (view, field) => {
 	const hints = view?.fields[field];
 	const suffix = hints?.suffix ?? "";
-	return (value) => `${hints?.prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`;
+	const currency = hints?.currency;
+	if (currency !== void 0) return (value) => `${formatMoney(value * 100, currency).replace(".00", "")}${suffix}`;
+	return (value) => `${hints?.prefix ?? ""}${value}${suffix}`;
 };
 //#endregion
 export { rangeFormat, rangeHistogram, widgetFields };