@webority/mobile-ui 0.0.37 → 0.0.39

package/lib/module/components/AuthedImage/AuthedImage.js

@@ -78,10 +78,10 @@ const AuthedImage = props => {
         return;
       }
       if (cached && isFresh(cached.meta, ttlMs)) {
-        void touchEntry(key, cached.meta);
+        void touchEntry(key);
         finish({
           status: 'ready',
-          dataUri: cached.dataUri
+          fileUri: cached.fileUri
         });
         return;
       }
@@ -99,7 +99,7 @@ const AuthedImage = props => {
         const result = await entry.promise;
         finish({
           status: 'ready',
-          dataUri: result.dataUri
+          fileUri: result.fileUri
         });
       } catch (error) {
         if (cancelled) {
@@ -110,7 +110,7 @@ const AuthedImage = props => {
         if (cached) {
           finish({
             status: 'ready',
-            dataUri: cached.dataUri
+            fileUri: cached.fileUri
           });
           return;
         }
@@ -187,7 +187,7 @@ const AuthedImage = props => {
     testID: testID,
     style: style,
     source: {
-      uri: state.dataUri
+      uri: state.fileUri
     }
   });
 };

package/lib/module/components/AuthedImage/authedImageCache.js

@@ -1,11 +1,21 @@
 "use strict";
 
 import { ACCESS_TOKEN_KEY, getToken, isStorageAvailable, Logger, publicClient, Storage } from '@webority/mobile-core';
+import { Directory, File, Paths } from 'expo-file-system';
 import { hashString } from "../../utils/hashString.js";
-const KEY_PREFIX = '@webority/authed-image/v1/';
-const DATA_PREFIX = `${KEY_PREFIX}d/`;
-const META_PREFIX = `${KEY_PREFIX}m/`;
+const INDEX_KEY = '@webority/authed-image/v2/index';
+// Releases before the file cache kept every image as a base64 string in the
+// key-value store, up to the 50 MB ceiling. Nothing reads those rows any more,
+// so they are removed the first time this version finds no index.
+const LEGACY_PREFIX = '@webority/authed-image/v1/';
+const FOLDER = 'authed-images';
 const DEFAULT_BYTE_CEILING = 50 * 1024 * 1024;
+
+// A hit only moves an entry's last access in memory. Writing the index on every
+// hit would put a storage write behind every row of a scrolling list, so a hit
+// persists only when the stored time is this old; least-recently-used order
+// survives a restart to within this window.
+const TOUCH_PERSIST_MS = 60 * 60 * 1000;
 export const DEFAULT_TTL_MS = 7 * 24 * 60 * 60 * 1000;
 let byteCeiling = DEFAULT_BYTE_CEILING;
 
@@ -23,129 +33,190 @@ export const setAuthedImageCacheLimit = bytes => {
 export const getAuthedImageCacheLimit = () => byteCeiling;
 
 /**
- * Hex only by construction, so it is always a safe storage key segment.
+ * Hex only by construction, so it is always a safe file name segment.
  */
 export const deriveCacheKey = (uri, override) => hashString(override ?? uri);
-const B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-const encodeBase64 = buffer => {
-  const bytes = new Uint8Array(buffer);
-  let out = '';
-  for (let i = 0; i < bytes.length; i += 3) {
-    const b0 = bytes[i];
-    const b1 = i + 1 < bytes.length ? bytes[i + 1] : undefined;
-    const b2 = i + 2 < bytes.length ? bytes[i + 2] : undefined;
-    out += B64_ALPHABET[b0 >> 2];
-    out += B64_ALPHABET[(b0 & 0x03) << 4 | (b1 ?? 0) >> 4];
-    out += b1 === undefined ? '=' : B64_ALPHABET[((b1 & 0x0f) << 2 | (b2 ?? 0) >> 6) & 0x3f];
-    out += b2 === undefined ? '=' : B64_ALPHABET[b2 & 0x3f];
-  }
-  return out;
+const imageFile = fileName => new File(Paths.cache, FOLDER, fileName);
+const toMeta = ({
+  fetchedAt,
+  bytes,
+  contentType,
+  lastAccessedAt
+}) => ({
+  fetchedAt,
+  bytes,
+  contentType,
+  lastAccessedAt
+});
+
+// The image bytes live in files; only this small index goes to the key-value
+// store. A store that fails costs persistence across restarts, never an image:
+// Storage logs and returns false rather than throwing.
+let index = null;
+let indexLoad = null;
+const persistIndex = async entries => {
+  if (!isStorageAvailable()) {
+    return;
+  }
+  const out = {};
+  for (const [cacheKey, entry] of entries) {
+    out[cacheKey] = {
+      ...entry,
+      persistedAccessAt: entry.lastAccessedAt
+    };
+  }
+  if (await Storage.setItem(INDEX_KEY, JSON.stringify(out))) {
+    for (const entry of entries.values()) {
+      entry.persistedAccessAt = entry.lastAccessedAt;
+    }
+  }
+};
+const removeLegacyEntries = async () => {
+  const keys = await Storage.getAllKeys();
+  const legacy = keys.filter(key => key.startsWith(LEGACY_PREFIX));
+  if (legacy.length > 0) {
+    await Storage.multiRemove(legacy);
+  }
 };
 
 /**
- * The cache is an OPTIMISATION, so a failing store must never stop an image
- * rendering. That used to mean guarding on whether a backend existed at all,
- * warning once and skipping the cache; under Expo-first the backend ships with
- * the library, so "no backend" is no longer a state an app can be in and that
- * branch was unreachable.
- *
- * What remains is a store that exists and FAILS, which the per-operation error
- * handling below already covers: each read returns null and each write returns
- * false, the image still fetches, and nothing is logged per image.
+ * A file the index does not name is unreachable: written just before the app
+ * died, or left by an index write that failed. Removing them here, once per
+ * session and before anything new is written, keeps the byte ceiling true.
  */
-const cacheUsable = () => isStorageAvailable();
-export const readEntry = async cacheKey => {
-  if (!cacheUsable()) {
-    return null;
+const removeOrphanFiles = entries => {
+  try {
+    const folder = new Directory(Paths.cache, FOLDER);
+    if (!folder.exists) {
+      return;
+    }
+    const known = new Set([...entries.values()].map(entry => imageFile(entry.fileName).uri));
+    for (const item of folder.list()) {
+      if (!known.has(item.uri)) {
+        item.delete();
+      }
+    }
+  } catch (error) {
+    Logger.warn('[AuthedImage] could not tidy the image cache folder', error);
   }
-  const values = await Storage.multiGet([`${DATA_PREFIX}${cacheKey}`, `${META_PREFIX}${cacheKey}`]);
-  const dataUri = values[`${DATA_PREFIX}${cacheKey}`];
-  const rawMeta = values[`${META_PREFIX}${cacheKey}`];
-  if (!dataUri || !rawMeta) {
-    return null;
+};
+const readStoredIndex = async () => {
+  const entries = new Map();
+  if (!isStorageAvailable()) {
+    return entries;
+  }
+  const raw = await Storage.getItem(INDEX_KEY);
+  if (!raw) {
+    await removeLegacyEntries();
+    return entries;
   }
   try {
-    return {
-      dataUri,
-      meta: JSON.parse(rawMeta)
-    };
+    for (const [cacheKey, entry] of Object.entries(JSON.parse(raw))) {
+      entries.set(cacheKey, entry);
+    }
   } catch {
+    // An index we cannot parse names no file, so every file becomes an orphan
+    // and is removed below: the cache starts empty rather than wrong.
+  }
+  return entries;
+};
+const loadIndex = () => {
+  if (index) {
+    return Promise.resolve(index);
+  }
+  if (!indexLoad) {
+    indexLoad = readStoredIndex().then(entries => {
+      removeOrphanFiles(entries);
+      index = entries;
+      return entries;
+    }).finally(() => {
+      indexLoad = null;
+    });
+  }
+  return indexLoad;
+};
+const deleteFile = fileName => {
+  try {
+    const file = imageFile(fileName);
+    if (file.exists) {
+      file.delete();
+    }
+  } catch (error) {
+    Logger.warn('[AuthedImage] could not delete a cached image file', error);
+  }
+};
+export const readEntry = async cacheKey => {
+  const entries = await loadIndex();
+  const entry = entries.get(cacheKey);
+  if (!entry) {
+    return null;
+  }
+  const file = imageFile(entry.fileName);
+  // The cache folder is the OS's to reclaim under storage pressure, so an
+  // entry can outlive its file.
+  if (!file.exists) {
+    entries.delete(cacheKey);
+    await persistIndex(entries);
     return null;
   }
+  return {
+    fileUri: file.uri,
+    meta: toMeta(entry)
+  };
 };
 export const isFresh = (meta, ttlMs, now = Date.now()) => now - meta.fetchedAt < ttlMs;
-export const touchEntry = async (cacheKey, meta) => {
-  if (!cacheUsable()) {
+export const touchEntry = async cacheKey => {
+  const entries = await loadIndex();
+  const entry = entries.get(cacheKey);
+  if (!entry) {
     return;
   }
-  await Storage.setItem(`${META_PREFIX}${cacheKey}`, JSON.stringify({
-    ...meta,
-    lastAccessedAt: Date.now()
-  }));
-};
-const listMeta = async () => {
-  if (!cacheUsable()) {
-    return [];
-  }
-  const keys = await Storage.getAllKeys();
-  const metaKeys = keys.filter(key => key.startsWith(META_PREFIX));
-  if (metaKeys.length === 0) {
-    return [];
-  }
-  const values = await Storage.multiGet(metaKeys);
-  const out = [];
-  for (const key of metaKeys) {
-    const raw = values[key];
-    if (!raw) {
-      continue;
-    }
-    try {
-      out.push({
-        cacheKey: key.slice(META_PREFIX.length),
-        meta: JSON.parse(raw)
-      });
-    } catch {
-      // A meta entry we cannot parse is unusable; dropping it from the ledger
-      // lets the next eviction pass remove its orphaned data entry.
-    }
+  entry.lastAccessedAt = Date.now();
+  if (entry.lastAccessedAt - entry.persistedAccessAt >= TOUCH_PERSIST_MS) {
+    await persistIndex(entries);
   }
-  return out;
 };
-const evictIfNeeded = async () => {
-  const entries = await listMeta();
-  let total = entries.reduce((sum, entry) => sum + entry.meta.bytes, 0);
+const evictIfNeeded = entries => {
+  let total = 0;
+  for (const entry of entries.values()) {
+    total += entry.bytes;
+  }
   if (total <= byteCeiling) {
-    return;
+    return 0;
   }
-  const ordered = [...entries].sort((a, b) => a.meta.lastAccessedAt - b.meta.lastAccessedAt);
-  const doomed = [];
-  for (const entry of ordered) {
+  const ordered = [...entries].sort(([, a], [, b]) => a.lastAccessedAt - b.lastAccessedAt);
+  let evicted = 0;
+  for (const [cacheKey, entry] of ordered) {
     if (total <= byteCeiling) {
       break;
     }
-    doomed.push(`${DATA_PREFIX}${entry.cacheKey}`, `${META_PREFIX}${entry.cacheKey}`);
-    total -= entry.meta.bytes;
-  }
-  if (doomed.length > 0) {
-    await Storage.multiRemove(doomed);
-    Logger.info(`[AuthedImage] evicted ${doomed.length / 2} cached image(s) over the byte ceiling`);
+    entries.delete(cacheKey);
+    deleteFile(entry.fileName);
+    total -= entry.bytes;
+    evicted += 1;
   }
+  return evicted;
 };
 export const clearAuthedImageCache = async () => {
-  if (!cacheUsable()) {
-    return;
+  const entries = await loadIndex();
+  entries.clear();
+  const folder = new Directory(Paths.cache, FOLDER);
+  if (folder.exists) {
+    folder.delete();
   }
-  const keys = await Storage.getAllKeys();
-  const ours = keys.filter(key => key.startsWith(KEY_PREFIX));
-  if (ours.length > 0) {
-    await Storage.multiRemove(ours);
+  if (isStorageAvailable()) {
+    await Storage.removeItem(INDEX_KEY);
   }
 };
 export const authedImageCacheStats = async () => {
-  const entries = await listMeta();
+  const entries = await loadIndex();
+  let bytes = 0;
+  for (const entry of entries.values()) {
+    bytes += entry.bytes;
+  }
   return {
-    entries: entries.length,
-    bytes: entries.reduce((sum, entry) => sum + entry.meta.bytes, 0)
+    entries: entries.size,
+    bytes
   };
 };
 const responseHeader = (headers, name) => {
@@ -182,29 +253,48 @@ const fetchAndStore = async (cacheKey, options, signal) => {
     }
     throw new Error(`[@webority/mobile-ui] AuthedImage could not load "${options.uri}": the server ` + `answered ${status}. Check the URL and whether the request needs to be signed in ` + '(pass the signed-in client as `client`, or authenticated={false} for public media).');
   }
-  const buffer = response.data ?? new ArrayBuffer(0);
+  const bytes = new Uint8Array(response.data ?? new ArrayBuffer(0));
   const rawType = responseHeader(response.headers, 'content-type');
   const contentType = (rawType ? rawType.split(';')[0].trim() : '') || 'image/jpeg';
-  const dataUri = `data:${contentType};base64,${encodeBase64(buffer)}`;
+
+  // Loaded before the write, so the orphan sweep in loadIndex can never see
+  // this file before its entry exists.
+  const entries = await loadIndex();
   const now = Date.now();
-  // `bytes` measures the stored data URI, not the decoded image: the ceiling
-  // exists to bound what sits in storage, and base64 costs about a third more.
-  const meta = {
+  // A new name per fetch: native image caches key on the URI, so rewriting one
+  // path in place could keep showing the old picture after a refresh.
+  const fileName = `${cacheKey}-${now.toString(36)}`;
+  const file = imageFile(fileName);
+  try {
+    file.create({
+      intermediates: true,
+      overwrite: true
+    });
+    file.write(bytes);
+  } catch (error) {
+    throw new Error(`[@webority/mobile-ui] AuthedImage fetched "${options.uri}" but could not write it to ` + `the app's cache folder: ${error instanceof Error ? error.message : String(error)}. ` + 'The device may be out of storage.');
+  }
+  const entry = {
     fetchedAt: now,
-    bytes: dataUri.length,
+    bytes: bytes.byteLength,
     contentType,
-    lastAccessedAt: now
+    lastAccessedAt: now,
+    fileName,
+    persistedAccessAt: now
   };
-  if (cacheUsable()) {
-    await Storage.multiSet({
-      [`${DATA_PREFIX}${cacheKey}`]: dataUri,
-      [`${META_PREFIX}${cacheKey}`]: JSON.stringify(meta)
-    });
-    await evictIfNeeded();
+  const previous = entries.get(cacheKey);
+  entries.set(cacheKey, entry);
+  if (previous && previous.fileName !== fileName) {
+    deleteFile(previous.fileName);
+  }
+  const evicted = evictIfNeeded(entries);
+  await persistIndex(entries);
+  if (evicted > 0) {
+    Logger.info(`[AuthedImage] evicted ${evicted} cached image(s) over the byte ceiling`);
   }
   return {
-    dataUri,
-    meta
+    fileUri: file.uri,
+    meta: toMeta(entry)
   };
 };
 const inFlight = new Map();

package/lib/module/components/Carousel/Carousel.js

@@ -3,9 +3,8 @@
 /**
  * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
  *
- * Backed by a virtualized FlatList for memory efficiency. Pagination is driven
- * by `Animated.event` with `useNativeDriver` so the indicator tracks the scroll
- * gesture frame-perfectly without round-tripping to JS.
+ * Backed by a virtualized FlatList for memory efficiency. Dot and bar
+ * pagination track the scroll gesture through `Animated.event`.
  *
  * USAGE:
  *
@@ -173,6 +172,9 @@ const CarouselInner = /*#__PURE__*/forwardRef((props, ref) => {
   }, [startAutoPlay, clearAutoPlay]);
 
   // ─── Scroll handlers ───
+  // The dot and bar widths interpolate on the JS driver, so every scroll frame
+  // crosses to JS. Only those indicators need it; without them nothing listens.
+  const tracksScroll = showPagination && data.length > 1 && paginationStyle !== 'numbers';
   const onScroll = useMemo(() => Animated.event([{
     nativeEvent: {
       contentOffset: {
@@ -277,8 +279,8 @@ const CarouselInner = /*#__PURE__*/forwardRef((props, ref) => {
       snapToAlignment: "start",
       decelerationRate: "fast",
       showsHorizontalScrollIndicator: false,
-      onScroll: onScroll,
-      scrollEventThrottle: 16,
+      onScroll: tracksScroll ? onScroll : undefined,
+      scrollEventThrottle: tracksScroll ? 16 : undefined,
       onMomentumScrollEnd: onMomentumScrollEnd,
       onScrollBeginDrag: onScrollBeginDrag,
       onScrollEndDrag: onScrollEndDrag,

package/lib/module/components/FieldBase/useFloatingLabel.js

@@ -46,19 +46,30 @@ export const useFloatingLabel = ({
   style
 }) => {
   const theme = useTheme();
+  // Two values on one timeline. The label only moves by transform, so it runs
+  // on the native driver and the float never waits on the JS thread, which is
+  // busy exactly then with the keyboard opening. The outlined notch animates a
+  // width, which only the JS driver can, so it has its own value.
   const anim = useRef(createAnimatedValue(floated ? 1 : 0)).current;
+  const notchAnim = useRef(createAnimatedValue(floated ? 1 : 0)).current;
+  const notched = variant === 'outlined';
   // The label's unscaled layout inside the wrapper; sizes the notch.
   const [layout, setLayout] = useState(null);
   useEffect(() => {
-    const a = Animated.timing(anim, {
-      toValue: floated ? 1 : 0,
+    const to = floated ? 1 : 0;
+    const timing = (value, useNativeDriver) => Animated.timing(value, {
+      toValue: to,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
+      useNativeDriver
     });
+    if (!notched) {
+      notchAnim.setValue(to);
+    }
+    const a = notched ? Animated.parallel([timing(anim, true), timing(notchAnim, false)]) : timing(anim, true);
     a.start();
     return () => a.stop();
-  }, [floated, anim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  }, [floated, notched, anim, notchAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
   return useMemo(() => {
     if (!enabled || !label) {
       return {
@@ -114,9 +125,9 @@ export const useFloatingLabel = ({
     // opening with the float animation.
     const floatedWidth = layout ? layout.width * FLOATED_LABEL_SCALE : 0;
     const originShift = !layout ? 0 : textAlign === 'right' ? layout.width - floatedWidth : textAlign === 'center' ? (layout.width - floatedWidth) / 2 : 0;
-    const topNotch = variant === 'outlined' && layout ? {
+    const topNotch = notched && layout ? {
       left: layout.x + floatShift + originShift - NOTCH_GAP,
-      width: anim.interpolate({
+      width: notchAnim.interpolate({
         inputRange: [0, 1],
         outputRange: [0, floatedWidth + NOTCH_GAP * 2]
       })
@@ -155,7 +166,7 @@ export const useFloatingLabel = ({
       node,
       topNotch
     };
-  }, [enabled, label, required, variant, sizeTokens, leadingOffset, trailingOffset, textAlign, paddingLeft, lineHeight, restNudge, floatTrim, color, style, anim, layout, theme]);
+  }, [enabled, label, required, notched, sizeTokens, leadingOffset, trailingOffset, textAlign, paddingLeft, lineHeight, restNudge, floatTrim, color, style, anim, notchAnim, layout, theme]);
 };
 const styles = StyleSheet.create({
   label: {

package/lib/module/components/OptionSheet/OptionSheet.js

@@ -270,19 +270,35 @@ export const OptionSheet = props => {
   // Rows are not measured until rendered, so a jump far past the rendered
   // window cannot land in one go: scroll near it by the average row height,
   // then retry once the window has caught up.
+  const jumpRetryRef = useRef(null);
+  const cancelJumpRetry = useCallback(() => {
+    if (jumpRetryRef.current !== null) {
+      clearTimeout(jumpRetryRef.current);
+      jumpRetryRef.current = null;
+    }
+  }, []);
   const handleScrollToIndexFailed = useCallback(info => {
     listRef.current?.scrollToOffset({
       offset: info.averageItemLength * info.index,
       animated: false
     });
-    setTimeout(() => {
+    cancelJumpRetry();
+    jumpRetryRef.current = setTimeout(() => {
+      jumpRetryRef.current = null;
       listRef.current?.scrollToIndex({
         index: info.index,
         animated: true,
         viewPosition: 0
       });
     }, 50);
-  }, []);
+  }, [cancelJumpRetry]);
+  // A retry pending when the sheet closes or unmounts would scroll a list that is gone.
+  useEffect(() => {
+    if (!rendered) {
+      cancelJumpRetry();
+    }
+    return cancelJumpRetry;
+  }, [rendered, cancelJumpRetry]);
   const renderRow = ({
     item: row
   }) => {

package/lib/module/form/equal.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const isPlainObject = value => {
+  if (value === null || typeof value !== 'object') {
+    return false;
+  }
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+
+/**
+ * Whether two form value trees hold the same data. The form engine copies only
+ * the branch a write touches, so most subtrees are compared by identity and the
+ * walk stops early; serialising both trees cost a full pass on every keystroke.
+ * A key holding `undefined` counts as absent, the way the serialised comparison
+ * treated it, and dates compare by instant.
+ */
+export const valuesEqual = (a, b) => {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i += 1) {
+      if (!valuesEqual(a[i], b[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (!isPlainObject(a) || !isPlainObject(b)) {
+    return false;
+  }
+  const keysA = Object.keys(a).filter(key => a[key] !== undefined);
+  const keysB = Object.keys(b).filter(key => b[key] !== undefined);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!valuesEqual(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+};
+//# sourceMappingURL=equal.js.map

package/lib/module/form/useForm.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { valuesEqual } from "./equal.js";
 import { getPath, setPath } from "./path.js";
 // Loosely typed (Values -> any) so the generic schema from any useForm<Values>
 // instance flows in without variance friction; callers re-apply Values at use.
@@ -51,7 +52,21 @@ export function useForm(config) {
   const fieldOrder = useRef([]);
   const focusedFieldRef = useRef(null);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `JSON.stringify(config.initialValues)` is the dependency by design so reinitialize compares by value, not by object identity
+  // Reinitialize compares initial values by value, not identity, so a caller
+  // passing an inline object literal does not reset the form on every render.
+  const initialVersionRef = useRef({
+    values: config.initialValues,
+    version: 0
+  });
+  if (!valuesEqual(config.initialValues, initialVersionRef.current.values)) {
+    initialVersionRef.current = {
+      values: config.initialValues,
+      version: initialVersionRef.current.version + 1
+    };
+  }
+  const initialVersion = initialVersionRef.current.version;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `initialVersion` stands for `config.initialValues` compared by value
   useEffect(() => {
     if (!configRef.current.enableReinitialize) {
       return;
@@ -64,7 +79,7 @@ export function useForm(config) {
     setValuesState(next);
     setErrorsState({});
     setTouchedState({});
-  }, [JSON.stringify(config.initialValues)]);
+  }, [initialVersion]);
   const validateField = useCallback(async name => {
     const validate = configRef.current.validate;
     const allValues = ref.current.values;
@@ -308,7 +323,7 @@ export function useForm(config) {
     }
     return true;
   }, [values, errors]);
-  const dirty = useMemo(() => JSON.stringify(values) !== JSON.stringify(initialRef.current), [values]);
+  const dirty = useMemo(() => !valuesEqual(values, initialRef.current), [values]);
   return {
     values,
     errors: uiErrors,
@@ -341,7 +356,7 @@ export function useForm(config) {
         error: isTouched || submitCount > 0 ? rawError : undefined,
         rawError,
         touched: isTouched,
-        dirty: JSON.stringify(value) !== JSON.stringify(getPath(initialRef.current, name))
+        dirty: !valuesEqual(value, getPath(initialRef.current, name))
       };
     },
     getFieldProps: name => ({

package/lib/typescript/commonjs/components/AuthedImage/authedImageCache.d.ts

@@ -7,7 +7,7 @@ export interface AuthedImageCacheMeta {
     lastAccessedAt: number;
 }
 export interface CachedImage {
-    dataUri: string;
+    fileUri: string;
     meta: AuthedImageCacheMeta;
 }
 /**
@@ -18,12 +18,12 @@ export interface CachedImage {
 export declare const setAuthedImageCacheLimit: (bytes: number) => void;
 export declare const getAuthedImageCacheLimit: () => number;
 /**
- * Hex only by construction, so it is always a safe storage key segment.
+ * Hex only by construction, so it is always a safe file name segment.
  */
 export declare const deriveCacheKey: (uri: string, override?: string) => string;
 export declare const readEntry: (cacheKey: string) => Promise<CachedImage | null>;
 export declare const isFresh: (meta: AuthedImageCacheMeta, ttlMs: number, now?: number) => boolean;
-export declare const touchEntry: (cacheKey: string, meta: AuthedImageCacheMeta) => Promise<void>;
+export declare const touchEntry: (cacheKey: string) => Promise<void>;
 export declare const clearAuthedImageCache: () => Promise<void>;
 export declare const authedImageCacheStats: () => Promise<{
     entries: number;