@accelint/map-toolkit 2.0.0 → 3.0.0

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

@@ -14,6 +14,7 @@
 'use client';
 
 import { DEFAULT_COLORS } from "../shared/constants.js";
+import { CoffinCornerExtension } from "../../extensions/coffin-corner/coffin-corner-extension.js";
 import { PathStyleExtension } from "@deck.gl/extensions";
 
 //#region src/deckgl/shapes/display-shape-layer/constants.ts
@@ -29,19 +30,6 @@ const MAP_INTERACTION = {
 	ICON_HOVER_SIZE_INCREASE: 5
 };
 /**
-* Coffin corners configuration for Point selection/hover feedback.
-*
-* Coffin corners are bracket-like corners that appear around Point shapes
-* with icons to indicate hover and selection states. They provide visual
-* feedback without obscuring the icon itself.
-*/
-const COFFIN_CORNERS = {
-	HOVER_ICON: "coffin-corners-hover",
-	SELECTED_ICON: "coffin-corners-selected",
-	SELECTED_HOVER_ICON: "coffin-corners-selected-hover",
-	SIZE: 38
-};
-/**
 * Default props for DisplayShapeLayer.
 *
 * Provides sensible defaults for interactive shape display with labels,
@@ -109,7 +97,10 @@ const BRIGHTNESS_FACTOR = {
 */
 const OVERLAY_FILL_OPACITY = .25;
 /** Reusable deck.gl PathStyleExtension enabling dash patterns on GeoJsonLayer lines. */
