@joewinke/jatui 0.1.6 → 0.1.9

package/src/lib/components/FloatingActionBar.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+	/**
+	 * FloatingActionBar Component
+	 * Fixed bottom-center bar for bulk selection actions on tables/lists.
+	 *
+	 * Usage:
+	 *   <FloatingActionBar
+	 *     count={selectedTasks.size}
+	 *     {actions}
+	 *     {dropdowns}
+	 *     loading={bulkActionLoading}
+	 *     onClear={clearSelection}
+	 *   />
+	 */
+
+	import { fade } from 'svelte/transition';
+
+	export interface ActionButton {
+		/** Unique key */
+		id: string;
+		/** Button label */
+		label: string;
+		/** SVG path string for a 24×24 icon (optional) */
+		icon?: string;
+		/** Color variant */
+		variant?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
+		/** Called when clicked */
+		onclick: () => void;
+	}
+
+	export interface DropdownItem {
+		/** Display label */
+		label: string;
+		/** Optional colored dot (oklch string) */
+		dotColor?: string;
+		/** Optional SVG snippet rendered before the label */
+		iconSnippet?: import('svelte').Snippet;
+		/** Called when this item is clicked */
+		onclick: () => void;
+	}
+
+	export interface ActionDropdown {
+		/** Unique key */
+		id: string;
+		/** Button label */
+		label: string;
+		/** SVG path string for a 24×24 icon (optional) */
+		icon?: string;
+		/** Color variant */
+		variant?: 'default' | 'primary' | 'info' | 'purple';
+		/** Items in the dropdown */
+		items: DropdownItem[];
+	}
+
+	interface Props {
+		/** Number of selected items — bar is hidden when 0 */
+		count: number;
+		/** Primary action buttons */
+		actions?: ActionButton[];
+		/** Dropdown menus (open upward from the bar) */
+		dropdowns?: ActionDropdown[];
+		/** Disables all buttons while true and shows a spinner */
+		loading?: boolean;
+		/** Called when the "Clear" button is clicked */
+		onClear?: () => void;
+		/** Label for the selection count (default: "selected") */
+		countLabel?: string;
+	}
+
+	let {
+		count,
+		actions = [],
+		dropdowns = [],
+		loading = false,
+		onClear,
+		countLabel = 'selected',
+	}: Props = $props();
+
+	let openDropdownId = $state<string | null>(null);
+
+	// Close dropdown on outside click
+	$effect(() => {
+		if (!openDropdownId) return;
+		function handleClick(e: MouseEvent) {
+			if (!(e.target as HTMLElement).closest('.fab-dropdown-wrapper')) {
+				openDropdownId = null;
+			}
+		}
+		const timer = setTimeout(() => document.addEventListener('click', handleClick), 0);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener('click', handleClick);
+		};
+	});
+
+	function variantClass(variant: ActionButton['variant'] | ActionDropdown['variant']): string {
+		switch (variant) {
+			case 'primary': return 'fab-btn-primary';
+			case 'danger':  return 'fab-btn-danger';
+			case 'warning': return 'fab-btn-warning';
+			case 'success': return 'fab-btn-success';
+			case 'info':    return 'fab-btn-info';
+			case 'purple':  return 'fab-btn-purple';
+			default:        return 'fab-btn-default';
+		}
+	}
+</script>
+
+{#if count > 0}
+	<div class="fab" transition:fade={{ duration: 150 }}>
+		<span class="fab-count">{count} {countLabel}</span>
+
+		{#if actions.length > 0}
+			<div class="fab-divider"></div>
+			{#each actions as action}
+				<button
+					type="button"
+					class="fab-btn {variantClass(action.variant)}"
+					onclick={action.onclick}
+					disabled={loading}
+				>
+					{#if action.icon}
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+							<!-- svelte-ignore a11y_consider_explicit_label -->
+							{@html action.icon}
+						</svg>
+					{/if}
+					{action.label}
+				</button>
+			{/each}
+		{/if}
+
+		{#if dropdowns.length > 0}
+			<div class="fab-divider"></div>
+			{#each dropdowns as dropdown}
+				<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+				<div
+					class="fab-dropdown-wrapper"
+					role="group"
+					onclick={(e) => e.stopPropagation()}
+					onkeydown={(e) => e.stopPropagation()}
+				>
+					<button
+						type="button"
+						class="fab-btn {variantClass(dropdown.variant)}"
+						onclick={() => openDropdownId = openDropdownId === dropdown.id ? null : dropdown.id}
+						disabled={loading}
+					>
+						{#if dropdown.icon}
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+								<!-- svelte-ignore a11y_consider_explicit_label -->
+								{@html dropdown.icon}
+							</svg>
+						{/if}
+						{dropdown.label}
+					</button>
+					{#if openDropdownId === dropdown.id}
+						<div class="fab-dropdown" transition:fade={{ duration: 100 }}>
+							{#each dropdown.items as item}
+								<button
+									class="fab-dropdown-item"
+									onclick={() => { item.onclick(); openDropdownId = null; }}
+								>
+									{#if item.dotColor}
+										<span class="fab-dot" style="background: {item.dotColor};"></span>
+									{/if}
+									{#if item.iconSnippet}
+										{@render item.iconSnippet()}
+									{/if}
+									{item.label}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+
+		{#if onClear}
+			<div class="fab-divider"></div>
+			<button type="button" class="fab-btn fab-btn-clear" onclick={onClear} disabled={loading}>
+				Clear
+			</button>
+		{/if}
+
+		{#if loading}
+			<div class="fab-spinner"></div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.fab {
+		position: fixed;
+		bottom: 1.5rem;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 50;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background: oklch(0.16 0.02 250);
+		border: 1px solid oklch(0.30 0.02 250);
+		border-radius: 0.75rem;
+		box-shadow: 0 8px 32px oklch(0.05 0 0 / 0.6), 0 2px 8px oklch(0.05 0 0 / 0.3);
+	}
+
+	.fab-count {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: oklch(0.85 0.02 250);
+		white-space: nowrap;
+	}
+
+	.fab-divider {
+		width: 1px;
+		height: 1.25rem;
+		background: oklch(0.30 0.02 250);
+	}
+
+	.fab-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.625rem;
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.15s;
+		white-space: nowrap;
+	}
+	.fab-btn:disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	/* Variants */
+	.fab-btn-default {
+		background: oklch(0.25 0.02 250 / 0.5);
+		color: oklch(0.75 0.02 250);
+		border-color: oklch(0.35 0.02 250);
+	}
+	.fab-btn-default:hover { background: oklch(0.30 0.02 250); }
+
+	.fab-btn-primary {
+		background: oklch(0.65 0.18 250 / 0.15);
+		color: oklch(0.82 0.14 250);
+		border-color: oklch(0.65 0.18 250 / 0.3);
+	}
+	.fab-btn-primary:hover { background: oklch(0.65 0.18 250 / 0.25); }
+
+	.fab-btn-danger {
+		background: oklch(0.55 0.18 30 / 0.15);
+		color: oklch(0.80 0.15 30);
+		border-color: oklch(0.55 0.18 30 / 0.3);
+	}
+	.fab-btn-danger:hover { background: oklch(0.55 0.18 30 / 0.25); }
+
+	.fab-btn-warning {
+		background: oklch(0.75 0.15 85 / 0.12);
+		color: oklch(0.80 0.12 85);
+		border-color: oklch(0.75 0.15 85 / 0.25);
+	}
+	.fab-btn-warning:hover { background: oklch(0.75 0.15 85 / 0.22); }
+
+	.fab-btn-success {
+		background: oklch(0.55 0.15 145 / 0.15);
+		color: oklch(0.80 0.12 145);
+		border-color: oklch(0.55 0.15 145 / 0.3);
+	}
+	.fab-btn-success:hover { background: oklch(0.55 0.15 145 / 0.25); }
+
+	.fab-btn-info {
+		background: oklch(0.55 0.15 200 / 0.15);
+		color: oklch(0.80 0.12 200);
+		border-color: oklch(0.55 0.15 200 / 0.3);
+	}
+	.fab-btn-info:hover { background: oklch(0.55 0.15 200 / 0.25); }
+
+	.fab-btn-purple {
+		background: oklch(0.55 0.15 300 / 0.15);
+		color: oklch(0.80 0.12 300);
+		border-color: oklch(0.55 0.15 300 / 0.3);
+	}
+	.fab-btn-purple:hover { background: oklch(0.55 0.15 300 / 0.25); }
+
+	.fab-btn-clear {
+		background: transparent;
+		color: oklch(0.65 0.02 250);
+		border-color: transparent;
+	}
+	.fab-btn-clear:hover {
+		background: oklch(0.25 0.02 250);
+		color: oklch(0.80 0.02 250);
+	}
+
+	.fab-spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid oklch(0.35 0.02 250);
+		border-top-color: oklch(0.70 0.15 240);
+		border-radius: 50%;
+		animation: fab-spin 0.6s linear infinite;
+		flex-shrink: 0;
+	}
+	@keyframes fab-spin {
+		to { transform: rotate(360deg); }
+	}
+
+	/* Dropdown */
+	.fab-dropdown-wrapper {
+		position: relative;
+	}
+	.fab-dropdown {
+		position: absolute;
+		bottom: calc(100% + 8px);
+		left: 50%;
+		transform: translateX(-50%);
+		min-width: 160px;
+		background: oklch(0.18 0.02 250);
+		border: 1px solid oklch(0.30 0.02 250);
+		border-radius: 0.5rem;
+		padding: 0.375rem;
+		box-shadow: 0 8px 24px oklch(0.05 0 0 / 0.5);
+		z-index: 60;
+	}
+	.fab-dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.375rem 0.625rem;
+		border: none;
+		background: transparent;
+		color: oklch(0.80 0.02 250);
+		font-size: 0.75rem;
+		text-align: left;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: background 0.1s;
+		white-space: nowrap;
+	}
+	.fab-dropdown-item:hover { background: oklch(0.25 0.02 250); }
+
+	.fab-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+</style>

package/src/lib/components/ImageUpload.svelte

@@ -65,6 +65,7 @@
       class="btn btn-sm btn-circle absolute top-2 right-2 bg-base-100/80"
       onclick={clearImage}
       {disabled}
+      aria-label="Remove image"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
     </button>

package/src/lib/components/MilestoneCard.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Milestone, MilestoneStatus } from '../types/milestone'
+
+	interface LinkedTask {
+		id: string
+		title: string
+		status: string
+	}
+
+	interface Props {
+		milestone: Milestone
+		tasks?: LinkedTask[]
+		isCurrent?: boolean
+		currency?: string
+		onAcceptAndPay?: (milestone: Milestone) => void
+	}
+
+	let { milestone, tasks = [], 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}
+
+		{#if tasks.length > 0}
+			<div class="flex flex-wrap gap-1 mt-2">
+				{#each tasks as task}
+					<span class="badge badge-xs badge-outline gap-1">
+						<span class="w-1.5 h-1.5 rounded-full {task.status === 'deployed' || task.status === 'accepted' || task.status === 'closed' ? 'bg-success' : task.status === 'in_progress' || task.status === 'submitted' ? 'bg-warning' : 'bg-base-300'}"></span>
+						{task.title}
+					</span>
+				{/each}
+			</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,91 @@
+<script lang="ts">
+	import type { Milestone } from '../types/milestone'
+	import MilestoneCard from './MilestoneCard.svelte'
+
+	interface LinkedTask {
+		id: string
+		title: string
+		status: string
+	}
+
+	interface Props {
+		milestones: Milestone[]
+		linkedTasks?: Record<string, LinkedTask[]>
+		currency?: string
+		onAcceptAndPay?: (milestone: Milestone) => void
+	}
+
+	let { milestones, linkedTasks = {}, 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}
+						tasks={linkedTasks[milestone.id] || []}
+						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/ResizableDivider.svelte

@@ -121,6 +121,8 @@
 	const isExpanded = $derived(isDragging || isHovering || isNearby);
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	bind:this={dividerElement}
 	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
@@ -128,7 +130,7 @@
 	class:dragging={isDragging}
 	role="separator"
 	aria-orientation="horizontal"
-	aria-expanded={!isCollapsed}
+	aria-label={isCollapsed ? 'Expand panel' : 'Resize panel'}
 	tabindex="0"
 	onmousedown={handleMouseDown}
 	onmouseenter={handleMouseEnter}

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}