@entropy-softworks/ui 2026.7.31

package/src/hooks/useShakeAnimation.ts

@@ -0,0 +1,42 @@
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withSequence,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+
+/**
+ * Horizontal-shake animation for invalid-input feedback. Wrap the target
+ * in an `Animated.View` with the returned `animatedStyle`, then call
+ * `shake()` to trigger.
+ */
+export function useShakeAnimation() {
+  const rotation = useSharedValue(0);
+  const flash = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  const flashStyle = useAnimatedStyle(() => ({
+    opacity: flash.value,
+  }));
+
+  const shake = () => {
+    rotation.value = withSequence(
+      withTiming(-2.5, { duration: 55, easing: Easing.linear }),
+      withTiming(2.5, { duration: 55, easing: Easing.linear }),
+      withTiming(-2, { duration: 55, easing: Easing.linear }),
+      withTiming(2, { duration: 55, easing: Easing.linear }),
+      withTiming(-1, { duration: 45, easing: Easing.linear }),
+      withTiming(0, { duration: 45, easing: Easing.linear })
+    );
+    flash.value = withSequence(
+      withTiming(0.18, { duration: 120, easing: Easing.out(Easing.quad) }),
+      withTiming(0, { duration: 380, easing: Easing.out(Easing.quad) })
+    );
+  };
+
+  return { animatedStyle, flashStyle, shake };
+}

package/src/hooks/useUploadBlobUrl.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { apiFetch } from "../utils/api-fetch";
+
+const FETCH_TIMEOUT_MS = 15_000;
+
+export interface UploadBlobUrlResult {
+  uri: string | null;
+  errored: boolean;
+  setErrored: (v: boolean) => void;
+}
+
+/**
+ * Fetch an authenticated upload via `apiFetch`, expose a blob URL the
+ * caller can hand to an `<Image>` / `<img>`. Cancels in-flight on input
+ * change and revokes the URL on unmount so list scrolling doesn't leak
+ * memory.
+ */
+export function useUploadBlobUrl(
+  uploadId: string | null | undefined,
+  uploadsPath = "/uploads"
+): UploadBlobUrlResult {
+  const [uri, setUri] = useState<string | null>(null);
+  const [errored, setErrored] = useState(false);
+
+  useEffect(() => {
+    setErrored(false);
+    if (!uploadId) {
+      setUri(null);
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+    let createdUrl: string | null = null;
+
+    apiFetch(`${uploadsPath}/${encodeURIComponent(uploadId)}`, { signal: controller.signal })
+      .then(async (response) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        if (!response.ok) {
+          throw new Error(`Failed to load upload (${response.status})`);
+        }
+        const blob = await response.blob();
+        if (controller.signal.aborted) {
+          return;
+        }
+        const url = URL.createObjectURL(blob);
+        createdUrl = url;
+        setUri(url);
+      })
+      .catch((e: unknown) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        if (e instanceof DOMException && e.name === "AbortError") {
+          return;
+        }
+        setErrored(true);
+      })
+      .finally(() => {
+        clearTimeout(timeout);
+      });
+
+    return () => {
+      controller.abort();
+      clearTimeout(timeout);
+      if (createdUrl) {
+        URL.revokeObjectURL(createdUrl);
+      }
+    };
+  }, [uploadId, uploadsPath]);
+
+  return { uri, errored, setErrored };
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+/// <reference types="nativewind/types" />
+
+// entropy-ui — shared React Native UI primitives, hooks, services, and auth
+// screens for Entropy Softworks Expo apps.
+//
+// This barrel re-exports the public API surface. Sub-paths
+// (`@entropy-softworks/ui/screens/auth`, `@entropy-softworks/ui/hooks`, …) are
+// declared in package.json `exports` for tree-shaking and code-splitting.
+//
+// The triple-slash reference above ensures NativeWind's react-native
+// module augmentation (which adds `className` to View/Text/…) is loaded
+// when consumers type-check through the package, even when their
+// project's own `nativewind-env.d.ts` is outside the entropy-ui module
+// graph (the case under `preserveSymlinks: true`).
+
+// Re-exports are deliberately split between the root barrel and the
+// `screens` sub-path. The root barrel covers everything a typical
+// consumer needs to render UI (primitives, helpers, hooks, services,
+// theming, AppConfig context). Auth screens — which transitively
+// import expo-router, expo-status-bar, expo-haptics and other native-
+// only Expo modules — are NOT re-exported here. Consumers that render
+// a full-page auth screen import directly from
+// `@entropy-softworks/ui/screens/auth`. This split keeps the package
+// usable in non-Expo bundlers (e.g. WXT/Vite-built browser extensions)
+// where pulling the screens layer drags an unworkable RN/Expo native
+// graph into the production bundle.
+// Re-export wildcards from sub-barrels. The sub-barrels themselves
+// use explicit named exports (see `components/index.ts`,
+// `services/index.ts`, etc.) — that is the source of truth for the
+// package's public surface. Renaming an internal symbol must be a
+// deliberate edit in the relevant sub-barrel; the root aggregator
+// follows by definition.
+//
+// A future 1.0 release should freeze the public API by snapshotting
+// `tsc --emitDeclarationOnly` output into `api-snapshot.d.ts` and
+// gating CI on that snapshot rather than restructuring this barrel
+// — `export *` + named sub-barrels is the most-common convention in
+// the React Native ecosystem and switching off it would not improve
+// drift detection (it would just move drift to the root file).
+export * from "./components";
+export * from "./components/auth";
+export * from "./components/settings";
+export * from "./context";
+export * from "./flags";
+export * from "./forms";
+export * from "./hooks";
+export * from "./services";
+export * from "./utils";

