vim-web 0.5.0-dev.2 → 0.5.0-dev.21

package/dist/vim-web.iife.js

@@ -46785,6 +46785,11 @@ void main() {
     * @param {boolean} isLegacy - Indicates whether the Vim object uses a legacy loading pipeline.
     */
     constructor(header, document2, g3d2, scene, settings2, map, builder, source, format) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "webgl");
       /**
        * Indicates whether the vim was opened from a vim or vimx file.
        */
@@ -48862,19 +48867,38 @@ void main() {
       return new InsertableSubmesh(this, index2);
     }
     /**
-     * Overrides mesh material, set to undefine to restore initial material.
-     */
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
   }
   class InstancedSubmesh {
     constructor(mesh, index2) {
@@ -48961,17 +48985,39 @@ void main() {
       }
       return submeshes;
     }
+    /**
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
     computeBoundingBoxes() {
       this.mesh.geometry.computeBoundingBox();
       const boxes = new Array(this.mesh.count);
@@ -50111,6 +50157,9 @@ void main() {
     get index() {
       return this._submesh.index;
     }
+    get isRoom() {
+      return false;
+    }
     /**
      * Updates the underlying submesh and rebinds all attributes to the new mesh.
      * @param mesh - The new submesh to bind to this marker.
@@ -50841,6 +50890,164 @@ void main() {
     }
     return true;
   }
+  class Segment {
+    constructor(origin = new Vector3(), target = new Vector3()) {
+      __publicField(this, "origin");
+      __publicField(this, "target");
+      this.origin = origin;
+      this.target = target;
+    }
+    static fromArray(array) {
+      return new Segment(
+        new Vector3(array[0], array[1], array[2]),
+        new Vector3(array[3], array[4], array[5])
+      );
+    }
+    toArray() {
+      return [this.origin.x, this.origin.y, this.origin.z, this.target.x, this.target.y, this.target.z];
+    }
+    isValid() {
+      return !this.origin.equals(this.target);
+    }
+    equals(segment) {
+      return this.origin.equals(segment.origin) && this.target.equals(segment.target);
+    }
+  }
+  class RGBA {
+    constructor(r, g, b, a = 1) {
+      __publicField(this, "r");
+      __publicField(this, "g");
+      __publicField(this, "b");
+      __publicField(this, "a");
+      this.r = r;
+      this.g = g;
+      this.b = b;
+      this.a = a;
+    }
+    static fromThree(color, opacity = 1) {
+      return new RGBA(color.r, color.g, color.b, opacity);
+    }
+    toThree() {
+      return new Color(this.r, this.g, this.b);
+    }
+    clone() {
+      return new RGBA(this.r, this.g, this.b, this.a);
+    }
+    isValid() {
+      return Number.isFinite(this.r) && Number.isFinite(this.g) && Number.isFinite(this.b) && Number.isFinite(this.a);
+    }
+    equals(color) {
+      return this.r === color.r && this.g === color.g && this.b === color.b && this.a === color.a;
+    }
+    static fromString(str) {
+      str = str.trim();
+      if (str.startsWith("(")) {
+        str = str.substring(1);
+      }
+      if (str.endsWith(")")) {
+        str = str.substring(0, str.length - 1);
+      }
+      const parts = str.split(",");
+      if (parts.length < 3 || parts.length > 4) {
+        throw new Error("Invalid color string format. Expected 3 or 4 components.");
+      }
+      const r = parseFloat(parts[0]);
+      const g = parseFloat(parts[1]);
+      const b = parseFloat(parts[2]);
+      const a = parts.length === 4 ? parseFloat(parts[3]) : 1;
+      if ([r, g, b, a].some((n) => isNaN(n))) {
+        throw new Error("Invalid number in color string.");
+      }
+      return new RGBA(r, g, b, a);
+    }
+  }
+  class RGB {
+    constructor(r, g, b) {
+      __publicField(this, "r");
+      __publicField(this, "g");
+      __publicField(this, "b");
+      this.r = r;
+      this.g = g;
+      this.b = b;
+    }
+  }
+  class RGBA32 {
+    constructor(hex) {
+      __publicField(this, "hex");
+      if (!Number.isInteger(hex) || hex < 0 || hex > 4294967295) {
+        throw new Error("Invalid value: must be a 32-bit unsigned integer");
+      }
+      this.hex = hex;
+    }
+    static fromThree(color, opacity = 1) {
+      return this.fromFloats(color.r, color.g, color.b, opacity);
+    }
+    static fromInts(r, g, b, a = 1) {
+      if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 255) {
+        throw new Error("Each RGBA component must be in the range 0-255.");
+      }
+      const hex = r * 2 ** 24 + g * 2 ** 16 + b * 2 ** 8 + a;
+      return new RGBA32(hex);
+    }
+    static fromFloats(r, g, b, a = 1) {
+      return this.fromInts(
+        remap(r, 255),
+        remap(g, 255),
+        remap(b, 255),
+        remap(a, 255)
+      );
+    }
+    static fromString(str) {
+      if (str.startsWith("#")) {
+        str = str.slice(1);
+      }
+      if (str.length === 3 || str.length === 4) {
+        str = str.split("").map((c) => c + c).join("");
+      }
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      let a = 255;
+      if (str.length === 6 || str.length === 8) {
+        r = parseInt(str.slice(0, 2), 16);
+        g = parseInt(str.slice(2, 4), 16);
+        b = parseInt(str.slice(4, 6), 16);
+        if (str.length === 8) {
+          a = parseInt(str.slice(6, 8), 16);
+        }
+      } else {
+        throw new Error("Invalid color string format");
+      }
+      if ([r, g, b, a].some((v) => isNaN(v))) {
+        throw new Error("Invalid color string format");
+      }
+      return this.fromInts(r, g, b, a);
+    }
+    /**
+     * The red component of the color in the range [0-255].
+     */
+    get r() {
+      return this.hex >>> 24;
+    }
+    /**
+     * The green component of the color in the range [0-255].
+     */
+    get g() {
+      return this.hex >>> 16 & 255;
+    }
+    /**
+     * The blue component of the color in the range [0-255].
+     */
+    get b() {
+      return this.hex >>> 8 & 255;
+    }
+    /**
+     * The alpha component of the color in the range [0-255].
+     */
+    get a() {
+      return this.hex & 255;
+    }
+  }
   class Validation {
     //= ===========================================================================
     // BASIC NUMBER VALIDATIONS
@@ -50892,16 +51099,16 @@ void main() {
     //= ===========================================================================
     // HANDLE VALIDATIONS
     //= ===========================================================================
-    static isComponentHandle(handle) {
-      if (!this.isPositiveInteger(handle)) return false;
-      if (handle === INVALID_HANDLE) {
-        console.warn(`Invalid handle ${handle}. Aborting operation.`);
+    static isIndex(index2) {
+      if (!this.isPositiveInteger(index2)) return false;
+      if (index2 === INVALID_HANDLE) {
+        console.warn(`Invalid index ${index2}. Aborting operation.`);
         return false;
       }
       return true;
     }
-    static areComponentHandles(handles) {
-      return handles.every((h) => this.isComponentHandle(h));
+    static areIndices(indices) {
+      return indices.every((h) => this.isIndex(h));
     }
     static isMaterialHandle(handle) {
       if (!materialHandles.includes(handle)) {
@@ -50950,23 +51157,6 @@ void main() {
       return true;
     }
     //= ===========================================================================
-    // COLOR VALIDATIONS
-    //= ===========================================================================
-    static isRelativeRGBA(color) {
-      if (color.r < 0 || color.r > 1 || color.g < 0 || color.g > 1 || color.b < 0 || color.b > 1) {
-        console.warn("Invalid value: must be a relative color (0-1, 0-1, 0-1)");
-        return false;
-      }
-      return true;
-    }
-    static isRelativeRGB(color) {
-      if (color.r < 0 || color.r > 1 || color.g < 0 || color.g > 1 || color.b < 0 || color.b > 1) {
-        console.warn("Invalid value: must be a relative color (0-1, 0-1, 0-1)");
-        return false;
-      }
-      return true;
-    }
-    //= ===========================================================================
     // STRING AND URL VALIDATIONS
     //= ===========================================================================
     static isNonEmptyString(value) {
@@ -51053,6 +51243,13 @@ void main() {
       }
       return value;
     }
+    static clampColor01(value) {
+      return new Color(
+        this.clamp01(value.r),
+        this.clamp01(value.g),
+        this.clamp01(value.b)
+      );
+    }
     static clampRGBA01(value) {
       return new RGBA(
         this.clamp01(value.r),
@@ -52449,7 +52646,11 @@ void main() {
      * @param handler Callback invoked on key up.
      */
     registerKeyUp(code, mode, handler) {
-      this.registerKey(this.keyUpHandlers, code, mode, handler);
+      if (Array.isArray(code)) {
+        code.forEach((c) => this.registerKey(this.keyUpHandlers, c, mode, handler));
+      } else {
+        this.registerKey(this.keyUpHandlers, code, mode, handler);
+      }
     }
     registerKey(map, code, mode, callback) {
       mode = map.has(code) ? mode : "replace";
@@ -52495,6 +52696,7 @@ void main() {
       __publicField(this, "onClick");
       __publicField(this, "onDoubleClick");
       __publicField(this, "onWheel");
+      __publicField(this, "onContextMenu");
       this._capture = new CaptureHandler(canvas);
       this._dragHandler = new DragHandler((delta, button) => this.onDrag(delta, button));
     }
@@ -52536,6 +52738,7 @@ void main() {
         this.handleDoubleClick(event);
       } else {
         this.handleMouseClick(event);
+        this.handleContextMenu(event);
       }
       event.preventDefault();
     }
@@ -52550,6 +52753,16 @@ void main() {
       const modif = event.getModifierState("Shift") || event.getModifierState("Control");
       (_a3 = this.onClick) == null ? void 0 : _a3.call(this, pos, modif);
     }
+    async handleContextMenu(event) {
+      var _a3;
+      if (event.pointerType !== "mouse") return;
+      if (event.button !== 2) return;
+      const pos = this.relativePosition(event);
+      if (!almostEqual(this._lastMouseDownPosition, pos, 0.01)) {
+        return;
+      }
+      (_a3 = this.onContextMenu) == null ? void 0 : _a3.call(this, new Vector2(event.clientX, event.clientY));
+    }
     handlePointerMove(event) {
       var _a3;
       if (event.pointerType !== "mouse") return;
@@ -52603,13 +52816,20 @@ void main() {
     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
+    // Max pixel distance between clicks
     checkForDoubleClick(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 {
@@ -52849,23 +53069,15 @@ void main() {
       this._moveSpeed = settings2.moveSpeed ?? 1;
       this.rotateSpeed = settings2.rotateSpeed ?? 1;
       this.orbitSpeed = settings2.orbitSpeed ?? 1;
-      this.reg(document, "contextmenu", (e) => {
-        this._onContextMenu.dispatch(new Vector2(e.clientX, e.clientY));
-        e.preventDefault();
-      });
       this.keyboard = new KeyboardHandler(canvas);
       this.mouse = new MouseHandler(canvas);
       this.touch = new TouchHandler(canvas);
       this.keyboard.onKeyDown = (key) => adapter.keyDown(key);
       this.keyboard.onKeyUp = (key) => adapter.keyUp(key);
       this.keyboard.registerKeyUp("KeyP", "replace", () => adapter.toggleOrthographic());
-      this.keyboard.registerKeyUp("Equal", "replace", () => this.moveSpeed++);
-      this.keyboard.registerKeyUp("Minus", "replace", () => this.moveSpeed--);
-      this.keyboard.registerKeyUp("Space", "replace", () => {
-        this._pointerActive = this._pointerActive === "orbit" ? "look" : "orbit";
-        this._pointerFallback = this._pointerActive;
-        this._onPointerModeChanged.dispatch();
-      });
+      this.keyboard.registerKeyUp(["Equal", "NumpadAdd"], "replace", () => this.moveSpeed++);
+      this.keyboard.registerKeyUp(["Minus", "NumpadSubtract"], "replace", () => this.moveSpeed--);
+      this.keyboard.registerKeyUp("Space", "replace", () => adapter.toggleCameraOrbitMode());
       this.keyboard.registerKeyUp("Home", "replace", () => adapter.resetCamera());
       this.keyboard.registerKeyUp("Escape", "replace", () => adapter.clearSelection());
       this.keyboard.registerKeyUp("KeyF", "replace", () => {
@@ -52875,18 +53087,28 @@ void main() {
         const mul = Math.pow(1.25, this._moveSpeed);
         adapter.moveCamera(value.multiplyScalar(mul));
       };
+      this.mouse.onContextMenu = (pos) => this._onContextMenu.dispatch(pos);
       this.mouse.onButtonDown = adapter.mouseDown;
       this.mouse.onMouseMove = adapter.mouseMove;
-      this.mouse.onButtonUp = adapter.mouseUp;
+      this.mouse.onButtonUp = (pos, button) => {
+        this.pointerOverride = void 0;
+        adapter.mouseUp(pos, button);
+      };
       this.mouse.onDrag = (delta, button) => {
         if (button === 0) {
-          if (this._pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
-          if (this._pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
-          if (this._pointerActive === "pan") adapter.panCamera(delta);
-          if (this._pointerActive === "zoom") adapter.dollyCamera(delta);
+          if (this.pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
+          if (this.pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
+          if (this.pointerActive === "pan") adapter.panCamera(delta);
+          if (this.pointerActive === "zoom") adapter.dollyCamera(delta);
+        }
+        if (button === 2) {
+          this.pointerOverride = "look";
+          adapter.rotateCamera(toRotation(delta, 1));
+        }
+        if (button === 1) {
+          this.pointerOverride = "pan";
+          adapter.panCamera(delta);
         }
-        if (button === 2) adapter.rotateCamera(toRotation(delta, 1));
-        if (button === 1) adapter.panCamera(delta);
       };
       this.mouse.onClick = (pos, modif) => adapter.selectAtPointer(pos, modif);
       this.mouse.onDoubleClick = adapter.frameAtPointer;
@@ -55709,7 +55931,7 @@ void main() {
     /**
      * Resizes the canvas and updates the camera to match new parent dimensions.
      */
-    ResizeToParent() {
+    resizeToParent() {
       this._onResize.dispatch();
     }
     /**
@@ -55763,6 +55985,9 @@ void main() {
       toggleOrthographic: () => {
         viewer.camera.orthographic = !viewer.camera.orthographic;
       },
+      toggleCameraOrbitMode: () => {
+        viewer.inputs.pointerActive = viewer.inputs.pointerActive === PointerMode$1.ORBIT ? PointerMode$1.LOOK : PointerMode$1.ORBIT;
+      },
       resetCamera: () => {
         viewer.camera.lerp(0.75).reset();
       },
@@ -55787,7 +56012,7 @@ void main() {
       },
       frameAtPointer: async (pos) => {
         const result = await viewer.raycaster.raycastFromScreen(pos);
-        viewer.camera.lerp(0.75).frame(result.object);
+        viewer.camera.lerp(0.75).frame(result.object ?? "all");
       },
       zoom: (value) => {
         viewer.camera.lerp(0.75).zoom(value);
@@ -56798,6 +57023,10 @@ void main() {
        * Indicates whether the scene should be re-rendered on change only.
        */
       __publicField(this, "onDemand");
+      /**
+       * The material that will be used when setting model material to undefined.
+       */
+      __publicField(this, "defaultModelMaterial");
       __publicField(this, "fitViewport", () => {
         const size = this._viewport.getParentSize();
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -56869,11 +57098,14 @@ void main() {
       this._scene.threeScene.background = color;
       this.needsUpdate = true;
     }
+    /**
+     * Sets the material used to render models. If set to undefined, the default model or mesh material is used.
+     */
     get modelMaterial() {
       return this._scene.modelMaterial;
     }
     set modelMaterial(material) {
-      this._scene.modelMaterial = material;
+      this._scene.modelMaterial = material ?? this.defaultModelMaterial;
     }
     /**
      * Signal dispatched at the end of each frame if the scene was updated, such as visibility changes.
@@ -57009,6 +57241,11 @@ void main() {
   };
   let Viewer$3 = class Viewer {
     constructor(settings2) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "webgl");
       /**
        * The settings configuration used by the viewer.
        */
@@ -57333,180 +57570,31 @@ void main() {
     getDefaultVimSettings,
     request: requestVim
   }, Symbol.toStringTag, { value: "Module" }));
-  class Segment {
-    constructor(origin = new Vector3(), target = new Vector3()) {
-      __publicField(this, "origin");
-      __publicField(this, "target");
-      this.origin = origin;
-      this.target = target;
-    }
-    static fromArray(array) {
-      return new Segment(
-        new Vector3(array[0], array[1], array[2]),
-        new Vector3(array[3], array[4], array[5])
-      );
+  class Camera {
+    /** 
+     * Creates a new Camera instance
+     * @param rpc - RPC client for camera communication
+     */
+    constructor(rpc) {
+      __publicField(this, "_rpc");
+      __publicField(this, "_lastPosition");
+      __publicField(this, "_defaultBlendTime", 0.5);
+      __publicField(this, "_savedPosition");
+      this._rpc = rpc;
     }
-    toArray() {
-      return [this.origin.x, this.origin.y, this.origin.z, this.target.x, this.target.y, this.target.z];
+    /**
+     * Saves the current camera position for later restoration
+     * @param segment - Optional segment to save as the camera position
+     */
+    async save(segment) {
+      this._savedPosition = segment ?? await this._rpc.RPCGetCameraView();
     }
-    isValid() {
-      return !this.origin.equals(this.target);
-    }
-    equals(segment) {
-      return this.origin.equals(segment.origin) && this.target.equals(segment.target);
-    }
-  }
-  class RGBA {
-    constructor(r, g, b, a = 1) {
-      __publicField(this, "r");
-      __publicField(this, "g");
-      __publicField(this, "b");
-      __publicField(this, "a");
-      this.r = r;
-      this.g = g;
-      this.b = b;
-      this.a = a;
-    }
-    clone() {
-      return new RGBA(this.r, this.g, this.b, this.a);
-    }
-    isValid() {
-      return Number.isFinite(this.r) && Number.isFinite(this.g) && Number.isFinite(this.b) && Number.isFinite(this.a);
-    }
-    equals(color) {
-      return this.r === color.r && this.g === color.g && this.b === color.b && this.a === color.a;
-    }
-    static fromString(str) {
-      str = str.trim();
-      if (str.startsWith("(")) {
-        str = str.substring(1);
-      }
-      if (str.endsWith(")")) {
-        str = str.substring(0, str.length - 1);
-      }
-      const parts = str.split(",");
-      if (parts.length < 3 || parts.length > 4) {
-        throw new Error("Invalid color string format. Expected 3 or 4 components.");
-      }
-      const r = parseFloat(parts[0]);
-      const g = parseFloat(parts[1]);
-      const b = parseFloat(parts[2]);
-      const a = parts.length === 4 ? parseFloat(parts[3]) : 1;
-      if ([r, g, b, a].some((n) => isNaN(n))) {
-        throw new Error("Invalid number in color string.");
-      }
-      return new RGBA(r, g, b, a);
-    }
-  }
-  class RGB {
-    constructor(r, g, b) {
-      __publicField(this, "r");
-      __publicField(this, "g");
-      __publicField(this, "b");
-      this.r = r;
-      this.g = g;
-      this.b = b;
-    }
-  }
-  class RGBA32 {
-    constructor(hex) {
-      __publicField(this, "hex");
-      if (!Number.isInteger(hex) || hex < 0 || hex > 4294967295) {
-        throw new Error("Invalid value: must be a 32-bit unsigned integer");
-      }
-      this.hex = hex;
-    }
-    static fromInts(r, g, b, a = 1) {
-      if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 255) {
-        throw new Error("Each RGBA component must be in the range 0-255.");
-      }
-      const hex = r * 2 ** 24 + g * 2 ** 16 + b * 2 ** 8 + a;
-      return new RGBA32(hex);
-    }
-    static fromFloats(r, g, b, a = 1) {
-      return this.fromInts(
-        remap(r, 255),
-        remap(g, 255),
-        remap(b, 255),
-        remap(a, 255)
-      );
-    }
-    static fromString(str) {
-      if (str.startsWith("#")) {
-        str = str.slice(1);
-      }
-      if (str.length === 3 || str.length === 4) {
-        str = str.split("").map((c) => c + c).join("");
-      }
-      let r = 0;
-      let g = 0;
-      let b = 0;
-      let a = 255;
-      if (str.length === 6 || str.length === 8) {
-        r = parseInt(str.slice(0, 2), 16);
-        g = parseInt(str.slice(2, 4), 16);
-        b = parseInt(str.slice(4, 6), 16);
-        if (str.length === 8) {
-          a = parseInt(str.slice(6, 8), 16);
-        }
-      } else {
-        throw new Error("Invalid color string format");
-      }
-      if ([r, g, b, a].some((v) => isNaN(v))) {
-        throw new Error("Invalid color string format");
-      }
-      return this.fromInts(r, g, b, a);
-    }
-    /**
-     * The red component of the color in the range [0-255].
-     */
-    get r() {
-      return this.hex >>> 24;
-    }
-    /**
-     * The green component of the color in the range [0-255].
-     */
-    get g() {
-      return this.hex >>> 16 & 255;
-    }
-    /**
-     * The blue component of the color in the range [0-255].
-     */
-    get b() {
-      return this.hex >>> 8 & 255;
-    }
-    /**
-     * The alpha component of the color in the range [0-255].
-     */
-    get a() {
-      return this.hex & 255;
-    }
-  }
-  class Camera {
-    /** 
-     * Creates a new Camera instance
-     * @param rpc - RPC client for camera communication
-     */
-    constructor(rpc) {
-      __publicField(this, "_rpc");
-      __publicField(this, "_lastPosition");
-      __publicField(this, "_defaultBlendTime", 0.5);
-      __publicField(this, "_savedPosition");
-      this._rpc = rpc;
-    }
-    /**
-     * Saves the current camera position for later restoration
-     * @param segment - Optional segment to save as the camera position
-     */
-    async save(segment) {
-      this._savedPosition = segment ?? await this._rpc.RPCGetCameraView();
-    }
-    /**
-     * Resets the camera to the last saved position
-     */
-    restoreSavedPosition(blendTime = this._defaultBlendTime) {
-      if (!this._savedPosition) return;
-      this._rpc.RPCSetCameraView(this._savedPosition, blendTime);
+    /**
+     * Resets the camera to the last saved position
+     */
+    restoreSavedPosition(blendTime = this._defaultBlendTime) {
+      if (!this._savedPosition) return;
+      this._rpc.RPCSetCameraView(this._savedPosition, blendTime);
     }
     /**
      * Restores the camera to its last tracked position
@@ -57545,7 +57633,7 @@ void main() {
      * @returns Promise that resolves when the framing animation is complete
      */
     async frameAll(blendTime = this._defaultBlendTime) {
-      const segment = await this._rpc.RPCFrameAll(blendTime);
+      const segment = await this._rpc.RPCFrameScene(blendTime);
       this._savedPosition = this._savedPosition ?? segment;
       return segment;
     }
@@ -57562,16 +57650,16 @@ void main() {
     /**
      * Frames specific nodes of a Vim model in the camera view
      * @param vim - The Vim model containing the nodes to frame
-     * @param nodes - Array of node indices to frame, or 'all' to frame the entire model
+     * @param elements - Array of element indices to frame, or 'all' to frame the entire model
      * @param blendTime - Duration of the camera animation in seconds (defaults to 0.5)
      * @returns Promise that resolves when the framing animation is complete
      */
-    async frameVim(vim, nodes, blendTime = this._defaultBlendTime) {
+    async frameVim(vim, elements, blendTime = this._defaultBlendTime) {
       let segment;
-      if (nodes === "all") {
+      if (elements === "all") {
         segment = await this._rpc.RPCFrameVim(vim.handle, blendTime);
       } else {
-        segment = await this._rpc.RPCFrameElements(vim.handle, nodes, blendTime);
+        segment = await this._rpc.RPCFrameElements(vim.handle, elements, blendTime);
       }
       this._savedPosition = this._savedPosition ?? segment;
       return segment;
@@ -57654,9 +57742,9 @@ void main() {
     // -------------------- HitCheckResult -------------------
     writeHitCheckResult(data2) {
       this.ensureCapacity(4 + 4 + 4 + 4 * 3 + 4 * 3);
-      this.writeUInt(data2.vimHandle);
-      this.writeUInt(data2.nodeIndex);
-      this.writeUInt(data2.elementIndex);
+      this.writeUInt(data2.vimIndex);
+      this.writeUInt(data2.vimElementIndex);
+      this.writeUInt(data2.sceneElementIndex);
       this.writeVector3(data2.worldPosition);
       this.writeVector3(data2.worldNormal);
     }
@@ -57804,15 +57892,15 @@ void main() {
       return textDecoder.decode(stringData);
     }
     readHitCheckResult() {
-      const vimHandle = this.readUInt();
-      const nodeIndex = this.readUInt();
-      const mElementIndex = this.readUInt();
+      const vimIndex = this.readUInt();
+      const vimElementIndex = this.readUInt();
+      const sceneElementIndex = this.readUInt();
       const worldPosition = this.readVector3();
       const worldNormal = this.readVector3();
       return {
-        vimHandle,
-        nodeIndex,
-        elementIndex: mElementIndex,
+        vimIndex,
+        vimElementIndex,
+        sceneElementIndex,
         worldPosition,
         worldNormal
       };
@@ -57944,10 +58032,22 @@ void main() {
     get url() {
       return this._socket.url;
     }
-    RPCClearMaterialOverrides(componentHandle) {
+    RPCClearMaterialOverridesForElements(vimIndex, elementIndices) {
       const marshal = new Marshal();
-      marshal.writeString("RPCClearMaterialOverrides");
-      marshal.writeUInt(componentHandle);
+      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("RPCClearMaterialOverridesForVim");
+      marshal.writeUInt(vimIndex);
       this._socket.sendRPC(marshal);
     }
     async RPCCreateMaterialInstances(materialHandle, smoothness, colors) {
@@ -57970,10 +58070,10 @@ void main() {
       const ret = returnMarshal.readUInt();
       return ret;
     }
-    RPCDestroyMaterialInstances(materialInstanceHandle) {
+    RPCDestroyMaterialInstances(materialInstanceHandles) {
       const marshal = new Marshal();
       marshal.writeString("RPCDestroyMaterialInstances");
-      marshal.writeArrayOfUInt(materialInstanceHandle);
+      marshal.writeArrayOfUInt(materialInstanceHandles);
       this._socket.sendRPC(marshal);
     }
     RPCDestroyText(componentHandle) {
@@ -57997,53 +58097,53 @@ void main() {
       const ret = returnMarshal.readSegment();
       return ret;
     }
-    async RPCFrameAll(blendTime) {
+    async RPCFrameElements(vimIndex, elementIndices, blendTime) {
       const marshal = new Marshal();
-      marshal.writeString("RPCFrameAll");
+      marshal.writeString("RPCFrameElements");
+      marshal.writeUInt(vimIndex);
+      marshal.writeArrayOfUInt(elementIndices);
       marshal.writeFloat(blendTime);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readSegment();
       return ret;
     }
-    async RPCFrameElements(componentHandle, elementIndices, blendTime) {
+    async RPCFrameScene(blendTime) {
       const marshal = new Marshal();
-      marshal.writeString("RPCFrameElements");
-      marshal.writeUInt(componentHandle);
-      marshal.writeArrayOfUInt(elementIndices);
+      marshal.writeString("RPCFrameScene");
       marshal.writeFloat(blendTime);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readSegment();
       return ret;
     }
-    async RPCFrameVim(componentHandle, blendTime) {
+    async RPCFrameVim(vimIndex, blendTime) {
       const marshal = new Marshal();
       marshal.writeString("RPCFrameVim");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       marshal.writeFloat(blendTime);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readSegment();
       return ret;
     }
-    async RPCGetAABBForAll() {
+    async RPCGetAABBForElements(vimIndex, elementIndices) {
       const marshal = new Marshal();
-      marshal.writeString("RPCGetAABBForAll");
+      marshal.writeString("RPCGetAABBForElements");
+      marshal.writeUInt(vimIndex);
+      marshal.writeArrayOfUInt(elementIndices);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readBox3();
       return ret;
     }
-    async RPCGetAABBForElements(componentHandle, elementIndices) {
+    async RPCGetAABBForScene() {
       const marshal = new Marshal();
-      marshal.writeString("RPCGetAABBForElements");
-      marshal.writeUInt(componentHandle);
-      marshal.writeArrayOfUInt(elementIndices);
+      marshal.writeString("RPCGetAABBForScene");
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readBox3();
       return ret;
     }
-    async RPCGetAABBForVim(componentHandle) {
+    async RPCGetAABBForVim(vimIndex) {
       const marshal = new Marshal();
       marshal.writeString("RPCGetAABBForVim");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readBox3();
       return ret;
@@ -58055,25 +58155,32 @@ void main() {
       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;
     }
-    async RPCGetElementCount(componentHandle) {
+    async RPCGetElementCountForScene() {
       const marshal = new Marshal();
-      marshal.writeString("RPCGetElementCount");
-      marshal.writeUInt(componentHandle);
+      marshal.writeString("RPCGetElementCountForScene");
+      const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
+      const ret = returnMarshal.readUInt();
+      return ret;
+    }
+    async RPCGetElementCountForVim(vimIndex) {
+      const marshal = new Marshal();
+      marshal.writeString("RPCGetElementCountForVim");
+      marshal.writeUInt(vimIndex);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readUInt();
       return ret;
     }
-    async RPCGetElementIds(componentHandle) {
+    async RPCGetElementIds(vimIndex) {
       const marshal = new Marshal();
       marshal.writeString("RPCGetElementIds");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readArrayOfUInt64();
       return ret;
@@ -58085,10 +58192,10 @@ void main() {
       const ret = returnMarshal.readString();
       return ret;
     }
-    async RPCGetRoomElements(componentHandle) {
+    async RPCGetRoomElements(vimIndex) {
       const marshal = new Marshal();
       marshal.writeString("RPCGetRoomElements");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readArrayOfUInt();
       return ret;
@@ -58100,10 +58207,10 @@ void main() {
       const ret = returnMarshal.readSectionBoxState();
       return ret;
     }
-    async RPCGetVimLoadingState(componentHandle) {
+    async RPCGetVimLoadingState(vimIndex) {
       const marshal = new Marshal();
       marshal.writeString("RPCGetVimLoadingState");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
       const ret = returnMarshal.readVimStatus();
       return ret;
@@ -58193,6 +58300,13 @@ void main() {
       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");
@@ -58213,13 +58327,6 @@ void main() {
       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");
@@ -58237,10 +58344,10 @@ void main() {
       marshal.writeRGBA(backgroundColor);
       this._socket.sendRPC(marshal);
     }
-    RPCSetMaterialOverrides(componentHandle, elementIndices, materialInstanceHandles) {
+    RPCSetMaterialOverridesForElements(vimIndex, elementIndices, materialInstanceHandles) {
       const marshal = new Marshal();
-      marshal.writeString("RPCSetMaterialOverrides");
-      marshal.writeUInt(componentHandle);
+      marshal.writeString("RPCSetMaterialOverridesForElements");
+      marshal.writeUInt(vimIndex);
       marshal.writeArrayOfUInt(elementIndices);
       marshal.writeArrayOfUInt(materialInstanceHandles);
       this._socket.sendRPC(marshal);
@@ -58251,25 +58358,31 @@ void main() {
       marshal.writeSectionBoxState(state);
       this._socket.sendRPC(marshal);
     }
-    RPCSetStateVim(componentHandle, state) {
+    RPCSetStateElements(vimIndex, elementIndices, state) {
       const marshal = new Marshal();
-      marshal.writeString("RPCSetStateVim");
-      marshal.writeUInt(componentHandle);
+      marshal.writeString("RPCSetStateElements");
+      marshal.writeUInt(vimIndex);
+      marshal.writeArrayOfUInt(elementIndices);
       marshal.writeUInt(state);
       this._socket.sendRPC(marshal);
     }
-    RPCSetStateElements(componentHandle, elementIndices, state) {
+    RPCSetStateScene(state) {
       const marshal = new Marshal();
-      marshal.writeString("RPCSetStateElements");
-      marshal.writeUInt(componentHandle);
-      marshal.writeArrayOfUInt(elementIndices);
+      marshal.writeString("RPCSetStateScene");
+      marshal.writeUInt(state);
+      this._socket.sendRPC(marshal);
+    }
+    RPCSetStateVim(vimIndex, state) {
+      const marshal = new Marshal();
+      marshal.writeString("RPCSetStateVim");
+      marshal.writeUInt(vimIndex);
       marshal.writeUInt(state);
       this._socket.sendRPC(marshal);
     }
-    RPCSetStatesElements(componentHandle, elementIndices, states) {
+    RPCSetStatesElements(vimIndex, elementIndices, states) {
       const marshal = new Marshal();
       marshal.writeString("RPCSetStatesElements");
-      marshal.writeUInt(componentHandle);
+      marshal.writeUInt(vimIndex);
       marshal.writeArrayOfUInt(elementIndices);
       marshal.writeArrayOfUInt(states);
       this._socket.sendRPC(marshal);
@@ -58297,12 +58410,6 @@ void main() {
       marshal.writeString("RPCUnloadAll");
       this._socket.sendRPC(marshal);
     }
-    RPCUnloadVim(componentHandle) {
-      const marshal = new Marshal();
-      marshal.writeString("RPCUnloadVim");
-      marshal.writeUInt(componentHandle);
-      this._socket.sendRPC(marshal);
-    }
   }
   class RemoteColor {
     /**
@@ -58334,35 +58441,7 @@ void main() {
      * @returns {number} The color value as a hexadecimal number.
      */
     get hex() {
-      return this.color.hex;
-    }
-    /**
-     * Gets the red component of the color.
-     * @returns {number} The red component value in the range [0-255].
-     */
-    get r() {
-      return this.color.r;
-    }
-    /**
-     * Gets the green component of the color.
-     * @returns {number} The green component value in the range [0-255].
-     */
-    get g() {
-      return this.color.g;
-    }
-    /**
-     * Gets the blue component of the color.
-     * @returns {number} The blue component value in the range [0-255].
-     */
-    get b() {
-      return this.color.b;
-    }
-    /**
-     * Gets the alpha (opacity) component of the color.
-     * @returns {number} The alpha component value in the range [0-255].
-     */
-    get a() {
-      return this.color.a;
+      return this.color.getHex();
     }
     /**
      * Disposes of the color handle and releases associated resources.
@@ -58375,6 +58454,12 @@ void main() {
       this._disposed = true;
     }
   }
+  function RGBAfromThree(color, opacity = 1) {
+    return new RGBA(color.r, color.g, color.b, opacity);
+  }
+  function RGBA32fromThree(color, opacity = 1) {
+    return RGBA32.fromFloats(color.r, color.g, color.b, opacity);
+  }
   const MAX_BATCH_SIZE = 3e3;
   class ColorManager {
     /**
@@ -58394,39 +58479,48 @@ void main() {
      * @param hex - The RGBA32 color value
      * @returns Promise resolving to a ColorHandle, or undefined if creation fails
      */
-    async getColor(hex) {
-      const colors = await this.getColors([hex]);
+    async getColor(color) {
+      const colors = await this.getColors([color]);
       if (!colors) return void 0;
       return colors[0];
     }
     /**
      * Creates or retrieves cached color instances for multiple hex values.
-     * @param c - Array of RGBA32 color values
+     * @param colors - Array of color values or undefined for no color
      * @returns Promise resolving to an array of ColorHandles in the same order as input, or undefined if creation fails
      * @remarks Duplicate hex values will be mapped to the same color instance for efficiency
      */
-    async getColors(c) {
-      const result = new Array(c.length);
+    async getColors(colors) {
+      const result = new Array(colors.length);
       const hexToIndices = /* @__PURE__ */ new Map();
       const toCreate = [];
-      for (let i2 = 0; i2 < c.length; i2++) {
-        const color = c[i2];
-        if (this._hexToColor.has(color.hex)) {
-          result[i2] = this._hexToColor.get(color.hex);
-        } else if (hexToIndices.has(color.hex)) {
-          hexToIndices.get(color.hex).push(i2);
-        } else {
-          toCreate.push(color);
-          hexToIndices.set(color.hex, [i2]);
+      for (let i2 = 0; i2 < colors.length; i2++) {
+        const color = colors[i2];
+        if (color === void 0) {
+          result[i2] = void 0;
+          continue;
+        }
+        const hex = (color == null ? void 0 : color.getHex()) ?? -1;
+        const remoteColor = this._hexToColor.get(hex);
+        if (remoteColor) {
+          result[i2] = remoteColor;
+          continue;
+        }
+        const indices = hexToIndices.get(hex);
+        if (indices) {
+          hexToIndices.get(hex).push(i2);
+          continue;
         }
+        toCreate.push(color);
+        hexToIndices.set(hex, [i2]);
       }
-      const colors = await this._createColors(toCreate);
-      if (!colors) return void 0;
-      for (let i2 = 0; i2 < colors.length; i2++) {
+      const remoteColors = await this._createColors(toCreate);
+      if (!remoteColors) return void 0;
+      for (let i2 = 0; i2 < remoteColors.length; i2++) {
         const color = toCreate[i2];
-        const indices = hexToIndices.get(color.hex);
+        const indices = hexToIndices.get(color.getHex());
         for (const index2 of indices) {
-          result[index2] = colors[i2];
+          result[index2] = remoteColors[i2];
         }
       }
       return result;
@@ -58469,7 +58563,8 @@ void main() {
       if (colors.length === 0) {
         return result;
       }
-      const instances = await this._rpc.RPCCreateMaterialInstances(MaterialHandles.StandardOpaque, 1, colors);
+      const rpcColors = colors.map((c) => RGBA32fromThree(c));
+      const instances = await this._rpc.RPCCreateMaterialInstances(MaterialHandles.StandardOpaque, 1, rpcColors);
       if (!instances) return void 0;
       for (let i2 = 0; i2 < colors.length; i2++) {
         const color = this._createColor(colors[i2], instances[i2]);
@@ -58486,7 +58581,7 @@ void main() {
      */
     _createColor(color, id2) {
       const handle = new RemoteColor(color, id2, this);
-      this._hexToColor.set(color.hex, handle);
+      this._hexToColor.set(color.getHex(), handle);
       this._idToColor.set(handle.id, handle);
       return handle;
     }
@@ -58828,6 +58923,7 @@ void main() {
     }
   }
   const CODE_TO_KEYCODE = {
+    "Space": 32,
     "ArrowUp": 38,
     "ArrowDown": 40,
     "ArrowLeft": 37,
@@ -58861,6 +58957,9 @@ void main() {
       toggleOrthographic: () => {
         console.log("toggleOrthographic. Not supported yet");
       },
+      toggleCameraOrbitMode: () => {
+        viewer.rpc.RPCKeyEvent(CODE_TO_KEYCODE["Space"], true);
+      },
       resetCamera: () => {
         viewer.camera.restoreSavedPosition();
       },
@@ -59053,9 +59152,9 @@ void main() {
       if (!Validation.isRelativeVector2(position)) return void 0;
       const test2 = await this._rpc.RPCPerformHitTest(position);
       if (!test2) return void 0;
-      const vim = this._vims.getFromHandle(test2.vimHandle);
+      const vim = this._vims.getFromHandle(test2.vimIndex);
       if (!vim) return void 0;
-      const object = vim.getElement(test2.elementIndex);
+      const object = vim.getElement(test2.vimElementIndex);
       if (!object) return void 0;
       return new UltraRaycastResult(
         object,
@@ -59084,7 +59183,7 @@ void main() {
     hdrScale: 1.37,
     hdrBackgroundScale: 1,
     hdrBackgroundSaturation: 1,
-    backGroundBlur: 1,
+    backgroundBlur: 1,
     backgroundColor: new RGBA(0.9, 0.9, 0.9, 1)
   };
   var VimLoadingStatus = /* @__PURE__ */ ((VimLoadingStatus2) => {
@@ -59097,15 +59196,26 @@ void main() {
     return VimLoadingStatus2;
   })(VimLoadingStatus || {});
   class RpcSafeClient {
+    /**
+     * Creates a new RpcSafeClient instance.
+     * @param rpc - The underlying RpcClient used for communication
+     * @param batchSize - Maximum size of batched data for operations (default: 10000)
+     */
     constructor(rpc, batchSize = defaultBatchSize) {
       __publicField(this, "rpc");
       __publicField(this, "batchSize");
       this.rpc = rpc;
       this.batchSize = batchSize;
     }
+    /**
+     * The URL used by the underlying RPC connection.
+     */
     get url() {
       return this.rpc.url;
     }
+    /**
+     * Indicates whether the RPC client is currently connected.
+     */
     get connected() {
       return this.rpc.connected;
     }
@@ -59115,9 +59225,10 @@ void main() {
      * and scene-wide settings.
      ******************************************************************************/
     /**
-     * Initializes and starts the scene with specified settings.
+     * Initializes and starts the scene with the given settings.
      * @param settings - Optional partial scene settings to override defaults
-     * @remarks If no settings are provided, default values will be used
+     * @returns Promise resolving to true if the scene started successfully, false otherwise
+     * @remarks Missing values will be filled from {@link defaultSceneSettings}
      */
     async RPCStartScene(settings2) {
       const s = { ...defaultSceneSettings, ...settings2 ?? {} };
@@ -59127,15 +59238,15 @@ void main() {
           Validation.min0(s.hdrScale),
           Validation.clamp01(s.hdrBackgroundScale),
           Validation.clamp01(s.hdrBackgroundSaturation),
-          Validation.clamp01(s.backGroundBlur),
+          Validation.clamp01(s.backgroundBlur),
           Validation.clampRGBA01(s.backgroundColor)
         ),
         false
       );
     }
     /**
-     * Sets the lighting settings for the scene.
-     * @param settings - The lighting settings to apply
+     * Updates the scene’s lighting configuration.
+     * @param settings - The complete lighting and background settings to apply
      */
     RPCSetLighting(settings2) {
       const s = settings2;
@@ -59144,43 +59255,80 @@ void main() {
         Validation.min0(s.hdrScale),
         Validation.clamp01(s.hdrBackgroundScale),
         Validation.clamp01(s.hdrBackgroundSaturation),
-        Validation.clamp01(s.backGroundBlur),
+        Validation.clamp01(s.backgroundBlur),
         Validation.clampRGBA01(s.backgroundColor)
       );
     }
-    /*******************************************************************************
-     * NODE VISIBILITY METHODS
-     * Methods for controlling node visibility, including show/hide, ghosting,
-     * and highlighting functionality.
-     ******************************************************************************/
     /**
-     * Highlights specified nodes in a component.
-     * Large node arrays are automatically processed in batches.
-     * @param componentHandle - The component containing the nodes
-     * @param nodes - Array of node indices to highlight
-     * @throws {Error} If the component handle is invalid or nodes array is invalid
-     */
-    RPCSetStateElements(componentHandle, elements, state) {
-      if (elements.length === 0) return;
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      if (!Validation.areComponentHandles(elements)) return;
-      const batches = batchArray(elements, this.batchSize);
-      for (const batch of batches) {
-        this.rpc.RPCSetStateElements(componentHandle, batch, state);
-      }
-    }
-    RPCSetStatesElements(componentHandle, elements, states) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      if (!Validation.areComponentHandles(elements)) return;
-      if (!Validation.areSameLength(elements, states)) return;
-      const batches = batchArrays(elements, states, this.batchSize);
-      for (const [batchedElements, batchedStates] of batches) {
-        this.rpc.RPCSetStatesElements(componentHandle, batchedElements, batchedStates);
+     * Retrieves the total number of elements across the entire scene.
+     * @returns Promise resolving to the total number of elements (0 on failure).
+     */
+    RPCGetElementCountForScene() {
+      return this.safeCall(
+        () => this.rpc.RPCGetElementCountForScene(),
+        0
+      );
+    }
+    /**
+     * Retrieves the number of elements within a specific loaded vim.
+     * @param vimIndex - Index of the loaded vim to query
+     * @returns Promise resolving to the element count (0 on failure)
+     */
+    RPCGetElementCountForVim(vimIndex) {
+      return this.safeCall(
+        () => this.rpc.RPCGetElementCountForVim(vimIndex),
+        0
+      );
+    }
+    /*******************************************************************************
+     * ELEMENTS VISIBILITY METHODS
+     * Methods for controlling element visibility, including show/hide, ghosting,
+     * and highlighting functionality.
+     ******************************************************************************/
+    /**
+     * Sets a single visibility state for given elements within a loaded vim.
+     * The operation is automatically split into batches if the array is large.
+     *
+     * @param vimIndex - The index of the loaded vim containing the elements
+     * @param vimElementIndices - Array of vim-based element indices to apply the state to
+     * @param state - The visibility state to apply (e.g., VISIBLE, HIDDEN)
+     */
+    RPCSetStateElements(vimIndex, vimElementIndices, state) {
+      if (vimElementIndices.length === 0) return;
+      if (!Validation.isIndex(vimIndex)) return;
+      if (!Validation.areIndices(vimElementIndices)) return;
+      const batches = batchArray(vimElementIndices, this.batchSize);
+      for (const batch of batches) {
+        this.rpc.RPCSetStateElements(vimIndex, batch, state);
+      }
+    }
+    /**
+     * Sets individual visibility states for multiple elements in a vim.
+     * Each element receives a corresponding visibility state from the input array.
+     * The operation is automatically split into batches if the array is large.
+     *
+     * @param vimIndex - The index of the loaded vim
+     * @param vimElementIndices - Array of vim-based element indices
+     * @param states - Array of visibility states to apply, one per element
+     */
+    RPCSetStatesElements(vimIndex, vimElementIndices, states) {
+      if (!Validation.isIndex(vimIndex)) return;
+      if (!Validation.areIndices(vimElementIndices)) return;
+      if (!Validation.areSameLength(vimElementIndices, states)) return;
+      const batches = batchArrays(vimElementIndices, states, this.batchSize);
+      for (const [batchedElements, batchedStates] of batches) {
+        this.rpc.RPCSetStatesElements(vimIndex, batchedElements, batchedStates);
       }
     }
-    RPCSetStateVim(componentHandle, state) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      this.rpc.RPCSetStateVim(componentHandle, state);
+    /**
+     * Applies a single visibility state to all elements of a loaded vim.
+     *
+     * @param vimIndex - The index of the loaded vim
+     * @param state - The visibility state to apply (e.g., VISIBLE, HIDDEN)
+     */
+    RPCSetStateVim(vimIndex, state) {
+      if (!Validation.isIndex(vimIndex)) return;
+      this.rpc.RPCSetStateVim(vimIndex, state);
     }
     /*******************************************************************************
      * TEXT AND UI METHODS
@@ -59192,7 +59340,6 @@ void main() {
      * @param color - The color of the text
      * @param text - The content to display
      * @returns Promise resolving to the handle of the created text component
-     * @throws {Error} If the text is empty
      */
     async RPCCreateText(position, color, text) {
       if (!Validation.isNonEmptyString(text)) return INVALID_HANDLE;
@@ -59205,19 +59352,26 @@ void main() {
     /**
      * Destroys a text component, removing it from the scene.
      * @param componentHandle - The handle of the text component to destroy
-     * @throws {Error} If the component handle is invalid
      */
     RPCDestroyText(componentHandle) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
+      if (!Validation.isIndex(componentHandle)) return;
       this.rpc.RPCDestroyText(componentHandle);
     }
     /*******************************************************************************
      * SECTION BOX METHODS
      * Methods for controlling section box visibility and position.
      ******************************************************************************/
+    /**
+     * Enables or disables the section box.
+     * @param enable - True to enable the section box, false to disable it
+     */
     RPCEnableSectionBox(enable) {
       this.rpc.RPCEnableSectionBox(enable);
     }
+    /**
+     * Sets the parameters of the section box.
+     * @param state - The new section box state, including visibility and bounding box
+     */
     RPCSetSectionBox(state) {
       this.rpc.RPCSetSectionBox(
         {
@@ -59226,6 +59380,10 @@ void main() {
         }
       );
     }
+    /**
+     * Retrieves the current section box state.
+     * @returns Promise resolving to the section box state or undefined on failure
+     */
     async RPCGetSectionBox() {
       return await this.safeCall(
         () => this.rpc.RPCGetSectionBox(),
@@ -59242,7 +59400,7 @@ void main() {
      */
     async RPCGetCameraView() {
       return await this.safeCall(
-        () => this.rpc.RPCGetCameraView(),
+        () => this.rpc.RPCGetCameraPose(),
         void 0
       );
     }
@@ -59254,7 +59412,7 @@ void main() {
     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.
@@ -59282,52 +59440,52 @@ void main() {
     }
     /**
      * Retrieves the axis-aligned bounding box (AABB) that encompasses the entire scene.
-     * This includes all loaded geometry across all VIM components.
+     * This includes all loaded geometry across all loaded vims.
      *
      * @returns Promise resolving to the global AABB of the scene, or undefined on failure
      */
-    RPCGetAABBForAll() {
+    RPCGetAABBForScene() {
       return this.safeCall(
-        () => this.rpc.RPCGetAABBForAll(),
+        () => this.rpc.RPCGetAABBForScene(),
         void 0
       );
     }
     /**
-     * Retrieves the axis-aligned bounding box (AABB) for a specific VIM component.
-     * This bounding box represents the spatial bounds of all geometry within the given component.
+     * Retrieves the axis-aligned bounding box (AABB) for a specific loaded vim.
+     * This bounding box represents the spatial bounds of all geometry within the given loaded vim.
      *
-     * @param componentHandle - The handle of the VIM component to query
-     * @returns Promise resolving to the component’s bounding box, or undefined on failure
+     * @param vimIndex - The index of the loaded vim to query
+     * @returns Promise resolving to the vim bounding box, or undefined on failure
      */
-    async RPCGetAABBForVim(componentHandle) {
+    async RPCGetAABBForVim(vimIndex) {
+      if (!Validation.isIndex(vimIndex)) return void 0;
       return await this.safeCall(
-        () => this.rpc.RPCGetAABBForVim(componentHandle),
+        () => this.rpc.RPCGetAABBForVim(vimIndex),
         void 0
       );
     }
     /**
-     * Calculates the bounding box for specified nodes in a component.
-     * Large node arrays are automatically processed in batches for better performance.
-     * @param componentHandle - The component containing the nodes
-     * @param elements - Array of node indices to calculate bounds for
-     * @returns Promise resolving to the combined bounding box
-     * @throws {Error} If the component handle is invalid or nodes array is invalid
+     * Calculates the bounding box for specified elements of a loaded vim.
+     * Large element arrays are automatically processed in batches.
+     * @param vimIndex - The index of the loaded vim
+     * @param vimElementIndices - Array of vim-based element indices to calculate bounds for
+     * @returns Promise resolving to the combined bounding box or undefined on failure
      */
-    async RPCGetAABBForElements(componentHandle, elements) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      if (!Validation.areComponentHandles(elements)) return;
+    async RPCGetAABBForElements(vimIndex, vimElementIndices) {
+      if (!Validation.isIndex(vimIndex)) return;
+      if (!Validation.areIndices(vimElementIndices)) return;
       return await this.safeCall(
-        () => this.RPCGetAABBForElementsBatched(componentHandle, elements),
+        () => this.RPCGetAABBForElementsBatched(vimIndex, vimElementIndices),
         void 0
       );
     }
-    async RPCGetAABBForElementsBatched(componentHandle, elements) {
-      if (elements.length === 0) {
+    async RPCGetAABBForElementsBatched(vimIndex, vimElementIndices) {
+      if (vimElementIndices.length === 0) {
         return new Box3();
       }
-      const batches = batchArray(elements, this.batchSize);
+      const batches = batchArray(vimElementIndices, this.batchSize);
       const promises = batches.map(async (batch) => {
-        const aabb = await this.rpc.RPCGetAABBForElements(componentHandle, batch);
+        const aabb = await this.rpc.RPCGetAABBForElements(vimIndex, batch);
         const v1 = new Vector3(aabb.min.x, aabb.min.y, aabb.min.z);
         const v2 = new Vector3(aabb.max.x, aabb.max.y, aabb.max.z);
         return new Box3(v1, v2);
@@ -59338,53 +59496,51 @@ void main() {
       return box;
     }
     /**
-     * Frames the camera to show all components in the scene.
+     * Frames the camera to show all elements in the scene.
      * @param blendTime - Duration of the camera transition in seconds (non-negative)
      * @returns Promise resolving to camera segment representing the final position
      */
-    async RPCFrameAll(blendTime) {
+    async RPCFrameScene(blendTime) {
       blendTime = Validation.clamp01(blendTime);
       return await this.safeCall(
-        () => this.rpc.RPCFrameAll(blendTime),
+        () => this.rpc.RPCFrameScene(blendTime),
         void 0
       );
     }
     /**
-     * Frames a specific VIM component in the scene.
-     * @param componentHandle - The handle of the VIM component to frame
+     * Frames a specific vim in the scene.
+     * @param vimIndex - The index of the loaded vim to frame
      * @param blendTime - Duration of the camera transition in seconds (non-negative)
      * @returns Promise resolving to camera segment representing the final position
-     * @throws {Error} If the component handle is invalid
      */
-    async RPCFrameVim(componentHandle, blendTime) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
+    async RPCFrameVim(vimIndex, blendTime) {
+      if (!Validation.isIndex(vimIndex)) return;
       blendTime = Validation.clamp01(blendTime);
       return await this.safeCall(
-        () => this.rpc.RPCFrameVim(componentHandle, blendTime),
+        () => this.rpc.RPCFrameVim(vimIndex, blendTime),
         void 0
       );
     }
     /**
-     * Frames specific instances within a component. For large numbers of instances,
-     * automatically switches to bounding box framing for better performance.
-     * @param componentHandle - The component containing the instances
-     * @param elements - Array of node indices to frame
+     * Frames specific elements of a loaded vim.
+     * Automatically batches large arrays of elements.
+     * @param vimIndex - The index of the loaded vim
+     * @param vimElementIndices - Array of vim-based element indices to frame
      * @param blendTime - Duration of the camera transition in seconds (non-negative)
      * @returns Promise resolving to camera segment representing the final position
-     * @throws {Error} If the component handle is invalid or nodes array is empty
      */
-    async RPCFrameElements(componentHandle, elements, blendTime) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      if (!Validation.areComponentHandles(elements)) return;
+    async RPCFrameElements(vimIndex, vimElementIndices, blendTime) {
+      if (!Validation.isIndex(vimIndex)) return;
+      if (!Validation.areIndices(vimElementIndices)) return;
       blendTime = Validation.clamp01(blendTime);
-      if (elements.length < this.batchSize) {
+      if (vimElementIndices.length < this.batchSize) {
         return await this.safeCall(
-          () => this.rpc.RPCFrameElements(componentHandle, elements, blendTime),
+          () => this.rpc.RPCFrameElements(vimIndex, vimElementIndices, blendTime),
           void 0
         );
       } else {
         const box = await this.safeCall(
-          () => this.RPCGetAABBForElementsBatched(componentHandle, elements),
+          () => this.RPCGetAABBForElementsBatched(vimIndex, vimElementIndices),
           void 0
         );
         if (!box) return void 0;
@@ -59398,7 +59554,6 @@ void main() {
      * Frames the camera to show a specific bounding box.
      * @param box - The bounding box to frame
      * @param blendTime - Duration of the camera transition in seconds (non-negative)
-     * @throws {Error} If the box is invalid (min values must be less than max values)
      */
     async RPCFrameAABB(box, blendTime) {
       if (!Validation.isValidBox(box)) return;
@@ -59415,12 +59570,15 @@ void main() {
     /**
      * Sets the camera movement speed.
      * @param speed - The desired movement speed (must be positive)
-     * @throws {Error} If speed is not positive
      */
     RPCSetCameraSpeed(speed) {
       speed = Validation.min0(speed);
       this.rpc.RPCSetCameraSpeed(speed);
     }
+    /**
+     * Sets the camera control mode.
+     * @param mode - The desired input mode (e.g., {@link InputMode.Orbit} or {@link InputMode.Free})
+     */
     RPCSetCameraMode(mode) {
       this.rpc.RPCSetCameraMode(
         mode === "orbit"
@@ -59429,9 +59587,8 @@ void main() {
     }
     /**
      * Sets the viewer's aspect ratio.
-     * @param width - The width component of the aspect ratio
-     * @param height - The height component of the aspect ratio
-     * @throws {Error} If width or height are not positive integers
+     * @param width - The width of the desired aspect ratio
+     * @param height - The height of the desired aspect ratio
      */
     RPCSetCameraAspectRatio(width, height) {
       if (!Validation.isPositiveInteger(width)) return;
@@ -59440,13 +59597,12 @@ void main() {
     }
     /*******************************************************************************
      * VIM FILE MANAGEMENT METHODS
-     * Methods for loading, unloading, and managing VIM files and components.
+     * Methods for loading, unloading, and managing VIM files.
      ******************************************************************************/
     /**
      * Loads a VIM file from the local filesystem.
      * @param source - The path to the VIM file (supports file:// protocol)
-     * @returns Promise resolving to the handle of the loaded VIM component
-     * @throws {Error} If the filename is invalid or empty
+     * @returns Promise resolving to the index of the loaded vim
      */
     async RPCLoadVim(source) {
       if (!Validation.isNonEmptyString(source.url)) return INVALID_HANDLE;
@@ -59458,9 +59614,8 @@ void main() {
     }
     /**
      * Loads a VIM file from a remote URL.
-     * @param url - The URL of the VIM file to load
-     * @returns Promise resolving to the handle of the loaded VIM component
-     * @throws {Error} If the URL is invalid
+     * @param source - The URL or file path of the VIM file to load
+     * @returns Promise resolving to the index of the loaded vim
      */
     async RPCLoadVimURL(source) {
       if (!Validation.isURL(source.url)) return INVALID_HANDLE;
@@ -59470,17 +59625,16 @@ void main() {
       );
     }
     /**
-     * Retrieves the current loading state and progress of a VIM component.
-     * @param componentHandle - The handle of the VIM component
+     * Retrieves the current loading state and progress of a vim.
+     * @param vimIndex - The index of the vim being loaded
      * @returns Promise resolving to the current loading state and progress
-     * @throws {Error} If the component handle is invalid
      */
-    async RPCGetVimLoadingState(componentHandle) {
-      if (!Validation.isComponentHandle(componentHandle)) {
+    async RPCGetVimLoadingState(vimIndex) {
+      if (!Validation.isIndex(vimIndex)) {
         return { status: 0, progress: 0 };
       }
       const result = await this.safeCall(
-        () => this.rpc.RPCGetVimLoadingState(componentHandle),
+        () => this.rpc.RPCGetVimLoadingState(vimIndex),
         { status: 0, progress: 0 }
       );
       if (!(result.status in VimLoadingStatus)) {
@@ -59489,16 +59643,7 @@ void main() {
       return result;
     }
     /**
-     * Unloads a VIM component and frees associated resources.
-     * @param componentHandle - The handle of the component to unload
-     * @throws {Error} If the component handle is invalid
-     */
-    RPCUnloadVim(componentHandle) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      this.rpc.RPCUnloadVim(componentHandle);
-    }
-    /**
-     * Clears the entire scene, removing all components and resetting to initial state.
+     * Clears the entire scene, unloading all vims and resetting to initial state.
      */
     RPCUnloadAll() {
       this.rpc.RPCUnloadAll();
@@ -59514,7 +59659,7 @@ void main() {
     /**
      * Performs hit testing at a specified screen position.
      * @param pos - Normalized screen coordinates (0-1, 0-1)
-     * @returns Promise resolving to hit test result if something was hit, undefined otherwise
+     * @returns Promise resolving to hit test result if a valid hit was detected, undefined otherwise
      */
     async RPCPerformHitTest(pos) {
       if (!Validation.isRelativeVector2(pos)) return;
@@ -59522,7 +59667,7 @@ void main() {
         () => this.rpc.RPCPerformHitTest(pos),
         void 0
       );
-      if (!result || result.nodeIndex < 0) {
+      if (!result || result.vimIndex === INVALID_HANDLE) {
         return void 0;
       }
       return result;
@@ -59532,7 +59677,6 @@ void main() {
      * @param position - The normalized screen coordinates (0-1, 0-1)
      * @param mouseButton - The mouse button code (0=left, 1=middle, 2=right)
      * @param down - True if button is pressed down, false if released
-     * @throws {Error} If mouseButton is not a valid positive integer
      */
     RPCMouseButtonEvent(position, mouseButton, down) {
       if (!Validation.isPositiveInteger(mouseButton)) return;
@@ -59543,7 +59687,6 @@ void main() {
      * Sends a mouse double-click event to the viewer.
      * @param position - The normalized screen coordinates (0-1, 0-1)
      * @param mouseButton - The mouse button code (0=left, 1=middle, 2=right)
-     * @throws {Error} If mouseButton is not a valid positive integer
      */
     RPCMouseDoubleClickEvent(position, mouseButton) {
       if (!Validation.isPositiveInteger(mouseButton)) return;
@@ -59570,7 +59713,6 @@ void main() {
      * Sends a mouse selection event to the viewer.
      * @param position - The normalized screen coordinates (0-1, 0-1)
      * @param mouseButton - The mouse button code (0=left, 1=middle, 2=right)
-     * @throws {Error} If mouseButton is not a valid positive integer
      */
     RPCMouseSelectEvent(position, mouseButton) {
       if (!Validation.isPositiveInteger(mouseButton)) return;
@@ -59597,7 +59739,6 @@ void main() {
      * @param smoothness - The smoothness value to apply (clamped between 0 and 1)
      * @param colors - Array of colors for each material instance
      * @returns Array of handles for the created material instances
-     * @throws {Error} If the material handle is invalid or smoothness is out of range
      */
     async RPCCreateMaterialInstances(materialHandle, smoothness, colors) {
       if (!Validation.isMaterialHandle(materialHandle)) return;
@@ -59620,46 +59761,56 @@ void main() {
     }
     /**
      * Destroys multiple material instances, freeing associated resources.
-     * @param materialInstanceHandle - Array of handles for material instances to destroy
-     * @throws {Error} If any handle in the array is invalid
+     * @param materialInstanceHandles - Array of handles for material instances to destroy
      */
-    RPCDestroyMaterialInstances(materialInstanceHandle) {
-      if (!Validation.areComponentHandles(materialInstanceHandle)) return;
-      this.rpc.RPCDestroyMaterialInstances(materialInstanceHandle);
+    RPCDestroyMaterialInstances(materialInstanceHandles) {
+      if (!Validation.areIndices(materialInstanceHandles)) return;
+      this.rpc.RPCDestroyMaterialInstances(materialInstanceHandles);
     }
     /**
-     * Sets material overrides for specific nodes in a component.
-     * Large arrays are automatically processed in batches for better performance.
-     * @param componentHandle - The component containing the nodes
-     * @param nodes - Array of node indices to override
-     * @param materialInstanceHandles - Array of material instance handles to apply (must match nodes length)
-     * @throws {Error} If arrays have different lengths or any handle is invalid
+     * Sets material overrides for specific elements in a loaded vim.
+     * Large arrays are automatically processed in batches.
+     * @param vimIndex - The index of the loaded vim
+     * @param vimElementIndices - Array of vim-based element indices to override
+     * @param materialInstanceHandles - Array of material instance handles to apply (must match element length)
      */
-    RPCSetMaterialOverrides(componentHandle, nodes, materialInstanceHandles) {
-      if (!Validation.areSameLength(nodes, materialInstanceHandles)) return;
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      if (!Validation.areComponentHandles(nodes)) return;
+    RPCSetMaterialOverridesForElements(vimIndex, vimElementIndices, materialInstanceHandles) {
+      if (!Validation.areSameLength(vimElementIndices, materialInstanceHandles)) return;
+      if (!Validation.isIndex(vimIndex)) return;
+      if (!Validation.areIndices(vimElementIndices)) return;
       if (!Validation.areIntegers(materialInstanceHandles)) return;
       this.setMaterialOverridesBatched(
-        componentHandle,
-        nodes,
+        vimIndex,
+        vimElementIndices,
         materialInstanceHandles
       );
     }
-    setMaterialOverridesBatched(componentHandle, nodes, materialInstanceHandles) {
-      const batches = batchArrays(nodes, materialInstanceHandles, this.batchSize);
-      for (const [batchedNodes, batchedMaterials] of batches) {
-        this.rpc.RPCSetMaterialOverrides(componentHandle, batchedNodes, batchedMaterials);
+    setMaterialOverridesBatched(vimIndex, vimElementIndices, materialInstanceHandles) {
+      const batches = batchArrays(vimElementIndices, materialInstanceHandles, this.batchSize);
+      for (const [batchedElements, batchedMaterials] of batches) {
+        this.rpc.RPCSetMaterialOverridesForElements(vimIndex, batchedElements, batchedMaterials);
       }
     }
     /**
-     * Clears all material overrides for the specified component, restoring default materials.
-     * @param componentHandle - The unique identifier of the component
-     * @throws {Error} If the component handle is invalid or INVALID_HANDLE
+     * Clears all material overrides for the entire scene.
+     */
+    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
      */
-    RPCClearMaterialOverrides(componentHandle) {
-      if (!Validation.isComponentHandle(componentHandle)) return;
-      this.rpc.RPCClearMaterialOverrides(componentHandle);
+    RPCClearMaterialOverridesForElements(vimIndex, vimElementIndices) {
+      this.rpc.RPCClearMaterialOverridesForElements(vimIndex, vimElementIndices);
     }
     /*******************************************************************************
      * DEBUG AND UTILITY METHODS
@@ -59716,7 +59867,8 @@ void main() {
   }
   const defaultRenderSettings = {
     ...defaultSceneSettings,
-    ghostColor: new RGBA(14 / 255, 14 / 255, 14 / 255, 64 / 255)
+    ghostColor: new Color(14 / 255, 14 / 255, 14 / 255),
+    ghostOpacity: 64 / 255
   };
   class Renderer {
     /**
@@ -59763,7 +59915,8 @@ void main() {
      * Sets up initial scene settings, ghost color, and IBL rotation
      */
     onConnect() {
-      this._rpc.RPCSetGhostColor(this._settings.ghostColor);
+      const color = RGBAfromThree(this._settings.ghostColor, this._settings.ghostOpacity);
+      this._rpc.RPCSetGhostColor(color);
     }
     notifySceneUpdated() {
       this._onSceneUpdated.dispatch();
@@ -59771,11 +59924,14 @@ void main() {
     // Getters
     /**
      * Gets the ghost color used for transparent rendering
-     * @returns Current ghost color as RGBA
+     * @returns Current ghost color as a THREE.Color
      */
     get ghostColor() {
       return this._settings.ghostColor;
     }
+    get ghostOpacity() {
+      return this._settings.ghostOpacity;
+    }
     /**
      * Gets the tone mapping white point value
      * @returns Current tone mapping white point
@@ -59809,27 +59965,33 @@ void main() {
      * @returns Current background blur
      */
     get backgroundBlur() {
-      return this._settings.backGroundBlur;
+      return this._settings.backgroundBlur;
     }
     /**
      * Gets the background color
      * @returns Current background color as RGBA
      */
     get backgroundColor() {
-      return this._settings.backgroundColor;
+      return this._settings.backgroundColor.toThree();
     }
     // Setters
     /**
      * Updates the ghost color used for transparent rendering
-     * @param value - New ghost color as RGBA
+     * @param value - New ghost color as THREE.Color
      */
     set ghostColor(value) {
-      value = Validation.clampRGBA01(value);
       if (this._settings.ghostColor.equals(value)) return;
       this._settings.ghostColor = value;
       this._updateGhostColor = true;
       this.requestSettingsUpdate();
     }
+    set ghostOpacity(value) {
+      value = Validation.clamp01(value);
+      if (this._settings.ghostOpacity === value) return;
+      this._settings.ghostOpacity = value;
+      this._updateGhostColor = true;
+      this.requestSettingsUpdate();
+    }
     /**
      * Sets the tone mapping white point value
      * @param value - New tone mapping white point value
@@ -59880,24 +60042,24 @@ void main() {
      */
     set backgroundBlur(value) {
       value = Validation.clamp01(value);
-      if (this._settings.backGroundBlur === value) return;
-      this._settings.backGroundBlur = value;
+      if (this._settings.backgroundBlur === value) return;
+      this._settings.backgroundBlur = value;
       this._updateLighting = true;
       this.requestSettingsUpdate();
     }
     /**
      * Sets the background color
-     * @param value - New background color as RGBA
+     * @param value - New background color as THREE.Color
      */
     set backgroundColor(value) {
-      value = Validation.clampRGBA01(value);
-      if (this._settings.backgroundColor.equals(value)) return;
-      this._settings.backgroundColor = value;
+      const color = RGBAfromThree(value, 1);
+      if (this._settings.backgroundColor.equals(color)) return;
+      this._settings.backgroundColor = color;
       this._updateLighting = true;
       this.requestSettingsUpdate();
     }
     getBoundingBox() {
-      return this._rpc.RPCGetAABBForAll();
+      return this._rpc.RPCGetAABBForScene();
     }
     /**
      * Requests an update to be performed on the next animation frame.
@@ -59912,7 +60074,10 @@ void main() {
     }
     async applySettings() {
       if (this._updateLighting) await this._rpc.RPCSetLighting(this._settings);
-      if (this._updateGhostColor) await this._rpc.RPCSetGhostColor(this._settings.ghostColor);
+      if (this._updateGhostColor) {
+        const color = RGBAfromThree(this._settings.ghostColor, this._settings.ghostOpacity);
+        await this._rpc.RPCSetGhostColor(color);
+      }
       this._updateLighting = false;
       this._updateGhostColor = false;
       this._animationFrame = void 0;
@@ -60012,7 +60177,7 @@ void main() {
      * Fits the given box, invalid dimensions will be reversed.
      * @param box - The new bounding box.
      */
-    fitBox(box) {
+    setBox(box) {
       box = safeBox(box);
       this._box = box;
       this.scheduleUpdate();
@@ -60036,7 +60201,7 @@ void main() {
     VisibilityState2[VisibilityState2["GHOSTED_HIGHLIGHTED"] = 18] = "GHOSTED_HIGHLIGHTED";
     return VisibilityState2;
   })(VisibilityState$1 || {});
-  class StateSynchronizer {
+  class VisibilitySynchronizer {
     /**
      * Creates a new StateSynchronizer instance.
      * 
@@ -60054,7 +60219,7 @@ void main() {
       __publicField(this, "_onUpdate");
       __publicField(this, "_isConnected");
       __publicField(this, "_animationFrame");
-      this._tracker = new StateTracker(defaultState);
+      this._tracker = new VisibilityTracker(defaultState);
       this._rpc = rpc;
       this._onUpdate = onUpdate;
       this._getHandle = getHandle;
@@ -60103,7 +60268,7 @@ void main() {
      * @param elementIndex - The element index to update
      * @param state - The new state to apply
      */
-    setElementState(elementIndex, state) {
+    setStateForElement(elementIndex, state) {
       this._tracker.setState(elementIndex, state);
       this.scheduleUpdate();
     }
@@ -60167,7 +60332,7 @@ void main() {
       this._onUpdate();
     }
   }
-  class StateTracker {
+  class VisibilityTracker {
     /**
      * Creates a new StateTracker instance.
      * 
@@ -60763,6 +60928,12 @@ Averrage Date/Second ${avgDataRatePS} kb
         this._rpc.RPCSetCameraAspectRatio(this.canvas.offsetWidth, this.canvas.offsetHeight);
       }
     }
+    /**
+     * Resizes the viewport to match its parent's dimensions
+     */
+    resizeToParent() {
+      this.update();
+    }
     /**
      * Cleans up resources by removing resize observer and clearing timeouts
      */
@@ -60804,7 +60975,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return this.vim.visibility.getElementState(this.element);
     }
     set state(state) {
-      this.vim.visibility.setElementState(this.element, state);
+      this.vim.visibility.setStateForElement(this.element, state);
     }
     /**
      * Gets or sets the color override of the element.
@@ -60821,11 +60992,12 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @returns A promise resolving to the element's bounding box.
      */
     async getBoundingBox() {
-      return this.vim.getBoundingBoxNodes([this.element]);
+      return this.vim.getBoundingBoxForElements([this.element]);
     }
   }
   class Vim {
     constructor(rpc, color, renderer, source, logger) {
+      __publicField(this, "type", "ultra");
       __publicField(this, "source");
       __publicField(this, "_handle", -1);
       __publicField(this, "_request");
@@ -60834,19 +61006,22 @@ Averrage Date/Second ${avgDataRatePS} kb
       __publicField(this, "_renderer");
       __publicField(this, "_logger");
       // The StateSynchronizer wraps a StateTracker and handles RPC synchronization.
+      // Should be private
       __publicField(this, "visibility");
       // Color tracking remains unchanged.
-      __publicField(this, "_nodeColors", /* @__PURE__ */ new Map());
+      __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);
       __publicField(this, "_objects", /* @__PURE__ */ new Map());
       this._rpc = rpc;
       this.source = source;
       this._colors = color;
       this._renderer = renderer;
       this._logger = logger;
-      this.visibility = new StateSynchronizer(
+      this.visibility = new VisibilitySynchronizer(
         this._rpc,
         () => this._handle,
         () => this.connected,
@@ -60855,6 +61030,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         // default state
       );
     }
+    //TODO: Rename this to getElementFromNode, prefer using element instead
     getElement(elementIndex) {
       if (this._objects.has(elementIndex)) {
         return this._objects.get(elementIndex);
@@ -60867,13 +61043,16 @@ Averrage Date/Second ${avgDataRatePS} kb
       throw new Error("Method not implemented.");
     }
     getElementFromIndex(element) {
-      throw new Error("Method not implemented.");
+      return this.getElement(element);
     }
     getObjectsInBox(box) {
       throw new Error("Method not implemented.");
     }
     getAllElements() {
-      throw new Error("Method not implemented.");
+      for (var i2 = 0; i2 < this._elementCount; i2++) {
+        this.getElement(i2);
+      }
+      return Array.from(this._objects.values());
     }
     get handle() {
       return this._handle;
@@ -60904,7 +61083,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       (_a3 = this._request) == null ? void 0 : _a3.error("cancelled", "The request was cancelled");
       this._request = void 0;
       if (this.connected) {
-        this._rpc.RPCUnloadVim(this._handle);
         this._handle = -1;
       }
     }
@@ -60926,12 +61104,12 @@ Averrage Date/Second ${avgDataRatePS} kb
             case VimLoadingStatus.FailedToDownload:
             case VimLoadingStatus.FailedToLoad:
             case VimLoadingStatus.Unknown:
-              this._rpc.RPCUnloadVim(handle);
               const details = await this._rpc.RPCGetLastError();
               const error = this.getErrorType(state.status);
               return result.error(error, details);
             case VimLoadingStatus.Done:
               this._handle = handle;
+              this._elementCount = await this._rpc.RPCGetElementCountForVim(handle);
               return result.success(this);
           }
         } catch (e) {
@@ -60971,14 +61149,14 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return handle;
     }
-    async getBoundingBoxNodes(nodes) {
-      if (!this.connected || nodes !== "all" && nodes.length === 0) {
+    async getBoundingBoxForElements(elements) {
+      if (!this.connected || elements !== "all" && elements.length === 0) {
         return Promise.resolve(void 0);
       }
-      if (nodes === "all") {
+      if (elements === "all") {
         return await this._rpc.RPCGetAABBForVim(this._handle);
       }
-      return await this._rpc.RPCGetAABBForElements(this._handle, nodes);
+      return await this._rpc.RPCGetAABBForElements(this._handle, elements);
     }
     async getBoundingBox() {
       if (!this.connected) {
@@ -60986,49 +61164,52 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
       return await this._rpc.RPCGetAABBForVim(this._handle);
     }
-    getColor(node) {
-      return this._nodeColors.get(node);
+    getColor(elementIndex) {
+      return this._elementColors.get(elementIndex);
     }
-    async setColor(nodes, color) {
-      const colors = new Array(nodes.length).fill(color);
-      this.applyColor(nodes, colors);
+    async setColor(elementIndex, color) {
+      const colors = new Array(elementIndex.length).fill(color);
+      this.applyColor(elementIndex, colors);
     }
-    async setColors(nodes, color) {
-      if (color.length !== nodes.length) {
-        throw new Error("Color and nodes length must be equal");
+    async setColors(elements, color) {
+      if (color.length !== elements.length) {
+        throw new Error("Color and elements length must be equal");
       }
-      this.applyColor(nodes, color);
+      this.applyColor(elements, color);
     }
-    applyColor(nodes, color) {
-      for (let i2 = 0; i2 < color.length; i2++) {
-        const c = color[i2];
-        const n = nodes[i2];
-        if (c === void 0) {
-          this._nodeColors.delete(n);
-        } else {
-          this._nodeColors.set(n, c);
+    applyColor(elements, colors) {
+      for (let i2 = 0; i2 < colors.length; i2++) {
+        const color = colors[i2];
+        const element = elements[i2];
+        const existingColor = this._elementColors.get(element);
+        if (color === void 0 && existingColor !== void 0) {
+          this._elementColors.delete(element);
+          this._removedColors.add(element);
+        } else if (color !== existingColor) {
+          this._elementColors.set(element, color);
+          this._updatedColors.add(element);
         }
-        this._updatedColors.add(n);
       }
       this.scheduleColorUpdate();
     }
-    clearColor(nodes) {
-      if (nodes === "all") {
-        this._nodeColors.clear();
+    //TODO: Remove and rely on element.color
+    clearColor(elements) {
+      if (elements === "all") {
+        this._elementColors.clear();
       } else {
-        nodes.forEach((n) => this._nodeColors.delete(n));
+        elements.forEach((n) => this._elementColors.delete(n));
       }
       if (!this.connected) return;
-      if (nodes === "all") {
-        this._rpc.RPCClearMaterialOverrides(this._handle);
+      if (elements === "all") {
+        this._rpc.RPCClearMaterialOverridesForVim(this._handle);
       } else {
-        const ids = new Array(nodes.length).fill(MaterialHandles.Invalid);
-        this._rpc.RPCSetMaterialOverrides(this._handle, nodes, ids);
+        this._rpc.RPCClearMaterialOverridesForElements(this._handle, elements);
       }
     }
     reapplyColors() {
       this._updatedColors.clear();
-      this._nodeColors.forEach((c, n) => this._updatedColors.add(n));
+      this._removedColors.clear();
+      this._elementColors.forEach((c, n) => this._updatedColors.add(n));
       this.scheduleColorUpdate();
     }
     scheduleColorUpdate() {
@@ -61044,12 +61225,15 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._renderer.notifySceneUpdated();
     }
     async updateRemoteColors() {
-      const nodes = Array.from(this._updatedColors);
-      const colors = nodes.map((n) => this._nodeColors.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.RPCSetMaterialOverrides(this._handle, nodes, colorIds);
+      this._rpc.RPCClearMaterialOverridesForElements(this._handle, removedElement);
+      this._rpc.RPCSetMaterialOverridesForElements(this._handle, updatedElement, colorIds);
       this._updatedColors.clear();
+      this._removedColors.clear();
     }
   }
   function wait(ms) {
@@ -61126,6 +61310,11 @@ Averrage Date/Second ${avgDataRatePS} kb
      * @param logger - Optional logger for logging messages.
      */
     constructor(canvas, logger) {
+      /**
+       * The type of the viewer, indicating it is a WebGL viewer.
+       * Useful for distinguishing between different viewer types in a multi-viewer application.
+       */
+      __publicField(this, "type", "ultra");
       __publicField(this, "_decoder");
       __publicField(this, "_socketClient");
       __publicField(this, "_input");
@@ -61349,6 +61538,9 @@ Averrage Date/Second ${avgDataRatePS} kb
       this._vims.getAll().forEach((vim) => vim.disconnect());
       this._vims.clear();
     }
+    getElement3Ds() {
+      return this.rpc.RPCGetElementCountForScene();
+    }
     /**
      * Disposes all resources used by the viewer and disconnects from the server.
      */
@@ -61370,9 +61562,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     INVALID_HANDLE,
     InputMode,
     MaterialHandles,
-    RGB,
-    RGBA,
-    RGBA32,
     Segment,
     Viewer: Viewer$2,
     VimLoadingStatus,
@@ -63552,50 +63741,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     visible,
     zoom
   }, Symbol.toStringTag, { value: "Module" }));
-  function getDefaultSettings() {
-    return {
-      capacity: {
-        canFollowUrl: true,
-        canGoFullScreen: true,
-        canDownload: true,
-        canReadLocalStorage: true
-      },
-      ui: {
-        logo: true,
-        performance: false,
-        bimTreePanel: true,
-        bimInfoPanel: true,
-        // axesPanel
-        axesPanel: true,
-        orthographic: true,
-        resetCamera: true,
-        // Control bar
-        controlBar: true,
-        // Control bar - cursors
-        orbit: true,
-        lookAround: true,
-        pan: true,
-        zoom: true,
-        zoomWindow: true,
-        // Control bar - camera
-        autoCamera: true,
-        frameScene: true,
-        frameSelection: true,
-        // Control bar - tools
-        sectioningMode: true,
-        measuringMode: true,
-        toggleIsolation: true,
-        // Control bar - settings
-        projectInspector: true,
-        settings: true,
-        help: true,
-        maximise: true
-      }
-    };
-  }
-  function createSettings(settings2) {
-    return settings2 !== void 0 ? deepmerge(getDefaultSettings(), settings2) : getDefaultSettings();
-  }
   function getLocalSettings(settings2 = {}) {
     try {
       const json = localStorage.getItem("viewer.settings");
@@ -63650,8 +63795,6 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    createSettings,
-    getDefaultSettings,
     getLocalSettings,
     isFalse,
     isTrue,
@@ -67187,7 +67330,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return value.some(isTrue) ? element : null;
   }
   function anyUiAxesButton(settings2) {
-    return settings2.ui.orthographic || settings2.ui.resetCamera;
+    return settings2.ui.axesOrthographic || settings2.ui.axesHome;
   }
   const AxesPanelMemo = React2.memo(AxesPanel);
   function AxesPanel(props) {
@@ -67247,15 +67390,15 @@ Averrage Date/Second ${avgDataRatePS} kb
         children: ortho ? /* @__PURE__ */ jsxRuntimeExports.jsx(orthographic, { height: 20, width: 20, fill: "currentColor" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(perspective, { height: 20, width: 20, fill: "currentColor" })
       }
     );
-    const hidden2 = isTrue(props.settings.value.ui.axesPanel) ? "" : " vc-hidden";
+    const hidden2 = isTrue(props.settings.value.ui.panelAxes) ? "" : " vc-hidden";
     const empty2 = !anyUiAxesButton(props.settings.value);
     const createBar = () => {
       if (empty2) return null;
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-axes-panel-bar vc-absolute vc-top-[75%] vc-bottom-0 vc-right-0 vc-left-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-axes-panel-buttons vc-absolute vc-inset-0 vc-pointer-events-auto vc-order-2 vc-flex vc-items-center vc-justify-evenly vc-bg-white", children: [
         whenAllTrue([
-          props.settings.value.ui.orthographic
+          props.settings.value.ui.axesOrthographic
         ], btnOrtho),
-        whenTrue(props.settings.value.ui.resetCamera, btnHome)
+        whenTrue(props.settings.value.ui.axesHome, btnHome)
       ] }) });
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -67483,7 +67626,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Style = style;
   const Ids$2 = controlBarIds;
-  function controlBarSectionBox(section, hasSelection) {
+  function controlBarSectionBox(section, hasSelection, settings2) {
     return {
       id: Ids$2.sectionSectionBox,
       style: section.enable.get() ? Style.sectionNoPadStyle : Style.sectionDefaultStyle,
@@ -67491,6 +67634,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonSectionBoxEnable,
+          enabled: () => isTrue(settings2.sectioningEnable),
           tip: "Enable Section Box",
           isOn: () => section.enable.get(),
           style: (on) => Style.buttonExpandStyle(on),
@@ -67500,7 +67644,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxToSelection,
           tip: "Fit Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningFitToSelection),
           isOn: () => hasSelection,
           style: (on) => Style.buttonDisableStyle(on),
           action: () => section.sectionSelection.call(),
@@ -67509,7 +67653,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxToScene,
           tip: "Reset Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningReset),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.sectionScene.call(),
           icon: sectionBoxReset
@@ -67517,7 +67661,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxVisible,
           tip: "Show Section Box",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningShow),
           isOn: () => section.visible.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.visible.set(!section.visible.get()),
@@ -67526,7 +67670,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxAuto,
           tip: "Auto Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningAuto),
           isOn: () => section.auto.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.auto.set(!section.auto.get()),
@@ -67535,7 +67679,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxSettings,
           tip: "Section Settings",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningSettings),
           isOn: () => section.showOffsetPanel.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
@@ -67553,7 +67697,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonCameraOrbit,
-          enabled: () => isTrue(settings2.ui.orbit),
+          enabled: () => isTrue(settings2.cursorOrbit),
           tip: "Orbit",
           action: () => pointer2.onButton(PointerMode$1.ORBIT),
           icon: orbit,
@@ -67562,7 +67706,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraLook,
-          enabled: () => isTrue(settings2.ui.lookAround),
+          enabled: () => isTrue(settings2.cursorLookAround),
           tip: "Look Around",
           action: () => pointer2.onButton(PointerMode$1.LOOK),
           icon: look,
@@ -67571,7 +67715,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraPan,
-          enabled: () => isTrue(settings2.ui.pan),
+          enabled: () => isTrue(settings2.cursorPan),
           tip: "Pan",
           action: () => pointer2.onButton(PointerMode$1.PAN),
           icon: pan,
@@ -67580,7 +67724,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraZoom,
-          enabled: () => isTrue(settings2.ui.zoom),
+          enabled: () => isTrue(settings2.cursorZoom),
           tip: "Zoom",
           action: () => pointer2.onButton(PointerMode$1.ZOOM),
           icon: zoom,
@@ -67590,7 +67734,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarMeasure(settings2, measure$1) {
+  function controlBarMeasure(measure$1, settings2) {
     return {
       id: Ids$2.sectionActions,
       enable: () => true,
@@ -67598,7 +67742,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonMeasure,
-          enabled: () => isTrue(settings2.ui.measuringMode),
+          enabled: () => isTrue(settings2.measureEnable),
           isOn: () => measure$1.active,
           tip: "Measuring Mode",
           action: () => measure$1.toggle(),
@@ -67608,6 +67752,23 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
+  function controlBarSettingsUltra(side, settings$1) {
+    return {
+      id: Ids$2.sectionSettings,
+      enable: () => isTrue(settings$1.ui.settings),
+      style: Style.sectionDefaultStyle,
+      buttons: [
+        {
+          id: Ids$2.buttonSettings,
+          enabled: () => isTrue(settings$1.ui.settings),
+          tip: "Settings",
+          action: () => side.toggleContent("settings"),
+          icon: settings,
+          style: Style.buttonDefaultStyle
+        }
+      ]
+    };
+  }
   function controlBarSettings(modal, side, settings$1) {
     const fullScreen = getFullScreenState();
     return {
@@ -67617,7 +67778,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonProjectInspector,
-          enabled: () => isTrue(settings$1.ui.projectInspector) && (isTrue(settings$1.ui.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
+          enabled: () => isTrue(settings$1.ui.miscProjectInspector) && (isTrue(settings$1.ui.panelBimTree) || isTrue(settings$1.ui.panelBimInfo)),
           tip: "Project Inspector",
           action: () => side.toggleContent("bim"),
           icon: treeView,
@@ -67625,7 +67786,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonSettings,
-          enabled: () => isTrue(settings$1.ui.settings),
+          enabled: () => isTrue(settings$1.ui.miscSettings),
           tip: "Settings",
           action: () => side.toggleContent("settings"),
           icon: settings,
@@ -67633,7 +67794,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonHelp,
-          enabled: () => isTrue(settings$1.ui.help),
+          enabled: () => isTrue(settings$1.ui.miscHelp),
           tip: "Help",
           action: () => modal.help(true),
           icon: help,
@@ -67641,7 +67802,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonMaximize,
-          enabled: () => isTrue(settings$1.ui.maximise) && settings$1.capacity.canGoFullScreen,
+          enabled: () => isTrue(settings$1.ui.miscMaximise) && settings$1.capacity.canGoFullScreen,
           tip: fullScreen.get() ? "Minimize" : "Fullscreen",
           action: () => fullScreen.toggle(),
           icon: fullScreen.get() ? minimize : fullsScreen,
@@ -67650,7 +67811,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarCamera(camera2) {
+  function controlBarCamera(camera2, settings2) {
     return {
       id: Ids$2.sectionCamera,
       enable: () => true,
@@ -67658,6 +67819,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonCameraAuto,
+          enabled: () => isTrue(settings2.cameraAuto),
           tip: "Auto Camera",
           isOn: () => camera2.autoCamera.get(),
           action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
@@ -67666,7 +67828,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraFrameSelection,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          enabled: () => isTrue(settings2.cameraFrameSelection),
           tip: "Frame Selection",
           action: () => camera2.frameSelection.call(),
           icon: frameSelection,
@@ -67675,7 +67837,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraFrameScene,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          enabled: () => isTrue(settings2.cameraFrameScene),
           tip: "Frame All",
           action: () => camera2.frameScene.call(),
           icon: frameScene,
@@ -67685,7 +67847,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarSelection(isolation) {
+  function controlBarVisibility(isolation, settings2) {
     const adapter = isolation.adapter.current;
     const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection();
     return {
@@ -67695,6 +67857,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonClearSelection,
+          enabled: () => isTrue(settings2.visibilityClearSelection),
           tip: "Clear Selection",
           action: () => adapter.clearSelection(),
           icon: pointer,
@@ -67704,6 +67867,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonShowAll,
           tip: "Show All",
+          enabled: () => isTrue(settings2.visibilityShowAll),
           action: () => adapter.showAll(),
           icon: showAll,
           isOn: () => !isolation.autoIsolate.get() && isolation.visibility.get() !== "all",
@@ -67711,7 +67875,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonHideSelection,
-          enabled: () => someVisible,
+          enabled: () => someVisible && isTrue(settings2.visibilityToggle),
           tip: "Hide Selection",
           action: () => adapter.hideSelection(),
           icon: hideSelection,
@@ -67720,7 +67884,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonShowSelection,
-          enabled: () => !someVisible,
+          enabled: () => !someVisible && isTrue(settings2.visibilityToggle),
           tip: "Show Selection",
           action: () => adapter.showSelection(),
           icon: showSelection,
@@ -67729,6 +67893,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonIsolateSelection,
+          enabled: () => isTrue(settings2.visibilityIsolate),
           tip: "Isolate Selection",
           action: () => adapter.isolateSelection(),
           icon: isolateSelection,
@@ -67737,6 +67902,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonAutoIsolate,
+          enabled: () => isTrue(settings2.visibilityAutoIsolate),
           tip: "Auto Isolate",
           action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
           isOn: () => isolation.autoIsolate.get(),
@@ -67744,6 +67910,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonIsolationSettings,
+          enabled: () => isTrue(settings2.visibilitySettings),
           tip: "Isolation Settings",
           action: () => isolation.showPanel.set(!isolation.showPanel.get()),
           icon: slidersHoriz,
@@ -67754,28 +67921,22 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function useControlBar(viewer, camera2, modal, side, cursor, settings2, section, isolationRef, customization) {
     const measure2 = getMeasureState(viewer, cursor);
-    const pointerSection = controlBarPointer(viewer, camera2, settings2);
-    const actionSection = controlBarMeasure(settings2, measure2);
-    const sectionBoxSection = controlBarSectionBox(section, viewer.selection.any());
-    const settingsSection = controlBarSettings(modal, side, settings2);
-    const cameraSection = controlBarCamera(camera2);
-    const selectionSection = controlBarSelection(isolationRef);
     let controlBarSections = [
-      pointerSection,
-      actionSection,
-      cameraSection,
-      sectionBoxSection,
-      selectionSection,
-      settingsSection
+      controlBarPointer(viewer, camera2, settings2.ui),
+      controlBarCamera(camera2, settings2.ui),
+      controlBarVisibility(isolationRef, settings2.ui),
+      controlBarMeasure(measure2, settings2.ui),
+      controlBarSectionBox(section, viewer.selection.any(), settings2.ui),
+      controlBarSettings(modal, side, settings2)
     ];
     controlBarSections = (customization == null ? void 0 : customization(controlBarSections)) ?? controlBarSections;
     return controlBarSections;
   }
   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);
+    return isTrue(settings2.ui.miscProjectInspector) || isTrue(settings2.ui.miscSettings) || isTrue(settings2.ui.miscHelp) || isTrue(settings2.ui.miscMaximise);
   }
   function RestOfScreen(props) {
     const [, setVersion] = React2.useState(0);
@@ -72676,7 +72837,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return;
     }
     if (rectElem.top < rectContainer.top || rectElem.top < 0) {
-      selection.scrollIntoView();
+      selection.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
   }
   const isControlKey = (e) => {
@@ -72881,8 +73042,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   function OptionalBimPanel(props) {
     return whenSomeTrue(
       [
-        props.settings.ui.bimTreePanel,
-        props.settings.ui.bimInfoPanel
+        props.settings.ui.panelBimTree,
+        props.settings.ui.panelBimInfo
       ],
       React2.createElement(BimPanel, props)
     );
@@ -72895,11 +73056,11 @@ Averrage Date/Second ${avgDataRatePS} kb
     }, [props.viewerState.vim.get(), props.viewerState.elements.get()]);
     const selection = props.viewerState.selection.get();
     const last = selection[selection.length - 1];
-    const fullTree = isFalse(props.settings.ui.bimInfoPanel);
-    const fullInfo = isFalse(props.settings.ui.bimTreePanel);
+    const fullTree = isFalse(props.settings.ui.panelBimInfo);
+    const fullInfo = isFalse(props.settings.ui.panelBimTree);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `vim-bim-panel vc-inset-0 vc-absolute vc-h-full vc-w-full ${fullTree ? "full-tree" : ""} ${props.visible ? "" : "vc-hidden"}`, children: [
       whenTrue(
-        props.settings.ui.bimTreePanel,
+        props.settings.ui.panelBimTree,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `vim-bim-upper vc-flex vc-flex-col vc-absolute vc-w-full ${fullTree ? "vc-h-full" : "vc-h-[49%]"} `, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "h2",
@@ -72933,21 +73094,21 @@ Averrage Date/Second ${avgDataRatePS} kb
       // Divider if needed.
       whenAllTrue(
         [
-          props.settings.ui.bimTreePanel,
-          props.settings.ui.bimInfoPanel,
+          props.settings.ui.panelBimTree,
+          props.settings.ui.panelBimInfo,
           ((_b2 = props.viewerState.elements.get()) == null ? void 0 : _b2.length) > 0
         ],
         divider$1()
       ),
       whenTrue(
-        props.settings.ui.bimInfoPanel,
+        props.settings.ui.panelBimInfo,
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `vim-bim-lower-container vc-absolute ${fullInfo ? "vc-top-0" : "vc-top-[50%]"} vc-bottom-0 vc-bottom vc-left-0 vc-right-0`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           BimInfoPanel,
           {
             object: last,
             vim: props.viewerState.vim.get(),
             elements: props.viewerState.elements.get(),
-            full: isFalse(props.settings.ui.bimTreePanel),
+            full: isFalse(props.settings.ui.panelBimTree),
             bimInfoRef: props.bimInfoRef
           }
         ) })
@@ -73787,7 +73948,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       } else {
         props.container.gfx.style.left = "0px";
       }
-      props.viewer.viewport.ResizeToParent();
+      props.viewer.viewport.resizeToParent();
     };
     const getMaxSize = () => {
       return props.container.root.clientWidth * MAX_WIDTH;
@@ -73846,7 +74007,10 @@ Averrage Date/Second ${avgDataRatePS} kb
         style: {
           position: "absolute"
         },
-        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 vc-bg-gray-lightest vc-text-gray-darker ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
+        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 
+            vc-bg-gray-lightest vc-text-gray-darker 
+            vc-border-r vc-border-gray-light 
+            ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -73929,180 +74093,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       [side, width]
     );
   }
-  function SettingsPanel(props) {
-    if (!props.visible) return null;
-    const toggleElement = (label, state, action) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: state,
-            onChange: action,
-            className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium "
-          }
-        ),
-        " ",
-        label
-      ] });
-    };
-    const settingsToggle = (label, getter, setter) => {
-      const value = getter(props.settings.value);
-      if (value === "AlwaysTrue" || value === "AlwaysFalse") {
-        return null;
-      }
-      return toggleElement(label, value, () => {
-        const value2 = getter(props.settings.value);
-        props.settings.update((s) => setter(s, !value2));
-      });
-    };
-    const settingsBox = (label, info, transform, getter, setter) => {
-      const ref = React2.useRef(null);
-      React2.useEffect(() => {
-        ref.current.value = props.viewer.inputs.scrollSpeed.toFixed(2);
-      }, []);
-      getter(props.settings.value).toString();
-      const update = (event) => {
-        const str = event.target.value;
-        const n = Number.parseFloat(str);
-        if (Number.isNaN(n)) {
-          event.target.value = getter(props.settings.value).toString();
-        } else {
-          const value2 = transform(n);
-          event.target.value = value2.toString();
-          props.settings.update((s) => setter(s, value2));
-        }
-      };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "text", className: "vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1", onBlur: (e) => update(e) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: info })
-      ] });
-    };
-    function settingsSubtitle(title2) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: title2 });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "vc-absolute vc-inset-0",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title", children: "Settings " }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto", children: [
-            settingsSubtitle("Inputs"),
-            settingsBox(
-              "Scroll Speed",
-              "[0.1,10]",
-              (n) => MathUtils.clamp(n, 0.1, 10),
-              (s) => props.viewer.inputs.scrollSpeed,
-              (s, v) => {
-                props.viewer.inputs.scrollSpeed = v;
-              }
-            ),
-            settingsSubtitle("Panels"),
-            settingsToggle(
-              "Show Logo",
-              (settings2) => settings2.ui.logo,
-              (settings2, value) => settings2.ui.logo = value
-            ),
-            settingsToggle(
-              "Show Bim Tree",
-              (settings2) => settings2.ui.bimTreePanel,
-              (settings2, value) => settings2.ui.bimTreePanel = value
-            ),
-            settingsToggle(
-              "Show Bim Info",
-              (settings2) => settings2.ui.bimInfoPanel,
-              (settings2, value) => settings2.ui.bimInfoPanel = value
-            ),
-            settingsToggle(
-              "Show Axes Panel",
-              (settings2) => settings2.ui.axesPanel,
-              (settings2, value) => settings2.ui.axesPanel = value
-            ),
-            settingsToggle(
-              "Show Performance Panel",
-              (settings2) => settings2.ui.performance,
-              (settings2, value) => settings2.ui.performance = value
-            ),
-            settingsSubtitle("Axes"),
-            settingsToggle(
-              "Show Orthographic Button",
-              (settings2) => settings2.ui.orthographic,
-              (settings2, value) => settings2.ui.orthographic = value
-            ),
-            settingsToggle(
-              "Show Reset Camera Button",
-              (settings2) => settings2.ui.resetCamera,
-              (settings2, value) => settings2.ui.resetCamera = value
-            ),
-            settingsSubtitle("Control Bar"),
-            settingsToggle(
-              "Show Control Bar",
-              (settings2) => settings2.ui.controlBar,
-              (settings2, value) => settings2.ui.controlBar = value
-            ),
-            settingsSubtitle("Control Bar - Cursors"),
-            settingsToggle(
-              "Show Orbit Button",
-              (settings2) => settings2.ui.orbit,
-              (settings2, value) => settings2.ui.orbit = value
-            ),
-            settingsToggle(
-              "Show Look Around Button",
-              (settings2) => settings2.ui.lookAround,
-              (settings2, value) => settings2.ui.lookAround = value
-            ),
-            settingsToggle(
-              "Show Pan Button",
-              (settings2) => settings2.ui.pan,
-              (settings2, value) => settings2.ui.pan = value
-            ),
-            settingsToggle(
-              "Show Zoom Button",
-              (settings2) => settings2.ui.zoom,
-              (settings2, value) => settings2.ui.zoom = value
-            ),
-            settingsToggle(
-              "Show Zoom Window Button",
-              (settings2) => settings2.ui.zoomWindow,
-              (settings2, value) => settings2.ui.zoomWindow = value
-            ),
-            settingsSubtitle("Control Bar - Tools"),
-            settingsToggle(
-              "Show Measuring Mode Button",
-              (settings2) => settings2.ui.measuringMode,
-              (settings2, value) => settings2.ui.measuringMode = value
-            ),
-            settingsSubtitle("Control Bar - Settings"),
-            settingsToggle(
-              "Show Project Inspector Button",
-              (settings2) => settings2.ui.projectInspector,
-              (settings2, value) => settings2.ui.projectInspector = value
-            ),
-            settingsToggle(
-              "Show Settings Button",
-              (settings2) => settings2.ui.settings,
-              (settings2, value) => settings2.ui.settings = value
-            ),
-            settingsToggle(
-              "Show Help Button",
-              (settings2) => settings2.ui.help,
-              (settings2, value) => settings2.ui.help = value
-            ),
-            settingsToggle(
-              "Show Maximise Button",
-              (settings2) => settings2.ui.maximise,
-              (settings2, value) => settings2.ui.maximise = value
-            )
-          ] })
-        ]
-      }
-    );
-  }
   const MenuToastMemo = React2.memo(MenuToast);
   function MenuToast(props) {
     const [visible2, setVisible] = React2.useState();
@@ -74267,118 +74257,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     });
   }
-  function useSettings(viewer, value) {
-    const merged = createSettings(value);
-    const [settings2, setSettings] = React2.useState(merged);
-    const onUpdate = React2.useRef();
-    const update = function(updater) {
-      var _a3;
-      const next = { ...settings2 };
-      updater(next);
-      saveSettingsToLocal(next);
-      setSettings(next);
-      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
-    };
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, []);
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, [settings2]);
-    return React2.useMemo(
-      () => ({
-        value: settings2,
-        update,
-        register: (v) => onUpdate.current = v
-      }),
-      [settings2]
-    );
-  }
-  function applySettings(viewer, settings2) {
-    const performance2 = document.getElementsByClassName("vim-performance-div")[0];
-    if (performance2) {
-      if (isTrue(settings2.ui.performance)) {
-        performance2.classList.remove("vc-hidden");
-      } else {
-        performance2.classList.add("vc-hidden");
-      }
-    }
-  }
-  function createContainer(element) {
-    let root = element;
-    if (root === void 0) {
-      root = document.createElement("div");
-      document.body.append(root);
-      root.classList.add("vc-inset-0");
-    }
-    root.style.position = "absolute";
-    root.classList.add("vim-component");
-    const gfx = document.createElement("div");
-    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
-    const ui = document.createElement("div");
-    ui.className = "vim-ui vc-absolute vc-inset-0";
-    root.append(gfx);
-    root.append(ui);
-    const dispose = () => {
-      if (element === void 0) {
-        root.remove();
-      } else {
-        root.classList.remove("vim-component");
-        gfx.remove();
-        ui.remove();
-      }
-    };
-    return { root, ui, gfx, dispose };
-  }
-  async function getElements(vim) {
-    var _a3, _b2, _c, _d, _e;
-    if (!vim.bim) return [];
-    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
-      [
-        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
-        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
-        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
-        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
-        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
-      ]
-    );
-    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
-    if (!elements) return void 0;
-    const result = elements.map((e) => {
-      var _a4;
-      return {
-        ...e,
-        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
-        categoryName: category ? category[e.categoryIndex] : void 0,
-        familyTypeName: familyTypeMap.get(e.index),
-        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
-        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
-      };
-    });
-    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
-    return real;
-  }
-  async function getFamilyTypeNameMap(document2) {
-    const [
-      familyInstanceElement,
-      familyInstanceFamilyType,
-      familyTypeElement,
-      elementName
-    ] = await Promise.all([
-      document2.familyInstance.getAllElementIndex(),
-      document2.familyInstance.getAllFamilyTypeIndex(),
-      document2.familyType.getAllElementIndex(),
-      document2.element.getAllName()
-    ]);
-    return new Map(
-      familyInstanceElement.map((e, i2) => {
-        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
-        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
-        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
-        return [e, name];
-      })
-    );
-  }
   class MutableState {
     constructor(initial) {
       __publicField(this, "_value");
@@ -74407,24 +74285,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
-  function useStateRef(initialValue) {
-    const [value, setValue] = React2.useState(initialValue);
+  function useStateRef(initialValue, isLazy = false) {
+    const getInitialValue = () => {
+      if (isLazy && typeof initialValue === "function") {
+        return initialValue();
+      }
+      return initialValue;
+    };
+    const [box, setBox] = React2.useState(() => ({
+      current: getInitialValue()
+    }));
     const ref = React2.useRef(void 0);
     if (ref.current === void 0) {
-      if (typeof initialValue === "function") {
-        ref.current = initialValue();
-      } else {
-        ref.current = initialValue;
-      }
+      ref.current = getInitialValue();
     }
     const event = React2.useRef(new distExports.SimpleEventDispatcher());
     const validate = React2.useRef((next, current) => next);
-    const confirm = React2.useRef((value2) => value2);
-    const set2 = (value2) => {
-      const finalValue = validate.current(value2, ref.current);
+    const confirm = React2.useRef((value) => value);
+    const set2 = (value) => {
+      const finalValue = validate.current(value, ref.current);
       if (finalValue === ref.current) return;
       ref.current = finalValue;
-      setValue(finalValue);
+      setBox({ current: finalValue });
       event.current.dispatch(finalValue);
     };
     return {
@@ -74450,8 +74332,8 @@ Averrage Date/Second ${avgDataRatePS} kb
        */
       useOnChange(on) {
         React2.useEffect(() => {
-          return event.current.subscribe((value2) => {
-            const result = on(value2);
+          return event.current.subscribe((value) => {
+            const result = on(value);
             if (result instanceof Promise) {
               result.catch(console.error);
             }
@@ -74465,7 +74347,7 @@ Averrage Date/Second ${avgDataRatePS} kb
        * @returns The memoized value.
        */
       useMemo(on, deps) {
-        return React2.useMemo(() => on(value), [...deps || [], value]);
+        return React2.useMemo(() => on(box.current), [...deps || [], box.current]);
       },
       /**
        * Sets a validation function to process any new state value before updating.
@@ -74642,21 +74524,129 @@ Averrage Date/Second ${avgDataRatePS} kb
     useRefresher,
     useStateRef
   }, Symbol.toStringTag, { value: "Module" }));
-  function useViewerState(viewer) {
-    const getVim = () => {
+  function useSettings(value, defaultSettings, applySettings = () => {
+  }) {
+    const merged = createSettings(value, defaultSettings);
+    const [settings2, setSettings] = React2.useState(merged);
+    const onUpdate = React2.useRef();
+    const customizer = useStateRef((settings22) => settings22);
+    const update = function(updater) {
       var _a3;
-      const v = (_a3 = viewer.vims) == null ? void 0 : _a3[0];
-      return v;
-    };
-    const getSelection = () => {
-      return [...viewer.selection.getAll()].filter((o) => o.type === "Element3D");
+      const next = { ...settings2 };
+      updater(next);
+      saveSettingsToLocal(next);
+      setSettings(next);
+      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
     };
-    const vim = useStateRef(getVim());
-    const selection = useStateRef(getSelection());
-    const allElements = useStateRef([]);
-    const filteredElements = useStateRef([]);
-    const filter2 = useStateRef("");
-    const applyFilter = () => {
+    React2.useEffect(() => {
+      applySettings(settings2);
+    }, []);
+    React2.useEffect(() => {
+      applySettings(settings2);
+    }, [settings2]);
+    return React2.useMemo(
+      () => ({
+        value: settings2,
+        update,
+        register: (v) => onUpdate.current = v,
+        customizer
+      }),
+      [settings2]
+    );
+  }
+  function createSettings(settings2, defaultSettings) {
+    return settings2 !== void 0 ? deepmerge(defaultSettings, settings2) : defaultSettings;
+  }
+  function createContainer(element) {
+    let root = element;
+    if (root === void 0) {
+      root = document.createElement("div");
+      document.body.append(root);
+      root.classList.add("vc-inset-0");
+    }
+    root.style.position = "absolute";
+    root.classList.add("vim-component");
+    const gfx = document.createElement("div");
+    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
+    const ui = document.createElement("div");
+    ui.className = "vim-ui vc-absolute vc-inset-0";
+    root.append(gfx);
+    root.append(ui);
+    const dispose = () => {
+      if (element === void 0) {
+        root.remove();
+      } else {
+        root.classList.remove("vim-component");
+        gfx.remove();
+        ui.remove();
+      }
+    };
+    return { root, ui, gfx, dispose };
+  }
+  async function getElements(vim) {
+    var _a3, _b2, _c, _d, _e;
+    if (!vim.bim) return [];
+    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
+      [
+        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
+        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
+        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
+        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
+        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
+      ]
+    );
+    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
+    if (!elements) return void 0;
+    const result = elements.map((e) => {
+      var _a4;
+      return {
+        ...e,
+        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
+        categoryName: category ? category[e.categoryIndex] : void 0,
+        familyTypeName: familyTypeMap.get(e.index),
+        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
+        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
+      };
+    });
+    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
+    return real;
+  }
+  async function getFamilyTypeNameMap(document2) {
+    const [
+      familyInstanceElement,
+      familyInstanceFamilyType,
+      familyTypeElement,
+      elementName
+    ] = await Promise.all([
+      document2.familyInstance.getAllElementIndex(),
+      document2.familyInstance.getAllFamilyTypeIndex(),
+      document2.familyType.getAllElementIndex(),
+      document2.element.getAllName()
+    ]);
+    return new Map(
+      familyInstanceElement.map((e, i2) => {
+        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
+        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
+        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
+        return [e, name];
+      })
+    );
+  }
+  function useViewerState(viewer) {
+    const getVim = () => {
+      var _a3;
+      const v = (_a3 = viewer.vims) == null ? void 0 : _a3[0];
+      return v;
+    };
+    const getSelection = () => {
+      return [...viewer.selection.getAll()].filter((o) => o.type === "Element3D");
+    };
+    const vim = useStateRef(getVim());
+    const selection = useStateRef(getSelection());
+    const allElements = useStateRef([]);
+    const filteredElements = useStateRef([]);
+    const filter2 = useStateRef("");
+    const applyFilter = () => {
       const filtered = filterElements(allElements.get(), filter2.get());
       filteredElements.set(filtered);
     };
@@ -74783,12 +74773,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const vcLink = `${vcColorLink} vc-underline`;
   const vcLabel = "vc-text-[#3F444F]";
   const vcRoboto = "vc-font-['Roboto',sans-serif]";
-  function footer$1(url) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `vc-text-xs vc-font-normal ${vcColorSecondary}`, children: [
-      "More troubleshooting tips can be found",
-      " ",
-      link(url, "here")
-    ] });
+  function footer$1() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   }
   function mainText(text) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `vim-main-text vc-text-base ${vcColorPrimary} vc-mb-4 vc-font-normal`, children: text });
@@ -74836,20 +74822,11 @@ Averrage Date/Second ${avgDataRatePS} kb
     vcLink,
     vcRoboto
   }, Symbol.toStringTag, { value: "Module" }));
-  const support = "https://docs.vimaec.com";
-  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
-  const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
-  const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    support,
-    supportControls,
-    supportUltra
-  }, Symbol.toStringTag, { value: "Module" }));
   function fileOpeningError(url) {
     return {
       title: "File Opening Error",
       body: serverFileOpeningErrorBody(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -74871,7 +74848,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "File Downloading Error",
       body: body$5(url, authToken, server),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -74900,7 +74877,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "File Loading Error",
       body: body$4(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -74920,11 +74897,18 @@ Averrage Date/Second ${avgDataRatePS} kb
       ])
     ] });
   }
+  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" }));
   function serverConnectionError(url) {
     return {
       title: "Connection Error",
       body: body$3(url, isLocalUrl(url)),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -74954,7 +74938,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "Compatibility Error",
       body: body$2(url, localVersion, remoteVersion),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -74983,7 +74967,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "Stream Error",
       body: body$1(),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75230,16 +75214,19 @@ Averrage Date/Second ${avgDataRatePS} kb
     }
   }
   function MessageBox(props) {
+    const [minimized, setMinimized] = React2.useState(props.value.minimize ?? false);
     const p = props.value;
     if (!p.title || !p.body) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-message-box vc-p-6 vc-max-h-[80%] vc-max-w-[80%] vc-w-[424px] vc-bg-white vc-rounded-md vc-shadow-message vc-shadow-[0px_4px_16px_rgba(33,39,51,0.5)] vc-font-roboto", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-flex vc-justify-between vc-items-center", children: [
+        props.value.icon,
         title(p.title),
-        closeBtn(p.onClose)
+        props.value.canClose && closeBtn(p.onClose),
+        props.value.minimize && minimizeButton(minimized, setMinimized)
       ] }),
-      divider(),
-      body(p.body),
-      footer(p.footer)
+      !minimized && divider(),
+      !minimized && body(p.body),
+      !minimized && footer(p.footer)
     ] });
   }
   function title(title2) {
@@ -75249,6 +75236,9 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (!onClose) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: onClose, className: "vc-text-[#212733] vc-text-xl", children: "×" });
   }
+  function minimizeButton(minimized, setMinimized) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setMinimized(!minimized), className: "vc-text-[#212733] vc-text-xl", children: minimized ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▼" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▲" }) });
+  }
   function body(content2) {
     if (content2 === void 0) return null;
     if (typeof content2 === "string") {
@@ -75754,7 +75744,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Ids = {
     showGhost: "isolationPanel.showGhost",
-    ghostOpacity: "isolationPanel.ghostOpacity"
+    ghostOpacity: "isolationPanel.ghostOpacity",
+    transparency: "isolationPanel.transparency"
   };
   const IsolationPanel$1 = React2.forwardRef(
     (props, ref) => {
@@ -75766,8 +75757,20 @@ Averrage Date/Second ${avgDataRatePS} kb
           anchorElement: document.getElementById("vim-control-bar"),
           showPanel: props.state.showPanel,
           entries: [
-            { type: "bool", id: Ids.showGhost, label: "Show Ghost", state: props.state.showGhost },
-            // { type: "bool", id: "showRooms", label: "Show Rooms", state: props.state.showRooms },
+            {
+              type: "bool",
+              id: Ids.showGhost,
+              label: "Show Ghost",
+              state: props.state.showGhost
+            },
+            /*
+            {
+              type: "bool",
+              id: "showRooms",
+              label: "Show Rooms",
+              state: props.state.showRooms
+            },
+            */
             {
               type: "number",
               id: Ids.ghostOpacity,
@@ -75777,6 +75780,13 @@ Averrage Date/Second ${avgDataRatePS} kb
               min: 0,
               max: 1,
               step: 0.05
+            },
+            {
+              type: "bool",
+              visible: () => props.transparency,
+              id: Ids.transparency,
+              label: "Transparency",
+              state: props.state.transparency
             }
           ]
         }
@@ -75785,12 +75795,13 @@ Averrage Date/Second ${avgDataRatePS} kb
   );
   function useSharedIsolation(adapter) {
     const _adapter = React2.useRef(adapter);
-    const visibility = useStateRef(() => adapter.computeVisibility());
+    const visibility = useStateRef(() => adapter.computeVisibility(), true);
     const autoIsolate2 = useStateRef(false);
     const showPanel = useStateRef(false);
     const showRooms = useStateRef(false);
     const showGhost = useStateRef(false);
-    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity());
+    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity(), true);
+    const transparency = useStateRef(true);
     const onAutoIsolate = useFuncRef(() => {
       if (adapter.hasSelection()) {
         adapter.isolateSelection();
@@ -75815,6 +75826,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     });
     showGhost.useOnChange((v) => adapter.showGhost(v));
     showRooms.useOnChange((v) => adapter.setShowRooms(v));
+    transparency.useOnChange((v) => adapter.enableTransparency(v));
     ghostOpacity.useValidate((next, current) => {
       return next <= 0 ? current : next;
     });
@@ -75828,7 +75840,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       showRooms,
       ghostOpacity,
       onAutoIsolate,
-      onVisibilityChange
+      onVisibilityChange,
+      transparency
     };
   }
   function useWebglIsolation(viewer) {
@@ -75836,6 +75849,29 @@ Averrage Date/Second ${avgDataRatePS} kb
     return useSharedIsolation(adapter);
   }
   function createWebglIsolationAdapter(viewer) {
+    var transparency = true;
+    var ghost2 = false;
+    var rooms = false;
+    function updateMaterials() {
+      viewer.renderer.modelMaterial = !ghost2 && transparency ? void 0 : ghost2 && transparency ? [void 0, viewer.materials.ghost] : !ghost2 && !transparency ? viewer.materials.simple : ghost2 && !transparency ? [viewer.materials.simple, viewer.materials.ghost] : (() => {
+        throw new Error("Unreachable state in isolation materials");
+      })();
+    }
+    function updateVisibility(elements, predicate) {
+      if (elements === "all") {
+        for (let v of viewer.vims) {
+          for (let o of v.getAllElements()) {
+            if (o.type === "Element3D") {
+              o.visible = o.isRoom ? rooms : predicate(o);
+            }
+          }
+        }
+      } else {
+        for (let o of elements) {
+          o.visible = o.isRoom ? rooms : predicate(o);
+        }
+      }
+    }
     return {
       onVisibilityChange: viewer.renderer.onSceneUpdated,
       onSelectionChanged: viewer.selection.onSelectionChanged,
@@ -75844,28 +75880,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       hasVisibleSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => o.visible),
       hasHiddenSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => !o.visible),
       clearSelection: () => viewer.selection.clear(),
-      isolateSelection: () => updateAllVisibility(viewer, (o) => viewer.selection.has(o)),
+      isolateSelection: () => updateVisibility("all", (o) => viewer.selection.has(o)),
       hideSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = false);
+        updateVisibility(viewer.selection.getAll(), (o) => false);
       },
       showSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = true);
+        updateVisibility(viewer.selection.getAll(), (o) => true);
       },
       hideAll: () => {
-        updateAllVisibility(viewer, (o) => false);
+        updateVisibility("all", (o) => false);
       },
       showAll: () => {
-        updateAllVisibility(viewer, (o) => true);
+        updateVisibility("all", (o) => true);
       },
       isolate: (instances) => {
         const set2 = new Set(instances);
-        updateAllVisibility(viewer, (o) => o.instances.some((i2) => set2.has(i2)));
+        updateVisibility("all", (o) => o.instances.some((i2) => set2.has(i2)));
       },
       show: (instances) => {
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = true;
+            o.visible = o.isRoom ? rooms : true;
           }
         }
       },
@@ -75873,29 +75909,30 @@ Averrage Date/Second ${avgDataRatePS} kb
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = false;
+            o.visible = o.isRoom ? rooms : false;
           }
         }
       },
+      enableTransparency: (enable) => {
+        if (transparency !== enable) {
+          transparency = enable;
+          updateMaterials();
+        }
+      },
       showGhost: (show) => {
-        viewer.renderer.modelMaterial = show ? [viewer.materials.simple, viewer.materials.ghost] : void 0;
+        ghost2 = show;
+        updateMaterials();
       },
       getGhostOpacity: () => viewer.materials.ghostOpacity,
       setGhostOpacity: (opacity) => viewer.materials.ghostOpacity = opacity,
-      getShowRooms: () => true,
+      getShowRooms: () => rooms,
       setShowRooms: (show) => {
-        console.log("setShowRooms not implemented");
-      }
-    };
-  }
-  function updateAllVisibility(viewer, predicate) {
-    for (let v of viewer.vims) {
-      for (let o of v.getAllElements()) {
-        if (o.type === "Element3D") {
-          o.visible = predicate(o);
+        if (rooms !== show) {
+          rooms = show;
+          updateVisibility("all", (o) => o.visible);
         }
       }
-    }
+    };
   }
   function getVisibilityState$1(viewer) {
     let all = true;
@@ -75921,6 +75958,572 @@ Averrage Date/Second ${avgDataRatePS} kb
     if (onlySelectionFlag) return "onlySelection";
     return "some";
   }
+  function getDefaultSettings() {
+    return {
+      capacity: {
+        canFollowUrl: true,
+        canGoFullScreen: true,
+        canDownload: true,
+        canReadLocalStorage: true
+      },
+      ui: {
+        panelLogo: true,
+        panelPerformance: false,
+        panelBimTree: true,
+        panelBimInfo: true,
+        panelAxes: true,
+        panelControlBar: true,
+        axesOrthographic: true,
+        axesHome: true,
+        // Control bar - cursors
+        cursorOrbit: true,
+        cursorLookAround: true,
+        cursorPan: true,
+        cursorZoom: true,
+        // Control bar - camera
+        cameraAuto: true,
+        cameraFrameScene: true,
+        cameraFrameSelection: true,
+        // Control bar - tools
+        sectioningEnable: true,
+        sectioningFitToSelection: true,
+        sectioningReset: true,
+        sectioningShow: true,
+        sectioningAuto: true,
+        sectioningSettings: true,
+        measureEnable: true,
+        // Control bar - Visibility
+        visibilityClearSelection: true,
+        visibilityShowAll: true,
+        visibilityToggle: true,
+        visibilityIsolate: true,
+        visibilityAutoIsolate: true,
+        visibilitySettings: true,
+        // Control bar - settings
+        miscProjectInspector: true,
+        miscSettings: true,
+        miscHelp: true,
+        miscMaximise: true
+      }
+    };
+  }
+  function renderSettingsInputBox(settings2, item) {
+    const ref = React2.useRef(null);
+    React2.useEffect(() => {
+      var _a3;
+      ref.current.value = (_a3 = item.getter(settings2.value)) == null ? void 0 : _a3.toString();
+    }, []);
+    const update = (event) => {
+      const str = event.target.value;
+      const n = Number.parseFloat(str);
+      if (Number.isNaN(n)) {
+        event.target.value = item.getter(settings2.value).toString();
+      } else {
+        const value = item.transform(n);
+        event.target.value = value.toString();
+        settings2.update((s) => item.setter(s, value));
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1 ", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
+        item.label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          className: "vim-settings-textbox vc-border vc-rounded-sm vc-border-gray vc-w-14 vc-ml-1 vc-p-1",
+          onBlur: update
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: item.info })
+    ] });
+  }
+  function renderSettingsToggle(settings2, item) {
+    const value = item.getter(settings2.value);
+    if (value === "AlwaysTrue" || value === "AlwaysFalse") return null;
+    const handleChange = () => {
+      const current = item.getter(settings2.value);
+      settings2.update((s) => item.setter(s, !current));
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value,
+          onChange: handleChange,
+          className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium"
+        }
+      ),
+      " ",
+      item.label
+    ] });
+  }
+  function renderSettingsSubtitle(item) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: item.title });
+  }
+  function SettingsPanel(props) {
+    if (!props.visible) return null;
+    function renderItem(settings2, item) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(React2.Fragment, { children: (() => {
+        switch (item.type) {
+          case "subtitle":
+            return renderSettingsSubtitle(item);
+          case "toggle":
+            return renderSettingsToggle(settings2, item);
+          case "box":
+            return renderSettingsInputBox(settings2, item);
+          case "element":
+            return item.element;
+          default:
+            return null;
+        }
+      })() }, item.key);
+    }
+    const customizer = props.settings.customizer.get();
+    const content2 = customizer ? customizer(props.content) : props.content;
+    const sections = buildSections(content2);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-absolute vc-inset-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title vc-mb-2", children: "Settings" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "\r\n        vim-settings\r\n        vc-absolute vc-top-8 vc-left-0 vc-right-0 vc-bottom-0\r\n        vc-overflow-y-auto\r\n        vc-pr-2\r\n        vc-space-y-2\r\n        vc-box-border\r\n      ", children: sections.map((section) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "details",
+        {
+          open: true,
+          className: "\r\n              vim-settings-section\r\n              vc-bg-white\r\n              vc-rounded-md\r\n              vc-shadow-sm\r\n              vc-border\r\n              vc-border-slate-200\r\n              vc-p-2\r\n              vc-space-y-2\r\n            ",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "vim-settings-section-title vc-font-medium vc-text-sm vc-cursor-pointer", children: section.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-settings-section-content vc-mt-2 vc-space-y-2", children: section.items.map(
+              (item) => renderItem(props.settings, item)
+            ) })
+          ]
+        },
+        section.key
+      )) })
+    ] });
+  }
+  function buildSections(items) {
+    const sections = [];
+    let current = null;
+    for (const item of items) {
+      if (item.type === "subtitle") {
+        current = {
+          key: item.key,
+          title: item.title,
+          items: []
+        };
+        sections.push(current);
+      } else {
+        if (!current) {
+          current = {
+            key: "default",
+            title: "",
+            items: []
+          };
+          sections.push(current);
+        }
+        current.items.push(item);
+      }
+    }
+    return sections;
+  }
+  class SettingsPanelKeys {
+  }
+  // === Inputs ===
+  __publicField(SettingsPanelKeys, "InputsSubtitle", "inputs");
+  __publicField(SettingsPanelKeys, "InputsScrollSpeedBox", "scrollSpeed");
+  // === Panels ===
+  __publicField(SettingsPanelKeys, "PanelsSubtitle", "panels");
+  __publicField(SettingsPanelKeys, "PanelsShowLogoToggle", "logo");
+  __publicField(SettingsPanelKeys, "PanelsShowBimTreeToggle", "bimTree");
+  __publicField(SettingsPanelKeys, "PanelsShowBimInfoToggle", "bimInfo");
+  __publicField(SettingsPanelKeys, "PanelsShowAxesPanelToggle", "axesPanel");
+  __publicField(SettingsPanelKeys, "PanelsShowPerformancePanelToggle", "performance");
+  // === Axes ===
+  __publicField(SettingsPanelKeys, "AxesSubtitle", "axes");
+  __publicField(SettingsPanelKeys, "AxesShowOrthographicButtonToggle", "orthographic");
+  __publicField(SettingsPanelKeys, "AxesShowResetCameraButtonToggle", "resetCamera");
+  // === Control Bar ===
+  __publicField(SettingsPanelKeys, "ControlBarSubtitle", "controlBar");
+  __publicField(SettingsPanelKeys, "ControlBarShowControlBarToggle", "controlBarVisible");
+  // --- Control Bar - Cursors ---
+  __publicField(SettingsPanelKeys, "ControlBarCursorsSubtitle", "controlBarCursors");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowOrbitButtonToggle", "orbit");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowLookAroundButtonToggle", "lookAround");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowPanButtonToggle", "pan");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomButtonToggle", "zoom");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomWindowButtonToggle", "zoomWindow");
+  // --- Control Bar - Tools ---
+  __publicField(SettingsPanelKeys, "ControlBarToolsSubtitle", "controlBarTools");
+  __publicField(SettingsPanelKeys, "ControlBarToolsShowMeasuringModeButtonToggle", "measuringMode");
+  // --- Control Bar Camera ---
+  __publicField(SettingsPanelKeys, "ControlBarCameraSubtitle", "settingsPanel.controlBar.Camera");
+  __publicField(SettingsPanelKeys, "ControlBarAutoCamera", "settingsPanel.controlBar.autoCamera");
+  __publicField(SettingsPanelKeys, "ControlBarFrameSelection", "settingsPanel.controlBar.frameSelection");
+  __publicField(SettingsPanelKeys, "ControlBarFrameAll", "settingsPanel.controlBar.frameAll");
+  // --- Control Bar - Sectioning ---
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSubtitle", "settingsPanel.controlBar.sectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningEnable", "settingsPanel.controlBar.enableSectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningFitToSelection", "settingsPanel.controlBar.fitToSelection");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningReset", "settingsPanel.controlBar.reset");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningShow", "settingsPanel.controlBar.show");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningAuto", "settingsPanel.controlBar.auto");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSettings", "settingsPanel.controlBar.settings");
+  // --- Control Bar - Visibility ---
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySubtitle", "controlBar.visibility.subtitle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityClearSelection", "controlBar.visibility.clearSelection");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityShowAll", "controlBar.visibility.showAll");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityToggle", "controlBar.visibility.toggle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityIsolate", "controlBar.visibility.isolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityAutoIsolate", "controlBar.visibility.autoIsolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySettings", "controlBar.visibility.settings");
+  // --- Control Bar - Settings ---
+  __publicField(SettingsPanelKeys, "ControlBarSettingsSubtitle", "controlBarSettings");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowProjectInspectorButtonToggle", "projectInspector");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowSettingsButtonToggle", "settingsButton");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowHelpButtonToggle", "help");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowMaximiseButtonToggle", "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.ControlBarSettingsSubtitle,
+        title: "Control Bar - Settings"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowProjectInspectorButtonToggle,
+        label: "Project Inspector",
+        getter: (s) => s.ui.miscProjectInspector,
+        setter: (s, v) => s.ui.miscProjectInspector = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+        label: "Settings",
+        getter: (s) => s.ui.miscSettings,
+        setter: (s, v) => s.ui.miscSettings = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowHelpButtonToggle,
+        label: "Help",
+        getter: (s) => s.ui.miscHelp,
+        setter: (s, v) => s.ui.miscHelp = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowMaximiseButtonToggle,
+        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();
@@ -75951,7 +76554,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer$1(props) {
-    const settings2 = useSettings(props.viewer, props.settings ?? {});
+    const settings2 = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s));
     const modal = React2.useRef(null);
     const sectionBoxRef = useWebglSectionBox(props.viewer);
     const isolationPanelHandle = React2.useRef(null);
@@ -75961,7 +76564,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     const loader = React2.useRef(new ComponentLoader(props.viewer, modal, settings2.value));
     useViewerInput(props.viewer.inputs, camera2);
     const side = useSideState(
-      isTrue(settings2.value.ui.bimTreePanel) || isTrue(settings2.value.ui.bimInfoPanel),
+      isTrue(settings2.value.ui.panelBimTree) || isTrue(settings2.value.ui.panelBimInfo),
       Math.min(props.container.root.clientWidth * 0.25, 340)
     );
     const [contextMenu2, setcontextMenu] = React2.useState();
@@ -75977,6 +76580,16 @@ Averrage Date/Second ${avgDataRatePS} kb
       side.setHasBim(((_a3 = viewerState.vim.get()) == null ? void 0 : _a3.bim) !== void 0);
     });
     React2.useEffect(() => {
+      sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+        if (show) {
+          isolationRef.showPanel.set(false);
+        }
+      });
+      isolationRef.showPanel.onChange.subscribe((show) => {
+        if (show) {
+          sectionBoxRef.showOffsetPanel.set(false);
+        }
+      });
       if (performanceRef.current) {
         addPerformanceCounter(performanceRef.current);
       }
@@ -75990,7 +76603,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         loader: loader.current,
         isolation: isolationRef,
         camera: camera2,
-        settings: settings2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76036,7 +76653,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         SettingsPanel,
         {
           visible: side.getContent() === "settings",
-          viewer: props.viewer,
+          content: getWebglSettingsContent(props.viewer),
           settings: settings2
         }
       )
@@ -76056,16 +76673,16 @@ Averrage Date/Second ${avgDataRatePS} kb
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Overlay, { canvas: props.viewer.viewport.canvas }),
-          whenTrue(settings2.value.ui.logo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
+          whenTrue(settings2.value.ui.panelLogo, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ControlBar,
             {
               content: controlBar,
-              show: isTrue(settings2.value.ui.controlBar)
+              show: isTrue(settings2.value.ui.panelControlBar)
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SectionBoxPanel$1, { ref: sectionBoxPanelHandle, state: sectionBoxRef }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolationRef }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(IsolationPanel$1, { ref: isolationPanelHandle, state: isolationRef, transparency: true }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             AxesPanelMemo,
             {
@@ -76104,7 +76721,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer: Viewer$1,
-    createViewer: createViewer$1
+    createViewer: createViewer$1,
+    getDefaultSettings
   }, Symbol.toStringTag, { value: "Module" }));
   function getErrorMessage(state) {
     if (state.status !== "error") return void 0;
@@ -76163,18 +76781,20 @@ Averrage Date/Second ${avgDataRatePS} kb
         viewer.sectionBox.interactive = b;
       },
       getBox: () => viewer.sectionBox.getBox(),
-      setBox: (box) => viewer.sectionBox.fitBox(box),
+      setBox: (box) => viewer.sectionBox.setBox(box),
       onSelectionChanged: viewer.selection.onSelectionChanged,
       getSelectionBox: () => viewer.selection.getBoundingBox(),
       getSceneBox: () => viewer.renderer.getBoundingBox()
     };
     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, customization) {
+    let bar = [
+      controlBarCamera(camera2, settings2.ui),
+      controlBarVisibility(isolation, settings2.ui),
+      controlBarSectionBox(section, viewer.selection.any(), settings2.ui),
+      controlBarSettingsUltra(side, settings2)
+    ];
     bar = (customization == null ? void 0 : customization(bar)) ?? bar;
     return bar;
   }
@@ -76244,6 +76864,7 @@ Averrage Date/Second ${avgDataRatePS} kb
           obj.state = VisibilityState.HIGHLIGHTED;
         });
       },
+      // TODO: Change this api to use elements
       isolate: (instances) => {
         hide("all");
         viewer.selection.getAll().forEach((obj) => {
@@ -76277,11 +76898,12 @@ Averrage Date/Second ${avgDataRatePS} kb
           }
         }
       },
-      getGhostOpacity: () => viewer.renderer.ghostColor.a,
+      enableTransparency: (enable) => {
+        console.log("enableTransparency not implemented");
+      },
+      getGhostOpacity: () => viewer.renderer.ghostOpacity,
       setGhostOpacity: (opacity) => {
-        const c = viewer.renderer.ghostColor.clone();
-        c.a = opacity;
-        viewer.renderer.ghostColor = c;
+        viewer.renderer.ghostOpacity = opacity;
       },
       getShowRooms: () => true,
       setShowRooms: (show) => {
@@ -76320,7 +76942,61 @@ Averrage Date/Second ${avgDataRatePS} kb
   function allButSelection(viewer, vim) {
     return false;
   }
-  function createViewer(container) {
+  function getDefaultUltraSettings() {
+    return {
+      ui: {
+        // 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,
+        settings: true
+      }
+    };
+  }
+  function getControlBarUltraSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarSettingsSubtitle,
+        title: "Control Bar - Settings"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+        label: "Settings",
+        getter: (s) => s.ui.settings,
+        setter: (s, v) => s.ui.settings = 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);
@@ -76339,6 +77015,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           container: cmpContainer,
           core,
+          settings: settings2,
           onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
         }
       )
@@ -76346,18 +77023,37 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer(props) {
-    const sectionBox2 = useUltraSectionBox(props.core);
-    const camera2 = useUltraCamera(props.core, sectionBox2);
+    const settings2 = useSettings(props.settings ?? {}, getDefaultUltraSettings());
+    const sectionBoxRef = useUltraSectionBox(props.core);
+    const camera2 = useUltraCamera(props.core, sectionBoxRef);
     const isolationPanelHandle = React2.useRef(null);
     const sectionBoxPanelHandle = React2.useRef(null);
     const modalHandle = React2.useRef(null);
     const side = useSideState(true, 400);
     const [_, setSelectState] = React2.useState(0);
     const [controlBarCustom, setControlBarCustom] = React2.useState(() => (c) => c);
-    const isolation = useUltraIsolation(props.core);
-    const controlBar = useUltraControlBar(props.core, sectionBox2, isolation, camera2, (_2) => _2);
+    const isolationRef = useUltraIsolation(props.core);
+    const controlBar = useUltraControlBar(
+      props.core,
+      sectionBoxRef,
+      isolationRef,
+      camera2,
+      settings2.value,
+      side,
+      (_2) => _2
+    );
     useViewerInput(props.core.inputs, camera2);
     React2.useEffect(() => {
+      sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+        if (show) {
+          isolationRef.showPanel.set(false);
+        }
+      });
+      isolationRef.showPanel.onChange.subscribe((show) => {
+        if (show) {
+          sectionBoxRef.showOffsetPanel.set(false);
+        }
+      });
       props.core.onStateChanged.subscribe((state) => updateModal(modalHandle, state));
       props.core.selection.onSelectionChanged.subscribe(() => {
         setSelectState((i2) => (i2 + 1) % 2);
@@ -76367,9 +77063,14 @@ Averrage Date/Second ${avgDataRatePS} kb
         get modal() {
           return modalHandle.current;
         },
-        isolation,
-        sectionBox: sectionBox2,
+        isolation: isolationRef,
+        sectionBox: sectionBoxRef,
         camera: camera2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76384,7 +77085,24 @@ Averrage Date/Second ${avgDataRatePS} kb
         load: patchLoad(props.core, modalHandle)
       });
     }, []);
+    const sidePanel = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SettingsPanel,
+      {
+        visible: side.getContent() === "settings",
+        content: getUltraSettingsContent(props.core),
+        settings: settings2
+      }
+    ) });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SidePanelMemo,
+        {
+          container: props.container,
+          viewer: props.core,
+          side,
+          content: sidePanel
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           whenTrue(true, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
@@ -76396,8 +77114,8 @@ Averrage Date/Second ${avgDataRatePS} kb
               show: true
             }
           ),
-          /* @__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 }),
@@ -76435,7 +77153,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer,
-    createViewer
+    createViewer,
+    getDefaultUltraSettings
   }, Symbol.toStringTag, { value: "Module" }));
   const SectionBoxPanel = {
     Ids