@webority/mobile-ui 0.0.36 → 0.0.38

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

@@ -32,22 +32,6 @@ const getAuthedImageCacheLimit = () => byteCeiling;
  */
 exports.getAuthedImageCacheLimit = getAuthedImageCacheLimit;
 const deriveCacheKey = (uri, override) => (0, _hashString.hashString)(override ?? uri);
-exports.deriveCacheKey = deriveCacheKey;
-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;
-};
 
 /**
  * The cache is an OPTIMISATION, so a failing store must never stop an image
@@ -60,6 +44,7 @@ const encodeBase64 = buffer => {
  * handling below already covers: each read returns null and each write returns
  * false, the image still fetches, and nothing is logged per image.
  */
+exports.deriveCacheKey = deriveCacheKey;
 const cacheUsable = () => (0, _mobileCore.isStorageAvailable)();
 const readEntry = async cacheKey => {
   if (!cacheUsable()) {
@@ -197,7 +182,7 @@ const fetchAndStore = async (cacheKey, options, signal) => {
   const buffer = 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)}`;
+  const dataUri = `data:${contentType};base64,${(0, _mobileCore.encodeBase64)(buffer)}`;
   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.

package/lib/commonjs/components/Carousel/Carousel.js

@@ -15,9 +15,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * 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:
  *
@@ -178,6 +177,9 @@ const CarouselInner = /*#__PURE__*/(0, _react.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 = (0, _react.useMemo)(() => _reactNative.Animated.event([{
     nativeEvent: {
       contentOffset: {
@@ -282,8 +284,8 @@ const CarouselInner = /*#__PURE__*/(0, _react.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/commonjs/components/FieldBase/useFloatingLabel.js

@@ -49,19 +49,30 @@ const useFloatingLabel = ({
   style
 }) => {
   const theme = (0, _index.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 = (0, _react.useRef)((0, _index.createAnimatedValue)(floated ? 1 : 0)).current;
+  const notchAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(floated ? 1 : 0)).current;
+  const notched = variant === 'outlined';
   // The label's unscaled layout inside the wrapper; sizes the notch.
   const [layout, setLayout] = (0, _react.useState)(null);
   (0, _react.useEffect)(() => {
-    const a = _reactNative.Animated.timing(anim, {
-      toValue: floated ? 1 : 0,
+    const to = floated ? 1 : 0;
+    const timing = (value, useNativeDriver) => _reactNative.Animated.timing(value, {
+      toValue: to,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
+      useNativeDriver
     });
+    if (!notched) {
+      notchAnim.setValue(to);
+    }
+    const a = notched ? _reactNative.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 (0, _react.useMemo)(() => {
     if (!enabled || !label) {
       return {
@@ -117,9 +128,9 @@ 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]
       })
@@ -158,7 +169,7 @@ 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]);
 };
 exports.useFloatingLabel = useFloatingLabel;
 const styles = _reactNative.StyleSheet.create({

package/lib/commonjs/components/Modal/Modal.js

@@ -305,7 +305,7 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
         }
       },
       style: styles.root,
-      accessible: true,
+      accessible: false,
       accessibilityViewIsModal: true,
       accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel,

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -273,19 +273,35 @@ 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 = (0, _react.useRef)(null);
+  const cancelJumpRetry = (0, _react.useCallback)(() => {
+    if (jumpRetryRef.current !== null) {
+      clearTimeout(jumpRetryRef.current);
+      jumpRetryRef.current = null;
+    }
+  }, []);
   const handleScrollToIndexFailed = (0, _react.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.
+  (0, _react.useEffect)(() => {
+    if (!rendered) {
+      cancelJumpRetry();
+    }
+    return cancelJumpRetry;
+  }, [rendered, cancelJumpRetry]);
   const renderRow = ({
     item: row
   }) => {

package/lib/commonjs/form/equal.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.valuesEqual = void 0;
+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.
+ */
+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;
+};
+exports.valuesEqual = valuesEqual;
+//# sourceMappingURL=equal.js.map

package/lib/commonjs/form/useForm.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useForm = useForm;
 var _react = require("react");
+var _equal = require("./equal.js");
 var _path = require("./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.
@@ -55,7 +56,21 @@ function useForm(config) {
   const fieldOrder = (0, _react.useRef)([]);
   const focusedFieldRef = (0, _react.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 = (0, _react.useRef)({
+    values: config.initialValues,
+    version: 0
+  });
+  if (!(0, _equal.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
   (0, _react.useEffect)(() => {
     if (!configRef.current.enableReinitialize) {
       return;
@@ -68,7 +83,7 @@ function useForm(config) {
     setValuesState(next);
     setErrorsState({});
     setTouchedState({});
-  }, [JSON.stringify(config.initialValues)]);
+  }, [initialVersion]);
   const validateField = (0, _react.useCallback)(async name => {
     const validate = configRef.current.validate;
     const allValues = ref.current.values;
@@ -312,7 +327,7 @@ function useForm(config) {
     }
     return true;
   }, [values, errors]);
-  const dirty = (0, _react.useMemo)(() => JSON.stringify(values) !== JSON.stringify(initialRef.current), [values]);
+  const dirty = (0, _react.useMemo)(() => !(0, _equal.valuesEqual)(values, initialRef.current), [values]);
   return {
     values,
     errors: uiErrors,
@@ -345,7 +360,7 @@ function useForm(config) {
         error: isTouched || submitCount > 0 ? rawError : undefined,
         rawError,
         touched: isTouched,
-        dirty: JSON.stringify(value) !== JSON.stringify((0, _path.getPath)(initialRef.current, name))
+        dirty: !(0, _equal.valuesEqual)(value, (0, _path.getPath)(initialRef.current, name))
       };
     },
     getFieldProps: name => ({

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { ACCESS_TOKEN_KEY, getToken, isStorageAvailable, Logger, publicClient, Storage } from '@webority/mobile-core';
+import { ACCESS_TOKEN_KEY, encodeBase64, getToken, isStorageAvailable, Logger, publicClient, Storage } from '@webority/mobile-core';
 import { hashString } from "../../utils/hashString.js";
 const KEY_PREFIX = '@webority/authed-image/v1/';
 const DATA_PREFIX = `${KEY_PREFIX}d/`;
@@ -26,21 +26,6 @@ export const getAuthedImageCacheLimit = () => byteCeiling;
  * Hex only by construction, so it is always a safe storage key 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;
-};
 
 /**
  * The cache is an OPTIMISATION, so a failing store must never stop an image

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/Modal/Modal.js

@@ -300,7 +300,7 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
         }
       },
       style: styles.root,
-      accessible: true,
+      accessible: false,
       accessibilityViewIsModal: true,
       accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel,

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/Carousel/Carousel.d.ts

@@ -1,9 +1,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:
  *

package/lib/typescript/commonjs/form/equal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare const valuesEqual: (a: unknown, b: unknown) => boolean;
+//# sourceMappingURL=equal.d.ts.map

package/lib/typescript/module/components/Carousel/Carousel.d.ts

@@ -1,9 +1,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:
  *

package/lib/typescript/module/form/equal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 declare const valuesEqual: (a: unknown, b: unknown) => boolean;
+//# sourceMappingURL=equal.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -64,7 +64,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@webority/mobile-core": ">=0.0.26 <0.1.0",
+    "@webority/mobile-core": ">=0.0.27 <0.1.0",
     "expo": ">=57.0.0",
     "expo-haptics": ">=57.0.0",
     "react": "^19.1.0",