@joewinke/jatui 0.1.10 → 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

@@ -1,92 +1,212 @@
 <script lang="ts">
 	/**
-	 * PhoneInput Component
+	 * PhoneInput Component — International phone number input.
 	 *
-	 * Tel input with basic validation and format indicator.
-	 * Converted from Svelte 4 to Svelte 5 runes.
+	 * Country selector dropdown (flag + dial code + search) alongside a tel input.
+	 * Formats numbers with libphonenumber-js AsYouType as the user types.
+	 * Exposes the parsed E.164 value via `bind:value` and a hidden form field
+	 * named `name` so it submits cleanly with native `<form>` actions.
+	 *
+	 * Auto-detects country when the user's input begins with a `+` prefix.
 	 */
+	import { AsYouType, parsePhoneNumberFromString, type CountryCode } from "libphonenumber-js";
+	import { listCountries, PRIORITY_COUNTRIES, type CountryOption } from "../utils/phone";
 
-	interface Props {
-		label: string;
+	type Props = {
+		name?: string;
 		value?: string;
+		defaultCountry?: CountryCode;
 		required?: boolean;
-		disabled?: boolean;
-		error?: string;
-		helpText?: string;
 		placeholder?: string;
-		class?: string;
 		id?: string;
-		name?: string;
-		oninput?: (value: string, isValid: boolean) => void;
-	}
+		class?: string;
+		disabled?: boolean;
+		autocomplete?: HTMLInputElement["autocomplete"];
+	};
 
 	let {
-		label,
-		value = $bindable(''),
+		name = "",
+		value = $bindable(""),
+		defaultCountry = "US",
 		required = false,
+		placeholder = "Phone number",
+		id,
+		class: klass = "",
 		disabled = false,
-		error = '',
-		helpText = '',
-		placeholder = '',
-		class: className = '',
-		id = `phone-input-${Math.random().toString(36).substr(2, 9)}`,
-		name = '',
-		oninput
+		autocomplete = "tel" as HTMLInputElement["autocomplete"],
 	}: Props = $props();
 
