@oxyhq/services 30.0.0 → 30.1.0

package/lib/module/ui/components/SurfaceScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Suspense","useCallback","useEffect","useMemo","useState","ActivityIndicator","StyleSheet","Text","View","useWindowDimensions","useStore","useTheme","useDialogFrame","useDialogHeader","getScreenComponent","pushSurfaceBackHandler","getSurfaceConfig","closeAllRouteSurfaces","navigateWithinOrPresent","presentRoute","replaceWithinOrPresent","SurfaceHeaderContext","jsx","_jsx","jsxs","_jsxs","ScreenErrorBoundary","Component","state","error","getDerivedStateFromError","componentDidCatch","info","__DEV__","console","props","screenName","componentStack","componentDidUpdate","prevProps","setState","render","style","errorStyles","container","children","title","message","create","flex","alignItems","justifyContent","padding","fontSize","fontWeight","marginBottom","textAlign","ScreenPending","theme","size","color","colors","primary","SurfaceScreen","navStack","surface","dismissOnBackdrop","store","top","frames","length","closing","dismiss","closeResult","ScreenComponent","route","navigate","replace","result","resolveFlowOrDismiss","canGoBack","setStep","step","goBack","current","getTop","requestDismiss","handleSystemBack","present","headerContent","setHeaderContent","headerContext","setContent","config","headerMode","header","height","viewportHeight","frameSize","spec","undefined","heightRatio","Math","round","maxWidth","key","morph","canGoBackNow","dialogHeader","largeTitle","onBack","screenProps","initialStep","_omitInitialStep","rest","onStepChange","currentScreen","onClose","onAuthenticated","mode","Provider","value","fallback"],"sourceRoot":"../../../../src","sources":["ui/components/SurfaceScreen.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAwB,OAAO;AAClG,SAASC,iBAAiB,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,EAAEC,mBAAmB,QAAQ,cAAc;AAC7F,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SACEC,cAAc,EACdC,eAAe,QAEV,qBAAqB;AAG5B,SAASC,kBAAkB,QAAQ,yBAAsB;AACzD,SAASC,sBAAsB,QAAQ,oCAAiC;AAExE,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SACEC,qBAAqB,EACrBC,uBAAuB,EACvBC,YAAY,EACZC,sBAAsB,QACjB,2BAAwB;AAC/B,SACEC,oBAAoB,QAEf,8BAA2B;;AAGlC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKA,MAAMC,mBAAmB,SAAS3B,KAAK,CAAC4B,SAAS,CAG/C;EACAC,KAAK,GAA6B;IAAEC,KAAK,EAAE;EAAK,CAAC;EAEjD,OAAOC,wBAAwBA,CAACD,KAAY,EAA4B;IACtE,OAAO;MAAEA;IAAM,CAAC;EAClB;EAEAE,iBAAiBA,CAACF,KAAY,EAAEG,IAAe,EAAQ;IACrD,IAAIC,OAAO,EAAE;MACXC,OAAO,CAACL,KAAK,CACX,2BAA2B,IAAI,CAACM,KAAK,CAACC,UAAU,YAAY,EAC5DP,KAAK,EACLG,IAAI,CAACK,cACP,CAAC;IACH;EACF;EAEAC,kBAAkBA,CAACC,SAAiC,EAAQ;IAC1D,IAAIA,SAAS,CAACH,UAAU,KAAK,IAAI,CAACD,KAAK,CAACC,UAAU,IAAI,IAAI,CAACR,KAAK,CAACC,KAAK,EAAE;MACtE,IAAI,CAACW,QAAQ,CAAC;QAAEX,KAAK,EAAE;MAAK,CAAC,CAAC;IAChC;EACF;EAEAY,MAAMA,CAAA,EAAoB;IACxB,IAAI,IAAI,CAACb,KAAK,CAACC,KAAK,EAAE;MACpB,oBACEJ,KAAA,CAACjB,IAAI;QAACkC,KAAK,EAAEC,WAAW,CAACC,SAAU;QAAAC,QAAA,gBACjCtB,IAAA,CAAChB,IAAI;UAACmC,KAAK,EAAEC,WAAW,CAACG,KAAM;UAAAD,QAAA,EAAC;QAAoB,CAAM,CAAC,EAC1DZ,OAAO,iBAAIV,IAAA,CAAChB,IAAI;UAACmC,KAAK,EAAEC,WAAW,CAACI,OAAQ;UAAAF,QAAA,EAAE,IAAI,CAACjB,KAAK,CAACC,KAAK,CAACkB;QAAO,CAAO,CAAC;MAAA,CAC3E,CAAC;IAEX;IACA,OAAO,IAAI,CAACZ,KAAK,CAACU,QAAQ;EAC5B;AACF;;AAEA;AACA,MAAMF,WAAW,GAAGrC,UAAU,CAAC0C,MAAM,CAAC;EACpCJ,SAAS,EAAE;IAAEK,IAAI,EAAE,CAAC;IAAEC,UAAU,EAAE,QAAQ;IAAEC,cAAc,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAG,CAAC;EACnFN,KAAK,EAAE;IAAEO,QAAQ,EAAE,EAAE;IAAEC,UAAU,EAAE,KAAK;IAAEC,YAAY,EAAE;EAAE,CAAC;EAC3DR,OAAO,EAAE;IAAEM,QAAQ,EAAE,EAAE;IAAEG,SAAS,EAAE;EAAS;AAC/C,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAAA,EAAG;EACvB,MAAMC,KAAK,GAAG/C,QAAQ,CAAC,CAAC;EACxB,oBACEY,IAAA,CAACf,IAAI;IAACkC,KAAK,EAAEC,WAAW,CAACC,SAAU;IAAAC,QAAA,eACjCtB,IAAA,CAAClB,iBAAiB;MAACsD,IAAI,EAAC,OAAO;MAACC,KAAK,EAAEF,KAAK,CAACG,MAAM,CAACC;IAAQ,CAAE;EAAC,CAC3D,CAAC;AAEX;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAaA,CAAC;EACrBC,QAAQ;EACRC,OAAO;EACPC,iBAAiB,GAAG;AACF,CAAC,EAAE;EACrB,MAAMR,KAAK,GAAG/C,QAAQ,CAAC,CAAC;EACxB,MAAMiB,KAAK,GAAGlB,QAAQ,CAACsD,QAAQ,CAACG,KAAK,CAAC;EACtC,MAAMC,GAAG,GAAGxC,KAAK,CAACyC,MAAM,CAACzC,KAAK,CAACyC,MAAM,CAACC,MAAM,GAAG,CAAC,CAAC;EAEjDpE,SAAS,CAAC,MAAM;IACd,IAAI0B,KAAK,CAAC2C,OAAO,EAAEN,OAAO,CAACO,OAAO,CAAC5C,KAAK,CAAC6C,WAAW,CAAC;EACvD,CAAC,EAAE,CAAC7C,KAAK,CAAC2C,OAAO,EAAE3C,KAAK,CAAC6C,WAAW,EAAER,OAAO,CAAC,CAAC;EAE/C,MAAMS,eAAe,GAAGvE,OAAO,CAAC,MAAMW,kBAAkB,CAACsD,GAAG,CAACO,KAAK,CAAC,IAAI,IAAI,EAAE,CAACP,GAAG,CAACO,KAAK,CAAC,CAAC;EAEzF,MAAMC,QAAQ,GAAG3E,WAAW,CAC1B,CAAC0E,KAAgB,EAAExC,KAA+B,KAChDjB,uBAAuB,CAAC8C,QAAQ,EAAEW,KAAK,EAAExC,KAAK,CAAC,EACjD,CAAC6B,QAAQ,CACX,CAAC;EAED,MAAMa,OAAO,GAAG5E,WAAW,CACzB,CAAC0E,KAAgB,EAAExC,KAA+B,KAChDf,sBAAsB,CAAC4C,QAAQ,EAAEW,KAAK,EAAExC,KAAK,CAAC,EAChD,CAAC6B,QAAQ,CACX,CAAC;;EAED;EACA;EACA;EACA;EACA,MAAMQ,OAAO,GAAGvE,WAAW,CACxB6E,MAAgB,IAAKd,QAAQ,CAACe,oBAAoB,CAACD,MAAM,CAAC,EAC3D,CAACd,QAAQ,CACX,CAAC;EAED,MAAMgB,SAAS,GAAG/E,WAAW,CAAC,MAAM+D,QAAQ,CAACgB,SAAS,CAAC,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;EAErE,MAAMiB,OAAO,GAAGhF,WAAW,CAAEiF,IAAY,IAAKlB,QAAQ,CAACiB,OAAO,CAACC,IAAI,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;;EAEjF;EACA;EACA,MAAMmB,MAAM,GAAGlF,WAAW,CAAC,MAAY;IACrC,IAAI+D,QAAQ,CAACmB,MAAM,CAAC,CAAC,EAAE;IACvB,MAAMC,OAAO,GAAGpB,QAAQ,CAACqB,MAAM,CAAC,CAAC;IACjC,IAAID,OAAO,CAACF,IAAI,GAAG,CAAC,EAAE;MACpBlB,QAAQ,CAACiB,OAAO,CAACG,OAAO,CAACF,IAAI,GAAG,CAAC,CAAC;MAClC;IACF;IACAlB,QAAQ,CAACsB,cAAc,CAAC,CAAC;EAC3B,CAAC,EAAE,CAACtB,QAAQ,CAAC,CAAC;EAEd,MAAMuB,gBAAgB,GAAGtF,WAAW,CAAC,MAAe;IAClD,IAAI+D,QAAQ,CAACmB,MAAM,CAAC,CAAC,EAAE,OAAO,IAAI;IAClC,MAAMC,OAAO,GAAGpB,QAAQ,CAACqB,MAAM,CAAC,CAAC;IACjC,IAAID,OAAO,CAACF,IAAI,GAAG,CAAC,EAAE;MACpBlB,QAAQ,CAACiB,OAAO,CAACG,OAAO,CAACF,IAAI,GAAG,CAAC,CAAC;MAClC,OAAO,IAAI;IACb;IACA,IAAIhB,iBAAiB,EAAEF,QAAQ,CAACsB,cAAc,CAAC,CAAC;IAChD,OAAO,IAAI;EACb,CAAC,EAAE,CAACtB,QAAQ,EAAEE,iBAAiB,CAAC,CAAC;EAEjChE,SAAS,CAAC,MAAMa,sBAAsB,CAACwE,gBAAgB,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAE7E,MAAMC,OAAO,GAAGvF,WAAW,CACzB,CAAC0E,KAAgB,EAAExC,KAA+B,KAAKhB,YAAY,CAACwD,KAAK,EAAExC,KAAK,CAAC,CAAC2C,MAAM,EACxF,EACF,CAAC;;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,CAACW,aAAa,EAAEC,gBAAgB,CAAC,GAAGtF,QAAQ,CAA8B,IAAI,CAAC;EACrF,MAAMuF,aAAa,GAAGxF,OAAO,CAAC,OAAO;IAAEyF,UAAU,EAAEF;EAAiB,CAAC,CAAC,EAAE,EAAE,CAAC;EAE3E,MAAMG,MAAM,GAAG1F,OAAO,CAAC,MAAMa,gBAAgB,CAACoD,GAAG,CAACO,KAAK,EAAEP,GAAG,CAACjC,KAAK,CAAC,EAAE,CAACiC,GAAG,CAACO,KAAK,EAAEP,GAAG,CAACjC,KAAK,CAAC,CAAC;EAC5F,MAAM2D,UAAU,GAAGD,MAAM,CAACE,MAAM;;EAEhC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;IAAEC,MAAM,EAAEC;EAAe,CAAC,GAAGxF,mBAAmB,CAAC,CAAC;EACxD,MAAMyF,SAAS,GAAG/F,OAAO,CAAC,MAAM;IAC9B,MAAMgG,IAAI,GAAGN,MAAM,CAACK,SAAS;IAC7B,IAAI,CAACC,IAAI,EAAE,OAAOC,SAAS;IAC3B,MAAMJ,MAAM,GACVG,IAAI,CAACE,WAAW,KAAKD,SAAS,GAAGE,IAAI,CAACC,KAAK,CAACN,cAAc,GAAGE,IAAI,CAACE,WAAW,CAAC,GAAGD,SAAS;IAC5F,OAAO;MAAEJ,MAAM;MAAEQ,QAAQ,EAAEL,IAAI,CAACK;IAAS,CAAC;EAC5C,CAAC,EAAE,CAACX,MAAM,CAACK,SAAS,EAAED,cAAc,CAAC,CAAC;EACtCrF,cAAc,CACZT,OAAO,CACL,OAAO;IAAEsG,GAAG,EAAE,GAAGrC,GAAG,CAACO,KAAK,IAAIP,GAAG,CAACc,IAAI,EAAE;IAAEwB,KAAK,EAAEb,MAAM,CAACa,KAAK;IAAE/C,IAAI,EAAEuC;EAAU,CAAC,CAAC,EACjF,CAAC9B,GAAG,CAACO,KAAK,EAAEP,GAAG,CAACc,IAAI,EAAEW,MAAM,CAACa,KAAK,EAAER,SAAS,CAC/C,CACF,CAAC;EACD;EACA;EACA,MAAMS,YAAY,GAAG/E,KAAK,CAACyC,MAAM,CAACC,MAAM,GAAG,CAAC,IAAIF,GAAG,CAACc,IAAI,GAAG,CAAC;EAE5D,MAAM0B,YAAY,GAAGzG,OAAO,CAA4B,MAAM;IAC5D,IAAI,CAAC2F,UAAU,EAAE,OAAO,IAAI;IAC5B,OAAO;MACLe,UAAU,EAAE,IAAI;MAChB,GAAGpB,aAAa;MAChB;MACA;MACA;MACAqB,MAAM,EAAErB,aAAa,EAAEqB,MAAM,KAAKH,YAAY,GAAGxB,MAAM,GAAGiB,SAAS;IACrE,CAAC;EACH,CAAC,EAAE,CAACN,UAAU,EAAEL,aAAa,EAAEkB,YAAY,EAAExB,MAAM,CAAC,CAAC;EAErDtE,eAAe,CAAC+F,YAAY,CAAC;EAE7B,MAAMG,WAAW,GAAG5G,OAAO,CAAkB,MAAM;IACjD,MAAM;MAAE6G,WAAW,EAAEC,gBAAgB;MAAE,GAAGC;IAAK,CAAC,GAAG9C,GAAG,CAACjC,KAAK;IAC5D,OAAO;MACL;MACAyC,QAAQ;MACRO,MAAM;MACNN,OAAO;MACPG,SAAS;MACTgC,WAAW,EAAE5C,GAAG,CAACc,IAAI;MACrBA,IAAI,EAAEd,GAAG,CAACc,IAAI;MACdiC,YAAY,EAAElC,OAAO;MACrBA,OAAO;MACPmC,aAAa,EAAEhD,GAAG,CAACO,KAAK;MACxB;MACA;MACA0C,OAAO,EAAEpG,qBAAqB;MAC9BqG,eAAe,EAAErG,qBAAqB;MACtCuD,OAAO;MACPgB,OAAO;MACP;MACA9B,KAAK,EAAEA,KAAK,CAAC6D,IAAI;MACjB,GAAGL;IACL,CAAC;EACH,CAAC,EAAE,CAACtC,QAAQ,EAAEO,MAAM,EAAEN,OAAO,EAAEG,SAAS,EAAEC,OAAO,EAAEO,OAAO,EAAEhB,OAAO,EAAEd,KAAK,CAAC6D,IAAI,EAAEnD,GAAG,CAACO,KAAK,EAAEP,GAAG,CAACc,IAAI,EAAEd,GAAG,CAACjC,KAAK,CAAC,CAAC;EAEjH,IAAI,CAACuC,eAAe,EAAE,OAAO,IAAI;EAEjC,oBACEnD,IAAA,CAACF,oBAAoB,CAACmG,QAAQ;IAACC,KAAK,EAAE9B,aAAc;IAAA9C,QAAA,eAClDtB,IAAA,CAACG,mBAAmB;MAACU,UAAU,EAAEgC,GAAG,CAACO,KAAM;MAAA9B,QAAA,eACzCtB,IAAA,CAACvB,QAAQ;QAAC0H,QAAQ,eAAEnG,IAAA,CAACkC,aAAa,IAAE,CAAE;QAAAZ,QAAA,eACpCtB,IAAA,CAACmD,eAAe;UAAA,GAAKqC;QAAW,CAAG;MAAC,CAC5B;IAAC,CACQ;EAAC,CACO,CAAC;AAEpC;AAEA,eAAehD,aAAa","ignoreList":[]}

