@lotics/ui 5.0.0 → 5.1.1

package/AGENTS.md

@@ -201,7 +201,12 @@ callbacks: `onFilePress` → set a `number|null` index that drives `<FileGallery
 activeIndex onIndexChange>` (built-in prev/next/ESC/rotate); `onRemove` → drop the file from state
 (the grid renders a ✕ on each thumbnail automatically). Keep label+grid+dropzone on a `gap` (a bare
 `CardBody` has none). `FileThumbnail` shows the right surface per MIME (image thumbnail · doc card ·
-media card). Never hand-build a drop well, a file row grid, or a preview modal.
+media card), and takes `uploading` to dim it with a spinner while the bytes are still going up.
+Never hand-build a drop well, a file row grid, or a preview modal. In a custom-code APP, don't
+hand-roll the upload+preview state either — `@lotics/app-sdk` `useAttachments()` gives the chat's
+instant-preview lifecycle (local object-URL now, `file_id` on complete); map each `AttachedFile` to a
+`DisplayFile` (snake → camel: `preview_url`→`url`, `mime_type`→`mimeType`) for
+`<FileThumbnail file={…} uploading={f.status === "uploading"} />`.
 
 ### Quick capture — the SPEED surface
 For fast repeat entry (logging activity, expenses), one compact capture row (a `SegmentedControl`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/file_thumbnail.tsx

@@ -3,6 +3,7 @@ import { fontFamilySemiBold } from "./text_utils";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { Checkbox } from "./checkbox";
+import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
 import { useCallback, useState } from "react";
 import {
@@ -66,6 +67,9 @@ interface FileThumbnailProps {
   onRemove?: () => void;
   /** When defined, renders a selection overlay with a checkbox. */
   selected?: boolean;
+  /** 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;
 }
 
 /**
@@ -73,7 +77,7 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading } = props;
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -82,6 +86,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
     return (
       <View style={rootStyle}>
         <ImageThumbnail file={file} size={size} onPress={onPress} onLongPress={onLongPress} />
+        {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
         {selected !== undefined && <SelectionOverlay selected={selected} />}
       </View>
@@ -99,6 +104,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
+        {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
       </View>
     );
@@ -124,12 +130,37 @@ export function FileThumbnail(props: FileThumbnailProps) {
           onLongPress={onLongPress}
         />
       )}
+      {uploading && <UploadingOverlay size={size} />}
       {onRemove && <RemoveButton onPress={onRemove} />}
       {selected !== undefined && <SelectionOverlay selected={selected} />}
     </View>
   );
 }
 
+/** A dim + spinner overlay shown while a file is still uploading. `pointerEvents`
+ *  none so the RemoveButton beneath it stays clickable (cancel an in-flight upload). */
+function UploadingOverlay({ size }: { size?: number }) {
+  return (
+    <View style={uploadingOverlayStyles.overlay} pointerEvents="none">
+      <ActivityIndicator size={size !== undefined && size <= COMPACT_THUMBNAIL_SIZE ? 12 : 18} color={colors.white} />
+    </View>
+  );
+}
+
+const uploadingOverlayStyles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(24,24,27,0.42)",
+    borderRadius: 8,
+  },
+});
+
 // =============================================================================
 // Base Components (exported for direct use when needed)
 // =============================================================================