@protobase/ui 0.46.8 → 0.46.10

package/dist/account/change-email-dialog.js

@@ -2,9 +2,9 @@ import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { Input } from "../primitives/input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { SectionError } from "./account-section.js";
 import { authMessage } from "../auth/auth-messages.js";
-import { OtpInput } from "../primitives/otp-input.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/account/two-factor-setup.js

@@ -2,8 +2,8 @@ import { text } from "./messages.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
-import { authMessage } from "../auth/auth-messages.js";
 import { OtpInput } from "../primitives/otp-input.js";
+import { authMessage } from "../auth/auth-messages.js";
 import { BackupCodes } from "./backup-codes.js";
 import { TotpQr, totpKey } from "./totp-qr.js";
 import { useState } from "react";

package/dist/app/confirm-sign-in-messages.js

@@ -0,0 +1,22 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/app/confirm-sign-in-messages.ts
+const text = defineMessages({
+	en: {
+		confirmTitle: "Confirm it's you",
+		confirmWhy: (minutes) => `Showing this needs a passkey or your authenticator app in the last ${minutes} minutes.`,
+		usePasskey: "Use a passkey",
+		authenticatorCode: "Code from your authenticator app",
+		confirm: "Confirm",
+		nothingToConfirmWith: "Add a passkey or an authenticator app on your account page first."
+	},
+	nl: {
+		confirmTitle: "Bevestig dat jij het bent",
+		confirmWhy: (minutes) => `Dit tonen vraagt in de laatste ${minutes} minuten een passkey of je authenticator-app.`,
+		usePasskey: "Passkey gebruiken",
+		authenticatorCode: "Code uit je authenticator-app",
+		confirm: "Bevestigen",
+		nothingToConfirmWith: "Voeg eerst een passkey of een authenticator-app toe op je accountpagina."
+	}
+});
+//#endregion
+export { text };

package/dist/app/confirm-sign-in.js

@@ -0,0 +1,88 @@
+import { useOptionalAuth } from "../auth/auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { OtpInput } from "../primitives/otp-input.js";
+import { text } from "./confirm-sign-in-messages.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@tanstack/react-query";
+//#region src/app/confirm-sign-in.tsx
+/**
+* Asks the person to confirm it's them, with a passkey or their authenticator app, after the server refused something
+* that needs a recent strong sign-in (`strong-sign-in-required`). It offers only what the account has; a passkey signs
+* the browser in anew, a code confirms the session it has.
+*/
+const ConfirmSignIn = ({ minutes, onConfirmed }) => {
+	const auth = useOptionalAuth();
+	const [code, setCode] = useState("");
+	const methods = useQuery({
+		queryKey: ["account-sign-in-methods"],
+		queryFn: () => auth.session.account.signInMethods(),
+		enabled: Boolean(auth)
+	});
+	const passkey = useMutation({
+		mutationFn: () => auth.signInWithPasskey(),
+		onSuccess: onConfirmed
+	});
+	const authenticator = useMutation({
+		mutationFn: (entered) => auth.verifyTwoFactor({
+			method: "totp",
+			code: entered
+		}),
+		onSuccess: onConfirmed
+	});
+	const account = methods.data?.account;
+	const error = passkey.error ?? authenticator.error ?? methods.error;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": text("confirmTitle"),
+		className: "mt-2 flex flex-col gap-2 rounded-md border border-border bg-surface p-3",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: text("confirmTitle")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: text("confirmWhy", minutes)
+			}),
+			account && account.passkeys > 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				size: "sm",
+				className: "self-start",
+				loading: passkey.isPending,
+				onClick: () => passkey.mutate(),
+				children: text("usePasskey")
+			}),
+			account?.authenticatorApp && /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-wrap items-end gap-2",
+				onSubmit: (event) => {
+					event.preventDefault();
+					authenticator.mutate(code.trim());
+				},
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5",
+					children: [text("authenticatorCode"), /* @__PURE__ */ jsx(OtpInput, {
+						name: "code",
+						required: true,
+						value: code,
+						invalid: authenticator.isError,
+						onChange: setCode,
+						onComplete: (entered) => authenticator.mutate(entered)
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					loading: authenticator.isPending,
+					children: text("confirm")
+				})]
+			}),
+			account && account.passkeys === 0 && !account.authenticatorApp && /* @__PURE__ */ jsx("p", { children: text("nothingToConfirmWith") }),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "font-medium text-danger-text",
+				children: error.message
+			})
+		]
+	});
+};
+//#endregion
+export { ConfirmSignIn };

