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

package/dist/vim-web.js

@@ -46769,6 +46769,11 @@ let Vim$1 = class Vim {
   * @param {boolean} isLegacy - Indicates whether the Vim object uses a legacy loading pipeline.
   */
   constructor(header, document2, g3d2, scene, settings2, map, builder, source, format) {
+    /**
+     * The type of the viewer, indicating it is a WebGL viewer.
+     * Useful for distinguishing between different viewer types in a multi-viewer application.
+     */
+    __publicField(this, "type", "webgl");
     /**
      * Indicates whether the vim was opened from a vim or vimx file.
      */
@@ -48846,19 +48851,38 @@ class InsertableMesh {
     return new InsertableSubmesh(this, index2);
   }
   /**
-   * Overrides mesh material, set to undefine to restore initial material.
-   */
+     * Sets the material for this mesh. 
+     * Set to undefined to reset to original materials.
+     */
   setMaterial(value) {
-    if (this._material === value) return;
     if (this.ignoreSceneMaterial) return;
-    this.mesh.material = value ?? this._material;
+    const base = this._material;
+    let mat;
+    if (Array.isArray(value)) {
+      mat = this._mergeMaterials(value, base);
+    } else {
+      mat = value ?? base;
+    }
+    this.mesh.material = mat;
     this.mesh.geometry.clearGroups();
-    if (value instanceof Array) {
-      value.forEach((m, i) => {
+    if (Array.isArray(mat)) {
+      mat.forEach((_m, i) => {
         this.mesh.geometry.addGroup(0, Infinity, i);
       });
     }
   }
+  _mergeMaterials(value, base) {
+    const baseArr = Array.isArray(base) ? base : [base];
+    const result = [];
+    for (const v of value) {
+      if (v === void 0) {
+        result.push(...baseArr);
+      } else {
+        result.push(v);
+      }
+    }
+    return result;
+  }
 }
 class InstancedSubmesh {
   constructor(mesh, index2) {
@@ -48945,17 +48969,39 @@ class InstancedMesh2 {
     }
     return submeshes;
   }
+  /**
+     * Sets the material for this mesh. 
+     * Set to undefined to reset to original materials.
+     */
   setMaterial(value) {
-    if (this._material === value) return;
     if (this.ignoreSceneMaterial) return;
-    this.mesh.material = value ?? this._material;
+    const base = this._material;
+    let mat;
+    if (Array.isArray(value)) {
+      mat = this._mergeMaterials(value, base);
+    } else {
+      mat = value ?? base;
+    }
+    this.mesh.material = mat;
     this.mesh.geometry.clearGroups();
-    if (value instanceof Array) {
-      value.forEach((m, i) => {
+    if (Array.isArray(mat)) {
+      mat.forEach((_m, i) => {
         this.mesh.geometry.addGroup(0, Infinity, i);
       });
     }
   }
+  _mergeMaterials(value, base) {
+    const baseArr = Array.isArray(base) ? base : [base];
+    const result = [];
+    for (const v of value) {
+      if (v === void 0) {
+        result.push(...baseArr);
+      } else {
+        result.push(v);
+      }
+    }
+    return result;
+  }
   computeBoundingBoxes() {
     this.mesh.geometry.computeBoundingBox();
     const boxes = new Array(this.mesh.count);
@@ -50095,6 +50141,9 @@ const _Marker = class _Marker {
   get index() {
     return this._submesh.index;
   }
+  get isRoom() {
+    return false;
+  }
   /**
    * Updates the underlying submesh and rebinds all attributes to the new mesh.
    * @param mesh - The new submesh to bind to this marker.
@@ -50825,6 +50874,164 @@ function isFilePathOrUri(input) {
   }
   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
@@ -50876,16 +51083,16 @@ class Validation {
   //= ===========================================================================
   // 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)) {
@@ -50934,23 +51141,6 @@ class Validation {
     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) {
@@ -51037,6 +51227,13 @@ class Validation {
     }
     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),
@@ -52433,7 +52630,11 @@ class KeyboardHandler extends BaseInputHandler {
    * @param handler Callback invoked on key up.
    */
   registerKeyUp(code, mode, handler) {
-    this.registerKey(this.keyUpHandlers, code, mode, handler);
+    if (Array.isArray(code)) {
+      code.forEach((c) => this.registerKey(this.keyUpHandlers, c, mode, handler));
+    } else {
+      this.registerKey(this.keyUpHandlers, code, mode, handler);
+    }
   }
   registerKey(map, code, mode, callback) {
     mode = map.has(code) ? mode : "replace";
@@ -52479,6 +52680,7 @@ class MouseHandler extends BaseInputHandler {
     __publicField(this, "onClick");
     __publicField(this, "onDoubleClick");
     __publicField(this, "onWheel");
+    __publicField(this, "onContextMenu");
     this._capture = new CaptureHandler(canvas);
     this._dragHandler = new DragHandler((delta, button) => this.onDrag(delta, button));
   }
@@ -52520,6 +52722,7 @@ class MouseHandler extends BaseInputHandler {
       this.handleDoubleClick(event);
     } else {
       this.handleMouseClick(event);
+      this.handleContextMenu(event);
     }
     event.preventDefault();
   }
@@ -52534,6 +52737,16 @@ class MouseHandler extends BaseInputHandler {
     const modif = event.getModifierState("Shift") || event.getModifierState("Control");
     (_a3 = this.onClick) == null ? void 0 : _a3.call(this, pos, modif);
   }
+  async handleContextMenu(event) {
+    var _a3;
+    if (event.pointerType !== "mouse") return;
+    if (event.button !== 2) return;
+    const pos = this.relativePosition(event);
+    if (!almostEqual(this._lastMouseDownPosition, pos, 0.01)) {
+      return;
+    }
+    (_a3 = this.onContextMenu) == null ? void 0 : _a3.call(this, new Vector2(event.clientX, event.clientY));
+  }
   handlePointerMove(event) {
     var _a3;
     if (event.pointerType !== "mouse") return;
@@ -52587,13 +52800,20 @@ class DoubleClickHandler {
   constructor() {
     __publicField(this, "_lastClickTime", 0);
     __publicField(this, "_clickDelay", 300);
+    // Max time between clicks for double-click
+    __publicField(this, "_lastClickPosition", null);
+    __publicField(this, "_positionThreshold", 5);
   }
-  // Delay in milliseconds to consider a double click
+  // 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 {
@@ -52833,23 +53053,15 @@ class InputHandler extends BaseInputHandler {
     this._moveSpeed = settings2.moveSpeed ?? 1;
     this.rotateSpeed = settings2.rotateSpeed ?? 1;
     this.orbitSpeed = settings2.orbitSpeed ?? 1;
-    this.reg(document, "contextmenu", (e) => {
-      this._onContextMenu.dispatch(new Vector2(e.clientX, e.clientY));
-      e.preventDefault();
-    });
     this.keyboard = new KeyboardHandler(canvas);
     this.mouse = new MouseHandler(canvas);
     this.touch = new TouchHandler(canvas);
     this.keyboard.onKeyDown = (key) => adapter.keyDown(key);
     this.keyboard.onKeyUp = (key) => adapter.keyUp(key);
     this.keyboard.registerKeyUp("KeyP", "replace", () => adapter.toggleOrthographic());
-    this.keyboard.registerKeyUp("Equal", "replace", () => this.moveSpeed++);
-    this.keyboard.registerKeyUp("Minus", "replace", () => this.moveSpeed--);
-    this.keyboard.registerKeyUp("Space", "replace", () => {
-      this._pointerActive = this._pointerActive === "orbit" ? "look" : "orbit";
-      this._pointerFallback = this._pointerActive;
-      this._onPointerModeChanged.dispatch();
-    });
+    this.keyboard.registerKeyUp(["Equal", "NumpadAdd"], "replace", () => this.moveSpeed++);
+    this.keyboard.registerKeyUp(["Minus", "NumpadSubtract"], "replace", () => this.moveSpeed--);
+    this.keyboard.registerKeyUp("Space", "replace", () => adapter.toggleCameraOrbitMode());
     this.keyboard.registerKeyUp("Home", "replace", () => adapter.resetCamera());
     this.keyboard.registerKeyUp("Escape", "replace", () => adapter.clearSelection());
     this.keyboard.registerKeyUp("KeyF", "replace", () => {
@@ -52859,18 +53071,28 @@ class InputHandler extends BaseInputHandler {
       const mul = Math.pow(1.25, this._moveSpeed);
       adapter.moveCamera(value.multiplyScalar(mul));
     };
+    this.mouse.onContextMenu = (pos) => this._onContextMenu.dispatch(pos);
     this.mouse.onButtonDown = adapter.mouseDown;
     this.mouse.onMouseMove = adapter.mouseMove;
-    this.mouse.onButtonUp = adapter.mouseUp;
+    this.mouse.onButtonUp = (pos, button) => {
+      this.pointerOverride = void 0;
+      adapter.mouseUp(pos, button);
+    };
     this.mouse.onDrag = (delta, button) => {
       if (button === 0) {
-        if (this._pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
-        if (this._pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
-        if (this._pointerActive === "pan") adapter.panCamera(delta);
-        if (this._pointerActive === "zoom") adapter.dollyCamera(delta);
+        if (this.pointerActive === "orbit") adapter.orbitCamera(toRotation(delta, this.orbitSpeed));
+        if (this.pointerActive === "look") adapter.rotateCamera(toRotation(delta, this.rotateSpeed));
+        if (this.pointerActive === "pan") adapter.panCamera(delta);
+        if (this.pointerActive === "zoom") adapter.dollyCamera(delta);
+      }
+      if (button === 2) {
+        this.pointerOverride = "look";
+        adapter.rotateCamera(toRotation(delta, 1));
+      }
+      if (button === 1) {
+        this.pointerOverride = "pan";
+        adapter.panCamera(delta);
       }
-      if (button === 2) adapter.rotateCamera(toRotation(delta, 1));
-      if (button === 1) adapter.panCamera(delta);
     };
     this.mouse.onClick = (pos, modif) => adapter.selectAtPointer(pos, modif);
     this.mouse.onDoubleClick = adapter.frameAtPointer;
@@ -55693,7 +55915,7 @@ let Viewport$1 = class Viewport {
   /**
    * Resizes the canvas and updates the camera to match new parent dimensions.
    */
-  ResizeToParent() {
+  resizeToParent() {
     this._onResize.dispatch();
   }
   /**
@@ -55747,6 +55969,9 @@ function createAdapter$2(viewer) {
     toggleOrthographic: () => {
       viewer.camera.orthographic = !viewer.camera.orthographic;
     },
+    toggleCameraOrbitMode: () => {
+      viewer.inputs.pointerActive = viewer.inputs.pointerActive === PointerMode$1.ORBIT ? PointerMode$1.LOOK : PointerMode$1.ORBIT;
+    },
     resetCamera: () => {
       viewer.camera.lerp(0.75).reset();
     },
@@ -55771,7 +55996,7 @@ function createAdapter$2(viewer) {
     },
     frameAtPointer: async (pos) => {
       const result = await viewer.raycaster.raycastFromScreen(pos);
-      viewer.camera.lerp(0.75).frame(result.object);
+      viewer.camera.lerp(0.75).frame(result.object ?? "all");
     },
     zoom: (value) => {
       viewer.camera.lerp(0.75).zoom(value);
@@ -56782,6 +57007,10 @@ let Renderer$1 = class Renderer {
      * Indicates whether the scene should be re-rendered on change only.
      */
     __publicField(this, "onDemand");
+    /**
+     * The material that will be used when setting model material to undefined.
+     */
+    __publicField(this, "defaultModelMaterial");
     __publicField(this, "fitViewport", () => {
       const size = this._viewport.getParentSize();
       this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -56853,11 +57082,14 @@ let Renderer$1 = class Renderer {
     this._scene.threeScene.background = color;
     this.needsUpdate = true;
   }
+  /**
+   * Sets the material used to render models. If set to undefined, the default model or mesh material is used.
+   */
   get modelMaterial() {
     return this._scene.modelMaterial;
   }
   set modelMaterial(material) {
-    this._scene.modelMaterial = material;
+    this._scene.modelMaterial = material ?? this.defaultModelMaterial;
   }
   /**
    * Signal dispatched at the end of each frame if the scene was updated, such as visibility changes.
@@ -56993,6 +57225,11 @@ let Renderer$1 = class Renderer {
 };
 let Viewer$3 = class Viewer {
   constructor(settings2) {
+    /**
+     * The type of the viewer, indicating it is a WebGL viewer.
+     * Useful for distinguishing between different viewer types in a multi-viewer application.
+     */
+    __publicField(this, "type", "webgl");
     /**
      * The settings configuration used by the viewer.
      */
@@ -57317,180 +57554,31 @@ const index$8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   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 Camera3 {
+  /** 
+   * 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 Camera3 {
-  /** 
-   * 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
@@ -57529,7 +57617,7 @@ class Camera3 {
    * @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;
   }
@@ -57546,16 +57634,16 @@ class Camera3 {
   /**
    * 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;
@@ -57638,9 +57726,9 @@ class Marshal {
   // -------------------- 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);
   }
@@ -57788,15 +57876,15 @@ class ReadMarshal {
     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
     };
@@ -57928,10 +58016,22 @@ class RpcClient {
   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) {
@@ -57954,10 +58054,10 @@ class RpcClient {
     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) {
@@ -57981,53 +58081,53 @@ class RpcClient {
     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;
@@ -58039,25 +58139,32 @@ class RpcClient {
     const ret = returnMarshal.readString();
     return ret;
   }
-  async RPCGetCameraView() {
+  async RPCGetCameraPose() {
     const marshal = new Marshal();
-    marshal.writeString("RPCGetCameraView");
+    marshal.writeString("RPCGetCameraPose");
     const returnMarshal = await this._socket.sendRPCWithReturn(marshal);
     const ret = returnMarshal.readSegment();
     return ret;
   }
-  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;
@@ -58069,10 +58176,10 @@ class RpcClient {
     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;
@@ -58084,10 +58191,10 @@ class RpcClient {
     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;
@@ -58177,6 +58284,13 @@ class RpcClient {
     marshal.writeBoolean(orbit2);
     this._socket.sendRPC(marshal);
   }
+  RPCSetCameraPose(state, blendTime) {
+    const marshal = new Marshal();
+    marshal.writeString("RPCSetCameraPose");
+    marshal.writeSegment(state);
+    marshal.writeFloat(blendTime);
+    this._socket.sendRPC(marshal);
+  }
   RPCSetCameraPosition(position, blendTime) {
     const marshal = new Marshal();
     marshal.writeString("RPCSetCameraPosition");
@@ -58197,13 +58311,6 @@ class RpcClient {
     marshal.writeFloat(blendTime);
     this._socket.sendRPC(marshal);
   }
-  RPCSetCameraView(state, blendTime) {
-    const marshal = new Marshal();
-    marshal.writeString("RPCSetCameraView");
-    marshal.writeSegment(state);
-    marshal.writeFloat(blendTime);
-    this._socket.sendRPC(marshal);
-  }
   RPCSetGhostColor(ghostColor) {
     const marshal = new Marshal();
     marshal.writeString("RPCSetGhostColor");
@@ -58221,10 +58328,10 @@ class RpcClient {
     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);
@@ -58235,25 +58342,31 @@ class RpcClient {
     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);
@@ -58281,12 +58394,6 @@ class RpcClient {
     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 {
   /**
@@ -58318,35 +58425,7 @@ class RemoteColor {
    * @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.
@@ -58359,6 +58438,12 @@ class RemoteColor {
     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 {
   /**
@@ -58378,39 +58463,48 @@ class ColorManager {
    * @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 i = 0; i < c.length; i++) {
-      const color = c[i];
-      if (this._hexToColor.has(color.hex)) {
-        result[i] = this._hexToColor.get(color.hex);
-      } else if (hexToIndices.has(color.hex)) {
-        hexToIndices.get(color.hex).push(i);
-      } else {
-        toCreate.push(color);
-        hexToIndices.set(color.hex, [i]);
+    for (let i = 0; i < colors.length; i++) {
+      const color = colors[i];
+      if (color === void 0) {
+        result[i] = void 0;
+        continue;
+      }
+      const hex = (color == null ? void 0 : color.getHex()) ?? -1;
+      const remoteColor = this._hexToColor.get(hex);
+      if (remoteColor) {
+        result[i] = remoteColor;
+        continue;
+      }
+      const indices = hexToIndices.get(hex);
+      if (indices) {
+        hexToIndices.get(hex).push(i);
+        continue;
       }
+      toCreate.push(color);
+      hexToIndices.set(hex, [i]);
     }
-    const colors = await this._createColors(toCreate);
-    if (!colors) return void 0;
-    for (let i = 0; i < colors.length; i++) {
+    const remoteColors = await this._createColors(toCreate);
+    if (!remoteColors) return void 0;
+    for (let i = 0; i < remoteColors.length; i++) {
       const color = toCreate[i];
-      const indices = hexToIndices.get(color.hex);
+      const indices = hexToIndices.get(color.getHex());
       for (const index2 of indices) {
-        result[index2] = colors[i];
+        result[index2] = remoteColors[i];
       }
     }
     return result;
@@ -58453,7 +58547,8 @@ class ColorManager {
     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 i = 0; i < colors.length; i++) {
       const color = this._createColor(colors[i], instances[i]);
@@ -58470,7 +58565,7 @@ class ColorManager {
    */
   _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;
   }
@@ -58812,6 +58907,7 @@ class Decoder {
   }
 }
 const CODE_TO_KEYCODE = {
+  "Space": 32,
   "ArrowUp": 38,
   "ArrowDown": 40,
   "ArrowLeft": 37,
@@ -58845,6 +58941,9 @@ function createAdapter$1(viewer) {
     toggleOrthographic: () => {
       console.log("toggleOrthographic. Not supported yet");
     },
+    toggleCameraOrbitMode: () => {
+      viewer.rpc.RPCKeyEvent(CODE_TO_KEYCODE["Space"], true);
+    },
     resetCamera: () => {
       viewer.camera.restoreSavedPosition();
     },
@@ -59037,9 +59136,9 @@ class Raycaster3 {
     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,
@@ -59068,7 +59167,7 @@ const defaultSceneSettings = {
   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) => {
@@ -59081,15 +59180,26 @@ var VimLoadingStatus = /* @__PURE__ */ ((VimLoadingStatus2) => {
   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;
   }
@@ -59099,9 +59209,10 @@ class RpcSafeClient {
    * 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 ?? {} };
@@ -59111,15 +59222,15 @@ class RpcSafeClient {
         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;
@@ -59128,43 +59239,80 @@ class RpcSafeClient {
       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
@@ -59176,7 +59324,6 @@ class RpcSafeClient {
    * @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;
@@ -59189,19 +59336,26 @@ class RpcSafeClient {
   /**
    * 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(
       {
@@ -59210,6 +59364,10 @@ class RpcSafeClient {
       }
     );
   }
+  /**
+   * 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(),
@@ -59226,7 +59384,7 @@ class RpcSafeClient {
    */
   async RPCGetCameraView() {
     return await this.safeCall(
-      () => this.rpc.RPCGetCameraView(),
+      () => this.rpc.RPCGetCameraPose(),
       void 0
     );
   }
@@ -59238,7 +59396,7 @@ class RpcSafeClient {
   RPCSetCameraView(segment, blendTime) {
     if (!Validation.isValidSegment(segment)) return;
     blendTime = Validation.clamp01(blendTime);
-    this.rpc.RPCSetCameraView(segment, blendTime);
+    this.rpc.RPCSetCameraPose(segment, blendTime);
   }
   /**
    * Sets the camera's position without changing its target.
@@ -59266,52 +59424,52 @@ class RpcSafeClient {
   }
   /**
    * 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);
@@ -59322,53 +59480,51 @@ class RpcSafeClient {
     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;
@@ -59382,7 +59538,6 @@ class RpcSafeClient {
    * 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;
@@ -59399,12 +59554,15 @@ class RpcSafeClient {
   /**
    * 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"
@@ -59413,9 +59571,8 @@ class RpcSafeClient {
   }
   /**
    * 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;
@@ -59424,13 +59581,12 @@ class RpcSafeClient {
   }
   /*******************************************************************************
    * 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;
@@ -59442,9 +59598,8 @@ class RpcSafeClient {
   }
   /**
    * 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;
@@ -59454,17 +59609,16 @@ class RpcSafeClient {
     );
   }
   /**
-   * 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)) {
@@ -59473,16 +59627,7 @@ class RpcSafeClient {
     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();
@@ -59498,7 +59643,7 @@ class RpcSafeClient {
   /**
    * 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;
@@ -59506,7 +59651,7 @@ class RpcSafeClient {
       () => this.rpc.RPCPerformHitTest(pos),
       void 0
     );
-    if (!result || result.nodeIndex < 0) {
+    if (!result || result.vimIndex === INVALID_HANDLE) {
       return void 0;
     }
     return result;
@@ -59516,7 +59661,6 @@ class RpcSafeClient {
    * @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;
@@ -59527,7 +59671,6 @@ class RpcSafeClient {
    * 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;
@@ -59554,7 +59697,6 @@ class RpcSafeClient {
    * 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;
@@ -59581,7 +59723,6 @@ class RpcSafeClient {
    * @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;
@@ -59604,46 +59745,56 @@ class RpcSafeClient {
   }
   /**
    * 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
@@ -59700,7 +59851,8 @@ class RpcSafeClient {
 }
 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 Renderer2 {
   /**
@@ -59747,7 +59899,8 @@ class Renderer2 {
    * 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();
@@ -59755,11 +59908,14 @@ class Renderer2 {
   // 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
@@ -59793,27 +59949,33 @@ class Renderer2 {
    * @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
@@ -59864,24 +60026,24 @@ class Renderer2 {
    */
   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.
@@ -59896,7 +60058,10 @@ class Renderer2 {
   }
   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;
@@ -59996,7 +60161,7 @@ class SectionBox2 {
    * 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();
@@ -60020,7 +60185,7 @@ var VisibilityState$1 = /* @__PURE__ */ ((VisibilityState2) => {
   VisibilityState2[VisibilityState2["GHOSTED_HIGHLIGHTED"] = 18] = "GHOSTED_HIGHLIGHTED";
   return VisibilityState2;
 })(VisibilityState$1 || {});
-class StateSynchronizer {
+class VisibilitySynchronizer {
   /**
    * Creates a new StateSynchronizer instance.
    * 
@@ -60038,7 +60203,7 @@ class StateSynchronizer {
     __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;
@@ -60087,7 +60252,7 @@ class StateSynchronizer {
    * @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();
   }
@@ -60151,7 +60316,7 @@ class StateSynchronizer {
     this._onUpdate();
   }
 }
-class StateTracker {
+class VisibilityTracker {
   /**
    * Creates a new StateTracker instance.
    * 
@@ -60747,6 +60912,12 @@ class Viewport2 {
       this._rpc.RPCSetCameraAspectRatio(this.canvas.offsetWidth, this.canvas.offsetHeight);
     }
   }
+  /**
+   * Resizes the viewport to match its parent's dimensions
+   */
+  resizeToParent() {
+    this.update();
+  }
   /**
    * Cleans up resources by removing resize observer and clearing timeouts
    */
@@ -60788,7 +60959,7 @@ class Element3D2 {
     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.
@@ -60805,11 +60976,12 @@ class Element3D2 {
    * @returns A promise resolving to the element's bounding box.
    */
   async getBoundingBox() {
-    return this.vim.getBoundingBoxNodes([this.element]);
+    return this.vim.getBoundingBoxForElements([this.element]);
   }
 }
 class Vim2 {
   constructor(rpc, color, renderer, source, logger) {
+    __publicField(this, "type", "ultra");
     __publicField(this, "source");
     __publicField(this, "_handle", -1);
     __publicField(this, "_request");
@@ -60818,19 +60990,22 @@ class Vim2 {
     __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,
@@ -60839,6 +61014,7 @@ class Vim2 {
       // default state
     );
   }
+  //TODO: Rename this to getElementFromNode, prefer using element instead
   getElement(elementIndex) {
     if (this._objects.has(elementIndex)) {
       return this._objects.get(elementIndex);
@@ -60851,13 +61027,16 @@ class Vim2 {
     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 i = 0; i < this._elementCount; i++) {
+      this.getElement(i);
+    }
+    return Array.from(this._objects.values());
   }
   get handle() {
     return this._handle;
@@ -60888,7 +61067,6 @@ class Vim2 {
     (_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;
     }
   }
@@ -60910,12 +61088,12 @@ class Vim2 {
           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) {
@@ -60955,14 +61133,14 @@ class Vim2 {
     }
     return handle;
   }
-  async getBoundingBoxNodes(nodes) {
-    if (!this.connected || nodes !== "all" && nodes.length === 0) {
+  async getBoundingBoxForElements(elements) {
+    if (!this.connected || elements !== "all" && elements.length === 0) {
       return Promise.resolve(void 0);
     }
-    if (nodes === "all") {
+    if (elements === "all") {
       return await this._rpc.RPCGetAABBForVim(this._handle);
     }
-    return await this._rpc.RPCGetAABBForElements(this._handle, nodes);
+    return await this._rpc.RPCGetAABBForElements(this._handle, elements);
   }
   async getBoundingBox() {
     if (!this.connected) {
@@ -60970,49 +61148,52 @@ class Vim2 {
     }
     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 i = 0; i < color.length; i++) {
-      const c = color[i];
-      const n = nodes[i];
-      if (c === void 0) {
-        this._nodeColors.delete(n);
-      } else {
-        this._nodeColors.set(n, c);
+  applyColor(elements, colors) {
+    for (let i = 0; i < colors.length; i++) {
+      const color = colors[i];
+      const element = elements[i];
+      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() {
@@ -61028,12 +61209,15 @@ class Vim2 {
     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) {
@@ -61110,6 +61294,11 @@ let Viewer$2 = class Viewer2 {
    * @param logger - Optional logger for logging messages.
    */
   constructor(canvas, logger) {
+    /**
+     * The type of the viewer, indicating it is a WebGL viewer.
+     * Useful for distinguishing between different viewer types in a multi-viewer application.
+     */
+    __publicField(this, "type", "ultra");
     __publicField(this, "_decoder");
     __publicField(this, "_socketClient");
     __publicField(this, "_input");
@@ -61333,6 +61522,9 @@ let Viewer$2 = class Viewer2 {
     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.
    */
@@ -61354,9 +61546,6 @@ const index$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   INVALID_HANDLE,
   InputMode,
   MaterialHandles,
-  RGB,
-  RGBA,
-  RGBA32,
   Segment,
   Viewer: Viewer$2,
   VimLoadingStatus,
@@ -63536,50 +63725,6 @@ const icons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   visible,
   zoom
 }, Symbol.toStringTag, { value: "Module" }));
-function getDefaultSettings() {
-  return {
-    capacity: {
-      canFollowUrl: true,
-      canGoFullScreen: true,
-      canDownload: true,
-      canReadLocalStorage: true
-    },
-    ui: {
-      logo: true,
-      performance: false,
-      bimTreePanel: true,
-      bimInfoPanel: true,
-      // axesPanel
-      axesPanel: true,
-      orthographic: true,
-      resetCamera: true,
-      // Control bar
-      controlBar: true,
-      // Control bar - cursors
-      orbit: true,
-      lookAround: true,
-      pan: true,
-      zoom: true,
-      zoomWindow: true,
-      // Control bar - camera
-      autoCamera: true,
-      frameScene: true,
-      frameSelection: true,
-      // Control bar - tools
-      sectioningMode: true,
-      measuringMode: true,
-      toggleIsolation: true,
-      // Control bar - settings
-      projectInspector: true,
-      settings: true,
-      help: true,
-      maximise: true
-    }
-  };
-}
-function createSettings(settings2) {
-  return settings2 !== void 0 ? deepmerge(getDefaultSettings(), settings2) : getDefaultSettings();
-}
 function getLocalSettings(settings2 = {}) {
   try {
     const json = localStorage.getItem("viewer.settings");
@@ -63634,8 +63779,6 @@ function isFalse(value) {
 }
 const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createSettings,
-  getDefaultSettings,
   getLocalSettings,
   isFalse,
   isTrue,
@@ -67467,7 +67610,7 @@ function getMeasureState(viewer, cursor) {
 }
 const Style = style;
 const Ids$2 = controlBarIds;
-function controlBarSectionBox(section, hasSelection) {
+function controlBarSectionBox(section, hasSelection, settings2) {
   return {
     id: Ids$2.sectionSectionBox,
     style: section.enable.get() ? Style.sectionNoPadStyle : Style.sectionDefaultStyle,
@@ -67475,6 +67618,7 @@ function controlBarSectionBox(section, hasSelection) {
     buttons: [
       {
         id: Ids$2.buttonSectionBoxEnable,
+        enabled: () => isTrue(settings2.sectioningEnable),
         tip: "Enable Section Box",
         isOn: () => section.enable.get(),
         style: (on) => Style.buttonExpandStyle(on),
@@ -67484,7 +67628,7 @@ function controlBarSectionBox(section, hasSelection) {
       {
         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(),
@@ -67493,7 +67637,7 @@ function controlBarSectionBox(section, hasSelection) {
       {
         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
@@ -67501,7 +67645,7 @@ function controlBarSectionBox(section, hasSelection) {
       {
         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()),
@@ -67510,7 +67654,7 @@ function controlBarSectionBox(section, hasSelection) {
       {
         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()),
@@ -67519,7 +67663,7 @@ function controlBarSectionBox(section, hasSelection) {
       {
         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()),
@@ -67537,7 +67681,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
     buttons: [
       {
         id: Ids$2.buttonCameraOrbit,
-        enabled: () => isTrue(settings2.ui.orbit),
+        enabled: () => isTrue(settings2.cursorOrbit),
         tip: "Orbit",
         action: () => pointer2.onButton(PointerMode$1.ORBIT),
         icon: orbit,
@@ -67546,7 +67690,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
       },
       {
         id: Ids$2.buttonCameraLook,
-        enabled: () => isTrue(settings2.ui.lookAround),
+        enabled: () => isTrue(settings2.cursorLookAround),
         tip: "Look Around",
         action: () => pointer2.onButton(PointerMode$1.LOOK),
         icon: look,
@@ -67555,7 +67699,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
       },
       {
         id: Ids$2.buttonCameraPan,
-        enabled: () => isTrue(settings2.ui.pan),
+        enabled: () => isTrue(settings2.cursorPan),
         tip: "Pan",
         action: () => pointer2.onButton(PointerMode$1.PAN),
         icon: pan,
@@ -67564,7 +67708,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
       },
       {
         id: Ids$2.buttonCameraZoom,
-        enabled: () => isTrue(settings2.ui.zoom),
+        enabled: () => isTrue(settings2.cursorZoom),
         tip: "Zoom",
         action: () => pointer2.onButton(PointerMode$1.ZOOM),
         icon: zoom,
@@ -67574,7 +67718,7 @@ function controlBarPointer(viewer, camera2, settings2, section) {
     ]
   };
 }
-function controlBarMeasure(settings2, measure$1) {
+function controlBarMeasure(measure$1, settings2) {
   return {
     id: Ids$2.sectionActions,
     enable: () => true,
@@ -67582,7 +67726,7 @@ function controlBarMeasure(settings2, measure$1) {
     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(),
@@ -67592,6 +67736,23 @@ function controlBarMeasure(settings2, measure$1) {
     ]
   };
 }
+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 {
@@ -67601,7 +67762,7 @@ function controlBarSettings(modal, side, settings$1) {
     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.bimTreePanel) || isTrue(settings$1.ui.bimInfoPanel)),
         tip: "Project Inspector",
         action: () => side.toggleContent("bim"),
         icon: treeView,
@@ -67609,7 +67770,7 @@ function controlBarSettings(modal, side, settings$1) {
       },
       {
         id: Ids$2.buttonSettings,
-        enabled: () => isTrue(settings$1.ui.settings),
+        enabled: () => isTrue(settings$1.ui.miscSettings),
         tip: "Settings",
         action: () => side.toggleContent("settings"),
         icon: settings,
@@ -67617,7 +67778,7 @@ function controlBarSettings(modal, side, settings$1) {
       },
       {
         id: Ids$2.buttonHelp,
-        enabled: () => isTrue(settings$1.ui.help),
+        enabled: () => isTrue(settings$1.ui.miscHelp),
         tip: "Help",
         action: () => modal.help(true),
         icon: help,
@@ -67625,7 +67786,7 @@ function controlBarSettings(modal, side, settings$1) {
       },
       {
         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,
@@ -67634,7 +67795,7 @@ function controlBarSettings(modal, side, settings$1) {
     ]
   };
 }
-function controlBarCamera(camera2) {
+function controlBarCamera(camera2, settings2) {
   return {
     id: Ids$2.sectionCamera,
     enable: () => true,
@@ -67642,6 +67803,7 @@ function controlBarCamera(camera2) {
     buttons: [
       {
         id: Ids$2.buttonCameraAuto,
+        enabled: () => isTrue(settings2.cameraAuto),
         tip: "Auto Camera",
         isOn: () => camera2.autoCamera.get(),
         action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
@@ -67650,7 +67812,7 @@ function controlBarCamera(camera2) {
       },
       {
         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,
@@ -67659,7 +67821,7 @@ function controlBarCamera(camera2) {
       },
       {
         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,
@@ -67669,7 +67831,7 @@ function controlBarCamera(camera2) {
     ]
   };
 }
-function controlBarSelection(isolation) {
+function controlBarVisibility(isolation, settings2) {
   const adapter = isolation.adapter.current;
   const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection();
   return {
@@ -67679,6 +67841,7 @@ function controlBarSelection(isolation) {
     buttons: [
       {
         id: Ids$2.buttonClearSelection,
+        enabled: () => isTrue(settings2.visibilityClearSelection),
         tip: "Clear Selection",
         action: () => adapter.clearSelection(),
         icon: pointer,
@@ -67688,6 +67851,7 @@ function controlBarSelection(isolation) {
       {
         id: Ids$2.buttonShowAll,
         tip: "Show All",
+        enabled: () => isTrue(settings2.visibilityShowAll),
         action: () => adapter.showAll(),
         icon: showAll,
         isOn: () => !isolation.autoIsolate.get() && isolation.visibility.get() !== "all",
@@ -67695,7 +67859,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonHideSelection,
-        enabled: () => someVisible,
+        enabled: () => someVisible && isTrue(settings2.visibilityToggle),
         tip: "Hide Selection",
         action: () => adapter.hideSelection(),
         icon: hideSelection,
@@ -67704,7 +67868,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonShowSelection,
-        enabled: () => !someVisible,
+        enabled: () => !someVisible && isTrue(settings2.visibilityToggle),
         tip: "Show Selection",
         action: () => adapter.showSelection(),
         icon: showSelection,
@@ -67713,6 +67877,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonIsolateSelection,
+        enabled: () => isTrue(settings2.visibilityIsolate),
         tip: "Isolate Selection",
         action: () => adapter.isolateSelection(),
         icon: isolateSelection,
@@ -67721,6 +67886,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonAutoIsolate,
+        enabled: () => isTrue(settings2.visibilityAutoIsolate),
         tip: "Auto Isolate",
         action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
         isOn: () => isolation.autoIsolate.get(),
@@ -67728,6 +67894,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonIsolationSettings,
+        enabled: () => isTrue(settings2.visibilitySettings),
         tip: "Isolation Settings",
         action: () => isolation.showPanel.set(!isolation.showPanel.get()),
         icon: slidersHoriz,
@@ -67738,28 +67905,22 @@ function controlBarSelection(isolation) {
 }
 function useControlBar(viewer, camera2, modal, side, cursor, settings2, section, isolationRef, customization) {
   const measure2 = getMeasureState(viewer, cursor);
-  const pointerSection = controlBarPointer(viewer, camera2, settings2);
-  const actionSection = controlBarMeasure(settings2, measure2);
-  const sectionBoxSection = controlBarSectionBox(section, viewer.selection.any());
-  const settingsSection = controlBarSettings(modal, side, settings2);
-  const cameraSection = controlBarCamera(camera2);
-  const selectionSection = controlBarSelection(isolationRef);
   let controlBarSections = [
-    pointerSection,
-    actionSection,
-    cameraSection,
-    sectionBoxSection,
-    selectionSection,
-    settingsSection
+    controlBarPointer(viewer, 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] = useState(0);
@@ -72660,7 +72821,7 @@ function scrollToSelection(div) {
     return;
   }
   if (rectElem.top < rectContainer.top || rectElem.top < 0) {
-    selection.scrollIntoView();
+    selection.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
 }
 const isControlKey = (e) => {
@@ -73771,7 +73932,7 @@ function SidePanel(props) {
     } else {
       props.container.gfx.style.left = "0px";
     }
-    props.viewer.viewport.ResizeToParent();
+    props.viewer.viewport.resizeToParent();
   };
   const getMaxSize = () => {
     return props.container.root.clientWidth * MAX_WIDTH;
@@ -73830,7 +73991,10 @@ function SidePanel(props) {
       style: {
         position: "absolute"
       },
-      className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 vc-bg-gray-lightest vc-text-gray-darker ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
+      className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 
+            vc-bg-gray-lightest vc-text-gray-darker 
+            vc-border-r vc-border-gray-light 
+            ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
@@ -73913,180 +74077,6 @@ function useSideState(useInspector, defaultWidth) {
     [side, width]
   );
 }
-function SettingsPanel(props) {
-  if (!props.visible) return null;
-  const toggleElement = (label, state, action) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: state,
-          onChange: action,
-          className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium "
-        }
-      ),
-      " ",
-      label
-    ] });
-  };
-  const settingsToggle = (label, getter, setter) => {
-    const value = getter(props.settings.value);
-    if (value === "AlwaysTrue" || value === "AlwaysFalse") {
-      return null;
-    }
-    return toggleElement(label, value, () => {
-      const value2 = getter(props.settings.value);
-      props.settings.update((s) => setter(s, !value2));
-    });
-  };
-  const settingsBox = (label, info, transform, getter, setter) => {
-    const ref = React__default.useRef(null);
-    useEffect(() => {
-      ref.current.value = props.viewer.inputs.scrollSpeed.toFixed(2);
-    }, []);
-    getter(props.settings.value).toString();
-    const update = (event) => {
-      const str = event.target.value;
-      const n = Number.parseFloat(str);
-      if (Number.isNaN(n)) {
-        event.target.value = getter(props.settings.value).toString();
-      } else {
-        const value2 = transform(n);
-        event.target.value = value2.toString();
-        props.settings.update((s) => setter(s, value2));
-      }
-    };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
-        label,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "text", className: "vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1", onBlur: (e) => update(e) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: info })
-    ] });
-  };
-  function settingsSubtitle(title2) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: title2 });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: "vc-absolute vc-inset-0",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title", children: "Settings " }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto", children: [
-          settingsSubtitle("Inputs"),
-          settingsBox(
-            "Scroll Speed",
-            "[0.1,10]",
-            (n) => MathUtils.clamp(n, 0.1, 10),
-            (s) => props.viewer.inputs.scrollSpeed,
-            (s, v) => {
-              props.viewer.inputs.scrollSpeed = v;
-            }
-          ),
-          settingsSubtitle("Panels"),
-          settingsToggle(
-            "Show Logo",
-            (settings2) => settings2.ui.logo,
-            (settings2, value) => settings2.ui.logo = value
-          ),
-          settingsToggle(
-            "Show Bim Tree",
-            (settings2) => settings2.ui.bimTreePanel,
-            (settings2, value) => settings2.ui.bimTreePanel = value
-          ),
-          settingsToggle(
-            "Show Bim Info",
-            (settings2) => settings2.ui.bimInfoPanel,
-            (settings2, value) => settings2.ui.bimInfoPanel = value
-          ),
-          settingsToggle(
-            "Show Axes Panel",
-            (settings2) => settings2.ui.axesPanel,
-            (settings2, value) => settings2.ui.axesPanel = value
-          ),
-          settingsToggle(
-            "Show Performance Panel",
-            (settings2) => settings2.ui.performance,
-            (settings2, value) => settings2.ui.performance = value
-          ),
-          settingsSubtitle("Axes"),
-          settingsToggle(
-            "Show Orthographic Button",
-            (settings2) => settings2.ui.orthographic,
-            (settings2, value) => settings2.ui.orthographic = value
-          ),
-          settingsToggle(
-            "Show Reset Camera Button",
-            (settings2) => settings2.ui.resetCamera,
-            (settings2, value) => settings2.ui.resetCamera = value
-          ),
-          settingsSubtitle("Control Bar"),
-          settingsToggle(
-            "Show Control Bar",
-            (settings2) => settings2.ui.controlBar,
-            (settings2, value) => settings2.ui.controlBar = value
-          ),
-          settingsSubtitle("Control Bar - Cursors"),
-          settingsToggle(
-            "Show Orbit Button",
-            (settings2) => settings2.ui.orbit,
-            (settings2, value) => settings2.ui.orbit = value
-          ),
-          settingsToggle(
-            "Show Look Around Button",
-            (settings2) => settings2.ui.lookAround,
-            (settings2, value) => settings2.ui.lookAround = value
-          ),
-          settingsToggle(
-            "Show Pan Button",
-            (settings2) => settings2.ui.pan,
-            (settings2, value) => settings2.ui.pan = value
-          ),
-          settingsToggle(
-            "Show Zoom Button",
-            (settings2) => settings2.ui.zoom,
-            (settings2, value) => settings2.ui.zoom = value
-          ),
-          settingsToggle(
-            "Show Zoom Window Button",
-            (settings2) => settings2.ui.zoomWindow,
-            (settings2, value) => settings2.ui.zoomWindow = value
-          ),
-          settingsSubtitle("Control Bar - Tools"),
-          settingsToggle(
-            "Show Measuring Mode Button",
-            (settings2) => settings2.ui.measuringMode,
-            (settings2, value) => settings2.ui.measuringMode = value
-          ),
-          settingsSubtitle("Control Bar - Settings"),
-          settingsToggle(
-            "Show Project Inspector Button",
-            (settings2) => settings2.ui.projectInspector,
-            (settings2, value) => settings2.ui.projectInspector = value
-          ),
-          settingsToggle(
-            "Show Settings Button",
-            (settings2) => settings2.ui.settings,
-            (settings2, value) => settings2.ui.settings = value
-          ),
-          settingsToggle(
-            "Show Help Button",
-            (settings2) => settings2.ui.help,
-            (settings2, value) => settings2.ui.help = value
-          ),
-          settingsToggle(
-            "Show Maximise Button",
-            (settings2) => settings2.ui.maximise,
-            (settings2, value) => settings2.ui.maximise = value
-          )
-        ] })
-      ]
-    }
-  );
-}
 const MenuToastMemo = React__default.memo(MenuToast);
 function MenuToast(props) {
   const [visible2, setVisible] = useState();
@@ -74251,118 +74241,6 @@ function applyWebglBindings(viewer, camera2, isolation, sideState) {
     }
   });
 }
-function useSettings(viewer, value) {
-  const merged = createSettings(value);
-  const [settings2, setSettings] = useState(merged);
-  const onUpdate = useRef();
-  const update = function(updater) {
-    var _a3;
-    const next = { ...settings2 };
-    updater(next);
-    saveSettingsToLocal(next);
-    setSettings(next);
-    (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
-  };
-  useEffect(() => {
-    applySettings(viewer, settings2);
-  }, []);
-  useEffect(() => {
-    applySettings(viewer, settings2);
-  }, [settings2]);
-  return useMemo(
-    () => ({
-      value: settings2,
-      update,
-      register: (v) => onUpdate.current = v
-    }),
-    [settings2]
-  );
-}
-function applySettings(viewer, settings2) {
-  const performance2 = document.getElementsByClassName("vim-performance-div")[0];
-  if (performance2) {
-    if (isTrue(settings2.ui.performance)) {
-      performance2.classList.remove("vc-hidden");
-    } else {
-      performance2.classList.add("vc-hidden");
-    }
-  }
-}
-function createContainer(element) {
-  let root = element;
-  if (root === void 0) {
-    root = document.createElement("div");
-    document.body.append(root);
-    root.classList.add("vc-inset-0");
-  }
-  root.style.position = "absolute";
-  root.classList.add("vim-component");
-  const gfx = document.createElement("div");
-  gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
-  const ui = document.createElement("div");
-  ui.className = "vim-ui vc-absolute vc-inset-0";
-  root.append(gfx);
-  root.append(ui);
-  const dispose = () => {
-    if (element === void 0) {
-      root.remove();
-    } else {
-      root.classList.remove("vim-component");
-      gfx.remove();
-      ui.remove();
-    }
-  };
-  return { root, ui, gfx, dispose };
-}
-async function getElements(vim) {
-  var _a3, _b2, _c, _d, _e;
-  if (!vim.bim) return [];
-  const [elements, bimDocument, category, levels, worksets] = await Promise.all(
-    [
-      (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
-      (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
-      (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
-      (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
-      (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
-    ]
-  );
-  const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
-  if (!elements) return void 0;
-  const result = elements.map((e) => {
-    var _a4;
-    return {
-      ...e,
-      bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
-      categoryName: category ? category[e.categoryIndex] : void 0,
-      familyTypeName: familyTypeMap.get(e.index),
-      levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
-      worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
-    };
-  });
-  const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
-  return real;
-}
-async function getFamilyTypeNameMap(document2) {
-  const [
-    familyInstanceElement,
-    familyInstanceFamilyType,
-    familyTypeElement,
-    elementName
-  ] = await Promise.all([
-    document2.familyInstance.getAllElementIndex(),
-    document2.familyInstance.getAllFamilyTypeIndex(),
-    document2.familyType.getAllElementIndex(),
-    document2.element.getAllName()
-  ]);
-  return new Map(
-    familyInstanceElement.map((e, i) => {
-      const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i];
-      const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
-      const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
-      return [e, name];
-    })
-  );
-}
 class MutableState {
   constructor(initial) {
     __publicField(this, "_value");
@@ -74391,24 +74269,28 @@ function useRefresher() {
     }
   };
 }
-function useStateRef(initialValue) {
-  const [value, setValue] = useState(initialValue);
+function useStateRef(initialValue, isLazy = false) {
+  const getInitialValue = () => {
+    if (isLazy && typeof initialValue === "function") {
+      return initialValue();
+    }
+    return initialValue;
+  };
+  const [box, setBox] = useState(() => ({
+    current: getInitialValue()
+  }));
   const ref = useRef(void 0);
   if (ref.current === void 0) {
-    if (typeof initialValue === "function") {
-      ref.current = initialValue();
-    } else {
-      ref.current = initialValue;
-    }
+    ref.current = getInitialValue();
   }
   const event = useRef(new distExports.SimpleEventDispatcher());
   const validate = useRef((next, current) => next);
-  const confirm = useRef((value2) => value2);
-  const set3 = (value2) => {
-    const finalValue = validate.current(value2, ref.current);
+  const confirm = useRef((value) => value);
+  const set3 = (value) => {
+    const finalValue = validate.current(value, ref.current);
     if (finalValue === ref.current) return;
     ref.current = finalValue;
-    setValue(finalValue);
+    setBox({ current: finalValue });
     event.current.dispatch(finalValue);
   };
   return {
@@ -74434,8 +74316,8 @@ function useStateRef(initialValue) {
      */
     useOnChange(on) {
       useEffect(() => {
-        return event.current.subscribe((value2) => {
-          const result = on(value2);
+        return event.current.subscribe((value) => {
+          const result = on(value);
           if (result instanceof Promise) {
             result.catch(console.error);
           }
@@ -74449,7 +74331,7 @@ function useStateRef(initialValue) {
      * @returns The memoized value.
      */
     useMemo(on, deps) {
-      return useMemo(() => on(value), [...deps || [], value]);
+      return useMemo(() => on(box.current), [...deps || [], box.current]);
     },
     /**
      * Sets a validation function to process any new state value before updating.
@@ -74626,14 +74508,122 @@ const reactUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   useRefresher,
   useStateRef
 }, Symbol.toStringTag, { value: "Module" }));
-function useViewerState(viewer) {
-  const getVim = () => {
+function useSettings(value, defaultSettings, applySettings = () => {
+}) {
+  const merged = createSettings(value, defaultSettings);
+  const [settings2, setSettings] = useState(merged);
+  const onUpdate = useRef();
+  const customizer = useStateRef((settings22) => settings22);
+  const update = function(updater) {
     var _a3;
-    const 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);
+  };
+  useEffect(() => {
+    applySettings(settings2);
+  }, []);
+  useEffect(() => {
+    applySettings(settings2);
+  }, [settings2]);
+  return useMemo(
+    () => ({
+      value: settings2,
+      update,
+      register: (v) => onUpdate.current = v,
+      customizer
+    }),
+    [settings2]
+  );
+}
+function createSettings(settings2, defaultSettings) {
+  return settings2 !== void 0 ? deepmerge(defaultSettings, settings2) : defaultSettings;
+}
+function createContainer(element) {
+  let root = element;
+  if (root === void 0) {
+    root = document.createElement("div");
+    document.body.append(root);
+    root.classList.add("vc-inset-0");
+  }
+  root.style.position = "absolute";
+  root.classList.add("vim-component");
+  const gfx = document.createElement("div");
+  gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
+  const ui = document.createElement("div");
+  ui.className = "vim-ui vc-absolute vc-inset-0";
+  root.append(gfx);
+  root.append(ui);
+  const dispose = () => {
+    if (element === void 0) {
+      root.remove();
+    } else {
+      root.classList.remove("vim-component");
+      gfx.remove();
+      ui.remove();
+    }
+  };
+  return { root, ui, gfx, dispose };
+}
+async function getElements(vim) {
+  var _a3, _b2, _c, _d, _e;
+  if (!vim.bim) return [];
+  const [elements, bimDocument, category, levels, worksets] = await Promise.all(
+    [
+      (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
+      (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
+      (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
+      (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
+      (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
+    ]
+  );
+  const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
+  if (!elements) return void 0;
+  const result = elements.map((e) => {
+    var _a4;
+    return {
+      ...e,
+      bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
+      categoryName: category ? category[e.categoryIndex] : void 0,
+      familyTypeName: familyTypeMap.get(e.index),
+      levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
+      worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
+    };
+  });
+  const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
+  return real;
+}
+async function getFamilyTypeNameMap(document2) {
+  const [
+    familyInstanceElement,
+    familyInstanceFamilyType,
+    familyTypeElement,
+    elementName
+  ] = await Promise.all([
+    document2.familyInstance.getAllElementIndex(),
+    document2.familyInstance.getAllFamilyTypeIndex(),
+    document2.familyType.getAllElementIndex(),
+    document2.element.getAllName()
+  ]);
+  return new Map(
+    familyInstanceElement.map((e, i) => {
+      const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i];
+      const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
+      const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
+      return [e, name];
+    })
+  );
+}
+function useViewerState(viewer) {
+  const getVim = () => {
+    var _a3;
+    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());
@@ -74767,12 +74757,8 @@ const vcColorLink = "vc-text-[#0590CC]";
 const vcLink = `${vcColorLink} vc-underline`;
 const vcLabel = "vc-text-[#3F444F]";
 const vcRoboto = "vc-font-['Roboto',sans-serif]";
-function footer$1(url) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `vc-text-xs vc-font-normal ${vcColorSecondary}`, children: [
-    "More troubleshooting tips can be found",
-    " ",
-    link(url, "here")
-  ] });
+function footer$1() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
 }
 function mainText(text) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `vim-main-text vc-text-base ${vcColorPrimary} vc-mb-4 vc-font-normal`, children: text });
@@ -74820,20 +74806,11 @@ const errorStyle = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   vcLink,
   vcRoboto
 }, Symbol.toStringTag, { value: "Module" }));
-const support = "https://docs.vimaec.com";
-const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
-const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
-const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  support,
-  supportControls,
-  supportUltra
-}, Symbol.toStringTag, { value: "Module" }));
 function fileOpeningError(url) {
   return {
     title: "File Opening Error",
     body: serverFileOpeningErrorBody(url),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -74855,7 +74832,7 @@ function serverFileDownloadingError(url, authToken, server) {
   return {
     title: "File Downloading Error",
     body: body$5(url, authToken, server),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -74884,7 +74861,7 @@ function serverFileLoadingError(url) {
   return {
     title: "File Loading Error",
     body: body$4(url),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -74904,11 +74881,18 @@ function body$4(url) {
     ])
   ] });
 }
+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
   };
 }
@@ -74938,7 +74922,7 @@ function serverCompatibilityError(url, localVersion, remoteVersion) {
   return {
     title: "Compatibility Error",
     body: body$2(url, localVersion, remoteVersion),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -74967,7 +74951,7 @@ function serverStreamError(url) {
   return {
     title: "Stream Error",
     body: body$1(),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -75214,16 +75198,19 @@ class ComponentLoader {
   }
 }
 function MessageBox(props) {
+  const [minimized, setMinimized] = React__default.useState(props.value.minimize ?? false);
   const p = props.value;
   if (!p.title || !p.body) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-message-box vc-p-6 vc-max-h-[80%] vc-max-w-[80%] vc-w-[424px] vc-bg-white vc-rounded-md vc-shadow-message vc-shadow-[0px_4px_16px_rgba(33,39,51,0.5)] vc-font-roboto", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-flex vc-justify-between vc-items-center", children: [
+      props.value.icon,
       title(p.title),
-      closeBtn(p.onClose)
+      props.value.canClose && closeBtn(p.onClose),
+      props.value.minimize && minimizeButton(minimized, setMinimized)
     ] }),
-    divider(),
-    body(p.body),
-    footer(p.footer)
+    !minimized && divider(),
+    !minimized && body(p.body),
+    !minimized && footer(p.footer)
   ] });
 }
 function title(title2) {
@@ -75233,6 +75220,9 @@ function closeBtn(onClose) {
   if (!onClose) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: onClose, className: "vc-text-[#212733] vc-text-xl", children: "×" });
 }
+function minimizeButton(minimized, setMinimized) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => setMinimized(!minimized), className: "vc-text-[#212733] vc-text-xl", children: minimized ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▼" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "▲" }) });
+}
 function body(content2) {
   if (content2 === void 0) return null;
   if (typeof content2 === "string") {
@@ -75738,7 +75728,8 @@ function useViewerInput(handler, camera2) {
 }
 const Ids = {
   showGhost: "isolationPanel.showGhost",
-  ghostOpacity: "isolationPanel.ghostOpacity"
+  ghostOpacity: "isolationPanel.ghostOpacity",
+  transparency: "isolationPanel.transparency"
 };
 const IsolationPanel$1 = forwardRef(
   (props, ref) => {
@@ -75750,8 +75741,20 @@ const IsolationPanel$1 = forwardRef(
         anchorElement: document.getElementById("vim-control-bar"),
         showPanel: props.state.showPanel,
         entries: [
-          { type: "bool", id: Ids.showGhost, label: "Show Ghost", state: props.state.showGhost },
-          // { type: "bool", id: "showRooms", label: "Show Rooms", state: props.state.showRooms },
+          {
+            type: "bool",
+            id: Ids.showGhost,
+            label: "Show Ghost",
+            state: props.state.showGhost
+          },
+          /*
+          {
+            type: "bool",
+            id: "showRooms",
+            label: "Show Rooms",
+            state: props.state.showRooms
+          },
+          */
           {
             type: "number",
             id: Ids.ghostOpacity,
@@ -75761,6 +75764,13 @@ const IsolationPanel$1 = forwardRef(
             min: 0,
             max: 1,
             step: 0.05
+          },
+          {
+            type: "bool",
+            visible: () => props.transparency,
+            id: Ids.transparency,
+            label: "Transparency",
+            state: props.state.transparency
           }
         ]
       }
@@ -75769,12 +75779,13 @@ const IsolationPanel$1 = forwardRef(
 );
 function useSharedIsolation(adapter) {
   const _adapter = useRef(adapter);
-  const visibility = useStateRef(() => adapter.computeVisibility());
+  const visibility = useStateRef(() => adapter.computeVisibility(), true);
   const autoIsolate2 = useStateRef(false);
   const showPanel = useStateRef(false);
   const showRooms = useStateRef(false);
   const showGhost = useStateRef(false);
-  const ghostOpacity = useStateRef(() => adapter.getGhostOpacity());
+  const ghostOpacity = useStateRef(() => adapter.getGhostOpacity(), true);
+  const transparency = useStateRef(true);
   const onAutoIsolate = useFuncRef(() => {
     if (adapter.hasSelection()) {
       adapter.isolateSelection();
@@ -75799,6 +75810,7 @@ function useSharedIsolation(adapter) {
   });
   showGhost.useOnChange((v) => adapter.showGhost(v));
   showRooms.useOnChange((v) => adapter.setShowRooms(v));
+  transparency.useOnChange((v) => adapter.enableTransparency(v));
   ghostOpacity.useValidate((next, current) => {
     return next <= 0 ? current : next;
   });
@@ -75812,7 +75824,8 @@ function useSharedIsolation(adapter) {
     showRooms,
     ghostOpacity,
     onAutoIsolate,
-    onVisibilityChange
+    onVisibilityChange,
+    transparency
   };
 }
 function useWebglIsolation(viewer) {
@@ -75820,6 +75833,29 @@ function useWebglIsolation(viewer) {
   return useSharedIsolation(adapter);
 }
 function createWebglIsolationAdapter(viewer) {
+  var transparency = true;
+  var ghost2 = false;
+  var rooms = false;
+  function updateMaterials() {
+    viewer.renderer.modelMaterial = !ghost2 && transparency ? void 0 : ghost2 && transparency ? [void 0, viewer.materials.ghost] : !ghost2 && !transparency ? viewer.materials.simple : ghost2 && !transparency ? [viewer.materials.simple, viewer.materials.ghost] : (() => {
+      throw new Error("Unreachable state in isolation materials");
+    })();
+  }
+  function updateVisibility(elements, predicate) {
+    if (elements === "all") {
+      for (let v of viewer.vims) {
+        for (let o of v.getAllElements()) {
+          if (o.type === "Element3D") {
+            o.visible = o.isRoom ? rooms : predicate(o);
+          }
+        }
+      }
+    } else {
+      for (let o of elements) {
+        o.visible = o.isRoom ? rooms : predicate(o);
+      }
+    }
+  }
   return {
     onVisibilityChange: viewer.renderer.onSceneUpdated,
     onSelectionChanged: viewer.selection.onSelectionChanged,
@@ -75828,28 +75864,28 @@ function createWebglIsolationAdapter(viewer) {
     hasVisibleSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => o.visible),
     hasHiddenSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => !o.visible),
     clearSelection: () => viewer.selection.clear(),
-    isolateSelection: () => updateAllVisibility(viewer, (o) => viewer.selection.has(o)),
+    isolateSelection: () => updateVisibility("all", (o) => viewer.selection.has(o)),
     hideSelection: () => {
-      viewer.selection.getAll().forEach((o) => o.visible = false);
+      updateVisibility(viewer.selection.getAll(), (o) => false);
     },
     showSelection: () => {
-      viewer.selection.getAll().forEach((o) => o.visible = true);
+      updateVisibility(viewer.selection.getAll(), (o) => true);
     },
     hideAll: () => {
-      updateAllVisibility(viewer, (o) => false);
+      updateVisibility("all", (o) => false);
     },
     showAll: () => {
-      updateAllVisibility(viewer, (o) => true);
+      updateVisibility("all", (o) => true);
     },
     isolate: (instances) => {
       const set3 = new Set(instances);
-      updateAllVisibility(viewer, (o) => o.instances.some((i) => set3.has(i)));
+      updateVisibility("all", (o) => o.instances.some((i) => set3.has(i)));
     },
     show: (instances) => {
       for (let i of instances) {
         for (let v of viewer.vims) {
           const o = v.getElement(i);
-          o.visible = true;
+          o.visible = o.isRoom ? rooms : true;
         }
       }
     },
@@ -75857,29 +75893,30 @@ function createWebglIsolationAdapter(viewer) {
       for (let i of instances) {
         for (let v of viewer.vims) {
           const o = v.getElement(i);
-          o.visible = false;
+          o.visible = o.isRoom ? rooms : false;
         }
       }
     },
+    enableTransparency: (enable) => {
+      if (transparency !== enable) {
+        transparency = enable;
+        updateMaterials();
+      }
+    },
     showGhost: (show) => {
-      viewer.renderer.modelMaterial = show ? [viewer.materials.simple, viewer.materials.ghost] : void 0;
+      ghost2 = show;
+      updateMaterials();
     },
     getGhostOpacity: () => viewer.materials.ghostOpacity,
     setGhostOpacity: (opacity) => viewer.materials.ghostOpacity = opacity,
-    getShowRooms: () => true,
+    getShowRooms: () => rooms,
     setShowRooms: (show) => {
-      console.log("setShowRooms not implemented");
-    }
-  };
-}
-function updateAllVisibility(viewer, predicate) {
-  for (let v of viewer.vims) {
-    for (let o of v.getAllElements()) {
-      if (o.type === "Element3D") {
-        o.visible = predicate(o);
+      if (rooms !== show) {
+        rooms = show;
+        updateVisibility("all", (o) => o.visible);
       }
     }
-  }
+  };
 }
 function getVisibilityState$1(viewer) {
   let all = true;
@@ -75905,6 +75942,574 @@ function getVisibilityState$1(viewer) {
   if (onlySelectionFlag) return "onlySelection";
   return "some";
 }
+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
+      cursorOrbit: true,
+      cursorLookAround: true,
+      cursorPan: true,
+      cursorZoom: true,
+      // Control bar - camera
+      cameraAuto: true,
+      cameraFrameScene: true,
+      cameraFrameSelection: true,
+      // Control bar - tools
+      sectioningEnable: true,
+      sectioningFitToSelection: true,
+      sectioningReset: true,
+      sectioningShow: true,
+      sectioningAuto: true,
+      sectioningSettings: true,
+      measureEnable: true,
+      // Control bar - Visibility
+      visibilityClearSelection: true,
+      visibilityShowAll: true,
+      visibilityToggle: true,
+      visibilityIsolate: true,
+      visibilityAutoIsolate: true,
+      visibilitySettings: true,
+      // Control bar - settings
+      miscProjectInspector: true,
+      miscSettings: true,
+      miscHelp: true,
+      miscMaximise: true
+    }
+  };
+}
+function renderSettingsInputBox(settings2, item) {
+  const ref = React__default.useRef(null);
+  useEffect(() => {
+    var _a3;
+    ref.current.value = (_a3 = item.getter(settings2.value)) == null ? void 0 : _a3.toString();
+  }, []);
+  const update = (event) => {
+    const str = event.target.value;
+    const n = Number.parseFloat(str);
+    if (Number.isNaN(n)) {
+      event.target.value = item.getter(settings2.value).toString();
+    } else {
+      const value = item.transform(n);
+      event.target.value = value.toString();
+      settings2.update((s) => item.setter(s, value));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1 ", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
+      item.label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        className: "vim-settings-textbox vc-border vc-rounded-sm vc-border-gray vc-w-14 vc-ml-1 vc-p-1",
+        onBlur: update
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: item.info })
+  ] });
+}
+function renderSettingsToggle(settings2, item) {
+  const value = item.getter(settings2.value);
+  if (value === "AlwaysTrue" || value === "AlwaysFalse") return null;
+  const handleChange = () => {
+    const current = item.getter(settings2.value);
+    settings2.update((s) => item.setter(s, !current));
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: value,
+        onChange: handleChange,
+        className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium"
+      }
+    ),
+    " ",
+    item.label
+  ] });
+}
+function renderSettingsSubtitle(item) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: item.title });
+}
+function SettingsPanel(props) {
+  if (!props.visible) return null;
+  function renderItem(settings2, item) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: (() => {
+      switch (item.type) {
+        case "subtitle":
+          return renderSettingsSubtitle(item);
+        case "toggle":
+          return renderSettingsToggle(settings2, item);
+        case "box":
+          return renderSettingsInputBox(settings2, item);
+        case "element":
+          return item.element;
+        default:
+          return null;
+      }
+    })() }, item.key);
+  }
+  const customizer = props.settings.customizer.get();
+  const content2 = customizer ? customizer(props.content) : props.content;
+  const sections = buildSections(content2);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-absolute vc-inset-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title vc-mb-2", children: "Settings" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "\r\n        vim-settings\r\n        vc-absolute vc-top-8 vc-left-0 vc-right-0 vc-bottom-0\r\n        vc-overflow-y-auto\r\n        vc-pr-2\r\n        vc-space-y-2\r\n        vc-box-border\r\n      ", children: sections.map((section) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "details",
+      {
+        open: true,
+        className: "\r\n              vim-settings-section\r\n              vc-bg-white\r\n              vc-rounded-md\r\n              vc-shadow-sm\r\n              vc-border\r\n              vc-border-slate-200\r\n              vc-p-2\r\n              vc-space-y-2\r\n            ",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "vim-settings-section-title vc-font-medium vc-text-sm vc-cursor-pointer", children: section.title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-settings-section-content vc-mt-2 vc-space-y-2", children: section.items.map(
+            (item) => renderItem(props.settings, item)
+          ) })
+        ]
+      },
+      section.key
+    )) })
+  ] });
+}
+function buildSections(items) {
+  const sections = [];
+  let current = null;
+  for (const item of items) {
+    if (item.type === "subtitle") {
+      current = {
+        key: item.key,
+        title: item.title,
+        items: []
+      };
+      sections.push(current);
+    } else {
+      if (!current) {
+        current = {
+          key: "default",
+          title: "",
+          items: []
+        };
+        sections.push(current);
+      }
+      current.items.push(item);
+    }
+  }
+  return sections;
+}
+class SettingsPanelKeys {
+}
+// === Inputs ===
+__publicField(SettingsPanelKeys, "InputsSubtitle", "inputs");
+__publicField(SettingsPanelKeys, "InputsScrollSpeedBox", "scrollSpeed");
+// === Panels ===
+__publicField(SettingsPanelKeys, "PanelsSubtitle", "panels");
+__publicField(SettingsPanelKeys, "PanelsShowLogoToggle", "logo");
+__publicField(SettingsPanelKeys, "PanelsShowBimTreeToggle", "bimTree");
+__publicField(SettingsPanelKeys, "PanelsShowBimInfoToggle", "bimInfo");
+__publicField(SettingsPanelKeys, "PanelsShowAxesPanelToggle", "axesPanel");
+__publicField(SettingsPanelKeys, "PanelsShowPerformancePanelToggle", "performance");
+// === Axes ===
+__publicField(SettingsPanelKeys, "AxesSubtitle", "axes");
+__publicField(SettingsPanelKeys, "AxesShowOrthographicButtonToggle", "orthographic");
+__publicField(SettingsPanelKeys, "AxesShowResetCameraButtonToggle", "resetCamera");
+// === Control Bar ===
+__publicField(SettingsPanelKeys, "ControlBarSubtitle", "controlBar");
+__publicField(SettingsPanelKeys, "ControlBarShowControlBarToggle", "controlBarVisible");
+// --- Control Bar - Cursors ---
+__publicField(SettingsPanelKeys, "ControlBarCursorsSubtitle", "controlBarCursors");
+__publicField(SettingsPanelKeys, "ControlBarCursorsShowOrbitButtonToggle", "orbit");
+__publicField(SettingsPanelKeys, "ControlBarCursorsShowLookAroundButtonToggle", "lookAround");
+__publicField(SettingsPanelKeys, "ControlBarCursorsShowPanButtonToggle", "pan");
+__publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomButtonToggle", "zoom");
+__publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomWindowButtonToggle", "zoomWindow");
+// --- Control Bar - Tools ---
+__publicField(SettingsPanelKeys, "ControlBarToolsSubtitle", "controlBarTools");
+__publicField(SettingsPanelKeys, "ControlBarToolsShowMeasuringModeButtonToggle", "measuringMode");
+// --- Control Bar Camera ---
+__publicField(SettingsPanelKeys, "ControlBarCameraSubtitle", "settingsPanel.controlBar.Camera");
+__publicField(SettingsPanelKeys, "ControlBarAutoCamera", "settingsPanel.controlBar.autoCamera");
+__publicField(SettingsPanelKeys, "ControlBarFrameSelection", "settingsPanel.controlBar.frameSelection");
+__publicField(SettingsPanelKeys, "ControlBarFrameAll", "settingsPanel.controlBar.frameAll");
+// --- Control Bar - Sectioning ---
+__publicField(SettingsPanelKeys, "ControlBarSectioningSubtitle", "settingsPanel.controlBar.sectioning");
+__publicField(SettingsPanelKeys, "ControlBarSectioningEnable", "settingsPanel.controlBar.enableSectioning");
+__publicField(SettingsPanelKeys, "ControlBarSectioningFitToSelection", "settingsPanel.controlBar.fitToSelection");
+__publicField(SettingsPanelKeys, "ControlBarSectioningReset", "settingsPanel.controlBar.reset");
+__publicField(SettingsPanelKeys, "ControlBarSectioningShow", "settingsPanel.controlBar.show");
+__publicField(SettingsPanelKeys, "ControlBarSectioningAuto", "settingsPanel.controlBar.auto");
+__publicField(SettingsPanelKeys, "ControlBarSectioningSettings", "settingsPanel.controlBar.settings");
+// --- Control Bar - Visibility ---
+__publicField(SettingsPanelKeys, "ControlBarVisibilitySubtitle", "controlBar.visibility.subtitle");
+__publicField(SettingsPanelKeys, "ControlBarVisibilityClearSelection", "controlBar.visibility.clearSelection");
+__publicField(SettingsPanelKeys, "ControlBarVisibilityShowAll", "controlBar.visibility.showAll");
+__publicField(SettingsPanelKeys, "ControlBarVisibilityToggle", "controlBar.visibility.toggle");
+__publicField(SettingsPanelKeys, "ControlBarVisibilityIsolate", "controlBar.visibility.isolate");
+__publicField(SettingsPanelKeys, "ControlBarVisibilityAutoIsolate", "controlBar.visibility.autoIsolate");
+__publicField(SettingsPanelKeys, "ControlBarVisibilitySettings", "controlBar.visibility.settings");
+// --- Control Bar - Settings ---
+__publicField(SettingsPanelKeys, "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.logo,
+      setter: (s, v) => s.ui.logo = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.PanelsShowBimTreeToggle,
+      label: "Bim Tree",
+      getter: (s) => s.ui.bimTreePanel,
+      setter: (s, v) => s.ui.bimTreePanel = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.PanelsShowBimInfoToggle,
+      label: "Bim Info",
+      getter: (s) => s.ui.bimInfoPanel,
+      setter: (s, v) => s.ui.bimInfoPanel = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.PanelsShowAxesPanelToggle,
+      label: "Axes",
+      getter: (s) => s.ui.axesPanel,
+      setter: (s, v) => s.ui.axesPanel = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.PanelsShowPerformancePanelToggle,
+      label: "Performance",
+      getter: (s) => s.ui.performance,
+      setter: (s, v) => s.ui.performance = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.ControlBarShowControlBarToggle,
+      label: "Control Bar",
+      getter: (s) => s.ui.controlBar,
+      setter: (s, v) => s.ui.controlBar = 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.orthographic,
+      setter: (s, v) => s.ui.orthographic = v
+    },
+    {
+      type: "toggle",
+      key: SettingsPanelKeys.AxesShowResetCameraButtonToggle,
+      label: "Reset Camera",
+      getter: (s) => s.ui.resetCamera,
+      setter: (s, v) => s.ui.resetCamera = 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.performance)) {
+      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();
@@ -75935,7 +76540,7 @@ function createViewer$1(container, settings2 = {}, coreSettings = {}) {
   return controllablePromise.promise;
 }
 function Viewer$1(props) {
-  const settings2 = useSettings(props.viewer, props.settings ?? {});
+  const settings2 = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s));
   const modal = useRef(null);
   const sectionBoxRef = useWebglSectionBox(props.viewer);
   const isolationPanelHandle = useRef(null);
@@ -75961,6 +76566,16 @@ function Viewer$1(props) {
     side.setHasBim(((_a3 = viewerState.vim.get()) == null ? void 0 : _a3.bim) !== void 0);
   });
   useEffect(() => {
+    sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+      if (show) {
+        isolationRef.showPanel.set(false);
+      }
+    });
+    isolationRef.showPanel.onChange.subscribe((show) => {
+      if (show) {
+        sectionBoxRef.showOffsetPanel.set(false);
+      }
+    });
     if (performanceRef.current) {
       addPerformanceCounter(performanceRef.current);
     }
@@ -75974,7 +76589,11 @@ function Viewer$1(props) {
       loader: loader.current,
       isolation: isolationRef,
       camera: camera2,
-      settings: settings2,
+      settings: {
+        update: settings2.update,
+        register: settings2.register,
+        customize: (c) => settings2.customizer.set(c)
+      },
       get isolationPanel() {
         return isolationPanelHandle.current;
       },
@@ -76020,7 +76639,7 @@ function Viewer$1(props) {
       SettingsPanel,
       {
         visible: side.getContent() === "settings",
-        viewer: props.viewer,
+        content: getWebglSettingsContent(props.viewer),
         settings: settings2
       }
     )
@@ -76049,7 +76668,7 @@ function Viewer$1(props) {
           }
         ),
         /* @__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,
           {
@@ -76088,7 +76707,8 @@ function Viewer$1(props) {
 const index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Viewer: Viewer$1,
-  createViewer: createViewer$1
+  createViewer: createViewer$1,
+  getDefaultSettings
 }, Symbol.toStringTag, { value: "Module" }));
 function getErrorMessage(state) {
   if (state.status !== "error") return void 0;
@@ -76147,18 +76767,20 @@ function useUltraSectionBox(viewer) {
       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;
 }
@@ -76228,6 +76850,7 @@ function createAdapter(viewer) {
         obj.state = VisibilityState.HIGHLIGHTED;
       });
     },
+    // TODO: Change this api to use elements
     isolate: (instances) => {
       hide("all");
       viewer.selection.getAll().forEach((obj) => {
@@ -76261,11 +76884,12 @@ function createAdapter(viewer) {
         }
       }
     },
-    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) => {
@@ -76304,7 +76928,61 @@ function onlySelection(viewer, vim) {
 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);
@@ -76323,6 +77001,7 @@ function createViewer(container) {
       {
         container: cmpContainer,
         core,
+        settings: settings2,
         onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
       }
     )
@@ -76330,18 +77009,37 @@ function createViewer(container) {
   return controllablePromise.promise;
 }
 function Viewer3(props) {
-  const sectionBox2 = useUltraSectionBox(props.core);
-  const camera2 = useUltraCamera(props.core, sectionBox2);
+  const settings2 = useSettings(props.settings ?? {}, getDefaultUltraSettings());
+  const sectionBoxRef = useUltraSectionBox(props.core);
+  const camera2 = useUltraCamera(props.core, sectionBoxRef);
   const isolationPanelHandle = useRef(null);
   const sectionBoxPanelHandle = useRef(null);
   const modalHandle = useRef(null);
   const side = useSideState(true, 400);
   const [_, setSelectState] = useState(0);
   const [controlBarCustom, setControlBarCustom] = useState(() => (c) => c);
-  const isolation = useUltraIsolation(props.core);
-  const controlBar = useUltraControlBar(props.core, sectionBox2, isolation, camera2, (_2) => _2);
+  const isolationRef = useUltraIsolation(props.core);
+  const controlBar = useUltraControlBar(
+    props.core,
+    sectionBoxRef,
+    isolationRef,
+    camera2,
+    settings2.value,
+    side,
+    (_2) => _2
+  );
   useViewerInput(props.core.inputs, camera2);
   useEffect(() => {
+    sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
+      if (show) {
+        isolationRef.showPanel.set(false);
+      }
+    });
+    isolationRef.showPanel.onChange.subscribe((show) => {
+      if (show) {
+        sectionBoxRef.showOffsetPanel.set(false);
+      }
+    });
     props.core.onStateChanged.subscribe((state) => updateModal(modalHandle, state));
     props.core.selection.onSelectionChanged.subscribe(() => {
       setSelectState((i) => (i + 1) % 2);
@@ -76351,9 +77049,14 @@ function Viewer3(props) {
       get modal() {
         return modalHandle.current;
       },
-      isolation,
-      sectionBox: sectionBox2,
+      isolation: isolationRef,
+      sectionBox: sectionBoxRef,
       camera: camera2,
+      settings: {
+        update: settings2.update,
+        register: settings2.register,
+        customize: (c) => settings2.customizer.set(c)
+      },
       get isolationPanel() {
         return isolationPanelHandle.current;
       },
@@ -76368,7 +77071,24 @@ function Viewer3(props) {
       load: patchLoad(props.core, modalHandle)
     });
   }, []);
+  const sidePanel = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SettingsPanel,
+    {
+      visible: side.getContent() === "settings",
+      content: getUltraSettingsContent(props.core),
+      settings: settings2
+    }
+  ) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SidePanelMemo,
+      {
+        container: props.container,
+        viewer: props.core,
+        side,
+        content: sidePanel
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         whenTrue(true, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
@@ -76380,8 +77100,8 @@ function Viewer3(props) {
             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 }),
@@ -76419,7 +77139,8 @@ function patchLoad(viewer, modal) {
 const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Viewer: Viewer3,
-  createViewer
+  createViewer,
+  getDefaultUltraSettings
 }, Symbol.toStringTag, { value: "Module" }));
 const SectionBoxPanel = {
   Ids