vim-web 0.5.0-dev.16 → 0.5.0-dev.18

package/dist/vim-web.iife.js

@@ -48867,19 +48867,38 @@ void main() {
       return new InsertableSubmesh(this, index2);
     }
     /**
-     * Overrides mesh material, set to undefine to restore initial material.
-     */
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
   }
   class InstancedSubmesh {
     constructor(mesh, index2) {
@@ -48966,17 +48985,39 @@ void main() {
       }
       return submeshes;
     }
+    /**
+       * Sets the material for this mesh. 
+       * Set to undefined to reset to original materials.
+       */
     setMaterial(value) {
-      if (this._material === value) return;
       if (this.ignoreSceneMaterial) return;
-      this.mesh.material = value ?? this._material;
+      const base = this._material;
+      let mat;
+      if (Array.isArray(value)) {
+        mat = this._mergeMaterials(value, base);
+      } else {
+        mat = value ?? base;
+      }
+      this.mesh.material = mat;
       this.mesh.geometry.clearGroups();
-      if (value instanceof Array) {
-        value.forEach((m, i2) => {
+      if (Array.isArray(mat)) {
+        mat.forEach((_m, i2) => {
           this.mesh.geometry.addGroup(0, Infinity, i2);
         });
       }
     }
+    _mergeMaterials(value, base) {
+      const baseArr = Array.isArray(base) ? base : [base];
+      const result = [];
+      for (const v of value) {
+        if (v === void 0) {
+          result.push(...baseArr);
+        } else {
+          result.push(v);
+        }
+      }
+      return result;
+    }
     computeBoundingBoxes() {
       this.mesh.geometry.computeBoundingBox();
       const boxes = new Array(this.mesh.count);
@@ -50116,6 +50157,9 @@ void main() {
     get index() {
       return this._submesh.index;
     }
+    get isRoom() {
+      return false;
+    }
     /**
      * Updates the underlying submesh and rebinds all attributes to the new mesh.
      * @param mesh - The new submesh to bind to this marker.
@@ -55887,7 +55931,7 @@ void main() {
     /**
      * Resizes the canvas and updates the camera to match new parent dimensions.
      */
-    ResizeToParent() {
+    resizeToParent() {
       this._onResize.dispatch();
     }
     /**
@@ -56979,6 +57023,10 @@ void main() {
        * Indicates whether the scene should be re-rendered on change only.
        */
       __publicField(this, "onDemand");
+      /**
+       * The material that will be used when setting model material to undefined.
+       */
+      __publicField(this, "defaultModelMaterial");
       __publicField(this, "fitViewport", () => {
         const size = this._viewport.getParentSize();
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -57050,11 +57098,14 @@ void main() {
       this._scene.threeScene.background = color;
       this.needsUpdate = true;
     }
+    /**
+     * Sets the material used to render models. If set to undefined, the default model or mesh material is used.
+     */
     get modelMaterial() {
       return this._scene.modelMaterial;
     }
     set modelMaterial(material) {
-      this._scene.modelMaterial = material;
+      this._scene.modelMaterial = material ?? this.defaultModelMaterial;
     }
     /**
      * Signal dispatched at the end of each frame if the scene was updated, such as visibility changes.
@@ -60877,6 +60928,12 @@ Averrage Date/Second ${avgDataRatePS} kb
         this._rpc.RPCSetCameraAspectRatio(this.canvas.offsetWidth, this.canvas.offsetHeight);
       }
     }
+    /**
+     * Resizes the viewport to match its parent's dimensions
+     */
+    resizeToParent() {
+      this.update();
+    }
     /**
      * Cleans up resources by removing resize observer and clearing timeouts
      */
@@ -63684,50 +63741,6 @@ Averrage Date/Second ${avgDataRatePS} kb
     visible,
     zoom
   }, Symbol.toStringTag, { value: "Module" }));
-  function getDefaultSettings() {
-    return {
-      capacity: {
-        canFollowUrl: true,
-        canGoFullScreen: true,
-        canDownload: true,
-        canReadLocalStorage: true
-      },
-      ui: {
-        logo: true,
-        performance: false,
-        bimTreePanel: true,
-        bimInfoPanel: true,
-        // axesPanel
-        axesPanel: true,
-        orthographic: true,
-        resetCamera: true,
-        // Control bar
-        controlBar: true,
-        // Control bar - cursors
-        orbit: true,
-        lookAround: true,
-        pan: true,
-        zoom: true,
-        zoomWindow: true,
-        // Control bar - camera
-        autoCamera: true,
-        frameScene: true,
-        frameSelection: true,
-        // Control bar - tools
-        sectioningMode: true,
-        measuringMode: true,
-        toggleIsolation: true,
-        // Control bar - settings
-        projectInspector: true,
-        settings: true,
-        help: true,
-        maximise: true
-      }
-    };
-  }
-  function createSettings(settings2) {
-    return settings2 !== void 0 ? deepmerge(getDefaultSettings(), settings2) : getDefaultSettings();
-  }
   function getLocalSettings(settings2 = {}) {
     try {
       const json = localStorage.getItem("viewer.settings");
@@ -63782,8 +63795,6 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    createSettings,
-    getDefaultSettings,
     getLocalSettings,
     isFalse,
     isTrue,
@@ -67615,7 +67626,7 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Style = style;
   const Ids$2 = controlBarIds;
-  function controlBarSectionBox(section, hasSelection) {
+  function controlBarSectionBox(section, hasSelection, settings2) {
     return {
       id: Ids$2.sectionSectionBox,
       style: section.enable.get() ? Style.sectionNoPadStyle : Style.sectionDefaultStyle,
@@ -67623,6 +67634,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonSectionBoxEnable,
+          enabled: () => isTrue(settings2.sectioningEnable),
           tip: "Enable Section Box",
           isOn: () => section.enable.get(),
           style: (on) => Style.buttonExpandStyle(on),
@@ -67632,7 +67644,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxToSelection,
           tip: "Fit Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningFitToSelection),
           isOn: () => hasSelection,
           style: (on) => Style.buttonDisableStyle(on),
           action: () => section.sectionSelection.call(),
@@ -67641,7 +67653,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxToScene,
           tip: "Reset Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningReset),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.sectionScene.call(),
           icon: sectionBoxReset
@@ -67649,7 +67661,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxVisible,
           tip: "Show Section Box",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningShow),
           isOn: () => section.visible.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.visible.set(!section.visible.get()),
@@ -67658,7 +67670,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxAuto,
           tip: "Auto Section",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningAuto),
           isOn: () => section.auto.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.auto.set(!section.auto.get()),
@@ -67667,7 +67679,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonSectionBoxSettings,
           tip: "Section Settings",
-          enabled: () => section.enable.get(),
+          enabled: () => section.enable.get() && isTrue(settings2.sectioningSettings),
           isOn: () => section.showOffsetPanel.get(),
           style: (on) => Style.buttonDefaultStyle(on),
           action: () => section.showOffsetPanel.set(!section.showOffsetPanel.get()),
@@ -67685,7 +67697,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonCameraOrbit,
-          enabled: () => isTrue(settings2.ui.orbit),
+          enabled: () => isTrue(settings2.cursorOrbit),
           tip: "Orbit",
           action: () => pointer2.onButton(PointerMode$1.ORBIT),
           icon: orbit,
@@ -67694,7 +67706,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraLook,
-          enabled: () => isTrue(settings2.ui.lookAround),
+          enabled: () => isTrue(settings2.cursorLookAround),
           tip: "Look Around",
           action: () => pointer2.onButton(PointerMode$1.LOOK),
           icon: look,
@@ -67703,7 +67715,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraPan,
-          enabled: () => isTrue(settings2.ui.pan),
+          enabled: () => isTrue(settings2.cursorPan),
           tip: "Pan",
           action: () => pointer2.onButton(PointerMode$1.PAN),
           icon: pan,
@@ -67712,7 +67724,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraZoom,
-          enabled: () => isTrue(settings2.ui.zoom),
+          enabled: () => isTrue(settings2.cursorZoom),
           tip: "Zoom",
           action: () => pointer2.onButton(PointerMode$1.ZOOM),
           icon: zoom,
@@ -67722,7 +67734,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarMeasure(settings2, measure$1) {
+  function controlBarMeasure(measure$1, settings2) {
     return {
       id: Ids$2.sectionActions,
       enable: () => true,
@@ -67730,7 +67742,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonMeasure,
-          enabled: () => isTrue(settings2.ui.measuringMode),
+          enabled: () => isTrue(settings2.measuringMode),
           isOn: () => measure$1.active,
           tip: "Measuring Mode",
           action: () => measure$1.toggle(),
@@ -67740,6 +67752,23 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
+  function controlBarSettingsUltra(side, settings$1) {
+    return {
+      id: Ids$2.sectionSettings,
+      enable: () => isTrue(settings$1.ui.settings),
+      style: Style.sectionDefaultStyle,
+      buttons: [
+        {
+          id: Ids$2.buttonSettings,
+          enabled: () => isTrue(settings$1.ui.settings),
+          tip: "Settings",
+          action: () => side.toggleContent("settings"),
+          icon: settings,
+          style: Style.buttonDefaultStyle
+        }
+      ]
+    };
+  }
   function controlBarSettings(modal, side, settings$1) {
     const fullScreen = getFullScreenState();
     return {
@@ -67782,7 +67811,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarCamera(camera2) {
+  function controlBarCamera(camera2, settings2) {
     return {
       id: Ids$2.sectionCamera,
       enable: () => true,
@@ -67790,6 +67819,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonCameraAuto,
+          enabled: () => isTrue(settings2.cameraAuto),
           tip: "Auto Camera",
           isOn: () => camera2.autoCamera.get(),
           action: () => camera2.autoCamera.set(!camera2.autoCamera.get()),
@@ -67798,7 +67828,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraFrameSelection,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          enabled: () => isTrue(settings2.cameraFrameSelection),
           tip: "Frame Selection",
           action: () => camera2.frameSelection.call(),
           icon: frameSelection,
@@ -67807,7 +67837,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonCameraFrameScene,
-          // enabled: () => isTrue(settings.ui.zoomToFit), TODO: Implement ui toggles in Ultra
+          enabled: () => isTrue(settings2.cameraFrameScene),
           tip: "Frame All",
           action: () => camera2.frameScene.call(),
           icon: frameScene,
@@ -67817,7 +67847,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       ]
     };
   }
-  function controlBarSelection(isolation) {
+  function controlBarVisibility(isolation, settings2) {
     const adapter = isolation.adapter.current;
     const someVisible = adapter.hasVisibleSelection() || !adapter.hasHiddenSelection();
     return {
@@ -67827,6 +67857,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       buttons: [
         {
           id: Ids$2.buttonClearSelection,
+          enabled: () => isTrue(settings2.visibilityClearSelection),
           tip: "Clear Selection",
           action: () => adapter.clearSelection(),
           icon: pointer,
@@ -67836,6 +67867,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           id: Ids$2.buttonShowAll,
           tip: "Show All",
+          enabled: () => isTrue(settings2.visibilityShowAll),
           action: () => adapter.showAll(),
           icon: showAll,
           isOn: () => !isolation.autoIsolate.get() && isolation.visibility.get() !== "all",
@@ -67843,7 +67875,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonHideSelection,
-          enabled: () => someVisible,
+          enabled: () => someVisible && isTrue(settings2.visibilityToggle),
           tip: "Hide Selection",
           action: () => adapter.hideSelection(),
           icon: hideSelection,
@@ -67852,7 +67884,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonShowSelection,
-          enabled: () => !someVisible,
+          enabled: () => !someVisible && isTrue(settings2.visibilityToggle),
           tip: "Show Selection",
           action: () => adapter.showSelection(),
           icon: showSelection,
@@ -67861,6 +67893,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonIsolateSelection,
+          enabled: () => isTrue(settings2.visibilityIsolate),
           tip: "Isolate Selection",
           action: () => adapter.isolateSelection(),
           icon: isolateSelection,
@@ -67869,6 +67902,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonAutoIsolate,
+          enabled: () => isTrue(settings2.visibilityAutoIsolate),
           tip: "Auto Isolate",
           action: () => isolation.autoIsolate.set(!isolation.autoIsolate.get()),
           isOn: () => isolation.autoIsolate.get(),
@@ -67876,6 +67910,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         },
         {
           id: Ids$2.buttonIsolationSettings,
+          enabled: () => isTrue(settings2.visibilitySettings),
           tip: "Isolation Settings",
           action: () => isolation.showPanel.set(!isolation.showPanel.get()),
           icon: slidersHoriz,
@@ -67886,25 +67921,19 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   function useControlBar(viewer, camera2, modal, side, cursor, settings2, section, isolationRef, customization) {
     const measure2 = getMeasureState(viewer, cursor);
-    const pointerSection = controlBarPointer(viewer, camera2, settings2);
-    const actionSection = controlBarMeasure(settings2, measure2);
-    const sectionBoxSection = controlBarSectionBox(section, viewer.selection.any());
-    const settingsSection = controlBarSettings(modal, side, settings2);
-    const cameraSection = controlBarCamera(camera2);
-    const selectionSection = controlBarSelection(isolationRef);
     let controlBarSections = [
-      pointerSection,
-      actionSection,
-      cameraSection,
-      sectionBoxSection,
-      selectionSection,
-      settingsSection
+      controlBarPointer(viewer, camera2, settings2.ui),
+      controlBarCamera(camera2, settings2.ui),
+      controlBarVisibility(isolationRef, settings2.ui),
+      controlBarMeasure(measure2, settings2.ui),
+      controlBarSectionBox(section, viewer.selection.any(), settings2.ui),
+      controlBarSettings(modal, side, settings2)
     ];
     controlBarSections = (customization == null ? void 0 : customization(controlBarSections)) ?? controlBarSections;
     return controlBarSections;
   }
   function anyUiCursorButton(settings2) {
-    return isTrue(settings2.ui.orbit) || isTrue(settings2.ui.lookAround) || isTrue(settings2.ui.pan) || isTrue(settings2.ui.zoom) || isTrue(settings2.ui.zoomWindow);
+    return isTrue(settings2.cursorOrbit) || isTrue(settings2.cursorLookAround) || isTrue(settings2.cursorPan) || isTrue(settings2.cursorZoom);
   }
   function anyUiSettingButton(settings2) {
     return isTrue(settings2.ui.projectInspector) || isTrue(settings2.ui.settings) || isTrue(settings2.ui.help) || isTrue(settings2.ui.maximise);
@@ -72808,7 +72837,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       return;
     }
     if (rectElem.top < rectContainer.top || rectElem.top < 0) {
-      selection.scrollIntoView();
+      selection.scrollIntoView({ block: "nearest", inline: "nearest" });
     }
   }
   const isControlKey = (e) => {
@@ -73919,7 +73948,7 @@ Averrage Date/Second ${avgDataRatePS} kb
       } else {
         props.container.gfx.style.left = "0px";
       }
-      props.viewer.viewport.ResizeToParent();
+      props.viewer.viewport.resizeToParent();
     };
     const getMaxSize = () => {
       return props.container.root.clientWidth * MAX_WIDTH;
@@ -73978,7 +74007,10 @@ Averrage Date/Second ${avgDataRatePS} kb
         style: {
           position: "absolute"
         },
-        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 vc-bg-gray-lightest vc-text-gray-darker ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
+        className: `vim-side-panel vc-top-0 vc-left-0 vc-z-20 
+            vc-bg-gray-lightest vc-text-gray-darker 
+            vc-border-r vc-border-gray-light 
+            ${props.side.getContent() !== "none" ? "" : "vc-hidden"}`,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
@@ -74061,180 +74093,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       [side, width]
     );
   }
-  function SettingsPanel(props) {
-    if (!props.visible) return null;
-    const toggleElement = (label, state, action) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: state,
-            onChange: action,
-            className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium "
-          }
-        ),
-        " ",
-        label
-      ] });
-    };
-    const settingsToggle = (label, getter, setter) => {
-      const value = getter(props.settings.value);
-      if (value === "AlwaysTrue" || value === "AlwaysFalse") {
-        return null;
-      }
-      return toggleElement(label, value, () => {
-        const value2 = getter(props.settings.value);
-        props.settings.update((s) => setter(s, !value2));
-      });
-    };
-    const settingsBox = (label, info, transform, getter, setter) => {
-      const ref = React2.useRef(null);
-      React2.useEffect(() => {
-        ref.current.value = props.viewer.inputs.scrollSpeed.toFixed(2);
-      }, []);
-      getter(props.settings.value).toString();
-      const update = (event) => {
-        const str = event.target.value;
-        const n = Number.parseFloat(str);
-        if (Number.isNaN(n)) {
-          event.target.value = getter(props.settings.value).toString();
-        } else {
-          const value2 = transform(n);
-          event.target.value = value2.toString();
-          props.settings.update((s) => setter(s, value2));
-        }
-      };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ref, type: "text", className: "vim-settings-textbox vc-w-14 vc-ml-1 vc-p-1", onBlur: (e) => update(e) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: info })
-      ] });
-    };
-    function settingsSubtitle(title2) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: title2 });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: "vc-absolute vc-inset-0",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title", children: "Settings " }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vim-settings vc-absolute vc-top-6 vc-left-0 vc-bottom-0 vc-right-0 vc-overflow-y-auto", children: [
-            settingsSubtitle("Inputs"),
-            settingsBox(
-              "Scroll Speed",
-              "[0.1,10]",
-              (n) => MathUtils.clamp(n, 0.1, 10),
-              (s) => props.viewer.inputs.scrollSpeed,
-              (s, v) => {
-                props.viewer.inputs.scrollSpeed = v;
-              }
-            ),
-            settingsSubtitle("Panels"),
-            settingsToggle(
-              "Show Logo",
-              (settings2) => settings2.ui.logo,
-              (settings2, value) => settings2.ui.logo = value
-            ),
-            settingsToggle(
-              "Show Bim Tree",
-              (settings2) => settings2.ui.bimTreePanel,
-              (settings2, value) => settings2.ui.bimTreePanel = value
-            ),
-            settingsToggle(
-              "Show Bim Info",
-              (settings2) => settings2.ui.bimInfoPanel,
-              (settings2, value) => settings2.ui.bimInfoPanel = value
-            ),
-            settingsToggle(
-              "Show Axes Panel",
-              (settings2) => settings2.ui.axesPanel,
-              (settings2, value) => settings2.ui.axesPanel = value
-            ),
-            settingsToggle(
-              "Show Performance Panel",
-              (settings2) => settings2.ui.performance,
-              (settings2, value) => settings2.ui.performance = value
-            ),
-            settingsSubtitle("Axes"),
-            settingsToggle(
-              "Show Orthographic Button",
-              (settings2) => settings2.ui.orthographic,
-              (settings2, value) => settings2.ui.orthographic = value
-            ),
-            settingsToggle(
-              "Show Reset Camera Button",
-              (settings2) => settings2.ui.resetCamera,
-              (settings2, value) => settings2.ui.resetCamera = value
-            ),
-            settingsSubtitle("Control Bar"),
-            settingsToggle(
-              "Show Control Bar",
-              (settings2) => settings2.ui.controlBar,
-              (settings2, value) => settings2.ui.controlBar = value
-            ),
-            settingsSubtitle("Control Bar - Cursors"),
-            settingsToggle(
-              "Show Orbit Button",
-              (settings2) => settings2.ui.orbit,
-              (settings2, value) => settings2.ui.orbit = value
-            ),
-            settingsToggle(
-              "Show Look Around Button",
-              (settings2) => settings2.ui.lookAround,
-              (settings2, value) => settings2.ui.lookAround = value
-            ),
-            settingsToggle(
-              "Show Pan Button",
-              (settings2) => settings2.ui.pan,
-              (settings2, value) => settings2.ui.pan = value
-            ),
-            settingsToggle(
-              "Show Zoom Button",
-              (settings2) => settings2.ui.zoom,
-              (settings2, value) => settings2.ui.zoom = value
-            ),
-            settingsToggle(
-              "Show Zoom Window Button",
-              (settings2) => settings2.ui.zoomWindow,
-              (settings2, value) => settings2.ui.zoomWindow = value
-            ),
-            settingsSubtitle("Control Bar - Tools"),
-            settingsToggle(
-              "Show Measuring Mode Button",
-              (settings2) => settings2.ui.measuringMode,
-              (settings2, value) => settings2.ui.measuringMode = value
-            ),
-            settingsSubtitle("Control Bar - Settings"),
-            settingsToggle(
-              "Show Project Inspector Button",
-              (settings2) => settings2.ui.projectInspector,
-              (settings2, value) => settings2.ui.projectInspector = value
-            ),
-            settingsToggle(
-              "Show Settings Button",
-              (settings2) => settings2.ui.settings,
-              (settings2, value) => settings2.ui.settings = value
-            ),
-            settingsToggle(
-              "Show Help Button",
-              (settings2) => settings2.ui.help,
-              (settings2, value) => settings2.ui.help = value
-            ),
-            settingsToggle(
-              "Show Maximise Button",
-              (settings2) => settings2.ui.maximise,
-              (settings2, value) => settings2.ui.maximise = value
-            )
-          ] })
-        ]
-      }
-    );
-  }
   const MenuToastMemo = React2.memo(MenuToast);
   function MenuToast(props) {
     const [visible2, setVisible] = React2.useState();
@@ -74399,118 +74257,6 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     });
   }
