vim-web 0.5.0-dev.8 → 0.5.1

package/dist/vim-web.js

@@ -46769,6 +46769,11 @@ let Vim$1 = class Vim {
   * @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.
      */
@@ -48846,19 +48851,38 @@ class InsertableMesh {
     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, i) => {
+    if (Array.isArray(mat)) {
+      mat.forEach((_m, i) => {
         this.mesh.geometry.addGroup(0, Infinity, i);
       });
     }
   }
+  _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) {
@@ -48945,17 +48969,39 @@ class InstancedMesh2 {
     }
     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, i) => {
+    if (Array.isArray(mat)) {
+      mat.forEach((_m, i) => {
         this.mesh.geometry.addGroup(0, Infinity, i);
       });
     }
   }
+  _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);
@@ -50095,6 +50141,9 @@ const _Marker = class _Marker {
   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.
@@ -52581,7 +52630,11 @@ class KeyboardHandler extends BaseInputHandler {
    * @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";
@@ -52619,6 +52672,7 @@ class MouseHandler extends BaseInputHandler {
     __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");
@@ -52627,6 +52681,7 @@ class MouseHandler extends BaseInputHandler {
     __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));
   }
@@ -52654,22 +52709,28 @@ class MouseHandler extends BaseInputHandler {
     (_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;
@@ -52682,12 +52743,23 @@ class MouseHandler extends BaseInputHandler {
     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) {
@@ -52731,17 +52803,46 @@ class CaptureHandler {
     }
   }
 }
+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 {
@@ -52981,23 +53082,15 @@ class InputHandler extends BaseInputHandler {
     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", () => {
@@ -53007,18 +53100,28 @@ class InputHandler extends BaseInputHandler {
       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;
@@ -55316,7 +55419,7 @@ class RenderScene {
   }
   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);
         }
@@ -55491,6 +55594,7 @@ class Selection {
   }
   add(objectOrObjects) {
     if (!this.enabled) return;
+    if (!objectOrObjects) return;
     const objects = this.toArray(objectOrObjects);
     let changed = false;
     for (const obj of objects) {
@@ -55841,7 +55945,7 @@ let Viewport$1 = class Viewport {
   /**
    * Resizes the canvas and updates the camera to match new parent dimensions.
    */
-  ResizeToParent() {
+  resizeToParent() {
     this._onResize.dispatch();
   }
   /**
@@ -55895,6 +55999,9 @@ function createAdapter$2(viewer) {
     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();
     },
@@ -55919,7 +56026,7 @@ function createAdapter$2(viewer) {
     },
     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);
@@ -56930,6 +57037,10 @@ let Renderer$1 = class Renderer {
      * 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);
@@ -57001,11 +57112,14 @@ let Renderer$1 = class Renderer {
     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.
@@ -57141,6 +57255,11 @@ let Renderer$1 = class Renderer {
 };
 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.
      */
@@ -57927,9 +58046,22 @@ class RpcClient {
   get url() {
     return this._socket.url;
   }
-  RPCClearMaterialOverrides() {
+  RPCClearMaterialOverridesForElements(vimIndex, elementIndices) {
+    const marshal = new Marshal();
+    marshal.writeString("RPCClearMaterialOverridesForElements");
+    marshal.writeUInt(vimIndex);
+    marshal.writeArrayOfUInt(elementIndices);
+    this._socket.sendRPC(marshal);
+  }
+  RPCClearMaterialOverridesForScene() {
+    const marshal = new Marshal();
+    marshal.writeString("RPCClearMaterialOverridesForScene");
+    this._socket.sendRPC(marshal);
+  }
+  RPCClearMaterialOverridesForVim(vimIndex) {
     const marshal = new Marshal();
-    marshal.writeString("RPCClearMaterialOverrides");
+    marshal.writeString("RPCClearMaterialOverridesForVim");
+    marshal.writeUInt(vimIndex);
     this._socket.sendRPC(marshal);
   }
   async RPCCreateMaterialInstances(materialHandle, smoothness, colors) {
@@ -58037,9 +58169,9 @@ class RpcClient {
     const ret = returnMarshal.readString();
     return ret;
   }
-  async RPCGetCameraView() {
+  async RPCGetCameraPose() {
     const marshal = new Marshal();
-    marshal.writeString("RPCGetCameraView");
+    marshal.writeString("RPCGetCameraPose");
     const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
     const ret = returnMarshal.readSegment();
     return ret;
@@ -58182,6 +58314,13 @@ class RpcClient {
     marshal.writeBoolean(orbit2);
     this._socket.sendRPC(marshal);
   }
+  RPCSetCameraPose(state, blendTime) {
+    const marshal = new Marshal();
+    marshal.writeString("RPCSetCameraPose");
+    marshal.writeSegment(state);
+    marshal.writeFloat(blendTime);
+    this._socket.sendRPC(marshal);
+  }
   RPCSetCameraPosition(position, blendTime) {
     const marshal = new Marshal();
     marshal.writeString("RPCSetCameraPosition");
@@ -58202,13 +58341,6 @@ class RpcClient {
     marshal.writeFloat(blendTime);
     this._socket.sendRPC(marshal);
   }
-  RPCSetCameraView(state, blendTime) {
-    const marshal = new Marshal();
-    marshal.writeString("RPCSetCameraView");
-    marshal.writeSegment(state);
-    marshal.writeFloat(blendTime);
-    this._socket.sendRPC(marshal);
-  }
   RPCSetGhostColor(ghostColor) {
     const marshal = new Marshal();
     marshal.writeString("RPCSetGhostColor");
@@ -58805,6 +58937,7 @@ class Decoder {
   }
 }
 const CODE_TO_KEYCODE = {
+  "Space": 32,
   "ArrowUp": 38,
   "ArrowDown": 40,
   "ArrowLeft": 37,
@@ -58825,7 +58958,6 @@ function ultraInputAdapter(viewer) {
 function createAdapter$1(viewer) {
   return {
     init: () => {
-      viewer.rpc.RPCSetCameraSpeed(10);
     },
     orbitCamera: (value) => {
     },
@@ -58838,6 +58970,9 @@ function createAdapter$1(viewer) {
     toggleOrthographic: () => {
       console.log("toggleOrthographic. Not supported yet");
     },
+    toggleCameraOrbitMode: () => {
+      viewer.rpc.RPCKeyEvent(CODE_TO_KEYCODE["Space"], true);
+    },
     resetCamera: () => {
       viewer.camera.restoreSavedPosition();
     },
@@ -59278,7 +59413,7 @@ class RpcSafeClient {
    */
   async RPCGetCameraView() {
     return await this.safeCall(
-      () => this.rpc.RPCGetCameraView(),
+      () => this.rpc.RPCGetCameraPose(),
       void 0
     );
   }
@@ -59290,7 +59425,7 @@ class RpcSafeClient {
   RPCSetCameraView(segment, blendTime) {
     if (!Validation.isValidSegment(segment)) return;
     blendTime = Validation.clamp01(blendTime);
-    this.rpc.RPCSetCameraView(segment, blendTime);
+    this.rpc.RPCSetCameraPose(segment, blendTime);
   }
   /**
    * Sets the camera's position without changing its target.
@@ -59672,8 +59807,23 @@ class RpcSafeClient {
   /**
    * Clears all material overrides for the entire scene.
    */
-  RPCClearMaterialOverrides() {
-    this.rpc.RPCClearMaterialOverrides();
+  RPCClearMaterialOverridesForScene() {
+    this.rpc.RPCClearMaterialOverridesForScene();
+  }
+  /**
+   * Clears all material overrides for a specific loaded vim.
+   * @param vimIndex - The index of the loaded vim
+   */
+  RPCClearMaterialOverridesForVim(vimIndex) {
+    this.rpc.RPCClearMaterialOverridesForVim(vimIndex);
+  }
+  /**
+   * Clears all material overrides for specific elements in a loaded vim.
+   * @param vimIndex - The index of the loaded vim
+   * @param vimElementIndices - Array of vim-based element indices to clear overrides for
+   */
+  RPCClearMaterialOverridesForElements(vimIndex, vimElementIndices) {
+    this.rpc.RPCClearMaterialOverridesForElements(vimIndex, vimElementIndices);
   }
   /*******************************************************************************
    * DEBUG AND UTILITY METHODS
@@ -60791,6 +60941,12 @@ class Viewport2 {
       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
    */
@@ -60849,11 +61005,12 @@ class Element3D2 {
    * @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 Vim2 {
   constructor(rpc, color, renderer, source, logger) {
+    __publicField(this, "type", "ultra");
     __publicField(this, "source");
     __publicField(this, "_handle", -1);
     __publicField(this, "_request");
@@ -60867,6 +61024,7 @@ class Vim2 {
     // 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);
@@ -61004,14 +61162,14 @@ class Vim2 {
     }
     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) {
@@ -61032,19 +61190,22 @@ class Vim2 {
     }
     this.applyColor(elements, color);
   }
-  applyColor(elements, color) {
-    for (let i = 0; i < color.length; i++) {
-      const c = color[i];
+  applyColor(elements, colors) {
+    for (let i = 0; i < colors.length; i++) {
+      const color = colors[i];
       const element = elements[i];
-      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();
   }
+  //TODO: Remove and rely on element.color
   clearColor(elements) {
     if (elements === "all") {
       this._elementColors.clear();
@@ -61053,14 +61214,14 @@ class Vim2 {
     }
     if (!this.connected) return;
     if (elements === "all") {
-      this._rpc.RPCClearMaterialOverrides();
+      this._rpc.RPCClearMaterialOverridesForVim(this._handle);
     } else {
-      const ids = new Array(elements.length).fill(MaterialHandles.Invalid);
-      this._rpc.RPCSetMaterialOverridesForElements(this._handle, elements, ids);
+      this._rpc.RPCClearMaterialOverridesForElements(this._handle, elements);
     }
   }
   reapplyColors() {
     this._updatedColors.clear();
+    this._removedColors.clear();
     this._elementColors.forEach((c, n) => this._updatedColors.add(n));
     this.scheduleColorUpdate();
   }
@@ -61077,12 +61238,15 @@ class Vim2 {
     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) {
@@ -61159,6 +61323,11 @@ let Viewer$2 = class Viewer2 {
    * @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");
@@ -61419,80 +61588,72 @@ const index$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   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";
@@ -63585,50 +63746,6 @@ const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   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");
@@ -63683,8 +63800,6 @@ function isFalse(value) {
 }
 const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createSettings,
-  getDefaultSettings,
   getLocalSettings,
   isFalse,
   isTrue,
@@ -67220,7 +67335,7 @@ function whenSomeTrue(value, element) {
   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 = React__default.memo(AxesPanel);
 function AxesPanel(props) {
@@ -67280,15 +67395,15 @@ function AxesPanel(props) {
       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(
@@ -67516,77 +67631,78 @@ function getMeasureState(viewer, cursor) {
 }
 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,
@@ -67594,8 +67710,8 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         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,
@@ -67603,8 +67719,8 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         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,
@@ -67612,8 +67728,8 @@ function controlBarPointer(viewer, camera2, settings2, section) {
         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,
@@ -67623,15 +67739,15 @@ function controlBarPointer(viewer, camera2, settings2, section) {
     ]
   };
 }
-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(),
@@ -67641,40 +67757,57 @@ function controlBarMeasure(settings2, measure$1) {
     ]
   };
 }
-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,
@@ -67683,14 +67816,15 @@ function controlBarSettings(modal, side, settings$1) {
     ]
   };
 }
-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()),
@@ -67698,8 +67832,8 @@ function controlBarCamera(camera2) {
         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,
@@ -67707,8 +67841,8 @@ function controlBarCamera(camera2) {
         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,
@@ -67718,16 +67852,17 @@ function controlBarCamera(camera2) {
     ]
   };
 }
-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,
@@ -67735,16 +67870,17 @@ function controlBarSelection(isolation) {
         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,
@@ -67752,8 +67888,8 @@ function controlBarSelection(isolation) {
         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,
@@ -67761,7 +67897,8 @@ function controlBarSelection(isolation) {
         style: Style.buttonDisableStyle
       },
       {
-        id: Ids$2.buttonIsolateSelection,
+        id: Ids$2.visibilityIsolateSelection,
+        enabled: () => isTrue(settings2.visibilityIsolate),
         tip: "Isolate Selection",
         action: () => adapter.isolateSelection(),
         icon: isolateSelection,
@@ -67769,14 +67906,16 @@ function controlBarSelection(isolation) {
         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,
@@ -67787,28 +67926,31 @@ function controlBarSelection(isolation) {
 }
 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] = useState(0);
@@ -72709,7 +72851,7 @@ function scrollToSelection(div) {
     return;
   }
   if (rectElem.top < rectContainer.top || rectElem.top < 0) {
-    selection.scrollIntoView();
+    selection.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
 }
 const isControlKey = (e) => {
@@ -72914,8 +73056,8 @@ function range(size, startAt = 0) {
 function OptionalBimPanel(props) {
   return whenSomeTrue(
     [
-      props.settings.ui.bimTreePanel,
-      props.settings.ui.bimInfoPanel
+      props.settings.ui.panelBimTree,
+      props.settings.ui.panelBimInfo
     ],
     React__default.createElement(BimPanel, props)
   );
@@ -72928,11 +73070,11 @@ function BimPanel(props) {
   }, [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",
@@ -72966,21 +73108,21 @@ function BimPanel(props) {
     // 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
         }
       ) })
@@ -73820,7 +73962,7 @@ function SidePanel(props) {
     } else {
       props.container.gfx.style.left = "0px";
     }
-    props.viewer.viewport.ResizeToParent();
+    props.viewer.viewport.resizeToParent();
   };
   const getMaxSize = () => {
     return props.container.root.clientWidth * MAX_WIDTH;
@@ -73879,7 +74021,10 @@ function SidePanel(props) {
       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",
@@ -73962,180 +74107,6 @@ function useSideState(useInspector, defaultWidth) {
     [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 = React__default.useRef(null);
-    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 = React__default.memo(MenuToast);
 function MenuToast(props) {
   const [visible2, setVisible] = useState();
@@ -74300,164 +74271,56 @@ function applyWebglBindings(viewer, camera2, isolation, sideState) {
     }
   });
 }
-function useSettings(viewer, value) {
-  const merged = createSettings(value);
-  const [settings2, setSettings] = useState(merged);
-  const onUpdate = 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);
-  };
-  useEffect(() => {
-    applySettings(viewer, settings2);
-  }, []);
-  useEffect(() => {
-    applySettings(viewer, settings2);
-  }, [settings2]);
-  return 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");
-    }
+class MutableState {
+  constructor(initial) {
+    __publicField(this, "_value");
+    __publicField(this, "_onChange", new distExports.SimpleEventDispatcher());
+    this._value = initial;
   }
-}
-function createContainer(element) {
-  let root = element;
-  if (root === void 0) {
-    root = document.createElement("div");
-    document.body.append(root);
-    root.classList.add("vc-inset-0");
+  get() {
+    return this._value;
   }
-  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();
+  set(value) {
+    if (value === this._value) return;
+    this._value = value;
+    this._onChange.dispatch(value);
+  }
+  confirm() {
+  }
+  get onChange() {
+    return this._onChange.asEvent();
+  }
+}
+function useRefresher() {
+  const [refresh, setRefresh] = useState(false);
+  return {
+    refresh: () => {
+      setRefresh(!refresh);
     }
   };
-  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, i) => {
-      const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i];
-      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");
-    __publicField(this, "_onChange", new distExports.SimpleEventDispatcher());
-    this._value = initial;
-  }
-  get() {
-    return this._value;
-  }
-  set(value) {
-    if (value === this._value) return;
-    this._value = value;
-    this._onChange.dispatch(value);
-  }
-  confirm() {
-  }
-  get onChange() {
-    return this._onChange.asEvent();
-  }
-}
-function useRefresher() {
-  const [refresh, setRefresh] = useState(false);
-  return {
-    refresh: () => {
-      setRefresh(!refresh);
+function useStateRef(initialValue, isLazy = false) {
+  const getInitialValue = () => {
+    if (isLazy && typeof initialValue === "function") {
+      return initialValue();
     }
+    return initialValue;
   };
-}
-function useStateRef(initialValue) {
-  const [value, setValue] = useState(initialValue);
+  const [box, setBox] = useState(() => ({
+    current: getInitialValue()
+  }));
   const ref = useRef(void 0);
   if (ref.current === void 0) {
-    if (typeof initialValue === "function") {
-      ref.current = initialValue();
-    } else {
-      ref.current = initialValue;
-    }
+    ref.current = getInitialValue();
   }
   const event = useRef(new distExports.SimpleEventDispatcher());
   const validate = useRef((next, current) => next);
-  const confirm = useRef((value2) => value2);
-  const set3 = (value2) => {
-    const finalValue = validate.current(value2, ref.current);
+  const confirm = useRef((value) => value);
+  const set3 = (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 {
@@ -74483,8 +74346,8 @@ function useStateRef(initialValue) {
      */
     useOnChange(on) {
       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);
           }
@@ -74498,7 +74361,7 @@ function useStateRef(initialValue) {
      * @returns The memoized value.
      */
     useMemo(on, deps) {
-      return useMemo(() => on(value), [...deps || [], value]);
+      return useMemo(() => on(box.current), [...deps || [], box.current]);
     },
     /**
      * Sets a validation function to process any new state value before updating.
@@ -74675,6 +74538,114 @@ const reactUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   useRefresher,
   useStateRef
 }, Symbol.toStringTag, { value: "Module" }));
+function useSettings(value, defaultSettings, applySettings = () => {
+}) {
+  const merged = createSettings(value, defaultSettings);
+  const [settings2, setSettings] = useState(merged);
+  const onUpdate = 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);
+  };
+  useEffect(() => {
+    applySettings(settings2);
+  }, []);
+  useEffect(() => {
+    applySettings(settings2);
+  }, [settings2]);
+  return 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, i) => {
+      const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i];
+      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;
@@ -74816,12 +74787,8 @@ const vcColorLink = "vc-text-[#0590CC]";
 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 });
@@ -74869,31 +74836,18 @@ const errorStyle = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   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)])
   ] });
 }
@@ -74902,136 +74856,110 @@ function serverFileDownloadingError(url, authToken, server) {
     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"
     ])
   ] });
 }
@@ -75263,16 +75191,19 @@ class ComponentLoader {
   }
 }
 function MessageBox(props) {
+  const [minimized, setMinimized] = React__default.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) {
@@ -75282,6 +75213,9 @@ function closeBtn(onClose) {
   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") {
@@ -75640,7 +75574,7 @@ function useSectionBox(adapter) {
     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) => {
@@ -75648,7 +75582,7 @@ function useSectionBox(adapter) {
     visible2.set(v);
     showOffsetPanel.set(false);
     if (v && auto.get()) {
-      sectionSelection2.call();
+      sectionSelection.call();
     } else {
       sectionScene.call();
     }
@@ -75659,7 +75593,7 @@ function useSectionBox(adapter) {
   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) => {
@@ -75669,7 +75603,7 @@ function useSectionBox(adapter) {
     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;
@@ -75689,7 +75623,7 @@ function useSectionBox(adapter) {
     topOffset,
     sideOffset,
     bottomOffset,
-    sectionSelection: sectionSelection2,
+    sectionSelection,
     sectionScene,
     sectionBox: sectionBox2,
     getBox: () => adapter.getBox(),
@@ -75787,7 +75721,8 @@ function useViewerInput(handler, camera2) {
 }
 const Ids = {
   showGhost: "isolationPanel.showGhost",
-  ghostOpacity: "isolationPanel.ghostOpacity"
+  ghostOpacity: "isolationPanel.ghostOpacity",
+  transparency: "isolationPanel.transparency"
 };
 const IsolationPanel$1 = forwardRef(
   (props, ref) => {
@@ -75799,8 +75734,20 @@ const IsolationPanel$1 = forwardRef(
         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,
@@ -75810,6 +75757,13 @@ const IsolationPanel$1 = forwardRef(
             min: 0,
             max: 1,
             step: 0.05
+          },
+          {
+            type: "bool",
+            visible: () => props.transparency,
+            id: Ids.transparency,
+            label: "Transparency",
+            state: props.state.transparency
           }
         ]
       }
@@ -75818,12 +75772,13 @@ const IsolationPanel$1 = forwardRef(
 );
 function useSharedIsolation(adapter) {
   const _adapter = 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();
@@ -75848,6 +75803,7 @@ function useSharedIsolation(adapter) {
   });
   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;
   });
@@ -75861,7 +75817,8 @@ function useSharedIsolation(adapter) {
     showRooms,
     ghostOpacity,
     onAutoIsolate,
-    onVisibilityChange
+    onVisibilityChange,
+    transparency
   };
 }
 function useWebglIsolation(viewer) {
@@ -75869,6 +75826,29 @@ function useWebglIsolation(viewer) {
   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,
@@ -75877,28 +75857,28 @@ function createWebglIsolationAdapter(viewer) {
     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 set3 = new Set(instances);
-      updateAllVisibility(viewer, (o) => o.instances.some((i) => set3.has(i)));
+      updateVisibility("all", (o) => o.instances.some((i) => set3.has(i)));
     },
     show: (instances) => {
       for (let i of instances) {
         for (let v of viewer.vims) {
           const o = v.getElement(i);
-          o.visible = true;
+          o.visible = o.isRoom ? rooms : true;
         }
       }
     },
@@ -75906,29 +75886,30 @@ function createWebglIsolationAdapter(viewer) {
       for (let i of instances) {
         for (let v of viewer.vims) {
           const o = v.getElement(i);
-          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;
@@ -75954,6 +75935,572 @@ function getVisibilityState$1(viewer) {
   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 = React__default.useRef(null);
+  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(React__default.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();
@@ -75984,7 +76531,7 @@ function createViewer$1(container, settings2 = {}, coreSettings = {}) {
   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 = useRef(null);
   const sectionBoxRef = useWebglSectionBox(props.viewer);
   const isolationPanelHandle = useRef(null);
@@ -75994,7 +76541,7 @@ function Viewer$1(props) {
   const loader = 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] = useState();
@@ -76010,6 +76557,16 @@ function Viewer$1(props) {
     side.setHasBim(((_a3 = viewerState.vim.get()) == null ? void 0 : _a3.bim) !== void 0);
   });
   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);
     }
@@ -76023,7 +76580,11 @@ function Viewer$1(props) {
       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;
       },
@@ -76069,7 +76630,7 @@ function Viewer$1(props) {
       SettingsPanel,
       {
         visible: side.getContent() === "settings",
-        viewer: props.viewer,
+        content: getWebglSettingsContent(props.viewer),
         settings: settings2
       }
     )
@@ -76089,16 +76650,16 @@ function Viewer$1(props) {
     /* @__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,
           {
@@ -76137,7 +76698,8 @@ function Viewer$1(props) {
 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;
@@ -76203,11 +76765,13 @@ function useUltraSectionBox(viewer) {
   };
   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;
 }
@@ -76311,6 +76875,9 @@ function createAdapter(viewer) {
         }
       }
     },
+    enableTransparency: (enable) => {
+      console.log("enableTransparency not implemented");
+    },
     getGhostOpacity: () => viewer.renderer.ghostOpacity,
     setGhostOpacity: (opacity) => {
       viewer.renderer.ghostOpacity = opacity;
@@ -76352,7 +76919,73 @@ function onlySelection(viewer, vim) {
 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);
@@ -76371,6 +77004,7 @@ function createViewer(container) {
       {
         container: cmpContainer,
         core,
+        settings: settings2,
         onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
       }
     )
@@ -76378,18 +77012,38 @@ function createViewer(container) {
   return controllablePromise.promise;
 }
 function Viewer3(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 = useRef(null);
   const sectionBoxPanelHandle = useRef(null);
   const modalHandle = useRef(null);
   const side = useSideState(true, 400);
   const [_, setSelectState] = useState(0);
   const [controlBarCustom, setControlBarCustom] = 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);
   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((i) => (i + 1) % 2);
@@ -76399,9 +77053,14 @@ function Viewer3(props) {
       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;
       },
@@ -76416,20 +77075,37 @@ function Viewer3(props) {
       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 }),
@@ -76467,7 +77143,15 @@ function patchLoad(viewer, modal) {
 const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Viewer: Viewer3,
-  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