@accelint/map-toolkit 0.5.0 → 1.0.0

package/dist/deckgl/shapes/draw-shape-layer/modes/draw-rectangle-mode-with-tooltip.js

@@ -0,0 +1,77 @@
+/*
+ * 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 { formatRectangleTooltip } from "../../shared/constants.js";
+import { DEFAULT_DISTANCE_UNITS, getDistanceUnitAbbreviation } from "../../../../shared/units.js";
+import { DrawRectangleMode } from "@deck.gl-community/editable-layers";
+import { area, bbox, bboxPolygon, convertArea, destination, distance } from "@turf/turf";
+import { featureCollection, point as point$1 } from "@turf/helpers";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/draw-rectangle-mode-with-tooltip.ts
+/**
+* Extends DrawRectangleMode to display dimensions and area tooltip.
+*
+* Shows the width, height, and total area of the rectangle being drawn.
+* Hold Shift to constrain to a square.
+*/
+var DrawRectangleModeWithTooltip = class extends DrawRectangleMode {
+	tooltip = null;
+	isShiftPressed = false;
+	/**
+	* Override getTwoClickPolygon to support Shift-constrained squares.
+	* When Shift is held, the rectangle is constrained to a square using
+	* real-world distances to account for lat/lon distortion.
+	*/
+	getTwoClickPolygon(coord1, coord2, modeConfig) {
+		let finalCoord2 = coord2;
+		if (this.isShiftPressed && coord1 && coord2) {
+			const lon1 = coord1[0] ?? 0;
+			const lat1 = coord1[1] ?? 0;
+			const lon2 = coord2[0] ?? 0;
+			const lat2 = coord2[1] ?? 0;
+			const horizontalDist = distance(point$1([lon1, lat1]), point$1([lon2, lat1]), { units: "kilometers" });
+			const verticalDist = distance(point$1([lon1, lat1]), point$1([lon1, lat2]), { units: "kilometers" });
+			const maxDist = Math.max(horizontalDist, verticalDist);
+			const lonSign = lon2 >= lon1 ? 1 : -1;
+			const latSign = lat2 >= lat1 ? 1 : -1;
+			finalCoord2 = destination(destination(point$1([lon1, lat1]), maxDist, lonSign > 0 ? 90 : 270, { units: "kilometers" }), maxDist, latSign > 0 ? 0 : 180, { units: "kilometers" }).geometry.coordinates;
+		}
+		return super.getTwoClickPolygon(coord1, finalCoord2, modeConfig);
+	}
+	handlePointerMove(event, props) {
+		this.isShiftPressed = event.sourceEvent?.shiftKey ?? false;
+		super.handlePointerMove(event, props);
+		const clickSequence = this.getClickSequence();
+		const firstClick = clickSequence[clickSequence.length - 1];
+		if (!firstClick) {
+			this.tooltip = null;
+			return;
+		}
+		const { mapCoords } = event;
+		const distanceUnits = props.modeConfig?.distanceUnits ?? DEFAULT_DISTANCE_UNITS;
+		const firstClickPoint = point$1(firstClick);
+		const currentPoint = point$1(mapCoords);
+		const cornerPoint = point$1([firstClick[0], mapCoords[1]]);
+		this.tooltip = {
+			position: mapCoords,
+			text: formatRectangleTooltip(distance(firstClickPoint, cornerPoint, { units: distanceUnits }), distance(currentPoint, cornerPoint, { units: distanceUnits }), convertArea(area(bboxPolygon(bbox(featureCollection([firstClickPoint, currentPoint])))), "meters", distanceUnits), getDistanceUnitAbbreviation(distanceUnits))
+		};
+	}
+	getTooltips() {
+		return this.tooltip ? [this.tooltip] : [];
+	}
+};
+
+//#endregion
+export { DrawRectangleModeWithTooltip };
+//# sourceMappingURL=draw-rectangle-mode-with-tooltip.js.map

