@protobase/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,94 @@
+import { cn } from "../lib/cn.js";
+import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
+import { SidebarItem } from "./sidebar-item.js";
+import { StatusDot } from "./status-dot.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/app-shell/sidebar-group.tsx
+const row = {
+	"text-large": "h-8 gap-2.5 px-2.5 text-[13px]",
+	"text-small": "h-7 gap-2 px-2 text-xs"
+};
+/** Lines the records up under the entry's icon. */
+const indent = {
+	"text-large": "ml-[20px]",
+	"text-small": "ml-[17px]"
+};
+/**
+* A sidebar entry with a few of its records under it. The label opens the list, the chevron shows or hides the
+* records (remembered in this browser), and "View all" at the end opens the list too.
+*/
+const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
+	const storageKey = navOpenStorageKey(item.id);
+	const [open, setOpen] = useState(() => readNavOpen(localStorage, storageKey));
+	const listId = useId();
+	const href = item.href ?? `#${item.id}`;
+	const toggle = () => {
+		writeNavOpen(localStorage, storageKey, !open);
+		setOpen(!open);
+	};
+	const link = (to) => ({
+		href: to,
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(to);
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-0.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(SidebarItem, {
+				item,
+				mode,
+				active,
+				onNavigate,
+				className: "pr-8"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-expanded": open,
+				"aria-controls": listId,
+				"aria-label": `Recent ${item.label.toLowerCase()}`,
+				onClick: toggle,
+				className: "absolute right-1 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") })
+			})]
+		}), open && /* @__PURE__ */ jsxs("ul", {
+			id: listId,
+			"aria-label": `Recent ${item.label.toLowerCase()}`,
+			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
+			children: [
+				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
+					className: cn("flex items-center text-faint-foreground", row[mode]),
+					children: "Loading..."
+				}),
+				recent.state === "error" && /* @__PURE__ */ jsx("li", {
+					className: cn("flex items-center text-faint-foreground", row[mode]),
+					children: "Could not load"
+				}),
+				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+					...link(record.href),
+					"aria-label": `${record.label}, ${record.status}`,
+					title: `${record.label} (${record.status})`,
+					"aria-current": record.active ? "page" : void 0,
+					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", row[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					children: [/* @__PURE__ */ jsx(StatusDot, {
+						tone: record.tone,
+						pulse: record.pulse
+					}), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: record.label
+					})]
+				}) }, record.id)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					...link(href),
+					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", row[mode]),
+					children: "View all"
+				}) })
+			]
+		})]
+	});
+};
+//#endregion
+export { SidebarGroup };

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

@@ -0,0 +1,46 @@
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "../primitives/tooltip.js";
+import { isTextMode, showsLabelInline } from "./sidebar-mode.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-item.tsx
+const layout = {
+	"text-large": "h-9 gap-3 px-3 text-sm",
+	"text-small": "h-7 gap-2.5 px-2.5 text-xs",
+	icon: "size-9 justify-center",
+	"icon-label": "w-full flex-col gap-0.5 py-1.5 text-[10px]",
+	"icon-tooltip": "size-9 justify-center",
+	"icon-expand": "h-8 gap-3 px-3 text-[13px]"
+};
+const SidebarItem = ({ item, mode, active, onNavigate, className }) => {
+	const Icon = item.icon;
+	const button = /* @__PURE__ */ jsxs("a", {
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(item.href ?? `#${item.id}`);
+		}),
+		href: item.href ?? `#${item.id}`,
+		"aria-label": item.label,
+		"aria-current": active ? "page" : void 0,
+		className: cn("flex shrink-0 items-center rounded-md font-medium transition-colors", layout[mode], active ? "bg-primary-soft text-primary-text" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				className: cn("shrink-0", mode === "text-small" ? "size-4" : "size-[18px]"),
+				strokeWidth: active ? 2.2 : 1.9
+			}),
+			(showsLabelInline(mode) || mode === "icon-label") && /* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap",
+				children: item.label
+			}),
+			isTextMode(mode) && item.count && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto rounded bg-muted px-1.5 text-[11px] tabular-nums text-muted-foreground",
+				children: item.count
+			})
+		]
+	});
+	return mode === "icon-tooltip" ? /* @__PURE__ */ jsx(Tooltip, {
+		label: item.label,
+		children: button
+	}) : button;
+};
+//#endregion
+export { SidebarItem };

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

