@protobase/ui 0.9.0 → 0.10.0

package/dist/app/app.js

@@ -13,6 +13,7 @@ import { humanize } from "../live/naming.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
+import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { Router, matchRoute, useRouter } from "./router.js";
 import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
@@ -23,6 +24,8 @@ import { InvitationsPage } from "../organizations/invitations-page.js";
 import { reopenIn, useOrganizations } from "../organizations/use-organizations.js";
 import { OrganizationPage } from "../organizations/organization-page.js";
 import { OrganizationsPage } from "../organizations/organizations-page.js";
+import { actingUser } from "../roles/acting-user.js";
+import { useActiveRole } from "../roles/use-active-role.js";
 import { userMenuFromMeta } from "./user-menu-from-meta.js";
 import { navFromMeta } from "./nav-from-meta.js";
 import { ComposedPage } from "./pages/composed-page.js";
@@ -32,7 +35,7 @@ import { useGlobalSearch } from "./search/use-global-search.js";
 import { RuntimeUpdateButton } from "./runtime/runtime-update.js";
 import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/app.tsx
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
@@ -80,7 +83,9 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
-	const admin = isAdmin(user);
+	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]));
+	const acting = actingUser(user, role.current);
+	const admin = isAdmin(acting);
 	const organizations = useOrganizations(Boolean(organizationSettings));
 	const current = organizations.current;
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
@@ -118,10 +123,11 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: route.resource ?? "",
 		breadcrumb,
-		user: userToShell(user),
+		user: userToShell(acting),
 		onSignOut: () => void signOut(),
 		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
+		bottomBar: bottomBarFromMeta(meta, basePath, route.resource),
 		userMenu: [
 			...userMenuFromMeta(meta, basePath, route.resource),
 			...organizationSettings ? organizationMenuItems(basePath, path, current) : [],
@@ -135,6 +141,11 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			others: organizations.organizations.filter((organization) => organization.id !== current?.organization?.id),
 			onSwitch: (id) => void session.organizations.switchTo(id).then(() => reopenIn(basePath))
 		},
