@orbat-mapper/tactical-draw 0.2.0-alpha.31 → 0.2.0-alpha.33

package/dist/index.d.mts

@@ -166,6 +166,17 @@ interface IconResource {
   width: number;
   height: number;
   anchor: [number, number];
+  /**
+   * Direct visible mark used to rank icon picks, in unscaled canvas coordinates.
+   * Hits elsewhere in the full canvas measure their distance from this rectangle;
+   * omit it to preserve whole-canvas distance-zero behavior.
+   */
+  coreRect?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
 }
 /**
  * Click-style hit event delivered by {@link MapAdapter.onPick}.
@@ -254,6 +265,9 @@ interface MapAdapter {
    * end of a pan or pinch-zoom gesture.
    *
    * Hit tolerance is pointer-type aware: 4 px for mouse/pen, 12 px for touch.
+   * Outline-only polygon interiors additionally have bounded inward selection
+   * reach from visible viewport-clipped boundaries: 24 px for mouse/pen and
+   * 36 px for touch. A visible solid or patterned fill owns its full interior.
    *
    * Returns an unsubscribe function. The returned function and the optional
    * `signal` are both honoured; either teardown path stops further events,
@@ -443,6 +457,8 @@ declare abstract class BaseMapAdapter<TLayerHandle, TEventToken, TViewToken> imp
 }
 //#endregion
 //#region src/pick-utils.d.ts
+type PickPointerType = "mouse" | "pen" | "touch";
+declare function pickPointerType(originalEvent: unknown): PickPointerType;
 declare function pickHitTolerance(originalEvent: unknown): number;
 declare function tryControlMeasureIdFromFeature(feature: Feature): string | null;
 /**
@@ -453,6 +469,119 @@ declare function tryControlMeasureIdFromFeature(feature: Feature): string | null
  */
 declare function bindAbortable(signal: AbortSignal | undefined, attach: () => () => void): () => void;
 //#endregion
