@joewinke/jatui 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -44,6 +44,7 @@
     "vite": "^6.0.0"
   },
   "dependencies": {
+    "libphonenumber-js": "^1.12.41",
     "pdfjs-dist": "^5.6.205",
     "svelte-dnd-action": "^0.9.69"
   }

package/src/lib/components/ContextMenu.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	/**
+	 * ContextMenu Component
+	 *
+	 * Floating right-click (or programmatic) menu positioned at a cursor point.
+	 * Headless primitive that handles positioning, viewport clamping, and
+	 * dismiss behavior (click-outside, Escape, right-click elsewhere).
+	 *
+	 * Usage:
+	 *   let cm = $state({ open: false, x: 0, y: 0, target: null })
+	 *
+	 *   <button oncontextmenu={(e) => {
+	 *     e.preventDefault()
+	 *     cm = { open: true, x: e.clientX, y: e.clientY, target: row }
+	 *   }}>Row</button>
+	 *
+	 *   <ContextMenu
+	 *     bind:open={cm.open}
+	 *     x={cm.x}
+	 *     y={cm.y}
+	 *     header={cm.target?.name}
+	 *     items={[
+	 *       { label: "Preview",    onSelect: () => preview(cm.target) },
+	 *       { label: "Copy URL",   onSelect: () => copy(cm.target) },
+	 *       { divider: true },
+	 *       { label: "Delete", variant: "danger", onSelect: () => del(cm.target) },
+	 *     ]}
+	 *   />
+	 */
+
+	type ActionItem = {
+		label: string;
+		onSelect: () => void;
+		variant?: 'default' | 'danger';
+		disabled?: boolean;
+	};
+	type DividerItem = { divider: true };
+	export type ContextMenuItem = ActionItem | DividerItem;
+
+	interface Props {
+		/** Whether the menu is currently shown. Bindable. */
+		open: boolean;
+		/** Viewport x coordinate to anchor the top-left corner to (e.g. event.clientX). */
+		x: number;
+		/** Viewport y coordinate to anchor the top-left corner to (e.g. event.clientY). */
+		y: number;
+		/** Ordered list of items and dividers to render. */
+		items: ContextMenuItem[];
+		/** Optional small italic label rendered above the items (e.g. a filename). */
+		header?: string;
+		/** Estimated menu width in px, used for viewport clamping. Default 200. */
+		estimatedWidth?: number;
+		/** Estimated menu height in px, used for viewport clamping. Default 200. */
+		estimatedHeight?: number;
+		/** Stacking context z-index. Default 70 (above DaisyUI modals at 50). */
+		zIndex?: number;
+		/** Additional CSS class for the menu element. */
+		class?: string;
+		/** Called after the menu closes, regardless of cause. */
+		onClose?: () => void;
+	}
+
+	let {
+		open = $bindable(false),
+		x,
+		y,
+		items,
+		header,
+		estimatedWidth = 200,
+		estimatedHeight = 200,
+		zIndex = 70,
+		class: className = '',
+		onClose
+	}: Props = $props();
+
+	function close() {
+		if (!open) return;
+		open = false;
+		onClose?.();
+	}
+
+	function handleSelect(item: ActionItem) {
+		if (item.disabled) return;
+		item.onSelect();
+		close();
+	}
+
+	function clamp(value: number, max: number, pad = 8) {
+		if (value + pad > max) return Math.max(pad, max - pad);
+		return Math.max(pad, value);
+	}
+
+	let clampedX = $derived(
+		typeof window === 'undefined' ? x : clamp(x, window.innerWidth - estimatedWidth)
+	);
+	let clampedY = $derived(
+		typeof window === 'undefined' ? y : clamp(y, window.innerHeight - estimatedHeight)
+	);
+</script>
+
+{#if open}
+	<!-- Invisible full-viewport overlay — captures click/right-click to dismiss -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0"
+		style="z-index: {zIndex - 1};"
+		onclick={close}
+		oncontextmenu={(e) => {
+			e.preventDefault();
+			close();
+		}}
+	></div>
+
+	<div
+		role="menu"
+		tabindex="-1"
+		class="fixed min-w-[200px] bg-base-100 border border-base-300 rounded-md shadow-lg py-1 {className}"
+		style="left: {clampedX}px; top: {clampedY}px; z-index: {zIndex};"
+		onkeydown={(e) => e.key === 'Escape' && close()}
+	>
+		{#if header}
+			<p
+				class="px-3 py-1.5 text-[11px] italic text-base-content/60 truncate border-b border-base-200"
+			>
+				{header}
+			</p>
+		{/if}
+
+		{#each items as item}
+			{#if 'divider' in item}
+				<div class="border-t border-base-200 my-1"></div>
+			{:else}
+				<button
+					type="button"
+					role="menuitem"
+					class="w-full text-left px-3 py-1.5 text-sm transition-colors
+						{item.variant === 'danger' ? 'text-error hover:bg-error/10' : 'hover:bg-base-200'}
+						{item.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+					disabled={item.disabled}
+					onclick={() => handleSelect(item)}
+				>
+					{item.label}
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}

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-100 border border-base-300 rounded-lg shadow-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/index.ts

@@ -6,6 +6,7 @@ export { default as TaskTypeIcon } from './components/TaskTypeIcon.svelte';
 // Components — from JAT IDE
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as ResizableDivider } from './components/ResizableDivider.svelte';
 export { default as DateRangePicker } from './components/DateRangePicker.svelte';
@@ -76,6 +77,7 @@ export type { ShortenedLink } from './components/LinkShortener.svelte';
 export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
 export type { SortOption } from './components/SortDropdown.svelte';
+export type { ContextMenuItem } from './components/ContextMenu.svelte';
 export type { DisplaySegment } from './components/InlineEdit.svelte';
 export type { ActionButton, ActionDropdown, DropdownItem } from './components/FloatingActionBar.svelte';
 
@@ -131,7 +133,7 @@ export {
 	statusLabel,
 } from './utils/taskUtils';
 
-// Utilities — phone formatting
+// Utilities — phone formatting (legacy US-only)
 export {
 	stripPhoneNumber,
 	formatPhoneNumber,
@@ -140,6 +142,17 @@ export {
 	updatePhoneInput
 } from './utils/phoneFormat';
 
+// Utilities — international phone (E.164) — pairs with PhoneInput
+export {
+	toE164,
+	formatPhoneForDisplay,
+	isValidPhone,
+	listCountries,
+	DEFAULT_COUNTRY,
+	PRIORITY_COUNTRIES,
+	type CountryOption,
+} from './utils/phone';
+
 // Utilities — currency
 export { formatCurrency } from './utils/currency';
 

package/src/lib/utils/phone.ts

@@ -0,0 +1,80 @@
+import {
+	parsePhoneNumberFromString,
+	type CountryCode,
+	getCountries,
+	getCountryCallingCode,
+} from "libphonenumber-js";
+
+export const DEFAULT_COUNTRY: CountryCode = "US";
+
+export function toE164(
+	raw: string | null | undefined,
+	defaultCountry: CountryCode = DEFAULT_COUNTRY,
+): string | null {
+	if (!raw) return null;
+	const trimmed = raw.trim();
+	if (!trimmed) return null;
+	const parsed = parsePhoneNumberFromString(trimmed, defaultCountry);
+	if (parsed?.isValid()) return parsed.number;
+	return null;
+}
+
+export function formatPhoneForDisplay(e164: string | null | undefined): string {
+	if (!e164) return "";
+	const parsed = parsePhoneNumberFromString(e164);
+	if (!parsed) return e164;
+	return parsed.country === DEFAULT_COUNTRY ? parsed.formatNational() : parsed.formatInternational();
+}
+
+export function isValidPhone(
+	raw: string | null | undefined,
+	defaultCountry: CountryCode = DEFAULT_COUNTRY,
+): boolean {
+	if (!raw) return false;
+	const parsed = parsePhoneNumberFromString(raw.trim(), defaultCountry);
+	return parsed?.isValid() ?? false;
+}
+
+export type CountryOption = {
+	code: CountryCode;
+	name: string;
+	dialCode: string;
+	flag: string;
+};
+
+const COUNTRY_NAMES: Record<string, string> = {
+	US: "United States", CA: "Canada", GB: "United Kingdom", AU: "Australia", NZ: "New Zealand",
+	IE: "Ireland", DE: "Germany", FR: "France", ES: "Spain", IT: "Italy", NL: "Netherlands",
+	BE: "Belgium", CH: "Switzerland", AT: "Austria", SE: "Sweden", NO: "Norway", DK: "Denmark",
+	FI: "Finland", PT: "Portugal", PL: "Poland", CZ: "Czechia", GR: "Greece", MX: "Mexico",
+	BR: "Brazil", AR: "Argentina", CL: "Chile", CO: "Colombia", PE: "Peru", JP: "Japan",
+	KR: "South Korea", CN: "China", HK: "Hong Kong", TW: "Taiwan", SG: "Singapore", MY: "Malaysia",
+	TH: "Thailand", PH: "Philippines", ID: "Indonesia", VN: "Vietnam", IN: "India", PK: "Pakistan",
+	BD: "Bangladesh", IL: "Israel", AE: "UAE", SA: "Saudi Arabia", TR: "Turkey", EG: "Egypt",
+	ZA: "South Africa", NG: "Nigeria", KE: "Kenya", RU: "Russia", UA: "Ukraine",
+};
+
+function flagEmoji(code: string): string {
+	return code
+		.toUpperCase()
+		.split("")
+		.map((c) => String.fromCodePoint(127397 + c.charCodeAt(0)))
+		.join("");
+}
+
+let countriesCache: CountryOption[] | null = null;
+export function listCountries(): CountryOption[] {
+	if (countriesCache) return countriesCache;
+	const all = getCountries()
+		.map((code) => ({
+			code,
+			name: COUNTRY_NAMES[code] ?? code,
+			dialCode: `+${getCountryCallingCode(code)}`,
+			flag: flagEmoji(code),
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name));
+	countriesCache = all;
+	return all;
+}
+
+export const PRIORITY_COUNTRIES: CountryCode[] = ["US", "CA", "GB", "AU", "MX"];