package/lib/module/ui/components/authChooser/AccountsMenuView.js

@@ -0,0 +1,663 @@
+"use strict";
+
+/**
+ * The signed-in Oxy account MENU (`accounts` view) — a Google-account-menu-style
+ * full menu built entirely with NativeWind `className` (the dynamic per-account
+ * accent hex is the one inline style NativeWind cannot express). Structure:
+ *
+ *  - HERO on its own chrome-free block: the current account's large pressable
+ *    avatar (with a camera badge to change the photo), the greeting, the account
+ *    address, and a "Manage your Oxy account" pill.
+ *  - SWITCH ACCOUNT: a disclosure row whose corner animates from pill to card as
+ *    the device's people + "Add another account" + "Manage accounts on this
+ *    device" reveal beneath it. The list is grouped BY PERSON (ADR 0002): an
+ *    account sits under the human who can operate it, and the same organization
+ *    reachable through two people is two rows under two names — the thing a list
+ *    keyed by account id structurally cannot say.
+ *  - OXY STORAGE: cloud + used/total + a composition meter + Upgrade / Manage chips.
+ *  - MENU rows: Your data in Oxy · Oxy settings · Help & feedback · Sign out —
+ *    Bloom's grouped section, the same component every other SDK settings surface
+ *    uses, not a local row copy.
+ *  - FOOTER: Privacy Policy · Terms of Service.
+ *
+ * All three blocks share ONE rhythm taken from that grouped section: a 12px
+ * content inset, a 12px gap after the leading element, 16px between blocks, and
+ * a 16px trailing chevron column.
+ *
+ * Collapse state is a plain `useState` toggled in the row's press handler — no
+ * effect hook, no derived-from-props sync.
+ */
+
+import { Fragment, useCallback, useState } from 'react';
+import { Pressable, View } from 'react-native-css/components';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { AvatarGroup } from '@oxyhq/bloom/avatar-group';
+import { Button } from '@oxyhq/bloom/button';
+import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+import { CompositionBar } from '@oxyhq/bloom/composition-bar';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { Text } from '@oxyhq/bloom/typography';
+import { showsPrincipalHeaders } from '@oxyhq/core';
+import AvatarCameraBadge from "../AvatarCameraBadge.js";
+import { HoverPressable } from "./primitives.js";
+import { authChooserStyles as styles } from "./styles.js";
+import { resolveAccentHex } from "./types.js";
+
+/**
+ * Leading glyph for the rows that live in a Bloom grouped section (the MENU
+ * block) and for the storage card's cloud, which lines its title up with them.
+ * It is Bloom's OWN icon-slot size: `SettingsListItem` reserves a fixed 20px
+ * leading column and Bloom is consumed exactly as it ships, so a menu glyph
+ * larger than this would overhang into the row's title.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ROW_ICON_SIZE = 20;
+/**
+ * The switch card's two corner states. Collapsed it is one row and reads as a
+ * PILL; opened it is a card holding rows, on the same 16px corner the Bloom
+ * grouped section below it uses. Interpolated across the reveal, never snapped.
+ */
+const SWITCH_CARD_PILL_RADIUS = 999;
+const SWITCH_CARD_RADIUS = 16;
+/**
+ * The fraction of the reveal over which the corner resolves. The corner is a
+ * FASTER gesture than the reveal — it has to be finished before the rows read as
+ * rows, or the card still looks like a pill while a list falls out of it — so it
+ * is clamped to the reveal's opening fraction instead of tracking it end to end.
+ * Measured in a browser against the 240ms reveal: the corner reaches its card
+ * value ~120ms in, with the list only ~20% revealed, and (mirrored) the pill is
+ * back ~250ms into the close, with the list already down to ~0.
+ */
+const SWITCH_CARD_RADIUS_SETTLE = 0.2;
+/** Duration of the switch-list reveal. */
+const SWITCH_REVEAL_MS = 240;
+/** Diameter of an account row's avatar in the switch list (own markup). */
+const SWITCH_AVATAR_SIZE = 36;
+/**
+ * The person's avatar above their block of accounts. Smaller than the account
+ * rows beneath it: the header labels the group, the rows are the targets.
+ */
+const PRINCIPAL_AVATAR_SIZE = 24;
+/** Glyph inside a bordered affordance badge, sized to the avatar it stands in for. */
+const BADGE_GLYPH_SIZE = 19;
+/** The hero block's large current-account avatar. */
+const HERO_AVATAR_SIZE = 72;
+/** Avatars shown in the switch row's facepile before it collapses into `+N`. */
+const FACEPILE_MAX = 2;
+/** Facepile avatar diameter — one clear step down from a switch-list avatar. */
+const FACEPILE_AVATAR_SIZE = 32;
+/**
+ * Facepile overlap. Well under Bloom's `size / 3` default: the stack draws the
+ * FIRST item on top, so a deep overlap would bury the trailing `+N` chip's own
+ * label under the avatar before it.
+ */
+const FACEPILE_OVERLAP = 4;
+
+/**
+ * `bytes` → `"11.6 GB"`. Whole plan sizes read as whole numbers (`"17 GB"`, not
+ * `"17.0 GB"`), and anything ≥ 100 GB drops the decimal entirely.
+ */
+function formatStorageGb(bytes) {
+  const gb = bytes / 1024 ** 3;
+  if (gb >= 100 || Number.isInteger(gb)) return `${Math.round(gb)} GB`;
+  return `${gb.toFixed(1)} GB`;
+}
+const AccountsMenuView = ({
+  snapshot,
+  principals,
+  hero,
+  theme,
+  t,
+  handlers,
+  storage,
+  menu
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  // Measured natural height of the switch list, so the reveal animates to an
+  // exact height (and the content below reflows down smoothly) instead of a
+  // guessed max. The measuring wrapper is style-based, NOT className'd — on
+  // RN-Web `onLayout` never fires for className'd Views (see AGENTS.md).
+  const [listContentHeight, setListContentHeight] = useState(0);
+  // 0 = collapsed, 1 = expanded. Set imperatively in the toggle handler (no
+  // effect hook). On RN-Web there is no worklets plugin, so every shared value a
+  // mapper reads MUST be in its deps array or it freezes on the first frame
+  // (AGENTS.md "Reanimated (web)").
+  const listProgress = useSharedValue(0);
+  const listStyle = useAnimatedStyle(() => ({
+    height: listProgress.value * listContentHeight,
+    opacity: listProgress.value
+  }), [listProgress, listContentHeight]);
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${listProgress.value * 180}deg`
+    }]
+  }), [listProgress]);
+  // Collapsed, the switch card is a single row and reads as a PILL; opened, it
+  // becomes a card holding rows and takes the grouped-section corner. The corner
+  // is driven off the SAME `listProgress` as the reveal — but clamped to its
+  // opening fraction, so it resolves early instead of trailing the rows.
+  const switchCardStyle = useAnimatedStyle(() => ({
+    borderRadius: interpolate(listProgress.value, [0, SWITCH_CARD_RADIUS_SETTLE], [SWITCH_CARD_PILL_RADIUS, SWITCH_CARD_RADIUS], Extrapolation.CLAMP)
+  }), [listProgress]);
+  // `CompositionBar` ships as an interactive breakdown: a selected segment
+  // replaces its hint line with that segment's readout. Tapping the selected one
+  // again clears it.
+  const [storageSegment, setStorageSegment] = useState(null);
+  const toggleStorageSegment = useCallback(key => setStorageSegment(previous => previous === key ? null : key), []);
+  const toggleExpanded = useCallback(() => {
+    const next = !expanded;
+    setExpanded(next);
+    listProgress.value = withTiming(next ? 1 : 0, {
+      duration: SWITCH_REVEAL_MS
+    });
+  }, [expanded, listProgress]);
+  if (snapshot.loading && principals.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      className: "items-center justify-center gap-space-12 py-space-24",
+      children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 24,
+        color: theme.colors.textSecondary
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-body text-text-secondary text-center",
+        children: t('accountSwitcher.loading')
+      })]
+    });
+  }
+
+  // Activation and the two removals all mutate the same device, so any one of
+  // them in flight disables every row: a second press would race the first for
+  // which context the server ends up electing as active.
+  const busy = snapshot.activatingContextId !== null || snapshot.removingContextId !== null || snapshot.removingPrincipalId !== null;
+  const currentAccent = hero?.accentHex ?? theme.colors.primary;
+  // Naming the person above each block earns its place only when the grouping
+  // carries information — a second person, or somebody with more than one
+  // account. On a one-person, one-account device it would just repeat the hero.
+  const showPrincipalHeaders = showsPrincipalHeaders(principals);
+  const contextRows = principals.flatMap(principal => principal.contexts);
+  // Remounts the measured wrapper when the rows change, so the collapse animates
+  // to the new natural height instead of the previous one.
+  const switchListKey = contextRows.map(context => context.contextId).join(':');
+  const facepile = contextRows.map(context => ({
+    id: context.contextId,
+    uri: context.avatarUrl ?? undefined,
+    displayName: context.displayName
+  }));
+
+  // Used vs free is a two-part COMPOSITION (the parts always fill the bar), not
+  // a progress value — exactly what Bloom's `CompositionBar` models. Both colors
+  // are theme tokens, so the bar is correct in light and dark.
+  const storageCategories = storage ? [{
+    key: 'used',
+    name: t('accountMenu.storage.used'),
+    amount: storage.usedBytes,
+    color: theme.colors.primary
+  }, {
+    key: 'free',
+    name: t('accountMenu.storage.free'),
+    amount: Math.max(0, storage.limitBytes - storage.usedBytes),
+    color: theme.colors.contrast50
+  }] : [];
+  const usageLabel = storage ? t('accountMenu.storage.usage', {
+    used: formatStorageGb(storage.usedBytes),
+    total: formatStorageGb(storage.limitBytes)
+  }) : t('accountMenu.storage.unavailable');
+
+  // The switch list body, revealed under the "Switch account" row. Own markup,
+  // not a Bloom grouped section: this is not a list of settings rows and the
+  // component is not a card container. It mirrors the section's rhythm by hand —
+  // 12px content inset, 12px after the avatar, a hairline between rows — and
+  // draws those hairlines INSIDE the animated clip, so a collapsed list never
+  // strands one against the header row.
+  const listItems = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [principals.map((principal, principalIndex) => /*#__PURE__*/_jsxs(Fragment, {
+      children: [principalIndex > 0 ? /*#__PURE__*/_jsx(View, {
+        className: "h-px bg-border opacity-30"
+      }) : null, showPrincipalHeaders ? /*#__PURE__*/_jsx(PrincipalHeaderRow, {
+        principal: principal,
+        removing: snapshot.removingPrincipalId === principal.principalId,
+        disabled: busy,
+        onSignOut: () => handlers.onRemovePrincipal(principal.principalId),
+        theme: theme,
+        t: t
+      }) : null, principal.contexts.map((context, contextIndex) => /*#__PURE__*/_jsxs(Fragment, {
+        children: [contextIndex > 0 || showPrincipalHeaders ? /*#__PURE__*/_jsx(View, {
+          className: "h-px bg-border opacity-30 ml-space-12"
+        }) : null, /*#__PURE__*/_jsx(ContextRow, {
+          context: context,
+          principalName: principal.displayName,
+          accent: resolveAccentHex(context.color, theme.colors.primary),
+          activating: snapshot.activatingContextId === context.contextId,
+          removing: snapshot.removingContextId === context.contextId,
+          disabled: busy,
+          onActivate: () => handlers.onActivate(context.contextId),
+          onRemove: () => handlers.onRemoveContext(context.contextId),
+          theme: theme,
+          t: t
+        })]
+      }, context.contextId))]
+    }, principal.principalId)), /*#__PURE__*/_jsx(View, {
+      className: "h-px bg-border opacity-30 ml-space-12"
+    }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
+      icon: "plus",
+      label: t('accountMenu.addAnother'),
+      onPress: handlers.onAdd,
+      disabled: busy,
+      theme: theme
+    }), /*#__PURE__*/_jsx(View, {
+      className: "h-px bg-border opacity-30 ml-space-12"
+    }), /*#__PURE__*/_jsx(AccountAffordanceRow, {
+      icon: "account-multiple-outline",
+      label: t('accountSwitcher.manageOnDevice'),
+      onPress: handlers.onManage,
+      disabled: busy,
+      theme: theme
+    })]
+  });
+  const manageLabel = t('accountMenu.manage');
+  const switchLabel = t('accountMenu.switchAccount');
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.hero,
+      children: [hero ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs(PressableScale, {
+          onPress: handlers.onEditAvatar,
+          accessibilityRole: "button",
+          accessibilityLabel: t('editProfile.changeAvatar'),
+          style: styles.heroAvatarPressable,
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            source: hero.avatarUrl ?? undefined,
+            name: hero.displayName,
+            size: HERO_AVATAR_SIZE
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.heroAvatarRing, {
+              borderColor: currentAccent
+            }],
+            pointerEvents: "none"
+          }), /*#__PURE__*/_jsx(AvatarCameraBadge, {})]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.heroNameBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.heroGreeting, {
+              color: theme.colors.text
+            }],
+            numberOfLines: 2,
+            children: t('accountMenu.greeting', {
+              name: hero.displayName
+            })
+          }), hero.addressLine ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.heroAddress, {
+              color: theme.colors.textSecondary
+            }],
+            numberOfLines: 1,
+            children: hero.addressLine
+          }) : null]
+        })]
+      }) : null, /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        size: "small",
+        onPress: handlers.onManage,
+        accessibilityLabel: manageLabel,
+        children: manageLabel
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      className: "mb-space-16",
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          overflow: 'hidden'
+        }, switchCardStyle],
+        children: /*#__PURE__*/_jsxs(View, {
+          className: "bg-fill",
+          children: [/*#__PURE__*/_jsxs(HoverPressable, {
+            baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${busy ? ' opacity-60' : ''}`,
+            hoverClassName: "bg-fill-secondary",
+            onPress: toggleExpanded,
+            disabled: busy,
+            accessibilityRole: "button"
+            // The ARIA prop, not `accessibilityState`: react-native-web 0.21
+            // forwards only this one, and RN maps it to
+            // `accessibilityState.expanded` natively — so the disclosure state
+            // reaches assistive tech on BOTH platforms.
+            ,
+            "aria-expanded": expanded,
+            accessibilityLabel: switchLabel,
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: "flex-1 text-body text-text",
+              numberOfLines: 1,
+              children: switchLabel
+            }), expanded ? null : /*#__PURE__*/_jsx(AvatarGroup, {
+              items: facepile,
+              layout: "stack",
+              size: FACEPILE_AVATAR_SIZE,
+              max: FACEPILE_MAX,
+              overlap: FACEPILE_OVERLAP,
+              variant: "thumb",
+              showInitials: true,
+              ringColor: theme.colors.card
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.chevronCircle, {
+                backgroundColor: theme.colors.contrast50
+              }],
+              children: /*#__PURE__*/_jsx(Animated.View, {
+                style: chevronStyle,
+                children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+                  name: "chevron-down",
+                  size: 20,
+                  color: theme.colors.text
+                })
+              })
+            })]
+          }), /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.collapse, listStyle],
+            pointerEvents: expanded ? 'auto' : 'none',
+            children: /*#__PURE__*/_jsx(View, {
+              style: styles.collapseMeasure,
+              onLayout: event => setListContentHeight(event.nativeEvent.layout.height),
+              children: /*#__PURE__*/_jsx(View, {
+                children: listItems
+              })
+            }, switchListKey)
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "bg-fill rounded-[16px] overflow-hidden mb-space-16 px-space-12 py-[10px] gap-space-12",
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-space-12 min-h-[24px]",
+        children: [/*#__PURE__*/_jsx(View, {
+          className: "w-[20px] items-center",
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: "cloud-outline",
+            size: ROW_ICON_SIZE,
+            color: theme.colors.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "flex-1 text-body font-semibold text-text",
+          numberOfLines: 1,
+          children: t('accountMenu.storage.title')
+        })]
+      }), /*#__PURE__*/_jsx(CompositionBar, {
+        categories: storageCategories,
+        selectedKey: storageSegment,
+        onSelect: toggleStorageSegment,
+        hintLabel: usageLabel,
+        formatReadout: (bytes, percent) => `${formatStorageGb(bytes)} · ${percent}%`
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-row gap-space-8",
+        children: [/*#__PURE__*/_jsx(StorageChip, {
+          label: t('accountMenu.storage.upgrade'),
+          onPress: menu.onUpgradeStorage
+        }), /*#__PURE__*/_jsx(StorageChip, {
+          label: t('accountMenu.storage.manage'),
+          onPress: menu.onManageStorage
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(SettingsListGroup, {
+      children: [/*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "tray-arrow-down",
+          theme: theme
+        }),
+        title: t('accountMenu.data'),
+        onPress: menu.onOpenData
+      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "cog-outline",
+          theme: theme
+        }),
+        title: t('accountMenu.settings'),
+        onPress: menu.onOpenSettings
+      }), /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "help-circle-outline",
+          theme: theme
+        }),
+        title: t('accountMenu.help'),
+        onPress: menu.onHelp
+      }), menu.customItems.map(item => /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: item.icon ?? 'dots-horizontal',
+          theme: theme
+        }),
+        title: item.label,
+        onPress: item.onPress
+      }, item.key)), /*#__PURE__*/_jsx(SettingsListItem, {
+        icon: /*#__PURE__*/_jsx(MenuIcon, {
+          name: "logout",
+          theme: theme
+        }),
+        title: t('accountMenu.signOut'),
+        onPress: menu.onSignOut,
+        showChevron: false
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center justify-center gap-space-12 px-space-12 pb-space-8",
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: menu.onPrivacy,
+        accessibilityRole: "link",
+        children: /*#__PURE__*/_jsx(Text, {
+          className: "text-bodySmall text-text-secondary",
+          children: t('accountMenu.privacy')
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-bodySmall text-text-tertiary",
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: menu.onTerms,
+        accessibilityRole: "link",
+        children: /*#__PURE__*/_jsx(Text, {
+          className: "text-bodySmall text-text-secondary",
+          children: t('accountMenu.terms')
+        })
+      })]
+    })]
+  });
+};
+
+/**
+ * The person a block of accounts hangs off, with the one action that removes
+ * THEM rather than one of their accounts.
+ *
+ * The distinction is the reason this row exists: dropping Alice's route to an
+ * organization is not the same as dropping Alice, and on a shared device the
+ * second must not touch Nate's route to the same organization. Two different
+ * server calls, two different rows, never one control doing both.
+ */
+const PrincipalHeaderRow = ({
+  principal,
+  removing,
+  disabled,
+  onSignOut,
+  theme,
+  t
+}) => {
+  const signOutLabel = t('accountSwitcher.principal.signOut', {
+    name: principal.displayName
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    className: "flex-row items-center gap-space-12 px-space-12 pt-space-12 pb-space-8",
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      source: principal.avatarUrl ?? undefined,
+      variant: "thumb",
+      name: principal.displayName,
+      size: PRINCIPAL_AVATAR_SIZE
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 min-w-0",
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: "text-caption font-semibold text-text",
+        numberOfLines: 1,
+        children: principal.displayName
+      }), principal.handle ? /*#__PURE__*/_jsx(Text, {
+        className: "text-caption text-text-tertiary",
+        numberOfLines: 1,
+        children: `@${principal.handle}`
+      }) : null]
+    }), /*#__PURE__*/_jsx(HoverPressable, {
+      baseClassName: `rounded-radius-max px-space-8 py-[4px]${disabled ? ' opacity-60' : ''}`,
+      hoverClassName: "bg-fill-secondary",
+      onPress: onSignOut,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: signOutLabel,
+      children: removing ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 16,
+        color: theme.colors.textSecondary
+      }) : /*#__PURE__*/_jsx(Text, {
+        className: "text-caption text-text-secondary",
+        children: t('accountMenu.signOut')
+      })
+    })]
+  });
+};
+
+/**
+ * One `principal acting as account` row.
+ *
+ * Pressing it activates the PAIR — a `contextId`, not an account id, because on
+ * this device the account below may also be reachable through somebody else.
+ * A row the server marks unavailable is rendered rather than hidden, so a
+ * membership going away is something the person can see instead of a row that
+ * silently stopped existing; it is disabled, because activating it is a request
+ * the server answers with a 403 and then heals the row away.
+ */
+const ContextRow = ({
+  context,
+  principalName,
+  accent,
+  activating,
+  removing,
+  disabled,
+  onActivate,
+  onRemove,
+  theme,
+  t
+}) => {
+  const unavailable = !context.canActivate;
+  const rowDisabled = disabled || unavailable;
+  const removeLabel = t('accountSwitcher.context.remove', {
+    account: context.displayName,
+    person: principalName
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    className: "flex-row items-center",
+    children: [/*#__PURE__*/_jsxs(HoverPressable, {
+      baseClassName: `flex-1 min-w-0 flex-row items-center gap-space-12 pl-space-12 py-[10px]${rowDisabled ? ' opacity-60' : ''}`,
+      hoverClassName: "bg-fill-secondary",
+      onPress: onActivate,
+      disabled: rowDisabled,
+      accessibilityRole: "button",
+      accessibilityState: {
+        selected: context.isActive,
+        disabled: rowDisabled
+      },
+      accessibilityLabel: context.displayName,
+      children: [/*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          source: context.avatarUrl ?? undefined,
+          variant: "thumb",
+          name: context.displayName,
+          size: SWITCH_AVATAR_SIZE
+        }), context.isActive ? /*#__PURE__*/_jsx(View, {
+          style: [styles.currentAvatarRing, {
+            borderColor: accent
+          }],
+          pointerEvents: "none"
+        }) : null]
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-1 min-w-0",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "text-body font-semibold text-text",
+          numberOfLines: 1,
+          children: context.displayName
+        }), /*#__PURE__*/_jsx(Text, {
+          className: "text-caption text-text-secondary",
+          numberOfLines: 1,
+          children: unavailable ? t('accountSwitcher.context.unavailable') : context.handle ? `@${context.handle}` : ''
+        })]
+      }), activating ? /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: "loading",
+        size: 20,
+        color: accent
+      }) : null]
+    }), /*#__PURE__*/_jsx(HoverPressable, {
+      baseClassName: `px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`,
+      hoverClassName: "bg-fill-secondary",
+      onPress: onRemove,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: removeLabel,
+      children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+        name: removing ? 'loading' : 'close',
+        size: 18,
+        color: theme.colors.textTertiary
+      })
+    })]
+  });
+};
+
+/**
+ * An account-list AFFORDANCE row ("Add another account", "Manage accounts on
+ * this device") — a bordered circle sized to the avatar it stands in for, so its
+ * label lands on the same line as every account name above it. Own markup, like
+ * the account rows it closes: this list is not a Bloom grouped section.
+ */
+const AccountAffordanceRow = ({
+  icon,
+  label,
+  onPress,
+  disabled,
+  theme
+}) => /*#__PURE__*/_jsxs(HoverPressable, {
+  baseClassName: `flex-row items-center gap-space-12 px-space-12 py-[10px]${disabled ? ' opacity-60' : ''}`,
+  hoverClassName: "bg-fill-secondary",
+  onPress: onPress,
+  disabled: disabled,
+  accessibilityRole: "button",
+  accessibilityLabel: label,
+  children: [/*#__PURE__*/_jsx(View, {
+    className: "w-[36px] h-[36px] items-center justify-center rounded-radius-max border border-border",
+    children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+      name: icon,
+      size: BADGE_GLYPH_SIZE,
+      color: theme.colors.textSecondary
+    })
+  }), /*#__PURE__*/_jsx(Text, {
+    className: "flex-1 text-body font-semibold text-text",
+    numberOfLines: 1,
+    children: label
+  })]
+});
+
+/**
+ * The leading glyph for a grouped-section menu row, sized to Bloom's 20px icon
+ * column so the icons, the storage block's cloud and every row title align.
+ */
+const MenuIcon = ({
+  name,
+  theme
+}) => /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+  name: name,
+  size: ROW_ICON_SIZE,
+  color: theme.colors.textSecondary
+});
+
+/** A storage action chip — a bordered pill on the sheet background. */
+const StorageChip = ({
+  label,
+  onPress
+}) => /*#__PURE__*/_jsx(HoverPressable, {
+  baseClassName: "rounded-radius-max border border-border bg-bg py-[9px] px-[14px]",
+  hoverClassName: "bg-fill-secondary",
+  onPress: onPress,
+  accessibilityRole: "button",
+  accessibilityLabel: label,
+  children: /*#__PURE__*/_jsx(Text, {
+    className: "text-bodySmall font-semibold text-text",
+    children: label
+  })
+});
+export default AccountsMenuView;
+//# sourceMappingURL=AccountsMenuView.js.map