@protobase/ui 0.0.0-stage → 0.1.1

package/dist/assistant-dock/plan-card.js

@@ -0,0 +1,133 @@
+import { Badge } from "../primitives/badge.js";
+import { Button } from "../primitives/button.js";
+import { approval, approveLabel, formatCredits, waitingText } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, GitBranch, ListChecks } from "lucide-react";
+//#region src/assistant-dock/plan-card.tsx
+const statusNote = {
+	awaiting: void 0,
+	approved: "Approved. The credits are held until the change is live.",
+	canceled: "Canceled. The 1-credit deposit was kept.",
+	superseded: "Replaced by a newer plan.",
+	dropped: "The repository changed, so this plan was dropped and the deposit refunded."
+};
+const PlanCard = ({ plan, balance, onApprove, onRequestChanges, onCancel, onUpdatePlan }) => {
+	const approve = approval(plan, balance);
+	const awaiting = plan.status === "awaiting";
+	const waiting = awaiting ? waitingText(plan.waiting) : void 0;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": `Plan, revision ${plan.revision}`,
+		className: "shrink-0 overflow-hidden rounded-lg border border-primary-border bg-background shadow-sm",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex items-center gap-2 bg-primary-soft px-3 py-2",
+			children: [
+				/* @__PURE__ */ jsx(ListChecks, { className: "size-3.5 text-primary-text" }),
+				/* @__PURE__ */ jsxs("h3", {
+					className: "flex-1 text-[13px] font-semibold text-primary-text",
+					children: ["Plan", plan.revision > 1 && `, revision ${plan.revision}`]
+				}),
+				/* @__PURE__ */ jsxs(Badge, {
+					tone: "blue",
+					dot: false,
+					children: ["Size ", plan.size]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-primary-text",
+					children: formatCredits(plan.credits)
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2.5 px-3 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px]",
+					children: plan.summary
+				}),
+				plan.steps.length > 0 && /* @__PURE__ */ jsx("ol", {
+					className: "list-decimal space-y-1 pl-5 text-xs text-muted-foreground",
+					children: plan.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step.title }, step.title))
+				}),
+				plan.migrations.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs font-semibold",
+						children: "Database changes"
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-1",
+						children: plan.migrations.map((migration) => /* @__PURE__ */ jsxs("li", {
+							className: "flex items-start gap-2 text-xs",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 flex-1",
+								children: migration.description
+							}), migration.destructive && /* @__PURE__ */ jsx(Badge, {
+								tone: "red",
+								children: "Destructive"
+							})]
+						}, migration.description))
+					})]
+				}),
+				plan.risks.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "space-y-1",
+					children: plan.risks.map((risk) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-start gap-2 text-xs text-warning-text",
+						children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3 shrink-0" }), risk]
+					}, risk))
+				}),
+				awaiting && plan.outdated && /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "flex items-start gap-2 rounded-md bg-warning-soft px-2.5 py-2 text-xs text-warning-text",
+					children: [/* @__PURE__ */ jsx(GitBranch, { className: "mt-0.5 size-3 shrink-0" }), "The branch moved on GitHub since this plan was made. Approving runs it on the new code."]
+				}),
+				waiting && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [waiting, " Cancel frees the queue."]
+				}),
+				statusNote[plan.status] && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: statusNote[plan.status]
+				}),
+				awaiting && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2 pt-0.5",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							className: "w-full",
+							disabled: !approve.enabled,
+							onClick: () => onApprove?.(plan.taskId),
+							children: approveLabel(plan)
+						}),
+						approve.reason && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-danger-text",
+							children: approve.reason
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [
+								plan.outdated && /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									className: "flex-1",
+									onClick: () => onUpdatePlan?.(plan.taskId),
+									children: "Update plan"
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									className: "flex-1",
+									onClick: () => onRequestChanges?.(plan.taskId),
+									children: "Ask for changes"
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									variant: "ghost",
+									onClick: () => onCancel?.(plan.taskId),
+									children: "Cancel"
+								})
+							]
+						})
+					]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PlanCard };

