@trackunit/react-map-adapter-shared 0.0.16 → 0.0.18

package/index.cjs.js

@@ -4,6 +4,7 @@ var geoJsonUtils = require('@trackunit/geo-json-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var esToolkit = require('es-toolkit');
 var zod = require('zod');
+var reactMapColorUtils = require('@trackunit/react-map-color-utils');
 
 /**
  * Helper to define an adapter factory with proper type inference.
@@ -556,140 +557,6 @@ const mergeAntimeridianFeatures = (features) => {
     };
 };
 
-// TODO (next PR): colorUtils is a generic CSS utility with no adapter-specific knowledge.
-// Extract to a standalone utility package so it isn't coupled to the adapter layer.
-/**
- * Browser-backed color mixing via CSS `color-mix()`.
- *
- * Uses a hidden DOM element + `getComputedStyle` to resolve expressions,
- * cached so each unique expression is computed at most once.
- */
-const colorCache = new Map();
-/**
- * Modern browsers return CSS Color Level 4 `color(srgb r g b)` from
- * `getComputedStyle`, but Mapbox GL JS only accepts classic formats
- * (hex, rgb, rgba, hsl, hsla). Convert to `rgb()`/`rgba()`.
- */
-const normalizeComputedColor = (color) => {
-    const m = color.match(/^color\(srgb\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)(?:\s*\/\s*([\d.e+-]+))?\)$/);
-    if (!m)
-        return color;
-    const r = Math.round(parseFloat(m[1] ?? "0") * 255);
-    const g = Math.round(parseFloat(m[2] ?? "0") * 255);
-    const b = Math.round(parseFloat(m[3] ?? "0") * 255);
-    if (m[4] !== undefined) {
-        return `rgba(${r}, ${g}, ${b}, ${parseFloat(m[4])})`;
-    }
-    return `rgb(${r}, ${g}, ${b})`;
-};
-let probeElement = null;
-const getProbeElement = () => {
-    if (probeElement) {
-        return probeElement;
-    }
-    if (typeof document === "undefined") {
-        return null;
-    }
-    const el = document.createElement("span");
-    el.style.display = "none";
-    document.body.appendChild(el);
-    probeElement = el;
-    return el;
-};
-const resolveColorMix = (expression, fallback) => {
-    const cached = colorCache.get(expression);
-    if (cached !== undefined) {
-        return cached;
-    }
-    const el = getProbeElement();
-    if (!el) {
-        return fallback;
-    }
-    el.style.color = "";
-    el.style.color = expression;
-    if (!el.style.color) {
-        return fallback;
-    }
-    const computed = getComputedStyle(el).color;
-    if (!computed) {
-        return fallback;
-    }
-    const normalized = normalizeComputedColor(computed);
-    colorCache.set(expression, normalized);
-    return normalized;
-};
-/**
- * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
- *
- * @param color1 - First color (any valid CSS color string)
- * @param color2 - Second color (any valid CSS color string)
- * @param percentage - Percentage of `color1` in the mix (0–100)
- * @returns Resolved color as an `rgb()` string, or `color1` if resolution fails
- */
-const mixColor = (color1, color2, percentage) => {
-    const expression = `color-mix(in srgb, ${color1} ${percentage}%, ${color2})`;
-    return resolveColorMix(expression, color1);
-};
-/**
- * Darken a CSS color by mixing it with black.
- *
- * @param color - Any valid CSS color string
- * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
- */
-const darkenColor = (color, amount) => mixColor(color, "black", 100 - amount);
-/**
- * Lighten a CSS color by mixing it with white.
- *
- * @param color - Any valid CSS color string
- * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
- */
-const lightenColor = (color, amount) => mixColor(color, "white", 100 - amount);
-/**
- * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
- *
- * Unlike setting `element.style.opacity`, this only affects the individual
- * color value — useful when fill and stroke need independent opacity.
- *
- * @param color - Any valid CSS color string
- * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
- * @returns `rgba()` string with the combined alpha, or the original color if resolution fails
- */
-const colorWithOpacity = (color, opacity) => {
-    if (opacity >= 1)
-        return color;
-    const cacheKey = `${color}@${opacity}`;
-    const cached = colorCache.get(cacheKey);
-    if (cached !== undefined)
-        return cached;
-    const el = getProbeElement();
-    if (!el)
-        return color;
-    el.style.color = "";
-    el.style.color = color;
-    const computed = getComputedStyle(el).color;
-    if (!computed)
-        return color;
-    const normalized = normalizeComputedColor(computed);
-    const rgbaMatch = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
-    if (!rgbaMatch)
-        return color;
-    const existingAlpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
-    const result = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${existingAlpha * opacity})`;
-    colorCache.set(cacheKey, result);
-    return result;
-};
-/**
- * Clear the resolved-color cache and detach the probe element.
- * Exposed for test teardown only — not part of the public API.
- */
-const resetColorUtilsForTesting = () => {
-    colorCache.clear();
-    if (probeElement) {
-        probeElement.remove();
-        probeElement = null;
-    }
-};
-
 /**
  * Web Mercator max latitude in degrees: atan(sinh(π)).
  * This is where Mercator tiles are cut off to form a square map (EPSG:3857).
@@ -2539,7 +2406,7 @@ const SELECTED_COLOR_SHIFT = 25;
 const resolveHoveredStyle = (base, _shapeType, theme) => {
     const userOverrides = base.hovered;
     const baseStroke = base.stroke ?? "#000000";
-    const autoStroke = theme === "dark" ? lightenColor(baseStroke, HOVER_COLOR_SHIFT) : darkenColor(baseStroke, HOVER_COLOR_SHIFT);
+    const autoStroke = theme === "dark" ? reactMapColorUtils.lightenColor(baseStroke, HOVER_COLOR_SHIFT) : reactMapColorUtils.darkenColor(baseStroke, HOVER_COLOR_SHIFT);
     return {
         fill: userOverrides?.fill ?? base.fill,
         fillOpacity: userOverrides?.fillOpacity ?? base.fillOpacity,
@@ -2558,7 +2425,7 @@ const resolveHoveredStyle = (base, _shapeType, theme) => {
 const resolveSelectedStyle = (base, _shapeType, theme) => {
     const userOverrides = base.selected;
     const baseStroke = base.stroke ?? "#000000";
-    const autoStroke = theme === "dark" ? lightenColor(baseStroke, SELECTED_COLOR_SHIFT) : darkenColor(baseStroke, SELECTED_COLOR_SHIFT);
+    const autoStroke = theme === "dark" ? reactMapColorUtils.lightenColor(baseStroke, SELECTED_COLOR_SHIFT) : reactMapColorUtils.darkenColor(baseStroke, SELECTED_COLOR_SHIFT);
     return {
         fill: userOverrides?.fill ?? base.fill,
         fillOpacity: userOverrides?.fillOpacity ?? base.fillOpacity,
@@ -2619,14 +2486,12 @@ exports.canPatchAdaptiveViewport = canPatchAdaptiveViewport;
 exports.canPatchMarkerInPlace = canPatchMarkerInPlace;
 exports.clearSafeArea = clearSafeArea;
 exports.collectFeatureIdSet = collectFeatureIdSet;
-exports.colorWithOpacity = colorWithOpacity;
 exports.computeInitialState = computeInitialState;
 exports.computeMarkerDomPortalZIndex = computeMarkerDomPortalZIndex;
 exports.convexHull = convexHull;
 exports.createClusterPinElement = createClusterPinElement;
 exports.createDefaultClusterElement = createDefaultClusterElement;
 exports.createSymbolDotElement = createSymbolDotElement;
-exports.darkenColor = darkenColor;
 exports.defineAdapter = defineAdapter;
 exports.densifyGeodesicFeatures = densifyGeodesicFeatures;
 exports.disableSafeAreaDebug = disableSafeAreaDebug;
@@ -2649,19 +2514,16 @@ exports.intermediatePoint = intermediatePoint;
 exports.isCanvasMarkerMode = isCanvasMarkerMode;
 exports.isEventOfType = isEventOfType;
 exports.isSafeAreaDebugEnabled = isSafeAreaDebugEnabled;
-exports.lightenColor = lightenColor;
 exports.mapAppearanceSchema = mapAppearanceSchema;
 exports.mapStateEquals = mapStateEquals;
 exports.mapThemeSchema = mapThemeSchema;
 exports.mapTypeSchema = mapTypeSchema;
 exports.mercatorCenterFromBounds = mercatorCenterFromBounds;
 exports.mergeAntimeridianFeatures = mergeAntimeridianFeatures;
-exports.mixColor = mixColor;
 exports.patchPortalDescriptors = patchPortalDescriptors;
 exports.pointInPolygon = pointInPolygon;
 exports.removeGoneIndexedMarkers = removeGoneIndexedMarkers;
 exports.renderSafeArea = renderSafeArea;
-exports.resetColorUtilsForTesting = resetColorUtilsForTesting;
 exports.resolveCircleSymbolDefaults = resolveCircleSymbolDefaults;
 exports.resolveHoveredStyle = resolveHoveredStyle;
 exports.resolveSelectedStyle = resolveSelectedStyle;

package/index.esm.js

@@ -2,6 +2,7 @@ import { validatePosition, validateBbox, geoJsonBboxSchema } from '@trackunit/ge
 import { color } from '@trackunit/ui-design-tokens';
 import { isEqual } from 'es-toolkit';
 import { z } from 'zod';
+import { lightenColor, darkenColor } from '@trackunit/react-map-color-utils';
 
 /**
  * Helper to define an adapter factory with proper type inference.
@@ -554,140 +555,6 @@ const mergeAntimeridianFeatures = (features) => {
     };
 };
 
-// TODO (next PR): colorUtils is a generic CSS utility with no adapter-specific knowledge.
-// Extract to a standalone utility package so it isn't coupled to the adapter layer.
-/**
- * Browser-backed color mixing via CSS `color-mix()`.
- *
- * Uses a hidden DOM element + `getComputedStyle` to resolve expressions,
- * cached so each unique expression is computed at most once.
- */
-const colorCache = new Map();
-/**
- * Modern browsers return CSS Color Level 4 `color(srgb r g b)` from
- * `getComputedStyle`, but Mapbox GL JS only accepts classic formats
- * (hex, rgb, rgba, hsl, hsla). Convert to `rgb()`/`rgba()`.
- */
-const normalizeComputedColor = (color) => {
-    const m = color.match(/^color\(srgb\s+([\d.e+-]+)\s+([\d.e+-]+)\s+([\d.e+-]+)(?:\s*\/\s*([\d.e+-]+))?\)$/);
-    if (!m)
-        return color;
-    const r = Math.round(parseFloat(m[1] ?? "0") * 255);
-    const g = Math.round(parseFloat(m[2] ?? "0") * 255);
-    const b = Math.round(parseFloat(m[3] ?? "0") * 255);
-    if (m[4] !== undefined) {
-        return `rgba(${r}, ${g}, ${b}, ${parseFloat(m[4])})`;
-    }
-    return `rgb(${r}, ${g}, ${b})`;
-};
-let probeElement = null;
-const getProbeElement = () => {
-    if (probeElement) {
-        return probeElement;
-    }
-    if (typeof document === "undefined") {
-        return null;
-    }
-    const el = document.createElement("span");
-    el.style.display = "none";
-    document.body.appendChild(el);
-    probeElement = el;
-    return el;
-};
-const resolveColorMix = (expression, fallback) => {
-    const cached = colorCache.get(expression);
-    if (cached !== undefined) {
-        return cached;
-    }
-    const el = getProbeElement();
-    if (!el) {
-        return fallback;
-    }
-    el.style.color = "";
-    el.style.color = expression;
-    if (!el.style.color) {
-        return fallback;
-    }
-    const computed = getComputedStyle(el).color;
-    if (!computed) {
-        return fallback;
-    }
-    const normalized = normalizeComputedColor(computed);
-    colorCache.set(expression, normalized);
-    return normalized;
-};
-/**
- * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
- *
- * @param color1 - First color (any valid CSS color string)
- * @param color2 - Second color (any valid CSS color string)
- * @param percentage - Percentage of `color1` in the mix (0–100)
- * @returns Resolved color as an `rgb()` string, or `color1` if resolution fails
- */
-const mixColor = (color1, color2, percentage) => {
-    const expression = `color-mix(in srgb, ${color1} ${percentage}%, ${color2})`;
-    return resolveColorMix(expression, color1);
-};
-/**
- * Darken a CSS color by mixing it with black.
- *
- * @param color - Any valid CSS color string
- * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
- */
-const darkenColor = (color, amount) => mixColor(color, "black", 100 - amount);
-/**
- * Lighten a CSS color by mixing it with white.
- *
- * @param color - Any valid CSS color string
- * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
- */
-const lightenColor = (color, amount) => mixColor(color, "white", 100 - amount);
-/**
- * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
- *
- * Unlike setting `element.style.opacity`, this only affects the individual
- * color value — useful when fill and stroke need independent opacity.
- *
- * @param color - Any valid CSS color string
- * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
- * @returns `rgba()` string with the combined alpha, or the original color if resolution fails
- */
-const colorWithOpacity = (color, opacity) => {
-    if (opacity >= 1)
-        return color;
-    const cacheKey = `${color}@${opacity}`;
-    const cached = colorCache.get(cacheKey);
-    if (cached !== undefined)
-        return cached;
-    const el = getProbeElement();
-    if (!el)
-        return color;
-    el.style.color = "";
-    el.style.color = color;
-    const computed = getComputedStyle(el).color;
-    if (!computed)
-        return color;
-    const normalized = normalizeComputedColor(computed);
-    const rgbaMatch = normalized.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/);
-    if (!rgbaMatch)
-        return color;
-    const existingAlpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
-    const result = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${existingAlpha * opacity})`;
-    colorCache.set(cacheKey, result);
-    return result;
-};
-/**
- * Clear the resolved-color cache and detach the probe element.
- * Exposed for test teardown only — not part of the public API.
- */
-const resetColorUtilsForTesting = () => {
-    colorCache.clear();
-    if (probeElement) {
-        probeElement.remove();
-        probeElement = null;
-    }
-};
-
 /**
  * Web Mercator max latitude in degrees: atan(sinh(π)).
  * This is where Mercator tiles are cut off to form a square map (EPSG:3857).
@@ -2582,4 +2449,4 @@ const resolveStrokeColors = (style, shapeType, theme) => {
     };
 };
 
-export { ANCHOR_SELECTOR, CIRCLE_SYMBOL_DEFAULT_DIAMETER_PX, CIRCLE_SYMBOL_DEFAULT_OPACITY, DEFAULT_CENTER, DEFAULT_MAP_APPEARANCE, DEFAULT_ZOOM, GEODESIC_MAX_SEGMENT_KM, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, LAYER_FADE_DURATION_MS, MAP_CURSORS, MAX_ZOOM, MIN_ZOOM, SAFE_AREA_DEFAULT_BUFFER_PX, WORLD_BBOX, allocSafeAreaDebugId, anchorFromBottomCenter, angularDistance, attachSafeAreaHoverListeners, bboxEquals, bufferRectCorners, buildAdaptiveDomEntries, buildAdaptiveDomRenderFn, buildAdaptiveSymbolStyleFn, cameraStateEquals, canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, clearSafeArea, collectFeatureIdSet, colorWithOpacity, computeInitialState, computeMarkerDomPortalZIndex, convexHull, createClusterPinElement, createDefaultClusterElement, createSymbolDotElement, darkenColor, defineAdapter, densifyGeodesicFeatures, disableSafeAreaDebug, discriminateRenderResult, enableSafeAreaDebug, estimateZoomFromBounds, extractLineCoordinates, extractPointCoordinates, extractPolygonPaths, extractSourceData, fadeInElement, filterRectsByCursorDirection, geometryTypeToShapeType, getAdaptiveDomFeatureIds, getAnchorRect, getEffectiveRestrictBounds, getHitSurfaceRect, hasSameFeatureIds, intermediatePoint, isCanvasMarkerMode, isEventOfType, isSafeAreaDebugEnabled, lightenColor, mapAppearanceSchema, mapStateEquals, mapThemeSchema, mapTypeSchema, mercatorCenterFromBounds, mergeAntimeridianFeatures, mixColor, patchPortalDescriptors, pointInPolygon, removeGoneIndexedMarkers, renderSafeArea, resetColorUtilsForTesting, resolveCircleSymbolDefaults, resolveHoveredStyle, resolveSelectedStyle, resolveStrokeColors, resolveSymbolDescriptor, safePolygon, toDeg, toRad, validateInitialViewport, watchSafeAreaLeave };
+export { ANCHOR_SELECTOR, CIRCLE_SYMBOL_DEFAULT_DIAMETER_PX, CIRCLE_SYMBOL_DEFAULT_OPACITY, DEFAULT_CENTER, DEFAULT_MAP_APPEARANCE, DEFAULT_ZOOM, GEODESIC_MAX_SEGMENT_KM, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, LAYER_FADE_DURATION_MS, MAP_CURSORS, MAX_ZOOM, MIN_ZOOM, SAFE_AREA_DEFAULT_BUFFER_PX, WORLD_BBOX, allocSafeAreaDebugId, anchorFromBottomCenter, angularDistance, attachSafeAreaHoverListeners, bboxEquals, bufferRectCorners, buildAdaptiveDomEntries, buildAdaptiveDomRenderFn, buildAdaptiveSymbolStyleFn, cameraStateEquals, canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, clearSafeArea, collectFeatureIdSet, computeInitialState, computeMarkerDomPortalZIndex, convexHull, createClusterPinElement, createDefaultClusterElement, createSymbolDotElement, defineAdapter, densifyGeodesicFeatures, disableSafeAreaDebug, discriminateRenderResult, enableSafeAreaDebug, estimateZoomFromBounds, extractLineCoordinates, extractPointCoordinates, extractPolygonPaths, extractSourceData, fadeInElement, filterRectsByCursorDirection, geometryTypeToShapeType, getAdaptiveDomFeatureIds, getAnchorRect, getEffectiveRestrictBounds, getHitSurfaceRect, hasSameFeatureIds, intermediatePoint, isCanvasMarkerMode, isEventOfType, isSafeAreaDebugEnabled, mapAppearanceSchema, mapStateEquals, mapThemeSchema, mapTypeSchema, mercatorCenterFromBounds, mergeAntimeridianFeatures, patchPortalDescriptors, pointInPolygon, removeGoneIndexedMarkers, renderSafeArea, resolveCircleSymbolDefaults, resolveHoveredStyle, resolveSelectedStyle, resolveStrokeColors, resolveSymbolDescriptor, safePolygon, toDeg, toRad, validateInitialViewport, watchSafeAreaLeave };

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@trackunit/react-map-adapter-shared",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/geo-json-utils": "1.14.35",
-    "@trackunit/ui-design-tokens": "1.13.32",
+    "@trackunit/react-map-color-utils": "0.0.3",
+    "@trackunit/geo-json-utils": "1.14.37",
+    "@trackunit/ui-design-tokens": "1.13.34",
     "es-toolkit": "^1.39.10",
     "zod": "^3.25.76"
   },

package/src/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./adapterContract";
 export * from "./antimeridianMerge";
-export * from "./colorUtils";
 export * from "./constants";
 export * from "./geodesicDensify";
 export * from "./initialViewportValidation";

package/src/colorUtils.d.ts

@@ -1,39 +0,0 @@
-/**
- * Mix two CSS colors using the browser's `color-mix(in srgb)` function.
- *
- * @param color1 - First color (any valid CSS color string)
- * @param color2 - Second color (any valid CSS color string)
- * @param percentage - Percentage of `color1` in the mix (0–100)
- * @returns Resolved color as an `rgb()` string, or `color1` if resolution fails
- */
-export declare const mixColor: (color1: string, color2: string, percentage: number) => string;
-/**
- * Darken a CSS color by mixing it with black.
- *
- * @param color - Any valid CSS color string
- * @param amount - Darkening intensity from 0 (no change) to 100 (pure black)
- */
-export declare const darkenColor: (color: string, amount: number) => string;
-/**
- * Lighten a CSS color by mixing it with white.
- *
- * @param color - Any valid CSS color string
- * @param amount - Lightening intensity from 0 (no change) to 100 (pure white)
- */
-export declare const lightenColor: (color: string, amount: number) => string;
-/**
- * Resolve a CSS color and apply an opacity multiplier to its alpha channel.
- *
- * Unlike setting `element.style.opacity`, this only affects the individual
- * color value — useful when fill and stroke need independent opacity.
- *
- * @param color - Any valid CSS color string
- * @param opacity - Opacity multiplier from 0 to 1 (multiplied with existing alpha)
- * @returns `rgba()` string with the combined alpha, or the original color if resolution fails
- */
-export declare const colorWithOpacity: (color: string, opacity: number) => string;
-/**
- * Clear the resolved-color cache and detach the probe element.
- * Exposed for test teardown only — not part of the public API.
- */
-export declare const resetColorUtilsForTesting: () => void;