@nvidia-elements/core 2.9.0 → 2.11.0

package/dist/viewport/viewport-minimap2.js

@@ -0,0 +1,309 @@
+import { GestureController as e } from "../internal/controllers/gesture.controller.js";
+import { isImmediateRootActiveElement as t } from "../internal/utils/focus.js";
+import { attachInternals as n } from "../internal/utils/a11y.js";
+import { hostAttr as r } from "../internal/decorators/host-attr.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import { anchoredTransform as o } from "./viewport-projection.utils.js";
+import { Viewport as s } from "./viewport2.js";
+import c from "./viewport-minimap.js";
+import { createViewportMinimapProjection as l, projectViewportMinimapRect as u, unprojectViewportMinimapPoint as d } from "./viewport-minimap.utils.js";
+import { LitElement as f, html as p, nothing as m, svg as h } from "lit";
+import { styleMap as g } from "lit/directives/style-map.js";
+//#region src/viewport/viewport-minimap.ts
+var _ = 3, v = class extends f {
+	static {
+		this.styles = i([c]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-viewport-minimap",
+			version: "2.11.0"
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	get #p() {
+		return Array.from(this.children).filter((e) => e.slot === "preview");
+	}
+	get #m() {
+		let e = this.#r;
+		return e ? Array.from(e.children).filter((e) => !e.slot) : [];
+	}
+	constructor() {
+		super(), this.slot = "overlay", this.accessibilityHidden = "true", this.#t = /* @__PURE__ */ new WeakMap(), this.#n = 0, this.#s = [], this.#c = [], this.#f = !1, this.#E = () => {
+			this.#D(), this.#j({ measureRoots: !0 });
+		}, this.#O = () => {
+			let e = this.#r?.getTransform(), t = this.#u;
+			t?.active && e && (t.transformStart = e, t.transformStartDisplacementX = t.lastTotalDisplacementX, t.transformStartDisplacementY = t.lastTotalDisplacementY), this.#j({ measureRoots: !1 });
+		}, this.#k = () => {
+			this.#A(), this.requestUpdate();
+		}, this.#I = (e) => {
+			let t = e.detail;
+			t.kind === "pointerdown" ? this.#R(t) : t.kind === "pointerend" ? this.#U(t) : this.#L(t);
+		}, this.#z = (e) => {
+			let t = e.detail;
+			t.kind === "drag" && this.#B(t);
+		}, this.#e = new e(this, {
+			claimPriority: "self-first",
+			suppressNativeDrag: !0,
+			touchAction: () => this.#u || this.#r?.pannable ? "none" : void 0
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback(), n(this);
+		let e = this.parentElement;
+		e instanceof s && (this.#r = e, this.#r.addEventListener("viewportchange", this.#O), this.#r.addEventListener("capabilitieschange", this.#k), this.#h(e), this.requestUpdate());
+	}
+	#h(e) {
+		this.#e.target = this, this.addEventListener("nve-gesture-input", this.#I), this.addEventListener("nve-gesture", this.#z), this.#T(), e.updateComplete.then(() => {
+			this.#r === e && (this.#i = e.shadowRoot?.querySelector("slot:not([name])") ?? void 0, this.#i?.addEventListener("slotchange", this.#E), this.#D(), this.#j({ measureRoots: !0 }));
+		});
+	}
+	disconnectedCallback() {
+		this.#K(), this.#r?.removeEventListener("viewportchange", this.#O), this.#r?.removeEventListener("capabilitieschange", this.#k), this.#g(), this.#_(), this.#v(), super.disconnectedCallback();
+	}
+	#g() {
+		this.removeEventListener("nve-gesture-input", this.#I), this.removeEventListener("nve-gesture", this.#z), this.#i?.removeEventListener("slotchange", this.#E);
+	}
+	#_() {
+		this.#a?.disconnect(), this.#o?.disconnect(), this.#d !== void 0 && cancelAnimationFrame(this.#d);
+	}
+	#v() {
+		this.#d = void 0, this.#f = !1, this.#e.target = void 0, this.#u = void 0, this.#r = void 0, this.#i = void 0, this.#l = void 0, this.#s = [], this.#c = [], this._internals.states.delete("pan-eligible"), this._internals.states.delete("panning");
+	}
+	refresh() {
+		this.#j({ measureRoots: !0 });
+	}
+	render() {
+		let e = this.#l, t = this.#r, n = t && e ? u(t.getVisibleRect(), e) : void 0;
+		return p`<div internal-host class="surface">${this.#y()} ${this.#b(e)} ${this.#x(e, n)}</div>`;
+	}
+	#y() {
+		return p`<svg class="background-layer" aria-hidden="true" focusable="false"><rect class="background" data-minimap-background width="100%" height="100%"></rect></svg>`;
+	}
+	#b(e) {
+		return p`<div class="preview" style="${g({ transform: e ? `translate(${e.offsetX}px, ${e.offsetY}px) scale(${e.scale})` : "none" })}"><slot name="preview" @slotchange="${this.#E}"></slot></div>`;
+	}
+	#x(e, t) {
+		return p`<svg class="foreground-layer" aria-hidden="true" focusable="false" viewBox="0 0 ${this.clientWidth} ${this.clientHeight}" preserveAspectRatio="none">${this.#S(e)} ${this.#C(t)}</svg>`;
+	}
+	#S(e) {
+		return !e || this.#p.length ? m : this.#c.map((t) => this.#w(t, e));
+	}
+	#C(e) {
+		return e ? h`<rect class="visible-region" data-visible-region x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="2"></rect>` : m;
+	}
+	#w(e, t) {
+		let n = u(e, t);
+		return h`<rect class="item" data-item-key="${e.id}" x="${n.x}" y="${n.y}" width="${n.width}" height="${n.height}" rx="2"></rect>`;
+	}
+	#T() {
+		let e = this.#r;
+		!e || typeof ResizeObserver > "u" || (this.#a = new ResizeObserver((t) => {
+			this.#j({ measureRoots: t.some((t) => t.target === e || t.target === this) });
+		}), this.#a.observe(e), this.#a.observe(this), this.#o = new ResizeObserver(() => this.#j({ measureRoots: !0 })));
+	}
+	#E;
+	#D() {
+		let e = this.#r;
+		if (this.#o?.disconnect(), !e) return;
+		let t = this.#p, n = t.length ? t : this.#m;
+		for (let e of n) this.#o?.observe(e);
+	}
+	#O;
+	#k;
+	#A() {
+		let e = !!(this.#r?.pannable && this.#l);
+		this._internals.states.has("pan-eligible") !== e && (e ? this._internals.states.add("pan-eligible") : this._internals.states.delete("pan-eligible"));
+	}
+	#j({ measureRoots: e }) {
+		this.#f ||= e, this.#d === void 0 && (this.#d = requestAnimationFrame(() => {
+			this.#d = void 0;
+			let e = this.#f;
+			this.#f = !1, this.#M({ measureRoots: e });
+		}));
+	}
+	#M({ measureRoots: e }) {
+		let t = this.#r;
+		if (t) {
+			if (e) {
+				let e = this.#p;
+				e.length ? (this.#c = [], this.#s = this.#N(e)) : (this.#c = this.#P(t, this.#m), this.#s = this.#c);
+			}
+			this.#l = l(this.#s, t.getVisibleRect(), {
+				height: this.clientHeight,
+				width: this.clientWidth
+			}), this.#A(), this.requestUpdate();
+		}
+	}
+	#N(e) {
+		let t = this.renderRoot.querySelector(".preview");
+		if (!t) return [];
+		let n = t.getBoundingClientRect(), r = getComputedStyle(t).transform, i = new DOMMatrixReadOnly(r === "none" ? void 0 : r), a = [];
+		for (let t of e) {
+			let e = t.getBoundingClientRect();
+			e.width <= 0 || e.height <= 0 || a.push({
+				x: (e.left - n.left) / i.m11,
+				y: (e.top - n.top) / i.m11,
+				width: e.width / i.m11,
+				height: e.height / i.m11
+			});
+		}
+		return a;
+	}
+	#P(e, t) {
+		let n = e.getBoundingClientRect(), r = e.getTransform(), i = [];
+		for (let e of t) {
+			let t = e.getBoundingClientRect();
+			t.width <= 0 || t.height <= 0 || i.push({
+				id: this.#F(e),
+				x: r.x + (t.left - n.left) / r.scale,
+				y: r.y + (t.top - n.top) / r.scale,
+				width: t.width / r.scale,
+				height: t.height / r.scale
+			});
+		}
+		return i;
+	}
+	#F(e) {
+		let t = e.id.trim();
+		if (t) return t;
+		let n = this.#t.get(e);
+		if (n) return n;
+		let r = `root-${this.#n}`;
+		return this.#n += 1, this.#t.set(e, r), r;
+	}
+	#I;
+	#L(e) {
+		let n = this.#r;
+		if (e.deltaY === 0 || !n || !n.zoomable || !t(n) || !e.claim()) return;
+		let r = n.getTransform(), i = n.getVisibleRect(), a = {
+			x: i.x + i.width / 2,
+			y: i.y + i.height / 2
+		}, s = this.#e.getWheelZoomFactor(e), c = {
+			x: n.clientWidth / 2,
+			y: n.clientHeight / 2
+		};
+		n.requestZoom({
+			anchor: a,
+			event: e.event,
+			factor: s,
+			next: o(a, c, Math.min(n.maxScale, Math.max(n.minScale, r.scale * s))),
+			source: "minimap"
+		});
+	}
+	#R(e) {
+		let t = e.event, n = this.#r, r = this.#l;
+		if (!n || t.button !== 0 || !t.isPrimary || !n.pannable && !n.zoomable || (n.focus({ preventScroll: !0 }), !r || !n.pannable || !e.claim({ kind: "drag" }))) return;
+		let i = n.getTransform(), a = t.composedPath().some((e) => e instanceof Element && e.hasAttribute("data-visible-region"));
+		this.#u = {
+			active: !1,
+			activating: !1,
+			exceededThreshold: !1,
+			indicator: a,
+			lastTotalDisplacementX: 0,
+			lastTotalDisplacementY: 0,
+			pointerId: t.pointerId,
+			dragProjection: r,
+			transformStart: i,
+			transformStartDisplacementX: 0,
+			transformStartDisplacementY: 0
+		};
+	}
+	#z;
+	#B(e) {
+		let t = this.#u;
+		if (!t || t.pointerId !== e.event.pointerId || (t.lastTotalDisplacementX = e.totalDisplacementX, t.lastTotalDisplacementY = e.totalDisplacementY, e.totalDisplacementX ** 2 + e.totalDisplacementY ** 2 < _ ** 2) || (t.exceededThreshold = !0, !t.indicator)) return;
+		let n = this.#H(e, t);
+		t.active ? t.navigation?.update(n) : this.#V(t, n);
+	}
+	#V(e, t) {
+		e.activating = !0;
+		let n = this.#r?.startPan({
+			...t,
+			source: "minimap"
+		});
+		if (e.activating = !1, n) {
+			if (this.#u !== e) {
+				e.pendingEnd && n.end(e.pendingEnd);
+				return;
+			}
+			e.navigation = n, e.active = !0, this._internals.states.add("panning");
+		}
+	}
+	#H(e, t) {
+		let n = e.totalDisplacementX - t.transformStartDisplacementX, r = e.totalDisplacementY - t.transformStartDisplacementY;
+		return {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			event: e.event,
+			next: {
+				scale: t.transformStart.scale,
+				x: t.transformStart.x + n / t.dragProjection.scale,
+				y: t.transformStart.y + r / t.dragProjection.scale
+			}
+		};
+	}
+	#U(e) {
+		let t = this.#u;
+		!t || t.pointerId !== e.event.pointerId || (t.lastTotalDisplacementX = e.totalDisplacementX, t.lastTotalDisplacementY = e.totalDisplacementY, t.active ? t.navigation?.end({
+			event: e.event,
+			interrupted: e.interrupted,
+			reason: e.reason
+		}) : t.activating ? t.pendingEnd = {
+			event: e.event,
+			interrupted: e.interrupted,
+			reason: e.reason
+		} : e.reason === "up" && !t.exceededThreshold && this.#W(e.event, t), this.#G(t));
+	}
+	#W(e, t) {
+		let n = this.#r;
+		if (!n) return;
+		let r = this.getBoundingClientRect(), i = d({
+			x: e.clientX - r.left,
+			y: e.clientY - r.top
+		}, t.dragProjection), a = n.getTransform(), o = n.getVisibleRect();
+		n.requestPan({
+			clientX: e.clientX,
+			clientY: e.clientY,
+			event: e,
+			next: {
+				scale: a.scale,
+				x: i.x - o.width / 2,
+				y: i.y - o.height / 2
+			},
+			source: "minimap"
+		});
+	}
+	#G(e) {
+		this.#u === e && (this.#u = void 0, this._internals.states.delete("panning"), this.requestUpdate());
+	}
+	#K() {
+		let e = this.#u;
+		if (!e) return;
+		this.#G(e);
+		let t = {
+			event: new Event("disconnect"),
+			interrupted: !0,
+			reason: "cancel"
+		};
+		e.active ? e.navigation?.end(t) : e.activating && (e.pendingEnd = t);
+	}
+};
+a([r()], v.prototype, "slot", void 0), a([r({ attribute: "aria-hidden" })], v.prototype, "accessibilityHidden", void 0);
+//#endregion
+export { v as ViewportMinimap };
+
+//# sourceMappingURL=viewport-minimap2.js.map

