@accelint/map-toolkit 0.5.0 → 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["features: Shape['feature'][]"],"sources":["../../../../src/deckgl/shapes/display-shape-layer/index.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 { Broadcast } from '@accelint/bus';\nimport { getLogger } from '@accelint/logger';\nimport { CompositeLayer } from '@deck.gl/core';\nimport { PathStyleExtension } from '@deck.gl/extensions';\nimport { GeoJsonLayer, IconLayer } from '@deck.gl/layers';\nimport { DASH_ARRAYS, SHAPE_LAYER_IDS } from '../shared/constants';\nimport { type ShapeEvent, ShapeEvents } from '../shared/events';\nimport {\n  getDashArray,\n  getFillColor,\n  getLineColor,\n} from '../shared/utils/style-utils';\nimport {\n  COFFIN_CORNERS,\n  DEFAULT_DISPLAY_PROPS,\n  MAP_INTERACTION,\n} from './constants';\nimport { createShapeLabelLayer } from './shape-label-layer';\nimport {\n  getHighlightColor,\n  getHighlightLineWidth,\n  getHoverLineWidth,\n} from './utils/display-style';\nimport type { Layer, PickingInfo } from '@deck.gl/core';\nimport type { Shape, ShapeId } from '../shared/types';\nimport type { DisplayShapeLayerProps } from './types';\n\nconst logger = getLogger({\n  enabled: process.env.NODE_ENV !== 'production',\n  level: 'warn',\n  prefix: '[DisplayShapeLayer]',\n  pretty: true,\n});\n\n/**\n * Typed event bus instance for shape events.\n * Provides type-safe event emission for shape interactions.\n */\nconst shapeBus = Broadcast.getInstance<ShapeEvent>();\n\n/**\n * State type for DisplayShapeLayer\n */\ntype DisplayShapeLayerState = {\n  /** Index of currently hovered shape, undefined when not hovering */\n  hoverIndex?: number;\n  /** ID of the last hovered shape for event deduplication */\n  lastHoveredId?: ShapeId | null;\n  /** Allow additional properties from base layer state */\n  [key: string]: unknown;\n};\n\n/**\n * Cache for transformed features to avoid recreating objects on every render.\n */\ntype FeaturesCache = {\n  /** Reference to the original data array for identity comparison */\n  data: Shape[];\n  /** Transformed features with shapeId added to properties */\n  features: Shape['feature'][];\n  /** Map of shapeId to feature index for O(1) lookup */\n  shapeIdToIndex: Map<ShapeId, number>;\n};\n\n/**\n * DisplayShapeLayer - Read-only shapes visualization layer\n *\n * A composite deck.gl layer for displaying geographic shapes with interactive features.\n * Ideal for rendering shapes from external APIs or displaying read-only geographic data.\n *\n * ## Features\n * - **Multiple geometry types**: Point, LineString, Polygon, and Circle\n * - **Icon support**: Custom icons for Point geometries via icon atlases\n * - **Interactive selection**: Click handling with dotted border and optional highlight\n * - **Hover effects**: Border/outline width increases on hover for better UX\n * - **Customizable labels**: Flexible label positioning with per-shape or global options\n * - **Style properties**: Full control over colors, border/outline patterns, and opacity\n * - **Event bus integration**: Automatically emits shape events via @accelint/bus\n * - **Multi-map support**: Events include map instance ID for isolation\n *\n * ## Selection Visual Feedback\n * When a shape is selected via `selectedShapeId`:\n * - The shape's border/outline pattern changes to dotted\n * - An optional highlight renders underneath (controlled by `showHighlight` prop)\n *\n * ## Layer Structure\n * Renders up to four sublayers (in order, bottom to top):\n * 1. **Highlight layer**: Selection highlight effect for non-icon-Point shapes (if showHighlight=true)\n * 2. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons\n * 3. **Main GeoJsonLayer**: Shape geometries with styling and interaction\n * 4. **Label layer**: Text labels (if showLabels enabled)\n *\n * ## Icon Atlas Constraint\n * When using icons for Point geometries, all shapes in a single layer must share the\n * same icon atlas. The layer uses the first atlas found across all features. If you\n * need icons from different atlases, use separate DisplayShapeLayer instances.\n *\n * ## Event Bus Integration\n * Automatically emits shape events that can be consumed anywhere in your app:\n * - `shapes:selected` - Emitted when a shape is clicked (includes mapId)\n * - `shapes:hovered` - Emitted when the hovered shape changes (deduplicated, includes mapId)\n *\n * For selection with auto-deselection, use the companion `useSelectShape` hook which handles\n * all the event wiring automatically. See the example below.\n *\n * @example Basic usage with useSelectShape hook (recommended)\n * ```tsx\n * import '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/fiber';\n * import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';\n * import { uuid } from '@accelint/core';\n *\n * const MAP_ID = uuid();\n *\n * function MapWithShapes() {\n *   const { selectedId } = useSelectShape(MAP_ID);\n *\n *   return (\n *     <BaseMap id={MAP_ID}>\n *       <displayShapeLayer\n *         id=\"my-shapes\"\n *         mapId={MAP_ID}\n *         data={shapes}\n *         selectedShapeId={selectedId}\n *         showLabels=\"always\"\n *         pickable={true}\n *       />\n *     </BaseMap>\n *   );\n * }\n * ```\n *\n * @example With custom label positioning\n * ```tsx\n * <displayShapeLayer\n *   id=\"my-shapes\"\n *   data={shapes}\n *   showLabels=\"always\"\n *   labelOptions={{\n *     // Position circle labels at the top\n *     circleLabelCoordinateAnchor: 'top',\n *     circleLabelVerticalAnchor: 'bottom',\n *     circleLabelOffset: [0, -10],\n *     // Position line labels at the middle\n *     lineStringLabelCoordinateAnchor: 'middle',\n *   }}\n * />\n * ```\n */\nexport class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {\n  // State is typed via DisplayShapeLayerState but deck.gl doesn't support generic state\n  declare state: DisplayShapeLayerState;\n\n  /** Cache for transformed features to avoid recreating objects on every render */\n  private featuresCache: FeaturesCache | null = null;\n\n  static override layerName = 'DisplayShapeLayer';\n\n  static override defaultProps = {\n    ...DEFAULT_DISPLAY_PROPS,\n  };\n\n  /**\n   * Clean up state and caches when layer is destroyed\n   */\n  override finalizeState(): void {\n    // Clear hover state to prevent stale references\n    if (this.state?.hoverIndex !== undefined) {\n      this.setState({ hoverIndex: undefined, lastHoveredId: undefined });\n    }\n    // Clear features cache\n    this.featuresCache = null;\n  }\n\n  /**\n   * Override getPickingInfo to handle events from sublayers\n   * This is the correct pattern for CompositeLayer event handling\n   */\n  override getPickingInfo({\n    info,\n    mode,\n    sourceLayer,\n  }: {\n    info: PickingInfo;\n    mode?: string;\n    // biome-ignore lint/suspicious/noExplicitAny: sourceLayer type from deck.gl is not well-typed\n    sourceLayer?: any;\n  }) {\n    // Check if this picking event came from our main shapes layer\n    if (sourceLayer?.id === `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`) {\n      // Handle click events (deck.gl uses 'query' mode for clicks)\n      if (mode === 'query') {\n        this.handleShapeClick(info);\n      }\n\n      // Handle hover events (including when mode is undefined, which is hover)\n      if (mode === 'hover' || !mode) {\n        // Update hover state\n        if (info.index !== undefined && info.index !== this.state?.hoverIndex) {\n          this.setState({ hoverIndex: info.index });\n        } else if (\n          info.index === undefined &&\n          this.state?.hoverIndex !== undefined\n        ) {\n          this.setState({ hoverIndex: undefined });\n        }\n\n        // Call hover callback\n        this.handleShapeHover(info);\n      }\n    }\n\n    return info;\n  }\n\n  /**\n   * Convert shapes to GeoJSON features with shapeId in properties.\n   * Uses caching to avoid recreating objects on every render cycle.\n   */\n  private getFeaturesWithId(): Shape['feature'][] {\n    const { data } = this.props;\n\n    // Return cached features if data hasn't changed (identity check)\n    if (this.featuresCache?.data === data) {\n      return this.featuresCache.features;\n    }\n\n    // Transform features and build shapeId->index map in a single pass\n    const features: Shape['feature'][] = [];\n    const shapeIdToIndex = new Map<ShapeId, number>();\n\n    for (const [i, shape] of data.entries()) {\n      features.push({\n        ...shape.feature,\n        properties: {\n          ...shape.feature.properties,\n          shapeId: shape.id,\n        },\n      });\n      shapeIdToIndex.set(shape.id, i);\n    }\n\n    this.featuresCache = { data, features, shapeIdToIndex };\n    return features;\n  }\n\n  /**\n   * Look up a shape by ID from the data prop.\n   * Used by event handlers to get full shape without storing in feature properties.\n   */\n  private getShapeById(shapeId: ShapeId): Shape | undefined {\n    return this.props.data.find((shape) => shape.id === shapeId);\n  }\n\n  /**\n   * Handle shape click\n   */\n  private handleShapeClick = (info: PickingInfo): void => {\n    const { onShapeClick, mapId } = this.props;\n\n    if (!info.object) {\n      return;\n    }\n\n    // Look up shape from data prop using shapeId stored in feature properties\n    const shapeId = info.object.properties?.shapeId as ShapeId | undefined;\n    if (!shapeId) {\n      return;\n    }\n\n    const shape = this.getShapeById(shapeId);\n    if (!shape) {\n      return;\n    }\n\n    // Emit shape selected event via bus (include mapId for multi-map isolation)\n    shapeBus.emit(ShapeEvents.selected, { shapeId: shape.id, mapId });\n\n    // Call callback if provided\n    if (onShapeClick) {\n      onShapeClick(shape);\n    }\n  };\n\n  /**\n   * Handle shape hover\n   */\n  private handleShapeHover = (info: PickingInfo): void => {\n    const { onShapeHover, mapId } = this.props;\n\n    // Look up shape from data prop using shapeId stored in feature properties\n    const shapeId =\n      (info.object?.properties?.shapeId as ShapeId | undefined) ?? null;\n    const shape = shapeId ? (this.getShapeById(shapeId) ?? null) : null;\n\n    // Dedupe hover events - only emit if hovered shape changed\n    if (shapeId !== this.state?.lastHoveredId) {\n      this.setState({ lastHoveredId: shapeId });\n\n      // Emit shape hovered event via bus (include mapId for multi-map isolation)\n      shapeBus.emit(ShapeEvents.hovered, {\n        shapeId,\n        mapId,\n      });\n    }\n\n    // Always call callback if provided (for local state updates)\n    if (onShapeHover) {\n      onShapeHover(shape);\n    }\n  };\n\n  /**\n   * Render highlight sublayer (underneath main layer)\n   * Note: Points with icons use coffin corners instead of highlight layer\n   */\n  private renderHighlightLayer(\n    features: Shape['feature'][],\n  ): GeoJsonLayer | null {\n    const { selectedShapeId, showHighlight, highlightColor } = this.props;\n\n    if (!selectedShapeId || showHighlight === false) {\n      return null;\n    }\n\n    const selectedFeature = features.find(\n      (f) => f.properties?.shapeId === selectedShapeId,\n    );\n\n    if (!selectedFeature) {\n      return null;\n    }\n\n    // Skip highlight layer for Point geometries with icons - they use coffin corners instead\n    // Points without icons should still show the highlight layer\n    if (selectedFeature.geometry.type === 'Point') {\n      const hasIcon = !!selectedFeature.properties?.styleProperties?.icon;\n      if (hasIcon) {\n        return null;\n      }\n    }\n\n    return new GeoJsonLayer({\n      id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_HIGHLIGHT}`,\n      // biome-ignore lint/suspicious/noExplicitAny: GeoJsonLayer accepts various feature formats\n      data: [selectedFeature] as any,\n\n      // Styling\n      filled: true,\n      stroked: true,\n      lineWidthUnits: 'pixels',\n      lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,\n      getFillColor: () => [0, 0, 0, 0], // Transparent fill\n      getLineColor: () => highlightColor || getHighlightColor(),\n      getLineWidth: getHighlightLineWidth,\n\n      // Behavior\n      pickable: false,\n      updateTriggers: {\n        getLineColor: [highlightColor],\n        getLineWidth: [selectedShapeId, features],\n      },\n    });\n  }\n\n  /**\n   * Render coffin corners layer for Point geometries that have icons on hover/select\n   * Coffin corners provide visual feedback for points instead of highlight layer\n   */\n  private renderCoffinCornersLayer(\n    features: Shape['feature'][],\n  ): IconLayer | null {\n    const { selectedShapeId } = this.props;\n    const hoverIndex = this.state?.hoverIndex;\n\n    // Use cached shapeId->index map for O(1) lookup\n    const shapeIdToIndex = this.featuresCache?.shapeIdToIndex;\n    if (!shapeIdToIndex) {\n      return null;\n    }\n\n    // Find point features that need coffin corners (hovered or selected)\n    const pointFeatures = features.filter((f) => {\n      if (f.geometry.type !== 'Point') {\n        return false;\n      }\n      const hasIcon = !!f.properties?.styleProperties?.icon;\n      if (!hasIcon) {\n        return false;\n      }\n\n      const shapeId = f.properties?.shapeId;\n      const isSelected = shapeId === selectedShapeId;\n      const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : undefined;\n      const isHovered = hoverIndex !== undefined && featureIndex === hoverIndex;\n\n      return isSelected || isHovered;\n    });\n\n    if (pointFeatures.length === 0) {\n      return null;\n    }\n\n    // Get icon atlas from first point feature (all should share the same atlas)\n    const firstPointIcon = pointFeatures[0]?.properties?.styleProperties?.icon;\n    const iconAtlas = firstPointIcon?.atlas;\n    const iconMapping = firstPointIcon?.mapping;\n\n    if (!(iconAtlas && iconMapping)) {\n      logger.warn(\n        'Point shape has icon style but missing iconAtlas or iconMapping - coffin corners will not render',\n      );\n      return null;\n    }\n\n    // Add coffin corners icons to the mapping\n    const extendedMapping = {\n      ...iconMapping,\n      [COFFIN_CORNERS.HOVER_ICON]: {\n        x: 0,\n        y: 0,\n        width: 76,\n        height: 76,\n        mask: false,\n      },\n      [COFFIN_CORNERS.SELECTED_ICON]: {\n        x: 76,\n        y: 0,\n        width: 76,\n        height: 76,\n        mask: false,\n      },\n      [COFFIN_CORNERS.SELECTED_HOVER_ICON]: {\n        x: 152,\n        y: 0,\n        width: 76,\n        height: 76,\n        mask: false,\n      },\n    };\n\n    return new IconLayer({\n      id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-coffin-corners`,\n      data: pointFeatures,\n      iconAtlas,\n      iconMapping: extendedMapping,\n      getIcon: (d: Shape['feature']) => {\n        const shapeId = d.properties?.shapeId;\n        const isSelected = shapeId === selectedShapeId;\n        const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : undefined;\n        const isHovered =\n          hoverIndex !== undefined && featureIndex === hoverIndex;\n\n        if (isSelected && isHovered) {\n          return COFFIN_CORNERS.SELECTED_HOVER_ICON;\n        }\n        if (isSelected) {\n          return COFFIN_CORNERS.SELECTED_ICON;\n        }\n        return COFFIN_CORNERS.HOVER_ICON;\n      },\n      getSize: COFFIN_CORNERS.SIZE,\n      getPosition: (d: Shape['feature']) => {\n        const coords =\n          d.geometry.type === 'Point' ? d.geometry.coordinates : [0, 0];\n        return coords as [number, number];\n      },\n      getPixelOffset: (d: Shape['feature']) => {\n        const iconSize =\n          d.properties?.styleProperties?.icon?.size ??\n          MAP_INTERACTION.ICON_SIZE;\n        // Center the coffin corners on the point icon\n        return [-1, -iconSize / 2];\n      },\n      billboard: false,\n      pickable: false,\n      updateTriggers: {\n        getIcon: [selectedShapeId, this.state?.hoverIndex],\n        data: [features, selectedShapeId, this.state?.hoverIndex],\n      },\n    });\n  }\n\n  /**\n   * Extract icon configuration from features in a single pass.\n   * Returns the first icon's atlas and mapping (all shapes share the same atlas).\n   * Uses early return for O(1) best case when first feature has icons.\n   */\n  private getIconConfig(features: Shape['feature'][]): {\n    hasIcons: boolean;\n    atlas?: string;\n    mapping?: Record<\n      string,\n      { x: number; y: number; width: number; height: number; mask?: boolean }\n    >;\n  } {\n    for (const f of features) {\n      const icon = f.properties?.styleProperties?.icon;\n      if (icon) {\n        return {\n          hasIcons: true,\n          atlas: icon.atlas,\n          mapping: icon.mapping,\n        };\n      }\n    }\n    return { hasIcons: false };\n  }\n\n  /**\n   * Render main shapes layer\n   */\n  private renderMainLayer(features: Shape['feature'][]): GeoJsonLayer {\n    const { pickable, applyBaseOpacity, selectedShapeId } = this.props;\n\n    // Single-pass icon config extraction (O(1) best case with early return)\n    const {\n      hasIcons,\n      atlas: iconAtlas,\n      mapping: iconMapping,\n    } = this.getIconConfig(features);\n\n    return new GeoJsonLayer({\n      id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`,\n      // biome-ignore lint/suspicious/noExplicitAny: GeoJsonLayer accepts various feature formats\n      data: features as any,\n\n      // Styling\n      filled: true,\n      stroked: true,\n      getFillColor: (d: Shape['feature']) => getFillColor(d, applyBaseOpacity),\n      getLineColor,\n      getLineWidth: (d, info) => {\n        const isHovered = info?.index === this.state?.hoverIndex;\n        return getHoverLineWidth(d, isHovered);\n      },\n      lineWidthUnits: 'pixels',\n      lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,\n      lineWidthMaxPixels: 20,\n\n      // Points - use icons if any feature has icon config, otherwise circles\n      pointType: hasIcons ? 'icon' : 'circle',\n      getPointRadius: (d) => {\n        const iconSize = d.properties?.styleProperties?.icon?.size;\n        return iconSize ?? 2;\n      },\n      pointRadiusUnits: 'pixels',\n\n      // Icon configuration (only used if pointType includes 'icon')\n      ...(hasIcons && iconAtlas ? { iconAtlas } : {}),\n      ...(hasIcons && iconMapping ? { iconMapping } : {}),\n      ...(hasIcons\n        ? {\n            getIcon: (d: Shape['feature']) =>\n              d.properties?.styleProperties?.icon?.name ?? 'marker',\n            getIconSize: (d: Shape['feature']) => {\n              return (\n                d.properties?.styleProperties?.icon?.size ??\n                MAP_INTERACTION.ICON_SIZE\n              );\n            },\n            getIconColor: getLineColor,\n            getIconPixelOffset: (d: Shape['feature']) => {\n              const iconSize =\n                d.properties?.styleProperties?.icon?.size ??\n                MAP_INTERACTION.ICON_SIZE;\n              return [-1, -iconSize / 2];\n            },\n            iconBillboard: false,\n          }\n        : {}),\n\n      // Dash pattern support - selected shapes get dotted border\n      extensions: [new PathStyleExtension({ dash: true })],\n      getDashArray: (d: Shape['feature']) => {\n        const isSelected = d.properties?.shapeId === selectedShapeId;\n        if (isSelected) {\n          return DASH_ARRAYS.dotted;\n        }\n        return getDashArray(d);\n      },\n\n      // Behavior\n      pickable,\n      autoHighlight: false, // We handle highlighting manually\n      // Note: onClick and onHover are handled via getPickingInfo() override\n\n      // Update triggers\n      updateTriggers: {\n        getFillColor: [features, applyBaseOpacity],\n        getLineColor: [features],\n        getLineWidth: [features, this.state?.hoverIndex],\n        getDashArray: [features, selectedShapeId],\n        getPointRadius: [features],\n        ...(hasIcons\n          ? {\n              getIcon: [features],\n              getIconSize: [features],\n              getIconColor: [features],\n              getIconPixelOffset: [features],\n            }\n          : {}),\n      },\n    });\n  }\n\n  /**\n   * Render labels layer\n   * Supports three modes:\n   * - 'always': Show labels for all shapes\n   * - 'hover': Show label only for the currently hovered shape\n   * - 'never': No labels\n   */\n  private renderLabelsLayer(): ReturnType<typeof createShapeLabelLayer> | null {\n    const { showLabels, data, labelOptions } = this.props;\n\n    // No labels if disabled\n    if (showLabels === 'never') {\n      return null;\n    }\n\n    // Determine which shapes to show labels for\n    let labelData = data;\n    if (showLabels === 'hover') {\n      const hoverIndex = this.state?.hoverIndex;\n      if (hoverIndex === undefined) {\n        return null; // No shape hovered, no label to show\n      }\n      const hoveredShape = data[hoverIndex];\n      labelData = hoveredShape ? [hoveredShape] : [];\n    }\n\n    if (labelData.length === 0) {\n      return null;\n    }\n\n    return createShapeLabelLayer({\n      id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_LABELS}`,\n      data: labelData,\n      labelOptions,\n    });\n  }\n\n  /**\n   * Render all sublayers\n   */\n  renderLayers(): Layer[] {\n    // Compute features once per render cycle for performance\n    const features = this.getFeaturesWithId();\n\n    return [\n      this.renderHighlightLayer(features),\n      this.renderCoffinCornersLayer(features),\n      this.renderMainLayer(features),\n      this.renderLabelsLayer(),\n    ].filter(Boolean) as Layer[];\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { DEFAULT_TEXT_STYLE } from "../../text-settings.js";
+import { SHAPE_LAYER_IDS } from "../shared/constants.js";
+import { getLabelPosition2d, getLabelText } from "./utils/labels.js";
+import { TextLayer } from "@deck.gl/layers";
+
+//#region src/deckgl/shapes/display-shape-layer/shape-label-layer.ts
+/**
+* Creates a cached label position getter to avoid computing position multiple times per shape.
+* Uses WeakMap so positions are garbage collected when shapes are removed.
+*/
+function createCachedPositionGetter(labelOptions) {
+	const cache = /* @__PURE__ */ new WeakMap();
+	const getNullable = (shape) => {
+		if (cache.has(shape)) return cache.get(shape) ?? null;
+		const position = getLabelPosition2d(shape, labelOptions);
+		cache.set(shape, position);
+		return position;
+	};
+	const getRequired = (shape) => {
+		const position = getNullable(shape);
+		if (!position) throw new Error("Shape has no valid position - should have been filtered");
+		return position;
+	};
+	return {
+		getRequired,
+		getNullable
+	};
+}
+/**
+* Creates a TextLayer for rendering shape labels with intelligent positioning
+*
+* ## Features
+* - **Geometry-aware positioning**: Different defaults for Point, LineString, Polygon, and Circle
+* - **Three-tier priority system**: Per-shape properties > labelOptions > defaults
+* - **Coordinate anchoring**: Position labels at start/middle/end (or edge positions for circles)
+* - **Pixel-based offsets**: Consistent label placement at all zoom levels
+* - **Text-only styling**: White uppercase text with black outline for legibility
+* - **Position caching**: Label positions are computed once per shape using a WeakMap cache
+*
+* ## Label Positioning Priority
+* 1. Per-shape `styleProperties` (highest priority)
+* 2. Global `labelOptions` parameter
+* 3. Geometry-specific defaults (fallback)
+*
+* @param props - Shape label layer configuration
+* @returns Configured TextLayer instance
+*
+* @example
+* ```tsx
+* const labelLayer = createShapeLabelLayer({
+*   id: 'my-labels',
+*   data: shapes,
+*   labelOptions: {
+*     circleLabelCoordinateAnchor: 'top',
+*     pointLabelOffset: [0, -20],
+*   },
+* });
+* ```
+*/
+function createShapeLabelLayer(props) {
+	const { id = SHAPE_LAYER_IDS.DISPLAY_LABELS, data, labelOptions } = props;
+	const { getRequired, getNullable } = createCachedPositionGetter(labelOptions);
+	return new TextLayer({
+		id,
+		data: data.filter((shape) => getNullable(shape) !== null),
+		getText: getLabelText,
+		getPosition: (d) => getRequired(d).coordinates,
+		getPixelOffset: (d) => getRequired(d).pixelOffset,
+		getTextAnchor: (d) => getRequired(d).textAnchor,
+		getAlignmentBaseline: (d) => getRequired(d).alignmentBaseline,
+		...DEFAULT_TEXT_STYLE,
+		getAngle: 0,
+		background: false,
+		fontFamily: "Roboto MonoVariable, monospace",
+		updateTriggers: {
+			getPosition: [labelOptions],
+			getPixelOffset: [labelOptions],
+			getTextAnchor: [labelOptions],
+			getAlignmentBaseline: [labelOptions]
+		},
+		pickable: false
+	});
+}
+
+//#endregion
+export { createShapeLabelLayer };
+//# sourceMappingURL=shape-label-layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shape-label-layer.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/shape-label-layer.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 { TextLayer } from '@deck.gl/layers';\nimport { DEFAULT_TEXT_STYLE } from '../../text-settings';\nimport { SHAPE_LAYER_IDS } from '../shared/constants';\nimport {\n  getLabelPosition2d,\n  getLabelText,\n  type LabelPosition2d,\n  type LabelPositionOptions,\n} from './utils/labels';\nimport type { Shape } from '../shared/types';\n\n/**\n * Creates a cached label position getter to avoid computing position multiple times per shape.\n * Uses WeakMap so positions are garbage collected when shapes are removed.\n */\nfunction createCachedPositionGetter(\n  labelOptions: LabelPositionOptions | undefined,\n) {\n  const cache = new WeakMap<Shape, LabelPosition2d | null>();\n\n  // Returns nullable position for filtering\n  const getNullable = (shape: Shape): LabelPosition2d | null => {\n    if (cache.has(shape)) {\n      return cache.get(shape) ?? null;\n    }\n    const position = getLabelPosition2d(shape, labelOptions);\n    cache.set(shape, position);\n    return position;\n  };\n\n  // Returns position, throwing if null (use only after filtering)\n  const getRequired = (shape: Shape): LabelPosition2d => {\n    const position = getNullable(shape);\n    if (!position) {\n      throw new Error(\n        'Shape has no valid position - should have been filtered',\n      );\n    }\n    return position;\n  };\n\n  return { getRequired, getNullable };\n}\n\n/**\n * Props for creating a shape label layer\n */\nexport interface ShapeLabelLayerProps {\n  /** Layer ID (defaults to DISPLAY_LABELS constant) */\n  id?: string;\n  /** Array of shapes to label */\n  data: Shape[];\n  /**\n   * Global label positioning options\n   * Per-shape properties in styleProperties take precedence\n   */\n  labelOptions?: LabelPositionOptions;\n}\n\n/**\n * Creates a TextLayer for rendering shape labels with intelligent positioning\n *\n * ## Features\n * - **Geometry-aware positioning**: Different defaults for Point, LineString, Polygon, and Circle\n * - **Three-tier priority system**: Per-shape properties > labelOptions > defaults\n * - **Coordinate anchoring**: Position labels at start/middle/end (or edge positions for circles)\n * - **Pixel-based offsets**: Consistent label placement at all zoom levels\n * - **Text-only styling**: White uppercase text with black outline for legibility\n * - **Position caching**: Label positions are computed once per shape using a WeakMap cache\n *\n * ## Label Positioning Priority\n * 1. Per-shape `styleProperties` (highest priority)\n * 2. Global `labelOptions` parameter\n * 3. Geometry-specific defaults (fallback)\n *\n * @param props - Shape label layer configuration\n * @returns Configured TextLayer instance\n *\n * @example\n * ```tsx\n * const labelLayer = createShapeLabelLayer({\n *   id: 'my-labels',\n *   data: shapes,\n *   labelOptions: {\n *     circleLabelCoordinateAnchor: 'top',\n *     pointLabelOffset: [0, -20],\n *   },\n * });\n * ```\n */\nexport function createShapeLabelLayer(\n  props: ShapeLabelLayerProps,\n): TextLayer<Shape> {\n  const { id = SHAPE_LAYER_IDS.DISPLAY_LABELS, data, labelOptions } = props;\n\n  // Create cached position getter to avoid computing position 4x per shape\n  const { getRequired, getNullable } = createCachedPositionGetter(labelOptions);\n\n  // Filter out shapes with invalid positions (null coordinates)\n  const validData = data.filter((shape) => getNullable(shape) !== null);\n\n  return new TextLayer<Shape>({\n    id,\n    data: validData,\n\n    // Text content - uppercase\n    getText: getLabelText,\n\n    // Position - use cached getter for all position-related properties\n    // getRequired is safe because we filtered out null positions above\n    getPosition: (d: Shape) => getRequired(d).coordinates,\n    getPixelOffset: (d: Shape) => getRequired(d).pixelOffset,\n    getTextAnchor: (d: Shape) => getRequired(d).textAnchor,\n    getAlignmentBaseline: (d: Shape) => getRequired(d).alignmentBaseline,\n\n    // Cross-platform text styling (SDF font settings for legibility on Windows)\n    ...DEFAULT_TEXT_STYLE,\n    getAngle: 0,\n\n    // No background or border\n    background: false,\n\n    // Font overrides\n    fontFamily: 'Roboto MonoVariable, monospace',\n\n    // Update triggers - tell deck.gl to recalculate when labelOptions change\n    updateTriggers: {\n      getPosition: [labelOptions],\n      getPixelOffset: [labelOptions],\n      getTextAnchor: [labelOptions],\n      getAlignmentBaseline: [labelOptions],\n    },\n\n    // Behavior\n    pickable: false,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,2BACP,cACA;CACA,MAAM,wBAAQ,IAAI,SAAwC;CAG1D,MAAM,eAAe,UAAyC;AAC5D,MAAI,MAAM,IAAI,MAAM,CAClB,QAAO,MAAM,IAAI,MAAM,IAAI;EAE7B,MAAM,WAAW,mBAAmB,OAAO,aAAa;AACxD,QAAM,IAAI,OAAO,SAAS;AAC1B,SAAO;;CAIT,MAAM,eAAe,UAAkC;EACrD,MAAM,WAAW,YAAY,MAAM;AACnC,MAAI,CAAC,SACH,OAAM,IAAI,MACR,0DACD;AAEH,SAAO;;AAGT,QAAO;EAAE;EAAa;EAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDrC,SAAgB,sBACd,OACkB;CAClB,MAAM,EAAE,KAAK,gBAAgB,gBAAgB,MAAM,iBAAiB;CAGpE,MAAM,EAAE,aAAa,gBAAgB,2BAA2B,aAAa;AAK7E,QAAO,IAAI,UAAiB;EAC1B;EACA,MAJgB,KAAK,QAAQ,UAAU,YAAY,MAAM,KAAK,KAAK;EAOnE,SAAS;EAIT,cAAc,MAAa,YAAY,EAAE,CAAC;EAC1C,iBAAiB,MAAa,YAAY,EAAE,CAAC;EAC7C,gBAAgB,MAAa,YAAY,EAAE,CAAC;EAC5C,uBAAuB,MAAa,YAAY,EAAE,CAAC;EAGnD,GAAG;EACH,UAAU;EAGV,YAAY;EAGZ,YAAY;EAGZ,gBAAgB;GACd,aAAa,CAAC,aAAa;GAC3B,gBAAgB,CAAC,aAAa;GAC9B,eAAe,CAAC,aAAa;GAC7B,sBAAsB,CAAC,aAAa;GACrC;EAGD,UAAU;EACX,CAAC"}

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

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { createMapStore } from "../../../shared/create-map-store.js";
+import { MapEvents } from "../../base-map/events.js";
+import { ShapeEvents } from "../shared/events.js";
+import { Broadcast } from "@accelint/bus";
+
+//#region src/deckgl/shapes/display-shape-layer/store.ts
+/**
+* Shape Selection Store
+*
+* Manages shape selection state per map instance.
+*
+* @example
+* ```tsx
+* import { shapeSelectionStore } from '@accelint/map-toolkit/deckgl/shapes';
+*
+* function ShapePanel({ mapId }) {
+*   const { state, setSelectedId, clearSelection } = shapeSelectionStore.use(mapId);
+*
+*   return (
+*     <div>
+*       <p>Selected: {state.selectedId ?? 'none'}</p>
+*       <button onClick={() => setSelectedId('shape-1')}>Select Shape 1</button>
+*       <button onClick={clearSelection}>Clear</button>
+*     </div>
+*   );
+* }
+*
+* // Or with selector for specific values:
+* function SelectedIndicator({ mapId }) {
+*   const selectedId = shapeSelectionStore.useSelector(
+*     mapId,
+*     (s) => s.selectedId
+*   );
+*   return selectedId ? <Badge>Selected</Badge> : null;
+* }
+* ```
+*/
+const shapeBus = Broadcast.getInstance();
+const mapBus = Broadcast.getInstance();
+/**
+* Shape selection store
+*/
+const shapeSelectionStore = createMapStore({
+	defaultState: { selectedId: void 0 },
+	actions: (mapId, { get }) => ({
+		setSelectedId: (id) => {
+			const currentId = get().selectedId;
+			if (id === void 0 && currentId !== void 0) shapeBus.emit(ShapeEvents.deselected, { mapId });
+			else if (id !== void 0 && currentId !== id) shapeBus.emit(ShapeEvents.selected, {
+				shapeId: id,
+				mapId
+			});
+		},
+		clearSelection: () => {
+			shapeBus.emit(ShapeEvents.deselected, { mapId });
+		}
+	}),
+	bus: (mapId, { get, set }) => {
+		const unsubSelected = shapeBus.on(ShapeEvents.selected, (event) => {
+			if (event.payload.mapId !== mapId) return;
+			if (get().selectedId !== event.payload.shapeId) set({ selectedId: event.payload.shapeId });
+		});
+		const unsubDeselected = shapeBus.on(ShapeEvents.deselected, (event) => {
+			if (event.payload.mapId !== mapId) return;
+			if (get().selectedId !== void 0) set({ selectedId: void 0 });
+		});
+		const unsubClick = mapBus.on(MapEvents.click, (event) => {
+			if (get().selectedId !== void 0 && event.payload.id === mapId && event.payload.info.index === -1) shapeBus.emit(ShapeEvents.deselected, { mapId });
+		});
+		return () => {
+			unsubSelected();
+			unsubDeselected();
+			unsubClick();
+		};
+	}
+});
+/**
+* Hook for shape selection - primary API
+*
+* @example
+* ```tsx
+* const { state, setSelectedId, clearSelection } = useSelectShape(mapId);
+* ```
+*/
+const useSelectShape = shapeSelectionStore.use;
+
+//#endregion
+export { shapeSelectionStore };
+//# sourceMappingURL=store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/store.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/**\n * Shape Selection Store\n *\n * Manages shape selection state per map instance.\n *\n * @example\n * ```tsx\n * import { shapeSelectionStore } from '@accelint/map-toolkit/deckgl/shapes';\n *\n * function ShapePanel({ mapId }) {\n *   const { state, setSelectedId, clearSelection } = shapeSelectionStore.use(mapId);\n *\n *   return (\n *     <div>\n *       <p>Selected: {state.selectedId ?? 'none'}</p>\n *       <button onClick={() => setSelectedId('shape-1')}>Select Shape 1</button>\n *       <button onClick={clearSelection}>Clear</button>\n *     </div>\n *   );\n * }\n *\n * // Or with selector for specific values:\n * function SelectedIndicator({ mapId }) {\n *   const selectedId = shapeSelectionStore.useSelector(\n *     mapId,\n *     (s) => s.selectedId\n *   );\n *   return selectedId ? <Badge>Selected</Badge> : null;\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { createMapStore } from '@/shared/create-map-store';\nimport { MapEvents } from '../../base-map/events';\nimport { ShapeEvents } from '../shared/events';\nimport type { UniqueId } from '@accelint/core';\nimport type { MapClickEvent, MapEventType } from '../../base-map/types';\nimport type { ShapeEvent } from '../shared/events';\nimport type { ShapeId } from '../shared/types';\n\n/**\n * State shape for shape selection\n */\ntype ShapeSelectionState = {\n  selectedId: ShapeId | undefined;\n};\n\n/**\n * Actions for shape selection\n */\ntype ShapeSelectionActions = {\n  /** Set the selected shape ID (emits appropriate events) */\n  setSelectedId: (id: ShapeId | undefined) => void;\n  /** Clear the current selection */\n  clearSelection: () => void;\n};\n\nconst shapeBus = Broadcast.getInstance<ShapeEvent>();\nconst mapBus = Broadcast.getInstance<MapEventType>();\n\n/**\n * Shape selection store\n */\nexport const shapeSelectionStore = createMapStore<\n  ShapeSelectionState,\n  ShapeSelectionActions\n>({\n  defaultState: { selectedId: undefined },\n\n  actions: (mapId, { get }) => ({\n    setSelectedId: (id: ShapeId | undefined) => {\n      const currentId = get().selectedId;\n\n      if (id === undefined && currentId !== undefined) {\n        // Emit deselection event\n        shapeBus.emit(ShapeEvents.deselected, { mapId });\n      } else if (id !== undefined && currentId !== id) {\n        // Emit selection event\n        shapeBus.emit(ShapeEvents.selected, { shapeId: id, mapId });\n      }\n    },\n\n    clearSelection: () => {\n      shapeBus.emit(ShapeEvents.deselected, { mapId });\n    },\n  }),\n\n  bus: (mapId, { get, set }) => {\n    // Listen for shape selection events\n    const unsubSelected = shapeBus.on(ShapeEvents.selected, (event) => {\n      if (event.payload.mapId !== mapId) {\n        return;\n      }\n      if (get().selectedId !== event.payload.shapeId) {\n        set({ selectedId: event.payload.shapeId });\n      }\n    });\n\n    // Listen for shape deselection events\n    const unsubDeselected = shapeBus.on(ShapeEvents.deselected, (event) => {\n      if (event.payload.mapId !== mapId) {\n        return;\n      }\n      if (get().selectedId !== undefined) {\n        set({ selectedId: undefined });\n      }\n    });\n\n    // Listen for map clicks to detect clicks on empty space\n    const unsubClick = mapBus.on(MapEvents.click, (event: MapClickEvent) => {\n      // Deselect if clicked on empty space (index === -1)\n      if (\n        get().selectedId !== undefined &&\n        event.payload.id === mapId &&\n        event.payload.info.index === -1\n      ) {\n        shapeBus.emit(ShapeEvents.deselected, { mapId });\n      }\n    });\n\n    return () => {\n      unsubSelected();\n      unsubDeselected();\n      unsubClick();\n    };\n  },\n});\n\n// =============================================================================\n// Convenience exports for common patterns\n// =============================================================================\n\n/**\n * Hook for shape selection - primary API\n *\n * @example\n * ```tsx\n * const { state, setSelectedId, clearSelection } = useSelectShape(mapId);\n * ```\n */\nexport const useSelectShape = shapeSelectionStore.use;\n\n/**\n * Hook to get just the selected ID\n *\n * @example\n * ```tsx\n * const selectedId = useSelectedShapeId(mapId);\n * ```\n */\nexport function useSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n  return shapeSelectionStore.useSelector(mapId, (s) => s.selectedId);\n}\n\n/**\n * Get selected shape ID imperatively (non-reactive)\n */\nexport function getSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n  return shapeSelectionStore.get(mapId).selectedId;\n}\n\n/**\n * Clear selection state (for tests/cleanup)\n */\nexport function clearSelectionState(mapId: UniqueId): void {\n  shapeSelectionStore.clear(mapId);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,WAAW,UAAU,aAAyB;AACpD,MAAM,SAAS,UAAU,aAA2B;;;;AAKpD,MAAa,sBAAsB,eAGjC;CACA,cAAc,EAAE,YAAY,QAAW;CAEvC,UAAU,OAAO,EAAE,WAAW;EAC5B,gBAAgB,OAA4B;GAC1C,MAAM,YAAY,KAAK,CAAC;AAExB,OAAI,OAAO,UAAa,cAAc,OAEpC,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;YACvC,OAAO,UAAa,cAAc,GAE3C,UAAS,KAAK,YAAY,UAAU;IAAE,SAAS;IAAI;IAAO,CAAC;;EAI/D,sBAAsB;AACpB,YAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;;EAEnD;CAED,MAAM,OAAO,EAAE,KAAK,UAAU;EAE5B,MAAM,gBAAgB,SAAS,GAAG,YAAY,WAAW,UAAU;AACjE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,MAAM,QAAQ,QACrC,KAAI,EAAE,YAAY,MAAM,QAAQ,SAAS,CAAC;IAE5C;EAGF,MAAM,kBAAkB,SAAS,GAAG,YAAY,aAAa,UAAU;AACrE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,OACvB,KAAI,EAAE,YAAY,QAAW,CAAC;IAEhC;EAGF,MAAM,aAAa,OAAO,GAAG,UAAU,QAAQ,UAAyB;AAEtE,OACE,KAAK,CAAC,eAAe,UACrB,MAAM,QAAQ,OAAO,SACrB,MAAM,QAAQ,KAAK,UAAU,GAE7B,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;IAElD;AAEF,eAAa;AACX,kBAAe;AACf,oBAAiB;AACjB,eAAY;;;CAGjB,CAAC;;;;;;;;;AAcF,MAAa,iBAAiB,oBAAoB"}

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

@@ -0,0 +1,126 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Shape, ShapeId, StyledFeature as StyledFeature$1 } from "../shared/types.js";
+import { LabelPositionOptions } from "./utils/labels.js";
+import { UniqueId } from "@accelint/core";
+import { CompositeLayerProps } from "@deck.gl/core";
+
+//#region src/deckgl/shapes/display-shape-layer/types.d.ts
+/**
+ * Label display mode for shapes
+ * - `'always'`: Show labels for all shapes
+ * - `'hover'`: Show label only for the currently hovered shape
+ * - `'never'`: Never show labels
+ */
+type ShowLabelsMode = 'always' | 'hover' | 'never';
+/**
+ * Re-export StyledFeature from shared types
+ */
+type StyledFeature = StyledFeature$1;
+/**
+ * Re-export StyledFeatureProperties from shared types
+ */
+type StyledFeatureProperties = StyledFeature$1['properties'];
+/**
+ * Props for DisplayShapeLayer
+ *
+ * @example Basic usage
+ * ```tsx
+ * const props: DisplayShapeLayerProps = {
+ *   id: 'my-shapes',
+ *   data: myShapes,
+ *   pickable: true,
+ *   showLabels: true,
+ * };
+ * ```
+ */
+interface DisplayShapeLayerProps extends CompositeLayerProps {
+  /** Unique layer ID - required for deck.gl layer management */
+  id: string;
+  /**
+   * Map instance ID for event bus isolation in multi-map scenarios.
+   * Shape events will include this ID in their payload,
+   * allowing listeners to filter events by map instance.
+   */
+  mapId: UniqueId;
+  /**
+   * Array of shapes to display
+   * Each shape must have a GeoJSON feature with styleProperties
+   */
+  data: Shape[];
+  /**
+   * Currently selected shape ID (for highlighting)
+   * When set, renders a highlight layer around the selected shape
+   */
+  selectedShapeId?: ShapeId;
+  /**
+   * Callback when a shape is clicked
+   * Also triggers a shapes:selected event on the event bus
+   * @param shape - The clicked shape with full properties
+   */
+  onShapeClick?: (shape: Shape) => void;
+  /**
+   * Callback when a shape is hovered
+   * Called with null when hover ends
+   * @param shape - The hovered shape, or null when hover ends
+   */
+  onShapeHover?: (shape: Shape | null) => void;
+  /**
+   * Label display mode for shapes
+   * - `'always'`: Show labels for all shapes
+   * - `'hover'`: Show label only for the currently hovered shape (requires `pickable={true}`, the default)
+   * - `'never'`: Never show labels
+   *
+   * Labels use the shape's `label` property, or `name` if label is not set
+   * @default 'always'
+   */
+  showLabels?: ShowLabelsMode;
+  /**
+   * Global label positioning options
+   * Can be overridden per-shape via styleProperties
+   * Priority: per-shape properties > labelOptions > defaults
+   * @see LabelPositionOptions for available options
+   */
+  labelOptions?: LabelPositionOptions;
+  /**
+   * Whether to show the highlight layer around selected shapes
+   * When false, no highlight effect is rendered even when a shape is selected
+   * @default false
+   */
+  showHighlight?: boolean;
+  /**
+   * Custom highlight color for selected shapes [r, g, b, a]
+   * Each channel is 0-255
+   * @default [40, 245, 190, 100] - Turquoise at ~39% opacity
+   * @example Custom red highlight
+   * ```tsx
+   * highlightColor={[255, 0, 0, 128]} // Red at 50% opacity
+   * ```
+   */
+  highlightColor?: [number, number, number, number];
+  /**
+   * When true (default), multiplies fill color alpha by 0.2 (reducing to 20% of original opacity)
+   * for a standard semi-transparent look.
+   * When false, colors are rendered exactly as specified in styleProperties.
+   * @default true
+   * @example Standard semi-transparent fills
+   * ```tsx
+   * <DisplayShapeLayer data={shapes} applyBaseOpacity />
+   * // Shape with fillColor [98, 166, 255, 255] renders at alpha 51 (255 × 0.2)
+   * ```
+   */
+  applyBaseOpacity?: boolean;
+}
+//#endregion
+export { DisplayShapeLayerProps, ShowLabelsMode, StyledFeature, StyledFeatureProperties };
+//# sourceMappingURL=types.d.ts.map

