@djangocfg/ui-tools 2.1.109 → 2.1.111

package/README.md

@@ -6,8 +6,6 @@ Heavy React tools with lazy loading (React.lazy + Suspense).
 
 **Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
 
-**[Live Demo & Props](https://djangocfg.com/demo/)**
-
 ## Install
 
 ```bash
@@ -20,14 +18,16 @@ This package contains heavy components that are loaded lazily to keep your initi
 
 | Package | Use Case |
 |---------|----------|
-| `@djangocfg/ui-core` | Lightweight UI components (60 components) |
+| `@djangocfg/ui-core` | Lightweight UI components (60+ components) |
 | `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Tools (9)
+## Tools (11)
 
 | Tool | Bundle Size | Description |
 |------|-------------|-------------|
+| `Gallery` | ~50KB | Image/video gallery with carousel, grid, lightbox |
+| `Map` | ~800KB | MapLibre GL maps with markers, clusters, layers |
 | `Mermaid` | ~800KB | Diagram rendering |
 | `PrettyCode` | ~500KB | Code syntax highlighting |
 | `OpenapiViewer` | ~400KB | OpenAPI schema viewer & playground |
@@ -38,40 +38,189 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `JsonTree` | ~100KB | JSON visualization |
 | `ImageViewer` | ~50KB | Image viewer with zoom/pan/rotate |
 
-## Components
+## Tree-Shakeable Imports
+
+For better bundle optimization, use subpath imports:
+
+```tsx
+// Only loads Gallery (~50KB instead of full package)
+import { Gallery, GalleryLightbox } from '@djangocfg/ui-tools/gallery';
+
+// Only loads Map (~800KB)
+import { MapContainer, MapMarker } from '@djangocfg/ui-tools/map';
+```
+
+## Gallery
+
+Full-featured image/video gallery with carousel, grid view, and fullscreen lightbox.
+
+```tsx
+import { Gallery } from '@djangocfg/ui-tools/gallery';
+
+const images = [
+  { id: '1', src: '/photo1.jpg', alt: 'Photo 1' },
+  { id: '2', src: '/photo2.jpg', alt: 'Photo 2' },
+  { id: '3', src: '/video.mp4', alt: 'Video', type: 'video' },
+];
+
+function PhotoGallery() {
+  return (
+    <Gallery
+      images={images}
+      previewMode="carousel"  // or "grid"
+      showThumbnails
+      enableLightbox
+      aspectRatio={16 / 9}
+    />
+  );
+}
+```
+
+### Gallery Components
 
 | Component | Description |
 |-----------|-------------|
-| `Markdown` | Markdown renderer with GFM support |
+| `Gallery` | Complete gallery with carousel/grid + lightbox |
+| `GalleryCompact` | Minimal carousel for cards |
+| `GalleryGrid` | Grid layout with "show more" badge |
+| `GalleryLightbox` | Fullscreen lightbox viewer |
+| `GalleryCarousel` | Embla-based carousel |
+| `GalleryThumbnails` | Thumbnail strip navigation |
 
-## Stores
+### Gallery Hooks
 
-| Store | Description |
-|-------|-------------|
-| `useMediaCacheStore` | Media caching for video/audio players |
+| Hook | Description |
+|------|-------------|
+| `useGallery` | Gallery state management |
+| `useSwipe` | Touch swipe gestures |
+| `usePinchZoom` | Pinch-to-zoom for mobile |
+| `usePreloadImages` | Image preloading |
+
+## Map
 
-## Usage
+MapLibre GL maps with React components for markers, clusters, popups, and custom layers.
 
 ```tsx
-import { VideoPlayer, AudioPlayer, Mermaid } from '@djangocfg/ui-tools';
-import { Markdown } from '@djangocfg/ui-tools';
+import { MapContainer, MapMarker, MapPopup } from '@djangocfg/ui-tools/map';
+
+const markers = [
+  { id: '1', lat: 37.7749, lng: -122.4194, title: 'San Francisco' },
+  { id: '2', lat: 34.0522, lng: -118.2437, title: 'Los Angeles' },
+];
 
-function Example() {
+function LocationMap() {
   return (
-    <>
-      <VideoPlayer src="https://example.com/video.mp4" />
-      <AudioPlayer src="https://example.com/audio.mp3" />
-      <Mermaid chart={`graph TD; A-->B;`} />
-      <Markdown content="# Hello **World**" />
-    </>
+    <MapContainer
+      initialViewport={{ latitude: 36, longitude: -119, zoom: 5 }}
+      style="streets"
+    >
+      {markers.map((m) => (
+        <MapMarker key={m.id} latitude={m.lat} longitude={m.lng}>
+          <MapPopup>{m.title}</MapPopup>
+        </MapMarker>
+      ))}
+    </MapContainer>
   );
 }
 ```
 
-## JSON Form Example
+### Map Components
+
+| Component | Description |
+|-----------|-------------|
+| `MapContainer` | Main map container with controls |
+| `MapMarker` | Custom marker with React children |
+| `MapPopup` | Popup attached to marker |
+| `MapCluster` | Clustered markers |
+| `MapSource` / `MapLayer` | Custom GeoJSON layers |
+| `MapControls` | Navigation controls |
+| `MapLegend` | Map legend component |
+| `LayerSwitcher` | Toggle map layers |
+| `DrawControl` | Drawing tools (optional) |
+| `GeocoderControl` | Search/geocoding (optional) |
+
+### Map Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useMap` | Access map instance |
+| `useMapControl` | Programmatic map control |
+| `useMarkers` | Marker management |
+| `useMapEvents` | Map event handlers |
+| `useMapViewport` | Viewport state |
+| `useMapLayers` | Layer management |
+
+### Map Styles
+
+```tsx
+import { MAP_STYLES, getMapStyle } from '@djangocfg/ui-tools/map';
+
+// Available styles: streets, satellite, dark, light, terrain
+<MapContainer style="dark" />
+```
+
+### Layer Utilities
 
 ```tsx
-import { JsonForm } from '@djangocfg/ui-tools';
+import {
+  createClusterLayers,
+  createPointLayer,
+  createPolygonLayer,
+  createLineLayer,
+} from '@djangocfg/ui-tools/map';
+```
+
+## Video Player
+
+```tsx
+import { VideoPlayer } from '@djangocfg/ui-tools';
+
+<VideoPlayer
+  src="https://example.com/video.mp4"
+  poster="/thumbnail.jpg"
+  autoplay={false}
+/>
+```
+
+## Audio Player
+
+```tsx
+import { HybridAudioPlayer } from '@djangocfg/ui-tools';
+
+<HybridAudioPlayer
+  src="https://example.com/audio.mp3"
+  showWaveform
+/>
+```
+
+## Mermaid Diagrams
+
+```tsx
+import { Mermaid } from '@djangocfg/ui-tools';
+
+<Mermaid chart={`
+  graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Action]
+    B -->|No| D[End]
+`} />
+```
+
+## Code Highlighting
+
+```tsx
+import { PrettyCode } from '@djangocfg/ui-tools';
+
+<PrettyCode
+  code={`const hello = "world";`}
+  language="typescript"
+/>
+```
+
+## JSON Form
+
+```tsx
+import { JsonSchemaForm } from '@djangocfg/ui-tools';
 
 const schema = {
   type: 'object',
@@ -81,42 +230,76 @@ const schema = {
   },
 };
 
-function Form() {
-  return (
-    <JsonForm
-      schema={schema}
-      onSubmit={(data) => console.log(data)}
-    />
-  );
-}
+<JsonSchemaForm
+  schema={schema}
+  onSubmit={(data) => console.log(data)}
+/>
 ```
 
