@trackunit/react-map 0.1.6 → 0.1.13

package/index.cjs.js

@@ -672,6 +672,30 @@ const useLayerPort = () => {
     return react.useContext(MapLayerContext);
 };
 
+/**
+ * Default visual styles for each shape type.
+ *
+ * These are a map consumer concern — injected into the adapter via
+ * `createMapComponent` so adapters remain style-agnostic.
+ */
+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,
+    },
+};
+
 /**
  * CSS `max-height` of the Panel shell — `min(320px, 40vh)`.
  *
@@ -964,8 +988,6 @@ const MapLoadingState = ({ isLoading, error = false, className, style }) => {
         }, children: [isLoading ? jsxRuntime.jsx(reactComponents.Spinner, { "aria-label": t("map.loading"), centering: "centered", size: "large" }) : null, error ? (jsxRuntime.jsx("span", { role: "alert", children: jsxRuntime.jsx(reactComponents.Text, { italicize: true, subtle: true, weight: "thick", children: t("map.loadingErrorMessage") }) })) : null] }));
 };
 
-const SafeAreaLayoutContext = react.createContext(null);
-
 /** Build padding style that combines spacing with safe area insets. */
 const padWithInsets = (availableSpace, insets) => {
     const base = availableSpace === "constrained" ? "var(--spacing-2)" : "var(--spacing-4)";
@@ -975,6 +997,8 @@ const padWithInsets = (availableSpace, insets) => {
         : { padding: base };
 };
 
+const SafeAreaLayoutContext = react.createContext(null);
+
 /**
  * Renders the AnnotationStack when no external renderer (Controls) has
  * claimed annotation rendering. Subscribes to the store's renderer-claim
@@ -1081,7 +1105,10 @@ const SafeAreaOverlay = ({ safeAreaInsets, safeAreaContentRef, children }) => {
  *
  * @internal
  */
-const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, }) => {
+const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, shapeStyleDefaults = SHAPE_STYLE_DEFAULTS, }) => {
+    // Inject consumer-owned shape style defaults into the adapter's layer port so
+    // adapters don't need to hard-code visual defaults themselves.
+    adapter.layers?.setShapeStyleDefaults(shapeStyleDefaults);
     // Preview maps (no containerRefHolder) — Renderer fills a relative wrapper; readiness overlay lives here (SAGA-374).
     // No `min-h-[200px]` on this shell: thumbnails (e.g. AppearancePreview 72×96) must respect consumer `style` /
     // `className`. The full-map branch keeps the floor on the inner map cell / Mapbox container.
@@ -6470,8 +6497,8 @@ const useShapes = (options) => {
         const mapEntry = featureKey !== undefined ? featureStyles.get(featureKey) : undefined;
         const resolvedStyle = mapEntry ?? resolveStyleRef.current(feature);
         const strokeColor = resolvedStyle.stroke ?? "#000";
-        const pointRadius = mapEntry?.pointRadius ?? resolvedStyle.pointRadius ?? reactMapAdapterShared.SHAPE_STYLE_DEFAULTS.point.pointRadius;
-        const strokeWidth = mapEntry?.strokeWidth ?? resolvedStyle.strokeWidth ?? reactMapAdapterShared.SHAPE_STYLE_DEFAULTS.point.strokeWidth;
+        const pointRadius = mapEntry?.pointRadius ?? resolvedStyle.pointRadius ?? SHAPE_STYLE_DEFAULTS.point.pointRadius;
+        const strokeWidth = mapEntry?.strokeWidth ?? resolvedStyle.strokeWidth ?? SHAPE_STYLE_DEFAULTS.point.strokeWidth;
         const auto = buildMultiPartDecorations(feature, strokeColor, pointRadius, strokeWidth);
         return auto.length > 0 ? [...custom, ...auto] : custom;
     }, [skipAutoDecorations, featureStyles]);

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
-import { INITIAL_CAMERA_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, mapAppearanceSchema, DEFAULT_MAP_APPEARANCE, WORLD_BBOX, INITIAL_INTERACTION_STATE, darkenColor, lightenColor, mapThemeSchema, SHAPE_STYLE_DEFAULTS, extractSourceData, computeMarkerDomPortalZIndex, densifyGeodesicFeatures, angularDistance, intermediatePoint, GEODESIC_MAX_SEGMENT_KM, geometryTypeToShapeType, resolveStrokeColors } from '@trackunit/react-map-adapter-shared';
+import { INITIAL_CAMERA_STATE, INITIAL_MAP_STATUS, KEYBOARD_PAN_AMOUNT, KEYBOARD_ZOOM_AMOUNT, mapAppearanceSchema, DEFAULT_MAP_APPEARANCE, WORLD_BBOX, INITIAL_INTERACTION_STATE, darkenColor, lightenColor, mapThemeSchema, extractSourceData, computeMarkerDomPortalZIndex, densifyGeodesicFeatures, angularDistance, intermediatePoint, GEODESIC_MAX_SEGMENT_KM, geometryTypeToShapeType, resolveStrokeColors } from '@trackunit/react-map-adapter-shared';
 export { ANCHOR_SELECTOR, DEFAULT_MAP_APPEARANCE, HIT_SURFACE_SELECTOR, INITIAL_CAMERA_STATE, INITIAL_INTERACTION_STATE, INITIAL_MAP_STATE, INITIAL_MAP_STATUS, computeMarkerDomPortalZIndex, defineAdapter, geometryTypeToShapeType, mapAppearanceSchema, mapThemeSchema, mapTypeSchema } from '@trackunit/react-map-adapter-shared';
 import { useSyncExternalStore, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect, useReducer, createContext, useContext, memo, Suspense, useId, Fragment as Fragment$1, forwardRef } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -671,6 +671,30 @@ const useLayerPort = () => {
     return useContext(MapLayerContext);
 };
 
