@elabs-ai/components-maps 4.1.0 → 5.0.0

package/dist/chunk-QDWWP3N7.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  resolveMapResponsive,
+  useMapBreakpoint
+} from "./chunk-W76NLFER.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+import {
+  clampShift,
+  mapAnchorGeometry
+} from "./chunk-4DANBD5B.js";
+
+// src/map-annotation/map-annotation.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NO_ROWS = [];
+var MapAnnotationRegistryContext = createContext(null);
+function byDocumentOrder(a, b) {
+  if (a.el === b.el) return 0;
+  return a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function useMapAnnotationRegistry(breakpoint) {
+  const [entries, setEntries] = useState(() => /* @__PURE__ */ new Map());
+  const register = useCallback((entry) => {
+    setEntries((prev) => {
+      const current = prev.get(entry.id);
+      if (current && current.el === entry.el && current.text === entry.text && current.hidden === entry.hidden) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(entry.id, entry);
+      return next;
+    });
+    return () => {
+      setEntries((prev) => {
+        if (!prev.has(entry.id)) return prev;
+        const next = new Map(prev);
+        next.delete(entry.id);
+        return next;
+      });
+    };
+  }, []);
+  const rows = useMemo(() => {
+    if (breakpoint !== "narrow") return NO_ROWS;
+    return [...entries.values()].filter((entry) => !entry.hidden && entry.el.isConnected).sort(byDocumentOrder).map((entry, index) => ({ id: entry.id, number: index + 1, text: entry.text }));
+  }, [entries, breakpoint]);
+  const value = useMemo(() => {
+    const numbers = new Map(rows.map((row) => [row.id, row.number]));
+    return { register, numberOf: (id) => numbers.get(id) };
+  }, [register, rows]);
+  return { value, rows };
+}
+var MapAnnotationRegistryProvider = MapAnnotationRegistryContext.Provider;
+var MapAnnotationKey = forwardRef(
+  function MapAnnotationKey2({ rows, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        "data-slot": "map-annotation-key",
+        "data-count": rows.length,
+        className: cn("m-0 flex list-none flex-col gap-1 p-0", className),
+        ...props,
+        children: rows.map((row) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-slot": "map-annotation-key-item",
+            className: "flex items-start gap-1.5 text-caption text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(NumberBadge, { number: row.number }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: row.text })
+            ]
+          },
+          row.id
+        ))
+      }
+    );
+  }
+);
+function NumberBadge({ number, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "map-annotation-number",
+      className: cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-foreground text-meta font-semibold text-background tabular-nums",
+        className
+      ),
+      children: number
+    }
+  );
+}
+var LEADER_DISTANCE = 28;
+var PLAIN_DISTANCE = 6;
+var MapAnnotation = forwardRef(function MapAnnotation2({
+  longitude,
+  latitude,
+  text,
+  anchor = "top-right",
+  connector = {},
+  showAt = true,
+  priority = 0,
+  className,
+  style,
+  ...props
+}, forwardedRef) {
+  const { map } = useMap();
+  const registry = useContext(MapAnnotationRegistryContext);
+  const breakpoint = useMapBreakpoint();
+  const id = useId();
+  const [root, setRoot] = useState(null);
+  const boxRef = useRef(null);
+  const lineRef = useRef(null);
+  const hidden = !resolveMapResponsive(showAt, breakpoint);
+  const number = registry?.numberOf(id);
+  const keyed = number !== void 0;
+  const setRefs = useCallback(
+    (node) => {
+      setRoot(node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const register = registry?.register;
+  useLayoutEffect(() => {
+    if (!register || !root) return void 0;
+    return register({ id, el: root, text, hidden });
+  }, [register, id, root, text, hidden]);
+  const distance = connector === false ? PLAIN_DISTANCE : LEADER_DISTANCE;
+  useLayoutEffect(() => {
+    if (!map || !root || hidden) return void 0;
+    const container = map.getContainer();
+    const { dx, dy, fx, fy } = mapAnchorGeometry(anchor, distance);
+    const update = () => {
+      const point = map.project([longitude, latitude]);
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      const inside = point.x >= 0 && point.y >= 0 && point.x <= width && point.y <= height;
+      root.style.visibility = inside ? "" : "hidden";
+      root.style.transform = `translate(${point.x}px, ${point.y}px)`;
+      const box = boxRef.current;
+      if (!box) return;
+      const boxWidth = box.offsetWidth;
+      const boxHeight = box.offsetHeight;
+      const left = point.x + dx + fx * boxWidth;
+      const top = point.y + dy + fy * boxHeight;
+      const { sx, sy } = clampShift(left, top, boxWidth, boxHeight, width, height);
+      box.style.transform = `translate(${dx + sx + fx * boxWidth}px, ${dy + sy + fy * boxHeight}px)`;
+      const line = lineRef.current;
+      if (line) {
+        line.setAttribute("x2", String(dx + sx));
+        line.setAttribute("y2", String(dy + sy));
+      }
+    };
+    update();
+    map.on("move", update);
+    map.on("resize", update);
+    return () => {
+      map.off("move", update);
+      map.off("resize", update);
+    };
+  }, [map, root, hidden, keyed, anchor, distance, longitude, latitude, text]);
+  const arrowId = `${id}-arrow`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      "data-slot": "map-annotation",
+      "data-display": hidden ? "hidden" : keyed ? "keyed" : "painted",
+      hidden,
+      className: cn("pointer-events-none absolute", className),
+      style: { left: 0, top: 0, zIndex: 1 + Math.max(0, Math.min(8, priority)), ...style },
+      ...props,
+      children: keyed ? /* @__PURE__ */ jsx(NumberBadge, { number, className: "absolute -translate-x-1/2 -translate-y-1/2" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        connector !== false && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            "data-slot": "map-annotation-connector",
+            className: "absolute overflow-visible text-foreground",
+            width: 1,
+            height: 1,
+            children: [
+              connector.arrow && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+                "marker",
+                {
+                  id: arrowId,
+                  viewBox: "0 0 8 8",
+                  refX: 0,
+                  refY: 4,
+                  markerWidth: 8,
+                  markerHeight: 8,
+                  orient: "auto",
+                  children: /* @__PURE__ */ jsx("path", { d: "M8 0 L0 4 L8 8 Z", fill: "currentColor" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "line",
+                {
+                  ref: lineRef,
+                  x1: 0,
+                  y1: 0,
+                  x2: 0,
+                  y2: 0,
+                  stroke: "currentColor",
+                  strokeWidth: 1,
+                  markerStart: connector.arrow ? `url(#${arrowId})` : void 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: boxRef,
+            "data-slot": "map-annotation-text",
+            className: "absolute w-max max-w-48 rounded-sm bg-background/85 px-1 text-caption text-foreground",
+            children: text
+          }
+        )
+      ] })
+    }
+  );
+});
+
+export {
+  useMapAnnotationRegistry,
+  MapAnnotationRegistryProvider,
+  MapAnnotationKey,
+  MapAnnotation
+};
+//# sourceMappingURL=chunk-QDWWP3N7.js.map

package/dist/chunk-QDWWP3N7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-annotation/map-annotation.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { useMap } from \"../map-canvas/map-context\";\nimport {\n  type MapBreakpoint,\n  type MapResponsive,\n  useMapBreakpoint,\n  resolveMapResponsive,\n} from \"../lib/use-map-breakpoint\";\nimport { type MapLabelAnchor, clampShift, mapAnchorGeometry } from \"./anchor\";\n\n// ── Registry ─────────────────────────────────────────────────────────────────\n//\n// Every `<MapAnnotation>` in a canvas registers here, so the canvas can number\n// them and render ONE key under the map at `narrow`. Numbers follow reading\n// order — the annotations' DOM order, which is their JSX order — and skip an\n// annotation hidden at the current tier (the RM-111 rule `charts` uses).\n\ninterface AnnotationEntry {\n  id: string;\n  el: HTMLElement;\n  text: ReactNode;\n  hidden: boolean;\n}\n\n/** One row of the narrow key. */\nexport interface MapAnnotationKeyRow {\n  id: string;\n  number: number;\n  text: ReactNode;\n}\n\ninterface MapAnnotationRegistryValue {\n  register: (entry: AnnotationEntry) => () => void;\n  /** The number an annotation shows at this tier, or `undefined` when it paints its text. */\n  numberOf: (id: string) => number | undefined;\n}\n\nconst NO_ROWS: MapAnnotationKeyRow[] = [];\n\nconst MapAnnotationRegistryContext = createContext<MapAnnotationRegistryValue | null>(null);\n\nfunction byDocumentOrder(a: AnnotationEntry, b: AnnotationEntry): number {\n  if (a.el === b.el) return 0;\n  return a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n}\n\n/**\n * Internal: the annotation registry a `<MapCanvas>` owns. Returns the context\n * value to provide and the key rows to render under the map (empty unless the\n * tier is `narrow`).\n */\nexport function useMapAnnotationRegistry(breakpoint: MapBreakpoint): {\n  value: MapAnnotationRegistryValue;\n  rows: MapAnnotationKeyRow[];\n} {\n  const [entries, setEntries] = useState<ReadonlyMap<string, AnnotationEntry>>(() => new Map());\n\n  const register = useCallback((entry: AnnotationEntry) => {\n    setEntries((prev) => {\n      const current = prev.get(entry.id);\n      if (\n        current &&\n        current.el === entry.el &&\n        current.text === entry.text &&\n        current.hidden === entry.hidden\n      ) {\n        return prev;\n      }\n      const next = new Map(prev);\n      next.set(entry.id, entry);\n      return next;\n    });\n    return () => {\n      setEntries((prev) => {\n        if (!prev.has(entry.id)) return prev;\n        const next = new Map(prev);\n        next.delete(entry.id);\n        return next;\n      });\n    };\n  }, []);\n\n  const rows = useMemo<MapAnnotationKeyRow[]>(() => {\n    if (breakpoint !== \"narrow\") return NO_ROWS;\n    return [...entries.values()]\n      .filter((entry) => !entry.hidden && entry.el.isConnected)\n      .sort(byDocumentOrder)\n      .map((entry, index) => ({ id: entry.id, number: index + 1, text: entry.text }));\n  }, [entries, breakpoint]);\n\n  const value = useMemo<MapAnnotationRegistryValue>(() => {\n    const numbers = new Map(rows.map((row) => [row.id, row.number]));\n    return { register, numberOf: (id) => numbers.get(id) };\n  }, [register, rows]);\n\n  return { value, rows };\n}\n\n/** Internal: provides the registry `useMapAnnotationRegistry` built. */\nexport const MapAnnotationRegistryProvider = MapAnnotationRegistryContext.Provider;\n\n// ── Key ──────────────────────────────────────────────────────────────────────\n\nexport interface MapAnnotationKeyProps extends HTMLAttributes<HTMLOListElement> {\n  /** The rows, in reading order. */\n  rows: readonly MapAnnotationKeyRow[];\n}\n\n/**\n * The numbered list `<MapCanvas>` renders under the map at `narrow`, where each\n * `<MapAnnotation>` shows only its number on the map: \"1 Lake Ontario, …\".\n * NOT `aria-hidden` — at `narrow` this list is the only place the text lives.\n */\nexport const MapAnnotationKey = forwardRef<HTMLOListElement, MapAnnotationKeyProps>(\n  function MapAnnotationKey({ rows, className, ...props }, ref) {\n    return (\n      <ol\n        ref={ref}\n        data-slot=\"map-annotation-key\"\n        data-count={rows.length}\n        className={cn(\"m-0 flex list-none flex-col gap-1 p-0\", className)}\n        {...props}\n      >\n        {rows.map((row) => (\n          <li\n            key={row.id}\n            data-slot=\"map-annotation-key-item\"\n            className=\"flex items-start gap-1.5 text-caption text-foreground\"\n          >\n            <NumberBadge number={row.number} />\n            <span className=\"min-w-0 break-words\">{row.text}</span>\n          </li>\n        ))}\n      </ol>\n    );\n  },\n);\n\nfunction NumberBadge({ number, className }: { number: number; className?: string }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"map-annotation-number\"\n      className={cn(\n        \"inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-foreground text-meta font-semibold text-background tabular-nums\",\n        className,\n      )}\n    >\n      {number}\n    </span>\n  );\n}\n\n// ── Annotation ───────────────────────────────────────────────────────────────\n\n/** A leader line from the point to the text; `arrow` puts an arrowhead at the point. */\nexport interface MapAnnotationConnector {\n  arrow?: boolean;\n}\n\nexport interface MapAnnotationProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Longitude of the point the note is about. */\n  longitude: number;\n  /** Latitude of the point the note is about. */\n  latitude: number;\n  /** The note. Plain text reads best; it moves into the key at `narrow`. */\n  text: ReactNode;\n  /** Where the text sits relative to the point (default `\"top-right\"`). */\n  anchor?: MapLabelAnchor;\n  /**\n   * The leader line from the point to the text (default: a plain line). Pass\n   * `false` to set the text right beside the point with no line.\n   */\n  connector?: MapAnnotationConnector | false;\n  /**\n   * Whether the note shows at a tier (default `true` everywhere). A hidden note\n   * takes no number, so the key stays gap-free.\n   */\n  showAt?: MapResponsive<boolean>;\n  /** Paint order among annotations: a higher one paints on top (0–8, default 0). */\n  priority?: number;\n}\n\nconst LEADER_DISTANCE = 28;\nconst PLAIN_DISTANCE = 6;\n\n/**\n * A text note pinned to a lon / lat with a leader line — an HTML overlay that\n * follows the map. At `narrow` the text gives way to a numbered marker and\n * `<MapCanvas>` lists the notes, in reading order, in a key under the map.\n * The text box clamps inside the map on both axes. Render inside `<MapCanvas>`.\n */\nexport const MapAnnotation = forwardRef<HTMLDivElement, MapAnnotationProps>(function MapAnnotation(\n  {\n    longitude,\n    latitude,\n    text,\n    anchor = \"top-right\",\n    connector = {},\n    showAt = true,\n    priority = 0,\n    className,\n    style,\n    ...props\n  },\n  forwardedRef,\n) {\n  const { map } = useMap();\n  const registry = useContext(MapAnnotationRegistryContext);\n  const breakpoint = useMapBreakpoint();\n  const id = useId();\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const boxRef = useRef<HTMLDivElement>(null);\n  const lineRef = useRef<SVGLineElement>(null);\n\n  const hidden = !resolveMapResponsive(showAt, breakpoint);\n  const number = registry?.numberOf(id);\n  const keyed = number !== undefined;\n\n  const setRefs = useCallback(\n    (node: HTMLDivElement | null) => {\n      setRoot(node);\n      if (typeof forwardedRef === \"function\") forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef],\n  );\n\n  // Depend on the stable `register`, never the registry value: that changes\n  // with every registration and would re-register in a loop.\n  const register = registry?.register;\n  useLayoutEffect(() => {\n    if (!register || !root) return undefined;\n    return register({ id, el: root, text, hidden });\n  }, [register, id, root, text, hidden]);\n\n  const distance = connector === false ? PLAIN_DISTANCE : LEADER_DISTANCE;\n\n  // Follow the map. Transforms are written straight to the DOM on every move\n  // (no React render per frame); the text box is measured and clamped inside\n  // the map, and the leader line's end moves with it.\n  useLayoutEffect(() => {\n    if (!map || !root || hidden) return undefined;\n    const container = map.getContainer();\n    const { dx, dy, fx, fy } = mapAnchorGeometry(anchor, distance);\n    const update = () => {\n      const point = map.project([longitude, latitude]);\n      const width = container.clientWidth;\n      const height = container.clientHeight;\n      const inside = point.x >= 0 && point.y >= 0 && point.x <= width && point.y <= height;\n      root.style.visibility = inside ? \"\" : \"hidden\";\n      root.style.transform = `translate(${point.x}px, ${point.y}px)`;\n      const box = boxRef.current;\n      if (!box) return;\n      const boxWidth = box.offsetWidth;\n      const boxHeight = box.offsetHeight;\n      const left = point.x + dx + fx * boxWidth;\n      const top = point.y + dy + fy * boxHeight;\n      const { sx, sy } = clampShift(left, top, boxWidth, boxHeight, width, height);\n      box.style.transform = `translate(${dx + sx + fx * boxWidth}px, ${dy + sy + fy * boxHeight}px)`;\n      const line = lineRef.current;\n      if (line) {\n        line.setAttribute(\"x2\", String(dx + sx));\n        line.setAttribute(\"y2\", String(dy + sy));\n      }\n    };\n    update();\n    map.on(\"move\", update);\n    map.on(\"resize\", update);\n    return () => {\n      map.off(\"move\", update);\n      map.off(\"resize\", update);\n    };\n  }, [map, root, hidden, keyed, anchor, distance, longitude, latitude, text]);\n\n  const arrowId = `${id}-arrow`;\n\n  return (\n    <div\n      ref={setRefs}\n      data-slot=\"map-annotation\"\n      data-display={hidden ? \"hidden\" : keyed ? \"keyed\" : \"painted\"}\n      hidden={hidden}\n      className={cn(\"pointer-events-none absolute\", className)}\n      // Geographic overlay: a projected pixel offset from the map's top-left\n      // corner, physical in every writing direction (like MapLibre's markers).\n      style={{ left: 0, top: 0, zIndex: 1 + Math.max(0, Math.min(8, priority)), ...style }}\n      {...props}\n    >\n      {keyed ? (\n        <NumberBadge number={number} className=\"absolute -translate-x-1/2 -translate-y-1/2\" />\n      ) : (\n        <>\n          {connector !== false && (\n            <svg\n              aria-hidden=\"true\"\n              data-slot=\"map-annotation-connector\"\n              className=\"absolute overflow-visible text-foreground\"\n              width={1}\n              height={1}\n            >\n              {connector.arrow && (\n                <defs>\n                  <marker\n                    id={arrowId}\n                    viewBox=\"0 0 8 8\"\n                    refX={0}\n                    refY={4}\n                    markerWidth={8}\n                    markerHeight={8}\n                    orient=\"auto\"\n                  >\n                    <path d=\"M8 0 L0 4 L8 8 Z\" fill=\"currentColor\" />\n                  </marker>\n                </defs>\n              )}\n              <line\n                ref={lineRef}\n                x1={0}\n                y1={0}\n                x2={0}\n                y2={0}\n                stroke=\"currentColor\"\n                strokeWidth={1}\n                markerStart={connector.arrow ? `url(#${arrowId})` : undefined}\n              />\n            </svg>\n          )}\n          <div\n            ref={boxRef}\n            data-slot=\"map-annotation-text\"\n            className=\"absolute w-max max-w-48 rounded-sm bg-background/85 px-1 text-caption text-foreground\"\n          >\n            {text}\n          </div>\n        </>\n      )}\n    </div>\n  );\n});\n"],"mappings":"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","names":["MapAnnotationKey","MapAnnotation"]}

package/dist/chunk-QU33KPMP.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-QU33KPMP.js.map

package/dist/chunk-QU33KPMP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-RK4BUMHS.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-RK4BUMHS.js.map

package/dist/chunk-RK4BUMHS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-RNSLG64F.js

@@ -0,0 +1,26 @@
+"use client";
+
+// src/lib/merge-hover-paint.ts
+function mergeFeatureStatePaint(paint, states) {
+  if (!states.hover && !states.selected) return paint;
+  const merged = { ...paint };
+  for (const state of ["hover", "selected"]) {
+    const statePaint = states[state];
+    if (!statePaint) continue;
+    for (const [key, stateValue] of Object.entries(statePaint)) {
+      if (stateValue === void 0) continue;
+      const baseValue = merged[key];
+      merged[key] = baseValue === void 0 ? stateValue : ["case", ["boolean", ["feature-state", state], false], stateValue, baseValue];
+    }
+  }
+  return merged;
+}
+function mergeHoverPaint(paint, hoverPaint) {
+  return mergeFeatureStatePaint(paint, { hover: hoverPaint });
+}
+
+export {
+  mergeFeatureStatePaint,
+  mergeHoverPaint
+};
+//# sourceMappingURL=chunk-RNSLG64F.js.map

package/dist/chunk-RNSLG64F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/merge-hover-paint.ts"],"sourcesContent":["/** Per-feature paint states a layer can express through MapLibre feature-state. */\nexport interface FeatureStatePaint<T> {\n  /** Applied to the feature under the cursor or keyboard focus. */\n  hover?: T;\n  /** Applied to the selected feature(s); wins over `hover`. */\n  selected?: T;\n}\n\n/**\n * Merge hover/selected paint into base paint as MapLibre `case` expressions\n * keyed on per-feature feature-state, so only the affected features change\n * appearance. `selected` is tested first, so a selected feature keeps looking\n * selected while the cursor is over it.\n *\n * Only paint properties that accept feature-state belong here (`fill-color`,\n * `fill-opacity`, `line-color`, `line-width`, …). `fill-pattern` and\n * `line-dasharray` do NOT: they read feature PROPERTIES, which is why status\n * texture and selection are separate channels.\n */\nexport function mergeFeatureStatePaint<T extends Record<string, unknown>>(\n  paint: T,\n  states: FeatureStatePaint<T>,\n): T {\n  // Identity preserved when there is nothing to merge: callers memoize on it.\n  if (!states.hover && !states.selected) return paint;\n\n  const merged: Record<string, unknown> = { ...paint };\n\n  // Applied hover-first so that `selected` ends up as the OUTER case.\n  for (const state of [\"hover\", \"selected\"] as const) {\n    const statePaint = states[state];\n    if (!statePaint) continue;\n    for (const [key, stateValue] of Object.entries(statePaint)) {\n      if (stateValue === undefined) continue;\n      const baseValue = merged[key];\n      merged[key] =\n        baseValue === undefined\n          ? stateValue\n          : [\"case\", [\"boolean\", [\"feature-state\", state], false], stateValue, baseValue];\n    }\n  }\n\n  return merged as T;\n}\n\n/** Hover-only shorthand for {@link mergeFeatureStatePaint}. */\nexport function mergeHoverPaint<T extends Record<string, unknown>>(\n  paint: T,\n  hoverPaint: T | undefined,\n): T {\n  return mergeFeatureStatePaint(paint, { hover: hoverPaint });\n}\n"],"mappings":";;;AAmBO,SAAS,uBACd,OACA,QACG;AAEH,MAAI,CAAC,OAAO,SAAS,CAAC,OAAO,SAAU,QAAO;AAE9C,QAAM,SAAkC,EAAE,GAAG,MAAM;AAGnD,aAAW,SAAS,CAAC,SAAS,UAAU,GAAY;AAClD,UAAM,aAAa,OAAO,KAAK;AAC/B,QAAI,CAAC,WAAY;AACjB,eAAW,CAAC,KAAK,UAAU,KAAK,OAAO,QAAQ,UAAU,GAAG;AAC1D,UAAI,eAAe,OAAW;AAC9B,YAAM,YAAY,OAAO,GAAG;AAC5B,aAAO,GAAG,IACR,cAAc,SACV,aACA,CAAC,QAAQ,CAAC,WAAW,CAAC,iBAAiB,KAAK,GAAG,KAAK,GAAG,YAAY,SAAS;AAAA,IACpF;AAAA,EACF;AAEA,SAAO;AACT;AAGO,SAAS,gBACd,OACA,YACG;AACH,SAAO,uBAAuB,OAAO,EAAE,OAAO,WAAW,CAAC;AAC5D;","names":[]}

package/dist/chunk-RV673TB4.js

@@ -0,0 +1,68 @@
+"use client";
+import {
+  PLAN_STATUSES,
+  PLAN_STATUS_ENCODING
+} from "./chunk-E65Z3MSV.js";
+
+// src/map-plan/map-plan-legend.tsx
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MapPlanLegend({
+  labels,
+  statuses = PLAN_STATUSES,
+  counts,
+  label,
+  className
+}) {
+  const entries = statuses.filter((status) => labels[status]);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "map-plan-legend",
+      "aria-label": label,
+      className: cn("flex flex-wrap items-center gap-x-5 gap-y-2", className),
+      children: entries.map((status) => {
+        const encoding = PLAN_STATUS_ENCODING[status];
+        const Icon = encoding.icon;
+        const count = counts?.[status];
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-slot": "map-plan-legend-item",
+            "data-status": status,
+            className: "flex items-center gap-2 text-caption text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "map-plan-legend-swatch",
+                  "aria-hidden": "true",
+                  className: cn(
+                    "inline-block size-3 rounded-xs",
+                    encoding.markClass,
+                    // The outline style, as the swatch's own border: the same
+                    // second channel the shape on the map carries.
+                    encoding.dash === "solid" && "border border-foreground/40",
+                    encoding.dash === "dotted" && "border border-dotted border-foreground/70",
+                    encoding.dash === "dashed" && "border border-dashed border-foreground/70",
+                    encoding.dash === "dot-dash" && "border-2 border-dashed border-foreground/70"
+                  )
+                }
+              ),
+              Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-3.5", encoding.textClass), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: labels[status] }),
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: "tabular-nums text-muted-foreground", children: count })
+            ]
+          },
+          status
+        );
+      })
+    }
+  );
+}
+
+export {
+  MapPlanLegend
+};
+//# sourceMappingURL=chunk-RV673TB4.js.map

