@lotics/ui 5.8.0 → 5.10.0

package/src/file_rows.tsx

@@ -0,0 +1,109 @@
+// FileRows — the common "show a list of files" surface, batteries included: each
+// file is a FileRow whose whole-row press opens the built-in full-screen
+// FileGalleryModal, with a ⋯ menu (Download · Open in new tab · Remove) on the
+// trailing edge. Pure kit composition (FileRow + ActionMenu + FileGalleryModal) —
+// reach for the pieces directly only when you need a different shape.
+
+import { useState } from "react";
+import { View } from "react-native";
+import { Alert } from "./alert";
+import { FileRow } from "./file_row";
+import { ActionMenu, type ActionMenuItem } from "./action_menu";
+import { FileGalleryModal } from "./file_gallery_modal";
+import { resolveMime } from "./file_badge";
+import { downloadFileFromUrl } from "./download";
+import { resolveGalleryLabels, type GalleryLabels } from "./file_preview_types";
+import type { DisplayFile } from "./file_thumbnail";
+
+export interface FileRowsProps {
+  files: DisplayFile[];
+  /** Secondary line per file. Default: the file-type label (e.g. "PDF"). */
+  meta?: (file: DisplayFile) => string | undefined;
+  /** Adds a (confirmed) "Remove" to each ⋯ menu and the gallery toolbar. The host
+   *  drops the file from its own state. */
+  onRemove?: (file: DisplayFile) => void;
+  /** Open a file outside the app (a new tab on the frontend, the SDK's
+   *  `openExternal` in a sandboxed app). Adds "Open in new tab". */
+  onOpenExternal?: (file: DisplayFile) => void;
+  /** Override the Download action (default: fetch + save the URL). The host
+   *  frontend passes its own to send `credentials` for auth-gated proxy URLs. */
+  onDownload?: (file: DisplayFile) => void;
+  /** Reported when a previewed file fails to render (host wires its logger). */
+  onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
+  /** Translated chrome — Download / Remove / Open-external / gallery + confirm. */
+  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;
+}
+
+/**
+ * A file LIST that just works: tap a row to preview it full-screen, ⋯ for quick
+ * actions. The default surface for "here are some files" — saved attachments, a
+ * 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, credentials }: FileRowsProps) {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const l = resolveGalleryLabels(labels);
+
+  if (files.length === 0) return null;
+
+  const download = (file: DisplayFile) => {
+    if (onDownload) {
+      onDownload(file);
+      return;
+    }
+    void downloadFileFromUrl(file.url, file.filename, { credentials });
+  };
+
+  const confirmRemove = (file: DisplayFile) => {
+    if (!onRemove) return;
+    Alert.alert(l.removeConfirmTitle, l.removeConfirmMessage(file.filename), [
+      { text: l.cancel, style: "cancel" },
+      { text: l.remove, style: "destructive", onPress: () => onRemove(file) },
+    ]);
+  };
+
+  return (
+    <View style={{ gap }}>
+      {files.map((file, index) => {
+        const items: ActionMenuItem[] = [
+          { key: "download", label: l.download, icon: "download", onPress: () => download(file) },
+        ];
+        if (onOpenExternal) {
+          items.push({ key: "open", label: l.openExternal, icon: "external-link", onPress: () => onOpenExternal(file) });
+        }
+        if (onRemove) {
+          items.push({ key: "remove", label: l.remove, icon: "trash", danger: true, onPress: () => confirmRemove(file) });
+        }
+        return (
+          <FileRow
+            key={file.id}
+            name={file.filename}
+            meta={meta ? meta(file) : resolveMime(file.mimeType).label}
+            mimeType={file.mimeType}
+            onPress={() => setActiveIndex(index)}
+            trailing={<ActionMenu accessibilityLabel={`${l.actions}: ${file.filename}`} items={items} />}
+          />
+        );
+      })}
+      <FileGalleryModal
+        files={files}
+        activeIndex={activeIndex}
+        onIndexChange={setActiveIndex}
+        onDownload={onDownload}
+        onOpenExternal={onOpenExternal}
+        credentials={credentials}
+        onRemove={onRemove ? (fileId) => {
+          const file = files.find((f) => f.id === fileId);
+          if (file) onRemove(file);
+        } : undefined}
+        onError={onError}
+        labels={labels}
+      />
+    </View>
+  );
+}

package/src/file_thumbnail.tsx

@@ -2,9 +2,12 @@ import { FileBadge, resolveMime } from "./file_badge";
 import { fontFamilySemiBold } from "./text_utils";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
+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,
@@ -70,6 +73,8 @@ interface FileThumbnailProps {
   /** While true, dims the thumbnail with a spinner — the file is still uploading
    *  (the local preview shows immediately; this marks it as in-flight). */
   uploading?: boolean;