package/dist/deckgl/shapes/draw-shape-layer/modes/draw-rectangle-mode-with-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-rectangle-mode-with-tooltip.js","names":["point"],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/draw-rectangle-mode-with-tooltip.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\nimport {\n  DrawRectangleMode,\n  type FeatureCollection,\n  type ModeProps,\n  type PointerMoveEvent,\n  type Tooltip,\n} from '@deck.gl-community/editable-layers';\nimport { featureCollection, point } from '@turf/helpers';\nimport {\n  area,\n  bbox,\n  bboxPolygon,\n  convertArea,\n  destination,\n  distance,\n} from '@turf/turf';\nimport {\n  DEFAULT_DISTANCE_UNITS,\n  getDistanceUnitAbbreviation,\n} from '@/shared/units';\nimport { formatRectangleTooltip } from '../../shared/constants';\nimport type { Position } from 'geojson';\n\n/**\n * Extends DrawRectangleMode to display dimensions and area tooltip.\n *\n * Shows the width, height, and total area of the rectangle being drawn.\n * Hold Shift to constrain to a square.\n */\nexport class DrawRectangleModeWithTooltip extends DrawRectangleMode {\n  private tooltip: Tooltip | null = null;\n  private isShiftPressed = false;\n\n  /**\n   * Override getTwoClickPolygon to support Shift-constrained squares.\n   * When Shift is held, the rectangle is constrained to a square using\n   * real-world distances to account for lat/lon distortion.\n   */\n  override getTwoClickPolygon(\n    coord1: Position,\n    coord2: Position,\n    modeConfig: ModeProps<FeatureCollection>['modeConfig'],\n  ) {\n    let finalCoord2 = coord2;\n\n    // If Shift is pressed, constrain to a square using real distances\n    if (this.isShiftPressed && coord1 && coord2) {\n      const lon1 = coord1[0] ?? 0;\n      const lat1 = coord1[1] ?? 0;\n      const lon2 = coord2[0] ?? 0;\n      const lat2 = coord2[1] ?? 0;\n\n      // Calculate real-world distances using turf\n      // Horizontal distance (along latitude)\n      const horizontalDist = distance(\n        point([lon1, lat1]),\n        point([lon2, lat1]),\n        {\n          units: 'kilometers',\n        },\n      );\n      // Vertical distance (along longitude)\n      const verticalDist = distance(point([lon1, lat1]), point([lon1, lat2]), {\n        units: 'kilometers',\n      });\n\n      // Use the larger distance for the square side\n      const maxDist = Math.max(horizontalDist, verticalDist);\n\n      // Determine direction signs\n      const lonSign = lon2 >= lon1 ? 1 : -1;\n      const latSign = lat2 >= lat1 ? 1 : -1;\n\n      // Calculate new corner using destination() for accurate geographic positioning\n      // Move horizontally from coord1\n      const horizontalPoint = destination(\n        point([lon1, lat1]),\n        maxDist,\n        lonSign > 0 ? 90 : 270,\n        {\n          units: 'kilometers',\n        },\n      );\n      // Move vertically from that point\n      const cornerPoint = destination(\n        horizontalPoint,\n        maxDist,\n        latSign > 0 ? 0 : 180,\n        {\n          units: 'kilometers',\n        },\n      );\n\n      finalCoord2 = cornerPoint.geometry.coordinates;\n    }\n\n    // Call parent implementation with potentially adjusted coordinates\n    return super.getTwoClickPolygon(coord1, finalCoord2, modeConfig);\n  }\n\n  override handlePointerMove(\n    event: PointerMoveEvent,\n    props: ModeProps<FeatureCollection>,\n  ) {\n    // Track shift key state from the source event\n    const sourceEvent = event.sourceEvent as KeyboardEvent | undefined;\n    this.isShiftPressed = sourceEvent?.shiftKey ?? false;\n\n    super.handlePointerMove(event, props);\n\n    const clickSequence = this.getClickSequence();\n    const firstClick = clickSequence[clickSequence.length - 1];\n    if (!firstClick) {\n      this.tooltip = null;\n      return;\n    }\n\n    const { mapCoords } = event;\n    const distanceUnits =\n      props.modeConfig?.distanceUnits ?? DEFAULT_DISTANCE_UNITS;\n\n    const firstClickPoint = point(firstClick);\n    const currentPoint = point(mapCoords);\n\n    // Calculate dimensions by finding the corner point\n    const cornerPoint = point([\n      firstClick[0] as number,\n      mapCoords[1] as number,\n    ]);\n    const dimension1 = distance(firstClickPoint, cornerPoint, {\n      units: distanceUnits,\n    });\n    const dimension2 = distance(currentPoint, cornerPoint, {\n      units: distanceUnits,\n    });\n\n    // Calculate area properly accounting for Earth's curvature\n    const points = featureCollection([firstClickPoint, currentPoint]);\n    const bboxPoly = bboxPolygon(bbox(points));\n    const rectArea = area(bboxPoly);\n    const convertedArea = convertArea(rectArea, 'meters', distanceUnits);\n    const unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);\n\n    this.tooltip = {\n      position: mapCoords,\n      text: formatRectangleTooltip(\n        dimension1,\n        dimension2,\n        convertedArea,\n        unitAbbrev,\n      ),\n    };\n  }\n\n  override getTooltips(): Tooltip[] {\n    return this.tooltip ? [this.tooltip] : [];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,IAAa,+BAAb,cAAkD,kBAAkB;CAClE,AAAQ,UAA0B;CAClC,AAAQ,iBAAiB;;;;;;CAOzB,AAAS,mBACP,QACA,QACA,YACA;EACA,IAAI,cAAc;AAGlB,MAAI,KAAK,kBAAkB,UAAU,QAAQ;GAC3C,MAAM,OAAO,OAAO,MAAM;GAC1B,MAAM,OAAO,OAAO,MAAM;GAC1B,MAAM,OAAO,OAAO,MAAM;GAC1B,MAAM,OAAO,OAAO,MAAM;GAI1B,MAAM,iBAAiB,SACrBA,QAAM,CAAC,MAAM,KAAK,CAAC,EACnBA,QAAM,CAAC,MAAM,KAAK,CAAC,EACnB,EACE,OAAO,cACR,CACF;GAED,MAAM,eAAe,SAASA,QAAM,CAAC,MAAM,KAAK,CAAC,EAAEA,QAAM,CAAC,MAAM,KAAK,CAAC,EAAE,EACtE,OAAO,cACR,CAAC;GAGF,MAAM,UAAU,KAAK,IAAI,gBAAgB,aAAa;GAGtD,MAAM,UAAU,QAAQ,OAAO,IAAI;GACnC,MAAM,UAAU,QAAQ,OAAO,IAAI;AAsBnC,iBAToB,YATI,YACtBA,QAAM,CAAC,MAAM,KAAK,CAAC,EACnB,SACA,UAAU,IAAI,KAAK,KACnB,EACE,OAAO,cACR,CACF,EAIC,SACA,UAAU,IAAI,IAAI,KAClB,EACE,OAAO,cACR,CACF,CAEyB,SAAS;;AAIrC,SAAO,MAAM,mBAAmB,QAAQ,aAAa,WAAW;;CAGlE,AAAS,kBACP,OACA,OACA;AAGA,OAAK,iBADe,MAAM,aACS,YAAY;AAE/C,QAAM,kBAAkB,OAAO,MAAM;EAErC,MAAM,gBAAgB,KAAK,kBAAkB;EAC7C,MAAM,aAAa,cAAc,cAAc,SAAS;AACxD,MAAI,CAAC,YAAY;AACf,QAAK,UAAU;AACf;;EAGF,MAAM,EAAE,cAAc;EACtB,MAAM,gBACJ,MAAM,YAAY,iBAAiB;EAErC,MAAM,kBAAkBA,QAAM,WAAW;EACzC,MAAM,eAAeA,QAAM,UAAU;EAGrC,MAAM,cAAcA,QAAM,CACxB,WAAW,IACX,UAAU,GACX,CAAC;AAeF,OAAK,UAAU;GACb,UAAU;GACV,MAAM,uBAhBW,SAAS,iBAAiB,aAAa,EACxD,OAAO,eACR,CAAC,EACiB,SAAS,cAAc,aAAa,EACrD,OAAO,eACR,CAAC,EAMoB,YADL,KADA,YAAY,KADd,kBAAkB,CAAC,iBAAiB,aAAa,CAAC,CACxB,CAAC,CACX,EACa,UAAU,cAAc,EACjD,4BAA4B,cAAc,CAS1D;GACF;;CAGH,AAAS,cAAyB;AAChC,SAAO,KAAK,UAAU,CAAC,KAAK,QAAQ,GAAG,EAAE"}

