@entropy-softworks/ui 2026.8.41 → 2026.9.1

package/lib/hooks/useUploadBlobUrl.d.ts

@@ -4,10 +4,54 @@ export interface UploadBlobUrlResult {
     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.
+ * Produce a renderable URI for an upload id without going through
+ * `apiFetch`.
+ *
+ * For a consumer that keeps uploads somewhere this package cannot reach — an
+ * on-device database, a cache it populated itself — the resolver is the whole
+ * seam. Return `null` for an id that does not resolve; the hook reports that
+ * as `errored`, which is what a renderer draws its fallback on.
+ *
+ * The `signal` aborts with the effect, so a resolver doing real work can stop
+ * when the row scrolls away.
  */
-export declare function useUploadBlobUrl(uploadId: string | null | undefined, uploadsPath?: string): UploadBlobUrlResult;
+export type UploadResolver = (uploadId: string, signal: AbortSignal) => Promise<string | null>;
+export interface UploadBlobUrlOptions {
+    /** Upload-fetch path prefix. Defaults to `/uploads`. */
+    uploadsPath?: string;
+    /**
+     * Resolve the URI yourself instead of fetching it.
+     *
+     * Identity does not have to be stable: the resolver is held in a ref and
+     * only `uploadId` / `uploadsPath` re-run the effect. An inline arrow would
+     * otherwise refetch on every render, and what identifies the resource is the
+     * id, not the function that happens to fetch it.
+     */
+    resolve?: UploadResolver;
+}
+/**
+ * A URI for an upload, fetched through `apiFetch` unless the consumer resolves
+ * it itself.
+ *
+ * # Web gets a blob URL; native gets a data URI
+ *
+ * `URL.createObjectURL` is a browser API. React Native's `URL` does not
+ * implement it in any way that can be relied on across both platforms — so on
+ * native this hook used to hand `<Image>` a URI built by a function that
+ * either threw or produced something the image loader could not open, and the
+ * fetch fell into the `catch` below. The visible symptom was that custom
+ * uploaded icons never appeared on a phone: they resolved to the fallback
+ * glyph every time, on every consumer, and looked like a missing-image problem
+ * rather than a URL one.
+ *
+ * Native therefore reads the bytes and builds `data:<type>;base64,…`, which
+ * every RN image loader accepts. The cost is that base64 inflates by a third
+ * and the string sits in the JS heap for as long as the row is mounted, which
+ * is affordable for the icons this exists to draw (the vault caps an upload at
+ * 256KB) and is why web keeps the blob URL — no copy, and revocable.
+ *
+ * The second argument accepts a bare path for backwards compatibility with
+ * `useUploadBlobUrl(id, "/uploads")`; new call sites should pass options.
+ */
+export declare function useUploadBlobUrl(uploadId: string | null | undefined, options?: string | UploadBlobUrlOptions): UploadBlobUrlResult;
 //# sourceMappingURL=useUploadBlobUrl.d.ts.map

package/lib/hooks/useUploadBlobUrl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUploadBlobUrl.d.ts","sourceRoot":"","sources":["../../src/hooks/useUploadBlobUrl.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,WAAW,SAAa,GACvB,mBAAmB,CAsDrB"}
+{"version":3,"file":"useUploadBlobUrl.d.ts","sourceRoot":"","sources":["../../src/hooks/useUploadBlobUrl.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE/F,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,OAAO,GAAE,MAAM,GAAG,oBAAyB,GAC1C,mBAAmB,CAgGrB"}

package/lib/hooks/useUploadBlobUrl.js

@@ -1,15 +1,39 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
 import { apiFetch } from "../utils/api-fetch";
 const FETCH_TIMEOUT_MS = 15_000;
 /**
- * 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.
+ * A URI for an upload, fetched through `apiFetch` unless the consumer resolves
+ * it itself.
+ *
+ * # Web gets a blob URL; native gets a data URI
+ *
+ * `URL.createObjectURL` is a browser API. React Native's `URL` does not
+ * implement it in any way that can be relied on across both platforms — so on
+ * native this hook used to hand `<Image>` a URI built by a function that
+ * either threw or produced something the image loader could not open, and the
+ * fetch fell into the `catch` below. The visible symptom was that custom
+ * uploaded icons never appeared on a phone: they resolved to the fallback
+ * glyph every time, on every consumer, and looked like a missing-image problem
+ * rather than a URL one.
+ *
+ * Native therefore reads the bytes and builds `data:<type>;base64,…`, which
+ * every RN image loader accepts. The cost is that base64 inflates by a third
+ * and the string sits in the JS heap for as long as the row is mounted, which
+ * is affordable for the icons this exists to draw (the vault caps an upload at
+ * 256KB) and is why web keeps the blob URL — no copy, and revocable.
+ *
+ * The second argument accepts a bare path for backwards compatibility with
+ * `useUploadBlobUrl(id, "/uploads")`; new call sites should pass options.
  */
-export function useUploadBlobUrl(uploadId, uploadsPath = "/uploads") {
+export function useUploadBlobUrl(uploadId, options = {}) {
+    const { uploadsPath = "/uploads", resolve } = typeof options === "string" ? { uploadsPath: options, resolve: undefined } : options;
     const [uri, setUri] = useState(null);
     const [errored, setErrored] = useState(false);
+    // See `UploadBlobUrlOptions.resolve`: kept in a ref so a resolver defined
+    // inline at the call site cannot turn every render into a refetch.
+    const resolveRef = useRef(resolve);
+    resolveRef.current = resolve;
     useEffect(() => {
         setErrored(false);
         if (!uploadId) {
@@ -19,21 +43,51 @@ export function useUploadBlobUrl(uploadId, uploadsPath = "/uploads") {
         const controller = new AbortController();
         const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
         let createdUrl = null;
-        apiFetch(`${uploadsPath}/${encodeURIComponent(uploadId)}`, { signal: controller.signal })
-            .then(async (response) => {
+        const load = async () => {
+            const resolver = resolveRef.current;
+            if (resolver) {
+                return resolver(uploadId, controller.signal);
+            }
+            const response = await apiFetch(`${uploadsPath}/${encodeURIComponent(uploadId)}`, {
+                signal: controller.signal,
+            });
             if (controller.signal.aborted) {
-                return;
+                return null;
             }
             if (!response.ok) {
                 throw new Error(`Failed to load upload (${response.status})`);
             }
-            const blob = await response.blob();
+            if (Platform.OS === "web") {
+                const blob = await response.blob();
+                if (controller.signal.aborted) {
+                    return null;
+                }
+                createdUrl = URL.createObjectURL(blob);
+                return createdUrl;
+            }
+            const bytes = new Uint8Array(await response.arrayBuffer());
+            if (controller.signal.aborted) {
+                return null;
+            }
+            // The server sends the stored content type; anything else is a server
+            // that has lost track of what it is holding, and `<Image>` will refuse
+            // the URI rather than guess — which surfaces as the fallback glyph, the
+            // same outcome a failed fetch gives.
+            const contentType = response.headers.get("content-type") ?? "application/octet-stream";
+            return `data:${contentType};base64,${toBase64(bytes)}`;
+        };
+        load()
+            .then((next) => {
             if (controller.signal.aborted) {
                 return;
             }
-            const url = URL.createObjectURL(blob);
-            createdUrl = url;
-            setUri(url);
+            if (next === null) {
+                // A resolver that has nothing for this id, or an aborted read. Either
+                // way there is no image, which is what `errored` means to a renderer.
+                setErrored(true);
+                return;
+            }
+            setUri(next);
         })
             .catch((e) => {
             if (controller.signal.aborted) {
@@ -57,4 +111,29 @@ export function useUploadBlobUrl(uploadId, uploadsPath = "/uploads") {
     }, [uploadId, uploadsPath]);
     return { uri, errored, setErrored };
 }
+const BASE64_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+/**
+ * Base64, without depending on the host having `btoa`.
+ *
+ * React Native ships no `btoa`, and whether one exists depends entirely on
+ * which polyfill the consuming app happened to install — a library cannot
+ * assume it. Encoding by hand is a dozen lines and removes the question.
+ *
+ * The `?? 0` on the tail bytes is the padding rule rather than a guard: base64
+ * completes a short final group with zero bits and then marks the missing
+ * bytes with `=`. Reading past the end is therefore correct here, and doing it
+ * this way keeps the loop free of the non-null assertions
+ * `noUncheckedIndexedAccess` would otherwise demand at every lookup.
+ */
+function toBase64(bytes) {
+    const chars = [];
+    for (let index = 0; index < bytes.length; index += 3) {
+        const b0 = bytes[index] ?? 0;
+        const b1 = bytes[index + 1] ?? 0;
+        const b2 = bytes[index + 2] ?? 0;
+        const remaining = bytes.length - index;
+        chars.push(BASE64_ALPHABET.charAt(b0 >> 2), BASE64_ALPHABET.charAt(((b0 & 3) << 4) | (b1 >> 4)), remaining > 1 ? BASE64_ALPHABET.charAt(((b1 & 15) << 2) | (b2 >> 6)) : "=", remaining > 2 ? BASE64_ALPHABET.charAt(b2 & 63) : "=");
+    }
+    return chars.join("");
+}
 //# sourceMappingURL=useUploadBlobUrl.js.map

package/lib/hooks/useUploadBlobUrl.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUploadBlobUrl.js","sourceRoot":"","sources":["../../src/hooks/useUploadBlobUrl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAQhC;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,QAAmC,EACnC,WAAW,GAAG,UAAU;IAExB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC;QACvE,IAAI,UAAU,GAAkB,IAAI,CAAC;QAErC,QAAQ,CAAC,GAAG,WAAW,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC;aACtF,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;YACvB,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBAC9B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;gBACjB,MAAM,IAAI,KAAK,CAAC,0BAA0B,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAChE,CAAC;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YACnC,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBAC9B,OAAO;YACT,CAAC;YACD,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACtC,UAAU,GAAG,GAAG,CAAC;YACjB,MAAM,CAAC,GAAG,CAAC,CAAC;QACd,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAU,EAAE,EAAE;YACpB,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBAC9B,OAAO;YACT,CAAC;YACD,IAAI,CAAC,YAAY,YAAY,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;gBACzD,OAAO;YACT,CAAC;YACD,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,YAAY,CAAC,OAAO,CAAC,CAAC;YACtB,IAAI,UAAU,EAAE,CAAC;gBACf,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AACtC,CAAC"}
+{"version":3,"file":"useUploadBlobUrl.js","sourceRoot":"","sources":["../../src/hooks/useUploadBlobUrl.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entropy-softworks/ui",
-  "version": "2026.8.41",
+  "version": "2026.9.1",
   "private": false,
   "description": "Shared React Native UI primitives, auth screens, hooks, and services for Entropy Softworks Expo apps",
   "license": "MIT",

package/src/components/item-icon.tsx

@@ -3,7 +3,7 @@ import { Image, Platform, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useColorScheme } from "nativewind";
 import { resolveIcon } from "../services/favicon";
-import { useUploadBlobUrl } from "../hooks/useUploadBlobUrl";
+import { type UploadResolver, useUploadBlobUrl } from "../hooks/useUploadBlobUrl";
 
 export interface ItemIconProps {
   /**
@@ -28,6 +28,21 @@ export interface ItemIconProps {
   faviconPath?: string;
   /** Upload-fetch path prefix. Defaults to `/uploads`. */
   uploadsPath?: string;
+  /**
+   * Resolve a `custom:<uploadId>` reference yourself instead of letting this
+   * component fetch it.
+   *
+   * For a consumer whose uploads are not behind `apiFetch` at all — vault's
+   * device-only vaults keep them in on-device SQLite, with no server to ask.
+   * Without this, such a consumer has to either fork the component or
+   * pre-resolve the reference into a `data:` URI and pass it as `iconUrl`,
+   * which works by accident (anything that is not `custom:` is treated as a
+   * plain URL) and hides the intent.
+   *
+   * Return `null` for an id that does not resolve; the fallback glyph is drawn,
+   * exactly as for a fetch that fails.
+   */
+  resolveUpload?: UploadResolver;
 }
 
 // react-native-web forwards `loading` and `decoding` to the underlying
@@ -51,13 +66,14 @@ export const ItemIcon = React.memo(function ItemIcon({
   fallbackColor,
   faviconPath = "/favicon",
   uploadsPath = "/uploads",
+  resolveUpload,
 }: ItemIconProps) {
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
 
   const resolved = resolveIcon({ iconUrl, siteUrl, faviconPath });
   const uploadId = resolved.kind === "upload" ? resolved.uploadId : null;
-  const upload = useUploadBlobUrl(uploadId, uploadsPath);
+  const upload = useUploadBlobUrl(uploadId, { uploadsPath, resolve: resolveUpload });
 
   const directUri = resolved.kind === "url" ? resolved.uri : null;
   const [urlErrored, setUrlErrored] = useState(false);

package/src/components/pin-pad.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Platform, Pressable, Text, View } from "react-native";
+import { Platform, Pressable, Text, useWindowDimensions, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import * as Haptics from "expo-haptics";
 import { useColorScheme } from "nativewind";
 import { Delete, Fingerprint } from "lucide-react-native";
 
@@ -8,6 +10,21 @@ import { Delete, Fingerprint } from "lucide-react-native";
  * the active palette via NativeWind classes). Self-manages the entered
  * digits and fires `onComplete` when `length` is reached; pass a changing
  * `resetKey` to clear it (e.g. after a wrong PIN).
+ *
+ * # Sizing
+ *
+ * The pad measures itself against the viewport instead of sitting at a fixed
+ * 288px. On a modern phone a fixed pad reads as a small control marooned in the
+ * middle of a large screen — and this is the primary way into the app for a
+ * device-only vault, so it should feel like the screen's purpose rather than a
+ * widget on it. Keys grow with the available width and stop at `MAX_KEY` so a
+ * tablet does not get comedy-sized buttons.
+ *
+ * # Why the keys have a fill
+ *
+ * They previously had no background at all until the moment of the press, which
+ * left three columns of bare digits that did not read as pressable. A resting
+ * fill plus a border is what makes a target look like a target.
  */
 export interface PinPadProps {
   length?: number;
@@ -18,10 +35,23 @@ export interface PinPadProps {
   /** Bump to clear the entered digits. */
   resetKey?: string | number;
   error?: boolean;
+  /**
+   * Haptic feedback on each key. On by default, and a no-op on web and on any
+   * device without a haptic engine. Pass `false` where a press already triggers
+   * feedback of its own.
+   */
+  haptics?: boolean;
 }
 
 const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;
 
+/** Key diameter bounds, and the gap between them. */
+const MIN_KEY = 76;
+const MAX_KEY = 104;
+const GAP = 16;
+/** Room left for the screen's own horizontal padding. */
+const SIDE_PADDING = 48;
+
 export function PinPad({
   length = 6,
   onComplete,
@@ -29,9 +59,24 @@ export function PinPad({
   onBiometric,
   resetKey,
   error,
+  haptics = true,
 }: PinPadProps) {
   const { colorScheme } = useColorScheme();
-  const iconColor = colorScheme === "dark" ? "#FFFFFF" : "#000000";
+  const isDark = colorScheme === "dark";
+  const iconColor = isDark ? "#FFFFFF" : "#000000";
+  const { width } = useWindowDimensions();
+
+  // Three keys and two gaps have to fit inside the viewport less the screen's
+  // padding. Clamped at both ends: MIN_KEY keeps the pad usable on a small
+  // phone even if that means it is the widest thing on screen, MAX_KEY stops a
+  // tablet from rendering three dinner plates.
+  const keySize = Math.max(
+    MIN_KEY,
+    Math.min(MAX_KEY, Math.floor((width - SIDE_PADDING - 2 * GAP) / 3))
+  );
+  const padWidth = keySize * 3 + GAP * 2;
+  const dotSize = Math.round(keySize * 0.17);
+
   const [pin, setPin] = useState("");
   // Source of truth for the latest digits — lets callbacks fire OUTSIDE the
   // setPin updater (calling a parent setState inside an updater triggers
@@ -49,12 +94,30 @@ export function PinPad({
     }
   }
 
+  /**
+   * A tap you can feel.
+   *
+   * Deliberately fire-and-forget: the feedback is worth nothing if the digit
+   * waits for it, and a device with no haptic engine rejects the promise rather
+   * than throwing, which must not surface as an unhandled rejection over a
+   * keypress.
+   */
+  const tap = useCallback(() => {
+    if (!haptics || Platform.OS === "web") {
+      return;
+    }
+    void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {
+      // No haptic engine, or the OS declined. Nothing to say about it.
+    });
+  }, [haptics]);
+
   const press = useCallback(
     (d: string) => {
       const cur = pinRef.current;
       if (cur.length >= length) {
         return;
       }
+      tap();
       const next = cur + d;
       pinRef.current = next;
       setPin(next);
@@ -63,15 +126,19 @@ export function PinPad({
         onComplete(next);
       }
     },
-    [length, onChange, onComplete]
+    [length, onChange, onComplete, tap]
   );
 
   const back = useCallback(() => {
+    if (pinRef.current.length === 0) {
+      return;
+    }
+    tap();
     const next = pinRef.current.slice(0, -1);
     pinRef.current = next;
     setPin(next);
     onChange?.(next);
-  }, [onChange]);
+  }, [onChange, tap]);
 
   // Physical keyboard / numpad support (web): digits type, Backspace/Delete
   // removes, Enter submits a full PIN.
@@ -98,35 +165,46 @@ export function PinPad({
   }, [press, back, onComplete, length]);
 
   return (
-    <View className="items-center gap-7">
+    <View className="items-center gap-8">
       {/* dots */}
-      <View className="flex-row gap-3">
+      <View className="flex-row" style={{ gap: Math.round(dotSize * 0.9) }}>
         {Array.from({ length }).map((_, i) => (
           <View
             key={i}
+            style={{ width: dotSize, height: dotSize, borderRadius: dotSize / 2 }}
             className={
               i < pin.length
                 ? error
-                  ? "h-3.5 w-3.5 rounded-full bg-destructive dark:bg-red-900"
-                  : "h-3.5 w-3.5 rounded-full bg-primary dark:bg-white"
-                : "h-3.5 w-3.5 rounded-full border-2 border-border dark:border-neutral-800"
+                  ? "bg-destructive dark:bg-red-900"
+                  : "bg-primary dark:bg-white"
+                : "border-2 border-border dark:border-neutral-700"
             }
           />
         ))}
       </View>
 
       {/* keypad */}
-      <View className="w-72 flex-row flex-wrap justify-center gap-3">
+      <View className="flex-row flex-wrap justify-center" style={{ width: padWidth, gap: GAP }}>
         {KEYS.map((k) => (
-          <Key key={k} label={k} onPress={() => press(k)} />
+          <Key key={k} label={k} size={keySize} onPress={() => press(k)} />
         ))}
         {onBiometric ? (
-          <Key onPress={onBiometric} icon={<Fingerprint size={26} color={iconColor} />} />
+          <Key
+            size={keySize}
+            onPress={onBiometric}
+            icon={<Fingerprint size={Math.round(keySize * 0.34)} color={iconColor} />}
+            accessibilityLabel="Unlock with biometrics"
+          />
         ) : (
-          <View className="h-20 w-20" />
+          <View style={{ width: keySize, height: keySize }} />
         )}
-        <Key label="0" onPress={() => press("0")} />
-        <Key onPress={back} icon={<Delete size={24} color={iconColor} />} />
+        <Key label="0" size={keySize} onPress={() => press("0")} />
+        <Key
+          size={keySize}
+          onPress={back}
+          icon={<Delete size={Math.round(keySize * 0.3)} color={iconColor} />}
+          accessibilityLabel="Delete"
+        />
       </View>
     </View>
   );
@@ -135,23 +213,49 @@ export function PinPad({
 function Key({
   label,
   icon,
+  size,
   onPress,
+  accessibilityLabel,
 }: {
   label?: string;
   icon?: React.ReactNode;
+  size: number;
   onPress: () => void;
+  accessibilityLabel?: string;
 }) {
+  // Same two-part response as Button: a dip in scale and a lift in fill. The
+  // fill change alone was too easy to miss on a dark screen, and on a keypad
+  // "did that register?" is the entire question the user is asking.
+  const pressed = useSharedValue(0);
+  const pressStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 - pressed.value * 0.08 }],
+  }));
+
   return (
-    <Pressable
-      onPress={onPress}
-      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary dark:active:bg-neutral-800"
-      accessibilityRole="button"
-      accessibilityLabel={label ?? "key"}
-    >
-      {icon ?? (
-        <Text className="font-sans-medium text-2xl text-foreground dark:text-white">{label}</Text>
-      )}
-    </Pressable>
+    <Animated.View style={pressStyle}>
+      <Pressable
+        onPress={onPress}
+        onPressIn={() => {
+          pressed.value = withTiming(1, { duration: 60 });
+        }}
+        onPressOut={() => {
+          pressed.value = withTiming(0, { duration: 160 });
+        }}
+        style={{ width: size, height: size, borderRadius: size / 2 }}
+        className="items-center justify-center border border-border bg-secondary active:bg-border dark:border-neutral-700 dark:bg-neutral-900 dark:active:bg-neutral-700"
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label ?? "key"}
+      >
+        {icon ?? (
+          <Text
+            className="font-sans-medium text-foreground dark:text-white"
+            style={{ fontSize: Math.round(size * 0.38) }}
+          >
+            {label}
+          </Text>
+        )}
+      </Pressable>
+    </Animated.View>
   );
 }