@humanforest/nuxt-layer 0.1.0

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

@@ -0,0 +1,70 @@
+// What a legend row needs to draw itself, and nothing else.
+//
+// ★ THE SWATCH DESCRIBES THE PAINT, NOT THE CATEGORY. A legend earns its place by being checkable
+// against the map: a reader looks at the key, looks at the map, and matches. That only works if the
+// swatch carries how the thing is actually drawn — filled or bounded, solid or dashed — rather than
+// reducing every category to a coloured dot. Five dots over a map that paints two of those five as
+// bare outlines is a legend a reader has to learn to distrust.
+//
+// It is deliberately not zone-shaped. Zones are the first caller, not the only conceivable one, and
+// nothing here knows what a zone is — `zoneLegendItems` in zone.ts is where that knowledge lives.
+
+/** One row of a legend: a swatch and what it means. */
+export interface MapLegendItem {
+  /** stable key for the row */
+  key: string;
+  label: string;
+  /**
+   * A token NAME, e.g. `--forest-map-zone-event`, not a resolved colour.
+   *
+   * The swatch is DOM, so it can reference the token directly and re-resolve on a mode change the way
+   * the rest of the page does. Only the GL side has to resolve tokens to literal sRGB.
+   */
+  colour: string;
+  /**
+   * `fill` is a wash inside its boundary; `line` is the boundary alone. Default `fill`.
+   *
+   * Not an opacity, deliberately. A layer's own fill opacity is around a tenth, which reproduced at
+   * swatch size is invisible against a card — and a tenth against an eighth is a difference nobody
+   * can see. Filled or bounded is the distinction a reader can actually check against the map; the
+   * two filled zones are told apart by hue.
+   */
+  swatch?: 'fill' | 'line';
+  /**
+   * Dash pattern in line widths. A dashed boundary reads as conditional rather than standing.
+   *
+   * The swatch reads PRESENCE only — a CSS border cannot express one pattern differently from
+   * another, and at this size no reader could tell them apart if it could. The pattern itself is
+   * carried so a caller passing layer paint straight through does not have to flatten it first.
+   */
+  dash?: readonly number[];
+}
+
+/**
+ * How strong the wash is in a swatch — NOT the layer's own fill opacity.
+ *
+ * A fill layer sits at around a tenth so a city still reads through it. At 12px on a card that is
+ * nothing at all, and the row would be indistinguishable from an unfilled one. This is the smallest
+ * wash that still reads as a wash rather than as a tint of the card.
+ */
+const WASH = '28%';
+
+/**
+ * The swatch's inline style, shared by the legend and the layers switch.
+ *
+ * ★ ONE FUNCTION, TWO LISTS. The switch is the legend with a control on each row, and a reader checks
+ * either the same way — look at the key, look at the map, match. Two copies of this would drift, and
+ * the drift would land exactly where it costs the most: a bounded zone drawn as a filled one in the
+ * list a reader is using to decide what to turn off.
+ *
+ * The boundary is a real border rather than a ring, because a dashed ring is not a thing CSS offers
+ * and the dash is half of what this swatch says.
+ */
+export function legendSwatchStyle(item: MapLegendItem): Record<string, string> {
+  return {
+    backgroundColor:
+      item.swatch === 'line' ? 'transparent' : `color-mix(in oklab, var(${item.colour}) ${WASH}, transparent)`,
+    borderColor: `var(${item.colour})`,
+    borderStyle: item.dash ? 'dashed' : 'solid',
+  };
+}

package/packages/ui/src/map/mapSearch.theme.ts

