@protobase/ui 0.15.5 → 0.16.0

package/dist/app/map/record-position.js

@@ -1,13 +1,14 @@
 //#region src/app/map/record-position.ts
-const degrees = (value) => {
+/** A number field's value: it comes as a number, or as text for a decimal or bigint; anything else, or an empty value, is none. */
+const numeric = (value) => {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string" || value.trim() === "") return void 0;
 	return Number(value);
 };
 /** The record's position from its two fields, when both hold degrees on the globe; none otherwise, so no map is drawn. */
 const recordPosition = (record, fields) => {
-	const latitude = degrees(record[fields.latitude]);
-	const longitude = degrees(record[fields.longitude]);
+	const latitude = numeric(record[fields.latitude]);
+	const longitude = numeric(record[fields.longitude]);
 	if (latitude === void 0 || longitude === void 0) return void 0;
 	if (!(Math.abs(latitude) <= 90 && Math.abs(longitude) <= 180)) return void 0;
 	return {
@@ -16,4 +17,4 @@ const recordPosition = (record, fields) => {
 	};
 };
 //#endregion
-export { recordPosition };
+export { numeric, recordPosition };

package/dist/app/map/records-map.js

@@ -1,9 +1,11 @@
 import { cn } from "../../lib/cn.js";
 import { groupPoints } from "../displays/map-groups.js";
+import { mapLib } from "./maplibre.js";
+import { PositionAreas } from "./position-areas.js";
+import { themeColor } from "./theme-color.js";
 import { useEffect, useRef, useState } from "react";
 import { MapPin } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as maplibre from "maplibre-gl";
 import { Map as Map$1, Marker, NavigationControl } from "react-map-gl/maplibre";
 //#region src/app/map/records-map.tsx
 const groupRadius = 28;
@@ -25,13 +27,15 @@ const compact = new Intl.NumberFormat("en-IE", {
 const corners = (bounds) => [[bounds.west, bounds.south], [bounds.east, bounds.north]];
 /**
 * A map of `style` with a marker for each group of records that lie close together at the zoom, showing how many it
-* stands for, and a circle with the count of each bucket, which zooms in on its records when chosen. Choosing a marker
-* selects its records; choosing the map elsewhere clears the selection. A chosen marker the covered bottom would hide
-* moves up into the open part of the map.
+* stands for, and a circle with the count of each bucket, which zooms in on its records when chosen. A marker whose
+* records' positions are all approximate is drawn hollow with a dashed edge, over the areas around them. Choosing a
+* marker selects its records; choosing the map elsewhere clears the selection. A chosen marker the covered bottom would
+* hide moves up into the open part of the map.
 */
 const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, selected, covered, onSelect, onClear, markerLabel, bucketLabel }) => {
 	const ref = useRef(null);
 	const [groups, setGroups] = useState([]);
+	const [colors, setColors] = useState();
 	const byKey = new globalThis.Map(points.map((point) => [point.key, point]));
 	const pointKeys = points.map((point) => point.key).join(",");
 	const fitKey = fit && JSON.stringify(fit);
@@ -87,7 +91,7 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 	}, [chosenAt, covered]);
 	return /* @__PURE__ */ jsxs(Map$1, {
 		ref,
-		mapLib: maplibre,
+		mapLib,
 		mapStyle: style,
 		initialViewState: initial ?? {
 			latitude: 0,
@@ -99,6 +103,11 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 			height: "100%"
 		},
 		onLoad: () => {
+			const container = ref.current.getMap().getContainer();
+			setColors({
+				area: themeColor(container, "--primary"),
+				chosen: themeColor(container, "--foreground")
+			});
 			regroup();
 			if (fit) fitNow();
 			else report();
@@ -108,6 +117,11 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 		onClick: onClear,
 		children: [
 			/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }),
+			colors && /* @__PURE__ */ jsx(PositionAreas, {
+				points,
+				selected,
+				colors
+			}),
 			buckets.map((bucket) => /* @__PURE__ */ jsx(Marker, {
 				latitude: bucket.latitude,
 				longitude: bucket.longitude,
@@ -127,6 +141,7 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 				const at = byKey.get(group.at);
 				if (!at) return null;
 				const chosen = selected !== void 0 && group.keys.some((key) => selected.includes(key));
+				const approximate = group.keys.every((key) => byKey.get(key)?.approximate);
 				return /* @__PURE__ */ jsx(Marker, {
 					latitude: at.latitude,
 					longitude: at.longitude,
@@ -143,8 +158,10 @@ const RecordsMap = ({ style, initial, points, buckets, fit, onFitted, onMove, se
 						},
 						children: [/* @__PURE__ */ jsx(MapPin, {
 							"aria-hidden": true,
-							className: cn("size-8 drop-shadow", chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
-							strokeWidth: 1.5
+							"data-approximate": approximate || void 0,
+							className: cn("size-8 drop-shadow", approximate ? chosen ? "fill-background text-foreground" : "fill-background text-primary" : chosen ? "fill-foreground text-background" : "fill-primary text-primary-foreground"),
+							strokeWidth: approximate ? 2 : 1.5,
+							strokeDasharray: approximate ? "3 2" : void 0
 						}), group.keys.length > 1 && /* @__PURE__ */ jsx("span", {
 							className: "absolute -right-2 -top-1 min-w-5 rounded-full border border-background bg-foreground px-1 text-center text-[11px] font-medium leading-4 text-background tabular-nums",
 							children: group.keys.length

package/dist/app/map/theme-color.js

@@ -0,0 +1,23 @@
+//#region src/app/map/theme-color.ts
+/**
+* The colour a theme token such as `--primary` holds where `element` is, as `rgba()`, which MapLibre's paint reads
+* whatever the theme writes it in: the browser resolves the token, and a pixel painted with it gives its channels.
+*/
+const themeColor = (element, token) => {
+	const probe = document.createElement("span");
+	probe.style.color = `var(${token})`;
+	element.append(probe);
+	const resolved = getComputedStyle(probe).color;
+	probe.remove();
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const context = canvas.getContext("2d", { willReadFrequently: true });
+	if (!context) return resolved;
+	context.fillStyle = resolved;
+	context.fillRect(0, 0, 1, 1);
+	const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+	return `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`;
+};
+//#endregion
+export { themeColor };

package/dist/app/nav-recent.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitle, recordTitleField } from "../live/model-helpers.js";
 import { defaultOrderBy } from "./list-order.js";
-import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
 import { appPath, enumLabel } from "@protobase/schema";
+import { defaultRecentLimit, encodeKey } from "@protobase/schema/internal";
 //#region src/app/nav-recent.ts
 /** The list request behind a sidebar group: its filter, order (the list's sort when unset), size, and only the fields it shows. */
 const recentRequest = (model, view, recent) => ({

package/dist/app/pages/blocks/card-frame.js

@@ -2,7 +2,7 @@ import { cn } from "../../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/card-frame.tsx
 /** The card every block that shows a box uses: title, description and header actions over the body. */
-const CardFrame = ({ title, description, actions, className, children }) => /* @__PURE__ */ jsxs("section", {
+const CardFrame = ({ title, description, actions, className, bodyClassName, children }) => /* @__PURE__ */ jsxs("section", {
 	className: cn("flex min-w-0 flex-col rounded-lg border border-border bg-background", className),
 	"aria-label": title,
 	children: [(title || description || actions) && /* @__PURE__ */ jsxs("header", {
@@ -21,7 +21,7 @@ const CardFrame = ({ title, description, actions, className, children }) => /* @
 			children: actions
 		})]
 	}), /* @__PURE__ */ jsx("div", {
-		className: "min-w-0 flex-1 p-4 text-[13px]",
+		className: cn("min-w-0 flex-1 p-4 text-[13px]", bodyClassName),
 		children
 	})]
 });

package/dist/app/pages/blocks/grid.js

@@ -8,18 +8,26 @@ const columns = {
 	3: "md:grid-cols-2 xl:grid-cols-3",
 	4: "sm:grid-cols-2 xl:grid-cols-4"
 };
+const statColumns = {
+	1: "",
+	2: "grid-cols-2",
+	3: "grid-cols-2 xl:grid-cols-3",
+	4: "grid-cols-2 xl:grid-cols-4"
+};
 const spans = {
 	1: "",
 	2: "md:col-span-2",
 	3: "md:col-span-2 xl:col-span-3",
 	4: "sm:col-span-2 md:col-span-2 xl:col-span-4"
 };
-/** Columns that collapse to one on a phone; a child's `span` makes it wider. */
+const isStat = (child) => typeof child === "object" && !child.custom && child.type === "Stat";
+/** Columns that collapse to one on a phone, or two when it holds only `Stat`s; a child's `span` makes it wider. */
 const GridBlock = ({ node, children }) => {
 	const { columns: count = 2 } = propsOf(node);
 	const childNodes = node.children;
+	const stats = childNodes.length > 0 && childNodes.every(isStat);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("grid grid-cols-1 gap-4", columns[count]),
+		className: cn("grid grid-cols-1 gap-4", stats ? statColumns[count] : columns[count]),
 		children: children.map((child, index) => {
 			const element = childNodes[index];
 			const span = typeof element === "object" ? element.props.span : void 0;

package/dist/app/pages/blocks/link.js

@@ -2,8 +2,8 @@ import { AppLink } from "../../use-app-address.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { jsx } from "react/jsx-runtime";
-import { fillAddress } from "@protobase/schema/internal";
 import { appPath } from "@protobase/schema";
+import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/blocks/link.tsx
 const style = "font-medium text-primary-text hover:underline";
 /**

package/dist/app/pages/blocks/stat.js

@@ -23,7 +23,7 @@ const Count = ({ model, filter }) => {
 			resource: model.name,
 			filter
 		},
-		className: `${big} hover:text-primary-text`,
+		className: `${big} hover:text-primary-text after:absolute after:inset-0 after:content-['']`,
 		children: count.data.toLocaleString("en-IE")
 	});
 };
@@ -41,20 +41,24 @@ const RecordValue = ({ field, format }) => {
 		})
 	});
 };
-/** One number or value with a label: fixed, a count of matching records (linking to them), or a field of the record. */
+/**
+* One number or value with a label: fixed, a count of matching records (linking to them from anywhere on the card), or
+* a field of the record. A label that wraps pushes nothing out of line: the value sits at the card's bottom.
+*/
 const StatBlock = ({ node }) => {
 	const { label, value, resource, filter, field, format, description } = propsOf(node);
 	const { resources } = useAdminMeta();
 	const model = resource === void 0 ? void 0 : resources[resource];
 	return /* @__PURE__ */ jsxs(CardFrame, {
-		className: "h-full",
+		className: "relative h-full",
+		bodyClassName: "flex flex-col",
 		children: [
 			/* @__PURE__ */ jsx("p", {
-				className: "text-[13px] text-muted-foreground",
+				className: "text-[13px] text-muted-foreground break-words",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-1",
+				className: "mt-auto pt-1",
 				children: [
 					value !== void 0 && /* @__PURE__ */ jsx("span", {
 						className: big,

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

@@ -77,7 +77,7 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums"),
+		className: cn(hints.format === "code" && "font-mono text-xs", (field.type === "decimal" || field.type === "integer") && "tabular-nums", hints.multiline && "whitespace-pre-line break-words"),
 		children: text
 	});
 };

package/dist/app/record-page.js

@@ -144,6 +144,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			label: hint(name)?.label ?? humanize(name),
 			help: hint(name)?.help,
 			error: editor.errors[name],
+			wide: Boolean(hint(name)?.multiline),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
 					name: "Someone else",
@@ -181,7 +182,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 				value: stored.record[name],
 				hints: hint(name),
 				children: text
-			}) : /* @__PURE__ */ jsx("strong", { children: text });
+			}) : /* @__PURE__ */ jsx("strong", {
+				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
+				children: text
+			});
 			const shown = shownWidget(fieldTypes, field, hint(name));
 			return [{
 				label: hint(name)?.label ?? humanize(name),

package/dist/app/router.js

@@ -1,3 +1,4 @@
+import { RouteLink } from "../primitives/route-link.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -112,15 +113,13 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		})]
 	});
 };
-const Link = ({ to, onClick, ...rest }) => {
+/** A link to a path below the base path, as `appPath` writes it, that the router follows without reloading the page. */
+const Link = ({ to, replace, ...rest }) => {
 	const { navigate, basePath } = useRouter();
-	return /* @__PURE__ */ jsx("a", {
-		href: `${basePath}${to}`,
-		onClick: (event) => {
-			onClick?.(event);
-			if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.button !== 0) return;
-			event.preventDefault();
-			navigate(to);
+	return /* @__PURE__ */ jsx(RouteLink, {
+		to: {
+			href: `${basePath}${to}`,
+			onFollow: () => navigate(to, { replace })
 		},
 		...rest
 	});

package/dist/app/saved/saved-records.js

@@ -1,6 +1,6 @@
 import { recordKey } from "../../live/model-helpers.js";
-import { encodeKey } from "@protobase/schema/internal";
 import { createWhere } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/saved/saved-records.ts
 const where = createWhere();
 const relationValue = (value) => {

package/dist/app/search/search-model.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
+import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 //#region src/app/search/search-model.ts
 const where = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {

package/dist/app/searches/use-save-search.js

@@ -20,7 +20,7 @@ const useSaveSearch = (search, filter, name) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
-	const { go } = useAppAddress();
+	const { href, open } = useAppAddress();
 	const { resource } = search;
 	const model = meta.resources[resource];
 	const of = meta.views[resource]?.searchesOf;
@@ -44,10 +44,11 @@ const useSaveSearch = (search, filter, name) => {
 				title: "Search saved",
 				action: {
 					label: `Open ${plural.toLowerCase()}`,
-					onClick: () => go({
+					href: href({
 						kind: "list",
 						resource
-					})
+					}),
+					onNavigate: open
 				}
 			});
 		},

package/dist/app/use-record-editor.js

@@ -27,7 +27,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	const [linesConflict, setLinesConflict] = useState(false);
 	const [conflicts, setConflicts] = useState({});
 	const [errors, setErrors] = useState({});
-	const fieldsDirty = Object.keys(draft).length > 0;
+	const changed = Object.entries(draft).filter(([name, entry]) => differs(model.fields[name], entry, stored.record[name]));
+	const fieldsDirty = changed.length > 0;
 	const dirty = fieldsDirty || Boolean(lines?.dirty);
 	useEffect(() => {
 		if (restored?.order) lines?.setOrder(restored.order);
@@ -52,7 +53,8 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 	const value = (name) => name in draft ? draft[name] : ["boolean", "file"].includes(model.fields[name].type) ? stored.record[name] : toDraft(stored.record[name]);
 	const change = (name, next) => {
 		setErrors((current) => without(current, name));
-		setDraft((current) => differs(model.fields[name], next, stored.record[name]) ? {
+		const typed = typeof next === "string" ? next !== toDraft(stored.record[name]) : differs(model.fields[name], next, stored.record[name]);
+		setDraft((current) => typed ? {
 			...current,
 			[name]: next
 		} : without(current, name));
@@ -71,7 +73,7 @@ const useRecordEditor = ({ model, stored, recordKey, mode, subject, draftKey, li
 		setDraft(keep);
 		setConflicts(theirs);
 	};
-	const patchOf = () => Object.fromEntries(Object.entries(draft).map(([name, entry]) => [name, toPatchValue(model.fields[name], entry)]));
+	const patchOf = () => Object.fromEntries(changed.map(([name, entry]) => [name, toPatchValue(model.fields[name], entry)]));
 	const fieldErrors = (error) => isApiError(error) ? Object.fromEntries(error.errors.flatMap((entry) => entry.field ? [[entry.field, entry.message]] : [])) : {};
 	const saveRecordOnly = async () => {
 		try {

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

@@ -1,3 +1,4 @@
+import "../primitives/route-link.js";
 import "./bottom-bar.js";
 import "./nav.js";
 import "./profile-menu.js";

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

@@ -2,14 +2,14 @@ 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 { PageScrollContext, usePageInsets } from "./page-scroll.js";
+import { PageScrollContext, usePageGutter, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
 import { TopBar } from "./top-bar.js";
 import { useEffect, useRef, 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, onSignIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -21,6 +21,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 	const topBarRef = useRef(null);
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
+	usePageGutter(pageScroll);
 	const sidebar = (mode, sticky = false) => /* @__PURE__ */ jsx(Sidebar, {
 		mode,
 		sticky,
@@ -33,7 +34,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, action
 		userMenu,
 		onNavigate,
 		onSignOut,
-		onSignIn,
+		signIn,
 		organizations,
 		roles,
 		theme

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

@@ -16,6 +16,22 @@ const usePageScroll = (on) => {
 		return () => set(void 0);
 	}, [set, on]);
 };
+/**
+* While the page scrolls, keeps room for its scrollbar whether or not the page overflows, where scrollbars take room
+* (Windows, Linux, or a Mac set to always show them). Otherwise a page whose height follows its width, such as the
+* cards, can be just too tall with the width without a scrollbar and short enough with the width beside one: the
+* scrollbar narrows the cards, they get shorter, the page fits, the scrollbar goes, they widen again, every frame.
+*/
+const usePageGutter = (on) => {
+	useLayoutEffect(() => {
+		if (!on) return;
+		const root = document.documentElement;
+		root.style.setProperty("scrollbar-gutter", "stable");
+		return () => {
+			root.style.removeProperty("scrollbar-gutter");
+		};
+	}, [on]);
+};
 const properties = [
 	"--pb-sticky-top",
 	"--pb-sticky-bottom",
@@ -54,4 +70,4 @@ const usePageInsets = (on, top, bottom, bottomShown) => {
 	]);
 };
 //#endregion
-export { PageScrollContext, usePageInsets, usePageScroll };
+export { PageScrollContext, usePageGutter, usePageInsets, usePageScroll };

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

@@ -1,2 +1,3 @@
+import "../primitives/route-link.js";
 import "./nav.js";
 import "./profile-menu.js";

package/dist/app-shell/sidebar.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
 import { ThemeSwitch } from "./theme-switch.js";
@@ -9,7 +10,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, 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, onSignIn, organizations, roles, theme, sticky }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -62,9 +63,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-[13px] text-muted-foreground md:min-h-0"
-					}), onSignIn && /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: onSignIn,
+					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {
+						to: signIn,
 						"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", {

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

@@ -1,6 +1,6 @@
 import { cn } from "../lib/cn.js";
-import { backTarget } from "./back-target.js";
 import { Breadcrumb, inApp } from "./breadcrumb.js";
+import { backTarget } from "./back-target.js";
 import { GlobalSearch } from "./global-search.js";
 import { useEffect, useRef, useState } from "react";
 import { ChevronLeft, Menu, Search, X } from "lucide-react";
@@ -25,7 +25,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 	}, [search]);
 	return /* @__PURE__ */ jsxs("header", {
 		ref,
-		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5"),
+		className: cn(sticky ? "sticky top-0 z-30" : "relative", "flex h-12 shrink-0 items-center gap-1 border-b bg-background pl-4 pr-2 md:gap-4 md:px-5"),
 		children: [
 			onMenu && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -33,7 +33,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				"aria-expanded": Boolean(menuOpen),
 				"aria-controls": menuControls,
 				onClick: onMenu,
-				className: cn(iconButton, "-ml-0.5"),
+				className: cn(iconButton, "-ml-3"),
 				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
 			}),
 			back && /* @__PURE__ */ jsx("a", {
@@ -44,7 +44,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 					event.preventDefault();
 					onNavigate(back.href);
 				},
-				className: cn(iconButton, !onMenu && "-ml-0.5"),
+				className: cn(iconButton, !onMenu && "-ml-3"),
 				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
 			}),
 			/* @__PURE__ */ jsx(Breadcrumb, {

package/dist/auth/auth-gate.js

@@ -11,7 +11,6 @@ import { ForgotPasswordPage } from "./forgot-password-page.js";
 import { ProviderSignInPage } from "./provider-sign-in-page.js";
 import { ResetPasswordPage } from "./reset-password-page.js";
 import { SetupRequiredPage } from "./setup-required-page.js";
-import { signInPath } from "./sign-in-address.js";
 import { SignInPage } from "./sign-in-page.js";
 import { SignUpPage } from "./sign-up-page.js";
 import { readStaffLink, withoutStaffLink } from "./staff-link.js";
@@ -22,6 +21,7 @@ import { readInvitationLink, withoutInvitationLink } from "../organizations/invi
 import { InvitationPage } from "../organizations/invitation-page.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { signInPath } from "@protobase/schema";
 //#region src/auth/auth-gate.tsx
 const firstPage = () => {
 	const href = window.location.href;
@@ -67,10 +67,11 @@ const Redirect = ({ to }) => {
 const AuthGate = ({ workspace, children }) => {
 	const { state, recheck, passwordReset, signOut, signInProviders, canSignUp, browse } = useAuth();
 	const { path, params, basePath, navigate } = useRouter();
-	const { address, next, open, leave } = useSignInAddress();
+	const { address, next, open, link, leave } = useSignInAddress();
 	const [page, setPage] = useState(firstPage);
 	const [codeEmail, setCodeEmail] = useState();
 	const [signUpEmail, setSignUpEmail] = useState();
+	const [signUpTicket, setSignUpTicket] = useState();
 	const href = new URL(`${basePath}${path}${params.size > 0 ? `?${params}` : ""}`, window.location.origin).href;
 	const forget = useCallback((without) => {
 		const below = without(href).slice(basePath.length);
@@ -87,6 +88,7 @@ const AuthGate = ({ workspace, children }) => {
 		if (page.kind === "provider-sign-in" || page.kind === "sign-in" && (page.notice || page.error || page.providerError)) setPage({ kind: "sign-in" });
 		setCodeEmail(void 0);
 		setSignUpEmail(void 0);
+		setSignUpTicket(void 0);
 	}, [
 		entered,
 		page,
@@ -161,7 +163,7 @@ const AuthGate = ({ workspace, children }) => {
 			forget(withoutInvitationLink);
 			setPage({ kind: "sign-in" });
 		},
-		onSignIn: () => open()
+		signIn: link()
 	});
 	if (state.kind === "signed-in") return children;
 	if (state.kind === "two-factor") return /* @__PURE__ */ jsx(TwoFactorPage, {
@@ -184,25 +186,32 @@ const AuthGate = ({ workspace, children }) => {
 		"forgot-password": passwordReset,
 		"email-code": codeEmail !== void 0,
 		"sign-up": canSignUp,
-		"sign-up-code": canSignUp && signUpEmail !== void 0
+		"sign-up-code": canSignUp && signUpEmail !== void 0,
+		"sign-up-details": canSignUp && signUpTicket !== void 0
 	}[address.step] ? address.step : "sign-in";
 	const backTo = (target) => () => open(target, { replace: true });
 	const onBrowse = browse && (() => {
 		browse();
 		leave();
 	});
-	if (step === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: backTo("sign-in") });
+	if (step === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { back: link("sign-in", { replace: true }) });
 	if (step === "email-code") return /* @__PURE__ */ jsx(EmailCodePage, {
 		email: codeEmail,
 		onBack: backTo("sign-in")
 	});
-	if (step === "sign-up" || step === "sign-up-code") return /* @__PURE__ */ jsx(SignUpPage, {
+	if (step === "sign-up" || step === "sign-up-code" || step === "sign-up-details") return /* @__PURE__ */ jsx(SignUpPage, {
 		workspace,
-		email: step === "sign-up-code" ? signUpEmail : void 0,
+		email: step === "sign-up" ? void 0 : signUpEmail,
+		ticket: step === "sign-up-details" ? signUpTicket : void 0,
 		onCodeSent: (email) => {
 			setSignUpEmail(email);
+			setSignUpTicket(void 0);
 			open("sign-up-code");
 		},
+		onVerified: (ticket) => {
+			setSignUpTicket(ticket);
+			open("sign-up-details", { replace: true });
+		},
 		onBack: backTo("sign-up"),
 		onSignIn: () => open("sign-in"),
 		onBrowse
@@ -213,12 +222,12 @@ const AuthGate = ({ workspace, children }) => {
 		workspace,
 		notice: signIn.notice,
 		error,
-		onForgotPassword: passwordReset ? () => open("forgot-password") : void 0,
+		forgotPassword: passwordReset ? link("forgot-password") : void 0,
 		onCodeSent: (email) => {
 			setCodeEmail(email);
 			open("email-code");
 		},
-		onSignUp: canSignUp ? () => open("sign-up") : void 0,
+		signUp: canSignUp ? link("sign-up") : void 0,
 		onBrowse
 	}, error);
 };

package/dist/auth/auth-provider.js

@@ -86,6 +86,7 @@ const AuthProvider = ({ session: given, children }) => {
 		sendSignInCode: (email) => session.sendSignInCode(email),
 		signInWithCode: async (email, code) => finish(await session.signInWithCode(email, code)),
 		sendSignUpCode: (email) => session.sendSignUpCode(email),
+		verifySignUpCode: (email, code) => session.verifySignUpCode(email, code),
 		signUp: async (input) => enter(await session.signUp(input)),
 		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),