+		roles: role.current?.active ? {
+			active: role.current.active,
+			roles: role.current.roles,
+			onSwitch: role.switchTo
+		} : void 0,
 		onNavigate: open,
 		search: search.available ? {
 			placeholder: search.placeholder,

package/dist/app/batch-failure.js

@@ -4,7 +4,7 @@ const label = (op) => {
 	const resource = typeof op.resource === "string" ? op.resource : op.resource.toModel().name;
 	return op.op === "reorder" ? `reorder ${resource} by ${op.field}` : `${op.op} ${resource}`;
 };
-/** "Operation 2 (reorder invoiceLines by position) failed: ..." so the person knows which part was refused. */
+/** "Operation 2 (reorder invoice_lines by position) failed: ..." so the person knows which part was refused. */
 const describeBatchFailure = (error, ops) => {
 	const index = error.operation;
 	const op = index === void 0 ? void 0 : ops[index];

package/dist/app/bottom-bar-from-meta.js

@@ -0,0 +1,30 @@
+import { iconFor } from "./icons.js";
+import { menuIcon } from "./menu-icons.js";
+import { ExternalLink, LayoutDashboard } from "lucide-react";
+//#region src/app/bottom-bar-from-meta.ts
+/** The bottom bar's tabs from `/meta`: resources and pages open in the app (active while open), links open a new tab. */
+const bottomBarFromMeta = (meta, basePath, activeResource) => (meta.bottomBar?.items ?? []).map((item, index) => {
+	if (item.kind === "link") return {
+		id: `link-${index}`,
+		label: item.label,
+		icon: menuIcon(item.icon, ExternalLink),
+		href: item.href,
+		external: true
+	};
+	if (item.kind === "page") return {
+		id: item.page,
+		label: item.label,
+		icon: menuIcon(item.icon ?? meta.pages[item.page]?.icon, LayoutDashboard),
+		href: `${basePath}/${item.page}`,
+		active: item.page === activeResource
+	};
+	return {
+		id: item.resource,
+		label: item.label,
+		icon: menuIcon(item.icon, iconFor(item.resource)),
+		href: `${basePath}/${item.resource}`,
+		active: item.resource === activeResource
+	};
+});
+//#endregion
+export { bottomBarFromMeta };

package/dist/app/delete/record-diff.js

@@ -1,7 +1,7 @@
 import { humanize } from "../../live/naming.js";
 import { displayValue } from "../../live/display-value.js";
 //#region src/app/delete/record-diff.ts
-const volatile = /* @__PURE__ */ new Set(["updatedAt"]);
+const volatile = /* @__PURE__ */ new Set(["updated_at", "updatedAt"]);
 /** The fields whose stored value differs between two reads of a record, for the "changed since you opened it" dialog. */
 const diffRecords = (model, view, before, after) => Object.values(model.fields).flatMap((field) => {
 	if (volatile.has(field.name) || JSON.stringify(before[field.name] ?? null) === JSON.stringify(after[field.name] ?? null)) return [];

package/dist/app/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Protobase</title>
   </head>
   <body>
-    <div id="root" class="h-screen"></div>
+    <!-- The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
+    <div id="root" class="h-screen" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
     <script type="module" src="./main"></script>
   </body>
 </html>

package/dist/app/record-page.js

@@ -20,6 +20,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 { auditField } from "../live/audit-fields.js";
 import { RecordActions } from "./pages/record-actions.js";
 import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
@@ -118,7 +119,8 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 	const layout = layoutFor(model, view);
 	const sidebarFields = layout.flatMap((item) => item.kind === "sidebar" ? item.fields : []);
 	const status = model.fields.status?.type === "enum" ? String(stored.record.status) : void 0;
-	const updated = stored.record.updatedAt ? Math.max(0, Math.round((Date.now() - Date.parse(String(stored.record.updatedAt))) / 1e3)) : void 0;
+	const updatedAt = auditField(model, "updated");
+	const updated = updatedAt && stored.record[updatedAt] ? Math.max(0, Math.round((Date.now() - Date.parse(String(stored.record[updatedAt]))) / 1e3)) : void 0;
 	const hint = (name) => view?.fields[name];
 	const visible = (name) => fieldAccess(stored.permissions, name) !== "hidden";
 	const fieldView = (name) => {
@@ -288,9 +290,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 								}),
 								/* @__PURE__ */ jsx(MetadataCard, {
 									title: "Details",
-									rows: ["createdAt", "updatedAt"].flatMap((name) => {
-										const field = model.fields[name];
-										return field && visible(name) ? [{
+									rows: [auditField(model, "created"), updatedAt].flatMap((name) => {
+										const field = name ? model.fields[name] : void 0;
+										return name && field && visible(name) ? [{
 											label: hint(name)?.label ?? humanize(name),
 											value: displayValue(field, stored.record[name], hint(name))
 										}] : [];

package/dist/app-shell/app-shell.d.ts

@@ -1,3 +1,4 @@
+import "./bottom-bar.js";
 import "./nav.js";
 import "./profile-menu.js";
 import "./global-search.js";

package/dist/app-shell/app-shell.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { useIsDesktop } from "../lib/use-media-query.js";
+import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
 import { Sidebar } from "./sidebar.js";
 import { TopBar } from "./top-bar.js";
@@ -7,12 +8,13 @@ import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, onNavigate, onSignOut, organizations, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, organizations, roles, search, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
 		if (desktop) setDrawerOpen(false);
 	}, [desktop]);
+	const tabs = !desktop && bottomBar && bottomBar.length > 0 ? bottomBar : void 0;
 	const sidebar = (mode) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
 		activeItem,
@@ -24,7 +26,8 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		userMenu,
 		onNavigate,
 		onSignOut,
-		organizations
+		organizations,
+		roles
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className),
@@ -37,18 +40,28 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 flex-col",
-				children: [/* @__PURE__ */ jsx(TopBar, {
-					breadcrumb,
-					onNavigate,
-					actions,
-					onMenu: desktop ? void 0 : () => setDrawerOpen(true),
-					menuOpen: drawerOpen,
-					menuControls: drawerId,
-					search
-				}), /* @__PURE__ */ jsx("main", {
-					className: "flex min-h-0 flex-1 flex-col",
-					children
-				})]
+				children: [
+					/* @__PURE__ */ jsx(TopBar, {
+						breadcrumb,
+						onNavigate,
+						actions,
+						onMenu: desktop || tabs ? void 0 : () => setDrawerOpen(true),
+						menuOpen: drawerOpen,
+						menuControls: drawerId,
+						search
+					}),
+					/* @__PURE__ */ jsx("main", {
+						className: "flex min-h-0 flex-1 flex-col",
+						children
+					}),
+					tabs && /* @__PURE__ */ jsx(BottomBar, {
+						tabs,
+						onNavigate,
+						onMore: () => setDrawerOpen(true),
+						moreOpen: drawerOpen,
+						moreControls: drawerId
+					})
+				]
 			}),
 			rightPanel
 		]

package/dist/app-shell/bottom-bar.d.ts

@@ -0,0 +1 @@
+import "lucide-react";

package/dist/app-shell/bottom-bar.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/cn.js";
+import { Ellipsis } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/bottom-bar.tsx
+const inApp = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const tab = "flex min-h-[49px] min-w-0 flex-1 flex-col items-center justify-center gap-1 pb-1 pt-1.5 text-[10px] font-medium leading-none";
+/**
+* Tabs along the bottom of a phone, as on iOS: icon above label, the current screen in the accent colour, and "More"
+* last, which opens the navigation drawer and is the current tab on screens the others do not hold. The padding below
+* keeps the tabs clear of the iPhone home indicator.
+*/
+const BottomBar = ({ tabs, onNavigate, onMore, moreOpen, moreControls }) => {
+	const moreCurrent = !tabs.some((item) => item.active);
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": "Tabs",
+		className: "flex shrink-0 border-t bg-background pb-[env(safe-area-inset-bottom)] md:hidden",
+		children: [tabs.map((item) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsxs("a", {
+				href: item.href,
+				"aria-current": item.active ? "page" : void 0,
+				...item.external ? {
+					target: "_blank",
+					rel: "noreferrer"
+				} : {},
+				onClick: (event) => {
+					if (item.external || !onNavigate || !inApp(event)) return;
+					event.preventDefault();
+					onNavigate(item.href);
+				},
+				className: cn(tab, item.active ? "text-primary-text" : "text-muted-foreground"),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					className: "size-6",
+					strokeWidth: item.active ? 2.2 : 1.9,
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "max-w-full truncate px-0.5",
+					children: item.label
+				})]
+			}, item.id);
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": moreOpen,
+			"aria-controls": moreControls,
+			"data-current": moreCurrent || void 0,
+			onClick: onMore,
+			className: cn(tab, moreCurrent ? "text-primary-text" : "text-muted-foreground"),
+			children: [/* @__PURE__ */ jsx(Ellipsis, {
+				className: "size-6",
+				strokeWidth: moreCurrent ? 2.2 : 1.9,
+				"aria-hidden": true
+			}), "More"]
+		})]
+	});
+};
+//#endregion
+export { BottomBar };