-## Code Highlighting Example
+## Components
 
-```tsx
-import { PrettyCode } from '@djangocfg/ui-tools';
+| Component | Description |
+|-----------|-------------|
+| `Markdown` | Markdown renderer with GFM support |
 
-function CodeBlock() {
-  return (
-    <PrettyCode
-      code={`const hello = "world";`}
-      language="typescript"
-    />
-  );
-}
-```
+## Stores
+
+| Store | Description |
+|-------|-------------|
+| `useMediaCacheStore` | Media caching for video/audio players |
 
 ## Lazy Loading
 
-All tools use React.lazy + Suspense for automatic code splitting:
+All heavy tools have unified lazy-loaded versions with built-in Suspense fallbacks:
+
+```tsx
+import {
+  LazyMapContainer,      // ~800KB
+  LazyMermaid,           // ~800KB
+  LazyPrettyCode,        // ~500KB
+  LazyOpenapiViewer,     // ~400KB
+  LazyJsonSchemaForm,    // ~300KB
+  LazyLottiePlayer,      // ~200KB
+  LazyHybridAudioPlayer, // ~200KB
+  LazyVideoPlayer,       // ~150KB
+  LazyJsonTree,          // ~100KB
+  LazyImageViewer,       // ~50KB
+} from '@djangocfg/ui-tools';
+
+// Just use them - no Suspense wrapper needed!
+<LazyMermaid chart={diagram} />
+<LazyMapContainer initialViewport={viewport} />
+<LazyVideoPlayer src="/video.mp4" />
+```
+
+### Custom Lazy Components
+
+Create your own lazy components with `createLazyComponent`:
 
 ```tsx
-// Each tool is loaded only when rendered
-<Suspense fallback={<Spinner />}>
-  <Mermaid chart={diagram} />
-</Suspense>
+import { createLazyComponent, CardLoadingFallback } from '@djangocfg/ui-tools';
+
+const LazyMyComponent = createLazyComponent(
+  () => import('./MyHeavyComponent'),
+  {
+    displayName: 'LazyMyComponent',
+    fallback: <CardLoadingFallback title="Loading..." minHeight={200} />,
+  }
+);
 ```
 
