@oxy.so/services 1.0.0

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

@@ -0,0 +1,232 @@
+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 '@oxy.so/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[];
+    /**
+     * 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;
+    /**
+     * Full available width from parent. If omitted, component will measure itself and adapt responsively.
+     */
+    containerWidth?: number; // optional; will auto-measure if not provided
+    gap?: number;
+    minRowHeight?: number;
+    maxRowHeight?: number;
+    dateFormatLocale?: string;
+}
+
+/**
+ * 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,
+    getThumbUrl,
+    renderJustifiedPhotoItem,
+    textColor,
+    containerWidth: explicitWidth,
+    gap = 4,
+    minRowHeight = 100,
+    maxRowHeight = 300,
+    dateFormatLocale = 'en-US',
+}) => {
+    // Responsive width measurement if not explicitly provided. Never gate the
+    // whole grid on measurement — onLayout is unreliable on web (same class of
+    // bug fixed in PhotoPickerSection). Fall back to window width until measured.
+    const { width: windowWidth } = useWindowDimensions();
+    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+    const resolvedExplicitWidth =
+        explicitWidth != null && explicitWidth > 0 ? explicitWidth : null;
+    const resolvedMeasuredWidth =
+        measuredWidth != null && measuredWidth > 0 ? measuredWidth : null;
+    const effectiveWidth = resolvedExplicitWidth ?? resolvedMeasuredWidth ?? windowWidth;
+
+    const onLayoutContainer = useCallback((e: LayoutChangeEvent) => {
+        if (resolvedExplicitWidth != null) return; // ignore if controlled
+        const w = e.nativeEvent.layout.width;
+        setMeasuredWidth(prev => (prev === w ? prev : w));
+    }, [resolvedExplicitWidth]);
+
+    // 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(() => {
+        return photos.reduce((groups: { [key: string]: FileMetadata[] }, photo) => {
+            const date = new Date(photo.uploadDate).toDateString();
+            if (!groups[date]) groups[date] = [];
+            groups[date].push(photo);
+            return groups;
+        }, {} as { [key: string]: FileMetadata[] });
+    }, [photos]);
+
+    const sortedDates = useMemo(() => Object.keys(photosByDate).sort((a, b) => new Date(b).getTime() - new Date(a).getTime()), [photosByDate]);
+
+    // Track measured width of each date section (may differ if parent applies horizontal padding/margins)
+    const [dateWidths, setDateWidths] = useState<Record<string, number>>({});
+    const onLayoutDate = useCallback((date: string, width: number) => {
+        setDateWidths(prev => (prev[date] === width ? prev : { ...prev, [date]: width }));
+    }, []);
+
+    return (
+        <View style={{ width: '100%' }} onLayout={onLayoutContainer}>
+            {sortedDates.map((date: string) => {
+                const dayPhotos = photosByDate[date];
+                // 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>
+    );
+};
+
+export default React.memo(JustifiedPhotoGrid);

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

@@ -0,0 +1,51 @@
+import type { FileMetadata } from '@oxy.so/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);
+    });
+});

package/src/ui/components/styles/overlay.tsx

@@ -0,0 +1,97 @@
+import { Animated } from 'react-native';
+
+// Simple hex color manipulation without color package
+const hexToRgb = (hex: string): [number, number, number] => {
+  const r = Number.parseInt(hex.slice(1, 3), 16);
+  const g = Number.parseInt(hex.slice(3, 5), 16);
+  const b = Number.parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return `#${[r, g, b].map(x => {
+    const hex = Math.round(x).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  }).join('')}`;
+};
+
+const mixColors = (color1: string, color2: string, ratio: number): string => {
+  const [r1, g1, b1] = hexToRgb(color1);
+  const [r2, g2, b2] = hexToRgb(color2);
+  const r = r1 + (r2 - r1) * ratio;
+  const g = g1 + (g2 - g1) * ratio;
+  const b = b1 + (b2 - b1) * ratio;
+  return rgbToHex(r, g, b);
+};
+
+export const isAnimatedValue = (
+  it: number | string | Animated.AnimatedInterpolation<number | string>
+): it is Animated.Value => it instanceof Animated.Value;
+
+// Overloaded signatures so each call site gets the right return type
+// without the conditional-type narrowing that TS cannot infer inside the
+// implementation body.
+function overlay(
+  elevation: number,
+  surfaceColor?: string
+): string;
+function overlay(
+  elevation: Animated.Value,
+  surfaceColor?: string
+): Animated.AnimatedInterpolation<number | string>;
+function overlay(
+  elevation: Animated.Value | number,
+  surfaceColor = '#121212'
+): string | Animated.AnimatedInterpolation<number | string> {
+  if (isAnimatedValue(elevation)) {
+    const inputRange = [0, 1, 2, 3, 8, 24];
+
+    return elevation.interpolate({
+      inputRange,
+      outputRange: inputRange.map((e) => calculateColor(surfaceColor, e)),
+    });
+  }
+
+  return calculateColor(surfaceColor, elevation);
+}
+
+export default overlay;
+
+function calculateColor(surfaceColor: string, elevation = 1) {
+  let overlayTransparency: number;
+  if (elevation >= 1 && elevation <= 24) {
+    overlayTransparency = elevationOverlayTransparency[elevation];
+  } else if (elevation > 24) {
+    overlayTransparency = elevationOverlayTransparency[24];
+  } else {
+    overlayTransparency = elevationOverlayTransparency[1];
+  }
+  return mixColors(surfaceColor, '#FFFFFF', overlayTransparency * 0.01);
+}
+
+const elevationOverlayTransparency: Record<string, number> = {
+  1: 5,
+  2: 7,
+  3: 8,
+  4: 9,
+  5: 10,
+  6: 11,
+  7: 11.5,
+  8: 12,
+  9: 12.5,
+  10: 13,
+  11: 13.5,
+  12: 14,
+  13: 14.25,
+  14: 14.5,
+  15: 14.75,
+  16: 15,
+  17: 15.12,
+  18: 15.24,
+  19: 15.36,
+  20: 15.48,
+  21: 15.6,
+  22: 15.72,
+  23: 15.84,
+  24: 16,
+};

package/src/ui/components/styles/shadow.tsx

@@ -0,0 +1,131 @@
+import { Animated, Platform, type ShadowStyleIOS, type ViewStyle } from 'react-native';
+
+const SHADOW_COLOR = '#000000';
+const SHADOW_OPACITY = 0.24;
+const MD3_SHADOW_OPACITY = 0.3;
+const MD3_SHADOW_COLOR = '#000000';
+
+export default function shadow(
+  elevation: number | Animated.Value = 0,
+  isV3 = false
+): ViewStyle | ShadowStyleIOS {
+  return isV3 ? v3Shadow(elevation) : v2Shadow(elevation);
+}
+
+function v2Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
+  if (elevation instanceof Animated.Value) {
+    const inputRange = [0, 1, 2, 3, 8, 24];
+
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height: elevation.interpolate({
+            inputRange,
+            outputRange: [0, 0.5, 0.75, 2, 7, 23],
+          }),
+        },
+        shadowOpacity: elevation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, SHADOW_OPACITY],
+          extrapolate: 'clamp',
+        }),
+        shadowRadius: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 0.75, 1.5, 3, 8, 24],
+        }),
+      } as unknown as ShadowStyleIOS;
+    }
+      return {
+        elevation: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 1, 2, 3, 8, 24],
+        }) as unknown as number,
+      };
+  }
+    if (elevation === 0) {
+      return {};
+    }
+
+    let height: number;
+    let radius: number;
+    switch (elevation) {
+      case 1:
+        height = 0.5;
+        radius = 0.75;
+        break;
+      case 2:
+        height = 0.75;
+        radius = 1.5;
+        break;
+      default:
+        height = elevation - 1;
+        radius = elevation;
+    }
+
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height,
+        },
+        shadowOpacity: SHADOW_OPACITY,
+        shadowRadius: radius,
+      } as ShadowStyleIOS;
+    }
+      return {
+        elevation: elevation,
+      };
+}
+
+function v3Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
+  const inputRange = [0, 1, 2, 3, 4, 5];
+  const shadowHeight = [0, 1, 2, 4, 6, 8];
+  const shadowRadius = [0, 3, 6, 8, 10, 12];
+
+  if (elevation instanceof Animated.Value) {
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: MD3_SHADOW_COLOR,
+        shadowOffset: {
+          width: 0,
+          height: elevation.interpolate({
+            inputRange,
+            outputRange: shadowHeight,
+          }),
+        },
+        shadowOpacity: elevation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, MD3_SHADOW_OPACITY],
+          extrapolate: 'clamp',
+        }),
+        shadowRadius: elevation.interpolate({
+          inputRange,
+          outputRange: shadowRadius,
+        }),
+      } as unknown as ShadowStyleIOS;
+    }
+      return {
+        elevation: elevation.interpolate({
+          inputRange,
+          outputRange: [0, 1, 2, 3, 4, 5],
+        }) as unknown as number,
+      };
+  }
+    if (Platform.OS === 'ios') {
+      return {
+        shadowColor: MD3_SHADOW_COLOR,
+        shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
+        shadowOffset: {
+          width: 0,
+          height: shadowHeight[elevation] || 0,
+        },
+        shadowRadius: shadowRadius[elevation] || 0,
+      } as ShadowStyleIOS;
+    }
+      return {
+        elevation: elevation || 0,
+      };
+}

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -0,0 +1,98 @@
+import type React from 'react';
+import { Text, View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxy.so/bloom/surfaces';
+
+/**
+ * A single choice in an {@link ActionSheetSurface} — a labelled button that
+ * resolves the surface with `value` when pressed.
+ */
+export interface ActionSheetOption<T extends string> {
+    label: string;
+    value: T;
+    /** Render as a destructive (negative) button. */
+    destructive?: boolean;
+}
+
+export interface ActionSheetSurfaceProps<T extends string> {
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    /** Headline. */
+    title: string;
+    /** Optional supporting copy. */
+    message?: string;
+    /** The choices; each dismisses the surface with its `value`. */
+    options: ActionSheetOption<T>[];
+    /** Cancel button label — dismisses with `undefined`. */
+    cancelLabel: string;
+}
+
+const TITLE_STYLE = { fontSize: 22, fontWeight: '600' as const, lineHeight: 30 };
+const MESSAGE_STYLE = { fontSize: 16, lineHeight: 22 };
+
+/**
+ * A multi-choice action sheet rendered as a shared-stack surface — the
+ * many-option counterpart to Bloom's two-way `surfaces.confirm`. Each option
+ * button resolves the surface's `present()` promise with that option's `value`;
+ * cancel / backdrop / Escape resolve `undefined`. Presented via
+ * {@link presentActionSheet}.
+ */
+export function ActionSheetSurface<T extends string>({
+    surface,
+    title,
+    message,
+    options,
+    cancelLabel,
+}: ActionSheetSurfaceProps<T>): React.ReactElement {
+    const theme = useTheme();
+
+    return (
+        <View>
+            <Text
+                style={[
+                    TITLE_STYLE,
+                    { color: theme.colors.text, paddingBottom: message ? 4 : 16 },
+                ]}
+            >
+                {title}
+            </Text>
+            {message ? (
+                <Text
+                    style={[
+                        MESSAGE_STYLE,
+                        { color: theme.colors.textSecondary, paddingBottom: 16 },
+                    ]}
+                >
+                    {message}
+                </Text>
+            ) : null}
+            <View style={{ gap: 8 }}>
+                {options.map((option) => (
+                    <Button
+                        key={option.value}
+                        variant={option.destructive ? 'destructive' : 'primary'}
+                        onPress={() => surface.dismiss(option.value)}
+                    >
+                        {option.label}
+                    </Button>
+                ))}
+                <Button variant="secondary" onPress={() => surface.dismiss(undefined)}>
+                    {cancelLabel}
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Present an {@link ActionSheetSurface} on the shared stack and resolve with the
+ * chosen option `value`, or `undefined` if cancelled/dismissed.
+ */
+export function presentActionSheet<T extends string>(
+    options: Omit<ActionSheetSurfaceProps<T>, 'surface'>,
+): Promise<T | undefined> {
+    return surfaces.present<T | undefined>((surface) => (
+        <ActionSheetSurface surface={surface} {...options} />
+    ));
+}

package/src/ui/components/utils/hasTouchHandler.tsx

@@ -0,0 +1,23 @@
+import type { GestureResponderEvent } from 'react-native';
+
+const touchableEvents = [
+  'onPress',
+  'onLongPress',
+  'onPressIn',
+  'onPressOut',
+] as const;
+
+type TouchableEventObject = Partial<
+  Record<
+    (typeof touchableEvents)[number],
+    (event: GestureResponderEvent) => void
+  >
+>;
+
+export default function hasTouchHandler(
+  touchableEventObject: TouchableEventObject
+) {
+  return touchableEvents.some((event) => {
+    return Boolean(touchableEventObject[event]);
+  });
+}

package/src/ui/components/utils/roundLayoutSize.ts

@@ -0,0 +1,2 @@
+export const roundLayoutSize = (size: number): number =>
+  Math.round(size * 1000) / 1000;