@accelint/map-toolkit 0.6.0 → 1.0.0

package/dist/deckgl/base-map/index.js

@@ -13,11 +13,12 @@
 
 'use client';
 
-import { useCameraState } from "../../camera/use-camera-state.js";
+import { useMapCamera } from "../../camera/store.js";
 import { MapEvents } from "./events.js";
 import { getCursor } from "../../map-cursor/store.js";
 import { MapProvider } from "./provider.js";
-import { DARK_BASE_MAP_STYLE, DEFAULT_VIEW_STATE, PARAMETERS, PICKING_RADIUS } from "./constants.js";
+import { DEFAULT_VIEW_STATE } from "../../shared/constants.js";
+import { DARK_BASE_MAP_STYLE, PARAMETERS, PICKING_RADIUS } from "./constants.js";
 import { MapControls } from "./controls.js";
 import { useCallback, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -128,14 +129,11 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
 	const deckglInstance = useDeckgl();
 	const container = useId();
 	const mapRef = useRef(null);
-	const { cameraState, setCameraState } = useCameraState({
-		instanceId: id,
-		initialCameraState: {
-			view: defaultView,
-			zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,
-			latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,
-			longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude
-		}
+	const { cameraState, setCameraState } = useMapCamera(id, {
+		view: defaultView,
+		zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,
+		latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,
+		longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude
 	});
 	const viewState = useMemo(() => ({
 		...deckglInstance?._deck?._getViewState(),
@@ -230,12 +228,13 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
 		}), /* @__PURE__ */ jsx(MapProvider, {
 			id,
 			children: /* @__PURE__ */ jsx(Map, {
-				onMove: (evt) => setCameraState(id, evt.viewState),
+				onMove: (evt) => setCameraState(evt.viewState),
 				mapStyle: styleUrl,
 				ref: mapRef,
 				...mapOptions,
 				children: /* @__PURE__ */ jsxs(Deckgl, {
 					...rest,
+					controller,
 					interleaved,
 					getCursor: handleGetCursor,
 					useDevicePixels,

package/dist/deckgl/base-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MapLibre"],"sources":["../../../src/deckgl/base-map/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useEffectEvent, useEmit } from '@accelint/bus/react';\nimport { Deckgl, useDeckgl } from '@deckgl-fiber-renderer/dom';\nimport { useCallback, useId, useMemo, useRef } from 'react';\nimport {\n  Map as MapLibre,\n  type MapRef,\n  useControl,\n  type ViewState,\n} from 'react-map-gl/maplibre';\nimport { useCameraState } from '../../camera';\nimport { getCursor } from '../../map-cursor/store';\nimport {\n  DARK_BASE_MAP_STYLE,\n  DEFAULT_VIEW_STATE,\n  PARAMETERS,\n  PICKING_RADIUS,\n} from './constants';\nimport { MapControls } from './controls';\nimport { MapEvents } from './events';\nimport { MapProvider } from './provider';\nimport type { PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';\nimport type { IControl } from 'maplibre-gl';\nimport type { MjolnirGestureEvent, MjolnirPointerEvent } from 'mjolnir.js';\nimport type {\n  BaseMapProps,\n  MapClickEvent,\n  MapHoverEvent,\n  MapViewportEvent,\n  SerializablePickingInfo,\n} from './types';\n\n/**\n * Serializes PickingInfo for event bus transmission.\n * Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.\n */\nfunction serializePickingInfo(info: PickingInfo): SerializablePickingInfo {\n  const { viewport, layer, sourceLayer, ...infoRest } = info;\n  return {\n    layerId: layer?.id,\n    sourceLayerId: sourceLayer?.id,\n    ...infoRest,\n  };\n}\n\n/**\n * Strips non-serializable properties from MjolnirGestureEvent for event bus transmission.\n * Removes functions, DOM elements, and PointerEvent objects that cannot be cloned.\n */\nfunction serializeMjolnirEvent(\n  event: MjolnirGestureEvent,\n): Omit<\n  MjolnirGestureEvent,\n  | 'stopPropagation'\n  | 'preventDefault'\n  | 'stopImmediatePropagation'\n  | 'srcEvent'\n  | 'rootElement'\n  | 'target'\n  | 'changedPointers'\n  | 'pointers'\n>;\n/**\n * Strips non-serializable properties from MjolnirPointerEvent for event bus transmission.\n * Removes functions and DOM elements that cannot be cloned.\n */\nfunction serializeMjolnirEvent(\n  event: MjolnirPointerEvent,\n): Omit<\n  MjolnirPointerEvent,\n  | 'stopPropagation'\n  | 'preventDefault'\n  | 'stopImmediatePropagation'\n  | 'srcEvent'\n  | 'rootElement'\n  | 'target'\n>;\nfunction serializeMjolnirEvent(\n  event: MjolnirGestureEvent | MjolnirPointerEvent,\n) {\n  const {\n    stopImmediatePropagation,\n    stopPropagation,\n    preventDefault,\n    srcEvent,\n    rootElement,\n    target,\n    ...rest\n  } = event;\n\n  // Remove pointer arrays if present (only on MjolnirGestureEvent)\n  if ('changedPointers' in rest) {\n    const { changedPointers, pointers, ...gestureRest } = rest;\n    return gestureRest;\n  }\n\n  return rest;\n}\n\nfunction AddDeckglControl() {\n  const deckglInstance = useDeckgl();\n  useControl(() => deckglInstance as IControl);\n\n  return null;\n}\n\n/**\n * A React component that provides a Deck.gl-powered base map with MapLibre GL integration.\n *\n * This component serves as the foundation for building interactive map applications with\n * support for click and hover events through a centralized event bus. It integrates\n * Deck.gl for 3D visualizations with MapLibre GL for the base map tiles.\n *\n * **Map Mode Integration**: BaseMap automatically creates a `MapProvider` internally,\n * which sets up the map mode state management for this instance.\n * - **Children**: Only Deck.gl layer components can be rendered as children. Custom Deck.gl\n *   layers can use `useMapMode()` without parameters to access context.\n * - **Siblings**: UI components (buttons, toolbars, etc.) must be rendered as siblings\n *   and pass `id` to `useMapMode(id)`.\n *\n * **Event Bus**: Click and hover events are emitted through the event bus with the `id`\n * included in the payload, allowing multiple map instances to coexist without interference.\n *\n * @param props - Component props including id (required), className, onClick, onHover, and all Deck.gl props\n * @returns A map component with Deck.gl and MapLibre GL integration\n *\n * @example\n * Basic usage with id (recommended: module-level constant):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { View } from '@deckgl-fiber-renderer/dom';\n * import { uuid } from '@accelint/core';\n *\n * // Create id at module level for stability and easy sharing\n * const MAIN_MAP_ID = uuid();\n *\n * export function MapView() {\n *   return (\n *     <BaseMap className=\"w-full h-full\" id={MAIN_MAP_ID}>\n *       <View id=\"main\" controller />\n *     </BaseMap>\n *   );\n * }\n * ```\n *\n * @example\n * With map mode and event handlers (module-level constant for sharing):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { useMapMode } from '@accelint/map-toolkit/map-mode';\n * import { uuid } from '@accelint/core';\n * import type { PickingInfo } from '@deck.gl/core';\n * import type { MjolnirGestureEvent } from 'mjolnir.js';\n *\n * // Module-level constant - stable and shareable across all components\n * const MAIN_MAP_ID = uuid();\n *\n * function Toolbar() {\n *   // Access map mode using the shared id\n *   const { mode, requestModeChange } = useMapMode(MAIN_MAP_ID);\n *   return <div>Current mode: {mode}</div>;\n * }\n *\n * export function InteractiveMap() {\n *   const handleClick = (info: PickingInfo, event: MjolnirGestureEvent) => {\n *     console.log('Clicked:', info.object);\n *   };\n *\n *   return (\n *     <div className=\"relative w-full h-full\">\n *       <BaseMap className=\"absolute inset-0\" id={MAIN_MAP_ID} onClick={handleClick}>\n *         <View id=\"main\" controller />\n *       </BaseMap>\n *       <Toolbar />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function BaseMap({\n  id,\n  className,\n  children,\n  controller = true,\n  enableControlEvents = true,\n  interleaved = true,\n  parameters = {},\n  styleUrl = DARK_BASE_MAP_STYLE,\n  useDevicePixels = false,\n  widgets: widgetsProp = [],\n  defaultView = '2D',\n  initialViewState,\n  onClick,\n  onHover,\n  onViewStateChange,\n  pickingRadius,\n  ...rest\n}: BaseMapProps) {\n  const deckglInstance = useDeckgl();\n  const container = useId();\n  const mapRef = useRef<MapRef>(null);\n\n  const { cameraState, setCameraState } = useCameraState({\n    instanceId: id,\n    initialCameraState: {\n      view: defaultView,\n      zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,\n      latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,\n      longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude,\n    },\n  });\n\n  const viewState = useMemo<ViewState>(\n    () => ({\n      // @ts-expect-error squirrelly deckglInstance typing\n      ...(deckglInstance?._deck?._getViewState() as ViewState),\n      ...cameraState,\n      bearing: cameraState.rotation,\n    }),\n    // @ts-expect-error squirrelly deckglInstance typing\n    [cameraState, deckglInstance?._deck?._getViewState],\n  );\n\n  // Memoize MapLibre options to avoid creating new object on every render\n  const mapOptions = useMemo(\n    () => ({\n      container,\n      zoom: viewState.zoom,\n      pitch: viewState.pitch,\n      bearing: viewState.bearing,\n      latitude: viewState.latitude,\n      longitude: viewState.longitude,\n      doubleClickZoom: false,\n      dragRotate: false,\n      pitchWithRotate: false,\n      rollEnabled: false,\n      attributionControl: { compact: true },\n      projection: cameraState.projection,\n      maxPitch: cameraState.view === '2D' ? 0 : 85,\n    }),\n    [viewState, container, cameraState.projection, cameraState.view],\n  );\n\n  const emitClick = useEmit<MapClickEvent>(MapEvents.click);\n  const emitHover = useEmit<MapHoverEvent>(MapEvents.hover);\n  const emitViewport = useEmit<MapViewportEvent>(MapEvents.viewport);\n\n  const handleClick = useCallback(\n    (info: PickingInfo, event: MjolnirGestureEvent) => {\n      // send full pickingInfo and event to user-defined onClick\n      onClick?.(info, event);\n\n      emitClick({\n        info: serializePickingInfo(info),\n        event: serializeMjolnirEvent(event),\n        id,\n      });\n    },\n    [emitClick, id, onClick],\n  );\n\n  const handleHover = useCallback(\n    (info: PickingInfo, event: MjolnirPointerEvent) => {\n      // send full pickingInfo and event to user-defined onHover\n      onHover?.(info, event);\n\n      emitHover({\n        info: serializePickingInfo(info),\n        event: serializeMjolnirEvent(event),\n        id,\n      });\n    },\n    [emitHover, id, onHover],\n  );\n\n  const handleGetCursor = useCallback(() => {\n    return getCursor(id);\n  }, [id]);\n\n  const handleViewStateChange = useEffectEvent(\n    (params: ViewStateChangeParameters) => {\n      onViewStateChange?.(params);\n\n      const {\n        viewId,\n        viewState: { latitude, longitude, zoom },\n      } = params;\n\n      // @ts-expect-error squirrelly deckglInstance typing\n      const viewport = deckglInstance._deck\n        .getViewports()\n        // @ts-expect-error squirrelly deckglInstance typing\n        ?.find((vp) => vp.id === viewId);\n\n      emitViewport({\n        id,\n        bounds: viewport?.getBounds(),\n        latitude,\n        longitude,\n        zoom,\n        width: viewport?.width ?? 0,\n        height: viewport?.height ?? 0,\n      });\n    },\n  );\n\n  const handleLoad = useEffectEvent(() => {\n    //--- force update viewport state once all viewports initialized ---\n    // @ts-expect-error squirrelly deckglInstance typing\n    const viewports = deckglInstance._deck.getViewports() ?? [];\n    for (const vp of viewports) {\n      handleViewStateChange({\n        viewId: vp.id,\n        viewState: {\n          latitude: vp.latitude,\n          longitude: vp.longitude,\n          zoom: vp.zoom,\n          id: vp.id,\n          bounds: vp.getBounds(),\n          width: vp.width,\n          height: vp.height,\n        },\n      } as ViewStateChangeParameters);\n    }\n  });\n\n  return (\n    <div id={container} className={className}>\n      {enableControlEvents && <MapControls id={id} mapRef={mapRef} />}\n      <MapProvider id={id}>\n        <MapLibre\n          onMove={(evt) => setCameraState(id, evt.viewState)}\n          mapStyle={styleUrl}\n          ref={mapRef}\n          {...mapOptions}\n        >\n          <Deckgl\n            {...rest}\n            interleaved={interleaved}\n            getCursor={handleGetCursor}\n            useDevicePixels={useDevicePixels}\n            onClick={handleClick}\n            pickingRadius={pickingRadius ?? PICKING_RADIUS}\n            onHover={handleHover}\n            onLoad={handleLoad}\n            onViewStateChange={handleViewStateChange}\n            // @ts-expect-error - DeckglProps parameters type is overly strict for WebGL parameter spreading.\n            // The merged object is valid at runtime but TypeScript cannot verify all possible parameter combinations.\n            parameters={{ ...PARAMETERS, ...parameters }}\n          >\n            <AddDeckglControl />\n            {children}\n          </Deckgl>\n        </MapLibre>\n      </MapProvider>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MapLibre"],"sources":["../../../src/deckgl/base-map/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { useEffectEvent, useEmit } from '@accelint/bus/react';\nimport { Deckgl, useDeckgl } from '@deckgl-fiber-renderer/dom';\nimport { useCallback, useId, useMemo, useRef } from 'react';\nimport {\n  Map as MapLibre,\n  type MapRef,\n  useControl,\n  type ViewState,\n} from 'react-map-gl/maplibre';\nimport { useMapCamera } from '../../camera';\nimport { getCursor } from '../../map-cursor/store';\nimport { DEFAULT_VIEW_STATE } from '../../shared/constants';\nimport { DARK_BASE_MAP_STYLE, PARAMETERS, PICKING_RADIUS } from './constants';\nimport { MapControls } from './controls';\nimport { MapEvents } from './events';\nimport { MapProvider } from './provider';\nimport type { PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';\nimport type { IControl } from 'maplibre-gl';\nimport type { MjolnirGestureEvent, MjolnirPointerEvent } from 'mjolnir.js';\nimport type {\n  BaseMapProps,\n  MapClickEvent,\n  MapHoverEvent,\n  MapViewportEvent,\n  SerializablePickingInfo,\n} from './types';\n\n/**\n * Serializes PickingInfo for event bus transmission.\n * Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.\n */\nfunction serializePickingInfo(info: PickingInfo): SerializablePickingInfo {\n  const { viewport, layer, sourceLayer, ...infoRest } = info;\n  return {\n    layerId: layer?.id,\n    sourceLayerId: sourceLayer?.id,\n    ...infoRest,\n  };\n}\n\n/**\n * Strips non-serializable properties from MjolnirGestureEvent for event bus transmission.\n * Removes functions, DOM elements, and PointerEvent objects that cannot be cloned.\n */\nfunction serializeMjolnirEvent(\n  event: MjolnirGestureEvent,\n): Omit<\n  MjolnirGestureEvent,\n  | 'stopPropagation'\n  | 'preventDefault'\n  | 'stopImmediatePropagation'\n  | 'srcEvent'\n  | 'rootElement'\n  | 'target'\n  | 'changedPointers'\n  | 'pointers'\n>;\n/**\n * Strips non-serializable properties from MjolnirPointerEvent for event bus transmission.\n * Removes functions and DOM elements that cannot be cloned.\n */\nfunction serializeMjolnirEvent(\n  event: MjolnirPointerEvent,\n): Omit<\n  MjolnirPointerEvent,\n  | 'stopPropagation'\n  | 'preventDefault'\n  | 'stopImmediatePropagation'\n  | 'srcEvent'\n  | 'rootElement'\n  | 'target'\n>;\nfunction serializeMjolnirEvent(\n  event: MjolnirGestureEvent | MjolnirPointerEvent,\n) {\n  const {\n    stopImmediatePropagation,\n    stopPropagation,\n    preventDefault,\n    srcEvent,\n    rootElement,\n    target,\n    ...rest\n  } = event;\n\n  // Remove pointer arrays if present (only on MjolnirGestureEvent)\n  if ('changedPointers' in rest) {\n    const { changedPointers, pointers, ...gestureRest } = rest;\n    return gestureRest;\n  }\n\n  return rest;\n}\n\nfunction AddDeckglControl() {\n  const deckglInstance = useDeckgl();\n  useControl(() => deckglInstance as IControl);\n\n  return null;\n}\n\n/**\n * A React component that provides a Deck.gl-powered base map with MapLibre GL integration.\n *\n * This component serves as the foundation for building interactive map applications with\n * support for click and hover events through a centralized event bus. It integrates\n * Deck.gl for 3D visualizations with MapLibre GL for the base map tiles.\n *\n * **Map Mode Integration**: BaseMap automatically creates a `MapProvider` internally,\n * which sets up the map mode state management for this instance.\n * - **Children**: Only Deck.gl layer components can be rendered as children. Custom Deck.gl\n *   layers can use `useMapMode()` without parameters to access context.\n * - **Siblings**: UI components (buttons, toolbars, etc.) must be rendered as siblings\n *   and pass `id` to `useMapMode(id)`.\n *\n * **Event Bus**: Click and hover events are emitted through the event bus with the `id`\n * included in the payload, allowing multiple map instances to coexist without interference.\n *\n * @param props - Component props including id (required), className, onClick, onHover, and all Deck.gl props\n * @returns A map component with Deck.gl and MapLibre GL integration\n *\n * @example\n * Basic usage with id (recommended: module-level constant):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { View } from '@deckgl-fiber-renderer/dom';\n * import { uuid } from '@accelint/core';\n *\n * // Create id at module level for stability and easy sharing\n * const MAIN_MAP_ID = uuid();\n *\n * export function MapView() {\n *   return (\n *     <BaseMap className=\"w-full h-full\" id={MAIN_MAP_ID}>\n *       <View id=\"main\" controller />\n *     </BaseMap>\n *   );\n * }\n * ```\n *\n * @example\n * With map mode and event handlers (module-level constant for sharing):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { useMapMode } from '@accelint/map-toolkit/map-mode';\n * import { uuid } from '@accelint/core';\n * import type { PickingInfo } from '@deck.gl/core';\n * import type { MjolnirGestureEvent } from 'mjolnir.js';\n *\n * // Module-level constant - stable and shareable across all components\n * const MAIN_MAP_ID = uuid();\n *\n * function Toolbar() {\n *   // Access map mode using the shared id\n *   const { mode, requestModeChange } = useMapMode(MAIN_MAP_ID);\n *   return <div>Current mode: {mode}</div>;\n * }\n *\n * export function InteractiveMap() {\n *   const handleClick = (info: PickingInfo, event: MjolnirGestureEvent) => {\n *     console.log('Clicked:', info.object);\n *   };\n *\n *   return (\n *     <div className=\"relative w-full h-full\">\n *       <BaseMap className=\"absolute inset-0\" id={MAIN_MAP_ID} onClick={handleClick}>\n *         <View id=\"main\" controller />\n *       </BaseMap>\n *       <Toolbar />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function BaseMap({\n  id,\n  className,\n  children,\n  controller = true,\n  enableControlEvents = true,\n  interleaved = true,\n  parameters = {},\n  styleUrl = DARK_BASE_MAP_STYLE,\n  useDevicePixels = false,\n  widgets: widgetsProp = [],\n  defaultView = '2D',\n  initialViewState,\n  onClick,\n  onHover,\n  onViewStateChange,\n  pickingRadius,\n  ...rest\n}: BaseMapProps) {\n  const deckglInstance = useDeckgl();\n  const container = useId();\n  const mapRef = useRef<MapRef>(null);\n\n  const { cameraState, setCameraState } = useMapCamera(id, {\n    view: defaultView,\n    zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,\n    latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,\n    longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude,\n  });\n\n  const viewState = useMemo<ViewState>(\n    () => ({\n      // @ts-expect-error squirrelly deckglInstance typing\n      ...(deckglInstance?._deck?._getViewState() as ViewState),\n      ...cameraState,\n      bearing: cameraState.rotation,\n    }),\n    // @ts-expect-error squirrelly deckglInstance typing\n    [cameraState, deckglInstance?._deck?._getViewState],\n  );\n\n  // Memoize MapLibre options to avoid creating new object on every render\n  const mapOptions = useMemo(\n    () => ({\n      container,\n      zoom: viewState.zoom,\n      pitch: viewState.pitch,\n      bearing: viewState.bearing,\n      latitude: viewState.latitude,\n      longitude: viewState.longitude,\n      doubleClickZoom: false,\n      dragRotate: false,\n      pitchWithRotate: false,\n      rollEnabled: false,\n      attributionControl: { compact: true },\n      projection: cameraState.projection,\n      maxPitch: cameraState.view === '2D' ? 0 : 85,\n    }),\n    [viewState, container, cameraState.projection, cameraState.view],\n  );\n\n  const emitClick = useEmit<MapClickEvent>(MapEvents.click);\n  const emitHover = useEmit<MapHoverEvent>(MapEvents.hover);\n  const emitViewport = useEmit<MapViewportEvent>(MapEvents.viewport);\n\n  const handleClick = useCallback(\n    (info: PickingInfo, event: MjolnirGestureEvent) => {\n      // send full pickingInfo and event to user-defined onClick\n      onClick?.(info, event);\n\n      emitClick({\n        info: serializePickingInfo(info),\n        event: serializeMjolnirEvent(event),\n        id,\n      });\n    },\n    [emitClick, id, onClick],\n  );\n\n  const handleHover = useCallback(\n    (info: PickingInfo, event: MjolnirPointerEvent) => {\n      // send full pickingInfo and event to user-defined onHover\n      onHover?.(info, event);\n\n      emitHover({\n        info: serializePickingInfo(info),\n        event: serializeMjolnirEvent(event),\n        id,\n      });\n    },\n    [emitHover, id, onHover],\n  );\n\n  const handleGetCursor = useCallback(() => {\n    return getCursor(id);\n  }, [id]);\n\n  const handleViewStateChange = useEffectEvent(\n    (params: ViewStateChangeParameters) => {\n      onViewStateChange?.(params);\n\n      const {\n        viewId,\n        viewState: { latitude, longitude, zoom },\n      } = params;\n\n      // @ts-expect-error squirrelly deckglInstance typing\n      const viewport = deckglInstance._deck\n        .getViewports()\n        // @ts-expect-error squirrelly deckglInstance typing\n        ?.find((vp) => vp.id === viewId);\n\n      emitViewport({\n        id,\n        bounds: viewport?.getBounds(),\n        latitude,\n        longitude,\n        zoom,\n        width: viewport?.width ?? 0,\n        height: viewport?.height ?? 0,\n      });\n    },\n  );\n\n  const handleLoad = useEffectEvent(() => {\n    //--- force update viewport state once all viewports initialized ---\n    // @ts-expect-error squirrelly deckglInstance typing\n    const viewports = deckglInstance._deck.getViewports() ?? [];\n    for (const vp of viewports) {\n      handleViewStateChange({\n        viewId: vp.id,\n        viewState: {\n          latitude: vp.latitude,\n          longitude: vp.longitude,\n          zoom: vp.zoom,\n          id: vp.id,\n          bounds: vp.getBounds(),\n          width: vp.width,\n          height: vp.height,\n        },\n      } as ViewStateChangeParameters);\n    }\n  });\n\n  return (\n    <div id={container} className={className}>\n      {enableControlEvents && <MapControls id={id} mapRef={mapRef} />}\n      <MapProvider id={id}>\n        <MapLibre\n          onMove={(evt) => setCameraState(evt.viewState)}\n          mapStyle={styleUrl}\n          ref={mapRef}\n          {...mapOptions}\n        >\n          <Deckgl\n            {...rest}\n            controller={controller}\n            interleaved={interleaved}\n            getCursor={handleGetCursor}\n            useDevicePixels={useDevicePixels}\n            onClick={handleClick}\n            pickingRadius={pickingRadius ?? PICKING_RADIUS}\n            onHover={handleHover}\n            onLoad={handleLoad}\n            onViewStateChange={handleViewStateChange}\n            // @ts-expect-error - DeckglProps parameters type is overly strict for WebGL parameter spreading.\n            // The merged object is valid at runtime but TypeScript cannot verify all possible parameter combinations.\n            parameters={{ ...PARAMETERS, ...parameters }}\n          >\n            <AddDeckglControl />\n            {children}\n          </Deckgl>\n        </MapLibre>\n      </MapProvider>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/deckgl/base-map/provider.js

@@ -13,8 +13,8 @@
 
 'use client';
 
-import { clearMapModeState } from "../../map-mode/store.js";
 import { clearCursorState } from "../../map-cursor/store.js";
+import { clearMapModeState } from "../../map-mode/store.js";
 import { createContext, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/deckgl/index.d.ts

@@ -15,11 +15,11 @@ import { BaseMapProps, MapClickEvent, MapClickPayload, MapControlPayload, MapDis
 import { DARK_BASE_MAP_STYLE, LIGHT_BASE_MAP_STYLE, PARAMETERS } from "./base-map/constants.js";
 import { BaseMap } from "./base-map/index.js";
 import { SavedViewportOptions, createSavedViewport } from "./saved-viewports/index.js";
-import { CircleProperties, CircleRadius, DisplayShape, EditableShape, ShapeFeature, ShapeFeatureProperties, ShapeFeatureType, ShapeFeatureTypeValues, ShapeId, StyleProperties } from "./shapes/shared/types.js";
+import { CircleProperties, CircleRadius, EllipseProperties, Shape, ShapeFeature, ShapeFeatureProperties, ShapeFeatureType, ShapeFeatureTypeValues, ShapeId, StyleProperties } from "./shapes/shared/types.js";
 import { DisplayShapeLayerProps, StyledFeature, StyledFeatureProperties } from "./shapes/display-shape-layer/types.js";
 import { DisplayShapeLayer } from "./shapes/display-shape-layer/index.js";
-import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, SHAPE_LAYER_IDS, STROKE_PATTERNS, STROKE_WIDTHS } from "./shapes/shared/constants.js";
-import { SHAPE_EVENTS, ShapeEventHandler, ShapeEventPayload, ShapeEventType, ShapeEvents } from "./shapes/shared/events.js";
+import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, LINE_PATTERNS, LINE_WIDTHS, SHAPE_LAYER_IDS } from "./shapes/shared/constants.js";
+import { ShapeEventType, ShapeEvents } from "./shapes/shared/events.js";
 import "./shapes/index.js";
 import { SymbolLayer, SymbolLayerProps } from "./symbol-layer/index.js";
-export { BaseMap, type BaseMapProps, type CircleProperties, type CircleRadius, DARK_BASE_MAP_STYLE, DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, type DisplayShape, DisplayShapeLayer, type DisplayShapeLayerProps, type EditableShape, LIGHT_BASE_MAP_STYLE, type MapClickEvent, type MapClickPayload, type MapControlPayload, type MapDisablePanEvent, type MapDisableZoomEvent, type MapEnablePanEvent, type MapEnableZoomEvent, type MapEventType, MapEvents, MapEventsNamespace, type MapHoverEvent, type MapHoverPayload, PARAMETERS, SHAPE_EVENTS, SHAPE_LAYER_IDS, STROKE_PATTERNS, STROKE_WIDTHS, type SavedViewportOptions, type ShapeEventHandler, type ShapeEventPayload, type ShapeEventType, ShapeEvents, type ShapeFeature, type ShapeFeatureProperties, ShapeFeatureType, type ShapeFeatureTypeValues, type ShapeId, type StyleProperties, type StyledFeature, type StyledFeatureProperties, SymbolLayer, type SymbolLayerProps, createSavedViewport };
+export { BaseMap, type BaseMapProps, type CircleProperties, type CircleRadius, DARK_BASE_MAP_STYLE, DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, DisplayShapeLayer, type DisplayShapeLayerProps, type EllipseProperties, LIGHT_BASE_MAP_STYLE, LINE_PATTERNS, LINE_WIDTHS, type MapClickEvent, type MapClickPayload, type MapControlPayload, type MapDisablePanEvent, type MapDisableZoomEvent, type MapEnablePanEvent, type MapEnableZoomEvent, type MapEventType, MapEvents, MapEventsNamespace, type MapHoverEvent, type MapHoverPayload, PARAMETERS, SHAPE_LAYER_IDS, type SavedViewportOptions, type Shape, type ShapeEventType, ShapeEvents, type ShapeFeature, type ShapeFeatureProperties, ShapeFeatureType, type ShapeFeatureTypeValues, type ShapeId, type StyleProperties, type StyledFeature, type StyledFeatureProperties, SymbolLayer, type SymbolLayerProps, createSavedViewport };

package/dist/deckgl/index.js

@@ -15,10 +15,10 @@ import { MapEvents, MapEventsNamespace } from "./base-map/events.js";
 import { DARK_BASE_MAP_STYLE, LIGHT_BASE_MAP_STYLE, PARAMETERS } from "./base-map/constants.js";
 import { BaseMap } from "./base-map/index.js";
 import { createSavedViewport } from "./saved-viewports/index.js";
-import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, SHAPE_LAYER_IDS, STROKE_PATTERNS, STROKE_WIDTHS } from "./shapes/shared/constants.js";
-import { SHAPE_EVENTS, ShapeEvents } from "./shapes/shared/events.js";
-import { DisplayShapeLayer } from "./shapes/display-shape-layer/index.js";
+import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, LINE_PATTERNS, LINE_WIDTHS, SHAPE_LAYER_IDS } from "./shapes/shared/constants.js";
+import { ShapeEvents } from "./shapes/shared/events.js";
 import { ShapeFeatureType } from "./shapes/shared/types.js";
+import { DisplayShapeLayer } from "./shapes/display-shape-layer/index.js";
 import { SymbolLayer } from "./symbol-layer/index.js";
 
-export { BaseMap, DARK_BASE_MAP_STYLE, DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, DisplayShapeLayer, LIGHT_BASE_MAP_STYLE, MapEvents, MapEventsNamespace, PARAMETERS, SHAPE_EVENTS, SHAPE_LAYER_IDS, STROKE_PATTERNS, STROKE_WIDTHS, ShapeEvents, ShapeFeatureType, SymbolLayer, createSavedViewport };
+export { BaseMap, DARK_BASE_MAP_STYLE, DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, DisplayShapeLayer, LIGHT_BASE_MAP_STYLE, LINE_PATTERNS, LINE_WIDTHS, MapEvents, MapEventsNamespace, PARAMETERS, SHAPE_LAYER_IDS, ShapeEvents, ShapeFeatureType, SymbolLayer, createSavedViewport };

package/dist/deckgl/saved-viewports/storage.js

@@ -11,14 +11,22 @@
  */
 
 
+import { getLogger } from "@accelint/logger";
+
 //#region src/deckgl/saved-viewports/storage.ts
+const logger = getLogger({
+	enabled: process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test",
+	level: "warn",
+	prefix: "[SavedViewports]",
+	pretty: true
+});
 const STORAGE_ID = "deckgl-saved-viewports";
 const getContainerKey = (uniqueIdentifier) => uniqueIdentifier ? `${STORAGE_ID}-${uniqueIdentifier}` : STORAGE_ID;
 const getContainer = (containerKey) => {
 	try {
 		return JSON.parse(localStorage.getItem(containerKey) ?? "{}");
 	} catch {
-		console.warn(`Failed to parse storage container for key: ${containerKey}, returning empty container.`);
+		logger.warn(`Failed to parse storage container for key: ${containerKey}, returning empty container.`);
 		return {};
 	}
 };
@@ -30,7 +38,7 @@ const persist = (id, obj, uniqueIdentifier) => {
 };
 const retrieve = (id, uniqueIdentifier) => {
 	const obj = getContainer(getContainerKey(uniqueIdentifier))[id];
-	if (!obj) console.warn(`Object with id: ${id} does not exist`);
+	if (!obj) logger.warn(`Object with id: ${id} does not exist`);
 	return obj;
 };
 

package/dist/deckgl/saved-viewports/storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage.js","names":[],"sources":["../../../src/deckgl/saved-viewports/storage.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { MapViewState } from '@deck.gl/core';\n\nexport const STORAGE_ID = 'deckgl-saved-viewports';\n\nconst getContainerKey = (uniqueIdentifier?: string) =>\n  uniqueIdentifier ? `${STORAGE_ID}-${uniqueIdentifier}` : STORAGE_ID;\n\nconst getContainer = (containerKey: string) => {\n  try {\n    return JSON.parse(localStorage.getItem(containerKey) ?? '{}');\n  } catch {\n    console.warn(\n      `Failed to parse storage container for key: ${containerKey}, returning empty container.`,\n    );\n    return {};\n  }\n};\n\nexport const persist = (\n  id: string,\n  obj: MapViewState,\n  uniqueIdentifier?: string,\n) => {\n  const containerKey = getContainerKey(uniqueIdentifier);\n  const container = getContainer(containerKey);\n  container[id] = obj;\n  localStorage.setItem(containerKey, JSON.stringify(container));\n};\n\nexport const retrieve = (id: string, uniqueIdentifier?: string) => {\n  const containerKey = getContainerKey(uniqueIdentifier);\n  const container = getContainer(containerKey);\n  const obj = container[id];\n  if (!obj) {\n    console.warn(`Object with id: ${id} does not exist`);\n  }\n  return obj;\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,aAAa;AAE1B,MAAM,mBAAmB,qBACvB,mBAAmB,GAAG,WAAW,GAAG,qBAAqB;AAE3D,MAAM,gBAAgB,iBAAyB;AAC7C,KAAI;AACF,SAAO,KAAK,MAAM,aAAa,QAAQ,aAAa,IAAI,KAAK;SACvD;AACN,UAAQ,KACN,8CAA8C,aAAa,8BAC5D;AACD,SAAO,EAAE;;;AAIb,MAAa,WACX,IACA,KACA,qBACG;CACH,MAAM,eAAe,gBAAgB,iBAAiB;CACtD,MAAM,YAAY,aAAa,aAAa;AAC5C,WAAU,MAAM;AAChB,cAAa,QAAQ,cAAc,KAAK,UAAU,UAAU,CAAC;;AAG/D,MAAa,YAAY,IAAY,qBAA8B;CAGjE,MAAM,MADY,aADG,gBAAgB,iBAAiB,CACV,CACtB;AACtB,KAAI,CAAC,IACH,SAAQ,KAAK,mBAAmB,GAAG,iBAAiB;AAEtD,QAAO"}
+{"version":3,"file":"storage.js","names":[],"sources":["../../../src/deckgl/saved-viewports/storage.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { getLogger } from '@accelint/logger';\nimport type { MapViewState } from '@deck.gl/core';\n\nconst logger = getLogger({\n  enabled:\n    process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',\n  level: 'warn',\n  prefix: '[SavedViewports]',\n  pretty: true,\n});\n\nexport const STORAGE_ID = 'deckgl-saved-viewports';\n\nconst getContainerKey = (uniqueIdentifier?: string) =>\n  uniqueIdentifier ? `${STORAGE_ID}-${uniqueIdentifier}` : STORAGE_ID;\n\nconst getContainer = (containerKey: string) => {\n  try {\n    return JSON.parse(localStorage.getItem(containerKey) ?? '{}');\n  } catch {\n    logger.warn(\n      `Failed to parse storage container for key: ${containerKey}, returning empty container.`,\n    );\n    return {};\n  }\n};\n\nexport const persist = (\n  id: string,\n  obj: MapViewState,\n  uniqueIdentifier?: string,\n) => {\n  const containerKey = getContainerKey(uniqueIdentifier);\n  const container = getContainer(containerKey);\n  container[id] = obj;\n  localStorage.setItem(containerKey, JSON.stringify(container));\n};\n\nexport const retrieve = (id: string, uniqueIdentifier?: string) => {\n  const containerKey = getContainerKey(uniqueIdentifier);\n  const container = getContainer(containerKey);\n  const obj = container[id];\n  if (!obj) {\n    logger.warn(`Object with id: ${id} does not exist`);\n  }\n  return obj;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,SAAS,UAAU;CACvB,SACE,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,aAAa;CACpE,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;AAEF,MAAa,aAAa;AAE1B,MAAM,mBAAmB,qBACvB,mBAAmB,GAAG,WAAW,GAAG,qBAAqB;AAE3D,MAAM,gBAAgB,iBAAyB;AAC7C,KAAI;AACF,SAAO,KAAK,MAAM,aAAa,QAAQ,aAAa,IAAI,KAAK;SACvD;AACN,SAAO,KACL,8CAA8C,aAAa,8BAC5D;AACD,SAAO,EAAE;;;AAIb,MAAa,WACX,IACA,KACA,qBACG;CACH,MAAM,eAAe,gBAAgB,iBAAiB;CACtD,MAAM,YAAY,aAAa,aAAa;AAC5C,WAAU,MAAM;AAChB,cAAa,QAAQ,cAAc,KAAK,UAAU,UAAU,CAAC;;AAG/D,MAAa,YAAY,IAAY,qBAA8B;CAGjE,MAAM,MADY,aADG,gBAAgB,iBAAiB,CACV,CACtB;AACtB,KAAI,CAAC,IACH,QAAO,KAAK,mBAAmB,GAAG,iBAAiB;AAErD,QAAO"}

package/dist/deckgl/shapes/display-shape-layer/constants.js

@@ -13,6 +13,8 @@
 
 'use client';
 
+import { DEFAULT_COLORS } from "../shared/constants.js";
+
 //#region src/deckgl/shapes/display-shape-layer/constants.ts
 /**
 * Map interaction constants
@@ -27,12 +29,7 @@ const MAP_INTERACTION = {
 * Selection highlight configuration
 */
 const SELECTION_HIGHLIGHT = {
-	COLOR: [
-		40,
-		245,
-		190,
-		100
-	],
+	COLOR: DEFAULT_COLORS.highlight,
 	ICON_SIZE_INCREASE: 8
 };
 /**
@@ -50,12 +47,12 @@ const COFFIN_CORNERS = {
 */
 const DEFAULT_DISPLAY_PROPS = {
 	pickable: true,
-	showLabels: true,
+	showLabels: "always",
 	showHighlight: false,
 	applyBaseOpacity: true,
 	highlightColor: SELECTION_HIGHLIGHT.COLOR
 };
 
 //#endregion
-export { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION, SELECTION_HIGHLIGHT };
+export { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION };
 //# sourceMappingURL=constants.js.map

package/dist/deckgl/shapes/display-shape-layer/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/constants.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\n/**\n * Map interaction constants\n * Values derived from ngc2 for consistency\n */\nexport const MAP_INTERACTION = {\n  LINE_WIDTH_MIN_PIXELS: 1, // Minimum line width in pixels\n  ICON_SIZE: 38, // Size of shape icons\n  ICON_HOVER_SIZE_INCREASE: 5, // Additional pixels added on hover\n} as const;\n\n/**\n * Selection highlight configuration\n */\nexport const SELECTION_HIGHLIGHT = {\n  COLOR: [40, 245, 190, 100] as [number, number, number, number], // Turquoise/cyan at ~39% opacity\n  ICON_SIZE_INCREASE: 8, // Additional pixels for highlight icon\n} as const;\n\n/**\n * Coffin corners configuration for Point selection/hover feedback\n * Coffin corners are bracket-like corners that appear around points\n */\nexport const COFFIN_CORNERS = {\n  /** Icon name for hover state (white corners with background fill) */\n  HOVER_ICON: 'coffin-corners-hover',\n  /** Icon name for selected state (blue corners, no fill) */\n  SELECTED_ICON: 'coffin-corners-selected',\n  /** Icon name for selected+hover state (blue corners with background fill) */\n  SELECTED_HOVER_ICON: 'coffin-corners-selected-hover',\n  /** Size of the coffin corners icon */\n  SIZE: 38,\n} as const;\n\n/**\n * Default props for DisplayShapeLayer\n */\nexport const DEFAULT_DISPLAY_PROPS = {\n  pickable: true,\n  showLabels: true,\n  showHighlight: false,\n  applyBaseOpacity: true,\n  highlightColor: SELECTION_HIGHLIGHT.COLOR,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,MAAa,kBAAkB;CAC7B,uBAAuB;CACvB,WAAW;CACX,0BAA0B;CAC3B;;;;AAKD,MAAa,sBAAsB;CACjC,OAAO;EAAC;EAAI;EAAK;EAAK;EAAI;CAC1B,oBAAoB;CACrB;;;;;AAMD,MAAa,iBAAiB;CAE5B,YAAY;CAEZ,eAAe;CAEf,qBAAqB;CAErB,MAAM;CACP;;;;AAKD,MAAa,wBAAwB;CACnC,UAAU;CACV,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,gBAAgB,oBAAoB;CACrC"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/constants.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { DEFAULT_COLORS } from '../shared/constants';\n\n/**\n * Map interaction constants\n * Values derived from ngc2 for consistency\n */\nexport const MAP_INTERACTION = {\n  LINE_WIDTH_MIN_PIXELS: 1, // Minimum line width in pixels\n  ICON_SIZE: 38, // Size of shape icons\n  ICON_HOVER_SIZE_INCREASE: 5, // Additional pixels added on hover\n} as const;\n\n/**\n * Selection highlight configuration\n */\nexport const SELECTION_HIGHLIGHT = {\n  /** Uses DEFAULT_COLORS.highlight from shared constants */\n  COLOR: DEFAULT_COLORS.highlight,\n  ICON_SIZE_INCREASE: 8, // Additional pixels for highlight icon\n} as const;\n\n/**\n * Coffin corners configuration for Point selection/hover feedback\n * Coffin corners are bracket-like corners that appear around points\n */\nexport const COFFIN_CORNERS = {\n  /** Icon name for hover state (white corners with background fill) */\n  HOVER_ICON: 'coffin-corners-hover',\n  /** Icon name for selected state (blue corners, no fill) */\n  SELECTED_ICON: 'coffin-corners-selected',\n  /** Icon name for selected+hover state (blue corners with background fill) */\n  SELECTED_HOVER_ICON: 'coffin-corners-selected-hover',\n  /** Size of the coffin corners icon */\n  SIZE: 38,\n} as const;\n\n/**\n * Default props for DisplayShapeLayer\n */\nexport const DEFAULT_DISPLAY_PROPS = {\n  pickable: true,\n  showLabels: 'always' as const,\n  showHighlight: false,\n  applyBaseOpacity: true,\n  highlightColor: SELECTION_HIGHLIGHT.COLOR,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,kBAAkB;CAC7B,uBAAuB;CACvB,WAAW;CACX,0BAA0B;CAC3B;;;;AAKD,MAAa,sBAAsB;CAEjC,OAAO,eAAe;CACtB,oBAAoB;CACrB;;;;;AAMD,MAAa,iBAAiB;CAE5B,YAAY;CAEZ,eAAe;CAEf,qBAAqB;CAErB,MAAM;CACP;;;;AAKD,MAAa,wBAAwB;CACnC,UAAU;CACV,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,gBAAgB,oBAAoB;CACrC"}

package/dist/deckgl/shapes/display-shape-layer/index.d.ts

@@ -17,16 +17,16 @@ import { CompositeLayer, Layer, PickingInfo } from "@deck.gl/core";
 
 //#region src/deckgl/shapes/display-shape-layer/index.d.ts
 /**
- * State interface for DisplayShapeLayer
+ * State type for DisplayShapeLayer
  */
-interface DisplayShapeLayerState {
+type DisplayShapeLayerState = {
   /** Index of currently hovered shape, undefined when not hovering */
   hoverIndex?: number;
   /** ID of the last hovered shape for event deduplication */
   lastHoveredId?: ShapeId | null;
   /** Allow additional properties from base layer state */
   [key: string]: unknown;
-}
+};
 /**
  * DisplayShapeLayer - Read-only shapes visualization layer
  *
@@ -37,15 +37,15 @@ interface DisplayShapeLayerState {
  * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
  * - **Icon support**: Custom icons for Point geometries via icon atlases
  * - **Interactive selection**: Click handling with dotted border and optional highlight
- * - **Hover effects**: Line width increases on hover for better UX
+ * - **Hover effects**: Border/outline width increases on hover for better UX
  * - **Customizable labels**: Flexible label positioning with per-shape or global options
- * - **Style properties**: Full control over colors, stroke patterns, and opacity
+ * - **Style properties**: Full control over colors, border/outline patterns, and opacity
  * - **Event bus integration**: Automatically emits shape events via @accelint/bus
  * - **Multi-map support**: Events include map instance ID for isolation
  *
  * ## Selection Visual Feedback
  * When a shape is selected via `selectedShapeId`:
- * - The shape's stroke pattern changes to dotted
+ * - The shape's border/outline pattern changes to dotted
  * - An optional highlight renders underneath (controlled by `showHighlight` prop)
  *
  * ## Layer Structure
@@ -65,19 +65,19 @@ interface DisplayShapeLayerState {
  * - `shapes:selected` - Emitted when a shape is clicked (includes mapId)
  * - `shapes:hovered` - Emitted when the hovered shape changes (deduplicated, includes mapId)
  *
- * For selection with auto-deselection, use the companion `useShapeSelection` hook which handles
+ * For selection with auto-deselection, use the companion `useSelectShape` hook which handles
  * all the event wiring automatically. See the example below.
  *
- * @example Basic usage with useShapeSelection hook (recommended)
+ * @example Basic usage with useSelectShape hook (recommended)
  * ```tsx
  * import '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/fiber';
- * import { useShapeSelection } from '@accelint/map-toolkit/deckgl/shapes';
+ * import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
  * import { uuid } from '@accelint/core';
  *
  * const MAP_ID = uuid();
  *
  * function MapWithShapes() {
- *   const { selectedId } = useShapeSelection(MAP_ID);
+ *   const { selectedId } = useSelectShape(MAP_ID);
  *
  *   return (
  *     <BaseMap id={MAP_ID}>
@@ -86,7 +86,7 @@ interface DisplayShapeLayerState {
  *         mapId={MAP_ID}
  *         data={shapes}
  *         selectedShapeId={selectedId}
- *         showLabels={true}
+ *         showLabels="always"
  *         pickable={true}
  *       />
  *     </BaseMap>
@@ -99,7 +99,7 @@ interface DisplayShapeLayerState {
  * <displayShapeLayer
  *   id="my-shapes"
  *   data={shapes}
- *   showLabels={true}
+ *   showLabels="always"
  *   labelOptions={{
  *     // Position circle labels at the top
  *     circleLabelCoordinateAnchor: 'top',
@@ -118,10 +118,10 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
   static layerName: string;
   static defaultProps: {
     pickable: boolean;
-    showLabels: boolean;
+    showLabels: "always";
     showHighlight: boolean;
     applyBaseOpacity: boolean;
-    highlightColor: [number, number, number, number];
+    highlightColor: _deck_gl_core0.Color;
   };
   /**
    * Clean up state and caches when layer is destroyed
@@ -194,6 +194,10 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
   private renderMainLayer;
   /**
    * Render labels layer
+   * Supports three modes:
+   * - 'always': Show labels for all shapes
+   * - 'hover': Show label only for the currently hovered shape
+   * - 'never': No labels
    */
   private renderLabelsLayer;
   /**

package/dist/deckgl/shapes/display-shape-layer/index.js

@@ -15,15 +15,23 @@
 
 import { DASH_ARRAYS, SHAPE_LAYER_IDS } from "../shared/constants.js";
 import { ShapeEvents } from "../shared/events.js";
+import { getDashArray, getFillColor, getLineColor } from "../shared/utils/style-utils.js";
 import { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION } from "./constants.js";
 import { createShapeLabelLayer } from "./shape-label-layer.js";
-import { getDashArray, getFillColor, getHighlightColor, getHighlightLineWidth, getHoverLineWidth, getStrokeColor } from "./utils/display-style.js";
+import { getHighlightColor, getHighlightLineWidth, getHoverLineWidth } from "./utils/display-style.js";
 import { Broadcast } from "@accelint/bus";
+import { getLogger } from "@accelint/logger";
 import { CompositeLayer } from "@deck.gl/core";
 import { PathStyleExtension } from "@deck.gl/extensions";
 import { GeoJsonLayer, IconLayer } from "@deck.gl/layers";
 
 //#region src/deckgl/shapes/display-shape-layer/index.ts
+const logger = getLogger({
+	enabled: process.env.NODE_ENV !== "production",
+	level: "warn",
+	prefix: "[DisplayShapeLayer]",
+	pretty: true
+});
 /**
 * Typed event bus instance for shape events.
 * Provides type-safe event emission for shape interactions.
@@ -39,15 +47,15 @@ const shapeBus = Broadcast.getInstance();
 * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
 * - **Icon support**: Custom icons for Point geometries via icon atlases
 * - **Interactive selection**: Click handling with dotted border and optional highlight
-* - **Hover effects**: Line width increases on hover for better UX
+* - **Hover effects**: Border/outline width increases on hover for better UX
 * - **Customizable labels**: Flexible label positioning with per-shape or global options
-* - **Style properties**: Full control over colors, stroke patterns, and opacity
+* - **Style properties**: Full control over colors, border/outline patterns, and opacity
 * - **Event bus integration**: Automatically emits shape events via @accelint/bus
 * - **Multi-map support**: Events include map instance ID for isolation
 *
 * ## Selection Visual Feedback
 * When a shape is selected via `selectedShapeId`:
-* - The shape's stroke pattern changes to dotted
+* - The shape's border/outline pattern changes to dotted
 * - An optional highlight renders underneath (controlled by `showHighlight` prop)
 *
 * ## Layer Structure
@@ -67,19 +75,19 @@ const shapeBus = Broadcast.getInstance();
 * - `shapes:selected` - Emitted when a shape is clicked (includes mapId)
 * - `shapes:hovered` - Emitted when the hovered shape changes (deduplicated, includes mapId)
 *
-* For selection with auto-deselection, use the companion `useShapeSelection` hook which handles
+* For selection with auto-deselection, use the companion `useSelectShape` hook which handles
 * all the event wiring automatically. See the example below.
 *
-* @example Basic usage with useShapeSelection hook (recommended)
+* @example Basic usage with useSelectShape hook (recommended)
 * ```tsx
 * import '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/fiber';
-* import { useShapeSelection } from '@accelint/map-toolkit/deckgl/shapes';
+* import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
 * import { uuid } from '@accelint/core';
 *
 * const MAP_ID = uuid();
 *
 * function MapWithShapes() {
-*   const { selectedId } = useShapeSelection(MAP_ID);
+*   const { selectedId } = useSelectShape(MAP_ID);
 *
 *   return (
 *     <BaseMap id={MAP_ID}>
@@ -88,7 +96,7 @@ const shapeBus = Broadcast.getInstance();
 *         mapId={MAP_ID}
 *         data={shapes}
 *         selectedShapeId={selectedId}
-*         showLabels={true}
+*         showLabels="always"
 *         pickable={true}
 *       />
 *     </BaseMap>
@@ -101,7 +109,7 @@ const shapeBus = Broadcast.getInstance();
 * <displayShapeLayer
 *   id="my-shapes"
 *   data={shapes}
-*   showLabels={true}
+*   showLabels="always"
 *   labelOptions={{
 *     // Position circle labels at the top
 *     circleLabelCoordinateAnchor: 'top',
@@ -150,16 +158,22 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	getFeaturesWithId() {
 		const { data } = this.props;
 		if (this.featuresCache?.data === data) return this.featuresCache.features;
-		const features = data.map((shape) => ({
-			...shape.feature,
-			properties: {
-				...shape.feature.properties,
-				shapeId: shape.id
-			}
-		}));
+		const features = [];
+		const shapeIdToIndex = /* @__PURE__ */ new Map();
+		for (const [i, shape] of data.entries()) {
+			features.push({
+				...shape.feature,
+				properties: {
+					...shape.feature.properties,
+					shapeId: shape.id
+				}
+			});
+			shapeIdToIndex.set(shape.id, i);
+		}
 		this.featuresCache = {
 			data,
-			features
+			features,
+			shapeIdToIndex
 		};
 		return features;
 	}
@@ -242,19 +256,25 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	*/
 	renderCoffinCornersLayer(features) {
 		const { selectedShapeId } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const shapeIdToIndex = this.featuresCache?.shapeIdToIndex;
+		if (!shapeIdToIndex) return null;
 		const pointFeatures = features.filter((f) => {
 			if (f.geometry.type !== "Point") return false;
 			if (!!!f.properties?.styleProperties?.icon) return false;
-			const isSelected = f.properties?.shapeId === selectedShapeId;
-			const isHovered = this.state?.hoverIndex !== void 0 && features.indexOf(f) === this.state.hoverIndex;
-			return isSelected || isHovered;
+			const shapeId = f.properties?.shapeId;
+			const isSelected = shapeId === selectedShapeId;
+			const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
+			return isSelected || hoverIndex !== void 0 && featureIndex === hoverIndex;
 		});
 		if (pointFeatures.length === 0) return null;
 		const firstPointIcon = pointFeatures[0]?.properties?.styleProperties?.icon;
 		const iconAtlas = firstPointIcon?.atlas;
 		const iconMapping = firstPointIcon?.mapping;
-		if (!iconAtlas) return null;
-		if (!iconMapping) return null;
+		if (!(iconAtlas && iconMapping)) {
+			logger.warn("Point shape has icon style but missing iconAtlas or iconMapping - coffin corners will not render");
+			return null;
+		}
 		const extendedMapping = {
 			...iconMapping,
 			[COFFIN_CORNERS.HOVER_ICON]: {
@@ -285,9 +305,10 @@ var DisplayShapeLayer = class extends CompositeLayer {
 			iconAtlas,
 			iconMapping: extendedMapping,
 			getIcon: (d) => {
-				const isSelected = d.properties?.shapeId === selectedShapeId;
-				const isHovered = this.state?.hoverIndex !== void 0 && features.indexOf(d) === this.state.hoverIndex;
-				if (isSelected && isHovered) return COFFIN_CORNERS.SELECTED_HOVER_ICON;
+				const shapeId = d.properties?.shapeId;
+				const isSelected = shapeId === selectedShapeId;
+				const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
+				if (isSelected && hoverIndex !== void 0 && featureIndex === hoverIndex) return COFFIN_CORNERS.SELECTED_HOVER_ICON;
 				if (isSelected) return COFFIN_CORNERS.SELECTED_ICON;
 				return COFFIN_CORNERS.HOVER_ICON;
 			},
@@ -338,7 +359,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 			filled: true,
 			stroked: true,
 			getFillColor: (d) => getFillColor(d, applyBaseOpacity),
-			getLineColor: getStrokeColor,
+			getLineColor,
 			getLineWidth: (d, info) => {
 				return getHoverLineWidth(d, info?.index === this.state?.hoverIndex);
 			},
@@ -357,7 +378,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 				getIconSize: (d) => {
 					return d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE;
 				},
-				getIconColor: getStrokeColor,
+				getIconColor: getLineColor,
 				getIconPixelOffset: (d) => {
 					return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
 				},
@@ -387,13 +408,25 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	}
 	/**
 	* Render labels layer
+	* Supports three modes:
+	* - 'always': Show labels for all shapes
+	* - 'hover': Show label only for the currently hovered shape
+	* - 'never': No labels
 	*/
 	renderLabelsLayer() {
 		const { showLabels, data, labelOptions } = this.props;
-		if (!showLabels) return null;
+		if (showLabels === "never") return null;
+		let labelData = data;
+		if (showLabels === "hover") {
+			const hoverIndex = this.state?.hoverIndex;
+			if (hoverIndex === void 0) return null;
+			const hoveredShape = data[hoverIndex];
+			labelData = hoveredShape ? [hoveredShape] : [];
+		}
+		if (labelData.length === 0) return null;
 		return createShapeLabelLayer({
 			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_LABELS}`,
-			data,
+			data: labelData,
 			labelOptions
 		});
 	}