@oxyhq/services 22.10.0 → 22.11.0

package/src/ui/components/ProfileButton.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
     View,
     Pressable,
@@ -17,6 +17,7 @@ import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useAuth } from '../hooks/useAuth';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogManager';
 
 const isWeb = Platform.OS === 'web';
 
@@ -102,6 +103,9 @@ export interface ProfileButtonProps {
 const ProfileButton: React.FC<ProfileButtonProps> = ({
     expanded = true,
     avatarSize,
+    onNavigateManage,
+    onAddAccount,
+    onNavigateProfile,
     className,
     style,
 }) => {
@@ -127,6 +131,17 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         openAccountDialog('accounts');
     }, [openAccountDialog]);
 
+    useEffect(() => {
+        if (!onNavigateManage && !onAddAccount && !onNavigateProfile) {
+            return undefined;
+        }
+        return registerAccountDialogConsumerHooks({
+            onNavigateManage,
+            onAddAccount,
+            onNavigateProfile,
+        });
+    }, [onNavigateManage, onAddAccount, onNavigateProfile]);
+
     const avatarUrl = useMemo(
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
         [user?.avatar, oxyServices],

package/src/ui/components/ProfileSummaryCard.tsx

@@ -1,11 +1,10 @@
 import type React from 'react';
 import { View, type ViewStyle } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { useTheme } from '@oxyhq/bloom/theme';
 import { H4, Text } from '@oxyhq/bloom/typography';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Card } from '@oxyhq/bloom/card';
 import { PressableScale } from '@oxyhq/bloom/pressable-scale';
+import AvatarCameraBadge from './AvatarCameraBadge';
 
 /**
  * ProfileSummaryCard — the shared "who am I" summary block rendered at the top
@@ -37,18 +36,6 @@ export interface ProfileSummaryCardProps {
     avatarAccessibilityLabel?: string;
 }
 
-const badgeStyle: ViewStyle = {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 2,
-};
-
 const cardStyle: ViewStyle = {
     borderRadius: 20,
     marginBottom: 16,
@@ -67,8 +54,6 @@ const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
     showCameraBadge = false,
     avatarAccessibilityLabel,
 }) => {
-    const bloomTheme = useTheme();
-
     const avatar = <Avatar source={avatarUri} name={displayName} size={avatarSize} />;
 
     const avatarNode = onAvatarPress ? (
@@ -80,15 +65,7 @@ const ProfileSummaryCard: React.FC<ProfileSummaryCardProps> = ({
             className="mb-space-12"
         >
             {avatar}
-            {showCameraBadge ? (
-                <View style={badgeStyle} className="bg-fill-brand border-border-image">
-                    <Ionicons
-                        name="camera"
-                        size={14}
-                        color={bloomTheme.colors.primaryForeground}
-                    />
-                </View>
-            ) : null}
+            {showCameraBadge ? <AvatarCameraBadge /> : null}
         </PressableScale>
     ) : (
         <View className="mb-space-12">{avatar}</View>

package/src/ui/components/SurfaceScreen.tsx

@@ -1,14 +1,18 @@
 import React, { useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from 'zustand';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { useDialogHeader, type DialogHeaderConfig } from '@oxyhq/bloom/dialog';
+import {
+  useDialogFrame,
+  useDialogHeader,
+  type DialogHeaderConfig,
+} from '@oxyhq/bloom/dialog';
 import type { SurfaceControls } from '@oxyhq/bloom/surfaces';
 import type { RouteName } from '../navigation/routes';
 import { getScreenComponent } from '../navigation/routes';
 import { pushSurfaceBackHandler } from '../navigation/surfaceBackBridge';
 import type { SurfaceNavStack } from '../navigation/surfaceNavStack';
-import { getSurfaceConfig, type SurfacePresentation } from '../navigation/surfaceRegistry';
+import { getSurfaceConfig } from '../navigation/surfaceRegistry';
 import {
   closeAllRouteSurfaces,
   navigateWithinOrPresent,
@@ -76,8 +80,6 @@ export interface SurfaceScreenProps {
   navStack: SurfaceNavStack;
   /** Bloom's per-surface controls (dismiss / present a child) — the DEPTH axis. */
   surface: SurfaceControls;