package/dist/app/create/create-page.js

@@ -6,7 +6,7 @@ import { text } from "../messages.js";
 import { useNavigationGuard } from "../router.js";
 import { useAppAddress } from "../use-app-address.js";
 import { text as text$1 } from "./messages.js";
-import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
+import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired, numberDefault } from "./create-values.js";
 import { FieldEditor } from "../field-editor.js";
 import { can } from "../permissions.js";
 import { fetchLabels } from "../../live/relation-labels.js";
@@ -133,7 +133,7 @@ const LoadedCreate = ({ resource, values }) => {
 					value: isChosen(value) ? value.key : value ?? (field.type === "boolean" ? false : ""),
 					stored: void 0,
 					relationLabel: isChosen(value) ? value.label : void 0,
-					placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : void 0,
+					placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : numberDefault(field),
 					relationPicker: target ? {
 						target,
 						view: meta.views[target.name]

package/dist/app/create/create-values.js

@@ -59,17 +59,32 @@ const givenValue = (field, value) => {
 	if (field.type === "boolean") return value === "true";
 	return value;
 };
+const numeric = /* @__PURE__ */ new Set([
+	"integer",
+	"bigint",
+	"decimal"
+]);
+/**
+* A number field's literal default, which its empty input shows as a placeholder rather than as its value: typing into a
+* prefilled `0` would add to it, and the create applies the default to an empty field.
+*/
+const numberDefault = (field) => {
+	if (!numeric.has(field.type) || !field.default || !("value" in field.default)) return void 0;
+	const value = field.default.value;
+	return value === null || value === void 0 ? void 0 : String(value);
+};
 /**
 * The form's starting values: the values the address gives (`/notes/new?listing_id=42`), for the fields the form has,
-* else literal defaults from `/meta`. Database defaults stay empty so the database fills them.
+* else literal defaults from `/meta`, but for numbers. Database defaults stay empty so the database fills them.
 */
 const initialDraft = (model, sections, given = {}) => Object.fromEntries(sections.flatMap((section) => section.fields.flatMap((name) => {
 	const field = model.fields[name];
 	if (Object.hasOwn(given, name)) return [[name, givenValue(field, given[name])]];
 	const fallback = field.default;
+	if (numberDefault(field) !== void 0) return [];
 	if (!fallback || !("value" in fallback) || fallback.value === null || fallback.value === void 0) return [];
 	return [[name, typeof fallback.value === "boolean" ? fallback.value : String(fallback.value)]];
 })));
 const hasDatabaseDefault = (field) => Boolean(field.default && "db" in field.default);
 //#endregion
-export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired, keyValue };
+export { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isCreatable, isRequired, keyValue, numberDefault };

package/dist/app/nav-from-meta.js

@@ -16,8 +16,13 @@ const groupLabels = {
 	core: "admin",
 	hr: "hr"
 };
+/** The group of a schema's resources: none for the default `public` schema, whose name would read as "visible to anyone". */
+const schemaGroup = (schema = "public") => {
+	if (schema === "public") return "";
+	return groupLabels[schema] ? text(groupLabels[schema]) : humanize(schema);
+};
 /**
-* One sidebar group per `nav.group` (default: the database schema, and "Pages" for pages); `nav.hidden` and a place in
+* One sidebar group per `nav.group` (default: the database schema, none for `public`, and "Pages" for pages); `nav.hidden` and a place in
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
 * collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
 * read are listed under its label, each with the problem. A visitor also gets the resources whose views ask them to sign
@@ -50,8 +55,7 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 	for (const model of Object.values(meta.resources)) {
 		const view = meta.views[model.name];
 		if (!view || inMenu.has(model.name)) continue;
-		const schema = model.table.schema ?? "public";
-		const defaultGroup = view.nav?.group ?? (groupLabels[schema] ? text(groupLabels[schema]) : humanize(schema));
+		const defaultGroup = view.nav?.group ?? schemaGroup(model.table.schema);
 		const add = (groupName, item, order) => {
 			const group = groups.get(groupName) ?? {
 				label: groupName,

package/dist/app/sensitive-field.js

@@ -6,15 +6,19 @@ import { displayValue } from "../live/display-value.js";
 import { text } from "./messages.js";
 import { toDraft } from "../live/field-values.js";
 import { ErrorBanner } from "./error-banner.js";
+import { ConfirmSignIn } from "./confirm-sign-in.js";
 import { useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
+import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 //#region src/app/sensitive-field.tsx
 const mask = "••••••••••";
+const strongSignInMinutes = (error) => isApiError(error) && error.slug === "strong-sign-in-required" ? error.problem.minutes ?? 15 : void 0;
 /**
 * A value hidden like a password. Showing a stored one asks the server for it, once per page visit; a write-only one has
-* none to show, so its eye only unmasks what was typed.
+* none to show, so its eye only unmasks what was typed. When the server wants a recent strong sign-in first, the field
+* asks the person to confirm it's them, then shows the value.
 */
 const SensitiveField = ({ field, hints, value, reveal, locked, invalid, placeholder, onChange }) => {
 	const [shown, setShown] = useState(false);
@@ -38,7 +42,11 @@ const SensitiveField = ({ field, hints, value, reveal, locked, invalid, placehol
 		onClick: toggle,
 		children: !stored.isPending && (shown ? /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }))
 	});
