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

package/dist/vim-web.js

@@ -48851,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) {
@@ -48950,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);
@@ -50100,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.
@@ -55871,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();
   }
   /**
@@ -56963,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);
@@ -57034,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.
@@ -60861,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
    */
@@ -63668,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");
@@ -63766,8 +63779,6 @@ function isFalse(value) {
 }
 const index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createSettings,
-  getDefaultSettings,
   getLocalSettings,
   isFalse,
   isTrue,
@@ -67599,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,
@@ -67607,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),
@@ -67616,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(),
@@ -67625,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
@@ -67633,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()),
@@ -67642,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()),
@@ -67651,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()),
@@ -67669,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,
@@ -67678,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,
@@ -67687,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,
@@ -67696,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,
@@ -67706,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,
@@ -67714,7 +67726,7 @@ function controlBarMeasure(settings2, measure$1) {
     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(),
@@ -67724,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 {
@@ -67766,7 +67795,7 @@ function controlBarSettings(modal, side, settings$1) {
     ]
   };
 }
-function controlBarCamera(camera2) {
+function controlBarCamera(camera2, settings2) {
   return {
     id: Ids$2.sectionCamera,
     enable: () => true,
@@ -67774,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()),
@@ -67782,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,
@@ -67791,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,
@@ -67801,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 {
@@ -67811,6 +67841,7 @@ function controlBarSelection(isolation) {
     buttons: [
       {
         id: Ids$2.buttonClearSelection,
+        enabled: () => isTrue(settings2.visibilityClearSelection),
         tip: "Clear Selection",
         action: () => adapter.clearSelection(),
         icon: pointer,
@@ -67820,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",
@@ -67827,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,
@@ -67836,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,
@@ -67845,6 +67877,7 @@ function controlBarSelection(isolation) {
       },
       {
         id: Ids$2.buttonIsolateSelection,
+        enabled: () => isTrue(settings2.visibilityIsolate),
         tip: "Isolate Selection",
         action: () => adapter.isolateSelection(),
         icon: isolateSelection,
@@ -67853,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(),
@@ -67860,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,
@@ -67870,25 +67905,19 @@ 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);
@@ -73903,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;
@@ -73962,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",
@@ -74045,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();
@@ -74383,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");
@@ -74523,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 {
@@ -74566,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);
           }
@@ -74581,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.
@@ -74758,38 +74508,146 @@ 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 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();
-  });
   useEffect(() => {
-    const subLoad = viewer.onVimLoaded.subscribe(() => {
-      vim.set(getVim());
-    });
+    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());
+  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();
+  });
+  useEffect(() => {
+    const subLoad = viewer.onVimLoaded.subscribe(() => {
+      vim.set(getVim());
+    });
     const subSelect = viewer.selection.onSelectionChanged.subscribe(() => {
       selection.set(getSelection());
     });
@@ -74899,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 });
@@ -74952,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
   };
 }
@@ -74987,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
   };
 }
@@ -75016,7 +74861,7 @@ function serverFileLoadingError(url) {
   return {
     title: "File Loading Error",
     body: body$4(url),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -75036,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
   };
 }
@@ -75070,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
   };
 }
@@ -75099,7 +74951,7 @@ function serverStreamError(url) {
   return {
     title: "Stream Error",
     body: body$1(),
-    footer: footer$1(support),
+    footer: footer$1(),
     canClose: false
   };
 }
@@ -75876,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) => {
@@ -75888,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,
@@ -75899,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
           }
         ]
       }
@@ -75907,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();
@@ -75937,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;
   });
@@ -75950,7 +75824,8 @@ function useSharedIsolation(adapter) {
     showRooms,
     ghostOpacity,
     onAutoIsolate,
-    onVisibilityChange
+    onVisibilityChange,
+    transparency
   };
 }
 function useWebglIsolation(viewer) {
@@ -75958,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,
@@ -75966,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;
         }
       }
     },
@@ -75995,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;
@@ -76043,6 +75942,575 @@ 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,
+      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 = 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.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();
@@ -76073,7 +76541,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);
@@ -76122,7 +76590,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;
       },
@@ -76168,7 +76640,7 @@ function Viewer$1(props) {
       SettingsPanel,
       {
         visible: side.getContent() === "settings",
-        viewer: props.viewer,
+        content: getWebglSettingsContent(props.viewer),
         settings: settings2
       }
     )
@@ -76197,7 +76669,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,
           {
@@ -76236,7 +76708,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;
@@ -76302,11 +76775,13 @@ function useUltraSectionBox(viewer) {
   };
   return useSectionBox(ultraAdapter);
 }
-function useUltraControlBar(viewer, section, isolation, camera2, customization) {
-  const sectionSectionBox2 = controlBarSectionBox(section, viewer.selection.any());
-  const selection = controlBarSelection(isolation);
-  const sectionCamera2 = controlBarCamera(camera2);
-  let bar = [selection, sectionCamera2, sectionSectionBox2];
+function useUltraControlBar(viewer, section, isolation, camera2, settings2, side, 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;
 }
@@ -76410,6 +76885,9 @@ function createAdapter(viewer) {
         }
       }
     },
+    enableTransparency: (enable) => {
+      console.log("enableTransparency not implemented");
+    },
     getGhostOpacity: () => viewer.renderer.ghostOpacity,
     setGhostOpacity: (opacity) => {
       viewer.renderer.ghostOpacity = opacity;
@@ -76451,7 +76929,62 @@ 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
+      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);
@@ -76470,6 +77003,7 @@ function createViewer(container) {
       {
         container: cmpContainer,
         core,
+        settings: settings2,
         onMount: (cmp) => controllablePromise.resolve(attachDispose(cmp))
       }
     )
@@ -76477,6 +77011,7 @@ function createViewer(container) {
   return controllablePromise.promise;
 }
 function Viewer3(props) {
+  const settings2 = useSettings(props.settings ?? {}, getDefaultUltraSettings());
   const sectionBoxRef = useUltraSectionBox(props.core);
   const camera2 = useUltraCamera(props.core, sectionBoxRef);
   const isolationPanelHandle = useRef(null);
@@ -76486,7 +77021,15 @@ function Viewer3(props) {
   const [_, setSelectState] = useState(0);
   const [controlBarCustom, setControlBarCustom] = 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);
   useEffect(() => {
     sectionBoxRef.showOffsetPanel.onChange.subscribe((show) => {
@@ -76511,6 +77054,11 @@ function Viewer3(props) {
       isolation: isolationRef,
       sectionBox: sectionBoxRef,
       camera: camera2,
+      settings: {
+        update: settings2.update,
+        register: settings2.register,
+        customize: (c) => settings2.customizer.set(c)
+      },
       get isolationPanel() {
         return isolationPanelHandle.current;
       },
@@ -76525,7 +77073,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, {})),
@@ -76538,7 +77103,7 @@ function Viewer3(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: false })
       ] });
     } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ref: modalHandle, canFollowLinks: true }),
@@ -76576,7 +77141,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