shadcn-map 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hegyi Áron Ferenc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# shadcn-map
+
+A minimal and fast map library for Svelte 5 with [shadcn](https://shadcn-svelte.com/) design.
+Uses [MapLibre GL](https://maplibre.org/) and [Protomaps](https://protomaps.com/) for vector tiles.
+
+Recommended to use with [UnoCSS](https://unocss.dev/), and [unocss-preset-shadcn](https://github.com/Rettend/unocss-preset-shadcn/).
+
+## install
+
+```cmd
+bun i shadcn-map
+```
+
+Peer dependencies:
+
+```bash
+bun i svelte@^5.0.0 bits-ui mode-watcher
+```
+
+## Usage
+
+### Basic Map
+
+```svelte
+<script lang="ts">
+  import { Map, Marker, NavigationControl } from 'shadcn-map';
+</script>
+
+<div class="h-600px w-full rounded-lg border overflow-hidden">
+  <!-- Map data for development -->
+  <Map
+    center={[-74.006, 40.7128]}
+    zoom={12}
+    tiles="https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles"
+  >
+    <NavigationControl position="top-right" />
+    
+    <Marker 
+      lngLat={[-74.006, 40.7128]} 
+      label="New York"
+      color="primary" 
+    />
+  </Map>
+</div>
+```
+
+## Components
+
+- **Map**:
+  - **`<Map>`**: The core container. Renders MapLibre GL.
+  - **`<Marker>`**: Styled pins with shadcn theme colors, icons and badges.
+  - **`<ClusterLayer>`**: Auto-clustering for markers.
+- **UI**:
+  - **`<Popup>`**: In-place info popup.
+  - **`<DetailsPanel>`**: Full-height sidebar or bottom drawer.
+- **Controls**:
+  - **`<NavigationControl>`**: Zoom and compass controls.
+  - **`<ScaleControl>`**: Distance scale bar.
+  - **`<GeolocateControl>`**: Show user location.
+
+## Styles
+
+The map comes with two minimal styles:
+
+- **Dark**: Dark zinc colors, subtle roads, dark blue water.
+- **Light**: Clean white/zinc colors, minimal distractions.
+
+Labels:
+
+- **Minimal**: City names, roads, water.
+- **Roads**: Show road names too.
+
+## License
+
+MIT

package/dist/components/ClusterLayer.svelte

@@ -66,15 +66,8 @@
   let supercluster: Supercluster<{ id: string | number }, Supercluster.AnyProps> | null = null
   let lastSuperclusterPointsKey = ''
 
-  function getIsDarkMode(): boolean {
-    if (typeof document === 'undefined') {
-      return true
-    }
-    return document.documentElement.classList.contains('dark')
-  }
-
   function getThemeColors() {
-    const isDark = getIsDarkMode()
+    const isDark = ctx.resolvedMode === 'dark'
     return isDark
       ? {
         clusterLow: '#3f3f46',
@@ -508,4 +501,40 @@
     updateSourceData()
     scheduleUnclusteredUpdate()
   })
+
+  // Update cluster colors when resolvedMode changes
+  $effect(() => {
+    // Access resolvedMode to track as dependency
+    void ctx.resolvedMode
+    if (!map || !map.isStyleLoaded()) {
+      return
+    }
+
+    const colors = getThemeColors()
+
+    // Update cluster layer colors
+    if (map.getLayer(clusterLayerId)) {
+      map.setPaintProperty(clusterLayerId, 'circle-color', [
+        'step',
+        ['get', 'point_count'],
+        colors.clusterLow,
+        10,
+        colors.clusterMid,
+        50,
+        colors.clusterHigh,
+      ])
+      map.setPaintProperty(clusterLayerId, 'circle-stroke-color', colors.clusterStroke)
+    }
+
+    // Update cluster count text color
+    if (map.getLayer(clusterCountId)) {
+      map.setPaintProperty(clusterCountId, 'text-color', colors.clusterText)
+    }
+
+    // Update unclustered point colors
+    if (showUnclustered && map.getLayer(unclusteredLayerId)) {
+      map.setPaintProperty(unclusteredLayerId, 'circle-color', colors.point)
+      map.setPaintProperty(unclusteredLayerId, 'circle-stroke-color', colors.pointStroke)
+    }
+  })
 </script>

package/dist/components/Map.svelte

@@ -96,17 +96,34 @@
     return document.documentElement.classList.contains('dark')
   }
 
+  // Track document dark mode for auto style
+  let documentIsDark = $state(getIsDarkMode())
+
+  // Resolved mode: for explicit 'dark'/'light' use that, for 'auto' follow document, for custom objects default to 'dark'
+  const resolvedMode = $derived.by((): 'dark' | 'light' => {
+    if (typeof style === 'object') {
+      return 'dark' // Custom style objects default to dark for UI
+    }
+    if (style === 'auto') {
+      return documentIsDark ? 'dark' : 'light'
+    }
+    return style // 'dark' or 'light'
+  })
+
   function getStyle() {
     if (typeof style === 'object') {
       return style
     }
 
-    const mode: StyleMode = style === 'auto' ? (getIsDarkMode() ? 'dark' : 'light') : style
-
-    return mode === 'dark' ? createDarkStyle(tiles, { labels }) : createLightStyle(tiles, { labels })
+    return resolvedMode === 'dark' ? createDarkStyle(tiles, { labels }) : createLightStyle(tiles, { labels })
   }
 
   const ctx = createMapContext()
+
+  // Keep context in sync with resolved mode
+  $effect(() => {
+    ctx.setResolvedMode(resolvedMode)
+  })
   const autoClusterPoints = $derived(
     autoCluster
       ? Array.from(ctx.markers.values())
@@ -183,17 +200,22 @@
       onzoomCallback?.(mapInstance.getZoom())
     })
 
-    const observer = new MutationObserver(() => {
-      mapInstance.setStyle(getStyle())
-    })
+    // Only observe document dark class changes when style='auto'
+    let observer: MutationObserver | null = null
+    if (style === 'auto') {
+      observer = new MutationObserver(() => {
+        documentIsDark = getIsDarkMode()
+        mapInstance.setStyle(getStyle())
+      })
 
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class'],
-    })
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class'],
+      })
+    }
 
     return () => {
-      observer.disconnect()
+      observer?.disconnect()
       maplibregl.removeProtocol('pmtiles')
       ctx.setMap(null)
       ctx.setLoaded(false)
@@ -202,7 +224,7 @@
   })
 </script>
 
