@protobase/ui 0.46.2 → 0.46.4

package/dist/account/messages.js

@@ -2,9 +2,24 @@ import { defineMessages } from "../locale/messages.js";
 //#region src/account/messages.ts
 const text = defineMessages({
 	en: {
-		signInSecurity: "Sign-in & security",
+		account: "Account",
+		noAccount: "No account page",
+		noAccountDescription: "This app has no account page for you.",
 		signInPolicy: "Sign-in policy",
 		couldNotReadMethods: "Could not read your sign-in methods",
+		couldNotReadProfile: "Could not read your profile",
+		profile: "Profile",
+		profileDescription: "Your name as others see it in this app, and the address you sign in with.",
+		email: "Email",
+		changeName: "Change name",
+		changeNameDescription: "The name others see on your comments, changes and invitations.",
+		changeEmail: "Change email",
+		changeEmailDescription: "We email a code to the new address. Once you enter it here, you sign in with that address.",
+		newEmail: "New email",
+		sendCode: "Send code",
+		codeSentTo: (email) => `Enter the 6-digit code we emailed to ${email}. It works for 5 minutes. No code comes when another account has the address.`,
+		code: "Code",
+		otherAddress: "Use another address",
 		theProvider: "the provider",
 		loading: "Loading",
 		backupCodes: "Backup codes",
@@ -15,6 +30,20 @@ const text = defineMessages({
 		save: "Save",
 		name: "Name",
 		yourPassword: "Your password",
+		passwordIsSet: "Sign in with your email address and this password. Changing it asks for the current one.",
+		passwordNotSet: "You sign in without a password now. Set one to sign in with your email address and a password too; you stay signed in everywhere.",
+		passwordForbidden: "Your admin turned passwords off for this app, so they cannot be used to sign in.",
+		passwordStaff: "Staff signed in as someone cannot change their password.",
+		passwordSaved: "Your password is saved.",
+		changePassword: "Change password",
+		setPassword: "Set a password",
+		currentPassword: "Current password",
+		newPassword: "New password",
+		repeatPassword: "Repeat new password",
+		atLeast: (length) => `At least ${length} characters.`,
+		useAtLeast: (length) => `Use at least ${length} characters.`,
+		passwordTooLong: "That password is too long.",
+		passwordsDiffer: "The passwords are not the same.",
 		continue: "Continue",
 		on: "On",
 		off: "Off",
@@ -45,6 +74,23 @@ const text = defineMessages({
 		stopped: (time) => `Stopped ${time}`,
 		ended: (time) => `Ended ${time}`,
 		signedInUntil: (time) => `Signed in until ${time}`,
+		devices: "Devices",
+		devicesDescription: "The browsers and apps signed in to your account. To sign out this one, use Sign out in the menu.",
+		couldNotReadDevices: "Could not read your devices",
+		noDevices: "No device is signed in.",
+		thisDevice: "This device",
+		browserOn: (browser, system) => `${browser} on ${system}`,
+		aBrowserOn: (system) => `A browser on ${system}`,
+		unknownDevice: "Unknown device",
+		staffOf: (operator) => `${operator} staff`,
+		staff: "Staff",
+		signedInFromUntil: (from, until) => `Signed in ${from}, until ${until}`,
+		signOut: "Sign out",
+		signOutDevice: (name) => `Sign out ${name}?`,
+		signOutDeviceDescription: "It has to sign in again to use your account.",
+		signOutOthers: "Sign out of all other devices",
+		signOutOthersTitle: "Sign out of all other devices?",
+		signOutOthersDescription: "Every other browser and app signed in to your account has to sign in again. This device stays signed in.",
 		staffSignIns: "Staff sign-ins",
 		staffSignInsDescription: (operator) => `Each time staff of ${operator} signed in as someone here, newest first.`,
 		noStaffSignIns: "No staff has signed in as anyone yet.",
@@ -106,9 +152,24 @@ const text = defineMessages({
 		policySubtitle: "How people sign in to this app. Signed-in people keep their session, and are asked for what is newly required within 15 minutes."
 	},
 	nl: {
-		signInSecurity: "Inloggen en beveiliging",
+		account: "Account",
+		noAccount: "Geen accountpagina",
+		noAccountDescription: "Deze app heeft geen accountpagina voor je.",
 		signInPolicy: "Inlogbeleid",
 		couldNotReadMethods: "Kon je inlogmethoden niet lezen",
+		couldNotReadProfile: "Kon je profiel niet lezen",
+		profile: "Profiel",
+		profileDescription: "Je naam zoals anderen die in deze app zien, en het adres waarmee je inlogt.",
+		email: "E-mail",
+		changeName: "Naam wijzigen",
+		changeNameDescription: "De naam die anderen zien bij je opmerkingen, wijzigingen en uitnodigingen.",
+		changeEmail: "E-mailadres wijzigen",
+		changeEmailDescription: "We mailen een code naar het nieuwe adres. Zodra je die hier invult, log je in met dat adres.",
+		newEmail: "Nieuw e-mailadres",
+		sendCode: "Code versturen",
+		codeSentTo: (email) => `Vul de code van 6 cijfers in die we naar ${email} mailden. Die werkt 5 minuten. Heeft een ander account het adres, dan komt er geen code.`,
+		code: "Code",
+		otherAddress: "Ander adres gebruiken",
 		theProvider: "de provider",
 		loading: "Laden",
 		backupCodes: "Back-upcodes",
@@ -119,6 +180,20 @@ const text = defineMessages({
 		save: "Bewaren",
 		name: "Naam",
 		yourPassword: "Je wachtwoord",
+		passwordIsSet: "Log in met je e-mailadres en dit wachtwoord. Wijzigen vraagt het huidige.",
+		passwordNotSet: "Je logt nu in zonder wachtwoord. Stel er een in om ook met je e-mailadres en een wachtwoord in te loggen; je blijft overal ingelogd.",
+		passwordForbidden: "Je beheerder heeft wachtwoorden uitgezet voor deze app, dus je kunt er niet mee inloggen.",
+		passwordStaff: "Een medewerker die als iemand anders is ingelogd, kan diens wachtwoord niet wijzigen.",
+		passwordSaved: "Je wachtwoord is bewaard.",
+		changePassword: "Wachtwoord wijzigen",
+		setPassword: "Wachtwoord instellen",
+		currentPassword: "Huidig wachtwoord",
+		newPassword: "Nieuw wachtwoord",
+		repeatPassword: "Nieuw wachtwoord herhalen",
+		atLeast: (length) => `Minstens ${length} tekens.`,
+		useAtLeast: (length) => `Gebruik minstens ${length} tekens.`,
+		passwordTooLong: "Dat wachtwoord is te lang.",
+		passwordsDiffer: "De wachtwoorden zijn niet hetzelfde.",
 		continue: "Doorgaan",
 		on: "Aan",
 		off: "Uit",
@@ -149,6 +224,23 @@ const text = defineMessages({
 		stopped: (time) => `Gestopt ${time}`,
 		ended: (time) => `Afgelopen ${time}`,
 		signedInUntil: (time) => `Ingelogd tot ${time}`,
+		devices: "Apparaten",
+		devicesDescription: "De browsers en apps die op je account zijn ingelogd. Log hier uit met Uitloggen in het menu.",
+		couldNotReadDevices: "Kon je apparaten niet lezen",
+		noDevices: "Er is geen apparaat ingelogd.",
+		thisDevice: "Dit apparaat",
+		browserOn: (browser, system) => `${browser} op ${system}`,
+		aBrowserOn: (system) => `Een browser op ${system}`,
+		unknownDevice: "Onbekend apparaat",
+		staffOf: (operator) => `Medewerker van ${operator}`,
+		staff: "Medewerker",
+		signedInFromUntil: (from, until) => `Ingelogd ${from}, tot ${until}`,
+		signOut: "Uitloggen",
+		signOutDevice: (name) => `${name} uitloggen?`,
+		signOutDeviceDescription: "Dat moet opnieuw inloggen om je account te gebruiken.",
+		signOutOthers: "Uitloggen op alle andere apparaten",
+		signOutOthersTitle: "Uitloggen op alle andere apparaten?",
+		signOutOthersDescription: "Elke andere browser en app die op je account is ingelogd, moet opnieuw inloggen. Dit apparaat blijft ingelogd.",
 		staffSignIns: "Inlogs van medewerkers",
 		staffSignInsDescription: (operator) => `Elke keer dat een medewerker van ${operator} hier als iemand anders inlogde, nieuwste eerst.`,
 		noStaffSignIns: "Nog geen medewerker heeft als iemand anders ingelogd.",

package/dist/account/passkeys-section.js

@@ -1,11 +1,11 @@
 import { text } from "./messages.js";
-import { Badge } from "../primitives/badge.js";
-import { Input } from "../primitives/input.js";
-import { authMessage } from "../auth/auth-messages.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 { Input } from "../primitives/input.js";
+import { Badge } from "../primitives/badge.js";
 import { AccountSection, SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
 import { useState } from "react";
 import { KeyRound, Plus } from "lucide-react";
 import { AuthError } from "@protobase/client";

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

@@ -0,0 +1,119 @@
+import { text } from "./messages.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { Input } from "../primitives/input.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useId, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/password-change-dialog.tsx
+const passwordMessage = (error) => {
+	if (error.code === "PASSWORD_TOO_SHORT") return text("useAtLeast", 12);
+	if (error.code === "PASSWORD_TOO_LONG") return text("passwordTooLong");
+	return authMessage(error);
+};
+const draftProblem = (next, repeat) => {
+	if (next.length < 12) return text("useAtLeast", 12);
+	if (next !== repeat) return text("passwordsDiffer");
+};
+/** Changes the account's password with the current one, or sets a first one for an account without. */
+const PasswordChangeDialog = ({ hasPassword, onSave, onClose }) => {
+	const [current, setCurrent] = useState("");
+	const [next, setNext] = useState("");
+	const [repeat, setRepeat] = useState("");
+	const [signOutOthers, setSignOutOthers] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const formId = useId();
+	const filled = (!hasPassword || current) && next && repeat;
+	const save = async () => {
+		const problem = draftProblem(next, repeat);
+		setError(problem);
+		if (problem) return;
+		setBusy(true);
+		try {
+			await onSave({
+				current,
+				next,
+				signOutOthers
+			});
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(passwordMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		title: hasPassword ? text("changePassword") : text("setPassword"),
+		description: text("atLeast", 12),
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: text("cancel")
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			form: formId,
+			loading: busy,
+			disabled: !filled,
+			children: text("save")
+		})] }),
+		children: /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				save();
+			},
+			children: [
+				hasPassword && /* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 font-medium",
+					children: [text("currentPassword"), /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "current-password",
+						autoComplete: "current-password",
+						autoFocus: true,
+						value: current,
+						onChange: (event) => setCurrent(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 font-medium",
+					children: [text("newPassword"), /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "new-password",
+						autoComplete: "new-password",
+						autoFocus: !hasPassword,
+						value: next,
+						invalid: Boolean(error),
+						onChange: (event) => setNext(event.target.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 font-medium",
+					children: [text("repeatPassword"), /* @__PURE__ */ jsx(Input, {
+						type: "password",
+						name: "repeat-password",
+						autoComplete: "new-password",
+						value: repeat,
+						invalid: Boolean(error),
+						onChange: (event) => setRepeat(event.target.value)
+					})]
+				}),
+				hasPassword && /* @__PURE__ */ jsxs("label", {
+					className: "flex items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
+						checked: signOutOthers,
+						onChange: setSignOutOthers,
+						label: text("signOutOthers")
+					}), text("signOutOthers")]
+				}),
+				/* @__PURE__ */ jsx(SectionError, { message: error })
+			]
+		})
+	});
+};
+//#endregion
+export { PasswordChangeDialog };

package/dist/account/password-dialog.js

@@ -1,8 +1,8 @@
 import { text } from "./messages.js";
-import { Input } from "../primitives/input.js";
-import { authMessage } from "../auth/auth-messages.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
+import { Input } from "../primitives/input.js";
+import { authMessage } from "../auth/auth-messages.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/account/password-section.js

@@ -0,0 +1,51 @@
+import { text } from "./messages.js";
+import { Button } from "../primitives/button.js";
+import { AccountSection } from "./account-section.js";
+import { PasswordChangeDialog } from "./password-change-dialog.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/password-section.tsx
+const descriptionOf = ({ rule, hasPassword, staff }) => {
+	if (staff) return text("passwordStaff");
+	if (rule === "forbidden") return text("passwordForbidden");
+	return hasPassword ? text("passwordIsSet") : text("passwordNotSet");
+};
+/** The signed-in person's password: change it with the current one, or set a first one without signing anyone out. */
+const PasswordSection = ({ rule, hasPassword, staff, onChange, onSet }) => {
+	const [editing, setEditing] = useState(false);
+	const [saved, setSaved] = useState(false);
+	const canEdit = !staff && rule === "allowed";
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: text("password"),
+		description: descriptionOf({
+			rule,
+			hasPassword,
+			staff
+		}),
+		children: [
+			saved && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mb-3 font-medium",
+				children: text("passwordSaved")
+			}),
+			canEdit && /* @__PURE__ */ jsx(Button, {
+				onClick: () => {
+					setSaved(false);
+					setEditing(true);
+				},
+				children: hasPassword ? text("changePassword") : text("setPassword")
+			}),
+			editing && /* @__PURE__ */ jsx(PasswordChangeDialog, {
+				hasPassword,
+				onClose: () => setEditing(false),
+				onSave: async ({ current, next, signOutOthers }) => {
+					await (hasPassword ? onChange(current, next, signOutOthers) : onSet(next));
+					setEditing(false);
+					setSaved(true);
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { PasswordSection };

package/dist/account/profile-section.js

@@ -0,0 +1,107 @@
+import { text } from "./messages.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { Input } from "../primitives/input.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { ChangeEmailDialog } from "./change-email-dialog.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/profile-section.tsx
+/** The signed-in person's name, which they can change, and the address they sign in with, which they can change with mail. */
+const ProfileSection = ({ name, email, onRename, emailChange, onEmailChanged }) => {
+	const [editing, setEditing] = useState(false);
+	const [changingEmail, setChangingEmail] = useState(false);
+	const [draft, setDraft] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const rename = async () => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await onRename(draft.trim());
+			setEditing(false);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: text("profile"),
+		description: text("profileDescription"),
+		children: [
+			/* @__PURE__ */ jsxs("dl", {
+				className: "mb-3 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground",
+						children: text("name")
+					}),
+					/* @__PURE__ */ jsx("dd", {
+						className: "min-w-0 truncate font-medium",
+						children: name
+					}),
+					/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground",
+						children: text("email")
+					}),
+					/* @__PURE__ */ jsx("dd", {
+						className: "min-w-0 truncate font-medium",
+						children: email
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => {
+						setDraft(name);
+						setError(void 0);
+						setEditing(true);
+					},
+					children: text("changeName")
+				}), emailChange && /* @__PURE__ */ jsx(Button, {
+					onClick: () => setChangingEmail(true),
+					children: text("changeEmail")
+				})]
+			}),
+			editing && /* @__PURE__ */ jsxs(Dialog, {
+				title: text("changeName"),
+				description: text("changeNameDescription"),
+				onClose: () => setEditing(false),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setEditing(false),
+					children: text("cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					loading: busy,
+					disabled: !draft.trim() || draft.trim() === name,
+					onClick: () => void rename(),
+					children: text("save")
+				})] }),
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 font-medium",
+					children: [text("name"), /* @__PURE__ */ jsx(Input, {
+						autoFocus: true,
+						value: draft,
+						maxLength: 100,
+						onChange: (event) => setDraft(event.target.value)
+					})]
+				}), /* @__PURE__ */ jsx(SectionError, { message: error })]
+			}),
+			changingEmail && emailChange && /* @__PURE__ */ jsx(ChangeEmailDialog, {
+				email,
+				change: emailChange,
+				onClose: () => setChangingEmail(false),
+				onDone: () => {
+					setChangingEmail(false);
+					onEmailChanged?.();
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { ProfileSection };

package/dist/account/sign-in-policy-form.js

@@ -1,7 +1,7 @@
 import { text } from "./messages.js";
 import { cn } from "../lib/cn.js";
-import { formatDateTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
+import { formatDateTime } from "../format/date.js";
 import { policyRows, ruleLabel } from "./sign-in-policy-labels.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/account/sign-in-policy-page.js

@@ -1,8 +1,8 @@
 import { text } from "./messages.js";
+import { useAuth } from "../auth/auth-provider.js";
 import { Spinner } from "../primitives/spinner.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { authMessage } from "../auth/auth-messages.js";
-import { useAuth } from "../auth/auth-provider.js";
 import { SignInPolicyForm } from "./sign-in-policy-form.js";
 import { StaffSignInLog } from "./staff-sign-in-log.js";
 import { useEffect, useState } from "react";

package/dist/account/sign-in-providers-section.js

@@ -1,8 +1,8 @@
 import { text } from "./messages.js";
-import { Badge } from "../primitives/badge.js";
-import { authMessage } from "../auth/auth-messages.js";
 import { Button } from "../primitives/button.js";
+import { Badge } from "../primitives/badge.js";
 import { AccountSection, SectionError } from "./account-section.js";
+import { authMessage } from "../auth/auth-messages.js";
 import { useState } from "react";
 import { Link2 } from "lucide-react";
 import { AuthError } from "@protobase/client";

package/dist/account/staff-sign-in-log.js

@@ -1,6 +1,6 @@
 import { text } from "./messages.js";
-import { Badge } from "../primitives/badge.js";
 import { formatDateTime } from "../format/date.js";
+import { Badge } from "../primitives/badge.js";
 import { AccountSection, SectionError } from "./account-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/staff-sign-in-log.tsx

package/dist/account/two-factor-section.js

@@ -1,7 +1,7 @@
 import { text } from "./messages.js";
-import { Badge } from "../primitives/badge.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
+import { Badge } from "../primitives/badge.js";
 import { AccountSection } from "./account-section.js";
 import { BackupCodes } from "./backup-codes.js";
 import { PasswordDialog } from "./password-dialog.js";

package/dist/account/two-factor-setup.js

@@ -1,10 +1,10 @@
 import { text } from "./messages.js";
 import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
 import { Input } from "../primitives/input.js";
 import { authMessage } from "../auth/auth-messages.js";
-import { Button } from "../primitives/button.js";
-import { BackupCodes } from "./backup-codes.js";
 import { OtpInput } from "../primitives/otp-input.js";
+import { BackupCodes } from "./backup-codes.js";
 import { TotpQr, totpKey } from "./totp-qr.js";
 import { useState } from "react";
 import { AuthError } from "@protobase/client";

package/dist/activity-chart/activity-chart.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
-import { Segmented } from "../primitives/segmented.js";
+import { activitySeries } from "../mocks/activity.js";
 import { formatInt } from "../format/number.js";
 import { formatDayShort } from "../format/date.js";
-import { activitySeries } from "../mocks/activity.js";
+import { Segmented } from "../primitives/segmented.js";
 import { halfOverHalfDelta, totalCount } from "./activity-math.js";
 import { ActivityTooltip } from "./activity-tooltip.js";
 import { text } from "./messages.js";

package/dist/app/app.js

@@ -1,34 +1,35 @@
 import { setFallbackLocale } from "../locale/active-locale.js";
-import { accountMenuItems } from "../account/account-pages.js";
-import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
-import { AppShell } from "../app-shell/app-shell.js";
+import { accountMenuItems, readAccountPath } from "../account/account-pages.js";
 import { AuthProvider, useAuth } from "../auth/auth-provider.js";
-import { AccountSecurityPage } from "../account/account-security-page.js";
+import { ApiProvider } from "../data/api-provider.js";
+import { sourceStatusOf } from "../data/with-sources.js";
+import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
+import { pageTabs, shownPageTab } from "./pages/page-tabs.js";
+import { ToastProvider } from "../toasts/toast-provider.js";
+import { humanize } from "../live/naming.js";
+import { recordTitle } from "../live/model-helpers.js";
 import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
+import { useAppAddress } from "./use-app-address.js";
+import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
+import { startErrorReporting } from "./error-reporting.js";
+import { slotted } from "../locale/slotted.js";
+import { CustomBoundary } from "./pages/custom-boundary.js";
+import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
+import { AppShell } from "../app-shell/app-shell.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
-import { ApiProvider } from "../data/api-provider.js";
-import { sourceStatusOf } from "../data/with-sources.js";
-import { MetaGate, Notice, useAdminMeta } from "./meta-gate.js";
+import { managesOrganization, organizationMenuItems, organizationPageTitle } from "../organizations/organization-paths.js";
+import { AccountPage, useAccountPage } from "../account/account-page.js";
 import { ConnectPage } from "../connect/connect-page.js";
 import { SignInPolicyPage } from "../account/sign-in-policy-page.js";
-import { slotted } from "../locale/slotted.js";
-import { managesOrganization, organizationMenuItems, organizationPageTitle } from "../organizations/organization-paths.js";
-import { startErrorReporting } from "./error-reporting.js";
-import { CustomBoundary } from "./pages/custom-boundary.js";
 import { PluginSourceProvider } from "../plugins/plugin-source.js";
 import { AuthGate } from "../auth/auth-gate.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { AuthLocale } from "../auth/auth-locale.js";
 import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
-import { humanize } from "../live/naming.js";
-import { ToastProvider } from "../toasts/toast-provider.js";
-import { recordTitle } from "../live/model-helpers.js";
-import { useAppAddress } from "./use-app-address.js";
 import { documentTitle, titleParts, useDocumentTitle } from "./document-title.js";
-import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
 import { PublicFormPage } from "../forms/public-form-page.js";
 import { useFormAddress } from "../forms/use-form-address.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
@@ -147,7 +148,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const current = organizations.current;
 	const outsideOrganizations = Boolean(organizationSettings) && current !== void 0 && !current.organization;
 	const organizationPage = organizationSettings && user ? organizationPageTitle(path) : void 0;
-	const accountPage = path === connectRoute ? "Connect an app" : !user ? void 0 : path === "/-/account" ? text("signInSecurity") : path === "/-/sign-in-policy" ? text("signInPolicy") : organizationPage;
+	const account = useAccountPage();
+	const accountAddress = user ? readAccountPath(path) : void 0;
+	const accountTab = accountAddress && account ? shownPageTab(pageTabs(account.tree), accountAddress.tab) : void 0;
+	const accountPage = path === connectRoute ? "Connect an app" : !user ? void 0 : accountAddress ? account?.title ?? text("account") : path === "/-/sign-in-policy" ? text("signInPolicy") : organizationPage;
 	const resourceLabel = view?.names?.plural ?? (resource && humanize(resource));
 	const breadcrumb = accountPage ? [accountPage] : breadcrumbFor({
 		basePath,
@@ -159,9 +163,17 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		recordLoading: titleLoading
 	});
 	const singular = view?.names?.singular ?? (resource && humanize(resource));
+	const pageTab = page && address?.kind === "page" ? shownPageTab(pageTabs(page.tree), address.tab) : void 0;
+	const pageTitle = page ? {
+		title: page.title,
+		...pageTab && { tab: pageTab.label }
+	} : accountAddress && account && {
+		title: account.title,
+		...accountTab && { tab: accountTab.label }
+	};
 	useDocumentTitle(documentTitle(titleParts({
 		address,
-		page,
+		page: pageTitle,
 		accountPage,
 		resourceLabel,
 		singular,
@@ -174,7 +186,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	}) : /* @__PURE__ */ jsx(SignInPrompt, {
 		as: "page",
 		prompt: connectPrompt
-	}) : user && path === "/-/account" ? /* @__PURE__ */ jsx(AccountSecurityPage, { email: user.email }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
+	}) : accountAddress ? /* @__PURE__ */ jsx(AccountPage, { ...accountAddress }) : user && path === "/-/sign-in-policy" ? admin ? /* @__PURE__ */ jsx(SignInPolicyPage, {}) : /* @__PURE__ */ jsx(Notice, {
 		title: text("adminsOnly"),
 		children: text("onlyAdminPolicy")
 	}) : organizationPage && path === "/-/organization" ? /* @__PURE__ */ jsx(OrganizationPage, {
@@ -193,7 +205,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	}) : /* @__PURE__ */ jsx(Notice, {
 		title: text("notFound"),
 		children: text("nothingHere")
-	}) : address.kind === "page" ? page ? /* @__PURE__ */ jsx(ComposedPage, { name: page.name }, page.name) : /* @__PURE__ */ jsx(Notice, {
+	}) : address.kind === "page" ? page ? /* @__PURE__ */ jsx(ComposedPage, {
+		name: page.name,
+		...address.tab && { tab: address.tab }
+	}, page.name) : /* @__PURE__ */ jsx(Notice, {
 		title: text("notFound"),
 		children: slotted(text("noPage"), address.page)
 	}) : drawnFrom && drawnFrom.state !== "ready" ? /* @__PURE__ */ jsx(SourceNotice, { status: drawnFrom }) : address.kind === "create" ? /* @__PURE__ */ jsx(CreateRoute, {
@@ -219,10 +234,11 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 		navGroups: groups,
 		bottomBar: bottomBarFromMeta(meta, basePath, place),
 		userMenu: [
-			...userMenuFromMeta(meta, basePath, place),
-			...organizationSettings && user ? organizationMenuItems(basePath, path, current) : [],
-			...user ? accountMenuItems(basePath, path, admin) : []
+			userMenuFromMeta(meta, basePath, place),
+			organizationSettings && user ? organizationMenuItems(basePath, path, current) : [],
+			user ? accountMenuItems(basePath, path, admin) : []
 		],
+		account: user && `${basePath}/-/account`,
 		organizations: organizationSettings && {
 			...current?.organization && { current: {
 				id: current.organization.id,

package/dist/app/charts/chart-view.js

@@ -1,6 +1,6 @@
-import { Skeleton } from "../../primitives/skeleton.js";
-import { viewerZone } from "../../format/zone.js";
 import { useAdminMeta } from "../meta-gate.js";
+import { viewerZone } from "../../format/zone.js";
+import { Skeleton } from "../../primitives/skeleton.js";
 import { labelFieldOf } from "../../live/model-helpers.js";
 import { useAggregate } from "../../data/use-aggregates.js";
 import { text } from "./messages.js";