@accelint/map-toolkit 0.2.0 → 0.3.0

package/dist/viewport/utils.d.ts

@@ -0,0 +1,37 @@
+import { GetViewportSizeArgs } from './types.js';
+import '../deckgl/base-map/types.js';
+import '@accelint/bus';
+import '@accelint/core';
+import '@deck.gl/core';
+import 'mjolnir.js';
+import '../deckgl/base-map/events.js';
+import './constants.js';
+
+/**
+ * Returns a formatted viewport size string i.e. `660 x 1,801 NM`
+ *
+ * Calculates the geographic distance of the viewport using zoom level and
+ * pixel dimensions with the Web Mercator projection formula. This approach
+ * provides stable results without the edge cases of bounds-based calculations.
+ *
+ * @param args - Viewport size calculation arguments
+ * @param args.bounds - Geographic bounds [minLon, minLat, maxLon, maxLat]
+ * @param args.zoom - Zoom level for meters-per-pixel calculation
+ * @param args.width - Viewport width in pixels
+ * @param args.height - Viewport height in pixels
+ * @param args.unit - Unit of distance measurement: `km | m | nm | mi | ft`. Defaults to `nm`
+ * @param args.formatter - Number formatter for localization (defaults to en-US)
+ * @returns Formatted string like "660 x 1,801 NM" or "-- x -- NM" if invalid
+ *
+ * @example
+ * ```typescript
+ * getViewportSize({ bounds: [-82, 22, -71, 52], zoom: 5, width: 800, height: 600, unit: 'nm' })
+ * // returns "612 x 459 NM"
+ *
+ * getViewportSize({ bounds: [170, 50, -170, 60], zoom: 4, width: 1024, height: 768, unit: 'km' })
+ * // returns "2,050 x 1,538 KM"
+ * ```
+ */
+declare function getViewportSize({ bounds, zoom, width: pixelWidth, height: pixelHeight, unit, formatter, }: GetViewportSizeArgs): string;
+
+export { getViewportSize };

package/dist/viewport/utils.js

