vim-web 0.3.44-dev.3 → 0.3.44-dev.30

package/dist/vim-web.iife.js

@@ -45835,7 +45835,7 @@ void main() {
     }
   }
   class ElementMapping {
-    constructor(instances, instanceToElement, elementIds2, instanceMeshes) {
+    constructor(instances, instanceToElement, elementIds, instanceMeshes) {
       __publicField(this, "_instanceToElement");
       __publicField(this, "_instanceMeshes");
       __publicField(this, "_elementToInstances");
@@ -45848,17 +45848,17 @@ void main() {
       this._elementToInstances = ElementMapping.invertMap(
         this._instanceToElement
       );
-      this._elementIds = elementIds2;
-      this._elementIdToElements = ElementMapping.invertArray(elementIds2);
+      this._elementIds = elementIds;
+      this._elementIdToElements = ElementMapping.invertArray(elementIds);
       this._instanceMeshes = instanceMeshes;
     }
     static async fromG3d(g3d2, bim) {
       const instanceToElement = await bim.node.getAllElementIndex();
-      const elementIds2 = await bim.element.getAllId();
+      const elementIds = await bim.element.getAllId();
       return new ElementMapping(
         Array.from(g3d2.instanceNodes),
         instanceToElement,
-        elementIds2,
+        elementIds,
         g3d2.instanceMeshes
       );
     }
@@ -48874,14 +48874,14 @@ void main() {
       this._onUpdate.dispatch();
     }
     /**
-     * Size of the blur convolution on the selection outline effect.
+     * Size of the blur convolution on the selection outline effect. Minimum 2.
      */
     get outlineBlur() {
       return this.outline.strokeBlur;
     }
     set outlineBlur(value) {
       if (this.outline.strokeBlur === value) return;
-      this.outline.strokeBlur = value;
+      this.outline.strokeBlur = Math.max(value, 2);
       this._onUpdate.dispatch();
     }
     /**
@@ -50633,8 +50633,12 @@ void main() {
     }
     frameSphere(sphere, forward) {
       const direction = this.getNormalizedDirection(forward);
-      const fov2 = this._camera.camPerspective.camera.fov * Math.PI / 180;
-      const dist2 = sphere.radius * 1.2 / Math.tan(fov2 / 2);
+      this._camera.frustrumSizeAt(sphere.center);
+      const vFov = this._camera.camPerspective.camera.fov * Math.PI / 180;
+      const vDist = sphere.radius * 1.2 / Math.tan(vFov / 2);
+      const hFov = vFov * this._camera.camPerspective.camera.aspect;
+      const hDist = sphere.radius * 1.2 / Math.tan(hFov / 2);
+      const dist2 = Math.max(vDist, hDist);
       const safeDist = Math.max(dist2, this._camera.camPerspective.camera.near * 2);
       const pos = direction.multiplyScalar(-safeDist).add(sphere.center);
       this.set(pos, sphere.center);
@@ -50664,7 +50668,7 @@ void main() {
     }
     init(duration) {
       this.cancel();
-      this._duration = duration;
+      this._duration = Math.max(duration, 0.01);
       this._clock.start();
     }
     cancel() {
@@ -50985,6 +50989,7 @@ void main() {
      * @returns {CameraMovement} The camera movement api.
      */
     lerp(duration = 1, force = false) {
+      if (duration <= 0) return this.snap(force);
       this.stop();
       this._force = force;
       this._lerp.init(duration);
@@ -51297,7 +51302,7 @@ void main() {
     KEY_Z: 90
   };
   const KeySet = new Set(Object.values(KEYS));
-  class KeyboardHandler extends InputHandler$1 {
+  let KeyboardHandler$1 = class KeyboardHandler extends InputHandler$1 {
     constructor() {
       super(...arguments);
       // Settings
@@ -51403,7 +51408,7 @@ void main() {
         this.camera.localVelocity = move;
       }
     }
-  }
+  };
   class SimpleInstanceSubmesh {
     constructor(mesh, index2) {
       __publicField(this, "mesh");
@@ -51652,7 +51657,7 @@ void main() {
       return this.raycast.object;
     }
   }
-  class TouchHandler extends InputHandler$1 {
+  let TouchHandler$1 = class TouchHandler extends InputHandler$1 {
     constructor(viewer) {
       super(viewer);
       __publicField(this, "TAP_DURATION_MS", 500);
@@ -51805,8 +51810,8 @@ void main() {
     average(p1, p2) {
       return p1.clone().lerp(p2, 0.5);
     }
-  }
-  class MouseHandler extends InputHandler$1 {
+  };
+  let MouseHandler$1 = class MouseHandler extends InputHandler$1 {
     constructor(viewer) {
       super(viewer);
       __publicField(this, "_idleDelayMs", 150);
@@ -51886,10 +51891,10 @@ void main() {
       });
       __publicField(this, "onMouseUp", (event) => {
         event.stopImmediatePropagation();
+        event.preventDefault();
         const btn = this.getButton(event);
         if (btn === this._buttonDown) return;
         this._viewer.gizmos.rectangle.visible = false;
-        event.preventDefault();
         if (!this._buttonDown) return;
         if (this.inputs.pointerActive === "rect" && this._hasMouseMoved && !this._hasCameraMoved) {
           this.onRectEnd();
@@ -52058,7 +52063,7 @@ void main() {
         this.gizmoRect.setCorners(this._downPosition, this._lastPosition);
       }
     }
-  }
+  };
   var dist = {};
   var SimpleEventDispatcher = {};
   var hasRequiredSimpleEventDispatcher;
@@ -52328,9 +52333,9 @@ void main() {
         this.touch.unregister();
       });
       this._viewer = viewer;
-      this.keyboard = new KeyboardHandler(viewer);
-      this.mouse = new MouseHandler(viewer);
-      this.touch = new TouchHandler(viewer);
+      this.keyboard = new KeyboardHandler$1(viewer);
+      this.mouse = new MouseHandler$1(viewer);
+      this.touch = new TouchHandler$1(viewer);
       this._scheme = new DefaultInputScheme(viewer);
       this.pointerActive = viewer.settings.camera.controls.orbit ? "orbit" : "look";
       this._pointerFallback = viewer.settings.camera.controls.orbit ? "look" : "orbit";
@@ -54896,7 +54901,6 @@ void main() {
      * Disposes all resources.
      */
     dispose() {
-      console.log("dispose");
       if (this._animId !== void 0) cancelAnimationFrame(this._animId);
       this._html.div.remove();
       this._viewer.renderer.remove(this._group);
@@ -55469,6 +55473,7 @@ void main() {
       __publicField(this, "_color");
       __publicField(this, "_highlightColor");
       __publicField(this, "_materials");
+      __publicField(this, "_camera");
       __publicField(this, "_camSub");
       this._materials = [matAlways, matBehind];
       this._forward = new Vector3();
@@ -55481,15 +55486,18 @@ void main() {
       this.quaternion.setFromUnitVectors(new Vector3(0, -1, 0), this._forward);
     }
     trackCamera(camera2) {
-      const rescale = () => {
-        const size = camera2.frustrumSizeAt(this.position);
-        this.scale.set(size.x * 3e-3, size.x * 3e-3, size.x * 3e-3);
-      };
-      this._camSub = camera2.onMoved.subscribe(() => rescale());
-      rescale();
+      this._camera = camera2;
+      this.update();
+      this._camSub = camera2.onMoved.subscribe(() => this.update());
+    }
+    update() {
+      if (!this._camera) return;
+      const size = this._camera.frustrumSizeAt(this.position);
+      this.scale.set(size.x * 3e-3, size.x * 3e-3, size.x * 3e-3);
     }
     setPosition(position) {
       this.position.copy(position);
+      this.update();
     }
     get forward() {
       return this._forward;
@@ -57627,7 +57635,37 @@ void main() {
     }
     return Math.min(Math.max(value, min2), max2);
   }
-  class InputMouse extends InputHandler {
+  class CaptureStateMachine {
+    constructor(canvas) {
+      __publicField(this, "_canvas");
+      __publicField(this, "state");
+      __publicField(this, "id");
+      this._canvas = canvas;
+      this.state = "none";
+      this.id = -1;
+    }
+    onPointerDown(event) {
+      if (this.state === "captured") {
+        this._canvas.releasePointerCapture(this.id);
+      }
+      this.id = event.pointerId;
+      this.state = "captured";
+    }
+    onPointerMove(event) {
+      if (this.state === "capture") {
+        this._canvas.setPointerCapture(this.id);
+        this.state = "captured";
+      }
+    }
+    onPointerUp(event) {
+      if (this.state === "captured") {
+        this._canvas.releasePointerCapture(this.id);
+        this.state = "none";
+        this.id = -1;
+      }
+    }
+  }
+  class MouseHandler extends InputHandler {
     constructor(canvas, rpc, selection, camera2) {
       super();
       __publicField(this, "_rpc");
@@ -57635,45 +57673,47 @@ void main() {
       __publicField(this, "_lastMouseDownPosition", new Vector2(0, 0));
       __publicField(this, "_selection");
       __publicField(this, "_camera");
+      __publicField(this, "_capture");
       this._canvas = canvas;
       this._rpc = rpc;
       this._selection = selection;
       this._camera = camera2;
+      this._capture = new CaptureStateMachine(canvas);
     }
     register() {
       this.reg(this._canvas, "pointerdown", (e) => {
-        this.handlePointerDown(e);
+        this.onPointerDown(e);
       });
       this.reg(this._canvas, "pointerup", (e) => {
-        this.handlePointerUp(e);
+        this.onPointerUp(e);
       });
       this.reg(this._canvas, "pointermove", (e) => {
-        this.handlePointerMove(e);
+        this.onPointerMove(e);
       });
       this.reg(this._canvas, "wheel", (e) => {
-        this.handleMouseScroll(e);
+        this.onMouseScroll(e);
       });
       this.reg(this._canvas, "dblclick", (e) => {
-        this.handleDoubleClick(e);
+        this.onDoubleClick(e);
       });
     }
     dispose() {
       this.unregister();
     }
-    handlePointerDown(event) {
+    onPointerDown(event) {
       if (event.pointerType !== "mouse") return;
       const pos = this.relativePosition(event);
       this._rpc.RPCMouseButtonEvent(pos, event.button, true);
       this._lastMouseDownPosition = pos;
-      this._canvas.setPointerCapture(event.pointerId);
+      this._capture.onPointerDown(event);
       event.preventDefault();
     }
-    handlePointerUp(event) {
+    onPointerUp(event) {
       if (event.pointerType !== "mouse") return;
       const pos = this.relativePosition(event);
       this._rpc.RPCMouseButtonEvent(pos, event.button, false);
       this.handleMouseClick(event);
-      this._canvas.releasePointerCapture(event.pointerId);
+      this._capture.onPointerUp(event);
       event.preventDefault();
     }
     async handleMouseClick(event) {
@@ -57693,21 +57733,24 @@ void main() {
         this._selection.select(hit.vim, hit.nodeIndex);
       }
     }
-    handlePointerMove(event) {
+    onPointerMove(event) {
       if (event.pointerType !== "mouse") return;
       this._canvas.focus();
+      this._capture.onPointerMove(event);
       const pos = this.relativePosition(event);
       this._rpc.RPCMouseMoveEvent(pos);
     }
-    async handleDoubleClick(event) {
+    async onDoubleClick(event) {
       const pos = this.relativePosition(event);
       const hit = await this._selection.hitTest(pos);
       if (hit) {
         this._camera.frameVim(hit.vim, [hit.nodeIndex], 1);
+      } else {
+        this._camera.frameAll(1);
       }
       event.preventDefault();
     }
-    handleMouseScroll(event) {
+    onMouseScroll(event) {
       this._rpc.RPCMouseScrollEvent(Math.sign(event.deltaY));
       event.preventDefault();
     }
@@ -57719,7 +57762,7 @@ void main() {
       );
     }
   }
-  class InputTouch extends InputHandler {
+  class TouchHandler extends InputHandler {
     constructor(canvas, rpc) {
       super();
       __publicField(this, "_rpc");
@@ -58016,7 +58059,7 @@ void main() {
     // -------------------- SectionBox -------------------
     writeSectionBoxState(data2) {
       this.writeBoolean(data2.visible);
-      this.writeBoolean(data2.interactible);
+      this.writeBoolean(data2.interactive);
       this.writeBoolean(data2.clip);
       this.writeBox3(data2.box);
     }
@@ -58171,12 +58214,12 @@ void main() {
     }
     readSectionBoxState() {
       const visible2 = this.readBoolean();
-      const interactible = this.readBoolean();
+      const interactive = this.readBoolean();
       const clip = this.readBoolean();
       const box = this.readBox3();
       return {
         visible: visible2,
-        interactible,
+        interactive,
         clip,
         box
       };
@@ -59648,7 +59691,7 @@ void main() {
     "Control",
     "Shift"
   ]);
-  class InputKeyboard extends InputHandler {
+  class KeyboardHandler extends InputHandler {
     constructor(rpc, selection, camera2, inputs) {
       super();
       __publicField(this, "_rpc");
@@ -59687,15 +59730,19 @@ void main() {
       switch (event.key) {
         case "Escape":
           this._selection.clear();
+          event.preventDefault();
           break;
         case "f":
           this.frameContext();
+          event.preventDefault();
           break;
         case "Home":
           this._camera.restoreSavedPosition();
+          event.preventDefault();
           break;
         case " ":
           this._inputs.mode = this._inputs.mode === InputMode.Orbit ? InputMode.Free : InputMode.Orbit;
+          event.preventDefault();
           break;
       }
     }
@@ -59726,9 +59773,9 @@ void main() {
       this._canvas = canvas;
       this._rpc = rpc;
       this._renderer = renderer;
-      this._inputsMouse = new InputMouse(this._canvas, this._rpc, selection, camera2);
-      this._inputsTouch = new InputTouch(this._canvas, this._rpc);
-      this._keyboard = new InputKeyboard(this._rpc, selection, camera2, this);
+      this._inputsMouse = new MouseHandler(this._canvas, this._rpc, selection, camera2);
+      this._inputsTouch = new TouchHandler(this._canvas, this._rpc);
+      this._keyboard = new KeyboardHandler(this._rpc, selection, camera2, this);
     }
     onConnect() {
       this.register();
@@ -60737,11 +60784,20 @@ Averrage Date/Second ${avgDataRatePS} kb
      */
     removeHighlight(nodes, fallback) {
       const toUpdate = [];
-      for (const node of nodes) {
-        const state = this._nodeStates.get(node);
-        if (state === "highlighted") {
-          this._nodeStates.set(node, fallback);
-          toUpdate.push(node);
+      if (nodes === "all") {
+        for (const [node, state] of this._nodeStates.entries()) {
+          if (state === "highlighted") {
+            this._nodeStates.set(node, fallback);
+            toUpdate.push(node);
+          }
+        }
+      } else {
+        for (const node of nodes) {
+          const state = this._nodeStates.get(node);
+          if (state === "highlighted") {
+            this._nodeStates.set(node, fallback);
+            toUpdate.push(node);
+          }
         }
       }
       if (toUpdate.length > 0) {
@@ -60812,8 +60868,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (nodes === "all") {
         this._rpc.RPCClearMaterialOverrides(this._handle);
       } else {
-        const ids = new Array(nodes.length).fill(MaterialHandles.Invalid);
-        this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids);
+        const ids2 = new Array(nodes.length).fill(MaterialHandles.Invalid);
+        this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids2);
       }
     }
     updateMap(nodes, state) {
@@ -60974,7 +61030,6 @@ Averrage Date/Second ${avgDataRatePS} kb
      * Cleans up resources by removing resize observer and clearing timeouts
      */
     dispose() {
-      console.log("Disposing Viewport");
       this._clearTimeout();
       this._observer.disconnect();
     }
@@ -61235,11 +61290,15 @@ Averrage Date/Second ${avgDataRatePS} kb
      * Handles camera initialization when connection is established
      */
     onConnect() {
+      this.set(new Vector3(-1e3, 1e3, 1e3), new Vector3(0, 0, 0), 0);
       this.restoreLastPosition();
     }
     onCameraPose(pose) {
       this._lastPosition = pose;
     }
+    set(position, target, blendTime = this._defaultBlendTime) {
+      this._rpc.RPCSetCameraPosition(new Segment(position, target), blendTime);
+    }
     /**
      * Pauses or resumes rendering
      * @param value - True to pause rendering, false to resume
@@ -61303,6 +61362,9 @@ Averrage Date/Second ${avgDataRatePS} kb
     get onValueChanged() {
       return this._onValueChanged.asEvent();
     }
+    get() {
+      return this._selectedNodes;
+    }
     /**
      * Gets the total number of selected nodes across all VIMs.
      * @returns The total count of selected nodes.
@@ -61338,7 +61400,7 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param node - A single node index or array of node indices to select.
      */
     select(vim, node) {
-      this.clear();
+      this._clear();
       this.add(vim, node);
     }
     /**
@@ -61413,6 +61475,12 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param vim - Optional. If provided, only clears selections for the specified VIM.
      */
     clear(vim) {
+      const changed = this._clear(vim);
+      if (changed) {
+        this._onValueChanged.dispatch();
+      }
+    }
+    _clear(vim) {
       let changed = false;
       this._selectedNodes.forEach((nodes, v) => {
         if (vim === void 0 || v === vim) {
@@ -61421,9 +61489,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         }
       });
       this._selectedNodes.clear();
-      if (changed) {
-        this._onValueChanged.dispatch();
-      }
+      return changed;
     }
     /**
      * Calculates the bounding box encompassing all selected nodes.
@@ -61445,8 +61511,7 @@ Averrage Date/Second ${avgDataRatePS} kb
      * Should be called when the selection manager is no longer needed.
      */
     dispose() {
-      this.clear();
-      this._selectedNodes = /* @__PURE__ */ new Map();
+      this._clear();
     }
   }
   class VimCollection {
@@ -61743,13 +61808,14 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   class SectionBox {
     constructor(rpc) {
-      __publicField(this, "_visible", true);
-      __publicField(this, "_interactible", true);
-      __publicField(this, "_clip", true);
+      __publicField(this, "_visible", false);
+      __publicField(this, "_interactible", false);
+      __publicField(this, "_clip", false);
       __publicField(this, "_box", new Box3());
       __publicField(this, "_rpc");
       __publicField(this, "_interval");
       __publicField(this, "_animationFrame");
+      __publicField(this, "_pullId", 0);
       // Signals
       __publicField(this, "_onUpdate", new distExports$1.SignalDispatcher());
       this._rpc = rpc;
@@ -61766,6 +61832,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._interval = setInterval(() => this.pull(), 1e3);
     }
     scheduleUpdate() {
+      this._pullId++;
       if (this._animationFrame) return;
       this._animationFrame = requestAnimationFrame(() => {
         this._animationFrame = void 0;
@@ -61774,13 +61841,15 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     async pull() {
       if (this.needUpdate) return;
+      const id2 = this._pullId;
       const state = await this._rpc.RPCGetSectionBox();
+      if (id2 !== this._pullId) return;
       let changed = false;
-      if (state.visible !== this._visible || state.interactible !== this._interactible || state.clip !== this._clip || state.box !== this._box) {
+      if (state.visible !== this._visible || state.interactive !== this._interactible || state.clip !== this._clip || state.box !== this._box) {
         changed = true;
       }
       this._visible = state.visible;
-      this._interactible = state.interactible;
+      this._interactible = state.interactive;
       this._clip = state.clip;
       this._box = state.box;
       if (changed) {
@@ -61790,7 +61859,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     async push() {
       await this._rpc.RPCSetSectionBox({
         visible: this._visible,
-        interactible: this._interactible,
+        interactive: this._interactible,
         clip: this._clip,
         box: this._box
       });
@@ -66817,6 +66886,25 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     );
   }
+  function autoCamera({ height, width, fill: fill2 = "", className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 242.35934,69.720521 V 192.19034 c 0,9.46501 -7.97359,15.37204 -14.35248,10.67406 l -39.68884,-29.41993 v 8.38267 c 0,25.1595 -15.90243,45.64407 -35.51391,45.64407 H 48.520099 C 28.90861,227.51727 13.006195,206.98664 13.006195,181.80411 V 80.187338 c 0,-25.159506 15.902415,-45.644066 35.513904,-45.644066 H 152.55325 c 19.57566,0 35.51392,20.4385 35.51392,45.644066 v 8.382665 L 227.756,59.150074 c 6.33409,-4.801607 14.60334,1.162981 14.60334,10.570447 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: "white",
+          d: "m 134.24221,179.28573 -6.38,-16.771 H 73.539201 l -6.38,17.135 c -2.492,6.684 -4.618,11.211 -6.38,13.581 -1.763,2.309 -4.649,3.464 -8.659,3.464 -3.403,0 -6.411,-1.246 -9.024,-3.737 -2.613,-2.492 -3.919,-5.317 -3.919,-8.477 0,-1.823 0.304,-3.706 0.911,-5.651 0.608,-1.944 1.611,-4.648 3.008,-8.112 l 34.18,-86.771005 c 0.972,-2.491 2.127,-5.469 3.463,-8.932 1.398,-3.525 2.856,-6.441 4.375,-8.75 1.58,-2.309 3.616,-4.163 6.107,-5.56 2.552005,-1.458 5.682005,-2.188 9.388009,-2.188 3.768,0 6.897,0.73 9.388,2.188 2.552,1.397 4.588,3.22 6.107,5.469 1.58,2.248 2.886,4.678 3.919,7.291 1.094,2.552 2.461,5.986 4.102,10.3 l 34.909,86.224005 c 2.734,6.562 4.101,11.332 4.101,14.31 0,3.099 -1.306,5.955 -3.919,8.568 -2.552,2.552 -5.651,3.828 -9.297,3.828 -2.126,0 -3.949,-0.395 -5.468,-1.185 -1.52,-0.729 -2.796,-1.732 -3.829,-3.008 -1.033,-1.337 -2.157,-3.342 -3.372,-6.016 -1.155,-2.734 -2.157,-5.134 -3.008,-7.2 z m -53.594009,-37.097 h 39.922009 l -20.143,-55.143005 z"
+        }
+      )
+    ] });
+  }
   function orbit({ height, width, fill: fill2 = "", className }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fill: "none", d: "M0 0h256v256H0z" }),
@@ -67340,6 +67428,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     arrowLeft,
+    autoCamera,
     camera,
     checkmark,
     close,
@@ -67486,7 +67575,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       );
     };
     const onHomeBtn = () => {
-      props.camera.reset();
+      props.camera.reset.call();
     };
     const btnStyle2 = "vim-axes-button vc-flex vc-items-center vc-justify-center vc-text-gray-medium vc-transition-all hover:vc-text-primary-royal";
     const btnIsolation = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -67577,6 +67666,41 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (section.enable !== void 0 && !section.enable()) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `vim-control-bar-section ${section.style ?? sectionDefaultStyle}`, children: section.buttons.map((b) => createButton(b)) }, section.id);
   }
+  const ids = {
+    // Sections
+    sectionCamera: "controlBar.sectionCamera",
+    sectionInputs: "controlBar.sectionInputs",
+    sectionActions: "controlBar.sectionActions",
+    sectionTools: "controlBar.sectionTools",
+    sectionSettings: "controlBar.sectionSettings",
+    sectionMeasure: "controlBar.sectionMeasure",
+    sectionSectionBox: "controlBar.sectionSectionBox",
+    // Camera buttons
+    buttonCameraAuto: "controlBar.camera.auto",
+    buttonCameraOrbit: "controlBar.camera.orbit",
+    buttonCameraLook: "controlBarcamera.look",
+    buttonCameraPan: "controlBar.camera.pan",
+    buttonCameraZoom: "controlBar.camera.zoom",
+    buttonCameraZoomWindow: "controlBar.camera.zoomWindow",
+    // Settings buttons
+    buttonProjectInspector: "controlBar.projectInspector",
+    buttonSettings: "controlBar.settings",
+    buttonHelp: "controlBar.help",
+    buttonMaximize: "controlBar.maximize",
+    // Action Buttons
+    buttonToggleIsolation: "controlBar.action.toggleIsolation",
+    buttonZoomToFit: "controlBar.action.zoomToFit",
+    // Tools buttons
+    buttonSectionBox: "controlBar.sectionBox",
+    buttonMeasure: "controlBar.measure",
+    // Section box buttons
+    buttonSectionBoxEnable: "controlBar.sectionBox.enable",
+    buttonSectionBoxVisible: "controlBar.sectionBox.visible",
+    buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
+    buttonSectionBoxAuto: "controlBar.sectionBox.auto",
+    buttonSectionBoxReset: "controlBar.sectionBox.reset",
+    buttonSectionBoxSettings: "controlBar.sectionBox.settings"
+  };
   function ControlBar(props) {
     React2.useEffect(() => {
       ReactTooltip.rebuild();
@@ -67606,6 +67730,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     buttonExpandStyle,
     createButton,
     createSection: createSection$1,
+    ids,
     sectionBlueStyle,
     sectionDefaultStyle,
     sectionNoPadStyle
@@ -67791,95 +67916,62 @@ Averrage Date/Second ${avgDataRatePS} kb
       clear
     };
   }
-  const elementIds = {
-    // Sections
-    sectionCamera: "controlBar.sectionCamera",
-    sectionActions: "controlBar.sectionActions",
-    sectionTools: "controlBar.sectionTools",
-    sectionSettings: "controlBar.sectionSettings",
-    sectionMeasure: "controlBar.sectionMeasure",
-    sectionSectionBox: "controlBar.sectionSectionBox",
-    // Camera buttons
-    buttonCameraOrbit: "controlBar.camera.orbit",
-    buttonCameraLook: "controlBarcamera.look",
-    buttonCameraPan: "controlBar.camera.pan",
-    buttonCameraZoom: "controlBar.camera.zoom",
-    buttonCameraZoomWindow: "controlBar.camera.zoomWindow",
-    // Settings buttons
-    buttonProjectInspector: "controlBar.projectInspector",
-    buttonSettings: "controlBar.settings",
-    buttonHelp: "controlBar.help",
-    buttonMaximize: "controlBar.maximize",
-    // Action Buttons
-    buttonToggleIsolation: "controlBar.action.toggleIsolation",
-    buttonZoomToFit: "controlBar.action.zoomToFit",
-    // Tools buttons
-    buttonSectionBox: "controlBar.sectionBox",
-    buttonMeasure: "controlBar.measure",
-    // Section box buttons
-    buttonSectionBoxEnable: "controlBar.sectionBox.enable",
-    buttonSectionBoxVisible: "controlBar.sectionBox.visible",
-    buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
-    buttonSectionBoxAuto: "controlBar.sectionBox.auto",
-    buttonSectionBoxClip: "controlBar.sectionBox.clip",
-    buttonSectionBoxSettings: "controlBar.sectionBox.settings"
-  };
   function controlBarSectionBox(section, hasSelection) {
     return {
-      id: elementIds.sectionSectionBox,
-      style: section.getEnable() ? sectionNoPadStyle : sectionDefaultStyle,
+      id: ids.sectionSectionBox,
+      style: section.enable.get() ? sectionNoPadStyle : sectionDefaultStyle,
       //enable: () => section.getEnable(),
       buttons: [
         {
-          id: elementIds.buttonSectionBoxEnable,
+          id: ids.buttonSectionBoxEnable,
           tip: "Enable Section Box",
-          isOn: () => section.getEnable(),
+          isOn: () => section.enable.get(),
           style: (on) => buttonExpandStyle(on),
-          action: () => section.setEnable(!section.getEnable()),
+          action: () => section.enable.set(!section.enable.get()),
           icon: sectionBox
         },
         {
-          id: elementIds.buttonSectionBoxShrinkToSelection,
+          id: ids.buttonSectionBoxShrinkToSelection,
           tip: "Fit Section",
-          enabled: () => section.getEnable(),
+          enabled: () => section.enable.get(),
           isOn: () => hasSelection,
           style: (on) => buttonDisableStyle(on),
-          action: () => section.sectionSelection(),
+          action: () => section.sectionSelection.call(),
           icon: sectionBoxShrink
         },
         {
-          id: elementIds.buttonSectionBoxClip,
+          id: ids.buttonSectionBoxReset,
           tip: "Reset Section",
-          enabled: () => section.getEnable(),
+          enabled: () => section.enable.get(),
           style: (on) => buttonDefaultStyle(on),
-          action: () => section.sectionReset(),
+          action: () => section.sectionReset.call(),
           icon: sectionBoxReset
         },
         {
-          id: elementIds.buttonSectionBoxVisible,
+          id: ids.buttonSectionBoxVisible,
           tip: "Show Section Box",
-          enabled: () => section.getEnable(),
-          isOn: () => section.getVisible(),
+          enabled: () => section.enable.get(),
+          isOn: () => section.visible.get(),
           style: (on) => buttonDefaultStyle(on),
-          action: () => section.setVisible(!section.getVisible()),
+          action: () => section.visible.set(!section.visible.get()),
           icon: visible
         },
         {
-          id: elementIds.buttonSectionBoxAuto,
+          id: ids.buttonSectionBoxAuto,
           tip: "Auto Section",
-          enabled: () => section.getEnable(),
-          isOn: () => section.getAuto(),
+          enabled: () => section.enable.get(),
+          isOn: () => section.auto.get(),
           style: (on) => buttonDefaultStyle(on),
-          action: () => section.setAuto(!section.getAuto()),
+          action: () => section.auto.set(!section.auto.get()),
           icon: sectionBoxAuto
         },
         {
-          id: elementIds.buttonSectionBoxSettings,
+          id: ids.buttonSectionBoxSettings,
           tip: "Section Settings",
-          enabled: () => section.getEnable(),
-          isOn: () => section.getOffsetVisible(),
+          enabled: () => section.enable.get(),
+          isOn: () => section.showOffsetPanel.get(),
           style: (on) => buttonDefaultStyle(on),
-          action: () => section.setOffsetsVisible(!section.getOffsetVisible()),
+          action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
           icon: slidersHoriz
         }
       ]
@@ -67888,12 +67980,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   function controlBarPointer(viewer, camera2, settings2, section) {
     const pointer = getPointerState(viewer);
     return {
-      id: elementIds.sectionCamera,
+      id: ids.sectionInputs,
       enable: () => anyUiCursorButton(settings2),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonCameraOrbit,
+          id: ids.buttonCameraOrbit,
           enabled: () => isTrue(settings2.ui.orbit),
           tip: "Orbit",
           action: () => pointer.onButton("orbit"),
@@ -67902,7 +67994,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraLook,
+          id: ids.buttonCameraLook,
           enabled: () => isTrue(settings2.ui.lookAround),
           tip: "Look Around",
           action: () => pointer.onButton("look"),
@@ -67911,7 +68003,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraPan,
+          id: ids.buttonCameraPan,
           enabled: () => isTrue(settings2.ui.pan),
           tip: "Pan",
           action: () => pointer.onButton("pan"),
@@ -67920,7 +68012,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoom,
+          id: ids.buttonCameraZoom,
           enabled: () => isTrue(settings2.ui.zoom),
           tip: "Zoom",
           action: () => pointer.onButton("zoom"),
@@ -67929,7 +68021,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoomWindow,
+          id: ids.buttonCameraZoomWindow,
           enabled: () => isTrue(settings2.ui.zoomWindow),
           tip: "Zoom Window",
           action: () => {
@@ -67944,21 +68036,21 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function controlBarActions(camera2, settings2, isolation, measure$1) {
     return {
-      id: elementIds.sectionActions,
+      id: ids.sectionActions,
       enable: () => true,
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonZoomToFit,
+          id: ids.buttonZoomToFit,
           enabled: () => isTrue(settings2.ui.zoomToFit),
           tip: "Zoom to Fit",
-          action: () => camera2.frameContext(),
+          action: () => camera2.frameSelection.call(),
           icon: frameSelection,
           isOn: () => false,
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonToggleIsolation,
+          id: ids.buttonToggleIsolation,
           enabled: () => isTrue(settings2.ui.toggleIsolation),
           tip: "Toggle Isolation",
           action: () => isolation.toggle("controlBar"),
@@ -67966,7 +68058,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonMeasure,
+          id: ids.buttonMeasure,
           enabled: () => isTrue(settings2.ui.measuringMode),
           isOn: () => measure$1.active,
           tip: "Measuring Mode",
@@ -67980,12 +68072,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   function controlBarSettings(modal, side, settings$1) {
     const fullScreen = getFullScreenState();
     return {
-      id: elementIds.sectionSettings,
+      id: ids.sectionSettings,
       enable: () => anyUiSettingButton(settings$1),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonProjectInspector,
+          id: ids.buttonProjectInspector,
           enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
           tip: "Project Inspector",
           action: () => side.toggleContent("bim"),
@@ -67993,7 +68085,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonSettings,
+          id: ids.buttonSettings,
           enabled: () => isTrue(settings$1.ui.settings),
           tip: "Settings",
           action: () => side.toggleContent("settings"),
@@ -68001,7 +68093,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonHelp,
+          id: ids.buttonHelp,
           enabled: () => isTrue(settings$1.ui.help),
           tip: "Help",
           action: () => modal.help(true),
@@ -68009,7 +68101,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonMaximize,
+          id: ids.buttonMaximize,
           enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
           tip: fullScreen.get() ? "Minimize" : "Fullscreen",
           action: () => fullScreen.toggle(),
@@ -68019,15 +68111,34 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
+  function controlBarCamera(camera2) {
+    return {
+      id: ids.sectionCamera,
+      enable: () => true,
+      style: sectionDefaultStyle,
+      buttons: [
+        {
+          id: ids.buttonCameraAuto,
+          tip: "Auto Camera",
+          isOn: () => camera2.autoCamera.get(),
+          action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
+          icon: autoCamera,
+          style: buttonDefaultStyle
+        }
+      ]
+    };
+  }
   function useControlBar(viewer, camera2, modal, side, isolation, cursor, settings2, section, customization) {
     const measure2 = getMeasureState(viewer, cursor);
     const pointerSection = controlBarPointer(viewer, camera2, settings2);
     const actionSection = controlBarActions(camera2, settings2, isolation, measure2);
     const sectionBoxSection = controlBarSectionBox(section, viewer.selection.count > 0);
     const settingsSection = controlBarSettings(modal, side, settings2);
+    const cameraSection = controlBarCamera(camera2);
     let controlBarSections = [
       pointerSection,
       actionSection,
+      cameraSection,
       sectionBoxSection,
       // Optional section
       settingsSection
@@ -72022,42 +72133,21 @@ Averrage Date/Second ${avgDataRatePS} kb
     };
     const viewer = props.viewer;
     const camera2 = props.camera;
-    const [section, setSection] = React2.useState({
-      visible: viewer.gizmos.sectionBox.visible,
-      clip: viewer.gizmos.sectionBox.clip
-    });
-    const isClipping = () => {
-      return !viewer.gizmos.sectionBox.box.containsBox(viewer.renderer.getBoundingBox());
-    };
-    const [clipping, setClipping] = React2.useState(isClipping());
     const [, setVersion] = React2.useState(0);
     const hidden2 = props.isolation.isActive();
     React2.useEffect(() => {
-      const subState = viewer.gizmos.sectionBox.onStateChanged.subscribe(() => {
-        setSection({
-          visible: viewer.gizmos.sectionBox.visible,
-          clip: viewer.gizmos.sectionBox.clip
-        });
-      });
-      const subConfirm = viewer.gizmos.sectionBox.onBoxConfirm.subscribe(
-        () => setClipping(isClipping())
-      );
       props.isolation.onChanged.subscribe(() => setVersion((v) => v + 1));
-      return () => {
-        subState();
-        subConfirm();
-      };
     }, []);
     const onShowControlsBtn = (e) => {
       props.modal.help(true);
       e.stopPropagation();
     };
     const onCameraResetBtn = (e) => {
-      camera2.reset();
+      camera2.reset.call();
       e.stopPropagation();
     };
     const onCameraFrameBtn = (e) => {
-      camera2.frameContext();
+      camera2.frameSelection.call();
       e.stopPropagation();
     };
     const onSelectionIsolateBtn = (e) => {
@@ -72082,30 +72172,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       props.isolation.show(getSelection(), "contextMenu");
       e.stopPropagation();
     };
-    const onSelectionClearBtn = (e) => {
-      viewer.selection.clear();
-      e.stopPropagation();
-    };
     const onShowAllBtn = (e) => {
       props.isolation.clear("contextMenu");
       e.stopPropagation();
     };
-    const onSectionToggleBtn = (e) => {
-      viewer.gizmos.sectionBox.clip = !viewer.gizmos.sectionBox.clip;
-    };
-    const onSectionResetBtn = (e) => {
-      viewer.gizmos.sectionBox.fitBox(viewer.renderer.getBoundingBox());
-      e.stopPropagation();
-    };
     const onMeasureDeleteBtn = (e) => {
       viewer.gizmos.measure.abort();
     };
-    const onFitSectionToSelectionBtn = (e) => {
-      const box = viewer.selection.getBoundingBox();
-      if (box) {
-        viewer.gizmos.sectionBox.fitBox(box);
-      }
-    };
     const createButton2 = (button) => {
       if (!button.enabled) return null;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -72152,10 +72225,10 @@ Averrage Date/Second ${avgDataRatePS} kb
       },
       {
         id: contextMenuElementIds.zoomToFit,
-        label: "Zoom to Fit",
+        label: "Focus Camera",
         keyboard: "F",
         action: onCameraFrameBtn,
-        enabled: true
+        enabled: hasSelection
       },
       {
         id: contextMenuElementIds.dividerSelection,
@@ -72189,13 +72262,6 @@ Averrage Date/Second ${avgDataRatePS} kb
         action: onSelectionShowBtn,
         enabled: hasSelection && !hasVisibleSelection
       },
-      {
-        id: contextMenuElementIds.clearSelection,
-        label: "Clear Selection",
-        keyboard: "Esc",
-        action: onSelectionClearBtn,
-        enabled: hasSelection
-      },
       {
         id: contextMenuElementIds.showAll,
         label: "Show All",
@@ -72210,31 +72276,6 @@ Averrage Date/Second ${avgDataRatePS} kb
         keyboard: "",
         action: onMeasureDeleteBtn,
         enabled: measuring
-      },
-      {
-        id: contextMenuElementIds.dividerSection,
-        enabled: clipping || section.visible
-      },
-      {
-        id: contextMenuElementIds.ignoreSection,
-        label: section.clip ? "Ignore Section Box" : "Apply Section Box",
-        keyboard: "",
-        action: onSectionToggleBtn,
-        enabled: clipping
-      },
-      {
-        id: contextMenuElementIds.resetSection,
-        label: "Reset Section Box",
-        keyboard: "",
-        action: onSectionResetBtn,
-        enabled: clipping
-      },
-      {
-        id: contextMenuElementIds.fitSectionToSelection,
-        label: "Fit Section Box to Selection",
-        keyboard: "",
-        action: onFitSectionToSelectionBtn,
-        enabled: section.visible && hasSelection
       }
     ];
     elements = ((_c = props.customization) == null ? void 0 : _c.call(props, elements)) ?? elements;
@@ -72389,7 +72430,7 @@ Averrage Date/Second ${avgDataRatePS} kb
               createInteractiveElementProps: (item, treeId, actions, renderFlags) => ({
                 onKeyUp: (e) => {
                   if (e.key === "f") {
-                    props.camera.frameContext();
+                    props.camera.frameSelection.call();
                   }
                   if (e.key === "Escape") {
                     props.viewer.selection.clear();
@@ -72432,7 +72473,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             },
             onPrimaryAction: (item, _) => {
               if (doubleClick.isDoubleClick(item.index)) {
-                props.camera.frameSelection();
+                props.camera.frameSelection.call();
               }
             },
             onFocusItem: (item) => {
@@ -74723,7 +74764,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           return true;
         }
         case KEYS.KEY_F: {
-          this._camera.frameContext();
+          this._camera.frameSelection.call();
           return true;
         }
         case KEYS.KEY_I: {
@@ -74917,7 +74958,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (!this._settings.isolation.enable) return;
       this._isolation = objects ?? [];
       this._apply(source);
-      this._camera.frameVisibleObjects();
+      this._camera.frameScene.call();
     }
     /**
      * Toggles isolation by using the current selection.
@@ -74932,7 +74973,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (!this._settings.isolation.enable) return;
       this._isolation = [...this._viewer.selection.objects].filter((o) => o.type === "Object3D");
       this._apply(source);
-      this._camera.frameVisibleObjects();
+      this._camera.frameScene.call();
       this._viewer.selection.clear();
     }
     /**
@@ -75032,75 +75073,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       return objects;
     }
   }
-  class ComponentCamera {
-    constructor(viewer) {
-      __publicField(this, "_viewer");
-      this._viewer = viewer;
-    }
-    /**
-     * Resets the camera to its initial position.
-     */
-    reset() {
-      this._viewer.camera.lerp(1).reset();
-    }
-    /**
-     * Frames selected elements if there is an active selection; otherwise, frames all visible objects.
-     * @param duration Optional duration of the camera movement animation (default: 1).
-     */
-    frameContext(duration = 1) {
-      if (this._viewer.selection.count > 0) {
-        this.frameSelection(duration);
-      } else {
-        this.frameVisibleObjects(void 0, duration);
-      }
-    }
-    /**
-     * Frames selected elements if there is an active selection; otherwise, does nothing.
-     * @param duration Optional duration of the camera movement animation (default: 1).
-     */
-    frameSelection(duration = 1) {
-      if (this._viewer.selection.count === 0) return;
-      const box = this._viewer.selection.getBoundingBox();
-      if (box && this._viewer.gizmos.sectionBox.box.intersectsBox(box)) {
-        const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-        movement.frame(box);
-      }
-    }
-    /**
-    * Frames all visible objects in the scene.
-    * @param source Optional VIM to specify the source of objects to frame.
-    * @param duration Duration of the camera movement animation (default: 1).
-    */
-    frameVisibleObjects(source, duration = 1) {
-      const movement = duration === 0 ? this._viewer.camera.snap() : this._viewer.camera.lerp(duration);
-      const box = this.getVisibleBoundingBox(source);
-      movement.frame(box);
-    }
-    /**
-     * Returns the bounding box of all visible objects.
-     * @param source Optional VIM to specify the source of visible objects.
-     * @returns The bounding box of all visible objects.
-     */
-    getVisibleBoundingBox(source) {
-      let box;
-      const vimBoxUnion = (vim) => {
-        for (const obj of vim.getObjects()) {
-          if (!obj.visible) continue;
-          const b = obj.getBoundingBox();
-          if (!b) continue;
-          box = box ? box.union(b) : b == null ? void 0 : b.clone();
-        }
-      };
-      if (source) {
-        vimBoxUnion(source);
-      } else {
-        for (const vim of this._viewer.vims) {
-          vimBoxUnion(vim);
-        }
-      }
-      return box;
-    }
-  }
   function createContainer(element) {
     let root = element;
     if (root === void 0) {
@@ -75659,7 +75631,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: "vim-modal vc-absolute vc-inset-0 vc-z-40 vc-flex vc-items-center vc-justify-center vc-bg-overflow vc-backdrop-blur",
+        className: "vim-modal vc-absolute vc-inset-0 vc-z-40 vc-flex vc-items-center vc-justify-center vc-bg-overflow vc-bg-gray",
         onClick: ((_a2 = props.state.current) == null ? void 0 : _a2.canClose) ? () => {
           var _a3, _b3;
           return (_b3 = (_a3 = state.current) == null ? void 0 : _a3.onClose) == null ? void 0 : _b3.call(_a3);
@@ -75732,8 +75704,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           resizeObserver.disconnect();
         }
       };
-    }, [props.state.getOffsetVisible()]);
-    if (!props.state.getOffsetVisible()) return null;
+    }, [props.state.showOffsetPanel.get()]);
+    if (!props.state.showOffsetPanel.get()) return null;
     const renderField = (id2, label, field) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-sectionbox-offsets-entry vc-text-xs vc-flex vc-items-center vc-justify-center vc-justify-between vc-my-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { className: "vc-w-1/2 vc-inline", children: label }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { className: "vc-w-1/3 vc-inline", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -75741,10 +75713,10 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: id2,
           type: "text",
-          value: props.state.getText(field),
-          onChange: (e) => props.state.setText(field, e.target.value),
+          value: field.get(),
+          onChange: (e) => field.set(e.target.value),
           className: "vc-border vc-inline vc-border-gray-300 vc-py-1 vc-w-full vc-px-1",
-          onBlur: () => props.state.validate(field)
+          onBlur: () => field.confirm()
         }
       ) })
     ] });
@@ -75766,15 +75738,15 @@ Averrage Date/Second ${avgDataRatePS} kb
                   "button",
                   {
                     className: "vc-flex vc-border-none vc-bg-transparent vc-text-sm vc-cursor-pointer",
-                    onClick: () => props.state.setOffsetsVisible(false),
+                    onClick: () => props.state.showOffsetPanel.set(false),
                     children: close({ height: 12, width: 12, fill: "currentColor" })
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("dl", { className: "vc-text-xl vc-text-gray-darker vc-mb-2 vc-mx-2 ", children: [
-                renderField("topOffset", "Top Offset", "topOffset"),
-                renderField("sideOffseet", "Side Offset", "sideOffset"),
-                renderField("bottomOffset", "Bottom Offset", "bottomOffset")
+                renderField("topOffset", "Top Offset", props.state.topOffset),
+                renderField("sideOffseet", "Side Offset", props.state.sideOffset),
+                renderField("bottomOffset", "Bottom Offset", props.state.bottomOffset)
               ] })
             ]
           }
@@ -75812,83 +75784,158 @@ Averrage Date/Second ${avgDataRatePS} kb
     r.max.z += b2.max.z;
     return r;
   }
+  function useStateRef(initialValue) {
+    const [value, setValue] = React2.useState(initialValue);
+    const ref = React2.useRef(initialValue);
+    const event = React2.useRef(new distExports.SimpleEventDispatcher());
+    const validate = React2.useRef((value2) => value2);
+    const confirm = React2.useRef((value2) => value2);
+    const set2 = (value2) => {
+      const finalValue = validate.current(value2) ?? value2;
+      if (finalValue === void 0) return;
+      if (finalValue === ref.current) return;
+      ref.current = finalValue;
+      setValue(finalValue);
+      event.current.dispatch(finalValue);
+    };
+    return {
+      get() {
+        return ref.current;
+      },
+      set: set2,
+      confirm() {
+        set2(confirm.current(ref.current));
+      },
+      useOnChange(on) {
+        React2.useEffect(() => {
+          return event.current.subscribe(on);
+        }, []);
+      },
+      useMemo(on, deps) {
+        return React2.useMemo(() => on(value), [...deps || [], value]);
+      },
+      useValidate(on) {
+        React2.useEffect(() => {
+          validate.current = on;
+        }, []);
+      },
+      useConfirm(on) {
+        React2.useEffect(() => {
+          confirm.current = on;
+        }, []);
+      }
+    };
+  }
+  function useActionRef(action) {
+    const ref = React2.useRef(action);
+    return {
+      call() {
+        ref == null ? void 0 : ref.current();
+      },
+      set(func) {
+        ref.current = func;
+      }
+    };
+  }
+  function useArgActionRef(action) {
+    const ref = React2.useRef(action);
+    return {
+      call(arg) {
+        ref == null ? void 0 : ref.current(arg);
+      },
+      set(func) {
+        ref.current = func;
+      }
+    };
+  }
+  function useFuncRef(func) {
+    const ref = React2.useRef(func);
+    return {
+      call() {
+        return ref == null ? void 0 : ref.current();
+      },
+      set(func2) {
+        ref.current = func2;
+      }
+    };
+  }
+  function useAsyncFuncRef(func) {
+    const ref = React2.useRef(func);
+    return {
+      async call() {
+        return ref == null ? void 0 : ref.current();
+      },
+      set(func2) {
+        ref.current = func2;
+      }
+    };
+  }
   function useSectionBox(adapter) {
-    const [enable, setEnable] = React2.useState(false);
-    const [visible2, setVisible] = React2.useState(false);
-    const [offsetsVisible, setOffsetsVisible] = React2.useState(false);
-    const [auto, setAuto] = React2.useState(false);
-    const [offsets, setOffsets] = React2.useState({
-      topOffset: "1",
-      sideOffset: "1",
-      bottomOffset: "1"
-    });
+    const enable = useStateRef(false);
+    const visible2 = useStateRef(false);
+    const showOffsetPanel = useStateRef(false);
+    const auto = useStateRef(false);
+    const topOffset = useStateRef("1");
+    const sideOffset = useStateRef("1");
+    const bottomOffset = useStateRef("1");
     const boxRef = React2.useRef(adapter.getBox());
-    const offsetBox = React2.useMemo(() => offsetsToBox3(offsets), [offsets]);
     React2.useEffect(() => {
-      setVisible(enable);
-      setAuto(false);
-      setOffsetsVisible(false);
-      setOffsets({
-        topOffset: "1",
-        sideOffset: "1",
-        bottomOffset: "1"
+      adapter.setVisible(false);
+      adapter.setClip(false);
+      return adapter.onSelectionChanged.sub(() => {
+        if (auto.get() && enable.get()) sectionSelection.call();
       });
-      void resetBox();
-    }, [enable]);
-    React2.useEffect(() => {
-      if (auto) sectionSelection();
-      return auto ? adapter.onSelectionChanged.sub(sectionSelection) : () => {
-      };
-    }, [auto]);
-    React2.useEffect(() => {
-      setBox(boxRef.current);
-    }, [offsets]);
-    React2.useEffect(() => {
-      adapter.setVisible(visible2);
-    }, [visible2]);
-    const setText = (field, value) => {
-      const result = sanitize(value, false);
-      if (result !== void 0) {
-        setOffsets((prev) => ({ ...prev, [field]: result }));
-      }
-    };
-    const validate = (field) => {
-      const result = sanitize(offsets[field], true);
-      if (result !== void 0) {
-        setOffsets((prev) => ({ ...prev, [field]: result }));
+    }, []);
+    enable.useOnChange((v) => {
+      adapter.setClip(v);
+      visible2.set(v);
+      showOffsetPanel.set(false);
+      if (v && auto.get()) {
+        sectionSelection.call();
+      } else {
+        sectionReset.call();
       }
-    };
-    const setBox = (baseBox) => {
+    });
+    visible2.useValidate((v) => enable.get() && v);
+    showOffsetPanel.useValidate((v) => enable.get() && v);
+    topOffset.useConfirm((v) => sanitize(v, true));
+    sideOffset.useConfirm((v) => sanitize(v, true));
+    bottomOffset.useConfirm((v) => sanitize(v, true));
+    topOffset.useOnChange((v) => section.call(boxRef.current));
+    sideOffset.useOnChange((v) => section.call(boxRef.current));
+    bottomOffset.useOnChange((v) => section.call(boxRef.current));
+    auto.useOnChange((v) => {
+      if (v) sectionSelection.call();
+    });
+    visible2.useOnChange((v) => adapter.setVisible(v));
+    const section = useArgActionRef((baseBox) => {
       boxRef.current = baseBox;
-      const newBox = addBox(baseBox, offsetBox);
+      const newBox = addBox(baseBox, offsetsToBox3(topOffset.get(), sideOffset.get(), bottomOffset.get()));
       adapter.fitBox(newBox);
-    };
-    const sectionSelection = async () => {
+    });
+    const sectionSelection = useFuncRef(async () => {
       try {
         const box = await adapter.getSelectionBox() ?? await adapter.getRendererBox();
-        setBox(box);
+        section.call(box);
       } catch (e) {
         console.error(e);
       }
-    };
-    const resetBox = async () => {
+    });
+    const sectionReset = useFuncRef(async () => {
       const box = await adapter.getRendererBox();
-      setBox(box);
-    };
+      section.call(box);
+    });
     return {
-      setEnable,
-      getEnable: () => enable,
-      getVisible: () => visible2,
-      setVisible,
+      enable,
+      visible: visible2,
+      auto,
+      showOffsetPanel,
+      topOffset,
+      sideOffset,
+      bottomOffset,
       sectionSelection,
-      sectionReset: resetBox,
-      getOffsetVisible: () => offsetsVisible,
-      setOffsetsVisible,
-      getText: (field) => offsets[field],
-      setText,
-      getAuto: () => auto,
-      setAuto,
-      validate
+      sectionReset,
+      section
     };
   }
   const sanitize = (value, strict) => {
@@ -75901,18 +75948,21 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     return String(num);
   };
-  function offsetsToBox3(offsets) {
-    const getNumber = (field) => {
-      const num = parseFloat(offsets[field]);
+  function offsetsToBox3(top, side, bottom) {
+    const getNumber = (s) => {
+      const num = parseFloat(s);
       return isNaN(num) ? 0 : num;
     };
     return new Box3(
-      new Vector3(-getNumber("sideOffset"), -getNumber("sideOffset"), -getNumber("bottomOffset")),
-      new Vector3(getNumber("sideOffset"), getNumber("sideOffset"), getNumber("topOffset"))
+      new Vector3(-getNumber(side), -getNumber(side), -getNumber(bottom)),
+      new Vector3(getNumber(side), getNumber(side), getNumber(top))
     );
   }
   function useWebglSectionBox(viewer) {
     const vimAdapter = {
+      setClip: (b) => {
+        viewer.gizmos.sectionBox.clip = b;
+      },
       setVisible: (b) => {
         viewer.gizmos.sectionBox.visible = b;
         viewer.gizmos.sectionBox.interactive = b;
@@ -75921,12 +75971,59 @@ Averrage Date/Second ${avgDataRatePS} kb
       fitBox: (box) => viewer.gizmos.sectionBox.fitBox(box),
       getSelectionBox: () => Promise.resolve(viewer.selection.getBoundingBox()),
       getRendererBox: () => Promise.resolve(viewer.renderer.getBoundingBox()),
-      onSceneChanged: viewer.renderer.onBoxUpdated,
       onSelectionChanged: viewer.selection.onValueChanged
     };
-    viewer.gizmos.sectionBox.clip = true;
     return useSectionBox(vimAdapter);
   }
+  function useCamera(adapter) {
+    const autoCamera2 = useStateRef(false);
+    autoCamera2.useOnChange((v) => {
+      if (v) {
+        frameSelection2.call();
+      }
+    });
+    React2.useEffect(() => {
+      adapter.onSelectionChanged.sub(() => {
+        if (autoCamera2.get()) {
+          frameSelection2.call();
+        }
+      });
+    }, []);
+    const reset = useActionRef(() => adapter.resetCamera(1));
+    const frameSelection2 = useAsyncFuncRef(async () => {
+      if (!adapter.hasSelection()) {
+        frameScene.call();
+        return;
+      }
+      const box = await adapter.getSelectionBox();
+      if (!box) {
+        return;
+      }
+      adapter.frameCamera(box, 1);
+    });
+    const frameScene = useAsyncFuncRef(async () => {
+      adapter.frameAll(1);
+    });
+    return {
+      autoCamera: autoCamera2,
+      reset,
+      frameSelection: frameSelection2,
+      frameScene
+    };
+  }
+  function useWebglCamera(viewer) {
+    return useCamera({
+      onSelectionChanged: viewer.selection.onValueChanged,
+      frameCamera: (box, duration) => viewer.camera.lerp(duration).frame(box),
+      resetCamera: (duration) => viewer.camera.lerp(duration).reset(),
+      frameAll: (duration) => {
+        const box = viewer.renderer.getBoundingBox();
+        viewer.camera.lerp(duration).frame(box);
+      },
+      hasSelection: () => viewer.selection.count > 0,
+      getSelectionBox: () => Promise.resolve(viewer.selection.getBoundingBox())
+    });
+  }
   function createWebglComponent(container, componentSettings = {}, viewerSettings = {}) {
     const promise2 = new DeferredPromise();
     const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
@@ -75958,7 +76055,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     var _a2;
     const settings2 = useSettings(props.viewer, props.settings ?? {});
     const modal = useModal(settings2.value.capacity.canFollowUrl);
-    const camera2 = React2.useMemo(() => new ComponentCamera(props.viewer), []);
+    const camera2 = useWebglCamera(props.viewer);
     const cursor = React2.useMemo(() => new CursorManager(props.viewer), []);
     const loader = React2.useRef(new ComponentLoader(props.viewer, modal));
     const [isolation] = React2.useState(() => new Isolation(props.viewer, camera2, settings2.value));
@@ -75999,6 +76096,9 @@ Averrage Date/Second ${avgDataRatePS} kb
         isolation,
         camera: camera2,
         settings: settings2,
+        get sectionBox() {
+          return sectionBox2;
+        },
         contextMenu: {
           customize: (v) => setcontextMenu(() => v)
         },
@@ -76172,11 +76272,13 @@ Averrage Date/Second ${avgDataRatePS} kb
     vcRoboto
   }, Symbol.toStringTag, { value: "Module" }));
   const support = "https://docs.vimaec.com";
+  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
   const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
   const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     support,
-    supportControls
+    supportControls,
+    supportUltra
   }, Symbol.toStringTag, { value: "Module" }));
   function fileOpeningError(url) {
     return {
@@ -76222,12 +76324,12 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     return {
       title: "File Downloading Error",
-      body: body$4(server, authToken, server),
+      body: body$4(url, authToken, server),
       footer: footer(support),
       canClose: false
     };
   }
-  function body$4(url, server, authToken) {
+  function body$4(url, authToken, server) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
       mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         "Oops, it appears that there’s an ",
@@ -76292,7 +76394,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           "Ensure that VIM Ultra",
           " ",
-          link(support, "process is running"),
+          link(supportUltra, "process is running"),
           " ",
           "at ",
           detailText(url)
@@ -76374,7 +76476,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         return serverStreamError(state.serverUrl);
     }
   }
-  function getRequestErrorMessage(source, error) {
+  function getRequestErrorMessage(serverUrl, source, error) {
     console.log(error);
     switch (error) {
       case "loadingError":
@@ -76382,7 +76484,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       case "downloadingError":
       case "unknown":
       case "cancelled":
-        return serverFileDownloadingError(source.url);
+        return serverFileDownloadingError(source.url, source.authToken, serverUrl);
       case "serverDisconnected":
         return serverConnectionError(source.url);
     }
@@ -76394,7 +76496,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     if (state.status === "connecting") {
       if (modal.current === void 0 || modal.current.type === "loading") {
-        modal.loading({ message: "Connecting to VIM Ultra server..." });
+        modal.loading({ message: "Initializing..." });
       }
     }
     if (state.status === "error") {
@@ -76410,6 +76512,9 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function useUltraSectionBox(viewer) {
     const ultraAdapter = {
+      setClip: (b) => {
+        viewer.sectionBox.clip = b;
+      },
       setVisible: (b) => {
         viewer.sectionBox.visible = b;
         viewer.sectionBox.interactive = b;
@@ -76418,15 +76523,26 @@ Averrage Date/Second ${avgDataRatePS} kb
       fitBox: (box) => viewer.sectionBox.fitBox(box),
       getSelectionBox: () => viewer.selection.getBoundingBox(),
       getRendererBox: () => viewer.renderer.getBoundingBox(),
-      onSelectionChanged: viewer.selection.onValueChanged,
-      onSceneChanged: viewer.vims.onChanged
+      onSelectionChanged: viewer.selection.onValueChanged
     };
     return useSectionBox(ultraAdapter);
   }
-  function useUltraControlBar(viewer, section, customization) {
-    let controlBar2 = [controlBarSectionBox(section, viewer.selection.count > 0)];
-    controlBar2 = (customization == null ? void 0 : customization(controlBar2)) ?? controlBar2;
-    return controlBar2;
+  function useUltraControlBar(viewer, section, camera2, customization) {
+    const sectionSectionBox = controlBarSectionBox(section, viewer.selection.count > 0);
+    const sectionCamera = controlBarCamera(camera2);
+    let bar = [sectionCamera, sectionSectionBox];
+    bar = (customization == null ? void 0 : customization(bar)) ?? bar;
+    return bar;
+  }
+  function useUltraCamera(viewer) {
+    return useCamera({
+      onSelectionChanged: viewer.selection.onValueChanged,
+      frameCamera: (box, duration) => void viewer.camera.frameBox(box, duration),
+      frameAll: (duration) => viewer.camera.frameAll(duration),
+      resetCamera: (duration) => viewer.camera.restoreSavedPosition(duration),
+      hasSelection: () => viewer.selection.count > 0,
+      getSelectionBox: () => viewer.selection.getBoundingBox()
+    });
   }
   function createUltraComponent(container) {
     const promise2 = new DeferredPromise();
@@ -76456,15 +76572,28 @@ Averrage Date/Second ${avgDataRatePS} kb
   function UltraComponent(props) {
     const modal = useModal(true);
     const sectionBox2 = useUltraSectionBox(props.viewer);
-    const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, (_2) => _2);
+    const camera2 = useUltraCamera(props.viewer);
     const side = useSideState(true, 400);
     const [_, setSelectState] = React2.useState(0);
+    const [controlBarCustom, setControlBarCustom] = React2.useState(() => (c) => c);
+    const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, camera2, (_2) => _2);
     React2.useEffect(() => {
       props.viewer.onStateChanged.subscribe((state) => updateModal(modal, state));
       props.viewer.selection.onValueChanged.subscribe(() => {
         setSelectState((i2) => (i2 + 1) % 2);
       });
-      props.onMount(createComponentRef(props.viewer, modal));
+      props.onMount({
+        viewer: props.viewer,
+        modal,
+        sectionBox: sectionBox2,
+        camera: camera2,
+        dispose: () => {
+        },
+        controlBar: {
+          customize: (v) => setControlBarCustom(() => v)
+        },
+        load: patchLoad(props.viewer, modal)
+      });
     }, []);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
@@ -76474,24 +76603,34 @@ Averrage Date/Second ${avgDataRatePS} kb
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
-              content: controlBar2,
+              content: controlBarCustom(controlBar2),
               show: true
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 })
         ] });
       } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ReactTooltip,
+        {
+          multiline: true,
+          arrowColor: "transparent",
+          type: "light",
+          className: "!vc-max-w-xs !vc-border !vc-border-solid !vc-border-gray-medium !vc-bg-white !vc-text-xs !vc-text-gray-darkest !vc-opacity-100 !vc-shadow-[2px_6px_15px_rgba(0,0,0,0.3)] !vc-transition-opacity",
+          delayShow: 200
+        }
+      )
     ] });
   }
-  function createComponentRef(viewer, modal) {
-    function load(source) {
+  function patchLoad(viewer, modal) {
+    return function load(source) {
       const request2 = viewer.loadVim(source);
       void updateProgress(request2, modal);
       void request2.getResult().then(
         (result) => {
           if (result.isError) {
-            modal.message(getRequestErrorMessage(source, result.error));
+            modal.message(getRequestErrorMessage(viewer.serverUrl, source, result.error));
             return;
           }
           if (result.isSuccess) {
@@ -76500,13 +76639,6 @@ Averrage Date/Second ${avgDataRatePS} kb
         }
       );
       return request2;
-    }
-    return {
-      viewer,
-      modal,
-      dispose: () => {
-      },
-      load
     };
   }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -76514,6 +76646,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     UltraComponent,
     createUltraComponent
   }, Symbol.toStringTag, { value: "Module" }));
+  exports.ControlBar = controlBar;
   exports.ErrorStyle = errorStyle;
   exports.Errors = errors;
   exports.Icons = icons;