@almadar/ui 2.48.6 → 2.48.7

package/dist/avl/index.cjs

@@ -16,9 +16,6 @@ var reactDom = require('react-dom');
 var LucideIcons = require('lucide-react');
 var evaluator = require('@almadar/evaluator');
 var patterns = require('@almadar/patterns');
-var reactLeaflet = require('react-leaflet');
-var L = require('leaflet');
-require('leaflet/dist/leaflet.css');
 var reactRouterDom = require('react-router-dom');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
@@ -71,7 +68,6 @@ var React125__namespace = /*#__PURE__*/_interopNamespace(React125);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
 var ELK__default = /*#__PURE__*/_interopDefault(ELK);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
-var L__default = /*#__PURE__*/_interopDefault(L);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
@@ -2669,6 +2665,14 @@ var init_cn = __esm({
     init_bundle_mjs();
   }
 });
+
+// components/atoms/Typography.tsx
+var Typography_exports = {};
+__export(Typography_exports, {
+  Heading: () => Heading,
+  Text: () => Text,
+  Typography: () => Typography
+});
 var variantStyles, colorStyles, weightStyles, defaultElements, typographySizeStyles, overflowStyles, Typography, sizeStyles, Heading, Text;
 var init_Typography = __esm({
   "components/atoms/Typography.tsx"() {
@@ -3048,6 +3052,18 @@ var init_EventBusProvider = __esm({
     EventBusContext = React125.createContext(null);
   }
 });
+
+// hooks/useEventBus.ts
+var useEventBus_exports = {};
+__export(useEventBus_exports, {
+  default: () => useEventBus_default,
+  getGlobalEventBus: () => getGlobalEventBus,
+  setGlobalEventBus: () => setGlobalEventBus,
+  useEmitEvent: () => useEmitEvent,
+  useEventBus: () => useEventBus,
+  useEventListener: () => useEventListener,
+  useEventSubscription: () => useEventSubscription
+});
 function setGlobalEventBus(bus) {
   if (typeof window !== "undefined") {
     window.__kflowEventBus = bus;
@@ -3086,7 +3102,7 @@ function useEmitEvent() {
     [eventBus]
   );
 }
-var log, subLog2, fallbackListeners, fallbackAnyListeners, fallbackEventBus;
+var log, subLog2, fallbackListeners, fallbackAnyListeners, fallbackEventBus, useEventSubscription, useEventBus_default;
 var init_useEventBus = __esm({
   "hooks/useEventBus.ts"() {
     "use client";
@@ -3157,6 +3173,8 @@ var init_useEventBus = __esm({
         };
       }
     };
+    useEventSubscription = useEventListener;
+    useEventBus_default = useEventBus;
   }
 });
 var paddingStyles, paddingXStyles, paddingYStyles, marginStyles, marginXStyles, marginYStyles, bgStyles, roundedStyles, shadowStyles, displayStyles, overflowStyles2, positionStyles, Box;
@@ -19351,120 +19369,147 @@ FloatingActionButton.displayName = "FloatingActionButton";
 
 // components/molecules/MapView.tsx
 init_Box();
-init_Typography();
 init_cn();
-init_useEventBus();
-var defaultIcon = L__default.default.icon({
-  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
-  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
-  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-  popupAnchor: [1, -34],
-  shadowSize: [41, 41]
+var MapViewImpl = React125.lazy(async () => {
+  const [reactLeaflet, leafletMod] = await Promise.all([
+    import('react-leaflet'),
+    import('leaflet')
+  ]);
+  await import('leaflet/dist/leaflet.css');
+  const { MapContainer, TileLayer, Marker, Popup, useMap } = reactLeaflet;
+  const L = leafletMod.default;
+  const defaultIcon = L.icon({
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41]
+  });
+  L.Marker.prototype.options.icon = defaultIcon;
+  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback123, useState: useState123 } = React125__namespace.default;
+  const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
+  const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
+  function MapUpdater({ centerLat, centerLng, zoom }) {
+    const map = useMap();
+    const prevRef = useRef87({ centerLat, centerLng, zoom });
+    useEffect87(() => {
+      const prev = prevRef.current;
+      if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
+        map.setView([centerLat, centerLng], zoom);
+        prevRef.current = { centerLat, centerLng, zoom };
+      }
+    }, [map, centerLat, centerLng, zoom]);
+    return null;
+  }
+  function MapClickHandler({ onMapClick }) {
+    const map = useMap();
+    useEffect87(() => {
+      if (!onMapClick) return;
+      const handler = (e) => {
+        onMapClick(e.latlng.lat, e.latlng.lng);
+      };
+      map.on("click", handler);
+      return () => {
+        map.off("click", handler);
+      };
+    }, [map, onMapClick]);
+    return null;
+  }
+  function MapViewInner({
+    markers = [],
+    centerLat = 51.505,
+    centerLng = -0.09,
+    zoom = 13,
+    height = "400px",
+    onMarkerClick,
+    onMapClick,
+    mapClickEvent,
+    markerClickEvent,
+    showClickedPin = false,
+    className,
+    showAttribution = true
+  }) {
+    const eventBus = useEventBus3();
+    const [clickedPosition, setClickedPosition] = useState123(null);
+    const handleMapClick = useCallback123((lat, lng) => {
+      if (showClickedPin) {
+        setClickedPosition({ lat, lng });
+      }
+      onMapClick?.(lat, lng);
+      if (mapClickEvent) {
+        eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
+      }
+    }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
+    const handleMarkerClick = useCallback123((marker) => {
+      onMarkerClick?.(marker);
+      if (markerClickEvent) {
+        eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
+      }
+    }, [onMarkerClick, markerClickEvent, eventBus]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        className: cn("relative w-full overflow-hidden rounded-lg", className),
+        style: { height },
+        "data-testid": "map-view",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          MapContainer,
+          {
+            center: [centerLat, centerLng],
+            zoom,
+            style: { height: "100%", width: "100%" },
+            attributionControl: showAttribution,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TileLayer,
+                {
+                  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                  attribution: showAttribution ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(MapUpdater, { centerLat, centerLng, zoom }),
+              /* @__PURE__ */ jsxRuntime.jsx(MapClickHandler, { onMapClick: handleMapClick }),
+              showClickedPin && clickedPosition && /* @__PURE__ */ jsxRuntime.jsx(Marker, { position: [clickedPosition.lat, clickedPosition.lng], children: /* @__PURE__ */ jsxRuntime.jsx(Popup, { children: /* @__PURE__ */ jsxRuntime.jsxs(Typography2, { variant: "body2", children: [
+                clickedPosition.lat.toFixed(5),
+                ", ",
+                clickedPosition.lng.toFixed(5)
+              ] }) }) }),
+              markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
+                Marker,
+                {
+                  position: [marker.lat, marker.lng],
+                  eventHandlers: onMarkerClick || markerClickEvent ? { click: () => handleMarkerClick(marker) } : void 0,
+                  children: marker.label ? /* @__PURE__ */ jsxRuntime.jsxs(Popup, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography2, { variant: "body2", children: marker.label }),
+                    marker.category ? /* @__PURE__ */ jsxRuntime.jsx(Typography2, { variant: "caption", className: "text-muted-foreground", children: marker.category }) : null
+                  ] }) : null
+                },
+                marker.id
+              ))
+            ]
+          },
+          `map-${centerLat}-${centerLng}-${zoom}`
+        )
+      }
+    );
+  }
+  return { default: MapViewInner };
 });
