@lovett/ui 0.0.1

package/src/file-upload/use-file-upload.ts

@@ -0,0 +1,371 @@
+/**
+ * useFileUpload — stateful file-selection, validation, text-extraction, and
+ * XHR upload hook with per-file progress tracking.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ *
+ * D14 fix: the original hook read `import.meta.env.VITE_API_URL` and
+ * hardcoded a fallback URL. A @lovett/ui primitive must not read env vars or
+ * embed URLs. Consumers pass `uploadUrl` (required) and optional `authHeaders`
+ * so the workspace `lib/api.ts` config can supply both without the primitive
+ * knowing anything about the deployment environment.
+ */
+
+import { useState, useCallback, useRef, useMemo } from 'react'
+import { toast } from 'sonner'
+
+// Configuration defaults
+const MAX_FILE_SIZE = 20 * 1024 * 1024 // 20 MB
+const MAX_FILES = 10
+
+const ALLOWED_TYPES: Record<string, { category: string; ext: string }> = {
+  'image/jpeg': { category: 'image', ext: 'jpg' },
+  'image/png': { category: 'image', ext: 'png' },
+  'image/gif': { category: 'image', ext: 'gif' },
+  'application/pdf': { category: 'pdf', ext: 'pdf' },
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
+    category: 'document',
+    ext: 'docx',
+  },
+  'text/plain': { category: 'text', ext: 'txt' },
+  'text/csv': { category: 'text', ext: 'csv' },
+  'text/html': { category: 'text', ext: 'html' },
+  'text/css': { category: 'text', ext: 'css' },
+  'text/xml': { category: 'text', ext: 'xml' },
+  'application/xml': { category: 'text', ext: 'xml' },
+  'application/javascript': { category: 'text', ext: 'js' },
+  'text/javascript': { category: 'text', ext: 'js' },
+}
+
+export interface UploadResult {
+  id: string
+  filename: string
+  fileType: string
+  fileSize: number
+  fileCategory: string
+  publicUrl?: string
+  status: string
+}
+
+export interface PendingFile {
+  id: string
+  file: File
+  progress: number
+  status: 'pending' | 'uploading' | 'uploaded' | 'error'
+  error?: string
+  previewUrl?: string
+  extractedText?: string
+  uploadResult?: UploadResult
+}
+
+export interface UseFileUploadOptions {
+  /**
+   * Absolute URL that accepts POST multipart/form-data uploads.
+   * Supplied by the consuming lens via `lib/api.ts` — never hardcoded here.
+   */
+  uploadUrl: string
+  /**
+   * Optional HTTP headers forwarded with every XHR upload request
+   * (e.g. `{ Authorization: 'Bearer <token>' }`). Supplied by the
+   * consuming lens; the primitive never reads env vars or auth stores.
+   */
+  authHeaders?: Record<string, string>
+  /** Conversation ID to associate uploads with an existing conversation. */
+  conversationId?: string | null | undefined
+  /** Maximum number of files (default: 10). */
+  maxFiles?: number
+  /** Maximum bytes per file (default: 20 MB). */
+  maxFileSize?: number
+  /** Called when a file fails to upload. */
+  onError?: (error: Error) => void
+}
+
+export function useFileUpload({
+  uploadUrl,
+  authHeaders,
+  conversationId,
+  maxFiles = MAX_FILES,
+  maxFileSize = MAX_FILE_SIZE,
+  onError,
+}: UseFileUploadOptions) {
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([])
+  const [isUploading, setIsUploading] = useState(false)
+  const abortControllersRef = useRef<Map<string, AbortController>>(new Map())
+
+  // Stable session ID for this upload session
+  const sessionId = useMemo(
+    () => `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    [],
+  )
+
+  const generateId = () =>
+    `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+
+  const getFileInfo = (mimeType: string) => ALLOWED_TYPES[mimeType] ?? null
+
+  const validateFile = (file: File): string | null => {
+    if (file.size > maxFileSize) {
+      return `${file.name} exceeds ${maxFileSize / 1024 / 1024}MB limit`
+    }
+    if (!getFileInfo(file.type)) {
+      return `${file.name} has unsupported type (${file.type || 'unknown'})`
+    }
+    return null
+  }
+
+  // Extract text from DOCX files — dynamic import keeps mammoth out of the
+  // initial bundle when the feature is unused.
+  const extractDocxText = async (file: File): Promise<string | undefined> => {
+    try {
+      const mammoth = await import('mammoth')
+      const arrayBuffer = await file.arrayBuffer()
+      const result = await mammoth.extractRawText({ arrayBuffer })
+      return result.value
+    } catch (error) {
+      console.error('Failed to extract DOCX text:', error)
+      return undefined
+    }
+  }
+
+  const readTextFile = async (file: File): Promise<string | undefined> => {
+    try {
+      return await file.text()
+    } catch (error) {
+      console.error('Failed to read text file:', error)
+      return undefined
+    }
+  }
+
+  const processFile = async (file: File): Promise<Partial<PendingFile>> => {
+    const fileInfo = getFileInfo(file.type)
+    if (!fileInfo) return {}
+
+    if (fileInfo.category === 'image') {
+      return { previewUrl: URL.createObjectURL(file) }
+    }
+    if (fileInfo.category === 'document') {
+      const extractedText = await extractDocxText(file)
+      return extractedText !== undefined ? { extractedText } : {}
+    }
+    if (fileInfo.category === 'text') {
+      const extractedText = await readTextFile(file)
+      return extractedText !== undefined ? { extractedText } : {}
+    }
+    return {}
+  }
+
+  // XHR upload — kept over fetch so we get granular upload-progress events.
+  const uploadFile = async (pendingFile: PendingFile): Promise<UploadResult> => {
+    const formData = new FormData()
+    formData.append('file', pendingFile.file)
+    formData.append('sessionId', sessionId)
+    if (conversationId) {
+      formData.append('conversationId', conversationId)
+    }
+    formData.append('originalFilename', pendingFile.file.name)
+    if (pendingFile.extractedText) {
+      formData.append('extractedText', pendingFile.extractedText)
+    }
+
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      const controller = new AbortController()
+      abortControllersRef.current.set(pendingFile.id, controller)
+
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          const progress = Math.round((e.loaded / e.total) * 100)
+          setPendingFiles((prev) =>
+            prev.map((f) => (f.id === pendingFile.id ? { ...f, progress } : f)),
+          )
+        }
+      })
+
+      xhr.addEventListener('load', () => {
+        abortControllersRef.current.delete(pendingFile.id)
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const result = JSON.parse(xhr.responseText) as UploadResult
+          resolve(result)
+        } else {
+          try {
+            const errBody = JSON.parse(xhr.responseText) as { error?: string }
+            reject(new Error(errBody.error ?? `Upload failed: ${xhr.status}`))
+          } catch {
+            reject(new Error(`Upload failed: ${xhr.status}`))
+          }
+        }
+      })
+
+      xhr.addEventListener('error', () => {
+        abortControllersRef.current.delete(pendingFile.id)
+        reject(new Error('Upload failed'))
+      })
+
+      xhr.addEventListener('abort', () => {
+        abortControllersRef.current.delete(pendingFile.id)
+        reject(new Error('Upload aborted'))
+      })
+
+      xhr.open('POST', uploadUrl)
+
+      // Forward caller-supplied auth headers (e.g. Bearer token)
+      if (authHeaders) {
+        for (const [key, value] of Object.entries(authHeaders)) {
+          xhr.setRequestHeader(key, value)
+        }
+      }
+
+      xhr.send(formData)
+    })
+  }
+
+  const uploadSingleFile = useCallback(
+    async (pendingFile: PendingFile) => {
+      setPendingFiles((prev) =>
+        prev.map((f) =>
+          f.id === pendingFile.id ? { ...f, status: 'uploading' as const } : f,
+        ),
+      )
+
+      try {
+        const result = await uploadFile(pendingFile)
+        setPendingFiles((prev) =>
+          prev.map((f) =>
+            f.id === pendingFile.id
+              ? { ...f, status: 'uploaded' as const, progress: 100, uploadResult: result }
+              : f,
+          ),
+        )
+        return result
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : 'Upload failed'
+        setPendingFiles((prev) =>
+          prev.map((f) =>
+            f.id === pendingFile.id
+              ? { ...f, status: 'error' as const, error: errorMessage }
+              : f,
+          ),
+        )
+        onError?.(error instanceof Error ? error : new Error(errorMessage))
+        return null
+      }
+    },
+    [uploadUrl, authHeaders, sessionId, conversationId, onError],
+  )
+
+  const addFiles = useCallback(
+    async (files: File[]) => {
+      const currentCount = pendingFiles.length
+      const availableSlots = maxFiles - currentCount
+
+      if (availableSlots <= 0) {
+        toast.error(`Maximum ${maxFiles} files allowed`)
+        return
+      }
+
+      const filesToAdd = files.slice(0, availableSlots)
+      const errors: string[] = []
+      const validFiles: { file: File; processed: Partial<PendingFile> }[] = []
+
+      for (const file of filesToAdd) {
+        const error = validateFile(file)
+        if (error) {
+          errors.push(error)
+          continue
+        }
+        const processed = await processFile(file)
+        validFiles.push({ file, processed })
+      }
+
+      if (errors.length > 0) {
+        errors.forEach((err) => toast.error(err))
+      }
+
+      if (validFiles.length > 0) {
+        const newPendingFiles: PendingFile[] = validFiles.map(
+          ({ file, processed }) => ({
+            id: generateId(),
+            file,
+            progress: 0,
+            status: 'pending' as const,
+            ...processed,
+          }),
+        )
+
+        setPendingFiles((prev) => [...prev, ...newPendingFiles])
+
+        setIsUploading(true)
+        void Promise.all(newPendingFiles.map((pf) => uploadSingleFile(pf))).finally(
+          () => {
+            setIsUploading(false)
+          },
+        )
+      }
+
+      if (files.length > availableSlots) {
+        toast.warning(`Only ${availableSlots} files added (max ${maxFiles})`)
+      }
+    },
+    [pendingFiles.length, maxFiles, maxFileSize, uploadSingleFile],
+  )
+
+  const removeFile = useCallback((fileId: string) => {
+    setPendingFiles((prev) => {
+      const file = prev.find((f) => f.id === fileId)
+      if (file?.previewUrl) {
+        URL.revokeObjectURL(file.previewUrl)
+      }
+      const controller = abortControllersRef.current.get(fileId)
+      if (controller) {
+        controller.abort()
+        abortControllersRef.current.delete(fileId)
+      }
+      return prev.filter((f) => f.id !== fileId)
+    })
+  }, [])
+
+  const clearFiles = useCallback(() => {
+    pendingFiles.forEach((file) => {
+      if (file.previewUrl) URL.revokeObjectURL(file.previewUrl)
+    })
+    abortControllersRef.current.forEach((controller) => controller.abort())
+    abortControllersRef.current.clear()
+    setPendingFiles([])
+  }, [pendingFiles])
+
+  const getUploadedResults = useCallback(
+    (): UploadResult[] =>
+      pendingFiles
+        .filter((f) => f.status === 'uploaded' && f.uploadResult)
+        .map((f) => f.uploadResult!),
+    [pendingFiles],
+  )
+
+  const hasFilesUploading = pendingFiles.some(
+    (f) => f.status === 'uploading' || f.status === 'pending',
+  )
+  const hasUploadErrors = pendingFiles.some((f) => f.status === 'error')
+  const allFilesUploaded =
+    pendingFiles.length > 0 && pendingFiles.every((f) => f.status === 'uploaded')
+  const totalProgress =
+    pendingFiles.length > 0
+      ? Math.round(
+          pendingFiles.reduce((sum, f) => sum + f.progress, 0) / pendingFiles.length,
+        )
+      : 0
+
+  return {
+    pendingFiles,
+    addFiles,
+    removeFile,
+    clearFiles,
+    getUploadedResults,
+    isUploading,
+    hasFilesUploading,
+    hasUploadErrors,
+    allFilesUploaded,
+    totalProgress,
+    sessionId,
+  }
+}