package/dist/deckgl/shapes/draw-shape-layer/modes/index.js

@@ -0,0 +1,64 @@
+/*
+ * 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 { ShapeFeatureType } from "../../shared/types.js";
+import { DrawCircleModeWithTooltip } from "./draw-circle-mode-with-tooltip.js";
+import { DrawEllipseModeWithTooltip } from "./draw-ellipse-mode-with-tooltip.js";
+import { DrawLineStringModeWithTooltip } from "./draw-line-string-mode-with-tooltip.js";
+import { DrawPolygonModeWithTooltip } from "./draw-polygon-mode-with-tooltip.js";
+import { DrawRectangleModeWithTooltip } from "./draw-rectangle-mode-with-tooltip.js";
+import { DrawPointMode, ViewMode } from "@deck.gl-community/editable-layers";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/index.ts
+/**
+* Cached mode instances.
+*
+* CRITICAL: Mode instances must be cached at module level to prevent
+* deck.gl assertion failures. Creating new mode instances on each render
+* causes the EditableGeoJsonLayer to fail with assertion errors.
+*/
+const MODE_INSTANCES = {
+	[ShapeFeatureType.Point]: new DrawPointMode(),
+	[ShapeFeatureType.LineString]: new DrawLineStringModeWithTooltip(),
+	[ShapeFeatureType.Polygon]: new DrawPolygonModeWithTooltip(),
+	[ShapeFeatureType.Rectangle]: new DrawRectangleModeWithTooltip(),
+	[ShapeFeatureType.Circle]: new DrawCircleModeWithTooltip(),
+	[ShapeFeatureType.Ellipse]: new DrawEllipseModeWithTooltip(),
+	view: new ViewMode()
+};
+/**
+* Get the cached mode instance for a shape type.
+*
+* @param shapeType - The shape type to get the mode for
+* @returns The cached mode instance for drawing that shape type
+*/
+function getModeInstance(shapeType) {
+	return MODE_INSTANCES[shapeType];
+}
+/**
+* Trigger double-click finish on the active mode.
+* This is a workaround for @deck.gl-community/editable-layers ~9.1 which doesn't
+* register 'dblclick' in EVENT_TYPES. We listen for dblclick at the DOM level
+* and call this function to finish drawing.
+*
+* @param shapeType - The shape type currently being drawn
+* @see https://github.com/visgl/deck.gl-community/pull/225
+*/
+function triggerDoubleClickFinish(shapeType) {
+	const mode = MODE_INSTANCES[shapeType];
+	if (mode instanceof DrawPolygonModeWithTooltip || mode instanceof DrawLineStringModeWithTooltip) mode.handleDoubleClick();
+}
+
+//#endregion
+export { getModeInstance, triggerDoubleClickFinish };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/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\nimport { DrawPointMode, ViewMode } from '@deck.gl-community/editable-layers';\nimport { ShapeFeatureType } from '../../shared/types';\nimport { DrawCircleModeWithTooltip } from './draw-circle-mode-with-tooltip';\nimport { DrawEllipseModeWithTooltip } from './draw-ellipse-mode-with-tooltip';\nimport { DrawLineStringModeWithTooltip } from './draw-line-string-mode-with-tooltip';\nimport { DrawPolygonModeWithTooltip } from './draw-polygon-mode-with-tooltip';\nimport { DrawRectangleModeWithTooltip } from './draw-rectangle-mode-with-tooltip';\n\nexport { DrawCircleModeWithTooltip } from './draw-circle-mode-with-tooltip';\nexport { DrawEllipseModeWithTooltip } from './draw-ellipse-mode-with-tooltip';\nexport { DrawLineStringModeWithTooltip } from './draw-line-string-mode-with-tooltip';\nexport { DrawPolygonModeWithTooltip } from './draw-polygon-mode-with-tooltip';\nexport { DrawRectangleModeWithTooltip } from './draw-rectangle-mode-with-tooltip';\n\n/**\n * Cached mode instances.\n *\n * CRITICAL: Mode instances must be cached at module level to prevent\n * deck.gl assertion failures. Creating new mode instances on each render\n * causes the EditableGeoJsonLayer to fail with assertion errors.\n */\nconst MODE_INSTANCES = {\n  [ShapeFeatureType.Point]: new DrawPointMode(),\n  [ShapeFeatureType.LineString]: new DrawLineStringModeWithTooltip(),\n  [ShapeFeatureType.Polygon]: new DrawPolygonModeWithTooltip(),\n  [ShapeFeatureType.Rectangle]: new DrawRectangleModeWithTooltip(),\n  [ShapeFeatureType.Circle]: new DrawCircleModeWithTooltip(),\n  [ShapeFeatureType.Ellipse]: new DrawEllipseModeWithTooltip(),\n  view: new ViewMode(),\n};\n\n/**\n * Get the cached mode instance for a shape type.\n *\n * @param shapeType - The shape type to get the mode for\n * @returns The cached mode instance for drawing that shape type\n */\nexport function getModeInstance(\n  shapeType: ShapeFeatureType,\n): (typeof MODE_INSTANCES)[ShapeFeatureType] {\n  return MODE_INSTANCES[shapeType];\n}\n\n/**\n * Get the view mode instance (for when not drawing).\n *\n * @returns The cached ViewMode instance\n */\nexport function getViewModeInstance(): ViewMode {\n  return MODE_INSTANCES.view;\n}\n\n/**\n * Trigger double-click finish on the active mode.\n * This is a workaround for @deck.gl-community/editable-layers ~9.1 which doesn't\n * register 'dblclick' in EVENT_TYPES. We listen for dblclick at the DOM level\n * and call this function to finish drawing.\n *\n * @param shapeType - The shape type currently being drawn\n * @see https://github.com/visgl/deck.gl-community/pull/225\n */\nexport function triggerDoubleClickFinish(shapeType: ShapeFeatureType): void {\n  const mode = MODE_INSTANCES[shapeType];\n\n  // Only Polygon and LineString modes support double-click to finish\n  if (\n    mode instanceof DrawPolygonModeWithTooltip ||\n    mode instanceof DrawLineStringModeWithTooltip\n  ) {\n    mode.handleDoubleClick();\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,iBAAiB;EACpB,iBAAiB,QAAQ,IAAI,eAAe;EAC5C,iBAAiB,aAAa,IAAI,+BAA+B;EACjE,iBAAiB,UAAU,IAAI,4BAA4B;EAC3D,iBAAiB,YAAY,IAAI,8BAA8B;EAC/D,iBAAiB,SAAS,IAAI,2BAA2B;EACzD,iBAAiB,UAAU,IAAI,4BAA4B;CAC5D,MAAM,IAAI,UAAU;CACrB;;;;;;;AAQD,SAAgB,gBACd,WAC2C;AAC3C,QAAO,eAAe;;;;;;;;;;;AAqBxB,SAAgB,yBAAyB,WAAmC;CAC1E,MAAM,OAAO,eAAe;AAG5B,KACE,gBAAgB,8BAChB,gBAAgB,8BAEhB,MAAK,mBAAmB"}

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

@@ -0,0 +1,175 @@
+/*
+ * 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 { createMapStore } from "../../../shared/create-map-store.js";
+import { MapModeEvents } from "../../../map-mode/events.js";
+import { DrawShapeEvents } from "./events.js";
+import { DRAW_CURSOR_MAP, DRAW_SHAPE_LAYER_ID, DRAW_SHAPE_MODE } from "./constants.js";
+import { releaseModeAndCursor, requestModeAndCursor } from "../shared/utils/mode-utils.js";
+import { convertFeatureToShape } from "./utils/feature-conversion.js";
+import { Broadcast } from "@accelint/bus";
+
+//#region src/deckgl/shapes/draw-shape-layer/store.ts
+/**
+* Draw Shape Store
+*
+* Manages drawing state for shape creation.
+*
+* @example
+* ```tsx
+* import { drawStore } from '@accelint/map-toolkit/deckgl/shapes';
+*
+* function DrawControls({ mapId }) {
+*   const { state, draw, cancel } = drawStore.use(mapId);
+*
+*   return (
+*     <div>
+*       <p>Drawing: {state.activeShapeType ?? 'none'}</p>
+*       <button onClick={() => draw('Polygon')}>Draw Polygon</button>
+*       <button onClick={cancel}>Cancel</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+/**
+* Typed event bus instances
+*/
+const drawShapeBus = Broadcast.getInstance();
+const mapModeBus = Broadcast.getInstance();
+/**
+* Default drawing state
+*/
+const DEFAULT_DRAWING_STATE = {
+	activeShapeType: null,
+	tentativeFeature: null,
+	styleDefaults: null,
+	circleDefaults: null
+};
+/**
+* Start drawing a shape
+*/
+function startDrawing(mapId, state, shapeType, options, notify, setState) {
+	if (state.activeShapeType) cancelDrawingInternal(mapId, state, notify, setState);
+	setState({
+		activeShapeType: shapeType,
+		tentativeFeature: null,
+		styleDefaults: options?.styleDefaults ?? null,
+		circleDefaults: options?.circleDefaults ?? null
+	});
+	const cursor = DRAW_CURSOR_MAP[shapeType];
+	requestModeAndCursor(mapId, DRAW_SHAPE_MODE, cursor, DRAW_SHAPE_LAYER_ID);
+	drawShapeBus.emit(DrawShapeEvents.drawing, {
+		shapeType,
+		mapId
+	});
+	notify();
+}
+/**
+* Complete drawing and create a shape
+*/
+function completeDrawingInternal(mapId, state, feature, notify, setState) {
+	if (!state.activeShapeType) throw new Error("Cannot complete drawing - not currently drawing");
+	const shapeType = state.activeShapeType;
+	const styleDefaults = state.styleDefaults;
+	const shape = convertFeatureToShape(feature, shapeType, styleDefaults);
+	setState({
+		activeShapeType: null,
+		tentativeFeature: null,
+		styleDefaults: null,
+		circleDefaults: null
+	});
+	releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);
+	drawShapeBus.emit(DrawShapeEvents.drawn, {
+		shape,
+		mapId
+	});
+	notify();
+	return shape;
+}
+/**
+* Cancel the current drawing operation
+*/
+function cancelDrawingInternal(mapId, state, notify, setState) {
+	if (!state.activeShapeType) return;
+	const shapeType = state.activeShapeType;
+	setState({
+		activeShapeType: null,
+		tentativeFeature: null,
+		styleDefaults: null,
+		circleDefaults: null
+	});
+	releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);
+	drawShapeBus.emit(DrawShapeEvents.canceled, {
+		shapeType,
+		mapId
+	});
+	notify();
+}
+/**
+* Draw shape store
+*/
+const drawStore = createMapStore({
+	defaultState: { ...DEFAULT_DRAWING_STATE },
+	actions: (mapId, { get, set, notify }) => ({
+		draw: (shapeType, options) => {
+			startDrawing(mapId, get(), shapeType, options, notify, set);
+		},
+		cancel: () => {
+			cancelDrawingInternal(mapId, get(), notify, set);
+		}
+	}),
+	bus: (mapId, { get }) => {
+		const unsubAuth = mapModeBus.on(MapModeEvents.changeAuthorization, (event) => {
+			const { authId, id } = event.payload;
+			if (id !== mapId) return;
+			if (get().activeShapeType) mapModeBus.emit(MapModeEvents.changeDecision, {
+				authId,
+				approved: false,
+				owner: DRAW_SHAPE_LAYER_ID,
+				reason: "Drawing in progress - cancel drawing first",
+				id: mapId
+			});
+		});
+		return () => {
+			unsubAuth();
+		};
+	},
+	onCleanup: (mapId, state) => {
+		if (state.activeShapeType) {
+			releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);
+			drawShapeBus.emit(DrawShapeEvents.canceled, {
+				shapeType: state.activeShapeType,
+				mapId
+			});
+		}
+	}
+});
+/**
+* Complete drawing with a feature (called by the layer component)
+*/
+function completeDrawingFromLayer(mapId, feature) {
+	return completeDrawingInternal(mapId, drawStore.get(mapId), feature, () => {}, (updates) => drawStore.set(mapId, updates));
+}
+/**
+* Cancel drawing (called by the layer component)
+*/
+function cancelDrawingFromLayer(mapId) {
+	drawStore.actions(mapId).cancel();
+}
+
+//#endregion
+export { cancelDrawingFromLayer, completeDrawingFromLayer, drawStore };
+//# sourceMappingURL=store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":["DEFAULT_DRAWING_STATE: DrawingState"],"sources":["../../../../src/deckgl/shapes/draw-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'use client';\n\n/**\n * Draw Shape Store\n *\n * Manages drawing state for shape creation.\n *\n * @example\n * ```tsx\n * import { drawStore } from '@accelint/map-toolkit/deckgl/shapes';\n *\n * function DrawControls({ mapId }) {\n *   const { state, draw, cancel } = drawStore.use(mapId);\n *\n *   return (\n *     <div>\n *       <p>Drawing: {state.activeShapeType ?? 'none'}</p>\n *       <button onClick={() => draw('Polygon')}>Draw Polygon</button>\n *       <button onClick={cancel}>Cancel</button>\n *     </div>\n *   );\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { MapModeEvents } from '@/map-mode/events';\nimport { createMapStore } from '@/shared/create-map-store';\nimport {\n  releaseModeAndCursor,\n  requestModeAndCursor,\n} from '../shared/utils/mode-utils';\nimport {\n  DRAW_CURSOR_MAP,\n  DRAW_SHAPE_LAYER_ID,\n  DRAW_SHAPE_MODE,\n} from './constants';\nimport { DrawShapeEvents } from './events';\nimport { convertFeatureToShape } from './utils/feature-conversion';\nimport type { UniqueId } from '@accelint/core';\nimport type { Feature } from 'geojson';\nimport type { MapModeEventType } from '@/map-mode/types';\nimport type { Shape, ShapeFeatureType } from '../shared/types';\nimport type { DrawShapeEvent, ShapeDrawnEvent } from './events';\nimport type { DrawFunction, DrawingState, DrawShapeOptions } from './types';\n\n/**\n * Typed event bus instances\n */\nconst drawShapeBus = Broadcast.getInstance<DrawShapeEvent>();\nconst mapModeBus = Broadcast.getInstance<MapModeEventType>();\n\n/**\n * Default drawing state\n */\nconst DEFAULT_DRAWING_STATE: DrawingState = {\n  activeShapeType: null,\n  tentativeFeature: null,\n  styleDefaults: null,\n  circleDefaults: null,\n};\n\n/**\n * Actions for draw shape store\n */\ntype DrawShapeActions = {\n  /** Start drawing a shape of the specified type */\n  draw: DrawFunction;\n  /** Cancel the current drawing operation */\n  cancel: () => void;\n};\n\n/**\n * Start drawing a shape\n */\nfunction startDrawing(\n  mapId: UniqueId,\n  state: DrawingState,\n  shapeType: ShapeFeatureType,\n  options: DrawShapeOptions | undefined,\n  notify: () => void,\n  setState: (updates: Partial<DrawingState>) => void,\n): void {\n  // Already drawing - cancel first\n  if (state.activeShapeType) {\n    cancelDrawingInternal(mapId, state, notify, setState);\n  }\n\n  // Update state with new object reference\n  setState({\n    activeShapeType: shapeType,\n    tentativeFeature: null,\n    styleDefaults: options?.styleDefaults ?? null,\n    circleDefaults: options?.circleDefaults ?? null,\n  });\n\n  // Request map mode and cursor using shared utilities\n  const cursor = DRAW_CURSOR_MAP[shapeType];\n  requestModeAndCursor(mapId, DRAW_SHAPE_MODE, cursor, DRAW_SHAPE_LAYER_ID);\n\n  // Emit drawing started event\n  drawShapeBus.emit(DrawShapeEvents.drawing, {\n    shapeType,\n    mapId,\n  });\n\n  notify();\n}\n\n/**\n * Complete drawing and create a shape\n */\nfunction completeDrawingInternal(\n  mapId: UniqueId,\n  state: DrawingState,\n  feature: Feature,\n  notify: () => void,\n  setState: (updates: Partial<DrawingState>) => void,\n): Shape {\n  if (!state.activeShapeType) {\n    throw new Error('Cannot complete drawing - not currently drawing');\n  }\n\n  const shapeType = state.activeShapeType;\n  const styleDefaults = state.styleDefaults;\n\n  // Convert feature to Shape\n  const shape = convertFeatureToShape(feature, shapeType, styleDefaults);\n\n  // Reset state with new object reference\n  setState({\n    activeShapeType: null,\n    tentativeFeature: null,\n    styleDefaults: null,\n    circleDefaults: null,\n  });\n\n  // Release mode and cursor using shared utilities\n  releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);\n\n  // Emit shape drawn event\n  drawShapeBus.emit(DrawShapeEvents.drawn, {\n    shape,\n    mapId,\n  } as unknown as ShapeDrawnEvent['payload']);\n\n  notify();\n\n  return shape;\n}\n\n/**\n * Cancel the current drawing operation\n */\nfunction cancelDrawingInternal(\n  mapId: UniqueId,\n  state: DrawingState,\n  notify: () => void,\n  setState: (updates: Partial<DrawingState>) => void,\n): void {\n  if (!state.activeShapeType) {\n    return; // Nothing to cancel\n  }\n\n  const shapeType = state.activeShapeType;\n\n  // Reset state with new object reference\n  setState({\n    activeShapeType: null,\n    tentativeFeature: null,\n    styleDefaults: null,\n    circleDefaults: null,\n  });\n\n  // Release mode and cursor using shared utilities\n  releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);\n\n  // Emit canceled event\n  drawShapeBus.emit(DrawShapeEvents.canceled, {\n    shapeType,\n    mapId,\n  });\n\n  notify();\n}\n\n/**\n * Draw shape store\n */\nexport const drawStore = createMapStore<DrawingState, DrawShapeActions>({\n  defaultState: { ...DEFAULT_DRAWING_STATE },\n\n  actions: (mapId, { get, set, notify }) => ({\n    draw: (shapeType: ShapeFeatureType, options?: DrawShapeOptions) => {\n      startDrawing(mapId, get(), shapeType, options, notify, set);\n    },\n\n    cancel: () => {\n      cancelDrawingInternal(mapId, get(), notify, set);\n    },\n  }),\n\n  bus: (mapId, { get }) => {\n    // Listen for mode authorization requests - REJECT when drawing (protected mode)\n    const unsubAuth = mapModeBus.on(\n      MapModeEvents.changeAuthorization,\n      (event) => {\n        const { authId, id } = event.payload;\n\n        // Filter: only handle if targeted at this map\n        if (id !== mapId) {\n          return;\n        }\n\n        // If we're actively drawing, reject the mode change request\n        if (get().activeShapeType) {\n          mapModeBus.emit(MapModeEvents.changeDecision, {\n            authId,\n            approved: false,\n            owner: DRAW_SHAPE_LAYER_ID,\n            reason: 'Drawing in progress - cancel drawing first',\n            id: mapId,\n          });\n        }\n      },\n    );\n\n    return () => {\n      unsubAuth();\n    };\n  },\n\n  onCleanup: (mapId, state) => {\n    // Cancel any active drawing before cleanup\n    if (state.activeShapeType) {\n      // Release mode and cursor using shared utilities\n      releaseModeAndCursor(mapId, DRAW_SHAPE_LAYER_ID);\n\n      // Emit canceled event\n      drawShapeBus.emit(DrawShapeEvents.canceled, {\n        shapeType: state.activeShapeType,\n        mapId,\n      });\n    }\n  },\n});\n\n// =============================================================================\n// Convenience exports\n// =============================================================================\n\n/**\n * Get the current drawing state for a mapId\n * Returns null if no store instance exists\n */\nexport function getDrawingState(mapId: UniqueId): DrawingState | null {\n  if (!drawStore.exists(mapId)) {\n    return null;\n  }\n  return drawStore.get(mapId);\n}\n\n/**\n * Hook for drawing state\n */\nexport function useDrawingState(\n  mapId: UniqueId,\n): { state: DrawingState } & DrawShapeActions {\n  return drawStore.use(mapId);\n}\n\n/**\n * Manually clear drawing state for a specific mapId.\n */\nexport function clearDrawingState(mapId: UniqueId): void {\n  drawStore.clear(mapId);\n}\n\n/**\n * Complete drawing with a feature (called by the layer component)\n */\nexport function completeDrawingFromLayer(\n  mapId: UniqueId,\n  feature: Feature,\n): Shape {\n  const state = drawStore.get(mapId);\n  return completeDrawingInternal(\n    mapId,\n    state,\n    feature,\n    () => {\n      /* notify handled by set */\n    },\n    (updates) => drawStore.set(mapId, updates),\n  );\n}\n\n/**\n * Cancel drawing (called by the layer component)\n */\nexport function cancelDrawingFromLayer(mapId: UniqueId): void {\n  drawStore.actions(mapId).cancel();\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAM,eAAe,UAAU,aAA6B;AAC5D,MAAM,aAAa,UAAU,aAA+B;;;;AAK5D,MAAMA,wBAAsC;CAC1C,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,gBAAgB;CACjB;;;;AAeD,SAAS,aACP,OACA,OACA,WACA,SACA,QACA,UACM;AAEN,KAAI,MAAM,gBACR,uBAAsB,OAAO,OAAO,QAAQ,SAAS;AAIvD,UAAS;EACP,iBAAiB;EACjB,kBAAkB;EAClB,eAAe,SAAS,iBAAiB;EACzC,gBAAgB,SAAS,kBAAkB;EAC5C,CAAC;CAGF,MAAM,SAAS,gBAAgB;AAC/B,sBAAqB,OAAO,iBAAiB,QAAQ,oBAAoB;AAGzE,cAAa,KAAK,gBAAgB,SAAS;EACzC;EACA;EACD,CAAC;AAEF,SAAQ;;;;;AAMV,SAAS,wBACP,OACA,OACA,SACA,QACA,UACO;AACP,KAAI,CAAC,MAAM,gBACT,OAAM,IAAI,MAAM,kDAAkD;CAGpE,MAAM,YAAY,MAAM;CACxB,MAAM,gBAAgB,MAAM;CAG5B,MAAM,QAAQ,sBAAsB,SAAS,WAAW,cAAc;AAGtE,UAAS;EACP,iBAAiB;EACjB,kBAAkB;EAClB,eAAe;EACf,gBAAgB;EACjB,CAAC;AAGF,sBAAqB,OAAO,oBAAoB;AAGhD,cAAa,KAAK,gBAAgB,OAAO;EACvC;EACA;EACD,CAA0C;AAE3C,SAAQ;AAER,QAAO;;;;;AAMT,SAAS,sBACP,OACA,OACA,QACA,UACM;AACN,KAAI,CAAC,MAAM,gBACT;CAGF,MAAM,YAAY,MAAM;AAGxB,UAAS;EACP,iBAAiB;EACjB,kBAAkB;EAClB,eAAe;EACf,gBAAgB;EACjB,CAAC;AAGF,sBAAqB,OAAO,oBAAoB;AAGhD,cAAa,KAAK,gBAAgB,UAAU;EAC1C;EACA;EACD,CAAC;AAEF,SAAQ;;;;;AAMV,MAAa,YAAY,eAA+C;CACtE,cAAc,EAAE,GAAG,uBAAuB;CAE1C,UAAU,OAAO,EAAE,KAAK,KAAK,cAAc;EACzC,OAAO,WAA6B,YAA+B;AACjE,gBAAa,OAAO,KAAK,EAAE,WAAW,SAAS,QAAQ,IAAI;;EAG7D,cAAc;AACZ,yBAAsB,OAAO,KAAK,EAAE,QAAQ,IAAI;;EAEnD;CAED,MAAM,OAAO,EAAE,UAAU;EAEvB,MAAM,YAAY,WAAW,GAC3B,cAAc,sBACb,UAAU;GACT,MAAM,EAAE,QAAQ,OAAO,MAAM;AAG7B,OAAI,OAAO,MACT;AAIF,OAAI,KAAK,CAAC,gBACR,YAAW,KAAK,cAAc,gBAAgB;IAC5C;IACA,UAAU;IACV,OAAO;IACP,QAAQ;IACR,IAAI;IACL,CAAC;IAGP;AAED,eAAa;AACX,cAAW;;;CAIf,YAAY,OAAO,UAAU;AAE3B,MAAI,MAAM,iBAAiB;AAEzB,wBAAqB,OAAO,oBAAoB;AAGhD,gBAAa,KAAK,gBAAgB,UAAU;IAC1C,WAAW,MAAM;IACjB;IACD,CAAC;;;CAGP,CAAC;;;;AAoCF,SAAgB,yBACd,OACA,SACO;AAEP,QAAO,wBACL,OAFY,UAAU,IAAI,MAAM,EAIhC,eACM,KAGL,YAAY,UAAU,IAAI,OAAO,QAAQ,CAC3C;;;;;AAMH,SAAgB,uBAAuB,OAAuB;AAC5D,WAAU,QAAQ,MAAM,CAAC,QAAQ"}

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

