@nvidia-elements/core 2.8.1 → 2.9.0

package/dist/viewport/viewport.examples.json

@@ -0,0 +1,60 @@
+{
+  "element": "nve-viewport",
+  "entrypoint": "@nvidia-elements/core/viewport/viewport.examples.json",
+  "items": [
+    {
+      "id": "viewport",
+      "name": "Default",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n  </svg>\n</nve-viewport>\n",
+      "summary": "Enable direct pan and zoom with auto-fit and adaptive gridlines to navigate positioned content.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "viewport-background",
+      "name": "Background",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <svg slot=\"background\" aria-hidden=\"true\" width=\"20480\" height=\"20480\" viewBox=\"-10240 -10240 20480 20480\" style=\"position: absolute; left: -10240px; top: -10240px\">\n    <defs>\n      <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n        <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n  </svg>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n  </svg>\n</nve-viewport>\n",
+      "summary": "Place custom content in the background slot to provide a spatial reference without affecting content fitting.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "viewport-interactive-content",
+      "name": "InteractiveContent",
+      "template": "<nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n  <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <nve-input>\n        <label>Label</label>\n        <input value=\"Editable value\" />\n      </nve-input>\n    </nve-card-content>\n  </nve-card>\n</nve-viewport>\n",
+      "summary": "Place native and Elements controls inside a viewport without losing their standard interactions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "viewport-pan-with-space",
+      "name": "PanWithSpace",
+      "template": "<style>\n  #viewport-space-pan-card {\n    cursor: var(--drag-cursor, auto);\n  }\n  #viewport-space-pan-card:hover {\n    --drag-cursor: grab;\n  }\n  #viewport-space-pan-card[data-dragging] {\n    --background: var(--nve-sys-layer-overlay-background);\n    --box-shadow: var(--nve-ref-shadow-300);\n    --drag-cursor: grabbing;\n  }\n</style>\n<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-alert-group status=\"accent\">\n    <nve-alert>\n      <p nve-text=\"body sm medium\">Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.</p>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-viewport id=\"viewport-space-pan-demo\" behavior-pan=\"space\" behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n    <nve-card id=\"viewport-space-pan-card\" data-draggable-card data-card-drag-handle style=\"position: absolute; left: 290px; top: 120px; width: 300px\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-space-pan-demo\");\n  const handles = viewport.querySelectorAll(\"[data-card-drag-handle]\");\n  handles.forEach((handle) => {\n    const card = handle.closest(\"[data-draggable-card]\");\n    let pointerId;\n    let startClientX;\n    let startClientY;\n    let startLeft;\n    let startTop;\n    const finishDrag = (event) => {\n      if (event.pointerId !== pointerId) return;\n      pointerId = undefined;\n      card.removeAttribute(\"data-dragging\");\n    };\n    handle.addEventListener(\"pointerdown\", (event) => {\n      if ((event.pointerType !== \"mouse\" && event.pointerType !== \"pen\") || event.button !== 0 || event.defaultPrevented) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      pointerId = event.pointerId;\n      startClientX = event.clientX;\n      startClientY = event.clientY;\n      startLeft = Number.parseFloat(card.style.left);\n      startTop = Number.parseFloat(card.style.top);\n      card.setAttribute(\"data-dragging\", \"\");\n      handle.setPointerCapture(pointerId);\n    });\n    handle.addEventListener(\"pointermove\", (event) => {\n      if (event.pointerId !== pointerId) return;\n      card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + \"px\";\n      card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + \"px\";\n      event.preventDefault();\n    });\n    handle.addEventListener(\"pointerup\", finishDrag);\n    handle.addEventListener(\"pointercancel\", finishDrag);\n    handle.addEventListener(\"lostpointercapture\", finishDrag);\n  });\n</script>\n",
+      "summary": "Configure panning to require Space when application content needs to handle its own drag interactions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "viewport-commands",
+      "name": "Commands",
+      "template": "<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-toolbar aria-label=\"Viewport navigation controls\">\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n  </nve-toolbar>\n  <nve-viewport id=\"viewport-command-demo\" autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines></nve-viewport-gridlines>\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    </svg>\n  </nve-viewport>\n</div>\n",
+      "summary": "Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "viewport-reveal",
+      "name": "Reveal",
+      "template": "<div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n  <div nve-layout=\"row align:center\">\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n      <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n      <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n    </nve-button-group>\n  </div>\n  <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n    <svg aria-hidden=\"true\" width=\"500\" height=\"320\" viewBox=\"0 0 500 320\" style=\"position: absolute; left: 380px; top: 144px\">\n      <path d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"4\"></path>\n    </svg>\n    <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-reveal-demo\");\n  const buttons = Array.from(document.querySelectorAll(\"[data-viewport-region]\"));\n  const framing = 80;\n  buttons.forEach((button) => {\n    button.addEventListener(\"click\", () => {\n      const region = viewport.querySelector(\"#\" + button.dataset.viewportRegion);\n      viewport.reveal(\n        {\n          x: region.offsetLeft - framing,\n          y: region.offsetTop - framing,\n          width: region.offsetWidth + framing * 2,\n          height: region.offsetHeight + framing * 2,\n        },\n        { animated: true, duration: 500 },\n      );\n    });\n  });\n</script>\n",
+      "summary": "Viewport navigation helpers let application logic animate specific content regions into view.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

package/dist/viewport/viewport.js

@@ -0,0 +1,6 @@
+//#region src/viewport/viewport.css?inline
+var e = ":host{--background: transparent;--min-height: 300px;--pan-cursor: grab;--panning-cursor: grabbing;background:var(--background);display:block;position:relative;min-height:var(--min-height);overflow:hidden}[internal-host]{position:absolute;inset:0;outline-offset:-2px}:host(:state(pan-eligible)){cursor:var(--pan-cursor)}:host(:state(panning)){cursor:var(--panning-cursor)}.plane{position:absolute;inset:0;pointer-events:none;text-rendering:geometricprecision;transform-origin:0 0}::slotted([slot=\"background\"]){pointer-events:none}::slotted(:not([slot=\"background\"])){pointer-events:auto}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=viewport.js.map

package/dist/viewport/viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.js","names":[],"sources":["../../src/viewport/viewport.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: transparent;\n  --min-height: 300px;\n  --pan-cursor: grab;\n  --panning-cursor: grabbing;\n\n  background: var(--background);\n  display: block;\n  position: relative;\n  min-height: var(--min-height);\n  overflow: hidden;\n}\n\n[internal-host] {\n  position: absolute;\n  inset: 0;\n  outline-offset: -2px;\n}\n\n:host(:state(pan-eligible)) {\n  cursor: var(--pan-cursor);\n}\n\n:host(:state(panning)) {\n  cursor: var(--panning-cursor);\n}\n\n.plane {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  /* Avoid Chromium SVG text-positioning artifacts when transformed content inherits the theme's optimizeSpeed. */\n  text-rendering: geometricprecision;\n  transform-origin: 0 0;\n}\n\n::slotted([slot='background']) {\n  pointer-events: none;\n}\n\n::slotted(:not([slot='background'])) {\n  pointer-events: auto;\n}\n"],"mappings":""}

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

@@ -0,0 +1,66 @@
+import type { PointerEndReason, PointerMovementGesture } from '@nvidia-elements/core/internal';
+export interface ViewportTransform {
+    readonly x: number;
+    readonly y: number;
+    readonly scale: number;
+}
+export interface ViewportPoint {
+    readonly x: number;
+    readonly y: number;
+}
+export interface ViewportRect extends ViewportPoint {
+    readonly width: number;
+    readonly height: number;
+}
+export type ViewportPanBehavior = boolean | 'space';
+export interface ViewportPointerPanDetail extends PointerMovementGesture {
+    readonly source: 'pointer';
+    readonly start: ViewportTransform;
+    readonly next: ViewportTransform;
+}
+export interface ViewportWheelPanDetail {
+    readonly source: 'wheel';
+    readonly event: WheelEvent;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly start: ViewportTransform;
+    readonly next: ViewportTransform;
+}
+export interface ViewportDiscretePanDetail {
+    readonly source: 'keyboard' | 'command';
+    readonly event: KeyboardEvent | CommandEvent;
+    readonly start: ViewportTransform;
+    readonly next: ViewportTransform;
+}
+export type ViewportPanDetail = ViewportPointerPanDetail | ViewportWheelPanDetail | ViewportDiscretePanDetail;
+export type ViewportPanEndReason = PointerEndReason | 'pinch';
+export interface ViewportPanEndDetail {
+    readonly source: 'pointer';
+    readonly event: PointerEvent;
+    readonly interrupted: boolean;
+    readonly reason: ViewportPanEndReason;
+    readonly start: ViewportTransform;
+    readonly transform: ViewportTransform;
+}
+export interface ViewportZoomDetail {
+    readonly source: 'wheel' | 'pinch' | 'keyboard' | 'command';
+    readonly event: WheelEvent | PointerEvent | KeyboardEvent | CommandEvent;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly anchor: ViewportPoint;
+    readonly factor: number;
+    readonly start: ViewportTransform;
+    readonly next: ViewportTransform;
+}
+export interface ViewportAnimationOptions {
+    readonly duration?: number;
+}
+export interface ViewportRevealOptions {
+    /** Uniform CSS-pixel inset reserved around the revealed bounds. */
+    readonly inset?: number;
+    readonly scale?: number;
+    readonly animated?: boolean;
+    readonly duration?: number;
+}

package/dist/viewport/viewport2.js

@@ -0,0 +1,375 @@
+import { audit as e } from "../internal/controllers/audit.controller.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import { finiteOr as r, nonnegativeFiniteOr as i, positiveFiniteOr as a } from "../internal/utils/numeric.js";
+import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import s from "./viewport.js";
+import { ViewportAnimationController as c } from "./viewport-animation.controller.js";
+import { ViewportAutoFitController as l } from "./viewport-autofit.controller.js";
+import { contentBoundsFromClientRects as u, revealTarget as d } from "./viewport-fitting.utils.js";
+import { centeredScaleTransform as f, contentPointFromViewport as p } from "./viewport-projection.utils.js";
+import { ViewportGestureNavigationController as m } from "./viewport-gesture-navigation.controller.js";
+import { ViewportNavigationController as h } from "./viewport-navigation.controller.js";
+import { LitElement as g, html as _ } from "lit";
+import { property as v } from "lit/decorators/property.js";
+import { query as y } from "lit/decorators/query.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+//#region src/viewport/viewport.ts
+var x = .05, S = 20, C = 5, w = [
+	.05,
+	.1,
+	.25,
+	.5,
+	1,
+	2,
+	4,
+	8,
+	16,
+	20
+], T = {
+	fromAttribute(e) {
+		return e === null ? !1 : e !== "space" || "space";
+	},
+	toAttribute(e) {
+		return e ? e === "space" ? "space" : "" : null;
+	}
+}, E = class extends g {
+	static {
+		this.styles = n([s]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-viewport",
+			version: "2.9.0"
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	constructor() {
+		super(), this.#r = new l(this, (e) => this.#h(e)), this.#i = {
+			dispatchPanStart: (e) => this.#j("panstart", e, !0),
+			dispatchPan: (e) => this.#j("pan", e, !0),
+			dispatchPanEnd: (e) => {
+				this.#j("panend", e, !1);
+			},
+			dispatchZoom: (e) => this.#j("zoom", e, !0)
+		}, this.#a = !1, this.#o = 0, this.#s = 0, this.#c = 1, this.#l = x, this.#u = S, this.#d = C, this.#f = 0, this.#p = !1, this.behaviorZoom = !1, this.autoFit = !1, this.#n = new c(this, {
+			commitTransform: (e) => {
+				this.#A(e);
+			},
+			clampScale: (e) => this.#N(e),
+			getTransform: () => this.getTransform(),
+			getViewportSize: () => ({
+				height: this.clientHeight,
+				width: this.clientWidth
+			})
+		}), this.#e = new h(this, {
+			animateTo: (e, t) => this.animateTo(e, t),
+			commitTransform: (e) => this.#D(e),
+			cancelAnimation: () => this.#n.cancel(),
+			consumeAutoFit: () => this.#r.consume(),
+			events: this.#i,
+			getTransform: () => this.getTransform(),
+			getZoomTarget: (e) => this.#v(e, this.#n.destinationScale ?? this.#c),
+			rebasePointerSessions: () => this.#t.rebasePointerSessions(),
+			viewportToClient: (e, t) => this.#E(e, t)
+		}), this.#t = new m(this, {
+			commitTransform: (e) => this.#D(e),
+			cancelAnimation: () => this.#n.cancel(),
+			clampScale: (e) => this.#N(e),
+			clientToViewport: (e, t) => this.#T(e, t),
+			consumeAutoFit: () => this.#r.consume(),
+			events: this.#i,
+			getTransform: () => this.getTransform()
+		});
+	}
+	get x() {
+		return this.#o;
+	}
+	set x(e) {
+		this.#O({
+			...this.getTransform(),
+			x: r(e, 0)
+		});
+	}
+	get y() {
+		return this.#s;
+	}
+	set y(e) {
+		this.#O({
+			...this.getTransform(),
+			y: r(e, 0)
+		});
+	}
+	get scale() {
+		return this.#c;
+	}
+	set scale(e) {
+		this.#O({
+			...this.getTransform(),
+			scale: e
+		});
+	}
+	get minScale() {
+		return this.#l;
+	}
+	set minScale(e) {
+		let t = Math.min(a(e, x), this.#u);
+		if (t === this.#l) return;
+		let n = this.#l;
+		this.#n.cancel(), this.#l = t, this.requestUpdate("minScale", n), this.#k({
+			...this.getTransform(),
+			scale: this.#c
+		});
+	}
+	get maxScale() {
+		return this.#u;
+	}
+	set maxScale(e) {
+		let t = Math.max(a(e, S), this.#l);
+		if (t === this.#u) return;
+		let n = this.#u;
+		this.#n.cancel(), this.#u = t, this.requestUpdate("maxScale", n), this.#k({
+			...this.getTransform(),
+			scale: this.#c
+		});
+	}
+	get behaviorPan() {
+		return this.#p;
+	}
+	set behaviorPan(e) {
+		let t = e === "space" ? "space" : !!e;
+		if (t === this.#p) return;
+		let n = this.#p;
+		this.#p = t, this.requestUpdate("behaviorPan", n);
+	}
+	get fitInset() {
+		return this.#f;
+	}
+	set fitInset(e) {
+		let t = i(e, 0);
+		if (t === this.#f) return;
+		let n = this.#f;
+		this.#f = t, this.requestUpdate("fitInset", n);
+	}
+	get dragThreshold() {
+		return this.#d;
+	}
+	set dragThreshold(e) {
+		let t = i(e, C);
+		if (t === this.#d) return;
+		let n = this.#d;
+		this.#d = t, this.requestUpdate("dragThreshold", n);
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this), this.hasUpdated && !this.isUpdatePending && (this.#a = !0);
+	}
+	disconnectedCallback() {
+		this.#a = !1, super.disconnectedCallback();
+	}
+	updated(e) {
+		super.updated(e), this.isConnected && this.#a && (e.has("x") || e.has("y") || e.has("scale")) && this.dispatchEvent(new CustomEvent("viewportchange", {
+			bubbles: !0,
+			composed: !0,
+			detail: this.getTransform()
+		})), this.#a = this.isConnected;
+	}
+	render() {
+		return _`<div internal-host focusable><div class="plane" style="${b({ transform: `scale(${this.#c}) translate(${-this.#o}px, ${-this.#s}px)` })}"><slot name="background"></slot><slot @slotchange="${this.#r.contentChanged}"></slot></div></div>`;
+	}
+	toViewportCoords(e, t) {
+		return {
+			x: (e - this.#o) * this.#c,
+			y: (t - this.#s) * this.#c
+		};
+	}
+	toContentCoords(e, t) {
+		return p(e, t, this.getTransform());
+	}
+	getTransform() {
+		return {
+			scale: this.#c,
+			x: this.#o,
+			y: this.#s
+		};
+	}
+	getVisibleRect() {
+		return {
+			x: this.#o,
+			y: this.#s,
+			width: this.clientWidth / this.#c,
+			height: this.clientHeight / this.#c
+		};
+	}
+	animateTo(e, t = {}) {
+		this.#n.animateTo(e, t);
+	}
+	reveal(e, t = {}) {
+		this.#g(this.#_(e, this.#b(t)), t);
+	}
+	fitContents(e = {}) {
+		let t = this.#m(this.#y(Array.from(this.children).filter((e) => !e.slot)), this.#x(e));
+		t && this.#g(t, e);
+	}
+	#m(e, t) {
+		if (!this.internalHost) return;
+		let n = this.getTransform(), r = this.#w(), i = u(e, r, n);
+		return i ? this.#_(i, t, n) : void 0;
+	}
+	#h(e) {
+		let t = this.#m(e, this.#x({}));
+		t && (this.#n.cancel(), this.#D(t) && this.#t.rebasePointerSessions());
+	}
+	#g(e, t) {
+		t.animated ? t.duration === void 0 ? this.animateTo(e) : this.animateTo(e, { duration: t.duration }) : this.#O(e);
+	}
+	#_(e, t, n = this.getTransform()) {
+		return d(e, {
+			options: t,
+			scaleRange: this.#S(),
+			transform: n,
+			viewport: {
+				height: this.clientHeight,
+				width: this.clientWidth
+			}
+		});
+	}
+	#v(e, t) {
+		return e === "in" ? this.#C(D(1, t, this.#S())) : e === "out" ? this.#C(D(-1, t, this.#S())) : e === "reset" ? this.#C(this.#N(1)) : this.#m(this.#y(Array.from(this.children).filter((e) => !e.slot)), this.#x({}));
+	}
+	#y(e) {
+		return (function* () {
+			for (let t of e) yield t.getBoundingClientRect();
+		})();
+	}
+	#b(e) {
+		return {
+			inset: e.inset,
+			scale: e.scale
+		};
+	}
+	#x(e) {
+		return {
+			inset: e.inset ?? this.#f,
+			scale: e.scale
+		};
+	}
+	#S() {
+		return {
+			min: this.#l,
+			max: this.#u
+		};
+	}
+	#C(e) {
+		return f(e, this.getTransform(), {
+			height: this.clientHeight,
+			width: this.clientWidth
+		});
+	}
+	#w() {
+		return this.internalHost?.getBoundingClientRect() ?? DOMRect.fromRect();
+	}
+	#T(e, t, n = this.#w()) {
+		return {
+			x: e - n.left,
+			y: t - n.top
+		};
+	}
+	#E(e, t) {
+		let n = this.#w();
+		return {
+			x: n.left + e,
+			y: n.top + t
+		};
+	}
+	#D(e) {
+		let t = r(e.x, this.#o), n = r(e.y, this.#s), i = this.#N(e.scale);
+		return t === this.#o && n === this.#s && i === this.#c ? !1 : (this.#M({
+			scale: i,
+			x: t,
+			y: n
+		}), !0);
+	}
+	#O(e) {
+		this.#n.cancel(), this.#k(e);
+	}
+	#k(e) {
+		this.#D(e) && (this.isConnected && this.#r.consume(), this.#t.rebasePointerSessions());
+	}
+	#A(e) {
+		this.#D(e) && (this.isConnected && this.#r.consume(), this.#t.rebasePointerSessions());
+	}
+	#j(e, t, n) {
+		return this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			cancelable: n,
+			composed: !0,
+			detail: t
+		}));
+	}
+	#M(e) {
+		let t = this.#o, n = this.#s, r = this.#c;
+		this.#o = e.x, this.#s = e.y, this.#c = e.scale, e.x !== t && this.requestUpdate("x", t), e.y !== n && this.requestUpdate("y", n), e.scale !== r && this.requestUpdate("scale", r);
+	}
+	#N(e) {
+		let t = Number.isFinite(e) && e > 0 ? e : this.#l;
+		return Math.min(this.#u, Math.max(this.#l, t));
+	}
+};
+o([y("[internal-host]")], E.prototype, "internalHost", void 0), o([v({ type: Number })], E.prototype, "x", null), o([v({ type: Number })], E.prototype, "y", null), o([v({ type: Number })], E.prototype, "scale", null), o([v({
+	attribute: "min-scale",
+	type: Number,
+	reflect: !0
+})], E.prototype, "minScale", null), o([v({
+	attribute: "max-scale",
+	type: Number,
+	reflect: !0
+})], E.prototype, "maxScale", null), o([v({
+	attribute: "behavior-pan",
+	converter: T,
+	reflect: !0
+})], E.prototype, "behaviorPan", null), o([v({
+	type: Boolean,
+	attribute: "behavior-zoom",
+	reflect: !0
+})], E.prototype, "behaviorZoom", void 0), o([v({
+	type: Boolean,
+	reflect: !0
+})], E.prototype, "autoFit", void 0), o([v({
+	attribute: "fit-inset",
+	type: Number,
+	reflect: !0
+})], E.prototype, "fitInset", null), o([v({
+	attribute: "drag-threshold",
+	type: Number,
+	reflect: !0
+})], E.prototype, "dragThreshold", null), E = o([e()], E);
+function D(e, t, n) {
+	let r = [
+		...w,
+		n.min,
+		n.max
+	].map((e) => Math.min(n.max, Math.max(n.min, e))).sort((e, t) => e - t).filter((e, t, n) => t === 0 || e !== n[t - 1]);
+	if (e > 0) return r.find((e) => e > t) ?? n.max;
+	for (let e = r.length - 1; e >= 0; --e) {
+		let n = r[e];
+		if (n !== void 0 && n < t) return n;
+	}
+	return n.min;
+}
+//#endregion
+export { E as Viewport };
+
+//# sourceMappingURL=viewport2.js.map

