@protobase/ui 0.9.0 → 0.11.0

package/dist/app/user-menu-from-meta.js

@@ -2,6 +2,7 @@ import { humanize } from "../live/naming.js";
 import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
 import { ExternalLink, LayoutDashboard } from "lucide-react";
+import { appPath } from "@protobase/schema";
 //#region src/app/user-menu-from-meta.ts
 /** The resources and pages the user menu holds; the sidebar leaves them out. */
 const userMenuResources = (meta) => new Set((meta.userMenu?.items ?? []).flatMap((item) => item.kind === "resource" ? [item.resource] : item.kind === "page" ? [item.page] : []));
@@ -20,7 +21,10 @@ const userMenuFromMeta = (meta, basePath, activeResource) => (meta.userMenu?.ite
 			id: item.page,
 			label: item.label ?? page?.title ?? humanize(item.page),
 			icon: menuIcon(item.icon ?? page?.icon, LayoutDashboard),
-			href: `${basePath}/${item.page}`,
+			href: appPath({
+				kind: "page",
+				page: item.page
+			}, basePath),
 			active: item.page === activeResource
 		};
 	}
@@ -28,7 +32,10 @@ const userMenuFromMeta = (meta, basePath, activeResource) => (meta.userMenu?.ite
 		id: item.resource,
 		label: item.label ?? meta.views[item.resource]?.names?.plural ?? humanize(item.resource),
 		icon: menuIcon(item.icon, iconFor(item.resource)),
-		href: `${basePath}/${item.resource}`,
+		href: appPath({
+			kind: "list",
+			resource: item.resource
+		}, basePath),
 		active: item.resource === activeResource
 	};
 });

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/index.d.ts

@@ -9,7 +9,13 @@ import { useRecord } from "./data/use-record.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { mergeUi } from "./app/pages/merge-ui.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
 import { LayoutRecord, useLayoutRecord } from "./app/pages/record-scope.js";
+import { CurrentAddress, ListAddress, ListChange } from "./app/current-address.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { ListDisplayRow } from "./app/displays/list-displays.js";
+import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
+import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
@@ -30,4 +36,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type MetaData, PartView, type ProjectUi, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type ProjectUi, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, defineUi, diffStats, isConflict, mergeUi, parseDiff, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, useRecord, useSeries, useUpdateRecord };

package/dist/index.js

@@ -18,10 +18,14 @@ import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
+import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
+import { useListDisplay } from "./app/displays/display-context.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
+import { uiFromModule } from "./app/pages/ui-from-module.js";
 import { mergeUi } from "./app/pages/merge-ui.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
-export { ActionCard, ApiProvider, App, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, useApiToken, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useMeta, useRecord, useSeries, useUpdateRecord };
+import { RecordLink } from "./app/displays/record-link.js";
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, defineUi, diffStats, isConflict, mergeUi, parseDiff, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, useRecord, useSeries, useUpdateRecord };

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/live/use-live-rows.js

@@ -4,7 +4,10 @@ import { createGridLoader } from "./grid-loader.js";
 import { useMemo } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/live/use-live-rows.ts
-/** A grid row source backed by the API; `total` is the server's estimate from the first page. */
+/**
+* A grid row source backed by the API; `total` is the server's estimate from the first page. `page` loads one page of
+* the same rows by number, and `key` names them in the query cache, for list displays that page through them.
+*/
 const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
@@ -38,7 +41,9 @@ const useLiveRows = ({ resources, views, model, columns, filter, orderBy }) => {
 			loadRows: loader.loadRows
 		} : void 0, [first.data, loader]),
 		error: first.error,
-		isLoading: first.isLoading
+		isLoading: first.isLoading,
+		page: loader.page,
+		key: [...keys.first(model.name, filter, orderBy), columnKey]
 	};
 };
 //#endregion

package/dist/primitives/segmented.js

@@ -1,13 +1,16 @@
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/segmented.tsx
-const Segmented = ({ value, options, onChange }) => /* @__PURE__ */ jsx("span", {
+const Segmented = ({ value, options, onChange, label }) => /* @__PURE__ */ jsx("span", {
+	role: "group",
+	"aria-label": label,
 	className: "inline-flex h-7 rounded-md bg-muted p-0.5",
-	children: options.map((option) => /* @__PURE__ */ jsx("button", {
+	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
+		"aria-pressed": option.value === value,
 		onClick: () => onChange(option.value),
-		className: cn("rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
-		children: option.label
+		className: cn("inline-flex items-center gap-1.5 rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), option.label]
 	}, option.value))
 });
 //#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.11.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.11.0",
+    "@protobase/layout": "0.11.0",
+    "@protobase/schema": "0.11.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",
     "@tanstack/react-virtual": "^3.14.13",