@@ -0,0 +1,79 @@
+// Presentation for FMapSearch — the field, the panel, and one result row.
+//
+// ★ A RECIPE RATHER THAN CLASSES ON THE TEMPLATE, because this component composes reka's Listbox
+// primitives directly and so has no Nuxt UI theme fragment behind it. Every other Forest component
+// delegates: FCanvasControl renders a UButton and inherits the button ladder, which is why it carries
+// no `coarse:` of its own. This one cannot — `UListbox` builds its OWN ListboxRoot, so an external
+// field could never drive it — and the sizing had ended up as utilities scattered across the markup,
+// where nothing could see it whole.
+//
+// ★ THE COARSE LADDER IS THE REASON IT EXISTS. `--forest-canvas-control` already grows the box
+// (2.25rem → 2.75rem), so pinned type made the control 22% taller carrying the same 14px text: emptier
+// rather than bigger, and no easier to read on the device where reading is hardest. Everything steps a
+// rung together here — type, icon, padding, gap — the way `themes/listbox.ts` steps a stock row.
+//
+// It steps from ITS OWN base rather than adopting one of that fragment's rungs wholesale, because this
+// row rests smaller than a stock listbox row. The coarse targets land split across two of them: the
+// label and description reach `lg`'s (text-base, text-sm), while the icon and the group heading reach
+// `sm`'s (size-5, text-xs) — a size-4 icon taking lg's size-6 would be two rungs, and would then
+// outweigh a label that moved only one.
+//
+// ★ 16px ON THE FIELD IS LOAD-BEARING, not a rounding of "a bit bigger". Below it, iOS Safari zooms
+// the viewport on focus, which throws the map camera away from whatever the reader was looking at.
+import { tv } from 'tailwind-variants';
+
+export const mapSearchTheme = tv({
+  slots: {
+    /**
+     * The morphing box: a canvas control at rest, a field once focused.
+     *
+     * ★ THE NEUTRAL RAMP DIRECTLY, not `ring-default` / `text-dimmed`, because this box has to be
+     * indistinguishable from the FCanvasControls beside it and those are UButtons: their edge is the
+     * button recipe's --btn-line (neutral-300 / 700) and their glyph is --btn-text (neutral-900 / 100).
+     * Measured against a live control — the semantic tokens are close but wrong in both cases:
+     * --ui-border is a visibly lighter edge, and text-dimmed a far paler glyph than any control on the
+     * canvas carries.
+     */
+    field:
+      'forest-canvas-chrome relative flex h-(--forest-canvas-control) items-center overflow-hidden rounded-md ring ring-[var(--neutral-300)] ring-inset transition-[width] duration-(--motion-base) ease-(--motion-ease-out) motion-reduce:transition-none dark:ring-[var(--neutral-700)]',
+    /** The search glyph, centred in the collapsed square so it never moves as the box grows. */
+    icon: 'pointer-events-none absolute start-0 flex size-(--forest-canvas-control) shrink-0 items-center justify-center p-2.5 text-[var(--neutral-900)] dark:text-[var(--neutral-100)]',
+    input:
+      'h-full w-full cursor-pointer bg-transparent pe-2 ps-(--forest-canvas-control) text-sm text-[var(--neutral-900)] outline-none coarse:text-base focus:cursor-text disabled:cursor-not-allowed dark:text-[var(--neutral-100)]',
+    /**
+     * The scroll box. The cap follows the ROW, and the row grows on touch — 46px becomes ~57px once
+     * type, icon and padding each step a rung, so three rows plus a heading need ~13.5rem rather than
+     * the 11.5rem measured against a fine-pointer row.
+     *
+     * ★ Not a `coarse:` variant: on a tablet `coarse:` and `sm:` both match and neither obviously
+     * wins, and a layout number should not depend on variant ordering. One value, sized for the case
+     * that actually happens; a narrow window with a mouse gets 2rem more panel than it needs, which is
+     * the cheaper error.
+     */
+    viewport: 'max-h-[13.5rem] overflow-y-auto focus:outline-none sm:max-h-[22rem]',
+    /**
+     * The popover surface, handed to UPopover's `content` slot.
+     *
+     * ★ `w-(--reka-popper-anchor-width)` is how the panel matches the field. A custom property set on
+     * the field cannot reach it — the content is TELEPORTED to <body>, and custom properties inherit
+     * down the DOM tree, so nothing of the field's is in scope. reka sets this one on the content
+     * element itself, which is the only reason it resolves. Without it the panel sized to its longest
+     * row and hung past the field.
+     */
+    panel:
+      'w-(--reka-popper-anchor-width) rounded-md p-1 ring ring-[var(--neutral-300)] dark:ring-[var(--neutral-700)]',
+    group: 'px-2 pt-2 pb-1 text-[0.6875rem] font-bold tracking-wide text-dimmed uppercase coarse:px-2.5 coarse:text-xs',
+    item: 'flex cursor-pointer items-center gap-2 rounded-[var(--ui-radius)] px-2 py-1.5 outline-none coarse:gap-2.5 coarse:px-2.5 coarse:py-2 data-disabled:cursor-default data-highlighted:bg-elevated',
+    itemIcon: 'size-4 shrink-0 text-dimmed coarse:size-5',
+    /** Stacked, never side by side: two labels in one row let the longer win the truncation race. */
+    itemBody: 'min-w-0 flex-1',
+    itemLabel: 'block truncate text-sm coarse:text-base',
+    itemDescription: 'block truncate text-xs text-muted coarse:text-sm',
+    skeleton: 'h-3.5 w-40 coarse:h-4',
+    spinner: 'ms-auto size-4 shrink-0 animate-spin text-dimmed coarse:size-5',
+  },
+  variants: {
+    /** A row that is not a real answer — a skeleton, a failure, a reserved best-match with no hit. */
+    muted: { true: { itemLabel: 'text-muted' } },
+  },
+});

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

