@joewinke/jatui 0.1.25 → 0.1.26

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** URL or path to the PDF file */
+    src: string;
+    /** CSS class for the container */
+    class?: string;
+}
+declare const PdfThumbnail: import("svelte").Component<Props, {}, "">;
+type PdfThumbnail = ReturnType<typeof PdfThumbnail>;
+export default PdfThumbnail;

package/dist/components/PhoneInput.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	/**
+	 * PhoneInput Component — International phone number input.
+	 *
+	 * 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";
+
+	type Props = {
+		name?: string;
+		value?: string;
+		defaultCountry?: CountryCode;
+		required?: boolean;
+		placeholder?: string;
+		id?: string;
+		class?: string;
+		disabled?: boolean;
+		autocomplete?: HTMLInputElement["autocomplete"];
+	};
+
+	let {
+		name = "",
+		value = $bindable(""),
+		defaultCountry = "US",
+		required = false,
+		placeholder = "Phone number",
+		id,
+		class: klass = "",
+		disabled = false,
+		autocomplete = "tel" as HTMLInputElement["autocomplete"],
+	}: Props = $props();
+
+	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 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="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
+		type="tel"
+		class="input input-bordered rounded-l-none flex-1 min-w-0"
+		{id}
+		{placeholder}
+		{required}
+		{disabled}
+		{autocomplete}
+		value={display}
+		oninput={onInput}
+		onblur={onBlur}
+		aria-describedby={id ? `${id}-help` : undefined}
+	/>
+
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+/**
+     * PhoneInput Component — International phone number input.
+     *
+     * 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 { type CountryCode } from "libphonenumber-js";
+type Props = {
+    name?: string;
+    value?: string;
+    defaultCountry?: CountryCode;
+    required?: boolean;
+    placeholder?: string;
+    id?: string;
+    class?: string;
+    disabled?: boolean;
+    autocomplete?: HTMLInputElement["autocomplete"];
+};
+declare const PhoneInput: import("svelte").Component<Props, {}, "value">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/components/ResizableDivider.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	/**
+	 * ResizableDivider Component
+	 * A draggable divider for resizing split panels.
+	 *
+	 * Features:
+	 * - Horizontal drag handle with grippy visual
+	 * - Mouse and touch support
+	 * - Emits percentage changes via callback
+	 * - Visual feedback on hover/drag
+	 * - Snap-to-collapse support with click-to-restore
+	 * - Proximity detection: grows larger when mouse approaches
+	 * - Glow effect on hover for better visibility
+	 */
+
+	interface Props {
+		onResize: (deltaY: number) => void;
+		class?: string;
+		/** Whether a panel is currently collapsed */
+		isCollapsed?: boolean;
+		/** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
+		collapsedDirection?: 'top' | 'bottom' | null;
+		/** Callback when clicking the divider while collapsed (to restore) */
+		onCollapsedClick?: () => void;
+	}
+
+	let {
+		onResize,
+		class: className = '',
+		isCollapsed = false,
+		collapsedDirection = null,
+		onCollapsedClick
+	}: Props = $props();
+
+	let isDragging = $state(false);
+	let isNearby = $state(false);
+	let isHovering = $state(false);
+	let startY = $state(0);
+	let dividerElement: HTMLDivElement | undefined = $state();
+
+	// Proximity detection threshold in pixels
+	const PROXIMITY_THRESHOLD = 24;
+
+	function handleMouseDown(e: MouseEvent) {
+		if (isCollapsed && onCollapsedClick) {
+			onCollapsedClick();
+			return;
+		}
+
+		e.preventDefault();
+		isDragging = true;
+		startY = e.clientY;
+
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (!isDragging) return;
+		const deltaY = e.clientY - startY;
+		startY = e.clientY;
+		onResize(deltaY);
+	}
+
+	function handleMouseUp() {
+		isDragging = false;
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		if (isCollapsed && onCollapsedClick) {
+			onCollapsedClick();
+			return;
+		}
+
+		if (e.touches.length !== 1) return;
+		isDragging = true;
+		startY = e.touches[0].clientY;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!isDragging || e.touches.length !== 1) return;
+		const deltaY = e.touches[0].clientY - startY;
+		startY = e.touches[0].clientY;
+		onResize(deltaY);
+	}
+
+	function handleTouchEnd() {
+		isDragging = false;
+	}
+
+	function handleMouseEnter() {
+		isHovering = true;
+	}
+
+	function handleMouseLeave() {
+		isHovering = false;
+	}
+
+	function handleProximityMove(e: MouseEvent) {
+		if (!dividerElement || isDragging) return;
+
+		const rect = dividerElement.getBoundingClientRect();
+		const dividerCenterY = rect.top + rect.height / 2;
+		const distance = Math.abs(e.clientY - dividerCenterY);
+
+		isNearby = distance <= PROXIMITY_THRESHOLD;
+	}
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		document.addEventListener('mousemove', handleProximityMove);
+
+		return () => {
+			document.removeEventListener('mousemove', handleProximityMove);
+		};
+	});
+
+	const isExpanded = $derived(isDragging || isHovering || isNearby);
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	bind:this={dividerElement}
+	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
+	class:expanded={isExpanded}
+	class:dragging={isDragging}
+	role="separator"
+	aria-orientation="horizontal"
+	aria-label={isCollapsed ? 'Expand panel' : 'Resize panel'}
+	tabindex="0"
+	onmousedown={handleMouseDown}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	ontouchstart={handleTouchStart}
+	ontouchmove={handleTouchMove}
+	ontouchend={handleTouchEnd}
+>
+	{#if isCollapsed}
+		<div class="collapsed-indicator">
+			<div class="indicator-line"></div>
+			<div class="indicator-dots">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+			<div class="indicator-line"></div>
+		</div>
+	{:else}
+		<div class="grippy-handle">
+			<div class="grip-line"></div>
+			<div class="grip-line"></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.divider-container {
+		height: 8px;
+		min-height: 8px;
+		transition:
+			height 200ms cubic-bezier(0.4, 0, 0.2, 1),
+			background 200ms ease,
+			box-shadow 200ms ease;
+	}
+
+	.divider-container.expanded {
+		height: 16px;
+		min-height: 16px;
+		box-shadow:
+			0 0 12px color-mix(in oklch, var(--color-primary) 40%, transparent),
+			inset 0 0 8px color-mix(in oklch, var(--color-primary) 20%, transparent);
+	}
+
+	.divider-container.dragging {
+		height: 16px;
+		min-height: 16px;
+		box-shadow:
+			0 0 20px color-mix(in oklch, var(--color-primary) 50%, transparent),
+			inset 0 0 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
+	}
+
+	.grippy-handle {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		padding: 4px 32px;
+		border-radius: 4px;
+		transition:
+			opacity 200ms ease,
+			transform 200ms ease;
+		opacity: 0.4;
+	}
+
+	.divider-container.expanded .grippy-handle {
+		opacity: 1;
+		transform: scaleY(1.2);
+	}
+
+	.divider-container.dragging .grippy-handle {
+		opacity: 1;
+		transform: scaleY(1.3);
+	}
+
+	.grip-line {
+		width: 32px;
+		height: 2px;
+		border-radius: 1px;
+		background: var(--color-base-content);
+		opacity: 0.4;
+		transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
+	}
+
+	.divider-container.expanded .grip-line {
+		background: var(--color-primary);
+		opacity: 0.8;
+		box-shadow: 0 0 6px color-mix(in oklch, var(--color-primary) 50%, transparent);
+	}
+
+	.divider-container.dragging .grip-line {
+		background: var(--color-primary);
+		opacity: 1;
+		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 60%, transparent);
+	}
+
+	.divider-collapsed {
+		height: 6px;
+		min-height: 6px;
+		background: var(--color-base-200);
+		border-color: var(--color-base-300) !important;
+	}
+
+	.divider-collapsed.expanded {
+		height: 20px;
+		min-height: 20px;
+		box-shadow:
+			0 0 16px color-mix(in oklch, var(--color-primary) 50%, transparent),
+			inset 0 0 10px color-mix(in oklch, var(--color-primary) 30%, transparent);
+	}
+
+	.collapsed-indicator {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 0 16px;
+		transition: transform 200ms ease;
+	}
+
+	.divider-collapsed.expanded .collapsed-indicator {
+		transform: scaleY(1.5);
+	}
+
+	.indicator-line {
+		flex: 1;
+		height: 1px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 20%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 80%,
+			transparent 100%
+		);
+		transition: background 200ms ease, height 200ms ease;
+	}
+
+	.divider-collapsed.expanded .indicator-line {
+		height: 2px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 15%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 85%,
+			transparent 100%
+		);
+	}
+
+	.indicator-dots {
+		display: flex;
+		gap: 3px;
+		opacity: 0.5;
+		transition: opacity 200ms ease, transform 200ms ease, gap 200ms ease;
+	}
+
+	.indicator-dots span {
+		width: 3px;
+		height: 3px;
+		border-radius: 50%;
+		background: var(--color-base-content);
+		transition: width 200ms ease, height 200ms ease, background 200ms ease, box-shadow 200ms ease;
+	}
+
+	.divider-collapsed.expanded .indicator-dots {
+		opacity: 1;
+		gap: 5px;
+	}
+
+	.divider-collapsed.expanded .indicator-dots span {
+		width: 5px;
+		height: 5px;
+		background: var(--color-primary);
+		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 70%, transparent);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+/**
+ * ResizableDivider Component
+ * A draggable divider for resizing split panels.
+ *
+ * Features:
+ * - Horizontal drag handle with grippy visual
+ * - Mouse and touch support
+ * - Emits percentage changes via callback
+ * - Visual feedback on hover/drag
+ * - Snap-to-collapse support with click-to-restore
+ * - Proximity detection: grows larger when mouse approaches
+ * - Glow effect on hover for better visibility
+ */
+interface Props {
+    onResize: (deltaY: number) => void;
+    class?: string;
+    /** Whether a panel is currently collapsed */
+    isCollapsed?: boolean;
+    /** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
+    collapsedDirection?: 'top' | 'bottom' | null;
+    /** Callback when clicking the divider while collapsed (to restore) */
+    onCollapsedClick?: () => void;
+}
+declare const ResizableDivider: import("svelte").Component<Props, {}, "">;
+type ResizableDivider = ReturnType<typeof ResizableDivider>;
+export default ResizableDivider;