@elabs-ai/components-maps 4.2.0 → 5.0.0

package/dist/chunk-T4TJTVVA.js

@@ -0,0 +1,105 @@
+"use client";
+import {
+  MAP_CORNER_CLASSES
+} from "./chunk-GWULZOMW.js";
+import {
+  useMapBreakpoint
+} from "./chunk-W76NLFER.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+
+// src/map-scale-bar/map-scale-bar.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EARTH_CIRCUMFERENCE_M = 40075016686e-3;
+var TILE_SIZE = 512;
+var METRES_PER_MILE = 1609.344;
+var METRES_PER_FOOT = 0.3048;
+var MAX_BAR_PX = { wide: 112, medium: 96, narrow: 80 };
+function metresPerPixel(latitude, zoom) {
+  return EARTH_CIRCUMFERENCE_M * Math.cos(latitude * Math.PI / 180) / (TILE_SIZE * 2 ** zoom);
+}
+function niceDistance(max) {
+  if (!(max > 0) || !Number.isFinite(max)) return 0;
+  const magnitude = 10 ** Math.floor(Math.log10(max));
+  for (const step of [5, 2, 1]) {
+    if (step * magnitude <= max) return step * magnitude;
+  }
+  return magnitude;
+}
+function computeMapScale(latitude, zoom, unit, maxPx) {
+  const perPx = metresPerPixel(latitude, zoom);
+  const maxMetres = perPx * maxPx;
+  const [big, small, bigM, smallM] = unit === "mi" ? ["mile", "foot", METRES_PER_MILE, METRES_PER_FOOT] : ["kilometer", "meter", 1e3, 1];
+  const useBig = maxMetres >= bigM;
+  const perUnit = useBig ? bigM : smallM;
+  const value = niceDistance(maxMetres / perUnit);
+  const px = perPx > 0 ? value * perUnit / perPx : 0;
+  return { px: Math.max(0, px), value, unit: useBig ? big : small };
+}
+var MapScaleBar = forwardRef(function MapScaleBar2({ unit = "km", position = "bottom-left", className, ...props }, ref) {
+  const { map } = useMap();
+  const { formatNumber } = useLocale();
+  const maxPx = MAX_BAR_PX[useMapBreakpoint()];
+  const [scale, setScale] = useState(null);
+  useEffect(() => {
+    if (!map) return void 0;
+    const update = () => {
+      const next = computeMapScale(map.getCenter().lat, map.getZoom(), unit, maxPx);
+      setScale(
+        (prev) => prev && prev.value === next.value && prev.unit === next.unit && Math.abs(prev.px - next.px) < 0.5 ? prev : next
+      );
+    };
+    update();
+    map.on("move", update);
+    map.on("resize", update);
+    return () => {
+      map.off("move", update);
+      map.off("resize", update);
+    };
+  }, [map, unit, maxPx]);
+  if (!scale || scale.value <= 0) return null;
+  const label = formatNumber(scale.value, {
+    style: "unit",
+    unit: scale.unit,
+    unitDisplay: "short"
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "map-scale-bar",
+      "data-unit": scale.unit,
+      "data-distance": scale.value,
+      className: cn(
+        "pointer-events-none absolute z-10 flex flex-col items-start gap-0.5 rounded-sm bg-background/80 px-1.5 py-1",
+        MAP_CORNER_CLASSES[position],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "map-scale-bar-label", className: "text-meta text-foreground tabular-nums", children: label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "map-scale-bar-bar",
+            className: "block h-1.5 border-x-2 border-b-2 border-foreground",
+            style: { width: Math.round(scale.px) }
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  metresPerPixel,
+  niceDistance,
+  computeMapScale,
+  MapScaleBar
+};
+//# sourceMappingURL=chunk-T4TJTVVA.js.map

package/dist/chunk-T4TJTVVA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-scale-bar/map-scale-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useState, type HTMLAttributes } from \"react\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { useMap } from \"../map-canvas/map-context\";\nimport { useMapBreakpoint } from \"../lib/use-map-breakpoint\";\nimport { MAP_CORNER_CLASSES, type MapCorner } from \"../map-legend/map-corner\";\n\n/** Metric (`km`, falling back to metres) or imperial (`mi`, falling back to feet). */\nexport type MapScaleUnit = \"km\" | \"mi\";\n\n/** The Earth's equatorial circumference in metres (WGS 84), as MapLibre uses it. */\nconst EARTH_CIRCUMFERENCE_M = 40_075_016.686;\n/** MapLibre's world size at zoom 0, in CSS px. */\nconst TILE_SIZE = 512;\nconst METRES_PER_MILE = 1609.344;\nconst METRES_PER_FOOT = 0.3048;\n\n/** The longest the bar may draw, per tier (CSS px). */\nconst MAX_BAR_PX = { wide: 112, medium: 96, narrow: 80 } as const;\n\n/** Metres one CSS px covers at `latitude` and `zoom` (Web Mercator). */\nexport function metresPerPixel(latitude: number, zoom: number): number {\n  return (EARTH_CIRCUMFERENCE_M * Math.cos((latitude * Math.PI) / 180)) / (TILE_SIZE * 2 ** zoom);\n}\n\n/** The largest 1 / 2 / 5 × 10ⁿ that is ≤ `max`. */\nexport function niceDistance(max: number): number {\n  if (!(max > 0) || !Number.isFinite(max)) return 0;\n  const magnitude = 10 ** Math.floor(Math.log10(max));\n  for (const step of [5, 2, 1]) {\n    if (step * magnitude <= max) return step * magnitude;\n  }\n  return magnitude;\n}\n\nexport interface MapScale {\n  /** The bar's length in CSS px. */\n  px: number;\n  /** The distance the bar stands for, in `unit`. */\n  value: number;\n  /** An `Intl.NumberFormat` unit identifier. */\n  unit: \"kilometer\" | \"meter\" | \"mile\" | \"foot\";\n}\n\n/**\n * A round distance that fits in `maxPx` at this latitude and zoom, in `unit`\n * — kilometres (metres below 1 km) or miles (feet below 1 mi).\n */\nexport function computeMapScale(\n  latitude: number,\n  zoom: number,\n  unit: MapScaleUnit,\n  maxPx: number,\n): MapScale {\n  const perPx = metresPerPixel(latitude, zoom);\n  const maxMetres = perPx * maxPx;\n  const [big, small, bigM, smallM] =\n    unit === \"mi\"\n      ? ([\"mile\", \"foot\", METRES_PER_MILE, METRES_PER_FOOT] as const)\n      : ([\"kilometer\", \"meter\", 1000, 1] as const);\n  const useBig = maxMetres >= bigM;\n  const perUnit = useBig ? bigM : smallM;\n  const value = niceDistance(maxMetres / perUnit);\n  const px = perPx > 0 ? (value * perUnit) / perPx : 0;\n  return { px: Math.max(0, px), value, unit: useBig ? big : small };\n}\n\nexport interface MapScaleBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** `km` (default) or `mi`. */\n  unit?: MapScaleUnit;\n  /** Corner of the map (default `\"bottom-left\"`). */\n  position?: MapCorner;\n}\n\n/**\n * A scale bar for the map's centre latitude — a round distance (\"50 km\") and\n * a bar of that length, re-measured as the map moves or resizes. The bar gets\n * shorter at `narrow`. Render inside `<MapCanvas>`.\n */\nexport const MapScaleBar = forwardRef<HTMLDivElement, MapScaleBarProps>(function MapScaleBar(\n  { unit = \"km\", position = \"bottom-left\", className, ...props },\n  ref,\n) {\n  const { map } = useMap();\n  const { formatNumber } = useLocale();\n  const maxPx = MAX_BAR_PX[useMapBreakpoint()];\n  const [scale, setScale] = useState<MapScale | null>(null);\n\n  useEffect(() => {\n    if (!map) return undefined;\n    const update = () => {\n      const next = computeMapScale(map.getCenter().lat, map.getZoom(), unit, maxPx);\n      setScale((prev) =>\n        prev &&\n        prev.value === next.value &&\n        prev.unit === next.unit &&\n        Math.abs(prev.px - next.px) < 0.5\n          ? prev\n          : next,\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, unit, maxPx]);\n\n  if (!scale || scale.value <= 0) return null;\n  const label = formatNumber(scale.value, {\n    style: \"unit\",\n    unit: scale.unit,\n    unitDisplay: \"short\",\n  });\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"map-scale-bar\"\n      data-unit={scale.unit}\n      data-distance={scale.value}\n      className={cn(\n        \"pointer-events-none absolute z-10 flex flex-col items-start gap-0.5 rounded-sm bg-background/80 px-1.5 py-1\",\n        MAP_CORNER_CLASSES[position],\n        className,\n      )}\n      {...props}\n    >\n      <span data-slot=\"map-scale-bar-label\" className=\"text-meta text-foreground tabular-nums\">\n        {label}\n      </span>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"map-scale-bar-bar\"\n        className=\"block h-1.5 border-x-2 border-b-2 border-foreground\"\n        style={{ width: Math.round(scale.px) }}\n      />\n    </div>\n  );\n});\n"],"mappings":"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","names":["MapScaleBar"]}

package/dist/chunk-UMOYRCDX.js

@@ -0,0 +1,103 @@
+"use client";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+import {
+  resolveMapPosition
+} from "./chunk-2FPB53NG.js";
+
+// src/map-popup/map-popup.tsx
+import MapLibreGL from "maplibre-gl";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MapPopup({
+  longitude: longitudeProp,
+  latitude: latitudeProp,
+  x,
+  y,
+  onClose,
+  children,
+  className,
+  closeButton = false,
+  ...popupOptions
+}) {
+  const { map, plan } = useMap();
+  const { t } = useLocale();
+  const [longitude, latitude] = resolveMapPosition(
+    { longitude: longitudeProp, latitude: latitudeProp, x, y },
+    plan,
+    "MapPopup"
+  );
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const container = useMemo(() => document.createElement("div"), []);
+  const { offset, maxWidth } = popupOptions;
+  const popup = useMemo(() => {
+    return new MapLibreGL.Popup({
+      offset: 16,
+      ...popupOptions,
+      closeButton: false
+    }).setMaxWidth("none").setLngLat([longitude, latitude]);
+  }, []);
+  useEffect(() => {
+    if (!map) return;
+    const onCloseProp = () => onCloseRef.current?.();
+    popup.on("close", onCloseProp);
+    popup.setDOMContent(container);
+    popup.addTo(map);
+    return () => {
+      popup.off("close", onCloseProp);
+      if (popup.isOpen()) {
+        popup.remove();
+      }
+    };
+  }, [map]);
+  useEffect(() => {
+    const current = popup.getLngLat();
+    if (!current || current.lng !== longitude || current.lat !== latitude) {
+      popup.setLngLat([longitude, latitude]);
+    }
+    popup.setOffset(offset ?? 16);
+    if (maxWidth) {
+      popup.setMaxWidth(maxWidth);
+    }
+  }, [popup, longitude, latitude, offset, maxWidth]);
+  const handleClose = () => {
+    popup.remove();
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative max-w-62 rounded-md bg-popover p-3 text-popover-foreground shadow-ring-md",
+          "animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          className
+        ),
+        children: [
+          closeButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              "aria-label": t("maps.popup.close"),
+              className: "absolute top-1 right-1 z-10 inline-flex size-5 items-center justify-center rounded-sm text-foreground transition-colors duration-fast hover:bg-muted focus-ring-inset",
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
+            }
+          ),
+          children
+        ]
+      }
+    ),
+    container
+  );
+}
+
+export {
+  MapPopup
+};
+//# sourceMappingURL=chunk-UMOYRCDX.js.map