package/dist/viewport/viewport-minimap2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-minimap2.js","names":[],"sources":["../../src/viewport/viewport-minimap.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  GestureController,\n  attachInternals,\n  hostAttr,\n  isImmediateRootActiveElement,\n  type Gesture,\n  type GestureInput,\n  type PointerEndGesture,\n  type PointerMovementGesture,\n  type WheelGestureInput,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './viewport-minimap.css?inline';\nimport {\n  createViewportMinimapProjection,\n  projectViewportMinimapRect,\n  unprojectViewportMinimapPoint,\n  type ViewportMinimapProjection\n} from './viewport-minimap.utils.js';\nimport { anchoredTransform } from './viewport-projection.utils.js';\nimport { Viewport } from './viewport.js';\nimport type {\n  ViewportPanEndRequest,\n  ViewportPanUpdateProposal,\n  ViewportPanSession,\n  ViewportRect,\n  ViewportTransform\n} from './viewport.types.js';\n\nconst DRAG_THRESHOLD = 3;\n\ninterface MinimapPointerSession {\n  readonly pointerId: number;\n  readonly dragProjection: ViewportMinimapProjection;\n  readonly indicator: boolean;\n  active: boolean;\n  activating: boolean;\n  navigation?: ViewportPanSession;\n  pendingEnd?: ViewportPanEndRequest;\n  exceededThreshold: boolean;\n  transformStart: ViewportTransform;\n  transformStartDisplacementX: number;\n  transformStartDisplacementY: number;\n  lastTotalDisplacementX: number;\n  lastTotalDisplacementY: number;\n}\n\ninterface ProjectionUpdate {\n  readonly measureRoots: boolean;\n}\n\ninterface AutomaticPreviewItem extends ViewportRect {\n  readonly id: string;\n}\n\n/**\n * @element nve-viewport-minimap\n * @description Provides a simplified overview and direct navigation for its parent viewport.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --background - Color of the surface behind preview geometry.\n * @cssprop --color - Color of automatically drawn root rectangles.\n * @cssprop --indicator-color - Color of the current visible-region indicator.\n * @cssprop --border-radius - Corner radius of the minimap.\n * @cssprop --recenter-cursor - Cursor for clicking the background to center the viewport.\n * @cssprop --pan-cursor - Cursor over a draggable visible region.\n * @cssprop --panning-cursor - Cursor during a visible-region drag.\n * @slot preview - Optional simplified content drawn in viewport content coordinates. Replaces automatic root rectangles.\n */\nexport class ViewportMinimap extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-minimap',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** @private */\n  @hostAttr() slot = 'overlay';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  readonly #gestureController: GestureController;\n  readonly #rootKeys = new WeakMap<Element, string>();\n  #nextRootKey = 0;\n  #viewport?: Viewport;\n  #defaultSlot?: HTMLSlotElement;\n  #layoutResizeObserver?: ResizeObserver;\n  #rootResizeObserver?: ResizeObserver;\n  #contentBounds: readonly ViewportRect[] = [];\n  #automaticItems: readonly AutomaticPreviewItem[] = [];\n  #projection?: ViewportMinimapProjection;\n  #pointerSession?: MinimapPointerSession;\n  #animationFrame?: number;\n  #measureRootsOnFrame = false;\n\n  get #previewRoots(): Element[] {\n    return Array.from(this.children).filter(child => child.slot === 'preview');\n  }\n\n  get #viewportRoots(): Element[] {\n    const viewport = this.#viewport;\n    if (!viewport) return [];\n    return Array.from(viewport.children).filter(child => !child.slot);\n  }\n\n  constructor() {\n    super();\n    this.#gestureController = new GestureController(this, {\n      claimPriority: 'self-first',\n      suppressNativeDrag: true,\n      touchAction: () => (this.#pointerSession || this.#viewport?.pannable ? 'none' : undefined)\n    });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    const viewport = this.parentElement;\n    if (!(viewport instanceof Viewport)) return;\n    this.#viewport = viewport;\n    this.#viewport.addEventListener('viewportchange', this.#handleTransformCommitted);\n    this.#viewport.addEventListener('capabilitieschange', this.#handleCapabilitiesChange);\n    this.#connectViewport(viewport);\n    this.requestUpdate();\n  }\n\n  #connectViewport(viewport: Viewport): void {\n    this.#gestureController.target = this;\n    this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.#connectResizeObservers();\n    void viewport.updateComplete.then(() => {\n      if (this.#viewport !== viewport) return;\n      this.#defaultSlot = viewport.shadowRoot?.querySelector('slot:not([name])') ?? undefined;\n      this.#defaultSlot?.addEventListener('slotchange', this.#handleSlotChange);\n      this.#syncObservedRoots();\n      this.#scheduleProjectionUpdate({ measureRoots: true });\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.#interruptPointerSession();\n    this.#viewport?.removeEventListener('viewportchange', this.#handleTransformCommitted);\n    this.#viewport?.removeEventListener('capabilitieschange', this.#handleCapabilitiesChange);\n    this.#disconnectViewport();\n    this.#disconnectObservers();\n    this.#resetConnectionState();\n    super.disconnectedCallback();\n  }\n\n  #disconnectViewport(): void {\n    this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.#defaultSlot?.removeEventListener('slotchange', this.#handleSlotChange);\n  }\n\n  #disconnectObservers(): void {\n    this.#layoutResizeObserver?.disconnect();\n    this.#rootResizeObserver?.disconnect();\n    if (this.#animationFrame !== undefined) cancelAnimationFrame(this.#animationFrame);\n  }\n\n  #resetConnectionState(): void {\n    this.#animationFrame = undefined;\n    this.#measureRootsOnFrame = false;\n    this.#gestureController.target = undefined;\n    this.#pointerSession = undefined;\n    this.#viewport = undefined;\n    this.#defaultSlot = undefined;\n    this.#projection = undefined;\n    this.#contentBounds = [];\n    this.#automaticItems = [];\n    this._internals.states.delete('pan-eligible');\n    this._internals.states.delete('panning');\n  }\n\n  /** Remeasures content bounds after preview or viewport roots move without resizing. */\n  refresh(): void {\n    this.#scheduleProjectionUpdate({ measureRoots: true });\n  }\n\n  render() {\n    const projection = this.#projection;\n    const viewport = this.#viewport;\n    const visible =\n      viewport && projection ? projectViewportMinimapRect(viewport.getVisibleRect(), projection) : undefined;\n    return html`\n      <div internal-host class=\"surface\">\n        ${this.#renderBackground()}\n        ${this.#renderPreview(projection)}\n        ${this.#renderForeground(projection, visible)}\n      </div>\n    `;\n  }\n\n  #renderBackground() {\n    return html`<svg class=\"background-layer\" aria-hidden=\"true\" focusable=\"false\">\n      <rect class=\"background\" data-minimap-background width=\"100%\" height=\"100%\"></rect>\n    </svg>`;\n  }\n\n  #renderPreview(projection?: ViewportMinimapProjection) {\n    return html`<div\n      class=\"preview\"\n      style=${styleMap({\n        transform: projection\n          ? `translate(${projection.offsetX}px, ${projection.offsetY}px) scale(${projection.scale})`\n          : 'none'\n      })}\n    >\n      <slot name=\"preview\" @slotchange=${this.#handleSlotChange}></slot>\n    </div>`;\n  }\n\n  #renderForeground(projection?: ViewportMinimapProjection, visible?: ViewportRect) {\n    return html`<svg\n      class=\"foreground-layer\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      viewBox=\"0 0 ${this.clientWidth} ${this.clientHeight}\"\n      preserveAspectRatio=\"none\"\n    >\n      ${this.#renderAutomaticItems(projection)}\n      ${this.#renderVisibleRegion(visible)}\n    </svg>`;\n  }\n\n  #renderAutomaticItems(projection?: ViewportMinimapProjection) {\n    if (!projection || this.#previewRoots.length) return nothing;\n    return this.#automaticItems.map(item => this.#renderItem(item, projection));\n  }\n\n  #renderVisibleRegion(visible?: ViewportRect) {\n    if (!visible) return nothing;\n    return svg`<rect\n      class=\"visible-region\"\n      data-visible-region\n      x=${visible.x}\n      y=${visible.y}\n      width=${visible.width}\n      height=${visible.height}\n      rx=\"2\"\n    ></rect>`;\n  }\n\n  #renderItem(item: AutomaticPreviewItem, projection: ViewportMinimapProjection) {\n    const rect = projectViewportMinimapRect(item, projection);\n    return svg`<rect\n      class=\"item\"\n      data-item-key=${item.id}\n      x=${rect.x}\n      y=${rect.y}\n      width=${rect.width}\n      height=${rect.height}\n      rx=\"2\"\n    ></rect>`;\n  }\n\n  #connectResizeObservers(): void {\n    const viewport = this.#viewport;\n    if (!viewport || typeof ResizeObserver === 'undefined') return;\n    this.#layoutResizeObserver = new ResizeObserver(entries => {\n      this.#scheduleProjectionUpdate({\n        measureRoots: entries.some(entry => entry.target === viewport || entry.target === this)\n      });\n    });\n    this.#layoutResizeObserver.observe(viewport);\n    this.#layoutResizeObserver.observe(this);\n    this.#rootResizeObserver = new ResizeObserver(() => this.#scheduleProjectionUpdate({ measureRoots: true }));\n  }\n\n  #handleSlotChange = (): void => {\n    this.#syncObservedRoots();\n    this.#scheduleProjectionUpdate({ measureRoots: true });\n  };\n\n  #syncObservedRoots(): void {\n    const viewport = this.#viewport;\n    this.#rootResizeObserver?.disconnect();\n    if (!viewport) return;\n    const previewRoots = this.#previewRoots;\n    const roots = previewRoots.length ? previewRoots : this.#viewportRoots;\n    for (const root of roots) this.#rootResizeObserver?.observe(root);\n  }\n\n  #handleTransformCommitted = (): void => {\n    const transform = this.#viewport?.getTransform();\n    const session = this.#pointerSession;\n    if (session?.active && transform) {\n      session.transformStart = transform;\n      session.transformStartDisplacementX = session.lastTotalDisplacementX;\n      session.transformStartDisplacementY = session.lastTotalDisplacementY;\n    }\n    this.#scheduleProjectionUpdate({ measureRoots: false });\n  };\n\n  #handleCapabilitiesChange = (): void => {\n    this.#syncPanEligibleState();\n    this.requestUpdate();\n  };\n\n  #syncPanEligibleState(): void {\n    const eligible = Boolean(this.#viewport?.pannable && this.#projection);\n    if (this._internals.states.has('pan-eligible') === eligible) return;\n    if (eligible) this._internals.states.add('pan-eligible');\n    else this._internals.states.delete('pan-eligible');\n  }\n\n  #scheduleProjectionUpdate({ measureRoots }: ProjectionUpdate): void {\n    this.#measureRootsOnFrame ||= measureRoots;\n    if (this.#animationFrame !== undefined) return;\n    this.#animationFrame = requestAnimationFrame(() => {\n      this.#animationFrame = undefined;\n      const shouldMeasureRoots = this.#measureRootsOnFrame;\n      this.#measureRootsOnFrame = false;\n      this.#updateProjection({ measureRoots: shouldMeasureRoots });\n    });\n  }\n\n  #updateProjection({ measureRoots }: ProjectionUpdate): void {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    if (measureRoots) {\n      const previewRoots = this.#previewRoots;\n      if (previewRoots.length) {\n        this.#automaticItems = [];\n        this.#contentBounds = this.#measureCustomContent(previewRoots);\n      } else {\n        this.#automaticItems = this.#measureAutomaticItems(viewport, this.#viewportRoots);\n        this.#contentBounds = this.#automaticItems;\n      }\n    }\n    this.#projection = createViewportMinimapProjection(this.#contentBounds, viewport.getVisibleRect(), {\n      height: this.clientHeight,\n      width: this.clientWidth\n    });\n    this.#syncPanEligibleState();\n    this.requestUpdate();\n  }\n\n  #measureCustomContent(roots: readonly Element[]): readonly ViewportRect[] {\n    const wrapper = this.renderRoot.querySelector<HTMLElement>('.preview');\n    if (!wrapper) return [];\n    const frame = wrapper.getBoundingClientRect();\n    const transform = getComputedStyle(wrapper).transform;\n    const matrix = new DOMMatrixReadOnly(transform === 'none' ? undefined : transform);\n    const bounds: ViewportRect[] = [];\n    for (const root of roots) {\n      const rect = root.getBoundingClientRect();\n      if (rect.width <= 0 || rect.height <= 0) continue;\n      bounds.push({\n        x: (rect.left - frame.left) / matrix.m11,\n        y: (rect.top - frame.top) / matrix.m11,\n        width: rect.width / matrix.m11,\n        height: rect.height / matrix.m11\n      });\n    }\n    return bounds;\n  }\n\n  #measureAutomaticItems(viewport: Viewport, roots: readonly Element[]): readonly AutomaticPreviewItem[] {\n    const frame = viewport.getBoundingClientRect();\n    const transform = viewport.getTransform();\n    const items: AutomaticPreviewItem[] = [];\n    for (const root of roots) {\n      const rect = root.getBoundingClientRect();\n      if (rect.width <= 0 || rect.height <= 0) continue;\n      items.push({\n        id: this.#keyForRoot(root),\n        x: transform.x + (rect.left - frame.left) / transform.scale,\n        y: transform.y + (rect.top - frame.top) / transform.scale,\n        width: rect.width / transform.scale,\n        height: rect.height / transform.scale\n      });\n    }\n    return items;\n  }\n\n  #keyForRoot(root: Element): string {\n    const id = root.id.trim();\n    if (id) return id;\n    const current = this.#rootKeys.get(root);\n    if (current) return current;\n    const key = `root-${this.#nextRootKey}`;\n    this.#nextRootKey += 1;\n    this.#rootKeys.set(root, key);\n    return key;\n  }\n\n  #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n    const input = event.detail;\n    if (input.kind === 'pointerdown') this.#handlePointerDown(input);\n    else if (input.kind === 'pointerend') this.#handlePointerEnd(input);\n    else this.#handleWheel(input);\n  };\n\n  #handleWheel(input: WheelGestureInput): void {\n    const viewport = this.#viewport;\n    if (\n      input.deltaY === 0 ||\n      !viewport ||\n      !viewport.zoomable ||\n      !isImmediateRootActiveElement(viewport) ||\n      !input.claim()\n    ) {\n      return;\n    }\n    const start = viewport.getTransform();\n    const visible = viewport.getVisibleRect();\n    const anchor = { x: visible.x + visible.width / 2, y: visible.y + visible.height / 2 };\n    const factor = this.#gestureController.getWheelZoomFactor(input);\n    const viewportCenter = { x: viewport.clientWidth / 2, y: viewport.clientHeight / 2 };\n    viewport.requestZoom({\n      anchor,\n      event: input.event,\n      factor,\n      next: anchoredTransform(\n        anchor,\n        viewportCenter,\n        Math.min(viewport.maxScale, Math.max(viewport.minScale, start.scale * factor))\n      ),\n      source: 'minimap'\n    });\n  }\n\n  #handlePointerDown(input: Extract<GestureInput, { kind: 'pointerdown' }>): void {\n    const nativeEvent = input.event;\n    const viewport = this.#viewport;\n    const projection = this.#projection;\n    if (!viewport || nativeEvent.button !== 0 || !nativeEvent.isPrimary || (!viewport.pannable && !viewport.zoomable)) {\n      return;\n    }\n    viewport.focus({ preventScroll: true });\n    if (!projection || !viewport.pannable || !input.claim({ kind: 'drag' })) return;\n    const start = viewport.getTransform();\n    const indicator = nativeEvent\n      .composedPath()\n      .some(target => target instanceof Element && target.hasAttribute('data-visible-region'));\n    this.#pointerSession = {\n      active: false,\n      activating: false,\n      exceededThreshold: false,\n      indicator,\n      lastTotalDisplacementX: 0,\n      lastTotalDisplacementY: 0,\n      pointerId: nativeEvent.pointerId,\n      dragProjection: projection,\n      transformStart: start,\n      transformStartDisplacementX: 0,\n      transformStartDisplacementY: 0\n    };\n  }\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    const gesture = event.detail;\n    if (gesture.kind === 'drag') this.#handlePointerDrag(gesture);\n  };\n\n  #handlePointerDrag(gesture: PointerMovementGesture): void {\n    const session = this.#pointerSession;\n    if (!session || session.pointerId !== gesture.event.pointerId) return;\n    session.lastTotalDisplacementX = gesture.totalDisplacementX;\n    session.lastTotalDisplacementY = gesture.totalDisplacementY;\n    const distanceSquared = gesture.totalDisplacementX ** 2 + gesture.totalDisplacementY ** 2;\n    if (distanceSquared < DRAG_THRESHOLD ** 2) return;\n    session.exceededThreshold = true;\n    if (!session.indicator) return;\n    const proposal = this.#dragProposal(gesture, session);\n    if (!session.active) this.#activateDrag(session, proposal);\n    else session.navigation?.update(proposal);\n  }\n\n  #activateDrag(session: MinimapPointerSession, proposal: ViewportPanUpdateProposal): void {\n    session.activating = true;\n    const navigation = this.#viewport?.startPan({ ...proposal, source: 'minimap' });\n    session.activating = false;\n    if (!navigation) return;\n    if (this.#pointerSession !== session) {\n      if (session.pendingEnd) navigation.end(session.pendingEnd);\n      return;\n    }\n    session.navigation = navigation;\n    session.active = true;\n    this._internals.states.add('panning');\n  }\n\n  #dragProposal(gesture: PointerMovementGesture, session: MinimapPointerSession): ViewportPanUpdateProposal {\n    const displacementX = gesture.totalDisplacementX - session.transformStartDisplacementX;\n    const displacementY = gesture.totalDisplacementY - session.transformStartDisplacementY;\n    return {\n      clientX: gesture.clientX,\n      clientY: gesture.clientY,\n      event: gesture.event,\n      next: {\n        scale: session.transformStart.scale,\n        x: session.transformStart.x + displacementX / session.dragProjection.scale,\n        y: session.transformStart.y + displacementY / session.dragProjection.scale\n      }\n    };\n  }\n\n  #handlePointerEnd(input: PointerEndGesture): void {\n    const session = this.#pointerSession;\n    if (!session || session.pointerId !== input.event.pointerId) return;\n    session.lastTotalDisplacementX = input.totalDisplacementX;\n    session.lastTotalDisplacementY = input.totalDisplacementY;\n    if (session.active) {\n      session.navigation?.end({ event: input.event, interrupted: input.interrupted, reason: input.reason });\n    } else if (session.activating) {\n      session.pendingEnd = { event: input.event, interrupted: input.interrupted, reason: input.reason };\n    } else if (input.reason === 'up' && !session.exceededThreshold) {\n      this.#requestClickPan(input.event, session);\n    }\n    this.#endPointerSession(session);\n  }\n\n  #requestClickPan(event: PointerEvent, session: MinimapPointerSession): void {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    const frame = this.getBoundingClientRect();\n    const point = unprojectViewportMinimapPoint(\n      { x: event.clientX - frame.left, y: event.clientY - frame.top },\n      session.dragProjection\n    );\n    const current = viewport.getTransform();\n    const visible = viewport.getVisibleRect();\n    viewport.requestPan({\n      clientX: event.clientX,\n      clientY: event.clientY,\n      event,\n      next: {\n        scale: current.scale,\n        x: point.x - visible.width / 2,\n        y: point.y - visible.height / 2\n      },\n      source: 'minimap'\n    });\n  }\n\n  #endPointerSession(session: MinimapPointerSession): void {\n    if (this.#pointerSession !== session) return;\n    this.#pointerSession = undefined;\n    this._internals.states.delete('panning');\n    this.requestUpdate();\n  }\n\n  #interruptPointerSession(): void {\n    const session = this.#pointerSession;\n    if (!session) return;\n    this.#endPointerSession(session);\n    const end: ViewportPanEndRequest = { event: new Event('disconnect'), interrupted: true, reason: 'cancel' };\n    if (session.active) session.navigation?.end(end);\n    else if (session.activating) session.pendingEnd = end;\n  }\n}\n"],"mappings":"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"}

