@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/map/track.ts

@@ -0,0 +1,279 @@
+// The map's time axis, as data.
+//
+// Four features are four readings of one list of fixes: a route is the whole track painted, playback
+// reads it at a time, a trail is its tail, and a live vehicle is a track of length two growing at the
+// head. So there is one primitive here and three consumers over it.
+//
+// It imports nothing from mapbox and nothing from Vue, which is what lets every rule below be pinned
+// by a node test rather than checked by eye on a live map.
+
+export interface Fix {
+  /** epoch ms */
+  at: number;
+  lng: number;
+  lat: number;
+}
+
+/** Ascending by `at`. A bare array: there is no metadata a track needs that its fixes do not carry. */
+export type Track = readonly Fix[];
+
+export interface TrackSpan {
+  start: number;
+  end: number;
+  ms: number;
+}
+
+export interface TrackPoint {
+  lng: number;
+  lat: number;
+  /** degrees clockwise from north, along the segment being travelled */
+  bearing: number;
+  /** the reading falls inside a gap: this is the last KNOWN position, not an interpolated one */
+  gap: boolean;
+}
+
+/**
+ * ★ WHAT COUNTS AS SIGNAL LOSS.
+ *
+ * Telematics drop out — a basement, a tunnel, a flat modem. Two minutes without a fix at a cadence of
+ * a few seconds is unambiguous loss rather than a slow tick, and everything downstream treats it as a
+ * break: the line splits, and the mark waits where it was last seen.
+ */
+export const MAX_GAP_MS = 120_000;
+
+/** How much of the past a trail shows. Long enough to read as a path, short enough not to be the trip. */
+export const TRAIL_WINDOW_MS = 90_000;
+
+/** IUGG mean earth radius, metres. */
+const EARTH_RADIUS = 6_371_008.8;
+const rad = (d: number) => (d * Math.PI) / 180;
+const deg = (r: number) => (r * 180) / Math.PI;
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+
+/**
+ * Great-circle distance in metres.
+ *
+ * Haversine rather than a planar approximation because these numbers are reported to operators: a
+ * flat estimate drifts visibly over a whole trip, and "how far did this rental go" is an answer
+ * somebody acts on.
+ */
+export function metresBetween(a: Fix, b: Fix): number {
+  const lat1 = rad(a.lat);
+  const lat2 = rad(b.lat);
+  const dLat = lat2 - lat1;
+  const dLng = rad(b.lng - a.lng);
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) ** 2;
+  return 2 * EARTH_RADIUS * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+
+/** Initial bearing, degrees clockwise from north, normalised to 0–360 so a mark's rotation is never negative. */
+export function bearingBetween(a: Fix, b: Fix): number {
+  const lat1 = rad(a.lat);
+  const lat2 = rad(b.lat);
+  const dLng = rad(b.lng - a.lng);
+  const y = Math.sin(dLng) * Math.cos(lat2);
+  const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLng);
+  return (deg(Math.atan2(y, x)) + 360) % 360;
+}
+
+/** A zero span for an empty track rather than a throw: a scrubber renders before its data arrives. */
+export function trackSpan(track: Track): TrackSpan {
+  if (!track.length) return { start: 0, end: 0, ms: 0 };
+  const start = track[0].at;
+  const end = track[track.length - 1].at;
+  return { start, end, ms: Math.max(0, end - start) };
+}
+
+/** Index of the last fix at or before `at`, or -1. Binary search: a long trip is thousands of fixes. */
+function indexAt(track: Track, at: number): number {
+  let lo = 0;
+  let hi = track.length - 1;
+  let best = -1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    if (track[mid].at <= at) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+
+/**
+ * Where the entity was at `at`.
+ *
+ * Interpolation is linear in lng/lat between the bracketing fixes. At a city's scale with seconds
+ * between them the great-circle correction is far below a pixel, and a spherical interpolation would
+ * be arithmetic nobody can check by eye.
+ *
+ * ★ Inside a gap this returns the last KNOWN fix with `gap: true`. It does not interpolate across
+ * one, because the straight line between two fixes twenty minutes apart is a journey that never
+ * happened — and it is the most convincing wrong thing this subsystem could draw.
+ */
+export function positionAt(track: Track, at: number, maxGapMs = MAX_GAP_MS): TrackPoint | null {
+  if (!track.length) return null;
+
+  const first = track[0];
+  const last = track[track.length - 1];
+  if (track.length === 1) return { lng: first.lng, lat: first.lat, bearing: 0, gap: false };
+  if (at <= first.at) {
+    return { lng: first.lng, lat: first.lat, bearing: bearingBetween(first, track[1]), gap: false };
+  }
+  if (at >= last.at) {
+    return { lng: last.lng, lat: last.lat, bearing: bearingBetween(track[track.length - 2], last), gap: false };
+  }
+
+  const i = indexAt(track, at);
+  const a = track[i];
+  const b = track[i + 1];
+  const bearing = bearingBetween(a, b);
+  const dt = b.at - a.at;
+  if (dt > maxGapMs) return { lng: a.lng, lat: a.lat, bearing, gap: true };
+
+  // Duplicate timestamps are a real feed condition. Dividing by that zero would hand mapbox NaN
+  // coordinates, and it stops drawing the mark without saying why.
+  const t = dt > 0 ? (at - a.at) / dt : 0;
+  return { lng: a.lng + (b.lng - a.lng) * t, lat: a.lat + (b.lat - a.lat) * t, bearing, gap: false };
+}
+
+/**
+ * How far through the track `at` is, 0–1.
+ *
+ * ★ LINEAR IN TIME, NEVER IN DISTANCE. A trip audit exists to show what happened, and what happened
+ * includes the four minutes the rider stood at a junction. A distance-linear scrubber skips exactly
+ * that: the halt covers no distance, so it occupies no scrubber, and the one moment worth auditing is
+ * the one the control cannot reach.
+ */
+export function progressAt(track: Track, at: number): number {
+  const span = trackSpan(track);
+  if (!span.ms) return 0;
+  return clamp((at - span.start) / span.ms, 0, 1);
+}
+
+/** Split where the signal was lost. Every consumer that draws a track goes through this first. */
+export function trackSegments(track: Track, maxGapMs = MAX_GAP_MS): Fix[][] {
+  if (!track.length) return [];
+  const out: Fix[][] = [[track[0]]];
+  for (let i = 1; i < track.length; i++) {
+    if (track[i].at - track[i - 1].at > maxGapMs) out.push([track[i]]);
+    else out[out.length - 1].push(track[i]);
+  }
+  return out;
+}
+
+/**
+ * The track as a GeoJSON feature, ready for a source.
+ *
+ * ★ A MultiLineString when there is a gap, so the break is drawn as a break.
+ *
+ * Null rather than an empty geometry when nothing can be a line: a single fix is a position, not a
+ * path, and an empty coordinate array is invalid GeoJSON that mapbox rejects in silence.
+ */
+export function trackLine(
+  track: Track,
+  maxGapMs = MAX_GAP_MS,
+): GeoJSON.Feature<GeoJSON.LineString | GeoJSON.MultiLineString> | null {
+  const parts = trackSegments(track, maxGapMs)
+    .filter((seg) => seg.length > 1)
+    .map((seg) => seg.map((f) => [f.lng, f.lat] as [number, number]));
+  if (!parts.length) return null;
+  const geometry: GeoJSON.LineString | GeoJSON.MultiLineString =
+    parts.length === 1
+      ? { type: 'LineString', coordinates: parts[0] }
+      : { type: 'MultiLineString', coordinates: parts };
+  return { type: 'Feature', properties: {}, geometry };
+}
+
+/**
+ * The track between two times, with both ends interpolated.
+ *
+ * ★ The interpolated ends are the point. A trail cut at the last fix BEFORE the playhead visibly lags
+ * the mark it belongs to — it stutters forward a fix at a time while the mark moves smoothly.
+ */
+export function trackSlice(track: Track, from: number, to: number, maxGapMs = MAX_GAP_MS): Fix[] {
+  if (!track.length || to <= from) return [];
+  const span = trackSpan(track);
+  const lo = Math.max(from, span.start);
+  const hi = Math.min(to, span.end);
+  if (hi <= lo) return [];
+
+  const head = positionAt(track, lo, maxGapMs);
+  const tail = positionAt(track, hi, maxGapMs);
+  const out: Fix[] = [];
+  if (head) out.push({ at: lo, lng: head.lng, lat: head.lat });
+  out.push(...track.filter((f) => f.at > lo && f.at < hi));
+  if (tail) out.push({ at: hi, lng: tail.lng, lat: tail.lat });
+  return out;
+}
+
+/** The window of the past a trail shows, ending exactly at the reading. */
+export function trackTail(
+  track: Track,
+  at: number,
+  windowMs = TRAIL_WINDOW_MS,
+  maxGapMs = MAX_GAP_MS,
+): Fix[] {
+  return trackSlice(track, at - windowMs, at, maxGapMs);
+}
+
+/**
+ * The box the whole track fits in, as `[[west, south], [east, north]]`.
+ *
+ * Gaps are irrelevant here: a fix is a place the vehicle was, whether or not the line reaches it, so
+ * every fix counts toward the frame. Null for a track with nothing in it, so a caller can fall back to
+ * a default camera rather than framing a box that does not exist.
+ */
+export function trackBounds(track: Track): [[number, number], [number, number]] | null {
+  if (!track.length) return null;
+  let w = Infinity;
+  let s = Infinity;
+  let e = -Infinity;
+  let n = -Infinity;
+  for (const f of track) {
+    if (f.lng < w) w = f.lng;
+    if (f.lng > e) e = f.lng;
+    if (f.lat < s) s = f.lat;
+    if (f.lat > n) n = f.lat;
+  }
+  return [
+    [w, s],
+    [e, n],
+  ];
+}
+
+/** Metres travelled, gaps excluded — the distance we can evidence, not the distance we can guess. */
+export function trackDistance(track: Track, maxGapMs = MAX_GAP_MS): number {
+  let total = 0;
+  for (const seg of trackSegments(track, maxGapMs)) {
+    for (let i = 1; i < seg.length; i++) total += metresBetween(seg[i - 1], seg[i]);
+  }
+  return total;
+}
+
+/**
+ * ★ THE LONGEST FRAME THE CLOCK WILL BELIEVE.
+ *
+ * A backgrounded tab throttles rAF to roughly one frame a second. Without a clamp, returning to the
+ * tab advances the playhead by however long the operator was elsewhere — the trip jumps to its end and
+ * the audit is over. Clamping means a backgrounded playback falls behind, which is the honest failure.
+ */
+export const MAX_FRAME_MS = 100;
+
+/** One frame of the clock. The whole of playback's arithmetic, testable with no browser and no map. */
+export function advance(at: number, dtMs: number, speed: number, span: TrackSpan): number {
+  return Math.min(at + clamp(dtMs, 0, MAX_FRAME_MS) * speed, span.end);
+}
+
+/** The multiplier that plays a whole track in `fitSeconds`. 1 when there is nothing to divide. */
+export function fitSpeed(span: TrackSpan, fitSeconds: number): number {
+  if (!span.ms || fitSeconds <= 0) return 1;
+  return span.ms / (fitSeconds * 1000);
+}
+
+/** Elapsed time as a stopwatch — `m:ss`, counting minutes past an hour rather than adding a field. */
+export function elapsedLabel(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+}

package/packages/ui/src/map/useFeatureSelect.ts

@@ -0,0 +1,230 @@
+// Hit-testing and selection for the mass tier.
+//
+// At city zoom a bike is a 3px circle. A click is not going to land on it, and `queryRenderedFeatures`
+// at a single point returns nothing more often than it returns the bike the user meant — so every
+// surface that has tried this has hand-rolled the same tolerance box, the same nearest-feature tie
+// break, and the same pointermove throttle. This owns all three.
+//
+// What it does NOT own: the DOM marker for the focused item. Selection is a SET (dispatch assigns
+// groups of bikes to a van), and the set is painted by feature-state on the GL layer; exactly one
+// member — the focused one — gets an <FMarker> and an <FMapPopup>, and that stays the page's call
+// because only the page knows what the callout says.
+//
+// ★ Selection is BY FEATURE ID, never by a captured feature object. A captured feature holds stale
+// coordinates the moment the fleet ticks; an id can be re-read, and re-reading is what lets the focused
+// marker follow a moving bike and disappear with a deleted one.
+import { computed, onScopeDispose, ref, shallowRef, watch, type Ref, type ShallowRef } from 'vue';
+// Aliased: `Map` would shadow the global one, and this file keeps a JS Map of the selection.
+import type { FeatureSelector, Map as MapboxMap, MapMouseEvent } from 'mapbox-gl';
+
+export interface FeatureSelectOptions {
+  /** layers to hit-test, in priority order. A layer not on the map yet is skipped, not an error */
+  layers: string[];
+  /** half-width of the hit box, in px. 8–12 is the range that feels right for 3px marks */
+  tolerance?: number;
+  /** paint `hover` feature-state as the pointer moves. Off for a read-only picture */
+  hover?: boolean;
+  /** allow more than one selected feature — the dispatch case */
+  multiple?: boolean;
+}
+
+export interface PickedFeature {
+  id: string | number;
+  source: string;
+  sourceLayer?: string;
+  at: [number, number];
+  properties: Record<string, unknown>;
+}
+
+// setFeatureState addresses a feature by (source, sourceLayer?, id) — an id on its own is ambiguous
+// across sources, which is why PickedFeature carries where it came from.
+const stateRef = (f: PickedFeature): FeatureSelector => ({
+  id: f.id,
+  source: f.source,
+  ...(f.sourceLayer ? { sourceLayer: f.sourceLayer } : {}),
+});
+
+export function useFeatureSelect(map: ShallowRef<MapboxMap | null>, options: () => FeatureSelectOptions) {
+  /** every selected feature id — this is what the GL layer paints */
+  const selected = ref(new Set<string | number>());
+  /** the one member with a DOM marker and a callout. Null when the set is empty */
+  const focused = shallowRef<PickedFeature | null>(null);
+  const hovered = shallowRef<PickedFeature | null>(null);
+
+  let painted: PickedFeature[] = [];
+  let hoverPainted: PickedFeature | null = null;
+  let frame = 0;
+
+  const present = (m: MapboxMap) => options().layers.filter((id) => m.getLayer(id));
+
+  /** nearest to the pointer, not first in the box — a box returns whatever the tile order was */
+  function pick(m: MapboxMap, point: MapMouseEvent['point']): PickedFeature | null {
+    const layers = present(m);
+    if (!layers.length) return null;
+    const t = options().tolerance ?? 10;
+    const box: [[number, number], [number, number]] = [
+      [point.x - t, point.y - t],
+      [point.x + t, point.y + t],
+    ];
+    const hits = m.queryRenderedFeatures(box, { layers });
+    let best: PickedFeature | null = null;
+    let bestDistance = Infinity;
+    for (const f of hits) {
+      if (f.id == null || f.geometry.type !== 'Point') continue;
+      const at = f.geometry.coordinates as [number, number];
+      const screen = m.project(at);
+      const d = (screen.x - point.x) ** 2 + (screen.y - point.y) ** 2;
+      if (d >= bestDistance) continue;
+      bestDistance = d;
+      best = {
+        id: f.id,
+        source: f.source ?? '',
+        sourceLayer: f.sourceLayer ?? undefined,
+        at,
+        properties: (f.properties ?? {}) as Record<string, unknown>,
+      };
+    }
+    return best;
+  }
+
+  function paint(m: MapboxMap) {
+    for (const f of painted) m.setFeatureState(stateRef(f), { selected: false });
+    painted = [...selectedFeatures.values()];
+    for (const f of painted) m.setFeatureState(stateRef(f), { selected: true });
+  }
+
+  // Feature-state needs the source (and source-layer) an id came from, which an id alone does not carry
+  // — so the picked features are kept beside the id set rather than derived from it.
+  const selectedFeatures = new Map<string | number, PickedFeature>();
+
+  function commit(features: PickedFeature[]) {
+    selectedFeatures.clear();
+    for (const f of features) selectedFeatures.set(f.id, f);
+    selected.value = new Set(selectedFeatures.keys());
+    focused.value = features.at(-1) ?? null;
+    const m = map.value;
+    if (m) paint(m);
+  }
+
+  /** click semantics: plain click replaces the set, ⌘/ctrl/shift-click adds to it when `multiple` */
+  function onClick(e: MapMouseEvent) {
+    const m = map.value;
+    if (!m) return;
+    const hit = pick(m, e.point);
+    const additive =
+      !!options().multiple &&
+      !!(e.originalEvent.metaKey || e.originalEvent.ctrlKey || e.originalEvent.shiftKey);
+    if (!hit) {
+      if (!additive) commit([]);
+      return;
+    }
+    if (!additive) {
+      commit([hit]);
+      return;
+    }
+    const next = [...selectedFeatures.values()].filter((f) => f.id !== hit.id);
+    // ⌘-clicking an already-selected feature removes it, which is what every list in the product does.
+    commit(next.length === selectedFeatures.size ? [...next, hit] : next);
+  }
+
+  // Throttled to one frame: pointermove fires far faster than the map paints, and each call is a
+  // tile-space query. rAF means at most one query per rendered frame, coalescing the rest.
+  function onMove(e: MapMouseEvent) {
+    if (!options().hover || frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      const m = map.value;
+      if (!m) return;
+      const hit = pick(m, e.point);
+      if (hit?.id === hoverPainted?.id) return;
+      if (hoverPainted) m.setFeatureState(stateRef(hoverPainted), { hover: false });
+      hoverPainted = hit;
+      hovered.value = hit;
+      if (hit) m.setFeatureState(stateRef(hit), { hover: true });
+      m.getCanvas().style.cursor = hit ? 'pointer' : '';
+    });
+  }
+
+  function wire(m: MapboxMap) {
+    m.on('click', onClick);
+    m.on('mousemove', onMove);
+  }
+
+  watch(map, (m) => m && wire(m), { immediate: true });
+
+  // The live-update intersection. A patched source moves and deletes features under the selection, so
+  // the picked coordinates are re-read whenever the source re-tiles: a moved bike's marker follows it,
+  // and a deleted one drops out of the set instead of leaving a marker over empty tarmac.
+  function resync() {
+    const m = map.value;
+    if (!m || !selectedFeatures.size) return;
+    const layers = present(m);
+    if (!layers.length) return;
+    const live = new Map<string | number, [number, number]>();
+    for (const f of m.queryRenderedFeatures({ layers })) {
+      if (f.id != null && selectedFeatures.has(f.id) && f.geometry.type === 'Point') {
+        live.set(f.id, f.geometry.coordinates as [number, number]);
+      }
+    }
+    let changed = false;
+    for (const [id, f] of [...selectedFeatures]) {
+      const at = live.get(id);
+      // Absent from the rendered set is NOT proof of deletion — it may simply be off screen. Only a
+      // feature that is inside the viewport and gone counts, which is the best a client can know.
+      if (!at) continue;
+      if (at[0] !== f.at[0] || at[1] !== f.at[1]) {
+        selectedFeatures.set(id, { ...f, at });
+        changed = true;
+      }
+    }
+    if (changed) commit([...selectedFeatures.values()]);
+  }
+
+  onScopeDispose(() => {
+    if (frame) cancelAnimationFrame(frame);
+    const m = map.value;
+    if (!m) return;
+    m.off('click', onClick);
+    m.off('mousemove', onMove);
+    if (!m.isStyleLoaded()) return;
+    for (const f of painted) m.setFeatureState(stateRef(f), { selected: false });
+    if (hoverPainted) m.setFeatureState(stateRef(hoverPainted), { hover: false });
+  });
+
+  return {
+    selected: selected as Ref<Set<string | number>>,
+    focused,
+    hovered,
+    /** how many things a bulk action would act on */
+    count: computed(() => selected.value.size),
+    /** select by feature — from a list row, a lasso, a zone query */
+    set: (features: PickedFeature[]) => commit(features),
+    /**
+     * Union — shift-click, shift-lasso. Already-selected ids are skipped rather than re-appended, so
+     * dragging over the same bikes twice does not reorder the set or move the focus.
+     */
+    add: (features: PickedFeature[]) =>
+      commit([
+        ...selectedFeatures.values(),
+        ...features.filter((f) => !selectedFeatures.has(f.id)),
+      ]),
+    /**
+     * Difference — alt-lasso.
+     *
+     * ★ Focus is PRESERVED when it survives, rather than falling to whatever happens to be last.
+     * `commit` focuses the final feature, which is right for a click (the thing just picked) and wrong
+     * here: removing three bikes from a set of twenty would slide the open popup onto an unrelated
+     * bike the reader never touched. If the focused one was itself removed, nothing is focused.
+     */
+    subtract: (ids: Iterable<string | number>) => {
+      const drop = new Set(ids);
+      const kept = [...selectedFeatures.values()].filter((f) => !drop.has(f.id));
+      const survivor = focused.value && !drop.has(focused.value.id) ? focused.value : null;
+      commit(kept);
+      focused.value = survivor;
+    },
+    clear: () => commit([]),
+    /** re-read the selection's coordinates after a live tick */
+    resync,
+  };
+}