package/dist/chunk-UMOYRCDX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-popup/map-popup.tsx"],"sourcesContent":["\"use client\";\n\nimport MapLibreGL, { type PopupOptions } from \"maplibre-gl\";\nimport { useEffect, useMemo, useRef, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\n\nimport { useMap } from \"../map-canvas/map-context\";\nimport { resolveMapPosition, type MapPosition } from \"../lib/map-position\";\n\nexport type MapPopupProps = MapPosition & {\n  /** Callback when the popup is closed. */\n  onClose?: () => void;\n  /** Popup content. */\n  children: ReactNode;\n  /** Additional CSS classes for the popup container. */\n  className?: string;\n  /** Show a close button in the popup (default: false). */\n  closeButton?: boolean;\n} & Omit<PopupOptions, \"className\" | \"closeButton\">;\n\n/**\n * A standalone popup anchored at a lng/lat — or, on a canvas with a `plan`\n * extent, at a plan `x`/`y`. Not attached to a marker; typically rendered\n * conditionally from app state (e.g. after a layer click).\n */\nexport function MapPopup({\n  longitude: longitudeProp,\n  latitude: latitudeProp,\n  x,\n  y,\n  onClose,\n  children,\n  className,\n  closeButton = false,\n  ...popupOptions\n}: MapPopupProps) {\n  const { map, plan } = useMap();\n  const { t } = useLocale();\n  const [longitude, latitude] = resolveMapPosition(\n    { longitude: longitudeProp, latitude: latitudeProp, x, y },\n    plan,\n    \"MapPopup\",\n  );\n  const onCloseRef = useRef(onClose);\n  onCloseRef.current = onClose;\n  const container = useMemo(() => document.createElement(\"div\"), []);\n  const { offset, maxWidth } = popupOptions;\n\n  const popup = useMemo(() => {\n    return new MapLibreGL.Popup({\n      offset: 16,\n      ...popupOptions,\n      closeButton: false,\n    })\n      .setMaxWidth(\"none\")\n      .setLngLat([longitude, latitude]);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- instance created once; position/options are synced by the effect below\n  }, []);\n\n  useEffect(() => {\n    if (!map) return;\n\n    const onCloseProp = () => onCloseRef.current?.();\n\n    popup.on(\"close\", onCloseProp);\n\n    popup.setDOMContent(container);\n    popup.addTo(map);\n\n    return () => {\n      popup.off(\"close\", onCloseProp);\n      if (popup.isOpen()) {\n        popup.remove();\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- popup/container are stable\n  }, [map]);\n\n  // Sync popup position and options when they change.\n  useEffect(() => {\n    const current = popup.getLngLat();\n    if (!current || current.lng !== longitude || current.lat !== latitude) {\n      popup.setLngLat([longitude, latitude]);\n    }\n    popup.setOffset(offset ?? 16);\n    if (maxWidth) {\n      popup.setMaxWidth(maxWidth);\n    }\n  }, [popup, longitude, latitude, offset, maxWidth]);\n\n  const handleClose = () => {\n    popup.remove();\n  };\n\n  return createPortal(\n    <div\n      className={cn(\n        \"relative max-w-62 rounded-md bg-popover p-3 text-popover-foreground shadow-ring-md\",\n        \"animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance\",\n        className,\n      )}\n    >\n      {closeButton && (\n        <button\n          type=\"button\"\n          onClick={handleClose}\n          aria-label={t(\"maps.popup.close\")}\n          className=\"absolute top-1 right-1 z-10 inline-flex size-5 items-center justify-center rounded-sm text-foreground transition-colors duration-fast hover:bg-muted focus-ring-inset\"\n        >\n          <X className=\"size-3.5\" aria-hidden=\"true\" />\n        </button>\n      )}\n      {children}\n    </div>,\n    container,\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,OAAO,gBAAuC;AAC9C,SAAS,WAAW,SAAS,cAA8B;AAC3D,SAAS,oBAAoB;AAC7B,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AA2FtB,SAcM,KAdN;AAtEG,SAAS,SAAS;AAAA,EACvB,WAAW;AAAA,EACX,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAkB;AAChB,QAAM,EAAE,KAAK,KAAK,IAAI,OAAO;AAC7B,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,CAAC,WAAW,QAAQ,IAAI;AAAA,IAC5B,EAAE,WAAW,eAAe,UAAU,cAAc,GAAG,EAAE;AAAA,IACzD;AAAA,IACA;AAAA,EACF;AACA,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AACrB,QAAM,YAAY,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,CAAC,CAAC;AACjE,QAAM,EAAE,QAAQ,SAAS,IAAI;AAE7B,QAAM,QAAQ,QAAQ,MAAM;AAC1B,WAAO,IAAI,WAAW,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,aAAa;AAAA,IACf,CAAC,EACE,YAAY,MAAM,EAClB,UAAU,CAAC,WAAW,QAAQ,CAAC;AAAA,EAEpC,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,CAAC,IAAK;AAEV,UAAM,cAAc,MAAM,WAAW,UAAU;AAE/C,UAAM,GAAG,SAAS,WAAW;AAE7B,UAAM,cAAc,SAAS;AAC7B,UAAM,MAAM,GAAG;AAEf,WAAO,MAAM;AACX,YAAM,IAAI,SAAS,WAAW;AAC9B,UAAI,MAAM,OAAO,GAAG;AAClB,cAAM,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,UAAM,UAAU,MAAM,UAAU;AAChC,QAAI,CAAC,WAAW,QAAQ,QAAQ,aAAa,QAAQ,QAAQ,UAAU;AACrE,YAAM,UAAU,CAAC,WAAW,QAAQ,CAAC;AAAA,IACvC;AACA,UAAM,UAAU,UAAU,EAAE;AAC5B,QAAI,UAAU;AACZ,YAAM,YAAY,QAAQ;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,OAAO,WAAW,UAAU,QAAQ,QAAQ,CAAC;AAEjD,QAAM,cAAc,MAAM;AACxB,UAAM,OAAO;AAAA,EACf;AAEA,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA,yBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,cAAY,EAAE,kBAAkB;AAAA,cAChC,WAAU;AAAA,cAEV,8BAAC,KAAE,WAAU,YAAW,eAAY,QAAO;AAAA;AAAA,UAC7C;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-V2REM6UT.js