package/dist/chunk-RV673TB4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-plan/map-plan-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { PLAN_STATUSES, PLAN_STATUS_ENCODING, type PlanStatus } from \"../lib/plan-status\";\n\n/** Words for each status, supplied by the consumer so they can be localized. */\nexport type PlanStatusLabels = Partial<Record<PlanStatus, string>>;\n\nexport interface MapPlanLegendProps {\n  /** The word for each status. A status with no word is left out of the legend. */\n  labels: PlanStatusLabels;\n  /** Only show these statuses, in this order. Defaults to all four, in table order. */\n  statuses?: readonly PlanStatus[];\n  /** Optional count per status, e.g. how many rooms are free right now. */\n  counts?: Partial<Record<PlanStatus, number>>;\n  /** Accessible name for the legend as a whole. */\n  label?: string;\n  className?: string;\n}\n\n/**\n * The key to the plan's status channels — and the place a sighted user learns\n * that the dashes and textures mean something.\n *\n * Each entry repeats the status three ways: the tone as a swatch, the outline\n * style as a rule under it, and the word. The two states that must never be\n * confused with a working one also carry their glyph. In greyscale the outline\n * styles and the words still tell them apart.\n */\nexport function MapPlanLegend({\n  labels,\n  statuses = PLAN_STATUSES,\n  counts,\n  label,\n  className,\n}: MapPlanLegendProps) {\n  const entries = statuses.filter((status) => labels[status]);\n  if (entries.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"map-plan-legend\"\n      aria-label={label}\n      className={cn(\"flex flex-wrap items-center gap-x-5 gap-y-2\", className)}\n    >\n      {entries.map((status) => {\n        const encoding = PLAN_STATUS_ENCODING[status];\n        const Icon = encoding.icon;\n        const count = counts?.[status];\n\n        return (\n          <li\n            key={status}\n            data-slot=\"map-plan-legend-item\"\n            data-status={status}\n            className=\"flex items-center gap-2 text-caption text-foreground\"\n          >\n            <span\n              data-slot=\"map-plan-legend-swatch\"\n              aria-hidden=\"true\"\n              className={cn(\n                \"inline-block size-3 rounded-xs\",\n                encoding.markClass,\n                // The outline style, as the swatch's own border: the same\n                // second channel the shape on the map carries.\n                encoding.dash === \"solid\" && \"border border-foreground/40\",\n                encoding.dash === \"dotted\" && \"border border-dotted border-foreground/70\",\n                encoding.dash === \"dashed\" && \"border border-dashed border-foreground/70\",\n                encoding.dash === \"dot-dash\" && \"border-2 border-dashed border-foreground/70\",\n              )}\n            />\n            {Icon && <Icon className={cn(\"size-3.5\", encoding.textClass)} aria-hidden=\"true\" />}\n            <span>{labels[status]}</span>\n            {count !== undefined && (\n              <span className=\"tabular-nums text-muted-foreground\">{count}</span>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;AAEA,SAAS,UAAU;AAkDT,SAME,KANF;AAtBH,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,UAAU,SAAS,OAAO,CAAC,WAAW,OAAO,MAAM,CAAC;AAC1D,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW,GAAG,+CAA+C,SAAS;AAAA,MAErE,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,WAAW,qBAAqB,MAAM;AAC5C,cAAM,OAAO,SAAS;AACtB,cAAM,QAAQ,SAAS,MAAM;AAE7B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,aAAU;AAAA,YACV,eAAa;AAAA,YACb,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,eAAY;AAAA,kBACZ,WAAW;AAAA,oBACT;AAAA,oBACA,SAAS;AAAA;AAAA;AAAA,oBAGT,SAAS,SAAS,WAAW;AAAA,oBAC7B,SAAS,SAAS,YAAY;AAAA,oBAC9B,SAAS,SAAS,YAAY;AAAA,oBAC9B,SAAS,SAAS,cAAc;AAAA,kBAClC;AAAA;AAAA,cACF;AAAA,cACC,QAAQ,oBAAC,QAAK,WAAW,GAAG,YAAY,SAAS,SAAS,GAAG,eAAY,QAAO;AAAA,cACjF,oBAAC,UAAM,iBAAO,MAAM,GAAE;AAAA,cACrB,UAAU,UACT,oBAAC,UAAK,WAAU,sCAAsC,iBAAM;AAAA;AAAA;AAAA,UAtBzD;AAAA,QAwBP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-S7N2WMVT.js

