@object-ui/fields 16.1.0 → 17.1.0

package/src/index.tsx

@@ -303,6 +303,8 @@ import { PercentField } from './widgets/PercentField';
 import { PasswordField } from './widgets/PasswordField';
 import { FileField } from './widgets/FileField';
 import { ImageField } from './widgets/ImageField';
+import { ImageLightbox } from './widgets/ImageLightbox';
+import { readFileValues } from './widgets/file-value';
 import { LocationField } from './widgets/LocationField';
 import { FormulaField } from './widgets/FormulaField';
 import { SummaryField } from './widgets/SummaryField';
@@ -506,7 +508,7 @@ function formatRelativeDays(diffDays: number, locale?: string): string {
 
 /**
  * Format date as relative time (e.g., "3 days ago", "Today", "Overdue 3d"),
- * localized via `Intl.RelativeTimeFormat` (objectstack-ai/framework#3040).
+ * localized via `Intl.RelativeTimeFormat` (objectstack-ai/objectstack#3040).
  *
  * `dueLike` gates the "Overdue" wording — a past `start_date`/`created_at`
  * isn't overdue, only a past due/deadline-semantic field is. Non-due-like
@@ -1268,50 +1270,88 @@ export function FileCellRenderer({ value, field }: CellRendererProps): React.Rea
 }
 
 /**
- * Image field cell renderer (with thumbnails)
+ * Image field cell renderer (with thumbnails + click-to-zoom).
+ *
+ * An image value may be a plain URL string, an object ({ url | src | href … }),
+ * a bare `sys_file` id, or an array of any of those. Normalising through
+ * `readFileValues` (which resolves a bare id to its stable download URL) means
+ * a string-URL field, a CDN link, and an unexpanded reference all render a
+ * thumbnail instead of a broken `<img src="">` placeholder.
+ *
+ * Clicking a thumbnail opens a full-screen lightbox (single or gallery). The
+ * click is `stopPropagation`-guarded so, inside a grid row, enlarging an image
+ * doesn't also trigger row navigation.
  */
 export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <EmptyValue />;
+  const { t } = useObjectTranslation();
+  const [lightboxIndex, setLightboxIndex] = React.useState<number | null>(null);
+
+  const imgs = React.useMemo(
+    () =>
+      readFileValues(value, 'Image')
+        .filter((v) => v.url)
+        .map((v) => ({ url: v.url as string, name: v.name })),
+    [value],
+  );
 
-  // An image value may be a plain URL string, an object ({ url | src | href }),
-  // or an array of either. Normalize so a string-URL field (common — e.g. a
-  // `cover` seeded with a CDN link) renders a thumbnail instead of a broken
-  // <img src=""> placeholder.
-  const urlOf = (v: any): string =>
-    typeof v === 'string' ? v : (v?.url || v?.src || v?.href || v?.thumbnailUrl || '');
-  const nameOf = (v: any, fallback: string): string =>
-    (v && typeof v === 'object' && (v.name || v.original_name)) || fallback;
+  if (!value || imgs.length === 0) return <EmptyValue />;
 
-  if (Array.isArray(value)) {
-    const imgs = value.map((v) => ({ url: urlOf(v), name: nameOf(v, 'Image') })).filter((i) => i.url);
-    if (imgs.length === 0) return <EmptyValue />;
+  const imageAlt = (idx: number, name?: string) =>
+    name || t('fields.image.imageAlt', { index: idx + 1 });
+  const open = (idx: number) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLightboxIndex(idx);
+  };
+  const multiple = imgs.length > 1;
+
+  const lightbox = lightboxIndex !== null && (
+    <ImageLightbox
+      images={imgs}
+      index={lightboxIndex}
+      open
+      onOpenChange={(o) => !o && setLightboxIndex(null)}
+      onIndexChange={setLightboxIndex}
+    />
+  );
+
+  if (multiple) {
     return (
-      <div className="flex -space-x-2">
-        {imgs.slice(0, 3).map((img, idx) => (
-          <img
-            key={idx}
-            src={img.url}
-            alt={img.name || `Image ${idx + 1}`}
-            className="size-8 rounded-md border-2 border-white object-cover"
-          />
-        ))}
-        {imgs.length > 3 && (
-          <div className="size-8 rounded-md border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">
-            +{imgs.length - 3}
-          </div>
-        )}
-      </div>
+      <>
+        <div className="flex -space-x-2">
+          {imgs.slice(0, 3).map((img, idx) => (
+            <img
+              key={idx}
+              src={img.url}
+              alt={imageAlt(idx, img.name)}
+              onClick={open(idx)}
+              className="size-8 cursor-zoom-in rounded-md border-2 border-background object-cover transition-transform hover:scale-110 hover:z-10"
+            />
+          ))}
+          {imgs.length > 3 && (
+            <button
+              type="button"
+              onClick={open(3)}
+              className="size-8 rounded-md border-2 border-background bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground hover:bg-muted/80"
+            >
+              +{imgs.length - 3}
+            </button>
+          )}
+        </div>
+        {lightbox}
+      </>
     );
   }
 
-  const url = urlOf(value);
-  if (!url) return <EmptyValue />;
   return (
-    <img
-      src={url}
-      alt={nameOf(value, 'Image')}
-      className="size-10 rounded-md object-cover"
-    />
+    <>
+      <img
+        src={imgs[0].url}
+        alt={imageAlt(0, imgs[0].name)}
+        onClick={open(0)}
+        className="size-10 cursor-zoom-in rounded-md object-cover transition-transform hover:scale-105"
+      />
+      {lightbox}
+    </>
   );
 }
 
