@nvidia-elements/core 2.8.1 → 2.10.0

package/dist/viewport/viewport-gridlines2.js

@@ -0,0 +1,154 @@
+import { hostAttr as e } from "../internal/decorators/host-attr.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { finiteOr as n, positiveFiniteOr as r } from "../internal/utils/numeric.js";
+import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import { Viewport as a } from "./viewport2.js";
+import o from "./viewport-gridlines.js";
+import { createGridlineCoverage as s, gridlineCoverageNeedsUpdate as c, selectGridlineInterval as l } from "./viewport-gridlines.utils.js";
+import { LitElement as u, html as d, nothing as f } from "lit";
+import { property as p } from "lit/decorators/property.js";
+import { styleMap as m } from "lit/directives/style-map.js";
+//#region src/viewport/viewport-gridlines.ts
+var h = 10, g = 64, _ = class extends u {
+	constructor(...e) {
+		super(...e), this.slot = "background", this.accessibilityHidden = "true", this.#e = h, this.#t = 0, this.#n = 0, this.#r = g, this.#s = () => {
+			let e = this.#i;
+			e && (this.style.setProperty("--_scale", `${e.scale}`), this.#l());
+		}, this.#c = () => {
+			this.#l({ forceCoverage: !0 });
+		};
+	}
+	static {
+		this.styles = t([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-viewport-gridlines",
+			version: "2.10.0"
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	get step() {
+		return this.#e;
+	}
+	set step(e) {
+		let t = r(e, h);
+		if (t === this.#e) return;
+		let n = this.#e;
+		this.#e = t, this.requestUpdate("step", n);
+	}
+	get originX() {
+		return this.#t;
+	}
+	set originX(e) {
+		let t = n(e, 0);
+		if (t === this.#t) return;
+		let r = this.#t;
+		this.#t = t, this.requestUpdate("originX", r);
+	}
+	get originY() {
+		return this.#n;
+	}
+	set originY(e) {
+		let t = n(e, 0);
+		if (t === this.#n) return;
+		let r = this.#n;
+		this.#n = t, this.requestUpdate("originY", r);
+	}
+	get targetSpacing() {
+		return this.#r;
+	}
+	set targetSpacing(e) {
+		let t = r(e, g);
+		if (t === this.#r) return;
+		let n = this.#r;
+		this.#r = t, this.requestUpdate("targetSpacing", n);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		let e = this.parentElement?.closest(a.metadata.tag);
+		!(e instanceof a) || e !== this.parentElement || (this.#i = e, this.style.setProperty("--_scale", `${e.scale}`), this.#i.addEventListener("viewportchange", this.#s), typeof ResizeObserver < "u" && (this.#a = new ResizeObserver(this.#c), this.#a.observe(e)), this.#u({
+			forceCoverage: !0,
+			resetInterval: !0
+		}));
+	}
+	disconnectedCallback() {
+		this.#i && this.#i.removeEventListener("viewportchange", this.#s), this.#a?.disconnect(), this.#a = void 0, this.#i = void 0, this.#o = void 0, super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("step") || e.has("targetSpacing")) && this.#u({
+			forceCoverage: !0,
+			resetInterval: !0
+		});
+	}
+	render() {
+		let e = this.#o;
+		if (!e) return f;
+		let { coverage: t, interval: n } = e;
+		return d`<svg internal-host aria-hidden="true" focusable="false" preserveAspectRatio="none" style="${m(y(t))}" viewBox="${t.x} ${t.y} ${t.width} ${t.height}"><defs><pattern data-gridline-pattern id="gridlines" x="${this.#t}" y="${this.#n}" width="${n}" height="${n}" patternUnits="userSpaceOnUse"><path d="M ${n} 0 H 0 V ${n}"></path></pattern></defs><rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="url(#gridlines)"></rect></svg>`;
+	}
+	#s;
+	#c;
+	#l(e = {}) {
+		this.#u(e) && this.requestUpdate();
+	}
+	#u(e = {}) {
+		let t = this.#i;
+		if (!t) return !1;
+		let n = t.getVisibleRect();
+		if (n.width <= 0 || n.height <= 0) return !1;
+		let r = l({
+			current: e.resetInterval ? void 0 : this.#o?.interval,
+			scale: t.scale,
+			step: this.#e,
+			targetSpacing: this.#r
+		}), i = v({
+			forceCoverage: e.forceCoverage === !0,
+			interval: r,
+			previous: this.#o,
+			visible: n
+		});
+		return i ? (this.#o = i, !0) : !1;
+	}
+};
+i([e()], _.prototype, "slot", void 0), i([e({ attribute: "aria-hidden" })], _.prototype, "accessibilityHidden", void 0), i([p({
+	type: Number,
+	reflect: !0
+})], _.prototype, "step", null), i([p({
+	type: Number,
+	attribute: "origin-x",
+	reflect: !0
+})], _.prototype, "originX", null), i([p({
+	type: Number,
+	attribute: "origin-y",
+	reflect: !0
+})], _.prototype, "originY", null), i([p({
+	type: Number,
+	attribute: "target-spacing",
+	reflect: !0
+})], _.prototype, "targetSpacing", null);
+function v({ forceCoverage: e, interval: t, previous: n, visible: r }) {
+	let i = e || c(n?.coverage, r), a = t !== n?.interval;
+	if (!(!i && !a)) return {
+		coverage: i || !n ? s(r) : n.coverage,
+		interval: t
+	};
+}
+function y(e) {
+	return {
+		height: `${e.height}px`,
+		left: `${e.x}px`,
+		top: `${e.y}px`,
+		width: `${e.width}px`
+	};
+}
+//#endregion
+export { _ as ViewportGridlines };
+
+//# sourceMappingURL=viewport-gridlines2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-gridlines2.js","names":[],"sources":["../../src/viewport/viewport-gridlines.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, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { finiteOr, hostAttr, positiveFiniteOr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './viewport-gridlines.css?inline';\nimport {\n  createGridlineCoverage,\n  gridlineCoverageNeedsUpdate,\n  selectGridlineInterval\n} from './viewport-gridlines.utils.js';\nimport { Viewport } from './viewport.js';\nimport type { ViewportRect } from './viewport.types.js';\n\nconst DEFAULT_STEP = 10;\nconst DEFAULT_TARGET_SPACING = 64;\n\ninterface GridlineProjection {\n  readonly coverage: ViewportRect;\n  readonly interval: number;\n}\n\ninterface ProjectionSyncOptions {\n  readonly forceCoverage?: boolean;\n  readonly resetInterval?: boolean;\n}\n\n/**\n * @element nve-viewport-gridlines\n * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --color - Sets the gridline stroke color.\n * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.\n */\nexport class ViewportGridlines extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-gridlines',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'background';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  #step = DEFAULT_STEP;\n  #originX = 0;\n  #originY = 0;\n  #targetSpacing = DEFAULT_TARGET_SPACING;\n  #viewport?: Viewport;\n  #resizeObserver?: ResizeObserver;\n  #projection?: GridlineProjection;\n\n  /** Smallest gridline interval in content-space units. */\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this.#step;\n  }\n\n  set step(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_STEP);\n    if (next === this.#step) return;\n    const previous = this.#step;\n    this.#step = next;\n    this.requestUpdate('step', previous);\n  }\n\n  /** Content-space x coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-x', reflect: true })\n  get originX(): number {\n    return this.#originX;\n  }\n\n  set originX(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originX) return;\n    const previous = this.#originX;\n    this.#originX = next;\n    this.requestUpdate('originX', previous);\n  }\n\n  /** Content-space y coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-y', reflect: true })\n  get originY(): number {\n    return this.#originY;\n  }\n\n  set originY(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originY) return;\n    const previous = this.#originY;\n    this.#originY = next;\n    this.requestUpdate('originY', previous);\n  }\n\n  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */\n  @property({ type: Number, attribute: 'target-spacing', reflect: true })\n  get targetSpacing(): number {\n    return this.#targetSpacing;\n  }\n\n  set targetSpacing(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_TARGET_SPACING);\n    if (next === this.#targetSpacing) return;\n    const previous = this.#targetSpacing;\n    this.#targetSpacing = next;\n    this.requestUpdate('targetSpacing', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const viewport = this.parentElement?.closest(Viewport.metadata.tag);\n    if (!(viewport instanceof Viewport) || viewport !== this.parentElement) return;\n    this.#viewport = viewport;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#viewport.addEventListener('viewportchange', this.#handleViewportChange);\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#resizeObserver = new ResizeObserver(this.#handleViewportResize);\n      this.#resizeObserver.observe(viewport);\n    }\n    this.#updateProjection({ forceCoverage: true, resetInterval: true });\n  }\n\n  disconnectedCallback(): void {\n    if (this.#viewport) {\n      this.#viewport.removeEventListener('viewportchange', this.#handleViewportChange);\n    }\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    this.#viewport = undefined;\n    this.#projection = undefined;\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (changed.has('step') || changed.has('targetSpacing')) {\n      this.#updateProjection({ forceCoverage: true, resetInterval: true });\n    }\n  }\n\n  render() {\n    const projection = this.#projection;\n    if (!projection) return nothing;\n    const { coverage, interval } = projection;\n    return html`\n      <svg\n        internal-host\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        preserveAspectRatio=\"none\"\n        style=${styleMap(coverageStyles(coverage))}\n        viewBox=\"${coverage.x} ${coverage.y} ${coverage.width} ${coverage.height}\"\n      >\n        <defs>\n          <pattern\n            data-gridline-pattern\n            id=\"gridlines\"\n            x=${this.#originX}\n            y=${this.#originY}\n            width=${interval}\n            height=${interval}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <path d=\"M ${interval} 0 H 0 V ${interval}\"></path>\n          </pattern>\n        </defs>\n        <rect\n          x=${coverage.x}\n          y=${coverage.y}\n          width=${coverage.width}\n          height=${coverage.height}\n          fill=\"url(#gridlines)\"\n        ></rect>\n      </svg>\n    `;\n  }\n\n  #handleViewportChange = (): void => {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#requestProjectionUpdate();\n  };\n\n  #handleViewportResize = (): void => {\n    this.#requestProjectionUpdate({ forceCoverage: true });\n  };\n\n  #requestProjectionUpdate(options: ProjectionSyncOptions = {}): void {\n    if (this.#updateProjection(options)) this.requestUpdate();\n  }\n\n  #updateProjection(options: ProjectionSyncOptions = {}): boolean {\n    const viewport = this.#viewport;\n    if (!viewport) return false;\n    const visible = viewport.getVisibleRect();\n    if (visible.width <= 0 || visible.height <= 0) return false;\n    const interval = selectGridlineInterval({\n      current: options.resetInterval ? undefined : this.#projection?.interval,\n      scale: viewport.scale,\n      step: this.#step,\n      targetSpacing: this.#targetSpacing\n    });\n    const projection = nextProjection({\n      forceCoverage: options.forceCoverage === true,\n      interval,\n      previous: this.#projection,\n      visible\n    });\n    if (!projection) return false;\n    this.#projection = projection;\n    return true;\n  }\n}\n\nfunction nextProjection({\n  forceCoverage,\n  interval,\n  previous,\n  visible\n}: {\n  forceCoverage: boolean;\n  interval: number;\n  previous?: GridlineProjection;\n  visible: ViewportRect;\n}): GridlineProjection | undefined {\n  const coverageChanged = forceCoverage || gridlineCoverageNeedsUpdate(previous?.coverage, visible);\n  const intervalChanged = interval !== previous?.interval;\n  if (!coverageChanged && !intervalChanged) return undefined;\n  const coverage = coverageChanged || !previous ? createGridlineCoverage(visible) : previous.coverage;\n  return { coverage, interval };\n}\n\nfunction coverageStyles(coverage: ViewportRect): Record<string, string> {\n  return {\n    height: `${coverage.height}px`,\n    left: `${coverage.x}px`,\n    top: `${coverage.y}px`,\n    width: `${coverage.width}px`\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+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';
+type ViewportNavigationHost = HTMLElement & ReactiveControllerHost & {
+    readonly behaviorPan: ViewportPanBehavior;
+    readonly behaviorZoom: 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;
+    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);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}
+export {};

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