@@ -0,0 +1,4 @@
+//#region src/app-shell/sidebar-mode.d.ts
+export declare const sidebarModes: readonly ["text-large", "text-small", "icon", "icon-label", "icon-tooltip", "icon-expand"];
+export type SidebarMode = (typeof sidebarModes)[number];
+//#endregion

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

@@ -0,0 +1,13 @@
+//#region src/app-shell/sidebar-mode.ts
+const showsLabelInline = (mode) => mode === "text-large" || mode === "text-small" || mode === "icon-expand";
+const isTextMode = (mode) => mode === "text-large" || mode === "text-small";
+const sidebarWidth = {
+	"text-large": "w-60",
+	"text-small": "w-52",
+	icon: "w-14",
+	"icon-label": "w-[76px]",
+	"icon-tooltip": "w-14",
+	"icon-expand": "w-14"
+};
+//#endregion
+export { isTextMode, showsLabelInline, sidebarWidth };

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

@@ -0,0 +1,2 @@
+import "./nav.js";
+import "./profile-menu.js";

package/dist/app-shell/sidebar.js

@@ -0,0 +1,64 @@
+import { cn } from "../lib/cn.js";
+import { Logo } from "./logo.js";
+import { navGroups } from "./nav.js";
+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 { 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 }) => {
+	const expanding = mode === "icon-expand";
+	const expanded = expanding && forceExpanded;
+	const inline = isTextMode(mode) || expanding;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Resources",
+		className: cn("relative z-30 shrink-0", sidebarWidth[mode]),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("group/side absolute inset-y-0 left-0 flex flex-col overflow-hidden border-r bg-sidebar", expanding ? "w-14 transition-[width,box-shadow] duration-150 hover:w-60 hover:shadow-pop focus-within:w-60 focus-within:shadow-pop" : "w-full", expanded && "w-60 shadow-pop"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex h-12 shrink-0 items-center px-3.5", mode === "icon-label" && "justify-center px-0"),
+					children: /* @__PURE__ */ jsx(Logo, {
+						showName: isTextMode(mode) || expanding,
+						workspace
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex-1 overflow-y-auto overflow-x-hidden pb-2", mode === "icon-label" ? "px-2" : "px-2"),
+					children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-col gap-0.5", index > 0 && "mt-3"),
+						children: [inline ? /* @__PURE__ */ jsx("div", {
+							className: cn("px-3 pb-1 pt-1 text-[11px] font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
+							children: group.label
+						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
+							item,
+							recent: item.recent,
+							mode,
+							active: item.id === activeItem,
+							onNavigate
+						}, item.id) : /* @__PURE__ */ jsx(SidebarItem, {
+							item,
+							mode,
+							active: item.id === activeItem,
+							onNavigate
+						}, item.id))]
+					}, group.label))
+				}),
+				/* @__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, {
+						user,
+						compact: !inline,
+						open: profileMenuOpen,
+						items: userMenu,
+						onNavigate,
+						onSignOut
+					})
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Sidebar };

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

@@ -0,0 +1 @@
+import "@protobase/schema";

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

@@ -0,0 +1,20 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/status-dot.tsx
+const colour = {
+	neutral: "bg-faint-foreground",
+	info: "bg-primary",
+	success: "bg-success",
+	warning: "bg-warning",
+	danger: "bg-danger"
+};
+/** A record's status as a coloured dot; `pulse` animates a ring around it for states in progress (still under reduced motion). */
+const StatusDot = ({ tone, pulse = false, className }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": true,
+	className: cn("relative flex size-2 shrink-0", className),
+	"data-tone": tone,
+	"data-pulse": pulse || void 0,
+	children: [pulse && /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:animate-none", colour[tone]) }), /* @__PURE__ */ jsx("span", { className: cn("relative size-2 rounded-full", colour[tone]) })]
+});
+//#endregion
+export { StatusDot };

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