-const DASH_EXTENSION = [new PathStyleExtension({ dash: true })];
+const DASH_EXTENSION = new PathStyleExtension({ dash: true });
+const COFFIN_CORNER_EXTENSION = new CoffinCornerExtension();
+/** Stable extensions array for GeoJsonLayer — avoids new reference per render triggering getShaders() re-evaluation. */
+const DISPLAY_EXTENSIONS = [DASH_EXTENSION, COFFIN_CORNER_EXTENSION];
 /** Readonly [r, g, b, a] tuple of DEFAULT_COLORS.highlight, pre-spread at module load for hot-path usage. */
 const HIGHLIGHT_COLOR_TUPLE = [
 	DEFAULT_COLORS.highlight[0],
@@ -119,5 +110,5 @@ const HIGHLIGHT_COLOR_TUPLE = [
 ];
 
 //#endregion
-export { BRIGHTNESS_FACTOR, COFFIN_CORNERS, DASH_EXTENSION, DEFAULT_DISPLAY_PROPS, HIGHLIGHT_COLOR_TUPLE, MAP_INTERACTION, MATERIAL_SETTINGS, OVERLAY_FILL_OPACITY };
+export { BRIGHTNESS_FACTOR, DEFAULT_DISPLAY_PROPS, DISPLAY_EXTENSIONS, HIGHLIGHT_COLOR_TUPLE, MAP_INTERACTION, MATERIAL_SETTINGS, OVERLAY_FILL_OPACITY };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["HIGHLIGHT_COLOR_TUPLE: Rgba255Tuple"],"sources":["../../../../src/deckgl/shapes/display-shape-layer/constants.ts"],"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';\nimport { PathStyleExtension } from '@deck.gl/extensions';\nimport { DEFAULT_COLORS } from '../shared/constants';\nimport type { Rgba255Tuple } from '@accelint/predicates';\n\n/**\n * Map interaction constants.\n *\n * Values derived from ngc2 for consistency with existing UI patterns.\n * Controls sizing and interaction feedback for shape rendering.\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 * Coffin corners configuration for Point selection/hover feedback.\n *\n * Coffin corners are bracket-like corners that appear around Point shapes\n * with icons to indicate hover and selection states. They provide visual\n * feedback without obscuring the icon itself.\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 *\n * Provides sensible defaults for interactive shape display with labels,\n * standard opacity handling, and minimal visual feedback. These can be\n * overridden via layer props.\n */\nexport const DEFAULT_DISPLAY_PROPS = {\n  pickable: true,\n  showLabels: 'always' as const,\n  showHighlight: false,\n  applyBaseOpacity: true,\n  highlightColor: DEFAULT_COLORS.highlight,\n};\n\n/**\n * Material settings for lighting effects on polygon shapes.\n * Controls fill brightness for hover and selection overlay layers.\n * Keys mirror BRIGHTNESS_FACTOR for consistency.\n */\nexport const MATERIAL_SETTINGS = {\n  // Normal state - standard lighting\n  NORMAL: {\n    ambient: 0.35,\n    diffuse: 0.6,\n    shininess: 32,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n  // Hovered or selected (single active state)\n  HOVER_OR_SELECT: {\n    ambient: 0.6,\n    diffuse: 0.8,\n    shininess: 64,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n  // Hovered and selected simultaneously - brighter\n  HOVER_AND_SELECT: {\n    ambient: 0.75,\n    diffuse: 0.95,\n    shininess: 80,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n} as const;\n\n/**\n * Brightness multipliers for interaction state feedback.\n * Applied via brightenColor() to line colors, curtains, and elevation indicators.\n * - HOVER_OR_SELECT: shape is hovered or selected (single active state)\n * - HOVER_AND_SELECT: shape is both hovered and selected simultaneously\n */\nexport const BRIGHTNESS_FACTOR = {\n  HOVER_OR_SELECT: 1.4,\n  HOVER_AND_SELECT: 1.7,\n} as const;\n\n/**\n * Opacity multiplier for interaction overlay layers (hover, select).\n * Applied to the shape's fill alpha — sits between the base opacity (0.2)\n * and full opacity (1.0) so the overlay reads clearly without being too solid.\n */\nexport const OVERLAY_FILL_OPACITY = 0.25;\n\n/** Reusable deck.gl PathStyleExtension enabling dash patterns on GeoJsonLayer lines. */\nexport const DASH_EXTENSION = [new PathStyleExtension({ dash: true })];\n\n/** Readonly [r, g, b, a] tuple of DEFAULT_COLORS.highlight, pre-spread at module load for hot-path usage. */\nexport const HIGHLIGHT_COLOR_TUPLE: Rgba255Tuple = [\n  DEFAULT_COLORS.highlight[0],\n  DEFAULT_COLORS.highlight[1],\n  DEFAULT_COLORS.highlight[2],\n  DEFAULT_COLORS.highlight[3] ?? 255,\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,kBAAkB;CAC7B,uBAAuB;CACvB,WAAW;CACX,0BAA0B;CAC3B;;;;;;;;AASD,MAAa,iBAAiB;CAE5B,YAAY;CAEZ,eAAe;CAEf,qBAAqB;CAErB,MAAM;CACP;;;;;;;;AASD,MAAa,wBAAwB;CACnC,UAAU;CACV,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,gBAAgB,eAAe;CAChC;;;;;;AAOD,MAAa,oBAAoB;CAE/B,QAAQ;EACN,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CAED,iBAAiB;EACf,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CAED,kBAAkB;EAChB,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CACF;;;;;;;AAQD,MAAa,oBAAoB;CAC/B,iBAAiB;CACjB,kBAAkB;CACnB;;;;;;AAOD,MAAa,uBAAuB;;AAGpC,MAAa,iBAAiB,CAAC,IAAI,mBAAmB,EAAE,MAAM,MAAM,CAAC,CAAC;;AAGtE,MAAaA,wBAAsC;CACjD,eAAe,UAAU;CACzB,eAAe,UAAU;CACzB,eAAe,UAAU;CACzB,eAAe,UAAU,MAAM;CAChC"}
+{"version":3,"file":"constants.js","names":["HIGHLIGHT_COLOR_TUPLE: Rgba255Tuple"],"sources":["../../../../src/deckgl/shapes/display-shape-layer/constants.ts"],"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';\nimport { PathStyleExtension } from '@deck.gl/extensions';\nimport { CoffinCornerExtension } from '../../extensions/coffin-corner/coffin-corner-extension';\nimport { DEFAULT_COLORS } from '../shared/constants';\nimport type { Rgba255Tuple } from '@accelint/predicates';\n\n/**\n * Map interaction constants.\n *\n * Values derived from ngc2 for consistency with existing UI patterns.\n * Controls sizing and interaction feedback for shape rendering.\n */\nexport const MAP_INTERACTION = {\n  LINE_WIDTH_MIN_PIXELS: 1,\n  ICON_SIZE: 38,\n  ICON_HOVER_SIZE_INCREASE: 5,\n} as const;\n\n/**\n * Default props for DisplayShapeLayer.\n *\n * Provides sensible defaults for interactive shape display with labels,\n * standard opacity handling, and minimal visual feedback. These can be\n * overridden via layer props.\n */\nexport const DEFAULT_DISPLAY_PROPS = {\n  pickable: true,\n  showLabels: 'always' as const,\n  showHighlight: false,\n  applyBaseOpacity: true,\n  highlightColor: DEFAULT_COLORS.highlight,\n};\n\n/**\n * Material settings for lighting effects on polygon shapes.\n * Controls fill brightness for hover and selection overlay layers.\n * Keys mirror BRIGHTNESS_FACTOR for consistency.\n */\nexport const MATERIAL_SETTINGS = {\n  // Normal state - standard lighting\n  NORMAL: {\n    ambient: 0.35,\n    diffuse: 0.6,\n    shininess: 32,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n  // Hovered or selected (single active state)\n  HOVER_OR_SELECT: {\n    ambient: 0.6,\n    diffuse: 0.8,\n    shininess: 64,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n  // Hovered and selected simultaneously - brighter\n  HOVER_AND_SELECT: {\n    ambient: 0.75,\n    diffuse: 0.95,\n    shininess: 80,\n    specularColor: [255, 255, 255] as [number, number, number],\n  },\n} as const;\n\n/**\n * Brightness multipliers for interaction state feedback.\n * Applied via brightenColor() to line colors, curtains, and elevation indicators.\n * - HOVER_OR_SELECT: shape is hovered or selected (single active state)\n * - HOVER_AND_SELECT: shape is both hovered and selected simultaneously\n */\nexport const BRIGHTNESS_FACTOR = {\n  HOVER_OR_SELECT: 1.4,\n  HOVER_AND_SELECT: 1.7,\n} as const;\n\n/**\n * Opacity multiplier for interaction overlay layers (hover, select).\n * Applied to the shape's fill alpha — sits between the base opacity (0.2)\n * and full opacity (1.0) so the overlay reads clearly without being too solid.\n */\nexport const OVERLAY_FILL_OPACITY = 0.25;\n\n/** Reusable deck.gl PathStyleExtension enabling dash patterns on GeoJsonLayer lines. */\nexport const DASH_EXTENSION = new PathStyleExtension({ dash: true });\n\nexport const COFFIN_CORNER_EXTENSION = new CoffinCornerExtension();\n\n/** Stable extensions array for GeoJsonLayer — avoids new reference per render triggering getShaders() re-evaluation. */\nexport const DISPLAY_EXTENSIONS = [DASH_EXTENSION, COFFIN_CORNER_EXTENSION];\n\n/** Readonly [r, g, b, a] tuple of DEFAULT_COLORS.highlight, pre-spread at module load for hot-path usage. */\nexport const HIGHLIGHT_COLOR_TUPLE: Rgba255Tuple = [\n  DEFAULT_COLORS.highlight[0],\n  DEFAULT_COLORS.highlight[1],\n  DEFAULT_COLORS.highlight[2],\n  DEFAULT_COLORS.highlight[3] ?? 255,\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,kBAAkB;CAC7B,uBAAuB;CACvB,WAAW;CACX,0BAA0B;CAC3B;;;;;;;;AASD,MAAa,wBAAwB;CACnC,UAAU;CACV,YAAY;CACZ,eAAe;CACf,kBAAkB;CAClB,gBAAgB,eAAe;CAChC;;;;;;AAOD,MAAa,oBAAoB;CAE/B,QAAQ;EACN,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CAED,iBAAiB;EACf,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CAED,kBAAkB;EAChB,SAAS;EACT,SAAS;EACT,WAAW;EACX,eAAe;GAAC;GAAK;GAAK;GAAI;EAC/B;CACF;;;;;;;AAQD,MAAa,oBAAoB;CAC/B,iBAAiB;CACjB,kBAAkB;CACnB;;;;;;AAOD,MAAa,uBAAuB;;AAGpC,MAAa,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAEpE,MAAa,0BAA0B,IAAI,uBAAuB;;AAGlE,MAAa,qBAAqB,CAAC,gBAAgB,wBAAwB;;AAG3E,MAAaA,wBAAsC;CACjD,eAAe,UAAU;CACzB,eAAe,UAAU;CACzB,eAAe,UAAU;CACzB,eAAe,UAAU,MAAM;CAChC"}

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

