@protobase/ui 0.12.9 → 0.12.11

package/dist/app/action-icon.js

@@ -1,10 +1,6 @@
-import { FileText, Send, Wallet, Zap } from "lucide-react";
+import { namedIcon } from "./named-icon.js";
+import { Zap } from "lucide-react";
 //#region src/app/action-icon.ts
-const byName = {
-	wallet: Wallet,
-	"file-text": FileText,
-	send: Send
-};
-const actionIcon = (name) => name ? byName[name] ?? Zap : Zap;
+const actionIcon = (name) => namedIcon(name) ?? Zap;
 //#endregion
 export { actionIcon };

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,21 +4,47 @@ 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";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { toneFor } from "../../live/columns-from-model.js";
+import { namedIcon } from "../named-icon.js";
+import { ValueBadge } from "../value-badge.js";
 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"
+		})
+	});
+};
+const MetaValue = ({ icon, children }) => {
+	const Icon = namedIcon(icon);
+	return /* @__PURE__ */ jsxs("dd", {
+		className: "flex items-center gap-1 tabular-nums",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			className: "size-3.5 shrink-0",
+			"aria-hidden": true
+		}), children]
+	});
+};
 /**
-* A card per record, opening its page: 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.
+* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it,
+* small meta fields below and the labels of its flags that are true; 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, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (row, name) => {
 		const field = model.fields[name];
@@ -38,6 +64,17 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			fallback: text(row, name)
 		}) : text(row, name);
 	};
+	const metaValue = (row, name) => {
+		const field = model.fields[name];
+		const hints = view?.fields[name];
+		const value = row.record[name];
+		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(row, name);
+		return /* @__PURE__ */ jsx(ValueBadge, {
+			value,
+			hints,
+			children: text(row, name)
+		});
+	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -51,14 +88,17 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			"aria-label": view?.names?.plural ?? humanize(model.name),
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
+				const raised = flags.filter((name) => row.record[name] === true);
 				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", {
 							className: "min-w-0 truncate font-medium",
 							children: shownValue(row, title)
-						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(Badge, {
-							tone: toneFor(String(status)),
+						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
+							value: status,
+							hints: view?.fields[badge],
 							children: text(row, badge)
 						})]
 					}),
@@ -67,17 +107,25 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						children: shownValue(row, subtitle)
 					}),
 					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "mt-auto flex flex-wrap gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
+						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
 						children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ jsx("dt", {
 								className: "sr-only",
 								children: label(name)
-							}), /* @__PURE__ */ jsx("dd", {
-								className: "tabular-nums",
-								children: shownValue(row, name)
+							}), /* @__PURE__ */ jsx(MetaValue, {
+								icon: view?.fields[name]?.icon,
+								children: metaValue(row, name)
 							})]
 						}, name))
+					}),
+					raised.length > 0 && /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-wrap gap-1",
+						"aria-label": "Features",
+						children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+							dot: false,
+							children: label(name)
+						}) }, name))
 					})
 				] });
 				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {

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

@@ -30,20 +30,24 @@ 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,
-	meta: display.meta ?? []
+	meta: display.meta ?? [],
+	flags: display.flags ?? []
 });
 /** 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, flags } = cardFields(model, view, display);
 	return [
+		image,
 		title,
 		subtitle,
 		badge,
-		...meta
+		...meta,
+		...flags
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */

package/dist/app/field-editor.js

@@ -90,6 +90,10 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			className: "text-[13px]",
 			children: hints.prefix
 		}) : void 0,
+		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", {
+			className: "text-[13px]",
+			children: hints.suffix.trim()
+		}) : void 0,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		value: String(value),

package/dist/app/named-icon.js

@@ -0,0 +1,13 @@
+import { FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+//#region src/app/named-icon.ts
+/** The icons an action's or a field's `icon` may name. */
+const byName = {
+	wallet: Wallet,
+	"file-text": FileText,
+	send: Send,
+	ruler: RulerDimensionLine
+};
+/** The icon a name stands for, or nothing for a name the app does not know. */
+const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;
+//#endregion
+export { namedIcon };

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

@@ -1,15 +1,14 @@
 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";
 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 { ValueBadge } from "../value-badge.js";
 import { jsx } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
@@ -59,8 +58,9 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: file.name
 	});
 	const text = displayValue(field, value, hints);
-	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(Badge, {
-		tone: toneFor(String(value)),
+	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
+		value,
+		hints,
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {

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/record-page.js

@@ -1,4 +1,3 @@
-import { Badge } from "../primitives/badge.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { formatRelativeTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
@@ -24,6 +23,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 { ValueBadge } from "./value-badge.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { RecordActions } from "./pages/record-actions.js";
@@ -176,8 +176,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
-			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(Badge, {
-				tone: toneFor(String(stored.record[name])),
+			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
+				value: stored.record[name],
+				hints: hint(name),
 				children: text
 			}) : /* @__PURE__ */ jsx("strong", { children: text });
 			const shown = shownWidget(fieldTypes, field, hint(name));

package/dist/app/value-badge.js

@@ -0,0 +1,14 @@
+import { Badge } from "../primitives/badge.js";
+import { valueColor } from "../live/value-color.js";
+import { toneFor } from "../live/columns-from-model.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/value-badge.tsx
+/** A stored value as a badge: filled with the colour the view gives it and in its badge shape, else in its tone. */
+const ValueBadge = ({ value, hints, children }) => /* @__PURE__ */ jsx(Badge, {
+	tone: toneFor(String(value)),
+	color: valueColor(hints?.valueColors, value),
+	shape: hints?.badgeShape,
+	children
+});
+//#endregion
+export { ValueBadge };

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