package/dist/app-shell/index.d.ts

@@ -1,3 +1,4 @@
+import "./bottom-bar.js";
 import "./nav.js";
 import "./profile-menu.js";
 import { SidebarMode, sidebarModes } from "./sidebar-mode.js";

package/dist/app-shell/profile-menu.js

@@ -1,13 +1,15 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
+import { SwitchGroup } from "./switch-group.js";
 import { useEffect, useRef, useState } from "react";
-import { Check, ChevronsUpDown, LogOut } from "lucide-react";
+import { ChevronsUpDown, LogOut } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/profile-menu.tsx
 const menuRow = "flex min-h-11 w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-muted md:min-h-0";
 /** The person at the bottom of the sidebar; the menu is fixed to the viewport so a narrow sidebar cannot clip it. */
-const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut, organizations }) => {
+const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate, onSignOut, organizations, roles }) => {
+	const activeRole = roles?.roles.find((role) => role.name === roles.active);
 	const [local, setLocal] = useState(false);
 	const open = controlled ?? local;
 	const root = useRef(null);
@@ -77,30 +79,37 @@ const ProfileMenu = ({ user, compact, open: controlled, items = [], onNavigate,
 						children: user.email
 					})]
 				}),
-				organizations && (organizations.current || organizations.others.length > 0) && /* @__PURE__ */ jsxs("div", {
-					className: "border-b py-1",
-					role: "group",
-					"aria-label": "Organizations",
-					children: [organizations.current && /* @__PURE__ */ jsxs("div", {
-						className: cn(menuRow, "text-foreground hover:bg-transparent"),
-						"aria-current": "true",
-						children: [/* @__PURE__ */ jsx(Check, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: organizations.current.name
-						})]
-					}), organizations.others.map((organization) => /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						role: "menuitem",
-						onClick: () => {
-							setLocal(false);
-							organizations.onSwitch(organization.id);
-						},
-						className: menuRow,
-						children: [/* @__PURE__ */ jsx("span", { className: "size-4" }), /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: organization.name
-						})]
-					}, organization.id))]
+				organizations && (organizations.current || organizations.others.length > 0) && /* @__PURE__ */ jsx(SwitchGroup, {
+					label: "Organizations",
+					...organizations.current && { current: {
+						id: organizations.current.id,
+						label: organizations.current.name
+					} },
+					others: organizations.others.map(({ id, name }) => ({
+						id,
+						label: name
+					})),
+					rowClassName: menuRow,
+					onSwitch: (id) => {
+						setLocal(false);
+						organizations.onSwitch(id);
+					}
+				}),
+				roles && roles.roles.length > 1 && /* @__PURE__ */ jsx(SwitchGroup, {
+					label: "Roles",
+					...activeRole && { current: {
+						id: activeRole.name,
+						label: activeRole.label
+					} },
+					others: roles.roles.filter((role) => role !== activeRole).map(({ name, label }) => ({
+						id: name,
+						label
+					})),
+					rowClassName: menuRow,
+					onSwitch: (name) => {
+						setLocal(false);
+						roles.onSwitch(name);
+					}
 				}),
 				items.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: cn(onSignOut && "border-b"),

