@protobase/ui 0.3.5 → 0.4.1

package/dist/auth/sign-in-form.js

@@ -1,12 +1,29 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { AuthLayout } from "./auth-layout.js";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { KeyRound, Mail } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-in-form.tsx
-const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword, onContinueWithGitHub }) => {
+const Divider = () => /* @__PURE__ */ jsxs("div", {
+	className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
+	children: [
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+		"or",
+		/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
+	]
+});
+const SignInForm = ({ onSubmit, busy, error, workspace, notice, methods = ["password"], onSendCode, onPasskey, onForgotPassword, onContinueWithGitHub }) => {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const emailInput = useRef(null);
+	const withPassword = methods.includes("password");
+	const withCode = methods.includes("emailCode") && onSendCode !== void 0;
+	const withPasskey = methods.includes("passkey") && onPasskey !== void 0;
+	const sendCode = () => {
+		if (!emailInput.current?.reportValidity()) return;
+		onSendCode?.(email.trim());
+	};
 	return /* @__PURE__ */ jsxs(AuthLayout, {
 		title: "Sign in to Protobase",
 		description: workspace,
@@ -16,32 +33,39 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
 				children: notice
 			}),
-			onContinueWithGitHub && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
-				onClick: onContinueWithGitHub,
-				disabled: busy,
-				className: "min-h-10 w-full",
-				children: "Continue with GitHub"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "my-4 flex items-center gap-3 text-xs text-muted-foreground",
-				children: [
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
-					"or",
-					/* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" })
-				]
+			(onContinueWithGitHub || withPasskey) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [onContinueWithGitHub && /* @__PURE__ */ jsx(Button, {
+					onClick: onContinueWithGitHub,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: "Continue with GitHub"
+				}), withPasskey && /* @__PURE__ */ jsxs(Button, {
+					onClick: onPasskey,
+					disabled: busy,
+					className: "min-h-10 w-full",
+					children: [/* @__PURE__ */ jsx(KeyRound, { className: "size-4" }), "Sign in with a passkey"]
+				})]
+			}), withPassword || withCode ? /* @__PURE__ */ jsx(Divider, {}) : error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-4 text-xs font-medium text-danger-text",
+				children: error
 			})] }),
-			/* @__PURE__ */ jsxs("form", {
+			(withPassword || withCode) && /* @__PURE__ */ jsxs("form", {
 				className: "flex flex-col gap-4",
 				onSubmit: (event) => {
 					event.preventDefault();
-					onSubmit(email.trim(), password);
+					if (withPassword) onSubmit(email.trim(), password);
+					else sendCode();
 				},
 				children: [
 					/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Email", /* @__PURE__ */ jsx(Input, {
+							ref: emailInput,
 							type: "email",
 							name: "email",
-							autoComplete: "username",
+							autoComplete: "username webauthn",
 							required: true,
 							autoFocus: true,
 							value: email,
@@ -50,7 +74,7 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 							className: "min-h-6"
 						})]
 					}),