@@ -25,7 +25,7 @@ import { CompositeLayer, Layer, PickingInfo } from "@deck.gl/core";
  * ## Features
  * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
  * - **Icon support**: Custom icons for Point geometries via icon atlases
- * - **Interactive selection**: Click handling with brightness overlay on polygon select, optional highlight effect for non-icon-Point shapes (if showHighlight=true)
+ * - **Interactive selection**: Click handling with brightness overlay on polygon select, optional highlight outline for non-Point shapes (if showHighlight=true). Point geometries use coffin corner brackets instead.
  * - **Hover effects**: Polygon fills brighten via material lighting; outline width increases by 2px on hover
  * - **Customizable labels**: Flexible label positioning with per-shape or global options
  * - **Style properties**: Full control over colors, border/outline patterns, and opacity
@@ -38,13 +38,14 @@ import { CompositeLayer, Layer, PickingInfo } from "@deck.gl/core";
  * and material-based brightness — the base shape is never altered.
  *
  * ## Layer Structure
- * Renders up to seven sublayers (in order, bottom to top):
- * 1. **Select layer**: Selection brightness overlay for polygon shapes
- * 2. **Hover layer**: Hover brightness overlay for polygon shapes
- * 3. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons
+ * Renders sublayers in this order (bottom to top):
+ * 1. **Highlight layer**: Selection outline for non-polygon, non-Point shapes (when showHighlight enabled)
+ * 2. **Select layer**: Selection brightness overlay for polygon shapes
+ * 3. **Hover layer**: Hover brightness overlay for polygon shapes
  * 4. **Elevation visualization**: Curtains (LineStrings) or wireframes (polygons) — elevation only
  * 5. **Elevation indicators**: Vertical strut lines for elevated non-polygon shapes — elevation only
