@12-apps/ui 5.0.0 → 5.0.1

package/dist/data-display/MapPreview.js

@@ -0,0 +1,956 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/data-display/MapPreview/MapPreview.tsx
+import { alpha as alpha8, Box as Box6, Paper, styled as styled4, useTheme as useTheme7 } from "@mui/material";
+
+// src/components/data-display/MapPreview/MapPreview.helpers.ts
+import { alpha } from "@mui/material";
+
+// src/components/data-display/MapPreview/MapPreview.constants.ts
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 20;
+var DEFAULT_ZOOM = 15;
+var CITY_ZOOM = 12;
+var MAP_TYPES = ["roadmap", "satellite", "hybrid", "terrain"];
+var DRAG_DEGREES_PER_PIXEL = 1e-4;
+var CLICK_JITTER_DEGREES = 1e-3;
+var MARKER_PIXELS_PER_DEGREE = 100;
+var HEATMAP_VIEWBOX = { width: 800, height: 400 };
+
+// src/components/data-display/MapPreview/MapPreview.helpers.ts
+var MAP_PREVIEW_DEFAULTS = {
+  markers: [],
+  marker: true,
+  height: "400px",
+  interactive: false,
+  zoom: DEFAULT_ZOOM,
+  mapType: "roadmap",
+  variant: "default",
+  showControls: true,
+  showSearch: false,
+  searchPlaceholder: "Search location...",
+  showRoute: false,
+  heatmapData: [],
+  showHeatmap: false,
+  animated: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveMapPreviewProps = (props) => ({ ...MAP_PREVIEW_DEFAULTS, ...definedProps(props) });
+var glassStyles = (variant, theme) => variant === "glass" ? {
+  background: alpha(theme.palette.background.paper, 0.7),
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+} : {};
+
+// src/components/data-display/MapPreview/MapLayers.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+
+// src/components/data-display/MapPreview/MapControlBar.tsx
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import LayersIcon from "@mui/icons-material/Layers";
+import CenterIcon from "@mui/icons-material/MyLocation";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import { alpha as alpha2, Box, IconButton, styled, Tooltip } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MapControls = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  right: theme.spacing(2),
+  zIndex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1)
+}));
+var ControlButton = styled(IconButton)(({ theme }) => ({
+  background: alpha2(theme.palette.background.paper, 0.95),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha2(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.shadows[2],
+  // Kept clickable while disabled so hover tooltips still work at the limits.
+  pointerEvents: "auto",
+  "&:hover": {
+    background: theme.palette.background.paper,
+    transform: "scale(1.05)"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    pointerEvents: "auto"
+  }
+}));
+var MapControlBar = ({
+  zoom,
+  mapType,
+  onZoomIn,
+  onZoomOut,
+  onCenter,
+  onToggleMapType,
+  onToggleFullscreen
+}) => /* @__PURE__ */ jsxs(MapControls, { "data-testid": "map-controls", children: [
+  /* @__PURE__ */ jsx(Tooltip, { title: "Zoom in", placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onZoomIn,
+      "aria-label": "Zoom in",
+      "data-testid": "zoom-in-button",
+      disabled: zoom >= MAX_ZOOM,
+      children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Zoom out", placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onZoomOut,
+      "aria-label": "Zoom out",
+      "data-testid": "zoom-out-button",
+      disabled: zoom <= MIN_ZOOM,
+      children: /* @__PURE__ */ jsx(ZoomOutIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Center map", placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onCenter,
+      "aria-label": "Center map",
+      "data-testid": "center-button",
+      children: /* @__PURE__ */ jsx(CenterIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: `Map type: ${mapType}`, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onToggleMapType,
+      "aria-label": "Change map type",
+      "data-testid": "map-type-button",
+      children: /* @__PURE__ */ jsx(LayersIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Toggle fullscreen", placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onToggleFullscreen,
+      "aria-label": "Toggle fullscreen",
+      "data-testid": "fullscreen-button",
+      children: /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
+    }
+  ) })
+] });
+
+// src/components/data-display/MapPreview/MapOverlays.tsx
+import { useTheme } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var OVERLAY_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  zIndex: 1
+};
+var MAX_HEAT_RADIUS = 30;
+var MAX_HEAT_OPACITY = 0.3;
+var DEGREES_TO_PIXELS = 10;
+var HeatmapOverlay = ({ points, width, height }) => {
+  const theme = useTheme();
+  if (points.length === 0) return null;
+  return /* @__PURE__ */ jsx2("svg", { style: OVERLAY_STYLE, viewBox: `0 0 ${width} ${height}`, children: points.map((point, index) => /* @__PURE__ */ jsx2(
+    "circle",
+    {
+      cx: width / 2 + point.lng * DEGREES_TO_PIXELS,
+      cy: height / 2 - point.lat * DEGREES_TO_PIXELS,
+      r: MAX_HEAT_RADIUS * point.weight,
+      fill: theme.palette.error.main,
+      opacity: MAX_HEAT_OPACITY * point.weight
+    },
+    `${point.lat}-${point.lng}-${index}`
+  )) });
+};
+var RouteOverlay = ({ color }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx2("svg", { style: OVERLAY_STYLE, viewBox: "0 0 100 100", children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 20,20 Q 40,10 50,30 T 80,80",
+      stroke: color || theme.palette.primary.main,
+      strokeWidth: "3",
+      fill: "none",
+      strokeDasharray: "5,5",
+      opacity: "0.8",
+      children: /* @__PURE__ */ jsx2("animate", { attributeName: "stroke-dashoffset", values: "0;10", dur: "1s", repeatCount: "indefinite" })
+    }
+  ) });
+};
+
+// src/components/data-display/MapPreview/MapSearchBar.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import { alpha as alpha3, Box as Box2, InputAdornment, styled as styled2, TextField } from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SearchBar = styled2(Box2)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 2,
+  width: "90%",
+  maxWidth: 400
+}));
+var SearchField = styled2(TextField)(({ theme }) => ({
+  "& .MuiOutlinedInput-root": {
+    background: alpha3(theme.palette.background.paper, 0.95),
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+    borderRadius: theme.shape.borderRadius * 2,
+    "& fieldset": {
+      borderColor: alpha3(theme.palette.divider, 0.2)
+    }
+  }
+}));
+var MapSearchBar = ({
+  value,
+  placeholder,
+  isSearching,
+  onChange,
+  onSubmit
+}) => /* @__PURE__ */ jsx3(SearchBar, { children: /* @__PURE__ */ jsx3(
+  SearchField,
+  {
+    fullWidth: true,
+    size: "small",
+    placeholder,
+    value,
+    onChange: (event) => onChange(event.target.value),
+    onKeyPress: onSubmit,
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx3(SearchIcon, { fontSize: "small", sx: { opacity: isSearching ? 0.5 : 1 } }) })
+    },
+    disabled: isSearching,
+    "aria-label": "Search location"
+  }
+) });
+
+// src/components/data-display/MapPreview/MapLayers.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var MapLayers = ({ settings, zoom, mapType, search, controls }) => {
+  const theme = useTheme2();
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    settings.showHeatmap && settings.heatmapData.length > 0 && /* @__PURE__ */ jsx4(
+      HeatmapOverlay,
+      {
+        points: settings.heatmapData,
+        width: HEATMAP_VIEWBOX.width,
+        height: HEATMAP_VIEWBOX.height
+      }
+    ),
+    settings.showRoute && /* @__PURE__ */ jsx4(RouteOverlay, { color: settings.routeColor || theme.palette.primary.main }),
+    settings.showSearch && /* @__PURE__ */ jsx4(
+      MapSearchBar,
+      {
+        value: search.searchValue,
+        placeholder: settings.searchPlaceholder,
+        isSearching: search.isSearching,
+        onChange: search.setSearchValue,
+        onSubmit: search.handleSearch
+      }
+    ),
+    settings.showControls && /* @__PURE__ */ jsx4(
+      MapControlBar,
+      {
+        zoom,
+        mapType,
+        onZoomIn: controls.handleZoomIn,
+        onZoomOut: controls.handleZoomOut,
+        onCenter: controls.handleCenter,
+        onToggleMapType: controls.handleToggleMapType,
+        onToggleFullscreen: controls.handleToggleFullscreen
+      }
+    )
+  ] });
+};
+
+// src/components/data-display/MapPreview/MapMarkers.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import { alpha as alpha5, Box as Box3, styled as styled3, Tooltip as Tooltip2, Typography, useTheme as useTheme3 } from "@mui/material";
+
+// src/components/data-display/MapPreview/mapSurface.ts
+import { alpha as alpha4 } from "@mui/material";
+var greyGradient = (theme, from, to, opacity = 1) => {
+  const shade = (key) => alpha4(theme.palette.grey[key], opacity);
+  return `linear-gradient(135deg, ${shade(from)} 0%, ${shade(to)} 100%)`;
+};
+var surfaceBackground = (mapType, theme) => {
+  if (mapType === "satellite") return greyGradient(theme, 900, 800);
+  if (mapType === "terrain") {
+    return `linear-gradient(135deg, ${alpha4("#8BC34A", 0.2)} 0%, ${alpha4("#4CAF50", 0.3)} 100%)`;
+  }
+  if (theme.palette.mode === "dark") return greyGradient(theme, 900, 800);
+  return greyGradient(theme, 100, 200);
+};
+var tileBackground = (mapType, theme) => {
+  if (mapType === "satellite") {
+    return `linear-gradient(135deg, ${alpha4("#1a1a1a", 0.9)} 0%, ${alpha4("#2a2a2a", 0.9)} 100%)`;
+  }
+  if (mapType === "terrain") {
+    return `linear-gradient(135deg, ${alpha4("#7cb342", 0.1)} 0%, ${alpha4("#558b2f", 0.1)} 100%)`;
+  }
+  return greyGradient(theme, 100, 200, 0.5);
+};
+var BOUNCE_KEYFRAMES = {
+  "0%, 100%": { transform: "translateY(0)" },
+  "50%": { transform: "translateY(-10px)" }
+};
+
+// src/components/data-display/MapPreview/MapMarkers.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var CoordinatesDisplay = styled3(Box3)(({ theme }) => ({
+  position: "absolute",
+  bottom: theme.spacing(2),
+  left: theme.spacing(2),
+  padding: theme.spacing(1, 1.5),
+  background: alpha5(theme.palette.background.paper, 0.95),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha5(theme.palette.divider, 0.2)}`,
+  borderRadius: theme.shape.borderRadius,
+  zIndex: 1
+}));
+var MapMarkers = ({ markers, centre, animated }) => {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsx5(Fragment2, { children: markers.map((markerItem, index) => /* @__PURE__ */ jsx5(
+    Box3,
+    {
+      "data-testid": `map-marker-${index}`,
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(
+              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
+              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+            )`,
+        zIndex: 3,
+        cursor: markerItem.onClick ? "pointer" : "default"
+      },
+      onClick: markerItem.onClick,
+      title: markerItem.title,
+      children: /* @__PURE__ */ jsx5(Tooltip2, { title: markerItem.description || markerItem.title || "", children: /* @__PURE__ */ jsx5(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: 32,
+            color: theme.palette.error.main,
+            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+            animation: animated ? "bounce 2s infinite" : "none",
+            "@keyframes bounce": BOUNCE_KEYFRAMES
+          }
+        }
+      ) })
+    },
+    `${markerItem.position.lat}-${markerItem.position.lng}-${index}`
+  )) });
+};
+var MapCoordinates = ({ position, zoom }) => /* @__PURE__ */ jsxs3(CoordinatesDisplay, { "data-testid": "coordinates-display", children: [
+  /* @__PURE__ */ jsxs3(Typography, { variant: "caption", sx: { fontFamily: "monospace" }, children: [
+    "Lat: ",
+    position.lat.toFixed(6),
+    ", Lng: ",
+    position.lng.toFixed(6)
+  ] }),
+  zoom > 0 && /* @__PURE__ */ jsxs3(Typography, { variant: "caption", sx: { fontFamily: "monospace", display: "block" }, children: [
+    "Zoom: ",
+    zoom
+  ] })
+] });
+
+// src/components/data-display/MapPreview/StaticMapView.tsx
+import { Box as Box5, useTheme as useTheme6 } from "@mui/material";
+import { useMemo } from "react";
+
+// src/components/data-display/MapPreview/mapProjection.ts
+var TILE_SIZE = 256;
+var EQUATOR_METRES_PER_PIXEL = 156543.03392;
+var SCALE_BAR_PIXELS = 100;
+var GEOCODE_DELAY_MS = 300;
+var project = (lat, lng) => {
+  const siny = Math.sin(lat * Math.PI / 180);
+  const boundedSiny = Math.max(-0.9999, Math.min(0.9999, siny));
+  return {
+    x: TILE_SIZE * (0.5 + lng / 360),
+    y: TILE_SIZE * (0.5 - Math.log((1 + boundedSiny) / (1 - boundedSiny)) / (4 * Math.PI))
+  };
+};
+var getTileCoordinates = (lat, lng, zoom) => {
+  const scale = 1 << zoom;
+  const world = project(lat, lng);
+  return {
+    x: Math.floor(Math.floor(world.x * scale) / TILE_SIZE),
+    y: Math.floor(Math.floor(world.y * scale) / TILE_SIZE)
+  };
+};
+var getScaleDistance = (zoom) => {
+  const distance = EQUATOR_METRES_PER_PIXEL / Math.pow(2, zoom) * SCALE_BAR_PIXELS;
+  if (distance >= 1e3) return `${Math.round(distance / 1e3)} km`;
+  if (distance >= 100) return `${Math.round(distance / 100) * 100} m`;
+  return `${Math.round(distance)} m`;
+};
+var MOCK_GEOCODE_RESULTS = {
+  "san francisco": { lat: 37.7749, lng: -122.4194 },
+  "new york": { lat: 40.7128, lng: -74.006 },
+  london: { lat: 51.5074, lng: -0.1278 },
+  tokyo: { lat: 35.6762, lng: 139.6503 },
+  paris: { lat: 48.8566, lng: 2.3522 }
+};
+var geocode = async (address) => {
+  await new Promise((resolve) => window.setTimeout(resolve, GEOCODE_DELAY_MS));
+  return MOCK_GEOCODE_RESULTS[address.toLowerCase().trim()] || null;
+};
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon2 from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import { alpha as alpha6, Box as Box4, Typography as Typography2, useTheme as useTheme4 } from "@mui/material";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx6(Box4, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs4("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx6(Box4, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx6(PlaceIcon, { sx: { fontSize: 20, color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  /* @__PURE__ */ jsx6(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx6(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx6(
+    Box4,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))"
+      },
+      children: /* @__PURE__ */ jsx6(
+        LocationIcon2,
+        {
+          sx: {
+            fontSize: 36,
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": BOUNCE_KEYFRAMES
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsxs4(
+    Box4,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha6(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: "0.75rem",
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          Box4,
+          {
+            sx: {
+              width: 40,
+              height: 2,
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: 2,
+                height: 6,
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: -2 },
+              "&::after": { right: 0, top: -2 }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx6(Typography2, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx6(
+    Box4,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: 40,
+        height: 40,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha6(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx6(
+        NavigationIcon,
+        {
+          sx: { fontSize: 24, color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+// src/components/data-display/MapPreview/MapTiles.tsx
+import { alpha as alpha7, useTheme as useTheme5 } from "@mui/material";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var VISIBLE_TILES = Math.ceil(800 / TILE_SIZE) + 2;
+var LABEL_MIN_ZOOM = 10;
+var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
+  const theme = useTheme5();
+  const borderOpacity = theme.palette.mode === "dark" ? 0.15 : 0.1;
+  const background = tileBackground(mapType, theme);
+  const half = Math.floor(VISIBLE_TILES / 2);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,
+        width: TILE_SIZE * VISIBLE_TILES,
+        height: TILE_SIZE * VISIBLE_TILES,
+        display: "grid",
+        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        transition: "transform 0.1s ease-out"
+      },
+      children: Array.from({ length: VISIBLE_TILES * VISIBLE_TILES }).map((_, index) => {
+        const tileX = (origin?.x || 0) + index % VISIBLE_TILES - half;
+        const tileY = (origin?.y || 0) + Math.floor(index / VISIBLE_TILES) - half;
+        return /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              width: TILE_SIZE,
+              height: TILE_SIZE,
+              border: `1px solid ${alpha7(theme.palette.divider, borderOpacity)}`,
+              background,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "10px",
+              color: alpha7(theme.palette.text.secondary, 0.3),
+              fontFamily: "monospace",
+              userSelect: "none"
+            },
+            children: zoom > LABEL_MIN_ZOOM && `${tileX},${tileY}`
+          },
+          `tile-${tileX}-${tileY}`
+        );
+      })
+    }
+  );
+};
+
+// src/components/data-display/MapPreview/StaticMapView.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var StaticMapView = ({
+  height,
+  zoom,
+  mapType,
+  marker,
+  markerPosition,
+  panOffset = { x: 0, y: 0 }
+}) => {
+  const theme = useTheme6();
+  const tileOrigin = useMemo(
+    () => markerPosition ? getTileCoordinates(markerPosition.lat, markerPosition.lng, zoom) : null,
+    [markerPosition, zoom]
+  );
+  return /* @__PURE__ */ jsxs5(
+    Box5,
+    {
+      "data-testid": "static-map-view",
+      sx: {
+        width: "100%",
+        height,
+        position: "relative",
+        background: surfaceBackground(mapType, theme),
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx8(MapTiles, { origin: tileOrigin, zoom, mapType, panOffset }),
+        /* @__PURE__ */ jsx8(MapRoads, {}),
+        marker && /* @__PURE__ */ jsx8(MapCentreMarker, {}),
+        /* @__PURE__ */ jsx8(MapDecorativePins, {}),
+        /* @__PURE__ */ jsx8(MapScaleBar, { zoom }),
+        /* @__PURE__ */ jsx8(MapCompass, {})
+      ]
+    }
+  );
+};
+
+// src/components/data-display/MapPreview/useMapPreview.ts
+import { useMemo as useMemo2, useRef as useRef2 } from "react";
+
+// src/components/data-display/MapPreview/MapPreview.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var ORIGIN = { x: 0, y: 0 };
+var useMapView = ({
+  coordinates,
+  initialZoom,
+  initialMapType
+}) => {
+  const [zoom, setZoom] = useState(initialZoom);
+  const [mapType, setMapType] = useState(initialMapType);
+  const [markerPosition, setMarkerPosition] = useState(coordinates);
+  const [panOffset, setPanOffset] = useState(ORIGIN);
+  useEffect(() => {
+    setMarkerPosition(coordinates);
+  }, [coordinates]);
+  const zoomTo = useCallback((next) => {
+    setZoom(next);
+    setPanOffset(ORIGIN);
+  }, []);
+  return {
+    zoom,
+    zoomTo,
+    mapType,
+    setMapType,
+    markerPosition,
+    setMarkerPosition,
+    panOffset,
+    setPanOffset
+  };
+};
+var useMapControls = ({
+  coordinates,
+  zoom,
+  mapType,
+  zoomTo,
+  setMapType,
+  setMarkerPosition,
+  setPanOffset,
+  containerRef
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleZoomIn = useCallback(() => zoomTo(Math.min(zoom + 1, MAX_ZOOM)), [zoom, zoomTo]);
+  const handleZoomOut = useCallback(() => zoomTo(Math.max(zoom - 1, MIN_ZOOM)), [zoom, zoomTo]);
+  const handleCenter = useCallback(() => {
+    setMarkerPosition({ ...coordinates });
+    setPanOffset(ORIGIN);
+  }, [coordinates, setMarkerPosition, setPanOffset]);
+  const handleToggleMapType = useCallback(() => {
+    const nextIndex = (MAP_TYPES.indexOf(mapType) + 1) % MAP_TYPES.length;
+    setMapType(MAP_TYPES[nextIndex]);
+  }, [mapType, setMapType]);
+  const handleToggleFullscreen = useCallback(() => {
+    if (!isFullscreen && containerRef.current) {
+      containerRef.current.requestFullscreen?.();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    }
+    setIsFullscreen((prev) => !prev);
+  }, [isFullscreen, containerRef]);
+  return {
+    isFullscreen,
+    handleZoomIn,
+    handleZoomOut,
+    handleCenter,
+    handleToggleMapType,
+    handleToggleFullscreen
+  };
+};
+var isOnMapSurface = (target) => target.dataset.testid === "static-map-view" || Boolean(target.closest('[data-testid="static-map-view"]'));
+var panTo = (event, start) => ({
+  x: start.offsetX + (event.clientX - start.x),
+  y: start.offsetY + (event.clientY - start.y)
+});
+var dragTo = (event, start) => ({
+  lat: start.lat + (event.clientY - start.y) * DRAG_DEGREES_PER_PIXEL,
+  lng: start.lng + (event.clientX - start.x) * DRAG_DEGREES_PER_PIXEL
+});
+var useMapPointer = ({
+  interactive,
+  markerPosition,
+  panOffset,
+  onMarkerDrag,
+  setMarkerPosition,
+  setPanOffset
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const dragStartRef = useRef(null);
+  const panStartRef = useRef(null);
+  const handleMouseDown = useCallback(
+    (event) => {
+      if (!interactive) return;
+      const { clientX: x, clientY: y } = event;
+      if (isOnMapSurface(event.target) && event.shiftKey) {
+        setIsPanning(true);
+        panStartRef.current = { x, y, offsetX: panOffset.x, offsetY: panOffset.y };
+        return;
+      }
+      setIsDragging(true);
+      dragStartRef.current = { x, y, lat: markerPosition.lat, lng: markerPosition.lng };
+    },
+    [interactive, markerPosition, panOffset]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      const panStart = panStartRef.current;
+      if (isPanning && panStart) {
+        setPanOffset(panTo(event, panStart));
+        return;
+      }
+      const dragStart = dragStartRef.current;
+      if (!isDragging || !dragStart) return;
+      const position = dragTo(event, dragStart);
+      setMarkerPosition(position);
+      onMarkerDrag?.(position);
+    },
+    [isDragging, isPanning, onMarkerDrag, setMarkerPosition, setPanOffset]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsPanning(false);
+    dragStartRef.current = null;
+    panStartRef.current = null;
+  }, []);
+  return { isDragging, isPanning, handleMouseDown, handleMouseMove, handleMouseUp };
+};
+var useMapSearch = ({
+  zoomTo,
+  setMarkerPosition
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const handleSearch = useCallback(
+    async (event) => {
+      if (event.key !== "Enter" || !searchValue) return;
+      setIsSearching(true);
+      try {
+        const result = await geocode(searchValue);
+        if (!result) return;
+        setMarkerPosition({ ...result });
+        zoomTo(CITY_ZOOM);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchValue, zoomTo, setMarkerPosition]
+  );
+  return { searchValue, setSearchValue, isSearching, handleSearch };
+};
+var useMapClick = ({
+  coordinates,
+  interactive,
+  isPanning,
+  onMapClick,
+  onMarkerDrag,
+  setMarkerPosition
+}) => useCallback(() => {
+  if (isPanning) return;
+  const coords = {
+    lat: coordinates.lat + (Math.random() - 0.5) * CLICK_JITTER_DEGREES,
+    lng: coordinates.lng + (Math.random() - 0.5) * CLICK_JITTER_DEGREES
+  };
+  onMapClick?.(coords.lat, coords.lng);
+  if (interactive && onMarkerDrag) {
+    setMarkerPosition(coords);
+    onMarkerDrag(coords);
+  }
+}, [coordinates, interactive, isPanning, onMapClick, onMarkerDrag, setMarkerPosition]);
+
+// src/components/data-display/MapPreview/useMapPreview.ts
+var useMapPreview = (props) => {
+  const { center, coordinates: legacyCoordinates, interactive, onMarkerDrag, onMapClick } = props;
+  const coordinates = useMemo2(
+    () => center || legacyCoordinates || { lat: 0, lng: 0 },
+    [center, legacyCoordinates]
+  );
+  const containerRef = useRef2(null);
+  const view = useMapView({
+    coordinates,
+    initialZoom: props.zoom,
+    initialMapType: props.mapType
+  });
+  const controls = useMapControls({
+    coordinates,
+    zoom: view.zoom,
+    mapType: view.mapType,
+    zoomTo: view.zoomTo,
+    setMapType: view.setMapType,
+    setMarkerPosition: view.setMarkerPosition,
+    setPanOffset: view.setPanOffset,
+    containerRef
+  });
+  const pointer = useMapPointer({
+    interactive,
+    markerPosition: view.markerPosition,
+    panOffset: view.panOffset,
+    onMarkerDrag,
+    setMarkerPosition: view.setMarkerPosition,
+    setPanOffset: view.setPanOffset
+  });
+  const search = useMapSearch({ zoomTo: view.zoomTo, setMarkerPosition: view.setMarkerPosition });
+  const handleMapClick = useMapClick({
+    coordinates,
+    interactive,
+    isPanning: pointer.isPanning,
+    onMapClick,
+    onMarkerDrag,
+    setMarkerPosition: view.setMarkerPosition
+  });
+  return { containerRef, view, controls, pointer, search, handleMapClick };
+};
+
+// src/components/data-display/MapPreview/MapPreview.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var MapContainer = styled4(Paper)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  borderRadius: theme.shape.borderRadius * 2,
+  overflow: "hidden",
+  background: `linear-gradient(135deg, ${alpha8(theme.palette.background.paper, 0.9)} 0%, ${alpha8(theme.palette.background.paper, 0.8)} 100%)`,
+  border: `1px solid ${alpha8(theme.palette.divider, 0.18)}`
+}));
+var MapWrapper = styled4(Box6)(({ height }) => ({
+  width: "100%",
+  height,
+  position: "relative"
+}));
+var cursorFor = (grabbing, interactive) => {
+  if (grabbing) return "grabbing";
+  return interactive ? "grab" : "default";
+};
+var MapPreview = (componentProps) => {
+  const props = resolveMapPreviewProps(componentProps);
+  const theme = useTheme7();
+  const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
+  const height = controls.isFullscreen ? "100vh" : props.height;
+  const grabbing = pointer.isDragging || pointer.isPanning;
+  return /* @__PURE__ */ jsx9(
+    MapContainer,
+    {
+      ref: containerRef,
+      elevation: props.variant === "glass" ? 0 : 2,
+      "data-testid": "map-preview-container",
+      role: "img",
+      "aria-label": `Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`,
+      tabIndex: 0,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      sx: glassStyles(props.variant, theme),
+      children: /* @__PURE__ */ jsxs6(
+        MapWrapper,
+        {
+          height,
+          onClick: handleMapClick,
+          onMouseDown: pointer.handleMouseDown,
+          onMouseMove: pointer.handleMouseMove,
+          onMouseUp: pointer.handleMouseUp,
+          onMouseLeave: pointer.handleMouseUp,
+          style: {
+            cursor: cursorFor(grabbing, props.interactive),
+            transition: props.animated ? "all 0.3s ease" : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx9(
+              StaticMapView,
+              {
+                height,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                marker: props.marker && props.markers.length === 0,
+                markerPosition: view.markerPosition,
+                panOffset: view.panOffset
+              }
+            ),
+            /* @__PURE__ */ jsx9(MapMarkers, { markers: props.markers, centre: view.markerPosition, animated: props.animated }),
+            /* @__PURE__ */ jsx9(
+              MapLayers,
+              {
+                settings: props,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                search,
+                controls
+              }
+            ),
+            /* @__PURE__ */ jsx9(MapCoordinates, { position: view.markerPosition, zoom: view.zoom })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  MapPreview
+};
+//# sourceMappingURL=MapPreview.js.map