package/dist/viewport/viewport2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport2.js","names":[],"sources":["../../src/viewport/viewport.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  audit,\n  attachInternals,\n  finiteOr,\n  nonnegativeFiniteOr,\n  positiveFiniteOr,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './viewport.css?inline';\nimport { ViewportAnimationController } from './viewport-animation.controller.js';\nimport { ViewportAutoFitController } from './viewport-autofit.controller.js';\nimport {\n  contentBoundsFromClientRects,\n  revealTarget,\n  type ViewportClientRect,\n  type ViewportFitOptions\n} from './viewport-fitting.utils.js';\nimport { ViewportGestureNavigationController } from './viewport-gesture-navigation.controller.js';\nimport { ViewportNavigationController } from './viewport-navigation.controller.js';\nimport type { ViewportNavigationEventDelegate, ViewportZoomAction } from './viewport-navigation.types.js';\nimport type {\n  ViewportAnimationOptions,\n  ViewportPanBehavior,\n  ViewportPoint,\n  ViewportRect,\n  ViewportRevealOptions,\n  ViewportTransform\n} from './viewport.types.js';\nimport { centeredScaleTransform, contentPointFromViewport } from './viewport-projection.utils.js';\n\nconst DEFAULT_MIN_SCALE = 0.05;\nconst DEFAULT_MAX_SCALE = 20;\nconst DEFAULT_DRAG_THRESHOLD = 5;\nconst ZOOM_SCALE_STEPS = [0.05, 0.1, 0.25, 0.5, 1, 2, 4, 8, 16, 20] as const;\nconst BEHAVIOR_PAN_CONVERTER = {\n  fromAttribute(value: string | null): ViewportPanBehavior {\n    if (value === null) return false;\n    return value === 'space' ? 'space' : true;\n  },\n  toAttribute(value: ViewportPanBehavior): string | null {\n    if (!value) return null;\n    return value === 'space' ? 'space' : '';\n  }\n};\n\n/**\n * @element nve-viewport\n * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @slot - Content positioned in the viewport's infinite content space.\n * @slot background - Custom content rendered behind viewport content and excluded from content fitting\n * @event panstart - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.\n * @event pan - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.\n * @event panend - Dispatched when a pointer pan ends, including its terminal reason.\n * @event zoom - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.\n * @event viewportchange - Dispatched once after a render that commits one or more viewport transform changes.\n * @cssprop --background - Background color of the fixed viewport area.\n * @cssprop --min-height\n * @cssprop --pan-cursor - Cursor shown over a background eligible for primary-pointer panning.\n * @cssprop --panning-cursor - Cursor shown while a pointer pan is active.\n * @command --pan-left - With behavior-pan enabled, pans left by one discrete step.\n * @command --pan-right - With behavior-pan enabled, pans right by one discrete step.\n * @command --pan-up - With behavior-pan enabled, pans up by one discrete step.\n * @command --pan-down - With behavior-pan enabled, pans down by one discrete step.\n * @command --zoom-in - With behavior-zoom enabled, animates to the next permitted scale step.\n * @command --zoom-out - With behavior-zoom enabled, animates to the previous permitted scale step.\n * @command --zoom-reset - With behavior-zoom enabled, animates to 100% scale.\n * @command --zoom-to-fit - With behavior-zoom enabled, animates to fit direct default-slot element boxes.\n * @stable false\n */\n@audit()\nexport class Viewport extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @query('[internal-host]') private internalHost: HTMLElement | null;\n  readonly #navigationController: ViewportNavigationController;\n  readonly #gestureNavigationController: ViewportGestureNavigationController;\n  readonly #animationController: ViewportAnimationController;\n  readonly #autoFitController = new ViewportAutoFitController(this, clientRects =>\n    this.#applyInitialAutoFit(clientRects)\n  );\n  readonly #navigationEvents: ViewportNavigationEventDelegate = {\n    dispatchPanStart: detail => this.#dispatchNavigationEvent('panstart', detail, true),\n    dispatchPan: detail => this.#dispatchNavigationEvent('pan', detail, true),\n    dispatchPanEnd: detail => {\n      this.#dispatchNavigationEvent('panend', detail, false);\n    },\n    dispatchZoom: detail => this.#dispatchNavigationEvent('zoom', detail, true)\n  };\n  #publishTransformChanges = false;\n  #x = 0;\n  #y = 0;\n  #scale = 1;\n  #minScale = DEFAULT_MIN_SCALE;\n  #maxScale = DEFAULT_MAX_SCALE;\n  #dragThreshold = DEFAULT_DRAG_THRESHOLD;\n  #fitInset = 0;\n  #behaviorPan: ViewportPanBehavior = false;\n  constructor() {\n    super();\n    this.#animationController = new ViewportAnimationController(this, {\n      commitTransform: next => {\n        this.#applyAnimationTransform(next);\n      },\n      clampScale: value => this.#clampScale(value),\n      getTransform: () => this.getTransform(),\n      getViewportSize: () => ({ height: this.clientHeight, width: this.clientWidth })\n    });\n    this.#navigationController = new ViewportNavigationController(this, {\n      animateTo: (target, options) => this.animateTo(target, options),\n      commitTransform: next => this.#commitTransform(next),\n      cancelAnimation: () => this.#animationController.cancel(),\n      consumeAutoFit: () => this.#autoFitController.consume(),\n      events: this.#navigationEvents,\n      getTransform: () => this.getTransform(),\n      getZoomTarget: action => this.#getZoomTarget(action, this.#animationController.destinationScale ?? this.#scale),\n      rebasePointerSessions: () => this.#gestureNavigationController.rebasePointerSessions(),\n      viewportToClient: (viewportX, viewportY) => this.#viewportToClient(viewportX, viewportY)\n    });\n    this.#gestureNavigationController = new ViewportGestureNavigationController(this, {\n      commitTransform: next => this.#commitTransform(next),\n      cancelAnimation: () => this.#animationController.cancel(),\n      clampScale: value => this.#clampScale(value),\n      clientToViewport: (clientX, clientY) => this.#clientToViewport(clientX, clientY),\n      consumeAutoFit: () => this.#autoFitController.consume(),\n      events: this.#navigationEvents,\n      getTransform: () => this.getTransform()\n    });\n  }\n\n  /** Horizontal content-space coordinate at the viewport origin. */\n  @property({ type: Number })\n  get x(): number {\n    return this.#x;\n  }\n\n  set x(value: number) {\n    this.#applyExternalTransform({ ...this.getTransform(), x: finiteOr(value, 0) });\n  }\n\n  /** Vertical content-space coordinate at the viewport origin. */\n  @property({ type: Number })\n  get y(): number {\n    return this.#y;\n  }\n\n  set y(value: number) {\n    this.#applyExternalTransform({ ...this.getTransform(), y: finiteOr(value, 0) });\n  }\n\n  /** Content-to-viewport CSS-pixel scale. */\n  @property({ type: Number })\n  get scale(): number {\n    return this.#scale;\n  }\n\n  set scale(value: number) {\n    this.#applyExternalTransform({ ...this.getTransform(), scale: value });\n  }\n\n  /** Inclusive lower scale limit. */\n  @property({ attribute: 'min-scale', type: Number, reflect: true })\n  get minScale(): number {\n    return this.#minScale;\n  }\n\n  set minScale(value: number) {\n    const next = Math.min(positiveFiniteOr(value, DEFAULT_MIN_SCALE), this.#maxScale);\n    if (next === this.#minScale) return;\n    const previous = this.#minScale;\n    this.#animationController.cancel();\n    this.#minScale = next;\n    this.requestUpdate('minScale', previous);\n    this.#commitExternalTransform({ ...this.getTransform(), scale: this.#scale });\n  }\n\n  /** Inclusive upper scale limit. */\n  @property({ attribute: 'max-scale', type: Number, reflect: true })\n  get maxScale(): number {\n    return this.#maxScale;\n  }\n\n  set maxScale(value: number) {\n    const next = Math.max(positiveFiniteOr(value, DEFAULT_MAX_SCALE), this.#minScale);\n    if (next === this.#maxScale) return;\n    const previous = this.#maxScale;\n    this.#animationController.cancel();\n    this.#maxScale = next;\n    this.requestUpdate('maxScale', previous);\n    this.#commitExternalTransform({ ...this.getTransform(), scale: this.#scale });\n  }\n\n  /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */\n  @property({ attribute: 'behavior-pan', converter: BEHAVIOR_PAN_CONVERTER, reflect: true })\n  get behaviorPan(): ViewportPanBehavior {\n    return this.#behaviorPan;\n  }\n\n  set behaviorPan(value: ViewportPanBehavior | null | undefined) {\n    const next = value === 'space' ? 'space' : Boolean(value);\n    if (next === this.#behaviorPan) return;\n    const previous = this.#behaviorPan;\n    this.#behaviorPan = next;\n    this.requestUpdate('behaviorPan', previous);\n  }\n\n  /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */\n  @property({ type: Boolean, attribute: 'behavior-zoom', reflect: true }) behaviorZoom = false;\n  /** Fits measurable direct default-slot content once after initial layout. */\n  @property({ type: Boolean, reflect: true }) autoFit = false;\n  /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */\n  @property({ attribute: 'fit-inset', type: Number, reflect: true })\n  get fitInset(): number {\n    return this.#fitInset;\n  }\n\n  set fitInset(value: number) {\n    const next = nonnegativeFiniteOr(value, 0);\n    if (next === this.#fitInset) return;\n    const previous = this.#fitInset;\n    this.#fitInset = next;\n    this.requestUpdate('fitInset', previous);\n  }\n\n  /** CSS-pixel pointer movement required before a pointer pan begins. */\n  @property({ attribute: 'drag-threshold', type: Number, reflect: true })\n  get dragThreshold(): number {\n    return this.#dragThreshold;\n  }\n\n  set dragThreshold(value: number) {\n    const next = nonnegativeFiniteOr(value, DEFAULT_DRAG_THRESHOLD);\n    if (next === this.#dragThreshold) return;\n    const previous = this.#dragThreshold;\n    this.#dragThreshold = next;\n    this.requestUpdate('dragThreshold', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    if (this.hasUpdated && !this.isUpdatePending) this.#publishTransformChanges = true;\n  }\n\n  disconnectedCallback(): void {\n    this.#publishTransformChanges = false;\n    super.disconnectedCallback();\n  }\n\n  protected updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n    if (\n      this.isConnected &&\n      this.#publishTransformChanges &&\n      (changed.has('x') || changed.has('y') || changed.has('scale'))\n    ) {\n      this.dispatchEvent(\n        new CustomEvent<ViewportTransform>('viewportchange', {\n          bubbles: true,\n          composed: true,\n          detail: this.getTransform()\n        })\n      );\n    }\n    this.#publishTransformChanges = this.isConnected;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable>\n        <div\n          class=\"plane\"\n          style=${styleMap({ transform: `scale(${this.#scale}) translate(${-this.#x}px, ${-this.#y}px)` })}\n        >\n          <slot name=\"background\"></slot>\n          <slot @slotchange=${this.#autoFitController.contentChanged}></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** Converts a content-space point to viewport CSS pixels. */\n  toViewportCoords(contentX: number, contentY: number): ViewportPoint {\n    return {\n      x: (contentX - this.#x) * this.#scale,\n      y: (contentY - this.#y) * this.#scale\n    };\n  }\n\n  /** Converts a viewport CSS-pixel point to content space. */\n  toContentCoords(viewportX: number, viewportY: number): ViewportPoint {\n    return contentPointFromViewport(viewportX, viewportY, this.getTransform());\n  }\n\n  /** Returns the current content-space origin and CSS-pixel scale. */\n  getTransform(): ViewportTransform {\n    return { scale: this.#scale, x: this.#x, y: this.#y };\n  }\n\n  /** Returns the visible content-space rectangle. */\n  getVisibleRect(): ViewportRect {\n    return {\n      x: this.#x,\n      y: this.#y,\n      width: this.clientWidth / this.#scale,\n      height: this.clientHeight / this.#scale\n    };\n  }\n\n  /** Animates the viewport to the requested partial transform. */\n  animateTo(target: Partial<ViewportTransform>, options: ViewportAnimationOptions = {}): void {\n    this.#animationController.animateTo(target, options);\n  }\n\n  /** Centers or fits a content-space region within the viewport. */\n  reveal(region: { x: number; y: number; width?: number; height?: number }, options: ViewportRevealOptions = {}): void {\n    this.#applyRevealTarget(this.#getRevealTarget(region, this.#revealFitOptions(options)), options);\n  }\n\n  /** Fits the union of direct default-slot element boxes within the viewport. */\n  fitContents(options: ViewportRevealOptions = {}): void {\n    const target = this.#getFitContentsTargetFromClientRects(\n      this.#clientRectsFromChildren(Array.from(this.children).filter(child => !child.slot)),\n      this.#resolveFitOptions(options)\n    );\n    if (target) this.#applyRevealTarget(target, options);\n  }\n\n  #getFitContentsTargetFromClientRects(\n    clientRects: Iterable<ViewportClientRect>,\n    options: ViewportFitOptions\n  ): ViewportTransform | undefined {\n    if (!this.internalHost) return undefined;\n    const transform = this.getTransform();\n    const viewportFrame = this.#viewportFrame();\n    const region = contentBoundsFromClientRects(clientRects, viewportFrame, transform);\n    return region ? this.#getRevealTarget(region, options, transform) : undefined;\n  }\n\n  #applyInitialAutoFit(clientRects: readonly ViewportClientRect[]): void {\n    const target = this.#getFitContentsTargetFromClientRects(clientRects, this.#resolveFitOptions({}));\n    if (!target) return;\n    this.#animationController.cancel();\n    if (this.#commitTransform(target)) {\n      this.#gestureNavigationController.rebasePointerSessions();\n    }\n  }\n\n  #applyRevealTarget(target: ViewportTransform, options: ViewportRevealOptions): void {\n    if (options.animated) {\n      if (options.duration === undefined) this.animateTo(target);\n      else this.animateTo(target, { duration: options.duration });\n    } else {\n      this.#applyExternalTransform(target);\n    }\n  }\n\n  #getRevealTarget(\n    region: { x: number; y: number; width?: number; height?: number },\n    options: ViewportFitOptions,\n    transform = this.getTransform()\n  ): ViewportTransform {\n    return revealTarget(region, {\n      options,\n      scaleRange: this.#getScaleRange(),\n      transform,\n      viewport: { height: this.clientHeight, width: this.clientWidth }\n    });\n  }\n\n  #getZoomTarget(action: ViewportZoomAction, stepScale: number): ViewportTransform | undefined {\n    if (action === 'in') return this.#getCenteredScaleTransform(nextScaleStep(1, stepScale, this.#getScaleRange()));\n    if (action === 'out') return this.#getCenteredScaleTransform(nextScaleStep(-1, stepScale, this.#getScaleRange()));\n    if (action === 'reset') return this.#getCenteredScaleTransform(this.#clampScale(1));\n    return this.#getFitContentsTargetFromClientRects(\n      this.#clientRectsFromChildren(Array.from(this.children).filter(child => !child.slot)),\n      this.#resolveFitOptions({})\n    );\n  }\n\n  #clientRectsFromChildren(children: Iterable<Element>): Iterable<ViewportClientRect> {\n    return (function* (): Generator<ViewportClientRect> {\n      for (const child of children) yield child.getBoundingClientRect();\n    })();\n  }\n\n  #revealFitOptions(options: ViewportRevealOptions): ViewportFitOptions {\n    return { inset: options.inset, scale: options.scale };\n  }\n\n  #resolveFitOptions(options: ViewportRevealOptions): ViewportFitOptions {\n    return { inset: options.inset ?? this.#fitInset, scale: options.scale };\n  }\n  #getScaleRange(): { min: number; max: number } {\n    return { min: this.#minScale, max: this.#maxScale };\n  }\n  #getCenteredScaleTransform(scale: number): ViewportTransform {\n    return centeredScaleTransform(scale, this.getTransform(), { height: this.clientHeight, width: this.clientWidth });\n  }\n\n  #viewportFrame(): DOMRect {\n    return this.internalHost?.getBoundingClientRect() ?? DOMRect.fromRect();\n  }\n  #clientToViewport(clientX: number, clientY: number, frame = this.#viewportFrame()): ViewportPoint {\n    return { x: clientX - frame.left, y: clientY - frame.top };\n  }\n\n  #viewportToClient(viewportX: number, viewportY: number): ViewportPoint {\n    const frame = this.#viewportFrame();\n    return { x: frame.left + viewportX, y: frame.top + viewportY };\n  }\n\n  #commitTransform(next: ViewportTransform): boolean {\n    const x = finiteOr(next.x, this.#x);\n    const y = finiteOr(next.y, this.#y);\n    const scale = this.#clampScale(next.scale);\n    if (x === this.#x && y === this.#y && scale === this.#scale) return false;\n    this.#updateTransformFields({ scale, x, y });\n    return true;\n  }\n\n  #applyExternalTransform(next: ViewportTransform): void {\n    this.#animationController.cancel();\n    this.#commitExternalTransform(next);\n  }\n\n  #commitExternalTransform(next: ViewportTransform): void {\n    if (!this.#commitTransform(next)) return;\n    if (this.isConnected) this.#autoFitController.consume();\n    this.#gestureNavigationController.rebasePointerSessions();\n  }\n\n  #applyAnimationTransform(next: ViewportTransform): void {\n    const committed = this.#commitTransform(next);\n    if (!committed) return;\n    if (this.isConnected) this.#autoFitController.consume();\n    this.#gestureNavigationController.rebasePointerSessions();\n  }\n\n  #dispatchNavigationEvent<T>(type: string, detail: T, cancelable: boolean): boolean {\n    return this.dispatchEvent(\n      new CustomEvent<T>(type, {\n        bubbles: true,\n        cancelable,\n        composed: true,\n        detail\n      })\n    );\n  }\n\n  #updateTransformFields(next: ViewportTransform): void {\n    const previousX = this.#x;\n    const previousY = this.#y;\n    const previousScale = this.#scale;\n    this.#x = next.x;\n    this.#y = next.y;\n    this.#scale = next.scale;\n    if (next.x !== previousX) this.requestUpdate('x', previousX);\n    if (next.y !== previousY) this.requestUpdate('y', previousY);\n    if (next.scale !== previousScale) this.requestUpdate('scale', previousScale);\n  }\n  #clampScale(value: number): number {\n    const finite = Number.isFinite(value) && value > 0 ? value : this.#minScale;\n    return Math.min(this.#maxScale, Math.max(this.#minScale, finite));\n  }\n}\n\nfunction nextScaleStep(direction: -1 | 1, current: number, scaleRange: { min: number; max: number }): number {\n  const steps = [...ZOOM_SCALE_STEPS, scaleRange.min, scaleRange.max]\n    .map(scale => Math.min(scaleRange.max, Math.max(scaleRange.min, scale)))\n    .sort((first, second) => first - second)\n    .filter((scale, index, all) => index === 0 || scale !== all[index - 1]);\n  if (direction > 0) return steps.find(scale => scale > current) ?? scaleRange.max;\n  for (let index = steps.length - 1; index >= 0; index -= 1) {\n    const scale = steps[index];\n    if (scale !== undefined && scale < current) return scale;\n  }\n  return scaleRange.min;\n}\n"],"mappings":"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"}

package/dist/week/week2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-week",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "release": {
     "extends": "../../release.config.js"
   },
@@ -919,6 +919,18 @@
       "types": "./dist/tree/define.d.ts",
       "default": "./dist/tree/define.js"
     },
+    "./viewport": {
+      "types": "./dist/viewport/index.d.ts",
+      "default": "./dist/viewport/index.js"
+    },
+    "./viewport/index.js": {
+      "types": "./dist/viewport/index.d.ts",
+      "default": "./dist/viewport/index.js"
+    },
+    "./viewport/define.js": {
+      "types": "./dist/viewport/define.d.ts",
+      "default": "./dist/viewport/define.js"
+    },
     "./week": {
       "types": "./dist/week/index.d.ts",
       "default": "./dist/week/index.js"