@protobase/ui 0.46.3 → 0.46.5

package/dist/account/account-page.js

@@ -0,0 +1,50 @@
+import { text } from "./messages.js";
+import { accountTabPath } from "./account-pages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { Notice, useAdminMeta } from "../app/meta-gate.js";
+import { PageTabsProvider } from "../app/pages/page-tabs.js";
+import { linkableProviders } from "./blocks/connected-accounts-block.js";
+import { RenderNode } from "../app/pages/render-node.js";
+import { shownAccountTree } from "./account-tree.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/account-page.tsx
+/**
+* The signed-in person's account page as `/meta` gave it to them, the app's own or the standard one, without the
+* account blocks that have nothing to show here and the tabs they leave empty; `undefined` when `/meta` has none.
+*/
+const useAccountPage = () => {
+	const { account } = useAdminMeta();
+	const auth = useAuth();
+	const { mcp } = auth;
+	const linkable = linkableProviders(auth).length > 0;
+	return useMemo(() => {
+		if (!account) return void 0;
+		const hidden = /* @__PURE__ */ new Set([...mcp ? [] : ["ConnectedApps"], ...linkable ? [] : ["ConnectedAccounts"]]);
+		return {
+			...account,
+			tree: shownAccountTree(account.tree, hidden)
+		};
+	}, [
+		account,
+		mcp,
+		linkable
+	]);
+};
+/** `/-/account`, and `/-/account/<tab>` for one of its tabs: the signed-in person's account page. */
+const AccountPage = ({ tab }) => {
+	const page = useAccountPage();
+	if (!page) return /* @__PURE__ */ jsx(Notice, {
+		title: text("noAccount"),
+		children: text("noAccountDescription")
+	});
+	return /* @__PURE__ */ jsx(PageTabsProvider, {
+		route: {
+			...tab && { tab },
+			pathOf: accountTabPath
+		},
+		children: /* @__PURE__ */ jsx(RenderNode, { node: page.tree })
+	});
+};
+//#endregion
+export { AccountPage, useAccountPage };

package/dist/account/account-pages.js

@@ -1,15 +1,30 @@
 import { text } from "./messages.js";
-import { KeyRound, ShieldCheck } from "lucide-react";
+import { ShieldCheck, UserRound } from "lucide-react";
 //#region src/account/account-pages.ts
-const accountSecurityPath = "/-/account";
+const accountPath = "/-/account";
 const signInPolicyPath = "/-/sign-in-policy";
-/** The app's own pages for the signed-in person, at the end of the profile menu: their sign-in, and for admins the policy. */
+/** The tab of the account page `path` shows, `{}` for its first, or `undefined` for a path outside it. */
+const readAccountPath = (path) => {
+	if (path === "/-/account") return {};
+	if (!path.startsWith(`/-/account/`)) return void 0;
+	const tab = path.slice(11);
+	if (tab === "" || tab.includes("/")) return void 0;
+	try {
+		return { tab: decodeURIComponent(tab) };
+	} catch (error) {
+		if (error instanceof URIError) return void 0;
+		throw error;
+	}
+};
+/** The path of the account page's tab `tab`, or of the page itself (its first tab). */
+const accountTabPath = (tab) => tab ? `${accountPath}/${encodeURIComponent(tab)}` : accountPath;
+/** The app's own pages for the signed-in person, the profile menu's last group: their account, and for admins the policy. */
 const accountMenuItems = (basePath, path, admin) => [{
-	id: "account-security",
-	label: text("signInSecurity"),
-	icon: KeyRound,
-	href: `${basePath}${accountSecurityPath}`,
-	active: path === accountSecurityPath
+	id: "account",
+	label: text("account"),
+	icon: UserRound,
+	href: `${basePath}${accountPath}`,
+	active: readAccountPath(path) !== void 0
 }, ...admin ? [{
 	id: "sign-in-policy",
 	label: text("signInPolicy"),
@@ -18,4 +33,4 @@ const accountMenuItems = (basePath, path, admin) => [{
 	active: path === signInPolicyPath
 }] : []];
 //#endregion
-export { accountMenuItems, accountSecurityPath, signInPolicyPath };
+export { accountMenuItems, accountPath, accountTabPath, readAccountPath, signInPolicyPath };

package/dist/account/account-tree.js

@@ -0,0 +1,18 @@
+import { mapTree } from "@protobase/layout";
+//#region src/account/account-tree.ts
+/**
+* The account page's tree without the account blocks named in `hidden`, those with nothing to show for this app, and
+* without the tabs that leaves empty, so a tab such as "Connected apps" is not offered on an app without MCP.
+*/
+const shownAccountTree = (tree, hidden) => {
+	const shown = mapTree(tree, (node) => {
+		if (node.custom) return node;
+		if (hidden.has(node.type)) return null;
+		if ((node.type === "Tab" || node.type === "Tabs") && node.children.length === 0) return null;
+		return node;
+	});
+	if (!shown) throw new Error("The account page keeps its Page, which no hidden block replaces");
+	return shown;
+};
+//#endregion
+export { shownAccountTree };

package/dist/account/blocks/account-loading.js

@@ -0,0 +1,19 @@
+import { text } from "../messages.js";
+import { Spinner } from "../../primitives/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/blocks/account-loading.tsx
+/** An account block whose data is not in yet: why it could not be read, or that it is loading. */
+const AccountLoading = ({ error }) => error ? /* @__PURE__ */ jsx("p", {
+	role: "alert",
+	className: "text-danger-text",
+	children: error
+}) : /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2 text-muted-foreground",
+	children: [
+		/* @__PURE__ */ jsx(Spinner, {}),
+		" ",
+		text("loading")
+	]
+});
+//#endregion
+export { AccountLoading };

