@trackunit/react-map 0.1.22 → 0.1.24

package/index.esm.js

@@ -3854,9 +3854,9 @@ const resolveMarkerDomSize = (size, direction, form) => {
  * both states. The inner indicator disc (`cvaMarkerIndicator` below) carries
  * its own per-size `h-* w-*`; the outer surface sizes intrinsically around it.
  *
- * `transition-all` enables the morph; the duration and timing-function are
- * applied inline from `MARKER_TUNING.animation` so the spring config remains
- * the single source of truth (no stale `duration-200 ease-in-out` here).
+ * `transitionProperty` is set inline in `MapMarker.tsx` to list only the
+ * properties that need to animate, intentionally excluding `width` to prevent
+ * non-composited layout thrashing. See `MarkerAnimatedSurface.tsx` for details.
  */
 const cvaMapMarker = cvaMerge([
     "inline-flex",
@@ -3865,7 +3865,6 @@ const cvaMapMarker = cvaMerge([
     "overflow-hidden",
     "select-none",
     "cursor-pointer",
-    "transition-all",
     "rounded-full",
     "outline-none",
     "focus-visible:ring-2",
@@ -3936,69 +3935,91 @@ const MarkerDiscContent = ({ icon, iconPx, isPill, dotPx, directionDisplay, }) =
     return null;
 };
 
-// Single canonical morph transition shared by every slot inside the surface
-// (disc + direction). Keeping disc and direction in lock-step means they
-// always read as one synchronised motion rather than two independent fades.
-// Easing comes from the shared morph easing so the CSS-driven slots match
-// the spring's decelerating attack.
-const slotTransition = (duration, easing) => {
-    return `transform ${duration}ms ${easing}, opacity ${duration}ms ${easing}, width ${duration}ms ${easing}`;
-};
+/**
+ * Compositable per-slot transition — `transform` and `opacity` are GPU-composited
+ * and do not trigger layout (reflow).
+ *
+ * `width` was intentionally omitted: animating `width` is a non-composited operation
+ * that forces the browser to re-run layout on every animation frame. When many markers
+ * transition simultaneously (e.g. after a zoom-driven refetch) this caused ~29 concurrent
+ * non-composited width animations and a CLS score of 0.58. Space-collapse is now handled
+ * via `grid-template-columns: 0fr ↔ 1fr` on the slot wrapper divs, which produces the
+ * same visual result without blocking the compositor.
+ */
+const slotContentTransition = (duration, easing) => `transform ${duration}ms ${easing}, opacity ${duration}ms ${easing}`;
 const MarkerAnimatedSurface = ({ colors, directionDisplay, duration, effectiveSize, icon, iconPx, isPill, labelText, showDisc, textPx, theme, }) => {
-    const circleD = MARKER_SIZE_MAP[effectiveSize].circle;
     const dotPx = MARKER_SIZE_MAP[effectiveSize].dot;
     const easing = MARKER_TUNING.animation.morphEasing;
-    const slotTx = slotTransition(duration, easing);
+    const contentTx = slotContentTransition(duration, easing);
     const pillDirectionVisible = isPill && directionDisplay.show;
-    return (jsxs(Fragment, { children: [jsx("span", { "data-testid": "MapMarker-disc", style: {
-                    alignItems: "center",
-                    display: "inline-flex",
+    // grid-template-columns 0fr ↔ 1fr is the compositable-friendly space-collapse
+    // technique: the column animates its available-space fraction while overflow:clip
+    // hides the partially-visible content. This avoids animating `width` directly.
+    const gridTx = `grid-template-columns ${duration}ms ${easing}`;
+    return (jsxs(Fragment, { children: [jsx("div", { "data-testid": "MapMarker-disc", style: {
+                    display: "grid",
                     flexShrink: 0,
-                    justifyContent: "center",
-                    transition: slotTx,
-                    width: showDisc ? circleD : 0,
-                }, children: jsx("span", { className: cvaMarkerIndicator({ size: effectiveSize, theme }), style: {
-                        flexShrink: 0,
-                        opacity: showDisc ? 1 : 0,
-                        transform: showDisc ? "scale(1)" : "scale(0)",
-                        transition: slotTx,
-                    }, children: jsx(MarkerDiscContent, { directionDisplay: directionDisplay, dotPx: dotPx, icon: icon, iconPx: iconPx, isPill: isPill }) }) }), jsx("div", { style: {
+                    gridTemplateColumns: showDisc ? "1fr" : "0fr",
+                    overflow: "clip",
+                    transition: gridTx,
+                }, children: jsx("span", { style: {
+                        alignItems: "center",
+                        display: "inline-flex",
+                        justifyContent: "center",
+                        // Override the default `min-width: auto` on grid items so the `0fr`
+                        // track can collapse to zero width instead of the child's min-content.
+                        minWidth: 0,
+                    }, children: jsx("span", { className: cvaMarkerIndicator({ size: effectiveSize, theme }), style: {
+                            flexShrink: 0,
+                            opacity: showDisc ? 1 : 0,
+                            transform: showDisc ? "scale(1)" : "scale(0)",
+                            transition: contentTx,
+                        }, children: jsx(MarkerDiscContent, { directionDisplay: directionDisplay, dotPx: dotPx, icon: icon, iconPx: iconPx, isPill: isPill }) }) }) }), jsx("div", { style: {
                     display: "grid",
                     gridTemplateColumns: isPill ? "1fr" : "0fr",
                     overflowX: "clip",
-                    transition: `grid-template-columns ${duration}ms ${easing}`,
+                    transition: gridTx,
                 }, children: jsx("span", { style: {
                         alignItems: "center",
                         display: "flex",
+                        // Override the default `min-width: auto` on grid items so the `0fr`
+                        // track can collapse to zero width instead of the child's min-content.
+                        minWidth: 0,
                         overflow: "hidden",
                     }, children: labelText !== undefined ? (jsx("span", { className: cvaPillLabel(), style: {
                             fontSize: textPx > 0 ? `${textPx}px` : undefined,
                             maxWidth: MARKER_TUNING.pill.maxLabelWidthPx,
                             opacity: isPill ? 1 : 0,
                             transition: `opacity ${duration}ms ${easing}`,
-                        }, children: labelText })) : null }) }), jsx("span", { style: {
-                    alignItems: "center",
-                    display: "inline-flex",
+                        }, children: labelText })) : null }) }), jsx("div", { style: {
+                    display: "grid",
                     flexShrink: 0,
-                    justifyContent: "center",
-                    transition: slotTx,
-                    width: isPill ? directionDisplay.pixelSize : 0,
+                    gridTemplateColumns: isPill ? "1fr" : "0fr",
+                    overflow: "clip",
+                    transition: gridTx,
                 }, children: jsx("span", { style: {
                         alignItems: "center",
                         display: "inline-flex",
-                        flexShrink: 0,
                         justifyContent: "center",
-                        opacity: pillDirectionVisible ? 1 : 0,
-                        transform: pillDirectionVisible ? "scale(1)" : "scale(0)",
-                        transformOrigin: "center center",
-                        transition: slotTx,
-                    }, children: directionDisplay.show ? (jsx(Icon, { ariaHidden: true, "data-testid": "MapMarker-direction-pill", name: "GpsArrowNorth", size: "small", style: {
-                            color: colors.textColor,
+                        // Override the default `min-width: auto` on grid items so the `0fr`
+                        // track can collapse to zero width instead of the child's min-content.
+                        minWidth: 0,
+                    }, children: jsx("span", { style: {
+                            alignItems: "center",
+                            display: "inline-flex",
                             flexShrink: 0,
-                            height: directionDisplay.pixelSize,
-                            rotate: `${directionDisplay.rotationDegrees}deg`,
-                            width: directionDisplay.pixelSize,
-                        } })) : null }) })] }));
+                            justifyContent: "center",
+                            opacity: pillDirectionVisible ? 1 : 0,
+                            transform: pillDirectionVisible ? "scale(1)" : "scale(0)",
+                            transformOrigin: "center center",
+                            transition: contentTx,
+                        }, children: directionDisplay.show ? (jsx(Icon, { ariaHidden: true, "data-testid": "MapMarker-direction-pill", name: "GpsArrowNorth", size: "small", style: {
+                                color: colors.textColor,
+                                flexShrink: 0,
+                                height: directionDisplay.pixelSize,
+                                rotate: `${directionDisplay.rotationDegrees}deg`,
+                                width: directionDisplay.pixelSize,
+                            } })) : null }) }) })] }));
 };
 
 const isActivatingKey$2 = (key) => key === "Enter" || key === " ";
