@joewinke/jatui 0.1.19 → 0.1.21

package/package.json

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

package/src/lib/actions/collapse.ts

@@ -0,0 +1,134 @@
+/**
+ * Tall-content collapse — Svelte action.
+ *
+ * Caps an arbitrarily-tall block at a max height with a fade-out gradient so it
+ * shows a preview instead of overflowing its container. The consumer renders the
+ * "Show more / Show less" toggle and owns the `expanded` boolean; the action does
+ * the measuring and applies the collapse styling.
+ *
+ * Why an action (not a wrapper-only component): most adoption sites are existing
+ * elements (`<p>`, a `prose` div, a `<ul>`, a `<pre>`), and an action attaches
+ * with zero DOM restructuring. A batteries-included `<Collapse>` wrapper that
+ * uses this action is also provided for greenfield use.
+ *
+ * ─── Why inline styles, not a CSS class ───────────────────────────────────────
+ *
+ * The action writes `max-height` / `overflow` / `mask-image` directly on the node
+ * when collapsed. That means it needs NO accompanying stylesheet — it works
+ * identically in Tailwind-utility components and scoped-CSS components, and
+ * consumers don't have to copy a `.collapse-*` rule into their app.css (the same
+ * trap rail.css has). Expanding clears the inline styles.
+ *
+ * ─── Why ResizeObserver, not a one-shot rAF ───────────────────────────────────
+ *
+ * Streaming chat answers and `{@html}` markdown bodies grow AFTER mount. A
+ * one-shot measurement on mount would miss them (and would wrongly hide the
+ * toggle on content that hasn't streamed in yet). A ResizeObserver re-measures
+ * whenever the content's natural height changes, so `collapsible` stays correct.
+ *
+ * `scrollHeight` reports the FULL content height even while `max-height` +
+ * `overflow:hidden` are applied, so the action can keep measuring without ever
+ * having to un-collapse first.
+ *
+ * ─── Usage — action form (most sites) ─────────────────────────────────────────
+ *
+ *   <script>
+ *     import { collapse } from 'jatui'
+ *     let collapsible = $state(false)
+ *     let expanded = $state(false)
+ *   </script>
+ *
+ *   <div use:collapse={{ expanded, onCollapsible: (c) => (collapsible = c) }}>
+ *     {content}
+ *   </div>
+ *   {#if collapsible}
+ *     <button onclick={() => (expanded = !expanded)}>
+ *       {expanded ? 'Show less ↑' : 'Show more ↓'}
+ *     </button>
+ *   {/if}
+ *
+ * For mapped lists, give each row its own `expanded` / `collapsible` state
+ * (e.g. a `SvelteSet` of ids) — one action instance attaches per row element.
+ */
+
+export interface CollapseOptions {
+	/** Max collapsed height in px. Content taller than this collapses. Default 120. */
+	threshold?: number;
+	/** Controlled expand state. When true, the node is never collapsed. Default false. */
+	expanded?: boolean;
+	/** Where the fade-to-transparent begins, as a %. Default 55. */
+	fadeStart?: number;
+	/** Slack (px) added to the threshold so a near-fit doesn't toggle. Default 4. */
+	epsilon?: number;
+	/**
+	 * Called whenever collapsibility changes (content crosses the threshold).
+	 * Drive the toggle button's visibility from this — it self-hides when the
+	 * content is shorter than the threshold.
+	 */
+	onCollapsible?: (collapsible: boolean) => void;
+}
+
+const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4 } as const;
+
+export function collapse(node: HTMLElement, options: CollapseOptions = {}) {
+	let opts = { ...DEFAULTS, ...options };
+	let collapsible = false;
+	let rafId = 0;
+	let applied = false;
+
+	function gradient() {
+		return `linear-gradient(to bottom, black ${opts.fadeStart}%, transparent 100%)`;
+	}
+
+	function apply() {
+		const shouldCollapse = collapsible && !opts.expanded;
+		if (shouldCollapse === applied) return; // idempotent — avoids RO feedback loops
+		applied = shouldCollapse;
+		if (shouldCollapse) {
+			node.style.maxHeight = `${opts.threshold}px`;
+			node.style.overflow = 'hidden';
+			node.style.maskImage = gradient();
+			node.style.webkitMaskImage = gradient();
+		} else {
+			node.style.maxHeight = '';
+			node.style.overflow = '';
+			node.style.maskImage = '';
+			node.style.webkitMaskImage = '';
+		}
+	}
+
+	function measure() {
+		// scrollHeight is the full content height even while collapsed.
+		const next = node.scrollHeight > opts.threshold + opts.epsilon;
+		if (next !== collapsible) {
+			collapsible = next;
+			opts.onCollapsible?.(collapsible);
+		}
+		apply();
+	}
+
+	function scheduleMeasure() {
+		cancelAnimationFrame(rafId);
+		rafId = requestAnimationFrame(measure);
+	}
+
+	// Re-measure when the content's natural size changes (streaming, {@html}, lazy images).
+	const ro = new ResizeObserver(scheduleMeasure);
+	ro.observe(node);
+
+	scheduleMeasure();
+
+	return {
+		update(next: CollapseOptions = {}) {
+			opts = { ...DEFAULTS, ...next };
+			// expanded/threshold/fade may have changed — re-apply (and re-measure
+			// in case threshold moved across the content height).
+			applied = !applied; // force apply() to re-evaluate against new opts
+			scheduleMeasure();
+		},
+		destroy() {
+			cancelAnimationFrame(rafId);
+			ro.disconnect();
+		},
+	};
+}

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/Collapse.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	/**
+	 * Collapse — batteries-included tall-content collapser.
+	 *
+	 * Wraps children in a region that caps at `threshold` px with a fade-out
+	 * gradient and renders a "Show more / Show less" toggle that self-hides when
+	 * the content is shorter than the threshold. Uses the `collapse` action for
+	 * measurement (ResizeObserver-backed, so streaming / {@html} content works).
+	 *
+	 *   <Collapse>
+	 *     {@html renderedMarkdown}
+	 *   </Collapse>
+	 *
+	 * For existing elements you don't want to wrap (a bare `<p>` inside an
+	 * `{#each}`, a `<pre>`), use the `collapse` action directly instead.
+	 */
+	import { collapse } from '../actions/collapse';
+
+	interface Props {
+		/** Max collapsed height in px. Default 120. */
+		threshold?: number;
+		/** Where the fade begins, as a %. Default 55. */
+		fadeStart?: number;
+		/** Start expanded. Default false. */
+		expanded?: boolean;
+		/** Toggle label when collapsed. Default 'Show more ↓'. */
+		moreLabel?: string;
+		/** Toggle label when expanded. Default 'Show less ↑'. */
+		lessLabel?: string;
+		/** Extra classes on the content region. */
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		threshold = 120,
+		fadeStart = 55,
+		expanded = $bindable(false),
+		moreLabel = 'Show more ↓',
+		lessLabel = 'Show less ↑',
+		class: className = '',
+		children,
+	}: Props = $props();
+
+	let collapsible = $state(false);
+</script>
+
+<div
+	class={`jatui-collapse-body ${className}`.trim()}
+	use:collapse={{ threshold, fadeStart, expanded, onCollapsible: (c) => (collapsible = c) }}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+{#if collapsible}
+	<button type="button" class="jatui-collapse-toggle" onclick={() => (expanded = !expanded)}>
+		{expanded ? lessLabel : moreLabel}
+	</button>
+{/if}
+
+<style>
+	.jatui-collapse-body {
+		position: relative;
+	}
+	.jatui-collapse-toggle {
+		display: block;
+		margin-top: 4px;
+		padding: 2px 0;
+		font-size: 11px;
+		color: var(--color-primary, oklch(0.65 0.12 250));
+		background: none;
+		border: none;
+		cursor: pointer;
+		opacity: 0.75;
+		transition: opacity 0.1s;
+	}
+	.jatui-collapse-toggle:hover {
+		opacity: 1;
+		text-decoration: underline;
+	}
+</style>

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;