@@ -0,0 +1,46 @@
+import { UNIT_MAP } from './constants.js';
+
+const numberFormatter = Intl.NumberFormat("en-US");
+const METERS_PER_PIXEL_AT_ZOOM_0 = 156543.03392;
+const METERS_TO_UNIT = {
+  kilometers: 1e-3,
+  meters: 1,
+  nauticalmiles: 539957e-9,
+  miles: 621371e-9,
+  feet: 3.28084
+};
+function getViewportSize({
+  bounds,
+  zoom,
+  width: pixelWidth,
+  height: pixelHeight,
+  unit = "nm",
+  formatter = numberFormatter
+}) {
+  const defaultValue = `-- x -- ${unit.toUpperCase()}`;
+  if (bounds.every((b) => Number.isNaN(b))) {
+    return defaultValue;
+  }
+  if (Number.isNaN(zoom) || pixelWidth === 0 || pixelHeight === 0) {
+    return defaultValue;
+  }
+  const [, minLat, , maxLat] = bounds;
+  if (minLat < -90 || minLat > 90 || maxLat < -90 || maxLat > 90) {
+    return defaultValue;
+  }
+  const centerLat = (minLat + maxLat) / 2;
+  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 unitKey = UNIT_MAP[unit];
+  const conversionFactor = METERS_TO_UNIT[unitKey];
+  const widthDistance = Math.round(widthMeters * conversionFactor);
+  const heightDistance = Math.round(heightMeters * conversionFactor);
+  const width = formatter.format(widthDistance);
+  const height = formatter.format(heightDistance);
+  return `${width} x ${height} ${unit.toUpperCase()}`;
+}
+
+export { getViewportSize };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/viewport/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/viewport/utils.ts"],"names":[],"mappings":";;AAeA,MAAM,eAAA,GAAkB,IAAA,CAAK,YAAA,CAAa,OAAO,CAAA;AAMjD,MAAM,0BAAA,GAA6B,YAAA;AAKnC,MAAM,cAAA,GAAiB;AAAA,EACrB,UAAA,EAAY,IAAA;AAAA,EACZ,MAAA,EAAQ,CAAA;AAAA,EACR,aAAA,EAAe,SAAA;AAAA,EACf,KAAA,EAAO,SAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AA2BO,SAAS,eAAA,CAAgB;AAAA,EAC9B,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA,EAAO,UAAA;AAAA,EACP,MAAA,EAAQ,WAAA;AAAA,EACR,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY;AACd,CAAA,EAAwB;AACtB,EAAA,MAAM,YAAA,GAAe,CAAA,QAAA,EAAW,IAAA,CAAK,WAAA,EAAa,CAAA,CAAA;AAGlD,EAAA,IAAI,MAAA,CAAO,MAAM,CAAC,CAAA,KAAM,OAAO,KAAA,CAAM,CAAC,CAAC,CAAA,EAAG;AACxC,IAAA,OAAO,YAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,KAAA,CAAM,IAAI,KAAK,UAAA,KAAe,CAAA,IAAK,gBAAgB,CAAA,EAAG;AAC/D,IAAA,OAAO,YAAA;AAAA,EACT;AAEA,EAAA,MAAM,GAAG,MAAA,IAAU,MAAM,CAAA,GAAI,MAAA;AAG7B,EAAA,IAAI,SAAS,GAAA,IAAO,MAAA,GAAS,MAAM,MAAA,GAAS,GAAA,IAAO,SAAS,EAAA,EAAI;AAC9D,IAAA,OAAO,YAAA;AAAA,EACT;AAGA,EAAA,MAAM,SAAA,GAAA,CAAa,SAAS,MAAA,IAAU,CAAA;AAItC,EAAA,MAAM,cAAA,GACH,6BAA6B,IAAA,CAAK,GAAA,CAAK,YAAY,IAAA,CAAK,EAAA,GAAM,GAAG,CAAA,GAClE,CAAA,IAAK,IAAA;AAGP,EAAA,MAAM,cAAc,UAAA,GAAa,cAAA;AACjC,EAAA,MAAM,eAAe,WAAA,GAAc,cAAA;AAGnC,EAAA,MAAM,OAAA,GAAU,SAAS,IAAI,CAAA;AAC7B,EAAA,MAAM,gBAAA,GAAmB,eAAe,OAAO,CAAA;AAE/C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,KAAA,CAAM,WAAA,GAAc,gBAAgB,CAAA;AAC/D,EAAA,MAAM,cAAA,GAAiB,IAAA,CAAK,KAAA,CAAM,YAAA,GAAe,gBAAgB,CAAA;AAEjE,EAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,MAAA,CAAO,aAAa,CAAA;AAC5C,EAAA,MAAM,MAAA,GAAS,SAAA,CAAU,MAAA,CAAO,cAAc,CAAA;AAE9C,EAAA,OAAO,GAAG,KAAK,CAAA,GAAA,EAAM,MAAM,CAAA,CAAA,EAAI,IAAA,CAAK,aAAa,CAAA,CAAA;AACnD","file":"utils.js","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.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"]}

package/dist/viewport/viewport-size.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UniqueId } from '@accelint/core';
+import { ComponentPropsWithRef } from 'react';
+import { SupportedDistanceUnit } from './types.js';
+import '../deckgl/base-map/types.js';
+import '@accelint/bus';
+import '@deck.gl/core';
+import 'mjolnir.js';
+import '../deckgl/base-map/events.js';
+import './constants.js';
+
+type ViewportSizeProps = ComponentPropsWithRef<'span'> & {
+    instanceId: UniqueId;
+    unit?: SupportedDistanceUnit;
+};
+/**
+ * A span element displaying the current viewport bounds in the specified unit.
+ *
+ * Displays the viewport dimensions in a format like `660 x 1,801 NM`.
+ * Updates automatically as the viewport changes by subscribing to viewport events.
+ *
+ * @param props - Extends `<span>` props
+ * @param props.instanceId - The id of the view to subscribe to
+ * @param props.unit - Measure of distance: `km | m | nm | mi | ft`. Defaults to `nm`
+ * @param props.className - CSS classes for styling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default nautical miles
+ * <ViewportSize instanceId="some-uuid" />
+ *
+ * // With custom unit and styling
+ * <ViewportSize
+ *   instanceId="some-uuid"
+ *   unit="km"
+ *   className="text-sm text-gray-600"
+ * />
+ * ```
+ */
+declare function ViewportSize({ instanceId, unit, ...rest }: ViewportSizeProps): react_jsx_runtime.JSX.Element;
+
+export { ViewportSize, type ViewportSizeProps };

