@trackunit/react-map 0.1.50 → 0.1.51

package/index.cjs.js

@@ -818,7 +818,7 @@ const PANEL_SCROLL_INTERNAL_CLASS_NAME = "flex flex-1 min-h-0 flex-col overflow-
  *
  * @internal
  */
-const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel = "Close", onCommit, containerEl = null, "aria-label": ariaLabel, contentScroll = "shell", children, }) => {
+const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel = "Close", onCommit, containerEl = null, mapMoveSource, "aria-label": ariaLabel, contentScroll = "shell", children, }) => {
     const scrollSlotClassName = contentScroll === "internal" ? PANEL_SCROLL_INTERNAL_CLASS_NAME : PANEL_SCROLL_SHELL_CLASS_NAME;
     const shellRef = react.useRef(null);
     const scrollRef = react.useRef(null);
@@ -876,7 +876,7 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
         react$1.shift({ padding: 8, ...(containerEl !== null ? { boundary: containerEl } : {}) }),
         react$1.hide(),
     ], [containerEl]);
-    const { context, floatingStyles, middlewareData, placement: resolvedPlacement, elements, refs: { setFloating }, } = react$1.useFloating({
+    const { context, floatingStyles, middlewareData, placement: resolvedPlacement, elements, refs: { setFloating }, update, } = react$1.useFloating({
         open: effectiveAnchor !== null,
         onOpenChange: nextOpen => {
             if (!nextOpen)
@@ -886,8 +886,38 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
         strategy: "absolute",
         middleware,
         elements: { reference: effectiveAnchor },
-        whileElementsMounted: (reference, floating, autoUpdateFn) => react$1.autoUpdate(reference, floating, autoUpdateFn, { animationFrame: true }),
+        whileElementsMounted: (reference, floating, autoUpdateFn) => react$1.autoUpdate(reference, floating, autoUpdateFn),
     });
+    // Reposition while the map pans/zooms: anchors move without scroll/resize events.
+    react.useEffect(() => {
+        if (mapMoveSource === undefined || effectiveAnchor === null)
+            return;
+        let rafId = null;
+        const loop = () => {
+            update();
+            rafId = requestAnimationFrame(loop);
+        };
+        const stopLoop = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        const offMoveStart = mapMoveSource.on("movestart", () => {
+            if (rafId === null) {
+                rafId = requestAnimationFrame(loop);
+            }
+        });
+        const offMoveEnd = mapMoveSource.on("moveend", () => {
+            stopLoop();
+            update();
+        });
+        return () => {
+            offMoveStart();
+            offMoveEnd();
+            stopLoop();
+        };
+    }, [effectiveAnchor, mapMoveSource, update]);
     // Hide until the first placement commit so there is no flash at (0,0).
     const isCommitted = middlewareData.hide !== undefined;
     // Do NOT re-enable outsidePress here (neither `true` nor `outsidePressEvent: "click"`).
@@ -950,13 +980,13 @@ const sortByPriority = (descriptors) => {
  *
  * @internal
  */
-const PanelOrchestrator = ({ store, containerEl, anchoredPortalEl }) => {
+const PanelOrchestrator = ({ store, containerEl, mapMoveSource, anchoredPortalEl }) => {
     const descriptors = react.useSyncExternalStore(store.subscribe, store.getSnapshot);
     const sortedDescriptors = react.useMemo(() => sortByPriority(descriptors), [descriptors]);
     if (sortedDescriptors.length === 0) {
         return null;
     }
-    const anchoredContent = sortedDescriptors.map(descriptor => (jsxRuntime.jsx(Panel, { anchor: descriptor.anchor, "aria-label": descriptor["aria-label"], closeLabel: descriptor.closeLabel, containerEl: containerEl, contentScroll: descriptor.contentScroll, onCommit: descriptor.onCommit, onDismiss: descriptor.onDismiss, placement: descriptor.placement, children: descriptor.children }, descriptor.id)));
+    const anchoredContent = sortedDescriptors.map(descriptor => (jsxRuntime.jsx(Panel, { anchor: descriptor.anchor, "aria-label": descriptor["aria-label"], closeLabel: descriptor.closeLabel, containerEl: containerEl, contentScroll: descriptor.contentScroll, mapMoveSource: mapMoveSource, onCommit: descriptor.onCommit, onDismiss: descriptor.onDismiss, placement: descriptor.placement, children: descriptor.children }, descriptor.id)));
     return anchoredPortalEl !== null && anchoredPortalEl !== undefined ? (reactDom.createPortal(anchoredContent, anchoredPortalEl)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: anchoredContent }));
 };
 PanelOrchestrator.displayName = "PanelOrchestrator";
@@ -1144,11 +1174,12 @@ const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder
             availableSpace,
             responsiveMode,
         }), [availableSpace, responsiveMode]);