package/packages/ui/src/map/useLiveMarkers.ts

@@ -0,0 +1,84 @@
+// Tween what useMarkerSource publishes for the viewport, so a vehicle glides between fixes instead of
+// teleporting.
+//
+// ★ DOM MARKERS ONLY, AND THAT IS THE DESIGN, NOT A LIMIT WE RAN INTO. The GL fleet tier keeps
+// snapping: a full setData re-upload measured 222 ms per tick at 30,000 features, which a 2–5 s
+// cadence absorbs and a 16 ms frame does not. Smoothness that costs 222 ms a frame is not smoothness.
+// What this covers is the few dozen markers a viewport actually holds, which is where a glide reads
+// as motion rather than as jitter.
+import { computed, onScopeDispose, shallowRef, watch } from 'vue';
+import { advanceLeg, legAt, type Leg } from './liveMarkers';
+import type { MarkerSourceItem } from './useMarkerSource';
+
+export interface LiveMarkerOptions {
+  /** the expected interval between fixes, ms — how long one glide lasts. Default 4000 */
+  ms?: number;
+}
+
+/**
+ * `items` is what `useMarkerSource` publishes; the return is the same list with `at` interpolated.
+ *
+ * Feed it straight into the keyed `v-for` of `<FMarker>` that the source was already driving — the
+ * keys are unchanged, so nothing remounts and mapbox keeps the same elements.
+ */
+export function useLiveMarkers(
+  items: () => MarkerSourceItem[],
+  options: () => LiveMarkerOptions = () => ({}),
+) {
+  const legs = new Map<string, Leg>();
+  const now = shallowRef(0);
+  let raf = 0;
+
+  /**
+   * Someone who asked for less motion gets the position, not the journey. There is no information in
+   * the glide that the position does not already carry, which is what makes it safe to drop entirely
+   * rather than shorten.
+   */
+  const still =
+    typeof matchMedia === 'undefined' ? false : matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  if (!still && typeof requestAnimationFrame !== 'undefined') {
+    const frame = (t: number) => {
+      now.value = t;
+      raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+  }
+  onScopeDispose(() => {
+    if (raf) cancelAnimationFrame(raf);
+    raf = 0;
+  });
+
+  // ★ THE BOOKKEEPING LIVES IN A WATCHER, NOT IN THE COMPUTED. Writing to `legs` from inside the
+  // computed would make it impure: Vue is free to evaluate a computed more than once, and each extra
+  // pass would start another leg from a slightly later position — the marker would decelerate toward
+  // its target and never arrive. The watcher runs once per change to the list, which is exactly when
+  // a leg should be decided.
+  watch(
+    items,
+    (list) => {
+      const ms = options().ms ?? 4_000;
+      const t = now.value;
+      const seen = new Set<string>();
+      for (const item of list) {
+        seen.add(item.key);
+        legs.set(item.key, advanceLeg(legs.get(item.key), item.at, t, ms));
+      }
+      // A vehicle that left the viewport must not keep its leg: the key can come back at a completely
+      // different place, and a stale leg would glide it across the city on re-entry.
+      for (const key of [...legs.keys()]) if (!seen.has(key)) legs.delete(key);
+    },
+    { immediate: true },
+  );
+
+  return computed<MarkerSourceItem[]>(() => {
+    const list = items();
+    if (still) return list;
+    const ms = options().ms ?? 4_000;
+    const t = now.value;
+    return list.map((item) => {
+      const leg = legs.get(item.key);
+      return leg ? { ...item, at: legAt(leg, t, ms) } : item;
+    });
+  });
+}