@joewinke/jatui 0.1.25 → 0.1.26

package/dist/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/dist/components/GPSTracker.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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;
+}
+declare const GPSTracker: import("svelte").Component<Props, {}, "">;
+type GPSTracker = ReturnType<typeof GPSTracker>;
+export default GPSTracker;

package/dist/components/HunkDiffView.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  /**
+   * HunkDiffView — side-by-side line-level diff with inline word highlights.
+   *
+   * Renders the before/after of a single DiffHunk with the visual treatment of
+   * a real code-review tool:
+   *   - Line numbers in gutter
+   *   - "−" / "+" markers per line
+   *   - Red background + strikethrough for removed lines
+   *   - Green background for added lines
+   *   - Inline word-level highlights when a line was modified (Myers diff)
+   *   - Monospace, syntax-naive (YAML is plain enough)
+   *
+   * Pure presentation — no state, no side effects. Pairs with DiffReview's
+   * per-hunk Accept/Reject buttons.
+   */
+
+  import { diffLines, diffWordsWithSpace, type Change } from 'diff'
+
+  interface Props {
+    oldText: string | null
+    newText: string | null
+    /** When false (default), shows two columns. When true, unified single column. */
+    unified?: boolean
+  }
+
+  let { oldText, newText, unified = false }: Props = $props()
+
+  type Row = {
+    kind: 'context' | 'removed' | 'added' | 'modified'
+    oldLineNo: number | null
+    newLineNo: number | null
+    oldContent: string | null
+    newContent: string | null
+    /** When kind=='modified', word-level segments per side */
+    oldSegments?: Array<{ text: string; changed: boolean }>
+    newSegments?: Array<{ text: string; changed: boolean }>
+  }
+
+  /**
+   * Build paired rows for side-by-side rendering.
+   * Adjacent removed+added blocks of equal-ish line count are zipped into
+   * 'modified' rows so the eye can compare line-for-line. Otherwise they
+   * render as separate red/green rows (with blank counterpart on the other
+   * side).
+   */
+  function buildRows(oldT: string, newT: string): Row[] {
+    const changes = diffLines(oldT, newT)
+    const rows: Row[] = []
+    let oldLine = 1
+    let newLine = 1
+
+    for (let i = 0; i < changes.length; i++) {
+      const c = changes[i]
+      const lines = c.value.replace(/\n$/, '').split('\n')
+
+      if (!c.added && !c.removed) {
+        // context
+        for (const line of lines) {
+          rows.push({
+            kind: 'context',
+            oldLineNo: oldLine++,
+            newLineNo: newLine++,
+            oldContent: line,
+            newContent: line,
+          })
+        }
+      } else if (c.removed) {
+        // Lookahead: is the very next change an 'added' block? If so, pair them
+        const next = changes[i + 1]
+        if (next?.added) {
+          const remLines = lines
+          const addLines = next.value.replace(/\n$/, '').split('\n')
+          const pairs = Math.max(remLines.length, addLines.length)
+          for (let j = 0; j < pairs; j++) {
+            const r = remLines[j]
+            const a = addLines[j]
+            if (r !== undefined && a !== undefined) {
+              // both present — modified row with inline word diff
+              const wordChanges = diffWordsWithSpace(r, a)
+              const oldSegments: Array<{ text: string; changed: boolean }> = []
+              const newSegments: Array<{ text: string; changed: boolean }> = []
+              for (const w of wordChanges) {
+                if (w.added) newSegments.push({ text: w.value, changed: true })
+                else if (w.removed) oldSegments.push({ text: w.value, changed: true })
+                else {
+                  oldSegments.push({ text: w.value, changed: false })
+                  newSegments.push({ text: w.value, changed: false })
+                }
+              }
+              rows.push({
+                kind: 'modified',
+                oldLineNo: oldLine++,
+                newLineNo: newLine++,
+                oldContent: r,
+                newContent: a,
+                oldSegments,
+                newSegments,
+              })
+            } else if (r !== undefined) {
+              rows.push({
+                kind: 'removed',
+                oldLineNo: oldLine++,
+                newLineNo: null,
+                oldContent: r,
+                newContent: null,
+              })
+            } else if (a !== undefined) {
+              rows.push({
+                kind: 'added',
+                oldLineNo: null,
+                newLineNo: newLine++,
+                oldContent: null,
+                newContent: a,
+              })
+            }
+          }
+          i++ // consumed the next 'added' change
+        } else {
+          for (const line of lines) {
+            rows.push({
+              kind: 'removed',
+              oldLineNo: oldLine++,
+              newLineNo: null,
+              oldContent: line,
+              newContent: null,
+            })
+          }
+        }
+      } else if (c.added) {
+        // standalone added (not preceded by a removed block — already handled above)
+        for (const line of lines) {
+          rows.push({
+            kind: 'added',
+            oldLineNo: null,
+            newLineNo: newLine++,
+            oldContent: null,
+            newContent: line,
+          })
+        }
+      }
+    }
+
+    return rows
+  }
+
+  const rows = $derived.by<Row[]>(() => {
+    const oldT = oldText ?? ''
+    const newT = newText ?? ''
+    if (!oldT && !newT) return []
+    if (!oldT) {
+      // pure-add — every line is 'added'
+      return newT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'added' as const,
+        oldLineNo: null,
+        newLineNo: i + 1,
+        oldContent: null,
+        newContent: line,
+      }))
+    }
+    if (!newT) {
+      // pure-remove — every line is 'removed'
+      return oldT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'removed' as const,
+        oldLineNo: i + 1,
+        newLineNo: null,
+        oldContent: line,
+        newContent: null,
+      }))
+    }
+    return buildRows(oldT, newT)
+  })
+
+  function lineNoStr(n: number | null): string {
+    return n === null ? '   ' : String(n).padStart(3, ' ')
+  }
+</script>
+
+<div class="hunk-diff text-xs font-mono leading-relaxed rounded border border-base-300/60 overflow-hidden bg-base-200/30">
+  {#if rows.length === 0}
+    <div class="px-3 py-4 text-center text-base-content/40 italic">no content</div>
+  {:else if unified}
+    <!-- Unified column -->
+    <div class="flex flex-col">
+      {#each rows as row, i (i)}
+        {#if row.kind === 'context'}
+          <div class="diff-row diff-row-context">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker"> </span>
+            <span class="diff-content">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'removed'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'added'}
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">{row.newContent}</span>
+          </div>
+        {:else if row.kind === 'modified'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content">
+              {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">
+              {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <!-- Side-by-side: two synced columns -->
+    <div class="grid grid-cols-2 divide-x divide-base-300/60">
+      <!-- LEFT (current/old) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content">
+                {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+
+      <!-- RIGHT (proposed/new) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">
+                {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .diff-row {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    column-gap: 0.5rem;
+    padding: 0 0.5rem;
+    align-items: baseline;
+    min-height: 1.4em;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .diff-gutter {
+    color: color-mix(in oklab, currentColor 35%, transparent);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+    text-align: right;
+  }
+  .diff-marker {
+    color: color-mix(in oklab, currentColor 55%, transparent);
+    width: 0.75em;
+    user-select: none;
+  }
+  .diff-row-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 12%, transparent);
+  }
+  .diff-row-removed .diff-marker {
+    color: var(--color-error, oklch(0.68 0.18 28));
+  }
+  .diff-row-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 12%, transparent);
+  }
+  .diff-row-added .diff-marker {
+    color: var(--color-success, oklch(0.7 0.17 145));
+  }
+  .diff-row-empty {
+    background-color: color-mix(in oklab, currentColor 3%, transparent);
+  }
+  .diff-row-context {
+    background-color: transparent;
+  }
+  .word-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 28%, transparent);
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 65%, transparent);
+  }
+  .word-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 28%, transparent);
+    font-weight: 600;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    oldText: string | null;
+    newText: string | null;
+    /** When false (default), shows two columns. When true, unified single column. */
+    unified?: boolean;
+}
+declare const HunkDiffView: import("svelte").Component<Props, {}, "">;
+type HunkDiffView = ReturnType<typeof HunkDiffView>;
+export default HunkDiffView;