@trackunit/react-map 0.1.22 → 0.1.25

package/index.esm.js

@@ -15,7 +15,7 @@ import { useModal, Modal as Modal$1, ModalHeader, ModalBody } from '@trackunit/r
 import { z } from 'zod';
 import { PieChart } from 'react-minimal-pie-chart';
 import { tailwindPalette } from '@trackunit/ui-design-tokens';
-import { validateBboxWithFallback, extractPositionsFromGeometry, geoJsonPositionSchema, validateFeatureCollection, EMPTY_FEATURE_COLLECTION, validateBbox, projectPolygonalToWebMercator, geoJsonPolygonDifference, unprojectPolygonalFromWebMercator, distanceToGeoJsonPolygonBoundary, getGeoJsonPolygonIntersection, isFullyContainedInGeoJsonGeometry, isGeoJsonPointInPolygon, isBboxInsideFeatureCollection, extractEdges, computeGeometryCentroid, isPositionInsideRing, edgePixelLength } from '@trackunit/geo-json-utils';
+import { lngLatToMercatorPxWS, validateBboxWithFallback, extractPositionsFromGeometry, geoJsonPositionSchema, validateFeatureCollection, EMPTY_FEATURE_COLLECTION, validateBbox, projectPolygonalToWebMercator, geoJsonPolygonDifference, unprojectPolygonalFromWebMercator, distanceToGeoJsonPolygonBoundary, getGeoJsonPolygonIntersection, isFullyContainedInGeoJsonGeometry, isGeoJsonPointInPolygon, isBboxInsideFeatureCollection, extractEdges, computeGeometryCentroid, mercatorPxToLngLatWS, isPositionInsideRing, lngLatToWebMercatorPx, edgePixelLength } from '@trackunit/geo-json-utils';
 import { darkenColor, lightenColor } from '@trackunit/react-map-color-utils';
 
 var defaultTranslations = {
@@ -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
@@ -4442,6 +4469,122 @@ function MapMarkerIcon({ name, size, title }) {
         }, title: title, children: jsx(Icon, { ariaHidden: true, name: name, size: "small" }) }));
 }
 