@@ -0,0 +1,142 @@
+import { isImmediateRootActiveElement as e } from "../internal/utils/focus.js";
+import { KeyNavigationSpatialController as t } from "../internal/controllers/keynav-spatial.controller.js";
+import { contentPointFromViewport as n } from "./viewport-projection.utils.js";
+//#region src/viewport/viewport-navigation.controller.ts
+var r = 20, i = 100, a = class {
+	#e;
+	#t;
+	#n = !1;
+	constructor(e, n) {
+		this.#e = e, this.#t = n, e.addController(this), new t(e, { isEnabled: () => !!e.behaviorPan || e.behaviorZoom });
+	}
+	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);
+	}
+	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);
+	}
+	#r = (e) => {
+		let t = this.#e.behaviorPan ? o(e.command) : void 0;
+		if (t) {
+			this.#a(e, {
+				direction: t,
+				source: "command",
+				viewportPixelStep: r
+			});
+			return;
+		}
+		if (!this.#e.behaviorZoom) return;
+		let n = s(e.command);
+		if (!n) return;
+		let i = this.#t.getZoomTarget(n);
+		i && this.#s(e, i, "command");
+	};
+	#i = (e) => {
+		let t = e.detail;
+		if (t.kind === "direction") {
+			if (!this.#l(t.event)) return;
+			t.event.preventDefault(), this.#a(t.event, {
+				direction: c(t.key),
+				source: "keyboard",
+				viewportPixelStep: t.shiftKey ? i : r
+			});
+		} else if (this.#c(t.event)) {
+			t.event.preventDefault();
+			let e = t.key === "-" ? "out" : "in", n = this.#t.getZoomTarget(e);
+			n && this.#s(t.event, n, "keyboard");
+		}
+	};
+	#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 = {
+			event: e,
+			next: i,
+			source: t.source,
+			start: n
+		};
+		this.#t.events.dispatchPan(a) && this.#t.commitTransform(i) && this.#t.rebasePointerSessions();
+	}
+	#o = (e) => {
+		if (!this.#c(e) || !e.ctrlKey && !e.metaKey) return;
+		let t = e.key === "0" ? "reset" : e.key === "1" ? "fit" : void 0;
+		if (!t) return;
+		let n = this.#t.getZoomTarget(t);
+		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 = {
+			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
+		};
+		this.#t.events.dispatchZoom(s) && this.#t.animateTo(t);
+	}
+	#c(t) {
+		return this.#e.behaviorZoom && 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;
+	}
+	#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);
+	}
+};
+function o(e) {
+	if (e === "--pan-left") return {
+		horizontal: -1,
+		vertical: 0
+	};
+	if (e === "--pan-right") return {
+		horizontal: 1,
+		vertical: 0
+	};
+	if (e === "--pan-up") return {
+		horizontal: 0,
+		vertical: -1
+	};
+	if (e === "--pan-down") return {
+		horizontal: 0,
+		vertical: 1
+	};
+}
+function s(e) {
+	if (e === "--zoom-in") return "in";
+	if (e === "--zoom-out") return "out";
+	if (e === "--zoom-reset") return "reset";
+	if (e === "--zoom-to-fit") return "fit";
+}
+function c(e) {
+	return e === "ArrowLeft" ? {
+		horizontal: -1,
+		vertical: 0
+	} : e === "ArrowRight" ? {
+		horizontal: 1,
+		vertical: 0
+	} : e === "ArrowUp" ? {
+		horizontal: 0,
+		vertical: -1
+	} : {
+		horizontal: 0,
+		vertical: 1
+	};
+}
+//#endregion
+export { a as ViewportNavigationController };
+
+//# sourceMappingURL=viewport-navigation.controller.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,9 @@
+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-projection.utils.d.ts