-	const error = stored.error && /* @__PURE__ */ jsx("div", {
+	const minutes = strongSignInMinutes(stored.error);
+	const error = minutes !== void 0 ? /* @__PURE__ */ jsx(ConfirmSignIn, {
+		minutes,
+		onConfirmed: () => stored.mutate()
+	}) : stored.error && /* @__PURE__ */ jsx("div", {
 		className: "mt-2",
 		children: /* @__PURE__ */ jsx(ErrorBanner, {
 			title: text("couldNotShow", label),

package/dist/app-shell/sidebar.js

@@ -34,7 +34,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 					className: cn("flex-1 overflow-y-auto overflow-x-hidden pb-2", mode === "icon-label" ? "px-2" : "px-2"),
 					children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", {
 						className: cn("flex flex-col gap-0.5", index > 0 && "mt-3"),
-						children: [inline ? /* @__PURE__ */ jsx("div", {
+						children: [inline ? group.label && /* @__PURE__ */ jsx("div", {
 							className: cn("px-3 pb-1 pt-1 text-xs font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
 							children: group.label
 						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {

package/dist/auth/auth-provider.js

@@ -12,6 +12,8 @@ const useAuth = () => {
 	if (!api) throw new Error("useAuth must be used inside AuthProvider");
 	return api;
 };
+/** The auth state and steps inside `AuthProvider`, `null` outside it, for a part that also works without one. */
+const useOptionalAuth = () => useContext(AuthContext);
 /**
 * Finds out whether the server has a login and who is signed in, and keeps that state for the app. Without a `session`,
 * it makes one on `origin`, the page's own by default; in the iOS or Android app, with its `nativeBridge`, the session
@@ -216,4 +218,4 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	});
 };
 //#endregion
-export { AuthProvider, useAuth };
+export { AuthProvider, useAuth, useOptionalAuth };

package/dist/auth/code-form.js

@@ -1,7 +1,7 @@
 import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
-import { AuthLayout } from "./auth-layout.js";
 import { OtpInput } from "../primitives/otp-input.js";
+import { AuthLayout } from "./auth-layout.js";
 import { ResendCodeButton } from "./resend-code-button.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/auth/two-factor-form.js

@@ -1,9 +1,9 @@
 import { text } from "./messages.js";
 import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { AuthLayout } from "./auth-layout.js";
-import { OtpInput } from "../primitives/otp-input.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/two-factor-form.tsx

package/dist/auth/user-to-shell.js

@@ -1,4 +1,5 @@
 import { text } from "./messages.js";
+import { capitalise } from "../live/naming.js";
 //#region src/auth/user-to-shell.ts
 /** The hue of someone's avatar, the same for the same id. */
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
@@ -7,6 +8,8 @@ const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).m
 const rolesOf = (user) => (user.role ?? "user").split(",").map((role) => role.trim());
 /** The user holds the `admin` role, among others perhaps. */
 const isAdmin = (user) => rolesOf(user).includes("admin");
+/** A role's name as words: `full_access` becomes "Full access". */
+const roleLabel = (role) => capitalise(role.replace(/[_-]+/g, " ").trim());
 /** What the sidebar's profile menu shows for a signed-in user. */
 const userToShell = (user) => {
 	const roles = rolesOf(user);
@@ -16,7 +19,7 @@ const userToShell = (user) => {
 		email: user.email,
 		initials: initialsOf(user.name || user.email) || "?",
 		hue: hueOf(user.id || user.email),
-		role: admin ? text("admin") : (roles[0] ?? "user").replace(/^./, (char) => char.toUpperCase()),
+		role: admin ? text("admin") : roleLabel(roles[0] ?? "user"),
 		roleTone: admin ? "violet" : "blue"
 	};
 };

package/dist/format/messages.js

@@ -2,7 +2,7 @@ import { defineMessages } from "../locale/messages.js";
 //#region src/format/messages.ts
 const text = defineMessages({
 	en: {
-		rows: (count) => `${count} rows`,
+		rows: (count, one) => `${count} ${one ? "row" : "rows"}`,
 		aboutRows: (count) => `about ${count} rows`,
 		secondsAgo: (count) => `${count} s ago`,
 		minutesAgo: (count) => `${count} min ago`,
@@ -11,7 +11,7 @@ const text = defineMessages({
 		justNow: "just now"
 	},
 	nl: {
-		rows: (count) => `${count} rijen`,
+		rows: (count, one) => `${count} ${one ? "rij" : "rijen"}`,
 		aboutRows: (count) => `ongeveer ${count} rijen`,
 		secondsAgo: (count) => `${count} s geleden`,
 		minutesAgo: (count) => `${count} min geleden`,

package/dist/format/number.js

@@ -6,7 +6,7 @@ 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));
+	if (count < 1e4) return text("rows", formatInt(count), count === 1);
 	const magnitude = 10 ** (Math.floor(Math.log10(count)) - 3);
 	return text("aboutRows", formatInt(Math.round(count / magnitude) * magnitude));
 };

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

@@ -6,7 +6,7 @@ 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 { createBody, hasDatabaseDefault, initialDraft, isRequired } from "../app/create/create-values.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";
 import { fieldErrors, fieldMessage } from "../app/field-errors.js";
@@ -123,7 +123,7 @@ const LoadedForm = ({ form }) => {
 							hints,
 							value: draft[name] ?? (field.type === "boolean" ? false : ""),
 							stored: void 0,
-							placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : void 0,
+							placeholder: hasDatabaseDefault(field) ? text$1("setByDatabase") : numberDefault(field),
 							invalid: Boolean(problem),
 							onChange: (next) => change(name, next)
 						})

package/dist/index.js

@@ -12,6 +12,7 @@ import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
 import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
+import { OtpInput } from "./primitives/otp-input.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { Markdown } from "./markdown/markdown.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
@@ -22,7 +23,6 @@ import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
 import { MenuSelect } from "./primitives/menu-select.js";
 import { AuthLayout } from "./auth/auth-layout.js";
-import { OtpInput } from "./primitives/otp-input.js";
 import { allowDelayMs, isFramed, useArmedAfterFocus, useGuardedPress } from "./connect/interaction-guard.js";
 import { ResendCodeButton } from "./auth/resend-code-button.js";
 import { CodeForm } from "./auth/code-form.js";

package/dist/package.js

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