@@ -0,0 +1,180 @@
+"use client";
+import {
+  useMapFrame
+} from "./chunk-W76NLFER.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+
+// src/map-controls/map-controls.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Locate, Maximize, Minus, Plus, Scan } from "lucide-react";
+import { Spinner, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var positionClasses = {
+  "top-left": "top-2 left-2",
+  "top-right": "top-2 right-2",
+  "bottom-left": "bottom-2 left-2",
+  "bottom-right": "bottom-10 right-2"
+};
+function ControlGroup({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y overflow-hidden rounded-md bg-surface-elevated shadow-ring-sm", children });
+}
+function ControlButton({
+  onClick,
+  label,
+  children,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      "aria-label": label,
+      type: "button",
+      className: cn(
+        "flex size-8 items-center justify-center text-foreground transition-colors duration-fast",
+        "hover:bg-surface-muted",
+        "focus-ring-inset",
+        "disabled:pointer-events-none disabled:opacity-50"
+      ),
+      disabled,
+      children
+    }
+  );
+}
+function MapControls({
+  position = "bottom-right",
+  showZoom,
+  showCompass = false,
+  showLocate = false,
+  showFullscreen = false,
+  showFit,
+  fitBounds,
+  className,
+  onLocate,
+  onLocateError,
+  onFit
+}) {
+  const { map, plan } = useMap();
+  const { t } = useLocale();
+  const { interactive } = useMapFrame();
+  const zoomVisible = showZoom ?? interactive;
+  const [waitingForLocation, setWaitingForLocation] = useState(false);
+  const fitVisible = showFit ?? plan != null;
+  const handleZoomIn = useCallback(() => {
+    map?.zoomTo(map.getZoom() + 1, { duration: 300 });
+  }, [map]);
+  const handleZoomOut = useCallback(() => {
+    map?.zoomTo(map.getZoom() - 1, { duration: 300 });
+  }, [map]);
+  const handleResetBearing = useCallback(() => {
+    map?.resetNorthPitch({ duration: 300 });
+  }, [map]);
+  const handleLocate = useCallback(() => {
+    if (!("geolocation" in navigator)) return;
+    setWaitingForLocation(true);
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const coords = {
+          longitude: pos.coords.longitude,
+          latitude: pos.coords.latitude
+        };
+        map?.flyTo({
+          center: [coords.longitude, coords.latitude],
+          zoom: 14,
+          duration: 1500
+        });
+        onLocate?.(coords);
+        setWaitingForLocation(false);
+      },
+      (error) => {
+        onLocateError?.(error);
+        setWaitingForLocation(false);
+      }
+    );
+  }, [map, onLocate, onLocateError]);
+  const handleFit = useCallback(() => {
+    const bounds = fitBounds ?? plan?.bounds;
+    if (!map || !bounds) return;
+    map.fitBounds(bounds, { padding: 24, duration: 300 });
+    onFit?.();
+  }, [fitBounds, map, onFit, plan]);
+  const handleFullscreen = useCallback(() => {
+    const container = map?.getContainer();
+    if (!container) return;
+    if (document.fullscreenElement) {
+      void document.exitFullscreen();
+    } else {
+      void container.requestFullscreen();
+    }
+  }, [map]);
+  if (!zoomVisible && !fitVisible && !showCompass && !showLocate && !showFullscreen) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("absolute z-10 flex flex-col gap-1.5", positionClasses[position], className),
+      children: [
+        zoomVisible && /* @__PURE__ */ jsxs(ControlGroup, { children: [
+          /* @__PURE__ */ jsx(ControlButton, { onClick: handleZoomIn, label: t("maps.controls.zoomIn"), children: /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx(ControlButton, { onClick: handleZoomOut, label: t("maps.controls.zoomOut"), children: /* @__PURE__ */ jsx(Minus, { className: "size-4", "aria-hidden": "true" }) })
+        ] }),
+        showCompass && /* @__PURE__ */ jsx(ControlGroup, { children: /* @__PURE__ */ jsx(CompassButton, { onClick: handleResetBearing }) }),
+        showLocate && /* @__PURE__ */ jsx(ControlGroup, { children: /* @__PURE__ */ jsx(
+          ControlButton,
+          {
+            onClick: handleLocate,
+            label: t("maps.controls.locate"),
+            disabled: waitingForLocation,
+            children: waitingForLocation ? /* @__PURE__ */ jsx(Spinner, { label: t("maps.controls.locating"), className: "size-4 text-foreground" }) : /* @__PURE__ */ jsx(Locate, { className: "size-4", "aria-hidden": "true" })
+          }
+        ) }),
+        fitVisible && /* @__PURE__ */ jsx(ControlGroup, { children: /* @__PURE__ */ jsx(ControlButton, { onClick: handleFit, label: t("maps.controls.fit"), children: /* @__PURE__ */ jsx(Scan, { className: "size-4", "aria-hidden": "true" }) }) }),
+        showFullscreen && /* @__PURE__ */ jsx(ControlGroup, { children: /* @__PURE__ */ jsx(ControlButton, { onClick: handleFullscreen, label: t("maps.controls.fullscreen"), children: /* @__PURE__ */ jsx(Maximize, { className: "size-4", "aria-hidden": "true" }) }) })
+      ]
+    }
+  );
+}
+function CompassButton({ onClick }) {
+  const { map } = useMap();
+  const { t } = useLocale();
+  const compassRef = useRef(null);
+  useEffect(() => {
+    if (!map || !compassRef.current) return;
+    const compass = compassRef.current;
+    const updateRotation = () => {
+      const bearing = map.getBearing();
+      const pitch = map.getPitch();
+      compass.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`;
+    };
+    map.on("rotate", updateRotation);
+    map.on("pitch", updateRotation);
+    updateRotation();
+    return () => {
+      map.off("rotate", updateRotation);
+      map.off("pitch", updateRotation);
+    };
+  }, [map]);
+  return /* @__PURE__ */ jsx(ControlButton, { onClick, label: t("maps.controls.resetBearing"), children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: compassRef,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      className: "size-5 transition-transform duration-fast",
+      style: { transformStyle: "preserve-3d" },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 2L16 12H12V2Z", className: "fill-destructive" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2L8 12H12V2Z", className: "fill-destructive/50" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 22L16 12H12V22Z", className: "fill-muted-foreground/60" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 22L8 12H12V22Z", className: "fill-muted-foreground/30" })
+      ]
+    }
+  ) });
+}
+
+export {
+  MapControls
+};
+//# sourceMappingURL=chunk-S7N2WMVT.js.map

package/dist/chunk-S7N2WMVT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-controls/map-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Locate, Maximize, Minus, Plus, Scan } from \"lucide-react\";\nimport { Spinner, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { useMapFrame } from \"../lib/use-map-breakpoint\";\nimport { useMap } from \"../map-canvas/map-context\";\n\nexport interface MapControlsProps {\n  /** Position of the controls on the map (default: \"bottom-right\"). */\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n  /**\n   * Show zoom in/out buttons. Default: true on an interactive map, false on a\n   * static one (`<MapCanvas interactive={false}>`), whose whole point is a\n   * fixed view — set `showZoom` explicitly to override either way.\n   */\n  showZoom?: boolean;\n  /** Show a compass button to reset bearing/pitch (default: false). */\n  showCompass?: boolean;\n  /** Show a locate button to fly to the user's location (default: false). */\n  showLocate?: boolean;\n  /** Show a fullscreen toggle button (default: false). */\n  showFullscreen?: boolean;\n  /**\n   * Show a button that frames the whole plan again — a plan map has an edge to\n   * come back to, so this defaults to ON there and off on a geographic map.\n   */\n  showFit?: boolean;\n  /**\n   * What the fit button frames. Defaults to the plan's own extent; pass bounds\n   * to frame something else (one wing, the selected cluster).\n   */\n  fitBounds?: [[number, number], [number, number]];\n  /** Called after the camera has been asked to frame the plan. */\n  onFit?: () => void;\n  /** Additional CSS classes for the controls container. */\n  className?: string;\n  /** Callback with user coordinates when located. */\n  onLocate?: (coords: { longitude: number; latitude: number }) => void;\n  /** Callback when geolocation fails or is denied. */\n  onLocateError?: (error: GeolocationPositionError) => void;\n}\n\n// bottom-right sits above MapLibre's attribution control — keep it visible.\nconst positionClasses = {\n  \"top-left\": \"top-2 left-2\",\n  \"top-right\": \"top-2 right-2\",\n  \"bottom-left\": \"bottom-2 left-2\",\n  \"bottom-right\": \"bottom-10 right-2\",\n};\n\nfunction ControlGroup({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"flex flex-col divide-y overflow-hidden rounded-md bg-surface-elevated shadow-ring-sm\">\n      {children}\n    </div>\n  );\n}\n\nfunction ControlButton({\n  onClick,\n  label,\n  children,\n  disabled = false,\n}: {\n  onClick: () => void;\n  label: string;\n  children: ReactNode;\n  disabled?: boolean;\n}) {\n  return (\n    <button\n      onClick={onClick}\n      aria-label={label}\n      type=\"button\"\n      className={cn(\n        \"flex size-8 items-center justify-center text-foreground transition-colors duration-fast\",\n        \"hover:bg-surface-muted\",\n        \"focus-ring-inset\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n      )}\n      disabled={disabled}\n    >\n      {children}\n    </button>\n  );\n}\n\n/** Branded zoom / compass / locate / fullscreen controls. Render inside `<MapCanvas>`. */\nexport function MapControls({\n  position = \"bottom-right\",\n  showZoom,\n  showCompass = false,\n  showLocate = false,\n  showFullscreen = false,\n  showFit,\n  fitBounds,\n  className,\n  onLocate,\n  onLocateError,\n  onFit,\n}: MapControlsProps) {\n  const { map, plan } = useMap();\n  const { t } = useLocale();\n  const { interactive } = useMapFrame();\n  // A static map (`interactive={false}`) is a fixed editorial view: zoom chrome\n  // invites a gesture the map will not answer, and a click leaves the reader on\n  // a frame they cannot pan back from. The host may still ask for it.\n  const zoomVisible = showZoom ?? interactive;\n  const [waitingForLocation, setWaitingForLocation] = useState(false);\n  const fitVisible = showFit ?? plan != null;\n\n  const handleZoomIn = useCallback(() => {\n    map?.zoomTo(map.getZoom() + 1, { duration: 300 });\n  }, [map]);\n\n  const handleZoomOut = useCallback(() => {\n    map?.zoomTo(map.getZoom() - 1, { duration: 300 });\n  }, [map]);\n\n  const handleResetBearing = useCallback(() => {\n    map?.resetNorthPitch({ duration: 300 });\n  }, [map]);\n\n  const handleLocate = useCallback(() => {\n    if (!(\"geolocation\" in navigator)) return;\n    setWaitingForLocation(true);\n    navigator.geolocation.getCurrentPosition(\n      (pos) => {\n        const coords = {\n          longitude: pos.coords.longitude,\n          latitude: pos.coords.latitude,\n        };\n        map?.flyTo({\n          center: [coords.longitude, coords.latitude],\n          zoom: 14,\n          duration: 1500,\n        });\n        onLocate?.(coords);\n        setWaitingForLocation(false);\n      },\n      (error) => {\n        onLocateError?.(error);\n        setWaitingForLocation(false);\n      },\n    );\n  }, [map, onLocate, onLocateError]);\n\n  const handleFit = useCallback(() => {\n    const bounds = fitBounds ?? plan?.bounds;\n    if (!map || !bounds) return;\n    map.fitBounds(bounds, { padding: 24, duration: 300 });\n    onFit?.();\n  }, [fitBounds, map, onFit, plan]);\n\n  const handleFullscreen = useCallback(() => {\n    const container = map?.getContainer();\n    if (!container) return;\n    if (document.fullscreenElement) {\n      void document.exitFullscreen();\n    } else {\n      void container.requestFullscreen();\n    }\n  }, [map]);\n\n  // Nothing to show (a static map with no explicit group) renders no box at all.\n  if (!zoomVisible && !fitVisible && !showCompass && !showLocate && !showFullscreen) return null;\n\n  return (\n    <div\n      className={cn(\"absolute z-10 flex flex-col gap-1.5\", positionClasses[position], className)}\n    >\n      {zoomVisible && (\n        <ControlGroup>\n          <ControlButton onClick={handleZoomIn} label={t(\"maps.controls.zoomIn\")}>\n            <Plus className=\"size-4\" aria-hidden=\"true\" />\n          </ControlButton>\n          <ControlButton onClick={handleZoomOut} label={t(\"maps.controls.zoomOut\")}>\n            <Minus className=\"size-4\" aria-hidden=\"true\" />\n          </ControlButton>\n        </ControlGroup>\n      )}\n      {showCompass && (\n        <ControlGroup>\n          <CompassButton onClick={handleResetBearing} />\n        </ControlGroup>\n      )}\n      {showLocate && (\n        <ControlGroup>\n          <ControlButton\n            onClick={handleLocate}\n            label={t(\"maps.controls.locate\")}\n            disabled={waitingForLocation}\n          >\n            {waitingForLocation ? (\n              <Spinner label={t(\"maps.controls.locating\")} className=\"size-4 text-foreground\" />\n            ) : (\n              <Locate className=\"size-4\" aria-hidden=\"true\" />\n            )}\n          </ControlButton>\n        </ControlGroup>\n      )}\n      {fitVisible && (\n        <ControlGroup>\n          <ControlButton onClick={handleFit} label={t(\"maps.controls.fit\")}>\n            <Scan className=\"size-4\" aria-hidden=\"true\" />\n          </ControlButton>\n        </ControlGroup>\n      )}\n      {showFullscreen && (\n        <ControlGroup>\n          <ControlButton onClick={handleFullscreen} label={t(\"maps.controls.fullscreen\")}>\n            <Maximize className=\"size-4\" aria-hidden=\"true\" />\n          </ControlButton>\n        </ControlGroup>\n      )}\n    </div>\n  );\n}\n\nfunction CompassButton({ onClick }: { onClick: () => void }) {\n  const { map } = useMap();\n  const { t } = useLocale();\n  const compassRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!map || !compassRef.current) return;\n\n    const compass = compassRef.current;\n\n    const updateRotation = () => {\n      const bearing = map.getBearing();\n      const pitch = map.getPitch();\n      compass.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`;\n    };\n\n    map.on(\"rotate\", updateRotation);\n    map.on(\"pitch\", updateRotation);\n    updateRotation();\n\n    return () => {\n      map.off(\"rotate\", updateRotation);\n      map.off(\"pitch\", updateRotation);\n    };\n  }, [map]);\n\n  return (\n    <ControlButton onClick={onClick} label={t(\"maps.controls.resetBearing\")}>\n      <svg\n        ref={compassRef}\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n        className=\"size-5 transition-transform duration-fast\"\n        style={{ transformStyle: \"preserve-3d\" }}\n      >\n        <path d=\"M12 2L16 12H12V2Z\" className=\"fill-destructive\" />\n        <path d=\"M12 2L8 12H12V2Z\" className=\"fill-destructive/50\" />\n        <path d=\"M12 22L16 12H12V22Z\" className=\"fill-muted-foreground/60\" />\n        <path d=\"M12 22L8 12H12V22Z\" className=\"fill-muted-foreground/30\" />\n      </svg>\n    </ControlButton>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-T3Z6TCDD.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-T3Z6TCDD.js.map

package/dist/chunk-T3Z6TCDD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}