- * 6. **Main GeoJsonLayer**: Shape geometries with styling and interaction
+ * 6. **Main GeoJsonLayer**: Shape geometries with styling and interaction; includes CoffinCornerExtension
+ *    which propagates to the icon/scatterplot sublayer for Point hover/select bracket feedback
  * 7. **Label layer**: Text labels (if showLabels enabled)
  *
  * ## Icon Atlas Constraint
@@ -111,6 +112,8 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
   private elevationCache;
   /** Cache for elevation indicator line segments */
   private indicatorCache;
+  /** Cached coffin corner color tuple — avoids new array reference per render when highlight hasn't changed. */
+  private coffinCornerColorCache;
   static layerName: string;
   static defaultProps: {
     pickable: boolean;
@@ -127,6 +130,11 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
    * Resolved highlight color — uses prop if provided, falls back to default.
    */
   private get resolvedHighlight();
+  /**
+   * Coffin corner bracket color derived from resolvedHighlight with forced full opacity.
+   * Cached to avoid a new array reference per render triggering deck.gl prop-change detection.
+   */
+  private get coffinCornerColor();
   /**
    * Handle picking events from the main shapes layer
    */
@@ -173,11 +181,13 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
    */
   private getShapeById;
   /**
-   * Handle shape click
+   * Handle shape click — emits `shapes:selected` via bus and calls `onShapeClick` callback.
+   * @param info - deck.gl picking info from the clicked sublayer.
    */
   private handleShapeClick;
   /**
-   * Handle shape hover
+   * Handle shape hover — emits `shapes:hovered` via bus (deduplicated by shapeId) and calls `onShapeHover` callback.
+   * @param info - deck.gl picking info from the hovered sublayer.
    */
   private handleShapeHover;
   /**
@@ -187,7 +197,8 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
   private getElevationData;
   /**
    * Render highlight sublayer (underneath main layer).
-   * Note: Points with icons use coffin corners instead of highlight layer.
+   * Point geometries skip this layer — they use coffin corner brackets
+   * via CoffinCornerExtension on the main layer's icon/scatterplot sublayer instead.
    */
   private renderHighlightLayer;
   /**
@@ -202,11 +213,6 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
    * Stacks with other interaction layers (e.g. selection highlight underneath).
    */
   private renderHoverLayer;
-  /**
-   * Render coffin corners layer for Point geometries that have icons on hover/select
-   * Coffin corners provide visual feedback for points instead of select layer
-   */
-  private renderCoffinCornersLayer;
   /**
    * Render main shapes layer
    */
@@ -219,6 +225,15 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
    * - 'never': No labels
    */
   private renderLabelsLayer;
+  /**
+   * Render radius label layer for hovered circle shapes.
+   * Shows the circle's radius value converted to the configured display unit.
+   *
+   * Positioning relative to the shape's label:
+   * - When showLabels is 'always' or 'hover': appears below the label
+   * - When showLabels is 'never': appears in the label's position
+   */
+  private renderRadiusLabelLayer;
   /**
    * Render vertical elevation indicator lines for non-polygon shapes.
    * Creates vertical "strut" lines from ground level to elevated features.
@@ -240,7 +255,8 @@ declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
    */
   private renderElevationVisualizationLayer;
   /**
-   * Render all sublayers
+   * Render all sublayers.
+   * @returns Ordered array of sublayers (highlight, select, hover, elevation, main, labels) from bottom to top.
    */
   renderLayers(): Layer[];
 }

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