package/src/screens/auth/AccountPickerScreen.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { Pressable, ScrollView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { MutedText, Text } from "../../components/text";
+import { Button } from "../../components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../components/card";
+
+/** A signed-in account the picker can choose. */
+export interface PickableAccount {
+  userId: string;
+  username: string;
+  email: string;
+  displayName?: string;
+}
+
+export interface AccountPickerScreenProps {
+  accounts: PickableAccount[];
+  /** Continue as the chosen account. */
+  onSelect: (account: PickableAccount) => void;
+  /** Sign in with a different account. */
+  onUseAnother: () => void;
+  isLoading?: boolean;
+}
+
+/**
+ * "Choose an account" screen for multi-session SSO (OIDC `prompt=select_account`
+ * style). Presentational: the host app supplies the accounts and handles the
+ * selection (resume the authorize request) / "use another" (login) navigation.
+ */
+export function AccountPickerScreen({
+  accounts,
+  onSelect,
+  onUseAnother,
+  isLoading,
+}: AccountPickerScreenProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <StatusBar style={isDark ? "light" : "dark"} />
+      <ScrollView
+        className="flex-1"
+        contentContainerClassName="flex-1 items-center justify-center p-6"
+        keyboardShouldPersistTaps="handled"
+      >
+        <Card className="w-full max-w-[400px]">
+          <CardHeader>
+            <CardTitle>Choose an account</CardTitle>
+            <CardDescription>
+              Select an account to continue, or use a different one.
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="gap-2">
+            {accounts.length === 0 ? (
+              <MutedText className="text-sm">No signed-in accounts.</MutedText>
+            ) : (
+              accounts.map((a) => (
+                <Pressable
+                  key={a.userId}
+                  onPress={() => onSelect(a)}
+                  disabled={isLoading}
+                  accessibilityRole="button"
+                  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>
+                  <MutedText className="text-xs">{a.email}</MutedText>
+                </Pressable>
+              ))
+            )}
+          </CardContent>
+
+          <CardFooter className="border-t-0">
+            <Button
+              className="w-full"
+              variant="outline"
+              onPress={onUseAnother}
+              accessibilityLabel="Use another account"
+              accessibilityRole="button"
+            >
+              Use another account
+            </Button>
+          </CardFooter>
+        </Card>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default AccountPickerScreen;