vim-web 0.5.0-dev.9 → 0.5.1

package/dist/vim-web.iife.js

@@ -46785,6 +46785,11 @@ void main() {
     * @param {boolean} isLegacy - Indicates whether the Vim object uses a legacy loading pipeline.
     */
     constructor(header, document2, g3d2, scene, settings2, map, builder, source, format) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "webgl");
       /**
        * Indicates whether the vim was opened from a vim or vimx file.
        */
@@ -48862,19 +48867,38 @@ void main() {
       return new InsertableSubmesh(this, index2);
     }
     /**
-     * Overrides mesh material, set to undefine to restore initial material.
-     */
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
   }
   class InstancedSubmesh {
     constructor(mesh, index2) {
@@ -48961,17 +48985,39 @@ void main() {
       }
       return submeshes;
     }
+    /**
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
     computeBoundingBoxes() {
       this.mesh.geometry.computeBoundingBox();
       const boxes = new Array(this.mesh.count);
@@ -50111,6 +50157,9 @@ void main() {
     get index() {
       return this._submesh.index;
     }
+    get isRoom() {
+      return false;
+    }
     /**
      * Updates the underlying submesh and rebinds all attributes to the new mesh.
      * @param mesh - The new submesh to bind to this marker.
@@ -52597,7 +52646,11 @@ void main() {
      * @param handler Callback invoked on key up.
      */
     registerKeyUp(code, mode, handler) {
-      this.registerKey(this.keyUpHandlers, code, mode, handler);
+      if (Array.isArray(code)) {
+        code.forEach((c) => this.registerKey(this.keyUpHandlers, c, mode, handler));
+      } else {
+        this.registerKey(this.keyUpHandlers, code, mode, handler);
+      }
     }
     registerKey(map, code, mode, callback) {
       mode = map.has(code) ? mode : "replace";
@@ -52635,6 +52688,7 @@ void main() {
       __publicField(this, "_capture");
       __publicField(this, "_dragHandler");
       __publicField(this, "_doubleClickHandler", new DoubleClickHandler());
+      __publicField(this, "_clickHandler", new ClickHandler());
       __publicField(this, "onButtonDown");
       __publicField(this, "onButtonUp");
       __publicField(this, "onMouseMove");
@@ -52643,6 +52697,7 @@ void main() {
       __publicField(this, "onClick");
       __publicField(this, "onDoubleClick");
       __publicField(this, "onWheel");
+      __publicField(this, "onContextMenu");
       this._capture = new CaptureHandler(canvas);
       this._dragHandler = new DragHandler((delta, button) => this.onDrag(delta, button));
     }
@@ -52670,22 +52725,28 @@ void main() {
       (_a3 = this.onButtonDown) == null ? void 0 : _a3.call(this, pos, event.button);
       this._lastMouseDownPosition = pos;
       this._dragHandler.onPointerDown(pos, event.button);
+      this._clickHandler.onPointerDown(pos);
       this._capture.onPointerDown(event);
       event.preventDefault();
     }
     handlePointerUp(event) {
       var _a3;
       if (event.pointerType !== "mouse") return;
+      event.preventDefault();
       const pos = this.relativePosition(event);
       (_a3 = this.onButtonUp) == null ? void 0 : _a3.call(this, pos, event.button);
       this._capture.onPointerUp(event);
       this._dragHandler.onPointerUp();
-      if (this._doubleClickHandler.checkForDoubleClick(event)) {
+      this._clickHandler.onPointerUp();
+      if (this._doubleClickHandler.isDoubleClick(event)) {
         this.handleDoubleClick(event);
-      } else {
+        return;
+      }
+      if (this._clickHandler.isClick(event)) {
         this.handleMouseClick(event);
+        return;
       }
-      event.preventDefault();
+      this.handleContextMenu(event);
     }
     async handleMouseClick(event) {
       var _a3;
@@ -52698,12 +52759,23 @@ void main() {
       const modif = event.getModifierState("Shift") || event.getModifierState("Control");
       (_a3 = this.onClick) == null ? void 0 : _a3.call(this, pos, modif);
     }
+    async handleContextMenu(event) {
+      var _a3;
+      if (event.pointerType !== "mouse") return;
+      if (event.button !== 2) return;
+      const pos = this.relativePosition(event);
+      if (!almostEqual(this._lastMouseDownPosition, pos, 0.01)) {
+        return;
+      }
+      (_a3 = this.onContextMenu) == null ? void 0 : _a3.call(this, new Vector2(event.clientX, event.clientY));
+    }
     handlePointerMove(event) {
       var _a3;
       if (event.pointerType !== "mouse") return;
       this._canvas.focus();
       const pos = this.relativePosition(event);
       this._dragHandler.onPointerMove(pos);
+      this._clickHandler.onPointerMove(pos);
       (_a3 = this.onMouseMove) == null ? void 0 : _a3.call(this, pos);
     }
     async handleDoubleClick(event) {
@@ -52747,17 +52819,46 @@ void main() {
       }
     }
   }
+  class ClickHandler {
+    constructor() {
+      __publicField(this, "_moved", false);
+      __publicField(this, "_startPosition", new Vector2());
+      __publicField(this, "_clickThreshold", 3e-3);
+    }
+    onPointerDown(pos) {
+      this._moved = false;
+      this._startPosition.copy(pos);
+    }
+    onPointerMove(pos) {
+      if (pos.distanceTo(this._startPosition) > this._clickThreshold) {
+        this._moved = true;
+      }
+    }
+    onPointerUp() {
+    }
+    isClick(event) {
+      if (event.button !== 0) return false;
+      return !this._moved;
+    }
+  }
   class DoubleClickHandler {
     constructor() {
       __publicField(this, "_lastClickTime", 0);
       __publicField(this, "_clickDelay", 300);
+      // Max time between clicks for double-click
+      __publicField(this, "_lastClickPosition", null);
+      __publicField(this, "_positionThreshold", 5);
     }
-    // Delay in milliseconds to consider a double click
-    checkForDoubleClick(event) {
+    // Max pixel distance between clicks
+    isDoubleClick(event) {
       const currentTime = Date.now();
+      const currentPosition = new Vector2(event.clientX, event.clientY);
       const timeDiff = currentTime - this._lastClickTime;
+      const isClose = this._lastClickPosition !== null && this._lastClickPosition.distanceTo(currentPosition) < this._positionThreshold;
+      const isWithinTime = timeDiff < this._clickDelay;
       this._lastClickTime = currentTime;
-      return timeDiff < this._clickDelay;
+      this._lastClickPosition = currentPosition;
+      return isClose && isWithinTime;
     }
   }
   class DragHandler {
@@ -52997,23 +53098,15 @@ void main() {
       this._moveSpeed = settings2.moveSpeed ?? 1;
       this.rotateSpeed = settings2.rotateSpeed ?? 1;
       this.orbitSpeed = settings2.orbitSpeed ?? 1;
-      this.reg(document, "contextmenu", (e) => {
-        this._onContextMenu.dispatch(new Vector2(e.clientX, e.clientY));
-        e.preventDefault();
-      });
       this.keyboard = new KeyboardHandler(canvas);
       this.mouse = new MouseHandler(canvas);
       this.touch = new TouchHandler(canvas);
       this.keyboard.onKeyDown = (key) => adapter.keyDown(key);
       this.keyboard.onKeyUp = (key) => adapter.keyUp(key);
       this.keyboard.registerKeyUp("KeyP", "replace", () => adapter.toggleOrthographic());
-      this.keyboard.registerKeyUp("Equal", "replace", () => this.moveSpeed++);
-      this.keyboard.registerKeyUp("Minus", "replace", () => this.moveSpeed--);
-      this.keyboard.registerKeyUp("Space", "replace", () => {
-        this._pointerActive = this._pointerActive === "orbit" ? "look" : "orbit";
-        this._pointerFallback = this._pointerActive;
-        this._onPointerModeChanged.dispatch();
-      });
+      this.keyboard.registerKeyUp(["Equal", "NumpadAdd"], "replace", () => this.moveSpeed++);
+      this.keyboard.registerKeyUp(["Minus", "NumpadSubtract"], "replace", () => this.moveSpeed--);
+      this.keyboard.registerKeyUp("Space", "replace", () => adapter.toggleCameraOrbitMode());
       this.keyboard.registerKeyUp("Home", "replace", () => adapter.resetCamera());
       this.keyboard.registerKeyUp("Escape", "replace", () => adapter.clearSelection());
       this.keyboard.registerKeyUp("KeyF", "replace", () => {
@@ -53023,18 +53116,28 @@ void main() {
         const mul = Math.pow(1.25, this._moveSpeed);
         adapter.moveCamera(value.multiplyScalar(mul));
       };
+      this.mouse.onContextMenu = (pos) => this._onContextMenu.dispatch(pos);
       this.mouse.onButtonDown = adapter.mouseDown;
       this.mouse.onMouseMove = adapter.mouseMove;
-      this.mouse.onButtonUp = adapter.mouseUp;
+      this.mouse.onButtonUp = (pos, button) => {
+        this.pointerOverride = void 0;
+        adapter.mouseUp(pos, button);
+      };
       this.mouse.onDrag = (delta, button) => {
         if (button === 0) {
-          if (this._pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
-          if (this._pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
-          if (this._pointerActive === "pan") adapter.panCamera(delta);
-          if (this._pointerActive === "zoom") adapter.dollyCamera(delta);
+          if (this.pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
+          if (this.pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
+          if (this.pointerActive === "pan") adapter.panCamera(delta);
+          if (this.pointerActive === "zoom") adapter.dollyCamera(delta);
+        }
+        if (button === 2) {
+          this.pointerOverride = "look";
+          adapter.rotateCamera(toRotation(delta, 1));
+        }
+        if (button === 1) {
+          this.pointerOverride = "pan";
+          adapter.panCamera(delta);
         }
-        if (button === 2) adapter.rotateCamera(toRotation(delta, 1));
-        if (button === 1) adapter.panCamera(delta);
       };
       this.mouse.onClick = (pos, modif) => adapter.selectAtPointer(pos, modif);
       this.mouse.onDoubleClick = adapter.frameAtPointer;
@@ -55332,7 +55435,7 @@ void main() {
     }
     unparent2dObjects(target) {
       if (target instanceof Group) {
-        for (const child of target.children) {
+        for (const child of [...target.children]) {
           if (child instanceof CSS2DObject) {
             target.remove(child);
           }
@@ -55507,6 +55610,7 @@ void main() {
     }
     add(objectOrObjects) {
       if (!this.enabled) return;
+      if (!objectOrObjects) return;
       const objects = this.toArray(objectOrObjects);
       let changed = false;
       for (const obj of objects) {
@@ -55857,7 +55961,7 @@ void main() {
     /**
      * Resizes the canvas and updates the camera to match new parent dimensions.
      */
-    ResizeToParent() {
+    resizeToParent() {
       this._onResize.dispatch();
     }
     /**
@@ -55911,6 +56015,9 @@ void main() {
       toggleOrthographic: () => {
         viewer.camera.orthographic = !viewer.camera.orthographic;
       },
+      toggleCameraOrbitMode: () => {
+        viewer.inputs.pointerActive = viewer.inputs.pointerActive === PointerMode$1.ORBIT ? PointerMode$1.LOOK : PointerMode$1.ORBIT;
+      },
       resetCamera: () => {
         viewer.camera.lerp(0.75).reset();
       },
@@ -55935,7 +56042,7 @@ void main() {
       },
       frameAtPointer: async (pos) => {
         const result = await viewer.raycaster.raycastFromScreen(pos);
-        viewer.camera.lerp(0.75).frame(result.object);
+        viewer.camera.lerp(0.75).frame(result.object ?? "all");
       },
       zoom: (value) => {
         viewer.camera.lerp(0.75).zoom(value);
@@ -56946,6 +57053,10 @@ void main() {
        * Indicates whether the scene should be re-rendered on change only.
        */
       __publicField(this, "onDemand");
+      /**
+       * The material that will be used when setting model material to undefined.
+       */
+      __publicField(this, "defaultModelMaterial");
       __publicField(this, "fitViewport", () => {
         const size = this._viewport.getParentSize();
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -57017,11 +57128,14 @@ void main() {
       this._scene.threeScene.background = color;
       this.needsUpdate = true;
     }
+    /**
+     * Sets the material used to render models. If set to undefined, the default model or mesh material is used.
+     */
     get modelMaterial() {
       return this._scene.modelMaterial;
     }
     set modelMaterial(material) {
-      this._scene.modelMaterial = material;
+      this._scene.modelMaterial = material ?? this.defaultModelMaterial;
     }
     /**
      * Signal dispatched at the end of each frame if the scene was updated, such as visibility changes.
@@ -57157,6 +57271,11 @@ void main() {
   };
   let Viewer$3 = class Viewer {
     constructor(settings2) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "webgl");
       /**
        * The settings configuration used by the viewer.
        */
@@ -58834,6 +58953,7 @@ void main() {
     }
   }
   const CODE_TO_KEYCODE = {
+    "Space": 32,
     "ArrowUp": 38,
     "ArrowDown": 40,
     "ArrowLeft": 37,
@@ -58854,7 +58974,6 @@ void main() {
   function createAdapter$1(viewer) {
     return {
       init: () => {
-        viewer.rpc.RPCSetCameraSpeed(10);
       },
       orbitCamera: (value) => {
       },
@@ -58867,6 +58986,9 @@ void main() {
       toggleOrthographic: () => {
         console.log("toggleOrthographic. Not supported yet");
       },
+      toggleCameraOrbitMode: () => {
+        viewer.rpc.RPCKeyEvent(CODE_TO_KEYCODE["Space"], true);
+      },
       resetCamera: () => {
         viewer.camera.restoreSavedPosition();
       },
@@ -60835,6 +60957,12 @@ Averrage Date/Second ${avgDataRatePS} kb
         this._rpc.RPCSetCameraAspectRatio(this.canvas.offsetWidth, this.canvas.offsetHeight);
       }
     }
+    /**
+     * Resizes the viewport to match its parent's dimensions
+     */
+    resizeToParent() {
+      this.update();
+    }
     /**
      * Cleans up resources by removing resize observer and clearing timeouts
      */
@@ -60893,11 +61021,12 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @returns A promise resolving to the element's bounding box.
      */
     async getBoundingBox() {
-      return this.vim.getBoundingBoxNodes([this.element]);
+      return this.vim.getBoundingBoxForElements([this.element]);
     }
   }
   class Vim {
     constructor(rpc, color, renderer, source, logger) {
+      __publicField(this, "type", "ultra");
       __publicField(this, "source");
       __publicField(this, "_handle", -1);
       __publicField(this, "_request");
@@ -60911,6 +61040,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       // Color tracking remains unchanged.
       __publicField(this, "_elementColors", /* @__PURE__ */ new Map());
       __publicField(this, "_updatedColors", /* @__PURE__ */ new Set());
+      __publicField(this, "_removedColors", /* @__PURE__ */ new Set());
       // Delayed update flag.
       __publicField(this, "_updateScheduled", false);
       __publicField(this, "_elementCount", 0);
@@ -61048,14 +61178,14 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return handle;
     }
-    async getBoundingBoxNodes(nodes) {
-      if (!this.connected || nodes !== "all" && nodes.length === 0) {
+    async getBoundingBoxForElements(elements) {
+      if (!this.connected || elements !== "all" && elements.length === 0) {
         return Promise.resolve(void 0);
       }
-      if (nodes === "all") {
+      if (elements === "all") {
         return await this._rpc.RPCGetAABBForVim(this._handle);
       }
-      return await this._rpc.RPCGetAABBForElements(this._handle, nodes);
+      return await this._rpc.RPCGetAABBForElements(this._handle, elements);
     }
     async getBoundingBox() {
       if (!this.connected) {
@@ -61076,16 +61206,18 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       this.applyColor(elements, color);
     }
-    applyColor(elements, color) {
-      for (let i2 = 0; i2 < color.length; i2++) {
-        const c = color[i2];
+    applyColor(elements, colors) {
+      for (let i2 = 0; i2 < colors.length; i2++) {
+        const color = colors[i2];
         const element = elements[i2];
-        if (c === void 0) {
+        const existingColor = this._elementColors.get(element);
+        if (color === void 0 && existingColor !== void 0) {
           this._elementColors.delete(element);
-        } else {
-          this._elementColors.set(element, c);
+          this._removedColors.add(element);
+        } else if (color !== existingColor) {
+          this._elementColors.set(element, color);
+          this._updatedColors.add(element);
         }
-        this._updatedColors.add(element);
       }
       this.scheduleColorUpdate();
     }
@@ -61105,6 +61237,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
     reapplyColors() {
       this._updatedColors.clear();
+      this._removedColors.clear();
       this._elementColors.forEach((c, n) => this._updatedColors.add(n));
       this.scheduleColorUpdate();
     }
@@ -61121,12 +61254,15 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._renderer.notifySceneUpdated();
     }
     async updateRemoteColors() {
-      const elements = Array.from(this._updatedColors);
-      const colors = elements.map((n) => this._elementColors.get(n));
+      const updatedElement = Array.from(this._updatedColors);
+      const removedElement = Array.from(this._removedColors);
+      const colors = updatedElement.map((n) => this._elementColors.get(n));
       const remoteColors = await this._colors.getColors(colors);
       const colorIds = remoteColors.map((c) => (c == null ? void 0 : c.id) ?? -1);
-      this._rpc.RPCSetMaterialOverridesForElements(this._handle, elements, colorIds);
+      this._rpc.RPCClearMaterialOverridesForElements(this._handle, removedElement);
+      this._rpc.RPCSetMaterialOverridesForElements(this._handle, updatedElement, colorIds);
       this._updatedColors.clear();
+      this._removedColors.clear();
     }
   }
   function wait(ms) {
@@ -61203,6 +61339,11 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param logger - Optional logger for logging messages.
      */
     constructor(canvas, logger) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "ultra");
       __publicField(this, "_decoder");
       __publicField(this, "_socketClient");
       __publicField(this, "_input");
@@ -61463,80 +61604,72 @@ Averrage Date/Second ${avgDataRatePS} kb
     Ultra: index$7,
     Webgl: index$8
   }, Symbol.toStringTag, { value: "Module" }));
-  const sectionSelection = "controlBar.sectionSelection";
-  const sectionCamera = "controlBar.sectionCamera";
-  const sectionInputs = "controlBar.sectionInputs";
-  const sectionActions = "controlBar.sectionActions";
-  const sectionTools = "controlBar.sectionTools";
-  const sectionSettings = "controlBar.sectionSettings";
-  const sectionMeasure = "controlBar.sectionMeasure";
-  const sectionSectionBox = "controlBar.sectionSectionBox";
-  const buttonCameraFrameSelection = "controlBar.camera.frameSelection";
-  const buttonCameraFrameScene = "controlBar.camera.frameScene";
-  const buttonCameraAuto = "controlBar.camera.auto";
-  const buttonCameraOrbit = "controlBar.camera.orbit";
-  const buttonCameraLook = "controlBarcamera.look";
-  const buttonCameraPan = "controlBar.camera.pan";
-  const buttonCameraZoom = "controlBar.camera.zoom";
-  const buttonCameraZoomWindow = "controlBar.camera.zoomWindow";
-  const buttonProjectInspector = "controlBar.projectInspector";
-  const buttonSettings = "controlBar.settings";
-  const buttonHelp = "controlBar.help";
-  const buttonMaximize = "controlBar.maximize";
-  const buttonClearSelection = "controlBar.action.clearSelection";
-  const buttonShowAll = "controlBar.selection.showAll";
-  const buttonIsolateSelection = "controlBar.selection.isolate";
-  const buttonHideSelection = "controlBar.selection.hide";
-  const buttonShowSelection = "controlBar.selection.show";
-  const buttonAutoIsolate = "controlBar.selection.autoIsolate";
-  const buttonIsolationSettings = "controlBar.selection.isolationSettings";
-  const buttonRenderSettings = "controlBar.action.renderSettings";
-  const buttonSectionBox = "controlBar.sectionBox";
-  const buttonMeasure = "controlBar.measure";
-  const buttonSectionBoxEnable = "controlBar.sectionBox.enable";
-  const buttonSectionBoxVisible = "controlBar.sectionBox.visible";
-  const buttonSectionBoxToSelection = "controlBar.sectionBox.sectionSelection";
-  const buttonSectionBoxToScene = "controlBar.sectionBox.sectionScene";
-  const buttonSectionBoxAuto = "controlBar.sectionBox.auto";
-  const buttonSectionBoxSettings = "controlBar.sectionBox.settings";
+  const cameraSpan = "controlBar.cameraSpan";
+  const cameraFrameSelection = "controlBar.cameraFrameSelection";
+  const cameraFrameScene = "controlBar.cameraFrameScene";
+  const cameraAuto = "controlBar.cameraAuto";
+  const cursorSpan = "controlBar.cursorSpan";
+  const cursorOrbit = "controlBar.cursorOrbit";
+  const cursorLook = "controlBar.cursorLook";
+  const cursorPan = "controlBar.cursorPan";
+  const cursorZoom = "controlBar.cursorZoom";
+  const cursorZoomWindow = "controlBar.cursorZoomWindow";
+  const visibilitySpan = "controlBar.visibilitySpan";
+  const visibilityClearSelection = "controlBar.visibilityClearSelection";
+  const visibilityShowAll = "controlBar.visibilityShowAll";
+  const visibilityIsolateSelection = "controlBar.visibilityIsolateSelection";
+  const visibilityHideSelection = "controlBar.visibilityHideSelection";
+  const visibilityShowSelection = "controlBar.visibilityShowSelection";
+  const visibilityAutoIsolate = "controlBar.visibilityAutoIsolate";
+  const visibilitySettings = "controlBar.visibilitySettings";
+  const sectioningSpan = "controlBar.sectioningSpan";
+  const sectioningEnable = "controlBar.sectioningEnable";
+  const sectioningVisible = "controlBar.sectioningVisible";
+  const sectioningFitSelection = "controlBar.sectioningFitSelection";
+  const sectioningFitScene = "controlBar.sectioningFitScene";
+  const sectioningAuto = "controlBar.sectioningAuto";
+  const sectioningSettings = "controlBar.sectioningSettings";
+  const measureSpan = "controlBar.measureSpan";
+  const measureEnable = "controlBar.measureEnable";
+  const miscSpan = "controlBar.miscSpan";
+  const miscInspector = "controlBar.miscInspector";
+  const miscSettings = "controlBar.miscSettings";
+  const miscHelp = "controlBar.miscHelp";
+  const miscMaximize = "controlBar.miscMaximize";
   const controlBarIds = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    buttonAutoIsolate,
-    buttonCameraAuto,
-    buttonCameraFrameScene,
-    buttonCameraFrameSelection,
-    buttonCameraLook,
-    buttonCameraOrbit,
-    buttonCameraPan,
-    buttonCameraZoom,
-    buttonCameraZoomWindow,
-    buttonClearSelection,
-    buttonHelp,
-    buttonHideSelection,
-    buttonIsolateSelection,
-    buttonIsolationSettings,
-    buttonMaximize,
-    buttonMeasure,
-    buttonProjectInspector,
-    buttonRenderSettings,
-    buttonSectionBox,
-    buttonSectionBoxAuto,
-    buttonSectionBoxEnable,
-    buttonSectionBoxSettings,
-    buttonSectionBoxToScene,
-    buttonSectionBoxToSelection,
-    buttonSectionBoxVisible,
-    buttonSettings,
-    buttonShowAll,
-    buttonShowSelection,
-    sectionActions,
-    sectionCamera,
-    sectionInputs,
-    sectionMeasure,
-    sectionSectionBox,
-    sectionSelection,
-    sectionSettings,
-    sectionTools
+    cameraAuto,
+    cameraFrameScene,
+    cameraFrameSelection,
+    cameraSpan,
+    cursorLook,
+    cursorOrbit,
+    cursorPan,
+    cursorSpan,
+    cursorZoom,
+    cursorZoomWindow,
+    measureEnable,
+    measureSpan,
+    miscHelp,
+    miscInspector,
+    miscMaximize,
+    miscSettings,
+    miscSpan,
+    sectioningAuto,
+    sectioningEnable,
+    sectioningFitScene,
+    sectioningFitSelection,
+    sectioningSettings,
+    sectioningSpan,
+    sectioningVisible,
+    visibilityAutoIsolate,
+    visibilityClearSelection,
+    visibilityHideSelection,
+    visibilityIsolateSelection,
+    visibilitySettings,
+    visibilityShowAll,
+    visibilityShowSelection,
+    visibilitySpan
   }, Symbol.toStringTag, { value: "Module" }));
   const baseSectionStyle = "vc-flex vc-items-center vc-rounded-full vc-mb-2 vc-shadow-md";
   const sectionDefaultStyle = baseSectionStyle + " vc-bg-white";
@@ -63629,50 +63762,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     visible,
     zoom
   }, Symbol.toStringTag, { value: "Module" }));
-  function getDefaultSettings() {
-    return {
-      capacity: {
-        canFollowUrl: true,
-        canGoFullScreen: true,
-        canDownload: true,
-        canReadLocalStorage: true
-      },
-      ui: {
-        logo: true,
-        performance: false,
-        bimTreePanel: true,
-        bimInfoPanel: true,
-        // axesPanel
-        axesPanel: true,
-        orthographic: true,
-        resetCamera: true,
-        // Control bar
-        controlBar: true,
-        // Control bar - cursors
-        orbit: true,
-        lookAround: true,
-        pan: true,
-        zoom: true,
-        zoomWindow: true,
-        // Control bar - camera
-        autoCamera: true,
-        frameScene: true,
-        frameSelection: true,
-        // Control bar - tools
-        sectioningMode: true,
-        measuringMode: true,
-        toggleIsolation: true,
-        // Control bar - settings
-        projectInspector: true,
-        settings: true,
-        help: true,
-        maximise: true
-      }
-    };
-  }
-  function createSettings(settings2) {
-    return settings2 !== void 0 ? deepmerge(getDefaultSettings(), settings2) : getDefaultSettings();
-  }
   function getLocalSettings(settings2 = {}) {
     try {
       const json = localStorage.getItem("viewer.settings");
@@ -63727,8 +63816,6 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    createSettings,
-    getDefaultSettings,
     getLocalSettings,
     isFalse,
     isTrue,
@@ -67264,7 +67351,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return value.some(isTrue) ? element : null;
   }
   function anyUiAxesButton(settings2) {
-    return settings2.ui.orthographic || settings2.ui.resetCamera;
+    return settings2.ui.axesOrthographic || settings2.ui.axesHome;
   }
   const AxesPanelMemo = React2.memo(AxesPanel);
   function AxesPanel(props) {
@@ -67324,15 +67411,15 @@ Averrage Date/Second ${avgDataRatePS} kb
         children: ortho ? /* @__PURE__ */ jsxRuntimeExports.jsx(orthographic, { height: 20, width: 20, fill: "currentColor" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(perspective, { height: 20, width: 20, fill: "currentColor" })
       }
     );
-    const hidden2 = isTrue(props.settings.value.ui.axesPanel) ? "" : " vc-hidden";
+    const hidden2 = isTrue(props.settings.value.ui.panelAxes) ? "" : " vc-hidden";
     const empty2 = !anyUiAxesButton(props.settings.value);
     const createBar = () => {
       if (empty2) return null;
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-axes-panel-bar vc-absolute vc-top-[75%] vc-bottom-0 vc-right-0 vc-left-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-axes-panel-buttons vc-absolute vc-inset-0 vc-pointer-events-auto vc-order-2 vc-flex vc-items-center vc-justify-evenly vc-bg-white", children: [
         whenAllTrue([
-          props.settings.value.ui.orthographic
+          props.settings.value.ui.axesOrthographic
         ], btnOrtho),
-        whenTrue(props.settings.value.ui.resetCamera, btnHome)
+        whenTrue(props.settings.value.ui.axesHome, btnHome)
       ] }) });
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -67560,77 +67647,78 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Style = style;
   const Ids$2 = controlBarIds;
-  function controlBarSectionBox(section, hasSelection) {
+  function controlBarSectionBox(section, hasSelection, settings2) {
     return {
-      id: Ids$2.sectionSectionBox,
+      id: Ids$2.sectioningSpan,
       style: section.enable.get() ? Style.sectionNoPadStyle : Style.sectionDefaultStyle,
       //enable: () => section.getEnable(),
       buttons: [
         {
-          id: Ids$2.buttonSectionBoxEnable,
+          id: Ids$2.sectioningEnable,
+          enabled: () => isTrue(settings2.sectioningEnable),
           tip: "Enable Section Box",
           isOn: () => section.enable.get(),
-          style: (on) => Style.buttonExpandStyle(on),
+          style: Style.buttonExpandStyle,
           action: () => section.enable.set(!section.enable.get()),
           icon: sectionBox
         },
         {
-          id: Ids$2.buttonSectionBoxToSelection,
+          id: Ids$2.sectioningFitSelection,
           tip: "Fit Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningFitToSelection),
           isOn: () => hasSelection,
-          style: (on) => Style.buttonDisableStyle(on),
+          style: Style.buttonDisableStyle,
           action: () => section.sectionSelection.call(),
           icon: sectionBoxShrink
         },
         {
-          id: Ids$2.buttonSectionBoxToScene,
+          id: Ids$2.sectioningFitScene,
           tip: "Reset Section",
-          enabled: () => section.enable.get(),
-          style: (on) => Style.buttonDefaultStyle(on),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningReset),
+          style: Style.buttonDefaultStyle,
           action: () => section.sectionScene.call(),
           icon: sectionBoxReset
         },
         {
-          id: Ids$2.buttonSectionBoxVisible,
+          id: Ids$2.sectioningVisible,
           tip: "Show Section Box",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningShow),
           isOn: () => section.visible.get(),
-          style: (on) => Style.buttonDefaultStyle(on),
+          style: Style.buttonDefaultStyle,
           action: () => section.visible.set(!section.visible.get()),
           icon: visible
         },
         {
-          id: Ids$2.buttonSectionBoxAuto,
+          id: Ids$2.sectioningAuto,
           tip: "Auto Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningAuto),
           isOn: () => section.auto.get(),
-          style: (on) => Style.buttonDefaultStyle(on),
+          style: Style.buttonDefaultStyle,
           action: () => section.auto.set(!section.auto.get()),
           icon: sectionBoxAuto
         },
         {
-          id: Ids$2.buttonSectionBoxSettings,
+          id: Ids$2.sectioningSettings,
           tip: "Section Settings",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningSettings),
           isOn: () => section.showOffsetPanel.get(),
-          style: (on) => Style.buttonDefaultStyle(on),
+          style: Style.buttonDefaultStyle,
           action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
           icon: slidersHoriz
         }
       ]
     };
   }
-  function controlBarPointer(viewer, camera2, settings2, section) {
+  function controlBarPointer(viewer, settings2) {
     const pointer2 = getPointerState(viewer);
     return {
-      id: Ids$2.sectionInputs,
+      id: Ids$2.cursorSpan,
       enable: () => anyUiCursorButton(settings2),
       style: Style.sectionDefaultStyle,
       buttons: [
         {
-          id: Ids$2.buttonCameraOrbit,
-          enabled: () => isTrue(settings2.ui.orbit),
+          id: Ids$2.cursorOrbit,
+          enabled: () => isTrue(settings2.cursorOrbit),
           tip: "Orbit",
           action: () => pointer2.onButton(PointerMode$1.ORBIT),
           icon: orbit,
@@ -67638,8 +67726,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDefaultStyle
         },
         {
-          id: Ids$2.buttonCameraLook,
-          enabled: () => isTrue(settings2.ui.lookAround),
+          id: Ids$2.cursorLook,
+          enabled: () => isTrue(settings2.cursorLookAround),
           tip: "Look Around",
           action: () => pointer2.onButton(PointerMode$1.LOOK),
           icon: look,
@@ -67647,8 +67735,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDefaultStyle
         },
         {
-          id: Ids$2.buttonCameraPan,
-          enabled: () => isTrue(settings2.ui.pan),
+          id: Ids$2.cursorPan,
+          enabled: () => isTrue(settings2.cursorPan),
           tip: "Pan",
           action: () => pointer2.onButton(PointerMode$1.PAN),
           icon: pan,
@@ -67656,8 +67744,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDefaultStyle
         },
         {
-          id: Ids$2.buttonCameraZoom,
-          enabled: () => isTrue(settings2.ui.zoom),
+          id: Ids$2.cursorZoom,
+          enabled: () => isTrue(settings2.cursorZoom),
           tip: "Zoom",
           action: () => pointer2.onButton(PointerMode$1.ZOOM),
           icon: zoom,
@@ -67667,15 +67755,15 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarMeasure(settings2, measure$1) {
+  function controlBarMeasure(measure$1, settings2) {
     return {
-      id: Ids$2.sectionActions,
+      id: Ids$2.measureSpan,
       enable: () => true,
       style: Style.sectionDefaultStyle,
       buttons: [
         {
-          id: Ids$2.buttonMeasure,
-          enabled: () => isTrue(settings2.ui.measuringMode),
+          id: Ids$2.measureEnable,
+          enabled: () => isTrue(settings2.measureEnable),
           isOn: () => measure$1.active,
           tip: "Measuring Mode",
           action: () => measure$1.toggle(),
@@ -67685,40 +67773,57 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarSettings(modal, side, settings$1) {
+  function createMiscSettingsButton(side, settings$1) {
+    return {
+      id: Ids$2.miscSettings,
+      enabled: () => isTrue(settings$1.ui.miscSettings),
+      tip: "Settings",
+      action: () => side.toggleContent("settings"),
+      icon: settings,
+      style: Style.buttonDefaultStyle
+    };
+  }
+  function createMiscHelpButton(modal, settings2) {
+    return {
+      id: Ids$2.miscHelp,
+      enabled: () => isTrue(settings2.ui.miscHelp),
+      tip: "Help",
+      action: () => modal.help(true),
+      icon: help,
+      style: Style.buttonDefaultStyle
+    };
+  }
+  function controlBarMiscUltra(modal, side, settings2) {
+    return {
+      id: Ids$2.miscSpan,
+      enable: () => anyUltraMiscButton(settings2),
+      style: Style.sectionDefaultStyle,
+      buttons: [
+        createMiscSettingsButton(side, settings2),
+        createMiscHelpButton(modal, settings2)
+      ]
+    };
+  }
+  function controlBarMisc(modal, side, settings2) {
     const fullScreen = getFullScreenState();
     return {
-      id: Ids$2.sectionSettings,
-      enable: () => anyUiSettingButton(settings$1),
+      id: Ids$2.miscSpan,
+      enable: () => anyWebglMiscButton(settings2),
       style: Style.sectionDefaultStyle,
       buttons: [
         {
-          id: Ids$2.buttonProjectInspector,
-          enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
+          id: Ids$2.miscInspector,
+          enabled: () => showBimButton(settings2),
           tip: "Project Inspector",
           action: () => side.toggleContent("bim"),
           icon: treeView,
           style: Style.buttonDefaultStyle
         },
+        createMiscSettingsButton(side, settings2),
+        createMiscHelpButton(modal, settings2),
         {
-          id: Ids$2.buttonSettings,
-          enabled: () => isTrue(settings$1.ui.settings),
-          tip: "Settings",
-          action: () => side.toggleContent("settings"),
-          icon: settings,
-          style: Style.buttonDefaultStyle
-        },
-        {
-          id: Ids$2.buttonHelp,
-          enabled: () => isTrue(settings$1.ui.help),
-          tip: "Help",
-          action: () => modal.help(true),
-          icon: help,
-          style: Style.buttonDefaultStyle
-        },
-        {
-          id: Ids$2.buttonMaximize,
-          enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
+          id: Ids$2.miscMaximize,
+          enabled: () => isTrue(settings2.ui.miscMaximise) && settings2.capacity.canGoFullScreen,
           tip: fullScreen.get() ? "Minimize" : "Fullscreen",
           action: () => fullScreen.toggle(),
           icon: fullScreen.get() ? minimize : fullsScreen,
@@ -67727,14 +67832,15 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarCamera(camera2) {
+  function controlBarCamera(camera2, settings2) {
     return {
-      id: Ids$2.sectionCamera,
+      id: Ids$2.cameraSpan,
       enable: () => true,
       style: Style.sectionDefaultStyle,
       buttons: [
         {
-          id: Ids$2.buttonCameraAuto,
+          id: Ids$2.cameraAuto,
+          enabled: () => isTrue(settings2.cameraAuto),
           tip: "Auto Camera",
           isOn: () => camera2.autoCamera.get(),
           action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
@@ -67742,8 +67848,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDefaultStyle
         },
         {
-          id: Ids$2.buttonCameraFrameSelection,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          id: Ids$2.cameraFrameSelection,
+          enabled: () => isTrue(settings2.cameraFrameSelection),
           tip: "Frame Selection",
           action: () => camera2.frameSelection.call(),
           icon: frameSelection,
@@ -67751,8 +67857,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDefaultStyle
         },
         {
-          id: Ids$2.buttonCameraFrameScene,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          id: Ids$2.cameraFrameScene,
+          enabled: () => isTrue(settings2.cameraFrameScene),
           tip: "Frame All",
           action: () => camera2.frameScene.call(),
           icon: frameScene,
@@ -67762,16 +67868,17 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarSelection(isolation) {
+  function controlBarVisibility(isolation, settings2) {
     const adapter = isolation.adapter.current;
     const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection();
     return {
-      id: Ids$2.sectionSelection,
+      id: Ids$2.visibilitySpan,
       enable: () => true,
-      style: `${Style.sectionDefaultStyle}`,
+      style: Style.sectionDefaultStyle,
       buttons: [
         {
-          id: Ids$2.buttonClearSelection,
+          id: Ids$2.visibilityClearSelection,
+          enabled: () => isTrue(settings2.visibilityClearSelection),
           tip: "Clear Selection",
           action: () => adapter.clearSelection(),
           icon: pointer,
@@ -67779,16 +67886,17 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDisableDefaultStyle
         },
         {
-          id: Ids$2.buttonShowAll,
+          id: Ids$2.visibilityShowAll,
           tip: "Show All",
+          enabled: () => isTrue(settings2.visibilityShowAll),
           action: () => adapter.showAll(),
           icon: showAll,
           isOn: () => !isolation.autoIsolate.get() && isolation.visibility.get() !== "all",
           style: Style.buttonDisableStyle
         },
         {
-          id: Ids$2.buttonHideSelection,
-          enabled: () => someVisible,
+          id: Ids$2.visibilityHideSelection,
+          enabled: () => someVisible && isTrue(settings2.visibilityToggle),
           tip: "Hide Selection",
           action: () => adapter.hideSelection(),
           icon: hideSelection,
@@ -67796,8 +67904,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDisableStyle
         },
         {
-          id: Ids$2.buttonShowSelection,
-          enabled: () => !someVisible,
+          id: Ids$2.visibilityShowSelection,
+          enabled: () => !someVisible && isTrue(settings2.visibilityToggle),
           tip: "Show Selection",
           action: () => adapter.showSelection(),
           icon: showSelection,
@@ -67805,7 +67913,8 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDisableStyle
         },
         {
-          id: Ids$2.buttonIsolateSelection,
+          id: Ids$2.visibilityIsolateSelection,
+          enabled: () => isTrue(settings2.visibilityIsolate),
           tip: "Isolate Selection",
           action: () => adapter.isolateSelection(),
           icon: isolateSelection,
@@ -67813,14 +67922,16 @@ Averrage Date/Second ${avgDataRatePS} kb
           style: Style.buttonDisableStyle
         },
         {
-          id: Ids$2.buttonAutoIsolate,
+          id: Ids$2.visibilityAutoIsolate,
+          enabled: () => isTrue(settings2.visibilityAutoIsolate),
           tip: "Auto Isolate",
           action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
           isOn: () => isolation.autoIsolate.get(),
           icon: autoIsolate
         },
         {
-          id: Ids$2.buttonIsolationSettings,
+          id: Ids$2.visibilitySettings,
+          enabled: () => isTrue(settings2.visibilitySettings),
           tip: "Isolation Settings",
           action: () => isolation.showPanel.set(!isolation.showPanel.get()),
           icon: slidersHoriz,
@@ -67831,28 +67942,31 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function useControlBar(viewer, camera2, modal, side, cursor, settings2, section, isolationRef, customization) {
     const measure2 = getMeasureState(viewer, cursor);
-    const pointerSection = controlBarPointer(viewer, camera2, settings2);
-    const actionSection = controlBarMeasure(settings2, measure2);
-    const sectionBoxSection = controlBarSectionBox(section, viewer.selection.any());
-    const settingsSection = controlBarSettings(modal, side, settings2);
-    const cameraSection = controlBarCamera(camera2);
-    const selectionSection = controlBarSelection(isolationRef);
     let controlBarSections = [
-      pointerSection,
-      actionSection,
-      cameraSection,
-      sectionBoxSection,
-      selectionSection,
-      settingsSection
+      controlBarPointer(viewer, settings2.ui),
+      controlBarCamera(camera2, settings2.ui),
+      controlBarVisibility(isolationRef, settings2.ui),
+      controlBarMeasure(measure2, settings2.ui),
+      controlBarSectionBox(section, viewer.selection.any(), settings2.ui),
+      controlBarMisc(modal, side, settings2)
     ];
     controlBarSections = (customization == null ? void 0 : customization(controlBarSections)) ?? controlBarSections;
     return controlBarSections;
   }
+  function showBimButton(settings2) {
+    if (isFalse(settings2.ui.miscProjectInspector)) return false;
+    if (isTrue(settings2.ui.panelBimTree)) return true;
+    if (isTrue(settings2.ui.panelBimInfo)) return true;
+    return false;
+  }
   function anyUiCursorButton(settings2) {
-    return isTrue(settings2.ui.orbit) || isTrue(settings2.ui.lookAround) || isTrue(settings2.ui.pan) || isTrue(settings2.ui.zoom) || isTrue(settings2.ui.zoomWindow);
+    return isTrue(settings2.cursorOrbit) || isTrue(settings2.cursorLookAround) || isTrue(settings2.cursorPan) || isTrue(settings2.cursorZoom);
   }
-  function anyUiSettingButton(settings2) {
-    return isTrue(settings2.ui.projectInspector) || isTrue(settings2.ui.settings) || isTrue(settings2.ui.help) || isTrue(settings2.ui.maximise);
+  function anyWebglMiscButton(settings2) {
+    return isTrue(settings2.ui.miscProjectInspector) || isTrue(settings2.ui.miscSettings) || isTrue(settings2.ui.miscHelp) || isTrue(settings2.ui.miscMaximise);
+  }
+  function anyUltraMiscButton(settings2) {
+    return isTrue(settings2.ui.miscSettings) || isTrue(settings2.ui.miscHelp);
   }
   function RestOfScreen(props) {
     const [, setVersion] = React2.useState(0);
@@ -72753,7 +72867,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return;
     }
     if (rectElem.top < rectContainer.top || rectElem.top < 0) {
-      selection.scrollIntoView();
+      selection.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
   }
   const isControlKey = (e) => {
@@ -72958,8 +73072,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   function OptionalBimPanel(props) {
     return whenSomeTrue(
       [
-        props.settings.ui.bimTreePanel,
-        props.settings.ui.bimInfoPanel
+        props.settings.ui.panelBimTree,
+        props.settings.ui.panelBimInfo
       ],
       React2.createElement(BimPanel, props)
     );
@@ -72972,11 +73086,11 @@ Averrage Date/Second ${avgDataRatePS} kb
     }, [props.viewerState.vim.get(), props.viewerState.elements.get()]);
     const selection = props.viewerState.selection.get();
     const last = selection[selection.length - 1];
-    const fullTree = isFalse(props.settings.ui.bimInfoPanel);
-    const fullInfo = isFalse(props.settings.ui.bimTreePanel);
+    const fullTree = isFalse(props.settings.ui.panelBimInfo);
+    const fullInfo = isFalse(props.settings.ui.panelBimTree);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `vim-bim-panel vc-inset-0 vc-absolute vc-h-full vc-w-full ${fullTree ? "full-tree" : ""} ${props.visible ? "" : "vc-hidden"}`, children: [
       whenTrue(
-        props.settings.ui.bimTreePanel,
+        props.settings.ui.panelBimTree,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `vim-bim-upper vc-flex vc-flex-col vc-absolute vc-w-full ${fullTree ? "vc-h-full" : "vc-h-[49%]"} `, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "h2",
@@ -73010,21 +73124,21 @@ Averrage Date/Second ${avgDataRatePS} kb
       // Divider if needed.
       whenAllTrue(
         [
-          props.settings.ui.bimTreePanel,
-          props.settings.ui.bimInfoPanel,
+          props.settings.ui.panelBimTree,
+          props.settings.ui.panelBimInfo,
           ((_b2 = props.viewerState.elements.get()) == null ? void 0 : _b2.length) > 0
         ],
         divider$1()
       ),
       whenTrue(
-        props.settings.ui.bimInfoPanel,
+        props.settings.ui.panelBimInfo,
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `vim-bim-lower-container vc-absolute ${fullInfo ? "vc-top-0" : "vc-top-[50%]"} vc-bottom-0 vc-bottom vc-left-0 vc-right-0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           BimInfoPanel,
           {
             object: last,
             vim: props.viewerState.vim.get(),
             elements: props.viewerState.elements.get(),
-            full: isFalse(props.settings.ui.bimTreePanel),
+            full: isFalse(props.settings.ui.panelBimTree),
             bimInfoRef: props.bimInfoRef
           }
         ) })
@@ -73864,7 +73978,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       } else {
         props.container.gfx.style.left = "0px";
       }
-      props.viewer.viewport.ResizeToParent();
+      props.viewer.viewport.resizeToParent();
     };
     const getMaxSize = () => {
       return props.container.root.clientWidth * MAX_WIDTH;
@@ -73923,7 +74037,10 @@ Averrage Date/Second ${avgDataRatePS} kb
         style: {
           position: "absolute"
         },
-        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 vc-bg-gray-lightest vc-text-gray-darker ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
+        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 
+            vc-bg-gray-lightest vc-text-gray-darker 
+            vc-border-r vc-border-gray-light 
+            ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -74006,180 +74123,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       [side, width]
     );
   }
-  function SettingsPanel(props) {
-    if (!props.visible) return null;
-    const toggleElement = (label, state, action) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: state,
-            onChange: action,
-            className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium "
-          }
-        ),
-        " ",
-        label
-      ] });
-    };
-    const settingsToggle = (label, getter, setter) => {
-      const value = getter(props.settings.value);
-      if (value === "AlwaysTrue" || value === "AlwaysFalse") {
-        return null;
-      }
-      return toggleElement(label, value, () => {
-        const value2 = getter(props.settings.value);
-        props.settings.update((s) => setter(s, !value2));
-      });
-    };
-    const settingsBox = (label, info, transform, getter, setter) => {
-      const ref = React2.useRef(null);
-      React2.useEffect(() => {
-        ref.current.value = props.viewer.inputs.scrollSpeed.toFixed(2);
-      }, []);
-      getter(props.settings.value).toString();
-      const update = (event) => {
-        const str = event.target.value;
-        const n = Number.parseFloat(str);
-        if (Number.isNaN(n)) {
-          event.target.value = getter(props.settings.value).toString();
-        } else {
-          const value2 = transform(n);
-          event.target.value = value2.toString();
-          props.settings.update((s) => setter(s, value2));
-        }
-      };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "text", className: "vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1", onBlur: (e) => update(e) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: info })
-      ] });
-    };
-    function settingsSubtitle(title2) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: title2 });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "vc-absolute vc-inset-0",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title", children: "Settings " }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto", children: [
-            settingsSubtitle("Inputs"),
-            settingsBox(
-              "Scroll Speed",
-              "[0.1,10]",
-              (n) => MathUtils.clamp(n, 0.1, 10),
-              (s) => props.viewer.inputs.scrollSpeed,
-              (s, v) => {
-                props.viewer.inputs.scrollSpeed = v;
-              }
-            ),
-            settingsSubtitle("Panels"),
-            settingsToggle(
-              "Show Logo",
-              (settings2) => settings2.ui.logo,
-              (settings2, value) => settings2.ui.logo = value
-            ),
-            settingsToggle(
-              "Show Bim Tree",
-              (settings2) => settings2.ui.bimTreePanel,
-              (settings2, value) => settings2.ui.bimTreePanel = value
-            ),
-            settingsToggle(
-              "Show Bim Info",
-              (settings2) => settings2.ui.bimInfoPanel,
-              (settings2, value) => settings2.ui.bimInfoPanel = value
-            ),
-            settingsToggle(
-              "Show Axes Panel",
-              (settings2) => settings2.ui.axesPanel,
-              (settings2, value) => settings2.ui.axesPanel = value
-            ),
-            settingsToggle(
-              "Show Performance Panel",
-              (settings2) => settings2.ui.performance,
-              (settings2, value) => settings2.ui.performance = value
-            ),
-            settingsSubtitle("Axes"),
-            settingsToggle(
-              "Show Orthographic Button",
-              (settings2) => settings2.ui.orthographic,
-              (settings2, value) => settings2.ui.orthographic = value
-            ),
-            settingsToggle(
-              "Show Reset Camera Button",
-              (settings2) => settings2.ui.resetCamera,
-              (settings2, value) => settings2.ui.resetCamera = value
-            ),
-            settingsSubtitle("Control Bar"),
-            settingsToggle(
-              "Show Control Bar",
-              (settings2) => settings2.ui.controlBar,
-              (settings2, value) => settings2.ui.controlBar = value
-            ),
-            settingsSubtitle("Control Bar - Cursors"),
-            settingsToggle(
-              "Show Orbit Button",
-              (settings2) => settings2.ui.orbit,
-              (settings2, value) => settings2.ui.orbit = value
-            ),
-            settingsToggle(
-              "Show Look Around Button",
-              (settings2) => settings2.ui.lookAround,
-              (settings2, value) => settings2.ui.lookAround = value
-            ),
-            settingsToggle(
-              "Show Pan Button",
-              (settings2) => settings2.ui.pan,
-              (settings2, value) => settings2.ui.pan = value
-            ),
-            settingsToggle(
-              "Show Zoom Button",
-              (settings2) => settings2.ui.zoom,
-              (settings2, value) => settings2.ui.zoom = value
-            ),
-            settingsToggle(
-              "Show Zoom Window Button",
-              (settings2) => settings2.ui.zoomWindow,
-              (settings2, value) => settings2.ui.zoomWindow = value
-            ),
-            settingsSubtitle("Control Bar - Tools"),
-            settingsToggle(
-              "Show Measuring Mode Button",
-              (settings2) => settings2.ui.measuringMode,
-              (settings2, value) => settings2.ui.measuringMode = value
-            ),
-            settingsSubtitle("Control Bar - Settings"),
-            settingsToggle(
-              "Show Project Inspector Button",
-              (settings2) => settings2.ui.projectInspector,
-              (settings2, value) => settings2.ui.projectInspector = value
-            ),
-            settingsToggle(
-              "Show Settings Button",
-              (settings2) => settings2.ui.settings,
-              (settings2, value) => settings2.ui.settings = value
-            ),
-            settingsToggle(
-              "Show Help Button",
-              (settings2) => settings2.ui.help,
-              (settings2, value) => settings2.ui.help = value
-            ),
-            settingsToggle(
-              "Show Maximise Button",
-              (settings2) => settings2.ui.maximise,
-              (settings2, value) => settings2.ui.maximise = value
-            )
-          ] })
-        ]
-      }
-    );
-  }
   const MenuToastMemo = React2.memo(MenuToast);
   function MenuToast(props) {
     const [visible2, setVisible] = React2.useState();
@@ -74344,118 +74287,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     });
   }
-  function useSettings(viewer, value) {
-    const merged = createSettings(value);
-    const [settings2, setSettings] = React2.useState(merged);
-    const onUpdate = React2.useRef();
-    const update = function(updater) {
-      var _a3;
-      const next = { ...settings2 };
-      updater(next);
-      saveSettingsToLocal(next);
-      setSettings(next);
-      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
-    };
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, []);
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, [settings2]);
-    return React2.useMemo(
-      () => ({
-        value: settings2,
-        update,
-        register: (v) => onUpdate.current = v
-      }),
-      [settings2]
-    );
-  }
-  function applySettings(viewer, settings2) {
-    const performance2 = document.getElementsByClassName("vim-performance-div")[0];
-    if (performance2) {
-      if (isTrue(settings2.ui.performance)) {
-        performance2.classList.remove("vc-hidden");
-      } else {
-        performance2.classList.add("vc-hidden");
-      }
-    }
-  }
-  function createContainer(element) {
-    let root = element;
-    if (root === void 0) {
-      root = document.createElement("div");
-      document.body.append(root);
-      root.classList.add("vc-inset-0");
-    }
-    root.style.position = "absolute";
-    root.classList.add("vim-component");
-    const gfx = document.createElement("div");
-    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
-    const ui = document.createElement("div");
-    ui.className = "vim-ui vc-absolute vc-inset-0";
-    root.append(gfx);
-    root.append(ui);
-    const dispose = () => {
-      if (element === void 0) {
-        root.remove();
-      } else {
-        root.classList.remove("vim-component");
-        gfx.remove();
-        ui.remove();
-      }
-    };
-    return { root, ui, gfx, dispose };
-  }
-  async function getElements(vim) {
-    var _a3, _b2, _c, _d, _e;
-    if (!vim.bim) return [];
-    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
-      [
-        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
-        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
-        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
-        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
-        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
-      ]
-    );
-    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
-    if (!elements) return void 0;
-    const result = elements.map((e) => {
-      var _a4;
-      return {
-        ...e,
-        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
-        categoryName: category ? category[e.categoryIndex] : void 0,
-        familyTypeName: familyTypeMap.get(e.index),
-        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
-        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
-      };
-    });
-    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
-    return real;
-  }
-  async function getFamilyTypeNameMap(document2) {
-    const [
-      familyInstanceElement,
-      familyInstanceFamilyType,
-      familyTypeElement,
-      elementName
-    ] = await Promise.all([
-      document2.familyInstance.getAllElementIndex(),
-      document2.familyInstance.getAllFamilyTypeIndex(),
-      document2.familyType.getAllElementIndex(),
-      document2.element.getAllName()
-    ]);
-    return new Map(
-      familyInstanceElement.map((e, i2) => {
-        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
-        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
-        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
-        return [e, name];
-      })
-    );
-  }
   class MutableState {
     constructor(initial) {
       __publicField(this, "_value");
@@ -74484,24 +74315,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
-  function useStateRef(initialValue) {
-    const [value, setValue] = React2.useState(initialValue);
+  function useStateRef(initialValue, isLazy = false) {
+    const getInitialValue = () => {
+      if (isLazy && typeof initialValue === "function") {
+        return initialValue();
+      }
+      return initialValue;
+    };
+    const [box, setBox] = React2.useState(() => ({
+      current: getInitialValue()
+    }));
     const ref = React2.useRef(void 0);
     if (ref.current === void 0) {
-      if (typeof initialValue === "function") {
-        ref.current = initialValue();
-      } else {
-        ref.current = initialValue;
-      }
+      ref.current = getInitialValue();
     }
     const event = React2.useRef(new distExports.SimpleEventDispatcher());
     const validate = React2.useRef((next, current) => next);
-    const confirm = React2.useRef((value2) => value2);
-    const set2 = (value2) => {
-      const finalValue = validate.current(value2, ref.current);
+    const confirm = React2.useRef((value) => value);
+    const set2 = (value) => {
+      const finalValue = validate.current(value, ref.current);
       if (finalValue === ref.current) return;
       ref.current = finalValue;
-      setValue(finalValue);
+      setBox({ current: finalValue });
       event.current.dispatch(finalValue);
     };
     return {
@@ -74527,8 +74362,8 @@ Averrage Date/Second ${avgDataRatePS} kb
        */
       useOnChange(on) {
         React2.useEffect(() => {
-          return event.current.subscribe((value2) => {
-            const result = on(value2);
+          return event.current.subscribe((value) => {
+            const result = on(value);
             if (result instanceof Promise) {
               result.catch(console.error);
             }
@@ -74542,7 +74377,7 @@ Averrage Date/Second ${avgDataRatePS} kb
        * @returns The memoized value.
        */
       useMemo(on, deps) {
-        return React2.useMemo(() => on(value), [...deps || [], value]);
+        return React2.useMemo(() => on(box.current), [...deps || [], box.current]);
       },
       /**
        * Sets a validation function to process any new state value before updating.
@@ -74719,8 +74554,116 @@ Averrage Date/Second ${avgDataRatePS} kb
     useRefresher,
     useStateRef
   }, Symbol.toStringTag, { value: "Module" }));
-  function useViewerState(viewer) {
-    const getVim = () => {
+  function useSettings(value, defaultSettings, applySettings = () => {
+  }) {
+    const merged = createSettings(value, defaultSettings);
+    const [settings2, setSettings] = React2.useState(merged);
+    const onUpdate = React2.useRef();
+    const customizer = useStateRef((settings22) => settings22);
+    const update = function(updater) {
+      var _a3;
+      const next = { ...settings2 };
+      updater(next);
+      saveSettingsToLocal(next);
+      setSettings(next);
+      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
+    };
+    React2.useEffect(() => {
+      applySettings(settings2);
+    }, []);
+    React2.useEffect(() => {
+      applySettings(settings2);
+    }, [settings2]);
+    return React2.useMemo(
+      () => ({
+        value: settings2,
+        update,
+        register: (v) => onUpdate.current = v,
+        customizer
+      }),
+      [settings2]
+    );
+  }
+  function createSettings(settings2, defaultSettings) {
+    return settings2 !== void 0 ? deepmerge(defaultSettings, settings2) : defaultSettings;
+  }
+  function createContainer(element) {
+    let root = element;
+    if (root === void 0) {
+      root = document.createElement("div");
+      document.body.append(root);
+      root.classList.add("vc-inset-0");
+    }
+    root.style.position = "absolute";
+    root.classList.add("vim-component");
+    const gfx = document.createElement("div");
+    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
+    const ui = document.createElement("div");
+    ui.className = "vim-ui vc-absolute vc-inset-0";
+    root.append(gfx);
+    root.append(ui);
+    const dispose = () => {
+      if (element === void 0) {
+        root.remove();
+      } else {
+        root.classList.remove("vim-component");
+        gfx.remove();
+        ui.remove();
+      }
+    };
+    return { root, ui, gfx, dispose };
+  }
+  async function getElements(vim) {
+    var _a3, _b2, _c, _d, _e;
+    if (!vim.bim) return [];
+    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
+      [
+        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
+        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
+        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
+        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
+        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
+      ]
+    );
+    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
+    if (!elements) return void 0;
+    const result = elements.map((e) => {
+      var _a4;
+      return {
+        ...e,
+        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
+        categoryName: category ? category[e.categoryIndex] : void 0,
+        familyTypeName: familyTypeMap.get(e.index),
+        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
+        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
+      };
+    });
+    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
+    return real;
+  }
+  async function getFamilyTypeNameMap(document2) {
+    const [
+      familyInstanceElement,
+      familyInstanceFamilyType,
+      familyTypeElement,
+      elementName
+    ] = await Promise.all([
+      document2.familyInstance.getAllElementIndex(),
+      document2.familyInstance.getAllFamilyTypeIndex(),
+      document2.familyType.getAllElementIndex(),
+      document2.element.getAllName()
+    ]);
+    return new Map(
+      familyInstanceElement.map((e, i2) => {
+        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
+        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
+        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
+        return [e, name];
+      })
+    );
+  }
+  function useViewerState(viewer) {
+    const getVim = () => {
       var _a3;
       const v = (_a3 = viewer.vims) == null ? void 0 : _a3[0];
       return v;
@@ -74860,12 +74803,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const vcLink = `${vcColorLink} vc-underline`;
   const vcLabel = "vc-text-[#3F444F]";
   const vcRoboto = "vc-font-['Roboto',sans-serif]";
-  function footer$1(url) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `vc-text-xs vc-font-normal ${vcColorSecondary}`, children: [
-      "More troubleshooting tips can be found",
-      " ",
-      link(url, "here")
-    ] });
+  function footer$1() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   }
   function mainText(text) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `vim-main-text vc-text-base ${vcColorPrimary} vc-mb-4 vc-font-normal`, children: text });
@@ -74913,31 +74852,18 @@ Averrage Date/Second ${avgDataRatePS} kb
     vcLink,
     vcRoboto
   }, Symbol.toStringTag, { value: "Module" }));
-  const support = "https://docs.vimaec.com";
-  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
-  const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
-  const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    support,
-    supportControls,
-    supportUltra
-  }, Symbol.toStringTag, { value: "Module" }));
   function fileOpeningError(url) {
     return {
-      title: "File Opening Error",
+      title: "VIM Ultra File Error",
       body: serverFileOpeningErrorBody(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function serverFileOpeningErrorBody(url) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that there's an ",
-        bold("error opening the VIM file"),
-        ". Please check the file exists at the path noted below."
-      ] })),
-      subTitle("Error details:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "We encountered an error opening the VIM file in VIM Ultra." })),
+      subTitle("Details"),
       dotList([bullet("File path:", url)])
     ] });
   }
@@ -74946,136 +74872,110 @@ Averrage Date/Second ${avgDataRatePS} kb
       return fileOpeningError(url);
     }
     return {
-      title: "File Downloading Error",
+      title: "VIM Ultra Download Error",
       body: body$5(url, authToken, server),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function body$5(url, authToken, server) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that there’s an ",
-        bold("error downloading the VIM file"),
-        ". Please check the following conditions to get back up and running quickly."
-      ] })),
-      subTitle("Error details:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "We encountered an error downloading the VIM file in VIM Ultra." })),
+      subTitle("Details"),
       dotList([
-        server ? bullet("VIM ULTRA Server:", server) : null,
-        bullet("File URL:", url),
-        authToken ? bullet("Auth Token:", authToken) : null
+        server ? bullet("VIM Ultra:", server) : null,
+        bullet("VIM URL:", url),
+        authToken ? bullet("Access Token:", authToken) : null
       ]),
-      subTitle("Troubleshooting tips:"),
+      subTitle("Tips"),
       numList([
-        "Make sure the VIM exists at the url listed above.",
-        "Reprocess the VIM file and refresh the Power BI report dataset.",
-        server ? "Check network access policies to allow the VIM Ultra Server access to the VIM File url." : ""
+        "Ensure the VIM URL is valid",
+        "Check your network connection and access policies"
       ])
     ] });
   }
   function serverFileLoadingError(url) {
     return {
-      title: "File Loading Error",
+      title: "VIM Ultra Loading Error",
       body: body$4(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function body$4(url) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that we ",
-        bold("couldn’t load the VIM file"),
-        ". This could be due to a couple of reasons, including that the file could be corrupt or not recognizable."
-      ] })),
-      subTitle("Error details:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "We encountered an error loading the VIM file in VIM Ultra." })),
+      subTitle("Details"),
       dotList([bullet("File path:", url)]),
-      subTitle("Troubleshooting tips:"),
+      subTitle("Tips"),
       numList([
-        "Reload this Power BI report",
-        "Reprocess the VIM file and refresh the Power BI report dataset"
+        "Reload the page",
+        "Ensure the VIM URL points to a valid VIM file",
+        "Clear your VIM Ultra download cache"
       ])
     ] });
   }
   function serverConnectionError(url) {
     return {
-      title: "Connection Error",
+      title: "VIM Ultra Connection",
       body: body$3(url, isLocalUrl(url)),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function body$3(url, local) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that there’s an ",
-        bold("error connecting to the ULTRA server"),
-        ". Please check the following conditions to get back up and running quickly."
-      ] })),
-      subTitle("Troubleshooting tips:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "We encountered an error connecting to VIM Ultra." })),
+      subTitle("Tips"),
       numList([
         /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          "Ensure that VIM Ultra",
-          " ",
-          link(supportUltra, "process is running"),
-          " ",
-          "at ",
+          "Ensure that VIM Ultra is running at ",
           detailText(url)
         ] }),
-        "Check your internet connection.",
-        "Check firewall permissions."
+        "Check your network connection and access policies"
       ])
     ] });
   }
   function serverCompatibilityError(url, localVersion, remoteVersion) {
     return {
-      title: "Compatibility Error",
+      title: "VIM Ultra Compatibility",
       body: body$2(url, localVersion, remoteVersion),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function body$2(url, localVersion, remoteVersion) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that you’re running a ",
-        " ",
-        bold("version of VIM Ultra Server that isn’t compatible with this visual"),
-        ". Please check the following conditions to get back up and running quickly."
-      ] })),
-      subTitle("Error details:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "The VIM Ultra version is incompatible with this visual." })),
+      subTitle("Details"),
       dotList([
         bullet("Url:", url),
         bullet("Local Version:", localVersion),
         bullet("Remote Version:", remoteVersion)
       ]),
-      subTitle("Troubleshooting tips:"),
+      subTitle("Tips"),
       numList([
-        "Update your PowerBI visual with the compatible version.",
-        "Or, run the compatible version of VIM Ultra."
+        "Update this visual to a compatible version.",
+        "Start a compatible version of VIM Ultra."
       ])
     ] });
   }
   function serverStreamError(url) {
     return {
-      title: "Stream Error",
+      title: "VIM Ultra Stream Error",
       body: body$1(),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
   function body$1(url) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: vcRoboto, children: [
-      mainText(/* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        "Oops, it appears that there’s an ",
-        bold("error starting a stream on the VIM Ultra Server"),
-        ". Please check the following conditions to get back up and running quickly."
-      ] })),
-      subTitle("Troubleshooting tips:"),
+      mainText(/* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "We encountered a streaming error with VIM Ultra." })),
+      subTitle("Tips"),
       numList([
-        "Close other applications that may be using the server.",
-        "Try reconnecting to the server.",
-        "Restart the server."
+        "Reload the page",
+        "Close other applications that may be using VIM Ultra",
+        "Restart VIM Ultra"
       ])
     ] });
   }
@@ -75307,16 +75207,19 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
   }
   function MessageBox(props) {
+    const [minimized, setMinimized] = React2.useState(props.value.minimize ?? false);
     const p = props.value;
     if (!p.title || !p.body) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-message-box vc-p-6 vc-max-h-[80%] vc-max-w-[80%] vc-w-[424px] vc-bg-white vc-rounded-md vc-shadow-message vc-shadow-[0px_4px_16px_rgba(33,39,51,0.5)] vc-font-roboto", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-flex vc-justify-between vc-items-center", children: [
+        props.value.icon,
         title(p.title),
-        closeBtn(p.onClose)
+        props.value.canClose && closeBtn(p.onClose),
+        props.value.minimize && minimizeButton(minimized, setMinimized)
       ] }),
-      divider(),
-      body(p.body),
-      footer(p.footer)
+      !minimized && divider(),
+      !minimized && body(p.body),
+      !minimized && footer(p.footer)
     ] });
   }
   function title(title2) {
@@ -75326,6 +75229,9 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (!onClose) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: onClose, className: "vc-text-[#212733] vc-text-xl", children: "×" });
   }
+  function minimizeButton(minimized, setMinimized) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setMinimized(!minimized), className: "vc-text-[#212733] vc-text-xl", children: minimized ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▼" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▲" }) });
+  }
   function body(content2) {
     if (content2 === void 0) return null;
     if (typeof content2 === "string") {
@@ -75684,7 +75590,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       adapter.setVisible(false);
       adapter.setClip(false);
       return adapter.onSelectionChanged.sub(() => {
-        if (auto.get() && enable.get()) sectionSelection2.call();
+        if (auto.get() && enable.get()) sectionSelection.call();
       });
     }, []);
     enable.useOnChange((v) => {
@@ -75692,7 +75598,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       visible2.set(v);
       showOffsetPanel.set(false);
       if (v && auto.get()) {
-        sectionSelection2.call();
+        sectionSelection.call();
       } else {
         sectionScene.call();
       }
@@ -75703,7 +75609,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     sideOffset.useOnChange((v) => sectionBox2.call(boxRef.current));
     bottomOffset.useOnChange((v) => sectionBox2.call(boxRef.current));
     auto.useOnChange((v) => {
-      if (v) sectionSelection2.call();
+      if (v) sectionSelection.call();
     });
     visible2.useOnChange((v) => adapter.setVisible(v));
     const sectionBox2 = useArgActionRef((box) => {
@@ -75713,7 +75619,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       const newBox = addBox(box, offsetsToBox3_(topOffset.get(), sideOffset.get(), bottomOffset.get()));
       adapter.setBox(newBox);
     });
-    const sectionSelection2 = useFuncRef(async () => {
+    const sectionSelection = useFuncRef(async () => {
       const id2 = requestId.current;
       const box = await getSelectionBox.call() ?? await getSceneBox.call();
       if (requestId.current !== id2) return;
@@ -75733,7 +75639,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       topOffset,
       sideOffset,
       bottomOffset,
-      sectionSelection: sectionSelection2,
+      sectionSelection,
       sectionScene,
       sectionBox: sectionBox2,
       getBox: () => adapter.getBox(),
@@ -75831,7 +75737,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Ids = {
     showGhost: "isolationPanel.showGhost",
-    ghostOpacity: "isolationPanel.ghostOpacity"
+    ghostOpacity: "isolationPanel.ghostOpacity",
+    transparency: "isolationPanel.transparency"
   };
   const IsolationPanel$1 = React2.forwardRef(
     (props, ref) => {
@@ -75843,8 +75750,20 @@ Averrage Date/Second ${avgDataRatePS} kb
           anchorElement: document.getElementById("vim-control-bar"),
           showPanel: props.state.showPanel,
           entries: [
-            { type: "bool", id: Ids.showGhost, label: "Show Ghost", state: props.state.showGhost },
-            // { type: "bool", id: "showRooms", label: "Show Rooms", state: props.state.showRooms },
+            {
+              type: "bool",
+              id: Ids.showGhost,
+              label: "Show Ghost",
+              state: props.state.showGhost
+            },
+            /*
+            {
+              type: "bool",
+              id: "showRooms",
+              label: "Show Rooms",
+              state: props.state.showRooms
+            },
+            */
             {
               type: "number",
               id: Ids.ghostOpacity,
@@ -75854,6 +75773,13 @@ Averrage Date/Second ${avgDataRatePS} kb
               min: 0,
               max: 1,
               step: 0.05
+            },
+            {
+              type: "bool",
+              visible: () => props.transparency,
+              id: Ids.transparency,
+              label: "Transparency",
+              state: props.state.transparency
             }
           ]
         }
@@ -75862,12 +75788,13 @@ Averrage Date/Second ${avgDataRatePS} kb
   );
   function useSharedIsolation(adapter) {
     const _adapter = React2.useRef(adapter);
-    const visibility = useStateRef(() => adapter.computeVisibility());
+    const visibility = useStateRef(() => adapter.computeVisibility(), true);
     const autoIsolate2 = useStateRef(false);
     const showPanel = useStateRef(false);
     const showRooms = useStateRef(false);
     const showGhost = useStateRef(false);
-    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity());
+    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity(), true);
+    const transparency = useStateRef(true);
     const onAutoIsolate = useFuncRef(() => {
       if (adapter.hasSelection()) {
         adapter.isolateSelection();
@@ -75892,6 +75819,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     });
     showGhost.useOnChange((v) => adapter.showGhost(v));
     showRooms.useOnChange((v) => adapter.setShowRooms(v));
+    transparency.useOnChange((v) => adapter.enableTransparency(v));
     ghostOpacity.useValidate((next, current) => {
       return next <= 0 ? current : next;
     });
@@ -75905,7 +75833,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       showRooms,
       ghostOpacity,
       onAutoIsolate,
-      onVisibilityChange
+      onVisibilityChange,
+      transparency
     };
   }
   function useWebglIsolation(viewer) {
@@ -75913,6 +75842,29 @@ Averrage Date/Second ${avgDataRatePS} kb
     return useSharedIsolation(adapter);
   }
   function createWebglIsolationAdapter(viewer) {
+    var transparency = true;
+    var ghost2 = false;
+    var rooms = false;
+    function updateMaterials() {
+      viewer.renderer.modelMaterial = !ghost2 && transparency ? void 0 : ghost2 && transparency ? [void 0, viewer.materials.ghost] : !ghost2 && !transparency ? viewer.materials.simple : ghost2 && !transparency ? [viewer.materials.simple, viewer.materials.ghost] : (() => {
+        throw new Error("Unreachable state in isolation materials");
+      })();
+    }
+    function updateVisibility(elements, predicate) {
+      if (elements === "all") {
+        for (let v of viewer.vims) {
+          for (let o of v.getAllElements()) {
+            if (o.type === "Element3D") {
+              o.visible = o.isRoom ? rooms : predicate(o);
+            }
+          }
+        }
+      } else {
+        for (let o of elements) {
+          o.visible = o.isRoom ? rooms : predicate(o);
+        }
+      }
+    }
     return {
       onVisibilityChange: viewer.renderer.onSceneUpdated,
       onSelectionChanged: viewer.selection.onSelectionChanged,
@@ -75921,28 +75873,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       hasVisibleSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => o.visible),
       hasHiddenSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => !o.visible),
       clearSelection: () => viewer.selection.clear(),
-      isolateSelection: () => updateAllVisibility(viewer, (o) => viewer.selection.has(o)),
+      isolateSelection: () => updateVisibility("all", (o) => viewer.selection.has(o)),
       hideSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = false);
+        updateVisibility(viewer.selection.getAll(), (o) => false);
       },
       showSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = true);
+        updateVisibility(viewer.selection.getAll(), (o) => true);
       },
       hideAll: () => {
-        updateAllVisibility(viewer, (o) => false);
+        updateVisibility("all", (o) => false);
       },
       showAll: () => {
-        updateAllVisibility(viewer, (o) => true);
+        updateVisibility("all", (o) => true);
       },
       isolate: (instances) => {
         const set2 = new Set(instances);
-        updateAllVisibility(viewer, (o) => o.instances.some((i2) => set2.has(i2)));
+        updateVisibility("all", (o) => o.instances.some((i2) => set2.has(i2)));
       },
       show: (instances) => {
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = true;
+            o.visible = o.isRoom ? rooms : true;
           }
         }
       },
@@ -75950,29 +75902,30 @@ Averrage Date/Second ${avgDataRatePS} kb
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = false;
+            o.visible = o.isRoom ? rooms : false;
           }
         }
       },
+      enableTransparency: (enable) => {
+        if (transparency !== enable) {
+          transparency = enable;
+          updateMaterials();
+        }
+      },
       showGhost: (show) => {
-        viewer.renderer.modelMaterial = show ? [viewer.materials.simple, viewer.materials.ghost] : void 0;
+        ghost2 = show;
+        updateMaterials();
       },
       getGhostOpacity: () => viewer.materials.ghostOpacity,
       setGhostOpacity: (opacity) => viewer.materials.ghostOpacity = opacity,
-      getShowRooms: () => true,
+      getShowRooms: () => rooms,
       setShowRooms: (show) => {
-        console.log("setShowRooms not implemented");
-      }
-    };
-  }
-  function updateAllVisibility(viewer, predicate) {
-    for (let v of viewer.vims) {
-      for (let o of v.getAllElements()) {
-        if (o.type === "Element3D") {
-          o.visible = predicate(o);
+        if (rooms !== show) {
+          rooms = show;
+          updateVisibility("all", (o) => o.visible);
         }
       }
-    }
+    };
   }
   function getVisibilityState$1(viewer) {
     let all = true;
@@ -75998,6 +75951,572 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (onlySelectionFlag) return "onlySelection";
     return "some";
   }
+  function getDefaultSettings() {
+    return {
+      capacity: {
+        canFollowUrl: true,
+        canGoFullScreen: true,
+        canDownload: true,
+        canReadLocalStorage: true
+      },
+      ui: {
+        panelLogo: true,
+        panelPerformance: false,
+        panelBimTree: true,
+        panelBimInfo: true,
+        panelAxes: true,
+        panelControlBar: true,
+        axesOrthographic: true,
+        axesHome: true,
+        // Control bar - cursors
+        cursorOrbit: true,
+        cursorLookAround: true,
+        cursorPan: true,
+        cursorZoom: true,
+        // Control bar - camera
+        cameraAuto: true,
+        cameraFrameScene: true,
+        cameraFrameSelection: true,
+        // Control bar - tools
+        sectioningEnable: true,
+        sectioningFitToSelection: true,
+        sectioningReset: true,
+        sectioningShow: true,
+        sectioningAuto: true,
+        sectioningSettings: true,
+        measureEnable: true,
+        // Control bar - Visibility
+        visibilityClearSelection: true,
+        visibilityShowAll: true,
+        visibilityToggle: true,
+        visibilityIsolate: true,
+        visibilityAutoIsolate: true,
+        visibilitySettings: true,
+        // Control bar - settings
+        miscProjectInspector: true,
+        miscSettings: true,
+        miscHelp: true,
+        miscMaximise: true
+      }
+    };
+  }
+  function renderSettingsInputBox(settings2, item) {
+    const ref = React2.useRef(null);
+    React2.useEffect(() => {
+      var _a3;
+      ref.current.value = (_a3 = item.getter(settings2.value)) == null ? void 0 : _a3.toString();
+    }, []);
+    const update = (event) => {
+      const str = event.target.value;
+      const n = Number.parseFloat(str);
+      if (Number.isNaN(n)) {
+        event.target.value = item.getter(settings2.value).toString();
+      } else {
+        const value = item.transform(n);
+        event.target.value = value.toString();
+        settings2.update((s) => item.setter(s, value));
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1 ", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
+        item.label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          className: "vim-settings-textbox vc-border vc-rounded-sm vc-border-gray vc-w-14 vc-ml-1 vc-p-1",
+          onBlur: update
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: item.info })
+    ] });
+  }
+  function renderSettingsToggle(settings2, item) {
+    const value = item.getter(settings2.value);
+    if (value === "AlwaysTrue" || value === "AlwaysFalse") return null;
+    const handleChange = () => {
+      const current = item.getter(settings2.value);
+      settings2.update((s) => item.setter(s, !current));
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value,
+          onChange: handleChange,
+          className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium"
+        }
+      ),
+      " ",
+      item.label
+    ] });
+  }
+  function renderSettingsSubtitle(item) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: item.title });
+  }
+  function SettingsPanel(props) {
+    if (!props.visible) return null;
+    function renderItem(settings2, item) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(React2.Fragment, { children: (() => {
+        switch (item.type) {
+          case "subtitle":
+            return renderSettingsSubtitle(item);
+          case "toggle":
+            return renderSettingsToggle(settings2, item);
+          case "box":
+            return renderSettingsInputBox(settings2, item);
+          case "element":
+            return item.element;
+          default:
+            return null;
+        }
+      })() }, item.key);
+    }
+    const customizer = props.settings.customizer.get();
+    const content2 = customizer ? customizer(props.content) : props.content;
+    const sections = buildSections(content2);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-absolute vc-inset-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title vc-mb-2", children: "Settings" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "\r\n        vim-settings\r\n        vc-absolute vc-top-8 vc-left-0 vc-right-0 vc-bottom-0\r\n        vc-overflow-y-auto\r\n        vc-pr-2\r\n        vc-space-y-2\r\n        vc-box-border\r\n      ", children: sections.map((section) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "details",
+        {
+          open: true,
+          className: "\r\n              vim-settings-section\r\n              vc-bg-white\r\n              vc-rounded-md\r\n              vc-shadow-sm\r\n              vc-border\r\n              vc-border-slate-200\r\n              vc-p-2\r\n              vc-space-y-2\r\n            ",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "vim-settings-section-title vc-font-medium vc-text-sm vc-cursor-pointer", children: section.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-settings-section-content vc-mt-2 vc-space-y-2", children: section.items.map(
+              (item) => renderItem(props.settings, item)
+            ) })
+          ]
+        },
+        section.key
+      )) })
+    ] });
+  }
+  function buildSections(items) {
+    const sections = [];
+    let current = null;
+    for (const item of items) {
+      if (item.type === "subtitle") {
+        current = {
+          key: item.key,
+          title: item.title,
+          items: []
+        };
+        sections.push(current);
+      } else {
+        if (!current) {
+          current = {
+            key: "default",
+            title: "",
+            items: []
+          };
+          sections.push(current);
+        }
+        current.items.push(item);
+      }
+    }
+    return sections;
+  }
+  class SettingsPanelKeys {
+  }
+  // === Inputs ===
+  __publicField(SettingsPanelKeys, "InputsSubtitle", "inputs");
+  __publicField(SettingsPanelKeys, "InputsScrollSpeedBox", "scrollSpeed");
+  // === Panels ===
+  __publicField(SettingsPanelKeys, "PanelsSubtitle", "panels");
+  __publicField(SettingsPanelKeys, "PanelsShowLogoToggle", "logo");
+  __publicField(SettingsPanelKeys, "PanelsShowBimTreeToggle", "bimTree");
+  __publicField(SettingsPanelKeys, "PanelsShowBimInfoToggle", "bimInfo");
+  __publicField(SettingsPanelKeys, "PanelsShowAxesPanelToggle", "axesPanel");
+  __publicField(SettingsPanelKeys, "PanelsShowPerformancePanelToggle", "performance");
+  // === Axes ===
+  __publicField(SettingsPanelKeys, "AxesSubtitle", "axes");
+  __publicField(SettingsPanelKeys, "AxesShowOrthographicButtonToggle", "orthographic");
+  __publicField(SettingsPanelKeys, "AxesShowResetCameraButtonToggle", "resetCamera");
+  // === Control Bar ===
+  __publicField(SettingsPanelKeys, "ControlBarSubtitle", "controlBar");
+  __publicField(SettingsPanelKeys, "ControlBarShowControlBarToggle", "controlBarVisible");
+  // --- Control Bar - Cursors ---
+  __publicField(SettingsPanelKeys, "ControlBarCursorsSubtitle", "controlBarCursors");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowOrbitButtonToggle", "orbit");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowLookAroundButtonToggle", "lookAround");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowPanButtonToggle", "pan");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomButtonToggle", "zoom");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomWindowButtonToggle", "zoomWindow");
+  // --- Control Bar - Tools ---
+  __publicField(SettingsPanelKeys, "ControlBarToolsSubtitle", "controlBarTools");
+  __publicField(SettingsPanelKeys, "ControlBarToolsShowMeasuringModeButtonToggle", "measuringMode");
+  // --- Control Bar Camera ---
+  __publicField(SettingsPanelKeys, "ControlBarCameraSubtitle", "settingsPanel.controlBar.Camera");
+  __publicField(SettingsPanelKeys, "ControlBarAutoCamera", "settingsPanel.controlBar.autoCamera");
+  __publicField(SettingsPanelKeys, "ControlBarFrameSelection", "settingsPanel.controlBar.frameSelection");
+  __publicField(SettingsPanelKeys, "ControlBarFrameAll", "settingsPanel.controlBar.frameAll");
+  // --- Control Bar - Sectioning ---
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSubtitle", "settingsPanel.controlBar.sectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningEnable", "settingsPanel.controlBar.enableSectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningFitToSelection", "settingsPanel.controlBar.fitToSelection");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningReset", "settingsPanel.controlBar.reset");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningShow", "settingsPanel.controlBar.show");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningAuto", "settingsPanel.controlBar.auto");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSettings", "settingsPanel.controlBar.settings");
+  // --- Control Bar - Visibility ---
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySubtitle", "controlBar.visibility.subtitle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityClearSelection", "controlBar.visibility.clearSelection");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityShowAll", "controlBar.visibility.showAll");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityToggle", "controlBar.visibility.toggle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityIsolate", "controlBar.visibility.isolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityAutoIsolate", "controlBar.visibility.autoIsolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySettings", "controlBar.visibility.settings");
+  // --- Control Bar - Settings ---
+  __publicField(SettingsPanelKeys, "ControlBarMiscSubtitle", "controlBarSettings");
+  __publicField(SettingsPanelKeys, "ControlBarMiscShowProjectInspectorButtonToggle", "projectInspector");
+  __publicField(SettingsPanelKeys, "ControlBarMiscShowSettingsButtonToggle", "settingsButton");
+  __publicField(SettingsPanelKeys, "ControlBarMiscShowHelpButtonToggle", "help");
+  __publicField(SettingsPanelKeys, "ControlBarMiscShowMaximiseButtonToggle", "maximise");
+  function getControlBarCursorSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarCursorsSubtitle,
+        title: "Control Bar - Cursors"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowOrbitButtonToggle,
+        label: "Orbit",
+        getter: (s) => s.ui.cursorOrbit,
+        setter: (s, v) => s.ui.cursorOrbit = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowLookAroundButtonToggle,
+        label: "Look Around",
+        getter: (s) => s.ui.cursorLookAround,
+        setter: (s, v) => s.ui.cursorLookAround = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowPanButtonToggle,
+        label: "Pan",
+        getter: (s) => s.ui.cursorPan,
+        setter: (s, v) => s.ui.cursorPan = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowZoomButtonToggle,
+        label: "Zoom",
+        getter: (s) => s.ui.cursorZoom,
+        setter: (s, v) => s.ui.cursorZoom = v
+      }
+    ];
+  }
+  function getControlBarCameraSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarCameraSubtitle,
+        title: "Control Bar - Camera"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarAutoCamera,
+        label: "Auto Camera",
+        getter: (s) => s.ui.cameraAuto,
+        setter: (s, v) => s.ui.cameraAuto = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarFrameSelection,
+        label: "Frame Selection",
+        getter: (s) => s.ui.cameraFrameSelection,
+        setter: (s, v) => s.ui.cameraFrameSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarFrameAll,
+        label: "Frame All",
+        getter: (s) => s.ui.cameraFrameScene,
+        setter: (s, v) => s.ui.cameraFrameScene = v
+      }
+    ];
+  }
+  function getControlBarSectionBoxSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarSectioningSubtitle,
+        title: "Control Bar - Sectioning"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningEnable,
+        label: "Enable Sectioning",
+        getter: (s) => s.ui.sectioningEnable,
+        setter: (s, v) => s.ui.sectioningEnable = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningFitToSelection,
+        label: "Fit To Selection",
+        getter: (s) => s.ui.sectioningFitToSelection,
+        setter: (s, v) => s.ui.sectioningFitToSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningReset,
+        label: "Reset",
+        getter: (s) => s.ui.sectioningReset,
+        setter: (s, v) => s.ui.sectioningReset = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningShow,
+        label: "Show",
+        getter: (s) => s.ui.sectioningShow,
+        setter: (s, v) => s.ui.sectioningShow = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningAuto,
+        label: "Auto",
+        getter: (s) => s.ui.sectioningAuto,
+        setter: (s, v) => s.ui.sectioningAuto = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningSettings,
+        label: "Settings",
+        getter: (s) => s.ui.sectioningSettings,
+        setter: (s, v) => s.ui.sectioningSettings = v
+      }
+    ];
+  }
+  function getControlBarVisibilitySettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarVisibilitySubtitle,
+        title: "Control Bar - Visibility"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityClearSelection,
+        label: "Clear Selection",
+        getter: (s) => s.ui.visibilityClearSelection,
+        setter: (s, v) => s.ui.visibilityClearSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityShowAll,
+        label: "Show All",
+        getter: (s) => s.ui.visibilityShowAll,
+        setter: (s, v) => s.ui.visibilityShowAll = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityToggle,
+        label: "Toggle",
+        getter: (s) => s.ui.visibilityToggle,
+        setter: (s, v) => s.ui.visibilityToggle = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityIsolate,
+        label: "Isolate",
+        getter: (s) => s.ui.visibilityIsolate,
+        setter: (s, v) => s.ui.visibilityIsolate = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityAutoIsolate,
+        label: "Auto Isolate",
+        getter: (s) => s.ui.visibilityAutoIsolate,
+        setter: (s, v) => s.ui.visibilityAutoIsolate = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilitySettings,
+        label: "Settings",
+        getter: (s) => s.ui.visibilitySettings,
+        setter: (s, v) => s.ui.visibilitySettings = v
+      }
+    ];
+  }
+  function getControlBarVariousSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarMiscSubtitle,
+        title: "Control Bar - Settings"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowProjectInspectorButtonToggle,
+        label: "Project Inspector",
+        getter: (s) => s.ui.miscProjectInspector,
+        setter: (s, v) => s.ui.miscProjectInspector = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowSettingsButtonToggle,
+        label: "Settings",
+        getter: (s) => s.ui.miscSettings,
+        setter: (s, v) => s.ui.miscSettings = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowHelpButtonToggle,
+        label: "Help",
+        getter: (s) => s.ui.miscHelp,
+        setter: (s, v) => s.ui.miscHelp = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowMaximiseButtonToggle,
+        label: "Maximise",
+        getter: (s) => s.ui.miscMaximise,
+        setter: (s, v) => s.ui.miscMaximise = v
+      }
+    ];
+  }
+  function getPanelsVisibilitySettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.PanelsSubtitle,
+        title: "Panels Visibility"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.PanelsShowLogoToggle,
+        label: "Logo",
+        getter: (s) => s.ui.panelLogo,
+        setter: (s, v) => s.ui.panelLogo = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.PanelsShowBimTreeToggle,
+        label: "Bim Tree",
+        getter: (s) => s.ui.panelBimTree,
+        setter: (s, v) => s.ui.panelBimTree = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.PanelsShowBimInfoToggle,
+        label: "Bim Info",
+        getter: (s) => s.ui.panelBimInfo,
+        setter: (s, v) => s.ui.panelBimInfo = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.PanelsShowAxesPanelToggle,
+        label: "Axes",
+        getter: (s) => s.ui.panelAxes,
+        setter: (s, v) => s.ui.panelAxes = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.PanelsShowPerformancePanelToggle,
+        label: "Performance",
+        getter: (s) => s.ui.panelPerformance,
+        setter: (s, v) => s.ui.panelPerformance = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarShowControlBarToggle,
+        label: "Control Bar",
+        getter: (s) => s.ui.panelControlBar,
+        setter: (s, v) => s.ui.panelControlBar = v
+      }
+    ];
+  }
+  function getInputsSettings(viewer) {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.InputsSubtitle,
+        title: "Inputs"
+      },
+      {
+        type: "box",
+        key: SettingsPanelKeys.InputsScrollSpeedBox,
+        label: "Scroll Speed",
+        info: "[0.1,10]",
+        transform: (n) => MathUtils.clamp(n, 0.1, 10),
+        getter: (_s) => viewer.inputs.scrollSpeed,
+        setter: (_s, v) => {
+          viewer.inputs.scrollSpeed = v;
+        }
+      }
+    ];
+  }
+  function getAxesPanelSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.AxesSubtitle,
+        title: "Axes Panel"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.AxesShowOrthographicButtonToggle,
+        label: "Orthographic Camera",
+        getter: (s) => s.ui.axesOrthographic,
+        setter: (s, v) => s.ui.axesOrthographic = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.AxesShowResetCameraButtonToggle,
+        label: "Reset Camera",
+        getter: (s) => s.ui.axesHome,
+        setter: (s, v) => s.ui.axesHome = v
+      }
+    ];
+  }
+  function getControlBarMeasureSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarToolsSubtitle,
+        title: "Control Bar - Measurement"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarToolsShowMeasuringModeButtonToggle,
+        label: "Enable",
+        getter: (s) => s.ui.measureEnable,
+        setter: (s, v) => s.ui.measureEnable = v
+      }
+    ];
+  }
+  function getWebglSettingsContent(viewer) {
+    return [
+      ...getInputsSettings(viewer),
+      ...getPanelsVisibilitySettings(),
+      ...getAxesPanelSettings(),
+      ...getControlBarCursorSettings(),
+      ...getControlBarCameraSettings(),
+      ...getControlBarVisibilitySettings(),
+      ...getControlBarMeasureSettings(),
+      ...getControlBarSectionBoxSettings(),
+      ...getControlBarVariousSettings()
+    ];
+  }
+  function applyWebglSettings(settings2) {
+    const performance2 = document.getElementsByClassName("vim-performance-div")[0];
+    if (performance2) {
+      if (isTrue(settings2.ui.panelPerformance)) {
+        performance2.classList.remove("vc-hidden");
+      } else {
+        performance2.classList.add("vc-hidden");
+      }
+    }
+  }
   function createViewer$1(container, settings2 = {}, coreSettings = {}) {
     const controllablePromise = new ControllablePromise();
     const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
@@ -76028,7 +76547,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer$1(props) {
-    const settings2 = useSettings(props.viewer, props.settings ?? {});
+    const settings2 = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s));
     const modal = React2.useRef(null);
     const sectionBoxRef = useWebglSectionBox(props.viewer);
     const isolationPanelHandle = React2.useRef(null);
@@ -76038,7 +76557,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     const loader = React2.useRef(new ComponentLoader(props.viewer, modal, settings2.value));
     useViewerInput(props.viewer.inputs, camera2);
     const side = useSideState(
-      isTrue(settings2.value.ui.bimTreePanel) || isTrue(settings2.value.ui.bimInfoPanel),
+      isTrue(settings2.value.ui.panelBimTree) || isTrue(settings2.value.ui.panelBimInfo),
       Math.min(props.container.root.clientWidth * 0.25, 340)
     );
     const [contextMenu2, setcontextMenu] = React2.useState();
@@ -76054,6 +76573,16 @@ Averrage Date/Second ${avgDataRatePS} kb
       side.setHasBim(((_a3 = viewerState.vim.get()) == null ? void 0 : _a3.bim) !== void 0);
     });
     React2.useEffect(() => {
+      sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+        if (show) {
+          isolationRef.showPanel.set(false);
+        }
+      });
+      isolationRef.showPanel.onChange.subscribe((show) => {
+        if (show) {
+          sectionBoxRef.showOffsetPanel.set(false);
+        }
+      });
       if (performanceRef.current) {
         addPerformanceCounter(performanceRef.current);
       }
@@ -76067,7 +76596,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         loader: loader.current,
         isolation: isolationRef,
         camera: camera2,
-        settings: settings2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76113,7 +76646,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         SettingsPanel,
         {
           visible: side.getContent() === "settings",
-          viewer: props.viewer,
+          content: getWebglSettingsContent(props.viewer),
           settings: settings2
         }
       )
@@ -76133,16 +76666,16 @@ Averrage Date/Second ${avgDataRatePS} kb
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { canvas: props.viewer.viewport.canvas }),
-          whenTrue(settings2.value.ui.logo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
+          whenTrue(settings2.value.ui.panelLogo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
               content: controlBar,
-              show: isTrue(settings2.value.ui.controlBar)
+              show: isTrue(settings2.value.ui.panelControlBar)
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel$1, { ref: sectionBoxPanelHandle, state: sectionBoxRef }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolationRef }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolationRef, transparency: true }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             AxesPanelMemo,
             {
@@ -76181,7 +76714,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer: Viewer$1,
-    createViewer: createViewer$1
+    createViewer: createViewer$1,
+    getDefaultSettings
   }, Symbol.toStringTag, { value: "Module" }));
   function getErrorMessage(state) {
     if (state.status !== "error") return void 0;
@@ -76247,11 +76781,13 @@ Averrage Date/Second ${avgDataRatePS} kb
     };
     return useSectionBox(ultraAdapter);
   }
-  function useUltraControlBar(viewer, section, isolation, camera2, customization) {
-    const sectionSectionBox2 = controlBarSectionBox(section, viewer.selection.any());
-    const selection = controlBarSelection(isolation);
-    const sectionCamera2 = controlBarCamera(camera2);
-    let bar = [selection, sectionCamera2, sectionSectionBox2];
+  function useUltraControlBar(viewer, section, isolation, camera2, settings2, side, modal, customization) {
+    let bar = [
+      controlBarCamera(camera2, settings2.ui),
+      controlBarVisibility(isolation, settings2.ui),
+      controlBarSectionBox(section, viewer.selection.any(), settings2.ui),
+      controlBarMiscUltra(modal, side, settings2)
+    ];
     bar = (customization == null ? void 0 : customization(bar)) ?? bar;
     return bar;
   }
@@ -76355,6 +76891,9 @@ Averrage Date/Second ${avgDataRatePS} kb
           }
         }
       },
+      enableTransparency: (enable) => {
+        console.log("enableTransparency not implemented");
+      },
       getGhostOpacity: () => viewer.renderer.ghostOpacity,
       setGhostOpacity: (opacity) => {
         viewer.renderer.ghostOpacity = opacity;
@@ -76396,7 +76935,73 @@ Averrage Date/Second ${avgDataRatePS} kb
   function allButSelection(viewer, vim) {
     return false;
   }
-  function createViewer(container) {
+  function getDefaultUltraSettings() {
+    return {
+      ui: {
+        // panels
+        panelLogo: true,
+        panelControlBar: true,
+        // Control bar - cursors
+        cursorOrbit: true,
+        cursorLookAround: true,
+        cursorPan: true,
+        cursorZoom: true,
+        // Control bar - camera
+        cameraAuto: true,
+        cameraFrameScene: true,
+        cameraFrameSelection: true,
+        // Control bar - tools
+        sectioningEnable: true,
+        sectioningFitToSelection: true,
+        sectioningReset: true,
+        sectioningShow: true,
+        sectioningAuto: true,
+        sectioningSettings: true,
+        // Control bar - Visibility
+        visibilityClearSelection: true,
+        visibilityShowAll: true,
+        visibilityToggle: true,
+        visibilityIsolate: true,
+        visibilityAutoIsolate: true,
+        visibilitySettings: true,
+        // Control bar - misc
+        miscSettings: true,
+        miscHelp: true
+      }
+    };
+  }
+  function getControlBarUltraSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarMiscSubtitle,
+        title: "Control Bar - Settings"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowSettingsButtonToggle,
+        label: "Settings",
+        getter: (s) => s.ui.miscSettings,
+        setter: (s, v) => s.ui.miscSettings = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarMiscShowHelpButtonToggle,
+        label: "Help",
+        getter: (s) => s.ui.miscHelp,
+        setter: (s, v) => s.ui.miscHelp = v
+      }
+    ];
+  }
+  function getUltraSettingsContent(viewer) {
+    return [
+      ...getControlBarCameraSettings(),
+      ...getControlBarVisibilitySettings(),
+      ...getControlBarSectionBoxSettings(),
+      ...getControlBarUltraSettings()
+    ];
+  }
+  function createViewer(container, settings2) {
     const controllablePromise = new ControllablePromise();
     const cmpContainer = container instanceof HTMLElement ? createContainer(container) : container ?? createContainer();
     const core = Viewer$2.createWithCanvas(cmpContainer.gfx);
@@ -76415,6 +77020,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           container: cmpContainer,
           core,
+          settings: settings2,
           onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
         }
       )
@@ -76422,18 +77028,38 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer(props) {
-    const sectionBox2 = useUltraSectionBox(props.core);
-    const camera2 = useUltraCamera(props.core, sectionBox2);
+    const settings2 = useSettings(props.settings ?? {}, getDefaultUltraSettings());
+    const sectionBoxRef = useUltraSectionBox(props.core);
+    const camera2 = useUltraCamera(props.core, sectionBoxRef);
     const isolationPanelHandle = React2.useRef(null);
     const sectionBoxPanelHandle = React2.useRef(null);
     const modalHandle = React2.useRef(null);
     const side = useSideState(true, 400);
     const [_, setSelectState] = React2.useState(0);
     const [controlBarCustom, setControlBarCustom] = React2.useState(() => (c) => c);
-    const isolation = useUltraIsolation(props.core);
-    const controlBar = useUltraControlBar(props.core, sectionBox2, isolation, camera2, (_2) => _2);
+    const isolationRef = useUltraIsolation(props.core);
+    const controlBar = useUltraControlBar(
+      props.core,
+      sectionBoxRef,
+      isolationRef,
+      camera2,
+      settings2.value,
+      side,
+      modalHandle.current,
+      (_2) => _2
+    );
     useViewerInput(props.core.inputs, camera2);
     React2.useEffect(() => {
+      sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+        if (show) {
+          isolationRef.showPanel.set(false);
+        }
+      });
+      isolationRef.showPanel.onChange.subscribe((show) => {
+        if (show) {
+          sectionBoxRef.showOffsetPanel.set(false);
+        }
+      });
       props.core.onStateChanged.subscribe((state) => updateModal(modalHandle, state));
       props.core.selection.onSelectionChanged.subscribe(() => {
         setSelectState((i2) => (i2 + 1) % 2);
@@ -76443,9 +77069,14 @@ Averrage Date/Second ${avgDataRatePS} kb
         get modal() {
           return modalHandle.current;
         },
-        isolation,
-        sectionBox: sectionBox2,
+        isolation: isolationRef,
+        sectionBox: sectionBoxRef,
         camera: camera2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76460,20 +77091,37 @@ Averrage Date/Second ${avgDataRatePS} kb
         load: patchLoad(props.core, modalHandle)
       });
     }, []);
+    const sidePanel = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SettingsPanel,
+      {
+        visible: side.getContent() === "settings",
+        content: getUltraSettingsContent(props.core),
+        settings: settings2
+      }
+    ) });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SidePanelMemo,
+        {
+          container: props.container,
+          viewer: props.core,
+          side,
+          content: sidePanel
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          whenTrue(true, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
+          whenTrue(settings2.value.ui.panelLogo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { canvas: props.core.viewport.canvas }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
               content: controlBarCustom(controlBar),
-              show: true
+              show: isTrue(settings2.value.ui.panelControlBar)
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel$1, { ref: sectionBoxPanelHandle, state: sectionBox2 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolation })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel$1, { ref: sectionBoxPanelHandle, state: sectionBoxRef }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolationRef, transparency: false })
         ] });
       } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ref: modalHandle, canFollowLinks: true }),
@@ -76511,7 +77159,15 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer,
-    createViewer
+    createViewer,
+    getDefaultUltraSettings
+  }, Symbol.toStringTag, { value: "Module" }));
+  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
+  const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
+  const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    supportControls,
+    supportUltra
   }, Symbol.toStringTag, { value: "Module" }));
   const SectionBoxPanel = {
     Ids