package/dist/account/blocks/connected-accounts-block.js

@@ -0,0 +1,37 @@
+import { text } from "../messages.js";
+import { readProviderError, withoutSignInLink } from "../../auth/provider-link.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { providerMessage } from "../../auth/auth-messages.js";
+import { SignInProvidersSection } from "../sign-in-providers-section.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/connected-accounts-block.tsx
+const takeLinkError = () => {
+	const code = readProviderError(window.location.href);
+	if (code) window.history.replaceState(window.history.state, "", withoutSignInLink(window.location.href));
+	return code;
+};
+const Linked = ({ providers }) => {
+	const { session, linkProvider } = useAuth();
+	const { account } = session;
+	const [linkError] = useState(takeLinkError);
+	const { data: linked, error } = useAccountData(useCallback(() => account.linkedProviders(), [account]), text("couldNotReadMethods"));
+	if (!linked) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	return /* @__PURE__ */ jsx(SignInProvidersSection, {
+		providers,
+		linked,
+		onConnect: linkProvider,
+		error: linkError && providerMessage(linkError, providers.length === 1 ? providers[0].name : text("theProvider"))
+	});
+};
+/** The sign-in providers an account links to from here: the OAuth ones, as a SAML identity provider links it by signing in. */
+const linkableProviders = ({ signInProviders, socialProviders }) => signInProviders.filter((provider) => socialProviders.includes(provider.id));
+/** The `ConnectedAccounts` block: the OAuth providers the signed-in person can link, hidden when the app has none. */
+const ConnectedAccountsBlock = () => {
+	const linkable = linkableProviders(useAuth());
+	return linkable.length > 0 ? /* @__PURE__ */ jsx(Linked, { providers: linkable }) : null;
+};
+//#endregion
+export { ConnectedAccountsBlock, linkableProviders };

package/dist/account/blocks/connected-apps-block.js

@@ -0,0 +1,21 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { ConnectedAppsSection } from "../connected-apps-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/connected-apps-block.tsx
+const Apps = () => {
+	const { account } = useAuth().session;
+	const { data: apps, error, reload } = useAccountData(useCallback(() => account.connectedApps(), [account]), text("couldNotReadMethods"));
+	if (!apps) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	return /* @__PURE__ */ jsx(ConnectedAppsSection, {
+		apps,
+		onDisconnect: (clientId) => account.disconnectApp(clientId).then(reload)
+	});
+};
+/** The `ConnectedApps` block: the apps the signed-in person allowed to act as them, hidden when the app has no MCP. */
+const ConnectedAppsBlock = () => useAuth().mcp ? /* @__PURE__ */ jsx(Apps, {}) : null;
+//#endregion
+export { ConnectedAppsBlock };

package/dist/account/blocks/devices-block.js

@@ -0,0 +1,23 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { DevicesSection } from "../devices-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/devices-block.tsx
+/** The `Devices` block: the browsers and apps signed in as the person, this one marked, the others to sign out. */
+const DevicesBlock = () => {
+	const { session, staffSignIn } = useAuth();
+	const { account } = session;
+	const { data: sessions, error, reload } = useAccountData(useCallback(() => account.sessions(), [account]), text("couldNotReadDevices"));
+	if (!sessions) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	return /* @__PURE__ */ jsx(DevicesSection, {
+		sessions,
+		operator: staffSignIn,
+		onSignOut: (token) => account.revokeSession(token).then(reload),
+		onSignOutOthers: () => account.revokeOtherSessions().then(reload)
+	});
+};
+//#endregion
+export { DevicesBlock };