package/dist/app-shell/sidebar.js

@@ -7,7 +7,7 @@ import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, organizations }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, organizations, roles }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -54,7 +54,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 						items: userMenu,
 						onNavigate,
 						onSignOut,
-						organizations
+						organizations,
+						roles
 					})
 				})
 			]

package/dist/app-shell/switch-group.js

@@ -0,0 +1,29 @@
+import { cn } from "../lib/cn.js";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/switch-group.tsx
+/** A group of the profile menu that switches between options: the current one checked, the others a click away. */
+const SwitchGroup = ({ label, current, others, rowClassName, onSwitch }) => /* @__PURE__ */ jsxs("div", {
+	className: "border-b py-1",
+	role: "group",
+	"aria-label": label,
+	children: [current && /* @__PURE__ */ jsxs("div", {
+		className: cn(rowClassName, "text-foreground hover:bg-transparent"),
+		"aria-current": "true",
+		children: [/* @__PURE__ */ jsx(Check, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: current.label
+		})]
+	}), others.map((option) => /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "menuitem",
+		onClick: () => onSwitch(option.id),
+		className: rowClassName,
+		children: [/* @__PURE__ */ jsx("span", { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: option.label
+		})]
+	}, option.id))]
+});
+//#endregion
+export { SwitchGroup };

package/dist/auth/auth-provider.js

@@ -14,6 +14,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [state, setState] = useState({ kind: "loading" });
 	const [signInMethods, setSignInMethods] = useState(["password"]);
 	const [passwordReset, setPasswordReset] = useState(false);
+	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
 	const [staffSignIn, setStaffSignIn] = useState();
