@humanforest/nuxt-layer 0.1.0

package/packages/ui/src/map/FMapScale.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// The scale bar — a round stick to hold against the map.
+//
+//   <FMapScale :map="map" />
+//
+// ★ REBUILT, NOT WRAPPED, and the split follows the one FMapZoom already draws. Mapbox's ScaleControl
+// mounts into its own corner container inside the map element, which is not one of the HUD's areas: it
+// cannot sit in a rail, cannot take the canvas-chrome surface with the rest of the chrome, and cannot
+// step aside for an open <FSidePanel>. Geolocate is wrapped because its BEHAVIOUR is the point — a
+// permission flow, a position subscription, an error taxonomy. A scale bar's behaviour is one
+// subtraction and a rounding rule, so nothing is lost by owning it and the placement is gained.
+//
+// ★ IT MEASURES THE MAP, NOT THE ZOOM. Metres-per-pixel varies with latitude — the same zoom is a
+// different distance in London than at the equator — so the reading comes from unprojecting two points
+// on the canvas and asking GL JS how far apart they are. Deriving it from `getZoom()` alone would be
+// wrong everywhere except the equator, and subtly wrong rather than obviously so.
+//
+// ★ IT SAMPLES ACROSS THE MIDDLE. A tilted map has no single scale — the horizon is further away per
+// pixel than the foreground — so a scale bar over a pitched view is an approximation whatever it does.
+// The vertical centre is the least-wrong single answer and is what every implementation uses; the
+// alternative is hiding the bar when pitched, which removes the reading exactly when a reader is most
+// likely to misjudge distance.
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import type mapboxgl from 'mapbox-gl';
+import { scaleReading, type ScaleUnit } from './scaleBar';
+
+const props = withDefaults(
+  defineProps<{
+    /** The live map, from <FMap @ready>. Null until it arrives, which renders nothing. */
+    map?: mapboxgl.Map | null;
+    /** The widest the bar may draw, in px. It fills whatever fraction the rounded distance needs. */
+    maxWidth?: number;
+    unit?: ScaleUnit;
+  }>(),
+  { map: null, maxWidth: 96, unit: 'metric' },
+);
+
+const spanMetres = ref(0);
+
+function measure() {
+  const m = props.map;
+  if (!m) return;
+  const canvas = m.getCanvas();
+  const height = canvas.clientHeight;
+  const width = canvas.clientWidth;
+  // A canvas mid-layout reports 0 and every number downstream becomes NaN. scaleReading returns null
+  // for that rather than painting a full-width bar with a meaningless label.
+  if (!width || !height) {
+    spanMetres.value = 0;
+    return;
+  }
+  const y = height / 2;
+  const left = m.unproject([0, y]);
+  const right = m.unproject([Math.min(props.maxWidth, width), y]);
+  spanMetres.value = left.distanceTo(right);
+}
+
+const reading = computed(() => scaleReading(spanMetres.value, props.unit));
+
+watch(
+  () => props.map,
+  (m, _old, onCleanup) => {
+    if (!m) return;
+    measure();
+    // `move` covers pan, zoom, rotate and pitch; `resize` covers a panel opening beside the map.
+    m.on('move', measure);
+    m.on('resize', measure);
+    onCleanup(() => {
+      m.off('move', measure);
+      m.off('resize', measure);
+    });
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  props.map?.off('move', measure);
+  props.map?.off('resize', measure);
+});
+</script>
+
+<template>
+  <!-- A readout, not a control: no hover, no press, no focus ring, and nothing to tab to. The chrome
+       surface is shared with the buttons so it reads as the same material, and the edge is the button
+       recipe's own --btn-line rather than --ui-border, which is a visibly lighter grey.
+       ★ But the RADIUS is a step tighter than theirs (8px against the controls' 12px), and that is the
+       one place it should not match. Radius carries the same meaning here as everywhere in Forest:
+       control is md, item is sm. A tile that is not pressable saying so quietly, through its corners,
+       is cheaper than any affordance a reader has to test by hovering. -->
+  <div
+    v-if="reading"
+    class="forest-canvas-chrome pointer-events-auto flex flex-col gap-0.5 rounded-sm px-2 py-1 ring ring-[var(--neutral-300)] ring-inset dark:ring-[var(--neutral-700)]"
+    :style="{ width: `${maxWidth}px` }"
+  >
+    <span class="text-[0.6875rem] leading-none font-bold tracking-wide text-[var(--neutral-900)] tabular-nums dark:text-[var(--neutral-100)]">
+      {{ reading.label }}
+    </span>
+    <!-- The bar shortens to the rounded number rather than the number stretching to the bar, so the
+         track is drawn full width and the fill is the honest part. -->
+    <span class="relative block h-1 w-full">
+      <span
+        class="absolute inset-y-0 start-0 rounded-[1px] bg-[var(--neutral-900)] transition-[width] duration-(--motion-fast) ease-(--motion-ease-out) motion-reduce:transition-none dark:bg-[var(--neutral-100)]"
+        :style="{ width: `${(reading.ratio * 100).toFixed(2)}%` }"
+      />
+    </span>
+  </div>
+</template>

package/packages/ui/src/map/FMapSearch.vue

@@ -0,0 +1,362 @@
+<script setup lang="ts">
+// Search over the map: one control that becomes a field, and a panel of grouped results under it.
+//
+//   <FMapSearch :map="map" :sources="[vehicles, bays, places]" @select="open" />
+//
+// ★ COMPOSED FROM REKA'S LISTBOX, NOT FROM <UCommandPalette>. The palette bundles the input with the
+// list, and that bundle is the whole reason it was wrong here: its `input` slot ships its own heights
+// ([&>input]:h-10 / h-11) which fight --forest-canvas-control, so the field could not be the same size
+// as the zoom pair beside it, and a box whose sizing belongs to another component cannot be morphed
+// out of a button. <UListbox> is no help either — it builds its OWN ListboxRoot, so an external input
+// cannot reach it.
+//
+// ★ AND THE BUNDLE BOUGHT NOTHING. The reason to accept it was the keyboard: `ListboxFilter` wires
+// Down/Up/Home/End, Enter, highlight-on-type, aria-activedescendant and the list's tab-order removal,
+// all through injectListboxRootContext(). That inject resolves through the mounted COMPONENT tree,
+// while a popover teleports DOM only — so the filter still drives a list that has been portalled to
+// <body>. Measured: typing set aria-activedescendant and highlighted the first row, Down walked the
+// rows, Enter selected, with the content mounted outside the root's DOM subtree entirely.
+//
+// ★ THE CONTROL AND THE FIELD ARE ONE ELEMENT. Not a button that is replaced by an input — the input
+// IS the button, clamped to --forest-canvas-control while collapsed and widened on focus. Swapping two
+// components could not animate (nothing to tween between) and could not line up (two different
+// heights). One box that grows solves both, and removes a bug in passing: replacing the focused
+// control fired a focusout with a null relatedTarget, which read as focus leaving and collapsed it
+// again inside a frame.
+//
+// ★ IT DOES NOT FILTER THE MAP. Typing a vehicle ID does not hide the other vehicles — filtering is
+// FFilterTrigger + FFilterClauses. Search navigates: it finds one thing and takes you to it.
+import { computed, onBeforeUnmount, ref, shallowRef, toRef, watch } from 'vue';
+import type mapboxgl from 'mapbox-gl';
+import {
+  ListboxContent,
+  ListboxFilter,
+  ListboxGroup,
+  ListboxGroupLabel,
+  ListboxItem,
+  ListboxRoot,
+} from 'reka-ui';
+import { useMapCamera } from './useMap';
+import { mapSearchTheme } from './mapSearch.theme';
+import {
+  beginQuery,
+  paletteGroups,
+  receiveError,
+  receiveResults,
+  type MapSearchResult,
+  type MapSearchSource,
+  type MapSearchState,
+  type PaletteItem,
+} from './mapSearch';
+
+const props = withDefaults(
+  defineProps<{
+    /** The live map, from <FMap @ready>. Null until it arrives, which disables the field. */
+    map?: mapboxgl.Map | null;
+    /** Where results come from. ORDER IS THE GROUP ORDER and must not change at runtime. */
+    sources: MapSearchSource[];
+    placeholder?: string;
+    /** Width the field opens to. */
+    width?: string;
+    /** Zoom a point result flies to. Close enough to read the street, wide enough to keep a block. */
+    pointZoom?: number;
+    minQueryLength?: number;
+    debounceMs?: number;
+  }>(),
+  {
+    map: null,
+    placeholder: 'Search',
+    width: '18rem',
+    pointZoom: 16,
+    minQueryLength: 2,
+    debounceMs: 200,
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * A pick, with the geometry it resolved to.
+   *
+   * ★ The geometry is a separate argument because the RESULT often does not carry one: a Mapbox
+   * suggestion has no coordinates until `retrieve()` runs, which happens in here. A surface that wants
+   * to drop a marker on the chosen place would otherwise have to repeat the resolve it just paid for.
+   */
+  select: [result: MapSearchResult, source: MapSearchSource, geometry?: GeoJSON.Geometry];
+}>();
+
+const camera = useMapCamera(toRef(props, 'map'));
+
+// Presentation lives in the recipe beside this file. It is a recipe rather than classes on the markup
+// because reka's primitives carry no theme of their own — see that file's header for why, and for the
+// coarse-pointer ladder it owns.
+const ui = mapSearchTheme();
+
+const term = ref('');
+const state = shallowRef<MapSearchState | null>(null);
+const resolving = ref<string | null>(null);
+const expanded = ref(false);
+const picked = shallowRef<PaletteItem | null>(null);
+const root = ref<HTMLElement | null>(null);
+
+let seq = 0;
+let timer: ReturnType<typeof setTimeout> | undefined;
+let inflight: AbortController | undefined;
+
+const groups = computed(() => (state.value ? paletteGroups(state.value) : []));
+const panelOpen = computed(() => expanded.value && groups.value.length > 0);
+
+/**
+ * The field's box while open: `width`, capped so it never runs past a narrow viewport.
+ *
+ * ★ WIDTH + MAX-WIDTH, not `w-full`, not a Tailwind arbitrary value, and not `min()`. Each of those
+ * was tried against a real phone viewport and each failed differently:
+ *   · `w-full` is circular — the HUD rail is CONTENT-SIZED, so it shrink-wraps to the collapsed 44px
+ *     button and a field asking for 100% of it resolves to 44px and never grows.
+ *   · `w-[min(var(--x),calc(100vw-4rem))]` produced no rule at all; the element carried the class and
+ *     collapsed to its icon.
+ *   · `width: min(...)` as an inline style computed to 44px — the declaration was dropped.
+ * Two plain declarations survive all of it, and say the same thing: this wide, never wider than the
+ * screen. The cap is what makes a phone right; a bare 18rem lines up with the rail at exactly one
+ * device width and floats short of the edge on every other.
+ */
+const openBox = computed(() => ({
+  width: props.width,
+  maxWidth: 'calc(100vw - 4rem)',
+}));
+
+function cancel() {
+  clearTimeout(timer);
+  inflight?.abort();
+  inflight = undefined;
+}
+
+function dispatch(q: string) {
+  cancel();
+  if (q.length < props.minQueryLength) {
+    state.value = null;
+    return;
+  }
+
+  const mine = ++seq;
+  const controller = new AbortController();
+  inflight = controller;
+  state.value = beginQuery(props.sources, q, mine);
+
+  for (const source of props.sources) {
+    source
+      .search(q, controller.signal)
+      .then((results) => {
+        // The reducer drops anything belonging to an older query; this guard only avoids the work.
+        if (mine !== seq || !state.value) return;
+        state.value = receiveResults(state.value, mine, source.id, results);
+      })
+      .catch(() => {
+        if (mine !== seq || !state.value) return;
+        state.value = receiveError(state.value, mine, source.id);
+      });
+  }
+}
+
+watch(term, (q) => {
+  clearTimeout(timer);
+  timer = setTimeout(() => dispatch(q), props.debounceMs);
+});
+
+function collapse() {
+  cancel();
+  expanded.value = false;
+  term.value = '';
+  state.value = null;
+  // ★ Give up focus, or the control cannot be opened again. Picking a result keeps focus on the input
+  // by design (the rows carry @mousedown.prevent so the panel is not torn down under the pointer), so
+  // after a pick the collapsed control is still the focused element — and clicking an already-focused
+  // element fires no focusin, so the thing that opens it never runs. It looks dead on the second use.
+  const active = document.activeElement as HTMLElement | null;
+  if (active && root.value?.contains(active)) active.blur();
+}
+
+// Clicking away collapses, whether or not anything was typed.
+//
+// ★ Asked a frame later, against where focus ENDED UP, because the event itself lies twice. A focusout
+// with a null relatedTarget also fires when the focused element is merely removed, and the panel's rows
+// live in a TELEPORTED subtree, so `root.contains(relatedTarget)` is false for a click on a result even
+// though it is plainly inside the control. The rows also carry `@mousedown.prevent`, which keeps focus
+// on the input so a pick never trips this at all.
+function onFocusOut() {
+  requestAnimationFrame(() => {
+    if (!expanded.value) return;
+    if (root.value?.contains(document.activeElement)) return;
+    collapse();
+  });
+}
+
+function sourceOf(item: PaletteItem): MapSearchSource {
+  // 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 ??
+    item.sourceId;
+  return props.sources.find((s) => s.id === id) ?? props.sources[0];
+}
+
+// ListboxRoot types its model as reka's AcceptableValue, so the item comes back widened and is
+// narrowed here rather than at the binding.
+async function choose(value: unknown) {
+  picked.value = null;
+  const item = value as PaletteItem | null;
+  if (!item?.result) return;
+  const result = item.result;
+  const source = sourceOf(item);
+  let geometry = result.geometry;
+
+  if (!geometry && result.resolve) {
+    resolving.value = item.id;
+    try {
+      geometry = await result.resolve(new AbortController().signal);
+    } catch {
+      // The panel stays open on a failed resolve: closing on a camera that never moved reads as the
+      // pick having silently done nothing.
+      resolving.value = null;
+      return;
+    }
+    resolving.value = null;
+  }
+
+  if (geometry) moveTo(geometry);
+  collapse();
+  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
+// centre of the map element is not the centre of what the reader can see. It already works: <FMap>'s
+// `padding` prop calls setPadding on the transform, and every camera move centres inside the remaining
+// box. Which is why nothing here passes its own padding: that would override it.
+function moveTo(geometry: GeoJSON.Geometry) {
+  if (geometry.type === 'Point') {
+    camera.focus(geometry.coordinates as [number, number], { zoom: props.pointZoom });
+    return;
+  }
+  camera.fit(extent(geometry));
+}
+
+function extent(geometry: GeoJSON.Geometry): [[number, number], [number, number]] {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  const walk = (c: unknown): void => {
+    if (Array.isArray(c) && typeof c[0] === 'number' && typeof c[1] === 'number') {
+      minX = Math.min(minX, c[0]);
+      maxX = Math.max(maxX, c[0]);
+      minY = Math.min(minY, c[1]);
+      maxY = Math.max(maxY, c[1]);
+      return;
+    }
+    if (Array.isArray(c)) for (const part of c) walk(part);
+  };
+  walk('coordinates' in geometry ? geometry.coordinates : []);
+  return [
+    [minX, minY],
+    [maxX, maxY],
+  ];
+}
+
+onBeforeUnmount(cancel);
+</script>
+
+<template>
+  <!-- ★ A plain element carries the focus wiring, not <ListboxRoot>. A template ref on a component
+       resolves to its INSTANCE, so `root.contains(...)` is undefined and the collapse check dies
+       silently inside its own rAF — the control simply never closed. -->
+  <div
+    ref="root"
+    class="pointer-events-auto"
+    @keydown.escape="collapse"
+    @focusin="expanded = true"
+    @click="expanded = true"
+    @focusout="onFocusOut"
+  >
+  <!-- ★ `highlight-on-hover` so the pointer drives the SAME state the keyboard does. Without it reka
+       marks a row highlighted only from the keyboard, and hovering does nothing at all — two input
+       methods reading as two different components. It also means the hover treatment cannot drift
+       from the keyboard one, since there is only one of them. -->
+  <ListboxRoot v-model="picked" by="id" highlight-on-hover @update:model-value="choose">
+    <UPopover
+      :open="panelOpen"
+      :dismissible="false"
+      :content="{
+        side: 'bottom',
+        align: 'start',
+        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() }"
+    >
+      <!-- ★ ONE box for both states. Collapsed it is a square the size of every other canvas control;
+           focused it widens to `width`, and the transition is on width alone so the icon never moves
+           and the growth reads as the control opening rather than as two things swapping. The width
+           itself is an inline style rather than a class — see `openBox` for why none of the CSS
+           spellings survive. The panel needs no width of its own; it follows the anchor. -->
+      <div
+        :class="ui.field()"
+        :style="expanded ? openBox : { width: 'var(--forest-canvas-control)' }"
+      >
+        <UIcon name="i-lucide-search" :class="ui.icon()" />
+        <ListboxFilter v-model="term" as-child>
+          <input
+            type="text"
+            :aria-label="placeholder"
+            :placeholder="expanded ? placeholder : ''"
+            :disabled="!map"
+            autocomplete="off"
+            spellcheck="false"
+            :class="ui.input()"
+          />
+        </ListboxFilter>
+      </div>
+
+      <template #content>
+        <!-- ★ THREE ROWS ON A PHONE, then it scrolls. Uncapped, the panel took 69% of the map and left
+             a 21px strip beside it — the cost of covering the map with none of the benefit of a full
+             takeover. Keeping roughly 300px of map live is the point: a reader scrolling results wants
+             to see WHERE they are while scrolling. Nothing is dropped; the rest is a scroll away. -->
+        <ListboxContent :class="ui.viewport()">
+          <ListboxGroup v-for="group in groups" :key="group.id">
+            <ListboxGroupLabel v-if="group.label" :class="ui.group()">
+              {{ group.label }}
+            </ListboxGroupLabel>
+
+            <ListboxItem
+              v-for="item in group.items"
+              :key="item.id"
+              :value="item"
+              :disabled="item.disabled"
+              :class="ui.item()"
+              @mousedown.prevent
+            >
+              <UIcon v-if="item.icon" :name="item.icon" :class="ui.itemIcon()" />
+              <USkeleton v-if="item.kind === 'skeleton'" :class="ui.skeleton()" />
+              <!-- ★ Stacked, not side by side. Two labels competing in one flex row let the LONGER one
+                   keep more width, which collapsed a place name to "SE1 …" while its address kept
+                   three times the space. The name is what the reader matched against. -->
+              <span v-else :class="ui.itemBody()">
+                <span :class="ui.itemLabel({ muted: item.kind !== 'result' })">{{ item.label }}</span>
+                <span v-if="item.description" :class="ui.itemDescription()">
+                  {{ item.description }}
+                </span>
+              </span>
+              <UIcon
+                v-if="resolving === item.id"
+                name="i-lucide-loader-circle"
+                :class="ui.spinner()"
+              />
+            </ListboxItem>
+          </ListboxGroup>
+        </ListboxContent>
+      </template>
+    </UPopover>
+  </ListboxRoot>
+  </div>
+</template>

package/packages/ui/src/map/FMapTilt.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+// The 2D ⇄ 3D toggle — pitch as a MODE you enter on purpose.
+//
+//   <FMapTilt :map="map" />
+//
+// ★ This and <FMapCompass> are not the same control, and shipping only one leaves a hole. The compass is
+// RECOVERY: it appears once the view is off-axis and its whole job is the way back. This is ENTRY: it is
+// always there, and it says the map can be tilted at all — which a pointer user has no way to discover
+// otherwise, since the gesture is a modifier-drag nobody guesses.
+//
+// ★ The pressed state is read from the MAP, not from a click count. Pitch changes by gesture, by a
+// camera move, and by the compass's own reset — a toggle holding its own boolean would sit lit over a
+// map the compass had just flattened.
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import type mapboxgl from 'mapbox-gl';
+import FCanvasControl from '../canvas/FCanvasControl.vue';
+
+const props = withDefaults(
+  defineProps<{
+    map?: mapboxgl.Map | null;
+    /**
+     * The pitch this enters, in degrees. 60 is the shallowest angle at which extruded buildings read as
+     * volumes rather than as smeared footprints, and well inside Mapbox's 85 ceiling — past ~70 the
+     * horizon eats the frame and a fleet stops being scannable.
+     */
+    pitch?: number;
+  }>(),
+  { map: null, pitch: 60 },
+);
+
+// Anything above a degree is a deliberate tilt; floating-point pitch rarely lands on exactly 0.
+const FLAT_EPSILON = 1;
+
+const current = ref(0);
+const maxPitch = ref(60);
+
+const tilted = computed(() => current.value >= FLAT_EPSILON);
+// A surface can forbid tilt outright (maxPitch: 0). Then this is a button that cannot do its one thing.
+const allowed = computed(() => maxPitch.value >= FLAT_EPSILON);
+
+const sync = () => {
+  const m = props.map;
+  if (!m) return;
+  current.value = m.getPitch();
+  maxPitch.value = m.getMaxPitch();
+};
+
+watch(
+  () => props.map,
+  (m, _old, onCleanup) => {
+    if (!m) return;
+    sync();
+    m.on('pitch', sync);
+    onCleanup(() => m.off('pitch', sync));
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => props.map?.off('pitch', sync));
+
+// Clamped to whatever the surface allows, so a map with maxPitch 45 tilts to 45 rather than being asked
+// for an angle it will silently refuse.
+const toggle = () => {
+  const m = props.map;
+  if (!m) return;
+  m.easeTo({ pitch: tilted.value ? 0 : Math.min(props.pitch, m.getMaxPitch()) });
+};
+
+// ★ THE CONTROL WEARS THE MODE IT IS IN, NOT THE ONE THE PRESS ENTERS. A cube says neither, which is
+// why this is lettered at all — and `pressed` means "currently held" in every Forest toggle, so a lit
+// control labelled with the state it is NOT in would invert that rule in the one place a reader has no
+// way to check it. The action stays in the accessible name, where a hover title and a screen reader
+// both find it.
+const mode = computed(() => (tilted.value ? '3D' : '2D'));
+
+const label = computed(() => (tilted.value ? 'Flatten the map' : 'Tilt the map'));
+</script>
+
+<template>
+  <FCanvasControl
+    :text="mode"
+    :label="label"
+    :disabled="!map || !allowed"
+    :pressed="tilted"
+    @click="toggle()"
+  />
+</template>

package/packages/ui/src/map/FMapTools.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// The region-select tool switch — one control that opens into the tools.
+//
+//   <FMapTools v-model:tool="tool" />
+//
+// ★ THE OPENING BEHAVIOUR IS NOT HERE. It is <FCanvasFlyout>, in canvas/, because nothing about a
+// control that unfolds into a cluster is about maps: a rail is narrow whatever it holds. What is left
+// here is the only map-shaped part — which tools exist and what they are called.
+//
+// ★ THE TRIGGER WEARS THE ACTIVE TOOL. The question a reader asks passing a map is "what happens if I
+// drag", and a fixed icon would make them open the group to find out. Lit unless the tool is `off`, so
+// "the map is in its normal state" is legible without reading an icon at all.
+import { computed } from 'vue';
+import FCanvasFlyout from '../canvas/FCanvasFlyout.vue';
+import type { RegionTool } from './regionSelect';
+
+const tool = defineModel<RegionTool>('tool', { default: 'off' });
+
+const props = withDefaults(
+  defineProps<{
+    /** The axis the cluster opens along — horizontal for a vertical rail, and the reverse. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Which end the trigger is pinned to, so the cluster opens inward. */
+    side?: 'start' | 'end';
+    /** Drop a tool a surface has no use for. Keep `off` — it is how a reader puts one down. */
+    tools?: RegionTool[];
+  }>(),
+  { orientation: 'horizontal', side: 'end', tools: () => ['off', 'lasso', 'box', 'circle'] },
+);
+
+const ICON: Record<RegionTool, string> = {
+  off: 'i-lucide-hand',
+  lasso: 'i-lucide-lasso',
+  box: 'i-lucide-square-dashed',
+  circle: 'i-lucide-circle-dashed',
+};
+
+const LABEL: Record<RegionTool, string> = {
+  off: 'Pan the map',
+  lasso: 'Lasso select',
+  box: 'Box select',
+  circle: 'Radius select',
+};
+
+const items = computed(() =>
+  props.tools.map((t) => ({ value: t, icon: ICON[t], label: LABEL[t], pressed: tool.value === t })),
+);
+</script>
+
+<template>
+  <FCanvasFlyout
+    :icon="ICON[tool]"
+    :label="LABEL[tool]"
+    :pressed="tool !== 'off'"
+    :items="items"
+    :orientation="orientation"
+    :side="side"
+    close-label="Close the tools"
+    @select="tool = $event as RegionTool"
+  />
+</template>