package/dist/account/blocks/passkeys-block.js

@@ -0,0 +1,25 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { PasskeysSection } from "../passkeys-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/passkeys-block.tsx
+/** The `Passkeys` block: the signed-in person's passkeys, within what the sign-in policy allows. */
+const PasskeysBlock = () => {
+	const { account } = useAuth().session;
+	const load = useCallback(() => Promise.all([account.signInMethods(), account.passkeys()]), [account]);
+	const { data, error, reload } = useAccountData(load, text("couldNotReadMethods"));
+	if (!data) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	const [methods, passkeys] = data;
+	return /* @__PURE__ */ jsx(PasskeysSection, {
+		rule: methods.policy.passkey,
+		passkeys,
+		onAdd: () => account.addPasskey().then(reload),
+		onRename: (id, name) => account.renamePasskey(id, name).then(reload),
+		onRemove: (id) => account.removePasskey(id).then(reload)
+	});
+};
+//#endregion
+export { PasskeysBlock };

package/dist/account/blocks/password-block.js

@@ -0,0 +1,27 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { PasswordSection } from "../password-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/password-block.tsx
+/**
+* The `Password` block: the signed-in person changes their password, or sets a first one without signing anyone out,
+* within what the sign-in policy allows; staff signed in as the person cannot.
+*/
+const PasswordBlock = () => {
+	const { session, state } = useAuth();
+	const { account } = session;
+	const { data: methods, error, reload } = useAccountData(useCallback(() => account.signInMethods(), [account]), text("couldNotReadMethods"));
+	if (!methods) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	return /* @__PURE__ */ jsx(PasswordSection, {
+		rule: methods.policy.password,
+		hasPassword: methods.account.password,
+		staff: state.kind === "signed-in" && Boolean(state.staff),
+		onChange: (current, next, signOutOthers) => account.changePassword(current, next, signOutOthers).then(reload),
+		onSet: (next) => account.setPassword(next).then(reload)
+	});
+};
+//#endregion
+export { PasswordBlock };

package/dist/account/blocks/profile-block.js

@@ -0,0 +1,28 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { ProfileSection } from "../profile-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/profile-block.tsx
+/** The `Profile` block: the signed-in person's name and address, which they can change; the address only with mail. */
+const ProfileBlock = () => {
+	const { session, changeEmail } = useAuth();
+	const { data: user, loaded, error, reload } = useAccountData(useCallback(() => session.session(), [session]), text("couldNotReadProfile"));
+	if (!loaded) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	if (!user) return null;
+	const emailChange = changeEmail ? {
+		request: session.account.requestEmailChange,
+		confirm: session.account.changeEmail
+	} : void 0;
+	return /* @__PURE__ */ jsx(ProfileSection, {
+		name: user.name,
+		email: user.email,
+		onRename: (name) => session.account.updateName(name).then(reload),
+		emailChange,
+		onEmailChanged: reload
+	});
+};
+//#endregion
+export { ProfileBlock };

package/dist/account/blocks/two-factor-block.js

@@ -0,0 +1,29 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { TwoFactorSection } from "../two-factor-section.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/two-factor-block.tsx
+/** The `TwoFactor` block: the signed-in person's two-factor authentication, within what the sign-in policy allows. */
+const TwoFactorBlock = () => {
+	const { account } = useAuth().session;
+	const { data: methods, error, reload } = useAccountData(useCallback(() => account.signInMethods(), [account]), text("couldNotReadMethods"));
+	if (!methods) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	return /* @__PURE__ */ jsx(TwoFactorSection, {
+		rule: methods.policy.twoFactor,
+		enabled: methods.account.twoFactor,
+		authenticatorApp: methods.account.authenticatorApp,
+		mail: methods.mail,
+		needsPassword: methods.account.password,
+		onStartApp: (password) => account.startAuthenticatorApp(password),
+		onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
+		onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
+		onTurnOff: (password) => account.turnOffTwoFactor(password),
+		onNewBackupCodes: (password) => account.newBackupCodes(password),
+		onChanged: reload
+	});
+};
+//#endregion
+export { TwoFactorBlock };

