@krizaka/ui 3.2.0 → 3.4.0

package/dist/native/map.js

@@ -0,0 +1,673 @@
+// src/native/map.tsx
+import { Txt, useTheme } from "@krizaka/ui/native";
+import {
+  Camera,
+  GeoJSONSource,
+  Layer,
+  LocationManager,
+  Map as MapView,
+  Marker as MapMarker
+} from "@maplibre/maplibre-react-native";
+import * as React from "react";
+import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import Svg, { Circle, Path } from "react-native-svg";
+
+// src/map/assets.ts
+var CDN = "https://krizaka-assets.b-cdn.net/maps/v1";
+var MAP_TILES = {
+  world: `${CDN}/tiles/world-20261012.pmtiles`,
+  quebec: `${CDN}/tiles/quebec-20261012.pmtiles`
+};
+var MAP_GLYPHS = `${CDN}/fonts/{fontstack}/{range}.pbf`;
+var MAP_ATTRIBUTION = { osm: "\xA9 OpenStreetMap contributors", osmUrl: "https://www.openstreetmap.org/copyright", protomaps: "Protomaps", protomapsUrl: "https://protomaps.com" };
+var base = null;
+function mapAssets() {
+  const at = (u) => base ? u.replace(CDN, base) : u;
+  return { tiles: { world: at(MAP_TILES.world), quebec: at(MAP_TILES.quebec) }, glyphs: at(MAP_GLYPHS) };
+}
+
+// src/map/geo.ts
+var R = 63710088e-1;
+var rad = (d) => d * Math.PI / 180;
+function distanceMeters(a, b) {
+  const dLat = rad(b[1] - a[1]);
+  const dLng = rad(b[0] - a[0]);
+  const h = Math.sin(dLat / 2) ** 2 + Math.cos(rad(a[1])) * Math.cos(rad(b[1])) * Math.sin(dLng / 2) ** 2;
+  return 2 * R * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+function circlePolygon(center, radius, steps = 64) {
+  const [lng, lat] = center;
+  const d = radius / R;
+  const ring = [];
+  for (let i = 0; i <= steps; i++) {
+    const brg = 2 * Math.PI * i / steps;
+    const lat2 = Math.asin(Math.sin(rad(lat)) * Math.cos(d) + Math.cos(rad(lat)) * Math.sin(d) * Math.cos(brg));
+    const lng2 = rad(lng) + Math.atan2(Math.sin(brg) * Math.sin(d) * Math.cos(rad(lat)), Math.cos(d) - Math.sin(rad(lat)) * Math.sin(lat2));
+    ring.push([lng2 * 180 / Math.PI, lat2 * 180 / Math.PI]);
+  }
+  return { type: "Feature", properties: {}, geometry: { type: "Polygon", coordinates: [ring] } };
+}
+function formatDistance(meters, locale) {
+  if (meters < 1e3) return new Intl.NumberFormat(locale, { style: "unit", unit: "meter", maximumFractionDigits: 0 }).format(Math.round(meters / 10) * 10);
+  return new Intl.NumberFormat(locale, { style: "unit", unit: "kilometer", maximumFractionDigits: meters < 1e4 ? 1 : 0 }).format(meters / 1e3);
+}
+
+// ../tokens/dist/native.js
+var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
+  "surface0": "#0c0c0e",
+  "surface1": "#161618",
+  "surface2": "#1f1f23",
+  "surface3": "#2a2a2d",
+  "media": "#1b1b1d",
+  "borderSubtle": "rgba(255,255,255,0.06)",
+  "borderDefault": "rgba(255,255,255,0.1)",
+  "borderStrong": "rgba(255,255,255,0.16)",
+  "textPrimary": "#f5f5f5",
+  "textSecondary": "#a0a0a7",
+  "textMuted": "#73737d",
+  "textOnMedia": "#ffffff",
+  "accent": "#196df5",
+  "accentHover": "#0e5bd8",
+  "accentSoft": "rgba(25,109,245,0.1)",
+  "accentText": "#629cf8",
+  "accent2": "#196df5",
+  "onAccent": "#ffffff",
+  "ring": "#196df5",
+  "brandGradientFrom": "#0e1525",
+  "brandGradientVia": "#0e0f16",
+  "brandGradientTo": "#0c0c0e",
+  "success": "#10b77f",
+  "successText": "#36d399",
+  "successSoft": "rgba(16,183,127,0.14)",
+  "warning": "#f59f0a",
+  "warningText": "#f6a823",
+  "warningSoft": "rgba(245,159,10,0.14)",
+  "danger": "#ef4343",
+  "dangerText": "#f87272",
+  "dangerSoft": "rgba(239,67,67,0.14)",
+  "info": "#196df5",
+  "infoText": "#629cf8",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(4,4,7,0.5)",
+  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBorder": "rgba(255,255,255,0.1)"
+}), light: /* @__PURE__ */ Object.freeze({
+  "surface0": "#fafafa",
+  "surface1": "#ffffff",
+  "surface2": "#f1f1f3",
+  "surface3": "#e4e4e7",
+  "media": "#e9e9ec",
+  "borderSubtle": "rgba(0,0,0,0.06)",
+  "borderDefault": "rgba(0,0,0,0.1)",
+  "borderStrong": "rgba(0,0,0,0.16)",
+  "textPrimary": "#18181b",
+  "textSecondary": "#64646d",
+  "textMuted": "#808089",
+  "textOnMedia": "#ffffff",
+  "accent": "#0a64f5",
+  "accentHover": "#0d55c9",
+  "accentSoft": "rgba(10,100,245,0.08)",
+  "accentText": "#0954ce",
+  "accent2": "#0a64f5",
+  "onAccent": "#ffffff",
+  "ring": "#0a64f5",
+  "brandGradientFrom": "#dcebfe",
+  "brandGradientVia": "#f3f6fc",
+  "brandGradientTo": "#fafafa",
+  "success": "#10b77f",
+  "successText": "#0a714e",
+  "successSoft": "rgba(16,183,127,0.1)",
+  "warning": "#f59f0a",
+  "warningText": "#955104",
+  "warningSoft": "rgba(245,159,10,0.12)",
+  "danger": "#ef4343",
+  "dangerText": "#af1d1d",
+  "dangerSoft": "rgba(239,67,67,0.1)",
+  "info": "#0a64f5",
+  "infoText": "#0954ce",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(48,52,80,0.08)",
+  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBorder": "rgba(0,0,0,0.08)"
+}) });
+var brands = /* @__PURE__ */ Object.freeze({
+  "krizaka": {
+    "dark": {
+      "accent": "#196df5",
+      "accentHover": "#0e5bd8",
+      "accentSoft": "rgba(25,109,245,0.1)",
+      "accentText": "#629cf8",
+      "accent2": "#196df5",
+      "onAccent": "#ffffff",
+      "ring": "#196df5",
+      "info": "#196df5",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#0e1525",
+      "brandGradientVia": "#0e0f16",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#0a64f5",
+      "accentHover": "#0d55c9",
+      "accentSoft": "rgba(10,100,245,0.08)",
+      "accentText": "#0954ce",
+      "accent2": "#0a64f5",
+      "onAccent": "#ffffff",
+      "ring": "#0a64f5",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#dcebfe",
+      "brandGradientVia": "#f3f6fc",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orazaka": {
+    "dark": {
+      "accent": "#f67e23",
+      "accentHover": "#f79245",
+      "accentSoft": "rgba(246,126,35,0.12)",
+      "accentText": "#f78c3b",
+      "accent2": "#f59e0b",
+      "onAccent": "#0c0c0e",
+      "ring": "#f67e23",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#28170b",
+      "brandGradientVia": "#17130c",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#b45309",
+      "accentHover": "#964608",
+      "accentSoft": "rgba(180,83,9,0.08)",
+      "accentText": "#9b4808",
+      "accent2": "#a45904",
+      "onAccent": "#ffffff",
+      "ring": "#b45309",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#ffebd6",
+      "brandGradientVia": "#fdf7ed",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orochia": {
+    "dark": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(139,92,246,0.12)",
+      "accentText": "#a78bfa",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#a78bfa",
+      "info": "#7c3aed",
+      "infoText": "#a78bfa",
+      "brandGradientFrom": "#1a0e2a",
+      "brandGradientVia": "#1c0d17",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(124,58,237,0.08)",
+      "accentText": "#6d28d9",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#7c3aed",
+      "info": "#7c3aed",
+      "infoText": "#6d28d9",
+      "brandGradientFrom": "#efe7fe",
+      "brandGradientVia": "#fdedf5",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "yazakia": {
+    "dark": {
+      "accent": "#24dbc9",
+      "accentHover": "#47e1d2",
+      "accentSoft": "rgba(36,219,201,0.12)",
+      "accentText": "#3ee0cf",
+      "accent2": "#22c378",
+      "onAccent": "#0c0c0e",
+      "ring": "#24dbc9",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#0a241e",
+      "brandGradientVia": "#0c1818",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#097169",
+      "accentHover": "#085e57",
+      "accentSoft": "rgba(9,113,105,0.08)",
+      "accentText": "#096d64",
+      "accent2": "#107546",
+      "onAccent": "#ffffff",
+      "ring": "#097169",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#e1faf1",
+      "brandGradientVia": "#e9fbfa",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "yororis": {
+    "dark": {
+      "accent": "#98b587",
+      "accentHover": "#adc69f",
+      "accentSoft": "rgba(152,181,135,0.12)",
+      "accentText": "#a7c497",
+      "accent2": "#c3a579",
+      "onAccent": "#0c0c0e",
+      "ring": "#98b587",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#1c1812",
+      "brandGradientVia": "#11140f",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#456237",
+      "accentHover": "#39532d",
+      "accentSoft": "rgba(69,98,55,0.08)",
+      "accentText": "#415b33",
+      "accent2": "#745834",
+      "onAccent": "#ffffff",
+      "ring": "#456237",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#f5efe5",
+      "brandGradientVia": "#f1f6ee",
+      "brandGradientTo": "#fafafa"
+    }
+  }
+});
+
+// src/map/style.ts
+import { layers, namedFlavor } from "@protomaps/basemaps";
+function mix(a, b, t) {
+  const p = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const [x, y] = [p(a), p(b)];
+  return `#${x.map((v, i) => Math.round(v + (y[i] - v) * t).toString(16).padStart(2, "0")).join("")}`;
+}
+function mapPalette(scheme, brand = "krizaka") {
+  const t = { ...themes[scheme], ...brands[brand]?.[scheme] };
+  const dark = scheme === "dark";
+  const land = dark ? t.surface1 : t.surface0;
+  return {
+    land,
+    background: dark ? t.surface0 : t.surface2,
+    water: mix(land, t.accent, dark ? 0.18 : 0.14),
+    park: mix(land, t.success, dark ? 0.1 : 0.12),
+    road: dark ? mix(land, t.textPrimary, 0.12) : "#ffffff",
+    roadMajor: dark ? mix(land, t.textPrimary, 0.2) : mix(land, t.textPrimary, 0.06),
+    casing: mix(land, t.textPrimary, dark ? 0.05 : 0.12),
+    building: mix(land, t.textPrimary, dark ? 0.06 : 0.07),
+    boundary: mix(land, t.textPrimary, 0.3),
+    label: t.textSecondary,
+    labelStrong: t.textPrimary,
+    halo: land,
+    accent: t.accent,
+    onAccent: t.onAccent
+  };
+}
+function mapFlavor(scheme, brand) {
+  const c = mapPalette(scheme, brand);
+  const base2 = namedFlavor(scheme);
+  return {
+    ...base2,
+    background: c.background,
+    earth: c.land,
+    park_a: c.park,
+    park_b: c.park,
+    wood_a: c.park,
+    wood_b: c.park,
+    scrub_a: c.park,
+    scrub_b: c.park,
+    glacier: c.land,
+    sand: c.land,
+    beach: c.land,
+    zoo: c.park,
+    hospital: c.land,
+    industrial: c.land,
+    school: c.land,
+    military: c.land,
+    aerodrome: c.land,
+    pedestrian: c.land,
+    runway: c.building,
+    water: c.water,
+    buildings: c.building,
+    pier: c.building,
+    boundaries: c.boundary,
+    railway: c.casing,
+    other: c.road,
+    minor_service: c.road,
+    minor_a: c.road,
+    minor_b: c.road,
+    link: c.road,
+    major: c.roadMajor,
+    highway: c.roadMajor,
+    bridges_other: c.road,
+    bridges_minor: c.road,
+    bridges_link: c.road,
+    bridges_major: c.roadMajor,
+    bridges_highway: c.roadMajor,
+    tunnel_other: c.road,
+    tunnel_minor: c.road,
+    tunnel_link: c.road,
+    tunnel_major: c.roadMajor,
+    tunnel_highway: c.roadMajor,
+    minor_service_casing: c.casing,
+    minor_casing: c.casing,
+    link_casing: c.casing,
+    major_casing_late: c.casing,
+    major_casing_early: c.casing,
+    highway_casing_late: c.casing,
+    highway_casing_early: c.casing,
+    bridges_other_casing: c.casing,
+    bridges_minor_casing: c.casing,
+    bridges_link_casing: c.casing,
+    bridges_major_casing: c.casing,
+    bridges_highway_casing: c.casing,
+    tunnel_other_casing: c.casing,
+    tunnel_minor_casing: c.casing,
+    tunnel_link_casing: c.casing,
+    tunnel_major_casing: c.casing,
+    tunnel_highway_casing: c.casing,
+    roads_label_minor: c.label,
+    roads_label_minor_halo: c.halo,
+    roads_label_major: c.label,
+    roads_label_major_halo: c.halo,
+    ocean_label: c.label,
+    subplace_label: c.label,
+    subplace_label_halo: c.halo,
+    city_label: c.labelStrong,
+    city_label_halo: c.halo,
+    state_label: c.label,
+    state_label_halo: c.halo,
+    country_label: c.label,
+    address_label: c.label,
+    address_label_halo: c.halo,
+    regular: "Noto Sans Regular",
+    bold: "Noto Sans Medium",
+    italic: "Noto Sans Italic",
+    // No point-of-interest icons (no sprite to host): the app's own markers carry the places that matter.
+    pois: void 0,
+    landcover: void 0
+  };
+}
+var REGION_FROM_ZOOM = 6.5;
+function mapStyle({ scheme, brand, lang = "en", world = { url: mapAssets().tiles.world, maxzoom: 6 }, region = { url: mapAssets().tiles.quebec, maxzoom: 14 }, glyphs = mapAssets().glyphs }) {
+  const flavor = mapFlavor(scheme, brand);
+  const attribution = `<a href="${MAP_ATTRIBUTION.protomapsUrl}">${MAP_ATTRIBUTION.protomaps}</a> \xB7 <a href="${MAP_ATTRIBUTION.osmUrl}">${MAP_ATTRIBUTION.osm}</a>`;
+  const sources = {};
+  const all = [];
+  if (world) {
+    sources.world = { type: "vector", url: `pmtiles://${world.url}`, attribution };
+    for (const l of layers("world", flavor, { lang })) {
+      if (l.id === "background") all.push(l);
+      else all.push({ ...l, id: `world-${l.id}`, maxzoom: region ? Math.min(l.maxzoom ?? 24, REGION_FROM_ZOOM) : l.maxzoom });
+    }
+  }
+  if (region) {
+    sources.region = { type: "vector", url: `pmtiles://${region.url}`, attribution };
+    for (const l of layers("region", flavor, { lang })) {
+      if (l.id === "background") {
+        if (!world) all.push(l);
+        continue;
+      }
+      all.push({ ...l, id: `region-${l.id}`, minzoom: world ? Math.max(l.minzoom ?? 0, REGION_FROM_ZOOM) : l.minzoom });
+    }
+  }
+  const drawn = all.filter((l) => !l.layout?.["icon-image"]);
+  return { version: 8, glyphs, sources, layers: drawn.map((l) => l.maxzoom === void 0 ? withoutKey(l, "maxzoom") : l) };
+}
+var withoutKey = (o, key) => Object.fromEntries(Object.entries(o).filter(([k]) => k !== key));
+
+// src/native/map.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapContext = React.createContext(null);
+var useMapContext = () => {
+  const ctx = React.useContext(MapContext);
+  if (!ctx) throw new Error("inside a <Map> only");
+  return ctx;
+};
+function Map({ label, center, zoom = 12, brand, lang, region, world, interactive = true, onMoveEnd, onPress, children, style }) {
+  const { scheme, theme, radius, motion } = useTheme();
+  const reduce = motion.duration.base === 0;
+  const camera = React.useRef(null);
+  const [places, setPlaces] = React.useState({});
+  const registry = React.useMemo(
+    () => ({
+      add: (id, text) => setPlaces((p) => p[id] === text ? p : { ...p, [id]: text }),
+      remove: (id) => setPlaces((p) => {
+        const { [id]: _gone, ...rest } = p;
+        return rest;
+      })
+    }),
+    []
+  );
+  const styleJson = React.useMemo(() => mapStyle({ scheme, brand, lang, ...region !== void 0 ? { region } : {}, ...world !== void 0 ? { world } : {} }), [scheme, brand, lang, region, world]);
+  const palette = React.useMemo(() => mapPalette(scheme, brand), [scheme, brand]);
+  const listed = Object.values(places);
+  const ctx = React.useMemo(() => ({ palette, reduce, places: registry }), [palette, reduce, registry]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: [styles.root, { borderRadius: radius.xl, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
+    /* @__PURE__ */ jsxs(
+      MapView,
+      {
+        style: StyleSheet.absoluteFill,
+        mapStyle: styleJson,
+        "aria-label": listed.length ? `${label}: ${listed.join(", ")}` : label,
+        dragPan: interactive,
+        touchZoom: interactive,
+        doubleTapZoom: interactive,
+        touchRotate: false,
+        touchPitch: false,
+        attribution: false,
+        logo: false,
+        compass: false,
+        onRegionDidChange: (e) => onMoveEnd?.({ center: e.nativeEvent.center, zoom: e.nativeEvent.zoom }),
+        onPress: (e) => {
+          const coords = e.nativeEvent.lngLat;
+          if (coords) onPress?.(coords);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Camera, { ref: camera, center: [...center], zoom, duration: reduce ? 0 : 600, easing: reduce ? void 0 : "ease" }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: [styles.attribution, { backgroundColor: theme.surface1, borderRadius: radius.sm }], children: /* @__PURE__ */ jsxs(Text, { style: [styles.attributionText, { color: theme.textSecondary }], children: [
+      MAP_ATTRIBUTION.protomaps,
+      " \xB7 ",
+      MAP_ATTRIBUTION.osm
+    ] }) })
+  ] }) });
+}
+function usePlace(label) {
+  const { places } = useMapContext();
+  const id = React.useId();
+  React.useEffect(() => {
+    places.add(id, label);
+    return () => places.remove(id);
+  }, [id, label, places]);
+  return id;
+}
+function Marker({ position, label, onPress, selected, children }) {
+  const { palette } = useMapContext();
+  const { theme, radius, haptic } = useTheme();
+  const id = usePlace(label);
+  return /* @__PURE__ */ jsx(MapMarker, { id, lngLat: [...position], anchor: "center", selected, children: /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      role: onPress ? "button" : void 0,
+      "aria-label": label,
+      disabled: !onPress,
+      hitSlop: 12,
+      onPress: () => {
+        haptic("selection");
+        onPress?.();
+      },
+      style: styles.markerSlot,
+      children: [
+        selected ? /* @__PURE__ */ jsx(View, { style: [styles.markerLabel, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius.md }], children: /* @__PURE__ */ jsx(Txt, { variant: "label", children: label }) }) : null,
+        children ?? /* @__PURE__ */ jsx(View, { style: [styles.dot, { backgroundColor: palette.accent, borderColor: palette.onAccent, transform: [{ scale: selected ? 1.3 : 1 }] }] })
+      ]
+    }
+  ) });
+}
+function UserPosition({ position, label, accuracy }) {
+  const { palette, reduce } = useMapContext();
+  const id = usePlace(label);
+  const [pulse] = React.useState(() => new Animated.Value(0));
+  React.useEffect(() => {
+    if (reduce) return;
+    const loop = Animated.loop(Animated.timing(pulse, { toValue: 1, duration: 2e3, useNativeDriver: true }));
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, reduce]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    accuracy ? /* @__PURE__ */ jsx(RadiusCircle, { center: position, radius: accuracy, tone: "soft" }) : null,
+    /* @__PURE__ */ jsx(MapMarker, { id, lngLat: [...position], anchor: "center", children: /* @__PURE__ */ jsxs(View, { role: "img", "aria-label": label, accessible: true, style: styles.userSlot, children: [
+      /* @__PURE__ */ jsx(Animated.View, { style: [styles.userHalo, { backgroundColor: palette.accent, opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.4, 0] }), transform: [{ scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 3] }) }] }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.user, { backgroundColor: palette.accent, borderColor: palette.halo }] })
+    ] }) })
+  ] });
+}
+function RadiusCircle({ center, radius, tone = "accent" }) {
+  const { palette } = useMapContext();
+  const id = `kz-circle-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const data = React.useMemo(() => circlePolygon(center, radius), [center, radius]);
+  return /* @__PURE__ */ jsxs(GeoJSONSource, { id, data, children: [
+    /* @__PURE__ */ jsx(Layer, { type: "fill", id: `${id}-fill`, paint: { "fill-color": palette.accent, "fill-opacity": tone === "soft" ? 0.1 : 0.14 } }),
+    /* @__PURE__ */ jsx(Layer, { type: "line", id: `${id}-line`, paint: { "line-color": palette.accent, "line-width": tone === "soft" ? 1 : 2, "line-opacity": tone === "soft" ? 0.4 : 0.9 } })
+  ] });
+}
+function Cluster({ points, onPointPress, radius = 48 }) {
+  const { palette, places } = useMapContext();
+  const id = `kz-cluster-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  React.useEffect(() => {
+    for (const p of points) places.add(`${id}-${p.id}`, p.label);
+    return () => points.forEach((p) => places.remove(`${id}-${p.id}`));
+  }, [points, places, id]);
+  const data = React.useMemo(
+    () => ({ type: "FeatureCollection", features: points.map((p) => ({ type: "Feature", properties: { id: p.id, label: p.label }, geometry: { type: "Point", coordinates: [...p.position] } })) }),
+    [points]
+  );
+  return /* @__PURE__ */ jsxs(
+    GeoJSONSource,
+    {
+      id,
+      data,
+      cluster: true,
+      clusterRadius: radius,
+      clusterMaxZoom: 15,
+      onPress: (e) => {
+        const feature = e.nativeEvent?.features?.[0];
+        const pid = feature?.properties?.id;
+        const point = points.find((p) => p.id === pid);
+        if (point) onPointPress?.(point);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Layer, { type: "circle", id: `${id}-groups`, filter: ["has", "point_count"], paint: { "circle-color": palette.accent, "circle-radius": ["step", ["get", "point_count"], 16, 10, 20, 50, 26], "circle-stroke-width": 3, "circle-stroke-color": palette.halo } }),
+        /* @__PURE__ */ jsx(Layer, { type: "symbol", id: `${id}-count`, filter: ["has", "point_count"], layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": ["Noto Sans Medium"], "text-size": 13 }, paint: { "text-color": palette.onAccent } }),
+        /* @__PURE__ */ jsx(Layer, { type: "circle", id: `${id}-points`, filter: ["!", ["has", "point_count"]], paint: { "circle-color": palette.accent, "circle-radius": 7, "circle-stroke-width": 2.5, "circle-stroke-color": palette.halo } })
+      ]
+    }
+  );
+}
+var pickerLabels = {
+  nearMe: "Near me",
+  locating: "Finding you\u2026",
+  denied: "Location is off for this app. Move the map instead.",
+  unavailable: "We could not find you. Move the map instead.",
+  you: "You are here",
+  distance: (d) => `${d} from you`
+};
+function LocationPicker({ label, value, onValueChange, locale, zoom = 14, radius: zone, origin: originProp = null, labels: given, style, ...map }) {
+  const labels = { ...pickerLabels, ...given };
+  const { theme, radius, haptic } = useTheme();
+  const [origin, setOrigin] = React.useState(originProp);
+  const [camera, setCamera] = React.useState(value);
+  const [status, setStatus] = React.useState("idle");
+  const nearMe = async () => {
+    setStatus("locating");
+    try {
+      if (!await LocationManager.requestPermissions()) return setStatus("denied");
+      const p = await LocationManager.getCurrentPosition();
+      if (!p) return setStatus("unavailable");
+      const here = [p.coords.longitude, p.coords.latitude];
+      haptic("success");
+      setOrigin(here);
+      setCamera(here);
+      onValueChange(here);
+      setStatus("idle");
+    } catch {
+      setStatus("unavailable");
+    }
+  };
+  const message = status === "locating" ? labels.locating : status === "denied" ? labels.denied : status === "unavailable" ? labels.unavailable : null;
+  return /* @__PURE__ */ jsxs(View, { role: "group", "aria-label": label, style: [styles.picker, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.pickerFrame, children: [
+      /* @__PURE__ */ jsxs(Map, { ...map, label, center: camera, zoom, onMoveEnd: (v) => onValueChange(v.center), style: StyleSheet.absoluteFill, children: [
+        zone ? /* @__PURE__ */ jsx(RadiusCircle, { center: value, radius: zone }) : null,
+        origin ? /* @__PURE__ */ jsx(UserPosition, { position: origin, label: labels.you }) : null
+      ] }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.pin, children: /* @__PURE__ */ jsxs(Svg, { width: 30, height: 40, viewBox: "0 0 24 32", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx(Path, { d: "M12 0C5.4 0 0 5.2 0 11.7 0 20.4 12 32 12 32s12-11.6 12-20.3C24 5.2 18.6 0 12 0Z", fill: theme.accent }),
+        /* @__PURE__ */ jsx(Circle, { cx: 12, cy: 11.5, r: 4.5, fill: theme.onAccent })
+      ] }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.bar, pointerEvents: "box-none", children: [
+        origin ? /* @__PURE__ */ jsx(View, { style: [styles.chip, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius.full }], children: /* @__PURE__ */ jsx(Txt, { variant: "label", "aria-live": "polite", children: labels.distance(formatDistance(distanceMeters(origin, value), locale)) }) }) : /* @__PURE__ */ jsx(View, {}),
+        /* @__PURE__ */ jsx(Pressable, { role: "button", "aria-label": labels.nearMe, disabled: status === "locating", onPress: () => void nearMe(), style: [styles.near, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius.full }], children: /* @__PURE__ */ jsx(Txt, { variant: "label", children: status === "locating" ? labels.locating : labels.nearMe }) })
+      ] })
+    ] }),
+    message && status !== "locating" ? /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "danger", role: "alert", children: message }) : null
+  ] });
+}
+var styles = StyleSheet.create({
+  root: { height: 280, overflow: "hidden", borderWidth: StyleSheet.hairlineWidth, alignSelf: "stretch" },
+  attribution: { position: "absolute", right: 6, bottom: 6, paddingHorizontal: 6, paddingVertical: 2, opacity: 0.9 },
+  attributionText: { fontSize: 10 },
+  markerSlot: { alignItems: "center", justifyContent: "center", minWidth: 44, minHeight: 44 },
+  markerLabel: { position: "absolute", bottom: 40, paddingHorizontal: 8, paddingVertical: 4, borderWidth: StyleSheet.hairlineWidth },
+  dot: { width: 18, height: 18, borderRadius: 9, borderWidth: 2.5 },
+  userSlot: { width: 44, height: 44, alignItems: "center", justifyContent: "center" },
+  userHalo: { position: "absolute", width: 16, height: 16, borderRadius: 8 },
+  user: { width: 16, height: 16, borderRadius: 8, borderWidth: 3 },
+  picker: { gap: 6, alignSelf: "stretch" },
+  pickerFrame: { height: 320 },
+  pin: { position: "absolute", left: "50%", top: "50%", marginLeft: -15, marginTop: -40 },
+  bar: { position: "absolute", left: 12, right: 12, bottom: 28, flexDirection: "row", justifyContent: "space-between", alignItems: "center", gap: 8 },
+  chip: { paddingHorizontal: 12, paddingVertical: 6, borderWidth: StyleSheet.hairlineWidth },
+  near: { minHeight: 44, paddingHorizontal: 16, justifyContent: "center", borderWidth: StyleSheet.hairlineWidth }
+});
+export {
+  Cluster,
+  LocationPicker,
+  MAP_ATTRIBUTION,
+  MAP_GLYPHS,
+  MAP_TILES,
+  Map,
+  Marker,
+  RadiusCircle,
+  UserPosition,
+  circlePolygon,
+  distanceMeters,
+  formatDistance,
+  mapPalette,
+  mapStyle
+};
+//# sourceMappingURL=map.js.map