@@ -0,0 +1,7 @@
+import type { ViewportPoint, ViewportTransform } from './viewport.types.js';
+export declare function anchoredTransform(anchor: ViewportPoint, viewport: ViewportPoint, scale: number): ViewportTransform;
+export declare function contentPointFromViewport(viewportX: number, viewportY: number, transform: ViewportTransform): ViewportPoint;
+export declare function centeredScaleTransform(scale: number, transform: ViewportTransform, viewportSize: {
+    width: number;
+    height: number;
+}): ViewportTransform;

package/dist/viewport/viewport-projection.utils.js

@@ -0,0 +1,25 @@
+//#region src/viewport/viewport-projection.utils.ts
+function e(e, t, n) {
+	return {
+		scale: n,
+		x: e.x - t.x / n,
+		y: e.y - t.y / n
+	};
+}
+function t(e, t, n) {
+	return {
+		x: e / n.scale + n.x,
+		y: t / n.scale + n.y
+	};
+}
+function n(n, r, i) {
+	let a = {
+		x: i.width / 2,
+		y: i.height / 2
+	};
+	return e(t(a.x, a.y, r), a, n);
+}
+//#endregion
+export { e as anchoredTransform, n as centeredScaleTransform, t as contentPointFromViewport };
+
+//# sourceMappingURL=viewport-projection.utils.js.map

