@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/MilestoneCard.svelte

@@ -1,98 +0,0 @@
-<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'
-		: ''}"
->
-	<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

@@ -1,91 +0,0 @@
-<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-[0.9375rem] 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

@@ -1,244 +0,0 @@
-<script lang="ts">
-	/**
-	 * Modal Component
-	 *
-	 * Overlay dialog with focus trap, backdrop click, escape key, and body scroll lock.
-	 * Converted from Svelte 4 to Svelte 5 runes.
-	 */
-
-	import { onMount } from 'svelte';
-	import { fly, fade } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
-
-	interface Props {
-		open?: boolean;
-		title?: string;
-		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-		showCloseButton?: boolean;
-		closeOnBackdrop?: boolean;
-		closeOnEscape?: boolean;
-		showHeader?: boolean;
-		showFooter?: boolean;
-		class?: string;
-		contentClass?: string;
-		ariaLabel?: string;
-		dismissible?: boolean;
-		zIndex?: number;
-		/**
-		 * When true (default), keydown events fired inside the modal are stopped
-		 * from propagating to window — preventing page-level list/keyboard
-		 * navigation handlers (listNav-style) from receiving arrow keys, j/k,
-		 * vim chords, digit counts, etc. while the modal is open.
-		 *
-		 * Free-text fields (INPUT, TEXTAREA, contentEditable) are intentionally
-		 * excluded so normal typing still works. Set to false only when the
-		 * consumer needs custom window-level key handling even while the modal
-		 * is open.
-		 */
-		trapKeys?: boolean;
-		onclose?: () => void;
-		onopen?: () => void;
-		header?: import('svelte').Snippet;
-		footer?: import('svelte').Snippet;
-		children?: import('svelte').Snippet;
-	}
-
-	let {
-		open = $bindable(false),
-		title = '',
-		size = 'md',
-		showCloseButton = true,
-		closeOnBackdrop = true,
-		closeOnEscape = true,
-		showHeader = true,
-		showFooter = false,
-		class: className = '',
-		contentClass = '',
-		ariaLabel = '',
-		dismissible = true,
-		zIndex = 1000,
-		trapKeys = true,
-		onclose,
-		onopen,
-		header,
-		footer,
-		children
-	}: Props = $props();
-
-	let modalElement: HTMLDialogElement | undefined = $state();
-	let previousFocus: HTMLElement | null = null;
-
-	// Respect prefers-reduced-motion: skip the entrance/exit transitions.
-	const reducedMotion =
-		typeof window !== 'undefined' &&
-		window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-
-	const sizeClass = $derived(
-		{ sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', full: 'max-w-full h-full' }[size]
-	);
-
-	const modalClass = $derived(['modal', open ? 'modal-open' : '', className].filter(Boolean).join(' '));
-
-	const contentClasses = $derived(
-		[
-			'modal-box relative bg-base-100 text-base-content',
-			sizeClass,
-			size === 'full' ? 'h-full rounded-none' : '',
-			contentClass
-		]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	$effect(() => {
-		if (typeof document === 'undefined') return;
-		if (open) {
-			previousFocus = document.activeElement as HTMLElement;
-			document.body.style.overflow = 'hidden';
-			requestAnimationFrame(() => modalElement?.focus());
-			onopen?.();
-		} else {
-			document.body.style.overflow = '';
-			previousFocus?.focus();
-			previousFocus = null;
-		}
-	});
-
-	function close() {
-		if (dismissible) {
-			open = false;
-			onclose?.();
-		}
-	}
-
-	function handleBackdropClick(event: Event) {
-		if (closeOnBackdrop && event.target === event.currentTarget) {
-			close();
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		// Stop keydown events from bubbling to window while the modal is open.
-		// This prevents page-level keyboard navigation (listNav-style handlers
-		// on window) from reacting to arrow keys, j/k, vim chords, digit counts,
-		// etc. typed inside the modal.
-		//
-		// Free-text fields are excluded: page-level handlers already ignore them,
-		// and we must not interfere with normal typing or textarea shortcuts.
-		if (trapKeys) {
-			const el = document.activeElement as HTMLElement | null;
-			const tag = el?.tagName;
-			const isTextField =
-				!!el && (tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable === true);
-			if (!isTextField) event.stopPropagation();
-		}
-
-		if (event.key === 'Tab') {
-			trapFocus(event);
-		}
-	}
-
-	function handleWindowKeyDown(event: KeyboardEvent) {
-		if (open && event.key === 'Escape' && closeOnEscape) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
-			close();
-		}
-	}
-
-	function trapFocus(event: KeyboardEvent) {
-		if (!modalElement) return;
-		const focusableElements = modalElement.querySelectorAll(
-			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-		);
-		const firstFocusable = focusableElements[0] as HTMLElement;
-		const lastFocusable = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-		if (event.shiftKey) {
-			if (document.activeElement === firstFocusable) {
-				event.preventDefault();
-				lastFocusable.focus();
-			}
-		} else {
-			if (document.activeElement === lastFocusable) {
-				event.preventDefault();
-				firstFocusable.focus();
-			}
-		}
-	}
-
-	onMount(() => {
-		return () => {
-			if (typeof document !== 'undefined') {
-				document.body.style.overflow = '';
-			}
-		};
-	});
-</script>
-
-<svelte:window onkeydown={handleWindowKeyDown} />
-
-{#if open}
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<dialog
-		bind:this={modalElement}
-		class={modalClass}
-		style="z-index: {zIndex}"
-		aria-modal="true"
-		aria-label={ariaLabel || title}
-		open
-		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} transition:fade={{ duration: reducedMotion ? 0 : 200 }}>
-			<div class={contentClasses} in:fly={{ y: reducedMotion ? 0 : 12, duration: reducedMotion ? 0 : 220, easing: cubicOut }} out:fade={{ duration: reducedMotion ? 0 : 150 }}>
-				{#if showHeader && (title || showCloseButton || header)}
-					<div class="flex items-center justify-between mb-4">
-						{#if header}
-							{@render header()}
-						{:else if title}
-							<h2 class="text-lg font-semibold">{title}</h2>
-						{/if}
-
-						{#if showCloseButton && dismissible}
-							<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={close} aria-label="Close modal">
-								<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>
-						{/if}
-					</div>
-				{/if}
-
-				<div class="modal-content">
-					{#if children}
-						{@render children()}
-					{/if}
-				</div>
-
-				{#if footer}
-					<div class="modal-action mt-6">
-						{@render footer()}
-					</div>
-				{/if}
-			</div>
-		</div>
-	</dialog>
-{/if}
-
-<style>
-	.modal-backdrop {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-</style>

package/src/lib/components/PDFViewer.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte"
-
-  interface Props {
-    fileId: string
-    fileName?: string
-    pdfUrl?: string
-    class?: string
-  }
-
-  let { fileId, fileName = "document.pdf", class: className = "" }: Props = $props()
-
-  let pageCount = $state(0)
-  let currentPage = $state(1)
-  let loading = $state(true)
-  let pageLoading = $state(false)
-  let error = $state<string | null>(null)
-  let imgSrc = $state<string | null>(null)
-
-  onMount(async () => {
-    try {
-      const res = await fetch(`/api/files/${fileId}/pdf-info`)
-      if (!res.ok) throw new Error(`Failed to load PDF info: ${res.status}`)
-      const data = await res.json()
-      pageCount = data.pageCount ?? 1
-    } catch (err) {
-      error = err instanceof Error ? err.message : "Failed to load PDF"
-    } finally {
-      loading = false
-    }
-    if (!error) loadPage(1)
-  })
-
-  async function loadPage(page: number) {
-    pageLoading = true
-    imgSrc = null
-    try {
-      const res = await fetch(`/api/files/${fileId}/pdf-page/${page}?scale=2`)
-      if (!res.ok) throw new Error(`Failed to render page ${page}`)
-      const blob = await res.blob()
-      imgSrc = URL.createObjectURL(blob)
-      currentPage = page
-    } catch (err) {
-      error = err instanceof Error ? err.message : "Failed to load page"
-    } finally {
-      pageLoading = false
-    }
-  }
-
-  function prevPage() {
-    if (currentPage > 1) loadPage(currentPage - 1)
-  }
-
-  function nextPage() {
-    if (currentPage < pageCount) loadPage(currentPage + 1)
-  }
-</script>
-
-<div class="flex flex-col h-full {className}">
-  {#if loading}
-    <div class="flex-1 flex items-center justify-center text-base-content/40 text-sm">
-      Loading PDF…
-    </div>
-  {:else if error}
-    <div class="flex-1 flex items-center justify-center">
-      <p class="text-error text-sm text-center px-4">{error}</p>
-    </div>
-  {:else}
-    <!-- Viewer area -->
-    <div class="flex-1 min-h-0 flex items-center justify-center bg-base-200/30 p-4 overflow-auto">
-      {#if pageLoading}
-        <div class="text-base-content/40 text-sm">Rendering page…</div>
-      {:else if imgSrc}
-        <img
-          src={imgSrc}
-          alt="Page {currentPage} of {fileName}"
-          class="max-w-full max-h-full object-contain shadow-md rounded"
-        />
-      {/if}
-    </div>
-
-    <!-- Pagination controls -->
-    {#if pageCount > 1}
-      <div class="flex items-center justify-center gap-3 py-2 border-t border-base-300 text-sm">
-        <button
-          type="button"
-          class="btn btn-ghost btn-xs"
-          onclick={prevPage}
-          disabled={currentPage <= 1}
-          aria-label="Previous page"
-        >‹</button>
-        <span class="text-base-content/60 tabular-nums">
-          {currentPage} / {pageCount}
-        </span>
-        <button
-          type="button"
-          class="btn btn-ghost btn-xs"
-          onclick={nextPage}
-          disabled={currentPage >= pageCount}
-          aria-label="Next page"
-        >›</button>
-      </div>
-    {/if}
-  {/if}
-</div>

package/src/lib/components/PdfThumbnail.svelte

@@ -1,63 +0,0 @@
-<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 = $state<HTMLCanvasElement | null>(null)
-  let loading = $state(true)
-  let failed = $state(false)
-
-  onMount(async () => {
-    if (!canvas) return
-    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")!,
-        canvas,
-        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}