+### Loading Fallbacks
+
+Built-in fallback components for different use cases:
+
+| Component | Use Case |
+|-----------|----------|
+| `LoadingFallback` | Generic spinner with optional text |
+| `CardLoadingFallback` | Card-styled loading with title |
+| `MapLoadingFallback` | Map-specific with location icon |
+| `Spinner` | Simple spinning loader |
+| `LazyWrapper` | Suspense wrapper with configurable fallback |
+
 ## Requirements
 
 - React >= 18 or >= 19
@@ -124,6 +307,16 @@ All tools use React.lazy + Suspense for automatic code splitting:
 - Zustand >= 5
 - @djangocfg/ui-core (peer dependency)
 
----
+### Optional Dependencies (for Map)
+
+```bash
+# For drawing tools
+pnpm add @mapbox/mapbox-gl-draw
+
+# For geocoding/search
+pnpm add @maplibre/maplibre-gl-geocoder
+```
+
+## License
 
-**[Full documentation & examples](https://djangocfg.com/demo/)**
+MIT

package/dist/JsonSchemaForm-65NLLK56.mjs

@@ -0,0 +1,4 @@
+export { JsonSchemaForm } from './chunk-7IIRYG4S.mjs';
+import './chunk-CGILA3WO.mjs';
+//# sourceMappingURL=JsonSchemaForm-65NLLK56.mjs.map
+//# sourceMappingURL=JsonSchemaForm-65NLLK56.mjs.map

package/dist/JsonSchemaForm-65NLLK56.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-65NLLK56.mjs"}

package/dist/JsonSchemaForm-PY6DH3HE.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkPNZSJN6T_cjs = require('./chunk-PNZSJN6T.cjs');
+require('./chunk-WGEGR3DF.cjs');
+
+
+
+Object.defineProperty(exports, "JsonSchemaForm", {
+  enumerable: true,
+  get: function () { return chunkPNZSJN6T_cjs.JsonSchemaForm; }
+});
+//# sourceMappingURL=JsonSchemaForm-PY6DH3HE.cjs.map
+//# sourceMappingURL=JsonSchemaForm-PY6DH3HE.cjs.map

package/dist/JsonSchemaForm-PY6DH3HE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonSchemaForm-PY6DH3HE.cjs"}

package/dist/JsonTree-6RYAOPSS.mjs

@@ -0,0 +1,4 @@
+export { JsonTree_default as default } from './chunk-W6YHQI4F.mjs';
+import './chunk-CGILA3WO.mjs';
+//# sourceMappingURL=JsonTree-6RYAOPSS.mjs.map
+//# sourceMappingURL=JsonTree-6RYAOPSS.mjs.map

package/dist/JsonTree-6RYAOPSS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonTree-6RYAOPSS.mjs"}

package/dist/JsonTree-7OH6CIHT.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var chunk5QT3QYFZ_cjs = require('./chunk-5QT3QYFZ.cjs');
+require('./chunk-WGEGR3DF.cjs');
+
+
+
+module.exports = chunk5QT3QYFZ_cjs.JsonTree_default;
+//# sourceMappingURL=JsonTree-7OH6CIHT.cjs.map
+//# sourceMappingURL=JsonTree-7OH6CIHT.cjs.map

package/dist/JsonTree-7OH6CIHT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"JsonTree-7OH6CIHT.cjs"}

