@asteby/metacore-runtime-react 34.0.1 → 34.1.0

package/src/display-value.tsx

@@ -78,24 +78,102 @@ export const RelationThumbnail: React.FC<{
     size?: number
 }> = ({ src, alt, getImageUrl, size = 20 }) => (
     <Avatar
-        className="shrink-0 rounded-md bg-muted/50 p-[3px] ring-1 ring-border/40"
+        className="shrink-0 rounded-md"
         style={{ width: size, height: size }}
     >
         {/* object-contain: brand logos are typically wide/rectangular, so
             object-cover (fills the square, cropping the sides) was cutting
-            them off. contain lets the whole mark show, letterboxed by the
-            padded neutral background above instead of clipped. */}
+            them off. contain shows the whole mark without a padded plate. */}
         <AvatarImage
             src={getImageUrl ? getImageUrl(src) : src}
             alt={alt}
             className="object-contain"
         />
-        <AvatarFallback className="rounded-md bg-primary/10 text-[8px] font-bold text-primary">
+        <AvatarFallback className="rounded-md bg-transparent text-[8px] font-bold text-muted-foreground">
             {getInitials(alt)}
         </AvatarFallback>
     </Avatar>
 )
 
+/**
+ * Landscape-friendly identity block: wide image ON TOP, label (and optional
+ * subtitle) UNDERNEATH. Use for brand logos, product photos and any mark that
+ * is wider than it is tall — a square thumb next to text crops logos and
+ * wastes the cell. Declared via `display: "image_stack"` on a column (image
+ * URL or FK relation with a logo/photo sibling).
+ *
+ * No padded card / muted plate behind the mark — that ate table row height.
+ * The image is sized with max-width/max-height and `object-contain` only.
+ *
+ * Sizes (CSS, not Tailwind arbitrary — host safelists vary):
+ *   sm — compact table (~88×32)
+ *   md — default table (~112×40)
+ *   lg — detail/modal (~180×72)
+ */
+export const ImageStack: React.FC<{
+    src?: string | null
+    label?: string | null
+    subtitle?: string | null
+    getImageUrl?: (path: string) => string
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+}> = ({ src, label, subtitle, getImageUrl, size = 'md', className }) => {
+    const dims =
+        size === 'lg'
+            ? { w: 180, h: 72, text: 'text-sm' }
+            : size === 'sm'
+              ? { w: 88, h: 32, text: 'text-[11px]' }
+              : { w: 112, h: 40, text: 'text-xs' }
+    const alt = label || ''
+    const resolved = src
+        ? getImageUrl
+            ? getImageUrl(src)
+            : src
+        : undefined
+    const [broken, setBroken] = React.useState(false)
+    React.useEffect(() => {
+        setBroken(false)
+    }, [resolved])
+
+    return (
+        <span
+            className={`inline-flex max-w-[220px] flex-col items-start gap-0.5 ${className ?? ''}`}
+            title={subtitle ? `${alt} · ${subtitle}` : alt || undefined}
+        >
+            {resolved && !broken ? (
+                <img
+                    src={resolved}
+                    alt={alt}
+                    className="block object-contain"
+                    style={{ maxWidth: dims.w, maxHeight: dims.h, width: 'auto', height: 'auto' }}
+                    onError={() => setBroken(true)}
+                />
+            ) : (
+                <span
+                    className="flex items-center text-[10px] font-semibold tracking-wide text-muted-foreground"
+                    style={{ minHeight: Math.round(dims.h * 0.55) }}
+                >
+                    {getInitials(alt || '?')}
+                </span>
+            )}
+            {(label || subtitle) && (
+                <span className={`flex w-full min-w-0 flex-col items-start leading-tight ${dims.text}`}>
+                    {label ? (
+                        <span className="w-full truncate text-left font-medium text-foreground/90">
+                            {label}
+                        </span>
+                    ) : null}
+                    {subtitle ? (
+                        <span className="w-full truncate text-left text-[0.7em] text-muted-foreground">
+                            {subtitle}
+                        </span>
+                    ) : null}
+                </span>
+            )}
+        </span>
+    )
+}
+
 export interface DisplayOption {
     value: string
     label: string

package/src/dynamic-columns.tsx

@@ -44,7 +44,7 @@ import {
 import { Progress } from './dialogs/_primitives'
 import { humanizeToken } from './dynamic-columns-helpers'
 import { objectLabel } from './dynamic-relation-helpers'
-import {
+import { ImageStack,
     OptionBadge,
     RelationThumbnail,
     statusColorFor,
@@ -494,7 +494,7 @@ export const resolveRelationLabel = (col: ColumnDefinition, row: any): string =>
 export const resolveRelationImage = (col: ColumnDefinition, row: any): string => {
     const sibling = getNestedValue(row, relationKeyFor(col))
     if (sibling && typeof sibling === 'object') {
-        const img = sibling.image ?? sibling.avatar ?? sibling.photo
+        const img = sibling.image ?? sibling.avatar ?? sibling.photo ?? sibling.logo ?? sibling.thumbnail
         if (img !== undefined && img !== null && img !== '') return String(img)
     }
     return ''
@@ -608,11 +608,24 @@ const RelationCell: React.FC<{
     col: ColumnDefinition
     row: any
     getImageUrl?: (path: string) => string
-}> = ({ col, row, getImageUrl }) => {
+    /** Landscape stack: image above, text below (display: image_stack). */
+    stack?: boolean
+}> = ({ col, row, getImageUrl, stack = false }) => {
     const display = resolveRelationLabel(col, row)
     if (!display) return <EmptyCell />
     const image = resolveRelationImage(col, row)
     const subtitle = resolveRelationSubtitle(col, row)
+    if (stack) {
+        return (
+            <ImageStack
+                src={image || undefined}
+                label={display}
+                subtitle={subtitle || undefined}
+                getImageUrl={getImageUrl}
+                size="md"
+            />
+        )
+    }
     // FLAT reference cell: no tinted capsule around the pair. A reference is
     // data, not a status — the pill treatment (and its per-label tint) made a
     // products/warehouses listing read as a wall of badges. What identifies the
@@ -751,15 +764,29 @@ const AvatarCell: React.FC<{
 export const ImageCell: React.FC<{
     value: unknown
     getImageUrl: (path: string) => string
-}> = ({ value, getImageUrl }) => {
-    if (!value) return <span className="text-muted-foreground">-</span>
-    if (isLucideIconName(value)) {
+    /** Optional caption under the image (display: image_stack). */
+    label?: string
+    stack?: boolean
+}> = ({ value, getImageUrl, label, stack = false }) => {
+    if (!value && !label) return <span className="text-muted-foreground">-</span>
+    if (value && isLucideIconName(value)) {
         return (
             <div className="h-10 w-10 flex items-center justify-center rounded bg-muted">
                 <DynamicIcon name={value} className="h-5 w-5" />
             </div>
         )
     }
+    if (stack) {
+        return (
+            <ImageStack
+                src={value ? String(value) : undefined}
+                label={label}
+                getImageUrl={getImageUrl}
+                size="md"
+            />
+        )
+    }
+    if (!value) return <span className="text-muted-foreground">-</span>
     return (
         <div className="h-10 w-10 relative rounded overflow-hidden bg-muted flex items-center justify-center">
             <img
@@ -916,6 +943,37 @@ export function makeDefaultGetDynamicColumns(
                         return <ReferenceCell col={col} row={row.original} />
                     }
 
+                    // Landscape stack: wide image ON TOP, label UNDERNEATH.
+                    if (renderAs === 'image_stack') {
+                        const looksRelation =
+                            !!col.ref ||
+                            (typeof col.key === 'string' &&
+                                col.key.endsWith('_id') &&
+                                resolveRelationLabel(col, row.original) != null)
+                        if (looksRelation) {
+                            return (
+                                <RelationCell
+                                    col={col}
+                                    row={row.original}
+                                    getImageUrl={getImageUrl}
+                                    stack
+                                />
+                            )
+                        }
+                        const labelField = styleCfg(col, 'label_field', 'labelField')
+                        const caption = labelField
+                            ? String(getNestedValue(row.original, labelField) ?? '')
+                            : undefined
+                        return (
+                            <ImageCell
+                                value={value}
+                                getImageUrl={getImageUrl}
+                                label={caption || undefined}
+                                stack
+                            />
+                        )
+                    }
+
                     // Resolved FK relation chip. Triggers on an explicit
                     // `cellStyle: 'relation'` or on any column carrying a `ref`
                     // (a belongs_to FK) that isn't being rendered as an
@@ -1274,6 +1332,21 @@ export function makeDefaultGetDynamicColumns(
                             )
                         }
 
+                        case 'image_stack': {
+                            const imageValue =
+                                value ||
+                                (Array.isArray(row.original.media)
+                                    ? row.original.media.find((m: any) => m.type === 'image')?.url
+                                    : null)
+                            return (
+                                <ImageCell
+                                    value={imageValue}
+                                    getImageUrl={getImageUrl}
+                                    stack
+                                />
+                            )
+                        }
+
                         case 'image': {
                             const imageValue =
                                 value ||

package/src/dynamic-select-field.tsx

@@ -40,6 +40,7 @@ import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react'
 import { resolveColorCss } from '@asteby/metacore-ui/lib'
 import { BarcodeScanner } from './barcode-scanner'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
+import { useDebouncedValue } from './use-debounced-value'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { getDependsOn, getFieldRef, resolveOptionsSource } from './dynamic-form-schema'
 import type { ActionFieldDef } from './types'
@@ -140,12 +141,7 @@ export function OptionLead({
 }
 
 function useDebounced<T>(value: T, ms: number): T {
-    const [debounced, setDebounced] = useState(value)
-    useEffect(() => {
-        const t = setTimeout(() => setDebounced(value), ms)
-        return () => clearTimeout(t)
-    }, [value, ms])
-    return debounced
+    return useDebouncedValue(value, ms)
 }
 
 export interface DynamicSelectFieldProps {

package/src/dynamic-table.tsx

@@ -72,6 +72,7 @@ import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
 import { getSearchableColumnKeys } from './column-visibility'
+import { useDebouncedValue } from './use-debounced-value'
 import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-context'
 import { useDynamicRowActions } from './dynamic-row-actions'
 import { ExportDialog } from './dialogs/export'
@@ -320,6 +321,8 @@ export function DynamicTable({
         pageSize: storedPageSizeRef.current ?? 10,
     })
     const [globalFilter, setGlobalFilter] = useState('')
+    // Debounce search → URL + fetch so each keystroke does not thrash the server.
+    const debouncedGlobalFilter = useDebouncedValue(globalFilter)
     const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0)
 
     const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
@@ -474,7 +477,7 @@ export function DynamicTable({
             params.set('sortBy', sorting[0].id)
             params.set('order', sorting[0].desc ? 'desc' : 'asc')
         }
-        if (globalFilter) params.set('search', globalFilter)
+        if (debouncedGlobalFilter) params.set('search', debouncedGlobalFilter)
         Object.entries(dynamicFilters).forEach(([key, values]) => {
             if (values.length === 0) return
             if (defaultFilters && key in defaultFilters) return
@@ -495,7 +498,7 @@ export function DynamicTable({
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname
         lastSelfSearch.current = search ? `?${search}` : ''
         window.history.replaceState(null, '', newUrl)
-    }, [enableUrlSync, urlSynced, pagination, sorting, globalFilter, dynamicFilters, defaultFilters])
+    }, [enableUrlSync, urlSynced, pagination, sorting, debouncedGlobalFilter, dynamicFilters, defaultFilters])
 
     // The host router can rewrite the query string WITHOUT remounting the
     // table — e.g. sidebar sibling entries deep-link different `f_` filters
@@ -670,11 +673,11 @@ export function DynamicTable({
             params.sortBy = sorting[0].id
             params.order = sorting[0].desc ? 'desc' : 'asc'
         }
-        if (globalFilter) {
+        if (debouncedGlobalFilter) {
             if (searchableKeys === null) {
-                params.search = globalFilter
+                params.search = debouncedGlobalFilter
             } else if (searchableKeys.length > 0) {
-                params.search = globalFilter
+                params.search = debouncedGlobalFilter
                 params.search_columns = searchableKeys.join(',')
             }
             // searchableKeys === [] → drop the search request entirely
@@ -700,7 +703,7 @@ export function DynamicTable({
             params['f_created_at'] = `${startDate}_${endDate}`
         }
         return params
-    }, [sorting, globalFilter, columnFilters, defaultFilters, dynamicFilters, dateRange, searchableKeys])
+    }, [sorting, debouncedGlobalFilter, columnFilters, defaultFilters, dynamicFilters, dateRange, searchableKeys])
 
     const hasActiveFilters = useMemo(() => {
         if (globalFilter) return true

package/src/file-pick-button.tsx

@@ -0,0 +1,125 @@
+// FilePickButton — locale-aware file picker. Native <input type="file"> always
+// paints the browser/OS chrome ("Choose File" / "No file chosen") in the
+// *browser* language, not the app language — so Spanish UIs on an English
+// Chrome show English. Hide the native control and drive it from a Button
+// whose labels come from i18n (common.upload.*).
+import { useCallback, useId, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@asteby/metacore-ui/primitives'
+import { Loader2, Paperclip, X } from 'lucide-react'
+
+export interface FilePickButtonProps {
+    /** Called with the picked File, or null when cleared. */
+    onFile: (file: File | null) => void
+    accept?: string
+    /** HTML capture attribute (e.g. "environment" for rear camera). */
+    capture?: boolean | 'user' | 'environment'
+    disabled?: boolean
+    loading?: boolean
+    /** When true, shows replace + clear affordances. */
+    hasFile?: boolean
+    /** Optional display name next to the button when hasFile. */
+    fileName?: string
+    className?: string
+    /** Override the empty-state pick label (still falls back to i18n). */
+    pickLabel?: string
+    replaceLabel?: string
+    clearLabel?: string
+    id?: string
+}
+
+export function FilePickButton({
+    onFile,
+    accept,
+    capture,
+    disabled,
+    loading,
+    hasFile,
+    fileName,
+    className,
+    pickLabel,
+    replaceLabel,
+    clearLabel,
+    id: idProp,
+}: FilePickButtonProps) {
+    const { t } = useTranslation()
+    const autoId = useId()
+    const id = idProp || autoId
+    const inputRef = useRef<HTMLInputElement | null>(null)
+    const busy = Boolean(disabled || loading)
+
+    const pick = useCallback(() => {
+        if (busy) return
+        inputRef.current?.click()
+    }, [busy])
+
+    const onChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const file = e.target.files?.[0] ?? null
+            if (inputRef.current) inputRef.current.value = ''
+            if (file) onFile(file)
+        },
+        [onFile],
+    )
+
+    const onClear = useCallback(() => {
+        if (busy) return
+        onFile(null)
+    }, [busy, onFile])
+
+    const emptyLabel =
+        pickLabel || t('common.upload.choose', { defaultValue: 'Choose file' })
+    const filledLabel =
+        replaceLabel || t('common.upload.replace', { defaultValue: 'Replace' })
+    const removeLabel =
+        clearLabel || t('common.upload.remove', { defaultValue: 'Remove file' })
+    const emptyHint = t('common.upload.none', { defaultValue: 'No file chosen' })
+
+    return (
+        <div className={className ? `grid gap-1.5 ${className}` : 'grid gap-1.5'} data-widget="file-pick">
+            <input
+                ref={inputRef}
+                id={id}
+                type="file"
+                accept={accept}
+                {...(capture !== undefined ? { capture } : {})}
+                className="sr-only"
+                onChange={onChange}
+                tabIndex={-1}
+                aria-hidden="true"
+            />
+            <div className="flex flex-wrap items-center gap-2">
+                <Button type="button" variant="outline" size="sm" onClick={pick} disabled={busy}>
+                    {loading ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                        <Paperclip className="mr-2 h-4 w-4" />
+                    )}
+                    {hasFile ? filledLabel : emptyLabel}
+                </Button>
+                {hasFile ? (
+                    <div className="flex min-w-0 items-center gap-1 text-sm text-muted-foreground">
+                        {fileName ? (
+                            <span className="truncate" title={fileName}>
+                                {fileName}
+                            </span>
+                        ) : null}
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0"
+                            onClick={onClear}
+                            disabled={busy}
+                            aria-label={removeLabel}
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </Button>
+                    </div>
+                ) : (
+                    <span className="text-xs text-muted-foreground">{emptyHint}</span>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/index.ts

@@ -119,7 +119,12 @@ export {
     type UseDynamicFiltersOptions,
     type UseDynamicFiltersResult,
 } from './use-dynamic-filters'
+export { useDebouncedValue, SEARCH_DEBOUNCE_MS } from './use-debounced-value'
 export * from './dynamic-form'
+export {
+    FilePickButton,
+    type FilePickButtonProps,
+} from './file-pick-button'
 export * from './barcode-scanner'
 export * from './form-layout'
 export * from './form-layout-ui'
@@ -261,6 +266,12 @@ export {
     type UrlKind,
     type LinkifyOptions,
 } from './rich-url'
+export {
+    ImageStack,
+    OptionBadge,
+    statusColorFor,
+    useIsDarkTheme,
+} from './display-value'
 export {
     CollectionCell,
     formatScalar,

package/src/metadata-cache.ts

@@ -178,7 +178,14 @@ export const useMetadataCache = create<MetadataCacheState>()(
         }),
         {
             name: 'metacore-metadata-cache',
-            version: 3,
+            // Bump when display hints (e.g. image_stack) must wipe stale cache.
+            version: 4,
+            migrate: () => ({
+                cache: {},
+                modalCache: {},
+                metadataVersion: '',
+                prefetched: false,
+            }),
             partialize: (state) => ({
                 cache: state.cache,
                 modalCache: state.modalCache,

package/src/types.ts

@@ -252,6 +252,8 @@ export interface ColumnDefinition {
         | 'phone'
         | 'media-gallery'
         | 'image'
+        // Landscape stack: wide image on top, label underneath (logos/photos).
+        | 'image_stack'
         // Declarative pro cell renderers (resolved via `cellStyle ?? type`).
         | 'url'
         | 'link'

package/src/upload-field.tsx

@@ -1,8 +1,8 @@
 // UploadField — the `upload` widget renderer shared by DynamicForm's
 // FieldRenderer and the action-modal-dispatcher's renderField so the two stay
-// in lockstep. Renders a themed Button that proxies a hidden <input type=file>,
-// POSTs the picked file to the host upload endpoint as multipart/form-data, and
-// stores the returned file url/path as the field value.
+// in lockstep. Renders a locale-aware FilePickButton that proxies a hidden
+// <input type=file>, POSTs the picked file to the host upload endpoint as
+// multipart/form-data, and stores the returned file url/path as the field value.
 //
 // Endpoint assumption: `POST /uploads` (multipart) returning
 //   { success: true, data: { file_url?, url?, path?, file_path? } }
@@ -10,11 +10,11 @@
 // `field.searchEndpoint` (reused as the upload endpoint escape hatch) — kept
 // generic so this carries no host-specific route. Honors field.accept /
 // field.maxSize and forwards field.storagePath as `storage_path`.
-import { useCallback, useRef, useState } from 'react'
-import { Button } from '@asteby/metacore-ui/primitives'
-import { Loader2, Paperclip, X } from 'lucide-react'
-import { useApi } from './api-context'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { getUploadConfig } from './dynamic-form-schema'
+import { FilePickButton } from './file-pick-button'
+import { useApi } from './api-context'
 import type { ActionFieldDef } from './types'
 
 export interface UploadFieldProps {
@@ -52,29 +52,31 @@ export function uploadedDisplayName(value: unknown): string {
 }
 
 export function UploadField({ field, value, onChange }: UploadFieldProps) {
+    const { t } = useTranslation()
     const api = useApi()
-    const inputRef = useRef<HTMLInputElement | null>(null)
     const [uploading, setUploading] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
     const { accept, maxSize, storagePath } = getUploadConfig(field)
     const endpoint = field.searchEndpoint || DEFAULT_UPLOAD_ENDPOINT
-
-    const handlePick = useCallback(() => {
-        if (uploading) return
-        inputRef.current?.click()
-    }, [uploading])
+    const hasValue = typeof value === 'string' && value !== ''
 
     const handleFile = useCallback(
-        async (e: React.ChangeEvent<HTMLInputElement>) => {
-            const file = e.target.files?.[0]
-            // Reset the input so picking the same file again re-fires change.
-            if (inputRef.current) inputRef.current.value = ''
-            if (!file) return
+        async (file: File | null) => {
+            if (!file) {
+                setError(null)
+                onChange('')
+                return
+            }
             setError(null)
             if (maxSize && file.size > maxSize) {
                 const mb = (maxSize / (1024 * 1024)).toFixed(1)
-                setError(`Archivo muy grande (máx. ${mb} MB).`)
+                setError(
+                    t('common.upload.too_large', {
+                        mb,
+                        defaultValue: `File too large (max {{mb}} MB).`,
+                    }),
+                )
                 return
             }
             const form = new FormData()
@@ -94,77 +96,45 @@ export function UploadField({ field, value, onChange }: UploadFieldProps) {
                 })
                 const body = (res as { data?: any })?.data
                 if (body && body.success === false) {
-                    setError(body.message || 'No se pudo subir el archivo.')
+                    setError(
+                        body.message ||
+                            t('common.upload.failed', { defaultValue: 'Could not upload the file.' }),
+                    )
                     return
                 }
                 const stored = extractUploadedValue(body)
                 if (!stored) {
-                    setError('Respuesta de subida inválida.')
+                    setError(
+                        t('common.upload.invalid', {
+                            defaultValue: 'Invalid upload response.',
+                        }),
+                    )
                     return
                 }
                 onChange(stored)
             } catch (err: any) {
-                setError(err?.response?.data?.message || 'No se pudo subir el archivo.')
+                setError(
+                    err?.response?.data?.message ||
+                        t('common.upload.failed', { defaultValue: 'Could not upload the file.' }),
+                )
             } finally {
                 setUploading(false)
             }
         },
-        [api, endpoint, maxSize, storagePath, onChange],
+        [api, endpoint, maxSize, storagePath, onChange, t],
     )
 
-    const handleClear = useCallback(() => {
-        if (uploading) return
-        setError(null)
-        onChange('')
-    }, [uploading, onChange])
-
-    const hasValue = typeof value === 'string' && value !== ''
-
     return (
         <div className="grid gap-1.5" data-widget="upload">
-            <input
-                ref={inputRef}
+            <FilePickButton
                 id={field.key}
-                type="file"
                 accept={accept}
-                className="sr-only"
-                onChange={handleFile}
-                tabIndex={-1}
-                aria-hidden="true"
+                loading={uploading}
+                hasFile={hasValue}
+                fileName={hasValue ? uploadedDisplayName(value) : undefined}
+                onFile={(f) => void handleFile(f)}
+                pickLabel={field.placeholder || undefined}
             />
-            <div className="flex items-center gap-2">
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handlePick}
-                    disabled={uploading}
-                >
-                    {uploading ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                        <Paperclip className="mr-2 h-4 w-4" />
-                    )}
-                    {hasValue ? 'Reemplazar' : field.placeholder || 'Subir archivo'}
-                </Button>
-                {hasValue && !uploading && (
-                    <div className="flex min-w-0 items-center gap-1 text-sm text-muted-foreground">
-                        <span className="truncate" title={String(value)}>
-                            {uploadedDisplayName(value)}
-                        </span>
-                        <Button
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 w-6 p-0"
-                            onClick={handleClear}
-                            aria-label="Quitar archivo"
-                        >
-                            <X className="h-3.5 w-3.5" />
-                        </Button>
-                    </div>
-                )}
-            </div>
             {error && (
                 <span className="text-sm text-destructive" role="alert">
                     {error}