@protobase/ui 0.12.9 → 0.12.11

package/dist/auth/auth-provider.js

@@ -19,6 +19,8 @@ const AuthProvider = ({ session: given, children }) => {
 	const [platformSignIn, setPlatformSignIn] = useState();
 	const [staffSignIn, setStaffSignIn] = useState();
 	const [organizations, setOrganizations] = useState();
+	const [anonymous, setAnonymous] = useState(false);
+	const signedOutState = useCallback(() => anonymous ? { kind: "visitor" } : { kind: "signed-out" }, [anonymous]);
 	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
 	const signedOut = useRef(markSignedOut);
 	signedOut.current = markSignedOut;
@@ -49,9 +51,10 @@ const AuthProvider = ({ session: given, children }) => {
 			setPlatformSignIn(status.platformSignIn);
 			setStaffSignIn(status.staffSignIn);
 			setOrganizations(status.organizations);
+			setAnonymous(Boolean(status.anonymous));
 			if (status.needsAdmin) return setState({ kind: "needs-admin" });
 			const user = await session.session();
-			return user ? enter(user) : setState({ kind: "signed-out" });
+			return user ? enter(user) : setState({ kind: status.anonymous ? "visitor" : "signed-out" });
 		}).catch((error) => setState({
 			kind: "error",
 			message: error instanceof Error ? error.message : "The server did not answer"
@@ -73,6 +76,8 @@ const AuthProvider = ({ session: given, children }) => {
 		...organizations && { organizations },
 		markSignedOut,
 		recheck,
+		showSignIn: () => setState((current) => current.kind === "visitor" ? { kind: "signed-out" } : current),
+		...anonymous && { browse: () => setState((current) => current.kind === "signed-out" ? { kind: "visitor" } : current) },
 		signIn: async (email, password) => finish(await session.signIn(email, password)),
 		sendSignInCode: (email) => session.sendSignInCode(email),
 		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
@@ -86,11 +91,11 @@ const AuthProvider = ({ session: given, children }) => {
 		},
 		stopStaffSession: async () => {
 			await session.staff.stop();
-			setState({ kind: "signed-out" });
+			setState(signedOutState());
 		},
 		signOut: async () => {
 			await session.signOut();
-			setState({ kind: "signed-out" });
+			setState(signedOutState());
 		}
 	}), [
 		state,
@@ -102,6 +107,8 @@ const AuthProvider = ({ session: given, children }) => {
 		platformSignIn,
 		staffSignIn,
 		organizations,
+		anonymous,
+		signedOutState,
 		markSignedOut,
 		recheck,
 		finish,

package/dist/auth/sign-in-form.js

@@ -13,7 +13,7 @@ const Divider = () => /* @__PURE__ */ jsxs("div", {
 		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
 	]
 });
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith, onBrowse }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
@@ -127,6 +127,12 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 						children: "Forgot password?"
 					})
 				]
+			}),
+			onBrowse && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onBrowse,
+				className: "mt-4 w-full text-center text-[13px] font-medium text-muted-foreground hover:text-foreground hover:underline",
+				children: "Continue without signing in"
 			})
 		]
 	});

package/dist/auth/sign-in-page.js

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent, error: initialError }) => {
+const SignInPage = ({ workspace, notice, onForgotPassword, onBrowse, onCodeSent, error: initialError }) => {
 	const { signIn, signInSocial, signInProviders, signInMethods, passkeyDomains, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState(initialError);
@@ -27,6 +27,7 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent, error: in
 		notice,
 		methods: signInMethods,
 		onForgotPassword,
+		onBrowse,
 		providers: signInProviders,
 		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),
 		passkeyDomains,

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

@@ -2,9 +2,9 @@ import { formatMoney } from "../format/money.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
 import { humanize } from "./naming.js";
+import { fetchLabels } from "./relation-labels.js";
 import { stateToText } from "./filter-string.js";
 import { useHistogram } from "../data/use-aggregates.js";
-import { fetchLabels } from "./relation-labels.js";
 import { widgetFields } from "./view-fields.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
@@ -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.9";
+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 };

package/dist/roles/use-active-role.js

@@ -5,17 +5,22 @@ import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
 //#region src/roles/use-active-role.ts
 const failureMessage = (failure, fallback) => failure instanceof AuthError ? authMessage(failure) : fallback;
-/** The role the session acts with; a failed read or switch shows as a toast. */
-const useActiveRole = (reopen) => {
+/** The role the session acts with, read while `enabled` (someone is signed in); a failed read or switch shows as a toast. */
+const useActiveRole = (reopen, enabled = true) => {
 	const { session } = useAuth();
 	const toast = useToast();
 	const [current, setCurrent] = useState();
 	useEffect(() => {
+		if (!enabled) return;
 		session.roles.current().then(setCurrent, (failure) => toast.show({
 			state: "error",
 			title: failureMessage(failure, "Could not read your roles")
 		}));
-	}, [session, toast]);
+	}, [
+		session,
+		toast,
+		enabled
+	]);
 	const switchTo = useCallback((name) => void session.roles.switchTo(name).then(reopen, (failure) => toast.show({
 		state: "error",
 		title: failureMessage(failure, "Could not switch the role")