@@ -0,0 +1,185 @@
+"use client";
+import {
+  MAP_CORNER_CLASSES
+} from "./chunk-GWULZOMW.js";
+import {
+  useMapFrameSlot,
+  useMapResponsive
+} from "./chunk-W76NLFER.js";
+
+// src/map-legend/map-legend.tsx
+import { forwardRef, useMemo } from "react";
+import { createPortal } from "react-dom";
+import {
+  colorScaleFor,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SHAPE_CLASSES = {
+  circle: "size-2.5 rounded-full",
+  square: "size-2.5 rounded-xs",
+  line: "h-0.5 w-3.5 rounded-full"
+};
+var LAYOUT_CLASSES = {
+  list: "flex flex-col gap-1",
+  // `auto-fit`, never `auto-fill` (c-5): `auto-fill` keeps the tracks a wide
+  // strip could hold even when nothing occupies them, so four keys on an
+  // 868 px strip got 113.7 px each and "Greater Toronto Area" truncated with
+  // three empty tracks beside it. `auto-fit` collapses the empty tracks and
+  // the real keys share the full width; a key with more items than fit wraps
+  // exactly as before.
+  grid: "grid grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-x-3 gap-y-1"
+};
+function isColorScale(scale) {
+  return "colorOf" in scale;
+}
+function Swatch({ color, shape = "circle" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "map-legend-swatch",
+      "data-shape": shape,
+      className: cn("inline-block shrink-0", SHAPE_CLASSES[shape]),
+      style: { background: color }
+    }
+  );
+}
+function Ramp({ scale, format }) {
+  const ticks = [];
+  let strip = null;
+  if (scale.type === "stepped" && scale.steps.length > 0) {
+    const n = scale.steps.length;
+    strip = /* @__PURE__ */ jsx("div", { className: "flex h-2.5 w-full overflow-hidden rounded-xs", children: scale.steps.map((step) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "map-legend-step",
+        className: "min-w-0 flex-1",
+        style: { background: step.color }
+      },
+      `${step.from}-${step.to}`
+    )) });
+    const first = scale.steps[0];
+    if (first) ticks.push({ key: "start", at: 0, label: format(first.from) });
+    scale.steps.forEach((step, index) => {
+      ticks.push({ key: `to-${step.to}`, at: (index + 1) / n, label: format(step.to) });
+    });
+  } else if (scale.stops.length > 0) {
+    const last = Math.max(1, scale.stops.length - 1);
+    const gradient = scale.stops.map((stop, index) => `${stop.color} ${index / last * 100}%`).join(", ");
+    strip = /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "map-legend-gradient",
+        className: "h-2.5 w-full rounded-xs",
+        style: { background: `linear-gradient(to right, ${gradient})` }
+      }
+    );
+    const marks = [scale.domain?.[0], scale.center ?? void 0, scale.domain?.[1]];
+    for (const value of marks) {
+      if (value === void 0) continue;
+      const at = scale.positionOf(value);
+      if (at === null) continue;
+      ticks.push({ key: `v-${value}`, at, label: format(value) });
+    }
+  }
+  if (!strip) return null;
+  return (
+    // A ramp reads low → high left to right in every writing direction.
+    /* @__PURE__ */ jsxs("div", { dir: "ltr", "data-slot": "map-legend-ramp", className: "flex w-48 max-w-full flex-col gap-1", children: [
+      strip,
+      /* @__PURE__ */ jsx("div", { className: "relative h-4", children: ticks.map((tick) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "map-legend-tick",
+          className: cn(
+            "absolute top-0 text-meta whitespace-nowrap text-muted-foreground tabular-nums",
+            tick.at <= 0 ? "" : tick.at >= 1 ? "-translate-x-full" : "-translate-x-1/2"
+          ),
+          style: { left: `${Math.min(1, Math.max(0, tick.at)) * 100}%` },
+          children: tick.label
+        },
+        tick.key
+      )) })
+    ] })
+  );
+}
+var MapLegend = forwardRef(function MapLegend2({
+  title,
+  items,
+  scale: scaleInput,
+  layout = "list",
+  position: positionProp = "above",
+  formatValue,
+  className,
+  ...props
+}, ref) {
+  const { formatNumber } = useLocale();
+  const position = useMapResponsive(positionProp);
+  const outside = position === "above" || position === "below" ? position : null;
+  const slot = useMapFrameSlot(outside);
+  const scale = useMemo(() => {
+    if (!scaleInput) return null;
+    return isColorScale(scaleInput) ? scaleInput : colorScaleFor(scaleInput.values, scaleInput.spec);
+  }, [scaleInput]);
+  const format = formatValue ?? ((value) => formatNumber(value));
+  const rows = [
+    ...items ?? [],
+    ...scale?.palette === "categorical" ? scale.categories.map((category) => ({
+      id: `category-${category.value}`,
+      label: String(category.value),
+      color: category.color,
+      shape: "square"
+    })) : []
+  ];
+  const showRamp = scale !== null && scale.palette !== "categorical";
+  const body = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "map-legend",
+      "data-position": position,
+      "data-layout": layout,
+      className: cn(
+        "flex flex-col gap-1.5 text-meta text-foreground",
+        outside ? "w-full" : cn(
+          "absolute z-10 max-w-[calc(100%-1rem)] rounded-md bg-background/90 px-2 py-1.5 shadow-ring-sm",
+          MAP_CORNER_CLASSES[position]
+        ),
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { "data-slot": "map-legend-title", className: "font-medium", children: title }),
+        rows.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            "data-slot": "map-legend-items",
+            className: cn("m-0 list-none p-0", LAYOUT_CLASSES[layout]),
+            children: rows.map((item) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                "data-slot": "map-legend-item",
+                className: "flex min-w-0 items-center gap-1.5",
+                children: [
+                  /* @__PURE__ */ jsx(Swatch, { color: item.color, shape: item.shape }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
+                ]
+              },
+              item.id ?? item.label
+            ))
+          }
+        ),
+        showRamp && scale && /* @__PURE__ */ jsx(Ramp, { scale, format })
+      ]
+    }
+  );
+  if (outside) return slot ? createPortal(body, slot) : null;
+  return body;
+});
+
+export {
+  MapLegend
+};
+//# sourceMappingURL=chunk-V2REM6UT.js.map

