@joewinke/jatui 0.1.23 → 0.1.24

package/src/lib/components/LazyImage.svelte

@@ -1,123 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from "svelte"
-
-  let {
-    src = "",
-    alt = "",
-    className = "",
-    aspectRatio = null,
-    fit = "cover",
-    preload = false,
-    priority = false,
-    width = null,
-    height = null,
-  } = $props<{
-    src: string
-    alt: string
-    className?: string
-    aspectRatio?: string | null
-    fit?: "cover" | "contain" | "fill"
-    preload?: boolean
-    priority?: boolean
-    width?: number | null
-    height?: number | null
-  }>()
-
-  let loaded = $state(false)
-  let error = $state(false)
-  // svelte-ignore state_referenced_locally
-  let shouldLoad = $state(preload || priority)
-  let containerRef: HTMLDivElement
-
-  function startLoadingImage() {
-    if (loaded || !src) return
-    shouldLoad = true
-  }
-
-  onMount(() => {
-    if (priority || preload) {
-      startLoadingImage()
-      return
-    }
-
-    if (containerRef) {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting) {
-              startLoadingImage()
-              observer.unobserve(entry.target)
-            }
-          }
-        },
-        { root: null, rootMargin: "200px", threshold: 0.01 }
-      )
-      observer.observe(containerRef)
-      return () => observer.disconnect()
-    }
-  })
-
-  $effect(() => {
-    if (src) {
-      loaded = false
-      error = false
-    }
-  })
-</script>
-
-<div
-  bind:this={containerRef}
-  class="relative overflow-hidden {className}"
-  style={aspectRatio ? `aspect-ratio: ${aspectRatio};` : ""}
-  data-src={src}
->
-  {#if !loaded && shouldLoad}
-    <div class="skeleton absolute inset-0 w-full h-full"></div>
-  {/if}
-
-  {#if shouldLoad}
-    <img
-      {src}
-      {alt}
-      {width}
-      {height}
-      class="w-full h-full object-{fit} transition-opacity duration-300 {loaded ? 'opacity-100' : 'opacity-0'}"
-      onload={(e) => {
-        loaded = true
-        if (!width || !height) {
-          const img = e.target as HTMLImageElement
-          width = img.naturalWidth
-          height = img.naturalHeight
-        }
-      }}
-      onerror={() => (error = true)}
-      loading={priority ? "eager" : "lazy"}
-      decoding="async"
-    />
-  {/if}
-
-  {#if !shouldLoad}
-    <div
-      class="w-full h-full bg-base-200"
-      style={width && height ? `aspect-ratio: ${width / height};` : ""}
-    ></div>
-  {/if}
-
-  {#if error && shouldLoad}
-    <div class="absolute inset-0 flex items-center justify-center bg-base-200">
-      <div class="flex flex-col items-center text-base-content/70">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2">
-          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
-          <circle cx="9" cy="9" r="2"></circle>
-          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
-        </svg>
-        <span class="text-xs">Failed to load image</span>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  img { will-change: opacity; }
-  .skeleton { transform: translateZ(0); will-change: opacity; }
-</style>

package/src/lib/components/LinkShortener.svelte

@@ -1,274 +0,0 @@
-<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/src/lib/components/LoadingSpinner.svelte

@@ -1,106 +0,0 @@
-<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/src/lib/components/LocationMap.svelte

@@ -1,186 +0,0 @@
-<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>