-<div bind:this={container} class='shadcn-map {className}'>
+<div bind:this={container} class='shadcn-map {className}' data-map-mode={resolvedMode}>
   {#if loaded && children}
     {#if autoCluster}
       <ClusterLayer
@@ -267,55 +289,94 @@
     box-shadow: none;
   }
 
-  /* Dark mode theme variables */
-  :global(.dark) .shadcn-map {
-    --map-ui-surface: oklch(var(--muted));
-    --map-ui-foreground: oklch(var(--foreground));
-    --map-ui-border: oklch(var(--border));
+  /* Dark mode theme variables - hardcoded dark colors that don't depend on mode switcher */
+  .shadcn-map[data-map-mode='dark'] {
+    --map-ui-surface: #27272a;
+    --map-ui-foreground: #f4f4f5;
+    --map-ui-border: #3f3f46;
   }
 
-  /* Navigation control group */
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-group) {
+  /* Light mode theme variables - hardcoded light colors */
+  .shadcn-map[data-map-mode='light'] {
+    --map-ui-surface: #ffffff;
+    --map-ui-foreground: #18181b;
+    --map-ui-border: #e4e4e7;
+  }
+
+  /* Navigation control group - dark mode */
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-group) {
     background-color: var(--map-ui-surface);
     border: 1px solid var(--map-ui-border);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
   }
 
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-group button) {
+  /* Navigation control group - light mode */
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-group) {
+    background-color: var(--map-ui-surface);
+    border: 1px solid var(--map-ui-border);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  }
+
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-group button) {
+    background-color: var(--map-ui-surface);
+    color: var(--map-ui-foreground);
+  }
+
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-group button) {
     background-color: var(--map-ui-surface);
     color: var(--map-ui-foreground);
   }
 
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-group button + button) {
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-group button + button) {
     border-top-color: var(--map-ui-border);
   }
 
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-icon) {
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-group button + button) {
+    border-top-color: var(--map-ui-border);
+  }
+
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-icon) {
     filter: invert(1);
   }
 
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-compass .maplibregl-ctrl-icon) {
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-compass .maplibregl-ctrl-icon) {
     filter: invert(1) brightness(1.8) contrast(1.3) drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
   }
 
