@protobase/ui 0.12.8 → 0.12.10

package/dist/action-card/action-card.d.ts

@@ -20,7 +20,9 @@ export type ActionCardProps = {
   actions?: CardAction[];
   onAction?: (id: string) => void;
   children?: ReactNode;
+  /** Without the bordered card and the title row, for a page that is already framed; the title still labels the section. */
+  frameless?: boolean;
 };
 /** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
-export declare const ActionCard: ({ title, tone, badge, note, actions, onAction, children }: ActionCardProps) => import("react").JSX.Element;
+export declare const ActionCard: ({ title, tone, badge, note, actions, onAction, children, frameless }: ActionCardProps) => import("react").JSX.Element;
 //#endregion

package/dist/action-card/action-card.js

@@ -27,15 +27,15 @@ const frames = {
 	}
 };
 /** A card with a toned title row, any content, a note and buttons: the building block of rich chat messages. */
-const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onAction, children }) => {
+const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onAction, children, frameless = false }) => {
 	const [confirming, setConfirming] = useState();
 	const hints = actions.flatMap((action) => action.hint ? [action.hint] : []);
 	const click = (action) => action.confirm ? setConfirming(action) : onAction?.(action.id);
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": title,
-		className: cn("shrink-0 overflow-hidden rounded-lg border bg-background whitespace-normal text-foreground shadow-sm", frames[tone].border),
+		className: frameless ? "whitespace-normal text-foreground" : cn("shrink-0 overflow-hidden rounded-lg border bg-background whitespace-normal text-foreground shadow-sm", frames[tone].border),
 		children: [
-			/* @__PURE__ */ jsxs("header", {
+			!frameless && /* @__PURE__ */ jsxs("header", {
 				className: cn("flex items-center gap-2 px-3 py-2", frames[tone].header),
 				children: [/* @__PURE__ */ jsx("h3", {
 					className: "min-w-0 flex-1 text-[13px] font-semibold",
@@ -46,7 +46,7 @@ const ActionCard = ({ title, tone = "neutral", badge, note, actions = [], onActi
 				})]
 			}),
 			(children || note || actions.length > 0) && /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2.5 px-3 py-2.5",
+				className: cn("space-y-2.5", !frameless && "px-3 py-2.5"),
 				children: [
 					children,
 					note && /* @__PURE__ */ jsx("p", {

package/dist/app/app.d.ts

@@ -28,6 +28,9 @@ export type AppProps = {
   /** How the plugins `/meta` names are loaded, for stories and tests; the page's `fetch` and `import()` by default. */
   pluginLoader?: PluginLoader;
 };
-/** The admin: sign-in first, then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent. */
+/**
+ * The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
+ * `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent.
+ */
 export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -48,9 +48,10 @@ const placeOf = (address) => address?.kind === "page" ? address.page : address?.
 const recordOf = (address) => address?.kind === "record" ? address : void 0;
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
-	const { state, session, signOut, stopStaffSession, organizations: organizationSettings } = useAuth();
-	if (state.kind !== "signed-in") throw new Error("The shell is only rendered for a signed-in user");
-	const { user, staff } = state;
+	const { state, session, signOut, showSignIn, stopStaffSession, organizations: organizationSettings } = useAuth();
+	if (state.kind !== "signed-in" && state.kind !== "visitor") throw new Error("The shell is only rendered for a signed-in user or a visitor");
+	const user = state.kind === "signed-in" ? state.user : void 0;
+	const staff = state.kind === "signed-in" ? state.staff : void 0;
 	const { path, params, basePath } = useRouter();
 	const { address, go, open } = useAppAddress();
 	const place = placeOf(address);
@@ -112,15 +113,15 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		url: runtimeUrl,
 		client: runtime
 	});
-	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]));
-	const acting = actingUser(user, role.current);
-	const admin = isAdmin(acting);
+	const role = useActiveRole(useCallback(() => reopenIn(basePath), [basePath]), Boolean(user));
+	const acting = user && actingUser(user, role.current);
+	const admin = acting ? isAdmin(acting) : false;
 	const pluginsOff = usePluginsOff();
-	const organizations = useOrganizations(Boolean(organizationSettings));
+	const organizations = useOrganizations(Boolean(organizationSettings && user));
 	const current = organizations.current;
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
-	const organizationPage = organizationSettings ? organizationPageTitles[path] : void 0;
-	const accountPage = path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : organizationPage;
+	const organizationPage = organizationSettings && user ? organizationPageTitles[path] : void 0;
+	const accountPage = !user ? void 0 : path === "/-/account" ? "Sign-in & security" : path === "/-/sign-in-policy" ? "Sign-in policy" : organizationPage;
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
 		address,
@@ -130,7 +131,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordTitle: title,
 		recordLoading: titleLoading
 	});
-	const content = path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
+	const content = user && path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: "Admins only",
 		children: "Only an admin can change how people sign in."
 	}) : organizationPage && path === "/-/organization" ? /* @__PURE__ */ jsx(OrganizationPage, {
@@ -156,7 +157,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			address.page,
 			"."
 		]
-	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreatePage, { resource: address.resource }, `${address.resource}/new`) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
+	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreatePage, {
+		resource: address.resource,
+		values: address.values
+	}, `${address.resource}/new?${new URLSearchParams(address.values).toString()}`) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
 		resource: address.resource,
 		recordKey: address.key
 	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
