@nvidia-elements/core 2.15.0 → 2.15.2

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

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

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

@@ -1,21 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { ViewportPanProposal, ViewportZoomProposal, ViewportZoomRequestOptions, ViewportTransform } from './viewport.types.js';
-import type { ViewportZoomAction } from './viewport-navigation.types.js';
-type ViewportNavigationHost = HTMLElement & ReactiveControllerHost & {
-    readonly pannable: boolean;
-    readonly zoomable: boolean;
-    requestPan(proposal: ViewportPanProposal): boolean;
-    requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean;
-};
-interface ViewportNavigationDelegate {
-    readonly getTransform: () => ViewportTransform;
-    readonly getZoomTarget: (action: ViewportZoomAction) => ViewportTransform | undefined;
-}
-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

@@ -1,136 +0,0 @@
-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.pannable || e.zoomable });
-	}
-	hostConnected() {
-		this.#e.addEventListener("nve-key", this.#i), this.#e.addEventListener("command", this.#r), this.#e.addEventListener("keydown", this.#o), this.#u(this.#e.pannable || this.#e.zoomable);
-	}
-	hostDisconnected() {
-		this.#e.removeEventListener("nve-key", this.#i), this.#e.removeEventListener("command", this.#r), this.#e.removeEventListener("keydown", this.#o);
-	}
-	hostUpdated() {
-		this.#u(this.#e.pannable || this.#e.zoomable);
-	}
-	#r = (e) => {
-		let t = this.#e.pannable ? o(e.command) : void 0;
-		if (t) {
-			this.#a(e, {
-				direction: t,
-				source: "command",
-				viewportPixelStep: r
-			});
-			return;
-		}
-		if (!this.#e.zoomable) 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) {
-		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
-		};
-		this.#e.requestPan({
-			event: e,
-			next: i,
-			source: t.source
-		});
-	}
-	#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) {
-		let i = this.#t.getTransform(), a = {
-			x: this.#e.clientWidth / 2,
-			y: this.#e.clientHeight / 2
-		}, o = {
-			anchor: n(a.x, a.y, i),
-			event: e,
-			factor: t.scale / i.scale,
-			next: t,
-			source: r
-		};
-		this.#e.requestZoom(o, { animated: !0 });
-	}
-	#c(t) {
-		return this.#e.zoomable && e(this.#e) && t.composedPath()[0] === this.#e;
-	}
-	#l(t) {
-		return this.#e.pannable && e(this.#e) && t.composedPath()[0] === this.#e && !t.ctrlKey && !t.metaKey && !t.altKey;
-	}
-	#u(e) {
-		e ? this.#e.hasAttribute("tabindex") || (this.#e.tabIndex = 0, this.#n = !0) : (this.#n && this.#e.getAttribute("tabindex") === "0" && this.#e.removeAttribute("tabindex"), this.#n = !1);
-	}
-};
-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

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

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

@@ -1 +0,0 @@
-export type ViewportZoomAction = 'fit' | 'in' | 'out' | 'reset';

package/dist/viewport/viewport-projection.utils.d.ts

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

@@ -1,25 +0,0 @@
-//#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

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

@@ -1,122 +0,0 @@
-import { LitElement, type PropertyValues } from 'lit';
-import type { ViewportAnimationOptions, ViewportPanBehavior, ViewportPanProposal, ViewportPanSession, ViewportPoint, ViewportRect, ViewportRevealOptions, ViewportTransform, ViewportZoomProposal, ViewportZoomRequestOptions } from './viewport.types.js';
-/**
- * @element nve-viewport
- * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
- * @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
- * @slot overlay - Interactive content fixed above the transformed plane and excluded from content fitting
- * @event panstart - Dispatched when a sustained pointer or control pan begins. Cancel to suppress the default for its session.
- * @event pan - Dispatched for admitted user pan proposals. Cancel to skip the proposed transform mutation.
- * @event panend - Dispatched once when a sustained pan ends, including its terminal reason.
- * @event zoom - Dispatched for admitted user zoom proposals. Cancel to skip the proposed transform mutation.
- * @event viewportchange - Dispatched once after a render that commits one or more viewport transform changes.
- * @event capabilitieschange - Dispatched after effective user-input pan or zoom admission changes.
- * @cssprop --background - Background color of the fixed viewport area.
- * @cssprop --min-height
- * @cssprop --pan-cursor - Cursor shown over a background eligible for primary-pointer panning.
- * @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);
-    /**
-     * Scale stops for keyboard and command zoom, clamped to the scale bounds.
-     * Defaults to built-in stops; an empty array uses only the bounds.
-     */
-    zoomStops?: readonly 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;
-    /** Whether the viewport may admit new user-input panning. */
-    get pannable(): boolean;
-    /** Whether the viewport may admit new user-input zooming. */
-    get zoomable(): boolean;
-    /** Fits measurable direct default-slot content once after initial layout. */
-    autoFit: boolean;
-    /** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
-    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;
-    /**
-     * Requests one discrete user-originated pan. When pannable, the viewport dispatches
-     * a cancelable `pan` and applies the default transform if no listener cancels the event.
-     * Returns true only when that default changes the transform.
-     */
-    requestPan(proposal: ViewportPanProposal): boolean;
-    /**
-     * Requests one discrete user-originated zoom. When zoomable, the viewport dispatches
-     * a cancelable `zoom` and applies the default transform if no listener cancels the event.
-     * Set `options.animated` to animate the uncanceled default; the option is absent from the `zoom` detail.
-     * Returns true when the default changes or schedules a change to the transform.
-     */
-    requestZoom(proposal: ViewportZoomProposal, options?: ViewportZoomRequestOptions): boolean;
-    /**
-     * Starts a sustained semantic pan after the caller crosses its activation threshold.
-     * Dispatches `panstart`, performs the initial `pan` update, and returns a session for later updates
-     * and one terminal `panend`. Returns undefined when pannable is false.
-     */
-    startPan(proposal: ViewportPanProposal): ViewportPanSession | undefined;
-    /** Animates the viewport to the requested partial transform. */
-    animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void;
-    /** Centers or fits a content-space region within the viewport. */
-    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

