@joewinke/jatui 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",

package/src/lib/components/ChipInput.svelte

@@ -1,4 +1,15 @@
-<script module lang="ts">
+<script lang="ts">
+	/**
+	 * ChipInput - Generic contenteditable input with inline chips and autocomplete.
+	 *
+	 * Handles:
+	 * - Contenteditable div with placeholder
+	 * - Chip insertion/deletion (non-editable inline spans)
+	 * - Autocomplete dropdown with keyboard navigation
+	 * - Serialization (DOM -> text with chip markers)
+	 */
+
+	// --- Types ---
 	export interface ChipSuggestion {
 		label: string;
 		description?: string;
@@ -28,18 +39,6 @@
 		/** If true, insert as plain text instead of a chip element */
 		insertAsText?: boolean;
 	}
-</script>
-
-<script lang="ts">
-	/**
-	 * ChipInput - Generic contenteditable input with inline chips and autocomplete.
-	 *
-	 * Handles:
-	 * - Contenteditable div with placeholder
-	 * - Chip insertion/deletion (non-editable inline spans)
-	 * - Autocomplete dropdown with keyboard navigation
-	 * - Serialization (DOM -> text with chip markers)
-	 */
 
 	// --- Props ---
 	let {

package/src/lib/components/GPSTracker.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	/**
+	 * GPSTracker — headless GPS tracking action component.
+	 *
+	 * Watches the device's geolocation and fires `onLocationUpdate` on each new
+	 * fix. Uses `watchPosition` on mobile; falls back to interval polling on
+	 * desktop. Renders a small fixed status indicator in the corner.
+	 *
+	 * The host app is responsible for sending coordinates to the server —
+	 * use the `onLocationUpdate` callback to do so (no hardcoded endpoint).
+	 *
+	 * Usage:
+	 *
+	 *   <GPSTracker
+	 *     enabled={true}
+	 *     onLocationUpdate={async (pos) => {
+	 *       await fetch('/api/location', {
+	 *         method: 'POST',
+	 *         body: JSON.stringify({ lat: pos.coords.latitude, lng: pos.coords.longitude })
+	 *       });
+	 *     }}
+	 *   />
+	 *
+	 * Ported from flush technician/GPSTracker (298L) — steelbridge fork capture (jst-e0d1u.4).
+	 */
+
+	interface Props {
+		enabled?: boolean;
+		/** How often to poll position in seconds (mobile uses watchPosition + this; desktop uses this * 2). */
+		updateInterval?: number;
+		onLocationUpdate?: (position: GeolocationPosition) => void;
+		onError?: (error: GeolocationPositionError) => void;
+	}
+
+	let { enabled = true, updateInterval = 30, onLocationUpdate, onError }: Props = $props();
+
+	let watchId: number | null = null;
+	let intervalId: number | null = null;
+	let lastPosition = $state<GeolocationPosition | null>(null);
+	let isTracking = $state(false);
+	let hasPermission = $state<boolean | null>(null);
+	let lastUpdate = $state<Date | null>(null);
+	let isMounted = false;
+
+	import { onMount, onDestroy } from 'svelte';
+
+	onMount(() => {
+		if (isMounted) return;
+		isMounted = true;
+		if (typeof navigator !== 'undefined' && enabled) {
+			checkPermission();
+			setTimeout(() => {
+				if (hasPermission !== false) startTracking();
+			}, 100);
+		}
+	});
+
+	onDestroy(() => {
+		isMounted = false;
+		stopTracking();
+	});
+
+	async function checkPermission() {
+		if (typeof navigator === 'undefined' || !navigator.permissions) return;
+		try {
+			const result = await navigator.permissions.query({ name: 'geolocation' });
+			hasPermission = result.state === 'granted';
+			result.addEventListener('change', () => {
+				hasPermission = result.state === 'granted';
+				if (hasPermission && enabled) startTracking();
+				else stopTracking();
+			});
+		} catch {
+			// permissions API not available — proceed optimistically
+		}
+	}
+
+	function startTracking() {
+		if (typeof navigator === 'undefined' || !navigator.geolocation || !enabled || isTracking) return;
+
+		isTracking = true;
+
+		// Initial fix with relaxed settings (faster on desktop)
+		navigator.geolocation.getCurrentPosition(
+			(pos) => {
+				handleSuccess(pos);
+				// Try for a better fix
+				navigator.geolocation.getCurrentPosition(handleSuccess, () => {}, {
+					enableHighAccuracy: true,
+					timeout: 10000,
+					maximumAge: 0
+				});
+			},
+			(err) => {
+				if (err.code === 3) {
+					// TIMEOUT — try once more with any cached position
+					navigator.geolocation.getCurrentPosition(handleSuccess, handleError, {
+						enableHighAccuracy: false,
+						timeout: 15000,
+						maximumAge: Infinity
+					});
+				} else {
+					handleError(err);
+				}
+			},
+			{ enableHighAccuracy: false, timeout: 8000, maximumAge: 600000 }
+		);
+
+		// Continuous watch on mobile only
+		const isMobile =
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+		if (isMobile) {
+			watchId = navigator.geolocation.watchPosition(handleSuccess, handleError, {
+				enableHighAccuracy: true,
+				timeout: 10000,
+				maximumAge: 30000
+			});
+		}
+
+		// Interval polling
+		const freq = (isMobile ? updateInterval : updateInterval * 2) * 1000;
+		intervalId = window.setInterval(() => {
+			navigator.geolocation.getCurrentPosition(
+				handleSuccess,
+				() => {}, // ignore interval failures silently
+				{ enableHighAccuracy: false, timeout: 10000, maximumAge: 300000 }
+			);
+		}, freq);
+	}
+
+	function stopTracking() {
+		isTracking = false;
+		if (watchId !== null) {
+			navigator.geolocation.clearWatch(watchId);
+			watchId = null;
+		}
+		if (intervalId !== null) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	}
+
+	function handleSuccess(position: GeolocationPosition) {
+		lastPosition = position;
+		lastUpdate = new Date();
+		onLocationUpdate?.(position);
+	}
+
+	function handleError(error: GeolocationPositionError) {
+		if (error.code === error.PERMISSION_DENIED) {
+			hasPermission = false;
+			stopTracking();
+		}
+		onError?.(error);
+	}
+
+	$effect(() => {
+		if (enabled && !isTracking && hasPermission !== false) startTracking();
+		else if (!enabled && isTracking) stopTracking();
+	});
+</script>
+
+<!-- GPS status indicator (fixed bottom-right) -->
+{#if typeof navigator !== 'undefined'}
+	<div class="fixed bottom-20 right-4 bg-base-200 rounded-lg shadow-lg p-2 text-xs z-40">
+		<div class="flex items-center gap-2">
+			<div
+				class="w-2 h-2 rounded-full {isTracking
+					? 'bg-success'
+					: hasPermission === false
+						? 'bg-error'
+						: 'bg-warning'}"
+			></div>
+			<span>GPS {isTracking ? 'Active' : hasPermission === false ? 'Denied' : 'Inactive'}</span>
+		</div>
+
+		{#if hasPermission === false}
+			<div class="mt-2">
+				<button
+					type="button"
+					class="btn btn-xs btn-primary"
+					onclick={() => {
+						hasPermission = null;
+						isTracking = false;
+						startTracking();
+					}}
+				>
+					Enable GPS
+				</button>
+			</div>
+			<div class="text-error mt-1">Location required</div>
+		{/if}
+
+		{#if lastUpdate && isTracking}
+			<div class="text-base-content/70">Updated: {lastUpdate.toLocaleTimeString()}</div>
+		{/if}
+
+		{#if lastPosition && isTracking}
+			<div class="text-base-content/70">Accuracy: {Math.round(lastPosition.coords.accuracy)}m</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/InlineEdit.svelte

@@ -1,12 +1,3 @@
-<script module lang="ts">
-	/** A display segment for formula-aware rendering */
-	export interface DisplaySegment {
-		type: 'text' | 'formula';
-		display: string;
-		tooltip?: string;
-	}
-</script>
-
 <script lang="ts">
 	/**
 	 * InlineEdit Component
@@ -23,6 +14,13 @@
 	 * - Optional formula-aware display: segments with type/display/tooltip
 	 */
 
+	/** A display segment for formula-aware rendering */
+	export interface DisplaySegment {
+		type: 'text' | 'formula';
+		display: string;
+		tooltip?: string;
+	}
+
 	interface Props {
 		/** Current value */
 		value: string;

package/src/lib/components/KeyboardShortcutsOverlay.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+	/**
+	 * KeyboardShortcutsOverlay — press `?` to toggle a modal listing the
+	 * keyboard shortcuts available on the current page. Press `?` again or
+	 * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
+	 * combos are ignored so the shortcut never interferes with typing.
+	 *
+	 * Usage:
+	 *
+	 *   <KeyboardShortcutsOverlay shortcuts={[
+	 *     { key: 'j / ↓', description: 'Focus next item' },
+	 *     { key: 'k / ↑', description: 'Focus previous item' },
+	 *     { key: 'Enter', description: 'Open detail' },
+	 *   ]} />
+	 */
+
+	export interface KeyboardShortcut {
+		key: string;
+		description: string;
+	}
+
+	export interface SectionEntry {
+		key: string;
+		description: string;
+		/** Optional oklch color to tint the key badge — used for legend entries */
+		color?: string;
+	}
+
+	export interface ShortcutSection {
+		title: string;
+		shortcuts: SectionEntry[];
+	}
+
+	let {
+		shortcuts = [],
+		sections,
+		title = 'Keyboard Shortcuts',
+		open = $bindable(false)
+	}: {
+		shortcuts?: KeyboardShortcut[];
+		/**
+		 * Optional grouped sections (e.g. mode-specific shortcut tables for
+		 * /inbox: list / detail / compose). When provided, takes
+		 * precedence over the flat `shortcuts` prop.
+		 */
+		sections?: ShortcutSection[];
+		title?: string;
+		open?: boolean;
+	} = $props();
+
+	let isOpen = $state(open);
+
+	$effect(() => {
+		isOpen = open;
+	});
+	$effect(() => {
+		open = isOpen;
+	});
+
+	function isTypingTarget(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		const tag = target.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+		return target.isContentEditable;
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.ctrlKey || e.metaKey || e.altKey) return;
+
+		if (e.key === '?') {
+			// `?` is always Shift+/. Don't trigger while typing — would swallow the char.
+			if (isTypingTarget(e.target)) return;
+			e.preventDefault();
+			isOpen = !isOpen;
+			return;
+		}
+
+		if (isOpen && e.key === 'Escape') {
+			e.preventDefault();
+			isOpen = false;
+		}
+	}
+
+	$effect(() => {
+		window.addEventListener('keydown', onKeydown);
+		return () => window.removeEventListener('keydown', onKeydown);
+	});
+</script>
+
+{#if isOpen}
+	<div
+		class="kso-backdrop"
+		role="presentation"
+		onclick={() => (isOpen = false)}
+	>
+		<div
+			class="kso-panel animate-scale-in"
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			tabindex="-1"
+		>
+			<div class="kso-header">
+				<h2 class="kso-title">{title}</h2>
+				<button
+					type="button"
+					class="kso-close"
+					onclick={() => (isOpen = false)}
+					aria-label="Close keyboard shortcuts"
+				>
+					×
+				</button>
+			</div>
+			<div class="kso-list">
+				{#if sections && sections.length > 0}
+					{#each sections as section, sIdx (section.title + '::' + sIdx)}
+						<div class="kso-section-title">{section.title}</div>
+						{#each section.shortcuts as { key, description, color }, i (section.title + '::' + key + '::' + i)}
+							<div class="kso-row">
+								<kbd
+									class="kso-key"
+									style={color
+										? `color:${color};border-color:color-mix(in oklch,${color} 50%,oklch(0.35 0.02 250));background:color-mix(in oklch,${color} 12%,oklch(0.25 0.02 250))`
+										: ''}
+								>
+									{key}
+								</kbd>
+								<span class="kso-description">{description}</span>
+							</div>
+						{/each}
+					{/each}
+				{:else}
+					{#each shortcuts as { key, description }, i (key + '::' + i)}
+						<div class="kso-row">
+							<kbd class="kso-key">{key}</kbd>
+							<span class="kso-description">{description}</span>
+						</div>
+					{/each}
+				{/if}
+				<div class="kso-row kso-row-meta">
+					<kbd class="kso-key">?</kbd>
+					<span class="kso-description">Toggle this overlay</span>
+				</div>
+				<div class="kso-row kso-row-meta">
+					<kbd class="kso-key">Esc</kbd>
+					<span class="kso-description">Close overlay</span>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.kso-backdrop {
+		position: fixed;
+		inset: 0;
+		background: oklch(0 0 0 / 0.6);
+		backdrop-filter: blur(2px);
+		z-index: 60;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1.5rem;
+		animation: kso-fade 0.15s ease-out;
+	}
+
+	.kso-panel {
+		background: oklch(0.18 0.02 250);
+		border: 1px solid oklch(0.30 0.03 250);
+		border-radius: 0.75rem;
+		box-shadow: 0 20px 60px oklch(0 0 0 / 0.6);
+		max-width: 34rem;
+		width: 100%;
+		max-height: 80vh;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.kso-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.9rem 1.25rem;
+		border-bottom: 1px solid oklch(0.25 0.02 250);
+		flex-shrink: 0;
+	}
+
+	.kso-title {
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: oklch(0.92 0.02 250);
+		margin: 0;
+		letter-spacing: 0.01em;
+	}
+
+	.kso-close {
+		background: transparent;
+		border: none;
+		color: oklch(0.65 0.02 250);
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		padding: 0.15rem 0.5rem;
+		border-radius: 0.35rem;
+		transition:
+			background 0.12s ease,
+			color 0.12s ease;
+	}
+
+	.kso-close:hover {
+		color: oklch(0.94 0.02 250);
+		background: oklch(0.25 0.02 250);
+	}
+
+	.kso-list {
+		padding: 0.75rem 1.25rem 1.25rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		overflow-y: auto;
+	}
+
+	.kso-row {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.4rem 0.25rem;
+	}
+
+	.kso-section-title {
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: oklch(0.62 0.05 240);
+		padding: 0.55rem 0.25rem 0.2rem;
+		border-bottom: 1px solid oklch(0.25 0.02 250);
+		margin-top: 0.25rem;
+	}
+
+	.kso-section-title:first-of-type {
+		margin-top: 0;
+		padding-top: 0.1rem;
+	}
+
+	.kso-row-meta {
+		opacity: 0.7;
+		border-top: 1px dashed oklch(0.25 0.02 250);
+		margin-top: 0.25rem;
+		padding-top: 0.5rem;
+	}
+
+	.kso-row-meta:not(:first-of-type) {
+		border-top: none;
+		margin-top: 0;
+	}
+
+	.kso-key {
+		font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+		font-size: 0.78rem;
+		background: oklch(0.25 0.02 250);
+		border: 1px solid oklch(0.35 0.02 250);
+		border-bottom-width: 2px;
+		border-radius: 0.35rem;
+		padding: 0.18rem 0.55rem;
+		min-width: 3.25rem;
+		text-align: center;
+		color: oklch(0.93 0.02 250);
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.kso-description {
+		font-size: 0.85rem;
+		color: oklch(0.78 0.02 250);
+		line-height: 1.35;
+	}
+
+	@keyframes kso-fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.kso-backdrop,
+		.kso-panel {
+			animation: none !important;
+		}
+	}
+</style>