@joewinke/jatui 0.1.11 → 0.1.19

package/src/lib/components/MilestoneCard.svelte

@@ -42,7 +42,7 @@
 
 <div
 	class="card bg-base-100 border border-base-300 {isCurrent
-		? 'ring-2 ring-primary/50 shadow-lg'
+		? 'ring-2 ring-primary/50'
 		: ''}"
 >
 	<div class="card-body p-4 gap-2">

package/src/lib/components/MilestoneTimeline.svelte

@@ -34,7 +34,7 @@
 
 <div class="space-y-1">
 	<!-- Progress summary -->
-	<div class="flex items-center justify-between text-sm mb-4">
+	<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>

package/src/lib/components/Modal.svelte

@@ -7,6 +7,8 @@
 	 */
 
 	import { onMount } from 'svelte';
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
 	interface Props {
 		open?: boolean;
@@ -22,6 +24,18 @@
 		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;
@@ -43,6 +57,7 @@
 		ariaLabel = '',
 		dismissible = true,
 		zIndex = 1000,
+		trapKeys = true,
 		onclose,
 		onopen,
 		header,
@@ -53,6 +68,11 @@
 	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]
 	);
@@ -98,6 +118,21 @@
 	}
 
 	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);
 		}
@@ -157,8 +192,8 @@
 	>
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="modal-backdrop" onclick={handleBackdropClick}>
-			<div class={contentClasses}>
+		<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}
@@ -168,7 +203,7 @@
 						{/if}
 
 						{#if showCloseButton && dismissible}
-							<button type="button" class="btn btn-sm btn-circle btn-primary" onclick={close} aria-label="Close modal">
+							<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"
@@ -188,7 +223,7 @@
 					{/if}
 				</div>
 
-				{#if showFooter && footer}
+				{#if footer}
 					<div class="modal-action mt-6">
 						{@render footer()}
 					</div>

package/src/lib/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/src/lib/components/PdfThumbnail.svelte

@@ -9,11 +9,12 @@
   }
 
   let { src, class: className = "" }: Props = $props()
-  let canvas: HTMLCanvasElement
+  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(
@@ -36,6 +37,7 @@
 
       await page.render({
         canvasContext: canvas.getContext("2d")!,
+        canvas,
         viewport: scaled,
       }).promise
 

package/src/lib/components/PhoneInput.svelte

@@ -138,7 +138,7 @@
 
 		{#if dropdownOpen}
 			<div
-				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-100 border border-base-300 rounded-lg shadow-lg"
+				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-200 border border-base-300 rounded-lg"
 				role="listbox"
 			>
 				<div class="sticky top-0 bg-base-100 p-2 border-b border-base-300">

package/src/lib/components/ResizablePanel.svelte

@@ -271,13 +271,13 @@
     width: 30px;
     height: 4px;
     border-radius: 2px;
-    background-color: var(--color-base-300, #cbd5e1);
+    background-color: var(--color-base-300, oklch(0.82 0.03 255));
     transition: background-color 0.2s ease;
   }
 
   .drag-handle:hover .drag-indicator,
   .dragging .drag-indicator {
-    background-color: var(--color-primary, #3b82f6);
+    background-color: var(--color-primary, oklch(0.64 0.18 259));
   }
 
   .panel-content {
@@ -297,9 +297,9 @@
   .drag-preview-inner {
     width: 100px;
     height: 60px;
-    background-color: var(--color-primary, #3b82f6);
+    background-color: var(--color-primary, oklch(0.64 0.18 259));
     opacity: 0.3;
     border-radius: 4px;
-    border: 2px solid var(--color-primary, #3b82f6);
+    border: 2px solid var(--color-primary, oklch(0.64 0.18 259));
   }
 </style>

package/src/lib/components/SearchDropdown.svelte

@@ -40,7 +40,7 @@
 
 	let open = $state(false);
 	let searchQuery = $state('');
-	let searchInput: HTMLInputElement | undefined;
+	let searchInput = $state<HTMLInputElement | undefined>(undefined);
 	let containerRef: HTMLDivElement | undefined;
 
 	// Find the currently selected option across all groups
@@ -104,7 +104,7 @@
 		type="button"
 		class="sd-trigger"
 		class:sd-disabled={disabled}
-		style={activeColor ? `border-left-color: ${activeColor}; border-left-width: 3px; color: ${activeColor};` : ''}
+		style={activeColor ? `color: ${activeColor};` : ''}
 		onclick={() => { if (!disabled) open = !open; }}
 		{disabled}
 	>
@@ -169,7 +169,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)};` : ''}
+									style={colorFn && colorFn(option.value) ? `color: ${colorFn(option.value)};` : ''}
 								>
 									{#if option.image}
 										<img src={option.image} alt="" class="sd-avatar" />
@@ -189,7 +189,12 @@
 						{/each}
 					{/each}
 				{:else}
-					<li class="sd-empty">No matches for "{searchQuery}"</li>
+					<li class="sd-empty">
+							<svg class="sd-empty-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z" />
+							</svg>
+							No matches for "{searchQuery}"
+						</li>
 				{/if}
 			</ul>
 			{#if footer}
@@ -210,7 +215,7 @@
 		--sd-border: var(--sd-color-border, color-mix(in oklch, var(--color-base-content, CanvasText) 20%, transparent));
 		--sd-text: var(--sd-color-text, var(--color-base-content, CanvasText));
 		--sd-text-muted: var(--sd-color-text-muted, color-mix(in oklch, var(--color-base-content, CanvasText) 50%, transparent));
-		--sd-text-label: var(--sd-color-text-label, color-mix(in oklch, var(--color-primary, LinkText) 70%, transparent));
+		--sd-text-label: var(--sd-color-text-label, color-mix(in oklch, var(--color-base-content, CanvasText) 45%, transparent));
 		--sd-accent: var(--sd-color-accent, var(--color-primary, LinkText));
 		--sd-success: var(--sd-color-success, var(--color-success, green));
 	}
@@ -265,7 +270,7 @@
 		justify-content: center;
 		font-size: 0.6rem;
 		font-weight: 700;
-		color: #fff;
+		color: oklch(1 0 0);
 		line-height: 1;
 	}
 
@@ -347,11 +352,10 @@
 		padding: 0.375rem 0.75rem 0.125rem;
 	}
 	.sd-group-label span {
-		font-size: 0.75em;
+		font-size: 0.8125rem;
 		font-family: inherit;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		font-weight: 400;
+		letter-spacing: 0.005em;
 		color: var(--sd-text-label);
 	}
 
@@ -368,7 +372,6 @@
 		cursor: pointer;
 		background: transparent;
 		border: none;
-		border-left: 2px solid transparent;
 		color: var(--sd-text);
 	}
 	.sd-option:hover {
@@ -376,7 +379,7 @@
 	}
 	.sd-option-selected {
 		background: var(--sd-bg-selected);
-		border-left-color: var(--sd-accent);
+		font-weight: 600;
 	}
 
 	.sd-option-icon {
@@ -399,10 +402,20 @@
 	}
 
 	.sd-empty {
-		padding: 0.75rem;
+		padding: 1rem 0.75rem;
 		text-align: center;
 		font-size: inherit;
 		font-family: inherit;
 		color: var(--sd-text-muted);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.sd-empty-icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		opacity: 0.35;
 	}
 </style>

package/src/lib/components/SelectInput.svelte

@@ -115,11 +115,33 @@
 		document.addEventListener('click', handleClickOutside);
 		return () => document.removeEventListener('click', handleClickOutside);
 	});
+
+	// Error-state shake (transitions.dev). Shakes the whole control wrapper when
+	// `error` becomes set. See TextInput for the rationale.
+	let hadError = false;
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError && selectElement) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				selectElement.classList.remove('t-input-shake');
+				void selectElement.offsetWidth;
+				selectElement.classList.add('t-input-shake');
+			}
+		}
+		hadError = hasError;
+	});
 </script>
 
-<div class="form-control w-full" bind:this={selectElement}>
+<div
+	class="form-control w-full"
+	bind:this={selectElement}
+	onanimationend={() => selectElement?.classList.remove('t-input-shake')}
+>
 	<label for={id} class="label">
-		<span class="label-text font-medium">
+		<span class="text-[0.8125rem] font-medium text-base-content/85">
 			{label}
 			{#if required}
 				<span class="text-error ml-1">*</span>
@@ -205,11 +227,11 @@
 
 	{#if error}
 		<div class="label">
-			<span id="{id}-error" class="label-text-alt text-error" role="alert">{error}</span>
+			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
 		</div>
 	{:else if helpText}
 		<div class="label">
-			<span id="{id}-help" class="label-text-alt text-base-content/70">{helpText}</span>
+			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
 		</div>
 	{/if}
 </div>

package/src/lib/components/SidebarUserFooter.svelte

@@ -28,7 +28,7 @@
 <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>
+    <span class="truncate text-[0.9375rem]">{displayName}</span>
   </a>
   <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
 </div>

package/src/lib/components/SignaturePad.svelte

@@ -12,7 +12,7 @@
 		onSignatureChange,
 		width = 400,
 		height = 150,
-		strokeColor = '#000',
+		strokeColor = '',
 		strokeWidth = 2,
 		label = 'Signature',
 		required = false,
@@ -41,7 +41,10 @@
 		const ctx = canvas.getContext('2d');
 		if (!ctx) return;
 
-		ctx.strokeStyle = strokeColor;
+		const resolvedStroke = strokeColor ||
+			getComputedStyle(canvas).getPropertyValue('--color-base-content').trim() ||
+			'oklch(0.21 0 0)';
+		ctx.strokeStyle = resolvedStroke;
 		ctx.lineWidth = strokeWidth;
 		ctx.lineCap = 'round';
 		ctx.lineJoin = 'round';
@@ -73,7 +76,7 @@
 		}
 
 		function draw(e: MouseEvent | TouchEvent) {
-			if (!isDrawing) return;
+			if (!isDrawing || !ctx) return;
 			e.preventDefault();
 
 			const coords = getCoordinates(e);
@@ -148,7 +151,8 @@
 		</div>
 	{/if}
 
-	<div class="border-2 border-base-300 rounded-lg bg-white overflow-hidden relative">
+	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
+		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
 		<canvas
 			bind:this={canvas}
 			{width}