@@ -1,6 +0,0 @@
-//#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

@@ -1 +0,0 @@
-{"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 Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.\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=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap></nve-viewport-minimap>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Provide custom minimap content to replace the default bounding boxes with a simplified representation of the viewport content.\n */\nexport const Minimap = {\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=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap>\n        <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        </svg>\n      </nve-viewport-minimap>\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=\"900\"\n          height=\"600\"\n          viewBox=\"0 0 900 600\"\n          style=\"position: absolute; left: 0; top: 0\"\n        >\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n          <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\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 ProgrammaticNavigation = {\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\n/**\n * @summary Optionally configure viewport grid lines to use dots instead of lines.\n */\nexport const Dots = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines pattern=\"dots\"></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Use crosses as spatial reference points to help users judge positions while keeping the content between them unobstructed.\n */\nexport const Crosses = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines pattern=\"crosses\"></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\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-triangles\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n            <path d=\"M 0 0 H 200 V 200 M 0 0 L 200 200 M 0 200 L 200 0\" fill=\"none\" stroke=\"var(--nve-ref-border-color-muted)\" stroke-width=\"1.5\" vector-effect=\"non-scaling-stroke\"></path>\n          </pattern>\n        </defs>\n        <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-triangles)\"></rect>\n      </svg>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/viewport/viewport.examples.json

@@ -1,87 +0,0 @@
-{
-  "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\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap></nve-viewport-minimap>\n</nve-viewport>\n",
-      "summary": "Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "viewport-minimap",
-      "name": "Minimap",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n\n  <nve-viewport-minimap>\n    <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    </svg>\n  </nve-viewport-minimap>\n</nve-viewport>\n",
-      "summary": "Provide custom minimap content to replace the default bounding boxes with a simplified representation of the viewport content.",
-      "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\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\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\">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\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\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\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 ((event.pointerType !== \"mouse\" && event.pointerType !== \"pen\") || event.button !== 0 || event.defaultPrevented) {\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",
-      "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\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\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n      <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\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-programmatic-navigation",
-      "name": "ProgrammaticNavigation",
-      "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\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 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\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",
-      "summary": "Viewport navigation helpers let application logic animate specific content regions into view.",
-      "description": "",
-      "composition": true,
-      "tags": []
-    },
-    {
-      "id": "viewport-dots",
-      "name": "Dots",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"dots\"></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
-      "summary": "Optionally configure viewport grid lines to use dots instead of lines.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "viewport-crosses",
-      "name": "Crosses",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines pattern=\"crosses\"></nve-viewport-gridlines>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n  </svg>\n</nve-viewport>\n",
-      "summary": "Use crosses as spatial reference points to help users judge positions while keeping the content between them unobstructed.",
-      "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-triangles\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n        <path d=\"M 0 0 H 200 V 200 M 0 0 L 200 200 M 0 200 L 200 0\" fill=\"none\" stroke=\"var(--nve-ref-border-color-muted)\" stroke-width=\"1.5\" vector-effect=\"non-scaling-stroke\"></path>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-triangles)\"></rect>\n  </svg>\n\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\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": []
-    }
-  ]
-}

package/dist/viewport/viewport.js

@@ -1,6 +0,0 @@
-//#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}.overlay{position:absolute;z-index:1;inset:0;pointer-events:none}::slotted([slot=\"background\"]){pointer-events:none}::slotted(:not([slot=\"background\"],[slot=\"overlay\"])){pointer-events:auto}::slotted([slot=\"overlay\"]){pointer-events:auto}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=viewport.js.map

package/dist/viewport/viewport.js.map

@@ -1 +0,0 @@
-{"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.overlay {\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  pointer-events: none;\n}\n\n::slotted([slot='background']) {\n  pointer-events: none;\n}\n\n::slotted(:not([slot='background'], [slot='overlay'])) {\n  pointer-events: auto;\n}\n\n::slotted([slot='overlay']) {\n  pointer-events: auto;\n}\n"],"mappings":""}