package/dist/assistant-dock/progress-card.js

@@ -0,0 +1,18 @@
+import { StepList } from "../assistant-panel/step-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/assistant-dock/progress-card.tsx
+const titles = {
+	planning: "Planning",
+	running: "Making the change"
+};
+/** What the planning run or the job is doing, step by step. */
+const ProgressCard = ({ phase, steps }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": titles[phase],
+	className: "shrink-0 space-y-2 rounded-lg border border-border-strong bg-background px-3 py-2.5 shadow-sm",
+	children: [/* @__PURE__ */ jsx("h3", {
+		className: "text-xs font-semibold",
+		children: titles[phase]
+	}), /* @__PURE__ */ jsx(StepList, { steps })]
+});
+//#endregion
+export { ProgressCard };

package/dist/assistant-dock/query-card.js

@@ -0,0 +1,52 @@
+import { formatCell } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Database } from "lucide-react";
+//#region src/assistant-dock/query-card.tsx
+/** A read-only query the chat ran, with its rows as a table. */
+const QueryCard = ({ query }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": "Query result",
+	className: "shrink-0 overflow-hidden rounded-lg border border-border-strong bg-background shadow-sm",
+	children: [
+		/* @__PURE__ */ jsxs("header", {
+			className: "flex items-start gap-2 bg-surface px-3 py-2",
+			children: [/* @__PURE__ */ jsx(Database, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("code", {
+				className: "min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[11px] text-foreground",
+				children: query.sql
+			})]
+		}),
+		query.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "px-3 py-2 text-xs text-muted-foreground",
+			children: "No rows."
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "max-h-64 overflow-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse text-left text-[11px]",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "sticky top-0 bg-background",
+					children: /* @__PURE__ */ jsx("tr", { children: query.columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						className: "border-b border-border px-2 py-1 font-semibold whitespace-nowrap",
+						children: column
+					}, column)) })
+				}), /* @__PURE__ */ jsx("tbody", { children: query.rows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					className: "border-b border-border last:border-b-0",
+					children: row.map((value, column) => /* @__PURE__ */ jsx("td", {
+						className: value === null ? "px-2 py-1 whitespace-nowrap text-faint-foreground" : "px-2 py-1 whitespace-nowrap",
+						children: formatCell(value)
+					}, column))
+				}, index)) })]
+			})
+		}),
+		/* @__PURE__ */ jsxs("footer", {
+			className: "border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground",
+			children: [
+				query.rows.length,
+				" ",
+				query.rows.length === 1 ? "row" : "rows",
+				query.truncated && ", cut off at the limit"
+			]
+		})
+	]
+});
+//#endregion
+export { QueryCard };

package/dist/assistant-dock/queue-card.js

@@ -0,0 +1,31 @@
+import { Button } from "../primitives/button.js";
+import { queueText } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
+//#region src/assistant-dock/queue-card.tsx
+/** A task waiting in the app's queue, with its deposit billed. */
+const QueueCard = ({ taskId, request, ahead, waitingOnPlan, onCancel }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": "Queued change",
+	className: "flex shrink-0 items-start gap-2.5 rounded-lg border border-border-strong bg-background px-3 py-2.5 shadow-sm",
+	children: [
+		/* @__PURE__ */ jsx(Clock, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 space-y-0.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "truncate text-[13px] font-medium",
+				children: request
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-muted-foreground",
+				children: queueText(ahead, waitingOnPlan)
+			})]
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => onCancel?.(taskId),
+			children: "Cancel"
+		})
+	]
+});
+//#endregion
+export { QueueCard };

package/dist/assistant-dock/result-card.js