@@ -1823,98 +1863,10 @@ setCellRendererResolver(getCellRenderer);
 
 
 
-/**
- * Map field type to form component type
- * 
- * @param fieldType - The ObjectQL field type identifier to convert
- * (for example: `"text"`, `"number"`, `"date"`, `"lookup"`).
- * @returns The normalized form field type string used in the form schema
- * (for example: `"input"`, `"textarea"`, `"date-picker"`, `"select"`).
- */
-export function mapFieldTypeToFormType(fieldType: string): string {
-  const typeMap: Record<string, string> = {
-    // Text-based fields
-    text: 'field:text',
-    textarea: 'field:textarea',
-    markdown: 'field:markdown', // Markdown editor (fallback to textarea)
-    html: 'field:html', // Rich text editor (fallback to textarea)
-    richtext: 'field:richtext', // WYSIWYG rich-text editor
-    secret: 'field:password', // encrypted-at-rest value — mask input like a password
-
-    // Numeric fields
-    number: 'field:number',
-    currency: 'field:currency',
-    percent: 'field:percent',
-    slider: 'field:slider',
-    progress: 'field:slider', // bounded 0..100 progress — edit via slider
-    rating: 'field:rating',
-
-    // Date/Time fields
-    date: 'field:date',
-    datetime: 'field:datetime',
-    time: 'field:time',
-
-    // Boolean
-    boolean: 'field:boolean',
-    toggle: 'field:boolean', // toggle is a boolean rendered as a switch
-
-    // Selection fields
-    select: 'field:select',
-    multiselect: 'field:multiselect',
-    radio: 'field:radio',
-    checkboxes: 'field:checkboxes',
-    tags: 'field:tags',
-    lookup: 'field:lookup',
-    master_detail: 'field:master_detail',
-    tree: 'field:lookup', // hierarchical reference — pick the parent via a lookup
-    // `user` is a lookup specialized to sys_user; `owner` mirrors it (record
-    // ownership). Both render via the UserField person-picker (delegates to the
-    // lookup picker). Without these they would fall through to `field:text`.
-    user: 'field:user',
-    owner: 'field:owner',
-
-    // Contact fields
-    email: 'field:email',
-    phone: 'field:phone',
-    url: 'field:url',
-
-    // File / media fields
-    file: 'field:file',
-    image: 'field:image',
-    avatar: 'field:avatar',
-    video: 'field:file', // uploads as a file
-    audio: 'field:file', // uploads as a file
-    signature: 'field:signature',
-
-    // Special / enhanced fields
-    password: 'field:password',
-    location: 'field:location', // Location/map field (fallback to input)
-    geolocation: 'field:geolocation',
-    address: 'field:address',
-    color: 'field:color',
-    code: 'field:code',
-    json: 'field:code', // JSON edited in the code editor
-    qrcode: 'field:qrcode',
-    vector: 'field:vector',
-
-    // Embedded structured values (stored as JSON on the row)
-    object: 'field:object',
-    composite: 'field:object', // embedded object
-    record: 'field:object', // name-keyed map
-    repeater: 'field:grid', // embedded array of rows
-
-    // Auto-generated/computed fields (typically read-only)
-    formula: 'field:formula',
-    summary: 'field:summary',
-    // `@objectstack/spec` spells this `autonumber`; the widget map key is
-    // `auto_number`. Map both spellings so a spec-typed field/param doesn't
-    // fall through to the plain text input.
-    autonumber: 'field:auto_number',
-    auto_number: 'field:auto_number',
-  };
-
-  return typeMap[fieldType] || 'field:text';
-}
+// `mapFieldTypeToFormType` moved to './field-type-alias' (re-exported below) so
+// FieldEditWidget can resolve spec aliases without importing this barrel.
+export { mapFieldTypeToFormType } from './field-type-alias';
+import { mapFieldTypeToFormType } from './field-type-alias';
 
 /**
  * Formats file size in bytes to human-readable string
@@ -1966,18 +1918,23 @@ export function buildValidationRules(field: any): any {
   // vars); a field-authored `*_message` is a string and passes through as-is,
   // still winning over the localized default. See form.tsx `localizeRule`.
 
-  // Length validation for text fields
-  if (field.min_length) {
+  // Length validation for text fields. The spec-canonical keys are camelCase
+  // (`minLength`/`maxLength`, @objectstack/spec FieldSchema — what the server
+  // record-validator enforces); the snake_case pair is the legacy objectui
+  // spelling, kept as fallback (framework#1878/#1891 naming-drift closeout).
+  const minLength = (field as any).minLength ?? field.min_length;
+  if (minLength) {
     rules.minLength = {
-      value: field.min_length,
+      value: minLength,
       message: typeof field.min_length_message === 'string' ? field.min_length_message : undefined,
       messageKey: 'validation.minLength',
     };
   }
 
-  if (field.max_length) {
+  const maxLength = (field as any).maxLength ?? field.max_length;
+  if (maxLength) {
     rules.maxLength = {
-      value: field.max_length,
+      value: maxLength,
       message: typeof field.max_length_message === 'string' ? field.max_length_message : undefined,
       messageKey: 'validation.maxLength',
     };
@@ -2438,6 +2395,10 @@ export function registerFields() {
 }
 
 export * from './widgets/types';
+// File field value shapes (ObjectStack ADR-0104 D3 wave 2) — the single
+// arbiter of reference vs expanded vs legacy-blob form, shared by the upload
+// widgets and by action-param serialization.
+export * from './widgets/file-value';
 export * from './FieldEditWidget';
 export * from './widgets/TextField';
 export * from './widgets/NumberField';

package/src/widgets/CheckboxesField.tsx

@@ -97,15 +97,18 @@ export function CheckboxesField({
       data-testid={fieldName ? `checkboxes-${fieldName}` : undefined}
     >
       {options.map((opt) => {
-        const id = `${groupId}-${opt.value}`;
+        // Multi-value fields store string arrays — stringify the (possibly
+        // numeric, #3090-widened) authored value at this boundary.
+        const value = String(opt.value);
+        const id = `${groupId}-${value}`;
         return (
-          <div key={opt.value} className="flex items-center space-x-2 py-0.5">
+          <div key={value} className="flex items-center space-x-2 py-0.5">
             <Checkbox
               id={id}
-              checked={selected.includes(opt.value)}
-              onCheckedChange={(checked) => toggle(opt.value, !!checked)}
+              checked={selected.includes(value)}
+              onCheckedChange={(checked) => toggle(value, !!checked)}
               disabled={(props as any).disabled}
-              data-testid={`checkboxes-option-${opt.value}`}
+              data-testid={`checkboxes-option-${value}`}
             />
             <Label htmlFor={id} className="font-normal">{opt.label}</Label>
           </div>

package/src/widgets/FileField.tsx

@@ -1,9 +1,18 @@
 import React, { useRef, useState, useCallback } from 'react';
 import { Button, EmptyValue } from '@object-ui/components';
 import { useUpload } from '@object-ui/providers';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 import { useUploadingSignal } from './useUploadingSignal';
+import {
+  fileValueForSubmit,
+  readFileValues,
+  uploadResultView,
+  withRecentUploads,
+  isImageValue,
+  type FileValueView,
+} from './file-value';
 
 /**
  * Shared upload pipeline for the file widgets: validates size, uploads through
@@ -11,6 +20,13 @@ import { useUploadingSignal } from './useUploadingSignal';
  * into the field value — append for `multiple`, replace otherwise. Extracted so
  * the full-size FileField and the compact grid-cell {@link FileCell} stay
  * behaviourally identical (same value shape, same error handling).
+ *
+ * Stores the **reference form** — a bare `sys_file` id — when the upload
+ * adapter surfaced one, and the legacy inline blob when it did not, so the same
+ * build works against a backend that has adopted file-as-reference and one that
+ * has not (see `file-value`). Because a bare id carries no name or URL, each
+ * completed upload's display details are kept in `recent`, keyed by id, so the
+ * file renders immediately instead of as a bare token until a read enriches it.
  */
 function useFileUploads(opts: {
   files: any[];
@@ -20,9 +36,11 @@ function useFileUploads(opts: {
 }) {
   const { files, multiple, maxSize, onChange } = opts;
   const { upload } = useUpload();
+  const { t } = useObjectTranslation();
   const [errors, setErrors] = useState<string[]>([]);
   const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
   const [uploading, setUploading] = useState(false);
+  const [recent, setRecent] = useState<Record<string, FileValueView>>({});
 
   const processFiles = useCallback(async (selectedFiles: File[]) => {
     if (selectedFiles.length === 0) return;
@@ -31,7 +49,10 @@ function useFileUploads(opts: {
     const validFiles = selectedFiles.filter(file => {
       if (maxSize && file.size > maxSize) {
         const maxMB = (maxSize / (1024 * 1024)).toFixed(1);
-        newErrors.push(`"${file.name}" exceeds max size (${maxMB} MB)`);
+        newErrors.push(t('fields.file.exceedsMaxSize', {
+          defaultValue: `"${file.name}" exceeds max size (${maxMB} MB)`,
+          name: file.name, max: maxMB,
+        }));
         return false;
       }
       return true;
@@ -42,48 +63,51 @@ function useFileUploads(opts: {
 
     setUploading(true);
     try {
-      const fileObjects = await Promise.all(
+      const uploaded = await Promise.all(
         validFiles.map(async (file) => {
           try {
             const result = await upload(file, {
               onProgress: (ratio) =>
                 setUploadProgress((prev) => ({ ...prev, [file.name]: ratio })),
             });
-            return {
-              // `file_id` is the storage id the backend keys attachments by
-              // (the adapter returns it as `meta.fileId`); surfacing it here
-              // lets callers that need the id — e.g. an action param POSTing
-              // `attachments: string[]` — recover it without a second lookup.
-              // Extra key; the record file-field value shape is unchanged.
-              file_id: (result.meta as { fileId?: string } | undefined)?.fileId,
-              name: result.name,
-              original_name: file.name,
-              size: result.size,
-              mime_type: result.mimeType,
-              url: result.url,
-            };
+            return { result, originalName: file.name };
           } catch (err) {
-            newErrors.push(`Failed to upload "${file.name}": ${(err as Error).message}`);
+            newErrors.push(t('fields.file.uploadFailed', {
+              defaultValue: `Failed to upload "${file.name}": ${(err as Error).message}`,
+              name: file.name, error: (err as Error).message,
+            }));
             setErrors([...newErrors]);
             return null;
           }
         }),
       );
-      const successful = fileObjects.filter(Boolean) as any[];
+      const successful = uploaded.filter(Boolean) as Array<{ result: any; originalName: string }>;
       if (successful.length === 0) return;
 
+      // Remember what each new id looks like so it can render before the next
+      // read expands it back into `{ id, name, size, mimeType, url }`.
+      const views: Record<string, FileValueView> = {};
+      for (const { result, originalName } of successful) {
+        const view = uploadResultView(result, originalName);
+        if (view.id) views[view.id] = view;
+      }
+      if (Object.keys(views).length > 0) setRecent((prev) => ({ ...prev, ...views }));
+
+      const nextValues = successful.map(({ result, originalName }) =>
+        fileValueForSubmit(result, originalName),
+      );
       if (multiple) {
-        onChange([...files, ...successful]);
+        onChange([...files, ...nextValues]);
       } else {
-        onChange(successful[0]);
+        onChange(nextValues[0]);
       }
     } finally {
       setUploading(false);
       setUploadProgress({});
     }
-  }, [files, multiple, onChange, maxSize, upload]);
+  }, [files, multiple, onChange, maxSize, upload, t]);
 
-  return { processFiles, errors, uploading, uploadProgress };
+  return { processFiles, errors, uploading, uploadProgress, recent };
 }
 
 /**
@@ -92,6 +116,7 @@ function useFileUploads(opts: {
  * L2: File size validation, per-file progress indicators, error messages.
  */
 export function FileField({ value, onChange, field, readonly, onUploadingChange, ...props }: FieldWidgetProps<any>) {
+  const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const cameraRef = useRef<HTMLInputElement>(null);
   const fileField = (field || (props as any).schema) as any;
@@ -115,9 +140,13 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
   const [isDragOver, setIsDragOver] = useState(false);
 
   const files = value ? (Array.isArray(value) ? value : [value]) : [];
-  const { processFiles, errors, uploading, uploadProgress } = useFileUploads({
+  const { processFiles, errors, uploading, uploadProgress, recent } = useFileUploads({
     files, multiple, maxSize, onChange,
   });
+  const fallbackName = t('fields.file.fileFallback', { defaultValue: 'File' });
+  // Normalised for display: accepts a bare reference id, the expanded
+  // `{ id, name, size, mimeType, url }`, or a legacy inline blob.
+  const views = withRecentUploads(readFileValues(value, fallbackName), recent);
   useUploadingSignal(uploading, onUploadingChange);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -155,13 +184,12 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
 
   if (readonly) {
     if (!value) return <EmptyValue />;
-    
-    const readonlyFiles = Array.isArray(value) ? value : [value];
+
     return (
       <div className="flex flex-wrap gap-2">
-        {readonlyFiles.map((file: any, idx: number) => (
+        {views.map((file, idx) => (
           <span key={idx} className="text-sm truncate max-w-xs">
-            {file.name || file.original_name || 'File'}
+            {file.name}
           </span>
         ))}
       </div>
@@ -181,11 +209,6 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
     }
   };
 
-  const isImage = (file: any) => {
-    const mime = file.mime_type || '';
-    return mime.startsWith('image/');
-  };
-
   return (
     <div className={props.className}>
       <input
@@ -204,7 +227,7 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
           capture={cameraEnabled}
           onChange={handleFileChange}
           className="hidden"
-          aria-label="Camera capture"
+          aria-label={t('fields.file.cameraCapture', { defaultValue: 'Camera capture' })}
           data-testid="file-field-camera-input"
         />
       )}
@@ -236,10 +259,14 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
           <Upload className={`size-8 ${isDragOver ? 'text-primary' : 'text-muted-foreground'}`} />
           <div className="text-center">
             <p className="text-sm font-medium">
-              {isDragOver ? 'Drop files here' : 'Drag & drop files here'}
+              {isDragOver
+                ? t('fields.file.dropFilesHere', { defaultValue: 'Drop files here' })
+                : t('fields.file.dragDropHere', { defaultValue: 'Drag & drop files here' })}
             </p>
             <p className="text-xs text-muted-foreground mt-1">
-              or click to browse{cameraEnabled ? ' • use the camera button below' : ''}
+              {cameraEnabled
+                ? t('fields.file.browseHintCamera', { defaultValue: 'or click to browse • use the camera button below' })
+                : t('fields.file.browseHint', { defaultValue: 'or click to browse' })}
             </p>
           </div>
         </div>
@@ -257,7 +284,9 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
             data-testid="file-field-camera-button"
           >
             <Camera className="size-4 mr-2" />
-            {cameraEnabled === 'user' ? 'Take selfie' : 'Take photo'}
+            {cameraEnabled === 'user'
+              ? t('fields.file.takeSelfie', { defaultValue: 'Take selfie' })
+              : t('fields.file.takePhoto', { defaultValue: 'Take photo' })}
           </Button>
         )}
 
@@ -266,12 +295,14 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
           <div className="flex items-center gap-2 text-xs text-muted-foreground" data-testid="file-field-uploading">
             <Loader2 className="size-3 animate-spin" />
             <span>
-              Uploading…
-              {Object.keys(uploadProgress).length > 0 &&
-                ` (${Math.round(
-                  (Object.values(uploadProgress).reduce((s, v) => s + v, 0) /
-                    Object.keys(uploadProgress).length) * 100,
-                )}%)`}
+              {(() => {
+                const keys = Object.keys(uploadProgress);
+                if (keys.length === 0) return t('fields.file.uploading', { defaultValue: 'Uploading…' });
+                const pct = Math.round(
+                  (Object.values(uploadProgress).reduce((s, v) => s + v, 0) / keys.length) * 100,
+                );
+                return t('fields.file.uploadingPct', { defaultValue: `Uploading… (${pct}%)`, pct });
+              })()}
             </span>
           </div>
         )}
@@ -286,23 +317,23 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
         )}
 
         {/* File list */}
-        {files.length > 0 && (
+        {views.length > 0 && (
           <div className="space-y-1">
-            {files.map((file: any, idx: number) => (
+            {views.map((file, idx) => (
               <div
                 key={idx}
                 className="flex items-center justify-between gap-2 p-2 bg-muted/50 rounded-md border"
               >
                 <div className="flex items-center gap-2 flex-1 min-w-0">
-                  {isImage(file) && file.url ? (
+                  {isImageValue(file) && file.url ? (
                     <img src={file.url} alt={file.name} className="size-8 object-cover rounded shrink-0" />
-                  ) : isImage(file) ? (
+                  ) : isImageValue(file) ? (
                     <ImageIcon className="size-4 text-muted-foreground shrink-0" />
                   ) : (
                     <FileIcon className="size-4 text-muted-foreground shrink-0" />
                   )}
                   <span className="text-sm truncate">
-                    {file.name || file.original_name || 'File'}
+                    {file.name}
                   </span>
                   {file.size && (
                     <span className="text-xs text-muted-foreground">
@@ -362,11 +393,14 @@ export function FileCell({
   /** Focus-grid coordinate (see GridField keyboard navigation). */
   'data-cell'?: string;
 }) {
+  const { t } = useObjectTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const files = value ? (Array.isArray(value) ? value : [value]) : [];
-  const { processFiles, errors, uploading } = useFileUploads({
+  const { processFiles, errors, uploading, recent } = useFileUploads({
     files, multiple: !!multiple, maxSize, onChange,
   });
+  const fallbackName = t('fields.file.fileFallback', { defaultValue: 'File' });
+  const views = withRecentUploads(readFileValues(value, fallbackName), recent);
 
   const removeAt = (index: number) => {
     if (multiple) {
@@ -377,9 +411,6 @@ export function FileCell({
     }
   };
 
-  const isImage = (file: any) => String(file?.mime_type || '').startsWith('image/');
-  const nameOf = (file: any) =>
-    typeof file === 'string' ? file : file?.name || file?.original_name || 'File';
   const showUpload = !disabled && !uploading && (multiple || files.length === 0);
 
   return (
@@ -395,24 +426,24 @@ export function FileCell({
         }}
         className="hidden"
       />
-      {files.map((file: any, idx: number) => (
+      {views.map((file, idx) => (
         <span
           key={idx}
           className="inline-flex max-w-40 items-center gap-1 rounded border bg-muted/50 px-1 py-0.5 text-xs"
-          title={nameOf(file)}
+          title={file.name}
           data-testid="file-cell-chip"
         >
-          {isImage(file) && file.url ? (
-            <img src={file.url} alt={nameOf(file)} className="size-5 shrink-0 rounded object-cover" />
+          {isImageValue(file) && file.url ? (
+            <img src={file.url} alt={file.name} className="size-5 shrink-0 rounded object-cover" />
           ) : (
             <FileIcon className="size-3 shrink-0 text-muted-foreground" />
           )}
-          <span className="truncate">{nameOf(file)}</span>
+          <span className="truncate">{file.name}</span>
           {!disabled && (
             <button
               type="button"
               className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground"
-              aria-label={`Remove ${nameOf(file)}`}
+              aria-label={t('fields.file.remove', { defaultValue: `Remove ${file.name}`, name: file.name })}
               onClick={() => removeAt(idx)}
             >
               <X className="size-3" />
@@ -440,7 +471,7 @@ export function FileCell({
           disabled={disabled}
         >
           <Upload className="size-3.5" />
-          {files.length === 0 && 'Upload'}
+          {files.length === 0 && t('fields.file.upload', { defaultValue: 'Upload' })}
         </Button>
       )}
       {errors.length > 0 && (