+const EMPTY_SET = new Set();
+/**
+ * Order-sensitive equality. The returned Set keeps a stable reference only when
+ * both membership AND nearest-first ordering are identical. A nearest-first swap
+ * within the same id set produces a new reference so consumers that cap to the
+ * N closest via iteration order see the updated ranking.
+ */
+const sameNearby = (a, b) => {
+    if (a === b)
+        return true;
+    if (a.size !== b.size)
+        return false;
+    const ai = a.values();
+    const bi = b.values();
+    for (let i = 0; i < a.size; i++) {
+        if (ai.next().value !== bi.next().value)
+            return false;
+    }
+    return true;
+};
+const computeNearby = (cursor, entities, zoom, tileSize, radiusPx) => {
+    if (entities.length === 0)
+        return EMPTY_SET;
+    // Project once per recompute: worldSize is constant for all entities at this
+    // camera, so hoist Math.pow(2, zoom) out of the per-entity loop.
+    const worldSize = tileSize * Math.pow(2, zoom);
+    const [cursorPx, cursorPy] = lngLatToMercatorPxWS(cursor[0], cursor[1], worldSize);
+    const radiusSq = radiusPx * radiusPx;
+    const hits = [];
+    for (const entity of entities) {
+        const [px, py] = lngLatToMercatorPxWS(entity.position[0], entity.position[1], worldSize);
+        const dx = px - cursorPx;
+        const dy = py - cursorPy;
+        // Shortest-path x-distance across the antimeridian: a cursor at 179.99° and
+        // an entity at −179.99° are ~0.02° apart on screen but raw Mercator dx is
+        // nearly worldSize. Taking min(|dx|, worldSize−|dx|) collapses that gap.
+        const absDx = Math.abs(dx);
+        const wrappedDx = Math.min(absDx, worldSize - absDx);
+        const distSq = wrappedDx * wrappedDx + dy * dy;
+        if (distSq <= radiusSq)
+            hits.push({ id: entity.id, distSq });
+    }
+    if (hits.length === 0)
+        return EMPTY_SET;
+    // Nearest-first so a consumer can cap to the N closest by iteration order.
+    hits.sort((a, b) => a.distSq - b.distSq);
+    return new Set(hits.map(hit => hit.id));
+};
+/**
+ * Reference/value equality for the recompute inputs. `entities` is compared by
+ * reference (the caller memoises it), keeping the per-render change check O(1)
+ * rather than deep-comparing the whole marker array on every frame.
+ */
+const sameInputs = (a, b) => a.entities === b.entities && a.zoom === b.zoom && a.tileSize === b.tileSize && a.radiusPx === b.radiusPx;
+/**
+ * The **Entities Near Cursor** primitive: returns a referentially-stable
+ * `ReadonlySet<string>` of entity ids whose projected position is within
+ * `radiusPx` CSS pixels of the projected cursor, nearest-first.
+ *
+ * It is the point-marker counterpart to **Shapes Under Cursor** and runs on the
+ * same pure Web Mercator substrate (`@trackunit/geo-json-utils`) fed by
+ * `useCameraState` + the RAF-throttled `pointermove` event — adapter-agnostic by
+ * construction (see ADR-0025). The hook owns radius geometry only; consumers
+ * decide why the ids are wanted (preload, highlight, …) and may cap the set to
+ * the nearest N via iteration order.
+ *
+ * The returned Set keeps a stable identity until either its membership or its
+ * nearest-first ordering changes, so wiring it straight into a memo or query
+ * does not churn while the cursor drifts within the same cluster of dots at the
+ * same relative distances. The host only re-renders when membership or ordering
+ * actually changes: the cursor lives in a ref and recomputes commit through an
+ * order-sensitive functional update that bails out (returns the previous Set)
+ * when nothing changed.
+ */
+const useEntitiesNearCursor = (api, options) => {
+    const { entities, radiusPx } = options;
+    const { zoom } = useCameraState(api);
+    const { tileSize } = api.state;
+    const [nearby, setNearby] = useState(EMPTY_SET);
+    // Latest cursor position and recompute inputs, read by the stable subscription
+    // and recompute without re-subscribing. Written only in effects / event
+    // handlers — never during render.
+    const cursorRef = useRef(null);
+    const inputsRef = useRef({ entities, zoom, tileSize, radiusPx });
+    const recompute = useCallback(() => {
+        const cursor = cursorRef.current;
+        const current = inputsRef.current;
+        const next = cursor === null
+            ? EMPTY_SET
+            : computeNearby(cursor, current.entities, current.zoom, current.tileSize, current.radiusPx);
+        // Membership-gated functional update: return the previous reference when the
+        // id set is unchanged so React bails out of the re-render and the output
+        // identity stays stable across cursor drift within the same cluster.
+        setNearby(prev => (sameNearby(prev, next) ? prev : next));
+    }, []);
+    // Keep the recompute inputs fresh and recompute when the camera, entities, or
+    // radius change while the cursor stays put (e.g. zooming under a stationary
+    // pointer brings new dots into radius). `useWatch` owns the effect, so this
+    // file never calls setState synchronously inside its own effect.
+    useWatch({
+        value: { entities, zoom, tileSize, radiusPx },
+        immediate: true,
+        isEqual: sameInputs,
+        onChange: latest => {
+            inputsRef.current = latest;
+            recompute();
+        },
+    });
+    // Track the cursor and recompute on each throttled move.
+    useEffect(() => api.on("pointermove", event => {
+        cursorRef.current = event.position;
+        recompute();
+    }), [api, recompute]);
+    return nearby;
+};
+
 const DEFAULT_DEBOUNCE_MS = 150;
 /**
  * Fires `onShouldPreload` for the currently hovered entity after a debounce
@@ -7597,7 +7740,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 +7779,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 +7885,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 +7916,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.
  *
- * Shape edge labels and other layout utilities that need a DOM-measured width use this.
+ * 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`).
+ *
+ * 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 +8113,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 +8132,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,
@@ -8042,7 +8226,6 @@ const DEG_TO_RAD = Math.PI / 180;
 const RAD_TO_DEG$1 = 180 / Math.PI;
 const DEFAULT_EDGE_LABEL_INSET_PX = 6;
 const LABEL_HEIGHT_PX = 20;
-const MAX_WEB_MERCATOR_LAT = 85.05112878;
 const EARTH_RADIUS_KM = 6371;
 const GEODESIC_PLACEMENT_MAX_SEGMENT_RAD = GEODESIC_MAX_SEGMENT_KM / EARTH_RADIUS_KM;
 /**
@@ -8102,20 +8285,6 @@ 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);
-    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 lng = (px / worldSize) * 360 - 180;
-    const lat = Math.atan(Math.sinh(Math.PI * (1 - (2 * py) / worldSize))) * RAD_TO_DEG$1;
-    return [lng, lat];
-};
 /**
  * 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 +8625,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 +8635,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 +8654,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 +8671,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 +8809,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 +8879,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 +8893,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 +8916,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 +9581,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 +9619,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 +9926,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 +10254,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 +10280,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 +10314,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,
@@ -11505,4 +11686,4 @@ const mockMapApi = (overrides) => {
  */
 setupLibraryTranslations();
 
