@broberg/app-shell 0.3.1 → 0.4.0

package/dist/preact.d.cts

@@ -1,4 +1,4 @@
-import { ComponentChildren, JSX } from 'preact';
+import { JSX, ComponentChildren } from 'preact';
 import { NotificationRow } from '@broberg/notifications/types';
 export { NotificationRow } from '@broberg/notifications/types';
 
@@ -101,6 +101,58 @@ declare function createMemoryNotificationSource(initial?: NotificationRow[]): No
 };
 /** "nu", "5 min", "3 t", "i går", "4 d" (da) or the English equivalents. */
 declare function relativeTime(ts: string | number, lang: "da" | "en", now?: number): string;
+/** What every account call resolves to — the profile AS THE SERVER NOW HOLDS IT. */
+interface AccountProfile {
+    sub: string;
+    name: string | null;
+    picture: string | null;
+    email: string | null;
+    /** Broberg ID's own account page (password, passkeys, sessions). */
+    account_url: string;
+}
+/** Where the account page gets and saves the profile. Swap it to point anywhere. */
+interface AccountAdapter {
+    load(): Promise<AccountProfile>;
+    saveName(name: string): Promise<AccountProfile>;
+    uploadAvatar(file: Blob): Promise<AccountProfile>;
+    removeAvatar(): Promise<AccountProfile>;
+}
+/** A failed account call: the HTTP status and the server's `error` code, if any. */
+declare class AccountError extends Error {
+    readonly status: number;
+    readonly code?: string | undefined;
+    constructor(status: number, code?: string | undefined);
+}
+declare const AVATAR_TYPES: readonly ["image/png", "image/jpeg", "image/webp"];
+declare const AVATAR_MAX_BYTES: number;
+/** Checked BEFORE uploading, so a file the server will refuse is never sent. */
+declare function checkAvatarFile(file: {
+    size: number;
+    type: string;
+}): "tooLarge" | "wrongType" | null;
+/**
+ * What a failed call means for the page. `reauth` = the user's session or its
+ * scope does not allow the change (401, or 403 insufficient_scope): signing in
+ * again is the fix, so the page says that instead of «try again».
+ */
+declare function accountErrorKind(err: unknown): "reauth" | "tooLarge" | "wrongType" | "other";
+/**
+ * The default adapter: the app's own backend, shaped after @broberg/sso's
+ * `accountRoutes()`.
+ *
+ *   GET  {url}/profile                → AccountProfile
+ *   POST {url}/profile         {name} → AccountProfile
+ *   POST {url}/profile/avatar  (raw bytes, Content-Type = the image's) → AccountProfile
+ *   POST {url}/profile/avatar/remove  → AccountProfile
+ *
+ * A non-2xx THROWS an AccountError — a failed save must never look like a
+ * saved one.
+ */
+declare function createFetchAccountAdapter(opts?: {
+    url?: string;
+    fetch?: typeof fetch;
+    credentials?: RequestCredentials;
+}): AccountAdapter;
 declare const TEXT: {
     readonly da: {
         readonly openMenu: "Åbn menu";
@@ -129,6 +181,26 @@ declare const TEXT: {
         readonly backdrop: "Baggrund";
         readonly neurons: "Neuroner";
         readonly plain: "Ren";
+        readonly name: "Navn";
+        readonly email: "E-mail";
+        readonly save: "Gem";
+        readonly saving: "Gemmer…";
+        readonly saved: "Gemt";
+        readonly loadingProfile: "Henter profil…";
+        readonly couldNotLoadProfile: "Kunne ikke hente din profil.";
+        readonly couldNotSave: "Kunne ikke gemme. Prøv igen.";
+        readonly reauth: "Log ind igen for at rette";
+        readonly signInAgain: "Log ind igen";
+        readonly changePicture: "Skift billede";
+        readonly removePicture: "Fjern billede";
+        readonly confirmRemovePicture: "Fjern dit billede?";
+        readonly remove: "Fjern";
+        readonly cancel: "Annuller";
+        readonly pictureSaved: "Billedet er gemt";
+        readonly pictureRemoved: "Billedet er fjernet";
+        readonly pictureTooLarge: "Billedet er for stort — højst 2 MB.";
+        readonly pictureWrongType: "Vælg et PNG-, JPEG- eller WebP-billede.";
+        readonly bidSecurity: "Sikkerhed i Broberg ID";
     };
     readonly en: {
         readonly openMenu: "Open menu";
@@ -157,6 +229,26 @@ declare const TEXT: {
         readonly backdrop: "Backdrop";
         readonly neurons: "Neurons";
         readonly plain: "Plain";
+        readonly name: "Name";
+        readonly email: "Email";
+        readonly save: "Save";
+        readonly saving: "Saving…";
+        readonly saved: "Saved";
+        readonly loadingProfile: "Loading profile…";
+        readonly couldNotLoadProfile: "Could not load your profile.";
+        readonly couldNotSave: "Could not save. Try again.";
+        readonly reauth: "Sign in again to make changes";
+        readonly signInAgain: "Sign in again";
+        readonly changePicture: "Change picture";
+        readonly removePicture: "Remove picture";
+        readonly confirmRemovePicture: "Remove your picture?";
+        readonly remove: "Remove";
+        readonly cancel: "Cancel";
+        readonly pictureSaved: "Picture saved";
+        readonly pictureRemoved: "Picture removed";
+        readonly pictureTooLarge: "The picture is too large — 2 MB at most.";
+        readonly pictureWrongType: "Choose a PNG, JPEG or WebP image.";
+        readonly bidSecurity: "Security in Broberg ID";
     };
 };
 type Lang = keyof typeof TEXT;
@@ -340,5 +432,29 @@ interface AppShellProps {
     children?: ComponentChildren;
 }
 declare function AppShell(p: AppShellProps): JSX.Element;
+interface AccountPageProps {
+    lang: Lang;
+    /** Default: `createFetchAccountAdapter()` → /api/account/profile* (@broberg/sso accountRoutes). */
+    adapter?: AccountAdapter;
+    /**
+     * Where «Log ind igen» goes — a FULL page load, so the app's login flow runs.
+     * Default `/auth/login?returnTo=<current path>` (no prompt=login — that forces
+     * re-proof and is a redirect-loop trap, F084.108). Broberg ID issues
+     * no refresh token, so about an hour after login every change answers 401
+     * reauth: that is a normal state here, not an error.
+     */
+    reauthHref?: string;
+}
+/** `/auth/login?returnTo=<this page>` — back here after signing in. */
+declare function defaultReauthHref(): string;
+/**
+ * The user's own name and picture, edited inside the app (F095.3).
+ *
+ * EVERYTHING SHOWN AFTER A SAVE IS THE SERVER'S ANSWER, never what was typed
+ * (CLAUDE.md «Et gem-felt SKAL bevises at gemme»): if Broberg ID trims or
+ * changes the name, the field shows that. On a failed save the field keeps the
+ * typed text, so nothing is lost and the error says why.
+ */
+declare function AccountPage({ lang, adapter, reauthHref }: AccountPageProps): JSX.Element;
 
-export { AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, badgeLabel, checkAvatarFile, createFetchAccountAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -1,4 +1,4 @@
-import { ComponentChildren, JSX } from 'preact';
+import { JSX, ComponentChildren } from 'preact';
 import { NotificationRow } from '@broberg/notifications/types';
 export { NotificationRow } from '@broberg/notifications/types';
 
@@ -101,6 +101,58 @@ declare function createMemoryNotificationSource(initial?: NotificationRow[]): No
 };
 /** "nu", "5 min", "3 t", "i går", "4 d" (da) or the English equivalents. */
 declare function relativeTime(ts: string | number, lang: "da" | "en", now?: number): string;
+/** What every account call resolves to — the profile AS THE SERVER NOW HOLDS IT. */
+interface AccountProfile {
+    sub: string;
+    name: string | null;
+    picture: string | null;
+    email: string | null;
+    /** Broberg ID's own account page (password, passkeys, sessions). */
+    account_url: string;
+}
+/** Where the account page gets and saves the profile. Swap it to point anywhere. */
+interface AccountAdapter {
+    load(): Promise<AccountProfile>;
+    saveName(name: string): Promise<AccountProfile>;
+    uploadAvatar(file: Blob): Promise<AccountProfile>;
+    removeAvatar(): Promise<AccountProfile>;
+}
+/** A failed account call: the HTTP status and the server's `error` code, if any. */
+declare class AccountError extends Error {
+    readonly status: number;
+    readonly code?: string | undefined;
+    constructor(status: number, code?: string | undefined);
+}
+declare const AVATAR_TYPES: readonly ["image/png", "image/jpeg", "image/webp"];
+declare const AVATAR_MAX_BYTES: number;
+/** Checked BEFORE uploading, so a file the server will refuse is never sent. */
+declare function checkAvatarFile(file: {
+    size: number;
+    type: string;
+}): "tooLarge" | "wrongType" | null;
+/**
+ * What a failed call means for the page. `reauth` = the user's session or its
+ * scope does not allow the change (401, or 403 insufficient_scope): signing in
+ * again is the fix, so the page says that instead of «try again».
+ */
+declare function accountErrorKind(err: unknown): "reauth" | "tooLarge" | "wrongType" | "other";
+/**
+ * The default adapter: the app's own backend, shaped after @broberg/sso's
+ * `accountRoutes()`.
+ *
+ *   GET  {url}/profile                → AccountProfile
+ *   POST {url}/profile         {name} → AccountProfile
+ *   POST {url}/profile/avatar  (raw bytes, Content-Type = the image's) → AccountProfile
+ *   POST {url}/profile/avatar/remove  → AccountProfile
+ *
+ * A non-2xx THROWS an AccountError — a failed save must never look like a
+ * saved one.
+ */
+declare function createFetchAccountAdapter(opts?: {
+    url?: string;
+    fetch?: typeof fetch;
+    credentials?: RequestCredentials;
+}): AccountAdapter;
 declare const TEXT: {
     readonly da: {
         readonly openMenu: "Åbn menu";
@@ -129,6 +181,26 @@ declare const TEXT: {
         readonly backdrop: "Baggrund";
         readonly neurons: "Neuroner";
         readonly plain: "Ren";
+        readonly name: "Navn";
+        readonly email: "E-mail";
+        readonly save: "Gem";
+        readonly saving: "Gemmer…";
+        readonly saved: "Gemt";
+        readonly loadingProfile: "Henter profil…";
+        readonly couldNotLoadProfile: "Kunne ikke hente din profil.";
+        readonly couldNotSave: "Kunne ikke gemme. Prøv igen.";
+        readonly reauth: "Log ind igen for at rette";
+        readonly signInAgain: "Log ind igen";
+        readonly changePicture: "Skift billede";
+        readonly removePicture: "Fjern billede";
+        readonly confirmRemovePicture: "Fjern dit billede?";
+        readonly remove: "Fjern";
+        readonly cancel: "Annuller";
+        readonly pictureSaved: "Billedet er gemt";
+        readonly pictureRemoved: "Billedet er fjernet";
+        readonly pictureTooLarge: "Billedet er for stort — højst 2 MB.";
+        readonly pictureWrongType: "Vælg et PNG-, JPEG- eller WebP-billede.";
+        readonly bidSecurity: "Sikkerhed i Broberg ID";
     };
     readonly en: {
         readonly openMenu: "Open menu";
@@ -157,6 +229,26 @@ declare const TEXT: {
         readonly backdrop: "Backdrop";
         readonly neurons: "Neurons";
         readonly plain: "Plain";
+        readonly name: "Name";
+        readonly email: "Email";
+        readonly save: "Save";
+        readonly saving: "Saving…";
+        readonly saved: "Saved";
+        readonly loadingProfile: "Loading profile…";
+        readonly couldNotLoadProfile: "Could not load your profile.";
+        readonly couldNotSave: "Could not save. Try again.";
+        readonly reauth: "Sign in again to make changes";
+        readonly signInAgain: "Sign in again";
+        readonly changePicture: "Change picture";
+        readonly removePicture: "Remove picture";
+        readonly confirmRemovePicture: "Remove your picture?";
+        readonly remove: "Remove";
+        readonly cancel: "Cancel";
+        readonly pictureSaved: "Picture saved";
+        readonly pictureRemoved: "Picture removed";
+        readonly pictureTooLarge: "The picture is too large — 2 MB at most.";
+        readonly pictureWrongType: "Choose a PNG, JPEG or WebP image.";
+        readonly bidSecurity: "Security in Broberg ID";
     };
 };
 type Lang = keyof typeof TEXT;
@@ -340,5 +432,29 @@ interface AppShellProps {
     children?: ComponentChildren;
 }
 declare function AppShell(p: AppShellProps): JSX.Element;
+interface AccountPageProps {
+    lang: Lang;
+    /** Default: `createFetchAccountAdapter()` → /api/account/profile* (@broberg/sso accountRoutes). */
+    adapter?: AccountAdapter;
+    /**
+     * Where «Log ind igen» goes — a FULL page load, so the app's login flow runs.
+     * Default `/auth/login?returnTo=<current path>` (no prompt=login — that forces
+     * re-proof and is a redirect-loop trap, F084.108). Broberg ID issues
+     * no refresh token, so about an hour after login every change answers 401
+     * reauth: that is a normal state here, not an error.
+     */
+    reauthHref?: string;
+}
+/** `/auth/login?returnTo=<this page>` — back here after signing in. */
+declare function defaultReauthHref(): string;
+/**
+ * The user's own name and picture, edited inside the app (F095.3).
+ *
+ * EVERYTHING SHOWN AFTER A SAVE IS THE SERVER'S ANSWER, never what was typed
+ * (CLAUDE.md «Et gem-felt SKAL bevises at gemme»): if Broberg ID trims or
+ * changes the name, the field shows that. On a failed save the field keeps the
+ * typed text, so nothing is lost and the error says why.
+ */
+declare function AccountPage({ lang, adapter, reauthHref }: AccountPageProps): JSX.Element;
 
-export { AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, AppShell, type AppShellProps, Avatar, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, accountErrorKind, activeNavLabel, badgeLabel, checkAvatarFile, createFetchAccountAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -179,6 +179,51 @@ function relativeTime(ts, lang, now = Date.now()) {
   if (d === 1) return lang === "da" ? "i g\xE5r" : "yesterday";
   return `${d} d`;
 }
+var AccountError = class extends Error {
+  constructor(status, code) {
+    super(code ? `HTTP ${status} ${code}` : `HTTP ${status}`);
+    this.status = status;
+    this.code = code;
+    this.name = "AccountError";
+  }
+  status;
+  code;
+};
+var AVATAR_TYPES = ["image/png", "image/jpeg", "image/webp"];
+var AVATAR_MAX_BYTES = 2 * 1024 * 1024;
+function checkAvatarFile(file) {
+  if (!AVATAR_TYPES.includes(file.type)) return "wrongType";
+  if (file.size > AVATAR_MAX_BYTES) return "tooLarge";
+  return null;
+}
+function accountErrorKind(err) {
+  if (!(err instanceof AccountError)) return "other";
+  if (err.status === 401) return "reauth";
+  if (err.status === 403 && err.code === "insufficient_scope") return "reauth";
+  if (err.status === 413) return "tooLarge";
+  if (err.status === 415) return "wrongType";
+  return "other";
+}
+function createFetchAccountAdapter(opts = {}) {
+  const base = (opts.url ?? "/api/account").replace(/\/+$/, "");
+  const call = async (path, init) => {
+    const res = await (opts.fetch ?? fetch)(`${base}${path}`, {
+      credentials: opts.credentials ?? "same-origin",
+      ...init,
+      headers: { accept: "application/json", ...init?.headers }
+    });
+    const body = await res.json().catch(() => null);
+    if (!res.ok) throw new AccountError(res.status, typeof body?.error === "string" ? body.error : void 0);
+    if (!body || typeof body.sub !== "string") throw new AccountError(res.status, "bad_response");
+    return body;
+  };
+  return {
+    load: () => call("/profile"),
+    saveName: (name) => call("/profile", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ name }) }),
+    uploadAvatar: (file) => call("/profile/avatar", { method: "POST", headers: { "content-type": file.type }, body: file }),
+    removeAvatar: () => call("/profile/avatar/remove", { method: "POST" })
+  };
+}
 var TEXT = {
   da: {
     openMenu: "\xC5bn menu",
@@ -206,7 +251,27 @@ var TEXT = {
     layered: "Lag",
     backdrop: "Baggrund",
     neurons: "Neuroner",
-    plain: "Ren"
+    plain: "Ren",
+    name: "Navn",
+    email: "E-mail",
+    save: "Gem",
+    saving: "Gemmer\u2026",
+    saved: "Gemt",
+    loadingProfile: "Henter profil\u2026",
+    couldNotLoadProfile: "Kunne ikke hente din profil.",
+    couldNotSave: "Kunne ikke gemme. Pr\xF8v igen.",
+    reauth: "Log ind igen for at rette",
+    signInAgain: "Log ind igen",
+    changePicture: "Skift billede",
+    removePicture: "Fjern billede",
+    confirmRemovePicture: "Fjern dit billede?",
+    remove: "Fjern",
+    cancel: "Annuller",
+    pictureSaved: "Billedet er gemt",
+    pictureRemoved: "Billedet er fjernet",
+    pictureTooLarge: "Billedet er for stort \u2014 h\xF8jst 2 MB.",
+    pictureWrongType: "V\xE6lg et PNG-, JPEG- eller WebP-billede.",
+    bidSecurity: "Sikkerhed i Broberg ID"
   },
   en: {
     openMenu: "Open menu",
@@ -234,7 +299,27 @@ var TEXT = {
     layered: "Layered",
     backdrop: "Backdrop",
     neurons: "Neurons",
-    plain: "Plain"
+    plain: "Plain",
+    name: "Name",
+    email: "Email",
+    save: "Save",
+    saving: "Saving\u2026",
+    saved: "Saved",
+    loadingProfile: "Loading profile\u2026",
+    couldNotLoadProfile: "Could not load your profile.",
+    couldNotSave: "Could not save. Try again.",
+    reauth: "Sign in again to make changes",
+    signInAgain: "Sign in again",
+    changePicture: "Change picture",
+    removePicture: "Remove picture",
+    confirmRemovePicture: "Remove your picture?",
+    remove: "Remove",
+    cancel: "Cancel",
+    pictureSaved: "Picture saved",
+    pictureRemoved: "Picture removed",
+    pictureTooLarge: "The picture is too large \u2014 2 MB at most.",
+    pictureWrongType: "Choose a PNG, JPEG or WebP image.",
+    bidSecurity: "Security in Broberg ID"
   }
 };
 var MOBILE_QUERY = "(max-width: 767px)";
@@ -913,7 +998,161 @@ function AppShell(p) {
     ] })
   ] });
 }