package/dist/account/blocks/use-account-data.js

@@ -0,0 +1,24 @@
+import { authMessage } from "../../auth/auth-messages.js";
+import { useCallback, useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+//#region src/account/blocks/use-account-data.ts
+/**
+* What an account block reads, `undefined` until it is in, with `reload` to read it again after a change so the block
+* shows what the server now has. A failure shows the server's reason, or `fallback`.
+*/
+const useAccountData = (load, fallback) => {
+	const [data, setData] = useState();
+	const [error, setError] = useState();
+	const reload = useCallback(() => {
+		load().then((value) => setData({ value }), (failure) => setError(failure instanceof AuthError ? authMessage(failure) : fallback));
+	}, [load, fallback]);
+	useEffect(reload, [reload]);
+	return {
+		data: data?.value,
+		loaded: data !== void 0,
+		error,
+		reload
+	};
+};
+//#endregion
+export { useAccountData };

package/dist/account/change-email-dialog.js

@@ -0,0 +1,98 @@
+import { text } from "./messages.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { Input } from "../primitives/input.js";
+import { SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { OtpInput } from "../primitives/otp-input.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/change-email-dialog.tsx
+/** Asks for the new address, mails it a code, and moves the account to it once the code is right. */
+const ChangeEmailDialog = ({ email, change, onDone, onClose }) => {
+	const [draft, setDraft] = useState("");
+	const [sentTo, setSentTo] = useState();
+	const [code, setCode] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const run = async (step) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await step();
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	const newEmail = draft.trim();
+	const send = () => run(async () => {
+		await change.request(newEmail);
+		setCode("");
+		setSentTo(newEmail);
+	});
+	const confirm = (complete) => run(async () => {
+		await change.confirm(sentTo, complete);
+		onDone();
+	});
+	if (!sentTo) return /* @__PURE__ */ jsxs(Dialog, {
+		title: text("changeEmail"),
+		description: text("changeEmailDescription"),
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: text("cancel")
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: busy,
+			disabled: !newEmail || newEmail.toLowerCase() === email.toLowerCase(),
+			onClick: () => void send(),
+			children: text("sendCode")
+		})] }),
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1.5 font-medium",
+			children: [text("newEmail"), /* @__PURE__ */ jsx(Input, {
+				type: "email",
+				autoComplete: "email",
+				autoFocus: true,
+				value: draft,
+				onChange: (event) => setDraft(event.target.value)
+			})]
+		}), /* @__PURE__ */ jsx(SectionError, { message: error })]
+	});
+	return /* @__PURE__ */ jsxs(Dialog, {
+		title: text("changeEmail"),
+		description: text("codeSentTo", sentTo),
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			onClick: () => {
+				setSentTo(void 0);
+				setError(void 0);
+			},
+			children: text("otherAddress")
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			loading: busy,
+			disabled: code.length < 6,
+			onClick: () => void confirm(code),
+			children: text("changeEmail")
+		})] }),
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1.5 font-medium",
+			children: [text("code"), /* @__PURE__ */ jsx(OtpInput, {
+				name: "code",
+				required: true,
+				autoFocus: true,
+				value: code,
+				invalid: Boolean(error),
+				onChange: setCode,
+				onComplete: (complete) => !busy && void confirm(complete)
+			})]
+		}), /* @__PURE__ */ jsx(SectionError, { message: error })]
+	});
+};
+//#endregion
+export { ChangeEmailDialog };

package/dist/account/connected-apps-section.js