-  /* Scale control dark mode */
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-scale) {
+  /* Scale control - dark mode */
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-scale) {
     color: var(--map-ui-foreground);
     border-color: var(--map-ui-foreground);
   }
 
-  /* Attribution text panel */
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-attrib) {
+  /* Scale control - light mode */
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-scale) {
     color: var(--map-ui-foreground);
+    border-color: var(--map-ui-foreground);
+  }
+
+  /* Attribution text panel - dark mode */
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-attrib) {
+    color: var(--map-ui-foreground);
+  }
+
+  /* Attribution text panel - light mode */
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-attrib) {
+    color: var(--map-ui-foreground);
+  }
+
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-attrib.maplibregl-compact-show) {
+    background-color: var(--map-ui-surface);
+    border-radius: 4px;
   }
 
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-attrib.maplibregl-compact-show) {
+  .shadcn-map[data-map-mode='light'] :global(.maplibregl-ctrl-attrib.maplibregl-compact-show) {
     background-color: var(--map-ui-surface);
     border-radius: 4px;
   }
 
   /* Attribution button - invert icon in dark mode */
-  :global(.dark) .shadcn-map :global(.maplibregl-ctrl-attrib-button) {
+  .shadcn-map[data-map-mode='dark'] :global(.maplibregl-ctrl-attrib-button) {
     filter: invert(1);
   }
 </style>

package/dist/components/Marker.svelte

@@ -302,6 +302,7 @@
   class:popup-open={anyPopupOpen}
   class:marker-active={isActive}
   data-color-mode={isThemeColor ? 'theme' : 'class'}
+  data-map-mode={ctx.resolvedMode}
   style:--marker-color={isThemeColor ? markerColorVar : 'currentColor'}
   style:--marker-text={isThemeColor ? markerTextVar : undefined}
   style:--marker-width='{sizeConfig.width}px'
@@ -395,14 +396,21 @@
   .shadcn-marker[data-color-mode='theme'] .marker-inner {
     background: oklch(var(--marker-color));
     color: oklch(var(--marker-text));
-    border-color: oklch(var(--border));
+  }
+
+  .shadcn-marker[data-color-mode='theme'][data-map-mode='dark'] .marker-inner {
+    border-color: #3f3f46;
+  }
+
+  .shadcn-marker[data-color-mode='theme'][data-map-mode='light'] .marker-inner {
+    border-color: #e4e4e7;
   }
 
   .shadcn-marker[data-color-mode='class'] .marker-inner {
     border-color: rgba(0, 0, 0, 0.25);
   }
 
-  :global(.dark) .shadcn-marker[data-color-mode='class'] .marker-inner {
+  .shadcn-marker[data-color-mode='class'][data-map-mode='dark'] .marker-inner {
     border-color: rgba(255, 255, 255, 0.25);
   }
 
@@ -528,7 +536,7 @@
     justify-content: center;
   }
 
-  :global(.dark) .marker-badge {
+  .shadcn-marker[data-map-mode='dark'] .marker-badge {
     border-color: rgba(0, 0, 0, 0.3);
   }
 
@@ -581,13 +589,13 @@
       0 6px 20px rgba(0, 0, 0, 0.35);
   }
 
-  :global(.dark) .fallback-ring {
+  .shadcn-marker[data-map-mode='dark'] .fallback-ring {
     box-shadow:
       0 0 0 4px rgba(50, 50, 50, 0.9),
       0 6px 20px rgba(0, 0, 0, 0.35);
   }
 
-  :global(.dark) .has-label::after {
+  .shadcn-marker[data-map-mode='dark'].has-label::after {
     background: hsl(240 5.9% 90%);
     color: hsl(240 10% 3.9%);
   }

package/dist/components/controls/GeolocateControl.svelte

@@ -134,7 +134,7 @@
 
   /* Dark mode: override the filter: invert(1) from Map.svelte since we use inline SVG with currentColor.
    * Also explicitly set color so the SVG stroke inherits the light foreground. */
-  :global(.dark .shadcn-map .shadcn-geolocate-btn.maplibregl-ctrl-icon) {
+  :global(.shadcn-map[data-map-mode='dark'] .shadcn-geolocate-btn.maplibregl-ctrl-icon) {
     filter: none !important;
     color: var(--map-ui-foreground);
   }

package/dist/context.svelte.d.ts

@@ -21,6 +21,8 @@ export interface MapContextStore {
     readonly clusteredMarkerIds: Set<string>;
     readonly clusteredVersion: number;
     readonly activePopupMarkerId: string | null;
+    /** The resolved theme mode for the map ('dark' or 'light') */
+    readonly resolvedMode: 'dark' | 'light';
     setMap: (map: maplibregl.Map | null) => void;
     setLoaded: (loaded: boolean) => void;
     registerMarker: (registration: MarkerRegistration) => void;
@@ -28,6 +30,7 @@ export interface MapContextStore {
     unregisterMarker: (id: string) => void;
     setClusteredMarkers: (ids: Set<string>) => void;
     setActivePopupMarker: (id: string | null) => void;
+    setResolvedMode: (mode: 'dark' | 'light') => void;
     flyTo: (lngLat: [number, number], options?: FlyToOptions) => void;
     getBounds: () => LngLatBounds | null;
     getCenter: () => [number, number] | null;

package/dist/context.svelte.js

@@ -1,4 +1,4 @@
-import { getContext, setContext } from 'svelte';
+import { getContext, setContext, untrack } from 'svelte';
 const MAP_CONTEXT_KEY = Symbol('shadcn-map-context');
 export function createMapContext() {
     let map = $state(null);
@@ -7,6 +7,7 @@ export function createMapContext() {
     let clusteredMarkerIds = $state(new Set());
     let clusteredVersion = $state(0);
     let activePopupMarkerId = $state(null);
+    let resolvedMode = $state('dark');
     const store = {
         get map() { return map; },
         get loaded() { return loaded; },
@@ -14,8 +15,10 @@ export function createMapContext() {
         get clusteredMarkerIds() { return clusteredMarkerIds; },
         get clusteredVersion() { return clusteredVersion; },
         get activePopupMarkerId() { return activePopupMarkerId; },
+        get resolvedMode() { return resolvedMode; },
         setMap: (m) => { map = m; },
         setLoaded: (l) => { loaded = l; },
+        setResolvedMode: (m) => { resolvedMode = m; },
         registerMarker: (registration) => {
             const next = new Map(markers);
             next.set(registration.id, registration);
@@ -44,7 +47,10 @@ export function createMapContext() {
         },
         setClusteredMarkers: (ids) => {
             clusteredMarkerIds = new Set(ids);
-            clusteredVersion++;
+            // IMPORTANT: avoid tracking `clusteredVersion` reads in callers (e.g. $effect)
+            // otherwise an effect that calls `setClusteredMarkers` can accidentally
+            // become dependent on `clusteredVersion` and re-run forever.
+            clusteredVersion = untrack(() => clusteredVersion) + 1;
         },
         setActivePopupMarker: (id) => {
             activePopupMarkerId = id;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-map",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A minimal, fast, dark map library for Svelte 5 built on MapLibre GL and shadcn-svelte aesthetics.",
   "author": "Hegyi Áron Ferenc",
   "license": "MIT",
@@ -37,6 +37,8 @@
   },
   "types": "./dist/index.d.ts",
   "files": [
+    "LICENSE",
+    "README.md",
     "dist"
   ],
   "scripts": {