@@ -0,0 +1,279 @@
+// The orchestration behind <FMapSearch>, as pure functions over plain data.
+//
+// It is out here rather than inside the SFC because packages/ui tests run in node with no DOM: state
+// that lives in a component cannot be tested at all, and the awkward parts of this control are all
+// state — answers arriving out of order, a stale query overwriting a fresh one, a group that has to
+// hold its place while a slow source is still thinking.
+//
+// What is NOT here: the keyboard, the roving highlight and the ARIA. <UCommandPalette> owns those
+// through reka's Listbox, and its `by` prop keys items by id so a highlight survives a slow source
+// landing above it. An earlier cut hand-rolled all three; rebuilding a listbox that the design system
+// already ships was the wrong call.
+
+/** One row's worth of answer from a source. */
+export interface MapSearchResult {
+  /** unique within its source */
+  id: string;
+  title: string;
+  subtitle?: string;
+  /** overrides the source's icon */
+  icon?: string;
+  /** the source asserts this result answers the query outright */
+  exact?: boolean;
+  /** present when the source already knows where the thing is */
+  geometry?: GeoJSON.Geometry;
+  /**
+   * Fetches the geometry on selection, for sources that cannot supply it up front.
+   *
+   * ★ Not a convenience — Mapbox forces it. `suggest()` returns names and addresses but NO
+   * coordinates; those come only from `retrieve()` on the suggestion the reader picked. Demanding
+   * geometry up front would mean retrieving every suggestion on every keystroke, which is slow and,
+   * since retrieve is a billed call, expensive.
+   */
+  resolve?(signal: AbortSignal): Promise<GeoJSON.Geometry>;
+}
+
+/** A place results come from. Registered by the consuming app; the design system ships one. */
+export interface MapSearchSource {
+  /** stable — it keys the group and half the state */
+  id: string;
+  /** the group heading */
+  label: string;
+  /** default icon for rows in this group */
+  icon?: string;
+  /** rows shown before the rest are dropped */
+  limit?: number;
+  search(query: string, signal: AbortSignal): Promise<MapSearchResult[]>;
+  /**
+   * Whether this query COULD produce an exact hit, judged from its shape alone — a regex on an ID
+   * format, not a lookup. Cheap and synchronous, because it decides whether the best-match row exists
+   * before anything is dispatched, which is what keeps the top of the list from moving later.
+   */
+  mayMatchExactly?(query: string): boolean;
+}
+
+export type GroupStatus = 'pending' | 'ready' | 'failed';
+
+export interface MapSearchGroup {
+  sourceId: string;
+  label: string;
+  icon?: string;
+  limit: number;
+  status: GroupStatus;
+  results: MapSearchResult[];
+}
+
+export interface MapSearchState {
+  /** the query generation this state belongs to; anything older is discarded on arrival */
+  seq: number;
+  query: string;
+  /** false with a single source, where a heading would label nothing */
+  headings: boolean;
+  bestReserved: boolean;
+  groups: MapSearchGroup[];
+}
+
+/** The best-match group's id. Not a source — a promoted row that sits above every group. */
+export const BEST = '__best__';
+
+export const SKELETON_ROWS = 2;
+export const DEFAULT_LIMIT = 5;
+
+/** What a row is, so the component can render each kind and know what a select means. */
+export type PaletteItemKind = 'result' | 'skeleton' | 'failed' | 'nomatch';
+
+export interface PaletteItem {
+  /** keys reka's item identity, so a highlight survives the list changing underneath it */
+  id: string;
+  kind: PaletteItemKind;
+  sourceId: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  /** anything that is not a real answer is unpickable and skipped by the keyboard */
+  disabled?: boolean;
+  result?: MapSearchResult;
+}
+
+export interface PaletteGroup {
+  id: string;
+  label?: string;
+  /** always true: results come from the sources, never from the palette's own fuzzy search */
+  ignoreFilter: true;
+  items: PaletteItem[];
+}
+
+export function beginQuery(
+  sources: readonly MapSearchSource[],
+  query: string,
+  seq: number,
+): MapSearchState {
+  return {
+    seq,
+    query,
+    headings: sources.length > 1,
+    bestReserved: sources.some((s) => s.mayMatchExactly?.(query) ?? false),
+    groups: sources.map((s) => ({
+      sourceId: s.id,
+      label: s.label,
+      icon: s.icon,
+      limit: s.limit ?? DEFAULT_LIMIT,
+      status: 'pending' as GroupStatus,
+      results: [],
+    })),
+  };
+}
+
+/**
+ * The promoted result: the first flagged one in SOURCE order, not arrival order. Recomputed from the
+ * groups on every read rather than latched, so a slow high-priority source still wins the row once it
+ * lands.
+ *
+ * A flagged result with no reserved row stays in its group. The row's existence is settled by
+ * `mayMatchExactly` before dispatch and never revised, which is what stops the top of the list moving.
+ */
+export function bestMatch(state: MapSearchState): MapSearchResult | null {
+  if (!state.bestReserved) return null;
+  for (const g of state.groups) {
+    const hit = g.results.find((r) => r.exact);
+    if (hit) return hit;
+  }
+  return null;
+}
+
+/** Every source has answered, one way or another. */
+export function settled(state: MapSearchState): boolean {
+  return state.groups.every((g) => g.status !== 'pending');
+}
+
+const skeletons = (sourceId: string): PaletteItem[] =>
+  Array.from({ length: SKELETON_ROWS }, (_, i) => ({
+    id: `${sourceId}-skeleton-${i}`,
+    kind: 'skeleton' as const,
+    sourceId,
+    label: '',
+    disabled: true,
+  }));
+
+/**
+ * The state, as groups <UCommandPalette> can render.
+ *
+ * ★ The rule for an absent group is split, and deliberately so. A group still THINKING holds its place
+ * with skeletons: it is about to have content, and letting its results appear from nothing would shove
+ * whatever a reader is already looking at down the list. A group that has ANSWERED WITH NOTHING is
+ * dropped entirely — an earlier cut kept its heading over a "No matches" line, and on a place query
+ * that left two dead blocks above the only real answer. So movement is confined to the one honest
+ * case: a pending group resolving to nothing.
+ *
+ * A FAILED group is not an absent one and keeps its row. "Could not load" is information; silence
+ * would let a broken source read as a source with nothing to say.
+ */
+export function paletteGroups(state: MapSearchState): PaletteGroup[] {
+  const out: PaletteGroup[] = [];
+  const best = bestMatch(state);
+
+  if (state.bestReserved) {
+    // ★ The reserved row keeps its place even when the lookup comes back empty. Someone who typed a
+    // full ID that does not exist needs telling that, and the row holding its ground is what keeps the
+    // top of the list from moving.
+    const item: PaletteItem = best
+      ? {
+          id: `${BEST}-${best.id}`,
+          kind: 'result',
+          sourceId: BEST,
+          label: best.title,
+          description: best.subtitle,
+          icon: best.icon ?? 'i-lucide-target',
+          result: best,
+        }
+      : settled(state)
+        ? {
+            id: `${BEST}-none`,
+            kind: 'nomatch',
+            sourceId: BEST,
+            label: `No match for “${state.query}”`,
+            icon: 'i-lucide-target',
+            disabled: true,
+          }
+        : { ...skeletons(BEST)[0], id: `${BEST}-skeleton` };
+
+    out.push({ id: BEST, ignoreFilter: true, items: [item] });
+  }
+
+  for (const g of state.groups) {
+    const label = state.headings ? g.label : undefined;
+
+    if (g.status === 'pending') {
+      out.push({ id: g.sourceId, label, ignoreFilter: true, items: skeletons(g.sourceId) });
+      continue;
+    }
+
+    if (g.status === 'failed') {
+      out.push({
+        id: g.sourceId,
+        label,
+        ignoreFilter: true,
+        items: [
+          {
+            id: `${g.sourceId}-failed`,
+            kind: 'failed',
+            sourceId: g.sourceId,
+            label: 'Could not load',
+            icon: 'i-lucide-triangle-alert',
+            disabled: true,
+          },
+        ],
+      });
+      continue;
+    }
+
+    const shown = g.results.filter((r) => r !== best).slice(0, g.limit);
+    if (!shown.length) continue;
+
+    out.push({
+      id: g.sourceId,
+      label,
+      ignoreFilter: true,
+      items: shown.map((r) => ({
+        id: `${g.sourceId}-${r.id}`,
+        kind: 'result' as const,
+        sourceId: g.sourceId,
+        label: r.title,
+        description: r.subtitle,
+        icon: r.icon ?? g.icon,
+        result: r,
+      })),
+    });
+  }
+
+  return out;
+}
+
+function withGroup(
+  state: MapSearchState,
+  seq: number,
+  sourceId: string,
+  patch: Partial<MapSearchGroup>,
+): MapSearchState {
+  // ★ The stale guard is here rather than at the call site so every path gets it. An answer to a
+  // query the reader has already typed past is not late data, it is wrong data.
+  if (seq !== state.seq) return state;
+  const i = state.groups.findIndex((g) => g.sourceId === sourceId);
+  if (i < 0) return state;
+  const groups = state.groups.slice();
+  groups[i] = { ...groups[i], ...patch };
+  return { ...state, groups };
+}
+
+export function receiveResults(
+  state: MapSearchState,
+  seq: number,
+  sourceId: string,
+  results: MapSearchResult[],
+): MapSearchState {
+  return withGroup(state, seq, sourceId, { status: 'ready', results });
+}
+
+export function receiveError(state: MapSearchState, seq: number, sourceId: string): MapSearchState {
+  return withGroup(state, seq, sourceId, { status: 'failed', results: [] });
+}

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