@@ -0,0 +1,82 @@
+import { cn } from "../lib/cn.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { GlobalSearch } from "./global-search.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Search, X } from "lucide-react";
+//#region src/app-shell/top-bar.tsx
+const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
+const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search }) => {
+	const [searchOpen, setSearchOpen] = useState(false);
+	const desktopSearch = useRef(null);
+	useEffect(() => {
+		if (!search) return;
+		const onKey = (event) => {
+			if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey)) return;
+			event.preventDefault();
+			const input = desktopSearch.current;
+			if (input && input.offsetParent !== null) input.focus();
+			else setSearchOpen(true);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [search]);
+	return /* @__PURE__ */ jsxs("header", {
+		className: "relative flex h-12 shrink-0 items-center gap-1 border-b bg-background px-2 md:gap-4 md:px-5",
+		children: [
+			onMenu && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Open navigation",
+				"aria-expanded": Boolean(menuOpen),
+				"aria-controls": menuControls,
+				onClick: onMenu,
+				className: cn(iconButton, "-ml-0.5"),
+				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+			}),
+			/* @__PURE__ */ jsx(Breadcrumb, {
+				parts: breadcrumb,
+				onNavigate
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-1 md:gap-3",
+				children: [search && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					className: "hidden md:block",
+					children: /* @__PURE__ */ jsx(GlobalSearch, {
+						ref: desktopSearch,
+						search
+					})
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Search",
+					"aria-expanded": searchOpen,
+					onClick: () => setSearchOpen(true),
+					className: iconButton,
+					children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
+				})] }), actions]
+			}),
+			search && searchOpen && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 z-20 flex items-center gap-1 bg-background px-3 md:hidden",
+				children: [/* @__PURE__ */ jsx(GlobalSearch, {
+					className: "min-w-0 flex-1",
+					autoFocus: true,
+					showShortcut: false,
+					search: {
+						...search,
+						onSelect: (href) => {
+							search.onSelect(href);
+							setSearchOpen(false);
+						}
+					}
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close search",
+					onClick: () => setSearchOpen(false),
+					className: iconButton,
+					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { TopBar };

package/dist/auth/auth-gate.js

@@ -0,0 +1,70 @@
+import { Spinner } from "../primitives/spinner.js";
+import { useAuth } from "./auth-provider.js";
+import { Button } from "../primitives/button.js";
+import { FirstRunPage } from "./first-run-page.js";
+import { readResetLink, withoutResetLink } from "./reset-link.js";
+import { ForgotPasswordPage } from "./forgot-password-page.js";
+import { ResetPasswordPage } from "./reset-password-page.js";
+import { SignInPage } from "./sign-in-page.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/auth-gate.tsx
+const firstPage = () => {
+	const link = readResetLink(window.location.href);
+	return link ? {
+		kind: "reset-password",
+		token: link.token
+	} : { kind: "sign-in" };
+};
+const forgetResetLink = () => window.history.replaceState(window.history.state, "", withoutResetLink(window.location.href));
+/** Shows the app when the user is signed in (or the server has no login), and the right page otherwise. */
+const AuthGate = ({ workspace, children }) => {
+	const { state, recheck, passwordReset, signOut } = useAuth();
+	const [page, setPage] = useState(firstPage);
+	useEffect(() => {
+		if (state.kind === "signed-in") setPage((current) => current.kind === "sign-in" && current.notice ? { kind: "sign-in" } : current);
+	}, [state.kind]);
+	const leaveResetPage = (next) => {
+		forgetResetLink();
+		setPage(next);
+	};
+	const passwordChanged = async () => {
+		if (state.kind === "signed-in") await signOut();
+		leaveResetPage({
+			kind: "sign-in",
+			notice: "Your password is changed. Sign in with the new one."
+		});
+	};
+	switch (state.kind) {
+		case "loading": return /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-48 items-center justify-center gap-2 text-[13px] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		});
+		case "error": return /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full min-h-48 flex-col items-center justify-center gap-3 p-8 text-center",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: ["Cannot reach the server: ", state.message]
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: recheck,
+				children: "Try again"
+			})]
+		});
+		case "needs-admin": return /* @__PURE__ */ jsx(FirstRunPage, { onCheckAgain: recheck });
+	}
+	if (page.kind === "reset-password") return /* @__PURE__ */ jsx(ResetPasswordPage, {
+		token: page.token,
+		onDone: () => void passwordChanged(),
+		onRequestNewLink: passwordReset ? () => leaveResetPage({ kind: "forgot-password" }) : void 0,
+		onBack: () => leaveResetPage({ kind: "sign-in" })
+	});
+	if (state.kind === "signed-in") return children;
+	if (page.kind === "forgot-password") return /* @__PURE__ */ jsx(ForgotPasswordPage, { onBack: () => setPage({ kind: "sign-in" }) });
+	return /* @__PURE__ */ jsx(SignInPage, {
+		workspace,
+		notice: page.notice,
+		onForgotPassword: passwordReset ? () => setPage({ kind: "forgot-password" }) : void 0
+	});
+};
+//#endregion
+export { AuthGate };