package/dist/{node_modules/.pnpm/@vis.gl_react-maplibre@8.1.0_maplibre-gl@5.15.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@vis.gl/react-maplibre/dist/components/layer.js → deckgl/shapes/display-shape-layer/types.js}

@@ -10,6 +10,3 @@
  * governing permissions and limitations under the License.
  */
 
-
-import "./map.js";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";

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

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { ShapeId } from "../shared/types.js";
+import { UniqueId } from "@accelint/core";
+
+//#region src/deckgl/shapes/display-shape-layer/use-select-shape.d.ts
+/**
+ * Return type for useSelectShape hook
+ */
+interface UseSelectShapeReturn {
+  /** Currently selected shape ID, or undefined if nothing selected */
+  selectedId: ShapeId | undefined;
+  /** Manually set the selected shape ID (useful for programmatic selection) */
+  setSelectedId: (id: ShapeId | undefined) => void;
+  /** Manually clear the selection */
+  clearSelection: () => void;
+}
+/**
+ * Hook to manage shape selection state with automatic deselection
+ *
+ * This hook encapsulates the common pattern of:
+ * 1. Listening to `shapes:selected` events and updating state
+ * 2. Listening to `shapes:deselected` events and clearing state
+ * 3. Listening to map clicks on empty space and emitting `shapes:deselected`
+ *
+ * Uses a store pattern with `useSyncExternalStore` for proper listener cleanup
+ * during HMR (Hot Module Replacement) in development. The store ensures only
+ * one bus listener exists per map instance, regardless of how many React
+ * components subscribe.
+ *
+ * @param mapId - The map instance ID for event filtering
+ * @returns Selection state and control functions
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
+ *
+ * function MapWithShapes() {
+ *   const { selectedId } = useSelectShape(MAP_ID);
+ *
+ *   return (
+ *     <BaseMap id={MAP_ID}>
+ *       <displayShapeLayer
+ *         id="shapes"
+ *         mapId={MAP_ID}
+ *         data={shapes}
+ *         selectedShapeId={selectedId}
+ *       />
+ *     </BaseMap>
+ *   );
+ * }
+ * ```
+ *
+ * @example With programmatic selection control
+ * ```tsx
+ * function MapWithShapes() {
+ *   const { selectedId, setSelectedId, clearSelection } = useSelectShape(MAP_ID);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setSelectedId(shapes[0].id)}>Select First Shape</button>
+ *       <button onClick={clearSelection}>Clear Selection</button>
+ *       <BaseMap id={MAP_ID}>
+ *         <displayShapeLayer
+ *           id="shapes"
+ *           mapId={MAP_ID}
+ *           data={shapes}
+ *           selectedShapeId={selectedId}
+ *         />
+ *       </BaseMap>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useSelectShape(mapId: UniqueId): UseSelectShapeReturn;
+//#endregion
+export { UseSelectShapeReturn, useSelectShape };
+//# sourceMappingURL=use-select-shape.d.ts.map

package/dist/deckgl/shapes/display-shape-layer/use-select-shape.js

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { shapeSelectionStore } from "./store.js";
+
+//#region src/deckgl/shapes/display-shape-layer/use-select-shape.ts
+/**
+* Hook to manage shape selection state with automatic deselection
+*
+* This hook encapsulates the common pattern of:
+* 1. Listening to `shapes:selected` events and updating state
+* 2. Listening to `shapes:deselected` events and clearing state
+* 3. Listening to map clicks on empty space and emitting `shapes:deselected`
+*
+* Uses a store pattern with `useSyncExternalStore` for proper listener cleanup
+* during HMR (Hot Module Replacement) in development. The store ensures only
+* one bus listener exists per map instance, regardless of how many React
+* components subscribe.
+*
+* @param mapId - The map instance ID for event filtering
+* @returns Selection state and control functions
+*
+* @example Basic usage
+* ```tsx
+* import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
+*
+* function MapWithShapes() {
+*   const { selectedId } = useSelectShape(MAP_ID);
+*
+*   return (
+*     <BaseMap id={MAP_ID}>
+*       <displayShapeLayer
+*         id="shapes"
+*         mapId={MAP_ID}
+*         data={shapes}
+*         selectedShapeId={selectedId}
+*       />
+*     </BaseMap>
+*   );
+* }
+* ```
+*
+* @example With programmatic selection control
+* ```tsx
+* function MapWithShapes() {
+*   const { selectedId, setSelectedId, clearSelection } = useSelectShape(MAP_ID);
+*
+*   return (
+*     <>
+*       <button onClick={() => setSelectedId(shapes[0].id)}>Select First Shape</button>
+*       <button onClick={clearSelection}>Clear Selection</button>
+*       <BaseMap id={MAP_ID}>
+*         <displayShapeLayer
+*           id="shapes"
+*           mapId={MAP_ID}
+*           data={shapes}
+*           selectedShapeId={selectedId}
+*         />
+*       </BaseMap>
+*     </>
+*   );
+* }
+* ```
+*/
+function useSelectShape(mapId) {
+	const { state, setSelectedId, clearSelection } = shapeSelectionStore.use(mapId);
+	return {
+		selectedId: state.selectedId,
+		setSelectedId,
+		clearSelection
+	};
+}
+
+//#endregion
+export { useSelectShape };
+//# sourceMappingURL=use-select-shape.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-select-shape.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/use-select-shape.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 { shapeSelectionStore } from './store';\nimport type { UniqueId } from '@accelint/core';\nimport type { ShapeId } from '../shared/types';\n\n/**\n * Return type for useSelectShape hook\n */\nexport interface UseSelectShapeReturn {\n  /** Currently selected shape ID, or undefined if nothing selected */\n  selectedId: ShapeId | undefined;\n  /** Manually set the selected shape ID (useful for programmatic selection) */\n  setSelectedId: (id: ShapeId | undefined) => void;\n  /** Manually clear the selection */\n  clearSelection: () => void;\n}\n\n/**\n * Hook to manage shape selection state with automatic deselection\n *\n * This hook encapsulates the common pattern of:\n * 1. Listening to `shapes:selected` events and updating state\n * 2. Listening to `shapes:deselected` events and clearing state\n * 3. Listening to map clicks on empty space and emitting `shapes:deselected`\n *\n * Uses a store pattern with `useSyncExternalStore` for proper listener cleanup\n * during HMR (Hot Module Replacement) in development. The store ensures only\n * one bus listener exists per map instance, regardless of how many React\n * components subscribe.\n *\n * @param mapId - The map instance ID for event filtering\n * @returns Selection state and control functions\n *\n * @example Basic usage\n * ```tsx\n * import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';\n *\n * function MapWithShapes() {\n *   const { selectedId } = useSelectShape(MAP_ID);\n *\n *   return (\n *     <BaseMap id={MAP_ID}>\n *       <displayShapeLayer\n *         id=\"shapes\"\n *         mapId={MAP_ID}\n *         data={shapes}\n *         selectedShapeId={selectedId}\n *       />\n *     </BaseMap>\n *   );\n * }\n * ```\n *\n * @example With programmatic selection control\n * ```tsx\n * function MapWithShapes() {\n *   const { selectedId, setSelectedId, clearSelection } = useSelectShape(MAP_ID);\n *\n *   return (\n *     <>\n *       <button onClick={() => setSelectedId(shapes[0].id)}>Select First Shape</button>\n *       <button onClick={clearSelection}>Clear Selection</button>\n *       <BaseMap id={MAP_ID}>\n *         <displayShapeLayer\n *           id=\"shapes\"\n *           mapId={MAP_ID}\n *           data={shapes}\n *           selectedShapeId={selectedId}\n *         />\n *       </BaseMap>\n *     </>\n *   );\n * }\n * ```\n */\nexport function useSelectShape(mapId: UniqueId): UseSelectShapeReturn {\n  const { state, setSelectedId, clearSelection } =\n    shapeSelectionStore.use(mapId);\n\n  return {\n    selectedId: state.selectedId,\n    setSelectedId,\n    clearSelection,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,SAAgB,eAAe,OAAuC;CACpE,MAAM,EAAE,OAAO,eAAe,mBAC5B,oBAAoB,IAAI,MAAM;AAEhC,QAAO;EACL,YAAY,MAAM;EAClB;EACA;EACD"}