package/dist/viewport/viewport-size.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { useViewportState } from './use-viewport-state.js';
+import { getViewportSize } from './utils.js';
+
+function ViewportSize({
+  instanceId,
+  unit = "nm",
+  ...rest
+}) {
+  const { bounds, zoom, width, height } = useViewportState({ instanceId });
+  return /* @__PURE__ */ jsx("span", { ...rest, children: getViewportSize({ bounds, unit, zoom, width, height }) });
+}
+
+export { ViewportSize };
+//# sourceMappingURL=viewport-size.js.map
+//# sourceMappingURL=viewport-size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/viewport/viewport-size.tsx"],"names":[],"mappings":";;;;AA+CO,SAAS,YAAA,CAAa;AAAA,EAC3B,UAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,EAAE,QAAQ,IAAA,EAAM,KAAA,EAAO,QAAO,GAAI,gBAAA,CAAiB,EAAE,UAAA,EAAY,CAAA;AAEvE,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EACP,QAAA,EAAA,eAAA,CAAgB,EAAE,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,KAAA,EAAO,MAAA,EAAQ,CAAA,EACxD,CAAA;AAEJ","file":"viewport-size.js","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"]}

package/package.json

@@ -12,7 +12,7 @@
     "maplibre"
   ],
   "subPath": "packages/map-toolkit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "license": "Apache-2.0",
   "repository": {
@@ -55,16 +55,10 @@
     "@deckgl-fiber-renderer/dom": "^1.4.0",
     "@deckgl-fiber-renderer/shared": "^1.4.0",
     "@deckgl-fiber-renderer/types": "^1.4.0",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/builder-vite": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/addon-docs": "^9.1.16",
+    "@storybook/addon-themes": "^9.1.16",
+    "@storybook/builder-vite": "^9.1.16",
+    "@storybook/react-vite": "^9.1.16",
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.4",
@@ -81,19 +75,20 @@
     "node-fetch": "^2.6.7",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "storybook": "^8.6.14",
+    "storybook": "^9.1.16",
     "tailwindcss": "^4.1.11",
     "tsup": "8.5.0",
     "type-fest": "^4.41.0",
     "typescript": "5.8.3",
-    "vite": "^5.4.9",
-    "vitest": "^2.1.9",
-    "vitest-broadcast-channel-mock": "^0.1.0",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8",
     "@accelint/biome-config": "1.0.2",
-    "@accelint/bus": "2.0.0",
+    "@accelint/bus": "3.0.0",
     "@accelint/constellation-tracker": "1.0.1",
+    "@accelint/design-foundation": "1.0.0",
     "@accelint/core": "0.5.0",
-    "@accelint/design-toolkit": "7.0.0",
+    "@accelint/design-toolkit": "8.0.0",
+    "@accelint/geo": "0.3.0",
     "@accelint/typescript-config": "0.1.4",
     "@accelint/vitest-config": "0.1.5"
   },
@@ -111,9 +106,9 @@
     "maplibre-gl": "^5.7.1",
     "milsymbol": "3.0.2",
     "mjolnir.js": "^3.0.0",
-    "react": "19.0.0",
-    "@accelint/bus": "2.0.0",
-    "@accelint/core": "0.5.0"
+    "@accelint/bus": "3.0.0",
+    "@accelint/core": "0.5.0",
+    "@accelint/geo": "0.3.0"
   },
   "publishConfig": {
     "access": "public"