-	const displayPlaceholder = $derived(placeholder || '(555) 123-4567');
-	const isValid = $derived(
-		/^[\d\s\-\(\)\.+]{10,}$/.test(value) && value.replace(/\D/g, '').length === 10
+	const all = listCountries();
+	const priorityOptions = PRIORITY_COUNTRIES.map((c) => all.find((o) => o.code === c)).filter(
+		(o): o is CountryOption => !!o,
 	);
+	const otherOptions = all.filter((o) => !PRIORITY_COUNTRIES.includes(o.code));
 
-	function handleInput(event: Event) {
-		const target = event.target as HTMLInputElement;
-		value = target.value;
-		oninput?.(value, isValid);
+	function initialFrom(e164: string): { country: CountryCode; national: string } {
+		if (e164) {
+			const parsed = parsePhoneNumberFromString(e164);
+			if (parsed?.country) {
+				return { country: parsed.country, national: parsed.formatNational() };
+			}
+		}
+		return { country: defaultCountry, national: "" };
 	}
+
+	const init = initialFrom(value ?? "");
+	let country = $state<CountryCode>(init.country);
+	let display = $state<string>(init.national);
+	let dropdownOpen = $state(false);
+	let search = $state("");
+
+	const current = $derived(all.find((o) => o.code === country) ?? all[0]);
+
+	const filteredOthers = $derived.by(() => {
+		const q = search.trim().toLowerCase();
+		if (!q) return otherOptions;
+		return otherOptions.filter(
+			(o) => o.name.toLowerCase().includes(q) || o.dialCode.includes(q) || o.code.toLowerCase().includes(q),
+		);
+	});
+
+	function updateE164(raw: string, cc: CountryCode) {
+		const parsed = parsePhoneNumberFromString(raw, cc);
+		value = parsed?.isValid() ? parsed.number : "";
+	}
+
+	function onInput(e: Event) {
+		const raw = (e.target as HTMLInputElement).value;
+		if (raw.startsWith("+")) {
+			const parsed = parsePhoneNumberFromString(raw);
+			if (parsed?.country) {
+				country = parsed.country;
+				display = parsed.formatNational();
+				value = parsed.isValid() ? parsed.number : "";
+				return;
+			}
+			display = raw;
+			value = "";
+			return;
+		}
+		const formatter = new AsYouType(country);
+		display = formatter.input(raw);
+		updateE164(raw, country);
+	}
+
+	function pickCountry(code: CountryCode) {
+		country = code;
+		dropdownOpen = false;
+		search = "";
+		updateE164(display, code);
+	}
+
+	function toggleDropdown() {
+		dropdownOpen = !dropdownOpen;
+		if (dropdownOpen) search = "";
+	}
+
+	function onBlur() {
+		setTimeout(() => (dropdownOpen = false), 150);
+	}
+
+	$effect(() => {
+		if (!value) return;
+		const parsed = parsePhoneNumberFromString(value);
+		if (parsed?.country && parsed.country !== country) {
+			country = parsed.country;
+			display = parsed.formatNational();
+		}
+	});
 </script>
 
-<div class="form-control w-full">
-	<label for={id} class="label">
-		<span class="label-text font-medium">
-			{label}
-			{#if required}
-				<span class="text-error ml-1">*</span>
-			{/if}
-		</span>
-	</label>
+<div class="flex w-full {klass}">
+	<div class="relative">
+		<button
+			type="button"
+			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start"
+			onclick={toggleDropdown}
+			{disabled}
+			aria-label="Select country code"
+			aria-expanded={dropdownOpen}
+			aria-haspopup="listbox"
+		>
+			<span class="text-lg leading-none">{current?.flag}</span>
+			<span class="text-sm font-mono">{current?.dialCode}</span>
+			<svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+
+		{#if dropdownOpen}
+			<div
+				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">
+					<input
+						type="text"
+						class="input input-sm input-bordered w-full"
+						placeholder="Search country…"
+						bind:value={search}
+						aria-label="Search country"
+					/>
+				</div>
+				<ul class="py-1">
+					{#if !search}
+						{#each priorityOptions as opt (opt.code)}
+							<li>
+								<button
+									type="button"
+									class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 {opt.code === country ? 'bg-primary/10' : ''}"
+									onclick={() => pickCountry(opt.code)}
+									role="option"
+									aria-selected={opt.code === country}
+								>
+									<span class="text-lg leading-none">{opt.flag}</span>
+									<span class="flex-1 text-left">{opt.name}</span>
+									<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+								</button>
+							</li>
+						{/each}
+						<li><div class="border-t border-base-300 my-1"></div></li>
+					{/if}
+					{#each filteredOthers as opt (opt.code)}
+						<li>
+							<button
+								type="button"
+								class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 {opt.code === country ? 'bg-primary/10' : ''}"
+								onclick={() => pickCountry(opt.code)}
+								role="option"
+								aria-selected={opt.code === country}
+							>
+								<span class="text-lg leading-none">{opt.flag}</span>
+								<span class="flex-1 text-left">{opt.name}</span>
+								<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+							</button>
+						</li>
+					{/each}
+					{#if filteredOthers.length === 0}
+						<li class="px-3 py-2 text-sm text-base-content/60">No matches</li>
+					{/if}
+				</ul>
+			</div>
+		{/if}
+	</div>
 
 	<input
-		{id}
-		{name}
 		type="tel"
+		class="input input-bordered rounded-l-none flex-1 min-w-0"
+		{id}
+		{placeholder}
 		{required}
 		{disabled}
-		placeholder={displayPlaceholder}
-		{value}
-		oninput={handleInput}
-		pattern="[0-9\s\-\(\)\.+]*"
-		class="input input-bordered w-full {error ? 'input-error' : ''} {className}"
-		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
-		aria-invalid={error ? 'true' : 'false'}
-		autocomplete="tel"
+		{autocomplete}
+		value={display}
+		oninput={onInput}
+		onblur={onBlur}
+		aria-describedby={id ? `${id}-help` : undefined}
 	/>
 
-	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="label-text-alt 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>
-		</div>
-	{/if}
-
-	{#if value && !error}
-		<div class="label">
-			<span class="label-text-alt {isValid ? 'text-success' : 'text-warning'}">
-				{isValid ? '✓ Valid phone number' : '⚠ Invalid phone number'}
-			</span>
-		</div>
+	{#if name}
+		<input type="hidden" {name} {value} />
 	{/if}
 </div>

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>