package/src/filter-bar.tsx

@@ -0,0 +1,125 @@
+// FilterBar — canonical search + filter-chip toolbar (ADR-121).
+//
+// Modeled on the Assets filter bar (the owner's reference — "handles
+// split dropdowns well"): a framed card holding a search field on the
+// left, filter chips after it, a flexible spacer, then a right group
+// (sort / view toggle / result count / actions). Lenses compose their
+// own `<DropdownButton>` chips as children; this primitive owns the
+// frame, the flex/wrap layout, the standardized search slot, and the
+// left/right split — so every lens's bar looks and behaves the same.
+//
+// Compound API:
+//   <FilterBar variant="framed" aria-label="Asset filters">
+//     <FilterBar.Search value={q} onChange={setQ} aria-label="Search assets" />
+//     <DropdownButton … />            // filter chips (left group)
+//     <FilterBar.Spacer />            // pushes the rest right
+//     <DropdownButton … />            // sort (right group)
+//     <FilterBar.Count shown={n} total={m} />
+//   </FilterBar>
+//
+// Lives in @lovett/ui; the frame is the `.ds-card-surface` utility +
+// `data-framed` (same as Card / ProfileSection). Token-boundary clean.
+
+import type { ReactNode } from 'react'
+import { Search } from 'lucide-react'
+import { Input } from './input'
+import { cn } from './lib/utils'
+
+export interface FilterBarProps {
+  /**
+   * `framed` (default) = bordered `.ds-card-surface` card, matching the
+   * Assets bar. `bare` = no frame, just the flex row (for bars that sit
+   * inside an already-framed container).
+   */
+  variant?: 'framed' | 'bare'
+  /** Accessible label for the toolbar group (e.g. "Asset filters"). */
+  'aria-label'?: string
+  className?: string
+  children: ReactNode
+}
+
+function FilterBarRoot({
+  variant = 'framed',
+  'aria-label': ariaLabel,
+  className,
+  children,
+}: FilterBarProps) {
+  const framed = variant === 'framed'
+  return (
+    <div
+      role="group"
+      aria-label={ariaLabel}
+      data-framed={framed ? 'true' : undefined}
+      className={cn(
+        'filter-bar flex flex-wrap items-center gap-2',
+        // 10px frame padding matches the <Shell> outer frame (the SEM Spec
+        // Overview bar) — the established thinner filter-bar padding. ADR-121.
+        framed && 'ds-card-surface p-2.5',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface FilterBarSearchProps {
+  value: string
+  onChange: (next: string) => void
+  placeholder?: string
+  /** Required — icon-only field needs an accessible name. */
+  'aria-label': string
+  /** Override the default width sizing if a bar needs it. */
+  className?: string
+}
+
+/** Standardized search field: small `Input` with a leading magnifier. */
+function FilterBarSearch({
+  value,
+  onChange,
+  placeholder,
+  'aria-label': ariaLabel,
+  className,
+}: FilterBarSearchProps) {
+  return (
+    <div className={cn('min-w-[12rem] flex-1 sm:max-w-xs', className)}>
+      <Input
+        inputSize="sm"
+        type="text"
+        placeholder={placeholder}
+        leadingAffix={<Search className="h-3.5 w-3.5" />}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        aria-label={ariaLabel}
+      />
+    </div>
+  )
+}
+
+/** Flexible spacer — everything after it is pushed to the right edge. */
+function FilterBarSpacer() {
+  return <div className="flex-1" />
+}
+
+export interface FilterBarCountProps {
+  shown: number
+  total: number
+}
+
+/** Right-aligned "{shown} of {total}" result count, tabular-nums. */
+function FilterBarCount({ shown, total }: FilterBarCountProps) {
+  return (
+    <span
+      className="text-[11.5px] tabular-nums"
+      style={{ color: 'rgb(var(--text-tertiary))' }}
+    >
+      {shown.toLocaleString()} of {total.toLocaleString()}
+    </span>
+  )
+}
+
+export const FilterBar = Object.assign(FilterBarRoot, {
+  Search: FilterBarSearch,
+  Spacer: FilterBarSpacer,
+  Count: FilterBarCount,
+})