@@ -13,23 +13,23 @@
 
 'use client';
 
-import { createLoggerDomain } from "../../../shared/logger.js";
 import { ShapeEvents } from "../shared/events.js";
-import { isLineGeometry, isPointType, isPolygonGeometry } from "../shared/types.js";
+import { isCircleShape, isLineGeometry, isPointType, isPolygonGeometry } from "../shared/types.js";
+import { DEFAULT_TEXT_SIZE, DEFAULT_TEXT_STYLE } from "../../text-settings.js";
 import { SHAPE_LAYER_IDS } from "../shared/constants.js";
 import { getDashArray, getFillColor, getLineColor } from "../shared/utils/style-utils.js";
-import { BRIGHTNESS_FACTOR, COFFIN_CORNERS, DASH_EXTENSION, DEFAULT_DISPLAY_PROPS, HIGHLIGHT_COLOR_TUPLE, MAP_INTERACTION, MATERIAL_SETTINGS } from "./constants.js";
+import { BRIGHTNESS_FACTOR, DEFAULT_DISPLAY_PROPS, DISPLAY_EXTENSIONS, HIGHLIGHT_COLOR_TUPLE, MAP_INTERACTION, MATERIAL_SETTINGS } from "./constants.js";
+import { getLabelPosition2d } from "./utils/labels.js";
 import { createShapeLabelLayer } from "./shape-label-layer.js";
 import { applyOverlayOpacity, brightenColor, getHighlightLineWidth, getHoverLineWidth, getOverlayFillColor } from "./utils/display-style.js";
 import { buildIndicatorLineData, classifyElevatedFeatures, createCurtainPolygonFeatures, flattenFeatureTo2D, getFeatureElevation, partitionCurtains } from "./utils/elevation.js";
-import { extendMappingWithCoffinCorners, getIconConfig, getIconLayerProps, getIconUpdateTriggers } from "./utils/icon-config.js";
-import { getPointInteractionState } from "./utils/interaction.js";
+import { getIconConfig, getIconLayerProps, getIconUpdateTriggers } from "./utils/icon-config.js";
+import { getRadiusLabelText } from "./utils/radius-label.js";
 import { Broadcast } from "@accelint/bus";
 import { CompositeLayer } from "@deck.gl/core";
-import { GeoJsonLayer, IconLayer, LineLayer } from "@deck.gl/layers";
+import { GeoJsonLayer, LineLayer, TextLayer } from "@deck.gl/layers";
 
 //#region src/deckgl/shapes/display-shape-layer/index.ts
