@accelint/map-toolkit 0.5.0 → 1.0.0

package/dist/viewport/store.d.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { MapStore } from "../shared/create-map-store.js";
+import { MapViewportPayload } from "../deckgl/base-map/types.js";
+import { UniqueId } from "@accelint/core";
+
+//#region src/viewport/store.d.ts
+/**
+ * State shape for viewport - mirrors MapViewportPayload but with
+ * a placeholder id that gets replaced per-instance
+ */
+type ViewportState = MapViewportPayload;
+/**
+ * No actions needed - viewport state is read-only from bus events
+ */
+type ViewportActions = Record<string, never>;
+/**
+ * Viewport store instance.
+ *
+ * Note: The defaultState uses a placeholder id that gets replaced
+ * when instances are created. The actual id comes from the bus event payload.
+ */
+declare const viewportStore: MapStore<MapViewportPayload, ViewportActions>;
+/**
+ * Hook to subscribe to viewport state changes for a specific map.
+ *
+ * @param mapId - Unique identifier for the map instance
+ * @returns Current viewport state including bounds, latitude, longitude, zoom, width, height
+ *
+ * @example
+ * ```tsx
+ * function MapInfo({ mapId }) {
+ *   const viewport = useMapViewport(mapId);
+ *   return (
+ *     <div>
+ *       Lat: {viewport.latitude?.toFixed(2)}, Lon: {viewport.longitude?.toFixed(2)}, Zoom: {viewport.zoom}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMapViewport(mapId: UniqueId): ViewportState;
+/**
+ * Get current viewport state (non-reactive, for imperative code).
+ *
+ * @param mapId - Unique identifier for the map instance
+ * @returns Current viewport state
+ */
+declare function getViewport(mapId: UniqueId): ViewportState;
+/**
+ * Manually clear viewport state for a specific map instance.
+ * This is typically not needed as cleanup happens automatically when all subscribers unmount.
+ *
+ * @param mapId - The unique identifier for the map instance to clear
+ */
+declare function clearViewportState(mapId: UniqueId): void;
+//#endregion
+export { clearViewportState, getViewport, useMapViewport, viewportStore };
+//# sourceMappingURL=store.d.ts.map

package/dist/viewport/store.js

@@ -0,0 +1,125 @@
+/*
+ * 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 "../deckgl/base-map/events.js";
+import { Broadcast } from "@accelint/bus";
+
+//#region src/viewport/store.ts
+/**
+* Viewport Store
+*
+* Manages viewport state (bounds, lat/lon, zoom, dimensions) per map instance.
+* State is updated automatically from MapEvents.viewport bus events.
+*
+* @example
+* ```tsx
+* import { viewportStore } from '@accelint/map-toolkit/viewport';
+*
+* function MapInfo({ mapId }) {
+*   const { state } = viewportStore.use(mapId);
+*   return (
+*     <div>
+*       Lat: {state.latitude.toFixed(2)}, Lon: {state.longitude.toFixed(2)}
+*     </div>
+*   );
+* }
+* ```
+*/
+const bus = Broadcast.getInstance();
+/**
+* Create default state for a given mapId.
+* Returns uninitialized values that indicate no viewport data yet.
+*/
+function createDefaultState(mapId) {
+	return {
+		id: mapId,
+		bounds: void 0,
+		latitude: NaN,
+		longitude: NaN,
+		zoom: NaN,
+		width: 0,
+		height: 0
+	};
+}
+/**
+* Viewport store instance.
+*
+* Note: The defaultState uses a placeholder id that gets replaced
+* when instances are created. The actual id comes from the bus event payload.
+*/
+const viewportStore = createMapStore({
+	defaultState: {
+		id: "",
+		bounds: void 0,
+		latitude: NaN,
+		longitude: NaN,
+		zoom: NaN,
+		width: 0,
+		height: 0
+	},
+	actions: () => ({}),
+	bus: (mapId, { replace }) => {
+		return bus.on(MapEvents.viewport, ({ payload }) => {
+			if (payload.id === mapId) replace(payload);
+		});
+	}
+});
+/**
+* Hook to subscribe to viewport state changes for a specific map.
+*
+* @param mapId - Unique identifier for the map instance
+* @returns Current viewport state including bounds, latitude, longitude, zoom, width, height
+*
+* @example
+* ```tsx
+* function MapInfo({ mapId }) {
+*   const viewport = useMapViewport(mapId);
+*   return (
+*     <div>
+*       Lat: {viewport.latitude?.toFixed(2)}, Lon: {viewport.longitude?.toFixed(2)}, Zoom: {viewport.zoom}
+*     </div>
+*   );
+* }
+* ```
+*/
+function useMapViewport(mapId) {
+	return viewportStore.useSelector(mapId, (state) => {
+		if (state.id === "") return createDefaultState(mapId);
+		return state;
+	});
+}
+/**
+* Get current viewport state (non-reactive, for imperative code).
+*
+* @param mapId - Unique identifier for the map instance
+* @returns Current viewport state
+*/
+function getViewport(mapId) {
+	const state = viewportStore.get(mapId);
+	if (state.id === "") return createDefaultState(mapId);
+	return state;
+}
+/**
+* Manually clear viewport state for a specific map instance.
+* This is typically not needed as cleanup happens automatically when all subscribers unmount.
+*
+* @param mapId - The unique identifier for the map instance to clear
+*/
+function clearViewportState(mapId) {
+	viewportStore.clear(mapId);
+}
+
+//#endregion
+export { clearViewportState, getViewport, useMapViewport, viewportStore };
+//# sourceMappingURL=store.js.map