-  /** This surface's presentation, so `navigate` knows when to drill in vs. stack. */
-  presentation: SurfacePresentation;
   /** Whether backdrop / Escape / back may dismiss at the root frame. Defaults to true. */
   dismissOnBackdrop?: boolean;
 }
@@ -94,7 +96,6 @@ export interface SurfaceScreenProps {
 function SurfaceScreen({
   navStack,
   surface,
-  presentation,
   dismissOnBackdrop = true,
 }: SurfaceScreenProps) {
   const theme = useTheme();
@@ -109,17 +110,24 @@ function SurfaceScreen({
 
   const navigate = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
-      navigateWithinOrPresent(presentation, navStack, route, props),
-    [navStack, presentation],
+      navigateWithinOrPresent(navStack, route, props),
+    [navStack],
   );
 
   const replace = useCallback(
     (route: RouteName, props?: Record<string, unknown>) =>
-      replaceWithinOrPresent(presentation, navStack, route, props),
-    [navStack, presentation],
+      replaceWithinOrPresent(navStack, route, props),
+    [navStack],
   );
 
-  const dismiss = useCallback((result?: unknown) => navStack.requestDismiss(result), [navStack]);
+  // Screens' `dismiss(result)` resolves an active sub-flow (morphed-in avatar
+  // picker) back to its caller and pops to its entry frame; with no flow it
+  // dismisses the whole surface (a screen presented as its own surface) — the
+  // historical behaviour. `navStack.resolveFlowOrDismiss` owns that fork.
+  const dismiss = useCallback(
+    (result?: unknown) => navStack.resolveFlowOrDismiss(result),
+    [navStack],
+  );
 
   const canGoBack = useCallback(() => navStack.canGoBack(), [navStack]);
 
@@ -165,9 +173,35 @@ function SurfaceScreen({
   const [headerContent, setHeaderContent] = useState<SurfaceHeaderContent | null>(null);
   const headerContext = useMemo(() => ({ setContent: setHeaderContent }), []);
 
-  const headerMode = useMemo(
-    () => getSurfaceConfig(top.route, top.props).header,
-    [top.route, top.props],
+  const config = useMemo(() => getSurfaceConfig(top.route, top.props), [top.route, top.props]);
+  const headerMode = config.header;
+
+  // --- Size morphing on nav-within ---------------------------------------
+  // The Dialog cannot see a drill-in from its own props (only this host
+  // re-renders when the nav stack moves), so it is told which frame is on
+  // screen. When that identity changes the surface MORPHS — the panel animates
+  // between the two frames' sizes instead of hard-cutting. A wizard step counts
+  // as a frame: it swaps the visible content inside one screen the same way.
+  // A `stacks` route opens its OWN surface (never a frame here); everything else
+  // morphs.
+  //
+  // A route may declare an EXPLICIT large morph target (`frameSize`) — the media
+  // selector's own-scroller grid, which the panel can't measure, grows the
+  // container to a near-full-height, wider card and shrinks back on exit. Resolve
+  // its viewport-relative height to px here (the Dialog clamps to the viewport).
+  const { height: viewportHeight } = useWindowDimensions();
+  const frameSize = useMemo(() => {
+    const spec = config.frameSize;
+    if (!spec) return undefined;
+    const height =
+      spec.heightRatio !== undefined ? Math.round(viewportHeight * spec.heightRatio) : undefined;
+    return { height, maxWidth: spec.maxWidth };
+  }, [config.frameSize, viewportHeight]);
+  useDialogFrame(
+    useMemo(
+      () => ({ key: `${top.route}#${top.step}`, morph: config.morph, size: frameSize }),
+      [top.route, top.step, config.morph, frameSize],
+    ),
   );
   // Show a back affordance whenever the surface can navigate back — either an
   // earlier frame in this surface's stack, or an earlier wizard step.

package/src/ui/components/oxyAuthChooserStyles.ts

@@ -42,36 +42,88 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 12.5,
     marginTop: 1,
   },
-  /** Prominent current-account header (Google-style collapsed row). */
-  currentAccountRow: {
-    flexDirection: 'row',
+  /**
+   * Animated-collapse container for the account switch list — the outer clip and
+   * the inner measuring wrapper. Style-based (NOT NativeWind): the container
+   * carries the animated `height`/`opacity` off a reanimated style, and the
+   * measuring wrapper must stay className-free so its `onLayout` fires on RN-Web.
+   */
+  collapse: {
+    overflow: 'hidden',
+  },
+  collapseMeasure: {
+    width: '100%',
+  },
+  /**
+   * The HERO block that opens the account menu: the current account's large
+   * avatar, a greeting, and the "Manage your Oxy account" pill — centred and
+   * deliberately chrome-free (no card, no grouped-section surface) so the
+   * grouped cards below read as the menu proper. The account's email sits above
+   * it in the Dialog's own nav bar, not here.
+   */
+  hero: {
     alignItems: 'center',
+    paddingTop: 4,
+    paddingBottom: 20,
     gap: 12,
-    paddingVertical: 8,
-    paddingHorizontal: 4,
   },
-  currentAccountMeta: {
-    flex: 1,
-    minWidth: 0,
+  /**
+   * The current account's accent ring in the switch list, drawn OUTSIDE its
+   * avatar as an overlay so it adds no width to the row — every avatar in the
+   * list keeps the same footprint and the same content line. The 3px offset is
+   * the ring's 2px stroke plus a 1px gap.
+   */
+  currentAvatarRing: {
+    position: 'absolute',
+    top: -3,
+    left: -3,
+    right: -3,
+    bottom: -3,
+    borderWidth: 2,
+    borderRadius: 9999,
   },
-  currentAccountName: {
-    fontSize: 16,
-    fontWeight: '700',
+  /**
+   * The hero avatar's pressable wrapper — the "change your photo" entry point.
+   * `relative` so the accent ring + camera badge (both absolutely positioned)
+   * anchor to the avatar box.
+   */
+  heroAvatarPressable: {
+    position: 'relative',
+  },
+  /** The hero avatar's accent ring — an overlay, like the row-level one. */
+  heroAvatarRing: {
+    position: 'absolute',
+    top: -4,
+    left: -4,
+    right: -4,
+    bottom: -4,
+    borderWidth: 3,
+    borderRadius: 9999,
   },
-  currentAccountEmail: {
-    fontSize: 13,
-    marginTop: 2,
+  /** Greeting + address stacked tight, centred (the hero's own 12px gap sits
+   *  between this block and the avatar / manage pill, not between these lines). */
+  heroNameBlock: {
+    alignItems: 'center',
+    gap: 2,
   },
-  manageButton: {
-    width: '100%',
-    borderRadius: 14,
-    marginTop: 4,
+  heroGreeting: {
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
   },
-  addBadge: {
-    width: 40,
-    height: 40,
-    borderRadius: 9999,
-    borderWidth: StyleSheet.hairlineWidth,
+  /** The account address (`username@oxy.so` / `@handle`) under the greeting. */
+  heroAddress: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  /**
+   * The switch row's disclosure affordance — a filled circle around the chevron,
+   * right-aligned to the same 12px row inset every other trailing element uses.
+   */
+  chevronCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -1,12 +1,70 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { View, Text, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import React, { useMemo, useState, useCallback } from 'react';
+import { View, Text, Image, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import type { FileMetadata } from '@oxyhq/core';
 
+type PhotoSize = { width: number; height: number };
+
+/** Stable empty map so an unresolved query yields a referentially-stable value. */
+const EMPTY_DIMENSIONS: Record<string, PhotoSize> = {};
+
+/**
+ * Measure the intrinsic size of every photo whose thumbnail URL has resolved,
+ * via `Image.getSize`. Pure/async (no React state) so it can be a React Query
+ * `queryFn`. Photos without a resolved URL are skipped and re-measured on the
+ * next signature change; a load error falls back to 1×1 (→ the 4/3 default).
+ */
+async function measurePhotoDimensions(
+    photos: FileMetadata[],
+    getThumbUrl: (photo: FileMetadata) => string | undefined,
+): Promise<Record<string, PhotoSize>> {
+    const measured: Record<string, PhotoSize> = {};
+    await Promise.all(
+        photos.map(
+            (photo) =>
+                new Promise<void>((resolve) => {
+                    const url = getThumbUrl(photo);
+                    if (!url) {
+                        resolve();
+                        return;
+                    }
+                    Image.getSize(
+                        url,
+                        (width, height) => {
+                            measured[photo.id] = { width, height };
+                            resolve();
+                        },
+                        () => {
+                            measured[photo.id] = { width: 1, height: 1 };
+                            resolve();
+                        },
+                    );
+                }),
+        ),
+    );
+    return measured;
+}
+
+/** Fixed photos-per-row for the justified grid (Apple Photos-style trio). */
+export const PHOTOS_PER_ROW = 3;
+
+/** Chunk a photo list into fixed-length rows (last row may be short). */
+export function chunkPhotos(photos: FileMetadata[], perRow: number): FileMetadata[][] {
+    const rows: FileMetadata[][] = [];
+    for (let i = 0; i < photos.length; i += perRow) {
+        rows.push(photos.slice(i, i + perRow));
+    }
+    return rows;
+}
+
 export interface JustifiedPhotoGridProps {
     photos: FileMetadata[];
-    photoDimensions: { [key: string]: { width: number; height: number } };
-    loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
-    createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
+    /**
+     * Resolve a private-safe thumbnail URL for a photo (or `undefined` while the
+     * URL is still resolving). The grid measures each photo's intrinsic size from
+     * this URL and re-measures automatically once a pending URL resolves.
+     */
+    getThumbUrl: (photo: FileMetadata) => string | undefined;
     renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
     textColor: string;
     /**
@@ -22,12 +80,15 @@ export interface JustifiedPhotoGridProps {
 /**
  * Responsive justified photo grid that stretches to the provided containerWidth.
  * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
+ *
+ * Owns its own intrinsic-dimension measurement: it calls `Image.getSize` on each
+ * photo's resolved thumbnail URL and reflows once real aspect ratios are known
+ * (falling back to 4/3 until then). Measurement re-runs whenever a photo is added
+ * OR its (asynchronously-resolved) private-safe URL first appears.
  */
 const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
     photos,
-    photoDimensions,
-    loadPhotoDimensions,
-    createJustifiedRows,
+    getThumbUrl,
     renderJustifiedPhotoItem,
     textColor,
     containerWidth: explicitWidth,
@@ -52,11 +113,27 @@ const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
         const w = e.nativeEvent.layout.width;
         setMeasuredWidth(prev => (prev === w ? prev : w));
     }, [resolvedExplicitWidth]);
-    // Ensure dimensions are loaded for displayed photos
-    useEffect(() => {
-        loadPhotoDimensions(photos);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [photos.map(p => p.id).join(',')]);
+
+    // Signature of every photo id + its currently-resolved URL — the measurement
+    // query key. A private tile's URL resolves asynchronously after it enters the
+    // list, so keying on THIS (not just the photo set) re-measures the moment a
+    // URL lands, not just when photos are added.
+    const urlSignature = useMemo(
+        () => photos.map((p) => `${p.id}:${getThumbUrl(p) ?? ''}`).join('|'),
+        [photos, getThumbUrl],
+    );
+
+    // Intrinsic dimensions via React Query (no effect): re-runs when the signature
+    // changes and reflows the justified rows. `keepPreviousData` holds the last
+    // measured map during a re-measure so tiles never flash back to the 4/3 default.
+    const dimensionsQuery = useQuery({
+        queryKey: ['justifiedPhotoDimensions', urlSignature],
+        queryFn: () => measurePhotoDimensions(photos, getThumbUrl),
+        placeholderData: keepPreviousData,
+        staleTime: Number.POSITIVE_INFINITY,
+        gcTime: 5 * 60 * 1000,
+    });
+    const photoDimensions = dimensionsQuery.data ?? EMPTY_DIMENSIONS;
 
     // Group photos by date first
     const photosByDate = useMemo(() => {
@@ -80,77 +157,74 @@ const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
         <View style={{ width: '100%' }} onLayout={onLayoutContainer}>
             {sortedDates.map((date: string) => {
                 const dayPhotos = photosByDate[date];
-                        // createJustifiedRows should build rows such that the "ideal" height (availableWidth / totalAspect) stays within min/max.
-                        // We pass the effective container width.
-                        const dateWidth = dateWidths[date] ?? effectiveWidth; // fallback to overall width until measured
-                        const rows = dateWidth > 0 ? createJustifiedRows(dayPhotos, dateWidth) : [];
-                        return (
-                            <View
-                                key={date}
-                                style={{ marginBottom: 24, width: '100%' }}
-                                onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
-                            >
-                                <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
-                                    {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
-                                </Text>
-                                <View style={{ width: '100%' }}>
-                                    {rows.map((row, rowIndex) => {
-                                        // Compute total aspect ratios using loaded dimensions (fallback 4/3)
-                                        const aspects = row.map(p => {
-                                            const dims = photoDimensions[p.id];
-                                            return dims ? dims.width / dims.height : 4 / 3;
-                                        });
-                                        const totalAspect = aspects.reduce((a, b) => a + b, 0);
-                                        const gapsTotal = gap * (row.length - 1);
-                                        const availableWidth = dateWidth - gapsTotal;
-                                        // Ideal height that perfectly fills width when preserving aspect ratios
-                                        const idealHeight = availableWidth / totalAspect;
-                                        // We rely on row construction keeping idealHeight within min/max bounds; if not, clamp but then distribute leftover/overflow.
-                                        let rowHeight = idealHeight;
-                                        let widthAdjustment = 0; // difference to distribute if clamped
-                                        if (idealHeight < minRowHeight) {
-                                            rowHeight = minRowHeight;
-                                            widthAdjustment = availableWidth - rowHeight * totalAspect; // negative means overflow
-                                        } else if (idealHeight > maxRowHeight) {
-                                            rowHeight = maxRowHeight;
-                                            widthAdjustment = availableWidth - rowHeight * totalAspect;
-                                        }
-
-                                        // Pre-compute widths maintaining aspect ratios
-                                        let widths = aspects.map(ar => ar * rowHeight);
-                                        // If we have widthAdjustment (due to clamping) distribute proportionally so row still fills exactly
-                                        if (widthAdjustment !== 0) {
-                                            const widthSum = widths.reduce((a, b) => a + b, 0);
-                                            widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
-                                        }
-
-                                        // To combat rounding issues, adjust last item width to fill precisely
-                                        const widthSumRounded = widths.reduce((a, b) => a + b, 0);
-                                        const roundingDiff = availableWidth - widthSumRounded;
-                                        if (Math.abs(roundingDiff) > 0.5) {
-                                            widths[widths.length - 1] += roundingDiff; // minimal correction
-                                        }
-
-                                        return (
-                                            <View key={rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
-                                                {row.map((p, i) => {
-                                                    const photoWidth = widths[i];
-                                                    return (
-                                                        <View
-                                                            key={p.id}
-                                                            style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
-                                                        >
-                                                            {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
-                                                        </View>
-                                                    );
-                                                })}
-                                            </View>
-                                        );
-                                    })}
-                                </View>
-                            </View>
-                        );
-                    })}
+                // Fall back to the overall width until this section is measured.
+                const dateWidth = dateWidths[date] ?? effectiveWidth;
+                const rows = dateWidth > 0 ? chunkPhotos(dayPhotos, PHOTOS_PER_ROW) : [];
+                return (
+                    <View
+                        key={date}
+                        style={{ marginBottom: 24, width: '100%' }}
+                        onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
+                    >
+                        <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
+                            {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                        </Text>
+                        <View style={{ width: '100%' }}>
+                            {rows.map((row, rowIndex) => {
+                                // Total aspect ratio of the row, using measured dims (fallback 4/3).
+                                const aspects = row.map(p => {
+                                    const dims = photoDimensions[p.id];
+                                    return dims ? dims.width / dims.height : 4 / 3;
+                                });
+                                const totalAspect = aspects.reduce((a, b) => a + b, 0);
+                                const gapsTotal = gap * (row.length - 1);
+                                const availableWidth = dateWidth - gapsTotal;
+                                // Ideal height that perfectly fills width when preserving aspect ratios.
+                                const idealHeight = availableWidth / totalAspect;
+                                // Clamp to min/max, then distribute the leftover/overflow proportionally.
+                                let rowHeight = idealHeight;
+                                let widthAdjustment = 0;
+                                if (idealHeight < minRowHeight) {
+                                    rowHeight = minRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                } else if (idealHeight > maxRowHeight) {
+                                    rowHeight = maxRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                }
+
+                                let widths = aspects.map(ar => ar * rowHeight);
+                                if (widthAdjustment !== 0) {
+                                    const widthSum = widths.reduce((a, b) => a + b, 0);
+                                    widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
+                                }
+
+                                // Correct any rounding drift on the last tile so the row fills exactly.
+                                const widthSumRounded = widths.reduce((a, b) => a + b, 0);
+                                const roundingDiff = availableWidth - widthSumRounded;
+                                if (Math.abs(roundingDiff) > 0.5) {
+                                    widths[widths.length - 1] += roundingDiff;
+                                }
+
+                                return (
+                                    <View key={row[0]?.id ?? rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
+                                        {row.map((p, i) => {
+                                            const photoWidth = widths[i];
+                                            return (
+                                                <View
+                                                    key={p.id}
+                                                    style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
+                                                >
+                                                    {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
+                                                </View>
+                                            );
+                                        })}
+                                    </View>
+                                );
+                            })}
+                        </View>
+                    </View>
+                );
+            })}
         </View>
     );
 };

package/src/ui/components/photogrid/__tests__/chunkPhotos.test.ts

@@ -0,0 +1,51 @@
+import type { FileMetadata } from '@oxyhq/core';
+import { chunkPhotos, PHOTOS_PER_ROW } from '../JustifiedPhotoGrid';
+
+// `chunkPhotos` is the row-building logic the justified photo grid owns (moved
+// out of FileManagementScreen's former `createJustifiedRows`). It is pure, so it
+// is unit-testable — unlike the grid's intrinsic-dimension measurement, which
+// depends on native `Image.getSize`.
+const photo = (id: string): FileMetadata => ({
+    id,
+    filename: `${id}.jpg`,
+    contentType: 'image/jpeg',
+    length: 1,
+    chunkSize: 0,
+    uploadDate: '2026-01-01T00:00:00.000Z',
+    metadata: {},
+    variants: [],
+});
+
+const ids = (rows: FileMetadata[][]): string[][] => rows.map((row) => row.map((p) => p.id));
+
+describe('chunkPhotos', () => {
+    it('returns no rows for an empty list', () => {
+        expect(chunkPhotos([], PHOTOS_PER_ROW)).toEqual([]);
+    });
+
+    it('groups photos into full rows of the given size', () => {
+        const photos = ['a', 'b', 'c', 'd', 'e', 'f'].map(photo);
+        expect(ids(chunkPhotos(photos, PHOTOS_PER_ROW))).toEqual([
+            ['a', 'b', 'c'],
+            ['d', 'e', 'f'],
+        ]);
+    });
+
+    it('leaves the final row short when the count is not a multiple of the row size', () => {
+        const photos = ['a', 'b', 'c', 'd'].map(photo);
+        expect(ids(chunkPhotos(photos, PHOTOS_PER_ROW))).toEqual([
+            ['a', 'b', 'c'],
+            ['d'],
+        ]);
+    });
+
+    it('preserves order and never drops or duplicates a photo', () => {
+        const photos = Array.from({ length: 10 }, (_, i) => photo(`p${i}`));
+        const flat = chunkPhotos(photos, PHOTOS_PER_ROW).flat().map((p) => p.id);
+        expect(flat).toEqual(photos.map((p) => p.id));
+    });
+
+    it('defaults to a trio per row', () => {
+        expect(PHOTOS_PER_ROW).toBe(3);
+    });
+});