-L__default.default.Marker.prototype.options.icon = defaultIcon;
-function MapUpdater({ centerLat, centerLng, zoom }) {
-  const map = reactLeaflet.useMap();
-  const prevRef = React125.useRef({ centerLat, centerLng, zoom });
-  React125.useEffect(() => {
-    const prev = prevRef.current;
-    if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
-      map.setView([centerLat, centerLng], zoom);
-      prevRef.current = { centerLat, centerLng, zoom };
-    }
-  }, [map, centerLat, centerLng, zoom]);
-  return null;
-}
-function MapClickHandler({ onMapClick }) {
-  const map = reactLeaflet.useMap();
-  React125.useEffect(() => {
-    if (!onMapClick) return;
-    const handler = (e) => {
-      onMapClick(e.latlng.lat, e.latlng.lng);
-    };
-    map.on("click", handler);
-    return () => {
-      map.off("click", handler);
-    };
-  }, [map, onMapClick]);
-  return null;
-}
-function MapView({
-  markers = [],
-  centerLat = 51.505,
-  centerLng = -0.09,
-  zoom = 13,
-  height = "400px",
-  onMarkerClick,
-  onMapClick,
-  mapClickEvent,
-  markerClickEvent,
-  showClickedPin = false,
-  className,
-  showAttribution = true
-}) {
-  const eventBus = useEventBus();
-  const [clickedPosition, setClickedPosition] = React125.useState(null);
-  const handleMapClick = React125.useCallback((lat, lng) => {
-    if (showClickedPin) {
-      setClickedPosition({ lat, lng });
-    }
-    onMapClick?.(lat, lng);
-    if (mapClickEvent) {
-      eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
-    }
-  }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-  const handleMarkerClick = React125.useCallback((marker) => {
-    onMarkerClick?.(marker);
-    if (markerClickEvent) {
-      eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
-    }
-  }, [onMarkerClick, markerClickEvent, eventBus]);
+function MapView(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
+    React125.Suspense,
     {
-      className: cn("relative w-full overflow-hidden rounded-lg", className),
-      style: { height },
-      "data-testid": "map-view",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        reactLeaflet.MapContainer,
+      fallback: /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
         {
-          center: [centerLat, centerLng],
-          zoom,
-          style: { height: "100%", width: "100%" },
-          attributionControl: showAttribution,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactLeaflet.TileLayer,
-              {
-                url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                attribution: showAttribution ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : void 0
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(MapUpdater, { centerLat, centerLng, zoom }),
-            /* @__PURE__ */ jsxRuntime.jsx(MapClickHandler, { onMapClick: handleMapClick }),
-            showClickedPin && clickedPosition && /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Marker, { position: [clickedPosition.lat, clickedPosition.lng], children: /* @__PURE__ */ jsxRuntime.jsx(reactLeaflet.Popup, { children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body2", children: [
-              clickedPosition.lat.toFixed(5),
-              ", ",
-              clickedPosition.lng.toFixed(5)
-            ] }) }) }),
-            markers.map((marker) => /* @__PURE__ */ jsxRuntime.jsx(
-              reactLeaflet.Marker,
-              {
-                position: [marker.lat, marker.lng],
-                eventHandlers: onMarkerClick || markerClickEvent ? { click: () => handleMarkerClick(marker) } : void 0,
-                children: marker.label ? /* @__PURE__ */ jsxRuntime.jsxs(reactLeaflet.Popup, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: marker.label }),
-                  marker.category ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: marker.category }) : null
-                ] }) : null
-              },
-              marker.id
-            ))
-          ]
-        },
-        `map-${centerLat}-${centerLng}-${zoom}`
-      )
+          className: cn("relative w-full overflow-hidden rounded-lg bg-muted/20", props.className),
+          style: { height: props.height ?? "400px" },
+          "data-testid": "map-view"
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(MapViewImpl, { ...props })
     }
   );
 }

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { OrbitControls, Grid as Grid$1, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
 import * as React125 from 'react';
-import React125__default, { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, lazy, useContext, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
+import React125__default, { createContext, useState, useRef, useCallback, useEffect, lazy, useMemo, useLayoutEffect, useContext, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { MathUtils, Vector3, Quaternion, QuadraticBezierCurve3 } from 'three';
@@ -17,9 +17,6 @@ import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle, AlertTriangle, Info, CheckCircle, ChevronLeft, ChevronRight, FileWarning, Upload, Circle, Clock, CheckCircle2, Sun, Moon, ArrowUp, ArrowDown, MoreVertical, Minus, Star, XCircle, Play, RotateCcw, Pause, SkipForward, Eraser, Search, HelpCircle, ChevronUp, ArrowLeft, Plus, Image as Image$1, ZoomIn, Package, Menu as Menu$1, ZoomOut, Filter, FileQuestion, Inbox, FileText, Download, Printer, Bug, Send, MoreHorizontal, Settings, Bell, LogOut, Trash2, Zap, Sword, Move, Heart, Shield, Code, WrapText, Wrench, List, Calendar, Pencil, Eye, User, Tag, DollarSign } from 'lucide-react';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { getComponentForPattern as getComponentForPattern$1, getPatternDefinition, isEntityAwarePattern } from '@almadar/patterns';
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
-import L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
 import { useLocation, Link, Outlet } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -2622,6 +2619,14 @@ var init_cn = __esm({
     init_bundle_mjs();
   }
 });
+
+// components/atoms/Typography.tsx
+var Typography_exports = {};
+__export(Typography_exports, {
+  Heading: () => Heading,
+  Text: () => Text,
+  Typography: () => Typography
+});
 var variantStyles, colorStyles, weightStyles, defaultElements, typographySizeStyles, overflowStyles, Typography, sizeStyles, Heading, Text;
 var init_Typography = __esm({
   "components/atoms/Typography.tsx"() {
@@ -3001,6 +3006,18 @@ var init_EventBusProvider = __esm({
     EventBusContext = createContext(null);
   }
 });
+
+// hooks/useEventBus.ts
+var useEventBus_exports = {};
+__export(useEventBus_exports, {
+  default: () => useEventBus_default,
+  getGlobalEventBus: () => getGlobalEventBus,
+  setGlobalEventBus: () => setGlobalEventBus,
+  useEmitEvent: () => useEmitEvent,
+  useEventBus: () => useEventBus,
+  useEventListener: () => useEventListener,
+  useEventSubscription: () => useEventSubscription
+});
 function setGlobalEventBus(bus) {
   if (typeof window !== "undefined") {
     window.__kflowEventBus = bus;
@@ -3039,7 +3056,7 @@ function useEmitEvent() {
     [eventBus]
   );
 }
-var log, subLog2, fallbackListeners, fallbackAnyListeners, fallbackEventBus;
+var log, subLog2, fallbackListeners, fallbackAnyListeners, fallbackEventBus, useEventSubscription, useEventBus_default;
 var init_useEventBus = __esm({
   "hooks/useEventBus.ts"() {
     "use client";
@@ -3110,6 +3127,8 @@ var init_useEventBus = __esm({
         };
       }
     };
+    useEventSubscription = useEventListener;
+    useEventBus_default = useEventBus;
   }
 });
 var paddingStyles, paddingXStyles, paddingYStyles, marginStyles, marginXStyles, marginYStyles, bgStyles, roundedStyles, shadowStyles, displayStyles, overflowStyles2, positionStyles, Box;
@@ -19304,120 +19323,147 @@ FloatingActionButton.displayName = "FloatingActionButton";
 
 // components/molecules/MapView.tsx
 init_Box();
-init_Typography();
 init_cn();
-init_useEventBus();
-var defaultIcon = L.icon({
-  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
-  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
-  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-  popupAnchor: [1, -34],
-  shadowSize: [41, 41]
+var MapViewImpl = lazy(async () => {
+  const [reactLeaflet, leafletMod] = await Promise.all([
+    import('react-leaflet'),
+    import('leaflet')
+  ]);
+  await import('leaflet/dist/leaflet.css');
+  const { MapContainer, TileLayer, Marker, Popup, useMap } = reactLeaflet;
+  const L = leafletMod.default;
+  const defaultIcon = L.icon({
+    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    shadowSize: [41, 41]
+  });
+  L.Marker.prototype.options.icon = defaultIcon;
+  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback123, useState: useState123 } = React125__default;
+  const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
+  const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
+  function MapUpdater({ centerLat, centerLng, zoom }) {
+    const map = useMap();
+    const prevRef = useRef87({ centerLat, centerLng, zoom });
+    useEffect87(() => {
+      const prev = prevRef.current;
+      if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
+        map.setView([centerLat, centerLng], zoom);
+        prevRef.current = { centerLat, centerLng, zoom };
+      }
+    }, [map, centerLat, centerLng, zoom]);
+    return null;
+  }
+  function MapClickHandler({ onMapClick }) {
+    const map = useMap();
+    useEffect87(() => {
+      if (!onMapClick) return;
+      const handler = (e) => {
+        onMapClick(e.latlng.lat, e.latlng.lng);
+      };
+      map.on("click", handler);
+      return () => {
+        map.off("click", handler);
+      };
+    }, [map, onMapClick]);
+    return null;
+  }
+  function MapViewInner({
+    markers = [],
+    centerLat = 51.505,
+    centerLng = -0.09,
+    zoom = 13,
+    height = "400px",
+    onMarkerClick,
+    onMapClick,
+    mapClickEvent,
+    markerClickEvent,
+    showClickedPin = false,
+    className,
+    showAttribution = true
+  }) {
+    const eventBus = useEventBus3();
+    const [clickedPosition, setClickedPosition] = useState123(null);
+    const handleMapClick = useCallback123((lat, lng) => {
+      if (showClickedPin) {
+        setClickedPosition({ lat, lng });
+      }
+      onMapClick?.(lat, lng);
+      if (mapClickEvent) {
+        eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
+      }
+    }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
+    const handleMarkerClick = useCallback123((marker) => {
+      onMarkerClick?.(marker);
+      if (markerClickEvent) {
+        eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
+      }
+    }, [onMarkerClick, markerClickEvent, eventBus]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: cn("relative w-full overflow-hidden rounded-lg", className),
+        style: { height },
+        "data-testid": "map-view",
+        children: /* @__PURE__ */ jsxs(
+          MapContainer,
+          {
+            center: [centerLat, centerLng],
+            zoom,
+            style: { height: "100%", width: "100%" },
+            attributionControl: showAttribution,
+            children: [
+              /* @__PURE__ */ jsx(
+                TileLayer,
+                {
+                  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                  attribution: showAttribution ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(MapUpdater, { centerLat, centerLng, zoom }),
+              /* @__PURE__ */ jsx(MapClickHandler, { onMapClick: handleMapClick }),
+              showClickedPin && clickedPosition && /* @__PURE__ */ jsx(Marker, { position: [clickedPosition.lat, clickedPosition.lng], children: /* @__PURE__ */ jsx(Popup, { children: /* @__PURE__ */ jsxs(Typography2, { variant: "body2", children: [
+                clickedPosition.lat.toFixed(5),
+                ", ",
+                clickedPosition.lng.toFixed(5)
+              ] }) }) }),
+              markers.map((marker) => /* @__PURE__ */ jsx(
+                Marker,
+                {
+                  position: [marker.lat, marker.lng],
+                  eventHandlers: onMarkerClick || markerClickEvent ? { click: () => handleMarkerClick(marker) } : void 0,
+                  children: marker.label ? /* @__PURE__ */ jsxs(Popup, { children: [
+                    /* @__PURE__ */ jsx(Typography2, { variant: "body2", children: marker.label }),
+                    marker.category ? /* @__PURE__ */ jsx(Typography2, { variant: "caption", className: "text-muted-foreground", children: marker.category }) : null
+                  ] }) : null
+                },
+                marker.id
+              ))
+            ]
+          },
+          `map-${centerLat}-${centerLng}-${zoom}`
+        )
+      }
+    );
+  }
+  return { default: MapViewInner };
 });
-L.Marker.prototype.options.icon = defaultIcon;
-function MapUpdater({ centerLat, centerLng, zoom }) {
-  const map = useMap();
-  const prevRef = useRef({ centerLat, centerLng, zoom });
-  useEffect(() => {
-    const prev = prevRef.current;
-    if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
-      map.setView([centerLat, centerLng], zoom);
-      prevRef.current = { centerLat, centerLng, zoom };
-    }
-  }, [map, centerLat, centerLng, zoom]);
-  return null;
-}
-function MapClickHandler({ onMapClick }) {
-  const map = useMap();
-  useEffect(() => {
-    if (!onMapClick) return;
-    const handler = (e) => {
-      onMapClick(e.latlng.lat, e.latlng.lng);
-    };
-    map.on("click", handler);
-    return () => {
-      map.off("click", handler);
-    };
-  }, [map, onMapClick]);
-  return null;
-}
-function MapView({
-  markers = [],
-  centerLat = 51.505,
-  centerLng = -0.09,
-  zoom = 13,
-  height = "400px",
-  onMarkerClick,
-  onMapClick,
-  mapClickEvent,
-  markerClickEvent,
-  showClickedPin = false,
-  className,
-  showAttribution = true
-}) {
-  const eventBus = useEventBus();
-  const [clickedPosition, setClickedPosition] = useState(null);
-  const handleMapClick = useCallback((lat, lng) => {
-    if (showClickedPin) {
-      setClickedPosition({ lat, lng });
-    }
-    onMapClick?.(lat, lng);
-    if (mapClickEvent) {
-      eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
-    }
-  }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-  const handleMarkerClick = useCallback((marker) => {
-    onMarkerClick?.(marker);
-    if (markerClickEvent) {
-      eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
-    }
-  }, [onMarkerClick, markerClickEvent, eventBus]);
+function MapView(props) {
   return /* @__PURE__ */ jsx(
-    Box,
+    Suspense,
     {
-      className: cn("relative w-full overflow-hidden rounded-lg", className),
-      style: { height },
-      "data-testid": "map-view",
-      children: /* @__PURE__ */ jsxs(
-        MapContainer,
+      fallback: /* @__PURE__ */ jsx(
+        Box,
         {
-          center: [centerLat, centerLng],
-          zoom,
-          style: { height: "100%", width: "100%" },
-          attributionControl: showAttribution,
-          children: [
-            /* @__PURE__ */ jsx(
-              TileLayer,
-              {
-                url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                attribution: showAttribution ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(MapUpdater, { centerLat, centerLng, zoom }),
-            /* @__PURE__ */ jsx(MapClickHandler, { onMapClick: handleMapClick }),
-            showClickedPin && clickedPosition && /* @__PURE__ */ jsx(Marker, { position: [clickedPosition.lat, clickedPosition.lng], children: /* @__PURE__ */ jsx(Popup, { children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
-              clickedPosition.lat.toFixed(5),
-              ", ",
-              clickedPosition.lng.toFixed(5)
-            ] }) }) }),
-            markers.map((marker) => /* @__PURE__ */ jsx(
-              Marker,
-              {
-                position: [marker.lat, marker.lng],
-                eventHandlers: onMarkerClick || markerClickEvent ? { click: () => handleMarkerClick(marker) } : void 0,
-                children: marker.label ? /* @__PURE__ */ jsxs(Popup, { children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "body2", children: marker.label }),
-                  marker.category ? /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: marker.category }) : null
-                ] }) : null
-              },
-              marker.id
-            ))
-          ]
-        },
-        `map-${centerLat}-${centerLng}-${zoom}`
-      )
+          className: cn("relative w-full overflow-hidden rounded-lg bg-muted/20", props.className),
+          style: { height: props.height ?? "400px" },
+          "data-testid": "map-view"
+        }
+      ),
+      children: /* @__PURE__ */ jsx(MapViewImpl, { ...props })
     }
   );
 }