@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-SA2RRBGT.js

@@ -0,0 +1,1077 @@
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, PanResponder, Platform, BackHandler, Pressable, View, Text, ScrollView, Easing, ActivityIndicator } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SPEC = {
+  /** Attribution inset from the trailing edge. */
+  attributionEnd: 8,
+  /** Attribution inset from the bottom when no card or sheet covers the map. */
+  attributionBottom: 8,
+  /** Gap between the attribution and the card or sheet it clears. */
+  attributionGap: 8,
+  /** Attribution size. */
+  attributionSize: 11,
+  /** Gap between the card's thumbnail, copy and action. */
+  cardGap: 12,
+  /** Pin edge, idle and active. */
+  pinIdle: 30,
+  pinActive: 36,
+  /** Thumbnail edge. */
+  thumb: 36,
+  /** Place-name size. */
+  nameSize: 14,
+  /** Place-meta size. */
+  metaSize: 13,
+  /** Pin tail half-diagonal. */
+  tail: 4,
+  /** Height of a one-line place card before it has been measured. */
+  cardEstimate: 70,
+  /** User dot edge. */
+  userDot: 16,
+  /** Room the banners and pill leave for the control stack: 44 + 12 inset + 8. */
+  controlsEnd: 64,
+  /** Result row height. */
+  resultRow: 56,
+  /** Clearance below the search + filter row. */
+  topRowClear: 112,
+  controlsClear: 112,
+  /** Base-layer grid pitch — vertical then horizontal, from `buildMapScreen`. */
+  gridX: 48,
+  gridY: 64,
+  /** Grid-line thickness. */
+  gridW: 4
+};
+var ZOOM = {
+  min: 1,
+  max: 3,
+  /** Multiplier per press of the zoom-in / zoom-out control. */
+  step: 1.5,
+  /**
+   * Wheel delta that doubles (or halves) the zoom, via `exp(-delta / decay)`.
+   * A trackpad pinch reaches the browser as a wheel event too.
+   */
+  decay: 320
+};
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function touchDistance(e) {
+  const touches = e.nativeEvent.touches;
+  const a = touches[0];
+  const b = touches[1];
+  if (!a || !b) return 0;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+}
+var DEFAULT_LABELS = {
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  recenter: "Recenter",
+  attribution: "\xA9 map data",
+  placeAction: (action, name) => `${action}, ${name}`,
+  search: "Search places",
+  filters: "Filters",
+  searchArea: "Search this area",
+  locate: "Show my location",
+  loading: "Loading map",
+  error: "Map couldn\u2019t load",
+  offline: "Offline. Showing the saved map.",
+  locationOff: "Location is off.",
+  locating: "Finding your location",
+  empty: "No places match these filters",
+  retry: "Retry",
+  clearFilters: "Clear filters",
+  layers: "Map type",
+  fullscreen: "Enter fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  turnOn: "Turn on",
+  placesCount: (n) => `${n} ${n === 1 ? "place" : "places"}`,
+  scale: (label) => `Scale, ${label}`
+};
+var MAP_SIZE_STEP = { sm: 160, md: 224, lg: 256 };
+function BaseLayer({ width, height }) {
+  const { styles } = useStyles(sheet);
+  const columns = width > 0 ? Math.floor((width - SPEC.gridW) / SPEC.gridX) : 6;
+  const rows = height > 0 ? Math.floor((height - SPEC.gridW) / SPEC.gridY) : 6;
+  return /* @__PURE__ */ jsxs(View, { style: styles.base, children: [
+    Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridV, { left: (i + 1) * SPEC.gridX }] }, `v${i}`)),
+    Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(View, { style: [styles.gridH, { top: (i + 1) * SPEC.gridY }] }, `h${i}`)),
+    /* @__PURE__ */ jsx(View, { style: styles.river }),
+    /* @__PURE__ */ jsx(View, { style: styles.park })
+  ] });
+}
+function MapView({
+  pins = [],
+  activePinId,
+  onSelectPin,
+  place,
+  results = [],
+  onSelectResult,
+  searchValue,
+  onSearchChange,
+  filters,
+  onFilterToggle,
+  searchAreaOffered,
+  onSearchArea,
+  onLocate,
+  layers,
+  layer,
+  onLayerChange,
+  scaleLabel,
+  fullscreen,
+  onFullscreen,
+  onDismiss,
+  userLocation,
+  status,
+  onRetry,
+  onClearFilters,
+  attribution: attributionProp,
+  labels: labelsProp,
+  onZoomIn,
+  zoomControls: zoomControlsMode = "pointer",
+  onZoomOut,
+  onRecenter,
+  pannable = true,
+  zoomable = true,
+  minZoom = ZOOM.min,
+  maxZoom = ZOOM.max,
+  motion = "full",
+  size,
+  children
+}) {
+  const labels = useLabels("mapView", DEFAULT_LABELS, labelsProp);
+  const attribution = attributionProp ?? labels.attribution;
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("map-view");
+  const animateZoom = useResolvedMotion(motion, "map-view") === "full";
+  const animateZoomRef = React.useRef(animateZoom);
+  animateZoomRef.current = animateZoom;
+  const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
+  const viewportRef = React.useRef(viewport);
+  const onRootLayout = (e) => {
+    const { width, height } = e.nativeEvent.layout;
+    viewportRef.current = { width, height };
+    setViewport(
+      (prev) => prev.width === width && prev.height === height ? prev : { width, height }
+    );
+  };
+  const pan = React.useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const offset = React.useRef({ x: 0, y: 0 });
+  const gestureStart = React.useRef({ x: 0, y: 0 });
+  const zoom = React.useRef(1);
+  const pinch = React.useRef(null);
+  const bounds = () => {
+    const { width, height } = viewportRef.current;
+    return {
+      x: Math.max(0, (width * zoom.current - width) / 2),
+      y: Math.max(0, (height * zoom.current - height) / 2)
+    };
+  };
+  const panTo = (x, y) => {
+    const max = bounds();
+    const next = { x: clamp(x, -max.x, max.x), y: clamp(y, -max.y, max.y) };
+    offset.current = next;
+    pan.setValue(next);
+  };
+  const zoomTo = (next, animate) => {
+    zoom.current = clamp(next, minZoom, maxZoom);
+    if (animate && animateZoomRef.current) {
+      Animated.timing(scale, {
+        toValue: zoom.current,
+        duration: theme.motion.expand.duration,
+        easing: Easing.bezier(...theme.motion.expand.easing),
+        // The pan on the same layer is gesture-driven, so this transform stays
+        // on the JS driver too — the two cannot mix drivers on one node.
+        useNativeDriver: false
+      }).start();
+    } else {
+      scale.setValue(zoom.current);
+    }
+    panTo(offset.current.x, offset.current.y);
+  };
+  const responder = React.useMemo(
+    () => PanResponder.create({
+      // Never claim the touch on start: a tap belongs to the pin (or the card)
+      // underneath. Only a real drag takes over.
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (e, g) => pannable && (Math.abs(g.dx) > 2 || Math.abs(g.dy) > 2) || zoomable && e.nativeEvent.touches.length > 1,
+      onPanResponderGrant: () => {
+        gestureStart.current = { ...offset.current };
+        pinch.current = null;
+      },
+      onPanResponderMove: (e, g) => {
+        const distance = zoomable ? touchDistance(e) : 0;
+        if (distance > 0) {
+          pinch.current ??= { distance, zoom: zoom.current };
+          zoomTo(pinch.current.zoom * distance / pinch.current.distance, false);
+          return;
+        }
+        if (!pannable) return;
+        panTo(gestureStart.current.x + g.dx, gestureStart.current.y + g.dy);
+      },
+      onPanResponderRelease: () => {
+        pinch.current = null;
+      },
+      onPanResponderTerminate: () => {
+        pinch.current = null;
+      }
+    }),
+    // `panTo`/`zoomTo` read refs, so the responder never needs rebuilding for them.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pannable, zoomable, minZoom, maxZoom]
+  );
+  const rootRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!zoomable) return;
+    const node = rootRef.current;
+    if (!node?.addEventListener || !node.removeEventListener) return;
+    const onWheel = (e) => {
+      const wheel = e;
+      wheel.preventDefault?.();
+      zoomTo(zoom.current * Math.exp(-wheel.deltaY / ZOOM.decay), false);
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener?.("wheel", onWheel);
+  }, [zoomable, minZoom, maxZoom]);
+  const [layersOpen, setLayersOpen] = React.useState(false);
+  const dismissible = Boolean(onDismiss) && (activePinId !== void 0 || place !== void 0);
+  const onDismissRef = React.useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  React.useEffect(() => {
+    if (Platform.OS !== "android" || !dismissible) return;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      onDismissRef.current?.();
+      return true;
+    });
+    return () => sub.remove();
+  }, [dismissible]);
+  const recenter = () => {
+    zoomTo(minZoom, true);
+    panTo(0, 0);
+    onRecenter?.();
+  };
+  const marks = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    const order = results.length > 0 ? results.map((r) => r.id) : pins.map((p) => p.id);
+    order.forEach((id, i) => m.set(id, String.fromCharCode(65 + i % 26)));
+    return m;
+  }, [pins, results]);
+  const [coverHeight, setCoverHeight] = React.useState(0);
+  const showSheet = results.length > 0 && !place;
+  const covered = place ? coverHeight || SPEC.cardEstimate : showSheet ? coverHeight || results.length * SPEC.resultRow : 0;
+  const attributionBottom = covered > 0 ? covered + theme.space[10] + SPEC.attributionGap : SPEC.attributionBottom;
+  const onCoverLayout = (e) => setCoverHeight(e.nativeEvent.layout.height);
+  const hasTopRow = onSearchChange !== void 0 || (filters?.length ?? 0) > 0;
+  const counterScale = Animated.divide(1, scale);
+  const zoomControls = [
+    {
+      icon: "plus",
+      label: labels.zoomIn,
+      handler: onZoomIn,
+      onPress: () => {
+        zoomTo(zoom.current * ZOOM.step, true);
+        onZoomIn?.();
+      }
+    },
+    {
+      icon: "minus",
+      label: labels.zoomOut,
+      handler: onZoomOut,
+      onPress: () => {
+        zoomTo(zoom.current / ZOOM.step, true);
+        onZoomOut?.();
+      }
+    }
+  ].filter(
+    (c) => c.handler && (zoomControlsMode === "always" || zoomControlsMode === "pointer" && Platform.OS === "web")
+  );
+  const hasLayers = (layers?.length ?? 0) > 1;
+  const locateOn = userLocation !== void 0;
+  const control = (icon, label, onPress, pressed, grouped) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      "aria-pressed": pressed,
+      onPress,
+      style: [styles.control, !grouped && styles.groupSolo, pressed && styles.controlOn],
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: icon,
+          size: theme.icon.sm,
+          color: pressed ? theme.color.accentStrong : theme.color.text
+        }
+      )
+    },
+    label
+  );
+  const pinNodes = pins.map((pin) => {
+    const active = pin.id === activePinId;
+    const size2 = active ? SPEC.pinActive : SPEC.pinIdle;
+    const mark = results.length > 0 ? marks.get(pin.id) : void 0;
+    const cluster = (pin.count ?? 0) > 1;
+    return /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles.pinAnchor,
+          {
+            left: `${pin.x}%`,
+            top: `${pin.y}%`,
+            width: cluster ? void 0 : size2,
+            minWidth: cluster ? theme.ctl.md : void 0,
+            height: cluster ? theme.ctl.md : size2,
+            marginLeft: cluster ? -theme.ctl.md / 2 : -size2 / 2,
+            marginTop: cluster ? -theme.ctl.md / 2 : -size2,
+            // Screen-sized at every zoom: undo the layer's scale about the tail.
+            transform: [
+              { translateY: size2 / 2 },
+              { scale: counterScale },
+              { translateY: -size2 / 2 }
+            ]
+          }
+        ],
+        children: /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: pin.label,
+            "aria-pressed": active,
+            onPress: onSelectPin ? () => onSelectPin(pin.id) : void 0,
+            hitSlop: Math.max(0, (theme.hit.md - size2) / 2),
+            style: [
+              styles.pin,
+              cluster ? styles.pinCluster : active ? styles.pinActive : pin.visited ? styles.pinVisited : styles.pinIdle
+            ],
+            children: [
+              cluster ? null : /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: [
+                    styles.tail,
+                    active ? styles.tailActive : pin.visited ? styles.tailVisited : styles.tailIdle
+                  ]
+                }
+              ),
+              cluster ? /* @__PURE__ */ jsx(Text, { style: styles.clusterCount, children: pin.count }) : mark ? /* @__PURE__ */ jsx(Text, { style: [styles.mark, active && styles.markActive], children: mark }) : /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: pin.icon ?? "map-pin",
+                  size: theme.icon.sm,
+                  color: active ? theme.color.accentInk : theme.color.text
+                }
+              )
+            ]
+          }
+        )
+      },
+      pin.id
+    );
+  });
+  const message = (text, action) => /* @__PURE__ */ jsxs(View, { style: styles.statusBox, accessibilityRole: "alert", children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.statusText, children: text }),
+    action?.onPress ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "lg", onPress: action.onPress, children: action.label }) : null
+  ] });
+  const pill = (text) => /* @__PURE__ */ jsxs(View, { style: styles.statusPill, accessibilityRole: "progressbar", accessibilityLabel: text, children: [
+    /* @__PURE__ */ jsx(
+      ActivityIndicator,
+      {
+        size: "small",
+        color: theme.color.text2,
+        "aria-hidden": true,
+        importantForAccessibility: "no-hide-descendants"
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.statusPillText, children: text })
+  ] });
+  const banner = (tone, icon, text, action) => /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      style: [styles.banner, tone === "warn" ? styles.bannerWarn : styles.bannerInfo],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: icon,
+            size: theme.icon.sm,
+            color: tone === "warn" ? theme.color.warnOnSoft : theme.color.infoOnSoft
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.bannerText,
+              { color: tone === "warn" ? theme.color.warnOnSoft : theme.color.infoOnSoft }
+            ],
+            children: text
+          }
+        ),
+        action?.onPress ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: action.onPress, hitSlop: theme.space[8], children: /* @__PURE__ */ jsx(Text, { style: [styles.bannerAction, { color: theme.color.infoOnSoft }], children: action.label }) }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: rootRef,
+      testID: "map-root",
+      style: [styles.root, size ? { flex: 0, height: theme.space[MAP_SIZE_STEP[size]] } : null],
+      onLayout: onRootLayout,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            testID: "map-pan-layer",
+            style: [
+              styles.world,
+              { transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }] }
+            ],
+            ...responder.panHandlers,
+            children: [
+              children ?? /* @__PURE__ */ jsx(BaseLayer, { width: viewport.width, height: viewport.height }),
+              userLocation ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    pointerEvents: "none",
+                    style: [
+                      styles.halo,
+                      {
+                        left: `${userLocation.x}%`,
+                        top: `${userLocation.y}%`,
+                        width: viewport.width * ((userLocation.accuracy ?? 6) / 50),
+                        height: viewport.width * ((userLocation.accuracy ?? 6) / 50),
+                        marginLeft: -(viewport.width * ((userLocation.accuracy ?? 6) / 100)),
+                        marginTop: -(viewport.width * ((userLocation.accuracy ?? 6) / 100))
+                      }
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Animated.View,
+                  {
+                    pointerEvents: "none",
+                    style: [
+                      styles.userDot,
+                      {
+                        left: `${userLocation.x}%`,
+                        top: `${userLocation.y}%`,
+                        transform: [{ scale: counterScale }]
+                      }
+                    ]
+                  }
+                )
+              ] }) : null,
+              pinNodes
+            ]
+          }
+        ),
+        hasTopRow ? (
+          // Search and filters ride the top edge.
+          /* @__PURE__ */ jsxs(View, { style: styles.topRow, children: [
+            onSearchChange ? /* @__PURE__ */ jsx(
+              Input,
+              {
+                leadingIcon: "search",
+                placeholder: labels.search,
+                accessibilityLabel: labels.search,
+                value: searchValue ?? "",
+                onChangeText: onSearchChange,
+                size: "lg",
+                containerStyle: styles.search
+              }
+            ) : null,
+            filters?.length ? /* @__PURE__ */ jsx(
+              View,
+              {
+                accessibilityRole: "toolbar",
+                accessibilityLabel: labels.filters,
+                style: styles.chips,
+                children: filters.map((f) => /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    variant: "filter",
+                    size: "lg",
+                    selected: f.selected,
+                    onSelectedChange: (s) => onFilterToggle?.(f.id, s),
+                    children: f.label
+                  },
+                  f.id
+                ))
+              }
+            ) : null
+          ] })
+        ) : null,
+        searchAreaOffered ? /* @__PURE__ */ jsx(View, { style: [styles.areaOffer, hasTopRow && styles.areaOfferLow], children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", leadingIcon: "search", onPress: onSearchArea, children: labels.searchArea }) }) : null,
+        status ? /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "box-none",
+            style: [
+              styles.overlay,
+              status === "loading" || status === "locating" || status === "location-off" || status === "offline" ? styles.overlayTop : null
+            ],
+            children: status === "loading" ? pill(labels.loading) : status === "locating" ? pill(labels.locating) : status === "location-off" ? banner(
+              "info",
+              "info",
+              labels.locationOff,
+              onLocate ? { label: labels.turnOn, onPress: onLocate } : void 0
+            ) : status === "offline" ? banner("warn", "wifi-off", labels.offline) : status === "empty" ? message(
+              labels.empty,
+              onClearFilters ? { label: labels.clearFilters, onPress: onClearFilters } : void 0
+            ) : message(
+              labels.error,
+              onRetry ? { label: labels.retry, onPress: onRetry } : void 0
+            )
+          }
+        ) : null,
+        zoomControls.length > 0 || onRecenter || onLocate || onFullscreen || hasLayers ? /* @__PURE__ */ jsxs(View, { style: [styles.controls, hasTopRow && styles.controlsLow], children: [
+          onFullscreen ? control(
+            fullscreen ? "minimize" : "maximize",
+            fullscreen ? labels.exitFullscreen : labels.fullscreen,
+            onFullscreen,
+            fullscreen ?? false
+          ) : null,
+          zoomControls.length > 0 ? (
+            // Grouped by function: the zoom pair is one 44 group.
+            /* @__PURE__ */ jsx(View, { style: styles.group, children: zoomControls.map((c, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i > 0 ? /* @__PURE__ */ jsx(View, { style: styles.groupDivider }) : null,
+              control(c.icon, c.label, c.onPress, void 0, true)
+            ] }, c.label)) })
+          ) : null,
+          onRecenter ? control("rotate-ccw", labels.recenter, recenter) : null,
+          onLocate ? control("navigation", labels.locate, onLocate, locateOn) : null,
+          hasLayers ? control("layers", labels.layers, () => setLayersOpen((o) => !o), layersOpen) : null,
+          hasLayers && layersOpen ? /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityRole: "menu",
+              accessibilityLabel: labels.layers,
+              style: styles.layerMenu,
+              children: layers?.map((l) => /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "menuitem",
+                  accessibilityLabel: l.label,
+                  "aria-checked": l.id === layer,
+                  onPress: () => {
+                    onLayerChange?.(l.id);
+                    setLayersOpen(false);
+                  },
+                  style: [styles.layerItem, l.id === layer && styles.layerItemOn],
+                  children: /* @__PURE__ */ jsx(Text, { style: [styles.layerText, l.id === layer && styles.layerTextOn], children: l.label })
+                },
+                l.id
+              ))
+            }
+          ) : null
+        ] }) : null,
+        scaleLabel ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityRole: "image",
+            accessibilityLabel: labels.scale(scaleLabel),
+            pointerEvents: "none",
+            style: [styles.scale, { bottom: attributionBottom }],
+            children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.scaleText, children: scaleLabel }),
+              /* @__PURE__ */ jsx(View, { style: styles.scaleBar })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles.attribution, { bottom: attributionBottom }], children: attribution }),
+        place ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [styles.card, place.secondaryActions?.length ? styles.cardStacked : null],
+            onLayout: onCoverLayout,
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
+                /* @__PURE__ */ jsx(View, { style: styles.cardThumb }),
+                /* @__PURE__ */ jsxs(View, { style: styles.cardText, children: [
+                  /* @__PURE__ */ jsx(Text, { style: styles.cardName, numberOfLines: 1, ellipsizeMode: "tail", children: place.name }),
+                  place.meta ? /* @__PURE__ */ jsx(Text, { style: styles.cardMeta, numberOfLines: 1, ellipsizeMode: "tail", children: place.meta }) : null
+                ] }),
+                place.actionLabel && !place.secondaryActions?.length ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "lg",
+                    accessibilityLabel: labels.placeAction(place.actionLabel, place.name),
+                    onPress: place.onAction,
+                    children: place.actionLabel
+                  }
+                ) : null
+              ] }),
+              place.secondaryActions?.length ? /* @__PURE__ */ jsxs(View, { style: styles.cardActions, children: [
+                place.actionLabel ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    size: "lg",
+                    accessibilityLabel: labels.placeAction(place.actionLabel, place.name),
+                    onPress: place.onAction,
+                    children: place.actionLabel
+                  }
+                ) : null,
+                place.secondaryActions.map((a) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "lg",
+                    leadingIcon: a.icon,
+                    onPress: a.onPress,
+                    children: a.label
+                  },
+                  a.label
+                ))
+              ] }) : null
+            ]
+          }
+        ) : null,
+        showSheet ? /* @__PURE__ */ jsxs(View, { style: styles.resultSheet, onLayout: onCoverLayout, accessibilityRole: "list", children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sheetHeader, children: labels.placesCount(results.length) }),
+          /* @__PURE__ */ jsx(ScrollView, { style: styles.sheetScroll, children: results.map((r) => {
+            const active = r.id === activePinId;
+            return /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                "aria-pressed": active,
+                accessibilityLabel: r.meta ? `${r.name}, ${r.meta}` : r.name,
+                onPress: onSelectResult ? () => onSelectResult(r.id) : void 0,
+                style: [styles.resultRow, active && styles.resultRowActive],
+                children: [
+                  /* @__PURE__ */ jsx(View, { style: [styles.resultMark, active && styles.resultMarkActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.mark, active && styles.markActive], children: marks.get(r.id) }) }),
+                  /* @__PURE__ */ jsxs(View, { style: styles.cardText, children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: [styles.cardName, r.closed && styles.cardClosed],
+                        numberOfLines: 1,
+                        children: r.name
+                      }
+                    ),
+                    r.meta ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: [styles.cardMeta, r.closed && styles.cardClosed],
+                        numberOfLines: 1,
+                        children: r.meta
+                      }
+                    ) : null
+                  ] }),
+                  r.rating ? /* @__PURE__ */ jsxs(View, { style: styles.rating, children: [
+                    /* @__PURE__ */ jsx(Text, { style: styles.ratingText, children: r.rating }),
+                    /* @__PURE__ */ jsx(Icon, { name: "star", size: theme.icon.xs, color: theme.color.text2 })
+                  ] }) : null
+                ]
+              }
+            ) }, r.id);
+          }) })
+        ] }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, backgroundColor: theme.color.surface2, overflow: "hidden" },
+  // The panning layer is the viewport. Travel comes from the zoom scaling it up,
+  // so nothing is laid out beyond the map's own edges at rest.
+  world: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+  base: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+  gridV: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: SPEC.gridW,
+    backgroundColor: theme.color.surface3
+  },
+  gridH: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: SPEC.gridW,
+    backgroundColor: theme.color.surface3
+  },
+  // Edge to edge: the -12° rotation pulls the ends ~1dp inside the map, which is
+  // cheaper than the 30% of extra width it would take to bleed past them.
+  //
+  // loam-contrast-ignore — the river and the park are base-layer texture, not
+  // information: they exist so the muted palette reads as a map. Every pin,
+  // route and label that *does* mean something is drawn over them with its own
+  // edge, and outlining a decorative river under high contrast would read as a
+  // defect rather than as help.
+  river: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: "30%",
+    height: theme.space[26],
+    backgroundColor: theme.color.infoSoft,
+    transform: [{ rotate: "-12deg" }]
+  },
+  // loam-contrast-ignore — decorative, as the river above.
+  park: {
+    position: "absolute",
+    left: "8%",
+    top: "8%",
+    width: "44%",
+    height: "22%",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.goodSoft
+  },
+  // The pin anchor is positioned at the pin's tail; the counter-scale keeps the
+  // marker screen-sized while the layer zooms.
+  pinAnchor: { position: "absolute" },
+  pin: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    ...theme.shadow.md
+  },
+  // The raw accent stays: border and fill are the same colour, so this pin has
+  // no independent edge to measure — the glyph inside rides `accentInk`.
+  pinActive: {
+    backgroundColor: theme.color.accent,
+    borderColor: theme.color.accent
+  },
+  pinIdle: {
+    backgroundColor: theme.color.surface,
+    borderColor: theme.color.borderStrong
+  },
+  pinVisited: {
+    backgroundColor: theme.color.surface3,
+    borderColor: theme.color.borderStrong
+  },
+  pinCluster: {
+    width: "auto",
+    minWidth: theme.ctl.md,
+    paddingHorizontal: theme.space[6],
+    backgroundColor: theme.color.accentSoft,
+    borderColor: theme.color.accentStrong
+  },
+  clusterCount: {
+    fontFamily: theme.font.mono,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text
+  },
+  tail: {
+    position: "absolute",
+    bottom: -4,
+    width: SPEC.tail * 2,
+    height: SPEC.tail * 2,
+    transform: [{ rotate: "45deg" }],
+    zIndex: -1
+  },
+  tailActive: { backgroundColor: theme.color.accent },
+  tailIdle: { backgroundColor: theme.color.borderStrong },
+  tailVisited: { backgroundColor: theme.color.surface3 },
+  mark: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  markActive: { color: theme.color.accentInk },
+  // loam-contrast-ignore — the halo is a decorative accuracy wash; the dot
+  // inside it carries the meaning with its own edge.
+  halo: {
+    position: "absolute",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accentSoft
+  },
+  userDot: {
+    position: "absolute",
+    width: SPEC.userDot,
+    height: SPEC.userDot,
+    marginLeft: -16 / 2,
+    marginTop: -16 / 2,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    // The design's 3px ring has no token: 2 × `borderWidth.thick` (1.5) is exact.
+    borderWidth: theme.borderWidth.thick * 2,
+    borderColor: theme.color.surface
+  },
+  topRow: {
+    position: "absolute",
+    left: theme.space[12],
+    right: theme.space[12],
+    top: theme.space[12],
+    gap: theme.space[8]
+  },
+  search: { width: "100%" },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[6] },
+  areaOffer: {
+    position: "absolute",
+    alignSelf: "center",
+    left: 0,
+    right: 0,
+    top: theme.space[10],
+    alignItems: "center"
+  },
+  areaOfferLow: { top: SPEC.topRowClear },
+  overlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space[16]
+  },
+  overlayTop: {
+    justifyContent: "flex-start",
+    paddingTop: theme.space[12],
+    paddingLeft: theme.space[12],
+    paddingRight: SPEC.controlsEnd
+  },
+  statusPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  statusPillText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  banner: {
+    alignSelf: "stretch",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8],
+    paddingVertical: theme.space[8],
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.thin,
+    ...theme.shadow.sm
+  },
+  bannerWarn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+  bannerInfo: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info },
+  bannerText: { flex: 1, fontFamily: theme.font.sans, fontSize: theme.fontSize[13] },
+  bannerAction: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold,
+    textDecorationLine: "underline"
+  },
+  statusBox: {
+    alignItems: "center",
+    gap: theme.space[12],
+    padding: theme.space[16],
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  statusText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  controls: {
+    position: "absolute",
+    right: theme.space[10],
+    top: theme.space[10],
+    gap: theme.space[8]
+  },
+  controlsLow: { top: SPEC.controlsClear },
+  // Every single control is its own group, as the zoom pair is.
+  groupSolo: {
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    ...theme.shadow.sm
+  },
+  controlOn: { backgroundColor: theme.state.selected },
+  group: {
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    ...theme.shadow.sm
+  },
+  groupDivider: { height: theme.borderWidth.base, backgroundColor: theme.color.border },
+  // 44: the touch tier, r12 — the whole control is the target.
+  control: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface
+  },
+  // The layers menu opens beneath the control stack, trailing-aligned.
+  layerMenu: {
+    alignSelf: "flex-end",
+    minWidth: theme.space[36],
+    padding: theme.space[4],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  layerItem: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.sm
+  },
+  layerItemOn: { backgroundColor: theme.state.selected },
+  layerText: { fontFamily: theme.font.sans, fontSize: theme.fontSize[14], color: theme.color.text },
+  layerTextOn: { fontWeight: theme.fontWeight.semibold },
+  // Scale bar: a plate on the leading edge, sharing the attribution's baseline.
+  scale: {
+    position: "absolute",
+    left: SPEC.attributionEnd,
+    gap: theme.space[2],
+    paddingHorizontal: theme.space[6],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.color.surface
+  },
+  scaleText: {
+    fontFamily: theme.font.mono,
+    fontSize: SPEC.attributionSize,
+    color: theme.color.text2
+  },
+  scaleBar: {
+    width: theme.space[56],
+    height: theme.space[6],
+    borderColor: theme.color.text2,
+    borderLeftWidth: theme.borderWidth.base,
+    borderRightWidth: theme.borderWidth.base,
+    borderBottomWidth: theme.borderWidth.base
+  },
+  // A measured offset clears the card or sheet; 11 on a plate so it stays legible.
+  attribution: {
+    position: "absolute",
+    right: SPEC.attributionEnd,
+    paddingHorizontal: theme.space[6],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radius.xs,
+    backgroundColor: theme.color.surface,
+    fontFamily: theme.font.mono,
+    fontSize: SPEC.attributionSize,
+    color: theme.color.text2
+  },
+  card: {
+    position: "absolute",
+    left: theme.space[10],
+    right: theme.space[10],
+    bottom: theme.space[10],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPEC.cardGap,
+    padding: theme.space[12],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  cardStacked: { flexDirection: "column", alignItems: "stretch" },
+  cardHead: { flexDirection: "row", alignItems: "center", gap: SPEC.cardGap },
+  cardActions: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[8] },
+  rating: { flexDirection: "row", alignItems: "center", gap: theme.space[4] },
+  ratingText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  cardThumb: {
+    width: SPEC.thumb,
+    height: SPEC.thumb,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface3
+  },
+  // `minWidth: 0` lets a long place name truncate instead of shoving the action out.
+  cardText: { flex: 1, minWidth: 0, gap: theme.space[2] },
+  cardName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: SPEC.nameSize,
+    lineHeight: SPEC.nameSize * theme.lineHeight.snug,
+    color: theme.color.text
+  },
+  cardClosed: { color: theme.color.text3 },
+  cardMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: SPEC.metaSize,
+    color: theme.color.text2
+  },
+  resultSheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingVertical: theme.space[8],
+    borderTopLeftRadius: theme.radius.lg,
+    borderTopRightRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  sheetHeader: {
+    paddingHorizontal: theme.space[16],
+    paddingVertical: theme.space[8],
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  // Two rows (56 + 2 + 2 margin each) show; a third peeks only when scrolled.
+  sheetScroll: { maxHeight: (SPEC.resultRow + theme.space[4]) * 2 },
+  resultRow: {
+    minHeight: SPEC.resultRow,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPEC.cardGap,
+    paddingHorizontal: theme.space[12],
+    marginHorizontal: theme.space[8],
+    marginVertical: theme.space[2],
+    borderRadius: theme.radius.sm
+  },
+  resultRowActive: { backgroundColor: theme.state.selected },
+  resultMark: {
+    width: SPEC.pinIdle,
+    height: SPEC.pinIdle,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface
+  },
+  resultMarkActive: { backgroundColor: theme.color.accent, borderColor: theme.color.accent }
+}));
+
+export { MapView };