package/dist/viewport/viewport-projection.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport-projection.utils.js","names":[],"sources":["../../src/viewport/viewport-projection.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ViewportPoint, ViewportTransform } from './viewport.types.js';\n\nexport function anchoredTransform(anchor: ViewportPoint, viewport: ViewportPoint, scale: number): ViewportTransform {\n  return {\n    scale,\n    x: anchor.x - viewport.x / scale,\n    y: anchor.y - viewport.y / scale\n  };\n}\n\nexport function contentPointFromViewport(\n  viewportX: number,\n  viewportY: number,\n  transform: ViewportTransform\n): ViewportPoint {\n  return {\n    x: viewportX / transform.scale + transform.x,\n    y: viewportY / transform.scale + transform.y\n  };\n}\n\nexport function centeredScaleTransform(\n  scale: number,\n  transform: ViewportTransform,\n  viewportSize: { width: number; height: number }\n): ViewportTransform {\n  const viewport = { x: viewportSize.width / 2, y: viewportSize.height / 2 };\n  return anchoredTransform(contentPointFromViewport(viewport.x, viewport.y, transform), viewport, scale);\n}\n"],"mappings":";AAKA,SAAgB,EAAkB,GAAuB,GAAyB,GAAkC;CAClH,OAAO;EACL;EACA,GAAG,EAAO,IAAI,EAAS,IAAI;EAC3B,GAAG,EAAO,IAAI,EAAS,IAAI;CAC7B;AACF;AAEA,SAAgB,EACd,GACA,GACA,GACe;CACf,OAAO;EACL,GAAG,IAAY,EAAU,QAAQ,EAAU;EAC3C,GAAG,IAAY,EAAU,QAAQ,EAAU;CAC7C;AACF;AAEA,SAAgB,EACd,GACA,GACA,GACmB;CACnB,IAAM,IAAW;EAAE,GAAG,EAAa,QAAQ;EAAG,GAAG,EAAa,SAAS;CAAE;CACzE,OAAO,EAAkB,EAAyB,EAAS,GAAG,EAAS,GAAG,CAAS,GAAG,GAAU,CAAK;AACvG"}

