@entropy-softworks/ui 2026.9.11 → 2026.910.1

package/src/screens/auth/AccountPickerScreen.tsx

@@ -75,9 +75,7 @@ export function AccountPickerScreen({
                   accessibilityLabel={`Continue as ${a.username}`}
                   className="rounded-md border border-border px-3 py-3"
                 >
-                  <Text className="text-sm text-foreground">
-                    {a.displayName || a.username}
-                  </Text>
+                  <Text className="text-sm text-foreground">{a.displayName || a.username}</Text>
                   <MutedText className="text-xs">{a.email}</MutedText>
                 </Pressable>
               ))
@@ -89,7 +87,7 @@ export function AccountPickerScreen({
               className="w-full"
               variant="outline"
               telemetryId="auth.account_picker.use_another"
-        onPress={onUseAnother}
+              onPress={onUseAnother}
               accessibilityLabel="Use another account"
               accessibilityRole="button"
             >

package/src/screens/auth/AuthScreen.tsx

@@ -280,13 +280,18 @@ export interface AuthScreenProps {
    */
   showWelcome?: boolean;
   /**
-   * Card title, e.g. "Log in to Entropy".
+   * Page heading, rendered ABOVE the card, e.g.
+   * "Log into your Entropy account to continue."
    *
    * Undefined renders no heading, which is the right default for an app whose
    * own login the user reached deliberately -- the surrounding brand already
    * says where they are. Set it on an identity provider, where the user is
-   * frequently redirected in from a relying application and the card is the
-   * only thing on screen that can say whose credentials to type.
+   * frequently redirected in from a relying application and this is the only
+   * thing on screen that can say whose credentials to type.
+   *
+   * It used to render inside the card header, where it sat over the
+   * Sign In / Sign Up toggle and read as a label for the selected mode. Above
+   * the card it is the page's heading and the card is purely the form.
    */
   title?: string;
   /** Optional line under `title`. Ignored unless `title` is set. */
@@ -1072,6 +1077,34 @@ export function AuthScreen({
                           {cardBackdrop}
                         </View>
                       ) : null}
+                      {/* ── WHOSE login this is, ABOVE the card ──────────────
+                        Without it the card is a pair of unlabelled fields under
+                        a Sign In / Sign Up toggle: fine when the user arrived
+                        from the app they are signing into, actively confusing
+                        when an OIDC redirect dropped them here from somewhere
+                        else -- the case an identity provider is FOR.
+
+                        Above the card rather than in its header, which is where
+                        this started. In the header it sat directly over the
+                        mode toggle and read as a label for the selected mode
+                        ("Log in to Entropy" above a Sign In / Sign Up switch
+                        restates the switch). Out here it is unambiguously the
+                        page's own heading, the card below it is purely the
+                        form, and the brand backdrop has something to sit
+                        behind.
+
+                        Width is pinned to the card's 360px so the two are one
+                        column, and the text is centred to match. */}
+                      {title ? (
+                        <View className="w-full max-w-[360px] gap-1 pb-5">
+                          <Heading className="text-center text-xl">{title}</Heading>
+                          {subtitle ? (
+                            <MutedText className="text-center text-sm leading-5">
+                              {subtitle}
+                            </MutedText>
+                          ) : null}
+                        </View>
+                      ) : null}
                       <Card className="w-full max-w-[360px]">
                         {displayStage === "forgot" ? (
                           <>
@@ -1153,24 +1186,11 @@ export function AuthScreen({
                               that otherwise all collects above the footer.
                               Applies to both modes — the header is shared. */}
                             <CardHeader className="gap-5 pb-3 pt-5">
-                              {/* WHOSE login this is.
-                                Without it the card is a pair of unlabelled
-                                fields under a Sign In / Sign Up toggle, which
-                                is fine when the user arrived from the app they
-                                are signing into and actively confusing when an
-                                OIDC redirect dropped them here from somewhere
-                                else -- the case an identity provider is FOR.
-                                Rendered above the toggle so it reads as a
-                                title for the card rather than a label for
-                                whichever mode happens to be selected. */}
-                              {title ? (
-                                <View className="gap-1">
-                                  <CardTitle>{title}</CardTitle>
-                                  {subtitle ? (
-                                    <MutedText className="text-sm leading-5">{subtitle}</MutedText>
-                                  ) : null}
-                                </View>
-                              ) : null}
+                              {/* The heading moved OUT of the card -- see the
+                                block above <Card>. Inside here it read as a
+                                label for whichever toggle mode was selected;
+                                above the card it reads as the page saying whose
+                                login this is, which is what it is for. */}
                               {signUpEnabled ? (
                                 <SegmentedToggle<Mode>
                                   value={mode}

package/src/screens/auth/ConsentScreen.tsx

@@ -93,7 +93,7 @@ export function ConsentScreen({
             <Button
               className="w-full"
               telemetryId="auth.consent.allow"
-        onPress={onAllow}
+              onPress={onAllow}
               isLoading={isLoading}
               accessibilityLabel={`Allow ${clientName}`}
               accessibilityRole="button"
@@ -104,7 +104,7 @@ export function ConsentScreen({
               className="w-full"
               variant="outline"
               telemetryId="auth.consent.deny"
-        onPress={onDeny}
+              onPress={onDeny}
               accessibilityLabel="Deny access"
               accessibilityRole="button"
             >

package/src/screens/auth/ErrorScreen.tsx

@@ -68,7 +68,7 @@ export function ErrorScreen({
                 <Button
                   className="w-full"
                   telemetryId="auth.error.retry"
-        onPress={onRetry}
+                  onPress={onRetry}
                   accessibilityLabel="Try again"
                   accessibilityRole="button"
                 >
@@ -80,7 +80,7 @@ export function ErrorScreen({
                   className="w-full"
                   variant="outline"
                   telemetryId="auth.error.home"
-        onPress={onHome}
+                  onPress={onHome}
                   accessibilityLabel={homeLabel}
                   accessibilityRole="button"
                 >

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -4,13 +4,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { StatusBar } from "expo-status-bar";
 import { useColorScheme } from "nativewind";
 import { Button } from "../../components/button";
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../components/card";
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/card";
 
 export interface ExpiredLinkScreenProps {
   title?: string;
@@ -59,7 +53,7 @@ export function ExpiredLinkScreen({
                 <Button
                   className="w-full"
                   telemetryId="auth.expired_link.request_new"
-        onPress={onRequestNew}
+                  onPress={onRequestNew}
                   accessibilityLabel={requestLabel}
                   accessibilityRole="button"
                 >
@@ -71,7 +65,7 @@ export function ExpiredLinkScreen({
                   className="w-full"
                   variant="outline"
                   telemetryId="auth.expired_link.home"
-        onPress={onHome}
+                  onPress={onHome}
                   accessibilityLabel={homeLabel}
                   accessibilityRole="button"
                 >

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -81,7 +81,7 @@ export function ForgotPasswordScreen() {
           <IconButton
             variant="ghost"
             telemetryId="auth.forgot_password.back"
-        onPress={() => router.back()}
+            onPress={() => router.back()}
             accessibilityLabel="Go back"
             accessibilityRole="button"
           >
@@ -123,7 +123,7 @@ export function ForgotPasswordScreen() {
                 <Button
                   className="w-full"
                   telemetryId="auth.forgot_password.submit"
-        onPress={handleSubmit}
+                  onPress={handleSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Reset your password"
                   accessibilityRole="button"
@@ -135,7 +135,9 @@ export function ForgotPasswordScreen() {
                   Remember your password?{" "}
                   <Text
                     className="text-sm text-foreground underline"
-                    onPress={withClickTracking("auth.forgot_password.push", () => router.push(routes.login))}
+                    onPress={withClickTracking("auth.forgot_password.push", () =>
+                      router.push(routes.login)
+                    )}
                     accessibilityRole="link"
                     accessibilityLabel="Sign in"
                   >
@@ -149,7 +151,7 @@ export function ForgotPasswordScreen() {
               <Button
                 className="w-full"
                 telemetryId="auth.forgot_password.push_2"
-        onPress={() =>
+                onPress={() =>
                   router.push({
                     pathname: routes.resetPassword,
                     params: { email },

package/src/screens/auth/ImportDataScreen.tsx

@@ -96,7 +96,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
             <Button
               className="w-full"
               telemetryId="auth.import_data.complete_and_navigate"
-        onPress={completeAndNavigate}
+              onPress={completeAndNavigate}
               accessibilityLabel={`Continue to ${appName}`}
               accessibilityRole="button"
               testID="import-continue"

package/src/screens/auth/LoginScreen.tsx

@@ -282,7 +282,7 @@ export function LoginScreen({
               <IconButton
                 variant="ghost"
                 telemetryId="auth.login.push"
-        onPress={() => router.push(routes.welcome)}
+                onPress={() => router.push(routes.welcome)}
                 className="self-start"
                 accessibilityLabel="Go back"
                 accessibilityRole="button"
@@ -318,7 +318,7 @@ export function LoginScreen({
                         variant="outline"
                         className="w-full"
                         telemetryId="auth.login.passkey_login"
-        onPress={handlePasskeyLogin}
+                        onPress={handlePasskeyLogin}
                         isLoading={passkeyStep === "passkey-loading"}
                         accessibilityLabel="Sign in with passkey"
                         accessibilityRole="button"
@@ -378,7 +378,9 @@ export function LoginScreen({
                   <View className="items-end">
                     <Text
                       className="font-mono text-sm underline"
-                      onPress={withClickTracking("auth.login.push_2", () => router.push(routes.forgotPassword))}
+                      onPress={withClickTracking("auth.login.push_2", () =>
+                        router.push(routes.forgotPassword)
+                      )}
                       accessibilityRole="link"
                       accessibilityLabel="Forgot password"
                     >
@@ -392,7 +394,9 @@ export function LoginScreen({
                     Don&apos;t have an account?{" "}
                     <Text
                       className="text-sm text-foreground underline"
-                      onPress={withClickTracking("auth.login.push_3", () => router.push(routes.register))}
+                      onPress={withClickTracking("auth.login.push_3", () =>
+                        router.push(routes.register)
+                      )}
                       accessibilityRole="link"
                       accessibilityLabel="Sign up"
                     >
@@ -405,7 +409,7 @@ export function LoginScreen({
                   <Button
                     className="w-full"
                     telemetryId="auth.login.login"
-        onPress={handleLogin}
+                    onPress={handleLogin}
                     isLoading={isLoading}
                     accessibilityLabel="Sign in"
                     accessibilityRole="button"
@@ -473,7 +477,10 @@ export function LoginScreen({
         <DialogFooter style={{ justifyContent: "center" }}>
           <DialogButton
             variant="primary"
-            onPress={withClickTracking("auth.login.action", isLoading ? () => {} : handleUnlockAfterPasskey)}
+            onPress={withClickTracking(
+              "auth.login.action",
+              isLoading ? () => {} : handleUnlockAfterPasskey
+            )}
             accessibilityLabel="Unlock"
             accessibilityRole="button"
           >

package/src/screens/auth/MfaChallengeScreen.tsx

@@ -195,7 +195,10 @@ export function MfaChallengeScreen() {
           </Pressable>
 
           <Pressable
-            onPress={withClickTracking("auth.mfa_challenge.toggle_recovery_mode", toggleRecoveryMode)}
+            onPress={withClickTracking(
+              "auth.mfa_challenge.toggle_recovery_mode",
+              toggleRecoveryMode
+            )}
             className="mt-5 items-center"
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             accessibilityRole="button"

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -50,9 +50,8 @@ export function PasskeyEnrollScreen({
           <CardHeader>
             <CardTitle>Add a passkey</CardTitle>
             <CardDescription>
-              Sign in faster and more securely next time with a passkey — your
-              device unlocks it with your fingerprint, face, or PIN. No password
-              to remember or phish.
+              Sign in faster and more securely next time with a passkey — your device unlocks it
+              with your fingerprint, face, or PIN. No password to remember or phish.
             </CardDescription>
           </CardHeader>
 
@@ -61,8 +60,7 @@ export function PasskeyEnrollScreen({
               <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : (
               <MutedText className="text-sm">
-                You can always add or remove passkeys later in your account
-                settings.
+                You can always add or remove passkeys later in your account settings.
               </MutedText>
             )}
           </CardContent>
@@ -71,7 +69,7 @@ export function PasskeyEnrollScreen({
             <Button
               className="w-full"
               telemetryId="auth.passkey_enroll.enroll"
-        onPress={onEnroll}
+              onPress={onEnroll}
               isLoading={isLoading}
               accessibilityLabel="Add a passkey"
               accessibilityRole="button"
@@ -82,7 +80,7 @@ export function PasskeyEnrollScreen({
               className="w-full"
               variant="ghost"
               telemetryId="auth.passkey_enroll.skip"
-        onPress={onSkip}
+              onPress={onSkip}
               accessibilityLabel="Not now"
               accessibilityRole="button"
             >

package/src/screens/auth/PrivacyPolicyScreen.tsx

@@ -62,8 +62,12 @@ export function PrivacyPolicyScreen({
       <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
         <View className="px-6 pt-4 pb-6">
           <View className="flex-row items-center justify-between mb-6">
-            <IconButton variant="ghost" size="sm" telemetryId="auth.privacy_policy.back"
-        onPress={() => router.back()}>
+            <IconButton
+              variant="ghost"
+              size="sm"
+              telemetryId="auth.privacy_policy.back"
+              onPress={() => router.back()}
+            >
               <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
             </IconButton>
 
@@ -191,7 +195,9 @@ export function PrivacyPolicyScreen({
                 <Text
                   className="font-mono text-sm underline"
                   style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
-                  onPress={withClickTracking("auth.privacy_policy.open_u_r_l", () => Linking.openURL(`mailto:${supportEmail}`))}
+                  onPress={withClickTracking("auth.privacy_policy.open_u_r_l", () =>
+                    Linking.openURL(`mailto:${supportEmail}`)
+                  )}
                 >
                   {supportEmail}
                 </Text>

package/src/screens/auth/ResetPasswordScreen.tsx

@@ -230,7 +230,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
           <IconButton
             variant="ghost"
             telemetryId="auth.reset_password.step"
-        onPress={() => (step === "password" ? setStep("code") : router.back())}
+            onPress={() => (step === "password" ? setStep("code") : router.back())}
             accessibilityLabel="Go back"
             accessibilityRole="button"
           >
@@ -273,7 +273,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 <Button
                   className="w-full"
                   telemetryId="auth.reset_password.code_submit"
-        onPress={handleCodeSubmit}
+                  onPress={handleCodeSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Continue"
                   accessibilityRole="button"
@@ -285,7 +285,9 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                   Back to{" "}
                   <Text
                     className="text-sm text-foreground underline"
-                    onPress={withClickTracking("auth.reset_password.push", () => router.push(routes.login))}
+                    onPress={withClickTracking("auth.reset_password.push", () =>
+                      router.push(routes.login)
+                    )}
                     accessibilityRole="link"
                     accessibilityLabel="Sign in"
                   >
@@ -351,7 +353,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 <Button
                   className="w-full"
                   telemetryId="auth.reset_password.password_submit"
-        onPress={handlePasswordSubmit}
+                  onPress={handlePasswordSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Reset password"
                   accessibilityRole="button"

package/src/screens/auth/ServerConfigScreen.tsx

@@ -251,7 +251,9 @@ export function ServerConfigScreen({
             >
               <Ionicons name="close" size={24} color={isDark ? "white" : "black"} />
             </Pressable>
-            <Text className="text-lg font-semibold text-foreground dark:text-white">Server Configuration</Text>
+            <Text className="text-lg font-semibold text-foreground dark:text-white">
+              Server Configuration
+            </Text>
             <View className="h-10 w-10" />
           </View>
 
@@ -275,7 +277,9 @@ export function ServerConfigScreen({
           </View>
 
           <View className="mb-6">
-            <Text className="mb-2 text-sm font-medium text-foreground dark:text-white">Server URL</Text>
+            <Text className="mb-2 text-sm font-medium text-foreground dark:text-white">
+              Server URL
+            </Text>
             <View className="flex-row items-center rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-3 py-3">
               <Ionicons
                 name="globe-outline"
@@ -345,7 +349,10 @@ export function ServerConfigScreen({
           </Pressable>
 
           <Pressable
-            onPress={withClickTracking("auth.server_config.clear_configuration", handleClearConfiguration)}
+            onPress={withClickTracking(
+              "auth.server_config.clear_configuration",
+              handleClearConfiguration
+            )}
             accessibilityRole="button"
             accessibilityLabel="Clear all settings"
             className="active:scale-98 mb-3 w-full rounded-lg border border-destructive dark:border-red-900 bg-background dark:bg-black px-6 py-3"
@@ -370,12 +377,18 @@ export function ServerConfigScreen({
           </Pressable>
 
           <View className="rounded-lg bg-card dark:bg-neutral-900/50 p-4">
-            <Text className="mb-3 text-sm font-semibold text-foreground dark:text-white">Need Help?</Text>
+            <Text className="mb-3 text-sm font-semibold text-foreground dark:text-white">
+              Need Help?
+            </Text>
             <View className="space-y-2">
               {bullets.map((bullet, idx) => (
                 <View key={idx} className="flex-row items-start">
-                  <Text className="mr-2 text-sm text-muted-foreground dark:text-neutral-400">•</Text>
-                  <Text className="flex-1 text-sm text-muted-foreground dark:text-neutral-400">{bullet}</Text>
+                  <Text className="mr-2 text-sm text-muted-foreground dark:text-neutral-400">
+                    •
+                  </Text>
+                  <Text className="flex-1 text-sm text-muted-foreground dark:text-neutral-400">
+                    {bullet}
+                  </Text>
                 </View>
               ))}
             </View>

package/src/screens/auth/TermsOfServiceScreen.tsx

@@ -74,8 +74,12 @@ export function TermsOfServiceScreen({
       <View className="flex-1" style={{ backgroundColor: isDark ? "#000000" : "#FFFFFF" }}>
         <View className="px-6 pt-4 pb-6">
           <View className="flex-row items-center justify-between mb-6">
-            <IconButton variant="ghost" size="sm" telemetryId="auth.terms_of_service.back"
-        onPress={() => router.back()}>
+            <IconButton
+              variant="ghost"
+              size="sm"
+              telemetryId="auth.terms_of_service.back"
+              onPress={() => router.back()}
+            >
               <Ionicons name="arrow-back" size={20} color={isDark ? "#FFFFFF" : "#000000"} />
             </IconButton>
 
@@ -168,7 +172,9 @@ export function TermsOfServiceScreen({
                 <Text
                   className="font-mono text-sm underline"
                   style={{ color: isDark ? "#6BA3E5" : "#4A90E2" }}
-                  onPress={withClickTracking("auth.terms_of_service.open_u_r_l", () => Linking.openURL(`mailto:${supportEmail}`))}
+                  onPress={withClickTracking("auth.terms_of_service.open_u_r_l", () =>
+                    Linking.openURL(`mailto:${supportEmail}`)
+                  )}
                 >
                   {supportEmail}
                 </Text>

package/src/screens/auth/WelcomeScreen.tsx

@@ -50,12 +50,19 @@ export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps)
         ) : null}
 
         <View className="w-full max-w-[360px] gap-3">
-          <Button className="w-full" telemetryId="auth.welcome.push"
-        onPress={() => router.push(routes.login)}>
+          <Button
+            className="w-full"
+            telemetryId="auth.welcome.push"
+            onPress={() => router.push(routes.login)}
+          >
             Sign In
           </Button>
-          <Button variant="outline" className="w-full" telemetryId="auth.welcome.push_2"
-        onPress={() => router.push(routes.register)}>
+          <Button
+            variant="outline"
+            className="w-full"
+            telemetryId="auth.welcome.push_2"
+            onPress={() => router.push(routes.register)}
+          >
             Create Account
           </Button>
         </View>

package/src/services/telemetry.ts

@@ -70,11 +70,11 @@ export function trackClick(element: string, route?: string): void {
  */
 export function withClickTracking<F extends (...args: never[]) => unknown>(
   element: string | undefined,
-  handler: F,
+  handler: F
 ): F;
 export function withClickTracking<F extends (...args: never[]) => unknown>(
   element: string | undefined,
-  handler: F | null | undefined,
+  handler: F | null | undefined
 ): F | undefined;
 /**
  * Wrap a press handler so activating the element is reported first.
@@ -88,7 +88,7 @@ export function withClickTracking<F extends (...args: never[]) => unknown>(
  */
 export function withClickTracking(
   element: string | undefined,
-  handler: ((...args: never[]) => unknown) | null | undefined,
+  handler: ((...args: never[]) => unknown) | null | undefined
 ): ((...args: never[]) => unknown) | undefined {
   // Untagged controls keep their original handler rather than gaining a
   // closure per render for nothing.