@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/Drawer.svelte

@@ -14,6 +14,18 @@
 		size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
 		showCloseButton?: boolean;
 		contentClass?: string;
+		/**
+		 * When true (default), keydown events fired inside the drawer panel are
+		 * stopped from propagating to window — preventing page-level list/keyboard
+		 * navigation handlers (listNav-style) from receiving arrow keys, j/k, vim
+		 * chords, digit counts, etc. while the drawer is open.
+		 *
+		 * Free-text fields (INPUT, TEXTAREA, contentEditable) are intentionally
+		 * excluded so normal typing still works. Set to false only when the
+		 * consumer needs custom window-level key handling even while the drawer
+		 * is open.
+		 */
+		trapKeys?: boolean;
 		onclose?: () => void;
 		class?: string;
 		headerActions?: Snippet;
@@ -27,6 +39,7 @@
 		size = 'md',
 		showCloseButton = true,
 		contentClass = '',
+		trapKeys = true,
 		onclose,
 		class: className = '',
 		headerActions,
@@ -54,14 +67,33 @@
 			handleClose();
 		}
 	}
+
+	/**
+	 * Stop keydown events from bubbling to window while the drawer is open.
+	 * This prevents page-level keyboard navigation (listNav-style handlers on
+	 * window) from reacting to arrow keys, j/k, vim chords, digit counts, etc.
+	 * typed inside the drawer.
+	 *
+	 * Free-text fields are excluded: page-level handlers already ignore them,
+	 * and we must not interfere with normal typing or textarea shortcuts.
+	 */
+	function handlePanelKeydown(e: KeyboardEvent) {
+		if (!trapKeys) return;
+		const el = document.activeElement as HTMLElement | null;
+		const tag = el?.tagName;
+		const isTextField =
+			!!el && (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
+		if (!isTextField) e.stopPropagation();
+	}
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div
-	class="fixed inset-0 bg-black/50 transition-opacity duration-300 {open
+	class="fixed inset-0 transition-opacity duration-300 {open
 		? 'z-[100] opacity-100'
 		: 'opacity-0 pointer-events-none -z-10'}"
+	style="background: color-mix(in oklch, var(--color-primary) 55%, transparent)"
 	onclick={open ? handleClose : undefined}
 	role={open ? 'presentation' : undefined}
 ></div>
@@ -69,16 +101,17 @@
 <div
 	class="fixed top-0 {position === 'right'
 		? 'right-0'
-		: 'left-0'} h-full bg-base-100 shadow-xl {sizeClasses[size]} flex flex-col transition-all duration-300 {open
+		: 'left-0'} h-full bg-base-200 {position === 'right' ? 'border-l' : 'border-r'} border-base-300 {sizeClasses[size]} flex flex-col transition-all duration-300 {open
 		? 'z-[101] translate-x-0'
 		: '-z-10 ' + (position === 'right' ? 'translate-x-full' : '-translate-x-full')} {className}"
 	role="dialog"
 	aria-modal={open}
 	aria-label={title}
 	aria-hidden={!open}