@@ -0,0 +1,77 @@
+import { cn } from "../lib/cn.js";
+import { formatCredits } from "./model.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX, GitCommitHorizontal } from "lucide-react";
+//#region src/assistant-dock/result-card.tsx
+const headings = {
+	live: "Live now",
+	failed: "The change failed",
+	capped: "The change hit its limit"
+};
+/** How a job ended: live with its commit, or failed or capped at no cost, with the database changes that stay live. */
+const ResultCard = ({ result }) => {
+	const live = result.outcome === "live";
+	const Icon = live ? CircleCheck : CircleX;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": headings[result.outcome],
+		className: cn("shrink-0 overflow-hidden rounded-lg border bg-background shadow-sm", live ? "border-success/40" : "border-danger/40"),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: cn("flex items-center gap-2 px-3 py-2", live ? "bg-success-soft text-success-text" : "bg-danger-soft text-danger-text"),
+			children: [
+				/* @__PURE__ */ jsx(Icon, { className: "size-3.5" }),
+				/* @__PURE__ */ jsx("h3", {
+					className: "flex-1 text-[13px] font-semibold",
+					children: headings[result.outcome]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium",
+					children: live ? formatCredits(result.credits) : "No charge"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2.5 px-3 py-2.5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px]",
+					children: result.summary
+				}),
+				result.commit && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(GitCommitHorizontal, { className: "size-3.5" }), result.commit.url ? /* @__PURE__ */ jsx("a", {
+						className: "font-mono text-primary-text hover:underline",
+						href: result.commit.url,
+						target: "_blank",
+						rel: "noreferrer",
+						children: result.commit.sha.slice(0, 7)
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: result.commit.sha.slice(0, 7)
+					})]
+				}),
+				result.keptOnBranch && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"GitHub did not accept the push. The code is kept on the branch ",
+						/* @__PURE__ */ jsx("code", {
+							className: "font-mono",
+							children: result.keptOnBranch
+						}),
+						"."
+					]
+				}),
+				result.dbChanges.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs font-semibold",
+						children: live ? "Database changes" : "Database changes that stay live"
+					}), /* @__PURE__ */ jsx("ul", {
+						className: "space-y-0.5 font-mono text-[11px] text-muted-foreground",
+						children: result.dbChanges.map((change) => /* @__PURE__ */ jsx("li", { children: change }, change))
+					})]
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ResultCard };

package/dist/assistant-panel/content.d.ts

@@ -0,0 +1,7 @@
+//#region src/assistant-panel/content.d.ts
+export type StepState = 'done' | 'running' | 'failed';
+export type Step = {
+  label: string;
+  state: StepState;
+};
+//#endregion

package/dist/assistant-panel/step-list.js

@@ -0,0 +1,30 @@
+import { cn } from "../lib/cn.js";
+import { Spinner } from "../primitives/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+//#region src/assistant-panel/step-list.tsx
+const StepList = ({ steps }) => /* @__PURE__ */ jsx("ul", {
+	className: "shrink-0 space-y-2",
+	children: steps.map((step) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-start gap-2.5 text-[13px]",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "mt-0.5 flex size-4 shrink-0 items-center justify-center",
+			children: [
+				step.state === "running" && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5 text-primary" }),
+				step.state === "done" && /* @__PURE__ */ jsx(Check, {
+					className: "size-3.5 text-success",
+					strokeWidth: 2.5
+				}),
+				step.state === "failed" && /* @__PURE__ */ jsx(X, {
+					className: "size-3.5 text-danger",
+					strokeWidth: 2.5
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(step.state === "running" ? "text-foreground" : "text-muted-foreground", step.state === "failed" && "text-danger-text"),
+			children: step.label
+		})]
+	}, step.label))
+});
+//#endregion
+export { StepList };

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,71 @@
+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 [socialProviders, setSocialProviders] = useState([]);
+	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);
+			setSocialProviders(status.socialProviders);
+			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,
+		socialProviders,
+		markSignedOut,
+		recheck,
+		signIn: async (email, password) => {
+			setState({
+				kind: "signed-in",
+				user: await session.signIn(email, password)
+			});
+		},
+		signInSocial: async (provider) => {
+			window.location.assign(await session.signInSocial(provider, window.location.href));
+		},
+		signOut: async () => {
+			await session.signOut();
+			setState({ kind: "signed-out" });
+		}
+	}), [
+		state,
+		session,
+		passwordReset,
+		socialProviders,
+		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 };