@@ -0,0 +1,86 @@
+/*
+ * 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 { DistanceUnitAbbreviation } from "../../../shared/units.js";
+import { CircleProperties, Shape, ShapeFeatureType, StyleProperties } from "../shared/types.js";
+import { UniqueId } from "@accelint/core";
+import { Feature } from "geojson";
+
+//#region src/deckgl/shapes/draw-shape-layer/types.d.ts
+/**
+ * State for the drawing store
+ */
+type DrawingState = {
+  /** Current shape type being drawn, null when not drawing */
+  activeShapeType: ShapeFeatureType | null;
+  /** Tentative feature being drawn (updates in real-time) */
+  tentativeFeature: Feature | null;
+  /** Default style properties to apply to drawn shapes */
+  styleDefaults: Partial<StyleProperties> | null;
+  /** Default circle properties (for Circle shapes) */
+  circleDefaults: Partial<CircleProperties> | null;
+};
+/**
+ * Options for starting a drawing operation
+ */
+type DrawShapeOptions = {
+  /** Default style properties for the drawn shape */
+  styleDefaults?: Partial<StyleProperties>;
+  /** Circle-specific defaults (only used for Circle shapes) */
+  circleDefaults?: Partial<CircleProperties>;
+};
+/**
+ * Options for the useDrawShape hook
+ */
+type UseDrawShapeOptions = {
+  /** Callback when a shape is successfully drawn */
+  onCreate?: (shape: Shape) => void;
+  /** Callback when drawing is canceled */
+  onCancel?: (shapeType: ShapeFeatureType) => void;
+};
+/**
+ * Return type for the useDrawShape hook
+ */
+type UseDrawShapeReturn = {
+  /** Current drawing state (null when not drawing) */
+  drawingState: DrawingState | null;
+  /** Start drawing a shape type with optional defaults */
+  draw: (shapeType: ShapeFeatureType, options?: DrawShapeOptions) => void;
+  /** Cancel the current drawing operation */
+  cancel: () => void;
+  /** Whether currently in drawing mode */
+  isDrawing: boolean;
+  /** The shape type currently being drawn (null if not drawing) */
+  activeShapeType: ShapeFeatureType | null;
+};
+/**
+ * Props for the DrawShapeLayer component
+ */
+type DrawShapeLayerProps = {
+  /** Layer ID (defaults to 'draw-shape-layer') */
+  id?: string;
+  /**
+   * Map instance ID for multi-map isolation.
+   * Optional when used inside a MapProvider (uses context).
+   * Required when used outside a MapProvider.
+   */
+  mapId?: UniqueId;
+  /** Distance unit for tooltip measurements (defaults to 'km') */
+  unit?: DistanceUnitAbbreviation;
+};
+/**
+ * Function type for the draw action
+ */
+type DrawFunction = (shapeType: ShapeFeatureType, options?: DrawShapeOptions) => void;
+//#endregion
+export { DrawFunction, DrawShapeLayerProps, DrawShapeOptions, DrawingState, UseDrawShapeOptions, UseDrawShapeReturn };
+//# sourceMappingURL=types.d.ts.map