@@ -164,15 +168,16 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		sidebarMode: sidebarMode ?? "text-small",
 		activeItem: place ?? "",
 		breadcrumb,
-		user: userToShell(acting),
-		onSignOut: () => void signOut(),
+		user: acting && userToShell(acting),
+		onSignOut: user && (() => void signOut()),
+		onSignIn: user ? void 0 : showSignIn,
 		workspace: current?.organization?.name ?? workspace,
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
 		userMenu: [
 			...userMenuFromMeta(meta, basePath, place),
-			...organizationSettings ? organizationMenuItems(basePath, path, current) : [],
-			...accountMenuItems(basePath, path, admin)
+			...organizationSettings && user ? organizationMenuItems(basePath, path, current) : [],
+			...user ? accountMenuItems(basePath, path, admin) : []
 		],
 		organizations: organizationSettings && {
 			...current?.organization && { current: {
@@ -231,12 +236,12 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	});
 };
 const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspace, sidebarMode, ui, assistant, runtime, pluginLoader }) => {
-	const { session, markSignedOut } = useAuth();
+	const { state, session, markSignedOut } = useAuth();
 	return /* @__PURE__ */ jsx(ApiProvider, {
 		baseUrl,
 		client,
 		sources,
-		token: session.token,
+		token: state.kind === "visitor" ? void 0 : session.token,
 		onUnauthenticated: markSignedOut,
 		children: /* @__PURE__ */ jsx(Router, {
 			basePath,
@@ -254,7 +259,10 @@ const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspa
 		})
 	});
 };