package/dist/MapContainer-GXQLP5WY.mjs

@@ -0,0 +1,214 @@
+import { __name } from './chunk-CGILA3WO.mjs';
+import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+import Map from 'react-map-gl/maplibre';
+import { RotateCcw, ExternalLink } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var MapContext = createContext(null);
+var DEFAULT_VIEWPORT = {
+  longitude: 115.1889,
+  latitude: -8.4095,
+  zoom: 10,
+  bearing: 0,
+  pitch: 0
+};
+function MapProvider({ children, initialViewport }) {
+  const mapRef = useRef(null);
+  const initialViewportRef = useRef({
+    ...DEFAULT_VIEWPORT,
+    ...initialViewport
+  });
+  const [viewport, setViewportState] = useState(initialViewportRef.current);
+  const [markers, setMarkers] = useState([]);
+  const [selectedMarker, setSelectedMarker] = useState(null);
+  const [hoveredFeature, setHoveredFeature] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const setViewport = useCallback((newViewport) => {
+    setViewportState((prev) => ({ ...prev, ...newViewport }));
+  }, []);
+  const resetToInitial = useCallback(() => {
+    const map = mapRef.current;
+    if (map) {
+      map.flyTo({
+        center: [initialViewportRef.current.longitude, initialViewportRef.current.latitude],
+        zoom: initialViewportRef.current.zoom,
+        bearing: initialViewportRef.current.bearing ?? 0,
+        pitch: initialViewportRef.current.pitch ?? 0,
+        duration: 1e3
+      });
+    }
+  }, []);
+  const value = useMemo(
+    () => ({
+      mapRef,
+      viewport,
+      setViewport,
+      initialViewport: initialViewportRef.current,
+      resetToInitial,
+      markers,
+      setMarkers,
+      selectedMarker,
+      setSelectedMarker,
+      hoveredFeature,
+      setHoveredFeature,
+      isLoaded,
+      setIsLoaded
+    }),
+    [viewport, setViewport, resetToInitial, markers, selectedMarker, hoveredFeature, isLoaded]
+  );
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value, children });
+}
+__name(MapProvider, "MapProvider");
+function useMapContext() {
+  const context = useContext(MapContext);
+  if (!context) {
+    throw new Error("useMapContext must be used within a MapProvider");
+  }
+  return context;
+}
+__name(useMapContext, "useMapContext");
+
+// src/tools/Map/styles/index.ts
+var MAP_STYLES = {
+  light: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+  streets: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
+  satellite: "https://api.maptiler.com/maps/satellite/style.json"
+};
+function MapInner({
+  children,
+  mapStyle = "light",
+  interactiveLayerIds,
+  style,
+  cursor,
+  attributionControl = true,
+  reuseMaps = true,
+  openInMapsUrl,
+  openInMapsLabel = "Open in Maps",
+  autoResetDelay = 0,
+  showResetButton = false
+}) {
+  const { mapRef, viewport, setViewport, setIsLoaded, resetToInitial, initialViewport } = useMapContext();
+  const resetTimerRef = useRef(null);
+  const isInteractingRef = useRef(false);
+  const hasViewportChanged = Math.abs(viewport.longitude - initialViewport.longitude) > 1e-4 || Math.abs(viewport.latitude - initialViewport.latitude) > 1e-4 || Math.abs(viewport.zoom - initialViewport.zoom) > 0.1;
+  const handleMove = useCallback(
+    (evt) => {
+      setViewport({
+        longitude: evt.viewState.longitude,
+        latitude: evt.viewState.latitude,
+        zoom: evt.viewState.zoom,
+        bearing: evt.viewState.bearing,
+        pitch: evt.viewState.pitch
+      });
+    },
+    [setViewport]
+  );
+  const handleMoveStart = useCallback(() => {
+    isInteractingRef.current = true;
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = null;
+    }
+  }, []);
+  const handleMoveEnd = useCallback(() => {
+    isInteractingRef.current = false;
+    if (autoResetDelay > 0) {
+      resetTimerRef.current = setTimeout(() => {
+        if (!isInteractingRef.current) {
+          resetToInitial();
+        }
+      }, autoResetDelay);
+    }
+  }, [autoResetDelay, resetToInitial]);
+  const handleLoad = useCallback(() => {
+    setIsLoaded(true);
+  }, [setIsLoaded]);
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+    };
+  }, []);
+  const resolvedStyle = mapStyle in MAP_STYLES ? MAP_STYLES[mapStyle] : mapStyle;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Map,
+      {
+        ref: mapRef,
+        ...viewport,
+        onMove: handleMove,
+        onMoveStart: handleMoveStart,
+        onMoveEnd: handleMoveEnd,
+        onLoad: handleLoad,
+        mapStyle: resolvedStyle,
+        interactiveLayerIds,
+        attributionControl: attributionControl ? {} : false,
+        reuseMaps,
+        style: {
+          width: "100%",
+          height: "100%",
+          ...style
+        },
+        cursor,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 right-3 flex items-center gap-2", children: [
+      showResetButton && hasViewportChanged && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: resetToInitial,
+          className: cn(
+            "inline-flex items-center gap-2 px-3 py-2 rounded-lg",
+            "bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium",
+            "hover:bg-background transition-colors shadow-sm border border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "w-4 h-4" }),
+            "Reset"
+          ]
+        }
+      ),
+      openInMapsUrl && /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: openInMapsUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: cn(
+            "inline-flex items-center gap-2 px-4 py-2 rounded-lg",
+            "bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium",
+            "hover:bg-background transition-colors shadow-sm border border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4" }),
+            openInMapsLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+__name(MapInner, "MapInner");
+function MapContainer({
+  children,
+  initialViewport,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className, style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ jsx(MapProvider, { initialViewport, children: /* @__PURE__ */ jsx(MapInner, { ...props, children }) }) });
+}
+__name(MapContainer, "MapContainer");
+function MapView(props) {
+  return /* @__PURE__ */ jsx(MapInner, { ...props });
+}
+__name(MapView, "MapView");
+
+export { MapContainer, MapView };
+//# sourceMappingURL=MapContainer-GXQLP5WY.mjs.map
+//# sourceMappingURL=MapContainer-GXQLP5WY.mjs.map