package/dist/chunk-V2REM6UT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-legend/map-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  colorScaleFor,\n  useLocale,\n  type ColorScale,\n  type ColorScaleSpec,\n  type ColorScaleValue,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { type MapResponsive, useMapFrameSlot, useMapResponsive } from \"../lib/use-map-breakpoint\";\nimport { MAP_CORNER_CLASSES, type MapCorner } from \"./map-corner\";\n\n/** The mark a key row shows: a point, an area or a line marker. */\nexport type MapLegendShape = \"circle\" | \"square\" | \"line\";\n\n/** One row of a marker key. */\nexport interface MapLegendItem {\n  /** Stable identity; defaults to `label`. */\n  id?: string;\n  label: string;\n  /** Any CSS colour — use a token reference (`var(--chart-1)`), never a literal. */\n  color: string;\n  /** Default `\"circle\"`. */\n  shape?: MapLegendShape;\n}\n\n/**\n * A colour scale to key: one `colorScaleFor` already built (share it with the\n * layer it colours), or the values + spec to build one here.\n */\nexport type MapLegendScale =\n  | ColorScale\n  | { values: readonly ColorScaleValue[]; spec: ColorScaleSpec };\n\n/** Outside the map box (`above` / `below`) or over one of its corners. */\nexport type MapLegendPosition = \"above\" | \"below\" | MapCorner;\n\n/** `list`: one row per item. `grid`: items flow into as many columns as fit. */\nexport type MapLegendLayout = \"list\" | \"grid\";\n\nexport interface MapLegendProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** A heading for the key. */\n  title?: ReactNode;\n  /** Marker key rows. */\n  items?: readonly MapLegendItem[];\n  /** A colour ramp (continuous / stepped) or category key, from `colorScaleFor`. */\n  scale?: MapLegendScale;\n  /** Default `\"list\"`. */\n  layout?: MapLegendLayout;\n  /**\n   * Where the key sits, optionally per tier — for example\n   * `{ base: \"top-left\", narrow: \"below\" }` so it stops covering a phone-width\n   * map. Default `\"above\"`.\n   */\n  position?: MapResponsive<MapLegendPosition>;\n  /** Formats a ramp's tick values (default: the locale's number format). */\n  formatValue?: (value: number) => string;\n}\n\nconst SHAPE_CLASSES: Record<MapLegendShape, string> = {\n  circle: \"size-2.5 rounded-full\",\n  square: \"size-2.5 rounded-xs\",\n  line: \"h-0.5 w-3.5 rounded-full\",\n};\n\nconst LAYOUT_CLASSES: Record<MapLegendLayout, string> = {\n  list: \"flex flex-col gap-1\",\n  // `auto-fit`, never `auto-fill` (c-5): `auto-fill` keeps the tracks a wide\n  // strip could hold even when nothing occupies them, so four keys on an\n  // 868 px strip got 113.7 px each and \"Greater Toronto Area\" truncated with\n  // three empty tracks beside it. `auto-fit` collapses the empty tracks and\n  // the real keys share the full width; a key with more items than fit wraps\n  // exactly as before.\n  grid: \"grid grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-x-3 gap-y-1\",\n};\n\nfunction isColorScale(scale: MapLegendScale): scale is ColorScale {\n  return \"colorOf\" in scale;\n}\n\nfunction Swatch({ color, shape = \"circle\" }: { color: string; shape?: MapLegendShape }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"map-legend-swatch\"\n      data-shape={shape}\n      className={cn(\"inline-block shrink-0\", SHAPE_CLASSES[shape])}\n      style={{ background: color }}\n    />\n  );\n}\n\ninterface Tick {\n  key: string;\n  at: number;\n  label: string;\n}\n\n/** A ramp: stepped swatches or a continuous gradient, with value ticks under it. */\nfunction Ramp({ scale, format }: { scale: ColorScale; format: (value: number) => string }) {\n  const ticks: Tick[] = [];\n  let strip: ReactNode = null;\n\n  if (scale.type === \"stepped\" && scale.steps.length > 0) {\n    const n = scale.steps.length;\n    strip = (\n      <div className=\"flex h-2.5 w-full overflow-hidden rounded-xs\">\n        {scale.steps.map((step) => (\n          <span\n            key={`${step.from}-${step.to}`}\n            data-slot=\"map-legend-step\"\n            className=\"min-w-0 flex-1\"\n            style={{ background: step.color }}\n          />\n        ))}\n      </div>\n    );\n    const first = scale.steps[0];\n    if (first) ticks.push({ key: \"start\", at: 0, label: format(first.from) });\n    scale.steps.forEach((step, index) => {\n      ticks.push({ key: `to-${step.to}`, at: (index + 1) / n, label: format(step.to) });\n    });\n  } else if (scale.stops.length > 0) {\n    const last = Math.max(1, scale.stops.length - 1);\n    const gradient = scale.stops\n      .map((stop, index) => `${stop.color} ${(index / last) * 100}%`)\n      .join(\", \");\n    strip = (\n      <div\n        data-slot=\"map-legend-gradient\"\n        className=\"h-2.5 w-full rounded-xs\"\n        style={{ background: `linear-gradient(to right, ${gradient})` }}\n      />\n    );\n    const marks = [scale.domain?.[0], scale.center ?? undefined, scale.domain?.[1]];\n    for (const value of marks) {\n      if (value === undefined) continue;\n      const at = scale.positionOf(value);\n      if (at === null) continue;\n      ticks.push({ key: `v-${value}`, at, label: format(value) });\n    }\n  }\n\n  if (!strip) return null;\n  return (\n    // A ramp reads low → high left to right in every writing direction.\n    <div dir=\"ltr\" data-slot=\"map-legend-ramp\" className=\"flex w-48 max-w-full flex-col gap-1\">\n      {strip}\n      <div className=\"relative h-4\">\n        {ticks.map((tick) => (\n          <span\n            key={tick.key}\n            data-slot=\"map-legend-tick\"\n            className={cn(\n              \"absolute top-0 text-meta whitespace-nowrap text-muted-foreground tabular-nums\",\n              tick.at <= 0 ? \"\" : tick.at >= 1 ? \"-translate-x-full\" : \"-translate-x-1/2\",\n            )}\n            style={{ left: `${Math.min(1, Math.max(0, tick.at)) * 100}%` }}\n          >\n            {tick.label}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * MapLegend — the map's key: marker rows (`items`) and / or a colour ramp\n * (`scale`, built with `colorScaleFor` from `@elabs-ai/components-ui`, so its\n * colours are token references in every theme). It sits above or below the\n * map box, or over a corner, per tier; the house legend look (`text-meta`,\n * dot markers) matches `charts`' `ChartLegend`. Render inside `<MapCanvas>`.\n */\nexport const MapLegend = forwardRef<HTMLDivElement, MapLegendProps>(function MapLegend(\n  {\n    title,\n    items,\n    scale: scaleInput,\n    layout = \"list\",\n    position: positionProp = \"above\",\n    formatValue,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { formatNumber } = useLocale();\n  const position = useMapResponsive(positionProp);\n  const outside = position === \"above\" || position === \"below\" ? position : null;\n  const slot = useMapFrameSlot(outside);\n\n  const scale = useMemo<ColorScale | null>(() => {\n    if (!scaleInput) return null;\n    return isColorScale(scaleInput)\n      ? scaleInput\n      : colorScaleFor(scaleInput.values, scaleInput.spec);\n  }, [scaleInput]);\n  const format = formatValue ?? ((value: number) => formatNumber(value));\n\n  const rows: MapLegendItem[] = [\n    ...(items ?? []),\n    ...(scale?.palette === \"categorical\"\n      ? scale.categories.map((category) => ({\n          id: `category-${category.value}`,\n          label: String(category.value),\n          color: category.color,\n          shape: \"square\" as const,\n        }))\n      : []),\n  ];\n  const showRamp = scale !== null && scale.palette !== \"categorical\";\n\n  const body = (\n    <div\n      ref={ref}\n      data-slot=\"map-legend\"\n      data-position={position}\n      data-layout={layout}\n      className={cn(\n        \"flex flex-col gap-1.5 text-meta text-foreground\",\n        outside\n          ? \"w-full\"\n          : cn(\n              \"absolute z-10 max-w-[calc(100%-1rem)] rounded-md bg-background/90 px-2 py-1.5 shadow-ring-sm\",\n              MAP_CORNER_CLASSES[position as MapCorner],\n            ),\n        className,\n      )}\n      {...props}\n    >\n      {title && (\n        <div data-slot=\"map-legend-title\" className=\"font-medium\">\n          {title}\n        </div>\n      )}\n      {rows.length > 0 && (\n        <ul\n          data-slot=\"map-legend-items\"\n          className={cn(\"m-0 list-none p-0\", LAYOUT_CLASSES[layout])}\n        >\n          {rows.map((item) => (\n            <li\n              key={item.id ?? item.label}\n              data-slot=\"map-legend-item\"\n              className=\"flex min-w-0 items-center gap-1.5\"\n            >\n              <Swatch color={item.color} shape={item.shape} />\n              <span className=\"min-w-0 truncate\">{item.label}</span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {showRamp && scale && <Ramp scale={scale} format={format} />}\n    </div>\n  );\n\n  if (outside) return slot ? createPortal(body, slot) : null;\n  return body;\n});\n"],"mappings":"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","names":["MapLegend"]}

