@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/FilePicker.svelte

@@ -0,0 +1,488 @@
+<script lang="ts">
+  /**
+   * FilePicker — Browse and select files from Supabase storage.
+   *
+   * Opens a modal to browse existing uploads (personal + team) from the
+   * user-files bucket, with inline upload support. Returns selected file
+   * paths/URLs via onSelect callback.
+   */
+
+  import type { FilePickerFile, FilePickerSelection } from "../types/filePicker"
+
+  interface Props {
+    open?: boolean
+    multiple?: boolean
+    accept?: string
+    title?: string
+    apiBase?: string
+    onSelect?: (selections: FilePickerSelection[]) => void
+    onclose?: () => void
+  }
+
+  let {
+    open = $bindable(false),
+    multiple = false,
+    accept = "",
+    title = "Select File",
+    apiBase = "/api/files",
+    onSelect,
+    onclose,
+  }: Props = $props()
+
+  let activeTab = $state<"personal" | "team">("personal")
+  let personalFiles = $state<FilePickerFile[]>([])
+  let teamFiles = $state<FilePickerFile[]>([])
+  let loading = $state(false)
+  let error = $state<string | null>(null)
+  let selected = $state<Set<string>>(new Set())
+  let isUploading = $state(false)
+  let uploadError = $state<string | null>(null)
+  let searchQuery = $state("")
+  let fileInput = $state<HTMLInputElement>(undefined!)
+  let dragOver = $state(false)
+
+  const currentFiles = $derived(activeTab === "personal" ? personalFiles : teamFiles)
+
+  const IMAGE_EXTS = new Set(["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp", "ico", "tiff", "tif"])
+  const PDF_EXTS = new Set(["pdf"])
+
+  const EXT_TO_MIME: Record<string, string> = {
+    jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", 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",
+  }
+
+  function getEffectiveMime(file: FilePickerFile): string {
+    if (file.metadata?.mimetype) return file.metadata.mimetype
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
+    return EXT_TO_MIME[ext] ?? ""
+  }
+
+  const filteredFiles = $derived(() => {
+    let files = currentFiles
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase()
+      files = files.filter((f) => f.name.toLowerCase().includes(q))
+    }
+    if (accept) {
+      const acceptTypes = accept.split(",").map((t) => t.trim().toLowerCase())
+      files = files.filter((f) => {
+        const mime = getEffectiveMime(f)
+        const ext = "." + (f.name.split(".").pop()?.toLowerCase() ?? "")
+        return acceptTypes.some(
+          (t) =>
+            t === mime ||
+            t === ext ||
+            (t.endsWith("/*") && mime.startsWith(t.replace("/*", "/")))
+        )
+      })
+    }
+    return files
+  })
+
+  $effect(() => {
+    if (open) {
+      selected = new Set()
+      searchQuery = ""
+      uploadError = null
+      loadFiles()
+    }
+  })
+
+  async function loadFiles() {
+    loading = true
+    error = null
+    try {
+      const res = await fetch(`${apiBase}/list`)
+      if (!res.ok) throw new Error("Failed to load files")
+      const data = await res.json()
+      personalFiles = (data.personalFiles || []).map((f: any) => ({
+        ...f,
+        scope: "personal" as const,
+      }))
+      teamFiles = (data.teamFiles || []).map((f: any) => ({
+        ...f,
+        scope: "team" as const,
+      }))
+    } catch (err) {
+      error = err instanceof Error ? err.message : "Failed to load files"
+    } finally {
+      loading = false
+    }
+  }
+
+  function toggleSelect(file: FilePickerFile) {
+    const key = `${file.scope}:${file.name}`
+    if (multiple) {
+      const next = new Set(selected)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      selected = next
+    } else {
+      selected = new Set([key])
+    }
+  }
+
+  function isSelected(file: FilePickerFile): boolean {
+    return selected.has(`${file.scope}:${file.name}`)
+  }
+
+  function confirmSelection() {
+    const allFiles = [...personalFiles, ...teamFiles]
+    const selections: FilePickerSelection[] = []
+    for (const key of selected) {
+      const [scope, ...nameParts] = key.split(":")
+      const name = nameParts.join(":")
+      const file = allFiles.find((f) => f.scope === scope && f.name === name)
+      if (file) {
+        selections.push({
+          file,
+          url: file.publicUrl ?? `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`,
+          downloadUrl: `${apiBase}/${encodeURIComponent(file.name)}/download?scope=${file.scope}`,
+        })
+      }
+    }
+    onSelect?.(selections)
+    close()
+  }
+
+  function close() {
+    open = false
+    onclose?.()
+  }
+
+  async function handleUpload(e: Event) {
+    const input = e.target as HTMLInputElement
+    if (!input.files?.length) return
+
+    isUploading = true
+    uploadError = null
+
+    for (const file of Array.from(input.files)) {
+      try {
+        const formData = new FormData()
+        formData.append("file", file)
+        formData.append("scope", activeTab)
+
+        const res = await fetch(apiBase, { method: "POST", body: formData })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}))
+          throw new Error(err.message || `Failed to upload ${file.name}`)
+        }
+      } catch (err) {
+        uploadError =
+          err instanceof Error ? err.message : `Failed to upload ${file.name}`
+      }
+    }
+
+    input.value = ""
+    isUploading = false
+    await loadFiles()
+  }
+
+  function isImage(file: FilePickerFile): boolean {
+    const mime = getEffectiveMime(file)
+    if (mime) return mime.startsWith("image/")
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
+    return IMAGE_EXTS.has(ext)
+  }
+
+  function isPdf(file: FilePickerFile): boolean {
+    const mime = getEffectiveMime(file)
+    if (mime) return mime === "application/pdf"
+    const ext = file.name.split(".").pop()?.toLowerCase() ?? ""
+    return PDF_EXTS.has(ext)
+  }
+
+  function getPreviewUrl(file: FilePickerFile): string {
+    return `${apiBase}/${encodeURIComponent(file.name)}/view?scope=${file.scope}`
+  }
+
+  function formatSize(bytes: number | undefined): string {
+    if (!bytes) return ""
+    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 getFileExtension(name: string): string {
+    return name.split(".").pop()?.toUpperCase() || "FILE"
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <dialog
+    class="modal modal-open"
+    aria-modal="true"
+    aria-label={title}
+    open
+    onkeydown={(e) => {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        close()
+      }
+    }}
+    tabindex="-1"
+    style="z-index: 1000"
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="modal-backdrop"
+      onclick={(e) => {
+        if (e.target === e.currentTarget) close()
+      }}
+    >
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="modal-box relative bg-base-100 text-base-content max-w-3xl w-full max-h-[80vh] flex flex-col"
+        onclick={(e) => e.stopPropagation()}
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-4 shrink-0">
+          <h2 class="text-lg font-semibold">{title}</h2>
+          <button
+            type="button"
+            class="btn btn-sm btn-circle btn-ghost"
+            onclick={close}
+            aria-label="Close"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Tabs + Search + Upload -->
+        <div class="flex items-center gap-3 mb-4 shrink-0 flex-wrap">
+          <div role="tablist" class="tabs tabs-boxed tabs-sm">
+            <button
+              type="button"
+              role="tab"
+              class="tab {activeTab === 'personal' ? 'tab-active' : ''}"
+              onclick={() => (activeTab = "personal")}
+            >
+              My Files
+              {#if personalFiles.length > 0}
+                <span class="badge badge-sm ml-1">{personalFiles.length}</span>
+              {/if}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              class="tab {activeTab === 'team' ? 'tab-active' : ''}"
+              onclick={() => (activeTab = "team")}
+            >
+              Team Files
+              {#if teamFiles.length > 0}
+                <span class="badge badge-sm badge-primary ml-1">{teamFiles.length}</span>
+              {/if}
+            </button>
+          </div>
+
+          <input
+            type="text"
+            class="input input-sm input-bordered flex-1 min-w-[120px]"
+            placeholder="Search files..."
+            bind:value={searchQuery}
+          />
+
+          <input
+            bind:this={fileInput}
+            type="file"
+            multiple
+            accept={accept || undefined}
+            onchange={handleUpload}
+            class="hidden"
+          />
+          <button
+            type="button"
+            class="btn btn-sm btn-primary"
+            onclick={() => fileInput?.click()}
+            disabled={isUploading}
+          >
+            {#if isUploading}
+              <span class="loading loading-spinner loading-xs"></span>
+            {:else}
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+              </svg>
+            {/if}
+            Upload
+          </button>
+        </div>
+
+        {#if uploadError}
+          <div class="alert alert-warning alert-sm mb-3 shrink-0">
+            <span class="text-sm">{uploadError}</span>
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => (uploadError = null)}>Dismiss</button>
+          </div>
+        {/if}
+
+        <!-- File grid -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="flex-1 overflow-y-auto min-h-0 relative"
+          ondragover={(e) => { e.preventDefault(); dragOver = true }}
+          ondragleave={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) dragOver = false }}
+          ondrop={(e) => {
+            e.preventDefault()
+            dragOver = false
+            if (e.dataTransfer?.files.length) {
+              const dt = new DataTransfer()
+              Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f))
+              fileInput.files = dt.files
+              fileInput.dispatchEvent(new Event('change'))
+            }
+          }}
+        >
+          {#if dragOver && !loading}
+            <div class="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-md border-2 border-dashed border-primary bg-primary/5 pointer-events-none">
+              <svg class="h-10 w-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+              </svg>
+              <p class="mt-3 text-sm font-medium text-primary">Drop to upload</p>
+            </div>
+          {/if}
+          {#if loading}
+            <div class="flex items-center justify-center py-16">
+              <span class="loading loading-spinner loading-lg text-primary"></span>
+            </div>
+          {:else if error}
+            <div class="text-center py-16">
+              <p class="text-error text-sm">{error}</p>
+              <button type="button" class="btn btn-sm btn-ghost mt-2" onclick={loadFiles}>Retry</button>
+            </div>
+          {:else if filteredFiles().length === 0}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="flex flex-col items-center justify-center py-16 rounded-md border-2 border-dashed transition-colors duration-150 cursor-pointer
+                {dragOver ? 'border-primary bg-primary/5' : 'border-base-300 hover:border-base-content/20 hover:bg-base-200/40'}"
+              onclick={() => fileInput?.click()}
+              role="button"
+              tabindex="0"
+              onkeydown={(e) => e.key === 'Enter' && fileInput?.click()}
+              aria-label="Drop files here or click to upload"
+            >
+              <svg class="h-10 w-10 {dragOver ? 'text-primary' : 'text-base-content/20'} transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
+              </svg>
+              <p class="mt-3 text-sm font-medium {dragOver ? 'text-primary' : 'text-base-content/50'}">
+                {#if dragOver}
+                  Drop to upload
+                {:else if searchQuery}
+                  No files match your search
+                {:else}
+                  Drop a file here, or <span class="text-primary underline">browse</span>
+                {/if}
+              </p>
+              {#if !searchQuery && !dragOver}
+                <p class="mt-1 text-xs text-base-content/30">{accept || "Any file type"}</p>
+              {/if}
+            </div>
+          {:else}
+            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
+              {#each filteredFiles() as file (file.id)}
+                <button
+                  type="button"
+                  class="flex flex-col bg-base-100 border rounded-lg overflow-hidden text-left transition-all duration-150 hover:shadow-md
+                    {isSelected(file)
+                    ? 'border-primary ring-2 ring-primary/30'
+                    : 'border-base-300 hover:border-base-content/20'}"
+                  onclick={() => toggleSelect(file)}
+                  ondblclick={() => {
+                    toggleSelect(file)
+                    confirmSelection()
+                  }}
+                >
+                  <!-- Thumbnail -->
+                  <div class="aspect-square bg-base-200 flex items-center justify-center overflow-hidden relative">
+                    {#if isImage(file)}
+                      <img
+                        src={getPreviewUrl(file)}
+                        alt={file.name}
+                        class="w-full h-full object-cover"
+                        loading="lazy"
+                      />
+                    {:else if isPdf(file)}
+                      <div class="text-center">
+                        <svg class="mx-auto h-8 w-8 text-error/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+                        <span class="text-xs text-error/60 font-mono mt-1 block">PDF</span>
+                      </div>
+                    {:else}
+                      <div class="text-center">
+                        <svg class="mx-auto h-8 w-8 text-base-content/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+                        <span class="text-xs text-base-content/40 font-mono mt-1 block">
+                          {getFileExtension(file.name)}
+                        </span>
+                      </div>
+                    {/if}
+                    {#if isSelected(file)}
+                      <div class="absolute top-1.5 right-1.5 bg-primary text-primary-content rounded-full w-5 h-5 flex items-center justify-center">
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                    {/if}
+                  </div>
+
+                  <!-- File info -->
+                  <div class="p-2">
+                    <p class="text-xs font-medium text-base-content truncate" title={file.name}>
+                      {file.name}
+                    </p>
+                    {#if file.metadata?.size}
+                      <p class="text-xs text-base-content/50 mt-0.5">
+                        {formatSize(file.metadata.size)}
+                      </p>
+                    {/if}
+                  </div>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+
+        <!-- Footer -->
+        <div class="flex items-center justify-between mt-4 pt-3 border-t border-base-300 shrink-0">
+          <span class="text-sm text-base-content/50">
+            {#if selected.size > 0}
+              {selected.size} file{selected.size > 1 ? "s" : ""} selected
+            {:else}
+              {multiple ? "Click to select files" : "Click to select a file"}
+            {/if}
+          </span>
+          <div class="flex gap-2">
+            <button type="button" class="btn btn-sm btn-ghost" onclick={close}>Cancel</button>
+            <button
+              type="button"
+              class="btn btn-sm btn-primary"
+              disabled={selected.size === 0}
+              onclick={confirmSelection}
+            >
+              {multiple ? `Select (${selected.size})` : "Select"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dialog>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+/**
+   * FilePicker — Browse and select files from Supabase storage.
+   *
+   * Opens a modal to browse existing uploads (personal + team) from the
+   * user-files bucket, with inline upload support. Returns selected file
+   * paths/URLs via onSelect callback.
+   */
+import type { FilePickerSelection } from "../types/filePicker";
+interface Props {
+    open?: boolean;
+    multiple?: boolean;
+    accept?: string;
+    title?: string;
+    apiBase?: string;
+    onSelect?: (selections: FilePickerSelection[]) => void;
+    onclose?: () => void;
+}
+declare const FilePicker: import("svelte").Component<Props, {}, "open">;
+type FilePicker = ReturnType<typeof FilePicker>;
+export default FilePicker;

package/dist/components/FileThumbnail.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  interface Props {
+    /** Display name of the file */
+    name: string
+    /** MIME type — used to pick the right icon / thumbnail */
+    mimeType: string
+    /** URL to render as image thumbnail (for image files) */
+    url?: string
+    size?: "sm" | "md" | "lg" | "xl"
+  }
+
+  let { name, mimeType, url, size = "md" }: Props = $props()
+
+  let imageError = $state(false)
+  let isLoading = $state(true)
+
+  const sizeClasses: Record<string, string> = {
+    sm: "h-8 w-8",
+    md: "h-16 w-16",
+    lg: "h-24 w-24",
+    xl: "h-32 w-32",
+  }
+
+  const isImageFile = $derived(mimeType.startsWith("image/"))
+  const isPdfFile = $derived(mimeType === "application/pdf")
+  const isCadFile = $derived(mimeType.includes("dwg") || mimeType.includes("autocad"))
+  const isZipFile = $derived(
+    mimeType === "application/zip" ||
+    mimeType === "application/x-zip-compressed" ||
+    mimeType === "application/x-zip"
+  )
+</script>
+
+<div class="relative {sizeClasses[size]} flex-shrink-0">
+  {#if isImageFile && url && !imageError}
+    <img
+      src={url}
+      alt={name}
+      class="w-full h-full object-cover rounded border border-base-300 shadow-sm"
+      onload={() => { isLoading = false }}
+      onerror={() => { imageError = true; isLoading = false }}
+    />
+  {:else}
+    <div class="w-full h-full bg-base-200 rounded border border-base-300 flex items-center justify-center">
+      {#if isPdfFile}
+        <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 isCadFile}
+        <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="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" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10l5-5 5 5" />
+        </svg>
+      {:else if isZipFile}
+        <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>
+  {/if}
+
+  {#if isLoading && isImageFile && url}
+    <div class="absolute inset-0 bg-base-200 rounded animate-pulse"></div>
+  {/if}
+
+  <!-- File type badge for small size -->
+  {#if size === "sm" && (isPdfFile || isCadFile)}
+    <div
+      class="absolute -top-1 -right-1 w-3 h-3 rounded-full text-xs font-bold text-white flex items-center justify-center
+             {isPdfFile ? 'bg-error' : 'bg-info'}"
+      aria-hidden="true"
+    >
+      {isPdfFile ? "P" : "D"}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    /** Display name of the file */
+    name: string;
+    /** MIME type — used to pick the right icon / thumbnail */
+    mimeType: string;
+    /** URL to render as image thumbnail (for image files) */
+    url?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}
+declare const FileThumbnail: import("svelte").Component<Props, {}, "">;
+type FileThumbnail = ReturnType<typeof FileThumbnail>;
+export default FileThumbnail;