+        const mapMoveSource = react.useMemo(() => ({ on: adapter.on.bind(adapter) }), []);
         const [safeAreaContentEl, setSafeAreaContentEl] = react.useState(null);
         const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = react.useState(null);
         const content = (jsxRuntime.jsxs("div", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ?? "Interactive map", className: tailwindMerge.twMerge(
             // ZStack: full-size grid with a single cell so children overlay the map
-            "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxRuntime.jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsxRuntime.jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsxRuntime.jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsxRuntime.jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsxRuntime.jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, store: panelStore })) : null, jsxRuntime.jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxRuntime.jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsxRuntime.jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsxRuntime.jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
+            "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxRuntime.jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsxRuntime.jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsxRuntime.jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsxRuntime.jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsxRuntime.jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, mapMoveSource: mapMoveSource, store: panelStore })) : null, jsxRuntime.jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxRuntime.jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsxRuntime.jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsxRuntime.jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
         // Provide the adapter's layer port to children (e.g. <Layers>)
         // so they can communicate layer data to the map adapter.
         const layerPort = adapter.layers;
@@ -9977,6 +10008,11 @@ const DEFAULT_STROKE_WIDTH = 2;
  * (which equals groupSize, bounded by the number of features in a viewport).
  */
 const HOVER_PROMOTION_Z_INDEX = 10000;
+/**
+ * Z-index for selection-forces-front promotion. Must exceed
+ * {@link HOVER_PROMOTION_Z_INDEX} so selection outranks sticky hover.
+ */
+const SELECTED_PROMOTION_Z_INDEX = 20000;
 /**
  * FNV-1a 32-bit hash over an array of coordinate numbers. Cheap and
  * change-detecting: any moved vertex changes the output; identical polls keep
@@ -10108,7 +10144,7 @@ const pickFillPromotionCandidates = (fillHits, compareByArea) => {
  *
  * @internal
  */
-const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, suppressedFillIdsByHandle, }) => {
+const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, selectedHandleId, suppressedFillIdsByHandle, }) => {
     const tilingContentKey = react.useMemo(() => buildTilingContentKey(handles), [handles]);
     const tilingHandles = react.useMemo(() => handles.filter((handle) => handle.layerType === "shapes" && handle.overlap?.mode === "tile"), [handles]);
     const hasTilingHandles = tilingHandles.length > 0;
@@ -10125,18 +10161,12 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     react.useEffect(() => {
         onSettledHoverRef.current = onSettledHover;
     }, [onSettledHover]);
-    const selectedFeatureIdRef = react.useRef(selectedFeatureId);
-    react.useEffect(() => {
-        selectedFeatureIdRef.current = selectedFeatureId;
-    }, [selectedFeatureId]);
     const suppressedFillIdsByHandleRef = react.useRef(suppressedFillIdsByHandle);
     react.useEffect(() => {
         suppressedFillIdsByHandleRef.current = suppressedFillIdsByHandle;
     }, [suppressedFillIdsByHandle]);
     const debounceTimerRef = react.useRef(null);
     const idleRecomputeTimerRef = react.useRef(null);
-    /** Pending deferred selection re-tile (double-rAF handle); see selection effect. */
-    const selectionRecomputeRafRef = react.useRef(null);
     // Currently emitted overrides — used for hit-testing visible fills in handleSettle.
     const prevFillOverridesRef = react.useRef(EMPTY_OVERRIDES);
     const prevZIndexOverridesRef = react.useRef(EMPTY_ZINDEX_OVERRIDES);
@@ -10145,10 +10175,15 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     const restingZIndexByHandleRef = react.useRef(new Map());
     // Per-handle: groupKey → promoted feature id (sticky hover winner).
     const promotedByHandleRef = react.useRef(new Map());
+    // Per-handle: groupKey → selected feature id (selection-forces-front).
+    const selectedPromotedByHandleRef = react.useRef(new Map());
+    const prevSelectedPromotionRef = react.useRef(null);
     // Per-handle: featureId → groupKey (populated from last computeFillTiling result).
     const featureToGroupKeyByHandleRef = react.useRef(new Map());
     /** True while an interactive shape decoration (edge label, badge, …) is hovered. */
     const decorationHoverActiveRef = react.useRef(false);
+    /** Re-applies `prevSelectedPromotionRef` after recompute populates group keys. */
+    const retrySelectionPromotionRef = react.useRef(null);
     // Stable ref to current tiling handles for the debounce callback.
     const tilingHandlesRef = react.useRef(tilingHandles);
     react.useEffect(() => {
@@ -10168,6 +10203,27 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     react.useEffect(() => {
         tilingContentKeyRef.current = tilingContentKey;
     }, [tilingContentKey]);
+    /**
+     * Merge selection and hover promotion maps per group. Selection wins over hover.
+     */
+    const resolveGroupWinners = (handleId) => {
+        const winners = new Map();
+        const selected = selectedPromotedByHandleRef.current.get(handleId);
+        if (selected !== undefined) {
+            for (const [groupKey, featureId] of selected) {
+                winners.set(groupKey, { featureId, channel: "selection" });
+            }
+        }
+        const hover = promotedByHandleRef.current.get(handleId);
+        if (hover !== undefined) {
+            for (const [groupKey, featureId] of hover) {
+                if (!winners.has(groupKey)) {
+                    winners.set(groupKey, { featureId, channel: "hover" });
+                }
+            }
+        }
+        return winners;
+    };
     /**
      * Apply the current promotion state on top of resting fills and z-indices and emit
      * the result. Called both at the end of `recompute` and directly on hover-settle
@@ -10175,22 +10231,23 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
      *
      * Active promotion: winner unclipped; peers in the same group are clipped against
      * the winner's full geometry so exclusive rings stay painted without compounding.
+     * Selection channel outranks hover per group.
      */
     const emitWithPromotion = react.useCallback(() => {
         const nextFills = new Map();
         const nextZIndices = new Map();
         const handleById = new Map(tilingHandlesRef.current.map(handle => [handle.id, handle]));
         for (const [handleId, restingFills] of restingFillByHandleRef.current) {
-            const promoted = promotedByHandleRef.current.get(handleId);
+            const groupWinners = resolveGroupWinners(handleId);
             const featureToGroupKey = featureToGroupKeyByHandleRef.current.get(handleId);
-            if (promoted === undefined || promoted.size === 0) {
+            if (groupWinners.size === 0) {
                 if (restingFills.size > 0)
                     nextFills.set(handleId, restingFills);
             }
             else if (featureToGroupKey === undefined) {
                 const modifiedFills = new Map(restingFills);
-                for (const promotedId of promoted.values()) {
-                    modifiedFills.delete(promotedId);
+                for (const { featureId } of groupWinners.values()) {
+                    modifiedFills.delete(featureId);
                 }
                 if (modifiedFills.size > 0)
                     nextFills.set(handleId, modifiedFills);
@@ -10205,7 +10262,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                     }
                 }
                 const modifiedFills = new Map(restingFills);
-                for (const [groupKey, winnerId] of promoted) {
+                for (const [groupKey, { featureId: winnerId }] of groupWinners) {
                     const groupMembers = [];
                     for (const [featureId, memberGroupKey] of featureToGroupKey) {
                         if (memberGroupKey !== groupKey)
@@ -10233,16 +10290,16 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             }
         }
         for (const [handleId, restingZIndices] of restingZIndexByHandleRef.current) {
-            const promoted = promotedByHandleRef.current.get(handleId);
-            if (promoted === undefined || promoted.size === 0) {
+            const groupWinners = resolveGroupWinners(handleId);
+            if (groupWinners.size === 0) {
                 if (restingZIndices.size > 0)
                     nextZIndices.set(handleId, restingZIndices);
             }
             else {
                 const featureToGroupKey = featureToGroupKeyByHandleRef.current.get(handleId);
                 const modifiedZIndices = new Map(restingZIndices);
-                for (const [groupKey, winnerId] of promoted) {
-                    modifiedZIndices.set(winnerId, HOVER_PROMOTION_Z_INDEX);
+                for (const [groupKey, { featureId: winnerId, channel }] of groupWinners) {
+                    modifiedZIndices.set(winnerId, channel === "selection" ? SELECTED_PROMOTION_Z_INDEX : HOVER_PROMOTION_Z_INDEX);
                     if (featureToGroupKey !== undefined) {
                         for (const [featureId, memberGroupKey] of featureToGroupKey) {
                             if (memberGroupKey === groupKey && featureId !== winnerId) {
@@ -10296,7 +10353,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         // 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}`;
+        const inputKey = `${tilingContentKeyRef.current}|${suppressedKey}|${geodesicKey}`;
         if (inputKey === lastComputeInputKeyRef.current) {
             return;
         }
@@ -10308,6 +10365,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                 prevFillOverridesRef.current = EMPTY_OVERRIDES;
                 prevZIndexOverridesRef.current = EMPTY_ZINDEX_OVERRIDES;
                 promotedByHandleRef.current = new Map();
+                selectedPromotedByHandleRef.current = new Map();
                 featureToGroupKeyByHandleRef.current = new Map();
                 onFillChangeRef.current(EMPTY_OVERRIDES);
                 onZIndexChangeRef.current(EMPTY_ZINDEX_OVERRIDES);
@@ -10324,7 +10382,6 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                 features: handle.features.features,
                 viewportBounds: GLOBAL_BOUNDS,
                 resolveStackOrder: handle.overlap?.resolveStackOrder ?? defaultShapeStackOrder,
-                selectedFeatureId: selectedFeatureIdRef.current,
                 suppressedFeatureIds: suppressedFillIdsByHandleRef.current?.get(handle.id),
                 layerGeodesic: handle.style.geodesic,
                 featureStyles: handle.featureStyles,
@@ -10339,6 +10396,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         }
         restingFillByHandleRef.current = nextRestingFills;
         restingZIndexByHandleRef.current = nextRestingZIndices;
+        retrySelectionPromotionRef.current?.();
         emitWithPromotion();
     }, [emitWithPromotion]);
     const flushPendingRestingRecompute = react.useCallback(() => {
@@ -10359,6 +10417,40 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             flushPendingRestingRecompute();
         }, IDLE_RECOMPUTE_DEBOUNCE_MS);
     }, [flushPendingRestingRecompute]);
+    const clearSelectionPromotion = react.useCallback((handleId, featureId) => {
+        const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
+        if (groupKey === undefined)
+            return;
+        const handleMap = selectedPromotedByHandleRef.current.get(handleId);
+        if (handleMap === undefined || handleMap.get(groupKey) !== featureId)
+            return;
+        handleMap.delete(groupKey);
+        if (handleMap.size === 0)
+            selectedPromotedByHandleRef.current.delete(handleId);
+        emitWithPromotion();
+    }, [emitWithPromotion]);
+    const promoteSelection = react.useCallback((handleId, featureId) => {
+        const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
+        if (groupKey === undefined)
+            return;
+        let handleMap = selectedPromotedByHandleRef.current.get(handleId);
+        if (handleMap === undefined) {
+            handleMap = new Map();
+            selectedPromotedByHandleRef.current.set(handleId, handleMap);
+        }
+        if (handleMap.get(groupKey) === featureId)
+            return;
+        handleMap.set(groupKey, featureId);
+        emitWithPromotion();
+    }, [emitWithPromotion]);
+    react.useEffect(() => {
+        retrySelectionPromotionRef.current = () => {
+            const pending = prevSelectedPromotionRef.current;
+            if (pending !== null) {
+                promoteSelection(pending.handleId, pending.featureId);
+            }
+        };
+    }, [promoteSelection]);
     const promoteFeature = react.useCallback((handleId, featureId) => {
         const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
         if (groupKey === undefined)
@@ -10391,31 +10483,23 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             return;
         recompute();
     }, [recompute, tilingContentKey]);
-    // Selection forces the selected feature to the front of its overlap group,
-    // which requires a resting re-tile (computeFillTiling depends on
-    // selectedFeatureId via resolveStackOrder). For large layers that re-tile is
-    // expensive (~600ms for 200 polygons over global bounds) and must NOT block
-    // the interaction's first paint — e.g. a panel opening on the clicked feature.
-    // Defer it past the next paint with a double rAF so the click commits and
-    // paints immediately, then the selected polygon restacks one frame later.
-    // Rapid selections coalesce: each schedule cancels the previous pending one.
+    // Selection forces front via Path B (cheap overlay) — not resting re-tile.
     react.useEffect(() => {
-        if (selectionRecomputeRafRef.current !== null) {
-            cancelAnimationFrame(selectionRecomputeRafRef.current);
-        }
-        selectionRecomputeRafRef.current = requestAnimationFrame(() => {
-            selectionRecomputeRafRef.current = requestAnimationFrame(() => {
-                selectionRecomputeRafRef.current = null;
-                recompute();
-            });
-        });
-        return () => {
-            if (selectionRecomputeRafRef.current !== null) {
-                cancelAnimationFrame(selectionRecomputeRafRef.current);
-                selectionRecomputeRafRef.current = null;
-            }
-        };
-    }, [recompute, selectedFeatureId]);
+        const prev = prevSelectedPromotionRef.current;
+        const next = selectedFeatureId !== null &&
+            selectedFeatureId !== undefined &&
+            selectedHandleId !== null &&
+            selectedHandleId !== undefined
+            ? { handleId: selectedHandleId, featureId: selectedFeatureId }
+            : null;
+        if (prev !== null && (next === null || prev.handleId !== next.handleId || prev.featureId !== next.featureId)) {
+            clearSelectionPromotion(prev.handleId, prev.featureId);
+        }
+        if (next !== null) {
+            promoteSelection(next.handleId, next.featureId);
+        }
+        prevSelectedPromotionRef.current = next;
+    }, [selectedFeatureId, selectedHandleId, clearSelectionPromotion, promoteSelection]);
     // Suppression changes must trigger a recompute so EMPTY_FILL entries are
     // added / removed even when the map is idle (covers the decorations-vs-tiling
     // idle race where viewport-style overrides arrive after the last idle event).
@@ -10707,6 +10791,7 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
         onZIndexOverridesChange: setZIndexOverrides,
         onSettledHover,
         selectedFeatureId: layers.interaction.selectedEntity?.type === "shape" ? String(layers.interaction.selectedEntity.id) : null,
+        selectedHandleId: layers.interaction.selectedEntity?.type === "shape" ? layers.interaction.selectedEntity.handleId : null,
         suppressedFillIdsByHandle,
     });
     const promoteFeatureRef = react.useRef(promoteFeature);

package/index.esm.js

@@ -817,7 +817,7 @@ const PANEL_SCROLL_INTERNAL_CLASS_NAME = "flex flex-1 min-h-0 flex-col overflow-
  *
  * @internal
  */
-const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel = "Close", onCommit, containerEl = null, "aria-label": ariaLabel, contentScroll = "shell", children, }) => {
+const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel = "Close", onCommit, containerEl = null, mapMoveSource, "aria-label": ariaLabel, contentScroll = "shell", children, }) => {
     const scrollSlotClassName = contentScroll === "internal" ? PANEL_SCROLL_INTERNAL_CLASS_NAME : PANEL_SCROLL_SHELL_CLASS_NAME;
     const shellRef = useRef(null);
     const scrollRef = useRef(null);
@@ -875,7 +875,7 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
         shift({ padding: 8, ...(containerEl !== null ? { boundary: containerEl } : {}) }),
         hide(),
     ], [containerEl]);
-    const { context, floatingStyles, middlewareData, placement: resolvedPlacement, elements, refs: { setFloating }, } = useFloating({
+    const { context, floatingStyles, middlewareData, placement: resolvedPlacement, elements, refs: { setFloating }, update, } = useFloating({
         open: effectiveAnchor !== null,
         onOpenChange: nextOpen => {
             if (!nextOpen)
@@ -885,8 +885,38 @@ const Panel = ({ anchor, placement = DEFAULT_PLACEMENT$1, onDismiss, closeLabel
         strategy: "absolute",
         middleware,
         elements: { reference: effectiveAnchor },
-        whileElementsMounted: (reference, floating, autoUpdateFn) => autoUpdate(reference, floating, autoUpdateFn, { animationFrame: true }),
+        whileElementsMounted: (reference, floating, autoUpdateFn) => autoUpdate(reference, floating, autoUpdateFn),
     });
+    // Reposition while the map pans/zooms: anchors move without scroll/resize events.
+    useEffect(() => {
+        if (mapMoveSource === undefined || effectiveAnchor === null)
+            return;
+        let rafId = null;
+        const loop = () => {
+            update();
+            rafId = requestAnimationFrame(loop);
+        };
+        const stopLoop = () => {
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        const offMoveStart = mapMoveSource.on("movestart", () => {
+            if (rafId === null) {
+                rafId = requestAnimationFrame(loop);
+            }
+        });
+        const offMoveEnd = mapMoveSource.on("moveend", () => {
+            stopLoop();
+            update();
+        });
+        return () => {
+            offMoveStart();
+            offMoveEnd();
+            stopLoop();
+        };
+    }, [effectiveAnchor, mapMoveSource, update]);
     // Hide until the first placement commit so there is no flash at (0,0).
     const isCommitted = middlewareData.hide !== undefined;
     // Do NOT re-enable outsidePress here (neither `true` nor `outsidePressEvent: "click"`).
@@ -949,13 +979,13 @@ const sortByPriority = (descriptors) => {
  *
  * @internal
  */
-const PanelOrchestrator = ({ store, containerEl, anchoredPortalEl }) => {
+const PanelOrchestrator = ({ store, containerEl, mapMoveSource, anchoredPortalEl }) => {
     const descriptors = useSyncExternalStore(store.subscribe, store.getSnapshot);
     const sortedDescriptors = useMemo(() => sortByPriority(descriptors), [descriptors]);
     if (sortedDescriptors.length === 0) {
         return null;
     }
-    const anchoredContent = sortedDescriptors.map(descriptor => (jsx(Panel, { anchor: descriptor.anchor, "aria-label": descriptor["aria-label"], closeLabel: descriptor.closeLabel, containerEl: containerEl, contentScroll: descriptor.contentScroll, onCommit: descriptor.onCommit, onDismiss: descriptor.onDismiss, placement: descriptor.placement, children: descriptor.children }, descriptor.id)));
+    const anchoredContent = sortedDescriptors.map(descriptor => (jsx(Panel, { anchor: descriptor.anchor, "aria-label": descriptor["aria-label"], closeLabel: descriptor.closeLabel, containerEl: containerEl, contentScroll: descriptor.contentScroll, mapMoveSource: mapMoveSource, onCommit: descriptor.onCommit, onDismiss: descriptor.onDismiss, placement: descriptor.placement, children: descriptor.children }, descriptor.id)));
     return anchoredPortalEl !== null && anchoredPortalEl !== undefined ? (createPortal(anchoredContent, anchoredPortalEl)) : (jsx(Fragment, { children: anchoredContent }));
 };
 PanelOrchestrator.displayName = "PanelOrchestrator";
@@ -1143,11 +1173,12 @@ const createMapComponent = ({ adapter, Renderer, adapterName, containerRefHolder
             availableSpace,
             responsiveMode,
         }), [availableSpace, responsiveMode]);
+        const mapMoveSource = useMemo(() => ({ on: adapter.on.bind(adapter) }), []);
         const [safeAreaContentEl, setSafeAreaContentEl] = useState(null);
         const [safeAreaPanelPortalEl, setSafeAreaPanelPortalEl] = useState(null);
         const content = (jsxs("div", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ?? "Interactive map", className: twMerge(
             // ZStack: full-size grid with a single cell so children overlay the map
-            "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, store: panelStore })) : null, jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
+            "isolate grid h-full w-full grid-cols-1 grid-rows-1", className), "data-testid": dataTestId, id: containerId, ref: mergedRef, role: "application", style: style, tabIndex: 0, children: [jsxs("div", { className: "relative col-start-1 row-start-1 grid h-full min-h-[200px] w-full", children: [jsx(Renderer, { adapterInstance: adapter, className: "h-full w-full", style: { height: "100%", width: "100%" } }), jsx(AdapterReadinessOverlay, { adapter: adapter })] }), jsx("div", { className: "pointer-events-none absolute inset-0 col-start-1 row-start-1 overflow-visible", "data-testid": "map-marker-overlay-portal" }), jsx("div", { className: "pointer-events-none relative isolate col-start-1 row-start-1 h-full min-h-0 w-full overflow-clip", "data-testid": "map-panel-overlay-portal", ref: setSafeAreaPanelPortalEl }), panelStore !== undefined ? (jsx(PanelOrchestrator, { anchoredPortalEl: safeAreaPanelPortalEl, containerEl: safeAreaContentEl ?? containerEl, mapMoveSource: mapMoveSource, store: panelStore })) : null, jsx(SafeAreaLayoutContext.Provider, { value: layout, children: jsxs(SafeAreaOverlay, { safeAreaContentRef: setSafeAreaContentEl, safeAreaInsets: safeAreaInsets ?? null, children: [children, annotationStore !== undefined ? jsx(FallbackAnnotationOverlay, { store: annotationStore }) : null, loadingIndicatorStore !== undefined ? (jsx(LoadingOverlay, { adapter: adapter, store: loadingIndicatorStore })) : null] }) })] }));
         // Provide the adapter's layer port to children (e.g. <Layers>)
         // so they can communicate layer data to the map adapter.
         const layerPort = adapter.layers;
@@ -9976,6 +10007,11 @@ const DEFAULT_STROKE_WIDTH = 2;
  * (which equals groupSize, bounded by the number of features in a viewport).
  */
 const HOVER_PROMOTION_Z_INDEX = 10000;
+/**
+ * Z-index for selection-forces-front promotion. Must exceed
+ * {@link HOVER_PROMOTION_Z_INDEX} so selection outranks sticky hover.
+ */
+const SELECTED_PROMOTION_Z_INDEX = 20000;
 /**
  * FNV-1a 32-bit hash over an array of coordinate numbers. Cheap and
  * change-detecting: any moved vertex changes the output; identical polls keep
@@ -10107,7 +10143,7 @@ const pickFillPromotionCandidates = (fillHits, compareByArea) => {
  *
  * @internal
  */
-const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, suppressedFillIdsByHandle, }) => {
+const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, selectedHandleId, suppressedFillIdsByHandle, }) => {
     const tilingContentKey = useMemo(() => buildTilingContentKey(handles), [handles]);
     const tilingHandles = useMemo(() => handles.filter((handle) => handle.layerType === "shapes" && handle.overlap?.mode === "tile"), [handles]);
     const hasTilingHandles = tilingHandles.length > 0;
@@ -10124,18 +10160,12 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     useEffect(() => {
         onSettledHoverRef.current = onSettledHover;
     }, [onSettledHover]);
-    const selectedFeatureIdRef = useRef(selectedFeatureId);
-    useEffect(() => {
-        selectedFeatureIdRef.current = selectedFeatureId;
-    }, [selectedFeatureId]);
     const suppressedFillIdsByHandleRef = useRef(suppressedFillIdsByHandle);
     useEffect(() => {
         suppressedFillIdsByHandleRef.current = suppressedFillIdsByHandle;
     }, [suppressedFillIdsByHandle]);
     const debounceTimerRef = useRef(null);
     const idleRecomputeTimerRef = useRef(null);
-    /** Pending deferred selection re-tile (double-rAF handle); see selection effect. */
-    const selectionRecomputeRafRef = useRef(null);
     // Currently emitted overrides — used for hit-testing visible fills in handleSettle.
     const prevFillOverridesRef = useRef(EMPTY_OVERRIDES);
     const prevZIndexOverridesRef = useRef(EMPTY_ZINDEX_OVERRIDES);
@@ -10144,10 +10174,15 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     const restingZIndexByHandleRef = useRef(new Map());
     // Per-handle: groupKey → promoted feature id (sticky hover winner).
     const promotedByHandleRef = useRef(new Map());
+    // Per-handle: groupKey → selected feature id (selection-forces-front).
+    const selectedPromotedByHandleRef = useRef(new Map());
+    const prevSelectedPromotionRef = useRef(null);
     // Per-handle: featureId → groupKey (populated from last computeFillTiling result).
     const featureToGroupKeyByHandleRef = useRef(new Map());
     /** True while an interactive shape decoration (edge label, badge, …) is hovered. */
     const decorationHoverActiveRef = useRef(false);
+    /** Re-applies `prevSelectedPromotionRef` after recompute populates group keys. */
+    const retrySelectionPromotionRef = useRef(null);
     // Stable ref to current tiling handles for the debounce callback.
     const tilingHandlesRef = useRef(tilingHandles);
     useEffect(() => {
@@ -10167,6 +10202,27 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     useEffect(() => {
         tilingContentKeyRef.current = tilingContentKey;
     }, [tilingContentKey]);
+    /**
+     * Merge selection and hover promotion maps per group. Selection wins over hover.
+     */
+    const resolveGroupWinners = (handleId) => {
+        const winners = new Map();
+        const selected = selectedPromotedByHandleRef.current.get(handleId);
+        if (selected !== undefined) {
+            for (const [groupKey, featureId] of selected) {
+                winners.set(groupKey, { featureId, channel: "selection" });
+            }
+        }
+        const hover = promotedByHandleRef.current.get(handleId);
+        if (hover !== undefined) {
+            for (const [groupKey, featureId] of hover) {
+                if (!winners.has(groupKey)) {
+                    winners.set(groupKey, { featureId, channel: "hover" });
+                }
+            }
+        }
+        return winners;
+    };
     /**
      * Apply the current promotion state on top of resting fills and z-indices and emit
      * the result. Called both at the end of `recompute` and directly on hover-settle
@@ -10174,22 +10230,23 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
      *
      * Active promotion: winner unclipped; peers in the same group are clipped against
      * the winner's full geometry so exclusive rings stay painted without compounding.
+     * Selection channel outranks hover per group.
      */
     const emitWithPromotion = useCallback(() => {
         const nextFills = new Map();
         const nextZIndices = new Map();
         const handleById = new Map(tilingHandlesRef.current.map(handle => [handle.id, handle]));
         for (const [handleId, restingFills] of restingFillByHandleRef.current) {
-            const promoted = promotedByHandleRef.current.get(handleId);
+            const groupWinners = resolveGroupWinners(handleId);
             const featureToGroupKey = featureToGroupKeyByHandleRef.current.get(handleId);
-            if (promoted === undefined || promoted.size === 0) {
+            if (groupWinners.size === 0) {
                 if (restingFills.size > 0)
                     nextFills.set(handleId, restingFills);
             }
             else if (featureToGroupKey === undefined) {
                 const modifiedFills = new Map(restingFills);
-                for (const promotedId of promoted.values()) {
-                    modifiedFills.delete(promotedId);
+                for (const { featureId } of groupWinners.values()) {
+                    modifiedFills.delete(featureId);
                 }
                 if (modifiedFills.size > 0)
                     nextFills.set(handleId, modifiedFills);
@@ -10204,7 +10261,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                     }
                 }
                 const modifiedFills = new Map(restingFills);
-                for (const [groupKey, winnerId] of promoted) {
+                for (const [groupKey, { featureId: winnerId }] of groupWinners) {
                     const groupMembers = [];
                     for (const [featureId, memberGroupKey] of featureToGroupKey) {
                         if (memberGroupKey !== groupKey)
@@ -10232,16 +10289,16 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             }
         }
         for (const [handleId, restingZIndices] of restingZIndexByHandleRef.current) {
-            const promoted = promotedByHandleRef.current.get(handleId);
-            if (promoted === undefined || promoted.size === 0) {
+            const groupWinners = resolveGroupWinners(handleId);
+            if (groupWinners.size === 0) {
                 if (restingZIndices.size > 0)
                     nextZIndices.set(handleId, restingZIndices);
             }
             else {
                 const featureToGroupKey = featureToGroupKeyByHandleRef.current.get(handleId);
                 const modifiedZIndices = new Map(restingZIndices);
-                for (const [groupKey, winnerId] of promoted) {
-                    modifiedZIndices.set(winnerId, HOVER_PROMOTION_Z_INDEX);
+                for (const [groupKey, { featureId: winnerId, channel }] of groupWinners) {
+                    modifiedZIndices.set(winnerId, channel === "selection" ? SELECTED_PROMOTION_Z_INDEX : HOVER_PROMOTION_Z_INDEX);
                     if (featureToGroupKey !== undefined) {
                         for (const [featureId, memberGroupKey] of featureToGroupKey) {
                             if (memberGroupKey === groupKey && featureId !== winnerId) {
@@ -10295,7 +10352,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         // 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}`;
+        const inputKey = `${tilingContentKeyRef.current}|${suppressedKey}|${geodesicKey}`;
         if (inputKey === lastComputeInputKeyRef.current) {
             return;
         }
@@ -10307,6 +10364,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                 prevFillOverridesRef.current = EMPTY_OVERRIDES;
                 prevZIndexOverridesRef.current = EMPTY_ZINDEX_OVERRIDES;
                 promotedByHandleRef.current = new Map();
+                selectedPromotedByHandleRef.current = new Map();
                 featureToGroupKeyByHandleRef.current = new Map();
                 onFillChangeRef.current(EMPTY_OVERRIDES);
                 onZIndexChangeRef.current(EMPTY_ZINDEX_OVERRIDES);
@@ -10323,7 +10381,6 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
                 features: handle.features.features,
                 viewportBounds: GLOBAL_BOUNDS,
                 resolveStackOrder: handle.overlap?.resolveStackOrder ?? defaultShapeStackOrder,
-                selectedFeatureId: selectedFeatureIdRef.current,
                 suppressedFeatureIds: suppressedFillIdsByHandleRef.current?.get(handle.id),
                 layerGeodesic: handle.style.geodesic,
                 featureStyles: handle.featureStyles,
@@ -10338,6 +10395,7 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
         }
         restingFillByHandleRef.current = nextRestingFills;
         restingZIndexByHandleRef.current = nextRestingZIndices;
+        retrySelectionPromotionRef.current?.();
         emitWithPromotion();
     }, [emitWithPromotion]);
     const flushPendingRestingRecompute = useCallback(() => {
@@ -10358,6 +10416,40 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             flushPendingRestingRecompute();
         }, IDLE_RECOMPUTE_DEBOUNCE_MS);
     }, [flushPendingRestingRecompute]);
+    const clearSelectionPromotion = useCallback((handleId, featureId) => {
+        const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
+        if (groupKey === undefined)
+            return;
+        const handleMap = selectedPromotedByHandleRef.current.get(handleId);
+        if (handleMap === undefined || handleMap.get(groupKey) !== featureId)
+            return;
+        handleMap.delete(groupKey);
+        if (handleMap.size === 0)
+            selectedPromotedByHandleRef.current.delete(handleId);
+        emitWithPromotion();
+    }, [emitWithPromotion]);
+    const promoteSelection = useCallback((handleId, featureId) => {
+        const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
+        if (groupKey === undefined)
+            return;
+        let handleMap = selectedPromotedByHandleRef.current.get(handleId);
+        if (handleMap === undefined) {
+            handleMap = new Map();
+            selectedPromotedByHandleRef.current.set(handleId, handleMap);
+        }
+        if (handleMap.get(groupKey) === featureId)
+            return;
+        handleMap.set(groupKey, featureId);
+        emitWithPromotion();
+    }, [emitWithPromotion]);
+    useEffect(() => {
+        retrySelectionPromotionRef.current = () => {
+            const pending = prevSelectedPromotionRef.current;
+            if (pending !== null) {
+                promoteSelection(pending.handleId, pending.featureId);
+            }
+        };
+    }, [promoteSelection]);
     const promoteFeature = useCallback((handleId, featureId) => {
         const groupKey = featureToGroupKeyByHandleRef.current.get(handleId)?.get(featureId);
         if (groupKey === undefined)
@@ -10390,31 +10482,23 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             return;
         recompute();
     }, [recompute, tilingContentKey]);
-    // Selection forces the selected feature to the front of its overlap group,
-    // which requires a resting re-tile (computeFillTiling depends on
-    // selectedFeatureId via resolveStackOrder). For large layers that re-tile is
-    // expensive (~600ms for 200 polygons over global bounds) and must NOT block
-    // the interaction's first paint — e.g. a panel opening on the clicked feature.
-    // Defer it past the next paint with a double rAF so the click commits and
-    // paints immediately, then the selected polygon restacks one frame later.
-    // Rapid selections coalesce: each schedule cancels the previous pending one.
+    // Selection forces front via Path B (cheap overlay) — not resting re-tile.
     useEffect(() => {
-        if (selectionRecomputeRafRef.current !== null) {
-            cancelAnimationFrame(selectionRecomputeRafRef.current);
-        }
-        selectionRecomputeRafRef.current = requestAnimationFrame(() => {
-            selectionRecomputeRafRef.current = requestAnimationFrame(() => {
-                selectionRecomputeRafRef.current = null;
-                recompute();
-            });
-        });
-        return () => {
-            if (selectionRecomputeRafRef.current !== null) {
-                cancelAnimationFrame(selectionRecomputeRafRef.current);
-                selectionRecomputeRafRef.current = null;
-            }
-        };
-    }, [recompute, selectedFeatureId]);
+        const prev = prevSelectedPromotionRef.current;
+        const next = selectedFeatureId !== null &&
+            selectedFeatureId !== undefined &&
+            selectedHandleId !== null &&
+            selectedHandleId !== undefined
+            ? { handleId: selectedHandleId, featureId: selectedFeatureId }
+            : null;
+        if (prev !== null && (next === null || prev.handleId !== next.handleId || prev.featureId !== next.featureId)) {
+            clearSelectionPromotion(prev.handleId, prev.featureId);
+        }
+        if (next !== null) {
+            promoteSelection(next.handleId, next.featureId);
+        }
+        prevSelectedPromotionRef.current = next;
+    }, [selectedFeatureId, selectedHandleId, clearSelectionPromotion, promoteSelection]);
     // Suppression changes must trigger a recompute so EMPTY_FILL entries are
     // added / removed even when the map is idle (covers the decorations-vs-tiling
     // idle race where viewport-style overrides arrive after the last idle event).
@@ -10706,6 +10790,7 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
         onZIndexOverridesChange: setZIndexOverrides,
         onSettledHover,
         selectedFeatureId: layers.interaction.selectedEntity?.type === "shape" ? String(layers.interaction.selectedEntity.id) : null,
+        selectedHandleId: layers.interaction.selectedEntity?.type === "shape" ? layers.interaction.selectedEntity.handleId : null,
         suppressedFillIdsByHandle,
     });
     const promoteFeatureRef = useRef(promoteFeature);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -25,10 +25,12 @@ type UseShapeFillTilingConfig = Readonly<{
      */
     onSettledHover?: (handleId: string, featureId: string) => void;
     /**
-     * Currently selected feature id. The matching feature is forced to the front
-     * of its overlap group, overriding resting order.
+     * Currently selected feature id. Routed through the selection promotion
+     * channel (Path B) — not the resting `computeFillTiling` baseline.
      */
     selectedFeatureId?: string | null;
+    /** Handle id of the selected shape entity (required when `selectedFeatureId` is set). */
+    selectedHandleId?: string | null;
     /**
      * Per-handle set of feature ids whose fill is suppressed (`fillOpacity === 0`
      * on the resolved context-aware style). Suppressed features are excluded from
@@ -85,5 +87,5 @@ export type UseShapeFillTilingReturn = Readonly<{
  *
  * @internal
  */
-export declare const useShapeFillTiling: ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, suppressedFillIdsByHandle, }: UseShapeFillTilingConfig) => UseShapeFillTilingReturn;
+export declare const useShapeFillTiling: ({ api, handles, onFillGeometriesChange, onZIndexOverridesChange, onSettledHover, selectedFeatureId, selectedHandleId, suppressedFillIdsByHandle, }: UseShapeFillTilingConfig) => UseShapeFillTilingReturn;
 export {};

package/src/panel/Panel.d.ts

@@ -1,5 +1,6 @@
 import { type Placement } from "@floating-ui/react";
 import { ReactNode } from "react";
+import type { MapApi } from "../core/types";
 import "./Panel.css";
 export type PanelContentScroll = "shell" | "internal";
 export type PanelProps = Readonly<{
@@ -31,6 +32,12 @@ export type PanelProps = Readonly<{
      * outside the map viewport. Falls back to clipping ancestors when null.
      */
     containerEl?: HTMLElement | null;
+    /**
+     * Map event source for repositioning during pan/zoom. When provided, the panel
+     * updates on `moveend` and runs a lightweight rAF loop only while the map is
+     * moving — avoiding perpetual `autoUpdate({ animationFrame: true })`.
+     */
+    mapMoveSource?: Pick<MapApi, "on">;
     /** Accessible label for the panel dialog, announced by screen readers on open. */
     "aria-label"?: string;
     /**
@@ -55,6 +62,6 @@ export type PanelProps = Readonly<{
  * @internal
  */
 export declare const Panel: {
-    ({ anchor, placement, onDismiss, closeLabel, onCommit, containerEl, "aria-label": ariaLabel, contentScroll, children, }: PanelProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ anchor, placement, onDismiss, closeLabel, onCommit, containerEl, mapMoveSource, "aria-label": ariaLabel, contentScroll, children, }: PanelProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/src/panel/PanelOrchestrator.d.ts

@@ -1,4 +1,6 @@
+import type { MapApi } from "../core/types";
 import type { PanelStore } from "./store/panels";
+export type PanelOrchestratorMapMoveSource = Pick<MapApi, "on">;
 export type PanelOrchestratorProps = Readonly<{
     store: PanelStore;
     /**
@@ -6,6 +8,8 @@ export type PanelOrchestratorProps = Readonly<{
      * escape the map's overflow.
      */
     containerEl: HTMLElement | null;
+    /** Subscribes panels to map pan/zoom for anchor tracking. */
+    mapMoveSource?: PanelOrchestratorMapMoveSource;
     /**
      * Overlay element that hosts anchored panels via portal. When omitted,
      * anchored panels render inline next to the orchestrator (used in tests).
@@ -19,6 +23,6 @@ export type PanelOrchestratorProps = Readonly<{
  * @internal
  */
 export declare const PanelOrchestrator: {
-    ({ store, containerEl, anchoredPortalEl }: PanelOrchestratorProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ store, containerEl, mapMoveSource, anchoredPortalEl }: PanelOrchestratorProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };