@protobase/ui 0.12.10 → 0.12.11

package/dist/app/action-icon.js

@@ -1,10 +1,6 @@
-import { FileText, Send, Wallet, Zap } from "lucide-react";
+import { namedIcon } from "./named-icon.js";
+import { Zap } from "lucide-react";
 //#region src/app/action-icon.ts
-const byName = {
-	wallet: Wallet,
-	"file-text": FileText,
-	send: Send
-};
-const actionIcon = (name) => name ? byName[name] ?? Zap : Zap;
+const actionIcon = (name) => namedIcon(name) ?? Zap;
 //#endregion
 export { actionIcon };

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

@@ -9,7 +9,8 @@ import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { toneFor } from "../../live/columns-from-model.js";
+import { namedIcon } from "../named-icon.js";
+import { ValueBadge } from "../value-badge.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
@@ -27,12 +28,23 @@ const CardImage = ({ value }) => {
 		})
 	});
 };
+const MetaValue = ({ icon, children }) => {
+	const Icon = namedIcon(icon);
+	return /* @__PURE__ */ jsxs("dd", {
+		className: "flex items-center gap-1 tabular-nums",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			className: "size-3.5 shrink-0",
+			"aria-hidden": true
+		}), children]
+	});
+};
 /**
-* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it and small meta fields below;
-* or, with a `card` component, what it draws of the row, the built-in content again when it is missing or throws.
+* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it,
+* small meta fields below and the labels of its flags that are true; or, with a `card` component, what it draws of the
+* row, the built-in content again when it is missing or throws.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
-	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (row, name) => {
 		const field = model.fields[name];
@@ -52,6 +64,17 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			fallback: text(row, name)
 		}) : text(row, name);
 	};
+	const metaValue = (row, name) => {
+		const field = model.fields[name];
+		const hints = view?.fields[name];
+		const value = row.record[name];
+		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(row, name);
+		return /* @__PURE__ */ jsx(ValueBadge, {
+			value,
+			hints,
+			children: text(row, name)
+		});
+	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -65,6 +88,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			"aria-label": view?.names?.plural ?? humanize(model.name),
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
+				const raised = flags.filter((name) => row.record[name] === true);
 				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
 					image !== void 0 && /* @__PURE__ */ jsx(CardImage, { value: row.record[image] }),
 					/* @__PURE__ */ jsxs("span", {
@@ -72,8 +96,9 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 truncate font-medium",
 							children: shownValue(row, title)
-						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(Badge, {
-							tone: toneFor(String(status)),
+						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
+							value: status,
+							hints: view?.fields[badge],
 							children: text(row, badge)
 						})]
 					}),
@@ -82,17 +107,25 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						children: shownValue(row, subtitle)
 					}),
 					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "mt-auto flex flex-wrap gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
+						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
 						children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ jsx("dt", {
 								className: "sr-only",
 								children: label(name)
-							}), /* @__PURE__ */ jsx("dd", {
-								className: "tabular-nums",
-								children: shownValue(row, name)
+							}), /* @__PURE__ */ jsx(MetaValue, {
+								icon: view?.fields[name]?.icon,
+								children: metaValue(row, name)
 							})]
 						}, name))
+					}),
+					raised.length > 0 && /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-wrap gap-1",
+						"aria-label": "Features",
+						children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+							dot: false,
+							children: label(name)
+						}) }, name))
 					})
 				] });
 				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {

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

@@ -34,18 +34,20 @@ const cardFields = (model, view, display) => ({
 	title: display.title ?? recordTitleField(model, view),
 	subtitle: display.subtitle,
 	badge: display.badge,
-	meta: display.meta ?? []
+	meta: display.meta ?? [],
+	flags: display.flags ?? []
 });
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
-	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
 	return [
 		image,
 		title,
 		subtitle,
 		badge,
-		...meta
+		...meta,
+		...flags
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */

package/dist/app/field-editor.js

@@ -90,6 +90,10 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			className: "text-[13px]",
 			children: hints.prefix
 		}) : void 0,
+		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", {
+			className: "text-[13px]",
+			children: hints.suffix.trim()
+		}) : void 0,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		value: String(value),

package/dist/app/named-icon.js

@@ -0,0 +1,13 @@
+import { FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+//#region src/app/named-icon.ts
+/** The icons an action's or a field's `icon` may name. */
+const byName = {
+	wallet: Wallet,
+	"file-text": FileText,
+	send: Send,
+	ruler: RulerDimensionLine
+};
+/** The icon a name stands for, or nothing for a name the app does not know. */
+const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;
+//#endregion
+export { namedIcon };

package/dist/app/pages/field-value.js

@@ -1,5 +1,4 @@
 import { cn } from "../../lib/cn.js";
-import { Badge } from "../../primitives/badge.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fetchLabels } from "../../live/relation-labels.js";
@@ -9,7 +8,7 @@ import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { toneFor } from "../../live/columns-from-model.js";
+import { ValueBadge } from "../value-badge.js";
 import { jsx } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
@@ -59,8 +58,9 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: file.name
 	});
 	const text = displayValue(field, value, hints);
-	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(Badge, {
-		tone: toneFor(String(value)),
+	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
+		value,
+		hints,
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {

package/dist/app/record-page.js

@@ -1,4 +1,3 @@
-import { Badge } from "../primitives/badge.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { formatRelativeTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
@@ -24,6 +23,7 @@ import { RecordHeader } from "../record-view/record-header.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { ValueBadge } from "./value-badge.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { RecordActions } from "./pages/record-actions.js";
@@ -176,8 +176,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
-			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(Badge, {
-				tone: toneFor(String(stored.record[name])),
+			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
+				value: stored.record[name],
+				hints: hint(name),
 				children: text
 			}) : /* @__PURE__ */ jsx("strong", { children: text });
 			const shown = shownWidget(fieldTypes, field, hint(name));

package/dist/app/value-badge.js

@@ -0,0 +1,14 @@
+import { Badge } from "../primitives/badge.js";
+import { valueColor } from "../live/value-color.js";
+import { toneFor } from "../live/columns-from-model.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/value-badge.tsx
+/** A stored value as a badge: filled with the colour the view gives it and in its badge shape, else in its tone. */
+const ValueBadge = ({ value, hints, children }) => /* @__PURE__ */ jsx(Badge, {
+	tone: toneFor(String(value)),
+	color: valueColor(hints?.valueColors, value),
+	shape: hints?.badgeShape,
+	children
+});
+//#endregion
+export { ValueBadge };

package/dist/data-grid/cells.js

@@ -6,6 +6,7 @@ import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown, isPreviewable } from "../live/file-values.js";
 import { userById } from "../mocks/users.js";
+import { valueColor } from "../live/value-color.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
@@ -26,9 +27,9 @@ const renderCell = (spec, value) => {
 			className: "truncate font-mono text-xs text-muted-foreground",
 			children: String(value)
 		});
-		case "money": return /* @__PURE__ */ jsx("span", {
+		case "money": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: formatMoney(Number(value), spec.currency)
+			children: [formatMoney(Number(value), spec.currency), spec.suffix]
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
@@ -38,13 +39,13 @@ const renderCell = (spec, value) => {
 			className: "tabular-nums text-muted-foreground",
 			children: formatDateTime(Number(value))
 		});
-		case "number": return /* @__PURE__ */ jsx("span", {
+		case "number": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: formatInt(Number(value))
+			children: [formatInt(Number(value)), spec.suffix]
 		});
-		case "signed": return /* @__PURE__ */ jsx("span", {
+		case "signed": return /* @__PURE__ */ jsxs("span", {
 			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
-			children: formatSigned(Number(value))
+			children: [formatSigned(Number(value)), spec.suffix]
 		});
 		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
@@ -52,6 +53,8 @@ const renderCell = (spec, value) => {
 		});
 		case "status": return /* @__PURE__ */ jsx(Badge, {
 			tone: spec.tones?.[String(value)] ?? "neutral",
+			color: valueColor(spec.colors, value),
+			shape: spec.shape,
 			children: enumLabel(String(value), spec.labels)
 		});
 		case "relation": return /* @__PURE__ */ jsx("span", {

package/dist/lib/readable-text.js

@@ -0,0 +1,23 @@
+//#region src/lib/readable-text.ts
+const luminance = (hex) => {
+	const digits = hex.slice(1);
+	const full = digits.length === 3 ? [...digits].map((digit) => digit + digit).join("") : digits;
+	const [r, g, b] = [
+		0,
+		2,
+		4
+	].map((at) => {
+		const channel = Number.parseInt(full.slice(at, at + 2), 16) / 255;
+		return channel <= .03928 ? channel / 12.92 : ((channel + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+};
+const light = "#ffffff";
+const dark = "#111827";
+/** The text colour, white or near black, that reads best on a hex background. */
+const readableOn = (background) => {
+	const shade = luminance(background);
+	return 1.05 / (shade + .05) >= (shade + .05) / (luminance(dark) + .05) ? light : dark;
+};
+//#endregion
+export { readableOn };

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

@@ -82,6 +82,9 @@ const columnsFromModel = (resource, view, highlight = []) => {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),
 				labels
 			},
+			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
+			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
+			...viewField?.suffix !== void 0 && { suffix: viewField.suffix },
 			...kind === "money" && {
 				currency: "EUR",
 				value: (row) => row[name] == null ? null : currencyCents(row[name])

package/dist/live/display-value.js

@@ -2,7 +2,8 @@ import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown } from "./file-values.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/display-value.ts
-/** A read-only rendering of a stored value, following the view's prefix, decimals, format and value label hints. */
+const affixed = (text, hints) => `${hints.prefix ?? ""}${text}${hints.suffix ?? ""}`;
+/** A read-only rendering of a stored value, following the view's prefix, suffix, decimals, format and value label hints. */
 const displayValue = (field, value, hints = {}) => {
 	if (value === null || value === void 0 || value === "") return "—";
 	switch (field.type) {
@@ -14,11 +15,13 @@ const displayValue = (field, value, hints = {}) => {
 		case "decimal": {
 			const text = hints.decimals === void 0 ? String(value) : Number(value).toFixed(hints.decimals);
 			if (hints.format === "percent") return `${Number(value)}%`;
-			return `${hints.prefix ?? ""}${Number(text).toLocaleString("en-IE", {
+			return affixed(Number(text).toLocaleString("en-IE", {
 				minimumFractionDigits: hints.decimals ?? 0,
 				maximumFractionDigits: hints.decimals ?? 20
-			})}`;
+			}), hints);
 		}
+		case "integer":
+		case "bigint": return affixed(String(value), hints);
 		default: return typeof value === "object" ? JSON.stringify(value) : String(value);
 	}
 };

package/dist/live/use-filter-config.js

@@ -49,7 +49,9 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		range: void 0
 	}, state, extras);
 	const histogram = useHistogram(model.name, skeleton.range?.id ?? "", rangeFilter, 24, Boolean(skeleton.range));
-	const prefix = skeleton.range ? view?.fields[skeleton.range.id]?.prefix : void 0;
+	const rangeHints = skeleton.range ? view?.fields[skeleton.range.id] : void 0;
+	const prefix = rangeHints?.prefix;
+	const suffix = rangeHints?.suffix ?? "";
 	return {
 		facets: skeleton.facets.map((group, index) => {
 			const field = model.fields[group.id];
@@ -71,7 +73,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			max: Math.ceil(histogram.data.max),
 			step: Math.max(1, Math.round((histogram.data.max - histogram.data.min) / 100)),
 			histogram: histogram.data.buckets.map((bucket) => bucket.count),
-			format: (value) => prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)
+			format: (value) => `${prefix === "€" ? formatMoney(value * 100).replace(".00", "") : String(value)}${suffix}`
 		} },
 		...skeleton.dateField && {
 			datePresets: skeleton.datePresets ?? true,

package/dist/live/value-color.js

@@ -0,0 +1,8 @@
+//#region src/live/value-color.ts
+/** The colour a view gives a value's badge, if any. */
+const valueColor = (colors, value) => {
+	const key = String(value);
+	return colors && Object.hasOwn(colors, key) ? colors[key] : void 0;
+};
+//#endregion
+export { valueColor };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.10";
+var version = "0.12.11";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/badge.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { readableOn } from "../lib/readable-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/badge.tsx
 const tones = {
@@ -17,9 +18,17 @@ const dots = {
 	red: "bg-danger",
 	violet: "bg-violet"
 };
-const Badge = ({ tone = "neutral", dot = true, children, className }) => /* @__PURE__ */ jsxs("span", {
-	className: cn("inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", tones[tone], className),
-	children: [dot && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
+const arrow = "polygon(0 0, calc(100% - 0.625rem) 0, 100% 50%, calc(100% - 0.625rem) 100%, 0 100%)";
+const Badge = ({ tone = "neutral", dot = true, color, shape, children, className }) => /* @__PURE__ */ jsxs("span", {
+	style: {
+		...color !== void 0 && {
+			backgroundColor: color,
+			color: readableOn(color)
+		},
+		...shape === "arrow" && { clipPath: arrow }
+	},
+	className: cn(shape === "arrow" ? "inline-flex h-5 items-center gap-1.5 rounded-l-sm pr-4 pl-2 text-xs font-semibold whitespace-nowrap" : "inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", color === void 0 && tones[tone], className),
+	children: [dot && color === void 0 && shape === void 0 && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
 });
 //#endregion
 export { Badge };