@joewinke/jatui 0.1.25 → 0.1.27

package/dist/components/LinkShortener.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+	export interface ShortenedLink {
+		id: string
+		slug: string
+		destination_url: string
+		title?: string | null
+		click_count: number
+		created_at: string
+		expires_at?: string | null
+		is_active: boolean
+	}
+
+	interface Props {
+		links: ShortenedLink[]
+		baseUrl?: string
+		showHeader?: boolean
+		onCreate?: (data: { title: string; destination_url: string; slug: string; expires_at: string | null }) => void
+		onDelete?: (id: string) => void
+		onToggle?: (id: string, is_active: boolean) => void
+		class?: string
+	}
+
+	let { links, baseUrl = '', showHeader = true, onCreate, onDelete, onToggle, class: className = '' }: Props = $props()
+
+	let showForm = $state(false)
+	let title = $state('')
+	let destinationUrl = $state('')
+	let customSlug = $state('')
+	let expiresAt = $state('')
+	let copiedId = $state<string | null>(null)
+	let submitting = $state(false)
+
+	function generateSlug(): string {
+		const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'
+		let result = ''
+		for (let i = 0; i < 6; i++) {
+			result += chars.charAt(Math.floor(Math.random() * chars.length))
+		}
+		return result
+	}
+
+	function handleSubmit(e: Event) {
+		e.preventDefault()
+		if (!destinationUrl || submitting) return
+
+		submitting = true
+		const slug = customSlug.trim() || generateSlug()
+
+		onCreate?.({
+			title: title.trim(),
+			destination_url: destinationUrl.trim(),
+			slug,
+			expires_at: expiresAt || null
+		})
+
+		title = ''
+		destinationUrl = ''
+		customSlug = ''
+		expiresAt = ''
+		showForm = false
+		submitting = false
+	}
+
+	async function copyUrl(link: ShortenedLink) {
+		const url = `${baseUrl}/l/${link.slug}`
+		await navigator.clipboard.writeText(url)
+		copiedId = link.id
+		setTimeout(() => { copiedId = null }, 2000)
+	}
+
+	function isExpired(link: ShortenedLink): boolean {
+		if (!link.expires_at) return false
+		return new Date(link.expires_at) < new Date()
+	}
+</script>
+
+<div class="space-y-4 {className}">
+	{#if showHeader}
+		<div class="flex items-center justify-between">
+			<h2 class="text-lg font-semibold">Short Links</h2>
+			{#if !showForm}
+				<button class="btn btn-primary btn-sm" onclick={() => showForm = true}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+					</svg>
+					New Link
+				</button>
+			{/if}
+		</div>
+	{:else if !showForm}
+		<div class="flex justify-end">
+			<button class="btn btn-primary btn-sm" onclick={() => showForm = true}>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+				</svg>
+				New Link
+			</button>
+		</div>
+	{/if}
+
+	{#if showForm}
+		<form class="card bg-base-200" onsubmit={handleSubmit}>
+			<div class="card-body gap-4">
+				<div class="grid sm:grid-cols-2 gap-3">
+					<div class="flex flex-col gap-1.5">
+						<label class="text-sm font-medium" for="link-title">Title</label>
+						<input
+							id="link-title"
+							type="text"
+							class="input input-bordered input-sm w-full"
+							placeholder="My Campaign Link"
+							bind:value={title}
+						/>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label class="text-sm font-medium" for="link-destination">
+							Destination URL <span class="text-error">*</span>
+						</label>
+						<input
+							id="link-destination"
+							type="url"
+							class="input input-bordered input-sm w-full"
+							placeholder="https://example.com/page"
+							bind:value={destinationUrl}
+							required
+						/>
+					</div>
+				</div>
+
+				<div class="grid sm:grid-cols-2 gap-3">
+					<div class="flex flex-col gap-1.5">
+						<label class="text-sm font-medium" for="link-slug">Custom Slug</label>
+						<div class="join w-full">
+							<span class="join-item flex items-center px-3 bg-base-300 text-xs text-base-content/50 border border-base-content/20">/l/</span>
+							<input
+								id="link-slug"
+								type="text"
+								class="input input-bordered input-sm join-item flex-1 min-w-0"
+								placeholder="auto-generated"
+								bind:value={customSlug}
+								pattern="[a-zA-Z0-9_-]+"
+							/>
+						</div>
+					</div>
+					<div class="flex flex-col gap-1.5">
+						<label class="text-sm font-medium" for="link-expires">Expires</label>
+						<input
+							id="link-expires"
+							type="date"
+							class="input input-bordered input-sm w-full"
+							bind:value={expiresAt}
+						/>
+					</div>
+				</div>
+
+				<div class="flex justify-end gap-2 pt-1">
+					<button type="button" class="btn btn-ghost btn-sm" onclick={() => showForm = false}>Cancel</button>
+					<button type="submit" class="btn btn-primary btn-sm" disabled={!destinationUrl || submitting}>
+						{#if submitting}
+							<span class="loading loading-spinner loading-xs"></span>
+						{/if}
+						Create Link
+					</button>
+				</div>
+			</div>
+		</form>
+	{/if}
+
+	{#if links.length === 0 && !showForm}
+		<div class="card bg-base-200">
+			<div class="card-body text-center py-8">
+				<p class="text-base-content/60">No short links yet. Create your first one above.</p>
+			</div>
+		</div>
+	{:else if links.length > 0}
+		<div class="overflow-x-auto">
+			<table class="table">
+				<thead>
+					<tr>
+						<th>Link</th>
+						<th>Destination</th>
+						<th class="text-center">Clicks</th>
+						<th class="text-center">Status</th>
+						<th class="text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each links as link (link.id)}
+						<tr class="hover">
+							<td>
+								<div>
+									{#if link.title}
+										<div class="font-medium text-sm">{link.title}</div>
+									{/if}
+									<div class="text-primary text-sm font-mono">/l/{link.slug}</div>
+								</div>
+							</td>
+							<td>
+								<a
+									href={link.destination_url}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="link link-hover text-sm max-w-xs truncate block"
+									title={link.destination_url}
+								>
+									{link.destination_url}
+								</a>
+							</td>
+							<td class="text-center">
+								<span class="badge badge-ghost badge-sm">{link.click_count}</span>
+							</td>
+							<td class="text-center">
+								{#if isExpired(link)}
+									<span class="badge badge-error badge-sm">Expired</span>
+								{:else if !link.is_active}
+									<span class="badge badge-ghost badge-sm">Inactive</span>
+								{:else}
+									<span class="badge badge-success badge-sm">Active</span>
+								{/if}
+							</td>
+							<td>
+								<div class="flex items-center justify-end gap-1">
+									<button
+										class="btn btn-ghost btn-xs"
+										title="Copy short URL"
+										onclick={() => copyUrl(link)}
+									>
+										{#if copiedId === link.id}
+											<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+											</svg>
+										{:else}
+											<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+											</svg>
+										{/if}
+									</button>
+									{#if onToggle}
+										<button
+											class="btn btn-ghost btn-xs"
+											title={link.is_active ? 'Deactivate' : 'Activate'}
+											onclick={() => onToggle(link.id, !link.is_active)}
+										>
+											{#if link.is_active}
+												<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+												</svg>
+											{:else}
+												<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+													<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+												</svg>
+											{/if}
+										</button>
+									{/if}
+									{#if onDelete}
+										<button
+											class="btn btn-ghost btn-xs text-error"
+											title="Delete link"
+											onclick={() => onDelete(link.id)}
+										>
+											<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+											</svg>
+										</button>
+									{/if}
+								</div>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,27 @@
+export interface ShortenedLink {
+    id: string;
+    slug: string;
+    destination_url: string;
+    title?: string | null;
+    click_count: number;
+    created_at: string;
+    expires_at?: string | null;
+    is_active: boolean;
+}
+interface Props {
+    links: ShortenedLink[];
+    baseUrl?: string;
+    showHeader?: boolean;
+    onCreate?: (data: {
+        title: string;
+        destination_url: string;
+        slug: string;
+        expires_at: string | null;
+    }) => void;
+    onDelete?: (id: string) => void;
+    onToggle?: (id: string, is_active: boolean) => void;
+    class?: string;
+}
+declare const LinkShortener: import("svelte").Component<Props, {}, "">;
+type LinkShortener = ReturnType<typeof LinkShortener>;
+export default LinkShortener;

package/dist/components/LoadingSpinner.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	/**
+	 * LoadingSpinner Component
+	 *
+	 * Customizable DaisyUI loading spinner with text, overlay, and speed options.
+	 */
+
+	interface Props {
+		type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity' | 'pulse';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		text?: string;
+		textPosition?: 'top' | 'bottom' | 'left' | 'right';
+		overlay?: boolean;
+		centered?: boolean;
+		color?: string;
+		ariaLabel?: string;
+		visible?: boolean;
+		speed?: 'slow' | 'normal' | 'fast';
+		class?: string;
+	}
+
+	let {
+		type = 'spinner',
+		size = 'md',
+		text = '',
+		textPosition = 'bottom',
+		overlay = false,
+		centered = false,
+		color = '',
+		ariaLabel = 'Loading',
+		visible = true,
+		speed = 'normal',
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived(
+		{ xs: 'loading-xs', sm: 'loading-sm', md: 'loading-md', lg: 'loading-lg', xl: 'loading-xl' }[size]
+	);
+
+	const typeClass = $derived(
+		{
+			spinner: 'loading-spinner',
+			dots: 'loading-dots',
+			ring: 'loading-ring',
+			ball: 'loading-ball',
+			bars: 'loading-bars',
+			infinity: 'loading-infinity',
+			pulse: 'loading-pulse'
+		}[type]
+	);
+
+	const speedClass = $derived(
+		{ slow: '[animation-duration:2s]', normal: '', fast: '[animation-duration:0.5s]' }[speed]
+	);
+
+	const spinnerClass = $derived(
+		['loading', typeClass, sizeClass, speedClass, color ? '' : 'text-primary', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const containerClass = $derived(
+		[
+			overlay ? 'fixed inset-0 flex items-center justify-center z-50' : '',
+			centered && !overlay ? 'flex items-center justify-center' : '',
+			textPosition === 'left' || textPosition === 'right' ? 'flex items-center' : '',
+			textPosition === 'top' || textPosition === 'bottom' ? 'flex flex-col items-center' : ''
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const containerStyle = $derived(
+		overlay ? 'background: color-mix(in oklch, #180042 55%, transparent)' : ''
+	);
+
+	const textClass = $derived(
+		['text-sm text-base-content/70', { top: 'mb-2', bottom: 'mt-2', left: 'mr-2', right: 'ml-2' }[textPosition]]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const spinnerStyle = $derived(color ? `color: ${color}` : '');
+</script>
+
+{#if visible}
+	<div class={containerClass} style={containerStyle} aria-label={ariaLabel} role="status" aria-live="polite">
+		{#if text && textPosition === 'top'}
+			<div class={textClass}>{text}</div>
+		{/if}
+		{#if text && textPosition === 'left'}
+			<div class={textClass}>{text}</div>
+		{/if}
+
+		<div class={spinnerClass} style={spinnerStyle}></div>
+
+		{#if text && textPosition === 'right'}
+			<div class={textClass}>{text}</div>
+		{/if}
+		{#if text && textPosition === 'bottom'}
+			<div class={textClass}>{text}</div>
+		{/if}
+
+		<span class="sr-only">{ariaLabel}</span>
+	</div>
+{/if}

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

@@ -0,0 +1,21 @@
+/**
+ * LoadingSpinner Component
+ *
+ * Customizable DaisyUI loading spinner with text, overlay, and speed options.
+ */
+interface Props {
+    type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity' | 'pulse';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    text?: string;
+    textPosition?: 'top' | 'bottom' | 'left' | 'right';
+    overlay?: boolean;
+    centered?: boolean;
+    color?: string;
+    ariaLabel?: string;
+    visible?: boolean;
+    speed?: 'slow' | 'normal' | 'fast';
+    class?: string;
+}
+declare const LoadingSpinner: import("svelte").Component<Props, {}, "">;
+type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
+export default LoadingSpinner;

package/dist/components/LocationMap.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	/**
+	 * LocationMap — single-location Google Maps embed with a pulsing dot marker.
+	 *
+	 * Shows the current GPS position on a map. While waiting for coords, renders
+	 * a "Waiting for GPS signal…" placeholder.
+	 *
+	 * API key is passed explicitly — jatui has no $env dependency.
+	 *
+	 * Usage:
+	 *
+	 *   <LocationMap
+	 *     apiKey={PUBLIC_GOOGLE_MAPS_API_KEY}
+	 *     latitude={coords.latitude}
+	 *     longitude={coords.longitude}
+	 *     accuracy={coords.accuracy}
+	 *   />
+	 *
+	 * Ported from flush technician/LocationMap (190L) — steelbridge fork capture (jst-e0d1u.4).
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import { loadGoogleMapsAPI, isGoogleMapsLoaded } from '../utils/googleMapsLoader';
+
+	interface Props {
+		apiKey: string;
+		latitude?: number;
+		longitude?: number;
+		accuracy?: number;
+		showAccuracyCircle?: boolean;
+		height?: string;
+	}
+
+	let {
+		apiKey,
+		latitude,
+		longitude,
+		accuracy,
+		showAccuracyCircle = true,
+		height = '200px'
+	}: Props = $props();
+
+	let mapContainer: HTMLElement;
+	let map: google.maps.Map;
+	let marker: any;
+	let accuracyCircle: google.maps.Circle;
+	let AdvancedMarkerElement: any;
+
+	onMount(async () => {
+		if (!apiKey) {
+			console.warn('LocationMap: No Google Maps API key provided');
+			return;
+		}
+		try {
+			await loadGoogleMapsAPI({ apiKey, libraries: ['marker'] });
+			if (isGoogleMapsLoaded() && window.google?.maps?.marker) {
+				AdvancedMarkerElement = window.google.maps.marker.AdvancedMarkerElement;
+				initializeMap();
+			}
+		} catch (e) {
+			console.warn('LocationMap: Failed to load Google Maps API', e);
+		}
+	});
+
+	onDestroy(() => {
+		if (marker) marker.map = null;
+		if (accuracyCircle) accuracyCircle.setMap(null);
+	});
+
+	function initializeMap() {
+		const position = { lat: latitude ?? 26.3683, lng: longitude ?? -80.1289 };
+
+		map = new google.maps.Map(mapContainer, {
+			zoom: 16,
+			center: position,
+			mapId: 'jatui-location-map',
+			disableDefaultUI: true,
+			zoomControl: true,
+			mapTypeControl: false,
+			streetViewControl: false,
+			fullscreenControl: false
+		});
+
+		updateMarker();
+	}
+
+	function updateMarker() {
+		if (!map || !AdvancedMarkerElement) return;
+
+		const position = { lat: latitude ?? 26.3683, lng: longitude ?? -80.1289 };
+
+		if (marker) marker.map = null;
+
+		const el = document.createElement('div');
+		el.className = 'lm-current-location';
+		el.innerHTML = '<div class="lm-pulse-ring"></div><div class="lm-dot"></div>';
+
+		marker = new AdvancedMarkerElement({
+			position,
+			map,
+			content: el,
+			title: 'Current location'
+		});
+
+		if (accuracyCircle) accuracyCircle.setMap(null);
+
+		if (showAccuracyCircle && accuracy) {
+			accuracyCircle = new google.maps.Circle({
+				strokeColor: '#4285F4',
+				strokeOpacity: 0.8,
+				strokeWeight: 1,
+				fillColor: '#4285F4',
+				fillOpacity: 0.2,
+				map,
+				center: position,
+				radius: accuracy
+			});
+		}
+
+		map.setCenter(position);
+	}
+
+	$effect(() => {
+		if (map && latitude && longitude) updateMarker();
+	});
+</script>
+
+<div
+	class="relative rounded-lg overflow-hidden border border-base-300"
+	style="height: {height}"
+>
+	<div bind:this={mapContainer} class="w-full h-full"></div>
+
+	{#if !latitude || !longitude}
+		<div class="absolute inset-0 flex items-center justify-center bg-base-200">
+			<div class="text-center">
+				<div class="loading loading-spinner loading-md text-primary"></div>
+				<p class="text-sm mt-2 text-base-content/70">Waiting for GPS signal…</p>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	:global(.lm-current-location) {
+		position: relative;
+		width: 20px;
+		height: 20px;
+	}
+
+	:global(.lm-dot) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 12px;
+		height: 12px;
+		background-color: #4285f4;
+		border: 2px solid white;
+		border-radius: 50%;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	}
+
+	:global(.lm-pulse-ring) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 20px;
+		height: 20px;
+		background-color: #4285f4;
+		border-radius: 50%;
+		opacity: 0.3;
+		animation: lm-pulse 2s infinite;
+	}
+
+	@keyframes lm-pulse {
+		0% {
+			transform: translate(-50%, -50%) scale(1);
+			opacity: 0.3;
+		}
+		100% {
+			transform: translate(-50%, -50%) scale(3);
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    apiKey: string;
+    latitude?: number;
+    longitude?: number;
+    accuracy?: number;
+    showAccuracyCircle?: boolean;
+    height?: string;
+}
+declare const LocationMap: import("svelte").Component<Props, {}, "">;
+type LocationMap = ReturnType<typeof LocationMap>;
+export default LocationMap;