vim-web 0.3.44-dev.2 → 0.3.44-dev.20

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
       );
     }
@@ -50664,7 +50664,7 @@ void main() {
     }
     init(duration) {
       this.cancel();
-      this._duration = duration;
+      this._duration = Math.max(duration, 0.01);
       this._clock.start();
     }
     cancel() {
@@ -50985,6 +50985,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);
@@ -51886,10 +51887,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();
@@ -51906,6 +51907,7 @@ void main() {
         this.inputs.pointerOverride = void 0;
       });
       __publicField(this, "onDoubleClick", (event) => {
+        console.log("Double click");
         event.stopImmediatePropagation();
         this.onMouseClick(
           new Vector2(event.offsetX, event.offsetY),
@@ -52253,7 +52255,7 @@ void main() {
       }
     }
     onIdleAction(hit) {
-      if (!this._viewer.gizmos.section.interactive) {
+      if (!this._viewer.gizmos.sectionBox.interactive) {
         this._viewer.selection.focus(hit == null ? void 0 : hit.object);
       }
     }
@@ -54811,12 +54813,12 @@ void main() {
       const xz = this.screenDist(this._lineX.position, this._lineZ.position);
       const yz = this.screenDist(this._lineY.position, this._lineZ.position);
       let conflicts = 0;
-      if (lx !== void 0 && lx < 0.1) conflicts++;
-      if (ly !== void 0 && ly < 0.1) conflicts++;
-      if (lz !== void 0 && lz < 0.1) conflicts++;
-      if (xy !== void 0 && xy < 0.1) conflicts++;
-      if (xz !== void 0 && xz < 0.1) conflicts++;
-      if (yz !== void 0 && yz < 0.1) conflicts++;
+      if (lx !== void 0 && lx < 0.3) conflicts++;
+      if (ly !== void 0 && ly < 0.3) conflicts++;
+      if (lz !== void 0 && lz < 0.3) conflicts++;
+      if (xy !== void 0 && xy < 0.3) conflicts++;
+      if (xz !== void 0 && xz < 0.3) conflicts++;
+      if (yz !== void 0 && yz < 0.3) conflicts++;
       const collapse2 = conflicts > 1;
       this._label.visible = collapse2;
       this._line.label.visible = !collapse2;
@@ -54846,6 +54848,7 @@ void main() {
         this._line.mesh.visible = false;
         this._line.label.visible = false;
       }
+      this._label.visible = false;
       this._viewer.renderer.needsUpdate = true;
     }
     /**
@@ -54895,7 +54898,9 @@ 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);
       this._startMarker.dispose();
       this._endMarker.dispose();
@@ -55466,6 +55471,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();
@@ -55478,15 +55484,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 * 5e-3, size.x * 5e-3, size.x * 5e-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;
@@ -55644,6 +55653,9 @@ void main() {
         this.update();
       };
       this._inputs.onBoxConfirm = (box) => this._onBoxConfirm.dispatch(box);
+      viewer.renderer.onBoxUpdated.subscribe(() => {
+        this.fitBox(viewer.renderer.getBoundingBox());
+      });
       this.clip = false;
       this.visible = false;
       this.interactive = false;
@@ -55744,6 +55756,7 @@ void main() {
     set visible(value) {
       if (value === this._visible) return;
       this._gizmos.visible = value;
+      this._visible = value;
       if (value) {
         this.update();
       }
@@ -55760,11 +55773,10 @@ void main() {
      * @param box - The bounding box to match (required).
      * @param padding - The scalar amount by which to expand the bounding box. Default is `1`.
      */
-    fitBox(box, padding = 1) {
+    fitBox(box) {
       if (!box) return;
-      const b = box.expandByScalar(padding);
-      this._gizmos.fitBox(b);
-      this.renderer.section.fitBox(b);
+      this._gizmos.fitBox(box);
+      this.renderer.section.fitBox(box);
       this._onBoxConfirm.dispatch(this.box);
       this.renderer.needsUpdate = true;
     }
@@ -55774,7 +55786,7 @@ void main() {
      * Call this if the renderer's section box is changed by code outside this class.
      */
     update() {
-      this.fitBox(this.section.box, 0);
+      this.fitBox(this.section.box);
       this.renderer.needsUpdate = true;
     }
     /**
@@ -55796,7 +55808,7 @@ void main() {
       /**
        * The section box gizmo.
        */
-      __publicField(this, "section");
+      __publicField(this, "sectionBox");
       /**
        * The loading indicator gizmo.
        */
@@ -55820,7 +55832,7 @@ void main() {
       var _a2;
       this.viewer = viewer;
       this._measure = new Measure(viewer);
-      this.section = new SectionBox$1(viewer);
+      this.sectionBox = new SectionBox$1(viewer);
       this.loading = new GizmoLoading(viewer);
       this.orbit = new GizmoOrbit(
         viewer.renderer,
@@ -55849,7 +55861,7 @@ void main() {
       var _a2;
       (_a2 = this.viewer.viewport.canvas.parentElement) == null ? void 0 : _a2.removeChild(this.axes.canvas);
       this._measure.clear();
-      this.section.dispose();
+      this.sectionBox.dispose();
       this.loading.dispose();
       this.orbit.dispose();
       this.rectangle.dispose();
@@ -57621,6 +57633,36 @@ void main() {
     }
     return Math.min(Math.max(value, min2), max2);
   }
+  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 InputMouse extends InputHandler {
     constructor(canvas, rpc, selection, camera2) {
       super();
@@ -57629,45 +57671,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) {
@@ -57687,21 +57731,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();
     }
@@ -58009,7 +58056,6 @@ void main() {
     }
     // -------------------- SectionBox -------------------
     writeSectionBoxState(data2) {
-      this.writeBoolean(data2.enabled);
       this.writeBoolean(data2.visible);
       this.writeBoolean(data2.interactible);
       this.writeBoolean(data2.clip);
@@ -58165,13 +58211,11 @@ void main() {
       return new Segment(position, target);
     }
     readSectionBoxState() {
-      const enabled = this.readBoolean();
       const visible2 = this.readBoolean();
       const interactible = this.readBoolean();
       const clip = this.readBoolean();
       const box = this.readBox3();
       return {
-        enabled,
         visible: visible2,
         interactible,
         clip,
@@ -58290,6 +58334,12 @@ void main() {
       marshal.writeUInt(componentHandle);
       this._socket.sendRPC(marshal);
     }
+    RPCEnableSectionBox(value) {
+      const marshal = new Marshal();
+      marshal.writeString("RPCEnableSectionBox");
+      marshal.writeBoolean(value);
+      this._socket.sendRPC(marshal);
+    }
     async RPCFrameAll(blendTime) {
       const marshal = new Marshal();
       marshal.writeString("RPCFrameAll");
@@ -59133,6 +59183,9 @@ void main() {
      * SECTION BOX METHODS
      * Methods for controlling section box visibility and position.
      ******************************************************************************/
+    RPCEnableSectionBox(enable) {
+      this.rpc.RPCEnableSectionBox(enable);
+    }
     RPCSetSectionBox(state) {
       this.rpc.RPCSetSectionBox(state);
     }
@@ -59675,15 +59728,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;
       }
     }
@@ -60800,8 +60857,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) {
@@ -61223,11 +61280,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
@@ -61241,6 +61302,7 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @returns Promise that resolves when the framing animation is complete
      */
     async frameAll(blendTime = this._defaultBlendTime) {
+      console.log("Camera.frameAll");
       const segment = await this._rpc.RPCFrameAll(blendTime);
       this._savedPosition = this._savedPosition ?? segment;
       return segment;
@@ -61251,6 +61313,7 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param blendTime - Duration of the camera animation in seconds (defaults to 0.5)
      */
     async frameBox(box, blendTime = this._defaultBlendTime) {
+      console.log("Camera.frameAll");
       const segment = await this._rpc.RPCFrameBox(box, blendTime);
       this._savedPosition = this._savedPosition ?? segment;
       return segment;
@@ -61283,10 +61346,14 @@ Averrage Date/Second ${avgDataRatePS} kb
       __publicField(this, "_rpc");
       __publicField(this, "_vims");
       __publicField(this, "_selectedNodes");
+      __publicField(this, "_onValueChanged", new distExports$1.SignalDispatcher());
       this._rpc = rpc;
       this._vims = vims;
       this._selectedNodes = /* @__PURE__ */ new Map();
     }
+    get onValueChanged() {
+      return this._onValueChanged.asEvent();
+    }
     /**
      * Gets the total number of selected nodes across all VIMs.
      * @returns The total count of selected nodes.
@@ -61355,12 +61422,17 @@ Averrage Date/Second ${avgDataRatePS} kb
         nodeSet = /* @__PURE__ */ new Set();
         this._selectedNodes.set(vim, nodeSet);
       }
+      let changed = false;
       nodes.forEach((n) => {
         if (!nodeSet.has(n)) {
           nodeSet.add(n);
           vim.highlight([n]);
+          changed = true;
         }
       });
+      if (changed) {
+        this._onValueChanged.dispatch();
+      }
     }
     /**
      * Removes the specified node(s) from the current selection.
@@ -61372,27 +61444,37 @@ Averrage Date/Second ${avgDataRatePS} kb
       const nodeSet = this._selectedNodes.get(vim);
       if (!nodeSet) return;
       const nodes = Array.isArray(node) ? node : [node];
+      let changed = false;
       nodes.forEach((n) => {
         if (nodeSet.has(n)) {
           nodeSet.delete(n);
           vim.removeHighlight([n], "visible");
+          changed = true;
         }
       });
       if (nodeSet.size === 0) {
         this._selectedNodes.delete(vim);
       }
+      if (changed) {
+        this._onValueChanged.dispatch();
+      }
     }
     /**
      * Clears all selections across all VIMs or for a specific VIM.
      * @param vim - Optional. If provided, only clears selections for the specified VIM.
      */
     clear(vim) {
+      let changed = false;
       this._selectedNodes.forEach((nodes, v) => {
         if (vim === void 0 || v === vim) {
           v.removeHighlight(Array.from(nodes), "visible");
+          changed = true;
         }
       });
       this._selectedNodes.clear();
+      if (changed) {
+        this._onValueChanged.dispatch();
+      }
     }
     /**
      * Calculates the bounding box encompassing all selected nodes.
@@ -61421,8 +61503,12 @@ Averrage Date/Second ${avgDataRatePS} kb
   class VimCollection {
     constructor() {
       __publicField(this, "_vims");
+      __publicField(this, "_onChanged", new distExports$1.SignalDispatcher());
       this._vims = [];
     }
+    get onChanged() {
+      return this._onChanged.asEvent();
+    }
     get count() {
       return this._vims.length;
     }
@@ -61433,6 +61519,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     add(vim) {
       if (!this._vims.some((v) => v.handle === vim.handle)) {
         this._vims.push(vim);
+        this._onChanged.dispatch();
       }
     }
     /**
@@ -61440,7 +61527,11 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param vim - The Vim instance to remove.
      */
     remove(vim) {
+      const count = this._vims.length;
       this._vims = this._vims.filter((v) => v.handle !== vim.handle);
+      if (this._vims.length !== count) {
+        this._onChanged.dispatch();
+      }
     }
     /**
      * Gets a Vim instance by its handle.
@@ -61703,7 +61794,6 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   class SectionBox {
     constructor(rpc) {
-      __publicField(this, "_enabled", false);
       __publicField(this, "_visible", true);
       __publicField(this, "_interactible", true);
       __publicField(this, "_clip", true);
@@ -61722,6 +61812,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return this._animationFrame > 0;
     }
     async onConnect() {
+      this._rpc.RPCEnableSectionBox(true);
       this.push();
       this._interval = setInterval(() => this.pull(), 1e3);
     }
@@ -61736,10 +61827,9 @@ Averrage Date/Second ${avgDataRatePS} kb
       if (this.needUpdate) return;
       const state = await this._rpc.RPCGetSectionBox();
       let changed = false;
-      if (state.enabled !== this._enabled || state.visible !== this._visible || state.interactible !== this._interactible || state.clip !== this._clip || state.box !== this._box) {
+      if (state.visible !== this._visible || state.interactible !== this._interactible || state.clip !== this._clip || state.box !== this._box) {
         changed = true;
       }
-      this._enabled = state.enabled;
       this._visible = state.visible;
       this._interactible = state.interactible;
       this._clip = state.clip;
@@ -61750,20 +61840,12 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     async push() {
       await this._rpc.RPCSetSectionBox({
-        enabled: this._enabled,
         visible: this._visible,
         interactible: this._interactible,
         clip: this._clip,
         box: this._box
       });
     }
-    get enabled() {
-      return this._enabled;
-    }
-    set enabled(value) {
-      this._enabled = value;
-      this.scheduleUpdate();
-    }
     get visible() {
       return this._visible;
     }
@@ -61771,10 +61853,10 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._visible = value;
       this.scheduleUpdate();
     }
-    get interactible() {
+    get interactive() {
       return this._interactible;
     }
-    set interactible(value) {
+    set interactive(value) {
       this._interactible = value;
       this.scheduleUpdate();
     }
@@ -61884,6 +61966,9 @@ Averrage Date/Second ${avgDataRatePS} kb
     get decoder() {
       return this._decoder;
     }
+    get selection() {
+      return this._selection;
+    }
     /**
      * Gets the current URL to which the viewer is connected.
      * @returns The URL as a string, or undefined if not connected.
@@ -66514,6 +66599,31 @@ Averrage Date/Second ${avgDataRatePS} kb
     wrapper: "div",
     clickable: false
   }), _defineProperty(_class2, "supportedWrappers", ["div", "span"]), _defineProperty(_class2, "displayName", "ReactTooltip"), _class2)) || _class) || _class) || _class) || _class) || _class) || _class) || _class;
+  function slidersHoriz({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M24,74h111.163c6.293,15.258,21.308,26,38.837,26s32.543-10.742,38.837-26h19.163c8.836,0,16-7.164,16-16s-7.164-16-16-16h-19.163c-6.293-15.258-21.308-26-38.837-26s-32.543,10.742-38.837,26H24c-8.836,0-16,7.164-16,16s7.164,16,16,16Zm132.083-17.637c.014-.151,.031-.301,.048-.451,.05-.435,.116-.864,.197-1.289,.021-.11,.037-.222,.06-.331,.106-.503,.236-.998,.383-1.484,.046-.153,.1-.303,.15-.455,.116-.35,.242-.694,.379-1.033,.067-.167,.132-.336,.204-.5,.189-.433,.393-.859,.615-1.273,.092-.173,.196-.339,.294-.508,.15-.26,.305-.517,.467-.768,.133-.205,.268-.409,.409-.608,.147-.208,.302-.41,.458-.611,.28-.362,.572-.713,.878-1.053,.13-.146,.259-.293,.395-.435,.212-.221,.432-.435,.656-.645,.116-.109,.234-.215,.354-.321,.787-.703,1.634-1.338,2.535-1.896,.1-.062,.199-.123,.3-.182,.304-.181,.612-.356,.928-.519,2.464-1.27,5.25-2,8.208-2s5.744,.73,8.208,2c.315,.163,.624,.338,.928,.519,.101,.06,.201,.121,.3,.182,.901,.558,1.749,1.193,2.535,1.896,.119,.106,.238,.212,.354,.321,.224,.21,.443,.424,.656,.645,.135,.142,.264,.289,.395,.435,.306,.34,.599,.691,.878,1.053,.155,.202,.311,.403,.458,.611,.141,.199,.276,.403,.409,.608,.163,.251,.317,.508,.467,.768,.098,.169,.202,.335,.294,.508,.222,.415,.425,.84,.615,1.273,.072,.165,.137,.333,.204,.5,.137,.339,.263,.684,.379,1.033,.05,.151,.104,.301,.15,.455,.147,.487,.277,.981,.383,1.484,.023,.109,.039,.221,.06,.331,.081,.425,.147,.854,.197,1.289,.018,.15,.035,.3,.048,.451,.049,.54,.083,1.084,.083,1.637s-.034,1.097-.083,1.637c-.014,.151-.031,.301-.048,.451-.05,.435-.116,.864-.197,1.289-.021,.11-.037,.222-.06,.331-.106,.503-.236,.998-.383,1.484-.046,.153-.1,.303-.15,.455-.116,.35-.242,.694-.379,1.033-.067,.167-.132,.336-.204,.5-.189,.433-.393,.859-.615,1.273-.092,.173-.196,.339-.294,.508-.15,.26-.305,.517-.467,.768-.133,.205-.268,.409-.409,.608-.147,.208-.302,.41-.458,.611-.28,.362-.572,.713-.878,1.053-.13,.146-.259,.293-.395,.435-.212,.221-.432,.435-.656,.645-.116,.109-.234,.215-.354,.321-.787,.703-1.634,1.338-2.535,1.896-.1,.062-.199,.123-.3,.182-.304,.181-.612,.356-.928,.519-2.464,1.27-5.25,2-8.208,2s-5.744-.73-8.208-2c-.315-.163-.624-.338-.928-.519-.101-.06-.201-.121-.3-.182-.901-.558-1.749-1.193-2.535-1.896-.119-.106-.238-.212-.354-.321-.224-.21-.443-.424-.656-.645-.135-.142-.264-.289-.395-.435-.306-.34-.599-.691-.878-1.053-.155-.202-.311-.403-.458-.611-.141-.199-.276-.403-.409-.608-.163-.251-.317-.508-.467-.768-.098-.169-.202-.335-.294-.508-.222-.415-.425-.84-.615-1.273-.072-.165-.137-.333-.204-.5-.137-.339-.263-.684-.379-1.033-.05-.151-.104-.301-.15-.455-.147-.487-.277-.981-.383-1.484-.023-.109-.039-.221-.06-.331-.081-.425-.147-.854-.197-1.289-.018-.15-.035-.3-.048-.451-.049-.54-.083-1.084-.083-1.637s.034-1.097,.083-1.637Z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M232,112H120.837c-6.293-15.258-21.308-26-38.837-26s-32.543,10.742-38.837,26H24c-8.836,0-16,7.164-16,16s7.164,16,16,16h19.163c6.293,15.258,21.308,26,38.837,26s32.543-10.742,38.837-26h111.163c8.836,0,16-7.164,16-16s-7.164-16-16-16Zm-132.083,17.637c-.014,.151-.031,.301-.048,.451-.05,.435-.116,.864-.197,1.289-.021,.11-.037,.222-.06,.331-.106,.503-.236,.998-.383,1.484-.046,.153-.1,.303-.15,.455-.116,.35-.242,.694-.379,1.033-.067,.167-.132,.336-.204,.5-.189,.433-.393,.859-.615,1.273-.092,.173-.196,.339-.294,.508-.15,.26-.305,.517-.467,.768-.133,.205-.268,.409-.409,.608-.147,.208-.302,.41-.458,.611-.28,.362-.572,.713-.878,1.053-.13,.146-.259,.293-.395,.435-.212,.221-.432,.435-.656,.645-.116,.109-.234,.215-.354,.321-.787,.703-1.634,1.338-2.535,1.896-.1,.062-.199,.123-.3,.182-.304,.181-.612,.356-.928,.519-2.464,1.27-5.25,2-8.208,2s-5.744-.73-8.208-2c-.315-.163-.624-.338-.928-.519-.101-.06-.201-.121-.3-.182-.901-.558-1.749-1.193-2.535-1.896-.119-.106-.238-.212-.354-.321-.224-.21-.443-.424-.656-.645-.135-.142-.264-.289-.395-.435-.306-.34-.599-.691-.878-1.053-.155-.202-.311-.403-.458-.611-.141-.199-.276-.403-.409-.608-.163-.251-.317-.508-.467-.768-.098-.169-.202-.335-.294-.508-.222-.415-.425-.84-.615-1.273-.072-.165-.137-.333-.204-.5-.137-.339-.263-.684-.379-1.033-.05-.151-.104-.301-.15-.455-.147-.487-.277-.981-.383-1.484-.023-.109-.039-.221-.06-.331-.081-.425-.147-.854-.197-1.289-.018-.15-.035-.3-.048-.451-.049-.54-.083-1.084-.083-1.637s.034-1.097,.083-1.637c.014-.151,.031-.301,.048-.451,.05-.435,.116-.864,.197-1.289,.021-.11,.037-.222,.06-.331,.106-.503,.236-.998,.383-1.484,.046-.153,.1-.303,.15-.455,.116-.35,.242-.694,.379-1.033,.067-.167,.132-.336,.204-.5,.189-.433,.393-.859,.615-1.273,.092-.173,.196-.339,.294-.508,.15-.26,.305-.517,.467-.768,.133-.205,.268-.409,.409-.608,.147-.208,.302-.41,.458-.611,.28-.362,.572-.713,.878-1.053,.13-.146,.259-.293,.395-.435,.212-.221,.432-.435,.656-.645,.116-.109,.234-.215,.354-.321,.787-.703,1.634-1.338,2.535-1.896,.1-.062,.199-.123,.3-.182,.304-.181,.612-.356,.928-.519,2.464-1.27,5.25-2,8.208-2s5.744,.73,8.208,2c.315,.163,.624,.338,.928,.519,.101,.06,.201,.121,.3,.182,.901,.558,1.749,1.193,2.535,1.896,.119,.106,.238,.212,.354,.321,.224,.21,.443,.424,.656,.645,.135,.142,.264,.289,.395,.435,.306,.34,.599,.691,.878,1.053,.155,.202,.311,.403,.458,.611,.141,.199,.276,.403,.409,.608,.163,.251,.317,.508,.467,.768,.098,.169,.202,.335,.294,.508,.222,.415,.425,.84,.615,1.273,.072,.165,.137,.333,.204,.5,.137,.339,.263,.684,.379,1.033,.05,.151,.104,.301,.15,.455,.147,.487,.277,.981,.383,1.484,.023,.109,.039,.221,.06,.331,.081,.425,.147,.854,.197,1.289,.018,.15,.035,.3,.048,.451,.049,.54,.083,1.084,.083,1.637s-.034,1.097-.083,1.637Z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M232,182h-19.163c-6.293-15.258-21.308-26-38.837-26s-32.543,10.742-38.837,26H24c-8.836,0-16,7.164-16,16s7.164,16,16,16h111.163c6.293,15.258,21.308,26,38.837,26s32.543-10.742,38.837-26h19.163c8.836,0,16-7.164,16-16s-7.164-16-16-16Zm-40.083,17.637c-.014,.151-.031,.301-.048,.451-.05,.435-.116,.864-.197,1.289-.021,.11-.037,.222-.06,.331-.106,.503-.236,.998-.383,1.484-.046,.153-.1,.303-.15,.455-.116,.35-.242,.694-.379,1.033-.067,.167-.132,.336-.204,.5-.189,.433-.393,.859-.615,1.273-.092,.173-.196,.339-.294,.508-.15,.26-.305,.517-.467,.768-.133,.205-.268,.409-.409,.608-.147,.208-.302,.41-.458,.611-.28,.362-.572,.713-.878,1.053-.13,.146-.259,.293-.395,.435-.212,.221-.432,.435-.656,.645-.116,.109-.234,.215-.354,.321-.787,.703-1.634,1.338-2.535,1.896-.1,.062-.199,.123-.3,.182-.304,.181-.612,.356-.928,.519-2.464,1.27-5.25,2-8.208,2s-5.744-.73-8.208-2c-.315-.163-.624-.338-.928-.519-.101-.06-.201-.121-.3-.182-.901-.558-1.749-1.193-2.535-1.896-.119-.106-.238-.212-.354-.321-.224-.21-.443-.424-.656-.645-.135-.142-.264-.289-.395-.435-.306-.34-.599-.691-.878-1.053-.155-.202-.311-.403-.458-.611-.141-.199-.276-.403-.409-.608-.163-.251-.317-.508-.467-.768-.098-.169-.202-.335-.294-.508-.222-.415-.425-.84-.615-1.273-.072-.165-.137-.333-.204-.5-.137-.339-.263-.684-.379-1.033-.05-.151-.104-.301-.15-.455-.147-.487-.277-.981-.383-1.484-.023-.109-.039-.221-.06-.331-.081-.425-.147-.854-.197-1.289-.018-.15-.035-.3-.048-.451-.049-.54-.083-1.084-.083-1.637s.034-1.097,.083-1.637c.014-.151,.031-.301,.048-.451,.05-.435,.116-.864,.197-1.289,.021-.11,.037-.222,.06-.331,.106-.503,.236-.998,.383-1.484,.046-.153,.1-.303,.15-.455,.116-.35,.242-.694,.379-1.033,.067-.167,.132-.336,.204-.5,.189-.433,.393-.859,.615-1.273,.092-.173,.196-.339,.294-.508,.15-.26,.305-.517,.467-.768,.133-.205,.268-.409,.409-.608,.147-.208,.302-.41,.458-.611,.28-.362,.572-.713,.878-1.053,.13-.146,.259-.293,.395-.435,.212-.221,.432-.435,.656-.645,.116-.109,.234-.215,.354-.321,.787-.703,1.634-1.338,2.535-1.896,.1-.062,.199-.123,.3-.182,.304-.181,.612-.356,.928-.519,2.464-1.27,5.25-2,8.208-2s5.744,.73,8.208,2c.315,.163,.624,.338,.928,.519,.101,.06,.201,.121,.3,.182,.901,.558,1.749,1.193,2.535,1.896,.119,.106,.238,.212,.354,.321,.224,.21,.443,.424,.656,.645,.135,.142,.264,.289,.395,.435,.306,.34,.599,.691,.878,1.053,.155,.202,.311,.403,.458,.611,.141,.199,.276,.403,.409,.608,.163,.251,.317,.508,.467,.768,.098,.169,.202,.335,.294,.508,.222,.415,.425,.84,.615,1.273,.072,.165,.137,.333,.204,.5,.137,.339,.263,.684,.379,1.033,.05,.151,.104,.301,.15,.455,.147,.487,.277,.981,.383,1.484,.023,.109,.039,.221,.06,.331,.081,.425,.147,.854,.197,1.289,.018,.15,.035,.3,.048,.451,.049,.54,.083,1.084,.083,1.637s-.034,1.097-.083,1.637Z"
+        }
+      )
+    ] });
+  }
   function settings({ height, width, fill: fill2, className }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className, height, width, viewBox: "0 0 256 256", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "path",
@@ -66758,6 +66868,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" }),
@@ -67048,6 +67177,60 @@ Averrage Date/Second ${avgDataRatePS} kb
       )
     ] });
   }
+  function sectionBoxSettings({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 109.70368,2.190587 17.447731,55.710016 A 16.213,16.213 0 0 0 9.3632977,69.780402 L 9.6706253,176.28696 a 16.215,16.215 0 0 0 8.1654987,14.0235 l 95.269706,54.51732 c 1.35625,0.77609 3.04643,-0.20379 3.04192,-1.76478 L 115.79652,121.3395 221.23346,60.173007 c 1.35174,-0.783903 1.34611,-2.734895 -0.0101,-3.511985 L 125.95362,2.1436974 a 16.278,16.278 0 0 0 -16.24994,0.04689 z M 95.74464,211.51674 29.976783,173.88635 29.714025,82.825734 l 65.768857,37.630376 0.262761,91.06162 z m 9.95507,-107.77018 -65.766855,-37.629382 77.949835,-45.221114 65.76886,37.62938 -77.95084,45.221116 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "m 175.57713,226.38215 c -1.28316,3.98514 -5.40414,6.14971 -9.13315,4.86244 l -3.60809,-1.24739 c -3.76004,-1.29737 -5.86799,-5.60846 -4.70379,-9.64145 l 0.42438,-1.46966 c 0.96925,-3.3572 -0.3989,-7.74539 -3.07521,-9.81798 l -0.73032,-0.56682 c -2.66882,-2.0641 -7.02118,-2.10184 -9.7235,-0.0863 l -1.1842,0.8837 c -3.23919,2.42089 -7.76901,1.59565 -10.07644,-1.77642 l -2.23242,-3.26259 c -2.3254,-3.40131 -1.6226,-8.22657 1.51812,-10.73784 l 1.15669,-0.92571 c 2.63933,-2.1082 3.9555,-6.51288 2.93126,-9.86426 l -0.27844,-0.91558 c -1.01877,-3.33861 -4.52035,-6.09072 -7.821,-6.14815 l -1.44661,-0.0253 c -3.95551,-0.0693 -7.1652,-3.56724 -7.1652,-7.7374 v -4.03725 c 0,-4.20531 3.2372,-7.66991 7.1652,-7.73745 l 1.44661,-0.0251 c 3.30016,-0.0568 6.79826,-2.79894 7.821,-6.14974 l 0.27844,-0.91348 c 1.02023,-3.33859 -0.29193,-7.75605 -2.93126,-9.86586 l -1.15669,-0.9241 c -3.16419,-2.52987 -3.82354,-7.3652 -1.51812,-10.73784 l 2.23242,-3.2647 c 2.32739,-3.39921 6.86326,-4.17603 10.07644,-1.77645 l 1.1842,0.88372 c 2.70232,2.01782 7.04471,1.98645 9.7235,-0.086 l 0.73032,-0.56467 c 2.66683,-2.06414 4.04446,-6.46083 3.07521,-9.81803 l -0.42438,-1.47176 c -1.1627,-4.02504 0.97525,-8.35208 4.70379,-9.63935 l 3.60809,-1.24738 c 3.76004,-1.299493 7.84798,0.87146 9.13315,4.86086 l 0.46987,1.4569 c 1.07175,3.32157 4.60331,6.0152 7.91546,6.0152 h 0.90232 c 3.30011,0 6.84321,-2.69363 7.91345,-6.0152 l 0.46988,-1.4569 c 1.28517,-3.98301 5.40663,-6.148123 9.13516,-4.86033 l 3.60808,1.24739 c 3.76006,1.29738 5.86803,5.60632 4.70383,9.63932 l -0.42441,1.47179 c -0.96925,3.35722 0.39893,7.7454 3.07522,9.81798 l 0.73029,0.56467 c 2.66883,2.06622 7.02122,2.10401 9.72154,0.0862 l 1.1842,-0.88369 c 3.23916,-2.41874 7.77099,-1.59353 10.0764,1.77644 l 2.23444,3.26469 c 2.32542,3.40132 1.62261,8.22656 -1.51812,10.73784 l -1.15667,0.92409 c -2.63936,2.11036 -3.95552,6.51504 -2.93328,9.86586 l 0.28043,0.91346 c 1.01873,3.34022 4.52035,6.09284 7.82101,6.14975 l 1.44514,0.0251 c 3.95749,0.0671 7.16516,3.56725 7.16516,7.73741 v 4.03729 c 0,4.20314 -3.23717,7.66987 -7.16516,7.73739 l -1.44514,0.0254 c -3.30016,0.0568 -6.79828,2.79678 -7.82101,6.14812 l -0.28043,0.91562 c -1.01872,3.33856 0.29392,7.75601 2.93328,9.86424 l 1.15667,0.92571 c 3.16422,2.52985 3.82355,7.36522 1.51812,10.73786 l -2.23444,3.26254 c -2.32537,3.40135 -6.86123,4.17815 -10.0764,1.77645 l -1.1842,-0.88373 c -2.70032,-2.01569 -7.04322,-1.98646 -9.72154,0.086 l -0.73029,0.56681 c -2.66683,2.06412 -4.04447,6.46079 -3.07522,9.81801 l 0.42441,1.46964 c 1.1627,4.02717 -0.97526,8.3542 -4.70383,9.64146 l -3.60808,1.24739 c -3.76002,1.29736 -7.84798,-0.87146 -9.13516,-4.86248 l -0.46988,-1.45474 c -1.06973,-3.32157 -4.60133,-6.01523 -7.91345,-6.01523 h -0.90232 c -3.30013,0 -6.84323,2.69366 -7.91546,6.01523 l -0.46987,1.45474 z m 8.83473,-24.33631 c 18.77473,0 33.99232,-16.18681 33.99232,-36.15723 0,-19.97043 -15.21759,-36.1551 -33.99232,-36.1551 -18.77467,0 -33.9903,16.18681 -33.9903,36.1551 0,19.96828 15.21761,36.15723 33.9903,36.15723 z"
+        }
+      )
+    ] });
+  }
+  function sectionBoxAuto({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 109.70368,2.190587 17.447731,55.710016 A 16.213,16.213 0 0 0 9.3632977,69.780402 L 9.6706253,176.28696 a 16.215,16.215 0 0 0 8.1654987,14.0235 l 95.269706,54.51732 c 1.35625,0.77609 3.04643,-0.20379 3.04192,-1.76478 L 115.79652,121.3395 221.23346,60.173007 c 1.35174,-0.783903 1.34611,-2.734895 -0.0101,-3.511985 L 125.95362,2.1436974 a 16.278,16.278 0 0 0 -16.24994,0.04689 z M 95.74464,211.51674 29.976783,173.88635 29.714025,82.825734 l 65.768857,37.630376 0.262761,91.06162 z m 9.95507,-107.77018 -65.766855,-37.629382 77.949835,-45.221114 65.76886,37.62938 -77.95084,45.221116 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 221.207314 217.240532 L 214.827314 200.469532 L 160.504314 200.469532 L 154.124314 217.604532 C 151.632314 224.288532 149.506314 228.815532 147.744314 231.186532 C 145.981314 233.494532 143.095314 234.649532 139.085314 234.649532 C 135.682314 234.649532 132.674314 233.403532 130.061314 230.912532 C 127.448314 228.420532 126.142314 225.595532 126.142314 222.435532 C 126.142314 220.612532 126.446314 218.729532 127.053314 216.784532 C 127.661314 214.840532 128.664314 212.137532 130.061314 208.672532 L 164.241314 121.901532 C 165.213314 119.410532 166.368314 116.432532 167.704314 112.969532 C 169.102314 109.444532 170.560314 106.528532 172.079314 104.219532 C 173.659314 101.911532 175.695314 100.057532 178.186314 98.660532 C 180.738314 97.201532 183.868314 96.471532 187.574314 96.471532 C 191.342314 96.471532 194.471314 97.201532 196.962314 98.660532 C 199.514314 100.057532 201.550314 101.879532 203.069314 104.128532 C 204.649314 106.376532 205.955314 108.807532 206.988314 111.419532 C 208.082314 113.971532 209.449314 117.405532 211.090314 121.719532 L 245.999314 207.943532 C 248.733314 214.505532 250.100314 219.275532 250.100314 222.253532 C 250.100314 225.352532 248.794314 228.209532 246.181314 230.822532 C 243.629314 233.373532 240.530314 234.649532 236.884314 234.649532 C 234.758314 234.649532 232.935314 234.254532 231.416314 233.464532 C 229.896314 232.735532 228.620314 231.732532 227.587314 230.456532 C 226.554314 229.119532 225.430314 227.115532 224.215314 224.440532 C 223.060314 221.706532 222.058314 219.306532 221.207314 217.240532 Z M 167.613314 180.143532 L 207.535314 180.143532 L 187.392314 125.000532 Z"
+        }
+      )
+    ] });
+  }
+  function sectionBoxVisible({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 109.70368,2.190587 17.447731,55.710016 A 16.213,16.213 0 0 0 9.3632977,69.780402 L 9.6706253,176.28696 a 16.215,16.215 0 0 0 8.1654987,14.0235 l 95.269706,54.51732 c 1.35625,0.77609 3.04643,-0.20379 3.04192,-1.76478 L 115.79652,121.3395 221.23346,60.173007 c 1.35174,-0.783903 1.34611,-2.734895 -0.0101,-3.511985 L 125.95362,2.1436974 a 16.278,16.278 0 0 0 -16.24994,0.04689 z M 95.74464,211.51674 29.976783,173.88635 29.714025,82.825734 l 65.768857,37.630376 0.262761,91.06162 z m 9.95507,-107.77018 -65.766855,-37.629382 77.949835,-45.221114 65.76886,37.62938 -77.95084,45.221116 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "m 186.05204,115.30607 c -37.93016,0 -68.67906,39.581 -68.67906,59.64313 0,21.35677 30.7489,59.64312 68.67906,59.64312 37.93016,0 68.67906,-38.28635 68.67906,-59.64312 0,-20.06213 -30.7489,-59.64313 -68.67906,-59.64313 z m 40.42729,85.41349 c -6.9441,6.83951 -21.43002,18.31368 -40.42729,18.31368 -18.99727,0 -33.48265,-11.47417 -40.42728,-18.31368 -11.61642,-11.4411 -15.37445,-22.30263 -15.37445,-25.77036 0,-0.0305 0.0381,-3.14164 3.35186,-9.36916 2.8652,-5.38603 7.15818,-11.06056 12.08697,-15.97917 3.66628,-3.65833 9.40099,-8.61065 16.72067,-12.50626 -6.58514,7.55977 -10.6973,18.2333 -10.6973,30.07505 0,22.91463 15.37445,41.49087 34.33953,41.49087 18.96508,0 34.33953,-18.57624 34.33953,-41.49087 0,-5.71277 -0.95614,-11.15521 -2.68492,-16.10818 -0.0445,9.9792 -6.75148,18.05306 -15.0214,18.05306 -8.26992,0 -15.02354,-8.12702 -15.02354,-18.15225 0,-8.97953 5.39774,-16.43168 12.48617,-17.88905 11.9346,3.73548 21.13062,11.40091 26.2676,16.52763 4.92879,4.91861 9.22177,10.59379 12.08697,15.97917 3.31377,6.22752 3.35186,9.33869 3.35186,9.36916 0,3.46773 -3.75803,14.32926 -15.37445,25.77036 z"
+        }
+      )
+    ] });
+  }
   function sectionBox({ height, width, fill: fill2, className }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -67066,6 +67249,31 @@ Averrage Date/Second ${avgDataRatePS} kb
       )
     ] });
   }
+  function sectionBoxDisable({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 109.70368,2.190587 17.447731,55.710016 A 16.213,16.213 0 0 0 9.3632977,69.780402 L 9.6706253,176.28696 a 16.215,16.215 0 0 0 8.1654987,14.0235 l 95.269706,54.51732 c 1.35625,0.77609 3.04643,-0.20379 3.04192,-1.76478 L 115.79652,121.3395 221.23346,60.173007 c 1.35174,-0.783903 1.34611,-2.734895 -0.0101,-3.511985 L 125.95362,2.1436974 a 16.278,16.278 0 0 0 -16.24994,0.04689 z M 95.74464,211.51674 29.976783,173.88635 29.714025,82.825734 l 65.768857,37.630376 0.262761,91.06162 z m 9.95507,-107.77018 -65.766855,-37.629382 77.949835,-45.221114 65.76886,37.62938 -77.95084,45.221116 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "m 185.61601,192.28388 v -44.0883 c 0,-2.52838 -1.97182,-4.91709 -4.84542,-5.26996 -3.49833,-0.42965 -6.4956,1.9253 -6.4956,4.89027 v 44.08783 c 0,2.52885 1.97182,4.91756 4.84542,5.27043 3.49833,0.42965 6.4956,-1.92531 6.4956,-4.89027 z m 22.68149,0 v -44.0883 c 0,-2.52838 -1.97182,-4.91709 -4.84542,-5.26996 -3.49832,-0.42965 -6.49559,1.9253 -6.49559,4.89027 v 44.08783 c 0,2.52885 1.97182,4.91756 4.84542,5.27043 3.49832,0.42965 6.49559,-1.92531 6.49559,-4.89027 z m 38.18908,-71.6429 H 225.42553 V 105.9623 c 0,-2.80818 -2.61299,-5.08498 -5.83584,-5.08498 h -56.43703 c -3.22285,0 -5.83585,2.2768 -5.83585,5.08498 v 14.67868 h -21.23089 c -4.69044,0 -8.49236,3.31275 -8.49236,7.39969 v 0.0231 c 0,4.08694 3.80192,7.39969 8.49236,7.39969 h 110.40066 c 4.69044,0 8.49236,-3.31275 8.49236,-7.39969 v -0.0231 c 0,-4.08694 -3.80192,-7.39969 -8.49236,-7.39969 z m -35.23745,-6.4863 v 6.4863 h -39.75592 v -6.4863 a 1.0615448,0.92496161 0 0 1 1.06155,-0.92496 h 37.63282 a 1.0615448,0.92496161 0 0 1 1.06155,0.92496 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "m 227.42894,215.76405 c 0,5.6549 -4.47215,10.23953 -9.98832,10.23953 h -49.76957 c -5.51617,0 -9.98832,-4.58463 -9.98832,-10.23953 v -69.72083 a 4.9863693,5.1117785 0 0 0 -4.98637,-5.11178 h -10.00391 a 4.9863693,5.1117785 0 0 0 -4.98637,5.11178 v 73.13422 c 0,15.08038 11.92553,27.30584 26.63594,27.30584 h 56.42825 c 14.71041,0 26.63594,-12.22546 26.63594,-27.30584 v -73.13422 a 4.9863693,5.1117785 0 0 0 -4.98637,-5.11178 h -10.0039 a 4.9863693,5.1117785 0 0 0 -4.98637,5.11178 v 69.72147 z"
+        }
+      )
+    ] });
+  }
   function sectionBoxClip({ 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" }),
@@ -67147,6 +67355,24 @@ Averrage Date/Second ${avgDataRatePS} kb
       ) })
     ] });
   }
+  function sectionBoxShrink2({ height, width, fill: fill2, className }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className, height, width, viewBox: "0 0 256 256", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "M 109.70368,2.190587 17.447731,55.710016 A 16.213,16.213 0 0 0 9.3632977,69.780402 L 9.6706253,176.28696 a 16.215,16.215 0 0 0 8.1654987,14.0235 l 95.269706,54.51732 c 1.35625,0.77609 3.04643,-0.20379 3.04192,-1.76478 L 115.79652,121.3395 221.23346,60.173007 c 1.35174,-0.783903 1.34611,-2.734895 -0.0101,-3.511985 L 125.95362,2.1436974 a 16.278,16.278 0 0 0 -16.24994,0.04689 z M 95.74464,211.51674 29.976783,173.88635 29.714025,82.825734 l 65.768857,37.630376 0.262761,91.06162 z m 9.95507,-107.77018 -65.766855,-37.629382 77.949835,-45.221114 65.76886,37.62938 -77.95084,45.221116 z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fill: fill2,
+          d: "m 223.41166,231.92815 -50.05,-51.82677 -21.39562,22.15515 -21.52251,-81.36695 78.57748,22.28655 -21.39561,22.15516 50.05002,51.82676 z"
+        }
+      )
+    ] });
+  }
   function ghost({ height, width, fill: fill2, className }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className, width: height, height: width, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "data-name": "ICONS", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -67184,6 +67410,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     arrowLeft,
+    autoCamera,
     camera,
     checkmark,
     close,
@@ -67206,11 +67433,17 @@ Averrage Date/Second ${avgDataRatePS} kb
     pan,
     perspective,
     sectionBox,
+    sectionBoxAuto,
     sectionBoxClip,
+    sectionBoxDisable,
     sectionBoxIgnore,
     sectionBoxReset,
+    sectionBoxSettings,
     sectionBoxShrink,
+    sectionBoxShrink2,
+    sectionBoxVisible,
     settings,
+    slidersHoriz,
     toggleIsolation,
     trash,
     treeView,
@@ -67230,9 +67463,6 @@ Averrage Date/Second ${avgDataRatePS} kb
   function anyUiCursorButton(settings2) {
     return isTrue(settings2.ui.orbit) || isTrue(settings2.ui.lookAround) || isTrue(settings2.ui.pan) || isTrue(settings2.ui.zoom) || isTrue(settings2.ui.zoomWindow) || isTrue(settings2.ui.zoomToFit);
   }
-  function anyUiToolButton(settings2) {
-    return isTrue(settings2.ui.sectioningMode) || isTrue(settings2.ui.measuringMode) || isTrue(settings2.ui.toggleIsolation);
-  }
   function anyUiSettingButton(settings2) {
     return isTrue(settings2.ui.projectInspector) || isTrue(settings2.ui.settings) || isTrue(settings2.ui.help) || isTrue(settings2.ui.maximise);
   }
@@ -67327,7 +67557,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(
@@ -67364,7 +67594,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     );
     const hidden2 = isTrue(props.settings.value.ui.axesPanel) ? "" : " vc-hidden";
-    const createBar2 = () => {
+    const createBar = () => {
       if (!anyUiAxesButton(props.settings.value)) {
         return (
           // Keeps layout when all buttons are disabled.
@@ -67386,7 +67616,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         className: "vim-axes-panel vc-pointer-events-none vc-absolute vc-overflow-hidden vc-z-20 vc-flex vc-flex-col vc-border vc-border-white vc-opacity-50 vc-shadow-lg vc-saturate-0 vc-transition-all hover:vc-opacity-100 hover:vc-saturate-100" + hidden2,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: gizmoDiv, className: "vim-axes-panel-gizmo vc-absolute vc-pointer-events-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-axes-panel-bar vc-absolute vc-top-[75%] vc-bottom-0 vc-right-0 vc-left-0", children: createBar2() })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-axes-panel-bar vc-absolute vc-top-[75%] vc-bottom-0 vc-right-0 vc-left-0", children: createBar() })
         ]
       }
     );
@@ -67395,22 +67625,98 @@ Averrage Date/Second ${avgDataRatePS} kb
   function buttonDefaultStyle(on) {
     return on ? btnStyle + " vc-text-primary" : btnStyle + " vc-text-gray-medium";
   }
+  function buttonExpandStyle(on) {
+    return on ? btnStyle + " vc-text-white vc-bg-primary" : btnStyle + " vc-text-gray-medium";
+  }
+  function buttonDisableStyle(on) {
+    return on ? btnStyle + " vc-text-gray-medium" : btnStyle + " vc-text-gray vc-pointer-events-none";
+  }
   function buttonBlueStyle(on) {
     return btnStyle + " vc-text-white";
   }
   function createButton(button) {
     var _a2;
     if (button.enabled !== void 0 && !button.enabled()) return null;
-    const style = button.style((_a2 = button.isOn) == null ? void 0 : _a2.call(button));
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { "data-tip": button.tip, onClick: button.action, className: style, type: "button", children: button.icon({ height: "20", width: "20", fill: "currentColor", className: "vc-max-h-[80%]" }) }, button.id);
+    const style = (button.style ?? buttonDefaultStyle)((_a2 = button.isOn) == null ? void 0 : _a2.call(button));
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { id: button.id, "data-tip": button.tip, onClick: button.action, className: style, type: "button", children: button.icon({ height: "20", width: "20", fill: "currentColor", className: "vc-max-h-[80%]" }) }, button.id);
   }
-  const sectionStyle = "vc-flex vc-items-center vc-rounded-full vc-mb-2 vc-px-2 vc-shadow-md";
+  const sectionStyle = "vc-flex vc-items-center vc-rounded-full vc-mb-2 vc-shadow-md";
   const sectionDefaultStyle = sectionStyle + " vc-bg-white";
   const sectionBlueStyle = sectionStyle + " vc-bg-primary";
+  const sectionNoPadStyle = sectionStyle.replace("vc-px-2", "") + " vc-bg-white";
   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}`, children: section.buttons.map((b) => createButton(b)) }, section.id);
+    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();
+    });
+    if (!props.show) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          gap: "min(10px, 2%)",
+          bottom: "min(36px, 10%)"
+        },
+        id: "vim-control-bar",
+        className: "vim-control-bar vc-pointer-events-auto vc-flex-wrap vc-mx-2 vc-min-w-0 vc-absolute vc-left-0 vc-right-0 vc-z-20 vc-flex vc-items-center vc-justify-center transition-all",
+        children: props.content.map(createSection$1)
+      }
+    );
   }
+  const controlBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    ControlBar,
+    buttonBlueStyle,
+    buttonDefaultStyle,
+    buttonDisableStyle,
+    buttonExpandStyle,
+    createButton,
+    createSection: createSection$1,
+    ids,
+    sectionBlueStyle,
+    sectionDefaultStyle,
+    sectionNoPadStyle
+  }, Symbol.toStringTag, { value: "Module" }));
   function getPointerState(viewer) {
     const [mode, setMode] = React2.useState(viewer.inputs.pointerActive);
     React2.useEffect(() => {
@@ -67472,52 +67778,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
-  function getSectionBoxState(viewer) {
-    const sectionGizmo = viewer.gizmos.section;
-    const first = React2.useRef(true);
-    const [section, setSection] = React2.useState({
-      clip: sectionGizmo.clip,
-      active: sectionGizmo.visible && sectionGizmo.interactive
-    });
-    React2.useEffect(() => {
-      const subSection = sectionGizmo.onStateChanged.subscribe(
-        () => setSection({
-          clip: sectionGizmo.clip,
-          active: sectionGizmo.visible && sectionGizmo.interactive
-        })
-      );
-      return () => subSection();
-    }, []);
-    const toggle = () => {
-      ReactTooltip.hide();
-      if (viewer.inputs.pointerActive === "rect") {
-        viewer.inputs.pointerActive = viewer.inputs.pointerFallback;
-      }
-      const next = !(sectionGizmo.visible && sectionGizmo.interactive);
-      sectionGizmo.interactive = next;
-      sectionGizmo.visible = next;
-      if (next && first.current) {
-        sectionGizmo.clip = true;
-        sectionGizmo.fitBox(viewer.renderer.getBoundingBox());
-        first.current = false;
-      }
-    };
-    return {
-      clip: section.clip,
-      active: section.active,
-      set: setSection,
-      toggle,
-      hide: () => {
-        sectionGizmo.visible = false;
-        sectionGizmo.interactive = false;
-      },
-      reset: () => sectionGizmo.fitBox(viewer.renderer.getBoundingBox()),
-      shrinkToSelection: () => sectionGizmo.fitBox(viewer.selection.getBoundingBox()),
-      toggleClip: () => {
-        sectionGizmo.clip = !section.clip;
-      }
-    };
-  }
   function pointerToCursor(pointer) {
     switch (pointer) {
       case "orbit":
@@ -67569,13 +67829,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       const sub2 = this._viewer.inputs.onPointerOverrideChanged.subscribe(
         () => this._updateCursor()
       );
-      const sub3 = this._viewer.gizmos.section.onStateChanged.subscribe(() => {
-        if (!this._viewer.gizmos.section.visible) {
+      const sub3 = this._viewer.gizmos.sectionBox.onStateChanged.subscribe(() => {
+        if (!this._viewer.gizmos.sectionBox.visible) {
           this._boxHover = false;
           this._updateCursor();
         }
       });
-      const sub4 = this._viewer.gizmos.section.onHover.subscribe((hover) => {
+      const sub4 = this._viewer.gizmos.sectionBox.onHover.subscribe((hover) => {
         this._boxHover = hover;
         this._updateCursor();
       });
@@ -67638,59 +67898,77 @@ Averrage Date/Second ${avgDataRatePS} kb
       clear
     };
   }
-  const elementIds = {
-    // Sections
-    sectionCamera: "controlBar.sectionCamera",
-    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",
-    buttonCameraZoomToFit: "controlBar.camera.zoomToFit",
-    // Settings buttons
-    buttonProjectInspector: "controlBar.projectInspector",
-    buttonSettings: "controlBar.settings",
-    buttonHelp: "controlBar.help",
-    buttonMaximize: "controlBar.maximize",
-    // Tools buttons
-    buttonSectionBox: "controlBar.sectionBox",
-    buttonMeasure: "controlBar.measure",
-    buttonToggleIsolation: "controlBar.toggleIsolation",
-    // Measure buttons
-    buttonMeasureDelete: "controlBar.measure.delete",
-    buttonMeasureDone: "controlBar.measure.done",
-    // Section box buttons
-    buttonSectionBoxReset: "controlBar.sectionBox.reset",
-    buttonSectionBoxShrinkToSelection: "controlBar.sectionBox.shrinkToSelection",
-    buttonSectionBoxClip: "controlBar.sectionBox.clip",
-    buttonSectionBoxIgnore: "controlBar.sectionBox.ignore",
-    buttonSectionBoxDone: "controlBar.sectionBox.done"
-  };
-  function ControlBar(props) {
-    var _a2;
-    const pointer = getPointerState(props.viewer);
-    const fullScreen = getFullScreenState();
-    const section = getSectionBoxState(props.viewer);
-    const measure$1 = getMeasureState(props.viewer, props.cursor);
-    React2.useEffect(() => {
-      ReactTooltip.rebuild();
-    });
-    if (isFalse(props.settings.ui.controlBar)) {
-      return null;
-    }
-    const cameraSection = {
-      id: elementIds.sectionCamera,
-      enable: () => anyUiCursorButton(props.settings),
+  function controlBarSectionBox(section, hasSelection) {
+    return {
+      id: ids.sectionSectionBox,
+      style: section.enable.get() ? sectionNoPadStyle : sectionDefaultStyle,
+      //enable: () => section.getEnable(),
+      buttons: [
+        {
+          id: ids.buttonSectionBoxEnable,
+          tip: "Enable Section Box",
+          isOn: () => section.enable.get(),
+          style: (on) => buttonExpandStyle(on),
+          action: () => section.enable.set(!section.enable.get()),
+          icon: sectionBox
+        },
+        {
+          id: ids.buttonSectionBoxShrinkToSelection,
+          tip: "Fit Section",
+          enabled: () => section.enable.get(),
+          isOn: () => hasSelection,
+          style: (on) => buttonDisableStyle(on),
+          action: () => section.sectionSelection.call(),
+          icon: sectionBoxShrink
+        },
+        {
+          id: ids.buttonSectionBoxReset,
+          tip: "Reset Section",
+          enabled: () => section.enable.get(),
+          style: (on) => buttonDefaultStyle(on),
+          action: () => section.sectionReset.call(),
+          icon: sectionBoxReset
+        },
+        {
+          id: ids.buttonSectionBoxVisible,
+          tip: "Show Section Box",
+          enabled: () => section.enable.get(),
+          isOn: () => section.visible.get(),
+          style: (on) => buttonDefaultStyle(on),
+          action: () => section.visible.set(!section.visible.get()),
+          icon: visible
+        },
+        {
+          id: ids.buttonSectionBoxAuto,
+          tip: "Auto Section",
+          enabled: () => section.enable.get(),
+          isOn: () => section.auto.get(),
+          style: (on) => buttonDefaultStyle(on),
+          action: () => section.auto.set(!section.auto.get()),
+          icon: sectionBoxAuto
+        },
+        {
+          id: ids.buttonSectionBoxSettings,
+          tip: "Section Settings",
+          enabled: () => section.enable.get(),
+          isOn: () => section.showOffsetPanel.get(),
+          style: (on) => buttonDefaultStyle(on),
+          action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
+          icon: slidersHoriz
+        }
+      ]
+    };
+  }
+  function controlBarPointer(viewer, camera2, settings2, section) {
+    const pointer = getPointerState(viewer);
+    return {
+      id: ids.sectionInputs,
+      enable: () => anyUiCursorButton(settings2),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonCameraOrbit,
-          enabled: () => isTrue(props.settings.ui.orbit),
+          id: ids.buttonCameraOrbit,
+          enabled: () => isTrue(settings2.ui.orbit),
           tip: "Orbit",
           action: () => pointer.onButton("orbit"),
           icon: orbit,
@@ -67698,8 +67976,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraLook,
-          enabled: () => isTrue(props.settings.ui.lookAround),
+          id: ids.buttonCameraLook,
+          enabled: () => isTrue(settings2.ui.lookAround),
           tip: "Look Around",
           action: () => pointer.onButton("look"),
           icon: look,
@@ -67707,8 +67985,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraPan,
-          enabled: () => isTrue(props.settings.ui.pan),
+          id: ids.buttonCameraPan,
+          enabled: () => isTrue(settings2.ui.pan),
           tip: "Pan",
           action: () => pointer.onButton("pan"),
           icon: pan,
@@ -67716,8 +67994,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoom,
-          enabled: () => isTrue(props.settings.ui.zoom),
+          id: ids.buttonCameraZoom,
+          enabled: () => isTrue(settings2.ui.zoom),
           tip: "Zoom",
           action: () => pointer.onButton("zoom"),
           icon: zoom,
@@ -67725,60 +68003,88 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonCameraZoomWindow,
-          enabled: () => isTrue(props.settings.ui.zoomWindow),
+          id: ids.buttonCameraZoomWindow,
+          enabled: () => isTrue(settings2.ui.zoomWindow),
           tip: "Zoom Window",
           action: () => {
             pointer.onButton("rect");
-            section.hide();
           },
           icon: frameRect,
           isOn: () => pointer.mode === "rect",
           style: buttonDefaultStyle
-        },
+        }
+      ]
+    };
+  }
+  function controlBarActions(camera2, settings2, isolation, measure$1) {
+    return {
+      id: ids.sectionActions,
+      enable: () => true,
+      style: sectionDefaultStyle,
+      buttons: [
         {
-          id: elementIds.buttonCameraZoomToFit,
-          enabled: () => isTrue(props.settings.ui.zoomToFit),
+          id: ids.buttonZoomToFit,
+          enabled: () => isTrue(settings2.ui.zoomToFit),
           tip: "Zoom to Fit",
-          action: () => props.camera.frameContext(),
+          action: () => camera2.frameSelection.call(),
           icon: frameSelection,
           isOn: () => false,
           style: buttonDefaultStyle
+        },
+        {
+          id: ids.buttonToggleIsolation,
+          enabled: () => isTrue(settings2.ui.toggleIsolation),
+          tip: "Toggle Isolation",
+          action: () => isolation.toggle("controlBar"),
+          icon: toggleIsolation,
+          style: buttonDefaultStyle
+        },
+        {
+          id: ids.buttonMeasure,
+          enabled: () => isTrue(settings2.ui.measuringMode),
+          isOn: () => measure$1.active,
+          tip: "Measuring Mode",
+          action: () => measure$1.toggle(),
+          icon: measure,
+          style: buttonDefaultStyle
         }
       ]
     };
-    const settingsSection = {
-      id: elementIds.sectionSettings,
-      enable: () => anyUiSettingButton(props.settings),
+  }
+  function controlBarSettings(modal, side, settings$1) {
+    const fullScreen = getFullScreenState();
+    return {
+      id: ids.sectionSettings,
+      enable: () => anyUiSettingButton(settings$1),
       style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonProjectInspector,
-          enabled: () => isTrue(props.settings.ui.projectInspector) && (isTrue(props.settings.ui.bimTreePanel) || isTrue(props.settings.ui.bimInfoPanel)),
+          id: ids.buttonProjectInspector,
+          enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
           tip: "Project Inspector",
-          action: () => props.side.toggleContent("bim"),
+          action: () => side.toggleContent("bim"),
           icon: treeView,
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonSettings,
-          enabled: () => isTrue(props.settings.ui.settings),
+          id: ids.buttonSettings,
+          enabled: () => isTrue(settings$1.ui.settings),
           tip: "Settings",
-          action: () => props.side.toggleContent("settings"),
+          action: () => side.toggleContent("settings"),
           icon: settings,
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonHelp,
-          enabled: () => isTrue(props.settings.ui.help),
+          id: ids.buttonHelp,
+          enabled: () => isTrue(settings$1.ui.help),
           tip: "Help",
-          action: () => props.modal.help(true),
+          action: () => modal.help(true),
           icon: help,
           style: buttonDefaultStyle
         },
         {
-          id: elementIds.buttonMaximize,
-          enabled: () => isTrue(props.settings.ui.maximise) && props.settings.capacity.canGoFullScreen,
+          id: ids.buttonMaximize,
+          enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
           tip: fullScreen.get() ? "Minimize" : "Fullscreen",
           action: () => fullScreen.toggle(),
           icon: fullScreen.get() ? minimize : fullsScreen,
@@ -67786,112 +68092,42 @@ Averrage Date/Second ${avgDataRatePS} kb
         }
       ]
     };
-    const sectionBoxSection = {
-      id: elementIds.sectionSectionBox,
-      enable: () => !measure$1.active && section.active,
-      style: sectionBlueStyle,
-      buttons: [
-        {
-          id: elementIds.buttonSectionBoxReset,
-          tip: "Reset Section Box",
-          action: () => section.reset(),
-          icon: sectionBoxReset,
-          style: buttonBlueStyle
-        },
-        {
-          id: elementIds.buttonSectionBoxShrinkToSelection,
-          tip: "Shrink to Selection",
-          action: () => section.shrinkToSelection(),
-          icon: sectionBoxShrink,
-          style: buttonBlueStyle
-        },
-        {
-          id: elementIds.buttonSectionBoxClip,
-          tip: section.clip ? "Ignore Section Box" : "Clip Section Box",
-          action: () => section.toggleClip(),
-          icon: section.clip ? sectionBoxIgnore : sectionBoxClip,
-          style: buttonBlueStyle
-        },
-        {
-          id: elementIds.buttonSectionBoxDone,
-          tip: "Done",
-          action: () => section.toggle(),
-          icon: checkmark,
-          style: buttonBlueStyle
-        }
-      ]
-    };
-    const measureSection = {
-      id: elementIds.sectionMeasure,
-      enable: () => measure$1.active && !section.active,
-      style: sectionBlueStyle,
-      buttons: [
-        {
-          id: elementIds.buttonMeasureDelete,
-          tip: "Delete",
-          action: () => measure$1.clear(),
-          icon: trash,
-          style: buttonBlueStyle
-        },
-        {
-          id: elementIds.buttonMeasureDone,
-          tip: "Done",
-          action: () => measure$1.toggle(),
-          icon: checkmark,
-          style: buttonBlueStyle
-        }
-      ]
-    };
-    const toolSections = {
-      id: elementIds.sectionTools,
-      enable: () => anyUiToolButton(props.settings) && !measure$1.active && !section.active,
-      style: measure$1.active || section.active ? sectionBlueStyle : sectionDefaultStyle,
+  }
+  function controlBarCamera(camera2) {
+    return {
+      id: ids.sectionCamera,
+      enable: () => true,
+      style: sectionDefaultStyle,
       buttons: [
         {
-          id: elementIds.buttonSectionBox,
-          enabled: () => isTrue(props.settings.ui.sectioningMode),
-          tip: "Sectioning Mode",
-          action: () => section.toggle(),
-          icon: sectionBox,
-          style: buttonDefaultStyle
-        },
-        {
-          id: elementIds.buttonMeasure,
-          enabled: () => isTrue(props.settings.ui.measuringMode),
-          tip: "Measuring Mode",
-          action: () => measure$1.toggle(),
-          icon: measure,
-          style: buttonDefaultStyle
-        },
-        {
-          id: elementIds.buttonToggleIsolation,
-          enabled: () => isTrue(props.settings.ui.toggleIsolation),
-          tip: "Toggle Isolation",
-          action: () => props.isolation.toggle("controlBar"),
-          icon: toggleIsolation,
+          id: ids.buttonCameraAuto,
+          tip: "Auto Camera",
+          isOn: () => camera2.autoCamera.get(),
+          action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
+          icon: autoCamera,
           style: buttonDefaultStyle
         }
       ]
     };
-    let controlBar2 = [cameraSection, toolSections, measureSection, sectionBoxSection, settingsSection];
-    controlBar2 = ((_a2 = props.customization) == null ? void 0 : _a2.call(props, controlBar2)) ?? controlBar2;
-    return createBar(controlBar2);
   }
-  function createBar(sections) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
-      gap: "min(10px, 2%)",
-      bottom: "min(36px, 10%)"
-    }, className: "vim-control-bar vc-pointer-events-auto vc-flex-wrap vc-mx-2 vc-min-w-0 vc-absolute vc-left-0 vc-right-0 vc-z-20 vc-flex vc-items-center vc-justify-center transition-all", children: sections.map(createSection$1) });
+  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
+    ];
+    controlBarSections = (customization == null ? void 0 : customization(controlBarSections)) ?? controlBarSections;
+    return controlBarSections;
   }
-  const controlBar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    ControlBar,
-    buttonBlueStyle,
-    buttonDefaultStyle,
-    elementIds,
-    sectionBlueStyle,
-    sectionDefaultStyle
-  }, Symbol.toStringTag, { value: "Module" }));
   function RestOfScreen(props) {
     const [, setVersion] = React2.useState(0);
     const resizeObserver = React2.useRef();
@@ -71880,23 +72116,23 @@ Averrage Date/Second ${avgDataRatePS} kb
     const viewer = props.viewer;
     const camera2 = props.camera;
     const [section, setSection] = React2.useState({
-      visible: viewer.gizmos.section.visible,
-      clip: viewer.gizmos.section.clip
+      visible: viewer.gizmos.sectionBox.visible,
+      clip: viewer.gizmos.sectionBox.clip
     });
     const isClipping = () => {
-      return !viewer.gizmos.section.box.containsBox(viewer.renderer.getBoundingBox());
+      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.section.onStateChanged.subscribe(() => {
+      const subState = viewer.gizmos.sectionBox.onStateChanged.subscribe(() => {
         setSection({
-          visible: viewer.gizmos.section.visible,
-          clip: viewer.gizmos.section.clip
+          visible: viewer.gizmos.sectionBox.visible,
+          clip: viewer.gizmos.sectionBox.clip
         });
       });
-      const subConfirm = viewer.gizmos.section.onBoxConfirm.subscribe(
+      const subConfirm = viewer.gizmos.sectionBox.onBoxConfirm.subscribe(
         () => setClipping(isClipping())
       );
       props.isolation.onChanged.subscribe(() => setVersion((v) => v + 1));
@@ -71910,11 +72146,11 @@ Averrage Date/Second ${avgDataRatePS} kb
       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) => {
@@ -71948,10 +72184,10 @@ Averrage Date/Second ${avgDataRatePS} kb
       e.stopPropagation();
     };
     const onSectionToggleBtn = (e) => {
-      viewer.gizmos.section.clip = !viewer.gizmos.section.clip;
+      viewer.gizmos.sectionBox.clip = !viewer.gizmos.sectionBox.clip;
     };
     const onSectionResetBtn = (e) => {
-      viewer.gizmos.section.fitBox(viewer.renderer.getBoundingBox());
+      viewer.gizmos.sectionBox.fitBox(viewer.renderer.getBoundingBox());
       e.stopPropagation();
     };
     const onMeasureDeleteBtn = (e) => {
@@ -71960,7 +72196,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     const onFitSectionToSelectionBtn = (e) => {
       const box = viewer.selection.getBoundingBox();
       if (box) {
-        viewer.gizmos.section.fitBox(box);
+        viewer.gizmos.sectionBox.fitBox(box);
       }
     };
     const createButton2 = (button) => {
@@ -72246,7 +72482,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();
@@ -72289,7 +72525,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             },
             onPrimaryAction: (item, _) => {
               if (doubleClick.isDoubleClick(item.index)) {
-                props.camera.frameSelection();
+                props.camera.frameSelection.call();
               }
             },
             onFocusItem: (item) => {
@@ -74580,7 +74816,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: {
@@ -74774,7 +75010,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.
@@ -74789,7 +75025,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();
     }
     /**
@@ -74889,75 +75125,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.section.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) {
@@ -75567,6 +75734,345 @@ Averrage Date/Second ${avgDataRatePS} kb
       component.classList.remove("behind");
     }
   }
+  function SectionBoxPanel(props) {
+    const [panelPosition, setPanelPosition] = React2.useState({
+      top: 0,
+      left: 0
+    });
+    const panelRef = React2.useRef(null);
+    React2.useLayoutEffect(() => {
+      const updatePosition = () => {
+        const { top, left } = computePosition(panelRef);
+        setPanelPosition({ top, left });
+      };
+      updatePosition();
+      let resizeObserver = null;
+      if (panelRef.current) {
+        resizeObserver = new ResizeObserver(updatePosition);
+        resizeObserver.observe(panelRef.current.parentElement);
+      }
+      return () => {
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      };
+    }, [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(
+        "input",
+        {
+          id: id2,
+          type: "text",
+          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: () => field.confirm()
+        }
+      ) })
+    ] });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "vc-fixed vc-inset-0 vc-flex vc-pointer-events-none",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            ref: panelRef,
+            style: { position: "absolute", top: panelPosition.top, left: panelPosition.left, width: "min(200px, 60%)" },
+            className: "vim-sectionbox-offsets vc-pointer-events-auto vc-bg-white vc-relative",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-sectionbox-header vc-px-2 vc-bg-gray-light vc-flex vc-items-center vc-justify-between ", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "vc-flex vim-sectionbox-offsets-title vc-title vc-block", children: "Section Box Offsets" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    className: "vc-flex vc-border-none vc-bg-transparent vc-text-sm vc-cursor-pointer",
+                    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", props.state.topOffset),
+                renderField("sideOffseet", "Side Offset", props.state.sideOffset),
+                renderField("bottomOffset", "Bottom Offset", props.state.bottomOffset)
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+  function computePosition(panelRef) {
+    const origin = document.getElementById("vim-control-bar");
+    if (origin && panelRef.current) {
+      const originRect = origin.getBoundingClientRect();
+      const panelRect = panelRef.current.getBoundingClientRect();
+      let left = originRect.left + originRect.width / 2 - panelRect.width / 2;
+      let top = originRect.top - 10 - panelRect.height;
+      if (top < 10) {
+        top = originRect.bottom + 10;
+      }
+      if (left < 10) {
+        left = 10;
+      }
+      if (left + panelRect.width > window.innerWidth - 10) {
+        left = window.innerWidth - panelRect.width - 10;
+      }
+      return { top, left };
+    }
+    return { top: 0, left: 0 };
+  }
+  function addBox(b1, b2) {
+    const r = b1.clone();
+    r.min.x += b2.min.x;
+    r.min.y += b2.min.y;
+    r.min.z += b2.min.z;
+    r.max.x += b2.max.x;
+    r.max.y += b2.max.y;
+    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 = 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());
+    enable.useOnChange((v) => {
+      visible2.set(v);
+      showOffsetPanel.set(false);
+      if (v && auto.get()) {
+        sectionSelection.call();
+      } else {
+        sectionReset.call();
+      }
+    });
+    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));
+    React2.useEffect(() => {
+      adapter.setVisible(false);
+      return adapter.onSelectionChanged.sub(() => {
+        if (auto.get() && enable.get()) sectionSelection.call();
+      });
+    }, []);
+    const section = useArgActionRef((baseBox) => {
+      boxRef.current = baseBox;
+      const newBox = addBox(baseBox, offsetsToBox3(topOffset.get(), sideOffset.get(), bottomOffset.get()));
+      adapter.fitBox(newBox);
+    });
+    const sectionSelection = useFuncRef(async () => {
+      try {
+        const box = await adapter.getSelectionBox() ?? await adapter.getRendererBox();
+        section.call(box);
+      } catch (e) {
+        console.error(e);
+      }
+    });
+    const sectionReset = useFuncRef(async () => {
+      const box = await adapter.getRendererBox();
+      section.call(box);
+    });
+    return {
+      enable,
+      visible: visible2,
+      auto,
+      showOffsetPanel,
+      topOffset,
+      sideOffset,
+      bottomOffset,
+      sectionSelection,
+      sectionReset,
+      section
+    };
+  }
+  const sanitize = (value, strict) => {
+    if (!strict) {
+      if (value === "" || value === "-") return value;
+    }
+    const num = parseFloat(value);
+    if (isNaN(num)) {
+      return strict ? "1" : void 0;
+    }
+    return String(num);
+  };
+  function offsetsToBox3(top, side, bottom) {
+    const getNumber = (s) => {
+      const num = parseFloat(s);
+      return isNaN(num) ? 0 : num;
+    };
+    return new Box3(
+      new Vector3(-getNumber(side), -getNumber(side), -getNumber(bottom)),
+      new Vector3(getNumber(side), getNumber(side), getNumber(top))
+    );
+  }
+  function useWebglSectionBox(viewer) {
+    const vimAdapter = {
+      setVisible: (b) => {
+        viewer.gizmos.sectionBox.visible = b;
+        viewer.gizmos.sectionBox.interactive = b;
+      },
+      getBox: () => viewer.gizmos.sectionBox.box.clone(),
+      fitBox: (box) => viewer.gizmos.sectionBox.fitBox(box),
+      getSelectionBox: () => Promise.resolve(viewer.selection.getBoundingBox()),
+      getRendererBox: () => Promise.resolve(viewer.renderer.getBoundingBox()),
+      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 () => {
+      console.log("frameSelection");
+      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();
@@ -75598,7 +76104,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));
@@ -75608,11 +76114,13 @@ Averrage Date/Second ${avgDataRatePS} kb
       Math.min(props.container.root.clientWidth * 0.25, 340)
     );
     const [contextMenu2, setcontextMenu] = React2.useState();
-    const [controlBar2, setControlBar] = React2.useState();
+    const [controlBarCustom, setControlBarCustom] = React2.useState();
     const bimInfoRef = useBimInfo();
     const viewerState = useViewerState(props.viewer);
     const treeRef = React2.useRef();
     const performanceRef = React2.useRef(null);
+    const sectionBox2 = useWebglSectionBox(props.viewer);
+    const controlBar2 = useControlBar(props.viewer, camera2, modal, side, isolation, cursor, settings2.value, sectionBox2, controlBarCustom);
     React2.useEffect(() => {
       var _a3;
       side.setHasBim(((_a3 = viewerState.vim) == null ? void 0 : _a3.bim) !== void 0);
@@ -75637,11 +76145,14 @@ Averrage Date/Second ${avgDataRatePS} kb
         isolation,
         camera: camera2,
         settings: settings2,
+        get sectionBox() {
+          return sectionBox2;
+        },
         contextMenu: {
           customize: (v) => setcontextMenu(() => v)
         },
         controlBar: {
-          customize: (v) => setControlBar(() => v)
+          customize: (v) => setControlBarCustom(() => v)
         },
         modal,
         bimInfo: bimInfoRef,
@@ -75695,16 +76206,11 @@ Averrage Date/Second ${avgDataRatePS} kb
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
-              viewer: props.viewer,
-              camera: camera2,
-              modal,
-              side,
-              isolation,
-              cursor,
-              settings: settings2.value,
-              customization: controlBar2
+              content: controlBar2,
+              show: isTrue(settings2.value.ui.controlBar)
             }
           ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             AxesPanelMemo,
             {
@@ -76030,12 +76536,65 @@ Averrage Date/Second ${avgDataRatePS} kb
         return serverConnectionError(source.url);
     }
   }
+  function updateModal(modal, state) {
+    if (state.status === "connected") {
+      modal.loading(void 0);
+      modal.message(void 0);
+    }
+    if (state.status === "connecting") {
+      if (modal.current === void 0 || modal.current.type === "loading") {
+        modal.loading({ message: "Connecting to VIM Ultra server..." });
+      }
+    }
+    if (state.status === "error") {
+      console.log("Error loading vim", state);
+      modal.message(getErrorMessage(state));
+    }
+  }
+  async function updateProgress(request2, modal) {
+    for await (const progress of request2.getProgress()) {
+      if (request2.isCompleted) break;
+      modal.loading({ message: "Loading File in VIM Ultra mode", progress });
+    }
+  }
+  function useUltraSectionBox(viewer) {
+    const ultraAdapter = {
+      setVisible: (b) => {
+        console.log("SetVisible!", b);
+        viewer.sectionBox.visible = b;
+        viewer.sectionBox.interactive = b;
+      },
+      getBox: () => viewer.sectionBox.getBox().clone(),
+      fitBox: (box) => viewer.sectionBox.fitBox(box),
+      getSelectionBox: () => viewer.selection.getBoundingBox(),
+      getRendererBox: () => viewer.renderer.getBoundingBox(),
+      onSelectionChanged: viewer.selection.onValueChanged
+    };
+    return useSectionBox(ultraAdapter);
+  }
+  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();
     const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
     const viewer = Viewer.createWithCanvas(cmpContainer.gfx);
     const reactRoot = clientExports.createRoot(cmpContainer.ui);
-    const patchRef = (cmp) => {
+    const attachDispose = (cmp) => {
       cmp.dispose = () => {
         viewer.dispose();
         cmpContainer.dispose();
@@ -76049,7 +76608,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           container: cmpContainer,
           viewer,
-          onMount: (cmp) => promise2.resolve(patchRef(cmp))
+          onMount: (cmp) => promise2.resolve(attachDispose(cmp))
         }
       )
     );
@@ -76057,32 +76616,60 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function UltraComponent(props) {
     const modal = useModal(true);
+    const sectionBox2 = useUltraSectionBox(props.viewer);
+    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.onMount(ToRef(props.viewer, modal));
+      props.viewer.selection.onValueChanged.subscribe(() => {
+        setSelectState((i2) => (i2 + 1) % 2);
+      });
+      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(Overlay, { canvas: props.viewer.viewport.canvas }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { state: modal })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          whenTrue(true, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { canvas: props.viewer.viewport.canvas }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ControlBar,
+            {
+              content: controlBarCustom(controlBar2),
+              show: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel, { state: sectionBox2 })
+        ] });
+      } }),
+      /* @__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 updateModal(modal, state) {
-    if (state.status === "connected") {
-      modal.loading(void 0);
-      modal.message(void 0);
-    }
-    if (state.status === "connecting") {
-      if (modal.current === void 0 || modal.current.type === "loading") {
-        modal.loading({ message: "Connecting to VIM Ultra server..." });
-      }
-    }
-    if (state.status === "error") {
-      console.log("Error loading vim", state);
-      modal.message(getErrorMessage(state));
-    }
-  }
-  function ToRef(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(
@@ -76097,23 +76684,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         }
       );
       return request2;
-    }
-    return {
-      viewer,
-      modal,
-      dispose: () => {
-      },
-      load
     };
   }
-  async function updateProgress(request2, modal) {
-    for await (const progress of request2.getProgress()) {
-      if (request2.isCompleted) break;
-      modal.loading({ message: "Loading File in VIM Ultra mode", progress });
-    }
-  }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
+    ControlBar: controlBar,
     UltraComponent,
     createUltraComponent
   }, Symbol.toStringTag, { value: "Module" }));