-const logger = createLoggerDomain("[DisplayShapeLayer]");
 /**
 * Typed event bus instance for shape events.
 * Provides type-safe event emission for shape interactions.
@@ -44,7 +44,7 @@ const shapeBus = Broadcast.getInstance();
 * ## Features
 * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
 * - **Icon support**: Custom icons for Point geometries via icon atlases
-* - **Interactive selection**: Click handling with brightness overlay on polygon select, optional highlight effect for non-icon-Point shapes (if showHighlight=true)
+* - **Interactive selection**: Click handling with brightness overlay on polygon select, optional highlight outline for non-Point shapes (if showHighlight=true). Point geometries use coffin corner brackets instead.
 * - **Hover effects**: Polygon fills brighten via material lighting; outline width increases by 2px on hover
 * - **Customizable labels**: Flexible label positioning with per-shape or global options
 * - **Style properties**: Full control over colors, border/outline patterns, and opacity
@@ -57,13 +57,14 @@ const shapeBus = Broadcast.getInstance();
 * and material-based brightness — the base shape is never altered.
 *
 * ## Layer Structure
-* Renders up to seven sublayers (in order, bottom to top):
-* 1. **Select layer**: Selection brightness overlay for polygon shapes
-* 2. **Hover layer**: Hover brightness overlay for polygon shapes
-* 3. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons
+* Renders sublayers in this order (bottom to top):
+* 1. **Highlight layer**: Selection outline for non-polygon, non-Point shapes (when showHighlight enabled)
+* 2. **Select layer**: Selection brightness overlay for polygon shapes
+* 3. **Hover layer**: Hover brightness overlay for polygon shapes
 * 4. **Elevation visualization**: Curtains (LineStrings) or wireframes (polygons) — elevation only
 * 5. **Elevation indicators**: Vertical strut lines for elevated non-polygon shapes — elevation only
-* 6. **Main GeoJsonLayer**: Shape geometries with styling and interaction
+* 6. **Main GeoJsonLayer**: Shape geometries with styling and interaction; includes CoffinCornerExtension
+*    which propagates to the icon/scatterplot sublayer for Point hover/select bracket feedback
 * 7. **Label layer**: Text labels (if showLabels enabled)
 *
 * ## Icon Atlas Constraint
@@ -129,6 +130,8 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	elevationCache = null;
 	/** Cache for elevation indicator line segments */
 	indicatorCache = null;