@@ -1,10 +1,10 @@
-import { authMessage } from "../auth/auth-messages.js";
-import { clientName } from "../connect/client-name.js";
-import { clientPublisher } from "../connect/client-publisher.js";
-import { formatDate } from "../format/date.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
+import { formatDate } from "../format/date.js";
 import { AccountSection, SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { clientName } from "../connect/client-name.js";
+import { clientPublisher } from "../connect/client-publisher.js";
 import { useState } from "react";
 import { Bot } from "lucide-react";
 import { AuthError } from "@protobase/client";

package/dist/account/device-name.js

@@ -0,0 +1,26 @@
+//#region src/account/device-name.ts
+const browsers = [
+	[/Edg(e|A|iOS)?\//, "Edge"],
+	[/OPR\/|Opera/, "Opera"],
+	[/SamsungBrowser\//, "Samsung Internet"],
+	[/Firefox\/|FxiOS\//, "Firefox"],
+	[/Chrome\/|CriOS\//, "Chrome"],
+	[/Safari\//, "Safari"]
+];
+const systems = [
+	[/iPhone/, "iPhone"],
+	[/iPad/, "iPad"],
+	[/Android/, "Android"],
+	[/CrOS/, "ChromeOS"],
+	[/Windows/, "Windows"],
+	[/Mac OS X|Macintosh/, "macOS"],
+	[/Linux/, "Linux"]
+];
+const find = (list, userAgent) => list.find(([pattern]) => pattern.test(userAgent))?.[1];
+/** The browser and system a user agent names, such as Chrome and macOS, each `undefined` when it names none we know. */
+const deviceOf = (userAgent) => userAgent ? {
+	browser: find(browsers, userAgent),
+	system: find(systems, userAgent)
+} : {};
+//#endregion
+export { deviceOf };

package/dist/account/devices-section.js

@@ -0,0 +1,119 @@
+import { text } from "./messages.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { formatDateTime } from "../format/date.js";
+import { Badge } from "../primitives/badge.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { deviceOf } from "./device-name.js";
+import { useState } from "react";
+import { Laptop, ShieldUser, Smartphone, Tablet } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/devices-section.tsx
+const nameOf = (session, operator) => {
+	if (session.staff) return operator ? text("staffOf", operator) : text("staff");
+	const { browser, system } = deviceOf(session.userAgent);
+	if (browser && system) return text("browserOn", browser, system);
+	if (system) return text("aBrowserOn", system);
+	return browser ?? text("unknownDevice");
+};
+const iconOf = (session) => {
+	if (session.staff) return ShieldUser;
+	const { system } = deviceOf(session.userAgent);
+	if (system === "iPhone" || system === "Android") return Smartphone;
+	if (system === "iPad") return Tablet;
+	return Laptop;
+};
+const ordered = (sessions) => [...sessions].sort((a, b) => Number(b.current) - Number(a.current) || b.createdAt.localeCompare(a.createdAt));
+/** The devices signed in to the person's account, this one marked, each other one of which they can sign out. */
+const DevicesSection = ({ sessions, operator, onSignOut, onSignOutOthers }) => {
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [confirming, setConfirming] = useState();
+	const others = sessions.filter((session) => !session.current);
+	const signOut = async (what) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await (what.kind === "one" ? onSignOut(what.session.token) : onSignOutOthers());
+			setConfirming(void 0);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	const open = (what) => {
+		setError(void 0);
+		setConfirming(what);
+	};
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: text("devices"),
+		description: text("devicesDescription"),
+		children: [
+			sessions.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: text("noDevices")
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-md border",
+				children: ordered(sessions).map((session) => {
+					const Icon = iconOf(session);
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-wrap items-center gap-3 px-3 py-2.5",
+						children: [
+							/* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
+							/* @__PURE__ */ jsxs("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "flex flex-wrap items-center gap-2",
+									children: [/* @__PURE__ */ jsx("bdi", {
+										className: "truncate font-medium",
+										children: nameOf(session, operator)
+									}), session.current && /* @__PURE__ */ jsx(Badge, {
+										tone: "green",
+										children: text("thisDevice")
+									})]
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "block text-xs text-muted-foreground",
+									children: [text("signedInFromUntil", formatDateTime(Date.parse(session.createdAt)), formatDateTime(Date.parse(session.expiresAt))), !session.staff && session.ipAddress && ` · ${session.ipAddress}`]
+								})]
+							}),
+							!session.current && /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								onClick: () => open({
+									kind: "one",
+									session
+								}),
+								children: text("signOut")
+							})
+						]
+					}, session.token);
+				})
+			}),
+			others.length > 0 && /* @__PURE__ */ jsx(Button, {
+				className: "mt-3",
+				onClick: () => open({ kind: "others" }),
+				children: text("signOutOthers")
+			}),
+			confirming && /* @__PURE__ */ jsx(Dialog, {
+				title: confirming.kind === "one" ? text("signOutDevice", nameOf(confirming.session, operator)) : text("signOutOthersTitle"),
+				description: confirming.kind === "one" ? text("signOutDeviceDescription") : text("signOutOthersDescription"),
+				onClose: () => setConfirming(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setConfirming(void 0),
+					children: text("cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					loading: busy,
+					onClick: () => void signOut(confirming),
+					children: text("signOut")
+				})] }),
+				children: /* @__PURE__ */ jsx(SectionError, { message: error })
+			})
+		]
+	});
+};
+//#endregion
+export { DevicesSection };