@oxyhq/bloom 0.32.1 → 0.33.0

package/lib/typescript/module/zoomable-image-gallery/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;AAE3E,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,IAAI,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5E;AAED,MAAM,WAAW,yBAAyB;IACxC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -39,6 +39,17 @@
         "default": "./lib/commonjs/image-resolver/index.js"
       }
     },
+    "./image-aspect-ratio-cache": {
+      "react-native": "./src/image-aspect-ratio-cache/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts",
+        "default": "./lib/module/image-aspect-ratio-cache/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/image-aspect-ratio-cache/index.d.ts",
+        "default": "./lib/commonjs/image-aspect-ratio-cache/index.js"
+      }
+    },
     "./theme": {
       "react-native": "./src/theme/index.ts",
       "import": {
@@ -382,6 +393,17 @@
         "default": "./lib/commonjs/media-inset-border/index.js"
       }
     },
+    "./zoomable-image-gallery": {
+      "react-native": "./src/zoomable-image-gallery/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/zoomable-image-gallery/index.d.ts",
+        "default": "./lib/module/zoomable-image-gallery/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/zoomable-image-gallery/index.d.ts",
+        "default": "./lib/commonjs/zoomable-image-gallery/index.js"
+      }
+    },
     "./pressable-scale": {
       "react-native": "./src/pressable-scale/index.ts",
       "import": {
@@ -1054,8 +1076,10 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "*",
     "@vitejs/plugin-react": "^6.0.2",
+    "expo-blur": "~56.0.3",
     "expo-font": "^56.0.5",
     "expo-haptics": "~56.0.3",
+    "expo-image": "~56.0.11",
     "expo-router": "^56.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
@@ -1079,8 +1103,10 @@
   },
   "peerDependencies": {
     "expo": "*",
+    "expo-blur": "*",
     "expo-font": "*",
     "expo-haptics": "*",
+    "expo-image": "*",
     "expo-router": ">=3.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",

package/src/hooks/index.ts

@@ -7,3 +7,4 @@ export { useHaptics, BloomHapticsProvider } from './useHaptics';
 export type { HapticStrength, BloomHapticsProviderProps } from './useHaptics';
 export { useGutters } from './useGutters';
 export type { Gutter, Gutters } from './useGutters';
+export { useImagePreload, preloadImage } from './useImagePreload';

package/src/hooks/useImagePreload.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useMemo } from 'react';
+import { Image } from 'react-native';
+
+/**
+ * Hook to preload images for better perceived performance
+ * Preloads images when they're likely to be viewed soon
+ */
+export function useImagePreload(urls: (string | undefined)[], enabled: boolean = true) {
+  const preloadedRef = useRef<Set<string>>(new Set());
+
+  // Memoize valid URLs to avoid unnecessary re-runs
+  const validUrls = useMemo(() => {
+    return urls.filter((url): url is string =>
+      Boolean(url && (url.startsWith('http://') || url.startsWith('https://')))
+    );
+  }, [urls]);
+
+  useEffect(() => {
+    if (!enabled || !validUrls.length) return;
+
+    validUrls.forEach((url) => {
+      if (preloadedRef.current.has(url)) return;
+
+      preloadedRef.current.add(url);
+      Image.prefetch(url).catch(() => {
+        // Silently handle prefetch errors - remove from set on error to allow retry
+        preloadedRef.current.delete(url);
+      });
+    });
+  }, [validUrls, enabled]);
+
+  // Limit cache size to prevent memory issues (keep last 1000)
+  useEffect(() => {
+    if (preloadedRef.current.size > 1000) {
+      const entries = Array.from(preloadedRef.current);
+      const toRemove = entries.slice(0, entries.length - 1000);
+      toRemove.forEach(url => preloadedRef.current.delete(url));
+    }
+  }, [validUrls]);
+}
+
+/**
+ * Preload a single image
+ */
+export function preloadImage(url: string | undefined): void {
+  if (!url || !url.startsWith('http')) return;
+
+  Image.prefetch(url).catch(() => {
+    // Silently handle prefetch errors
+  });
+}

package/src/image-aspect-ratio-cache/imageAspectRatioCache.ts

@@ -0,0 +1,62 @@
+/**
+ * Shared module-scoped cache of image aspect ratios (width / height), keyed by
+ * the image source URI.
+ *
+ * Intended for a thumbnail renderer and a fullscreen viewer (e.g.
+ * `@oxyhq/bloom/zoomable-image-gallery`) sharing the SAME image URI to read
+ * from and write to this one map, so an image already resolved as a thumbnail
+ * has its ratio on hand when it opens "big" — no second cache, no duplicate
+ * `Image.getSize` round-trip on the hot path. If the two surfaces render
+ * different URI variants of the same image (e.g. a smaller thumbnail variant
+ * vs. a larger lightbox variant), pass the known ratio through explicitly
+ * (`GalleryImage.aspectRatio`) instead of relying on cache-key reuse.
+ */
+import { Image } from 'react-native';
+
+/** Fallback ratio used when a remote image's intrinsic size cannot be read. */
+export const DEFAULT_ASPECT_RATIO = 4 / 3;
+
+const aspectRatioCache = new Map<string, number>();
+
+export const getAspectRatio = (uri: string): number | undefined => aspectRatioCache.get(uri);
+
+export const hasAspectRatio = (uri: string): boolean => aspectRatioCache.has(uri);
+
+export const setAspectRatio = (uri: string, ratio: number): void => {
+  if (uri && ratio > 0 && Number.isFinite(ratio)) {
+    aspectRatioCache.set(uri, ratio);
+  }
+};
+
+/**
+ * Resolve the aspect ratio for `uri`, returning the cached value immediately on
+ * a hit and otherwise fetching the intrinsic size via `Image.getSize`, writing
+ * the result back into the shared cache. On failure the shared
+ * `DEFAULT_ASPECT_RATIO` is cached and returned so callers never deadlock on a
+ * broken image.
+ */
+export const fetchAspectRatio = (uri: string): Promise<number> => {
+  const cached = aspectRatioCache.get(uri);
+  if (cached !== undefined) {
+    return Promise.resolve(cached);
+  }
+  return new Promise<number>((resolve) => {
+    Image.getSize(
+      uri,
+      (width, height) => {
+        if (width > 0 && height > 0) {
+          const ratio = width / height;
+          aspectRatioCache.set(uri, ratio);
+          resolve(ratio);
+          return;
+        }
+        aspectRatioCache.set(uri, DEFAULT_ASPECT_RATIO);
+        resolve(DEFAULT_ASPECT_RATIO);
+      },
+      () => {
+        aspectRatioCache.set(uri, DEFAULT_ASPECT_RATIO);
+        resolve(DEFAULT_ASPECT_RATIO);
+      }
+    );
+  });
+};

package/src/image-aspect-ratio-cache/index.ts

@@ -0,0 +1,7 @@
+export {
+  getAspectRatio,
+  hasAspectRatio,
+  setAspectRatio,
+  fetchAspectRatio,
+  DEFAULT_ASPECT_RATIO,
+} from './imageAspectRatioCache';

package/src/index.ts

@@ -44,6 +44,7 @@ export { useHaptics, BloomHapticsProvider } from './hooks/useHaptics';
 export type { HapticStrength, BloomHapticsProviderProps } from './hooks/useHaptics';
 export { useGutters } from './hooks/useGutters';
 export type { Gutter, Gutters } from './hooks/useGutters';
+export { useImagePreload, preloadImage } from './hooks/useImagePreload';
 
 // Icons
 export * as Icons from './icons';

package/src/index.web.ts

@@ -49,6 +49,7 @@ export { useHaptics, BloomHapticsProvider } from './hooks/useHaptics';
 export type { HapticStrength, BloomHapticsProviderProps } from './hooks/useHaptics';
 export { useGutters } from './hooks/useGutters';
 export type { Gutter, Gutters } from './hooks/useGutters';
+export { useImagePreload, preloadImage } from './hooks/useImagePreload';
 
 // Icons
 export * as Icons from './icons';