@oxyhq/bloom 0.32.0 → 0.33.0

package/src/zoomable-image-gallery/constants.ts

@@ -0,0 +1,25 @@
+import { RADIUS } from '../design-tokens';
+
+/** Fraction of the screen the fitted "big" image is allowed to occupy. */
+export const FIT_FRACTION = 0.9;
+/** Drag distance (as a fraction of screen height) that fully fades the backdrop. */
+export const MAX_DRAG_FRACTION = 0.3;
+/** Drag distance (as a fraction of screen height) over which scale floors out. */
+export const SCALE_DRAG_FRACTION = 0.5;
+/** Minimum scale reached while dragging to dismiss. */
+export const MIN_DRAG_SCALE = 0.5;
+/** Drag distance (as a fraction of screen height) past which a drag dismisses. */
+export const DISMISS_FRACTION = 0.15;
+/** Axis-decision threshold (px): the vertical dismiss pan only claims drags past this. */
+export const AXIS_DECISION_OFFSET = 12;
+
+export const OPEN_DURATION_WEB = 300;
+export const CLOSE_DURATION_WEB = 280;
+export const OPACITY_DURATION = 200;
+
+export const OPEN_SPRING = { damping: 18, stiffness: 400, mass: 0.4 } as const;
+export const CLOSE_SPRING = { damping: 22, stiffness: 450, mass: 0.35 } as const;
+export const SNAP_BACK_SPRING = { damping: 20, stiffness: 400, mass: 0.4 } as const;
+
+/** Default corner radius for the zoomed images — Bloom's `radius-12` token. */
+export const DEFAULT_CORNER_RADIUS = RADIUS['radius-12'];

package/src/zoomable-image-gallery/index.ts

@@ -0,0 +1,8 @@
+export { ZoomableImageGallery, ZoomableImageGallery as default } from './ZoomableImageGallery';
+export type {
+  ZoomableImageGalleryHandle,
+  ZoomableImageGalleryProps,
+  GalleryImage,
+  MeasureThumb,
+  MeasuredRect,
+} from './types';

package/src/zoomable-image-gallery/types.ts

@@ -0,0 +1,49 @@
+export interface GalleryImage {
+  /** Source URI rendered both as the thumbnail and the zoomed image. */
+  uri: string;
+  /**
+   * Author-authored accessibility description (Bluesky-style "ALT"). When present,
+   * shown as a caption at the bottom of the fullscreen viewer for the active image.
+   */
+  alt?: string;
+  /**
+   * Optional intrinsic aspect ratio (width / height) supplied by the consumer.
+   * When known ahead of time it avoids a first-frame `Image.getSize` round-trip.
+   */
+  aspectRatio?: number;
+}
+
+/**
+ * On-screen rectangle of a thumbnail, used to fly the zoom transition to/from
+ * the tapped image. Bloom-owned so consumers don't depend on an app-local shape.
+ */
+export interface MeasuredRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Resolve the on-screen rect of the thumbnail at `index` within the SAME
+ * images-only subset the gallery opens/pages in, so the close animation can fly
+ * back to the image currently being viewed. Resolves `null` when the thumbnail
+ * ref is missing (unmounted/virtualized), in which case the gallery falls back
+ * to a plain center fade-out.
+ */
+export type MeasureThumb = (index: number) => Promise<MeasuredRect | null>;
+
+export interface ZoomableImageGalleryHandle {
+  /**
+   * Open the gallery at `index` within `images`, animating the zoom from the
+   * tapped thumbnail's measured screen rect (when provided).
+   */
+  open: (images: GalleryImage[], index: number, rect?: MeasuredRect) => void;
+}
+
+export interface ZoomableImageGalleryProps {
+  /** Measures any thumbnail by its images-only subset index, used on dismiss. */
+  measureThumb?: MeasureThumb;
+  /** Corner radius applied to the zoomed images. Defaults to `DEFAULT_CORNER_RADIUS`. */
+  cornerRadius?: number;
+}