bruce-cesium 6.8.9 → 6.9.0

package/dist/bruce-cesium.umd.js

@@ -494,8 +494,10 @@
                     this.startColor = this.startColor.clone();
                 }
                 if (!this.startColor) {
-                    this.startColor = Cesium.Color.WHITE.clone();
-                    console.warn("No start color provided. Using WHITE as start color. Animation may not work as expected.");
+                    // No prior colour to animate from (eg: a freshly-created graphic).
+                    // Starting from WHITE would itself be a visible flash, so just skip the animation.
+                    this.startColor = this.targetColor.clone();
+                    this.durationMs = 0;
                 }
                 this.startTime = new Date();
             }
@@ -608,7 +610,9 @@
                     }
                 }
                 else {
-                    startColor = Cesium.Color.WHITE.clone();
+                    // No prior colour to animate from (eg: a freshly-loaded feature).
+                    // Starting from WHITE would itself be a visible flash, so start from the target colour instead.
+                    startColor = (color === null || color === void 0 ? void 0 : color.clone) ? color.clone() : color;
                 }
             }
             // Don't animate if the colour is the same.
@@ -2710,6 +2714,9 @@
             if (this._element && this._element.parentElement) {
                 this._element.parentElement.removeChild(this._element);
             }
+            if (this._results && this._results.parentElement) {
+                this._results.parentElement.removeChild(this._results);
+            }
         }
         Toggle() {
             if (this.Disposed) {
@@ -2732,16 +2739,9 @@
             style.id = this.STYLESHEET_ID;
             style.innerHTML = `
             .NextspaceSearchBar {
-                top: 10px;
-                right: 10px;
                 display: flex;
                 box-sizing: border-box;
-                box-shadow: 0 0 1px rgba(18,22,25,.24),0 18px 36px -4px rgba(18,22,25,.6);
-                background: #21272a;
-                border-radius: 9px;
-                height: 48px;
-                padding-left: 2px;
-                padding-right: 2px;
+                height: 100%;
                 font-family: sans-serif;
             }
 
@@ -2774,17 +2774,13 @@
             }
 
             .NextspaceSearchBarResults {
-                background-color: #21272a;
-                border-radius: 0 0 6px 6px;
-                display: flex;
+                /* No background of its own: it's a normal-flow section of the same
+                   translucent/blurred ViewBar panel, not a separate floating box. */
+                border-top: 1px solid rgba(255, 255, 255, 0.12);
+                display: none;
                 flex-direction: column;
-                overflow: hidden;
-                padding: 12px 8px 8px;
-                position: absolute;
-                top: calc(100% - 6px);
+                padding: 8px;
                 width: 100%;
-                left: 0;
-                z-index: 1;
             }
 
             .NextspaceSearchBarResultsItem {
@@ -2871,9 +2867,9 @@
             };
             const results = document.createElement("div");
             results.className = "NextspaceSearchBarResults";
-            element.appendChild(results);
             results.style.display = "none";
             this._results = results;
+            this.WidgetViewBar.Element.appendChild(results);
             this.Container.appendChild(element);
             this._element = element;
         }
@@ -3180,13 +3176,13 @@
             style.id = this.STYLESHEET_ID;
             style.innerHTML = `
             .NextspaceViewBar {
-                align-items: center;
-                background-color: #21272a;
+                background: rgba(33, 39, 42, 0.8);
+                backdrop-filter: blur(20px);
+                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.36), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
                 border-radius: 9px;
                 display: flex;
+                flex-direction: column;
                 flex-shrink: 1;
-                height: 48px;
-                justify-content: center;
                 position: absolute;
                 z-index: 1;
                 top: 10px;
@@ -3198,6 +3194,14 @@
                 box-sizing: border-box;
             }
 
+            .NextspaceViewBarRow {
+                align-items: center;
+                display: flex;
+                flex-shrink: 0;
+                height: 44px;
+                justify-content: center;
+            }
+
             .NextspaceViewBarControl {
                 align-items: center;
                 border-radius: 0;
@@ -3213,9 +3217,19 @@
                 width: 46px;
             }
 
+            .NextspaceViewBarControl:first-of-type {
+                border-radius: 9px 0 0 9px;
+                padding-left: 8px;
+            }
+
+            .NextspaceViewBarControl:last-of-type {
+                border-radius: 0 9px 9px 0;
+                padding-right: 8px;
+            }
+
             .NextspaceViewBarControlIcon {
-                width: 32px;
-                height: 32px;
+                width: 28px;
+                height: 28px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -3231,6 +3245,7 @@
 
             .NextspaceViewBarControl[is-enabled="true"] {
                 background: #33b1ff;
+                box-shadow: inset 0 2px 0 0 #64c4ff;
             }
 
             .NextspaceViewBarEndBreaker {
@@ -3248,6 +3263,10 @@
         _generateElement() {
             const element = document.createElement("div");
             element.className = "NextspaceViewBar";
+            const row = document.createElement("div");
+            row.className = "NextspaceViewBarRow";
+            element.appendChild(row);
+            this._row = row;
             this.Container.appendChild(element);
             this._element = element;
             this._addBarControl({
@@ -3255,7 +3274,7 @@
                 title: "Search",
                 iconDisabled: {
                     icon: `
-                    <svg class="" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3283 6C9.73857 6 6 9.73857 6 14.3283C6 18.918 9.73857 22.6566 14.3283 22.6566C16.3242 22.6566 18.1571 21.9479 19.5937 20.7714L24.5663 25.7439C24.643 25.8239 24.7349 25.8877 24.8366 25.9316C24.9383 25.9756 25.0478 25.9988 25.1586 26C25.2694 26.0011 25.3793 25.9801 25.4819 25.9382C25.5845 25.8963 25.6777 25.8344 25.756 25.756C25.8344 25.6777 25.8963 25.5845 25.9382 25.4819C25.9801 25.3793 26.0011 25.2694 26 25.1586C25.9988 25.0478 25.9756 24.9383 25.9316 24.8366C25.8877 24.7349 25.8239 24.643 25.7439 24.5663L20.7714 19.5937C21.9479 18.1571 22.6566 16.3242 22.6566 14.3283C22.6566 9.73857 18.918 6 14.3283 6ZM14.3283 7.66566C18.0178 7.66566 20.9909 10.6388 20.9909 14.3283C20.9909 18.0178 18.0178 20.9909 14.3283 20.9909C10.6388 20.9909 7.66566 18.0178 7.66566 14.3283C7.66566 10.6388 10.6388 7.66566 14.3283 7.66566Z" fill="white"></path></svg>
+                    <svg class="" width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3283 6C9.73857 6 6 9.73857 6 14.3283C6 18.918 9.73857 22.6566 14.3283 22.6566C16.3242 22.6566 18.1571 21.9479 19.5937 20.7714L24.5663 25.7439C24.643 25.8239 24.7349 25.8877 24.8366 25.9316C24.9383 25.9756 25.0478 25.9988 25.1586 26C25.2694 26.0011 25.3793 25.9801 25.4819 25.9382C25.5845 25.8963 25.6777 25.8344 25.756 25.756C25.8344 25.6777 25.8963 25.5845 25.9382 25.4819C25.9801 25.3793 26.0011 25.2694 26 25.1586C25.9988 25.0478 25.9756 24.9383 25.9316 24.8366C25.8877 24.7349 25.8239 24.643 25.7439 24.5663L20.7714 19.5937C21.9479 18.1571 22.6566 16.3242 22.6566 14.3283C22.6566 9.73857 18.918 6 14.3283 6ZM14.3283 7.66566C18.0178 7.66566 20.9909 10.6388 20.9909 14.3283C20.9909 18.0178 18.0178 20.9909 14.3283 20.9909C10.6388 20.9909 7.66566 18.0178 7.66566 14.3283C7.66566 10.6388 10.6388 7.66566 14.3283 7.66566Z" fill="white"></path></svg>
                 `,
                     iconSource: "svg"
                 },
@@ -3263,7 +3282,7 @@
             });
             const breaker = document.createElement("div");
             breaker.className = "NextspaceViewBarEndBreaker";
-            this._element.appendChild(breaker);
+            this._row.appendChild(breaker);
             this._addBarControl({
                 control: "fullscreen",
                 title: "Fullscreen",
@@ -3289,7 +3308,7 @@
         AddBarControl(params) {
             this.customControls.set(params.control, params.content);
             // We insert before the end breaker.
-            const endBreaker = this._element.querySelector(".NextspaceViewBarEndBreaker");
+            const endBreaker = this._row.querySelector(".NextspaceViewBarEndBreaker");
             const afterElement = endBreaker ? endBreaker.previousElementSibling : null;
             let icon;
             let iconSource;
@@ -3360,21 +3379,21 @@
                 }
             }
             else {
-                this._element.appendChild(tabButton);
+                this._row.appendChild(tabButton);
             }
             switch (control) {
                 case "fullscreen":
                     controller = new WidgetControlViewBarFullscreen({
                         widget: this,
                         element: tabButton,
-                        container: this._element
+                        container: this._row
                     });
                     break;
                 case "searchbar":
                     controller = new WidgetControlViewBarSearch({
                         widget: this,
                         element: tabButton,
-                        container: this._element
+                        container: this._row
                     });
                     break;
                 default:
@@ -3385,7 +3404,7 @@
                     const clazz = this.customControls.get(control);
                     controller = new clazz({
                         widget: this,
-                        container: this._element
+                        container: this._row
                     });
                     break;
             }
@@ -14261,6 +14280,9 @@
                 // Cache of 'something isolated' that we detect and use to calculate a default show state.
                 // It's pretty expensive so we save it for a few seconds inbetween checks.
                 this.somethingIsolated = null;
+                // Dim opacity to apply to non-isolated features on load, when isolation is opacity-based rather than a full hide.
+                // Null means isolation (if any) is the legacy full-hide kind.
+                this.somethingIsolatedOpacity = null;
                 this.somethingIsolatedDateTime = null;
                 // Entity ID -> rego.
                 // We retain this information as a quick look-up on what has been registered.
@@ -14911,9 +14933,12 @@
                     // 5s cache.
                     (this.somethingIsolatedDateTime && this.somethingIsolatedDateTime.getTime() + 5000 < new Date().getTime())) {
                     this.somethingIsolated = this.visualsManager.GetIsIsolatedAny();
+                    this.somethingIsolatedOpacity = this.visualsManager.GetIsolationOpacity();
                     this.somethingIsolatedDateTime = new Date();
                 }
                 // Override the default hide state set by the style.
+                // Applying the isolation dim/hide here (rather than showing at full opacity and
+                // letting the async styler queue correct it later) avoids a load-in flicker.
                 let hide = false;
                 if (state) {
                     if (state.hidden) {
@@ -14923,7 +14948,12 @@
                         hide = true;
                     }
                     else if (!state.isolated && this.somethingIsolated) {
-                        hide = true;
+                        if (this.somethingIsolatedOpacity != null) {
+                            feature.color = Cesium.Color.WHITE.clone().withAlpha(this.somethingIsolatedOpacity);
+                        }
+                        else {
+                            hide = true;
+                        }
                     }
                 }
                 feature.show = !hide;
@@ -28417,342 +28447,179 @@
         MeasureCreator.Polygon = Polygon;
     })(exports.MeasureCreator || (exports.MeasureCreator = {}));
 
-    var EAction;
-    (function (EAction) {
-        EAction["Forward"] = "f";
-        EAction["Backward"] = "b";
-        EAction["Left"] = "l";
-        EAction["Right"] = "r";
-        EAction["Up"] = "u";
-        EAction["Down"] = "d";
-        EAction["LookUp"] = "lu";
-        EAction["LookDown"] = "ld";
-        EAction["LookLeft"] = "ll";
-        EAction["LookRight"] = "lr";
-        EAction["Looking"] = "looking";
-    })(EAction || (EAction = {}));
-    const DEFAULT_WALK_MOVE_RATE = 0.2;
-    const DEFAULT_FLY_MOVE_RATE = 0.2;
-    const DEFAULT_MOVE_TYPE = null;
-    const VIEWER_WALKTHROUGH_DATA_KEY = "_cesiumWalkthroughData";
+    // Adaptive hover-raycast delay brackets, keyed by smoothed scene FPS.
+    // Mirrors cesium-navigator-ui's useMouseEvents: <20fps -> 350ms, <40fps -> 250ms, else 150ms.
+    const HOVER_DELAY_FAST_MS = 150;
+    const HOVER_DELAY_MID_MS = 250;
+    const HOVER_DELAY_SLOW_MS = 350;
+    const HOVER_DELAY_BRACKET_FPS_MID = 40;
+    const HOVER_DELAY_BRACKET_FPS_SLOW = 20;
+    // Minimum time between delay-bracket switches, so the delay itself doesn't flicker.
+    const DELAY_SWITCH_MIN_INTERVAL_MS = 1000;
+    // Scene is considered "slow" below ~60fps, with hysteresis to avoid flicker at the boundary.
+    const SLOW_SCENE_ENTER_FPS = 55;
+    const SLOW_SCENE_EXIT_FPS = 62;
+    // While the scene is slow, hover raycasts are debounced until the cursor has been still this long.
+    const CURSOR_SETTLE_MS = 150;
+    // After camera movement ends, wait this long before forcing a fresh hover raycast.
+    const POST_MOVE_RECHECK_DELAY_MS = 100;
+    // Consecutive still frames (position/direction unchanged) before we consider the camera settled.
+    // Cesium's own moveEnd event fires noticeably late, so this is checked independently per-frame.
+    const STILL_FRAMES_TO_SETTLE = 2;
+    // If the cursor hasn't moved more than this many pixels and the render frame hasn't advanced,
+    // skip re-raycasting entirely (same scene, same cursor position -> same pick result).
+    const STALE_RAYCAST_DISTANCE_PX = 2;
     /**
-     * Returns heading of camera towards where movement is happening.
-     * @returns
+     * Tracks scene FPS and camera-movement state to drive an adaptive hover-raycast throttle,
+     * following the design of cesium-navigator-ui's `useMouseEvents` hook as closely as possible
+     * so the cursorbar widget avoids over-sampling hover picks on slow scenes/devices.
      */
-    function getMovementHeading(viewer) {
-        var _a;
-        const actions = (_a = viewer[VIEWER_WALKTHROUGH_DATA_KEY]) === null || _a === void 0 ? void 0 : _a.actions;
-        if (!actions) {
-            return 0;
+    class CursorBarMouseEventThrottle {
+        constructor(viewer) {
+            this._renderFrameCount = 0;
+            this._lastCameraPos = null;
+            this._lastCameraDir = null;
+            this._stillFrameCount = 0;
+            this._isCameraMoving = false;
+            this._lastFrameTime = null;
+            this._avgFps = null;
+            this._isSlowScene = false;
+            this._hoverDelayMs = HOVER_DELAY_FAST_MS;
+            this._lastDelaySwitchTime = 0;
+            this._lastRaycast = null;
+            this._onSettle = null;
+            this._postMoveRecheckTimeout = null;
+            this._viewer = viewer;
+            const onPostRender = () => this._onPostRender();
+            viewer.scene.postRender.addEventListener(onPostRender);
+            this._postRenderRemoval = () => viewer.scene.postRender.removeEventListener(onPostRender);
+            const onMoveStart = () => this._setCameraMoving(true);
+            const onMoveEnd = () => this._settleCameraMovement();
+            viewer.camera.moveStart.addEventListener(onMoveStart);
+            viewer.camera.moveEnd.addEventListener(onMoveEnd);
+            this._moveStartRemoval = () => viewer.camera.moveStart.removeEventListener(onMoveStart);
+            this._moveEndRemoval = () => viewer.camera.moveEnd.removeEventListener(onMoveEnd);
         }
-        let heading = Cesium.Math.toDegrees(viewer.camera.heading);
-        let count = 0;
-        let totalHeading = 0;
-        let left = actions.get(EAction.Left);
-        if (left) {
-            totalHeading += heading + 270;
-            count += 1;
-        }
-        if (actions.get(EAction.Right)) {
-            totalHeading += heading + 90;
-            count += 1;
-        }
-        let forward = actions.get(EAction.Forward);
-        if (forward) {
-            totalHeading += heading;
-            count += 1;
-        }
-        if (actions.get(EAction.Backward)) {
-            totalHeading += heading + 180;
-            count += 1;
-        }
-        if (left && forward) {
-            totalHeading = heading - 45;
-        }
-        else {
-            totalHeading /= count;
-        }
-        return totalHeading;
-    }
-    /**
-     * Updates camera position and orientation based on current actions.
-     */
-    function doMovementTick(viewer) {
-        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
-        if (!data) {
-            return;
-        }
-        const canvas = viewer.canvas;
-        const camera = viewer.camera;
-        const moveRate = data.moveType == exports.Walkthrough.EMoveType.Walk ? data.walkMoveRate : data.flyMoveRate;
-        if (data.actions.get(EAction.Looking)) {
-            let width = canvas.clientWidth;
-            let height = canvas.clientHeight;
-            // Coordinate (0.0, 0.0) will be where the mouse was clicked.
-            let x = (data.mousePosCurrent.x - data.mousePosStart.x) / width;
-            let y = -(data.mousePosCurrent.y - data.mousePosStart.y) / height;
-            let lookFactor = 0.1;
-            camera.lookRight(x * lookFactor);
-            camera.lookUp(y * lookFactor);
-        }
-        let lookStep = 0.03;
-        if (data.actions.get(EAction.LookLeft)) {
-            camera.lookLeft(lookStep);
-        }
-        if (data.actions.get(EAction.LookRight)) {
-            camera.lookRight(lookStep);
+        Dispose() {
+            var _a, _b, _c;
+            (_a = this._postRenderRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this._moveStartRemoval) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_c = this._moveEndRemoval) === null || _c === void 0 ? void 0 : _c.call(this);
+            if (this._postMoveRecheckTimeout) {
+                clearTimeout(this._postMoveRecheckTimeout);
+                this._postMoveRecheckTimeout = null;
+            }
+            this._onSettle = null;
         }
-        if (data.actions.get(EAction.LookUp)) {
-            camera.lookUp(lookStep);
+        /**
+         * Called after camera movement settles (or immediately once) to trigger a forced hover
+         * recheck. Matches Navigator's `hoverRecheckRef`.
+         */
+        SetOnSettle(onSettle) {
+            this._onSettle = onSettle;
         }
-        if (data.actions.get(EAction.LookDown)) {
-            camera.lookDown(lookStep);
+        GetHoverDelayMs() {
+            return this._hoverDelayMs;
         }
-        if (data.actions.get(EAction.Up)) {
-            camera.moveUp(moveRate / 2);
+        IsSlowScene() {
+            return this._isSlowScene;
         }
-        if (data.actions.get(EAction.Down)) {
-            camera.moveDown(moveRate / 2);
+        IsCameraBusy() {
+            return this._isCameraMoving;
         }
-        if (camera.roll > 0) {
-            camera.twistLeft(camera.roll);
+        /**
+         * True if the scene hasn't rendered a new frame and the cursor is within a couple pixels
+         * of the last raycast, meaning a fresh raycast would return the same result.
+         */
+        ShouldSkipRaycast(x, y) {
+            if (!this._lastRaycast) {
+                return false;
+            }
+            const sceneUnchanged = this._lastRaycast.frame === this._renderFrameCount;
+            const dx = x - this._lastRaycast.x;
+            const dy = y - this._lastRaycast.y;
+            const cursorSettled = (dx * dx + dy * dy) <= (STALE_RAYCAST_DISTANCE_PX * STALE_RAYCAST_DISTANCE_PX);
+            return sceneUnchanged && cursorSettled;
         }
-        else if (camera.roll < 0) {
-            camera.twistRight(camera.roll * -1);
+        RecordRaycast(x, y) {
+            this._lastRaycast = { frame: this._renderFrameCount, x, y };
         }
-        // If movement type is fly use cesium movement methods
-        if (data.moveType == exports.Walkthrough.EMoveType.Fly) {
-            if (data.actions.get(EAction.Forward)) {
-                camera.moveForward(moveRate);
-            }
-            if (data.actions.get(EAction.Backward)) {
-                camera.moveBackward(moveRate);
-            }
-            if (data.actions.get(EAction.Left)) {
-                camera.moveLeft(moveRate);
-            }
-            if (data.actions.get(EAction.Right)) {
-                camera.moveRight(moveRate);
+        _setCameraMoving(moving) {
+            this._isCameraMoving = moving;
+            this._stillFrameCount = 0;
+            if (this._postMoveRecheckTimeout) {
+                clearTimeout(this._postMoveRecheckTimeout);
+                this._postMoveRecheckTimeout = null;
             }
         }
-        // If movement type is walk, calculate new position without affecting altitude
-        else {
-            if (data.actions.get(EAction.Left) ||
-                data.actions.get(EAction.Right) ||
-                data.actions.get(EAction.Forward) ||
-                data.actions.get(EAction.Backward)) {
-                const heading = getMovementHeading(viewer);
-                const pos = viewer.camera.positionCartographic;
-                const newPos = _offsetPoint({
-                    altitude: pos.height,
-                    latitude: Cesium.Math.toDegrees(pos.latitude),
-                    longitude: Cesium.Math.toDegrees(pos.longitude)
-                }, moveRate, heading);
-                camera.position = Cesium.Cartesian3.fromDegrees(newPos.longitude, newPos.latitude, newPos.altitude);
+        _settleCameraMovement() {
+            this._isCameraMoving = false;
+            if (this._postMoveRecheckTimeout) {
+                clearTimeout(this._postMoveRecheckTimeout);
             }
-        }
-        viewer.scene.requestRender();
-    }
-    /**
-     * Moves a given point by a given distance towards a heading.
-     * @param point in degrees.
-     * @param distance in meters.
-     * @param heading in degrees.
-     * @returns
-     */
-    function _offsetPoint(point, distance, heading) {
-        // Radius of earth.
-        const radius = 6371e3;
-        const δ = distance / radius;
-        const θ = Cesium.Math.toRadians(heading);
-        const φ1 = Cesium.Math.toRadians(point.latitude);
-        const λ1 = Cesium.Math.toRadians(point.longitude);
-        const sinφ2 = Math.sin(φ1) * Math.cos(δ) + Math.cos(φ1) * Math.sin(δ) * Math.cos(θ);
-        const φ2 = Math.asin(sinφ2);
-        const y = Math.sin(θ) * Math.sin(δ) * Math.cos(φ1);
-        const x = Math.cos(δ) - Math.sin(φ1) * sinφ2;
-        const λ2 = λ1 + Math.atan2(y, x);
-        return {
-            altitude: point.altitude,
-            latitude: Cesium.Math.toDegrees(φ2),
-            longitude: Cesium.Math.toDegrees(λ2)
-        };
-    }
-    /**
-     * Checks given keyboard key against keybinds and sets action accordingly.
-     * @param key
-     * @param keyDown
-     */
-    function checkKeybind(viewer, key, keyDown) {
-        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
-        if (!data) {
-            return;
-        }
-        key = key.toLowerCase();
-        if (key == "w") {
-            data.actions.set(EAction.Forward, keyDown);
-        }
-        else if (key == "s") {
-            data.actions.set(EAction.Backward, keyDown);
-        }
-        else if (key == "a") {
-            data.actions.set(EAction.Left, keyDown);
-        }
-        else if (key == "d") {
-            data.actions.set(EAction.Right, keyDown);
-        }
-        else if (key == "q") {
-            data.actions.set(EAction.Up, keyDown);
-        }
-        else if (key == "e") {
-            data.actions.set(EAction.Down, keyDown);
-        }
-        else if (key == "arrowup") {
-            data.actions.set(EAction.LookUp, keyDown);
-        }
-        else if (key == "arrowdown") {
-            data.actions.set(EAction.LookDown, keyDown);
-        }
-        else if (key == "arrowleft") {
-            data.actions.set(EAction.LookLeft, keyDown);
-        }
-        else if (key == "arrowright") {
-            data.actions.set(EAction.LookRight, keyDown);
-        }
-    }
-    (function (Walkthrough) {
-        let EMoveType;
-        (function (EMoveType) {
-            EMoveType["Walk"] = "WALK";
-            EMoveType["Fly"] = "FLY";
-        })(EMoveType = Walkthrough.EMoveType || (Walkthrough.EMoveType = {}));
-        function Start(params) {
-            Stop(params);
-            const viewer = params.viewer;
-            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY] = {
-                walkMoveRate: DEFAULT_WALK_MOVE_RATE,
-                flyMoveRate: DEFAULT_FLY_MOVE_RATE,
-                moveType: DEFAULT_MOVE_TYPE,
-                actions: new Map(),
-                ...viewer[VIEWER_WALKTHROUGH_DATA_KEY]
-            };
-            data.handlerScreenSpace = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
-            exports.ViewUtils.SetLockedCameraStatus({
-                viewer: viewer,
-                status: true
-            });
-            let lastCheck;
-            let currentTime = new Date();
-            const interval = setInterval(() => {
-                lastCheck = new Date();
-                if (lastCheck.getTime() - currentTime.getTime() >= (1000 / 60)) {
-                    doMovementTick(viewer);
-                    currentTime = new Date();
-                }
-            }, 1000 / 60);
-            data.tickRemoval = () => {
-                clearInterval(interval);
-            };
-            let keyDown = (e) => {
-                checkKeybind(viewer, e.key, true);
-            };
-            document.addEventListener("keydown", keyDown, false);
-            let keyUp = (e) => {
-                checkKeybind(viewer, e.key, false);
-            };
-            document.addEventListener("keyup", keyUp, false);
-            data.handlerKeysRemoval = () => {
-                document.removeEventListener("keydown", keyDown);
-                document.removeEventListener("keyup", keyUp);
-            };
-            data.handlerScreenSpace.setInputAction((e) => {
-                data.actions.set(EAction.Looking, true);
-                data.mousePosCurrent = data.mousePosStart = Cesium.Cartesian2.clone(e.position);
-            }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-            data.handlerScreenSpace.setInputAction(((e) => {
-                data.mousePosCurrent = e.endPosition;
-            }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-            data.handlerScreenSpace.setInputAction(() => {
-                data.actions.set(EAction.Looking, false);
-            }, Cesium.ScreenSpaceEventType.LEFT_UP);
-        }
-        Walkthrough.Start = Start;
-        function Stop(params) {
-            var _a, _b;
-            const viewer = params.viewer;
-            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
-            exports.ViewUtils.SetLockedCameraStatus({
-                viewer: viewer,
-                status: false
-            });
-            if (data) {
-                (_a = data.handlerScreenSpace) === null || _a === void 0 ? void 0 : _a.destroy();
-                data.handlerScreenSpace = null;
-                (_b = data.tickRemoval) === null || _b === void 0 ? void 0 : _b.call(data);
-                data.tickRemoval = null;
-                if (data.handlerKeysRemoval) {
-                    data.handlerKeysRemoval();
-                    data.handlerKeysRemoval = null;
-                }
+            this._postMoveRecheckTimeout = setTimeout(() => {
+                var _a;
+                this._postMoveRecheckTimeout = null;
+                (_a = this._onSettle) === null || _a === void 0 ? void 0 : _a.call(this);
+            }, POST_MOVE_RECHECK_DELAY_MS);
+        }
+        _onPostRender() {
+            this._renderFrameCount++;
+            // Cesium's own moveStart/moveEnd fire noticeably late, so we also independently detect
+            // camera movement by diffing position/direction between consecutive rendered frames.
+            const camera = this._viewer.camera;
+            if (this._lastCameraPos && this._lastCameraDir) {
+                const unchanged = Cesium.Cartesian3.equalsEpsilon(camera.positionWC, this._lastCameraPos, Cesium.Math.EPSILON7) &&
+                    Cesium.Cartesian3.equalsEpsilon(camera.directionWC, this._lastCameraDir, Cesium.Math.EPSILON7);
+                if (!unchanged) {
+                    this._setCameraMoving(true);
+                }
+                else if (this._isCameraMoving) {
+                    this._stillFrameCount++;
+                    if (this._stillFrameCount >= STILL_FRAMES_TO_SETTLE) {
+                        this._settleCameraMovement();
+                    }
+                }
+            }
+            this._lastCameraPos = camera.positionWC.clone();
+            this._lastCameraDir = camera.directionWC.clone();
+            this._updateFps();
+        }
+        _updateFps() {
+            const now = performance.now();
+            if (this._lastFrameTime != null) {
+                const dt = now - this._lastFrameTime;
+                if (dt > 0) {
+                    const instantFps = 1000 / dt;
+                    this._avgFps = this._avgFps == null ? instantFps : (this._avgFps * 0.9 + instantFps * 0.1);
+                }
+            }
+            this._lastFrameTime = now;
+            if (this._avgFps == null) {
+                return;
             }
-        }
-        Walkthrough.Stop = Stop;
-        function IsRunning(params) {
-            const viewer = params.viewer;
-            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
-            return (data === null || data === void 0 ? void 0 : data.handlerScreenSpace) != null;
-        }
-        Walkthrough.IsRunning = IsRunning;
-        function SetWalkMoveRate(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            if (data) {
-                data.walkMoveRate = params.rate;
+            // Hysteresis around the slow-scene threshold to avoid flip-flopping at the boundary.
+            if (!this._isSlowScene && this._avgFps < SLOW_SCENE_ENTER_FPS) {
+                this._isSlowScene = true;
             }
-        }
-        Walkthrough.SetWalkMoveRate = SetWalkMoveRate;
-        function SetMoveType(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            if (data) {
-                data.moveType = params.type;
+            else if (this._isSlowScene && this._avgFps > SLOW_SCENE_EXIT_FPS) {
+                this._isSlowScene = false;
             }
-        }
-        Walkthrough.SetMoveType = SetMoveType;
-        function GetWalkMoveRate(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            return data === null || data === void 0 ? void 0 : data.walkMoveRate;
-        }
-        Walkthrough.GetWalkMoveRate = GetWalkMoveRate;
-        function GetFlyMoveRate(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            return data === null || data === void 0 ? void 0 : data.flyMoveRate;
-        }
-        Walkthrough.GetFlyMoveRate = GetFlyMoveRate;
-        function SetFlyMoveRate(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            if (data) {
-                data.flyMoveRate = params.rate;
+            const targetDelay = this._avgFps < HOVER_DELAY_BRACKET_FPS_SLOW ? HOVER_DELAY_SLOW_MS :
+                this._avgFps < HOVER_DELAY_BRACKET_FPS_MID ? HOVER_DELAY_MID_MS :
+                    HOVER_DELAY_FAST_MS;
+            if (targetDelay !== this._hoverDelayMs && (now - this._lastDelaySwitchTime) > DELAY_SWITCH_MIN_INTERVAL_MS) {
+                this._hoverDelayMs = targetDelay;
+                this._lastDelaySwitchTime = now;
             }
         }
-        Walkthrough.SetFlyMoveRate = SetFlyMoveRate;
-        function GetMoveType(params) {
-            var _a;
-            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
-            return data === null || data === void 0 ? void 0 : data.moveType;
-        }
-        Walkthrough.GetMoveType = GetMoveType;
-    })(exports.Walkthrough || (exports.Walkthrough = {}));
+    }
 
     var ECursor;
     (function (ECursor) {
         ECursor["Select"] = "select";
         ECursor["Pan"] = "pan";
         ECursor["Measure"] = "measure";
-        ECursor["Walkthrough"] = "walkthrough";
     })(ECursor || (ECursor = {}));
     var ESecondaryCursor;
     (function (ESecondaryCursor) {
@@ -28762,13 +28629,7 @@
         ESecondaryCursor["MeasurePoint"] = "measure-point";
         ESecondaryCursor["MeasurePolyline"] = "measure-polyline";
         ESecondaryCursor["MeasurePolygon"] = "measure-polygon";
-        ESecondaryCursor["WalkthroughPin"] = "walkthrough-pin";
     })(ESecondaryCursor || (ESecondaryCursor = {}));
-    const KEY_WALKTHROUGH_MODE = "WidgetCursorBar.Walkthrough.Mode";
-    const KEY_WALKTHROUGH_SPEED_FLY = "WidgetCursorBar.Walkthrough.SpeedFly";
-    const KEY_WALKTHROUGH_SPEED_WALK = "WidgetCursorBar.Walkthrough.SpeedWalk";
-    const KEY_WALKTHROUGH_EXPANDED = "WidgetCursorBar.Walkthrough.Expanded";
-    const VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM = "--viewer-walkthrough-panel-bottom";
     class WidgetCursorBar extends exports.Widget.AWidget {
         constructor(params) {
             super(params);
@@ -28781,22 +28642,15 @@
             if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
                 this._listenSelection();
             }
-            document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, "0px");
         }
         Dispose() {
-            var _a, _b, _c;
+            var _a, _b;
             super.Dispose();
             this._disposeMeasureTool();
             this._disposeCesiumEvent();
-            this._disposeWalkthroughBar();
             if ((_b = (_a = this._viewer) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.style.cursor) {
                 this._viewer.canvas.style.removeProperty("cursor");
             }
-            if (((_c = this._viewer) === null || _c === void 0 ? void 0 : _c.scene) && !this._viewer.isDestroyed()) {
-                exports.Walkthrough.Stop({
-                    viewer: this._viewer
-                });
-            }
         }
         _generateStyles() {
             if (document.getElementById(this.STYLESHEET_ID)) {
@@ -28819,7 +28673,6 @@
                 box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
-                overflow: hidden;
                 pointer-events: none;
                 color: black;
             }
@@ -28837,9 +28690,13 @@
 
             .NextspaceCursorBarPrimContent {
                 align-items: center;
-                background-color: #21272a;
+                background: rgba(33, 39, 42, 0.8);
+                -webkit-backdrop-filter: blur(20px);
+                backdrop-filter: blur(20px);
+                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.36), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
                 border-radius: 9px;
                 display: flex;
+                height: 44px;
                 pointer-events: auto;
                 width: -webkit-max-content;
                 width: max-content;
@@ -28855,21 +28712,18 @@
                 border-radius: 0;
                 display: flex;
                 height: 100%;
-                height: -webkit-max-content;
-                height: max-content;
                 justify-content: center;
-                padding: 8px;
-                padding-left: 8px;
+                padding: 6px 4px;
             }
 
             .NextspaceCursorBarPrimControl:first-of-type .NextspaceCursorBarPrimControlInner {
                 border-radius: 9px 0 0 9px;
-                padding-left: 8px;
+                padding-left: 4px;
             }
 
             .NextspaceCursorBarPrimControl:last-of-type .NextspaceCursorBarPrimControlInner {
                 border-radius: 0 9px 9px 0;
-                padding-right: 8px;
+                padding-right: 4px;
             }
 
             .NextspaceCursorBarPrimControl:first-of-type:last-of-type .NextspaceCursorBarPrimControlInner {
@@ -28895,6 +28749,7 @@
 
             .NextspaceCursorBarPrimControlInner[is-selected="true"] {
                 background: #33b1ff;
+                box-shadow: inset 0 2px 0 0 #64c4ff;
             }
 
             .NextspaceCursorBarSec {
@@ -28925,8 +28780,7 @@
                 height: -webkit-max-content;
                 height: max-content;
                 justify-content: center;
-                padding: 8px;
-                padding-left: 8px;
+                padding: 6px;
                 border: 2px solid transparent;
                 flex-shrink: 0;
                 margin: 6px 0 6px 6px;
@@ -28944,7 +28798,7 @@
             }
 
             .NextspaceCursorBarSecControl:first-of-type {
-                padding-left: 8px;
+                padding-left: 6px;
             }
             
             .NextspaceCursorBarSecControlIcon {
@@ -28965,165 +28819,6 @@
                 transform: scale(1.2);
             }
 
-            .NextspaceWalkthroughBar {
-                position: absolute;
-                z-index: 1;
-                bottom: 10px;
-                left: calc(45px + var(${VIEWER_LEFT_PANEL_CSS_VAR_LEFT}));
-                width: min(1100px, calc(100vw - 205px));
-                box-sizing: border-box;
-                display: flex;
-                flex-direction: column;
-                pointer-events: auto;
-                font-size: 12px;
-                font-family: Arial;
-                transition: 0.3s ease;
-            }
-
-            .NextspaceWalkthroughBar * {
-                box-sizing: border-box;
-            }
-
-            .NextspaceWalkthroughBar[expanded="false"] {
-                width: 395px;
-            }
-
-            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarInputs {
-                flex-direction: row;
-                margin-right: 0;
-            }
-
-            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarRow {
-                margin-right: 25px;
-                margin-bottom: 0;
-            }
-
-            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarRowTip,
-            .NextspaceWalkthroughBar[expanded="false"] .NextspaceWalkthroughBarTips  {
-                display: none;
-            }
-
-            .NextspaceWalkthroughBarContent {
-                background-color: white;
-                border-radius: 8px;
-                display: flex;
-                flex-direction: row;
-                padding: 14px 18px;
-                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.36), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
-            }
-
-            .NextspaceWalkthroughBarTitle {
-                opacity: 0.7;
-                color: white;
-                font-size: 12px;
-                font-family: Arial;
-                font-style: normal;
-                letter-spacing: 0.15em;
-                margin-bottom: 15px;
-                position: absolute;
-                top: -15px;
-                left: 5px;
-            }
-
-            .NextspaceWalkthroughBarInputs {
-                display: flex;
-                flex-direction: column;
-                margin-right: 40px;
-            }
-
-            .NextspaceWalkthroughBarRowTip {
-                color: #000;
-                font-family: Arial;
-                font-size: 12px;
-                font-style: normal;
-                font-weight: 300;
-                letter-spacing: .01em;
-                background: #efefefbf;
-                padding: 8px;
-                gap: 6px;
-                border-radius: 5px;
-            }
-
-            .NextspaceWalkthroughBarRow {
-                align-items: center;
-                display: flex;
-                margin-bottom: 5px;
-            }
-
-            .NextspaceWalkthroughBarInputs .NextspaceWalkthroughBarRow {
-                margin-right: 20px;
-            }
-
-            .NextspaceWalkthroughBarRowLabel {
-                margin-right: 8px;
-                flex-shrink: 0;
-            }
-
-            .NextspaceWalkthroughBarRowValue {
-                flex-grow: 1;
-                max-width: 120px;
-            }
-
-            .NextspaceWalkthroughBarRowValue input {
-                width: 100%;
-                padding: 4px;
-                border: 1px solid #ccc;
-                border-radius: 4px;
-            }
-
-            .NextspaceWalkthroughBarIcon {
-                margin-right: 20px;
-                flex-shrink: 0;
-            }
-
-            .NextspaceWalkthroughButtonClose {
-                position: absolute;
-                top: 6px;
-                right: 8px;
-                z-index: 1;
-                font-size: 25px;
-                color: black;
-                cursor: pointer;
-                transition: 0.3s ease;
-            }
-
-            .NextspaceWalkthroughButtonExpand {
-                position: absolute;
-                top: 6px;
-                right: 40px;
-                z-index: 1;
-                font-size: 25px;
-                color: black;
-                cursor: pointer;
-                transition: 0.3s ease;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 24px;
-                width: 24px;
-            }
-
-            .NextspaceWalkthroughButtonClose:hover,
-            .NextspaceWalkthroughButtonExpand:hover {
-                transform: scale(1.2);
-            }
-
-            .NextspaceWalkthroughBarTips {
-                flex-grow: 1;
-                flex-shrink: 1;
-                display: flex;
-                color: black;
-                font-size: 12px;
-                font-family: Arial;
-            }
-
-            .NextspaceWalkthroughBarTips >* {
-                margin-right: 24px;
-            }
-
-            .NextspaceWalkthroughBarTips >*:last-child {
-                margin-right: 0;
-            }
         `;
             document.head.appendChild(style);
         }
@@ -29149,7 +28844,6 @@
             this._generateSelect();
             this._generatePan();
             this._generateMeasure();
-            this._generateWalkthrough();
             this._updateControls();
             this.Container.appendChild(element);
             this._element = element;
@@ -29168,16 +28862,8 @@
         `;
             div.appendChild(inner);
             inner.addEventListener("click", () => {
-                var _a;
                 this._disposeMeasureTool();
                 this._disposeCesiumEvent();
-                this._disposeWalkthroughBar();
-                if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
-                    exports.Walkthrough.Stop({
-                        viewer: this._viewer
-                    });
-                }
-                this._disposeWalkthroughBar();
                 onClick();
                 this._updateControls();
             });
@@ -29307,473 +28993,6 @@
                 this._enabledMeasureTool.Start();
             }, polygonSvg);
         }
-        _generateWalkthrough() {
-            const svg = `
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M17.5033 4C16.8406 4 16.205 4.26339 15.7364 4.73223C15.2678 5.20107 15.0045 5.83696 15.0045 6.5C15.0045 7.16304 15.2678 7.79893 15.7364 8.26777C16.205 8.73661 16.8406 9 17.5033 9C18.166 9 18.8015 8.73661 19.2701 8.26777C19.7388 7.79893 20.002 7.16304 20.002 6.5C20.002 5.83696 19.7388 5.20107 19.2701 4.73223C18.8015 4.26339 18.166 4 17.5033 4ZM15.5023 10C15.1066 10 14.7378 10.1015 14.4052 10.2656C14.3549 10.2813 14.306 10.3009 14.2588 10.3242L10.3448 12.1992C10.1322 12.3003 9.96216 12.4733 9.86453 12.6875L8.09784 16.5859C8.0405 16.7059 8.00764 16.836 8.00118 16.9688C7.99472 17.1016 8.01479 17.2344 8.06021 17.3593C8.10563 17.4843 8.1755 17.5989 8.26572 17.6965C8.35594 17.7941 8.46471 17.8727 8.58567 17.9278C8.70662 17.9828 8.83733 18.0132 8.97016 18.0171C9.10299 18.0211 9.23526 17.9984 9.35924 17.9506C9.48323 17.9028 9.59644 17.8307 9.69225 17.7386C9.78806 17.6464 9.86454 17.5361 9.91724 17.4141L11.3638 14.2246L12.658 13.8359C12.3918 15.2411 12.0603 16.9816 12.0587 16.9902C12.0583 16.9923 12.0572 16.994 12.0568 16.9961C12.0568 16.9961 12.0568 17 12.0568 17C12.024 17.1615 12.006 17.3288 12.006 17.5C12.006 18.271 12.3631 18.9514 12.9118 19.4102L12.9196 19.4336L16.8103 22.5L17.923 26.6953L18.0225 27.1953C18.0677 27.4221 18.19 27.6263 18.3687 27.773C18.5474 27.9197 18.7714 27.9999 19.0025 28C19.2676 28 19.5218 27.8946 19.7093 27.7071C19.8967 27.5196 20.002 27.2652 20.002 27C20.0019 26.9344 19.9954 26.869 19.9825 26.8047V26.8008C19.9812 26.7969 19.9799 26.793 19.9786 26.7891L18.983 21.8047C18.9562 21.6693 18.9017 21.541 18.8229 21.4277L16.9528 18.0039C16.9546 17.9951 16.953 17.9854 16.9547 17.9766L17.9366 13.0625L17.9347 13.0605C17.9762 12.8798 18.003 12.6933 18.003 12.5C18.003 11.1207 16.8837 10.0011 15.5023 10ZM19.3871 13.7422L18.9186 16.0078L19.3344 16.3809C19.4093 16.4489 19.4962 16.5059 19.5882 16.5469L22.5866 17.9102V17.9082C22.7165 17.9681 22.8576 17.9994 23.0005 18C23.2656 18 23.5198 17.8946 23.7073 17.7071C23.8947 17.5196 24 17.2652 24 17C23.9996 16.8084 23.9442 16.6209 23.8404 16.4599C23.7366 16.2989 23.5887 16.1711 23.4144 16.0918V16.0898L20.5545 14.7891L19.3871 13.7422ZM11.9631 20.7246L11.4497 22.4219L9.22228 26.3613L9.1481 26.4863L9.15005 26.4883C9.13825 26.5087 9.12718 26.5296 9.11686 26.5508L9.10905 26.5625C9.0425 26.6987 9.00778 26.8484 9.00754 27C9.00754 27.2652 9.11285 27.5196 9.30029 27.7071C9.48773 27.8946 9.74195 28 10.007 28C10.1647 27.9999 10.3201 27.9626 10.4606 27.891C10.601 27.8193 10.7225 27.7155 10.8152 27.5879H10.8172L10.8328 27.5645C10.8334 27.5632 10.8341 27.5618 10.8347 27.5605L14.1592 22.5117L11.9631 20.7246Z" fill="white"/>
-            </svg>
-        `;
-            this._generateControl("Walkthrough", ECursor.Walkthrough, () => {
-                var _a;
-                this._selectedSecondaryCursor = ESecondaryCursor.Select;
-                this._selectedCursor = this._selectedCursor == ECursor.Walkthrough ? ECursor.Select : ECursor.Walkthrough;
-                if (this._selectedCursor == ECursor.Walkthrough) {
-                    this._generateWalkthroughSecondary();
-                    this._updateSecondary();
-                    if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
-                        exports.Walkthrough.Start({
-                            viewer: this._viewer
-                        });
-                        let moveType = localStorage.getItem(KEY_WALKTHROUGH_MODE);
-                        if (!moveType) {
-                            moveType = exports.Walkthrough.EMoveType.Walk;
-                        }
-                        exports.Walkthrough.SetMoveType({
-                            type: moveType,
-                            viewer: this._viewer
-                        });
-                        let speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_FLY);
-                        if (speed != null && !isNaN(+speed)) {
-                            exports.Walkthrough.SetFlyMoveRate({
-                                rate: +speed,
-                                viewer: this._viewer
-                            });
-                        }
-                        speed = localStorage.getItem(KEY_WALKTHROUGH_SPEED_WALK);
-                        if (speed != null && !isNaN(+speed)) {
-                            exports.Walkthrough.SetWalkMoveRate({
-                                rate: +speed,
-                                viewer: this._viewer
-                            });
-                        }
-                    }
-                    this._generateWalkthroughBar();
-                }
-                else {
-                    this._secondary.style.display = "none";
-                }
-                if (this._selectedCursor == ECursor.Select || this._selectedSecondaryCursor == ESecondaryCursor.Select) {
-                    this._listenSelection();
-                }
-                this.OnCursorChange.Trigger(this._selectedCursor);
-            }, svg);
-        }
-        _generateWalkthroughSecondary() {
-            this._secondaryContent.innerHTML = "";
-            this._secondary.style.display = "flex";
-            const selectSvg = `
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M11.0706 25L9 7L23 17.8592L15.3135 18.3375L11.0706 25Z" fill="white" stroke="white" strokeLinejoin="round"/>
-            </svg>
-        `;
-            this._generateSecondaryControl("Select", ESecondaryCursor.Select, () => {
-                if (this._walkthroughPinEventRemoval) {
-                    this._walkthroughPinEventRemoval();
-                    this._walkthroughPinEventRemoval = null;
-                }
-                this._selectedSecondaryCursor = ESecondaryCursor.Select;
-                this._listenSelection();
-            }, selectSvg);
-            const panSvg = `
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M15.5652 6C14.9172 6 14.3913 6.51692 14.3913 7.15385V14.4615H13.6087V8.69231C13.6087 8.05538 13.0828 7.53846 12.4348 7.53846C11.7868 7.53846 11.2609 8.05538 11.2609 8.69231V14.4615V16.7692V19.6734C11.2609 19.6734 9.0069 18.2402 7.87211 17.7548C7.55594 17.6194 7.22575 17.5385 6.89079 17.5385C5.1401 17.5385 5 19.0769 5 19.0769L8.13043 21.3846L10.6357 24.3398C11.5279 25.3922 12.85 26 14.243 26H19.8696C21.5983 26 23 24.6223 23 22.9231V14.4615V11C23 10.3631 22.4741 9.84615 21.8261 9.84615C21.1781 9.84615 20.6522 10.3631 20.6522 11V14.4615H19.8696V8.69231C19.8696 8.05538 19.3437 7.53846 18.6957 7.53846C18.0477 7.53846 17.5217 8.05538 17.5217 8.69231V14.4615H16.7391V7.15385C16.7391 6.51692 16.2132 6 15.5652 6Z" fill="white"/>
-            </svg>
-        `;
-            this._generateSecondaryControl("Pan", ESecondaryCursor.Pan, () => {
-                if (this._walkthroughPinEventRemoval) {
-                    this._walkthroughPinEventRemoval();
-                    this._walkthroughPinEventRemoval = null;
-                }
-                if (this._selectedSecondaryCursor == ESecondaryCursor.Pan) {
-                    this._selectedSecondaryCursor = ESecondaryCursor.Select;
-                    this._listenSelection();
-                }
-                else {
-                    this._selectedSecondaryCursor = ESecondaryCursor.Pan;
-                }
-                this._updateSecondary();
-            }, panSvg);
-            const pinSvg = `
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6 20H18C18.55 20 19 20.45 19 21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21C5 20.45 5.45 20 6 20ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 2C15.27 2 19 4.46 19 9.15C19 12.13 16.87 15.27 12.61 18.54C12.25 18.82 11.75 18.82 11.39 18.54C7.13 15.26 5 12.13 5 9.15C5 4.46 8.73 2 12 2Z" fill="white"/>
-            </svg>
-        `;
-            this._generateSecondaryControl("Move to point", ESecondaryCursor.WalkthroughPin, () => {
-                if (this._selectedSecondaryCursor == ESecondaryCursor.WalkthroughPin) {
-                    this._selectedSecondaryCursor = ESecondaryCursor.Select;
-                    this._listenSelection();
-                }
-                else {
-                    this._selectedSecondaryCursor = ESecondaryCursor.WalkthroughPin;
-                    this._initWalkthroughPin();
-                }
-                this._updateSecondary();
-            }, pinSvg);
-        }
-        _initWalkthroughPin() {
-            if (this._walkthroughPinEventRemoval) {
-                this._walkthroughPinEventRemoval();
-                this._walkthroughPinEventRemoval = null;
-            }
-            let pointer;
-            let events = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
-            this._walkthroughPinEventRemoval = () => {
-                var _a;
-                if (events && !events.isDestroyed()) {
-                    events.destroy();
-                    events = null;
-                }
-                if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.scene.isDestroyed()) {
-                    if (pointer && this._viewer.entities.contains(pointer)) {
-                        this._viewer.entities.remove(pointer);
-                    }
-                    pointer = null;
-                    this._viewer.scene.requestRender();
-                }
-            };
-            let dropPosition3d;
-            let dropOnTerrain = false;
-            events.setInputAction((e) => {
-                const pos2d = e.endPosition;
-                // First try find a position on a 'thing'.
-                // This lets us put our pin underground if there is something there.
-                let pos3d = exports.DrawingUtils.GetAccuratePosition(this._viewer, pos2d, true, pointer ? [pointer] : null);
-                dropOnTerrain = false;
-                // Fallback to position including terrain as an option.
-                if (!BModels.Cartes.ValidateCartes3(pos3d)) {
-                    pos3d = exports.DrawingUtils.GetAccuratePosition(this._viewer, pos2d, false, pointer ? [pointer] : null);
-                    dropOnTerrain = true;
-                }
-                if (BModels.Cartes.ValidateCartes3(pos3d)) {
-                    dropPosition3d = pos3d;
-                }
-            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-            let processing = false;
-            events.setInputAction(async (e) => {
-                if (processing) {
-                    return;
-                }
-                processing = true;
-                try {
-                    if (!BModels.Cartes.ValidateCartes3(dropPosition3d) && e.position) {
-                        // First try find a position on a 'thing'.
-                        // This lets us put our pin underground if there is something there.
-                        let pos3d = exports.DrawingUtils.GetAccuratePosition(this._viewer, e.position, true);
-                        dropOnTerrain = false;
-                        // Fallback to position including terrain as an option.
-                        if (!BModels.Cartes.ValidateCartes3(pos3d)) {
-                            pos3d = exports.DrawingUtils.GetAccuratePosition(this._viewer, e.position, false);
-                            dropOnTerrain = true;
-                        }
-                        dropPosition3d = pos3d;
-                    }
-                    let pos3d = dropPosition3d === null || dropPosition3d === void 0 ? void 0 : dropPosition3d.clone();
-                    if (BModels.Cartes.ValidateCartes3(pos3d)) {
-                        const carto = Cesium.Cartographic.fromCartesian(pos3d);
-                        // If we can raycast to something then we won't adjust above terrain.
-                        // Eg: we clicked on an Entity so if it's underground, that's likely intended.
-                        if (dropOnTerrain) {
-                            const terrainCarto = carto.clone();
-                            terrainCarto.height = 0;
-                            if (this._viewer.scene.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) ;
-                            else {
-                                const sample = await Cesium.sampleTerrainMostDetailed(this._viewer.scene.terrainProvider, [terrainCarto]);
-                                const terrainHeight = (sample === null || sample === void 0 ? void 0 : sample.length) ? sample[0].height : null;
-                                if (terrainHeight != null) {
-                                    if (carto.height < terrainHeight) {
-                                        carto.height = terrainHeight;
-                                    }
-                                }
-                            }
-                        }
-                        // Add average human height.
-                        carto.height += 1.7;
-                        pos3d = Cesium.Cartesian3.fromRadians(carto.longitude, carto.latitude, carto.height);
-                        this._viewer.camera.flyTo({
-                            destination: pos3d,
-                            duration: 2,
-                            orientation: {
-                                heading: this._viewer.camera.heading,
-                                pitch: Cesium.Math.toRadians(0),
-                                roll: Cesium.Math.toRadians(0)
-                            }
-                        });
-                        // Disable this picking cursor.
-                        this._selectedSecondaryCursor = ESecondaryCursor.Select;
-                        this._listenSelection();
-                        this._updateSecondary();
-                        if (this._walkthroughPinEventRemoval) {
-                            this._walkthroughPinEventRemoval();
-                            this._walkthroughPinEventRemoval = null;
-                        }
-                    }
-                }
-                catch (e) {
-                    console.error(e);
-                }
-                processing = false;
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-        }
-        /**
-         * Generates the Walkthrough controls bar at the bottom of the screen.
-         * This bar will be collapsable to show minimal information.
-         * A TODO is to break this class into pieces similar the ViewBar.
-         */
-        _generateWalkthroughBar() {
-            this._disposeWalkthroughBar();
-            const element = document.createElement("div");
-            element.className = "NextspaceWalkthroughBar";
-            this.Container.appendChild(element);
-            const content = document.createElement("div");
-            content.className = "NextspaceWalkthroughBarContent";
-            element.appendChild(content);
-            const inputs = document.createElement("div");
-            inputs.className = "NextspaceWalkthroughBarInputs";
-            inputs.style.marginRight = "40px";
-            const title = document.createElement("div");
-            title.className = "NextspaceWalkthroughBarTitle";
-            title.innerText = "Walkthrough";
-            inputs.appendChild(title);
-            // Expanded by default to show how to use Walkthrough.
-            let expanded = localStorage.getItem(KEY_WALKTHROUGH_EXPANDED) != "false";
-            // Close button.
-            {
-                const svg = `
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M18.3002 5.70973C17.9102 5.31973 17.2802 5.31973 16.8902 5.70973L12.0002 10.5897L7.11022 5.69973C6.72022 5.30973 6.09021 5.30973 5.70021 5.69973C5.31021 6.08973 5.31021 6.71973 5.70021 7.10973L10.5902 11.9997L5.70021 16.8897C5.31021 17.2797 5.31021 17.9097 5.70021 18.2997C6.09021 18.6897 6.72022 18.6897 7.11022 18.2997L12.0002 13.4097L16.8902 18.2997C17.2802 18.6897 17.9102 18.6897 18.3002 18.2997C18.6902 17.9097 18.6902 17.2797 18.3002 16.8897L13.4102 11.9997L18.3002 7.10973C18.6802 6.72973 18.6802 6.08973 18.3002 5.70973Z" fill="black"/>
-                </svg>
-            `;
-                const close = document.createElement("div");
-                close.className = "NextspaceWalkthroughButtonClose";
-                close.innerHTML = svg;
-                close.onclick = () => {
-                    var _a;
-                    // Toggles off the Walkthrough mode (enables first primary cursor).
-                    // TODO: We need a more elegant way to handle this.
-                    this._secondary.style.display = "none";
-                    this._selectedCursor = ECursor.Select;
-                    this._selectedSecondaryCursor = ESecondaryCursor.None;
-                    this._updateControls();
-                    this._updateSecondary();
-                    this._disposeWalkthroughBar();
-                    this._listenSelection();
-                    if (((_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene) && !this._viewer.isDestroyed()) {
-                        exports.Walkthrough.Stop({
-                            viewer: this._viewer
-                        });
-                    }
-                    this.OnCursorChange.Trigger(this._selectedCursor);
-                };
-                content.appendChild(close);
-            }
-            // Toggle expand button.
-            {
-                const svgExpand = `
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M6 14C5.45 14 5 14.45 5 15V18C5 18.55 5.45 19 6 19H9C9.55 19 10 18.55 10 18C10 17.45 9.55 17 9 17H7V15C7 14.45 6.55 14 6 14ZM6 10C6.55 10 7 9.55 7 9V7H9C9.55 7 10 6.55 10 6C10 5.45 9.55 5 9 5H6C5.45 5 5 5.45 5 6V9C5 9.55 5.45 10 6 10ZM17 17H15C14.45 17 14 17.45 14 18C14 18.55 14.45 19 15 19H18C18.55 19 19 18.55 19 18V15C19 14.45 18.55 14 18 14C17.45 14 17 14.45 17 15V17ZM14 6C14 6.55 14.45 7 15 7H17V9C17 9.55 17.45 10 18 10C18.55 10 19 9.55 19 9V6C19 5.45 18.55 5 18 5H15C14.45 5 14 5.45 14 6Z" fill="black"/>
-                </svg>
-            `;
-                const svgMinimize = `
-                <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M15 1L1 0.999999" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-            `;
-                const heightCollapsed = "70px";
-                const heightExpanded = "150px";
-                const expand = document.createElement("div");
-                expand.className = "NextspaceWalkthroughButtonExpand";
-                expand.innerHTML = expanded ? svgMinimize : svgExpand;
-                expand.onclick = () => {
-                    expanded = !expanded;
-                    expand.innerHTML = expanded ? svgMinimize : svgExpand;
-                    element.setAttribute("expanded", expanded ? "true" : "false");
-                    localStorage.setItem(KEY_WALKTHROUGH_EXPANDED, expanded ? "true" : "false");
-                    document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, expanded ? heightExpanded : heightCollapsed);
-                };
-                content.appendChild(expand);
-                element.setAttribute("expanded", expanded ? "true" : "false");
-                document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, expanded ? heightExpanded : heightCollapsed);
-            }
-            content.appendChild(inputs);
-            const tips = document.createElement("div");
-            tips.className = "NextspaceWalkthroughBarTips";
-            {
-                const wasd = document.createElement("div");
-                wasd.setAttribute("style", `
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-            `);
-                const wasdSvg = `
-                <svg width="132" height="87" viewBox="0 0 188 124" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="128" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M88.2841 39L83.5114 21.5455H85.6591L89.3068 35.7614H89.4773L93.1932 21.5455H95.5795L99.2955 35.7614H99.4659L103.114 21.5455H105.261L100.489 39H98.3068L94.4545 25.0909H94.3182L90.4659 39H88.2841Z" fill="#525252"></path><path d="M24.8295 103H22.6136L29.0227 85.5455H31.2045L37.6136 103H35.3977L30.1818 88.3068H30.0455L24.8295 103ZM25.6477 96.1818H34.5795V98.0568H25.6477V96.1818Z" fill="#525252"></path><path d="M97.6591 89.9091C97.5568 89.0455 97.142 88.375 96.4148 87.8977C95.6875 87.4205 94.7955 87.1818 93.7386 87.1818C92.9659 87.1818 92.2898 87.3068 91.7102 87.5568C91.1364 87.8068 90.6875 88.1506 90.3636 88.5881C90.0455 89.0256 89.8864 89.5227 89.8864 90.0795C89.8864 90.5455 89.9972 90.946 90.2188 91.2812C90.446 91.6108 90.7358 91.8864 91.0881 92.108C91.4403 92.3239 91.8097 92.5028 92.196 92.6449C92.5824 92.7812 92.9375 92.892 93.2614 92.9773L95.0341 93.4545C95.4886 93.5739 95.9943 93.7386 96.5511 93.9489C97.1136 94.1591 97.6506 94.446 98.1619 94.8097C98.679 95.1676 99.1051 95.6278 99.4403 96.1903C99.7756 96.7528 99.9432 97.4432 99.9432 98.2614C99.9432 99.2045 99.696 100.057 99.2017 100.818C98.7131 101.58 97.9972 102.185 97.054 102.634C96.1165 103.082 94.9773 103.307 93.6364 103.307C92.3864 103.307 91.304 103.105 90.3892 102.702C89.4801 102.298 88.7642 101.736 88.2415 101.014C87.7244 100.293 87.4318 99.4545 87.3636 98.5H89.5455C89.6023 99.1591 89.8239 99.7045 90.2102 100.136C90.6023 100.562 91.0966 100.881 91.6932 101.091C92.2955 101.295 92.9432 101.398 93.6364 101.398C94.4432 101.398 95.1676 101.267 95.8097 101.006C96.4517 100.739 96.9602 100.369 97.3352 99.8977C97.7102 99.4205 97.8977 98.8636 97.8977 98.2273C97.8977 97.6477 97.7358 97.1761 97.4119 96.8125C97.0881 96.4489 96.6619 96.1534 96.1335 95.9261C95.6051 95.6989 95.0341 95.5 94.4205 95.3295L92.2727 94.7159C90.9091 94.3239 89.8295 93.7642 89.0341 93.0369C88.2386 92.3097 87.8409 91.358 87.8409 90.1818C87.8409 89.2045 88.1051 88.3523 88.6335 87.625C89.1676 86.892 89.8835 86.3239 90.7812 85.9205C91.6847 85.5114 92.6932 85.3068 93.8068 85.3068C94.9318 85.3068 95.9318 85.5085 96.8068 85.9119C97.6818 86.3097 98.375 86.8551 98.8864 87.5483C99.4034 88.2415 99.6761 89.0284 99.7045 89.9091H97.6591Z" fill="#525252"></path><path d="M157.5 103H152.114V85.5455H157.739C159.432 85.5455 160.881 85.8949 162.085 86.5938C163.29 87.2869 164.213 88.2841 164.855 89.5852C165.497 90.8807 165.818 92.4318 165.818 94.2386C165.818 96.0568 165.494 97.6222 164.847 98.9347C164.199 100.241 163.256 101.247 162.017 101.952C160.778 102.651 159.273 103 157.5 103ZM154.227 101.125H157.364C158.807 101.125 160.003 100.847 160.952 100.29C161.901 99.733 162.608 98.9403 163.074 97.9119C163.54 96.8835 163.773 95.6591 163.773 94.2386C163.773 92.8295 163.543 91.6165 163.082 90.5994C162.622 89.5767 161.935 88.7926 161.02 88.2472C160.105 87.696 158.966 87.4205 157.602 87.4205H154.227V101.125Z" fill="#525252"></path></svg>
-            `;
-                wasd.innerHTML = wasdSvg;
-                wasd.innerHTML += `
-                <div style="margin-top: 5px;">
-                    Click W,A,S,D on your keyboard to move your camera.
-                </div>
-            `;
-                tips.appendChild(wasd);
-                const arrows = document.createElement("div");
-                arrows.setAttribute("style", `
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-            `);
-                const arrowsSvg = `
-                <svg width="132" height="87" viewBox="0 0 188 124" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="128" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect x="64" y="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M95.2503 38.75V24.7875L101.35 30.8875C101.838 31.375 102.638 31.375 103.125 30.8875C103.613 30.4 103.613 29.6125 103.125 29.125L94.8878 20.8875C94.4003 20.4 93.6128 20.4 93.1253 20.8875L84.8753 29.1125C84.3878 29.6 84.3878 30.3875 84.8753 30.875C85.3628 31.3625 86.1503 31.3625 86.6378 30.875L92.7503 24.7875V38.75C92.7503 39.4375 93.3128 40 94.0003 40C94.6878 40 95.2503 39.4375 95.2503 38.75Z" fill="#525252"></path><path d="M38.75 92.7497H24.7875L30.8875 86.6497C31.375 86.1622 31.375 85.3622 30.8875 84.8747C30.4 84.3872 29.6125 84.3872 29.125 84.8747L20.8875 93.1122C20.4 93.5997 20.4 94.3872 20.8875 94.8747L29.1125 103.125C29.6 103.612 30.3875 103.612 30.875 103.125C31.3625 102.637 31.3625 101.85 30.875 101.362L24.7875 95.2497H38.75C39.4375 95.2497 40 94.6872 40 93.9997C40 93.3122 39.4375 92.7497 38.75 92.7497Z" fill="#525252"></path><path d="M150.25 95.2503H164.213L158.113 101.35C157.625 101.838 157.625 102.638 158.113 103.125C158.6 103.613 159.388 103.613 159.875 103.125L168.113 94.8878C168.6 94.4003 168.6 93.6128 168.113 93.1253L159.888 84.8753C159.4 84.3878 158.613 84.3878 158.125 84.8753C157.638 85.3628 157.638 86.1503 158.125 86.6378L164.213 92.7503H150.25C149.563 92.7503 149 93.3128 149 94.0003C149 94.6878 149.563 95.2503 150.25 95.2503Z" fill="#525252"></path><path d="M92.7497 85.25V99.2125L86.6497 93.1125C86.1622 92.625 85.3622 92.625 84.8747 93.1125C84.3872 93.6 84.3872 94.3875 84.8747 94.875L93.1122 103.113C93.5997 103.6 94.3872 103.6 94.8747 103.113L103.125 94.8875C103.612 94.4 103.612 93.6125 103.125 93.125C102.637 92.6375 101.85 92.6375 101.362 93.125L95.2497 99.2125V85.25C95.2497 84.5625 94.6872 84 93.9997 84C93.3122 84 92.7497 84.5625 92.7497 85.25Z" fill="#525252"></path></svg>
-            `;
-                arrows.innerHTML = arrowsSvg;
-                arrows.innerHTML += `
-                <div style="margin-top: 5px;">
-                    Click the arrow keys to pan.
-                </div>
-            `;
-                tips.appendChild(arrows);
-                const upDown = document.createElement("div");
-                upDown.setAttribute("style", `
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-end;
-            `);
-                const upDownSvg = `
-                <svg width="87" height="42" viewBox="0 0 124 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="64" width="60" height="60" rx="6" fill="#ebebeb"></rect><rect width="60" height="60" rx="6" fill="#ebebeb"></rect><path d="M29.4545 33.5455H31.7727L33.7159 36.1023L34.2273 36.7841L37.125 40.6364H34.8068L32.8977 38.0795L32.4205 37.4318L29.4545 33.5455ZM37.8409 30.2727C37.8409 32.1136 37.5085 33.7045 36.8438 35.0455C36.179 36.3864 35.267 37.4205 34.108 38.1477C32.9489 38.875 31.625 39.2386 30.1364 39.2386C28.6477 39.2386 27.3239 38.875 26.1648 38.1477C25.0057 37.4205 24.0938 36.3864 23.429 35.0455C22.7642 33.7045 22.4318 32.1136 22.4318 30.2727C22.4318 28.4318 22.7642 26.8409 23.429 25.5C24.0938 24.1591 25.0057 23.125 26.1648 22.3977C27.3239 21.6705 28.6477 21.3068 30.1364 21.3068C31.625 21.3068 32.9489 21.6705 34.108 22.3977C35.267 23.125 36.179 24.1591 36.8438 25.5C37.5085 26.8409 37.8409 28.4318 37.8409 30.2727ZM35.7955 30.2727C35.7955 28.7614 35.5426 27.4858 35.0369 26.446C34.5369 25.4062 33.858 24.6193 33 24.0852C32.1477 23.5511 31.1932 23.2841 30.1364 23.2841C29.0795 23.2841 28.1222 23.5511 27.2642 24.0852C26.4119 24.6193 25.733 25.4062 25.2273 26.446C24.7273 27.4858 24.4773 28.7614 24.4773 30.2727C24.4773 31.7841 24.7273 33.0597 25.2273 34.0994C25.733 35.1392 26.4119 35.9261 27.2642 36.4602C28.1222 36.9943 29.0795 37.2614 30.1364 37.2614C31.1932 37.2614 32.1477 36.9943 33 36.4602C33.858 35.9261 34.5369 35.1392 35.0369 34.0994C35.5426 33.0597 35.7955 31.7841 35.7955 30.2727Z" fill="#525252"></path><path d="M88.1136 39V21.5455H98.6477V23.4205H90.2273V29.3182H98.1023V31.1932H90.2273V37.125H98.7841V39H88.1136Z" fill="#525252"></path></svg>
-            `;
-                upDown.innerHTML = upDownSvg;
-                upDown.innerHTML += `
-                <div style="margin-top: 5px;">
-                    Click Q and E to move up and down.
-                </div>
-            `;
-                tips.appendChild(upDown);
-            }
-            content.appendChild(tips);
-            // Reference to our speed slider so we can adjust it when the move type changes.
-            let moveRateInput = null;
-            // Fly toggle row.
-            {
-                const row = document.createElement("div");
-                row.className = "NextspaceWalkthroughBarRow";
-                inputs.appendChild(row);
-                const label = document.createElement("div");
-                label.className = "NextspaceWalkthroughBarRowLabel";
-                label.innerText = "Fly";
-                row.appendChild(label);
-                const toggle = document.createElement("input");
-                toggle.className = "NextspaceWalkthroughBarRowToggle";
-                toggle.type = "checkbox";
-                row.appendChild(toggle);
-                toggle.checked = exports.Walkthrough.GetMoveType({
-                    viewer: this._viewer
-                }) == exports.Walkthrough.EMoveType.Fly;
-                toggle.addEventListener("change", () => {
-                    const newType = toggle.checked ? exports.Walkthrough.EMoveType.Fly : exports.Walkthrough.EMoveType.Walk;
-                    exports.Walkthrough.SetMoveType({
-                        viewer: this._viewer,
-                        type: newType
-                    });
-                    // Update the speed slider to match the new move type.
-                    if (moveRateInput) {
-                        if (newType == exports.Walkthrough.EMoveType.Fly) {
-                            const rate = exports.Walkthrough.GetFlyMoveRate({
-                                viewer: this._viewer
-                            });
-                            moveRateInput.value = (rate * 50).toFixed(2);
-                        }
-                        else {
-                            const rate = exports.Walkthrough.GetWalkMoveRate({
-                                viewer: this._viewer
-                            });
-                            moveRateInput.value = (rate * 500).toFixed(2);
-                        }
-                    }
-                    localStorage.setItem(KEY_WALKTHROUGH_MODE, newType);
-                });
-                // Tip for the row.
-                // Will be hidden while collapsed through css.
-                {
-                    const tip = document.createElement("div");
-                    tip.style.marginBottom = "10px";
-                    tip.className = "NextspaceWalkthroughBarRowTip";
-                    tip.innerText = "Flying means the camera will not maintain its height.";
-                    inputs.appendChild(tip);
-                }
-            }
-            // Speed slider row.
-            {
-                const row = document.createElement("div");
-                row.className = "NextspaceWalkthroughBarRow";
-                inputs.appendChild(row);
-                const label = document.createElement("div");
-                label.className = "NextspaceWalkthroughBarRowLabel";
-                label.innerText = "Speed";
-                row.appendChild(label);
-                const slider = document.createElement("input");
-                moveRateInput = slider;
-                slider.className = "NextspaceWalkthroughBarRowSlider";
-                slider.type = "range";
-                slider.min = "0.01";
-                slider.max = "100";
-                slider.step = "0.01";
-                slider.value = "50";
-                slider.addEventListener("input", () => {
-                    // Walk is between 0.01 and 0.5
-                    // Fly is between 0.01 and 10
-                    // We want to convert this slider's range into the respective values and apply based on active move type.
-                    const type = exports.Walkthrough.GetMoveType({
-                        viewer: this._viewer
-                    });
-                    if (type == exports.Walkthrough.EMoveType.Fly) {
-                        const value = parseFloat(slider.value);
-                        const speed = value / 50;
-                        exports.Walkthrough.SetFlyMoveRate({
-                            viewer: this._viewer,
-                            rate: speed
-                        });
-                        localStorage.setItem(KEY_WALKTHROUGH_SPEED_FLY, speed.toString());
-                    }
-                    else {
-                        const value = parseFloat(slider.value);
-                        const speed = value / 500;
-                        exports.Walkthrough.SetWalkMoveRate({
-                            viewer: this._viewer,
-                            rate: speed
-                        });
-                        localStorage.setItem(KEY_WALKTHROUGH_SPEED_WALK, speed.toString());
-                    }
-                });
-                // Set the initial value based on the move type.
-                const type = exports.Walkthrough.GetMoveType({
-                    viewer: this._viewer
-                });
-                if (type == exports.Walkthrough.EMoveType.Fly) {
-                    const rate = exports.Walkthrough.GetFlyMoveRate({
-                        viewer: this._viewer
-                    });
-                    slider.value = (rate * 50).toFixed(2);
-                }
-                else {
-                    const rate = exports.Walkthrough.GetWalkMoveRate({
-                        viewer: this._viewer
-                    });
-                    slider.value = (rate * 500).toFixed(2);
-                }
-                row.appendChild(slider);
-            }
-            this._walkthroughBar = element;
-        }
-        _disposeWalkthroughBar() {
-            var _a;
-            if (this._walkthroughPinEventRemoval) {
-                this._walkthroughPinEventRemoval();
-                this._walkthroughPinEventRemoval = null;
-            }
-            if ((_a = this._walkthroughBar) === null || _a === void 0 ? void 0 : _a.parentElement) {
-                this._walkthroughBar.parentElement.removeChild(this._walkthroughBar);
-                this._walkthroughBar = null;
-            }
-            document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, "0px");
-        }
         _updateControls() {
             const controls = this._primaryContent.querySelectorAll(".NextspaceCursorBarPrimControlInner");
             controls.forEach((control) => {
@@ -29809,9 +29028,9 @@
         _listenSelection() {
             this._disposeCesiumEvent();
             const events = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
+            const throttle = new CursorBarMouseEventThrottle(this._viewer);
             let lastHoverPos = null;
-            //let lastHoveredEntityId: string = null;
-            //let unhighlightTimeout: any = null;
+            let cursorSettleTimeout = null;
             const process2dCursor = (pos2d, isHover) => {
                 try {
                     const { regos } = this._manager.VisualsRegister.GetRegosFromCursor({
@@ -29826,34 +29045,6 @@
                         else if (this._viewer.canvas.style.cursor) {
                             this._viewer.canvas.style.removeProperty("cursor");
                         }
-                        /*
-                        clearTimeout(unhighlightTimeout);
-                        if (lastHoveredEntityId && lastHoveredEntityId != firstId) {
-                            this._manager.VisualsRegister.SetHighlighted({
-                                entityIds: [lastHoveredEntityId],
-                                highlighted: false
-                            });
-                        }
-                        if (firstId) {
-                            unhighlightTimeout = setTimeout(() => {
-                                if (lastHoveredEntityId == firstId) {
-                                    this._manager.VisualsRegister.SetHighlighted({
-                                        entityIds: [firstId],
-                                        highlighted: false
-                                    });
-                                    lastHoveredEntityId = null;
-                                }
-                            }, 5000);
-                            if (lastHoveredEntityId != firstId) {
-                                this._manager.VisualsRegister.SetHighlighted({
-                                    entityIds: [firstId],
-                                    highlighted: true
-                                });
-                            }
-                        }
-                        
-                        lastHoveredEntityId = firstId;
-                        */
                     }
                     else {
                         this._manager.VisualsRegister.ClearSelected();
@@ -29870,8 +29061,27 @@
                 }
             };
             const hoverDelayQueue = new BModels.DelayQueue(() => {
+                // Skip raycasting entirely while the camera is moving, or if nothing has changed
+                // (render frame + cursor position) since the last raycast.
+                if (throttle.IsCameraBusy()) {
+                    return;
+                }
+                if (document.elementFromPoint(lastHoverPos.x, lastHoverPos.y) !== this._viewer.scene.canvas) {
+                    return;
+                }
+                if (throttle.ShouldSkipRaycast(lastHoverPos.x, lastHoverPos.y)) {
+                    return;
+                }
+                throttle.RecordRaycast(lastHoverPos.x, lastHoverPos.y);
                 process2dCursor(lastHoverPos, true);
-            }, 80);
+            }, throttle.GetHoverDelayMs());
+            // Once camera movement settles, force a fresh hover check rather than waiting on the
+            // regular throttle (matches Navigator's post-move recheck).
+            throttle.SetOnSettle(() => {
+                if (lastHoverPos) {
+                    hoverDelayQueue.Call(true);
+                }
+            });
             events.setInputAction((e) => {
                 var _a;
                 if (!((_a = e === null || e === void 0 ? void 0 : e.position) === null || _a === void 0 ? void 0 : _a.x)) {
@@ -29885,10 +29095,25 @@
                     return;
                 }
                 lastHoverPos = e.endPosition;
-                hoverDelayQueue.Call();
+                hoverDelayQueue.delay = throttle.GetHoverDelayMs();
+                // On a slow scene, debounce until the cursor has been still for a bit rather than
+                // raycasting on every throttled tick.
+                if (throttle.IsSlowScene()) {
+                    clearTimeout(cursorSettleTimeout);
+                    cursorSettleTimeout = setTimeout(() => {
+                        hoverDelayQueue.Call(true);
+                    }, CURSOR_SETTLE_MS);
+                }
+                else {
+                    hoverDelayQueue.Call();
+                }
             }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
             this._cesiumEventRemoval = () => {
+                if (cursorSettleTimeout) {
+                    clearTimeout(cursorSettleTimeout);
+                }
                 hoverDelayQueue.Dispose();
+                throttle.Dispose();
                 if (!events || events.isDestroyed()) {
                     return;
                 }
@@ -30817,20 +30042,1350 @@
         }
     }
 
+    var EAction;
+    (function (EAction) {
+        EAction["Forward"] = "f";
+        EAction["Backward"] = "b";
+        EAction["Left"] = "l";
+        EAction["Right"] = "r";
+        EAction["Up"] = "u";
+        EAction["Down"] = "d";
+        EAction["LookUp"] = "lu";
+        EAction["LookDown"] = "ld";
+        EAction["LookLeft"] = "ll";
+        EAction["LookRight"] = "lr";
+        EAction["Looking"] = "looking";
+    })(EAction || (EAction = {}));
+    const DEFAULT_WALK_MOVE_RATE = 0.2;
+    const DEFAULT_FLY_MOVE_RATE = 0.2;
+    const DEFAULT_MOVE_TYPE = null;
+    const VIEWER_WALKTHROUGH_DATA_KEY = "_cesiumWalkthroughData";
+    /**
+     * Returns heading of camera towards where movement is happening.
+     * @returns
+     */
+    function getMovementHeading(viewer) {
+        var _a;
+        const actions = (_a = viewer[VIEWER_WALKTHROUGH_DATA_KEY]) === null || _a === void 0 ? void 0 : _a.actions;
+        if (!actions) {
+            return 0;
+        }
+        let heading = Cesium.Math.toDegrees(viewer.camera.heading);
+        let count = 0;
+        let totalHeading = 0;
+        let left = actions.get(EAction.Left);
+        if (left) {
+            totalHeading += heading + 270;
+            count += 1;
+        }
+        if (actions.get(EAction.Right)) {
+            totalHeading += heading + 90;
+            count += 1;
+        }
+        let forward = actions.get(EAction.Forward);
+        if (forward) {
+            totalHeading += heading;
+            count += 1;
+        }
+        if (actions.get(EAction.Backward)) {
+            totalHeading += heading + 180;
+            count += 1;
+        }
+        if (left && forward) {
+            totalHeading = heading - 45;
+        }
+        else {
+            totalHeading /= count;
+        }
+        return totalHeading;
+    }
+    /**
+     * Updates camera position and orientation based on current actions.
+     */
+    function doMovementTick(viewer) {
+        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+        if (!data) {
+            return;
+        }
+        const canvas = viewer.canvas;
+        const camera = viewer.camera;
+        const moveRate = data.moveType == exports.Walkthrough.EMoveType.Walk ? data.walkMoveRate : data.flyMoveRate;
+        if (data.actions.get(EAction.Looking)) {
+            let width = canvas.clientWidth;
+            let height = canvas.clientHeight;
+            // Coordinate (0.0, 0.0) will be where the mouse was clicked.
+            let x = (data.mousePosCurrent.x - data.mousePosStart.x) / width;
+            let y = -(data.mousePosCurrent.y - data.mousePosStart.y) / height;
+            let lookFactor = 0.1;
+            camera.lookRight(x * lookFactor);
+            camera.lookUp(y * lookFactor);
+        }
+        let lookStep = 0.03;
+        if (data.actions.get(EAction.LookLeft)) {
+            camera.lookLeft(lookStep);
+        }
+        if (data.actions.get(EAction.LookRight)) {
+            camera.lookRight(lookStep);
+        }
+        if (data.actions.get(EAction.LookUp)) {
+            camera.lookUp(lookStep);
+        }
+        if (data.actions.get(EAction.LookDown)) {
+            camera.lookDown(lookStep);
+        }
+        if (data.actions.get(EAction.Up)) {
+            camera.moveUp(moveRate / 2);
+        }
+        if (data.actions.get(EAction.Down)) {
+            camera.moveDown(moveRate / 2);
+        }
+        if (camera.roll > 0) {
+            camera.twistLeft(camera.roll);
+        }
+        else if (camera.roll < 0) {
+            camera.twistRight(camera.roll * -1);
+        }
+        // If movement type is fly use cesium movement methods
+        if (data.moveType == exports.Walkthrough.EMoveType.Fly) {
+            if (data.actions.get(EAction.Forward)) {
+                camera.moveForward(moveRate);
+            }
+            if (data.actions.get(EAction.Backward)) {
+                camera.moveBackward(moveRate);
+            }
+            if (data.actions.get(EAction.Left)) {
+                camera.moveLeft(moveRate);
+            }
+            if (data.actions.get(EAction.Right)) {
+                camera.moveRight(moveRate);
+            }
+        }
+        // If movement type is walk, calculate new position without affecting altitude
+        else {
+            if (data.actions.get(EAction.Left) ||
+                data.actions.get(EAction.Right) ||
+                data.actions.get(EAction.Forward) ||
+                data.actions.get(EAction.Backward)) {
+                const heading = getMovementHeading(viewer);
+                const pos = viewer.camera.positionCartographic;
+                const newPos = _offsetPoint({
+                    altitude: pos.height,
+                    latitude: Cesium.Math.toDegrees(pos.latitude),
+                    longitude: Cesium.Math.toDegrees(pos.longitude)
+                }, moveRate, heading);
+                camera.position = Cesium.Cartesian3.fromDegrees(newPos.longitude, newPos.latitude, newPos.altitude);
+            }
+        }
+        viewer.scene.requestRender();
+    }
+    /**
+     * Moves a given point by a given distance towards a heading.
+     * @param point in degrees.
+     * @param distance in meters.
+     * @param heading in degrees.
+     * @returns
+     */
+    function _offsetPoint(point, distance, heading) {
+        // Radius of earth.
+        const radius = 6371e3;
+        const δ = distance / radius;
+        const θ = Cesium.Math.toRadians(heading);
+        const φ1 = Cesium.Math.toRadians(point.latitude);
+        const λ1 = Cesium.Math.toRadians(point.longitude);
+        const sinφ2 = Math.sin(φ1) * Math.cos(δ) + Math.cos(φ1) * Math.sin(δ) * Math.cos(θ);
+        const φ2 = Math.asin(sinφ2);
+        const y = Math.sin(θ) * Math.sin(δ) * Math.cos(φ1);
+        const x = Math.cos(δ) - Math.sin(φ1) * sinφ2;
+        const λ2 = λ1 + Math.atan2(y, x);
+        return {
+            altitude: point.altitude,
+            latitude: Cesium.Math.toDegrees(φ2),
+            longitude: Cesium.Math.toDegrees(λ2)
+        };
+    }
+    /**
+     * Checks given keyboard key against keybinds and sets action accordingly.
+     * @param key
+     * @param keyDown
+     */
+    function checkKeybind(viewer, key, keyDown) {
+        const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+        if (!data) {
+            return;
+        }
+        key = key.toLowerCase();
+        if (key == "w") {
+            data.actions.set(EAction.Forward, keyDown);
+        }
+        else if (key == "s") {
+            data.actions.set(EAction.Backward, keyDown);
+        }
+        else if (key == "a") {
+            data.actions.set(EAction.Left, keyDown);
+        }
+        else if (key == "d") {
+            data.actions.set(EAction.Right, keyDown);
+        }
+        else if (key == "q") {
+            data.actions.set(EAction.Up, keyDown);
+        }
+        else if (key == "e") {
+            data.actions.set(EAction.Down, keyDown);
+        }
+        else if (key == "arrowup") {
+            data.actions.set(EAction.LookUp, keyDown);
+        }
+        else if (key == "arrowdown") {
+            data.actions.set(EAction.LookDown, keyDown);
+        }
+        else if (key == "arrowleft") {
+            data.actions.set(EAction.LookLeft, keyDown);
+        }
+        else if (key == "arrowright") {
+            data.actions.set(EAction.LookRight, keyDown);
+        }
+    }
+    (function (Walkthrough) {
+        let EMoveType;
+        (function (EMoveType) {
+            EMoveType["Walk"] = "WALK";
+            EMoveType["Fly"] = "FLY";
+        })(EMoveType = Walkthrough.EMoveType || (Walkthrough.EMoveType = {}));
+        function Start(params) {
+            Stop(params);
+            const viewer = params.viewer;
+            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY] = {
+                walkMoveRate: DEFAULT_WALK_MOVE_RATE,
+                flyMoveRate: DEFAULT_FLY_MOVE_RATE,
+                moveType: DEFAULT_MOVE_TYPE,
+                actions: new Map(),
+                ...viewer[VIEWER_WALKTHROUGH_DATA_KEY]
+            };
+            data.handlerScreenSpace = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+            exports.ViewUtils.SetLockedCameraStatus({
+                viewer: viewer,
+                status: true
+            });
+            let lastCheck;
+            let currentTime = new Date();
+            const interval = setInterval(() => {
+                lastCheck = new Date();
+                if (lastCheck.getTime() - currentTime.getTime() >= (1000 / 60)) {
+                    doMovementTick(viewer);
+                    currentTime = new Date();
+                }
+            }, 1000 / 60);
+            data.tickRemoval = () => {
+                clearInterval(interval);
+            };
+            let keyDown = (e) => {
+                checkKeybind(viewer, e.key, true);
+            };
+            document.addEventListener("keydown", keyDown, false);
+            let keyUp = (e) => {
+                checkKeybind(viewer, e.key, false);
+            };
+            document.addEventListener("keyup", keyUp, false);
+            data.handlerKeysRemoval = () => {
+                document.removeEventListener("keydown", keyDown);
+                document.removeEventListener("keyup", keyUp);
+            };
+            data.handlerScreenSpace.setInputAction((e) => {
+                data.actions.set(EAction.Looking, true);
+                data.mousePosCurrent = data.mousePosStart = Cesium.Cartesian2.clone(e.position);
+            }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+            data.handlerScreenSpace.setInputAction(((e) => {
+                data.mousePosCurrent = e.endPosition;
+            }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+            data.handlerScreenSpace.setInputAction(() => {
+                data.actions.set(EAction.Looking, false);
+            }, Cesium.ScreenSpaceEventType.LEFT_UP);
+        }
+        Walkthrough.Start = Start;
+        function Stop(params) {
+            var _a, _b;
+            const viewer = params.viewer;
+            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+            exports.ViewUtils.SetLockedCameraStatus({
+                viewer: viewer,
+                status: false
+            });
+            if (data) {
+                (_a = data.handlerScreenSpace) === null || _a === void 0 ? void 0 : _a.destroy();
+                data.handlerScreenSpace = null;
+                (_b = data.tickRemoval) === null || _b === void 0 ? void 0 : _b.call(data);
+                data.tickRemoval = null;
+                if (data.handlerKeysRemoval) {
+                    data.handlerKeysRemoval();
+                    data.handlerKeysRemoval = null;
+                }
+            }
+        }
+        Walkthrough.Stop = Stop;
+        function IsRunning(params) {
+            const viewer = params.viewer;
+            const data = viewer[VIEWER_WALKTHROUGH_DATA_KEY];
+            return (data === null || data === void 0 ? void 0 : data.handlerScreenSpace) != null;
+        }
+        Walkthrough.IsRunning = IsRunning;
+        function SetWalkMoveRate(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            if (data) {
+                data.walkMoveRate = params.rate;
+            }
+        }
+        Walkthrough.SetWalkMoveRate = SetWalkMoveRate;
+        function SetMoveType(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            if (data) {
+                data.moveType = params.type;
+            }
+        }
+        Walkthrough.SetMoveType = SetMoveType;
+        function GetWalkMoveRate(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            return data === null || data === void 0 ? void 0 : data.walkMoveRate;
+        }
+        Walkthrough.GetWalkMoveRate = GetWalkMoveRate;
+        function GetFlyMoveRate(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            return data === null || data === void 0 ? void 0 : data.flyMoveRate;
+        }
+        Walkthrough.GetFlyMoveRate = GetFlyMoveRate;
+        function SetFlyMoveRate(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            if (data) {
+                data.flyMoveRate = params.rate;
+            }
+        }
+        Walkthrough.SetFlyMoveRate = SetFlyMoveRate;
+        function GetMoveType(params) {
+            var _a;
+            const data = (_a = params.viewer) === null || _a === void 0 ? void 0 : _a[VIEWER_WALKTHROUGH_DATA_KEY];
+            return data === null || data === void 0 ? void 0 : data.moveType;
+        }
+        Walkthrough.GetMoveType = GetMoveType;
+        /**
+         * Simulates a keyboard key being pressed/released for movement purposes.
+         * Lets UI (eg: an on-screen key diagram) drive movement the same way physical key presses do.
+         */
+        function CheckKeybind(params) {
+            checkKeybind(params.viewer, params.key, params.keyDown);
+        }
+        Walkthrough.CheckKeybind = CheckKeybind;
+    })(exports.Walkthrough || (exports.Walkthrough = {}));
+
+    const KEY_WALKTHROUGH_MODE = "WidgetNavCompass.Walkthrough.Mode";
+    const KEY_WALKTHROUGH_SPEED_FLY = "WidgetNavCompass.Walkthrough.SpeedFly";
+    const KEY_WALKTHROUGH_SPEED_WALK = "WidgetNavCompass.Walkthrough.SpeedWalk";
+    const KEY_WALKTHROUGH_COLLAPSED = "WidgetNavCompass.Walkthrough.Collapsed";
+    // CSS var other widgets (eg: the left panel) read to avoid overlapping this bar.
+    const VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM = "--viewer-walkthrough-panel-bottom";
+    const STYLESHEET_ID = "nextspace-nav-compass-walkthrough-bar-stylesheet";
+    const HEIGHT_COLLAPSED = "58px";
+    const HEIGHT_EXPANDED = "165px";
+    /**
+     * The Walkthrough controls bar shown at the bottom of the screen while in Walkthrough mode
+     * (entered via the nav compass's Walkthrough toggle). Mirrors the design of cesium-navigator-ui's
+     * "CollapsedWalkthrough" component (the current/latest design for this control), reimplemented
+     * here as vanilla DOM since this widget has no React dependency.
+     */
+    class WidgetNavCompassWalkthroughBar {
+        constructor(params) {
+            this._keyRects = [];
+            this._viewer = params.viewer;
+            this._container = params.container;
+            this._onClose = params.onClose;
+            this._generateStyles();
+            this._generateElement();
+            this._listenPhysicalKeys();
+        }
+        Dispose() {
+            var _a;
+            if (this._keyDownHandler) {
+                document.removeEventListener("keydown", this._keyDownHandler);
+                document.removeEventListener("keyup", this._keyUpHandler);
+                this._keyDownHandler = null;
+                this._keyUpHandler = null;
+            }
+            if ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement) {
+                this._element.parentElement.removeChild(this._element);
+            }
+            this._element = null;
+            this._keyRects = [];
+            document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, "0px");
+        }
+        _generateStyles() {
+            if (document.getElementById(STYLESHEET_ID)) {
+                return;
+            }
+            const style = document.createElement("style");
+            style.id = STYLESHEET_ID;
+            style.innerHTML = `
+            .NextspaceNavCompassWalkthroughBar {
+                position: absolute;
+                z-index: 1;
+                bottom: 10px;
+                left: calc(45px + var(${VIEWER_LEFT_PANEL_CSS_VAR_LEFT}));
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                background-color: #fafdff;
+                color: #000;
+                border-radius: 8px;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                pointer-events: auto;
+                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.36), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
+                font-family: Arial;
+                font-size: 12px;
+            }
+
+            .NextspaceNavCompassWalkthroughBar * {
+                box-sizing: border-box;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-primary {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                height: 38px;
+                padding: 0 10px;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-primary .icon-walkthrough {
+                width: 24px;
+                height: 24px;
+                flex-shrink: 0;
+                margin-right: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-primary select {
+                height: 28px;
+                padding: 0 8px;
+                border-radius: 4px;
+                border: 1px solid #ccc;
+                background: #fff;
+                color: #000;
+                font-size: 12px;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-primary .mr-10 {
+                width: 10px;
+                flex-shrink: 0;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-primary .mr-auto {
+                margin-left: auto;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .input-row {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .input-row label {
+                opacity: 0.7;
+                margin-right: 12px;
+                flex-shrink: 0;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .input-row input[type="range"] {
+                flex-grow: 1;
+                min-width: 60px;
+                accent-color: #33b1ff;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .icon-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 28px;
+                height: 28px;
+                border-radius: 6px;
+                cursor: pointer;
+                transition: 0.3s ease;
+                flex-shrink: 0;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .icon-btn:hover {
+                background: rgba(0, 0, 0, 0.06);
+            }
+
+            .NextspaceNavCompassWalkthroughBar .icon-btn.close-btn {
+                margin-left: 4px;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .row-keys {
+                display: flex;
+                flex-direction: row;
+                align-items: flex-start;
+                justify-content: center;
+                gap: 16px;
+                padding: 10px 14px 12px;
+                border-top: 1px solid rgba(0, 0, 0, 0.1);
+            }
+
+            .NextspaceNavCompassWalkthroughBar[collapsed="true"] .row-keys {
+                display: none;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .key-group {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .key-group svg {
+                display: block;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .key-tip {
+                opacity: 0.5;
+                font-size: 11px;
+                margin-top: 4px;
+                text-align: center;
+            }
+
+            .NextspaceNavCompassWalkthroughBar .key-rect {
+                fill: #fff;
+                transition: 0.3s ease;
+                stroke: rgba(0, 0, 0, 0.2);
+                stroke-width: 1.5;
+                cursor: pointer;
+                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
+            }
+
+            .NextspaceNavCompassWalkthroughBar .key-rect-active {
+                fill: #e8f4ff;
+                stroke: #33b1ff;
+            }
+        `;
+            document.head.appendChild(style);
+        }
+        _generateElement() {
+            const collapsed = localStorage.getItem(KEY_WALKTHROUGH_COLLAPSED) == "true";
+            const element = document.createElement("div");
+            element.className = "NextspaceNavCompassWalkthroughBar";
+            element.setAttribute("collapsed", collapsed ? "true" : "false");
+            this._element = element;
+            const rowPrimary = document.createElement("div");
+            rowPrimary.className = "row-primary";
+            element.appendChild(rowPrimary);
+            const icon = document.createElement("div");
+            icon.className = "icon-walkthrough";
+            icon.innerHTML = `
+            <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.5033 4C16.8406 4 16.205 4.26339 15.7364 4.73223C15.2678 5.20107 15.0045 5.83696 15.0045 6.5C15.0045 7.16304 15.2678 7.79893 15.7364 8.26777C16.205 8.73661 16.8406 9 17.5033 9C18.166 9 18.8015 8.73661 19.2701 8.26777C19.7388 7.79893 20.002 7.16304 20.002 6.5C20.002 5.83696 19.7388 5.20107 19.2701 4.73223C18.8015 4.26339 18.166 4 17.5033 4ZM15.5023 10C15.1066 10 14.7378 10.1015 14.4052 10.2656C14.3549 10.2813 14.306 10.3009 14.2588 10.3242L10.3448 12.1992C10.1322 12.3003 9.96216 12.4733 9.86453 12.6875L8.09784 16.5859C8.0405 16.7059 8.00764 16.836 8.00118 16.9688C7.99472 17.1016 8.01479 17.2344 8.06021 17.3593C8.10563 17.4843 8.1755 17.5989 8.26572 17.6965C8.35594 17.7941 8.46471 17.8727 8.58567 17.9278C8.70662 17.9828 8.83733 18.0132 8.97016 18.0171C9.10299 18.0211 9.23526 17.9984 9.35924 17.9506C9.48323 17.9028 9.59644 17.8307 9.69225 17.7386C9.78806 17.6464 9.86454 17.5361 9.91724 17.4141L11.3638 14.2246L12.658 13.8359C12.3918 15.2411 12.0603 16.9816 12.0587 16.9902C12.0583 16.9923 12.0572 16.994 12.0568 16.9961C12.0568 16.9961 12.0568 17 12.0568 17C12.024 17.1615 12.006 17.3288 12.006 17.5C12.006 18.271 12.3631 18.9514 12.9118 19.4102L12.9196 19.4336L16.8103 22.5L17.923 26.6953L18.0225 27.1953C18.0677 27.4221 18.19 27.6263 18.3687 27.773C18.5474 27.9197 18.7714 27.9999 19.0025 28C19.2676 28 19.5218 27.8946 19.7093 27.7071C19.8967 27.5196 20.002 27.2652 20.002 27C20.0019 26.9344 19.9954 26.869 19.9825 26.8047V26.8008C19.9812 26.7969 19.9799 26.793 19.9786 26.7891L18.983 21.8047C18.9562 21.6693 18.9017 21.541 18.8229 21.4277L16.9528 18.0039C16.9546 17.9951 16.953 17.9854 16.9547 17.9766L17.9366 13.0625L17.9347 13.0605C17.9762 12.8798 18.003 12.6933 18.003 12.5C18.003 11.1207 16.8837 10.0011 15.5023 10ZM19.3871 13.7422L18.9186 16.0078L19.3344 16.3809C19.4093 16.4489 19.4962 16.5059 19.5882 16.5469L22.5866 17.9102V17.9082C22.7165 17.9681 22.8576 17.9994 23.0005 18C23.2656 18 23.5198 17.8946 23.7073 17.7071C23.8947 17.5196 24 17.2652 24 17C23.9996 16.8084 23.9442 16.6209 23.8404 16.4599C23.7366 16.2989 23.5887 16.1711 23.4144 16.0918V16.0898L20.5545 14.7891L19.3871 13.7422ZM11.9631 20.7246L11.4497 22.4219L9.22228 26.3613L9.1481 26.4863L9.15005 26.4883C9.13825 26.5087 9.12718 26.5296 9.11686 26.5508L9.10905 26.5625C9.0425 26.6987 9.00778 26.8484 9.00754 27C9.00754 27.2652 9.11285 27.5196 9.30029 27.7071C9.48773 27.8946 9.74195 28 10.007 28C10.1647 27.9999 10.3201 27.9626 10.4606 27.891C10.601 27.8193 10.7225 27.7155 10.8152 27.5879H10.8172L10.8328 27.5645C10.8334 27.5632 10.8341 27.5618 10.8347 27.5605L14.1592 22.5117L11.9631 20.7246Z" fill="#000"/>
+            </svg>
+        `;
+            rowPrimary.appendChild(icon);
+            const select = document.createElement("select");
+            const moveOptions = [
+                { type: exports.Walkthrough.EMoveType.Fly, label: "Free move" },
+                { type: exports.Walkthrough.EMoveType.Walk, label: "Maintain height" }
+            ];
+            moveOptions.forEach(o => {
+                const option = document.createElement("option");
+                option.value = o.type;
+                option.innerText = o.label;
+                select.appendChild(option);
+            });
+            select.value = exports.Walkthrough.GetMoveType({ viewer: this._viewer }) || exports.Walkthrough.EMoveType.Walk;
+            rowPrimary.appendChild(select);
+            const spacer1 = document.createElement("div");
+            spacer1.className = "mr-10";
+            rowPrimary.appendChild(spacer1);
+            const inputRow = document.createElement("div");
+            inputRow.className = "input-row";
+            rowPrimary.appendChild(inputRow);
+            const speedLabel = document.createElement("label");
+            speedLabel.innerText = "Speed";
+            inputRow.appendChild(speedLabel);
+            const slider = document.createElement("input");
+            slider.type = "range";
+            slider.min = "0.01";
+            slider.max = "100";
+            slider.step = "0.01";
+            inputRow.appendChild(slider);
+            const syncSliderToMoveType = (type) => {
+                if (type == exports.Walkthrough.EMoveType.Fly) {
+                    const rate = exports.Walkthrough.GetFlyMoveRate({ viewer: this._viewer });
+                    slider.value = ((rate !== null && rate !== void 0 ? rate : 0.2) * 50).toFixed(2);
+                }
+                else {
+                    const rate = exports.Walkthrough.GetWalkMoveRate({ viewer: this._viewer });
+                    slider.value = ((rate !== null && rate !== void 0 ? rate : 0.2) * 500).toFixed(2);
+                }
+            };
+            syncSliderToMoveType(select.value);
+            select.addEventListener("change", () => {
+                const newType = select.value;
+                exports.Walkthrough.SetMoveType({
+                    viewer: this._viewer,
+                    type: newType
+                });
+                syncSliderToMoveType(newType);
+                localStorage.setItem(KEY_WALKTHROUGH_MODE, newType);
+            });
+            slider.addEventListener("input", () => {
+                const type = exports.Walkthrough.GetMoveType({ viewer: this._viewer });
+                const value = parseFloat(slider.value);
+                if (type == exports.Walkthrough.EMoveType.Fly) {
+                    const speed = value / 50;
+                    exports.Walkthrough.SetFlyMoveRate({ viewer: this._viewer, rate: speed });
+                    localStorage.setItem(KEY_WALKTHROUGH_SPEED_FLY, speed.toString());
+                }
+                else {
+                    const speed = value / 500;
+                    exports.Walkthrough.SetWalkMoveRate({ viewer: this._viewer, rate: speed });
+                    localStorage.setItem(KEY_WALKTHROUGH_SPEED_WALK, speed.toString());
+                }
+            });
+            const spacerAuto = document.createElement("div");
+            spacerAuto.className = "mr-auto";
+            rowPrimary.appendChild(spacerAuto);
+            const svgExpand = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 14C5.45 14 5 14.45 5 15V18C5 18.55 5.45 19 6 19H9C9.55 19 10 18.55 10 18C10 17.45 9.55 17 9 17H7V15C7 14.45 6.55 14 6 14ZM6 10C6.55 10 7 9.55 7 9V7H9C9.55 7 10 6.55 10 6C10 5.45 9.55 5 9 5H6C5.45 5 5 5.45 5 6V9C5 9.55 5.45 10 6 10ZM17 17H15C14.45 17 14 17.45 14 18C14 18.55 14.45 19 15 19H18C18.55 19 19 18.55 19 18V15C19 14.45 18.55 14 18 14C17.45 14 17 14.45 17 15V17ZM14 6C14 6.55 14.45 7 15 7H17V9C17 9.55 17.45 10 18 10C18.55 10 19 9.55 19 9V6C19 5.45 18.55 5 18 5H15C14.45 5 14 5.45 14 6Z" fill="#000"/>
+            </svg>
+        `;
+            const svgMinimize = `
+            <svg width="14" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 1L1 0.999999" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        `;
+            const toggleBtn = document.createElement("div");
+            toggleBtn.className = "icon-btn toggle-btn";
+            toggleBtn.setAttribute("title", collapsed ? "Show controls" : "Hide controls");
+            toggleBtn.innerHTML = collapsed ? svgExpand : svgMinimize;
+            toggleBtn.onclick = () => {
+                const nowCollapsed = element.getAttribute("collapsed") != "true";
+                element.setAttribute("collapsed", nowCollapsed ? "true" : "false");
+                toggleBtn.innerHTML = nowCollapsed ? svgExpand : svgMinimize;
+                toggleBtn.setAttribute("title", nowCollapsed ? "Show controls" : "Hide controls");
+                localStorage.setItem(KEY_WALKTHROUGH_COLLAPSED, nowCollapsed ? "true" : "false");
+                document.documentElement.style.setProperty(VIEWER_WALKTHROUGH_PANEL_CSS_VAR_BOTTOM, nowCollapsed ? HEIGHT_COLLAPSED : HEIGHT_EXPANDED);
+            };
+            rowPrimary.appendChild(toggleBtn);
+            const closeBtn = document.createElement("div");
+            closeBtn.className = "icon-btn close-btn";
+            closeBtn.setAttribute("title", "Close");
+            closeBtn.innerHTML = `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18.3002 5.70973C17.9102 5.31973 17.2802 5.31973 16.8902 5.70973L12.0002 10.5897L7.11022 5.69973C6.72022 5.30973 6.09021 5.30973 5.70021 5.69973C5.31021 6.08973 5.31021 6.71973 5.70021 7.10973L10.5902 11.9997L5.70021 16.8897C5.31021 17.2797 5.31021 17.9097 5.70021 18.2997C6.09021 18.6897 6.72022 18.6897 7.11022 18.2997L12.0002 13.4097L16.8902 18.2997C17.2802 18.6897 17.9102 18.6897 18.3002 18.2997C18.6902 17.9097 18.6902 17.2797 18.3002 16.8897L13.4102 11.9997L18.3002 7.10973C18.6802 6.72973 18.6802 6.08973 18.3002 5.70973Z" fill="#000"/>
+            </svg>
+        `;
+            closeBtn.onclick = () => this._onClose();
+            rowPrimary.appendChild(closeBtn);
+            const rowKeys = document.createElement("div");
+            rowKeys.className = "row-keys";
+            element.appendChild(rowKeys);
+            rowKeys.appendChild(this._buildKeyGroup({
+                widthViewBox: 148,
+                heightViewBox: 110,
+                svgWidth: 111,
+                svgHeight: 83,
+                tip: "Move",
+                keys: [
+                    { key: "W", x: 54, y: 10, label: "W" },
+                    { key: "A", x: 6, y: 58, label: "A" },
+                    { key: "S", x: 54, y: 58, label: "S" },
+                    { key: "D", x: 102, y: 58, label: "D" }
+                ]
+            }));
+            rowKeys.appendChild(this._buildKeyGroup({
+                widthViewBox: 148,
+                heightViewBox: 110,
+                svgWidth: 111,
+                svgHeight: 83,
+                tip: "Look",
+                keys: [
+                    { key: "ARROWUP", x: 54, y: 10, label: "↑" },
+                    { key: "ARROWLEFT", x: 6, y: 58, label: "←" },
+                    { key: "ARROWDOWN", x: 54, y: 58, label: "↓" },
+                    { key: "ARROWRIGHT", x: 102, y: 58, label: "→" }
+                ]
+            }));
+            rowKeys.appendChild(this._buildKeyGroup({
+                widthViewBox: 98,
+                heightViewBox: 60,
+                svgWidth: 74,
+                svgHeight: 45,
+                tip: "Up / Down",
+                keys: [
+                    { key: "Q", x: 6, y: 10, label: "Q" },
+                    { key: "E", x: 52, y: 10, label: "E" }
+                ]
+            }));
+            this._container.appendChild(element);
+        }
+        _buildKeyGroup(params) {
+            const NS = "http://www.w3.org/2000/svg";
+            const group = document.createElement("div");
+            group.className = "key-group";
+            const svg = document.createElementNS(NS, "svg");
+            svg.setAttribute("width", params.svgWidth.toString());
+            svg.setAttribute("height", params.svgHeight.toString());
+            svg.setAttribute("viewBox", `0 0 ${params.widthViewBox} ${params.heightViewBox}`);
+            group.appendChild(svg);
+            params.keys.forEach(k => {
+                const rect = document.createElementNS(NS, "rect");
+                rect.setAttribute("x", k.x.toString());
+                rect.setAttribute("y", k.y.toString());
+                rect.setAttribute("width", "40");
+                rect.setAttribute("height", "40");
+                rect.setAttribute("rx", "6");
+                rect.setAttribute("class", "key-rect");
+                svg.appendChild(rect);
+                const text = document.createElementNS(NS, "text");
+                text.setAttribute("x", (k.x + 20).toString());
+                text.setAttribute("y", (k.y + 22).toString());
+                text.setAttribute("text-anchor", "middle");
+                text.setAttribute("dominant-baseline", "middle");
+                text.setAttribute("pointer-events", "none");
+                text.setAttribute("fill", "#000");
+                text.setAttribute("font-size", "20");
+                text.textContent = k.label;
+                svg.appendChild(text);
+                const setActive = (active) => {
+                    rect.setAttribute("class", active ? "key-rect key-rect-active" : "key-rect");
+                };
+                rect.addEventListener("mousedown", () => {
+                    setActive(true);
+                    exports.Walkthrough.CheckKeybind({ viewer: this._viewer, key: k.key, keyDown: true });
+                });
+                const release = () => {
+                    setActive(false);
+                    exports.Walkthrough.CheckKeybind({ viewer: this._viewer, key: k.key, keyDown: false });
+                };
+                rect.addEventListener("mouseup", release);
+                rect.addEventListener("mouseleave", release);
+                this._keyRects.push({ key: k.key, rect, text });
+            });
+            const tip = document.createElement("div");
+            tip.className = "key-tip";
+            tip.innerText = params.tip;
+            group.appendChild(tip);
+            return group;
+        }
+        _listenPhysicalKeys() {
+            this._keyDownHandler = (e) => this._setKeyRectActive(e.key, true);
+            this._keyUpHandler = (e) => this._setKeyRectActive(e.key, false);
+            document.addEventListener("keydown", this._keyDownHandler);
+            document.addEventListener("keyup", this._keyUpHandler);
+        }
+        _setKeyRectActive(key, active) {
+            const upper = key.toUpperCase();
+            this._keyRects.forEach(kr => {
+                if (kr.key == upper) {
+                    kr.rect.setAttribute("class", active ? "key-rect key-rect-active" : "key-rect");
+                }
+            });
+        }
+    }
+
+    const STYLESHEET_ID$1 = "nextspace-nav-compass-hold-loader-stylesheet";
+    function generateStyles() {
+        if (document.getElementById(STYLESHEET_ID$1)) {
+            return;
+        }
+        const style = document.createElement("style");
+        style.id = STYLESHEET_ID$1;
+        style.innerHTML = `
+        .NextspaceHoldLoader {
+            position: fixed;
+            pointer-events: none;
+            z-index: 10000;
+            transform: translate(-50%, -50%);
+            opacity: 0;
+            animation: nextspaceHoldLoaderFadeIn 0.1s ease forwards;
+        }
+
+        .NextspaceHoldLoader svg {
+            filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.4));
+        }
+
+        .NextspaceHoldLoader .progress {
+            transition: stroke-dashoffset 0.05s linear;
+        }
+
+        @keyframes nextspaceHoldLoaderFadeIn {
+            to {
+                opacity: 1;
+            }
+        }
+    `;
+        document.head.appendChild(style);
+    }
+    /**
+     * A press-and-hold radial progress indicator, shown near the cursor while a compass button's interaction is held.
+     */
+    class WidgetNavCompassHoldLoader {
+        constructor(params) {
+            generateStyles();
+            const size = params.isTouch ? 40 : 30;
+            this._radius = (size / 2) - 3;
+            const element = document.createElement("div");
+            element.className = "NextspaceHoldLoader";
+            element.style.left = `${params.x}px`;
+            element.style.top = `${params.y}px`;
+            const circumference = 2 * Math.PI * this._radius;
+            element.innerHTML = `
+            <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+                <circle class="background" cx="${size / 2}" cy="${size / 2}" r="${this._radius}" fill="none" stroke="rgba(255, 255, 255, 0.2)" stroke-width="3"/>
+                <circle class="progress" cx="${size / 2}" cy="${size / 2}" r="${this._radius}" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"
+                    stroke-dasharray="${circumference}" stroke-dashoffset="${circumference}"
+                    transform="rotate(-90 ${size / 2} ${size / 2})"/>
+            </svg>
+        `;
+            this._progressCircle = element.querySelector(".progress");
+            document.body.appendChild(element);
+            this._element = element;
+            const circ = circumference;
+            const startTime = performance.now();
+            const animate = () => {
+                const elapsed = performance.now() - startTime;
+                const progress = Math.min(elapsed / params.durationMs, 1);
+                this._progressCircle.setAttribute("stroke-dashoffset", (circ * (1 - progress)).toString());
+                if (progress < 1) {
+                    this._animationFrame = requestAnimationFrame(animate);
+                }
+            };
+            this._animationFrame = requestAnimationFrame(animate);
+        }
+        Dispose() {
+            var _a;
+            if (this._animationFrame) {
+                cancelAnimationFrame(this._animationFrame);
+                this._animationFrame = null;
+            }
+            if ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement) {
+                this._element.parentElement.removeChild(this._element);
+            }
+            this._element = null;
+        }
+    }
+
+    // Animation constants. All compass animations use 150ms at 60fps for consistency.
+    const ANIMATION_DURATION_MS = 150;
+    // Hold-to-activate constants.
+    const HOLD_ACTIVATION_TIME_MS = 350;
+    const HOLD_LOADER_DELAY_MS = 150;
+    const CONTINUOUS_ANIMATION_SPEED = 0.02 / 3;
+    const ZOOM_DISTANCE = 0.85;
+    const MIN_ZOOM_DISTANCE = 0.3;
+    const NEAR_NADIR_PITCH = -Math.PI / 2 + 0.05;
+    const MIN_ORBIT_OFFSET_METERS = 5;
+    // Caps how far a pivot may be from the camera relative to the camera's own altitude.
+    const MAX_PIVOT_DISTANCE_TO_HEIGHT_RATIO = 200;
+    // Caps how much a single rotate step may change the camera's altitude before we treat it as a
+    // runaway and skip it instead of applying it.
+    const MAX_SINGLE_STEP_HEIGHT_CHANGE_RATIO = 1.15;
+    function GetIs2d(viewer) {
+        var _a;
+        return ((_a = viewer === null || viewer === void 0 ? void 0 : viewer.camera) === null || _a === void 0 ? void 0 : _a.frustum) instanceof Cesium.OrthographicFrustum;
+    }
+    /**
+     * Validates a candidate rotate/look/zoom pivot against the camera's own altitude.
+     */
+    function IsPivotPlausible(viewer, pivot) {
+        if (!pivot || !isFinite(pivot.x) || !isFinite(pivot.y) || !isFinite(pivot.z)) {
+            return false;
+        }
+        const cameraPos = viewer.camera.positionWC;
+        const distance = Cesium.Cartesian3.distance(cameraPos, pivot);
+        if (!isFinite(distance)) {
+            return false;
+        }
+        const cameraCarto = Cesium.Cartographic.fromCartesian(cameraPos);
+        if (!cameraCarto || !isFinite(cameraCarto.height)) {
+            return true;
+        }
+        const cameraHeight = Math.max(cameraCarto.height, 1);
+        return distance <= cameraHeight * MAX_PIVOT_DISTANCE_TO_HEIGHT_RATIO;
+    }
+    function snapshotCamera(camera) {
+        return {
+            position: camera.position.clone(),
+            direction: camera.direction.clone(),
+            up: camera.up.clone()
+        };
+    }
+    function restoreCamera(camera, snapshot) {
+        camera.position = snapshot.position;
+        camera.direction = snapshot.direction;
+        camera.up = snapshot.up;
+    }
+    function getHeightAboveEllipsoid(position) {
+        const carto = Cesium.Cartographic.fromCartesian(position);
+        return carto && isFinite(carto.height) ? carto.height : null;
+    }
+    /**
+     * Probes the final camera pose an orbit step would produce, and rejects it if the camera's
+     * altitude would change implausibly for what should be a fixed-range orbit.
+     */
+    function isOrbitStepSafe(viewer, target, heading, pitch, range) {
+        const camera = viewer.camera;
+        const before = snapshotCamera(camera);
+        const preHeight = getHeightAboveEllipsoid(before.position);
+        camera.lookAt(target, new Cesium.HeadingPitchRange(heading, pitch, range));
+        const postHeight = getHeightAboveEllipsoid(camera.positionWC);
+        camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+        restoreCamera(camera, before);
+        if (preHeight == null || postHeight == null || preHeight <= 0) {
+            return true;
+        }
+        const ratio = postHeight / preHeight;
+        return ratio <= MAX_SINGLE_STEP_HEIGHT_CHANGE_RATIO && ratio >= 1 / MAX_SINGLE_STEP_HEIGHT_CHANGE_RATIO;
+    }
+    /**
+     * Resolves the center point compass rotate/zoom/look operations should orbit around,
+     * preferring the currently-selected entities' location over a raw screen-center raycast.
+     */
+    async function CalculateEntityCenter(viewer, manager, selectedIds) {
+        var _a, _b;
+        if (!selectedIds || selectedIds.length === 0) {
+            return undefined;
+        }
+        const is2d = GetIs2d(viewer);
+        const location = await exports.EntityUtils.GetLocation({
+            samples: selectedIds.map((id) => ({
+                entityId: id,
+                returnHeightRef: Cesium.HeightReference.NONE,
+                heightRef: Cesium.HeightReference.RELATIVE_TO_GROUND
+            })),
+            viewer: viewer,
+            visualRegister: manager.VisualsRegister,
+            api: manager.Getters.GetBruceApi(),
+            minimumAlt: is2d ? 5 : null,
+            paddingAlt: is2d ? 5 : null
+        });
+        if ((_a = location === null || location === void 0 ? void 0 : location.sphere) === null || _a === void 0 ? void 0 : _a.radius) {
+            if (location.sphere.radius < 1) {
+                location.sphere.radius = 1;
+            }
+            return location.sphere.center;
+        }
+        else if (location === null || location === void 0 ? void 0 : location.rectangle) {
+            if (is2d) {
+                return undefined;
+            }
+            const destinationCarto = Cesium.Rectangle.center(location.rectangle);
+            return Cesium.Cartesian3.fromRadians(destinationCarto.longitude, destinationCarto.latitude, 0);
+        }
+        else if ((_b = location === null || location === void 0 ? void 0 : location.pos3d) === null || _b === void 0 ? void 0 : _b.x) {
+            return location.pos3d;
+        }
+        return undefined;
+    }
+    function easeInOutQuad(progress) {
+        return progress < 0.5
+            ? 2 * progress * progress
+            : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+    }
+    async function resolvePivot(viewer, manager, selectedIds, stablePivot) {
+        if (stablePivot && IsPivotPlausible(viewer, stablePivot)) {
+            return stablePivot;
+        }
+        if (selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length) {
+            const entityCenter = await CalculateEntityCenter(viewer, manager, selectedIds);
+            if (entityCenter && IsPivotPlausible(viewer, entityCenter)) {
+                return entityCenter;
+            }
+        }
+        const c = viewer.canvas;
+        const center = new Cesium.Cartesian2(c.width / 2, c.height / 2);
+        const ground = exports.DrawingUtils.GetAccuratePosition(viewer, center);
+        if (ground && IsPivotPlausible(viewer, ground)) {
+            return ground;
+        }
+        return undefined;
+    }
+    /**
+     * Rotates the camera around a pivot point by the given radians (single tap action).
+     */
+    async function DoRotate(params) {
+        const { viewer, manager, selectedIds, stablePivot, onPivotUpdate } = params;
+        const left = params.radians < 0;
+        const radians = Math.abs(params.radians);
+        const camera = viewer.camera;
+        const is2d = GetIs2d(viewer);
+        const isLookingStraightDown = camera.pitch <= NEAR_NADIR_PITCH;
+        if (is2d || isLookingStraightDown) {
+            camera.flyTo({
+                destination: camera.position,
+                orientation: {
+                    heading: camera.heading + (left ? radians : -radians),
+                    pitch: camera.pitch,
+                    roll: camera.roll
+                },
+                duration: ANIMATION_DURATION_MS / 1000
+            });
+            return null;
+        }
+        const ground = await resolvePivot(viewer, manager, selectedIds, stablePivot);
+        if (!(ground === null || ground === void 0 ? void 0 : ground.x)) {
+            return null;
+        }
+        const offset = Math.max(Cesium.Cartesian3.distance(camera.position, ground), MIN_ORBIT_OFFSET_METERS);
+        const startHeading = camera.heading;
+        const fixedPitch = camera.pitch;
+        const totalRotation = left ? radians : -radians;
+        // Distance-to-target stays fixed by construction, but altitude can still drift if `ground`
+        // isn't exactly at the camera's sub-nadir point. Skip the action rather than apply it.
+        if (!isOrbitStepSafe(viewer, ground, startHeading + totalRotation, fixedPitch, offset)) {
+            return null;
+        }
+        const startTime = performance.now();
+        return new Promise((resolve) => {
+            const animate = () => {
+                const elapsed = performance.now() - startTime;
+                const progress = Math.min(elapsed / ANIMATION_DURATION_MS, 1);
+                const eased = easeInOutQuad(progress);
+                const newHeading = startHeading + totalRotation * eased;
+                camera.lookAt(ground, new Cesium.HeadingPitchRange(newHeading, fixedPitch, offset));
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                }
+                else {
+                    camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+                    onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(ground);
+                    resolve(ground);
+                }
+            };
+            requestAnimationFrame(animate);
+        });
+    }
+    /**
+     * Zooms the camera in or out by a fixed amount (single tap action).
+     */
+    function DoZoom(params) {
+        const { viewer, zoomIn, stablePivot, onPivotUpdate } = params;
+        const camera = viewer.camera;
+        const p = camera.position;
+        let ground;
+        if (stablePivot && IsPivotPlausible(viewer, stablePivot)) {
+            ground = stablePivot;
+        }
+        else {
+            const c = viewer.canvas;
+            const center = new Cesium.Cartesian2(c.width / 2, c.height / 2);
+            ground = exports.DrawingUtils.GetAccuratePosition(viewer, center);
+        }
+        if (!(ground === null || ground === void 0 ? void 0 : ground.x) || !IsPivotPlausible(viewer, ground)) {
+            return Promise.resolve(null);
+        }
+        const height = Cesium.Cartesian3.distance(p, ground);
+        const mag = (ZOOM_DISTANCE * 0.5) / Math.max(1, 4 - Math.log10(height));
+        const zoom = zoomIn ? 1 - mag : 1 + mag;
+        const offset = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.subtract(p, ground, new Cesium.Cartesian3()), zoom, new Cesium.Cartesian3());
+        if (zoomIn && Cesium.Cartesian3.magnitude(offset) <= MIN_ZOOM_DISTANCE) {
+            return Promise.resolve(null);
+        }
+        const to = Cesium.Cartesian3.add(ground, offset, new Cesium.Cartesian3());
+        return new Promise((resolve) => {
+            camera.flyTo({
+                destination: to,
+                orientation: { heading: camera.heading, pitch: camera.pitch, roll: camera.roll },
+                duration: ANIMATION_DURATION_MS / 1000,
+                easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
+                complete: () => {
+                    onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(ground);
+                    resolve(ground);
+                }
+            });
+        });
+    }
+    /**
+     * Tilts the camera up or down by arcing around a pivot point (single tap action).
+     */
+    async function DoLook(params) {
+        const { viewer, manager, tiltUp, selectedIds, stablePivot, onPivotUpdate } = params;
+        // ~11.25 degrees per click.
+        const pitchIncrement = (Math.PI / 32) * 2;
+        const camera = viewer.camera;
+        const MIN_PITCH = -Math.PI / 2 + 0.1;
+        const MAX_PITCH = Math.PI / 8;
+        const currentPitch = camera.pitch;
+        const targetPitch = currentPitch + (tiltUp ? -pitchIncrement : pitchIncrement);
+        const clampedPitch = Math.max(MIN_PITCH, Math.min(MAX_PITCH, targetPitch));
+        if (Math.abs(clampedPitch - currentPitch) < 0.001) {
+            return null;
+        }
+        const center = await resolvePivot(viewer, manager, selectedIds, stablePivot);
+        if (!(center === null || center === void 0 ? void 0 : center.x)) {
+            camera.flyTo({
+                destination: camera.position,
+                orientation: {
+                    heading: camera.heading,
+                    pitch: clampedPitch,
+                    roll: camera.roll
+                },
+                duration: ANIMATION_DURATION_MS / 1000
+            });
+            return null;
+        }
+        const offset = Math.max(Cesium.Cartesian3.distance(camera.position, center), MIN_ORBIT_OFFSET_METERS);
+        const startPitch = currentPitch;
+        const fixedHeading = camera.heading;
+        const totalPitchChange = clampedPitch - currentPitch;
+        const startTime = performance.now();
+        return new Promise((resolve) => {
+            const animate = () => {
+                const elapsed = performance.now() - startTime;
+                const progress = Math.min(elapsed / ANIMATION_DURATION_MS, 1);
+                const eased = easeInOutQuad(progress);
+                const newPitch = startPitch + totalPitchChange * eased;
+                camera.lookAt(center, new Cesium.HeadingPitchRange(fixedHeading, newPitch, offset));
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                }
+                else {
+                    camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+                    onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(center);
+                    resolve(center);
+                }
+            };
+            requestAnimationFrame(animate);
+        });
+    }
+    /**
+     * Continuously rotates the camera while active (press-and-hold). Returns a stop function.
+     */
+    function StartContinuousRotate(params) {
+        const { viewer, manager, rotateLeft, selectedIds, stablePivot, onPivotUpdate } = params;
+        let active = true;
+        let center;
+        const camera = viewer.camera;
+        const is2d = GetIs2d(viewer);
+        const isLookingStraightDown = camera.pitch <= NEAR_NADIR_PITCH;
+        if (is2d || isLookingStraightDown) {
+            const animate = () => {
+                if (!active) {
+                    return;
+                }
+                const inc = Math.PI * CONTINUOUS_ANIMATION_SPEED;
+                const newHeading = camera.heading + (rotateLeft ? inc : -inc);
+                camera.setView({
+                    destination: camera.position,
+                    orientation: { heading: newHeading, pitch: camera.pitch, roll: camera.roll }
+                });
+                if (active) {
+                    requestAnimationFrame(animate);
+                }
+            };
+            requestAnimationFrame(animate);
+            return () => { active = false; };
+        }
+        const fixedPitch = camera.pitch;
+        // Fixed for the whole hold, not recomputed every frame. Recomputing it from the camera's
+        // current position each frame cements any per-frame drift as the new normal distance, then
+        // rotates further from there, compounding into a runaway over many frames.
+        let fixedOffset = null;
+        let holdStartHeight = null;
+        let holdStartSnapshot = null;
+        resolvePivot(viewer, manager, selectedIds, stablePivot).then(p => {
+            center = p;
+            if (center) {
+                fixedOffset = Math.max(Cesium.Cartesian3.distance(camera.position, center), MIN_ORBIT_OFFSET_METERS);
+                holdStartHeight = getHeightAboveEllipsoid(camera.positionWC);
+                holdStartSnapshot = snapshotCamera(camera);
+            }
+        });
+        const animate = () => {
+            if (!active || !center || fixedOffset == null) {
+                if (active) {
+                    requestAnimationFrame(animate);
+                }
+                return;
+            }
+            const inc = Math.PI * CONTINUOUS_ANIMATION_SPEED;
+            camera.lookAt(center, new Cesium.HeadingPitchRange(camera.heading, fixedPitch, fixedOffset));
+            rotateLeft ? camera.rotateLeft(inc) : camera.rotateRight(inc);
+            // Backstop against the hold's starting altitude, so slow compounding across many frames
+            // still gets caught, not just a single big jump.
+            const postHeight = getHeightAboveEllipsoid(camera.positionWC);
+            if (holdStartHeight != null && postHeight != null && holdStartHeight > 0) {
+                const ratio = postHeight / holdStartHeight;
+                if (ratio > MAX_SINGLE_STEP_HEIGHT_CHANGE_RATIO || ratio < 1 / MAX_SINGLE_STEP_HEIGHT_CHANGE_RATIO) {
+                    camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+                    if (holdStartSnapshot) {
+                        restoreCamera(camera, holdStartSnapshot);
+                    }
+                    active = false;
+                    return;
+                }
+            }
+            onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(center);
+            if (active) {
+                requestAnimationFrame(animate);
+            }
+        };
+        requestAnimationFrame(animate);
+        return () => {
+            active = false;
+            camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+        };
+    }
+    /**
+     * Continuously tilts the camera up or down while active (press-and-hold). Returns a stop function.
+     */
+    function StartContinuousLook(params) {
+        const { viewer, manager, lookUp, selectedIds, stablePivot, onPivotUpdate } = params;
+        let active = true;
+        let center;
+        const fixedHeading = viewer.camera.heading;
+        const MIN_PITCH = -Math.PI / 2 + 0.1;
+        const MAX_PITCH = Math.PI / 8;
+        // Fixed for the whole hold, not recomputed every frame. See StartContinuousRotate.
+        let fixedOffset = null;
+        resolvePivot(viewer, manager, selectedIds, stablePivot).then(p => {
+            center = p;
+            if (center) {
+                fixedOffset = Math.max(Cesium.Cartesian3.distance(viewer.camera.position, center), MIN_ORBIT_OFFSET_METERS);
+            }
+        });
+        const animate = () => {
+            if (!active) {
+                return;
+            }
+            if (!center || fixedOffset == null) {
+                requestAnimationFrame(animate);
+                return;
+            }
+            const camera = viewer.camera;
+            const currentPitch = camera.pitch;
+            const inc = Math.PI * CONTINUOUS_ANIMATION_SPEED * (lookUp ? -1 : 1);
+            const newPitch = Math.max(MIN_PITCH, Math.min(MAX_PITCH, currentPitch + inc));
+            if (Math.abs(newPitch - currentPitch) < 0.001) {
+                active = false;
+                return;
+            }
+            camera.lookAt(center, new Cesium.HeadingPitchRange(fixedHeading, newPitch, fixedOffset));
+            onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(center);
+            if (active) {
+                requestAnimationFrame(animate);
+            }
+        };
+        requestAnimationFrame(animate);
+        return () => {
+            active = false;
+            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+        };
+    }
+    /**
+     * Continuously zooms the camera while active (press-and-hold). Returns a stop function.
+     */
+    function StartContinuousZoom(params) {
+        const { viewer, zoomIn, stablePivot, onPivotUpdate } = params;
+        let active = true;
+        let center = (stablePivot && IsPivotPlausible(viewer, stablePivot)) ? stablePivot : undefined;
+        const animate = () => {
+            if (!active) {
+                return;
+            }
+            const camera = viewer.camera;
+            let ground;
+            if (center) {
+                ground = center;
+            }
+            else {
+                const c = viewer.canvas;
+                const screenCenter = new Cesium.Cartesian2(c.width / 2, c.height / 2);
+                ground = exports.DrawingUtils.GetAccuratePosition(viewer, screenCenter);
+                if (!ground || !IsPivotPlausible(viewer, ground)) {
+                    active = false;
+                    return;
+                }
+            }
+            const p = camera.position;
+            const height = Cesium.Cartesian3.distance(p, ground);
+            const mag = (ZOOM_DISTANCE * 0.5) / Math.max(1, 4 - Math.log10(height));
+            const zoom = zoomIn ? 1 - mag * 0.03 : 1 + mag * 0.03;
+            const offset = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.subtract(p, ground, new Cesium.Cartesian3()), zoom, new Cesium.Cartesian3());
+            if (zoomIn && Cesium.Cartesian3.magnitude(offset) <= MIN_ZOOM_DISTANCE) {
+                active = false;
+                return;
+            }
+            const to = Cesium.Cartesian3.add(ground, offset, new Cesium.Cartesian3());
+            camera.setView({
+                destination: to,
+                orientation: { heading: camera.heading, pitch: camera.pitch, roll: camera.roll }
+            });
+            onPivotUpdate === null || onPivotUpdate === void 0 ? void 0 : onPivotUpdate(ground);
+            if (active) {
+                requestAnimationFrame(animate);
+            }
+        };
+        requestAnimationFrame(animate);
+        return () => { active = false; };
+    }
+
     class WidgetNavCompass$$1 extends exports.Widget.AWidget {
         constructor(params) {
             super(params);
-            this.ZOOM_DISTANCE = 0.85;
-            this.ZOOM_TIME = 0.2;
-            this.TURN_SPEED = 0.04;
-            this.MIN_ZOOM_DISTANCE = 0.3;
             this.STYLESHEET_ID = "nextspace-nav-compass-stylesheet";
+            this._stablePivot = null;
+            this.PIVOT_DISTANCE_TOLERANCE_METERS = 50;
+            // Press-and-hold state.
+            this._holdTimer = null;
+            this._loaderTimer = null;
+            this._stopContinuous = null;
+            this._didActivateContinuous = false;
+            this._pendingSingleAction = null;
+            this._holdLoader = null;
+            // Serializes single-tap rotate/look/zoom actions so a rapid click can't overlap an in-flight animation.
+            this._orbitActionChain = Promise.resolve();
+            this._isWalkthroughActive = false;
+            this._walkthroughBar = null;
+            this._isVR = false;
             this._generateStyles();
             this._generateElement();
             this._listenToRenders();
+            this._listenGlobalRelease();
         }
-        _getIs2d() {
-            return this._viewer.camera.frustum instanceof Cesium.OrthographicFrustum;
+        _getSelectedIds() {
+            var _a, _b;
+            return ((_b = (_a = this._manager) === null || _a === void 0 ? void 0 : _a.VisualsRegister) === null || _b === void 0 ? void 0 : _b.GetSelected()) || [];
+        }
+        _getStablePivot() {
+            const camera = this._viewer.camera;
+            // Re-validate a cached pivot too, since it may have been established from a bad raycast.
+            if (this._stablePivot && IsPivotPlausible(this._viewer, this._stablePivot)) {
+                const distance = Cesium.Cartesian3.distance(camera.position, this._stablePivot);
+                if (distance <= this.PIVOT_DISTANCE_TOLERANCE_METERS) {
+                    return this._stablePivot;
+                }
+            }
+            const c = this._viewer.canvas;
+            const center = new Cesium.Cartesian2(c.width / 2, c.height / 2);
+            const ground = exports.DrawingUtils.GetAccuratePosition(this._viewer, center);
+            if ((ground === null || ground === void 0 ? void 0 : ground.x) && IsPivotPlausible(this._viewer, ground)) {
+                this._stablePivot = ground.clone();
+                return this._stablePivot;
+            }
+            this._stablePivot = null;
+            return null;
+        }
+        _updateStablePivot(pivot) {
+            if (pivot && IsPivotPlausible(this._viewer, pivot)) {
+                this._stablePivot = pivot.clone ? pivot.clone() : pivot;
+            }
+        }
+        _listenGlobalRelease() {
+            this._globalMouseUp = () => this._handlePointerUp();
+            this._globalTouchEnd = () => this._handlePointerUp();
+            window.addEventListener("mouseup", this._globalMouseUp);
+            window.addEventListener("touchend", this._globalTouchEnd);
         }
         _listenToRenders() {
             if (this._renderRemoval) {
@@ -30842,10 +31397,30 @@
             });
         }
         Dispose() {
+            var _a, _b, _c;
             if (this._renderRemoval) {
                 this._renderRemoval();
                 this._renderRemoval = null;
             }
+            if (this._globalMouseUp) {
+                window.removeEventListener("mouseup", this._globalMouseUp);
+            }
+            if (this._globalTouchEnd) {
+                window.removeEventListener("touchend", this._globalTouchEnd);
+            }
+            if (this._fullscreenChange) {
+                document.removeEventListener("fullscreenchange", this._fullscreenChange);
+                document.removeEventListener("webkitfullscreenchange", this._fullscreenChange);
+            }
+            if (this._loaderTimer) {
+                window.clearTimeout(this._loaderTimer);
+            }
+            if (this._holdTimer) {
+                window.clearTimeout(this._holdTimer);
+            }
+            (_a = this._stopContinuous) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this._holdLoader) === null || _b === void 0 ? void 0 : _b.Dispose();
+            (_c = this._walkthroughBar) === null || _c === void 0 ? void 0 : _c.Dispose();
             super.Dispose();
         }
         _generateStyles() {
@@ -30859,15 +31434,14 @@
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-                width: 85px;
-                min-height: 150px;
+                width: 65px;
+                min-height: 100px;
                 background: rgba(33, 39, 42, 0.75);
-                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.18), 0px 18px 36px -4px rgba(18, 22, 25, 0.36);
+                box-shadow: 0px 0px 1px rgba(18, 22, 25, 0.18), 0px 12px 22px -2px rgba(18, 22, 25, 0.26);
                 backdrop-filter: blur(20px);
-                border-radius: 102px 102px 9px 9px;
+                border-radius: 102px 102px 30px 30px;
                 overflow: hidden;
-                padding-top: 85px;
-                padding-bottom: 5px;
+                padding-top: 60px;
                 position: absolute;
                 bottom: 10px;
                 right: 10px;
@@ -30880,27 +31454,27 @@
 
             .NextspaceNavCompassTop {
                 position: absolute;
-                height: 85px;
-                width: 85px;
-                top: -2px;
+                height: 65px;
+                width: 100%;
+                top: 0;
                 border-radius: 50%;
-                border: 1px solid #4D5358;
                 display: flex;
                 justify-content: center;
                 align-items: center;
             }
 
             .NextspaceNavCompassAxis {
-                background: #181d20;
-                border: 1px solid rgba(255, 255, 255, 0.15);
-                width: 60px;
-                height: 60px;
+                background: #121619;
+                border: 1px solid #ffffff1f;
+                width: 50px;
+                height: 50px;
                 border-radius: 50%;
                 position: relative;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
+                z-index: 2;
             }
 
             .NextspaceNavCompassAxis >svg {
@@ -30911,6 +31485,7 @@
 
             .NextspaceNavCompassArrow {
                 margin-bottom: 6px;
+                z-index: 1;
             }
 
             .NextspaceNavCompassAxis:hover .NextspaceNavCompassArrow {
@@ -30921,6 +31496,8 @@
             .NextspaceNavCompassRow {
                 display: flex;
                 align-items: center;
+                padding-top: 4px;
+                padding-bottom: 4px;
             }
 
             .NextspaceNavCompassCol {
@@ -30929,8 +31506,8 @@
             }
 
             .NextspaceNavCompassButt {
-                width: 40px;
-                height: 35px;
+                width: 28px;
+                height: 28px;
                 flex-shrink: 1;
                 flex-grow: 0;
                 display: flex;
@@ -30940,24 +31517,56 @@
                 transition: 0.3s ease;
             }
 
+            .NextspaceNavCompassButt:hover {
+                transform: translateY(-2px);
+            }
+
             .NextspaceNavCompassButt[is-disabled="true"] {
                 opacity: 0.4;
                 cursor: default;
                 pointer-events: none;
             }
 
-            .NextspaceNavCompassButt:hover {
-                transform: scale(1.2);
+            .NextspaceNavCompassLookButt {
+                position: absolute;
+                z-index: 3;
+                margin-top: -6px;
+                opacity: 0.7;
             }
 
-            .NextspaceNavCompassHorDash {
-                background-color: rgba(255, 255, 255, 0.12);
-                width: calc(100% - 10px);
-                height: 1px;
-                flex-shrink: 0;
-                flex-grow: 0;
-                margin-top: 5px;
-                margin-bottom: 5px;
+            .NextspaceNavCompassLookButt:hover {
+                opacity: 1;
+            }
+
+            .NextspaceNavCompassLookButt.look-up {
+                top: 0;
+            }
+
+            .NextspaceNavCompassLookButt.look-down {
+                bottom: -6px;
+            }
+
+            .NextspaceNavCompassRotateButt {
+                position: absolute;
+                z-index: 3;
+                margin-top: 14px;
+                width: 32px;
+                height: 28px;
+                transform: scale(0.8);
+                opacity: 0.7;
+            }
+
+            .NextspaceNavCompassRotateButt:hover {
+                transform: scale(0.85) translateY(-2px);
+                opacity: 1;
+            }
+
+            .NextspaceNavCompassRotateButt.rotate-left {
+                left: -6px;
+            }
+
+            .NextspaceNavCompassRotateButt.rotate-right {
+                right: -6px;
             }
 
             .NextspaceNavCompassVerDash {
@@ -30974,13 +31583,22 @@
 
             .NextspaceNavCompassDimToggle {
                 background: #121619;
-                border-radius: 6px;
-                width: calc(100% - 10px);
+                width: 100%;
+                margin-left: auto;
+                margin-right: auto;
                 height: 24px;
                 flex-grow: 0;
                 flex-shrink: 1;
-                padding: 2px;
+                padding: 2px 0;
                 display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                transition: 0.3s ease;
+                font-size: 12px;
+                font-family: Arial, Helvetica, sans-serif;
+                border: 1px solid #ffffff1f;
+                border-radius: 0 0 9px 9px;
             }
 
             .NextspaceNavCompassDimToggleButt {
@@ -30991,12 +31609,21 @@
                 flex-grow: 1;
                 flex-shrink: 1;
                 width: 100%;
+                height: 100%;
                 transition: 0.3s ease;
                 cursor: pointer;
                 opacity: 0.4;
                 color: white;
-                font-size: 12px;
-                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            .NextspaceNavCompassDimToggleButt:first-child {
+                margin-left: 2px;
+                border-radius: 2px 2px 1px 6px;
+            }
+
+            .NextspaceNavCompassDimToggleButt:last-child {
+                margin-right: 2px;
+                border-radius: 2px 2px 6px 1px;
             }
 
             .NextspaceNavCompassDimToggleButt[is-selected="true"] {
@@ -31004,6 +31631,12 @@
                 background-color: #4D5358;
                 box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.12);
             }
+
+            .NextspaceNavCompassDimToggle[is-disabled="true"] {
+                opacity: 0.7;
+                cursor: default;
+                pointer-events: none;
+            }
         `;
             document.head.appendChild(style);
         }
@@ -31013,34 +31646,24 @@
             const top = document.createElement("div");
             top.className = "NextspaceNavCompassTop";
             element.appendChild(top);
+            this._generateLookButtons(top);
+            this._generateRotateButtons(top);
+            this._generateAxis(top);
+            this._generateZoomRow(element);
+            this._generateExtraTools(element);
+            this._generateDimensionToggle(element);
+            this.Container.appendChild(element);
+            this._element = element;
+            this._update2d3d();
+        }
+        _generateAxis(top) {
             const axis = document.createElement("div");
             axis.className = "NextspaceNavCompassAxis";
             axis.setAttribute("title", "Click to reset north");
             top.appendChild(axis);
-            axis.addEventListener("click", () => {
-                this._clickResetNorth();
-            });
+            axis.addEventListener("click", () => this._clickResetNorth());
             axis.innerHTML = `
-            <svg width="72" height="72" viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="46" width="2" height="8" rx="1" fill="#FF3D00"/>
-                <rect x="46" y="86" width="2" height="8" rx="1" fill="#4D5254"/>
-                <rect x="94" y="46" width="2" height="8" rx="1" transform="rotate(90 94 46)" fill="#4D5254"/>
-                <rect x="8" y="46" width="2" height="8" rx="1" transform="rotate(90 8 46)" fill="#4D5254"/>
-                <rect x="79.5269" y="13.0589" width="2" height="8" rx="1" transform="rotate(45 79.5269 13.0589)" fill="#4D5254"/>
-                <rect x="18.7157" y="73.8701" width="2" height="8" rx="1" transform="rotate(45 18.7157 73.8701)" fill="#4D5254"/>
-                <rect x="80.9412" y="79.5269" width="2" height="8" rx="1" transform="rotate(135 80.9412 79.5269)" fill="#4D5254"/>
-                <rect x="20.1299" y="18.7157" width="2" height="8" rx="1" transform="rotate(135 20.1299 18.7157)" fill="#4D5254"/>
-                <rect x="28.8555" y="5.80811" width="2" height="4" rx="1" transform="rotate(-22.5 28.8555 5.80811)" fill="#505456"/>
-                <rect x="61.7662" y="85.2617" width="2" height="4" rx="1" transform="rotate(-22.5 61.7662 85.2617)" fill="#505456"/>
-                <rect x="88.1919" y="28.8553" width="2" height="4" rx="1" transform="rotate(67.5 88.1919 28.8553)" fill="#505456"/>
-                <rect x="8.73828" y="61.7661" width="2" height="4" rx="1" transform="rotate(67.5 8.73828 61.7661)" fill="#505456"/>
-                <rect x="63.2969" y="5.04272" width="2" height="4" rx="1" transform="rotate(22.5 63.2969 5.04272)" fill="#505456"/>
-                <rect x="30.386" y="84.4963" width="2" height="4" rx="1" transform="rotate(22.5 30.386 84.4963)" fill="#505456"/>
-                <rect x="88.9572" y="63.2969" width="2" height="4" rx="1" transform="rotate(112.5 88.9572 63.2969)" fill="#505456"/>
-                <rect x="9.50354" y="30.3861" width="2" height="4" rx="1" transform="rotate(112.5 9.50354 30.3861)" fill="#505456"/>
-            </svg>
-
-            <svg class="NextspaceNavCompassArrow" width="28" height="35" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg class="NextspaceNavCompassArrow" width="21" height="26.25" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M31.544 39.666C31.969 39.29 32.114 38.682 31.905 38.15L17.229 0.845C17.028 0.334 16.542 0 16.001 0C15.46 0 14.974 0.335 14.773 0.846L0.0950303 38.155C-0.11397 38.687 0.0310303 39.295 0.45603 39.67C0.88103 40.046 1.49303 40.106 1.98203 39.821L14.699 32.401C15.515 31.925 16.518 31.925 17.333 32.401L30.019 39.816C30.507 40.101 31.12 40.041 31.545 39.665L31.544 39.666Z" fill="url(#paint0_linear_363_9865)"/>
                 <path d="M16.001 0C15.46 0 14.974 0.335 14.773 0.846L0.0950303 38.155C-0.11397 38.687 0.0310303 39.295 0.45603 39.67C0.88103 40.046 1.49303 40.106 1.98203 39.821L14.699 32.401C15.103 32.165 15.552 32.047 16.002 32.045V0H16.001Z" fill="#1192E8"/>
                 <path d="M0.454956 39.67C0.879956 40.046 1.49196 40.106 1.98096 39.821L14.698 32.401C15.102 32.165 15.551 32.047 16.001 32.045V24.844L0.454956 39.67Z" fill="url(#paint1_linear_363_9865)"/>
@@ -31062,214 +31685,370 @@
             </svg>
         `;
             this._axis = axis;
-            const rotateRow = document.createElement("div");
-            rotateRow.className = "NextspaceNavCompassRow";
-            rotateRow.innerHTML = `
-            <div class="NextspaceNavCompassButt">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M8 12.5C8 16.743 10.5205 20.389 14.1445 22.043C14.6875 22.291 15.3286 22.0152 15.5176 21.4492C15.6776 20.9702 15.4522 20.4473 14.9922 20.2383C12.0482 18.9023 10 15.943 10 12.5C10 10.3219 10.8297 8.34307 12.1777 6.83983L15.1465 9.80858C15.3415 10.0036 15.6585 10.0036 15.8535 9.80858C15.9505 9.71058 16 9.58306 16 9.45506L16 2.95506C16 2.68985 15.8946 2.43549 15.7071 2.24795C15.5196 2.06042 15.2652 1.95506 15 1.95506L8.5 1.95506C8.372 1.95506 8.24348 2.00355 8.14648 2.10155C7.95148 2.29655 7.95148 2.61358 8.14648 2.80858L10.7695 5.43163C9.05703 7.29483 8 9.76796 8 12.5Z" fill="#A2A9B0"/>
-                </svg>
-            </div>
-
-            <div class="NextspaceNavCompassButt">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M16 12.5C16 16.743 13.4795 20.389 9.85547 22.043C9.31247 22.291 8.67142 22.0152 8.48242 21.4492C8.32242 20.9702 8.54781 20.4473 9.00781 20.2383C11.9518 18.9023 14 15.943 14 12.5C14 10.3219 13.1703 8.34307 11.8223 6.83983L8.85352 9.80858C8.65852 10.0036 8.34149 10.0036 8.14648 9.80858C8.04948 9.71058 8 9.58306 8 9.45506L8 2.95506C8 2.68985 8.10536 2.43549 8.29289 2.24795C8.48043 2.06042 8.73478 1.95506 9 1.95506L15.5 1.95506C15.628 1.95506 15.7565 2.00355 15.8535 2.10155C16.0485 2.29655 16.0485 2.61358 15.8535 2.80858L13.2305 5.43163C14.943 7.29483 16 9.76796 16 12.5Z" fill="#A2A9B0"/>
-                </svg>
-            </div>
+        }
+        _generateLookButtons(top) {
+            const lookUp = document.createElement("div");
+            lookUp.className = "NextspaceNavCompassButt NextspaceNavCompassLookButt look-up";
+            lookUp.innerHTML = `
+            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 8L8 1L15 8" stroke="#A2A9B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
         `;
-            element.appendChild(rotateRow);
-            const rotateLeft = rotateRow.children[0];
-            const rotateRight = rotateRow.children[1];
-            rotateLeft.addEventListener("click", () => {
-                this._doRotate(-Math.PI * 0.25);
+            top.appendChild(lookUp);
+            this._attachHold(lookUp, {
+                action: () => this._clickLookUp(),
+                continuousAction: () => StartContinuousLook({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    lookUp: true,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
-            rotateRight.addEventListener("click", () => {
-                this._doRotate(Math.PI * 0.25);
+            this._lookUp = lookUp;
+            const lookDown = document.createElement("div");
+            lookDown.className = "NextspaceNavCompassButt NextspaceNavCompassLookButt look-down";
+            lookDown.innerHTML = `
+            <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 1L8 8L1 1" stroke="#A2A9B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        `;
+            top.appendChild(lookDown);
+            this._attachHold(lookDown, {
+                action: () => this._clickLookDown(),
+                continuousAction: () => StartContinuousLook({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    lookUp: false,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
-            const horDash = document.createElement("div");
-            horDash.className = "NextspaceNavCompassHorDash";
-            element.appendChild(horDash);
-            const etcRow = document.createElement("div");
-            etcRow.className = "NextspaceNavCompassRow";
-            etcRow.innerHTML = `
-            <div class="NextspaceNavCompassCol">
-                <div class="NextspaceNavCompassButt">
-                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1 8L8 1L15 8" stroke="#A2A9B0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                </div>
-
-                <div class="NextspaceNavCompassButt">
-                    <svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M15 1L8 8L1 1" stroke="#A2A9B0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                </div>
-            </div>
-            <div class="NextspaceNavCompassVerDash"></div>
-            <div class="NextspaceNavCompassCol">
-                <div class="NextspaceNavCompassButt">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M8 1V15" stroke="#A2A9B0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                        <path d="M15 8L1 8" stroke="#A2A9B0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                </div>
-
-                <div class="NextspaceNavCompassButt">
-                    <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M15 1L1 0.999999" stroke="#A2A9B0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                </div>
-            </div>
+            this._lookDown = lookDown;
+        }
+        _rotateIconSvg(flip) {
+            const transform = flip ? "scaleX(-1) rotate(145deg)" : "rotate(145deg)";
+            return `
+            <svg style="transform: ${transform}" width="22" height="22" viewBox="0 0 565.3 533.667" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g transform="translate(33.5 33.5)">
+                    <path d="M0 0L97.1 97.0987C97.1 97.0987 97.1 97.0987 97.1 97.0987C98.7 98.701 98.7 101.3 97.1 102.9C97.1 102.9 97.1 102.9 97.1 102.9L0 200" fill="none" stroke-width="67" stroke="#A2A9B0" stroke-linecap="round" stroke-linejoin="round" transform="translate(400 0)"/>
+                    <path d="M466.667 0C466.667 0 350 0 350 0C156.7 0 0 156.7 0 350C0 350 0 366.667 0 366.667" fill="none" stroke-width="67" stroke="#A2A9B0" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 100)"/>
+                </g>
+            </svg>
         `;
-            element.appendChild(etcRow);
-            const lookUp = etcRow.children[0].children[0];
-            this._up = lookUp;
-            const lookDown = etcRow.children[0].children[1];
-            lookUp.addEventListener("click", () => {
-                this._doLook(true);
+        }
+        _generateRotateButtons(top) {
+            const rotateLeft = document.createElement("div");
+            rotateLeft.className = "NextspaceNavCompassButt NextspaceNavCompassRotateButt rotate-left";
+            rotateLeft.innerHTML = this._rotateIconSvg(true);
+            top.appendChild(rotateLeft);
+            this._attachHold(rotateLeft, {
+                action: () => this._clickRotate(-Math.PI * 0.25),
+                continuousAction: () => StartContinuousRotate({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    rotateLeft: true,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
-            this._down = lookDown;
-            lookDown.addEventListener("click", () => {
-                this._doLook(false);
+            const rotateRight = document.createElement("div");
+            rotateRight.className = "NextspaceNavCompassButt NextspaceNavCompassRotateButt rotate-right";
+            rotateRight.innerHTML = this._rotateIconSvg(false);
+            top.appendChild(rotateRight);
+            this._attachHold(rotateRight, {
+                action: () => this._clickRotate(Math.PI * 0.25),
+                continuousAction: () => StartContinuousRotate({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    rotateLeft: false,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
-            const zoomIn = etcRow.children[2].children[0];
-            const zoomOut = etcRow.children[2].children[1];
-            zoomIn.addEventListener("click", () => {
-                this._doZoom(true);
+        }
+        _generateZoomRow(element) {
+            const row = document.createElement("div");
+            row.className = "NextspaceNavCompassRow";
+            element.appendChild(row);
+            const zoomIn = document.createElement("div");
+            zoomIn.className = "NextspaceNavCompassButt";
+            zoomIn.innerHTML = `
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8 1V15" stroke="#A2A9B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M15 8L1 8" stroke="#A2A9B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        `;
+            row.appendChild(zoomIn);
+            this._attachHold(zoomIn, {
+                action: () => this._clickZoom(true),
+                continuousAction: () => StartContinuousZoom({
+                    viewer: this._viewer,
+                    zoomIn: true,
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
-            zoomOut.addEventListener("click", () => {
-                this._doZoom(false);
+            const zoomOut = document.createElement("div");
+            zoomOut.className = "NextspaceNavCompassButt";
+            zoomOut.innerHTML = `
+            <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M15 1L1 0.999999" stroke="#A2A9B0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        `;
+            row.appendChild(zoomOut);
+            this._attachHold(zoomOut, {
+                action: () => this._clickZoom(false),
+                continuousAction: () => StartContinuousZoom({
+                    viewer: this._viewer,
+                    zoomIn: false,
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                })
             });
+        }
+        _generateExtraTools(element) {
+            const row = document.createElement("div");
+            row.className = "NextspaceNavCompassRow";
+            row.style.paddingTop = "0";
+            row.style.paddingBottom = "8px";
+            element.appendChild(row);
+            const walkthroughButt = document.createElement("div");
+            walkthroughButt.className = "NextspaceNavCompassButt";
+            walkthroughButt.setAttribute("title", "Toggle Walkthrough mode");
+            walkthroughButt.innerHTML = this._walkthroughIconSvg(false);
+            walkthroughButt.addEventListener("click", () => this._toggleWalkthrough());
+            row.appendChild(walkthroughButt);
+            this._walkthroughButt = walkthroughButt;
+            const vrButt = document.createElement("div");
+            vrButt.className = "NextspaceNavCompassButt";
+            vrButt.setAttribute("title", "Toggle VR mode");
+            vrButt.innerHTML = this._vrIconSvg(false);
+            vrButt.addEventListener("click", () => this._toggleVR());
+            row.appendChild(vrButt);
+            this._vrButt = vrButt;
+            this._fullscreenChange = () => {
+                if (Cesium.Fullscreen.fullscreen || !this._isVR) {
+                    return;
+                }
+                this._setVR(false);
+            };
+            document.addEventListener("fullscreenchange", this._fullscreenChange);
+            document.addEventListener("webkitfullscreenchange", this._fullscreenChange);
+        }
+        _walkthroughIconSvg(active) {
+            const color = active ? "#4D9CF8" : "#A2A9B0";
+            return `
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.5033 4C16.8406 4 16.205 4.26339 15.7364 4.73223C15.2678 5.20107 15.0045 5.83696 15.0045 6.5C15.0045 7.16304 15.2678 7.79893 15.7364 8.26777C16.205 8.73661 16.8406 9 17.5033 9C18.166 9 18.8015 8.73661 19.2701 8.26777C19.7388 7.79893 20.002 7.16304 20.002 6.5C20.002 5.83696 19.7388 5.20107 19.2701 4.73223C18.8015 4.26339 18.166 4 17.5033 4ZM15.5023 10C15.1066 10 14.7378 10.1015 14.4052 10.2656C14.3549 10.2813 14.306 10.3009 14.2588 10.3242L10.3448 12.1992C10.1322 12.3003 9.96216 12.4733 9.86453 12.6875L8.09784 16.5859C8.0405 16.7059 8.00764 16.836 8.00118 16.9688C7.99472 17.1016 8.01479 17.2344 8.06021 17.3593C8.10563 17.4843 8.1755 17.5989 8.26572 17.6965C8.35594 17.7941 8.46471 17.8727 8.58567 17.9278C8.70662 17.9828 8.83733 18.0132 8.97016 18.0171C9.10299 18.0211 9.23526 17.9984 9.35924 17.9506C9.48323 17.9028 9.59644 17.8307 9.69225 17.7386C9.78806 17.6464 9.86454 17.5361 9.91724 17.4141L11.3638 14.2246L12.658 13.8359C12.3918 15.2411 12.0603 16.9816 12.0587 16.9902C12.0583 16.9923 12.0572 16.994 12.0568 16.9961C12.0568 16.9961 12.0568 17 12.0568 17C12.024 17.1615 12.006 17.3288 12.006 17.5C12.006 18.271 12.3631 18.9514 12.9118 19.4102L12.9196 19.4336L16.8103 22.5L17.923 26.6953L18.0225 27.1953C18.0677 27.4221 18.19 27.6263 18.3687 27.773C18.5474 27.9197 18.7714 27.9999 19.0025 28C19.2676 28 19.5218 27.8946 19.7093 27.7071C19.8967 27.5196 20.002 27.2652 20.002 27C20.0019 26.9344 19.9954 26.869 19.9825 26.8047V26.8008C19.9812 26.7969 19.9799 26.793 19.9786 26.7891L18.983 21.8047C18.9562 21.6693 18.9017 21.541 18.8229 21.4277L16.9528 18.0039C16.9546 17.9951 16.953 17.9854 16.9547 17.9766L17.9366 13.0625L17.9347 13.0605C17.9762 12.8798 18.003 12.6933 18.003 12.5C18.003 11.1207 16.8837 10.0011 15.5023 10ZM19.3871 13.7422L18.9186 16.0078L19.3344 16.3809C19.4093 16.4489 19.4962 16.5059 19.5882 16.5469L22.5866 17.9102V17.9082C22.7165 17.9681 22.8576 17.9994 23.0005 18C23.2656 18 23.5198 17.8946 23.7073 17.7071C23.8947 17.5196 24 17.2652 24 17C23.9996 16.8084 23.9442 16.6209 23.8404 16.4599C23.7366 16.2989 23.5887 16.1711 23.4144 16.0918V16.0898L20.5545 14.7891L19.3871 13.7422ZM11.9631 20.7246L11.4497 22.4219L9.22228 26.3613L9.1481 26.4863L9.15005 26.4883C9.13825 26.5087 9.12718 26.5296 9.11686 26.5508L9.10905 26.5625C9.0425 26.6987 9.00778 26.8484 9.00754 27C9.00754 27.2652 9.11285 27.5196 9.30029 27.7071C9.48773 27.8946 9.74195 28 10.007 28C10.1647 27.9999 10.3201 27.9626 10.4606 27.891C10.601 27.8193 10.7225 27.7155 10.8152 27.5879H10.8172L10.8328 27.5645C10.8334 27.5632 10.8341 27.5618 10.8347 27.5605L14.1592 22.5117L11.9631 20.7246Z" fill="${color}"/>
+            </svg>
+        `;
+        }
+        _vrIconSvg(active) {
+            const color = active ? "#4D9CF8" : "#A2A9B0";
+            return `
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+                <path d="M20 6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-1.6-.8l-1.6-2.13a1 1 0 0 0-1.6 0L9.6 17.2A2 2 0 0 1 8 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"/>
+            </svg>
+        `;
+        }
+        _generateDimensionToggle(element) {
             const dimToggle = document.createElement("div");
             dimToggle.className = "NextspaceNavCompassDimToggle";
             dimToggle.innerHTML = `
-            <div class="NextspaceNavCompassDimToggleButt" is-selected="false">
-                3D
-            </div>
-
-            <div class="NextspaceNavCompassDimToggleButt" is-selected="false">
-                2D
-            </div>
+            <div class="NextspaceNavCompassDimToggleButt" is-selected="false">3D</div>
+            <div class="NextspaceNavCompassDimToggleButt" is-selected="false">2D</div>
         `;
             element.appendChild(dimToggle);
-            const butt2d = dimToggle.children[1];
-            this._2d = butt2d;
-            butt2d.addEventListener("click", () => {
-                this._toggle2d3d();
-            });
+            this._dimensionToggle = dimToggle;
             const butt3d = dimToggle.children[0];
+            const butt2d = dimToggle.children[1];
             this._3d = butt3d;
-            butt3d.addEventListener("click", () => {
-                this._toggle2d3d();
-            });
-            this.Container.appendChild(element);
-            this._element = element;
-            this._update2d3d();
+            this._2d = butt2d;
+            butt3d.addEventListener("click", () => this._toggle2d3d());
+            butt2d.addEventListener("click", () => this._toggle2d3d());
+        }
+        _attachHold(el, params) {
+            const start = (e) => {
+                e.stopPropagation();
+                this._handlePointerDown(params.action, params.continuousAction, e);
+            };
+            el.addEventListener("mousedown", start);
+            el.addEventListener("touchstart", start, { passive: true });
+        }
+        _handlePointerDown(action, continuousAction, e) {
+            const x = "clientX" in e ? e.clientX : e.touches[0].clientX;
+            const y = "clientY" in e ? e.clientY : e.touches[0].clientY;
+            const isTouch = "touches" in e;
+            this._didActivateContinuous = false;
+            this._pendingSingleAction = action;
+            this._loaderTimer = window.setTimeout(() => {
+                this._holdLoader = new WidgetNavCompassHoldLoader({ x, y, durationMs: 200, isTouch });
+                this._loaderTimer = null;
+            }, HOLD_LOADER_DELAY_MS);
+            this._holdTimer = window.setTimeout(() => {
+                this._didActivateContinuous = true;
+                this._pendingSingleAction = null;
+                this._stopContinuous = continuousAction();
+                this._holdTimer = null;
+            }, HOLD_ACTIVATION_TIME_MS);
+        }
+        _handlePointerUp() {
+            var _a;
+            if (!this._holdLoader && !this._holdTimer && !this._stopContinuous && !this._loaderTimer) {
+                return;
+            }
+            if (this._loaderTimer) {
+                window.clearTimeout(this._loaderTimer);
+                this._loaderTimer = null;
+            }
+            if (this._holdTimer) {
+                window.clearTimeout(this._holdTimer);
+                this._holdTimer = null;
+            }
+            if (this._stopContinuous) {
+                this._stopContinuous();
+                this._stopContinuous = null;
+            }
+            if (this._pendingSingleAction && !this._didActivateContinuous) {
+                const action = this._pendingSingleAction;
+                this._pendingSingleAction = null;
+                setTimeout(() => action(), 0);
+            }
+            (_a = this._holdLoader) === null || _a === void 0 ? void 0 : _a.Dispose();
+            this._holdLoader = null;
+            this._didActivateContinuous = false;
         }
         _updateAxis() {
-            const heading = this._viewer.camera.heading;
-            const axis = this._axis;
-            axis.style.transform = `rotate(${heading}rad)`;
+            const heading = Number(this._viewer.camera.heading);
+            const headingDegrees = 360 - Cesium.Math.toDegrees(heading);
+            this._axis.style.transform = `rotate(${headingDegrees}deg)`;
         }
         _clickResetNorth() {
             const viewer = this._viewer;
             const h = viewer.camera.heading;
             const north = h < Math.PI ? h : h - Math.PI * 2;
-            this._doRotate(north);
+            this._clickRotate(north);
+        }
+        // Chains a single-tap action onto any in-flight one so animations never overlap.
+        _runOrbitAction(fn) {
+            const run = this._orbitActionChain.then(fn, fn);
+            this._orbitActionChain = run.catch(() => { });
+            return run;
+        }
+        _clickRotate(radians) {
+            this._runOrbitAction(async () => {
+                const pivot = await DoRotate({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    radians,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                });
+                this._updateStablePivot(pivot);
+            });
         }
-        _doRotate(radians) {
-            const viewer = this._viewer;
-            const TURN_SPEED = this.TURN_SPEED;
-            const left = radians < 0;
-            radians = Math.abs(radians);
-            const camera = viewer.camera;
-            const is2d = this._getIs2d();
-            const isLookingStraightDown = camera.pitch === -Math.PI / 2;
-            if (is2d || isLookingStraightDown) {
-                camera.flyTo({
-                    destination: camera.position,
-                    orientation: {
-                        heading: camera.heading + (left ? radians : -radians),
-                        pitch: camera.pitch,
-                        roll: camera.roll
-                    },
-                    duration: 0.2
+        _clickZoom(zoomIn) {
+            this._runOrbitAction(async () => {
+                const pivot = await DoZoom({
+                    viewer: this._viewer,
+                    zoomIn,
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                });
+                this._updateStablePivot(pivot);
+            });
+        }
+        _clickLookUp() {
+            if (GetIs2d(this._viewer)) {
+                return;
+            }
+            this._runOrbitAction(async () => {
+                const pivot = await DoLook({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    tiltUp: true,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                });
+                this._updateStablePivot(pivot);
+            });
+        }
+        _clickLookDown() {
+            if (GetIs2d(this._viewer)) {
+                return;
+            }
+            this._runOrbitAction(async () => {
+                const pivot = await DoLook({
+                    viewer: this._viewer,
+                    manager: this._manager,
+                    tiltUp: false,
+                    selectedIds: this._getSelectedIds(),
+                    stablePivot: this._getStablePivot(),
+                    onPivotUpdate: (p) => this._updateStablePivot(p)
+                });
+                this._updateStablePivot(pivot);
+            });
+        }
+        _toggleWalkthrough() {
+            this._setWalkthrough(!this._isWalkthroughActive);
+        }
+        _setWalkthrough(active) {
+            var _a, _b, _c;
+            this._isWalkthroughActive = active;
+            this._walkthroughButt.innerHTML = this._walkthroughIconSvg(active);
+            this._dimensionToggle.setAttribute("is-disabled", active ? "true" : "false");
+            if (active) {
+                exports.Walkthrough.Start({ viewer: this._viewer });
+                (_a = this._walkthroughBar) === null || _a === void 0 ? void 0 : _a.Dispose();
+                this._walkthroughBar = new WidgetNavCompassWalkthroughBar({
+                    viewer: this._viewer,
+                    container: this.Container,
+                    onClose: () => this._setWalkthrough(false)
                 });
             }
             else {
-                const c = viewer.canvas;
-                const center = new Cesium.Cartesian2(c.width / 2, c.height / 2);
-                const ground = exports.DrawingUtils.GetAccuratePosition(viewer, center);
-                if (!(ground === null || ground === void 0 ? void 0 : ground.x)) {
-                    return;
+                if (((_b = this._viewer) === null || _b === void 0 ? void 0 : _b.scene) && !this._viewer.isDestroyed()) {
+                    exports.Walkthrough.Stop({ viewer: this._viewer });
                 }
-                const offset = Cesium.Cartesian3.distance(camera.position, ground);
-                let r = 0;
-                const unsub = viewer.clock.onTick.addEventListener(function () {
-                    let inc = Math.PI * TURN_SPEED;
-                    if (r + inc >= radians) {
-                        unsub();
-                        inc = radians - r;
-                    }
-                    camera.lookAt(ground, new Cesium.HeadingPitchRange(camera.heading, camera.pitch, offset));
-                    left ? camera.rotateLeft(inc) : camera.rotateRight(inc);
-                    camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
-                    r += inc;
-                });
+                (_c = this._walkthroughBar) === null || _c === void 0 ? void 0 : _c.Dispose();
+                this._walkthroughBar = null;
             }
         }
-        _doZoom(zoomIn) {
-            const viewer = this._viewer;
-            const c = viewer.canvas;
-            const center = new Cesium.Cartesian2(c.width / 2, c.height / 2);
-            const camera = viewer.camera;
-            const ground = exports.DrawingUtils.GetAccuratePosition(viewer, center);
-            if (!(ground === null || ground === void 0 ? void 0 : ground.x)) {
+        _toggleVR() {
+            this._setVR(!this._isVR);
+        }
+        _setVR(active) {
+            var _a, _b;
+            const scene = (_a = this._viewer) === null || _a === void 0 ? void 0 : _a.scene;
+            if (!scene) {
                 return;
             }
-            const p = camera.position;
-            const height = Cesium.Cartesian3.distance(p, ground);
-            const mag = this.ZOOM_DISTANCE / Math.max(1, 4 - Math.log10(height));
-            const zoom = zoomIn ? 1 - mag : 1 + mag;
-            const offset = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.subtract(p, ground, new Cesium.Cartesian3), zoom, new Cesium.Cartesian3);
-            if (zoomIn && Cesium.Cartesian3.magnitude(offset) <= this.MIN_ZOOM_DISTANCE) {
-                return;
+            try {
+                scene.useWebVR = active;
+                (_b = scene.requestRender) === null || _b === void 0 ? void 0 : _b.call(scene);
+                this._isVR = active;
+                this._vrButt.innerHTML = this._vrIconSvg(active);
+            }
+            catch (e) {
+                console.warn("[VR] Failed to toggle VR mode.", e);
             }
-            const to = Cesium.Cartesian3.add(ground, offset, new Cesium.Cartesian3);
-            camera.flyTo({
-                destination: to,
-                orientation: { heading: camera.heading, pitch: camera.pitch, roll: camera.roll },
-                duration: this.ZOOM_TIME,
-                easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT
-            });
-        }
-        _doLook(tiltUp) {
-            const viewer = this._viewer;
-            let diff = 6.26 / 32;
-            if (!tiltUp) {
-                diff *= -1;
-            }
-            let current = viewer.camera.pitch;
-            current += diff;
-            viewer.camera.flyTo({
-                destination: viewer.camera.position,
-                orientation: {
-                    heading: viewer.camera.heading,
-                    pitch: current,
-                    roll: viewer.camera.roll
-                },
-                duration: 0.2
-            });
         }
         _update2d3d() {
-            const is2d = this._getIs2d();
+            const is2d = GetIs2d(this._viewer);
             this._2d.setAttribute("is-selected", is2d ? "true" : "false");
             this._3d.setAttribute("is-selected", is2d ? "false" : "true");
-            this._up.setAttribute("is-disabled", is2d ? "true" : "false");
-            this._down.setAttribute("is-disabled", is2d ? "true" : "false");
+            this._lookUp.style.display = is2d ? "none" : "flex";
+            this._lookDown.style.display = is2d ? "none" : "flex";
         }
         _toggle2d3d() {
-            const shouldBe2d = !this._getIs2d();
+            const shouldBe2d = !GetIs2d(this._viewer);
             exports.ViewUtils.Set2dStatus({
                 status: shouldBe2d,
                 viewer: this._viewer,
@@ -37512,7 +38291,7 @@
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "6.8.9";
+    const VERSION = "6.9.0";
     /**
      * Updates the environment instance used by bruce-cesium to one specified.
      * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.