@joewinke/jatui 0.1.24 → 0.1.26

package/dist/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>

package/dist/components/FileDropzone.svelte.d.ts

@@ -0,0 +1,40 @@
+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>;
+}
+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;
+}
+declare const FileDropzone: import("svelte").Component<Props, {}, "">;
+type FileDropzone = ReturnType<typeof FileDropzone>;
+export default FileDropzone;