@@ -0,0 +1,117 @@
+// The camera as a string, and the query string it lives in.
+//
+// A console's link is the whole product: a dispatcher sees something, pastes it, and someone else
+// has to see the same thing. That means the camera belongs in the URL — and belongs there in a form
+// a person can read, an older build can still parse, and the back button survives.
+//
+// ★ THE STRING IS lat/lng. Every GL JS call in this codebase is lng-first, and this is the one place
+// that reverses it, because the order is Mapbox's own `hash: true` order — so a Forest link and a link
+// from any other Mapbox tool read the same way. A swap looks like nothing in review and puts London in
+// the Indian Ocean, which is why the codec's tests use values no swap could survive.
+
+export interface MapCamera {
+  /** GL order: [lng, lat] — reversed only when it becomes a string */
+  center: [number, number];
+  zoom: number;
+  bearing: number;
+  pitch: number;
+}
+
+/**
+ * Decimals kept. 5 on a coordinate is ~1.1 m — finer than the GPS fix that produced it, and half the
+ * characters of the raw double.
+ */
+export const MAP_URL_PRECISION = { zoom: 2, coordinate: 5 } as const;
+
+/** GL JS's own ceilings. A value past one of these is a broken link, not a camera. */
+const LIMITS = { zoom: [0, 24], lat: [-90, 90], lng: [-180, 180], pitch: [0, 85] } as const;
+
+/** Fixed decimals without the trailing zeros — `12.50` is two characters of nothing. */
+const trim = (value: number, decimals: number): string => String(Number(value.toFixed(decimals)));
+
+const within = (value: number, [min, max]: readonly [number, number]) =>
+  Number.isFinite(value) && value >= min && value <= max;
+
+/**
+ * `12.5/51.5074/-0.1278` — and `/45/60` on the end once the camera is turned or tilted.
+ *
+ * Bearing and pitch are dropped when they are zero, which is the overwhelming case, and they are
+ * positional: a turned-but-flat camera still writes `/45`, and a tilted-but-north one writes `/0/60`
+ * because the pitch cannot be read without the slot before it.
+ */
+export function encodeCamera(camera: MapCamera): string {
+  const [lng, lat] = camera.center;
+  const bearing = Math.round(camera.bearing ?? 0);
+  const pitch = Math.round(camera.pitch ?? 0);
+  const parts = [
+    trim(camera.zoom, MAP_URL_PRECISION.zoom),
+    trim(lat, MAP_URL_PRECISION.coordinate),
+    trim(lng, MAP_URL_PRECISION.coordinate),
+  ];
+  if (bearing || pitch) parts.push(String(((bearing % 360) + 360) % 360));
+  if (pitch) parts.push(String(pitch));
+  return parts.join('/');
+}
+
+/**
+ * The reverse. Null for anything that is not a camera — and null means IGNORE, not correct.
+ *
+ * A clamped link would quietly claim the sender meant a place they did not; the reader gets the
+ * surface's own default view instead, which is at least somewhere real. The one exception is bearing,
+ * which is cyclic: 370° and 10° are the same camera, so it is canonicalised rather than rejected.
+ */
+export function decodeCamera(text: string | null | undefined): MapCamera | null {
+  if (!text) return null;
+  const parts = text.split('/');
+  if (parts.length < 3 || parts.length > 5) return null;
+
+  const [zoom, lat, lng, bearing = '0', pitch = '0'] = parts.map((p) => p.trim());
+  // ★ Number('') is 0, so an empty field would decode as a valid north-up camera at zoom 0 rather
+  // than as the broken link it is. Every field is checked for content before it is read.
+  if ([zoom, lat, lng, bearing, pitch].some((p) => p === '')) return null;
+
+  const values = { zoom: Number(zoom), lat: Number(lat), lng: Number(lng), bearing: Number(bearing), pitch: Number(pitch) };
+  if (!within(values.zoom, LIMITS.zoom)) return null;
+  if (!within(values.lat, LIMITS.lat)) return null;
+  if (!within(values.lng, LIMITS.lng)) return null;
+  if (!within(values.pitch, LIMITS.pitch)) return null;
+  if (!Number.isFinite(values.bearing)) return null;
+
+  return {
+    center: [values.lng, values.lat],
+    zoom: values.zoom,
+    bearing: ((values.bearing % 360) + 360) % 360,
+    pitch: values.pitch,
+  };
+}
+
+/** Whether two cameras would write the same string — the test for "is this write worth making". */
+export const sameCamera = (a: MapCamera | null, b: MapCamera | null): boolean =>
+  a === b || (!!a && !!b && encodeCamera(a) === encodeCamera(b));
+
+/** Every parameter in a query string, as plain pairs. Accepts it with or without the leading `?`. */
+export function readQuery(search: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [key, value] of new URLSearchParams(search.startsWith('?') ? search.slice(1) : search)) {
+    out[key] = value;
+  }
+  return out;
+}
+
+/**
+ * Apply a patch to a query string and return the new one, `?` included and empty when nothing is left.
+ *
+ * ★ IT PATCHES. A map is one thing in a console's URL — `?tab=fleet&depot=7&map=…` — and a writer that
+ * rebuilt the string from the camera alone would drop the rest of the page's state every time somebody
+ * panned. `null` or `undefined` removes a key; everything else is set in place, so a parameter keeps
+ * its position rather than jumping to the end on every write.
+ */
+export function patchQuery(search: string, patch: Record<string, string | null | undefined>): string {
+  const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search);
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === null || value === undefined || value === '') params.delete(key);
+    else params.set(key, value);
+  }
+  const next = params.toString();
+  return next ? `?${next}` : '';
+}

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