-  function useSettings(viewer, value) {
-    const merged = createSettings(value);
-    const [settings2, setSettings] = React2.useState(merged);
-    const onUpdate = React2.useRef();
-    const update = function(updater) {
-      var _a3;
-      const next = { ...settings2 };
-      updater(next);
-      saveSettingsToLocal(next);
-      setSettings(next);
-      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
-    };
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, []);
-    React2.useEffect(() => {
-      applySettings(viewer, settings2);
-    }, [settings2]);
-    return React2.useMemo(
-      () => ({
-        value: settings2,
-        update,
-        register: (v) => onUpdate.current = v
-      }),
-      [settings2]
-    );
-  }
-  function applySettings(viewer, settings2) {
-    const performance2 = document.getElementsByClassName("vim-performance-div")[0];
-    if (performance2) {
-      if (isTrue(settings2.ui.performance)) {
-        performance2.classList.remove("vc-hidden");
-      } else {
-        performance2.classList.add("vc-hidden");
-      }
-    }
-  }
-  function createContainer(element) {
-    let root = element;
-    if (root === void 0) {
-      root = document.createElement("div");
-      document.body.append(root);
-      root.classList.add("vc-inset-0");
-    }
-    root.style.position = "absolute";
-    root.classList.add("vim-component");
-    const gfx = document.createElement("div");
-    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
-    const ui = document.createElement("div");
-    ui.className = "vim-ui vc-absolute vc-inset-0";
-    root.append(gfx);
-    root.append(ui);
-    const dispose = () => {
-      if (element === void 0) {
-        root.remove();
-      } else {
-        root.classList.remove("vim-component");
-        gfx.remove();
-        ui.remove();
-      }
-    };
-    return { root, ui, gfx, dispose };
-  }
-  async function getElements(vim) {
-    var _a3, _b2, _c, _d, _e;
-    if (!vim.bim) return [];
-    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
-      [
-        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
-        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
-        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
-        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
-        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
-      ]
-    );
-    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
-    if (!elements) return void 0;
-    const result = elements.map((e) => {
-      var _a4;
-      return {
-        ...e,
-        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
-        categoryName: category ? category[e.categoryIndex] : void 0,
-        familyTypeName: familyTypeMap.get(e.index),
-        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
-        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
-      };
-    });
-    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
-    return real;
-  }
-  async function getFamilyTypeNameMap(document2) {
-    const [
-      familyInstanceElement,
-      familyInstanceFamilyType,
-      familyTypeElement,
-      elementName
-    ] = await Promise.all([
-      document2.familyInstance.getAllElementIndex(),
-      document2.familyInstance.getAllFamilyTypeIndex(),
-      document2.familyType.getAllElementIndex(),
-      document2.element.getAllName()
-    ]);
-    return new Map(
-      familyInstanceElement.map((e, i2) => {
-        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
-        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
-        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
-        return [e, name];
-      })
-    );
-  }
   class MutableState {
     constructor(initial) {
       __publicField(this, "_value");
@@ -74539,24 +74285,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       }
     };
   }