+  /** Marks the file as a document TEMPLATE — adds a "TMPL" badge (any file type). */
+  isTemplate?: boolean;
 }
 
 /**
@@ -77,7 +82,7 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected, uploading } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate } = props;
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -101,6 +106,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
         <DocumentBadge
           mimeType={file.mimeType}
           size={size}
+          isTemplate={isTemplate}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -126,6 +132,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           mimeType={file.mimeType}
           filename={file.filename}
           size={size}
+          isTemplate={isTemplate}
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
@@ -157,7 +164,7 @@ const uploadingOverlayStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(24,24,27,0.42)",
-    borderRadius: 8,
+    borderRadius: 10,
   },
 });
 
@@ -178,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>
   );
@@ -190,42 +198,47 @@ interface DocumentCardProps {
   mimeType: string;
   filename: string;
   size?: number;
+  isTemplate?: boolean;
   onPress?: () => void;
   onLongPress?: () => void;
   overlay?: React.ReactNode;
 }
 
 /**
- * Document preview card: placeholder lines (future: file preview) + footer with filename and type label.
+ * Document tile: the file-type badge centered with the filename directly below
+ * it (no divider, no footer box). The badge scales with the tile and carries the
+ * type, color, and the TMPL marker. For readable filenames in a list, reach for
+ * `FileRow` (horizontal) instead.
  */
 export function DocumentCard(props: DocumentCardProps) {
-  const { mimeType, filename, size, onPress, onLongPress, overlay } = props;
-  const { label, color } = resolveMime(mimeType);
+  const { mimeType, filename, size, isTemplate, onPress, onLongPress, overlay } = props;
 
   const sizeStyle =
     size !== undefined
       ? { width: size, height: size }
       : { width: "100%" as const, height: "100%" as const };
 
+  // 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 style={[styles.documentCard, sizeStyle]} onPress={onPress} onLongPress={onLongPress}>
-      <View style={styles.documentCardBody}>
-        <View style={styles.placeholderLines}>
-          <View style={styles.placeholderLine} />
-          <View style={styles.placeholderLine} />
-          <View style={[styles.placeholderLine, { width: "60%" }]} />
-          <View style={styles.placeholderLine} />
-          <View style={[styles.placeholderLine, { width: "40%" }]} />
-        </View>
-      </View>
-      <View style={styles.documentCardFooter}>
-        <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
-          {filename}
-        </Text>
-        <View style={[styles.typeLabel, { backgroundColor: color }]}>
-          <RNText style={styles.typeLabelText}>{label}</RNText>
-        </View>
-      </View>
+    <Pressable
+      style={(state) => [
+        styles.documentTile,
+        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">
+        {filename}
+      </Text>
       {overlay}
     </Pressable>
   );
@@ -257,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={[styles.mediaCardCompact, sizeStyle, { backgroundColor: color }]}
+        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}
@@ -276,21 +291,26 @@ export function MediaCard(props: MediaCardProps) {
   const backdrop = iconSize + 20;
 
   return (
-    <Pressable style={[styles.documentCard, sizeStyle]} onPress={onPress} onLongPress={onLongPress}>
-      <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
-        <View style={[styles.mediaIconBackdrop, { width: backdrop, height: backdrop, borderRadius: backdrop / 2 }]}>
-          <Icon name={icon} size={iconSize} color={colors.white} />
-        </View>
-      </View>
-      <View style={styles.documentCardFooter}>
-        <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
-          {filename}
-        </Text>
-        <View style={[styles.typeLabel, { backgroundColor: color }]}>
-          <RNText style={styles.typeLabelText}>{label}</RNText>
-        </View>
-      </View>
-      {overlay}
+    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} {...focusProps}>
+      {(state) => (
+        <>
+          <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
+            <View style={[styles.mediaIconBackdrop, { width: backdrop, height: backdrop, borderRadius: backdrop / 2 }]}>
+              <Icon name={icon} size={iconSize} color={colors.white} />
+            </View>
+          </View>
+          <View style={styles.documentCardFooter}>
+            <Text size="xs" numberOfLines={1} color="zinc-500" userSelect="none">
+              {filename}
+            </Text>
+            <View style={[styles.typeLabel, { backgroundColor: color }]}>
+              <RNText style={styles.typeLabelText}>{label}</RNText>
+            </View>
+          </View>
+          {overlay}
+          <TileScrim hovered={(state as { hovered?: boolean }).hovered} pressed={state.pressed} />
+        </>
+      )}
     </Pressable>
   );
 }