package/dist/MapContainer-GXQLP5WY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/Map/context/MapContext.tsx","../src/tools/Map/styles/index.ts","../src/tools/Map/components/MapContainer.tsx"],"names":["useRef","useCallback","jsx"],"mappings":"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","file":"MapContainer-GXQLP5WY.mjs","sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useMemo,\n  useCallback,\n  type ReactNode,\n} from 'react'\nimport type { MapRef } from 'react-map-gl/maplibre'\nimport type { MapContextValue, MapViewport, MarkerData } from '../types'\n\nconst MapContext = createContext<MapContextValue | null>(null)\n\nexport interface MapProviderProps {\n  children: ReactNode\n  initialViewport?: Partial<MapViewport>\n}\n\nconst DEFAULT_VIEWPORT: MapViewport = {\n  longitude: 115.1889,\n  latitude: -8.4095,\n  zoom: 10,\n  bearing: 0,\n  pitch: 0,\n}\n\nexport function MapProvider({ children, initialViewport }: MapProviderProps) {\n  const mapRef = useRef<MapRef | null>(null)\n  const initialViewportRef = useRef<MapViewport>({\n    ...DEFAULT_VIEWPORT,\n    ...initialViewport,\n  })\n  const [viewport, setViewportState] = useState<MapViewport>(initialViewportRef.current)\n  const [markers, setMarkers] = useState<MarkerData[]>([])\n  const [selectedMarker, setSelectedMarker] = useState<MarkerData | null>(null)\n  const [hoveredFeature, setHoveredFeature] = useState<GeoJSON.Feature | null>(null)\n  const [isLoaded, setIsLoaded] = useState(false)\n\n  const setViewport = useCallback((newViewport: Partial<MapViewport>) => {\n    setViewportState((prev) => ({ ...prev, ...newViewport }))\n  }, [])\n\n  const resetToInitial = useCallback(() => {\n    const map = mapRef.current\n    if (map) {\n      map.flyTo({\n        center: [initialViewportRef.current.longitude, initialViewportRef.current.latitude],\n        zoom: initialViewportRef.current.zoom,\n        bearing: initialViewportRef.current.bearing ?? 0,\n        pitch: initialViewportRef.current.pitch ?? 0,\n        duration: 1000,\n      })\n    }\n  }, [])\n\n  const value = useMemo<MapContextValue>(\n    () => ({\n      mapRef,\n      viewport,\n      setViewport,\n      initialViewport: initialViewportRef.current,\n      resetToInitial,\n      markers,\n      setMarkers,\n      selectedMarker,\n      setSelectedMarker,\n      hoveredFeature,\n      setHoveredFeature,\n      isLoaded,\n      setIsLoaded,\n    }),\n    [viewport, setViewport, resetToInitial, markers, selectedMarker, hoveredFeature, isLoaded]\n  )\n\n  return <MapContext.Provider value={value}>{children}</MapContext.Provider>\n}\n\nexport function useMapContext(): MapContextValue {\n  const context = useContext(MapContext)\n  if (!context) {\n    throw new Error('useMapContext must be used within a MapProvider')\n  }\n  return context\n}\n\nexport { MapContext }\n","export const MAP_STYLES = {\n  light: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',\n  dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',\n  streets: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',\n  satellite: 'https://api.maptiler.com/maps/satellite/style.json',\n} as const\n\nexport type MapStyleKey = keyof typeof MAP_STYLES\n\nexport function getMapStyle(key: MapStyleKey | string): string {\n  if (key in MAP_STYLES) {\n    return MAP_STYLES[key as MapStyleKey]\n  }\n  return key\n}\n","'use client'\n\nimport { useCallback, useEffect, useRef, type ReactNode } from 'react'\nimport Map, { type ViewStateChangeEvent } from 'react-map-gl/maplibre'\nimport { ExternalLink, RotateCcw } from 'lucide-react'\nimport { cn } from '@djangocfg/ui-core/lib'\nimport 'maplibre-gl/dist/maplibre-gl.css'\n\nimport { MapProvider, useMapContext } from '../context'\nimport { MAP_STYLES } from '../styles'\nimport type { MapViewport, MapStyleKey } from '../types'\n\nexport interface MapContainerProps {\n  children?: ReactNode\n  initialViewport?: Partial<MapViewport>\n  mapStyle?: MapStyleKey | string\n  interactiveLayerIds?: string[]\n  className?: string\n  style?: React.CSSProperties\n  cursor?: string\n  attributionControl?: boolean\n  reuseMaps?: boolean\n  /** URL to open in external maps app (shows \"Open in Maps\" button if provided) */\n  openInMapsUrl?: string\n  /** Label for the open in maps button */\n  openInMapsLabel?: string\n  /** Auto-reset to initial viewport after N ms of inactivity (0 = disabled) */\n  autoResetDelay?: number\n  /** Show reset button */\n  showResetButton?: boolean\n}\n\ninterface MapInnerProps extends Omit<MapContainerProps, 'initialViewport'> {}\n\nfunction MapInner({\n  children,\n  mapStyle = 'light',\n  interactiveLayerIds,\n  style,\n  cursor,\n  attributionControl = true,\n  reuseMaps = true,\n  openInMapsUrl,\n  openInMapsLabel = 'Open in Maps',\n  autoResetDelay = 0,\n  showResetButton = false,\n}: MapInnerProps) {\n  const { mapRef, viewport, setViewport, setIsLoaded, resetToInitial, initialViewport } = useMapContext()\n  const resetTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const isInteractingRef = useRef(false)\n\n  // Check if viewport has changed from initial\n  const hasViewportChanged =\n    Math.abs(viewport.longitude - initialViewport.longitude) > 0.0001 ||\n    Math.abs(viewport.latitude - initialViewport.latitude) > 0.0001 ||\n    Math.abs(viewport.zoom - initialViewport.zoom) > 0.1\n\n  const handleMove = useCallback(\n    (evt: ViewStateChangeEvent) => {\n      setViewport({\n        longitude: evt.viewState.longitude,\n        latitude: evt.viewState.latitude,\n        zoom: evt.viewState.zoom,\n        bearing: evt.viewState.bearing,\n        pitch: evt.viewState.pitch,\n      })\n    },\n    [setViewport]\n  )\n\n  const handleMoveStart = useCallback(() => {\n    isInteractingRef.current = true\n    // Clear any pending reset timer\n    if (resetTimerRef.current) {\n      clearTimeout(resetTimerRef.current)\n      resetTimerRef.current = null\n    }\n  }, [])\n\n  const handleMoveEnd = useCallback(() => {\n    isInteractingRef.current = false\n    // Start auto-reset timer if enabled\n    if (autoResetDelay > 0) {\n      resetTimerRef.current = setTimeout(() => {\n        if (!isInteractingRef.current) {\n          resetToInitial()\n        }\n      }, autoResetDelay)\n    }\n  }, [autoResetDelay, resetToInitial])\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true)\n  }, [setIsLoaded])\n\n  // Cleanup timer on unmount\n  useEffect(() => {\n    return () => {\n      if (resetTimerRef.current) {\n        clearTimeout(resetTimerRef.current)\n      }\n    }\n  }, [])\n\n  const resolvedStyle = mapStyle in MAP_STYLES\n    ? MAP_STYLES[mapStyle as MapStyleKey]\n    : mapStyle\n\n  return (\n    <>\n      <Map\n        ref={mapRef}\n        {...viewport}\n        onMove={handleMove}\n        onMoveStart={handleMoveStart}\n        onMoveEnd={handleMoveEnd}\n        onLoad={handleLoad}\n        mapStyle={resolvedStyle}\n        interactiveLayerIds={interactiveLayerIds}\n        attributionControl={attributionControl ? {} : false}\n        reuseMaps={reuseMaps}\n        style={{\n          width: '100%',\n          height: '100%',\n          ...style,\n        }}\n        cursor={cursor}\n      >\n        {children}\n      </Map>\n\n      {/* Map overlay buttons */}\n      <div className=\"absolute bottom-3 right-3 flex items-center gap-2\">\n        {/* Reset button */}\n        {showResetButton && hasViewportChanged && (\n          <button\n            type=\"button\"\n            onClick={resetToInitial}\n            className={cn(\n              'inline-flex items-center gap-2 px-3 py-2 rounded-lg',\n              'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',\n              'hover:bg-background transition-colors shadow-sm border border-border'\n            )}\n          >\n            <RotateCcw className=\"w-4 h-4\" />\n            Reset\n          </button>\n        )}\n\n        {/* Open in Maps button */}\n        {openInMapsUrl && (\n          <a\n            href={openInMapsUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\n              'inline-flex items-center gap-2 px-4 py-2 rounded-lg',\n              'bg-background/95 backdrop-blur-sm text-foreground text-sm font-medium',\n              'hover:bg-background transition-colors shadow-sm border border-border'\n            )}\n          >\n            <ExternalLink className=\"w-4 h-4\" />\n            {openInMapsLabel}\n          </a>\n        )}\n      </div>\n    </>\n  )\n}\n\nexport function MapContainer({\n  children,\n  initialViewport,\n  className,\n  ...props\n}: MapContainerProps) {\n  return (\n    <div className={className} style={{ width: '100%', height: '100%', position: 'relative' }}>\n      <MapProvider initialViewport={initialViewport}>\n        <MapInner {...props}>{children}</MapInner>\n      </MapProvider>\n    </div>\n  )\n}\n\n/**\n * Use this when you need the map inside an existing MapProvider\n */\nexport function MapView(props: Omit<MapContainerProps, 'initialViewport'>) {\n  return <MapInner {...props} />\n}\n"]}