@nvidia-elements/core 2.10.0 → 2.11.1

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

@@ -1 +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"}
+{"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 automatic 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 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=\"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 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"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/viewport/viewport.examples.json

@@ -5,8 +5,17 @@
     {
       "id": "viewport",
       "name": "Default",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n  </svg>\n</nve-viewport>\n",
-      "summary": "Enable direct pan and zoom with auto-fit and adaptive gridlines to navigate positioned content.",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <nve-viewport-gridlines></nve-viewport-gridlines>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"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-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  <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-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 automatic bounding boxes with a simplified representation of the viewport content.",
       "description": "",
       "composition": false,
       "tags": []
@@ -14,7 +23,7 @@
     {
       "id": "viewport-background",
       "name": "Background",
-      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <svg slot=\"background\" aria-hidden=\"true\" width=\"20480\" height=\"20480\" viewBox=\"-10240 -10240 20480 20480\" style=\"position: absolute; left: -10240px; top: -10240px\">\n    <defs>\n      <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n        <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n  </svg>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n    <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n    <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n    <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n  </svg>\n</nve-viewport>\n",
+      "template": "<nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n  <svg slot=\"background\" aria-hidden=\"true\" width=\"20480\" height=\"20480\" viewBox=\"-10240 -10240 20480 20480\" style=\"position: absolute; left: -10240px; top: -10240px\">\n    <defs>\n      <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n        <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n      </pattern>\n    </defs>\n    <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n  </svg>\n  <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"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,
@@ -41,15 +50,15 @@
     {
       "id": "viewport-commands",
       "name": "Commands",
-      "template": "<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-toolbar aria-label=\"Viewport navigation controls\">\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n  </nve-toolbar>\n  <nve-viewport id=\"viewport-command-demo\" autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines></nve-viewport-gridlines>\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"710\" height=\"410\" viewBox=\"0 0 710 410\" style=\"position: absolute; left: 0; top: 0\">\n      <circle cx=\"100\" cy=\"300\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n      <rect x=\"250\" y=\"0\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n      <path d=\"M 600 190 L 710 300 L 600 410 L 490 300 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n    </svg>\n  </nve-viewport>\n</div>\n",
+      "template": "<div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n  <nve-toolbar aria-label=\"Viewport navigation controls\">\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n    <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n    <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n  </nve-toolbar>\n  <nve-viewport id=\"viewport-command-demo\" autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines></nve-viewport-gridlines>\n    <svg role=\"img\" aria-label=\"Three geometric forms in a spatial field\" width=\"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-reveal",
-      "name": "Reveal",
+      "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  <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n    <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n    <svg aria-hidden=\"true\" width=\"500\" height=\"320\" viewBox=\"0 0 500 320\" style=\"position: absolute; left: 380px; top: 144px\">\n      <path d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"4\"></path>\n    </svg>\n    <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n      <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-viewport>\n</div>\n<script type=\"module\">\n  const viewport = document.querySelector(\"#viewport-reveal-demo\");\n  const buttons = Array.from(document.querySelectorAll(\"[data-viewport-region]\"));\n  const framing = 80;\n  buttons.forEach((button) => {\n    button.addEventListener(\"click\", () => {\n      const region = viewport.querySelector(\"#\" + button.dataset.viewportRegion);\n      viewport.reveal(\n        {\n          x: region.offsetLeft - framing,\n          y: region.offsetTop - framing,\n          width: region.offsetWidth + framing * 2,\n          height: region.offsetHeight + framing * 2,\n        },\n        { animated: true, duration: 500 },\n      );\n    });\n  });\n</script>\n",
       "summary": "Viewport navigation helpers let application logic animate specific content regions into view.",
       "description": "",

package/dist/viewport/viewport.js

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

package/dist/viewport/viewport.js.map

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

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

@@ -1,4 +1,3 @@
-import type { PointerEndReason, PointerMovementGesture } from '@nvidia-elements/core/internal';
 export interface ViewportTransform {
     readonly x: number;
     readonly y: number;
@@ -13,47 +12,75 @@ export interface ViewportRect extends ViewportPoint {
     readonly height: number;
 }
 export type ViewportPanBehavior = boolean | 'space';
-export interface ViewportPointerPanDetail extends PointerMovementGesture {
-    readonly source: 'pointer';
-    readonly start: ViewportTransform;
+export type ViewportNavigationSource = 'pointer' | 'wheel' | 'pinch' | 'keyboard' | 'command' | 'minimap' | 'control';
+export interface ViewportPanProposal {
+    readonly source: ViewportNavigationSource;
+    readonly event: Event;
     readonly next: ViewportTransform;
+    readonly clientX?: number;
+    readonly clientY?: number;
+    readonly deltaX?: number;
+    readonly deltaY?: number;
+}
+export type ViewportPanUpdateProposal = Omit<ViewportPanProposal, 'source'>;
+export interface ViewportPanDetail extends ViewportPanProposal {
+    readonly start: ViewportTransform;
+}
+export interface ViewportPointerPanDetail extends ViewportPanDetail {
+    readonly source: 'pointer';
+    readonly event: PointerEvent;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly movementX: number;
+    readonly movementY: number;
+    readonly startClientX: number;
+    readonly startClientY: number;
+    readonly totalDisplacementX: number;
+    readonly totalDisplacementY: number;
 }
-export interface ViewportWheelPanDetail {
+export type ViewportWheelPanDetail = ViewportPanDetail & {
     readonly source: 'wheel';
     readonly event: WheelEvent;
     readonly clientX: number;
     readonly clientY: number;
     readonly deltaX: number;
     readonly deltaY: number;
-    readonly start: ViewportTransform;
-    readonly next: ViewportTransform;
-}
-export interface ViewportDiscretePanDetail {
+};
+export type ViewportDiscretePanDetail = ViewportPanDetail & {
     readonly source: 'keyboard' | 'command';
     readonly event: KeyboardEvent | CommandEvent;
-    readonly start: ViewportTransform;
-    readonly next: ViewportTransform;
-}
-export type ViewportPanDetail = ViewportPointerPanDetail | ViewportWheelPanDetail | ViewportDiscretePanDetail;
-export type ViewportPanEndReason = PointerEndReason | 'pinch';
-export interface ViewportPanEndDetail {
-    readonly source: 'pointer';
-    readonly event: PointerEvent;
+};
+export type ViewportPanEndReason = 'up' | 'cancel' | 'lost-capture' | 'buttons-released' | 'pinch';
+export interface ViewportPanEndRequest {
+    readonly event: Event;
     readonly interrupted: boolean;
     readonly reason: ViewportPanEndReason;
+}
+export interface ViewportPanEndDetail extends ViewportPanEndRequest {
+    readonly source: ViewportNavigationSource;
     readonly start: ViewportTransform;
     readonly transform: ViewportTransform;
 }
-export interface ViewportZoomDetail {
-    readonly source: 'wheel' | 'pinch' | 'keyboard' | 'command';
-    readonly event: WheelEvent | PointerEvent | KeyboardEvent | CommandEvent;
-    readonly clientX: number;
-    readonly clientY: number;
+export interface ViewportPanSession {
+    readonly start: ViewportTransform;
+    update(proposal: ViewportPanUpdateProposal): boolean;
+    end(request: ViewportPanEndRequest): void;
+}
+export interface ViewportZoomProposal {
+    readonly source: ViewportNavigationSource;
+    readonly event: Event;
+    readonly clientX?: number;
+    readonly clientY?: number;
     readonly anchor: ViewportPoint;
     readonly factor: number;
-    readonly start: ViewportTransform;
     readonly next: ViewportTransform;
 }
+export interface ViewportZoomRequestOptions {
+    readonly animated?: boolean;
+}
+export interface ViewportZoomDetail extends ViewportZoomProposal {
+    readonly start: ViewportTransform;
+}
 export interface ViewportAnimationOptions {
     readonly duration?: number;
 }