+function defaultReauthHref() {
+  const here = typeof location === "undefined" ? "/" : location.pathname + location.search;
+  return `/auth/login?returnTo=${encodeURIComponent(here)}`;
+}
+function AccountPage({ lang, adapter, reauthHref }) {
+  const t = TEXT[lang];
+  const api = useMemo(() => adapter ?? createFetchAccountAdapter(), [adapter]);
+  const [profile, setProfile] = useState(null);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState("load");
+  const [notice, setNotice] = useState(null);
+  const [reauth, setReauth] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const fileRef = useRef(null);
+  const apply = (p) => {
+    setProfile(p);
+    setDraft(p.name ?? "");
+  };
+  const fail = (err, fallback) => {
+    const kind = accountErrorKind(err);
+    if (kind === "reauth") {
+      setReauth(true);
+      setNotice(null);
+      return;
+    }
+    const text = kind === "tooLarge" ? t.pictureTooLarge : kind === "wrongType" ? t.pictureWrongType : fallback;
+    setNotice({ kind: "error", text });
+  };
+  useEffect(() => {
+    let live = true;
+    setBusy("load");
+    api.load().then(
+      (p) => live && (apply(p), setBusy(null)),
+      (e) => live && (fail(e, t.couldNotLoadProfile), setBusy(null))
+    );
+    return () => {
+      live = false;
+    };
+  }, [api]);
+  const run = async (what, op, okText) => {
+    setBusy(what);
+    setNotice(null);
+    try {
+      apply(await op());
+      setNotice({ kind: "ok", text: okText });
+    } catch (e) {
+      fail(e, t.couldNotSave);
+    } finally {
+      setBusy(null);
+    }
+  };
+  const onSaveName = (e) => {
+    e.preventDefault();
+    if (busy || reauth) return;
+    void run("name", () => api.saveName(draft), t.saved);
+  };
+  const onFile = (e) => {
+    const input = e.currentTarget;
+    const file = input.files?.[0];
+    input.value = "";
+    if (!file || busy || reauth) return;
+    const bad = checkAvatarFile(file);
+    if (bad) {
+      setNotice({ kind: "error", text: bad === "tooLarge" ? t.pictureTooLarge : t.pictureWrongType });
+      return;
+    }
+    void run("avatar", () => api.uploadAvatar(file), t.pictureSaved);
+  };
+  const onRemove = () => {
+    setConfirming(false);
+    void run("avatar", () => api.removeAvatar(), t.pictureRemoved);
+  };
+  const locked = reauth || busy !== null || profile === null;
+  const user = { name: profile?.name ?? void 0, email: profile?.email ?? void 0, picture: profile?.picture ?? void 0 };
+  return /* @__PURE__ */ jsxs("section", { class: "bas-account", "data-testid": "account-page", "aria-busy": busy !== null, children: [
+    reauth ? /* @__PURE__ */ jsxs("div", { class: "bas-account__note is-reauth", role: "alert", "data-testid": "account-reauth", children: [
+      /* @__PURE__ */ jsx("span", { "data-testid": "account-reauth-text", children: t.reauth }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          class: "bas-account__btn is-primary",
+          onClick: () => window.location.assign(reauthHref ?? defaultReauthHref()),
+          "data-testid": "account-reauth-signin",
+          children: t.signInAgain
+        }
+      )
+    ] }) : null,
+    notice ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        class: "bas-account__note " + (notice.kind === "ok" ? "is-ok" : "is-error"),
+        role: notice.kind === "ok" ? "status" : "alert",
+        "data-testid": notice.kind === "ok" ? "account-ok" : "account-error",
+        children: notice.text
+      }
+    ) : null,
+    busy === "load" ? /* @__PURE__ */ jsx("p", { class: "bas-account__muted", "data-testid": "account-loading", children: t.loadingProfile }) : null,
+    profile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { class: "bas-account__who", children: [
+        /* @__PURE__ */ jsx("span", { class: "bas-account__avatar", "data-testid": "account-avatar", "data-picture": profile.picture ?? "", children: /* @__PURE__ */ jsx(Avatar, { user, size: 72 }, profile.picture ?? "none") }),
+        /* @__PURE__ */ jsxs("div", { class: "bas-account__whotext", children: [
+          /* @__PURE__ */ jsx("div", { class: "bas-account__name", "data-testid": "account-name", children: profile.name ?? "" }),
+          /* @__PURE__ */ jsx("div", { class: "bas-account__email", "data-testid": "account-email", children: profile.email ?? "" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { class: "bas-account__row", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            accept: AVATAR_TYPES.join(","),
+            hidden: true,
+            tabIndex: -1,
+            onChange: onFile,
+            "data-testid": "account-avatar-file"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", class: "bas-account__btn", disabled: locked, onClick: () => fileRef.current?.click(), "data-testid": "account-avatar-upload", children: busy === "avatar" ? t.saving : t.changePicture }),
+        profile.picture && !confirming ? /* @__PURE__ */ jsx("button", { type: "button", class: "bas-account__btn is-quiet", disabled: locked, onClick: () => setConfirming(true), "data-testid": "account-avatar-remove", children: t.removePicture }) : null,
+        profile.picture && confirming ? /* @__PURE__ */ jsxs("span", { class: "bas-account__confirm", role: "group", "data-testid": "account-avatar-remove-confirmation", children: [
+          /* @__PURE__ */ jsx("span", { children: t.confirmRemovePicture }),
+          /* @__PURE__ */ jsx("button", { type: "button", class: "bas-account__btn is-danger", disabled: locked, onClick: onRemove, "data-testid": "account-avatar-remove-confirm", children: t.remove }),
+          /* @__PURE__ */ jsx("button", { type: "button", class: "bas-account__btn is-quiet", onClick: () => setConfirming(false), "data-testid": "account-avatar-remove-cancel", children: t.cancel })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("form", { class: "bas-account__form", onSubmit: onSaveName, children: [
+        /* @__PURE__ */ jsx("label", { class: "bas-account__label", for: "bas-account-name", children: t.name }),
+        /* @__PURE__ */ jsxs("div", { class: "bas-account__row", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "bas-account-name",
+              class: "bas-account__input",
+              type: "text",
+              autocomplete: "name",
+              value: draft,
+              readOnly: reauth,
+              "aria-readonly": reauth,
+              onInput: (e) => {
+                setDraft(e.currentTarget.value);
+                if (notice?.kind === "ok") setNotice(null);
+              },
+              "data-testid": "account-name-input"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "submit", class: "bas-account__btn is-primary", disabled: locked, "data-testid": "account-name-save", children: busy === "name" ? t.saving : t.save })
+        ] })
+      ] }),
+      profile.account_url ? /* @__PURE__ */ jsx(NavLink, { href: profile.account_url, class: "bas-account__link", "data-testid": "account-bid-link", children: t.bidSecurity }) : null
+    ] }) : null
+  ] });
+}
 
-export { AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, activeNavLabel, badgeLabel, createFetchNotificationSource, createMemoryNotificationSource, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, AccountError, AccountPage, AppShell, Avatar, NotificationBell, PageHeader, PageTabs, Sidebar, TEXT, TopBar, UserMenu, accountErrorKind, activeNavLabel, badgeLabel, checkAvatarFile, createFetchAccountAdapter, createFetchNotificationSource, createMemoryNotificationSource, defaultReauthHref, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
 //# sourceMappingURL=preact.js.map
 //# sourceMappingURL=preact.js.map