@joewinke/jatui 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -44,6 +44,7 @@
     "vite": "^6.0.0"
   },
   "dependencies": {
+    "pdfjs-dist": "^5.6.205",
     "svelte-dnd-action": "^0.9.69"
   }
 }

package/src/lib/components/AvatarUpload.svelte

@@ -0,0 +1,211 @@
+<!--
+  AvatarUpload — circular avatar picker with client-side crop to square.
+  Shows current avatar or initials fallback. Click to select a new image.
+  Crops to square via canvas, fires onSelect(file) with the cropped File.
+  Parent handles the actual upload to storage.
+-->
+<script lang="ts">
+  interface Props {
+    /** Current avatar URL (from DB) */
+    avatarUrl?: string | null
+    /** User's name for initials fallback */
+    name?: string | null
+    /** User's email for initials fallback */
+    email?: string | null
+    /** Pixel size to crop/resize to */
+    cropSize?: number
+    /** Max file size in bytes before cropping */
+    maxSize?: number
+    /** Whether the upload is disabled */
+    disabled?: boolean
+    /** Whether an upload is in progress */
+    uploading?: boolean
+    /** Fired with the cropped File when user selects an image */
+    onSelect?: (file: File) => void
+    /** Fired when user clicks remove */
+    onRemove?: () => void
+  }
+
+  let {
+    avatarUrl = null,
+    name = null,
+    email = null,
+    cropSize = 256,
+    maxSize = 10 * 1024 * 1024,
+    disabled = false,
+    uploading = false,
+    onSelect = undefined,
+    onRemove = undefined,
+  }: Props = $props()
+
+  let error = $state("")
+  let previewUrl = $state<string | null>(null)
+  let fileInput: HTMLInputElement | undefined = $state()
+
+  const displayUrl = $derived(previewUrl ?? avatarUrl)
+
+  const initials = $derived.by(() => {
+    const source = name || email || ""
+    if (!source) return "?"
+    const parts = source.includes("@")
+      ? [source.split("@")[0]]
+      : source.split(" ").filter(Boolean)
+    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+    return parts[0]?.charAt(0).toUpperCase() || "?"
+  })
+
+  function openPicker() {
+    if (disabled || uploading) return
+    fileInput?.click()
+  }
+
+  async function handleFileInput(event: Event) {
+    error = ""
+    const input = event.target as HTMLInputElement
+    if (!input.files?.length) return
+
+    const file = input.files[0]
+    if (file.size > maxSize) {
+      error = `File too large. Max ${formatSize(maxSize)}.`
+      input.value = ""
+      return
+    }
+
+    if (!file.type.startsWith("image/")) {
+      error = "Please select an image file."
+      input.value = ""
+      return
+    }
+
+    try {
+      const cropped = await cropToSquare(file, cropSize)
+      if (previewUrl) URL.revokeObjectURL(previewUrl)
+      previewUrl = URL.createObjectURL(cropped)
+      onSelect?.(cropped)
+    } catch (e) {
+      error = "Failed to process image."
+      console.error("AvatarUpload crop error:", e)
+    }
+    input.value = ""
+  }
+
+  function handleRemove() {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl)
+      previewUrl = null
+    }
+    onRemove?.()
+  }
+
+  function cropToSquare(file: File, size: number): Promise<File> {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => {
+        const canvas = document.createElement("canvas")
+        canvas.width = size
+        canvas.height = size
+        const ctx = canvas.getContext("2d")
+        if (!ctx) { reject(new Error("No canvas context")); return }
+
+        // Center-crop: take the largest centered square from the source
+        const min = Math.min(img.width, img.height)
+        const sx = (img.width - min) / 2
+        const sy = (img.height - min) / 2
+
+        ctx.drawImage(img, sx, sy, min, min, 0, 0, size, size)
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) { reject(new Error("Canvas toBlob failed")); return }
+            resolve(new File([blob], "avatar.webp", { type: "image/webp" }))
+          },
+          "image/webp",
+          0.85,
+        )
+        URL.revokeObjectURL(img.src)
+      }
+      img.onerror = () => { URL.revokeObjectURL(img.src); reject(new Error("Image load failed")) }
+      img.src = URL.createObjectURL(file)
+    })
+  }
+
+  function formatSize(bytes: number): string {
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(0)} MB`
+  }
+
+  $effect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl)
+    }
+  })
+</script>
+
+<div class="flex items-center gap-4">
+  <!-- Avatar circle -->
+  <button
+    type="button"
+    class="relative group rounded-full overflow-hidden w-20 h-20 shrink-0 cursor-pointer border-2 border-base-300 hover:border-primary transition-colors"
+    class:opacity-50={disabled || uploading}
+    onclick={openPicker}
+    {disabled}
+  >
+    {#if displayUrl}
+      <img src={displayUrl} alt="Avatar" class="w-full h-full object-cover" />
+    {:else}
+      <div class="w-full h-full bg-neutral text-neutral-content flex items-center justify-center text-2xl font-semibold">
+        {initials}
+      </div>
+    {/if}
+
+    <!-- Hover overlay -->
+    {#if !disabled && !uploading}
+      <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+          <circle cx="12" cy="13" r="4"/>
+        </svg>
+      </div>
+    {/if}
+
+    <!-- Loading spinner -->
+    {#if uploading}
+      <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
+        <span class="loading loading-spinner loading-sm text-white"></span>
+      </div>
+    {/if}
+  </button>
+
+  <!-- Label + remove -->
+  <div class="flex flex-col gap-1">
+    <button
+      type="button"
+      class="btn btn-sm btn-ghost text-primary"
+      class:btn-disabled={disabled || uploading}
+      onclick={openPicker}
+    >
+      {displayUrl ? "Change photo" : "Upload photo"}
+    </button>
+    {#if displayUrl && onRemove}
+      <button
+        type="button"
+        class="btn btn-sm btn-ghost text-error"
+        class:btn-disabled={disabled || uploading}
+        onclick={handleRemove}
+      >
+        Remove
+      </button>
+    {/if}
+  </div>
+
+  <input
+    bind:this={fileInput}
+    type="file"
+    class="hidden"
+    accept="image/*"
+    onchange={handleFileInput}
+  />
+</div>
+
+{#if error}
+  <p class="text-error text-sm mt-2">{error}</p>
+{/if}

package/src/lib/components/EmojiPicker.svelte

@@ -79,6 +79,8 @@
 	</button>
 
 	{#if open}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="emoji-picker-dropdown absolute left-0 top-full mt-1 z-50 rounded-lg overflow-hidden"
 			style="background: oklch(0.18 0.02 250); border: 1px solid oklch(0.30 0.02 250); box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); width: 280px;"

package/src/lib/components/FilePicker.svelte

@@ -0,0 +1,419 @@
+<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!)
+
+  const currentFiles = $derived(activeTab === "personal" ? personalFiles : teamFiles)
+
+  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 = f.metadata?.mimetype || ""
+        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: `${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 {
+    return file.metadata?.mimetype?.startsWith("image/") ?? false
+  }
+
+  function isPdf(file: FilePickerFile): boolean {
+    return file.metadata?.mimetype === "application/pdf"
+  }
+
+  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
+              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
+              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
+            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 class="btn btn-xs btn-ghost" onclick={() => (uploadError = null)}>Dismiss</button>
+          </div>
+        {/if}
+
+        <!-- File grid -->
+        <div class="flex-1 overflow-y-auto min-h-0">
+          {#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 class="btn btn-sm btn-ghost mt-2" onclick={loadFiles}>Retry</button>
+            </div>
+          {:else if filteredFiles().length === 0}
+            <div class="text-center py-16">
+              <svg class="mx-auto h-10 w-10 text-base-content/20" 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>
+              <p class="mt-3 text-sm text-base-content/50">
+                {searchQuery ? "No files match your search" : "No files yet. Upload one above."}
+              </p>
+            </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
+                  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 class="btn btn-sm btn-ghost" onclick={close}>Cancel</button>
+            <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/src/lib/components/MilestoneCard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Milestone, MilestoneStatus } from '../types/milestone'
+
+	interface Props {
+		milestone: Milestone
+		isCurrent?: boolean
+		currency?: string
+		onAcceptAndPay?: (milestone: Milestone) => void
+	}
+
+	let { milestone, isCurrent = false, currency = 'USD', onAcceptAndPay }: Props = $props()
+
+	const statusConfig: Record<MilestoneStatus, { label: string; class: string; icon: string }> = {
+		pending: { label: 'Pending', class: 'badge-ghost', icon: '○' },
+		delivered: { label: 'Delivered', class: 'badge-info', icon: '◉' },
+		accepted: { label: 'Accepted', class: 'badge-warning', icon: '◉' },
+		paid: { label: 'Paid', class: 'badge-success', icon: '●' }
+	}
+
+	const config = $derived(statusConfig[milestone.status])
+
+	function formatCurrency(amount: number) {
+		return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
+	}
+
+	function formatDate(dateStr: string | null) {
+		if (!dateStr) return null
+		return new Date(dateStr).toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric'
+		})
+	}
+</script>
+
+<div
+	class="card bg-base-100 border border-base-300 {isCurrent
+		? 'ring-2 ring-primary/50 shadow-lg'
+		: ''}"
+>
+	<div class="card-body p-4 gap-2">
+		<div class="flex items-start justify-between gap-2">
+			<div class="flex-1 min-w-0">
+				<h4 class="font-semibold text-base-content text-sm">{milestone.name}</h4>
+				{#if milestone.description}
+					<p class="text-xs text-base-content/60 mt-0.5">{milestone.description}</p>
+				{/if}
+			</div>
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<span class="font-semibold text-sm">{formatCurrency(milestone.amount)}</span>
+				<span class="badge badge-sm {config.class}">{config.icon} {config.label}</span>
+			</div>
+		</div>
+
+		{#if milestone.acceptance_criteria}
+			<div class="text-xs text-base-content/50 mt-1">
+				<span class="font-medium">Acceptance:</span>
+				{milestone.acceptance_criteria}
+			</div>
+		{/if}
+
+		<div class="flex items-center gap-3 text-xs text-base-content/40 mt-1">
+			<span>{milestone.percentage}% of total</span>
+			{#if milestone.delivered_at}
+				<span>Delivered {formatDate(milestone.delivered_at)}</span>
+			{/if}
+			{#if milestone.paid_at}
+				<span>Paid {formatDate(milestone.paid_at)}</span>
+			{/if}
+		</div>
+
+		{#if isCurrent && milestone.status === 'delivered' && onAcceptAndPay}
+			<div class="mt-2">
+				<button class="btn btn-primary btn-sm" onclick={() => onAcceptAndPay(milestone)}>
+					Accept & Pay {formatCurrency(milestone.amount)}
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>

package/src/lib/components/MilestoneTimeline.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { Milestone } from '../types/milestone'
+	import MilestoneCard from './MilestoneCard.svelte'
+
+	interface Props {
+		milestones: Milestone[]
+		currency?: string
+		onAcceptAndPay?: (milestone: Milestone) => void
+	}
+
+	let { milestones, currency = 'USD', onAcceptAndPay }: Props = $props()
+
+	const sorted = $derived([...milestones].sort((a, b) => a.sort_order - b.sort_order))
+
+	const currentIndex = $derived(sorted.findIndex((m) => m.status !== 'paid'))
+
+	const paidCount = $derived(sorted.filter((m) => m.status === 'paid').length)
+	const totalAmount = $derived(sorted.reduce((sum, m) => sum + m.amount, 0))
+	const paidAmount = $derived(
+		sorted.filter((m) => m.status === 'paid').reduce((sum, m) => sum + m.amount, 0)
+	)
+
+	function formatCurrency(amount: number) {
+		return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
+	}
+</script>
+
+<div class="space-y-1">
+	<!-- Progress summary -->
+	<div class="flex items-center justify-between text-sm mb-4">
+		<span class="text-base-content/60">
+			{paidCount} of {sorted.length} milestones paid
+		</span>
+		<span class="font-semibold">
+			{formatCurrency(paidAmount)} / {formatCurrency(totalAmount)}
+		</span>
+	</div>
+
+	<!-- Progress bar -->
+	{#if totalAmount > 0}
+		<div class="w-full bg-base-300 rounded-full h-2 mb-6">
+			<div
+				class="bg-success h-2 rounded-full transition-all duration-500"
+				style="width: {(paidAmount / totalAmount) * 100}%"
+			></div>
+		</div>
+	{/if}
+
+	<!-- Timeline -->
+	<div class="relative">
+		{#each sorted as milestone, i (milestone.id)}
+			<div class="flex gap-4">
+				<!-- Timeline connector -->
+				<div class="flex flex-col items-center w-6 flex-shrink-0">
+					<div
+						class="w-3 h-3 rounded-full border-2 {milestone.status === 'paid'
+							? 'bg-success border-success'
+							: i === currentIndex
+								? 'bg-primary border-primary'
+								: 'bg-base-300 border-base-300'}"
+					></div>
+					{#if i < sorted.length - 1}
+						<div
+							class="w-0.5 flex-1 min-h-4 {milestone.status === 'paid'
+								? 'bg-success/50'
+								: 'bg-base-300'}"
+						></div>
+					{/if}
+				</div>
+
+				<!-- Card -->
+				<div class="flex-1 pb-4">
+					<MilestoneCard
+						{milestone}
+						isCurrent={i === currentIndex}
+						{currency}
+						{onAcceptAndPay}
+					/>
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>

package/src/lib/components/Modal.svelte

@@ -155,6 +155,7 @@
 		onkeydown={handleKeyDown}
 		tabindex="-1"
 	>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="modal-backdrop" onclick={handleBackdropClick}>
 			<div class={contentClasses}>

package/src/lib/components/PdfThumbnail.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  interface Props {
+    /** URL or path to the PDF file */
+    src: string
+    /** CSS class for the container */
+    class?: string
+  }
+
+  let { src, class: className = "" }: Props = $props()
+  let canvas: HTMLCanvasElement
+  let loading = $state(true)
+  let failed = $state(false)
+
+  onMount(async () => {
+    try {
+      const pdfjsLib = await import("pdfjs-dist")
+      pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.mjs",
+        import.meta.url,
+      ).toString()
+
+      const response = await fetch(src)
+      const buffer = await response.arrayBuffer()
+      const pdf = await pdfjsLib.getDocument({ data: buffer }).promise
+      const page = await pdf.getPage(1)
+
+      const containerWidth = canvas.parentElement?.clientWidth || 300
+      const viewport = page.getViewport({ scale: 1 })
+      const scale = containerWidth / viewport.width
+      const scaled = page.getViewport({ scale })
+
+      canvas.width = scaled.width
+      canvas.height = scaled.height
+
+      await page.render({
+        canvasContext: canvas.getContext("2d")!,
+        viewport: scaled,
+      }).promise
+
+      loading = false
+    } catch {
+      failed = true
+      loading = false
+    }
+  })
+</script>
+
+{#if failed}
+  <div class={className}>
+    <svg class="h-14 w-14 text-error/60" fill="currentColor" viewBox="0 0 24 24">
+      <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>
+  </div>
+{:else}
+  {#if loading}
+    <span class="loading loading-spinner loading-sm text-base-content/30"></span>
+  {/if}
+  <canvas bind:this={canvas} class="w-full h-full object-cover {className}" class:hidden={loading}></canvas>
+{/if}

package/src/lib/components/ResizablePanel.svelte

@@ -165,6 +165,7 @@
   style="width: {width}px;"
 >
   {#if enableResize}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="resize-handle left"
       style="right: 0;"
@@ -173,6 +174,7 @@
     >
       <div class="handle-indicator"></div>
     </div>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="resize-handle right"
       style="left: 0;"
@@ -184,6 +186,7 @@
   {/if}
 
   {#if enableDragToSwap}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="drag-handle"
       onmousedown={handleDragStart}

package/src/lib/components/SearchDropdown.svelte

@@ -15,12 +15,16 @@
 	import { tick } from 'svelte';
 	import { slide } from 'svelte/transition';
 
+	import type { Snippet } from 'svelte';
+
 	let {
 		value = '',
 		groups = [],
 		placeholder = 'Filter...',
 		disabled = false,
 		displayValue,
+		colorFn,
+		footer,
 		onChange,
 	}: {
 		value: string;
@@ -28,6 +32,8 @@
 		placeholder?: string;
 		disabled?: boolean;
 		displayValue?: string;
+		colorFn?: (value: string) => string | undefined;
+		footer?: Snippet;
 		onChange: (value: string) => void;
 	} = $props();
 
@@ -47,6 +53,7 @@
 
 	const triggerLabel = $derived(displayValue || selectedOption?.label || value || placeholder);
 	const triggerIcon = $derived(selectedOption?.icon || '');
+	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
 
 	const filteredGroups = $derived.by(() => {
 		if (!searchQuery.trim()) return groups;
@@ -88,6 +95,7 @@
 		type="button"
 		class="sd-trigger"
 		class:sd-disabled={disabled}
+		style={activeColor ? `border-left-color: ${activeColor}; border-left-width: 3px; color: ${activeColor};` : ''}
 		onclick={() => { if (!disabled) open = !open; }}
 		{disabled}
 	>
@@ -144,6 +152,7 @@
 									onclick={() => select(option.value)}
 									class="sd-option"
 									class:sd-option-selected={value === option.value}
+									style={colorFn && colorFn(option.value) ? `border-left-color: ${colorFn(option.value)}; color: ${colorFn(option.value)};` : ''}
 								>
 									{#if option.icon}<span class="sd-option-icon">{option.icon}</span>{/if}
 									<span class="truncate">{option.label}</span>
@@ -158,6 +167,11 @@
 					<li class="sd-empty">No matches for "{searchQuery}"</li>
 				{/if}
 			</ul>
+			{#if footer}
+				<div class="sd-footer">
+					{@render footer()}
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -339,6 +353,10 @@
 		color: var(--sd-success);
 	}
 
+	.sd-footer {
+		border-top: 1px solid var(--sd-border);
+	}
+
 	.sd-empty {
 		padding: 0.75rem;
 		text-align: center;

package/src/lib/components/SidebarUserFooter.svelte

@@ -0,0 +1,34 @@
+<!--
+  SidebarUserFooter — avatar + name (links to account) + sign out button.
+  Placed at the bottom of app sidebar drawers (admin, facilitator, portal).
+  Used in JST template layouts.
+-->
+<script lang="ts">
+  import UserAvatar from './UserAvatar.svelte'
+
+  interface Props {
+    profile?: { full_name?: string | null; avatar_url?: string | null } | null
+    user?: { email?: string | null } | null
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string
+  }
+
+  let {
+    profile,
+    user,
+    accountHref = '/account',
+    signOutHref = '/account/sign_out',
+  }: Props = $props()
+
+  let displayName = $derived(profile?.full_name || user?.email || '?')
+</script>
+
+<div class="flex items-center gap-2 px-2 py-1">
+  <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
+    <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
+    <span class="truncate text-sm">{displayName}</span>
+  </a>
+  <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
+</div>

package/src/lib/components/SortDropdown.svelte

@@ -102,7 +102,8 @@
 
 <div class="flex items-center gap-1">
 	<!-- Sort dropdown -->
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="dropdown dropdown-end flex-shrink-0" onclick={(e) => e.stopPropagation()}>
 		<button
 			tabindex="0"
@@ -134,7 +135,8 @@
 
 	<!-- Filter input (optional) -->
 	{#if showFilter}
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="flex-shrink-0" onclick={(e) => e.stopPropagation()}>
 			<input
 				type="text"

package/src/lib/components/VoicePlayer.svelte

@@ -233,6 +233,7 @@
 
 {#if text && text.trim()}
   <div class="flex items-center gap-1 justify-end">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="relative"
       onmouseenter={() => (showControls = true)}

package/src/lib/components/messaging/MessageAttachment.svelte

@@ -150,6 +150,7 @@
   const canDelete = $derived(showDelete && currentUserId === attachment.uploaded_by)
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="relative group {className}" oncontextmenu={handleContextMenu}>
   {#if loading}
     <div class="flex items-center justify-center bg-base-200 rounded-lg {compact ? 'w-16 h-16' : 'w-48 h-32'}">
@@ -203,7 +204,9 @@
 
 <!-- Context Menu -->
 {#if showContextMenu}
-  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu">
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu" tabindex="-1">
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleOpenInNewTab} role="menuitem">↗ Open in new tab</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleDownload} role="menuitem">⬇ Download</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleCopyLink} role="menuitem">📋 Copy link</button>

package/src/lib/components/messaging/MessageInput.svelte

@@ -334,6 +334,7 @@
 
 <input bind:this={fileInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,video/quicktime,application/pdf" multiple class="hidden" onchange={handleFileSelect} {disabled} />
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="flex flex-col gap-2 relative" ondragenter={handleDragEnter} ondragleave={handleDragLeave} ondragover={handleDragOver} ondrop={handleDrop}>
   {#if isDragging}
     <div class="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center pointer-events-none">

package/src/lib/index.ts

@@ -1,5 +1,6 @@
 // Components — Universal
 export { default as UserAvatar } from './components/UserAvatar.svelte';
+export { default as SidebarUserFooter } from './components/SidebarUserFooter.svelte';
 
 // Components — from JAT IDE
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
@@ -39,6 +40,14 @@ export { default as SpeechForm } from './components/SpeechForm.svelte';
 export { default as ThemeSelector } from './components/ThemeSelector.svelte';
 export { default as Sparkline } from './components/Sparkline.svelte';
 
+// Components — from JST
+export { default as AvatarUpload } from './components/AvatarUpload.svelte';
+export { default as PdfThumbnail } from './components/PdfThumbnail.svelte';
+export { default as FilePicker } from './components/FilePicker.svelte';
+
+// FilePicker types
+export type { FilePickerFile, FilePickerSelection } from './types/filePicker';
+
 // Components — Emoji
 export { default as EmojiPicker } from './components/EmojiPicker.svelte';
 
@@ -51,6 +60,8 @@ export { default as LinkShortener } from './components/LinkShortener.svelte';
 
 // Components — from Marduk
 export { default as SignaturePad } from './components/SignaturePad.svelte';
+export { default as MilestoneCard } from './components/MilestoneCard.svelte';
+export { default as MilestoneTimeline } from './components/MilestoneTimeline.svelte';
 export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
@@ -69,6 +80,9 @@ export type { DisplaySegment } from './components/InlineEdit.svelte';
 export type { SelectOption } from './components/SelectInput.svelte';
 export type { StatusValue } from './components/StatusBadge.svelte';
 
+// Milestone types (from JST contract/billing)
+export type { Milestone, MilestoneStatus } from './types/milestone';
+
 // Booking types (centralized)
 export type {
 	LocationType,
@@ -102,8 +116,17 @@ export {
 	formatDate,
 	getTimeSinceMs,
 	getTimeSinceMinutes,
-	isWithinMinutes
+	isWithinMinutes,
+	formatDateTime,
+	taskAge,
 } from './utils/dateFormatters';
+// Utilities — task display helpers
+export {
+	statusColor,
+	priorityColor,
+	typeIcon,
+	statusLabel,
+} from './utils/taskUtils';
 
 // Utilities — phone formatting
 export {

package/src/lib/types/filePicker.ts

@@ -0,0 +1,14 @@
+export interface FilePickerFile {
+  id: string
+  name: string
+  created_at: string
+  updated_at: string
+  metadata: Record<string, any>
+  scope: "personal" | "team"
+}
+
+export interface FilePickerSelection {
+  file: FilePickerFile
+  url: string
+  downloadUrl: string
+}

package/src/lib/types/milestone.ts

@@ -0,0 +1,22 @@
+/**
+ * Generic milestone/timeline types for stepped workflows.
+ *
+ * Used by MilestoneCard and MilestoneTimeline components.
+ * Projects extend this with domain-specific fields (e.g. stripe_invoice_id).
+ */
+
+export type MilestoneStatus = "pending" | "delivered" | "accepted" | "paid"
+
+export interface Milestone {
+  id: string
+  name: string
+  description: string
+  percentage: number
+  amount: number
+  acceptance_criteria: string
+  status: MilestoneStatus
+  sort_order: number
+  delivered_at: string | null
+  accepted_at: string | null
+  paid_at: string | null
+}

package/src/lib/utils/dateFormatters.ts

@@ -151,3 +151,44 @@ export function getTimeSinceMinutes(timestamp: string | null | undefined): numbe
 export function isWithinMinutes(timestamp: string | null | undefined, minutes: number): boolean {
 	return getTimeSinceMinutes(timestamp) < minutes;
 }
+
+/**
+ * Format date + time for detail views (e.g. "Jan 5, 2:30 PM").
+ * No year — use formatFullDate when year is needed.
+ */
+export function formatDateTime(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+	const date = parseTimestamp(dateStr);
+	if (!date) return '';
+	return date.toLocaleString(undefined, {
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit',
+	});
+}
+
+/**
+ * Color-coded relative age for task rows.
+ * Returns a label (e.g. "3d", "2w") and an oklch color string
+ * that shifts from green (fresh) → blue → amber → orange → red (stale).
+ *
+ * Usage:
+ *   const age = taskAge(task.created_at)
+ *   // <span style="color: {age.color}">{age.label}</span>
+ */
+export function taskAge(dateStr: string): { label: string; color: string } {
+	const now = Date.now();
+	const created = new Date(dateStr).getTime();
+	const minutes = Math.floor((now - created) / 60000);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const weeks = Math.floor(days / 7);
+	const months = Math.floor(days / 30);
+	if (minutes < 60) return { label: `${minutes}m`, color: 'oklch(0.75 0.18 145)' }; // green — fresh
+	if (hours < 24)   return { label: `${hours}h`,   color: 'oklch(0.75 0.18 145)' }; // green
+	if (days < 3)     return { label: `${days}d`,    color: 'oklch(0.70 0.15 200)' }; // blue — recent
+	if (days < 7)     return { label: `${days}d`,    color: 'oklch(0.75 0.15 85)'  }; // amber — aging
+	if (weeks < 4)    return { label: `${weeks}w`,   color: 'oklch(0.65 0.18 50)'  }; // orange — stale
+	return                   { label: `${months}mo`, color: 'oklch(0.65 0.20 25)'  }; // red — old
+}

package/src/lib/utils/taskUtils.ts

@@ -0,0 +1,57 @@
+/**
+ * Shared helpers for project_tasks UI.
+ * Used across all JST-based projects on tasks/feedback pages.
+ */
+
+/**
+ * DaisyUI badge class for a task status value.
+ * Usage: <span class="badge {statusColor(task.status)}">...</span>
+ */
+export function statusColor(status: string): string {
+	switch (status) {
+		case 'submitted':  return 'badge-info';
+		case 'in_progress': return 'badge-warning';
+		case 'completed':
+		case 'accepted':   return 'badge-success';
+		case 'rejected':
+		case 'wontfix':    return 'badge-error';
+		case 'closed':     return 'badge-neutral';
+		default:           return 'badge-ghost';
+	}
+}
+
+/**
+ * Tailwind text class for a task priority value.
+ * Usage: <span class={priorityColor(task.priority)}>...</span>
+ */
+export function priorityColor(priority: string | null | undefined): string {
+	switch (priority) {
+		case 'critical': return 'text-error font-bold';
+		case 'high':     return 'text-warning font-semibold';
+		case 'medium':   return 'text-info';
+		case 'low':      return 'text-base-content/60';
+		default:         return '';
+	}
+}
+
+/**
+ * Emoji icon for a task issue_type value.
+ * Usage: {typeIcon(task.issue_type)} {task.title}
+ */
+export function typeIcon(type: string): string {
+	switch (type) {
+		case 'bug':     return '🐛';
+		case 'feature': return '✨';
+		case 'task':    return '📋';
+		case 'epic':    return '🏔️';
+		default:        return '📄';
+	}
+}
+
+/**
+ * Human-readable label for a task status value.
+ * "in_progress" → "In Progress"
+ */
+export function statusLabel(status: string): string {
+	return status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}