emdash-multisite 0.0.0-stage → 0.7.0

package/src/auth-ui.ts

@@ -0,0 +1,390 @@
+/**
+ * "Sites" tab for Better Auth UI: the signed-in user's sites inside the account page (`/account/sites`).
+ * Built with HeroUI v3 (the library Better Auth UI itself uses, so it looks like the sign-in and account pages) in plain words for
+ * people who are not technical: a card per site with a picture, Edit and View as the two main buttons, a four-step-feel create
+ * flow (pick what you want to make, name it, wait, "what next"), and a Change look view. See emdash-plan/product/multisite-onboarding-ux.md.
+ *
+ * Needs `emdash-better-auth` >= 0.10.0 (extension point for Better Auth UI plugins). In the host:
+ *
+ *   // astro.config.mjs
+ *   import { betterAuthUi } from "emdash-better-auth/vite";
+ *   vite: { plugins: [betterAuthUi({ plugins: "emdash-multisite/auth-ui" })] }
+ *
+ * It only calls this package's own JSON endpoints and Better Auth's organization/create. `@heroui/react` is a peer dependency of
+ * the host (the same copy Better Auth UI uses).
+ */
+// @ts-ignore - provided by the host (peer dependency)
+import { createAuthPlugin } from "@better-auth-ui/core";
+// @ts-ignore - provided by the host (peer dependency)
+import { Button, Card, Chip, Input, ProgressBar, Skeleton, buttonVariants } from "@heroui/react";
+// @ts-ignore - provided by the host (peer dependency)
+import * as React from "react";
+
+interface MySite {
+	slug: string;
+	name: string;
+	role: string;
+	theme: string | null;
+	themeId: string | null;
+	status: string;
+	state: "active" | "suspended";
+	url: string | null;
+	adminUrl: string | null;
+	canRetry: boolean;
+	error?: string;
+}
+interface Me {
+	sites: MySite[];
+	emailVerified: boolean;
+	themed: boolean;
+	staff: boolean;
+	owned: number;
+	max: number | null;
+	/** Active plan name (lowercased), or null for the free tier. */
+	plan: string | null;
+	/** Billing is on, so the Upgrade link resolves (otherwise /account/billing 404s). */
+	canUpgrade: boolean;
+}
+interface Look {
+	id: string;
+	name: string;
+	description: string;
+	pitch?: string;
+	preview?: string;
+	demoUrl?: string;
+	checklist?: Array<{ label: string; path: string }>;
+	current?: boolean;
+	adds?: string[];
+	hides?: string[];
+}
+
+const h = React.createElement;
+const grid = (min: number) => ({ display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${min}px, 1fr))`, gap: 16 }) as const;
+const muted = { opacity: 0.65, fontSize: 14, margin: 0 } as const;
+/** Display label for a plan name; null (no subscription) reads as "Free". */
+const planLabel = (plan: string | null): string => (plan ? plan.charAt(0).toUpperCase() + plan.slice(1) : "Free");
+const linkBtn = (variant: string) => buttonVariants({ variant });
+
+async function api(url: string, init: RequestInit = {}) {
+	const res = await fetch(url, { credentials: "same-origin", ...init, headers: { accept: "application/json", ...(init.headers as Record<string, string>) } });
+	let body: any = null;
+	try {
+		body = await res.json();
+	} catch {}
+	return { ok: res.ok, status: res.status, body };
+}
+const post = (url: string, data: unknown) =>
+	api(url, { method: "POST", headers: { "content-type": "application/json", "x-emdash-request": "1" }, body: JSON.stringify(data) });
+const slugify = (s: string) => s.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
+const qs = (key: string) => (typeof location !== "undefined" ? new URLSearchParams(location.search).get(key) : null);
+const clean = () => typeof history !== "undefined" && history.replaceState(null, "", location.pathname);
+/** Deep link into a site's own admin, through the one-click sign-in. */
+const adminLink = (slug: string, path: string) => `/sites/${slug}/open-admin?next=${encodeURIComponent(path)}`;
+
+/** A picture of a look (a screenshot of its demo). */
+function Shot(props: { look?: Look; height?: number }) {
+	const src = props.look?.preview;
+	return h("div", { style: { ...(props.height ? { height: props.height } : { aspectRatio: "16 / 10" }), overflow: "hidden", borderRadius: 10, background: "rgba(127,127,127,.12)" } },
+		src ? h("img", { src, alt: "", loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover", objectPosition: "top", display: "block" } }) : null);
+}
+
+/** Shimmer while data loads: same footprint as the real cards. */
+const bone = (cls: string) => h(Skeleton, { className: cls });
+function SitesSkeleton() {
+	return h("div", { "aria-hidden": true, style: { display: "grid", gap: 16 } },
+		h("div", { style: { display: "flex", justifyContent: "space-between" } }, bone("h-7 w-32 rounded-lg"), bone("h-9 w-24 rounded-full")),
+		h("div", { style: grid(300) }, ...[0, 1].map((i) => h(Card, { key: i }, h(Card.Content, { style: { display: "grid", gap: 10 } },
+			bone("h-[170px] w-full rounded-xl"), bone("h-5 w-40 rounded-lg"), bone("h-4 w-56 rounded-lg"), bone("h-9 w-32 rounded-full"))))));
+}
+function LookSkeleton() {
+	return h("div", { "aria-hidden": true, style: grid(220) }, ...[0, 1, 2, 3].map((i) => h("div", { key: i, style: { display: "grid", gap: 8 } }, bone("h-[130px] w-full rounded-xl"), bone("h-4 w-28 rounded-lg"), bone("h-3 w-40 rounded-lg"))));
+}
+
+/** Pick a look: big cards with a picture. Used by the create flow and by Change look. */
+function LookPicker(props: { looks: Look[]; value: string; onChange: (id: string) => void }) {
+	return h("div", { role: "radiogroup", "aria-label": "Look", style: grid(220) },
+		...props.looks.map((t) => {
+			const on = props.value === t.id;
+			return h("div", { key: t.id, style: { display: "grid", gap: 6 } },
+				h("button", { type: "button", role: "radio", "aria-checked": on, onClick: () => props.onChange(t.id),
+					style: { all: "unset", cursor: "pointer", display: "block", borderRadius: 14, outline: on ? "3px solid var(--accent, #2563eb)" : "1px solid rgba(127,127,127,.3)", outlineOffset: 2, padding: 8 } },
+					h(Shot, { look: t }),
+					h("div", { style: { padding: "8px 4px 2px" } },
+						h("strong", null, t.pitch ? t.pitch.split(":")[0] : t.name), t.current ? h(Chip, { size: "sm", color: "accent", variant: "soft", style: { marginLeft: 8 } }, "Current") : null,
+						h("p", { style: muted }, t.pitch?.includes(":") ? t.pitch.split(":").slice(1).join(":").trim() : t.description),
+						!t.current && (t.adds?.length || t.hides?.length)
+							? h("p", { style: { ...muted, fontSize: 12 } }, [t.adds?.length ? `Adds ${t.adds.join(", ")}` : "", t.hides?.length ? `hides ${t.hides.join(", ")}` : ""].filter(Boolean).join("; "))
+							: null)),
+				t.demoUrl ? h("a", { href: t.demoUrl, target: "_blank", rel: "noopener", style: { fontSize: 14, paddingLeft: 12 } }, "Preview \u2197") : null);
+		}));
+}
+
+const STEP_PERCENT: Record<string, number> = { queued: 8, tables: 35, content: 65, identity: 90, ready: 100 };
+const STEP_TEXT: Record<string, string> = {
+	queued: "Lots of people are building right now. You are next\u2026",
+	tables: "Creating your site\u2026",
+	content: "Adding your starter pages\u2026",
+	identity: "Setting up your account\u2026",
+};
+
+/** Create a site: pick what to make, name it, wait, then "what next". */
+function Wizard(props: { me: Me; looks: Look[]; onDone: () => void }) {
+	const { looks } = props;
+	const wanted = qs("theme");
+	const [look, setLook] = React.useState(looks.some((t) => t.id === wanted) ? (wanted as string) : looks[0]?.id ?? "");
+	const [step, setStep] = React.useState(looks.length > 1 && !wanted ? 1 : 2);
+	const [name, setName] = React.useState("");
+	const [slug, setSlug] = React.useState("");
+	const [touched, setTouched] = React.useState(false);
+	const [check, setCheck] = React.useState({ ok: false, text: "", url: "" });
+	const [error, setError] = React.useState("");
+	const [busy, setBusy] = React.useState(false);
+	const [progress, setProgress] = React.useState(null as null | { slug: string; name: string; step: string; status: string; error?: string });
+	const seq = React.useRef(0);
+	const chosen = looks.find((t) => t.id === look);
+	React.useEffect(() => {
+		if (!slug) return setCheck({ ok: false, text: "", url: "" });
+		setCheck({ ok: false, text: "Checking\u2026", url: "" });
+		const mine = ++seq.current;
+		const t = setTimeout(async () => {
+			const r = await api(`/api/multisite/slug-check?slug=${encodeURIComponent(slug)}`);
+			if (mine !== seq.current) return;
+			setCheck(r.body?.available ? { ok: true, text: `${(r.body.url ?? slug).replace(/^https?:\/\//, "")} is free`, url: r.body.url ?? "" } : { ok: false, text: r.body?.message ?? "That address is taken. Try another.", url: "" });
+		}, 300);
+		return () => clearTimeout(t);
+	}, [slug]);
+	React.useEffect(() => {
+		if (!progress || progress.status === "ready" || progress.status === "failed") return;
+		const t = setTimeout(async () => {
+			const r = await api(`/api/multisite/sites/${progress.slug}`);
+			if (r.ok && r.body) setProgress({ ...progress, status: r.body.status, step: r.body.step ?? progress.step, error: r.body.error });
+			else setProgress({ ...progress });
+		}, 1500);
+		return () => clearTimeout(t);
+	}, [progress]);
+
+	if (!props.me.emailVerified) return h("p", { role: "alert" }, "Please confirm your email address first. Then you can create your site.");
+	if (props.me.max !== null && props.me.owned >= props.me.max && !progress)
+		return h("p", { role: "alert" }, `Your plan includes ${props.me.max} site${props.me.max === 1 ? "" : "s"}, and you have ${props.me.owned}.`);
+
+	if (progress?.status === "failed")
+		return h(Card, null, h(Card.Content, { style: { display: "grid", gap: 10 } },
+			h("h2", { style: { margin: 0 } }, "That did not finish"),
+			h("p", { style: muted }, "Nothing is lost. Go to your sites and press Try again."),
+			h("div", null, h(Button, { variant: "primary", onPress: props.onDone }, "Go to my sites"))));
+	if (progress?.status === "ready") {
+		const base = chosen?.checklist ?? [];
+		return h(Card, null, h(Card.Content, { style: { display: "grid", gap: 14 } },
+			h("div", null, h("h2", { style: { margin: 0 } }, "Your site is live"), h("p", { style: muted }, progress.name)),
+			h("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
+				h("a", { href: adminLink(progress.slug, "/_emdash/admin"), target: "_blank", rel: "noopener", className: linkBtn("primary") }, "Edit my site"),
+				check.url ? h("a", { href: check.url, target: "_blank", rel: "noopener", className: linkBtn("secondary") }, "View my site") : null),
+			base.length
+				? h("div", { style: { display: "grid", gap: 8 } }, h("strong", null, "Get started"),
+						...base.map((c) => h("a", { key: c.path + c.label, href: adminLink(progress.slug, c.path), target: "_blank", rel: "noopener",
+							style: { border: "1px solid rgba(127,127,127,.3)", borderRadius: 12, padding: "10px 12px", textDecoration: "none", color: "inherit" } }, `${c.label} \u2192`)))
+				: null,
+			h("div", null, h(Button, { variant: "ghost", onPress: props.onDone }, "Back to my sites"))));
+	}
+	if (progress)
+		return h(Card, null, h(Card.Content, { style: { display: "grid", gap: 12 } },
+			h("h2", { style: { margin: 0 } }, `Building ${progress.name}\u2026`),
+			h(ProgressBar, { "aria-label": "Building your site", value: STEP_PERCENT[progress.step] ?? 20 }, h(ProgressBar.Track, null, h(ProgressBar.Fill, null))),
+			h("p", { role: "status", "aria-live": "polite", style: muted }, STEP_TEXT[progress.step] ?? "Almost there\u2026")));
+
+	if (step === 1)
+		return h("div", { style: { display: "grid", gap: 16 } },
+			h("div", null, h("p", { style: { ...muted, fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em" } }, "Step 1 of 2"),
+				h("h2", { style: { margin: 0 } }, "What do you want to make?"), h("p", { style: muted }, "Pick a look. You can change it later and your content stays.")),
+			h(LookPicker, { looks, value: look, onChange: setLook }),
+			h("div", { style: { display: "flex", gap: 8 } }, h(Button, { variant: "primary", onPress: () => setStep(2) }, "Continue"), h(Button, { variant: "ghost", onPress: props.onDone }, "Cancel")));
+
+	const submit = async (e: Event) => {
+		e.preventDefault();
+		if (!check.ok || !name.trim()) return;
+		setBusy(true);
+		setError("");
+		const r = await post("/api/auth/organization/create", { name: name.trim(), slug, ...(looks.length > 1 ? { metadata: { theme: look } } : {}) });
+		setBusy(false);
+		if (!r.ok) return setError(r.body?.message || r.body?.code || `Could not create the site (error ${r.status}).`);
+		clean();
+		setProgress({ slug, name: name.trim(), step: "tables", status: "provisioning" });
+	};
+	return h("form", { onSubmit: submit, style: { display: "grid", gap: 14, maxWidth: 520 } },
+		h("div", null, h("p", { style: { ...muted, fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em" } }, looks.length > 1 ? "Step 2 of 2" : "New site"),
+			h("h2", { style: { margin: 0 } }, "Name your site"), h("p", { style: muted }, chosen ? `Look: ${chosen.pitch?.split(":")[0] ?? chosen.name}` : "This is what visitors see. You can change it later.")),
+		h("label", { style: { display: "grid", gap: 4 } }, h("strong", null, "Site name"),
+			h(Input, { value: name, "aria-label": "Site name", placeholder: "My garden notes", maxLength: 80, autoComplete: "off", fullWidth: true,
+				onChange: (e: any) => { setName(e.target.value); if (!touched) setSlug(slugify(e.target.value)); } })),
+		h("label", { style: { display: "grid", gap: 4 } }, h("strong", null, "Site address"),
+			h(Input, { value: slug, "aria-label": "Site address", maxLength: 40, autoComplete: "off", fullWidth: true, "aria-describedby": "addr-msg",
+				onChange: (e: any) => { setTouched(true); setSlug(slugify(e.target.value)); } }),
+			h("span", { id: "addr-msg", "aria-live": "polite", style: { fontSize: 14, color: check.ok ? "#059669" : slug && check.text !== "Checking\u2026" ? "#dc2626" : undefined, opacity: check.ok || slug ? 1 : 0.65 } }, check.ok ? `\u2713 ${check.text}` : check.text || "Letters, numbers and dashes.")),
+		error ? h("p", { role: "alert", style: { color: "#dc2626", margin: 0 } }, error) : null,
+		h("div", { style: { display: "flex", gap: 8 } },
+			h(Button, { type: "submit", variant: "primary", isDisabled: busy || !check.ok || !name.trim() }, "Create my site"),
+			looks.length > 1 && !wanted ? h(Button, { variant: "outline", onPress: () => setStep(1) }, "Back") : null,
+			h(Button, { variant: "ghost", onPress: props.onDone }, "Cancel")));
+}
+
+/** Change the look of one site (nothing is deleted; the old look's content is hidden and comes back). */
+function ChangeLook(props: { slug: string; onDone: () => void }) {
+	const [state, setState] = React.useState(null as any);
+	const [demos, setDemos] = React.useState({} as Record<string, string>);
+	const [choice, setChoice] = React.useState("");
+	const [sample, setSample] = React.useState(false);
+	const [busy, setBusy] = React.useState(false);
+	const [msg, setMsg] = React.useState("");
+	const [failed, setFailed] = React.useState(false);
+	React.useEffect(() => {
+		api(`/api/multisite/sites/${props.slug}/appearance`).then((r) => {
+			if (!r.ok) return setFailed(true);
+			setState(r.body);
+			setChoice(r.body.current);
+		});
+		api("/api/multisite/themes").then((r) => r.ok && setDemos(Object.fromEntries((r.body.themes ?? []).filter((t: Look) => t.demoUrl).map((t: Look) => [t.id, t.demoUrl]))));
+	}, [props.slug]);
+	if (failed) return h("div", null, h("p", { role: "alert" }, "You cannot change this site\u2019s look."), h(Button, { variant: "outline", onPress: props.onDone }, "Back"));
+	if (!state) return h(LookSkeleton);
+	const looks: Look[] = state.themes.map((t: Look) => ({ ...t, demoUrl: demos[t.id] }));
+	const submit = async (e: Event) => {
+		e.preventDefault();
+		setBusy(true);
+		setMsg("Changing the look\u2026 this takes a few seconds.");
+		const r = await post(`/api/multisite/sites/${props.slug}/theme`, { theme: choice, includeContent: sample });
+		if (!r.ok) {
+			setBusy(false);
+			return setMsg(r.body?.message || "Could not change the look. Try again.");
+		}
+		// The switch runs in the background (202): wait until the site really shows the new look.
+		for (let i = 0; i < 60; i++) {
+			await new Promise((res) => setTimeout(res, 1000));
+			const a = await api(`/api/multisite/sites/${props.slug}/appearance`);
+			if (a.ok && a.body.current === choice) {
+				setBusy(false);
+				setState({ ...state, current: choice, themes: state.themes.map((t: any) => ({ ...t, current: t.id === choice })) });
+				return setMsg("Done. Your site has its new look. Your content is safe.");
+			}
+		}
+		setBusy(false);
+		setMsg("This is taking longer than usual. Wait a minute, then check your sites. If the look did not change, try again.");
+	};
+	return h("form", { onSubmit: submit, style: { display: "grid", gap: 16 } },
+		h("div", null, h("h2", { style: { margin: 0 } }, `Change the look of ${state.name}`),
+			h("p", { style: muted }, "Your content stays. Anything the new look does not show is hidden, and comes back if you switch back.")),
+		h(LookPicker, { looks, value: choice, onChange: setChoice }),
+		h("label", { style: { display: "flex", gap: 8, alignItems: "center" } }, h("input", { type: "checkbox", checked: sample, onChange: (e: any) => setSample(e.target.checked) }), "Add example content for any new sections"),
+		h("p", { role: "status", "aria-live": "polite", style: muted }, msg),
+		h("div", { style: { display: "flex", gap: 8 } },
+			h(Button, { type: "submit", variant: "primary", isDisabled: busy || choice === state.current }, "Use this look"),
+			h(Button, { variant: "outline", isDisabled: busy, onPress: props.onDone }, "Back")));
+}
+
+function SiteCard(props: { s: MySite; me: Me; look?: Look; reload: () => void; onLook: (slug: string) => void }) {
+	const { s, me, look } = props;
+	const [busy, setBusy] = React.useState(false);
+	const suspended = s.state === "suspended";
+	const live = s.status === "ready" && !suspended;
+	const run = async (fn: () => Promise<{ ok: boolean; body: any }>, fail: string) => {
+		setBusy(true);
+		const r = await fn();
+		setBusy(false);
+		if (!r.ok) alert(r.body?.message || r.body?.code || fail);
+		props.reload();
+	};
+	const chip = suspended ? ["Paused", "warning"] : s.status === "provisioning" ? ["Setting up", "default"] : s.status === "failed" ? ["Needs attention", "danger"] : ["Live", "success"];
+	return h(Card, null,
+		h(Card.Content, { style: { display: "grid", gap: 10 } },
+			h(Shot, { look, height: 170 }),
+			h("div", { style: { display: "flex", justifyContent: "space-between", gap: 8, alignItems: "start" } },
+				h("div", { style: { minWidth: 0 } }, h("strong", { style: { fontSize: 17 } }, s.name),
+					h("p", { style: { ...muted, overflowWrap: "anywhere" } }, (s.url ?? s.slug).replace(/^https?:\/\//, ""))),
+				h(Chip, { size: "sm", color: chip[1], variant: "soft" }, chip[0])),
+			suspended ? h("p", { style: { color: "#dc2626", margin: 0, fontSize: 14 } }, "This site is paused. Contact support to turn it back on.") : null,
+			s.error ? h("p", { style: { color: "#dc2626", margin: 0, fontSize: 14 } }, s.error) : null,
+			h("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
+				live ? h("a", { href: adminLink(s.slug, "/_emdash/admin"), target: "_blank", rel: "noopener", className: linkBtn("primary") }, "Edit") : null,
+				live && s.url ? h("a", { href: s.url, target: "_blank", rel: "noopener", className: linkBtn("secondary") }, "View") : null,
+				s.canRetry ? h(Button, { variant: "primary", isDisabled: busy, onPress: () => run(() => post(`/api/multisite/sites/${s.slug}/retry`, {}), "Could not try again.") }, "Try again") : null),
+			h("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" } },
+				live && me.themed && (s.role === "owner" || me.staff) ? h(Button, { size: "sm", variant: "ghost", onPress: () => props.onLook(s.slug) }, "Change look") : null,
+				s.role === "owner"
+					? h(Button, { size: "sm", variant: "ghost", isDisabled: busy, onPress: () => {
+							if (confirm(`Delete "${s.name}"? It goes offline now. Support can bring it back for a limited time.`))
+								run(() => post(`/api/multisite/sites/${s.slug}/state`, { action: "delete" }), "Could not delete the site.");
+						} }, "Delete") : null)));
+}
+
+/** The control-plane (app) origin, for a tenant that must send the user "home" to manage sites. */
+function appOrigin(): string {
+	// The host injects it on the auth pages (Astro.locals.multisite.account is app-relative);
+	// fall back to the registrable apex of the current host (drop the left-most label).
+	try {
+		const inj = (window as unknown as { __MULTISITE_APP_URL__?: string }).__MULTISITE_APP_URL__;
+		if (inj) return inj;
+		const h = window.location.hostname.split(".");
+		return `${window.location.protocol}//${h.length > 2 ? h.slice(1).join(".") : h.join(".")}`;
+	} catch {
+		return "/";
+	}
+}
+
+function SitesTab() {
+	const [me, setMe] = React.useState(null as Me | null);
+	const [looks, setLooks] = React.useState([] as Look[]);
+	const [failed, setFailed] = React.useState(false);
+	// A tenant site has no "my sites" feature — the `/api/multisite/me` route only exists on the
+	// control plane (404 here). Show a link back to the app instead of a broken/empty list.
+	const [tenant, setTenant] = React.useState(false);
+	const [view, setView] = React.useState((qs("new") !== null ? { kind: "new" } : qs("appearance") ? { kind: "look", slug: qs("appearance") } : { kind: "list" }) as { kind: string; slug?: string });
+	const timer = React.useRef(0 as any);
+	const load = React.useCallback(async () => {
+		clearTimeout(timer.current);
+		const r = await api("/api/multisite/me");
+		if (r.status === 404) return setTenant(true);
+		if (!r.ok) return setFailed(true);
+		setMe(r.body);
+		if (r.body.sites.some((s: MySite) => s.status === "provisioning")) timer.current = setTimeout(load, 3000);
+	}, []);
+	React.useEffect(() => {
+		load();
+		api("/api/multisite/themes").then((r) => r.ok && setLooks(r.body.themes ?? []));
+		return () => clearTimeout(timer.current);
+	}, [load]);
+	if (tenant)
+		return h(Card, null, h(Card.Content, { style: { display: "grid", gap: 8, justifyItems: "start" } },
+			h("h3", { style: { margin: 0 } }, "Manage your sites from your dashboard"),
+			h("p", { style: muted }, "This is one of your sites. Your full list of sites, billing and new-site creation live in your hosting dashboard."),
+			h("a", { href: `${appOrigin()}/account/sites`, className: linkBtn("primary") }, "Go to my dashboard")));
+	if (failed) return h("p", { role: "alert" }, "Could not load your sites. Please reload the page.");
+	if (!me) return h(SitesSkeleton);
+	const back = () => { clean(); setView({ kind: "list" }); load(); };
+	if (view.kind === "new") return h(Wizard, { me, looks, onDone: back });
+	if (view.kind === "look" && view.slug) return h(ChangeLook, { slug: view.slug, onDone: back });
+	const full = me.max !== null && me.owned >= me.max;
+	return h("div", { style: { display: "grid", gap: 16 } },
+		h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" } },
+			h("div", null, h("h2", { style: { margin: 0 } }, "My sites"),
+				me.max !== null
+					? h("p", { style: muted },
+						`${planLabel(me.plan)} plan — ${me.owned} of ${me.max} site${me.max === 1 ? "" : "s"} used`,
+						full && me.canUpgrade ? h("a", { href: "/account/billing", style: { marginLeft: 8 } }, "Upgrade") : null)
+					: null),
+			full ? null : h(Button, { variant: "primary", isDisabled: !me.emailVerified, onPress: () => setView({ kind: "new" }) }, "New site")),
+		!me.emailVerified ? h("p", { style: muted }, "Confirm your email address to create a site.") : null,
+		me.sites.length === 0
+			? h(Card, null, h(Card.Content, { style: { display: "grid", gap: 8, justifyItems: "start" } },
+					h("h3", { style: { margin: 0 } }, "You have no sites yet"), h("p", { style: muted }, "Make one in a minute: pick a look, give it a name, done."),
+					me.emailVerified ? h(Button, { variant: "primary", onPress: () => setView({ kind: "new" }) }, "Create my first site") : null))
+			: h("div", { style: grid(300) },
+					...me.sites.map((s: MySite) => h(SiteCard, { key: s.slug, s, me, look: looks.find((t: Look) => t.id === s.themeId), reload: load, onLook: (slug: string) => setView({ kind: "look", slug }) }))));
+}
+
+export const sitesPlugin = createAuthPlugin("multisite-sites", () => ({
+	viewPaths: { settings: { sites: "sites" } },
+	settingsTabs: [{ view: "sites", label: "My sites", component: SitesTab }],
+}));
+/** What `betterAuthUi({ plugins: "emdash-multisite/auth-ui" })` registers. */
+// oxlint-disable-next-line typescript/no-explicit-any
+const plugins: any[] = [sitesPlugin()];
+export default plugins;

package/src/backup.ts

@@ -0,0 +1,137 @@
+/**
+ * Per-site backup and restore. D1 Time Travel only restores the whole database, so a
+ * single site that was damaged (or deleted by mistake) needs its own copy.
+ *
+ * A backup is one JSON file in the media bucket, outside every site's key prefix:
+ *   _backups/<site>/<iso time>[-pre-restore].json
+ *   { version, slug, createdAt, schema: [...], data: [...], triggers: [...] }
+ * `schema` and `triggers` are the site's own CREATE statements; `data` is multi-row INSERTs whose
+ * values come from SQLite's `quote()`, so text, numbers, NULL and blobs round-trip exactly.
+ * Restore replays them in ONE D1 batch (atomic). The control-plane records (organization, state,
+ * theme, status) are not part of a backup: they stay where they are.
+ *
+ * ponytail: each table is read in one query, so a table too big for one D1 response needs paging;
+ * the control plane (primary site) is not backed up here (Time Travel covers it).
+ */
+import { sql } from "kysely";
+import { clonePlan, insertStatements, retarget, type MasterRow } from "./clone.ts";
+import { d1, type D1 } from "./clone-run.ts";
+import { log } from "./log.ts";
+import { runAsSite } from "./dialect.ts";
+import { mediaBucket, type Bucket } from "./media-bucket.ts";
+import { dropSiteTables } from "./purge.ts";
+import { controlDb, forgetSiteTheme, siteHasTables } from "./registry.ts";
+import { BACKUP_KEEP, backupKey, backupPrefix } from "./rules.ts";
+import { scopeState } from "./scope.ts";
+
+export interface Backup {
+	version: 1;
+	slug: string;
+	createdAt: string;
+	schema: string[];
+	data: string[];
+	triggers: string[];
+}
+
+const quote = (name: string) => `"${name.replaceAll('"', '""')}"`;
+const lastKey = (slug: string) => `multisite:backup:${slug}`;
+
+async function needs(): Promise<{ db: D1; bucket: Bucket }> {
+	const [db, bucket] = [await d1(), await mediaBucket()];
+	if (!db || !bucket) throw new Error("[multisite] backups need the D1 and R2 (media) bindings");
+	return { db, bucket };
+}
+
+/** Read a site's schema and rows. Two D1 round trips for the rows, however many tables. */
+export async function exportSite(slug: string): Promise<Backup> {
+	const { db } = await needs();
+	const { results } = await db.prepare("SELECT type, name, sql FROM sqlite_master WHERE instr(name, ?) > 0").bind(`$${slug}`).all<MasterRow>();
+	const plan = clonePlan(results, slug, slug);
+	if (!plan.tables.length) throw new Error(`[multisite] "${slug}" has no tables to back up`);
+	const info = await db.batch(plan.tables.map((t) => db.prepare(`PRAGMA table_info(${quote(t)})`)));
+	const columns = info.map((r) => (r.results as Array<{ name: string }>).map((c) => c.name));
+	const rows = await db.batch(
+		plan.tables.map((t, i) => db.prepare(`SELECT '(' || ${columns[i]!.map((c) => `quote(${quote(c)})`).join(" || ',' || ")} || ')' AS v FROM ${quote(t)}`)),
+	);
+	return {
+		version: 1,
+		slug,
+		createdAt: new Date().toISOString(),
+		schema: plan.schema,
+		data: plan.tables.flatMap((t, i) => insertStatements(t, columns[i]!, (rows[i]!.results as Array<{ v: string }>).map((r) => r.v))),
+		triggers: plan.triggers,
+	};
+}
+
+/** Store a backup, drop the oldest beyond `BACKUP_KEEP`, and remember when it happened. */
+export async function saveBackup(backup: Backup, tag?: string): Promise<{ key: string; bytes: number }> {
+	const { bucket } = await needs();
+	const key = backupKey(backup.slug, backup.createdAt, tag);
+	const body = JSON.stringify(backup);
+	await bucket.put(key, body);
+	const keys = await listBackups(backup.slug);
+	const old = keys.slice(0, Math.max(0, keys.length - BACKUP_KEEP));
+	if (old.length) await bucket.delete(old);
+	await runAsSite(scopeState().primary, () =>
+		sql`INSERT INTO options (name, value) VALUES (${lastKey(backup.slug)}, ${JSON.stringify(backup.createdAt)})
+			ON CONFLICT(name) DO UPDATE SET value = excluded.value`.execute(controlDb()),
+	);
+	log("backup.saved", { site: backup.slug, key, bytes: body.length });
+	return { key, bytes: body.length };
+}
+
+export const backupSite = async (slug: string, tag?: string) => saveBackup(await exportSite(slug), tag);
+
+/** Backup keys of a site, oldest first. */
+export async function listBackups(slug: string): Promise<string[]> {
+	const { bucket } = await needs();
+	const keys: string[] = [];
+	let cursor: string | undefined;
+	do {
+		const page = await bucket.list({ prefix: backupPrefix(slug), cursor, limit: 1000 });
+		keys.push(...page.objects.map((o) => o.key));
+		cursor = page.truncated ? page.cursor : undefined;
+	} while (cursor);
+	return keys.sort();
+}
+
+/** When each site was last backed up (ISO), by slug. */
+export async function readLastBackups(): Promise<Map<string, string>> {
+	const r = await runAsSite(scopeState().primary, () =>
+		sql<{ name: string; value: string }>`SELECT name, value FROM options WHERE name LIKE 'multisite:backup:%'`.execute(controlDb()),
+	);
+	return new Map(r.rows.map((x) => [x.name.slice("multisite:backup:".length), JSON.parse(x.value) as string]));
+}
+
+export type RestoreResult = "restored" | "not-found" | "site-has-tables" | "bad-backup";
+
+/**
+ * Put a site back from a backup. Without `replace` the site must have no tables. With it the
+ * current state is backed up first (`-pre-restore`), then the tables are dropped and rebuilt, so a
+ * bad restore can itself be undone.
+ */
+export async function restoreSite(slug: string, key: string, opts: { replace: boolean }): Promise<RestoreResult> {
+	const { db, bucket } = await needs();
+	// Only this site's own backup files: the key comes from a request.
+	if (!key.startsWith(backupPrefix(slug)) || key.includes("..")) return "not-found";
+	const object = await bucket.get(key);
+	if (!object) return "not-found";
+	let backup: Backup;
+	try {
+		backup = JSON.parse(await object.text()) as Backup;
+	} catch {
+		return "bad-backup";
+	}
+	if (backup.version !== 1 || backup.slug !== slug || ![backup.schema, backup.data, backup.triggers].every(Array.isArray)) return "bad-backup";
+	if (await siteHasTables(slug)) {
+		if (!opts.replace) return "site-has-tables";
+		await backupSite(slug, "pre-restore");
+		const dropped = await runAsSite(scopeState().primary, () => dropSiteTables(slug));
+		if (dropped.remaining) throw new Error(`[multisite] could not clear ${dropped.remaining} tables of "${slug}"; nothing restored`);
+	}
+	const statements = ["PRAGMA defer_foreign_keys = ON", ...backup.schema, ...backup.data, ...backup.triggers].map((s) => retarget(s, backup.slug, slug));
+	await db.batch(statements.map((s) => db.prepare(s)));
+	forgetSiteTheme(slug);
+	log("backup.restored", { site: slug, key, replace: opts.replace });
+	return "restored";
+}

package/src/bootstrap.ts

@@ -0,0 +1,51 @@
+import { Kysely, sql } from "kysely";
+import { siteDialect, runAsSite } from "./dialect.ts";
+import { scopeState } from "./scope.ts";
+
+/**
+ * Make the control-plane (primary) site usable without the first-run wizard.
+ *
+ * The primary site's first human arrives through Better Auth signup as a
+ * subscriber (role 10), not through EmDash's setup wizard. So the wizard would
+ * appear and then refuse ("admin user already exists"). This promotes a named
+ * user to admin and marks setup complete — run it ONCE, for your own staff
+ * account, from a trusted script. It never runs automatically.
+ *
+ * Tenant sites don't need this: provisioning already creates their admin and
+ * sets the flag (see createSiteForOrg).
+ *
+ * ```ts
+ * import { Kysely } from "kysely";
+ * import { createDialect } from "emdash-multisite/db/d1"; // or /db/sqlite
+ * import { bootstrapControlPlane } from "emdash-multisite/bootstrap";
+ * const db = new Kysely({ dialect: createDialect({ inner, sites }) });
+ * await bootstrapControlPlane(db, "you@example.com");
+ * ```
+ */
+export async function bootstrapControlPlane(
+	db: Kysely<never>,
+	adminEmail: string,
+): Promise<{ promoted: boolean }> {
+	const primary = scopeState().primary;
+	return runAsSite(primary, async () => {
+		const upd = await sql`
+			UPDATE users SET role = 50, email_verified = 1
+			WHERE lower(email) = ${adminEmail.toLowerCase()}`.execute(db);
+		const promoted = Number(upd.numAffectedRows ?? 0n) > 0;
+		if (!promoted) {
+			throw new Error(
+				`[multisite] no user "${adminEmail}" on the control-plane site. Sign up first, then run bootstrap.`,
+			);
+		}
+		await sql`INSERT INTO options (name, value) VALUES ('emdash:setup_complete', 'true')
+			ON CONFLICT(name) DO UPDATE SET value = 'true'`.execute(db);
+		return { promoted };
+	});
+}
+
+/** Build the control-plane connection the bootstrap/scripts use. */
+export function controlPlaneDb(): Kysely<never> {
+	const st = scopeState();
+	if (!st.inner) throw new Error("[multisite] database not initialised yet");
+	return new Kysely<never>({ dialect: siteDialect(st.inner, st.activeSite, st.primary) });
+}

package/src/clone-run.ts

@@ -0,0 +1,57 @@
+/**
+ * Run a clone on D1: read a template site's schema, then rebuild it under the new
+ * site id in ONE batch (one transaction, one round trip). Goes straight to the D1
+ * binding, not through the per-site dialect: the statements already carry the
+ * physical `$<site>` names.
+ *
+ * ponytail: D1 only (the Node/SQLite host falls back to migrate-and-seed), and one
+ * batch, so a template whose clone outgrows D1's batch limits needs chunking.
+ */
+import { clonePlan, type MasterRow } from "./clone.ts";
+import { d1Binding } from "./config.ts";
+import { platformEnv } from "./platform-env.ts";
+import { templateId } from "./rules.ts";
+
+export interface D1Statement {
+	bind(...v: unknown[]): D1Statement;
+	all<T = unknown>(): Promise<{ results: T[] }>;
+}
+export interface D1 {
+	prepare(sql: string): D1Statement;
+	batch(statements: D1Statement[]): Promise<Array<{ results: unknown[] }>>;
+}
+
+export const d1 = async (): Promise<D1 | undefined> => {
+	const binding = d1Binding();
+	return binding ? ((await platformEnv())?.[binding] as D1 | undefined) : undefined;
+};
+
+/**
+ * True when the theme's template is complete. The `multisite:theme` option is the
+ * last thing `buildTemplate` writes, so a template killed half way does not count.
+ */
+export async function hasTemplate(theme: string): Promise<boolean> {
+	const db = await d1();
+	if (!db) return false;
+	const table = `options$${templateId(theme)}`;
+	const q = (sql: string, ...v: unknown[]) => db.prepare(sql).bind(...v).all();
+	if (!(await q("SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = ?", table)).results.length) return false;
+	return (await q(`SELECT 1 FROM "${table}" WHERE name = 'multisite:theme'`)).results.length > 0;
+}
+
+/**
+ * Create `to` as a copy of the theme's template. Returns false when there is no
+ * template (caller falls back to migrating and seeding). Atomic: on failure
+ * nothing of `to` exists, so a retry starts clean.
+ */
+export async function cloneTemplate(theme: string, to: string): Promise<boolean> {
+	const db = await d1();
+	if (!db || !(await hasTemplate(theme))) return false;
+	const from = templateId(theme);
+	const { results } = await db.prepare("SELECT type, name, sql FROM sqlite_master WHERE instr(name, ?) > 0").bind(`$${from}`).all<MasterRow>();
+	const plan = clonePlan(results, from, to);
+	// Foreign keys are checked at commit, so copy order between tables does not matter.
+	const statements = ["PRAGMA defer_foreign_keys = ON", ...plan.schema, ...plan.copy, ...plan.triggers];
+	await db.batch(statements.map((s) => db.prepare(s)));
+	return true;
+}