@lotics/ui 5.9.0 → 5.10.0

package/src/file_gallery_modal.tsx

@@ -5,15 +5,14 @@
 // (pdfjs-dist, @lotics/docx, @lotics/xlsx) are optional peer deps loaded lazily —
 // so a consumer that only shows images pays nothing extra.
 
-import { useCallback, useEffect, useState, type ReactNode } from "react";
-import { Linking, Modal, Platform, Pressable, StyleSheet, View } from "react-native";
+import { useCallback, useEffect, type ReactNode } from "react";
+import { Linking, Modal, Platform, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { IconButton } from "./icon_button";
+import { Button } from "./button";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Alert } from "./alert";
-import { MenuButton } from "./menu_button";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { useScreenSize } from "./use_screen_size";
 import { colors } from "./colors";
 import type { DisplayFile } from "./file_thumbnail";
 import { FilePreview } from "./file_preview";
@@ -65,6 +64,13 @@ export interface FileGalleryModalProps {
    * forwarded so the override can honor the rotate controls for images.
    */
   renderPreview?: (file: DisplayFile, opts: { rotation: number }) => ReactNode;
+  /**
+   * Credentials mode for the built-in `FilePreview`'s byte fetches. The host
+   * frontend passes `"include"` so the session cookie rides the cross-origin
+   * fetch to its auth-gated proxy; custom-code apps omit it (presigned URLs).
+   * Ignored when `renderPreview` is set (the override owns its own fetching).
+   */
+  credentials?: RequestCredentials;
   /**
    * Persist the active image's current view-rotation as a new stored file. When
    * provided and the active image is rotated, a confirm (✓) control appears next
@@ -93,12 +99,11 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
     rotation,
     rotatable = true,
     renderPreview,
+    credentials,
     onPersistRotation,
     persisting,
   } = props;
   const visible = activeIndex !== null;
-  const [actionsOpen, setActionsOpen] = useState(false);
-  const { small } = useScreenSize();
   // Own the rotation when the host doesn't share one (standalone consumers).
   const internalRotation = useImageRotation();
   const rot = rotation ?? internalRotation;
@@ -147,26 +152,24 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   const rotated = rot.rotationFor(file.id) !== 0;
 
   const handleDownload = () => {
-    setActionsOpen(false);
     if (onDownload) {
       onDownload(file);
       return;
     }
-    // Default: the web fetch+save path (presigned URLs are same-origin to an
-    // app). On native the web primitive can't run, so open the URL externally.
+    // Default: the web fetch+save path. `credentials` rides the host's auth-gated
+    // proxy URLs (presigned app URLs are same-origin and omit it). On native the
+    // web primitive can't run, so open the URL externally.
     if (Platform.OS === "web") {
-      void downloadFileFromUrl(file.url, file.filename);
+      void downloadFileFromUrl(file.url, file.filename, { credentials });
     } else {
       void Linking.openURL(file.url);
     }
   };
   const handleOpenExternal = () => {
-    setActionsOpen(false);
     onOpenExternal?.(file);
   };
   const handleRemove = () => {
     if (!onRemove) return;
-    setActionsOpen(false);
     Alert.alert(l.removeConfirmTitle, l.removeConfirmMessage(file.filename), [
       { text: l.cancel, style: "cancel" },
       {
@@ -231,26 +234,28 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
             </>
           ) : null}
 
-          <Popover open={actionsOpen} onOpenChange={setActionsOpen}>
-            <PopoverTrigger>
-              <IconButton size="lg" icon="ellipsis" tooltip={l.actions} color="secondary" />
-            </PopoverTrigger>
-            <PopoverContent small={small}>
-              <View style={styles.menu}>
-                <MenuButton icon="download" title={l.download} onPress={handleDownload} />
-                {onOpenExternal ? (
-                  <MenuButton
-                    icon="external-link"
-                    title={l.openExternal}
-                    onPress={handleOpenExternal}
-                  />
-                ) : null}
-                {onRemove ? (
-                  <MenuButton icon="trash" title={l.remove} danger onPress={handleRemove} />
-                ) : null}
-              </View>
-            </PopoverContent>
-          </Popover>
+          <Button
+            icon="download"
+            title={l.download}
+            color="secondary"
+            onPress={handleDownload}
+          />
+          {onOpenExternal ? (
+            <Button
+              icon="external-link"
+              title={l.openExternal}
+              color="secondary"
+              onPress={handleOpenExternal}
+            />
+          ) : null}
+          {onRemove ? (
+            <Button
+              icon="trash"
+              title={l.remove}
+              color="danger-secondary"
+              onPress={handleRemove}
+            />
+          ) : null}
 
           <IconButton size="lg" icon="x" tooltip={l.close} color="secondary" onPress={close} />
         </View>
@@ -264,29 +269,28 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
               labels={labels}
               onError={onError}
               rotation={rot.rotationFor(file.id)}
+              credentials={credentials}
             />
           )}
 
           {activeIndex > 0 ? (
-            <Pressable
+            <FocusRingPressable accessibilityRole="button"
               onPress={prev}
-              accessibilityRole="button"
               accessibilityLabel={l.previous}
               style={[styles.nav, styles.navLeft]}
             >
               <Icon name="chevron-left" size={28} color={colors.white} />
-            </Pressable>
+            </FocusRingPressable>
           ) : null}
 
           {activeIndex < total - 1 ? (
-            <Pressable
+            <FocusRingPressable accessibilityRole="button"
               onPress={next}
-              accessibilityRole="button"
               accessibilityLabel={l.next}
               style={[styles.nav, styles.navRight]}
             >
               <Icon name="chevron-right" size={28} color={colors.white} />
-            </Pressable>
+            </FocusRingPressable>
           ) : null}
         </View>
       </View>
@@ -318,9 +322,6 @@ const styles = StyleSheet.create({
   spacer: {
     flex: 1,
   },
-  menu: {
-    minWidth: 180,
-  },
   previewArea: {
     flex: 1,
     justifyContent: "center",

package/src/file_preview.web.tsx

@@ -33,7 +33,7 @@ import { colors } from "./colors";
  * Pure: i18n via `labels` props, errors via `onError` — no lingui/analytics
  * (purity test). Lifted from the frontend gallery so both share one renderer.
  */
-export function FilePreview({ file, labels, onError, rotation }: FilePreviewProps) {
+export function FilePreview({ file, labels, onError, rotation, credentials }: FilePreviewProps) {
   const l = resolveLabels(labels);
 
   if (isImageMimeType(file.mimeType)) {
@@ -47,10 +47,10 @@ export function FilePreview({ file, labels, onError, rotation }: FilePreviewProp
     );
   }
   if (isPdfMimeType(file.mimeType)) {
-    return <PdfPreview file={file} labels={l} onError={onError} />;
+    return <PdfPreview file={file} labels={l} onError={onError} credentials={credentials} />;
   }
   if (isDocxMimeType(file.mimeType)) {
-    return <WordPreview file={file} labels={l} onError={onError} />;
+    return <WordPreview file={file} labels={l} onError={onError} credentials={credentials} />;
   }
   if (isVideoMimeType(file.mimeType)) {
     return <video controls preload="metadata" src={file.url} style={mediaElementStyle} />;
@@ -64,7 +64,7 @@ export function FilePreview({ file, labels, onError, rotation }: FilePreviewProp
     );
   }
   if (isPreviewableMimeType(file.mimeType)) {
-    return <SpreadsheetView file={file} labels={l} onError={onError} />;
+    return <SpreadsheetView file={file} labels={l} onError={onError} credentials={credentials} />;
   }
 
   return (
@@ -89,10 +89,12 @@ function WordPreview({
   file,
   labels,
   onError,
+  credentials,
 }: {
   file: FilePreviewProps["file"];
   labels: PreviewLabels;
   onError: FilePreviewProps["onError"];
+  credentials: FilePreviewProps["credentials"];
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<{ loading: boolean; error: string | undefined }>({
@@ -106,7 +108,7 @@ function WordPreview({
     setState({ loading: true, error: undefined });
 
     const run = async () => {
-      const response = await fetch(file.url, { signal: controller.signal });
+      const response = await fetch(file.url, { signal: controller.signal, credentials });
       if (!response.ok) throw new Error(`Document fetch failed (${response.status})`);
       const arrayBuffer = await response.arrayBuffer();
       const bytes = new Uint8Array(arrayBuffer);
@@ -136,7 +138,7 @@ function WordPreview({
       controller.abort();
       loadedView?.destroy();
     };
-  }, [file.url, file.id, file.mimeType, labels.loadFailed, onError]);
+  }, [file.url, file.id, file.mimeType, labels.loadFailed, onError, credentials]);
 
   return (
     <div style={wordContainerStyle}>
@@ -157,7 +159,7 @@ function WordPreview({
               icon="download"
               title={labels.download}
               color="secondary"
-              onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+              onPress={() => void downloadFileFromUrl(file.url, file.filename, { credentials })}
             />
           </View>
         </div>
@@ -246,14 +248,15 @@ async function renderPdf(opts: {
   scroll: HTMLDivElement;
   pages: HTMLDivElement;
   signal: AbortSignal;
+  credentials: RequestCredentials | undefined;
   /** Reports a per-page render failure (the page degrades to a blank slot, but
    *  the error is never swallowed). */
   reportError: (err: unknown) => void;
 }): Promise<RenderedPdf> {
-  const { url, scroll, pages, signal, reportError } = opts;
+  const { url, scroll, pages, signal, credentials, reportError } = opts;
   const pdfjs = await loadPdfjs();
 
-  const response = await fetch(url, { signal });
+  const response = await fetch(url, { signal, credentials });
   if (!response.ok) throw new Error(`PDF fetch failed (${response.status})`);
   const data = new Uint8Array(await response.arrayBuffer());
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");
@@ -367,10 +370,12 @@ function PdfPreview({
   file,
   labels,
   onError,
+  credentials,
 }: {
   file: FilePreviewProps["file"];
   labels: PreviewLabels;
   onError: FilePreviewProps["onError"];
+  credentials: FilePreviewProps["credentials"];
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const pagesRef = useRef<HTMLDivElement>(null);
@@ -394,6 +399,7 @@ function PdfPreview({
       scroll,
       pages,
       signal: controller.signal,
+      credentials,
       reportError: (err) => onError?.(err, { fileId: file.id, mimeType: file.mimeType }),
     }).then(
       (result) => {
@@ -420,7 +426,15 @@ function PdfPreview({
       controller.abort();
       rendered?.destroy();
     };
-  }, [file.url, file.id, file.mimeType, labels.loadFailed, labels.passwordProtected, onError]);
+  }, [
+    file.url,
+    file.id,
+    file.mimeType,
+    labels.loadFailed,
+    labels.passwordProtected,
+    onError,
+    credentials,
+  ]);
 
   return (
     <div style={pdfContainerStyle}>
@@ -444,7 +458,7 @@ function PdfPreview({
               icon="download"
               title={labels.download}
               color="secondary"
-              onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+              onPress={() => void downloadFileFromUrl(file.url, file.filename, { credentials })}
             />
           </View>
         </div>

package/src/file_preview_types.ts

@@ -30,6 +30,14 @@ export interface FilePreviewProps {
   onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
   /** View rotation in degrees (0/90/180/270) — applied to image previews only. */
   rotation?: number;
+  /**
+   * Credentials mode for the byte fetches the PDF / Word / spreadsheet previews
+   * make. The host frontend serves files from the auth-gated proxy on a sibling
+   * subdomain (`api.lotics.ai`); the session cookie only rides that cross-origin
+   * fetch with `"include"`. Custom-code apps fetch presigned URLs — a credentialed
+   * request would trip the bucket's CORS — so they omit this and take the default.
+   */
+  credentials?: RequestCredentials;
 }
 
 export function resolveLabels(labels: Partial<PreviewLabels> | undefined): PreviewLabels {
@@ -45,6 +53,7 @@ export interface GalleryLabels extends PreviewLabels {
   close: string;
   previous: string;
   next: string;
+  /** Accessibility label for the per-row ⋯ menu in `FileRows`. */
   actions: string;
   openExternal: string;
   remove: string;

package/src/file_row.tsx

@@ -3,6 +3,8 @@ import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { FileBadge } from "./file_badge";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface FileRowProps {
   /** The file / document name — the primary line. */
@@ -38,6 +40,7 @@ export interface FileRowProps {
 export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress, trailing }: FileRowProps) {
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
   // Hover via the DOM (not Pressability): RN-Web hands a parent's hover to the
   // innermost nested pressable, which would stop the wash short of `trailing`.
   const mouseProps = {
@@ -77,11 +80,12 @@ export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress
     >
       <Pressable
         onPress={onPress}
+        {...focusProps}
         onPressIn={() => setPressed(true)}
         onPressOut={() => setPressed(false)}
         accessibilityRole="button"
         accessibilityLabel={`Open ${name}`}
-        style={styles.door}
+        style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
       >
         {content}
       </Pressable>

package/src/file_rows.tsx

@@ -34,6 +34,9 @@ export interface FileRowsProps {
   labels?: Partial<GalleryLabels>;
   /** Gap between rows. Default 8. */
   gap?: number;
+  /** Credentials mode for the gallery's preview fetches — `"include"` for the
+   *  host's auth-gated proxy URLs, omitted for an app's presigned URLs. */
+  credentials?: RequestCredentials;
 }
 
 /**
@@ -42,7 +45,7 @@ export interface FileRowsProps {
  * record's documents, a message's files. For an ADD/upload surface use `FileGrid`;
  * for bare square tiles use `FileThumbnailGrid`.
  */
-export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, onError, labels, gap = 8 }: FileRowsProps) {
+export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, onError, labels, gap = 8, credentials }: FileRowsProps) {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const l = resolveGalleryLabels(labels);
 
@@ -53,7 +56,7 @@ export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, on
       onDownload(file);
       return;
     }
-    void downloadFileFromUrl(file.url, file.filename);
+    void downloadFileFromUrl(file.url, file.filename, { credentials });
   };
 
   const confirmRemove = (file: DisplayFile) => {
@@ -93,6 +96,7 @@ export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, on
         onIndexChange={setActiveIndex}
         onDownload={onDownload}
         onOpenExternal={onOpenExternal}
+        credentials={credentials}
         onRemove={onRemove ? (fileId) => {
           const file = files.find((f) => f.id === fileId);
           if (file) onRemove(file);

package/src/file_thumbnail.tsx

@@ -6,6 +6,8 @@ import { IconButton } from "./icon_button";
 import { Checkbox } from "./checkbox";
 import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 import { useCallback, useState } from "react";
 import {
   GestureResponderEvent,
@@ -183,9 +185,10 @@ interface DocumentBadgeProps {
  */
 export function DocumentBadge(props: DocumentBadgeProps) {
   const { mimeType, isTemplate, onPress, onLongPress } = props;
+  const { focusVisible, focusProps } = useFocusRing();
 
   return (
-    <Pressable onPress={onPress} onLongPress={onLongPress}>
+    <Pressable onPress={onPress} onLongPress={onLongPress} {...focusProps} style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 6 } : undefined}>
       <FileBadge mimeType={mimeType} isTemplate={isTemplate} />
     </Pressable>
   );
@@ -217,6 +220,7 @@ export function DocumentCard(props: DocumentCardProps) {
 
   // Badge takes ~40% of the tile, clamped so tiny/huge tiles stay tasteful.
   const badgeSize = size !== undefined ? Math.max(30, Math.min(60, Math.round(size * 0.4))) : 40;
+  const { focusVisible, focusProps } = useFocusRing();
 
   return (
     <Pressable
@@ -225,9 +229,11 @@ export function DocumentCard(props: DocumentCardProps) {
         sizeStyle,
         (state as { hovered?: boolean }).hovered && styles.tileHovered,
         state.pressed && styles.tilePressed,
+        focusVisible && { boxShadow: FOCUS_RING },
       ]}
       onPress={onPress}
       onLongPress={onLongPress}
+      {...focusProps}
     >
       <FileBadge mimeType={mimeType} size={badgeSize} isTemplate={isTemplate} />
       <Text size="xs" numberOfLines={1} color="zinc-500" style={styles.documentTileName} userSelect="none">
@@ -264,14 +270,16 @@ export function MediaCard(props: MediaCardProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   const isCompact = size !== undefined && size <= COMPACT_THUMBNAIL_SIZE;
+  const { focusVisible, focusProps } = useFocusRing();
 
   if (isCompact) {
     const iconSize = Math.max(12, Math.round(size * 0.55));
     return (
       <Pressable
-        style={({ pressed }) => [styles.mediaCardCompact, sizeStyle, { backgroundColor: color }, pressed && styles.pressedDim]}
+        style={({ pressed }) => [styles.mediaCardCompact, sizeStyle, { backgroundColor: color }, pressed && styles.pressedDim, focusVisible && { boxShadow: FOCUS_RING }]}
         onPress={onPress}
         onLongPress={onLongPress}
+        {...focusProps}
       >
         <Icon name={icon} size={iconSize} color={colors.white} />
         {overlay}
@@ -283,7 +291,7 @@ export function MediaCard(props: MediaCardProps) {
   const backdrop = iconSize + 20;
 
   return (
-    <Pressable style={[styles.documentCard, sizeStyle]} onPress={onPress} onLongPress={onLongPress}>
+    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} {...focusProps}>
       {(state) => (
         <>
           <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
@@ -323,6 +331,7 @@ interface ImageThumbnailProps {
 function ImageThumbnail(props: ImageThumbnailProps) {
   const { file, size, onPress, onLongPress } = props;
   const [useFallback, setUseFallback] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
 
   // Use thumbnail if available, fallback to full URL
   const url = !useFallback && file.thumbnailUrl ? file.thumbnailUrl : file.url;
@@ -333,7 +342,7 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable onPress={onPress} onLongPress={onLongPress} style={[styles.imageThumbnail, sizeStyle]}>
+    <Pressable onPress={onPress} onLongPress={onLongPress} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
       {(state) => (
         <>
           <Image

package/src/file_thumbnail_grid.tsx

@@ -15,6 +15,8 @@ import { View, Pressable, StyleSheet, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE, COMPACT_THUMBNAIL_SIZE } from "./file_thumbnail";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface ThumbnailGridProps<T> {
   items: T[];
@@ -199,6 +201,7 @@ export function FileThumbnailGrid(props: FileThumbnailGridProps) {
 function OverflowTile({ size, count, onPress }: { size: number; count: number; onPress?: () => void }) {
   const compact = size <= COMPACT_THUMBNAIL_SIZE;
   const box = { width: size, height: size, borderRadius: compact ? 7 : 10 };
+  const { focusVisible, focusProps } = useFocusRing();
   const label = (
     <Text size={compact ? "xs" : "sm"} weight="medium" color="zinc-700" userSelect="none">
       +{count}
@@ -210,6 +213,7 @@ function OverflowTile({ size, count, onPress }: { size: number; count: number; o
   return (
     <Pressable
       onPress={onPress}
+      {...focusProps}
       accessibilityRole="button"
       accessibilityLabel={`+${count}`}
       style={(state) => [
@@ -217,6 +221,7 @@ function OverflowTile({ size, count, onPress }: { size: number; count: number; o
         box,
         (state as { hovered?: boolean }).hovered && styles.overflowHovered,
         state.pressed && styles.overflowPressed,
+        focusVisible && { boxShadow: FOCUS_RING },
       ]}
     >
       {label}