+//#region src/pick-candidates.d.ts
+interface ScreenBounds {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+interface RotatedScreenBounds {
+  center: PixelCoordinate;
+  halfWidth: number;
+  halfHeight: number;
+  angle: number;
+}
+type LabelExtent = ScreenBounds | RotatedScreenBounds;
+interface ResolvedPickPresentation {
+  stroke?: {
+    color?: string;
+    width?: number;
+    dash?: readonly number[];
+  };
+  fill?: {
+    color?: string;
+    pattern?: string;
+    opacity: number;
+  };
+  point?: {
+    fillColor?: string;
+    radius?: number;
+  };
+  text?: TextStyleOptions;
+}
+type PickCandidateHitKind = "native" | "point" | "line" | "polygon-boundary" | "polygon-interior" | "icon" | "label";
+interface PickCandidateHit {
+  kind: PickCandidateHitKind;
+  /** CSS-pixel distance to the visible mark, or null when only the engine knows the hit. */
+  distance: number | null;
+}
+/**
+ * Engine-neutral description of one rendered part eligible at a pointer location.
+ * This is deliberately richer than PickEvent but remains adapter-author plumbing:
+ * ordered candidates are not exposed by the public picking event.
+ */
+interface PickCandidate {
+  feature: Feature;
+  graphicId: string | null;
+  renderedPartId: string | number | null;
+  hit: PickCandidateHit;
+  viewport: ScreenBounds;
+  presentation: ResolvedPickPresentation;
+  visualOrder: number;
+  iconFootprint?: readonly PixelCoordinate[];
+  labelExtent?: LabelExtent;
+}
+/** A rendered part supplied by an adapter or TacticalDraw for shared evaluation. */
+interface PickCandidateInput {
+  feature: Feature;
+  /**
+   * Lower values mean visually topmost. Suppliers must normalize their
+   * native ordering to topmost-first before calling into evaluation.
+   */
+  visualOrder: number;
+  /** The engine already reported this part as hit; retained as a fallback for engine-only marks. */
+  nativeHit?: boolean;
+  icon?: IconResource;
+  labelExtent?: LabelExtent;
+  presentation?: ResolvedPickPresentation;
+  layerStyle?: StyleOptions;
+}
+/**
+ * The `visualOrder` for the feature at `index` of a render-ordered
+ * (bottom-first) list of `total` features: reversing the index makes the
+ * topmost-rendered feature the lowest, and therefore winning, order.
+ */
+declare function renderOrderToVisualOrder(index: number, total: number): number;
+interface MergedPickFeature {
+  feature: Feature;
+  visualOrder: number;
+  nativeHit: boolean;
+}
+/**
+ * Preserve native visual ordering/hit evidence while keeping cached source
+ * geometry authoritative. Native polygon geometry may be tile-clipped and
+ * therefore contain artificial edges that are not part of the graphic.
+ *
+ * Normalizes to the shared `visualOrder` contract (lower = visually
+ * topmost): native hits already arrive topmost-first from the engines and
+ * keep that order at the front. Cached-only features (not among the native
+ * hits) are appended after them, in reverse cache order — cache arrays are
+ * render order (bottom-first), so reversing yields topmost-first — with
+ * `visualOrder` numbering continuing on from the native section.
+ */
+declare function mergeNativeAndCachedPickFeatures(nativeFeatures: readonly Feature[], cachedFeatures: readonly Feature[]): MergedPickFeature[];
+interface PickEvaluationContext {
+  pixel: PixelCoordinate;
+  tolerance: number;
+  pointerType?: PickPointerType;
+  toPixel: (position: Position) => PixelCoordinate | null;
+  viewport: ScreenBounds;
+  bearing?: number;
+}
+/**
+ * Evaluate every relevant rendered part in screen space, then return the
+ * primary candidate under the visible-intent ranking policy: direct visible
+ * marks (strokes, points, icons, labels) outrank visibly filled interiors,
+ * which outrank inferred outline-only reach; competing direct marks rank by
+ * screen-space distance; visual topmost order is only the final tie-break.
+ * See `rankPickCandidates` for the full ordered list — that ordering stays
+ * internal adapter-author plumbing; the public pick event exposes only this
+ * primary candidate.
+ */
+declare function evaluatePickCandidates(inputs: readonly PickCandidateInput[], context: PickEvaluationContext): PickCandidate | null;
+declare function resolvePickPresentation(feature: Feature, layerStyle?: StyleOptions): ResolvedPickPresentation;
+//#endregion
 //#region src/feature-style.d.ts
 /**
  * Coerce a raw `properties.style` value into a `HandleStyle` for the
@@ -748,6 +877,15 @@ interface InteractionStyle {
   scaleHandle?: HandleStyle;
   rotateHandle?: HandleStyle;
   boxOutline?: GuideStyle;
+  /**
+   * Line style for the passive, non-interactive selection highlight rendered
+   * by {@link TacticalDraw.setHighlightedGraphics}. A dashed, muted variant of
+   * `boxOutline` so a locked/highlighted selection reads as visually distinct
+   * from an active edit's oriented transform box. Delivered per-feature via
+   * `properties.style` on the highlight outline `LineString`, resolved through
+   * the same built-in → façade → per-call slot system as every other field.
+   */
+  highlightOutline?: GuideStyle;
   /**
    * Pixel padding added on every side of the fitted transform box
    * (`fitTransformBox`, ADR-0017) so the box doesn't tightly hug the rendered
@@ -1418,6 +1556,12 @@ type DrawPointSymbolDraft = Pick<PointSymbol, "kind" | "sidc"> & Partial<Omit<Po
  */
 interface TacticalDrawLayerOptions {
   graphics?: LayerId;
+  /**
+   * Passive selection-highlight outlines ({@link TacticalDraw.setHighlightedGraphics}).
+   * Resolved immediately above `graphics` so highlight boxes stack over base
+   * graphics but below the preview / guide / handles interaction chrome.
+   */
+  highlight?: LayerId;
   preview?: LayerId;
   guide?: LayerId;
   handles?: LayerId;
@@ -1604,6 +1748,7 @@ interface DrawOptions {
 declare class TacticalDraw {
   private readonly adapter;
   private readonly graphicsLayer;
+  private readonly highlightLayer;
   private readonly previewLayer;
   private readonly guideLayer;
   private readonly handlesLayer;
@@ -1665,6 +1810,20 @@ declare class TacticalDraw {
    */
   private lastRenderedMeasures;
   private snapGeometryFeatures;
+  /**
+   * Ids of graphics currently carrying a passive selection-highlight outline
+   * ({@link setHighlightedGraphics}). Declarative set-replace, no session —
+   * re-projected on every view change and re-evaluated at the end of every
+   * `render()` so outlines track geometry, style, and dropped graphics.
+   */
+  private highlightedIds;
+  /**
+   * Whether the highlight layer currently holds any outline. Lets
+   * `renderHighlights` skip a redundant empty write on every view change /
+   * render while no highlights are set, but still emit the one clearing write
+   * that removes outlines when the set transitions to empty.
+   */
+  private hasHighlightOutlines;
   constructor(adapter: MapAdapter, options?: TacticalDrawOptions);
   /** Replace snapping configuration without recreating the map adapter or façade. */
   setSnappingOptions(options?: SnappingOptions): void;
@@ -1729,6 +1888,34 @@ declare class TacticalDraw {
    * pure style replay).
    */
   render(measures: readonly Graphic[]): void;
+  /**
+   * Replace the passive selection-highlight set with `ids`. Declarative and
+   * idempotent (mirrors {@link render}): a non-interactive outline box is drawn
+   * around each still-rendered graphic on the dedicated highlight layer — no
+   * draw / edit / transform session, no promise, no pick subscription. Passing
+   * `[]` clears every highlight. Unknown ids and ids currently lifted into an
+   * active edit / transform session are skipped (the live session's own visuals
+   * supersede the passive outline). Hosts use it for Excalidraw-style
+   * "locked selection" chrome.
+   */
+  setHighlightedGraphics(ids: readonly string[]): void;
+  /**
+   * Project the current {@link highlightedIds} into one outline `LineString`
+   * per graphic and reconcile them onto the highlight layer. Idempotent and
+   * id-keyed via `adapter.updateLayerFeatures`, so a set-replace removes stale
+   * outlines and an unchanged set is a cheap no-op write. Skips ids that are
+   * unknown (not in the last render) or lifted into an active session, and
+   * bails gracefully when the adapter cannot invert pixels to coordinates
+   * (`getCoordinateFromPixel` is optional in the MapAdapter ABI).
+   */
+  private renderHighlights;
+  /**
+   * Fit the passive-highlight transform box for one graphic: the point-symbol
+   * footprint for symbols, the snug text footprint for Text graphics, and the
+   * projected-geometry bounding box (at the current bearing) for every other
+   * control measure. Returns `null` when nothing projects this frame.
+   */
+  private highlightBoxForGraphic;
   /**
    * Nested-call guard + preempt, shared by `draw` and `edit`. Returns a
    * pre-rejected promise when called re-entrantly from inside another
@@ -1892,7 +2079,11 @@ declare class TacticalDraw {
    * then `previewLayer`, then `graphicsLayer` — against each layer's current
    * `adapter.getLayerFeatures(...)` cache. The `guideLayer` is deliberately
    * excluded: it is non-interactive draw-guide scaffolding, never a
-   * legitimate "owned" click target.
+   * legitimate "owned" click target. Within each layer, candidates follow
+   * the shared visible-intent ranking (direct marks, then filled interiors,
+   * then inferred outline-only reach, distance within direct marks, then
+   * visual topmost order) — this explicit-affordance layer order is the
+   * tier above all of it.
    *
    * `preview` and `graphics` each get a label text-extent fallback after the
    * geometry pass misses on that layer: for every `Point` feature carrying a
@@ -1903,7 +2094,7 @@ declare class TacticalDraw {
    * This matters most for the active preview, since a click can land
    * anywhere across a rotated/offset label during an edit.
    *
-   * `tolerance` defaults to `mapEventHitTolerance(options?.originalEvent)` —
+   * `tolerance` defaults to `pickHitTolerance(options?.originalEvent)` —
    * pass the host's raw click event as `originalEvent` to get the same
    * pointer-type-aware tolerance (4px mouse/pen, 12px touch) `onPick` uses;
    * pass an explicit `tolerance` to override it outright.
@@ -1960,6 +2151,7 @@ declare class TacticalDraw {
   /** @internal — exposed for tests and future controllers. */
   get layerIds(): {
     graphics: LayerId;
+    highlight: LayerId;
     preview: LayerId;
     guide: LayerId;
     handles: LayerId;
@@ -1971,6 +2163,7 @@ declare class TacticalDraw {
    */
   private applyGuideStyle;
   private baseGuideStyle;
+  private baseHighlightStyle;
   /**
    * Resolve handle slots (plus `boxOutline`) across built-in → façade →
    * per-call with per-slot, per-property shallow merge. Explicit `undefined`
@@ -2063,4 +2256,4 @@ declare function nearestWorldCopyLng(lng: number, refLng: number): number;
 /** `nearestWorldCopyLng` applied to a lon/lat position. */
 declare function nearestWorldCopyPosition(position: Position, refLng: number): Position;
 //#endregion
-export { BaseMapAdapter, type CombinedAbort, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, type DrawMeasureDraft, type DrawOptions, type DrawPointSymbolDraft, type DrawSession, type EditChangeEvent, type EditManyOptions, type EditMode, type EditOptions, type EditPointerDriver, type EditSession, type FeatureOps, type Graphic, type GraphicEditChangeEvent, type GraphicEditSession, type GraphicGeometrySnappingOptions, type GraphicRender, type GraphicSnapshot, type GuideStyle, HATCH_PATTERNS, type HandleStyle, type HatchPattern, type IconResource, type InteractionHit, type InteractionStyle, type LayerId, type MapAdapter, type MapCursor, type MapEvent, type MapEventHandler, type NativeEventEntry, type PickEvent, type PickHandler, type PickOptions, type PixelCoordinate, type PointSymbol, type PointSymbolAnchor, type PointSymbolCapability, PointSymbolCapabilityRequiredError, type PointSymbolColors, type PointSymbolFootprint, type PointSymbolGraphicModifiers, type PointSymbolRender, type PointSymbolSize, type PointSymbolStyle, type PointerCallback, PointerCallbackHub, type PointerEventInfo, type SessionChangeSource, type SessionHistory, type SessionHistoryState, type SettleReason, type SizeAnchor, type SnapCandidate, type SnapCandidateProvider, type SnapCandidateRequest, type SnapInteraction, type SnapResult, type SnappingOptions, type StyleOptions, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, type TacticalDrawAbortReason, TacticalDrawDestroyedError, type TacticalDrawLayerOptions, type TacticalDrawOptions, type TextSizeProps, type TextStyleOptions, type ToPixel, type TransformBox, type TransformChangeEvent, type TransformSession, type TransientChangeEvent, type TransientPhase, bindAbortable, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, effectivePointSymbolPixelSize, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, nearestWorldCopyLng, nearestWorldCopyPosition, pickHitTolerance, pointSymbolFootprint, resizePointSymbolSize, resolveGroundTextSizePixels, resolveTextSizePixels, tryControlMeasureIdFromFeature };
+export { BaseMapAdapter, type CombinedAbort, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, type DrawMeasureDraft, type DrawOptions, type DrawPointSymbolDraft, type DrawSession, type EditChangeEvent, type EditManyOptions, type EditMode, type EditOptions, type EditPointerDriver, type EditSession, type FeatureOps, type Graphic, type GraphicEditChangeEvent, type GraphicEditSession, type GraphicGeometrySnappingOptions, type GraphicRender, type GraphicSnapshot, type GuideStyle, HATCH_PATTERNS, type HandleStyle, type HatchPattern, type IconResource, type InteractionHit, type InteractionStyle, type LabelExtent, type LayerId, type MapAdapter, type MapCursor, type MapEvent, type MapEventHandler, type MergedPickFeature, type NativeEventEntry, type PickCandidate, type PickCandidateHit, type PickCandidateHitKind, type PickCandidateInput, type PickEvaluationContext, type PickEvent, type PickHandler, type PickOptions, type PickPointerType, type PixelCoordinate, type PointSymbol, type PointSymbolAnchor, type PointSymbolCapability, PointSymbolCapabilityRequiredError, type PointSymbolColors, type PointSymbolFootprint, type PointSymbolGraphicModifiers, type PointSymbolRender, type PointSymbolSize, type PointSymbolStyle, type PointerCallback, PointerCallbackHub, type PointerEventInfo, type ResolvedPickPresentation, type RotatedScreenBounds, type ScreenBounds, type SessionChangeSource, type SessionHistory, type SessionHistoryState, type SettleReason, type SizeAnchor, type SnapCandidate, type SnapCandidateProvider, type SnapCandidateRequest, type SnapInteraction, type SnapResult, type SnappingOptions, type StyleOptions, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, type TacticalDrawAbortReason, TacticalDrawDestroyedError, type TacticalDrawLayerOptions, type TacticalDrawOptions, type TextSizeProps, type TextStyleOptions, type ToPixel, type TransformBox, type TransformChangeEvent, type TransformSession, type TransientChangeEvent, type TransientPhase, bindAbortable, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, effectivePointSymbolPixelSize, evaluatePickCandidates, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, nearestWorldCopyPosition, pickHitTolerance, pickPointerType, pointSymbolFootprint, renderOrderToVisualOrder, resizePointSymbolSize, resolveGroundTextSizePixels, resolvePickPresentation, resolveTextSizePixels, tryControlMeasureIdFromFeature };

package/dist/index.mjs

@@ -218,26 +218,17 @@ var BaseMapAdapter = class {
 		return this.featureCache.get(layerId) ?? [];
 	}
 };
-function pickHitTolerance(originalEvent) {
-	if (typeof PointerEvent !== "undefined" && originalEvent instanceof PointerEvent) return originalEvent.pointerType === "touch" ? 12 : 4;
-	if (typeof TouchEvent !== "undefined" && originalEvent instanceof TouchEvent) return 12;
-	return 4;
+function pickPointerType(originalEvent) {
+	if (typeof PointerEvent !== "undefined" && originalEvent instanceof PointerEvent) {
+		if (originalEvent.pointerType === "touch") return "touch";
+		return originalEvent.pointerType === "pen" ? "pen" : "mouse";
+	}
+	if (typeof TouchEvent !== "undefined" && originalEvent instanceof TouchEvent) return "touch";
+	if (originalEvent && typeof originalEvent === "object" && "originalEvent" in originalEvent) return pickPointerType(originalEvent.originalEvent);
+	return "mouse";
 }
-/**
-* Resolve a pixel hit-tolerance for a `MapEvent.originalEvent` delivered by the
-* `MapAdapter.on(...)` pipeline. Unlike {@link PickEvent}, that pipeline forwards
-* the *engine wrapper* event (OpenLayers `MapBrowserEvent`, MapLibre
-* `MapMouseEvent`, Leaflet `LeafletMouseEvent`), each of which carries the raw
-* DOM event on a `.originalEvent` property. {@link pickHitTolerance} only
-* recognizes a real `PointerEvent` / `TouchEvent`, so unwrap one level when the
-* wrapper itself is not recognized as touch. Falls back to the mouse tolerance
-* when the input type cannot be determined.
-*/
-function mapEventHitTolerance(originalEvent) {
-	const direct = pickHitTolerance(originalEvent);
-	if (direct === 12) return direct;
-	if (originalEvent && typeof originalEvent === "object" && "originalEvent" in originalEvent) return pickHitTolerance(originalEvent.originalEvent);
-	return direct;
+function pickHitTolerance(originalEvent) {
+	return pickPointerType(originalEvent) === "touch" ? 12 : 4;
 }
 function tryControlMeasureIdFromFeature(feature) {
 	const graphicId = feature.properties?.graphicId;
@@ -268,6 +259,392 @@ function bindAbortable(signal, attach) {
 	return dispose;
 }
 //#endregion
+//#region src/pick-candidates.ts
+/**
+* The `visualOrder` for the feature at `index` of a render-ordered
+* (bottom-first) list of `total` features: reversing the index makes the
+* topmost-rendered feature the lowest, and therefore winning, order.
+*/
+function renderOrderToVisualOrder(index, total) {
+	return total - 1 - index;
+}
+/**
+* Preserve native visual ordering/hit evidence while keeping cached source
+* geometry authoritative. Native polygon geometry may be tile-clipped and
+* therefore contain artificial edges that are not part of the graphic.
+*
+* Normalizes to the shared `visualOrder` contract (lower = visually
+* topmost): native hits already arrive topmost-first from the engines and
+* keep that order at the front. Cached-only features (not among the native
+* hits) are appended after them, in reverse cache order — cache arrays are
+* render order (bottom-first), so reversing yields topmost-first — with
+* `visualOrder` numbering continuing on from the native section.
+*/
+function mergeNativeAndCachedPickFeatures(nativeFeatures, cachedFeatures) {
+	const cachedById = /* @__PURE__ */ new Map();
+	for (const feature of cachedFeatures) if (feature.id != null) cachedById.set(feature.id, feature);
+	const merged = [];
+	const seenIds = /* @__PURE__ */ new Set();
+	for (const nativeFeature of nativeFeatures) {
+		if (nativeFeature.id != null && seenIds.has(nativeFeature.id)) continue;
+		const feature = nativeFeature.id == null ? nativeFeature : cachedById.get(nativeFeature.id) ?? nativeFeature;
+		merged.push({
+			feature,
+			visualOrder: merged.length,
+			nativeHit: true
+		});
+		if (nativeFeature.id != null) seenIds.add(nativeFeature.id);
+	}
+	for (let i = cachedFeatures.length - 1; i >= 0; i--) {
+		const feature = cachedFeatures[i];
+		if (feature.id != null && seenIds.has(feature.id)) continue;
+		merged.push({
+			feature,
+			visualOrder: merged.length,
+			nativeHit: false
+		});
+		if (feature.id != null) seenIds.add(feature.id);
+	}
+	return merged;
+}
+/**
+* Evaluate every relevant rendered part in screen space, then return the
+* primary candidate under the visible-intent ranking policy: direct visible
+* marks (strokes, points, icons, labels) outrank visibly filled interiors,
+* which outrank inferred outline-only reach; competing direct marks rank by
+* screen-space distance; visual topmost order is only the final tie-break.
+* See `rankPickCandidates` for the full ordered list — that ordering stays
+* internal adapter-author plumbing; the public pick event exposes only this
+* primary candidate.
+*/
+function evaluatePickCandidates(inputs, context) {
+	let best = null;
+	for (const input of inputs) {
+		const candidate = buildCandidate(input, context);
+		if (candidate && (best === null || compareCandidates(candidate, best) < 0)) best = candidate;
+	}
+	return best;
+}
+function buildCandidate(input, context) {
+	const presentation = input.presentation ?? resolvePickPresentation(input.feature, input.layerStyle);
+	const evaluated = evaluateInput(input, presentation, context);
+	if (!evaluated) return null;
+	return {
+		feature: input.feature,
+		graphicId: tryControlMeasureIdFromFeature(input.feature),
+		renderedPartId: typeof input.feature.id === "string" || typeof input.feature.id === "number" ? input.feature.id : null,
+		hit: evaluated.hit,
+		viewport: context.viewport,
+		presentation,
+		visualOrder: input.visualOrder,
+		...evaluated.iconFootprint ? { iconFootprint: evaluated.iconFootprint } : {},
+		...input.labelExtent ? { labelExtent: input.labelExtent } : {}
+	};
+}
+function compareCandidates(a, b) {
+	const rankA = selectionSurfaceRank(a);
+	const rankDifference = rankA - selectionSurfaceRank(b);
+	if (rankDifference !== 0) return rankDifference;
+	if (rankA === 0 && a.hit.distance !== null && b.hit.distance !== null) {
+		const distanceDifference = a.hit.distance - b.hit.distance;
+		if (distanceDifference !== 0) return distanceDifference;
+	}
+	return a.visualOrder - b.visualOrder;
+}
+function selectionSurfaceRank(candidate) {
+	if (candidate.hit.kind !== "polygon-interior") return 0;
+	return (candidate.presentation.fill?.opacity ?? 0) > 0 ? 1 : 2;
+}
+function resolvePickPresentation(feature, layerStyle) {
+	const featureStyle = asRecord(feature.properties?.style);
+	const strokeColor = stringValue(featureStyle?.strokeColor) ?? layerStyle?.strokeColor;
+	const strokeWidth = numberValue(featureStyle?.strokeWidth) ?? layerStyle?.strokeWidth;
+	const strokeDash = numberArray(featureStyle?.strokeDash) ?? layerStyle?.strokeDash;
+	const fillColor = stringValue(featureStyle?.fillColor) ?? layerStyle?.fillColor;
+	const fillPattern = stringValue(featureStyle?.fillPattern);
+	const pointFillColor = stringValue(featureStyle?.pointFillColor) ?? stringValue(featureStyle?.fillColor) ?? layerStyle?.pointFillColor ?? layerStyle?.fillColor;
+	const pointRadius = numberValue(featureStyle?.pointRadius) ?? layerStyle?.pointRadius;
+	const presentation = {};
+	if (strokeColor !== void 0 || strokeWidth !== void 0 || strokeDash !== void 0) presentation.stroke = {
+		...strokeColor !== void 0 ? { color: strokeColor } : {},
+		...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+		...strokeDash !== void 0 ? { dash: strokeDash } : {}
+	};
+	if (fillColor !== void 0 || fillPattern !== void 0) presentation.fill = {
+		...fillColor !== void 0 ? { color: fillColor } : {},
+		...fillPattern !== void 0 ? { pattern: fillPattern } : {},
+		opacity: colorOpacity(fillColor)
+	};
+	if (feature.geometry.type === "Point" && (pointFillColor !== void 0 || pointRadius !== void 0)) presentation.point = {
+		...pointFillColor !== void 0 ? { fillColor: pointFillColor } : {},
+		...pointRadius !== void 0 ? { radius: pointRadius } : {}
+	};
+	if (layerStyle?.text !== void 0) presentation.text = { ...layerStyle.text };
+	return presentation;
+}
+function evaluateInput(input, presentation, context) {
+	if (input.labelExtent && pointInExtent(context.pixel, input.labelExtent)) return { hit: {
+		kind: "label",
+		distance: 0
+	} };
+	if (input.icon) return evaluateIcon(input.feature, input.icon, context);
+	const geometryHit = evaluateGeometry(input.feature, presentation, context);
+	if (geometryHit) return { hit: geometryHit };
+	if (input.feature.geometry.type === "Polygon" || input.feature.geometry.type === "MultiPolygon") return null;
+	return input.nativeHit ? { hit: {
+		kind: inferNativeHitKind(input.feature),
+		distance: null
+	} } : null;
+}
+function inferNativeHitKind(feature) {
+	if (typeof feature.properties?.iconId === "string") return "icon";
+	if (typeof feature.properties?.text === "string") return "label";
+	if (feature.geometry.type === "Point") return "point";
+	if (feature.geometry.type === "LineString" || feature.geometry.type === "MultiLineString") return "line";
+	return "native";
+}
+function evaluateGeometry(feature, presentation, context) {
+	const geometry = feature.geometry;
+	const { pixel, tolerance, toPixel } = context;
+	if (geometry.type === "Point") {
+		const projected = toPixel(geometry.coordinates);
+		if (!projected) return null;
+		const distance = pointDistance(pixel, projected);
+		return distance <= tolerance ? {
+			kind: "point",
+			distance
+		} : null;
+	}
+	if (geometry.type === "LineString") {
+		const distance = distanceToLine(pixel, geometry.coordinates, toPixel);
+		return distance !== null && distance <= tolerance ? {
+			kind: "line",
+			distance
+		} : null;
+	}
+	if (geometry.type === "MultiLineString") {
+		const distance = minimum(geometry.coordinates.map((line) => distanceToLine(pixel, line, toPixel)));
+		return distance !== null && distance <= tolerance ? {
+			kind: "line",
+			distance
+		} : null;
+	}
+	if (geometry.type === "Polygon") return evaluatePolygon(pixel, geometry.coordinates, presentation, context);
+	if (geometry.type === "MultiPolygon") return bestPolygonHit(geometry.coordinates.map((polygon) => evaluatePolygon(pixel, polygon, presentation, context)).filter((hit) => hit !== null));
+	return null;
+}
+function evaluatePolygon(pixel, rings, presentation, context) {
+	const { tolerance, toPixel, viewport } = context;
+	const projectedRings = rings.map((ring) => ring.map(toPixel));
+	const distance = hasVisibleBoundary(presentation) ? minimum(projectedRings.map((points) => minVisibleSegmentDistance(pixel, points, viewport))) : null;
+	if (distance !== null && distance <= tolerance) return {
+		kind: "polygon-boundary",
+		distance
+	};
+	if (!(projectedRings.length > 0 && pointInProjectedRing(pixel, projectedRings[0]) && !projectedRings.slice(1).some((points) => pointInProjectedRing(pixel, points)))) return null;
+	const visiblyFilled = (presentation.fill?.opacity ?? 0) > 0;
+	const inwardReach = context.pointerType === "touch" ? 36 : 24;
+	if (visiblyFilled || distance !== null && distance <= inwardReach) return {
+		kind: "polygon-interior",
+		distance
+	};
+	return null;
+}
+function bestPolygonHit(hits) {
+	if (hits.length === 0) return null;
+	const boundary = hits.filter((hit) => hit.kind === "polygon-boundary");
+	if (boundary.length > 0) return boundary.reduce((best, hit) => (hit.distance ?? Infinity) < (best.distance ?? Infinity) ? hit : best);
+	return hits[0];
+}
+function evaluateIcon(feature, resource, context) {
+	if (feature.geometry.type !== "Point") return null;
+	const anchor = context.toPixel(feature.geometry.coordinates);
+	if (!anchor) return null;
+	const rawScale = feature.properties?.iconScale;
+	const scale = typeof rawScale === "number" ? rawScale : 1;
+	if (!Number.isFinite(scale) || scale <= 0) return null;
+	const rawRotation = feature.properties?.iconRotation;
+	const angle = (typeof rawRotation === "number" && Number.isFinite(rawRotation) ? rawRotation : 0) - (context.bearing ?? 0);
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const minX = -resource.anchor[0] * scale;
+	const maxX = (resource.width - resource.anchor[0]) * scale;
+	const minY = -resource.anchor[1] * scale;
+	const maxY = (resource.height - resource.anchor[1]) * scale;
+	const dx = context.pixel[0] - anchor[0];
+	const dy = context.pixel[1] - anchor[1];
+	const localX = dx * cos + dy * sin;
+	const localY = -dx * sin + dy * cos;
+	const outsideX = Math.max(minX - localX, 0, localX - maxX);
+	const outsideY = Math.max(minY - localY, 0, localY - maxY);
+	if (outsideX > context.tolerance || outsideY > context.tolerance) return null;
+	const coreRect = resource.coreRect ?? {
+		x: 0,
+		y: 0,
+		width: resource.width,
+		height: resource.height
+	};
+	const coreMinX = (coreRect.x - resource.anchor[0]) * scale;
+	const coreMaxX = (coreRect.x + coreRect.width - resource.anchor[0]) * scale;
+	const coreMinY = (coreRect.y - resource.anchor[1]) * scale;
+	const coreMaxY = (coreRect.y + coreRect.height - resource.anchor[1]) * scale;
+	const coreOutsideX = Math.max(coreMinX - localX, 0, localX - coreMaxX);
+	const coreOutsideY = Math.max(coreMinY - localY, 0, localY - coreMaxY);
+	const distance = Math.hypot(coreOutsideX, coreOutsideY);
+	const corner = (x, y) => [anchor[0] + x * cos - y * sin, anchor[1] + x * sin + y * cos];
+	return {
+		hit: {
+			kind: "icon",
+			distance
+		},
+		iconFootprint: [
+			corner(minX, minY),
+			corner(maxX, minY),
+			corner(maxX, maxY),
+			corner(minX, maxY)
+		]
+	};
+}
+function distanceToLine(pixel, coordinates, toPixel) {
+	return minSegmentDistance(pixel, coordinates.map(toPixel));
+}
+/** Nearest distance from `pixel` to any segment of a pre-projected polyline. */
+function minSegmentDistance(pixel, points) {
+	let closest = null;
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		if (!a || !b) continue;
+		const distance = distanceToSegment(pixel, a, b);
+		if (distance !== null && (closest === null || distance < closest)) closest = distance;
+	}
+	return closest;
+}
+/** As `minSegmentDistance`, but each segment is first clipped to `viewport`. */
+function minVisibleSegmentDistance(pixel, points, viewport) {
+	let closest = null;
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i];
+		const b = points[i + 1];
+		if (!a || !b) continue;
+		const visible = clipSegmentToBounds(a, b, viewport);
+		if (!visible) continue;
+		const [visibleA, visibleB] = visible;
+		const distance = visibleA[0] === visibleB[0] && visibleA[1] === visibleB[1] ? pointDistance(pixel, visibleA) : distanceToSegment(pixel, visibleA, visibleB);
+		if (distance !== null && (closest === null || distance < closest)) closest = distance;
+	}
+	return closest;
+}
+function clipSegmentToBounds(a, b, bounds) {
+	const dx = b[0] - a[0];
+	const dy = b[1] - a[1];
+	let start = 0;
+	let end = 1;
+	const edges = [
+		[-dx, a[0] - bounds.minX],
+		[dx, bounds.maxX - a[0]],
+		[-dy, a[1] - bounds.minY],
+		[dy, bounds.maxY - a[1]]
+	];
+	for (const [direction, offset] of edges) {
+		if (direction === 0) {
+			if (offset < 0) return null;
+			continue;
+		}
+		const ratio = offset / direction;
+		if (direction < 0) start = Math.max(start, ratio);
+		else end = Math.min(end, ratio);
+		if (start > end) return null;
+	}
+	return [[a[0] + start * dx, a[1] + start * dy], [a[0] + end * dx, a[1] + end * dy]];
+}
+function distanceToSegment(pixel, a, b) {
+	const dx = b[0] - a[0];
+	const dy = b[1] - a[1];
+	const lengthSq = dx * dx + dy * dy;
+	if (lengthSq === 0) return null;
+	const unclamped = ((pixel[0] - a[0]) * dx + (pixel[1] - a[1]) * dy) / lengthSq;
+	const t = Math.max(0, Math.min(1, unclamped));
+	return Math.hypot(pixel[0] - (a[0] + t * dx), pixel[1] - (a[1] + t * dy));
+}
+/**
+* Even-odd point-in-ring test over a pre-projected ring. Any vertex that
+* failed to project makes the whole ring inconclusive, matching the prior
+* "project every vertex or bail" contract.
+*/
+function pointInProjectedRing(pixel, points) {
+	let inside = false;
+	for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+		const pi = points[i];
+		const pj = points[j];
+		if (!pi || !pj) return false;
+		const [xi, yi] = pi;
+		const [xj, yj] = pj;
+		if (yi > pixel[1] !== yj > pixel[1] && pixel[0] < (xj - xi) * (pixel[1] - yi) / (yj - yi) + xi) inside = !inside;
+	}
+	return inside;
+}
+function pointInExtent(pixel, extent) {
+	if ("minX" in extent) return pixel[0] >= extent.minX && pixel[0] <= extent.maxX && pixel[1] >= extent.minY && pixel[1] <= extent.maxY;
+	const dx = pixel[0] - extent.center[0];
+	const dy = pixel[1] - extent.center[1];
+	const cos = Math.cos(-extent.angle);
+	const sin = Math.sin(-extent.angle);
+	const localX = dx * cos - dy * sin;
+	const localY = dx * sin + dy * cos;
+	return Math.abs(localX) <= extent.halfWidth && Math.abs(localY) <= extent.halfHeight;
+}
+function pointDistance(a, b) {
+	return Math.hypot(a[0] - b[0], a[1] - b[1]);
+}
+function minimum(values) {
+	let result = null;
+	for (const value of values) if (value !== null && (result === null || value < result)) result = value;
+	return result;
+}
+function colorOpacity(color) {
+	if (color === void 0) return 0;
+	const normalized = color.trim().toLowerCase();
+	if (normalized === "transparent") return 0;
+	if (/^#[0-9a-f]{4}$/i.test(normalized)) return parseInt(normalized[4], 16) / 15;
+	if (/^#[0-9a-f]{8}$/i.test(normalized)) return parseInt(normalized.slice(7, 9), 16) / 255;
+	const functional = normalized.match(/^[a-z]+\((.*)\)$/);
+	if (functional) {
+		const body = functional[1];
+		const slashAlpha = body.match(/\/\s*([+-]?(?:\d*\.)?\d+)(%)?\s*$/);
+		if (slashAlpha) return normalizedAlpha(slashAlpha[1], slashAlpha[2] === "%");
+		const commaParts = body.split(",").map((part) => part.trim());
+		if (commaParts.length === 4) {
+			const alpha = commaParts[3].match(/^([+-]?(?:\d*\.)?\d+)(%)?$/);
+			if (alpha) return normalizedAlpha(alpha[1], alpha[2] === "%");
+		}
+	}
+	return 1;
+}
+function normalizedAlpha(value, percentage) {
+	const alpha = Number(value);
+	if (!Number.isFinite(alpha)) return 1;
+	return Math.max(0, Math.min(1, percentage ? alpha / 100 : alpha));
+}
+function hasVisibleBoundary(presentation) {
+	const stroke = presentation.stroke;
+	if (!stroke || stroke.color === void 0) return false;
+	if (stroke.width !== void 0 && stroke.width <= 0) return false;
+	return colorOpacity(stroke.color) > 0;
+}
+function asRecord(value) {
+	return value !== null && typeof value === "object" ? value : void 0;
+}
+function stringValue(value) {
+	return typeof value === "string" ? value : void 0;
+}
+function numberValue(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function numberArray(value) {
+	return Array.isArray(value) && value.every((item) => typeof item === "number") ? [...value] : void 0;
+}
+//#endregion
 //#region src/feature-style.ts
 /**
 * Coerce a raw `properties.style` value into a `HandleStyle` for the
@@ -334,41 +711,6 @@ function clampedSegmentParameter(pixel, a, b) {
 	const t = ((pixel[0] - a[0]) * dx + (pixel[1] - a[1]) * dy) / lengthSq;
 	return Math.max(0, Math.min(1, t));
 }
-/** Distance from `pixel` to the segment p1→p2 in pixel space, or null if either endpoint fails to project or the segment has zero length. */
-function pixelDistanceToSegment(pixel, p1, p2, toPixel) {
-	const a = toPixel(p1);
-	const b = toPixel(p2);
-	if (!a || !b) return null;
-	const t = clampedSegmentParameter(pixel, a, b);
-	if (t === null) return null;
-	const ddx = pixel[0] - (a[0] + t * (b[0] - a[0]));
-	const ddy = pixel[1] - (a[1] + t * (b[1] - a[1]));
-	return Math.sqrt(ddx * ddx + ddy * ddy);
-}
-/** Even-odd point-in-ring test in pixel space. */
-function pixelPointInRing(pixel, ring, toPixel) {
-	const projected = [];
-	for (const c of ring) {
-		const p = toPixel(c);
-		if (!p) return false;
-		projected.push(p);
-	}
-	const [px, py] = pixel;
-	let inside = false;
-	for (let i = 0, j = projected.length - 1; i < projected.length; j = i++) {
-		const xi = projected[i][0], yi = projected[i][1];
-		const xj = projected[j][0], yj = projected[j][1];
-		if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi) inside = !inside;
-	}
-	return inside;
-}
-function isNearAnySegment(pixel, ring, hitTolerance, toPixel) {
-	for (let i = 0; i < ring.length - 1; i++) {
-		const d = pixelDistanceToSegment(pixel, ring[i], ring[i + 1], toPixel);
-		if (d !== null && d <= hitTolerance) return true;
-	}
-	return false;
-}
 /**
 * Test whether `pixel` hits any feature in `features`, in pixel space.
 *
@@ -381,23 +723,28 @@ function isNearAnySegment(pixel, ring, hitTolerance, toPixel) {
 * Returns the first matching feature in iteration order, or null.
 */
 function hitTestFeature(pixel, features, hitTolerance, toPixel) {
-	const [px, py] = pixel;
-	for (const f of features) {
-		if (!f) continue;
-		const geom = f.geometry;
-		let hit = false;
-		if (geom.type === "Point") {
-			const p = toPixel(geom.coordinates);
-			if (p) {
-				const dx = p[0] - px;
-				const dy = p[1] - py;
-				hit = Math.sqrt(dx * dx + dy * dy) <= hitTolerance;
-			}
-		} else if (geom.type === "LineString") hit = isNearAnySegment(pixel, geom.coordinates, hitTolerance, toPixel);
-		else if (geom.type === "MultiLineString") hit = geom.coordinates.some((line) => isNearAnySegment(pixel, line, hitTolerance, toPixel));
-		else if (geom.type === "Polygon") hit = geom.coordinates.some((ring) => pixelPointInRing(pixel, ring, toPixel)) || geom.coordinates.some((ring) => isNearAnySegment(pixel, ring, hitTolerance, toPixel));
-		else if (geom.type === "MultiPolygon") hit = geom.coordinates.some((poly) => poly.some((ring) => pixelPointInRing(pixel, ring, toPixel))) || geom.coordinates.some((poly) => poly.some((ring) => isNearAnySegment(pixel, ring, hitTolerance, toPixel)));
-		if (hit) return f;
+	for (const feature of features) {
+		if (!feature) continue;
+		const candidate = evaluatePickCandidates([{
+			feature,
+			visualOrder: 0,
+			...feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon" ? { presentation: {
+				stroke: {
+					color: "#000",
+					width: 1
+				},
+				fill: {
+					color: "#000",
+					opacity: 1
+				}
+			} } : {}
+		}], {
+			pixel,
+			tolerance: hitTolerance,
+			toPixel,
+			viewport: UNBOUNDED_VIEWPORT
+		});
+		if (candidate) return candidate.feature;
 	}
 	return null;
 }
@@ -408,26 +755,24 @@ function hitTestFeature(pixel, features, hitTolerance, toPixel) {
 * unscaled SVG viewport. A positive tolerance pads all four sides.
 */
 function hitTestIconFeature(pixel, feature, resource, hitTolerance, toPixel, bearing = 0) {
-	if (feature.geometry.type !== "Point") return false;
-	const anchor = toPixel(feature.geometry.coordinates);
-	if (!anchor) return false;
-	const rawScale = feature.properties?.iconScale;
-	const scale = typeof rawScale === "number" ? rawScale : 1;
-	if (!Number.isFinite(scale) || scale <= 0) return false;
-	const rawRotation = feature.properties?.iconRotation;
-	const angle = (typeof rawRotation === "number" && Number.isFinite(rawRotation) ? rawRotation : 0) - bearing;
-	const cos = Math.cos(angle);
-	const sin = Math.sin(angle);
-	const dx = pixel[0] - anchor[0];
-	const dy = pixel[1] - anchor[1];
-	const localX = dx * cos + dy * sin;
-	const localY = -dx * sin + dy * cos;
-	const minX = -resource.anchor[0] * scale - hitTolerance;
-	const maxX = (resource.width - resource.anchor[0]) * scale + hitTolerance;
-	const minY = -resource.anchor[1] * scale - hitTolerance;
-	const maxY = (resource.height - resource.anchor[1]) * scale + hitTolerance;
-	return localX >= minX && localX <= maxX && localY >= minY && localY <= maxY;
+	return evaluatePickCandidates([{
+		feature,
+		visualOrder: 0,
+		icon: resource
+	}], {
+		pixel,
+		tolerance: hitTolerance,
+		toPixel,
+		viewport: UNBOUNDED_VIEWPORT,
+		bearing
+	}) !== null;
 }
+const UNBOUNDED_VIEWPORT = {
+	minX: Number.NEGATIVE_INFINITY,
+	minY: Number.NEGATIVE_INFINITY,
+	maxX: Number.POSITIVE_INFINITY,
+	maxY: Number.POSITIVE_INFINITY
+};
 //#endregion
 //#region src/gestures/hit-tolerance.ts
 const TOUCH_HIT_TOLERANCE_PX = 22;
@@ -1809,7 +2154,7 @@ function runVariableLengthDraw(options) {
 		if (lastSpineIdx >= 0 && canCommitNow()) for (const finishIndex of finishIndices) {
 			const finishPixel = adapter.getPixelFromCoordinate(committed[finishIndex]);
 			if (!finishPixel) continue;
-			const tol = mapEventHitTolerance(event.originalEvent);
+			const tol = pickHitTolerance(event.originalEvent);
 			const dx = event.pixel[0] - finishPixel[0];
 			const dy = event.pixel[1] - finishPixel[1];
 			if (dx * dx + dy * dy <= tol * tol) {
@@ -4363,7 +4708,13 @@ function renderPointSymbolForAdapter(adapter, capability, symbol) {
 			svg: render.svg,
 			width: render.width,
 			height: render.height,
-			anchor: [render.anchor.x, render.anchor.y]
+			anchor: [render.anchor.x, render.anchor.y],
+			coreRect: {
+				x: render.octagonAnchor.x - render.octagonSize / 2,
+				y: render.octagonAnchor.y - render.octagonSize / 2,
+				width: render.octagonSize,
+				height: render.octagonSize
+			}
 		},
 		feature: pointSymbolFeature(symbol, render, adapter.getResolution())
 	};
@@ -5492,6 +5843,7 @@ function runPointSymbolEdit(opts) {
 var TacticalDraw = class {
 	adapter;
 	graphicsLayer;
+	highlightLayer;
 	previewLayer;
 	guideLayer;
 	handlesLayer;
@@ -5553,6 +5905,20 @@ var TacticalDraw = class {
 	*/
 	lastRenderedMeasures = [];
 	snapGeometryFeatures = [];
+	/**
+	* Ids of graphics currently carrying a passive selection-highlight outline
+	* ({@link setHighlightedGraphics}). Declarative set-replace, no session —
+	* re-projected on every view change and re-evaluated at the end of every
+	* `render()` so outlines track geometry, style, and dropped graphics.
+	*/
+	highlightedIds = [];
+	/**
+	* Whether the highlight layer currently holds any outline. Lets
+	* `renderHighlights` skip a redundant empty write on every view change /
+	* render while no highlights are set, but still emit the one clearing write
+	* that removes outlines when the set transitions to empty.
+	*/
+	hasHighlightOutlines = false;
 	constructor(adapter, options) {
 		this.adapter = adapter;
 		this.graphicsStyle = resolveStyleHints(BUILT_IN_GRAPHICS_STYLE, options?.graphicsStyle, void 0);
@@ -5564,6 +5930,7 @@ var TacticalDraw = class {
 		const owned = /* @__PURE__ */ new Set();
 		const provided = options?.layers ?? {};
 		this.graphicsLayer = resolveSlot(adapter, provided.graphics, owned);
+		this.highlightLayer = resolveSlot(adapter, provided.highlight, owned);
 		this.previewLayer = resolveSlot(adapter, provided.preview, owned);
 		this.guideLayer = resolveSlot(adapter, provided.guide, owned);
 		this.handlesLayer = resolveSlot(adapter, provided.handles, owned);
@@ -5572,6 +5939,7 @@ var TacticalDraw = class {
 		this.adapter.setLayerStyle(this.graphicsLayer, graphicsLayerStyle);
 		this.adapter.setLayerStyle(this.previewLayer, graphicsLayerStyle);
 		this.adapter.setLayerStyle(this.guideLayer, guideToStyleOptions(this.baseGuideStyle()));
+		this.adapter.setLayerStyle(this.highlightLayer, guideToStyleOptions(this.baseHighlightStyle()));
 		this.adapter.onViewChange(this.handleViewChange);
 	}
 	/** Replace snapping configuration without recreating the map adapter or façade. */
@@ -5619,6 +5987,7 @@ var TacticalDraw = class {
 	*/
 	handleViewChange = () => {
 		if (this.destroyed || !this.hasRendered) return;
+		this.renderHighlights();
 		const excluded = this.excludedInteractionIds();
 		const visible = excluded.size > 0 ? this.lastRenderedMeasures.filter((m) => !excluded.has(m.id)) : this.lastRenderedMeasures;
 		const nativeGroundIconScaling = this.adapter.scalesGroundPointSymbolsNatively === true;
@@ -5716,6 +6085,88 @@ var TacticalDraw = class {
 				if (handle.graphicIds.some((id) => !rendered.has(id))) handle.abort("removed");
 			});
 		}
+		this.renderHighlights();
+	}
+	/**
+	* Replace the passive selection-highlight set with `ids`. Declarative and
+	* idempotent (mirrors {@link render}): a non-interactive outline box is drawn
+	* around each still-rendered graphic on the dedicated highlight layer — no
+	* draw / edit / transform session, no promise, no pick subscription. Passing
+	* `[]` clears every highlight. Unknown ids and ids currently lifted into an
+	* active edit / transform session are skipped (the live session's own visuals
+	* supersede the passive outline). Hosts use it for Excalidraw-style
+	* "locked selection" chrome.
+	*/
+	setHighlightedGraphics(ids) {
+		this.assertAlive();
+		this.highlightedIds = ids.slice();
+		this.renderHighlights();
+	}
+	/**
+	* Project the current {@link highlightedIds} into one outline `LineString`
+	* per graphic and reconcile them onto the highlight layer. Idempotent and
+	* id-keyed via `adapter.updateLayerFeatures`, so a set-replace removes stale
+	* outlines and an unchanged set is a cheap no-op write. Skips ids that are
+	* unknown (not in the last render) or lifted into an active session, and
+	* bails gracefully when the adapter cannot invert pixels to coordinates
+	* (`getCoordinateFromPixel` is optional in the MapAdapter ABI).
+	*/
+	renderHighlights() {
+		if (this.destroyed) return;
+		if (this.highlightedIds.length === 0 && !this.hasHighlightOutlines) return;
+		const fromPixel = this.adapter.getCoordinateFromPixel?.bind(this.adapter);
+		if (!fromPixel) return;
+		const resolved = this.resolveInteractionStyle(void 0);
+		const style = resolved.highlightOutline;
+		const padding = resolved.boxPadding ?? 0;
+		const excluded = this.excludedInteractionIds();
+		const bearing = this.adapter.getBearing();
+		const features = [];
+		for (const id of this.highlightedIds) {
+			if (excluded.has(id)) continue;
+			const graphic = this.lastRenderedMeasures.find((g) => g.id === id);
+			if (!graphic) continue;
+			const box = this.highlightBoxForGraphic(graphic, bearing, padding);
+			if (!box) continue;
+			let invertFailed = false;
+			const invert = (pixel) => {
+				const coord = fromPixel(pixel);
+				if (!coord) {
+					invertFailed = true;
+					return [pixel[0], pixel[1]];
+				}
+				return coord;
+			};
+			const feature = boxOutlineFeature(box, invert, `__td_highlight__:${id}`, style);
+			if (!invertFailed) features.push(feature);
+		}
+		this.adapter.updateLayerFeatures(this.highlightLayer, features);
+		this.hasHighlightOutlines = features.length > 0;
+	}
+	/**
+	* Fit the passive-highlight transform box for one graphic: the point-symbol
+	* footprint for symbols, the snug text footprint for Text graphics, and the
+	* projected-geometry bounding box (at the current bearing) for every other
+	* control measure. Returns `null` when nothing projects this frame.
+	*/
+	highlightBoxForGraphic(graphic, bearing, padding) {
+		if (isPointSymbol(graphic)) {
+			if (!this.pointSymbols) return null;
+			return pointSymbolFootprint(graphic, this.pointSymbols.render(graphic), this.adapter)?.box ?? null;
+		}
+		const render = renderMeasureForAdapter(this.adapter, graphic, { graphicsStyle: this.graphicsStyle });
+		if (graphic.kind === "text") return fitTextFootprintFromFeatures(render.features, (lonLat) => this.adapter.getPixelFromCoordinate(lonLat), {
+			resolution: this.adapter.getResolution(),
+			bearing
+		});
+		const positions = [];
+		for (const feature of render.features) if (feature.geometry) collectFeaturePositions(feature.geometry, positions);
+		const pixels = [];
+		for (const position of positions) {
+			const pixel = this.adapter.getPixelFromCoordinate(position);
+			if (pixel) pixels.push(pixel);
+		}
+		return fitTransformBox(pixels, bearing, padding);
 	}
 	/**
 	* Nested-call guard + preempt, shared by `draw` and `edit`. Returns a
@@ -5770,6 +6221,7 @@ var TacticalDraw = class {
 			clearSlot();
 			this.clearSnapResult();
 			if (extraSettle) extraSettle();
+			this.renderHighlights();
 		};
 		this.activeInteraction.begin();
 		try {
@@ -5781,7 +6233,10 @@ var TacticalDraw = class {
 		}
 		if (!settledDuringCreate) {
 			this.activeInteraction.set(handle);
-			if (activate && !handle.settled) deactivate = activate(handle) ?? null;
+			if (activate && !handle.settled) {
+				deactivate = activate(handle) ?? null;
+				this.renderHighlights();
+			}
 		}
 		handle.promise.then(clearSlot, clearSlot);
 		return handle.promise;
@@ -6116,7 +6571,11 @@ var TacticalDraw = class {
 	* then `previewLayer`, then `graphicsLayer` — against each layer's current
 	* `adapter.getLayerFeatures(...)` cache. The `guideLayer` is deliberately
 	* excluded: it is non-interactive draw-guide scaffolding, never a
-	* legitimate "owned" click target.
+	* legitimate "owned" click target. Within each layer, candidates follow
+	* the shared visible-intent ranking (direct marks, then filled interiors,
+	* then inferred outline-only reach, distance within direct marks, then
+	* visual topmost order) — this explicit-affordance layer order is the
+	* tier above all of it.
 	*
 	* `preview` and `graphics` each get a label text-extent fallback after the
 	* geometry pass misses on that layer: for every `Point` feature carrying a
@@ -6127,7 +6586,7 @@ var TacticalDraw = class {
 	* This matters most for the active preview, since a click can land
 	* anywhere across a rotated/offset label during an edit.
 	*
-	* `tolerance` defaults to `mapEventHitTolerance(options?.originalEvent)` —
+	* `tolerance` defaults to `pickHitTolerance(options?.originalEvent)` —
 	* pass the host's raw click event as `originalEvent` to get the same
 	* pointer-type-aware tolerance (4px mouse/pen, 12px touch) `onPick` uses;
 	* pass an explicit `tolerance` to override it outright.
@@ -6143,7 +6602,7 @@ var TacticalDraw = class {
 	*/
 	ownsInteractionAt(pixel, options) {
 		this.assertAlive();
-		const tolerance = options?.tolerance ?? mapEventHitTolerance(options?.originalEvent);
+		const tolerance = options?.tolerance ?? pickHitTolerance(options?.originalEvent);
 		const toPixel = (lonLat) => this.adapter.getPixelFromCoordinate(lonLat);
 		const layers = [
 			{
@@ -6162,20 +6621,48 @@ var TacticalDraw = class {
 				labelFallback: true
 			}
 		];
+		const size = this.adapter.getViewportSize();
+		const context = {
+			pixel,
+			pointerType: pickPointerType(options?.originalEvent),
+			tolerance,
+			toPixel,
+			viewport: {
+				minX: 0,
+				minY: 0,
+				maxX: size.width,
+				maxY: size.height
+			},
+			bearing: this.adapter.getBearing()
+		};
 		for (const { layer, layerId, labelFallback } of layers) {
 			const features = this.adapter.getLayerFeatures(layerId);
-			const hit = hitTestFeature(pixel, features, tolerance, toPixel);
-			if (hit) return this.toInteractionHit(layer, hit);
-			if (labelFallback) for (const feature of features) {
-				if (feature.geometry?.type !== "Point") continue;
-				if (typeof feature.properties?.text !== "string") continue;
-				const anchorPixel = toPixel(feature.geometry.coordinates);
-				if (!anchorPixel) continue;
-				const box = fitLabelBoxFromFeature(feature, anchorPixel, {
-					resolution: this.adapter.getResolution(),
-					bearing: this.adapter.getBearing()
-				});
-				if (box && pointInBox(box, pixel)) return this.toInteractionHit(layer, feature);
+			const geometryCandidate = evaluatePickCandidates(features.map((feature, index) => ({
+				feature,
+				visualOrder: renderOrderToVisualOrder(index, features.length)
+			})), context);
+			if (geometryCandidate) return this.toInteractionHit(layer, geometryCandidate.feature);
+			if (labelFallback) {
+				const labelCandidates = [];
+				for (const feature of features) {
+					if (feature.geometry?.type !== "Point") continue;
+					if (typeof feature.properties?.text !== "string") continue;
+					const anchorPixel = toPixel(feature.geometry.coordinates);
+					if (!anchorPixel) continue;
+					const box = fitLabelBoxFromFeature(feature, anchorPixel, {
+						resolution: this.adapter.getResolution(),
+						bearing: this.adapter.getBearing()
+					});
+					if (box) labelCandidates.push({
+						feature,
+						labelExtent: box
+					});
+				}
+				const labelCandidate = evaluatePickCandidates(labelCandidates.map((candidate, index) => ({
+					...candidate,
+					visualOrder: renderOrderToVisualOrder(index, labelCandidates.length)
+				})), context);
+				if (labelCandidate) return this.toInteractionHit(layer, labelCandidate.feature);
 			}
 		}
 		return null;
@@ -6265,6 +6752,7 @@ var TacticalDraw = class {
 	get layerIds() {
 		return {
 			graphics: this.graphicsLayer,
+			highlight: this.highlightLayer,
 			preview: this.previewLayer,
 			guide: this.guideLayer,
 			handles: this.handlesLayer
@@ -6287,6 +6775,9 @@ var TacticalDraw = class {
 	baseGuideStyle() {
 		return mergeSlot(BUILT_IN_INTERACTION_STYLE.guide, this.defaultInteractionStyle?.guide);
 	}
+	baseHighlightStyle() {
+		return mergeSlot(BUILT_IN_INTERACTION_STYLE.highlightOutline, this.defaultInteractionStyle?.highlightOutline);
+	}
 	/**
 	* Resolve handle slots (plus `boxOutline`) across built-in → façade →
 	* per-call with per-slot, per-property shallow merge. Explicit `undefined`
@@ -6314,6 +6805,8 @@ var TacticalDraw = class {
 		}
 		const boxOutline = mergeSlot(mergeSlot(BUILT_IN_INTERACTION_STYLE.boxOutline, this.defaultInteractionStyle?.boxOutline), perCall?.boxOutline);
 		if (boxOutline) out.boxOutline = boxOutline;
+		const highlightOutline = mergeSlot(mergeSlot(BUILT_IN_INTERACTION_STYLE.highlightOutline, this.defaultInteractionStyle?.highlightOutline), perCall?.highlightOutline);
+		if (highlightOutline) out.highlightOutline = highlightOutline;
 		const boxPadding = perCall && "boxPadding" in perCall ? perCall.boxPadding : this.defaultInteractionStyle && "boxPadding" in this.defaultInteractionStyle ? this.defaultInteractionStyle.boxPadding : void 0;
 		if (typeof boxPadding === "number") out.boxPadding = boxPadding;
 		return out;
@@ -6354,6 +6847,11 @@ const BUILT_IN_INTERACTION_STYLE = {
 		strokeColor: "#4f7cff",
 		strokeWidth: 1
 	},
+	highlightOutline: {
+		strokeColor: "#8ea3c9",
+		strokeWidth: 1.5,
+		strokeDash: [4, 4]
+	},
 	vertexHandle: {
 		pointRadius: 6,
 		fillColor: "#ffffff",
@@ -6593,4 +7091,4 @@ function nearestWorldCopyPosition(position, refLng) {
 	return [nearestWorldCopyLng(position[0], refLng), ...position.slice(1)];
 }
 //#endregion
-export { BaseMapAdapter, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, PointSymbolCapabilityRequiredError, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, TacticalDrawDestroyedError, bindAbortable, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, effectivePointSymbolPixelSize, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, nearestWorldCopyLng, nearestWorldCopyPosition, pickHitTolerance, pointSymbolFootprint, resizePointSymbolSize, resolveGroundTextSizePixels, resolveTextSizePixels, tryControlMeasureIdFromFeature };
+export { BaseMapAdapter, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, PointSymbolCapabilityRequiredError, PointerCallbackHub, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, TacticalDrawDestroyedError, bindAbortable, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, effectivePointSymbolPixelSize, evaluatePickCandidates, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, nearestWorldCopyPosition, pickHitTolerance, pickPointerType, pointSymbolFootprint, renderOrderToVisualOrder, resizePointSymbolSize, resolveGroundTextSizePixels, resolvePickPresentation, resolveTextSizePixels, tryControlMeasureIdFromFeature };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbat-mapper/tactical-draw",
-  "version": "0.2.0-alpha.31",
+  "version": "0.2.0-alpha.33",
   "description": "Engine-agnostic draw/edit core for tactical control measures (MIL-STD-2525 / APP-6). The MapAdapter ABI and bring-your-own-engine entry point for the tactical-draw package family.",
   "license": "MIT",
   "author": "Orbat Mapper",