+/**
+ * Default visual styles for each shape type.
+ *
+ * These are a map consumer concern — injected into the adapter via
+ * `createMapComponent` so adapters remain style-agnostic.
+ */
+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,
+    },
+};
+
 /**
  * CSS `max-height` of the Panel shell — `min(320px, 40vh)`.
  *
@@ -963,8 +987,6 @@ const MapLoadingState = ({ isLoading, error = false, className, style }) => {
         }, children: [isLoading ? jsx(Spinner, { "aria-label": t("map.loading"), centering: "centered", size: "large" }) : null, error ? (jsx("span", { role: "alert", children: jsx(Text, { italicize: true, subtle: true, weight: "thick", children: t("map.loadingErrorMessage") }) })) : null] }));
 };
 
-const SafeAreaLayoutContext = createContext(null);
-
 /** Build padding style that combines spacing with safe area insets. */
 const padWithInsets = (availableSpace, insets) => {
     const base = availableSpace === "constrained" ? "var(--spacing-2)" : "var(--spacing-4)";
@@ -974,6 +996,8 @@ const padWithInsets = (availableSpace, insets) => {
         : { padding: base };
 };
 
+const SafeAreaLayoutContext = createContext(null);
+
 /**
  * Renders the AnnotationStack when no external renderer (Controls) has
  * claimed annotation rendering. Subscribes to the store's renderer-claim
@@ -1080,7 +1104,10 @@ const SafeAreaOverlay = ({ safeAreaInsets, safeAreaContentRef, children }) => {
  *
  * @internal
  */
-const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, }) => {
+const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, shapeStyleDefaults = SHAPE_STYLE_DEFAULTS, }) => {
+    // Inject consumer-owned shape style defaults into the adapter's layer port so
+    // adapters don't need to hard-code visual defaults themselves.
+    adapter.layers?.setShapeStyleDefaults(shapeStyleDefaults);
     // Preview maps (no containerRefHolder) — Renderer fills a relative wrapper; readiness overlay lives here (SAGA-374).
     // No `min-h-[200px]` on this shell: thumbnails (e.g. AppearancePreview 72×96) must respect consumer `style` /
     // `className`. The full-map branch keeps the floor on the inner map cell / Mapbox container.

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.1.6",
+  "version": "0.1.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.24",
-    "@trackunit/css-class-variance-utilities": "1.13.30",
-    "@trackunit/react-form-components": "2.1.25",
-    "@trackunit/react-core-hooks": "1.17.38",
-    "@trackunit/geo-json-utils": "1.14.32",
-    "@trackunit/i18n-library-translation": "2.0.26",
-    "@trackunit/react-modal": "2.1.26",
+    "@trackunit/react-components": "2.1.28",
+    "@trackunit/css-class-variance-utilities": "1.13.32",
+    "@trackunit/react-form-components": "2.1.29",
+    "@trackunit/react-core-hooks": "1.17.41",
+    "@trackunit/geo-json-utils": "1.14.35",
+    "@trackunit/i18n-library-translation": "2.0.29",
+    "@trackunit/react-modal": "2.1.30",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.12",
-    "@trackunit/ui-design-tokens": "1.13.30",
+    "@trackunit/react-map-adapter-shared": "0.0.16",
+    "@trackunit/ui-design-tokens": "1.13.32",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/core/createMapComponent.d.ts

@@ -1,4 +1,4 @@
-import type { AdapterInstance, AdapterRendererProps, SafeAreaInsets } from "@trackunit/react-map-adapter-shared";
+import type { AdapterInstance, AdapterRendererProps, SafeAreaInsets, ShapeStyleDefaults } from "@trackunit/react-map-adapter-shared";
 import { type ComponentType } from "react";
 import type { MapAnnotationStore } from "../annotations/mapAnnotations";
 import type { PanelStore } from "../panel/store/panels";
@@ -14,6 +14,16 @@ type CreateMapComponentConfig = Readonly<{
     loadingIndicatorStore?: MapLoadingIndicatorStore;
     panelStore?: PanelStore;
     safeAreaInsets?: SafeAreaInsets | null;
+    /**
+     * Per-shape-type visual defaults injected into the adapter's layer port.
+     * Defaults to `SHAPE_STYLE_DEFAULTS` from react-map. Override to customise
+     * adapter stroke/fill fallbacks across all adapters.
+     *
+     * Note: only affects adapter-level rendering fallbacks. React-side decoration
+     * geometry (e.g. multi-part "+" badge sizing in `useShapes`) continues to use
+     * the built-in `SHAPE_STYLE_DEFAULTS`.
+     */
+    shapeStyleDefaults?: ShapeStyleDefaults;
 }>;
 /**
  * Creates a named Map component for the given adapter.
@@ -28,5 +38,5 @@ type CreateMapComponentConfig = Readonly<{
  *
  * @internal
  */
-export declare const createMapComponent: ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, }: CreateMapComponentConfig) => ComponentType<MapComponentProps>;
+export declare const createMapComponent: ({ adapter, Renderer, adapterName, containerRefHolder, containerId, annotationStore, loadingIndicatorStore, panelStore, safeAreaInsets, shapeStyleDefaults, }: CreateMapComponentConfig) => ComponentType<MapComponentProps>;
 export {};