@@ -4138,6 +4159,9 @@ const STICK_FAN_RADIUS_PX = 56;
 /** Doughnut ring thickness as a percentage of the chart radius (matches the legacy cluster ring). */
 const PIE_LINE_WIDTH_PERCENT = 25;
 const PIE_START_ANGLE = -90;
+/** Stable empty sticks array — used as the default for the `sticks` prop so the useEffect
+ * dependency does not change on every render when no sticks are passed. */
+const EMPTY_STICKS = [];
 const isActivatingKey$1 = (key) => key === "Enter" || key === " ";
 /** Fan angle (radians) for a given index, starting at top (-π/2) and spread around a full circle. */
 const computeFanAngle = (index, total) => {
@@ -4160,7 +4184,7 @@ const resolveBubbleBackground = (state, config) => {
     return config.expandedBackground;
 };
 const ClusterMarkerInner = forwardRef(function ClusterMarkerComponent(props, ref) {
-    const { count, segments, sticks = [], onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
+    const { count, segments, sticks = EMPTY_STICKS, onStickClick, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, state = "default", theme, colorConfig, className, style, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const formatted = formatClusterCount(count);
     const effectiveColorConfig = { ...defaultMarkerColorConfig(theme), ...colorConfig };
     const colors = resolveMarkerColors("transparent", state, theme, colorConfig);
@@ -4217,11 +4241,11 @@ const ClusterMarkerInner = forwardRef(function ClusterMarkerComponent(props, ref
             event.currentTarget.click();
         }
     }, [onKeyDown]);
-    const pieData = segments.map((segment, index) => ({
+    const pieData = useMemo(() => segments.map((segment, index) => ({
         color: segment.color,
         value: segment.weight,
         title: `segment-${index}`,
-    }));
+    })), [segments]);
     const bubbleTestId = dataTestId !== undefined ? `${dataTestId}-bubble` : undefined;
     return (jsxs("div", { className: className, "data-testid": dataTestId, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: {
             position: "relative",
@@ -4386,6 +4410,9 @@ const MapMarkerInner = forwardRef(function MapMarkerComponent(props, ref) {
         gap: isPill ? MARKER_TUNING.pill.gapPx : 0,
         borderWidth: showPillBorder ? 1 : 0,
         borderStyle: "solid",
+        // Explicitly list only the properties that need to animate on the outer shell.
+        // `width` is intentionally excluded — see MarkerAnimatedSurface for details.
+        transitionProperty: "background-color, border-color, border-width, padding, gap, color",
         transitionDuration: `${morphDurationMs}ms`,
         transitionTimingFunction: MARKER_TUNING.animation.morphEasing,
         ...(isPill
@@ -7597,7 +7624,7 @@ const computePromotionGroupFills = (members, winnerId, restingPeerFills = new Ma
     return result;
 };
 const computeFillTiling = (input) => {
-    const { features, viewportBounds, resolveStackOrder, zoom, selectedFeatureId, suppressedFeatureIds, layerGeodesic, featureStyles, } = input;
+    const { features, viewportBounds, resolveStackOrder, selectedFeatureId, suppressedFeatureIds, layerGeodesic, featureStyles, } = input;
     // Densify before any polygon/boundary math so clip geometry follows great-circle
     // arcs on large polygons (mirrors the ADR-0024 precedent for edge labels).
     const featureCollection = {
@@ -7636,7 +7663,7 @@ const computeFillTiling = (input) => {
             featureToGroupKey.set(record.id, key);
         }
         // 1. Resting order: containment then smaller-area.
-        let order = resolveStackOrder(contended, { zoom });
+        let order = resolveStackOrder(contended);
         // 2. Selection override: selected feature always takes front (highest priority).
         if (selectedFeatureId !== null && selectedFeatureId !== undefined) {
             order = promoteToFront(order, selectedFeatureId);
@@ -7742,8 +7769,11 @@ const useViewportContext = (api) => {
 
 const FALLBACK_CHAR_WIDTH = 6;
 const FALLBACK_PADDING = 16;
+// px-2 from cvaShapeLabel: 8px left + 8px right = 16px total
+const LABEL_HORIZONTAL_PADDING_PX = 16;
 const labelWidthCache = new Map();
 let probeElement = null;
+let canvasCtx = null;
 /**
  * Character-count fallback for environments where DOM measurement is unavailable
  * (SSR, jsdom, headless tests).
@@ -7770,30 +7800,67 @@ const getProbeElement = () => {
     return el;
 };
 /**
- * Measure the rendered pixel width of label text using an off-screen probe
- * styled with the same CSS classes as shape edge labels (`cvaShapeLabel`).
+ * Returns a CanvasRenderingContext2D configured with the same font as ShapeLabelPill.
+ * The font is read once from the probe element's computed style so canvas measurements
+ * match the actual rendered text width. Returns null when canvas is unavailable.
+ *
+ * Canvas.measureText does not trigger a forced layout (reflow), unlike getBoundingClientRect.
+ */
+const getCanvasCtx = (probe) => {
+    if (canvasCtx !== null)
+        return canvasCtx;
+    if (typeof document === "undefined")
+        return null;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (ctx === null)
+        return null;
+    // Read the computed font from the probe element once. getComputedStyle forces
+    // a style recalculation (cheap) but NOT a full layout pass (no reflow).
+    const computed = window.getComputedStyle(probe);
+    // `font` shorthand: "font-style font-variant font-weight font-size/line-height font-family"
+    // Falls back to a safe approximation matching text-xs (12px) + font-medium (500).
+    const font = computed.font || "500 12px ui-sans-serif, system-ui, sans-serif";
+    ctx.font = font;
+    canvasCtx = ctx;
+    return ctx;
+};
+/**
+ * Measure the rendered pixel width of label text using a Canvas context configured
+ * with the same font as shape edge labels (`cvaShapeLabel` / `ShapeLabelPill`).
  *
- * Shape edge labels and other layout utilities that need a DOM-measured width use this.
+ * Results are cached per label text. Using Canvas.measureText avoids the forced
+ * synchronous layout (reflow) that getBoundingClientRect triggers when called inside
+ * a Google Maps onDraw callback — the previous implementation caused ~67ms of blocked
+ * main-thread time per draw cycle during zoom (observed in Chrome DevTools trace).
  *
- * Results are cached per label text. In environments where DOM measurement is
- * unavailable or returns zero (SSR, jsdom), falls back to a character-count
- * estimate (label.length * 6 + 16).
+ * Falls back to DOM measurement if canvas is unavailable, and to a character-count
+ * estimate in environments without DOM (SSR, jsdom).
  */
 const measureLabelWidth = (label) => {
     const cached = labelWidthCache.get(label);
     if (cached !== undefined)
         return cached;
     const probe = getProbeElement();
-    if (probe === null) {
-        const fallback = fallbackLabelWidth(label);
-        labelWidthCache.set(label, fallback);
-        return fallback;
-    }
-    probe.textContent = label;
-    const measured = probe.getBoundingClientRect().width;
-    const width = measured > 0 ? measured : fallbackLabelWidth(label);
-    labelWidthCache.set(label, width);
-    return width;
+    if (probe !== null) {
+        const ctx = getCanvasCtx(probe);
+        if (ctx !== null) {
+            const textWidth = ctx.measureText(label).width;
+            const canvasWidth = textWidth + LABEL_HORIZONTAL_PADDING_PX;
+            labelWidthCache.set(label, canvasWidth);
+            return canvasWidth;
+        }
+        // Canvas unavailable — fall back to DOM measurement (triggers reflow, but only
+        // for uncached labels and only when CanvasRenderingContext2D is missing).
+        probe.textContent = label;
+        const measured = probe.getBoundingClientRect().width;
+        const domWidth = measured > 0 ? measured : fallbackLabelWidth(label);
+        labelWidthCache.set(label, domWidth);
+        return domWidth;
+    }
+    const fallback = fallbackLabelWidth(label);
+    labelWidthCache.set(label, fallback);
+    return fallback;
 };
 
 const DEG_TO_RAD$1 = Math.PI / 180;
@@ -7930,14 +7997,13 @@ const isShapeMatch = (entity, handleId, featureKey) => {
     return shape.handleId === handleId && shape.id === featureKey;
 };
 /**
- * Build the per-feature, per-frame context passed to an `edge-auto` anchor's
- * `resolveLabel` callback. Pure: no React, no `api` reads — caller supplies the
- * already-projected viewport bits, the precomputed `shapesInViewport` count for
- * the layer, and the current interaction state.
+ * Build the per-feature, per-frame context passed to viewport-aware shape
+ * callbacks. Pure: no React, no `api` reads — caller supplies the already-
+ * projected viewport bits, the precomputed `shapesInViewport` count for the
+ * layer, a lazy overlap count, and the current interaction state.
  *
  * Lives next to `shapeLabelResolution.ts` and is consumed by
- * `useShapeDecorations` once per feature that has at least one `edge-auto`
- * decoration, before any placement work runs.
+ * `useShapeDecorations` once per feature, before any placement work runs.
  */
 const buildShapeLabelResolutionContext = (feature, args) => {
     const geometry = feature.geometry;
@@ -7950,7 +8016,9 @@ const buildShapeLabelResolutionContext = (feature, args) => {
     return {
         zoom: args.zoom,
         shapesInViewport: args.shapesInViewport,
-        overlappingShapesCount: args.overlappingShapesCount,
+        get overlappingShapesCount() {
+            return args.getOverlappingShapesCount();
+        },
         geometryType: geometry.type,
         bboxPixelWidth: dims.widthPx,
         bboxPixelHeight: dims.heightPx,
@@ -8102,20 +8170,24 @@ const clipSegmentToRect = (x0, y0, x1, y1, xMin, yMin, xMax, yMax) => {
     }
     return [x0 + tMin * dx, y0 + tMin * dy, x0 + tMax * dx, y0 + tMax * dy];
 };
-const lngLatToWebMercatorPx = (lng, lat, zoom, tileSize = 256) => {
-    const worldSize = tileSize * Math.pow(2, zoom);
+/**
+ * Inner implementations that accept a pre-computed worldSize.
+ * Used by findBestEdgePosition to avoid recomputing Math.pow(2, zoom) on
+ * every vertex when projecting dozens of geodesic sub-segments per frame.
+ */
+const lngLatToMercatorPxWS = (lng, lat, worldSize) => {
     const clampedLat = Math.max(-MAX_WEB_MERCATOR_LAT, Math.min(MAX_WEB_MERCATOR_LAT, lat));
     const x = ((lng + 180) / 360) * worldSize;
     const latRad = clampedLat * DEG_TO_RAD;
     const y = (0.5 - Math.log(Math.tan(Math.PI / 4 + latRad / 2)) / (2 * Math.PI)) * worldSize;
     return [x, y];
 };
-const webMercatorPxToLngLat = (px, py, zoom, tileSize = 256) => {
-    const worldSize = tileSize * Math.pow(2, zoom);
+const mercatorPxToLngLatWS = (px, py, worldSize) => {
     const lng = (px / worldSize) * 360 - 180;
     const lat = Math.atan(Math.sinh(Math.PI * (1 - (2 * py) / worldSize))) * RAD_TO_DEG$1;
     return [lng, lat];
 };
+const lngLatToWebMercatorPx = (lng, lat, zoom, tileSize = 256) => lngLatToMercatorPxWS(lng, lat, tileSize * Math.pow(2, zoom));
 /**
  * Determine which side of an edge the geometry interior lies on, in screen space.
  * Returns "above" if the label should extend above the edge (interior is below),
@@ -8456,6 +8528,8 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
     const [minLon, minLat, maxLon, maxLat] = viewportBounds;
     const edges = extractEdges(features);
     const centroid = computeGeometryCentroid(features);
+    // Pre-compute once so the projection helpers below don't call Math.pow on every vertex.
+    const worldSize = tileSize * Math.pow(2, zoom);
     const candidates = [];
     let nextCandidateId = 0;
     // Pre-compute pixel viewport bounds so we can clip in pixel space.
@@ -8464,8 +8538,8 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
     // edge — causing labels to float away from the line at mid-edge positions.
     // Clipping in pixel space ensures clip endpoints lie exactly on the
     // rendered edge, which fixes the floating at the midpoint of long edges.
-    const [pxViewMin, pyViewMin] = lngLatToWebMercatorPx(minLon, maxLat, zoom, tileSize);
-    const [pxViewMax, pyViewMax] = lngLatToWebMercatorPx(maxLon, minLat, zoom, tileSize);
+    const [pxViewMin, pyViewMin] = lngLatToMercatorPxWS(minLon, maxLat, worldSize);
+    const [pxViewMax, pyViewMax] = lngLatToMercatorPxWS(maxLon, minLat, worldSize);
     const viewportWidth = pxViewMax - pxViewMin;
     const viewportHeight = pyViewMax - pyViewMin;
     for (let edgeIdx = 0; edgeIdx < edges.length; edgeIdx++) {
@@ -8483,8 +8557,8 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
         const segmentClips = [];
         for (const segment of getPlacementSegments(edge[0], edge[1], geodesic)) {
             const { start, end } = segment;
-            const [startPxX, startPxY] = lngLatToWebMercatorPx(start[0], start[1], zoom, tileSize);
-            const [endPxX, endPxY] = lngLatToWebMercatorPx(end[0], end[1], zoom, tileSize);
+            const [startPxX, startPxY] = lngLatToMercatorPxWS(start[0], start[1], worldSize);
+            const [endPxX, endPxY] = lngLatToMercatorPxWS(end[0], end[1], worldSize);
             const clippedPx = clipSegmentToRect(startPxX, startPxY, endPxX, endPxY, pxViewMin, pyViewMin, pxViewMax, pyViewMax);
             if (!clippedPx)
                 continue;
@@ -8500,8 +8574,8 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
                 : [-rawDx / segPxLen, -rawDy / segPxLen];
             // Inverse-project pixel clip endpoints to geo for outward-side and
             // polygon-interior checks (qualitative, so approximately correct geo is fine).
-            const [ex0, ey0] = webMercatorPxToLngLat(px0, py0, zoom, tileSize);
-            const [ex1, ey1] = webMercatorPxToLngLat(px1, py1, zoom, tileSize);
+            const [ex0, ey0] = mercatorPxToLngLatWS(px0, py0, worldSize);
+            const [ex1, ey1] = mercatorPxToLngLatWS(px1, py1, worldSize);
             const midLat = (ey0 + ey1) / 2;
             const edgeOutwardSide = centroid !== null ? computeOutwardSide(ex0, ey0, ex1, ey1, centroid, midLat) : "above";
             if (isLabelInsidePolygon(ex0, ey0, ex1, ey1, features, centroid))
@@ -8638,7 +8712,7 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
         for (const matchingCandidate of candidates.filter(c => isSameEdge(previousEdgeIdentity, c.edge))) {
             if (matchingCandidate.pxLen <= 0)
                 continue;
-            const [prevAnchorAbsPx, prevAnchorAbsPy] = lngLatToWebMercatorPx(previousAnchorGeo[0], previousAnchorGeo[1], zoom, tileSize);
+            const [prevAnchorAbsPx, prevAnchorAbsPy] = lngLatToMercatorPxWS(previousAnchorGeo[0], previousAnchorGeo[1], worldSize);
             const prevAnchorRelX = prevAnchorAbsPx - pxViewMin;
             const prevAnchorRelY = prevAnchorAbsPy - pyViewMin;
             const dx = prevAnchorRelX - matchingCandidate.readingStartPx[0];
@@ -8708,7 +8782,7 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
             // great-circle arc by computing the arc fraction via angular distance
             // from A. This places the label physically on the visible curved arc
             // rather than on the straight Mercator chord.
-            const [approxLng, approxLat] = webMercatorPxToLngLat(anchorRelX + pxViewMin, anchorRelY + pyViewMin, zoom, tileSize);
+            const [approxLng, approxLat] = mercatorPxToLngLatWS(anchorRelX + pxViewMin, anchorRelY + pyViewMin, worldSize);
             const tArc = Math.max(0, Math.min(1, angularDistance(A[0], A[1], approxLng, approxLat) / delta));
             const geoAnchor = intermediatePoint(A, B, tArc, delta);
             position = [geoAnchor[0], geoAnchor[1]];
@@ -8722,13 +8796,13 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
             const centerOffsetFactor = resolvedAnchor === "left" ? 1 : resolvedAnchor === "right" ? -1 : 0;
             const centerRelX = anchorRelX + centerOffsetFactor * halfLabelPx * best.directionPx[0];
             const centerRelY = anchorRelY + centerOffsetFactor * halfLabelPx * best.directionPx[1];
-            const [approxCenterLng, approxCenterLat] = webMercatorPxToLngLat(centerRelX + pxViewMin, centerRelY + pyViewMin, zoom, tileSize);
+            const [approxCenterLng, approxCenterLat] = mercatorPxToLngLatWS(centerRelX + pxViewMin, centerRelY + pyViewMin, worldSize);
             const tArcCenter = Math.max(0, Math.min(1, angularDistance(A[0], A[1], approxCenterLng, approxCenterLat) / delta));
             const TANGENT_EPS = 0.001;
             const p0 = intermediatePoint(A, B, Math.max(0, tArcCenter - TANGENT_EPS), delta);
             const p1 = intermediatePoint(A, B, Math.min(1, tArcCenter + TANGENT_EPS), delta);
-            const [bx, by] = lngLatToWebMercatorPx(p0[0], p0[1], zoom, tileSize);
-            const [ax, ay] = lngLatToWebMercatorPx(p1[0], p1[1], zoom, tileSize);
+            const [bx, by] = lngLatToMercatorPxWS(p0[0], p0[1], worldSize);
+            const [ax, ay] = lngLatToMercatorPxWS(p1[0], p1[1], worldSize);
             const ddx = ax - bx;
             const ddy = ay - by;
             const tangentLen = Math.sqrt(ddx * ddx + ddy * ddy);
@@ -8745,13 +8819,13 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
         }
         else {
             // Co-located vertices — fall back to Mercator straight-line.
-            const [anchorLng, anchorLat] = webMercatorPxToLngLat(anchorRelX + pxViewMin, anchorRelY + pyViewMin, zoom, tileSize);
+            const [anchorLng, anchorLat] = mercatorPxToLngLatWS(anchorRelX + pxViewMin, anchorRelY + pyViewMin, worldSize);
             position = [anchorLng, anchorLat];
             resolvedDirectionPx = best.directionPx;
         }
     }
     else {
-        const [anchorLng, anchorLat] = webMercatorPxToLngLat(anchorRelX + pxViewMin, anchorRelY + pyViewMin, zoom, tileSize);
+        const [anchorLng, anchorLat] = mercatorPxToLngLatWS(anchorRelX + pxViewMin, anchorRelY + pyViewMin, worldSize);
         position = [anchorLng, anchorLat];
         resolvedDirectionPx = best.directionPx;
     }
@@ -9410,26 +9484,23 @@ const useShapeDecorations = ({ onDecorationsChange, onStyleOverridesChange, api,
                 }
                 return shapesInViewportCache;
             };
-            const overlappingCounts = buildOverlappingShapesCountMap(handle.features.features, featureBboxes, bounds);
+            // overlappingShapesCount is exposed to viewport-aware callbacks. Keep the
+            // O(n²) overlap computation behind the context property getter so handles
+            // that never read it pay nothing.
+            let overlappingCountsCache = null;
+            const getOverlappingCount = (feature) => {
+                if (overlappingCountsCache === null) {
+                    overlappingCountsCache = buildOverlappingShapesCountMap(handle.features.features, featureBboxes, bounds);
+                }
+                return overlappingCountsCache.get(feature) ?? 0;
+            };
             handle.features.features.forEach((feature, index) => {
                 const geometry = feature.geometry;
                 if (geometry === null || geometry.type === "GeometryCollection")
                     return;
                 const featureKey = feature.id !== undefined ? String(feature.id) : String(index);
-                const resolutionContext = buildShapeLabelResolutionContext(feature, {
-                    handleId: handle.id,
-                    featureKey,
-                    viewportBounds: bounds,
-                    zoom,
-                    tileSize,
-                    shapesInViewport: shapesInViewport(),
-                    overlappingShapesCount: overlappingCounts.get(feature) ?? 0,
-                    interaction: currentInteraction,
-                });
-                const featureStyle = resolutionContext === null ? handle.resolveStyle(feature) : handle.resolveStyle(feature, resolutionContext);
-                handleStyleOverrides.set(featureKey, featureStyle);
-                const shapeType = geometryTypeToShapeType(geometry.type);
-                const strokeColors = resolveStrokeColors(featureStyle, shapeType, theme);
+                // Partition decorations before building the resolution context so we
+                // can gate the overlap computation on edge-auto presence.
                 const decorations = handle.getDecorations(feature);
                 const resolvedStatic = [];
                 const vertexAutoDecorations = [];
@@ -9451,6 +9522,20 @@ const useShapeDecorations = ({ onDecorationsChange, onStyleOverridesChange, api,
                         }
                     }
                 }
+                const resolutionContext = buildShapeLabelResolutionContext(feature, {
+                    handleId: handle.id,
+                    featureKey,
+                    viewportBounds: bounds,
+                    zoom,
+                    tileSize,
+                    shapesInViewport: shapesInViewport(),
+                    getOverlappingShapesCount: () => getOverlappingCount(feature),
+                    interaction: currentInteraction,
+                });
+                const featureStyle = resolutionContext === null ? handle.resolveStyle(feature) : handle.resolveStyle(feature, resolutionContext);
+                handleStyleOverrides.set(featureKey, featureStyle);
+                const shapeType = geometryTypeToShapeType(geometry.type);
+                const strokeColors = resolveStrokeColors(featureStyle, shapeType, theme);
                 const makeEntity = () => ({
                     type: "shape",
                     id: featureKey,
@@ -9744,7 +9829,7 @@ const featureId = (shape) => String(shape.feature.id);
  * 2. **Smaller area on top** — stable tiebreak; inner shapes are typically
  *    smaller, so this reinforces containment and keeps nested sites visible.
  */
-const defaultShapeStackOrder = (contended, _ctx) => {
+const defaultShapeStackOrder = contended => {
     const idOf = new Map();
     for (const shape of contended) {
         idOf.set(shape, featureId(shape));
@@ -10072,7 +10157,6 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         }
     }, []);
     const recompute = useCallback(() => {
-        const currentViewport = viewportRef.current;
         const currentHandles = tilingHandlesRef.current;
         // Stable suppressed-key: per-handle sorted ids so suppression changes are
         // not deduped away by the inputKey guard.
@@ -10099,12 +10183,13 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             return `${handle.id}:${String(layerFlag)}:${featureFlags}`;
         })
             .join(";");
-        // Bounds are intentionally excluded from the inputKey. Clip geometry depends on
-        // zoom (which affects stack order via resolveStackOrder) and feature geometry —
-        // not on the visible viewport region. Using global bounds means all overlapping
-        // features always have pre-computed clips, so polygons entering the viewport
-        // during zoom-out never flash their unclipped fill.
-        const inputKey = `${tilingContentKeyRef.current}|${currentViewport.zoom}|${selectedFeatureIdRef.current ?? ""}|${suppressedKey}|${geodesicKey}`;
+        // Bounds are intentionally excluded from the inputKey: clips use global bounds so
+        // all overlapping features always have pre-computed clips, and polygons entering
+        // the viewport during zoom-out never flash their unclipped fill.
+        // Zoom is intentionally excluded too: fill-tiling stack order is zoom-invariant
+        // by contract, so zooming can reuse the same resting clips and avoid a full
+        // polygon-clipping pass for an identical result.
+        const inputKey = `${tilingContentKeyRef.current}|${selectedFeatureIdRef.current ?? ""}|${suppressedKey}|${geodesicKey}`;
         if (inputKey === lastComputeInputKeyRef.current) {
             return;
         }
@@ -10132,7 +10217,6 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                 features: handle.features.features,
                 viewportBounds: GLOBAL_BOUNDS,
                 resolveStackOrder: handle.overlap?.resolveStackOrder ?? defaultShapeStackOrder,
-                zoom: currentViewport.zoom,
                 selectedFeatureId: selectedFeatureIdRef.current,
                 suppressedFeatureIds: suppressedFillIdsByHandleRef.current?.get(handle.id),
                 layerGeodesic: handle.style.geodesic,

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.33",
-    "@trackunit/css-class-variance-utilities": "1.13.37",
-    "@trackunit/react-form-components": "2.1.35",
-    "@trackunit/react-core-hooks": "1.17.46",
-    "@trackunit/geo-json-utils": "1.14.40",
-    "@trackunit/i18n-library-translation": "2.0.34",
-    "@trackunit/react-modal": "2.1.36",
+    "@trackunit/react-components": "2.1.35",
+    "@trackunit/css-class-variance-utilities": "1.13.39",
+    "@trackunit/react-form-components": "2.1.37",
+    "@trackunit/react-core-hooks": "1.17.48",
+    "@trackunit/geo-json-utils": "1.14.42",
+    "@trackunit/i18n-library-translation": "2.0.36",
+    "@trackunit/react-modal": "2.1.38",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.21",
-    "@trackunit/react-map-color-utils": "0.0.6",
-    "@trackunit/ui-design-tokens": "1.13.37",
+    "@trackunit/react-map-adapter-shared": "0.0.23",
+    "@trackunit/react-map-color-utils": "0.0.8",
+    "@trackunit/ui-design-tokens": "1.13.39",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",

package/src/index.d.ts

@@ -46,7 +46,7 @@ export { type AutoPanContext, type AutoPanResult } from "./panel/utils/autoPan";
 export type { DecorationAnchor, EdgeSide, ShapeDecoration } from "./layers/useShapes/shapeDecorations";
 export { type AnnotationContext, type ShapeLabelPolicy } from "./layers/useShapes/shapeLabelPolicy";
 export type { ResolveShapeLabel, ShapeLabelResolution, ShapeLabelResolutionContext, } from "./layers/useShapes/shapeLabelResolution";
-export { type ContendedShape, type ResolveShapeStackOrder, type ShapeStackContext, } from "./layers/useShapes/shapeStackOrder";
+export { type ContendedShape, type ResolveShapeStackOrder } from "./layers/useShapes/shapeStackOrder";
 export { useImageOverlay, type UseImageOverlayOptions, type UseImageOverlayReturn, } from "./layers/image-overlay/useImageOverlay";
 export { buildExpandedIds, useExpandedIds, type MapFocus, type MapFocusTier, type MapFocusTierDisplay, } from "./layers/mapFocus";
 export { useRoute, type UseRouteOptions, type UseRouteReturn } from "./layers/routes/useRoute";

package/src/layers/shared/measureLabelWidth.d.ts

@@ -1,11 +1,13 @@
 /**
- * Measure the rendered pixel width of label text using an off-screen probe
- * styled with the same CSS classes as shape edge labels (`cvaShapeLabel`).
+ * Measure the rendered pixel width of label text using a Canvas context configured
+ * with the same font as shape edge labels (`cvaShapeLabel` / `ShapeLabelPill`).
  *
- * Shape edge labels and other layout utilities that need a DOM-measured width use this.
+ * Results are cached per label text. Using Canvas.measureText avoids the forced
+ * synchronous layout (reflow) that getBoundingClientRect triggers when called inside
+ * a Google Maps onDraw callback — the previous implementation caused ~67ms of blocked
+ * main-thread time per draw cycle during zoom (observed in Chrome DevTools trace).
  *
- * Results are cached per label text. In environments where DOM measurement is
- * unavailable or returns zero (SSR, jsdom), falls back to a character-count
- * estimate (label.length * 6 + 16).
+ * Falls back to DOM measurement if canvas is unavailable, and to a character-count
+ * estimate in environments without DOM (SSR, jsdom).
  */
 export declare const measureLabelWidth: (label: string) => number;