@@ -311,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;
@@ -321,22 +342,31 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable
-      onPress={onPress}
-      onLongPress={onLongPress}
-      style={[styles.imageThumbnail, sizeStyle]}
-    >
-      <Image
-        source={{ uri: url }}
-        style={styles.image}
-        resizeMode="cover"
-        onError={() => setUseFallback(true)}
-      />
+    <Pressable onPress={onPress} onLongPress={onLongPress} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
+      {(state) => (
+        <>
+          <Image
+            source={{ uri: url }}
+            style={styles.image}
+            resizeMode="cover"
+            onError={() => setUseFallback(true)}
+          />
+          <TileScrim hovered={(state as { hovered?: boolean }).hovered} pressed={state.pressed} />
+        </>
+      )}
     </Pressable>
   );
 }
 
-export function RemoveButton({ onPress }: { onPress: () => void }) {
+/** Hover/press feedback for image and media tiles: a subtle darkening scrim
+ *  ON TOP of the image/colored body (a bg wash would sit under it). Renders
+ *  nothing at rest, so it never tints the tile until pointed at. */
+function TileScrim({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) {
+  if (!hovered && !pressed) return null;
+  return <View style={[styles.tileScrim, pressed && styles.tileScrimPressed]} pointerEvents="none" />;
+}
+
+export function RemoveButton({ onPress, label = "Remove" }: { onPress: () => void; label?: string }) {
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
       e.stopPropagation();
@@ -345,9 +375,9 @@ export function RemoveButton({ onPress }: { onPress: () => void }) {
     [onPress],
   );
   return (
-    <Pressable onPress={handlePress} style={styles.removeButton}>
-      <Icon name="x" size={14} color={colors.zinc[700]} />
-    </Pressable>
+    <View style={styles.removeButtonAnchor}>
+      <IconButton icon="x" size="sm" elevated accessibilityLabel={label} onPress={handlePress} />
+    </View>
   );
 }
 
@@ -370,16 +400,53 @@ function SelectionOverlay({ selected }: { selected: boolean }) {
 
 const styles = StyleSheet.create({
   documentCard: {
-    borderRadius: 8,
+    borderRadius: 10,
     backgroundColor: colors.white,
     borderWidth: 1,
     borderColor: colors.zinc["200"],
     overflow: "hidden",
   },
-  documentCardBody: {
-    flex: 1,
+  documentTile: {
+    borderRadius: 10,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.zinc["200"],
+    overflow: "hidden",
+    alignItems: "center",
     justifyContent: "center",
-    padding: 10,
+    gap: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  documentTileName: {
+    alignSelf: "stretch",
+    textAlign: "center",
+  },
+  // Hover/press feedback: doc tiles darken their white bg (wash); image/media
+  // tiles get a `TileScrim` ON TOP (a bg wash would sit under the image/body).
+  tileHovered: {
+    backgroundColor: colors.zinc["50"],
+  },
+  tilePressed: {
+    backgroundColor: colors.zinc["100"],
+  },
+  tileScrim: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+    backgroundColor: "rgba(24, 24, 27, 0.06)",
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  tileScrimPressed: {
+    backgroundColor: "rgba(24, 24, 27, 0.12)",
+  },
+  // Compact media badges (≤32px) are too small for a scrim — a quick opacity dim reads.
+  pressedDim: {
+    opacity: 0.85,
   },
   mediaCardBody: {
     flex: 1,
@@ -387,7 +454,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   mediaCardCompact: {
-    borderRadius: 6,
+    borderRadius: 7,
     alignItems: "center",
     justifyContent: "center",
     overflow: "hidden",
@@ -397,14 +464,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: "rgba(255, 255, 255, 0.22)",
   },
-  placeholderLines: {
-    gap: 4,
-  },
-  placeholderLine: {
-    height: 2,
-    borderRadius: 1,
-    backgroundColor: colors.zinc["200"],
-  },
   documentCardFooter: {
     gap: 2,
     paddingHorizontal: 8,
@@ -427,25 +486,17 @@ const styles = StyleSheet.create({
     letterSpacing: 0.3,
   },
   imageThumbnail: {
-    borderRadius: 8,
+    borderRadius: 10,
     overflow: "hidden",
   },
   image: {
     width: "100%",
     height: "100%",
   },
-  removeButton: {
+  removeButtonAnchor: {
     position: "absolute",
-    top: -6,
-    right: -6,
-    width: 22,
-    height: 22,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.zinc["50"],
+    top: -8,
+    right: -8,
     zIndex: 1,
   },
   selectionOverlay: {
@@ -454,7 +505,7 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    borderRadius: 8,
+    borderRadius: 10,
     zIndex: 1,
   },
   selectionOverlaySelected: {