-					/* @__PURE__ */ jsxs("label", {
+					withPassword && /* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
 						children: ["Password", /* @__PURE__ */ jsx(Input, {
 							type: "password",
@@ -68,14 +92,23 @@ const SignInForm = ({ onSubmit, busy, error, workspace, notice, onForgotPassword
 						className: "text-xs font-medium text-danger-text",
 						children: error
 					}),
-					/* @__PURE__ */ jsx(Button, {
+					withPassword && /* @__PURE__ */ jsx(Button, {
 						variant: "primary",
 						type: "submit",
 						loading: busy,
 						className: "min-h-10",
 						children: "Sign in"
 					}),
-					onForgotPassword && /* @__PURE__ */ jsx("button", {
+					withCode && /* @__PURE__ */ jsxs(Button, {
+						variant: withPassword ? "secondary" : "primary",
+						type: withPassword ? "button" : "submit",
+						onClick: withPassword ? sendCode : void 0,
+						loading: busy && !withPassword,
+						disabled: busy,
+						className: "min-h-10",
+						children: [/* @__PURE__ */ jsx(Mail, { className: "size-4" }), "Email me a sign-in code"]
+					}),
+					withPassword && onForgotPassword && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: onForgotPassword,
 						className: "self-center text-[13px] font-medium text-primary-text hover:underline",

package/dist/auth/sign-in-page.js

@@ -1,27 +1,22 @@
+import { authMessage, signInMessage } from "./auth-messages.js";
 import { useAuth } from "./auth-provider.js";
 import { SignInForm } from "./sign-in-form.js";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-in-page.tsx
-/** Better Auth's messages, in words for the person at the keyboard. */
-const signInMessage = (error) => {
-	if (error.status === 429) return "Too many attempts. Wait a minute and try again.";
-	if (error.status === 401 || error.code === "INVALID_EMAIL_OR_PASSWORD") return "The email or password is not right.";
-	return error.message;
-};
-const SignInPage = ({ workspace, notice, onForgotPassword }) => {
-	const { signIn, signInSocial, socialProviders } = useAuth();
+const SignInPage = ({ workspace, notice, onForgotPassword, onCodeSent }) => {
+	const { signIn, signInSocial, socialProviders, signInMethods, sendSignInCode, signInWithPasskey } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
-	const attempt = async (start) => {
+	const attempt = async (start, message) => {
 		setBusy(true);
 		setError(void 0);
 		try {
 			await start();
 		} catch (failure) {
 			if (!(failure instanceof AuthError)) throw failure;
-			setError(signInMessage(failure));
+			setError(message(failure));
 			setBusy(false);
 		}
 	};
@@ -30,9 +25,15 @@ const SignInPage = ({ workspace, notice, onForgotPassword }) => {
 		error,
 		workspace,
 		notice,
+		methods: signInMethods,
 		onForgotPassword,
-		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github")) : void 0,
-		onSubmit: (email, password) => void attempt(() => signIn(email, password))
+		onContinueWithGitHub: socialProviders.includes("github") ? () => void attempt(() => signInSocial("github"), signInMessage) : void 0,
+		onPasskey: () => void attempt(signInWithPasskey, authMessage),
+		onSendCode: (email) => void attempt(async () => {
+			await sendSignInCode(email);
+			onCodeSent(email);
+		}, authMessage),
+		onSubmit: (email, password) => void attempt(() => signIn(email, password), signInMessage)
 	});
 };
 //#endregion

package/dist/auth/staff-link.js

@@ -0,0 +1,30 @@
+//#region src/auth/staff-link.ts
+/** Marks a link to the staff sign-in page, for example `/?staff-sign-in&email=sanne@example.com&reason=Ticket+4211`. */
+const staffMarker = "staff-sign-in";
+/** Where the server's staff callback says why a staff sign-in did not go through. */
+const errorParam = "staff-error";
+/** The staff sign-in this page was opened for, or `undefined`. */
+const readStaffLink = (href) => {
+	const params = new URL(href).searchParams;
+	const error = params.get(errorParam);
+	if (!params.has("staff-sign-in") && !error) return void 0;
+	const marked = params.has(staffMarker);
+	return {
+		email: marked && params.get("email") || "",
+		reason: marked && params.get("reason") || "",
+		...error && { error }
+	};
+};
+/** The address without the staff link's parameters: for the address bar, and the page staff come back to. */
+const withoutStaffLink = (href) => {
+	const url = new URL(href);
+	if (url.searchParams.has("staff-sign-in")) for (const name of [
+		staffMarker,
+		"email",
+		"reason"
+	]) url.searchParams.delete(name);
+	url.searchParams.delete(errorParam);
+	return `${url.pathname}${url.search}${url.hash}`;
+};
+//#endregion
+export { readStaffLink, staffMarker, withoutStaffLink };

package/dist/auth/staff-sign-in-form.js

@@ -0,0 +1,93 @@
+import { cn } from "../lib/cn.js";
+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/staff-sign-in-form.tsx
+const minimumReason = 10;
+/** For staff of the operator: sign in as a person of this app, with a reason the app's admins see in their log. */
+const StaffSignInForm = ({ operator, email: givenEmail = "", reason: givenReason = "", onSubmit, onBack, busy, error }) => {
+	const [email, setEmail] = useState(givenEmail);
+	const [reason, setReason] = useState(givenReason);
+	if (!operator) return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Staff sign-in",
+		description: "Staff of the team that runs this app cannot sign in as people here.",
+		children: [error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mb-4 text-xs font-medium text-danger-text",
+			children: error
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			className: "min-h-10 w-full",
+			onClick: onBack,
+			children: "Back to sign in"
+		})]
+	});
+	return /* @__PURE__ */ jsx(AuthLayout, {
+		title: "Sign in as a person",
+		description: `For staff of ${operator}, to help someone with this app.`,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit(email.trim(), reason.trim());
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Their email", /* @__PURE__ */ jsx(Input, {
+						type: "email",
+						name: "email",
+						required: true,
+						autoFocus: !givenEmail,
+						value: email,
+						onChange: (event) => setEmail(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Reason", /* @__PURE__ */ jsx("textarea", {
+						name: "reason",
+						required: true,
+						minLength: minimumReason,
+						rows: 3,
+						value: reason,
+						placeholder: "Ticket 4211: the invoice totals look wrong",
+						onChange: (event) => setReason(event.target.value),
+						className: cn("resize-y rounded-md border bg-background px-2.5 py-1.5 text-[13px] font-normal shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", error ? "border-danger" : "border-border-strong")
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"You sign in at ",
+						operator,
+						" with a passkey or a second step. The session is short, shows a banner, and cannot change their sign-in. The app's admins see who signed in as whom, and why."
+					]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: ["Continue with ", operator]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Back to sign in"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { StaffSignInForm };

package/dist/auth/staff-sign-in-page.js

@@ -0,0 +1,41 @@
+import { staffSignInMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { withoutStaffLink } from "./staff-link.js";
+import { StaffSignInForm } from "./staff-sign-in-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/staff-sign-in-page.tsx
+/** Starts a staff sign-in and leaves for the operator provider, which comes back to this page without the staff link. */
+const StaffSignInPage = ({ link, onBack }) => {
+	const { session, staffSignIn } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(link.error && staffSignInMessage(link.error));
+	const submit = async (email, reason) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			const callbackURL = `${window.location.origin}${withoutStaffLink(window.location.href)}`;
+			window.location.assign(await session.staff.start({
+				email,
+				reason,
+				callbackURL
+			}));
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(staffSignInMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(StaffSignInForm, {
+		operator: staffSignIn,
+		email: link.email,
+		reason: link.reason,
+		busy,
+		error,
+		onBack,
+		onSubmit: (email, reason) => void submit(email, reason)
+	});
+};
+//#endregion
+export { StaffSignInPage };

package/dist/auth/two-factor-form.js

@@ -0,0 +1,137 @@
+import { Input } from "../primitives/input.js";
+import { Button } from "../primitives/button.js";
+import { CodeInput } from "./code-input.js";
+import { AuthLayout } from "./auth-layout.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/auth/two-factor-form.tsx
+const instructions = {
+	totp: "Enter the 6-digit code from your authenticator app.",
+	otp: "Enter the 6-digit code we emailed you. It works for 5 minutes.",
+	backup: "Enter one of the backup codes you saved when you set up the authenticator app. Each works once."
+};
+/** The second step of a sign-in, for an account with two-factor authentication. */
+const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, codeSent, initialStep }) => {
+	const [step, setStep] = useState(initialStep ?? (methods.includes("totp") ? "totp" : "otp"));
+	const [code, setCode] = useState("");
+	const [trustDevice, setTrustDevice] = useState(false);
+	const waitingForEmail = step === "otp" && !codeSent;
+	const switchTo = (next) => {
+		setStep(next);
+		setCode("");
+		if (next === "otp" && !codeSent) onSendCode();
+	};
+	return /* @__PURE__ */ jsxs(AuthLayout, {
+		title: "Two-factor authentication",
+		description: "One more step to sign in.",
+		children: [waitingForEmail ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: "We email you a code to finish signing in."
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					loading: busy,
+					onClick: onSendCode,
+					className: "min-h-10",
+					children: "Email me a code"
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onVerify({
+					method: step,
+					code: code.trim(),
+					trustDevice
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: instructions[step]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: [step === "backup" ? "Backup code" : "Code", step === "backup" ? /* @__PURE__ */ jsx(Input, {
+						name: "code",
+						autoComplete: "off",
+						spellCheck: false,
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value),
+						className: "min-h-6 font-mono"
+					}) : /* @__PURE__ */ jsx(CodeInput, {
+						name: "code",
+						required: true,
+						autoFocus: true,
+						value: code,
+						invalid: Boolean(error),
+						onChange: (event) => setCode(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: trustDevice,
+						onChange: setTrustDevice,
+						label: "Trust this browser"
+					}), "Don't ask again in this browser for 30 days"]
+				}),
+				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: "Verify"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col items-center gap-2 border-t pt-4 text-[13px]",
+			children: [
+				step !== "totp" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("totp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use the authenticator app"
+				}),
+				step !== "otp" && methods.includes("otp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("otp"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Email me a code instead"
+				}),
+				step !== "backup" && methods.includes("totp") && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => switchTo("backup"),
+					className: "font-medium text-primary-text hover:underline",
+					children: "Use a backup code"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onBack,
+					className: "font-medium text-muted-foreground hover:underline",
+					children: "Back to sign in"
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { TwoFactorForm };

package/dist/auth/two-factor-page.js

@@ -0,0 +1,39 @@
+import { authMessage } from "./auth-messages.js";
+import { useAuth } from "./auth-provider.js";
+import { TwoFactorForm } from "./two-factor-form.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/auth/two-factor-page.tsx
+/** The second step after a password or an emailed code, with the methods the server named. */
+const TwoFactorPage = ({ methods, onBack }) => {
+	const { verifyTwoFactor, session } = useAuth();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [codeSent, setCodeSent] = useState(false);
+	const attempt = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsx(TwoFactorForm, {
+		methods,
+		busy,
+		error,
+		codeSent,
+		onBack,
+		onVerify: (input) => void attempt(() => verifyTwoFactor(input)),
+		onSendCode: () => void attempt(async () => {
+			await session.sendTwoFactorCode();
+			setCodeSent(true);
+		})
+	});
+};
+//#endregion
+export { TwoFactorPage };

package/dist/auth/user-to-shell.js

@@ -1,9 +1,12 @@
 //#region src/auth/user-to-shell.ts
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
 const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+const rolesOf = (user) => (user.role ?? "user").split(",").map((role) => role.trim());
+/** The user holds the `admin` role, among others perhaps. */
+const isAdmin = (user) => rolesOf(user).includes("admin");
 /** What the sidebar's profile menu shows for a signed-in user. */
 const userToShell = (user) => {
-	const roles = (user.role ?? "user").split(",").map((role) => role.trim());
+	const roles = rolesOf(user);
 	const admin = roles.includes("admin");
 	return {
 		name: user.name || user.email,
@@ -15,4 +18,4 @@ const userToShell = (user) => {
 	};
 };
 //#endregion
-export { userToShell };
+export { isAdmin, userToShell };

package/dist/chat/composer.js

@@ -1,8 +1,8 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { SendHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
 /** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
 const Composer = ({ onSend, busy, placeholder, inputRef }) => {

package/dist/data/api-provider.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { QueryClient } from "@tanstack/react-query";
 import { Client, ClientOptions } from "@protobase/client";
+import { QueryClient } from "@tanstack/react-query";
 //#region src/data/api-provider.d.ts
 export declare const useClient: () => {
   list: <R extends import("@protobase/client").ResourceRef>(resource: R, params?: import("@protobase/client").ListParams) => Promise<import("@protobase/client").ListPage<import("@protobase/client").RecordOf<R>>>;

package/dist/data/api-provider.js

@@ -1,8 +1,8 @@
 import { keys } from "./query-keys.js";
 import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { createClient } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { createClient } from "@protobase/client";
 //#region src/data/api-provider.tsx
 const ApiContext = createContext(null);
 const useClient = () => {

package/dist/data/use-aggregates.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useQuery } from "@tanstack/react-query";
 import { filterText } from "@protobase/client";
+import { useQuery } from "@tanstack/react-query";
 //#region src/data/use-aggregates.ts
 const useFacets = (resource, field, filter, enabled = true) => {
 	const client = useClient();

package/dist/data/use-list.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useInfiniteQuery } from "@tanstack/react-query";
 import { filterText } from "@protobase/client";
+import { useInfiniteQuery } from "@tanstack/react-query";
 //#region src/data/use-list.ts
 /** Infinite pages of a resource, following `next_page_token`. */
 const useList = (resource, { filter, orderBy, pageSize = 50, fields, startToken = "", enabled = true } = {}) => {

package/dist/data/use-update-record.js

@@ -1,7 +1,7 @@
 import { keys } from "./query-keys.js";
 import { useClient } from "./api-provider.js";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { PreconditionFailedError } from "@protobase/client";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { encodeKey } from "@protobase/schema";
 //#region src/data/use-update-record.ts
 /**

package/dist/data-grid/cells.js

@@ -1,12 +1,12 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
-import { formatDate, formatDateTime } from "../format/date.js";
-import { userById } from "../mocks/users.js";
 import { formatMoney } from "../format/money.js";
 import { formatInt, formatPercent, formatSigned } from "../format/number.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { formatDate, formatDateTime } from "../format/date.js";
+import { userById } from "../mocks/users.js";
 import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/data-grid/cells.tsx
 const muted = (text) => /* @__PURE__ */ jsx("span", {

package/dist/data-grid/grid-header.js

@@ -1,10 +1,10 @@
 import { cn } from "../lib/cn.js";
-import { gridTemplate } from "./grid-template.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { HeaderMenu } from "./header-menu.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-header.tsx
 const SortIcon = ({ sorted }) => {
 	if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "size-3 text-foreground" });

package/dist/data-grid/grid-row.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
-import { gridTemplate } from "./grid-template.js";
 import { Checkbox } from "../primitives/checkbox.js";
+import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
 import { Skeleton } from "../primitives/skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/data-grid/header-menu.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/header-menu.tsx
 /** The "..." in a column header: for now, pinning the column to the left edge. */
 const HeaderMenu = ({ header, pinned, onTogglePin }) => {

package/dist/data-grid/row-menu.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/data-grid/row-menu.tsx
 /** The actions that apply to a row; a row with none gets no menu at all. */