-  function useStateRef(initialValue) {
-    const [value, setValue] = React2.useState(initialValue);
+  function useStateRef(initialValue, isLazy = false) {
+    const getInitialValue = () => {
+      if (isLazy && typeof initialValue === "function") {
+        return initialValue();
+      }
+      return initialValue;
+    };
+    const [box, setBox] = React2.useState(() => ({
+      current: getInitialValue()
+    }));
     const ref = React2.useRef(void 0);
     if (ref.current === void 0) {
-      if (typeof initialValue === "function") {
-        ref.current = initialValue();
-      } else {
-        ref.current = initialValue;
-      }
+      ref.current = getInitialValue();
     }
     const event = React2.useRef(new distExports.SimpleEventDispatcher());
     const validate = React2.useRef((next, current) => next);
-    const confirm = React2.useRef((value2) => value2);
-    const set2 = (value2) => {
-      const finalValue = validate.current(value2, ref.current);
+    const confirm = React2.useRef((value) => value);
+    const set2 = (value) => {
+      const finalValue = validate.current(value, ref.current);
       if (finalValue === ref.current) return;
       ref.current = finalValue;
-      setValue(finalValue);
+      setBox({ current: finalValue });
       event.current.dispatch(finalValue);
     };
     return {
@@ -74582,8 +74332,8 @@ Averrage Date/Second ${avgDataRatePS} kb
        */
       useOnChange(on) {
         React2.useEffect(() => {
-          return event.current.subscribe((value2) => {
-            const result = on(value2);
+          return event.current.subscribe((value) => {
+            const result = on(value);
             if (result instanceof Promise) {
               result.catch(console.error);
             }
@@ -74597,7 +74347,7 @@ Averrage Date/Second ${avgDataRatePS} kb
        * @returns The memoized value.
        */
       useMemo(on, deps) {
-        return React2.useMemo(() => on(value), [...deps || [], value]);
+        return React2.useMemo(() => on(box.current), [...deps || [], box.current]);
       },
       /**
        * Sets a validation function to process any new state value before updating.
@@ -74774,37 +74524,145 @@ Averrage Date/Second ${avgDataRatePS} kb
     useRefresher,
     useStateRef
   }, Symbol.toStringTag, { value: "Module" }));
-  function useViewerState(viewer) {
-    const getVim = () => {
+  function useSettings(value, defaultSettings, applySettings = () => {
+  }) {
+    const merged = createSettings(value, defaultSettings);
+    const [settings2, setSettings] = React2.useState(merged);
+    const onUpdate = React2.useRef();
+    const customizer = useStateRef((settings22) => settings22);
+    const update = function(updater) {
       var _a3;
-      const v = (_a3 = viewer.vims) == null ? void 0 : _a3[0];
-      return v;
-    };
-    const getSelection = () => {
-      return [...viewer.selection.getAll()].filter((o) => o.type === "Element3D");
-    };
-    const vim = useStateRef(getVim());
-    const selection = useStateRef(getSelection());
-    const allElements = useStateRef([]);
-    const filteredElements = useStateRef([]);
-    const filter2 = useStateRef("");
-    const applyFilter = () => {
-      const filtered = filterElements(allElements.get(), filter2.get());
-      filteredElements.set(filtered);
+      const next = { ...settings2 };
+      updater(next);
+      saveSettingsToLocal(next);
+      setSettings(next);
+      (_a3 = onUpdate.current) == null ? void 0 : _a3.call(onUpdate, next);
     };
-    vim.useOnChange(async (v) => {
-      const elements = await getElements(v);
-      allElements.set(elements);
-    });
-    filter2.useOnChange((f) => {
-      applyFilter();
-    });
-    allElements.useOnChange((elements) => {
-      applyFilter();
-    });
     React2.useEffect(() => {
-      const subLoad = viewer.onVimLoaded.subscribe(() => {
-        vim.set(getVim());
+      applySettings(settings2);
+    }, []);
+    React2.useEffect(() => {
+      applySettings(settings2);
+    }, [settings2]);
+    return React2.useMemo(
+      () => ({
+        value: settings2,
+        update,
+        register: (v) => onUpdate.current = v,
+        customizer
+      }),
+      [settings2]
+    );
+  }
+  function createSettings(settings2, defaultSettings) {
+    return settings2 !== void 0 ? deepmerge(defaultSettings, settings2) : defaultSettings;
+  }
+  function createContainer(element) {
+    let root = element;
+    if (root === void 0) {
+      root = document.createElement("div");
+      document.body.append(root);
+      root.classList.add("vc-inset-0");
+    }
+    root.style.position = "absolute";
+    root.classList.add("vim-component");
+    const gfx = document.createElement("div");
+    gfx.className = "vim-gfx vc-absolute vc-inset-0 vc-pointer-events-none";
+    const ui = document.createElement("div");
+    ui.className = "vim-ui vc-absolute vc-inset-0";
+    root.append(gfx);
+    root.append(ui);
+    const dispose = () => {
+      if (element === void 0) {
+        root.remove();
+      } else {
+        root.classList.remove("vim-component");
+        gfx.remove();
+        ui.remove();
+      }
+    };
+    return { root, ui, gfx, dispose };
+  }
+  async function getElements(vim) {
+    var _a3, _b2, _c, _d, _e;
+    if (!vim.bim) return [];
+    const [elements, bimDocument, category, levels, worksets] = await Promise.all(
+      [
+        (_a3 = vim.bim.element) == null ? void 0 : _a3.getAll(),
+        (_b2 = vim.bim.bimDocument) == null ? void 0 : _b2.getAllTitle(),
+        (_c = vim.bim.category) == null ? void 0 : _c.getAllName(),
+        (_d = vim.bim.level) == null ? void 0 : _d.getAllElementIndex(),
+        (_e = vim.bim.workset) == null ? void 0 : _e.getAllName()
+      ]
+    );
+    const familyTypeMap = await getFamilyTypeNameMap(vim.bim);
+    if (!elements) return void 0;
+    const result = elements.map((e) => {
+      var _a4;
+      return {
+        ...e,
+        bimDocumentName: bimDocument ? bimDocument[e.bimDocumentIndex] : void 0,
+        categoryName: category ? category[e.categoryIndex] : void 0,
+        familyTypeName: familyTypeMap.get(e.index),
+        levelName: levels ? (_a4 = elements[levels[(e == null ? void 0 : e.levelIndex) ?? -1]]) == null ? void 0 : _a4.name : void 0,
+        worksetName: worksets ? worksets[(e == null ? void 0 : e.worksetIndex) ?? -1] : void 0
+      };
+    });
+    const real = result.filter((e) => vim.getElementFromIndex(e.index).hasMesh);
+    return real;
+  }
+  async function getFamilyTypeNameMap(document2) {
+    const [
+      familyInstanceElement,
+      familyInstanceFamilyType,
+      familyTypeElement,
+      elementName
+    ] = await Promise.all([
+      document2.familyInstance.getAllElementIndex(),
+      document2.familyInstance.getAllFamilyTypeIndex(),
+      document2.familyType.getAllElementIndex(),
+      document2.element.getAllName()
+    ]);
+    return new Map(
+      familyInstanceElement.map((e, i2) => {
+        const familyType = familyInstanceFamilyType == null ? void 0 : familyInstanceFamilyType[i2];
+        const element = Number.isInteger(familyType) ? familyTypeElement[familyType] : void 0;
+        const name = Number.isInteger(element) ? elementName == null ? void 0 : elementName[element] : void 0;
+        return [e, name];
+      })
+    );
+  }
+  function useViewerState(viewer) {
+    const getVim = () => {
+      var _a3;
+      const v = (_a3 = viewer.vims) == null ? void 0 : _a3[0];
+      return v;
+    };
+    const getSelection = () => {
+      return [...viewer.selection.getAll()].filter((o) => o.type === "Element3D");
+    };
+    const vim = useStateRef(getVim());
+    const selection = useStateRef(getSelection());
+    const allElements = useStateRef([]);
+    const filteredElements = useStateRef([]);
+    const filter2 = useStateRef("");
+    const applyFilter = () => {
+      const filtered = filterElements(allElements.get(), filter2.get());
+      filteredElements.set(filtered);
+    };
+    vim.useOnChange(async (v) => {
+      const elements = await getElements(v);
+      allElements.set(elements);
+    });
+    filter2.useOnChange((f) => {
+      applyFilter();
+    });
+    allElements.useOnChange((elements) => {
+      applyFilter();
+    });
+    React2.useEffect(() => {
+      const subLoad = viewer.onVimLoaded.subscribe(() => {
+        vim.set(getVim());
       });
       const subSelect = viewer.selection.onSelectionChanged.subscribe(() => {
         selection.set(getSelection());
@@ -74915,12 +74773,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const vcLink = `${vcColorLink} vc-underline`;
   const vcLabel = "vc-text-[#3F444F]";
   const vcRoboto = "vc-font-['Roboto',sans-serif]";
-  function footer$1(url) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: `vc-text-xs vc-font-normal ${vcColorSecondary}`, children: [
-      "More troubleshooting tips can be found",
-      " ",
-      link(url, "here")
-    ] });
+  function footer$1() {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   }
   function mainText(text) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `vim-main-text vc-text-base ${vcColorPrimary} vc-mb-4 vc-font-normal`, children: text });
@@ -74968,20 +74822,11 @@ Averrage Date/Second ${avgDataRatePS} kb
     vcLink,
     vcRoboto
   }, Symbol.toStringTag, { value: "Module" }));
-  const support = "https://docs.vimaec.com";
-  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
-  const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
-  const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    support,
-    supportControls,
-    supportUltra
-  }, Symbol.toStringTag, { value: "Module" }));
   function fileOpeningError(url) {
     return {
       title: "File Opening Error",
       body: serverFileOpeningErrorBody(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75003,7 +74848,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "File Downloading Error",
       body: body$5(url, authToken, server),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75032,7 +74877,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "File Loading Error",
       body: body$4(url),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75052,11 +74897,18 @@ Averrage Date/Second ${avgDataRatePS} kb
       ])
     ] });
   }
+  const supportUltra = "https://docs.vimaec.com/docs/vim-for-windows/configuring-vim-ultra";
+  const supportControls = "https://docs.vimaec.com/docs/vim-cloud/webgl-navigation-and-controls-guide";
+  const urls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    supportControls,
+    supportUltra
+  }, Symbol.toStringTag, { value: "Module" }));
   function serverConnectionError(url) {
     return {
       title: "Connection Error",
       body: body$3(url, isLocalUrl(url)),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75086,7 +74938,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "Compatibility Error",
       body: body$2(url, localVersion, remoteVersion),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75115,7 +74967,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return {
       title: "Stream Error",
       body: body$1(),
-      footer: footer$1(support),
+      footer: footer$1(),
       canClose: false
     };
   }
@@ -75892,7 +75744,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   }
   const Ids = {
     showGhost: "isolationPanel.showGhost",
-    ghostOpacity: "isolationPanel.ghostOpacity"
+    ghostOpacity: "isolationPanel.ghostOpacity",
+    transparency: "isolationPanel.transparency"
   };
   const IsolationPanel$1 = React2.forwardRef(
     (props, ref) => {
@@ -75904,8 +75757,20 @@ Averrage Date/Second ${avgDataRatePS} kb
           anchorElement: document.getElementById("vim-control-bar"),
           showPanel: props.state.showPanel,
           entries: [
-            { type: "bool", id: Ids.showGhost, label: "Show Ghost", state: props.state.showGhost },
-            // { type: "bool", id: "showRooms", label: "Show Rooms", state: props.state.showRooms },
+            {
+              type: "bool",
+              id: Ids.showGhost,
+              label: "Show Ghost",
+              state: props.state.showGhost
+            },
+            /*
+            {
+              type: "bool",
+              id: "showRooms",
+              label: "Show Rooms",
+              state: props.state.showRooms
+            },
+            */
             {
               type: "number",
               id: Ids.ghostOpacity,
@@ -75915,6 +75780,13 @@ Averrage Date/Second ${avgDataRatePS} kb
               min: 0,
               max: 1,
               step: 0.05
+            },
+            {
+              type: "bool",
+              visible: () => props.transparency,
+              id: Ids.transparency,
+              label: "Transparency",
+              state: props.state.transparency
             }
           ]
         }
@@ -75923,12 +75795,13 @@ Averrage Date/Second ${avgDataRatePS} kb
   );
   function useSharedIsolation(adapter) {
     const _adapter = React2.useRef(adapter);
-    const visibility = useStateRef(() => adapter.computeVisibility());
+    const visibility = useStateRef(() => adapter.computeVisibility(), true);
     const autoIsolate2 = useStateRef(false);
     const showPanel = useStateRef(false);
     const showRooms = useStateRef(false);
     const showGhost = useStateRef(false);
-    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity());
+    const ghostOpacity = useStateRef(() => adapter.getGhostOpacity(), true);
+    const transparency = useStateRef(true);
     const onAutoIsolate = useFuncRef(() => {
       if (adapter.hasSelection()) {
         adapter.isolateSelection();
@@ -75953,6 +75826,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     });
     showGhost.useOnChange((v) => adapter.showGhost(v));
     showRooms.useOnChange((v) => adapter.setShowRooms(v));
+    transparency.useOnChange((v) => adapter.enableTransparency(v));
     ghostOpacity.useValidate((next, current) => {
       return next <= 0 ? current : next;
     });
@@ -75966,7 +75840,8 @@ Averrage Date/Second ${avgDataRatePS} kb
       showRooms,
       ghostOpacity,
       onAutoIsolate,
-      onVisibilityChange
+      onVisibilityChange,
+      transparency
     };
   }
   function useWebglIsolation(viewer) {
@@ -75974,6 +75849,29 @@ Averrage Date/Second ${avgDataRatePS} kb
     return useSharedIsolation(adapter);
   }
   function createWebglIsolationAdapter(viewer) {
+    var transparency = true;
+    var ghost2 = false;
+    var rooms = false;
+    function updateMaterials() {
+      viewer.renderer.modelMaterial = !ghost2 && transparency ? void 0 : ghost2 && transparency ? [void 0, viewer.materials.ghost] : !ghost2 && !transparency ? viewer.materials.simple : ghost2 && !transparency ? [viewer.materials.simple, viewer.materials.ghost] : (() => {
+        throw new Error("Unreachable state in isolation materials");
+      })();
+    }
+    function updateVisibility(elements, predicate) {
+      if (elements === "all") {
+        for (let v of viewer.vims) {
+          for (let o of v.getAllElements()) {
+            if (o.type === "Element3D") {
+              o.visible = o.isRoom ? rooms : predicate(o);
+            }
+          }
+        }
+      } else {
+        for (let o of elements) {
+          o.visible = o.isRoom ? rooms : predicate(o);
+        }
+      }
+    }
     return {
       onVisibilityChange: viewer.renderer.onSceneUpdated,
       onSelectionChanged: viewer.selection.onSelectionChanged,
@@ -75982,28 +75880,28 @@ Averrage Date/Second ${avgDataRatePS} kb
       hasVisibleSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => o.visible),
       hasHiddenSelection: () => viewer.selection.any() && viewer.selection.getAll().every((o) => !o.visible),
       clearSelection: () => viewer.selection.clear(),
-      isolateSelection: () => updateAllVisibility(viewer, (o) => viewer.selection.has(o)),
+      isolateSelection: () => updateVisibility("all", (o) => viewer.selection.has(o)),
       hideSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = false);
+        updateVisibility(viewer.selection.getAll(), (o) => false);
       },
       showSelection: () => {
-        viewer.selection.getAll().forEach((o) => o.visible = true);
+        updateVisibility(viewer.selection.getAll(), (o) => true);
       },
       hideAll: () => {
-        updateAllVisibility(viewer, (o) => false);
+        updateVisibility("all", (o) => false);
       },
       showAll: () => {
-        updateAllVisibility(viewer, (o) => true);
+        updateVisibility("all", (o) => true);
       },
       isolate: (instances) => {
         const set2 = new Set(instances);
-        updateAllVisibility(viewer, (o) => o.instances.some((i2) => set2.has(i2)));
+        updateVisibility("all", (o) => o.instances.some((i2) => set2.has(i2)));
       },
       show: (instances) => {
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = true;
+            o.visible = o.isRoom ? rooms : true;
           }
         }
       },
@@ -76011,29 +75909,30 @@ Averrage Date/Second ${avgDataRatePS} kb
         for (let i2 of instances) {
           for (let v of viewer.vims) {
             const o = v.getElement(i2);
-            o.visible = false;
+            o.visible = o.isRoom ? rooms : false;
           }
         }
       },
+      enableTransparency: (enable) => {
+        if (transparency !== enable) {
+          transparency = enable;
+          updateMaterials();
+        }
+      },
       showGhost: (show) => {
-        viewer.renderer.modelMaterial = show ? [viewer.materials.simple, viewer.materials.ghost] : void 0;
+        ghost2 = show;
+        updateMaterials();
       },
       getGhostOpacity: () => viewer.materials.ghostOpacity,
       setGhostOpacity: (opacity) => viewer.materials.ghostOpacity = opacity,
-      getShowRooms: () => true,
+      getShowRooms: () => rooms,
       setShowRooms: (show) => {
-        console.log("setShowRooms not implemented");
-      }
-    };
-  }
-  function updateAllVisibility(viewer, predicate) {
-    for (let v of viewer.vims) {
-      for (let o of v.getAllElements()) {
-        if (o.type === "Element3D") {
-          o.visible = predicate(o);
+        if (rooms !== show) {
+          rooms = show;
+          updateVisibility("all", (o) => o.visible);
         }
       }
-    }
+    };
   }
   function getVisibilityState$1(viewer) {
     let all = true;
@@ -76059,6 +75958,575 @@ Averrage Date/Second ${avgDataRatePS} kb
     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,
+        measuringMode: true,
+        // Control bar - Visibility
+        visibilityEnable: true,
+        visibilityClearSelection: true,
+        visibilityShowAll: true,
+        visibilityToggle: true,
+        visibilityIsolate: true,
+        visibilityAutoIsolate: true,
+        visibilitySettings: true,
+        // Control bar - settings
+        projectInspector: true,
+        settings: true,
+        help: true,
+        maximise: true
+      }
+    };
+  }
+  function renderSettingsInputBox(settings2, item) {
+    const ref = React2.useRef(null);
+    React2.useEffect(() => {
+      var _a3;
+      ref.current.value = (_a3 = item.getter(settings2.value)) == null ? void 0 : _a3.toString();
+    }, []);
+    const update = (event) => {
+      const str = event.target.value;
+      const n = Number.parseFloat(str);
+      if (Number.isNaN(n)) {
+        event.target.value = item.getter(settings2.value).toString();
+      } else {
+        const value = item.transform(n);
+        event.target.value = value.toString();
+        settings2.update((s) => item.setter(s, value));
+      }
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-box-input vc-my-1 ", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2", children: [
+        item.label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          ref,
+          type: "text",
+          className: "vim-settings-textbox vc-border vc-rounded-sm vc-border-gray vc-w-14 vc-ml-1 vc-p-1",
+          onBlur: update
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "textbox", className: "vc-w-3 vc-h-2 vc-text-gray vc-ml-1", children: item.info })
+    ] });
+  }
+  function renderSettingsToggle(settings2, item) {
+    const value = item.getter(settings2.value);
+    if (value === "AlwaysTrue" || value === "AlwaysFalse") return null;
+    const handleChange = () => {
+      const current = item.getter(settings2.value);
+      settings2.update((s) => item.setter(s, !current));
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "vc-m-1 vc-block vc-select-none vc-items-center vc-py-1 vc-text-gray-warm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value,
+          onChange: handleChange,
+          className: "vim-settings-checkbox vc-checked:bg-primary-royal vc-mr-2 vc-rounded vc-border vc-border-gray-medium"
+        }
+      ),
+      " ",
+      item.label
+    ] });
+  }
+  function renderSettingsSubtitle(item) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-subtitle", children: item.title });
+  }
+  function SettingsPanel(props) {
+    if (!props.visible) return null;
+    function renderItem(settings2, item) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(React2.Fragment, { children: (() => {
+        switch (item.type) {
+          case "subtitle":
+            return renderSettingsSubtitle(item);
+          case "toggle":
+            return renderSettingsToggle(settings2, item);
+          case "box":
+            return renderSettingsInputBox(settings2, item);
+          case "element":
+            return item.element;
+          default:
+            return null;
+        }
+      })() }, item.key);
+    }
+    const customizer = props.settings.customizer.get();
+    const content2 = customizer ? customizer(props.content) : props.content;
+    const sections = buildSections(content2);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vc-absolute vc-inset-0", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "vc-title vc-mb-2", children: "Settings" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "\r\n        vim-settings\r\n        vc-absolute vc-top-8 vc-left-0 vc-right-0 vc-bottom-0\r\n        vc-overflow-y-auto\r\n        vc-pr-2\r\n        vc-space-y-2\r\n        vc-box-border\r\n      ", children: sections.map((section) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "details",
+        {
+          open: true,
+          className: "\r\n              vim-settings-section\r\n              vc-bg-white\r\n              vc-rounded-md\r\n              vc-shadow-sm\r\n              vc-border\r\n              vc-border-slate-200\r\n              vc-p-2\r\n              vc-space-y-2\r\n            ",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { className: "vim-settings-section-title vc-font-medium vc-text-sm vc-cursor-pointer", children: section.title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vim-settings-section-content vc-mt-2 vc-space-y-2", children: section.items.map(
+              (item) => renderItem(props.settings, item)
+            ) })
+          ]
+        },
+        section.key
+      )) })
+    ] });
+  }
+  function buildSections(items) {
+    const sections = [];
+    let current = null;
+    for (const item of items) {
+      if (item.type === "subtitle") {
+        current = {
+          key: item.key,
+          title: item.title,
+          items: []
+        };
+        sections.push(current);
+      } else {
+        if (!current) {
+          current = {
+            key: "default",
+            title: "",
+            items: []
+          };
+          sections.push(current);
+        }
+        current.items.push(item);
+      }
+    }
+    return sections;
+  }
+  class SettingsPanelKeys {
+  }
+  // === Inputs ===
+  __publicField(SettingsPanelKeys, "InputsSubtitle", "inputs");
+  __publicField(SettingsPanelKeys, "InputsScrollSpeedBox", "scrollSpeed");
+  // === Panels ===
+  __publicField(SettingsPanelKeys, "PanelsSubtitle", "panels");
+  __publicField(SettingsPanelKeys, "PanelsShowLogoToggle", "logo");
+  __publicField(SettingsPanelKeys, "PanelsShowBimTreeToggle", "bimTree");
+  __publicField(SettingsPanelKeys, "PanelsShowBimInfoToggle", "bimInfo");
+  __publicField(SettingsPanelKeys, "PanelsShowAxesPanelToggle", "axesPanel");
+  __publicField(SettingsPanelKeys, "PanelsShowPerformancePanelToggle", "performance");
+  // === Axes ===
+  __publicField(SettingsPanelKeys, "AxesSubtitle", "axes");
+  __publicField(SettingsPanelKeys, "AxesShowOrthographicButtonToggle", "orthographic");
+  __publicField(SettingsPanelKeys, "AxesShowResetCameraButtonToggle", "resetCamera");
+  // === Control Bar ===
+  __publicField(SettingsPanelKeys, "ControlBarSubtitle", "controlBar");
+  __publicField(SettingsPanelKeys, "ControlBarShowControlBarToggle", "controlBarVisible");
+  // --- Control Bar - Cursors ---
+  __publicField(SettingsPanelKeys, "ControlBarCursorsSubtitle", "controlBarCursors");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowOrbitButtonToggle", "orbit");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowLookAroundButtonToggle", "lookAround");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowPanButtonToggle", "pan");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomButtonToggle", "zoom");
+  __publicField(SettingsPanelKeys, "ControlBarCursorsShowZoomWindowButtonToggle", "zoomWindow");
+  // --- Control Bar - Tools ---
+  __publicField(SettingsPanelKeys, "ControlBarToolsSubtitle", "controlBarTools");
+  __publicField(SettingsPanelKeys, "ControlBarToolsShowMeasuringModeButtonToggle", "measuringMode");
+  // --- Control Bar Camera ---
+  __publicField(SettingsPanelKeys, "ControlBarCameraSubtitle", "settingsPanel.controlBar.Camera");
+  __publicField(SettingsPanelKeys, "ControlBarAutoCamera", "settingsPanel.controlBar.autoCamera");
+  __publicField(SettingsPanelKeys, "ControlBarFrameSelection", "settingsPanel.controlBar.frameSelection");
+  __publicField(SettingsPanelKeys, "ControlBarFrameAll", "settingsPanel.controlBar.frameAll");
+  // --- Control Bar - Sectioning ---
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSubtitle", "settingsPanel.controlBar.sectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningEnable", "settingsPanel.controlBar.enableSectioning");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningFitToSelection", "settingsPanel.controlBar.fitToSelection");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningReset", "settingsPanel.controlBar.reset");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningShow", "settingsPanel.controlBar.show");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningAuto", "settingsPanel.controlBar.auto");
+  __publicField(SettingsPanelKeys, "ControlBarSectioningSettings", "settingsPanel.controlBar.settings");
+  // --- Control Bar - Visibility ---
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySubtitle", "controlBar.visibility.subtitle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityClearSelection", "controlBar.visibility.clearSelection");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityShowAll", "controlBar.visibility.showAll");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityToggle", "controlBar.visibility.toggle");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityIsolate", "controlBar.visibility.isolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilityAutoIsolate", "controlBar.visibility.autoIsolate");
+  __publicField(SettingsPanelKeys, "ControlBarVisibilitySettings", "controlBar.visibility.settings");
+  // --- Control Bar - Settings ---
+  __publicField(SettingsPanelKeys, "ControlBarSettingsSubtitle", "controlBarSettings");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowProjectInspectorButtonToggle", "projectInspector");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowSettingsButtonToggle", "settingsButton");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowHelpButtonToggle", "help");
+  __publicField(SettingsPanelKeys, "ControlBarSettingsShowMaximiseButtonToggle", "maximise");
+  function getControlBarCursorSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarCursorsSubtitle,
+        title: "Control Bar - Cursors"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowOrbitButtonToggle,
+        label: "Orbit",
+        getter: (s) => s.ui.cursorOrbit,
+        setter: (s, v) => s.ui.cursorOrbit = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowLookAroundButtonToggle,
+        label: "Look Around",
+        getter: (s) => s.ui.cursorLookAround,
+        setter: (s, v) => s.ui.cursorLookAround = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowPanButtonToggle,
+        label: "Pan",
+        getter: (s) => s.ui.cursorPan,
+        setter: (s, v) => s.ui.cursorPan = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarCursorsShowZoomButtonToggle,
+        label: "Zoom",
+        getter: (s) => s.ui.cursorZoom,
+        setter: (s, v) => s.ui.cursorZoom = v
+      }
+    ];
+  }
+  function getControlBarCameraSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarCameraSubtitle,
+        title: "Control Bar - Camera"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarAutoCamera,
+        label: "Auto Camera",
+        getter: (s) => s.ui.cameraAuto,
+        setter: (s, v) => s.ui.cameraAuto = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarFrameSelection,
+        label: "Frame Selection",
+        getter: (s) => s.ui.cameraFrameSelection,
+        setter: (s, v) => s.ui.cameraFrameSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarFrameAll,
+        label: "Frame All",
+        getter: (s) => s.ui.cameraFrameScene,
+        setter: (s, v) => s.ui.cameraFrameScene = v
+      }
+    ];
+  }
+  function getControlBarSectionBoxSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarSectioningSubtitle,
+        title: "Control Bar - Sectioning"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningEnable,
+        label: "Enable Sectioning",
+        getter: (s) => s.ui.sectioningEnable,
+        setter: (s, v) => s.ui.sectioningEnable = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningFitToSelection,
+        label: "Fit To Selection",
+        getter: (s) => s.ui.sectioningFitToSelection,
+        setter: (s, v) => s.ui.sectioningFitToSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningReset,
+        label: "Reset",
+        getter: (s) => s.ui.sectioningReset,
+        setter: (s, v) => s.ui.sectioningReset = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningShow,
+        label: "Show",
+        getter: (s) => s.ui.sectioningShow,
+        setter: (s, v) => s.ui.sectioningShow = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningAuto,
+        label: "Auto",
+        getter: (s) => s.ui.sectioningAuto,
+        setter: (s, v) => s.ui.sectioningAuto = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSectioningSettings,
+        label: "Settings",
+        getter: (s) => s.ui.sectioningSettings,
+        setter: (s, v) => s.ui.sectioningSettings = v
+      }
+    ];
+  }
+  function getControlBarVisibilitySettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarVisibilitySubtitle,
+        title: "Control Bar - Visibility"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityClearSelection,
+        label: "Clear Selection",
+        getter: (s) => s.ui.visibilityClearSelection,
+        setter: (s, v) => s.ui.visibilityClearSelection = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityShowAll,
+        label: "Show All",
+        getter: (s) => s.ui.visibilityShowAll,
+        setter: (s, v) => s.ui.visibilityShowAll = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityToggle,
+        label: "Toggle",
+        getter: (s) => s.ui.visibilityToggle,
+        setter: (s, v) => s.ui.visibilityToggle = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityIsolate,
+        label: "Isolate",
+        getter: (s) => s.ui.visibilityIsolate,
+        setter: (s, v) => s.ui.visibilityIsolate = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilityAutoIsolate,
+        label: "Auto Isolate",
+        getter: (s) => s.ui.visibilityAutoIsolate,
+        setter: (s, v) => s.ui.visibilityAutoIsolate = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarVisibilitySettings,
+        label: "Settings",
+        getter: (s) => s.ui.visibilitySettings,
+        setter: (s, v) => s.ui.visibilitySettings = v
+      }
+    ];
+  }
+  function getControlBarVariousSettings() {
+    return [
+      {
+        type: "subtitle",
+        key: SettingsPanelKeys.ControlBarSettingsSubtitle,
+        title: "Control Bar - Settings"
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowProjectInspectorButtonToggle,
+        label: "Project Inspector",
+        getter: (s) => s.ui.projectInspector,
+        setter: (s, v) => s.ui.projectInspector = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowSettingsButtonToggle,
+        label: "Settings",
+        getter: (s) => s.ui.settings,
+        setter: (s, v) => s.ui.settings = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowHelpButtonToggle,
+        label: "Help",
+        getter: (s) => s.ui.help,
+        setter: (s, v) => s.ui.help = v
+      },
+      {
+        type: "toggle",
+        key: SettingsPanelKeys.ControlBarSettingsShowMaximiseButtonToggle,
+        label: "Maximise",
+        getter: (s) => s.ui.maximise,
+        setter: (s, v) => s.ui.maximise = 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.measuringMode,
+        setter: (s, v) => s.ui.measuringMode = 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();
@@ -76089,7 +76557,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer$1(props) {
-    const settings2 = useSettings(props.viewer, props.settings ?? {});
+    const settings2 = useSettings(props.settings ?? {}, getDefaultSettings(), (s) => applyWebglSettings(s));
     const modal = React2.useRef(null);
     const sectionBoxRef = useWebglSectionBox(props.viewer);
     const isolationPanelHandle = React2.useRef(null);
@@ -76138,7 +76606,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         loader: loader.current,
         isolation: isolationRef,
         camera: camera2,
-        settings: settings2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76184,7 +76656,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         SettingsPanel,
         {
           visible: side.getContent() === "settings",
-          viewer: props.viewer,
+          content: getWebglSettingsContent(props.viewer),
           settings: settings2
         }
       )
@@ -76213,7 +76685,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             }
           ),
           /* @__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,
             {
@@ -76252,7 +76724,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer: Viewer$1,
-    createViewer: createViewer$1
+    createViewer: createViewer$1,
+    getDefaultSettings
   }, Symbol.toStringTag, { value: "Module" }));
   function getErrorMessage(state) {
     if (state.status !== "error") return void 0;
@@ -76318,11 +76791,13 @@ Averrage Date/Second ${avgDataRatePS} kb
     };
     return useSectionBox(ultraAdapter);
   }
-  function useUltraControlBar(viewer, section, isolation, camera2, customization) {
-    const sectionSectionBox2 = controlBarSectionBox(section, viewer.selection.any());
-    const selection = controlBarSelection(isolation);
-    const sectionCamera2 = controlBarCamera(camera2);
-    let bar = [selection, sectionCamera2, sectionSectionBox2];
+  function useUltraControlBar(viewer, section, isolation, camera2, settings2, side, 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;
   }
@@ -76426,6 +76901,9 @@ Averrage Date/Second ${avgDataRatePS} kb
           }
         }
       },
+      enableTransparency: (enable) => {
+        console.log("enableTransparency not implemented");
+      },
       getGhostOpacity: () => viewer.renderer.ghostOpacity,
       setGhostOpacity: (opacity) => {
         viewer.renderer.ghostOpacity = opacity;
@@ -76467,7 +76945,62 @@ Averrage Date/Second ${avgDataRatePS} kb
   function allButSelection(viewer, vim) {
     return false;
   }
-  function createViewer(container) {
+  function getDefaultUltraSettings() {
+    return {
+      ui: {
+        // Control bar - cursors
+        cursorOrbit: true,
+        cursorLookAround: true,
+        cursorPan: true,
+        cursorZoom: true,
+        // Control bar - camera
+        cameraAuto: true,
+        cameraFrameScene: true,
+        cameraFrameSelection: true,
+        // Control bar - tools
+        sectioningEnable: true,
+        sectioningFitToSelection: true,
+        sectioningReset: true,
+        sectioningShow: true,
+        sectioningAuto: true,
+        sectioningSettings: true,
+        // Control bar - Visibility
+        visibilityEnable: true,
+        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);
@@ -76486,6 +77019,7 @@ Averrage Date/Second ${avgDataRatePS} kb
         {
           container: cmpContainer,
           core,
+          settings: settings2,
           onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
         }
       )
@@ -76493,6 +77027,7 @@ Averrage Date/Second ${avgDataRatePS} kb
     return controllablePromise.promise;
   }
   function Viewer(props) {
+    const settings2 = useSettings(props.settings ?? {}, getDefaultUltraSettings());
     const sectionBoxRef = useUltraSectionBox(props.core);
     const camera2 = useUltraCamera(props.core, sectionBoxRef);
     const isolationPanelHandle = React2.useRef(null);
@@ -76502,7 +77037,15 @@ Averrage Date/Second ${avgDataRatePS} kb
     const [_, setSelectState] = React2.useState(0);
     const [controlBarCustom, setControlBarCustom] = React2.useState(() => (c) => c);
     const isolationRef = useUltraIsolation(props.core);
-    const controlBar = useUltraControlBar(props.core, sectionBoxRef, isolationRef, camera2, (_2) => _2);
+    const controlBar = useUltraControlBar(
+      props.core,
+      sectionBoxRef,
+      isolationRef,
+      camera2,
+      settings2.value,
+      side,
+      (_2) => _2
+    );
     useViewerInput(props.core.inputs, camera2);
     React2.useEffect(() => {
       sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
@@ -76527,6 +77070,11 @@ Averrage Date/Second ${avgDataRatePS} kb
         isolation: isolationRef,
         sectionBox: sectionBoxRef,
         camera: camera2,
+        settings: {
+          update: settings2.update,
+          register: settings2.register,
+          customize: (c) => settings2.customizer.set(c)
+        },
         get isolationPanel() {
           return isolationPanelHandle.current;
         },
@@ -76541,7 +77089,24 @@ Averrage Date/Second ${avgDataRatePS} kb
         load: patchLoad(props.core, modalHandle)
       });
     }, []);
+    const sidePanel = () => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SettingsPanel,
+      {
+        visible: side.getContent() === "settings",
+        content: getUltraSettingsContent(props.core),
+        settings: settings2
+      }
+    ) });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SidePanelMemo,
+        {
+          container: props.container,
+          viewer: props.core,
+          side,
+          content: sidePanel
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RestOfScreen, { side, content: () => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           whenTrue(true, /* @__PURE__ */ jsxRuntimeExports.jsx(LogoMemo, {})),
@@ -76554,7 +77119,7 @@ Averrage Date/Second ${avgDataRatePS} kb
             }
           ),
           /* @__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: false })
         ] });
       } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ref: modalHandle, canFollowLinks: true }),
@@ -76592,7 +77157,8 @@ Averrage Date/Second ${avgDataRatePS} kb
   const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Viewer,
-    createViewer
+    createViewer,
+    getDefaultUltraSettings
   }, Symbol.toStringTag, { value: "Module" }));
   const SectionBoxPanel = {
     Ids