@lovett/ui 0.0.1

package/src/file-upload/file-preview-grid.tsx

@@ -0,0 +1,39 @@
+/**
+ * FilePreviewGrid — responsive grid of FilePreviewItem tiles, sized by
+ * file count (1 → single col, 2 → 2-col, 3-4 → 4-col, 5+ → 5-col).
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+import { cn } from '../lib/utils'
+import { FilePreviewItem } from './file-preview-item'
+import type { PendingFile } from './use-file-upload'
+
+interface FilePreviewGridProps {
+  files: PendingFile[]
+  onRemove: (id: string) => void
+  className?: string
+}
+
+export function FilePreviewGrid({ files, onRemove, className }: FilePreviewGridProps) {
+  if (files.length === 0) return null
+
+  const gridCols =
+    files.length === 1
+      ? 'grid-cols-1 max-w-[120px]'
+      : files.length === 2
+        ? 'grid-cols-2 max-w-[248px]'
+        : files.length <= 4
+          ? 'grid-cols-4'
+          : 'grid-cols-5'
+
+  return (
+    <div className={cn('px-3 pt-3', className)}>
+      <div className={cn('grid gap-2', gridCols)}>
+        {files.map((file) => (
+          <FilePreviewItem key={file.id} pendingFile={file} onRemove={onRemove} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/file-upload/file-preview-item.tsx

@@ -0,0 +1,175 @@
+/**
+ * FilePreviewItem — single file card showing thumbnail, name, size, upload
+ * progress, error state, and a remove button.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+import { X, AlertCircle, Loader2 } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { FileThumbnail } from './file-thumbnail'
+import type { PendingFile } from './use-file-upload'
+
+interface FilePreviewItemProps {
+  pendingFile: PendingFile
+  onRemove: (id: string) => void
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function truncateFilename(name: string, maxLength = 20): string {
+  if (name.length <= maxLength) return name
+
+  const ext = name.includes('.') ? name.split('.').pop() : ''
+  const baseName = ext ? name.slice(0, -(ext.length + 1)) : name
+  const available = maxLength - (ext ? ext.length + 4 : 3)
+
+  if (available <= 0) return name.slice(0, maxLength - 3) + '...'
+
+  return `${baseName.slice(0, available)}...${ext ? `.${ext}` : ''}`
+}
+
+export function FilePreviewItem({ pendingFile, onRemove }: FilePreviewItemProps) {
+  const { id, file, progress, status, error, previewUrl } = pendingFile
+  const isUploading = status === 'uploading'
+  const isError = status === 'error'
+  const isUploaded = status === 'uploaded'
+
+  return (
+    <div
+      className={cn(
+        'group relative flex flex-col gap-1 p-2',
+        'border bg-[rgb(var(--background))]',
+      )}
+      style={{
+        borderRadius: 'var(--radius-md)',
+        borderColor: isError
+          ? 'rgb(var(--destructive) / 0.5)'
+          : isUploaded
+            ? 'rgb(var(--success) / 0.5)'
+            : 'rgb(var(--border))',
+        background: isError
+          ? 'rgb(var(--destructive) / 0.08)'
+          : isUploaded
+            ? 'rgb(var(--success-bg))'
+            : 'rgb(var(--background))',
+      }}
+    >
+      {/* Thumbnail */}
+      <div
+        className="relative aspect-square w-full overflow-hidden"
+        style={{
+          borderRadius: 'var(--radius-sm)',
+          background: 'rgb(var(--muted))',
+        }}
+      >
+        <FileThumbnail
+          file={file}
+          className="h-full w-full"
+          {...(previewUrl !== undefined ? { previewUrl } : {})}
+        />
+
+        {isUploading && (
+          <div
+            className="absolute inset-0 flex items-center justify-center"
+            style={{ background: 'rgb(var(--background) / 0.8)' }}
+          >
+            <Loader2
+              className="h-5 w-5 animate-spin"
+              style={{ color: 'rgb(var(--accent))' }}
+            />
+          </div>
+        )}
+
+        {isError && (
+          <div
+            className="absolute inset-0 flex items-center justify-center"
+            style={{ background: 'rgb(var(--destructive) / 0.2)' }}
+          >
+            <AlertCircle
+              className="h-5 w-5"
+              style={{ color: 'rgb(var(--destructive))' }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* File info */}
+      <div className="flex flex-col gap-0.5">
+        <span
+          className="truncate text-xs font-medium"
+          style={{ color: 'rgb(var(--foreground))' }}
+          title={file.name}
+        >
+          {truncateFilename(file.name)}
+        </span>
+        <span className="text-[10px]" style={{ color: 'rgb(var(--text-muted))' }}>
+          {formatFileSize(file.size)}
+        </span>
+      </div>
+
+      {/* Progress bar */}
+      {isUploading && (
+        <div
+          className="h-1 w-full overflow-hidden"
+          style={{
+            borderRadius: 'var(--radius-full)',
+            background: 'rgb(var(--muted))',
+          }}
+        >
+          <div
+            className="h-full transition-all duration-300"
+            style={{
+              width: `${progress}%`,
+              background: 'rgb(var(--accent))',
+            }}
+          />
+        </div>
+      )}
+
+      {/* Error message */}
+      {isError && error && (
+        <span
+          className="truncate text-[10px]"
+          style={{ color: 'rgb(var(--destructive))' }}
+          title={error}
+        >
+          {error}
+        </span>
+      )}
+
+      {/* Remove button */}
+      <button
+        type="button"
+        onClick={() => onRemove(id)}
+        disabled={isUploading}
+        className={cn(
+          'absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center',
+          'rounded-full border transition-all',
+          'shadow-[var(--shadow-sm)]',
+          isError
+            ? 'opacity-100'
+            : 'opacity-0 group-hover:opacity-100',
+          isUploading && 'pointer-events-none',
+        )}
+        style={
+          isError
+            ? {
+                background: 'rgb(var(--destructive))',
+                color: 'white',
+                borderColor: 'rgb(var(--destructive))',
+              }
+            : undefined
+        }
+        title={isError ? 'Remove failed upload' : 'Remove file'}
+        aria-label={isError ? 'Remove failed upload' : 'Remove file'}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}

package/src/file-upload/file-thumbnail.tsx

@@ -0,0 +1,98 @@
+/**
+ * FileThumbnail — icon-based preview tile for non-image files; renders the
+ * actual image for image files when a preview URL is available.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ *
+ * Token-boundary note: the source used Tailwind color utilities (text-red-600,
+ * bg-blue-100, etc.) which are raw color literals. Rewritten to use inline
+ * style with CSS variables from the public token set where possible, and
+ * for the categorical file-type tints we use the --folder-* palette tokens
+ * (ADR-035) which are the closest semantic color set in the design system
+ * for categorical accent use.
+ */
+
+import { FileText, Table, Code, Image, FileType } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+interface FileThumbnailProps {
+  file: File
+  previewUrl?: string
+  className?: string
+}
+
+type IconComponent = typeof FileText
+
+interface ExtensionConfig {
+  icon: IconComponent
+  colorVar: string
+  bgVar: string
+}
+
+// Map file extensions to Lucide icons and design-system token pairs.
+// Using --folder-* palette tokens (ADR-035) as categorical accents.
+const EXTENSION_CONFIG: Record<string, ExtensionConfig> = {
+  pdf: { icon: FileText, colorVar: '--folder-red', bgVar: '--folder-red' },
+  docx: { icon: FileText, colorVar: '--folder-blue', bgVar: '--folder-blue' },
+  txt: { icon: FileText, colorVar: '--folder-slate', bgVar: '--folder-slate' },
+  csv: { icon: Table, colorVar: '--folder-emerald', bgVar: '--folder-emerald' },
+  xml: { icon: Code, colorVar: '--folder-amber', bgVar: '--folder-amber' },
+  html: { icon: Code, colorVar: '--folder-violet', bgVar: '--folder-violet' },
+  css: { icon: Code, colorVar: '--folder-blue', bgVar: '--folder-blue' },
+  js: { icon: Code, colorVar: '--folder-amber', bgVar: '--folder-amber' },
+  jpg: { icon: Image, colorVar: '--folder-pink', bgVar: '--folder-pink' },
+  jpeg: { icon: Image, colorVar: '--folder-pink', bgVar: '--folder-pink' },
+  png: { icon: Image, colorVar: '--folder-pink', bgVar: '--folder-pink' },
+  gif: { icon: Image, colorVar: '--folder-pink', bgVar: '--folder-pink' },
+}
+
+const FALLBACK_CONFIG: ExtensionConfig = {
+  icon: FileType,
+  colorVar: '--folder-slate',
+  bgVar: '--folder-slate',
+}
+
+function getExtension(filename: string): string {
+  const parts = filename.split('.')
+  return parts.length > 1 ? (parts[parts.length - 1] ?? '').toLowerCase() : ''
+}
+
+export function FileThumbnail({ file, previewUrl, className }: FileThumbnailProps) {
+  const extension = getExtension(file.name)
+  const isImage = file.type.startsWith('image/')
+
+  if (isImage && previewUrl) {
+    return (
+      <div className={cn('relative overflow-hidden rounded-md', className)}>
+        <img
+          src={previewUrl}
+          alt={file.name}
+          className="h-full w-full object-cover"
+        />
+      </div>
+    )
+  }
+
+  const config = EXTENSION_CONFIG[extension] ?? FALLBACK_CONFIG
+  const IconComponent = config.icon
+
+  return (
+    <div
+      className={cn('flex items-center justify-center rounded-md', className)}
+      style={{ background: `rgb(var(${config.bgVar}) / 0.15)` }}
+    >
+      <div className="flex flex-col items-center gap-1">
+        <IconComponent
+          className="h-6 w-6"
+          style={{ color: `rgb(var(${config.colorVar}))` }}
+        />
+        <span
+          className="text-[10px] font-medium uppercase"
+          style={{ color: `rgb(var(${config.colorVar}))` }}
+        >
+          {extension || '?'}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/file-upload/file-upload-button.tsx

@@ -0,0 +1,95 @@
+/**
+ * FileUploadButton — paperclip trigger that opens a native file picker.
+ * Disables itself when the file limit is reached.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+import { useRef } from 'react'
+import { Paperclip } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+const ACCEPTED_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'application/pdf',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'text/plain',
+  'text/csv',
+  'text/html',
+  'text/css',
+  'text/xml',
+  'application/xml',
+  'application/javascript',
+  'text/javascript',
+].join(',')
+
+interface FileUploadButtonProps {
+  onFilesSelected: (files: File[]) => void
+  disabled?: boolean
+  fileCount?: number
+  maxFiles?: number
+}
+
+export function FileUploadButton({
+  onFilesSelected,
+  disabled = false,
+  fileCount = 0,
+  maxFiles = 10,
+}: FileUploadButtonProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const isAtLimit = fileCount >= maxFiles
+
+  const handleClick = () => {
+    inputRef.current?.click()
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files.length > 0) {
+      onFilesSelected(Array.from(files))
+      // Reset so the same file can be re-selected
+      e.target.value = ''
+    }
+  }
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept={ACCEPTED_TYPES}
+        onChange={handleChange}
+        className="hidden"
+        disabled={disabled || isAtLimit}
+      />
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={disabled || isAtLimit}
+        className={cn(
+          'flex h-8 w-8 items-center justify-center transition-colors',
+          (disabled || isAtLimit) && 'cursor-not-allowed opacity-50',
+        )}
+        style={{ borderRadius: 'var(--radius-sm)' }}
+        title={
+          isAtLimit
+            ? `Maximum ${maxFiles} files`
+            : `Attach files (${fileCount}/${maxFiles})`
+        }
+        aria-label={
+          isAtLimit
+            ? `Maximum ${maxFiles} files reached`
+            : `Attach files (${fileCount} of ${maxFiles})`
+        }
+      >
+        <Paperclip
+          className="h-4 w-4"
+          style={{ color: 'rgb(var(--muted-foreground))' }}
+        />
+      </button>
+    </>
+  )
+}

package/src/file-upload/index.ts

@@ -0,0 +1,13 @@
+/**
+ * file-upload barrel — public surface for the @lovett/ui file-upload subtree.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+export { FileUploadButton } from './file-upload-button'
+export { FileDropZone } from './file-drop-zone'
+export { FilePreviewGrid } from './file-preview-grid'
+export { FilePreviewItem } from './file-preview-item'
+export { FileThumbnail } from './file-thumbnail'
+export { useFileUpload } from './use-file-upload'
+export type { PendingFile, UploadResult, UseFileUploadOptions } from './use-file-upload'