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

package/dist/vim-web.js

@@ -45819,7 +45819,7 @@ class ElementNoMapping {
   }
 }
 class ElementMapping {
-  constructor(instances, instanceToElement, elementIds2, instanceMeshes) {
+  constructor(instances, instanceToElement, elementIds, instanceMeshes) {
     __publicField(this, "_instanceToElement");
     __publicField(this, "_instanceMeshes");
     __publicField(this, "_elementToInstances");
@@ -45832,17 +45832,17 @@ class ElementMapping {
     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
     );
   }
@@ -48858,14 +48858,14 @@ const _ViewerMaterials = class _ViewerMaterials {
     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();
   }
   /**
@@ -50617,8 +50617,12 @@ class CameraMovement {
   }
   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);
@@ -50648,7 +50652,7 @@ class CameraLerp extends CameraMovement {
   }
   init(duration) {
     this.cancel();
-    this._duration = duration;
+    this._duration = Math.max(duration, 0.01);
     this._clock.start();
   }
   cancel() {
@@ -50969,6 +50973,7 @@ let Camera$1 = class Camera2 {
    * @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);
@@ -51281,7 +51286,7 @@ const KEYS = {
   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
@@ -51387,7 +51392,7 @@ class KeyboardHandler extends InputHandler$1 {
       this.camera.localVelocity = move;
     }
   }
-}
+};
 class SimpleInstanceSubmesh {
   constructor(mesh, index2) {
     __publicField(this, "mesh");
@@ -51636,7 +51641,7 @@ class InputAction {
     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);
@@ -51789,8 +51794,8 @@ class TouchHandler extends InputHandler$1 {
   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);
@@ -51870,10 +51875,10 @@ class MouseHandler extends InputHandler$1 {
     });
     __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();
@@ -52042,7 +52047,7 @@ class MouseHandler extends InputHandler$1 {
       this.gizmoRect.setCorners(this._downPosition, this._lastPosition);
     }
   }
-}
+};
 var dist = {};
 var SimpleEventDispatcher = {};
 var hasRequiredSimpleEventDispatcher;
@@ -52312,9 +52317,9 @@ class Input {
       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";
@@ -54880,7 +54885,6 @@ class MeasureGizmo {
    * 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);
@@ -55453,6 +55457,7 @@ class SectionBoxHandle extends Mesh {
     __publicField(this, "_color");
     __publicField(this, "_highlightColor");
     __publicField(this, "_materials");
+    __publicField(this, "_camera");
     __publicField(this, "_camSub");
     this._materials = [matAlways, matBehind];
     this._forward = new Vector3();
@@ -55465,15 +55470,18 @@ class SectionBoxHandle extends Mesh {
     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;
@@ -57611,7 +57619,37 @@ function clamp$1(value, min2, max2) {
   }
   return Math.min(Math.max(value, min2), max2);
 }
-class InputMouse extends InputHandler2 {
+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 MouseHandler2 extends InputHandler2 {
   constructor(canvas, rpc, selection, camera2) {
     super();
     __publicField(this, "_rpc");
@@ -57619,45 +57657,47 @@ class InputMouse extends InputHandler2 {
     __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) {
@@ -57677,21 +57717,24 @@ class InputMouse extends InputHandler2 {
       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();
   }
@@ -57703,7 +57746,7 @@ class InputMouse extends InputHandler2 {
     );
   }
 }
-class InputTouch extends InputHandler2 {
+class TouchHandler2 extends InputHandler2 {
   constructor(canvas, rpc) {
     super();
     __publicField(this, "_rpc");
@@ -58000,7 +58043,7 @@ class Marshal {
   // -------------------- SectionBox -------------------
   writeSectionBoxState(data2) {
     this.writeBoolean(data2.visible);
-    this.writeBoolean(data2.interactible);
+    this.writeBoolean(data2.interactive);
     this.writeBoolean(data2.clip);
     this.writeBox3(data2.box);
   }
@@ -58155,12 +58198,12 @@ class ReadMarshal {
   }
   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
     };
@@ -59632,7 +59675,7 @@ const serverKeys = /* @__PURE__ */ new Set([
   "Control",
   "Shift"
 ]);
-class InputKeyboard extends InputHandler2 {
+class KeyboardHandler2 extends InputHandler2 {
   constructor(rpc, selection, camera2, inputs) {
     super();
     __publicField(this, "_rpc");
@@ -59671,15 +59714,19 @@ class InputKeyboard extends InputHandler2 {
     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;
     }
   }
@@ -59710,9 +59757,9 @@ class Inputs extends InputHandler2 {
     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 MouseHandler2(this._canvas, this._rpc, selection, camera2);
+    this._inputsTouch = new TouchHandler2(this._canvas, this._rpc);
+    this._keyboard = new KeyboardHandler2(this._rpc, selection, camera2, this);
   }
   onConnect() {
     this.register();
@@ -60721,11 +60768,20 @@ class Vim2 {
    */
   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) {
@@ -60796,8 +60852,8 @@ class Vim2 {
     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) {
@@ -60958,7 +61014,6 @@ class Viewport2 {
    * Cleans up resources by removing resize observer and clearing timeouts
    */
   dispose() {
-    console.log("Disposing Viewport");
     this._clearTimeout();
     this._observer.disconnect();
   }
@@ -61219,11 +61274,15 @@ class Camera3 {
    * 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
@@ -61287,6 +61346,9 @@ class ViewerSelection {
   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.
@@ -61322,7 +61384,7 @@ class ViewerSelection {
    * @param node - A single node index or array of node indices to select.
    */
   select(vim, node) {
-    this.clear();
+    this._clear();
     this.add(vim, node);
   }
   /**
@@ -61397,6 +61459,12 @@ class ViewerSelection {
    * @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) {
@@ -61405,9 +61473,7 @@ class ViewerSelection {
       }
     });
     this._selectedNodes.clear();
-    if (changed) {
-      this._onValueChanged.dispatch();
-    }
+    return changed;
   }
   /**
    * Calculates the bounding box encompassing all selected nodes.
@@ -61429,8 +61495,7 @@ class ViewerSelection {
    * Should be called when the selection manager is no longer needed.
    */
   dispose() {
-    this.clear();
-    this._selectedNodes = /* @__PURE__ */ new Map();
+    this._clear();
   }
 }
 class VimCollection {
@@ -61727,13 +61792,14 @@ class Renderer2 {
 }
 class SectionBox2 {
   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;
@@ -61750,6 +61816,7 @@ class SectionBox2 {
     this._interval = setInterval(() => this.pull(), 1e3);
   }
   scheduleUpdate() {
+    this._pullId++;
     if (this._animationFrame) return;
     this._animationFrame = requestAnimationFrame(() => {
       this._animationFrame = void 0;
@@ -61758,13 +61825,15 @@ class SectionBox2 {
   }
   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) {
@@ -61774,7 +61843,7 @@ class SectionBox2 {
   async push() {
     await this._rpc.RPCSetSectionBox({
       visible: this._visible,
-      interactible: this._interactible,
+      interactive: this._interactible,
       clip: this._clip,
       box: this._box
     });
@@ -66801,6 +66870,25 @@ function hidden({ height, width, fill: fill2, className = "" }) {
     }
   );
 }
+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" }),
@@ -67324,6 +67412,7 @@ function ghostDead({ height, width, fill: fill2, className }) {
 const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   arrowLeft,
+  autoCamera,
   camera,
   checkmark,
   close,
@@ -67470,7 +67559,7 @@ function AxesPanel(props) {
     );
   };
   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(
@@ -67561,6 +67650,41 @@ function createSection$1(section) {
   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) {
   useEffect(() => {
     ReactTooltip.rebuild();
@@ -67590,6 +67714,7 @@ const controlBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   buttonExpandStyle,
   createButton,
   createSection: createSection$1,
+  ids,
   sectionBlueStyle,
   sectionDefaultStyle,
   sectionNoPadStyle
@@ -67775,95 +67900,62 @@ function getMeasureState(viewer, cursor) {
     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
       }
     ]
@@ -67872,12 +67964,12 @@ function controlBarSectionBox(section, hasSelection) {
 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"),
@@ -67886,7 +67978,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraLook,
+        id: ids.buttonCameraLook,
         enabled: () => isTrue(settings2.ui.lookAround),
         tip: "Look Around",
         action: () => pointer.onButton("look"),
@@ -67895,7 +67987,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraPan,
+        id: ids.buttonCameraPan,
         enabled: () => isTrue(settings2.ui.pan),
         tip: "Pan",
         action: () => pointer.onButton("pan"),
@@ -67904,7 +67996,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraZoom,
+        id: ids.buttonCameraZoom,
         enabled: () => isTrue(settings2.ui.zoom),
         tip: "Zoom",
         action: () => pointer.onButton("zoom"),
@@ -67913,7 +68005,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonCameraZoomWindow,
+        id: ids.buttonCameraZoomWindow,
         enabled: () => isTrue(settings2.ui.zoomWindow),
         tip: "Zoom Window",
         action: () => {
@@ -67928,21 +68020,21 @@ function controlBarPointer(viewer, camera2, settings2, section) {
 }
 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"),
@@ -67950,7 +68042,7 @@ function controlBarActions(camera2, settings2, isolation, measure$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonMeasure,
+        id: ids.buttonMeasure,
         enabled: () => isTrue(settings2.ui.measuringMode),
         isOn: () => measure$1.active,
         tip: "Measuring Mode",
@@ -67964,12 +68056,12 @@ function controlBarActions(camera2, settings2, isolation, measure$1) {
 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"),
@@ -67977,7 +68069,7 @@ function controlBarSettings(modal, side, settings$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonSettings,
+        id: ids.buttonSettings,
         enabled: () => isTrue(settings$1.ui.settings),
         tip: "Settings",
         action: () => side.toggleContent("settings"),
@@ -67985,7 +68077,7 @@ function controlBarSettings(modal, side, settings$1) {
         style: buttonDefaultStyle
       },
       {
-        id: elementIds.buttonHelp,
+        id: ids.buttonHelp,
         enabled: () => isTrue(settings$1.ui.help),
         tip: "Help",
         action: () => modal.help(true),
@@ -67993,7 +68085,7 @@ function controlBarSettings(modal, side, settings$1) {
         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(),
@@ -68003,15 +68095,34 @@ function controlBarSettings(modal, side, settings$1) {
     ]
   };
 }
+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
@@ -72006,42 +72117,21 @@ function VimContextMenu(props) {
   };
   const viewer = props.viewer;
   const camera2 = props.camera;
-  const [section, setSection] = 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] = useState(isClipping());
   const [, setVersion] = useState(0);
   const hidden2 = props.isolation.isActive();
   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) => {
@@ -72066,30 +72156,13 @@ function VimContextMenu(props) {
     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(
@@ -72136,10 +72209,10 @@ function VimContextMenu(props) {
     },
     {
       id: contextMenuElementIds.zoomToFit,
-      label: "Zoom to Fit",
+      label: "Focus Camera",
       keyboard: "F",
       action: onCameraFrameBtn,
-      enabled: true
+      enabled: hasSelection
     },
     {
       id: contextMenuElementIds.dividerSelection,
@@ -72173,13 +72246,6 @@ function VimContextMenu(props) {
       action: onSelectionShowBtn,
       enabled: hasSelection && !hasVisibleSelection
     },
-    {
-      id: contextMenuElementIds.clearSelection,
-      label: "Clear Selection",
-      keyboard: "Esc",
-      action: onSelectionClearBtn,
-      enabled: hasSelection
-    },
     {
       id: contextMenuElementIds.showAll,
       label: "Show All",
@@ -72194,31 +72260,6 @@ function VimContextMenu(props) {
       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;
@@ -72373,7 +72414,7 @@ function BimTree(props) {
             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();
@@ -72416,7 +72457,7 @@ function BimTree(props) {
           },
           onPrimaryAction: (item, _) => {
             if (doubleClick.isDoubleClick(item.index)) {
-              props.camera.frameSelection();
+              props.camera.frameSelection.call();
             }
           },
           onFocusItem: (item) => {
@@ -74707,7 +74748,7 @@ class ComponentInputs {
         return true;
       }
       case KEYS.KEY_F: {
-        this._camera.frameContext();
+        this._camera.frameSelection.call();
         return true;
       }
       case KEYS.KEY_I: {
@@ -74901,7 +74942,7 @@ class Isolation {
     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.
@@ -74916,7 +74957,7 @@ class Isolation {
     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();
   }
   /**
@@ -75016,75 +75057,6 @@ class Isolation {
     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) {
@@ -75643,7 +75615,7 @@ function Modal(props) {
   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-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);
@@ -75716,8 +75688,8 @@ function SectionBoxPanel(props) {
         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(
@@ -75725,10 +75697,10 @@ function SectionBoxPanel(props) {
       {
         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()
       }
     ) })
   ] });
@@ -75750,15 +75722,15 @@ function SectionBoxPanel(props) {
                 "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)
             ] })
           ]
         }
@@ -75796,83 +75768,158 @@ function addBox(b1, b2) {
   r.max.z += b2.max.z;
   return r;
 }
+function useStateRef(initialValue) {
+  const [value, setValue] = useState(initialValue);
+  const ref = useRef(initialValue);
+  const event = useRef(new distExports.SimpleEventDispatcher());
+  const validate = useRef((value2) => value2);
+  const confirm = useRef((value2) => value2);
+  const set3 = (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: set3,
+    confirm() {
+      set3(confirm.current(ref.current));
+    },
+    useOnChange(on) {
+      useEffect(() => {
+        return event.current.subscribe(on);
+      }, []);
+    },
+    useMemo(on, deps) {
+      return useMemo(() => on(value), [...deps || [], value]);
+    },
+    useValidate(on) {
+      useEffect(() => {
+        validate.current = on;
+      }, []);
+    },
+    useConfirm(on) {
+      useEffect(() => {
+        confirm.current = on;
+      }, []);
+    }
+  };
+}
+function useActionRef(action) {
+  const ref = useRef(action);
+  return {
+    call() {
+      ref == null ? void 0 : ref.current();
+    },
+    set(func) {
+      ref.current = func;
+    }
+  };
+}
+function useArgActionRef(action) {
+  const ref = useRef(action);
+  return {
+    call(arg) {
+      ref == null ? void 0 : ref.current(arg);
+    },
+    set(func) {
+      ref.current = func;
+    }
+  };
+}
+function useFuncRef(func) {
+  const ref = useRef(func);
+  return {
+    call() {
+      return ref == null ? void 0 : ref.current();
+    },
+    set(func2) {
+      ref.current = func2;
+    }
+  };
+}
+function useAsyncFuncRef(func) {
+  const ref = useRef(func);
+  return {
+    async call() {
+      return ref == null ? void 0 : ref.current();
+    },
+    set(func2) {
+      ref.current = func2;
+    }
+  };
+}
 function useSectionBox(adapter) {
-  const [enable, setEnable] = useState(false);
-  const [visible2, setVisible] = useState(false);
-  const [offsetsVisible, setOffsetsVisible] = useState(false);
-  const [auto, setAuto] = useState(false);
-  const [offsets, setOffsets] = 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 = useRef(adapter.getBox());
-  const offsetBox = useMemo(() => offsetsToBox3(offsets), [offsets]);
   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]);
-  useEffect(() => {
-    if (auto) sectionSelection();
-    return auto ? adapter.onSelectionChanged.sub(sectionSelection) : () => {
-    };
-  }, [auto]);
-  useEffect(() => {
-    setBox(boxRef.current);
-  }, [offsets]);
-  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) => {
@@ -75885,18 +75932,21 @@ const sanitize = (value, strict) => {
   }
   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;
@@ -75905,12 +75955,59 @@ function useWebglSectionBox(viewer) {
     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();
+    }
+  });
+  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 DeferredPromise2();
   const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
@@ -75942,7 +76039,7 @@ function VimComponent(props) {
   var _a2;
   const settings2 = useSettings(props.viewer, props.settings ?? {});
   const modal = useModal(settings2.value.capacity.canFollowUrl);
-  const camera2 = useMemo(() => new ComponentCamera(props.viewer), []);
+  const camera2 = useWebglCamera(props.viewer);
   const cursor = useMemo(() => new CursorManager(props.viewer), []);
   const loader = useRef(new ComponentLoader(props.viewer, modal));
   const [isolation] = useState(() => new Isolation(props.viewer, camera2, settings2.value));
@@ -75983,6 +76080,9 @@ function VimComponent(props) {
       isolation,
       camera: camera2,
       settings: settings2,
+      get sectionBox() {
+        return sectionBox2;
+      },
       contextMenu: {
         customize: (v) => setcontextMenu(() => v)
       },
@@ -76156,11 +76256,13 @@ const errorStyle = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   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 {
@@ -76206,12 +76308,12 @@ function serverFileDownloadingError(url, authToken, server) {
   }
   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 ",
@@ -76276,7 +76378,7 @@ function body$2(url, local) {
       /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         "Ensure that VIM Ultra",
         " ",
-        link(support, "process is running"),
+        link(supportUltra, "process is running"),
         " ",
         "at ",
         detailText(url)
@@ -76358,7 +76460,7 @@ function getErrorMessage(state) {
       return serverStreamError(state.serverUrl);
   }
 }
-function getRequestErrorMessage(source, error) {
+function getRequestErrorMessage(serverUrl, source, error) {
   console.log(error);
   switch (error) {
     case "loadingError":
@@ -76366,7 +76468,7 @@ function getRequestErrorMessage(source, error) {
     case "downloadingError":
     case "unknown":
     case "cancelled":
-      return serverFileDownloadingError(source.url);
+      return serverFileDownloadingError(source.url, source.authToken, serverUrl);
     case "serverDisconnected":
       return serverConnectionError(source.url);
   }
@@ -76378,7 +76480,7 @@ function updateModal(modal, state) {
   }
   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") {
@@ -76394,6 +76496,9 @@ async function updateProgress(request2, modal) {
 }
 function useUltraSectionBox(viewer) {
   const ultraAdapter = {
+    setClip: (b) => {
+      viewer.sectionBox.clip = b;
+    },
     setVisible: (b) => {
       viewer.sectionBox.visible = b;
       viewer.sectionBox.interactive = b;
@@ -76402,15 +76507,26 @@ function useUltraSectionBox(viewer) {
     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 DeferredPromise2();
@@ -76440,15 +76556,28 @@ function createUltraComponent(container) {
 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] = useState(0);
+  const [controlBarCustom, setControlBarCustom] = useState(() => (c) => c);
+  const controlBar2 = useUltraControlBar(props.viewer, sectionBox2, camera2, (_2) => _2);
   useEffect(() => {
     props.viewer.onStateChanged.subscribe((state) => updateModal(modal, state));
     props.viewer.selection.onValueChanged.subscribe(() => {
       setSelectState((i) => (i + 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: () => {
@@ -76458,24 +76587,34 @@ function UltraComponent(props) {
         /* @__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) {
@@ -76484,13 +76623,6 @@ function createComponentRef(viewer, modal) {
       }
     );
     return request2;
-  }
-  return {
-    viewer,
-    modal,
-    dispose: () => {
-    },
-    load
   };
 }
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -76499,6 +76631,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   createUltraComponent
 }, Symbol.toStringTag, { value: "Module" }));
 export {
+  controlBar as ControlBar,
   errorStyle as ErrorStyle,
   errors as Errors,
   icons as Icons,