package/dist/chunk-VFBRFGID.js

@@ -0,0 +1,89 @@
+"use client";
+import {
+  PLAN_STATUS_ENCODING
+} from "./chunk-E65Z3MSV.js";
+
+// src/map-plan/map-plan-table.tsx
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MapPlanTable({
+  regions,
+  caption,
+  columns,
+  status,
+  statusLabels,
+  statusHeader,
+  nameHeader = "Name",
+  selectedId,
+  onSelect,
+  printOnly = false,
+  className
+}) {
+  const selected = selectedId == null ? [] : Array.isArray(selectedId) ? selectedId : [selectedId];
+  return /* @__PURE__ */ jsx("div", { "data-slot": "map-plan-table", className: cn(printOnly && "hidden print:block", className), children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableCaption, { children: caption }),
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { scope: "col", children: nameHeader }),
+      status && /* @__PURE__ */ jsx(TableHead, { scope: "col", children: statusHeader }),
+      columns?.map((column) => /* @__PURE__ */ jsx(TableHead, { scope: "col", className: column.numeric ? "text-end" : "", children: column.header }, column.key))
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: regions.map((region) => {
+      const regionStatus = status?.(region);
+      const encoding = regionStatus ? PLAN_STATUS_ENCODING[regionStatus] : void 0;
+      const isSelected = selected.includes(region.id);
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-slot": "map-plan-table-row",
+          "data-selected": isSelected || void 0,
+          "data-status": regionStatus,
+          "aria-selected": onSelect ? isSelected : void 0,
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { children: onSelect ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onSelect(region.id, region),
+                className: "rounded-sm text-start focus-ring",
+                children: region.label
+              }
+            ) : region.label }),
+            status && /* @__PURE__ */ jsx(TableCell, { children: regionStatus && encoding ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+              encoding.icon && /* @__PURE__ */ jsx(
+                encoding.icon,
+                {
+                  className: cn("size-3.5", encoding.textClass),
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: encoding.textClass, children: statusLabels?.[regionStatus] ?? regionStatus })
+            ] }) : null }),
+            columns?.map((column) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: column.numeric ? "text-end tabular-nums" : "",
+                children: column.cell(region)
+              },
+              column.key
+            ))
+          ]
+        },
+        region.id
+      );
+    }) })
+  ] }) });
+}
+
+export {
+  MapPlanTable
+};
+//# sourceMappingURL=chunk-VFBRFGID.js.map