package/dist/viewport/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":[],"sources":["../../src/viewport/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 * Viewport Store\n *\n * Manages viewport state (bounds, lat/lon, zoom, dimensions) per map instance.\n * State is updated automatically from MapEvents.viewport bus events.\n *\n * @example\n * ```tsx\n * import { viewportStore } from '@accelint/map-toolkit/viewport';\n *\n * function MapInfo({ mapId }) {\n *   const { state } = viewportStore.use(mapId);\n *   return (\n *     <div>\n *       Lat: {state.latitude.toFixed(2)}, Lon: {state.longitude.toFixed(2)}\n *     </div>\n *   );\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { createMapStore } from '../shared/create-map-store';\nimport { MapEvents } from '../deckgl/base-map/events';\nimport type { UniqueId } from '@accelint/core';\nimport type {\n  MapEventType,\n  MapViewportPayload,\n} from '../deckgl/base-map/types';\n\nconst bus = Broadcast.getInstance<MapEventType>();\n\n/**\n * State shape for viewport - mirrors MapViewportPayload but with\n * a placeholder id that gets replaced per-instance\n */\ntype ViewportState = MapViewportPayload;\n\n/**\n * No actions needed - viewport state is read-only from bus events\n */\ntype ViewportActions = Record<string, never>;\n\n/**\n * Create default state for a given mapId.\n * Returns uninitialized values that indicate no viewport data yet.\n */\nfunction createDefaultState(mapId: UniqueId): ViewportState {\n  return {\n    id: mapId,\n    bounds: undefined,\n    latitude: Number.NaN,\n    longitude: Number.NaN,\n    zoom: Number.NaN,\n    width: 0,\n    height: 0,\n  };\n}\n\n/**\n * Viewport store instance.\n *\n * Note: The defaultState uses a placeholder id that gets replaced\n * when instances are created. The actual id comes from the bus event payload.\n */\nexport const viewportStore = createMapStore<ViewportState, ViewportActions>({\n  // Placeholder default state - actual instances get proper id from bus events\n  defaultState: {\n    id: '' as UniqueId,\n    bounds: undefined,\n    latitude: Number.NaN,\n    longitude: Number.NaN,\n    zoom: Number.NaN,\n    width: 0,\n    height: 0,\n  },\n\n  // No actions - state is read-only from bus events\n  actions: () => ({}) as ViewportActions,\n\n  bus: (mapId, { replace }) => {\n    const unsub = bus.on(MapEvents.viewport, ({ payload }) => {\n      if (payload.id === mapId) {\n        // Replace entire state with the new payload\n        replace(payload);\n      }\n    });\n\n    return unsub;\n  },\n});\n\n// =============================================================================\n// Convenience exports\n// =============================================================================\n\n/**\n * Hook to subscribe to viewport state changes for a specific map.\n *\n * @param mapId - Unique identifier for the map instance\n * @returns Current viewport state including bounds, latitude, longitude, zoom, width, height\n *\n * @example\n * ```tsx\n * function MapInfo({ mapId }) {\n *   const viewport = useMapViewport(mapId);\n *   return (\n *     <div>\n *       Lat: {viewport.latitude?.toFixed(2)}, Lon: {viewport.longitude?.toFixed(2)}, Zoom: {viewport.zoom}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMapViewport(mapId: UniqueId): ViewportState {\n  return viewportStore.useSelector(mapId, (state) => {\n    // Return proper default state with correct mapId if uninitialized\n    if (state.id === '') {\n      return createDefaultState(mapId);\n    }\n    return state;\n  });\n}\n\n/**\n * Get current viewport state (non-reactive, for imperative code).\n *\n * @param mapId - Unique identifier for the map instance\n * @returns Current viewport state\n */\nexport function getViewport(mapId: UniqueId): ViewportState {\n  const state = viewportStore.get(mapId);\n  // Return proper default state with correct mapId if uninitialized\n  if (state.id === '') {\n    return createDefaultState(mapId);\n  }\n  return state;\n}\n\n/**\n * Manually clear viewport state for a specific map instance.\n * This is typically not needed as cleanup happens automatically when all subscribers unmount.\n *\n * @param mapId - The unique identifier for the map instance to clear\n */\nexport function clearViewportState(mapId: UniqueId): void {\n  viewportStore.clear(mapId);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,MAAM,UAAU,aAA2B;;;;;AAiBjD,SAAS,mBAAmB,OAAgC;AAC1D,QAAO;EACL,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,WAAW;EACX,MAAM;EACN,OAAO;EACP,QAAQ;EACT;;;;;;;;AASH,MAAa,gBAAgB,eAA+C;CAE1E,cAAc;EACZ,IAAI;EACJ,QAAQ;EACR,UAAU;EACV,WAAW;EACX,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CAGD,gBAAgB,EAAE;CAElB,MAAM,OAAO,EAAE,cAAc;AAQ3B,SAPc,IAAI,GAAG,UAAU,WAAW,EAAE,cAAc;AACxD,OAAI,QAAQ,OAAO,MAEjB,SAAQ,QAAQ;IAElB;;CAIL,CAAC;;;;;;;;;;;;;;;;;;;AAwBF,SAAgB,eAAe,OAAgC;AAC7D,QAAO,cAAc,YAAY,QAAQ,UAAU;AAEjD,MAAI,MAAM,OAAO,GACf,QAAO,mBAAmB,MAAM;AAElC,SAAO;GACP;;;;;;;;AASJ,SAAgB,YAAY,OAAgC;CAC1D,MAAM,QAAQ,cAAc,IAAI,MAAM;AAEtC,KAAI,MAAM,OAAO,GACf,QAAO,mBAAmB,MAAM;AAElC,QAAO;;;;;;;;AAST,SAAgB,mBAAmB,OAAuB;AACxD,eAAc,MAAM,MAAM"}

package/dist/viewport/types.d.ts

@@ -11,10 +11,10 @@
  */
 
 import { Bounds } from "../deckgl/base-map/types.js";
-import { UNIT_MAP } from "./constants.js";
+import { DistanceUnitAbbreviation } from "../shared/units.js";
 
 //#region src/viewport/types.d.ts
-type SupportedDistanceUnit = keyof typeof UNIT_MAP;
+type SupportedDistanceUnit = DistanceUnitAbbreviation;
 type GetViewportSizeArgs = {
   /** Geographic bounds, undefined if viewport not yet initialized */
   bounds?: Bounds;

package/dist/viewport/utils.js

@@ -11,7 +11,7 @@
  */
 
 
-import { UNIT_MAP } from "./constants.js";
+import { getDistanceUnitFromAbbreviation } from "../shared/units.js";
 
 //#region src/viewport/utils.ts
 const numberFormatter = Intl.NumberFormat("en-US");
@@ -65,7 +65,7 @@ function getViewportSize({ bounds, zoom, width: pixelWidth, height: pixelHeight,
 	const metersPerPixel = METERS_PER_PIXEL_AT_ZOOM_0 * Math.cos(centerLat * Math.PI / 180) / 2 ** zoom;
 	const widthMeters = pixelWidth * metersPerPixel;
 	const heightMeters = pixelHeight * metersPerPixel;
-	const conversionFactor = METERS_TO_UNIT[UNIT_MAP[unit]];
+	const conversionFactor = METERS_TO_UNIT[getDistanceUnitFromAbbreviation(unit)];
 	const widthDistance = Math.round(widthMeters * conversionFactor);
 	const heightDistance = Math.round(heightMeters * conversionFactor);
 	return `${formatter.format(widthDistance)} x ${formatter.format(heightDistance)} ${unit.toUpperCase()}`;

package/dist/viewport/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/viewport/utils.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 { UNIT_MAP } from './constants';\nimport type { GetViewportSizeArgs } from './types';\n\nconst numberFormatter = Intl.NumberFormat('en-US');\n\n/**\n * Web Mercator constant: meters per pixel at zoom 0, equator.\n * This is Earth's circumference (40075016.686m) divided by 256 (tile size).\n */\nconst METERS_PER_PIXEL_AT_ZOOM_0 = 156543.03392;\n\n/**\n * Unit conversion factors from meters.\n */\nconst METERS_TO_UNIT = {\n  kilometers: 0.001,\n  meters: 1,\n  nauticalmiles: 0.000539957,\n  miles: 0.000621371,\n  feet: 3.28084,\n} as const;\n\n/**\n * Returns a formatted viewport size string i.e. `660 x 1,801 NM`\n *\n * Calculates the geographic distance of the viewport using zoom level and\n * pixel dimensions with the Web Mercator projection formula. This approach\n * provides stable results without the edge cases of bounds-based calculations.\n *\n * @param args - Viewport size calculation arguments\n * @param args.bounds - Geographic bounds [minLon, minLat, maxLon, maxLat]\n * @param args.zoom - Zoom level for meters-per-pixel calculation\n * @param args.width - Viewport width in pixels\n * @param args.height - Viewport height in pixels\n * @param args.unit - Unit of distance measurement: `km | m | nm | mi | ft`. Defaults to `nm`\n * @param args.formatter - Number formatter for localization (defaults to en-US)\n * @returns Formatted string like \"660 x 1,801 NM\" or \"-- x -- NM\" if invalid\n *\n * @example\n * ```typescript\n * getViewportSize({ bounds: [-82, 22, -71, 52], zoom: 5, width: 800, height: 600, unit: 'nm' })\n * // returns \"612 x 459 NM\"\n *\n * getViewportSize({ bounds: [170, 50, -170, 60], zoom: 4, width: 1024, height: 768, unit: 'km' })\n * // returns \"2,050 x 1,538 KM\"\n * ```\n */\nexport function getViewportSize({\n  bounds,\n  zoom,\n  width: pixelWidth,\n  height: pixelHeight,\n  unit = 'nm',\n  formatter = numberFormatter,\n}: GetViewportSizeArgs) {\n  const defaultValue = `-- x -- ${unit.toUpperCase()}`;\n\n  // Validate inputs\n  if (!bounds || bounds.every((b) => Number.isNaN(b))) {\n    return defaultValue;\n  }\n\n  if (Number.isNaN(zoom) || pixelWidth === 0 || pixelHeight === 0) {\n    return defaultValue;\n  }\n\n  const [, minLat, , maxLat] = bounds;\n\n  // Validate latitude bounds are within valid geographic ranges\n  if (minLat < -90 || minLat > 90 || maxLat < -90 || maxLat > 90) {\n    return defaultValue;\n  }\n\n  // Calculate center latitude for the viewport\n  const centerLat = (minLat + maxLat) / 2;\n\n  // Web Mercator formula: meters per pixel at given zoom and latitude\n  // Resolution = 156543.03392 * cos(latitude * π/180) / 2^zoom\n  const metersPerPixel =\n    (METERS_PER_PIXEL_AT_ZOOM_0 * Math.cos((centerLat * Math.PI) / 180)) /\n    2 ** zoom;\n\n  // Calculate distances in meters\n  const widthMeters = pixelWidth * metersPerPixel;\n  const heightMeters = pixelHeight * metersPerPixel;\n\n  // Convert to requested unit\n  const unitKey = UNIT_MAP[unit] as keyof typeof METERS_TO_UNIT;\n  const conversionFactor = METERS_TO_UNIT[unitKey];\n\n  const widthDistance = Math.round(widthMeters * conversionFactor);\n  const heightDistance = Math.round(heightMeters * conversionFactor);\n\n  const width = formatter.format(widthDistance);\n  const height = formatter.format(heightDistance);\n\n  return `${width} x ${height} ${unit.toUpperCase()}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB,KAAK,aAAa,QAAQ;;;;;AAMlD,MAAM,6BAA6B;;;;AAKnC,MAAM,iBAAiB;CACrB,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,OAAO;CACP,MAAM;CACP;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,gBAAgB,EAC9B,QACA,MACA,OAAO,YACP,QAAQ,aACR,OAAO,MACP,YAAY,mBACU;CACtB,MAAM,eAAe,WAAW,KAAK,aAAa;AAGlD,KAAI,CAAC,UAAU,OAAO,OAAO,MAAM,OAAO,MAAM,EAAE,CAAC,CACjD,QAAO;AAGT,KAAI,OAAO,MAAM,KAAK,IAAI,eAAe,KAAK,gBAAgB,EAC5D,QAAO;CAGT,MAAM,GAAG,UAAU,UAAU;AAG7B,KAAI,SAAS,OAAO,SAAS,MAAM,SAAS,OAAO,SAAS,GAC1D,QAAO;CAIT,MAAM,aAAa,SAAS,UAAU;CAItC,MAAM,iBACH,6BAA6B,KAAK,IAAK,YAAY,KAAK,KAAM,IAAI,GACnE,KAAK;CAGP,MAAM,cAAc,aAAa;CACjC,MAAM,eAAe,cAAc;CAInC,MAAM,mBAAmB,eADT,SAAS;CAGzB,MAAM,gBAAgB,KAAK,MAAM,cAAc,iBAAiB;CAChE,MAAM,iBAAiB,KAAK,MAAM,eAAe,iBAAiB;AAKlE,QAAO,GAHO,UAAU,OAAO,cAAc,CAG7B,KAFD,UAAU,OAAO,eAAe,CAEnB,GAAG,KAAK,aAAa"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/viewport/utils.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 {\n  type DistanceUnit,\n  getDistanceUnitFromAbbreviation,\n} from '../shared/units';\nimport type { GetViewportSizeArgs } from './types';\n\nconst numberFormatter = Intl.NumberFormat('en-US');\n\n/**\n * Web Mercator constant: meters per pixel at zoom 0, equator.\n * This is Earth's circumference (40075016.686m) divided by 256 (tile size).\n */\nconst METERS_PER_PIXEL_AT_ZOOM_0 = 156543.03392;\n\n/**\n * Unit conversion factors from meters.\n */\nconst METERS_TO_UNIT = {\n  kilometers: 0.001,\n  meters: 1,\n  nauticalmiles: 0.000539957,\n  miles: 0.000621371,\n  feet: 3.28084,\n} as const;\n\n/**\n * Returns a formatted viewport size string i.e. `660 x 1,801 NM`\n *\n * Calculates the geographic distance of the viewport using zoom level and\n * pixel dimensions with the Web Mercator projection formula. This approach\n * provides stable results without the edge cases of bounds-based calculations.\n *\n * @param args - Viewport size calculation arguments\n * @param args.bounds - Geographic bounds [minLon, minLat, maxLon, maxLat]\n * @param args.zoom - Zoom level for meters-per-pixel calculation\n * @param args.width - Viewport width in pixels\n * @param args.height - Viewport height in pixels\n * @param args.unit - Unit of distance measurement: `km | m | nm | mi | ft`. Defaults to `nm`\n * @param args.formatter - Number formatter for localization (defaults to en-US)\n * @returns Formatted string like \"660 x 1,801 NM\" or \"-- x -- NM\" if invalid\n *\n * @example\n * ```typescript\n * getViewportSize({ bounds: [-82, 22, -71, 52], zoom: 5, width: 800, height: 600, unit: 'nm' })\n * // returns \"612 x 459 NM\"\n *\n * getViewportSize({ bounds: [170, 50, -170, 60], zoom: 4, width: 1024, height: 768, unit: 'km' })\n * // returns \"2,050 x 1,538 KM\"\n * ```\n */\nexport function getViewportSize({\n  bounds,\n  zoom,\n  width: pixelWidth,\n  height: pixelHeight,\n  unit = 'nm',\n  formatter = numberFormatter,\n}: GetViewportSizeArgs) {\n  const defaultValue = `-- x -- ${unit.toUpperCase()}`;\n\n  // Validate inputs\n  if (!bounds || bounds.every((b) => Number.isNaN(b))) {\n    return defaultValue;\n  }\n\n  if (Number.isNaN(zoom) || pixelWidth === 0 || pixelHeight === 0) {\n    return defaultValue;\n  }\n\n  const [, minLat, , maxLat] = bounds;\n\n  // Validate latitude bounds are within valid geographic ranges\n  if (minLat < -90 || minLat > 90 || maxLat < -90 || maxLat > 90) {\n    return defaultValue;\n  }\n\n  // Calculate center latitude for the viewport\n  const centerLat = (minLat + maxLat) / 2;\n\n  // Web Mercator formula: meters per pixel at given zoom and latitude\n  // Resolution = 156543.03392 * cos(latitude * π/180) / 2^zoom\n  const metersPerPixel =\n    (METERS_PER_PIXEL_AT_ZOOM_0 * Math.cos((centerLat * Math.PI) / 180)) /\n    2 ** zoom;\n\n  // Calculate distances in meters\n  const widthMeters = pixelWidth * metersPerPixel;\n  const heightMeters = pixelHeight * metersPerPixel;\n\n  // Convert to requested unit\n  const unitKey = getDistanceUnitFromAbbreviation(unit) as DistanceUnit;\n  const conversionFactor = METERS_TO_UNIT[unitKey];\n\n  const widthDistance = Math.round(widthMeters * conversionFactor);\n  const heightDistance = Math.round(heightMeters * conversionFactor);\n\n  const width = formatter.format(widthDistance);\n  const height = formatter.format(heightDistance);\n\n  return `${width} x ${height} ${unit.toUpperCase()}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,kBAAkB,KAAK,aAAa,QAAQ;;;;;AAMlD,MAAM,6BAA6B;;;;AAKnC,MAAM,iBAAiB;CACrB,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,OAAO;CACP,MAAM;CACP;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,gBAAgB,EAC9B,QACA,MACA,OAAO,YACP,QAAQ,aACR,OAAO,MACP,YAAY,mBACU;CACtB,MAAM,eAAe,WAAW,KAAK,aAAa;AAGlD,KAAI,CAAC,UAAU,OAAO,OAAO,MAAM,OAAO,MAAM,EAAE,CAAC,CACjD,QAAO;AAGT,KAAI,OAAO,MAAM,KAAK,IAAI,eAAe,KAAK,gBAAgB,EAC5D,QAAO;CAGT,MAAM,GAAG,UAAU,UAAU;AAG7B,KAAI,SAAS,OAAO,SAAS,MAAM,SAAS,OAAO,SAAS,GAC1D,QAAO;CAIT,MAAM,aAAa,SAAS,UAAU;CAItC,MAAM,iBACH,6BAA6B,KAAK,IAAK,YAAY,KAAK,KAAM,IAAI,GACnE,KAAK;CAGP,MAAM,cAAc,aAAa;CACjC,MAAM,eAAe,cAAc;CAInC,MAAM,mBAAmB,eADT,gCAAgC,KAAK;CAGrD,MAAM,gBAAgB,KAAK,MAAM,cAAc,iBAAiB;CAChE,MAAM,iBAAiB,KAAK,MAAM,eAAe,iBAAiB;AAKlE,QAAO,GAHO,UAAU,OAAO,cAAc,CAG7B,KAFD,UAAU,OAAO,eAAe,CAEnB,GAAG,KAAK,aAAa"}

package/dist/viewport/viewport-size.js

@@ -11,7 +11,7 @@
  */
 
 
-import { useViewportState } from "./use-viewport-state.js";
+import { useMapViewport } from "./store.js";
 import { getViewportSize } from "./utils.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -41,7 +41,7 @@ import { jsx } from "react/jsx-runtime";
 * ```
 */
 function ViewportSize({ instanceId, unit = "nm", ...rest }) {
-	const { bounds, zoom, width, height } = useViewportState({ instanceId });
+	const { bounds, zoom, width, height } = useMapViewport(instanceId);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		children: getViewportSize({

package/dist/viewport/viewport-size.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-size.js","names":[],"sources":["../../src/viewport/viewport-size.tsx"],"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 { useViewportState } from './use-viewport-state';\nimport { getViewportSize } from './utils';\nimport type { UniqueId } from '@accelint/core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { SupportedDistanceUnit } from './types';\n\nexport type ViewportSizeProps = ComponentPropsWithRef<'span'> & {\n  instanceId: UniqueId;\n  unit?: SupportedDistanceUnit;\n};\n\n/**\n * A span element displaying the current viewport bounds in the specified unit.\n *\n * Displays the viewport dimensions in a format like `660 x 1,801 NM`.\n * Updates automatically as the viewport changes by subscribing to viewport events.\n *\n * @param props - Extends `<span>` props\n * @param props.instanceId - The id of the view to subscribe to\n * @param props.unit - Measure of distance: `km | m | nm | mi | ft`. Defaults to `nm`\n * @param props.className - CSS classes for styling\n *\n * @example\n * ```tsx\n * // Basic usage with default nautical miles\n * <ViewportSize instanceId=\"some-uuid\" />\n *\n * // With custom unit and styling\n * <ViewportSize\n *   instanceId=\"some-uuid\"\n *   unit=\"km\"\n *   className=\"text-sm text-gray-600\"\n * />\n * ```\n */\nexport function ViewportSize({\n  instanceId,\n  unit = 'nm',\n  ...rest\n}: ViewportSizeProps) {\n  const { bounds, zoom, width, height } = useViewportState({ instanceId });\n\n  return (\n    <span {...rest}>\n      {getViewportSize({ bounds, unit, zoom, width, height })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,aAAa,EAC3B,YACA,OAAO,MACP,GAAG,QACiB;CACpB,MAAM,EAAE,QAAQ,MAAM,OAAO,WAAW,iBAAiB,EAAE,YAAY,CAAC;AAExE,QACE,oBAAC;EAAK,GAAI;YACP,gBAAgB;GAAE;GAAQ;GAAM;GAAM;GAAO;GAAQ,CAAC;GAClD"}
+{"version":3,"file":"viewport-size.js","names":[],"sources":["../../src/viewport/viewport-size.tsx"],"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 { useMapViewport } from './store';\nimport { getViewportSize } from './utils';\nimport type { UniqueId } from '@accelint/core';\nimport type { ComponentPropsWithRef } from 'react';\nimport type { SupportedDistanceUnit } from './types';\n\nexport type ViewportSizeProps = ComponentPropsWithRef<'span'> & {\n  instanceId: UniqueId;\n  unit?: SupportedDistanceUnit;\n};\n\n/**\n * A span element displaying the current viewport bounds in the specified unit.\n *\n * Displays the viewport dimensions in a format like `660 x 1,801 NM`.\n * Updates automatically as the viewport changes by subscribing to viewport events.\n *\n * @param props - Extends `<span>` props\n * @param props.instanceId - The id of the view to subscribe to\n * @param props.unit - Measure of distance: `km | m | nm | mi | ft`. Defaults to `nm`\n * @param props.className - CSS classes for styling\n *\n * @example\n * ```tsx\n * // Basic usage with default nautical miles\n * <ViewportSize instanceId=\"some-uuid\" />\n *\n * // With custom unit and styling\n * <ViewportSize\n *   instanceId=\"some-uuid\"\n *   unit=\"km\"\n *   className=\"text-sm text-gray-600\"\n * />\n * ```\n */\nexport function ViewportSize({\n  instanceId,\n  unit = 'nm',\n  ...rest\n}: ViewportSizeProps) {\n  const { bounds, zoom, width, height } = useMapViewport(instanceId);\n\n  return (\n    <span {...rest}>\n      {getViewportSize({ bounds, unit, zoom, width, height })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,aAAa,EAC3B,YACA,OAAO,MACP,GAAG,QACiB;CACpB,MAAM,EAAE,QAAQ,MAAM,OAAO,WAAW,eAAe,WAAW;AAElE,QACE,oBAAC;EAAK,GAAI;YACP,gBAAgB;GAAE;GAAQ;GAAM;GAAM;GAAO;GAAQ,CAAC;GAClD"}

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "@accelint/map-toolkit",
   "description": "A collection of components and utilities to simplify visualizing and working with geospatial data.",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "author": "https://hypergiant.com",
   "$schema": "https://json.schemastore.org/package",
   "devDependencies": {
+    "@deck.gl-community/editable-layers": "~9.1",
     "@deck.gl/core": "~9.1",
     "@deck.gl/extensions": "~9.1",
-    "@deck.gl/geo-layers": "~9.1",
     "@deck.gl/layers": "~9.1",
-    "@deck.gl/mapbox": "~9.1",
-    "@deck.gl/mesh-layers": "~9.1",
-    "@deck.gl/widgets": "~9.1",
     "@deckgl-fiber-renderer/dom": "^1.4.0",
     "@deckgl-fiber-renderer/shared": "^1.4.0",
     "@deckgl-fiber-renderer/types": "^1.4.0",
@@ -24,6 +21,9 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@turf/helpers": "^7.2.0",
+    "@turf/turf": "^7.2.0",
+    "@types/geojson": "^7946.0.14",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -34,6 +34,7 @@
     "node-fetch": "^2.6.7",
     "react": "^19",
     "react-dom": "^19",
+    "remark-gfm": "^4.0.1",
     "storybook": "^9.1.16",
     "tailwindcss": "^4.1.18",
     "tsdown": "^0.18.0",
@@ -41,15 +42,17 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.7",
     "vitest": "^4.0.15",
-    "@accelint/biome-config": "1.0.2",
+    "@accelint/biome-config": "1.1.0",
     "@accelint/bus": "3.0.2",
     "@accelint/core": "0.5.2",
     "@accelint/design-foundation": "2.0.0",
-    "@accelint/design-toolkit": "9.1.0",
+    "@accelint/design-toolkit": "9.2.0",
+    "@accelint/geo": "0.5.0",
     "@accelint/postcss-tailwind-css-modules": "1.0.1",
+    "@accelint/logger": "0.1.4",
+    "@accelint/smeegl": "0.3.4",
     "@accelint/typescript-config": "0.1.4",
-    "@accelint/vitest-config": "0.1.6",
-    "@accelint/geo": "0.4.2"
+    "@accelint/vitest-config": "0.1.6"
   },
   "engines": {
     "node": ">=22",
@@ -58,8 +61,8 @@
   "exports": {
     "./camera": "./dist/camera/index.js",
     "./camera/events": "./dist/camera/events.js",
+    "./camera/store": "./dist/camera/store.js",
     "./camera/types": "./dist/camera/types.js",
-    "./camera/use-camera-state": "./dist/camera/use-camera-state.js",
     "./cursor-coordinates": "./dist/cursor-coordinates/index.js",
     "./cursor-coordinates/use-cursor-coordinates": "./dist/cursor-coordinates/use-cursor-coordinates.js",
     "./deckgl": "./dist/deckgl/index.js",
@@ -71,13 +74,30 @@
     "./deckgl/base-map/types": "./dist/deckgl/base-map/types.js",
     "./deckgl/saved-viewports": "./dist/deckgl/saved-viewports/index.js",
     "./deckgl/saved-viewports/storage": "./dist/deckgl/saved-viewports/storage.js",
+    "./deckgl/shapes": "./dist/deckgl/shapes/index.js",
+    "./deckgl/shapes/display-shape-layer": "./dist/deckgl/shapes/display-shape-layer/index.js",
+    "./deckgl/shapes/display-shape-layer/fiber": "./dist/deckgl/shapes/display-shape-layer/fiber.js",
+    "./deckgl/shapes/display-shape-layer/types": "./dist/deckgl/shapes/display-shape-layer/types.js",
+    "./deckgl/shapes/display-shape-layer/use-select-shape": "./dist/deckgl/shapes/display-shape-layer/use-select-shape.js",
+    "./deckgl/shapes/draw-shape-layer": "./dist/deckgl/shapes/draw-shape-layer/index.js",
+    "./deckgl/shapes/draw-shape-layer/events": "./dist/deckgl/shapes/draw-shape-layer/events.js",
+    "./deckgl/shapes/draw-shape-layer/fiber": "./dist/deckgl/shapes/draw-shape-layer/fiber.js",
+    "./deckgl/shapes/draw-shape-layer/types": "./dist/deckgl/shapes/draw-shape-layer/types.js",
+    "./deckgl/shapes/draw-shape-layer/use-draw-shape": "./dist/deckgl/shapes/draw-shape-layer/use-draw-shape.js",
+    "./deckgl/shapes/edit-shape-layer": "./dist/deckgl/shapes/edit-shape-layer/index.js",
+    "./deckgl/shapes/edit-shape-layer/events": "./dist/deckgl/shapes/edit-shape-layer/events.js",
+    "./deckgl/shapes/edit-shape-layer/fiber": "./dist/deckgl/shapes/edit-shape-layer/fiber.js",
+    "./deckgl/shapes/edit-shape-layer/types": "./dist/deckgl/shapes/edit-shape-layer/types.js",
+    "./deckgl/shapes/edit-shape-layer/use-edit-shape": "./dist/deckgl/shapes/edit-shape-layer/use-edit-shape.js",
+    "./deckgl/shapes/shared/events": "./dist/deckgl/shapes/shared/events.js",
+    "./deckgl/shapes/shared/types": "./dist/deckgl/shapes/shared/types.js",
     "./deckgl/symbol-layer": "./dist/deckgl/symbol-layer/index.js",
     "./deckgl/symbol-layer/fiber": "./dist/deckgl/symbol-layer/fiber.js",
     "./deckgl/text-layer": "./dist/deckgl/text-layer/index.js",
     "./deckgl/text-layer/character-sets": "./dist/deckgl/text-layer/character-sets.js",
     "./deckgl/text-layer/default-settings": "./dist/deckgl/text-layer/default-settings.js",
     "./deckgl/text-layer/fiber": "./dist/deckgl/text-layer/fiber.js",
-    "./decorators/deckgl": "./dist/decorators/deckgl.js",
+    "./deckgl/text-settings": "./dist/deckgl/text-settings.js",
     "./map-cursor": "./dist/map-cursor/index.js",
     "./map-cursor/events": "./dist/map-cursor/events.js",
     "./map-cursor/store": "./dist/map-cursor/store.js",
@@ -89,12 +109,13 @@
     "./map-mode/types": "./dist/map-mode/types.js",
     "./map-mode/use-map-mode": "./dist/map-mode/use-map-mode.js",
     "./maplibre": "./dist/maplibre/index.js",
-    "./maplibre/constants": "./dist/maplibre/constants.js",
     "./maplibre/hooks/use-maplibre": "./dist/maplibre/hooks/use-maplibre.js",
+    "./shared/constants": "./dist/shared/constants.js",
+    "./shared/create-map-store": "./dist/shared/create-map-store.js",
+    "./shared/units": "./dist/shared/units.js",
     "./viewport": "./dist/viewport/index.js",
-    "./viewport/constants": "./dist/viewport/constants.js",
+    "./viewport/store": "./dist/viewport/store.js",
     "./viewport/types": "./dist/viewport/types.js",
-    "./viewport/use-viewport-state": "./dist/viewport/use-viewport-state.js",
     "./viewport/utils": "./dist/viewport/utils.js",
     "./viewport/viewport-size": "./dist/viewport/viewport-size.js",
     "./package.json": "./package.json"
@@ -114,29 +135,30 @@
   ],
   "license": "Apache-2.0",
   "optionalDependencies": {
-    "@deck.gl/core": "9.1.14",
-    "@deck.gl/extensions": "9.1.14",
-    "@deck.gl/geo-layers": "9.1.14",
-    "@deck.gl/layers": "9.1.14",
-    "@deck.gl/mapbox": "9.1.14",
-    "@deck.gl/mesh-layers": "9.1.14",
-    "@deck.gl/widgets": "9.1.14",
-    "@deckgl-fiber-renderer/dom": "1.4.0",
+    "@deck.gl-community/editable-layers": "~9.1",
+    "@deck.gl/core": "~9.1",
+    "@deck.gl/extensions": "~9.1",
+    "@deck.gl/layers": "~9.1",
+    "@deckgl-fiber-renderer/dom": "^1.4.0",
     "@deckgl-fiber-renderer/shared": "^1.4.0",
     "@deckgl-fiber-renderer/types": "^1.4.0",
     "@math.gl/web-mercator": "^4.1.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/turf": "^7.2.0",
     "maplibre-gl": "^5.7.1",
-    "milsymbol": "3.0.2",
+    "milsymbol": "^3.0.2",
     "mjolnir.js": "^3.0.0",
     "react-map-gl": "^8.1.0",
     "@accelint/hotkey-manager": "0.1.3"
   },
   "owner": "default/pathfinder",
   "peerDependencies": {
+    "@types/geojson": "^7946.0.14",
     "react": "^19",
-    "@accelint/bus": "3.0.2",
     "@accelint/core": "0.5.2",
-    "@accelint/geo": "0.4.2"
+    "@accelint/geo": "0.5.0",
+    "@accelint/logger": "0.1.4",
+    "@accelint/bus": "3.0.2"
   },
   "private": false,
   "publishConfig": {
@@ -146,7 +168,18 @@
     "type": "git",
     "url": "https://github.com/gohypergiant/standard-toolkit"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/deckgl/shapes/display-shape-layer/fiber.ts",
+    "./src/deckgl/shapes/draw-shape-layer/fiber.ts",
+    "./src/deckgl/shapes/edit-shape-layer/fiber.ts",
+    "./src/deckgl/symbol-layer/fiber.ts",
+    "./src/deckgl/text-layer/fiber.ts",
+    "./dist/deckgl/shapes/display-shape-layer/fiber.js",
+    "./dist/deckgl/shapes/draw-shape-layer/fiber.js",
+    "./dist/deckgl/shapes/edit-shape-layer/fiber.js",
+    "./dist/deckgl/symbol-layer/fiber.js",
+    "./dist/deckgl/text-layer/fiber.js"
+  ],
   "subPath": "packages/map-toolkit",
   "title": "Accelint Map Toolkit",
   "type": "module",
@@ -154,6 +187,7 @@
     "bench": "pnpm vitest bench --run --dir src",
     "build": "pnpm tsdown",
     "build-storybook": "pnpm storybook build",
+    "build:icons": "smeegl --in '.storybook/icons' --out 'src/deckgl/shapes/__fixtures__/atlas'",
     "constellation-tracker": "pnpm exec constellation-tracker",
     "dev": "pnpm tsc --watch",
     "format": "pnpm biome format . --write --verbose",

package/dist/_virtual/rolldown_runtime.js

@@ -1,22 +0,0 @@
-/*
- * 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.
- */
-
-
-//#region rolldown:runtime
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
-});
-
-//#endregion
-export { __commonJSMin, __require };