package/dist/{node_modules/.pnpm/@math.gl_web-mercator@4.1.0/node_modules/@math.gl/web-mercator/dist/fly-to-viewport.js → deckgl/shapes/draw-shape-layer/types.js}

@@ -11,4 +11,4 @@
  */
 
 
-import "./web-mercator-utils.js";
+'use client';

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

@@ -0,0 +1,82 @@
+/*
+ * 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 { UseDrawShapeOptions, UseDrawShapeReturn } from "./types.js";
+import { UniqueId } from "@accelint/core";
+
+//#region src/deckgl/shapes/draw-shape-layer/use-draw-shape.d.ts
+
+/**
+ * Hook to access the shape drawing state and actions.
+ *
+ * This hook uses `useSyncExternalStore` to subscribe to drawing state changes,
+ * providing concurrent-safe state updates. Uses a fan-out pattern where
+ * a single bus listener per map instance notifies N React component subscribers.
+ *
+ * @param mapId - Optional map instance ID. If not provided, will use the ID from `MapContext`.
+ * @param options - Optional callbacks for onCreate and onCancel events
+ * @returns Drawing state, draw function, cancel function, and convenience flags
+ * @throws Error if no `mapId` is provided and hook is used outside of `MapProvider`
+ *
+ * @example
+ * ```tsx
+ * // Inside MapProvider (within BaseMap children) - uses context
+ * function DrawingToolbar() {
+ *   const { draw, cancel, isDrawing, activeShapeType } = useDrawShape(undefined, {
+ *     onCreate: (shape) => {
+ *       console.log('Shape created:', shape);
+ *       setShapes(prev => [...prev, shape]);
+ *     },
+ *     onCancel: (shapeType) => {
+ *       console.log('Drawing canceled:', shapeType);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => draw(ShapeFeatureType.Polygon)}>
+ *         Draw Polygon
+ *       </button>
+ *       <button onClick={() => draw(ShapeFeatureType.Circle)}>
+ *         Draw Circle
+ *       </button>
+ *       {isDrawing && (
+ *         <button onClick={cancel}>
+ *           Cancel ({activeShapeType})
+ *         </button>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Outside MapProvider - pass mapId directly
+ * function ExternalDrawingControl({ mapId }: { mapId: UniqueId }) {
+ *   const { draw, isDrawing } = useDrawShape(mapId);
+ *
+ *   return (
+ *     <button
+ *       onClick={() => draw(ShapeFeatureType.Point)}
+ *       disabled={isDrawing}
+ *     >
+ *       Add Point
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useDrawShape(mapId?: UniqueId, options?: UseDrawShapeOptions): UseDrawShapeReturn;
+//#endregion
+export { useDrawShape };
+//# sourceMappingURL=use-draw-shape.d.ts.map

package/dist/deckgl/shapes/draw-shape-layer/use-draw-shape.js

@@ -0,0 +1,112 @@
+/*
+ * 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 { MapContext } from "../../base-map/provider.js";
+import { DrawShapeEvents } from "./events.js";
+import { drawStore } from "./store.js";
+import { useContext, useMemo } from "react";
+import { useBus } from "@accelint/bus/react";
+
+//#region src/deckgl/shapes/draw-shape-layer/use-draw-shape.ts
+/**
+* Hook to access the shape drawing state and actions.
+*
+* This hook uses `useSyncExternalStore` to subscribe to drawing state changes,
+* providing concurrent-safe state updates. Uses a fan-out pattern where
+* a single bus listener per map instance notifies N React component subscribers.
+*
+* @param mapId - Optional map instance ID. If not provided, will use the ID from `MapContext`.
+* @param options - Optional callbacks for onCreate and onCancel events
+* @returns Drawing state, draw function, cancel function, and convenience flags
+* @throws Error if no `mapId` is provided and hook is used outside of `MapProvider`
+*
+* @example
+* ```tsx
+* // Inside MapProvider (within BaseMap children) - uses context
+* function DrawingToolbar() {
+*   const { draw, cancel, isDrawing, activeShapeType } = useDrawShape(undefined, {
+*     onCreate: (shape) => {
+*       console.log('Shape created:', shape);
+*       setShapes(prev => [...prev, shape]);
+*     },
+*     onCancel: (shapeType) => {
+*       console.log('Drawing canceled:', shapeType);
+*     },
+*   });
+*
+*   return (
+*     <div>
+*       <button onClick={() => draw(ShapeFeatureType.Polygon)}>
+*         Draw Polygon
+*       </button>
+*       <button onClick={() => draw(ShapeFeatureType.Circle)}>
+*         Draw Circle
+*       </button>
+*       {isDrawing && (
+*         <button onClick={cancel}>
+*           Cancel ({activeShapeType})
+*         </button>
+*       )}
+*     </div>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Outside MapProvider - pass mapId directly
+* function ExternalDrawingControl({ mapId }: { mapId: UniqueId }) {
+*   const { draw, isDrawing } = useDrawShape(mapId);
+*
+*   return (
+*     <button
+*       onClick={() => draw(ShapeFeatureType.Point)}
+*       disabled={isDrawing}
+*     >
+*       Add Point
+*     </button>
+*   );
+* }
+* ```
+*/
+function useDrawShape(mapId, options) {
+	const contextId = useContext(MapContext);
+	const actualId = mapId ?? contextId;
+	if (!actualId) throw new Error("useDrawShape requires either a mapId parameter or to be used within a MapProvider");
+	const { onCreate, onCancel } = options ?? {};
+	const { state: drawingState, draw, cancel } = drawStore.use(actualId);
+	const { useOn: useOn$1 } = useBus();
+	useOn$1(DrawShapeEvents.drawn, (event) => {
+		if (event.payload.mapId === actualId && onCreate) onCreate(event.payload.shape);
+	});
+	useOn$1(DrawShapeEvents.canceled, (event) => {
+		if (event.payload.mapId === actualId && onCancel) onCancel(event.payload.shapeType);
+	});
+	return useMemo(() => ({
+		drawingState,
+		draw,
+		cancel,
+		isDrawing: !!drawingState?.activeShapeType,
+		activeShapeType: drawingState?.activeShapeType ?? null
+	}), [
+		drawingState,
+		draw,
+		cancel
+	]);
+}
+
+//#endregion
+export { useDrawShape };
+//# sourceMappingURL=use-draw-shape.js.map