@humanforest/ui 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/ui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "files": [
     "src",
@@ -9,7 +9,7 @@
     "preset.gen.js"
   ],
   "dependencies": {
-    "@humanforest/tokens": "^0.3.4",
+    "@humanforest/tokens": "^0.3.6",
     "@internationalized/date": "^3.12.2",
     "@mapbox/search-js-core": "^1.6.0",
     "@turf/boolean-point-in-polygon": "^7.4.0",

package/preset.gen.js

@@ -1017,7 +1017,8 @@ var progressGroupTheme = {
 var proseTheme = {
   codePreview: {
     slots: {
-      preview: "ed-demo"
+      preview: "ed-demo",
+      code: "[&>div]:rounded-t-none [&>div>div>pre]:rounded-t-none"
     }
   },
   codeCollapse: {

package/src/address/autofill.ts

@@ -72,7 +72,7 @@ export function addressAutofill(options: AddressAutofillOptions): AddressAutofil
         signal,
       });
       session = new SessionToken();
-      return features.length ? fromAutofill(features[0]) : null;
+      return features.length ? fromAutofill(features[0]!) : null;
     },
   };
 }

package/src/address/geocode.ts

@@ -44,7 +44,7 @@ export function geocoder(options: GeocoderOptions): Geocoder {
       // the building, then the street, then the postcode, then the city. The first is the answer;
       // the rest are its context, and `fromGeocodingFeature` already reads that off `context`.
       const { features } = await client.reverse(at, { limit: 1, signal });
-      return features.length ? fromGeocodingFeature(features[0]) : null;
+      return features.length ? fromGeocodingFeature(features[0]!) : null;
     },
 
     async forward(query, signal) {

package/src/address/validate.ts

@@ -62,7 +62,7 @@ export function addressValidator(options: AddressValidatorOptions): AddressValid
       const { features } = await client.validate(query, { sessionToken: new SessionToken(), signal });
       if (!features.length) return null;
 
-      const feature = features[0];
+      const feature = features[0]!;
       // MatchCode's fields are typed as const-enum members; read as plain strings, since the enum has
       // no runtime object to compare against (see the note at the top of this file).
       const code = (feature.properties?.match_code ?? {}) as unknown as Record<string, string>;

package/src/contexts/contexts.ts

@@ -88,7 +88,7 @@ const splitToken = (token: string): { prefixes: string[]; leaf: string } => {
     } else cur += ch;
   }
   parts.push(cur);
-  return { prefixes: parts.slice(0, -1), leaf: parts[parts.length - 1] };
+  return { prefixes: parts.slice(0, -1), leaf: parts[parts.length - 1]! };
 };
 
 const MARKER_RE = /^forest-[\w-]+$/;

package/src/filter/filterSchema.ts

@@ -45,7 +45,7 @@ export type FilterSchema = Record<string, FilterField>;
  * The first entry of each list is that kind's default operator, so a freshly added clause reads the
  * way it would in Linear: an enum starts at `is`, and picking a second value promotes it to `is any of`.
  */