@@ -0,0 +1,3 @@
+// Generated by scripts/mapMarker.ts — do not edit.
+// The uploaded asset, inlined so a component can paint it with no fetch. See paintMarkerSvg().
+export const MARKER_SVG = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\"\n     xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:m=\"https://www.mapbox.com\">\n  <m:metadata>\n    <m:parameters>\n      <m:parameter m:type=\"color\" m:name=\"body\" m:value=\"#FF00FF\" />\n      <m:parameter m:type=\"color\" m:name=\"edge\" m:value=\"#FF01FF\" />\n      <m:parameter m:type=\"color\" m:name=\"battery\" m:value=\"#FF02FF\" />\n      <m:parameter m:type=\"color\" m:name=\"batteryEdge\" m:value=\"#FF03FF\" />\n      <m:parameter m:type=\"color\" m:name=\"dot\" m:value=\"#FF04FF\" />\n      <m:parameter m:type=\"color\" m:name=\"dotEdge\" m:value=\"#FF05FF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeSquare\" m:value=\"#FF06FF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeSquareEdge\" m:value=\"#FF07FF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeTriangle\" m:value=\"#FF08FF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeTriangleEdge\" m:value=\"#FF09FF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeCircle\" m:value=\"#FF0AFF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeCircleEdge\" m:value=\"#FF0BFF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeStar\" m:value=\"#FF0CFF\" />\n      <m:parameter m:type=\"color\" m:name=\"badgeStarEdge\" m:value=\"#FF0DFF\" />\n      <m:parameter m:type=\"color\" m:name=\"inUseFrom\" m:value=\"#FF0EFF\" />\n      <m:parameter m:type=\"color\" m:name=\"inUseTo\" m:value=\"#FF0FFF\" />\n      <m:parameter m:type=\"color\" m:name=\"locked\" m:value=\"#FF10FF\" />\n      <m:parameter m:type=\"color\" m:name=\"lockedEdge\" m:value=\"#FF11FF\" />\n      <m:parameter m:type=\"color\" m:name=\"bike\" m:value=\"#FF12FF\" />\n      <m:parameter m:type=\"color\" m:name=\"pine\" m:value=\"#FF13FF\" />\n      <m:parameter m:type=\"color\" m:name=\"eye\" m:value=\"#FF14FF\" />\n      <m:parameter m:type=\"color\" m:name=\"relocate\" m:value=\"#FF15FF\" />\n      <m:parameter m:type=\"color\" m:name=\"wrench\" m:value=\"#FF16FF\" />\n      <m:parameter m:type=\"color\" m:name=\"warehouse\" m:value=\"#FF17FF\" />\n      <m:parameter m:type=\"color\" m:name=\"truck\" m:value=\"#FF18FF\" />\n      <m:parameter m:type=\"color\" m:name=\"bandage\" m:value=\"#FF19FF\" />\n      <m:parameter m:type=\"color\" m:name=\"question\" m:value=\"#FF1AFF\" />\n      <m:parameter m:type=\"color\" m:name=\"hand\" m:value=\"#FF1BFF\" />\n      <m:parameter m:type=\"color\" m:name=\"flag\" m:value=\"#FF1CFF\" />\n      <m:parameter m:type=\"color\" m:name=\"ready\" m:value=\"#FF1DFF\" />\n      <m:parameter m:type=\"color\" m:name=\"skull\" m:value=\"#FF1EFF\" />\n      <m:parameter m:type=\"color\" m:name=\"container\" m:value=\"#FF1FFF\" />\n      <m:parameter m:type=\"color\" m:name=\"staff\" m:value=\"#FF20FF\" />\n    </m:parameters>\n  </m:metadata>\n  <defs>\n    <radialGradient id=\"inUse\" cx=\"0.35\" cy=\"0.3\" r=\"0.85\">\n      <stop offset=\"0\" stop-color=\"#FF0EFF\" />\n      <stop offset=\"1\" stop-color=\"#FF0FFF\" />\n    </radialGradient>\n  </defs>\n  <circle cx=\"20\" cy=\"20\" r=\"19.2\" fill=\"#FF02FF\" stroke=\"#FF03FF\" stroke-width=\"1.6\" />\n  <circle cx=\"20\" cy=\"20\" r=\"15.2\" fill=\"#FF00FF\" stroke=\"#FF01FF\" stroke-width=\"1.6\" />\n  <circle cx=\"20\" cy=\"20\" r=\"14.4\" fill=\"url(#inUse)\" />\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF12FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18.5 19C20.433 19 22 17.433 22 15.5C22 13.567 20.433 12 18.5 12C16.567 12 15 13.567 15 15.5C15 17.433 16.567 19 18.5 19Z\" stroke-width=\"1.74\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M5.5 19C7.433 19 9 17.433 9 15.5C9 13.567 7.433 12 5.5 12C3.567 12 2 13.567 2 15.5C2 17.433 3.567 19 5.5 19Z\" stroke-width=\"1.74\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M6 15.5H11.3602C11.7502 15.5 12.1047 15.2732 12.2681 14.9191L15 9\" stroke-width=\"1.74\" stroke-linecap=\"round\" /><path d=\"M8 9H10\" stroke-width=\"1.74\" stroke-linecap=\"round\" /><path d=\"M9 9L12 15\" stroke-width=\"1.74\" stroke-linecap=\"round\" /><path d=\"M12 5H12.8686C13.2543 5 13.6056 5.22183 13.7715 5.57007L18.5 15.5\" stroke-width=\"1.74\" stroke-linecap=\"round\" /><path d=\"M15 6H18.6126C19.2951 6 19.7771 6.6687 19.5613 7.31623L19.2279 8.31623C19.0918 8.72457 18.7097 9 18.2792 9H16\" stroke-width=\"1.74\" stroke-linecap=\"round\" /><path d=\"M5.5 12H3\" stroke-width=\"1.74\" stroke-linecap=\"round\" /></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF13FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L17.2 12.4H15.4L17.2 16H6.8L8.6 12.4H6.8L12 2Z\" stroke-width=\"1.74\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M10.2 16V22H8.6\" stroke-width=\"1.74\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M13.8 16V22H15.4\" stroke-width=\"1.74\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF14FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF15FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\" d=\"m16 3l4 4l-4 4m4-4H4m4 14l-4-4l4-4m-4 4h16\"/></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF16FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\" d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z\"/></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF17FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11\"/><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8zM6 13h12M6 17h12\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF18FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2m10 0H9m10 0h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14\"/><circle cx=\"17\" cy=\"18\" r=\"2\"/><circle cx=\"7\" cy=\"18\" r=\"2\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF19FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M10 10.01h.01m-.01 4h.01m3.99-4h.01m-.01 4h.01M18 6v12M6 6v12\"/><rect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1AFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1BFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2m0 4V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2m0 4.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1CFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\" d=\"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528\"/></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1DFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M12 22V12m4 5l2 2l4-4\"/><path d=\"M21 11.127V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l1.32-.753\"/><path d=\"M3.29 7L12 12l8.71-5M7.5 4.27l8.997 5.148\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1EFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"m12.5 17l-.5-1l-.5 1z\"/><path d=\"M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25a8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF1FFF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z\"/><path d=\"M10 21.9V14L2.1 9.1M10 14l11.9-6.9M14 19.8v-8.1m4 5.8V9.4\"/></g></g>\n  <g transform=\"translate(10.06 10.06) scale(0.828)\" fill=\"none\" stroke=\"#FF20FF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.74\"><path d=\"M12 12h.01M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2m14 7a18.15 18.15 0 0 1-20 0\"/><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\"/></g></g>\n  <circle cx=\"32.16\" cy=\"7.84\" r=\"5.44\" fill=\"#FF04FF\" stroke=\"#FF05FF\" stroke-width=\"1.6\" />\n  <rect x=\"3.71\" y=\"28.03\" width=\"8.26\" height=\"8.26\" rx=\"1.4\" fill=\"#FF06FF\" stroke=\"#FF07FF\" stroke-width=\"1.6\" />\n  <path d=\"M 7.84,26.82 L 13.18,36 L 2.5,36 Z\" fill=\"#FF08FF\" stroke=\"#FF09FF\" stroke-width=\"1.6\" stroke-linejoin=\"round\" />\n  <circle cx=\"7.84\" cy=\"32.16\" r=\"4.64\" fill=\"#FF0AFF\" stroke=\"#FF0BFF\" stroke-width=\"1.6\" />\n  <path d=\"M 7.84,26.68 L 9.77,29.5 L 13.05,30.47 L 10.96,33.18 L 11.06,36.59 L 7.84,35.45 L 4.62,36.59 L 4.72,33.18 L 2.63,30.47 L 5.91,29.5 Z\" fill=\"#FF0CFF\" stroke=\"#FF0DFF\" stroke-width=\"1.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\" />\n  <circle cx=\"32.16\" cy=\"32.16\" r=\"5.44\" fill=\"#FF10FF\" stroke=\"#FF11FF\" stroke-width=\"1.6\" />\n  <rect x=\"29.92\" y=\"29.49\" width=\"1.95\" height=\"5.34\" rx=\"0.58\" fill=\"#FF11FF\" />\n  <rect x=\"32.45\" y=\"29.49\" width=\"1.95\" height=\"5.34\" rx=\"0.58\" fill=\"#FF11FF\" />\n</svg>\n";

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