package/dist/auth/auth-layout.js

@@ -0,0 +1,29 @@
+import { LogoMark } from "../app-shell/logo.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/auth-layout.tsx
+/** The frame of the sign-in and first-run pages: logo, title and a card. */
+const AuthLayout = ({ title, description, children }) => /* @__PURE__ */ jsx("div", {
+	className: "flex min-h-full w-full items-center justify-center bg-surface px-4 py-10",
+	children: /* @__PURE__ */ jsxs("div", {
+		className: "w-full max-w-sm",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-6 flex flex-col items-center text-center",
+			children: [
+				/* @__PURE__ */ jsx(LogoMark, { className: "size-10" }),
+				/* @__PURE__ */ jsx("h1", {
+					className: "mt-4 text-xl font-semibold tracking-tight",
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-[13px] text-muted-foreground",
+					children: description
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "rounded-lg border bg-background p-5 shadow-sm",
+			children
+		})]
+	})
+});
+//#endregion
+export { AuthLayout };

package/dist/auth/auth-provider.js

@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createAuthSession } from "@protobase/client";
+//#region src/auth/auth-provider.tsx
+const AuthContext = createContext(null);
+const useAuth = () => {
+	const api = useContext(AuthContext);
+	if (!api) throw new Error("useAuth must be used inside AuthProvider");
+	return api;
+};
+/** Finds out whether the server has a login and who is signed in, and keeps that state for the app. */
+const AuthProvider = ({ session: given, children }) => {
+	const [state, setState] = useState({ kind: "loading" });
+	const [passwordReset, setPasswordReset] = useState(false);
+	const markSignedOut = useCallback(() => setState((current) => current.kind === "signed-in" ? { kind: "signed-out" } : current), []);
+	const signedOut = useRef(markSignedOut);
+	signedOut.current = markSignedOut;
+	const session = useMemo(() => given ?? createAuthSession({ onSignedOut: () => signedOut.current() }), [given]);
+	const recheck = useCallback(() => {
+		setState({ kind: "loading" });
+		session.status().then(async (status) => {
+			setPasswordReset(status.passwordReset);
+			if (status.needsAdmin) return setState({ kind: "needs-admin" });
+			const user = await session.session();
+			setState(user ? {
+				kind: "signed-in",
+				user
+			} : { kind: "signed-out" });
+		}, (error) => setState({
+			kind: "error",
+			message: error instanceof Error ? error.message : "The server did not answer"
+		}));
+	}, [session]);
+	useEffect(recheck, [recheck]);
+	const api = useMemo(() => ({
+		state,
+		session,
+		passwordReset,
+		markSignedOut,
+		recheck,
+		signIn: async (email, password) => {
+			setState({
+				kind: "signed-in",
+				user: await session.signIn(email, password)
+			});
+		},
+		signOut: async () => {
+			await session.signOut();
+			setState({ kind: "signed-out" });
+		}
+	}), [
+		state,
+		session,
+		passwordReset,
+		markSignedOut,
+		recheck
+	]);
+	return /* @__PURE__ */ jsx(AuthContext.Provider, {
+		value: api,
+		children
+	});
+};
+//#endregion
+export { AuthProvider, useAuth };

