@trackunit/react-map-adapter-shared 0.0.12 → 0.0.17

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).
@@ -2522,26 +2389,6 @@ const attachSafeAreaHoverListeners = (el, onEnter, onLeave, state) => {
     });
 };
 
-// TODO (next PR): shapeStyleDefaults computes visual defaults for shapes — a map consumer
-// concern, not an adapter concern. Make these injectable from react-map's createMapComponent
-// so adapters don't need to know about default visual styles.
-const SHAPE_STYLE_DEFAULTS = {
-    polygon: {
-        fillOpacity: 0.05,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    line: {
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    point: {
-        fillOpacity: 0.2,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-        pointRadius: 5,
-    },
-};
 // ============================================================================
 // Interaction style constants
 // ============================================================================
@@ -2559,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,
@@ -2578,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,
@@ -2623,7 +2470,6 @@ exports.MAP_CURSORS = MAP_CURSORS;
 exports.MAX_ZOOM = MAX_ZOOM;
 exports.MIN_ZOOM = MIN_ZOOM;
 exports.SAFE_AREA_DEFAULT_BUFFER_PX = SAFE_AREA_DEFAULT_BUFFER_PX;
-exports.SHAPE_STYLE_DEFAULTS = SHAPE_STYLE_DEFAULTS;
 exports.WORLD_BBOX = WORLD_BBOX;
 exports.allocSafeAreaDebugId = allocSafeAreaDebugId;
 exports.anchorFromBottomCenter = anchorFromBottomCenter;
@@ -2640,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;
@@ -2670,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).
@@ -2520,26 +2387,6 @@ const attachSafeAreaHoverListeners = (el, onEnter, onLeave, state) => {
     });
 };
 
-// TODO (next PR): shapeStyleDefaults computes visual defaults for shapes — a map consumer
-// concern, not an adapter concern. Make these injectable from react-map's createMapComponent
-// so adapters don't need to know about default visual styles.
-const SHAPE_STYLE_DEFAULTS = {
-    polygon: {
-        fillOpacity: 0.05,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    line: {
-        strokeWidth: 1,
-        strokeOpacity: 1,
-    },
-    point: {
-        fillOpacity: 0.2,
-        strokeWidth: 1,
-        strokeOpacity: 1,
-        pointRadius: 5,
-    },
-};
 // ============================================================================
 // Interaction style constants
 // ============================================================================
@@ -2602,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, SHAPE_STYLE_DEFAULTS, 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.12",
+  "version": "0.0.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/geo-json-utils": "1.14.32",
-    "@trackunit/ui-design-tokens": "1.13.30",
+    "@trackunit/react-map-color-utils": "0.0.2",
+    "@trackunit/geo-json-utils": "1.14.36",
+    "@trackunit/ui-design-tokens": "1.13.33",
     "es-toolkit": "^1.39.10",
     "zod": "^3.25.76"
   },

package/src/LayerPort.d.ts

@@ -1,5 +1,6 @@
 import type { GeoJsonBbox } from "@trackunit/geo-json-utils";
 import type { Entity } from "./interactionTypes";
+import type { ShapeStyleDefaults } from "./shapeStyleDefaults";
 import type { AdaptiveMarkerResolution, ClusterConfig, ClusterRenderConfig, ClusterRenderState, DomRenderState, GeoJsonFeatureCollection, GeoJsonGeometry, RenderConfig, RouteStyle, ShapeInteractiveMode, ShapeStyle } from "./layerApiTypes";
 type ReactNode = import("react").ReactNode;
 /**
@@ -231,6 +232,13 @@ export type LayerPort = Readonly<{
      * @returns Unsubscribe function.
      */
     onSourceReady: (configId: string, callback: () => void) => () => void;
+    /**
+     * Injects the per-shape-type visual defaults from the map consumer.
+     *
+     * Called by `createMapComponent` before any snapshot is sent, so adapters
+     * always receive the consumer-owned defaults rather than hard-coding them.
+     */
+    setShapeStyleDefaults: (defaults: ShapeStyleDefaults) => void;
     /**
      * Subscription for DOM-rendered individual markers (including adaptive DOM
      * features). `<Layers>` routes these descriptors to `markerRender`.

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/shapeStyleDefaults.d.ts

@@ -1,23 +1,31 @@
-import type { MapTheme } from "./primitiveMapTypes";
 import type { ShapeType } from "./interactionTypes";
 import type { ShapeStyle, ShapeStyleOverrides } from "./layerApiTypes";
-export declare const SHAPE_STYLE_DEFAULTS: {
-    readonly polygon: {
-        readonly fillOpacity: 0.05;
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-    };
-    readonly line: {
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-    };
-    readonly point: {
-        readonly fillOpacity: 0.2;
-        readonly strokeWidth: 1;
-        readonly strokeOpacity: 1;
-        readonly pointRadius: 5;
-    };
-};
+import type { MapTheme } from "./primitiveMapTypes";
+/**
+ * Per-shape-type visual defaults injected by the map consumer via `createMapComponent`.
+ * Adapters receive these via `LayerPort.setShapeStyleDefaults` rather than importing
+ * hardcoded values directly.
+ *
+ * Each shape type exposes the required numeric fields adapters use as fallbacks so
+ * TypeScript can infer non-nullable numbers without extra guards.
+ */
+export type ShapeStyleDefaults = Readonly<{
+    polygon: Readonly<{
+        fillOpacity: number;
+        strokeWidth: number;
+        strokeOpacity: number;
+    }>;
+    line: Readonly<{
+        strokeWidth: number;
+        strokeOpacity: number;
+    }>;
+    point: Readonly<{
+        fillOpacity: number;
+        strokeWidth: number;
+        strokeOpacity: number;
+        pointRadius: number;
+    }>;
+}>;
 /**
  * Resolve the visual style for a hovered shape.
  *

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;