package/dist/viewport/viewport.d.ts

@@ -0,0 +1,92 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPoint, ViewportRect, ViewportRevealOptions, ViewportTransform } from './viewport.types.js';
+/**
+ * @element nve-viewport
+ * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
+ * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
+ * @since 0.0.0
+ * @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.
+ * @event viewportchange - Dispatched once after a render that commits one or more viewport transform 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.
+ * @cssprop --panning-cursor - Cursor shown while a pointer pan is active.
+ * @command --pan-left - With behavior-pan enabled, pans left by one discrete step.
+ * @command --pan-right - With behavior-pan enabled, pans right by one discrete step.
+ * @command --pan-up - With behavior-pan enabled, pans up by one discrete step.
+ * @command --pan-down - With behavior-pan enabled, pans down by one discrete step.
+ * @command --zoom-in - With behavior-zoom enabled, animates to the next permitted scale step.
+ * @command --zoom-out - With behavior-zoom enabled, animates to the previous permitted scale step.
+ * @command --zoom-reset - With behavior-zoom enabled, animates to 100% scale.
+ * @command --zoom-to-fit - With behavior-zoom enabled, animates to fit direct default-slot element boxes.
+ * @stable false
+ */
+export declare class Viewport extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    private internalHost;
+    constructor();
+    /** Horizontal content-space coordinate at the viewport origin. */
+    get x(): number;
+    set x(value: number);
+    /** Vertical content-space coordinate at the viewport origin. */
+    get y(): number;
+    set y(value: number);
+    /** Content-to-viewport CSS-pixel scale. */
+    get scale(): number;
+    set scale(value: number);
+    /** Inclusive lower scale limit. */
+    get minScale(): number;
+    set minScale(value: number);
+    /** Inclusive upper scale limit. */
+    get maxScale(): number;
+    set maxScale(value: number);
+    /** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+    get behaviorPan(): ViewportPanBehavior;
+    set behaviorPan(value: ViewportPanBehavior | null | undefined);
+    /** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+    behaviorZoom: boolean;
+    /** Fits measurable direct default-slot content once after initial layout. */
+    autoFit: boolean;
+    /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+    get fitInset(): number;
+    set fitInset(value: number);
+    /** CSS-pixel pointer movement required before a pointer pan begins. */
+    get dragThreshold(): number;
+    set dragThreshold(value: number);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    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. */
+    toContentCoords(viewportX: number, viewportY: number): ViewportPoint;
+    /** Returns the current content-space origin and CSS-pixel scale. */
+    getTransform(): ViewportTransform;
+    /** Returns the visible content-space rectangle. */
+    getVisibleRect(): ViewportRect;
+    /** 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. */
+    reveal(region: {
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+    }, options?: ViewportRevealOptions): void;
+    /** Fits the union of direct default-slot element boxes within the viewport. */
+    fitContents(options?: ViewportRevealOptions): void;
+}