package/dist/chunk-VFBRFGID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-plan/map-plan-table.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport type { MapPlanRegion } from \"../lib/plan-regions\";\nimport { PLAN_STATUS_ENCODING, type PlanStatus } from \"../lib/plan-status\";\n\nexport interface MapPlanTableColumn {\n  /** Column key, used for the cell lookup and the React key. */\n  key: string;\n  /** Column header text. */\n  header: string;\n  /** Right-align the column — numbers belong on the end edge. */\n  numeric?: boolean;\n  /** The cell's content for one region. */\n  cell: (region: MapPlanRegion) => ReactNode;\n}\n\nexport interface MapPlanTableProps {\n  /** The same regions the plan draws. */\n  regions: readonly MapPlanRegion[];\n  /** What the table is a table of (\"Every room on level 3, with its state\"). */\n  caption: string;\n  /** Extra columns after the name. The status column is built in when `status` is given. */\n  columns?: readonly MapPlanTableColumn[];\n  /** A region's status, if the plan has one. Adds a status column with the word. */\n  status?: (region: MapPlanRegion) => PlanStatus | undefined;\n  /** The word for each status — supplied by the consumer, so it can be localized. */\n  statusLabels?: Partial<Record<PlanStatus, string>>;\n  /** Header for the built-in status column. */\n  statusHeader?: string;\n  /** Header for the name column. */\n  nameHeader?: string;\n  /** The selected region id(s), mirrored as a row state. */\n  selectedId?: string | readonly string[] | null;\n  /** Called when a row is chosen — the table is a second way to reach a region. */\n  onSelect?: (id: string, region: MapPlanRegion) => void;\n  /**\n   * Hide the table on screen and keep it for print (default false). A WebGL\n   * canvas prints blank, so a plan that is meant to be printed needs this.\n   */\n  printOnly?: boolean;\n  className?: string;\n}\n\n/**\n * The plan as words — the parallel channel for anyone who cannot see the canvas,\n * for anyone who needs to sort or search it, and for the printer, which gets a\n * blank rectangle where the WebGL canvas was.\n *\n * Visible by default rather than `sr-only`: the information is useful to\n * everyone, and a hidden twin quietly rots.\n */\nexport function MapPlanTable({\n  regions,\n  caption,\n  columns,\n  status,\n  statusLabels,\n  statusHeader,\n  nameHeader = \"Name\",\n  selectedId,\n  onSelect,\n  printOnly = false,\n  className,\n}: MapPlanTableProps) {\n  const selected = selectedId == null ? [] : Array.isArray(selectedId) ? selectedId : [selectedId];\n\n  return (\n    <div data-slot=\"map-plan-table\" className={cn(printOnly && \"hidden print:block\", className)}>\n      <Table>\n        <TableCaption>{caption}</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead scope=\"col\">{nameHeader}</TableHead>\n            {status && <TableHead scope=\"col\">{statusHeader}</TableHead>}\n            {columns?.map((column) => (\n              <TableHead key={column.key} scope=\"col\" className={column.numeric ? \"text-end\" : \"\"}>\n                {column.header}\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {regions.map((region) => {\n            const regionStatus = status?.(region);\n            const encoding = regionStatus ? PLAN_STATUS_ENCODING[regionStatus] : undefined;\n            const isSelected = selected.includes(region.id);\n\n            return (\n              <TableRow\n                key={region.id}\n                data-slot=\"map-plan-table-row\"\n                data-selected={isSelected || undefined}\n                data-status={regionStatus}\n                aria-selected={onSelect ? isSelected : undefined}\n              >\n                <TableCell>\n                  {onSelect ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => onSelect(region.id, region)}\n                      className=\"rounded-sm text-start focus-ring\"\n                    >\n                      {region.label}\n                    </button>\n                  ) : (\n                    region.label\n                  )}\n                </TableCell>\n                {status && (\n                  <TableCell>\n                    {regionStatus && encoding ? (\n                      <span className=\"inline-flex items-center gap-1.5\">\n                        {encoding.icon && (\n                          <encoding.icon\n                            className={cn(\"size-3.5\", encoding.textClass)}\n                            aria-hidden=\"true\"\n                          />\n                        )}\n                        <span className={encoding.textClass}>\n                          {statusLabels?.[regionStatus] ?? regionStatus}\n                        </span>\n                      </span>\n                    ) : null}\n                  </TableCell>\n                )}\n                {columns?.map((column) => (\n                  <TableCell\n                    key={column.key}\n                    className={column.numeric ? \"text-end tabular-nums\" : \"\"}\n                  >\n                    {column.cell(region)}\n                  </TableCell>\n                ))}\n              </TableRow>\n            );\n          })}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAqEX,cAEE,YAFF;AAlBD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAsB;AACpB,QAAM,WAAW,cAAc,OAAO,CAAC,IAAI,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC,UAAU;AAE/F,SACE,oBAAC,SAAI,aAAU,kBAAiB,WAAW,GAAG,aAAa,sBAAsB,SAAS,GACxF,+BAAC,SACC;AAAA,wBAAC,gBAAc,mBAAQ;AAAA,IACvB,oBAAC,eACC,+BAAC,YACC;AAAA,0BAAC,aAAU,OAAM,OAAO,sBAAW;AAAA,MAClC,UAAU,oBAAC,aAAU,OAAM,OAAO,wBAAa;AAAA,MAC/C,SAAS,IAAI,CAAC,WACb,oBAAC,aAA2B,OAAM,OAAM,WAAW,OAAO,UAAU,aAAa,IAC9E,iBAAO,UADM,OAAO,GAEvB,CACD;AAAA,OACH,GACF;AAAA,IACA,oBAAC,aACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,eAAe,SAAS,MAAM;AACpC,YAAM,WAAW,eAAe,qBAAqB,YAAY,IAAI;AACrE,YAAM,aAAa,SAAS,SAAS,OAAO,EAAE;AAE9C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,aAAU;AAAA,UACV,iBAAe,cAAc;AAAA,UAC7B,eAAa;AAAA,UACb,iBAAe,WAAW,aAAa;AAAA,UAEvC;AAAA,gCAAC,aACE,qBACC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBACzC,WAAU;AAAA,gBAET,iBAAO;AAAA;AAAA,YACV,IAEA,OAAO,OAEX;AAAA,YACC,UACC,oBAAC,aACE,0BAAgB,WACf,qBAAC,UAAK,WAAU,oCACb;AAAA,uBAAS,QACR;AAAA,gBAAC,SAAS;AAAA,gBAAT;AAAA,kBACC,WAAW,GAAG,YAAY,SAAS,SAAS;AAAA,kBAC5C,eAAY;AAAA;AAAA,cACd;AAAA,cAEF,oBAAC,UAAK,WAAW,SAAS,WACvB,yBAAe,YAAY,KAAK,cACnC;AAAA,eACF,IACE,MACN;AAAA,YAED,SAAS,IAAI,CAAC,WACb;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW,OAAO,UAAU,0BAA0B;AAAA,gBAErD,iBAAO,KAAK,MAAM;AAAA;AAAA,cAHd,OAAO;AAAA,YAId,CACD;AAAA;AAAA;AAAA,QA3CI,OAAO;AAAA,MA4Cd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-W76NLFER.js