package/dist/viewport/viewport-navigation.controller.d.ts

@@ -1,22 +1,16 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPoint, ViewportTransform } from './viewport.types.js';
-import type { ViewportNavigationEventDelegate, ViewportZoomAction } from './viewport-navigation.types.js';
+import type { ViewportPanProposal, ViewportZoomProposal, ViewportZoomRequestOptions, ViewportTransform } from './viewport.types.js';
+import type { ViewportZoomAction } from './viewport-navigation.types.js';
 type ViewportNavigationHost = HTMLElement & ReactiveControllerHost & {
-    readonly behaviorPan: ViewportPanBehavior;
-    readonly behaviorZoom: boolean;
+    readonly pannable: boolean;
+    readonly zoomable: boolean;
+    requestPan(proposal: ViewportPanProposal): boolean;
+    requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean;
 };
-export interface ViewportNavigationDelegate {
-    readonly animateTo: (target: Partial<ViewportTransform>, options?: ViewportAnimationOptions) => void;
-    readonly commitTransform: (next: ViewportTransform) => boolean;
-    readonly cancelAnimation: () => void;
-    readonly consumeAutoFit: () => void;
-    readonly events: ViewportNavigationEventDelegate;
+interface ViewportNavigationDelegate {
     readonly getTransform: () => ViewportTransform;
     readonly getZoomTarget: (action: ViewportZoomAction) => ViewportTransform | undefined;
-    readonly rebasePointerSessions: () => void;
-    readonly viewportToClient: (viewportX: number, viewportY: number) => ViewportPoint;
 }
-/** Coordinates the viewport's opt-in keyboard and Invoker navigation behavior. */
 export declare class ViewportNavigationController implements ReactiveController {
     #private;
     constructor(host: ViewportNavigationHost, delegate: ViewportNavigationDelegate);

package/dist/viewport/viewport-navigation.controller.js

@@ -7,19 +7,19 @@ var r = 20, i = 100, a = class {
 	#t;
 	#n = !1;
 	constructor(e, n) {
-		this.#e = e, this.#t = n, e.addController(this), new t(e, { isEnabled: () => !!e.behaviorPan || e.behaviorZoom });
+		this.#e = e, this.#t = n, e.addController(this), new t(e, { isEnabled: () => e.pannable || e.zoomable });
 	}
 	hostConnected() {
-		this.#e.addEventListener("nve-key", this.#i), this.#e.addEventListener("command", this.#r), this.#e.addEventListener("keydown", this.#o), this.#u(!!this.#e.behaviorPan || this.#e.behaviorZoom);
+		this.#e.addEventListener("nve-key", this.#i), this.#e.addEventListener("command", this.#r), this.#e.addEventListener("keydown", this.#o), this.#u(this.#e.pannable || this.#e.zoomable);
 	}
 	hostDisconnected() {
 		this.#e.removeEventListener("nve-key", this.#i), this.#e.removeEventListener("command", this.#r), this.#e.removeEventListener("keydown", this.#o);
 	}
 	hostUpdated() {
-		this.#u(!!this.#e.behaviorPan || this.#e.behaviorZoom);
+		this.#u(this.#e.pannable || this.#e.zoomable);
 	}
 	#r = (e) => {
-		let t = this.#e.behaviorPan ? o(e.command) : void 0;
+		let t = this.#e.pannable ? o(e.command) : void 0;
 		if (t) {
 			this.#a(e, {
 				direction: t,
@@ -28,7 +28,7 @@ var r = 20, i = 100, a = class {
 			});
 			return;
 		}
-		if (!this.#e.behaviorZoom) return;
+		if (!this.#e.zoomable) return;
 		let n = s(e.command);
 		if (!n) return;
 		let i = this.#t.getZoomTarget(n);
@@ -50,18 +50,16 @@ var r = 20, i = 100, a = class {
 		}
 	};
 	#a(e, t) {
-		this.#t.consumeAutoFit(), this.#t.cancelAnimation();
 		let n = this.#t.getTransform(), r = t.viewportPixelStep / n.scale, i = {
 			scale: n.scale,
 			x: n.x + t.direction.horizontal * r,
 			y: n.y + t.direction.vertical * r
-		}, a = {
+		};
+		this.#e.requestPan({
 			event: e,
 			next: i,
-			source: t.source,
-			start: n
-		};
-		this.#t.events.dispatchPan(a) && this.#t.commitTransform(i) && this.#t.rebasePointerSessions();
+			source: t.source
+		});
 	}
 	#o = (e) => {
 		if (!this.#c(e) || !e.ctrlKey && !e.metaKey) return;
@@ -71,27 +69,23 @@ var r = 20, i = 100, a = class {
 		n && (e.preventDefault(), this.#s(e, n, "keyboard"));
 	};
 	#s(e, t, r) {
-		this.#t.consumeAutoFit();
 		let i = this.#t.getTransform(), a = {
 			x: this.#e.clientWidth / 2,
 			y: this.#e.clientHeight / 2
-		}, o = this.#t.viewportToClient(a.x, a.y), s = {
+		}, o = {
 			anchor: n(a.x, a.y, i),
-			clientX: o.x,
-			clientY: o.y,
 			event: e,
 			factor: t.scale / i.scale,
 			next: t,
-			source: r,
-			start: i
+			source: r
 		};