package/dist/viewport/viewport.examples.js

@@ -0,0 +1,6 @@
+//#region src/viewport/viewport.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=viewport.examples.js.map

package/dist/viewport/viewport.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.examples.js","names":[],"sources":["../../src/viewport/viewport.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/viewport/define.js';\n\nexport default {\n  title: 'Elements/Viewport',\n  component: 'nve-viewport'\n};\n\n/**\n * @summary Enable direct pan and zoom with auto-fit and adaptive gridlines to navigate positioned content.\n */\nexport const Default = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"710\"\n        height=\"410\"\n        viewBox=\"0 0 710 410\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\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  `\n};\n\n/**\n * @summary Place custom content in the background slot to provide a spatial reference without affecting content fitting.\n */\nexport const Background = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <svg\n        slot=\"background\"\n        aria-hidden=\"true\"\n        width=\"20480\"\n        height=\"20480\"\n        viewBox=\"-10240 -10240 20480 20480\"\n        style=\"position: absolute; left: -10240px; top: -10240px\"\n      >\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\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"710\"\n        height=\"410\"\n        viewBox=\"0 0 710 410\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\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  `\n};\n\n/**\n * @summary Place native and Elements controls inside a viewport without losing their standard interactions.\n */\nexport const InteractiveContent = {\n  render: () => html`\n    <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\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  `\n};\n\n/**\n * @summary Configure panning to require Space when application content needs to handle its own drag interactions.\n */\nexport const PanWithSpace = {\n  render: () => html`\n    <style>\n      #viewport-space-pan-card {\n        cursor: var(--drag-cursor, auto);\n      }\n\n      #viewport-space-pan-card:hover {\n        --drag-cursor: grab;\n      }\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\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\">\n            Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.\n          </p>\n        </nve-alert>\n      </nve-alert-group>\n\n      <nve-viewport\n        id=\"viewport-space-pan-demo\"\n        behavior-pan=\"space\"\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n        <nve-card\n          id=\"viewport-space-pan-card\"\n          data-draggable-card\n          data-card-drag-handle\n          style=\"position: absolute; left: 290px; top: 120px; width: 300px\"\n        >\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\n    <script type=\"module\">\n      const viewport = document.querySelector('#viewport-space-pan-demo');\n      const handles = viewport.querySelectorAll('[data-card-drag-handle]');\n\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\n        const finishDrag = event => {\n          if (event.pointerId !== pointerId) return;\n          pointerId = undefined;\n          card.removeAttribute('data-dragging');\n        };\n\n        handle.addEventListener('pointerdown', event => {\n          if (\n            (event.pointerType !== 'mouse' && event.pointerType !== 'pen') ||\n            event.button !== 0 ||\n            event.defaultPrevented\n          ) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\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\n        handle.addEventListener('pointermove', event => {\n          if (event.pointerId !== pointerId) return;\n\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\n        handle.addEventListener('pointerup', finishDrag);\n        handle.addEventListener('pointercancel', finishDrag);\n        handle.addEventListener('lostpointercapture', finishDrag);\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.\n */\nexport const Commands = {\n  render: () => html`\n    <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\n      <nve-viewport\n        id=\"viewport-command-demo\"\n        autofit\n        fit-inset=\"24\"\n        behavior-pan\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines></nve-viewport-gridlines>\n\n        <svg\n          role=\"img\"\n          aria-label=\"Three geometric forms in a spatial field\"\n          width=\"710\"\n          height=\"410\"\n          viewBox=\"0 0 710 410\"\n          style=\"position: absolute; left: 0; top: 0\"\n        >\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  `\n};\n\n/**\n * @summary Viewport navigation helpers let application logic animate specific content regions into view.\n */\nexport const Reveal = {\n  render: () => html`\n    <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\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\n        <svg\n          aria-hidden=\"true\"\n          width=\"500\"\n          height=\"320\"\n          viewBox=\"0 0 500 320\"\n          style=\"position: absolute; left: 380px; top: 144px\"\n        >\n          <path\n            d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\"\n            fill=\"none\"\n            stroke=\"var(--nve-ref-border-color-emphasis)\"\n            stroke-width=\"4\"\n          ></path>\n        </svg>\n\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\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\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  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}