+	onkeydown={handlePanelKeydown}
 >
 	{#if title || showCloseButton || headerActions}
-		<div class="flex items-center justify-between p-6 border-b border-base-200 flex-shrink-0">
+		<div class="flex items-center justify-between p-6 border-b border-base-content/10 flex-shrink-0">
 			{#if title}
 				<h2 class="text-xl font-semibold">{title}</h2>
 			{/if}

package/src/lib/components/EntityPreviewCard.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { EntityPreviewData, EntityPreviewBadge } from "../types/entityPreview"
+
+  let {
+    data,
+    loading = false,
+    error = false,
+  }: {
+    data: EntityPreviewData | null
+    loading?: boolean
+    error?: boolean
+  } = $props()
+
+  // First letter monogram fallback when there's no image.
+  const monogram = $derived((data?.title ?? "?").trim().charAt(0).toUpperCase() || "?")
+
+  function toneClass(tone: EntityPreviewBadge["tone"]): string {
+    switch (tone) {
+      case "primary":
+        return "badge-primary"
+      case "info":
+        return "badge-info"
+      case "success":
+        return "badge-success"
+      case "warning":
+        return "badge-warning"
+      case "error":
+        return "badge-error"
+      default:
+        return "badge-ghost"
+    }
+  }
+</script>
+
+<div
+  class="bg-base-100 border-base-content/10 rounded-box w-72 overflow-hidden border text-left"
+>
+  {#if loading}
+    <div class="space-y-2 p-4">
+      <div class="bg-base-300 h-3 w-20 animate-pulse rounded"></div>
+      <div class="bg-base-300 h-4 w-40 animate-pulse rounded"></div>
+      <div class="bg-base-300 h-3 w-full animate-pulse rounded"></div>
+    </div>
+  {:else if error || !data}
+    <div class="text-base-content/50 p-4 text-sm">Preview unavailable.</div>
+  {:else}
+    {#if data.imageUrl}
+      <div class="bg-base-200 aspect-[16/9] w-full overflow-hidden">
+        <img src={data.imageUrl} alt={data.title} class="size-full object-cover" />
+      </div>
+    {/if}
+
+    <div class="space-y-2 p-4">
+      <div class="flex items-start gap-3">
+        {#if !data.imageUrl}
+          <div
+            class="bg-primary/10 text-primary rounded-box flex size-9 shrink-0 items-center justify-center text-sm font-bold"
+            aria-hidden="true"
+          >
+            {monogram}
+          </div>
+        {/if}
+        <div class="min-w-0 flex-1">
+          <div class="text-base-content/45 text-[10px] font-medium uppercase tracking-wide">
+            {data.typeLabel}
+          </div>
+          <div class="truncate text-sm font-semibold leading-tight">
+            {#if data.href}
+              <a href={data.href} class="hover:underline">{data.title}</a>
+            {:else}
+              {data.title}
+            {/if}
+          </div>
+          {#if data.subtitle}
+            <div class="text-base-content/55 truncate text-xs">{data.subtitle}</div>
+          {/if}
+        </div>
+      </div>
+
+      {#if data.summary}
+        <p class="text-base-content/70 line-clamp-2 text-xs">{data.summary}</p>
+      {/if}
+
+      {#if data.badges && data.badges.length > 0}
+        <div class="flex flex-wrap gap-1">
+          {#each data.badges as badge}
+            <span class="badge {toneClass(badge.tone)} badge-sm capitalize">{badge.label}</span>
+          {/each}
+        </div>
+      {/if}
+
+      {#if data.stats && data.stats.length > 0}
+        <div class="border-base-content/10 grid grid-cols-2 gap-x-4 gap-y-1 border-t pt-2">
+          {#each data.stats.slice(0, 4) as stat}
+            <div>
+              <div class="text-base-content/45 text-[10px] uppercase tracking-wide">{stat.label}</div>
+              <div class="text-xs font-semibold tabular-nums">{stat.value}</div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/lib/components/FileDropzone.svelte

@@ -0,0 +1,493 @@
+<script module lang="ts">
+  export interface FileDropzoneFile {
+    /** The raw File object for pending (pre-upload) files */
+    file?: File
+    /** Name to display */
+    name: string
+    /** MIME type */
+    mimeType: string
+    /** File size in bytes */
+    size?: number
+    /** URL for already-uploaded files (for FileThumbnail) */
+    url?: string
+    /** Arbitrary metadata for the consumer */
+    meta?: Record<string, unknown>
+  }
+</script>
+
+<script lang="ts">
+  import FileThumbnail from "./FileThumbnail.svelte"
+
+  // Lightweight extension→MIME map (avoids mime-types dependency)
+  const EXT_TO_MIME: Record<string, string> = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    svg: "image/svg+xml",
+    avif: "image/avif",
+    bmp: "image/bmp",
+    ico: "image/x-icon",
+    tiff: "image/tiff",
+    tif: "image/tiff",
+    pdf: "application/pdf",
+    zip: "application/zip",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    doc: "application/msword",
+    xls: "application/vnd.ms-excel",
+    ppt: "application/vnd.ms-powerpoint",
+    txt: "text/plain",
+    csv: "text/csv",
+    mp4: "video/mp4",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    dwg: "image/vnd.dwg",
+  }
+
+  const ZIP_TYPES = new Set([
+    "application/zip",
+    "application/x-zip-compressed",
+    "application/x-zip",
+  ])
+
+  function extToMime(filename: string): string | false {
+    const ext = filename.split(".").pop()?.toLowerCase() ?? ""
+    return EXT_TO_MIME[ext] ?? false
+  }
+
+  function mimeToExt(mime: string): string | false {
+    for (const [ext, m] of Object.entries(EXT_TO_MIME)) {
+      if (m === mime) return ext
+    }
+    return false
+  }
+
+  interface Props {
+    /** MIME types to accept, e.g. ["image/png","application/pdf"] */
+    accept?: string[]
+    /** Max file size in bytes (default 50 MB) */
+    maxSize?: number
+    /** Max number of files (default 10) */
+    maxFiles?: number
+    disabled?: boolean
+    /** Allow selecting multiple files */
+    multiple?: boolean
+    /** Already-uploaded files to show in the grid below the dropzone */
+    uploadedFiles?: FileDropzoneFile[]
+    /** Whether an upload is in flight */
+    isUploading?: boolean
+    /** Whether a ZIP extraction is in flight */
+    isExtracting?: boolean
+    /** Label shown in the dropzone (default: "Drop files or folders here") */
+    dropLabel?: string
+    /** Subtext shown below the label */
+    dropSubtext?: string
+    /** Called when the user selects or drops files (after validation) */
+    onFilesSelected?: (files: File[], errors: string[]) => void
+  }
+
+  let {
+    accept = [
+      "image/png",
+      "image/jpeg",
+      "application/pdf",
+      "application/zip",
+      "application/x-zip-compressed",
+    ],
+    maxSize = 50 * 1024 * 1024,
+    maxFiles = 10,
+    disabled = false,
+    multiple = true,
+    uploadedFiles = [],
+    isUploading = false,
+    isExtracting = false,
+    dropLabel = "Upload files",
+    dropSubtext,
+    onFilesSelected,
+  }: Props = $props()
+
+  let isDragOver = $state(false)
+  let fileInput = $state<HTMLInputElement>(undefined!)
+  let dropzoneRef = $state<HTMLElement>(undefined!)
+  let selectedFiles = $state<File[]>([])
+
+  // Human-readable accepted extensions for display
+  const acceptedExtensions = $derived(
+    accept
+      .map((type) => {
+        if (ZIP_TYPES.has(type)) return ".zip"
+        const ext = mimeToExt(type)
+        return ext ? `.${ext}` : type
+      })
+      .filter((v, i, a) => a.indexOf(v) === i) // dedupe
+      .join(", ")
+  )
+
+  function validateFile(file: File): string | null {
+    if (file.type && !accept.includes(file.type)) {
+      // Try to infer from extension for files where browser didn't set MIME
+      const inferred = extToMime(file.name)
+      if (!inferred || !accept.includes(inferred)) {
+        return `File type not supported. Accepted: ${acceptedExtensions}`
+      }
+    }
+    if (file.size > maxSize) {
+      const sizeMB = Math.round(maxSize / (1024 * 1024))
+      return `File too large (max ${sizeMB} MB)`
+    }
+    return null
+  }
+
+  function processFiles(files: FileList | File[]): { validFiles: File[]; errors: string[] } {
+    const fileArray = Array.from(files)
+    const validFiles: File[] = []
+    const errors: string[] = []
+
+    if (fileArray.length > maxFiles) {
+      errors.push(`Too many files. Maximum ${maxFiles} files allowed.`)
+      return { validFiles: [], errors }
+    }
+
+    for (const file of fileArray) {
+      const error = validateFile(file)
+      if (error) {
+        errors.push(`${file.name}: ${error}`)
+      } else {
+        validFiles.push(file)
+      }
+    }
+    return { validFiles, errors }
+  }
+
+  // Recursively read all files from a directory entry
+  async function readDirectoryEntries(entry: FileSystemDirectoryEntry): Promise<File[]> {
+    const files: File[] = []
+    const reader = entry.createReader()
+
+    const readBatch = (): Promise<FileSystemEntry[]> =>
+      new Promise((resolve, reject) => reader.readEntries(resolve, reject))
+
+    let batch: FileSystemEntry[]
+    do {
+      batch = await readBatch()
+      for (const child of batch) {
+        if (child.isFile) {
+          const file = await new Promise<File>((resolve, reject) =>
+            (child as FileSystemFileEntry).file(resolve, reject),
+          )
+          files.push(file)
+        } else if (child.isDirectory) {
+          const subFiles = await readDirectoryEntries(child as FileSystemDirectoryEntry)
+          files.push(...subFiles)
+        }
+      }
+    } while (batch.length > 0)
+
+    return files
+  }
+
+  // Collect files from DataTransfer items (handles folders)
+  async function collectDroppedFiles(dataTransfer: DataTransfer): Promise<File[]> {
+    const items = dataTransfer.items
+    if (!items || items.length === 0) {
+      return Array.from(dataTransfer.files)
+    }
+
+    const allFiles: File[] = []
+    const entries: FileSystemEntry[] = []
+
+    // Grab entries synchronously — they become invalid after await
+    for (let i = 0; i < items.length; i++) {
+      const entry = items[i].webkitGetAsEntry?.()
+      if (entry) entries.push(entry)
+    }
+
+    for (const entry of entries) {
+      if (entry.isFile) {
+        const file = await new Promise<File>((resolve, reject) =>
+          (entry as FileSystemFileEntry).file(resolve, reject),
+        )
+        allFiles.push(file)
+      } else if (entry.isDirectory) {
+        const dirFiles = await readDirectoryEntries(entry as FileSystemDirectoryEntry)
+        allFiles.push(...dirFiles)
+      }
+    }
+
+    return allFiles
+  }
+
+  function handleFileSelect(event: Event) {
+    const target = event.target as HTMLInputElement
+    if (target.files && target.files.length > 0) {
+      const { validFiles, errors } = processFiles(target.files)
+      selectedFiles = validFiles
+      onFilesSelected?.(validFiles, errors)
+    }
+  }
+
+  function handleDragEnter(event: DragEvent) {
+    event.preventDefault()
+    isDragOver = true
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    event.preventDefault()
+    if (!dropzoneRef.contains(event.relatedTarget as Node)) {
+      isDragOver = false
+    }
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  async function handleDrop(event: DragEvent) {
+    event.preventDefault()
+    isDragOver = false
+
+    if (disabled || !event.dataTransfer) return
+
+    const allFiles = await collectDroppedFiles(event.dataTransfer)
+    // Filter hidden / macOS artifact files
+    const filtered = allFiles.filter(
+      (f) => !f.name.startsWith(".") && !f.name.startsWith("__MACOSX"),
+    )
+
+    if (filtered.length > 0) {
+      const { validFiles, errors } = processFiles(filtered)
+      selectedFiles = validFiles
+      onFilesSelected?.(validFiles, errors)
+    }
+  }
+
+  function openFileDialog() {
+    if (!disabled) fileInput.click()
+  }
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return "0 B"
+    const k = 1024
+    const sizes = ["B", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
+  }
+
+  function fileIcon(file: File) {
+    if (file.type.startsWith("image/")) return "image"
+    if (file.type === "application/pdf") return "pdf"
+    if (ZIP_TYPES.has(file.type)) return "zip"
+    return "generic"
+  }
+
+  // Clear selected files when upload completes
+  $effect(() => {
+    if (!isUploading && uploadedFiles.length > 0) {
+      selectedFiles = []
+    }
+  })
+</script>
+
+<div class="w-full">
+  <!-- Hidden file input -->
+  <input
+    bind:this={fileInput}
+    type="file"
+    accept={accept.join(",")}
+    {multiple}
+    {disabled}
+    onchange={handleFileSelect}
+    class="hidden"
+    aria-hidden="true"
+  />
+
+  <!-- Dropzone -->
+  <div
+    bind:this={dropzoneRef}
+    class="relative border-2 border-dashed rounded-lg p-6 transition-all duration-200 cursor-pointer
+           {isDragOver
+      ? 'border-primary bg-primary/5 scale-[1.02]'
+      : disabled
+        ? 'border-base-300 bg-base-200 cursor-not-allowed'
+        : 'border-base-300 hover:border-primary hover:bg-primary/5'}"
+    onclick={openFileDialog}
+    ondragenter={handleDragEnter}
+    ondragleave={handleDragLeave}
+    ondragover={handleDragOver}
+    ondrop={handleDrop}
+    role="button"
+    tabindex="0"
+    aria-label={dropLabel}
+    onkeydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault()
+        openFileDialog()
+      }
+    }}
+  >
+    <div class="text-center">
+      <!-- Upload icon -->
+      <svg
+        class="mx-auto h-12 w-12 {disabled ? 'text-base-content/40' : 'text-base-content/50'}"
+        stroke="currentColor"
+        fill="none"
+        viewBox="0 0 48 48"
+        aria-hidden="true"
+      >
+        <path
+          d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+
+      <div class="mt-4">
+        <p class="text-lg font-medium {disabled ? 'text-base-content/40' : 'text-base-content'}">
+          {isDragOver ? "Drop files or folders here" : dropLabel}
+        </p>
+        <p class="mt-2 text-sm {disabled ? 'text-base-content/40' : 'text-base-content/50'}">
+          {#if !disabled}
+            {#if dropSubtext}
+              {dropSubtext}
+            {:else}
+              Drag and drop files, folders, or ZIP archives, or
+              <span class="font-medium text-primary underline">click to browse</span>
+            {/if}
+          {:else}
+            File upload is disabled
+          {/if}
+        </p>
+      </div>
+
+      {#if !disabled}
+        <div class="mt-4 text-xs text-base-content/50 space-y-1">
+          <p>Accepted: {acceptedExtensions}</p>
+          <p>Max size: {formatFileSize(maxSize)} &middot; Max files: {maxFiles}</p>
+          <p>You can drop a folder or ZIP archive</p>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Drag overlay -->
+    {#if isDragOver}
+      <div
+        class="absolute inset-0 bg-primary/10 rounded-lg border-2 border-primary border-dashed flex items-center justify-center"
+      >
+        <div class="text-center">
+          <svg
+            class="mx-auto h-16 w-16 text-primary"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            />
+          </svg>
+          <p class="mt-2 text-lg font-medium text-primary">Drop files or folders here</p>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Selected Files (before upload) -->
+  {#if selectedFiles.length > 0 && !isUploading && uploadedFiles.length === 0}
+    <div class="mt-4 space-y-2">
+      <h4 class="text-sm font-medium text-base-content/70">
+        Selected ({selectedFiles.length})
+      </h4>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+        {#each selectedFiles as file}
+          <div class="flex flex-col items-center p-3 bg-base-200 rounded-lg border border-base-300">
+            <div class="w-12 h-12 bg-base-100 rounded border border-base-300 flex items-center justify-center mb-2">
+              {#if fileIcon(file) === "image"}
+                <svg class="h-6 w-6 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+              {:else if fileIcon(file) === "pdf"}
+                <svg class="h-6 w-6 text-error" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.67 10.92,12.31 10.92,12.31Z" />
+                </svg>
+              {:else if fileIcon(file) === "zip"}
+                <svg class="h-6 w-6 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                </svg>
+              {:else}
+                <svg class="h-6 w-6 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              {/if}
+            </div>
+            <span class="text-xs text-base-content/60 text-center font-medium truncate w-full" title={file.name}>
+              {file.name}
+            </span>
+            <span class="text-xs text-base-content/50 mt-1">{formatFileSize(file.size)}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Upload / extraction progress -->
+  {#if isExtracting}
+    <div class="mt-4">
+      <div class="flex items-center justify-center p-6 bg-warning/10 rounded-lg border border-warning/30">
+        <div class="text-center">
+          <span class="loading loading-spinner loading-lg text-warning"></span>
+          <p class="mt-3 text-sm font-medium text-warning-content">Extracting ZIP file…</p>
+          <p class="text-xs text-warning-content/70">Unpacking and uploading files from archive</p>
+        </div>
+      </div>
+    </div>
+  {:else if isUploading}
+    <div class="mt-4">
+      <div class="flex items-center justify-center p-6 bg-info/10 rounded-lg border border-info/30">
+        <div class="text-center">
+          <span class="loading loading-spinner loading-lg text-primary"></span>
+          <p class="mt-3 text-sm font-medium text-info-content">Uploading files…</p>
+          <p class="text-xs text-info-content/70">Please wait while files are uploaded</p>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Uploaded Files (after successful upload) -->
+  {#if uploadedFiles.length > 0}
+    <div class="mt-4 space-y-2">
+      <h4 class="text-sm font-medium text-base-content/70">
+        Uploaded ({uploadedFiles.length})
+      </h4>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+        {#each uploadedFiles as file}
+          <div class="flex flex-col items-center p-3 bg-success/10 rounded-lg border border-success/30">
+            <FileThumbnail
+              name={file.name}
+              mimeType={file.mimeType}
+              url={file.url}
+              size="md"
+            />
+            <span class="text-xs text-base-content/60 text-center font-medium truncate w-full mt-2" title={file.name}>
+              {file.name}
+            </span>
+            <span class="text-xs text-success font-medium mt-1">✓ Uploaded</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  div[role="button"]:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+</style>