package/dist/auth/first-run-page.js

@@ -0,0 +1,51 @@
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+//#region src/auth/first-run-page.tsx
+const createAdminCommand = "protobase users create you@example.com";
+/**
+* Shown while the admin store has no user. Accounts are not created over the web (a fresh URL must not be claimable
+* by whoever reaches it first), so this says how to create the first admin on the host.
+*/
+const FirstRunPage = ({ command = createAdminCommand, onCheckAgain, busy }) => {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "No admin yet",
+		description: "This Protobase has no users to sign in with.",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: "Run this in the terminal where Protobase runs, then reload. The first admin is created on the server, not in the browser, so nobody else can claim a fresh URL."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex items-center gap-2 rounded-md border bg-surface py-1.5 pl-3 pr-1.5",
+				children: [/* @__PURE__ */ jsx("code", {
+					className: "min-w-0 flex-1 break-all font-mono text-xs",
+					children: command
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Copy command",
+					onClick: () => {
+						navigator.clipboard.writeText(command).then(() => {
+							setCopied(true);
+							setTimeout(() => setCopied(false), 2e3);
+						});
+					},
+					className: "inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted pointer-coarse:size-11",
+					children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "mt-4 min-h-10 w-full",
+				loading: busy,
+				onClick: onCheckAgain,
+				children: "Reload"
+			})
+		]
+	});
+};
+//#endregion
+export { FirstRunPage, createAdminCommand };

package/dist/auth/forgot-password-form.js

@@ -0,0 +1,75 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { AuthLayout } from "./auth-layout.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/forgot-password-form.tsx
+const ForgotPasswordForm = ({ onSubmit, onBack, busy, error, sentTo }) => {
+	const [email, setEmail] = useState("");
+	if (sentTo) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Check your email",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: [
+				"If ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: sentTo
+				}),
+				" has an account, an email with a link to choose a new password is on its way. The link works once, for a limited time."
+			]
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			className: "mt-4 min-h-10 w-full",
+			onClick: onBack,
+			children: "Back to sign in"
+		})]
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Reset your password",
+		description: "We email you a link to choose a new one.",
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim());
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						autoComplete: "username",
+						required: true,
+						autoFocus: true,
+						value: email,
+						invalid: Boolean(error),
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Send reset link"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Back to sign in"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ForgotPasswordForm };

package/dist/auth/forgot-password-page.js

@@ -0,0 +1,35 @@
+import { useAuth } from "./auth-provider.js";
+import { ForgotPasswordForm } from "./forgot-password-form.js";
+import { resetLinkTarget } from "./reset-link.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AuthError } from "@protobase/client";
+//#region src/auth/forgot-password-page.tsx
+/** Asks the server to email a reset link that leads back to this page. */
+const ForgotPasswordPage = ({ onBack }) => {
+	const { session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [sentTo, setSentTo] = useState();
+	const submit = async (email) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await session.requestPasswordReset(email, resetLinkTarget(window.location.href));
+			setSentTo(email);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(failure.status === 429 ? "Too many requests. Wait a minute and try again." : failure.message);
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(ForgotPasswordForm, {
+		busy,
+		error,
+		sentTo,
+		onBack,
+		onSubmit: (email) => void submit(email)
+	});
+};
+//#endregion
+export { ForgotPasswordPage };