@oicl/openbridge-webcomponents 2.0.0-next.170 → 2.0.0-next.171

package/bundle/openbridge-webcomponents.bundle.js

@@ -5776,16 +5776,22 @@ var ObcPoiButton = class ObcPoiButton extends i$4 {
 		this.data = [];
 		this.hasRelation = false;
 		this.headerContent = "";
+		this.handleLightSlotChange = () => {
+			this.requestUpdate();
+			this.syncSlottedHeaderState();
+		};
 		this.handleHeaderSlotChange = () => {
 			this.syncSlottedHeaderState();
 		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.addEventListener("slotchange", this.handleLightSlotChange);
 		this.setupHeaderContentObserver();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.removeEventListener("slotchange", this.handleLightSlotChange);
 		this.headerContentObserver?.disconnect();
 		this.headerContentObserver = void 0;
 	}
@@ -5831,7 +5837,10 @@ var ObcPoiButton = class ObcPoiButton extends i$4 {
 		}
 	}
 	get hasHeaderContent() {
-		return this.querySelector("[slot=\"header\"]") !== null;
+		for (const child of this.querySelectorAll("[slot=\"header\"]")) if (child instanceof HTMLSlotElement) {
+			if (child.assignedElements({ flatten: true }).length > 0) return true;
+		} else return true;
+		return false;
 	}
 	get hasGeneratedHeaderContent() {
 		return this.headerContent.trim().length > 0;
@@ -8089,6 +8098,7 @@ var ObcPoiCard = class ObcPoiCard extends i$4 {
 		if (!this.showHeader) return A;
 		return b`
       <obc-poi-card-header
+        part="header"
         variant=${this.headerVariant}
         index=${this.index}
         cardTitle=${this.cardTitle}
@@ -8116,6 +8126,7 @@ var ObcPoiCard = class ObcPoiCard extends i$4 {
 	render() {
 		return b`
       <div
+        part="wrapper"
         class=${e$2({
 			wrapper: true,
 			"hug-content": !this.fixedSize,
@@ -8127,6 +8138,7 @@ var ObcPoiCard = class ObcPoiCard extends i$4 {
         <div class="center">
           ${this.renderLeftPointer()}
           <div
+            part="content-box"
             class="content-box"
             role=${this.interactive ? "button" : A}
             tabindex=${this.interactive ? "0" : A}
@@ -8136,7 +8148,7 @@ var ObcPoiCard = class ObcPoiCard extends i$4 {
             @keyup=${this.handleKeyUp}
           >
             ${this.renderHeader()}
-            <div class="content">
+            <div part="content" class="content">
               <slot></slot>
             </div>
             ${this.renderAlertLayer()}
@@ -8255,10 +8267,13 @@ var poi_layer_default = i$7`* {
 
   --obc-poi-layer-height: auto;
   --obc-poi-layer-auto-group-offset-y: 0;
-  --obc-poi-layer-line-length: 120px;
   --obc-poi-layer-exit-delay-ms: 140;
   --obc-poi-layer-group-removal-delay-ms: 250;
   --obc-poi-layer-exit-lock-duration-ms: 500;
+  --obc-poi-layer-overlap-enter: 10px;
+  --obc-poi-layer-overlap-exit: 18px;
+  --obc-poi-layer-overlap-pre: 16px;
+  --obc-poi-layer-overlap-behind: 10px;
 }
 
 .wrapper.debug {
@@ -8284,8 +8299,10 @@ var poi_layer_default = i$7`* {
   pointer-events: none;
 }
 
-::slotted([data-poi-target]),
-::slotted(obc-poi-group) {
+/* ---------- Main slot: ungrouped targets and manual groups ---------- */
+
+.main::slotted([data-poi-target]),
+.main::slotted(obc-poi-group) {
   position: absolute;
   bottom: 0;
   height: 100%;
@@ -8305,59 +8322,105 @@ var poi_layer_default = i$7`* {
   pointer-events: auto;
 }
 
-::slotted([data-poi-target][data-grouped]) {
+.main::slotted([data-poi-target][data-grouped]) {
   opacity: 0;
 }
 
-::slotted([data-poi-target]:not([data-grouped])) {
+.main::slotted([data-poi-target]:not([data-grouped])) {
   opacity: 1;
 }
 
-::slotted([data-poi-target][data-behind]) {
+.main::slotted([data-poi-target][data-behind]) {
   opacity: 0.4;
   --poi-size: 32px;
   --obc-poi-target-icon-opacity: 0;
 }
 
-::slotted([data-poi-target][data-exiting]) {
+.main::slotted([data-poi-target][data-exiting]) {
   opacity: 0.4;
   --poi-size: 32px;
   --obc-poi-target-icon-opacity: 0;
 }
 
-::slotted([data-poi-target][data-front]) {
+.main::slotted([data-poi-target][data-front]) {
   opacity: 1;
   --poi-size: 36px;
   --obc-poi-target-icon-opacity: 1;
 }
 
-::slotted(obc-poi-group[data-auto-group]) {
-  opacity: 1;
-}
-
-::slotted(obc-poi-group) {
+.main::slotted(obc-poi-group) {
   bottom: 0;
   height: 100%;
   transform: none;
   pointer-events: none;
 }
 
-::slotted(obc-poi-group[data-auto-group]) {
+.main::slotted(obc-poi-group[data-exiting]) {
+  pointer-events: none;
+}
+
+/* ---------- Auto groups: shadow chrome, members slot-assigned ---------- */
+
+.wrapper > obc-poi-group[data-auto-group] {
   opacity: 0;
   z-index: 2;
   transition: opacity 0.1s ease-out;
 }
 
-::slotted(obc-poi-group[data-auto-group][data-visible]) {
+.wrapper > obc-poi-group[data-auto-group][data-visible] {
   opacity: 1;
 }
 
-::slotted(obc-poi-group[data-exiting]) {
+.wrapper > obc-poi-group[data-auto-group][data-exiting] {
   pointer-events: none;
 }
 
-:host([data-stack-inactive]) ::slotted([data-poi-target]:not([data-grouped])),
-:host([data-stack-inactive]) ::slotted(obc-poi-group) {
+/*
+ * Members of auto groups stay in the consumer's light DOM but are assigned
+ * to the group's member slot, so they are styled from the layer stylesheet
+ * (mirrors the grouped-target rules previously in poi-group.css).
+ */
+.auto-group-members::slotted([data-poi-target]) {
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  height: 100%;
+  transform-origin: 50% 50%;
+  --obc-poi-layer-target-scale: 1;
+  --obc-poi-layer-target-shift: calc(
+    (1 - var(--obc-poi-layer-target-scale)) * 100%
+  );
+  transform: translateX(var(--obc-poi-target-offset-x, 0px))
+    translateY(calc(100% - var(--obc-poi-layer-target-shift)))
+    scale(var(--obc-poi-layer-target-scale));
+  transition: opacity 0.1s ease-out;
+  pointer-events: auto;
+}
+
+.auto-group-members::slotted([data-poi-target][data-behind]),
+.auto-group-members::slotted([data-poi-target][data-exiting]) {
+  opacity: 0.4;
+  --poi-size: 32px;
+  --obc-poi-target-icon-opacity: 0;
+}
+
+.auto-group-members::slotted([data-poi-target][data-front]) {
+  opacity: 1;
+  --poi-size: 36px;
+  --obc-poi-target-icon-opacity: 1;
+}
+
+.auto-group-members::slotted([data-poi-target][data-grouped]) {
+  opacity: 1;
+  transition: opacity 0.1s ease-out;
+}
+
+/* ---------- Inactive stack layer dimming ---------- */
+
+:host([data-stack-inactive])
+  .main::slotted([data-poi-target]:not([data-grouped])),
+:host([data-stack-inactive]) .main::slotted(obc-poi-group),
+:host([data-stack-inactive]) .wrapper > obc-poi-group[data-auto-group] {
   --obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
   --obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
   --obc-poi-overlap-elements-opacity: var(
@@ -8895,7 +8958,6 @@ var ObcPoiState = /* @__PURE__ */ function(ObcPoiState) {
 	ObcPoiState["Alarm"] = "alarm";
 	return ObcPoiState;
 }({});
-var DEFAULT_LINE_LENGTH_PX = 96;
 var POINTER_BOX_BASE_SIZE_PX = 32;
 var POINT_POINTER_OFFSET_PX = 12;
 var ObcPoi = class ObcPoi extends i$4 {
@@ -8915,7 +8977,7 @@ var ObcPoi = class ObcPoi extends i$4 {
 		this.pointerState = null;
 		this.relativeDirection = 0;
 		this.x = 0;
-		this.y = DEFAULT_LINE_LENGTH_PX;
+		this.y = 192;
 		this.buttonY = 0;
 		this.fixedTarget = false;
 		this.buttonOffsetX = 0;
@@ -8926,37 +8988,6 @@ var ObcPoi = class ObcPoi extends i$4 {
 		this.animatePosition = false;
 		this.slottedButton = null;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.setupHeaderObserver();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.headerObserver?.disconnect();
-		this.headerObserver = void 0;
-	}
-	setupHeaderObserver() {
-		this.headerObserver?.disconnect();
-		this.headerObserver = new MutationObserver((mutations) => {
-			for (const mutation of mutations) {
-				if (mutation.type === "childList") {
-					this.syncFallbackButtonHeaderContent();
-					this.syncAttachedHeaderState();
-					return;
-				}
-				if (mutation.type === "attributes" && mutation.target instanceof HTMLElement && mutation.target.getAttribute("slot") === "header") {
-					this.syncFallbackButtonHeaderContent();
-					this.syncAttachedHeaderState();
-					return;
-				}
-			}
-		});
-		this.headerObserver.observe(this, {
-			childList: true,
-			attributes: true,
-			attributeFilter: ["slot"]
-		});
-	}
 	updatePosition() {
 		this.style.removeProperty("top");
 		if (this.fixedTarget) {
@@ -8991,15 +9022,6 @@ var ObcPoi = class ObcPoi extends i$4 {
 			default: return ObcPoiButtonState.Enabled;
 		}
 	}
-	get resolvedHeaderState() {
-		switch (this.buttonState) {
-			case ObcPoiButtonState.Caution: return ObcPoiHeaderState.Caution;
-			case ObcPoiButtonState.Warning: return ObcPoiHeaderState.Warning;
-			case ObcPoiButtonState.Alarm: return ObcPoiHeaderState.Alarm;
-			case ObcPoiButtonState.Enabled:
-			default: return this.selected ? ObcPoiHeaderState.Selected : ObcPoiHeaderState.Enabled;
-		}
-	}
 	get lineStyle() {
 		if (this.state === "alarm") return POIStyle.Alarm;
 		if (this.state === "warning") return POIStyle.Warning;
@@ -9109,31 +9131,11 @@ var ObcPoi = class ObcPoi extends i$4 {
 		return this.type === "point" ? Math.max(POINT_POINTER_OFFSET_PX, targetDelta) : targetDelta;
 	}
 	handleButtonSlotChange(e) {
-		const assigned = e.target.assignedElements({ flatten: false });
+		if (e.target !== e.currentTarget) return;
+		const assigned = e.currentTarget.assignedElements({ flatten: false });
 		this.slottedButton = assigned.length > 0 ? assigned[0] : null;
-		this.syncFallbackButtonHeaderContent();
 		this.syncSlottedButtonProps();
 	}
-	syncFallbackButtonHeaderContent() {
-		if (this.slottedButton) return;
-		const button = this.renderRoot.querySelector("obc-poi-button.poi-button");
-		if (!button) return;
-		for (const child of Array.from(this.children)) {
-			if (!(child instanceof HTMLElement) || child.getAttribute("slot") !== "header") continue;
-			if (child.parentElement !== button) button.appendChild(child);
-			this.applyHeaderState(child);
-		}
-	}
-	applyHeaderState(root) {
-		const headers = [...root instanceof Element && root.matches("obc-poi-header") ? [root] : [], ...root.querySelectorAll("obc-poi-header")];
-		for (const header of headers) {
-			header.state = this.resolvedHeaderState;
-			header.setAttribute("state", this.resolvedHeaderState);
-		}
-	}
-	syncAttachedHeaderState() {
-		this.applyHeaderState(this.renderRoot);
-	}
 	syncSlottedButtonProps() {
 		const btn = this.slottedButton;
 		if (!btn) return;
@@ -9166,6 +9168,7 @@ var ObcPoi = class ObcPoi extends i$4 {
           .data=${this.data}
         >
           <slot></slot>
+          <slot name="header" slot="header"></slot>
         </obc-poi-button>
       </slot>
     `;
@@ -9191,10 +9194,6 @@ var ObcPoi = class ObcPoi extends i$4 {
       </div>
     `;
 	}
-	firstUpdated(_changedProperties) {
-		this.syncFallbackButtonHeaderContent();
-		this.syncAttachedHeaderState();
-	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (changedProperties.has("x")) {
@@ -9202,9 +9201,7 @@ var ObcPoi = class ObcPoi extends i$4 {
 			this.style.setProperty("--obc-poi-x", `${this.x}px`);
 		}
 		if (changedProperties.has("buttonY") || changedProperties.has("y") || changedProperties.has("fixedTarget")) this.updatePosition();
-		this.syncFallbackButtonHeaderContent();
 		this.syncSlottedButtonProps();
-		this.syncAttachedHeaderState();
 	}
 	static {
 		this.styles = r$7(poi_default);
@@ -9281,7 +9278,6 @@ ObcPoi = __decorate([customElement("obc-poi")], ObcPoi);
 function stripWhitespaceTextNodes(el) {
 	for (const node of Array.from(el.childNodes)) if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim() === "") node.remove();
 }
-var X_FILTER_CUTOFF_HZ = 16;
 var X_FILTER_DEADBAND_PX = .1;
 var X_MOVING_HINT_MS = 120;
 var VALID_POI_TYPES = new Set(Object.values(ObcPoiType));
@@ -9294,12 +9290,29 @@ var VALID_POI_STATES = new Set(Object.values(ObcPoiState));
 * layout-change dispatch, and visual-query logic so that each variant
 * only needs to override `renderContent()` and `getVisualNodes()`.
 *
+* ### Coordinate Model
+* - `x` is the horizontal center position in px within the layer.
+* - Targets are anchored at the layer's bottom edge; `y` is the connector
+*   line length in px extending downward from that anchor to the target
+*   point (default `192`, the shared `DEFAULT_LINE_LENGTH_PX`). The button
+*   renders at the top of the connector, inside the layer.
+* - `buttonY` positions the button; its interaction with `fixedTarget` is
+*   described in the `obc-poi` documentation.
+* - `x` and `y` updates pass through built-in low-pass filters (see
+*   `xFilterCutoffHz` and `yFilterCutoffHz`).
+*
 * The `@fires` tag below documents the dispatch site, which lives here rather
 * than in the variants. It is deliberately duplicated on each concrete
 * subclass — that is where `custom-elements.json` and the framework wrappers
 * pick the event up, since this class is not registered. Do not remove it from
 * the subclasses. `@ignore` keeps this class out of the generated docs.
 *
+* @property xFilterCutoffHz - Cutoff frequency (Hz) of the built-in low-pass filter applied to `x`.
+*   Lower values smooth noisy input more aggressively; `0` or a negative
+*   value disables filtering so `x` is applied directly.
+* @property yFilterCutoffHz - Cutoff frequency (Hz) of the built-in low-pass filter applied to `y`.
+*   Lower values smooth noisy input more aggressively; `0` or a negative
+*   value disables filtering so `y` is applied directly.
 * @fires {CustomEvent<void>} obc-poi-data-layout-change - Fired when layout-driving properties change. Bubbles and is composed.
 * @ignore
 */
@@ -9324,6 +9337,8 @@ var PoiBase = class extends i$4 {
 		this.x = 0;
 		this.y = 192;
 		this.buttonY = 0;
+		this.xFilterCutoffHz = 16;
+		this.yFilterCutoffHz = 16;
 		this.fixedTarget = false;
 		this.boxWidth = null;
 		this.boxHeight = null;
@@ -9335,12 +9350,18 @@ var PoiBase = class extends i$4 {
 		this.lastXFilterTimestampMs = 0;
 		this.xFilterRaf = 0;
 		this.xMovingHintTimeout = null;
+		this.filteredY = 0;
+		this.yFilterTarget = 0;
+		this.yFilterInitialized = false;
+		this.lastYFilterTimestampMs = 0;
+		this.yFilterRaf = 0;
 		this.stepXFilter = (nowMs) => {
 			this.xFilterRaf = 0;
 			if (!this.isConnected || !this.xFilterInitialized) return;
 			const dtSeconds = this.lastXFilterTimestampMs > 0 ? clamp$1((nowMs - this.lastXFilterTimestampMs) / 1e3, 1 / 120, .25) : 1 / 60;
 			this.lastXFilterTimestampMs = nowMs;
-			const alpha = 1 - Math.exp(-2 * Math.PI * X_FILTER_CUTOFF_HZ * dtSeconds);
+			const cutoffHz = this.resolvedXFilterCutoffHz;
+			const alpha = cutoffHz <= 0 ? 1 : 1 - Math.exp(-2 * Math.PI * cutoffHz * dtSeconds);
 			const delta = this.xFilterTarget - this.filteredX;
 			const nextX = Math.abs(delta) <= X_FILTER_DEADBAND_PX ? this.xFilterTarget : this.filteredX + delta * alpha;
 			const changed = Math.abs(nextX - this.filteredX) > 1e-6;
@@ -9359,6 +9380,26 @@ var PoiBase = class extends i$4 {
 			this.markXMoving();
 			this.xFilterRaf = requestAnimationFrame(this.stepXFilter);
 		};
+		this.stepYFilter = (nowMs) => {
+			this.yFilterRaf = 0;
+			if (!this.isConnected || !this.yFilterInitialized) return;
+			const dtSeconds = this.lastYFilterTimestampMs > 0 ? clamp$1((nowMs - this.lastYFilterTimestampMs) / 1e3, 1 / 120, .25) : 1 / 60;
+			this.lastYFilterTimestampMs = nowMs;
+			const cutoffHz = this.resolvedYFilterCutoffHz;
+			const alpha = cutoffHz <= 0 ? 1 : 1 - Math.exp(-2 * Math.PI * cutoffHz * dtSeconds);
+			const delta = this.yFilterTarget - this.filteredY;
+			const nextY = Math.abs(delta) <= X_FILTER_DEADBAND_PX ? this.yFilterTarget : this.filteredY + delta * alpha;
+			const changed = Math.abs(nextY - this.filteredY) > 1e-6;
+			this.filteredY = nextY;
+			if (changed) this.applyFilteredY();
+			if (Math.abs(this.yFilterTarget - this.filteredY) <= X_FILTER_DEADBAND_PX) {
+				this.filteredY = this.yFilterTarget;
+				this.applyFilteredY();
+				this.lastYFilterTimestampMs = 0;
+				return;
+			}
+			this.yFilterRaf = requestAnimationFrame(this.stepYFilter);
+		};
 	}
 	connectedCallback() {
 		stripWhitespaceTextNodes(this);
@@ -9386,6 +9427,12 @@ var PoiBase = class extends i$4 {
 		this._targetOffsetX = nextValue;
 		this.requestUpdate("targetOffsetX", oldValue);
 	}
+	get resolvedXFilterCutoffHz() {
+		return Number.isFinite(this.xFilterCutoffHz) ? this.xFilterCutoffHz : 16;
+	}
+	get resolvedYFilterCutoffHz() {
+		return Number.isFinite(this.yFilterCutoffHz) ? this.yFilterCutoffHz : 16;
+	}
 	dispatchLayoutChange() {
 		this.dispatchEvent(new CustomEvent("obc-poi-data-layout-change", {
 			bubbles: true,
@@ -9401,7 +9448,7 @@ var PoiBase = class extends i$4 {
 			this.markXMoving();
 			return;
 		}
-		if (Math.abs(nextX - this.filteredX) <= X_FILTER_DEADBAND_PX) {
+		if (this.resolvedXFilterCutoffHz <= 0 || Math.abs(nextX - this.filteredX) <= X_FILTER_DEADBAND_PX) {
 			this.filteredX = this.xFilterTarget;
 			this.style.setProperty("--obc-poi-data-x", `${this.filteredX}px`);
 			if (this.xFilterRaf) {
@@ -9418,6 +9465,33 @@ var PoiBase = class extends i$4 {
 			this.xFilterRaf = requestAnimationFrame(this.stepXFilter);
 		}
 	}
+	applyFilteredY() {
+		this.requestUpdate();
+		this.updatePosition();
+		this.dispatchLayoutChange();
+	}
+	syncYFilterTarget(nextY) {
+		this.yFilterTarget = nextY;
+		if (!this.yFilterInitialized) {
+			this.yFilterInitialized = true;
+			this.filteredY = nextY;
+			return;
+		}
+		if (this.resolvedYFilterCutoffHz <= 0 || Math.abs(nextY - this.filteredY) <= X_FILTER_DEADBAND_PX) {
+			this.filteredY = this.yFilterTarget;
+			this.applyFilteredY();
+			if (this.yFilterRaf) {
+				cancelAnimationFrame(this.yFilterRaf);
+				this.yFilterRaf = 0;
+			}
+			this.lastYFilterTimestampMs = 0;
+			return;
+		}
+		if (!this.yFilterRaf) {
+			this.lastYFilterTimestampMs = 0;
+			this.yFilterRaf = requestAnimationFrame(this.stepYFilter);
+		}
+	}
 	markXMoving() {
 		this.setAttribute("data-x-moving", "true");
 		if (this.xMovingHintTimeout !== null) window.clearTimeout(this.xMovingHintTimeout);
@@ -9435,6 +9509,11 @@ var PoiBase = class extends i$4 {
 			this.xFilterRaf = 0;
 		}
 		this.lastXFilterTimestampMs = 0;
+		if (this.yFilterRaf) {
+			cancelAnimationFrame(this.yFilterRaf);
+			this.yFilterRaf = 0;
+		}
+		this.lastYFilterTimestampMs = 0;
 		if (this.xMovingHintTimeout !== null) {
 			window.clearTimeout(this.xMovingHintTimeout);
 			this.xMovingHintTimeout = null;
@@ -9446,12 +9525,10 @@ var PoiBase = class extends i$4 {
 			for (const mutation of mutations) {
 				if (mutation.type === "childList") {
 					this.syncHeaderContent();
-					this.syncHeaderState();
 					return;
 				}
 				if (mutation.type === "attributes" && mutation.target instanceof HTMLElement && mutation.target.getAttribute("slot") === "header") {
 					this.syncHeaderContent();
-					this.syncHeaderState();
 					return;
 				}
 			}
@@ -9464,17 +9541,16 @@ var PoiBase = class extends i$4 {
 	}
 	updated(changedProperties) {
 		if (changedProperties.has("x")) this.syncXFilterTarget(Number.isFinite(this.x) ? this.x : 0);
+		if (changedProperties.has("y")) this.syncYFilterTarget(Number.isFinite(this.y) ? this.y : 0);
 		if (changedProperties.has("buttonY") || changedProperties.has("y") || changedProperties.has("fixedTarget") || changedProperties.has("selected") || changedProperties.has("type")) {
 			this.updatePosition();
 			this.syncInnerPoiLayout();
 		}
 		if (changedProperties.has("x") || changedProperties.has("buttonY") || changedProperties.has("y") || changedProperties.has("buttonOffsetX") || changedProperties.has("targetOffsetX") || changedProperties.has("fixedTarget") || changedProperties.has("selected") || changedProperties.has("type")) this.dispatchLayoutChange();
 		this.syncHeaderContent();
-		this.syncHeaderState();
 	}
 	firstUpdated(_changedProperties) {
 		this.syncHeaderContent();
-		this.syncHeaderState();
 	}
 	updatePosition() {
 		if (this.fixedTarget) {
@@ -9578,8 +9654,9 @@ var PoiBase = class extends i$4 {
 		const { poi } = this.getVisualNodes();
 		return poi?.shadowRoot?.querySelector("obc-poi-pointer.pointer") ?? null;
 	}
-	/** Public `y` normalized as the target Y input. */
+	/** Public `y` normalized as the target Y input, after the y filter. */
 	get resolvedTargetY() {
+		if (this.yFilterInitialized) return this.filteredY;
 		return Number.isFinite(this.y) ? this.y : 0;
 	}
 	/** Public `buttonY` normalized as the button Y input. */
@@ -9611,38 +9688,20 @@ var PoiBase = class extends i$4 {
         .data=${this.data}
       >
         <slot></slot>
+        <slot name="header" slot="header"></slot>
       </obc-poi-button>
     `;
 	}
-	get resolvedHeaderState() {
-		switch (this.resolvedPoiState) {
-			case ObcPoiState.Caution: return ObcPoiHeaderState.Caution;
-			case ObcPoiState.Warning: return ObcPoiHeaderState.Warning;
-			case ObcPoiState.Alarm: return ObcPoiHeaderState.Alarm;
-			case ObcPoiState.Enabled:
-			default: return this.selected ? ObcPoiHeaderState.Selected : ObcPoiHeaderState.Enabled;
-		}
-	}
+	/**
+	* Auto-enable `hasHeader` when the consumer slots header content directly
+	* (outside a stack, which manages `hasHeader` itself). Header elements stay
+	* in the consumer's light DOM and reach the inner button through the
+	* `<slot name="header">` forwarding chain; their `state` is synced by
+	* `obc-poi-button`.
+	*/
 	syncHeaderContent() {
-		const headerChildren = Array.from(this.children).filter((child) => child instanceof HTMLElement && child.getAttribute("slot") === "header");
-		if (headerChildren.length === 0 && !this.hasHeader) return;
-		if (headerChildren.length > 0 && !this.hasHeader && this.closest("obc-poi-layer-stack") === null) this.hasHeader = true;
-		const target = this.shadowRoot?.querySelector("[slot=\"button\"]") ?? this.shadowRoot?.querySelector("obc-poi");
-		if (!target) return;
-		for (const child of headerChildren) {
-			if (child.parentElement !== target) target.appendChild(child);
-			this.applyHeaderState(child);
-		}
-	}
-	applyHeaderState(root) {
-		const headers = [...root instanceof Element && root.matches("obc-poi-header") ? [root] : [], ...root.querySelectorAll("obc-poi-header")];
-		for (const header of headers) {
-			header.state = this.resolvedHeaderState;
-			header.setAttribute("state", this.resolvedHeaderState);
-		}
-	}
-	syncHeaderState() {
-		this.applyHeaderState(this.renderRoot);
+		if (this.hasHeader) return;
+		if (Array.from(this.children).some((child) => child instanceof HTMLElement && child.getAttribute("slot") === "header") && this.closest("obc-poi-layer-stack") === null) this.hasHeader = true;
 	}
 	render() {
 		return b`
@@ -9719,6 +9778,14 @@ __decorate([n$4({
 	type: Number,
 	attribute: "button-y"
 })], PoiBase.prototype, "buttonY", void 0);
+__decorate([n$4({
+	type: Number,
+	attribute: "x-filter-cutoff-hz"
+})], PoiBase.prototype, "xFilterCutoffHz", void 0);
+__decorate([n$4({
+	type: Number,
+	attribute: "y-filter-cutoff-hz"
+})], PoiBase.prototype, "yFilterCutoffHz", void 0);
 __decorate([n$4({
 	type: Boolean,
 	attribute: "fixed-target"
@@ -9817,6 +9884,7 @@ var ObcPoiData = class ObcPoiData extends PoiBase {
         <slot
           ><obi-vessel-generic-default-filled></obi-vessel-generic-default-filled
         ></slot>
+        <slot name="header" slot="header"></slot>
       </obc-poi-button-data>
     `;
 	}
@@ -10117,9 +10185,36 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 			this.wrapperHasValues = false;
 		}
 	}
+	/**
+	* Membership check that works for both light-DOM children (manual groups)
+	* and slot-assigned members (layer-created auto groups, where the member
+	* stays in the consumer's light DOM and is assigned into this group's
+	* member slot).
+	*/
+	isMember(child) {
+		return child.parentElement === this || child.assignedSlot?.parentElement === this;
+	}
+	getMemberSlot() {
+		return this.querySelector(":scope > slot.auto-group-members");
+	}
+	/**
+	* Paint the front child on top. For light-DOM members this reorders the
+	* children; for slot-assigned members it re-assigns the member slot, which
+	* changes flattened-tree order without touching the consumer's DOM.
+	*/
+	bringChildToFront(frontChild) {
+		const memberSlot = this.getMemberSlot();
+		if (memberSlot && frontChild.assignedSlot === memberSlot) {
+			const members = memberSlot.assignedElements();
+			if (members[members.length - 1] === frontChild) return;
+			memberSlot.assign(...members.filter((el) => el !== frontChild), frontChild);
+			return;
+		}
+		if (frontChild.parentElement === this) this.appendChild(frontChild);
+	}
 	ensureFrontChildOnTop() {
 		const frontChild = this.getFrontChild();
-		if (frontChild && this.lastElementChild !== frontChild) this.appendChild(frontChild);
+		if (frontChild && this.lastElementChild !== frontChild) this.bringChildToFront(frontChild);
 	}
 	onClick() {
 		if (this.expand) return;
@@ -10128,7 +10223,7 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 		this.expand = true;
 	}
 	releaseTarget(target) {
-		if (target.parentElement !== this) return Promise.resolve(false);
+		if (!this.isMember(target)) return Promise.resolve(false);
 		if (this.pendingReleasedTarget) {
 			if (this.pendingReleasedTarget.target === target) return this.pendingReleasedTarget.promise;
 			return Promise.resolve(false);
@@ -10161,7 +10256,7 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 			if (this.topOffsetProgress > 0) this.wrapperVisible = false;
 			this.lockedExpandedCenter = null;
 		}
-		if (!expand && frontChild) this.appendChild(frontChild);
+		if (!expand && frontChild) this.bringChildToFront(frontChild);
 		this.animateTopOffset(expand ? 1 : 0);
 	}
 	calculateTopOffsetTargets(preserveCenter = false) {
@@ -10276,7 +10371,7 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 		const visualExpanded = this.collapsing ? false : progress > .5;
 		const touchAreaExpanded = progress > .5;
 		this.topOffsetTargets.forEach((config, child) => {
-			if (child.parentElement !== this) {
+			if (!this.isMember(child)) {
 				this.topOffsetTargets.delete(child);
 				this.collapseDeltas.delete(child);
 				this.lastAppliedOffsets.delete(child);
@@ -10404,7 +10499,7 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 		}
 		this.lastTargetOrder = orderedTargets;
 		targets.forEach((child) => {
-			if (child.parentElement !== this) {
+			if (!this.isMember(child)) {
 				this.topOffsetTargets.delete(child);
 				this.lastAppliedOffsets.delete(child);
 				return;
@@ -10462,7 +10557,7 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 		pending.resolve(released);
 	}
 	releaseTargetToParent(target) {
-		if (target.parentElement !== this) return false;
+		if (!this.isMember(target)) return false;
 		target.setRuntimeHorizontalOffsets?.(0, 0);
 		if (!target.setRuntimeHorizontalOffsets) {
 			target.buttonOffsetX = 0;
@@ -10484,6 +10579,19 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 		target.style.removeProperty("--obc-poi-group-overlap-height");
 		target.style.removeProperty("--obc-poi-group-overlap-shift");
 		clearPoiVisualState(target);
+		const memberSlot = this.getMemberSlot();
+		if (memberSlot && target.assignedSlot === memberSlot) {
+			memberSlot.assign(...memberSlot.assignedElements().filter((el) => el !== target));
+			const root = this.getRootNode();
+			(root instanceof ShadowRoot ? root.host : null)?.releaseAssignedTarget?.(target);
+			this.updatePosition();
+			this.dispatchEvent(new CustomEvent("obc-poi-group-target-released", {
+				detail: { target },
+				bubbles: true,
+				composed: true
+			}));
+			return true;
+		}
 		const parent = this.parentElement;
 		if (!parent) return false;
 		parent.insertBefore(target, this);
@@ -10502,7 +10610,10 @@ var ObcPoiGroup = class ObcPoiGroup extends i$4 {
 };
 __decorate([n$4({ type: Boolean })], ObcPoiGroup.prototype, "expand", void 0);
 __decorate([n$4({ type: Boolean })], ObcPoiGroup.prototype, "collapsing", void 0);
-__decorate([n$4({ type: String })], ObcPoiGroup.prototype, "positionVertical", void 0);
+__decorate([n$4({
+	type: String,
+	attribute: "position-vertical"
+})], ObcPoiGroup.prototype, "positionVertical", void 0);
 __decorate([n$4({
 	type: Boolean,
 	attribute: "internal-swapping"
@@ -10736,6 +10847,9 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		this.internalSwapping = false;
 		this.lastHeight = 0;
 		this.isGrouping = false;
+		this.lastGroupingSignature = "";
+		this.groupingIds = /* @__PURE__ */ new WeakMap();
+		this.nextGroupingId = 1;
 		this.targetObservers = /* @__PURE__ */ new Map();
 		this.targetSizeElements = /* @__PURE__ */ new Map();
 		this.groupingRaf = 0;
@@ -10780,6 +10894,12 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		};
 		this.buttonOffsetXResetRaf = /* @__PURE__ */ new Map();
 	}
+	static {
+		this.shadowRootOptions = {
+			...i$4.shadowRootOptions,
+			slotAssignment: "manual"
+		};
+	}
 	static {
 		this.GROUP_LAYER_HOOK_ATTR = "data-in-poi-layer";
 	}
@@ -10981,19 +11101,24 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 	setupLayerMutationObserver() {
 		this.layerMutationObserver?.disconnect();
 		this.layerMutationObserver = new MutationObserver((mutations) => {
+			let childListChanged = false;
+			let relevant = false;
 			for (const mutation of mutations) {
 				if (mutation.type !== "childList") continue;
+				childListChanged = true;
 				const nodes = [...mutation.addedNodes, ...mutation.removedNodes];
-				for (const node of nodes) {
-					if (!(node instanceof HTMLElement)) continue;
-					if (this.isPoiLayerRelevantNode(node)) {
-						this.updateTargetObservers();
-						this.scheduleGrouping();
-						this.scheduleLayerHeightUpdate();
-						this.crossingTargetsDirty = true;
-						return;
-					}
+				for (const node of nodes) if (node instanceof HTMLElement && this.isPoiLayerRelevantNode(node)) {
+					relevant = true;
+					break;
 				}
+				if (relevant) break;
+			}
+			if (childListChanged) this.syncSlotAssignments();
+			if (relevant) {
+				this.updateTargetObservers();
+				this.scheduleGrouping();
+				this.scheduleLayerHeightUpdate();
+				this.crossingTargetsDirty = true;
 			}
 		});
 		this.layerMutationObserver.observe(this, {
@@ -11005,6 +11130,68 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		this.scheduleGrouping();
 		this.scheduleLayerHeightUpdate();
 	}
+	getMainSlot() {
+		return this.shadowRoot?.querySelector("slot.main") ?? null;
+	}
+	/**
+	* Assign every light-DOM child that is not currently placed in an
+	* auto-group member slot to the main slot. With `slotAssignment: 'manual'`
+	* nothing renders unless explicitly assigned, so this runs after render,
+	* on child-list mutations, and after every grouping change.
+	*/
+	syncSlotAssignments() {
+		const mainSlot = this.getMainSlot();
+		if (!mainSlot) return;
+		const groupAssigned = /* @__PURE__ */ new Set();
+		this.getAutoGroups().forEach((group) => {
+			this.getAutoGroupMemberSlot(group)?.assignedNodes().forEach((node) => groupAssigned.add(node));
+		});
+		const mainNodes = Array.from(this.childNodes).filter((node) => !groupAssigned.has(node) && (node instanceof Element || node instanceof Text));
+		mainSlot.assign(...mainNodes);
+	}
+	/**
+	* Called by an auto-created `obc-poi-group` after it removed a target from
+	* its member slot, so the target immediately re-renders through the main
+	* slot instead of disappearing until the next grouping pass.
+	* @internal
+	*/
+	releaseAssignedTarget(_target) {
+		this.syncSlotAssignments();
+		this.requestGroupingUpdate();
+	}
+	/**
+	* The auto-created `obc-poi-group` elements currently managed by this
+	* layer. Auto groups are shadow-internal chrome (they never appear in the
+	* consumer's light DOM); use this accessor — typically after a
+	* `grouping-change` event — to reach them, e.g. to expand a group
+	* programmatically.
+	*/
+	get autoGroups() {
+		return this.getAutoGroups();
+	}
+	getAutoGroups() {
+		return Array.from(this.shadowRoot?.querySelectorAll("obc-poi-group[data-auto-group]") ?? []);
+	}
+	getAutoGroupMemberSlot(group) {
+		return group.querySelector(":scope > slot.auto-group-members");
+	}
+	/** The auto group a target is currently assigned into, if any. */
+	getAutoGroupOf(target) {
+		const slot = target.assignedSlot;
+		if (slot?.classList.contains("auto-group-members")) return slot.parentElement;
+		return null;
+	}
+	/**
+	* Members of a group in either mode: slot-assigned (shadow auto groups) or
+	* light-DOM children (consumer-managed manual groups).
+	*/
+	getGroupMembers(group) {
+		if (group instanceof HTMLElement) {
+			const slot = this.getAutoGroupMemberSlot(group);
+			if (slot) return slot.assignedElements().filter((el) => isPoi(el));
+		}
+		return Array.from(group.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node));
+	}
 	scheduleGrouping() {
 		if (this.overlapMode === "crossing") {
 			this.scheduleCrossingMode();
@@ -11049,6 +11236,35 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		this.crossingOrder = next.crossingOrder;
 		return next.shouldContinue;
 	}
+	getGroupingId(target) {
+		let id = this.groupingIds.get(target);
+		if (id === void 0) {
+			id = this.nextGroupingId++;
+			this.groupingIds.set(target, id);
+		}
+		return id;
+	}
+	notifyGroupingChange(clusters, frontTargets, behindTargets, preGrouped) {
+		const idsOf = (targets) => Array.from(targets, (target) => this.getGroupingId(target)).sort((a, b) => a - b);
+		const signature = JSON.stringify({
+			clusters: clusters.map((cluster) => idsOf(cluster)).sort(),
+			front: idsOf(frontTargets),
+			behind: idsOf(behindTargets),
+			pre: idsOf(preGrouped)
+		});
+		if (signature === this.lastGroupingSignature) return;
+		this.lastGroupingSignature = signature;
+		this.dispatchEvent(new CustomEvent("grouping-change", {
+			detail: {
+				clusters: clusters.map((cluster) => [...cluster]),
+				front: [...frontTargets],
+				behind: [...behindTargets],
+				pregrouped: [...preGrouped]
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	toggleGroupLayerHook(group, hasTargets) {
 		if (hasTargets) group.setAttribute(_ObcPoiLayer.GROUP_LAYER_HOOK_ATTR, "");
 		else group.removeAttribute(_ObcPoiLayer.GROUP_LAYER_HOOK_ATTR);
@@ -11073,14 +11289,18 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 			const exitRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-exit");
 			const preRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-pre");
 			const behindRaw = getComputedStyle(this).getPropertyValue("--obc-poi-layer-overlap-behind");
-			const enterThreshold = Number.parseFloat(enterRaw) || 0;
-			const exitThreshold = Number.parseFloat(exitRaw) || Math.max(enterThreshold + 8, 8);
-			const preThreshold = Number.parseFloat(preRaw) || enterThreshold;
-			const behindThreshold = Number.parseFloat(behindRaw) || enterThreshold;
+			const parseThreshold = (raw, fallback) => {
+				const value = Number.parseFloat(raw);
+				return Number.isFinite(value) ? value : fallback;
+			};
+			const enterThreshold = parseThreshold(enterRaw, 10);
+			const exitThreshold = Math.max(parseThreshold(exitRaw, enterThreshold + 8), enterThreshold);
+			const preThreshold = parseThreshold(preRaw, Math.max(enterThreshold, 16));
+			const behindThreshold = parseThreshold(behindRaw, enterThreshold);
 			const currentGroupByTarget = /* @__PURE__ */ new Map();
 			targets.forEach((target) => {
-				const parent = target.parentElement;
-				if (parent?.tagName.toLowerCase() === "obc-poi-group") currentGroupByTarget.set(target, parent);
+				const group = this.getAutoGroupOf(target);
+				if (group) currentGroupByTarget.set(target, group);
 			});
 			const rects = /* @__PURE__ */ new Map();
 			targets.forEach((target) => {
@@ -11094,7 +11314,7 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 			}, currentGroupByTarget);
 			const clusters = buildClusters(targets, adjacency);
 			const behindClusters = buildClusters(targets, behindAdjacency);
-			const existingGroups = Array.from(this.querySelectorAll("obc-poi-group[data-auto-group]"));
+			const existingGroups = this.getAutoGroups().filter((group) => !group.hasAttribute("data-exiting"));
 			const frontTargets = /* @__PURE__ */ new Set();
 			clusters.forEach((cluster) => {
 				const front = this.getFrontTarget(cluster, rects);
@@ -11107,13 +11327,24 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 			});
 			const expandedAutoGroup = existingGroups.find((group) => group.expand === true || group.collapsing === true);
 			if (expandedAutoGroup) {
-				if (this.joinWhileExpanded) this.tryJoinExpandedGroup(expandedAutoGroup, targets, rects, enterThreshold);
+				const joined = this.joinWhileExpanded ? this.tryJoinExpandedGroup(expandedAutoGroup, targets, rects, enterThreshold) : null;
+				if (joined) {
+					const liveClusters = existingGroups.map((group) => this.getGroupMembers(group));
+					const liveFront = /* @__PURE__ */ new Set();
+					liveClusters.forEach((cluster) => {
+						const front = this.getFrontTarget(cluster, rects);
+						if (front) liveFront.add(front);
+					});
+					behindTargets.delete(joined);
+					preGrouped.delete(joined);
+					this.notifyGroupingChange(liveClusters, liveFront, behindTargets, preGrouped);
+				}
 				return;
 			}
 			const remainingClusters = [...clusters];
 			const keptGroups = [];
 			existingGroups.forEach((group) => {
-				const children = Array.from(group.children).filter((child) => isPoi(child));
+				const children = this.getGroupMembers(group);
 				const matchIndex = remainingClusters.findIndex((cluster) => cluster.length === children.length && cluster.every((target) => children.includes(target)));
 				if (matchIndex >= 0) {
 					keptGroups.push(group);
@@ -11141,7 +11372,8 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 					});
 					group.removeAttribute("data-visible");
 					group.setAttribute("data-exiting", "true");
-					children.forEach((child) => this.appendChild(child));
+					this.getAutoGroupMemberSlot(group)?.assign();
+					this.syncSlotAssignments();
 					children.forEach((child) => {
 						if (!front || child !== front) child.getBoundingClientRect();
 					});
@@ -11162,12 +11394,16 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 				group.setAttribute("data-position-mode", "bottom");
 				group.setAttribute("data-visible", "true");
 				group.internalSwapping = !!this.internalSwapping;
-				group.setAttribute("positionVertical", `${this.getGroupPositionVertical(cluster, rects, layerRect, group)}px`);
+				group.setAttribute("position-vertical", `${this.getGroupPositionVertical(cluster, rects, layerRect, group)}px`);
+				const memberSlot = document.createElement("slot");
+				memberSlot.className = "auto-group-members";
+				group.appendChild(memberSlot);
 				cluster.forEach((target) => {
 					target.removeAttribute("data-grouped");
-					group.appendChild(target);
 				});
-				this.appendChild(group);
+				this.wrapper?.appendChild(group);
+				memberSlot.assign(...cluster);
+				this.syncSlotAssignments();
 				requestAnimationFrame(() => {
 					cluster.forEach((target) => target.setAttribute("data-grouped", "true"));
 				});
@@ -11175,8 +11411,8 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 			});
 			const groupedTargets = /* @__PURE__ */ new Set();
 			keptGroups.forEach((group) => {
-				Array.from(group.children).forEach((child) => {
-					if (isPoi(child)) groupedTargets.add(child);
+				this.getGroupMembers(group).forEach((child) => {
+					groupedTargets.add(child);
 				});
 			});
 			targets.forEach((target) => {
@@ -11215,6 +11451,7 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 				}
 			});
 			this.refreshGroupPositions(layerRect, rects);
+			this.notifyGroupingChange(clusters, frontTargets, behindTargets, preGrouped);
 			requestAnimationFrame(() => {
 				targets.forEach((target) => target.removeAttribute("data-front-exit"));
 			});
@@ -11225,13 +11462,13 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 	}
 	tryJoinExpandedGroup(group, targets, rects, enterThreshold) {
 		const groupTargets = this.getGroupTargets(group);
-		if (groupTargets.length === 0) return;
+		if (groupTargets.length === 0) return null;
 		const groupTargetSet = new Set(groupTargets);
-		const candidates = targets.filter((target) => !groupTargetSet.has(target) && target.parentElement?.tagName.toLowerCase() !== "obc-poi-group");
-		if (candidates.length === 0) return;
+		const candidates = targets.filter((target) => !groupTargetSet.has(target) && target.parentElement?.tagName.toLowerCase() !== "obc-poi-group" && this.getAutoGroupOf(target) === null);
+		if (candidates.length === 0) return null;
 		const useButtonRects = group.expand === true || group.collapsing === true;
 		const groupCenters = groupTargets.map((target) => useButtonRects ? this.getTargetRect(target) : rects.get(target)).filter((rect) => !!rect).map((rect) => rect.left + rect.width / 2);
-		if (groupCenters.length === 0) return;
+		if (groupCenters.length === 0) return null;
 		const groupCenter = (Math.min(...groupCenters) + Math.max(...groupCenters)) / 2;
 		let bestCandidate = null;
 		let bestGap = Number.POSITIVE_INFINITY;
@@ -11249,10 +11486,16 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 				}
 			}
 		}
-		if (!bestCandidate) return;
+		if (!bestCandidate) return null;
 		bestCandidate.setAttribute("data-joined-expanded", "true");
 		const candidateRect = rects.get(bestCandidate);
-		if ((candidateRect?.left !== void 0 ? candidateRect.left + candidateRect.width / 2 : 0) < groupCenter) group.insertBefore(bestCandidate, groupTargets[0] ?? null);
+		const insertBefore = (candidateRect?.left !== void 0 ? candidateRect.left + candidateRect.width / 2 : 0) < groupCenter;
+		const memberSlot = group instanceof HTMLElement ? this.getAutoGroupMemberSlot(group) : null;
+		if (memberSlot) {
+			const members = memberSlot.assignedElements().filter((el) => el !== bestCandidate);
+			memberSlot.assign(...insertBefore ? [bestCandidate, ...members] : [...members, bestCandidate]);
+			this.syncSlotAssignments();
+		} else if (insertBefore) group.insertBefore(bestCandidate, groupTargets[0] ?? null);
 		else group.appendChild(bestCandidate);
 		bestCandidate.setAttribute("data-grouped", "true");
 		bestCandidate.removeAttribute("data-behind");
@@ -11268,6 +11511,7 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 			bestCandidate.style.height = touchTarget;
 		}
 		group.refreshExpandedLayout?.(true);
+		return bestCandidate;
 	}
 	applyStandaloneVisualState(target, overlap) {
 		const isEnhanced = target.buttonType === ObcPoiButtonType.Enhanced;
@@ -11282,17 +11526,17 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		clearPoiVisualState(target);
 	}
 	refreshGroupPositions(layerRect, rects) {
-		Array.from(this.querySelectorAll("obc-poi-group")).forEach((group) => {
-			const children = Array.from(group.children).filter((child) => isPoi(child));
+		[...Array.from(this.querySelectorAll("obc-poi-group")), ...this.getAutoGroups()].forEach((group) => {
+			const children = this.getGroupMembers(group);
 			this.toggleGroupLayerHook(group, children.length > 0);
-			const hasPositionAttr = group.hasAttribute("positionvertical") || group.hasAttribute("positionVertical");
+			const hasPositionAttr = group.hasAttribute("position-vertical");
 			if (!group.hasAttribute("data-auto-group") && !group.hasAttribute("data-position-mode")) group.setAttribute("data-position-mode", "bottom");
 			const shouldSetPosition = group.hasAttribute("data-auto-group") || !hasPositionAttr;
 			if (group.hasAttribute("data-auto-group")) group.internalSwapping = !!this.internalSwapping;
 			if (children.length > 0 && shouldSetPosition) {
 				const layerBounds = layerRect ?? this.getBoundingClientRect();
 				const rectMap = rects ?? new Map(children.map((child) => [child, this.getTargetRectForGrouping(child, layerBounds)]));
-				group.setAttribute("positionVertical", `${this.getGroupPositionVertical(children, rectMap, layerBounds, group)}px`);
+				group.setAttribute("position-vertical", `${this.getGroupPositionVertical(children, rectMap, layerBounds, group)}px`);
 			}
 			group.updatePosition?.();
 		});
@@ -11434,19 +11678,20 @@ var ObcPoiLayer = class ObcPoiLayer extends i$4 {
 		return Array.from(this.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node) && !node.hasAttribute("data-stack-selected"));
 	}
 	getGroupTargets(group) {
-		return Array.from(group.querySelectorAll(`[${POI_ATTR}]`)).filter((node) => isPoi(node));
-	}
-	updated(changedProperties) {
-		if (changedProperties.has("isSelected")) this.dispatchEvent(new Event("layer-selection-changed", { bubbles: true }));
+		return this.getGroupMembers(group);
 	}
 	render() {
 		return b`
       <div class="wrapper${this.debug ? " debug" : ""}">
         ${this.debug ? b`<span class="debug-label">${this.label || "Layer"}</span>` : A}
-        <slot></slot>
+        <slot class="main"></slot>
       </div>
     `;
 	}
+	updated(changedProperties) {
+		if (changedProperties.has("isSelected")) this.dispatchEvent(new Event("layer-selection-changed", { bubbles: true }));
+		this.syncSlotAssignments();
+	}
 	static {
 		this.styles = r$7(poi_layer_default);
 	}
@@ -11524,6 +11769,7 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 		this.handleTargetLayoutChange = () => this.schedulePlacement();
 		this.handleLayerSelectionChanged = () => this.schedulePlacement();
 		this.selectionMap = /* @__PURE__ */ new Map();
+		this.displacedTargets = /* @__PURE__ */ new Map();
 		this.selectionCounter = 0;
 		this.placementRaf = 0;
 	}
@@ -11565,6 +11811,11 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 			this.requestPoiRender(target);
 		});
 		this.selectionMap.clear();
+		this.displacedTargets.forEach((_, target) => {
+			this.clearTargetProjectionStyles(target);
+			this.requestPoiRender(target);
+		});
+		this.displacedTargets.clear();
 		this.selectionCounter = 0;
 	}
 	onStackClick(event) {
@@ -11573,25 +11824,81 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 		if (!target) return;
 		if (target.hasAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR)) return;
 		this.cleanupSelection();
-		const originLayer = this.getTargetLayer(target);
-		if (!originLayer) return;
-		const selectedLayer = this.getLayer("selected") ?? this.getLayer("top");
-		if (!selectedLayer) return;
 		const existing = this.selectionMap.get(target);
 		if (existing) {
 			this.resetSelectionForTarget(target, existing);
 			return;
 		}
+		this.performSelection(target);
+	}
+	/** Currently selected POI targets. */
+	get selectedTargets() {
+		this.cleanupSelection();
+		return Array.from(this.selectionMap.keys());
+	}
+	/**
+	* Programmatically select a target, following the same flow as a user
+	* click. `options.selectionId` presets the badge id shown in the
+	* stack-managed header; without it the id auto-increments. Returns
+	* `false` when selection is disabled, the target is mid-transition or
+	* already selected, or no layer can host the selection.
+	*/
+	selectTarget(target, options) {
+		if (this.selectionMode === "none") return false;
+		if (target.hasAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR)) return false;
+		this.cleanupSelection();
+		if (this.selectionMap.has(target)) return false;
+		return this.performSelection(target, options?.selectionId);
+	}
+	/**
+	* Programmatically deselect a target. Returns `false` when it is not
+	* selected.
+	*/
+	deselectTarget(target) {
+		const record = this.selectionMap.get(target);
+		if (!record) return false;
+		this.resetSelectionForTarget(target, record);
+		return true;
+	}
+	/** Deselect all targets. */
+	clearSelection() {
+		Array.from(this.selectionMap.entries()).forEach(([target, record]) => {
+			this.resetSelectionForTarget(target, record);
+		});
+	}
+	performSelection(target, selectionId) {
+		const homeLayer = this.getTargetLayer(target);
+		if (!homeLayer) return false;
+		const selectedLayer = this.getLayer("selected") ?? this.getLayer("top");
+		if (!selectedLayer) return false;
 		if (this.selectionMode === "single") {
 			this.clearOtherTopSelections(target);
 			this.clearSelectionMapExcept(target);
 		}
-		const trackedOriginLayer = originLayer === selectedLayer ? this.inferBootstrapOriginLayer(target, selectedLayer) : originLayer;
-		this.trackSelectionTarget(target, trackedOriginLayer, true);
-		const record = this.selectionMap.get(target);
-		if (!record) return;
+		const displaced = this.displacedTargets.get(target);
+		this.displacedTargets.delete(target);
+		const originLayer = displaced?.originLayer ?? (homeLayer === selectedLayer ? this.inferBootstrapOriginLayer(target, selectedLayer) : homeLayer);
+		if (selectionId) target.setAttribute("data-stack-selection-id", selectionId);
+		const record = {
+			homeLayer,
+			originLayer
+		};
+		this.selectionMap.set(target, record);
 		this.activateTrackedTarget(target, record, selectedLayer);
 		this.schedulePlacement();
+		this.dispatchSelectionChange(target, null);
+		return true;
+	}
+	dispatchSelectionChange(added, removed) {
+		this.dispatchEvent(new CustomEvent("selection-change", {
+			detail: {
+				selected: this.selectedTargets,
+				added,
+				removed
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	getPoiTargetFromEvent(event) {
 		const path = event.composedPath?.() ?? [];
@@ -11618,6 +11925,9 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 		this.selectionMap.forEach((_, target) => {
 			if (!target.isConnected) this.selectionMap.delete(target);
 		});
+		this.displacedTargets.forEach((_, target) => {
+			if (!target.isConnected) this.displacedTargets.delete(target);
+		});
 	}
 	getLayer(kind) {
 		const layers = this.getAllLayers();
@@ -11637,6 +11947,7 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 		if (!activeLayer) return;
 		this.getLayerTargets(activeLayer).forEach((other) => {
 			if (other === target) return;
+			if (this.displacedTargets.has(other)) return;
 			const record = this.selectionMap.get(other);
 			this.resetSelectionForTarget(other, record);
 		});
@@ -11694,25 +12005,60 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 	refreshTargetProjectionLayout(target, trackDurationMs = 0) {
 		target.refreshProjectionLayout?.(trackDurationMs);
 	}
-	getTargetButtonProjectionOffset(target) {
-		const raw = target.style.getPropertyValue("--obc-poi-button-projection-y");
+	getInlineVarPx(target, name) {
+		const raw = target.style.getPropertyValue(name);
 		const parsed = Number.parseFloat(raw);
 		return Number.isFinite(parsed) ? parsed : 0;
 	}
-	getLayerProjectionOffset(originLayer, destinationLayer) {
-		if (!destinationLayer || destinationLayer === originLayer) return 0;
-		const originRect = originLayer.getBoundingClientRect();
-		return destinationLayer.getBoundingClientRect().bottom - originRect.bottom;
+	/** Pixel delta between two layers' bottom edges (`to.bottom - from.bottom`). */
+	layerBottomDelta(from, to) {
+		if (from === to) return 0;
+		return to.getBoundingClientRect().bottom - from.getBoundingClientRect().bottom;
+	}
+	setProjectionVar(target, name, valuePx) {
+		if (Math.abs(valuePx) < .5) target.style.removeProperty(name);
+		else target.style.setProperty(name, `${valuePx}px`);
+	}
+	/**
+	* Render the target at the given projection offsets without touching its
+	* DOM position. When `animate` is set and an offset actually changes, the
+	* jump is FLIP-animated via the Web Animations API.
+	*/
+	async applyTargetProjection(target, buttonOffsetPx, targetOffsetPx, animate) {
+		const currentButton = this.getInlineVarPx(target, "--obc-poi-button-projection-y");
+		const currentTarget = this.getInlineVarPx(target, "--obc-poi-target-projection-y");
+		if (!(Math.abs(buttonOffsetPx - currentButton) >= .5 || Math.abs(targetOffsetPx - currentTarget) >= .5)) {
+			this.setProjectionVar(target, "--obc-poi-button-projection-y", buttonOffsetPx);
+			this.setProjectionVar(target, "--obc-poi-target-projection-y", targetOffsetPx);
+			this.requestPoiRender(target);
+			this.refreshTargetProjectionLayout(target);
+			return;
+		}
+		const { button, line } = this.getAnimationElements(target);
+		const beforeButtonRect = animate ? button?.getBoundingClientRect() ?? null : null;
+		const beforeLineRect = animate ? line?.getBoundingClientRect() ?? null : null;
+		this.setProjectionVar(target, "--obc-poi-button-projection-y", buttonOffsetPx);
+		this.setProjectionVar(target, "--obc-poi-target-projection-y", targetOffsetPx);
+		this.requestPoiRender(target);
+		this.refreshTargetProjectionLayout(target);
+		if (!animate) return;
+		await this.waitForPoiRender(target);
+		await this.animateLayerJump(target, beforeButtonRect, beforeLineRect);
 	}
-	getTargetProjectionOffset(originLayer, selectedLayer) {
-		if (!selectedLayer || selectedLayer === originLayer) return 0;
-		const originRect = originLayer.getBoundingClientRect();
-		const selectedRect = selectedLayer.getBoundingClientRect();
-		return originRect.bottom - selectedRect.bottom;
+	/**
+	* The group a target currently belongs to — a light-DOM parent for
+	* consumer-managed groups, or the shadow group whose member slot the
+	* target is assigned to for layer-created auto groups.
+	*/
+	getContainingGroup(target) {
+		if (target.parentElement?.tagName.toLowerCase() === "obc-poi-group") return target.parentElement;
+		const slotParent = target.assignedSlot?.parentElement;
+		if (slotParent?.tagName.toLowerCase() === "obc-poi-group") return slotParent;
+		return null;
 	}
 	detachTargetFromCurrentGroup(target) {
 		const currentLayer = this.getTargetLayer(target);
-		const sourceGroup = target.parentElement?.tagName.toLowerCase() === "obc-poi-group" ? target.parentElement : null;
+		const sourceGroup = this.getContainingGroup(target);
 		if (!sourceGroup) return currentLayer;
 		target.setRuntimeHorizontalOffsets?.(0, 0);
 		if (!target.setRuntimeHorizontalOffsets) {
@@ -11799,73 +12145,34 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 			animations.forEach((a) => a.cancel());
 		}
 	}
-	async moveTargetIntoSelectedLayer(target, _originLayer, selectedLayer, animate = true) {
-		const { button, line } = this.getAnimationElements(target);
-		const beforeButtonRect = button?.getBoundingClientRect() ?? null;
-		const beforeLineRect = line?.getBoundingClientRect() ?? null;
-		if (this.getTargetLayer(target) !== selectedLayer) selectedLayer.appendChild(target);
-		this.requestPoiRender(target);
-		this.refreshTargetProjectionLayout(target);
-		await this.waitForPoiRender(target);
-		if (!animate) return;
-		await this.animateLayerJump(target, beforeButtonRect, beforeLineRect);
-	}
-	async moveTrackedTargetToSelectedLayer(target, record, selectedLayer, animateProjection) {
-		const currentLayer = this.detachTargetFromCurrentGroup(target) ?? this.getTargetLayer(target) ?? record.originLayer;
-		clearTargetGroupingAttributes(target);
-		await this.moveTargetIntoSelectedLayer(target, record.originLayer, selectedLayer, animateProjection);
-		if (currentLayer !== selectedLayer) currentLayer.requestGroupingUpdate();
-		selectedLayer.requestGroupingUpdate();
-	}
-	async syncTargetProjection(target, originLayer, selectedLayer, animate = true) {
-		const nextProjectionOffset = this.getLayerProjectionOffset(originLayer, selectedLayer);
-		const currentProjectionOffset = this.getTargetButtonProjectionOffset(target);
-		if (Math.abs(nextProjectionOffset - currentProjectionOffset) < .5) {
-			if (Math.abs(nextProjectionOffset) < .5) target.style.removeProperty("--obc-poi-button-projection-y");
-			else target.style.setProperty("--obc-poi-button-projection-y", `${nextProjectionOffset}px`);
-			this.requestPoiRender(target);
-			this.refreshTargetProjectionLayout(target);
-			return;
-		}
-		if (Math.abs(nextProjectionOffset) < .5) target.style.removeProperty("--obc-poi-button-projection-y");
-		else target.style.setProperty("--obc-poi-button-projection-y", `${nextProjectionOffset}px`);
-		this.requestPoiRender(target);
-		if (animate) {
-			this.refreshTargetProjectionLayout(target, _ObcPoiLayerStack.STACK_JUMP_DURATION_MS);
-			await this.waitForPoiRender(target);
-			return;
-		}
-		this.refreshTargetProjectionLayout(target);
-	}
 	async animateTargetReturnToOrigin(target, record) {
 		target.setAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR, "true");
 		try {
-			const currentLayer = this.detachTargetFromCurrentGroup(target) ?? this.getTargetLayer(target);
+			const sourceGroupLayer = this.detachTargetFromCurrentGroup(target);
 			clearTargetGroupingAttributes(target);
-			const { button: beforeBtn, line: beforeLine } = this.getAnimationElements(target);
-			const beforeButtonRect = beforeBtn?.getBoundingClientRect() ?? null;
-			const beforeLineRect = beforeLine?.getBoundingClientRect() ?? null;
-			target.style.removeProperty("--obc-poi-target-projection-y");
-			target.style.removeProperty("--obc-poi-button-projection-y");
-			if (target.parentElement !== record.originLayer) record.originLayer.appendChild(target);
-			this.requestPoiRender(target);
-			this.refreshTargetProjectionLayout(target);
-			await this.waitForPoiRender(target);
-			await this.animateLayerJump(target, beforeButtonRect, beforeLineRect);
+			const originOffset = this.layerBottomDelta(record.homeLayer, record.originLayer);
+			await this.applyTargetProjection(target, originOffset, originOffset, true);
 			this.setSelectedTargetInteractivity(target, false);
 			clearTargetGroupingAttributes(target);
 			this.clearTargetSelectedId(target);
-			this.clearTargetProjectionStyles(target);
+			if (record.homeLayer === record.originLayer) this.clearTargetProjectionStyles(target);
+			else {
+				target.style.removeProperty("--obc-poi-forced-target-transition-duration");
+				target.style.removeProperty("--obc-poi-layer-inactive-opacity");
+				target.style.removeProperty("z-index");
+				this.displacedTargets.set(target, record);
+			}
 			this.requestPoiRender(target);
-			if (currentLayer && currentLayer !== record.originLayer) currentLayer.requestGroupingUpdate();
-			record.originLayer.requestGroupingUpdate();
+			if (sourceGroupLayer && sourceGroupLayer !== record.homeLayer) sourceGroupLayer.requestGroupingUpdate();
+			record.homeLayer.requestGroupingUpdate();
 			this.schedulePlacement();
 		} finally {
 			target.removeAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR);
+			target.removeAttribute("data-stack-selected");
 		}
 	}
 	setSelectedTargetInteractivity(target, selected) {
-		const isInAutoGroup = target.hasAttribute("data-grouped") || target.closest("obc-poi-group") !== null;
+		const isInAutoGroup = target.hasAttribute("data-grouped") || this.getContainingGroup(target) !== null;
 		target.selected = selected;
 		if (selected) {
 			target.style.setProperty("--obc-poi-overlap-pointer-events", "auto");
@@ -11880,30 +12187,22 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 			target.removeAttribute("data-front");
 		}
 	}
-	trackSelectionTarget(target, originLayer, keepInSelectedLayer = true) {
-		this.selectionMap.set(target, {
-			originLayer,
-			previousAnimatePosition: target.animatePosition ?? false,
-			keepInSelectedLayer
-		});
-		target.removeAttribute("data-stack-selected");
-	}
 	activateTrackedTarget(target, record, selectedLayer, animateProjection = true) {
-		if (record.keepInSelectedLayer) {
-			target.removeAttribute("data-stack-selected");
-			if (this.getTargetLayer(target) !== selectedLayer) this.moveTrackedTargetToSelectedLayer(target, record, selectedLayer, animateProjection);
-			else {
-				const targetProjectionOffset = this.getTargetProjectionOffset(record.originLayer, selectedLayer);
-				if (Math.abs(targetProjectionOffset) < .5) target.style.removeProperty("--obc-poi-target-projection-y");
-				else target.style.setProperty("--obc-poi-target-projection-y", `${targetProjectionOffset}px`);
-				target.style.removeProperty("--obc-poi-button-projection-y");
-				this.requestPoiRender(target);
-				this.refreshTargetProjectionLayout(target);
-			}
-		} else {
+		if (record.homeLayer !== selectedLayer) {
+			const sourceGroupLayer = this.detachTargetFromCurrentGroup(target);
 			clearTargetGroupingAttributes(target);
+			const firstActivation = !target.hasAttribute("data-stack-selected");
 			target.setAttribute("data-stack-selected", "true");
-			this.syncTargetProjection(target, record.originLayer, selectedLayer, animateProjection);
+			const buttonOffset = this.layerBottomDelta(record.homeLayer, selectedLayer);
+			const targetOffset = this.layerBottomDelta(record.homeLayer, record.originLayer);
+			this.applyTargetProjection(target, buttonOffset, targetOffset, animateProjection);
+			if (firstActivation) {
+				if (sourceGroupLayer && sourceGroupLayer !== record.homeLayer) sourceGroupLayer.requestGroupingUpdate();
+				record.homeLayer.requestGroupingUpdate();
+			}
+		} else {
+			const targetOffset = this.layerBottomDelta(selectedLayer, record.originLayer);
+			this.applyTargetProjection(target, 0, targetOffset, animateProjection);
 		}
 		this.setSelectedTargetInteractivity(target, true);
 		this.setTargetSelectedId(target);
@@ -11916,25 +12215,26 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 		for (const target of selectedTargets) {
 			if (target.hasAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR)) continue;
 			if (this.selectionMap.has(target)) continue;
+			if (this.displacedTargets.has(target)) continue;
 			if (this.selectionMode === "single" && this.selectionMap.size > 0) break;
 			const originLayer = this.inferBootstrapOriginLayer(target, selectedLayer);
 			this.selectionMap.set(target, {
-				originLayer,
-				previousAnimatePosition: target.animatePosition ?? false,
-				keepInSelectedLayer: true
+				homeLayer: selectedLayer,
+				originLayer
 			});
-			target.removeAttribute("data-stack-selected");
 			seededTargets.add(target);
+			this.dispatchSelectionChange(target, null);
 		}
 		return seededTargets;
 	}
 	resetSelectionForTarget(target, record) {
-		target.removeAttribute("data-stack-selected");
 		if (record) {
 			this.selectionMap.delete(target);
 			this.animateTargetReturnToOrigin(target, record);
+			this.dispatchSelectionChange(null, target);
 			return;
 		}
+		target.removeAttribute("data-stack-selected");
 		this.setSelectedTargetInteractivity(target, false);
 		clearTargetGroupingAttributes(target);
 		this.clearTargetSelectedId(target);
@@ -11999,6 +12299,7 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 			this.selectionMap.forEach((record, target) => {
 				this.resetSelectionForTarget(target, record);
 			});
+			this.refreshDisplacedTargets();
 			return;
 		}
 		const seededTargets = this.seedSelectedLayerSelections(selectedLayer);
@@ -12008,9 +12309,25 @@ var ObcPoiLayerStack = class ObcPoiLayerStack extends i$4 {
 				return;
 			}
 			if (target.hasAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR)) return;
-			if (!record.keepInSelectedLayer && !target.hasAttribute("data-stack-selected")) target.setAttribute("data-stack-selected", "true");
 			this.activateTrackedTarget(target, record, selectedLayer, !seededTargets.has(target));
 		});
+		this.refreshDisplacedTargets();
+	}
+	/**
+	* Keep deselected targets that render outside their DOM layer (targets
+	* authored in the selected layer whose logical origin is another layer)
+	* projected at up-to-date offsets across layer resizes.
+	*/
+	refreshDisplacedTargets() {
+		this.displacedTargets.forEach((record, target) => {
+			if (!target.isConnected) {
+				this.displacedTargets.delete(target);
+				return;
+			}
+			if (target.hasAttribute(_ObcPoiLayerStack.STACK_RETURNING_ATTR)) return;
+			const originOffset = this.layerBottomDelta(record.homeLayer, record.originLayer);
+			this.applyTargetProjection(target, originOffset, originOffset, false);
+		});
 	}
 	render() {
 		return b`
@@ -12029,7 +12346,241 @@ __decorate([n$4({
 })], ObcPoiLayerStack.prototype, "selectionMode", void 0);
 ObcPoiLayerStack = _ObcPoiLayerStack = __decorate([customElement("obc-poi-layer-stack")], ObcPoiLayerStack);
 //#endregion
+//#region src/ar/poi/poi-vessel.ts
+var ObcPoiVessel = class ObcPoiVessel extends PoiBase {
+	constructor(..._args) {
+		super(..._args);
+		this.vesselType = ObcPoiObjectVesselType.Regular;
+		this.vesselStyle = ObcPoiObjectVesselStyle.Regular;
+		this.vesselState = null;
+		this.vesselInteractive = false;
+	}
+	getVisualNodes() {
+		return this.queryVisualNodes("obc-poi", "obc-poi-button-vessel");
+	}
+	renderButtonSlot() {
+		return b`
+      <obc-poi-button-vessel
+        slot="button"
+        .relativeDirection=${this.relativeDirection}
+        .selected=${this.selected}
+        .hasHeader=${this.hasHeader}
+        .headerContent=${this.headerContent}
+        .state=${this.resolvedPoiState}
+        .value=${this.value}
+        .overlapOpaque=${this.overlapOpaque}
+        .type=${this.buttonType}
+        .data=${this.data}
+        .vesselType=${this.vesselType}
+        .vesselStyle=${this.vesselStyle}
+        .vesselState=${this.vesselState}
+        .vesselInteractive=${this.vesselInteractive}
+      >
+        <slot
+          ><obi-vessel-generic-default-filled></obi-vessel-generic-default-filled
+        ></slot>
+        <slot name="turn-indicator" slot="turn-indicator"></slot>
+        <slot name="speed-indicator" slot="speed-indicator"></slot>
+        <slot name="header" slot="header"></slot>
+      </obc-poi-button-vessel>
+    `;
+	}
+	static {
+		this.styles = PoiBase.styles;
+	}
+};
+__decorate([n$4({
+	type: String,
+	attribute: "vessel-type"
+})], ObcPoiVessel.prototype, "vesselType", void 0);
+__decorate([n$4({
+	type: String,
+	attribute: "vessel-style"
+})], ObcPoiVessel.prototype, "vesselStyle", void 0);
+__decorate([n$4({
+	type: String,
+	attribute: "vessel-state"
+})], ObcPoiVessel.prototype, "vesselState", void 0);
+__decorate([n$4({
+	type: Boolean,
+	attribute: "vessel-interactive"
+})], ObcPoiVessel.prototype, "vesselInteractive", void 0);
+ObcPoiVessel = __decorate([customElement("obc-poi-vessel")], ObcPoiVessel);
+//#endregion
+//#region src/icons/icon-beacon-general-east.ts
+var ObiBeaconGeneralEast = class ObiBeaconGeneralEast extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.useCssColor = false;
+		this.icon = w`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.17071 21H6V19.5H9.04148C9.15648 18.8145 9.50394 18.2079 10 17.7639L10 10H14V17.7639C14.4961 18.2079 14.8435 18.8145 14.9585 19.5H18V21H14.8293C14.4175 22.1652 13.3062 23 12 23C10.6938 23 9.58254 22.1652 9.17071 21ZM13.5 20C13.5 20.8284 12.8284 21.5 12 21.5C11.1716 21.5 10.5 20.8284 10.5 20C10.5 19.1716 11.1716 18.5 12 18.5C12.8284 18.5 13.5 19.1716 13.5 20Z" fill="currentColor"/>
+<path d="M14 4H10L12 1L14 4Z" fill="currentColor"/>
+<path d="M14 6H10L12 9L14 6Z" fill="currentColor"/>
+</svg>
+`;
+		this.iconCss = w`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.17071 21H6V19.5H9.04148C9.15648 18.8145 9.50394 18.2079 10 17.7639L10 10H14V17.7639C14.4961 18.2079 14.8435 18.8145 14.9585 19.5H18V21H14.8293C14.4175 22.1652 13.3062 23 12 23C10.6938 23 9.58254 22.1652 9.17071 21ZM13.5 20C13.5 20.8284 12.8284 21.5 12 21.5C11.1716 21.5 10.5 20.8284 10.5 20C10.5 19.1716 11.1716 18.5 12 18.5C12.8284 18.5 13.5 19.1716 13.5 20Z" style="fill: var(--element-active-color)"/>
+<path d="M14 4H10L12 1L14 4Z" style="fill: var(--element-active-color)"/>
+<path d="M14 6H10L12 9L14 6Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+	}
+	render() {
+		return b`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+	}
+	static {
+		this.styles = i$7`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+	}
+};
+__decorate([n$4({ type: Boolean })], ObiBeaconGeneralEast.prototype, "useCssColor", void 0);
+ObiBeaconGeneralEast = __decorate([customElement("obi-beacon-general-east")], ObiBeaconGeneralEast);
+//#endregion
+//#region src/ar/poi/poi-aton.ts
+var ObcPoiAton = class ObcPoiAton extends PoiBase {
+	constructor(..._args) {
+		super(..._args);
+		this.atonType = ObcPoiObjectAtonType.AtoN;
+		this.atonStyle = ObcPoiObjectAtonStyle.Regular;
+		this.atonState = null;
+		this.atonInteractive = false;
+	}
+	getVisualNodes() {
+		return this.queryVisualNodes("obc-poi", "obc-poi-button-aton");
+	}
+	renderButtonSlot() {
+		return b`
+      <obc-poi-button-aton
+        slot="button"
+        .relativeDirection=${this.relativeDirection}
+        .selected=${this.selected}
+        .hasHeader=${this.hasHeader}
+        .headerContent=${this.headerContent}
+        .state=${this.resolvedPoiState}
+        .value=${this.value}
+        .overlapOpaque=${this.overlapOpaque}
+        .type=${this.buttonType}
+        .data=${this.data}
+        .atonType=${this.atonType}
+        .atonStyle=${this.atonStyle}
+        .atonState=${this.atonState}
+        .atonInteractive=${this.atonInteractive}
+      >
+        <slot><obi-beacon-general-east></obi-beacon-general-east></slot>
+        <slot name="header" slot="header"></slot>
+      </obc-poi-button-aton>
+    `;
+	}
+	static {
+		this.styles = PoiBase.styles;
+	}
+};
+__decorate([n$4({
+	type: String,
+	attribute: "aton-type"
+})], ObcPoiAton.prototype, "atonType", void 0);
+__decorate([n$4({
+	type: String,
+	attribute: "aton-style"
+})], ObcPoiAton.prototype, "atonStyle", void 0);
+__decorate([n$4({
+	type: String,
+	attribute: "aton-state"
+})], ObcPoiAton.prototype, "atonState", void 0);
+__decorate([n$4({
+	type: Boolean,
+	attribute: "aton-interactive"
+})], ObcPoiAton.prototype, "atonInteractive", void 0);
+ObcPoiAton = __decorate([customElement("obc-poi-aton")], ObcPoiAton);
+//#endregion
+//#region src/ar/poi-projection/poi-projection.ts
+/**
+* @module POI Projection
+*
+* Media-projection helpers for POI overlays.
+*
+* Maps points from media pixel space (video/image natural resolution) to
+* rendered screen space, accounting for `cover`/`contain` letterboxing.
+* This is the same math `obc-poi-controller` applies to its
+* detections-driven targets, exported as pure functions so applications
+* that manage their own POI elements can project coordinates without
+* re-implementing the transform.
+*
+* ### Usage Guidelines
+* - Build a {@link MediaProjection} once per resize/metadata change via
+*   {@link computeMediaProjection}; reuse it for every point in a frame.
+* - `renderWidth`/`renderHeight` come from the media element's
+*   `getBoundingClientRect()`; `mediaWidth`/`mediaHeight` from
+*   `videoWidth`/`videoHeight` (video) or `naturalWidth`/`naturalHeight`
+*   (image).
+* - {@link projectPointToLayer} additionally converts a projected
+*   point into `obc-poi-data` layer coordinates (`x` center px,
+*   `y` line length from the layer's bottom anchor), given the layer's
+*   bottom offset inside the projection container.
+*
+* ### Fit modes
+* - `cover`: media fills the container; overflow is cropped.
+* - `contain`: media letterboxes inside the container.
+*
+* The Storybook demo draws the rendered container (outer box), the scaled
+* media content region (shaded), and a marker at the projected point.
+*/
+/** Fit behavior matching `obc-poi-controller`'s `PoiFitMode` values. */
+var MediaFit = /* @__PURE__ */ function(MediaFit) {
+	MediaFit["Cover"] = "cover";
+	MediaFit["Contain"] = "contain";
+	return MediaFit;
+}({});
+/**
+* Compute the projection for the given dimensions, or `null` when any
+* dimension is non-finite or zero (media not measured yet).
+*/
+function computeMediaProjection(input) {
+	const { mediaWidth, mediaHeight, renderWidth, renderHeight, fit } = input;
+	if (!Number.isFinite(mediaWidth) || !Number.isFinite(mediaHeight) || !Number.isFinite(renderWidth) || !Number.isFinite(renderHeight) || mediaWidth === 0 || mediaHeight === 0 || renderWidth === 0 || renderHeight === 0) return null;
+	const scale = fit === "cover" ? Math.max(renderWidth / mediaWidth, renderHeight / mediaHeight) : Math.min(renderWidth / mediaWidth, renderHeight / mediaHeight);
+	const contentWidth = mediaWidth * scale;
+	const contentHeight = mediaHeight * scale;
+	return {
+		scale,
+		offsetX: (renderWidth - contentWidth) / 2,
+		offsetY: (renderHeight - contentHeight) / 2,
+		contentWidth,
+		contentHeight
+	};
+}
+/** Project a point from media pixel space into rendered space. */
+function projectPoint(projection, x, y) {
+	return {
+		x: projection.offsetX + x * projection.scale,
+		y: projection.offsetY + y * projection.scale
+	};
+}
+//#endregion
 //#region src/ar/poi-controller/poi-controller.ts
+var DETECTION_VARIANT_TAGS = {
+	["data"]: "obc-poi-data",
+	["vessel"]: "obc-poi-vessel",
+	["aton"]: "obc-poi-aton"
+};
+/**
+* Attribute consumers set on a child `obc-poi-layer` to tell the
+* controller which layer receives its detection-driven targets.
+*/
+var POI_CONTROLLER_LAYER_ATTR = "data-controller-layer";
+/** `data-controller-layer` value marking the background/target layer. */
+var POI_CONTROLLER_BACKGROUND_LAYER = "background";
 var ObcPoiController = class ObcPoiController extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -12040,6 +12591,8 @@ var ObcPoiController = class ObcPoiController extends i$4 {
 		this.confidenceMin = null;
 		this.classFilter = null;
 		this.keyFn = null;
+		this.xFilterCutoffHz = null;
+		this.yFilterCutoffHz = null;
 		this.mediaWidth = 0;
 		this.mediaHeight = 0;
 		this.renderWidth = 0;
@@ -12111,7 +12664,7 @@ var ObcPoiController = class ObcPoiController extends i$4 {
 	resolveTargetLayer() {
 		const stack = this.getStackElement();
 		if (!stack) return null;
-		const explicitLayer = stack.querySelector("obc-poi-layer[data-controller-layer=\"background\"]");
+		const explicitLayer = stack.querySelector(`obc-poi-layer[${POI_CONTROLLER_LAYER_ATTR}="${POI_CONTROLLER_BACKGROUND_LAYER}"]`);
 		if (explicitLayer) return explicitLayer;
 		const layers = Array.from(stack.querySelectorAll("obc-poi-layer"));
 		const isSelectedLayer = (candidate) => candidate.isSelected === true;
@@ -12202,17 +12755,22 @@ var ObcPoiController = class ObcPoiController extends i$4 {
 		}
 		return frames[0] ?? null;
 	}
-	mapDetection(det) {
-		if (!Number.isFinite(this.mediaWidth) || !Number.isFinite(this.mediaHeight) || !Number.isFinite(this.renderWidth) || !Number.isFinite(this.renderHeight) || this.mediaWidth === 0 || this.mediaHeight === 0 || this.renderWidth === 0 || this.renderHeight === 0) return null;
-		const scale = this.fit === "cover" ? Math.max(this.renderWidth / this.mediaWidth, this.renderHeight / this.mediaHeight) : Math.min(this.renderWidth / this.mediaWidth, this.renderHeight / this.mediaHeight);
-		const contentWidth = this.mediaWidth * scale;
-		const contentHeight = this.mediaHeight * scale;
-		const offsetX = (this.renderWidth - contentWidth) / 2;
-		const offsetY = (this.renderHeight - contentHeight) / 2;
+	computeCurrentProjection() {
+		return computeMediaProjection({
+			mediaWidth: this.mediaWidth,
+			mediaHeight: this.mediaHeight,
+			renderWidth: this.renderWidth,
+			renderHeight: this.renderHeight,
+			fit: this.fit === "cover" ? MediaFit.Cover : MediaFit.Contain
+		});
+	}
+	mapDetection(det, projection = this.computeCurrentProjection()) {
+		if (!projection) return null;
+		const point = projectPoint(projection, det.x, det.y);
 		return {
-			x: offsetX + det.x * scale,
-			y: offsetY + det.y * scale,
-			scale
+			x: point.x,
+			y: point.y,
+			scale: projection.scale
 		};
 	}
 	syncTargetsToCustomStack() {
@@ -12231,19 +12789,34 @@ var ObcPoiController = class ObcPoiController extends i$4 {
 		const layerBottomInController = layer.getBoundingClientRect().bottom - controllerRect.top;
 		const active = this.getActiveDetections();
 		const activeKeys = /* @__PURE__ */ new Set();
+		const projection = this.computeCurrentProjection();
 		active.forEach((det, index) => {
-			const mapped = this.mapDetection(det);
+			const mapped = this.mapDetection(det, projection);
 			if (!mapped) return;
 			const key = det.id ?? (this.keyFn ? this.keyFn(det, index) : `index:${index}`);
 			activeKeys.add(key);
+			const tag = DETECTION_VARIANT_TAGS[det.variant ?? "data"];
 			let target = this.controllerTargets.get(key);
+			if (target && target.tagName.toLowerCase() !== tag) {
+				target.remove();
+				this.controllerTargets.delete(key);
+				target = void 0;
+			}
 			if (!target) {
-				target = document.createElement("obc-poi-data");
+				target = document.createElement(tag);
 				target.dataset.controller = "1";
 				target.dataset.detectionIndex = String(index);
 				target.fixedTarget = false;
 				this.controllerTargets.set(key, target);
 			}
+			const iconTag = det.icon?.toLowerCase() ?? null;
+			const currentIcon = target.firstElementChild;
+			if (iconTag) {
+				if (currentIcon?.tagName.toLowerCase() !== iconTag) {
+					currentIcon?.remove();
+					target.appendChild(document.createElement(iconTag));
+				}
+			} else if (currentIcon) currentIcon.remove();
 			if (!target.isConnected || target.parentElement === null) layer.appendChild(target);
 			target.dataset.detectionIndex = String(index);
 			target.x = mapped.x;
@@ -12255,6 +12828,10 @@ var ObcPoiController = class ObcPoiController extends i$4 {
 			target.buttonType = resolvePoiButtonTypeFromBoxSize(boxWidth, boxHeight);
 			const heading = det.heading ?? det.direction;
 			if (typeof heading === "number" && Number.isFinite(heading)) target.relativeDirection = heading;
+			target.state = det.state ?? ObcPoiState.Enabled;
+			target.data = det.data ?? [];
+			target.xFilterCutoffHz = this.xFilterCutoffHz ?? 16;
+			target.yFilterCutoffHz = this.yFilterCutoffHz ?? 16;
 		});
 		Array.from(this.controllerTargets.entries()).forEach(([key, target]) => {
 			if (!activeKeys.has(key)) {
@@ -12286,6 +12863,14 @@ __decorate([n$4({ type: Number })], ObcPoiController.prototype, "frameIndex", vo
 __decorate([n$4({ type: Number })], ObcPoiController.prototype, "confidenceMin", void 0);
 __decorate([n$4({ type: Array })], ObcPoiController.prototype, "classFilter", void 0);
 __decorate([n$4({ attribute: false })], ObcPoiController.prototype, "keyFn", void 0);
+__decorate([n$4({
+	type: Number,
+	attribute: "x-filter-cutoff-hz"
+})], ObcPoiController.prototype, "xFilterCutoffHz", void 0);
+__decorate([n$4({
+	type: Number,
+	attribute: "y-filter-cutoff-hz"
+})], ObcPoiController.prototype, "yFilterCutoffHz", void 0);
 __decorate([r$3()], ObcPoiController.prototype, "mediaWidth", void 0);
 __decorate([r$3()], ObcPoiController.prototype, "mediaHeight", void 0);
 __decorate([r$3()], ObcPoiController.prototype, "renderWidth", void 0);
@@ -12300,162 +12885,6 @@ __decorate([o$5({
 })], ObcPoiController.prototype, "stackElements", void 0);
 ObcPoiController = __decorate([customElement("obc-poi-controller")], ObcPoiController);
 //#endregion
-//#region src/icons/icon-beacon-general-east.ts
-var ObiBeaconGeneralEast = class ObiBeaconGeneralEast extends i$4 {
-	constructor(..._args) {
-		super(..._args);
-		this.useCssColor = false;
-		this.icon = w`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.17071 21H6V19.5H9.04148C9.15648 18.8145 9.50394 18.2079 10 17.7639L10 10H14V17.7639C14.4961 18.2079 14.8435 18.8145 14.9585 19.5H18V21H14.8293C14.4175 22.1652 13.3062 23 12 23C10.6938 23 9.58254 22.1652 9.17071 21ZM13.5 20C13.5 20.8284 12.8284 21.5 12 21.5C11.1716 21.5 10.5 20.8284 10.5 20C10.5 19.1716 11.1716 18.5 12 18.5C12.8284 18.5 13.5 19.1716 13.5 20Z" fill="currentColor"/>
-<path d="M14 4H10L12 1L14 4Z" fill="currentColor"/>
-<path d="M14 6H10L12 9L14 6Z" fill="currentColor"/>
-</svg>
-`;
-		this.iconCss = w`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.17071 21H6V19.5H9.04148C9.15648 18.8145 9.50394 18.2079 10 17.7639L10 10H14V17.7639C14.4961 18.2079 14.8435 18.8145 14.9585 19.5H18V21H14.8293C14.4175 22.1652 13.3062 23 12 23C10.6938 23 9.58254 22.1652 9.17071 21ZM13.5 20C13.5 20.8284 12.8284 21.5 12 21.5C11.1716 21.5 10.5 20.8284 10.5 20C10.5 19.1716 11.1716 18.5 12 18.5C12.8284 18.5 13.5 19.1716 13.5 20Z" style="fill: var(--element-active-color)"/>
-<path d="M14 4H10L12 1L14 4Z" style="fill: var(--element-active-color)"/>
-<path d="M14 6H10L12 9L14 6Z" style="fill: var(--element-active-color)"/>
-</svg>
-`;
-	}
-	render() {
-		return b`
-      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
-    `;
-	}
-	static {
-		this.styles = i$7`
-    .wrapper {
-      height: 100%;
-      width: 100%;
-      line-height: 0;
-    }
-    .wrapper > * {
-      height: 100%;
-      width: 100%;
-    }
-  `;
-	}
-};
-__decorate([n$4({ type: Boolean })], ObiBeaconGeneralEast.prototype, "useCssColor", void 0);
-ObiBeaconGeneralEast = __decorate([customElement("obi-beacon-general-east")], ObiBeaconGeneralEast);
-//#endregion
-//#region src/ar/poi/poi-aton.ts
-var ObcPoiAton = class ObcPoiAton extends PoiBase {
-	constructor(..._args) {
-		super(..._args);
-		this.atonType = ObcPoiObjectAtonType.AtoN;
-		this.atonStyle = ObcPoiObjectAtonStyle.Regular;
-		this.atonState = null;
-		this.atonInteractive = false;
-	}
-	getVisualNodes() {
-		return this.queryVisualNodes("obc-poi", "obc-poi-button-aton");
-	}
-	renderButtonSlot() {
-		return b`
-      <obc-poi-button-aton
-        slot="button"
-        .relativeDirection=${this.relativeDirection}
-        .selected=${this.selected}
-        .hasHeader=${this.hasHeader}
-        .headerContent=${this.headerContent}
-        .state=${this.resolvedPoiState}
-        .value=${this.value}
-        .overlapOpaque=${this.overlapOpaque}
-        .type=${this.buttonType}
-        .data=${this.data}
-        .atonType=${this.atonType}
-        .atonStyle=${this.atonStyle}
-        .atonState=${this.atonState}
-        .atonInteractive=${this.atonInteractive}
-      >
-        <slot><obi-beacon-general-east></obi-beacon-general-east></slot>
-      </obc-poi-button-aton>
-    `;
-	}
-	static {
-		this.styles = PoiBase.styles;
-	}
-};
-__decorate([n$4({
-	type: String,
-	attribute: "aton-type"
-})], ObcPoiAton.prototype, "atonType", void 0);
-__decorate([n$4({
-	type: String,
-	attribute: "aton-style"
-})], ObcPoiAton.prototype, "atonStyle", void 0);
-__decorate([n$4({
-	type: String,
-	attribute: "aton-state"
-})], ObcPoiAton.prototype, "atonState", void 0);
-__decorate([n$4({
-	type: Boolean,
-	attribute: "aton-interactive"
-})], ObcPoiAton.prototype, "atonInteractive", void 0);
-ObcPoiAton = __decorate([customElement("obc-poi-aton")], ObcPoiAton);
-//#endregion
-//#region src/ar/poi/poi-vessel.ts
-var ObcPoiVessel = class ObcPoiVessel extends PoiBase {
-	constructor(..._args) {
-		super(..._args);
-		this.vesselType = ObcPoiObjectVesselType.Regular;
-		this.vesselStyle = ObcPoiObjectVesselStyle.Regular;
-		this.vesselState = null;
-		this.vesselInteractive = false;
-	}
-	getVisualNodes() {
-		return this.queryVisualNodes("obc-poi", "obc-poi-button-vessel");
-	}
-	renderButtonSlot() {
-		return b`
-      <obc-poi-button-vessel
-        slot="button"
-        .relativeDirection=${this.relativeDirection}
-        .selected=${this.selected}
-        .hasHeader=${this.hasHeader}
-        .headerContent=${this.headerContent}
-        .state=${this.resolvedPoiState}
-        .value=${this.value}
-        .overlapOpaque=${this.overlapOpaque}
-        .type=${this.buttonType}
-        .data=${this.data}
-        .vesselType=${this.vesselType}
-        .vesselStyle=${this.vesselStyle}
-        .vesselState=${this.vesselState}
-        .vesselInteractive=${this.vesselInteractive}
-      >
-        <slot
-          ><obi-vessel-generic-default-filled></obi-vessel-generic-default-filled
-        ></slot>
-        <slot name="turn-indicator" slot="turn-indicator"></slot>
-        <slot name="speed-indicator" slot="speed-indicator"></slot>
-      </obc-poi-button-vessel>
-    `;
-	}
-	static {
-		this.styles = PoiBase.styles;
-	}
-};
-__decorate([n$4({
-	type: String,
-	attribute: "vessel-type"
-})], ObcPoiVessel.prototype, "vesselType", void 0);
-__decorate([n$4({
-	type: String,
-	attribute: "vessel-style"
-})], ObcPoiVessel.prototype, "vesselStyle", void 0);
-__decorate([n$4({
-	type: String,
-	attribute: "vessel-state"
-})], ObcPoiVessel.prototype, "vesselState", void 0);
-__decorate([n$4({
-	type: Boolean,
-	attribute: "vessel-interactive"
-})], ObcPoiVessel.prototype, "vesselInteractive", void 0);
-ObcPoiVessel = __decorate([customElement("obc-poi-vessel")], ObcPoiVessel);
-//#endregion
 //#region src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.css?inline
 var valve_analog_two_way_icon_default = i$7`* {
   -webkit-tap-highlight-color: transparent;