@@ -0,0 +1,103 @@
+"use client";
+
+// src/lib/use-map-breakpoint.ts
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useState
+} from "react";
+var MAP_BREAKPOINTS = ["narrow", "medium", "wide"];
+var MAP_BREAKPOINT_THRESHOLDS = { narrow: 480, medium: 768 };
+function mapBreakpointForWidth(width) {
+  if (!Number.isFinite(width) || width <= 0) return "wide";
+  if (width < MAP_BREAKPOINT_THRESHOLDS.narrow) return "narrow";
+  if (width < MAP_BREAKPOINT_THRESHOLDS.medium) return "medium";
+  return "wide";
+}
+function isMapResponsiveByBreakpoint(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && Object.prototype.hasOwnProperty.call(value, "base");
+}
+function resolveMapResponsive(value, breakpoint) {
+  if (!isMapResponsiveByBreakpoint(value)) return value;
+  if (breakpoint === "wide") return value.base;
+  if (breakpoint === "narrow" && value.narrow !== void 0) return value.narrow;
+  return value.medium !== void 0 ? value.medium : value.base;
+}
+var DEFAULT_MAP_HEIGHT = {
+  base: { aspect: 1.6 },
+  narrow: { aspect: 1 }
+};
+function validHeight(value) {
+  if (typeof value === "number") return Number.isFinite(value) && value > 0 ? value : void 0;
+  if (value && Number.isFinite(value.aspect) && value.aspect > 0) return value;
+  return void 0;
+}
+var NO_GEOMETRY_TRANSITION = { transitionProperty: "none" };
+function resolveMapHeightStyle(height, breakpoint) {
+  const own = height === void 0 ? void 0 : validHeight(resolveMapResponsive(height, breakpoint));
+  if (typeof own === "number") return { ...NO_GEOMETRY_TRANSITION, height: own };
+  if (own) return { ...NO_GEOMETRY_TRANSITION, height: "auto", aspectRatio: `${own.aspect} / 1` };
+  const fallback = resolveMapResponsive(DEFAULT_MAP_HEIGHT, breakpoint);
+  return typeof fallback === "number" ? { ...NO_GEOMETRY_TRANSITION } : { ...NO_GEOMETRY_TRANSITION, aspectRatio: `${fallback.aspect} / 1` };
+}
+function useMeasuredMapBreakpoint(node) {
+  const [breakpoint, setBreakpoint] = useState("wide");
+  useLayoutEffect(() => {
+    if (!node) return void 0;
+    const update = (width) => {
+      const next = mapBreakpointForWidth(width);
+      setBreakpoint((prev) => prev === next ? prev : next);
+    };
+    update(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (entry) update(entry.contentRect.width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [node]);
+  return breakpoint;
+}
+var noopRelease = () => {
+};
+var DEFAULT_FRAME = {
+  breakpoint: "wide",
+  interactive: true,
+  slots: { above: null, below: null },
+  requestSlot: () => noopRelease
+};
+var MapFrameContext = createContext(DEFAULT_FRAME);
+function useMapFrame() {
+  return useContext(MapFrameContext);
+}
+function useMapBreakpoint() {
+  return useContext(MapFrameContext).breakpoint;
+}
+function useMapResponsive(value) {
+  return resolveMapResponsive(value, useMapBreakpoint());
+}
+function useMapFrameSlot(side) {
+  const { slots, requestSlot } = useContext(MapFrameContext);
+  useEffect(() => side ? requestSlot(side) : void 0, [side, requestSlot]);
+  return side ? slots[side] : null;
+}
+
+export {
+  MAP_BREAKPOINTS,
+  MAP_BREAKPOINT_THRESHOLDS,
+  mapBreakpointForWidth,
+  isMapResponsiveByBreakpoint,
+  resolveMapResponsive,
+  DEFAULT_MAP_HEIGHT,
+  resolveMapHeightStyle,
+  useMeasuredMapBreakpoint,
+  MapFrameContext,
+  useMapFrame,
+  useMapBreakpoint,
+  useMapResponsive,
+  useMapFrameSlot
+};
+//# sourceMappingURL=chunk-W76NLFER.js.map