+	/** Cached coffin corner color tuple — avoids new array reference per render when highlight hasn't changed. */
+	coffinCornerColorCache = null;
 	static layerName = "DisplayShapeLayer";
 	static defaultProps = { ...DEFAULT_DISPLAY_PROPS };
 	/**
@@ -142,6 +145,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		this.featuresCache = null;
 		this.elevationCache = null;
 		this.indicatorCache = null;
+		this.coffinCornerColorCache = null;
 	}
 	/**
 	* Resolved highlight color — uses prop if provided, falls back to default.
@@ -150,6 +154,23 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		return this.props.highlightColor ?? HIGHLIGHT_COLOR_TUPLE;
 	}
 	/**
+	* Coffin corner bracket color derived from resolvedHighlight with forced full opacity.
+	* Cached to avoid a new array reference per render triggering deck.gl prop-change detection.
+	*/
+	get coffinCornerColor() {
+		const highlight = this.resolvedHighlight;
+		if (this.coffinCornerColorCache?.source !== highlight) this.coffinCornerColorCache = {
+			source: highlight,
+			color: [
+				highlight[0],
+				highlight[1],
+				highlight[2],
+				255
+			]
+		};
+		return this.coffinCornerColorCache.color;
+	}
+	/**
 	* Handle picking events from the main shapes layer
 	*/
 	handleMainLayerPick(info, mode) {
@@ -241,7 +262,8 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		return index !== void 0 ? this.props.data[index] : void 0;
 	}
 	/**
-	* Handle shape click
+	* Handle shape click — emits `shapes:selected` via bus and calls `onShapeClick` callback.
+	* @param info - deck.gl picking info from the clicked sublayer.
 	*/
 	handleShapeClick = (info) => {
 		const { onShapeClick, mapId } = this.props;
@@ -257,7 +279,8 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		if (onShapeClick) onShapeClick(shape);
 	};
 	/**
-	* Handle shape hover
+	* Handle shape hover — emits `shapes:hovered` via bus (deduplicated by shapeId) and calls `onShapeHover` callback.
+	* @param info - deck.gl picking info from the hovered sublayer.
 	*/
 	handleShapeHover = (info) => {
 		const { onShapeHover, mapId } = this.props;
@@ -293,7 +316,8 @@ var DisplayShapeLayer = class extends CompositeLayer {
 	}
 	/**
 	* Render highlight sublayer (underneath main layer).
-	* Note: Points with icons use coffin corners instead of highlight layer.
+	* Point geometries skip this layer — they use coffin corner brackets
+	* via CoffinCornerExtension on the main layer's icon/scatterplot sublayer instead.
 	*/
 	renderHighlightLayer(features) {
 		const { selectedShapeId, showHighlight } = this.props;
@@ -301,9 +325,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		const featureIndex = this.featuresCache?.shapeIdToIndex.get(selectedShapeId);
 		const selectedFeature = featureIndex !== void 0 ? features[featureIndex] : void 0;
 		if (!selectedFeature) return [];
-		if (isPointType(selectedFeature.geometry)) {
-			if (!!selectedFeature.properties?.styleProperties?.icon) return [];
-		}
+		if (isPointType(selectedFeature.geometry)) return [];
 		const highlightFeature = flattenFeatureTo2D(selectedFeature);
 		const lineColor = this.resolvedHighlight;
 		return [new GeoJsonLayer({
@@ -383,66 +405,13 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		})];
 	}
 	/**
-	* Render coffin corners layer for Point geometries that have icons on hover/select
-	* Coffin corners provide visual feedback for points instead of select layer
-	*/
-	renderCoffinCornersLayer(features) {
-		const { selectedShapeId } = this.props;
-		const hoverIndex = this.state?.hoverIndex;
-		const shapeIdToIndex = this.featuresCache?.shapeIdToIndex;
-		if (!shapeIdToIndex) return [];
-		const pointFeatures = [];
-		for (const f of features) {
-			if (f.geometry.type !== "Point") continue;
-			if (!f.properties?.styleProperties?.icon) continue;
-			const { isSelected, isHovered } = getPointInteractionState(f, selectedShapeId, hoverIndex, shapeIdToIndex);
-			if (isSelected || isHovered) pointFeatures.push(f);
-		}
-		if (pointFeatures.length === 0) return [];
-		const firstPointIcon = pointFeatures[0]?.properties?.styleProperties?.icon;
-		const iconAtlas = firstPointIcon?.atlas;
-		const iconMapping = firstPointIcon?.mapping;
-		if (!(iconAtlas && iconMapping)) {
-			logger.warn("Point shape has icon style but missing iconAtlas or iconMapping - coffin corners will not render");
-			return [];
-		}
-		const extendedMapping = extendMappingWithCoffinCorners(iconMapping);
-		return [new IconLayer({
-			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-coffin-corners`,
-			data: pointFeatures,
-			iconAtlas,
-			iconMapping: extendedMapping,
-			getIcon: (d) => {
-				const { isSelected, isHovered } = getPointInteractionState(d, selectedShapeId, hoverIndex, shapeIdToIndex);
-				if (isSelected && isHovered) return COFFIN_CORNERS.SELECTED_HOVER_ICON;
-				if (isSelected) return COFFIN_CORNERS.SELECTED_ICON;
-				return COFFIN_CORNERS.HOVER_ICON;
-			},
-			getSize: COFFIN_CORNERS.SIZE,
-			getPosition: (d) => {
-				return isPointType(d.geometry) ? d.geometry.coordinates : [0, 0];
-			},
-			getPixelOffset: (d) => {
-				return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
-			},
-			billboard: false,
-			pickable: false,
-			updateTriggers: {
-				getIcon: [selectedShapeId, this.state?.hoverIndex],
-				data: [
-					features,
-					selectedShapeId,
-					this.state?.hoverIndex
-				]
-			}
-		})];
-	}
-	/**
 	* Render main shapes layer
 	*/
 	renderMainLayer(features) {
 		const { pickable, applyBaseOpacity, selectedShapeId } = this.props;
 		const { hasIcons, atlas: iconAtlas, mapping: iconMapping } = getIconConfig(features);
+		const hoveredFeature = this.state?.hoverIndex !== void 0 ? features[this.state.hoverIndex] : void 0;
+		const hoveredEntityId = hoveredFeature?.geometry.type === "Point" ? hoveredFeature.properties?.shapeId : void 0;
 		return new GeoJsonLayer({
 			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`,
 			data: features,
@@ -473,7 +442,11 @@ var DisplayShapeLayer = class extends CompositeLayer {
 			},
 			pointRadiusUnits: "pixels",
 			...getIconLayerProps(hasIcons, iconAtlas, iconMapping),
-			extensions: DASH_EXTENSION,
+			selectedEntityId: selectedShapeId,
+			hoveredEntityId,
+			getEntityId: (d) => d.properties?.shapeId,
+			selectedCoffinCornerColor: this.coffinCornerColor,
+			extensions: DISPLAY_EXTENSIONS,
 			getDashArray,
 			pickable,
 			autoHighlight: false,
@@ -520,6 +493,51 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		})];
 	}
 	/**
+	* Render radius label layer for hovered circle shapes.
+	* Shows the circle's radius value converted to the configured display unit.
+	*
+	* Positioning relative to the shape's label:
+	* - When showLabels is 'always' or 'hover': appears below the label
+	* - When showLabels is 'never': appears in the label's position
+	*/
+	renderRadiusLabelLayer() {
+		const { data, unit, showLabels, labelOptions } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const hoveredShape = hoverIndex !== void 0 ? data[hoverIndex] : void 0;
+		const radiusText = hoveredShape && isCircleShape(hoveredShape) ? getRadiusLabelText(hoveredShape, unit) : void 0;
+		const labelPosition = radiusText && hoveredShape ? getLabelPosition2d(hoveredShape, labelOptions) : void 0;
+		if (!labelPosition) return [];
+		const pixelOffset = showLabels !== "never" ? [labelPosition.pixelOffset[0], labelPosition.pixelOffset[1] + DEFAULT_TEXT_SIZE + 2] : labelPosition.pixelOffset;
+		return [new TextLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-radius-label`,
+			data: [{
+				text: radiusText,
+				position: labelPosition.coordinates
+			}],
+			getText: (d) => d.text,
+			getPosition: (d) => d.position,
+			getPixelOffset: pixelOffset,
+			getTextAnchor: labelPosition.textAnchor,
+			getAlignmentBaseline: labelPosition.alignmentBaseline,
+			...DEFAULT_TEXT_STYLE,
+			getAngle: 0,
+			background: false,
+			fontFamily: "Roboto MonoVariable, monospace",
+			pickable: false,
+			updateTriggers: {
+				getText: [hoverIndex, unit],
+				getPosition: [hoverIndex, labelOptions],
+				getPixelOffset: [
+					hoverIndex,
+					labelOptions,
+					showLabels
+				],
+				getTextAnchor: [hoverIndex, labelOptions],
+				getAlignmentBaseline: [hoverIndex, labelOptions]
+			}
+		})];
+	}
+	/**
 	* Render vertical elevation indicator lines for non-polygon shapes.
 	* Creates vertical "strut" lines from ground level to elevated features.
 	* For LineStrings, creates a "curtain" effect with vertical lines at each coordinate.
@@ -648,7 +666,8 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		return layers;
 	}
 	/**
-	* Render all sublayers
+	* Render all sublayers.
+	* @returns Ordered array of sublayers (highlight, select, hover, elevation, main, labels) from bottom to top.
 	*/
 	renderLayers() {
 		const features = this.getFeaturesWithId();
@@ -656,8 +675,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		const layers = [
 			...this.renderHighlightLayer(features),
 			...this.renderSelectLayer(features),
-			...this.renderHoverLayer(features),
-			...this.renderCoffinCornersLayer(features)
+			...this.renderHoverLayer(features)
 		];
 		if (enableElevation) {
 			const { classification, curtainFeatures } = this.getElevationData(features, this.props.applyBaseOpacity);
@@ -667,6 +685,7 @@ var DisplayShapeLayer = class extends CompositeLayer {
 		}
 		layers.push(this.renderMainLayer(features));
 		layers.push(...this.renderLabelsLayer());
+		layers.push(...this.renderRadiusLabelLayer());
 		return layers;
 	}
 };