@trackunit/react-map 0.1.22 → 0.1.24

package/index.cjs.js

@@ -3855,9 +3855,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 = cssClassVarianceUtilities.cvaMerge([
     "inline-flex",
@@ -3866,7 +3866,6 @@ const cvaMapMarker = cssClassVarianceUtilities.cvaMerge([
     "overflow-hidden",
     "select-none",
     "cursor-pointer",
-    "transition-all",
     "rounded-full",
     "outline-none",
     "focus-visible:ring-2",
@@ -3937,69 +3936,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { "data-testid": "MapMarker-disc", style: {
+                    display: "grid",
                     flexShrink: 0,
-                    justifyContent: "center",
-                    transition: slotTx,
-                    width: showDisc ? circleD : 0,
-                }, children: jsxRuntime.jsx("span", { className: cvaMarkerIndicator({ size: effectiveSize, theme }), style: {
-                        flexShrink: 0,
-                        opacity: showDisc ? 1 : 0,
-                        transform: showDisc ? "scale(1)" : "scale(0)",
-                        transition: slotTx,
-                    }, children: jsxRuntime.jsx(MarkerDiscContent, { directionDisplay: directionDisplay, dotPx: dotPx, icon: icon, iconPx: iconPx, isPill: isPill }) }) }), jsxRuntime.jsx("div", { style: {
+                    gridTemplateColumns: showDisc ? "1fr" : "0fr",
+                    overflow: "clip",
+                    transition: gridTx,
+                }, children: jsxRuntime.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: jsxRuntime.jsx("span", { className: cvaMarkerIndicator({ size: effectiveSize, theme }), style: {
+                            flexShrink: 0,
+                            opacity: showDisc ? 1 : 0,
+                            transform: showDisc ? "scale(1)" : "scale(0)",
+                            transition: contentTx,
+                        }, children: jsxRuntime.jsx(MarkerDiscContent, { directionDisplay: directionDisplay, dotPx: dotPx, icon: icon, iconPx: iconPx, isPill: isPill }) }) }) }), jsxRuntime.jsx("div", { style: {
                     display: "grid",
                     gridTemplateColumns: isPill ? "1fr" : "0fr",
                     overflowX: "clip",
-                    transition: `grid-template-columns ${duration}ms ${easing}`,
+                    transition: gridTx,
                 }, children: jsxRuntime.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 ? (jsxRuntime.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 }) }), jsxRuntime.jsx("span", { style: {
-                    alignItems: "center",
-                    display: "inline-flex",
+                        }, children: labelText })) : null }) }), jsxRuntime.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: jsxRuntime.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 ? (jsxRuntime.jsx(reactComponents.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: jsxRuntime.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 ? (jsxRuntime.jsx(reactComponents.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 === " ";
@@ -4139,6 +4160,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) => {
@@ -4161,7 +4185,7 @@ const resolveBubbleBackground = (state, config) => {
     return config.expandedBackground;
 };
 const ClusterMarkerInner = react.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);
@@ -4218,11 +4242,11 @@ const ClusterMarkerInner = react.forwardRef(function ClusterMarkerComponent(prop
             event.currentTarget.click();
         }
     }, [onKeyDown]);
-    const pieData = segments.map((segment, index) => ({
+    const pieData = react.useMemo(() => segments.map((segment, index) => ({
         color: segment.color,
         value: segment.weight,
         title: `segment-${index}`,
-    }));
+    })), [segments]);
     const bubbleTestId = dataTestId !== undefined ? `${dataTestId}-bubble` : undefined;
     return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, style: {
             position: "relative",
@@ -4387,6 +4411,9 @@ const MapMarkerInner = react.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
@@ -7598,7 +7625,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 = {
@@ -7637,7 +7664,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);
@@ -7743,8 +7770,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).
@@ -7771,30 +7801,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;
@@ -7931,14 +7998,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;
@@ -7951,7 +8017,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,
@@ -8103,20 +8171,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),
@@ -8457,6 +8529,8 @@ const findBestEdgePosition = ({ features, viewportBounds, zoom, minPixelWidth, l
     const [minLon, minLat, maxLon, maxLat] = viewportBounds;
     const edges = geoJsonUtils.extractEdges(features);
     const centroid = geoJsonUtils.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.
@@ -8465,8 +8539,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++) {
@@ -8484,8 +8558,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;
@@ -8501,8 +8575,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))
@@ -8639,7 +8713,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];
@@ -8709,7 +8783,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, reactMapAdapterShared.angularDistance(A[0], A[1], approxLng, approxLat) / delta));
             const geoAnchor = reactMapAdapterShared.intermediatePoint(A, B, tArc, delta);
             position = [geoAnchor[0], geoAnchor[1]];
@@ -8723,13 +8797,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, reactMapAdapterShared.angularDistance(A[0], A[1], approxCenterLng, approxCenterLat) / delta));
             const TANGENT_EPS = 0.001;
             const p0 = reactMapAdapterShared.intermediatePoint(A, B, Math.max(0, tArcCenter - TANGENT_EPS), delta);
             const p1 = reactMapAdapterShared.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);
@@ -8746,13 +8820,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;
     }
@@ -9411,26 +9485,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 = reactMapAdapterShared.geometryTypeToShapeType(geometry.type);
-                const strokeColors = reactMapAdapterShared.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 = [];
@@ -9452,6 +9523,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 = reactMapAdapterShared.geometryTypeToShapeType(geometry.type);
+                const strokeColors = reactMapAdapterShared.resolveStrokeColors(featureStyle, shapeType, theme);
                 const makeEntity = () => ({
                     type: "shape",
                     id: featureKey,
@@ -9745,7 +9830,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));
@@ -10073,7 +10158,6 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         }
     }, []);
     const recompute = react.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.
@@ -10100,12 +10184,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;
         }
@@ -10133,7 +10218,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,