-		this.#t.events.dispatchZoom(s) && this.#t.animateTo(t);
+		this.#e.requestZoom(o, { animated: !0 });
 	}
 	#c(t) {
-		return this.#e.behaviorZoom && e(this.#e) && t.composedPath()[0] === this.#e;
+		return this.#e.zoomable && e(this.#e) && t.composedPath()[0] === this.#e;
 	}
 	#l(t) {
-		return !!this.#e.behaviorPan && e(this.#e) && t.composedPath()[0] === this.#e && !t.ctrlKey && !t.metaKey && !t.altKey;
+		return this.#e.pannable && e(this.#e) && t.composedPath()[0] === this.#e && !t.ctrlKey && !t.metaKey && !t.altKey;
 	}
 	#u(e) {
 		e ? this.#e.hasAttribute("tabindex") || (this.#e.tabIndex = 0, this.#n = !0) : (this.#n && this.#e.getAttribute("tabindex") === "0" && this.#e.removeAttribute("tabindex"), this.#n = !1);

package/dist/viewport/viewport-navigation.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-navigation.controller.js","names":[],"sources":["../../src/viewport/viewport-navigation.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n  isImmediateRootActiveElement,\n  KeyNavigationSpatialController,\n  type SpatialKeyCommand\n} from '@nvidia-elements/core/internal';\nimport type {\n  ViewportAnimationOptions,\n  ViewportDiscretePanDetail,\n  ViewportPanBehavior,\n  ViewportPoint,\n  ViewportTransform,\n  ViewportZoomDetail\n} from './viewport.types.js';\nimport type { ViewportNavigationEventDelegate, ViewportZoomAction } from './viewport-navigation.types.js';\nimport { contentPointFromViewport } from './viewport-projection.utils.js';\n\nconst KEYBOARD_PAN_STEP = 20;\nconst KEYBOARD_PAN_LARGE_STEP = 100;\n\ninterface PanDirection {\n  readonly horizontal: -1 | 0 | 1;\n  readonly vertical: -1 | 0 | 1;\n}\n\ninterface DiscretePanRequest {\n  readonly direction: PanDirection;\n  readonly source: 'command' | 'keyboard';\n  readonly viewportPixelStep: number;\n}\n\ntype ViewportNavigationHost = HTMLElement &\n  ReactiveControllerHost & {\n    readonly behaviorPan: ViewportPanBehavior;\n    readonly behaviorZoom: boolean;\n  };\n\nexport interface ViewportNavigationDelegate {\n  readonly animateTo: (target: Partial<ViewportTransform>, options?: ViewportAnimationOptions) => void;\n  readonly commitTransform: (next: ViewportTransform) => boolean;\n  readonly cancelAnimation: () => void;\n  readonly consumeAutoFit: () => void;\n  readonly events: ViewportNavigationEventDelegate;\n  readonly getTransform: () => ViewportTransform;\n  readonly getZoomTarget: (action: ViewportZoomAction) => ViewportTransform | undefined;\n  readonly rebasePointerSessions: () => void;\n  readonly viewportToClient: (viewportX: number, viewportY: number) => ViewportPoint;\n}\n\n/** Coordinates the viewport's opt-in keyboard and Invoker navigation behavior. */\nexport class ViewportNavigationController implements ReactiveController {\n  readonly #host: ViewportNavigationHost;\n  readonly #delegate: ViewportNavigationDelegate;\n  #managesTabIndex = false;\n\n  constructor(host: ViewportNavigationHost, delegate: ViewportNavigationDelegate) {\n    this.#host = host;\n    this.#delegate = delegate;\n    host.addController(this);\n    new KeyNavigationSpatialController(host, { isEnabled: () => Boolean(host.behaviorPan) || host.behaviorZoom });\n  }\n\n  hostConnected(): void {\n    this.#host.addEventListener('nve-key', this.#handleSpatialKey as EventListener);\n    this.#host.addEventListener('command', this.#handleCommand as EventListener);\n    this.#host.addEventListener('keydown', this.#handleViewportKeyDown as EventListener);\n    this.#syncFocusability(Boolean(this.#host.behaviorPan) || this.#host.behaviorZoom);\n  }\n\n  hostDisconnected(): void {\n    this.#host.removeEventListener('nve-key', this.#handleSpatialKey as EventListener);\n    this.#host.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#host.removeEventListener('keydown', this.#handleViewportKeyDown as EventListener);\n  }\n\n  hostUpdated(): void {\n    this.#syncFocusability(Boolean(this.#host.behaviorPan) || this.#host.behaviorZoom);\n  }\n\n  #handleCommand = (event: CommandEvent): void => {\n    const panDirection = this.#host.behaviorPan ? commandPanDirection(event.command) : undefined;\n    if (panDirection) {\n      this.#requestDiscretePan(event, {\n        direction: panDirection,\n        source: 'command',\n        viewportPixelStep: KEYBOARD_PAN_STEP\n      });\n      return;\n    }\n    if (!this.#host.behaviorZoom) return;\n    const action = commandZoomAction(event.command);\n    if (!action) return;\n    const next = this.#delegate.getZoomTarget(action);\n    if (next) this.#requestZoom(event, next, 'command');\n  };\n\n  #handleSpatialKey = (event: CustomEvent<SpatialKeyCommand>): void => {\n    const command = event.detail;\n    if (command.kind === 'direction') {\n      if (!this.#acceptsKeyboardPan(command.event)) return;\n      command.event.preventDefault();\n      this.#requestDiscretePan(command.event, {\n        direction: keyboardPanDirection(command.key),\n        source: 'keyboard',\n        viewportPixelStep: command.shiftKey ? KEYBOARD_PAN_LARGE_STEP : KEYBOARD_PAN_STEP\n      });\n    } else if (this.#acceptsKeyboardZoom(command.event)) {\n      command.event.preventDefault();\n      const action = command.key === '-' ? 'out' : 'in';\n      const next = this.#delegate.getZoomTarget(action);\n      if (next) this.#requestZoom(command.event, next, 'keyboard');\n    }\n  };\n\n  #requestDiscretePan(event: CommandEvent | KeyboardEvent, request: DiscretePanRequest): void {\n    this.#delegate.consumeAutoFit();\n    this.#delegate.cancelAnimation();\n    const start = this.#delegate.getTransform();\n    const contentStep = request.viewportPixelStep / start.scale;\n    const next = {\n      scale: start.scale,\n      x: start.x + request.direction.horizontal * contentStep,\n      y: start.y + request.direction.vertical * contentStep\n    };\n    const detail: ViewportDiscretePanDetail = { event, next, source: request.source, start };\n    if (this.#delegate.events.dispatchPan(detail) && this.#delegate.commitTransform(next)) {\n      this.#delegate.rebasePointerSessions();\n    }\n  }\n\n  #handleViewportKeyDown = (event: KeyboardEvent): void => {\n    if (!this.#acceptsKeyboardZoom(event) || (!event.ctrlKey && !event.metaKey)) return;\n    const action = event.key === '0' ? 'reset' : event.key === '1' ? 'fit' : undefined;\n    if (!action) return;\n    const next = this.#delegate.getZoomTarget(action);\n    if (!next) return;\n    event.preventDefault();\n    this.#requestZoom(event, next, 'keyboard');\n  };\n\n  #requestZoom(event: CommandEvent | KeyboardEvent, next: ViewportTransform, source: 'command' | 'keyboard'): void {\n    this.#delegate.consumeAutoFit();\n    const start = this.#delegate.getTransform();\n    const viewport = { x: this.#host.clientWidth / 2, y: this.#host.clientHeight / 2 };\n    const client = this.#delegate.viewportToClient(viewport.x, viewport.y);\n    const detail: ViewportZoomDetail = {\n      anchor: contentPointFromViewport(viewport.x, viewport.y, start),\n      clientX: client.x,\n      clientY: client.y,\n      event,\n      factor: next.scale / start.scale,\n      next,\n      source,\n      start\n    };\n    if (this.#delegate.events.dispatchZoom(detail)) this.#delegate.animateTo(next);\n  }\n\n  #acceptsKeyboardZoom(event: KeyboardEvent): boolean {\n    return (\n      this.#host.behaviorZoom && isImmediateRootActiveElement(this.#host) && event.composedPath()[0] === this.#host\n    );\n  }\n\n  #acceptsKeyboardPan(event: KeyboardEvent): boolean {\n    return (\n      Boolean(this.#host.behaviorPan) &&\n      isImmediateRootActiveElement(this.#host) &&\n      event.composedPath()[0] === this.#host &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    );\n  }\n\n  #syncFocusability(behaviorEnabled: boolean): void {\n    if (!behaviorEnabled) {\n      if (this.#managesTabIndex && this.#host.getAttribute('tabindex') === '0') this.#host.removeAttribute('tabindex');\n      this.#managesTabIndex = false;\n    } else if (!this.#host.hasAttribute('tabindex')) {\n      this.#host.tabIndex = 0;\n      this.#managesTabIndex = true;\n    }\n  }\n}\n\nfunction commandPanDirection(command: string): PanDirection | undefined {\n  if (command === '--pan-left') return { horizontal: -1, vertical: 0 };\n  if (command === '--pan-right') return { horizontal: 1, vertical: 0 };\n  if (command === '--pan-up') return { horizontal: 0, vertical: -1 };\n  if (command === '--pan-down') return { horizontal: 0, vertical: 1 };\n  return undefined;\n}\n\nfunction commandZoomAction(command: string): ViewportZoomAction | undefined {\n  if (command === '--zoom-in') return 'in';\n  if (command === '--zoom-out') return 'out';\n  if (command === '--zoom-reset') return 'reset';\n  if (command === '--zoom-to-fit') return 'fit';\n  return undefined;\n}\n\nfunction keyboardPanDirection(key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp'): PanDirection {\n  if (key === 'ArrowLeft') return { horizontal: -1, vertical: 0 };\n  if (key === 'ArrowRight') return { horizontal: 1, vertical: 0 };\n  if (key === 'ArrowUp') return { horizontal: 0, vertical: -1 };\n  return { horizontal: 0, vertical: 1 };\n}\n"],"mappings":"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"}
+{"version":3,"file":"viewport-navigation.controller.js","names":[],"sources":["../../src/viewport/viewport-navigation.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport {\n  isImmediateRootActiveElement,\n  KeyNavigationSpatialController,\n  type SpatialKeyCommand\n} from '@nvidia-elements/core/internal';\nimport type {\n  ViewportPanProposal,\n  ViewportZoomProposal,\n  ViewportZoomRequestOptions,\n  ViewportTransform\n} from './viewport.types.js';\nimport type { ViewportZoomAction } from './viewport-navigation.types.js';\nimport { contentPointFromViewport } from './viewport-projection.utils.js';\n\nconst KEYBOARD_PAN_STEP = 20;\nconst KEYBOARD_PAN_LARGE_STEP = 100;\n\ninterface PanDirection {\n  readonly horizontal: -1 | 0 | 1;\n  readonly vertical: -1 | 0 | 1;\n}\n\ninterface DiscretePanRequest {\n  readonly direction: PanDirection;\n  readonly source: 'command' | 'keyboard';\n  readonly viewportPixelStep: number;\n}\n\ntype ViewportNavigationHost = HTMLElement &\n  ReactiveControllerHost & {\n    readonly pannable: boolean;\n    readonly zoomable: boolean;\n    requestPan(proposal: ViewportPanProposal): boolean;\n    requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean;\n  };\n\ninterface ViewportNavigationDelegate {\n  readonly getTransform: () => ViewportTransform;\n  readonly getZoomTarget: (action: ViewportZoomAction) => ViewportTransform | undefined;\n}\n\nexport class ViewportNavigationController implements ReactiveController {\n  readonly #host: ViewportNavigationHost;\n  readonly #delegate: ViewportNavigationDelegate;\n  #managesTabIndex = false;\n\n  constructor(host: ViewportNavigationHost, delegate: ViewportNavigationDelegate) {\n    this.#host = host;\n    this.#delegate = delegate;\n    host.addController(this);\n    new KeyNavigationSpatialController(host, { isEnabled: () => host.pannable || host.zoomable });\n  }\n\n  hostConnected(): void {\n    this.#host.addEventListener('nve-key', this.#handleSpatialKey as EventListener);\n    this.#host.addEventListener('command', this.#handleCommand as EventListener);\n    this.#host.addEventListener('keydown', this.#handleViewportKeyDown as EventListener);\n    this.#syncFocusability(this.#host.pannable || this.#host.zoomable);\n  }\n\n  hostDisconnected(): void {\n    this.#host.removeEventListener('nve-key', this.#handleSpatialKey as EventListener);\n    this.#host.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#host.removeEventListener('keydown', this.#handleViewportKeyDown as EventListener);\n  }\n\n  hostUpdated(): void {\n    this.#syncFocusability(this.#host.pannable || this.#host.zoomable);\n  }\n\n  #handleCommand = (event: CommandEvent): void => {\n    const panDirection = this.#host.pannable ? commandPanDirection(event.command) : undefined;\n    if (panDirection) {\n      this.#requestDiscretePan(event, {\n        direction: panDirection,\n        source: 'command',\n        viewportPixelStep: KEYBOARD_PAN_STEP\n      });\n      return;\n    }\n    if (!this.#host.zoomable) return;\n    const action = commandZoomAction(event.command);\n    if (!action) return;\n    const next = this.#delegate.getZoomTarget(action);\n    if (next) this.#requestZoom(event, next, 'command');\n  };\n\n  #handleSpatialKey = (event: CustomEvent<SpatialKeyCommand>): void => {\n    const command = event.detail;\n    if (command.kind === 'direction') {\n      if (!this.#acceptsKeyboardPan(command.event)) return;\n      command.event.preventDefault();\n      this.#requestDiscretePan(command.event, {\n        direction: keyboardPanDirection(command.key),\n        source: 'keyboard',\n        viewportPixelStep: command.shiftKey ? KEYBOARD_PAN_LARGE_STEP : KEYBOARD_PAN_STEP\n      });\n    } else if (this.#acceptsKeyboardZoom(command.event)) {\n      command.event.preventDefault();\n      const action = command.key === '-' ? 'out' : 'in';\n      const next = this.#delegate.getZoomTarget(action);\n      if (next) this.#requestZoom(command.event, next, 'keyboard');\n    }\n  };\n\n  #requestDiscretePan(event: CommandEvent | KeyboardEvent, request: DiscretePanRequest): void {\n    const start = this.#delegate.getTransform();\n    const contentStep = request.viewportPixelStep / start.scale;\n    const next = {\n      scale: start.scale,\n      x: start.x + request.direction.horizontal * contentStep,\n      y: start.y + request.direction.vertical * contentStep\n    };\n    this.#host.requestPan({ event, next, source: request.source });\n  }\n\n  #handleViewportKeyDown = (event: KeyboardEvent): void => {\n    if (!this.#acceptsKeyboardZoom(event) || (!event.ctrlKey && !event.metaKey)) return;\n    const action = event.key === '0' ? 'reset' : event.key === '1' ? 'fit' : undefined;\n    if (!action) return;\n    const next = this.#delegate.getZoomTarget(action);\n    if (!next) return;\n    event.preventDefault();\n    this.#requestZoom(event, next, 'keyboard');\n  };\n\n  #requestZoom(event: CommandEvent | KeyboardEvent, next: ViewportTransform, source: 'command' | 'keyboard'): void {\n    const start = this.#delegate.getTransform();\n    const viewport = { x: this.#host.clientWidth / 2, y: this.#host.clientHeight / 2 };\n    const proposal: ViewportZoomProposal = {\n      anchor: contentPointFromViewport(viewport.x, viewport.y, start),\n      event,\n      factor: next.scale / start.scale,\n      next,\n      source\n    };\n    this.#host.requestZoom(proposal, { animated: true });\n  }\n\n  #acceptsKeyboardZoom(event: KeyboardEvent): boolean {\n    return this.#host.zoomable && isImmediateRootActiveElement(this.#host) && event.composedPath()[0] === this.#host;\n  }\n\n  #acceptsKeyboardPan(event: KeyboardEvent): boolean {\n    return (\n      this.#host.pannable &&\n      isImmediateRootActiveElement(this.#host) &&\n      event.composedPath()[0] === this.#host &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    );\n  }\n\n  #syncFocusability(behaviorEnabled: boolean): void {\n    if (!behaviorEnabled) {\n      if (this.#managesTabIndex && this.#host.getAttribute('tabindex') === '0') this.#host.removeAttribute('tabindex');\n      this.#managesTabIndex = false;\n    } else if (!this.#host.hasAttribute('tabindex')) {\n      this.#host.tabIndex = 0;\n      this.#managesTabIndex = true;\n    }\n  }\n}\n\nfunction commandPanDirection(command: string): PanDirection | undefined {\n  if (command === '--pan-left') return { horizontal: -1, vertical: 0 };\n  if (command === '--pan-right') return { horizontal: 1, vertical: 0 };\n  if (command === '--pan-up') return { horizontal: 0, vertical: -1 };\n  if (command === '--pan-down') return { horizontal: 0, vertical: 1 };\n  return undefined;\n}\n\nfunction commandZoomAction(command: string): ViewportZoomAction | undefined {\n  if (command === '--zoom-in') return 'in';\n  if (command === '--zoom-out') return 'out';\n  if (command === '--zoom-reset') return 'reset';\n  if (command === '--zoom-to-fit') return 'fit';\n  return undefined;\n}\n\nfunction keyboardPanDirection(key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp'): PanDirection {\n  if (key === 'ArrowLeft') return { horizontal: -1, vertical: 0 };\n  if (key === 'ArrowRight') return { horizontal: 1, vertical: 0 };\n  if (key === 'ArrowUp') return { horizontal: 0, vertical: -1 };\n  return { horizontal: 0, vertical: 1 };\n}\n"],"mappings":"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"}

package/dist/viewport/viewport-navigation.types.d.ts

@@ -1,9 +1 @@
-import type { ViewportPanDetail, ViewportPanEndDetail, ViewportPointerPanDetail, ViewportZoomDetail } from './viewport.types.js';
 export type ViewportZoomAction = 'fit' | 'in' | 'out' | 'reset';
-/** Dispatches public viewport navigation events on behalf of navigation controllers. */
-export interface ViewportNavigationEventDelegate {
-    readonly dispatchPanStart: (detail: ViewportPointerPanDetail) => boolean;
-    readonly dispatchPan: (detail: ViewportPanDetail) => boolean;
-    readonly dispatchPanEnd: (detail: ViewportPanEndDetail) => void;
-    readonly dispatchZoom: (detail: ViewportZoomDetail) => boolean;
-}

package/dist/viewport/viewport.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, type PropertyValues } from 'lit';
-import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPoint, ViewportRect, ViewportRevealOptions, ViewportTransform } from './viewport.types.js';
+import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPanProposal, ViewportPanSession, ViewportPoint, ViewportRect, ViewportRevealOptions, ViewportTransform, ViewportZoomProposal, ViewportZoomRequestOptions } from './viewport.types.js';
 /**
  * @element nve-viewport
  * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
@@ -8,11 +8,13 @@ import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPoint, View
  * @entrypoint \@nvidia-elements/core/viewport
  * @slot - Content positioned in the viewport's infinite content space.
  * @slot background - Custom content rendered behind viewport content and excluded from content fitting
- * @event panstart - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.
- * @event pan - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.
- * @event panend - Dispatched when a pointer pan ends, including its terminal reason.
- * @event zoom - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.
+ * @slot overlay - Interactive content fixed above the transformed plane and excluded from content fitting
+ * @event panstart - Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session.
+ * @event pan - Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation.
+ * @event panend - Dispatched once when a sustained pan ends, including its terminal reason.
+ * @event zoom - Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation.
  * @event viewportchange - Dispatched once after a render that commits one or more viewport transform changes.
+ * @event capabilitieschange - Dispatched after effective user-input pan or zoom admission changes.
  * @cssprop --background - Background color of the fixed viewport area.
  * @cssprop --min-height
  * @cssprop --pan-cursor - Cursor shown over a background eligible for primary-pointer panning.
@@ -58,6 +60,10 @@ export declare class Viewport extends LitElement {
     set behaviorPan(value: ViewportPanBehavior | null | undefined);
     /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
     behaviorZoom: boolean;
+    /** Whether the viewport may admit new user-input panning. */
+    get pannable(): boolean;
+    /** Whether the viewport may admit new user-input zooming. */
+    get zoomable(): boolean;
     /** Fits measurable direct default-slot content once after initial layout. */
     autoFit: boolean;
     /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
