@joewinke/jatui 0.1.24 → 0.1.26

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value?: string | null;
+    uploadEndpoint?: string;
+    onComplete?: (url: string) => void;
+    accept?: string;
+};
+declare const MediaWorkbench: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MediaWorkbench = ReturnType<typeof MediaWorkbench>;
+export default MediaWorkbench;

package/dist/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'
+		: ''}"
+>
+	<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/dist/components/MilestoneCard.svelte.d.ts

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

package/dist/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-[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/dist/components/MilestoneTimeline.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Milestone } from '../types/milestone';
+interface LinkedTask {
+    id: string;
+    title: string;
+    status: string;
+}
+interface Props {
+    milestones: Milestone[];
+    linkedTasks?: Record<string, LinkedTask[]>;
+    currency?: string;
+    onAcceptAndPay?: (milestone: Milestone) => void;
+}
+declare const MilestoneTimeline: import("svelte").Component<Props, {}, "">;
+type MilestoneTimeline = ReturnType<typeof MilestoneTimeline>;
+export default MilestoneTimeline;

package/dist/components/Modal.svelte

@@ -0,0 +1,244 @@
+<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/dist/components/Modal.svelte.d.ts

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

package/dist/components/PDFViewer.svelte

@@ -0,0 +1,105 @@
+<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/dist/components/PDFViewer.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    fileId: string;
+    fileName?: string;
+    pdfUrl?: string;
+    class?: string;
+}
+declare const PDFViewer: import("svelte").Component<Props, {}, "">;
+type PDFViewer = ReturnType<typeof PDFViewer>;
+export default PDFViewer;

package/dist/components/PdfThumbnail.svelte

@@ -0,0 +1,63 @@
+<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}