@@ -43,6 +44,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session.status().then(async (status) => {
 			setSignInMethods(status.signInMethods);
 			setPasswordReset(status.passwordReset);
+			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
 			setStaffSignIn(status.staffSignIn);
@@ -61,6 +63,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		passkeyDomains,
 		socialProviders,
 		signInProviders: socialProviders.map((id) => ({
 			id,
@@ -73,7 +76,7 @@ const AuthProvider = ({ session: given, children }) => {
 		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)),
-		signInWithPasskey: async () => enter(await session.signInWithPasskey()),
+		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
 			window.location.assign(await session.signInSocial(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
@@ -94,6 +97,7 @@ const AuthProvider = ({ session: given, children }) => {
 		session,
 		signInMethods,
 		passwordReset,
+		passkeyDomains,
 		socialProviders,
 		platformSignIn,
 		staffSignIn,

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, onForgotPassword, providers = [], onContinueWith }) => {
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, passkeyDomains = [], onForgotPassword, providers = [], onContinueWith }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
 	const emailInput = useRef(null);
@@ -36,17 +36,28 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["pass
 			}),
 			(offered.length > 0 || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2",
-				children: [offered.map((provider) => /* @__PURE__ */ jsxs(Button, {
-					onClick: () => onContinueWith?.(provider.id),
-					disabled: busy,
-					className: "min-h-10 w-full",
-					children: ["Continue with ", provider.name]
-				}, provider.id)), withPasskey && /* @__PURE__ */ jsxs(Button, {
-					onClick: onPasskey,
-					disabled: busy,
-					className: "min-h-10 w-full",
-					children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
-				})]
+				children: [
+					offered.map((provider) => /* @__PURE__ */ jsxs(Button, {
+						onClick: () => onContinueWith?.(provider.id),
+						disabled: busy,
+						className: "min-h-10 w-full",
+						children: ["Continue with ", provider.name]
+					}, provider.id)),
+					withPasskey && /* @__PURE__ */ jsxs(Button, {
+						onClick: () => onPasskey?.(),
+						disabled: busy,
+						className: "min-h-10 w-full",
+						children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+					}),
+					withPasskey && passkeyDomains.slice(1).map((domain) => /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => onPasskey?.(domain),
+						disabled: busy,
+						className: "w-full",
+						children: ["Use a passkey made for ", domain]
+					}, domain))
+				]
 			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
 				role: "alert",
 				className: "mt-4 text-xs font-medium text-danger-text",

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

@@ -6,7 +6,7 @@ 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 { signIn, signInSocial, signInProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
+	const { signIn, signInSocial, signInProviders, signInMethods, passkeyDomains, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState(initialError);
 	const attempt = async (start, message) => {
@@ -29,7 +29,8 @@ const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent, error: in
 		onForgotPassword,
 		providers: signInProviders,
 		onContinueWith: (provider) => void attempt(() => signInSocial(provider), signInMessage),
-		onPasskey: () => void attempt(signInWithPasskey, authMessage),
+		passkeyDomains,
+		onPasskey: (domain) => void attempt(() => signInWithPasskey(domain), authMessage),
 		onSendCode: (email) => void attempt(async () => {
 			await sendSignInCode(email);
 			onCodeSent(email);

package/dist/data/meta-data.d.ts

@@ -1,5 +1,5 @@
 import { ResourcePermissions } from "@protobase/client";
-import { ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
+import { BottomBarModel, ResourceModel, UserMenuModel, ViewModel } from "@protobase/schema";
 import { PageModel } from "@protobase/layout";
 //#region src/data/meta-data.d.ts
 export type MetaData = {
@@ -10,6 +10,8 @@ export type MetaData = {
   pages: Record<string, PageModel>;
   permissions: Record<string, ResourcePermissions>;
   userMenu?: UserMenuModel;
+  /** The tabs of the user's bottom bar on phones, when one names their active role. */
+  bottomBar?: Omit<BottomBarModel, 'roles'>;
   /** The assistant backend, when the app has one and the user has the admin or ai role. */
   assistant?: {
     url: string;

package/dist/data/use-meta.js

@@ -27,6 +27,7 @@ const useMeta = () => {
 				pages: Object.fromEntries((result.meta.pages ?? []).map((model) => [model.name, model])),
 				permissions: result.meta.permissions ?? {},
 				...result.meta.userMenu && { userMenu: result.meta.userMenu },
+				...result.meta.bottomBar && { bottomBar: result.meta.bottomBar },
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime }
 			};

package/dist/live/audit-fields.js

@@ -0,0 +1,5 @@
+//#region src/live/audit-fields.ts
+/** The field that holds when a record was created or last updated: `created_at` or `createdAt`, as the model names it. */
+const auditField = (model, kind) => [`${kind}_at`, `${kind}At`].find((name) => model.fields[name]);
+//#endregion
+export { auditField };

package/dist/live/naming.js

@@ -1,8 +1,8 @@
 //#region src/live/naming.ts
 const capitalise = (text) => text.charAt(0).toUpperCase() + text.slice(1);
-/** `companyId` becomes "Company", `discountPercent` becomes "Discount percent". */
+/** `companyId` and `company_id` become "Company", `discountPercent` and `discount_percent` become "Discount percent". */
 const humanize = (name) => {
-	const words = name.replace(/(Id|Code)$/, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
+	const words = name.replace(/(Id|Code|_id|_code)$/, "").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/_+/g, " ").trim().toLowerCase();
 	return capitalise(words || name);
 };
 //#endregion

package/dist/roles/acting-user.js

@@ -0,0 +1,11 @@
+//#region src/roles/acting-user.ts
+/**
+* The signed-in user as the session acts: with the active role alone, as its tokens carry it, so what the shell shows
+* by role follows a switch. As signed in until the active role is read, or for someone without a role.
+*/
+const actingUser = (user, role) => role?.active ? {
+	...user,
+	role: role.active
+} : user;
+//#endregion
+export { actingUser };

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

@@ -0,0 +1,33 @@
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { useToast } from "../toasts/toast-provider.js";
+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) => {
+	const { session } = useAuth();
+	const toast = useToast();
+	const [current, setCurrent] = useState();
+	useEffect(() => {
+		session.roles.current().then(setCurrent, (failure) => toast.show({
+			state: "error",
+			title: failureMessage(failure, "Could not read your roles")
+		}));
+	}, [session, toast]);
+	const switchTo = useCallback((name) => void session.roles.switchTo(name).then(reopen, (failure) => toast.show({
+		state: "error",
+		title: failureMessage(failure, "Could not switch the role")
+	})), [
+		session,
+		toast,
+		reopen
+	]);
+	return {
+		...current && { current },
+		switchTo
+	};
+};
+//#endregion
+export { useActiveRole };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.9.0",
-    "@protobase/layout": "0.9.0",
-    "@protobase/schema": "0.9.0",
+    "@protobase/client": "0.10.0",
+    "@protobase/layout": "0.10.0",
+    "@protobase/schema": "0.10.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",