@@ -0,0 +1,39 @@
+// The one place the two paddings compose.
+//
+// A map carries a TRANSFORM inset — `<FMap :padding>`, the strip a side panel or a bottom sheet covers —
+// and a fit asks for room around the box on top of it. Mapbox composes neither for us, so both call
+// sites (FMap's creation-time fit, useMapCamera.fit) sum here rather than each doing it their own way.
+
+export type Inset = { top: number; right: number; bottom: number; left: number };
+export type PartialInset = { top?: number; bottom?: number; left?: number; right?: number };
+
+/**
+ * Every side spelled out.
+ *
+ * ★ Mapbox MERGES a partial padding into whatever the transform already holds rather than replacing it,
+ * so `{ left: 400 }` handed straight to `setPadding` leaves the other three sides at whatever the last
+ * camera move wrote — a fit's leftovers, usually. `undefined` is also not 0 for arithmetic:
+ * `undefined + gap` is NaN, which fits nothing at any zoom.
+ */
+export function resolveInset(p?: PartialInset | null): Inset {
+  return { top: p?.top ?? 0, right: p?.right ?? 0, bottom: p?.bottom ?? 0, left: p?.left ?? 0 };
+}
+
+/**
+ * The inset plus a uniform gap on every side — what a fit has to be handed, because `fitBounds`'
+ * `padding` REPLACES the transform's rather than adding to it (measured on GL JS 3.24.1:
+ * `Camera._extendPadding` falls back to `transform.padding` only when the option is absent).
+ *
+ * A uniform gap does not move where the camera renders its centre — `centerPoint` tracks the DIFFERENCE
+ * between opposite sides, which adding the same number to both leaves untouched. So the sum frames
+ * tighter without shifting the view, and the transform can be set back to the inset alone afterwards.
+ */
+export function withGap(p: PartialInset | null | undefined, gap: number): Inset {
+  const inset = resolveInset(p);
+  return {
+    top: inset.top + gap,
+    right: inset.right + gap,
+    bottom: inset.bottom + gap,
+    left: inset.left + gap,
+  };
+}