-/** The admin: sign-in first, then a sidebar from `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent. */
+/**
+* The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
+* `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent.
+*/
 const App = ({ auth, workspace, ...rest }) => /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
 	children: /* @__PURE__ */ jsx(AuthGate, {

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

@@ -1,6 +1,7 @@
 import { useClient } from "../../data/api-provider.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { FieldEditor } from "../field-editor.js";
@@ -8,14 +9,14 @@ import { can } from "../permissions.js";
 import { useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { createBody, createSections, hasDatabaseDefault, initialDraft, isChosen, isRequired } from "./create-values.js";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isApiError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/create/create-page.tsx
 const without = (source, name) => Object.fromEntries(Object.entries(source).filter(([key]) => key !== name));
-/** `/:resource/new`: a form from the view's layout; on success it opens the new record. */
-const CreatePage = ({ resource }) => {
+/** `/:resource/new`: a form from the view's layout, filled in with the address's `values`; on success it opens the new record. */
+const CreatePage = ({ resource, values }) => {
 	const meta = useAdminMeta();
 	const model = meta.resources[resource];
 	const permissions = usePermissions(resource);
@@ -35,9 +36,12 @@ const CreatePage = ({ resource }) => {
 			"."
 		]
 	});
-	return /* @__PURE__ */ jsx(LoadedCreate, { resource });
+	return /* @__PURE__ */ jsx(LoadedCreate, {
+		resource,
+		values
+	});
 };
-const LoadedCreate = ({ resource }) => {
+const LoadedCreate = ({ resource, values }) => {
 	const meta = useAdminMeta();
 	const model = meta.resources[resource];
 	const view = meta.views[resource];
@@ -47,8 +51,30 @@ const LoadedCreate = ({ resource }) => {
 	const noun = view?.names?.singular ?? humanize(resource);
 	const feedback = useLiveSave(view?.saveFeedback ?? "toast", `New ${noun.toLowerCase()}`);
 	const sections = createSections(model, view);
-	const [draft, setDraft] = useState(() => initialDraft(model, sections));
+	const [draft, setDraft] = useState(() => initialDraft(model, sections, values));
 	const [errors, setErrors] = useState({});
+	useEffect(() => {
+		for (const [name, key] of Object.entries(values ?? {})) {
+			const target = meta.resources[model.fields[name]?.relation?.resource ?? ""];
+			if (!target) continue;
+			fetchLabels(queryClient, client, target, [key], meta.views[target.name]).then((labels) => {
+				const label = labels.get(key);
+				if (label) setDraft((current) => isChosen(current[name]) && current[name].key === key ? {
+					...current,
+					[name]: {
+						key,
+						label
+					}
+				} : current);
+			});
+		}
+	}, [
+		values,
+		meta,
+		model,
+		client,
+		queryClient
+	]);
 	const change = (name, value) => {
 		setErrors((current) => without(current, name));
 		setDraft((current) => ({

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

@@ -42,9 +42,22 @@ const createBody = (model, resources, draft) => Object.fromEntries(Object.entrie
 }));
 /** A field is required when it can be neither empty nor filled in by a default. */
 const isRequired = (field) => !field.nullable && !field.default && field.type !== "boolean";
-/** The form's starting values: literal defaults from `/meta`. Database defaults stay empty so the database fills them. */
-const initialDraft = (model, sections) => Object.fromEntries(sections.flatMap((section) => section.fields.flatMap((name) => {
-	const fallback = model.fields[name]?.default;
+const givenValue = (field, value) => {
+	if (field.type === "relation") return {
+		key: value,
+		label: value
+	};
+	if (field.type === "boolean") return value === "true";
+	return 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.
+*/
+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 (!fallback || !("value" in fallback) || fallback.value === null || fallback.value === void 0) return [];
 	return [[name, typeof fallback.value === "boolean" ? fallback.value : String(fallback.value)]];
 })));

package/dist/app/current-address.d.ts

@@ -17,6 +17,7 @@ export type CurrentAddress = ListAddress | {
 } | {
   kind: 'create';
   resource: string;
+  values?: Readonly<Record<string, string>>;
 } | {
   kind: 'page';
   page: string;

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

@@ -4,6 +4,7 @@ import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
 import { cardFields } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
+import { fileShown, isPreviewable } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
@@ -13,12 +14,25 @@ import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
 const grid = "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3";
+const CardImage = ({ value }) => {
+	const file = fileShown(value);
+	const url = file && "url" in file && typeof file.url === "string" && isPreviewable(file.type) ? file.url : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		className: "-mx-3 -mt-3 mb-1.5 block aspect-[4/3] overflow-hidden rounded-t-lg border-b border-border bg-muted",
+		children: url && /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: "",
+			loading: "lazy",
+			className: "size-full object-cover"
+		})
+	});
+};
 /**
-* A card per record, opening its page: the title over the subtitle, the badge beside it and small meta fields below;
+* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it and small meta fields below;
 * or, with a `card` component, what it draws of the row, the built-in content again when it is missing or throws.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
-	const { title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (row, name) => {
 		const field = model.fields[name];
@@ -52,6 +66,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
 				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
+					image !== void 0 && /* @__PURE__ */ jsx(CardImage, { value: row.record[image] }),
 					/* @__PURE__ */ jsxs("span", {
 						className: "flex items-start justify-between gap-2",
 						children: [/* @__PURE__ */ jsx("span", {

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

@@ -30,6 +30,7 @@ const displayChoices = (view) => [{
 }))];
 /** The fields a cards display shows, its title the view's title field when it names none. */
 const cardFields = (model, view, display) => ({
+	image: display.image,
 	title: display.title ?? recordTitleField(model, view),
 	subtitle: display.subtitle,
 	badge: display.badge,
@@ -38,8 +39,9 @@ const cardFields = (model, view, display) => ({
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
-	const { title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
 	return [
+		image,
 		title,
 		subtitle,
 		badge,

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

@@ -2,6 +2,7 @@ import { cn } from "../../lib/cn.js";
 import { Badge } from "../../primitives/badge.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
+import { fetchLabels } from "../../live/relation-labels.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
 import { fileShown } from "../../live/file-values.js";
@@ -9,7 +10,6 @@ import { displayValue } from "../../live/display-value.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { toneFor } from "../../live/columns-from-model.js";
-import { fetchLabels } from "../../live/relation-labels.js";
 import { jsx } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx

package/dist/app/pages/use-relation-labels.js

@@ -1,7 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
-import { useAdminMeta } from "../meta-gate.js";
 import { fetchLabels } from "../../live/relation-labels.js";
+import { useAdminMeta } from "../meta-gate.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/use-relation-labels.ts
 /** Names for the relation columns of the rows on screen, one list call per column, by column then key. */

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

@@ -8,7 +8,7 @@ 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, bottomBar, onNavigate, onSignOut, organizations, roles, search, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, onSignIn, organizations, roles, search, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -26,6 +26,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		userMenu,
 		onNavigate,
 		onSignOut,
+		onSignIn,
 		organizations,
 		roles
 	});

package/dist/app-shell/sidebar.js

@@ -5,9 +5,10 @@ import { ProfileMenu } from "./profile-menu.js";
 import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
+import { LogIn } from "lucide-react";
 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, roles }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, onSignIn, organizations, roles }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -47,7 +48,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: cn("shrink-0 border-t p-2", mode !== "text-large" && mode !== "text-small" && !expanding && "flex justify-center"),
-					children: /* @__PURE__ */ jsx(ProfileMenu, {
+					children: user ? /* @__PURE__ */ jsx(ProfileMenu, {
 						user,
 						compact: !inline,
 						open: profileMenuOpen,
@@ -56,6 +57,15 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 						onSignOut,
 						organizations,
 						roles
+					}) : onSignIn && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: onSignIn,
+						"aria-label": "Sign in",
+						className: "flex min-h-11 w-full items-center gap-2.5 rounded-md p-1.5 text-left text-[13px] font-medium text-muted-foreground hover:bg-muted hover:text-foreground md:min-h-0",
+						children: [/* @__PURE__ */ jsx(LogIn, { className: "size-4 shrink-0" }), inline && /* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap",
+							children: "Sign in"
+						})]
 					})
 				})
 			]

package/dist/auth/auth-gate.js

@@ -53,12 +53,12 @@ const forgetStaffLink = () => window.history.replaceState(window.history.state,
 const forgetSignInLink = () => window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
 const forgetInvitationLink = () => window.history.replaceState(window.history.state, "", withoutInvitationLink(window.location.href));
 /**
-* Shows the app when the user is signed in (or the server has no login), and the right page otherwise: the sign-in
-* steps, or the page an emailed reset link, an invitation link or a staff link opened. An invited person with an
-* account signs in first and comes back to the invitation.
+* Shows the app when the user is signed in (or the server has no login), or to a visitor when the project lets them
+* browse, and the right page otherwise: the sign-in steps, or the page an emailed reset link, an invitation link or a
+* staff link opened. An invited person with an account signs in first and comes back to the invitation.
 */
 const AuthGate = ({ workspace, children }) => {
-	const { state, recheck, passwordReset, signOut, signInProviders } = useAuth();
+	const { state, recheck, passwordReset, signOut, signInProviders, showSignIn, browse } = useAuth();
 	const [page, setPage] = useState(firstPage);
 	useEffect(() => {
 		if (state.kind === "signed-in" || state.kind === "two-factor" || state.kind === "setup-required") setPage((current) => {
@@ -86,7 +86,7 @@ const AuthGate = ({ workspace, children }) => {
 	};
 	const backToSignIn = () => {
 		setPage({ kind: "sign-in" });
-		signOut();
+		signOut().then(showSignIn);
 	};
 	switch (state.kind) {
 		case "loading": return /* @__PURE__ */ jsxs("div", {
@@ -118,18 +118,23 @@ const AuthGate = ({ workspace, children }) => {
 			setPage({ kind: "sign-in" });
 		}
 	});
-	if (page.kind === "invitation" && (state.kind === "signed-in" || state.kind === "signed-out" && !page.signingIn)) return /* @__PURE__ */ jsx(InvitationPage, {
+	const signedOut = state.kind === "signed-out" || state.kind === "visitor";
+	if (page.kind === "invitation" && (state.kind === "signed-in" || signedOut && !page.signingIn)) return /* @__PURE__ */ jsx(InvitationPage, {
 		token: page.token,
 		onDone: () => {
 			forgetInvitationLink();
 			setPage({ kind: "sign-in" });
 		},
-		onSignIn: () => setPage({
-			...page,
-			signingIn: true
-		})
+		onSignIn: () => {
+			setPage({
+				...page,
+				signingIn: true
+			});
+			showSignIn();
+		}
 	});
 	if (state.kind === "signed-in") return children;
+	if (state.kind === "visitor" && page.kind === "sign-in" && !page.notice && !page.error && !page.providerError) return children;
 	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
 		methods: state.methods,
 		onBack: backToSignIn
@@ -156,7 +161,8 @@ const AuthGate = ({ workspace, children }) => {
 		onCodeSent: (email) => setPage({
 			kind: "email-code",
 			email
-		})
+		}),
+		onBrowse: browse
 	}, error);
 };
 //#endregion

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/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";

package/dist/package.js

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

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")