@krizaka/ui 3.3.0 → 3.4.0

package/dist/map.js

@@ -0,0 +1,952 @@
+"use client";
+
+// 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 setMapAssetsBase(url) {
+  base = url ? url.replace(/\/+$/, "") : 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 project([lng, lat], zoom) {
+  const scale = 256 * 2 ** zoom;
+  const s = Math.sin(rad(Math.max(-85.0511, Math.min(85.0511, lat))));
+  return [(lng + 180) / 360 * scale, (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * scale];
+}
+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);
+}
+
+// src/map/location-picker.tsx
+import * as React3 from "react";
+
+// src/tv.ts
+import { createTV } from "tailwind-variants";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { cnMerge } from "tailwind-variants";
+var twMergeConfig = {
+  extend: {
+    classGroups: {
+      "bg-image": ["bg-sheen", "bg-fill-shade", "bg-halo"],
+      shadow: ["shadow-raised", "shadow-floating", "shadow-overlay", "shadow-glow", "shadow-glow-lg"],
+      "inset-shadow": ["inset-shadow-edge", "inset-shadow-edge-fill", "inset-shadow-well"]
+    }
+  }
+};
+
+// src/tv.ts
+var tv = createTV({ twMergeConfig });
+
+// src/map/map.tsx
+import * as React2 from "react";
+import { createPortal } from "react-dom";
+
+// src/media.ts
+import * as React from "react";
+var REDUCE = "(prefers-reduced-motion: reduce)";
+var subscribeReduce = (notify) => {
+  if (typeof window === "undefined" || !window.matchMedia) return () => void 0;
+  const query = window.matchMedia(REDUCE);
+  query.addEventListener?.("change", notify);
+  return () => query.removeEventListener?.("change", notify);
+};
+function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(
+    subscribeReduce,
+    () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(REDUCE).matches : false,
+    () => false
+  );
+}
+
+// ../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/map/map.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var map = tv({
+  slots: {
+    root: "relative isolate overflow-hidden rounded-2xl border border-border-default bg-surface-2 shadow-raised",
+    canvas: "absolute inset-0 [&_.maplibregl-canvas]:outline-hidden",
+    fallback: "absolute inset-0",
+    controls: "absolute right-3 top-3 z-10 flex flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-floating",
+    control: "inline-flex h-10 w-10 items-center justify-center text-lg font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset disabled:opacity-40 [&+&]:border-t [&+&]:border-border-subtle",
+    attribution: "absolute bottom-1.5 right-1.5 z-10 rounded-md bg-surface-1/85 px-1.5 py-0.5 text-[10px] text-fg-secondary backdrop-blur-sm [&_a]:underline-offset-2 hover:[&_a]:underline",
+    places: "sr-only",
+    marker: "group relative flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-2 border-on-accent bg-accent shadow-floating outline-hidden transition-transform hover:scale-110 focus-visible:focus-ring motion-reduce:transition-none motion-reduce:hover:scale-100 data-[selected]:scale-125",
+    markerLabel: "pointer-events-none absolute bottom-full mb-2 whitespace-nowrap rounded-lg border border-border-default bg-surface-1 px-2 py-1 text-xs font-semibold text-fg shadow-floating"
+  }
+});
+var MapContext = React2.createContext(null);
+function useMap() {
+  const ctx = React2.useContext(MapContext);
+  if (!ctx) throw new Error("useMap: inside a <Map> only");
+  return ctx;
+}
+function usePageScheme() {
+  const read = () => typeof document !== "undefined" && document.documentElement.classList.contains("light") ? "light" : "dark";
+  const [scheme, setScheme] = React2.useState(read);
+  React2.useEffect(() => {
+    const observer = new MutationObserver(() => setScheme(read()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return scheme;
+}
+var protocolAdded = false;
+var workerUrl = null;
+function configureMaps(options) {
+  if (options.workerUrl) workerUrl = options.workerUrl;
+  if (options.assetsBase) setMapAssetsBase(options.assetsBase);
+}
+async function loadEngine() {
+  const [lib, pmtiles] = await Promise.all([import("maplibre-gl"), import("pmtiles")]);
+  const ml = lib.default ?? lib;
+  if (!protocolAdded) {
+    protocolAdded = true;
+    const remote = `https://cdn.jsdelivr.net/npm/maplibre-gl@${ml.getVersion()}/dist/maplibre-gl-worker.mjs`;
+    ml.setWorkerUrl(workerUrl ?? URL.createObjectURL(new Blob([`import ${JSON.stringify(remote)};`], { type: "text/javascript" })));
+    ml.addProtocol("pmtiles", new pmtiles.Protocol().tile);
+  }
+  return ml;
+}
+var hasWebGL = () => {
+  try {
+    const canvas = document.createElement("canvas");
+    return Boolean(canvas.getContext("webgl2") ?? canvas.getContext("webgl"));
+  } catch {
+    return false;
+  }
+};
+var mapLabels = { zoomIn: "Zoom in", zoomOut: "Zoom out", places: "Places on the map" };
+function Map({
+  label,
+  center,
+  zoom = 12,
+  controlled,
+  scheme: schemeProp,
+  brand,
+  lang,
+  region,
+  world,
+  controls = true,
+  interactive = true,
+  fallback,
+  onMoveEnd,
+  onPress,
+  children,
+  labels: given,
+  className
+}) {
+  const labels = { ...mapLabels, ...given };
+  const s = map();
+  const pageScheme = usePageScheme();
+  const scheme = schemeProp ?? pageScheme;
+  const reduce = usePrefersReducedMotion();
+  const host = React2.useRef(null);
+  const [instance, setInstance] = React2.useState(null);
+  const [lib, setLib] = React2.useState(null);
+  const [ready, setReady] = React2.useState(false);
+  const [failed, setFailed] = React2.useState(false);
+  const [places, setPlaces] = React2.useState({});
+  const registry = React2.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 latest = React2.useRef({ onMoveEnd, onPress });
+  React2.useEffect(() => {
+    latest.current = { onMoveEnd, onPress };
+  });
+  const styleOf = React2.useCallback((sc) => mapStyle({ scheme: sc, brand, lang, ...region !== void 0 ? { region } : {}, ...world !== void 0 ? { world } : {} }), [brand, lang, region, world]);
+  React2.useEffect(() => {
+    if (!host.current) return;
+    let alive = true;
+    let created = null;
+    (hasWebGL() ? loadEngine() : Promise.reject(new Error("no WebGL"))).then((ml) => {
+      if (!alive || !host.current) return;
+      created = new ml.Map({
+        container: host.current,
+        style: styleOf(scheme),
+        center: [...center],
+        zoom,
+        interactive,
+        attributionControl: false,
+        fadeDuration: reduce ? 0 : 300,
+        cooperativeGestures: false
+      });
+      created.getCanvas().setAttribute("aria-hidden", "true");
+      created.getCanvas().setAttribute("tabindex", "-1");
+      created.on("load", () => alive && setReady(true));
+      created.on("error", (e) => {
+        const source = e.sourceId;
+        if (alive && (source === "world" || source === "region")) setFailed(true);
+      });
+      created.on("moveend", () => {
+        const c = created.getCenter();
+        latest.current.onMoveEnd?.({ center: [c.lng, c.lat], zoom: created.getZoom() });
+      });
+      created.on("click", (e) => {
+        if (e.originalEvent.target?.closest?.("[data-kz-marker]")) return;
+        latest.current.onPress?.([e.lngLat.lng, e.lngLat.lat]);
+      });
+      setLib(ml);
+      setInstance(created);
+    }).catch(() => alive && setFailed(true));
+    return () => {
+      alive = false;
+      created?.remove();
+    };
+  }, []);
+  const first = React2.useRef(true);
+  React2.useEffect(() => {
+    if (!instance) return;
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    instance.setStyle(styleOf(scheme));
+  }, [instance, scheme, styleOf]);
+  React2.useEffect(() => {
+    if (!instance || !controlled) return;
+    const view = { center: [...center], zoom };
+    if (reduce) instance.jumpTo(view);
+    else instance.flyTo({ ...view, speed: 1.4 });
+  }, [instance, controlled, center[0], center[1], zoom, reduce]);
+  const zoomBy = (by) => instance && (reduce ? instance.setZoom(instance.getZoom() + by) : instance.zoomTo(instance.getZoom() + by, { duration: 250 }));
+  const ctx = React2.useMemo(() => ({ map: instance, lib, ready, reduce, places: registry }), [instance, lib, ready, reduce, registry]);
+  const listed = Object.entries(places);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": label,
+      className: s.root({ className }),
+      "data-ready": ready ? "" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (e.target !== e.currentTarget || !instance) return;
+        if (e.key === "+" || e.key === "=") zoomBy(1);
+        else if (e.key === "-") zoomBy(-1);
+        else if (e.key.startsWith("Arrow")) {
+          e.preventDefault();
+          const step = 80;
+          const by = { ArrowUp: [0, -step], ArrowDown: [0, step], ArrowLeft: [-step, 0], ArrowRight: [step, 0] };
+          instance.panBy(by[e.key], { duration: reduce ? 0 : 200 });
+        }
+      },
+      children: [
+        !ready || failed ? /* @__PURE__ */ jsx("div", { className: s.fallback(), children: fallback }) : null,
+        /* @__PURE__ */ jsx("div", { ref: host, className: s.canvas(), style: { position: "absolute", inset: 0, visibility: failed ? "hidden" : void 0 } }),
+        controls && interactive && !failed ? /* @__PURE__ */ jsxs("div", { className: s.controls(), children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: s.control(), "aria-label": labels.zoomIn, disabled: !instance, onClick: () => zoomBy(1), children: "+" }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: s.control(), "aria-label": labels.zoomOut, disabled: !instance, onClick: () => zoomBy(-1), children: "\u2212" })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("p", { className: s.attribution(), children: [
+          /* @__PURE__ */ jsx("a", { href: MAP_ATTRIBUTION.protomapsUrl, target: "_blank", rel: "noreferrer", children: MAP_ATTRIBUTION.protomaps }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx("a", { href: MAP_ATTRIBUTION.osmUrl, target: "_blank", rel: "noreferrer", children: MAP_ATTRIBUTION.osm })
+        ] }),
+        listed.length ? /* @__PURE__ */ jsxs("div", { className: s.places(), children: [
+          /* @__PURE__ */ jsx("p", { children: labels.places }),
+          /* @__PURE__ */ jsx("ul", { children: listed.map(([id, text]) => /* @__PURE__ */ jsx("li", { children: text }, id)) })
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+}
+function Marker({ position, label, onPress, selected, size = 18, children }) {
+  const { map: m, lib, places } = useMap();
+  const s = map();
+  const id = React2.useId();
+  const [el] = React2.useState(() => typeof document === "undefined" ? null : document.createElement("div"));
+  React2.useEffect(() => {
+    places.add(id, label);
+    return () => places.remove(id);
+  }, [id, label, places]);
+  React2.useEffect(() => {
+    if (!m || !lib || !el) return;
+    el.setAttribute("data-kz-marker", "");
+    const marker = new lib.Marker({ element: el, anchor: "center" }).setLngLat([...position]).addTo(m);
+    return () => void marker.remove();
+  }, [m, lib, el, position[0], position[1]]);
+  if (!el) return null;
+  const Tag = onPress ? "button" : "span";
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        type: onPress ? "button" : void 0,
+        "aria-label": onPress ? label : void 0,
+        "aria-hidden": onPress ? void 0 : true,
+        "aria-pressed": onPress && selected !== void 0 ? selected : void 0,
+        "data-selected": selected ? "" : void 0,
+        className: s.marker(),
+        style: children ? void 0 : { width: size, height: size },
+        onClick: onPress,
+        children: [
+          children,
+          selected ? /* @__PURE__ */ jsx("span", { className: s.markerLabel(), children: label }) : null
+        ]
+      }
+    ),
+    el
+  );
+}
+function UserPosition({ position, label, accuracy }) {
+  const { map: m, lib, places } = useMap();
+  const id = React2.useId();
+  React2.useEffect(() => {
+    places.add(id, label);
+    return () => places.remove(id);
+  }, [id, label, places]);
+  React2.useEffect(() => {
+    if (!m || !lib) return;
+    const el = document.createElement("div");
+    el.className = "kz-map-user";
+    el.setAttribute("aria-hidden", "true");
+    const marker = new lib.Marker({ element: el, anchor: "center" }).setLngLat([...position]).addTo(m);
+    return () => void marker.remove();
+  }, [m, lib, position[0], position[1]]);
+  return accuracy ? /* @__PURE__ */ jsx(RadiusCircle, { center: position, radius: accuracy, tone: "soft" }) : null;
+}
+function useGeoLayer(id, data, layers2, source = {}) {
+  const { map: m, ready } = useMap();
+  const dataRef = React2.useRef(data);
+  React2.useEffect(() => {
+    dataRef.current = data;
+    const src = m?.getSource(id);
+    src?.setData?.(data);
+  }, [m, id, data]);
+  React2.useEffect(() => {
+    if (!m || !ready) return;
+    const add = () => {
+      if (m.getSource(id)) return;
+      const scheme = document.documentElement.classList.contains("light") ? "light" : "dark";
+      m.addSource(id, { type: "geojson", data: dataRef.current, ...source });
+      for (const layer of layers2(mapPalette(scheme))) m.addLayer(layer);
+    };
+    add();
+    m.on("styledata", add);
+    return () => {
+      m.off("styledata", add);
+      if (!m.getStyle()) return;
+      for (const layer of m.getStyle().layers.filter((l) => "source" in l && l.source === id)) m.removeLayer(layer.id);
+      if (m.getSource(id)) m.removeSource(id);
+    };
+  }, [m, ready, id]);
+}
+function RadiusCircle({ center, radius, tone = "accent" }) {
+  const id = `kz-circle-${React2.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const data = React2.useMemo(() => circlePolygon(center, radius), [center[0], center[1], radius]);
+  useGeoLayer(id, data, (c) => [
+    { id: `${id}-fill`, type: "fill", source: id, paint: { "fill-color": c.accent, "fill-opacity": tone === "soft" ? 0.1 : 0.14 } },
+    { id: `${id}-line`, type: "line", source: id, paint: { "line-color": c.accent, "line-width": tone === "soft" ? 1 : 2, "line-opacity": tone === "soft" ? 0.4 : 0.9, ...tone === "accent" ? { "line-dasharray": [2, 1.5] } : {} } }
+  ]);
+  return null;
+}
+function Cluster({ points, onPointPress, radius = 48 }) {
+  const { map: m, ready, reduce, places } = useMap();
+  const id = `kz-cluster-${React2.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const data = React2.useMemo(
+    () => ({ type: "FeatureCollection", features: points.map((p) => ({ type: "Feature", properties: { id: p.id, label: p.label }, geometry: { type: "Point", coordinates: [...p.position] } })) }),
+    [points]
+  );
+  React2.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]);
+  useGeoLayer(
+    id,
+    data,
+    (c) => [
+      { id: `${id}-groups`, type: "circle", source: id, filter: ["has", "point_count"], paint: { "circle-color": c.accent, "circle-opacity": 0.92, "circle-radius": ["step", ["get", "point_count"], 16, 10, 20, 50, 26], "circle-stroke-width": 3, "circle-stroke-color": c.halo } },
+      { id: `${id}-count`, type: "symbol", source: id, filter: ["has", "point_count"], layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": ["Noto Sans Medium"], "text-size": 13 }, paint: { "text-color": c.onAccent } },
+      { id: `${id}-points`, type: "circle", source: id, filter: ["!", ["has", "point_count"]], paint: { "circle-color": c.accent, "circle-radius": 7, "circle-stroke-width": 2.5, "circle-stroke-color": c.halo } }
+    ],
+    { cluster: true, clusterRadius: radius, clusterMaxZoom: 15 }
+  );
+  React2.useEffect(() => {
+    if (!m || !ready) return;
+    const openGroup = async (e) => {
+      const f = e.features?.[0];
+      if (!f) return;
+      const src = m.getSource(id);
+      const z = await src.getClusterExpansionZoom(f.properties.cluster_id);
+      const center = f.geometry.coordinates;
+      if (reduce) m.jumpTo({ center, zoom: z });
+      else m.easeTo({ center, zoom: z });
+    };
+    const pressPoint = (e) => {
+      const pid = e.features?.[0]?.properties.id;
+      const point = points.find((p) => p.id === pid);
+      if (point) onPointPress?.(point);
+    };
+    m.on("click", `${id}-groups`, openGroup);
+    m.on("click", `${id}-points`, pressPoint);
+    return () => {
+      m.off("click", `${id}-groups`, openGroup);
+      m.off("click", `${id}-points`, pressPoint);
+    };
+  }, [m, ready, id, points, onPointPress, reduce]);
+  return null;
+}
+
+// src/map/location-picker.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var locationPicker = tv({
+  slots: {
+    root: "flex flex-col gap-2",
+    frame: "relative",
+    pin: "pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-full text-accent drop-shadow-md",
+    bar: "absolute inset-x-3 bottom-8 z-10 flex flex-wrap items-center justify-between gap-2",
+    chip: "rounded-full border border-border-default bg-surface-1 px-3 py-1.5 text-xs font-semibold tabular-nums text-fg shadow-floating",
+    near: "inline-flex h-10 items-center gap-2 rounded-full border border-border-default bg-surface-1 bg-sheen px-4 text-sm font-semibold text-fg shadow-floating inset-shadow-edge transition-colors hover:border-border-strong focus-visible:outline-hidden focus-visible:focus-ring disabled:opacity-60",
+    status: "text-xs text-fg-secondary data-[tone=danger]:text-fg-danger"
+  }
+});
+var locationPickerLabels = {
+  nearMe: "Near me",
+  locating: "Finding you\u2026",
+  denied: "Location is off for this site. 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, origin: originProp = null, labels: given, className, ...map2 }) {
+  const labels = { ...locationPickerLabels, ...given };
+  const s = locationPicker();
+  const [origin, setOrigin] = React3.useState(originProp);
+  const [camera, setCamera] = React3.useState(value);
+  const [status, setStatus] = React3.useState("idle");
+  const statusId = React3.useId();
+  const nearMe = () => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) return setStatus("unavailable");
+    setStatus("locating");
+    navigator.geolocation.getCurrentPosition(
+      (p) => {
+        const here = [p.coords.longitude, p.coords.latitude];
+        setOrigin(here);
+        setCamera(here);
+        onValueChange(here);
+        setStatus("idle");
+      },
+      (e) => setStatus(e.code === 1 ? "denied" : "unavailable"),
+      { enableHighAccuracy: false, timeout: 1e4, maximumAge: 6e4 }
+    );
+  };
+  const distance = origin ? formatDistance(distanceMeters(origin, value), locale) : null;
+  const message = status === "locating" ? labels.locating : status === "denied" ? labels.denied : status === "unavailable" ? labels.unavailable : "";
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs2("div", { className: s.frame(), children: [
+      /* @__PURE__ */ jsxs2(Map, { ...map2, label, center: camera, zoom, controlled: true, onMoveEnd: (v) => onValueChange(v.center), className: "h-80", children: [
+        radius ? /* @__PURE__ */ jsx2(RadiusCircle, { center: value, radius }) : null,
+        origin ? /* @__PURE__ */ jsx2(UserPosition, { position: origin, label: labels.you }) : null
+      ] }),
+      /* @__PURE__ */ jsxs2("svg", { "aria-hidden": true, viewBox: "0 0 24 32", className: s.pin(), width: "30", height: "40", children: [
+        /* @__PURE__ */ jsx2("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: "currentColor" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "11.5", r: "4.5", fill: "var(--kz-on-accent)" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: s.bar(), children: [
+        distance ? /* @__PURE__ */ jsx2("span", { className: s.chip(), "aria-live": "polite", children: labels.distance(distance) }) : /* @__PURE__ */ jsx2("span", {}),
+        /* @__PURE__ */ jsxs2("button", { type: "button", className: s.near(), onClick: nearMe, disabled: status === "locating", "aria-describedby": message ? statusId : void 0, children: [
+          /* @__PURE__ */ jsxs2("svg", { "aria-hidden": true, viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3.5" }),
+            /* @__PURE__ */ jsx2("path", { d: "M12 2v3M12 19v3M2 12h3M19 12h3" })
+          ] }),
+          status === "locating" ? labels.locating : labels.nearMe
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { id: statusId, className: s.status(), "data-tone": status === "denied" || status === "unavailable" ? "danger" : void 0, "aria-live": "polite", children: message })
+  ] });
+}
+
+// src/map/static-map.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var staticMap = tv({
+  slots: {
+    root: "relative block h-full w-full overflow-hidden bg-surface-2",
+    svg: "absolute inset-0 h-full w-full",
+    attribution: "absolute bottom-1.5 right-1.5 rounded-md bg-surface-1/85 px-1.5 py-0.5 text-[10px] text-fg-secondary"
+  }
+});
+var W = 640;
+var H = 400;
+function StaticMap({ label, center, zoom = 12, places = [], image, className }) {
+  const s = staticMap();
+  const [cx, cy] = project(center, zoom);
+  const at = (p) => {
+    const [x, y] = project(p, zoom);
+    return [W / 2 + x - cx, H / 2 + y - cy];
+  };
+  const name = places.length ? `${label}: ${places.map((p) => p.label).join(", ")}` : label;
+  return /* @__PURE__ */ jsxs3("span", { role: "img", "aria-label": name, className: s.root({ className }), children: [
+    /* @__PURE__ */ jsxs3("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMid slice", className: s.svg(), "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("pattern", { id: "kz-map-paper", width: "48", height: "48", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx3("path", { d: "M48 0H0V48", fill: "none", stroke: "var(--kz-border-subtle)", strokeWidth: "1" }) }) }),
+      /* @__PURE__ */ jsx3("rect", { width: W, height: H, fill: "var(--kz-surface-2)" }),
+      image ? /* @__PURE__ */ jsx3("image", { href: image, x: "0", y: "0", width: W, height: H, preserveAspectRatio: "xMidYMid slice" }) : /* @__PURE__ */ jsx3("rect", { width: W, height: H, fill: "url(#kz-map-paper)" }),
+      places.map((p) => {
+        const [x, y] = at(p.position);
+        return /* @__PURE__ */ jsxs3("g", { children: [
+          /* @__PURE__ */ jsx3("circle", { cx: x, cy: y, r: "12", fill: "var(--kz-accent)", opacity: "0.18" }),
+          /* @__PURE__ */ jsx3("circle", { cx: x, cy: y, r: "7", fill: "var(--kz-accent)", stroke: "var(--kz-on-accent)", strokeWidth: "2.5" })
+        ] }, `${p.position[0]},${p.position[1]}`);
+      })
+    ] }),
+    image ? /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: s.attribution(), children: [
+      MAP_ATTRIBUTION.protomaps,
+      " \xB7 ",
+      MAP_ATTRIBUTION.osm
+    ] }) : null
+  ] });
+}
+export {
+  Cluster,
+  LocationPicker,
+  MAP_ATTRIBUTION,
+  MAP_GLYPHS,
+  MAP_TILES,
+  Map,
+  Marker,
+  REGION_FROM_ZOOM,
+  RadiusCircle,
+  StaticMap,
+  UserPosition,
+  circlePolygon,
+  configureMaps,
+  distanceMeters,
+  formatDistance,
+  locationPicker,
+  locationPickerLabels,
+  map,
+  mapAssets,
+  mapFlavor,
+  mapLabels,
+  mapPalette,
+  mapStyle,
+  mix,
+  project,
+  setMapAssetsBase,
+  staticMap,
+  useMap
+};
+//# sourceMappingURL=map.js.map