-export const OPERATORS_BY_KIND: Record<FieldKind, readonly Operator[]> = {
+export const OPERATORS_BY_KIND: Record<FieldKind, readonly [Operator, ...Operator[]]> = {
   enum: ['is', 'isNot', 'isAnyOf', 'isNoneOf'],
   text: ['contains', 'doesNotContain', 'is', 'isNot'],
   number: ['is', 'isNot', 'isAbove', 'isBelow', 'isBetween'],

package/src/logo/FSubLogo.vue

@@ -65,9 +65,9 @@ const joined = computed(() => gtRun(word.value.toLowerCase(), leadAdvance.value)
 const ic = iconGeometry();
 // the icon letter is sized to the square's cap height, so it's set twice: once to measure, once at size
 const icon = computed(() => {
-  const probe = setWord(word.value[0], { font: 'mohr', size: SUBLOGO_MOHR_SIZE });
+  const probe = setWord(word.value.charAt(0), { font: 'mohr', size: SUBLOGO_MOHR_SIZE });
   const size = (SUBLOGO_MOHR_SIZE * ic.letterCap) / (probe.inkBottom - probe.inkTop);
-  const run = setWord(word.value[0], { font: 'mohr', size });
+  const run = setWord(word.value.charAt(0), { font: 'mohr', size });
   return {
     run,
     x: ic.cx - (run.inkLeft + (run.inkRight - run.inkLeft) / 2),
@@ -118,7 +118,7 @@ const joinedLight = computed(() => ramp(props.ink != null ? props.ink : props.fa
 const joinedDark = computed(() => {
   if (props.ink != null) return ramp(props.face);
   const i = STEPS.indexOf(props.face);
-  return ramp(i > 0 ? STEPS[i - 1] : props.face);
+  return ramp(i > 0 ? STEPS[i - 1]! : props.face);
 });
 
 const vars = computed(() => ({

package/src/map/FMapSearch.vue

@@ -190,7 +190,7 @@ function onFocusOut() {
   });
 }
 
-function sourceOf(item: PaletteItem): MapSearchSource {
+function sourceOf(item: PaletteItem): MapSearchSource | undefined {
   // A promoted row carries no source of its own, so find the group its result actually came from.
   const id =
     state.value?.groups.find((g) => item.result && g.results.includes(item.result))?.sourceId ??
@@ -223,7 +223,8 @@ async function choose(value: unknown) {
 
   if (geometry) moveTo(geometry);
   collapse();
-  emit('select', result, source, geometry);
+  // With no source left to attribute it to, a pick still moves the camera but emits nothing.
+  if (source) emit('select', result, source, geometry);
 }
 
 // ★ Centring is a lie on a real ops screen — a side panel and this panel cover part of the map, so the
@@ -289,7 +290,6 @@ onBeforeUnmount(cancel);
         sideOffset: 8,
         // The field keeps focus while the panel opens — the roving highlight lives on the input via
         // aria-activedescendant, so moving focus into the content would break the combobox pattern.
-        trapFocus: false,
         onOpenAutoFocus: (e: Event) => e.preventDefault(),
       }"
       :ui="{ content: ui.panel() }"

package/src/map/bin.ts

@@ -36,7 +36,7 @@ export const H3_EDGE_M: Record<number, number> = {
 };
 
 /** The resolutions this ladder will choose between. Below 6 a cell is bigger than London. */
-export const H3_RES_RANGE: readonly number[] = [6, 7, 8, 9, 10, 11];
+export const H3_RES_RANGE: readonly [number, ...number[]] = [6, 7, 8, 9, 10, 11];
 
 /**
  * How wide a cell should be ON SCREEN, in CSS px.
@@ -57,7 +57,7 @@ export const metresPerPixel = (zoom: number, lat: number): number =>
 
 /** How wide a cell of this resolution draws, in CSS px, at a zoom and latitude. */
 export const cellWidthPx = (res: number, zoom: number, lat: number): number =>
-  (2 * H3_EDGE_M[res]) / metresPerPixel(zoom, lat);
+  (2 * (H3_EDGE_M[res] ?? NaN)) / metresPerPixel(zoom, lat);
 
 /**
  * The resolution to bin at for a zoom — the rung whose drawn cell lands nearest the ideal width.
@@ -173,7 +173,7 @@ export function robustDomain(values: readonly number[], percentile = 0.95): Doma
   const finite = values.filter((v) => Number.isFinite(v)).sort((a, b) => a - b);
   if (!finite.length) return { domain: [0, 0], clamped: 0, percentile };
   const idx = Math.min(finite.length - 1, Math.max(0, Math.ceil(percentile * finite.length) - 1));
-  const top = finite[idx];
+  const top = finite[idx]!;
   return {
     domain: [0, top],
     clamped: finite.filter((v) => v > top).length,

package/src/map/density.ts

@@ -170,6 +170,8 @@ export function densityLayers(opts: DensityOptions): OverlayLayer[] {
     alpha = DENSITY_ALPHA,
   } = opts;
 
+  // rampStops caps the count at the ramp's length, so buckets past it take the top stop.
+  const stops = densityStops(steps, ramp);
   const layers: OverlayLayer[] = [
     {
       id: `${prefix}-fill`,
@@ -180,7 +182,7 @@ export function densityLayers(opts: DensityOptions): OverlayLayer[] {
       // an unvalued cell falls into the `step`'s first bucket and is published as a counted zero.
       filter: ['has', prop],
       paint: {
-        'fill-color': stepColour(prop, domain, steps, (i) => densityStops(steps, ramp)[i]),
+        'fill-color': stepColour(prop, domain, steps, (i) => stops[i] ?? stops.at(-1)!),
         'fill-opacity': alpha,
         // fill-emissive-strength is injected by useMapOverlay — `fill` is a shaded type, and an unlit
         // overlay paints at about a fifth of its luminance under the night preset.
@@ -272,7 +274,7 @@ export function balanceLayers(opts: BalanceOptions): OverlayLayer[] {
       slot: MAP_SLOT.route,
       filter,
       paint: {
-        'fill-color': stepColour(prop, domain, BALANCE_STEPS, (i) => balanceStops(ramp)[i]),
+        'fill-color': stepColour(prop, domain, BALANCE_STEPS, (i) => balanceStops(ramp)[i]!),
         'fill-opacity': alpha,
       },
     },
@@ -347,17 +349,17 @@ export function densityLegend(opts: LegendOptions): RampLegend {
   return {
     kind: 'density',
     unit,
-    cellM: res != null ? Math.round(2 * H3_EDGE_M[res]) : undefined,
+    cellM: res != null ? Math.round(2 * (H3_EDGE_M[res] ?? NaN)) : undefined,
     clamped,
     percentile,
     stops: edges.slice(0, -1).map((from, i) => ({
       key: String(i),
-      colour: stops[i],
+      colour: stops[i] ?? stops.at(-1)!,
       from,
-      to: edges[i + 1],
+      to: edges[i + 1]!,
       // The top bucket is open — everything at or above its floor is painted there, including the
       // clamped readings, so a closed label would understate it.
-      label: i === steps - 1 ? `${fmt(from, span)}+` : `${fmt(from, span)}–${fmt(edges[i + 1], span)}`,
+      label: i === steps - 1 ? `${fmt(from, span)}+` : `${fmt(from, span)}–${fmt(edges[i + 1]!, span)}`,
     })),
   };
 }
@@ -378,16 +380,16 @@ export function balanceLegend(opts: LegendOptions & { low?: string; high?: strin
   return {
     kind: 'balance',
     unit,
-    cellM: res != null ? Math.round(2 * H3_EDGE_M[res]) : undefined,
+    cellM: res != null ? Math.round(2 * (H3_EDGE_M[res] ?? NaN)) : undefined,
     clamped,
     percentile,
     stops: edges.slice(0, -1).map((from, i) => {
-      const to = edges[i + 1];
+      const to = edges[i + 1]!;
       const centre = i === mid;
       const arm = i < mid ? low : high;
       return {
         key: String(i),
-        colour: stops[i],
+        colour: stops[i]!,
         from,
         to,
         label: centre

package/src/map/draw.ts

@@ -76,8 +76,8 @@ const toDeg = (rad: number) => (rad * 180) / Math.PI;
 /** GeoJSON's closed ring: the open one with its first position repeated at the end. */
 export function closeRing(ring: DrawRing): LngLat[] {
   if (ring.length < 3) return [...ring];
-  const [first] = ring;
-  const last = ring[ring.length - 1];
+  const first = ring[0]!;
+  const last = ring[ring.length - 1]!;
   return first[0] === last[0] && first[1] === last[1] ? [...ring] : [...ring, [first[0], first[1]]];
 }
 
@@ -102,7 +102,7 @@ export function drawFeatureToGeoJSON(feature: DrawFeature): GeoJSON.Feature<GeoJ
 export function midpoints(ring: DrawRing): LngLat[] {
   if (ring.length < 2) return [];
   return ring.map((a, i) => {
-    const b = ring[(i + 1) % ring.length];
+    const b = ring[(i + 1) % ring.length]!;
     return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] as LngLat;
   });
 }
@@ -188,13 +188,13 @@ export function selfIntersects(ring: DrawRing): boolean {
   const n = ring.length;
   if (n < 4) return false;
   for (let i = 0; i < n; i++) {
-    const a = ring[i];
-    const b = ring[(i + 1) % n];
+    const a = ring[i]!;
+    const b = ring[(i + 1) % n]!;
     for (let j = i + 1; j < n; j++) {
       // share a vertex — adjacent edges, and the wrap-around pair the modulo makes adjacent too
       if (j === i || (j + 1) % n === i || (i + 1) % n === j) continue;
-      const c = ring[j];
-      const d = ring[(j + 1) % n];
+      const c = ring[j]!;
+      const d = ring[(j + 1) % n]!;
       if (segmentsCross(a, b, c, d)) return true;
     }
   }
@@ -209,7 +209,7 @@ export function selfIntersects(ring: DrawRing): boolean {
  * paints the problem instead and refuses the commit.
  */
 export function ringProblem(ring: DrawRing): DrawProblem | null {
-  const distinct = ring.filter((p, i) => i === 0 || !samePoint(p, ring[i - 1]));
+  const distinct = ring.filter((p, i) => i === 0 || !samePoint(p, ring[i - 1]!));
   if (distinct.length < 3) return 'too-few';
   if (selfIntersects(ring)) return 'self-intersects';
   return null;
@@ -352,5 +352,5 @@ export function undoHistory<T>(h: DrawHistory<T>): DrawHistory<T> {
 export function redoHistory<T>(h: DrawHistory<T>): DrawHistory<T> {
   if (!h.future.length) return h;
   const [present, ...future] = h.future;
-  return { past: [...h.past, h.present], present, future };
+  return { past: [...h.past, h.present], present: present as T, future };
 }

package/src/map/ease.ts

@@ -47,9 +47,9 @@ const LINEAR = (t: number) => t;
 export const parseEasing = (value: string): ((t: number) => number) => {
   const m = value.trim().match(/^cubic-bezier\(([^)]+)\)$/);
   if (!m) return LINEAR;
-  const parts = m[1].split(',').map((n) => Number.parseFloat(n));
+  const parts = m[1]!.split(',').map((n) => Number.parseFloat(n));
   if (parts.length !== 4 || parts.some((n) => Number.isNaN(n))) return LINEAR;
-  return cubicBezier(parts[0], parts[1], parts[2], parts[3]);
+  return cubicBezier(parts[0]!, parts[1]!, parts[2]!, parts[3]!);
 };
 
 /** Reads a CSS time token (`240ms`, `0.24s`) off an element, in ms. 0 for anything unparseable. */

package/src/map/mapSearch.ts

@@ -195,7 +195,7 @@ export function paletteGroups(state: MapSearchState): PaletteGroup[] {
             icon: 'i-lucide-target',
             disabled: true,
           }
-        : { ...skeletons(BEST)[0], id: `${BEST}-skeleton` };
+        : { ...skeletons(BEST)[0]!, id: `${BEST}-skeleton` };
 
     out.push({ id: BEST, ignoreFilter: true, items: [item] });
   }
@@ -261,7 +261,7 @@ function withGroup(
   const i = state.groups.findIndex((g) => g.sourceId === sourceId);
   if (i < 0) return state;
   const groups = state.groups.slice();
-  groups[i] = { ...groups[i], ...patch };
+  groups[i] = { ...groups[i]!, ...patch };
   return { ...state, groups };
 }
 

package/src/map/regionSelect.ts

@@ -156,8 +156,8 @@ export function worthQuerying(box: ScreenBox): boolean {
 export function pathPolygon(path: readonly ScreenPoint[]): GeoJSON.Feature<GeoJSON.Polygon> | null {
   if (path.length < 3) return null;
   const ring: ScreenPoint[] = [...path];
-  const first = ring[0];
-  const last = ring[ring.length - 1];
+  const first = ring[0]!;
+  const last = ring[ring.length - 1]!;
   if (first[0] !== last[0] || first[1] !== last[1]) ring.push([first[0], first[1]]);
   return polygon([ring]);
 }

package/src/map/sources/mapboxPlaces.ts

@@ -63,7 +63,10 @@ export function mapboxPlaces(options: MapboxPlacesOptions): MapSearchSource {
             signal: retrieveSignal,
           });
           session = new SessionToken();
-          return features[0].geometry;
+          // Nothing to place is a failed resolve, which FMapSearch answers by keeping its panel open.
+          const feature = features[0];
+          if (!feature) throw new Error(`mapboxPlaces: retrieve returned no feature for "${s.name}"`);
+          return feature.geometry;
         },
       }));
     },

package/src/map/track.ts

@@ -79,8 +79,8 @@ export function bearingBetween(a: Fix, b: Fix): number {
 /** 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;
+  const start = track[0]!.at;
+  const end = track[track.length - 1]!.at;
   return { start, end, ms: Math.max(0, end - start) };
 }
 
@@ -91,7 +91,7 @@ function indexAt(track: Track, at: number): number {
   let best = -1;
   while (lo <= hi) {
     const mid = (lo + hi) >> 1;
-    if (track[mid].at <= at) {
+    if (track[mid]!.at <= at) {
       best = mid;
       lo = mid + 1;
     } else {
@@ -115,19 +115,19 @@ function indexAt(track: Track, at: number): number {
 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];
+  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 };
+    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 };
+    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 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 };
@@ -155,10 +155,10 @@ export function progressAt(track: Track, at: number): number {
 /** 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]]];
+  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]);
+    if (track[i]!.at - track[i - 1]!.at > maxGapMs) out.push([track[i]!]);
+    else out[out.length - 1]!.push(track[i]!);
   }
   return out;
 }
@@ -181,7 +181,7 @@ export function trackLine(
   if (!parts.length) return null;
   const geometry: GeoJSON.LineString | GeoJSON.MultiLineString =
     parts.length === 1
-      ? { type: 'LineString', coordinates: parts[0] }
+      ? { type: 'LineString', coordinates: parts[0]! }
       : { type: 'MultiLineString', coordinates: parts };
   return { type: 'Feature', properties: {}, geometry };
 }
@@ -247,7 +247,7 @@ export function trackBounds(track: Track): [[number, number], [number, number]]
 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]);
+    for (let i = 1; i < seg.length; i++) total += metresBetween(seg[i - 1]!, seg[i]!);
   }
   return total;
 }

package/src/map/useMapDraw.ts

@@ -216,7 +216,7 @@ export function useMapDraw(map: ShallowRef<MapboxMap | null>, options: () => Map
       candidates.map((c) => c.at),
       at,
     );
-    return hit == null ? raw : candidates[hit].lngLat;
+    return hit == null ? raw : candidates[hit]!.lngLat;
   }
 
   // ── the draft ────────────────────────────────────────────────────────────────────────────────────
@@ -232,7 +232,7 @@ export function useMapDraw(map: ShallowRef<MapboxMap | null>, options: () => Map
     }
     // Clicking the first vertex closes the ring — the gesture every drawing tool has, and the reason
     // the draft's own vertices are snap candidates.
-    if (ring.length >= 3 && apart(toScreen(m, ring[0]), at) <= HANDLE_HIT_PX) {
+    if (ring.length >= 3 && apart(toScreen(m, ring[0]!), at) <= HANDLE_HIT_PX) {
       finish();
       return;
     }
@@ -320,7 +320,7 @@ export function useMapDraw(map: ShallowRef<MapboxMap | null>, options: () => Map
   function featureAt(m: MapboxMap, at: ScreenPoint): DrawFeature | null {
     const p = turfPoint(toLngLat(m, at));
     for (let i = features.value.length - 1; i >= 0; i--) {
-      const f = features.value[i];
+      const f = features.value[i]!;
       if (f.ring.length < 3) continue;
       if (booleanPointInPolygon(p, turfPolygon([closeRing(f.ring)]))) return f;
     }
@@ -367,7 +367,7 @@ export function useMapDraw(map: ShallowRef<MapboxMap | null>, options: () => Map
         // that was not there when the reader started moving.
         const f = features.value.find((x) => x.id === handle.id);
         if (f) {
-          const mid = midpoints(f.ring)[handle.index];
+          const mid = midpoints(f.ring)[handle.index]!;
           replaceRing(handle.id, insertVertex(f.ring, handle.index, mid));
           drag = { kind: 'vertex', id: handle.id, index: handle.index + 1 };
         }

package/src/map/useRegionSelect.ts

@@ -166,7 +166,7 @@ export function useRegionSelect(
     const p = canvasPoint(m, e);
     // A lasso is everything between press and release; a box is its two corners, and a circle its
     // centre and a point on the rim — both of which only ever need the first point and the current one.
-    path.value = shape.value === 'lasso' ? [...path.value, p] : [path.value[0], p];
+    path.value = shape.value === 'lasso' ? [...path.value, p] : [path.value[0] ?? p, p];
   }
 
   function onUp(e: PointerEvent) {

package/src/map/vehicle.ts

@@ -640,8 +640,8 @@ export function paintMarkerSvg(
   // vehicle's manifest here painted a place's glyphs with the vehicle's param names, which resolved to
   // nothing and left every glyph transparent.
   const declared = [...raw.matchAll(/<m:parameter[^>]*m:name="([^"]+)"[^>]*m:value="([^"]+)"/g)].map((m) => ({
-    name: m[1],
-    sentinel: m[2],
+    name: m[1]!,
+    sentinel: m[2]!,
   }));
   const table = declared.length ? declared : markerManifest.params;
   for (const p of table) {
@@ -780,7 +780,7 @@ export function unavailableReasons(v: VehicleFacts): string[] {
 export function unavailableReason(v: VehicleFacts): string | null {
   const reasons = unavailableReasons(v);
   if (!reasons.length) return null;
-  if (reasons.length === 1) return reasons[0];
+  if (reasons.length === 1) return reasons[0]!;
   return `${reasons.slice(0, -1).join(', ')} and ${reasons.at(-1)}`;
 }
 

package/src/themes/prose.ts

@@ -26,6 +26,10 @@ export const proseTheme = {
   codePreview: {
     slots: {
       preview: 'ed-demo',
+      // Stock squares `code > div > pre`, the top of a bare block joined under the pane. A collapsed
+      // block wraps that <pre> one level deeper, so the wrapper and the <pre> both kept 12px top
+      // corners and notched the joint at each end.
+      code: '[&>div]:rounded-t-none [&>div>div>pre]:rounded-t-none',
     },
   },