-export { ClusterMarker, ClusterStick, Controls, DEFAULT_MARKER_SIZE_BREAKPOINTS, DefaultControls, Layers, MARKER_DARK_PILL, MARKER_DISC_BORDER_WIDTH_PX, MARKER_LIGHT_PILL, MARKER_PILL_CONTENT_LAYOUT_SIZE, MARKER_SIZE_MAP, MARKER_TUNING, MapLoadingState, MapMarker, MapMarkerIcon, ShapeAnnotationLabel, buildExpandedIds, cvaMapMarker, cvaMarkerIndicator, mockMapApi, useAdaptiveMarkerHelpers, useAutoPanResolver, useCameraIdle, useCameraState, useClusterCountFormat, useControlStack, useControls, useDefaultControls, useDirectionIndicator, useExpandedIds, useFitFeatureBounds, useFitToContent, useImageOverlay, useLayers, useMap, useMapAnnotation, useMapAnnotations, useMapAppearanceControls, useMapKeyboardNavigation, useMarkerColors, useMarkerStateResolvers, useMarkers, usePanel, usePanelPreload, usePreviewMap, useRoute, useShapeLabelHelpers, useShapes, useViewportContext };
+export { ClusterMarker, ClusterStick, Controls, DEFAULT_MARKER_SIZE_BREAKPOINTS, DefaultControls, Layers, MARKER_DARK_PILL, MARKER_DISC_BORDER_WIDTH_PX, MARKER_LIGHT_PILL, MARKER_PILL_CONTENT_LAYOUT_SIZE, MARKER_SIZE_MAP, MARKER_TUNING, MapLoadingState, MapMarker, MapMarkerIcon, ShapeAnnotationLabel, buildExpandedIds, cvaMapMarker, cvaMarkerIndicator, mockMapApi, useAdaptiveMarkerHelpers, useAutoPanResolver, useCameraIdle, useCameraState, useClusterCountFormat, useControlStack, useControls, useDefaultControls, useDirectionIndicator, useEntitiesNearCursor, useExpandedIds, useFitFeatureBounds, useFitToContent, useImageOverlay, useLayers, useMap, useMapAnnotation, useMapAnnotations, useMapAppearanceControls, useMapKeyboardNavigation, useMarkerColors, useMarkerStateResolvers, useMarkers, usePanel, usePanelPreload, usePreviewMap, useRoute, useShapeLabelHelpers, useShapes, useViewportContext };