package/src/layers/__testHelpers.d.ts

@@ -10,6 +10,7 @@ export declare const VIEWPORT_BOUNDS: GeoJsonBbox;
 export declare const INTERIOR_ONLY_BOUNDS: GeoJsonBbox;
 export type MockLayerPort = LayerPort & {
     setSnapshot: Mock;
+    setShapeStyleDefaults: Mock;
     onEntityInteraction: Mock;
     onBackgroundClick: Mock;
     onSourceReady: Mock;

package/src/layers/internal/MapLayerContext.d.ts

@@ -12,6 +12,7 @@ export declare const MapLayerContext: import("react").Context<Readonly<{
     onEntityInteraction: (handler: import("@trackunit/react-map-adapter-shared").EntityInteractionHandler) => () => void;
     onBackgroundClick: (handler: () => void) => () => void;
     onSourceReady: (configId: string, callback: () => void) => () => void;
+    setShapeStyleDefaults: (defaults: import("@trackunit/react-map-adapter-shared").ShapeStyleDefaults) => void;
     markerPortals?: import("@trackunit/react-map-adapter-shared").DomPortalStore | null;
     clusterPortals?: import("@trackunit/react-map-adapter-shared").DomPortalStore | null;
 }> | null>;

package/src/layers/useShapes/shapeStyleDefaults.d.ts

@@ -0,0 +1,8 @@
+import type { ShapeStyleDefaults } from "@trackunit/react-map-adapter-shared";
+/**
+ * Default visual styles for each shape type.
+ *
+ * These are a map consumer concern — injected into the adapter via
+ * `createMapComponent` so adapters remain style-agnostic.
+ */
+export declare const SHAPE_STYLE_DEFAULTS: ShapeStyleDefaults;