@@ -69,7 +75,7 @@ export declare class Viewport extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     /** Converts a content-space point to viewport CSS pixels. */
     toViewportCoords(contentX: number, contentY: number): ViewportPoint;
     /** Converts a viewport CSS-pixel point to content space. */
@@ -78,6 +84,25 @@ export declare class Viewport extends LitElement {
     getTransform(): ViewportTransform;
     /** Returns the visible content-space rectangle. */
     getVisibleRect(): ViewportRect;
+    /**
+     * Requests one discrete user-originated pan. When pannable, the viewport dispatches
+     * a cancelable `pan` and applies the default transform if no listener cancels the event.
+     * Returns true only when that default changes the transform.
+     */
+    requestPan(proposal: ViewportPanProposal): boolean;
+    /**
+     * Requests one discrete user-originated zoom. When zoomable, the viewport dispatches
+     * a cancelable `zoom` and applies the default transform if no listener cancels the event.
+     * Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail.
+     * Returns true when the default changes or schedules a change to the transform.
+     */
+    requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean;
+    /**
+     * Starts a sustained semantic pan after the caller crosses its activation threshold.
+     * Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates
+     * and one terminal `panend`. Returns undefined when pannable is false.
+     */
+    startPan(proposal: ViewportPanProposal): ViewportPanSession | undefined;
     /** Animates the viewport to the requested partial transform. */
     animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void;
     /** Centers or fits a content-space region within the viewport. */